@neynar/ui 0.2.1 → 0.3.1

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>
+```

package/.llm/item.llm.md

@@ -0,0 +1,115 @@
+# Item
+
+**Type**: component
+
+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).
+
+## JSX Usage
+
+```jsx
+import { Item } from '@neynar/ui';
+
+<Item
+  variant={value}
+  size={value}
+  asChild={true}
+  className="value"
+>
+  {/* Your content here */}
+</Item>
+```
+
+## Component Props
+
+### variant
+- **Type**: `"default" | "outline" | "muted"`
+- **Required**: No
+- **Description**: No description available
+
+### size
+- **Type**: `"default" | "sm"`
+- **Required**: No
+- **Description**: No description available
+
+### 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
+// Basic item with icon and content
+<Item>
+  <ItemMedia variant="icon">
+    <FileText />
+  </ItemMedia>
+  <ItemContent>
+    <ItemTitle>Document.pdf</ItemTitle>
+    <ItemDescription>Last modified today</ItemDescription>
+  </ItemContent>
+</Item>
+```
+### Example 2
+```tsx
+// Item as a clickable link with asChild
+<Item asChild>
+  <a href="/dashboard">
+    <ItemMedia variant="icon">
+      <Home />
+    </ItemMedia>
+    <ItemContent>
+      <ItemTitle>Dashboard</ItemTitle>
+      <ItemDescription>View your account overview</ItemDescription>
+    </ItemContent>
+    <ItemActions>
+      <ChevronRight />
+    </ItemActions>
+  </a>
+</Item>
+```
+### Example 3
+```tsx
+// Rich item with header, footer, and actions
+<Item variant="outline">
+  <ItemMedia variant="image">
+    <img src="/avatar.jpg" alt="User" />
+  </ItemMedia>
+  <ItemContent>
+    <ItemHeader>
+      <ItemTitle>John Doe</ItemTitle>
+      <Badge>Pro</Badge>
+    </ItemHeader>
+    <ItemDescription>Product Manager</ItemDescription>
+    <ItemFooter>
+      <span className="text-xs">Last active 5m ago</span>
+    </ItemFooter>
+  </ItemContent>
+  <ItemActions>
+    <Button size="sm">Message</Button>
+  </ItemActions>
+</Item>
+```
+### Example 4
+```tsx
+// Small size variant for compact layouts
+<Item size="sm">
+  <ItemContent>
+    <ItemTitle>Settings</ItemTitle>
+  </ItemContent>
+  <ItemActions>
+    <ChevronRight className="size-4" />
+  </ItemActions>
+</Item>
+```

package/.llm/kbd-group.llm.md

@@ -0,0 +1,71 @@
+# KbdGroup
+
+**Type**: component
+
+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".
+
+## JSX Usage
+
+```jsx
+import { KbdGroup } from '@neynar/ui';
+
+<KbdGroup
+  className="value"
+>
+  {/* Your content here */}
+</KbdGroup>
+```
+
+## 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
+// Basic keyboard shortcut
+<KbdGroup>
+  <Kbd>Ctrl</Kbd>
+  <Kbd>C</Kbd>
+</KbdGroup>
+```
+### Example 2
+```tsx
+// Multiple modifier keys
+<KbdGroup>
+  <Kbd>⌘</Kbd>
+  <Kbd>⇧</Kbd>
+  <Kbd>P</Kbd>
+</KbdGroup>
+```
+### Example 3
+```tsx
+// With custom separators using text
+<KbdGroup>
+  <Kbd>Ctrl</Kbd>
+  <span className="text-muted-foreground">+</span>
+  <Kbd>Alt</Kbd>
+  <span className="text-muted-foreground">+</span>
+  <Kbd>Delete</Kbd>
+</KbdGroup>
+```
+### Example 4
+```tsx
+// In a command palette or menu item
+<div className="flex items-center justify-between">
+  <span>Open command palette</span>
+  <KbdGroup>
+    <Kbd>⌘</Kbd>
+    <Kbd>K</Kbd>
+  </KbdGroup>
+</div>
+```

package/.llm/kbd.llm.md

@@ -0,0 +1,71 @@
+# Kbd
+
+**Type**: component
+
+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.
+
+## JSX Usage
+
+```jsx
+import { Kbd } from '@neynar/ui';
+
+<Kbd
+  className="value"
+>
+  {/* Your content here */}
+</Kbd>
+```
+
+## 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
+// Display a single keyboard key
+<Kbd>K</Kbd>
+```
+### Example 2
+```tsx
+// Display keyboard shortcuts with modifiers
+<KbdGroup>
+  <Kbd>⌘</Kbd>
+  <Kbd>K</Kbd>
+</KbdGroup>
+```
+### Example 3
+```tsx
+// Display keyboard shortcuts in help text
+<p>
+  Press <Kbd>Ctrl</Kbd> + <Kbd>S</Kbd> to save your work
+</p>
+```
+### Example 4
+```tsx
+// Complex keyboard shortcut with multiple modifiers
+<KbdGroup>
+  <Kbd>Ctrl</Kbd>
+  <Kbd>Shift</Kbd>
+  <Kbd>P</Kbd>
+</KbdGroup>
+```
+### Example 5
+```tsx
+// Display keyboard shortcuts with icons
+<KbdGroup>
+  <Kbd>
+    <Command className="h-3 w-3" />
+  </Kbd>
+  <Kbd>K</Kbd>
+</KbdGroup>
+```

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

@@ -30,12 +30,7 @@ import { Lead } 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}/p.llm.md

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