@neynar/ui 0.2.1 → 0.3.0

package/llm-docs/drawer.llm.md

@@ -1,194 +0,0 @@
-# Drawer
-
-**Type**: component
-
-Drawer - Mobile-optimized sliding panel component A flexible drawer component built on Vaul that creates sliding panel interfaces from screen edges. Designed primarily for mobile experiences with touch gestures, swipe-to-dismiss functionality, and natural drag interactions. Supports multiple directions (top, bottom, left, right) with snap points and responsive behavior. Built on Vaul library which provides excellent performance, accessibility, and natural touch interactions. The drawer automatically handles focus management, scroll locking, and ARIA attributes for screen readers.
-
-## JSX Usage
-
-```jsx
-import { Drawer } from '@neynar/ui';
-
-<Drawer
-  defaultOpen={true}
-  open={true}
-  onOpenChange={handleOpenChange}
-  modal={true}
-  container={value}
-  direction={value}
-  onAnimationEnd={handleAnimationEnd}
-  dismissible={true}
-  handleOnly={true}
-  repositionInputs={true}
-  snapPoints={[]}
-  activeSnapPoint={0}
-  setActiveSnapPoint={() => {}}
-  fadeFromIndex={0}
-  snapToSequentialPoint={true}
->
-  {/* Your content here */}
-</Drawer>
-```
-
-## Component Props
-
-### defaultOpen
-- **Type**: `boolean`
-- **Required**: No
-- **Description**: No description available
-
-### open
-- **Type**: `boolean`
-- **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
-
-### container
-- **Type**: `HTMLElement`
-- **Required**: No
-- **Description**: No description available
-
-### direction
-- **Type**: `"top" | "bottom" | "left" | "right"`
-- **Required**: No
-- **Description**: No description available
-
-### onAnimationEnd
-- **Type**: `(open: boolean) => void`
-- **Required**: No
-- **Description**: No description available
-
-### dismissible
-- **Type**: `boolean`
-- **Required**: No
-- **Description**: No description available
-
-### handleOnly
-- **Type**: `boolean`
-- **Required**: No
-- **Description**: No description available
-
-### repositionInputs
-- **Type**: `boolean`
-- **Required**: No
-- **Description**: No description available
-
-### snapPoints
-- **Type**: `(number | string)[]`
-- **Required**: No
-- **Description**: No description available
-
-### activeSnapPoint
-- **Type**: `number`
-- **Required**: No
-- **Description**: No description available
-
-### setActiveSnapPoint
-- **Type**: `(snapPoint: number) => void`
-- **Required**: No
-- **Description**: No description available
-
-### fadeFromIndex
-- **Type**: `number`
-- **Required**: No
-- **Description**: No description available
-
-### snapToSequentialPoint
-- **Type**: `boolean`
-- **Required**: No
-- **Description**: No description available
-
-### children
-- **Type**: `React.ReactNode`
-- **Required**: No
-- **Description**: No description available
-
-## Examples
-
-### Example 1
-```tsx
-// Basic drawer with trigger and content
-<Drawer>
-  <DrawerTrigger asChild>
-    <Button>Open Settings</Button>
-  </DrawerTrigger>
-  <DrawerContent>
-    <DrawerHeader>
-      <DrawerTitle>Settings</DrawerTitle>
-      <DrawerDescription>
-        Adjust your preferences below
-      </DrawerDescription>
-    </DrawerHeader>
-    <div className="p-4">
-      <p>Content goes here</p>
-    </div>
-    <DrawerFooter>
-      <Button>Save</Button>
-      <DrawerClose asChild>
-        <Button variant="outline">Cancel</Button>
-      </DrawerClose>
-    </DrawerFooter>
-  </DrawerContent>
-</Drawer>
-```
-### Example 2
-```tsx
-// Controlled drawer with state management
-const [open, setOpen] = useState(false)
-<Drawer open={open} onOpenChange={setOpen}>
-  <DrawerContent>
-    <DrawerHeader>
-      <DrawerTitle>Controlled Drawer</DrawerTitle>
-    </DrawerHeader>
-    <div className="p-4">
-      <Button onClick={() => setOpen(false)}>Close Programmatically</Button>
-    </div>
-  </DrawerContent>
-</Drawer>
-```
-### Example 3
-```tsx
-// Drawer with snap points for multiple heights
-<Drawer snapPoints={[0.4, 0.8]} fadeFromIndex={0}>
-  <DrawerTrigger asChild>
-    <Button>Open with Snap Points</Button>
-  </DrawerTrigger>
-  <DrawerContent>
-    <DrawerHeader>
-      <DrawerTitle>Expandable Drawer</DrawerTitle>
-      <DrawerDescription>
-        Drag to resize between 40% and 80% heights
-      </DrawerDescription>
-    </DrawerHeader>
-    <div className="flex-1 p-4">
-      <p>Content that can be viewed at different heights</p>
-    </div>
-  </DrawerContent>
-</Drawer>
-```
-### Example 4
-```tsx
-// Side drawer from left or right
-<Drawer direction="right">
-  <DrawerTrigger asChild>
-    <Button>Open Side Panel</Button>
-  </DrawerTrigger>
-  <DrawerContent>
-    <DrawerHeader>
-      <DrawerTitle>Side Navigation</DrawerTitle>
-    </DrawerHeader>
-    <div className="flex-1 p-4">
-      <nav>Navigation items here</nav>
-    </div>
-  </DrawerContent>
-</Drawer>
-```

package/llm-docs/dropdown-menu-checkbox-item.llm.md

@@ -1,111 +0,0 @@
-# DropdownMenuCheckboxItem
-
-**Type**: component
-
-A checkable menu item with visual state indication Displays a checkbox that can be toggled on/off. The checked state is visually indicated with a checkmark icon. Supports indeterminate state for partial selections. Ideal for menu options that represent toggleable settings, features, or multi-selection scenarios.
-
-## JSX Usage
-
-```jsx
-import { DropdownMenuCheckboxItem } from '@neynar/ui';
-
-<DropdownMenuCheckboxItem
-  checked={value}
-  onCheckedChange={handleCheckedChange}
-  disabled={true}
-  onSelect={handleSelect}
-  textValue="value"
-  inset={true}
-  className="value"
->
-  {/* Your content here */}
-</DropdownMenuCheckboxItem>
-```
-
-## Component Props
-
-### checked
-- **Type**: `boolean | "indeterminate"`
-- **Required**: No
-- **Description**: The checked state of the checkbox item (boolean or "indeterminate")
-
-### onCheckedChange
-- **Type**: `(checked: boolean) => void`
-- **Required**: No
-- **Description**: Callback fired when the checked state changes
-
-### disabled
-- **Type**: `boolean`
-- **Required**: No
-- **Description**: Whether the item is disabled and cannot be interacted with
-
-### 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 checkbox item with state
-const [showSidebar, setShowSidebar] = useState(true);
-<DropdownMenuCheckboxItem
-  checked={showSidebar}
-  onCheckedChange={setShowSidebar}
->
-  <Sidebar className="mr-2 h-4 w-4" />
-  Show Sidebar
-</DropdownMenuCheckboxItem>
-```
-### Example 2
-```tsx
-// Multiple checkbox items for feature toggles
-const [features, setFeatures] = useState({
-  notifications: true,
-  autoSave: false,
-  darkMode: true
-});
-<DropdownMenuCheckboxItem
-  checked={features.notifications}
-  onCheckedChange={(checked) => setFeatures(prev => ({ ...prev, notifications: checked }))}
->
-  Enable Notifications
-</DropdownMenuCheckboxItem>
-<DropdownMenuCheckboxItem
-  checked={features.autoSave}
-  onCheckedChange={(checked) => setFeatures(prev => ({ ...prev, autoSave: checked }))}
->
-  Auto-save Changes
-</DropdownMenuCheckboxItem>
-```
-### Example 3
-```tsx
-// Indeterminate state for partial selections
-<DropdownMenuCheckboxItem
-  checked="indeterminate"
-  onCheckedChange={handleSelectAll}
->
-  Select All Items (Some selected)
-</DropdownMenuCheckboxItem>
-```

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

@@ -1,109 +0,0 @@
-# DropdownMenuContent
-
-**Type**: component
-
-The content container for dropdown menu items Contains all menu items and handles positioning relative to the trigger. Automatically portals content to avoid z-index issues and includes sophisticated collision detection to keep the menu visible within viewport boundaries.
-
-## JSX Usage
-
-```jsx
-import { DropdownMenuContent } from '@neynar/ui';
-
-<DropdownMenuContent
-  asChild={true}
-  loop={true}
-  side={value}
-  sideOffset={0}
-  align={value}
-  alignOffset={0}
-  avoidCollisions={true}
-  sticky={value}
-  hideWhenDetached={true}
-  className="value"
->
-  {/* Your content here */}
-</DropdownMenuContent>
-```
-
-## Component Props
-
-### asChild
-- **Type**: `boolean`
-- **Required**: No
-- **Description**: No description available
-
-### loop
-- **Type**: `boolean`
-- **Required**: No
-- **Description**: When true, keyboard navigation will loop from last to first item
-
-### side
-- **Type**: `"top" | "right" | "bottom" | "left"`
-- **Required**: No
-- **Description**: The preferred side of the trigger to render against
-
-### sideOffset
-- **Type**: `number`
-- **Required**: No
-- **Description**: Distance in pixels from the trigger
-
-### align
-- **Type**: `"start" | "center" | "end"`
-- **Required**: No
-- **Description**: The preferred alignment against the trigger
-
-### alignOffset
-- **Type**: `number`
-- **Required**: No
-- **Description**: Distance in pixels from the align point
-
-### avoidCollisions
-- **Type**: `boolean`
-- **Required**: No
-- **Description**: Whether to avoid collisions with viewport boundaries
-
-### sticky
-- **Type**: `"partial" | "always"`
-- **Required**: No
-- **Description**: Element positioning behavior relative to the viewport
-
-### hideWhenDetached
-- **Type**: `boolean`
-- **Required**: No
-- **Description**: Whether to hide the content when the reference element is fully occluded
-
-### className
-- **Type**: `string`
-- **Required**: No
-- **Description**: No description available
-
-### children
-- **Type**: `React.ReactNode`
-- **Required**: No
-- **Description**: No description available
-
-## Examples
-
-### Example 1
-```tsx
-// Basic content with default positioning
-<DropdownMenuContent>
-  <DropdownMenuItem>Profile</DropdownMenuItem>
-  <DropdownMenuItem>Settings</DropdownMenuItem>
-</DropdownMenuContent>
-```
-### Example 2
-```tsx
-// Content with custom alignment and offset
-<DropdownMenuContent align="end" sideOffset={8}>
-  <DropdownMenuItem>Edit</DropdownMenuItem>
-  <DropdownMenuItem variant="destructive">Delete</DropdownMenuItem>
-</DropdownMenuContent>
-```
-### Example 3
-```tsx
-// Content with collision avoidance disabled
-<DropdownMenuContent avoidCollisions={false} side="top">
-  <DropdownMenuItem>Always above trigger</DropdownMenuItem>
-</DropdownMenuContent>
-```

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

@@ -1,38 +0,0 @@
-# DropdownMenuGroup
-
-**Type**: component
-
-Groups related dropdown menu items together Used to create logical groupings of menu items, typically separated by DropdownMenuSeparator components. Helps with semantic organization and improves accessibility by providing proper group semantics to screen readers.
-
-## JSX Usage
-
-```jsx
-import { DropdownMenuGroup } from '@neynar/ui';
-
-<DropdownMenuGroup
-  ...props={value}
-/>
-```
-
-## Component Props
-
-### ...props
-- **Type**: `unknown`
-- **Required**: Yes
-- **Description**: No description available
-
-## Examples
-
-```tsx
-<DropdownMenuContent>
-  <DropdownMenuGroup>
-    <DropdownMenuItem>Profile</DropdownMenuItem>
-    <DropdownMenuItem>Account Settings</DropdownMenuItem>
-  </DropdownMenuGroup>
-  <DropdownMenuSeparator />
-  <DropdownMenuGroup>
-    <DropdownMenuItem>Help</DropdownMenuItem>
-    <DropdownMenuItem>Support</DropdownMenuItem>
-  </DropdownMenuGroup>
-</DropdownMenuContent>
-```

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

@@ -1,94 +0,0 @@
-# DropdownMenuItem
-
-**Type**: component
-
-A single interactive item in the dropdown menu Renders a clickable menu item with proper focus management and keyboard navigation. Supports different visual variants for semantic meaning (e.g., destructive actions). Includes built-in styling for icons, disabled states, and focus indicators.
-
-## JSX Usage
-
-```jsx
-import { DropdownMenuItem } from '@neynar/ui';
-
-<DropdownMenuItem
-  disabled={true}
-  onSelect={handleSelect}
-  textValue="value"
-  inset={true}
-  variant={value}
-  className="value"
->
-  {/* Your content here */}
-</DropdownMenuItem>
-```
-
-## Component Props
-
-### 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
-
-### variant
-- **Type**: `"default" | "destructive"`
-- **Required**: No
-- **Description**: Visual variant of the menu item for semantic distinction
-
-### className
-- **Type**: `string`
-- **Required**: No
-- **Description**: No description available
-
-### children
-- **Type**: `React.ReactNode`
-- **Required**: No
-- **Description**: No description available
-
-## Examples
-
-### Example 1
-```tsx
-// Basic menu item with click handler
-<DropdownMenuItem onSelect={() => console.log('Profile clicked')}>
-  <User className="mr-2 h-4 w-4" />
-  Profile
-</DropdownMenuItem>
-```
-### Example 2
-```tsx
-// Destructive action item
-<DropdownMenuItem variant="destructive" onSelect={handleDelete}>
-  <Trash className="mr-2 h-4 w-4" />
-  Delete Account
-</DropdownMenuItem>
-```
-### Example 3
-```tsx
-// Disabled item
-<DropdownMenuItem disabled>
-  <Settings className="mr-2 h-4 w-4" />
-  Settings (Coming Soon)
-</DropdownMenuItem>
-```
-### Example 4
-```tsx
-// Item with keyboard shortcut
-<DropdownMenuItem onSelect={handleSave}>
-  Save Document
-  <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
-</DropdownMenuItem>
-```

package/llm-docs/dropdown-menu-label.llm.md

@@ -1,66 +0,0 @@
-# DropdownMenuLabel
-
-**Type**: component
-
-A non-interactive label for grouping and organizing menu items Used to provide semantic headers for groups of related menu items. Labels are not focusable and serve as visual and accessibility landmarks within the menu structure. Helps users understand the organization of menu options.
-
-## JSX Usage
-
-```jsx
-import { DropdownMenuLabel } from '@neynar/ui';
-
-<DropdownMenuLabel
-  className={value}
-  inset={value}
-  ...props={value}
-/>
-```
-
-## Component Props
-
-### className
-- **Type**: `unknown`
-- **Required**: Yes
-- **Description**: No description available
-
-### inset
-- **Type**: `unknown`
-- **Required**: Yes
-- **Description**: No description available
-
-### ...props
-- **Type**: `unknown`
-- **Required**: Yes
-- **Description**: No description available
-
-## Examples
-
-### Example 1
-```tsx
-// Basic label for menu section
-<DropdownMenuContent>
-  <DropdownMenuLabel>Account Actions</DropdownMenuLabel>
-  <DropdownMenuSeparator />
-  <DropdownMenuItem>View Profile</DropdownMenuItem>
-  <DropdownMenuItem>Account Settings</DropdownMenuItem>
-  <DropdownMenuSeparator />
-  <DropdownMenuLabel>Preferences</DropdownMenuLabel>
-  <DropdownMenuItem>Theme Settings</DropdownMenuItem>
-  <DropdownMenuItem>Notification Settings</DropdownMenuItem>
-</DropdownMenuContent>
-```
-### Example 2
-```tsx
-// Label with inset alignment
-<DropdownMenuContent>
-  <DropdownMenuLabel inset>File Operations</DropdownMenuLabel>
-  <DropdownMenuItem>
-    <Download className="mr-2 h-4 w-4" />
-    Download
-  </DropdownMenuItem>
-  <DropdownMenuItem>
-    <Upload className="mr-2 h-4 w-4" />
-    Upload
-  </DropdownMenuItem>
-</DropdownMenuContent>
-```

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

@@ -1,32 +0,0 @@
-# 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>
-```