@neynar/ui 0.3.0 → 0.3.1

package/.llm/menubar-group.llm.md

@@ -0,0 +1,40 @@
+# MenubarGroup
+
+**Type**: component
+
+Groups related menu items together within MenubarContent. Used to create logical groupings of menu items, often separated by MenubarSeparator components. Helps organize complex menus.
+
+## JSX Usage
+
+```jsx
+import { MenubarGroup } from '@neynar/ui';
+
+<MenubarGroup
+  ...props={value}
+/>
+```
+
+## Component Props
+
+### ...props
+- **Type**: `unknown`
+- **Required**: Yes
+- **Description**: No description available
+
+## Examples
+
+```tsx
+<MenubarContent>
+  <MenubarGroup>
+    <MenubarItem>Cut</MenubarItem>
+    <MenubarItem>Copy</MenubarItem>
+    <MenubarItem>Paste</MenubarItem>
+  </MenubarGroup>
+  <MenubarSeparator />
+  <MenubarGroup>
+    <MenubarItem>Find</MenubarItem>
+    <MenubarItem>Replace</MenubarItem>
+  </MenubarGroup>
+</MenubarContent>
+```
+/

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

@@ -0,0 +1,62 @@
+# MenubarItem
+
+**Type**: component
+
+A selectable menu item within MenubarContent. Can be enhanced with icons, keyboard shortcuts, and supports different variants including destructive actions. Automatically handles selection events and keyboard navigation.
+
+## JSX Usage
+
+```jsx
+import { MenubarItem } from '@neynar/ui';
+
+<MenubarItem
+  className="value"
+  inset={true}
+  variant={value}
+  disabled={true}
+  onSelect={handleSelect}
+  textValue="value"
+/>
+```
+
+## Component Props
+
+### className
+- **Type**: `string`
+- **Required**: No
+- **Description**: Additional CSS classes to apply to the menu item
+
+### inset
+- **Type**: `boolean`
+- **Required**: No
+- **Description**: Whether to add left padding for alignment with items that have icons
+
+### variant
+- **Type**: `"default" | "destructive"`
+- **Required**: No
+- **Description**: Visual variant of the menu item
+
+### 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
+<MenubarItem onSelect={() => deleteFile()} variant="destructive">
+  Delete File
+  <MenubarShortcut>⌫</MenubarShortcut>
+</MenubarItem>
+```
+/

package/.llm/menubar-label.llm.md

@@ -0,0 +1,40 @@
+# MenubarLabel
+
+**Type**: component
+
+A non-interactive label for grouping menu items. Used to provide section headings within menu content, helping users understand the organization of menu items. Cannot be focused or selected.
+
+## JSX Usage
+
+```jsx
+import { MenubarLabel } from '@neynar/ui';
+
+<MenubarLabel
+  className="value"
+  inset={true}
+/>
+```
+
+## Component Props
+
+### className
+- **Type**: `string`
+- **Required**: No
+- **Description**: Additional CSS classes to apply to the label
+
+### inset
+- **Type**: `boolean`
+- **Required**: No
+- **Description**: Whether to add left padding for alignment with items that have icons
+
+## Examples
+
+```tsx
+<MenubarContent>
+  <MenubarLabel>Recent Files</MenubarLabel>
+  <MenubarSeparator />
+  <MenubarItem>document.txt</MenubarItem>
+  <MenubarItem>photo.jpg</MenubarItem>
+</MenubarContent>
+```
+/

package/.llm/menubar-menu.llm.md

@@ -0,0 +1,32 @@
+# MenubarMenu
+
+**Type**: component
+
+Container for a single menu within the menubar. Each MenubarMenu represents one dropdown menu that can be triggered by its corresponding MenubarTrigger. Must be used within a Menubar root.
+
+## JSX Usage
+
+```jsx
+import { MenubarMenu } from '@neynar/ui';
+
+<MenubarMenu
+  value="value"
+/>
+```
+
+## Component Props
+
+### value
+- **Type**: `string`
+- **Required**: No
+- **Description**: The unique value of the menu for controlled state management
+
+## Examples
+
+```tsx
+<MenubarMenu value="edit">
+  <MenubarTrigger>Edit</MenubarTrigger>
+  <MenubarContent>...</MenubarContent>
+</MenubarMenu>
+```
+/

package/.llm/menubar-portal.llm.md

@@ -0,0 +1,38 @@
+# MenubarPortal
+
+**Type**: component
+
+Portal for rendering menu content outside the DOM hierarchy. Automatically used by MenubarContent to ensure proper layering and positioning of dropdown menus. Prevents z-index conflicts.
+
+## JSX Usage
+
+```jsx
+import { MenubarPortal } from '@neynar/ui';
+
+<MenubarPortal
+  forceMount={value}
+  container={value}
+/>
+```
+
+## Component Props
+
+### forceMount
+- **Type**: `true`
+- **Required**: No
+- **Description**: Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries
+
+### container
+- **Type**: `HTMLElement`
+- **Required**: No
+- **Description**: Specify a container element to portal the content into
+
+## Examples
+
+```tsx
+// Usually used automatically by MenubarContent
+<MenubarPortal container={customContainer}>
+  <MenubarPrimitive.Content>...</MenubarPrimitive.Content>
+</MenubarPortal>
+```
+/

package/.llm/menubar-radio-group.llm.md

@@ -0,0 +1,39 @@
+# MenubarRadioGroup
+
+**Type**: component
+
+Container for mutually exclusive radio items. Use for single-selection scenarios like theme selection, view modes, or other settings where only one option can be active. Only one RadioItem can be selected at a time within the group.
+
+## JSX Usage
+
+```jsx
+import { MenubarRadioGroup } from '@neynar/ui';
+
+<MenubarRadioGroup
+  value="value"
+  onValueChange={handleValueChange}
+/>
+```
+
+## Component Props
+
+### value
+- **Type**: `string`
+- **Required**: No
+- **Description**: The controlled value of the radio item to check. Should be used in conjunction with onValueChange
+
+### onValueChange
+- **Type**: `(value: string) => void`
+- **Required**: No
+- **Description**: Event handler called when the value changes
+
+## Examples
+
+```tsx
+<MenubarRadioGroup value={theme} onValueChange={setTheme}>
+  <MenubarRadioItem value="light">Light</MenubarRadioItem>
+  <MenubarRadioItem value="dark">Dark</MenubarRadioItem>
+  <MenubarRadioItem value="system">System</MenubarRadioItem>
+</MenubarRadioGroup>
+```
+/

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

@@ -0,0 +1,59 @@
+# MenubarRadioItem
+
+**Type**: component
+
+A menu item for single selection within a MenubarRadioGroup. Use within MenubarRadioGroup for mutually exclusive options. Only one radio item can be selected at a time within the group. Displays a filled circle icon when selected.
+
+## JSX Usage
+
+```jsx
+import { MenubarRadioItem } from '@neynar/ui';
+
+<MenubarRadioItem
+  className="value"
+  value="value"
+  disabled={true}
+  onSelect={handleSelect}
+  textValue="value"
+>
+  {/* Your content here */}
+</MenubarRadioItem>
+```
+
+## Component Props
+
+### className
+- **Type**: `string`
+- **Required**: No
+- **Description**: Additional CSS classes to apply to the radio item
+
+### value
+- **Type**: `string`
+- **Required**: Yes
+- **Description**: The unique value of the item (required)
+
+### 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
+<MenubarRadioGroup value={theme} onValueChange={setTheme}>
+  <MenubarRadioItem value="light">Light Theme</MenubarRadioItem>
+  <MenubarRadioItem value="dark">Dark Theme</MenubarRadioItem>
+  <MenubarRadioItem value="system">System Theme</MenubarRadioItem>
+</MenubarRadioGroup>
+```
+/

package/.llm/menubar-separator.llm.md

@@ -0,0 +1,35 @@
+# MenubarSeparator
+
+**Type**: component
+
+A visual divider between menu items. Use to create logical groupings and improve visual hierarchy within menu content. Creates clear sections for related items.
+
+## JSX Usage
+
+```jsx
+import { MenubarSeparator } from '@neynar/ui';
+
+<MenubarSeparator
+  className="value"
+/>
+```
+
+## Component Props
+
+### className
+- **Type**: `string`
+- **Required**: No
+- **Description**: Additional CSS classes to apply to the separator
+
+## Examples
+
+```tsx
+<MenubarContent>
+  <MenubarItem>New</MenubarItem>
+  <MenubarItem>Open</MenubarItem>
+  <MenubarSeparator />
+  <MenubarItem>Save</MenubarItem>
+  <MenubarItem>Save As</MenubarItem>
+</MenubarContent>
+```
+/

package/.llm/menubar-shortcut.llm.md

@@ -0,0 +1,37 @@
+# MenubarShortcut
+
+**Type**: component
+
+Displays keyboard shortcut for a menu item. Shows keyboard shortcuts aligned to the right of menu items. Use standard platform conventions (⌘ for Mac, Ctrl+ for Windows/Linux). Purely visual - does not implement the actual keyboard functionality.
+
+## JSX Usage
+
+```jsx
+import { MenubarShortcut } from '@neynar/ui';
+
+<MenubarShortcut
+  className="value"
+/>
+```
+
+## Component Props
+
+### className
+- **Type**: `string`
+- **Required**: No
+- **Description**: Additional CSS classes to apply to the shortcut text
+
+## Examples
+
+```tsx
+<MenubarItem onSelect={() => save()}>
+  Save File
+  <MenubarShortcut>⌘S</MenubarShortcut>
+</MenubarItem>
+// Platform-specific shortcuts
+<MenubarItem>
+  Copy
+  <MenubarShortcut>{isMac ? '⌘C' : 'Ctrl+C'}</MenubarShortcut>
+</MenubarItem>
+```
+/

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

@@ -0,0 +1,127 @@
+# MenubarSubContent
+
+**Type**: component
+
+Content container for a submenu. Contains the menu items that appear when a MenubarSubTrigger is hovered or focused. Supports all the same content as MenubarContent. Automatically positioned to avoid viewport collisions.
+
+## JSX Usage
+
+```jsx
+import { MenubarSubContent } from '@neynar/ui';
+
+<MenubarSubContent
+  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 sub-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
+<MenubarSubContent>
+  <MenubarItem>document1.txt</MenubarItem>
+  <MenubarItem>document2.txt</MenubarItem>
+  <MenubarItem>document3.txt</MenubarItem>
+</MenubarSubContent>
+```
+/

package/.llm/menubar-sub-trigger.llm.md

@@ -0,0 +1,51 @@
+# MenubarSubTrigger
+
+**Type**: component
+
+Menu item that opens a submenu. Automatically includes a right arrow indicator to show that it opens a submenu when hovered or focused. Opens submenu on hover or right arrow key press.
+
+## JSX Usage
+
+```jsx
+import { MenubarSubTrigger } from '@neynar/ui';
+
+<MenubarSubTrigger
+  className="value"
+  inset={true}
+  disabled={true}
+  textValue="value"
+>
+  {/* Your content here */}
+</MenubarSubTrigger>
+```
+
+## Component Props
+
+### className
+- **Type**: `string`
+- **Required**: No
+- **Description**: Additional CSS classes to apply to the sub-trigger
+
+### inset
+- **Type**: `boolean`
+- **Required**: No
+- **Description**: Whether to add left padding for alignment with items that have icons
+
+### disabled
+- **Type**: `boolean`
+- **Required**: No
+- **Description**: When true, prevents the user from interacting with the item
+
+### textValue
+- **Type**: `string`
+- **Required**: No
+- **Description**: Optional text used for typeahead purposes when content is complex
+
+## Examples
+
+```tsx
+<MenubarSubTrigger>
+  Recent Files
+</MenubarSubTrigger>
+```
+/

package/.llm/menubar-sub.llm.md

@@ -0,0 +1,53 @@
+# MenubarSub
+
+**Type**: component
+
+Container for a submenu. Wraps MenubarSubTrigger and MenubarSubContent to create nested menu structures. Supports controlled and uncontrolled states.
+
+## JSX Usage
+
+```jsx
+import { MenubarSub } from '@neynar/ui';
+
+<MenubarSub
+  open={true}
+  defaultOpen={true}
+  onOpenChange={handleOpenChange}
+/>
+```
+
+## Component Props
+
+### open
+- **Type**: `boolean`
+- **Required**: No
+- **Description**: The controlled open state of the sub menu. Must be used in conjunction with onOpenChange
+
+### defaultOpen
+- **Type**: `boolean`
+- **Required**: No
+- **Description**: The open state of the submenu when it is initially rendered. Use when you do not need to control its open state
+
+### onOpenChange
+- **Type**: `(open: boolean) => void`
+- **Required**: No
+- **Description**: Event handler called when the open state of the submenu changes
+
+## Examples
+
+```tsx
+<MenubarSub>
+  <MenubarSubTrigger>Export</MenubarSubTrigger>
+  <MenubarSubContent>
+    <MenubarItem>Export as PDF</MenubarItem>
+    <MenubarItem>Export as CSV</MenubarItem>
+    <MenubarItem>Export as JSON</MenubarItem>
+  </MenubarSubContent>
+</MenubarSub>
+// Controlled submenu
+<MenubarSub open={exportOpen} onOpenChange={setExportOpen}>
+  <MenubarSubTrigger>Export</MenubarSubTrigger>
+  <MenubarSubContent>...</MenubarSubContent>
+</MenubarSub>
+```
+/

package/.llm/menubar-trigger.llm.md

@@ -0,0 +1,37 @@
+# MenubarTrigger
+
+**Type**: component
+
+Button that opens a dropdown menu. The trigger text should be concise and descriptive of the menu contents. Common patterns include "File", "Edit", "View", "Tools", "Help". Automatically receives focus management and keyboard navigation.
+
+## JSX Usage
+
+```jsx
+import { MenubarTrigger } from '@neynar/ui';
+
+<MenubarTrigger
+  className="value"
+  asChild={true}
+/>
+```
+
+## Component Props
+
+### className
+- **Type**: `string`
+- **Required**: No
+- **Description**: Additional CSS classes to apply to the trigger button
+
+### asChild
+- **Type**: `boolean`
+- **Required**: No
+- **Description**: Change the default rendered element for the one passed as a child, merging their props and behavior
+
+## Examples
+
+```tsx
+<MenubarTrigger>
+  File
+</MenubarTrigger>
+```
+/