-

packages/components/src/Text/BodyText.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { visualWeights, resolveFontSize } from '@newspaperui/theme';
+import { calculateSpanWidth } from '@newspaperui/utils';
+import { useSection } from '../Section/Section';
+
+export interface BodyTextProps {
+  weight?: 'High' | 'Medium' | 'Low';
+  span?: number;
+  children: React.ReactNode;
+}
+
+export const BodyText: React.FC<BodyTextProps> = ({
+  weight = 'Medium',
+  span,
+  children,
+}) => {
+  const section = useSection();
+  const config = visualWeights.BodyText[weight];
+
+  if (!config) {
+    throw new Error(`Invalid weight: ${weight} for BodyText`);
+  }
+
+  const finalSpan = span || (Array.isArray(config.span) ? config.span[0] : config.span);
+  const width = calculateSpanWidth(finalSpan, section.columns);
+
+  return (
+    <p
+      className="newspaper-body-text"
+      style={{
+        fontSize: resolveFontSize(config.fontSize),
+        fontWeight: config.fontWeight,
+        lineHeight: config.lineHeight,
+        color: config.color,
+        margin: config.margin,
+        width,
+      }}
+      data-weight={weight}
+      data-span={finalSpan}
+    >
+      {children}
+    </p>
+  );
+};

packages/components/src/Text/Byline.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { visualWeights, resolveFontSize } from '@newspaperui/theme';
+
+export interface BylineProps {
+  children: React.ReactNode;
+}
+
+export const Byline: React.FC<BylineProps> = ({ children }) => {
+  const config = visualWeights.Byline.Standard;
+
+  if (!config) {
+    throw new Error('Byline configuration not found');
+  }
+
+  return (
+    <div
+      className="newspaper-byline"
+      style={{
+        fontSize: resolveFontSize(config.fontSize),
+        fontWeight: config.fontWeight,
+        lineHeight: config.lineHeight,
+        color: config.color,
+        margin: config.margin,
+      }}
+    >
+      {children}
+    </div>
+  );
+};

packages/components/src/Text/Caption.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { visualWeights, resolveFontSize } from '@newspaperui/theme';
+
+export interface CaptionProps {
+  children: React.ReactNode;
+}
+
+export const Caption: React.FC<CaptionProps> = ({ children }) => {
+  const config = visualWeights.Caption.Standard;
+
+  if (!config) {
+    throw new Error('Caption configuration not found');
+  }
+
+  return (
+    <figcaption
+      className="newspaper-caption"
+      style={{
+        fontSize: resolveFontSize(config.fontSize),
+        fontWeight: config.fontWeight,
+        lineHeight: config.lineHeight,
+        color: config.color,
+        margin: config.margin,
+      }}
+    >
+      {children}
+    </figcaption>
+  );
+};

packages/components/src/Text/Headline.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import { visualWeights, resolveFontSize } from '@newspaperui/theme';
+import { calculateSpanWidth } from '@newspaperui/utils';
+import { useSection } from '../Section/Section';
+
+const weightToTag: Record<'High' | 'Medium' | 'Low', 'h1' | 'h2' | 'h3'> = {
+  High: 'h1',
+  Medium: 'h2',
+  Low: 'h3',
+};
+
+export interface HeadlineProps {
+  weight?: 'High' | 'Medium' | 'Low';
+  span?: number;
+  as?: 'h1' | 'h2' | 'h3' | 'h4';
+  children: React.ReactNode;
+}
+
+export const Headline: React.FC<HeadlineProps> = ({
+  weight = 'High',
+  span,
+  as,
+  children,
+}) => {
+  const section = useSection();
+  const config = visualWeights.Headline[weight];
+
+  if (!config) {
+    throw new Error(`Invalid weight: ${weight} for Headline`);
+  }
+
+  const finalSpan = span || (Array.isArray(config.span) ? config.span[0] : config.span);
+  const width = calculateSpanWidth(finalSpan, section.columns);
+  const Tag = as ?? weightToTag[weight];
+
+  return (
+    <Tag
+      className="newspaper-headline"
+      style={{
+        fontSize: resolveFontSize(config.fontSize),
+        fontWeight: config.fontWeight,
+        lineHeight: config.lineHeight,
+        color: config.color,
+        margin: config.margin,
+        width,
+      }}
+      data-weight={weight}
+      data-span={finalSpan}
+    >
+      {children}
+    </Tag>
+  );
+};

packages/components/src/Text/Quote.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { visualWeights, resolveFontSize } from '@newspaperui/theme';
+import { calculateSpanWidth } from '@newspaperui/utils';
+import { useSection } from '../Section/Section';
+
+export interface QuoteProps {
+  weight?: 'High' | 'Medium';
+  span?: number;
+  children: React.ReactNode;
+}
+
+export const Quote: React.FC<QuoteProps> = ({
+  weight = 'Medium',
+  span,
+  children,
+}) => {
+  const section = useSection();
+  const config = visualWeights.Quote[weight];
+
+  if (!config) {
+    throw new Error(`Invalid weight: ${weight} for Quote`);
+  }
+
+  const finalSpan = span || (Array.isArray(config.span) ? config.span[0] : config.span);
+  const width = calculateSpanWidth(finalSpan, section.columns);
+
+  return (
+    <blockquote
+      className="newspaper-quote"
+      style={{
+        fontSize: resolveFontSize(config.fontSize),
+        fontWeight: config.fontWeight,
+        lineHeight: config.lineHeight,
+        color: config.color,
+        margin: config.margin,
+        width,
+      }}
+      data-weight={weight}
+      data-span={finalSpan}
+    >
+      {children}
+    </blockquote>
+  );
+};

packages/components/src/Text/Subhead.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { visualWeights, resolveFontSize } from '@newspaperui/theme';
+import { calculateSpanWidth } from '@newspaperui/utils';
+import { useSection } from '../Section/Section';
+
+export interface SubheadProps {
+  weight?: 'High' | 'Medium';
+  span?: number;
+  children: React.ReactNode;
+}
+
+export const Subhead: React.FC<SubheadProps> = ({
+  weight = 'Medium',
+  span,
+  children,
+}) => {
+  const section = useSection();
+  const config = visualWeights.Subhead[weight];
+
+  if (!config) {
+    throw new Error(`Invalid weight: ${weight} for Subhead`);
+  }
+
+  const finalSpan = span || (Array.isArray(config.span) ? config.span[0] : config.span);
+  const width = calculateSpanWidth(finalSpan, section.columns);
+
+  return (
+    <h2
+      className="newspaper-subhead"
+      style={{
+        fontSize: resolveFontSize(config.fontSize),
+        fontWeight: config.fontWeight,
+        lineHeight: config.lineHeight,
+        color: config.color,
+        margin: config.margin,
+        width,
+      }}
+      data-weight={weight}
+      data-span={finalSpan}
+    >
+      {children}
+    </h2>
+  );
+};