@neynar/ui 0.3.1 → 0.5.0

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

@@ -1,1632 +0,0 @@
-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.",
-      },
-    },
-  },
-  argTypes: {
-    variant: {
-      control: { type: "select" },
-      options: [
-        "microcopy",
-        "detail",
-        "body",
-        "blogBody",
-        "paragraphLead",
-        "eyebrow",
-        "subHeadline",
-        "headline",
-        "sectionTitle",
-        "pageTitle",
-        "displayTitle",
-        "heroTitle",
-        "code",
-      ],
-      description:
-        "Typography variant for semantic styling and visual hierarchy",
-    },
-    color: {
-      control: { type: "select" },
-      options: [
-        "default",
-        "muted",
-        "faint",
-        "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="heroTitle" as="h1">
-              Hero Title - Largest display text for landing pages
-            </Typography>
-            <Typography variant="detail" color="muted">
-              Largest display variant
-            </Typography>
-          </div>
-
-          <div className="space-y-1">
-            <Typography variant="displayTitle" as="h1">
-              Display Title - Large display text for important headings
-            </Typography>
-            <Typography variant="detail" color="muted">
-              Large display variant
-            </Typography>
-          </div>
-
-          <div className="space-y-1">
-            <Typography variant="pageTitle" as="h1">
-              Page Title - Main page titles
-            </Typography>
-            <Typography variant="detail" color="muted">
-              Primary heading variant
-            </Typography>
-          </div>
-
-          <div className="space-y-1">
-            <Typography variant="sectionTitle" as="h2">
-              Section Title - Section headings within pages
-            </Typography>
-            <Typography variant="detail" color="muted">
-              Section heading variant
-            </Typography>
-          </div>
-
-          <div className="space-y-1">
-            <Typography variant="headline" as="h3">
-              Headline - Article and content headlines
-            </Typography>
-            <Typography variant="detail" color="muted">
-              Content headline variant
-            </Typography>
-          </div>
-
-          <div className="space-y-1">
-            <Typography variant="subHeadline" as="h4">
-              Sub Headline - Secondary headlines and subheadings
-            </Typography>
-            <Typography variant="detail" color="muted">
-              Secondary headline variant
-            </Typography>
-          </div>
-
-          <div className="space-y-1">
-            <Typography variant="eyebrow" as="div">
-              Eyebrow - Small labels above headings
-            </Typography>
-            <Typography variant="detail" color="muted">
-              Small label variant
-            </Typography>
-          </div>
-
-          <div className="space-y-1">
-            <Typography variant="paragraphLead">
-              Paragraph Lead - Opening paragraph text that introduces content
-              with emphasis.
-            </Typography>
-            <Typography variant="detail" color="muted">
-              Lead paragraph variant
-            </Typography>
-          </div>
-
-          <div className="space-y-1">
-            <Typography variant="blogBody">
-              Blog Body - Body text for blog posts and articles with optimized
-              reading experience.
-            </Typography>
-            <Typography variant="detail" color="muted">
-              Blog content variant
-            </Typography>
-          </div>
-
-          <div className="space-y-1">
-            <Typography variant="body">
-              Body - Standard body text for content and paragraphs. This is the
-              default variant for most content.
-            </Typography>
-            <Typography variant="detail" color="muted">
-              Standard body variant
-            </Typography>
-          </div>
-
-          <div className="space-y-1">
-            <Typography variant="detail">
-              Detail - Smaller text for details, descriptions, and secondary
-              information.
-            </Typography>
-            <Typography variant="detail" color="muted">
-              Detail text variant
-            </Typography>
-          </div>
-
-          <div className="space-y-1">
-            <Typography variant="code" as="code">
-              const codeExample = &quot;Code text for snippets and technical
-              content&quot;;
-            </Typography>
-            <Typography variant="detail" color="muted">
-              Monospace code variant
-            </Typography>
-          </div>
-
-          <div className="space-y-1">
-            <Typography variant="microcopy">
-              Microcopy - Very small text for captions and fine print
-            </Typography>
-            <Typography variant="detail" color="muted">
-              Smallest text variant
-            </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="pageTitle" as="h1">
-          Building Better Typography Systems
-        </Typography>
-        <Typography variant="subHeadline" 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="paragraphLead">
-          Key principles include establishing clear hierarchy, ensuring
-          accessibility, and maintaining consistency across all platforms and
-          devices.
-        </Typography>
-        <Typography variant="detail" 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="body" 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="detail" 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="sectionTitle" as="h3">
-          Project Status
-        </Typography>
-        <table className="w-full border-collapse border border-border">
-          <thead>
-            <tr className="bg-muted/50">
-              <Typography
-                variant="body"
-                as="th"
-                className="border border-border px-4 py-2 text-left"
-                weight="semibold"
-              >
-                Project Name
-              </Typography>
-              <Typography
-                variant="body"
-                as="th"
-                className="border border-border px-4 py-2 text-left"
-                weight="semibold"
-              >
-                Status
-              </Typography>
-              <Typography
-                variant="body"
-                as="th"
-                className="border border-border px-4 py-2 text-left"
-                weight="semibold"
-              >
-                Due Date
-              </Typography>
-            </tr>
-          </thead>
-          <tbody>
-            <tr>
-              <Typography
-                variant="body"
-                as="td"
-                className="border border-border px-4 py-2"
-              >
-                Design System v2.0
-              </Typography>
-              <Typography
-                variant="body"
-                as="td"
-                className="border border-border px-4 py-2"
-                color="success"
-              >
-                Complete
-              </Typography>
-              <Typography
-                variant="body"
-                as="td"
-                className="border border-border px-4 py-2"
-              >
-                March 1, 2024
-              </Typography>
-            </tr>
-            <tr>
-              <Typography
-                variant="body"
-                as="td"
-                className="border border-border px-4 py-2"
-              >
-                Mobile App Redesign
-              </Typography>
-              <Typography
-                variant="body"
-                as="td"
-                className="border border-border px-4 py-2"
-                color="warning"
-              >
-                In Progress
-              </Typography>
-              <Typography
-                variant="body"
-                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="detail" srOnly>
-            This text is hidden visually but available to screen readers
-          </Typography>
-          <Typography variant="detail" color="muted">
-            Note: The line above contains screen reader only content
-          </Typography>
-        </CardContent>
-      </Card>
-
-      {/* Color Variants */}
-      <div className="space-y-4">
-        <Typography variant="sectionTitle" 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="faint">
-            Faint color for tertiary 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="sectionTitle" 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="sectionTitle" 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="sectionTitle" 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="sectionTitle" 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="sectionTitle" 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="sectionTitle" 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="sectionTitle" 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="sectionTitle" 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="body"
-                  as="th"
-                  className="border border-border px-4 py-2 text-left"
-                  weight="semibold"
-                >
-                  Approach
-                </Typography>
-                <Typography
-                  variant="body"
-                  as="th"
-                  className="border border-border px-4 py-2 text-left"
-                  weight="semibold"
-                >
-                  Code Example
-                </Typography>
-                <Typography
-                  variant="body"
-                  as="th"
-                  className="border border-border px-4 py-2 text-left"
-                  weight="semibold"
-                >
-                  Benefits
-                </Typography>
-              </tr>
-            </thead>
-            <tbody>
-              <tr>
-                <Typography
-                  variant="body"
-                  as="td"
-                  className="border border-border px-4 py-2"
-                >
-                  Generic
-                </Typography>
-                <Typography
-                  variant="body"
-                  as="td"
-                  className="border border-border px-4 py-2"
-                >
-                  <Code>
-                    &lt;Typography variant=&quot;pageTitle&quot;
-                    as=&quot;h1&quot;&gt;
-                  </Code>
-                </Typography>
-                <Typography
-                  variant="body"
-                  as="td"
-                  className="border border-border px-4 py-2"
-                >
-                  Full control over variant and element
-                </Typography>
-              </tr>
-              <tr>
-                <Typography
-                  variant="body"
-                  as="td"
-                  className="border border-border px-4 py-2"
-                >
-                  Semantic
-                </Typography>
-                <Typography
-                  variant="body"
-                  as="td"
-                  className="border border-border px-4 py-2"
-                >
-                  <Code>&lt;H1&gt;</Code>
-                </Typography>
-                <Typography
-                  variant="body"
-                  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="pageTitle" 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="body"
-                    as="th"
-                    className="border border-border px-4 py-2 text-left"
-                    weight="semibold"
-                  >
-                    Component
-                  </Typography>
-                  <Typography
-                    variant="body"
-                    as="th"
-                    className="border border-border px-4 py-2 text-left"
-                    weight="semibold"
-                  >
-                    HTML Element
-                  </Typography>
-                  <Typography
-                    variant="body"
-                    as="th"
-                    className="border border-border px-4 py-2 text-left"
-                    weight="semibold"
-                  >
-                    Default Variant
-                  </Typography>
-                  <Typography
-                    variant="body"
-                    as="th"
-                    className="border border-border px-4 py-2 text-left"
-                    weight="semibold"
-                  >
-                    Font Size
-                  </Typography>
-                  <Typography
-                    variant="body"
-                    as="th"
-                    className="border border-border px-4 py-2 text-left"
-                    weight="semibold"
-                  >
-                    Use Case
-                  </Typography>
-                  <Typography
-                    variant="body"
-                    as="th"
-                    className="border border-border px-4 py-2 text-left"
-                    weight="semibold"
-                  >
-                    Example
-                  </Typography>
-                </tr>
-              </thead>
-              <tbody>
-                <tr>
-                  <Typography
-                    variant="body"
-                    as="td"
-                    className="border border-border px-4 py-2"
-                  >
-                    <Code>H1</Code>
-                  </Typography>
-                  <Typography
-                    variant="body"
-                    as="td"
-                    className="border border-border px-4 py-2"
-                  >
-                    h1
-                  </Typography>
-                  <Typography
-                    variant="body"
-                    as="td"
-                    className="border border-border px-4 py-2"
-                  >
-                    pageTitle
-                  </Typography>
-                  <Typography
-                    variant="body"
-                    as="td"
-                    className="border border-border px-4 py-2"
-                  >
-                    Variable
-                  </Typography>
-                  <Typography
-                    variant="body"
-                    as="td"
-                    className="border border-border px-4 py-2"
-                  >
-                    Main page titles
-                  </Typography>
-                  <Typography
-                    variant="body"
-                    as="td"
-                    className="border border-border px-4 py-2"
-                  >
-                    <H1 className="text-sm">Page Title</H1>
-                  </Typography>
-                </tr>
-                <tr>
-                  <Typography
-                    variant="body"
-                    as="td"
-                    className="border border-border px-4 py-2"
-                  >
-                    <Code>H2</Code>
-                  </Typography>
-                  <Typography
-                    variant="body"
-                    as="td"
-                    className="border border-border px-4 py-2"
-                  >
-                    h2
-                  </Typography>
-                  <Typography
-                    variant="body"
-                    as="td"
-                    className="border border-border px-4 py-2"
-                  >
-                    sectionTitle
-                  </Typography>
-                  <Typography
-                    variant="body"
-                    as="td"
-                    className="border border-border px-4 py-2"
-                  >
-                    Variable
-                  </Typography>
-                  <Typography
-                    variant="body"
-                    as="td"
-                    className="border border-border px-4 py-2"
-                  >
-                    Section headings
-                  </Typography>
-                  <Typography
-                    variant="body"
-                    as="td"
-                    className="border border-border px-4 py-2"
-                  >
-                    <H2 className="text-sm">Section Title</H2>
-                  </Typography>
-                </tr>
-                <tr>
-                  <Typography
-                    variant="body"
-                    as="td"
-                    className="border border-border px-4 py-2"
-                  >
-                    <Code>H3</Code>
-                  </Typography>
-                  <Typography
-                    variant="body"
-                    as="td"
-                    className="border border-border px-4 py-2"
-                  >
-                    h3
-                  </Typography>
-                  <Typography
-                    variant="body"
-                    as="td"
-                    className="border border-border px-4 py-2"
-                  >
-                    headline
-                  </Typography>
-                  <Typography
-                    variant="body"
-                    as="td"
-                    className="border border-border px-4 py-2"
-                  >
-                    Variable
-                  </Typography>
-                  <Typography
-                    variant="body"
-                    as="td"
-                    className="border border-border px-4 py-2"
-                  >
-                    Subsection headings
-                  </Typography>
-                  <Typography
-                    variant="body"
-                    as="td"
-                    className="border border-border px-4 py-2"
-                  >
-                    <H3 className="text-sm">Subsection</H3>
-                  </Typography>
-                </tr>
-                <tr>
-                  <Typography
-                    variant="body"
-                    as="td"
-                    className="border border-border px-4 py-2"
-                  >
-                    <Code>H4</Code>
-                  </Typography>
-                  <Typography
-                    variant="body"
-                    as="td"
-                    className="border border-border px-4 py-2"
-                  >
-                    h4
-                  </Typography>
-                  <Typography
-                    variant="body"
-                    as="td"
-                    className="border border-border px-4 py-2"
-                  >
-                    subHeadline
-                  </Typography>
-                  <Typography
-                    variant="body"
-                    as="td"
-                    className="border border-border px-4 py-2"
-                  >
-                    Variable
-                  </Typography>
-                  <Typography
-                    variant="body"
-                    as="td"
-                    className="border border-border px-4 py-2"
-                  >
-                    Sub headlines
-                  </Typography>
-                  <Typography
-                    variant="body"
-                    as="td"
-                    className="border border-border px-4 py-2"
-                  >
-                    <H4 className="text-sm">Minor Heading</H4>
-                  </Typography>
-                </tr>
-                <tr>
-                  <Typography
-                    variant="body"
-                    as="td"
-                    className="border border-border px-4 py-2"
-                  >
-                    <Code>H5</Code>
-                  </Typography>
-                  <Typography
-                    variant="body"
-                    as="td"
-                    className="border border-border px-4 py-2"
-                  >
-                    h5
-                  </Typography>
-                  <Typography
-                    variant="body"
-                    as="td"
-                    className="border border-border px-4 py-2"
-                  >
-                    eyebrow
-                  </Typography>
-                  <Typography
-                    variant="body"
-                    as="td"
-                    className="border border-border px-4 py-2"
-                  >
-                    Variable
-                  </Typography>
-                  <Typography
-                    variant="body"
-                    as="td"
-                    className="border border-border px-4 py-2"
-                  >
-                    Small headings
-                  </Typography>
-                  <Typography
-                    variant="body"
-                    as="td"
-                    className="border border-border px-4 py-2"
-                  >
-                    <H5 className="text-sm">Small Heading</H5>
-                  </Typography>
-                </tr>
-                <tr>
-                  <Typography
-                    variant="body"
-                    as="td"
-                    className="border border-border px-4 py-2"
-                  >
-                    <Code>H6</Code>
-                  </Typography>
-                  <Typography
-                    variant="body"
-                    as="td"
-                    className="border border-border px-4 py-2"
-                  >
-                    h6
-                  </Typography>
-                  <Typography
-                    variant="body"
-                    as="td"
-                    className="border border-border px-4 py-2"
-                  >
-                    detail
-                  </Typography>
-                  <Typography
-                    variant="body"
-                    as="td"
-                    className="border border-border px-4 py-2"
-                  >
-                    Variable
-                  </Typography>
-                  <Typography
-                    variant="body"
-                    as="td"
-                    className="border border-border px-4 py-2"
-                  >
-                    Smallest headings
-                  </Typography>
-                  <Typography
-                    variant="body"
-                    as="td"
-                    className="border border-border px-4 py-2"
-                  >
-                    <H6 className="text-sm">Tiny Heading</H6>
-                  </Typography>
-                </tr>
-                <tr>
-                  <Typography
-                    variant="body"
-                    as="td"
-                    className="border border-border px-4 py-2"
-                  >
-                    <Code>P</Code>
-                  </Typography>
-                  <Typography
-                    variant="body"
-                    as="td"
-                    className="border border-border px-4 py-2"
-                  >
-                    p
-                  </Typography>
-                  <Typography
-                    variant="body"
-                    as="td"
-                    className="border border-border px-4 py-2"
-                  >
-                    body
-                  </Typography>
-                  <Typography
-                    variant="body"
-                    as="td"
-                    className="border border-border px-4 py-2"
-                  >
-                    Variable
-                  </Typography>
-                  <Typography
-                    variant="body"
-                    as="td"
-                    className="border border-border px-4 py-2"
-                  >
-                    Body text, paragraphs
-                  </Typography>
-                  <Typography
-                    variant="body"
-                    as="td"
-                    className="border border-border px-4 py-2"
-                  >
-                    <P className="text-sm">Standard paragraph text.</P>
-                  </Typography>
-                </tr>
-                <tr>
-                  <Typography
-                    variant="body"
-                    as="td"
-                    className="border border-border px-4 py-2"
-                  >
-                    <Code>A</Code>
-                  </Typography>
-                  <Typography
-                    variant="body"
-                    as="td"
-                    className="border border-border px-4 py-2"
-                  >
-                    a
-                  </Typography>
-                  <Typography
-                    variant="body"
-                    as="td"
-                    className="border border-border px-4 py-2"
-                  >
-                    body + underline
-                  </Typography>
-                  <Typography
-                    variant="body"
-                    as="td"
-                    className="border border-border px-4 py-2"
-                  >
-                    Variable
-                  </Typography>
-                  <Typography
-                    variant="body"
-                    as="td"
-                    className="border border-border px-4 py-2"
-                  >
-                    Links with hover states
-                  </Typography>
-                  <Typography
-                    variant="body"
-                    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="body"
-                    as="td"
-                    className="border border-border px-4 py-2"
-                  >
-                    <Code>Span</Code>
-                  </Typography>
-                  <Typography
-                    variant="body"
-                    as="td"
-                    className="border border-border px-4 py-2"
-                  >
-                    span
-                  </Typography>
-                  <Typography
-                    variant="body"
-                    as="td"
-                    className="border border-border px-4 py-2"
-                  >
-                    body (default)
-                  </Typography>
-                  <Typography
-                    variant="body"
-                    as="td"
-                    className="border border-border px-4 py-2"
-                  >
-                    Variable
-                  </Typography>
-                  <Typography
-                    variant="body"
-                    as="td"
-                    className="border border-border px-4 py-2"
-                  >
-                    Inline text, highlights
-                  </Typography>
-                  <Typography
-                    variant="body"
-                    as="td"
-                    className="border border-border px-4 py-2"
-                  >
-                    <Span className="text-sm" color="accent">
-                      Highlighted text
-                    </Span>
-                  </Typography>
-                </tr>
-                <tr>
-                  <Typography
-                    variant="body"
-                    as="td"
-                    className="border border-border px-4 py-2"
-                  >
-                    <Code>Strong</Code>
-                  </Typography>
-                  <Typography
-                    variant="body"
-                    as="td"
-                    className="border border-border px-4 py-2"
-                  >
-                    strong
-                  </Typography>
-                  <Typography
-                    variant="body"
-                    as="td"
-                    className="border border-border px-4 py-2"
-                  >
-                    bodyEmphasized
-                  </Typography>
-                  <Typography
-                    variant="body"
-                    as="td"
-                    className="border border-border px-4 py-2"
-                  >
-                    Variable
-                  </Typography>
-                  <Typography
-                    variant="body"
-                    as="td"
-                    className="border border-border px-4 py-2"
-                  >
-                    Emphasized text
-                  </Typography>
-                  <Typography
-                    variant="body"
-                    as="td"
-                    className="border border-border px-4 py-2"
-                  >
-                    <Strong className="text-sm">Important text</Strong>
-                  </Typography>
-                </tr>
-                <tr>
-                  <Typography
-                    variant="body"
-                    as="td"
-                    className="border border-border px-4 py-2"
-                  >
-                    <Code>Lead</Code>
-                  </Typography>
-                  <Typography
-                    variant="body"
-                    as="td"
-                    className="border border-border px-4 py-2"
-                  >
-                    p
-                  </Typography>
-                  <Typography
-                    variant="body"
-                    as="td"
-                    className="border border-border px-4 py-2"
-                  >
-                    paragraphLead
-                  </Typography>
-                  <Typography
-                    variant="body"
-                    as="td"
-                    className="border border-border px-4 py-2"
-                  >
-                    Variable
-                  </Typography>
-                  <Typography
-                    variant="body"
-                    as="td"
-                    className="border border-border px-4 py-2"
-                  >
-                    Introductory text
-                  </Typography>
-                  <Typography
-                    variant="body"
-                    as="td"
-                    className="border border-border px-4 py-2"
-                  >
-                    <Lead className="text-sm">Article introduction</Lead>
-                  </Typography>
-                </tr>
-                <tr>
-                  <Typography
-                    variant="body"
-                    as="td"
-                    className="border border-border px-4 py-2"
-                  >
-                    <Code>Small</Code>
-                  </Typography>
-                  <Typography
-                    variant="body"
-                    as="td"
-                    className="border border-border px-4 py-2"
-                  >
-                    small
-                  </Typography>
-                  <Typography
-                    variant="body"
-                    as="td"
-                    className="border border-border px-4 py-2"
-                  >
-                    microcopy
-                  </Typography>
-                  <Typography
-                    variant="body"
-                    as="td"
-                    className="border border-border px-4 py-2"
-                  >
-                    Variable
-                  </Typography>
-                  <Typography
-                    variant="body"
-                    as="td"
-                    className="border border-border px-4 py-2"
-                  >
-                    Fine print, captions
-                  </Typography>
-                  <Typography
-                    variant="body"
-                    as="td"
-                    className="border border-border px-4 py-2"
-                  >
-                    <Small className="text-xs">Terms apply</Small>
-                  </Typography>
-                </tr>
-                <tr>
-                  <Typography
-                    variant="body"
-                    as="td"
-                    className="border border-border px-4 py-2"
-                  >
-                    <Code>Code</Code>
-                  </Typography>
-                  <Typography
-                    variant="body"
-                    as="td"
-                    className="border border-border px-4 py-2"
-                  >
-                    code
-                  </Typography>
-                  <Typography
-                    variant="body"
-                    as="td"
-                    className="border border-border px-4 py-2"
-                  >
-                    code
-                  </Typography>
-                  <Typography
-                    variant="body"
-                    as="td"
-                    className="border border-border px-4 py-2"
-                  >
-                    Variable
-                  </Typography>
-                  <Typography
-                    variant="body"
-                    as="td"
-                    className="border border-border px-4 py-2"
-                  >
-                    Inline code snippets
-                  </Typography>
-                  <Typography
-                    variant="body"
-                    as="td"
-                    className="border border-border px-4 py-2"
-                  >
-                    <Code className="text-xs">useState</Code>
-                  </Typography>
-                </tr>
-                <tr>
-                  <Typography
-                    variant="body"
-                    as="td"
-                    className="border border-border px-4 py-2"
-                  >
-                    <Code>Blockquote</Code>
-                  </Typography>
-                  <Typography
-                    variant="body"
-                    as="td"
-                    className="border border-border px-4 py-2"
-                  >
-                    blockquote
-                  </Typography>
-                  <Typography
-                    variant="body"
-                    as="td"
-                    className="border border-border px-4 py-2"
-                  >
-                    blogBody + italic
-                  </Typography>
-                  <Typography
-                    variant="body"
-                    as="td"
-                    className="border border-border px-4 py-2"
-                  >
-                    Variable
-                  </Typography>
-                  <Typography
-                    variant="body"
-                    as="td"
-                    className="border border-border px-4 py-2"
-                  >
-                    Quoted text
-                  </Typography>
-                  <Typography
-                    variant="body"
-                    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="paragraphLead">Available Props:</Typography>
-              <ul className="mt-2 space-y-1 ml-4">
-                <li>
-                  <Code>color</Code> - default, muted, faint, 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="paragraphLead">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.",
-      },
-    },
-  },
-};