@neynar/ui 0.3.0 → 0.4.0

package/.llm/item-actions.llm.md

@@ -0,0 +1,77 @@
+# ItemActions
+
+**Type**: component
+
+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.
+
+## JSX Usage
+
+```jsx
+import { ItemActions } from '@neynar/ui';
+
+<ItemActions
+  className="value"
+>
+  {/* Your content here */}
+</ItemActions>
+```
+
+## 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
+<Item>
+  <ItemContent>
+    <ItemTitle>Document</ItemTitle>
+  </ItemContent>
+  <ItemActions>
+    <Button variant="ghost" size="icon">
+      <MoreVertical />
+    </Button>
+  </ItemActions>
+</Item>
+```
+### Example 2
+```tsx
+// Multiple action buttons
+<Item>
+  <ItemContent>
+    <ItemTitle>Task Item</ItemTitle>
+  </ItemContent>
+  <ItemActions>
+    <Button variant="ghost" size="icon">
+      <Star />
+    </Button>
+    <Button variant="ghost" size="icon">
+      <CheckCircle2 />
+    </Button>
+    <Button variant="ghost" size="icon">
+      <MoreVertical />
+    </Button>
+  </ItemActions>
+</Item>
+```
+### Example 3
+```tsx
+// Text button with chevron
+<Item>
+  <ItemContent>
+    <ItemTitle>Settings</ItemTitle>
+  </ItemContent>
+  <ItemActions>
+    <ChevronRight className="size-4 text-muted-foreground" />
+  </ItemActions>
+</Item>
+```

package/.llm/item-content.llm.md

@@ -0,0 +1,73 @@
+# ItemContent
+
+**Type**: component
+
+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).
+
+## JSX Usage
+
+```jsx
+import { ItemContent } from '@neynar/ui';
+
+<ItemContent
+  className="value"
+>
+  {/* Your content here */}
+</ItemContent>
+```
+
+## 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
+<Item>
+  <ItemContent>
+    <ItemTitle>Document Name</ItemTitle>
+    <ItemDescription>Additional details</ItemDescription>
+  </ItemContent>
+</Item>
+```
+### Example 2
+```tsx
+// Content with header and footer
+<Item>
+  <ItemMedia variant="icon">
+    <FileText />
+  </ItemMedia>
+  <ItemContent>
+    <ItemHeader>
+      <ItemTitle>Meeting Notes</ItemTitle>
+      <Badge>New</Badge>
+    </ItemHeader>
+    <ItemDescription>Notes from the team sync</ItemDescription>
+    <ItemFooter>
+      <span className="text-xs">Updated 5m ago</span>
+    </ItemFooter>
+  </ItemContent>
+</Item>
+```
+### Example 3
+```tsx
+// Multiple content containers
+<Item>
+  <ItemContent>
+    <ItemTitle>Primary Content</ItemTitle>
+    <ItemDescription>Main information</ItemDescription>
+  </ItemContent>
+  <ItemContent>
+    <span className="text-xs text-muted-foreground">Metadata</span>
+  </ItemContent>
+</Item>
+```

package/.llm/item-description.llm.md

@@ -0,0 +1,61 @@
+# ItemDescription
+
+**Type**: component
+
+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.
+
+## JSX Usage
+
+```jsx
+import { ItemDescription } from '@neynar/ui';
+
+<ItemDescription
+  className="value"
+>
+  {/* Your content here */}
+</ItemDescription>
+```
+
+## 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
+<ItemContent>
+  <ItemTitle>Project Documentation</ItemTitle>
+  <ItemDescription>
+    Complete guide to project setup and configuration
+  </ItemDescription>
+</ItemContent>
+```
+### Example 2
+```tsx
+// Description with link
+<ItemContent>
+  <ItemTitle>Update Available</ItemTitle>
+  <ItemDescription>
+    A new version is available. <a href="#">Learn more</a>
+  </ItemDescription>
+</ItemContent>
+```
+### Example 3
+```tsx
+// Description with metadata
+<ItemContent>
+  <ItemTitle>Team Meeting</ItemTitle>
+  <ItemDescription>
+    Discuss Q4 planning and resource allocation
+  </ItemDescription>
+</ItemContent>
+```

package/.llm/item-footer.llm.md

@@ -0,0 +1,68 @@
+# ItemFooter
+
+**Type**: component
+
+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.
+
+## JSX Usage
+
+```jsx
+import { ItemFooter } from '@neynar/ui';
+
+<ItemFooter
+  className="value"
+>
+  {/* Your content here */}
+</ItemFooter>
+```
+
+## 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
+<ItemContent>
+  <ItemTitle>Document.pdf</ItemTitle>
+  <ItemDescription>Project documentation</ItemDescription>
+  <ItemFooter>
+    <span className="text-xs text-muted-foreground">2.4 MB</span>
+    <span className="text-xs text-muted-foreground">Modified today</span>
+  </ItemFooter>
+</ItemContent>
+```
+### Example 2
+```tsx
+// Footer with single metadata
+<ItemContent>
+  <ItemTitle>Team Meeting</ItemTitle>
+  <ItemDescription>Discuss Q4 planning</ItemDescription>
+  <ItemFooter>
+    <span className="text-xs text-muted-foreground">
+      Updated 5 minutes ago
+    </span>
+  </ItemFooter>
+</ItemContent>
+```
+### Example 3
+```tsx
+// Footer with multiple metadata items
+<ItemContent>
+  <ItemTitle>Project Report</ItemTitle>
+  <ItemDescription>Q4 Financial Analysis</ItemDescription>
+  <ItemFooter>
+    <span className="text-xs text-muted-foreground">5.8 MB</span>
+    <span className="text-xs text-muted-foreground">Shared with 12</span>
+  </ItemFooter>
+</ItemContent>
+```

package/.llm/item-group.llm.md

@@ -0,0 +1,73 @@
+# ItemGroup
+
+**Type**: component
+
+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.
+
+## JSX Usage
+
+```jsx
+import { ItemGroup } from '@neynar/ui';
+
+<ItemGroup
+  className="value"
+>
+  {/* Your content here */}
+</ItemGroup>
+```
+
+## 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
+<ItemGroup>
+  <Item>
+    <ItemContent>
+      <ItemTitle>First Item</ItemTitle>
+    </ItemContent>
+  </Item>
+  <ItemSeparator />
+  <Item>
+    <ItemContent>
+      <ItemTitle>Second Item</ItemTitle>
+    </ItemContent>
+  </Item>
+</ItemGroup>
+```
+### Example 2
+```tsx
+// Notification list with grouped items
+<ItemGroup>
+  <Item variant="muted">
+    <ItemMedia variant="icon">
+      <Bell />
+    </ItemMedia>
+    <ItemContent>
+      <ItemTitle>New notification</ItemTitle>
+      <ItemDescription>You have a new message</ItemDescription>
+    </ItemContent>
+  </Item>
+  <ItemSeparator />
+  <Item>
+    <ItemMedia variant="icon">
+      <Clock />
+    </ItemMedia>
+    <ItemContent>
+      <ItemTitle>Reminder</ItemTitle>
+      <ItemDescription>Meeting in 30 minutes</ItemDescription>
+    </ItemContent>
+  </Item>
+</ItemGroup>
+```

package/.llm/item-header.llm.md

@@ -0,0 +1,66 @@
+# ItemHeader
+
+**Type**: component
+
+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.
+
+## JSX Usage
+
+```jsx
+import { ItemHeader } from '@neynar/ui';
+
+<ItemHeader
+  className="value"
+>
+  {/* Your content here */}
+</ItemHeader>
+```
+
+## 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
+<ItemContent>
+  <ItemHeader>
+    <ItemTitle>Meeting Notes</ItemTitle>
+    <Badge variant="secondary">New</Badge>
+  </ItemHeader>
+  <ItemDescription>Notes from team sync</ItemDescription>
+</ItemContent>
+```
+### Example 2
+```tsx
+// Header with timestamp
+<ItemContent>
+  <ItemHeader>
+    <ItemTitle>System Update</ItemTitle>
+    <span className="text-xs text-muted-foreground">2h ago</span>
+  </ItemHeader>
+</ItemContent>
+```
+### Example 3
+```tsx
+// Header with multiple badges
+<ItemContent>
+  <ItemHeader>
+    <ItemTitle>Premium Feature</ItemTitle>
+    <div className="flex gap-1">
+      <Badge>Pro</Badge>
+      <Badge variant="secondary">Beta</Badge>
+    </div>
+  </ItemHeader>
+  <ItemDescription>Advanced analytics and reporting</ItemDescription>
+</ItemContent>
+```

package/.llm/item-media.llm.md

@@ -0,0 +1,75 @@
+# ItemMedia
+
+**Type**: component
+
+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.
+
+## JSX Usage
+
+```jsx
+import { ItemMedia } from '@neynar/ui';
+
+<ItemMedia
+  variant={value}
+  className="value"
+>
+  {/* Your content here */}
+</ItemMedia>
+```
+
+## Component Props
+
+### variant
+- **Type**: `"default" | "icon" | "image"`
+- **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
+// Icon variant with automatic sizing
+<Item>
+  <ItemMedia variant="icon">
+    <FileText />
+  </ItemMedia>
+  <ItemContent>
+    <ItemTitle>Document</ItemTitle>
+  </ItemContent>
+</Item>
+```
+### Example 2
+```tsx
+// Image variant for avatars or thumbnails
+<Item>
+  <ItemMedia variant="image">
+    <img src="/avatar.jpg" alt="User avatar" />
+  </ItemMedia>
+  <ItemContent>
+    <ItemTitle>John Doe</ItemTitle>
+    <ItemDescription>Product Manager</ItemDescription>
+  </ItemContent>
+</Item>
+```
+### Example 3
+```tsx
+// Default variant for custom content
+<Item>
+  <ItemMedia>
+    <div className="size-12 rounded-full bg-gradient-to-br from-purple-400 to-pink-400" />
+  </ItemMedia>
+  <ItemContent>
+    <ItemTitle>Custom Media</ItemTitle>
+  </ItemContent>
+</Item>
+```

package/.llm/item-separator.llm.md

@@ -0,0 +1,80 @@
+# ItemSeparator
+
+**Type**: component
+
+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.
+
+## JSX Usage
+
+```jsx
+import { ItemSeparator } from '@neynar/ui';
+
+<ItemSeparator
+  className="value"
+  orientation={value}
+  decorative={true}
+/>
+```
+
+## Component Props
+
+### className
+- **Type**: `string`
+- **Required**: No
+- **Description**: No description available
+
+### orientation
+- **Type**: `"horizontal" | "vertical"`
+- **Required**: No
+- **Description**: No description available
+
+### decorative
+- **Type**: `boolean`
+- **Required**: No
+- **Description**: No description available
+
+## Examples
+
+### Example 1
+```tsx
+<ItemGroup>
+  <Item>
+    <ItemContent>
+      <ItemTitle>First Item</ItemTitle>
+    </ItemContent>
+  </Item>
+  <ItemSeparator />
+  <Item>
+    <ItemContent>
+      <ItemTitle>Second Item</ItemTitle>
+    </ItemContent>
+  </Item>
+</ItemGroup>
+```
+### Example 2
+```tsx
+// File list with separators
+<ItemGroup>
+  <Item asChild>
+    <a href="#">
+      <ItemMedia variant="icon">
+        <FileText />
+      </ItemMedia>
+      <ItemContent>
+        <ItemTitle>Document.pdf</ItemTitle>
+      </ItemContent>
+    </a>
+  </Item>
+  <ItemSeparator />
+  <Item asChild>
+    <a href="#">
+      <ItemMedia variant="icon">
+        <FileText />
+      </ItemMedia>
+      <ItemContent>
+        <ItemTitle>Report.docx</ItemTitle>
+      </ItemContent>
+    </a>
+  </Item>
+</ItemGroup>
+```

package/.llm/item-title.llm.md

@@ -0,0 +1,59 @@
+# ItemTitle
+
+**Type**: component
+
+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.
+
+## JSX Usage
+
+```jsx
+import { ItemTitle } from '@neynar/ui';
+
+<ItemTitle
+  className="value"
+>
+  {/* Your content here */}
+</ItemTitle>
+```
+
+## 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
+<ItemContent>
+  <ItemTitle>Document.pdf</ItemTitle>
+  <ItemDescription>Last modified today</ItemDescription>
+</ItemContent>
+```
+### Example 2
+```tsx
+// Title with inline badge
+<ItemContent>
+  <ItemTitle>
+    Premium Feature
+    <Badge variant="secondary">Pro</Badge>
+  </ItemTitle>
+</ItemContent>
+```
+### Example 3
+```tsx
+// Title with icon
+<ItemContent>
+  <ItemTitle>
+    <Lock className="size-3" />
+    Private Document
+  </ItemTitle>
+</ItemContent>
+```