art-bd-ui 1.0.0

package/dist/esm/components/utility/skeleton/skeleton.js

@@ -0,0 +1,11 @@
+import { __rest } from 'tslib';
+import { jsx } from 'react/jsx-runtime';
+import { cn } from '../../../lib/utils.js';
+
+const Skeleton = (_a) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return jsx("div", Object.assign({ "data-slot": "skeleton", className: cn("bg-accent animate-pulse rounded-md", className) }, props));
+};
+Skeleton.displayName = "Skeleton";
+
+export { Skeleton };

package/dist/esm/components/utility/status-controller/status-controller.js

@@ -0,0 +1,10 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Fragment } from 'react';
+
+const Show = ({ when, fallback, children }) => when ? children : jsx(Fragment, { children: fallback });
+const StatusController = ({ loading = false, error = false, empty = false, loadingFallback, errorFallback, emptyFallback, children, }) => {
+    return (jsxs(Fragment, { children: [jsx(Show, { when: loading, children: loadingFallback }), jsx(Show, { when: !loading && error, children: errorFallback }), jsx(Show, { when: !loading && !error && empty, children: emptyFallback }), jsx(Show, { when: !loading && !error && !empty, children: children })] }));
+};
+StatusController.displayName = "StatusController";
+
+export { StatusController };

package/dist/esm/hooks/use-mobile.js

@@ -0,0 +1,19 @@
+"use client";
+import { useState, useEffect } from 'react';
+
+const MOBILE_BREAKPOINT = 768;
+function useIsMobile() {
+    const [isMobile, setIsMobile] = useState(undefined);
+    useEffect(() => {
+        const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+        const onChange = () => {
+            setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+        };
+        mql.addEventListener("change", onChange);
+        setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+        return () => mql.removeEventListener("change", onChange);
+    }, []);
+    return !!isMobile;
+}
+
+export { useIsMobile };

package/dist/esm/hooks/useControlled.js

@@ -0,0 +1,17 @@
+"use client";
+import { useRef, useState, useCallback } from 'react';
+
+const useControlled = (controlledValue, defaultValue) => {
+    const controlledRef = useRef(false);
+    controlledRef.current = controlledValue !== undefined;
+    const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
+    const value = (controlledRef.current ? controlledValue : uncontrolledValue);
+    const setValue = useCallback((nextValue) => {
+        if (!controlledRef.current) {
+            setUncontrolledValue(nextValue);
+        }
+    }, [controlledRef]);
+    return [value, setValue, controlledRef.current];
+};
+
+export { useControlled };

package/dist/esm/hooks/useFirstMountState.js

@@ -0,0 +1,14 @@
+"use client";
+import { useRef } from 'react';
+
+// Read more - https://github.com/streamich/react-use/blob/master/src/useFirstMountState.ts
+const useFirstMountState = () => {
+    const isFirst = useRef(true);
+    if (isFirst.current) {
+        isFirst.current = false;
+        return true;
+    }
+    return isFirst.current;
+};
+
+export { useFirstMountState };

package/dist/esm/hooks/useForkRef.js

@@ -0,0 +1,21 @@
+"use client";
+import { useMemo } from 'react';
+import 'clsx';
+import { assignRef } from '../utils/mergeRefs.js';
+
+function useForkRef(...refs) {
+    return useMemo(() => {
+        if (refs.every((ref) => ref == null)) {
+            return null;
+        }
+        return (instance) => {
+            refs.forEach((ref) => {
+                if (ref) {
+                    assignRef(ref, instance);
+                }
+            });
+        };
+    }, [refs]);
+}
+
+export { useForkRef };

package/dist/esm/hooks/useLatest.js

@@ -0,0 +1,10 @@
+"use client";
+import { useRef } from 'react';
+
+const useLatest = (value) => {
+    const ref = useRef(value);
+    ref.current = value;
+    return ref;
+};
+
+export { useLatest };

package/dist/esm/hooks/usePrevious.js

@@ -0,0 +1,12 @@
+"use client";
+import { useRef, useEffect } from 'react';
+
+const usePrevious = (value) => {
+    const ref = useRef(value);
+    useEffect(() => {
+        ref.current = value;
+    }, [value]);
+    return ref.current;
+};
+
+export { usePrevious };

package/dist/esm/hooks/useScrollState.js

@@ -0,0 +1,37 @@
+"use client";
+import { useState, useMemo, useLayoutEffect } from 'react';
+import throttle from 'lodash/throttle';
+
+const useScrollState = (containerRef) => {
+    const [isScrolledToLeftCorner, setLeftScrollCornerReached] = useState(true);
+    const [isScrolledToRightCorner, setRightScrollCornerReached] = useState(true);
+    const [isScrolledToTopCorner, setTopScrollCornerReached] = useState(true);
+    const [isScrolledToBottomCorner, setBottomScrollCornerReached] = useState(true);
+    const throttledUpdate = useMemo(() => throttle(() => {
+        if (!containerRef.current)
+            return;
+        const { scrollLeft, scrollTop, scrollWidth, scrollHeight, clientWidth, clientHeight } = containerRef.current;
+        setLeftScrollCornerReached(scrollLeft === 0);
+        setRightScrollCornerReached(scrollWidth - (scrollLeft + clientWidth) <= 1);
+        setTopScrollCornerReached(scrollTop === 0);
+        setBottomScrollCornerReached(scrollHeight - (scrollTop + clientHeight) <= 1);
+    }, 150, { trailing: true }), []);
+    useLayoutEffect(() => {
+        const container = containerRef.current;
+        if (!container)
+            return;
+        throttledUpdate();
+        container.addEventListener("scroll", throttledUpdate);
+        return () => {
+            container.removeEventListener("scroll", throttledUpdate);
+        };
+    }, [containerRef]);
+    return {
+        isScrolledToLeftCorner,
+        isScrolledToRightCorner,
+        isScrolledToTopCorner,
+        isScrolledToBottomCorner,
+    };
+};
+
+export { useScrollState };

package/dist/esm/hooks/useStateRef.js

@@ -0,0 +1,10 @@
+"use client";
+import { useState, useCallback } from 'react';
+
+const useStateRef = (defaultValue) => {
+    const [node, setNode] = useState(defaultValue !== null && defaultValue !== void 0 ? defaultValue : null);
+    const setRef = useCallback((newNode) => setNode(newNode), []);
+    return [node, setRef];
+};
+
+export { useStateRef };

package/dist/esm/hooks/useUpdateEffect.js

@@ -0,0 +1,15 @@
+"use client";
+import { useEffect } from 'react';
+import { useFirstMountState } from './useFirstMountState.js';
+
+// Read more -> https://github.com/streamich/react-use/blob/master/src/useUpdateEffect.ts
+const useUpdateEffect = (effect, deps) => {
+    const isFirstMount = useFirstMountState();
+    useEffect(() => {
+        if (!isFirstMount) {
+            return effect();
+        }
+    }, deps);
+};
+
+export { useUpdateEffect };

package/dist/esm/index.js

@@ -0,0 +1,63 @@
+export { Box } from './components/layout/box/box.js';
+export { Flex } from './components/layout/flex/flex.js';
+export { Grid } from './components/layout/grid/grid.js';
+export { Button, buttonVariants } from './components/buttons/button/button.js';
+export { IconButton } from './components/buttons/icon-button/icon-button.js';
+export { Toggle, toggleVariants } from './components/buttons/toggle/toggle.js';
+export { ToggleGroup, ToggleGroupItem } from './components/buttons/toggle-group/toggle-group.js';
+export { Checkbox } from './components/forms/checkbox/checkbox.js';
+export { Input } from './components/forms/input/input.js';
+export { Label } from './components/forms/label/label.js';
+export { RadioGroup, RadioGroupItem } from './components/forms/radio/radio.js';
+export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue } from './components/forms/select/select.js';
+export { Switch } from './components/forms/switch/switch.js';
+export { Textarea } from './components/forms/textarea/textarea.js';
+export { Icon } from './components/media/icon/icon.js';
+export { Avatar, AvatarFallback, AvatarImage } from './components/media/avatar/avatar.js';
+export { AspectRatio } from './components/media/aspect-ratio/aspect-ratio.js';
+export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from './components/popovers/dialog/dialog.js';
+export { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle } from './components/popovers/drawer/drawer.js';
+export { Popover, PopoverAnchor, PopoverContent, PopoverTrigger } from './components/popovers/popover/popover.js';
+export { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle } from './components/popovers/sheet/sheet.js';
+export { Toast, ToastAction, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport } from './components/popovers/toast/toast.js';
+export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from './components/popovers/tooltip/tooltip.js';
+export { Heading } from './components/typography/heading/heading.js';
+export { Text } from './components/typography/text/text.js';
+export { Alert, AlertDescription, AlertTitle } from './components/ui/alert/alert.js';
+export { Badge, badgeVariants } from './components/ui/badge/badge.js';
+export { Calendar } from './components/ui/calendar/calendar.js';
+export { Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut } from './components/ui/command/command.js';
+export { DataTable } from './components/ui/data-table/data-table.js';
+export { DatePicker } from './components/ui/date-picker/date-picker.js';
+export { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger } from './components/ui/dropdown-menu/dropdown-menu.js';
+export { Link } from './components/ui/link/link.js';
+export { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious } from './components/ui/pagination/pagination.js';
+export { Progress } from './components/ui/progress/progress.js';
+export { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, useSidebar } from './components/ui/sidebar/sidebar.js';
+export { Table, TableContainer } from './components/ui/table/table.js';
+export { Tabs, TabsContent, TabsList, TabsTrigger } from './components/ui/tabs/tabs.js';
+export { EmptyState } from './components/utility/empty-state/empty-state.js';
+export { Separator } from './components/utility/separator/separator.js';
+export { Skeleton } from './components/utility/skeleton/skeleton.js';
+export { StatusController } from './components/utility/status-controller/status-controller.js';
+export { useFirstMountState } from './hooks/useFirstMountState.js';
+export { useUpdateEffect } from './hooks/useUpdateEffect.js';
+export { useForkRef } from './hooks/useForkRef.js';
+export { useStateRef } from './hooks/useStateRef.js';
+export { useControlled } from './hooks/useControlled.js';
+export { usePrevious } from './hooks/usePrevious.js';
+export { useLatest } from './hooks/useLatest.js';
+export { useScrollState } from './hooks/useScrollState.js';
+export { chain } from './utils/chain.js';
+export { mergeProps } from './utils/mergeProps.js';
+export { assignRef, mergeRefs } from './utils/mergeRefs.js';
+export { toggle } from './utils/toggle.js';
+export { addIf } from './utils/addIf.js';
+export { DEFAULT_RECT, getBoundingRect } from './utils/getBoundingRect.js';
+export { TableHeader } from './components/ui/table/components/table-header.js';
+export { TableBody } from './components/ui/table/components/table-body.js';
+export { TableFooter } from './components/ui/table/components/table-footer.js';
+export { TableHead } from './components/ui/table/components/table-head.js';
+export { TableRow } from './components/ui/table/components/row.js';
+export { TableCell } from './components/ui/table/components/cell.js';
+export { TableCaption } from './components/ui/table/components/table-caption.js';

package/dist/esm/lib/utils.js

@@ -0,0 +1,13 @@
+import { forwardRef } from 'react';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+function cn(...inputs) {
+    return twMerge(clsx(inputs));
+}
+function forwardRefWithGeneric(render) {
+    // @ts-ignore
+    return forwardRef(render);
+}
+
+export { cn, forwardRefWithGeneric };

package/dist/esm/styles/responsive.js

@@ -0,0 +1,81 @@
+const responsiveProps = {
+    // Display
+    display: "",
+    // Position
+    position: "",
+    // Dimensions
+    width: "w",
+    minWidth: "min-w",
+    maxWidth: "max-w",
+    height: "h",
+    minHeight: "min-h",
+    maxHeight: "max-h",
+    // Padding
+    p: "p",
+    px: "px",
+    py: "py",
+    pt: "pt",
+    pr: "pr",
+    pb: "pb",
+    pl: "pl",
+    // Margin
+    m: "m",
+    mx: "mx",
+    my: "my",
+    mt: "mt",
+    mr: "mr",
+    mb: "mb",
+    ml: "ml",
+    // Gap
+    gap: "gap",
+    gapX: "gap-x",
+    gapY: "gap-y",
+    // Overflow
+    overflow: "overflow",
+    overflowX: "overflow-x",
+    overflowY: "overflow-y",
+    // Grid
+    columns: "grid-cols",
+    rows: "grid-rows",
+    flow: "grid-flow",
+    // Flex
+    direction: "flex",
+    wrap: "flex",
+    // Flex & Grid
+    items: "items",
+    justify: "justify",
+};
+function getResponsiveClass(props) {
+    const classes = [];
+    Object.entries(props).forEach(([prop, value]) => {
+        if (!value)
+            return;
+        if (!(prop in responsiveProps))
+            return;
+        const responsiveValue = typeof value === "object" ? value : { initial: value };
+        for (const [breakpoint, val] of Object.entries(responsiveValue)) {
+            if (!val)
+                continue;
+            const bpPrefix = breakpoint === "initial" ? "" : `${breakpoint}:`;
+            const prefix = responsiveProps[prop] ? `${responsiveProps[prop]}-` : "";
+            classes.push(`${bpPrefix}${prefix}${val}`);
+        }
+    });
+    return classes.join(" ");
+}
+function extractResponsiveProps(props) {
+    const classesProps = {};
+    const restProps = {};
+    for (const key in props) {
+        if (key in responsiveProps) {
+            classesProps[key] = props[key];
+        }
+        else {
+            // @ts-ignore
+            restProps[key] = props[key];
+        }
+    }
+    return { classesProps, restProps };
+}
+
+export { extractResponsiveProps, getResponsiveClass };

package/dist/esm/styles/typography.js

@@ -0,0 +1,21 @@
+const fontWeights = {
+    light: "font-light",
+    regular: "font-normal",
+    medium: "font-medium",
+    bold: "font-bold",
+};
+const textColors = {
+    default: "text-foreground",
+    muted: "text-muted-foreground",
+    primary: "text-primary",
+    secondary: "text-secondary",
+    accent: "text-accent",
+    destructive: "text-destructive",
+};
+const textAlignment = {
+    left: "text-left",
+    center: "text-center",
+    right: "text-right",
+};
+
+export { fontWeights, textAlignment, textColors };

package/dist/esm/utils/addIf.js

@@ -0,0 +1,3 @@
+const addIf = (condition, props, empty = {}) => (condition ? props : empty);
+
+export { addIf };

package/dist/esm/utils/chain.js

@@ -0,0 +1,28 @@
+/**
+ * Creates function that execute callback functions together so that they are invoked in sequence
+ * with the same set of arguments.
+ *
+ * @param {...Function} callbacks - A series of callback functions to chain together.
+ *
+ * @example
+ * const sum = (a, b) => console.log(`${a} + ${b} = ${a + b}`);
+ * const multiply = (a, b) => console.log(`${a} * ${b} = ${a * b}`);
+ * const log = (...args) => console.log(`I received following arguments: ${args.join(', ')}`);
+ *
+ * const chained = chain(sum, multiply, log);
+ * chained(1, 2);   // Logs:
+ *                  // "1 + 2 = 3"
+ *                  // "1 * 2 = 2"
+ *                  // "I received following arguments: 1, 2"
+ */
+function chain(...callbacks) {
+    return (...args) => {
+        for (const callback of callbacks) {
+            if (typeof callback === "function") {
+                callback(...args);
+            }
+        }
+    };
+}
+
+export { chain };

package/dist/esm/utils/getBoundingRect.js

@@ -0,0 +1,16 @@
+const DEFAULT_RECT = {
+    x: 0,
+    y: 0,
+    width: 0,
+    height: 0,
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0,
+};
+const getBoundingRect = (node) => {
+    const rect = node && node.getBoundingClientRect ? node.getBoundingClientRect() : DEFAULT_RECT;
+    return rect;
+};
+
+export { DEFAULT_RECT, getBoundingRect };

package/dist/esm/utils/mergeProps.js

@@ -0,0 +1,40 @@
+import { clsx } from 'clsx';
+import { chain } from './chain.js';
+
+/**
+ * Merges multiple props objects together. Event handlers are chained,
+ * classNames are combined, all other props, the last prop object overrides all previous ones.
+ * @param args - Multiple sets of props to merge together.
+ */
+function mergeProps(...args) {
+    // Start with a base clone of the first argument. This is a lot faster than starting
+    // with an empty object and adding properties as we go.
+    const result = Object.assign({}, args[0]);
+    for (let i = 1; i < args.length; i++) {
+        const props = args[i];
+        for (const key in props) {
+            const a = result[key];
+            const b = props[key];
+            // Chain events
+            if (typeof a === "function" &&
+                typeof b === "function" &&
+                // This is a lot faster than a regex.
+                key[0] === "o" &&
+                key[1] === "n" &&
+                key.charCodeAt(2) >= /* 'A' */ 65 &&
+                key.charCodeAt(2) <= /* 'Z' */ 90) {
+                result[key] = chain(a, b);
+                // Merge classnames, sometimes classNames are empty string which eval to false, so we just need to do a type check
+            }
+            else if ((key === "className" || key === "UNSAFE_className") && typeof a === "string" && typeof b === "string") {
+                result[key] = clsx(a, b);
+            }
+            else {
+                result[key] = b !== undefined ? b : a;
+            }
+        }
+    }
+    return result;
+}
+
+export { mergeProps };

package/dist/esm/utils/mergeRefs.js

@@ -0,0 +1,15 @@
+function assignRef(ref, value) {
+    if (typeof ref === "function") {
+        ref(value);
+    }
+    else if (ref) {
+        ref.current = value;
+    }
+}
+function mergeRefs(...refs) {
+    return (value) => {
+        refs.forEach((ref) => assignRef(ref, value));
+    };
+}
+
+export { assignRef, mergeRefs };

package/dist/esm/utils/toggle.js

@@ -0,0 +1,14 @@
+const removeAtIndex = (arr, index) => {
+    const copy = [...arr];
+    copy.splice(index, 1);
+    return copy;
+};
+const toggle = (arr, item, getValue = (item) => item) => {
+    const index = arr.findIndex((i) => getValue(i) === getValue(item));
+    if (index === -1)
+        return [...arr, item];
+    else
+        return removeAtIndex(arr, index);
+};
+
+export { toggle };