@neynar/ui 0.4.0 → 1.0.0

package/dist/components/ui/resizable.d.ts

@@ -1,280 +1,25 @@
+import { Group as PanelGroup, Panel, Separator as PanelResizeHandle } from 'react-resizable-panels';
 import * as React from "react";
-import * as ResizablePrimitive from "react-resizable-panels";
+type ResizablePanelGroupProps = React.ComponentProps<typeof PanelGroup>;
 /**
- * Container for creating resizable panel groups with full keyboard accessibility
- *
- * ResizablePanelGroup provides a flexible container for organizing multiple resizable panels
- * that can be resized by dragging handles between them or using keyboard navigation.
- * Built on react-resizable-panels with enhanced styling, accessibility, and persistence features.
- * Supports both horizontal and vertical layouts with automatic layout saving and restoration.
- *
- * @example
- * ```tsx
- * // Basic horizontal layout
- * <ResizablePanelGroup direction="horizontal" className="h-full">
- *   <ResizablePanel defaultSize={50}>
- *     <div className="p-4">Left panel content</div>
- *   </ResizablePanel>
- *   <ResizableHandle />
- *   <ResizablePanel defaultSize={50}>
- *     <div className="p-4">Right panel content</div>
- *   </ResizablePanel>
- * </ResizablePanelGroup>
- * ```
- *
- * @example
- * ```tsx
- * // Vertical layout with visual handles
- * <ResizablePanelGroup direction="vertical" className="min-h-[400px]">
- *   <ResizablePanel defaultSize={30}>
- *     <header className="p-4">Header content</header>
- *   </ResizablePanel>
- *   <ResizableHandle withHandle />
- *   <ResizablePanel defaultSize={70}>
- *     <main className="p-4">Main content area</main>
- *   </ResizablePanel>
- * </ResizablePanelGroup>
- * ```
- *
- * @example
- * ```tsx
- * // Persistent layout with auto-save
- * <ResizablePanelGroup
- *   direction="horizontal"
- *   autoSaveId="main-layout"
- *   onLayout={(sizes) => console.log('Layout changed:', sizes)}
- * >
- *   <ResizablePanel defaultSize={25} minSize={20} maxSize={40}>
- *     <nav>Sidebar (20-40%)</nav>
- *   </ResizablePanel>
- *   <ResizableHandle withHandle />
- *   <ResizablePanel defaultSize={75} minSize={60}>
- *     <main>Content area (min 60%)</main>
- *   </ResizablePanel>
- * </ResizablePanelGroup>
- * ```
- *
- * @example
- * ```tsx
- * // Custom keyboard resize increment
- * <ResizablePanelGroup
- *   direction="horizontal"
- *   keyboardResizeBy={5}
- *   dir="ltr"
- * >
- *   <ResizablePanel defaultSize={50} id="left-panel">
- *     <div>Panel content</div>
- *   </ResizablePanel>
- *   <ResizableHandle />
- *   <ResizablePanel defaultSize={50} id="right-panel">
- *     <div>Panel content</div>
- *   </ResizablePanel>
- * </ResizablePanelGroup>
- * ```
- *
- * @param direction - Layout direction: "horizontal" for side-by-side, "vertical" for top-to-bottom
- * @param autoSaveId - Unique identifier for automatically saving/restoring panel layouts
- * @param onLayout - Callback fired when panel sizes change, receives array of percentages
- * @param keyboardResizeBy - Increment in percentage points for keyboard-based resizing
- * @param storage - Custom storage implementation for layout persistence (defaults to localStorage)
- * @param dir - Text direction for RTL/LTR layout support
- * @param className - Additional CSS classes for custom styling
- * @param children - ResizablePanel and ResizableHandle components
- *
- * @accessibility
- * - Full keyboard navigation: Arrow keys resize panels when handles are focused
- * - Screen reader announcements for panel size changes and resize operations
- * - Respects prefers-reduced-motion to disable animations for motion-sensitive users
- * - Maintains logical focus order and proper tab navigation
- * - Provides ARIA labels and roles for assistive technology
- * - Keyboard shortcuts: Home/End keys jump to min/max sizes
- *
- * @see {@link https://react-resizable-panels.vercel.app/} Official react-resizable-panels documentation
- * @see {@link https://ui.shadcn.com/docs/components/resizable} Design patterns and examples
- * @see {@link ResizablePanel} Individual panel configuration options
- * @see {@link ResizableHandle} Handle customization and interaction options
- * @since 1.0.0
+ * Container for resizable panels. Manages layout orientation and panel resizing behavior.
+ * Supports both horizontal and vertical layouts with optional persistence via `id` prop.
  */
-declare function ResizablePanelGroup({ className, ...props }: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>): import("react/jsx-runtime").JSX.Element;
+declare function ResizablePanelGroup({ className, ...props }: ResizablePanelGroupProps): import("react/jsx-runtime").JSX.Element;
+type ResizablePanelProps = React.ComponentProps<typeof Panel>;
 /**
- * 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.
- *
- * @example
- * ```tsx
- * // Basic panel with default size
- * <ResizablePanel defaultSize={50}>
- *   <div className="p-4">Panel content</div>
- * </ResizablePanel>
- * ```
- *
- * @example
- * ```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
- * ```tsx
- * // Panel with conditional rendering support
- * <ResizablePanel
- *   id="dynamic-panel"
- *   order={1}
- *   defaultSize={40}
- *   collapsible
- *   collapsedSize={5}
- * >
- *   {isExpanded ? <FullContent /> : <CollapsedView />}
- * </ResizablePanel>
- * ```
- *
- * @example
- * ```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>
- *     </>
- *   );
- * }
- * ```
- *
- * @param id - Unique identifier for programmatic control and conditional rendering
- * @param order - Display order within group, important when panels are conditionally rendered
- * @param defaultSize - Initial size as percentage (0-100) when panel first mounts
- * @param minSize - Minimum size constraint as percentage (0-100)
- * @param maxSize - Maximum size constraint as percentage (0-100)
- * @param collapsible - Whether panel can collapse beyond minSize to collapsedSize
- * @param collapsedSize - Size when fully collapsed, must be between 0 and minSize
- * @param onCollapse - Callback fired when panel collapses to minimum size
- * @param onExpand - Callback fired when panel expands from collapsed state
- * @param onResize - Callback fired during resize with current and previous sizes
- * @param className - Additional CSS classes for custom styling
- * @param children - Panel content elements
- *
- * @accessibility
- * - Preserves focus within panel content during resize operations
- * - Maintains scroll position when panel dimensions change
- * - Announces significant size changes to screen readers
- * - Supports keyboard navigation when combined with ResizableHandle
- * - Respects reduced motion preferences for smooth resize animations
- *
- * @see {@link https://react-resizable-panels.vercel.app/} API documentation and examples
- * @see {@link ResizablePanelGroup} Container component for panel organization
- * @see {@link ResizableHandle} Interactive handles for resizing panels
- * @since 1.0.0
+ * Individual resizable panel within a ResizablePanelGroup.
+ * Supports size constraints (minSize, maxSize), default sizing, and collapse behavior.
  */
-declare function ResizablePanel({ ...props }: React.ComponentProps<typeof ResizablePrimitive.Panel>): import("react/jsx-runtime").JSX.Element;
+declare function ResizablePanel({ ...props }: ResizablePanelProps): import("react/jsx-runtime").JSX.Element;
+type ResizableHandleProps = React.ComponentProps<typeof PanelResizeHandle> & {
+    /** Display a visible grip indicator on the resize handle. @default false */
+    withHandle?: boolean;
+};
 /**
- * Interactive handle for resizing panels with full keyboard and pointer support
- *
- * ResizableHandle provides the draggable area between panels that allows users to
- * resize them via mouse, touch, or keyboard interaction. Supports optional visual
- * grip indicators, custom hit areas, and comprehensive event callbacks for advanced
- * interaction patterns. Automatically adapts styling based on panel group direction.
- *
- * @example
- * ```tsx
- * // Basic invisible handle (common for clean designs)
- * <ResizableHandle />
- * ```
- *
- * @example
- * ```tsx
- * // Handle with visual grip indicator
- * <ResizableHandle withHandle />
- * ```
- *
- * @example
- * ```tsx
- * // Custom styled handle with interaction callbacks
- * <ResizableHandle
- *   withHandle
- *   className="bg-blue-200 hover:bg-blue-300 transition-colors"
- *   onDragging={(isDragging) => {
- *     console.log(isDragging ? 'Started dragging' : 'Stopped dragging');
- *   }}
- *   hitAreaMargins={{ coarse: 20, fine: 10 }}
- * />
- * ```
- *
- * @example
- * ```tsx
- * // Disabled handle for non-interactive layouts
- * <ResizableHandle
- *   disabled
- *   className="opacity-50 cursor-not-allowed"
- * />
- * ```
- *
- * @example
- * ```tsx
- * // Custom handle with event handling
- * <ResizableHandle
- *   id="main-handle"
- *   onFocus={() => console.log('Handle focused')}
- *   onBlur={() => console.log('Handle blurred')}
- *   onClick={() => console.log('Handle clicked')}
- *   tabIndex={0}
- * >
- *   <CustomGripIcon />
- * </ResizableHandle>
- * ```
- *
- * @param withHandle - Whether to display built-in visual grip indicator
- * @param id - Unique identifier for the resize handle
- * @param disabled - Whether handle is disabled and non-interactive
- * @param hitAreaMargins - Custom hit area margins for easier grabbing (coarse: touch devices, fine: mouse)
- * @param onDragging - Callback fired when drag state changes with boolean indicating if currently dragging
- * @param onFocus - Callback fired when handle receives keyboard focus
- * @param onBlur - Callback fired when handle loses keyboard focus
- * @param onClick - Callback fired when handle is clicked
- * @param onPointerDown - Callback fired when pointer/touch starts on handle
- * @param onPointerUp - Callback fired when pointer/touch ends on handle
- * @param tabIndex - Tab order for keyboard navigation (0 makes it focusable)
- * @param className - Additional CSS classes for custom styling
- * @param children - Custom handle content (overrides withHandle prop)
- *
- * @accessibility
- * - Full keyboard support: Arrow keys resize panels when handle is focused
- * - Proper ARIA roles and labels for screen readers
- * - High contrast focus indicators that meet WCAG AAA requirements
- * - Touch-friendly hit area with minimum 44x44px interactive zone
- * - Announces resize actions and panel sizes to assistive technology
- * - Supports reduced motion preferences for drag animations
- * - Maintains logical tab order within panel layouts
- *
- * @see {@link https://react-resizable-panels.vercel.app/} Interactive demos and API reference
- * @see {@link https://ui.shadcn.com/docs/components/resizable} Design patterns and styling examples
- * @see {@link ResizablePanelGroup} Container component for handle placement
- * @see {@link ResizablePanel} Panels that handles resize between
- * @since 1.0.0
+ * Resize handle between panels. Appears as a thin line with optional visible grip indicator.
+ * Supports keyboard navigation and focus states.
  */
-declare function ResizableHandle({ withHandle, className, ...props }: {
-    withHandle?: boolean;
-} & React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle>): import("react/jsx-runtime").JSX.Element;
-export { ResizablePanelGroup, ResizablePanel, ResizableHandle };
+declare function ResizableHandle({ withHandle, className, ...props }: ResizableHandleProps): import("react/jsx-runtime").JSX.Element;
+export { ResizablePanelGroup, ResizablePanel, ResizableHandle, type ResizablePanelGroupProps, type ResizablePanelProps, type ResizableHandleProps, };
 //# sourceMappingURL=resizable.d.ts.map

package/dist/components/ui/resizable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"resizable.d.ts","sourceRoot":"","sources":["../../../src/components/ui/resizable.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,kBAAkB,MAAM,wBAAwB,CAAC;AAkH7D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8FG;AACH,iBAAS,mBAAmB,CAAC,EAC3B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,kBAAkB,CAAC,UAAU,CAAC,2CAW5D;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0FG;AACH,iBAAS,cAAc,CAAC,EACtB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,kBAAkB,CAAC,KAAK,CAAC,2CAEvD;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoFG;AACH,iBAAS,eAAe,CAAC,EACvB,UAAU,EACV,SAAS,EACT,GAAG,KAAK,EACT,EAAE;IAAE,UAAU,CAAC,EAAE,OAAO,CAAA;CAAE,GAAG,KAAK,CAAC,cAAc,CAChD,OAAO,kBAAkB,CAAC,iBAAiB,CAC5C,2CAiBA;AAED,OAAO,EAAE,mBAAmB,EAAE,cAAc,EAAE,eAAe,EAAE,CAAC"}
+{"version":3,"file":"resizable.d.ts","sourceRoot":"","sources":["../../../src/components/ui/resizable.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EACL,KAAK,IAAI,UAAU,EACnB,KAAK,EACL,SAAS,IAAI,iBAAiB,EAC/B,MAAM,wBAAwB,CAAC;AAIhC,KAAK,wBAAwB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,UAAU,CAAC,CAAC;AAExE;;;GAGG;AACH,iBAAS,mBAAmB,CAAC,EAC3B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,wBAAwB,2CAW1B;AAED,KAAK,mBAAmB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,KAAK,CAAC,CAAC;AAE9D;;;GAGG;AACH,iBAAS,cAAc,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,mBAAmB,2CAExD;AAED,KAAK,oBAAoB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,iBAAiB,CAAC,GAAG;IAC3E,4EAA4E;IAC5E,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF;;;GAGG;AACH,iBAAS,eAAe,CAAC,EACvB,UAAU,EACV,SAAS,EACT,GAAG,KAAK,EACT,EAAE,oBAAoB,2CAetB;AAED,OAAO,EACL,mBAAmB,EACnB,cAAc,EACd,eAAe,EACf,KAAK,wBAAwB,EAC7B,KAAK,mBAAmB,EACxB,KAAK,oBAAoB,GAC1B,CAAC"}

package/dist/components/ui/resizable.js

@@ -0,0 +1,48 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import "react";
+import { Group as Tt, Panel as $t, Separator as Ht } from "../../node_modules/react-resizable-panels/dist/react-resizable-panels.js";
+import { cn } from "../../lib/utils.js";
+function ResizablePanelGroup({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Tt,
+    {
+      "data-slot": "resizable-panel-group",
+      className: cn(
+        "flex h-full w-full aria-[orientation=vertical]:flex-col",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function ResizablePanel({ ...props }) {
+  return /* @__PURE__ */ jsx($t, { "data-slot": "resizable-panel", ...props });
+}
+function ResizableHandle({
+  withHandle,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Ht,
+    {
+      "data-slot": "resizable-handle",
+      className: cn(
+        "bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden aria-[orientation=horizontal]:h-px aria-[orientation=horizontal]:w-full aria-[orientation=horizontal]:after:left-0 aria-[orientation=horizontal]:after:h-1 aria-[orientation=horizontal]:after:w-full aria-[orientation=horizontal]:after:translate-x-0 aria-[orientation=horizontal]:after:-translate-y-1/2 [&[aria-orientation=horizontal]>div]:rotate-90",
+        className
+      ),
+      ...props,
+      children: withHandle && /* @__PURE__ */ jsx("div", { className: "bg-border h-6 w-1 rounded-lg z-10 flex shrink-0" })
+    }
+  );
+}
+export {
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup
+};
+//# sourceMappingURL=resizable.js.map

package/dist/components/ui/resizable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"resizable.js","sources":["../../../src/components/ui/resizable.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport {\n  Group as PanelGroup,\n  Panel,\n  Separator as PanelResizeHandle,\n} from \"react-resizable-panels\";\n\nimport { cn } from \"@/lib/utils\";\n\ntype ResizablePanelGroupProps = React.ComponentProps<typeof PanelGroup>;\n\n/**\n * Container for resizable panels. Manages layout orientation and panel resizing behavior.\n * Supports both horizontal and vertical layouts with optional persistence via `id` prop.\n */\nfunction ResizablePanelGroup({\n  className,\n  ...props\n}: ResizablePanelGroupProps) {\n  return (\n    <PanelGroup\n      data-slot=\"resizable-panel-group\"\n      className={cn(\n        \"flex h-full w-full aria-[orientation=vertical]:flex-col\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\ntype ResizablePanelProps = React.ComponentProps<typeof Panel>;\n\n/**\n * Individual resizable panel within a ResizablePanelGroup.\n * Supports size constraints (minSize, maxSize), default sizing, and collapse behavior.\n */\nfunction ResizablePanel({ ...props }: ResizablePanelProps) {\n  return <Panel data-slot=\"resizable-panel\" {...props} />;\n}\n\ntype ResizableHandleProps = React.ComponentProps<typeof PanelResizeHandle> & {\n  /** Display a visible grip indicator on the resize handle. @default false */\n  withHandle?: boolean;\n};\n\n/**\n * Resize handle between panels. Appears as a thin line with optional visible grip indicator.\n * Supports keyboard navigation and focus states.\n */\nfunction ResizableHandle({\n  withHandle,\n  className,\n  ...props\n}: ResizableHandleProps) {\n  return (\n    <PanelResizeHandle\n      data-slot=\"resizable-handle\"\n      className={cn(\n        \"bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden aria-[orientation=horizontal]:h-px aria-[orientation=horizontal]:w-full aria-[orientation=horizontal]:after:left-0 aria-[orientation=horizontal]:after:h-1 aria-[orientation=horizontal]:after:w-full aria-[orientation=horizontal]:after:translate-x-0 aria-[orientation=horizontal]:after:-translate-y-1/2 [&[aria-orientation=horizontal]>div]:rotate-90\",\n        className,\n      )}\n      {...props}\n    >\n      {withHandle && (\n        <div className=\"bg-border h-6 w-1 rounded-lg z-10 flex shrink-0\" />\n      )}\n    </PanelResizeHandle>\n  );\n}\n\nexport {\n  ResizablePanelGroup,\n  ResizablePanel,\n  ResizableHandle,\n  type ResizablePanelGroupProps,\n  type ResizablePanelProps,\n  type ResizableHandleProps,\n};\n"],"names":["PanelGroup","PanelResizeHandle"],"mappings":";;;;;AAiBA;AAA6B;AAC3B;AAEF;AACE;AACE;AAACA;AAAA;AACW;AACC;AACT;AACA;AAAA;AAEE;AAAA;AAGV;AAQA;AACE;AACF;AAWA;AAAyB;AACvB;AACA;AAEF;AACE;AACE;AAACC;AAAA;AACW;AACC;AACT;AACA;AAAA;AAEE;AAG+D;AAAA;AAIzE;;;;;;"}

package/dist/components/ui/scroll-area.d.ts

@@ -1,241 +1,64 @@
-import * as React from "react";
-import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
+import { ScrollArea as ScrollAreaPrimitive } from '@base-ui/react/scroll-area';
 /**
- * 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.
- *
- * @example
- * ```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
- * ```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
- * ```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
- * ```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>
- *   );
- * }
- * ```
- *
- * @accessibility
- * - Maintains native keyboard scrolling (Arrow keys, Page Up/Down, Home/End)
- * - Preserves focus management and tab order within scrollable content
- * - Screen readers can navigate content naturally using standard commands
- * - Supports touch gestures and momentum scrolling on mobile devices
- * - Scrollbars automatically receive appropriate ARIA attributes
- * - Respects user preferences for reduced motion
- *
- * @see {@link ScrollBar} Companion scrollbar component for explicit horizontal scrolling
- * @see {@link https://www.radix-ui.com/primitives/docs/components/scroll-area} Radix UI ScrollArea Primitive
- * @see {@link https://ui.shadcn.com/docs/components/scroll-area} shadcn/ui ScrollArea Documentation
- * @since 1.0.0
+ * Props for the ScrollArea component
+ * @property {string} className - Additional CSS classes to apply
+ * @property {React.ReactNode} children - Content to be rendered within the scrollable area
  */
-declare const ScrollArea: React.ForwardRefExoticComponent<Omit<ScrollAreaPrimitive.ScrollAreaProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<never>>;
+export type ScrollAreaProps = ScrollAreaPrimitive.Root.Props;
 /**
- * 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.
- *
- * @example
- * ```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>
- * ```
+ * ScrollArea component that provides a customizable scrollable container with styled scrollbars.
+ * Built on Base UI's ScrollArea primitive with automatic overflow detection and custom scrollbar styling.
  *
+ * @component
  * @example
  * ```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 className="h-72 w-48 rounded-md border p-4">
+ *   <div>Long content that needs scrolling...</div>
  * </ScrollArea>
  * ```
  *
  * @example
  * ```tsx
- * // Force-mounted scrollbar that always shows
- * <ScrollArea className="h-48 w-full">
- *   <div className="p-4">
- *     Content that may or may not overflow
+ * // With horizontal scrolling
+ * <ScrollArea className="w-96 whitespace-nowrap rounded-md border">
+ *   <div className="flex gap-4 p-4">
+ *     <div>Item 1</div>
+ *     <div>Item 2</div>
+ *     <div>Item 3</div>
  *   </div>
- *   <ScrollBar orientation="horizontal" forceMount />
  * </ScrollArea>
  * ```
  *
- * @accessibility
- * - Scrollbar thumb responds to keyboard interactions when focused
- * - Supports drag operations for precise scrolling control
- * - Automatically receives appropriate ARIA attributes for orientation
- * - Visual feedback during hover and active states
- * - Respects user preferences for scrollbar width and behavior
- *
- * @see {@link ScrollArea} Main scrollable container component
- * @since 1.0.0
+ * @param {ScrollAreaProps} props - Component props extending Base UI ScrollArea.Root.Props
+ * @returns {React.ReactElement} A styled scrollable container with custom scrollbars
  */
-declare const ScrollBar: React.ForwardRefExoticComponent<Omit<ScrollAreaPrimitive.ScrollAreaScrollbarProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<never>>;
+declare function ScrollArea({ className, children, ...props }: ScrollAreaProps): import("react/jsx-runtime").JSX.Element;
 /**
- * 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.
- *
- * @example
- * ```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>
- *   );
- * };
- * ```
- *
- * @see {@link ScrollArea} Main scrollable container component
- * @since 1.0.0
+ * Props for the ScrollBar component
+ * @property {string} className - Additional CSS classes to apply
+ * @property {"vertical" | "horizontal"} orientation - Scrollbar orientation (default: "vertical")
  */
-declare const ScrollAreaViewport: React.ForwardRefExoticComponent<Omit<ScrollAreaPrimitive.ScrollAreaViewportProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<never>>;
+export type ScrollBarProps = ScrollAreaPrimitive.Scrollbar.Props;
 /**
- * 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.
+ * ScrollBar component that renders a custom-styled scrollbar for the ScrollArea.
+ * Automatically positions itself based on orientation and includes a draggable thumb.
+ * Typically used internally by ScrollArea but can be used independently for custom layouts.
  *
+ * @component
  * @example
  * ```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>
- * );
- * ```
- *
- * @see {@link ScrollBar} Parent scrollbar component
- * @since 1.0.0
- */
-declare const ScrollAreaThumb: React.ForwardRefExoticComponent<Omit<ScrollAreaPrimitive.ScrollAreaThumbProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<never>>;
-/**
- * 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.
- *
- * @example
- * ```tsx
- * // Custom corner styling
- * <ScrollArea className="h-64 w-64">
- *   <div className="w-96 h-96 p-4">
- *     Content that overflows both axes
- *   </div>
+ * // Custom ScrollArea with horizontal scrollbar only
+ * <ScrollAreaPrimitive.Root>
+ *   <ScrollAreaPrimitive.Viewport>
+ *     {children}
+ *   </ScrollAreaPrimitive.Viewport>
  *   <ScrollBar orientation="horizontal" />
- *   <ScrollAreaCorner className="bg-gray-100" />
- * </ScrollArea>
+ * </ScrollAreaPrimitive.Root>
  * ```
  *
- * @see {@link ScrollArea} Main scrollable container component
- * @since 1.0.0
+ * @param {ScrollBarProps} props - Component props extending Base UI ScrollArea.Scrollbar.Props
+ * @returns {React.ReactElement} A styled scrollbar with draggable thumb
  */
-declare const ScrollAreaCorner: React.ForwardRefExoticComponent<Omit<ScrollAreaPrimitive.ScrollAreaCornerProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<never>>;
-export { ScrollArea, ScrollBar, ScrollAreaViewport, ScrollAreaThumb, ScrollAreaCorner, };
+declare function ScrollBar({ className, orientation, ...props }: ScrollBarProps): import("react/jsx-runtime").JSX.Element;
+export { ScrollArea, ScrollBar };
 //# sourceMappingURL=scroll-area.d.ts.map

package/dist/components/ui/scroll-area.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"scroll-area.d.ts","sourceRoot":"","sources":["../../../src/components/ui/scroll-area.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,mBAAmB,MAAM,6BAA6B,CAAC;AAgFnE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6FG;AACH,QAAA,MAAM,UAAU,gKAmCf,CAAC;AAGF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2DG;AACH,QAAA,MAAM,SAAS,yKAmCd,CAAC;AAGF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AACH,QAAA,MAAM,kBAAkB,wKAgBtB,CAAC;AAGH;;;;;;;;;;;;;;;;;;;GAmBG;AACH,QAAA,MAAM,eAAe,qKAWnB,CAAC;AAGH;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,QAAA,MAAM,gBAAgB,sKAWpB,CAAC;AAGH,OAAO,EACL,UAAU,EACV,SAAS,EACT,kBAAkB,EAClB,eAAe,EACf,gBAAgB,GACjB,CAAC"}
+{"version":3,"file":"scroll-area.d.ts","sourceRoot":"","sources":["../../../src/components/ui/scroll-area.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,IAAI,mBAAmB,EAAE,MAAM,4BAA4B,CAAC;AAI/E;;;;GAIG;AACH,MAAM,MAAM,eAAe,GAAG,mBAAmB,CAAC,IAAI,CAAC,KAAK,CAAC;AAE7D;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,eAAe,2CAiBrE;AAED;;;;GAIG;AACH,MAAM,MAAM,cAAc,GAAG,mBAAmB,CAAC,SAAS,CAAC,KAAK,CAAC;AAEjE;;;;;;;;;;;;;;;;;;;GAmBG;AACH,iBAAS,SAAS,CAAC,EACjB,SAAS,EACT,WAAwB,EACxB,GAAG,KAAK,EACT,EAAE,cAAc,2CAkBhB;AAED,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,CAAC"}