@neynar/ui 0.2.1 → 0.3.0

package/llm-docs/sidebar-provider.llm.md

@@ -1,79 +0,0 @@
-# SidebarProvider
-
-**Type**: component
-
-Context provider for comprehensive sidebar state management The SidebarProvider is the foundational component that manages all sidebar behavior including state persistence, responsive design, keyboard shortcuts, and mobile handling. It provides context to all sidebar-related components and should wrap your entire application or the section containing the sidebar.
-
-## JSX Usage
-
-```jsx
-import { SidebarProvider } from '@neynar/ui';
-
-<SidebarProvider
-  defaultOpen={true}
-  open={true}
-  onOpenChange={handleOpenChange}
->
-  {/* Your content here */}
-</SidebarProvider>
-```
-
-## Component Props
-
-### defaultOpen
-- **Type**: `boolean`
-- **Required**: No
-- **Description**: No description available
-
-### open
-- **Type**: `boolean`
-- **Required**: No
-- **Description**: No description available
-
-### onOpenChange
-- **Type**: `(open: boolean) => void`
-- **Required**: No
-- **Description**: No description available
-
-### children
-- **Type**: `React.ReactNode`
-- **Required**: No
-- **Description**: Child components
-
-## Examples
-
-### Example 1
-```tsx
-// Basic uncontrolled usage
-<SidebarProvider>
-  <Sidebar />
-  <SidebarInset>
-    <main>Your content</main>
-  </SidebarInset>
-</SidebarProvider>
-```
-### Example 2
-```tsx
-// Controlled usage with custom state
-function App() {
-  const [sidebarOpen, setSidebarOpen] = useState(false)
-  return (
-    <SidebarProvider open={sidebarOpen} onOpenChange={setSidebarOpen}>
-      <Sidebar />
-      <SidebarInset>Content</SidebarInset>
-    </SidebarProvider>
-  )
-}
-```
-### Example 3
-```tsx
-// Custom width with CSS variables
-<SidebarProvider
-  style={{
-    "--sidebar-width": "20rem",
-    "--sidebar-width-mobile": "18rem"
-  }}
->
-  <Sidebar />
-</SidebarProvider>
-```

package/llm-docs/sidebar-rail.llm.md

@@ -1,34 +0,0 @@
-# SidebarRail
-
-**Type**: component
-
-Interactive rail component for sidebar edge interaction Provides a subtle interactive area along the sidebar edge that users can click to toggle the sidebar state. The rail is positioned at the sidebar boundary and includes hover states for discoverability. Only visible on desktop viewports.
-
-## JSX Usage
-
-```jsx
-import { SidebarRail } from '@neynar/ui';
-
-<SidebarRail
-  className="value"
-/>
-```
-
-## Component Props
-
-### className
-- **Type**: `string`
-- **Required**: No
-- **Description**: No description available
-
-## Examples
-
-```tsx
-// Basic usage (typically placed at end of Sidebar)
-<Sidebar>
-  <SidebarHeader>Header content</SidebarHeader>
-  <SidebarContent>Navigation content</SidebarContent>
-  <SidebarFooter>Footer content</SidebarFooter>
-  <SidebarRail />
-</Sidebar>
-```

package/llm-docs/sidebar-separator.llm.md

@@ -1,57 +0,0 @@
-# SidebarSeparator
-
-**Type**: component
-
-Visual separator for organizing sidebar sections A horizontal divider component used to visually separate different sections within the sidebar content. Helps organize navigation groups and improve visual hierarchy and readability.
-
-## JSX Usage
-
-```jsx
-import { SidebarSeparator } from '@neynar/ui';
-
-<SidebarSeparator
-  className="value"
-/>
-```
-
-## Component Props
-
-### className
-- **Type**: `string`
-- **Required**: No
-- **Description**: No description available
-
-## Examples
-
-### Example 1
-```tsx
-// Separating navigation groups
-<SidebarContent>
-  <SidebarGroup>
-    <SidebarGroupLabel>Main Navigation</SidebarGroupLabel>
-    <SidebarGroupContent>
-      // Main nav items
-    </SidebarGroupContent>
-  </SidebarGroup>
-  <SidebarSeparator />
-  <SidebarGroup>
-    <SidebarGroupLabel>Settings</SidebarGroupLabel>
-    <SidebarGroupContent>
-      // Settings items
-    </SidebarGroupContent>
-  </SidebarGroup>
-</SidebarContent>
-```
-### Example 2
-```tsx
-// Between header and content
-<Sidebar>
-  <SidebarHeader>
-    <h2>Application</h2>
-  </SidebarHeader>
-  <SidebarSeparator />
-  <SidebarContent>
-    // Navigation content
-  </SidebarContent>
-</Sidebar>
-```

package/llm-docs/sidebar-trigger.llm.md

@@ -1,49 +0,0 @@
-# SidebarTrigger
-
-**Type**: component
-
-Interactive button component for toggling sidebar visibility A pre-styled button that toggles the sidebar between expanded and collapsed states on desktop, or opens/closes the mobile sheet overlay on smaller screens. Features a panel icon and proper accessibility attributes.
-
-## JSX Usage
-
-```jsx
-import { SidebarTrigger } from '@neynar/ui';
-
-<SidebarTrigger
-  className="value"
-  onClick={handleClick}
-/>
-```
-
-## Component Props
-
-### className
-- **Type**: `string`
-- **Required**: No
-- **Description**: No description available
-
-### onClick
-- **Type**: `(event: React.MouseEvent<HTMLButtonElement>) => void`
-- **Required**: No
-- **Description**: No description available
-
-## Examples
-
-### Example 1
-```tsx
-// Basic usage in header
-<header className="flex items-center gap-2 p-4">
-  <SidebarTrigger />
-  <h1>My Application</h1>
-</header>
-```
-### Example 2
-```tsx
-// With custom click handler
-<SidebarTrigger
-  onClick={(e) => {
-    console.log('Sidebar toggled')
-    // Additional logic here
-  }}
-/>
-```

package/llm-docs/sidebar.llm.md

@@ -1,129 +0,0 @@
-# Sidebar
-
-**Type**: component
-
-Flexible and responsive navigation sidebar component The Sidebar component is the main container for navigation content, supporting multiple visual variants, collapsible behaviors, and responsive design patterns. It automatically adapts between desktop layouts and mobile sheet overlays based on viewport size.
-
-## JSX Usage
-
-```jsx
-import { Sidebar } from '@neynar/ui';
-
-<Sidebar
-  side={value}
-  variant={value}
-  collapsible={value}
-  className="value"
->
-  {/* Your content here */}
-</Sidebar>
-```
-
-## Component Props
-
-### side
-- **Type**: `"left" | "right"`
-- **Required**: No
-- **Description**: No description available
-
-### variant
-- **Type**: `"sidebar" | "floating" | "inset"`
-- **Required**: No
-- **Description**: No description available
-
-### collapsible
-- **Type**: `"offcanvas" | "icon" | "none"`
-- **Required**: No
-- **Description**: No description available
-
-### className
-- **Type**: `string`
-- **Required**: No
-- **Description**: No description available
-
-### children
-- **Type**: `React.ReactNode`
-- **Required**: No
-- **Description**: Sidebar content (Header, Content, Footer)
-
-## Examples
-
-### Example 1
-```tsx
-// Standard navigation sidebar
-<SidebarProvider>
-  <Sidebar>
-    <SidebarHeader>
-      <h2>My Application</h2>
-    </SidebarHeader>
-    <SidebarContent>
-      <SidebarGroup>
-        <SidebarGroupLabel>Main</SidebarGroupLabel>
-        <SidebarGroupContent>
-          <SidebarMenu>
-            <SidebarMenuItem>
-              <SidebarMenuButton asChild>
-                <Link href="/dashboard">
-                  <Home />
-                  <span>Dashboard</span>
-                </Link>
-              </SidebarMenuButton>
-            </SidebarMenuItem>
-          </SidebarMenu>
-        </SidebarGroupContent>
-      </SidebarGroup>
-    </SidebarContent>
-    <SidebarFooter>
-      <SidebarMenu>
-        <SidebarMenuItem>
-          <SidebarMenuButton>
-            <Settings />
-            <span>Settings</span>
-          </SidebarMenuButton>
-        </SidebarMenuItem>
-      </SidebarMenu>
-    </SidebarFooter>
-  </Sidebar>
-  <SidebarInset>
-    <main>Main content area</main>
-  </SidebarInset>
-</SidebarProvider>
-```
-### Example 2
-```tsx
-// Icon-collapsible sidebar with tooltips
-<SidebarProvider>
-  <Sidebar collapsible="icon">
-    <SidebarContent>
-      <SidebarGroup>
-        <SidebarGroupLabel>Navigation</SidebarGroupLabel>
-        <SidebarGroupContent>
-          <SidebarMenu>
-            <SidebarMenuItem>
-              <SidebarMenuButton tooltip="Go to Dashboard">
-                <Home />
-                <span>Dashboard</span>
-              </SidebarMenuButton>
-            </SidebarMenuItem>
-          </SidebarMenu>
-        </SidebarGroupContent>
-      </SidebarGroup>
-    </SidebarContent>
-  </Sidebar>
-</SidebarProvider>
-```
-### Example 3
-```tsx
-// Floating variant with custom styling
-<SidebarProvider>
-  <Sidebar variant="floating">
-    <SidebarHeader>
-      <SidebarTrigger />
-      <h2>Floating Sidebar</h2>
-    </SidebarHeader>
-    <SidebarContent>
-      // Navigation content
-    </SidebarContent>
-  </Sidebar>
-</SidebarProvider>
-```

package/llm-docs/skeleton.llm.md

@@ -1,134 +0,0 @@
-# Skeleton
-
-**Type**: component
-
-Skeleton - Animated loading placeholder that improves perceived performance A lightweight component that creates animated placeholders mimicking the structure and layout of content being loaded. Features a subtle pulse animation to indicate loading state while maintaining layout stability during data fetching operations. Built on standard HTML div element with Tailwind CSS animations. Designed to be highly composable and can be shaped to match any content structure using className. The component uses semantic presentation role by default for optimal accessibility.
-
-## JSX Usage
-
-```jsx
-import { Skeleton } from '@neynar/ui';
-
-<Skeleton
-  className="value"
-  "aria-label"="value"
-  "aria-describedby"="value"
-  role="value"
-  "data-testid"="value"
->
-  {/* Your content here */}
-</Skeleton>
-```
-
-## Component Props
-
-### className
-- **Type**: `string`
-- **Required**: No
-- **Description**: No description available
-
-### children
-- **Type**: `React.ReactNode`
-- **Required**: No
-- **Description**: No description available
-
-### "aria-label"
-- **Type**: `string`
-- **Required**: No
-- **Description**: No description available
-
-### "aria-describedby"
-- **Type**: `string`
-- **Required**: No
-- **Description**: No description available
-
-### role
-- **Type**: `string`
-- **Required**: No
-- **Description**: No description available
-
-### "data-testid"
-- **Type**: `string`
-- **Required**: No
-- **Description**: No description available
-
-## Examples
-
-### Example 1
-```tsx
-// Basic text content placeholder
-<Skeleton className="h-4 w-[250px]" />
-```
-### Example 2
-```tsx
-// Avatar placeholder - circular skeleton
-<Skeleton className="h-12 w-12 rounded-full" aria-label="Loading user avatar" />
-```
-### Example 3
-```tsx
-// Button placeholder with proper dimensions
-<Skeleton className="h-10 w-24 rounded-md" aria-label="Loading action button" />
-```
-### Example 4
-```tsx
-// Image placeholder with aspect ratio
-<Skeleton className="h-48 w-full rounded-lg" aria-label="Loading featured image" />
-```
-### Example 5
-```tsx
-// Card content structure - multiple related skeletons
-<div className="space-y-3" aria-busy="true" aria-label="Loading article content">
-  <Skeleton className="h-6 w-3/4" /> // Title
-  <Skeleton className="h-4 w-full" /> // First line
-  <Skeleton className="h-4 w-5/6" /> // Second line
-  <Skeleton className="h-4 w-4/5" /> // Third line
-</div>
-```
-### Example 6
-```tsx
-// Complex user profile layout
-<Card className="p-6">
-  <div className="flex items-center gap-4 mb-4">
-    <Skeleton className="h-16 w-16 rounded-full" aria-label="Loading profile picture" />
-    <div className="space-y-2">
-      <Skeleton className="h-5 w-32" /> // Name
-      <Skeleton className="h-4 w-24" /> // Title
-      <Skeleton className="h-3 w-20" /> // Status
-    </div>
-  </div>
-  <div className="space-y-3">
-    <Skeleton className="h-4 w-full" />
-    <Skeleton className="h-4 w-4/5" />
-    <Skeleton className="h-32 w-full rounded-md" /> // Content area
-  </div>
-</Card>
-```
-### Example 7
-```tsx
-// Data table loading state
-<div className="space-y-2" aria-busy="true" aria-label="Loading table data">
-  {Array.from({ length: 5 }).map((_, index) => (
-    <div key={index} className="flex items-center gap-4 p-2">
-      <Skeleton className="h-8 w-8 rounded-full" />
-      <Skeleton className="h-4 w-32" />
-      <Skeleton className="h-4 w-24" />
-      <Skeleton className="h-4 w-16" />
-      <div className="ml-auto">
-        <Skeleton className="h-8 w-20 rounded-md" />
-      </div>
-    </div>
-  ))}
-</div>
-```
-### Example 8
-```tsx
-// Navigation menu loading
-<nav className="space-y-2" aria-label="Loading navigation">
-  {Array.from({ length: 4 }).map((_, index) => (
-    <div key={index} className="flex items-center gap-3 p-2">
-      <Skeleton className="h-5 w-5 rounded" /> // Icon
-      <Skeleton className="h-4 w-20" /> // Label
-    </div>
-  ))}
-</nav>
-```

package/llm-docs/slider.llm.md

@@ -1,173 +0,0 @@
-# Slider
-
-**Type**: component
-
-Slider - Range input control for selecting numeric values A versatile range input control built on Radix UI Slider primitives that allows users to select single or multiple values by dragging thumbs along a track. Supports both horizontal and vertical orientations, custom ranges, step intervals, and comprehensive accessibility features for keyboard and touch interaction. The component automatically renders the appropriate number of thumbs based on the number of values provided, supporting both single-value and multi-value range selection. Built with enhanced styling and smooth animations for an optimal user experience.
-
-## JSX Usage
-
-```jsx
-import { Slider } from '@neynar/ui';
-
-<Slider
-  className="value"
-  asChild={true}
-  defaultValue={[]}
-  value={[]}
-  onValueChange={handleValueChange}
-  onValueCommit={handleValueCommit}
-  name="value"
-  disabled={true}
-  orientation={value}
-  dir={value}
-  inverted={true}
-  min={0}
-  max={0}
-  step={0}
-  minStepsBetweenThumbs={0}
-  form="value"
-/>
-```
-
-## Component Props
-
-### className
-- **Type**: `string`
-- **Required**: No
-- **Description**: No description available
-
-### asChild
-- **Type**: `boolean`
-- **Required**: No
-- **Description**: No description available
-
-### defaultValue
-- **Type**: `number[]`
-- **Required**: No
-- **Description**: No description available
-
-### value
-- **Type**: `number[]`
-- **Required**: No
-- **Description**: No description available
-
-### onValueChange
-- **Type**: `(value: number[]) => void`
-- **Required**: No
-- **Description**: No description available
-
-### onValueCommit
-- **Type**: `(value: number[]) => void`
-- **Required**: No
-- **Description**: No description available
-
-### name
-- **Type**: `string`
-- **Required**: No
-- **Description**: No description available
-
-### disabled
-- **Type**: `boolean`
-- **Required**: No
-- **Description**: No description available
-
-### orientation
-- **Type**: `"horizontal" | "vertical"`
-- **Required**: No
-- **Description**: No description available
-
-### dir
-- **Type**: `"ltr" | "rtl"`
-- **Required**: No
-- **Description**: No description available
-
-### inverted
-- **Type**: `boolean`
-- **Required**: No
-- **Description**: No description available
-
-### min
-- **Type**: `number`
-- **Required**: No
-- **Description**: No description available
-
-### max
-- **Type**: `number`
-- **Required**: No
-- **Description**: No description available
-
-### step
-- **Type**: `number`
-- **Required**: No
-- **Description**: No description available
-
-### minStepsBetweenThumbs
-- **Type**: `number`
-- **Required**: No
-- **Description**: No description available
-
-### form
-- **Type**: `string`
-- **Required**: No
-- **Description**: No description available
-
-## Examples
-
-### Example 1
-```tsx
-// Basic single-value slider
-<Slider defaultValue={[50]} max={100} step={1} />
-```
-### Example 2
-```tsx
-// Controlled slider with state management
-const [value, setValue] = useState([25])
-<Slider
-  value={value}
-  onValueChange={setValue}
-  max={100}
-  step={5}
-/>
-```
-### Example 3
-```tsx
-// Range slider with two thumbs for selecting a range
-<Slider
-  defaultValue={[25, 75]}
-  max={100}
-  step={1}
-  minStepsBetweenThumbs={10}
-/>
-```
-### Example 4
-```tsx
-// Vertical orientation for space-constrained layouts
-<Slider
-  defaultValue={[50]}
-  max={100}
-  orientation="vertical"
-  className="h-60"
-/>
-```
-### Example 5
-```tsx
-// Custom range and step intervals for precise control
-<Slider
-  defaultValue={[500]}
-  min={0}
-  max={1000}
-  step={50}
-/>
-```
-### Example 6
-```tsx
-// Form integration with name and onValueCommit
-<form>
-  <Slider
-    name="volume"
-    defaultValue={[75]}
-    max={100}
-    onValueCommit={(value) => console.log('Final value:', value)}
-  />
-</form>
-```