pixelize-design-library 2.3.1-beta.1 → 2.3.1-beta.2

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

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

@@ -1,18 +0,0 @@
-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

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

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

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

@@ -1,139 +0,0 @@
-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

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