@neynar/ui 0.2.0 → 0.3.0

package/llm-docs/command-dialog.llm.md

@@ -1,112 +0,0 @@
-# CommandDialog
-
-**Type**: component
-
-CommandDialog - Modal dialog wrapper for command menu Presents the command menu in a modal dialog overlay, perfect for application-wide command palettes triggered by keyboard shortcuts like Cmd+K or Ctrl+K. Built on Radix UI Dialog with proper focus management, portal rendering, and accessibility. The dialog automatically handles focus trapping, scroll locking, and provides screen reader announcements. Use `container` prop to specify custom portal target.
-
-## JSX Usage
-
-```jsx
-import { CommandDialog } from '@neynar/ui';
-
-<CommandDialog
-  open={true}
-  onOpenChange={handleOpenChange}
-  title="value"
-  description="value"
-  showCloseButton={true}
-  container={value}
-  className="value"
->
-  {/* Your content here */}
-</CommandDialog>
-```
-
-## Component Props
-
-### open
-- **Type**: `boolean`
-- **Required**: No
-- **Description**: Controls dialog visibility state
-
-### onOpenChange
-- **Type**: `(open: boolean) => void`
-- **Required**: No
-- **Description**: Callback when dialog open state changes
-
-### title
-- **Type**: `string`
-- **Required**: No
-- **Description**: Screen reader accessible title
-
-### description
-- **Type**: `string`
-- **Required**: No
-- **Description**: Screen reader description
-
-### showCloseButton
-- **Type**: `boolean`
-- **Required**: No
-- **Description**: Whether to show the X close button
-
-### container
-- **Type**: `HTMLElement | null`
-- **Required**: No
-- **Description**: Custom portal container element for rendering
-
-### className
-- **Type**: `string`
-- **Required**: No
-- **Description**: Additional CSS classes for dialog content
-
-### children
-- **Type**: `React.ReactNode`
-- **Required**: No
-- **Description**: No description available
-
-## Examples
-
-### Example 1
-```tsx
-// Command palette 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>Create New File</CommandItem>
-      <CommandItem>Open Settings</CommandItem>
-    </CommandGroup>
-  </CommandList>
-</CommandDialog>
-```
-### Example 2
-```tsx
-// Custom portal container
-const containerRef = useRef<HTMLDivElement>(null);
-<>
-  <CommandDialog
-    open={open}
-    onOpenChange={setOpen}
-    container={containerRef.current}
-    title="Quick Actions"
-    description="Find and run commands quickly"
-  >
-    <CommandInput />
-    <CommandList>
-      <CommandItem>Action 1</CommandItem>
-    </CommandList>
-  </CommandDialog>
-  <div ref={containerRef} />
-</>
-```

package/llm-docs/command-empty.llm.md

@@ -1,63 +0,0 @@
-# CommandEmpty
-
-**Type**: component
-
-CommandEmpty - Empty state message for command menu Displays when no command items match the current search query. Can contain custom content beyond simple text messages. Automatically shows/hides based on filtered results and announces changes to screen readers. Supports dynamic content using the `useCommandState` hook to access current search term and create contextual empty messages.
-
-## JSX Usage
-
-```jsx
-import { CommandEmpty } from '@neynar/ui';
-
-<CommandEmpty
-  className="value"
->
-  {/* Your content here */}
-</CommandEmpty>
-```
-
-## Component Props
-
-### className
-- **Type**: `string`
-- **Required**: No
-- **Description**: Additional CSS classes
-
-### children
-- **Type**: `React.ReactNode`
-- **Required**: No
-- **Description**: No description available
-
-## Examples
-
-### Example 1
-```tsx
-<CommandList>
-  <CommandEmpty>No commands found.</CommandEmpty>
-</CommandList>
-```
-### Example 2
-```tsx
-// Custom empty state with icon and helpful text
-<CommandEmpty>
-  <div className="py-6 text-center">
-    <SearchIcon className="mx-auto h-10 w-10 text-muted-foreground/50" />
-    <h3 className="mt-2 text-sm font-medium">No results found</h3>
-    <p className="mt-1 text-sm text-muted-foreground">
-      Try adjusting your search terms.
-    </p>
-  </div>
-</CommandEmpty>
-```
-### Example 3
-```tsx
-// Dynamic empty message with search term
-function DynamicEmpty() {
-  const search = useCommandState((state) => state.search);
-  return (
-    <CommandEmpty>
-      {search ? `No results found for "${search}".` : 'Start typing to search...'}
-    </CommandEmpty>
-  );
-}
-```

package/llm-docs/command-group.llm.md

@@ -1,83 +0,0 @@
-# CommandGroup
-
-**Type**: component
-
-CommandGroup - Groups related command items under a heading Organizes command items into labeled sections with optional headings for better organization and navigation. Groups provide semantic structure for screen readers and can be hidden/shown based on whether they contain matching items. Groups automatically manage their visibility - if all contained items are filtered out, the entire group is hidden. Use `forceMount` to override this behavior.
-
-## JSX Usage
-
-```jsx
-import { CommandGroup } from '@neynar/ui';
-
-<CommandGroup
-  heading={value}
-  value="value"
-  forceMount={true}
-  className="value"
->
-  {/* Your content here */}
-</CommandGroup>
-```
-
-## Component Props
-
-### heading
-- **Type**: `React.ReactNode`
-- **Required**: No
-- **Description**: The group heading text or component displayed above items
-
-### value
-- **Type**: `string`
-- **Required**: No
-- **Description**: Group identifier for programmatic control
-
-### forceMount
-- **Type**: `boolean`
-- **Required**: No
-- **Description**: Whether to always render the group even when hidden
-
-### className
-- **Type**: `string`
-- **Required**: No
-- **Description**: Additional CSS classes
-
-### children
-- **Type**: `React.ReactNode`
-- **Required**: No
-- **Description**: No description available
-
-## Examples
-
-### Example 1
-```tsx
-<CommandGroup heading="Recent Files">
-  <CommandItem>document.pdf</CommandItem>
-  <CommandItem>presentation.pptx</CommandItem>
-</CommandGroup>
-<CommandGroup heading="Actions">
-  <CommandItem>New File</CommandItem>
-  <CommandItem>Open File</CommandItem>
-</CommandGroup>
-```
-### Example 2
-```tsx
-// Group with custom heading component
-<CommandGroup
-  heading={
-    <div className="flex items-center gap-2">
-      <FolderIcon className="h-4 w-4" />
-      <span>Projects</span>
-    </div>
-  }
->
-  <CommandItem>Project A</CommandItem>
-  <CommandItem>Project B</CommandItem>
-</CommandGroup>
-```
-### Example 3
-```tsx
-// Group that always shows even when filtered
-<CommandGroup heading="Important" forceMount>
-  <CommandItem>Critical Action</CommandItem>
-</CommandGroup>
-```

package/llm-docs/command-input.llm.md

@@ -1,82 +0,0 @@
-# CommandInput
-
-**Type**: component
-
-CommandInput - Search input for command menu filtering Provides a search input with search icon for filtering command menu items. Automatically filters items as the user types and triggers live region announcements for screen readers. Supports both controlled and uncontrolled usage patterns. The input integrates with the Command context to provide real-time filtering, search highlighting, and result announcements. Includes built-in search icon and proper focus management.
-
-## JSX Usage
-
-```jsx
-import { CommandInput } from '@neynar/ui';
-
-<CommandInput
-  value="value"
-  onValueChange={handleValueChange}
-  placeholder="value"
-  disabled={true}
-  autoFocus={true}
-  className="value"
-/>
-```
-
-## Component Props
-
-### value
-- **Type**: `string`
-- **Required**: No
-- **Description**: Controlled input value for managing search state externally
-
-### onValueChange
-- **Type**: `(search: string) => void`
-- **Required**: No
-- **Description**: Callback fired when input value changes
-
-### placeholder
-- **Type**: `string`
-- **Required**: No
-- **Description**: Placeholder text displayed when input is empty
-
-### disabled
-- **Type**: `boolean`
-- **Required**: No
-- **Description**: Disables the input and prevents interaction
-
-### autoFocus
-- **Type**: `boolean`
-- **Required**: No
-- **Description**: Auto-focus the input when rendered
-
-### className
-- **Type**: `string`
-- **Required**: No
-- **Description**: Additional CSS classes
-
-## Examples
-
-### Example 1
-```tsx
-// Basic uncontrolled input
-<Command>
-  <CommandInput placeholder="Search commands..." />
-  <CommandList>...</CommandList>
-</Command>
-```
-### Example 2
-```tsx
-// Controlled input with external state
-const [search, setSearch] = useState('');
-<CommandInput
-  value={search}
-  onValueChange={setSearch}
-  placeholder="Type a command or search..."
-  autoFocus
-/>
-```
-### Example 3
-```tsx
-// With disabled state
-<CommandInput
-  placeholder="Loading..."
-  disabled={isLoading}
-/>
-```

package/llm-docs/command-item.llm.md

@@ -1,97 +0,0 @@
-# CommandItem
-
-**Type**: component
-
-CommandItem - Individual selectable command item Represents a single command or action that can be selected via keyboard or mouse interaction. Supports icons, text, shortcuts, and advanced filtering with keywords. Items can be disabled, have custom values for filtering, and trigger callbacks on selection. The item's value is used for filtering - if not provided, it defaults to the text content. Keywords can be added to improve search matching without affecting the display.
-
-## JSX Usage
-
-```jsx
-import { CommandItem } from '@neynar/ui';
-
-<CommandItem
-  value="value"
-  keywords={[]}
-  disabled={true}
-  onSelect={handleSelect}
-  forceMount={true}
-  className="value"
->
-  {/* Your content here */}
-</CommandItem>
-```
-
-## Component Props
-
-### value
-- **Type**: `string`
-- **Required**: No
-- **Description**: Unique identifier for filtering and selection (defaults to text content)
-
-### keywords
-- **Type**: `string[]`
-- **Required**: No
-- **Description**: Additional search terms for improved filtering
-
-### disabled
-- **Type**: `boolean`
-- **Required**: No
-- **Description**: Disables interaction and selection
-
-### onSelect
-- **Type**: `(value: string) => void`
-- **Required**: No
-- **Description**: Callback fired when item is selected with Enter or click
-
-### forceMount
-- **Type**: `boolean`
-- **Required**: No
-- **Description**: Always render even when filtered out
-
-### 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 item
-<CommandItem onSelect={() => console.log("File opened")}>
-  Open File
-</CommandItem>
-```
-### Example 2
-```tsx
-// Command item with icon and shortcut
-<CommandItem value="new-document" onSelect={handleCreateDocument}>
-  <FileIcon className="mr-2 h-4 w-4" />
-  New Document
-  <CommandShortcut>⌘N</CommandShortcut>
-</CommandItem>
-```
-### Example 3
-```tsx
-// Item with keywords for better search
-<CommandItem
-  value="apple"
-  keywords={['fruit', 'red', 'healthy']}
-  onSelect={() => selectFruit('apple')}
->
-  🍎 Apple
-</CommandItem>
-```
-### Example 4
-```tsx
-// Disabled item that shows but cannot be selected
-<CommandItem disabled>
-  <LockIcon className="mr-2 h-4 w-4" />
-  Premium Feature
-</CommandItem>
-```

package/llm-docs/command-list.llm.md

@@ -1,53 +0,0 @@
-# CommandList
-
-**Type**: component
-
-CommandList - Scrollable container for command items Contains and manages the list of command items with automatic scrolling, overflow handling, and dynamic height calculation. Provides the scrollable viewport for command items and groups with proper keyboard navigation. Uses CSS custom property `--cmdk-list-height` for smooth height transitions when items are filtered. Supports scroll padding for better item visibility.
-
-## JSX Usage
-
-```jsx
-import { CommandList } from '@neynar/ui';
-
-<CommandList
-  className="value"
->
-  {/* Your content here */}
-</CommandList>
-```
-
-## Component Props
-
-### className
-- **Type**: `string`
-- **Required**: No
-- **Description**: Additional CSS classes
-
-### children
-- **Type**: `React.ReactNode`
-- **Required**: No
-- **Description**: No description available
-
-## Examples
-
-### Example 1
-```tsx
-<CommandList>
-  <CommandEmpty>No results found</CommandEmpty>
-  <CommandGroup heading="Actions">
-    <CommandItem>New File</CommandItem>
-    <CommandItem>Open File</CommandItem>
-  </CommandGroup>
-</CommandList>
-```
-### Example 2
-```tsx
-// With custom height and scroll behavior
-<CommandList className="max-h-[400px] scroll-py-2">
-  {items.map((item) => (
-    <CommandItem key={item.id} value={item.id}>
-      {item.name}
-    </CommandItem>
-  ))}
-</CommandList>
-```

package/llm-docs/command-loading.llm.md

@@ -1,48 +0,0 @@
-# CommandLoading
-
-**Type**: component
-
-CommandLoading - Loading state indicator for command menu Displays a loading message while command items are being fetched asynchronously. Should be conditionally rendered based on loading state. Shares the same styling and behavior as CommandEmpty but indicates active loading rather than empty state.
-
-## JSX Usage
-
-```jsx
-import { CommandLoading } from '@neynar/ui';
-
-<CommandLoading
-  ...props={value}
-/>
-```
-
-## Component Props
-
-### ...props
-- **Type**: `unknown`
-- **Required**: Yes
-- **Description**: No description available
-
-## Examples
-
-### Example 1
-```tsx
-const [loading, setLoading] = useState(false);
-const [items, setItems] = useState([]);
-<CommandList>
-  {loading && <CommandLoading>Fetching commands...</CommandLoading>}
-  {items.map(item => (
-    <CommandItem key={item.id} value={item.id}>
-      {item.name}
-    </CommandItem>
-  ))}
-</CommandList>
-```
-### Example 2
-```tsx
-// With custom loading indicator
-<CommandLoading>
-  <div className="flex items-center justify-center py-6">
-    <Spinner className="mr-2 h-4 w-4" />
-    <span>Loading commands...</span>
-  </div>
-</CommandLoading>
-```

package/llm-docs/command-separator.llm.md

@@ -1,44 +0,0 @@
-# CommandSeparator
-
-**Type**: component
-
-CommandSeparator - Visual separator between command groups Provides visual separation between different sections of commands. Purely decorative element that improves visual organization and hierarchy. Automatically hides when adjacent groups are filtered out. The separator will only render when it has visible content before and after it, unless `alwaysRender` is true.
-
-## JSX Usage
-
-```jsx
-import { CommandSeparator } from '@neynar/ui';
-
-<CommandSeparator
-  alwaysRender={true}
-  className="value"
-/>
-```
-
-## Component Props
-
-### alwaysRender
-- **Type**: `boolean`
-- **Required**: No
-- **Description**: Whether to always show separator regardless of context
-
-### className
-- **Type**: `string`
-- **Required**: No
-- **Description**: Additional CSS classes
-
-## Examples
-
-### Example 1
-```tsx
-<CommandGroup heading="Recent">...</CommandGroup>
-<CommandSeparator />
-<CommandGroup heading="Actions">...</CommandGroup>
-```
-### Example 2
-```tsx
-// Separator that always renders
-<CommandGroup heading="Primary">...</CommandGroup>
-<CommandSeparator alwaysRender />
-<CommandGroup heading="Secondary">...</CommandGroup>
-```

package/llm-docs/command-shortcut.llm.md

@@ -1,63 +0,0 @@
-# CommandShortcut
-
-**Type**: component
-
-CommandShortcut - Displays keyboard shortcut for command items Shows the keyboard shortcut associated with a command item, typically displayed on the right side with proper spacing. Supports platform-specific shortcuts and complex key combinations with consistent formatting. The component uses monospace-style formatting with appropriate opacity and spacing to clearly indicate keyboard shortcuts without overwhelming the item content.
-
-## JSX Usage
-
-```jsx
-import { CommandShortcut } from '@neynar/ui';
-
-<CommandShortcut
-  className="value"
->
-  {/* Your content here */}
-</CommandShortcut>
-```
-
-## Component Props
-
-### className
-- **Type**: `string`
-- **Required**: No
-- **Description**: Additional CSS classes
-
-### children
-- **Type**: `React.ReactNode`
-- **Required**: No
-- **Description**: No description available
-
-## Examples
-
-### Example 1
-```tsx
-<CommandItem>
-  Save File
-  <CommandShortcut>⌘S</CommandShortcut>
-</CommandItem>
-```
-### Example 2
-```tsx
-// Multi-key shortcuts
-<CommandItem>
-  Redo
-  <CommandShortcut>⇧⌘Z</CommandShortcut>
-</CommandItem>
-```
-### Example 3
-```tsx
-// Platform-specific shortcuts
-<CommandItem>
-  Copy
-  <CommandShortcut>{isMac ? '⌘C' : 'Ctrl+C'}</CommandShortcut>
-</CommandItem>
-```
-### Example 4
-```tsx
-// Complex shortcuts with modifiers
-<CommandItem>
-  Open Command Palette
-  <CommandShortcut>⌘⇧P</CommandShortcut>
-</CommandItem>
-```