@neynar/ui 0.3.0 → 0.3.1

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,103 @@
+# 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**: `TypographyColor`
+- **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/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>
+```