@neynar/ui 0.1.1

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

@@ -0,0 +1,178 @@
+import * as React from "react";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+/**
+ * Popover displays rich content in a portal, triggered by a button
+ *
+ * A versatile floating panel component built on Radix UI primitives that displays
+ * interactive content without navigating away from the current context. Unlike tooltips,
+ * popovers support complex layouts, forms, and user interactions while maintaining
+ * proper focus management and accessibility standards.
+ *
+ * @example
+ * ```tsx
+ * // Basic popover with information
+ * <Popover>
+ *   <PopoverTrigger asChild>
+ *     <Button variant="outline">Open popover</Button>
+ *   </PopoverTrigger>
+ *   <PopoverContent>
+ *     <div className="grid gap-4">
+ *       <h4 className="font-medium leading-none">Dimensions</h4>
+ *       <p className="text-sm text-muted-foreground">
+ *         Set the dimensions for the layer.
+ *       </p>
+ *     </div>
+ *   </PopoverContent>
+ * </Popover>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Controlled popover with form interactions
+ * const [open, setOpen] = useState(false);
+ *
+ * <Popover open={open} onOpenChange={setOpen}>
+ *   <PopoverTrigger asChild>
+ *     <Button>Settings</Button>
+ *   </PopoverTrigger>
+ *   <PopoverContent className="w-80">
+ *     <div className="grid gap-4">
+ *       <div className="space-y-2">
+ *         <h4 className="font-medium leading-none">Settings</h4>
+ *         <p className="text-sm text-muted-foreground">
+ *           Configure your preferences
+ *         </p>
+ *       </div>
+ *       <div className="grid gap-2">
+ *         <Label htmlFor="width">Width</Label>
+ *         <Input id="width" defaultValue="100%" />
+ *       </div>
+ *     </div>
+ *   </PopoverContent>
+ * </Popover>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Positioned popover with custom alignment
+ * <Popover>
+ *   <PopoverTrigger asChild>
+ *     <Button variant="ghost" size="icon">
+ *       <HelpCircle className="h-4 w-4" />
+ *     </Button>
+ *   </PopoverTrigger>
+ *   <PopoverContent side="top" align="start" className="w-80">
+ *     <div className="space-y-2">
+ *       <h4 className="font-medium">Help Information</h4>
+ *       <p className="text-sm text-muted-foreground">
+ *         Additional context and helpful tips for this feature.
+ *       </p>
+ *     </div>
+ *   </PopoverContent>
+ * </Popover>
+ * ```
+ *
+ * @accessibility
+ * - **Keyboard Navigation**: Tab to focus, Enter/Space to open, Escape to close
+ * - **Focus Management**: Focus trapped within popover when open, returns to trigger on close
+ * - **Screen Reader Support**: Proper ARIA attributes and announcements
+ * - **Auto-positioning**: Automatically repositions to stay within viewport bounds
+ * - **Dismissible**: Closes on outside click or focus loss
+ *
+ * @see {@link https://ui.shadcn.com/docs/components/popover} shadcn/ui Popover
+ * @see {@link https://www.radix-ui.com/primitives/docs/components/popover} Radix Popover Primitive
+ * @since 1.0.0
+ */
+/**
+ * Root popover component that manages open/closed state
+ *
+ * @param open - Controls the open state of the popover
+ * @param onOpenChange - Event handler called when the open state changes
+ * @param defaultOpen - The initial open state for uncontrolled usage
+ * @param modal - Whether the popover should be modal (default: false)
+ */
+declare function Popover({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+/**
+ * PopoverTrigger - The element that triggers the popover
+ *
+ * @param asChild - Changes the default rendered element to the one passed as a child,
+ *                  merging their props and behavior. Recommended for custom triggers.
+ *
+ * @example
+ * ```tsx
+ * // Using asChild with custom button
+ * <PopoverTrigger asChild>
+ *   <Button variant="outline">Open Settings</Button>
+ * </PopoverTrigger>
+ *
+ * // Direct usage (renders as button)
+ * <PopoverTrigger className="custom-trigger">
+ *   Click me
+ * </PopoverTrigger>
+ * ```
+ *
+ * @since 1.0.0
+ */
+declare function PopoverTrigger({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
+/**
+ * PopoverContent - The content container for the popover
+ *
+ * @param side - The preferred side of the trigger to render against ("top" | "right" | "bottom" | "left")
+ * @param align - How to align the popover relative to the trigger ("start" | "center" | "end")
+ * @param sideOffset - Distance in pixels from the trigger (default: 4)
+ * @param alignOffset - Offset in pixels along the align axis
+ * @param avoidCollisions - Whether to automatically avoid collisions with viewport edges (default: true)
+ * @param collisionBoundary - Boundary element(s) to consider for collision detection
+ * @param sticky - Whether to stick to the boundary edges when colliding ("partial" | "always")
+ *
+ * @example
+ * ```tsx
+ * // Basic content with default positioning
+ * <PopoverContent>
+ *   <div className="grid gap-4">
+ *     <h4 className="font-medium">Title</h4>
+ *     <p className="text-sm text-muted-foreground">Description</p>
+ *   </div>
+ * </PopoverContent>
+ *
+ * // Positioned content with custom width
+ * <PopoverContent side="top" align="start" className="w-80">
+ *   <form className="grid gap-4">
+ *     <Input placeholder="Enter value" />
+ *     <Button type="submit">Save</Button>
+ *   </form>
+ * </PopoverContent>
+ * ```
+ *
+ * @since 1.0.0
+ */
+declare function PopoverContent({ className, align, sideOffset, ...props }: React.ComponentProps<typeof PopoverPrimitive.Content>): import("react/jsx-runtime").JSX.Element;
+/**
+ * PopoverAnchor - Optional anchor element for custom positioning
+ *
+ * Use PopoverAnchor when you need the popover to position relative to an element
+ * other than the trigger. This is useful for complex layouts where the visual
+ * trigger and positioning reference should be different elements.
+ *
+ * @example
+ * ```tsx
+ * <Popover>
+ *   <PopoverAnchor asChild>
+ *     <div className="relative">
+ *       <span>Reference element for positioning</span>
+ *     </div>
+ *   </PopoverAnchor>
+ *   <PopoverTrigger asChild>
+ *     <Button>Open (positioned relative to anchor)</Button>
+ *   </PopoverTrigger>
+ *   <PopoverContent>
+ *     <p>This popover positions relative to the anchor, not the trigger</p>
+ *   </PopoverContent>
+ * </Popover>
+ * ```
+ *
+ * @since 1.0.0
+ */
+declare function PopoverAnchor({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Anchor>): import("react/jsx-runtime").JSX.Element;
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };
+//# sourceMappingURL=popover.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"popover.d.ts","sourceRoot":"","sources":["../../../src/components/ui/popover.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,gBAAgB,MAAM,yBAAyB,CAAC;AAI5D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkFG;AACH;;;;;;;GAOG;AACH,iBAAS,OAAO,CAAC,EACf,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,IAAI,CAAC,2CAEpD;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,iBAAS,cAAc,CAAC,EACtB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,OAAO,CAAC,2CAEvD;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,iBAAS,cAAc,CAAC,EACtB,SAAS,EACT,KAAgB,EAChB,UAAc,EACd,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,OAAO,CAAC,2CAevD;AAED;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,iBAAS,aAAa,CAAC,EACrB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,MAAM,CAAC,2CAEtD;AAED,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,aAAa,EAAE,CAAC"}

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

@@ -0,0 +1,64 @@
+import * as React from "react";
+import * as ProgressPrimitive from "@radix-ui/react-progress";
+/**
+ * Progress component displays completion progress of tasks and operations
+ *
+ * A visual progress indicator built on Radix UI primitives that shows the
+ * completion state of tasks, file uploads, multi-step processes, and other
+ * operations requiring user feedback about progress status.
+ *
+ * @example Basic usage
+ * ```tsx
+ * <Progress value={60} />
+ * ```
+ *
+ * @example With label and percentage
+ * ```tsx
+ * <div className="space-y-2">
+ *   <div className="flex justify-between text-sm">
+ *     <span>Loading data...</span>
+ *     <span>{progress}%</span>
+ *   </div>
+ *   <Progress value={progress} />
+ * </div>
+ * ```
+ *
+ * @example File upload progress
+ * ```tsx
+ * <div className="space-y-2">
+ *   <Progress value={uploadProgress} />
+ *   <p className="text-sm text-muted-foreground">
+ *     {uploadProgress}% of 2.4 MB uploaded
+ *   </p>
+ * </div>
+ * ```
+ *
+ * @example Custom height and colors
+ * ```tsx
+ * <Progress
+ *   value={85}
+ *   className="h-4 [&>div]:bg-green-500"
+ * />
+ * ```
+ *
+ * @example Multi-step process
+ * ```tsx
+ * const stepProgress = (currentStep / totalSteps) * 100;
+ * <Progress value={stepProgress} />
+ * ```
+ *
+ * @param value - Progress value from 0 to 100. Undefined shows no progress.
+ * @param className - Additional CSS classes for styling customization
+ *
+ * @accessibility
+ * - Built on Radix UI Progress primitive with proper ARIA attributes
+ * - Announces progress changes to screen readers
+ * - Supports custom aria-label and aria-valuetext for enhanced descriptions
+ * - Smooth visual transitions provide clear feedback
+ *
+ * @see {@link https://ui.shadcn.com/docs/components/progress} for design patterns
+ * @since 1.0.0
+ */
+declare function Progress({ className, value, ...props }: React.ComponentProps<typeof ProgressPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+export { Progress };
+//# sourceMappingURL=progress.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"progress.d.ts","sourceRoot":"","sources":["../../../src/components/ui/progress.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,iBAAiB,MAAM,0BAA0B,CAAC;AAI9D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0DG;AACH,iBAAS,QAAQ,CAAC,EAChB,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,iBAAiB,CAAC,IAAI,CAAC,2CAiBrD;AAED,OAAO,EAAE,QAAQ,EAAE,CAAC"}

package/dist/components/ui/radio-group.d.ts

@@ -0,0 +1,144 @@
+import * as React from "react";
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
+/**
+ * A radio group component for single selection from multiple options
+ *
+ * RadioGroup allows users to select exactly one option from a set of mutually exclusive choices.
+ * Built on Radix UI primitives with custom styling that follows shadcn/ui design patterns.
+ * Each radio group should contain RadioGroupItem components paired with Labels for accessibility.
+ *
+ * @example Basic usage
+ * ```tsx
+ * <RadioGroup defaultValue="option-one">
+ *   <div className="flex items-center space-x-2">
+ *     <RadioGroupItem value="option-one" id="option-one" />
+ *     <Label htmlFor="option-one">Option One</Label>
+ *   </div>
+ *   <div className="flex items-center space-x-2">
+ *     <RadioGroupItem value="option-two" id="option-two" />
+ *     <Label htmlFor="option-two">Option Two</Label>
+ *   </div>
+ * </RadioGroup>
+ * ```
+ *
+ * @example Controlled radio group
+ * ```tsx
+ * function SizeSelector() {
+ *   const [size, setSize] = useState("medium");
+ *
+ *   return (
+ *     <RadioGroup value={size} onValueChange={setSize}>
+ *       <div className="flex items-center space-x-2">
+ *         <RadioGroupItem value="small" id="size-small" />
+ *         <Label htmlFor="size-small">Small</Label>
+ *       </div>
+ *       <div className="flex items-center space-x-2">
+ *         <RadioGroupItem value="medium" id="size-medium" />
+ *         <Label htmlFor="size-medium">Medium</Label>
+ *       </div>
+ *       <div className="flex items-center space-x-2">
+ *         <RadioGroupItem value="large" id="size-large" />
+ *         <Label htmlFor="size-large">Large</Label>
+ *       </div>
+ *     </RadioGroup>
+ *   );
+ * }
+ * ```
+ *
+ * @example Horizontal layout
+ * ```tsx
+ * <RadioGroup defaultValue="option-one" className="flex gap-4">
+ *   <div className="flex items-center space-x-2">
+ *     <RadioGroupItem value="option-one" id="r1" />
+ *     <Label htmlFor="r1">Option One</Label>
+ *   </div>
+ *   <div className="flex items-center space-x-2">
+ *     <RadioGroupItem value="option-two" id="r2" />
+ *     <Label htmlFor="r2">Option Two</Label>
+ *   </div>
+ * </RadioGroup>
+ * ```
+ *
+ * @example With descriptions
+ * ```tsx
+ * <RadioGroup defaultValue="card">
+ *   <div className="flex items-start space-x-2">
+ *     <RadioGroupItem value="card" id="card" className="mt-1" />
+ *     <div className="grid gap-1">
+ *       <Label htmlFor="card">Credit Card</Label>
+ *       <p className="text-sm text-muted-foreground">
+ *         Pay with your credit or debit card
+ *       </p>
+ *     </div>
+ *   </div>
+ * </RadioGroup>
+ * ```
+ *
+ * @param defaultValue - The default selected value when uncontrolled
+ * @param value - The controlled value of the radio group
+ * @param onValueChange - Callback fired when the value changes
+ * @param disabled - Whether the entire radio group is disabled
+ * @param required - Whether the radio group is required for form validation
+ * @param orientation - The orientation of the radio group (defaults to vertical)
+ * @param className - Additional CSS classes to apply to the radio group
+ * @param children - RadioGroupItem components and their associated labels
+ *
+ * @see {@link https://ui.shadcn.com/docs/components/radio-group} for design patterns
+ * @since 1.0.0
+ * @see {@link RadioGroupItem} for individual radio options
+ * @see {@link Checkbox} for multiple selection use cases
+ * @see {@link Select} for dropdown-style single selection
+ */
+declare function RadioGroup({ className, ...props }: React.ComponentProps<typeof RadioGroupPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+/**
+ * Individual radio button item for use within RadioGroup
+ *
+ * RadioGroupItem represents a single selectable option in a radio group.
+ * Must be used within a RadioGroup component and paired with a Label for accessibility.
+ * The component automatically handles visual states including checked, unchecked, focused, and disabled.
+ *
+ * @example Basic usage
+ * ```tsx
+ * <RadioGroupItem value="option-one" id="option-one" />
+ * <Label htmlFor="option-one">Option One</Label>
+ * ```
+ *
+ * @example With custom styling
+ * ```tsx
+ * <RadioGroupItem
+ *   value="premium"
+ *   id="premium"
+ *   className="border-purple-500 text-purple-500"
+ * />
+ * <Label htmlFor="premium">Premium Plan</Label>
+ * ```
+ *
+ * @example Disabled state
+ * ```tsx
+ * <RadioGroupItem value="unavailable" id="unavailable" disabled />
+ * <Label htmlFor="unavailable" className="opacity-50">
+ *   Unavailable Option
+ * </Label>
+ * ```
+ *
+ * @param value - The unique value for this radio option
+ * @param id - The id attribute for accessibility (should match Label's htmlFor)
+ * @param disabled - Whether this specific radio option is disabled
+ * @param className - Additional CSS classes for custom styling
+ * @param ref - React ref forwarded to the underlying input element
+ *
+ * @accessibility
+ * - Automatically receives focus management from parent RadioGroup
+ * - Arrow keys navigate between radio options
+ * - Space key toggles selection
+ * - Screen readers announce checked/unchecked state
+ * - Focus visible indicator for keyboard navigation
+ * - Proper ARIA attributes and roles
+ *
+ * @see {@link RadioGroup} for the parent container component
+ * @see {@link https://ui.shadcn.com/docs/components/radio-group} for usage patterns
+ * @since 1.0.0
+ */
+declare function RadioGroupItem({ className, ...props }: React.ComponentProps<typeof RadioGroupPrimitive.Item>): import("react/jsx-runtime").JSX.Element;
+export { RadioGroup, RadioGroupItem };
+//# sourceMappingURL=radio-group.d.ts.map

package/dist/components/ui/radio-group.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio-group.d.ts","sourceRoot":"","sources":["../../../src/components/ui/radio-group.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,mBAAmB,MAAM,6BAA6B,CAAC;AAKnE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwFG;AACH,iBAAS,UAAU,CAAC,EAClB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,mBAAmB,CAAC,IAAI,CAAC,2CAQvD;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgDG;AACH,iBAAS,cAAc,CAAC,EACtB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,mBAAmB,CAAC,IAAI,CAAC,2CAkBvD;AAED,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,CAAC"}

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

@@ -0,0 +1,164 @@
+import * as React from "react";
+import * as ResizablePrimitive from "react-resizable-panels";
+/**
+ * Container for creating resizable panel groups with 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.
+ *
+ * @example
+ * ```tsx
+ * // Basic horizontal layout
+ * <ResizablePanelGroup direction="horizontal" className="h-full">
+ *   <ResizablePanel defaultSize={50}>
+ *     <div className="p-4">Left panel</div>
+ *   </ResizablePanel>
+ *   <ResizableHandle />
+ *   <ResizablePanel defaultSize={50}>
+ *     <div className="p-4">Right panel</div>
+ *   </ResizablePanel>
+ * </ResizablePanelGroup>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Vertical layout with handle
+ * <ResizablePanelGroup direction="vertical" className="min-h-[400px]">
+ *   <ResizablePanel defaultSize={30}>
+ *     <header>Header content</header>
+ *   </ResizablePanel>
+ *   <ResizableHandle withHandle />
+ *   <ResizablePanel defaultSize={70}>
+ *     <main>Main content</main>
+ *   </ResizablePanel>
+ * </ResizablePanelGroup>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Complex layout with size constraints
+ * <ResizablePanelGroup direction="horizontal">
+ *   <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>
+ *   </ResizablePanel>
+ * </ResizablePanelGroup>
+ * ```
+ *
+ * @param direction - Layout direction: "horizontal" or "vertical"
+ * @param className - Additional CSS classes
+ * @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
+ *
+ * @see {@link https://ui.shadcn.com/docs/components/resizable} for design patterns
+ * @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
+ *
+ * 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.
+ *
+ * @example
+ * ```tsx
+ * // Basic panel with default size
+ * <ResizablePanel defaultSize={50}>
+ *   <div className="p-4">Panel content</div>
+ * </ResizablePanel>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Panel with size constraints
+ * <ResizablePanel
+ *   defaultSize={30}
+ *   minSize={20}
+ *   maxSize={60}
+ *   collapsible
+ * >
+ *   <aside>Collapsible sidebar</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
+ *
+ * @accessibility
+ * - Maintains focus within panel during resize
+ * - Preserves scroll position when possible
+ * - Announces size changes to screen readers when significant
+ */
+declare function ResizablePanel({ ...props }: React.ComponentProps<typeof ResizablePrimitive.Panel>): import("react/jsx-runtime").JSX.Element;
+/**
+ * Draggable handle for resizing panels with optional visual indicator
+ *
+ * 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.
+ *
+ * @example
+ * ```tsx
+ * // Basic invisible handle
+ * <ResizableHandle />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Handle with visual grip indicator
+ * <ResizableHandle withHandle />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Custom styled handle
+ * <ResizableHandle
+ *   withHandle
+ *   className="bg-blue-200 hover:bg-blue-300"
+ * />
+ * ```
+ *
+ * @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
+ *
+ * @accessibility
+ * - Keyboard resizable using arrow keys when 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
+ *
+ * @see {@link https://ui.shadcn.com/docs/components/resizable} for usage examples
+ * @since 1.0.0
+ */
+declare function ResizableHandle({ withHandle, className, ...props }: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
+    /**
+     * Whether to show a visual grip handle
+     * @default false
+     */
+    withHandle?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+export { ResizablePanelGroup, ResizablePanel, ResizableHandle };
+//# sourceMappingURL=resizable.d.ts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,82 @@
+import * as React from "react";
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
+/**
+ * ScrollArea component provides cross-browser custom scrollbar 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.
+ *
+ * @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
+ * <ScrollArea className="h-96 w-80 rounded-md border">
+ *   <div className="w-[600px] p-4">
+ *     // Wide content with vertical overflow
+ *   </div>
+ *   <ScrollBar orientation="horizontal" />
+ * </ScrollArea>
+ * ```
+ *
+ * @param className - Additional CSS classes for styling
+ * @param children - Content to be rendered inside the scrollable area
+ *
+ * @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;
+/**
+ * ScrollBar component for custom scrollbar styling
+ *
+ * Companion component to ScrollArea that renders styled scrollbars with
+ * support for both vertical and horizontal orientations. Usually used
+ * when explicit horizontal scrolling is needed.
+ *
+ * @param className - Additional CSS classes for scrollbar styling
+ * @param orientation - Scrollbar orientation, defaults to "vertical"
+ *
+ * @example
+ * ```tsx
+ * // Horizontal scrollbar (vertical is automatic)
+ * <ScrollArea className="w-full">
+ *   <div className="flex gap-4 p-4">
+ *     // Wide content
+ *   </div>
+ *   <ScrollBar orientation="horizontal" />
+ * </ScrollArea>
+ * ```
+ */
+declare function ScrollBar({ className, orientation, ...props }: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>): import("react/jsx-runtime").JSX.Element;
+export { ScrollArea, ScrollBar };
+//# sourceMappingURL=scroll-area.d.ts.map

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

@@ -0,0 +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"}