@neynar/ui 0.2.1 → 0.3.0

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

@@ -1,53 +0,0 @@
-# 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-docs/menubar-trigger.llm.md

@@ -1,37 +0,0 @@
-# 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>
-```
-/

package/llm-docs/menubar.llm.md

@@ -1,115 +0,0 @@
-# Menubar
-
-**Type**: component
-
-A visually persistent menu common in desktop applications that provides access to a consistent set of commands. Menubar provides a horizontal navigation structure similar to desktop application menus like those found in VS Code, Figma, or native applications. Each menu contains dropdown content with actions, checkboxes, radio groups, and nested submenus. Built on top of Radix UI Menubar primitive with full keyboard navigation and accessibility support.
-
-## JSX Usage
-
-```jsx
-import { Menubar } from '@neynar/ui';
-
-<Menubar
-  className="value"
-  defaultValue="value"
-  value="value"
-  onValueChange={handleValueChange}
-  dir={value}
-  loop={true}
-/>
-```
-
-## Component Props
-
-### className
-- **Type**: `string`
-- **Required**: No
-- **Description**: No description available
-
-### defaultValue
-- **Type**: `string`
-- **Required**: No
-- **Description**: No description available
-
-### value
-- **Type**: `string`
-- **Required**: No
-- **Description**: No description available
-
-### onValueChange
-- **Type**: `(value: string) => void`
-- **Required**: No
-- **Description**: No description available
-
-### dir
-- **Type**: `"ltr" | "rtl"`
-- **Required**: No
-- **Description**: No description available
-
-### loop
-- **Type**: `boolean`
-- **Required**: No
-- **Description**: No description available
-
-## Examples
-
-### Example 1
-```tsx
-// Basic application menubar
-<Menubar>
-  <MenubarMenu>
-    <MenubarTrigger>File</MenubarTrigger>
-    <MenubarContent>
-      <MenubarItem>New File <MenubarShortcut>⌘N</MenubarShortcut></MenubarItem>
-      <MenubarItem>Open <MenubarShortcut>⌘O</MenubarShortcut></MenubarItem>
-      <MenubarSeparator />
-      <MenubarItem>Exit</MenubarItem>
-    </MenubarContent>
-  </MenubarMenu>
-  <MenubarMenu>
-    <MenubarTrigger>Edit</MenubarTrigger>
-    <MenubarContent>
-      <MenubarItem>Undo <MenubarShortcut>⌘Z</MenubarShortcut></MenubarItem>
-      <MenubarItem>Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut></MenubarItem>
-    </MenubarContent>
-  </MenubarMenu>
-</Menubar>
-```
-### Example 2
-```tsx
-// With checkboxes and submenus
-<Menubar>
-  <MenubarMenu>
-    <MenubarTrigger>View</MenubarTrigger>
-    <MenubarContent>
-      <MenubarCheckboxItem checked={showToolbar} onCheckedChange={setShowToolbar}>
-        Show Toolbar
-      </MenubarCheckboxItem>
-      <MenubarSeparator />
-      <MenubarSub>
-        <MenubarSubTrigger>Panels</MenubarSubTrigger>
-        <MenubarSubContent>
-          <MenubarItem>Explorer</MenubarItem>
-          <MenubarItem>Terminal</MenubarItem>
-        </MenubarSubContent>
-      </MenubarSub>
-    </MenubarContent>
-  </MenubarMenu>
-</Menubar>
-```
-### Example 3
-```tsx
-// With radio groups for exclusive selections
-<Menubar>
-  <MenubarMenu>
-    <MenubarTrigger>Theme</MenubarTrigger>
-    <MenubarContent>
-      <MenubarRadioGroup value={theme} onValueChange={setTheme}>
-        <MenubarRadioItem value="light">Light</MenubarRadioItem>
-        <MenubarRadioItem value="dark">Dark</MenubarRadioItem>
-        <MenubarRadioItem value="system">System</MenubarRadioItem>
-      </MenubarRadioGroup>
-    </MenubarContent>
-  </MenubarMenu>
-</Menubar>
-```

package/llm-docs/navigation-menu-content.llm.md

@@ -1,116 +0,0 @@
-# NavigationMenuContent
-
-**Type**: component
-
-NavigationMenuContent - Dropdown content panel for navigation items The collapsible content container that appears when a NavigationMenuTrigger is activated. Supports smooth enter/exit animations, flexible positioning (with or without viewport), and comprehensive interaction handling. The content automatically manages focus and provides multiple ways to dismiss the dropdown (Escape key, outside clicks, etc.).
-
-## JSX Usage
-
-```jsx
-import { NavigationMenuContent } from '@neynar/ui';
-
-<NavigationMenuContent
-  asChild={true}
-  forceMount={true}
-  onEscapeKeyDown={handleEscapeKeyDown}
-  onPointerDownOutside={handlePointerDownOutside}
-  onFocusOutside={handleFocusOutside}
-  onInteractOutside={handleInteractOutside}
-/>
-```
-
-## Component Props
-
-### asChild
-- **Type**: `boolean`
-- **Required**: No
-- **Description**: No description available
-
-### forceMount
-- **Type**: `boolean`
-- **Required**: No
-- **Description**: No description available
-
-### onEscapeKeyDown
-- **Type**: `(event: KeyboardEvent) => void`
-- **Required**: No
-- **Description**: No description available
-
-### onPointerDownOutside
-- **Type**: `(event: PointerEvent) => void`
-- **Required**: No
-- **Description**: No description available
-
-### onFocusOutside
-- **Type**: `(event: FocusEvent) => void`
-- **Required**: No
-- **Description**: No description available
-
-### onInteractOutside
-- **Type**: `(event: PointerEvent | FocusEvent) => void`
-- **Required**: No
-- **Description**: No description available
-
-## Examples
-
-### Example 1
-```tsx
-// Grid layout with navigation links
-<NavigationMenuContent>
-  <div className="grid gap-3 p-6 w-[500px] grid-cols-2">
-    <NavigationMenuLink href="/products/analytics">
-      <div className="text-sm font-medium">Analytics</div>
-      <p className="text-sm text-muted-foreground">Track your performance</p>
-    </NavigationMenuLink>
-    <NavigationMenuLink href="/products/dashboard">
-      <div className="text-sm font-medium">Dashboard</div>
-      <p className="text-sm text-muted-foreground">Manage your data</p>
-    </NavigationMenuLink>
-  </div>
-</NavigationMenuContent>
-```
-### Example 2
-```tsx
-// Complex multi-column layout
-<NavigationMenuContent>
-  <div className="grid gap-6 p-8 w-[800px] grid-cols-3">
-    <div className="space-y-2">
-      <h4 className="text-sm font-medium">Features</h4>
-      <NavigationMenuLink href="/features/auth">Authentication</NavigationMenuLink>
-      <NavigationMenuLink href="/features/api">API Management</NavigationMenuLink>
-    </div>
-    <div className="space-y-2">
-      <h4 className="text-sm font-medium">Tools</h4>
-      <NavigationMenuLink href="/tools/cli">Command Line</NavigationMenuLink>
-      <NavigationMenuLink href="/tools/sdk">SDK</NavigationMenuLink>
-    </div>
-  </div>
-</NavigationMenuContent>
-```
-### Example 3
-```tsx
-// With custom interaction handlers
-<NavigationMenuContent
-  onEscapeKeyDown={(e) => {
-    console.log('Escape pressed');
-    // Don't prevent default to allow normal closing behavior
-  }}
-  onPointerDownOutside={(e) => {
-    console.log('Clicked outside');
-    // e.preventDefault() would prevent closing
-  }}
->
-  <div className="p-6 w-[300px]">
-    <NavigationMenuLink href="/help">Help Center</NavigationMenuLink>
-  </div>
-</NavigationMenuContent>
-```
-### Example 4
-```tsx
-// Force mounted for animation control
-<NavigationMenuContent forceMount>
-  <div className="p-4 w-[250px] animate-in slide-in-from-top">
-    <NavigationMenuLink href="/docs">Documentation</NavigationMenuLink>
-  </div>
-</NavigationMenuContent>
-```

package/llm-docs/navigation-menu-indicator.llm.md

@@ -1,68 +0,0 @@
-# NavigationMenuIndicator
-
-**Type**: component
-
-NavigationMenuIndicator - Animated visual indicator for active menu items An optional visual indicator that displays an animated arrow pointing to the currently active or focused navigation menu item. Automatically transitions between positions as users navigate through menu items, providing clear visual feedback about the current selection. The indicator appears below the active item and includes smooth fade and position animations.
-
-## JSX Usage
-
-```jsx
-import { NavigationMenuIndicator } from '@neynar/ui';
-
-<NavigationMenuIndicator
-  asChild={true}
-  forceMount={true}
-/>
-```
-
-## Component Props
-
-### asChild
-- **Type**: `boolean`
-- **Required**: No
-- **Description**: No description available
-
-### forceMount
-- **Type**: `boolean`
-- **Required**: No
-- **Description**: No description available
-
-## Examples
-
-### Example 1
-```tsx
-// Basic usage within NavigationMenuList
-<NavigationMenuList>
-  <NavigationMenuItem value="home">
-    <NavigationMenuTrigger>Home</NavigationMenuTrigger>
-    <NavigationMenuContent>
-      <NavigationMenuLink href="/">Homepage</NavigationMenuLink>
-    </NavigationMenuContent>
-  </NavigationMenuItem>
-  <NavigationMenuItem value="about">
-    <NavigationMenuTrigger>About</NavigationMenuTrigger>
-    <NavigationMenuContent>
-      <NavigationMenuLink href="/about">About Us</NavigationMenuLink>
-    </NavigationMenuContent>
-  </NavigationMenuItem>
-  <NavigationMenuIndicator className="data-[state=visible]:bg-primary" />
-</NavigationMenuList>
-```
-### Example 2
-```tsx
-// Custom styled indicator
-<NavigationMenuIndicator className="
-  data-[state=visible]:animate-pulse
-  data-[state=visible]:bg-gradient-to-r
-  data-[state=visible]:from-blue-500
-  data-[state=visible]:to-purple-500
-" />
-```
-### Example 3
-```tsx
-// Force mounted indicator for custom animations
-<NavigationMenuIndicator
-  forceMount
-  className="custom-indicator-animation"
-/>
-```

package/llm-docs/navigation-menu-item.llm.md

@@ -1,62 +0,0 @@
-# NavigationMenuItem
-
-**Type**: component
-
-NavigationMenuItem - Individual navigation menu item container A list item container that wraps a single navigation element within a NavigationMenuList. Each item can contain either a NavigationMenuTrigger with NavigationMenuContent for dropdown functionality, or a NavigationMenuLink for direct navigation. The value prop is used for controlled state management and active item tracking.
-
-## JSX Usage
-
-```jsx
-import { NavigationMenuItem } from '@neynar/ui';
-
-<NavigationMenuItem
-  value="value"
-  asChild={true}
-/>
-```
-
-## Component Props
-
-### value
-- **Type**: `string`
-- **Required**: No
-- **Description**: No description available
-
-### asChild
-- **Type**: `boolean`
-- **Required**: No
-- **Description**: No description available
-
-## Examples
-
-### Example 1
-```tsx
-// Dropdown navigation item with controlled value
-<NavigationMenuItem value="products">
-  <NavigationMenuTrigger>Products</NavigationMenuTrigger>
-  <NavigationMenuContent>
-    <div className="grid gap-3 p-6 w-[400px] grid-cols-2">
-      <NavigationMenuLink href="/products/analytics">Analytics</NavigationMenuLink>
-      <NavigationMenuLink href="/products/dashboard">Dashboard</NavigationMenuLink>
-    </div>
-  </NavigationMenuContent>
-</NavigationMenuItem>
-```
-### Example 2
-```tsx
-// Simple navigation link item
-<NavigationMenuItem>
-  <NavigationMenuLink href="/contact" className={navigationMenuTriggerStyle()}>
-    Contact Us
-  </NavigationMenuLink>
-</NavigationMenuItem>
-```
-### Example 3
-```tsx
-// With custom container element using asChild
-<NavigationMenuItem asChild>
-  <div className="custom-menu-item">
-    <NavigationMenuLink href="/about">About</NavigationMenuLink>
-  </div>
-</NavigationMenuItem>
-```

package/llm-docs/navigation-menu-link.llm.md

@@ -1,109 +0,0 @@
-# NavigationMenuLink
-
-**Type**: component
-
-NavigationMenuLink - Styled link component for navigation menus A versatile link component designed specifically for navigation menus with comprehensive styling and state management. Supports active states, hover/focus effects, and seamless framework integration through the asChild pattern. Can be used both within dropdown content and as direct navigation items. Features proper keyboard navigation and accessibility support.
-
-## JSX Usage
-
-```jsx
-import { NavigationMenuLink } from '@neynar/ui';
-
-<NavigationMenuLink
-  asChild={true}
-  active={true}
-  onSelect={handleSelect}
-/>
-```
-
-## Component Props
-
-### asChild
-- **Type**: `boolean`
-- **Required**: No
-- **Description**: No description available
-
-### active
-- **Type**: `boolean`
-- **Required**: No
-- **Description**: No description available
-
-### onSelect
-- **Type**: `(event: Event) => void`
-- **Required**: No
-- **Description**: No description available
-
-## Examples
-
-### Example 1
-```tsx
-// Basic navigation link
-<NavigationMenuLink href="/about">About Us</NavigationMenuLink>
-```
-### Example 2
-```tsx
-// Active link with current page styling
-<NavigationMenuLink href="/dashboard" active>
-  Dashboard
-</NavigationMenuLink>
-```
-### Example 3
-```tsx
-// Rich content link in dropdown with description
-<NavigationMenuLink href="/features/analytics">
-  <div className="text-sm font-medium leading-none">Analytics</div>
-  <p className="text-sm text-muted-foreground mt-1">
-    View detailed insights and performance metrics
-  </p>
-</NavigationMenuLink>
-```
-### Example 4
-```tsx
-// With Next.js Link using asChild pattern
-<NavigationMenuLink asChild>
-  <Link href="/products" prefetch={false}>
-    Products
-  </Link>
-</NavigationMenuLink>
-```
-### Example 5
-```tsx
-// With Remix Link using asChild pattern
-<NavigationMenuLink asChild>
-  <RemixLink to="/docs" prefetch="intent">
-    Documentation
-  </RemixLink>
-</NavigationMenuLink>
-```
-### Example 6
-```tsx
-// Direct navigation with trigger button styling
-<NavigationMenuLink
-  href="/contact"
-  className={navigationMenuTriggerStyle()}
->
-  Contact Us
-</NavigationMenuLink>
-```
-### Example 7
-```tsx
-// With custom selection handler
-<NavigationMenuLink
-  href="/logout"
-  onSelect={(event) => {
-    event.preventDefault();
-    handleLogout();
-  }}
->
-  Sign Out
-</NavigationMenuLink>
-```
-### Example 8
-```tsx
-// External link with icon
-<NavigationMenuLink href="https://github.com" target="_blank" rel="noopener">
-  <GitHubIcon className="size-4" />
-  GitHub
-  <ExternalLinkIcon className="size-3 ml-auto" />
-</NavigationMenuLink>
-```

package/llm-docs/navigation-menu-list.llm.md

@@ -1,52 +0,0 @@
-# NavigationMenuList
-
-**Type**: component
-
-NavigationMenuList - Container for navigation menu items The list container that groups NavigationMenuItem components within a NavigationMenu. Renders as an unordered list (ul) by default and provides the foundational layout structure for the navigation menu. Supports both horizontal and vertical orientations based on the parent NavigationMenu orientation prop.
-
-## JSX Usage
-
-```jsx
-import { NavigationMenuList } from '@neynar/ui';
-
-<NavigationMenuList
-  asChild={true}
-/>
-```
-
-## Component Props
-
-### asChild
-- **Type**: `boolean`
-- **Required**: No
-- **Description**: No description available
-
-## Examples
-
-### Example 1
-```tsx
-<NavigationMenuList>
-  <NavigationMenuItem value="products">
-    <NavigationMenuTrigger>Products</NavigationMenuTrigger>
-    <NavigationMenuContent>
-      <NavigationMenuLink href="/products">All Products</NavigationMenuLink>
-    </NavigationMenuContent>
-  </NavigationMenuItem>
-  <NavigationMenuItem>
-    <NavigationMenuLink href="/about" className={navigationMenuTriggerStyle()}>
-      About
-    </NavigationMenuLink>
-  </NavigationMenuItem>
-</NavigationMenuList>
-```
-### Example 2
-```tsx
-// Custom list element using asChild
-<NavigationMenuList asChild>
-  <div className="custom-nav-container">
-    <NavigationMenuItem>
-      <NavigationMenuLink href="/home">Home</NavigationMenuLink>
-    </NavigationMenuItem>
-  </div>
-</NavigationMenuList>
-```

package/llm-docs/navigation-menu-trigger-style.llm.md

@@ -1,22 +0,0 @@
-# navigationMenuTriggerStyle
-
-**Type**: function
-
-Navigation menu trigger styling configuration using CVA (Class Variance Authority) Provides consistent button styling for navigation triggers with interactive states. Can be applied to NavigationMenuLink components for uniform trigger-style appearance.
-
-## API Surface
-
-```typescript
-import { navigationMenuTriggerStyle } from '@neynar/ui';
-
-export const navigationMenuTriggerStyle
-```
-
-## Examples
-
-```tsx
-// Apply to NavigationMenuLink for consistent button styling
-<NavigationMenuLink href="/docs" className={navigationMenuTriggerStyle()}>
-  Documentation
-</NavigationMenuLink>
-```

package/llm-docs/navigation-menu-trigger.llm.md

@@ -1,57 +0,0 @@
-# NavigationMenuTrigger
-
-**Type**: component
-
-NavigationMenuTrigger - Interactive button that opens dropdown navigation content A button component that toggles NavigationMenuContent visibility when activated. Automatically includes a chevron down icon that rotates when the dropdown is open. Features comprehensive keyboard and mouse interaction support with proper ARIA state management. The asChild prop allows composition with custom button components.
-
-## JSX Usage
-
-```jsx
-import { NavigationMenuTrigger } from '@neynar/ui';
-
-<NavigationMenuTrigger
-  asChild={true}
->
-  {/* Your content here */}
-</NavigationMenuTrigger>
-```
-
-## Component Props
-
-### asChild
-- **Type**: `boolean`
-- **Required**: No
-- **Description**: No description available
-
-## Examples
-
-### Example 1
-```tsx
-// Basic trigger with dropdown content
-<NavigationMenuItem value="products">
-  <NavigationMenuTrigger>Products</NavigationMenuTrigger>
-  <NavigationMenuContent>
-    <div className="p-6 w-[400px]">
-      <NavigationMenuLink href="/products/analytics">Analytics</NavigationMenuLink>
-      <NavigationMenuLink href="/products/dashboard">Dashboard</NavigationMenuLink>
-    </div>
-  </NavigationMenuContent>
-</NavigationMenuItem>
-```
-### Example 2
-```tsx
-// Custom trigger styling with asChild
-<NavigationMenuTrigger asChild>
-  <Button variant="outline" size="lg">
-    Custom Features Button
-  </Button>
-</NavigationMenuTrigger>
-```
-### Example 3
-```tsx
-// Trigger with additional icons
-<NavigationMenuTrigger className="gap-2">
-  <StarIcon className="size-4" />
-  Featured Items
-</NavigationMenuTrigger>
-```