@g4rcez/components 0.0.28 → 0.0.30

package/dist/components/core/button.js

@@ -4,7 +4,7 @@ import { cva } from "class-variance-authority";
 import { forwardRef } from "react";
 import { css } from "../../lib/dom";
 import { Polymorph } from "./polymorph";
-const buttonVariants = cva("inline-flex duration-700 enabled:hover:bg-opacity-70 data-[loading=true]:opacity-30 data-[loading=true]:animate-pulse gap-1.5 text-main-foreground border-2 border-transparent items-center justify-center align-middle cursor-pointer whitespace-nowrap font-medium transition-colors ease-in disabled:cursor-not-allowed disabled:bg-opacity-40 disabled:text-opacity-80 focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-ring", {
+const buttonVariants = cva("inline-flex duration-700 enabled:hover:bg-opacity-80 data-[loading=true]:opacity-30 data-[loading=true]:animate-pulse gap-1.5 text-main-foreground border-2 border-transparent items-center justify-center align-middle cursor-pointer whitespace-nowrap font-medium transition-colors ease-in disabled:cursor-not-allowed disabled:bg-opacity-40 disabled:text-opacity-80 focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-ring ease-normal", {
     variants: {
         size: {
             default: "h-10 px-4 py-2",

package/dist/components/core/polymorph.d.ts

@@ -3,7 +3,7 @@ import { Override } from "../../types";
 type Polymorphism<T extends React.ElementType> = React.PropsWithChildren<{
     as?: T;
 }>;
-export type Props<T extends React.ElementType = React.ElementType> = Polymorphism<T> & Omit<React.ComponentPropsWithRef<T>, keyof Polymorphism<T>>;
+type Props<T extends React.ElementType = React.ElementType> = Polymorphism<T> & Omit<React.ComponentPropsWithRef<T>, keyof Polymorphism<T>>;
 export type PolymorphicProps<P extends {}, T extends React.ElementType = React.ElementType> = Omit<T extends string ? Override<React.ComponentProps<T> & Props<T>, P> : Override<Props<T>, P>, keyof Polymorphism<T>> & Polymorphism<T>;
 export declare const Polymorph: React.ForwardRefExoticComponent<Omit<Props<React.ElementType<any, keyof React.JSX.IntrinsicElements>>, "ref"> & React.RefAttributes<any>>;
 export {};

package/dist/components/core/polymorph.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"polymorph.d.ts","sourceRoot":"","sources":["../../../src/components/core/polymorph.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAEvC,KAAK,YAAY,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,IAAI,KAAK,CAAC,iBAAiB,CAAC;IAAE,EAAE,CAAC,EAAE,CAAC,CAAA;CAAE,CAAC,CAAC;AAErF,MAAM,MAAM,KAAK,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,KAAK,CAAC,WAAW,IAAI,YAAY,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,qBAAqB,CAAC,CAAC,CAAC,EAAE,MAAM,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC;AAEnJ,MAAM,MAAM,gBAAgB,CAAC,CAAC,SAAS,EAAE,EAAE,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,KAAK,CAAC,WAAW,IAAI,IAAI,CAC9F,CAAC,SAAS,MAAM,GAAG,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,EAC1F,MAAM,YAAY,CAAC,CAAC,CAAC,CACxB,GACG,YAAY,CAAC,CAAC,CAAC,CAAC;AAEpB,eAAO,MAAM,SAAS,2IAGpB,CAAC"}
+{"version":3,"file":"polymorph.d.ts","sourceRoot":"","sources":["../../../src/components/core/polymorph.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAEvC,KAAK,YAAY,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,IAAI,KAAK,CAAC,iBAAiB,CAAC;IAAE,EAAE,CAAC,EAAE,CAAC,CAAA;CAAE,CAAC,CAAC;AAErF,KAAK,KAAK,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,KAAK,CAAC,WAAW,IAAI,YAAY,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,qBAAqB,CAAC,CAAC,CAAC,EAAE,MAAM,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC;AAE5I,MAAM,MAAM,gBAAgB,CAAC,CAAC,SAAS,EAAE,EAAE,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,KAAK,CAAC,WAAW,IAAI,IAAI,CAC9F,CAAC,SAAS,MAAM,GAAG,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,EAC1F,MAAM,YAAY,CAAC,CAAC,CAAC,CACxB,GACG,YAAY,CAAC,CAAC,CAAC,CAAC;AAEpB,eAAO,MAAM,SAAS,2IAGpB,CAAC"}

package/dist/components/core/resizable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"resizable.d.ts","sourceRoot":"","sources":["../../../src/components/core/resizable.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,eAAO,MAAM,SAAS,iBAAkB,KAAK,CAAC,iBAAiB,4CAO9D,CAAC"}
+{"version":3,"file":"resizable.d.ts","sourceRoot":"","sources":["../../../src/components/core/resizable.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAuC,MAAM,OAAO,CAAC;AAkD5D,eAAO,MAAM,SAAS,iBAAkB,KAAK,CAAC,iBAAiB,4CAQ9D,CAAC"}

package/dist/components/core/resizable.js

@@ -1,8 +1,47 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { motion } from "framer-motion";
-import useMeasure from "react-use-measure";
+import { motion, useMotionValue } from "framer-motion";
+import { useEffect, useMemo, useState } from "react";
+const defaultState = {
+    x: 0,
+    y: 0,
+    width: 0,
+    height: 0,
+    top: 0,
+    left: 0,
+    bottom: 0,
+    right: 0,
+};
+const useElementRect = () => {
+    const [element, ref] = useState(null);
+    const motion = useMotionValue(defaultState);
+    const observer = useMemo(() => new window.ResizeObserver((entries) => {
+        if (entries[0]) {
+            const rect = entries[0].contentRect;
+            motion.set({
+                x: rect.x,
+                y: rect.y,
+                width: rect.width,
+                height: rect.height,
+                top: rect.top,
+                left: rect.left,
+                bottom: rect.bottom,
+                right: rect.right,
+            });
+        }
+    }), []);
+    useEffect(() => {
+        if (!element)
+            return;
+        observer.observe(element);
+        return () => {
+            observer.disconnect();
+        };
+    }, [element]);
+    return [ref, motion];
+};
 export const Resizable = ({ children }) => {
-    const [ref, bounds] = useMeasure();
-    return (_jsx(motion.div, { animate: { height: bounds.height > 0 ? bounds.height : "auto" }, children: _jsx("div", { ref: ref, children: children }) }));
+    const [ref, bounds] = useElementRect();
+    const h = bounds.get().height;
+    return (_jsx(motion.div, { animate: { height: h > 0 ? h : "auto" }, children: _jsx("div", { ref: ref, children: children }) }));
 };

package/dist/components/display/alert.d.ts

@@ -1,8 +1,7 @@
 import { type VariantProps } from "class-variance-authority";
-import React from "react";
-import { PolymorphicProps } from "../core/polymorph";
 import { HTMLMotionProps } from "framer-motion";
-import { PropsWithChildren } from "react";
+import React, { PropsWithChildren } from "react";
+import { PolymorphicProps } from "../core/polymorph";
 type CollapseProps = {
     open: boolean;
 } & HTMLMotionProps<"section">;

package/dist/components/display/alert.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"alert.d.ts","sourceRoot":"","sources":["../../../src/components/display/alert.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAElE,OAAO,KAAqB,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAa,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAChE,OAAO,EAAE,eAAe,EAAU,MAAM,eAAe,CAAC;AACxD,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAc1C,KAAK,aAAa,GAAG;IAAE,IAAI,EAAE,OAAO,CAAA;CAAE,GAAG,eAAe,CAAC,SAAS,CAAC,CAAC;AAEpE,eAAO,MAAM,QAAQ,UAAW,iBAAiB,CAAC,aAAa,CAAC,4CAgB/D,CAAC;AAEF,QAAA,MAAM,aAAa;;mFASjB,CAAC;AAEH,MAAM,MAAM,UAAU,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,KAAK,IAAI,gBAAgB,CAC1E,YAAY,CAAC,OAAO,aAAa,CAAC,GAC9B,OAAO,CAAC;IACJ,SAAS,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,OAAO,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;CACzC,CAAC,EACN,CAAC,CACJ,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,KAAK,EAAE,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,KAAK,GAsCxE,CAAC"}
+{"version":3,"file":"alert.d.ts","sourceRoot":"","sources":["../../../src/components/display/alert.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,eAAe,EAAU,MAAM,eAAe,CAAC;AAExD,OAAO,KAAK,EAAE,EAAc,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE7D,OAAO,EAAa,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAahE,KAAK,aAAa,GAAG;IAAE,IAAI,EAAE,OAAO,CAAA;CAAE,GAAG,eAAe,CAAC,SAAS,CAAC,CAAC;AAEpE,eAAO,MAAM,QAAQ,UAAW,iBAAiB,CAAC,aAAa,CAAC,4CAgB/D,CAAC;AAEF,QAAA,MAAM,aAAa;;mFASjB,CAAC;AAEH,MAAM,MAAM,UAAU,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,KAAK,IAAI,gBAAgB,CAC1E,YAAY,CAAC,OAAO,aAAa,CAAC,GAC9B,OAAO,CAAC;IACJ,SAAS,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,OAAO,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;CACzC,CAAC,EACN,CAAC,CACJ,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,KAAK,EAAE,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,KAAK,GAsCxE,CAAC"}

package/dist/components/display/alert.js

@@ -1,11 +1,11 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
+import { motion } from "framer-motion";
 import { CheckCircleIcon, CircleAlertIcon, XIcon } from "lucide-react";
 import { forwardRef } from "react";
-import { Polymorph } from "../core/polymorph";
-import { motion } from "framer-motion";
 import { css } from "../../lib/dom";
+import { Polymorph } from "../core/polymorph";
 const variants = {
     true: { opacity: 1, height: "auto" },
     false: { opacity: [0.7, 0.3, 0], height: 0 },
@@ -15,19 +15,19 @@ const transition = {
     duration: 0.7,
     ease: [0.04, 0.62, 0.23, 0.98],
 };
-export const Collapse = (props) => (_jsx(motion.section, Object.assign({}, props, { layout: true, layoutRoot: true, layoutScroll: true, initial: props.open, animate: props.open.toString(), "aria-hidden": !props.open, className: props.className, exit: variants.false, transition: transition, variants: variants, children: props.children })));
+export const Collapse = (props) => (_jsx(motion.section, Object.assign({}, props, { layout: true, layoutRoot: true, layoutScroll: true, initial: !props.open, animate: props.open.toString(), "aria-hidden": !props.open, className: props.className, exit: variants.false, transition: transition, variants: variants, children: props.children })));
 const alertVariants = cva("px-4 py-4 border relative rounded-lg text-sm", {
     variants: {
         theme: {
             neutral: "border-border bg-background",
             danger: "text-danger-contrast bg-danger/10 border-danger/50",
-            success: "text-success-contrast bg-success/10 border-success/50",
+            success: "text-success-foreground bg-success/10 border-success/50",
         },
     },
     defaultVariants: { theme: "neutral" },
 });
 export const Alert = forwardRef(function Alert(_a, ref) {
     var _b;
-    var { className, theme, onClose, open } = _a, props = __rest(_a, ["className", "theme", "onClose", "open"]);
-    return (_jsx("div", { "data-open": !!open, "aria-hidden": !open, className: "data-[open=true]:mb-4 isolate data-[open=true]:pointer-events-auto pointer-events-none", children: _jsx(Collapse, { "data-open": !!open, open: !!open, children: _jsxs(Polymorph, Object.assign({}, props, { className: css(alertVariants({ theme }), className), ref: ref, "data-theme": theme, role: "alert", as: (_b = props.as) !== null && _b !== void 0 ? _b : "div", children: [_jsxs("h4", { className: "mb-2 flex items-center gap-2", children: [theme === "success" ? _jsx(CheckCircleIcon, { size: 20 }) : null, theme === "danger" ? _jsx(CircleAlertIcon, { size: 20 }) : null, _jsx("span", { className: "tracking-3 text-balance text-lg font-semibold", children: props.title })] }), props.children, open !== undefined ? (_jsx("button", { type: "button", onClick: () => onClose === null || onClose === void 0 ? void 0 : onClose(false), className: "text-foreground hover:text-danger absolute right-3 top-3 transition-colors duration-300 ease-in-out", children: _jsx(XIcon, { size: 20 }) })) : null] })) }) }));
+    var { className, theme, onClose, open = true } = _a, props = __rest(_a, ["className", "theme", "onClose", "open"]);
+    return (_jsx("div", { "data-open": !!open, "aria-hidden": !open, className: "pointer-events-none isolate data-[open=true]:pointer-events-auto data-[open=true]:mb-4", children: _jsx(Collapse, { "data-open": !!open, open: !!open, children: _jsxs(Polymorph, Object.assign({}, props, { className: css(alertVariants({ theme }), className), ref: ref, "data-theme": theme, role: "alert", as: (_b = props.as) !== null && _b !== void 0 ? _b : "div", children: [_jsxs("h4", { className: "mb-2 flex items-center gap-2", children: [theme === "success" ? _jsx(CheckCircleIcon, { size: 20 }) : null, theme === "danger" ? _jsx(CircleAlertIcon, { size: 20 }) : null, _jsx("span", { className: "tracking-3 text-balance text-lg font-semibold", children: props.title })] }), props.children, onClose !== undefined ? (_jsx("button", { type: "button", onClick: () => onClose(false), className: "duration-300 ease-in-out absolute right-3 top-3 text-foreground transition-colors hover:text-danger", children: _jsx(XIcon, { size: 20 }) })) : null] })) }) }));
 });

package/dist/components/display/calendar.d.ts

@@ -5,7 +5,7 @@ export type CalendarProps = {
     locale?: Locales;
     markToday?: boolean;
     autoFocusToday?: boolean;
-    onChange?: (d: Date) => void;
+    onChange?: (d: Date | undefined) => void;
 };
 export declare const Calendar: ({ locale, disabledDate, markToday, autoFocusToday, date, onChange }: CalendarProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=calendar.d.ts.map

package/dist/components/display/calendar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"calendar.d.ts","sourceRoot":"","sources":["../../../src/components/display/calendar.tsx"],"names":[],"mappings":"AAsBA,OAAqB,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AAmBvD,MAAM,MAAM,aAAa,GAAG;IACxB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO,CAAC;IACvC,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,IAAI,KAAK,IAAI,CAAC;CAChC,CAAC;AAmDF,eAAO,MAAM,QAAQ,wEAAuF,aAAa,4CAmMxH,CAAC"}
+{"version":3,"file":"calendar.d.ts","sourceRoot":"","sources":["../../../src/components/display/calendar.tsx"],"names":[],"mappings":"AAsBA,OAAqB,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AAoBvD,MAAM,MAAM,aAAa,GAAG;IACxB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO,CAAC;IACvC,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,IAAI,GAAG,SAAS,KAAK,IAAI,CAAC;CAC5C,CAAC;AAmDF,eAAO,MAAM,QAAQ,wEAAuF,aAAa,4CAqMxH,CAAC"}

package/dist/components/display/calendar.js

@@ -8,6 +8,7 @@ import { Is } from "sidekicker";
 import TheMaskInput from "the-mask-input";
 import { useReducer } from "use-typed-reducer";
 import { useDebounce } from "../../hooks/use-debounce";
+import { css } from "../../lib/dom";
 import { Resizable } from "../core/resizable";
 const transition = { type: "spring", bounce: 0.1, duration: 0.3 };
 const dir = (mod) => (n = 1) => ({ x: `${100 * mod * n}%`, opacity: 0.5 });
@@ -137,20 +138,20 @@ export const Calendar = ({ locale, disabledDate, markToday = true, autoFocusToda
             d.setFullYear(+y);
             return d;
         });
-    }, 700);
+    }, 1200);
     const onChangeYear = (e) => {
         const value = e.currentTarget.value;
         dispatch.onChangeYear(value);
         defer(value);
     };
-    return (_jsx(MotionConfig, { transition: transition, children: _jsxs("div", { className: "relative overflow-hidden", children: [_jsx("div", { className: "flex flex-col justify-center rounded text-center", children: _jsx(Resizable, { children: _jsx(AnimatePresence, { presenceAffectsLayout: true, mode: "popLayout", initial: false, custom: state.direction, onExitComplete: dispatch.onExitComplete, children: _jsxs(motion.div, { initial: "enter", animate: "middle", exit: "exit", children: [_jsxs("header", { className: "relative flex justify-between", children: [_jsx(motion.button, { onClick: dispatch.previousMonth, variants: removeImmediately, className: "z-calendar rounded-full p-1.5 hover:bg-primary", children: _jsx(ChevronLeftIcon, { className: "h-4 w-4" }) }), _jsx(motion.span, { variants: variants, custom: state.direction, className: "absolute z-normal isolate inset-0 flex items-center justify-center font-semibold", children: _jsxs("span", { className: "w-fit flex items-center justify-center gap-0.5 py-1", children: [_jsx("select", { style: { width: `${monthString.length}ch` }, value: monthString, onChange: dispatch.onChangeMonth, className: "appearance-none capitalize bg-transparent proportional-nums hover:text-primary cursor-pointer w-fit", children: state.months }), _jsx(TheMaskInput, { mask: "int", value: state.year, maxLength: 4, placeholder: "YYYY", onChange: onChangeYear, style: { width: `${state.year.length}ch` }, className: "w-16 bg-transparent appearance-none hover:text-primary cursor-pointer" })] }) }), _jsx(motion.button, { variants: removeImmediately, className: "z-calendar rounded-full p-1.5 hover:bg-primary", onClick: dispatch.nextMonth, children: _jsx(ChevronRightIcon, { className: "h-4 w-4" }) }), _jsx("div", { className: "absolute inset-0", style: {
+    return (_jsx(MotionConfig, { transition: transition, children: _jsxs("div", { className: "relative overflow-hidden", children: [_jsx("div", { className: "flex flex-col justify-center rounded text-center", children: _jsx(Resizable, { children: _jsx(AnimatePresence, { initial: false, mode: "popLayout", presenceAffectsLayout: true, custom: state.direction, onExitComplete: dispatch.onExitComplete, children: _jsxs(motion.div, { initial: "enter", animate: "middle", exit: "exit", children: [_jsxs("header", { className: "relative flex justify-between", children: [_jsx(motion.button, { onClick: dispatch.previousMonth, variants: removeImmediately, className: "z-calendar rounded-full p-1.5 hover:bg-primary", children: _jsx(ChevronLeftIcon, { className: "h-4 w-4" }) }), _jsx(motion.span, { variants: variants, custom: state.direction, className: "absolute inset-0 isolate z-normal flex items-center justify-center font-semibold", children: _jsxs("span", { className: "flex w-fit items-center justify-center gap-0.5 py-1", children: [_jsx("select", { style: { width: `${monthString.length}ch` }, value: monthString, onChange: dispatch.onChangeMonth, className: "w-fit cursor-pointer appearance-none bg-transparent capitalize proportional-nums hover:text-primary", children: state.months }), _jsx(TheMaskInput, { mask: "int", value: state.year, maxLength: 4, placeholder: "YYYY", onChange: onChangeYear, style: { width: `${state.year.length}ch` }, className: "w-16 cursor-pointer appearance-none bg-transparent hover:text-primary" })] }) }), _jsx(motion.button, { variants: removeImmediately, className: "z-calendar rounded-full p-1.5 hover:bg-primary", onClick: dispatch.nextMonth, children: _jsx(ChevronRightIcon, { className: "h-4 w-4" }) }), _jsx("div", { className: "absolute inset-0", style: {
                                                     backgroundImage: "linear-gradient(to right, hsla(var(--card-background)) 15%, transparent 30%, transparent 70%, hsla(var(--card-background)) 85%)",
-                                                } })] }), _jsx("div", { className: "mt-4 grid grid-cols-7 gap-y-4", children: state.week.map((dayOfWeek) => (_jsx("span", { className: "font-medium capitalize text-sm", children: dayOfWeek.toLocaleDateString(locale, { weekday: "short" }) }, dayOfWeek.toString()))) }), _jsx(motion.ul, { onKeyDown: dispatch.onKeyDown, variants: variants, custom: state.direction, className: "mt-4 pb-2 grid grid-cols-7 gap-y-4", children: days.map((day) => {
+                                                } })] }), _jsx("div", { className: "mt-4 grid grid-cols-7 gap-y-4", children: state.week.map((dayOfWeek) => (_jsx("span", { className: "text-sm font-medium capitalize", children: dayOfWeek.toLocaleDateString(locale, { weekday: "short" }) }, dayOfWeek.toString()))) }), _jsx(motion.ul, { onKeyDown: dispatch.onKeyDown, variants: variants, custom: state.direction, className: "mt-4 grid grid-cols-7 gap-y-4 pb-2", children: days.map((day) => {
                                             const key = day.toISOString();
                                             const isSelected = key === currentAsString;
                                             const today = isToday(day) && markToday;
                                             const disabledByFn = (disabledDate === null || disabledDate === void 0 ? void 0 : disabledDate(day)) || false;
                                             const disableDate = !isSameMonth(day, state.date) || disabledByFn;
-                                            return (_jsx("li", { className: "w-full flex items-center justify-center", children: _jsx("button", { type: "button", "data-date": key, disabled: disabledByFn, onClick: dispatch.onSelectDate, "data-view": state.date.getMonth().toString(), className: `size-8 disabled:cursor-not-allowed rounded-full font-semibold flex items-center justify-center proportional-nums ${today ? "text-primary" : ""} ${disableDate ? "text-disabled" : ""} ${isSelected ? "bg-primary text-primary-foreground" : ""}`, children: day.getDate() }) }, key));
-                                        }) })] }, monthString) }) }) }), _jsx("footer", { className: "text-center text-primary mt-2", children: _jsx("button", { className: "hover:scale-105 transition-transform duration-300", type: "button", onClick: dispatch.setToday, children: "Today" }) })] }) }));
+                                            return (_jsx("li", { className: "flex w-full items-center justify-center", children: _jsx("button", { type: "button", "data-date": key, disabled: disabledByFn, onClick: dispatch.onSelectDate, "data-view": state.date.getMonth().toString(), className: css(`flex size-8 items-center justify-center rounded-full font-semibold proportional-nums disabled:cursor-not-allowed ${today ? "text-primary" : ""} ${disableDate ? "text-disabled" : ""} ${isSelected ? "bg-primary text-primary-foreground" : ""}`), children: day.getDate() }) }, key));
+                                        }) })] }, monthString) }) }) }), _jsx("footer", { className: "mt-2 text-center text-primary", children: _jsx("button", { className: "duration-300 transition-transform hover:scale-105", type: "button", onClick: dispatch.setToday, children: "Today" }) })] }) }));
 };

package/dist/components/display/card.d.ts

@@ -1,9 +1,10 @@
 import React, { PropsWithChildren } from "react";
 import { Label, Override } from "../../types";
-export type CardProps = Override<React.ComponentProps<"div">, {
+import { PolymorphicProps } from "../core/polymorph";
+export type CardProps = PolymorphicProps<Override<React.ComponentProps<"div">, {
     title?: Label;
     container?: string;
     header?: React.ReactElement | null;
-}>;
-export declare const Card: ({ children, title, container, header, className, ...props }: PropsWithChildren<CardProps>) => import("react/jsx-runtime").JSX.Element;
+}>, "div">;
+export declare const Card: ({ children, title, as, container, header, className, ...props }: PropsWithChildren<CardProps>) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=card.d.ts.map

package/dist/components/display/card.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"card.d.ts","sourceRoot":"","sources":["../../../src/components/display/card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAEjD,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAG9C,MAAM,MAAM,SAAS,GAAG,QAAQ,CAC5B,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,EAC3B;IACI,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,KAAK,CAAC,YAAY,GAAG,IAAI,CAAC;CACtC,CACJ,CAAC;AAEF,eAAO,MAAM,IAAI,gEAAkF,iBAAiB,CAAC,SAAS,CAAC,4CAS9H,CAAC"}
+{"version":3,"file":"card.d.ts","sourceRoot":"","sources":["../../../src/components/display/card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAEjD,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAC9C,OAAO,EAAa,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAEhE,MAAM,MAAM,SAAS,GAAG,gBAAgB,CACpC,QAAQ,CACJ,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,EAC3B;IACI,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,KAAK,CAAC,YAAY,GAAG,IAAI,CAAC;CACtC,CACJ,EACD,KAAK,CACR,CAAC;AAEF,eAAO,MAAM,IAAI,oEAA8F,iBAAiB,CAAC,SAAS,CAAC,4CAS1I,CAAC"}

package/dist/components/display/card.js

@@ -3,6 +3,6 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { css } from "../../lib/dom";
 import { Polymorph } from "../core/polymorph";
 export const Card = (_a) => {
-    var { children, title, container = "", header = null, className = "" } = _a, props = __rest(_a, ["children", "title", "container", "header", "className"]);
-    return (_jsxs(Polymorph, Object.assign({}, props, { as: "div", className: css("rounded-card flex flex-col gap-4 bg-card-background py-4 pb-8 border-card-border border shadow", container), children: [title ? _jsx("header", { className: "w-full px-8 pb-4 mb-2 border-b border-card-border font-medium text-xl", children: title }) : header, _jsx("div", { className: `min-w-full px-8 ${className}`, children: children })] })));
+    var { children, title, as = "div", container = "", header = null, className = "" } = _a, props = __rest(_a, ["children", "title", "as", "container", "header", "className"]);
+    return (_jsxs(Polymorph, Object.assign({}, props, { as: as, className: css("flex flex-col gap-4 rounded-card border border-card-border bg-card-background py-4 pb-8 shadow", container), children: [title ? _jsx("header", { className: "mb-2 w-full border-b border-card-border px-8 pb-4 text-xl font-medium", children: title }) : header, _jsx("div", { className: css("min-w-full px-8", className), children: children })] })));
 };

package/dist/components/display/list.d.ts

@@ -0,0 +1,16 @@
+import React, { PropsWithChildren } from "react";
+import { Label } from "../../types";
+type AnimatedItemProps = {
+    title: Label;
+    description: Label;
+    children: Label;
+    avatar?: Label;
+    leading?: React.FC<{
+        open: () => void;
+    }>;
+};
+type AnimatedListProps = {};
+export declare const AnimatedList: (props: PropsWithChildren<AnimatedListProps>) => import("react/jsx-runtime").JSX.Element;
+export declare const AnimatedListItem: (props: PropsWithChildren<AnimatedItemProps>) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=list.d.ts.map

package/dist/components/display/list.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"list.d.ts","sourceRoot":"","sources":["../../../src/components/display/list.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAY,iBAAiB,EAAmD,MAAM,OAAO,CAAC;AAE5G,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAEpC,KAAK,iBAAiB,GAAG;IACrB,KAAK,EAAE,KAAK,CAAC;IACb,WAAW,EAAE,KAAK,CAAC;IACnB,QAAQ,EAAE,KAAK,CAAC;IAChB,MAAM,CAAC,EAAE,KAAK,CAAC;IACf,OAAO,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC;QAAE,IAAI,EAAE,MAAM,IAAI,CAAA;KAAE,CAAC,CAAC;CAC5C,CAAC;AAIF,KAAK,iBAAiB,GAAG,EAAE,CAAC;AA0D5B,eAAO,MAAM,YAAY,UAAW,iBAAiB,CAAC,iBAAiB,CAAC,4CA4DvE,CAAC;AAEF,eAAO,MAAM,gBAAgB,UAAW,iBAAiB,CAAC,iBAAiB,CAAC,4CAA0C,CAAC"}

package/dist/components/display/list.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AnimatePresence, motion } from "framer-motion";
+import { XIcon } from "lucide-react";
+import React, { Fragment, useCallback, useEffect, useId, useRef, useState } from "react";
+import { useOnClickOutside } from "../../hooks/use-click-outside";
+const FloatItem = ({ item, setter }) => {
+    const ref = useRef(null);
+    useOnClickOutside(ref, setter);
+    useEffect(() => {
+        function onKeyDown(event) {
+            if (event.key === "Escape")
+                setter();
+        }
+        window.addEventListener("keydown", onKeyDown);
+        return () => window.removeEventListener("keydown", onKeyDown);
+    }, []);
+    return (_jsxs(Fragment, { children: [_jsx(AnimatePresence, { children: item ? (_jsx(motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, className: "pointer-events-none absolute inset-0 z-floating h-screen w-screen bg-floating-overlay/70" })) : null }), _jsx(AnimatePresence, { children: item ? (_jsx("div", { className: "absolute inset-0 z-tooltip flex items-center justify-center", children: _jsxs(motion.div, { layout: true, ref: ref, layoutId: `item-${item.id}`, className: "relative flex h-min w-min min-w-xs flex-col gap-4 rounded-card border border-card-border bg-card-background p-6 py-4 pb-8 shadow", children: [_jsx("nav", { className: "absolute right-4 top-1 lg:right-2", children: _jsx("button", { type: "button", onClick: setter, className: "p-1 opacity-70 transition-colors hover:text-danger hover:opacity-100 focus:text-danger", children: _jsx(XIcon, {}) }) }), _jsxs("header", { className: "flex w-full flex-wrap items-center justify-between gap-2", children: [_jsx("h3", { className: "min-w-full text-balance text-2xl font-medium", children: item.title }), _jsx("p", { className: "text-sm leading-snug text-secondary", children: item.description })] }), item.children] }) })) : null })] }));
+};
+export const AnimatedList = (props) => {
+    const [selected, setSelected] = useState(null);
+    const id = useId();
+    const clear = useCallback(() => {
+        setSelected(null);
+    }, []);
+    const items = React.Children.toArray(props.children);
+    return (_jsxs(Fragment, { children: [_jsx(FloatItem, { item: selected, setter: clear }), _jsx("ul", { role: "list", children: items.map((x, index) => {
+                    const item = x.props;
+                    const isLast = index === items.length - 1;
+                    const innerId = `${id}-${index}`;
+                    const setter = () => setSelected(Object.assign(Object.assign({}, item), { id: innerId }));
+                    const Leading = item.leading;
+                    return (_jsx(motion.li, { layout: true, layoutId: `item-${innerId}`, className: `border-b border-card-border py-2 last:border-transparent`, children: _jsx(motion.div, { layoutId: `toast-${innerId}`, className: "relative", children: _jsx("div", { className: "relative flex items-start space-x-3", children: _jsxs(Fragment, { children: [item.avatar ? (_jsx("div", { children: _jsx("div", { className: "relative px-1", children: _jsx("button", { onClick: setter, className: "flex size-10 items-center justify-center ring-primary", children: item.avatar }) }) })) : null, _jsx("div", { className: "min-w-0 flex-1 py-1 text-foreground", children: _jsxs("div", { className: "flex flex-row flex-nowrap justify-between gap-4", children: [_jsxs("button", { onClick: setter, className: "ease-out cursor-pointer text-left transition-all hover:scale-105 hover:text-primary", children: [_jsx("h3", { children: item.title }), _jsx("p", { className: "text-sm leading-snug text-secondary", children: item.description })] }), Leading ? _jsx(Leading, { open: setter }) : null] }) })] }) }) }) }, innerId));
+                }) })] }));
+};
+export const AnimatedListItem = (props) => _jsx(Fragment, { children: props.children });

package/dist/components/display/tabs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../../src/components/display/tabs.tsx"],"names":[],"mappings":"AAEA,OAAc,EAA2B,iBAAiB,EAAiC,MAAM,OAAO,CAAC;AAEzG,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAKpC,MAAM,MAAM,SAAS,GAAG;IACpB,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAIF,eAAO,MAAM,IAAI,UAAW,iBAAiB,CAAC,SAAS,CAAC,4CA6GvD,CAAC;AAIF,MAAM,MAAM,QAAQ,GAAG;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,SAAS,CAAA;CAAE,GAAG;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC;AAEpI,eAAO,MAAM,GAAG,UAAW,iBAAiB,CAAC,QAAQ,CAAC,4CAGrD,CAAC"}
+{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../../src/components/display/tabs.tsx"],"names":[],"mappings":"AAEA,OAAc,EAA2B,iBAAiB,EAAiC,MAAM,OAAO,CAAC;AAEzG,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAIpC,MAAM,MAAM,SAAS,GAAG;IACpB,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAIF,eAAO,MAAM,IAAI,UAAW,iBAAiB,CAAC,SAAS,CAAC,4CA6GvD,CAAC;AAIF,MAAM,MAAM,QAAQ,GAAG;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,SAAS,CAAA;CAAE,GAAG;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC;AAEpI,eAAO,MAAM,GAAG,UAAW,iBAAiB,CAAC,QAAQ,CAAC,4CAGrD,CAAC"}

package/dist/components/floating/modal.d.ts

@@ -1,16 +1,17 @@
 import React, { PropsWithChildren } from "react";
 import { Label } from "../../types";
-export type DrawerProps = {
+export type ModalProps = {
     title?: Label;
     open: boolean;
     footer?: Label;
     resizer?: boolean;
     asChild?: boolean;
     closable?: boolean;
-    type?: "dialog" | "drawer";
     position?: "left" | "right";
     trigger?: Label | React.FC<any>;
+    type?: "dialog" | "drawer" | "sheet";
     onChange: (nextState: boolean) => void;
+    overlayClickClose?: boolean;
 };
-export declare const Modal: ({ type: _type, resizer, ...props }: PropsWithChildren<DrawerProps>) => import("react/jsx-runtime").JSX.Element;
+export declare const Modal: ({ type: _type, resizer, overlayClickClose, ...props }: PropsWithChildren<ModalProps>) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=modal.d.ts.map

package/dist/components/floating/modal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["../../../src/components/floating/modal.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAE,EAAY,iBAAiB,EAAS,MAAM,OAAO,CAAC;AAGlE,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAsDpC,MAAM,MAAM,WAAW,GAAG;IACtB,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,IAAI,EAAE,OAAO,CAAC;IACd,MAAM,CAAC,EAAE,KAAK,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAC3B,QAAQ,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC5B,OAAO,CAAC,EAAE,KAAK,GAAG,KAAK,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC;IAChC,QAAQ,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;CAC1C,CAAC;AAkEF,eAAO,MAAM,KAAK,uCAA0D,iBAAiB,CAAC,WAAW,CAAC,4CA6FzG,CAAC"}
+{"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["../../../src/components/floating/modal.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAE,EAAY,iBAAiB,EAAS,MAAM,OAAO,CAAC;AAGlE,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAsDpC,MAAM,MAAM,UAAU,GAAG;IACrB,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,IAAI,EAAE,OAAO,CAAC;IACd,MAAM,CAAC,EAAE,KAAK,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC5B,OAAO,CAAC,EAAE,KAAK,GAAG,KAAK,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC;IAChC,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;IACrC,QAAQ,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC/B,CAAC;AAoEF,eAAO,MAAM,KAAK,0DAAqF,iBAAiB,CAAC,UAAU,CAAC,4CAgGnI,CAAC"}

package/dist/components/floating/modal.js

@@ -34,8 +34,8 @@ const variants = cva("isolate ring-0 outline-0 appearance-none flex flex-col gap
     variants: {
         type: {
             drawer: "max-h-screen max-w-[90%] w-auto h-screen min-h-0",
-            dialog: "max-h-[calc(100lvh-10%)] container h-[inherit] rounded-lg py-8",
-            sheet: "w-full absolute bottom-0 max-h-[90vh] max-h-[90svh] pt-6 pb-4 rounded-t-lg",
+            dialog: "max-h-[calc(100lvh-10%)] container h-min rounded-lg py-8",
+            sheet: "w-full absolute bottom-0 h-[85vh] max-h-[85vh] max-h-[85svh] pt-6 pb-4 rounded-t-lg",
         },
         position: {
             none: "",
@@ -45,7 +45,7 @@ const variants = cva("isolate ring-0 outline-0 appearance-none flex flex-col gap
     },
     defaultVariants: { position: "right", type: "dialog" },
 });
-const dragConstraints = { top: 0, left: 0, right: 0, bottom: 0 };
+const dragConstraints = { top: 0, left: 0, right: 0, bottom: -1 };
 const calculateClose = (n) => n * 0.62;
 const Draggable = (props) => {
     const onDrag = (_, info) => {
@@ -53,7 +53,7 @@ const Draggable = (props) => {
             if (!props.sheet) {
                 const div = props.parent.current;
                 const v = props.value.get() || div.getBoundingClientRect().width;
-                const delta = props.type === "right" ? -info.delta.x : info.delta.x;
+                const delta = props.position === "right" ? -info.delta.x : info.delta.x;
                 return props.value.set(Math.abs(v + delta));
             }
             const div = props.parent.current;
@@ -68,20 +68,20 @@ const Draggable = (props) => {
             return props.value.set(result);
         }
     };
-    return (_jsx(motion.div, { draggable: true, dragMomentum: true, onDrag: onDrag, animate: false, initial: false, dragElastic: 0.15, dragDirectionLock: true, dragSnapToOrigin: true, drag: props.sheet ? "y" : "x", dragConstraints: dragConstraints, whileDrag: { cursor: "grabbing" }, className: css("absolute rounded-lg cursor-grab", props.sheet ? "" : "bg-floating-border", props.sheet
-            ? "w-full py-2 top-1 h-3 flex justify-center"
-            : props.type === "left"
-                ? "top-1/2 right-5 h-10 w-2"
-                : "top-1/2 left-2 h-10 w-2"), children: props.sheet ? _jsx("div", { className: "bg-floating-border rounded-lg w-1/4 h-2" }) : null }));
+    return (_jsx(motion.div, { draggable: true, dragMomentum: true, dragListener: true, dragPropagation: true, onDrag: onDrag, animate: false, initial: false, dragElastic: 0, dragDirectionLock: true, dragSnapToOrigin: true, drag: props.sheet ? "y" : "x", dragConstraints: dragConstraints, whileDrag: { cursor: "grabbing" }, className: css("absolute rounded-lg", props.sheet ? "cursor-row-resize" : "cursor-col-resize bg-floating-border", props.sheet
+            ? "top-1 flex h-3 w-full justify-center py-2"
+            : props.position === "left"
+                ? "right-5 top-1/2 h-10 w-2"
+                : "left-2 top-1/2 h-10 w-2"), children: props.sheet ? _jsx("div", { className: "h-2 w-1/4 rounded-lg bg-floating-border" }) : null }));
 };
 const positions = { drawer: "right", sheet: "none", dialog: "none" };
 export const Modal = (_a) => {
-    var { type: _type = "dialog", resizer = true } = _a, props = __rest(_a, ["type", "resizer"]);
+    var { type: _type = "dialog", resizer = true, overlayClickClose = false } = _a, props = __rest(_a, ["type", "resizer", "overlayClickClose"]);
     const headingId = useId();
     const descriptionId = useId();
     const isDesktop = useMediaQuery("(min-width: 48rem)");
     const useResizer = _type === "drawer" || !isDesktop;
-    const position = isDesktop ? positions[_type] : positions.sheet;
+    const position = isDesktop ? (_type === "drawer" ? props.position : positions[_type]) : positions.sheet;
     const func = isDesktop ? animations[_type] : animations.sheet;
     const animation = typeof func === "function" ? func(position) : func;
     const type = isDesktop ? _type : "sheet";
@@ -92,5 +92,6 @@ export const Modal = (_a) => {
     const { getReferenceProps, getFloatingProps } = useInteractions([click, role, dismiss]);
     const Trigger = props.trigger;
     const value = useMotionValue(undefined);
-    return (_jsxs(Fragment, { children: [props.trigger ? (_jsx(Fragment, { children: props.asChild ? (_jsx(Slot, Object.assign({ ref: refs.setReference }, getReferenceProps(), { children: Trigger }))) : (_jsx("button", Object.assign({ ref: refs.setReference }, getReferenceProps(), { type: "button", children: Trigger }))) })) : null, _jsx(FloatingPortal, { children: _jsx(AnimatePresence, { presenceAffectsLayout: true, children: props.open && (_jsx(FloatingOverlay, { lockScroll: true, className: `relative !overflow-clip h-[100dvh] z-floating bg-floating-overlay/70 ${type === "drawer" ? "" : "grid justify-center p-8"}`, children: _jsx(FloatingFocusManager, { modal: true, closeOnFocusOut: true, context: context, children: _jsxs(motion.div, Object.assign({ animate: "enter", "aria-describedby": descriptionId, "aria-labelledby": headingId, className: variants({ position, type }), exit: "exit", initial: "initial", ref: refs.setFloating, variants: animation, style: isDesktop ? { width: value } : { height: value } }, getFloatingProps(), { children: [useResizer && resizer ? (_jsx(Draggable, { onChange: props.onChange, sheet: !isDesktop, value: value, parent: refs.floating, type: position })) : null, props.title || props.closable ? (_jsxs("header", { className: "w-full relative", children: [props.title ? (_jsx("h2", { className: "px-8 pb-4 border-b border-floating-border text-3xl font-medium leading-relaxed", children: props.title })) : null, props.closable !== false ? (_jsx("nav", { className: "absolute -top-1 right-8", children: _jsx("button", { type: "button", onClick: () => props.onChange(false), className: "p-1 transition-colors hover:text-danger focus:text-danger", children: _jsx(XIcon, {}) }) })) : null] })) : null, _jsx("div", { className: "flex-1 px-8 overflow-y-auto", children: props.children }), props.footer ? (_jsx("footer", { className: "px-8 border-t border-floating-border pt-4 w-full", children: props.footer })) : null] })) }) })) }) })] }));
+    const onClose = () => props.onChange(false);
+    return (_jsxs(Fragment, { children: [props.trigger ? (_jsx(Fragment, { children: props.asChild ? (_jsx(Slot, Object.assign({ ref: refs.setReference }, getReferenceProps(), { children: Trigger }))) : (_jsx("button", Object.assign({ ref: refs.setReference }, getReferenceProps(), { type: "button", children: Trigger }))) })) : null, _jsx(FloatingPortal, { children: _jsx(AnimatePresence, { presenceAffectsLayout: true, children: props.open && (_jsx(FloatingOverlay, { lockScroll: true, onClick: overlayClickClose ? onClose : undefined, className: `relative z-floating h-[100dvh] !overflow-clip bg-floating-overlay/70 ${type === "drawer" ? "" : "grid justify-center p-8"}`, children: _jsx(FloatingFocusManager, { modal: true, closeOnFocusOut: true, context: context, children: _jsxs(motion.div, Object.assign({ animate: "enter", "aria-describedby": descriptionId, "aria-labelledby": headingId, className: variants({ position, type }), exit: "exit", initial: "initial", ref: refs.setFloating, variants: animation, style: isDesktop ? { width: value } : { height: value } }, getFloatingProps(), { children: [useResizer && resizer ? (_jsx(Draggable, { onChange: props.onChange, sheet: !isDesktop, value: value, parent: refs.floating, position: position })) : null, props.title || props.closable ? (_jsxs("header", { className: "relative w-full", children: [props.title ? (_jsx("h2", { className: "border-b border-floating-border px-8 pb-4 text-3xl font-medium leading-relaxed", children: props.title })) : null, props.closable !== false ? (_jsx("nav", { className: "absolute -top-2.5 right-4 lg:-top-1 lg:right-8", children: _jsx("button", { type: "button", onClick: onClose, className: "p-1 opacity-70 transition-colors hover:text-danger hover:opacity-100 focus:text-danger", children: _jsx(XIcon, {}) }) })) : null] })) : null, _jsx("section", { className: "flex-1 overflow-y-auto px-8", children: props.children }), props.footer ? (_jsx("footer", { className: "w-full border-t border-floating-border px-8 pt-4", children: props.footer })) : null] })) }) })) }) })] }));
 };

package/dist/components/form/autocomplete.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"autocomplete.d.ts","sourceRoot":"","sources":["../../../src/components/form/autocomplete.tsx"],"names":[],"mappings":"AAgBA,OAAO,KAAuE,MAAM,OAAO,CAAC;AAG5F,OAAO,EAAc,eAAe,EAAE,MAAM,eAAe,CAAC;AAC5D,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,UAAU,CAAC;AAI5C,KAAK,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,aAAa,CAAC,EAAE,UAAU,CAAC,GAAG;IAChE,QAAQ,EAAE,OAAO,CAAC;IAClB,MAAM,EAAE,OAAO,CAAC;IAChB,MAAM,EAAE,WAAW,CAAC;CACvB,CAAC;AAEF,eAAO,MAAM,MAAM,8FAWjB,CAAC;AAEH,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC,GAAG;IACtE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,WAAW,EAAE,CAAC;IACvB,aAAa,CAAC,EAAE,OAAO,CAAC;CAC3B,CAAC;AAaF,eAAO,MAAM,YAAY,yGAmNxB,CAAC"}
+{"version":3,"file":"autocomplete.d.ts","sourceRoot":"","sources":["../../../src/components/form/autocomplete.tsx"],"names":[],"mappings":"AAgBA,OAAO,KAAkD,MAAM,OAAO,CAAC;AAKvE,OAAO,EAAc,eAAe,EAAE,MAAM,eAAe,CAAC;AAC5D,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,UAAU,CAAC;AAE5C,KAAK,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,aAAa,CAAC,EAAE,UAAU,CAAC,GAAG;IAChE,QAAQ,EAAE,OAAO,CAAC;IAClB,MAAM,EAAE,OAAO,CAAC;IAChB,MAAM,EAAE,WAAW,CAAC;CACvB,CAAC;AAEF,eAAO,MAAM,MAAM,8FAYjB,CAAC;AAEH,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC,GAAG;IACtE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,WAAW,EAAE,CAAC;IACvB,aAAa,CAAC,EAAE,OAAO,CAAC;CAC3B,CAAC;AAaF,eAAO,MAAM,YAAY,yGAwPxB,CAAC"}

package/dist/components/form/autocomplete.js

@@ -5,16 +5,16 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { autoUpdate, FloatingFocusManager, FloatingPortal, offset, size, useDismiss, useFloating, useInteractions, useListNavigation, useRole, useTransitionStyles, } from "@floating-ui/react";
 import Fuzzy from "fuzzy-search";
 import { ChevronDown } from "lucide-react";
-import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from "react";
+import { forwardRef, useEffect, useRef, useState } from "react";
 import { usePrevious } from "../../hooks/use-previous";
-import { css, dispatchInput } from "../../lib/dom";
-import { InputField } from "./input-field";
-import { safeRegex } from "../../lib/fns";
 import { useTranslations } from "../../hooks/use-translate-context";
+import { css, dispatchInput, initializeInputDataset } from "../../lib/dom";
+import { safeRegex } from "../../lib/fns";
+import { InputField } from "./input-field";
 export const Option = forwardRef((_a, ref) => {
     var _b;
     var { selected, active, onClick, option } = _a, rest = __rest(_a, ["selected", "active", "onClick", "option"]);
-    return (_jsx("li", Object.assign({}, rest, { ref: ref, role: "option", "aria-selected": selected, className: "w-full last:border-transparent border-b border-tooltip-border", children: _jsx("button", { type: "button", onClick: onClick, "aria-selected": selected, className: `p-2 w-full text-left cursor-pointer ${selected ? "bg-primary text-primary-foreground" : ""} ${active ? "bg-primary-subtle text-primary-foreground" : ""}`, children: (_b = option.label) !== null && _b !== void 0 ? _b : option.value }) })));
+    return (_jsx("li", Object.assign({}, rest, { ref: ref, role: "option", "aria-selected": selected, className: "w-full border-b border-tooltip-border last:border-transparent", children: _jsx("button", { type: "button", "data-value": option.value, onClick: onClick, "aria-selected": selected, className: `w-full cursor-pointer p-2 text-left ${selected ? "bg-primary text-primary-foreground" : ""} ${active ? "bg-primary-subtle text-primary-foreground" : ""}`, children: (_b = option.label) !== null && _b !== void 0 ? _b : option.value }) })));
 });
 const transitionStyles = {
     duration: 300,
@@ -36,16 +36,20 @@ export const Autocomplete = forwardRef((_a, externalRef) => {
     const [index, setIndex] = useState(null);
     const listRef = useRef(emptyRef);
     const previousIndex = usePrevious(index);
-    const innerOptions = dynamicOption && shadow !== "" ? [
-        { value: shadow, label: shadow, "data-dynamic": "true" },
-        ...options
-    ] : options;
+    const innerOptions = dynamicOption && shadow !== "" ? [{ value: shadow, label: shadow, "data-dynamic": "true" }, ...options] : options;
     const list = new Fuzzy(innerOptions, ["value", "label"], fuzzyOptions).search(shadow);
-    const pattern = dynamicOption ? undefined : `^(${options.map((x) => `${safeRegex(x.value)}${x.label ? "|" + safeRegex(x.label) : ""}`).join("|")})$`;
+    const pattern = dynamicOption
+        ? undefined
+        : `^(${options.map((x) => `${safeRegex(x.value)}${x.label ? "|" + safeRegex(x.label) : ""}`).join("|")})$`;
+    useEffect(() => {
+        const input = refs.reference.current;
+        if (!input)
+            return;
+        return initializeInputDataset(input);
+    }, []);
     useEffect(() => {
         var _a;
         if (props.value) {
-            setValue(props.value);
             const item = options.find((x) => x.value === props.value);
             setValue((_a = item === null || item === void 0 ? void 0 : item.label) !== null && _a !== void 0 ? _a : props.value);
         }
@@ -68,7 +72,6 @@ export const Autocomplete = forwardRef((_a, externalRef) => {
             }),
         ],
     });
-    useImperativeHandle(externalRef, () => { var _a; return (_a = refs.domReference) === null || _a === void 0 ? void 0 : _a.current; }, [refs]);
     const transitions = useTransitionStyles(context, transitionStyles);
     const { getReferenceProps, getFloatingProps, getItemProps } = useInteractions([
         useRole(context, { role: "listbox" }),
@@ -96,12 +99,13 @@ export const Autocomplete = forwardRef((_a, externalRef) => {
         }),
     ]);
     const onSelect = (opt) => {
-        var _a, _b;
+        var _a, _b, _c;
         setValue(opt.value);
-        setLabel((_a = opt.label) !== null && _a !== void 0 ? _a : "");
+        (_a = refs.reference.current) === null || _a === void 0 ? void 0 : _a.setAttribute("data-value", opt.value);
+        setLabel((_b = opt.label) !== null && _b !== void 0 ? _b : "");
         const fakeEvent = dispatchInput(ref.current, opt.value);
         if (fakeEvent)
-            (_b = props.onChange) === null || _b === void 0 ? void 0 : _b.call(props, fakeEvent);
+            (_c = props.onChange) === null || _c === void 0 ? void 0 : _c.call(props, fakeEvent);
         setOpen(false);
         setShadow("");
     };
@@ -119,15 +123,18 @@ export const Autocomplete = forwardRef((_a, externalRef) => {
         setShadow("");
     };
     const onClose = () => {
+        var _a;
         setShadow("");
         setValue("");
+        (_a = refs.reference.current) === null || _a === void 0 ? void 0 : _a.setAttribute("data-value", "");
         setLabel("");
         dispatchInput(refs.reference.current, "");
         setOpen(false);
     };
-    return (_jsxs(InputField, Object.assign({}, props, { container: css("group inline-block w-full", container), error: error, feedback: feedback, form: props.form, hideLeft: hideLeft, id: props.name || props.id, interactive: interactive, labelClassName: labelClassName, left: left, name: props.name, optionalText: optionalText, placeholder: props.placeholder, required: required, rightLabel: rightLabel, title: props.title, right: _jsxs("span", { className: "flex items-center gap-0.5", children: [_jsxs("button", { type: "button", className: "link:text-primary transition-colors", children: [_jsx(ChevronDown, { size: 20 }), _jsx("span", { className: "sr-only", children: translation.inputCaretDown })] }), value ? (_jsx("button", { type: "button", onClick: onClose, className: "link:text-danger transition-colors", children: _jsx("svg", { width: "15", height: "15", viewBox: "0 0 15 15", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M11.7816 4.03157C12.0062 3.80702 12.0062 3.44295 11.7816 3.2184C11.5571 2.99385 11.193 2.99385 10.9685 3.2184L7.50005 6.68682L4.03164 3.2184C3.80708 2.99385 3.44301 2.99385 3.21846 3.2184C2.99391 3.44295 2.99391 3.80702 3.21846 4.03157L6.68688 7.49999L3.21846 10.9684C2.99391 11.193 2.99391 11.557 3.21846 11.7816C3.44301 12.0061 3.80708 12.0061 4.03164 11.7816L7.50005 8.31316L10.9685 11.7816C11.193 12.0061 11.5571 12.0061 11.7816 11.7816C12.0062 11.557 12.0062 11.193 11.7816 10.9684L8.31322 7.49999L11.7816 4.03157Z", fill: "currentColor", fillRule: "evenodd", clipRule: "evenodd" }) }) })) : null] }), children: [_jsx("input", { ref: ref, required: required, type: "hidden", name: props.name, defaultValue: props.value || value || undefined }), _jsx("input", Object.assign({}, getReferenceProps(Object.assign(Object.assign({}, props), { onChange,
+    const id = props.id || props.name;
+    return (_jsxs(InputField, Object.assign({}, props, { container: css("group inline-block w-full", container), error: error, feedback: feedback, form: props.form, hideLeft: hideLeft, id: props.name || props.id, interactive: interactive, labelClassName: labelClassName, left: left, name: props.name, optionalText: optionalText, placeholder: props.placeholder, required: true, rightLabel: rightLabel, title: props.title, right: _jsxs("span", { className: "flex items-center gap-0.5", children: [_jsxs("button", { type: "button", className: "transition-colors link:text-primary", children: [_jsx(ChevronDown, { size: 20 }), _jsx("span", { className: "sr-only", children: translation.inputCaretDown })] }), value ? (_jsx("button", { type: "button", onClick: onClose, className: "transition-colors link:text-danger", children: _jsx("svg", { width: "15", height: "15", viewBox: "0 0 15 15", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M11.7816 4.03157C12.0062 3.80702 12.0062 3.44295 11.7816 3.2184C11.5571 2.99385 11.193 2.99385 10.9685 3.2184L7.50005 6.68682L4.03164 3.2184C3.80708 2.99385 3.44301 2.99385 3.21846 3.2184C2.99391 3.44295 2.99391 3.80702 3.21846 4.03157L6.68688 7.49999L3.21846 10.9684C2.99391 11.193 2.99391 11.557 3.21846 11.7816C3.44301 12.0061 3.80708 12.0061 4.03164 11.7816L7.50005 8.31316L10.9685 11.7816C11.193 12.0061 11.5571 12.0061 11.7816 11.7816C12.0062 11.557 12.0062 11.193 11.7816 10.9684L8.31322 7.49999L11.7816 4.03157Z", fill: "currentColor", fillRule: "evenodd", clipRule: "evenodd" }) }) })) : null] }), children: [_jsx("input", Object.assign({}, getReferenceProps(Object.assign(Object.assign({}, props), { onChange,
                 onFocus,
-                pattern, ref: refs.setReference, name: undefined, onClick: (e) => e.currentTarget.focus(), onKeyDown(event) {
+                pattern, ref: refs.setReference, name: `${id}-shadow`, id: `${id}-shadow`, onClick: (e) => e.currentTarget.focus(), onKeyDown(event) {
                     if (event.key === "Escape") {
                         event.currentTarget.blur();
                         return setOpen(false);
@@ -142,10 +149,10 @@ export const Autocomplete = forwardRef((_a, externalRef) => {
                             return onSelect(list[0]);
                         }
                     }
-                } })), { required: required, value: open ? shadow : label || value, "aria-autocomplete": "list", autoComplete: "off", className: css("input text-foreground text-base group h-11 w-full flex-1 rounded-md bg-transparent p-2 placeholder-input-mask outline-none transition-colors group-error:text-danger group-error:placeholder-input-mask-error", !!right || shadow ? "pe-12" : "", !!left ? "ps-8" : "", props.className) })), _jsx(FloatingPortal, { preserveTabOrder: true, children: open ? (_jsx(FloatingFocusManager, { guards: true, returnFocus: false, context: context, initialFocus: -1, visuallyHiddenDismiss: true, children: _jsx("ul", Object.assign({}, getFloatingProps({
+                } })), { "data-value": value, "data-error": !!error, "data-name": id, "data-target": id, required: required, value: open ? shadow : label || value, "aria-autocomplete": "list", autoComplete: "off", className: css("input placeholder-input-mask group h-11 w-full flex-1 rounded-md bg-transparent p-2 text-base text-foreground outline-none transition-colors group-error:text-danger group-error:placeholder-input-mask-error", !!right || shadow ? "pe-12" : "", !!left ? "ps-8" : "", props.className) })), _jsx("input", { id: id, name: id, type: "hidden", "data-origin": id, ref: externalRef, required: required, defaultValue: props.value || value || undefined }), _jsx(FloatingPortal, { preserveTabOrder: true, children: open ? (_jsx(FloatingFocusManager, { guards: true, returnFocus: false, context: context, initialFocus: -1, visuallyHiddenDismiss: true, children: _jsx("ul", Object.assign({}, getFloatingProps({
                         ref: refs.setFloating,
                         style: Object.assign({ position: strategy, left: x !== null && x !== void 0 ? x : 0, top: y !== null && y !== void 0 ? y : 0 }, transitions.styles),
-                    }), { "data-floating": "true", className: "bg-floating-background shadow-floating text-foreground list-none p-0 m-0 rounded-t-lg rounded-b-lg overflow-auto origin-[top_center] overflow-y-auto z-floating", children: list.map((option, i) => (_createElement(Option, Object.assign({}, getItemProps({
+                    }), { "data-floating": "true", className: "z-floating m-0 origin-[top_center] list-none overflow-auto overflow-y-auto rounded-b-lg rounded-t-lg bg-floating-background p-0 text-foreground shadow-floating", children: list.map((option, i) => (_createElement(Option, Object.assign({}, getItemProps({
                             onClick: () => onSelect(option),
                             ref: (node) => void (listRef.current[i] = node),
                             selected: index === i,

package/dist/components/form/checkbox.d.ts

@@ -2,6 +2,8 @@ import React from "react";
 import { Override } from "../../types";
 export type CheckboxProps = Override<React.PropsWithChildren<React.ComponentProps<"input">>, {
     size?: "medium" | "large";
+    error?: string;
+    container?: string;
 }>;
-export declare const Checkbox: ({ children, className, size, ...props }: CheckboxProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Checkbox: React.ForwardRefExoticComponent<Omit<CheckboxProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
 //# sourceMappingURL=checkbox.d.ts.map

package/dist/components/form/checkbox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../../src/components/form/checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAEvC,MAAM,MAAM,aAAa,GAAG,QAAQ,CAChC,KAAK,CAAC,iBAAiB,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,EACtD;IACI,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;CAC7B,CACJ,CAAC;AAEF,eAAO,MAAM,QAAQ,4CAAkD,aAAa,4CAiBnF,CAAC"}
+{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../../src/components/form/checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAE1C,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAEvC,MAAM,MAAM,aAAa,GAAG,QAAQ,CAChC,KAAK,CAAC,iBAAiB,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,EACtD;IACI,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB,CACJ,CAAC;AAEF,eAAO,MAAM,QAAQ,qGAoBpB,CAAC"}

package/dist/components/form/checkbox.js

@@ -1,7 +1,8 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
 import { css } from "../../lib/dom";
-export const Checkbox = (_a) => {
-    var { children, className = "", size } = _a, props = __rest(_a, ["children", "className", "size"]);
-    return (_jsxs("label", { "data-disabled": props.disabled, "aria-disabled": props.disabled, className: "group font-normal flex items-center gap-2 data-[disabled=true]:cursor-not-allowed", children: [_jsx("input", Object.assign({}, props, { type: "checkbox", className: css("form-checkbox size-4 rounded border-card-border text-primary focus:ring-primary appearance-none inline-block bg-origin-border group-aria-disabled:cursor-not-allowed disabled:opacity-70", className) }, props)), children] }));
-};
+export const Checkbox = forwardRef((_a, ref) => {
+    var { children, error, className = "", size, container } = _a, props = __rest(_a, ["children", "error", "className", "size", "container"]);
+    return (_jsxs("label", { "data-disabled": props.disabled, "aria-disabled": props.disabled, className: css("group flex flex-wrap items-center font-normal data-[disabled=true]:cursor-not-allowed w-fit", container), children: [_jsx("input", Object.assign({}, props, { ref: ref, type: "checkbox", className: css("form-checkbox mr-2 inline-block size-4 appearance-none rounded border-card-border bg-origin-border text-primary focus:ring-primary disabled:opacity-70 group-aria-disabled:cursor-not-allowed", className) })), children, _jsx("span", { className: "min-w-full flex-1 whitespace-nowrap text-xs text-danger empty:mt-0 empty:hidden", children: error })] }));
+});

package/dist/components/form/date-picker.d.ts

@@ -1,7 +1,7 @@
+import React from "react";
 import { Override } from "../../types";
 import { CalendarProps } from "../display/calendar";
 import { InputProps } from "./input";
-type DatePickerProps = Override<InputProps, CalendarProps & {}>;
-export declare const DatePicker: ({ date, locale, disabledDate, autoFocusToday, onChange, markToday, ...props }: DatePickerProps) => import("react/jsx-runtime").JSX.Element;
-export {};
+export type DatePickerProps = Override<InputProps, CalendarProps & {}>;
+export declare const DatePicker: React.ForwardRefExoticComponent<Omit<DatePickerProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
 //# sourceMappingURL=date-picker.d.ts.map