@neynar/ui 0.2.1 → 0.3.1

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

@@ -32,26 +32,12 @@ import { A } 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
 

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

@@ -7,35 +7,41 @@ Badge - Versatile status indicator component for labels, counts, and notificatio
 ## JSX Usage
 
 ```jsx
-import { Badge } from "@neynar/ui";
+import { Badge } from '@neynar/ui';
 
-<Badge variant={value} className="value" asChild={true}>
+<Badge
+  variant={value}
+  className="value"
+  asChild={true}
+>
   {/* Your content here */}
-</Badge>;
+</Badge>
 ```
 
 ## Component Props
 
 ### variant
-
-- **Type**: `"default" | "secondary" | "destructive" | "success" | "warning" | "info" | "outline"`
+- **Type**: `| "default"
+    | "secondary"
+    | "destructive"
+    | "success"
+    | "warning"
+    | "info"
+    | "outline"`
 - **Required**: No
 - **Description**: No description available
 
 ### className
-
 - **Type**: `string`
 - **Required**: No
 - **Description**: No description available
 
 ### children
-
 - **Type**: `React.ReactNode`
 - **Required**: No
 - **Description**: No description available
 
 ### asChild
-
 - **Type**: `boolean`
 - **Required**: No
 - **Description**: No description available
@@ -43,7 +49,6 @@ import { Badge } from "@neynar/ui";
 ## Examples
 
 ### Example 1
-
 ```tsx
 // Basic status badges
 <Badge>New</Badge>
@@ -54,9 +59,7 @@ import { Badge } from "@neynar/ui";
 <Badge variant="info">Info</Badge>
 <Badge variant="outline">Pending</Badge>
 ```
-
 ### Example 2
-
 ```tsx
 // Badge with icon content
 import { Check, AlertTriangle } from "lucide-react";
@@ -69,9 +72,7 @@ import { Check, AlertTriangle } from "lucide-react";
   Failed
 </Badge>
 ```
-
 ### Example 3
-
 ```tsx
 // Notification count badge
 <div className="relative inline-block">
@@ -81,9 +82,7 @@ import { Check, AlertTriangle } from "lucide-react";
   </Badge>
 </div>
 ```
-
 ### Example 4
-
 ```tsx
 // Interactive badge as link using asChild
 import Link from "next/link";
@@ -91,11 +90,9 @@ import Link from "next/link";
   <Link href="/notifications" className="cursor-pointer">
     3 new messages
   </Link>
-</Badge>;
+</Badge>
 ```
-
 ### Example 5
-
 ```tsx
 // Interactive badge as button
 <Badge asChild>
@@ -104,9 +101,7 @@ import Link from "next/link";
   </button>
 </Badge>
 ```
-
 ### Example 6
-
 ```tsx
 // Removable tag badge with close button
 <Badge className="pr-1 gap-1">
@@ -119,4 +114,4 @@ import Link from "next/link";
     <X className="h-3 w-3" />
   </button>
 </Badge>
-```
+```

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

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

package/.llm/button-group-separator.llm.md

@@ -0,0 +1,53 @@
+# ButtonGroupSeparator
+
+**Type**: component
+
+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.
+
+## JSX Usage
+
+```jsx
+import { ButtonGroupSeparator } from '@neynar/ui';
+
+<ButtonGroupSeparator
+  orientation={value}
+  className="value"
+  decorative={true}
+/>
+```
+
+## Component Props
+
+### orientation
+- **Type**: `"horizontal" | "vertical"`
+- **Required**: No
+- **Description**: No description available
+
+### className
+- **Type**: `string`
+- **Required**: No
+- **Description**: No description available
+
+### decorative
+- **Type**: `boolean`
+- **Required**: No
+- **Description**: No description available
+
+## Examples
+
+### Example 1
+```tsx
+// Horizontal button group with vertical separators
+import { Button, ButtonGroup, ButtonGroupSeparator } from "
+### Example 2
+```tsx
+// Vertical button group with horizontal separators
+import { Button, ButtonGroup, ButtonGroupSeparator } from "
+### Example 3
+```tsx
+// Separating button group sections in toolbar
+import { Button, ButtonGroup, ButtonGroupSeparator } from "
+### Example 4
+```tsx
+// Separator with custom height for specific layouts
+import { Button, ButtonGroup, ButtonGroupSeparator } from "

package/.llm/button-group-text.llm.md

@@ -0,0 +1,56 @@
+# ButtonGroupText
+
+**Type**: component
+
+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
+
+## JSX Usage
+
+```jsx
+import { ButtonGroupText } from '@neynar/ui';
+
+<ButtonGroupText
+  asChild={true}
+  className="value"
+>
+  {/* Your content here */}
+</ButtonGroupText>
+```
+
+## Component Props
+
+### asChild
+- **Type**: `boolean`
+- **Required**: No
+- **Description**: No description available
+
+### className
+- **Type**: `string`
+- **Required**: No
+- **Description**: No description available
+
+### children
+- **Type**: `React.ReactNode`
+- **Required**: No
+- **Description**: No description available
+
+## Examples
+
+### Example 1
+```tsx
+// Pagination with page count display
+import { Button, ButtonGroup, ButtonGroupText } from "
+### Example 2
+```tsx
+// Section label with action buttons
+import { Copy, Download } from "lucide-react"
+import { Button, ButtonGroup, ButtonGroupText, ButtonGroupSeparator } from "
+### Example 3
+```tsx
+// Status indicator with icon
+import { CheckCircle2 } from "lucide-react"
+import { ButtonGroup, ButtonGroupText } from "
+### Example 4
+```tsx
+// Custom composition with asChild
+import { ButtonGroup, ButtonGroupText } from "

package/.llm/button-group.llm.md

@@ -0,0 +1,81 @@
+# ButtonGroup
+
+**Type**: component
+
+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
+
+## JSX Usage
+
+```jsx
+import { ButtonGroup } from '@neynar/ui';
+
+<ButtonGroup
+  orientation={value}
+  className="value"
+  "aria-label"="value"
+  "aria-labelledby"="value"
+  "aria-describedby"="value"
+>
+  {/* Your content here */}
+</ButtonGroup>
+```
+
+## Component Props
+
+### orientation
+- **Type**: `"horizontal" | "vertical"`
+- **Required**: No
+- **Description**: No description available
+
+### className
+- **Type**: `string`
+- **Required**: No
+- **Description**: No description available
+
+### children
+- **Type**: `React.ReactNode`
+- **Required**: No
+- **Description**: No description available
+
+### "aria-label"
+- **Type**: `string`
+- **Required**: No
+- **Description**: No description available
+
+### "aria-labelledby"
+- **Type**: `string`
+- **Required**: No
+- **Description**: No description available
+
+### "aria-describedby"
+- **Type**: `string`
+- **Required**: No
+- **Description**: No description available
+
+## Examples
+
+### Example 1
+```tsx
+// Basic horizontal button group (most common usage)
+import { Button, ButtonGroup } from "
+### Example 2
+```tsx
+// Vertical button group for navigation menus
+import { Button, ButtonGroup } from "
+### Example 3
+```tsx
+// Button group with icons and separators
+import { Copy, Download, Share2 } from "lucide-react"
+import { Button, ButtonGroup, ButtonGroupSeparator } from "
+### Example 4
+```tsx
+// Pagination controls with text element
+import { Button, ButtonGroup, ButtonGroupText } from "
+### Example 5
+```tsx
+// Toolbar with multiple grouped sections
+import { Button, ButtonGroup, ButtonGroupSeparator } from "
+### Example 6
+```tsx
+// Different button sizes in groups
+import { Button, ButtonGroup } from "

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

@@ -126,7 +126,7 @@ import { Button } from '@neynar/ui';
 - **Description**: No description available
 
 ### "aria-expanded"
-- **Type**: `React.AriaAttributes['aria-expanded']`
+- **Type**: `React.AriaAttributes["aria-expanded"]`
 - **Required**: No
 - **Description**: No description available
 

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

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

package/.llm/empty-content.llm.md

@@ -0,0 +1,103 @@
+# EmptyContent
+
+**Type**: component
+
+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
+
+## JSX Usage
+
+```jsx
+import { EmptyContent } from '@neynar/ui';
+
+<EmptyContent
+  className="value"
+>
+  {/* Your content here */}
+</EmptyContent>
+```
+
+## Component Props
+
+### className
+- **Type**: `string`
+- **Required**: No
+- **Description**: No description available
+
+### children
+- **Type**: `React.ReactNode`
+- **Required**: No
+- **Description**: No description available
+
+## Examples
+
+### Example 1
+```tsx
+// Single action button
+import { Button } from './button';
+<EmptyContent>
+  <Button onClick={handleCreate}>Create new project</Button>
+</EmptyContent>
+```
+### Example 2
+```tsx
+// Multiple vertically stacked buttons
+import { Button } from './button';
+<EmptyContent>
+  <Button onClick={handleCreate}>Create project</Button>
+  <Button variant="outline" onClick={handleImport}>Import project</Button>
+</EmptyContent>
+```
+### Example 3
+```tsx
+// Horizontal button group
+import { Button } from './button';
+import { Plus, Upload } from 'lucide-react';
+<EmptyContent>
+  <div className="flex gap-2">
+    <Button onClick={handleCreate}>
+      <Plus className="w-4 h-4 mr-2" />
+      Create
+    </Button>
+    <Button variant="outline" onClick={handleUpload}>
+      <Upload className="w-4 h-4 mr-2" />
+      Upload
+    </Button>
+  </div>
+</EmptyContent>
+```
+### Example 4
+```tsx
+// Button with additional text
+import { Button } from './button';
+<EmptyContent>
+  <Button onClick={handleInvite}>Invite team members</Button>
+  <p className="text-xs text-muted-foreground">
+    or <a href="/import" className="underline">import from CSV</a>
+  </p>
+</EmptyContent>
+```
+### Example 5
+```tsx
+// Secondary links only
+<EmptyContent>
+  <a href="/docs" className="text-sm underline underline-offset-4">
+    View documentation
+  </a>
+  <a href="/examples" className="text-sm underline underline-offset-4">
+    Browse examples
+  </a>
+</EmptyContent>
+```
+### Example 6
+```tsx
+// Custom styled content area
+import { Button } from './button';
+<EmptyContent className="max-w-md gap-2">
+  <Button className="w-full" onClick={handleAction}>
+    Full width button
+  </Button>
+  <p className="text-center">
+    Tighter gap and wider max width
+  </p>
+</EmptyContent>
+```

package/.llm/empty-description.llm.md

@@ -0,0 +1,70 @@
+# EmptyDescription
+
+**Type**: component
+
+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
+
+## JSX Usage
+
+```jsx
+import { EmptyDescription } from '@neynar/ui';
+
+<EmptyDescription
+  className="value"
+>
+  {/* Your content here */}
+</EmptyDescription>
+```
+
+## Component Props
+
+### className
+- **Type**: `string`
+- **Required**: No
+- **Description**: No description available
+
+### children
+- **Type**: `React.ReactNode`
+- **Required**: No
+- **Description**: No description available
+
+## Examples
+
+### Example 1
+```tsx
+// Simple description text
+<EmptyDescription>
+  Try adjusting your search or filters to find what you're looking for.
+</EmptyDescription>
+```
+### Example 2
+```tsx
+// Description with inline link
+<EmptyDescription>
+  Get started by <a href="/docs/setup">reading our setup guide</a> or
+  watching the tutorial video.
+</EmptyDescription>
+```
+### Example 3
+```tsx
+// Multi-line description
+<EmptyDescription>
+  Your inbox is empty. New messages and notifications will appear here
+  when you receive them.
+</EmptyDescription>
+```
+### Example 4
+```tsx
+// Description with multiple links
+<EmptyDescription>
+  Need help? Check out our <a href="/docs">documentation</a> or
+  <a href="/support">contact support</a>.
+</EmptyDescription>
+```
+### Example 5
+```tsx
+// Custom styled description
+<EmptyDescription className="text-base text-foreground max-w-md">
+  Override default styling for custom appearance and width.
+</EmptyDescription>
+```

package/.llm/empty-header.llm.md

@@ -0,0 +1,64 @@
+# EmptyHeader
+
+**Type**: component
+
+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
+
+## JSX Usage
+
+```jsx
+import { EmptyHeader } from '@neynar/ui';
+
+<EmptyHeader
+  className="value"
+>
+  {/* Your content here */}
+</EmptyHeader>
+```
+
+## Component Props
+
+### className
+- **Type**: `string`
+- **Required**: No
+- **Description**: No description available
+
+### children
+- **Type**: `React.ReactNode`
+- **Required**: No
+- **Description**: No description available
+
+## Examples
+
+### Example 1
+```tsx
+// Standard header with icon and title
+import { Package } from 'lucide-react';
+<EmptyHeader>
+  <EmptyMedia variant="icon">
+    <Package />
+  </EmptyMedia>
+  <EmptyTitle>No packages found</EmptyTitle>
+</EmptyHeader>
+```
+### Example 2
+```tsx
+// Header with large illustration
+import { Rocket } from 'lucide-react';
+<EmptyHeader>
+  <EmptyMedia>
+    <Rocket className="w-20 h-20 text-primary" />
+  </EmptyMedia>
+  <EmptyTitle>Ready to launch!</EmptyTitle>
+</EmptyHeader>
+```
+### Example 3
+```tsx
+// Custom styled header
+<EmptyHeader className="max-w-md gap-4">
+  <EmptyMedia variant="icon">
+    <Star />
+  </EmptyMedia>
+  <EmptyTitle>Custom spacing and width</EmptyTitle>
+</EmptyHeader>
+```