@neynar/ui 0.3.0 → 0.4.0

package/.llm/chart-tooltip.llm.md

@@ -0,0 +1,184 @@
+# ChartTooltip
+
+**Type**: component
+
+Tooltip component for charts Re-export of Recharts Tooltip component with support for custom content. Use with ChartTooltipContent for consistent styling and theming integration.
+
+## JSX Usage
+
+```jsx
+import { ChartTooltip } from '@neynar/ui';
+
+<ChartTooltip
+  content={value}
+  active={true}
+  payload={[]}
+  label={value}
+  formatter={() => {}}
+  labelFormatter={[]}
+  cursor={value}
+  position={value}
+  offset={0}
+  shared={true}
+  portal={value}
+  wrapperStyle={value}
+  wrapperClassName="value"
+  animationDuration={0}
+  animationEasing="value"
+  allowEscapeViewBox={value}
+  separator="value"
+  useTranslate3d={true}
+  coordinate={value}
+  filterNull={true}
+  itemSorter={() => {}}
+  itemStyle={value}
+  labelStyle={value}
+  contentStyle={value}
+/>
+```
+
+## Component Props
+
+### content
+- **Type**: `React.ComponentType<any> | React.ReactElement`
+- **Required**: No
+- **Description**: No description available
+
+### active
+- **Type**: `boolean`
+- **Required**: No
+- **Description**: No description available
+
+### payload
+- **Type**: `any[]`
+- **Required**: No
+- **Description**: No description available
+
+### label
+- **Type**: `string | number`
+- **Required**: No
+- **Description**: No description available
+
+### formatter
+- **Type**: `(
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    value: any,
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    name: any,
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    props: any,
+  ) => [React.ReactNode, React.ReactNode] | React.ReactNode`
+- **Required**: No
+- **Description**: No description available
+
+### labelFormatter
+- **Type**: `(label: any, payload: any[]) => React.ReactNode`
+- **Required**: No
+- **Description**: No description available
+
+### cursor
+- **Type**: `boolean | React.ComponentType<any> | React.ReactElement | object`
+- **Required**: No
+- **Description**: No description available
+
+### position
+- **Type**: `{ x?: number; y?: number }`
+- **Required**: No
+- **Description**: No description available
+
+### offset
+- **Type**: `number`
+- **Required**: No
+- **Description**: No description available
+
+### shared
+- **Type**: `boolean`
+- **Required**: No
+- **Description**: No description available
+
+### portal
+- **Type**: `HTMLElement`
+- **Required**: No
+- **Description**: No description available
+
+### wrapperStyle
+- **Type**: `React.CSSProperties`
+- **Required**: No
+- **Description**: No description available
+
+### wrapperClassName
+- **Type**: `string`
+- **Required**: No
+- **Description**: No description available
+
+### animationDuration
+- **Type**: `number`
+- **Required**: No
+- **Description**: No description available
+
+### animationEasing
+- **Type**: `string`
+- **Required**: No
+- **Description**: No description available
+
+### allowEscapeViewBox
+- **Type**: `{ x?: boolean; y?: boolean }`
+- **Required**: No
+- **Description**: No description available
+
+### separator
+- **Type**: `string`
+- **Required**: No
+- **Description**: No description available
+
+### useTranslate3d
+- **Type**: `boolean`
+- **Required**: No
+- **Description**: No description available
+
+### coordinate
+- **Type**: `{ x?: number; y?: number }`
+- **Required**: No
+- **Description**: No description available
+
+### filterNull
+- **Type**: `boolean`
+- **Required**: No
+- **Description**: No description available
+
+### itemSorter
+- **Type**: `(item: any) => number`
+- **Required**: No
+- **Description**: No description available
+
+### itemStyle
+- **Type**: `React.CSSProperties`
+- **Required**: No
+- **Description**: No description available
+
+### labelStyle
+- **Type**: `React.CSSProperties`
+- **Required**: No
+- **Description**: No description available
+
+### contentStyle
+- **Type**: `React.CSSProperties`
+- **Required**: No
+- **Description**: No description available
+
+## Examples
+
+### Example 1
+```tsx
+// Basic tooltip
+<ChartTooltip content={<ChartTooltipContent />} />
+```
+### Example 2
+```tsx
+// Tooltip with custom positioning
+<ChartTooltip
+  content={<ChartTooltipContent />}
+  cursor={false}
+  position={{ x: 10, y: 10 }}
+/>
+```

package/.llm/checkbox.llm.md

@@ -0,0 +1,100 @@
+# Checkbox
+
+**Type**: component
+
+A versatile checkbox component for binary and multi-selection interfaces Built on Radix UI Checkbox primitive, this component provides a fully accessible checkbox with support for controlled/uncontrolled states, indeterminate state, and comprehensive form integration. Features consistent styling with the design system and proper keyboard navigation. The component automatically renders a hidden input element when used within a form to ensure proper form submission and native validation support. Supports three states: checked (true), unchecked (false), and indeterminate for partial selections.
+
+## JSX Usage
+
+```jsx
+import { Checkbox } from '@neynar/ui';
+
+<Checkbox
+  className="value"
+  asChild={true}
+  checked={value}
+  defaultChecked={value}
+  onCheckedChange={handleCheckedChange}
+  disabled={true}
+  required={true}
+  name="value"
+  value="value"
+  id="value"
+  "aria-label"="value"
+  "aria-labelledby"="value"
+  "aria-describedby"="value"
+  "aria-invalid"={value}
+/>
+```
+
+## Component Props
+
+### className
+- **Type**: `string`
+- **Required**: No
+- **Description**: No description available
+
+### asChild
+- **Type**: `boolean`
+- **Required**: No
+- **Description**: No description available
+
+### checked
+- **Type**: `boolean | "indeterminate"`
+- **Required**: No
+- **Description**: No description available
+
+### defaultChecked
+- **Type**: `boolean | "indeterminate"`
+- **Required**: No
+- **Description**: No description available
+
+### onCheckedChange
+- **Type**: `(checked: boolean | "indeterminate") => void`
+- **Required**: No
+- **Description**: No description available
+
+### disabled
+- **Type**: `boolean`
+- **Required**: No
+- **Description**: No description available
+
+### required
+- **Type**: `boolean`
+- **Required**: No
+- **Description**: No description available
+
+### name
+- **Type**: `string`
+- **Required**: No
+- **Description**: No description available
+
+### value
+- **Type**: `string`
+- **Required**: No
+- **Description**: No description available
+
+### id
+- **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-invalid"
+- **Type**: `boolean | "false" | "true" | "grammar" | "spelling"`
+- **Required**: No
+- **Description**: No description available

package/.llm/cn.llm.md

@@ -0,0 +1,46 @@
+# cn
+
+**Type**: function
+
+cn - Combines class names with Tailwind CSS conflict resolution This utility function combines multiple class names into a single string, automatically resolving Tailwind CSS class conflicts. It uses clsx for conditional class handling and tailwind-merge to ensure later classes override earlier ones when they conflict.
+
+## API Surface
+
+```typescript
+import { cn } from '@neynar/ui';
+
+export function cn(inputs: ClassValue[]): void { ... }
+```
+
+## Parameters
+
+### inputs
+- **Type**: `ClassValue[]`
+- **Required**: Yes
+- **Description**: Class names to combine. Can be strings, objects, arrays,
+## Returns
+
+- **Description**: A single string of combined and merged class names
+## Examples
+
+### Example 1
+```tsx
+// Basic usage
+cn("px-2 py-1", "bg-blue-500", "text-white")
+// Returns: "px-2 py-1 bg-blue-500 text-white"
+```
+### Example 2
+```tsx
+// With conditional classes
+cn(
+  "base-class",
+  isActive && "active-class",
+  isDisabled && "disabled-class"
+)
+```
+### Example 3
+```tsx
+// Overriding Tailwind classes
+cn("px-4", "px-2") // Returns: "px-2" (later class wins)
+cn("text-red-500", "text-blue-500") // Returns: "text-blue-500"
+```

package/.llm/code.llm.md

@@ -0,0 +1,45 @@
+# Code
+
+**Type**: component
+
+Code - Inline code component Monospace text for inline code snippets and technical references. Uses text-sm with monospace font and subtle background. Defaults to code element.
+
+## JSX Usage
+
+```jsx
+import { Code } from '@neynar/ui';
+
+<Code
+  as={value}
+  className="value"
+>
+  {/* Your content here */}
+</Code>
+```
+
+## Component Props
+
+### as
+- **Type**: `React.ElementType`
+- **Required**: No
+- **Description**: HTML element to render
+
+### className
+- **Type**: `string`
+- **Required**: No
+- **Description**: Additional Tailwind classes
+
+### children
+- **Type**: `React.ReactNode`
+- **Required**: No
+- **Description**: Content to render
+
+## Examples
+
+```tsx
+// Inline code
+<Code>const message = "Hello, world!";</Code>
+// Variable reference
+<p>Set the <Code>API_KEY</Code> environment variable.</p>
+// Terminal command
+<Code className="bg-accent">npm install

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

@@ -0,0 +1,109 @@
+# 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/collapsible-trigger.llm.md

@@ -0,0 +1,75 @@
+# 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/collapsible.llm.md

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