@neynar/ui 0.3.0 → 0.4.0

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

package/.llm/date-picker.llm.md

@@ -0,0 +1,90 @@
+# DatePicker
+
+**Type**: component
+
+DatePicker - A comprehensive date selection component with popover calendar interface A polished date selection component that combines an accessible trigger button with a full-featured calendar popover. Built on Radix UI Popover and Calendar primitives with shadcn/ui styling, providing intuitive date selection with proper accessibility, keyboard navigation, automatic positioning, and internationalization support. The component handles both controlled and uncontrolled usage patterns, integrates seamlessly with forms and validation systems, and provides consistent date formatting using date-fns. The popover automatically positions itself to stay within viewport bounds and includes smooth animations for a polished user experience.
+
+## JSX Usage
+
+```jsx
+import { DatePicker } from '@neynar/ui';
+
+<DatePicker
+  date={value}
+  onDateChange={handleDateChange}
+  placeholder="value"
+  disabled={true}
+  className="value"
+/>
+```
+
+## Component Props
+
+### date
+- **Type**: `Date`
+- **Required**: No
+- **Description**: No description available
+
+### onDateChange
+- **Type**: `(date: Date | undefined) => void`
+- **Required**: No
+- **Description**: No description available
+
+### placeholder
+- **Type**: `string`
+- **Required**: No
+- **Description**: No description available
+
+### disabled
+- **Type**: `boolean`
+- **Required**: No
+- **Description**: No description available
+
+### className
+- **Type**: `string`
+- **Required**: No
+- **Description**: No description available
+
+## Examples
+
+### Example 1
+```tsx
+// Basic controlled date picker
+const [date, setDate] = useState<Date>();
+<DatePicker
+  date={date}
+  onDateChange={setDate}
+  placeholder="Select date"
+/>
+```
+### Example 2
+```tsx
+// Date picker for forms with validation
+const [birthDate, setBirthDate] = useState<Date>();
+<DatePicker
+  date={birthDate}
+  onDateChange={setBirthDate}
+  placeholder="Select birth date"
+  className="w-[280px]"
+  disabled={isSubmitting}
+/>
+```
+### Example 3
+```tsx
+// Date range start/end picker
+<div className="flex gap-2 items-center">
+  <DatePicker
+    date={startDate}
+    onDateChange={setStartDate}
+    placeholder="Start date"
+    className="w-[180px]"
+  />
+  <span>to</span>
+  <DatePicker
+    date={endDate}
+    onDateChange={setEndDate}
+    placeholder="End date"
+    className="w-[180px]"
+  />
+</div>
+```

package/.llm/dialog-close.llm.md

@@ -0,0 +1,61 @@
+# DialogClose
+
+**Type**: component
+
+DialogClose - A close button that dismisses the dialog Can be placed anywhere within DialogContent to provide a close action. Typically used for custom close buttons in addition to the default X button. Automatically closes the dialog when activated and returns focus to the trigger.
+
+## JSX Usage
+
+```jsx
+import { DialogClose } from '@neynar/ui';
+
+<DialogClose
+  asChild={true}
+  className="value"
+>
+  {/* Your content here */}
+</DialogClose>
+```
+
+## Component Props
+
+### 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
+<DialogClose asChild>
+  <Button variant="outline">Cancel</Button>
+</DialogClose>
+```
+### Example 2
+```tsx
+// Direct button without asChild
+<DialogClose className="close-button">
+  Close Dialog
+</DialogClose>
+```
+### Example 3
+```tsx
+// In footer with multiple actions
+<DialogFooter>
+  <DialogClose asChild>
+    <Button variant="outline">Cancel</Button>
+  </DialogClose>
+  <Button type="submit">Save</Button>
+</DialogFooter>
+```

package/.llm/dialog-content.llm.md

@@ -0,0 +1,128 @@
+# DialogContent
+
+**Type**: component
+
+DialogContent - The main content container for the dialog The primary container for dialog content that automatically includes the overlay and portal. Provides the visual dialog box with animations, positioning, and focus management. Includes a close button (X) by default which can be hidden using the showCloseButton prop.
+
+## JSX Usage
+
+```jsx
+import { DialogContent } from '@neynar/ui';
+
+<DialogContent
+  asChild={true}
+  forceMount={true}
+  onOpenAutoFocus={handleOpenAutoFocus}
+  onCloseAutoFocus={handleCloseAutoFocus}
+  onEscapeKeyDown={handleEscapeKeyDown}
+  onPointerDownOutside={handlePointerDownOutside}
+  onInteractOutside={handleInteractOutside}
+  showCloseButton={true}
+  className="value"
+>
+  {/* Your content here */}
+</DialogContent>
+```
+
+## Component Props
+
+### asChild
+- **Type**: `boolean`
+- **Required**: No
+- **Description**: No description available
+
+### forceMount
+- **Type**: `boolean`
+- **Required**: No
+- **Description**: No description available
+
+### onOpenAutoFocus
+- **Type**: `(event: Event) => void`
+- **Required**: No
+- **Description**: No description available
+
+### onCloseAutoFocus
+- **Type**: `(event: Event) => void`
+- **Required**: No
+- **Description**: No description available
+
+### onEscapeKeyDown
+- **Type**: `(event: KeyboardEvent) => void`
+- **Required**: No
+- **Description**: No description available
+
+### onPointerDownOutside
+- **Type**: `(event: PointerEvent) => void`
+- **Required**: No
+- **Description**: No description available
+
+### onInteractOutside
+- **Type**: `(
+    event: React.FocusEvent | MouseEvent | TouchEvent,
+  ) => void`
+- **Required**: No
+- **Description**: No description available
+
+### showCloseButton
+- **Type**: `boolean`
+- **Required**: No
+- **Description**: Whether to show the X close button in top-right corner (default: true)
+
+### className
+- **Type**: `string`
+- **Required**: No
+- **Description**: Additional CSS classes to apply to the content container
+
+### children
+- **Type**: `React.ReactNode`
+- **Required**: No
+- **Description**: Dialog content including header, body, and footer elements
+
+## Examples
+
+### Example 1
+```tsx
+// Standard content with header and footer
+<DialogContent>
+  <DialogHeader>
+    <DialogTitle>Dialog Title</DialogTitle>
+    <DialogDescription>
+      Detailed description of the dialog's purpose
+    </DialogDescription>
+  </DialogHeader>
+  <div className="py-4">
+    Main dialog content goes here
+  </div>
+  <DialogFooter>
+    <Button variant="outline">Cancel</Button>
+    <Button>Confirm</Button>
+  </DialogFooter>
+</DialogContent>
+```
+### Example 2
+```tsx
+// Custom sizing and scrollable content
+<DialogContent className="sm:max-w-[425px] max-h-[80vh] overflow-y-auto">
+  <DialogHeader>
+    <DialogTitle>Long Content</DialogTitle>
+  </DialogHeader>
+  <div className="space-y-4">
+    // Long scrollable content
+  </div>
+</DialogContent>
+```
+### Example 3
+```tsx
+// Without default close button
+<DialogContent showCloseButton={false}>
+  <DialogHeader>
+    <DialogTitle>Custom Close</DialogTitle>
+  </DialogHeader>
+  <div>Content without X button</div>
+  <DialogFooter>
+    <DialogClose asChild>
+      <Button>Close</Button>
+    </DialogClose>
+  </DialogFooter>
+</DialogContent>
+```

package/.llm/dialog-description.llm.md

@@ -0,0 +1,44 @@
+# DialogDescription
+
+**Type**: component
+
+DialogDescription - Supplementary description for the dialog Provides additional context or instructions for the dialog content. Helps users understand what action they're about to take.
+
+## JSX Usage
+
+```jsx
+import { DialogDescription } from '@neynar/ui';
+
+<DialogDescription
+  asChild={true}
+  className="value"
+>
+  {/* Your content here */}
+</DialogDescription>
+```
+
+## Component Props
+
+### 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
+
+```tsx
+<DialogDescription>
+  This action cannot be undone. This will permanently delete your
+  account and remove your data from our servers.
+</DialogDescription>
+```

package/.llm/dialog-footer.llm.md

@@ -0,0 +1,38 @@
+# DialogFooter
+
+**Type**: component
+
+DialogFooter - Container for dialog action buttons Typically contains action buttons like Save, Cancel, or Submit. Automatically handles responsive layout with proper button alignment.
+
+## JSX Usage
+
+```jsx
+import { DialogFooter } from '@neynar/ui';
+
+<DialogFooter
+  className="value"
+>
+  {/* Your content here */}
+</DialogFooter>
+```
+
+## Component Props
+
+### className
+- **Type**: `string`
+- **Required**: No
+- **Description**: No description available
+
+### children
+- **Type**: `React.ReactNode`
+- **Required**: No
+- **Description**: No description available
+
+## Examples
+
+```tsx
+<DialogFooter>
+  <Button variant="outline">Cancel</Button>
+  <Button type="submit">Save changes</Button>
+</DialogFooter>
+```

package/.llm/dialog-header.llm.md

@@ -0,0 +1,40 @@
+# DialogHeader
+
+**Type**: component
+
+DialogHeader - Container for dialog title and description Groups the dialog's title and description at the top of the dialog content. Provides consistent spacing and alignment for header elements.
+
+## JSX Usage
+
+```jsx
+import { DialogHeader } from '@neynar/ui';
+
+<DialogHeader
+  className="value"
+>
+  {/* Your content here */}
+</DialogHeader>
+```
+
+## Component Props
+
+### className
+- **Type**: `string`
+- **Required**: No
+- **Description**: No description available
+
+### children
+- **Type**: `React.ReactNode`
+- **Required**: No
+- **Description**: No description available
+
+## Examples
+
+```tsx
+<DialogHeader>
+  <DialogTitle>Edit profile</DialogTitle>
+  <DialogDescription>
+    Make changes to your profile here. Click save when you're done.
+  </DialogDescription>
+</DialogHeader>
+```