@neynar/ui 0.3.0 → 0.3.1

package/.llm/resizable-panel.llm.md

@@ -0,0 +1,157 @@
+# ResizablePanel
+
+**Type**: component
+
+Individual resizable panel within a panel group with size constraints and callbacks ResizablePanel represents a single resizable section within a ResizablePanelGroup. Supports flexible sizing constraints, collapse/expand behavior, and programmatic control through imperative API. Each panel automatically handles content overflow and maintains accessibility during resize operations with proper focus and scroll management.
+
+## JSX Usage
+
+```jsx
+import { ResizablePanel } from '@neynar/ui';
+
+<ResizablePanel
+  id="value"
+  order={0}
+  defaultSize={0}
+  minSize={0}
+  maxSize={0}
+  collapsible={true}
+  collapsedSize={0}
+  onCollapse={handleCollapse}
+  onExpand={handleExpand}
+  onResize={handleResize}
+  tagName={value}
+  className="value"
+  style={value}
+>
+  {/* Your content here */}
+</ResizablePanel>
+```
+
+## Component Props
+
+### id
+- **Type**: `string`
+- **Required**: No
+- **Description**: Unique identifier for programmatic control and conditional rendering
+
+### order
+- **Type**: `number`
+- **Required**: No
+- **Description**: Display order within group, important when panels are conditionally rendered
+
+### defaultSize
+- **Type**: `number`
+- **Required**: No
+- **Description**: Initial size as percentage (0-100) when panel first mounts
+
+### minSize
+- **Type**: `number`
+- **Required**: No
+- **Description**: Minimum size constraint as percentage (0-100)
+
+### maxSize
+- **Type**: `number`
+- **Required**: No
+- **Description**: Maximum size constraint as percentage (0-100)
+
+### collapsible
+- **Type**: `boolean`
+- **Required**: No
+- **Description**: Whether panel can collapse beyond minSize to collapsedSize
+
+### collapsedSize
+- **Type**: `number`
+- **Required**: No
+- **Description**: Size when fully collapsed, must be between 0 and minSize
+
+### onCollapse
+- **Type**: `() => void`
+- **Required**: No
+- **Description**: Callback fired when panel collapses to minimum size
+
+### onExpand
+- **Type**: `() => void`
+- **Required**: No
+- **Description**: Callback fired when panel expands from collapsed state
+
+### onResize
+- **Type**: `(size: number, prevSize: number | undefined) => void`
+- **Required**: No
+- **Description**: Callback fired during resize with current and previous sizes
+
+### tagName
+- **Type**: `keyof React.JSX.IntrinsicElements`
+- **Required**: No
+- **Description**: No description available
+
+### className
+- **Type**: `string`
+- **Required**: No
+- **Description**: Additional CSS classes for custom styling
+
+### style
+- **Type**: `React.CSSProperties`
+- **Required**: No
+- **Description**: No description available
+
+### children
+- **Type**: `React.ReactNode`
+- **Required**: No
+- **Description**: Panel content elements
+
+## Examples
+
+### Example 1
+```tsx
+// Basic panel with default size
+<ResizablePanel defaultSize={50}>
+  <div className="p-4">Panel content</div>
+</ResizablePanel>
+```
+### Example 2
+```tsx
+// Panel with size constraints and callbacks
+<ResizablePanel
+  id="sidebar"
+  defaultSize={30}
+  minSize={20}
+  maxSize={60}
+  collapsible
+  onCollapse={() => console.log('Sidebar collapsed')}
+  onExpand={() => console.log('Sidebar expanded')}
+  onResize={(size, prevSize) => console.log(`Resized from ${prevSize}% to ${size}%`)}
+>
+  <aside className="p-4">Collapsible sidebar content</aside>
+</ResizablePanel>
+```
+### Example 3
+```tsx
+// Panel with conditional rendering support
+<ResizablePanel
+  id="dynamic-panel"
+  order={1}
+  defaultSize={40}
+  collapsible
+  collapsedSize={5}
+>
+  {isExpanded ? <FullContent /> : <CollapsedView />}
+</ResizablePanel>
+```
+### Example 4
+```tsx
+// Panel with imperative control via ref
+function PanelWithControl() {
+  const panelRef = useRef<ImperativePanelHandle>(null);
+  return (
+    <>
+      <button onClick={() => panelRef.current?.collapse()}>
+        Collapse Panel
+      </button>
+      <ResizablePanel ref={panelRef} defaultSize={50} collapsible>
+        <div>Controlled panel content</div>
+      </ResizablePanel>
+    </>
+  );
+}
+```

package/.llm/scroll-area-corner.llm.md

@@ -0,0 +1,41 @@
+# ScrollAreaCorner
+
+**Type**: component
+
+ScrollAreaCorner - The corner element where horizontal and vertical scrollbars meet Appears when both horizontal and vertical scrollbars are present. Usually handled automatically by the ScrollArea component but can be customized for specific layout requirements.
+
+## JSX Usage
+
+```jsx
+import { ScrollAreaCorner } from '@neynar/ui';
+
+<ScrollAreaCorner
+  asChild={true}
+  className="value"
+/>
+```
+
+## Component Props
+
+### asChild
+- **Type**: `boolean`
+- **Required**: No
+- **Description**: No description available
+
+### className
+- **Type**: `string`
+- **Required**: No
+- **Description**: No description available
+
+## Examples
+
+```tsx
+// Custom corner styling
+<ScrollArea className="h-64 w-64">
+  <div className="w-96 h-96 p-4">
+    Content that overflows both axes
+  </div>
+  <ScrollBar orientation="horizontal" />
+  <ScrollAreaCorner className="bg-gray-100" />
+</ScrollArea>
+```

package/.llm/scroll-area-thumb.llm.md

@@ -0,0 +1,39 @@
+# ScrollAreaThumb
+
+**Type**: component
+
+ScrollAreaThumb - The draggable thumb element within the scrollbar Represents the current scroll position and can be dragged to scroll content. Usually styled automatically as part of the ScrollBar component, but can be customized for specific design requirements.
+
+## JSX Usage
+
+```jsx
+import { ScrollAreaThumb } from '@neynar/ui';
+
+<ScrollAreaThumb
+  asChild={true}
+  className="value"
+/>
+```
+
+## Component Props
+
+### asChild
+- **Type**: `boolean`
+- **Required**: No
+- **Description**: No description available
+
+### className
+- **Type**: `string`
+- **Required**: No
+- **Description**: No description available
+
+## Examples
+
+```tsx
+// Custom scrollbar with styled thumb
+const CustomScrollbar = ({ orientation = "vertical" }) => (
+  <ScrollAreaPrimitive.ScrollAreaScrollbar orientation={orientation}>
+    <ScrollAreaThumb className="bg-blue-500 hover:bg-blue-600 active:bg-blue-700" />
+  </ScrollAreaPrimitive.ScrollAreaScrollbar>
+);
+```

package/.llm/scroll-area-viewport.llm.md

@@ -0,0 +1,60 @@
+# ScrollAreaViewport
+
+**Type**: component
+
+ScrollAreaViewport - The viewport area of the scroll area Contains the scrollable content and handles the actual scrolling behavior. This is the element that receives focus and handles keyboard navigation. Use refs on this component for programmatic scrolling control.
+
+## JSX Usage
+
+```jsx
+import { ScrollAreaViewport } from '@neynar/ui';
+
+<ScrollAreaViewport
+  asChild={true}
+  className="value"
+>
+  {/* Your content here */}
+</ScrollAreaViewport>
+```
+
+## Component Props
+
+### asChild
+- **Type**: `boolean`
+- **Required**: No
+- **Description**: No description available
+
+### className
+- **Type**: `string`
+- **Required**: No
+- **Description**: No description available
+
+### children
+- **Type**: `React.ReactNode`
+- **Required**: No
+- **Description**: No description available
+
+## Examples
+
+```tsx
+// Accessing viewport for programmatic scrolling
+const ScrollWithButton = () => {
+  const viewportRef = useRef<HTMLDivElement>(null);
+  const scrollToBottom = () => {
+    const viewport = viewportRef.current;
+    if (viewport) {
+      viewport.scrollTop = viewport.scrollHeight;
+    }
+  };
+  return (
+    <ScrollArea className="h-64 w-96">
+      <ScrollAreaViewport ref={viewportRef}>
+        <div className="p-4">
+          // Content here
+          <button onClick={scrollToBottom}>Scroll to bottom</button>
+        </div>
+      </ScrollAreaViewport>
+    </ScrollArea>
+  );
+};
+```

package/.llm/scroll-area.llm.md

@@ -0,0 +1,125 @@
+# ScrollArea
+
+**Type**: component
+
+ScrollArea - Custom scrollable area with cross-browser styling Augments native scroll functionality for custom, cross-browser styling with enhanced scrolling experience. Built on Radix UI's ScrollArea primitive for accessibility and keyboard navigation support. Provides consistent scrollbar appearance across different browsers while maintaining native scroll behavior and performance. The component automatically handles vertical scrolling and can be extended with horizontal scrolling using the ScrollBar component. Supports programmatic control via refs and maintains all native scrolling behaviors including touch gestures.
+
+## JSX Usage
+
+```jsx
+import { ScrollArea } from '@neynar/ui';
+
+<ScrollArea
+  className="value"
+  type={value}
+  scrollHideDelay={0}
+  dir={value}
+  nonce="value"
+  asChild={true}
+>
+  {/* Your content here */}
+</ScrollArea>
+```
+
+## Component Props
+
+### className
+- **Type**: `string`
+- **Required**: No
+- **Description**: No description available
+
+### children
+- **Type**: `React.ReactNode`
+- **Required**: No
+- **Description**: No description available
+
+### type
+- **Type**: `"auto" | "always" | "scroll" | "hover"`
+- **Required**: No
+- **Description**: No description available
+
+### scrollHideDelay
+- **Type**: `number`
+- **Required**: No
+- **Description**: No description available
+
+### dir
+- **Type**: `"ltr" | "rtl"`
+- **Required**: No
+- **Description**: No description available
+
+### nonce
+- **Type**: `string`
+- **Required**: No
+- **Description**: No description available
+
+### asChild
+- **Type**: `boolean`
+- **Required**: No
+- **Description**: No description available
+
+## Examples
+
+### Example 1
+```tsx
+// Basic vertical scrollable area
+<ScrollArea className="h-72 w-48 rounded-md border">
+  <div className="p-4">
+    {items.map((item) => (
+      <div key={item.id} className="mb-4">
+        {item.content}
+      </div>
+    ))}
+  </div>
+</ScrollArea>
+```
+### Example 2
+```tsx
+// Horizontal scrolling with custom scrollbar
+<ScrollArea className="w-full whitespace-nowrap rounded-md border">
+  <div className="flex gap-4 p-4">
+    {cards.map((card) => (
+      <div key={card.id} className="w-64 flex-none">
+        {card.content}
+      </div>
+    ))}
+  </div>
+  <ScrollBar orientation="horizontal" />
+</ScrollArea>
+```
+### Example 3
+```tsx
+// Both scrollbars for large content with always-visible scrollbars
+<ScrollArea className="h-96 w-80 rounded-md border" type="always">
+  <div className="w-[600px] p-4">
+    <div className="space-y-4">
+      {largeDataSet.map((item) => (
+        <div key={item.id} className="min-w-max">
+          {item.wideContent}
+        </div>
+      ))}
+    </div>
+  </div>
+  <ScrollBar orientation="horizontal" />
+</ScrollArea>
+```
+### Example 4
+```tsx
+// Programmatic scrolling with ref
+function ProgrammaticScroll() {
+  const viewportRef = useRef<HTMLDivElement>(null);
+  const scrollToTop = () => {
+    viewportRef.current?.scrollTo({ top: 0, behavior: 'smooth' });
+  };
+  return (
+    <ScrollArea className="h-72 w-96">
+      <ScrollAreaViewport ref={viewportRef}>
+        <div className="p-4">
+          // Long content here
+          <button onClick={scrollToTop}>Scroll to top</button>
+        </div>
+      </ScrollAreaViewport>
+    </ScrollArea>
+  );
+}
+```

package/.llm/scroll-bar.llm.md

@@ -0,0 +1,78 @@
+# ScrollBar
+
+**Type**: component
+
+ScrollBar - Custom styled scrollbar for ScrollArea Companion component to ScrollArea that renders styled scrollbars with support for both vertical and horizontal orientations. The vertical scrollbar is automatically included in ScrollArea, but horizontal scrollbars must be explicitly added when needed. The scrollbar automatically shows/hides based on content overflow and user interaction. Supports touch interactions and provides visual feedback during scroll operations.
+
+## JSX Usage
+
+```jsx
+import { ScrollBar } from '@neynar/ui';
+
+<ScrollBar
+  orientation={value}
+  forceMount={value}
+  asChild={true}
+  className="value"
+/>
+```
+
+## Component Props
+
+### orientation
+- **Type**: `"vertical" | "horizontal"`
+- **Required**: No
+- **Description**: No description available
+
+### forceMount
+- **Type**: `true`
+- **Required**: No
+- **Description**: No description available
+
+### asChild
+- **Type**: `boolean`
+- **Required**: No
+- **Description**: No description available
+
+### className
+- **Type**: `string`
+- **Required**: No
+- **Description**: No description available
+
+## Examples
+
+### Example 1
+```tsx
+// Explicit horizontal scrollbar for wide content
+<ScrollArea className="w-full max-w-md">
+  <div className="flex gap-4 p-4 min-w-max">
+    {items.map((item) => (
+      <div key={item.id} className="w-48 flex-none">
+        {item.content}
+      </div>
+    ))}
+  </div>
+  <ScrollBar orientation="horizontal" />
+</ScrollArea>
+```
+### Example 2
+```tsx
+// Both scrollbars with custom styling
+<ScrollArea className="h-64 w-64 border">
+  <div className="w-96 h-96 p-4">
+    Large content that overflows both axes
+  </div>
+  <ScrollBar orientation="vertical" className="bg-slate-100" />
+  <ScrollBar orientation="horizontal" className="bg-slate-100" />
+</ScrollArea>
+```
+### Example 3
+```tsx
+// Force-mounted scrollbar that always shows
+<ScrollArea className="h-48 w-full">
+  <div className="p-4">
+    Content that may or may not overflow
+  </div>
+  <ScrollBar orientation="horizontal" forceMount />
+</ScrollArea>
+```