@getgreenline/blaze-ui 1.0.2 → 1.0.3-3.0-beta

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

@@ -0,0 +1 @@
+{"version":3,"file":"resizable.d.ts","sourceRoot":"","sources":["../../src/components/resizable.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,KAAK,kBAAkB,MAAM,wBAAwB,CAAA;AAI5D,iBAAS,mBAAmB,CAAC,EAC3B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,kBAAkB,CAAC,UAAU,CAAC,2CAW5D;AAED,iBAAS,cAAc,CAAC,EACtB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,kBAAkB,CAAC,KAAK,CAAC,2CAEvD;AAED,iBAAS,eAAe,CAAC,EACvB,UAAU,EACV,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,kBAAkB,CAAC,iBAAiB,CAAC,GAAG;IACrE,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB,2CAiBA;AAED,OAAO,EAAE,mBAAmB,EAAE,cAAc,EAAE,eAAe,EAAE,CAAA"}

package/dist/components/resizable.js

@@ -0,0 +1,16 @@
+import { jsx } from 'react/jsx-runtime';
+import { GripVerticalIcon } from 'lucide-react';
+import * as ResizablePrimitive from 'react-resizable-panels';
+import { cn } from '../lib/utils.js';
+
+function ResizablePanelGroup({ className, ...props }) {
+    return (jsx(ResizablePrimitive.PanelGroup, { "data-slot": "resizable-panel-group", className: cn("tw:flex tw:h-full tw:w-full data-[panel-group-direction=vertical]:tw:flex-col", className), ...props }));
+}
+function ResizablePanel({ ...props }) {
+    return jsx(ResizablePrimitive.Panel, { "data-slot": "resizable-panel", ...props });
+}
+function ResizableHandle({ withHandle, className, ...props }) {
+    return (jsx(ResizablePrimitive.PanelResizeHandle, { "data-slot": "resizable-handle", className: cn("tw:bg-border focus-visible:tw:ring-ring tw:relative tw:flex tw:w-px tw:items-center tw:justify-center after:tw:absolute after:tw:inset-y-0 after:tw:left-1/2 after:tw:w-1 after:tw:-translate-x-1/2 focus-visible:tw:ring-1 focus-visible:tw:ring-offset-1 focus-visible:tw:outline-hidden data-[panel-group-direction=vertical]:tw:h-px data-[panel-group-direction=vertical]:tw:w-full data-[panel-group-direction=vertical]:after:tw:left-0 data-[panel-group-direction=vertical]:after:tw:h-1 data-[panel-group-direction=vertical]:after:tw:w-full data-[panel-group-direction=vertical]:after:tw:translate-x-0 data-[panel-group-direction=vertical]:after:tw:-translate-y-1/2 tw:[&[data-panel-group-direction=vertical]>div]:rotate-90", className), ...props, children: withHandle && (jsx("div", { className: "tw:bg-border tw:z-10 tw:flex tw:h-4 tw:w-3 tw:items-center tw:justify-center tw:rounded-xs tw:border", children: jsx(GripVerticalIcon, { className: "tw:size-2.5" }) })) }));
+}
+
+export { ResizableHandle, ResizablePanel, ResizablePanelGroup };

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

@@ -0,0 +1,6 @@
+import * as React from "react";
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
+declare function ScrollArea({ className, children, ...props }: React.ComponentProps<typeof ScrollAreaPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+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/scroll-area.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"scroll-area.d.ts","sourceRoot":"","sources":["../../src/components/scroll-area.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,mBAAmB,MAAM,6BAA6B,CAAA;AAIlE,iBAAS,UAAU,CAAC,EAClB,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,mBAAmB,CAAC,IAAI,CAAC,2CAiBvD;AAED,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,CAAA"}

package/dist/components/scroll-area.js

@@ -0,0 +1,14 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
+import { cn } from '../lib/utils.js';
+
+function ScrollArea({ className, children, ...props }) {
+    return (jsxs(ScrollAreaPrimitive.Root, { "data-slot": "scroll-area", className: cn("tw:relative", className), ...props, children: [jsx(ScrollAreaPrimitive.Viewport, { "data-slot": "scroll-area-viewport", className: "tw:focus-visible:ring-ring/50 tw:size-full tw:rounded-[inherit] tw:transition-[color,box-shadow] tw:outline-none tw:focus-visible:ring-[3px] tw:focus-visible:outline-1", children: children }), jsx(ScrollBar, {}), jsx(ScrollAreaPrimitive.Corner, {})] }));
+}
+function ScrollBar({ className, orientation = "vertical", ...props }) {
+    return (jsx(ScrollAreaPrimitive.ScrollAreaScrollbar, { "data-slot": "scroll-area-scrollbar", orientation: orientation, className: cn("tw:flex tw:touch-none tw:p-px tw:transition-colors tw:select-none", orientation === "vertical" &&
+            "tw:h-full tw:w-2.5 tw:border-l tw:border-l-transparent", orientation === "horizontal" &&
+            "tw:h-2.5 tw:flex-col tw:border-t tw:border-t-transparent", className), ...props, children: jsx(ScrollAreaPrimitive.ScrollAreaThumb, { "data-slot": "scroll-area-thumb", className: "tw:bg-border tw:relative tw:flex-1 tw:rounded-full" }) }));
+}
+
+export { ScrollArea, ScrollBar };

package/dist/components/search-bar.d.ts

@@ -0,0 +1,15 @@
+export interface SearchBarProps {
+    value: string;
+    onChange: (value: string) => void;
+    onSearch: (value: string) => void;
+    onClear: () => void;
+    placeholder?: string;
+    disabled?: boolean;
+    loading?: boolean;
+    applyLabel?: string;
+    clearLabel?: string;
+    className?: string;
+    inputAriaLabel?: string;
+}
+export declare function SearchBar({ value, onChange, onSearch, onClear, placeholder, disabled, loading, applyLabel, clearLabel, className, inputAriaLabel, }: SearchBarProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=search-bar.d.ts.map

package/dist/components/search-bar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"search-bar.d.ts","sourceRoot":"","sources":["../../src/components/search-bar.tsx"],"names":[],"mappings":"AAOA,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACjC,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACjC,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,cAAc,CAAC,EAAE,MAAM,CAAA;CACxB;AAED,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,WAAyB,EACzB,QAAgB,EAChB,OAAe,EACf,UAAoB,EACpB,UAAoB,EACpB,SAAS,EACT,cAA+B,GAChC,EAAE,cAAc,2CA4EhB"}

package/dist/components/search-bar.js

@@ -0,0 +1,25 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { SearchIcon, XIcon } from 'lucide-react';
+import { cn } from '../lib/utils.js';
+import { Input } from './input.js';
+import { Button } from './button.js';
+
+function SearchBar({ value, onChange, onSearch, onClear, placeholder = "Search...", disabled = false, loading = false, applyLabel = "Apply", clearLabel = "Clear", className, inputAriaLabel = "Search input", }) {
+    const handleKeyDown = (e) => {
+        if (e.key === "Enter") {
+            e.preventDefault();
+            onSearch(value);
+        }
+        else if (e.key === "Escape") {
+            e.preventDefault();
+            onClear();
+        }
+    };
+    const handleClearClick = () => {
+        onChange("");
+        onClear();
+    };
+    return (jsxs("div", { "data-slot": "search-bar", className: cn("tw:!flex tw:!w-full tw:!gap-2", className), children: [jsxs("div", { className: "tw:!relative tw:!flex-1", children: [jsx(SearchIcon, { className: "tw:!absolute tw:!left-3 tw:!top-1/2 tw:!-translate-y-1/2 tw:!h-4 tw:!w-4 tw:text-muted-foreground tw:!pointer-events-none", "aria-hidden": "true" }), jsx(Input, { type: "text", value: value, onChange: (e) => onChange(e.target.value), onKeyDown: handleKeyDown, placeholder: placeholder, disabled: disabled, className: "tw:!pl-9", "aria-label": inputAriaLabel }), value && !disabled && (jsx("button", { type: "button", onClick: handleClearClick, className: "tw:!absolute tw:!right-3 tw:!top-1/2 tw:!-translate-y-1/2 tw:!h-4 tw:!w-4 tw:text-muted-foreground hover:tw:text-foreground tw:transition-colors tw:!cursor-pointer", "aria-label": "Clear search", children: jsx(XIcon, { className: "tw:!h-4 tw:!w-4" }) }))] }), jsx(Button, { variant: "default", size: "sm", onClick: () => onSearch(value), disabled: disabled || !value, loading: loading, className: cn("tw:!min-w-[80px]", (disabled || !value) && "tw:!opacity-50 tw:!cursor-not-allowed"), "aria-label": "Apply search", children: applyLabel }), jsx(Button, { variant: "outline", size: "sm", onClick: handleClearClick, disabled: disabled || !value, className: cn("tw:!min-w-[80px]", (disabled || !value) && "tw:!opacity-50 tw:!cursor-not-allowed"), "aria-label": "Clear search", children: clearLabel })] }));
+}
+
+export { SearchBar };

package/dist/components/segmented-control.d.ts

@@ -0,0 +1,24 @@
+import { type VariantProps } from "class-variance-authority";
+declare const segmentedControlVariants: (props?: ({
+    variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link" | null | undefined;
+    size?: "default" | "sm" | "lg" | "icon" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare const segmentedControlItemVariants: (props?: ({
+    variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link" | null | undefined;
+    size?: "default" | "sm" | "lg" | "icon" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+interface SegmentedControlOption {
+    value: string;
+    label: string;
+}
+interface SegmentedControlProps extends VariantProps<typeof segmentedControlVariants> {
+    options: SegmentedControlOption[];
+    value: string;
+    onValueChange: (value: string) => void;
+    className?: string;
+    ariaLabel?: string;
+    ariaLabelledBy?: string;
+}
+export declare function SegmentedControl({ options, value, onValueChange, className, ariaLabel, ariaLabelledBy, variant, size, }: SegmentedControlProps): import("react/jsx-runtime").JSX.Element;
+export { segmentedControlItemVariants, segmentedControlVariants };
+//# sourceMappingURL=segmented-control.d.ts.map

package/dist/components/segmented-control.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"segmented-control.d.ts","sourceRoot":"","sources":["../../src/components/segmented-control.tsx"],"names":[],"mappings":"AACA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAOjE,QAAA,MAAM,wBAAwB;;;8EAwB7B,CAAA;AAED,QAAA,MAAM,4BAA4B;;;8EA6BjC,CAAA;AAED,UAAU,sBAAsB;IAC9B,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;CACd;AAED,UAAU,qBACR,SAAQ,YAAY,CAAC,OAAO,wBAAwB,CAAC;IACrD,OAAO,EAAE,sBAAsB,EAAE,CAAA;IACjC,KAAK,EAAE,MAAM,CAAA;IACb,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACtC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,cAAc,CAAC,EAAE,MAAM,CAAA;CACxB;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,OAAO,EACP,KAAK,EACL,aAAa,EACb,SAAS,EACT,SAAS,EACT,cAAc,EACd,OAAO,EACP,IAAI,GACL,EAAE,qBAAqB,2CAgFvB;AAED,OAAO,EAAE,4BAA4B,EAAE,wBAAwB,EAAE,CAAA"}

package/dist/components/segmented-control.js

@@ -0,0 +1,88 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { cva } from 'class-variance-authority';
+import { useRef } from 'react';
+import { cn } from '../lib/utils.js';
+
+const segmentedControlVariants = cva("tw:inline-flex tw:items-center tw:gap-1 tw:rounded-md tw:border tw:p-1", {
+    variants: {
+        variant: {
+            default: "tw:border-transparent tw:bg-muted",
+            destructive: "tw:border-destructive/20 tw:bg-destructive/10",
+            outline: "tw:border-input tw:bg-background",
+            secondary: "tw:border-transparent tw:bg-secondary/60",
+            ghost: "tw:border-transparent tw:bg-transparent",
+            link: "tw:border-transparent tw:bg-transparent",
+        },
+        size: {
+            default: "tw:p-1",
+            sm: "tw:p-0.5",
+            lg: "tw:p-1.5",
+            icon: "tw:p-1",
+        },
+    },
+    defaultVariants: {
+        variant: "default",
+        size: "default",
+    },
+});
+const segmentedControlItemVariants = cva("tw:inline-flex tw:items-center tw:justify-center tw:gap-2 tw:rounded-md tw:text-sm tw:font-medium tw:transition-all tw:duration-200 tw:outline-none tw:focus-visible:border-ring tw:focus-visible:ring-ring/50 tw:focus-visible:ring-[3px] tw:focus-visible:ring-offset-2 tw:focus-visible:ring-offset-background tw:focus:z-10 tw:cursor-pointer tw:disabled:cursor-not-allowed tw:disabled:pointer-events-none tw:disabled:opacity-50", {
+    variants: {
+        variant: {
+            default: "tw:text-foreground/70 tw:hover:text-primary tw:hover:bg-primary/10 tw:data-[state=active]:bg-primary tw:data-[state=active]:text-primary-foreground tw:data-[state=active]:shadow-xs",
+            destructive: "tw:text-destructive tw:hover:text-destructive tw:hover:bg-destructive/10 tw:data-[state=active]:bg-destructive tw:data-[state=active]:text-white tw:data-[state=active]:shadow-xs",
+            outline: "tw:text-foreground/70 tw:hover:text-foreground tw:hover:bg-muted/50 tw:data-[state=active]:border tw:data-[state=active]:border-input tw:data-[state=active]:bg-background tw:data-[state=active]:text-foreground tw:data-[state=active]:shadow-xs",
+            secondary: "tw:text-secondary-foreground/80 tw:hover:text-secondary-foreground tw:hover:bg-secondary/60 tw:data-[state=active]:bg-secondary tw:data-[state=active]:text-secondary-foreground tw:data-[state=active]:shadow-xs",
+            ghost: "tw:text-foreground/80 tw:hover:text-foreground tw:hover:bg-accent/50 tw:data-[state=active]:bg-accent tw:data-[state=active]:text-accent-foreground tw:data-[state=active]:shadow-xs",
+            link: "tw:text-primary tw:hover:underline tw:data-[state=active]:text-primary tw:data-[state=active]:underline tw:data-[state=active]:shadow-none",
+        },
+        size: {
+            default: "tw:px-4 tw:py-2 tw:text-sm",
+            sm: "tw:px-3 tw:py-1.5 tw:text-xs",
+            lg: "tw:px-5 tw:py-2.5 tw:text-base",
+            icon: "tw:px-2 tw:py-2 tw:text-sm",
+        },
+    },
+    defaultVariants: {
+        variant: "default",
+        size: "default",
+    },
+});
+function SegmentedControl({ options, value, onValueChange, className, ariaLabel, ariaLabelledBy, variant, size, }) {
+    const resolvedVariant = variant ?? "default";
+    const resolvedSize = size ?? "default";
+    const containerRef = useRef(null);
+    const handleKeyDown = (event, currentIndex) => {
+        let newIndex = currentIndex;
+        switch (event.key) {
+            case "ArrowLeft":
+            case "ArrowUp":
+                event.preventDefault();
+                newIndex = currentIndex > 0 ? currentIndex - 1 : options.length - 1;
+                break;
+            case "ArrowRight":
+            case "ArrowDown":
+                event.preventDefault();
+                newIndex = currentIndex < options.length - 1 ? currentIndex + 1 : 0;
+                break;
+            case "Home":
+                event.preventDefault();
+                newIndex = 0;
+                break;
+            case "End":
+                event.preventDefault();
+                newIndex = options.length - 1;
+                break;
+            default:
+                return;
+        }
+        onValueChange(options[newIndex]?.value ?? "");
+        const buttons = containerRef.current?.querySelectorAll("button");
+        buttons?.[newIndex]?.focus();
+    };
+    return (jsx("div", { ref: containerRef, className: cn(segmentedControlVariants({ variant, size }), className), role: "tablist", "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-orientation": "horizontal", "data-slot": "segmented-control", "data-variant": resolvedVariant, "data-size": resolvedSize, children: options.map((option, index) => {
+            const isSelected = value === option.value;
+            return (jsxs("button", { type: "button", role: "tab", "aria-selected": isSelected, "aria-controls": `panel-${option.value}`, id: `tab-${option.value}`, tabIndex: isSelected ? 0 : -1, onClick: () => onValueChange(option.value), onKeyDown: (e) => handleKeyDown(e, index), className: segmentedControlItemVariants({ variant, size }), "aria-describedby": isSelected ? `${option.value}-description` : undefined, "data-state": isSelected ? "active" : "inactive", "data-variant": resolvedVariant, "data-slot": "segmented-control-item", children: [option.label, isSelected && (jsx("span", { className: "tw:sr-only", children: ", currently selected" }))] }, option.value));
+        }) }));
+}
+
+export { SegmentedControl, segmentedControlItemVariants, segmentedControlVariants };

package/dist/components/select.d.ts

@@ -0,0 +1,16 @@
+import * as React from "react";
+import * as SelectPrimitive from "@radix-ui/react-select";
+declare function Select({ ...props }: React.ComponentProps<typeof SelectPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+declare function SelectGroup({ ...props }: React.ComponentProps<typeof SelectPrimitive.Group>): import("react/jsx-runtime").JSX.Element;
+declare function SelectValue({ ...props }: React.ComponentProps<typeof SelectPrimitive.Value>): import("react/jsx-runtime").JSX.Element;
+declare function SelectTrigger({ className, size, children, ...props }: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
+    size?: "sm" | "default";
+}): import("react/jsx-runtime").JSX.Element;
+declare function SelectContent({ className, children, position, ...props }: React.ComponentProps<typeof SelectPrimitive.Content>): import("react/jsx-runtime").JSX.Element;
+declare function SelectLabel({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.Label>): import("react/jsx-runtime").JSX.Element;
+declare function SelectItem({ className, children, ...props }: React.ComponentProps<typeof SelectPrimitive.Item>): import("react/jsx-runtime").JSX.Element;
+declare function SelectSeparator({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.Separator>): import("react/jsx-runtime").JSX.Element;
+declare function SelectScrollUpButton({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>): import("react/jsx-runtime").JSX.Element;
+declare function SelectScrollDownButton({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>): import("react/jsx-runtime").JSX.Element;
+export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, };
+//# sourceMappingURL=select.d.ts.map

package/dist/components/select.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../src/components/select.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,eAAe,MAAM,wBAAwB,CAAA;AAKzD,iBAAS,MAAM,CAAC,EACd,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,2CAEnD;AAED,iBAAS,WAAW,CAAC,EACnB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,2CAEpD;AAED,iBAAS,WAAW,CAAC,EACnB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,2CAEpD;AAED,iBAAS,aAAa,CAAC,EACrB,SAAS,EACT,IAAgB,EAChB,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,GAAG;IACxD,IAAI,CAAC,EAAE,IAAI,GAAG,SAAS,CAAA;CACxB,2CAyBA;AAED,iBAAS,aAAa,CAAC,EACrB,SAAS,EACT,QAAQ,EACR,QAAmB,EACnB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,2CA8BtD;AAED,iBAAS,WAAW,CAAC,EACnB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,2CAWpD;AAED,iBAAS,UAAU,CAAC,EAClB,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,2CAsBnD;AAED,iBAAS,eAAe,CAAC,EACvB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,SAAS,CAAC,2CAWxD;AAED,iBAAS,oBAAoB,CAAC,EAC5B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,cAAc,CAAC,2CAa7D;AAED,iBAAS,sBAAsB,CAAC,EAC9B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,gBAAgB,CAAC,2CAa/D;AAED,OAAO,EACL,MAAM,EACN,aAAa,EACb,WAAW,EACX,UAAU,EACV,WAAW,EACX,sBAAsB,EACtB,oBAAoB,EACpB,eAAe,EACf,aAAa,EACb,WAAW,GACZ,CAAA"}

package/dist/components/select.js

@@ -0,0 +1,39 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import * as SelectPrimitive from '@radix-ui/react-select';
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from 'lucide-react';
+import { cn } from '../lib/utils.js';
+
+function Select({ ...props }) {
+    return jsx(SelectPrimitive.Root, { "data-slot": "select", ...props });
+}
+function SelectGroup({ ...props }) {
+    return jsx(SelectPrimitive.Group, { "data-slot": "select-group", ...props });
+}
+function SelectValue({ ...props }) {
+    return jsx(SelectPrimitive.Value, { "data-slot": "select-value", ...props });
+}
+function SelectTrigger({ className, size = "default", children, ...props }) {
+    return (jsxs(SelectPrimitive.Trigger, { "data-slot": "select-trigger", "data-size": size, className: cn("tw:!flex tw:!w-fit tw:!items-center tw:!justify-between tw:!gap-2 tw:!rounded-md tw:!border tw:!border-input tw:!bg-transparent tw:!px-3 tw:!py-2 tw:!text-[14px] tw:!whitespace-nowrap tw:!shadow-xs tw:!transition-[color,box-shadow] tw:!outline-none", "data-[placeholder]:tw:!text-muted-foreground [&_svg:not([class*='text-'])]:tw:!text-muted-foreground", "focus-visible:tw:!border-ring focus-visible:tw:!ring-ring/50 focus-visible:tw:!ring-[3px]", "aria-invalid:tw:!border-destructive aria-invalid:tw:!ring-destructive/20 dark:aria-invalid:tw:!ring-destructive/40", "dark:tw:!bg-input/30 dark:hover:tw:!bg-input/50", "disabled:tw:!cursor-not-allowed disabled:tw:!opacity-50", "data-[size=default]:tw:!h-9 data-[size=sm]:tw:!h-8", "*:data-[slot=select-value]:tw:!line-clamp-1 *:data-[slot=select-value]:tw:!flex *:data-[slot=select-value]:tw:!items-center *:data-[slot=select-value]:tw:!gap-2", "[&_svg]:tw:!pointer-events-none [&_svg]:tw:!shrink-0 [&_svg:not([class*='size-'])]:tw:!size-4", className), ...props, children: [children, jsx(SelectPrimitive.Icon, { asChild: true, children: jsx(ChevronDownIcon, { className: "tw:!size-4 tw:!opacity-50" }) })] }));
+}
+function SelectContent({ className, children, position = "popper", ...props }) {
+    return (jsx(SelectPrimitive.Portal, { children: jsxs(SelectPrimitive.Content, { "data-slot": "select-content", className: cn("tw:!relative tw:!z-50 tw:!min-w-[8rem] tw:!max-h-(--radix-select-content-available-height) tw:!origin-(--radix-select-content-transform-origin) tw:!overflow-x-hidden tw:!overflow-y-auto tw:!rounded-md tw:!border tw:!bg-popover tw:!text-popover-foreground tw:!shadow-md", "data-[state=open]:tw:!animate-in data-[state=closed]:tw:!animate-out data-[state=closed]:tw:!fade-out-0 data-[state=open]:tw:!fade-in-0 data-[state=closed]:tw:!zoom-out-95 data-[state=open]:tw:!zoom-in-95", "data-[side=bottom]:tw:!slide-in-from-top-2 data-[side=left]:tw:!slide-in-from-right-2 data-[side=right]:tw:!slide-in-from-left-2 data-[side=top]:tw:!slide-in-from-bottom-2", position === "popper" &&
+                "data-[side=bottom]:tw:!translate-y-1 data-[side=left]:tw:!-translate-x-1 data-[side=right]:tw:!translate-x-1 data-[side=top]:tw:!-translate-y-1", className), position: position, ...props, children: [jsx(SelectScrollUpButton, {}), jsx(SelectPrimitive.Viewport, { className: cn("tw:!p-1", position === "popper" &&
+                        "tw:!h-[var(--radix-select-trigger-height)] tw:!w-full tw:!min-w-[var(--radix-select-trigger-width)] tw:!scroll-my-1"), children: children }), jsx(SelectScrollDownButton, {})] }) }));
+}
+function SelectLabel({ className, ...props }) {
+    return (jsx(SelectPrimitive.Label, { "data-slot": "select-label", className: cn("tw:!text-muted-foreground tw:!px-2 tw:!py-1.5 tw:!text-[12px]", className), ...props }));
+}
+function SelectItem({ className, children, ...props }) {
+    return (jsxs(SelectPrimitive.Item, { "data-slot": "select-item", className: cn("tw:!relative tw:!flex tw:!w-full tw:!cursor-default tw:!items-center tw:!gap-2 tw:!rounded-sm tw:!py-1.5 tw:!pl-2 tw:!pr-8 tw:!text-[14px] tw:!outline-hidden tw:!select-none tw:!transition-colors", "focus:tw:!bg-accent focus:tw:!text-accent-foreground", "data-[disabled]:tw:!pointer-events-none data-[disabled]:tw:!opacity-50", "[&>span]:tw:!line-clamp-1 [&>span]:tw:!flex [&>span]:tw:!items-center [&>span]:tw:!gap-2", "[&_svg]:tw:!pointer-events-none [&_svg]:tw:!shrink-0 [&_svg:not([class*='size-'])]:tw:!size-4 [&_svg:not([class*='text-'])]:tw:!text-muted-foreground", className), ...props, children: [jsx("span", { className: "tw:!absolute tw:!right-2 tw:!flex tw:!size-3.5 tw:!items-center tw:!justify-center", children: jsx(SelectPrimitive.ItemIndicator, { children: jsx(CheckIcon, { className: "tw:!size-4" }) }) }), jsx(SelectPrimitive.ItemText, { children: children })] }));
+}
+function SelectSeparator({ className, ...props }) {
+    return (jsx(SelectPrimitive.Separator, { "data-slot": "select-separator", className: cn("tw:!bg-border tw:!pointer-events-none tw:!-mx-1 tw:!my-1 tw:!h-px", className), ...props }));
+}
+function SelectScrollUpButton({ className, ...props }) {
+    return (jsx(SelectPrimitive.ScrollUpButton, { "data-slot": "select-scroll-up-button", className: cn("tw:!flex tw:!cursor-default tw:!items-center tw:!justify-center tw:!py-1", className), ...props, children: jsx(ChevronUpIcon, { className: "tw:!size-4" }) }));
+}
+function SelectScrollDownButton({ className, ...props }) {
+    return (jsx(SelectPrimitive.ScrollDownButton, { "data-slot": "select-scroll-down-button", className: cn("tw:!flex tw:!cursor-default tw:!items-center tw:!justify-center tw:!py-1", className), ...props, children: jsx(ChevronDownIcon, { className: "tw:!size-4" }) }));
+}
+
+export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue };

package/dist/components/selection-panel.d.ts

@@ -0,0 +1,29 @@
+import { type DataTableColumn, type DataTableRow } from "./data-table";
+export interface SelectionPanelProps<T extends DataTableRow> {
+    open: boolean;
+    onClose: () => void;
+    onDone: (selectedIds: string[]) => void;
+    title?: string;
+    description?: string;
+    availableItems: T[];
+    columns: DataTableColumn<T>[];
+    selectedColumns?: DataTableColumn<T>[];
+    selectedIds: string[];
+    loading?: boolean;
+    treeMode?: boolean;
+    availableLabel?: string;
+    selectedLabel?: string;
+    addButtonLabel?: string;
+    removeButtonLabel?: string;
+    doneButtonLabel?: string;
+    cancelButtonLabel?: string;
+    availableEmptyMessage?: string;
+    selectedEmptyMessage?: string;
+    width?: string;
+    maxWidth?: string;
+    showConfirmOnClose?: boolean;
+    confirmCloseMessage?: string;
+    onBeforeSelectionChange?: (selectedIds: string[]) => string[];
+}
+export declare function SelectionPanel<T extends DataTableRow>({ open, onClose, onDone, title, description, availableItems, columns, selectedColumns, selectedIds: initialSelectedIds, loading, treeMode, availableLabel, selectedLabel, addButtonLabel, removeButtonLabel, doneButtonLabel, cancelButtonLabel, availableEmptyMessage, selectedEmptyMessage, width, maxWidth, showConfirmOnClose, confirmCloseMessage, onBeforeSelectionChange, }: SelectionPanelProps<T>): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=selection-panel.d.ts.map

package/dist/components/selection-panel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"selection-panel.d.ts","sourceRoot":"","sources":["../../src/components/selection-panel.tsx"],"names":[],"mappings":"AAMA,OAAO,EAEL,KAAK,eAAe,EACpB,KAAK,YAAY,EAClB,MAAM,cAAc,CAAA;AAuBrB,MAAM,WAAW,mBAAmB,CAAC,CAAC,SAAS,YAAY;IACzD,IAAI,EAAE,OAAO,CAAA;IACb,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,MAAM,EAAE,CAAC,WAAW,EAAE,MAAM,EAAE,KAAK,IAAI,CAAA;IACvC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,cAAc,EAAE,CAAC,EAAE,CAAA;IACnB,OAAO,EAAE,eAAe,CAAC,CAAC,CAAC,EAAE,CAAA;IAC7B,eAAe,CAAC,EAAE,eAAe,CAAC,CAAC,CAAC,EAAE,CAAA;IACtC,WAAW,EAAE,MAAM,EAAE,CAAA;IACrB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,qBAAqB,CAAC,EAAE,MAAM,CAAA;IAC9B,oBAAoB,CAAC,EAAE,MAAM,CAAA;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,kBAAkB,CAAC,EAAE,OAAO,CAAA;IAC5B,mBAAmB,CAAC,EAAE,MAAM,CAAA;IAC5B,uBAAuB,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,EAAE,KAAK,MAAM,EAAE,CAAA;CAC9D;AAED,wBAAgB,cAAc,CAAC,CAAC,SAAS,YAAY,EAAE,EACrD,IAAI,EACJ,OAAO,EACP,MAAM,EACN,KAAsB,EACtB,WAAW,EACX,cAAc,EACd,OAAO,EACP,eAAe,EACf,WAAW,EAAE,kBAAkB,EAC/B,OAAe,EACf,QAAgB,EAChB,cAA4B,EAC5B,aAA0B,EAC1B,cAA+B,EAC/B,iBAAqC,EACrC,eAAwB,EACxB,iBAA4B,EAC5B,qBAAqB,EACrB,oBAA0C,EAC1C,KAAa,EACb,QAAmB,EACnB,kBAAyB,EACzB,mBAAkF,EAClF,uBAAuB,GACxB,EAAE,mBAAmB,CAAC,CAAC,CAAC,2CAwfxB"}

package/dist/components/selection-panel.js

@@ -0,0 +1,255 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import * as React from 'react';
+import { cn } from '../lib/utils.js';
+import { SearchBar } from './search-bar.js';
+import { DataTable } from './data-table.js';
+import { Button } from './button.js';
+import { Sheet, SheetContent, SheetTitle, SheetFooter } from './sheet.js';
+import { VisuallyHidden } from './visually-hidden.js';
+import { AlertDialog, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogDescription, AlertDialogFooter, AlertDialogCancel, AlertDialogAction } from './alert-dialog.js';
+
+function SelectionPanel({ open, onClose, onDone, title = "Select Items", description, availableItems, columns, selectedColumns, selectedIds: initialSelectedIds, loading = false, treeMode = false, availableLabel = "Available", selectedLabel = "Selected", addButtonLabel = "Add Selected", removeButtonLabel = "Remove Selected", doneButtonLabel = "Done", cancelButtonLabel = "Cancel", availableEmptyMessage, selectedEmptyMessage = "No items selected", width = "75%", maxWidth = "1400px", showConfirmOnClose = true, confirmCloseMessage = "Are you sure you want to exit without saving your changes?", onBeforeSelectionChange, }) {
+    const [selectedIds, setSelectedIds] = React.useState(new Set(initialSelectedIds));
+    const [availableChecked, setAvailableChecked] = React.useState(new Set());
+    const [selectedChecked, setSelectedChecked] = React.useState(new Set());
+    const [expandedAvailableRows, setExpandedAvailableRows] = React.useState(new Set());
+    const [availableSearch, setAvailableSearch] = React.useState("");
+    const [selectedSearch, setSelectedSearch] = React.useState("");
+    const [availableSearchApplied, setAvailableSearchApplied] = React.useState("");
+    const [selectedSearchApplied, setSelectedSearchApplied] = React.useState("");
+    // Pagination state for both panels
+    const [availablePage, setAvailablePage] = React.useState(1);
+    const [availablePageSize, setAvailablePageSize] = React.useState(20);
+    const [selectedPage, setSelectedPage] = React.useState(1);
+    const [selectedPageSize, setSelectedPageSize] = React.useState(20);
+    const [isDirty, setIsDirty] = React.useState(false);
+    const [showConfirmDialog, setShowConfirmDialog] = React.useState(false);
+    const availableHeadingId = React.useId();
+    const selectedHeadingId = React.useId();
+    React.useEffect(() => {
+        if (open) {
+            setSelectedIds(new Set(initialSelectedIds));
+            setAvailableChecked(new Set());
+            setSelectedChecked(new Set());
+            setExpandedAvailableRows(new Set());
+            setAvailableSearch("");
+            setSelectedSearch("");
+            setAvailableSearchApplied("");
+            setSelectedSearchApplied("");
+            setAvailablePage(1);
+            setSelectedPage(1);
+            setIsDirty(false);
+        }
+    }, [open, initialSelectedIds]);
+    const flattenTree = React.useCallback((items) => {
+        const map = {};
+        const traverse = (nodes, parentId) => {
+            nodes.forEach((node) => {
+                const entry = { ...node, parentId };
+                map[node.id] = entry;
+                if (node.children) {
+                    traverse(node.children, node.id);
+                }
+            });
+        };
+        traverse(items);
+        return map;
+    }, []);
+    const availableItemsMap = React.useMemo(() => flattenTree(availableItems), [availableItems, flattenTree]);
+    const availableItemsFiltered = React.useMemo(() => {
+        const filterRecursive = (items) => {
+            return items
+                .filter((item) => !selectedIds.has(item.id))
+                .map((item) => {
+                if (treeMode && item.children) {
+                    return {
+                        ...item,
+                        children: filterRecursive(item.children),
+                    };
+                }
+                return item;
+            });
+        };
+        let filtered = filterRecursive(availableItems);
+        if (availableSearchApplied) {
+            const searchLower = availableSearchApplied.toLowerCase();
+            const searchRecursive = (items) => {
+                return items.filter((item) => {
+                    const matches = columns.some((col) => {
+                        const value = item[col.key];
+                        return String(value).toLowerCase().includes(searchLower);
+                    });
+                    if (treeMode && item.children) {
+                        const matchingChildren = searchRecursive(item.children);
+                        if (matchingChildren.length > 0) {
+                            return true;
+                        }
+                    }
+                    return matches;
+                });
+            };
+            filtered = searchRecursive(filtered);
+        }
+        return filtered;
+    }, [availableItems, selectedIds, availableSearchApplied, columns, treeMode]);
+    const selectedItemsData = React.useMemo(() => {
+        const findItemsById = (items, ids) => {
+            const result = [];
+            for (const item of items) {
+                if (ids.has(item.id)) {
+                    result.push(item);
+                }
+                if (treeMode && item.children) {
+                    result.push(...findItemsById(item.children, ids));
+                }
+            }
+            return result;
+        };
+        let selected = findItemsById(availableItems, selectedIds);
+        if (selectedSearchApplied) {
+            const searchLower = selectedSearchApplied.toLowerCase();
+            selected = selected.filter((item) => {
+                return columns.some((col) => {
+                    const value = item[col.key];
+                    return String(value).toLowerCase().includes(searchLower);
+                });
+            });
+        }
+        return selected;
+    }, [availableItems, selectedIds, selectedSearchApplied, columns, treeMode]);
+    // Paginate available items (top-level only; children stay with parent)
+    const availableTotalPages = Math.ceil(availableItemsFiltered.length / availablePageSize);
+    const paginatedAvailableItems = React.useMemo(() => availableItemsFiltered.slice((availablePage - 1) * availablePageSize, availablePage * availablePageSize), [availableItemsFiltered, availablePage, availablePageSize]);
+    // Paginate selected items (flat list)
+    const selectedTotalPages = Math.ceil(selectedItemsData.length / selectedPageSize);
+    const paginatedSelectedItems = React.useMemo(() => selectedItemsData.slice((selectedPage - 1) * selectedPageSize, selectedPage * selectedPageSize), [selectedItemsData, selectedPage, selectedPageSize]);
+    // Reset to page 1 when filtered data changes (search, add/remove items)
+    React.useEffect(() => {
+        setAvailablePage(1);
+    }, [availableItemsFiltered.length]);
+    React.useEffect(() => {
+        setSelectedPage(1);
+    }, [selectedItemsData.length]);
+    const handleAvailableSelectionChange = React.useCallback((ids) => {
+        const transformedIds = onBeforeSelectionChange
+            ? onBeforeSelectionChange(ids)
+            : ids;
+        const newCheckedSet = new Set(transformedIds);
+        setAvailableChecked(newCheckedSet);
+        if (treeMode) {
+            // Only auto-expand ancestors of NEWLY checked IDs,
+            // don't touch expansion state for previously checked items
+            const newlyAdded = transformedIds.filter((id) => !availableChecked.has(id));
+            if (newlyAdded.length > 0) {
+                setExpandedAvailableRows((prev) => {
+                    const nextExpanded = new Set(prev);
+                    newlyAdded.forEach((id) => {
+                        let currentNode = availableItemsMap[id];
+                        if (!currentNode)
+                            return;
+                        let parentId = currentNode.parentId;
+                        while (parentId) {
+                            nextExpanded.add(parentId);
+                            parentId = availableItemsMap[parentId]?.parentId;
+                        }
+                    });
+                    return nextExpanded;
+                });
+            }
+        }
+    }, [onBeforeSelectionChange, treeMode, availableItemsMap, availableChecked]);
+    const handleSelectedSelectionChange = React.useCallback((ids) => {
+        setSelectedChecked(new Set(ids));
+    }, []);
+    const handleAddSelected = React.useCallback(() => {
+        if (availableChecked.size === 0)
+            return;
+        setSelectedIds((prev) => {
+            const next = new Set(prev);
+            availableChecked.forEach((id) => next.add(id));
+            return next;
+        });
+        setAvailableChecked(new Set());
+        setIsDirty(true);
+    }, [availableChecked]);
+    const handleRemoveSelected = React.useCallback(() => {
+        if (selectedChecked.size === 0)
+            return;
+        setSelectedIds((prev) => {
+            const next = new Set(prev);
+            selectedChecked.forEach((id) => next.delete(id));
+            return next;
+        });
+        setSelectedChecked(new Set());
+        setIsDirty(true);
+    }, [selectedChecked]);
+    const handleDone = React.useCallback(() => {
+        onDone(Array.from(selectedIds));
+        onClose();
+    }, [selectedIds, onDone, onClose]);
+    const handleClose = React.useCallback(() => {
+        if (isDirty && showConfirmOnClose) {
+            setShowConfirmDialog(true);
+        }
+        else {
+            onClose();
+        }
+    }, [isDirty, showConfirmOnClose, onClose]);
+    const handleConfirmClose = React.useCallback(() => {
+        setShowConfirmDialog(false);
+        onClose();
+    }, [onClose]);
+    return (jsxs(Fragment, { children: [jsx(Sheet, { open: open, onOpenChange: (isOpen) => !isOpen && handleClose(), children: jsxs(SheetContent, { side: "right", className: cn("tw:!p-0 tw:!z-[1200]"), overlayClassName: "tw:!z-[1200]", style: { width, maxWidth }, children: [jsx(VisuallyHidden, { children: jsx(SheetTitle, { children: title }) }), jsxs("div", { className: "tw:!flex tw:!h-full tw:!flex-col", children: [jsxs("div", { className: "tw:!flex tw:!flex-1 tw:!overflow-hidden", children: [jsxs("div", { className: "tw:!flex tw:!w-1/2 tw:!flex-col tw:!border-r", role: "region", "aria-labelledby": availableHeadingId, children: [jsxs("div", { className: "tw:!border-b tw:!p-4", children: [jsx("h2", { id: availableHeadingId, className: "tw:text-lg tw:!font-semibold tw:!mb-3", children: availableLabel }), jsx(SearchBar, { value: availableSearch, onChange: setAvailableSearch, onSearch: (term) => setAvailableSearchApplied(term), onClear: () => {
+                                                                setAvailableSearch("");
+                                                                setAvailableSearchApplied("");
+                                                            }, placeholder: `Search ${availableLabel.toLowerCase()}...`, inputAriaLabel: `Search within ${availableLabel}` }), jsx("div", { className: "tw:!flex tw:!justify-end tw:!mt-3", children: jsx(Button, { size: "sm", onClick: handleAddSelected, disabled: availableChecked.size === 0, className: availableChecked.size === 0
+                                                                    ? "tw:!opacity-50 tw:!cursor-not-allowed"
+                                                                    : undefined, "aria-label": availableChecked.size === 0
+                                                                    ? addButtonLabel
+                                                                    : `${addButtonLabel} (${availableChecked.size} selected)`, children: addButtonLabel }) })] }), jsx("div", { className: "tw:!flex-1 tw:!flex tw:!flex-col tw:!overflow-hidden", children: jsx(DataTable, { columns: columns, data: paginatedAvailableItems, onSelectionChange: handleAvailableSelectionChange, selectedRowIds: Array.from(availableChecked), treeData: treeMode, loading: loading, className: "tw:!flex-1", expandedRowIds: Array.from(expandedAvailableRows), onExpandedChange: (ids) => setExpandedAvailableRows(new Set(ids)), reservePaginationSpace: true, selectContentClassName: "tw:!z-[1300]", menuPopupClassName: "tw:!z-[1300]", pagination: {
+                                                            currentPage: availablePage,
+                                                            totalPages: availableTotalPages,
+                                                            onPageChange: setAvailablePage,
+                                                            pageSize: availablePageSize,
+                                                            totalItems: availableItemsFiltered.length,
+                                                            pageSizeOptions: [20, 40, 60, 80, 100],
+                                                            onPageSizeChange: (size) => {
+                                                                setAvailablePageSize(size);
+                                                                setAvailablePage(1);
+                                                            },
+                                                            showTotalItems: true,
+                                                        }, footerContent: jsxs("div", { className: "tw:text-sm tw:text-muted-foreground", "aria-live": "polite", role: "status", children: [availableChecked.size, " Selected"] }), emptyState: {
+                                                            title: availableEmptyMessage || "No items available",
+                                                            description: availableSearchApplied
+                                                                ? "Try adjusting your search"
+                                                                : undefined,
+                                                        } }) })] }), jsxs("div", { className: "tw:!flex tw:!w-1/2 tw:!flex-col", role: "region", "aria-labelledby": selectedHeadingId, children: [jsxs("div", { className: "tw:!border-b tw:!p-4", children: [jsx("h2", { id: selectedHeadingId, className: "tw:text-lg tw:!font-semibold tw:!mb-3", children: selectedLabel }), jsx(SearchBar, { value: selectedSearch, onChange: setSelectedSearch, onSearch: (term) => setSelectedSearchApplied(term), onClear: () => {
+                                                                setSelectedSearch("");
+                                                                setSelectedSearchApplied("");
+                                                            }, placeholder: `Search ${selectedLabel.toLowerCase()}...`, inputAriaLabel: `Search within ${selectedLabel}` }), jsx("div", { className: "tw:!flex tw:!justify-end tw:!mt-3", children: jsx(Button, { size: "sm", onClick: handleRemoveSelected, disabled: selectedChecked.size === 0, variant: "destructive", className: selectedChecked.size === 0
+                                                                    ? "tw:!opacity-50 tw:!cursor-not-allowed"
+                                                                    : undefined, "aria-label": selectedChecked.size === 0
+                                                                    ? removeButtonLabel
+                                                                    : `${removeButtonLabel} (${selectedChecked.size} selected)`, children: removeButtonLabel }) })] }), jsx("div", { className: "tw:!flex-1 tw:!flex tw:!flex-col tw:!overflow-hidden", children: jsx(DataTable, { columns: selectedColumns ?? columns, data: paginatedSelectedItems, onSelectionChange: handleSelectedSelectionChange, selectedRowIds: Array.from(selectedChecked), treeData: false, className: "tw:!flex-1", reservePaginationSpace: true, selectContentClassName: "tw:!z-[1300]", menuPopupClassName: "tw:!z-[1300]", pagination: {
+                                                            currentPage: selectedPage,
+                                                            totalPages: selectedTotalPages,
+                                                            onPageChange: setSelectedPage,
+                                                            pageSize: selectedPageSize,
+                                                            totalItems: selectedItemsData.length,
+                                                            pageSizeOptions: [20, 40, 60, 80, 100],
+                                                            onPageSizeChange: (size) => {
+                                                                setSelectedPageSize(size);
+                                                                setSelectedPage(1);
+                                                            },
+                                                            showTotalItems: true,
+                                                        }, footerContent: jsxs("div", { className: "tw:text-sm tw:text-muted-foreground", "aria-live": "polite", role: "status", children: [selectedIds.size, " Selected"] }), emptyState: {
+                                                            title: selectedEmptyMessage,
+                                                            description: selectedSearchApplied
+                                                                ? "Try adjusting your search"
+                                                                : undefined,
+                                                        } }) })] })] }), jsxs(SheetFooter, { className: "tw:!border-t tw:!flex tw:!flex-row tw:!justify-between tw:!items-center", children: [jsx(Button, { variant: "link", className: "tw:!text-primary tw:!px-0", onClick: handleClose, children: cancelButtonLabel }), jsx(Button, { onClick: handleDone, disabled: selectedIds.size === 0, className: selectedIds.size === 0
+                                                ? "tw:!opacity-50 tw:!cursor-not-allowed"
+                                                : undefined, children: doneButtonLabel })] })] })] }) }), jsx(AlertDialog, { open: showConfirmDialog, onOpenChange: setShowConfirmDialog, children: jsxs(AlertDialogContent, { className: "tw:!z-[1300]", overlayClassName: "tw:!z-[1300]", children: [jsxs(AlertDialogHeader, { children: [jsx(AlertDialogTitle, { children: "Unsaved Changes" }), jsx(AlertDialogDescription, { children: confirmCloseMessage })] }), jsxs(AlertDialogFooter, { children: [jsx(AlertDialogCancel, { onClick: () => setShowConfirmDialog(false), children: "Go Back" }), jsx(AlertDialogAction, { onClick: handleConfirmClose, children: "Exit Without Saving" })] })] }) })] }));
+}
+
+export { SelectionPanel };

package/dist/components/separator.d.ts

@@ -0,0 +1,5 @@
+import * as React from "react";
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
+declare function Separator({ className, orientation, decorative, ...props }: React.ComponentProps<typeof SeparatorPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+export { Separator };
+//# sourceMappingURL=separator.d.ts.map

package/dist/components/separator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"separator.d.ts","sourceRoot":"","sources":["../../src/components/separator.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,kBAAkB,MAAM,2BAA2B,CAAA;AAI/D,iBAAS,SAAS,CAAC,EACjB,SAAS,EACT,WAA0B,EAC1B,UAAiB,EACjB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,kBAAkB,CAAC,IAAI,CAAC,2CAatD;AAED,OAAO,EAAE,SAAS,EAAE,CAAA"}

package/dist/components/separator.js

@@ -0,0 +1,9 @@
+import { jsx } from 'react/jsx-runtime';
+import * as SeparatorPrimitive from '@radix-ui/react-separator';
+import { cn } from '../lib/utils.js';
+
+function Separator({ className, orientation = "horizontal", decorative = true, ...props }) {
+    return (jsx(SeparatorPrimitive.Root, { "data-slot": "separator", decorative: decorative, orientation: orientation, className: cn("tw:bg-border tw:shrink-0 data-[orientation=horizontal]:tw:h-px data-[orientation=horizontal]:tw:w-full data-[orientation=vertical]:tw:h-full data-[orientation=vertical]:tw:w-px", className), ...props }));
+}
+
+export { Separator };