art-bd-ui 1.0.0

package/dist/cjs/components/ui/data-table/hooks/useStickyColumns.js

@@ -0,0 +1,98 @@
+'use strict';
+
+var react = require('react');
+var debounce = require('lodash/debounce');
+var fastdom = require('fastdom');
+require('clsx');
+var getBoundingRect = require('../../../../utils/getBoundingRect.js');
+
+function sortByDomNode(nodes, resolveKey = (i) => i) {
+    return nodes.slice().sort((aItem, zItem) => {
+        const a = resolveKey(aItem);
+        const z = resolveKey(zItem);
+        if (a === null || z === null)
+            return 0;
+        const position = a.compareDocumentPosition(z);
+        if (position & Node.DOCUMENT_POSITION_FOLLOWING)
+            return -1;
+        if (position & Node.DOCUMENT_POSITION_PRECEDING)
+            return 1;
+        return 0;
+    });
+}
+const calculateLeftPositions = (cells) => {
+    let currentPosition = 0;
+    cells.forEach((cell) => {
+        const rect = getBoundingRect.getBoundingRect(cell);
+        cell.style.left = `${Math.floor(currentPosition)}px`;
+        currentPosition += rect.width;
+    });
+};
+const calculateRightPositions = (cells) => {
+    let currentPosition = 0;
+    // Process cells from right to left
+    for (let i = cells.length - 1; i >= 0; i--) {
+        const cell = cells[i];
+        const rect = getBoundingRect.getBoundingRect(cell);
+        cell.style.right = `${Math.floor(currentPosition)}px`;
+        currentPosition += rect.width;
+    }
+};
+const useStickyColumns = (tableElement) => {
+    const resizeObserverRef = react.useRef(null);
+    const rafIdRef = react.useRef(null);
+    const updateStickyPositions = react.useCallback(() => {
+        if (!tableElement)
+            return;
+        // Cancel any pending RAF
+        if (rafIdRef.current) {
+            cancelAnimationFrame(rafIdRef.current);
+        }
+        // Schedule the update in the next animation frame
+        rafIdRef.current = requestAnimationFrame(() => {
+            fastdom.measure(() => {
+                // Get all rows
+                const rows = Array.from(tableElement.getElementsByTagName("tr"));
+                rows.forEach((row) => {
+                    // Find sticky cells in this row
+                    const stickyCells = Array.from(row.querySelectorAll("[data-sticky]"));
+                    // Split cells into left and right sticky cells
+                    const leftStickyCells = stickyCells.filter((cell) => cell.getAttribute("data-sticky") === "left");
+                    const rightStickyCells = stickyCells.filter((cell) => cell.getAttribute("data-sticky") === "right");
+                    // Sort cells in DOM order within the row
+                    const sortedLeftCells = sortByDomNode(leftStickyCells);
+                    const sortedRightCells = sortByDomNode(rightStickyCells);
+                    fastdom.mutate(() => {
+                        calculateLeftPositions(sortedLeftCells);
+                        calculateRightPositions(sortedRightCells);
+                    });
+                });
+            });
+        });
+    }, [tableElement]);
+    react.useEffect(() => {
+        if (!tableElement)
+            return;
+        // Initial calculation
+        updateStickyPositions();
+        // Create debounced resize handler with trailing event
+        const debouncedResizeHandler = debounce(updateStickyPositions, 150, {
+            trailing: true,
+        });
+        // Create and configure ResizeObserver
+        resizeObserverRef.current = new ResizeObserver(debouncedResizeHandler);
+        resizeObserverRef.current.observe(tableElement);
+        return () => {
+            if (rafIdRef.current) {
+                cancelAnimationFrame(rafIdRef.current);
+            }
+            if (resizeObserverRef.current) {
+                resizeObserverRef.current.disconnect();
+            }
+            // Cancel any pending debounced calls
+            debouncedResizeHandler.cancel();
+        };
+    }, [tableElement, updateStickyPositions]);
+};
+
+exports.useStickyColumns = useStickyColumns;

package/dist/cjs/components/ui/data-table/utils.js

@@ -0,0 +1,26 @@
+'use strict';
+
+const convertHeadersToRows = (headers, level = 0, result = []) => {
+    headers.forEach((header) => {
+        if (result[level]) {
+            result[level].push(header);
+        }
+        else {
+            result[level] = [header];
+        }
+        if (header.children) {
+            convertHeadersToRows(header.children, level + 1, result);
+        }
+    });
+    return result;
+};
+const flattenColumns = (columns) => {
+    return columns.flatMap((column) => [column, ...(column.children ? flattenColumns(column.children) : [])]);
+};
+const collectColumnsWithoutChildren = (columns) => {
+    return flattenColumns(columns).filter((column) => !column.children);
+};
+
+exports.collectColumnsWithoutChildren = collectColumnsWithoutChildren;
+exports.convertHeadersToRows = convertHeadersToRows;
+exports.flattenColumns = flattenColumns;

package/dist/cjs/components/ui/date-picker/date-picker.js

@@ -0,0 +1,15 @@
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var dateFns = require('date-fns');
+var utils = require('../../../lib/utils.js');
+var button = require('../../buttons/button/button.js');
+var calendar = require('../calendar/calendar.js');
+var popover = require('../../popovers/popover/popover.js');
+
+const DatePicker = ({ date, onChange, placeholder = "Pick a date" }) => {
+    return (jsxRuntime.jsxs(popover.Popover, { children: [jsxRuntime.jsx(popover.PopoverTrigger, { asChild: true, children: jsxRuntime.jsx(button.Button, { variant: "outline", leftIcon: "calendar", className: utils.cn("w-[240px] justify-start text-left font-normal", !date && "text-muted-foreground"), children: date ? dateFns.format(date, "PPP") : jsxRuntime.jsx("span", { children: placeholder }) }) }), jsxRuntime.jsx(popover.PopoverContent, { className: "w-auto p-0", align: "start", children: jsxRuntime.jsx(calendar.Calendar, { mode: "single", selected: date, onSelect: onChange, autoFocus: true }) })] }));
+};
+
+exports.DatePicker = DatePicker;

package/dist/cjs/components/ui/dropdown-menu/dropdown-menu.js

@@ -0,0 +1,100 @@
+"use client";
+'use strict';
+
+var tslib = require('tslib');
+var jsxRuntime = require('react/jsx-runtime');
+var reactDropdownMenu = require('@radix-ui/react-dropdown-menu');
+var utils = require('../../../lib/utils.js');
+var icon = require('../../media/icon/icon.js');
+
+const DropdownMenu = (_a) => {
+    var props = tslib.__rest(_a, []);
+    return jsxRuntime.jsx(reactDropdownMenu.Root, Object.assign({ "data-slot": "dropdown-menu" }, props));
+};
+DropdownMenu.displayName = "DropdownMenu";
+const DropdownMenuPortal = (_a) => {
+    var props = tslib.__rest(_a, []);
+    return (jsxRuntime.jsx(reactDropdownMenu.Portal, Object.assign({ "data-slot": "dropdown-menu-portal" }, props)));
+};
+DropdownMenuPortal.displayName = "DropdownMenuPortal";
+const DropdownMenuTrigger = (_a) => {
+    var props = tslib.__rest(_a, []);
+    return (jsxRuntime.jsx(reactDropdownMenu.Trigger, Object.assign({ "data-slot": "dropdown-menu-trigger" }, props)));
+};
+DropdownMenuTrigger.displayName = "DropdownMenuTrigger";
+const DropdownMenuContent = (_a) => {
+    var { className, sideOffset = 4 } = _a, props = tslib.__rest(_a, ["className", "sideOffset"]);
+    return (jsxRuntime.jsx(reactDropdownMenu.Portal, { children: jsxRuntime.jsx(reactDropdownMenu.Content, Object.assign({ "data-slot": "dropdown-menu-content", sideOffset: sideOffset, className: utils.cn("bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md", className) }, props)) }));
+};
+DropdownMenuContent.displayName = "DropdownMenuContent";
+const DropdownMenuGroup = (_a) => {
+    var props = tslib.__rest(_a, []);
+    return (jsxRuntime.jsx(reactDropdownMenu.Group, Object.assign({ "data-slot": "dropdown-menu-group" }, props)));
+};
+DropdownMenuGroup.displayName = "DropdownMenuGroup";
+const DropdownMenuItem = (_a) => {
+    var { className, inset, variant = "default" } = _a, props = tslib.__rest(_a, ["className", "inset", "variant"]);
+    return (jsxRuntime.jsx(reactDropdownMenu.Item, Object.assign({ "data-slot": "dropdown-menu-item", "data-inset": inset, "data-variant": variant, className: utils.cn("focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className) }, props)));
+};
+DropdownMenuItem.displayName = "DropdownMenuItem";
+const DropdownMenuCheckboxItem = (_a) => {
+    var { className, children, checked } = _a, props = tslib.__rest(_a, ["className", "children", "checked"]);
+    return (jsxRuntime.jsxs(reactDropdownMenu.CheckboxItem, Object.assign({ "data-slot": "dropdown-menu-checkbox-item", className: utils.cn("focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className), checked: checked }, props, { children: [jsxRuntime.jsx("span", { className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center", children: jsxRuntime.jsx(reactDropdownMenu.ItemIndicator, { children: jsxRuntime.jsx(icon.Icon, { name: "check", className: "size-4" }) }) }), children] })));
+};
+DropdownMenuCheckboxItem.displayName = "DropdownMenuCheckboxItem";
+const DropdownMenuRadioGroup = (_a) => {
+    var props = tslib.__rest(_a, []);
+    return (jsxRuntime.jsx(reactDropdownMenu.RadioGroup, Object.assign({ "data-slot": "dropdown-menu-radio-group" }, props)));
+};
+DropdownMenuRadioGroup.displayName = "DropdownMenuRadioGroup";
+const DropdownMenuRadioItem = (_a) => {
+    var { className, children } = _a, props = tslib.__rest(_a, ["className", "children"]);
+    return (jsxRuntime.jsxs(reactDropdownMenu.RadioItem, Object.assign({ "data-slot": "dropdown-menu-radio-item", className: utils.cn("focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className) }, props, { children: [jsxRuntime.jsx("span", { className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center", children: jsxRuntime.jsx(reactDropdownMenu.ItemIndicator, { children: jsxRuntime.jsx(icon.Icon, { name: "circle", className: "size-2 fill-current" }) }) }), children] })));
+};
+DropdownMenuRadioItem.displayName = "DropdownMenuRadioItem";
+const DropdownMenuLabel = (_a) => {
+    var { className, inset } = _a, props = tslib.__rest(_a, ["className", "inset"]);
+    return (jsxRuntime.jsx(reactDropdownMenu.Label, Object.assign({ "data-slot": "dropdown-menu-label", "data-inset": inset, className: utils.cn("px-2 py-1.5 text-sm font-medium data-[inset]:pl-8", className) }, props)));
+};
+DropdownMenuLabel.displayName = "DropdownMenuLabel";
+const DropdownMenuSeparator = (_a) => {
+    var { className } = _a, props = tslib.__rest(_a, ["className"]);
+    return (jsxRuntime.jsx(reactDropdownMenu.Separator, Object.assign({ "data-slot": "dropdown-menu-separator", className: utils.cn("bg-border -mx-1 my-1 h-px", className) }, props)));
+};
+DropdownMenuSeparator.displayName = "DropdownMenuSeparator";
+const DropdownMenuShortcut = (_a) => {
+    var { className } = _a, props = tslib.__rest(_a, ["className"]);
+    return (jsxRuntime.jsx("span", Object.assign({ "data-slot": "dropdown-menu-shortcut", className: utils.cn("text-muted-foreground ml-auto text-xs tracking-widest", className) }, props)));
+};
+DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
+const DropdownMenuSub = (_a) => {
+    var props = tslib.__rest(_a, []);
+    return jsxRuntime.jsx(reactDropdownMenu.Sub, Object.assign({ "data-slot": "dropdown-menu-sub" }, props));
+};
+DropdownMenuSub.displayName = "DropdownMenuSub";
+const DropdownMenuSubTrigger = (_a) => {
+    var { className, inset, children } = _a, props = tslib.__rest(_a, ["className", "inset", "children"]);
+    return (jsxRuntime.jsxs(reactDropdownMenu.SubTrigger, Object.assign({ "data-slot": "dropdown-menu-sub-trigger", "data-inset": inset, className: utils.cn("focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8", className) }, props, { children: [children, jsxRuntime.jsx(icon.Icon, { name: "chevron-right", className: "ml-auto size-4" })] })));
+};
+DropdownMenuSubTrigger.displayName = "DropdownMenuSubTrigger";
+const DropdownMenuSubContent = (_a) => {
+    var { className } = _a, props = tslib.__rest(_a, ["className"]);
+    return (jsxRuntime.jsx(reactDropdownMenu.SubContent, Object.assign({ "data-slot": "dropdown-menu-sub-content", className: utils.cn("bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg", className) }, props)));
+};
+DropdownMenuSubContent.displayName = "DropdownMenuSubContent";
+
+exports.DropdownMenu = DropdownMenu;
+exports.DropdownMenuCheckboxItem = DropdownMenuCheckboxItem;
+exports.DropdownMenuContent = DropdownMenuContent;
+exports.DropdownMenuGroup = DropdownMenuGroup;
+exports.DropdownMenuItem = DropdownMenuItem;
+exports.DropdownMenuLabel = DropdownMenuLabel;
+exports.DropdownMenuPortal = DropdownMenuPortal;
+exports.DropdownMenuRadioGroup = DropdownMenuRadioGroup;
+exports.DropdownMenuRadioItem = DropdownMenuRadioItem;
+exports.DropdownMenuSeparator = DropdownMenuSeparator;
+exports.DropdownMenuShortcut = DropdownMenuShortcut;
+exports.DropdownMenuSub = DropdownMenuSub;
+exports.DropdownMenuSubContent = DropdownMenuSubContent;
+exports.DropdownMenuSubTrigger = DropdownMenuSubTrigger;
+exports.DropdownMenuTrigger = DropdownMenuTrigger;

package/dist/cjs/components/ui/icon/icon.js

@@ -0,0 +1,27 @@
+'use strict';
+
+var tslib = require('tslib');
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var dynamic = require('lucide-react/dynamic');
+var classVarianceAuthority = require('class-variance-authority');
+var utils = require('../../../lib/utils.js');
+
+const iconVariants = classVarianceAuthority.cva("", {
+    variants: {
+        disabled: {
+            true: "text-muted-foreground cursor-not-allowed",
+            false: "",
+        },
+    },
+    defaultVariants: {
+        disabled: false,
+    },
+});
+const Icon = react.forwardRef((_a, ref) => {
+    var { color, size = 24, disabled = false, className } = _a, rest = tslib.__rest(_a, ["color", "size", "disabled", "className"]);
+    return (jsxRuntime.jsx(dynamic.DynamicIcon, Object.assign({ ref: ref, color: color, "aria-disabled": disabled, size: size, className: utils.cn(iconVariants({ disabled }), className) }, rest)));
+});
+Icon.displayName = "Icon";
+
+exports.Icon = Icon;

package/dist/cjs/components/ui/link/link.js

@@ -0,0 +1,32 @@
+'use strict';
+
+var tslib = require('tslib');
+var jsxRuntime = require('react/jsx-runtime');
+var classVarianceAuthority = require('class-variance-authority');
+var reactSlot = require('@radix-ui/react-slot');
+var utils = require('../../../lib/utils.js');
+
+const linkVariants = classVarianceAuthority.cva([
+    "text-primary whitespace-nowrap text-sm font-medium underline-offset-4",
+    // Focus Styling
+    "outline-none focus-visible:underline",
+], {
+    variants: {
+        underline: {
+            hover: "hover:underline",
+            always: "underline",
+            none: "no-underline",
+        },
+    },
+    defaultVariants: {
+        underline: "hover",
+    },
+});
+const Link = utils.forwardRefWithGeneric(function Link(_a, ref) {
+    var { underline, tagName, as, className, children } = _a, props = tslib.__rest(_a, ["underline", "tagName", "as", "className", "children"]);
+    const TagName = tagName || "a";
+    const Container = as || reactSlot.Slot;
+    return (jsxRuntime.jsx(Container, Object.assign({ ref: ref, asChild: true, "data-slot": "icon", className: utils.cn(linkVariants({ underline }), className) }, props, { children: jsxRuntime.jsx(TagName, { children: children }) })));
+});
+
+exports.Link = Link;

package/dist/cjs/components/ui/pagination/pagination.js

@@ -0,0 +1,51 @@
+'use strict';
+
+var tslib = require('tslib');
+var jsxRuntime = require('react/jsx-runtime');
+var utils = require('../../../lib/utils.js');
+var button = require('../../buttons/button/button.js');
+var icon = require('../../media/icon/icon.js');
+
+const Pagination = (_a) => {
+    var { className } = _a, props = tslib.__rest(_a, ["className"]);
+    return (jsxRuntime.jsx("nav", Object.assign({ role: "navigation", "aria-label": "pagination", "data-slot": "pagination", className: utils.cn("mx-auto flex w-full justify-center", className) }, props)));
+};
+Pagination.displayName = "Pagination";
+const PaginationContent = (_a) => {
+    var { className } = _a, props = tslib.__rest(_a, ["className"]);
+    return jsxRuntime.jsx("ul", Object.assign({ "data-slot": "pagination-content", className: utils.cn("flex flex-row items-center gap-1", className) }, props));
+};
+PaginationContent.displayName = "PaginationContent";
+const PaginationItem = (_a) => {
+    var props = tslib.__rest(_a, []);
+    return jsxRuntime.jsx("li", Object.assign({ "data-slot": "pagination-item" }, props));
+};
+PaginationItem.displayName = "PaginationItem";
+const PaginationLink = (_a) => {
+    var { isActive, size = "icon" } = _a, props = tslib.__rest(_a, ["isActive", "size"]);
+    return (jsxRuntime.jsx(button.Button, { asChild: true, variant: isActive ? "outline" : "ghost", size: size, children: jsxRuntime.jsx("a", Object.assign({ "aria-current": isActive ? "page" : undefined, "data-slot": "pagination-link", "data-active": isActive }, props)) }));
+};
+PaginationLink.displayName = "PaginationLink";
+const PaginationPrevious = (_a) => {
+    var { className } = _a, props = tslib.__rest(_a, ["className"]);
+    return (jsxRuntime.jsxs(PaginationLink, Object.assign({ "aria-label": "Go to previous page", size: "default", className: utils.cn("gap-1 px-2.5 sm:pl-2.5", className) }, props, { children: [jsxRuntime.jsx(icon.Icon, { name: "chevron-left" }), jsxRuntime.jsx("span", { className: "hidden sm:block", children: "Previous" })] })));
+};
+PaginationPrevious.displayName = "PaginationPrevious";
+const PaginationNext = (_a) => {
+    var { className } = _a, props = tslib.__rest(_a, ["className"]);
+    return (jsxRuntime.jsxs(PaginationLink, Object.assign({ "aria-label": "Go to next page", size: "default", className: utils.cn("gap-1 px-2.5 sm:pr-2.5", className) }, props, { children: [jsxRuntime.jsx("span", { className: "hidden sm:block", children: "Next" }), jsxRuntime.jsx(icon.Icon, { name: "chevron-right" })] })));
+};
+PaginationNext.displayName = "PaginationNext";
+const PaginationEllipsis = (_a) => {
+    var { className } = _a, props = tslib.__rest(_a, ["className"]);
+    return (jsxRuntime.jsxs("span", Object.assign({ "aria-hidden": true, "data-slot": "pagination-ellipsis", className: utils.cn("flex size-9 items-center justify-center", className) }, props, { children: [jsxRuntime.jsx(icon.Icon, { name: "more-horizontal", className: "size-4" }), jsxRuntime.jsx("span", { className: "sr-only", children: "More pages" })] })));
+};
+PaginationEllipsis.displayName = "PaginationEllipsis";
+
+exports.Pagination = Pagination;
+exports.PaginationContent = PaginationContent;
+exports.PaginationEllipsis = PaginationEllipsis;
+exports.PaginationItem = PaginationItem;
+exports.PaginationLink = PaginationLink;
+exports.PaginationNext = PaginationNext;
+exports.PaginationPrevious = PaginationPrevious;

package/dist/cjs/components/ui/progress/progress.js

@@ -0,0 +1,13 @@
+'use strict';
+
+var tslib = require('tslib');
+var jsxRuntime = require('react/jsx-runtime');
+var reactProgress = require('@radix-ui/react-progress');
+var utils = require('../../../lib/utils.js');
+
+const Progress = (_a) => {
+    var { className, value } = _a, props = tslib.__rest(_a, ["className", "value"]);
+    return (jsxRuntime.jsx(reactProgress.Root, Object.assign({ "data-slot": "progress", className: utils.cn("bg-primary/20 relative h-2 w-full overflow-hidden rounded-full", className) }, props, { children: jsxRuntime.jsx(reactProgress.Indicator, { "data-slot": "progress-indicator", className: "bg-primary h-full w-full flex-1 transition-all", style: { transform: `translateX(-${100 - (value || 0)}%)` } }) })));
+};
+
+exports.Progress = Progress;