pixelize-design-library 2.2.192 → 3.0.1-beta.1

package/dist/components-v2/Sidebar/Sidebar.js

@@ -0,0 +1,182 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Sidebar = Sidebar;
+const React = __importStar(require("react"));
+const framer_motion_1 = require("framer-motion");
+const lucide_react_1 = require("lucide-react");
+const utils_1 = require("../../lib/utils");
+const badge_1 = require("../ui/badge");
+const popover_1 = require("../ui/popover");
+const skeleton_1 = require("../ui/skeleton");
+const EXPANDED_WIDTH = 240;
+const COLLAPSED_WIDTH = 64;
+function Sidebar({ menus, activeItem, onItemClick, logo, companyName, collapsed: collapsedProp, onCollapsedChange, defaultCollapsed = false, mobileOpen = false, onMobileOpenChange, otherApps, footer, isLoading = false, className, }) {
+    const isCollapsedControlled = collapsedProp !== undefined;
+    const [internalCollapsed, setInternalCollapsed] = React.useState(defaultCollapsed);
+    const collapsed = isCollapsedControlled ? collapsedProp : internalCollapsed;
+    const toggleCollapsed = () => {
+        const next = !collapsed;
+        if (!isCollapsedControlled)
+            setInternalCollapsed(next);
+        onCollapsedChange === null || onCollapsedChange === void 0 ? void 0 : onCollapsedChange(next);
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement(framer_motion_1.motion.aside, { "aria-label": "Main navigation", animate: { width: collapsed ? COLLAPSED_WIDTH : EXPANDED_WIDTH }, initial: false, transition: { duration: 0.2, ease: "easeInOut" }, className: (0, utils_1.cn)("sticky top-0 hidden h-screen shrink-0 flex-col border-r border-border bg-card text-card-foreground md:flex", className) },
+            React.createElement(SidebarBody, { menus: menus, activeItem: activeItem, onItemClick: onItemClick, logo: logo, companyName: companyName, collapsed: collapsed, onToggleCollapsed: toggleCollapsed, otherApps: otherApps, footer: footer, isLoading: isLoading })),
+        React.createElement(framer_motion_1.AnimatePresence, null, mobileOpen && (React.createElement(React.Fragment, null,
+            React.createElement(framer_motion_1.motion.div, { key: "sidebar-backdrop", initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: 0.15 }, onClick: () => onMobileOpenChange === null || onMobileOpenChange === void 0 ? void 0 : onMobileOpenChange(false), className: "fixed inset-0 z-40 bg-foreground/40 backdrop-blur-sm md:hidden", "aria-hidden": "true" }),
+            React.createElement(framer_motion_1.motion.aside, { key: "sidebar-drawer", initial: { x: "-100%" }, animate: { x: 0 }, exit: { x: "-100%" }, transition: { duration: 0.2, ease: "easeInOut" }, className: (0, utils_1.cn)("fixed inset-y-0 left-0 z-50 flex w-60 flex-col border-r border-border bg-card text-card-foreground md:hidden", className), "aria-label": "Main navigation" },
+                React.createElement(SidebarBody, { menus: menus, activeItem: activeItem, onItemClick: (item) => {
+                        onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(item);
+                        onMobileOpenChange === null || onMobileOpenChange === void 0 ? void 0 : onMobileOpenChange(false);
+                    }, logo: logo, companyName: companyName, collapsed: false, onToggleCollapsed: () => onMobileOpenChange === null || onMobileOpenChange === void 0 ? void 0 : onMobileOpenChange(false), otherApps: otherApps, footer: footer, isLoading: isLoading, isMobileDrawer: true })))))));
+}
+function SidebarBody({ menus, activeItem, onItemClick, logo, companyName, collapsed, onToggleCollapsed, otherApps, footer, isLoading, isMobileDrawer = false, }) {
+    var _a, _b;
+    return (React.createElement("nav", { className: "flex h-full min-h-0 flex-col", "aria-label": "Sidebar" },
+        React.createElement("div", { className: (0, utils_1.cn)("flex h-14 shrink-0 items-center gap-2 border-b border-border px-3", collapsed && "justify-center px-2") },
+            logo ? (React.createElement("img", { src: logo, alt: "", className: "h-7 w-7 shrink-0 rounded-md object-contain" })) : (React.createElement("div", { className: "grid h-7 w-7 shrink-0 place-items-center rounded-md bg-primary text-xs font-semibold text-primary-foreground" }, (_b = (_a = companyName === null || companyName === void 0 ? void 0 : companyName[0]) === null || _a === void 0 ? void 0 : _a.toUpperCase()) !== null && _b !== void 0 ? _b : "P")),
+            !collapsed && companyName && (React.createElement("span", { className: "truncate text-sm font-semibold text-foreground" }, companyName))),
+        React.createElement("ul", { className: "flex-1 overflow-y-auto px-2 py-3", role: "list" }, isLoading
+            ? Array.from({ length: 5 }).map((_, index) => (React.createElement("li", { key: `skeleton-${index}`, className: "mb-1" },
+                React.createElement("div", { className: (0, utils_1.cn)("flex items-center gap-2 px-2 py-1.5", collapsed && "justify-center") },
+                    React.createElement(skeleton_1.Skeleton, { variant: "rectangle", className: "h-5 w-5 rounded" }),
+                    !collapsed && (React.createElement(skeleton_1.Skeleton, { variant: "text", className: "h-3 w-24" }))))))
+            : menus.map((item) => (React.createElement(SidebarMenuRow, { key: item.id, item: item, activeItem: activeItem, collapsed: collapsed, onItemClick: onItemClick })))),
+        otherApps && otherApps.length > 0 && (React.createElement("div", { className: "shrink-0 border-t border-border px-2 py-2" }, collapsed ? (React.createElement(popover_1.Popover, null,
+            React.createElement(popover_1.PopoverTrigger, { asChild: true },
+                React.createElement("button", { type: "button", "aria-label": "Other apps", className: "flex h-9 w-full items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring" },
+                    React.createElement(lucide_react_1.Grid3x3, { "aria-hidden": "true", className: "h-4 w-4" }))),
+            React.createElement(popover_1.PopoverContent, { side: "right", align: "end", className: "w-56 p-1" },
+                React.createElement(OtherAppsList, { apps: otherApps })))) : (React.createElement(React.Fragment, null,
+            React.createElement("p", { className: "px-2 pb-1 text-[10px] font-semibold uppercase tracking-wider text-muted-foreground" }, "Other apps"),
+            React.createElement(OtherAppsList, { apps: otherApps }))))),
+        footer && (React.createElement("div", { className: "shrink-0 border-t border-border px-2 py-2" }, footer)),
+        React.createElement("div", { className: "shrink-0 border-t border-border px-2 py-2" },
+            React.createElement("button", { type: "button", onClick: onToggleCollapsed, "aria-label": isMobileDrawer
+                    ? "Close sidebar"
+                    : collapsed
+                        ? "Expand sidebar"
+                        : "Collapse sidebar", "aria-expanded": !collapsed, className: "flex h-8 w-full items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring" },
+                React.createElement(lucide_react_1.ChevronLeft, { "aria-hidden": "true", className: (0, utils_1.cn)("h-4 w-4 transition-transform motion-safe:duration-200", collapsed && "rotate-180") })))));
+}
+function SidebarMenuRow({ item, activeItem, collapsed, onItemClick, nested = false, }) {
+    var _a;
+    const hasChildren = !!item.children && item.children.length > 0;
+    const isActive = activeItem === item.id;
+    const childActive = hasChildren &&
+        item.children.some((child) => child.id === activeItem);
+    const [expanded, setExpanded] = React.useState(childActive);
+    React.useEffect(() => {
+        if (childActive)
+            setExpanded(true);
+    }, [childActive]);
+    const [hoverOpen, setHoverOpen] = React.useState(false);
+    const closeTimer = React.useRef(null);
+    const scheduleClose = () => {
+        if (closeTimer.current)
+            window.clearTimeout(closeTimer.current);
+        closeTimer.current = window.setTimeout(() => setHoverOpen(false), 120);
+    };
+    const cancelClose = () => {
+        if (closeTimer.current)
+            window.clearTimeout(closeTimer.current);
+        setHoverOpen(true);
+    };
+    const handleClick = (event) => {
+        if (item.disabled)
+            return;
+        event.preventDefault();
+        if (hasChildren && !collapsed) {
+            setExpanded((prev) => !prev);
+            return;
+        }
+        onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(item);
+    };
+    const IconComponent = item.icon;
+    const trigger = (React.createElement("button", { type: "button", disabled: item.disabled, "aria-current": isActive ? "page" : undefined, "aria-disabled": item.disabled || undefined, "aria-haspopup": hasChildren ? "menu" : undefined, "aria-expanded": hasChildren ? expanded || hoverOpen : undefined, "aria-label": collapsed ? item.title : undefined, onClick: handleClick, onMouseEnter: collapsed && hasChildren ? cancelClose : undefined, onMouseLeave: collapsed && hasChildren ? scheduleClose : undefined, className: (0, utils_1.cn)("group relative flex w-full items-center gap-2.5 rounded-md px-2 py-1.5 text-sm transition-colors", "text-muted-foreground hover:bg-accent hover:text-foreground", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", "disabled:cursor-not-allowed disabled:opacity-50", isActive && "bg-primary/10 text-primary hover:bg-primary/15", collapsed && "justify-center px-2", nested && "py-1 text-xs") },
+        isActive && (React.createElement("span", { "aria-hidden": "true", className: "absolute left-0 top-1/2 h-5 w-0.5 -translate-y-1/2 rounded-r bg-primary" })),
+        IconComponent ? (React.createElement(IconComponent, { "aria-hidden": "true", className: (0, utils_1.cn)("h-4 w-4 shrink-0", isActive && "text-primary") })) : (React.createElement("span", { "aria-hidden": "true", className: "h-4 w-4 shrink-0 rounded-sm bg-muted" })),
+        !collapsed && (React.createElement(React.Fragment, null,
+            React.createElement("span", { className: "flex-1 truncate text-left" }, item.title),
+            item.badge && (React.createElement(badge_1.Badge, { variant: badgeVariant(item.badge.variant), size: "sm", className: "px-1.5 py-0 text-[10px]" }, (_a = item.badge.label) !== null && _a !== void 0 ? _a : item.badge.count)),
+            hasChildren && (React.createElement(lucide_react_1.ChevronDown, { "aria-hidden": "true", className: (0, utils_1.cn)("h-3.5 w-3.5 shrink-0 text-muted-foreground transition-transform motion-safe:duration-200", expanded && "rotate-180") })))),
+        collapsed && item.badge && (React.createElement("span", { "aria-hidden": "true", className: (0, utils_1.cn)("absolute right-1 top-1 h-1.5 w-1.5 rounded-full", badgeDot(item.badge.variant)) }))));
+    if (collapsed && hasChildren) {
+        return (React.createElement("li", null,
+            React.createElement(popover_1.Popover, { open: hoverOpen, onOpenChange: setHoverOpen },
+                React.createElement(popover_1.PopoverTrigger, { asChild: true }, trigger),
+                React.createElement(popover_1.PopoverContent, { side: "right", align: "start", sideOffset: 8, onMouseEnter: cancelClose, onMouseLeave: scheduleClose, className: "w-56 p-1" },
+                    React.createElement("div", { className: "px-2 py-1 text-xs font-semibold text-muted-foreground" }, item.title),
+                    React.createElement("ul", { role: "list" }, item.children.map((child) => (React.createElement(SidebarMenuRow, { key: child.id, item: child, activeItem: activeItem, collapsed: false, onItemClick: (value) => {
+                            setHoverOpen(false);
+                            onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(value);
+                        }, nested: true }))))))));
+    }
+    return (React.createElement("li", null,
+        trigger,
+        hasChildren && !collapsed && (React.createElement(framer_motion_1.AnimatePresence, { initial: false }, expanded && (React.createElement(framer_motion_1.motion.ul, { key: "submenu", initial: { height: 0, opacity: 0 }, animate: { height: "auto", opacity: 1 }, exit: { height: 0, opacity: 0 }, transition: { duration: 0.18, ease: "easeInOut" }, className: "ml-5 mt-0.5 overflow-hidden border-l border-border pl-2", role: "list" }, item.children.map((child) => (React.createElement(SidebarMenuRow, { key: child.id, item: child, activeItem: activeItem, collapsed: false, onItemClick: onItemClick, nested: true })))))))));
+}
+function OtherAppsList({ apps }) {
+    return (React.createElement("ul", { role: "list" }, apps.map((app) => (React.createElement("li", { key: app.id },
+        React.createElement("a", { href: app.url, className: "flex items-center gap-2 rounded-md px-2 py-1.5 text-sm text-muted-foreground transition-colors hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring" },
+            app.iconUrl ? (React.createElement("img", { src: app.iconUrl, alt: "", className: "h-4 w-4 rounded-sm object-contain" })) : app.icon ? (React.createElement(app.icon, { "aria-hidden": "true", className: "h-4 w-4" })) : (React.createElement(lucide_react_1.Grid3x3, { "aria-hidden": "true", className: "h-4 w-4" })),
+            React.createElement("span", { className: "truncate" }, app.name)))))));
+}
+function badgeVariant(variant) {
+    switch (variant) {
+        case "destructive":
+            return "destructive";
+        case "success":
+            return "success";
+        case "warning":
+            return "warning";
+        default:
+            return "default";
+    }
+}
+function badgeDot(variant) {
+    switch (variant) {
+        case "destructive":
+            return "bg-destructive";
+        case "success":
+            return "bg-success";
+        case "warning":
+            return "bg-warning";
+        default:
+            return "bg-primary";
+    }
+}

package/dist/components-v2/Slider/Slider.d.ts

@@ -0,0 +1,18 @@
+import * as React from "react";
+import * as SliderPrimitive from "@radix-ui/react-slider";
+export interface SliderMark {
+    value: number;
+    label?: React.ReactNode;
+}
+export interface SliderProps extends Omit<React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>, "value" | "defaultValue" | "onValueChange"> {
+    /** Single value or pair for range mode. */
+    value?: number | number[];
+    defaultValue?: number | number[];
+    onValueChange?: (value: number | number[]) => void;
+    /** Show tooltip with current value on the thumb. */
+    showTooltip?: boolean;
+    /** Marks rendered along the track. */
+    marks?: SliderMark[];
+    formatValue?: (value: number) => string;
+}
+export declare const Slider: React.ForwardRefExoticComponent<SliderProps & React.RefAttributes<HTMLSpanElement>>;

package/dist/components-v2/Slider/Slider.js

@@ -0,0 +1,101 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Slider = void 0;
+const React = __importStar(require("react"));
+const SliderPrimitive = __importStar(require("@radix-ui/react-slider"));
+const utils_1 = require("../../lib/utils");
+const tooltip_1 = require("../ui/tooltip");
+exports.Slider = React.forwardRef((_a, ref) => {
+    var { className, value, defaultValue, onValueChange, showTooltip = false, marks, formatValue = String, min = 0, max = 100, step = 1 } = _a, rest = __rest(_a, ["className", "value", "defaultValue", "onValueChange", "showTooltip", "marks", "formatValue", "min", "max", "step"]);
+    const isRange = Array.isArray(value)
+        ? value.length > 1
+        : Array.isArray(defaultValue)
+            ? defaultValue.length > 1
+            : false;
+    const internalValue = React.useMemo(() => {
+        var _a;
+        const source = (_a = value !== null && value !== void 0 ? value : defaultValue) !== null && _a !== void 0 ? _a : (isRange ? [min, max] : [min]);
+        return Array.isArray(source) ? source : [source];
+    }, [value, defaultValue, isRange, min, max]);
+    const [trackedValue, setTrackedValue] = React.useState(internalValue);
+    const displayValue = value !== undefined
+        ? Array.isArray(value)
+            ? value
+            : [value]
+        : trackedValue;
+    return (React.createElement("div", { className: (0, utils_1.cn)("w-full select-none", className) },
+        React.createElement(SliderPrimitive.Root, Object.assign({ ref: ref, value: displayValue, defaultValue: defaultValue !== undefined
+                ? Array.isArray(defaultValue)
+                    ? defaultValue
+                    : [defaultValue]
+                : undefined, onValueChange: (next) => {
+                setTrackedValue(next);
+                onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(isRange ? next : next[0]);
+            }, min: min, max: max, step: step, className: "relative flex h-5 w-full touch-none items-center" }, rest),
+            React.createElement(SliderPrimitive.Track, { className: "relative h-1 w-full grow overflow-hidden rounded-full bg-muted" },
+                React.createElement(SliderPrimitive.Range, { className: "absolute h-full bg-primary" })),
+            displayValue.map((thumbValue, index) => {
+                const thumb = (React.createElement(SliderPrimitive.Thumb, { key: index, "aria-label": isRange
+                        ? index === 0
+                            ? "Minimum value"
+                            : "Maximum value"
+                        : "Value", className: (0, utils_1.cn)("block h-4 w-4 rounded-full border-2 border-primary bg-background shadow-sm transition-colors", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background", "disabled:pointer-events-none disabled:opacity-50") }));
+                if (!showTooltip)
+                    return thumb;
+                return (React.createElement(tooltip_1.Tooltip, { key: index, open: true },
+                    React.createElement(tooltip_1.TooltipTrigger, { asChild: true }, thumb),
+                    React.createElement(tooltip_1.TooltipContent, { side: "top", sideOffset: 6 }, formatValue(thumbValue))));
+            })),
+        marks && marks.length > 0 && (React.createElement("div", { "aria-hidden": "true", className: "relative mt-1.5 h-4 text-[10px] text-muted-foreground" }, marks.map((mark) => {
+            var _a;
+            const ratio = (mark.value - min) / (max - min);
+            return (React.createElement("span", { key: mark.value, style: {
+                    left: `${Math.min(Math.max(ratio, 0), 1) * 100}%`,
+                }, className: "absolute -translate-x-1/2" }, (_a = mark.label) !== null && _a !== void 0 ? _a : mark.value));
+        })))));
+});
+exports.Slider.displayName = "Slider";

package/dist/components-v2/Table/Table.d.ts

@@ -0,0 +1,7 @@
+import * as React from "react";
+import { type ColumnDef, type TableProps } from "./TableProps";
+export declare function Table<T>(props: TableProps<T>): React.ReactElement;
+export declare namespace Table {
+    var displayName: string;
+}
+export type { ColumnDef, TableProps };

package/dist/components-v2/Table/Table.js

@@ -0,0 +1,172 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Table = Table;
+const React = __importStar(require("react"));
+const lucide_react_1 = require("lucide-react");
+const utils_1 = require("../../lib/utils");
+const button_1 = require("../ui/button");
+const dropdown_menu_1 = require("../ui/dropdown-menu");
+const ActiveFilters_1 = require("./components/ActiveFilters");
+const BulkActionBar_1 = require("./components/BulkActionBar");
+const Pagination_1 = require("./components/Pagination");
+const TableBody_1 = require("./components/TableBody");
+const TableEmptyState_1 = require("./components/TableEmptyState");
+const TableErrorState_1 = require("./components/TableErrorState");
+const TableHeader_1 = require("./components/TableHeader");
+const TableSearch_1 = require("./components/TableSearch");
+const LeftFilterPane_1 = require("./filters/LeftFilterPane");
+const TableFilters_1 = require("./filters/TableFilters");
+const useColumnResize_1 = require("./hooks/useColumnResize");
+const useTable_1 = require("./hooks/useTable");
+const useTableKeyboard_1 = require("./hooks/useTableKeyboard");
+const useVirtualScroll_1 = require("./hooks/useVirtualScroll");
+const ManageColumns_1 = require("./settings/ManageColumns");
+const TableSettings_1 = require("./settings/TableSettings");
+const TableProps_1 = require("./TableProps");
+const sortUtils_1 = require("./utils/sortUtils");
+const DEFAULT_PAGE_SIZE_OPTIONS = [10, 25, 50, 100];
+function Table(props) {
+    const { data, columns, rowKey, selectable = false, selectedRows, onSelectionChange, selectionMode = "multi", onRowClick, rowClassName, sortable = true, defaultSort, onSortChange, filterable = true, defaultFilters, onFilterChange, searchable = true, searchPlaceholder, onSearchChange, isServerSearch = false, pagination = true, paginationMode = "client", defaultPageSize = 50, pageSizeOptions = DEFAULT_PAGE_SIZE_OPTIONS, totalCount, onPageChange, isLoading = false, loadingRowCount = 5, error = null, onRetry, emptyState, emptyTitle, emptyDescription, emptyAction, density: densityProp = "default", maxHeight, virtualScroll, rowHeight, virtualScrollThreshold = 500, defaultHiddenColumns = [], showColumnToggle = true, columnResizable = true, stickyHeader = true, noBorders = false, bulkActions = [], filterSidebar, filterMode = "inline", preferences, headerActions, exportOptions, className, style, } = props;
+    const tableState = (0, useTable_1.useTable)({
+        data,
+        columns,
+        rowKey,
+        selectable,
+        selectionMode,
+        selectedRows,
+        onSelectionChange,
+        sortable,
+        defaultSort,
+        onSortChange,
+        filterable,
+        defaultFilters,
+        onFilterChange,
+        searchable,
+        onSearchChange,
+        isServerSearch,
+        pagination,
+        paginationMode,
+        defaultPageSize,
+        totalCount,
+        onPageChange,
+        defaultHiddenColumns,
+        density: densityProp,
+        preferences,
+    });
+    const { pageData, processed, pageCount, visibleColumns, columnVisibility, setColumnHidden, columnWidths, setColumnWidth, density, setDensity, sort, setSort, filters, setFilters, searchQuery, setSearchQuery, selection, toggleRow, toggleAll, clearSelection, isAllSelected, isSomeSelected, pageIndex, pageSize, setPage, setPageSize, } = tableState;
+    const resize = (0, useColumnResize_1.useColumnResize)({
+        columns,
+        columnWidths,
+        setColumnWidth,
+        enabled: columnResizable,
+    });
+    const scrollRef = React.useRef(null);
+    const resolvedRowHeight = rowHeight !== null && rowHeight !== void 0 ? rowHeight : TableProps_1.ROW_HEIGHT[density];
+    const virtual = (0, useVirtualScroll_1.useVirtualScroll)({
+        rowCount: pageData.length,
+        rowHeight: resolvedRowHeight,
+        enabled: virtualScroll,
+        threshold: virtualScrollThreshold,
+        scrollContainerRef: scrollRef,
+    });
+    const keyboardEnabled = selectable || !!onRowClick;
+    const keyboard = (0, useTableKeyboard_1.useTableKeyboard)({
+        rowCount: pageData.length,
+        columnCount: visibleColumns.length,
+        hasSelectionColumn: selectable,
+        onActivateRow: (rowIndex) => {
+            const row = pageData[rowIndex];
+            if (row && onRowClick) {
+                onRowClick(row, {});
+            }
+        },
+        onToggleRow: (rowIndex) => {
+            const row = pageData[rowIndex];
+            if (row)
+                toggleRow((0, sortUtils_1.resolveRowKey)(row, rowKey));
+        },
+        onClearSelection: clearSelection,
+    });
+    const selectedKeys = React.useMemo(() => new Set(selection), [selection]);
+    const selectedRowData = React.useMemo(() => data.filter((row) => selectedKeys.has((0, sortUtils_1.resolveRowKey)(row, rowKey))), [data, selectedKeys, rowKey]);
+    const hasActiveFilters = filters.length > 0 || searchQuery.length > 0;
+    const showSidebar = (filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.enabled) && filterMode === "sidebar";
+    const handleRemoveFilter = (filter) => {
+        setFilters((prev) => prev.filter((f) => f !== filter));
+    };
+    const clearAllFilters = () => {
+        setFilters([]);
+        if (searchQuery)
+            setSearchQuery("");
+    };
+    const totalRows = paginationMode === "server" ? totalCount !== null && totalCount !== void 0 ? totalCount : 0 : processed.length;
+    const hasError = error !== null && error !== undefined;
+    const isEmpty = !isLoading && !hasError && pageData.length === 0;
+    return (React.createElement("div", { className: (0, utils_1.cn)("flex flex-col overflow-hidden rounded-md border border-border bg-card text-card-foreground", className), style: Object.assign({ "--row-height": `${resolvedRowHeight}px` }, style) },
+        React.createElement("div", { className: "flex flex-wrap items-center justify-between gap-2 border-b border-border bg-card px-3 py-2" },
+            React.createElement("div", { className: "flex flex-1 items-center gap-2" }, searchable && (React.createElement(TableSearch_1.TableSearch, { value: searchQuery, onChange: setSearchQuery, placeholder: searchPlaceholder }))),
+            React.createElement("div", { className: "flex flex-wrap items-center gap-2" },
+                filterable && filterMode === "inline" && (React.createElement(TableFilters_1.TableFilters, { columns: columns, filters: filters, onApply: (next) => setFilters(next) })),
+                showColumnToggle && (React.createElement(ManageColumns_1.ManageColumns, { columns: columns, columnVisibility: columnVisibility, onChange: setColumnHidden })),
+                React.createElement(TableSettings_1.TableSettings, { density: density, onDensityChange: setDensity }),
+                exportOptions && exportOptions.length > 0 && (React.createElement(dropdown_menu_1.DropdownMenu, null,
+                    React.createElement(dropdown_menu_1.DropdownMenuTrigger, { asChild: true },
+                        React.createElement(button_1.Button, { size: "sm", variant: "outline", leftIcon: React.createElement(lucide_react_1.Download, null) }, "Export")),
+                    React.createElement(dropdown_menu_1.DropdownMenuContent, { align: "end" }, exportOptions.map((option) => (React.createElement(dropdown_menu_1.DropdownMenuItem, { key: option.label, onClick: () => option.onExport(processed, selectedRowData) },
+                        option.icon,
+                        option.label)))))),
+                headerActions)),
+        React.createElement(ActiveFilters_1.ActiveFilters, { filters: filters, columns: columns, onRemove: handleRemoveFilter, onClearAll: () => setFilters([]) }),
+        React.createElement(BulkActionBar_1.BulkActionBar, { selectedCount: selection.length, selectedKeys: selection, selectedRows: selectedRowData, actions: bulkActions, onClear: clearSelection }),
+        React.createElement("div", { className: "flex flex-1 overflow-hidden" },
+            showSidebar && filterSidebar && filterSidebar.position !== "right" && (React.createElement(LeftFilterPane_1.LeftFilterPane, { filters: filterSidebar.filters, onApply: filterSidebar.onApply, isLoading: filterSidebar.isLoading })),
+            React.createElement("div", { ref: scrollRef, role: keyboardEnabled ? "grid" : undefined, "aria-busy": isLoading || undefined, "aria-rowcount": pageData.length || undefined, "aria-colcount": visibleColumns.length + (selectable ? 1 : 0) || undefined, tabIndex: keyboardEnabled ? 0 : undefined, onKeyDown: keyboardEnabled ? keyboard.handleKeyDown : undefined, style: {
+                    maxHeight: typeof maxHeight === "number"
+                        ? `${maxHeight}px`
+                        : maxHeight,
+                }, className: (0, utils_1.cn)("relative flex-1 overflow-auto", keyboardEnabled &&
+                    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset") }, hasError ? (React.createElement(TableErrorState_1.TableErrorState, { error: error, onRetry: onRetry })) : isEmpty ? (emptyState !== null && emptyState !== void 0 ? emptyState : (React.createElement(TableEmptyState_1.TableEmptyState, { title: emptyTitle, description: emptyDescription, hasActiveFilters: hasActiveFilters, onClearFilters: hasActiveFilters ? clearAllFilters : undefined, action: emptyAction }))) : (React.createElement("table", { className: (0, utils_1.cn)("w-full border-collapse text-left", noBorders && "[&_td]:border-0"), style: { tableLayout: "fixed" } },
+                React.createElement(TableHeader_1.TableHeader, { columns: visibleColumns, columnWidths: columnWidths, sortable: sortable, sort: sort, onSortChange: setSort, selectable: selectable, selectionMode: selectionMode, isAllSelected: isAllSelected, isSomeSelected: isSomeSelected, onToggleAll: toggleAll, resizable: columnResizable, resizingColumnId: resize.resizingColumnId, onResizePointerDown: resize.handlePointerDown, sticky: stickyHeader, focusedColIndex: keyboard.active.row === -1
+                        ? keyboard.active.col
+                        : -1, onCellClick: (colIndex) => keyboard.setActive({ row: -1, col: colIndex }) }),
+                React.createElement(TableBody_1.TableBody, { data: pageData, columns: visibleColumns, rowKey: rowKey, columnWidths: columnWidths, selectable: selectable, selectedKeys: selectedKeys, onToggleSelect: (key) => toggleRow(key), onRowClick: onRowClick, rowClassName: rowClassName, striped: true, noBorders: noBorders, focusedRowIndex: keyboard.active.row, focusedColIndex: keyboard.active.col, onCellClick: (rowIndex, colIndex) => keyboard.setActive({
+                        row: rowIndex,
+                        col: colIndex,
+                    }), isLoading: isLoading, loadingRowCount: loadingRowCount, virtual: virtual })))),
+            showSidebar && filterSidebar && filterSidebar.position === "right" && (React.createElement(LeftFilterPane_1.LeftFilterPane, { filters: filterSidebar.filters, onApply: filterSidebar.onApply, isLoading: filterSidebar.isLoading, position: "right" }))),
+        pagination && !hasError && (React.createElement(Pagination_1.Pagination, { pageIndex: pageIndex, pageCount: pageCount, pageSize: pageSize, pageSizeOptions: pageSizeOptions, totalRows: totalRows, onPageChange: (page) => setPage(page), onPageSizeChange: (size) => setPageSize(size) }))));
+}
+Table.displayName = "Table";

package/dist/components-v2/Table/TableProps.d.ts

@@ -0,0 +1,139 @@
+import type * as React from "react";
+export type SortDirection = "asc" | "desc" | null;
+export type FilterOperator = "equals" | "not_equals" | "contains" | "not_contains" | "starts_with" | "ends_with" | "greater_than" | "less_than" | "between" | "is_empty" | "is_not_empty" | "in" | "not_in";
+export type ColumnType = "text" | "number" | "date" | "boolean" | "select" | "custom";
+export type Density = "compact" | "default" | "comfortable";
+export interface ColumnDef<T = unknown> {
+    id: string;
+    header: string;
+    accessorKey?: keyof T;
+    accessorFn?: (row: T) => unknown;
+    cell?: (value: unknown, row: T) => React.ReactNode;
+    type?: ColumnType;
+    sortable?: boolean;
+    filterable?: boolean;
+    filterOptions?: {
+        label: string;
+        value: unknown;
+    }[];
+    width?: number;
+    minWidth?: number;
+    maxWidth?: number;
+    sticky?: "left" | "right";
+    hidden?: boolean;
+    enableHiding?: boolean;
+    enableResizing?: boolean;
+    align?: "left" | "center" | "right";
+    meta?: Record<string, unknown>;
+}
+export interface ActiveFilter {
+    columnId: string;
+    operator: FilterOperator;
+    /** A single value or [from, to] for `between` / array for `in`/`not_in`. */
+    value: unknown;
+}
+export interface SortState {
+    id: string;
+    direction: SortDirection;
+}
+export type RowKey<T> = keyof T | ((row: T) => string | number);
+export interface FilterSidebarConfig {
+    id: string;
+    label: string;
+    type: "select" | "multi-select" | "date-range" | "number-range" | "text";
+    options?: {
+        label: string;
+        value: unknown;
+    }[];
+}
+export interface BulkAction<T = unknown> {
+    label: string;
+    icon?: React.ReactNode;
+    onClick: (selectedKeys: (string | number)[], selectedRows: T[]) => void;
+    variant?: "default" | "destructive";
+    /** When true, shows a confirmation dialog before invoking onClick. */
+    confirm?: boolean | {
+        title: string;
+        description?: string;
+    };
+}
+export interface ExportOption<T = unknown> {
+    label: string;
+    icon?: React.ReactNode;
+    onExport: (data: T[], selectedRows: T[]) => void;
+}
+export interface TablePreferences {
+    storageKey: string;
+}
+export interface PersistedTableState {
+    columnVisibility?: Record<string, boolean>;
+    columnOrder?: string[];
+    columnWidths?: Record<string, number>;
+    density?: Density;
+    pageSize?: number;
+}
+export interface TableProps<T = unknown> {
+    data: T[];
+    columns: ColumnDef<T>[];
+    rowKey: RowKey<T>;
+    selectable?: boolean;
+    selectedRows?: (string | number)[];
+    onSelectionChange?: (selectedKeys: (string | number)[]) => void;
+    selectionMode?: "single" | "multi";
+    onRowClick?: (row: T, event: React.MouseEvent) => void;
+    rowClassName?: (row: T) => string | undefined;
+    sortable?: boolean;
+    defaultSort?: SortState;
+    onSortChange?: (sort: SortState | null) => void;
+    filterable?: boolean;
+    defaultFilters?: ActiveFilter[];
+    onFilterChange?: (filters: ActiveFilter[]) => void;
+    searchable?: boolean;
+    searchPlaceholder?: string;
+    onSearchChange?: (query: string) => void;
+    isServerSearch?: boolean;
+    pagination?: boolean;
+    paginationMode?: "client" | "server";
+    defaultPageSize?: number;
+    pageSizeOptions?: number[];
+    totalCount?: number;
+    onPageChange?: (page: number, pageSize: number) => void;
+    isLoading?: boolean;
+    loadingRowCount?: number;
+    error?: Error | string | null;
+    onRetry?: () => void;
+    emptyState?: React.ReactNode;
+    emptyTitle?: string;
+    emptyDescription?: string;
+    emptyAction?: {
+        label: string;
+        onClick: () => void;
+    };
+    density?: Density;
+    maxHeight?: number | string;
+    virtualScroll?: boolean;
+    /** Defaults to 44 (default density). */
+    rowHeight?: number;
+    /** Threshold for auto-enabling virtual scroll. Default 500. */
+    virtualScrollThreshold?: number;
+    defaultHiddenColumns?: string[];
+    showColumnToggle?: boolean;
+    columnResizable?: boolean;
+    stickyHeader?: boolean;
+    noBorders?: boolean;
+    bulkActions?: BulkAction<T>[];
+    filterSidebar?: {
+        enabled: boolean;
+        position?: "left" | "right";
+        filters: FilterSidebarConfig[];
+        onApply: (filters: Record<string, unknown>) => void;
+        isLoading?: boolean;
+    };
+    filterMode?: "inline" | "sidebar" | "modal";
+    preferences?: TablePreferences;
+    headerActions?: React.ReactNode;
+    exportOptions?: ExportOption<T>[];
+    className?: string;
+    style?: React.CSSProperties;
+}
+export declare const ROW_HEIGHT: Record<Density, number>;

package/dist/components-v2/Table/TableProps.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ROW_HEIGHT = void 0;
+/* Density → row-height in px */
+exports.ROW_HEIGHT = {
+    compact: 32,
+    default: 44,
+    comfortable: 56,
+};