@neynar/ui 0.1.1 → 0.1.2

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

@@ -1,76 +1,108 @@
 import * as React from "react";
 import * as ResizablePrimitive from "react-resizable-panels";
 /**
- * Container for creating resizable panel groups with keyboard accessibility
+ * Container for creating resizable panel groups with full keyboard accessibility
  *
- * ResizablePanelGroup provides a flexible container for organizing multiple resizable panels.
- * Panels can be resized by dragging handles between them, with full keyboard support.
- * Built on top of react-resizable-panels with enhanced styling and accessibility features.
+ * 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</div>
+ *     <div className="p-4">Left panel content</div>
  *   </ResizablePanel>
  *   <ResizableHandle />
  *   <ResizablePanel defaultSize={50}>
- *     <div className="p-4">Right panel</div>
+ *     <div className="p-4">Right panel content</div>
  *   </ResizablePanel>
  * </ResizablePanelGroup>
  * ```
  *
  * @example
  * ```tsx
- * // Vertical layout with handle
+ * // Vertical layout with visual handles
  * <ResizablePanelGroup direction="vertical" className="min-h-[400px]">
  *   <ResizablePanel defaultSize={30}>
- *     <header>Header content</header>
+ *     <header className="p-4">Header content</header>
  *   </ResizablePanel>
  *   <ResizableHandle withHandle />
  *   <ResizablePanel defaultSize={70}>
- *     <main>Main content</main>
+ *     <main className="p-4">Main content area</main>
  *   </ResizablePanel>
  * </ResizablePanelGroup>
  * ```
  *
  * @example
  * ```tsx
- * // Complex layout with size constraints
- * <ResizablePanelGroup direction="horizontal">
+ * // 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 (min 60%)</main>
+ *     <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" or "vertical"
- * @param className - Additional CSS classes
+ * @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 with arrow keys when handles are focused
- * - Screen reader support with proper ARIA labels
- * - Respects prefers-reduced-motion for users with motion sensitivity
- * - Maintains focus management during resize operations
+ * - 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://ui.shadcn.com/docs/components/resizable} for design patterns
+ * @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
- * @see {@link ResizablePanel} for individual panel configuration
- * @see {@link ResizableHandle} for handle customization options
  */
 declare function ResizablePanelGroup({ className, ...props }: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>): import("react/jsx-runtime").JSX.Element;
 /**
- * Individual resizable panel within a panel group
+ * Individual resizable panel within a panel group with size constraints and callbacks
  *
- * ResizablePanel represents a single section that can be resized within a ResizablePanelGroup.
- * Supports size constraints, default sizing, and programmatic control. Each panel automatically
- * handles overflow and maintains content accessibility during resize operations.
+ * 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
@@ -82,43 +114,91 @@ declare function ResizablePanelGroup({ className, ...props }: React.ComponentPro
  *
  * @example
  * ```tsx
- * // Panel with size constraints
+ * // 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>Collapsible sidebar</aside>
+ *   <aside className="p-4">Collapsible sidebar content</aside>
  * </ResizablePanel>
  * ```
  *
- * @param defaultSize - Initial size as percentage (0-100)
- * @param minSize - Minimum size as percentage
- * @param maxSize - Maximum size as percentage
- * @param collapsible - Whether panel can be collapsed to zero size
- * @param order - Display order within the group
- * @param id - Unique identifier for programmatic control
- * @param onCollapse - Callback when panel is collapsed
- * @param onExpand - Callback when panel is expanded
- * @param onResize - Callback when panel size changes
+ * @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
- * - Maintains focus within panel during resize
- * - Preserves scroll position when possible
- * - Announces size changes to screen readers when significant
+ * - 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
  */
 declare function ResizablePanel({ ...props }: React.ComponentProps<typeof ResizablePrimitive.Panel>): import("react/jsx-runtime").JSX.Element;
 /**
- * Draggable handle for resizing panels with optional visual indicator
+ * Interactive handle for resizing panels with full keyboard and pointer support
  *
- * ResizableHandle provides the interactive area between panels that allows users to
- * resize them via mouse, touch, or keyboard. The handle can display an optional
- * visual grip indicator for improved usability and accessibility.
+ * 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
+ * // Basic invisible handle (common for clean designs)
  * <ResizableHandle />
  * ```
  *
@@ -130,35 +210,71 @@ declare function ResizablePanel({ ...props }: React.ComponentProps<typeof Resiza
  *
  * @example
  * ```tsx
- * // Custom styled handle
+ * // Custom styled handle with interaction callbacks
  * <ResizableHandle
  *   withHandle
- *   className="bg-blue-200 hover:bg-blue-300"
+ *   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"
  * />
  * ```
  *
- * @param withHandle - Whether to display visual grip indicator
- * @param className - Additional CSS classes for styling
- * @param disabled - Whether the handle is disabled
- * @param hitAreaMargins - Margins around the hit area for easier interaction
- * @param onDragging - Callback during drag operations
+ * @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
- * - Keyboard resizable using arrow keys when focused
+ * - Full keyboard support: Arrow keys resize panels when handle is focused
  * - Proper ARIA roles and labels for screen readers
- * - Focus indicators that meet WCAG contrast requirements
- * - Touch-friendly hit area of at least 44x44px
- * - Announces resize actions and current sizes to assistive technology
+ * - 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://ui.shadcn.com/docs/components/resizable} for usage examples
+ * @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
  */
-declare function ResizableHandle({ withHandle, className, ...props }: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
-    /**
-     * Whether to show a visual grip handle
-     * @default false
-     */
+declare function ResizableHandle({ withHandle, className, ...props }: {
     withHandle?: boolean;
-}): import("react/jsx-runtime").JSX.Element;
+} & React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle>): import("react/jsx-runtime").JSX.Element;
 export { ResizablePanelGroup, ResizablePanel, ResizableHandle };
 //# 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;AAI7D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+DG;AACH,iBAAS,mBAAmB,CAAC,EAC3B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,kBAAkB,CAAC,UAAU,CAAC,2CAW5D;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0CG;AACH,iBAAS,cAAc,CAAC,EACtB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,kBAAkB,CAAC,KAAK,CAAC,2CAEvD;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2CG;AACH,iBAAS,eAAe,CAAC,EACvB,UAAU,EACV,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,kBAAkB,CAAC,iBAAiB,CAAC,GAAG;IACrE;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,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":"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"}

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

@@ -1,12 +1,16 @@
 import * as React from "react";
 import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
 /**
- * ScrollArea component provides cross-browser custom scrollbar styling
+ * 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.
+ * 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
@@ -39,44 +43,199 @@ import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
  *
  * @example
  * ```tsx
- * // Both scrollbars for large content
- * <ScrollArea className="h-96 w-80 rounded-md border">
+ * // 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">
- *     // Wide content with vertical overflow
+ *     <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>
  * ```
  *
- * @param className - Additional CSS classes for styling
- * @param children - Content to be rendered inside the scrollable area
+ * @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 https://ui.shadcn.com/docs/components/scroll-area} - shadcn/ui ScrollArea documentation
+ * @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
- * @see {@link ScrollBar} - Companion scrollbar component for horizontal scrolling
  */
-declare function ScrollArea({ className, children, ...props }: React.ComponentProps<typeof ScrollAreaPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+declare const ScrollArea: React.ForwardRefExoticComponent<Omit<ScrollAreaPrimitive.ScrollAreaProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 /**
- * ScrollBar component for custom scrollbar styling
+ * ScrollBar - Custom styled scrollbar for ScrollArea
  *
  * Companion component to ScrollArea that renders styled scrollbars with
- * support for both vertical and horizontal orientations. Usually used
- * when explicit horizontal scrolling is needed.
+ * support for both vertical and horizontal orientations. The vertical
+ * scrollbar is automatically included in ScrollArea, but horizontal
+ * scrollbars must be explicitly added when needed.
  *
- * @param className - Additional CSS classes for scrollbar styling
- * @param orientation - Scrollbar orientation, defaults to "vertical"
+ * The scrollbar automatically shows/hides based on content overflow and
+ * user interaction. Supports touch interactions and provides visual
+ * feedback during scroll operations.
  *
  * @example
  * ```tsx
- * // Horizontal scrollbar (vertical is automatic)
- * <ScrollArea className="w-full">
- *   <div className="flex gap-4 p-4">
- *     // Wide content
+ * // 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
+ * ```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
+ * ```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>
+ * ```
+ *
+ * @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
+ */
+declare const ScrollBar: React.ForwardRefExoticComponent<Omit<ScrollAreaPrimitive.ScrollAreaScrollbarProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+/**
+ * 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
+ */
+declare const ScrollAreaViewport: React.ForwardRefExoticComponent<Omit<ScrollAreaPrimitive.ScrollAreaViewportProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+/**
+ * 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.
+ *
+ * @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 & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+/**
+ * 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>
  *   <ScrollBar orientation="horizontal" />
+ *   <ScrollAreaCorner className="bg-gray-100" />
  * </ScrollArea>
  * ```
+ *
+ * @see {@link ScrollArea} Main scrollable container component
+ * @since 1.0.0
  */
-declare function ScrollBar({ className, orientation, ...props }: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>): import("react/jsx-runtime").JSX.Element;
-export { ScrollArea, ScrollBar };
+declare const ScrollAreaCorner: React.ForwardRefExoticComponent<Omit<ScrollAreaPrimitive.ScrollAreaCornerProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { ScrollArea, ScrollBar, ScrollAreaViewport, ScrollAreaThumb, ScrollAreaCorner, };
 //# 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;AAInE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsDG;AACH,iBAAS,UAAU,CAAC,EAClB,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,mBAAmB,CAAC,IAAI,CAAC,2CAiBvD;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,iBAAS,SAAS,CAAC,EACjB,SAAS,EACT,WAAwB,EACxB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,mBAAmB,CAAC,mBAAmB,CAAC,2CAqBtE;AAED,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,CAAC"}
+{"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,+JAmCf,CAAC;AAGF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2DG;AACH,QAAA,MAAM,SAAS,wKAmCd,CAAC;AAGF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AACH,QAAA,MAAM,kBAAkB,uKAgBtB,CAAC;AAGH;;;;;;;;;;;;;;;;;;;GAmBG;AACH,QAAA,MAAM,eAAe,oKAWnB,CAAC;AAGH;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,QAAA,MAAM,gBAAgB,qKAWpB,CAAC;AAGH,OAAO,EACL,UAAU,EACV,SAAS,EACT,kBAAkB,EAClB,eAAe,EACf,gBAAgB,GACjB,CAAC"}