art-bd-ui 1.0.7 → 1.0.8

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

@@ -8,7 +8,10 @@ var index$1 = require('../../../node_modules/class-variance-authority/dist/index
 var utils = require('../../../lib/utils.js');
 var icon = require('../../media/icon/icon.js');
 
-const buttonVariants = index$1.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", {
+const buttonVariants = index$1.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 shrink-0 ",
+    "focusable aria-invalid-state non-interactive-inner-svg",
+], {
     variants: {
         variant: {
             default: "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",

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

@@ -10,7 +10,7 @@ var icon = require('../../media/icon/icon.js');
 var button = require('../button/button.js');
 var tooltip = require('../../popovers/tooltip/tooltip.js');
 
-const iconButtonVariants = index.cva("", {
+const iconButtonVariants = index.cva("cursor-pointer", {
     variants: {
         radius: {
             none: "rounded-none",

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

@@ -7,7 +7,12 @@ var index$1 = require('../../../node_modules/@radix-ui/react-toggle/dist/index.j
 var index = require('../../../node_modules/class-variance-authority/dist/index.js');
 var utils = require('../../../lib/utils.js');
 
-const toggleVariants = index.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", {
+const toggleVariants = index.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 whitespace-nowrap",
+    "data-[state=on]:bg-accent",
+    "data-[state=on]:text-accent-foreground",
+    "focusable aria-invalid-state non-interactive-inner-svg",
+], {
     variants: {
         variant: {
             default: "bg-transparent",

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

@@ -9,11 +9,10 @@ var utils = require('../../../lib/utils.js');
 var icon = require('../../media/icon/icon.js');
 
 const checkboxVariants = index$1.cva([
-    "peer shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none",
+    "peer shrink-0 rounded-[4px] border shadow-xs transition-shadow",
     "border-input dark:bg-input/30",
-    "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+    "focusable aria-invalid-state",
     "disabled:cursor-not-allowed disabled:opacity-50",
-    "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
 ], {
     variants: {
         size: {
@@ -39,8 +38,8 @@ const checkboxIndicatorVariants = index$1.cva(["flex items-center justify-center
     },
 });
 const Checkbox = React.forwardRef((_a, ref) => {
-    var { className, checked, indeterminate = false, size } = _a, props = tslib_es6.__rest(_a, ["className", "checked", "indeterminate", "size"]);
-    return (jsxRuntime.jsx(index.Checkbox, Object.assign({ ref: ref, "data-slot": "checkbox", checked: checked, className: utils.cn(checkboxVariants({ size }), [
+    var { className, checked, onChange, onCheckedChange, indeterminate = false, size } = _a, props = tslib_es6.__rest(_a, ["className", "checked", "onChange", "onCheckedChange", "indeterminate", "size"]);
+    return (jsxRuntime.jsx(index.Checkbox, Object.assign({ ref: ref, "data-slot": "checkbox", checked: checked, onCheckedChange: onCheckedChange || onChange, className: utils.cn(checkboxVariants({ size }), [
             "data-[state=checked]:bg-primary",
             "data-[state=checked]:text-primary-foreground",
             "dark:data-[state=checked]:bg-primary",

package/dist/cjs/components/forms/form/form.js

@@ -33,9 +33,9 @@ function FormItem(_a) {
     return (jsxRuntime.jsx(FormItemContext.Provider, { value: { id }, children: jsxRuntime.jsx("div", Object.assign({ "data-slot": "form-item", className: utils.cn("grid gap-2", className) }, props)) }));
 }
 function FormLabel(_a) {
-    var { className } = _a, props = tslib_es6.__rest(_a, ["className"]);
+    var { className, weight = "bold" } = _a, props = tslib_es6.__rest(_a, ["className", "weight"]);
     const { error, formItemId } = useFormField();
-    return (jsxRuntime.jsx(label.Label, Object.assign({ "data-slot": "form-label", "data-error": !!error, className: utils.cn("data-[error=true]:text-destructive", className), htmlFor: formItemId }, props)));
+    return (jsxRuntime.jsx(label.Label, Object.assign({ "data-slot": "form-label", "data-error": !!error, className: utils.cn("data-[error=true]:text-destructive", className), htmlFor: formItemId, weight: weight }, props)));
 }
 function FormFieldControl(_a) {
     var props = tslib_es6.__rest(_a, []);

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

@@ -5,33 +5,20 @@ var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var index = require('../../../node_modules/class-variance-authority/dist/index.js');
 var utils = require('../../../lib/utils.js');
+var inputContainer = require('../../utility/input-container/input-container.js');
 
 const inputVariants = index.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",
+    "min-w-0 bg-transparent rounded-[inherit]",
+    "outline-none",
     "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",
+    "disabled:pointer-events-none",
+    "aria-invalid-state",
     "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 = React.forwardRef((_a, ref) => {
-    var { className, type, size } = _a, props = tslib_es6.__rest(_a, ["className", "type", "size"]);
-    return (jsxRuntime.jsx("input", Object.assign({ ref: ref, type: type, "data-slot": "input", className: utils.cn(inputVariants({ size }), className) }, props)));
+    var { className, type, size, disabled, prefix, suffix, prefixStyling, suffixStyling } = _a, props = tslib_es6.__rest(_a, ["className", "type", "size", "disabled", "prefix", "suffix", "prefixStyling", "suffixStyling"]);
+    return (jsxRuntime.jsx(inputContainer.InputContainer, { size: size, disabled: disabled, prefix: prefix, suffix: suffix, prefixStyling: prefixStyling, suffixStyling: suffixStyling, children: jsxRuntime.jsx("input", Object.assign({ ref: ref, type: type, "data-slot": "input", className: utils.cn(inputVariants(), className), disabled: disabled }, props)) }));
 });
 Input.displayName = "Input";
 

package/dist/cjs/components/forms/input-number/input-number.js

@@ -0,0 +1,88 @@
+"use client";
+'use strict';
+
+var tslib_es6 = require('../../../node_modules/tslib/tslib.es6.js');
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var utils = require('./utils.js');
+var stepButtons = require('./step-buttons.js');
+var input = require('../input/input.js');
+var useUpdateEffect = require('../../../hooks/use-update-effect.js');
+require('../../../_virtual/throttle.js');
+
+const noop = () => { };
+const getFormatter = (decimalScale, locale) => new Intl.NumberFormat(locale, {
+    useGrouping: false,
+    minimumFractionDigits: 0,
+    maximumFractionDigits: decimalScale,
+});
+const InputNumber = (_a) => {
+    var { value, onChange = noop, step = 1, min = -Infinity, max = Infinity, precision = 0, withControls = true, suffix, suffixStyling, readOnly = false, disabled = false } = _a, rest = tslib_es6.__rest(_a, ["value", "onChange", "step", "min", "max", "precision", "withControls", "suffix", "suffixStyling", "readOnly", "disabled"]);
+    // caret tracking
+    const cursorPosition = React.useRef(0);
+    const inputRef = React.useRef(null);
+    const saveCursor = (pos) => {
+        if (pos != null)
+            cursorPosition.current = pos;
+    };
+    const fmtRef = React.useRef(getFormatter(precision));
+    useUpdateEffect.useUpdateEffect(() => {
+        fmtRef.current = getFormatter(precision);
+    }, [precision]);
+    const fmt = fmtRef.current;
+    const [display, setDisplay] = React.useState(() => (value !== undefined ? fmt.format(value) : ""));
+    React.useEffect(() => {
+        setDisplay(value !== undefined ? fmt.format(value) : "");
+    }, [value, fmt]);
+    const commit = React.useCallback((raw) => {
+        const parsed = utils.parseDisplay(raw, precision);
+        if (parsed === undefined) {
+            setDisplay("");
+            onChange(undefined);
+            return;
+        }
+        let normalized = utils.clamp(parsed, min, max);
+        normalized = utils.toFixedSafe(normalized, precision);
+        setDisplay(fmt.format(normalized));
+        onChange(normalized);
+    }, [precision, fmt, min, max, onChange]);
+    const handleChange = React.useCallback((e) => {
+        const raw = e.target.value;
+        saveCursor(e.target.selectionStart);
+        const clean = utils.sanitizeInput(raw, precision);
+        setDisplay(clean);
+        requestAnimationFrame(() => {
+            const el = inputRef.current;
+            if (el) {
+                el.selectionStart = el.selectionEnd = cursorPosition.current;
+            }
+        });
+    }, [precision]);
+    const handleBlur = React.useCallback(() => commit(display), [commit, display]);
+    const base = React.useMemo(() => { var _a; return (Number.isFinite(value) ? value : ((_a = utils.parseDisplay(display, precision)) !== null && _a !== void 0 ? _a : 0)); }, [value, display, precision]);
+    const next = React.useCallback((delta) => utils.clamp(utils.toFixedSafe(base + delta * step, precision), min, max), [base, step, precision, min, max]);
+    const stepUp = () => commit(String(next(1)));
+    const stepDown = () => commit(String(next(-1)));
+    // keyboard support
+    const handleKeyDown = (e) => {
+        saveCursor(e.currentTarget.selectionStart);
+        if (!withControls || Boolean(suffix) || disabled)
+            return;
+        if (e.key === "ArrowUp") {
+            e.preventDefault();
+            stepUp();
+        }
+        if (e.key === "ArrowDown") {
+            e.preventDefault();
+            stepDown();
+        }
+    };
+    // controls visibility and disabled state
+    const showControls = withControls && !suffix;
+    const disableUp = disabled || next(1) === utils.clamp(base, min, max);
+    const disableDown = disabled || next(-1) === utils.clamp(base, min, max);
+    return (jsxRuntime.jsx(input.Input, Object.assign({}, rest, { ref: inputRef, type: "text", inputMode: precision > 0 ? "decimal" : "numeric", pattern: "[0-9]*(\\.[0-9]+)?", readOnly: readOnly || false, disabled: disabled, value: display, onChange: handleChange, onBlur: handleBlur, onKeyDown: handleKeyDown, suffix: suffix !== null && suffix !== void 0 ? suffix : (showControls && (jsxRuntime.jsx(stepButtons.StepButtons, { onIncrease: stepUp, onDecrease: stepDown, disableUp: disableUp, disableDown: disableDown }))), suffixStyling: showControls ? false : suffixStyling })));
+};
+InputNumber.displayName = "InputNumber";
+
+exports.InputNumber = InputNumber;

package/dist/cjs/components/forms/input-number/step-buttons.js

@@ -0,0 +1,13 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var icon = require('../../media/icon/icon.js');
+var separator = require('../../utility/separator/separator.js');
+var utils = require('../../../lib/utils.js');
+
+const StepButton = ({ direction, disabled = false, onClick }) => (jsxRuntime.jsx("div", { role: "button", tabIndex: -1, "aria-hidden": true, className: utils.cn("flex items-center justify-center w-8 h-1/2 hover:bg-accent cursor-pointer", disabled && "opacity-40 cursor-not-allowed"), onClick: disabled ? undefined : onClick, children: jsxRuntime.jsx(icon.Icon, { name: direction === "down" ? "chevron-down" : "chevron-up", size: 16 }) }));
+StepButton.displayName = "StepButton";
+const StepButtons = ({ onIncrease, onDecrease, disableUp, disableDown }) => (jsxRuntime.jsxs("div", { className: "flex flex-col items-center h-full select-none border-l", children: [jsxRuntime.jsx(StepButton, { direction: "up", disabled: disableUp, onClick: onIncrease }), jsxRuntime.jsx(separator.Separator, {}), jsxRuntime.jsx(StepButton, { direction: "down", disabled: disableDown, onClick: onDecrease })] }));
+StepButtons.displayName = "StepButtons";
+
+exports.StepButtons = StepButtons;

package/dist/cjs/components/forms/input-number/utils.js

@@ -0,0 +1,64 @@
+'use strict';
+
+// clamp to [min, max]
+const clamp = (n, min, max) => Math.min(max, Math.max(min, n));
+// round to fixed precision, handling exponential notation
+const toFixedSafe = (value, precision) => {
+    const str = value.toString();
+    if (str.includes("e"))
+        return value;
+    return Number(Number(Math.round(Number(value + "e" + precision)) + "e-" + precision).toFixed(precision));
+};
+/**
+ * Parse a raw display string into a number (or undefined if it’s not valid).
+ * Respects decimalScale for how many digits to read after the dot.
+ */
+const parseDisplay = (raw, decimalScale) => {
+    if (!raw)
+        return undefined;
+    // split into int/dec parts
+    const [intPart, decPart = ""] = raw.split(".");
+    const truncatedDec = decimalScale > 0 ? decPart.slice(0, decimalScale) : "";
+    const candidate = truncatedDec.length > 0 ? `${intPart}.${truncatedDec}` : intPart;
+    const newNumber = Number(candidate);
+    return Number.isFinite(newNumber) ? newNumber : undefined;
+};
+/**
+ * Sanitize a typed value on each keystroke:
+ * - allow leading “-”
+ * - strip any non-digit/non-dot
+ * - only one dot
+ * - limit decimals
+ * - drop leading zeros
+ */
+const sanitizeInput = (raw, decimalScale) => {
+    let sign = "";
+    if (raw.startsWith("-")) {
+        sign = "-";
+        raw = raw.slice(1);
+    }
+    // strip non-digits/dots
+    raw = raw.replace(/[^\d.]/g, "");
+    // collapse extra dots
+    const firstDot = raw.indexOf(".");
+    if (firstDot >= 0) {
+        const [before, afterAll] = [raw.slice(0, firstDot), raw.slice(firstDot + 1)];
+        raw = before + "." + afterAll.replace(/\./g, "");
+    }
+    // limit decimals
+    if (decimalScale === 0) {
+        raw = raw.split(".")[0];
+    }
+    else if (raw.includes(".")) {
+        const [i, d] = raw.split(".");
+        raw = i + "." + d.slice(0, decimalScale);
+    }
+    // strip leading zeros (but allow “0” or “0.xxx”)
+    raw = raw.replace(/^0+(?=\d)/, "");
+    return sign + raw;
+};
+
+exports.clamp = clamp;
+exports.parseDisplay = parseDisplay;
+exports.sanitizeInput = sanitizeInput;
+exports.toFixedSafe = toFixedSafe;

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

@@ -8,13 +8,13 @@ var utils = require('../../../lib/utils.js');
 var icon = require('../../media/icon/icon.js');
 
 const RadioGroup = (_a) => {
-    var { className } = _a, props = tslib_es6.__rest(_a, ["className"]);
-    return jsxRuntime.jsx(index.Root, Object.assign({ "data-slot": "radio-group", className: utils.cn("grid gap-3", className) }, props));
+    var { className, onChange, onValueChange } = _a, props = tslib_es6.__rest(_a, ["className", "onChange", "onValueChange"]);
+    return (jsxRuntime.jsx(index.Root, Object.assign({ "data-slot": "radio-group", className: utils.cn("grid gap-3", className), onValueChange: onValueChange || onChange }, props)));
 };
 RadioGroup.displayName = "RadioGroup";
 const RadioGroupItem = (_a) => {
     var { className } = _a, props = tslib_es6.__rest(_a, ["className"]);
-    return (jsxRuntime.jsx(index.Item, Object.assign({ "data-slot": "radio-group-item", className: utils.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: jsxRuntime.jsx(index.Indicator, { "data-slot": "radio-group-indicator", className: "relative flex items-center justify-center", children: jsxRuntime.jsx(icon.Icon, { name: "circle", className: "fill-primary absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2" }) }) })));
+    return (jsxRuntime.jsx(index.Item, Object.assign({ "data-slot": "radio-group-item", className: utils.cn(["focusable aria-invalid-state"], "border border-input text-primary dark:bg-input/30 aspect-square size-4 shrink-0 rounded-full shadow-xs disabled:cursor-not-allowed disabled:opacity-50", className) }, props, { children: jsxRuntime.jsx(index.Indicator, { "data-slot": "radio-group-indicator", className: "relative flex items-center justify-center", children: jsxRuntime.jsx(icon.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";
 

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

@@ -8,8 +8,8 @@ var utils = require('../../../lib/utils.js');
 var icon = require('../../media/icon/icon.js');
 
 const Select = (_a) => {
-    var props = tslib_es6.__rest(_a, []);
-    return jsxRuntime.jsx(index.Root, Object.assign({ "data-slot": "select" }, props));
+    var { onChange, onValueChange } = _a, props = tslib_es6.__rest(_a, ["onChange", "onValueChange"]);
+    return (jsxRuntime.jsx(index.Root, Object.assign({ "data-slot": "select", onValueChange: onValueChange || onChange }, props)));
 };
 Select.displayName = "Select";
 const SelectGroup = (_a) => {
@@ -24,7 +24,14 @@ const SelectValue = (_a) => {
 SelectValue.displayName = "SelectValue";
 const SelectTrigger = (_a) => {
     var { className, size = "default", children } = _a, props = tslib_es6.__rest(_a, ["className", "size", "children"]);
-    return (jsxRuntime.jsxs(index.Trigger, Object.assign({ "data-slot": "select-trigger", "data-size": size, className: utils.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, jsxRuntime.jsx(index.Icon, { asChild: true, children: jsxRuntime.jsx(icon.Icon, { name: "chevron-down", className: "size-4 opacity-50" }) })] })));
+    return (jsxRuntime.jsxs(index.Trigger, Object.assign({ "data-slot": "select-trigger", "data-size": size, className: utils.cn([
+            "data-[placeholder]:text-muted-foreground",
+            "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",
+        ], "border border-input dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs", "focusable aria-invalid-state disabled-form-element", "non-interactive-inner-svg [&_svg:not([class*='text-'])]:text-muted-foreground", className) }, props, { children: [children, jsxRuntime.jsx(index.Icon, { asChild: true, children: jsxRuntime.jsx(icon.Icon, { name: "chevron-down", className: "size-4 opacity-50" }) })] })));
 };
 SelectTrigger.displayName = "SelectTrigger";
 const SelectScrollUpButton = (_a) => {
@@ -39,7 +46,13 @@ const SelectScrollDownButton = (_a) => {
 SelectScrollDownButton.displayName = "SelectScrollDownButton";
 const SelectContent = (_a) => {
     var { className, children, position = "popper" } = _a, props = tslib_es6.__rest(_a, ["className", "children", "position"]);
-    return (jsxRuntime.jsx(index.Portal, { children: jsxRuntime.jsxs(index.Content, Object.assign({ "data-slot": "select-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 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" &&
+    return (jsxRuntime.jsx(index.Portal, { children: jsxRuntime.jsxs(index.Content, Object.assign({ "data-slot": "select-content", className: utils.cn([
+                "overlay-appearance-animation",
+                "overlay-zoom-animation",
+                "overlay-slide-animation",
+                "max-h-(--radix-select-content-available-height)",
+                "origin-(--radix-select-content-transform-origin)",
+            ], "relative z-50 min-w-[8rem] bg-popover text-popover-foreground 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: [jsxRuntime.jsx(SelectScrollUpButton, {}), jsxRuntime.jsx(index.Viewport, { className: utils.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 }), jsxRuntime.jsx(SelectScrollDownButton, {})] })) }));
 };
@@ -51,7 +64,15 @@ const SelectLabel = (_a) => {
 SelectLabel.displayName = "SelectLabel";
 const SelectItem = (_a) => {
     var { className, children } = _a, props = tslib_es6.__rest(_a, ["className", "children"]);
-    return (jsxRuntime.jsxs(index.Item, Object.assign({ "data-slot": "select-item", className: utils.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: [jsxRuntime.jsx("span", { className: "absolute right-2 flex size-3.5 items-center justify-center", children: jsxRuntime.jsx(index.ItemIndicator, { children: jsxRuntime.jsx(icon.Icon, { name: "check", className: "size-4" }) }) }), jsxRuntime.jsx(index.ItemText, { children: children })] })));
+    return (jsxRuntime.jsxs(index.Item, Object.assign({ "data-slot": "select-item", className: utils.cn([
+            "data-[disabled]:pointer-events-none",
+            "data-[disabled]:opacity-50",
+            "*:[span]:last:flex",
+            "*:[span]:last:items-center",
+            "*:[span]:last:gap-2",
+            "focus:bg-accent focus:text-accent-foreground",
+            "non-interactive-inner-svg [&_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", className) }, props, { children: [jsxRuntime.jsx("span", { className: "absolute right-2 flex size-3.5 items-center justify-center", children: jsxRuntime.jsx(index.ItemIndicator, { children: jsxRuntime.jsx(icon.Icon, { name: "check", className: "size-4" }) }) }), jsxRuntime.jsx(index.ItemText, { children: children })] })));
 };
 SelectItem.displayName = "SelectItem";
 const SelectSeparator = (_a) => {

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

@@ -7,9 +7,9 @@ var index$1 = require('../../../node_modules/class-variance-authority/dist/index
 var utils = require('../../../lib/utils.js');
 
 const switchVariants = index$1.cva([
-    "peer inline-flex shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none",
+    "peer inline-flex shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all",
     "disabled:cursor-not-allowed disabled:opacity-50",
-    "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+    "focusable",
     "data-[state=checked]:bg-primary",
     "data-[state=unchecked]:bg-input",
     "dark:data-[state=unchecked]:bg-input/80",
@@ -43,8 +43,8 @@ const switchThumbVariants = index$1.cva([
     },
 });
 const Switch = (_a) => {
-    var { className, thumbClassName, size } = _a, props = tslib_es6.__rest(_a, ["className", "thumbClassName", "size"]);
-    return (jsxRuntime.jsx(index.Root, Object.assign({ "data-slot": "switch", className: utils.cn(switchVariants({ size }), className) }, props, { children: jsxRuntime.jsx(index.Thumb, { "data-slot": "switch-thumb", className: utils.cn(switchThumbVariants({ size }), thumbClassName) }) })));
+    var { className, thumbClassName, size, onChange, onCheckedChange } = _a, props = tslib_es6.__rest(_a, ["className", "thumbClassName", "size", "onChange", "onCheckedChange"]);
+    return (jsxRuntime.jsx(index.Root, Object.assign({ "data-slot": "switch", className: utils.cn(switchVariants({ size }), className), onCheckedChange: onCheckedChange || onChange }, props, { children: jsxRuntime.jsx(index.Thumb, { "data-slot": "switch-thumb", className: utils.cn(switchThumbVariants({ size }), thumbClassName) }) })));
 };
 Switch.displayName = "Switch";
 

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

@@ -9,12 +9,11 @@ var utils = require('../../../lib/utils.js');
 const textareaVariants = index.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",
+    "focusable",
+    "aria-invalid-state",
     "md:text-sm",
 ], {
     variants: {

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

@@ -3,8 +3,8 @@
 var tslib_es6 = require('../../../node_modules/tslib/tslib.es6.js');
 var jsxRuntime = require('react/jsx-runtime');
 var index = require('../../../node_modules/@radix-ui/react-dialog/dist/index.js');
+var iconClose = require('../shared/icon-close.js');
 var utils = require('../../../lib/utils.js');
-var icon = require('../../media/icon/icon.js');
 
 const Dialog = (_a) => {
     var props = tslib_es6.__rest(_a, []);
@@ -16,7 +16,7 @@ const DialogPortal = (_a) => {
 };
 const DialogTrigger = (_a) => {
     var props = tslib_es6.__rest(_a, []);
-    return jsxRuntime.jsx(index.Trigger, Object.assign({ "data-slot": "dialog-triger" }, props));
+    return jsxRuntime.jsx(index.Trigger, Object.assign({ "data-slot": "dialog-trigger" }, props));
 };
 const DialogClose = (_a) => {
     var props = tslib_es6.__rest(_a, []);
@@ -24,23 +24,11 @@ const DialogClose = (_a) => {
 };
 const DialogOverlay = (_a) => {
     var { className } = _a, props = tslib_es6.__rest(_a, ["className"]);
-    return (jsxRuntime.jsx(index.Overlay, Object.assign({ "data-slot": "dialog-overlay", className: utils.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)));
+    return (jsxRuntime.jsx(index.Overlay, Object.assign({ "data-slot": "dialog-overlay", className: utils.cn("fixed inset-0 z-50 bg-black/50 overlay-appearance-animation", className) }, props)));
 };
 const DialogContent = (_a) => {
     var { className, children } = _a, props = tslib_es6.__rest(_a, ["className", "children"]);
-    return (jsxRuntime.jsxs(DialogPortal, { children: [jsxRuntime.jsx(DialogOverlay, {}), jsxRuntime.jsxs(index.Content, Object.assign({ "data-slot": "dialog-content", className: utils.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, jsxRuntime.jsxs(index.Close, { className: utils.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: [jsxRuntime.jsx(icon.Icon, { name: "x", size: 16 }), jsxRuntime.jsx("span", { className: "sr-only", children: "Close" })] })] }))] }));
+    return (jsxRuntime.jsxs(DialogPortal, { children: [jsxRuntime.jsx(DialogOverlay, {}), jsxRuntime.jsxs(index.Content, Object.assign({ "data-slot": "dialog-content", className: utils.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", "overlay-appearance-animation overlay-zoom-animation", className) }, props, { children: [children, jsxRuntime.jsx(index.Close, { className: "data-[state=open]:bg-accent data-[state=open]:text-muted-foreground", asChild: true, children: jsxRuntime.jsx(iconClose.IconClose, {}) })] }))] }));
 };
 const DialogHeader = (_a) => {
     var { className } = _a, props = tslib_es6.__rest(_a, ["className"]);

package/dist/cjs/components/popovers/drawer/drawer.js

@@ -13,18 +13,17 @@ const DrawerPortal = (_a) => {
     var props = tslib_es6.__rest(_a, []);
     return jsxRuntime.jsx(index.Drawer.Portal, Object.assign({ "data-slot": "drawer-portal" }, props));
 };
+const DrawerTrigger = (_a) => {
+    var props = tslib_es6.__rest(_a, []);
+    return jsxRuntime.jsx(index.Drawer.Trigger, Object.assign({ "data-slot": "drawer-trigger" }, props));
+};
 const DrawerClose = (_a) => {
     var props = tslib_es6.__rest(_a, []);
     return jsxRuntime.jsx(index.Drawer.Close, Object.assign({ "data-slot": "drawer-close" }, props));
 };
 const DrawerOverlay = (_a) => {
     var { className } = _a, props = tslib_es6.__rest(_a, ["className"]);
-    return (jsxRuntime.jsx(index.Drawer.Overlay, Object.assign({ "data-slot": "drawer-overlay", className: utils.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)));
+    return (jsxRuntime.jsx(index.Drawer.Overlay, Object.assign({ "data-slot": "drawer-overlay", className: utils.cn("fixed inset-0 z-50 bg-black/50 overlay-appearance-animation", className) }, props)));
 };
 const DrawerContent = (_a) => {
     var { children, className } = _a, props = tslib_es6.__rest(_a, ["children", "className"]);
@@ -80,3 +79,4 @@ exports.DrawerDescription = DrawerDescription;
 exports.DrawerFooter = DrawerFooter;
 exports.DrawerHeader = DrawerHeader;
 exports.DrawerTitle = DrawerTitle;
+exports.DrawerTrigger = DrawerTrigger;

package/dist/cjs/components/popovers/popover/popover.js

@@ -4,12 +4,15 @@ var tslib_es6 = require('../../../node_modules/tslib/tslib.es6.js');
 var jsxRuntime = require('react/jsx-runtime');
 var index = require('../../../node_modules/@radix-ui/react-popover/dist/index.js');
 var index$1 = require('../../../node_modules/class-variance-authority/dist/index.js');
+var iconClose = require('../shared/icon-close.js');
 var utils = require('../../../lib/utils.js');
-var icon = require('../../media/icon/icon.js');
 
 const popoverContentVariants = index$1.cva([
     "bg-popover text-popover-foreground z-50 w-72 rounded-md border p-4 shadow-md outline-hidden",
     "origin-(--radix-popover-content-transform-origin)",
+    "overlay-appearance-animation",
+    "overlay-zoom-animation",
+    "overlay-slide-animation",
 ], {
     variants: {
         size: {
@@ -33,12 +36,6 @@ const popoverContentVariants = index$1.cva([
         size: "default",
     },
 });
-const popoverCloseVariants = index$1.cva([
-    "ring-offset-background rounded-xs opacity-70 hover:opacity-100 transition-opacity",
-    "disabled:pointer-events-none",
-    "absolute top-4 right-4",
-    "focus:ring-ring focus:ring-2 focus:ring-offset-2 focus:outline-hidden",
-]);
 const Popover = (_a) => {
     var props = tslib_es6.__rest(_a, []);
     return jsxRuntime.jsx(index.Root, Object.assign({ "data-slot": "popover" }, props));
@@ -49,18 +46,7 @@ const PopoverTrigger = (_a) => {
 };
 const PopoverContent = (_a) => {
     var { className, align = "center", arrow = false, withClose = false, sideOffset = 4, size, matchTriggerWidth = false, children } = _a, props = tslib_es6.__rest(_a, ["className", "align", "arrow", "withClose", "sideOffset", "size", "matchTriggerWidth", "children"]);
-    return (jsxRuntime.jsx(index.Portal, { children: jsxRuntime.jsxs(index.Content, Object.assign({ "data-slot": "popover-content", align: align, sideOffset: sideOffset, className: utils.cn(popoverContentVariants({ size, matchTriggerWidth }), [
-                "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",
-                "data-[side=top]:slide-in-from-bottom-2",
-                "data-[side=right]:slide-in-from-left-2",
-                "data-[side=bottom]:slide-in-from-top-2",
-                "data-[side=left]:slide-in-from-right-2",
-            ], className) }, props, { children: [children, withClose && (jsxRuntime.jsx(index.Close, { className: utils.cn(popoverCloseVariants), "aria-label": "Close", children: jsxRuntime.jsx(icon.Icon, { name: "x", size: 16 }) })), arrow && jsxRuntime.jsx(index.Arrow, { className: "fill-popover" })] })) }));
+    return (jsxRuntime.jsx(index.Portal, { children: jsxRuntime.jsxs(index.Content, Object.assign({ "data-slot": "popover-content", align: align, sideOffset: sideOffset, className: utils.cn(popoverContentVariants({ size, matchTriggerWidth }), className) }, props, { children: [children, withClose && (jsxRuntime.jsx(index.Close, { asChild: true, children: jsxRuntime.jsx(iconClose.IconClose, {}) })), arrow && jsxRuntime.jsx(index.Arrow, { className: "fill-popover" })] })) }));
 };
 const PopoverAnchor = (_a) => {
     var props = tslib_es6.__rest(_a, []);

package/dist/cjs/components/popovers/shared/icon-close.js

@@ -0,0 +1,14 @@
+'use strict';
+
+var tslib_es6 = require('../../../node_modules/tslib/tslib.es6.js');
+var jsxRuntime = require('react/jsx-runtime');
+var icon = require('../../media/icon/icon.js');
+var utils = require('../../../lib/utils.js');
+
+const IconClose = (_a) => {
+    var { className } = _a, props = tslib_es6.__rest(_a, ["className"]);
+    return (jsxRuntime.jsx(icon.Icon, Object.assign({ name: "x", size: 16, className: utils.cn("absolute top-4 right-4", "focusable disabled:pointer-events-none ring-offset-background rounded-xs", "opacity-70 hover:opacity-100 transition-opacity", className), "aria-label": "Close" }, props)));
+};
+IconClose.displayName = "IconClose";
+
+exports.IconClose = IconClose;

package/dist/cjs/components/popovers/sheet/sheet.js

@@ -4,8 +4,8 @@ var tslib_es6 = require('../../../node_modules/tslib/tslib.es6.js');
 var jsxRuntime = require('react/jsx-runtime');
 var index = require('../../../node_modules/@radix-ui/react-dialog/dist/index.js');
 var index$1 = require('../../../node_modules/class-variance-authority/dist/index.js');
+var iconClose = require('../shared/icon-close.js');
 var utils = require('../../../lib/utils.js');
-var icon = require('../../media/icon/icon.js');
 
 const Sheet = (_a) => {
     var props = tslib_es6.__rest(_a, []);
@@ -15,18 +15,17 @@ const SheetPortal = (_a) => {
     var props = tslib_es6.__rest(_a, []);
     return jsxRuntime.jsx(index.Portal, Object.assign({ "data-slot": "sheet-portal" }, props));
 };
+const SheetTrigger = (_a) => {
+    var props = tslib_es6.__rest(_a, []);
+    return jsxRuntime.jsx(index.Trigger, Object.assign({ "data-slot": "sheet-trigger" }, props));
+};
 const SheetClose = (_a) => {
     var props = tslib_es6.__rest(_a, []);
     return jsxRuntime.jsx(index.Close, Object.assign({ "data-slot": "sheet-close" }, props));
 };
 const SheetOverlay = (_a) => {
     var { className } = _a, props = tslib_es6.__rest(_a, ["className"]);
-    return (jsxRuntime.jsx(index.Overlay, Object.assign({ "data-slot": "sheet-overlay", className: utils.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)));
+    return (jsxRuntime.jsx(index.Overlay, Object.assign({ "data-slot": "sheet-overlay", className: utils.cn("fixed inset-0 z-50 bg-black/50 overlay-appearance-animation", className) }, props)));
 };
 const contentVariants = index$1.cva([
     "bg-background fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out",
@@ -57,16 +56,9 @@ const contentVariants = index$1.cva([
         side: "right",
     },
 });
-const closeVariants = index$1.cva([
-    "ring-offset-background absolute top-4 right-4 rounded-xs",
-    "opacity-70 transition-opacity hover:opacity-100",
-    "disabled:pointer-events-none",
-    "data-[state=open]:bg-secondary",
-    "focus:ring-ring focus:ring-2 focus:ring-offset-2 focus:outline-hidden",
-]);
 const SheetContent = (_a) => {
     var { className, children, side = "right" } = _a, props = tslib_es6.__rest(_a, ["className", "children", "side"]);
-    return (jsxRuntime.jsxs(SheetPortal, { children: [jsxRuntime.jsx(SheetOverlay, {}), jsxRuntime.jsxs(index.Content, Object.assign({ "data-slot": "sheet-content", className: utils.cn(contentVariants({ side }), className) }, props, { children: [children, jsxRuntime.jsxs(index.Close, { className: closeVariants(), children: [jsxRuntime.jsx(icon.Icon, { name: "x", size: 16 }), jsxRuntime.jsx("span", { className: "sr-only", children: "Close" })] })] }))] }));
+    return (jsxRuntime.jsxs(SheetPortal, { children: [jsxRuntime.jsx(SheetOverlay, {}), jsxRuntime.jsxs(index.Content, Object.assign({ "data-slot": "sheet-content", className: utils.cn(contentVariants({ side }), className) }, props, { children: [children, jsxRuntime.jsx(index.Close, { className: "data-[state=open]:bg-secondary", asChild: true, children: jsxRuntime.jsx(iconClose.IconClose, {}) })] }))] }));
 };
 const SheetHeader = (_a) => {
     var { className } = _a, props = tslib_es6.__rest(_a, ["className"]);
@@ -92,3 +84,4 @@ exports.SheetDescription = SheetDescription;
 exports.SheetFooter = SheetFooter;
 exports.SheetHeader = SheetHeader;
 exports.SheetTitle = SheetTitle;
+exports.SheetTrigger = SheetTrigger;