@neynar/ui 0.3.0 → 0.4.0

package/.llm/dropdown-menu-portal.llm.md

@@ -0,0 +1,32 @@
+# DropdownMenuPortal
+
+**Type**: component
+
+Portal component for rendering menu content in a different DOM location Renders dropdown content outside of the normal DOM hierarchy to avoid z-index and overflow issues. Automatically used by DropdownMenuContent but can be used explicitly for advanced positioning scenarios.
+
+## JSX Usage
+
+```jsx
+import { DropdownMenuPortal } from '@neynar/ui';
+
+<DropdownMenuPortal
+  ...props={value}
+/>
+```
+
+## Component Props
+
+### ...props
+- **Type**: `unknown`
+- **Required**: Yes
+- **Description**: No description available
+
+## Examples
+
+```tsx
+<DropdownMenuPortal container={customContainer}>
+  <DropdownMenuContent>
+    <DropdownMenuItem>Item</DropdownMenuItem>
+  </DropdownMenuContent>
+</DropdownMenuPortal>
+```

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

@@ -0,0 +1,73 @@
+# DropdownMenuRadioGroup
+
+**Type**: component
+
+Groups radio items for single selection Creates a group where only one radio item can be selected at a time. Manages the selection state and ensures mutual exclusivity between options. Use with DropdownMenuRadioItem components to create single-choice scenarios like theme selection, sorting options, or view modes.
+
+## JSX Usage
+
+```jsx
+import { DropdownMenuRadioGroup } from '@neynar/ui';
+
+<DropdownMenuRadioGroup
+  value="value"
+  onValueChange={handleValueChange}
+  disabled={true}
+>
+  {/* Your content here */}
+</DropdownMenuRadioGroup>
+```
+
+## Component Props
+
+### value
+- **Type**: `string`
+- **Required**: No
+- **Description**: The currently selected value in the radio group
+
+### onValueChange
+- **Type**: `(value: string) => void`
+- **Required**: No
+- **Description**: Callback fired when the selection changes to a different value
+
+### disabled
+- **Type**: `boolean`
+- **Required**: No
+- **Description**: Whether the entire radio group is disabled
+
+### children
+- **Type**: `React.ReactNode`
+- **Required**: No
+- **Description**: No description available
+
+## Examples
+
+### Example 1
+```tsx
+// Theme selection with radio group
+const [theme, setTheme] = useState("light");
+<DropdownMenuRadioGroup value={theme} onValueChange={setTheme}>
+  <DropdownMenuRadioItem value="light">
+    <Sun className="mr-2 h-4 w-4" />
+    Light Theme
+  </DropdownMenuRadioItem>
+  <DropdownMenuRadioItem value="dark">
+    <Moon className="mr-2 h-4 w-4" />
+    Dark Theme
+  </DropdownMenuRadioItem>
+  <DropdownMenuRadioItem value="system">
+    <Monitor className="mr-2 h-4 w-4" />
+    System Theme
+  </DropdownMenuRadioItem>
+</DropdownMenuRadioGroup>
+```
+### Example 2
+```tsx
+// Sorting options
+const [sortBy, setSortBy] = useState("name");
+<DropdownMenuRadioGroup value={sortBy} onValueChange={setSortBy}>
+  <DropdownMenuRadioItem value="name">Sort by Name</DropdownMenuRadioItem>
+  <DropdownMenuRadioItem value="date">Sort by Date</DropdownMenuRadioItem>
+  <DropdownMenuRadioItem value="size">Sort by Size</DropdownMenuRadioItem>
+</DropdownMenuRadioGroup>
+```

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

@@ -0,0 +1,92 @@
+# DropdownMenuRadioItem
+
+**Type**: component
+
+A radio button menu item for single selection within a group Must be used within a DropdownMenuRadioGroup. Shows a filled circle indicator when selected. Only one radio item can be selected per group, ensuring mutually exclusive selection behavior.
+
+## JSX Usage
+
+```jsx
+import { DropdownMenuRadioItem } from '@neynar/ui';
+
+<DropdownMenuRadioItem
+  value="value"
+  disabled={true}
+  onSelect={handleSelect}
+  textValue="value"
+  inset={true}
+  className="value"
+>
+  {/* Your content here */}
+</DropdownMenuRadioItem>
+```
+
+## Component Props
+
+### value
+- **Type**: `string`
+- **Required**: Yes
+- **Description**: The unique value this radio item represents
+
+### disabled
+- **Type**: `boolean`
+- **Required**: No
+- **Description**: Whether the item is disabled and cannot be selected
+
+### onSelect
+- **Type**: `(event: Event) => void`
+- **Required**: No
+- **Description**: Callback fired when the item is selected via click or keyboard
+
+### textValue
+- **Type**: `string`
+- **Required**: No
+- **Description**: Optional text value used for typeahead search functionality
+
+### inset
+- **Type**: `boolean`
+- **Required**: No
+- **Description**: Whether to add extra left padding to align with items that have icons
+
+### className
+- **Type**: `string`
+- **Required**: No
+- **Description**: No description available
+
+### children
+- **Type**: `React.ReactNode`
+- **Required**: No
+- **Description**: No description available
+
+## Examples
+
+### Example 1
+```tsx
+// Basic radio group for theme selection
+<DropdownMenuRadioGroup value={selectedTheme} onValueChange={setSelectedTheme}>
+  <DropdownMenuRadioItem value="light">
+    <Sun className="mr-2 h-4 w-4" />
+    Light Theme
+  </DropdownMenuRadioItem>
+  <DropdownMenuRadioItem value="dark">
+    <Moon className="mr-2 h-4 w-4" />
+    Dark Theme
+  </DropdownMenuRadioItem>
+  <DropdownMenuRadioItem value="system">
+    <Monitor className="mr-2 h-4 w-4" />
+    System Theme
+  </DropdownMenuRadioItem>
+</DropdownMenuRadioGroup>
+```
+### Example 2
+```tsx
+// Priority selection with disabled option
+<DropdownMenuRadioGroup value={priority} onValueChange={setPriority}>
+  <DropdownMenuRadioItem value="low">Low Priority</DropdownMenuRadioItem>
+  <DropdownMenuRadioItem value="medium">Medium Priority</DropdownMenuRadioItem>
+  <DropdownMenuRadioItem value="high">High Priority</DropdownMenuRadioItem>
+  <DropdownMenuRadioItem value="urgent" disabled>
+    Urgent (Premium Only)
+  </DropdownMenuRadioItem>
+</DropdownMenuRadioGroup>
+```

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

@@ -0,0 +1,55 @@
+# DropdownMenuSeparator
+
+**Type**: component
+
+A visual separator between menu items or groups Renders a thin horizontal line to visually separate different sections of menu items. Improves visual hierarchy and helps users understand the logical grouping of menu options. Commonly used after labels or between different types of actions.
+
+## JSX Usage
+
+```jsx
+import { DropdownMenuSeparator } from '@neynar/ui';
+
+<DropdownMenuSeparator
+  className={value}
+  ...props={value}
+/>
+```
+
+## Component Props
+
+### className
+- **Type**: `unknown`
+- **Required**: Yes
+- **Description**: No description available
+
+### ...props
+- **Type**: `unknown`
+- **Required**: Yes
+- **Description**: No description available
+
+## Examples
+
+### Example 1
+```tsx
+// Separating different action groups
+<DropdownMenuContent>
+  <DropdownMenuItem>View</DropdownMenuItem>
+  <DropdownMenuItem>Edit</DropdownMenuItem>
+  <DropdownMenuSeparator />
+  <DropdownMenuItem variant="destructive">Delete</DropdownMenuItem>
+</DropdownMenuContent>
+```
+### Example 2
+```tsx
+// Separating sections with labels
+<DropdownMenuContent>
+  <DropdownMenuLabel>User Actions</DropdownMenuLabel>
+  <DropdownMenuSeparator />
+  <DropdownMenuItem>Profile</DropdownMenuItem>
+  <DropdownMenuItem>Settings</DropdownMenuItem>
+  <DropdownMenuSeparator />
+  <DropdownMenuLabel>System</DropdownMenuLabel>
+  <DropdownMenuSeparator />
+  <DropdownMenuItem>Logout</DropdownMenuItem>
+</DropdownMenuContent>
+```

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

@@ -0,0 +1,74 @@
+# DropdownMenuShortcut
+
+**Type**: component
+
+Displays keyboard shortcut hints in menu items Shows keyboard shortcut text aligned to the right side of menu items. Purely visual component - does not implement the actual keyboard functionality. Use standard keyboard shortcut notation and symbols (⌘, ⌃, ⌥, ⇧, Ctrl, Alt, Shift). Helps users discover and remember keyboard shortcuts for menu actions.
+
+## JSX Usage
+
+```jsx
+import { DropdownMenuShortcut } from '@neynar/ui';
+
+<DropdownMenuShortcut
+  className={value}
+  ...props={value}
+/>
+```
+
+## Component Props
+
+### className
+- **Type**: `unknown`
+- **Required**: Yes
+- **Description**: No description available
+
+### ...props
+- **Type**: `unknown`
+- **Required**: Yes
+- **Description**: No description available
+
+## Examples
+
+### Example 1
+```tsx
+// macOS style shortcuts
+<DropdownMenuItem onSelect={handleSave}>
+  Save Document
+  <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
+</DropdownMenuItem>
+```
+### Example 2
+```tsx
+// Windows/Linux style shortcuts
+<DropdownMenuItem onSelect={handleCopy}>
+  Copy
+  <DropdownMenuShortcut>Ctrl+C</DropdownMenuShortcut>
+</DropdownMenuItem>
+```
+### Example 3
+```tsx
+// Complex shortcuts with multiple modifiers
+<DropdownMenuItem onSelect={handleForceRefresh}>
+  Force Refresh
+  <DropdownMenuShortcut>⌘⇧R</DropdownMenuShortcut>
+</DropdownMenuItem>
+```
+### Example 4
+```tsx
+// Multiple menu items with shortcuts
+<DropdownMenuContent>
+  <DropdownMenuItem>
+    New File <DropdownMenuShortcut>⌘N</DropdownMenuShortcut>
+  </DropdownMenuItem>
+  <DropdownMenuItem>
+    Open File <DropdownMenuShortcut>⌘O</DropdownMenuShortcut>
+  </DropdownMenuItem>
+  <DropdownMenuSeparator />
+  <DropdownMenuItem>
+    Save <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
+  </DropdownMenuItem>
+  <DropdownMenuItem>
+    Save As <DropdownMenuShortcut>⌘⇧S</DropdownMenuShortcut>
+  </DropdownMenuItem>
+</DropdownMenuContent>
+```

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

@@ -0,0 +1,80 @@
+# DropdownMenuSubContent
+
+**Type**: component
+
+Content container for submenu items Contains the items displayed when a submenu is opened. Positioned relative to the submenu trigger with intelligent collision detection. Supports all the same item types as the main menu content, enabling complex nested menu structures with consistent behavior and styling.
+
+## JSX Usage
+
+```jsx
+import { DropdownMenuSubContent } from '@neynar/ui';
+
+<DropdownMenuSubContent
+  className={value}
+  ...props={value}
+/>
+```
+
+## Component Props
+
+### className
+- **Type**: `unknown`
+- **Required**: Yes
+- **Description**: No description available
+
+### ...props
+- **Type**: `unknown`
+- **Required**: Yes
+- **Description**: No description available
+
+## Examples
+
+### Example 1
+```tsx
+// Basic submenu content with various item types
+<DropdownMenuSubContent>
+  <DropdownMenuItem>
+    <Mail className="mr-2 h-4 w-4" />
+    Send via Email
+  </DropdownMenuItem>
+  <DropdownMenuItem>
+    <Link className="mr-2 h-4 w-4" />
+    Copy Share Link
+  </DropdownMenuItem>
+  <DropdownMenuSeparator />
+  <DropdownMenuItem>
+    <QrCode className="mr-2 h-4 w-4" />
+    Generate QR Code
+  </DropdownMenuItem>
+</DropdownMenuSubContent>
+```
+### Example 2
+```tsx
+// Submenu with checkbox items for multi-selection
+<DropdownMenuSubContent>
+  <DropdownMenuLabel>Export Options</DropdownMenuLabel>
+  <DropdownMenuSeparator />
+  <DropdownMenuCheckboxItem checked={includeMetadata} onCheckedChange={setIncludeMetadata}>
+    Include Metadata
+  </DropdownMenuCheckboxItem>
+  <DropdownMenuCheckboxItem checked={compressFile} onCheckedChange={setCompressFile}>
+    Compress File
+  </DropdownMenuCheckboxItem>
+  <DropdownMenuSeparator />
+  <DropdownMenuItem>Export Now</DropdownMenuItem>
+</DropdownMenuSubContent>
+```
+### Example 3
+```tsx
+// Nested submenu structure
+<DropdownMenuSubContent>
+  <DropdownMenuItem>Basic Export</DropdownMenuItem>
+  <DropdownMenuSub>
+    <DropdownMenuSubTrigger>Advanced Settings</DropdownMenuSubTrigger>
+    <DropdownMenuSubContent>
+      <DropdownMenuItem>High Quality</DropdownMenuItem>
+      <DropdownMenuItem>Custom Resolution</DropdownMenuItem>
+    </DropdownMenuSubContent>
+  </DropdownMenuSub>
+</DropdownMenuSubContent>
+```

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

@@ -0,0 +1,84 @@
+# DropdownMenuSubTrigger
+
+**Type**: component
+
+Trigger element for opening a submenu Displays an arrow indicator and opens the associated submenu on hover or keyboard navigation. Must be used within a DropdownMenuSub component. Automatically includes a chevron icon to indicate submenu availability and handles focus states.
+
+## JSX Usage
+
+```jsx
+import { DropdownMenuSubTrigger } from '@neynar/ui';
+
+<DropdownMenuSubTrigger
+  className={value}
+  inset={value}
+  ...props={value}
+>
+  {/* Your content here */}
+</DropdownMenuSubTrigger>
+```
+
+## Component Props
+
+### className
+- **Type**: `unknown`
+- **Required**: Yes
+- **Description**: No description available
+
+### inset
+- **Type**: `unknown`
+- **Required**: Yes
+- **Description**: No description available
+
+### children
+- **Type**: `unknown`
+- **Required**: Yes
+- **Description**: No description available
+
+### ...props
+- **Type**: `unknown`
+- **Required**: Yes
+- **Description**: No description available
+
+## Examples
+
+### Example 1
+```tsx
+// Basic submenu trigger with icon
+<DropdownMenuSub>
+  <DropdownMenuSubTrigger>
+    <Share className="mr-2 h-4 w-4" />
+    Share Options
+  </DropdownMenuSubTrigger>
+  <DropdownMenuSubContent>
+    <DropdownMenuItem>Email Link</DropdownMenuItem>
+    <DropdownMenuItem>Copy to Clipboard</DropdownMenuItem>
+  </DropdownMenuSubContent>
+</DropdownMenuSub>
+```
+### Example 2
+```tsx
+// Submenu trigger with inset alignment
+<DropdownMenuContent>
+  <DropdownMenuItem>
+    <FileText className="mr-2 h-4 w-4" />
+    Open File
+  </DropdownMenuItem>
+  <DropdownMenuSub>
+    <DropdownMenuSubTrigger inset>
+      Recent Files
+    </DropdownMenuSubTrigger>
+    <DropdownMenuSubContent>
+      <DropdownMenuItem>Document.pdf</DropdownMenuItem>
+      <DropdownMenuItem>Presentation.pptx</DropdownMenuItem>
+    </DropdownMenuSubContent>
+  </DropdownMenuSub>
+</DropdownMenuContent>
+```
+### Example 3
+```tsx
+// Disabled submenu trigger
+<DropdownMenuSubTrigger disabled>
+  Advanced Options (Pro Only)
+</DropdownMenuSubTrigger>
+```

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

@@ -0,0 +1,74 @@
+# DropdownMenuSub
+
+**Type**: component
+
+Container for creating nested submenus Wraps a submenu trigger and content to create hierarchical menu structures. Enables multi-level navigation within dropdown menus. Use with DropdownMenuSubTrigger and DropdownMenuSubContent to build complex menu hierarchies with proper focus management and keyboard navigation.
+
+## JSX Usage
+
+```jsx
+import { DropdownMenuSub } from '@neynar/ui';
+
+<DropdownMenuSub
+  ...props={value}
+/>
+```
+
+## Component Props
+
+### ...props
+- **Type**: `unknown`
+- **Required**: Yes
+- **Description**: No description available
+
+## Examples
+
+### Example 1
+```tsx
+// Basic submenu structure
+<DropdownMenuSub>
+  <DropdownMenuSubTrigger>
+    <Share className="mr-2 h-4 w-4" />
+    Share Options
+  </DropdownMenuSubTrigger>
+  <DropdownMenuSubContent>
+    <DropdownMenuItem>Email Link</DropdownMenuItem>
+    <DropdownMenuItem>Copy to Clipboard</DropdownMenuItem>
+    <DropdownMenuItem>Generate QR Code</DropdownMenuItem>
+  </DropdownMenuSubContent>
+</DropdownMenuSub>
+```
+### Example 2
+```tsx
+// Controlled submenu with state management
+const [isShareOpen, setIsShareOpen] = useState(false);
+<DropdownMenuSub open={isShareOpen} onOpenChange={setIsShareOpen}>
+  <DropdownMenuSubTrigger>Share</DropdownMenuSubTrigger>
+  <DropdownMenuSubContent>
+    <DropdownMenuItem onSelect={() => handleShare('email')}>Email</DropdownMenuItem>
+    <DropdownMenuItem onSelect={() => handleShare('link')}>Copy Link</DropdownMenuItem>
+  </DropdownMenuSubContent>
+</DropdownMenuSub>
+```
+### Example 3
+```tsx
+// Complex nested menu structure
+<DropdownMenuContent>
+  <DropdownMenuItem>Edit</DropdownMenuItem>
+  <DropdownMenuSeparator />
+  <DropdownMenuSub>
+    <DropdownMenuSubTrigger>Export</DropdownMenuSubTrigger>
+    <DropdownMenuSubContent>
+      <DropdownMenuItem>Export as PDF</DropdownMenuItem>
+      <DropdownMenuItem>Export as PNG</DropdownMenuItem>
+      <DropdownMenuSub>
+        <DropdownMenuSubTrigger>Advanced Export</DropdownMenuSubTrigger>
+        <DropdownMenuSubContent>
+          <DropdownMenuItem>Custom Resolution</DropdownMenuItem>
+          <DropdownMenuItem>Batch Export</DropdownMenuItem>
+        </DropdownMenuSubContent>
+      </DropdownMenuSub>
+    </DropdownMenuSubContent>
+  </DropdownMenuSub>
+</DropdownMenuContent>
+```

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

@@ -0,0 +1,48 @@
+# DropdownMenuTrigger
+
+**Type**: component
+
+The element that triggers the dropdown menu Renders the interactive element that opens and closes the dropdown menu. Typically wraps a button or other interactive element using the asChild prop. Automatically receives proper ARIA attributes and keyboard event handlers.
+
+## JSX Usage
+
+```jsx
+import { DropdownMenuTrigger } from '@neynar/ui';
+
+<DropdownMenuTrigger
+  asChild={true}
+>
+  {/* Your content here */}
+</DropdownMenuTrigger>
+```
+
+## Component Props
+
+### asChild
+- **Type**: `boolean`
+- **Required**: No
+- **Description**: Merge props onto the immediate child instead of rendering a wrapper element
+
+### children
+- **Type**: `React.ReactNode`
+- **Required**: No
+- **Description**: No description available
+
+## Examples
+
+### Example 1
+```tsx
+// Basic trigger with button
+<DropdownMenuTrigger asChild>
+  <Button variant="outline">Open Menu</Button>
+</DropdownMenuTrigger>
+```
+### Example 2
+```tsx
+// Icon button trigger
+<DropdownMenuTrigger asChild>
+  <Button variant="ghost" size="icon" aria-label="More options">
+    <MoreVertical className="h-4 w-4" />
+  </Button>
+</DropdownMenuTrigger>
+```