@neynar/ui 0.3.0 → 0.4.0

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

@@ -0,0 +1,116 @@
+# 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/navigation-menu-indicator.llm.md

@@ -0,0 +1,68 @@
+# 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/navigation-menu-item.llm.md

@@ -0,0 +1,62 @@
+# 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/navigation-menu-link.llm.md

@@ -0,0 +1,109 @@
+# 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/navigation-menu-list.llm.md

@@ -0,0 +1,52 @@
+# 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/navigation-menu-trigger-style.llm.md

@@ -0,0 +1,22 @@
+# 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/navigation-menu-trigger.llm.md

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

package/.llm/navigation-menu-viewport.llm.md

@@ -0,0 +1,51 @@
+# NavigationMenuViewport
+
+**Type**: component
+
+NavigationMenuViewport - Positioned container for dropdown content The viewport container that manages positioning, sizing, and animation of NavigationMenuContent panels. It automatically calculates dimensions based on content size and provides smooth enter/exit animations. The viewport uses CSS custom properties for dynamic sizing and positioning. Only rendered when the viewport prop is true (default) on NavigationMenu.
+
+## JSX Usage
+
+```jsx
+import { NavigationMenuViewport } from '@neynar/ui';
+
+<NavigationMenuViewport
+  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
+// Typically used automatically by NavigationMenu
+<NavigationMenu>
+  <NavigationMenuList>
+    // menu items
+  </NavigationMenuList>
+  // NavigationMenuViewport is rendered automatically
+</NavigationMenu>
+```
+### Example 2
+```tsx
+// Custom viewport styling
+<NavigationMenuViewport className="border-2 border-primary shadow-xl" />
+```
+### Example 3
+```tsx
+// Force mounted viewport for animation control
+<NavigationMenuViewport forceMount className="custom-animation" />
+```