@g4rcez/components 2.0.4 → 2.0.6

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

@@ -12,6 +12,7 @@ declare const variants: {
         default: string;
         min: string;
         small: string;
+        tiny: string;
     };
     rounded: {
         rough: string;

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

@@ -1 +1 @@
-{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/components/core/button.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAc,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE7D,OAAO,EAAE,WAAW,EAAE,KAAK,KAAK,EAAE,MAAM,aAAa,CAAC;AACtD,OAAO,EAAa,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE1D;;;GAGG;AACH,QAAA,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmCb,CAAC;AAeF,KAAK,QAAQ,GAAG,WAAW,CAAC,OAAO,QAAQ,CAAC,CAAC;AAE7C;;;GAGG;AACH,MAAM,MAAM,WAAW,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,QAAQ,IAAI,iBAAiB,CAC/E,gBAAgB,CAAC,QAAQ,GAAG,OAAO,CAAC;IAChC,oCAAoC;IACpC,IAAI,EAAE,KAAK,CAAC;IACZ,+CAA+C;IAC/C,OAAO,EAAE,OAAO,CAAA;CACnB,CAAC,EAAE,CAAC,CAAC,CACT,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,eAAO,MAAM,MAAM,EAAE,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,QAAQ,EAAE,KAAK,EAAE,WAAW,CAAC,CAAC,CAAC,KAAK,KAAK,CAAC,SAwB5F,CAAC"}
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/components/core/button.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAc,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE7D,OAAO,EAAE,WAAW,EAAE,KAAK,KAAK,EAAE,MAAM,aAAa,CAAC;AACtD,OAAO,EAAa,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE1D;;;GAGG;AACH,QAAA,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoCb,CAAC;AAeF,KAAK,QAAQ,GAAG,WAAW,CAAC,OAAO,QAAQ,CAAC,CAAC;AAE7C;;;GAGG;AACH,MAAM,MAAM,WAAW,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,QAAQ,IAAI,iBAAiB,CAC/E,gBAAgB,CAAC,QAAQ,GAAG,OAAO,CAAC;IAChC,oCAAoC;IACpC,IAAI,EAAE,KAAK,CAAC;IACZ,+CAA+C;IAC/C,OAAO,EAAE,OAAO,CAAA;CACnB,CAAC,EAAE,CAAC,CAAC,CACT,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,eAAO,MAAM,MAAM,EAAE,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,QAAQ,EAAE,KAAK,EAAE,WAAW,CAAC,CAAC,CAAC,KAAK,KAAK,CAAC,SAwB5F,CAAC"}

package/dist/components/core/button.js

@@ -14,6 +14,7 @@ const variants = {
         default: "h-10 px-4 py-2",
         min: "h-7 px-3 py-1 text-sm",
         small: "h-8 px-4 py-2 text-sm",
+        tiny: "h-6 px-2 py-1 text-sm",
     },
     rounded: {
         rough: "rounded-sm",

package/dist/components/core/tag.js

@@ -38,7 +38,7 @@ const indicatorVariant = cva("size-2.5 aspect-square rounded-full border-0", {
         },
     },
 });
-const tagVariants = cva("inline-flex rounded-pill gap-1.5 border-2 border-transparent items-center justify-center align-middle whitespace-nowrap", {
+const tagVariants = cva("inline-flex rounded-pill gap-1.5 border-0 items-center justify-center align-middle whitespace-nowrap", {
     variants,
     defaultVariants: { theme: "primary", size: "default" },
 });

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

@@ -1 +1 @@
-{"version":3,"file":"list.d.ts","sourceRoot":"","sources":["../../../src/components/display/list.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,EAAY,iBAAiB,EAAgC,MAAM,OAAO,CAAC;AACzF,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,MAAM,CAAC;AA2DhC,eAAO,MAAM,YAAY,GAAI,OAAO,iBAAiB,CAAC,iBAAiB,CAAC,4CAoEvE,CAAC;AAEF,eAAO,MAAM,gBAAgB,GAAI,OAAO,iBAAiB,CAAC,iBAAiB,CAAC,4CAA0C,CAAC"}
+{"version":3,"file":"list.d.ts","sourceRoot":"","sources":["../../../src/components/display/list.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,EAAY,iBAAiB,EAAgC,MAAM,OAAO,CAAC;AACzF,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,MAAM,CAAC;AAuDhC,eAAO,MAAM,YAAY,GAAI,OAAO,iBAAiB,CAAC,iBAAiB,CAAC,4CAoEvE,CAAC;AAEF,eAAO,MAAM,gBAAgB,GAAI,OAAO,iBAAiB,CAAC,iBAAiB,CAAC,4CAA0C,CAAC"}

package/dist/components/display/list.js

@@ -4,7 +4,7 @@ import { FloatingFocusManager, FloatingOverlay, FloatingPortal, useClick, useDis
 import { AnimatePresence, motion, MotionConfig } from "motion/react";
 import { XIcon } from "lucide-react";
 import React, { Fragment, useCallback, useId, useState } from "react";
-const FloatItem = ({ item, context, setter, get, refs }) => (_jsx(FloatingPortal, { children: _jsx(MotionConfig, { reducedMotion: "user", transition: { type: "tween", stiffness: 25, duration: 0.2 }, children: _jsxs(AnimatePresence, { presenceAffectsLayout: true, children: [_jsx(AnimatePresence, { children: item ? (_jsx(motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, className: "pointer-events-none fixed inset-0 top-0 z-floating h-screen w-screen bg-floating-overlay/70" })) : null }), _jsx(AnimatePresence, { children: item ? (_jsx(FloatingOverlay, { lockScroll: true, className: "absolute inset-0 z-tooltip flex items-center justify-center", children: _jsx(FloatingFocusManager, { visuallyHiddenDismiss: true, modal: true, closeOnFocusOut: true, context: context, children: _jsxs(motion.div, { layout: true, 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-shadow-card", ref: refs.setFloating, ...get(), 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 })] }) }) }));
+const FloatItem = ({ item, context, setter, get, refs }) => (_jsx(FloatingPortal, { children: _jsx(MotionConfig, { reducedMotion: "user", transition: { type: "tween", stiffness: 25, duration: 0.3 }, children: _jsxs(AnimatePresence, { presenceAffectsLayout: true, children: [item ? (_jsx(motion.div, { exit: { opacity: 0 }, animate: { opacity: 1 }, initial: { opacity: 0 }, className: "pointer-events-none fixed inset-0 top-0 z-overlay h-screen w-screen bg-floating-overlay/70" })) : null, item ? (_jsx(FloatingOverlay, { lockScroll: true, className: "absolute inset-0 z-floating flex items-center justify-center", children: _jsx(FloatingFocusManager, { visuallyHiddenDismiss: true, modal: true, closeOnFocusOut: true, context: context, children: _jsxs(motion.div, { layout: true, 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-shadow-card", ref: refs.setFloating, ...get(), 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();
@@ -26,7 +26,7 @@ export const AnimatedList = (props) => {
                     const innerId = `${id}-${index}`;
                     const setter = () => setSelected({ ...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: "cursor-pointer text-left transition-all ease-out 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));
+                    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: "cursor-pointer text-left transition-all ease-out 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/notifications.d.ts

@@ -2,7 +2,7 @@ import { type VariantProps } from "class-variance-authority";
 import { type PropsWithChildren } from "react";
 import { Label } from "../../types";
 declare const variants: (props?: ({
-    theme?: "default" | "info" | "warn" | "muted" | "danger" | "success" | "secondary" | null | undefined;
+    theme?: "default" | "info" | "warn" | "danger" | "success" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 type NotificationOptions = Partial<{
     title: Label;

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

@@ -1 +1 @@
-{"version":3,"file":"notifications.d.ts","sourceRoot":"","sources":["../../../src/components/display/notifications.tsx"],"names":[],"mappings":"AACA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAIlE,OAAO,EAAgD,KAAK,iBAAiB,EAAwD,MAAM,OAAO,CAAC;AAEnJ,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAEpC,QAAA,MAAM,QAAQ;;mFAgBb,CAAC;AAEF,KAAK,mBAAmB,GAAG,OAAO,CAAC;IAC/B,KAAK,EAAE,KAAK,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,EAAE,YAAY,CAAC,OAAO,QAAQ,CAAC,CAAC,OAAO,CAAC,CAAC;CACjD,CAAC,CAAC;AAEH,KAAK,sBAAsB,GAAG;IAAE,KAAK,EAAE,MAAM,IAAI,CAAC;IAAC,KAAK,EAAE,MAAM,IAAI,CAAA;CAAE,CAAC;AAEvE,KAAK,eAAe,GAAG,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,EAAE,mBAAmB,KAAK,sBAAsB,CAAC;AAM3F,eAAO,MAAM,eAAe,uBAAwC,CAAC;AA+DrE,MAAM,MAAM,iBAAiB,GAAG,OAAO,CAAC;IAAE,GAAG,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,MAAM,CAAA;CAAE,CAAC,CAAC;AAE3E,wBAAgB,aAAa,CAAC,EAAE,QAAQ,EAAE,GAAO,EAAE,QAAe,EAAE,EAAE,iBAAiB,CAAC,iBAAiB,CAAC,2CAyDzG"}
+{"version":3,"file":"notifications.d.ts","sourceRoot":"","sources":["../../../src/components/display/notifications.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAGlE,OAAO,EAA8C,KAAK,iBAAiB,EAAwD,MAAM,OAAO,CAAC;AAEjJ,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAEpC,QAAA,MAAM,QAAQ;;mFAcb,CAAC;AAEF,KAAK,mBAAmB,GAAG,OAAO,CAAC;IAC/B,KAAK,EAAE,KAAK,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,EAAE,YAAY,CAAC,OAAO,QAAQ,CAAC,CAAC,OAAO,CAAC,CAAC;CACjD,CAAC,CAAC;AAEH,KAAK,sBAAsB,GAAG;IAAE,KAAK,EAAE,MAAM,IAAI,CAAC;IAAC,KAAK,EAAE,MAAM,IAAI,CAAA;CAAE,CAAC;AAEvE,KAAK,eAAe,GAAG,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,EAAE,mBAAmB,KAAK,sBAAsB,CAAC;AAM3F,eAAO,MAAM,eAAe,uBAAwC,CAAC;AA+DrE,MAAM,MAAM,iBAAiB,GAAG,OAAO,CAAC;IAAE,GAAG,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,MAAM,CAAA;CAAE,CAAC,CAAC;AAE3E,wBAAgB,aAAa,CAAC,EAAE,QAAQ,EAAE,GAAO,EAAE,QAAe,EAAE,EAAE,iBAAiB,CAAC,iBAAiB,CAAC,2CAuDzG"}

package/dist/components/display/notifications.js

@@ -1,22 +1,20 @@
 "use client";
 import { createElement as _createElement } from "react";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Toast as RadixToast } from "radix-ui";
 import { cva } from "class-variance-authority";
-import { XIcon } from "lucide-react";
 import { AnimatePresence, motion } from "motion/react";
-import { Toast as RadixToast } from "radix-ui";
+import { XIcon } from "lucide-react";
 import { createContext, forwardRef, useCallback, useContext, useEffect, useRef, useState } from "react";
 import { useHover } from "../../hooks/use-hover";
-const variants = cva("relative isolate z-tooltip flex justify-between overflow-hidden whitespace-nowrap rounded-lg border text-sm shadow-shadow-notification", {
+const variants = cva("relative isolate z-tooltip flex justify-between overflow-hidden whitespace-nowrap rounded-lg border text-sm shadow-shadow-notification supports-[backdrop-filter]:backdrop-blur-xl", {
     variants: {
         theme: {
+            warn: "bg-warn-notification/90 text-warn-hover border-warn/50",
+            info: "bg-info-notification supports-[backdrop-filter]:bg-info-notification/50 supports-[backdrop-filter]:bg-info/20 text-info border-info/50",
+            danger: "bg-danger-notification supports-[backdrop-filter]:bg-danger-notification/60 text-danger border-danger/50",
+            success: "bg-success-notification supports-[backdrop-filter]:bg-success-notification/50 text-success border-success/50",
             default: "border-card-border bg-card-background text-foreground",
-            info: "bg-alert-info-bg text-alert-info-text border-alert-info-border",
-            warn: "bg-alert-warn-bg text-alert-warn-text border-alert-warn-border",
-            danger: "bg-alert-danger-bg text-alert-danger-text border-alert-danger-border",
-            success: "bg-alert-success-bg text-alert-success-text border-alert-success-border",
-            secondary: "bg-alert-secondary-bg text-alert-secondary-text border-alert-secondary-border",
-            muted: "bg-alert-muted-bg text-alert-muted-text border-alert-muted-border",
         },
     },
     defaultVariants: { theme: "default" },
@@ -36,11 +34,11 @@ const Notification = forwardRef(function Toast(props, forwardedRef) {
     const duration = props.duration;
     const variant = props.hover ? "hover" : props.isLast ? "isLast" : "other";
     const className = variants({ theme: props.theme || "default" });
-    return (_jsx(RadixToast.Root, { ref: forwardedRef, asChild: true, forceMount: true, onOpenChange: props.onClose, duration: duration, children: _jsx(motion.li, { layout: true, layoutScroll: true, animate: variant, "data-index": props.index, initial: { y: -100, zIndex: -1 }, className: "text-select pointer-events-auto absolute right-0 top-0 w-80", variants: {
+    return (_jsx(RadixToast.Root, { ref: forwardedRef, asChild: true, forceMount: true, onOpenChange: props.onClose, duration: duration, children: _jsx(motion.li, { layout: true, layoutScroll: true, animate: variant, "data-index": props.index, initial: { y: -100, zIndex: -1 }, className: "absolute top-0 right-0 w-80 pointer-events-auto text-select", variants: {
                 isLast: { y: 10, scale: 1, animationDuration: "300ms", opacity: 1 },
                 hover: { y: 0, position: "static", scale: 1, opacity: 1 },
                 other: animatedIndex[props.reversedIndex] || animatedIndex.default,
-            }, transition: { type: "spring", mass: 1.2, damping: 30, stiffness: 200 }, exit: { opacity: [0.9, 0], transition: { opacity: { bounce: 0.25, duration: 0.3 } } }, children: _jsxs("div", { className: className, children: [_jsxs("div", { className: "flex flex-col p-4", children: [props.title ? (_jsx(RadixToast.Title, { className: "select-text truncate text-lg font-medium leading-relaxed", children: props.title })) : null, _jsx(RadixToast.Description, { className: "select-text truncate", children: props.text })] }), closable ? (_jsx(RadixToast.Close, { className: "absolute right-2 top-2 rounded-full p-1 text-foreground transition hover:bg-danger/10 hover:text-danger-hover", children: _jsx(XIcon, { className: "size-5" }) })) : null] }) }) }));
+            }, transition: { type: "spring", mass: 1.2, damping: 30, stiffness: 200 }, exit: { opacity: [0.9, 0], transition: { opacity: { bounce: 0.25, duration: 0.3 } } }, children: _jsxs("div", { className: className, children: [_jsxs("div", { className: "flex flex-col p-4", children: [props.title ? (_jsx(RadixToast.Title, { className: "text-lg font-medium leading-relaxed select-text truncate", children: "Title" })) : null, _jsx(RadixToast.Description, { className: "select-text truncate", children: props.text })] }), closable ? (_jsx(RadixToast.Close, { className: "absolute top-2 right-2 p-1 rounded-full transition text-foreground hover:bg-danger/10 hover:text-danger-hover", children: _jsx(XIcon, { className: "w-5 h-5" }) })) : null] }) }) }));
 });
 export function Notifications({ children, max = 5, duration = 5000 }) {
     const ref = useRef(null);
@@ -61,10 +59,10 @@ export function Notifications({ children, max = 5, duration = 5000 }) {
         const close = () => setMessages((prev) => prev.filter((x) => x.id !== id));
         return { clear, close };
     }, [max]);
-    return (_jsxs(RadixToast.Provider, { duration: duration, swipeThreshold: 150, children: [_jsx(NotificationContext.Provider, { value: notify, children: children }), _jsx(motion.ol, { children: _jsx(AnimatePresence, { presenceAffectsLayout: true, mode: "popLayout", children: messages.map((toast, index, list) => {
-                        const close = () => setMessages((prev) => prev.filter((t) => t.id !== toast.id));
-                        return (_createElement(Notification, { ...toast, hover: hover, index: index, key: toast.id, onClose: close, isLast: list.length - 1 === index, reversedIndex: list.length - (index + 1) }));
-                    }) }) }), _jsx(RadixToast.Viewport, { ref: ref, "data-items": messages.length, style: {
+    return (_jsxs(RadixToast.Provider, { duration: duration, swipeThreshold: 150, children: [_jsx(NotificationContext.Provider, { value: notify, children: children }), _jsx(AnimatePresence, { presenceAffectsLayout: true, mode: "popLayout", children: messages.map((toast, index, list) => {
+                    const close = () => setMessages((prev) => prev.filter((t) => t.id !== toast.id));
+                    return (_createElement(Notification, { ...toast, key: toast.id, hover: hover, index: index, onClose: close, isLast: list.length - 1 === index, reversedIndex: list.length - (index + 1) }));
+                }) }), _jsx(RadixToast.Viewport, { ref: ref, "data-items": messages.length, style: {
                     justifyContent: "start",
                     height: `${(hover ? messages.length : Math.min(1, messages.length)) * 7}rem`,
                 }, className: "fixed right-4 top-10 flex w-80 list-none flex-col-reverse items-end gap-4 overflow-y-clip overflow-x-visible data-[items=true]:pb-8 max-sm:top-20" })] }));

package/dist/components/floating/menu.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { autoUpdate, flip, FloatingFocusManager, FloatingList, FloatingNode, FloatingPortal, FloatingTree, offset, safePolygon, shift, useClick, useDismiss, useFloating, useFloatingNodeId, useFloatingParentNodeId, useFloatingTree, useHover, useInteractions, useListItem, useListNavigation, useRole, useTypeahead, } from "@floating-ui/react";
-import { Slot } from "@radix-ui/react-slot";
+import { Slot } from "radix-ui";
 import { ChevronRightIcon } from "lucide-react";
 import React, { createContext, Fragment, useContext, useEffect, useRef, useState } from "react";
 import { FLOATING_DELAY, TYPEAHEAD_RESET_DELAY } from "../../constants";
@@ -84,7 +84,7 @@ const MenuComponent = React.forwardRef(({ children, FloatingComponent = "div", h
             tree.events.emit("menuopen", { parentId, nodeId });
     }, [tree, isOpen, nodeId, parentId]);
     const className = isParent ? props.className : css(menuItemClassName(props.className));
-    return (_jsxs(FloatingNode, { id: nodeId, children: [_jsx(Fragment, { children: props.asChild ? (_jsx(Slot, { ...getReferenceProps(parent.getItemProps({
+    return (_jsxs(FloatingNode, { id: nodeId, children: [_jsx(Fragment, { children: props.asChild ? (_jsx(Slot.Root, { ...getReferenceProps(parent.getItemProps({
                         ...props,
                         onFocus(event) {
                             props.onFocus?.(event);

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":"AACA,OAAO,EACH,KAAK,YAAY,EASpB,MAAM,oBAAoB,CAAC;AAI5B,OAAO,EAAmB,eAAe,EAAqE,MAAM,cAAc,CAAC;AACnI,OAAO,KAAkH,MAAM,OAAO,CAAC;AAIvI,OAAO,EAAE,KAAK,EAAO,QAAQ,EAAE,MAAM,aAAa,CAAC;AAMnD,MAAM,MAAM,SAAS,GAAG,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEtD,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,OAAO,CAAC;AAuD9C,MAAM,MAAM,UAAU,GAAG,QAAQ,CAC7B,eAAe,CAAC,KAAK,CAAC,EACtB,CAAC;IAAE,KAAK,EAAE,KAAK,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG;IAAE,SAAS,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC,GAAG;IAC5E,IAAI,EAAE,OAAO,CAAC;IACd,QAAQ,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;CAC1C,GAAG,OAAO,CAAC;IACR,MAAM,EAAE,KAAK,CAAC;IACd,IAAI,EAAE,SAAS,CAAC;IAChB,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,SAAS,EAAE,OAAO,CAAC;IACnB,aAAa,EAAE,MAAM,CAAC;IACtB,gBAAgB,EAAE,MAAM,CAAC;IACzB,QAAQ,EAAE,cAAc,CAAC;IACzB,iBAAiB,EAAE,OAAO,CAAC;IAC3B,IAAI,EAAE,QAAQ,GAAG,SAAS,CAAC;IAC3B,YAAY,EAAE,YAAY,EAAE,CAAC;IAC7B,OAAO,EAAE,KAAK,GAAG,KAAK,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC;CAClC,CAAC,CACL,CAAC;AA6EF,KAAK,QAAQ,GAAG;IAAE,OAAO,EAAE,GAAG,CAAC;IAAC,QAAQ,EAAE,WAAW,GAAG,IAAI,CAAA;CAAE,CAAC;AAI/D,eAAO,MAAM,KAAK;WAtGJ,KAAK;gBAAc,MAAM;;UACzB,OAAO;cACH,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI;;YAE9B,KAAK;UACP,SAAS;cACL,OAAO;aACR,OAAO;cACN,MAAM;aACP,OAAO;eACL,MAAM;cACP,OAAO;eACN,OAAO;mBACH,MAAM;sBACH,MAAM;cACd,cAAc;uBACL,OAAO;UACpB,QAAQ,GAAG,SAAS;kBACZ,YAAY,EAAE;aACnB,KAAK,GAAG,KAAK,CAAC,EAAE,CAAC,GAAG,CAAC;;;;eAnBmB,MAAM;YAAU,KAAK;;UAChE,OAAO;cACH,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI;;YAE9B,KAAK;UACP,SAAS;cACL,OAAO;aACR,OAAO;cACN,MAAM;aACP,OAAO;eACL,MAAM;cACP,OAAO;eACN,OAAO;mBACH,MAAM;sBACH,MAAM;cACd,cAAc;uBACL,OAAO;UACpB,QAAQ,GAAG,SAAS;kBACZ,YAAY,EAAE;aACnB,KAAK,GAAG,KAAK,CAAC,EAAE,CAAC,GAAG,CAAC;;;2CAgSrC,CAAC"}
+{"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["../../../src/components/floating/modal.tsx"],"names":[],"mappings":"AACA,OAAO,EACH,KAAK,YAAY,EASpB,MAAM,oBAAoB,CAAC;AAI5B,OAAO,EAAmB,eAAe,EAAqE,MAAM,cAAc,CAAC;AACnI,OAAO,KAAkH,MAAM,OAAO,CAAC;AAIvI,OAAO,EAAE,KAAK,EAAO,QAAQ,EAAE,MAAM,aAAa,CAAC;AAMnD,MAAM,MAAM,SAAS,GAAG,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEtD,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,OAAO,CAAC;AAuD9C,MAAM,MAAM,UAAU,GAAG,QAAQ,CAC7B,eAAe,CAAC,KAAK,CAAC,EACtB,CAAC;IAAE,KAAK,EAAE,KAAK,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG;IAAE,SAAS,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC,GAAG;IAC5E,IAAI,EAAE,OAAO,CAAC;IACd,QAAQ,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;CAC1C,GAAG,OAAO,CAAC;IACR,MAAM,EAAE,KAAK,CAAC;IACd,IAAI,EAAE,SAAS,CAAC;IAChB,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,SAAS,EAAE,OAAO,CAAC;IACnB,aAAa,EAAE,MAAM,CAAC;IACtB,gBAAgB,EAAE,MAAM,CAAC;IACzB,QAAQ,EAAE,cAAc,CAAC;IACzB,iBAAiB,EAAE,OAAO,CAAC;IAC3B,IAAI,EAAE,QAAQ,GAAG,SAAS,CAAC;IAC3B,YAAY,EAAE,YAAY,EAAE,CAAC;IAC7B,OAAO,EAAE,KAAK,GAAG,KAAK,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC;CAClC,CAAC,CACL,CAAC;AAyEF,KAAK,QAAQ,GAAG;IAAE,OAAO,EAAE,GAAG,CAAC;IAAC,QAAQ,EAAE,WAAW,GAAG,IAAI,CAAA;CAAE,CAAC;AAI/D,eAAO,MAAM,KAAK;WAlGJ,KAAK;gBAAc,MAAM;;UACzB,OAAO;cACH,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI;;YAE9B,KAAK;UACP,SAAS;cACL,OAAO;aACR,OAAO;cACN,MAAM;aACP,OAAO;eACL,MAAM;cACP,OAAO;eACN,OAAO;mBACH,MAAM;sBACH,MAAM;cACd,cAAc;uBACL,OAAO;UACpB,QAAQ,GAAG,SAAS;kBACZ,YAAY,EAAE;aACnB,KAAK,GAAG,KAAK,CAAC,EAAE,CAAC,GAAG,CAAC;;;;eAnBmB,MAAM;YAAU,KAAK;;UAChE,OAAO;cACH,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI;;YAE9B,KAAK;UACP,SAAS;cACL,OAAO;aACR,OAAO;cACN,MAAM;aACP,OAAO;eACL,MAAM;cACP,OAAO;eACN,OAAO;mBACH,MAAM;sBACH,MAAM;cACd,cAAc;uBACL,OAAO;UACpB,QAAQ,GAAG,SAAS;kBACZ,YAAY,EAAE;aACnB,KAAK,GAAG,KAAK,CAAC,EAAE,CAAC,GAAG,CAAC;;;2CAuRrC,CAAC"}

package/dist/components/floating/modal.js

@@ -30,7 +30,7 @@ const animations = {
     },
     dialog: {
         exit: { opacity: 0, scale: 0.95, animationDuration },
-        initial: { opacity: 0.5, scale: 0.95, animationDuration, transition: { duration: 0.5, ease: "easeInOut" } },
+        initial: { opacity: 0.5, scale: 0.95, animationDuration, transition: { duration: 0.5, ease: 'easeInOut' } },
         enter: { opacity: 1, scale: [1.05, 1], animationDuration },
     },
 };
@@ -50,7 +50,7 @@ const variants = cva("z-floating border border-card-border ring-0 outline-0 appe
     defaultVariants: { position: "right", type: "dialog" },
 });
 const dragConstraints = { top: 0, left: 0, right: 0, bottom: 0 };
-const calculateClose = (n) => n * 0.6;
+const calculateClose = (n) => n * 0.65;
 const Draggable = (props) => {
     const onDrag = (_, info) => {
         if (props.parent.current) {
@@ -65,22 +65,18 @@ const Draggable = (props) => {
             const rect = div.getBoundingClientRect();
             const v = props.value.get() || rect.height;
             const result = Math.abs(v - info.delta.y);
-            const max = window.outerHeight;
-            const screenHeightToClose = calculateClose(max);
+            const screenHeightToClose = calculateClose(window.outerHeight);
             if (result >= screenHeightToClose)
                 return props.value.set(result);
-            if (document.activeElement instanceof HTMLElement) {
-                document.activeElement?.blur();
-            }
             props.onChange(false);
-            return setTimeout(() => props.value.set(undefined), 350);
+            return setTimeout(() => props.value.set(window.outerHeight), 350);
         }
     };
     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 }));
+                : "left-2 top-1/2 h-10 w-2"), children: props.sheet ? _jsx("div", { className: "w-1/4 h-2 rounded-lg bg-floating-border" }) : null }));
 };
 const positions = { drawer: "right", sheet: "none", dialog: "none" };
 const fetchPosition = (isDesktop, forceType, propsType, propsPosition) => {
@@ -100,11 +96,12 @@ export const Modal = forwardRef(({ open, title, footer, asChild, trigger, childr
     const func = isDesktop ? animations[_type] : forceType ? animations[_type] : animations.sheet;
     const animation = typeof func === "function" ? func(position) : func;
     const type = isDesktop ? _type : forceType ? _type : "sheet";
-    const floating = useFloating({ open, onOpenChange: onChange });
-    const click = useClick(floating.context, {});
+    const floating = useFloating({ open: open, onOpenChange: onChange, transform: true, strategy: "absolute" });
+    const click = useClick(floating.context);
     const role = useRole(floating.context, { role: roleName });
     const dismiss = useDismiss(floating.context, {
         escapeKey: true,
+        referencePress: true,
         outsidePress: overlayClickClose,
     });
     const interactions = useInteractions([click, role, dismiss].concat(outInteractions));
@@ -112,7 +109,7 @@ export const Modal = forwardRef(({ open, title, footer, asChild, trigger, childr
     const floatingSize = useMotionValue(undefined);
     useEffect(() => {
         floatingSize.set(undefined);
-    }, [type]);
+    }, [floatingSize, type]);
     const onClose = () => onChange(false);
     useImperativeHandle(externalRef, () => {
         return { context: floating.context, floating: removeScrollRef.current };
@@ -142,10 +139,10 @@ export const Modal = forwardRef(({ open, title, footer, asChild, trigger, childr
     };
     const animationProps = animated && type === "sheet"
         ? {
-            ...commonAnimated,
             dragElastic: 0,
             onDrag: onDrag,
             dragConstraints,
+            ...commonAnimated,
             dragListener: true,
             dragMomentum: true,
             dragPropagation: true,
@@ -155,7 +152,7 @@ export const Modal = forwardRef(({ open, title, footer, asChild, trigger, childr
             drag: type === "sheet" ? "y" : "x",
         }
         : commonAnimated;
-    return (_jsxs(Fragment, { children: [trigger ? (_jsx(Fragment, { children: asChild ? (_jsx(Slot, { ref: floating.refs.setReference, ...interactions.getReferenceProps({ layoutId: layoutId }), children: Trigger })) : (_jsx(motion.button, { ref: floating.refs.setReference, ...interactions.getReferenceProps(), layoutId: layoutId, type: "button", children: Trigger })) })) : null, _jsx(FloatingPortal, { preserveTabOrder: true, children: _jsx(AnimatePresence, { propagate: true, mode: "wait", initial: false, children: open ? (_jsx(FloatingOverlay, { lockScroll: true, className: css("inset-0 isolate z-overlay h-[100dvh] !overflow-clip bg-floating-overlay/70", type === "drawer" ? "" : "flex items-start justify-center p-10", overlayClassName), children: _jsx(FloatingFocusManager, { guards: true, visuallyHiddenDismiss: true, modal: true, closeOnFocusOut: true, context: floating.context, children: _jsxs(motion.div, { ...props, ...animationProps, ...(title
+    return (_jsxs(Fragment, { children: [trigger ? (_jsx(Fragment, { children: asChild ? (_jsx(Slot, { ref: floating.refs.setReference, ...interactions.getReferenceProps({ layoutId: layoutId }), children: Trigger })) : (_jsx(motion.button, { ref: floating.refs.setReference, ...interactions.getReferenceProps(), layoutId: layoutId, type: "button", children: Trigger })) })) : null, _jsx(FloatingPortal, { preserveTabOrder: true, children: _jsx(AnimatePresence, { mode: "wait", propagate: true, presenceAffectsLayout: true, initial: false, children: open ? (_jsx(FloatingOverlay, { lockScroll: true, className: css(`inset-0 isolate z-overlay h-[100dvh] !overflow-clip bg-floating-overlay/70 ${type === "drawer" ? "" : "flex items-start justify-center p-10"}`, overlayClassName), children: _jsx(FloatingFocusManager, { guards: true, visuallyHiddenDismiss: true, modal: true, closeOnFocusOut: true, context: floating.context, children: _jsxs(motion.div, { ...props, ...animationProps, ...(title
                                     ? {
                                         "aria-labelledby": headingId,
                                         "aria-describedby": descriptionId,
@@ -167,5 +164,5 @@ export const Modal = forwardRef(({ open, title, footer, asChild, trigger, childr
                                         position,
                                         type,
                                     }), className, "overscroll-contain"),
-                                }), "data-component": "modal", style: type === "drawer" ? { width: floatingSize } : { height: floatingSize }, children: [title ? (_jsx("header", { className: "relative w-full", children: title ? (_jsx("h2", { id: headingId, className: "select-text border-b border-floating-border px-8 pb-2 text-3xl font-medium leading-relaxed", children: title })) : null })) : null, _jsx("section", { "data-component": "modal-body", className: css("flex-1 select-text overflow-y-auto px-8 py-1", bodyClassName), children: children }), footer ? (_jsx("footer", { className: "w-full select-text border-t border-floating-border px-8 pt-4", children: footer })) : null, closable ? (_jsx("nav", { className: "absolute right-4 top-1 z-floating", 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, useResizer && resizer ? (_jsx(Draggable, { onChange: onChange, value: floatingSize, sheet: type === "sheet", position: position, parent: floating.refs.floating })) : null] }) }) })) : null }, headingId) })] }));
+                                }), "data-component": "modal", style: type === "drawer" ? { width: floatingSize } : { height: floatingSize }, children: [title ? (_jsx("header", { className: "relative w-full", children: title ? (_jsx("h2", { id: headingId, className: "px-8 pb-2 text-3xl font-medium leading-relaxed border-b select-text border-floating-border", children: title })) : null })) : null, _jsx("section", { "data-component": "modal-body", className: css("flex-1 select-text overflow-y-auto px-8 py-1", bodyClassName), children: children }), footer ? (_jsx("footer", { className: "px-8 pt-4 w-full border-t select-text border-floating-border", children: footer })) : null, closable ? (_jsx("nav", { className: "absolute top-1 right-4 z-floating", children: _jsx("button", { type: "button", onClick: onClose, className: "p-1 opacity-70 transition-colors hover:opacity-100 hover:text-danger focus:text-danger", children: _jsx(XIcon, {}) }) })) : null, useResizer && resizer ? (_jsx(Draggable, { onChange: onChange, value: floatingSize, sheet: type === "sheet", position: position, parent: floating.refs.floating })) : null] }) }) })) : null }, headingId) })] }));
 });

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,KAAoF,MAAM,OAAO,CAAC;AASzG,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AACpC,OAAO,EAAc,eAAe,EAAE,MAAM,eAAe,CAAC;AAC5D,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,UAAU,CAAC;AAE5C,MAAM,MAAM,qBAAqB,GAAG,WAAW,GAAG;IAAE,MAAM,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAAC,CAAA;CAAE,CAAC;AAErF,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC,GAAG;IACtE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,KAAK,CAAC;IACrB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,OAAO,EAAE,qBAAqB,EAAE,CAAC;CACpC,CAAC;AAiCF,eAAO,MAAM,YAAY,yGAoWxB,CAAC"}
+{"version":3,"file":"autocomplete.d.ts","sourceRoot":"","sources":["../../../src/components/form/autocomplete.tsx"],"names":[],"mappings":"AAgBA,OAAO,KAAoF,MAAM,OAAO,CAAC;AASzG,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AACpC,OAAO,EAAc,eAAe,EAAE,MAAM,eAAe,CAAC;AAC5D,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,UAAU,CAAC;AAG5C,MAAM,MAAM,qBAAqB,GAAG,WAAW,GAAG;IAAE,MAAM,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAAC,CAAA;CAAE,CAAC;AAErF,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC,GAAG;IACtE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,KAAK,CAAC;IACrB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,OAAO,EAAE,qBAAqB,EAAE,CAAC;CACpC,CAAC;AAiCF,eAAO,MAAM,YAAY,yGA0WxB,CAAC"}

package/dist/components/form/autocomplete.js

@@ -13,6 +13,7 @@ import { css, dispatchInput, getRemainingSize, initializeInputDataset, mergeRefs
 import { safeRegex } from "../../lib/fns";
 import { fzf } from "../../lib/fzf";
 import { InputField } from "./input-field";
+import { useReducer } from "use-typed-reducer";
 const Frag = (props) => _jsx(Fragment, { children: props.children });
 const transitionStyles = {
     duration: 300,
@@ -33,45 +34,59 @@ export const Autocomplete = forwardRef(({ left, error, right, loading, options,
     const scroller = useRef(null);
     const fieldset = useRef(null);
     const virtuoso = useRef(null);
-    const defaults = props.value ?? props.defaultValue ?? "";
+    const defaults = options.length === 0 ? "" : props.value ?? props.defaultValue ?? "";
     const translation = useTranslations();
+    const [state, dispatch] = useReducer({
+        open: false,
+        shadow: "",
+        value: defaults,
+        label: options.find((x) => x.value === defaults)?.label ?? defaults,
+        index: null
+    }, (get) => ({
+        open: (open) => ({ open }),
+        index: (index) => ({ index }),
+        shadow: (shadow) => ({ shadow }),
+        option: (value, label) => ({ value, label }),
+        select: (value, label, index) => ({ open: false, shadow: "", index, value, label }),
+        caretDown: () => ({ open: true, shadow: "" }),
+        onClose: () => ({ open: false, label: "", value: "", shadow: "" }),
+        onFocus: () => {
+            const prev = get.state();
+            return { index: prev.index === null ? 0 : prev.index, open: true, shadow: "" };
+        }
+    }));
     const [h, setH] = useState(() => Math.min(320, MIN_SIZE * options.length));
-    const [open, setOpen] = useState(false);
-    const [shadow, setShadow] = useState("");
-    const [value, setValue] = useState(defaults);
-    const [label, setLabel] = useState(() => options.find((x) => x.value === defaults)?.label ?? defaults);
-    const [index, setIndex] = useState(null);
     const listRef = useRef(emptyRef);
-    const removeScrollRef = useRemoveScroll(open, "block-only");
-    const innerOptions = dynamicOption && shadow !== ""
+    const removeScrollRef = useRemoveScroll(state.open, "block-only");
+    const innerOptions = dynamicOption && state.shadow !== ""
         ? [
             {
-                value: shadow,
-                label: shadow,
+                value: state.shadow,
+                label: state.shadow,
                 "data-dynamic": "true",
             },
             ...options,
         ]
         : options;
-    const list = shadow
+    const list = state.shadow
         ? fzf(innerOptions, "value", [
-            { key: "value", value: shadow },
-            { key: "label", value: shadow },
+            { key: "value", value: state.shadow },
+            { key: "label", value: state.shadow },
         ])
         : innerOptions;
     const setClosed = () => {
-        setOpen(false);
         setH(0);
+        dispatch.open(false);
     };
     const displayList = list.filter((x) => x.hidden !== true);
     const pattern = dynamicOption
         ? undefined
         : `^(${options.map((x) => `${safeRegex(x.value)}${x.label ? "|" + safeRegex(x.label) : ""}`).join("|")})$`;
     const { x, y, strategy, refs, context } = useFloating({
-        open,
+        open: state.open,
         transform: true,
-        onOpenChange: setOpen,
         placement: "bottom-start",
+        onOpenChange: dispatch.open,
         whileElementsMounted: autoUpdate,
         middleware: [
             offset(4),
@@ -100,17 +115,20 @@ export const Autocomplete = forwardRef(({ left, error, right, loading, options,
             loop: true,
             virtual: true,
             allowEscape: true,
-            activeIndex: index,
-            selectedIndex: index,
             focusItemOnOpen: "auto",
             openOnArrowKeyDown: true,
             scrollItemIntoView: true,
+            activeIndex: state.index,
+            selectedIndex: state.index,
         }),
     ]);
     useEffect(() => {
         if (props.value) {
+            if (options.length === 0)
+                return dispatch.option("", "");
             const item = options.find((x) => x.value === props.value);
-            setValue(item?.label ?? props.value);
+            if (item)
+                return dispatch.option(item.value, item.label ?? item.value);
         }
     }, [props.value, options.length]);
     useEffect(() => {
@@ -121,7 +139,7 @@ export const Autocomplete = forwardRef(({ left, error, right, loading, options,
             return;
         const s = getRemainingSize(inputRef.current, window.innerHeight);
         setTimeout(() => setH(Math.min(s, displayList.length * MIN_SIZE)), 100);
-    }, [shadow, open, refs.reference, displayList.length]);
+    }, [state.shadow, state.open, refs.reference, displayList.length]);
     useEffect(() => {
         const input = refs.reference.current;
         if (!input)
@@ -129,55 +147,43 @@ export const Autocomplete = forwardRef(({ left, error, right, loading, options,
         return initializeInputDataset(input);
     }, []);
     const onSelect = (opt, i) => {
-        setValue(opt.value);
         const input = refs.reference.current;
-        if (!input)
-            return;
+        if (!input) {
+            return void dispatch.option(opt.value, opt.label ?? opt.value);
+        }
         input?.setAttribute("data-value", opt.value);
         input.value = opt.value;
         const event = new Event("change", { bubbles: false, cancelable: true });
         input.dispatchEvent(event);
         if (props.onChange)
             props.onChange(event);
-        setLabel(opt.label ?? "");
-        setClosed();
-        setShadow("");
-        setIndex(i);
+        const label = options.find(x => x.value === opt.value)?.label || opt.value;
+        dispatch.select(opt.value, label, i);
     };
     const onChange = (event) => {
         const value = event.target.value;
-        setShadow(value);
+        dispatch.shadow(value);
         if (!open && value === "")
-            return setOpen(true);
+            return dispatch.open(true);
         event.target.name = props.name || "";
-        return value ? setOpen(true) : props.onChange?.(event);
+        return value ? dispatch.open(true) : props.onChange?.(event);
     };
     const onCaretDownClick = () => {
-        setOpen(true);
-        setShadow("");
+        dispatch.caretDown();
         refs.reference.current?.focus();
     };
-    const onFocus = () => {
-        setIndex((prev) => (prev === null ? 0 : prev));
-        setOpen(true);
-        setShadow("");
-    };
     const onClose = () => {
         refs.reference.current?.setAttribute("data-value", "");
-        setShadow("");
-        setValue("");
-        setLabel("");
+        dispatch.onClose();
         dispatchInput(refs.reference.current);
-        setClosed();
     };
     const id = props.id || props.name;
     const shadowId = `${id}-shadow`;
     const isEmpty = displayList.length === 0;
-    return (_jsxs(InputField, { ...props, left: left, error: error, ref: fieldset, form: props.form, loading: loading, name: props.name, feedback: feedback, hideLeft: hideLeft, required: required, title: props.title, container: container, rightLabel: rightLabel, interactive: interactive, id: shadowId, optionalText: optionalText, componentName: "autocomplete", labelClassName: labelClassName, placeholder: props.placeholder, right: _jsxs("span", { className: "flex items-center gap-0.5", children: [right, _jsxs("button", { type: "button", className: "p-2 transition-colors link:text-primary md:p-1", onClick: onCaretDownClick, children: [_jsx(ChevronDown, { size: 20 }), _jsx("span", { className: "sr-only", children: translation.inputCaretDown })] }), value ? (_jsx("button", { type: "button", onClick: onClose, className: "p-2 transition-colors link:text-danger md:p-1", 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", { "data-shadow": "true", ...getReferenceProps({
+    return (_jsxs(InputField, { ...props, left: left, error: error, ref: fieldset, form: props.form, loading: loading, name: props.name, feedback: feedback, hideLeft: hideLeft, required: required, title: props.title, container: container, rightLabel: rightLabel, interactive: interactive, id: shadowId, optionalText: optionalText, componentName: "autocomplete", labelClassName: labelClassName, placeholder: props.placeholder, right: _jsxs("span", { className: "flex items-center gap-0.5", children: [right, _jsxs("button", { type: "button", className: "p-2 transition-colors link:text-primary md:p-1", onClick: onCaretDownClick, children: [_jsx(ChevronDown, { size: 20 }), _jsx("span", { className: "sr-only", children: translation.inputCaretDown })] }), state.value ? (_jsx("button", { type: "button", onClick: onClose, className: "p-2 transition-colors link:text-danger md:p-1", 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", { "data-shadow": "true", ...getReferenceProps({
                     ...props,
-                    onFocus,
+                    onFocus: dispatch.onFocus,
                     pattern,
-                    onChange,
                     id: shadowId,
                     name: shadowId,
                     ref: refs.setReference,
@@ -190,23 +196,23 @@ export const Autocomplete = forwardRef(({ left, error, right, loading, options,
                         if (!open)
                             return;
                         if (event.key === "ArrowDown") {
-                            let next = Is.number(index) ? index + 1 : 0;
+                            let next = Is.number(state.index) ? state.index + 1 : 0;
                             if (next > displayList.length - 1)
                                 next = 0;
                             virtuoso.current?.scrollIntoView({ index: next });
-                            return setIndex(next);
+                            return dispatch.index(next);
                         }
                         if (event.key === "ArrowUp") {
-                            let next = Is.number(index) ? index - 1 : displayList.length - 1;
+                            let next = Is.number(state.index) ? state.index - 1 : displayList.length - 1;
                             if (next < 0)
                                 next = displayList.length - 1;
                             virtuoso.current?.scrollIntoView({ index: next });
-                            return setIndex(next);
+                            return dispatch.index(next);
                         }
                         if (event.key === "Enter") {
-                            if (index !== null && displayList[index]) {
+                            if (state.index !== null && displayList[state.index]) {
                                 event.preventDefault();
-                                return onSelect(displayList[index], index);
+                                return onSelect(displayList[state.index], state.index);
                             }
                             if (displayList.length === 1) {
                                 event.preventDefault();
@@ -214,7 +220,7 @@ export const Autocomplete = forwardRef(({ left, error, right, loading, options,
                             }
                         }
                     },
-                }), "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-input-height w-full flex-1", "rounded-md bg-transparent px-input-x py-input-y text-foreground", "outline-none transition-colors focus:ring-2 focus:ring-inset focus:ring-primary", "group-error:text-danger group-error:placeholder-input-mask-error", "text-base group-focus-within:border-primary group-hover:border-primary", 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, { modal: true, guards: true, returnFocus: false, context: context, initialFocus: -1, visuallyHiddenDismiss: true, children: _jsxs(motion.div, { ...getFloatingProps({
+                }), "data-name": id, "data-target": id, autoComplete: "off", onChange: onChange, required: required, "data-error": !!error, "aria-autocomplete": "list", "data-value": state.value, placeholder: props.placeholder, value: state.open ? state.shadow : state.label || state.value, className: css("input placeholder-input-mask group h-input-height w-full flex-1", "rounded-md bg-transparent px-input-x py-input-y text-foreground", "outline-none transition-colors focus:ring-2 focus:ring-inset focus:ring-primary", "group-error:text-danger group-error:placeholder-input-mask-error", "text-base group-focus-within:border-primary group-hover:border-primary", props.className) }), _jsx("input", { id: id, name: id, type: "hidden", "data-origin": id, ref: externalRef, required: required, defaultValue: props.value || state.value || undefined }), _jsx(FloatingPortal, { preserveTabOrder: true, children: open ? (_jsx(FloatingFocusManager, { modal: true, guards: true, returnFocus: false, context: context, initialFocus: -1, visuallyHiddenDismiss: true, children: _jsxs(motion.div, { ...getFloatingProps({
                             ref: mergeRefs(removeScrollRef, refs.setFloating),
                             style: { ...transitions.styles, left: x, top: y ?? 0, position: strategy },
                         }), initial: false, "data-floating": "true", animate: { height: isEmpty ? "auto" : h }, className: "isolate z-floating m-0 max-h-80 origin-[top_center] list-none overscroll-contain rounded-b-lg rounded-t-lg border border-floating-border bg-floating-background p-0 text-foreground shadow-floating ease-in-out", onAnimationComplete: () => {
@@ -226,8 +232,8 @@ export const Autocomplete = forwardRef(({ left, error, right, loading, options,
                             return flushSync(() => setH(sum + 10));
                         }, children: [isEmpty ? (_jsx("div", { role: "option", className: "w-full border-b border-tooltip-border", children: _jsx("span", { className: "flex w-full justify-between p-2 text-left text-disabled", children: emptyMessage || translation.autocompleteEmpty }) })) : null, _jsx(Virtuoso, { overscan: 40, ref: virtuoso, hidden: isEmpty, data: displayList, style: { height: h - 10 }, defaultItemHeight: MIN_SIZE, components: components, scrollerRef: (e) => void (scroller.current = e), className: "max-h-[calc(100%-2px)] overscroll-contain rounded-lg border-floating bg-floating-background p-0 text-foreground", itemContent: (i, option) => {
                                     const Label = option.Render ?? Frag;
-                                    const active = value === option.value || value === option.label;
-                                    const selected = index === i;
+                                    const active = state.value === option.value || state.value === option.label;
+                                    const selected = state.index === i;
                                     const children = option.label ?? option.value;
                                     return (_jsx("button", { "data-value": option.value, ...getItemProps({
                                             ref: (node) => void (listRef.current[i] = node),

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

@@ -1,5 +1,5 @@
-import { type SliderProps as RadixSliderProps } from "@radix-ui/react-slider";
-type SliderProps = RadixSliderProps & {
+import { Slider as RadixSlider } from "radix-ui";
+type SliderProps = Parameters<typeof RadixSlider.Root>[0] & {
     tooltip?: boolean;
 };
 export declare const Slider: (props: SliderProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1 +1 @@
-{"version":3,"file":"slider.d.ts","sourceRoot":"","sources":["../../../src/components/form/slider.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,WAAW,IAAI,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAO9E,KAAK,WAAW,GAAG,gBAAgB,GAAG;IAClC,OAAO,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAmCF,eAAO,MAAM,MAAM,GAAI,OAAO,WAAW,4CAoBxC,CAAC"}
+{"version":3,"file":"slider.d.ts","sourceRoot":"","sources":["../../../src/components/form/slider.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,UAAU,CAAC;AAOjD,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,GAAG;IACxD,OAAO,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAmCF,eAAO,MAAM,MAAM,GAAI,OAAO,WAAW,4CAoBxC,CAAC"}

package/dist/components/index.d.ts

@@ -11,6 +11,7 @@ export * from "./display/progress";
 export * from "./display/stats";
 export * from "./display/tabs";
 export * from "./display/timeline";
+export * from "./display/list";
 export * from "./floating/command-palette";
 export * from "./floating/dropdown";
 export * from "./floating/expand";

package/dist/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,kBAAkB,CAAC;AACjC,cAAc,uBAAuB,CAAC;AACtC,cAAc,YAAY,CAAC;AAC3B,cAAc,iBAAiB,CAAC;AAChC,cAAc,oBAAoB,CAAC;AACnC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC;AAChC,cAAc,yBAAyB,CAAC;AACxC,cAAc,oBAAoB,CAAC;AACnC,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,oBAAoB,CAAC;AACnC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,qBAAqB,CAAC;AACpC,cAAc,mBAAmB,CAAC;AAClC,cAAc,iBAAiB,CAAC;AAChC,cAAc,kBAAkB,CAAC;AACjC,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,iBAAiB,CAAC;AAChC,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,kBAAkB,CAAC;AACjC,cAAc,iBAAiB,CAAC;AAChC,cAAc,sBAAsB,CAAC;AACrC,cAAc,eAAe,CAAC;AAC9B,OAAO,EAAE,aAAa,EAAE,gBAAgB,EAAE,KAAK,OAAO,EAAE,mBAAmB,EAAE,KAAK,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAC7H,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,kBAAkB,CAAC;AACjC,cAAc,uBAAuB,CAAC;AACtC,cAAc,YAAY,CAAC;AAC3B,cAAc,iBAAiB,CAAC;AAChC,cAAc,oBAAoB,CAAC;AACnC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC;AAChC,cAAc,yBAAyB,CAAC;AACxC,cAAc,oBAAoB,CAAC;AACnC,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,oBAAoB,CAAC;AACnC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,4BAA4B,CAAC;AAC3C,cAAc,qBAAqB,CAAC;AACpC,cAAc,mBAAmB,CAAC;AAClC,cAAc,iBAAiB,CAAC;AAChC,cAAc,kBAAkB,CAAC;AACjC,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,iBAAiB,CAAC;AAChC,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,kBAAkB,CAAC;AACjC,cAAc,iBAAiB,CAAC;AAChC,cAAc,sBAAsB,CAAC;AACrC,cAAc,eAAe,CAAC;AAC9B,OAAO,EAAE,aAAa,EAAE,gBAAgB,EAAE,KAAK,OAAO,EAAE,mBAAmB,EAAE,KAAK,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAC7H,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC"}

package/dist/components/index.js

@@ -11,6 +11,7 @@ export * from "./display/progress";
 export * from "./display/stats";
 export * from "./display/tabs";
 export * from "./display/timeline";
+export * from "./display/list";
 export * from "./floating/command-palette";
 export * from "./floating/dropdown";
 export * from "./floating/expand";