@neynar/ui 0.3.0 → 0.3.1

package/.llm/context-menu-radio-group.llm.md

@@ -0,0 +1,66 @@
+# ContextMenuRadioGroup
+
+**Type**: component
+
+ContextMenuRadioGroup - Container for radio button items Groups radio items together to allow single selection from multiple options. Manages the selected state and ensures only one item can be selected at a time. Provides controlled state management for radio selections within menus.
+
+## JSX Usage
+
+```jsx
+import { ContextMenuRadioGroup } from '@neynar/ui';
+
+<ContextMenuRadioGroup
+  value="value"
+  onValueChange={handleValueChange}
+  className="value"
+>
+  {/* Your content here */}
+</ContextMenuRadioGroup>
+```
+
+## Component Props
+
+### value
+- **Type**: `string`
+- **Required**: No
+- **Description**: The currently selected value that matches a RadioItem's value
+
+### onValueChange
+- **Type**: `(value: string) => void`
+- **Required**: No
+- **Description**: Callback fired when selection changes, receives new value
+
+### className
+- **Type**: `string`
+- **Required**: No
+- **Description**: No description available
+
+### children
+- **Type**: `React.ReactNode`
+- **Required**: Yes
+- **Description**: ContextMenuRadioItem components to group together
+
+## Examples
+
+### Example 1
+```tsx
+const [theme, setTheme] = useState("light")
+<ContextMenuRadioGroup value={theme} onValueChange={setTheme}>
+  <ContextMenuRadioItem value="light">Light</ContextMenuRadioItem>
+  <ContextMenuRadioItem value="dark">Dark</ContextMenuRadioItem>
+  <ContextMenuRadioItem value="system">System</ContextMenuRadioItem>
+</ContextMenuRadioGroup>
+```
+### Example 2
+```tsx
+// With label and separator
+<ContextMenuContent>
+  <ContextMenuLabel>Theme Selection</ContextMenuLabel>
+  <ContextMenuSeparator />
+  <ContextMenuRadioGroup value={currentTheme} onValueChange={handleThemeChange}>
+    <ContextMenuRadioItem value="light">Light Mode</ContextMenuRadioItem>
+    <ContextMenuRadioItem value="dark">Dark Mode</ContextMenuRadioItem>
+    <ContextMenuRadioItem value="auto">Auto</ContextMenuRadioItem>
+  </ContextMenuRadioGroup>
+</ContextMenuContent>
+```

package/.llm/context-menu-radio-item.llm.md

@@ -0,0 +1,76 @@
+# ContextMenuRadioItem
+
+**Type**: component
+
+ContextMenuRadioItem - A radio button item within a radio group Menu items that allow single selection from a group of options. Must be used within a ContextMenuRadioGroup for proper functionality. Displays a filled circle indicator when selected.
+
+## JSX Usage
+
+```jsx
+import { ContextMenuRadioItem } from '@neynar/ui';
+
+<ContextMenuRadioItem
+  value="value"
+  disabled={true}
+  onSelect={handleSelect}
+  textValue="value"
+  className="value"
+>
+  {/* Your content here */}
+</ContextMenuRadioItem>
+```
+
+## Component Props
+
+### value
+- **Type**: `string`
+- **Required**: Yes
+- **Description**: The unique value for this radio item (required)
+
+### disabled
+- **Type**: `boolean`
+- **Required**: No
+- **Description**: Whether the item is disabled and non-interactive
+
+### onSelect
+- **Type**: `(event: Event) => void`
+- **Required**: No
+- **Description**: Callback fired when the item is selected (before parent's onValueChange)
+
+### textValue
+- **Type**: `string`
+- **Required**: No
+- **Description**: Custom text for typeahead navigation
+
+### className
+- **Type**: `string`
+- **Required**: No
+- **Description**: Additional CSS classes for styling
+
+### children
+- **Type**: `React.ReactNode`
+- **Required**: Yes
+- **Description**: Content of the radio item (typically text)
+
+## Examples
+
+### Example 1
+```tsx
+<ContextMenuRadioGroup value={theme} onValueChange={setTheme}>
+  <ContextMenuRadioItem value="light">Light Theme</ContextMenuRadioItem>
+  <ContextMenuRadioItem value="dark">Dark Theme</ContextMenuRadioItem>
+  <ContextMenuRadioItem value="system">System Theme</ContextMenuRadioItem>
+</ContextMenuRadioGroup>
+```
+### Example 2
+```tsx
+// With disabled state and custom text
+<ContextMenuRadioGroup value={quality} onValueChange={setQuality}>
+  <ContextMenuRadioItem value="low">Low Quality</ContextMenuRadioItem>
+  <ContextMenuRadioItem value="medium">Medium Quality</ContextMenuRadioItem>
+  <ContextMenuRadioItem value="high">High Quality</ContextMenuRadioItem>
+  <ContextMenuRadioItem value="ultra" disabled>
+    Ultra Quality (Premium)
+  </ContextMenuRadioItem>
+</ContextMenuRadioGroup>
+```

package/.llm/context-menu-separator.llm.md

@@ -0,0 +1,51 @@
+# ContextMenuSeparator
+
+**Type**: component
+
+ContextMenuSeparator - A visual divider between menu items Creates visual separation between groups of related menu items. Typically used after labels or to separate different types of actions. Improves visual hierarchy and content organization in menus.
+
+## JSX Usage
+
+```jsx
+import { ContextMenuSeparator } from '@neynar/ui';
+
+<ContextMenuSeparator
+  asChild={true}
+  className="value"
+/>
+```
+
+## Component Props
+
+### asChild
+- **Type**: `boolean`
+- **Required**: No
+- **Description**: Merges props with child element instead of rendering wrapper
+
+### className
+- **Type**: `string`
+- **Required**: No
+- **Description**: Additional CSS classes for styling
+
+## Examples
+
+### Example 1
+```tsx
+<ContextMenuItem>Copy</ContextMenuItem>
+<ContextMenuItem>Paste</ContextMenuItem>
+<ContextMenuSeparator />
+<ContextMenuItem variant="destructive">Delete</ContextMenuItem>
+```
+### Example 2
+```tsx
+// Organizing menu sections
+<ContextMenuContent>
+  <ContextMenuLabel>Edit</ContextMenuLabel>
+  <ContextMenuItem>Copy</ContextMenuItem>
+  <ContextMenuItem>Paste</ContextMenuItem>
+  <ContextMenuSeparator />
+  <ContextMenuLabel>View</ContextMenuLabel>
+  <ContextMenuItem>Zoom In</ContextMenuItem>
+  <ContextMenuItem>Zoom Out</ContextMenuItem>
+</ContextMenuContent>
+```

package/.llm/context-menu-shortcut.llm.md

@@ -0,0 +1,57 @@
+# ContextMenuShortcut
+
+**Type**: component
+
+ContextMenuShortcut - Displays keyboard shortcuts within menu items Shows keyboard shortcuts aligned to the right side of menu items. Provides visual indication of available keyboard shortcuts for actions. Improves discoverability of keyboard navigation options.
+
+## JSX Usage
+
+```jsx
+import { ContextMenuShortcut } from '@neynar/ui';
+
+<ContextMenuShortcut
+  className="value"
+>
+  {/* Your content here */}
+</ContextMenuShortcut>
+```
+
+## Component Props
+
+### className
+- **Type**: `string`
+- **Required**: No
+- **Description**: Additional CSS classes for styling
+
+### children
+- **Type**: `React.ReactNode`
+- **Required**: Yes
+- **Description**: The keyboard shortcut text to display (e.g., "⌘C", "Ctrl+V")
+
+## Examples
+
+### Example 1
+```tsx
+<ContextMenuItem>
+  Copy
+  <ContextMenuShortcut>⌘C</ContextMenuShortcut>
+</ContextMenuItem>
+```
+### Example 2
+```tsx
+// Multiple shortcuts for different platforms
+<ContextMenuItem>
+  Save
+  <ContextMenuShortcut>
+    {isMac ? '⌘S' : 'Ctrl+S'}
+  </ContextMenuShortcut>
+</ContextMenuItem>
+```
+### Example 3
+```tsx
+// Complex shortcuts
+<ContextMenuItem>
+  Find and Replace
+  <ContextMenuShortcut>⌘⌥F</ContextMenuShortcut>
+</ContextMenuItem>
+```

package/.llm/context-menu-sub-content.llm.md

@@ -0,0 +1,90 @@
+# ContextMenuSubContent
+
+**Type**: component
+
+ContextMenuSubContent - Container for sub-menu items Contains the items within a sub-menu. Automatically positioned relative to its trigger with collision detection and smooth animations. Supports all the same features as main menu content including keyboard navigation.
+
+## JSX Usage
+
+```jsx
+import { ContextMenuSubContent } from '@neynar/ui';
+
+<ContextMenuSubContent
+  asChild={true}
+  loop={true}
+  onCloseAutoFocus={handleCloseAutoFocus}
+  onEscapeKeyDown={handleEscapeKeyDown}
+  avoidCollisions={true}
+  sideOffset={0}
+  className="value"
+>
+  {/* Your content here */}
+</ContextMenuSubContent>
+```
+
+## Component Props
+
+### asChild
+- **Type**: `boolean`
+- **Required**: No
+- **Description**: Merges props with child element instead of rendering wrapper
+
+### loop
+- **Type**: `boolean`
+- **Required**: No
+- **Description**: Enable keyboard navigation looping from last to first item
+
+### onCloseAutoFocus
+- **Type**: `(event: Event) => void`
+- **Required**: No
+- **Description**: Handle focus return when sub-menu closes
+
+### onEscapeKeyDown
+- **Type**: `(event: KeyboardEvent) => void`
+- **Required**: No
+- **Description**: Handle escape key presses
+
+### avoidCollisions
+- **Type**: `boolean`
+- **Required**: No
+- **Description**: Prevent collisions with viewport boundaries
+
+### sideOffset
+- **Type**: `number`
+- **Required**: No
+- **Description**: Distance in pixels from the trigger anchor
+
+### className
+- **Type**: `string`
+- **Required**: No
+- **Description**: Additional CSS classes for styling
+
+### children
+- **Type**: `React.ReactNode`
+- **Required**: Yes
+- **Description**: Sub-menu items, separators, and labels
+
+## Examples
+
+### Example 1
+```tsx
+<ContextMenuSubContent>
+  <ContextMenuItem>Option 1</ContextMenuItem>
+  <ContextMenuItem>Option 2</ContextMenuItem>
+  <ContextMenuSeparator />
+  <ContextMenuItem>Option 3</ContextMenuItem>
+</ContextMenuSubContent>
+```
+### Example 2
+```tsx
+// With portal and collision avoidance
+<ContextMenuSubContent
+  avoidCollisions={true}
+  sideOffset={8}
+  className="min-w-[200px]"
+>
+  <ContextMenuLabel>Sub Options</ContextMenuLabel>
+  <ContextMenuItem>Action A</ContextMenuItem>
+  <ContextMenuItem>Action B</ContextMenuItem>
+</ContextMenuSubContent>
+```

package/.llm/context-menu-sub-trigger.llm.md

@@ -0,0 +1,73 @@
+# ContextMenuSubTrigger
+
+**Type**: component
+
+ContextMenuSubTrigger - Trigger element for opening sub-menus Menu item that opens a sub-menu on hover or focus. Automatically includes a chevron icon to indicate the presence of a sub-menu. Supports the same interaction patterns as regular menu items with additional sub-menu behavior.
+
+## JSX Usage
+
+```jsx
+import { ContextMenuSubTrigger } from '@neynar/ui';
+
+<ContextMenuSubTrigger
+  asChild={true}
+  disabled={true}
+  textValue="value"
+  inset={true}
+  className="value"
+>
+  {/* Your content here */}
+</ContextMenuSubTrigger>
+```
+
+## Component Props
+
+### asChild
+- **Type**: `boolean`
+- **Required**: No
+- **Description**: Merges props with child element instead of rendering wrapper
+
+### disabled
+- **Type**: `boolean`
+- **Required**: No
+- **Description**: Prevents interaction and sub-menu opening
+
+### textValue
+- **Type**: `string`
+- **Required**: No
+- **Description**: Custom text for typeahead navigation
+
+### inset
+- **Type**: `boolean`
+- **Required**: No
+- **Description**: Whether to indent the trigger for proper visual alignment
+
+### className
+- **Type**: `string`
+- **Required**: No
+- **Description**: No description available
+
+### children
+- **Type**: `React.ReactNode`
+- **Required**: Yes
+- **Description**: Content of the trigger (text, icons, etc.)
+
+## Examples
+
+### Example 1
+```tsx
+<ContextMenuSubTrigger>
+  <Share className="mr-2 h-4 w-4" />
+  Share Options
+</ContextMenuSubTrigger>
+```
+### Example 2
+```tsx
+// With inset alignment for icon consistency
+<ContextMenuContent>
+  <ContextMenuItem inset>Regular Item</ContextMenuItem>
+  <ContextMenuSubTrigger inset>
+    More Actions
+  </ContextMenuSubTrigger>
+</ContextMenuContent>
+```

package/.llm/context-menu-sub.llm.md

@@ -0,0 +1,61 @@
+# ContextMenuSub
+
+**Type**: component
+
+ContextMenuSub - Container for sub-menu functionality Wraps a sub-menu trigger and its content to create nested menu structures. Enables hierarchical organization of menu items with proper state management for opening and closing sub-menus.
+
+## JSX Usage
+
+```jsx
+import { ContextMenuSub } from '@neynar/ui';
+
+<ContextMenuSub
+  open={true}
+  onOpenChange={handleOpenChange}
+>
+  {/* Your content here */}
+</ContextMenuSub>
+```
+
+## Component Props
+
+### open
+- **Type**: `boolean`
+- **Required**: No
+- **Description**: Controlled open state of the sub-menu
+
+### onOpenChange
+- **Type**: `(open: boolean) => void`
+- **Required**: No
+- **Description**: Callback fired when sub-menu open state changes
+
+### children
+- **Type**: `React.ReactNode`
+- **Required**: Yes
+- **Description**: Sub-menu trigger and content components
+
+## Examples
+
+### Example 1
+```tsx
+<ContextMenuSub>
+  <ContextMenuSubTrigger>Share</ContextMenuSubTrigger>
+  <ContextMenuSubContent>
+    <ContextMenuItem>Email</ContextMenuItem>
+    <ContextMenuItem>Copy Link</ContextMenuItem>
+  </ContextMenuSubContent>
+</ContextMenuSub>
+```
+### Example 2
+```tsx
+// Controlled sub-menu
+const [subOpen, setSubOpen] = useState(false)
+<ContextMenuSub open={subOpen} onOpenChange={setSubOpen}>
+  <ContextMenuSubTrigger>More Actions</ContextMenuSubTrigger>
+  <ContextMenuSubContent>
+    <ContextMenuItem onClick={() => setSubOpen(false)}>
+      Archive
+    </ContextMenuItem>
+  </ContextMenuSubContent>
+</ContextMenuSub>
+```

package/.llm/context-menu-trigger.llm.md

@@ -0,0 +1,53 @@
+# ContextMenuTrigger
+
+**Type**: component
+
+ContextMenuTrigger - The element that triggers the context menu Wraps any element to make it respond to right-click or long-press events. The trigger element should provide visual feedback about its interactive nature. Uses the `asChild` pattern to merge props with child elements for composition.
+
+## JSX Usage
+
+```jsx
+import { ContextMenuTrigger } from '@neynar/ui';
+
+<ContextMenuTrigger
+  asChild={true}
+  disabled={true}
+>
+  {/* Your content here */}
+</ContextMenuTrigger>
+```
+
+## Component Props
+
+### asChild
+- **Type**: `boolean`
+- **Required**: No
+- **Description**: Merges props with child element instead of rendering wrapper
+
+### disabled
+- **Type**: `boolean`
+- **Required**: No
+- **Description**: Prevents context menu from opening when trigger is activated
+
+### children
+- **Type**: `React.ReactNode`
+- **Required**: Yes
+- **Description**: The element that should respond to right-click events
+
+## Examples
+
+### Example 1
+```tsx
+<ContextMenuTrigger>
+  <Button variant="outline">Right-click me</Button>
+</ContextMenuTrigger>
+```
+### Example 2
+```tsx
+// With asChild for direct prop merging
+<ContextMenuTrigger asChild>
+  <div className="p-4 border rounded cursor-pointer">
+    Right-click target area
+  </div>
+</ContextMenuTrigger>
+```

package/.llm/context-menu.llm.md

@@ -0,0 +1,103 @@
+# ContextMenu
+
+**Type**: component
+
+ContextMenu - A contextual menu that appears on right-click or long-press Context menus provide contextual actions for specific elements or areas. Built on Radix UI primitives, they appear when users right-click (or long-press on touch devices) and offer actions relevant to the clicked item or region.
+
+## JSX Usage
+
+```jsx
+import { ContextMenu } from '@neynar/ui';
+
+<ContextMenu
+  dir={value}
+  onOpenChange={handleOpenChange}
+  modal={true}
+>
+  {/* Your content here */}
+</ContextMenu>
+```
+
+## Component Props
+
+### dir
+- **Type**: `"ltr" | "rtl"`
+- **Required**: No
+- **Description**: No description available
+
+### onOpenChange
+- **Type**: `(open: boolean) => void`
+- **Required**: No
+- **Description**: No description available
+
+### modal
+- **Type**: `boolean`
+- **Required**: No
+- **Description**: No description available
+
+### children
+- **Type**: `React.ReactNode`
+- **Required**: No
+- **Description**: No description available
+
+## Examples
+
+### Example 1
+```tsx
+// Basic context menu with items
+<ContextMenu>
+  <ContextMenuTrigger>
+    <div className="border rounded p-4">
+      Right-click here
+    </div>
+  </ContextMenuTrigger>
+  <ContextMenuContent>
+    <ContextMenuItem>Copy</ContextMenuItem>
+    <ContextMenuItem>Paste</ContextMenuItem>
+    <ContextMenuSeparator />
+    <ContextMenuItem variant="destructive">Delete</ContextMenuItem>
+  </ContextMenuContent>
+</ContextMenu>
+```
+### Example 2
+```tsx
+// With sub-menus and shortcuts
+<ContextMenu>
+  <ContextMenuTrigger>Right-click me</ContextMenuTrigger>
+  <ContextMenuContent>
+    <ContextMenuItem>
+      Edit <ContextMenuShortcut>⌘E</ContextMenuShortcut>
+    </ContextMenuItem>
+    <ContextMenuSub>
+      <ContextMenuSubTrigger>Share</ContextMenuSubTrigger>
+      <ContextMenuSubContent>
+        <ContextMenuItem>Email</ContextMenuItem>
+        <ContextMenuItem>Copy Link</ContextMenuItem>
+      </ContextMenuSubContent>
+    </ContextMenuSub>
+  </ContextMenuContent>
+</ContextMenu>
+```
+### Example 3
+```tsx
+// With checkboxes and radio groups
+<ContextMenu>
+  <ContextMenuTrigger>Settings Menu</ContextMenuTrigger>
+  <ContextMenuContent>
+    <ContextMenuLabel>Preferences</ContextMenuLabel>
+    <ContextMenuSeparator />
+    <ContextMenuCheckboxItem checked={showToolbar} onCheckedChange={setShowToolbar}>
+      Show Toolbar
+    </ContextMenuCheckboxItem>
+    <ContextMenuCheckboxItem checked={showSidebar} onCheckedChange={setShowSidebar}>
+      Show Sidebar
+    </ContextMenuCheckboxItem>
+    <ContextMenuSeparator />
+    <ContextMenuRadioGroup value={theme} onValueChange={setTheme}>
+      <ContextMenuRadioItem value="light">Light Theme</ContextMenuRadioItem>
+      <ContextMenuRadioItem value="dark">Dark Theme</ContextMenuRadioItem>
+      <ContextMenuRadioItem value="system">System Theme</ContextMenuRadioItem>
+    </ContextMenuRadioGroup>
+  </ContextMenuContent>
+</ContextMenu>
+```