@neynar/ui 0.3.0 → 0.3.1

package/.llm/item.llm.md

@@ -0,0 +1,115 @@
+# Item
+
+**Type**: component
+
+Item - Flexible container for displaying structured content A composable component for creating rich list items, cards, and data displays. Built with a slot-based architecture allowing flexible combinations of media, content, actions, headers, and footers. Supports rendering as any HTML element via the asChild prop for semantic flexibility (e.g., links, buttons).
+
+## JSX Usage
+
+```jsx
+import { Item } from '@neynar/ui';
+
+<Item
+  variant={value}
+  size={value}
+  asChild={true}
+  className="value"
+>
+  {/* Your content here */}
+</Item>
+```
+
+## Component Props
+
+### variant
+- **Type**: `"default" | "outline" | "muted"`
+- **Required**: No
+- **Description**: No description available
+
+### size
+- **Type**: `"default" | "sm"`
+- **Required**: No
+- **Description**: No description available
+
+### 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
+// Basic item with icon and content
+<Item>
+  <ItemMedia variant="icon">
+    <FileText />
+  </ItemMedia>
+  <ItemContent>
+    <ItemTitle>Document.pdf</ItemTitle>
+    <ItemDescription>Last modified today</ItemDescription>
+  </ItemContent>
+</Item>
+```
+### Example 2
+```tsx
+// Item as a clickable link with asChild
+<Item asChild>
+  <a href="/dashboard">
+    <ItemMedia variant="icon">
+      <Home />
+    </ItemMedia>
+    <ItemContent>
+      <ItemTitle>Dashboard</ItemTitle>
+      <ItemDescription>View your account overview</ItemDescription>
+    </ItemContent>
+    <ItemActions>
+      <ChevronRight />
+    </ItemActions>
+  </a>
+</Item>
+```
+### Example 3
+```tsx
+// Rich item with header, footer, and actions
+<Item variant="outline">
+  <ItemMedia variant="image">
+    <img src="/avatar.jpg" alt="User" />
+  </ItemMedia>
+  <ItemContent>
+    <ItemHeader>
+      <ItemTitle>John Doe</ItemTitle>
+      <Badge>Pro</Badge>
+    </ItemHeader>
+    <ItemDescription>Product Manager</ItemDescription>
+    <ItemFooter>
+      <span className="text-xs">Last active 5m ago</span>
+    </ItemFooter>
+  </ItemContent>
+  <ItemActions>
+    <Button size="sm">Message</Button>
+  </ItemActions>
+</Item>
+```
+### Example 4
+```tsx
+// Small size variant for compact layouts
+<Item size="sm">
+  <ItemContent>
+    <ItemTitle>Settings</ItemTitle>
+  </ItemContent>
+  <ItemActions>
+    <ChevronRight className="size-4" />
+  </ItemActions>
+</Item>
+```

package/.llm/kbd-group.llm.md

@@ -0,0 +1,71 @@
+# KbdGroup
+
+**Type**: component
+
+KbdGroup - Group multiple keyboard keys together A container component for grouping multiple Kbd components to represent complex keyboard shortcuts or key combinations. Automatically handles spacing between individual keys and provides semantic grouping. Useful for displaying shortcuts like "Ctrl+Shift+P" or "Cmd+K".
+
+## JSX Usage
+
+```jsx
+import { KbdGroup } from '@neynar/ui';
+
+<KbdGroup
+  className="value"
+>
+  {/* Your content here */}
+</KbdGroup>
+```
+
+## Component Props
+
+### className
+- **Type**: `string`
+- **Required**: No
+- **Description**: No description available
+
+### children
+- **Type**: `React.ReactNode`
+- **Required**: No
+- **Description**: No description available
+
+## Examples
+
+### Example 1
+```tsx
+// Basic keyboard shortcut
+<KbdGroup>
+  <Kbd>Ctrl</Kbd>
+  <Kbd>C</Kbd>
+</KbdGroup>
+```
+### Example 2
+```tsx
+// Multiple modifier keys
+<KbdGroup>
+  <Kbd>⌘</Kbd>
+  <Kbd>⇧</Kbd>
+  <Kbd>P</Kbd>
+</KbdGroup>
+```
+### Example 3
+```tsx
+// With custom separators using text
+<KbdGroup>
+  <Kbd>Ctrl</Kbd>
+  <span className="text-muted-foreground">+</span>
+  <Kbd>Alt</Kbd>
+  <span className="text-muted-foreground">+</span>
+  <Kbd>Delete</Kbd>
+</KbdGroup>
+```
+### Example 4
+```tsx
+// In a command palette or menu item
+<div className="flex items-center justify-between">
+  <span>Open command palette</span>
+  <KbdGroup>
+    <Kbd>⌘</Kbd>
+    <Kbd>K</Kbd>
+  </KbdGroup>
+</div>
+```

package/.llm/kbd.llm.md

@@ -0,0 +1,71 @@
+# Kbd
+
+**Type**: component
+
+Kbd - Display keyboard input and shortcuts A semantic component for representing keyboard keys, shortcuts, and input in documentation, tutorials, and UI instructions. Uses the HTML kbd element with consistent styling for monospace text, subtle background, and appropriate sizing. Supports icons, text, and modifier keys like Cmd, Shift, Ctrl, and Alt.
+
+## JSX Usage
+
+```jsx
+import { Kbd } from '@neynar/ui';
+
+<Kbd
+  className="value"
+>
+  {/* Your content here */}
+</Kbd>
+```
+
+## Component Props
+
+### className
+- **Type**: `string`
+- **Required**: No
+- **Description**: No description available
+
+### children
+- **Type**: `React.ReactNode`
+- **Required**: No
+- **Description**: No description available
+
+## Examples
+
+### Example 1
+```tsx
+// Display a single keyboard key
+<Kbd>K</Kbd>
+```
+### Example 2
+```tsx
+// Display keyboard shortcuts with modifiers
+<KbdGroup>
+  <Kbd>⌘</Kbd>
+  <Kbd>K</Kbd>
+</KbdGroup>
+```
+### Example 3
+```tsx
+// Display keyboard shortcuts in help text
+<p>
+  Press <Kbd>Ctrl</Kbd> + <Kbd>S</Kbd> to save your work
+</p>
+```
+### Example 4
+```tsx
+// Complex keyboard shortcut with multiple modifiers
+<KbdGroup>
+  <Kbd>Ctrl</Kbd>
+  <Kbd>Shift</Kbd>
+  <Kbd>P</Kbd>
+</KbdGroup>
+```
+### Example 5
+```tsx
+// Display keyboard shortcuts with icons
+<KbdGroup>
+  <Kbd>
+    <Command className="h-3 w-3" />
+  </Kbd>
+  <Kbd>K</Kbd>
+</KbdGroup>
+```

package/.llm/label.llm.md

@@ -0,0 +1,145 @@
+# Label
+
+**Type**: component
+
+Label component for form controls with full accessibility support A fundamental form component that provides accessible text labels for form controls. Built on Radix UI Label primitive, it automatically associates with form elements and expands their clickable area for improved usability and accessibility. Essential for creating accessible forms that meet WCAG guidelines.
+
+## JSX Usage
+
+```jsx
+import { Label } from '@neynar/ui';
+
+<Label
+  className="value"
+  htmlFor="value"
+  asChild={true}
+  onClick={handleClick}
+  onKeyDown={handleKeyDown}
+  id="value"
+  style={value}
+  tabIndex={0}
+  "aria-label"="value"
+  "aria-describedby"="value"
+  "aria-invalid"={true}
+  "aria-required"={true}
+>
+  {/* Your content here */}
+</Label>
+```
+
+## Component Props
+
+### className
+- **Type**: `string`
+- **Required**: No
+- **Description**: No description available
+
+### htmlFor
+- **Type**: `string`
+- **Required**: No
+- **Description**: No description available
+
+### children
+- **Type**: `React.ReactNode`
+- **Required**: No
+- **Description**: No description available
+
+### asChild
+- **Type**: `boolean`
+- **Required**: No
+- **Description**: No description available
+
+### onClick
+- **Type**: `React.MouseEventHandler<HTMLLabelElement>`
+- **Required**: No
+- **Description**: No description available
+
+### onKeyDown
+- **Type**: `React.KeyboardEventHandler<HTMLLabelElement>`
+- **Required**: No
+- **Description**: No description available
+
+### id
+- **Type**: `string`
+- **Required**: No
+- **Description**: No description available
+
+### style
+- **Type**: `React.CSSProperties`
+- **Required**: No
+- **Description**: No description available
+
+### tabIndex
+- **Type**: `number`
+- **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`
+- **Required**: No
+- **Description**: No description available
+
+### "aria-required"
+- **Type**: `boolean`
+- **Required**: No
+- **Description**: No description available
+
+## Examples
+
+### Example 1
+```tsx
+// Basic label with input
+<div className="space-y-2">
+  <Label htmlFor="email">Email address</Label>
+  <Input id="email" type="email" placeholder="Enter your email" />
+</div>
+```
+### Example 2
+```tsx
+// Required field with indicator
+<Label htmlFor="username">
+  Username <span className="text-destructive">*</span>
+</Label>
+<Input id="username" required />
+```
+### Example 3
+```tsx
+// Checkbox with label
+<div className="flex items-center space-x-2">
+  <Checkbox id="terms" />
+  <Label htmlFor="terms" className="text-sm font-normal">
+    I agree to the terms and conditions
+  </Label>
+</div>
+```
+### Example 4
+```tsx
+// Label with helper text
+<div className="space-y-1">
+  <Label htmlFor="password">Password</Label>
+  <Input id="password" type="password" />
+  <p className="text-sm text-muted-foreground">
+    Must be at least 8 characters long
+  </p>
+</div>
+```
+### Example 5
+```tsx
+// Complex label with nested content
+<Label htmlFor="plan" className="flex flex-col space-y-1 cursor-pointer">
+  <span className="font-semibold">Choose your plan</span>
+  <span className="text-sm text-muted-foreground">
+    You can upgrade or downgrade anytime
+  </span>
+</Label>
+```

package/.llm/lead.llm.md

@@ -0,0 +1,114 @@
+# Lead
+
+**Type**: component
+
+Lead - Introductory paragraph component for article openings Lead paragraph for article introductions, page descriptions, and summary content. Uses "subheading" variant with muted color for visual hierarchy.
+
+## JSX Usage
+
+```jsx
+import { Lead } from '@neynar/ui';
+
+<Lead
+  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 */}
+</Lead>
+```
+
+## 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
+// Article introduction
+<Lead>
+  This comprehensive guide covers everything you need to know about
+  building modern web applications with React and TypeScript.
+</Lead>
+// Page description
+<Lead className="mb-8">
+  Discover powerful APIs and tools to build the next generation
+  of social applications on Farcaster.
+</Lead>
+// With custom color
+<Lead color="default">
+  This lead paragraph uses the default text color for more prominence.
+</Lead>
+```

package/.llm/menubar-checkbox-item.llm.md

@@ -0,0 +1,66 @@
+# MenubarCheckboxItem
+
+**Type**: component
+
+A menu item that can be checked/unchecked. Perfect for toggle options like "Show Toolbar", "Enable Feature", or any binary setting that can be turned on/off. Displays a checkmark icon when checked.
+
+## JSX Usage
+
+```jsx
+import { MenubarCheckboxItem } from '@neynar/ui';
+
+<MenubarCheckboxItem
+  className="value"
+  checked={value}
+  onCheckedChange={handleCheckedChange}
+  disabled={true}
+  onSelect={handleSelect}
+  textValue="value"
+>
+  {/* Your content here */}
+</MenubarCheckboxItem>
+```
+
+## Component Props
+
+### className
+- **Type**: `string`
+- **Required**: No
+- **Description**: Additional CSS classes to apply to the checkbox item
+
+### checked
+- **Type**: `boolean | "indeterminate"`
+- **Required**: No
+- **Description**: The controlled checked state of the item. Must be used in conjunction with onCheckedChange
+
+### onCheckedChange
+- **Type**: `(checked: boolean) => void`
+- **Required**: No
+- **Description**: Event handler called when the checked state changes
+
+### disabled
+- **Type**: `boolean`
+- **Required**: No
+- **Description**: When true, prevents the user from interacting with the item
+
+### onSelect
+- **Type**: `(event: Event) => void`
+- **Required**: No
+- **Description**: Event handler called when the user selects an item (via mouse or keyboard)
+
+### textValue
+- **Type**: `string`
+- **Required**: No
+- **Description**: Optional text used for typeahead purposes when content is complex
+
+## Examples
+
+```tsx
+<MenubarCheckboxItem
+  checked={showLineNumbers}
+  onCheckedChange={setShowLineNumbers}
+>
+  Show Line Numbers
+</MenubarCheckboxItem>
+```
+/

package/.llm/menubar-content.llm.md

@@ -0,0 +1,128 @@
+# MenubarContent
+
+**Type**: component
+
+Dropdown content container for menu items. Contains the actual menu items, separators, and submenus that appear when a MenubarTrigger is activated. Automatically portaled and positioned.
+
+## JSX Usage
+
+```jsx
+import { MenubarContent } from '@neynar/ui';
+
+<MenubarContent
+  className="value"
+  align={value}
+  alignOffset={0}
+  sideOffset={0}
+  side={value}
+  avoidCollisions={true}
+  collisionBoundary={value}
+  arrowPadding={0}
+  sticky={value}
+  hideWhenDetached={true}
+  loop={true}
+  onEscapeKeyDown={handleEscapeKeyDown}
+  onPointerDownOutside={handlePointerDownOutside}
+  onFocusOutside={handleFocusOutside}
+  onInteractOutside={handleInteractOutside}
+  forceMount={value}
+/>
+```
+
+## Component Props
+
+### className
+- **Type**: `string`
+- **Required**: No
+- **Description**: Additional CSS classes to apply to the content container
+
+### align
+- **Type**: `"start" | "center" | "end"`
+- **Required**: No
+- **Description**: The preferred alignment against the trigger. May change when collisions occur
+
+### alignOffset
+- **Type**: `number`
+- **Required**: No
+- **Description**: An offset in pixels from the "start" or "end" alignment options
+
+### sideOffset
+- **Type**: `number`
+- **Required**: No
+- **Description**: The distance in pixels from the trigger
+
+### side
+- **Type**: `"top" | "right" | "bottom" | "left"`
+- **Required**: No
+- **Description**: The preferred side of the trigger to render against when open
+
+### avoidCollisions
+- **Type**: `boolean`
+- **Required**: No
+- **Description**: When true, overrides the side and align preferences to prevent collisions with viewport edges
+
+### collisionBoundary
+- **Type**: `Element | null | Array<Element | null>`
+- **Required**: No
+- **Description**: The element used as the collision boundary for positioning
+
+### arrowPadding
+- **Type**: `number`
+- **Required**: No
+- **Description**: No description available
+
+### sticky
+- **Type**: `"partial" | "always"`
+- **Required**: No
+- **Description**: No description available
+
+### hideWhenDetached
+- **Type**: `boolean`
+- **Required**: No
+- **Description**: No description available
+
+### loop
+- **Type**: `boolean`
+- **Required**: No
+- **Description**: Whether keyboard navigation should loop from last item to first, and vice versa
+
+### onEscapeKeyDown
+- **Type**: `(event: KeyboardEvent) => void`
+- **Required**: No
+- **Description**: Event handler called when the escape key is down
+
+### onPointerDownOutside
+- **Type**: `(
+    event: CustomEvent<{ originalEvent: PointerEvent }>,
+  ) => void`
+- **Required**: No
+- **Description**: Event handler called when a pointerdown event happens outside of the component
+
+### onFocusOutside
+- **Type**: `(event: CustomEvent<{ originalEvent: FocusEvent }>) => void`
+- **Required**: No
+- **Description**: Event handler called when focus moves outside of the component
+
+### onInteractOutside
+- **Type**: `(
+    event: CustomEvent<{ originalEvent: PointerEvent | FocusEvent }>,
+  ) => void`
+- **Required**: No
+- **Description**: Event handler called when an interaction happens outside the component
+
+### forceMount
+- **Type**: `true`
+- **Required**: No
+- **Description**: No description available
+
+## Examples
+
+```tsx
+<MenubarContent align="center" sideOffset={12}>
+  <MenubarItem>New File</MenubarItem>
+  <MenubarItem>Open File</MenubarItem>
+  <MenubarSeparator />
+  <MenubarItem>Exit</MenubarItem>
+</MenubarContent>
+```
+/