art-bd-ui 1.0.0

package/dist/cjs/utils/toggle.js

@@ -0,0 +1,16 @@
+'use strict';
+
+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);
+};
+
+exports.toggle = toggle;

package/dist/esm/components/buttons/button/button.js

@@ -0,0 +1,40 @@
+import { __rest } from 'tslib';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Slot, Slottable } from '@radix-ui/react-slot';
+import { cva } from 'class-variance-authority';
+import { cn } from '../../../lib/utils.js';
+import { Icon } from '../../media/icon/icon.js';
+
+const buttonVariants = cva("inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive", {
+    variants: {
+        variant: {
+            default: "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
+            destructive: "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+            outline: "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+            secondary: "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
+            ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+            link: "text-primary underline-offset-4 hover:underline",
+        },
+        size: {
+            default: "h-9 px-4 py-2 has-[>svg]:px-3",
+            sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+            lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+            icon: "size-9",
+        },
+    },
+    defaultVariants: {
+        variant: "default",
+        size: "default",
+    },
+});
+const Button = forwardRef((_a, ref) => {
+    var { className, variant, size, asChild = false, loading, children, leftIcon, rightIcon } = _a, props = __rest(_a, ["className", "variant", "size", "asChild", "loading", "children", "leftIcon", "rightIcon"]);
+    const Comp = asChild ? Slot : "button";
+    const leftElement = loading ? (jsx(Icon, { name: "loader-2", className: "animate-spin" })) : (leftIcon && jsx(Icon, { name: leftIcon }));
+    const rightElement = rightIcon && jsx(Icon, { name: rightIcon });
+    return (jsxs(Comp, Object.assign({ ref: ref, "data-slot": "button", className: cn(buttonVariants({ variant, size }), className) }, props, { children: [leftElement, jsx(Slottable, { children: children }), rightElement] })));
+});
+Button.displayName = "Button";
+
+export { Button, buttonVariants };

package/dist/esm/components/buttons/icon-button/icon-button.js

@@ -0,0 +1,31 @@
+"use client";
+import { __rest } from 'tslib';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { cva } from 'class-variance-authority';
+import { cn } from '../../../lib/utils.js';
+import { Icon } from '../../media/icon/icon.js';
+import { Button } from '../button/button.js';
+import { Tooltip, TooltipTrigger, TooltipContent } from '../../popovers/tooltip/tooltip.js';
+
+const iconButtonVariants = cva("", {
+    variants: {
+        radius: {
+            none: "rounded-none",
+            small: "rounded-sm",
+            medium: "rounded-md",
+            large: "rounded-lg",
+            full: "rounded-full",
+        },
+    },
+    defaultVariants: {
+        radius: "medium",
+    },
+});
+const IconButton = forwardRef((_a, ref) => {
+    var { className, variant, radius, loading, icon, tooltip } = _a, props = __rest(_a, ["className", "variant", "radius", "loading", "icon", "tooltip"]);
+    return (jsxs(Tooltip, { children: [jsx(TooltipTrigger, { asChild: true, children: jsx(Button, Object.assign({ ref: ref, "data-slot": "icon-button", variant: variant, size: "icon", loading: loading, className: cn(iconButtonVariants({ radius }), className) }, props, { children: !loading && jsx(Icon, { name: icon }) })) }), jsx(TooltipContent, { sideOffset: 0, arrow: true, children: tooltip })] }));
+});
+IconButton.displayName = "IconButton";
+
+export { IconButton };

package/dist/esm/components/buttons/toggle/toggle.js

@@ -0,0 +1,31 @@
+"use client";
+import { __rest } from 'tslib';
+import { jsx } from 'react/jsx-runtime';
+import { Root } from '@radix-ui/react-toggle';
+import { cva } from 'class-variance-authority';
+import { cn } from '../../../lib/utils.js';
+
+const toggleVariants = cva("inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap", {
+    variants: {
+        variant: {
+            default: "bg-transparent",
+            outline: "border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground",
+        },
+        size: {
+            default: "h-9 px-2 min-w-9",
+            sm: "h-8 px-1.5 min-w-8",
+            lg: "h-10 px-2.5 min-w-10",
+        },
+    },
+    defaultVariants: {
+        variant: "default",
+        size: "default",
+    },
+});
+const Toggle = (_a) => {
+    var { className, variant, size } = _a, props = __rest(_a, ["className", "variant", "size"]);
+    return jsx(Root, Object.assign({ "data-slot": "toggle", className: cn(toggleVariants({ variant, size }), className) }, props));
+};
+Toggle.displayName = "Toggle";
+
+export { Toggle, toggleVariants };

package/dist/esm/components/buttons/toggle-group/toggle-group.js

@@ -0,0 +1,28 @@
+"use client";
+import { __rest } from 'tslib';
+import { jsx } from 'react/jsx-runtime';
+import { createContext, useContext } from 'react';
+import { Root, Item } from '@radix-ui/react-toggle-group';
+import { cn } from '../../../lib/utils.js';
+import { toggleVariants } from '../toggle/toggle.js';
+
+const ToggleGroupContext = createContext({
+    size: "default",
+    variant: "default",
+});
+const ToggleGroup = (_a) => {
+    var { className, variant, size, children } = _a, props = __rest(_a, ["className", "variant", "size", "children"]);
+    return (jsx(Root, Object.assign({ "data-slot": "toggle-group", "data-variant": variant, "data-size": size, className: cn("group/toggle-group flex w-fit items-center rounded-md data-[variant=outline]:shadow-xs", className) }, props, { children: jsx(ToggleGroupContext.Provider, { value: { variant, size }, children: children }) })));
+};
+ToggleGroup.displayName = "ToggleGroup";
+const ToggleGroupItem = (_a) => {
+    var { className, children, variant, size } = _a, props = __rest(_a, ["className", "children", "variant", "size"]);
+    const context = useContext(ToggleGroupContext);
+    return (jsx(Item, Object.assign({ "data-slot": "toggle-group-item", "data-variant": context.variant || variant, "data-size": context.size || size, className: cn(toggleVariants({
+            variant: context.variant || variant,
+            size: context.size || size,
+        }), "min-w-0 flex-1 shrink-0 rounded-none shadow-none first:rounded-l-md last:rounded-r-md", "focus:z-10 focus-visible:z-10", "data-[variant=outline]:border-l-0 data-[variant=outline]:first:border-l", className) }, props, { children: children })));
+};
+ToggleGroupItem.displayName = "ToggleGroupItem";
+
+export { ToggleGroup, ToggleGroupItem };

package/dist/esm/components/forms/checkbox/checkbox.js

@@ -0,0 +1,50 @@
+import { __rest } from 'tslib';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Root, Indicator } from '@radix-ui/react-checkbox';
+import { cva } from 'class-variance-authority';
+import { cn } from '../../../lib/utils.js';
+import { Icon } from '../../media/icon/icon.js';
+
+const checkboxVariants = cva([
+    "peer shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none",
+    "border-input dark:bg-input/30",
+    "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+    "disabled:cursor-not-allowed disabled:opacity-50",
+    "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+], {
+    variants: {
+        size: {
+            default: "size-4",
+            sm: "size-3.5",
+            lg: "size-5",
+        },
+    },
+    defaultVariants: {
+        size: "default",
+    },
+});
+const checkboxIndicatorVariants = cva(["flex items-center justify-center text-current transition-none"], {
+    variants: {
+        size: {
+            default: "size-3.5",
+            sm: "size-3",
+            lg: "size-4",
+        },
+    },
+    defaultVariants: {
+        size: "default",
+    },
+});
+const Checkbox = forwardRef((_a, ref) => {
+    var { className, checked, indeterminate = false, size } = _a, props = __rest(_a, ["className", "checked", "indeterminate", "size"]);
+    return (jsx(Root, Object.assign({ ref: ref, "data-slot": "checkbox", checked: checked, className: cn(checkboxVariants({ size }), [
+            "data-[state=checked]:bg-primary",
+            "data-[state=checked]:text-primary-foreground",
+            "dark:data-[state=checked]:bg-primary",
+            "data-[state=checked]:border-primary",
+        ], className) }, props, { children: jsx(Indicator, { "data-slot": "checkbox-indicator", className: cn(checkboxIndicatorVariants({ size })), children: indeterminate ? (jsx(Icon, { name: "minus", size: 16 })) : (checked && jsx(Icon, { name: "check", size: 16, className: cn(checkboxIndicatorVariants({ size })) })) }) })));
+});
+Checkbox.displayName = "Checkbox";
+
+export { Checkbox };

package/dist/esm/components/forms/input/input.js

@@ -0,0 +1,36 @@
+import { __rest } from 'tslib';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { cva } from 'class-variance-authority';
+import { cn } from '../../../lib/utils.js';
+
+const inputVariants = cva([
+    "flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs",
+    "transition-[color,box-shadow] outline-none",
+    "border-input dark:bg-input/30",
+    "placeholder:text-muted-foreground",
+    "selection:bg-primary selection:text-primary-foreground",
+    "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
+    "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+    "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+    "file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground",
+    "md:text-sm",
+], {
+    variants: {
+        size: {
+            default: "h-9 px-3 py-1",
+            sm: "h-8 px-2.5 py-0.5 text-sm",
+            lg: "h-10 px-4 py-2 text-base",
+        },
+    },
+    defaultVariants: {
+        size: "default",
+    },
+});
+const Input = forwardRef((_a, ref) => {
+    var { className, type, size } = _a, props = __rest(_a, ["className", "type", "size"]);
+    return (jsx("input", Object.assign({ ref: ref, type: type, "data-slot": "input", className: cn(inputVariants({ size }), className) }, props)));
+});
+Input.displayName = "Input";
+
+export { Input };

package/dist/esm/components/forms/label/label.js

@@ -0,0 +1,36 @@
+import { __rest } from 'tslib';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Root } from '@radix-ui/react-label';
+import { cva } from 'class-variance-authority';
+import { cn } from '../../../lib/utils.js';
+
+const labelVariants = cva([
+    "flex items-center gap-2 text-sm leading-none font-medium select-none",
+    "group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50",
+    "peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+], {
+    variants: {
+        size: {
+            default: "text-sm",
+            sm: "text-xs",
+            lg: "text-base",
+        },
+        weight: {
+            default: "font-medium",
+            light: "font-normal",
+            bold: "font-semibold",
+        },
+    },
+    defaultVariants: {
+        size: "default",
+        weight: "default",
+    },
+});
+const Label = forwardRef((_a, ref) => {
+    var { className, size, weight } = _a, props = __rest(_a, ["className", "size", "weight"]);
+    return jsx(Root, Object.assign({ ref: ref, "data-slot": "label", className: cn(labelVariants({ size, weight }), className) }, props));
+});
+Label.displayName = "Label";
+
+export { Label };

package/dist/esm/components/forms/radio/radio.js

@@ -0,0 +1,19 @@
+"use client";
+import { __rest } from 'tslib';
+import { jsx } from 'react/jsx-runtime';
+import { Root, Item, Indicator } from '@radix-ui/react-radio-group';
+import { cn } from '../../../lib/utils.js';
+import { Icon } from '../../media/icon/icon.js';
+
+const RadioGroup = (_a) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return jsx(Root, Object.assign({ "data-slot": "radio-group", className: cn("grid gap-3", className) }, props));
+};
+RadioGroup.displayName = "RadioGroup";
+const RadioGroupItem = (_a) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (jsx(Item, Object.assign({ "data-slot": "radio-group-item", className: cn("border-input text-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 aspect-square size-4 shrink-0 rounded-full border shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50", className) }, props, { children: jsx(Indicator, { "data-slot": "radio-group-indicator", className: "relative flex items-center justify-center", children: jsx(Icon, { name: "circle", className: "fill-primary absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2" }) }) })));
+};
+RadioGroupItem.displayName = "RadioGroupItem";
+
+export { RadioGroup, RadioGroupItem };

package/dist/esm/components/forms/select/select.js

@@ -0,0 +1,61 @@
+"use client";
+import { __rest } from 'tslib';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Root, Portal, Content, Viewport, Group, Item, ItemIndicator, ItemText, Label, ScrollDownButton, ScrollUpButton, Separator, Trigger, Icon as Icon$1, Value } from '@radix-ui/react-select';
+import { cn } from '../../../lib/utils.js';
+import { Icon } from '../../media/icon/icon.js';
+
+const Select = (_a) => {
+    var props = __rest(_a, []);
+    return jsx(Root, Object.assign({ "data-slot": "select" }, props));
+};
+Select.displayName = "Select";
+const SelectGroup = (_a) => {
+    var props = __rest(_a, []);
+    return jsx(Group, Object.assign({ "data-slot": "select-group" }, props));
+};
+SelectGroup.displayName = "SelectGroup";
+const SelectValue = (_a) => {
+    var props = __rest(_a, []);
+    return jsx(Value, Object.assign({ "data-slot": "select-value" }, props));
+};
+SelectValue.displayName = "SelectValue";
+const SelectTrigger = (_a) => {
+    var { className, size = "default", children } = _a, props = __rest(_a, ["className", "size", "children"]);
+    return (jsxs(Trigger, Object.assign({ "data-slot": "select-trigger", "data-size": size, className: cn("border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className) }, props, { children: [children, jsx(Icon$1, { asChild: true, children: jsx(Icon, { name: "chevron-down", className: "size-4 opacity-50" }) })] })));
+};
+SelectTrigger.displayName = "SelectTrigger";
+const SelectScrollUpButton = (_a) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (jsx(ScrollUpButton, Object.assign({ "data-slot": "select-scroll-up-button", className: cn("flex cursor-default items-center justify-center py-1", className) }, props, { children: jsx(Icon, { name: "chevron-up", className: "size-4" }) })));
+};
+SelectScrollUpButton.displayName = "SelectScrollUpButton";
+const SelectScrollDownButton = (_a) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (jsx(ScrollDownButton, Object.assign({ "data-slot": "select-scroll-down-button", className: cn("flex cursor-default items-center justify-center py-1", className) }, props, { children: jsx(Icon, { name: "chevron-down", className: "size-4" }) })));
+};
+SelectScrollDownButton.displayName = "SelectScrollDownButton";
+const SelectContent = (_a) => {
+    var { className, children, position = "popper" } = _a, props = __rest(_a, ["className", "children", "position"]);
+    return (jsx(Portal, { children: jsxs(Content, Object.assign({ "data-slot": "select-content", className: 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 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md", position === "popper" &&
+                "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1", className), position: position }, props, { children: [jsx(SelectScrollUpButton, {}), jsx(Viewport, { className: cn("p-1", position === "popper" &&
+                        "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1"), children: children }), jsx(SelectScrollDownButton, {})] })) }));
+};
+SelectContent.displayName = "SelectContent";
+const SelectLabel = (_a) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (jsx(Label, Object.assign({ "data-slot": "select-label", className: cn("text-muted-foreground px-2 py-1.5 text-xs", className) }, props)));
+};
+SelectLabel.displayName = "SelectLabel";
+const SelectItem = (_a) => {
+    var { className, children } = _a, props = __rest(_a, ["className", "children"]);
+    return (jsxs(Item, Object.assign({ "data-slot": "select-item", className: cn("focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 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 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2", className) }, props, { children: [jsx("span", { className: "absolute right-2 flex size-3.5 items-center justify-center", children: jsx(ItemIndicator, { children: jsx(Icon, { name: "check", className: "size-4" }) }) }), jsx(ItemText, { children: children })] })));
+};
+SelectItem.displayName = "SelectItem";
+const SelectSeparator = (_a) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (jsx(Separator, Object.assign({ "data-slot": "select-separator", className: cn("bg-border pointer-events-none -mx-1 my-1 h-px", className) }, props)));
+};
+SelectSeparator.displayName = "SelectSeparator";
+
+export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue };

package/dist/esm/components/forms/switch/switch.js

@@ -0,0 +1,49 @@
+import { __rest } from 'tslib';
+import { jsx } from 'react/jsx-runtime';
+import { Root, Thumb } from '@radix-ui/react-switch';
+import { cva } from 'class-variance-authority';
+import { cn } from '../../../lib/utils.js';
+
+const switchVariants = cva([
+    "peer inline-flex shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none",
+    "disabled:cursor-not-allowed disabled:opacity-50",
+    "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+    "data-[state=checked]:bg-primary",
+    "data-[state=unchecked]:bg-input",
+    "dark:data-[state=unchecked]:bg-input/80",
+], {
+    variants: {
+        size: {
+            default: "h-[1.15rem] w-8",
+            sm: "h-4 w-7",
+            lg: "h-5 w-10",
+        },
+    },
+    defaultVariants: {
+        size: "default",
+    },
+});
+const switchThumbVariants = cva([
+    "bg-background pointer-events-none block rounded-full ring-0 transition-transform",
+    "data-[state=unchecked]:translate-x-0",
+    "dark:data-[state=checked]:bg-primary-foreground",
+    "dark:data-[state=unchecked]:bg-foreground",
+], {
+    variants: {
+        size: {
+            default: ["size-4", "data-[state=checked]:translate-x-[calc(100%-2px)]"],
+            sm: ["size-3", "data-[state=checked]:translate-x-[calc(100%-1px)]"],
+            lg: ["size-5", "data-[state=checked]:translate-x-[calc(100%-3px)]"],
+        },
+    },
+    defaultVariants: {
+        size: "default",
+    },
+});
+const Switch = (_a) => {
+    var { className, thumbClassName, size } = _a, props = __rest(_a, ["className", "thumbClassName", "size"]);
+    return (jsx(Root, Object.assign({ "data-slot": "switch", className: cn(switchVariants({ size }), className) }, props, { children: jsx(Thumb, { "data-slot": "switch-thumb", className: cn(switchThumbVariants({ size }), thumbClassName) }) })));
+};
+Switch.displayName = "Switch";
+
+export { Switch };

package/dist/esm/components/forms/textarea/textarea.js

@@ -0,0 +1,35 @@
+import { __rest } from 'tslib';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { cva } from 'class-variance-authority';
+import { cn } from '../../../lib/utils.js';
+
+const textareaVariants = cva([
+    "flex w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs",
+    "min-h-16 field-sizing-content",
+    "transition-[color,box-shadow] outline-none",
+    "border-input dark:bg-input/30",
+    "placeholder:text-muted-foreground",
+    "disabled:cursor-not-allowed disabled:opacity-50",
+    "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+    "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+    "md:text-sm",
+], {
+    variants: {
+        size: {
+            default: "min-h-16 px-3 py-2",
+            sm: "min-h-12 px-2.5 py-1.5 text-sm",
+            lg: "min-h-20 px-4 py-3 text-base",
+        },
+    },
+    defaultVariants: {
+        size: "default",
+    },
+});
+const Textarea = forwardRef((_a, ref) => {
+    var { className, size } = _a, props = __rest(_a, ["className", "size"]);
+    return jsx("textarea", Object.assign({ ref: ref, "data-slot": "textarea", className: cn(textareaVariants({ size }), className) }, props));
+});
+Textarea.displayName = "Textarea";
+
+export { Textarea };

package/dist/esm/components/layout/box/box.js

@@ -0,0 +1,17 @@
+import { __rest } from 'tslib';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import { cn } from '../../../lib/utils.js';
+import { extractResponsiveProps, getResponsiveClass } from '../../../styles/responsive.js';
+
+const Box = forwardRef((props, ref) => {
+    const { as: Tag = "div", asChild, className, children } = props, rest = __rest(props, ["as", "asChild", "className", "children"]);
+    const { classesProps, restProps } = extractResponsiveProps(rest);
+    const responsiveClasses = getResponsiveClass(classesProps);
+    const Comp = asChild ? Slot : Tag;
+    return (jsx(Comp, Object.assign({ ref: ref, "data-slot": "box", className: cn(responsiveClasses, className) }, restProps, { children: children })));
+});
+Box.displayName = "Box";
+
+export { Box };

package/dist/esm/components/layout/flex/flex.js

@@ -0,0 +1,12 @@
+import { __rest } from 'tslib';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Box } from '../box/box.js';
+
+const Flex = forwardRef((_a, ref) => {
+    var { children, inline } = _a, rest = __rest(_a, ["children", "inline"]);
+    return (jsx(Box, Object.assign({ ref: ref, "data-slot": "flex", display: inline ? "inline-flex" : "flex" }, rest, { children: children })));
+});
+Flex.displayName = "Flex";
+
+export { Flex };

package/dist/esm/components/layout/grid/grid.js

@@ -0,0 +1,12 @@
+import { __rest } from 'tslib';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Box } from '../box/box.js';
+
+const Grid = forwardRef((_a, ref) => {
+    var { children, inline } = _a, rest = __rest(_a, ["children", "inline"]);
+    return (jsx(Box, Object.assign({ ref: ref, "data-slot": "grid", display: inline ? "inline-grid" : "grid" }, rest, { children: children })));
+});
+Grid.displayName = "Grid";
+
+export { Grid };

package/dist/esm/components/media/aspect-ratio/aspect-ratio.js

@@ -0,0 +1,10 @@
+import { __rest } from 'tslib';
+import { jsx } from 'react/jsx-runtime';
+import * as AspectRatioPrimitive from '@radix-ui/react-aspect-ratio';
+
+function AspectRatio(_a) {
+    var props = __rest(_a, []);
+    return jsx(AspectRatioPrimitive.Root, Object.assign({ "data-slot": "aspect-ratio" }, props));
+}
+
+export { AspectRatio };

package/dist/esm/components/media/avatar/avatar.js

@@ -0,0 +1,23 @@
+"use client";
+import { __rest } from 'tslib';
+import { jsx } from 'react/jsx-runtime';
+import { Root, Image, Fallback } from '@radix-ui/react-avatar';
+import { cn } from '../../../lib/utils.js';
+
+const Avatar = (_a) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (jsx(Root, Object.assign({ "data-slot": "avatar", className: cn("relative flex size-8 shrink-0 overflow-hidden rounded-full", className) }, props)));
+};
+Avatar.displayName = "Avatar";
+const AvatarImage = (_a) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return jsx(Image, Object.assign({ "data-slot": "avatar-image", className: cn("aspect-square size-full", className) }, props));
+};
+AvatarImage.displayName = "AvatarImage";
+const AvatarFallback = (_a) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (jsx(Fallback, Object.assign({ "data-slot": "avatar-fallback", className: cn("bg-muted flex size-full items-center justify-center rounded-full", className) }, props)));
+};
+AvatarFallback.displayName = "AvatarFallback";
+
+export { Avatar, AvatarFallback, AvatarImage };

package/dist/esm/components/media/icon/icon.js

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

package/dist/esm/components/popovers/dialog/dialog.js

@@ -0,0 +1,60 @@
+import { __rest } from 'tslib';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Root, Trigger, Close, Content, Description, Title, Portal, Overlay } from '@radix-ui/react-dialog';
+import { cn } from '../../../lib/utils.js';
+import { Icon } from '../../media/icon/icon.js';
+
+const Dialog = (_a) => {
+    var props = __rest(_a, []);
+    return jsx(Root, Object.assign({ "data-slot": "dialog" }, props));
+};
+const DialogPortal = (_a) => {
+    var props = __rest(_a, []);
+    return jsx(Portal, Object.assign({ "data-slot": "dialog-portal" }, props));
+};
+const DialogTrigger = (_a) => {
+    var props = __rest(_a, []);
+    return jsx(Trigger, Object.assign({ "data-slot": "dialog-triger" }, props));
+};
+const DialogClose = (_a) => {
+    var props = __rest(_a, []);
+    return jsx(Close, Object.assign({ "data-slot": "dialog-close" }, props));
+};
+const DialogOverlay = (_a) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (jsx(Overlay, Object.assign({ "data-slot": "dialog-overlay", className: cn("fixed inset-0 z-50 bg-black/50", [
+            "data-[state=open]:animate-in",
+            "data-[state=open]:fade-in-0",
+            "data-[state=closed]:animate-out",
+            "data-[state=closed]:fade-out-0",
+        ], className) }, props)));
+};
+const DialogContent = (_a) => {
+    var { className, children } = _a, props = __rest(_a, ["className", "children"]);
+    return (jsxs(DialogPortal, { children: [jsx(DialogOverlay, {}), jsxs(Content, Object.assign({ "data-slot": "dialog-content", className: cn("bg-background grid gap-4 w-full max-w-[calc(100%-2rem)] rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg", "fixed top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] z-50", [
+                    "data-[state=open]:animate-in",
+                    "data-[state=open]:fade-in-0",
+                    "data-[state=open]:zoom-in-95",
+                    "data-[state=closed]:animate-out",
+                    "data-[state=closed]:fade-out-0",
+                    "data-[state=closed]:zoom-out-95",
+                ], className) }, props, { children: [children, jsxs(Close, { className: cn("ring-offset-background rounded-xs opacity-70 hover:opacity-100 transition-opacity disabled:pointer-events-none", "absolute top-4 right-4", "data-[state=open]:bg-accent data-[state=open]:text-muted-foreground", "focus:ring-ring focus:ring-2 focus:ring-offset-2 focus:outline-hidden", ["[&_svg]:pointer-events-none", "[&_svg]:shrink-0", "[&_svg:not([class*='size-'])]:size-4"]), children: [jsx(Icon, { name: "x", size: 16 }), jsx("span", { className: "sr-only", children: "Close" })] })] }))] }));
+};
+const DialogHeader = (_a) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (jsx("div", Object.assign({ "data-slot": "dialog-header", className: cn("flex flex-col gap-2 text-center sm:text-left", className) }, props)));
+};
+const DialogFooter = (_a) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (jsx("div", Object.assign({ "data-slot": "dialog-footer", className: cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className) }, props)));
+};
+const DialogTitle = (_a) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return jsx(Title, Object.assign({ "data-slot": "dialog-title", className: cn("text-lg leading-none font-semibold", className) }, props));
+};
+const DialogDescription = (_a) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (jsx(Description, Object.assign({ "data-slot": "dialog-description", className: cn("text-muted-foreground text-sm", className) }, props)));
+};
+
+export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger };