@neynar/ui 0.3.0 → 0.3.1

package/.llm/breadcrumb.llm.md

@@ -0,0 +1,110 @@
+# Breadcrumb
+
+**Type**: component
+
+Breadcrumb navigation component that displays hierarchical page location A breadcrumb navigation component built on semantic HTML that shows the current page location within a navigational hierarchy. Provides users with contextual awareness of their position in the site structure and enables easy navigation to parent pages. Based on the shadcn/ui Breadcrumb component with accessibility features and support for composition patterns including custom separators, ellipsis for long paths, dropdown menus, and custom link components via the asChild prop.
+
+## JSX Usage
+
+```jsx
+import { Breadcrumb } from '@neynar/ui';
+
+<Breadcrumb
+  className="value"
+>
+  {/* Your content here */}
+</Breadcrumb>
+```
+
+## Component Props
+
+### className
+- **Type**: `string`
+- **Required**: No
+- **Description**: Additional CSS classes to apply to the navigation element
+
+### children
+- **Type**: `React.ReactNode`
+- **Required**: No
+- **Description**: Child breadcrumb elements (typically BreadcrumbList)
+
+## Examples
+
+### Example 1
+```tsx
+// Basic breadcrumb navigation
+<Breadcrumb>
+  <BreadcrumbList>
+    <BreadcrumbItem>
+      <BreadcrumbLink href="/">Home</BreadcrumbLink>
+    </BreadcrumbItem>
+    <BreadcrumbSeparator />
+    <BreadcrumbItem>
+      <BreadcrumbLink href="/products">Products</BreadcrumbLink>
+    </BreadcrumbItem>
+    <BreadcrumbSeparator />
+    <BreadcrumbItem>
+      <BreadcrumbPage>Laptop</BreadcrumbPage>
+    </BreadcrumbItem>
+  </BreadcrumbList>
+</Breadcrumb>
+```
+### Example 2
+```tsx
+// With ellipsis for long paths
+<Breadcrumb>
+  <BreadcrumbList>
+    <BreadcrumbItem>
+      <BreadcrumbLink href="/">Home</BreadcrumbLink>
+    </BreadcrumbItem>
+    <BreadcrumbSeparator />
+    <BreadcrumbItem>
+      <BreadcrumbEllipsis />
+    </BreadcrumbItem>
+    <BreadcrumbSeparator />
+    <BreadcrumbItem>
+      <BreadcrumbLink href="/products/laptops">Laptops</BreadcrumbLink>
+    </BreadcrumbItem>
+    <BreadcrumbSeparator />
+    <BreadcrumbItem>
+      <BreadcrumbPage>Gaming Laptop</BreadcrumbPage>
+    </BreadcrumbItem>
+  </BreadcrumbList>
+</Breadcrumb>
+```
+### Example 3
+```tsx
+// With Next.js Link integration using asChild
+import { Link } from "next/link"
+<Breadcrumb>
+  <BreadcrumbList>
+    <BreadcrumbItem>
+      <BreadcrumbLink asChild>
+        <Link href="/">Home</Link>
+      </BreadcrumbLink>
+    </BreadcrumbItem>
+    <BreadcrumbSeparator />
+    <BreadcrumbItem>
+      <BreadcrumbPage>Current Page</BreadcrumbPage>
+    </BreadcrumbItem>
+  </BreadcrumbList>
+</Breadcrumb>
+```
+### Example 4
+```tsx
+// With custom separator
+import { Slash } from "lucide-react"
+<Breadcrumb>
+  <BreadcrumbList>
+    <BreadcrumbItem>
+      <BreadcrumbLink href="/">Home</BreadcrumbLink>
+    </BreadcrumbItem>
+    <BreadcrumbSeparator>
+      <Slash />
+    </BreadcrumbSeparator>
+    <BreadcrumbItem>
+      <BreadcrumbPage>Current Page</BreadcrumbPage>
+    </BreadcrumbItem>
+  </BreadcrumbList>
+</Breadcrumb>
+```

package/.llm/button-group-separator.llm.md

@@ -0,0 +1,53 @@
+# ButtonGroupSeparator
+
+**Type**: component
+
+ButtonGroupSeparator - Visual divider for buttons within a button group A specialized separator component that creates visual divisions between buttons or elements within a ButtonGroup. Built on the Separator primitive with automatic sizing and styling to match button group layouts. The separator orientation typically matches the button group orientation (vertical separators in horizontal groups, horizontal separators in vertical groups). Key behaviors: - Self-stretches to match parent height/width automatically - Uses input border color for subtle visual division - Removes margins for seamless integration - Decorative by default (hidden from screen readers) Note: Separators are typically unnecessary for outline variant buttons since they already have visible borders. Use separators with ghost, default, or other variants where the visual separation is needed.
+
+## JSX Usage
+
+```jsx
+import { ButtonGroupSeparator } from '@neynar/ui';
+
+<ButtonGroupSeparator
+  orientation={value}
+  className="value"
+  decorative={true}
+/>
+```
+
+## Component Props
+
+### orientation
+- **Type**: `"horizontal" | "vertical"`
+- **Required**: No
+- **Description**: No description available
+
+### className
+- **Type**: `string`
+- **Required**: No
+- **Description**: No description available
+
+### decorative
+- **Type**: `boolean`
+- **Required**: No
+- **Description**: No description available
+
+## Examples
+
+### Example 1
+```tsx
+// Horizontal button group with vertical separators
+import { Button, ButtonGroup, ButtonGroupSeparator } from "
+### Example 2
+```tsx
+// Vertical button group with horizontal separators
+import { Button, ButtonGroup, ButtonGroupSeparator } from "
+### Example 3
+```tsx
+// Separating button group sections in toolbar
+import { Button, ButtonGroup, ButtonGroupSeparator } from "
+### Example 4
+```tsx
+// Separator with custom height for specific layouts
+import { Button, ButtonGroup, ButtonGroupSeparator } from "

package/.llm/button-group-text.llm.md

@@ -0,0 +1,56 @@
+# ButtonGroupText
+
+**Type**: component
+
+ButtonGroupText - Text display element for labels and information within button groups A styled text container designed to display non-interactive content within button groups, such as labels, pagination information, or contextual text. Maintains visual consistency with grouped buttons through matching height, border, and styling while being clearly non-interactive with a muted background. Common use cases: - Pagination counters ("Page 1 of 10") - Section labels ("Actions:", "Tools:") - Status indicators or counts - Contextual information between action buttons The component automatically: - Matches button group styling with appropriate borders and spacing - Sizes icons consistently at 16px (size-4) - Maintains visual hierarchy with muted background - Prevents pointer events on icons to avoid interaction confusion
+
+## JSX Usage
+
+```jsx
+import { ButtonGroupText } from '@neynar/ui';
+
+<ButtonGroupText
+  asChild={true}
+  className="value"
+>
+  {/* Your content here */}
+</ButtonGroupText>
+```
+
+## Component Props
+
+### asChild
+- **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
+
+### Example 1
+```tsx
+// Pagination with page count display
+import { Button, ButtonGroup, ButtonGroupText } from "
+### Example 2
+```tsx
+// Section label with action buttons
+import { Copy, Download } from "lucide-react"
+import { Button, ButtonGroup, ButtonGroupText, ButtonGroupSeparator } from "
+### Example 3
+```tsx
+// Status indicator with icon
+import { CheckCircle2 } from "lucide-react"
+import { ButtonGroup, ButtonGroupText } from "
+### Example 4
+```tsx
+// Custom composition with asChild
+import { ButtonGroup, ButtonGroupText } from "

package/.llm/button-group.llm.md

@@ -0,0 +1,81 @@
+# ButtonGroup
+
+**Type**: component
+
+ButtonGroup - Container for grouping related buttons with consistent styling A flexible container component that groups related action buttons together with seamless visual connection. Built for toolbars, pagination controls, action menus, and navigation interfaces. Supports both horizontal and vertical layouts with intelligent border and border-radius management to create cohesive button groups. The component automatically handles: - Border collapsing between adjacent buttons for seamless appearance - Focus state z-index management to ensure proper focus ring visibility - Integration with Button, Input, and Select components - Nested button group support for complex layouts - Responsive sizing that adapts to button content
+
+## JSX Usage
+
+```jsx
+import { ButtonGroup } from '@neynar/ui';
+
+<ButtonGroup
+  orientation={value}
+  className="value"
+  "aria-label"="value"
+  "aria-labelledby"="value"
+  "aria-describedby"="value"
+>
+  {/* Your content here */}
+</ButtonGroup>
+```
+
+## Component Props
+
+### orientation
+- **Type**: `"horizontal" | "vertical"`
+- **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
+
+### "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
+
+## Examples
+
+### Example 1
+```tsx
+// Basic horizontal button group (most common usage)
+import { Button, ButtonGroup } from "
+### Example 2
+```tsx
+// Vertical button group for navigation menus
+import { Button, ButtonGroup } from "
+### Example 3
+```tsx
+// Button group with icons and separators
+import { Copy, Download, Share2 } from "lucide-react"
+import { Button, ButtonGroup, ButtonGroupSeparator } from "
+### Example 4
+```tsx
+// Pagination controls with text element
+import { Button, ButtonGroup, ButtonGroupText } from "
+### Example 5
+```tsx
+// Toolbar with multiple grouped sections
+import { Button, ButtonGroup, ButtonGroupSeparator } from "
+### Example 6
+```tsx
+// Different button sizes in groups
+import { Button, ButtonGroup } from "

package/.llm/button.llm.md

@@ -0,0 +1,281 @@
+# Button
+
+**Type**: component
+
+Button - A versatile, accessible button component with multiple style variants A fundamental UI element built on Radix UI's Slot primitive that supports extensive customization through variants, composition patterns, and comprehensive accessibility features. The component automatically handles icon styling, focus management, form integration, and can be rendered as other elements using the asChild pattern.
+
+## JSX Usage
+
+```jsx
+import { Button } from '@neynar/ui';
+
+<Button
+  variant={value}
+  size={value}
+  asChild={true}
+  className="value"
+  disabled={true}
+  type={value}
+  onClick={handleClick}
+  onFocus={handleFocus}
+  onBlur={handleBlur}
+  onMouseEnter={handleMouseEnter}
+  onMouseLeave={handleMouseLeave}
+  "aria-label"="value"
+  "aria-describedby"="value"
+  "aria-invalid"={value}
+  "aria-expanded"={value}
+  "aria-controls"="value"
+  "aria-pressed"={value}
+  tabIndex={0}
+  autoFocus={true}
+  form="value"
+  formAction={() => {}}
+  formEncType="value"
+  formMethod="value"
+  formNoValidate={true}
+  formTarget="value"
+  name="value"
+  value={value}
+  ref={value}
+>
+  {/* Your content here */}
+</Button>
+```
+
+## Component Props
+
+### variant
+- **Type**: `| "default"
+    | "destructive"
+    | "outline"
+    | "secondary"
+    | "ghost"
+    | "link"`
+- **Required**: No
+- **Description**: No description available
+
+### size
+- **Type**: `"default" | "sm" | "lg" | "icon"`
+- **Required**: No
+- **Description**: No description available
+
+### asChild
+- **Type**: `boolean`
+- **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
+
+### disabled
+- **Type**: `boolean`
+- **Required**: No
+- **Description**: No description available
+
+### type
+- **Type**: `"button" | "submit" | "reset"`
+- **Required**: No
+- **Description**: No description available
+
+### onClick
+- **Type**: `React.MouseEventHandler<HTMLButtonElement>`
+- **Required**: No
+- **Description**: No description available
+
+### onFocus
+- **Type**: `React.FocusEventHandler<HTMLButtonElement>`
+- **Required**: No
+- **Description**: No description available
+
+### onBlur
+- **Type**: `React.FocusEventHandler<HTMLButtonElement>`
+- **Required**: No
+- **Description**: No description available
+
+### onMouseEnter
+- **Type**: `React.MouseEventHandler<HTMLButtonElement>`
+- **Required**: No
+- **Description**: No description available
+
+### onMouseLeave
+- **Type**: `React.MouseEventHandler<HTMLButtonElement>`
+- **Required**: No
+- **Description**: No description available
+
+### "aria-label"
+- **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
+
+### "aria-expanded"
+- **Type**: `React.AriaAttributes["aria-expanded"]`
+- **Required**: No
+- **Description**: No description available
+
+### "aria-controls"
+- **Type**: `string`
+- **Required**: No
+- **Description**: No description available
+
+### "aria-pressed"
+- **Type**: `boolean | "false" | "true" | "mixed"`
+- **Required**: No
+- **Description**: No description available
+
+### tabIndex
+- **Type**: `number`
+- **Required**: No
+- **Description**: No description available
+
+### autoFocus
+- **Type**: `boolean`
+- **Required**: No
+- **Description**: No description available
+
+### form
+- **Type**: `string`
+- **Required**: No
+- **Description**: No description available
+
+### formAction
+- **Type**: `string | ((formData: FormData) => void | Promise<void>)`
+- **Required**: No
+- **Description**: No description available
+
+### formEncType
+- **Type**: `string`
+- **Required**: No
+- **Description**: No description available
+
+### formMethod
+- **Type**: `string`
+- **Required**: No
+- **Description**: No description available
+
+### formNoValidate
+- **Type**: `boolean`
+- **Required**: No
+- **Description**: No description available
+
+### formTarget
+- **Type**: `string`
+- **Required**: No
+- **Description**: No description available
+
+### name
+- **Type**: `string`
+- **Required**: No
+- **Description**: No description available
+
+### value
+- **Type**: `string | ReadonlyArray<string> | number`
+- **Required**: No
+- **Description**: No description available
+
+### ref
+- **Type**: `React.Ref<HTMLButtonElement>`
+- **Required**: No
+- **Description**: No description available
+
+## Examples
+
+### Example 1
+```tsx
+// Basic usage with different variants
+<Button>Default Button</Button>
+<Button variant="destructive">Delete Item</Button>
+<Button variant="outline" size="lg">Large Outline</Button>
+<Button variant="ghost" size="sm">Small Ghost</Button>
+<Button variant="link">Link Button</Button>
+```
+### Example 2
+```tsx
+// Icon usage (automatically styled with proper spacing)
+import { Download, ArrowRight, Plus, Trash2 } from "lucide-react";
+<Button>
+  <Download className="mr-2" /> Download File
+</Button>
+<Button variant="outline">
+  Continue <ArrowRight className="ml-2" />
+</Button>
+// Icon-only button (always include aria-label)
+<Button size="icon" aria-label="Add new item">
+  <Plus />
+</Button>
+<Button size="icon" variant="destructive" aria-label="Delete item">
+  <Trash2 />
+</Button>
+```
+### Example 3
+```tsx
+// Composition with asChild (render as different elements)
+import Link from "next/link";
+import { ExternalLink } from "lucide-react";
+<Button asChild>
+  <Link href="/dashboard">Go to Dashboard</Link>
+</Button>
+<Button asChild variant="outline">
+  <a href="https://example.com" target="_blank" rel="noopener noreferrer">
+    External Link <ExternalLink className="ml-2 h-4 w-4" />
+  </a>
+</Button>
+```
+### Example 4
+```tsx
+// Form integration and states
+<Button type="submit" disabled={isSubmitting}>
+  {isSubmitting ? "Submitting..." : "Submit Form"}
+</Button>
+<Button
+  variant="destructive"
+  onClick={() => handleDelete()}
+  aria-describedby="delete-warning"
+>
+  Delete Account
+</Button>
+<p id="delete-warning" className="sr-only">
+  This action cannot be undone
+</p>
+// Toggle button with pressed state
+<Button
+  variant="outline"
+  aria-pressed={isToggled}
+  onClick={() => setIsToggled(!isToggled)}
+>
+  {isToggled ? "Enabled" : "Disabled"}
+</Button>
+```
+### Example 5
+```tsx
+// Loading states and advanced usage
+import { Loader2, Save } from "lucide-react";
+<Button disabled={isLoading}>
+  {isLoading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+  {isLoading ? "Saving..." : "Save Changes"}
+</Button>
+// With custom styling
+<Button
+  className="bg-gradient-to-r from-purple-500 to-pink-500 hover:from-purple-600 hover:to-pink-600"
+  size="lg"
+>
+  Gradient Button
+</Button>
+```

package/.llm/calendar-day-button.llm.md

@@ -0,0 +1,57 @@
+# CalendarDayButton
+
+**Type**: component
+
+CalendarDayButton - Individual day button component for calendar dates Renders a single interactive day button with appropriate styling for different states including selected, today, disabled, and range selection indicators. This component is used internally by the Calendar component but can be customized if needed.
+
+## JSX Usage
+
+```jsx
+import { CalendarDayButton } from '@neynar/ui';
+
+<CalendarDayButton
+  className={value}
+  day={value}
+  modifiers={value}
+  ...props={value}
+/>
+```
+
+## Component Props
+
+### className
+- **Type**: `unknown`
+- **Required**: Yes
+- **Description**: No description available
+
+### day
+- **Type**: `unknown`
+- **Required**: Yes
+- **Description**: No description available
+
+### modifiers
+- **Type**: `unknown`
+- **Required**: Yes
+- **Description**: No description available
+
+### ...props
+- **Type**: `unknown`
+- **Required**: Yes
+- **Description**: No description available
+
+## Examples
+
+```tsx
+// Used internally by Calendar component
+<CalendarDayButton
+  day={dayObject}
+  modifiers={{
+    selected: true,
+    today: false,
+    disabled: false,
+    range_start: false,
+    range_end: false,
+    range_middle: false
+  }}
+/>
+```