@neynar/ui 0.2.0 → 0.3.0

package/llm-docs/code.llm.md

@@ -1,108 +0,0 @@
-# Code
-
-**Type**: component
-
-Code - Inline code component for technical content Semantic code element for inline code snippets, variable names, and technical references. Uses monospace font and "code" variant for clear distinction from regular text.
-
-## JSX Usage
-
-```jsx
-import { Code } from '@neynar/ui';
-
-<Code
-  color={value}
-  align={value}
-  transform={value}
-  weight={value}
-  htmlFor="value"
-  asChild={true}
-  italic={true}
-  underline={true}
-  strikethrough={true}
-  truncate={true}
-  srOnly={true}
-  className="value"
->
-  {/* Your content here */}
-</Code>
-```
-
-## Component Props
-
-### color
-- **Type**: `| "default"
-    | "muted"
-    | "accent"
-    | "destructive"
-    | "success"
-    | "warning"`
-- **Required**: No
-- **Description**: No description available
-
-### align
-- **Type**: `"left" | "center" | "right" | "justify"`
-- **Required**: No
-- **Description**: No description available
-
-### transform
-- **Type**: `"uppercase" | "lowercase" | "capitalize"`
-- **Required**: No
-- **Description**: No description available
-
-### weight
-- **Type**: `"normal" | "medium" | "semibold" | "bold"`
-- **Required**: No
-- **Description**: No description available
-
-### htmlFor
-- **Type**: `string`
-- **Required**: No
-- **Description**: No description available
-
-### asChild
-- **Type**: `boolean`
-- **Required**: No
-- **Description**: No description available
-
-### italic
-- **Type**: `boolean`
-- **Required**: No
-- **Description**: No description available
-
-### underline
-- **Type**: `boolean`
-- **Required**: No
-- **Description**: No description available
-
-### strikethrough
-- **Type**: `boolean`
-- **Required**: No
-- **Description**: No description available
-
-### truncate
-- **Type**: `boolean`
-- **Required**: No
-- **Description**: No description available
-
-### srOnly
-- **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
-// Inline code snippet
-<Code>const message = "Hello, world!";</Code>
-// Terminal command
-<Code color="muted">npm install

package/llm-docs/collapsible-content.llm.md

@@ -1,109 +0,0 @@
-# CollapsibleContent
-
-**Type**: component
-
-Content container that can be expanded or collapsed The panel containing content that is shown or hidden based on the collapsible state. Built on Radix UI CollapsibleContent primitive with automatic height animations, accessibility attributes, and smooth transitions when toggling between expanded and collapsed states. **Key Features:** - Automatic height animations using CSS variables - Proper accessibility tree management (hidden when collapsed) - CSS data attributes for custom styling and animations - Support for forceMount to keep content in DOM when collapsed - Seamless composition via asChild pattern
-
-## JSX Usage
-
-```jsx
-import { CollapsibleContent } from '@neynar/ui';
-
-<CollapsibleContent
-  asChild={true}
-  forceMount={true}
-/>
-```
-
-## Component Props
-
-### asChild
-- **Type**: `boolean`
-- **Required**: No
-- **Description**: When true, merges props onto immediate child instead of rendering div
-
-### forceMount
-- **Type**: `boolean`
-- **Required**: No
-- **Description**: When true, forces content to stay in DOM even when collapsed
-
-## Examples
-
-### Example 1
-```tsx
-// Basic content panel with simple styling
-<CollapsibleContent className="pt-2">
-  <div className="rounded-md border px-4 py-2 text-sm bg-muted/50">
-    Yes. Free to use for personal and commercial projects.
-    No attribution required.
-  </div>
-</CollapsibleContent>
-```
-### Example 2
-```tsx
-// Content with multiple elements and spacing
-<CollapsibleContent className="space-y-2 pt-2">
-  <div className="rounded-md border px-4 py-3 font-mono text-sm shadow-sm">
-### Example 3
-```tsx
-// Content with custom animations using CSS variables
-<CollapsibleContent className="overflow-hidden text-sm transition-all data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down">
-  <div className="pb-4 pt-0 px-1">
-    Content with smooth height animations. The CSS variables
-    --radix-collapsible-content-height and --radix-collapsible-content-width
-    are available for custom animation implementations.
-  </div>
-</CollapsibleContent>
-```
-### Example 4
-```tsx
-// Force mounted content (stays in DOM when collapsed)
-<CollapsibleContent forceMount className="data-[state=closed]:hidden">
-  <div className="p-4 text-sm">
-    This content remains in the DOM even when collapsed,
-    useful for maintaining form state or for SSR consistency.
-  </div>
-</CollapsibleContent>
-```
-### Example 5
-```tsx
-// Content with asChild composition
-<CollapsibleContent asChild>
-  <motion.div
-    initial={{ height: 0 }}
-    animate={{ height: "auto" }}
-    exit={{ height: 0 }}
-    className="overflow-hidden"
-  >
-    <div className="p-4">
-      Content with custom Framer Motion animations
-    </div>
-  </motion.div>
-</CollapsibleContent>
-```
-### Example 6
-```tsx
-// Content with complex nested structure
-<CollapsibleContent className="overflow-hidden">
-  <div className="border-t pt-4 mt-2">
-    <div className="grid grid-cols-2 gap-4">
-      <div className="space-y-2">
-        <h4 className="font-medium">Documentation</h4>
-        <ul className="text-sm space-y-1 text-muted-foreground">
-          <li>Getting Started</li>
-          <li>Installation</li>
-          <li>Configuration</li>
-        </ul>
-      </div>
-      <div className="space-y-2">
-        <h4 className="font-medium">Examples</h4>
-        <ul className="text-sm space-y-1 text-muted-foreground">
-          <li>Basic Usage</li>
-          <li>Advanced Patterns</li>
-          <li>Custom Styling</li>
-        </ul>
-      </div>
-    </div>
-  </div>
-</CollapsibleContent>
-```

package/llm-docs/collapsible-trigger.llm.md

@@ -1,75 +0,0 @@
-# CollapsibleTrigger
-
-**Type**: component
-
-Interactive trigger element that toggles collapsible content visibility The clickable element that controls the expanded/collapsed state of the associated CollapsibleContent. Built on Radix UI CollapsibleTrigger primitive with automatic ARIA management and keyboard support. Supports the asChild prop for composition with custom button components or other interactive elements. **Key Features:** - Automatic `aria-expanded` state management - Built-in keyboard navigation (Space/Enter) - Flexible composition via `asChild` pattern - Seamless integration with any interactive element
-
-## JSX Usage
-
-```jsx
-import { CollapsibleTrigger } from '@neynar/ui';
-
-<CollapsibleTrigger
-  asChild={true}
-/>
-```
-
-## Component Props
-
-### asChild
-- **Type**: `boolean`
-- **Required**: No
-- **Description**: When true, merges props onto immediate child instead of rendering button
-
-## Examples
-
-### Example 1
-```tsx
-// Simple text trigger with default button styling
-<CollapsibleTrigger className="font-medium hover:underline">
-  Can I use this in my project?
-</CollapsibleTrigger>
-```
-### Example 2
-```tsx
-// Composed with Button component for consistent styling
-<CollapsibleTrigger asChild>
-  <Button variant="outline" className="w-full justify-between">
-    Advanced Settings
-    <ChevronDown className="h-4 w-4 transition-transform duration-200 group-data-[state=open]:rotate-180" />
-  </Button>
-</CollapsibleTrigger>
-```
-### Example 3
-```tsx
-// Custom styled trigger with icon animation
-<CollapsibleTrigger className="flex w-full items-center justify-between py-4 text-left text-sm font-medium transition-all hover:underline focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring">
-  How does it work?
-  <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200 data-[state=open]:rotate-180" />
-</CollapsibleTrigger>
-```
-### Example 4
-```tsx
-// Trigger composed with icon button
-<CollapsibleTrigger asChild>
-  <Button variant="ghost" size="sm" className="h-8 w-8 p-0">
-    <MoreHorizontal className="h-4 w-4" />
-    <span className="sr-only">Toggle options</span>
-  </Button>
-</CollapsibleTrigger>
-```
-### Example 5
-```tsx
-// Trigger with custom element using asChild
-<CollapsibleTrigger asChild>
-  <div
-    role="button"
-    tabIndex={0}
-    className="flex items-center gap-2 p-2 rounded cursor-pointer hover:bg-accent"
-  >
-    <FolderIcon className="h-4 w-4" />
-    <span>Project Files</span>
-    <ChevronRight className="h-3 w-3 transition-transform data-[state=open]:rotate-90" />
-  </div>
-</CollapsibleTrigger>
-```

package/llm-docs/collapsible.llm.md

@@ -1,109 +0,0 @@
-# Collapsible
-
-**Type**: component
-
-An interactive component which expands/collapses a panel A flexible container component built on Radix UI Collapsible primitives that allows users to toggle the visibility of content sections. Unlike Accordion, Collapsible provides more flexibility without enforcing specific visual structures or mutual exclusivity. Perfect for FAQ sections, expandable details, settings panels, sidebar navigation, and any content that should be conditionally visible. Built on `@radix-ui/react-collapsible` with enhanced TypeScript support and comprehensive prop documentation.
-
-## JSX Usage
-
-```jsx
-import { Collapsible } from '@neynar/ui';
-
-<Collapsible
-  asChild={true}
-  defaultOpen={true}
-  open={true}
-  onOpenChange={handleOpenChange}
-  disabled={true}
-/>
-```
-
-## Component Props
-
-### asChild
-- **Type**: `boolean`
-- **Required**: No
-- **Description**: No description available
-
-### 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
-
-### disabled
-- **Type**: `boolean`
-- **Required**: No
-- **Description**: No description available
-
-## Examples
-
-### Example 1
-```tsx
-// Basic controlled collapsible with state management
-const [isOpen, setIsOpen] = React.useState(false)
-<Collapsible open={isOpen} onOpenChange={setIsOpen}>
-  <CollapsibleTrigger asChild>
-    <Button variant="outline" className="w-full justify-between">
-      Can I use this in my project?
-      <ChevronDown className={cn(
-        "h-4 w-4 transition-transform duration-200",
-        isOpen && "rotate-180"
-      )} />
-    </Button>
-  </CollapsibleTrigger>
-  <CollapsibleContent className="overflow-hidden data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down">
-    <div className="p-4 border rounded-md bg-muted/50 mt-2">
-      Yes. Free to use for personal and commercial projects.
-      No attribution required.
-    </div>
-  </CollapsibleContent>
-</Collapsible>
-```
-### Example 2
-```tsx
-// Uncontrolled collapsible with default state
-<Collapsible defaultOpen={true} className="w-full space-y-2">
-  <div className="flex items-center justify-between">
-    <h4 className="text-sm font-semibold">
-### Example 3
-```tsx
-// FAQ-style implementation with custom animations
-<Collapsible className="group" data-orientation="vertical">
-  <CollapsibleTrigger className="flex w-full items-center justify-between py-4 text-sm font-medium transition-all hover:underline focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring">
-    How do I get started?
-    <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200 group-data-[state=open]:rotate-180" />
-  </CollapsibleTrigger>
-  <CollapsibleContent className="overflow-hidden text-sm transition-all data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down">
-    <div className="pb-4 pt-0">
-      Getting started is easy! Simply follow our quick setup guide,
-      install the required dependencies, and begin building your application.
-      Check out our documentation for detailed instructions.
-    </div>
-  </CollapsibleContent>
-</Collapsible>
-```
-### Example 4
-```tsx
-// Disabled collapsible state
-<Collapsible disabled className="opacity-50 cursor-not-allowed">
-  <CollapsibleTrigger className="flex w-full items-center justify-between py-4 text-sm font-medium">
-    This section is temporarily unavailable
-    <ChevronDown className="h-4 w-4" />
-  </CollapsibleTrigger>
-  <CollapsibleContent>
-    <div className="pb-4 pt-0 text-sm text-muted-foreground">
-      This content is currently disabled and cannot be accessed.
-    </div>
-  </CollapsibleContent>
-</Collapsible>
-```

package/llm-docs/combobox-option.llm.md

@@ -1,53 +0,0 @@
-# ComboboxOption
-
-**Type**: type
-
-Option structure for combobox items Defines the shape of each option that can be displayed and selected in the combobox dropdown list.
-
-## Type Definition
-
-```typescript
-import { ComboboxOption } from '@neynar/ui';
-
-type ComboboxOption = {
-  /**
-   * Unique identifier for this option
-   *
-   * Used for selection tracking and should be unique within the options array.
-   */
-  value: string;
-
-  /**
-   * Display text shown to users in the dropdown
-   *
-   * Should be descriptive and help users understand what this option represents.
-   */
-  label: string;
-
-  /**
-   * Whether this option is disabled and cannot be selected
-   *
-   * Disabled options remain visible but are not selectable and appear dimmed.
-   *
-   * @default false
-   */
-  disabled?: boolean;
-}
-```
-
-## Type Properties
-
-### value
-- **Type**: `string`
-- **Required**: Yes
-- **Description**: No description available
-
-### label
-- **Type**: `string`
-- **Required**: Yes
-- **Description**: No description available
-
-### disabled
-- **Type**: `boolean`
-- **Required**: No
-- **Description**: No description available

package/llm-docs/combobox.llm.md

@@ -1,208 +0,0 @@
-# Combobox
-
-**Type**: component
-
-Searchable dropdown selection component with typeahead functionality A versatile combobox that combines a button trigger with a searchable dropdown list. Ideal for selecting from moderate to large lists of options where search functionality improves user experience. Built on Radix UI Popover primitives for accessibility and CMDK for powerful command menu functionality with real-time filtering. **Technical Architecture:** - **Popover Container**: Radix UI Popover.Root provides modal/non-modal behavior, focus management, and positioning - **Trigger Button**: Uses Button component with proper ARIA attributes and visual states - **Command Menu**: CMDK provides keyboard navigation, filtering, and accessibility features - **State Management**: Controlled/uncontrolled modes with proper React patterns **Use Cases:** - Selecting from 10+ options that benefit from real-time filtering - User interfaces requiring quick option discovery through search - Forms needing better UX than basic select dropdowns - Applications with dynamic or large option sets **When Not to Use:** - Simple selection from few options (use Select component instead) - Multi-select scenarios (use Checkbox group or specialized multi-select) - Tree or hierarchical data (use TreeSelect or nested menus)
-
-## JSX Usage
-
-```jsx
-import { Combobox } from '@neynar/ui';
-
-<Combobox
-  options={[]}
-  value="value"
-  onValueChange={handleValueChange}
-  placeholder="value"
-  emptyText="value"
-  searchPlaceholder="value"
-  className="value"
-  disabled={true}
-  buttonClassName="value"
-  popoverClassName="value"
-/>
-```
-
-## Component Props
-
-### options
-- **Type**: `ComboboxOption[]`
-- **Required**: Yes
-- **Description**: No description available
-
-### value
-- **Type**: `string`
-- **Required**: No
-- **Description**: No description available
-
-### onValueChange
-- **Type**: `(value: string) => void`
-- **Required**: No
-- **Description**: No description available
-
-### placeholder
-- **Type**: `string`
-- **Required**: No
-- **Description**: No description available
-
-### emptyText
-- **Type**: `string`
-- **Required**: No
-- **Description**: No description available
-
-### searchPlaceholder
-- **Type**: `string`
-- **Required**: No
-- **Description**: No description available
-
-### className
-- **Type**: `string`
-- **Required**: No
-- **Description**: No description available
-
-### disabled
-- **Type**: `boolean`
-- **Required**: No
-- **Description**: No description available
-
-### buttonClassName
-- **Type**: `string`
-- **Required**: No
-- **Description**: No description available
-
-### popoverClassName
-- **Type**: `string`
-- **Required**: No
-- **Description**: No description available
-
-## Examples
-
-### Example 1
-Basic controlled combobox with framework selection
-```tsx
-const [framework, setFramework] = useState("")
-const frameworks = [
-  { value: "nextjs", label: "Next.js" },
-  { value: "remix", label: "Remix" },
-  { value: "sveltekit", label: "SvelteKit" },
-  { value: "nuxt", label: "Nuxt.js" },
-]
-<Combobox
-  options={frameworks}
-  value={framework}
-  onValueChange={setFramework}
-  placeholder="Select framework..."
-  searchPlaceholder="Search frameworks..."
-  buttonClassName="w-[300px]"
-  popoverClassName="w-[300px]"
-/>
-```
-### Example 2
-Advanced combobox with disabled options and custom styling
-```tsx
-const statusOptions = [
-  { value: "active", label: "Active" },
-  { value: "pending", label: "Pending" },
-  { value: "archived", label: "Archived (Read Only)", disabled: true },
-  { value: "deleted", label: "Deleted (Unavailable)", disabled: true },
-]
-<Combobox
-  options={statusOptions}
-  value={status}
-  onValueChange={(value) => {
-    setStatus(value)
-    // Track selection analytics
-    analytics.track('status_selected', { value })
-  }}
-  placeholder="Select status..."
-  emptyText="No matching status found."
-  searchPlaceholder="Filter statuses..."
-  buttonClassName="w-[250px] border-primary/50"
-  popoverClassName="w-[250px]"
-  disabled={isLoading}
-/>
-```
-### Example 3
-Form integration with validation and error handling
-```tsx
-import { Label } from "@/components/ui/label"
-import { useFormContext } from "react-hook-form"
-function CountryField() {
-  const { register, setValue, watch, formState: { errors } } = useFormContext()
-  const selectedCountry = watch("country")
-  return (
-    <div className="space-y-2">
-      <Label htmlFor="country" className={errors.country ? "text-destructive" : ""}>
-        Country {errors.country && "*"}
-      </Label>
-      <Combobox
-        options={countries}
-        value={selectedCountry}
-        onValueChange={(value) => setValue("country", value, { shouldValidate: true })}
-        placeholder="Choose your country..."
-        searchPlaceholder="Type to search countries..."
-        emptyText="Country not found. Try a different search."
-        buttonClassName={cn(
-          "w-full",
-          errors.country && "border-destructive focus-visible:ring-destructive"
-        )}
-        popoverClassName="w-full"
-        disabled={isSubmitting}
-      />
-      {errors.country && (
-        <p className="text-sm text-destructive" role="alert">
-          {errors.country.message}
-        </p>
-      )}
-    </div>
-  )
-}
-```
-### Example 4
-Responsive design with mobile optimization
-```tsx
-<Combobox
-  options={teamMembers}
-  value={assignedTo}
-  onValueChange={setAssignedTo}
-  placeholder="Assign to team member..."
-  searchPlaceholder="Search team members..."
-  emptyText="No team members found."
-  buttonClassName="w-full sm:w-[280px] md:w-[320px]"
-  popoverClassName="w-full sm:w-[280px] md:w-[320px]"
-  // Mobile: full width, Desktop: fixed width for consistent layout
-/>
-```
-### Example 5
-Async data loading with loading states
-```tsx
-function AsyncCombobox() {
-  const [options, setOptions] = useState([])
-  const [loading, setLoading] = useState(false)
-  const [searchTerm, setSearchTerm] = useState("")
-  // Debounced search effect
-  useEffect(() => {
-    if (!searchTerm) return
-    const timeoutId = setTimeout(async () => {
-      setLoading(true)
-      try {
-        const results = await searchAPI(searchTerm)
-        setOptions(results)
-      } finally {
-        setLoading(false)
-      }
-    }, 300)
-    return () => clearTimeout(timeoutId)
-  }, [searchTerm])
-  return (
-    <Combobox
-      options={options}
-      value={selectedValue}
-      onValueChange={setSelectedValue}
-      placeholder={loading ? "Searching..." : "Search items..."}
-      emptyText={loading ? "Loading..." : "No results found."}
-      disabled={loading}
-    />
-  )
-}
-```