@neynar/ui 0.2.0 → 0.3.0

package/llm-docs/command.llm.md

@@ -1,147 +0,0 @@
-# Command
-
-**Type**: component
-
-Command - A fast, composable command menu for search and navigation Built on the cmdk primitive, this component provides a powerful command palette interface with search, filtering, and keyboard navigation. Perfect for creating search interfaces, command palettes, and action menus with full accessibility support. Features advanced filtering with fuzzy search, keyboard shortcuts, nested navigation, asynchronous loading states, and comprehensive accessibility patterns.
-
-## JSX Usage
-
-```jsx
-import { Command } from '@neynar/ui';
-
-<Command
-  label="value"
-  shouldFilter={true}
-  filter={[]}
-  value="value"
-  onValueChange={handleValueChange}
-  loop={true}
-  disablePointerSelection={true}
-  vimBindings={true}
-  className="value"
->
-  {/* Your content here */}
-</Command>
-```
-
-## Component Props
-
-### label
-- **Type**: `string`
-- **Required**: No
-- **Description**: Accessibility label for screen readers and assistive technology
-
-### shouldFilter
-- **Type**: `boolean`
-- **Required**: No
-- **Description**: Controls automatic filtering and sorting
-
-### filter
-- **Type**: `(value: string, search: string, keywords?: string[]) => number`
-- **Required**: No
-- **Description**: Custom filter function for ranking items based on search
-
-### value
-- **Type**: `string`
-- **Required**: No
-- **Description**: Currently selected item value for controlled usage
-
-### onValueChange
-- **Type**: `(value: string) => void`
-- **Required**: No
-- **Description**: Callback fired when selected item changes
-
-### loop
-- **Type**: `boolean`
-- **Required**: No
-- **Description**: Enables circular navigation through items
-
-### disablePointerSelection
-- **Type**: `boolean`
-- **Required**: No
-- **Description**: Prevents mouse selection behavior
-
-### vimBindings
-- **Type**: `boolean`
-- **Required**: No
-- **Description**: Enables Vim-style navigation keybindings
-
-### className
-- **Type**: `string`
-- **Required**: No
-- **Description**: Additional CSS classes
-
-### children
-- **Type**: `React.ReactNode`
-- **Required**: No
-- **Description**: No description available
-
-## Examples
-
-### Example 1
-```tsx
-// Basic command menu
-<Command label="Main Menu">
-  <CommandInput placeholder="Type a command or search..." />
-  <CommandList>
-    <CommandEmpty>No results found.</CommandEmpty>
-    <CommandGroup heading="Suggestions">
-      <CommandItem>Calendar</CommandItem>
-      <CommandItem>Search Emoji</CommandItem>
-      <CommandItem>Calculator</CommandItem>
-    </CommandGroup>
-  </CommandList>
-</Command>
-```
-### Example 2
-```tsx
-// Controlled command menu with custom filtering
-const [value, setValue] = useState('');
-const [search, setSearch] = useState('');
-<Command
-  value={value}
-  onValueChange={setValue}
-  filter={(value, search, keywords) => {
-    const extended = value + ' ' + (keywords?.join(' ') || '');
-    return extended.toLowerCase().includes(search.toLowerCase()) ? 1 : 0;
-  }}
-  loop
->
-  <CommandInput
-    value={search}
-    onValueChange={setSearch}
-    placeholder="Search..."
-  />
-  <CommandList>
-    <CommandItem value="apple" keywords={['fruit', 'red']}>
-      Apple
-    </CommandItem>
-  </CommandList>
-</Command>
-```
-### Example 3
-```tsx
-// Command dialog with keyboard shortcut
-const [open, setOpen] = useState(false);
-useEffect(() => {
-  const down = (e: KeyboardEvent) => {
-    if (e.key === "k" && (e.metaKey || e.ctrlKey)) {
-      e.preventDefault();
-      setOpen((open) => !open);
-    }
-  };
-  document.addEventListener("keydown", down);
-  return () => document.removeEventListener("keydown", down);
-}, []);
-<CommandDialog open={open} onOpenChange={setOpen}>
-  <CommandInput placeholder="Type a command..." />
-  <CommandList>
-    <CommandGroup heading="Actions">
-      <CommandItem onSelect={() => console.log("New file")}>
-        New File
-        <CommandShortcut>⌘N</CommandShortcut>
-      </CommandItem>
-    </CommandGroup>
-  </CommandList>
-</CommandDialog>
-```

package/llm-docs/container.llm.md

@@ -1,236 +0,0 @@
-# Container
-
-**Type**: component
-
-Container - A responsive layout wrapper with flexible width constraints and consistent padding A fundamental layout component built with class-variance-authority (CVA) that provides consistent horizontal centering, responsive padding, and flexible max-width constraints. Designed to be the primary content wrapper for pages, sections, and layout regions throughout the application. The component automatically applies responsive horizontal padding (px-4 on mobile, px-6 on small screens, px-8 on large screens) and centers content using mx-auto. Five size variants accommodate different content types from optimal reading widths to full-width layouts. Built following shadcn/ui and Tailwind UI patterns for maximum compatibility and consistency with modern React applications and design systems.
-
-## JSX Usage
-
-```jsx
-import { Container } from '@neynar/ui';
-
-<Container
-  size={value}
-  className="value"
-  id="value"
-  role="value"
-  "aria-label"="value"
-  "aria-labelledby"="value"
-  "aria-describedby"="value"
-  "aria-live"={value}
-  tabIndex={0}
-  onClick={handleClick}
-  onFocus={handleFocus}
-  onBlur={handleBlur}
-  onKeyDown={handleKeyDown}
-  onMouseEnter={handleMouseEnter}
-  onMouseLeave={handleMouseLeave}
->
-  {/* Your content here */}
-</Container>
-```
-
-## Component Props
-
-### size
-- **Type**: `"sm" | "md" | "lg" | "xl" | "full"`
-- **Required**: No
-- **Description**: No description available
-
-### children
-- **Type**: `React.ReactNode`
-- **Required**: No
-- **Description**: No description available
-
-### className
-- **Type**: `string`
-- **Required**: No
-- **Description**: No description available
-
-### id
-- **Type**: `string`
-- **Required**: No
-- **Description**: No description available
-
-### role
-- **Type**: `string`
-- **Required**: No
-- **Description**: No description available
-
-### "aria-label"
-- **Type**: `string`
-- **Required**: No
-- **Description**: No description available
-
-### "aria-labelledby"
-- **Type**: `string`
-- **Required**: No
-- **Description**: No description available
-
-### "aria-describedby"
-- **Type**: `string`
-- **Required**: No
-- **Description**: No description available
-
-### "aria-live"
-- **Type**: `"off" | "polite" | "assertive"`
-- **Required**: No
-- **Description**: No description available
-
-### tabIndex
-- **Type**: `number`
-- **Required**: No
-- **Description**: No description available
-
-### onClick
-- **Type**: `React.MouseEventHandler<HTMLDivElement>`
-- **Required**: No
-- **Description**: No description available
-
-### onFocus
-- **Type**: `React.FocusEventHandler<HTMLDivElement>`
-- **Required**: No
-- **Description**: No description available
-
-### onBlur
-- **Type**: `React.FocusEventHandler<HTMLDivElement>`
-- **Required**: No
-- **Description**: No description available
-
-### onKeyDown
-- **Type**: `React.KeyboardEventHandler<HTMLDivElement>`
-- **Required**: No
-- **Description**: No description available
-
-### onMouseEnter
-- **Type**: `React.MouseEventHandler<HTMLDivElement>`
-- **Required**: No
-- **Description**: No description available
-
-### onMouseLeave
-- **Type**: `React.MouseEventHandler<HTMLDivElement>`
-- **Required**: No
-- **Description**: No description available
-
-## Examples
-
-### Example 1
-```tsx
-// Basic usage with default large size (80rem max-width)
-<Container>
-  <h1>Dashboard Overview</h1>
-  <p>Main application content with balanced width constraints</p>
-  <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-    <Card>Dashboard Widget</Card>
-    <Card>Analytics Panel</Card>
-    <Card>Recent Activity</Card>
-  </div>
-</Container>
-```
-### Example 2
-```tsx
-// Reading-optimized container for articles and blog posts
-<Container size="sm">
-  <article className="prose prose-lg max-w-none">
-    <h1>The Future of Web Development</h1>
-    <p>
-      Long-form content with line lengths optimized for readability
-      and comfortable reading experience across all device sizes.
-    </p>
-    <p>
-      The small container (48rem) provides the ideal measure for
-      typography-focused content and sustained reading.
-    </p>
-  </article>
-</Container>
-```
-### Example 3
-```tsx
-// Medium container for forms and structured layouts
-<Container size="md">
-  <div className="space-y-8">
-    <div className="text-center">
-      <h2>Account Settings</h2>
-      <p>Manage your account preferences and profile information</p>
-    </div>
-    <form className="space-y-6">
-      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-        <Input label="First Name" />
-        <Input label="Last Name" />
-      </div>
-      <Input label="Email Address" type="email" />
-      <Button type="submit" className="w-full">Update Profile</Button>
-    </form>
-  </div>
-</Container>
-```
-### Example 4
-```tsx
-// Full-width container for complex layouts and hero sections
-<Container size="full">
-  <div className="bg-gradient-to-r from-blue-600 to-purple-600 text-white py-20">
-    <div className="text-center space-y-6">
-      <h1 className="text-4xl md:text-6xl font-bold">
-        Welcome to Our Platform
-      </h1>
-      <p className="text-xl md:text-2xl opacity-90 max-w-3xl mx-auto">
-        Edge-to-edge hero section with full viewport width
-      </p>
-      <Button size="lg" variant="secondary">
-        Get Started
-      </Button>
-    </div>
-  </div>
-</Container>
-```
-### Example 5
-```tsx
-// Extra-large container for data-heavy interfaces
-<Container size="xl" className="py-8">
-  <div className="space-y-6">
-    <div className="flex justify-between items-center">
-      <h1 className="text-3xl font-bold">Analytics Dashboard</h1>
-      <Button variant="outline">Export Data</Button>
-    </div>
-    // Wide data table that needs maximum available width
-    <DataTable
-      columns={analyticsColumns}
-      data={analyticsData}
-      className="min-w-[1200px]"
-    />
-    <div className="grid grid-cols-1 lg:grid-cols-4 gap-6">
-      <MetricCard />
-      <MetricCard />
-      <MetricCard />
-      <MetricCard />
-    </div>
-  </div>
-</Container>
-```
-### Example 6
-```tsx
-// Advanced usage with custom styling and ARIA landmarks
-<Container
-  size="lg"
-  className="min-h-screen py-12 bg-gray-50 dark:bg-gray-900"
-  role="main"
-  aria-label="Application content"
->
-  <div className="space-y-10">
-    <header className="text-center space-y-4">
-      <Badge variant="secondary">New Feature</Badge>
-      <h1 className="text-4xl font-bold tracking-tight">
-        Product Announcement
-      </h1>
-      <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
-        Discover the latest improvements to our platform
-      </p>
-    </header>
-    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
-      <FeatureCard />
-      <FeatureCard />
-      <FeatureCard />
-    </div>
-  </div>
-</Container>
-```

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

@@ -1,97 +0,0 @@
-# ContextMenuCheckboxItem
-
-**Type**: component
-
-ContextMenuCheckboxItem - A menu item with checkbox functionality Menu items that can be toggled on/off, useful for binary settings or options. Displays a check mark when selected and supports controlled state management with indeterminate state for partially selected collections.
-
-## JSX Usage
-
-```jsx
-import { ContextMenuCheckboxItem } from '@neynar/ui';
-
-<ContextMenuCheckboxItem
-  asChild={true}
-  checked={value}
-  onCheckedChange={handleCheckedChange}
-  disabled={true}
-  onSelect={handleSelect}
-  textValue="value"
-  className="value"
->
-  {/* Your content here */}
-</ContextMenuCheckboxItem>
-```
-
-## Component Props
-
-### asChild
-- **Type**: `boolean`
-- **Required**: No
-- **Description**: Merges props with child element instead of rendering wrapper
-
-### checked
-- **Type**: `boolean | "indeterminate"`
-- **Required**: No
-- **Description**: The checked state (true, false, 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 non-interactive
-
-### onSelect
-- **Type**: `(event: Event) => void`
-- **Required**: No
-- **Description**: Callback fired when the item is selected (before onCheckedChange)
-
-### 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 checkbox item (typically text)
-
-## Examples
-
-### Example 1
-```tsx
-const [showGrid, setShowGrid] = useState(true)
-<ContextMenuCheckboxItem
-  checked={showGrid}
-  onCheckedChange={setShowGrid}
->
-  Show Grid
-</ContextMenuCheckboxItem>
-```
-### Example 2
-```tsx
-// With indeterminate state
-const [selectedItems, setSelectedItems] = useState(['item1'])
-const allItems = ['item1', 'item2', 'item3']
-const checkedState = selectedItems.length === 0
-  ? false
-  : selectedItems.length === allItems.length
-    ? true
-    : "indeterminate"
-<ContextMenuCheckboxItem
-  checked={checkedState}
-  onCheckedChange={(checked) =>
-    setSelectedItems(checked ? allItems : [])
-  }
->
-  Select All
-</ContextMenuCheckboxItem>
-```

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

@@ -1,91 +0,0 @@
-# ContextMenuContent
-
-**Type**: component
-
-ContextMenuContent - The container for context menu items Contains all menu items, separators, labels, and sub-menus. Automatically positioned relative to the trigger point with collision detection and smooth animations. Renders in a portal by default for proper layering.
-
-## JSX Usage
-
-```jsx
-import { ContextMenuContent } from '@neynar/ui';
-
-<ContextMenuContent
-  asChild={true}
-  loop={true}
-  onCloseAutoFocus={handleCloseAutoFocus}
-  onEscapeKeyDown={handleEscapeKeyDown}
-  avoidCollisions={true}
-  sideOffset={0}
-  className="value"
->
-  {/* Your content here */}
-</ContextMenuContent>
-```
-
-## 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 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 cursor/trigger point
-
-### className
-- **Type**: `string`
-- **Required**: No
-- **Description**: Additional CSS classes for styling
-
-### children
-- **Type**: `React.ReactNode`
-- **Required**: Yes
-- **Description**: Menu items, labels, separators, and sub-menus to display
-
-## Examples
-
-### Example 1
-```tsx
-<ContextMenuContent className="w-56">
-  <ContextMenuLabel>Actions</ContextMenuLabel>
-  <ContextMenuSeparator />
-  <ContextMenuItem>Copy</ContextMenuItem>
-  <ContextMenuItem>Paste</ContextMenuItem>
-</ContextMenuContent>
-```
-### Example 2
-```tsx
-// With event handlers and positioning
-<ContextMenuContent
-  onCloseAutoFocus={(e) => e.preventDefault()}
-  onEscapeKeyDown={(e) => console.log('Escape pressed')}
-  avoidCollisions={true}
-  sideOffset={4}
-  loop={true}
->
-  <ContextMenuItem>Item 1</ContextMenuItem>
-  <ContextMenuItem>Item 2</ContextMenuItem>
-</ContextMenuContent>
-```

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

@@ -1,61 +0,0 @@
-# ContextMenuGroup
-
-**Type**: component
-
-ContextMenuGroup - Logical grouping for menu items Groups related menu items together for better organization and accessibility. Provides semantic structure without visual changes but improves screen reader navigation by grouping related actions.
-
-## JSX Usage
-
-```jsx
-import { ContextMenuGroup } from '@neynar/ui';
-
-<ContextMenuGroup
-  asChild={true}
-  className="value"
->
-  {/* Your content here */}
-</ContextMenuGroup>
-```
-
-## Component Props
-
-### asChild
-- **Type**: `boolean`
-- **Required**: No
-- **Description**: Merges props with child element instead of rendering wrapper
-
-### className
-- **Type**: `string`
-- **Required**: No
-- **Description**: No description available
-
-### children
-- **Type**: `React.ReactNode`
-- **Required**: Yes
-- **Description**: The menu items to group together logically
-
-## Examples
-
-### Example 1
-```tsx
-<ContextMenuGroup>
-  <ContextMenuItem>Copy</ContextMenuItem>
-  <ContextMenuItem>Cut</ContextMenuItem>
-  <ContextMenuItem>Paste</ContextMenuItem>
-</ContextMenuGroup>
-```
-### Example 2
-```tsx
-// Multiple groups with separators
-<ContextMenuContent>
-  <ContextMenuGroup>
-    <ContextMenuItem>Undo</ContextMenuItem>
-    <ContextMenuItem>Redo</ContextMenuItem>
-  </ContextMenuGroup>
-  <ContextMenuSeparator />
-  <ContextMenuGroup>
-    <ContextMenuItem>Copy</ContextMenuItem>
-    <ContextMenuItem>Paste</ContextMenuItem>
-  </ContextMenuGroup>
-</ContextMenuContent>
-```