@neynar/ui 0.3.0 → 0.4.0

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/label.llm.md

@@ -0,0 +1,145 @@
+# Label
+
+**Type**: component
+
+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.
+
+## JSX Usage
+
+```jsx
+import { Label } from '@neynar/ui';
+
+<Label
+  className="value"
+  htmlFor="value"
+  asChild={true}
+  onClick={handleClick}
+  onKeyDown={handleKeyDown}
+  id="value"
+  style={value}
+  tabIndex={0}
+  "aria-label"="value"
+  "aria-describedby"="value"
+  "aria-invalid"={true}
+  "aria-required"={true}
+>
+  {/* Your content here */}
+</Label>
+```
+
+## Component Props
+
+### className
+- **Type**: `string`
+- **Required**: No
+- **Description**: No description available
+
+### htmlFor
+- **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
+
+### onClick
+- **Type**: `React.MouseEventHandler<HTMLLabelElement>`
+- **Required**: No
+- **Description**: No description available
+
+### onKeyDown
+- **Type**: `React.KeyboardEventHandler<HTMLLabelElement>`
+- **Required**: No
+- **Description**: No description available
+
+### id
+- **Type**: `string`
+- **Required**: No
+- **Description**: No description available
+
+### style
+- **Type**: `React.CSSProperties`
+- **Required**: No
+- **Description**: No description available
+
+### tabIndex
+- **Type**: `number`
+- **Required**: No
+- **Description**: No description available
+
+### "aria-label"
+- **Type**: `string`
+- **Required**: No
+- **Description**: No description available
+
+### "aria-describedby"
+- **Type**: `string`
+- **Required**: No
+- **Description**: No description available
+
+### "aria-invalid"
+- **Type**: `boolean`
+- **Required**: No
+- **Description**: No description available
+
+### "aria-required"
+- **Type**: `boolean`
+- **Required**: No
+- **Description**: No description available
+
+## Examples
+
+### Example 1
+```tsx
+// Basic label with input
+<div className="space-y-2">
+  <Label htmlFor="email">Email address</Label>
+  <Input id="email" type="email" placeholder="Enter your email" />
+</div>
+```
+### Example 2
+```tsx
+// Required field with indicator
+<Label htmlFor="username">
+  Username <span className="text-destructive">*</span>
+</Label>
+<Input id="username" required />
+```
+### Example 3
+```tsx
+// Checkbox with label
+<div className="flex items-center space-x-2">
+  <Checkbox id="terms" />
+  <Label htmlFor="terms" className="text-sm font-normal">
+    I agree to the terms and conditions
+  </Label>
+</div>
+```
+### Example 4
+```tsx
+// Label with helper text
+<div className="space-y-1">
+  <Label htmlFor="password">Password</Label>
+  <Input id="password" type="password" />
+  <p className="text-sm text-muted-foreground">
+    Must be at least 8 characters long
+  </p>
+</div>
+```
+### Example 5
+```tsx
+// Complex label with nested content
+<Label htmlFor="plan" className="flex flex-col space-y-1 cursor-pointer">
+  <span className="font-semibold">Choose your plan</span>
+  <span className="text-sm text-muted-foreground">
+    You can upgrade or downgrade anytime
+  </span>
+</Label>
+```

package/.llm/menubar-checkbox-item.llm.md

@@ -0,0 +1,66 @@
+# MenubarCheckboxItem
+
+**Type**: component
+
+A menu item that can be checked/unchecked. Perfect for toggle options like "Show Toolbar", "Enable Feature", or any binary setting that can be turned on/off. Displays a checkmark icon when checked.
+
+## JSX Usage
+
+```jsx
+import { MenubarCheckboxItem } from '@neynar/ui';
+
+<MenubarCheckboxItem
+  className="value"
+  checked={value}
+  onCheckedChange={handleCheckedChange}
+  disabled={true}
+  onSelect={handleSelect}
+  textValue="value"
+>
+  {/* Your content here */}
+</MenubarCheckboxItem>
+```
+
+## Component Props
+
+### className
+- **Type**: `string`
+- **Required**: No
+- **Description**: Additional CSS classes to apply to the checkbox item
+
+### checked
+- **Type**: `boolean | "indeterminate"`
+- **Required**: No
+- **Description**: The controlled checked state of the item. Must be used in conjunction with onCheckedChange
+
+### onCheckedChange
+- **Type**: `(checked: boolean) => void`
+- **Required**: No
+- **Description**: Event handler called when the checked state changes
+
+### disabled
+- **Type**: `boolean`
+- **Required**: No
+- **Description**: When true, prevents the user from interacting with the item
+
+### onSelect
+- **Type**: `(event: Event) => void`
+- **Required**: No
+- **Description**: Event handler called when the user selects an item (via mouse or keyboard)
+
+### textValue
+- **Type**: `string`
+- **Required**: No
+- **Description**: Optional text used for typeahead purposes when content is complex
+
+## Examples
+
+```tsx
+<MenubarCheckboxItem
+  checked={showLineNumbers}
+  onCheckedChange={setShowLineNumbers}
+>
+  Show Line Numbers
+</MenubarCheckboxItem>
+```
+/

package/.llm/menubar-content.llm.md

@@ -0,0 +1,128 @@
+# MenubarContent
+
+**Type**: component
+
+Dropdown content container for menu items. Contains the actual menu items, separators, and submenus that appear when a MenubarTrigger is activated. Automatically portaled and positioned.
+
+## JSX Usage
+
+```jsx
+import { MenubarContent } from '@neynar/ui';
+
+<MenubarContent
+  className="value"
+  align={value}
+  alignOffset={0}
+  sideOffset={0}
+  side={value}
+  avoidCollisions={true}
+  collisionBoundary={value}
+  arrowPadding={0}
+  sticky={value}
+  hideWhenDetached={true}
+  loop={true}
+  onEscapeKeyDown={handleEscapeKeyDown}
+  onPointerDownOutside={handlePointerDownOutside}
+  onFocusOutside={handleFocusOutside}
+  onInteractOutside={handleInteractOutside}
+  forceMount={value}
+/>
+```
+
+## Component Props
+
+### className
+- **Type**: `string`
+- **Required**: No
+- **Description**: Additional CSS classes to apply to the content container
+
+### align
+- **Type**: `"start" | "center" | "end"`
+- **Required**: No
+- **Description**: The preferred alignment against the trigger. May change when collisions occur
+
+### alignOffset
+- **Type**: `number`
+- **Required**: No
+- **Description**: An offset in pixels from the "start" or "end" alignment options
+
+### sideOffset
+- **Type**: `number`
+- **Required**: No
+- **Description**: The distance in pixels from the trigger
+
+### side
+- **Type**: `"top" | "right" | "bottom" | "left"`
+- **Required**: No
+- **Description**: The preferred side of the trigger to render against when open
+
+### avoidCollisions
+- **Type**: `boolean`
+- **Required**: No
+- **Description**: When true, overrides the side and align preferences to prevent collisions with viewport edges
+
+### collisionBoundary
+- **Type**: `Element | null | Array<Element | null>`
+- **Required**: No
+- **Description**: The element used as the collision boundary for positioning
+
+### arrowPadding
+- **Type**: `number`
+- **Required**: No
+- **Description**: No description available
+
+### sticky
+- **Type**: `"partial" | "always"`
+- **Required**: No
+- **Description**: No description available
+
+### hideWhenDetached
+- **Type**: `boolean`
+- **Required**: No
+- **Description**: No description available
+
+### loop
+- **Type**: `boolean`
+- **Required**: No
+- **Description**: Whether keyboard navigation should loop from last item to first, and vice versa
+
+### onEscapeKeyDown
+- **Type**: `(event: KeyboardEvent) => void`
+- **Required**: No
+- **Description**: Event handler called when the escape key is down
+
+### onPointerDownOutside
+- **Type**: `(
+    event: CustomEvent<{ originalEvent: PointerEvent }>,
+  ) => void`
+- **Required**: No
+- **Description**: Event handler called when a pointerdown event happens outside of the component
+
+### onFocusOutside
+- **Type**: `(event: CustomEvent<{ originalEvent: FocusEvent }>) => void`
+- **Required**: No
+- **Description**: Event handler called when focus moves outside of the component
+
+### onInteractOutside
+- **Type**: `(
+    event: CustomEvent<{ originalEvent: PointerEvent | FocusEvent }>,
+  ) => void`
+- **Required**: No
+- **Description**: Event handler called when an interaction happens outside the component
+
+### forceMount
+- **Type**: `true`
+- **Required**: No
+- **Description**: No description available
+
+## Examples
+
+```tsx
+<MenubarContent align="center" sideOffset={12}>
+  <MenubarItem>New File</MenubarItem>
+  <MenubarItem>Open File</MenubarItem>
+  <MenubarSeparator />
+  <MenubarItem>Exit</MenubarItem>
+</MenubarContent>
+```
+/

package/.llm/menubar-group.llm.md

@@ -0,0 +1,40 @@
+# MenubarGroup
+
+**Type**: component
+
+Groups related menu items together within MenubarContent. Used to create logical groupings of menu items, often separated by MenubarSeparator components. Helps organize complex menus.
+
+## JSX Usage
+
+```jsx
+import { MenubarGroup } from '@neynar/ui';
+
+<MenubarGroup
+  ...props={value}
+/>
+```
+
+## Component Props
+
+### ...props
+- **Type**: `unknown`
+- **Required**: Yes
+- **Description**: No description available
+
+## Examples
+
+```tsx
+<MenubarContent>
+  <MenubarGroup>
+    <MenubarItem>Cut</MenubarItem>
+    <MenubarItem>Copy</MenubarItem>
+    <MenubarItem>Paste</MenubarItem>
+  </MenubarGroup>
+  <MenubarSeparator />
+  <MenubarGroup>
+    <MenubarItem>Find</MenubarItem>
+    <MenubarItem>Replace</MenubarItem>
+  </MenubarGroup>
+</MenubarContent>
+```
+/

package/.llm/menubar-item.llm.md

@@ -0,0 +1,62 @@
+# MenubarItem
+
+**Type**: component
+
+A selectable menu item within MenubarContent. Can be enhanced with icons, keyboard shortcuts, and supports different variants including destructive actions. Automatically handles selection events and keyboard navigation.
+
+## JSX Usage
+
+```jsx
+import { MenubarItem } from '@neynar/ui';
+
+<MenubarItem
+  className="value"
+  inset={true}
+  variant={value}
+  disabled={true}
+  onSelect={handleSelect}
+  textValue="value"
+/>
+```
+
+## Component Props
+
+### className
+- **Type**: `string`
+- **Required**: No
+- **Description**: Additional CSS classes to apply to the menu item
+
+### inset
+- **Type**: `boolean`
+- **Required**: No
+- **Description**: Whether to add left padding for alignment with items that have icons
+
+### variant
+- **Type**: `"default" | "destructive"`
+- **Required**: No
+- **Description**: Visual variant of the menu item
+
+### disabled
+- **Type**: `boolean`
+- **Required**: No
+- **Description**: When true, prevents the user from interacting with the item
+
+### onSelect
+- **Type**: `(event: Event) => void`
+- **Required**: No
+- **Description**: Event handler called when the user selects an item (via mouse or keyboard)
+
+### textValue
+- **Type**: `string`
+- **Required**: No
+- **Description**: Optional text used for typeahead purposes when content is complex
+
+## Examples
+
+```tsx
+<MenubarItem onSelect={() => deleteFile()} variant="destructive">
+  Delete File
+  <MenubarShortcut>⌫</MenubarShortcut>
+</MenubarItem>
+```
+/