@neynar/ui 0.3.0 → 0.4.0

package/.llm/sidebar-menu-action.llm.md

@@ -0,0 +1,84 @@
+# SidebarMenuAction
+
+**Type**: component
+
+Secondary action button for sidebar menu items A compact action button positioned on the right side of menu items, providing secondary actions like edit, delete, or more options. Can be configured to show only on hover for cleaner interfaces or remain always visible for important actions.
+
+## JSX Usage
+
+```jsx
+import { SidebarMenuAction } from '@neynar/ui';
+
+<SidebarMenuAction
+  className="value"
+  asChild={true}
+  showOnHover={true}
+/>
+```
+
+## Component Props
+
+### className
+- **Type**: `string`
+- **Required**: No
+- **Description**: No description available
+
+### asChild
+- **Type**: `boolean`
+- **Required**: No
+- **Description**: No description available
+
+### showOnHover
+- **Type**: `boolean`
+- **Required**: No
+- **Description**: No description available
+
+## Examples
+
+### Example 1
+```tsx
+// Always visible action button
+<SidebarMenuItem>
+  <SidebarMenuButton>
+    <Folder />
+    <span>Projects</span>
+  </SidebarMenuButton>
+  <SidebarMenuAction>
+    <MoreHorizontal className="h-4 w-4" />
+  </SidebarMenuAction>
+</SidebarMenuItem>
+```
+### Example 2
+```tsx
+// Show only on hover
+<SidebarMenuItem>
+  <SidebarMenuButton>
+    <File />
+    <span>Document</span>
+  </SidebarMenuButton>
+  <SidebarMenuAction showOnHover>
+    <Trash2 className="h-4 w-4" />
+  </SidebarMenuAction>
+</SidebarMenuItem>
+```
+### Example 3
+```tsx
+// Custom action with asChild
+<SidebarMenuItem>
+  <SidebarMenuButton>
+    <Star />
+    <span>Favorites</span>
+  </SidebarMenuButton>
+  <SidebarMenuAction asChild>
+    <DropdownMenu>
+      <DropdownMenuTrigger>
+        <MoreVertical className="h-4 w-4" />
+      </DropdownMenuTrigger>
+      <DropdownMenuContent>
+        <DropdownMenuItem>Edit</DropdownMenuItem>
+        <DropdownMenuItem>Delete</DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  </SidebarMenuAction>
+</SidebarMenuItem>
+```

package/.llm/sidebar-menu-badge.llm.md

@@ -0,0 +1,60 @@
+# SidebarMenuBadge
+
+**Type**: component
+
+Badge indicator component for menu items Displays count indicators, status badges, or notification markers on menu items. Positioned on the right side of menu items and automatically coordinates with menu button states and sidebar collapse behavior.
+
+## JSX Usage
+
+```jsx
+import { SidebarMenuBadge } from '@neynar/ui';
+
+<SidebarMenuBadge
+  className="value"
+/>
+```
+
+## Component Props
+
+### className
+- **Type**: `string`
+- **Required**: No
+- **Description**: No description available
+
+## Examples
+
+### Example 1
+```tsx
+// Unread count badge
+<SidebarMenuItem>
+  <SidebarMenuButton>
+    <Inbox />
+    <span>Messages</span>
+  </SidebarMenuButton>
+  <SidebarMenuBadge>12</SidebarMenuBadge>
+</SidebarMenuItem>
+```
+### Example 2
+```tsx
+// Status indicator
+<SidebarMenuItem>
+  <SidebarMenuButton>
+    <Activity />
+    <span>System Status</span>
+  </SidebarMenuButton>
+  <SidebarMenuBadge className="bg-green-500">●</SidebarMenuBadge>
+</SidebarMenuItem>
+```
+### Example 3
+```tsx
+// Dynamic badge with state
+<SidebarMenuItem>
+  <SidebarMenuButton>
+    <Bell />
+    <span>Notifications</span>
+  </SidebarMenuButton>
+  {notificationCount > 0 && (
+    <SidebarMenuBadge>{notificationCount}</SidebarMenuBadge>
+  )}
+</SidebarMenuItem>
+```

package/.llm/sidebar-menu-button.llm.md

@@ -0,0 +1,103 @@
+# SidebarMenuButton
+
+**Type**: component
+
+Interactive navigation button for sidebar menu items The primary interactive element for sidebar navigation, offering a flexible button component that supports active states, multiple visual variants, tooltip integration for collapsed modes, and composition patterns through the asChild prop. Automatically adapts its appearance based on sidebar state and provides smooth hover/focus transitions.
+
+## JSX Usage
+
+```jsx
+import { SidebarMenuButton } from '@neynar/ui';
+
+<SidebarMenuButton
+  asChild={true}
+  isActive={true}
+  variant={value}
+  size={value}
+  tooltip={value}
+  className="value"
+/>
+```
+
+## Component Props
+
+### asChild
+- **Type**: `boolean`
+- **Required**: No
+- **Description**: No description available
+
+### isActive
+- **Type**: `boolean`
+- **Required**: No
+- **Description**: No description available
+
+### variant
+- **Type**: `"default" | "outline"`
+- **Required**: No
+- **Description**: No description available
+
+### size
+- **Type**: `"default" | "sm" | "lg"`
+- **Required**: No
+- **Description**: No description available
+
+### tooltip
+- **Type**: `string | React.ComponentProps<typeof TooltipContent>`
+- **Required**: No
+- **Description**: No description available
+
+### className
+- **Type**: `string`
+- **Required**: No
+- **Description**: No description available
+
+## Examples
+
+### Example 1
+```tsx
+// Basic navigation button
+<SidebarMenuButton>
+  <Home className="h-4 w-4" />
+  <span>Dashboard</span>
+</SidebarMenuButton>
+```
+### Example 2
+```tsx
+// Active state with Link composition
+<SidebarMenuButton asChild isActive={pathname === '/dashboard'}>
+  <Link href="/dashboard">
+    <Home className="h-4 w-4" />
+    <span>Dashboard</span>
+  </Link>
+</SidebarMenuButton>
+```
+### Example 3
+```tsx
+// With tooltip for collapsed mode
+<SidebarMenuButton tooltip="Go to Dashboard">
+  <Home className="h-4 w-4" />
+  <span>Dashboard</span>
+</SidebarMenuButton>
+```
+### Example 4
+```tsx
+// Different variants and sizes
+<SidebarMenuButton variant="outline" size="lg">
+  <Settings className="h-4 w-4" />
+  <span>Settings</span>
+</SidebarMenuButton>
+```
+### Example 5
+```tsx
+// Custom tooltip with props
+<SidebarMenuButton
+  tooltip={{
+    children: "Dashboard Overview",
+    side: "right",
+    sideOffset: 10
+  }}
+>
+  <Home className="h-4 w-4" />
+  <span>Dashboard</span>
+</SidebarMenuButton>
+```

package/.llm/sidebar-menu-item.llm.md

@@ -0,0 +1,75 @@
+# SidebarMenuItem
+
+**Type**: component
+
+Individual menu item container for sidebar navigation A list item container that wraps a single navigation item, typically containing a SidebarMenuButton along with optional components like SidebarMenuAction, SidebarMenuBadge, or SidebarMenuSub for hierarchical navigation.
+
+## JSX Usage
+
+```jsx
+import { SidebarMenuItem } from '@neynar/ui';
+
+<SidebarMenuItem
+  className="value"
+/>
+```
+
+## Component Props
+
+### className
+- **Type**: `string`
+- **Required**: No
+- **Description**: No description available
+
+## Examples
+
+### Example 1
+```tsx
+// Simple menu item with button
+<SidebarMenuItem>
+  <SidebarMenuButton>
+    <Home />
+    <span>Dashboard</span>
+  </SidebarMenuButton>
+</SidebarMenuItem>
+```
+### Example 2
+```tsx
+// Menu item with badge
+<SidebarMenuItem>
+  <SidebarMenuButton>
+    <Inbox />
+    <span>Messages</span>
+  </SidebarMenuButton>
+  <SidebarMenuBadge>5</SidebarMenuBadge>
+</SidebarMenuItem>
+```
+### Example 3
+```tsx
+// Menu item with action button
+<SidebarMenuItem>
+  <SidebarMenuButton>
+    <Folder />
+    <span>Projects</span>
+  </SidebarMenuButton>
+  <SidebarMenuAction showOnHover>
+    <Plus />
+  </SidebarMenuAction>
+</SidebarMenuItem>
+```
+### Example 4
+```tsx
+// Menu item with submenu
+<SidebarMenuItem>
+  <SidebarMenuButton>
+    <Folder />
+    <span>Projects</span>
+    <ChevronRight className="ml-auto" />
+  </SidebarMenuButton>
+  <SidebarMenuSub>
+    <SidebarMenuSubItem>
+      <SidebarMenuSubButton>Web App</SidebarMenuSubButton>
+    </SidebarMenuSubItem>
+  </SidebarMenuSub>
+</SidebarMenuItem>
+```

package/.llm/sidebar-menu-skeleton.llm.md

@@ -0,0 +1,76 @@
+# SidebarMenuSkeleton
+
+**Type**: component
+
+Loading skeleton placeholder for menu items Displays an animated loading placeholder while menu items are being fetched or loaded. Features random width variation to simulate realistic content and optional icon placeholder for more accurate representation.
+
+## JSX Usage
+
+```jsx
+import { SidebarMenuSkeleton } from '@neynar/ui';
+
+<SidebarMenuSkeleton
+  className="value"
+  showIcon={true}
+/>
+```
+
+## Component Props
+
+### className
+- **Type**: `string`
+- **Required**: No
+- **Description**: No description available
+
+### showIcon
+- **Type**: `boolean`
+- **Required**: No
+- **Description**: No description available
+
+## Examples
+
+### Example 1
+```tsx
+// Basic skeleton without icon
+<SidebarMenu>
+  <SidebarMenuItem>
+    <SidebarMenuSkeleton />
+  </SidebarMenuItem>
+  <SidebarMenuItem>
+    <SidebarMenuSkeleton />
+  </SidebarMenuItem>
+</SidebarMenu>
+```
+### Example 2
+```tsx
+// Skeleton with icon placeholder
+<SidebarMenu>
+  {Array.from({ length: 5 }).map((_, index) => (
+    <SidebarMenuItem key={index}>
+      <SidebarMenuSkeleton showIcon />
+    </SidebarMenuItem>
+  ))}
+</SidebarMenu>
+```
+### Example 3
+```tsx
+// Loading state with React Suspense
+<SidebarGroup>
+  <SidebarGroupLabel>Projects</SidebarGroupLabel>
+  <SidebarGroupContent>
+    <SidebarMenu>
+      <React.Suspense
+        fallback={
+          <>
+            <SidebarMenuItem><SidebarMenuSkeleton showIcon /></SidebarMenuItem>
+            <SidebarMenuItem><SidebarMenuSkeleton showIcon /></SidebarMenuItem>
+            <SidebarMenuItem><SidebarMenuSkeleton showIcon /></SidebarMenuItem>
+          </>
+        }
+      >
+        <ProjectsList />
+      </React.Suspense>
+    </SidebarMenu>
+  </SidebarGroupContent>
+</SidebarGroup>
+```

package/.llm/sidebar-menu-sub-button.llm.md

@@ -0,0 +1,85 @@
+# SidebarMenuSubButton
+
+**Type**: component
+
+Interactive button component for submenu navigation The primary interactive element for nested navigation items within submenus, featuring support for active states, different sizes, and composition patterns. Designed specifically for hierarchical navigation with appropriate styling and spacing.
+
+## JSX Usage
+
+```jsx
+import { SidebarMenuSubButton } from '@neynar/ui';
+
+<SidebarMenuSubButton
+  asChild={true}
+  size={value}
+  isActive={true}
+  className="value"
+/>
+```
+
+## Component Props
+
+### asChild
+- **Type**: `boolean`
+- **Required**: No
+- **Description**: No description available
+
+### size
+- **Type**: `"sm" | "md"`
+- **Required**: No
+- **Description**: No description available
+
+### isActive
+- **Type**: `boolean`
+- **Required**: No
+- **Description**: No description available
+
+### className
+- **Type**: `string`
+- **Required**: No
+- **Description**: No description available
+
+## Examples
+
+### Example 1
+```tsx
+// Basic submenu button
+<SidebarMenuSubItem>
+  <SidebarMenuSubButton>
+    <span>Documentation</span>
+  </SidebarMenuSubButton>
+</SidebarMenuSubItem>
+```
+### Example 2
+```tsx
+// Link composition with active state
+<SidebarMenuSubItem>
+  <SidebarMenuSubButton
+    asChild
+    isActive={pathname === '/projects/mobile'}
+  >
+    <Link href="/projects/mobile">
+      <span>Mobile Application</span>
+    </Link>
+  </SidebarMenuSubButton>
+</SidebarMenuSubItem>
+```
+### Example 3
+```tsx
+// Small size variant
+<SidebarMenuSubItem>
+  <SidebarMenuSubButton size="sm">
+    <span>API Reference</span>
+  </SidebarMenuSubButton>
+</SidebarMenuSubItem>
+```
+### Example 4
+```tsx
+// With icon and custom styling
+<SidebarMenuSubItem>
+  <SidebarMenuSubButton className="gap-3">
+    <File className="h-3 w-3" />
+    <span>README.md</span>
+  </SidebarMenuSubButton>
+</SidebarMenuSubItem>
+```

package/.llm/sidebar-menu-sub-item.llm.md

@@ -0,0 +1,54 @@
+# SidebarMenuSubItem
+
+**Type**: component
+
+Individual item container within submenu navigation A list item container for single nested navigation items within a submenu, providing the structural foundation for hierarchical navigation elements.
+
+## JSX Usage
+
+```jsx
+import { SidebarMenuSubItem } from '@neynar/ui';
+
+<SidebarMenuSubItem
+  className="value"
+/>
+```
+
+## Component Props
+
+### className
+- **Type**: `string`
+- **Required**: No
+- **Description**: No description available
+
+## Examples
+
+### Example 1
+```tsx
+// Basic submenu item
+<SidebarMenuSub>
+  <SidebarMenuSubItem>
+    <SidebarMenuSubButton asChild>
+      <Link href="/projects/web-app">
+        <span>Web Application</span>
+      </Link>
+    </SidebarMenuSubButton>
+  </SidebarMenuSubItem>
+</SidebarMenuSub>
+```
+### Example 2
+```tsx
+// Submenu item with active state
+<SidebarMenuSub>
+  <SidebarMenuSubItem>
+    <SidebarMenuSubButton
+      isActive={pathname === '/settings/general'}
+      asChild
+    >
+      <Link href="/settings/general">
+        <span>General Settings</span>
+      </Link>
+    </SidebarMenuSubButton>
+  </SidebarMenuSubItem>
+</SidebarMenuSub>
+```

package/.llm/sidebar-menu-sub.llm.md

@@ -0,0 +1,74 @@
+# SidebarMenuSub
+
+**Type**: component
+
+Submenu container for hierarchical navigation A specialized container for nested navigation items that provides visual hierarchy through indentation and connecting border lines. Perfect for organizing complex navigation structures with parent-child relationships.
+
+## JSX Usage
+
+```jsx
+import { SidebarMenuSub } from '@neynar/ui';
+
+<SidebarMenuSub
+  className="value"
+/>
+```
+
+## Component Props
+
+### className
+- **Type**: `string`
+- **Required**: No
+- **Description**: No description available
+
+## Examples
+
+### Example 1
+```tsx
+// Collapsible submenu with parent item
+<SidebarMenuItem>
+  <Collapsible>
+    <CollapsibleTrigger asChild>
+      <SidebarMenuButton>
+        <Folder />
+        <span>Projects</span>
+        <ChevronRight className="ml-auto transition-transform group-data-[state=open]:rotate-90" />
+      </SidebarMenuButton>
+    </CollapsibleTrigger>
+    <CollapsibleContent>
+      <SidebarMenuSub>
+        <SidebarMenuSubItem>
+          <SidebarMenuSubButton>Web Application</SidebarMenuSubButton>
+        </SidebarMenuSubItem>
+        <SidebarMenuSubItem>
+          <SidebarMenuSubButton>Mobile App</SidebarMenuSubButton>
+        </SidebarMenuSubItem>
+        <SidebarMenuSubItem>
+          <SidebarMenuSubButton>Documentation</SidebarMenuSubButton>
+        </SidebarMenuSubItem>
+      </SidebarMenuSub>
+    </CollapsibleContent>
+  </Collapsible>
+</SidebarMenuItem>
+```
+### Example 2
+```tsx
+// Always expanded submenu
+<SidebarMenuItem>
+  <SidebarMenuButton>
+    <Settings />
+    <span>Settings</span>
+  </SidebarMenuButton>
+  <SidebarMenuSub>
+    <SidebarMenuSubItem>
+      <SidebarMenuSubButton>General</SidebarMenuSubButton>
+    </SidebarMenuSubItem>
+    <SidebarMenuSubItem>
+      <SidebarMenuSubButton>Privacy</SidebarMenuSubButton>
+    </SidebarMenuSubItem>
+    <SidebarMenuSubItem>
+      <SidebarMenuSubButton>Security</SidebarMenuSubButton>
+    </SidebarMenuSubItem>
+  </SidebarMenuSub>
+</SidebarMenuItem>
+```

package/.llm/sidebar-menu.llm.md

@@ -0,0 +1,65 @@
+# SidebarMenu
+
+**Type**: component
+
+Navigation menu container for organizing sidebar items An unordered list container that holds and organizes SidebarMenuItem components. Provides consistent spacing, layout, and semantic structure for navigation items within sidebar groups or sections.
+
+## JSX Usage
+
+```jsx
+import { SidebarMenu } from '@neynar/ui';
+
+<SidebarMenu
+  className="value"
+/>
+```
+
+## Component Props
+
+### className
+- **Type**: `string`
+- **Required**: No
+- **Description**: No description available
+
+## Examples
+
+### Example 1
+```tsx
+// Basic navigation menu
+<SidebarMenu>
+  <SidebarMenuItem>
+    <SidebarMenuButton>
+      <Home />
+      <span>Dashboard</span>
+    </SidebarMenuButton>
+  </SidebarMenuItem>
+  <SidebarMenuItem>
+    <SidebarMenuButton>
+      <Settings />
+      <span>Settings</span>
+    </SidebarMenuButton>
+  </SidebarMenuItem>
+</SidebarMenu>
+```
+### Example 2
+```tsx
+// Menu with badges and actions
+<SidebarMenu>
+  <SidebarMenuItem>
+    <SidebarMenuButton>
+      <Inbox />
+      <span>Messages</span>
+    </SidebarMenuButton>
+    <SidebarMenuBadge>3</SidebarMenuBadge>
+  </SidebarMenuItem>
+  <SidebarMenuItem>
+    <SidebarMenuButton>
+      <Archive />
+      <span>Archive</span>
+    </SidebarMenuButton>
+    <SidebarMenuAction>
+      <MoreHorizontal />
+    </SidebarMenuAction>
+  </SidebarMenuItem>
+</SidebarMenu>
+```