@neynar/ui 0.3.0 → 0.4.0

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

@@ -1,569 +1,317 @@
 import * as React from "react";
-import { type VariantProps } from "class-variance-authority";
 /**
- * Typography variant configuration using 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.
- *
- * @variant microcopy - Very small text for fine print, timestamps, and metadata (text-xs)
- * @variant detail - Smaller text for details, captions, and descriptions (text-sm)
- * @variant body - Standard body text for readable content (text-base, leading-snug)
- * @variant blogBody - Body text for blog posts and long form content (text-lg, leading-loose)
- * @variant paragraphLead - Paragraph lead text for blog posts and long form content (text-lg)
- * @variant eyebrow - Eyebrow text for blog posts and long form content (text-xl)
- * @variant subHeadline - Secondary headings for subsections (text-2xl)
- * @variant headline - Primary headings for page/section titles (text-3xl)
- * @variant sectionTitle - Section titles (text-4xl, leading-relaxed)
- * @variant pageTitle - Page titles (text-5xl, leading-relaxed)
- * @variant displayTitle - Display titles (text-6xl, leading-snug)
- * @variant heroTitle - Hero titles (text-7xl, leading-snug)
- * @variant code - Monospace font for inline code, terminal commands, and technical references (text-base, font-mono)
- *
- * @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
+ * Typography Components - Purpose-named, Tailwind-first text components
+ *
+ * This module provides semantic typography components for web applications.
+ * Each component has a clear purpose and sensible Tailwind CSS defaults that
+ * can be fully overridden via the className prop.
+ *
+ * Design Philosophy:
+ * - Purpose-obvious naming (PageTitle, BodyText, Caption)
+ * - Semantic HTML defaults (h1, h2, p, etc.)
+ * - Tailwind-first with zero abstraction
+ * - Full className override control
+ * - Appropriate sizing for web apps (not marketing sites)
+ *
+ * @see {@link https://tailwindcss.com} Tailwind CSS documentation
+ * @since 2.0.0
  */
-declare const typographyVariants: (props?: ({
-    variant?: "body" | "code" | "microcopy" | "detail" | "blogBody" | "paragraphLead" | "eyebrow" | "subHeadline" | "headline" | "sectionTitle" | "pageTitle" | "displayTitle" | "heroTitle" | null | undefined;
-    color?: "accent" | "default" | "destructive" | "muted" | "faint" | "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;
-type TypographyVariant = "microcopy" | "detail" | "body" | "blogBody" | "paragraphLead" | "eyebrow" | "subHeadline" | "headline" | "sectionTitle" | "pageTitle" | "displayTitle" | "heroTitle" | "code";
-type TypographyColor = "default" | "muted" | "faint" | "accent" | "destructive" | "success" | "warning";
 /**
- * Base props for all Typography components
+ * Base typography component props
+ *
+ * All typography components accept these props:
+ * - `as` - The HTML element to render (each component has a sensible default)
+ * - `className` - Additional Tailwind classes to merge with defaults
+ * - `children` - Content to render
+ * - All standard HTML attributes for the underlying element
  */
-type TypographyBaseProps = {
-    /** Typography variant that determines text size, weight, and line height */
-    variant?: TypographyVariant;
-    /** Color variant for semantic meaning and visual hierarchy */
-    color?: TypographyColor;
-    /** 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 accessibility */
-    htmlFor?: string;
-    /** Whether to render as a Slot component for composition patterns @default false */
-    asChild?: boolean;
-    /** Whether the text should be rendered in italic style @default false */
-    italic?: boolean;
-    /** Whether the text should have underline decoration @default false */
-    underline?: boolean;
-    /** Whether the text should have strikethrough decoration @default false */
-    strikethrough?: boolean;
-    /** Whether text should be truncated with ellipsis on overflow @default false */
-    truncate?: boolean;
-    /** Hide visually but keep accessible to screen readers @default false */
-    srOnly?: boolean;
+type TypographyBaseProps<T extends React.ElementType> = {
+    /** The HTML element or component to render as */
+    as?: T;
     /** Additional CSS classes for custom styling */
     className?: string;
     /** Content to render within the typography element */
     children?: React.ReactNode;
 };
+type TypographyProps<T extends React.ElementType> = TypographyBaseProps<T> & Omit<React.ComponentPropsWithoutRef<T>, keyof TypographyBaseProps<T>>;
 /**
- * Complete props for the Typography component
- */
-type TypographyProps = TypographyBaseProps & Omit<React.HTMLAttributes<HTMLElement>, keyof TypographyBaseProps>;
-/**
- * Typography - Comprehensive text styling component for consistent design system implementation
+ * PageTitle - Primary page heading component
  *
- * 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.
+ * The main heading for a page, typically used once per page. Uses text-3xl (30px)
+ * which is appropriate for web application page titles. Defaults to h1 element.
  *
- * @example
- * ```tsx
- * // Basic heading with semantic HTML
- * <Typography variant="heading" as="h1">
- *   Welcome to Neynar
- * </Typography>
- *
- * // Body text with color variant
- * <Typography variant="body" color="muted">
- *   This is secondary body text with reduced visual prominence.
- * </Typography>
- *
- * // Code snippet with proper semantics
- * <Typography variant="code" as="code">
- *   const message = "Hello, world!";
- * </Typography>
- * ```
- *
- * @example
- * ```tsx
- * // Advanced styling with multiple variants
- * <Typography
- *   variant="subheading"
- *   color="accent"
- *   align="center"
- *   weight="semibold"
- *   italic
- *   underline
- *   className="mb-4"
- * >
- *   Styled Subheading with Multiple Variants
- * </Typography>
- *
- * // 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 when it exceeds the container width
- * </Typography>
- * ```
+ * @param as - HTML element to render @default "h1"
+ * @param className - Additional Tailwind classes (e.g., "text-4xl text-accent")
+ * @param children - Content to render
+ * @param ...props - All standard HTMLHeadingElement attributes
  *
  * @example
  * ```tsx
- * // Accessibility features
- * <Typography variant="details" srOnly>
- *   Additional context for screen readers only
- * </Typography>
- *
- * // 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>
- * ```
+ * // Default usage
+ * <PageTitle>User Dashboard</PageTitle>
  *
- * @accessibility
- * - **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
- */
-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">;
-/**
- * H1 - Primary page heading component
- *
- * The main heading for a page or major section. Uses the "displayTitle" variant with h1 semantic element.
- * Should be used once per page for proper document outline and SEO.
- *
- * @example
- * ```tsx
- * // Page title
- * <H1>Welcome to Neynar Platform</H1>
+ * // With custom styling
+ * <PageTitle className="text-4xl text-accent">
+ *   Custom Styled Title
+ * </PageTitle>
  *
- * // With color variant
- * <H1 color="muted">Draft: Article Title</H1>
+ * // As different element
+ * <PageTitle as="h2">Section Title as H2</PageTitle>
  *
- * // With custom styling
- * <H1 align="center" className="mb-8">
- *   Centered Page Heading
- * </H1>
+ * // Responsive sizing
+ * <PageTitle className="text-2xl md:text-3xl lg:text-4xl">
+ *   Responsive Title
+ * </PageTitle>
  * ```
  *
  * @accessibility
- * - Creates proper document outline structure
- * - Should be the first heading on the page
+ * - Should be used once per page for proper document outline
  * - Provides main page topic for screen readers
  * - Helps with keyboard navigation landmarks
- *
- * @see {@link H2} Secondary heading component
- * @see {@link Typography} Base typography component
  */
-declare function H1({ variant, weight, ...props }: H1Props): import("react/jsx-runtime").JSX.Element;
-/** Props for H2 heading component */
-type H2Props = Omit<TypographyProps, "as">;
+export declare function PageTitle<T extends React.ElementType = "h1">({ className, as, ...props }: TypographyProps<T>): import("react/jsx-runtime").JSX.Element;
 /**
- * H2 - Secondary section heading component
+ * SectionTitle - Secondary section heading component
+ *
+ * Section headings that divide page content into logical groups. Uses text-2xl (24px)
+ * for clear hierarchy below PageTitle. Defaults to h2 element.
  *
- * Section headings that divide page content into logical groups. Uses the "sectionTitle" variant
- * with h2 semantic element. Essential for creating proper document hierarchy.
+ * @param as - HTML element to render @default "h2"
+ * @param className - Additional Tailwind classes
+ * @param children - Content to render
+ * @param ...props - All standard HTMLHeadingElement attributes
  *
  * @example
  * ```tsx
- * // Section heading
- * <H2>Getting Started</H2>
+ * // Default usage
+ * <SectionTitle>Recent Activity</SectionTitle>
  *
- * // With accent color
- * <H2 color="accent">Featured Content</H2>
+ * // With custom color
+ * <SectionTitle className="text-accent">
+ *   Featured Section
+ * </SectionTitle>
  *
- * // With additional styling
- * <H2 weight="bold" className="border-b pb-2">
- *   Section with Border
- * </H2>
+ * // As h3 element
+ * <SectionTitle as="h3">Subsection Title</SectionTitle>
  * ```
  *
  * @accessibility
  * - Maintains document outline hierarchy
- * - Should follow H1 and precede H3 elements
+ * - Should follow PageTitle (h1) in document flow
  * - Provides section navigation for screen readers
- * - Essential for skip navigation functionality
- *
- * @see {@link H1} Primary heading component
- * @see {@link H3} Tertiary heading component
  */
-declare function H2({ variant, weight, ...props }: H2Props): import("react/jsx-runtime").JSX.Element;
-/** Props for H3 heading component */
-type H3Props = Omit<TypographyProps, "as">;
+export declare function SectionTitle<T extends React.ElementType = "h2">({ className, as, ...props }: TypographyProps<T>): import("react/jsx-runtime").JSX.Element;
 /**
- * H3 - Tertiary subsection heading component
+ * SubsectionTitle - Tertiary subsection heading component
+ *
+ * Subsection headings for further content division. Uses text-xl (20px) for
+ * subtle distinction from SectionTitle. Defaults to h3 element.
  *
- * Subsection headings for further content division. Uses the "headline" variant
- * with h3 semantic element for consistent visual hierarchy.
+ * @param as - HTML element to render @default "h3"
+ * @param className - Additional Tailwind classes
+ * @param children - Content to render
+ * @param ...props - All standard HTMLHeadingElement attributes
  *
  * @example
  * ```tsx
- * // Subsection heading
- * <H3>Installation Guide</H3>
+ * // Default usage
+ * <SubsectionTitle>Configuration Options</SubsectionTitle>
  *
- * // In a card or content block
- * <H3 color="muted" className="mb-3">
- *   Optional Configuration
- * </H3>
+ * // With custom styling
+ * <SubsectionTitle className="text-muted-foreground">
+ *   Optional Settings
+ * </SubsectionTitle>
  * ```
  *
  * @accessibility
- * - Should follow H2 elements in document flow
+ * - Should follow SectionTitle (h2) in document flow
  * - Helps create detailed content structure
- * - Improves navigation with assistive technologies
- * - Supports table of contents generation
+ * - Supports screen reader document navigation
  */
-declare function H3({ variant, weight, ...props }: H3Props): import("react/jsx-runtime").JSX.Element;
-/** Props for H4 heading component */
-type H4Props = Omit<TypographyProps, "as">;
+export declare function SubsectionTitle<T extends React.ElementType = "h3">({ className, as, ...props }: TypographyProps<T>): import("react/jsx-runtime").JSX.Element;
 /**
- * H4 - Minor heading component for detailed sections
+ * BodyText - Primary paragraph text component
  *
- * Minor headings for detailed content organization. Uses "subHeadline" variant
- * with h4 semantic element for subtle but distinct hierarchy.
+ * Standard paragraph element for readable body text. Uses text-base (16px) with
+ * relaxed line height for optimal readability. Defaults to p element.
+ *
+ * @param as - HTML element to render @default "p"
+ * @param className - Additional Tailwind classes
+ * @param children - Content to render
+ * @param ...props - All standard HTMLParagraphElement attributes
  *
  * @example
  * ```tsx
- * // Minor section heading
- * <H4>Configuration Options</H4>
+ * // Default usage
+ * <BodyText>
+ *   This is standard body text that provides information to the user.
+ * </BodyText>
  *
- * // In detailed documentation
- * <H4 color="muted">Advanced Settings</H4>
+ * // With custom styling
+ * <BodyText className="text-muted-foreground">
+ *   Secondary information with reduced visual prominence.
+ * </BodyText>
+ *
+ * // As different element
+ * <BodyText as="div">
+ *   Body text in a div container.
+ * </BodyText>
  * ```
  *
  * @accessibility
- * - Maintains proper heading hierarchy flow
- * - Provides fine-grained content organization
- * - Supports screen reader document navigation
+ * - Provides proper semantic structure for body content
+ * - Maintains readable line height for accessibility
+ * - Supports screen reader text flow and navigation
  */
-declare function H4({ variant, weight, ...props }: H4Props): import("react/jsx-runtime").JSX.Element;
-/** Props for H5 heading component */
-type H5Props = Omit<TypographyProps, "as">;
+export declare function BodyText<T extends React.ElementType = "p">({ className, as, ...props }: TypographyProps<T>): import("react/jsx-runtime").JSX.Element;
 /**
- * H5 - Small heading component for micro-sections
+ * BodyTextLarge - Emphasized body text component
  *
- * Small headings for very specific content divisions. Uses "eyebrow" variant
- * with h5 semantic element.
+ * Larger body text for lead paragraphs and emphasized content. Uses text-lg (18px)
+ * with relaxed line height. Defaults to p element.
+ *
+ * @param as - HTML element to render @default "p"
+ * @param className - Additional Tailwind classes
+ * @param children - Content to render
+ * @param ...props - All standard HTMLParagraphElement attributes
  *
  * @example
  * ```tsx
- * // Small section heading
- * <H5>Error Codes</H5>
- *
- * // In lists or detailed breakdowns
- * <H5 weight="semibold">Step 1: Setup</H5>
+ * // Lead paragraph
+ * <BodyTextLarge>
+ *   This is a lead paragraph that introduces the main content.
+ * </BodyTextLarge>
+ *
+ * // Emphasized content
+ * <BodyTextLarge className="font-medium text-accent">
+ *   Important announcement text.
+ * </BodyTextLarge>
  * ```
  */
-declare function H5({ variant, weight, ...props }: H5Props): import("react/jsx-runtime").JSX.Element;
-/** Props for H6 heading component */
-type H6Props = Omit<TypographyProps, "as">;
+export declare function BodyTextLarge<T extends React.ElementType = "p">({ className, as, ...props }: TypographyProps<T>): import("react/jsx-runtime").JSX.Element;
 /**
- * H6 - Smallest heading component for minimal emphasis
+ * BodyTextSmall - De-emphasized body text component
+ *
+ * Smaller body text for less prominent content. Uses text-sm (14px) with
+ * normal line height. Defaults to p element.
  *
- * The smallest semantic heading level. Uses "details" variant with h6 element
- * for minimal but semantic emphasis.
+ * @param as - HTML element to render @default "p"
+ * @param className - Additional Tailwind classes
+ * @param children - Content to render
+ * @param ...props - All standard HTMLParagraphElement attributes
  *
  * @example
  * ```tsx
- * // Smallest heading
- * <H6>Notes and Disclaimers</H6>
- *
- * // In deeply nested content
- * <H6 color="muted">Technical Details</H6>
+ * // Small body text
+ * <BodyTextSmall>
+ *   This is smaller, less prominent body text.
+ * </BodyTextSmall>
+ *
+ * // Helper text
+ * <BodyTextSmall className="text-muted-foreground">
+ *   Additional context or helper information.
+ * </BodyTextSmall>
  * ```
  */
-declare function H6({ variant, weight, ...props }: H6Props): import("react/jsx-runtime").JSX.Element;
-/** Props for P paragraph component */
-type PProps = Omit<TypographyProps, "as">;
+export declare function BodyTextSmall<T extends React.ElementType = "p">({ className, as, ...props }: TypographyProps<T>): import("react/jsx-runtime").JSX.Element;
 /**
- * P - Paragraph component for body text content
+ * Caption - Small supplementary text component
+ *
+ * Small text for metadata, timestamps, and supplementary information. Uses text-sm (14px)
+ * with muted color. Defaults to span element for inline usage.
  *
- * Standard paragraph element for readable body text. Uses "body" variant with p semantic element.
- * Optimized for readability with appropriate line height and font size.
+ * @param as - HTML element to render @default "span"
+ * @param className - Additional Tailwind classes
+ * @param children - Content to render
+ * @param ...props - All standard HTMLSpanElement attributes
  *
  * @example
  * ```tsx
- * // 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>
+ * // Timestamp
+ * <Caption>Last updated 2 minutes ago</Caption>
  *
- * // With custom spacing
- * <P className="mb-6">Paragraph with custom bottom margin for layout control.</P>
+ * // Image caption
+ * <Caption>Figure 1: System architecture diagram</Caption>
  *
- * // Truncated paragraph
- * <P truncate className="max-w-md">
- *   Long paragraph content that will be truncated with ellipsis
- * </P>
+ * // Metadata
+ * <Caption className="block mt-2">
+ *   Created by John Doe on Jan 15, 2025
+ * </Caption>
  * ```
  *
  * @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
+ * - Maintains inline text flow for screen readers
+ * - Sufficient contrast with muted color
+ * - Works well for supplementary information
  */
-declare function P(props: PProps): import("react/jsx-runtime").JSX.Element;
-/** Props for Span inline component */
-type SpanProps = Omit<TypographyProps, "as">;
+export declare function Caption<T extends React.ElementType = "span">({ className, as, ...props }: TypographyProps<T>): import("react/jsx-runtime").JSX.Element;
 /**
- * Span - Inline text component for text fragments and styling
+ * Overline - Small uppercase label component
+ *
+ * Small uppercase text for category tags and eyebrow labels. Uses text-xs (12px)
+ * with uppercase transformation and wide tracking. Defaults to span element.
  *
- * Generic inline element for styling text fragments within other content.
- * Supports all typography variants while maintaining inline display behavior.
+ * @param as - HTML element to render @default "span"
+ * @param className - Additional Tailwind classes
+ * @param children - Content to render
+ * @param ...props - All standard HTMLSpanElement attributes
  *
  * @example
  * ```tsx
- * // 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>
+ * // Category label
+ * <Overline>Featured</Overline>
+ *
+ * // Section eyebrow
+ * <Overline className="text-accent-foreground">
+ *   New Feature
+ * </Overline>
+ *
+ * // Tag
+ * <Overline className="bg-accent px-2 py-1 rounded">
+ *   Beta
+ * </Overline>
  * ```
- *
- * @accessibility
- * - Maintains inline text flow for screen readers
- * - Preserves semantic meaning within larger text blocks
- * - Does not interrupt document structure or navigation
  */
-declare function Span(props: SpanProps): import("react/jsx-runtime").JSX.Element;
-/** Props for Code component */
-type CodeProps = Omit<TypographyProps, "as" | "variant">;
+export declare function Overline<T extends React.ElementType = "span">({ className, as, ...props }: TypographyProps<T>): import("react/jsx-runtime").JSX.Element;
 /**
- * Code - Inline code component for technical content
+ * Code - Inline code component
  *
- * Semantic code element for inline code snippets, variable names, and technical references.
- * Uses monospace font and "code" variant for clear distinction from regular text.
+ * Monospace text for inline code snippets and technical references. Uses text-sm
+ * with monospace font and subtle background. Defaults to code element.
+ *
+ * @param as - HTML element to render @default "code"
+ * @param className - Additional Tailwind classes
+ * @param children - Content to render
+ * @param ...props - All standard HTMLElement attributes
  *
  * @example
  * ```tsx
- * // Inline code snippet
+ * // Inline code
  * <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>
+ * // Terminal command
+ * <Code className="bg-accent">npm install @neynar/ui</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
  */
-declare function Code(props: CodeProps): import("react/jsx-runtime").JSX.Element;
-/** Props for Small component */
-type SmallProps = Omit<TypographyProps, "as">;
+export declare function Code<T extends React.ElementType = "code">({ className, as, ...props }: TypographyProps<T>): import("react/jsx-runtime").JSX.Element;
 /**
- * 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
- * // 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>
- * ```
+ * Blockquote - Quoted text component
  *
- * @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
- */
-declare function Small({ variant, ...props }: SmallProps): import("react/jsx-runtime").JSX.Element;
-/** Props for Strong component */
-type StrongProps = Omit<TypographyProps, "as">;
-/**
- * Strong - Emphasized text component for important content
+ * Semantic blockquote element for extended quotations and excerpts. Features
+ * italic styling and left border for visual distinction. Defaults to blockquote element.
  *
- * Semantic strong element for text that needs strong emphasis or importance.
- * Uses "bodyEmphasized" variant with strong semantic meaning.
- *
- * @example
- * ```tsx
- * // 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
- */
-declare function Strong(props: StrongProps): import("react/jsx-runtime").JSX.Element;
-/** Props for Lead component */
-type LeadProps = Omit<TypographyProps, "as">;
-/**
- * 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
- * // 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
- */
-declare function Lead({ variant, color, ...props }: LeadProps): import("react/jsx-runtime").JSX.Element;
-/** Props for A anchor component */
-type AProps = Omit<TypographyProps, "as"> & {
-    /** Link destination URL */
-    href?: string;
-} & React.AnchorHTMLAttributes<HTMLAnchorElement>;
-/**
- * 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
- * // 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
- */
-declare function A({ href, asChild, className, ...props }: AProps): import("react/jsx-runtime").JSX.Element;
-/** Props for Blockquote component */
-type BlockquoteProps = Omit<TypographyProps, "as">;
-/**
- * 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.
+ * @param as - HTML element to render @default "blockquote"
+ * @param className - Additional Tailwind classes
+ * @param children - Content to render
+ * @param ...props - All standard HTMLQuoteElement attributes
  *
  * @example
  * ```tsx
@@ -574,17 +322,15 @@ type BlockquoteProps = Omit<TypographyProps, "as">;
  *
  * // With attribution
  * <div>
- *   <Blockquote className="mb-2">
- *     "Building great products requires deep understanding of user needs
- *     and technical excellence in equal measure."
+ *   <Blockquote>
+ *     "Building great products requires deep understanding of user needs."
  *   </Blockquote>
- *   <Small>— Product Engineering Team</Small>
+ *   <Caption className="mt-2">— Product Team</Caption>
  * </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."
+ * // Custom styling
+ * <Blockquote className="bg-muted/50 p-4 rounded-lg">
+ *   Customer testimonial or feedback.
  * </Blockquote>
  * ```
  *
@@ -592,16 +338,7 @@ type BlockquoteProps = Omit<TypographyProps, "as">;
  * - 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
- */
-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 CVA variant props
  */
-export type { VariantProps as TypographyVariantProps } from "class-variance-authority";
+export declare function Blockquote<T extends React.ElementType = "blockquote">({ className, as, ...props }: TypographyProps<T>): import("react/jsx-runtime").JSX.Element;
+export {};
 //# sourceMappingURL=typography.d.ts.map