@neynar/ui 0.1.1

package/src/components/ui/stories/typography.stories.tsx

@@ -0,0 +1,1586 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import {
+  Typography,
+  H1,
+  H2,
+  H3,
+  H4,
+  H5,
+  H6,
+  P,
+  A,
+  Span,
+  Code,
+  Small,
+  Strong,
+  Lead,
+  Blockquote,
+} from "../typography";
+import { Label } from "../label";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "../card";
+
+/**
+ * Typography component stories for design system documentation
+ *
+ * This story file demonstrates the Typography component's capabilities through three focused stories:
+ * - Interactive: Playground for testing all props and variants
+ * - Variants: Systematic showcase of all available typography variants
+ * - InContext: Real-world usage examples for business and design teams
+ */
+const meta = {
+  title: "Typography/Typography",
+  component: Typography,
+  parameters: {
+    layout: "centered",
+    docs: {
+      description: {
+        component:
+          "A comprehensive typography component providing consistent text styling across the application. Built with semantic HTML elements, accessibility features, and flexible styling options using design system tokens.",
+      },
+    },
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    variant: {
+      control: { type: "select" },
+      options: [
+        "heading",
+        "subheading",
+        "body",
+        "bodyEmphasized",
+        "details",
+        "field",
+        "code",
+        "microcopy",
+        "tableCell",
+        "tableHeader",
+      ],
+      description:
+        "Typography variant for semantic styling and visual hierarchy",
+    },
+    color: {
+      control: { type: "select" },
+      options: [
+        "default",
+        "muted",
+        "accent",
+        "destructive",
+        "success",
+        "warning",
+      ],
+      description: "Color variant for different semantic meanings",
+    },
+    align: {
+      control: { type: "select" },
+      options: ["left", "center", "right", "justify"],
+      description: "Text alignment",
+    },
+    transform: {
+      control: { type: "select" },
+      options: ["none", "uppercase", "lowercase", "capitalize"],
+      description: "Text transformation",
+    },
+    weight: {
+      control: { type: "select" },
+      options: ["normal", "medium", "semibold", "bold"],
+      description: "Font weight override",
+    },
+    as: {
+      control: { type: "select" },
+      options: [
+        "p",
+        "span",
+        "div",
+        "h1",
+        "h2",
+        "h3",
+        "h4",
+        "h5",
+        "h6",
+        "code",
+        "pre",
+        "blockquote",
+      ],
+      description: "HTML element to render as",
+    },
+    asChild: {
+      control: { type: "boolean" },
+      description: "Render as Slot for composition",
+    },
+    italic: {
+      control: { type: "boolean" },
+      description: "Apply italic styling",
+    },
+    underline: {
+      control: { type: "boolean" },
+      description: "Apply underline styling",
+    },
+    strikethrough: {
+      control: { type: "boolean" },
+      description: "Apply strikethrough styling",
+    },
+    truncate: {
+      control: { type: "boolean" },
+      description: "Apply text truncation with ellipsis",
+    },
+    srOnly: {
+      control: { type: "boolean" },
+      description: "Hide visually but keep accessible to screen readers",
+    },
+    children: {
+      control: { type: "text" },
+      description: "Text content to render",
+    },
+  },
+} satisfies Meta<typeof Typography>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * Interactive playground for testing all Typography component features.
+ * Use controls to experiment with different combinations of props.
+ */
+export const Interactive: Story = {
+  args: {
+    variant: "body",
+    color: "default",
+    align: "left",
+    transform: null,
+    children: "The quick brown fox jumps over the lazy dog.",
+    as: "p",
+    asChild: false,
+    italic: false,
+    underline: false,
+    strikethrough: false,
+    truncate: false,
+    srOnly: false,
+  },
+};
+
+/**
+ * Systematic showcase of all typography variants with consistent content.
+ * Demonstrates the visual hierarchy and size relationships between variants.
+ */
+export const Variants: Story = {
+  render: () => (
+    <div className="space-y-4 max-w-4xl">
+      <div className="space-y-2">
+        <Typography variant="microcopy" color="muted" as="span">
+          Typography Variants
+        </Typography>
+        <div className="grid gap-4">
+          <div className="space-y-1">
+            <Typography variant="heading" as="h1">
+              Heading (20px) - Main page and section titles
+            </Typography>
+            <Typography variant="details" color="muted">
+              text-lg font-semibold leading-tight
+            </Typography>
+          </div>
+
+          <div className="space-y-1">
+            <Typography variant="subheading" as="h2">
+              Sub Heading (17px) - Secondary headings for subsections
+            </Typography>
+            <Typography variant="details" color="muted">
+              text-base font-medium leading-relaxed
+            </Typography>
+          </div>
+
+          <div className="space-y-1">
+            <Typography variant="body">
+              Body (14px) - Standard body text for content and paragraphs. This
+              is the default variant for most content.
+            </Typography>
+            <Typography variant="details" color="muted">
+              text-sm leading-relaxed
+            </Typography>
+          </div>
+
+          <div className="space-y-1">
+            <Typography variant="bodyEmphasized">
+              Body Emphasized (14px) - Emphasized body text with medium weight
+              for important content.
+            </Typography>
+            <Typography variant="details" color="muted">
+              text-sm font-medium leading-relaxed
+            </Typography>
+          </div>
+
+          <div className="space-y-1">
+            <Typography variant="details">
+              Details (12px) - Smaller text for details, descriptions, and
+              secondary information.
+            </Typography>
+            <Typography variant="details" color="muted">
+              text-xs leading-normal
+            </Typography>
+          </div>
+
+          <div className="space-y-1">
+            <Typography variant="field" as="label">
+              Field Label (17px) - Text for form fields and input labels
+            </Typography>
+            <Typography variant="details" color="muted">
+              text-base leading-normal
+            </Typography>
+          </div>
+
+          <div className="space-y-1">
+            <Typography variant="code" as="code">
+              const codeExample = &quot;Code text (17px) for snippets and
+              technical content&quot;;
+            </Typography>
+            <Typography variant="details" color="muted">
+              text-base font-mono leading-normal
+            </Typography>
+          </div>
+
+          <div className="space-y-1">
+            <Typography variant="microcopy">
+              Microcopy (10px) - Very small text for captions and fine print
+            </Typography>
+            <Typography variant="details" color="muted">
+              text-microcopy leading-tight
+            </Typography>
+          </div>
+
+          <div className="space-y-1">
+            <Typography variant="tableCell">
+              Table Cell (17px) - Content for table cells and data display
+            </Typography>
+            <Typography variant="details" color="muted">
+              text-base leading-normal
+            </Typography>
+          </div>
+
+          <div className="space-y-1">
+            <Typography variant="tableHeader" as="th">
+              Table Header (17px) - Headers for table columns with emphasis
+            </Typography>
+            <Typography variant="details" color="muted">
+              text-base font-medium leading-normal
+            </Typography>
+          </div>
+        </div>
+      </div>
+    </div>
+  ),
+};
+
+/**
+ * Real-world usage examples demonstrating Typography in practical scenarios.
+ * Shows how to combine variants with semantic HTML and accessibility features.
+ */
+export const InContext: Story = {
+  render: () => (
+    <div className="space-y-8 max-w-4xl">
+      {/* Article Layout */}
+      <article className="space-y-4">
+        <Typography variant="heading" as="h1">
+          Building Better Typography Systems
+        </Typography>
+        <Typography variant="subheading" as="h2" color="muted">
+          A comprehensive guide to design system typography
+        </Typography>
+        <Typography variant="body">
+          Typography is one of the most critical aspects of any design system.
+          It provides visual hierarchy, improves readability, and helps users
+          navigate content effectively. A well-designed typography system
+          ensures consistency across all touchpoints while maintaining
+          flexibility for different use cases.
+        </Typography>
+        <Typography variant="bodyEmphasized">
+          Key principles include establishing clear hierarchy, ensuring
+          accessibility, and maintaining consistency across all platforms and
+          devices.
+        </Typography>
+        <Typography variant="details" color="muted">
+          Published on March 15, 2024 • 5 min read
+        </Typography>
+      </article>
+
+      {/* Form Example */}
+      <Card>
+        <CardHeader>
+          <CardTitle>Contact Information</CardTitle>
+          <CardDescription>
+            Example form using Typography components for labels and help text
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <div className="space-y-3">
+            <div className="space-y-1">
+              <Typography variant="field" as="label" htmlFor="email">
+                Email Address
+              </Typography>
+              <input
+                id="email"
+                type="email"
+                className="w-full px-3 py-2 border rounded-md"
+                placeholder="Enter your email"
+              />
+              <Typography variant="details" color="muted">
+                We&apos;ll never share your email with third parties
+              </Typography>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Data Table */}
+      <div className="space-y-4">
+        <Typography variant="subheading" as="h3">
+          Project Status
+        </Typography>
+        <table className="w-full border-collapse border border-border">
+          <thead>
+            <tr className="bg-muted/50">
+              <Typography
+                variant="tableHeader"
+                as="th"
+                className="border border-border px-4 py-2 text-left"
+              >
+                Project Name
+              </Typography>
+              <Typography
+                variant="tableHeader"
+                as="th"
+                className="border border-border px-4 py-2 text-left"
+              >
+                Status
+              </Typography>
+              <Typography
+                variant="tableHeader"
+                as="th"
+                className="border border-border px-4 py-2 text-left"
+              >
+                Due Date
+              </Typography>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <Typography
+                variant="tableCell"
+                as="td"
+                className="border border-border px-4 py-2"
+              >
+                Design System v2.0
+              </Typography>
+              <Typography
+                variant="tableCell"
+                as="td"
+                className="border border-border px-4 py-2"
+                color="success"
+              >
+                Complete
+              </Typography>
+              <Typography
+                variant="tableCell"
+                as="td"
+                className="border border-border px-4 py-2"
+              >
+                March 1, 2024
+              </Typography>
+            </tr>
+            <tr>
+              <Typography
+                variant="tableCell"
+                as="td"
+                className="border border-border px-4 py-2"
+              >
+                Mobile App Redesign
+              </Typography>
+              <Typography
+                variant="tableCell"
+                as="td"
+                className="border border-border px-4 py-2"
+                color="warning"
+              >
+                In Progress
+              </Typography>
+              <Typography
+                variant="tableCell"
+                as="td"
+                className="border border-border px-4 py-2"
+              >
+                April 15, 2024
+              </Typography>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+
+      {/* Code Block */}
+      <Card>
+        <CardHeader>
+          <CardTitle>Code Example</CardTitle>
+          <CardDescription>
+            Example showing semantic HTML with Typography variants
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <Typography
+            variant="code"
+            as="pre"
+            className="bg-muted p-4 rounded-md overflow-x-auto"
+          >
+            {`// Typography component usage
+<Typography variant="heading" as="h1">
+  Page Title
+</Typography>
+
+<Typography variant="body" color="muted">
+  Supporting text content
+</Typography>`}
+          </Typography>
+        </CardContent>
+      </Card>
+
+      {/* Accessibility Features */}
+      <Card>
+        <CardHeader>
+          <CardTitle>Accessibility Features</CardTitle>
+          <CardDescription>
+            Demonstrating accessibility features of the Typography component
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <ul className="space-y-2">
+            <li>
+              <Typography variant="body">
+                • Semantic HTML elements for proper document structure
+              </Typography>
+            </li>
+            <li>
+              <Typography variant="body">
+                • Color contrast ratios meeting WCAG 2.1 AA standards
+              </Typography>
+            </li>
+            <li>
+              <Typography variant="body">
+                • Screen reader support with proper labeling
+              </Typography>
+            </li>
+          </ul>
+          <Typography variant="details" srOnly>
+            This text is hidden visually but available to screen readers
+          </Typography>
+          <Typography variant="details" color="muted">
+            Note: The line above contains screen reader only content
+          </Typography>
+        </CardContent>
+      </Card>
+
+      {/* Color Variants */}
+      <div className="space-y-4">
+        <Typography variant="subheading" as="h3">
+          Color Variants
+        </Typography>
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <Typography variant="body" color="default">
+            Default color for standard content
+          </Typography>
+          <Typography variant="body" color="muted">
+            Muted color for secondary information
+          </Typography>
+          <Typography variant="body" color="accent">
+            Accent color for emphasis
+          </Typography>
+          <Typography variant="body" color="destructive">
+            Destructive color for errors and warnings
+          </Typography>
+          <Typography variant="body" color="success">
+            Success color for positive states
+          </Typography>
+          <Typography variant="body" color="warning">
+            Warning color for caution states
+          </Typography>
+        </div>
+      </div>
+
+      {/* Text Styling Options */}
+      <div className="space-y-4">
+        <Typography variant="subheading" as="h3">
+          Text Styling Options
+        </Typography>
+        <div className="space-y-2">
+          <Typography variant="body" italic>
+            Italic text for emphasis and quotes
+          </Typography>
+          <Typography variant="body" underline>
+            Underlined text for links and emphasis
+          </Typography>
+          <Typography variant="body" strikethrough>
+            Strikethrough text for corrections and deletions
+          </Typography>
+          <Typography variant="body" transform="uppercase">
+            Uppercase text for labels and headings
+          </Typography>
+          <Typography variant="body" weight="bold">
+            Bold text for strong emphasis
+          </Typography>
+          <div className="max-w-xs">
+            <Typography variant="body" truncate>
+              This is a very long text that will be truncated with ellipsis when
+              it exceeds the container width
+            </Typography>
+          </div>
+        </div>
+      </div>
+    </div>
+  ),
+};
+
+/**
+ * Showcase of individual semantic typography components for better TypeScript support.
+ * Demonstrates the recommended approach using semantic components vs generic Typography.
+ */
+export const SemanticComponents: Story = {
+  render: () => (
+    <div className="space-y-8 max-w-4xl">
+      <div className="space-y-2">
+        <Typography variant="microcopy" color="muted" as="span">
+          Semantic Typography Components
+        </Typography>
+        <Typography variant="body" color="muted">
+          Individual semantic components provide better TypeScript support and
+          developer experience.
+        </Typography>
+      </div>
+
+      {/* Headings */}
+      <div className="space-y-4">
+        <Typography variant="subheading" as="h3">
+          Heading Components
+        </Typography>
+        <div className="space-y-3 pl-4 border-l-2 border-border">
+          <H1>H1 - Main page title (20px)</H1>
+          <H2>H2 - Section heading (17px)</H2>
+          <H3>H3 - Subsection heading (17px)</H3>
+          <H4>H4 - Minor heading (14px emphasized)</H4>
+          <H5>H5 - Small heading (14px emphasized)</H5>
+          <H6>H6 - Smallest heading (12px)</H6>
+        </div>
+      </div>
+
+      {/* Text Components */}
+      <div className="space-y-4">
+        <Typography variant="subheading" as="h3">
+          Text Components
+        </Typography>
+        <div className="space-y-3 pl-4 border-l-2 border-border">
+          <P>P - Standard paragraph text for body content and descriptions.</P>
+          <P>
+            Inline text with{" "}
+            <Span color="accent">highlighted span content</Span> and
+            <Strong> emphasized strong text</Strong> for better readability.
+          </P>
+          <Lead>
+            Lead - Introductory text that stands out from regular paragraphs.
+          </Lead>
+          <Small>Small - Fine print and microcopy text (10px)</Small>
+        </div>
+      </div>
+
+      {/* Code and Technical */}
+      <div className="space-y-4">
+        <Typography variant="subheading" as="h3">
+          Code and Technical
+        </Typography>
+        <div className="space-y-3 pl-4 border-l-2 border-border">
+          <P>
+            Use the <Code>useState</Code> hook to manage component state.
+          </P>
+          <Code>const [count, setCount] = useState(0);</Code>
+        </div>
+      </div>
+
+      {/* Form Elements */}
+      <div className="space-y-4">
+        <Typography variant="subheading" as="h3">
+          Form Elements
+        </Typography>
+        <div className="space-y-3 pl-4 border-l-2 border-border">
+          <div className="space-y-1">
+            <Label htmlFor="example-input">Email Address</Label>
+            <input
+              id="example-input"
+              type="email"
+              className="w-full px-3 py-2 border rounded-md"
+              placeholder="Enter your email"
+            />
+            <Small color="muted">
+              We&apos;ll never share your email with third parties
+            </Small>
+          </div>
+        </div>
+      </div>
+
+      {/* Links and Navigation */}
+      <div className="space-y-4">
+        <Typography variant="subheading" as="h3">
+          Links and Navigation
+        </Typography>
+        <div className="space-y-3 pl-4 border-l-2 border-border">
+          <P>
+            Standard link with href:{" "}
+            <A href="https://example.com">External link</A>
+          </P>
+          <P>
+            Link with custom styling:{" "}
+            <A href="/about" color="accent">
+              Internal link
+            </A>
+          </P>
+          <P>
+            Composition pattern:{" "}
+            <A asChild>
+              <span role="button" tabIndex={0}>
+                Custom component
+              </span>
+            </A>
+          </P>
+        </div>
+      </div>
+
+      {/* Quoted Content */}
+      <div className="space-y-4">
+        <Typography variant="subheading" as="h3">
+          Quoted Content
+        </Typography>
+        <div className="pl-4 border-l-2 border-border">
+          <Blockquote>
+            &quot;The best way to predict the future is to invent it.&quot; -
+            Alan Kay
+          </Blockquote>
+        </div>
+      </div>
+
+      {/* Comparison Table */}
+      <div className="space-y-4">
+        <Typography variant="subheading" as="h3">
+          Generic vs Semantic Approach
+        </Typography>
+        <div className="overflow-x-auto">
+          <table className="w-full border-collapse border border-border">
+            <thead>
+              <tr className="bg-muted/50">
+                <Typography
+                  variant="tableHeader"
+                  as="th"
+                  className="border border-border px-4 py-2 text-left"
+                >
+                  Approach
+                </Typography>
+                <Typography
+                  variant="tableHeader"
+                  as="th"
+                  className="border border-border px-4 py-2 text-left"
+                >
+                  Code Example
+                </Typography>
+                <Typography
+                  variant="tableHeader"
+                  as="th"
+                  className="border border-border px-4 py-2 text-left"
+                >
+                  Benefits
+                </Typography>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <Typography
+                  variant="tableCell"
+                  as="td"
+                  className="border border-border px-4 py-2"
+                >
+                  Generic
+                </Typography>
+                <Typography
+                  variant="tableCell"
+                  as="td"
+                  className="border border-border px-4 py-2"
+                >
+                  <Code>
+                    &lt;Typography variant=&quot;heading&quot;
+                    as=&quot;h1&quot;&gt;
+                  </Code>
+                </Typography>
+                <Typography
+                  variant="tableCell"
+                  as="td"
+                  className="border border-border px-4 py-2"
+                >
+                  Full control over variant and element
+                </Typography>
+              </tr>
+              <tr>
+                <Typography
+                  variant="tableCell"
+                  as="td"
+                  className="border border-border px-4 py-2"
+                >
+                  Semantic
+                </Typography>
+                <Typography
+                  variant="tableCell"
+                  as="td"
+                  className="border border-border px-4 py-2"
+                >
+                  <Code>&lt;H1&gt;</Code>
+                </Typography>
+                <Typography
+                  variant="tableCell"
+                  as="td"
+                  className="border border-border px-4 py-2"
+                >
+                  Better TypeScript, shorter syntax, semantic clarity
+                </Typography>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+
+      {/* Usage Recommendations */}
+      <Card>
+        <CardHeader>
+          <CardTitle>Usage Recommendations</CardTitle>
+          <CardDescription>
+            Best practices for using Typography components in your application
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <ul className="space-y-2">
+            <li>
+              <Strong>✅ Recommended:</Strong>{" "}
+              <P className="inline">
+                Use semantic components (H1, P, etc.) for better developer
+                experience and TypeScript support.
+              </P>
+            </li>
+            <li>
+              <Strong>⚠️ When to use generic:</Strong>{" "}
+              <P className="inline">
+                Use Typography component when you need custom variant/element
+                combinations not covered by semantic components.
+              </P>
+            </li>
+            <li>
+              <Strong>🎯 Best practice:</Strong>{" "}
+              <P className="inline">
+                Semantic components provide pre-configured defaults that match
+                design system specifications.
+              </P>
+            </li>
+          </ul>
+        </CardContent>
+      </Card>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Showcase of individual semantic typography components that provide better TypeScript support and developer experience. Compare semantic components (H1, P, etc.) with the generic Typography approach.",
+      },
+    },
+  },
+};
+
+/**
+ * Complete reference table of all semantic typography components with their defaults and usage.
+ * Provides a comprehensive overview for developers to quickly understand each component.
+ */
+export const ComponentReference: Story = {
+  render: () => (
+    <div className="space-y-6 max-w-6xl">
+      <div className="space-y-2">
+        <Typography variant="heading" as="h2">
+          Semantic Typography Components Reference
+        </Typography>
+        <Typography variant="body" color="muted">
+          Complete reference of all individual semantic components with their
+          default variants, HTML elements, and use cases.
+        </Typography>
+      </div>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Component Reference Table</CardTitle>
+          <CardDescription>
+            All semantic typography components with their configurations and
+            recommended usage
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <div className="overflow-x-auto">
+            <table className="w-full border-collapse border border-border">
+              <thead>
+                <tr className="bg-muted/50">
+                  <Typography
+                    variant="tableHeader"
+                    as="th"
+                    className="border border-border px-4 py-2 text-left"
+                  >
+                    Component
+                  </Typography>
+                  <Typography
+                    variant="tableHeader"
+                    as="th"
+                    className="border border-border px-4 py-2 text-left"
+                  >
+                    HTML Element
+                  </Typography>
+                  <Typography
+                    variant="tableHeader"
+                    as="th"
+                    className="border border-border px-4 py-2 text-left"
+                  >
+                    Default Variant
+                  </Typography>
+                  <Typography
+                    variant="tableHeader"
+                    as="th"
+                    className="border border-border px-4 py-2 text-left"
+                  >
+                    Font Size
+                  </Typography>
+                  <Typography
+                    variant="tableHeader"
+                    as="th"
+                    className="border border-border px-4 py-2 text-left"
+                  >
+                    Use Case
+                  </Typography>
+                  <Typography
+                    variant="tableHeader"
+                    as="th"
+                    className="border border-border px-4 py-2 text-left"
+                  >
+                    Example
+                  </Typography>
+                </tr>
+              </thead>
+              <tbody>
+                <tr>
+                  <Typography
+                    variant="tableCell"
+                    as="td"
+                    className="border border-border px-4 py-2"
+                  >
+                    <Code>H1</Code>
+                  </Typography>
+                  <Typography
+                    variant="tableCell"
+                    as="td"
+                    className="border border-border px-4 py-2"
+                  >
+                    h1
+                  </Typography>
+                  <Typography
+                    variant="tableCell"
+                    as="td"
+                    className="border border-border px-4 py-2"
+                  >
+                    heading
+                  </Typography>
+                  <Typography
+                    variant="tableCell"
+                    as="td"
+                    className="border border-border px-4 py-2"
+                  >
+                    20px
+                  </Typography>
+                  <Typography
+                    variant="tableCell"
+                    as="td"
+                    className="border border-border px-4 py-2"
+                  >
+                    Main page titles
+                  </Typography>
+                  <Typography
+                    variant="tableCell"
+                    as="td"
+                    className="border border-border px-4 py-2"
+                  >
+                    <H1 className="text-sm">Page Title</H1>
+                  </Typography>
+                </tr>
+                <tr>
+                  <Typography
+                    variant="tableCell"
+                    as="td"
+                    className="border border-border px-4 py-2"
+                  >
+                    <Code>H2</Code>
+                  </Typography>
+                  <Typography
+                    variant="tableCell"
+                    as="td"
+                    className="border border-border px-4 py-2"
+                  >
+                    h2
+                  </Typography>
+                  <Typography
+                    variant="tableCell"
+                    as="td"
+                    className="border border-border px-4 py-2"
+                  >
+                    subheading
+                  </Typography>
+                  <Typography
+                    variant="tableCell"
+                    as="td"
+                    className="border border-border px-4 py-2"
+                  >
+                    17px
+                  </Typography>
+                  <Typography
+                    variant="tableCell"
+                    as="td"
+                    className="border border-border px-4 py-2"
+                  >
+                    Section headings
+                  </Typography>
+                  <Typography
+                    variant="tableCell"
+                    as="td"
+                    className="border border-border px-4 py-2"
+                  >
+                    <H2 className="text-sm">Section Title</H2>
+                  </Typography>
+                </tr>
+                <tr>
+                  <Typography
+                    variant="tableCell"
+                    as="td"
+                    className="border border-border px-4 py-2"
+                  >
+                    <Code>H3</Code>
+                  </Typography>
+                  <Typography
+                    variant="tableCell"
+                    as="td"
+                    className="border border-border px-4 py-2"
+                  >
+                    h3
+                  </Typography>
+                  <Typography
+                    variant="tableCell"
+                    as="td"
+                    className="border border-border px-4 py-2"
+                  >
+                    subheading
+                  </Typography>
+                  <Typography
+                    variant="tableCell"
+                    as="td"
+                    className="border border-border px-4 py-2"
+                  >
+                    17px
+                  </Typography>
+                  <Typography
+                    variant="tableCell"
+                    as="td"
+                    className="border border-border px-4 py-2"
+                  >
+                    Subsection headings
+                  </Typography>
+                  <Typography
+                    variant="tableCell"
+                    as="td"
+                    className="border border-border px-4 py-2"
+                  >
+                    <H3 className="text-sm">Subsection</H3>
+                  </Typography>
+                </tr>
+                <tr>
+                  <Typography
+                    variant="tableCell"
+                    as="td"
+                    className="border border-border px-4 py-2"
+                  >
+                    <Code>H4</Code>
+                  </Typography>
+                  <Typography
+                    variant="tableCell"
+                    as="td"
+                    className="border border-border px-4 py-2"
+                  >
+                    h4
+                  </Typography>
+                  <Typography
+                    variant="tableCell"
+                    as="td"
+                    className="border border-border px-4 py-2"
+                  >
+                    bodyEmphasized
+                  </Typography>
+                  <Typography
+                    variant="tableCell"
+                    as="td"
+                    className="border border-border px-4 py-2"
+                  >
+                    14px
+                  </Typography>
+                  <Typography
+                    variant="tableCell"
+                    as="td"
+                    className="border border-border px-4 py-2"
+                  >
+                    Minor headings
+                  </Typography>
+                  <Typography
+                    variant="tableCell"
+                    as="td"
+                    className="border border-border px-4 py-2"
+                  >
+                    <H4 className="text-sm">Minor Heading</H4>
+                  </Typography>
+                </tr>
+                <tr>
+                  <Typography
+                    variant="tableCell"
+                    as="td"
+                    className="border border-border px-4 py-2"
+                  >
+                    <Code>H5</Code>
+                  </Typography>
+                  <Typography
+                    variant="tableCell"
+                    as="td"
+                    className="border border-border px-4 py-2"
+                  >
+                    h5
+                  </Typography>
+                  <Typography
+                    variant="tableCell"
+                    as="td"
+                    className="border border-border px-4 py-2"
+                  >
+                    bodyEmphasized
+                  </Typography>
+                  <Typography
+                    variant="tableCell"
+                    as="td"
+                    className="border border-border px-4 py-2"
+                  >
+                    14px
+                  </Typography>
+                  <Typography
+                    variant="tableCell"
+                    as="td"
+                    className="border border-border px-4 py-2"
+                  >
+                    Small headings
+                  </Typography>
+                  <Typography
+                    variant="tableCell"
+                    as="td"
+                    className="border border-border px-4 py-2"
+                  >
+                    <H5 className="text-sm">Small Heading</H5>
+                  </Typography>
+                </tr>
+                <tr>
+                  <Typography
+                    variant="tableCell"
+                    as="td"
+                    className="border border-border px-4 py-2"
+                  >
+                    <Code>H6</Code>
+                  </Typography>
+                  <Typography
+                    variant="tableCell"
+                    as="td"
+                    className="border border-border px-4 py-2"
+                  >
+                    h6
+                  </Typography>
+                  <Typography
+                    variant="tableCell"
+                    as="td"
+                    className="border border-border px-4 py-2"
+                  >
+                    details
+                  </Typography>
+                  <Typography
+                    variant="tableCell"
+                    as="td"
+                    className="border border-border px-4 py-2"
+                  >
+                    12px
+                  </Typography>
+                  <Typography
+                    variant="tableCell"
+                    as="td"
+                    className="border border-border px-4 py-2"
+                  >
+                    Smallest headings
+                  </Typography>
+                  <Typography
+                    variant="tableCell"
+                    as="td"
+                    className="border border-border px-4 py-2"
+                  >
+                    <H6 className="text-sm">Tiny Heading</H6>
+                  </Typography>
+                </tr>
+                <tr>
+                  <Typography
+                    variant="tableCell"
+                    as="td"
+                    className="border border-border px-4 py-2"
+                  >
+                    <Code>P</Code>
+                  </Typography>
+                  <Typography
+                    variant="tableCell"
+                    as="td"
+                    className="border border-border px-4 py-2"
+                  >
+                    p
+                  </Typography>
+                  <Typography
+                    variant="tableCell"
+                    as="td"
+                    className="border border-border px-4 py-2"
+                  >
+                    body
+                  </Typography>
+                  <Typography
+                    variant="tableCell"
+                    as="td"
+                    className="border border-border px-4 py-2"
+                  >
+                    14px
+                  </Typography>
+                  <Typography
+                    variant="tableCell"
+                    as="td"
+                    className="border border-border px-4 py-2"
+                  >
+                    Body text, paragraphs
+                  </Typography>
+                  <Typography
+                    variant="tableCell"
+                    as="td"
+                    className="border border-border px-4 py-2"
+                  >
+                    <P className="text-sm">Standard paragraph text.</P>
+                  </Typography>
+                </tr>
+                <tr>
+                  <Typography
+                    variant="tableCell"
+                    as="td"
+                    className="border border-border px-4 py-2"
+                  >
+                    <Code>A</Code>
+                  </Typography>
+                  <Typography
+                    variant="tableCell"
+                    as="td"
+                    className="border border-border px-4 py-2"
+                  >
+                    a
+                  </Typography>
+                  <Typography
+                    variant="tableCell"
+                    as="td"
+                    className="border border-border px-4 py-2"
+                  >
+                    body + underline
+                  </Typography>
+                  <Typography
+                    variant="tableCell"
+                    as="td"
+                    className="border border-border px-4 py-2"
+                  >
+                    14px
+                  </Typography>
+                  <Typography
+                    variant="tableCell"
+                    as="td"
+                    className="border border-border px-4 py-2"
+                  >
+                    Links with hover states
+                  </Typography>
+                  <Typography
+                    variant="tableCell"
+                    as="td"
+                    className="border border-border px-4 py-2"
+                  >
+                    <A className="text-sm" href="https://example.com">
+                      Example Link
+                    </A>
+                  </Typography>
+                </tr>
+                <tr>
+                  <Typography
+                    variant="tableCell"
+                    as="td"
+                    className="border border-border px-4 py-2"
+                  >
+                    <Code>Span</Code>
+                  </Typography>
+                  <Typography
+                    variant="tableCell"
+                    as="td"
+                    className="border border-border px-4 py-2"
+                  >
+                    span
+                  </Typography>
+                  <Typography
+                    variant="tableCell"
+                    as="td"
+                    className="border border-border px-4 py-2"
+                  >
+                    body (default)
+                  </Typography>
+                  <Typography
+                    variant="tableCell"
+                    as="td"
+                    className="border border-border px-4 py-2"
+                  >
+                    14px
+                  </Typography>
+                  <Typography
+                    variant="tableCell"
+                    as="td"
+                    className="border border-border px-4 py-2"
+                  >
+                    Inline text, highlights
+                  </Typography>
+                  <Typography
+                    variant="tableCell"
+                    as="td"
+                    className="border border-border px-4 py-2"
+                  >
+                    <Span className="text-sm" color="accent">
+                      Highlighted text
+                    </Span>
+                  </Typography>
+                </tr>
+                <tr>
+                  <Typography
+                    variant="tableCell"
+                    as="td"
+                    className="border border-border px-4 py-2"
+                  >
+                    <Code>Strong</Code>
+                  </Typography>
+                  <Typography
+                    variant="tableCell"
+                    as="td"
+                    className="border border-border px-4 py-2"
+                  >
+                    strong
+                  </Typography>
+                  <Typography
+                    variant="tableCell"
+                    as="td"
+                    className="border border-border px-4 py-2"
+                  >
+                    bodyEmphasized
+                  </Typography>
+                  <Typography
+                    variant="tableCell"
+                    as="td"
+                    className="border border-border px-4 py-2"
+                  >
+                    14px
+                  </Typography>
+                  <Typography
+                    variant="tableCell"
+                    as="td"
+                    className="border border-border px-4 py-2"
+                  >
+                    Emphasized text
+                  </Typography>
+                  <Typography
+                    variant="tableCell"
+                    as="td"
+                    className="border border-border px-4 py-2"
+                  >
+                    <Strong className="text-sm">Important text</Strong>
+                  </Typography>
+                </tr>
+                <tr>
+                  <Typography
+                    variant="tableCell"
+                    as="td"
+                    className="border border-border px-4 py-2"
+                  >
+                    <Code>Lead</Code>
+                  </Typography>
+                  <Typography
+                    variant="tableCell"
+                    as="td"
+                    className="border border-border px-4 py-2"
+                  >
+                    p
+                  </Typography>
+                  <Typography
+                    variant="tableCell"
+                    as="td"
+                    className="border border-border px-4 py-2"
+                  >
+                    subheading + muted
+                  </Typography>
+                  <Typography
+                    variant="tableCell"
+                    as="td"
+                    className="border border-border px-4 py-2"
+                  >
+                    17px
+                  </Typography>
+                  <Typography
+                    variant="tableCell"
+                    as="td"
+                    className="border border-border px-4 py-2"
+                  >
+                    Introductory text
+                  </Typography>
+                  <Typography
+                    variant="tableCell"
+                    as="td"
+                    className="border border-border px-4 py-2"
+                  >
+                    <Lead className="text-sm">Article introduction</Lead>
+                  </Typography>
+                </tr>
+                <tr>
+                  <Typography
+                    variant="tableCell"
+                    as="td"
+                    className="border border-border px-4 py-2"
+                  >
+                    <Code>Small</Code>
+                  </Typography>
+                  <Typography
+                    variant="tableCell"
+                    as="td"
+                    className="border border-border px-4 py-2"
+                  >
+                    small
+                  </Typography>
+                  <Typography
+                    variant="tableCell"
+                    as="td"
+                    className="border border-border px-4 py-2"
+                  >
+                    microcopy
+                  </Typography>
+                  <Typography
+                    variant="tableCell"
+                    as="td"
+                    className="border border-border px-4 py-2"
+                  >
+                    10px
+                  </Typography>
+                  <Typography
+                    variant="tableCell"
+                    as="td"
+                    className="border border-border px-4 py-2"
+                  >
+                    Fine print, captions
+                  </Typography>
+                  <Typography
+                    variant="tableCell"
+                    as="td"
+                    className="border border-border px-4 py-2"
+                  >
+                    <Small className="text-xs">Terms apply</Small>
+                  </Typography>
+                </tr>
+                <tr>
+                  <Typography
+                    variant="tableCell"
+                    as="td"
+                    className="border border-border px-4 py-2"
+                  >
+                    <Code>Code</Code>
+                  </Typography>
+                  <Typography
+                    variant="tableCell"
+                    as="td"
+                    className="border border-border px-4 py-2"
+                  >
+                    code
+                  </Typography>
+                  <Typography
+                    variant="tableCell"
+                    as="td"
+                    className="border border-border px-4 py-2"
+                  >
+                    code
+                  </Typography>
+                  <Typography
+                    variant="tableCell"
+                    as="td"
+                    className="border border-border px-4 py-2"
+                  >
+                    17px
+                  </Typography>
+                  <Typography
+                    variant="tableCell"
+                    as="td"
+                    className="border border-border px-4 py-2"
+                  >
+                    Inline code snippets
+                  </Typography>
+                  <Typography
+                    variant="tableCell"
+                    as="td"
+                    className="border border-border px-4 py-2"
+                  >
+                    <Code className="text-xs">useState</Code>
+                  </Typography>
+                </tr>
+                <tr>
+                  <Typography
+                    variant="tableCell"
+                    as="td"
+                    className="border border-border px-4 py-2"
+                  >
+                    <Code>Blockquote</Code>
+                  </Typography>
+                  <Typography
+                    variant="tableCell"
+                    as="td"
+                    className="border border-border px-4 py-2"
+                  >
+                    blockquote
+                  </Typography>
+                  <Typography
+                    variant="tableCell"
+                    as="td"
+                    className="border border-border px-4 py-2"
+                  >
+                    body + italic
+                  </Typography>
+                  <Typography
+                    variant="tableCell"
+                    as="td"
+                    className="border border-border px-4 py-2"
+                  >
+                    14px
+                  </Typography>
+                  <Typography
+                    variant="tableCell"
+                    as="td"
+                    className="border border-border px-4 py-2"
+                  >
+                    Quoted text
+                  </Typography>
+                  <Typography
+                    variant="tableCell"
+                    as="td"
+                    className="border border-border px-4 py-2"
+                  >
+                    <Blockquote className="text-xs border-l-2 border-border pl-2">
+                      &quot;Quote text&quot;
+                    </Blockquote>
+                  </Typography>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Additional Properties</CardTitle>
+          <CardDescription>
+            All semantic components inherit the full Typography component API
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <div className="space-y-4">
+            <div>
+              <Typography variant="bodyEmphasized">Available Props:</Typography>
+              <ul className="mt-2 space-y-1 ml-4">
+                <li>
+                  <Code>color</Code> - default, muted, accent, destructive,
+                  success, warning
+                </li>
+                <li>
+                  <Code>align</Code> - left, center, right, justify
+                </li>
+                <li>
+                  <Code>transform</Code> - none, uppercase, lowercase,
+                  capitalize
+                </li>
+                <li>
+                  <Code>weight</Code> - normal, medium, semibold, bold
+                </li>
+                <li>
+                  <Code>italic</Code> - boolean
+                </li>
+                <li>
+                  <Code>underline</Code> - boolean
+                </li>
+                <li>
+                  <Code>strikethrough</Code> - boolean
+                </li>
+                <li>
+                  <Code>truncate</Code> - boolean
+                </li>
+                <li>
+                  <Code>srOnly</Code> - boolean
+                </li>
+                <li>
+                  <Code>className</Code> - additional CSS classes
+                </li>
+              </ul>
+            </div>
+            <div>
+              <Typography variant="bodyEmphasized">Usage Examples:</Typography>
+              <div className="mt-2 space-y-2">
+                <div>
+                  <Code>
+                    &lt;H1 color=&quot;accent&quot;&gt;Colored
+                    heading&lt;/H1&gt;
+                  </Code>
+                </div>
+                <div>
+                  <Code>
+                    &lt;P align=&quot;center&quot; italic&gt;Centered italic
+                    text&lt;/P&gt;
+                  </Code>
+                </div>
+                <div>
+                  <Code>
+                    &lt;Span weight=&quot;bold&quot;
+                    color=&quot;destructive&quot;&gt;Bold red text&lt;/Span&gt;
+                  </Code>
+                </div>
+              </div>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Comprehensive reference table showing all semantic typography components with their default configurations, HTML elements, font sizes, and use cases. Perfect for quick lookup during development.",
+      },
+    },
+  },
+};