art-bd-ui 1.0.8 → 1.0.9

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

@@ -28,15 +28,15 @@ const DialogOverlay = (_a) => {
 };
 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", "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, {}) })] }))] }));
+    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%-8px)] max-h-[calc(100dvh-24px)] rounded-lg border p-3 sm: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"]);
-    return (jsxRuntime.jsx("div", Object.assign({ "data-slot": "dialog-header", className: utils.cn("flex flex-col gap-2 text-center sm:text-left", className) }, props)));
+    return (jsxRuntime.jsx("div", Object.assign({ "data-slot": "dialog-header", className: utils.cn("flex flex-col gap-2 text-center sm:text-left order-first", className) }, props)));
 };
 const DialogFooter = (_a) => {
     var { className } = _a, props = tslib_es6.__rest(_a, ["className"]);
-    return (jsxRuntime.jsx("div", Object.assign({ "data-slot": "dialog-footer", className: utils.cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className) }, props)));
+    return (jsxRuntime.jsx("div", Object.assign({ "data-slot": "dialog-footer", className: utils.cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end order-last", className) }, props)));
 };
 const DialogTitle = (_a) => {
     var { className } = _a, props = tslib_es6.__rest(_a, ["className"]);

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

@@ -44,13 +44,13 @@ const DrawerContent = (_a) => {
                 ], [
                     "data-[vaul-drawer-direction=right]:inset-y-0",
                     "data-[vaul-drawer-direction=right]:right-0",
-                    "data-[vaul-drawer-direction=right]:w-3/4",
+                    "data-[vaul-drawer-direction=right]:w-[calc(100%-32px)]",
                     "data-[vaul-drawer-direction=right]:border-l",
                     "data-[vaul-drawer-direction=right]:sm:max-w-sm",
                 ], [
                     "data-[vaul-drawer-direction=left]:inset-y-0",
                     "data-[vaul-drawer-direction=left]:left-0",
-                    "data-[vaul-drawer-direction=left]:w-3/4",
+                    "data-[vaul-drawer-direction=left]:w-[calc(100%-32px)]",
                     "data-[vaul-drawer-direction=left]:border-r",
                     "data-[vaul-drawer-direction=left]:sm:max-w-sm",
                 ], className) }, props, { children: [jsxRuntime.jsx("div", { className: "bg-muted mx-auto mt-4 hidden h-2 w-[100px] shrink-0 rounded-full group-data-[vaul-drawer-direction=bottom]/drawer-content:block" }), children] }))] }));

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

@@ -7,7 +7,7 @@ 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)));
+    return (jsxRuntime.jsx(icon.Icon, Object.assign({ name: "x", size: 16, className: utils.cn("absolute top-3 right-3 sm:top-6 sm:right-6", "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";
 

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

@@ -39,7 +39,7 @@ const contentVariants = index$1.cva([
                 "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
             ],
             right: [
-                "inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm",
+                "inset-y-0 right-0 h-full w-[calc(100%-32px)] border-l sm:max-w-sm",
                 "data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right",
             ],
             bottom: [
@@ -47,7 +47,7 @@ const contentVariants = index$1.cva([
                 "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
             ],
             left: [
-                "inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
+                "inset-y-0 left-0 h-full w-[calc(100%-32px)] border-r sm:max-w-sm",
                 "data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left",
             ],
         },
@@ -58,15 +58,15 @@ const contentVariants = index$1.cva([
 });
 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.jsx(index.Close, { className: "data-[state=open]:bg-secondary", asChild: true, children: jsxRuntime.jsx(iconClose.IconClose, {}) })] }))] }));
+    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, { className: "sm:top-4 sm:right-4" }) })] }))] }));
 };
 const SheetHeader = (_a) => {
     var { className } = _a, props = tslib_es6.__rest(_a, ["className"]);
-    return jsxRuntime.jsx("div", Object.assign({ "data-slot": "sheet-header", className: utils.cn("flex flex-col gap-1.5 p-4", className) }, props));
+    return jsxRuntime.jsx("div", Object.assign({ "data-slot": "sheet-header", className: utils.cn("flex flex-col gap-1.5 p-3 sm:p-4", className) }, props));
 };
 const SheetFooter = (_a) => {
     var { className } = _a, props = tslib_es6.__rest(_a, ["className"]);
-    return jsxRuntime.jsx("div", Object.assign({ "data-slot": "sheet-footer", className: utils.cn("mt-auto flex flex-col gap-2 p-4", className) }, props));
+    return (jsxRuntime.jsx("div", Object.assign({ "data-slot": "sheet-footer", className: utils.cn("mt-auto flex flex-col gap-2 p-3 sm:p-4", className) }, props)));
 };
 const SheetTitle = (_a) => {
     var { className } = _a, props = tslib_es6.__rest(_a, ["className"]);

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

@@ -10,11 +10,11 @@ var button = require('../../buttons/button/button.js');
 var select = require('../../forms/select/select.js');
 var DayPicker = require('../../../node_modules/react-day-picker/dist/esm/DayPicker.js');
 
-const Chevron = (_a) => {
+const Chevron = React.memo((_a) => {
     var { className, orientation } = _a, props = tslib_es6.__rest(_a, ["className", "orientation"]);
     return (jsxRuntime.jsx(icon.Icon, Object.assign({ name: `chevron-${orientation}`, className: utils.cn("h-4 w-4", className) }, props)));
-};
-const Dropdown = (props) => {
+});
+const Dropdown = React.memo((props) => {
     const { options, value, onChange } = props;
     const handleValueChange = (newValue) => {
         if (onChange) {
@@ -27,30 +27,40 @@ const Dropdown = (props) => {
         }
     };
     return (jsxRuntime.jsxs(select.Select, { value: value === null || value === void 0 ? void 0 : value.toString(), onValueChange: handleValueChange, children: [jsxRuntime.jsx(select.SelectTrigger, { className: "gap-1 overflow-hidden w-[84px] [&_[data-slot=select-value]]:truncate [&_[data-slot=select-value]]:block", children: jsxRuntime.jsx(select.SelectValue, {}) }), jsxRuntime.jsx(select.SelectContent, { children: jsxRuntime.jsx(select.SelectGroup, { children: options === null || options === void 0 ? void 0 : options.map((option) => (jsxRuntime.jsx(select.SelectItem, { value: option.value.toString(), disabled: option.disabled, children: option.label }, option.value))) }) })] }));
-};
+});
 const components = {
     Chevron,
     Dropdown,
 };
+const modifiersClassNames = {
+    hoverRange: "hover-range",
+};
+const classNames = {
+    root: "relative",
+    months: "flex flex-col sm:flex-row space-y-4 sm:space-y-0 justify-center",
+    month: "flex flex-col items-center space-y-4",
+    month_caption: "flex justify-center pt-1 relative items-center",
+    caption_label: "text-sm font-medium",
+    dropdowns: "inline-flex gap-1 items-center",
+    button_previous: utils.cn(button.buttonVariants({ variant: "outline" }), "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100 absolute left-3 top-5"),
+    button_next: utils.cn(button.buttonVariants({ variant: "outline" }), "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100 absolute right-3 top-5"),
+    month_grid: "w-full border-collapse space-y-1",
+    weekdays: "flex",
+    weekday: "text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]",
+    week: "flex w-full mt-2",
+    day: utils.cn("h-9 w-9 text-center text-sm p-0 relative", "[&:has([aria-selected].day-range-end)]:rounded-r-md", "[&:has([aria-selected].day-outside)]:bg-accent/50", "[&:has([aria-selected])]:bg-accent", "first:[&:has([aria-selected])]:rounded-l-md", "last:[&:has([aria-selected])]:rounded-r-md", "focus-within:relative focus-within:z-20 rounded-1"),
+    day_button: utils.cn(button.buttonVariants({ variant: "ghost" }), "h-9 w-9 p-0 font-normal aria-selected:opacity-100 rounded-l-md rounded-r-md"),
+    range_end: "day-range-end",
+    selected: "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground rounded-l-md rounded-r-md",
+    today: "bg-blue-600 text-white rounded-md",
+    outside: "day-outside text-muted-foreground opacity-50 aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30",
+    disabled: "text-muted-foreground opacity-50",
+    range_middle: "aria-selected:bg-accent aria-selected:text-accent-foreground",
+    hidden: "invisible",
+};
 const Calendar = React.memo((_a) => {
-    var _b, _c;
-    var { className, classNames, showOutsideDays = true } = _a, props = tslib_es6.__rest(_a, ["className", "classNames", "showOutsideDays"]);
-    const selectedMonth = (_b = props.month) === null || _b === void 0 ? void 0 : _b.getMonth();
-    const selectedYear = (_c = props.month) === null || _c === void 0 ? void 0 : _c.getFullYear();
-    const disabledLeftNavigation = React.useMemo(() => {
-        if (selectedMonth && props.startMonth) {
-            return selectedMonth === props.startMonth.getMonth() && selectedYear === props.startMonth.getFullYear();
-        }
-        return false;
-    }, [selectedMonth, selectedYear, props.startMonth]);
-    const disabledRightNavigation = React.useMemo(() => {
-        if (selectedMonth && props.endMonth) {
-            return selectedMonth === props.endMonth.getMonth() && selectedYear === props.endMonth.getFullYear();
-        }
-        return false;
-    }, [selectedMonth, selectedYear, props.endMonth]);
-    const _classNames = React.useMemo(() => (Object.assign({ months: "flex flex-col sm:flex-row space-y-4 sm:space-y-0 justify-center", month: "flex flex-col items-center space-y-4", month_caption: "flex justify-center pt-1 relative items-center", caption_label: "text-sm font-medium", nav: "space-x-1 flex items-center", dropdowns: "inline-flex gap-1 items-center", button_previous: utils.cn(button.buttonVariants({ variant: "outline" }), "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100 absolute left-5 top-5", disabledLeftNavigation && "pointer-events-none"), button_next: utils.cn(button.buttonVariants({ variant: "outline" }), "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100 absolute right-5 top-5", disabledRightNavigation && "pointer-events-none"), month_grid: "w-full border-collapse space-y-1", weekdays: utils.cn("flex", props.showWeekNumber && "justify-end"), weekday: "text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]", week: "flex w-full mt-2", day: "h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20 rounded-1", day_button: utils.cn(button.buttonVariants({ variant: "ghost" }), "h-9 w-9 p-0 font-normal aria-selected:opacity-100 rounded-l-md rounded-r-md"), range_end: "day-range-end", selected: "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground rounded-l-md rounded-r-md", today: "bg-accent text-accent-foreground", outside: "day-outside text-muted-foreground opacity-50 aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30", disabled: "text-muted-foreground opacity-50", range_middle: "aria-selected:bg-accent aria-selected:text-accent-foreground", hidden: "invisible" }, classNames)), [props.showWeekNumber, disabledLeftNavigation, disabledRightNavigation, classNames]);
-    return (jsxRuntime.jsx(DayPicker.DayPicker, Object.assign({ captionLayout: "dropdown", showOutsideDays: showOutsideDays, className: utils.cn("p-3", className), classNames: _classNames, components: components }, props)));
+    var { className } = _a, props = tslib_es6.__rest(_a, ["className"]);
+    return (jsxRuntime.jsx(DayPicker.DayPicker, Object.assign({ captionLayout: "dropdown", className: utils.cn("p-3", className), classNames: classNames, components: components, modifiersClassNames: modifiersClassNames }, props)));
 });
 Calendar.displayName = "Calendar";
 

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

@@ -69,7 +69,7 @@ const DateTimePicker = React.forwardRef((_a, ref) => {
                         ? format.formatDate(displayDate, hourCycle === 24 ? initHourFormat.hour24 : initHourFormat.hour12, {
                             locale: loc,
                         })
-                        : placeholder }) }), jsxRuntime.jsxs(popover.PopoverContent, { className: "w-auto p-0", children: [jsxRuntime.jsx(calendar.Calendar, Object.assign({ mode: "single", selected: displayDate, month: month, onSelect: (newDate) => {
+                        : placeholder }) }), jsxRuntime.jsxs(popover.PopoverContent, { className: "w-auto p-0 relative", children: [jsxRuntime.jsx(calendar.Calendar, Object.assign({ mode: "single", selected: displayDate, month: month, onSelect: (newDate) => {
                             var _a, _b, _c;
                             if (newDate) {
                                 newDate.setHours((_a = month === null || month === void 0 ? void 0 : month.getHours()) !== null && _a !== void 0 ? _a : 0, (_b = month === null || month === void 0 ? void 0 : month.getMinutes()) !== null && _b !== void 0 ? _b : 0, (_c = month === null || month === void 0 ? void 0 : month.getSeconds()) !== null && _c !== void 0 ? _c : 0);

package/dist/cjs/components/ui/date-pickers/month-select/month-select.js

@@ -18,7 +18,7 @@ const MonthSelect = React.forwardRef(({ value: month, onChange, locale = default
     const MONTHS = React.useMemo(() => genMonths(locale), []);
     return (jsxRuntime.jsxs(select.Select, { defaultValue: month === null || month === void 0 ? void 0 : month.toString(), onValueChange: (value) => {
             onChange === null || onChange === void 0 ? void 0 : onChange(Number.parseInt(value, 10));
-        }, children: [jsxRuntime.jsx(select.SelectTrigger, { ref: ref, className: "focus:bg-accent focus:text-accent-foreground w-fit gap-1 border-none p-0", children: jsxRuntime.jsx(select.SelectValue, {}) }), jsxRuntime.jsx(select.SelectContent, { children: MONTHS.map((month) => (jsxRuntime.jsx(select.SelectItem, { value: month.value.toString(), children: month.label }, month.value))) })] }));
+        }, children: [jsxRuntime.jsx(select.SelectTrigger, { ref: ref, children: jsxRuntime.jsx(select.SelectValue, {}) }), jsxRuntime.jsx(select.SelectContent, { children: MONTHS.map((month) => (jsxRuntime.jsx(select.SelectItem, { value: month.value.toString(), children: month.label }, month.value))) })] }));
 });
 MonthSelect.displayName = "MonthSelect";
 

package/dist/cjs/components/ui/date-pickers/time-picker/components/time-period-select.js

@@ -26,7 +26,7 @@ const TimePeriodSelect = React.forwardRef(({ period, setPeriod, date, onDateChan
             onDateChange === null || onDateChange === void 0 ? void 0 : onDateChange(utils.setDateByType(tempDate, hours.toString(), "12hours", period === "AM" ? "PM" : "AM"));
         }
     };
-    return (jsxRuntime.jsx(flex.Flex, { align: "center", className: "h-10", children: jsxRuntime.jsxs(select.Select, { defaultValue: period, onValueChange: (value) => handleValueChange(value), children: [jsxRuntime.jsx(select.SelectTrigger, { ref: ref, className: "focus:bg-accent focus:text-accent-foreground w-[65px]", onKeyDown: handleKeyDown, children: jsxRuntime.jsx(select.SelectValue, {}) }), jsxRuntime.jsxs(select.SelectContent, { children: [jsxRuntime.jsx(select.SelectItem, { value: "AM", children: "AM" }), jsxRuntime.jsx(select.SelectItem, { value: "PM", children: "PM" })] })] }) }));
+    return (jsxRuntime.jsx(flex.Flex, { align: "center", className: "h-10", children: jsxRuntime.jsxs(select.Select, { defaultValue: period, onValueChange: (value) => handleValueChange(value), children: [jsxRuntime.jsx(select.SelectTrigger, { ref: ref, className: "focus:bg-accent focus:text-accent-foreground px-2.5 gap-1 w-[64px]", onKeyDown: handleKeyDown, children: jsxRuntime.jsx(select.SelectValue, {}) }), jsxRuntime.jsxs(select.SelectContent, { children: [jsxRuntime.jsx(select.SelectItem, { value: "AM", children: "AM" }), jsxRuntime.jsx(select.SelectItem, { value: "PM", children: "PM" })] })] }) }));
 });
 TimePeriodSelect.displayName = "TimePeriodSelect";
 

package/dist/cjs/components/ui/date-pickers/year-select/year-select.js

@@ -10,7 +10,7 @@ const YearSelect = React.forwardRef(({ value: year, onChange, minYear = 1940, ma
     const YEARS = React.useMemo(() => range.default(minYear, maxYear, 1).map((y) => ({ value: y, label: y.toString() })), [minYear, maxYear]);
     return (jsxRuntime.jsxs(select.Select, { defaultValue: year === null || year === void 0 ? void 0 : year.toString(), onValueChange: (value) => {
             onChange === null || onChange === void 0 ? void 0 : onChange(Number.parseInt(value, 10));
-        }, children: [jsxRuntime.jsx(select.SelectTrigger, { ref: ref, className: "focus:bg-accent focus:text-accent-foreground w-fit gap-1 border-none p-0", children: jsxRuntime.jsx(select.SelectValue, {}) }), jsxRuntime.jsx(select.SelectContent, { position: "item-aligned", className: "max-h-[320px]", children: YEARS.map((year) => (jsxRuntime.jsx(select.SelectItem, { value: year.value.toString(), children: year.label }, year.value))) })] }));
+        }, children: [jsxRuntime.jsx(select.SelectTrigger, { ref: ref, children: jsxRuntime.jsx(select.SelectValue, {}) }), jsxRuntime.jsx(select.SelectContent, { position: "item-aligned", className: "max-h-[320px]", children: YEARS.map((year) => (jsxRuntime.jsx(select.SelectItem, { value: year.value.toString(), children: year.label }, year.value))) })] }));
 });
 YearSelect.displayName = "YearSelect";
 

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

@@ -23,7 +23,7 @@ const PaginationItem = (_a) => {
 PaginationItem.displayName = "PaginationItem";
 const PaginationLink = (_a) => {
     var { isActive, size = "icon" } = _a, props = tslib_es6.__rest(_a, ["isActive", "size"]);
-    return (jsxRuntime.jsx(button.Button, { asChild: true, variant: isActive ? "outline" : "ghost", size: size, children: jsxRuntime.jsx("a", Object.assign({ "aria-current": isActive ? "page" : undefined, "data-slot": "pagination-link", "data-active": isActive }, props)) }));
+    return (jsxRuntime.jsx(button.Button, { asChild: true, variant: isActive ? "outline" : "ghost", size: size, className: "select-none", children: jsxRuntime.jsx("a", Object.assign({ "aria-current": isActive ? "page" : undefined, "data-slot": "pagination-link", "data-active": isActive }, props)) }));
 };
 PaginationLink.displayName = "PaginationLink";
 const PaginationPrevious = (_a) => {

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

@@ -26,15 +26,15 @@ const DialogOverlay = (_a) => {
 };
 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", "overlay-appearance-animation overlay-zoom-animation", className) }, props, { children: [children, jsx(Close, { className: "data-[state=open]:bg-accent data-[state=open]:text-muted-foreground", asChild: true, children: jsx(IconClose, {}) })] }))] }));
+    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%-8px)] max-h-[calc(100dvh-24px)] rounded-lg border p-3 sm: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, jsx(Close, { className: "data-[state=open]:bg-accent data-[state=open]:text-muted-foreground", asChild: true, children: jsx(IconClose, {}) })] }))] }));
 };
 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)));
+    return (jsx("div", Object.assign({ "data-slot": "dialog-header", className: cn("flex flex-col gap-2 text-center sm:text-left order-first", 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)));
+    return (jsx("div", Object.assign({ "data-slot": "dialog-footer", className: cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end order-last", className) }, props)));
 };
 const DialogTitle = (_a) => {
     var { className } = _a, props = __rest(_a, ["className"]);

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

@@ -42,13 +42,13 @@ const DrawerContent = (_a) => {
                 ], [
                     "data-[vaul-drawer-direction=right]:inset-y-0",
                     "data-[vaul-drawer-direction=right]:right-0",
-                    "data-[vaul-drawer-direction=right]:w-3/4",
+                    "data-[vaul-drawer-direction=right]:w-[calc(100%-32px)]",
                     "data-[vaul-drawer-direction=right]:border-l",
                     "data-[vaul-drawer-direction=right]:sm:max-w-sm",
                 ], [
                     "data-[vaul-drawer-direction=left]:inset-y-0",
                     "data-[vaul-drawer-direction=left]:left-0",
-                    "data-[vaul-drawer-direction=left]:w-3/4",
+                    "data-[vaul-drawer-direction=left]:w-[calc(100%-32px)]",
                     "data-[vaul-drawer-direction=left]:border-r",
                     "data-[vaul-drawer-direction=left]:sm:max-w-sm",
                 ], className) }, props, { children: [jsx("div", { className: "bg-muted mx-auto mt-4 hidden h-2 w-[100px] shrink-0 rounded-full group-data-[vaul-drawer-direction=bottom]/drawer-content:block" }), children] }))] }));

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

@@ -5,7 +5,7 @@ import { cn } from '../../../lib/utils.js';
 
 const IconClose = (_a) => {
     var { className } = _a, props = __rest(_a, ["className"]);
-    return (jsx(Icon, Object.assign({ name: "x", size: 16, className: 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)));
+    return (jsx(Icon, Object.assign({ name: "x", size: 16, className: cn("absolute top-3 right-3 sm:top-6 sm:right-6", "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";
 

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

@@ -37,7 +37,7 @@ const contentVariants = cva([
                 "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
             ],
             right: [
-                "inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm",
+                "inset-y-0 right-0 h-full w-[calc(100%-32px)] border-l sm:max-w-sm",
                 "data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right",
             ],
             bottom: [
@@ -45,7 +45,7 @@ const contentVariants = cva([
                 "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
             ],
             left: [
-                "inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
+                "inset-y-0 left-0 h-full w-[calc(100%-32px)] border-r sm:max-w-sm",
                 "data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left",
             ],
         },
@@ -56,15 +56,15 @@ const contentVariants = cva([
 });
 const SheetContent = (_a) => {
     var { className, children, side = "right" } = _a, props = __rest(_a, ["className", "children", "side"]);
-    return (jsxs(SheetPortal, { children: [jsx(SheetOverlay, {}), jsxs(Content, Object.assign({ "data-slot": "sheet-content", className: cn(contentVariants({ side }), className) }, props, { children: [children, jsx(Close, { className: "data-[state=open]:bg-secondary", asChild: true, children: jsx(IconClose, {}) })] }))] }));
+    return (jsxs(SheetPortal, { children: [jsx(SheetOverlay, {}), jsxs(Content, Object.assign({ "data-slot": "sheet-content", className: cn(contentVariants({ side }), className) }, props, { children: [children, jsx(Close, { className: "data-[state=open]:bg-secondary", asChild: true, children: jsx(IconClose, { className: "sm:top-4 sm:right-4" }) })] }))] }));
 };
 const SheetHeader = (_a) => {
     var { className } = _a, props = __rest(_a, ["className"]);
-    return jsx("div", Object.assign({ "data-slot": "sheet-header", className: cn("flex flex-col gap-1.5 p-4", className) }, props));
+    return jsx("div", Object.assign({ "data-slot": "sheet-header", className: cn("flex flex-col gap-1.5 p-3 sm:p-4", className) }, props));
 };
 const SheetFooter = (_a) => {
     var { className } = _a, props = __rest(_a, ["className"]);
-    return jsx("div", Object.assign({ "data-slot": "sheet-footer", className: cn("mt-auto flex flex-col gap-2 p-4", className) }, props));
+    return (jsx("div", Object.assign({ "data-slot": "sheet-footer", className: cn("mt-auto flex flex-col gap-2 p-3 sm:p-4", className) }, props)));
 };
 const SheetTitle = (_a) => {
     var { className } = _a, props = __rest(_a, ["className"]);

package/dist/esm/components/ui/calendar/calendar.js

@@ -1,18 +1,18 @@
 "use client";
 import { __rest } from '../../../node_modules/tslib/tslib.es6.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { memo, useMemo } from 'react';
+import { memo } from 'react';
 import { cn } from '../../../lib/utils.js';
 import { Icon } from '../../media/icon/icon.js';
 import { buttonVariants } from '../../buttons/button/button.js';
 import { Select, SelectTrigger, SelectValue, SelectContent, SelectGroup, SelectItem } from '../../forms/select/select.js';
 import { DayPicker } from '../../../node_modules/react-day-picker/dist/esm/DayPicker.js';
 
-const Chevron = (_a) => {
+const Chevron = memo((_a) => {
     var { className, orientation } = _a, props = __rest(_a, ["className", "orientation"]);
     return (jsx(Icon, Object.assign({ name: `chevron-${orientation}`, className: cn("h-4 w-4", className) }, props)));
-};
-const Dropdown = (props) => {
+});
+const Dropdown = memo((props) => {
     const { options, value, onChange } = props;
     const handleValueChange = (newValue) => {
         if (onChange) {
@@ -25,30 +25,40 @@ const Dropdown = (props) => {
         }
     };
     return (jsxs(Select, { value: value === null || value === void 0 ? void 0 : value.toString(), onValueChange: handleValueChange, children: [jsx(SelectTrigger, { className: "gap-1 overflow-hidden w-[84px] [&_[data-slot=select-value]]:truncate [&_[data-slot=select-value]]:block", children: jsx(SelectValue, {}) }), jsx(SelectContent, { children: jsx(SelectGroup, { children: options === null || options === void 0 ? void 0 : options.map((option) => (jsx(SelectItem, { value: option.value.toString(), disabled: option.disabled, children: option.label }, option.value))) }) })] }));
-};
+});
 const components = {
     Chevron,
     Dropdown,
 };
+const modifiersClassNames = {
+    hoverRange: "hover-range",
+};
+const classNames = {
+    root: "relative",
+    months: "flex flex-col sm:flex-row space-y-4 sm:space-y-0 justify-center",
+    month: "flex flex-col items-center space-y-4",
+    month_caption: "flex justify-center pt-1 relative items-center",
+    caption_label: "text-sm font-medium",
+    dropdowns: "inline-flex gap-1 items-center",
+    button_previous: cn(buttonVariants({ variant: "outline" }), "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100 absolute left-3 top-5"),
+    button_next: cn(buttonVariants({ variant: "outline" }), "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100 absolute right-3 top-5"),
+    month_grid: "w-full border-collapse space-y-1",
+    weekdays: "flex",
+    weekday: "text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]",
+    week: "flex w-full mt-2",
+    day: cn("h-9 w-9 text-center text-sm p-0 relative", "[&:has([aria-selected].day-range-end)]:rounded-r-md", "[&:has([aria-selected].day-outside)]:bg-accent/50", "[&:has([aria-selected])]:bg-accent", "first:[&:has([aria-selected])]:rounded-l-md", "last:[&:has([aria-selected])]:rounded-r-md", "focus-within:relative focus-within:z-20 rounded-1"),
+    day_button: cn(buttonVariants({ variant: "ghost" }), "h-9 w-9 p-0 font-normal aria-selected:opacity-100 rounded-l-md rounded-r-md"),
+    range_end: "day-range-end",
+    selected: "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground rounded-l-md rounded-r-md",
+    today: "bg-blue-600 text-white rounded-md",
+    outside: "day-outside text-muted-foreground opacity-50 aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30",
+    disabled: "text-muted-foreground opacity-50",
+    range_middle: "aria-selected:bg-accent aria-selected:text-accent-foreground",
+    hidden: "invisible",
+};
 const Calendar = memo((_a) => {
-    var _b, _c;
-    var { className, classNames, showOutsideDays = true } = _a, props = __rest(_a, ["className", "classNames", "showOutsideDays"]);
-    const selectedMonth = (_b = props.month) === null || _b === void 0 ? void 0 : _b.getMonth();
-    const selectedYear = (_c = props.month) === null || _c === void 0 ? void 0 : _c.getFullYear();
-    const disabledLeftNavigation = useMemo(() => {
-        if (selectedMonth && props.startMonth) {
-            return selectedMonth === props.startMonth.getMonth() && selectedYear === props.startMonth.getFullYear();
-        }
-        return false;
-    }, [selectedMonth, selectedYear, props.startMonth]);
-    const disabledRightNavigation = useMemo(() => {
-        if (selectedMonth && props.endMonth) {
-            return selectedMonth === props.endMonth.getMonth() && selectedYear === props.endMonth.getFullYear();
-        }
-        return false;
-    }, [selectedMonth, selectedYear, props.endMonth]);
-    const _classNames = useMemo(() => (Object.assign({ months: "flex flex-col sm:flex-row space-y-4 sm:space-y-0 justify-center", month: "flex flex-col items-center space-y-4", month_caption: "flex justify-center pt-1 relative items-center", caption_label: "text-sm font-medium", nav: "space-x-1 flex items-center", dropdowns: "inline-flex gap-1 items-center", button_previous: cn(buttonVariants({ variant: "outline" }), "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100 absolute left-5 top-5", disabledLeftNavigation && "pointer-events-none"), button_next: cn(buttonVariants({ variant: "outline" }), "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100 absolute right-5 top-5", disabledRightNavigation && "pointer-events-none"), month_grid: "w-full border-collapse space-y-1", weekdays: cn("flex", props.showWeekNumber && "justify-end"), weekday: "text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]", week: "flex w-full mt-2", day: "h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20 rounded-1", day_button: cn(buttonVariants({ variant: "ghost" }), "h-9 w-9 p-0 font-normal aria-selected:opacity-100 rounded-l-md rounded-r-md"), range_end: "day-range-end", selected: "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground rounded-l-md rounded-r-md", today: "bg-accent text-accent-foreground", outside: "day-outside text-muted-foreground opacity-50 aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30", disabled: "text-muted-foreground opacity-50", range_middle: "aria-selected:bg-accent aria-selected:text-accent-foreground", hidden: "invisible" }, classNames)), [props.showWeekNumber, disabledLeftNavigation, disabledRightNavigation, classNames]);
-    return (jsx(DayPicker, Object.assign({ captionLayout: "dropdown", showOutsideDays: showOutsideDays, className: cn("p-3", className), classNames: _classNames, components: components }, props)));
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (jsx(DayPicker, Object.assign({ captionLayout: "dropdown", className: cn("p-3", className), classNames: classNames, components: components, modifiersClassNames: modifiersClassNames }, props)));
 });
 Calendar.displayName = "Calendar";
 

package/dist/esm/components/ui/date-pickers/date-time-picker/date-time-picker.js

@@ -67,7 +67,7 @@ const DateTimePicker = forwardRef((_a, ref) => {
                         ? format(displayDate, hourCycle === 24 ? initHourFormat.hour24 : initHourFormat.hour12, {
                             locale: loc,
                         })
-                        : placeholder }) }), jsxs(PopoverContent, { className: "w-auto p-0", children: [jsx(Calendar, Object.assign({ mode: "single", selected: displayDate, month: month, onSelect: (newDate) => {
+                        : placeholder }) }), jsxs(PopoverContent, { className: "w-auto p-0 relative", children: [jsx(Calendar, Object.assign({ mode: "single", selected: displayDate, month: month, onSelect: (newDate) => {
                             var _a, _b, _c;
                             if (newDate) {
                                 newDate.setHours((_a = month === null || month === void 0 ? void 0 : month.getHours()) !== null && _a !== void 0 ? _a : 0, (_b = month === null || month === void 0 ? void 0 : month.getMinutes()) !== null && _b !== void 0 ? _b : 0, (_c = month === null || month === void 0 ? void 0 : month.getSeconds()) !== null && _c !== void 0 ? _c : 0);

package/dist/esm/components/ui/date-pickers/month-select/month-select.js

@@ -16,7 +16,7 @@ const MonthSelect = forwardRef(({ value: month, onChange, locale = defaultLocale
     const MONTHS = useMemo(() => genMonths(locale), []);
     return (jsxs(Select, { defaultValue: month === null || month === void 0 ? void 0 : month.toString(), onValueChange: (value) => {
             onChange === null || onChange === void 0 ? void 0 : onChange(Number.parseInt(value, 10));
-        }, children: [jsx(SelectTrigger, { ref: ref, className: "focus:bg-accent focus:text-accent-foreground w-fit gap-1 border-none p-0", children: jsx(SelectValue, {}) }), jsx(SelectContent, { children: MONTHS.map((month) => (jsx(SelectItem, { value: month.value.toString(), children: month.label }, month.value))) })] }));
+        }, children: [jsx(SelectTrigger, { ref: ref, children: jsx(SelectValue, {}) }), jsx(SelectContent, { children: MONTHS.map((month) => (jsx(SelectItem, { value: month.value.toString(), children: month.label }, month.value))) })] }));
 });
 MonthSelect.displayName = "MonthSelect";
 

package/dist/esm/components/ui/date-pickers/time-picker/components/time-period-select.js

@@ -24,7 +24,7 @@ const TimePeriodSelect = forwardRef(({ period, setPeriod, date, onDateChange, on
             onDateChange === null || onDateChange === void 0 ? void 0 : onDateChange(setDateByType(tempDate, hours.toString(), "12hours", period === "AM" ? "PM" : "AM"));
         }
     };
-    return (jsx(Flex, { align: "center", className: "h-10", children: jsxs(Select, { defaultValue: period, onValueChange: (value) => handleValueChange(value), children: [jsx(SelectTrigger, { ref: ref, className: "focus:bg-accent focus:text-accent-foreground w-[65px]", onKeyDown: handleKeyDown, children: jsx(SelectValue, {}) }), jsxs(SelectContent, { children: [jsx(SelectItem, { value: "AM", children: "AM" }), jsx(SelectItem, { value: "PM", children: "PM" })] })] }) }));
+    return (jsx(Flex, { align: "center", className: "h-10", children: jsxs(Select, { defaultValue: period, onValueChange: (value) => handleValueChange(value), children: [jsx(SelectTrigger, { ref: ref, className: "focus:bg-accent focus:text-accent-foreground px-2.5 gap-1 w-[64px]", onKeyDown: handleKeyDown, children: jsx(SelectValue, {}) }), jsxs(SelectContent, { children: [jsx(SelectItem, { value: "AM", children: "AM" }), jsx(SelectItem, { value: "PM", children: "PM" })] })] }) }));
 });
 TimePeriodSelect.displayName = "TimePeriodSelect";
 

package/dist/esm/components/ui/date-pickers/year-select/year-select.js

@@ -8,7 +8,7 @@ const YearSelect = forwardRef(({ value: year, onChange, minYear = 1940, maxYear
     const YEARS = useMemo(() => range(minYear, maxYear, 1).map((y) => ({ value: y, label: y.toString() })), [minYear, maxYear]);
     return (jsxs(Select, { defaultValue: year === null || year === void 0 ? void 0 : year.toString(), onValueChange: (value) => {
             onChange === null || onChange === void 0 ? void 0 : onChange(Number.parseInt(value, 10));
-        }, children: [jsx(SelectTrigger, { ref: ref, className: "focus:bg-accent focus:text-accent-foreground w-fit gap-1 border-none p-0", children: jsx(SelectValue, {}) }), jsx(SelectContent, { position: "item-aligned", className: "max-h-[320px]", children: YEARS.map((year) => (jsx(SelectItem, { value: year.value.toString(), children: year.label }, year.value))) })] }));
+        }, children: [jsx(SelectTrigger, { ref: ref, children: jsx(SelectValue, {}) }), jsx(SelectContent, { position: "item-aligned", className: "max-h-[320px]", children: YEARS.map((year) => (jsx(SelectItem, { value: year.value.toString(), children: year.label }, year.value))) })] }));
 });
 YearSelect.displayName = "YearSelect";
 

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

@@ -21,7 +21,7 @@ const PaginationItem = (_a) => {
 PaginationItem.displayName = "PaginationItem";
 const PaginationLink = (_a) => {
     var { isActive, size = "icon" } = _a, props = __rest(_a, ["isActive", "size"]);
-    return (jsx(Button, { asChild: true, variant: isActive ? "outline" : "ghost", size: size, children: jsx("a", Object.assign({ "aria-current": isActive ? "page" : undefined, "data-slot": "pagination-link", "data-active": isActive }, props)) }));
+    return (jsx(Button, { asChild: true, variant: isActive ? "outline" : "ghost", size: size, className: "select-none", children: jsx("a", Object.assign({ "aria-current": isActive ? "page" : undefined, "data-slot": "pagination-link", "data-active": isActive }, props)) }));
 };
 PaginationLink.displayName = "PaginationLink";
 const PaginationPrevious = (_a) => {

package/dist/styles.css

@@ -11,6 +11,7 @@
     --color-red-300: oklch(80.8% 0.114 19.571);
     --color-red-400: oklch(70.4% 0.191 22.216);
     --color-red-600: oklch(57.7% 0.245 27.325);
+    --color-blue-600: oklch(54.6% 0.245 262.881);
     --color-slate-200: oklch(92.9% 0.013 255.508);
     --color-black: #000;
     --color-white: #fff;
@@ -274,12 +275,12 @@
   .top-1\/2 {
     top: calc(1/2 * 100%);
   }
+  .top-3 {
+    top: calc(var(--spacing) * 3);
+  }
   .top-3\.5 {
     top: calc(var(--spacing) * 3.5);
   }
-  .top-4 {
-    top: calc(var(--spacing) * 4);
-  }
   .top-5 {
     top: calc(var(--spacing) * 5);
   }
@@ -298,12 +299,6 @@
   .right-3 {
     right: calc(var(--spacing) * 3);
   }
-  .right-4 {
-    right: calc(var(--spacing) * 4);
-  }
-  .right-5 {
-    right: calc(var(--spacing) * 5);
-  }
   .bottom-0 {
     bottom: calc(var(--spacing) * 0);
   }
@@ -316,8 +311,8 @@
   .left-2 {
     left: calc(var(--spacing) * 2);
   }
-  .left-5 {
-    left: calc(var(--spacing) * 5);
+  .left-3 {
+    left: calc(var(--spacing) * 3);
   }
   .left-\[50\%\] {
     left: 50%;
@@ -794,6 +789,9 @@
   .max-h-\[320px\] {
     max-height: 320px;
   }
+  .max-h-\[calc\(100dvh-24px\)\] {
+    max-height: calc(100dvh - 24px);
+  }
   .max-h-full {
     max-height: 100%;
   }
@@ -851,9 +849,6 @@
   .w-1\/4 {
     width: calc(1/4 * 100%);
   }
-  .w-3\/4 {
-    width: calc(3/4 * 100%);
-  }
   .w-4 {
     width: calc(var(--spacing) * 4);
   }
@@ -893,8 +888,8 @@
   .w-\[48px\] {
     width: 48px;
   }
-  .w-\[65px\] {
-    width: 65px;
+  .w-\[64px\] {
+    width: 64px;
   }
   .w-\[84px\] {
     width: 84px;
@@ -923,6 +918,9 @@
   .w-\[600px\] {
     width: 600px;
   }
+  .w-\[calc\(100\%-32px\)\] {
+    width: calc(100% - 32px);
+  }
   .w-auto {
     width: auto;
   }
@@ -953,8 +951,8 @@
   .max-w-6xl {
     max-width: var(--container-6xl);
   }
-  .max-w-\[calc\(100\%-2rem\)\] {
-    max-width: calc(100% - 2rem);
+  .max-w-\[calc\(100\%-8px\)\] {
+    max-width: calc(100% - 8px);
   }
   .max-w-full {
     max-width: 100%;
@@ -1333,13 +1331,6 @@
       margin-inline-end: calc(calc(var(--spacing) * -4) * calc(1 - var(--tw-space-x-reverse)));
     }
   }
-  .space-x-1 {
-    :where(& > :not(:last-child)) {
-      --tw-space-x-reverse: 0;
-      margin-inline-start: calc(calc(var(--spacing) * 1) * var(--tw-space-x-reverse));
-      margin-inline-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-x-reverse)));
-    }
-  }
   .space-x-2 {
     :where(& > :not(:last-child)) {
       --tw-space-x-reverse: 0;
@@ -1516,6 +1507,9 @@
       background-color: color-mix(in oklab, var(--color-black) 50%, transparent);
     }
   }
+  .bg-blue-600 {
+    background-color: var(--color-blue-600);
+  }
   .bg-border {
     background-color: var(--border);
   }
@@ -1983,9 +1977,6 @@
   .text-accent {
     color: var(--accent);
   }
-  .text-accent-foreground {
-    color: var(--accent-foreground);
-  }
   .text-card-foreground {
     color: var(--card-foreground);
   }
@@ -3447,9 +3438,9 @@
       left: calc(var(--spacing) * 0);
     }
   }
-  .data-\[vaul-drawer-direction\=left\]\:w-3\/4 {
+  .data-\[vaul-drawer-direction\=left\]\:w-\[calc\(100\%-32px\)\] {
     &[data-vaul-drawer-direction="left"] {
-      width: calc(3/4 * 100%);
+      width: calc(100% - 32px);
     }
   }
   .data-\[vaul-drawer-direction\=left\]\:border-r {
@@ -3468,9 +3459,9 @@
       right: calc(var(--spacing) * 0);
     }
   }
-  .data-\[vaul-drawer-direction\=right\]\:w-3\/4 {
+  .data-\[vaul-drawer-direction\=right\]\:w-\[calc\(100\%-32px\)\] {
     &[data-vaul-drawer-direction="right"] {
-      width: calc(3/4 * 100%);
+      width: calc(100% - 32px);
     }
   }
   .data-\[vaul-drawer-direction\=right\]\:border-l {
@@ -3536,6 +3527,16 @@
       position: sticky;
     }
   }
+  .sm\:top-4 {
+    @media (width >= 40rem) {
+      top: calc(var(--spacing) * 4);
+    }
+  }
+  .sm\:top-6 {
+    @media (width >= 40rem) {
+      top: calc(var(--spacing) * 6);
+    }
+  }
   .sm\:top-auto {
     @media (width >= 40rem) {
       top: auto;
@@ -3546,6 +3547,16 @@
       right: calc(var(--spacing) * 0);
     }
   }
+  .sm\:right-4 {
+    @media (width >= 40rem) {
+      right: calc(var(--spacing) * 4);
+    }
+  }
+  .sm\:right-6 {
+    @media (width >= 40rem) {
+      right: calc(var(--spacing) * 6);
+    }
+  }
   .sm\:bottom-0 {
     @media (width >= 40rem) {
       bottom: calc(var(--spacing) * 0);
@@ -9474,6 +9485,12 @@
     }
   }
 }
+@layer components {
+  .hover-range {
+    background-color: var(--accent);
+    color: var(--accent-foreground);
+  }
+}
 @property --tw-translate-x {
   syntax: "*";
   inherits: false;

package/dist/types/index.d.ts

@@ -450,7 +450,7 @@ type ToastActionElement = ReactElement<typeof ToastAction>;
 declare const Text: react.ForwardRefExoticComponent<{
     asChild?: boolean;
 } & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & VariantProps<(props?: ({
-    size?: 2 | 1 | 3 | 4 | 5 | 6 | 9 | 8 | 7 | null | undefined;
+    size?: 1 | 2 | 3 | 9 | 8 | 7 | 6 | 5 | 4 | null | undefined;
     weight?: "bold" | "medium" | "light" | "regular" | null | undefined;
     align?: "center" | "right" | "left" | null | undefined;
     color?: "default" | "destructive" | "secondary" | "muted" | "primary" | "accent" | null | undefined;
@@ -462,7 +462,7 @@ declare const Heading: react.ForwardRefExoticComponent<{
     level?: HeadingLevel;
     asChild?: boolean;
 } & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref"> & VariantProps<(props?: ({
-    size?: 2 | 1 | 3 | 4 | 5 | 6 | 9 | 8 | 7 | null | undefined;
+    size?: 1 | 2 | 3 | 9 | 8 | 7 | 6 | 5 | 4 | null | undefined;
     weight?: "bold" | "medium" | "light" | "regular" | null | undefined;
     align?: "center" | "right" | "left" | null | undefined;
     color?: "default" | "destructive" | "secondary" | "muted" | "primary" | "accent" | null | undefined;
@@ -1487,10 +1487,10 @@ declare const EmptyState: react.ForwardRefExoticComponent<Omit<{
         inline?: boolean;
     } & react.RefAttributes<HTMLDivElement>, "ref">>;
     Title: FC<Omit<{
-        level?: 2 | 1 | 3 | 4 | 5 | 6;
+        level?: 1 | 2 | 3 | 6 | 5 | 4;
         asChild?: boolean;
     } & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref"> & class_variance_authority.VariantProps<(props?: ({
-        size?: 2 | 1 | 3 | 4 | 5 | 6 | 9 | 8 | 7 | null | undefined;
+        size?: 1 | 2 | 3 | 9 | 8 | 7 | 6 | 5 | 4 | null | undefined;
         weight?: "bold" | "medium" | "light" | "regular" | null | undefined;
         align?: "center" | "right" | "left" | null | undefined;
         color?: "default" | "destructive" | "secondary" | "muted" | "primary" | "accent" | null | undefined;
@@ -1499,7 +1499,7 @@ declare const EmptyState: react.ForwardRefExoticComponent<Omit<{
     Description: FC<Omit<{
         asChild?: boolean;
     } & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & class_variance_authority.VariantProps<(props?: ({
-        size?: 2 | 1 | 3 | 4 | 5 | 6 | 9 | 8 | 7 | null | undefined;
+        size?: 1 | 2 | 3 | 9 | 8 | 7 | 6 | 5 | 4 | null | undefined;
         weight?: "bold" | "medium" | "light" | "regular" | null | undefined;
         align?: "center" | "right" | "left" | null | undefined;
         color?: "default" | "destructive" | "secondary" | "muted" | "primary" | "accent" | null | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "art-bd-ui",
-  "version": "1.0.8",
+  "version": "1.0.9",
   "description": "Set of handy components for React like projects",
   "type": "module",
   "main": "./dist/cjs/index.js",