@neynar/ui 0.1.2 → 0.2.0

package/llm-docs/breadcrumb-link.llm.md

@@ -0,0 +1,84 @@
+# BreadcrumbLink
+
+**Type**: component
+
+Navigable link within breadcrumb trail Represents a clickable parent page in the breadcrumb hierarchy with smooth hover effects and transition animations. Supports composition via the `asChild` prop for seamless integration with routing libraries like Next.js Link, React Router, or Reach Router using the Radix UI Slot primitive for prop merging. Built on Radix UI Slot primitive which enables the asChild pattern - when asChild is true, the component merges its props with the immediate child element instead of rendering its own anchor tag. This allows for flexible composition while maintaining consistent styling and behavior.
+
+## JSX Usage
+
+```jsx
+import { BreadcrumbLink } from '@neynar/ui';
+
+<BreadcrumbLink
+  asChild={true}
+  className="value"
+  href="value"
+  onClick={handleClick}
+>
+  {/* Your content here */}
+</BreadcrumbLink>
+```
+
+## Component Props
+
+### asChild
+- **Type**: `boolean`
+- **Required**: No
+- **Description**: When true, merges props with child element instead of rendering anchor. Enables composition with routing components
+
+### className
+- **Type**: `string`
+- **Required**: No
+- **Description**: Additional CSS classes to apply to the link element
+
+### href
+- **Type**: `string`
+- **Required**: No
+- **Description**: Link destination URL (when asChild is false)
+
+### children
+- **Type**: `React.ReactNode`
+- **Required**: No
+- **Description**: Link content to display (text, icons, etc.)
+
+### onClick
+- **Type**: `(event: React.MouseEvent<HTMLAnchorElement>) => void`
+- **Required**: No
+- **Description**: Click handler for the link interaction
+
+## Examples
+
+### Example 1
+```tsx
+// Standard anchor link
+<BreadcrumbLink href="/products">Products</BreadcrumbLink>
+```
+### Example 2
+```tsx
+// With Next.js Link using asChild
+import { Link } from "next/link"
+<BreadcrumbLink asChild>
+  <Link href="/products">Products</Link>
+</BreadcrumbLink>
+```
+### Example 3
+```tsx
+// With React Router Link
+import { Link } from "react-router-dom"
+<BreadcrumbLink asChild>
+  <Link to="/products">Products</Link>
+</BreadcrumbLink>
+```
+### Example 4
+```tsx
+// With click handler
+<BreadcrumbLink
+  href="/products"
+  onClick={(e) => {
+    e.preventDefault();
+    navigate('/products');
+  }}
+>
+  Products
+</BreadcrumbLink>
+```

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

@@ -0,0 +1,54 @@
+# BreadcrumbList
+
+**Type**: component
+
+Ordered list container for breadcrumb items Provides the structured list layout for breadcrumb navigation items with responsive spacing and text overflow handling. Uses semantic `ol` element for proper accessibility and screen reader navigation. Contains flexible layout with word breaking and responsive gap adjustments.
+
+## JSX Usage
+
+```jsx
+import { BreadcrumbList } from '@neynar/ui';
+
+<BreadcrumbList
+  className="value"
+>
+  {/* Your content here */}
+</BreadcrumbList>
+```
+
+## Component Props
+
+### className
+- **Type**: `string`
+- **Required**: No
+- **Description**: Additional CSS classes to apply to the ordered list element
+
+### children
+- **Type**: `React.ReactNode`
+- **Required**: No
+- **Description**: Child breadcrumb items (BreadcrumbItem elements)
+
+## Examples
+
+### Example 1
+```tsx
+// Basic list with multiple items
+<BreadcrumbList>
+  <BreadcrumbItem>
+    <BreadcrumbLink href="/">Home</BreadcrumbLink>
+  </BreadcrumbItem>
+  <BreadcrumbSeparator />
+  <BreadcrumbItem>
+    <BreadcrumbPage>Current</BreadcrumbPage>
+  </BreadcrumbItem>
+</BreadcrumbList>
+```
+### Example 2
+```tsx
+// With custom styling
+<BreadcrumbList className="gap-4 text-base">
+  <BreadcrumbItem>
+    <BreadcrumbLink href="/">Home</BreadcrumbLink>
+  </BreadcrumbItem>
+</BreadcrumbList>
+```

package/llm-docs/breadcrumb-page.llm.md

@@ -0,0 +1,52 @@
+# BreadcrumbPage
+
+**Type**: component
+
+Current page indicator in breadcrumb trail Represents the current page (non-clickable) at the end of the breadcrumb trail. Styled with prominent text color and marked with comprehensive accessibility attributes including `aria-current="page"` for precise screen reader identification of the user's current location within the site hierarchy. This component uses specific ARIA attributes to indicate it represents a link-like element that is disabled, providing semantic meaning while maintaining the visual breadcrumb structure. The `aria-current="page"` attribute is the standard way to identify the current page in navigation components.
+
+## JSX Usage
+
+```jsx
+import { BreadcrumbPage } from '@neynar/ui';
+
+<BreadcrumbPage
+  className="value"
+>
+  {/* Your content here */}
+</BreadcrumbPage>
+```
+
+## Component Props
+
+### className
+- **Type**: `string`
+- **Required**: No
+- **Description**: Additional CSS classes to apply to the span element
+
+### children
+- **Type**: `React.ReactNode`
+- **Required**: No
+- **Description**: Current page name or content to display
+
+## Examples
+
+### Example 1
+```tsx
+// Simple page name
+<BreadcrumbPage>Current Page Name</BreadcrumbPage>
+```
+### Example 2
+```tsx
+// With icon and text
+<BreadcrumbPage>
+  <FileIcon className="mr-1" />
+  Document.pdf
+</BreadcrumbPage>
+```
+### Example 3
+```tsx
+// With custom styling
+<BreadcrumbPage className="font-semibold text-primary">
+  Important Page
+</BreadcrumbPage>
+```

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

@@ -0,0 +1,60 @@
+# BreadcrumbSeparator
+
+**Type**: component
+
+Visual separator between breadcrumb items Displays a separator icon (default: ChevronRight) between breadcrumb items to provide visual hierarchy and direction in the breadcrumb trail. Supports complete customization with any icon or content. Properly hidden from assistive technologies with accessibility attributes for clean screen reader navigation experience. The component uses CSS sizing constraints to ensure consistent icon sizing across different separator types and maintains visual alignment within the breadcrumb flow.
+
+## JSX Usage
+
+```jsx
+import { BreadcrumbSeparator } from '@neynar/ui';
+
+<BreadcrumbSeparator
+  className="value"
+>
+  {/* Your content here */}
+</BreadcrumbSeparator>
+```
+
+## Component Props
+
+### children
+- **Type**: `React.ReactNode`
+- **Required**: No
+- **Description**: Custom separator icon or content to display instead of default ChevronRight. Typically Lucide icons like Slash, ArrowRight, etc.
+
+### className
+- **Type**: `string`
+- **Required**: No
+- **Description**: Additional CSS classes to apply to the list item container
+
+## Examples
+
+### Example 1
+```tsx
+// Default ChevronRight separator
+<BreadcrumbSeparator />
+```
+### Example 2
+```tsx
+// Custom Slash separator
+import { Slash } from "lucide-react"
+<BreadcrumbSeparator>
+  <Slash />
+</BreadcrumbSeparator>
+```
+### Example 3
+```tsx
+// Arrow right separator
+import { ArrowRight } from "lucide-react"
+<BreadcrumbSeparator>
+  <ArrowRight />
+</BreadcrumbSeparator>
+```
+### Example 4
+```tsx
+// Text separator
+<BreadcrumbSeparator>
+  <span className="text-muted-foreground">/</span>
+</BreadcrumbSeparator>
+```

package/llm-docs/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-docs/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-docs/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
+  }}
+/>
+```