@neynar/ui 0.3.0 → 0.4.0

package/.llm/sheet-trigger.llm.md

@@ -0,0 +1,46 @@
+# SheetTrigger
+
+**Type**: component
+
+SheetTrigger - Button or element that opens the sheet The trigger element that users interact with to open the sheet. Use the `asChild` prop to render as a different element while maintaining the trigger functionality. When clicked, opens the sheet and manages focus appropriately.
+
+## JSX Usage
+
+```jsx
+import { SheetTrigger } from '@neynar/ui';
+
+<SheetTrigger
+  asChild={true}
+>
+  {/* Your content here */}
+</SheetTrigger>
+```
+
+## Component Props
+
+### asChild
+- **Type**: `boolean`
+- **Required**: No
+- **Description**: When true, merges props with child element instead of rendering a button
+
+### children
+- **Type**: `React.ReactNode`
+- **Required**: No
+- **Description**: Child element to render as the trigger. Required when asChild is true
+
+## Examples
+
+```tsx
+// As a styled button
+<SheetTrigger asChild>
+  <Button variant="outline">Open Settings</Button>
+</SheetTrigger>
+// As a simple button
+<SheetTrigger>Click to open</SheetTrigger>
+// As an icon button
+<SheetTrigger asChild>
+  <Button size="icon" variant="ghost">
+    <MenuIcon className="h-4 w-4" />
+  </Button>
+</SheetTrigger>
+```

package/.llm/sheet.llm.md

@@ -0,0 +1,126 @@
+# Sheet
+
+**Type**: component
+
+Sheet - A slide-out panel that displays supplementary content A versatile sheet component that slides in from any edge of the screen to display supplementary content without fully blocking the main interface. Built on Radix UI Dialog primitives with smooth animations and comprehensive accessibility support. Sheets are ideal for: - Mobile navigation menus - Settings panels and configuration forms - Contextual information displays - Secondary actions that don't require full attention - Filters and search interfaces
+
+## JSX Usage
+
+```jsx
+import { Sheet } from '@neynar/ui';
+
+<Sheet
+  open={true}
+  onOpenChange={handleOpenChange}
+  defaultOpen={true}
+  modal={true}
+>
+  {/* Your content here */}
+</Sheet>
+```
+
+## Component Props
+
+### open
+- **Type**: `boolean`
+- **Required**: No
+- **Description**: No description available
+
+### onOpenChange
+- **Type**: `(open: boolean) => void`
+- **Required**: No
+- **Description**: No description available
+
+### defaultOpen
+- **Type**: `boolean`
+- **Required**: No
+- **Description**: No description available
+
+### modal
+- **Type**: `boolean`
+- **Required**: No
+- **Description**: No description available
+
+### children
+- **Type**: `React.ReactNode`
+- **Required**: No
+- **Description**: No description available
+
+## Examples
+
+### Example 1
+```tsx
+// Basic sheet from right side (default)
+<Sheet>
+  <SheetTrigger asChild>
+    <Button>Open Settings</Button>
+  </SheetTrigger>
+  <SheetContent>
+    <SheetHeader>
+      <SheetTitle>Settings</SheetTitle>
+      <SheetDescription>
+        Configure your application preferences.
+      </SheetDescription>
+    </SheetHeader>
+    <div className="py-4">
+      <p>Settings content here</p>
+    </div>
+    <SheetFooter>
+      <Button type="submit">Save Changes</Button>
+    </SheetFooter>
+  </SheetContent>
+</Sheet>
+```
+### Example 2
+```tsx
+// Sheet from different sides with controlled state
+function NavigationSheet() {
+  const [open, setOpen] = useState(false)
+  return (
+    <Sheet open={open} onOpenChange={setOpen}>
+      <SheetTrigger asChild>
+        <Button variant="outline">Menu</Button>
+      </SheetTrigger>
+      <SheetContent side="left">
+        <SheetHeader>
+          <SheetTitle>Navigation</SheetTitle>
+        </SheetHeader>
+        <nav className="py-4">
+          <Button variant="ghost" className="w-full justify-start">
+            Dashboard
+          </Button>
+        </nav>
+      </SheetContent>
+    </Sheet>
+  )
+}
+```
+### Example 3
+```tsx
+// Sheet with form handling
+<Sheet>
+  <SheetTrigger asChild>
+    <Button>Edit Profile</Button>
+  </SheetTrigger>
+  <SheetContent>
+    <form onSubmit={handleSubmit}>
+      <SheetHeader>
+        <SheetTitle>Edit Profile</SheetTitle>
+        <SheetDescription>
+          Update your profile information.
+        </SheetDescription>
+      </SheetHeader>
+      <div className="grid gap-4 py-4">
+        <Input placeholder="Name" />
+        <Input placeholder="Email" type="email" />
+      </div>
+      <SheetFooter>
+        <SheetClose asChild>
+          <Button type="button" variant="outline">Cancel</Button>
+        </SheetClose>
+        <Button type="submit">Save</Button>
+      </SheetFooter>
+    </form>
+  </SheetContent>
+</Sheet>
+```

package/.llm/sidebar-content.llm.md

@@ -0,0 +1,63 @@
+# SidebarContent
+
+**Type**: component
+
+Scrollable main content area of the sidebar The primary content container that houses navigation groups, menus, and other sidebar content. Provides automatic scrolling when content exceeds available height and handles overflow behavior when the sidebar is collapsed.
+
+## JSX Usage
+
+```jsx
+import { SidebarContent } from '@neynar/ui';
+
+<SidebarContent
+  className="value"
+/>
+```
+
+## Component Props
+
+### className
+- **Type**: `string`
+- **Required**: No
+- **Description**: No description available
+
+## Examples
+
+### Example 1
+```tsx
+// Basic content with navigation groups
+<SidebarContent>
+  <SidebarGroup>
+    <SidebarGroupLabel>Main</SidebarGroupLabel>
+    <SidebarGroupContent>
+      <SidebarMenu>
+        <SidebarMenuItem>
+          <SidebarMenuButton>
+            <Home />
+            <span>Dashboard</span>
+          </SidebarMenuButton>
+        </SidebarMenuItem>
+      </SidebarMenu>
+    </SidebarGroupContent>
+  </SidebarGroup>
+</SidebarContent>
+```
+### Example 2
+```tsx
+// Multiple groups with separators
+<SidebarContent>
+  <SidebarGroup>
+    <SidebarGroupLabel>Navigation</SidebarGroupLabel>
+    <SidebarGroupContent>
+      // Navigation items
+    </SidebarGroupContent>
+  </SidebarGroup>
+  <SidebarSeparator />
+  <SidebarGroup>
+    <SidebarGroupLabel>Projects</SidebarGroupLabel>
+    <SidebarGroupContent>
+      // Project items
+    </SidebarGroupContent>
+  </SidebarGroup>
+</SidebarContent>
+```

package/.llm/sidebar-footer.llm.md

@@ -0,0 +1,50 @@
+# SidebarFooter
+
+**Type**: component
+
+Footer section container for sidebar content A container positioned at the bottom of the sidebar for footer content such as user profiles, settings links, logout buttons, or help resources. The footer remains anchored to the bottom regardless of content height.
+
+## JSX Usage
+
+```jsx
+import { SidebarFooter } from '@neynar/ui';
+
+<SidebarFooter
+  className="value"
+/>
+```
+
+## Component Props
+
+### className
+- **Type**: `string`
+- **Required**: No
+- **Description**: No description available
+
+## Examples
+
+### Example 1
+```tsx
+// Simple footer with settings link
+<SidebarFooter>
+  <SidebarMenu>
+    <SidebarMenuItem>
+      <SidebarMenuButton>
+        <Settings />
+        <span>Settings</span>
+      </SidebarMenuButton>
+    </SidebarMenuItem>
+  </SidebarMenu>
+</SidebarFooter>
+```
+### Example 2
+```tsx
+// Footer with user profile and actions
+<SidebarFooter>
+  <SidebarMenu>
+    <SidebarMenuItem>
+      <SidebarMenuButton>
+        <Avatar className="h-6 w-6" />
+        <div className="flex flex-col text-left">
+          <span className="text-sm">John Doe</span>
+          <span className="text-xs text-muted-foreground">john

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

@@ -0,0 +1,60 @@
+# SidebarGroupAction
+
+**Type**: component
+
+Action button positioned within sidebar groups A compact action button positioned at the top-right of a sidebar group, typically used for group-specific actions such as adding new items, editing group settings, or accessing group options. Automatically hidden when collapsed.
+
+## JSX Usage
+
+```jsx
+import { SidebarGroupAction } from '@neynar/ui';
+
+<SidebarGroupAction
+  className="value"
+  asChild={true}
+/>
+```
+
+## Component Props
+
+### className
+- **Type**: `string`
+- **Required**: No
+- **Description**: No description available
+
+### asChild
+- **Type**: `boolean`
+- **Required**: No
+- **Description**: No description available
+
+## Examples
+
+### Example 1
+```tsx
+// Add button for projects group
+<SidebarGroup>
+  <SidebarGroupLabel>Projects</SidebarGroupLabel>
+  <SidebarGroupAction>
+    <Plus className="h-4 w-4" />
+    <span className="sr-only">Add Project</span>
+  </SidebarGroupAction>
+  <SidebarGroupContent>
+    // Project items
+  </SidebarGroupContent>
+</SidebarGroup>
+```
+### Example 2
+```tsx
+// Custom action with asChild
+<SidebarGroup>
+  <SidebarGroupLabel>Settings</SidebarGroupLabel>
+  <SidebarGroupAction asChild>
+    <Button variant="ghost" size="sm">
+      <MoreHorizontal className="h-4 w-4" />
+    </Button>
+  </SidebarGroupAction>
+  <SidebarGroupContent>
+    // Settings items
+  </SidebarGroupContent>
+</SidebarGroup>
+```

package/.llm/sidebar-group-content.llm.md

@@ -0,0 +1,64 @@
+# SidebarGroupContent
+
+**Type**: component
+
+Content container for sidebar group items Houses the actual navigation items, menus, and content within a sidebar group. Provides consistent spacing and organization for group content while maintaining proper typography and layout coordination.
+
+## JSX Usage
+
+```jsx
+import { SidebarGroupContent } from '@neynar/ui';
+
+<SidebarGroupContent
+  className="value"
+/>
+```
+
+## Component Props
+
+### className
+- **Type**: `string`
+- **Required**: No
+- **Description**: No description available
+
+## Examples
+
+### Example 1
+```tsx
+// Basic content with menu items
+<SidebarGroup>
+  <SidebarGroupLabel>Navigation</SidebarGroupLabel>
+  <SidebarGroupContent>
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <SidebarMenuButton>
+          <Home />
+          <span>Dashboard</span>
+        </SidebarMenuButton>
+      </SidebarMenuItem>
+      <SidebarMenuItem>
+        <SidebarMenuButton>
+          <Settings />
+          <span>Settings</span>
+        </SidebarMenuButton>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  </SidebarGroupContent>
+</SidebarGroup>
+```
+### Example 2
+```tsx
+// Multiple menus in group content
+<SidebarGroup>
+  <SidebarGroupLabel>Projects</SidebarGroupLabel>
+  <SidebarGroupContent>
+    <SidebarMenu>
+      // Recent projects
+    </SidebarMenu>
+    <SidebarSeparator />
+    <SidebarMenu>
+      // Archived projects
+    </SidebarMenu>
+  </SidebarGroupContent>
+</SidebarGroup>
+```

package/.llm/sidebar-group-label.llm.md

@@ -0,0 +1,53 @@
+# SidebarGroupLabel
+
+**Type**: component
+
+Label component for sidebar groups Displays a descriptive label for a group of sidebar items, providing clear categorization and hierarchy. The label automatically hides when the sidebar is collapsed to icon mode to maintain clean visual presentation.
+
+## JSX Usage
+
+```jsx
+import { SidebarGroupLabel } from '@neynar/ui';
+
+<SidebarGroupLabel
+  className="value"
+  asChild={true}
+/>
+```
+
+## Component Props
+
+### className
+- **Type**: `string`
+- **Required**: No
+- **Description**: No description available
+
+### asChild
+- **Type**: `boolean`
+- **Required**: No
+- **Description**: No description available
+
+## Examples
+
+### Example 1
+```tsx
+// Standard text label
+<SidebarGroup>
+  <SidebarGroupLabel>Main Navigation</SidebarGroupLabel>
+  <SidebarGroupContent>
+    // Menu items
+  </SidebarGroupContent>
+</SidebarGroup>
+```
+### Example 2
+```tsx
+// Custom element using asChild
+<SidebarGroup>
+  <SidebarGroupLabel asChild>
+    <h3 className="custom-heading">Projects</h3>
+  </SidebarGroupLabel>
+  <SidebarGroupContent>
+    // Project items
+  </SidebarGroupContent>
+</SidebarGroup>
+```

package/.llm/sidebar-group.llm.md

@@ -0,0 +1,56 @@
+# SidebarGroup
+
+**Type**: component
+
+Container for organizing related sidebar navigation items Groups related navigation items together with optional labels and actions, providing visual organization and hierarchy for complex navigation structures. Groups can include labels, action buttons, and any combination of menu items.
+
+## JSX Usage
+
+```jsx
+import { SidebarGroup } from '@neynar/ui';
+
+<SidebarGroup
+  className="value"
+/>
+```
+
+## Component Props
+
+### className
+- **Type**: `string`
+- **Required**: No
+- **Description**: No description available
+
+## Examples
+
+### Example 1
+```tsx
+// Basic group with label and menu
+<SidebarGroup>
+  <SidebarGroupLabel>Navigation</SidebarGroupLabel>
+  <SidebarGroupContent>
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <SidebarMenuButton>
+          <Home />
+          <span>Dashboard</span>
+        </SidebarMenuButton>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  </SidebarGroupContent>
+</SidebarGroup>
+```
+### Example 2
+```tsx
+// Group with action button
+<SidebarGroup>
+  <SidebarGroupLabel>Projects</SidebarGroupLabel>
+  <SidebarGroupAction>
+    <Plus className="h-4 w-4" />
+    <span className="sr-only">Add Project</span>
+  </SidebarGroupAction>
+  <SidebarGroupContent>
+    // Project items
+  </SidebarGroupContent>
+</SidebarGroup>
+```

package/.llm/sidebar-header.llm.md

@@ -0,0 +1,67 @@
+# SidebarHeader
+
+**Type**: component
+
+Header section container for sidebar content A flexible container for sidebar header content such as logos, application titles, user information, or action buttons. The header remains visible even when the sidebar is collapsed to icon mode, making it ideal for persistent branding or key actions.
+
+## JSX Usage
+
+```jsx
+import { SidebarHeader } from '@neynar/ui';
+
+<SidebarHeader
+  className="value"
+/>
+```
+
+## Component Props
+
+### className
+- **Type**: `string`
+- **Required**: No
+- **Description**: No description available
+
+## Examples
+
+### Example 1
+```tsx
+// Simple header with title
+<SidebarHeader>
+  <h2 className="text-lg font-semibold">My Application</h2>
+</SidebarHeader>
+```
+### Example 2
+```tsx
+// Header with trigger and search
+<SidebarHeader>
+  <div className="flex items-center justify-between">
+    <h2>Navigation</h2>
+    <SidebarTrigger />
+  </div>
+  <SidebarInput placeholder="Search..." className="mt-2" />
+</SidebarHeader>
+```
+### Example 3
+```tsx
+// Header with user menu
+<SidebarHeader>
+  <SidebarMenu>
+    <SidebarMenuItem>
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <SidebarMenuButton>
+            <Avatar />
+            <span>John Doe</span>
+            <ChevronDown className="ml-auto" />
+          </SidebarMenuButton>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent>
+          <DropdownMenuItem>Profile</DropdownMenuItem>
+          <DropdownMenuItem>Settings</DropdownMenuItem>
+          <DropdownMenuItem>Logout</DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </SidebarMenuItem>
+  </SidebarMenu>
+</SidebarHeader>
+```

package/.llm/sidebar-input.llm.md

@@ -0,0 +1,50 @@
+# SidebarInput
+
+**Type**: component
+
+Input component optimized for sidebar usage A pre-styled input field designed to integrate seamlessly within sidebar layouts. Commonly used for search functionality, filters, or other input needs within the sidebar context. Features appropriate sizing and styling for sidebar use.
+
+## JSX Usage
+
+```jsx
+import { SidebarInput } from '@neynar/ui';
+
+<SidebarInput
+  className="value"
+/>
+```
+
+## Component Props
+
+### className
+- **Type**: `string`
+- **Required**: No
+- **Description**: No description available
+
+## Examples
+
+### Example 1
+```tsx
+// Search input in sidebar header
+<SidebarHeader>
+  <h2>Navigation</h2>
+  <SidebarInput
+    placeholder="Search..."
+    onChange={(e) => handleSearch(e.target.value)}
+  />
+</SidebarHeader>
+```
+### Example 2
+```tsx
+// Filter input with icon
+<SidebarGroup>
+  <SidebarGroupLabel>Filter Options</SidebarGroupLabel>
+  <SidebarGroupContent>
+    <SidebarInput
+      type="search"
+      placeholder="Filter items"
+      className="mb-2"
+    />
+  </SidebarGroupContent>
+</SidebarGroup>
+```

package/.llm/sidebar-inset.llm.md

@@ -0,0 +1,52 @@
+# SidebarInset
+
+**Type**: component
+
+Main content container that adapts to sidebar layout The SidebarInset component serves as the primary content area that automatically adjusts its layout and spacing based on the sidebar's state and variant. It provides proper margins, responsive behavior, and styling coordination with the sidebar.
+
+## JSX Usage
+
+```jsx
+import { SidebarInset } from '@neynar/ui';
+
+<SidebarInset
+  className="value"
+/>
+```
+
+## Component Props
+
+### className
+- **Type**: `string`
+- **Required**: No
+- **Description**: No description available
+
+## Examples
+
+### Example 1
+```tsx
+// Standard layout with header and content
+<SidebarProvider>
+  <Sidebar>Sidebar content</Sidebar>
+  <SidebarInset>
+    <header className="flex h-16 items-center gap-2 px-4">
+      <SidebarTrigger />
+      <h1>Page Title</h1>
+    </header>
+    <main className="flex-1 p-4">
+      <p>Your main content goes here</p>
+    </main>
+  </SidebarInset>
+</SidebarProvider>
+```
+### Example 2
+```tsx
+// With inset variant coordination
+<SidebarProvider>
+  <Sidebar variant="inset">Sidebar</Sidebar>
+  <SidebarInset>
+    // Content automatically gets proper spacing
+    <div>Content with proper inset margins</div>
+  </SidebarInset>
+</SidebarProvider>
+```