@neynar/ui 0.2.1 → 0.3.1

package/{llm-docs → .llm}/sdk-items-registry.json

@@ -1,5 +1,5 @@
 {
-  "generated": "2025-08-28T03:50:17.847Z",
+  "generated": "2025-10-11T22:49:58.686Z",
   "sdk": "neynar-sdk-ui",
   "tier": "ui",
   "importPrefix": "@neynar/ui",
@@ -304,6 +304,40 @@
       "component"
     ]
   },
+  "ButtonGroup": {
+    "description": "ButtonGroup - Container for grouping related buttons with consistent styling A flexible container component that groups related action buttons together with seamless visual connection. Built for toolbars, pagination controls, action menus, and navigation interfaces. Supports both horizontal and vertical layouts with intelligent border and border-radius management to create cohesive button groups. The component automatically handles: - Border collapsing between adjacent buttons for seamless appearance - Focus state z-index management to ensure proper focus ring visibility - Integration with Button, Input, and Select components - Nested button group support for complex layouts - Responsive sizing that adapts to button content",
+    "file": "button-group.llm.md",
+    "type": "component",
+    "keywords": [
+      "button",
+      "button group",
+      "buttongroup",
+      "component"
+    ]
+  },
+  "ButtonGroupSeparator": {
+    "description": "ButtonGroupSeparator - Visual divider for buttons within a button group A specialized separator component that creates visual divisions between buttons or elements within a ButtonGroup. Built on the Separator primitive with automatic sizing and styling to match button group layouts. The separator orientation typically matches the button group orientation (vertical separators in horizontal groups, horizontal separators in vertical groups). Key behaviors: - Self-stretches to match parent height/width automatically - Uses input border color for subtle visual division - Removes margins for seamless integration - Decorative by default (hidden from screen readers) Note: Separators are typically unnecessary for outline variant buttons since they already have visible borders. Use separators with ghost, default, or other variants where the visual separation is needed.",
+    "file": "button-group-separator.llm.md",
+    "type": "component",
+    "keywords": [
+      "button",
+      "button group separator",
+      "buttongroupseparator",
+      "component"
+    ]
+  },
+  "ButtonGroupText": {
+    "description": "ButtonGroupText - Text display element for labels and information within button groups A styled text container designed to display non-interactive content within button groups, such as labels, pagination information, or contextual text. Maintains visual consistency with grouped buttons through matching height, border, and styling while being clearly non-interactive with a muted background. Common use cases: - Pagination counters (\"Page 1 of 10\") - Section labels (\"Actions:\", \"Tools:\") - Status indicators or counts - Contextual information between action buttons The component automatically: - Matches button group styling with appropriate borders and spacing - Sizes icons consistently at 16px (size-4) - Maintains visual hierarchy with muted background - Prevents pointer events on icons to avoid interaction confusion",
+    "file": "button-group-text.llm.md",
+    "type": "component",
+    "keywords": [
+      "button",
+      "button group text",
+      "buttongrouptext",
+      "component",
+      "format"
+    ]
+  },
   "Button": {
     "description": "Button - A versatile, accessible button component with multiple style variants A fundamental UI element built on Radix UI's Slot primitive that supports extensive customization through variants, composition patterns, and comprehensive accessibility features. The component automatically handles icon styling, focus management, form integration, and can be rendered as other elements using the asChild pattern.",
     "file": "button.llm.md",
@@ -1235,6 +1269,166 @@
       "emptystate"
     ]
   },
+  "Empty": {
+    "description": "Empty - Flexible container for displaying empty states with consistent layout A foundational empty state component that provides a centered, vertically-aligned container optimized for displaying empty or no-data states. Uses a composable architecture similar to Alert and Card components, allowing fine-grained control over layout and content through sub-components. ## Key Features - Composable sub-components for flexible layouts (header, media, title, description, content) - Responsive padding that adapts from mobile to desktop (p-6 to md:p-12) - Built-in flex layout with automatic centering and gap spacing - Border-dashed styling hint for visual differentiation - Maximum content width constraints for optimal readability - Text balance for improved typography on multi-line content - Fully accessible with semantic HTML structure ## When to Use - Search results with no matches - Empty data tables, lists, or dashboards - Onboarding states for new users - File uploads or content creation areas - Inbox or notification centers with no items - Error recovery or loading failure scenarios ## Component Architecture - **Empty**: Root container with flex layout, padding, and centering - **EmptyHeader**: Groups media and title with constrained width (max-w-sm) - **EmptyMedia**: Icon or illustration display with two variants - **EmptyTitle**: Prominent heading text with medium font weight - **EmptyDescription**: Muted description text with link styling - **EmptyContent**: Additional content area for buttons or secondary info",
+    "file": "empty.llm.md",
+    "type": "component",
+    "keywords": [
+      "component",
+      "empty"
+    ]
+  },
+  "EmptyHeader": {
+    "description": "EmptyHeader - Groups media and title elements with constrained width A container component that groups the EmptyMedia and EmptyTitle elements together, applying a maximum width constraint (max-w-sm / 24rem) for optimal visual hierarchy and readability. Typically used to create a cohesive header unit within the empty state. ## Features - Maximum width of 24rem (384px) for visual balance - Flex column layout with 0.5rem (8px) gap between children - Center-aligned items and text - Maintains semantic grouping for screen readers ## Usage Patterns - Group EmptyMedia and EmptyTitle together - Create visual separation from description and content - Constrain width of title for better readability - Optional - components can be used without header grouping",
+    "file": "empty-header.llm.md",
+    "type": "component",
+    "keywords": [
+      "component",
+      "empty header",
+      "emptyheader"
+    ]
+  },
+  "EmptyTitle": {
+    "description": "EmptyTitle - Prominent heading text for empty state messages Displays the primary heading or title for an empty state, styled with medium font weight and tight character spacing for visual hierarchy. Typically describes what is missing or the current state in a concise, user-friendly way. ## Features - Large text size (text-lg / 1.125rem / 18px) - Medium font weight (font-medium / 500) for emphasis - Tight character spacing (tracking-tight / -0.025em) for readability - Foreground color for maximum contrast - Center-aligned within empty state layout ## Best Practices - Keep titles short and descriptive (2-6 words) - Focus on the current state rather than what's wrong - Use positive language when possible - Be specific rather than generic (\"No projects\" vs \"Empty\") - Avoid technical jargon or error codes",
+    "file": "empty-title.llm.md",
+    "type": "component",
+    "keywords": [
+      "component",
+      "empty title",
+      "emptytitle"
+    ]
+  },
+  "EmptyDescription": {
+    "description": "EmptyDescription - Descriptive text with link styling for empty states Provides supplementary information, guidance, or context below the empty state title. Automatically styles inline links with underlines and hover effects, making it easy to include helpful links or documentation references within the description text. ## Features - Muted foreground color for visual hierarchy below title - Small text size (text-sm) with relaxed line height for readability - Automatic link styling with underlines and offset - Hover state for links changes color to primary - Supports rich content including paragraphs and inline elements - Center-aligned text within empty state layout ## Link Styling - Default: underline with 4px offset, muted-foreground color - Hover: primary color while maintaining underline - Provides clear visual affordance for interactive elements ## Best Practices - Provide helpful context or next steps - Keep descriptions concise (1-2 sentences) - Include actionable guidance when possible - Use links to documentation, help, or related features - Avoid overwhelming users with too much information",
+    "file": "empty-description.llm.md",
+    "type": "component",
+    "keywords": [
+      "component",
+      "empty description",
+      "emptydescription",
+      "format"
+    ]
+  },
+  "EmptyContent": {
+    "description": "EmptyContent - Additional content area for buttons, actions, or secondary information A flexible container for additional content within an empty state, typically used for action buttons, links, or secondary information. Provides consistent width constraints, gap spacing, and alignment for optimal layout of calls-to-action and supplementary content. ## Features - Maximum width of 24rem (384px) for visual balance - Minimum width of 0 to prevent overflow issues - Flex column layout with 1rem (16px) gap between children - Center-aligned items for button grouping - Small text size (text-sm) for secondary content - Text balance for improved multi-line typography - Full width within constraints (w-full) ## Common Use Cases - Primary and secondary action buttons - Button groups with multiple actions - Secondary links or navigation - Additional context or instructions - Step indicators or progress information ## Layout Patterns - Single button: automatically centered - Multiple buttons: stack vertically with gap spacing - Button groups: use flex-row with gap within content - Text content: maintains readability with text-balance",
+    "file": "empty-content.llm.md",
+    "type": "component",
+    "keywords": [
+      "component",
+      "empty content",
+      "emptycontent",
+      "format"
+    ]
+  },
+  "EmptyMedia": {
+    "description": "EmptyMedia - Icon or illustration display component with styling variants Displays icons, illustrations, or other visual elements in an empty state. Offers two variants: a transparent default for custom-sized graphics and an \"icon\" variant with consistent sizing and background styling. Automatically handles SVG pointer events and shrinking behavior. ## Variants ### default - Transparent background (bg-transparent) - No size constraints - use for custom-sized illustrations - Full control over icon/illustration dimensions - Best for large decorative graphics (48px+) ### icon - Muted background (bg-muted) with rounded corners (rounded-lg) - Fixed 40px × 40px container (size-10) - Automatically sizes child SVGs to 24px (size-6) unless explicitly sized - Text color set to foreground for proper contrast - Best for standard icon sizes (16-24px) - Provides visual emphasis through background contrast ## Features - SVG pointer events disabled to prevent interaction issues - Shrink prevention for consistent sizing - Bottom margin (mb-2 / 8px) for spacing from subsequent elements - Flex layout with centered content - Compatible with all icon libraries (lucide-react, heroicons, etc.)",
+    "file": "empty-media.llm.md",
+    "type": "component",
+    "keywords": [
+      "component",
+      "empty media",
+      "emptymedia"
+    ]
+  },
+  "Field": {
+    "description": "Field component",
+    "file": "field.llm.md",
+    "type": "component",
+    "keywords": [
+      "component",
+      "field"
+    ]
+  },
+  "FieldLabel": {
+    "description": "FieldLabel component",
+    "file": "field-label.llm.md",
+    "type": "component",
+    "keywords": [
+      "component",
+      "field label",
+      "fieldlabel"
+    ]
+  },
+  "FieldDescription": {
+    "description": "FieldDescription component",
+    "file": "field-description.llm.md",
+    "type": "component",
+    "keywords": [
+      "component",
+      "field description",
+      "fielddescription"
+    ]
+  },
+  "FieldError": {
+    "description": "FieldError component",
+    "file": "field-error.llm.md",
+    "type": "component",
+    "keywords": [
+      "component",
+      "field error",
+      "fielderror"
+    ]
+  },
+  "FieldGroup": {
+    "description": "FieldGroup - Container for organizing multiple form fields A layout wrapper that vertically stacks Field components with optimized spacing. It provides container query support for responsive field orientations and automatically adjusts spacing for different control types (standard fields vs. checkbox/radio groups). The component uses CSS container queries (@container) which allows child Field components with `orientation=\"responsive\"` to adapt their layout based on the FieldGroup's width rather than the viewport width.",
+    "file": "field-group.llm.md",
+    "type": "component",
+    "keywords": [
+      "component",
+      "field group",
+      "fieldgroup"
+    ]
+  },
+  "FieldLegend": {
+    "description": "FieldLegend - Fieldset caption with size variants A caption element that provides a title or description for a group of related form fields within a FieldSet. Renders as a native HTML `<legend>` element with size variants to match different design contexts. The \"legend\" variant (default) uses standard text sizing for top-level fieldsets, while the \"label\" variant provides smaller text suitable for nested fieldsets or when you need the legend to visually match form labels.",
+    "file": "field-legend.llm.md",
+    "type": "component",
+    "keywords": [
+      "component",
+      "field legend",
+      "fieldlegend"
+    ]
+  },
+  "FieldSeparator": {
+    "description": "FieldSeparator component",
+    "file": "field-separator.llm.md",
+    "type": "component",
+    "keywords": [
+      "component",
+      "field separator",
+      "fieldseparator"
+    ]
+  },
+  "FieldSet": {
+    "description": "FieldSet - Semantic form control grouping container A container that renders a native HTML `<fieldset>` element with optimized spacing and layout presets. It provides semantic grouping for related form controls, which improves accessibility by allowing assistive technologies to understand the relationship between form fields. The component automatically adjusts gap spacing when containing checkbox or radio groups, providing tighter spacing for these control types.",
+    "file": "field-set.llm.md",
+    "type": "component",
+    "keywords": [
+      "component",
+      "field set",
+      "fieldset"
+    ]
+  },
+  "FieldContent": {
+    "description": "FieldContent component",
+    "file": "field-content.llm.md",
+    "type": "component",
+    "keywords": [
+      "component",
+      "field content",
+      "fieldcontent"
+    ]
+  },
+  "FieldTitle": {
+    "description": "FieldTitle component",
+    "file": "field-title.llm.md",
+    "type": "component",
+    "keywords": [
+      "component",
+      "field title",
+      "fieldtitle"
+    ]
+  },
   "HoverCard": {
     "description": "HoverCard - Preview content that appears on hover for rich contextual information A floating card component that reveals rich content when users hover over a trigger element. Designed specifically for sighted users to preview content available behind links without requiring navigation. Built on Radix UI primitives with smooth animations and intelligent positioning to avoid viewport boundaries. Perfect for user profiles, repository information, link previews, tooltips with complex content, and any contextual details that enhance the user experience without interrupting their current workflow.",
     "file": "hover-card.llm.md",
@@ -1266,6 +1460,67 @@
       "hovercardcontent"
     ]
   },
+  "InputGroup": {
+    "description": "InputGroup - Container for inputs with integrated addons, buttons, and text A flexible container component that combines text inputs or textareas with decorative or functional elements like icons, buttons, labels, and keyboard shortcuts. Supports both inline (left/right) and block (top/bottom) addon positioning for diverse layout needs. Provides unified focus states, error handling, and disabled states across all child elements.",
+    "file": "input-group.llm.md",
+    "type": "component",
+    "keywords": [
+      "component",
+      "input group",
+      "inputgroup"
+    ]
+  },
+  "InputGroupAddon": {
+    "description": "InputGroupAddon - Container for icons, buttons, text, or labels within an InputGroup A flexible addon container that can be positioned at any edge of the input (left, right, top, or bottom). Automatically adjusts layout and spacing based on alignment. Clicking the addon area focuses the associated input for improved usability. Supports icons, static text, buttons, keyboard shortcuts (Kbd), and custom content.",
+    "file": "input-group-addon.llm.md",
+    "type": "component",
+    "keywords": [
+      "component",
+      "input group addon",
+      "inputgroupaddon"
+    ]
+  },
+  "InputGroupButton": {
+    "description": "InputGroupButton - Action button within an InputGroupAddon A specialized button component optimized for use within input group addons. Styled with reduced shadows and compact sizing to integrate seamlessly with the input group container. Supports text buttons, icon buttons, and combination buttons with various size options. Uses ghost variant by default for subtle integration with the input group.",
+    "file": "input-group-button.llm.md",
+    "type": "component",
+    "keywords": [
+      "button",
+      "component",
+      "input group button",
+      "inputgroupbutton"
+    ]
+  },
+  "InputGroupText": {
+    "description": "InputGroupText - Static text or label content within an InputGroupAddon A span element for displaying non-interactive text, labels, prefixes, suffixes, or icons within an input group addon. Styled with muted foreground colors and optimized spacing. Commonly used for currency symbols, units of measurement, URL protocols, or descriptive labels.",
+    "file": "input-group-text.llm.md",
+    "type": "component",
+    "keywords": [
+      "component",
+      "input group text",
+      "inputgrouptext"
+    ]
+  },
+  "InputGroupInput": {
+    "description": "InputGroupInput - Text input element within an InputGroup A styled input component designed to work seamlessly within an InputGroup container. Inherits all standard HTML input props and removes default borders, shadows, and focus rings since the parent InputGroup handles visual states. Automatically flexes to fill available space between addons.",
+    "file": "input-group-input.llm.md",
+    "type": "component",
+    "keywords": [
+      "component",
+      "input group input",
+      "inputgroupinput"
+    ]
+  },
+  "InputGroupTextarea": {
+    "description": "InputGroupTextarea - Multi-line textarea element within an InputGroup A styled textarea component designed to work with InputGroup, especially with block-aligned addons (top/bottom positioning). Removes default borders and shadows as the parent InputGroup handles visual states. Resizing is disabled by default to maintain consistent layout with the container. Automatically flexes to fill available space.",
+    "file": "input-group-textarea.llm.md",
+    "type": "component",
+    "keywords": [
+      "component",
+      "input group textarea",
+      "inputgrouptextarea"
+    ]
+  },
   "Input": {
     "description": "Input - Versatile form input component for text, email, password, and other input types A flexible and accessible input component built on native HTML input elements with enhanced styling and form integration capabilities. Supports all HTML input types including text, email, password, number, file, date, and more. Features consistent design tokens, error states, focus management, and seamless integration with form libraries like React Hook Form.",
     "file": "input.llm.md",
@@ -1275,6 +1530,126 @@
       "input"
     ]
   },
+  "Item": {
+    "description": "Item - Flexible container for displaying structured content A composable component for creating rich list items, cards, and data displays. Built with a slot-based architecture allowing flexible combinations of media, content, actions, headers, and footers. Supports rendering as any HTML element via the asChild prop for semantic flexibility (e.g., links, buttons).",
+    "file": "item.llm.md",
+    "type": "component",
+    "keywords": [
+      "component",
+      "item"
+    ]
+  },
+  "ItemMedia": {
+    "description": "ItemMedia - Media container for icons, images, or avatars Flexible media slot that appears at the start of an item. Supports three display modes: transparent (default), bordered icon container, or image container with object-fit styling. Automatically adjusts alignment when descriptions are present.",
+    "file": "item-media.llm.md",
+    "type": "component",
+    "keywords": [
+      "component",
+      "item media",
+      "itemmedia"
+    ]
+  },
+  "ItemContent": {
+    "description": "ItemContent - Main content container for item text Flexible container that holds ItemTitle, ItemDescription, ItemHeader, and ItemFooter. Automatically grows to fill available space (flex-1) and provides consistent gap spacing (gap-1) between children. Multiple ItemContent containers can be used, with subsequent ones not growing (flex-none).",
+    "file": "item-content.llm.md",
+    "type": "component",
+    "keywords": [
+      "component",
+      "item content",
+      "itemcontent"
+    ]
+  },
+  "ItemActions": {
+    "description": "ItemActions - Container for action buttons and icons Positioned at the end of an item for displaying interactive elements like buttons, icons, or dropdown triggers. Flexbox layout with consistent gap spacing ensures proper alignment of multiple actions.",
+    "file": "item-actions.llm.md",
+    "type": "component",
+    "keywords": [
+      "component",
+      "item actions",
+      "itemactions"
+    ]
+  },
+  "ItemGroup": {
+    "description": "ItemGroup - Container for grouping multiple Item components Provides a semantic list container for organizing related items with consistent spacing and layout. Automatically applies role=\"list\" for proper ARIA semantics. Use with ItemSeparator to visually separate items within the group.",
+    "file": "item-group.llm.md",
+    "type": "component",
+    "keywords": [
+      "component",
+      "item group",
+      "itemgroup"
+    ]
+  },
+  "ItemSeparator": {
+    "description": "ItemSeparator - Horizontal divider for separating items Provides a visual separator between items in an ItemGroup. Built on the Separator component with optimized spacing (my-0) to work seamlessly with item layouts. Always renders horizontally for consistent item list styling.",
+    "file": "item-separator.llm.md",
+    "type": "component",
+    "keywords": [
+      "component",
+      "item separator",
+      "itemseparator"
+    ]
+  },
+  "ItemTitle": {
+    "description": "ItemTitle - Title text for an item Displays the primary title or heading text for an item. Uses medium font weight and tight line spacing for a prominent yet compact appearance. Inline-flex layout allows badges or icons to be positioned next to the title.",
+    "file": "item-title.llm.md",
+    "type": "component",
+    "keywords": [
+      "component",
+      "item title",
+      "itemtitle"
+    ]
+  },
+  "ItemDescription": {
+    "description": "ItemDescription - Secondary descriptive text Displays supplementary information below the item title. Automatically limits to 2 lines with text-balance for optimal wrapping. Includes special styling for inline links with hover states. Text color is muted for visual hierarchy.",
+    "file": "item-description.llm.md",
+    "type": "component",
+    "keywords": [
+      "component",
+      "format",
+      "item description",
+      "itemdescription"
+    ]
+  },
+  "ItemHeader": {
+    "description": "ItemHeader - Layout container for title and metadata Creates a horizontal layout spanning the full width of ItemContent, positioning content at the start and end (justify-between). Perfect for pairing ItemTitle with badges, timestamps, or other metadata that should appear on the same line.",
+    "file": "item-header.llm.md",
+    "type": "component",
+    "keywords": [
+      "component",
+      "item header",
+      "itemheader"
+    ]
+  },
+  "ItemFooter": {
+    "description": "ItemFooter - Layout container for bottom metadata Creates a horizontal layout at the bottom of ItemContent, spanning full width with space-between distribution. Use for timestamps, file sizes, counts, or other supplementary information that should appear below the main content.",
+    "file": "item-footer.llm.md",
+    "type": "component",
+    "keywords": [
+      "component",
+      "format",
+      "item footer",
+      "itemfooter"
+    ]
+  },
+  "Kbd": {
+    "description": "Kbd - Display keyboard input and shortcuts A semantic component for representing keyboard keys, shortcuts, and input in documentation, tutorials, and UI instructions. Uses the HTML kbd element with consistent styling for monospace text, subtle background, and appropriate sizing. Supports icons, text, and modifier keys like Cmd, Shift, Ctrl, and Alt.",
+    "file": "kbd.llm.md",
+    "type": "component",
+    "keywords": [
+      "component",
+      "kbd"
+    ]
+  },
+  "KbdGroup": {
+    "description": "KbdGroup - Group multiple keyboard keys together A container component for grouping multiple Kbd components to represent complex keyboard shortcuts or key combinations. Automatically handles spacing between individual keys and provides semantic grouping. Useful for displaying shortcuts like \"Ctrl+Shift+P\" or \"Cmd+K\".",
+    "file": "kbd-group.llm.md",
+    "type": "component",
+    "keywords": [
+      "component",
+      "kbd group",
+      "kbdgroup"
+    ]
+  },
   "Label": {
     "description": "Label component for form controls with full accessibility support A fundamental form component that provides accessible text labels for form controls. Built on Radix UI Label primitive, it automatically associates with form elements and expands their clickable area for improved usability and accessibility. Essential for creating accessible forms that meet WCAG guidelines.",
     "file": "label.llm.md",
@@ -2222,6 +2597,15 @@
       "toaster"
     ]
   },
+  "Spinner": {
+    "description": "Spinner - Loading indicator with animated rotation A circular loading spinner built on the Lucide React Loader2 icon with smooth rotation animation. Provides visual feedback to users during asynchronous operations such as data fetching, form submissions, or content loading. The spinner is highly customizable through CSS classes and supports all standard SVG props for size, color, and styling.",
+    "file": "spinner.llm.md",
+    "type": "component",
+    "keywords": [
+      "component",
+      "spinner"
+    ]
+  },
   "Stack": {
     "description": "Stack - A flexible layout component for consistent spacing between elements Stack is a fundamental layout primitive that arranges child elements in either vertical or horizontal direction with consistent spacing. Built on flexbox principles, it provides a clean, declarative API for common layout patterns without requiring custom CSS or complex flex configurations. **Core Features:** - Consistent spacing using Tailwind's design system - Flexible direction control (vertical/horizontal) - Zero-config flexbox layouts with predictable behavior - Composable with other UI components and layout utilities - Full accessibility support with semantic HTML structure - TypeScript-first with comprehensive prop validation **Common Use Cases:** - Form layouts with consistent field spacing - Button groups and action bars - Content sections with uniform gaps - Navigation lists and menu structures - Card layouts and dashboard grids - Page sections and content hierarchy - Responsive component layouts **Design System Integration:** Stack integrates seamlessly with design systems by providing consistent spacing that aligns with Tailwind's spacing scale. This ensures visual harmony across your application and reduces the need for custom spacing utilities in most common layout scenarios.",
     "file": "stack.llm.md",
@@ -2478,7 +2862,7 @@
     ]
   },
   "H1": {
-    "description": "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.",
+    "description": "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.",
     "file": "h1.llm.md",
     "type": "component",
     "keywords": [
@@ -2487,7 +2871,7 @@
     ]
   },
   "H2": {
-    "description": "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.",
+    "description": "H2 - Secondary section heading component Section headings that divide page content into logical groups. Uses the \"sectionTitle\" variant with h2 semantic element. Essential for creating proper document hierarchy.",
     "file": "h2.llm.md",
     "type": "component",
     "keywords": [
@@ -2496,7 +2880,7 @@
     ]
   },
   "H3": {
-    "description": "H3 - Tertiary subsection heading component Subsection headings for further content division. Uses the \"subheading\" variant with h3 semantic element for consistent visual hierarchy.",
+    "description": "H3 - Tertiary subsection heading component Subsection headings for further content division. Uses the \"headline\" variant with h3 semantic element for consistent visual hierarchy.",
     "file": "h3.llm.md",
     "type": "component",
     "keywords": [
@@ -2505,7 +2889,7 @@
     ]
   },
   "H4": {
-    "description": "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.",
+    "description": "H4 - Minor heading component for detailed sections Minor headings for detailed content organization. Uses \"subHeadline\" variant with h4 semantic element for subtle but distinct hierarchy.",
     "file": "h4.llm.md",
     "type": "component",
     "keywords": [
@@ -2514,7 +2898,7 @@
     ]
   },
   "H5": {
-    "description": "H5 - Small heading component for micro-sections Small headings for very specific content divisions. Uses \"bodyEmphasized\" variant with h5 semantic element.",
+    "description": "H5 - Small heading component for micro-sections Small headings for very specific content divisions. Uses \"eyebrow\" variant with h5 semantic element.",
     "file": "h5.llm.md",
     "type": "component",
     "keywords": [

package/{llm-docs → .llm}/small.llm.md

@@ -30,12 +30,7 @@ import { Small } from '@neynar/ui';
 ## Component Props
 
 ### color
-- **Type**: `| "default"
-    | "muted"
-    | "accent"
-    | "destructive"
-    | "success"
-    | "warning"`
+- **Type**: `TypographyColor`
 - **Required**: No
 - **Description**: No description available
 

package/{llm-docs → .llm}/span.llm.md

@@ -31,26 +31,12 @@ import { Span } from '@neynar/ui';
 ## Component Props
 
 ### variant
-- **Type**: `| "heading"
-    | "subheading"
-    | "body"
-    | "bodyEmphasized"
-    | "details"
-    | "field"
-    | "code"
-    | "microcopy"
-    | "tableCell"
-    | "tableHeader"`
+- **Type**: `TypographyVariant`
 - **Required**: No
 - **Description**: No description available
 
 ### color
-- **Type**: `| "default"
-    | "muted"
-    | "accent"
-    | "destructive"
-    | "success"
-    | "warning"`
+- **Type**: `TypographyColor`
 - **Required**: No
 - **Description**: No description available