@neynar/ui 0.1.1 → 0.1.2

package/dist/components/ui/typography.d.ts

@@ -5,283 +5,601 @@ import { type VariantProps } from "class-variance-authority";
  *
  * Defines all possible typography variants, sizes, and styling options.
  * Uses Tailwind CSS 4 with custom CSS properties for theming.
+ * Provides consistent text styling across the entire application.
  *
- * @see {@link https://cva.style/docs} - CVA documentation
- * @see {@link https://ui.shadcn.com/docs/components/typography} - Typography component inspiration
+ * @variant heading - Primary headings for page/section titles (text-lg, font-semibold, leading-tight)
+ * @variant subheading - Secondary headings for subsections (text-base, font-medium, leading-relaxed)
+ * @variant body - Standard body text for readable content (text-sm, leading-relaxed)
+ * @variant bodyEmphasized - Emphasized body text with medium weight for important information (text-sm, font-medium)
+ * @variant details - Smaller text for details, captions, and descriptions (text-xs, leading-normal)
+ * @variant field - Text for form fields, labels, and input elements (text-base, leading-normal)
+ * @variant code - Monospace text for code snippets and technical content (text-base, font-mono)
+ * @variant microcopy - Very small text for fine print, timestamps, and metadata (text-microcopy, leading-tight)
+ * @variant tableCell - Text optimized for table cell content with proper line height (text-base, leading-normal)
+ * @variant tableHeader - Text for table headers with medium weight for emphasis (text-base, font-medium)
+ *
+ * @see {@link https://cva.style/docs} CVA documentation for variant patterns
+ * @see {@link https://ui.shadcn.com/docs/components/typography} Typography component inspiration
  * @since 1.0.0
  */
 declare const typographyVariants: (props?: ({
-    variant?: "body" | "code" | "details" | "heading" | "subheading" | "bodyEmphasized" | "field" | "microcopy" | "tableCell" | "tableHeader" | null | undefined;
+    variant?: "heading" | "body" | "code" | "details" | "subheading" | "bodyEmphasized" | "field" | "microcopy" | "tableCell" | "tableHeader" | null | undefined;
     color?: "accent" | "default" | "destructive" | "muted" | "success" | "warning" | null | undefined;
     align?: "left" | "right" | "center" | "justify" | null | undefined;
     transform?: "capitalize" | "lowercase" | "uppercase" | null | undefined;
     weight?: "bold" | "normal" | "medium" | "semibold" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 /**
- * Props interface for the Typography component
+ * Base props for all Typography components
  */
-export interface TypographyProps extends Omit<React.HTMLAttributes<HTMLElement>, "color">, VariantProps<typeof typographyVariants> {
-    /**
-     * The HTML element or component to render as
-     * @default "p"
-     */
+type TypographyBaseProps = {
+    /** Typography variant that determines text size, weight, and line height */
+    variant?: VariantProps<typeof typographyVariants>["variant"];
+    /** Color variant for semantic meaning and visual hierarchy */
+    color?: VariantProps<typeof typographyVariants>["color"];
+    /** Text alignment within the container */
+    align?: VariantProps<typeof typographyVariants>["align"];
+    /** Text transformation for stylistic effects */
+    transform?: VariantProps<typeof typographyVariants>["transform"];
+    /** Font weight override for visual emphasis */
+    weight?: VariantProps<typeof typographyVariants>["weight"];
+    /** The HTML element or component to render as @default "p" */
     as?: React.ElementType;
-    /**
-     * For label elements, the associated input ID
-     */
+    /** For label elements, the associated input ID for accessibility */
     htmlFor?: string;
-    /**
-     * Whether to render as a Slot component for composition
-     * @default false
-     */
+    /** Whether to render as a Slot component for composition patterns @default false */
     asChild?: boolean;
-    /**
-     * Whether the text should be italic
-     * @default false
-     */
+    /** Whether the text should be rendered in italic style @default false */
     italic?: boolean;
-    /**
-     * Whether the text should be underlined
-     * @default false
-     */
+    /** Whether the text should have underline decoration @default false */
     underline?: boolean;
-    /**
-     * Whether the text should be struck through
-     * @default false
-     */
+    /** Whether the text should have strikethrough decoration @default false */
     strikethrough?: boolean;
-    /**
-     * Whether the text should have a truncated overflow with ellipsis
-     * @default false
-     */
+    /** Whether text should be truncated with ellipsis on overflow @default false */
     truncate?: boolean;
-    /**
-     * Screen reader only text (visually hidden but accessible)
-     * @default false
-     */
+    /** Hide visually but keep accessible to screen readers @default false */
     srOnly?: boolean;
-}
+    /** Additional CSS classes for custom styling */
+    className?: string;
+    /** Content to render within the typography element */
+    children?: React.ReactNode;
+};
+/**
+ * Complete props for the Typography component
+ */
+type TypographyProps = TypographyBaseProps & Omit<React.HTMLAttributes<HTMLElement>, keyof TypographyBaseProps>;
 /**
- * Typography component for consistent text styling across the application
+ * Typography - Comprehensive text styling component for consistent design system implementation
  *
- * Provides a comprehensive set of typography variants based on design system
- * specifications. Supports semantic HTML elements, accessibility features,
- * and flexible styling options.
+ * A flexible typography component that provides semantic text variants, color options, and accessibility features.
+ * Built with class-variance-authority (CVA) for type-safe variant management and supports both semantic HTML
+ * elements and composition patterns via Radix UI Slot. Designed to handle all text styling needs across
+ * the application with consistent visual hierarchy and accessibility compliance.
  *
- * @component
  * @example
  * ```tsx
- * // Basic heading
+ * // Basic heading with semantic HTML
  * <Typography variant="heading" as="h1">
  *   Welcome to Neynar
  * </Typography>
  *
- * // Body text with color
+ * // Body text with color variant
  * <Typography variant="body" color="muted">
- *   This is some body text with muted color.
+ *   This is secondary body text with reduced visual prominence.
  * </Typography>
  *
- * // Code snippet
+ * // Code snippet with proper semantics
  * <Typography variant="code" as="code">
  *   const message = "Hello, world!";
  * </Typography>
- *
- * // Table header
- * <Typography variant="tableHeader" as="th">
- *   Column Header
- * </Typography>
  * ```
  *
  * @example
  * ```tsx
- * // With additional styling
+ * // Advanced styling with multiple variants
  * <Typography
  *   variant="subheading"
  *   color="accent"
  *   align="center"
+ *   weight="semibold"
  *   italic
  *   underline
+ *   className="mb-4"
  * >
- *   Styled Subheading
+ *   Styled Subheading with Multiple Variants
  * </Typography>
  *
- * // Truncated text
+ * // Truncated text for constrained layouts
  * <Typography variant="body" truncate className="max-w-xs">
- *   This is a very long text that will be truncated with ellipsis
+ *   This is a very long text that will be truncated with ellipsis when it exceeds the container width
  * </Typography>
+ * ```
  *
- * // Screen reader only
+ * @example
+ * ```tsx
+ * // Accessibility features
  * <Typography variant="details" srOnly>
- *   Additional context for screen readers
+ *   Additional context for screen readers only
  * </Typography>
- * ```
  *
- * @param props - Typography component props
- * @param props.variant - Typography variant for semantic styling
- * @param props.color - Color variant for different semantic meanings
- * @param props.align - Text alignment
- * @param props.transform - Text transformation
- * @param props.weight - Font weight override
- * @param props.as - HTML element to render as
- * @param props.asChild - Render as Slot for composition
- * @param props.italic - Apply italic styling
- * @param props.underline - Apply underline styling
- * @param props.strikethrough - Apply strikethrough styling
- * @param props.truncate - Apply text truncation with ellipsis
- * @param props.srOnly - Hide visually but keep accessible
- * @param props.className - Additional CSS classes
- * @param props.children - Content to render
+ * // Form label with proper association
+ * <Typography variant="field" as="label" htmlFor="email-input">
+ *   Email Address
+ * </Typography>
+ *
+ * // Composition with asChild for complex structures
+ * <Typography variant="body" asChild>
+ *   <a href="/about" className="hover:underline">
+ *     Learn more about our platform
+ *   </a>
+ * </Typography>
+ * ```
  *
  * @accessibility
- * - Uses semantic HTML elements when specified via `as` prop
- * - Supports screen reader only content with `srOnly` prop
- * - Maintains proper color contrast ratios across all color variants
- * - Respects user preferences for reduced motion and high contrast
+ * - **Semantic HTML**: Uses appropriate HTML elements via `as` prop for proper document structure
+ * - **Screen Reader Support**: `srOnly` prop provides content accessible only to assistive technologies
+ * - **Color Contrast**: All color variants meet WCAG 2.1 AA contrast requirements (4.5:1 minimum)
+ * - **Label Association**: `htmlFor` prop properly associates labels with form controls
+ * - **Focus Management**: Interactive elements receive proper focus indicators
+ * - **Text Scaling**: All font sizes scale appropriately with user's browser text size preferences
+ * - **High Contrast Mode**: Respects system high contrast mode preferences
+ *
+ * @performance
+ * - Uses CVA for efficient class generation and tree-shaking
+ * - Minimal runtime overhead with compile-time optimizations
+ * - Cached class combinations for repeated variant usage
  *
+ * @see {@link H1} Semantic H1 heading component
+ * @see {@link H2} Semantic H2 heading component
+ * @see {@link P} Semantic paragraph component
+ * @see {@link Code} Semantic code element component
+ * @see {@link https://cva.style/docs} Class Variance Authority documentation
+ * @see {@link https://ui.shadcn.com/docs/components/typography} shadcn/ui Typography reference
  * @since 1.0.0
  */
-export declare function Typography({ className, variant, color, align, transform, weight, as: Element, asChild, italic, underline, strikethrough, truncate, srOnly, ...props }: TypographyProps): import("react/jsx-runtime").JSX.Element;
+declare function Typography({ className, variant, color, align, transform, weight, as: Element, asChild, italic, underline, strikethrough, truncate, srOnly, ...props }: TypographyProps): import("react/jsx-runtime").JSX.Element;
+/** Props for H1 heading component */
+type H1Props = Omit<TypographyProps, "as" | "variant">;
 /**
- * Individual semantic typography components with pre-configured defaults
- */
-/**
- * H1 heading component
+ * H1 - Primary page heading component
+ *
+ * The main heading for a page or major section. Uses the "heading" variant with h1 semantic element.
+ * Should be used once per page for proper document outline and SEO.
  *
  * @example
  * ```tsx
- * <H1>Main Page Title</H1>
- * <H1 color="muted">Subtle heading</H1>
+ * // Page title
+ * <H1>Welcome to Neynar Platform</H1>
+ *
+ * // With color variant
+ * <H1 color="muted">Draft: Article Title</H1>
+ *
+ * // With custom styling
+ * <H1 align="center" className="mb-8">
+ *   Centered Page Heading
+ * </H1>
  * ```
+ *
+ * @accessibility
+ * - Creates proper document outline structure
+ * - Should be the first heading on the page
+ * - Provides main page topic for screen readers
+ * - Helps with keyboard navigation landmarks
+ *
+ * @see {@link H2} Secondary heading component
+ * @see {@link Typography} Base typography component
  */
-export declare function H1(props: Omit<TypographyProps, "as" | "variant">): import("react/jsx-runtime").JSX.Element;
+declare function H1(props: H1Props): import("react/jsx-runtime").JSX.Element;
+/** Props for H2 heading component */
+type H2Props = Omit<TypographyProps, "as" | "variant">;
 /**
- * H2 heading component
+ * H2 - Secondary section heading component
+ *
+ * Section headings that divide page content into logical groups. Uses the "subheading" variant
+ * with h2 semantic element. Essential for creating proper document hierarchy.
  *
  * @example
  * ```tsx
- * <H2>Section Title</H2>
- * <H2 color="accent">Highlighted section</H2>
+ * // Section heading
+ * <H2>Getting Started</H2>
+ *
+ * // With accent color
+ * <H2 color="accent">Featured Content</H2>
+ *
+ * // With additional styling
+ * <H2 weight="bold" className="border-b pb-2">
+ *   Section with Border
+ * </H2>
  * ```
+ *
+ * @accessibility
+ * - Maintains document outline hierarchy
+ * - Should follow H1 and precede H3 elements
+ * - Provides section navigation for screen readers
+ * - Essential for skip navigation functionality
+ *
+ * @see {@link H1} Primary heading component
+ * @see {@link H3} Tertiary heading component
  */
-export declare function H2(props: Omit<TypographyProps, "as" | "variant">): import("react/jsx-runtime").JSX.Element;
+declare function H2(props: H2Props): import("react/jsx-runtime").JSX.Element;
+/** Props for H3 heading component */
+type H3Props = Omit<TypographyProps, "as" | "variant">;
 /**
- * H3 heading component
+ * H3 - Tertiary subsection heading component
+ *
+ * Subsection headings for further content division. Uses the "subheading" variant
+ * with h3 semantic element for consistent visual hierarchy.
  *
  * @example
  * ```tsx
- * <H3>Subsection Title</H3>
+ * // Subsection heading
+ * <H3>Installation Guide</H3>
+ *
+ * // In a card or content block
+ * <H3 color="muted" className="mb-3">
+ *   Optional Configuration
+ * </H3>
  * ```
+ *
+ * @accessibility
+ * - Should follow H2 elements in document flow
+ * - Helps create detailed content structure
+ * - Improves navigation with assistive technologies
+ * - Supports table of contents generation
  */
-export declare function H3(props: Omit<TypographyProps, "as" | "variant">): import("react/jsx-runtime").JSX.Element;
+declare function H3(props: H3Props): import("react/jsx-runtime").JSX.Element;
+/** Props for H4 heading component */
+type H4Props = Omit<TypographyProps, "as" | "variant">;
 /**
- * H4 heading component
+ * H4 - Minor heading component for detailed sections
+ *
+ * Minor headings for detailed content organization. Uses "bodyEmphasized" variant
+ * with h4 semantic element for subtle but distinct hierarchy.
  *
  * @example
  * ```tsx
- * <H4>Minor Heading</H4>
+ * // Minor section heading
+ * <H4>Configuration Options</H4>
+ *
+ * // In detailed documentation
+ * <H4 color="muted">Advanced Settings</H4>
  * ```
+ *
+ * @accessibility
+ * - Maintains proper heading hierarchy flow
+ * - Provides fine-grained content organization
+ * - Supports screen reader document navigation
  */
-export declare function H4(props: Omit<TypographyProps, "as" | "variant">): import("react/jsx-runtime").JSX.Element;
+declare function H4(props: H4Props): import("react/jsx-runtime").JSX.Element;
+/** Props for H5 heading component */
+type H5Props = Omit<TypographyProps, "as" | "variant">;
 /**
- * H5 heading component
+ * H5 - Small heading component for micro-sections
+ *
+ * Small headings for very specific content divisions. Uses "bodyEmphasized" variant
+ * with h5 semantic element.
  *
  * @example
  * ```tsx
- * <H5>Small Heading</H5>
+ * // Small section heading
+ * <H5>Error Codes</H5>
+ *
+ * // In lists or detailed breakdowns
+ * <H5 weight="semibold">Step 1: Setup</H5>
  * ```
  */
-export declare function H5(props: Omit<TypographyProps, "as" | "variant">): import("react/jsx-runtime").JSX.Element;
+declare function H5(props: H5Props): import("react/jsx-runtime").JSX.Element;
+/** Props for H6 heading component */
+type H6Props = Omit<TypographyProps, "as" | "variant">;
 /**
- * H6 heading component
+ * H6 - Smallest heading component for minimal emphasis
+ *
+ * The smallest semantic heading level. Uses "details" variant with h6 element
+ * for minimal but semantic emphasis.
  *
  * @example
  * ```tsx
- * <H6>Smallest Heading</H6>
+ * // Smallest heading
+ * <H6>Notes and Disclaimers</H6>
+ *
+ * // In deeply nested content
+ * <H6 color="muted">Technical Details</H6>
  * ```
  */
-export declare function H6(props: Omit<TypographyProps, "as" | "variant">): import("react/jsx-runtime").JSX.Element;
+declare function H6(props: H6Props): import("react/jsx-runtime").JSX.Element;
+/** Props for P paragraph component */
+type PProps = Omit<TypographyProps, "as" | "variant">;
 /**
- * Paragraph component for body text
+ * P - Paragraph component for body text content
+ *
+ * Standard paragraph element for readable body text. Uses "body" variant with p semantic element.
+ * Optimized for readability with appropriate line height and font size.
  *
  * @example
  * ```tsx
- * <P>Standard paragraph text content.</P>
- * <P color="muted">Secondary paragraph text.</P>
- * <P className="mb-4">Paragraph with custom margin.</P>
+ * // Standard paragraph
+ * <P>This is standard body text that provides information to the user.</P>
+ *
+ * // With color variants
+ * <P color="muted">Secondary information with reduced visual prominence.</P>
+ *
+ * // With custom spacing
+ * <P className="mb-6">Paragraph with custom bottom margin for layout control.</P>
+ *
+ * // Truncated paragraph
+ * <P truncate className="max-w-md">
+ *   Long paragraph content that will be truncated with ellipsis
+ * </P>
  * ```
+ *
+ * @accessibility
+ * - Provides proper semantic structure for body content
+ * - Maintains readable line height for accessibility
+ * - Supports screen reader text flow and navigation
+ *
+ * @see {@link Typography} Base typography component
  */
-export declare function P(props: Omit<TypographyProps, "as" | "variant">): import("react/jsx-runtime").JSX.Element;
+declare function P(props: PProps): import("react/jsx-runtime").JSX.Element;
+/** Props for Span inline component */
+type SpanProps = Omit<TypographyProps, "as">;
 /**
- * Span component for inline text
+ * Span - Inline text component for text fragments and styling
+ *
+ * Generic inline element for styling text fragments within other content.
+ * Supports all typography variants while maintaining inline display behavior.
  *
  * @example
  * ```tsx
- * <span>Regular text with <Span color="accent">highlighted</Span> content</span>
- * <Span variant="details">Small inline text</Span>
+ * // Inline text styling
+ * <p>
+ *   Regular text with <Span color="accent" weight="semibold">highlighted</Span> content
+ * </p>
+ *
+ * // Small inline details
+ * <Span variant="details" color="muted">
+ *   Updated 5 minutes ago
+ * </Span>
+ *
+ * // Inline code reference
+ * <Span variant="code" className="bg-muted px-1 rounded">
+ *   onClick
+ * </Span>
  * ```
+ *
+ * @accessibility
+ * - Maintains inline text flow for screen readers
+ * - Preserves semantic meaning within larger text blocks
+ * - Does not interrupt document structure or navigation
  */
-export declare function Span(props: Omit<TypographyProps, "as">): import("react/jsx-runtime").JSX.Element;
+declare function Span(props: SpanProps): import("react/jsx-runtime").JSX.Element;
+/** Props for Code component */
+type CodeProps = Omit<TypographyProps, "as" | "variant">;
 /**
- * Code component for inline code snippets
+ * Code - Inline code component for technical content
+ *
+ * Semantic code element for inline code snippets, variable names, and technical references.
+ * Uses monospace font and "code" variant for clear distinction from regular text.
  *
  * @example
  * ```tsx
- * <Code>const hello = "world";</Code>
- * <Code color="muted">npm install</Code>
+ * // Inline code snippet
+ * <Code>const message = "Hello, world!";</Code>
+ *
+ * // Terminal command
+ * <Code color="muted">npm install @neynar/react</Code>
+ *
+ * // Variable reference
+ * <p>Set the <Code>API_KEY</Code> environment variable.</p>
+ *
+ * // With background styling
+ * <Code className="bg-muted px-2 py-1 rounded">
+ *   function handleClick()
+ * </Code>
  * ```
+ *
+ * @accessibility
+ * - Uses semantic code element for proper meaning
+ * - Monospace font aids in code readability
+ * - Screen readers understand this as technical content
+ * - Maintains proper inline behavior within text
+ *
+ * @see {@link Typography} Base typography component for multi-line code blocks
  */
-export declare function Code(props: Omit<TypographyProps, "as" | "variant">): import("react/jsx-runtime").JSX.Element;
+declare function Code(props: CodeProps): import("react/jsx-runtime").JSX.Element;
+/** Props for Small component */
+type SmallProps = Omit<TypographyProps, "as" | "variant">;
 /**
- * Small component for fine print and microcopy
+ * Small - Fine print component for supplementary information
+ *
+ * Semantic small element for fine print, disclaimers, timestamps, and supplementary information.
+ * Uses "microcopy" variant for reduced visual prominence while maintaining readability.
  *
  * @example
  * ```tsx
- * <Small>Terms and conditions apply</Small>
- * <Small color="muted">Updated 2 minutes ago</Small>
+ * // Legal disclaimer
+ * <Small>Terms and conditions apply. See details for more information.</Small>
+ *
+ * // Timestamp or metadata
+ * <Small color="muted">Last updated 2 minutes ago</Small>
+ *
+ * // Copyright notice
+ * <Small className="text-center">
+ *   © 2024 Neynar. All rights reserved.
+ * </Small>
+ *
+ * // Form help text
+ * <Small color="muted">Password must be at least 8 characters long.</Small>
  * ```
+ *
+ * @accessibility
+ * - Uses semantic small element for proper meaning
+ * - Indicates fine print or less important information
+ * - Maintains sufficient contrast for readability
+ * - Works well with form help text and descriptions
  */
-export declare function Small(props: Omit<TypographyProps, "as" | "variant">): import("react/jsx-runtime").JSX.Element;
+declare function Small(props: SmallProps): import("react/jsx-runtime").JSX.Element;
+/** Props for Strong component */
+type StrongProps = Omit<TypographyProps, "as" | "variant">;
 /**
- * Strong component for emphasized text
+ * Strong - Emphasized text component for important content
+ *
+ * Semantic strong element for text that needs strong emphasis or importance.
+ * Uses "bodyEmphasized" variant with strong semantic meaning.
  *
  * @example
  * ```tsx
- * <Strong>Important information</Strong>
- * <Strong color="destructive">Critical warning</Strong>
+ * // Important information
+ * <Strong>Important: This action cannot be undone.</Strong>
+ *
+ * // Critical warning
+ * <Strong color="destructive">Error: Invalid credentials provided.</Strong>
+ *
+ * // In body text
+ * <p>
+ *   Make sure to <Strong>save your changes</Strong> before leaving the page.
+ * </p>
+ *
+ * // Success message
+ * <Strong color="success">Account created successfully!</Strong>
  * ```
+ *
+ * @accessibility
+ * - Uses semantic strong element for emphasis
+ * - Screen readers understand this as important content
+ * - Provides semantic meaning beyond visual styling
+ * - Maintains proper emphasis hierarchy in content
  */
-export declare function Strong(props: Omit<TypographyProps, "as" | "variant">): import("react/jsx-runtime").JSX.Element;
+declare function Strong(props: StrongProps): import("react/jsx-runtime").JSX.Element;
+/** Props for Lead component */
+type LeadProps = Omit<TypographyProps, "as" | "variant" | "color"> & {
+    /** Color override for lead text @default "muted" */
+    color?: TypographyProps["color"];
+};
 /**
- * Lead component for introductory text
+ * Lead - Introductory paragraph component for article openings
+ *
+ * Lead paragraph for article introductions, page descriptions, and summary content.
+ * Uses "subheading" variant with muted color for visual hierarchy.
  *
  * @example
  * ```tsx
- * <Lead>This is the introduction to the article...</Lead>
+ * // Article introduction
+ * <Lead>
+ *   This comprehensive guide covers everything you need to know about
+ *   building modern web applications with React and TypeScript.
+ * </Lead>
+ *
+ * // Page description
+ * <Lead className="mb-8">
+ *   Discover powerful APIs and tools to build the next generation
+ *   of social applications on Farcaster.
+ * </Lead>
+ *
+ * // With custom color
+ * <Lead color="default">
+ *   This lead paragraph uses the default text color for more prominence.
+ * </Lead>
  * ```
+ *
+ * @accessibility
+ * - Provides clear content hierarchy for screen readers
+ * - Larger text size improves readability for introductory content
+ * - Maintains proper document flow and structure
  */
-export declare function Lead(props: Omit<TypographyProps, "as" | "variant">): import("react/jsx-runtime").JSX.Element;
+declare function Lead({ color, ...props }: LeadProps): import("react/jsx-runtime").JSX.Element;
+/** Props for A anchor component */
+type AProps = Omit<TypographyProps, "as" | "variant"> & {
+    /** Link destination URL */
+    href?: string;
+} & React.AnchorHTMLAttributes<HTMLAnchorElement>;
 /**
- * Anchor/Link component for interactive text links
+ * A - Anchor component for interactive text links
+ *
+ * Semantic anchor element for links with built-in hover states and accessibility features.
+ * Uses "body" variant with underline and smooth color transitions.
  *
  * @example
  * ```tsx
- * <A href="https://example.com">Visit our website</A>
- * <A href="/about" color="accent">Learn more</A>
- * <A asChild><Link href="/about">Learn more</Link></A>
+ * // External link
+ * <A href="https://neynar.com" target="_blank" rel="noopener noreferrer">
+ *   Visit Neynar Website
+ * </A>
+ *
+ * // Internal navigation
+ * <A href="/dashboard" color="accent">
+ *   Go to Dashboard
+ * </A>
+ *
+ * // Composition with Next.js Link
+ * <A asChild>
+ *   <Link href="/about">
+ *     Learn More About Us
+ *   </Link>
+ * </A>
+ *
+ * // In paragraph text
+ * <P>
+ *   For more information, <A href="/docs">check our documentation</A> or
+ *   contact support.
+ * </P>
  * ```
+ *
+ * @accessibility
+ * - Uses semantic anchor element for proper link behavior
+ * - Includes hover and focus states for interaction feedback
+ * - Supports keyboard navigation (Enter key activation)
+ * - Maintains color contrast requirements for links
+ * - Works with screen reader link navigation modes
+ * - Supports external link indicators when needed
+ *
+ * @see {@link Typography} Base typography component with asChild
  */
-export declare function A({ href, asChild, className, ...props }: Omit<TypographyProps, "as" | "variant"> & React.AnchorHTMLAttributes<HTMLAnchorElement>): import("react/jsx-runtime").JSX.Element;
+declare function A({ href, asChild, className, ...props }: AProps): import("react/jsx-runtime").JSX.Element;
+/** Props for Blockquote component */
+type BlockquoteProps = Omit<TypographyProps, "as" | "variant">;
 /**
- * Blockquote component for quoted text
+ * Blockquote - Quoted text component for citations and excerpts
+ *
+ * Semantic blockquote element for extended quotations, testimonials, and excerpts.
+ * Features italic styling and left border for visual distinction.
  *
  * @example
  * ```tsx
- * <Blockquote>"The best way to predict the future is to invent it."</Blockquote>
+ * // Simple quote
+ * <Blockquote>
+ *   "The best way to predict the future is to invent it."
+ * </Blockquote>
+ *
+ * // With attribution
+ * <div>
+ *   <Blockquote className="mb-2">
+ *     "Building great products requires deep understanding of user needs
+ *     and technical excellence in equal measure."
+ *   </Blockquote>
+ *   <Small>— Product Engineering Team</Small>
+ * </div>
+ *
+ * // Customer testimonial
+ * <Blockquote color="muted" className="bg-muted/50 p-4 rounded-lg">
+ *   "Neynar's APIs have transformed how we build social features.
+ *   The developer experience is exceptional."
+ * </Blockquote>
  * ```
+ *
+ * @accessibility
+ * - Uses semantic blockquote element for proper quotation meaning
+ * - Screen readers understand this as quoted content
+ * - Maintains proper text flow and readability
+ * - Supports citation attribution when paired with cite element
+ *
+ * @see {@link Small} For attribution text
+ * @see {@link Typography} Base typography component
  */
-export declare function Blockquote(props: Omit<TypographyProps, "as" | "variant">): import("react/jsx-runtime").JSX.Element;
+declare function Blockquote({ className, ...props }: BlockquoteProps): import("react/jsx-runtime").JSX.Element;
+export { Typography, H1, H2, H3, H4, H5, H6, P, Span, Code, Small, Strong, Lead, A, Blockquote, };
+export type { TypographyProps, H1Props, H2Props, H3Props, H4Props, H5Props, H6Props, PProps, SpanProps, CodeProps, SmallProps, StrongProps, LeadProps, AProps, BlockquoteProps, };
 /**
- * Type export for external use
+ * Type export for CVA variant props
  */
 export type { VariantProps as TypographyVariantProps } from "class-variance-authority";
 //# sourceMappingURL=typography.d.ts.map