@neynar/ui 0.2.1 → 0.3.1

package/.llm/input-group-textarea.llm.md

@@ -0,0 +1,157 @@
+# InputGroupTextarea
+
+**Type**: component
+
+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.
+
+## JSX Usage
+
+```jsx
+import { InputGroupTextarea } from '@neynar/ui';
+
+<InputGroupTextarea
+  className="value"
+  placeholder="value"
+  rows={0}
+  value="value"
+  defaultValue="value"
+  onChange={handleChange}
+  disabled={true}
+  readOnly={true}
+  "aria-invalid"={value}
+  name="value"
+  id="value"
+  required={true}
+  maxLength={0}
+/>
+```
+
+## Component Props
+
+### className
+- **Type**: `string`
+- **Required**: No
+- **Description**: No description available
+
+### placeholder
+- **Type**: `string`
+- **Required**: No
+- **Description**: No description available
+
+### rows
+- **Type**: `number`
+- **Required**: No
+- **Description**: No description available
+
+### value
+- **Type**: `string`
+- **Required**: No
+- **Description**: No description available
+
+### defaultValue
+- **Type**: `string`
+- **Required**: No
+- **Description**: No description available
+
+### onChange
+- **Type**: `React.ChangeEventHandler<HTMLTextAreaElement>`
+- **Required**: No
+- **Description**: No description available
+
+### disabled
+- **Type**: `boolean`
+- **Required**: No
+- **Description**: No description available
+
+### readOnly
+- **Type**: `boolean`
+- **Required**: No
+- **Description**: No description available
+
+### "aria-invalid"
+- **Type**: `boolean | "true" | "false"`
+- **Required**: No
+- **Description**: No description available
+
+### name
+- **Type**: `string`
+- **Required**: No
+- **Description**: No description available
+
+### id
+- **Type**: `string`
+- **Required**: No
+- **Description**: No description available
+
+### required
+- **Type**: `boolean`
+- **Required**: No
+- **Description**: No description available
+
+### maxLength
+- **Type**: `number`
+- **Required**: No
+- **Description**: No description available
+
+## Examples
+
+### Example 1
+```tsx
+// Basic textarea with label addon
+<InputGroup>
+  <InputGroupAddon align="block-start">
+    <InputGroupText>Message</InputGroupText>
+  </InputGroupAddon>
+  <InputGroupTextarea placeholder="Type your message here..." />
+</InputGroup>
+```
+### Example 2
+```tsx
+// Textarea with submit button below
+<InputGroup>
+  <InputGroupTextarea placeholder="Write your comment..." rows={4} />
+  <InputGroupAddon align="block-end">
+    <InputGroupButton size="sm">
+      <Send className="size-4" />
+      Post
+    </InputGroupButton>
+  </InputGroupAddon>
+</InputGroup>
+```
+### Example 3
+```tsx
+// Complete comment form with top and bottom addons
+<InputGroup>
+  <InputGroupAddon align="block-start">
+    <InputGroupText>Your Comment</InputGroupText>
+    <InputGroupButton size="icon-xs">
+      <X className="size-4" />
+    </InputGroupButton>
+  </InputGroupAddon>
+  <InputGroupTextarea placeholder="Add a comment..." rows={3} />
+  <InputGroupAddon align="block-end">
+    <InputGroupButton size="sm" variant="default">
+      Post Comment
+    </InputGroupButton>
+  </InputGroupAddon>
+</InputGroup>
+```
+### Example 4
+```tsx
+// Textarea with character counter
+const [message, setMessage] = useState("");
+<InputGroup>
+  <InputGroupTextarea
+    placeholder="Compose your message..."
+    value={message}
+    onChange={(e) => setMessage(e.target.value)}
+    rows={5}
+  />
+  <InputGroupAddon align="block-end">
+    <InputGroupText className="text-xs">
+      {message.length} characters
+    </InputGroupText>
+    <InputGroupButton size="sm">Send</InputGroupButton>
+  </InputGroupAddon>
+</InputGroup>
+```

package/.llm/input-group.llm.md

@@ -0,0 +1,108 @@
+# InputGroup
+
+**Type**: component
+
+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.
+
+## JSX Usage
+
+```jsx
+import { InputGroup } from '@neynar/ui';
+
+<InputGroup
+  className="value"
+  "data-disabled"={value}
+>
+  {/* Your content here */}
+</InputGroup>
+```
+
+## Component Props
+
+### className
+- **Type**: `string`
+- **Required**: No
+- **Description**: No description available
+
+### children
+- **Type**: `React.ReactNode`
+- **Required**: No
+- **Description**: No description available
+
+### "data-disabled"
+- **Type**: `"true" | "false"`
+- **Required**: No
+- **Description**: No description available
+
+## Examples
+
+### Example 1
+```tsx
+// Search input with icon and keyboard shortcut
+<InputGroup>
+  <InputGroupAddon align="inline-start">
+    <Search className="size-4" />
+  </InputGroupAddon>
+  <InputGroupInput placeholder="Search..." />
+  <InputGroupAddon align="inline-end">
+    <Kbd>⌘K</Kbd>
+  </InputGroupAddon>
+</InputGroup>
+```
+### Example 2
+```tsx
+// Email subscription form with submit button
+<InputGroup>
+  <InputGroupAddon align="inline-start">
+    <Mail className="size-4" />
+  </InputGroupAddon>
+  <InputGroupInput type="email" placeholder="Enter your email" />
+  <InputGroupAddon align="inline-end">
+    <InputGroupButton size="sm">Subscribe</InputGroupButton>
+  </InputGroupAddon>
+</InputGroup>
+```
+### Example 3
+```tsx
+// Price input with currency indicators
+<InputGroup>
+  <InputGroupAddon align="inline-start">
+    <DollarSign className="size-4" />
+  </InputGroupAddon>
+  <InputGroupInput type="number" placeholder="0.00" />
+  <InputGroupAddon align="inline-end">
+    <InputGroupText>USD</InputGroupText>
+  </InputGroupAddon>
+</InputGroup>
+```
+### Example 4
+```tsx
+// Comment textarea with block addons
+<InputGroup>
+  <InputGroupAddon align="block-start">
+    <InputGroupText>Your Comment</InputGroupText>
+  </InputGroupAddon>
+  <InputGroupTextarea placeholder="Write your comment..." rows={4} />
+  <InputGroupAddon align="block-end">
+    <InputGroupButton size="sm">
+      <Send className="size-4" />
+      Post
+    </InputGroupButton>
+  </InputGroupAddon>
+</InputGroup>
+```
+### Example 5
+```tsx
+// Error state with aria-invalid
+<InputGroup>
+  <InputGroupAddon align="inline-start">
+    <Mail className="size-4" />
+  </InputGroupAddon>
+  <InputGroupInput
+    type="email"
+    placeholder="Email"
+    aria-invalid="true"
+    defaultValue="invalid-email"
+  />
+</InputGroup>
+```

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