@g4rcez/components 2.0.6 → 2.0.8

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" | "danger" | "success" | null | undefined;
+    theme?: "default" | "info" | "warn" | "muted" | "danger" | "success" | "secondary" | 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":"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"}
+{"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"}

package/dist/components/display/notifications.js

@@ -1,20 +1,22 @@
 "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 { AnimatePresence, motion } from "motion/react";
 import { XIcon } from "lucide-react";
+import { AnimatePresence, motion } from "motion/react";
+import { Toast as RadixToast } from "radix-ui";
 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 supports-[backdrop-filter]:backdrop-blur-xl", {
+const variants = cva("relative isolate z-tooltip flex justify-between overflow-hidden whitespace-nowrap rounded-lg border text-sm shadow-shadow-notification", {
     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" },
@@ -34,11 +36,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: "absolute top-0 right-0 w-80 pointer-events-auto text-select", 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: "text-select pointer-events-auto absolute right-0 top-0 w-80", 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: "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] }) }) }));
+            }, 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] }) }) }));
 });
 export function Notifications({ children, max = 5, duration = 5000 }) {
     const ref = useRef(null);
@@ -59,10 +61,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(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: {
+    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: {
                     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/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;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"}
+{"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"}

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.65;
+const calculateClose = (n) => n * 0.6;
 const Draggable = (props) => {
     const onDrag = (_, info) => {
         if (props.parent.current) {
@@ -65,18 +65,22 @@ const Draggable = (props) => {
             const rect = div.getBoundingClientRect();
             const v = props.value.get() || rect.height;
             const result = Math.abs(v - info.delta.y);
-            const screenHeightToClose = calculateClose(window.outerHeight);
+            const max = window.outerHeight;
+            const screenHeightToClose = calculateClose(max);
             if (result >= screenHeightToClose)
                 return props.value.set(result);
+            if (document.activeElement instanceof HTMLElement) {
+                document.activeElement?.blur();
+            }
             props.onChange(false);
-            return setTimeout(() => props.value.set(window.outerHeight), 350);
+            return setTimeout(() => props.value.set(undefined), 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: "w-1/4 h-2 rounded-lg bg-floating-border" }) : null }));
+                : "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" };
 const fetchPosition = (isDesktop, forceType, propsType, propsPosition) => {
@@ -96,12 +100,11 @@ 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: open, onOpenChange: onChange, transform: true, strategy: "absolute" });
-    const click = useClick(floating.context);
+    const floating = useFloating({ open, onOpenChange: onChange });
+    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));
@@ -109,7 +112,7 @@ export const Modal = forwardRef(({ open, title, footer, asChild, trigger, childr
     const floatingSize = useMotionValue(undefined);
     useEffect(() => {
         floatingSize.set(undefined);
-    }, [floatingSize, type]);
+    }, [type]);
     const onClose = () => onChange(false);
     useImperativeHandle(externalRef, () => {
         return { context: floating.context, floating: removeScrollRef.current };
@@ -139,10 +142,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,
@@ -152,7 +155,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, { 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
+    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
                                     ? {
                                         "aria-labelledby": headingId,
                                         "aria-describedby": descriptionId,
@@ -164,5 +167,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: "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) })] }));
+                                }), "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) })] }));
 });

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;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"}
+{"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,yGAsWxB,CAAC"}

package/dist/components/form/autocomplete.js

@@ -13,7 +13,6 @@ 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,
@@ -34,59 +33,43 @@ export const Autocomplete = forwardRef(({ left, error, right, loading, options,
     const scroller = useRef(null);
     const fieldset = useRef(null);
     const virtuoso = useRef(null);
-    const defaults = options.length === 0 ? "" : props.value ?? props.defaultValue ?? "";
+    const defaults = 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(state.open, "block-only");
-    const innerOptions = dynamicOption && state.shadow !== ""
+    const removeScrollRef = useRemoveScroll(open, "block-only");
+    const innerOptions = dynamicOption && shadow !== ""
         ? [
             {
-                value: state.shadow,
-                label: state.shadow,
+                value: shadow,
+                label: shadow,
                 "data-dynamic": "true",
             },
             ...options,
         ]
         : options;
-    const list = state.shadow
-        ? fzf(innerOptions, "value", [
-            { key: "value", value: state.shadow },
-            { key: "label", value: state.shadow },
-        ])
+    const openDropdown = () => flushSync(() => setOpen(true));
+    const list = shadow
+        ? fzf(innerOptions, "value", [{ key: "value", value: shadow }, { key: "label", value: 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: state.open,
+        open,
         transform: true,
+        onOpenChange: setOpen,
         placement: "bottom-start",
-        onOpenChange: dispatch.open,
         whileElementsMounted: autoUpdate,
         middleware: [
             offset(4),
@@ -115,20 +98,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);
-            if (item)
-                return dispatch.option(item.value, item.label ?? item.value);
+            if (item) {
+                setLabel(item.label ?? item.value);
+                setValue(props.value);
+            }
         }
     }, [props.value, options.length]);
     useEffect(() => {
@@ -139,7 +122,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);
-    }, [state.shadow, state.open, refs.reference, displayList.length]);
+    }, [shadow, open, refs.reference, displayList.length]);
     useEffect(() => {
         const input = refs.reference.current;
         if (!input)
@@ -147,43 +130,55 @@ 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 void dispatch.option(opt.value, opt.label ?? opt.value);
-        }
+        if (!input)
+            return;
         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);
-        const label = options.find(x => x.value === opt.value)?.label || opt.value;
-        dispatch.select(opt.value, label, i);
+        setLabel(opt.label ?? "");
+        setClosed();
+        setShadow("");
+        setIndex(i);
     };
     const onChange = (event) => {
         const value = event.target.value;
-        dispatch.shadow(value);
+        setShadow(value);
         if (!open && value === "")
-            return dispatch.open(true);
+            return setOpen(true);
         event.target.name = props.name || "";
-        return value ? dispatch.open(true) : props.onChange?.(event);
+        return value ? setOpen(true) : props.onChange?.(event);
     };
     const onCaretDownClick = () => {
-        dispatch.caretDown();
+        openDropdown();
+        setShadow("");
         refs.reference.current?.focus();
     };
+    const onFocus = () => {
+        setIndex((prev) => (prev === null ? 0 : prev));
+        openDropdown();
+        setShadow("");
+    };
     const onClose = () => {
         refs.reference.current?.setAttribute("data-value", "");
-        dispatch.onClose();
+        setShadow("");
+        setValue("");
+        setLabel("");
         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 })] }), 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({
+    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({
                     ...props,
-                    onFocus: dispatch.onFocus,
+                    onFocus,
                     pattern,
+                    onChange,
                     id: shadowId,
                     name: shadowId,
                     ref: refs.setReference,
@@ -196,23 +191,23 @@ export const Autocomplete = forwardRef(({ left, error, right, loading, options,
                         if (!open)
                             return;
                         if (event.key === "ArrowDown") {
-                            let next = Is.number(state.index) ? state.index + 1 : 0;
+                            let next = Is.number(index) ? index + 1 : 0;
                             if (next > displayList.length - 1)
                                 next = 0;
                             virtuoso.current?.scrollIntoView({ index: next });
-                            return dispatch.index(next);
+                            return setIndex(next);
                         }
                         if (event.key === "ArrowUp") {
-                            let next = Is.number(state.index) ? state.index - 1 : displayList.length - 1;
+                            let next = Is.number(index) ? index - 1 : displayList.length - 1;
                             if (next < 0)
                                 next = displayList.length - 1;
                             virtuoso.current?.scrollIntoView({ index: next });
-                            return dispatch.index(next);
+                            return setIndex(next);
                         }
                         if (event.key === "Enter") {
-                            if (state.index !== null && displayList[state.index]) {
+                            if (index !== null && displayList[index]) {
                                 event.preventDefault();
-                                return onSelect(displayList[state.index], state.index);
+                                return onSelect(displayList[index], index);
                             }
                             if (displayList.length === 1) {
                                 event.preventDefault();
@@ -220,7 +215,7 @@ export const Autocomplete = forwardRef(({ left, error, right, loading, options,
                             }
                         }
                     },
-                }), "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({
+                }), "data-value": value, "data-error": !!error, "data-name": id, "data-target": id, required: required, value: open ? shadow : options.length === 0 ? "" : 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({
                             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: () => {
@@ -232,8 +227,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 = state.value === option.value || state.value === option.label;
-                                    const selected = state.index === i;
+                                    const active = value === option.value || value === option.label;
+                                    const selected = 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/table/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/table/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,EAA2B,cAAc,EAAoD,MAAM,OAAO,CAAC;AAMzH,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAGlC,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AACxC,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAIpC,OAAO,EAAa,MAAM,EAAE,MAAM,QAAQ,CAAC;AAC3C,OAAO,EAAE,gBAAgB,EAAE,GAAG,EAAoB,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAS3F,KAAK,eAAe,CAAC,CAAC,SAAS,GAAG,IAAI,cAAc,CAAC,gBAAgB,CAAC,GAClE,mBAAmB,CAAC,CAAC,CAAC,GAAG;IACrB,IAAI,EAAE,CAAC,EAAE,CAAC;IACV,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC;IACf,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC;IACtB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,MAAM,CAAC,EAAE,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,UAAU,EAAE,WAAW,EAAE,CAAC;IAC1B,OAAO,CAAC,EAAE,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC;IAC5B,KAAK,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAC,CAAC;IACtC,YAAY,CAAC,EAAE,MAAM,WAAW,GAAG,SAAS,CAAC;IAC7C,SAAS,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;CACnE,CAAC;AAgLN,MAAM,MAAM,UAAU,CAAC,CAAC,SAAS,GAAG,IAAI,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,aAAa,GAAG,QAAQ,GAAG,OAAO,CAAC,GAAG;IACrH,IAAI,EAAE,MAAM,CAAC;CAChB,GAAG,OAAO,CACP,mBAAmB,CAAC,CAAC,CAAC,GAAG;IACrB,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC,CAAC;IACnB,UAAU,EAAE,OAAO,CAAC;IACpB,UAAU,EAAE,OAAO,CAAC;IACpB,YAAY,EAAE,OAAO,CAAC;IACtB,YAAY,EAAE,OAAO,CAAC;IACtB,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,WAAW,GAAG,SAAS,CAAC;CAChD,CACJ,CAAC;AASF,eAAO,MAAM,KAAK,GAAI,CAAC,SAAS,GAAG,EAAE,OAAO,UAAU,CAAC,CAAC,CAAC,4CA8GxD,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/table/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,EAA2B,cAAc,EAAoD,MAAM,OAAO,CAAC;AAMzH,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAGlC,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AACxC,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAIpC,OAAO,EAAa,MAAM,EAAE,MAAM,QAAQ,CAAC;AAC3C,OAAO,EAAE,gBAAgB,EAAE,GAAG,EAAoB,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAS3F,KAAK,eAAe,CAAC,CAAC,SAAS,GAAG,IAAI,cAAc,CAAC,gBAAgB,CAAC,GAClE,mBAAmB,CAAC,CAAC,CAAC,GAAG;IACrB,IAAI,EAAE,CAAC,EAAE,CAAC;IACV,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC;IACf,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC;IACtB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,MAAM,CAAC,EAAE,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,UAAU,EAAE,WAAW,EAAE,CAAC;IAC1B,OAAO,CAAC,EAAE,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC;IAC5B,KAAK,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAC,CAAC;IACtC,YAAY,CAAC,EAAE,MAAM,WAAW,GAAG,SAAS,CAAC;IAC7C,SAAS,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;CACnE,CAAC;AA8KN,MAAM,MAAM,UAAU,CAAC,CAAC,SAAS,GAAG,IAAI,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,aAAa,GAAG,QAAQ,GAAG,OAAO,CAAC,GAAG;IACrH,IAAI,EAAE,MAAM,CAAC;CAChB,GAAG,OAAO,CACP,mBAAmB,CAAC,CAAC,CAAC,GAAG;IACrB,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC,CAAC;IACnB,UAAU,EAAE,OAAO,CAAC;IACpB,UAAU,EAAE,OAAO,CAAC;IACpB,YAAY,EAAE,OAAO,CAAC;IACtB,YAAY,EAAE,OAAO,CAAC;IACtB,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,WAAW,GAAG,SAAS,CAAC;CAChD,CACJ,CAAC;AASF,eAAO,MAAM,KAAK,GAAI,CAAC,SAAS,GAAG,EAAE,OAAO,UAAU,CAAC,CAAC,CAAC,4CA8GxD,CAAC"}

package/dist/components/table/index.js

@@ -21,14 +21,14 @@ const useTable = () => useContext(TableContext);
 const TableBody = React.forwardRef(({ context, className = "", ...props }, ref) => {
     return (_jsx("tbody", { ...props, role: "rowgroup", className: `divide-y divide-table-border ${className}`, ref: ref, children: _jsx(AnimatePresence, { children: props.children }) }));
 });
-const VirtualTable = React.forwardRef(({ context, className = "", ...props }, ref) => (_jsx("table", { ...props, ref: ref, role: "table", className: `table min-w-full table-fixed border-separate text-left ${className ?? ""}` })));
+const VirtualTable = React.forwardRef(({ context, className = "", ...props }, ref) => (_jsx("table", { ...props, ref: ref, role: "table", className: `table min-w-full table-fixed border-spacing-0 border-separate text-left ${className ?? ""}` })));
 const Thead = React.forwardRef(({ context, ...props }, ref) => {
     const ctx = useTable();
     const style = {
         ...props?.style,
         top: Is.number(ctx.sticky) ? `${ctx.sticky}px` : undefined,
     };
-    return (_jsx("thead", { ...props, style: style, role: "rowgroup", className: "hidden top-0 bg-transparent md:table-header-group shadow-shadow-card group:sticky", ref: ref }));
+    return (_jsx("thead", { ...props, ref: ref, style: style, role: "rowgroup", className: "hidden top-0 bg-transparent md:table-header-group shadow-shadow-card group:sticky" }));
 });
 const TRow = React.forwardRef(({ context, item, ...props }, ref) => {
     return (_jsx("tr", { ...props, role: "row", ref: ref, className: `group-table-row flex h-fit flex-col flex-wrap justify-center gap-1 md:table-row ${props?.className ?? ""}` }));
@@ -87,7 +87,7 @@ const InnerTable = ({ cols, filters, setCols, sorters, setFilters, setSorters, o
     }, [loadingMoreRef, onScrollEndRef]);
     const empty = rows.length === 0;
     const context = { loading: props.loading, loadingMore: props.loadingMore, cols: cols, Aside: props.Aside };
-    return (_jsxs("div", { className: "min-w-full", children: [_jsxs("div", { className: `group w-full relative rounded-lg ${border ? "border border-table-border" : ""}`, children: [_jsx(TableVirtuoso, { context: context, components: components, totalCount: rows.length, style: { height: "100%" }, itemContent: empty ? EmptyCell : Row, data: empty ? emptyRows : rows, useWindowScroll: getScrollRef ? false : true, fixedFooterContent: showLoadingFooter ? Frag : null, customScrollParent: getScrollRef ? getScrollRef() : undefined, fixedHeaderContent: () => (_jsx(TableHeader, { headers: cols, filters: filters, setCols: setCols, sorters: sorters, setFilters: setFilters, setSorters: setSorters, loading: !!props.loading, inlineFilter: props.inlineFilter, inlineSorter: props.inlineSorter })) }), empty ? _jsx(EmptyContent, { loading: props.loading }) : null, _jsx("div", { "aria-hidden": "true", ref: ref, className: "w-full h-0.5" })] }), pagination !== null ? _jsx(Pagination, { ...pagination }) : null] }));
+    return (_jsxs("div", { className: "min-w-full", children: [_jsxs("div", { className: `group h-full w-full relative rounded-lg ${border ? "border border-table-border" : ""}`, children: [_jsx(TableVirtuoso, { context: context, components: components, totalCount: rows.length, itemContent: empty ? EmptyCell : Row, data: empty ? emptyRows : rows, useWindowScroll: getScrollRef ? false : true, fixedFooterContent: showLoadingFooter ? Frag : null, customScrollParent: getScrollRef ? getScrollRef() : undefined, fixedHeaderContent: () => (_jsx(TableHeader, { headers: cols, filters: filters, setCols: setCols, sorters: sorters, setFilters: setFilters, setSorters: setSorters, loading: !!props.loading, inlineFilter: props.inlineFilter, inlineSorter: props.inlineSorter })) }), empty ? _jsx(EmptyContent, { loading: props.loading }) : null, _jsx("div", { "aria-hidden": "true", ref: ref, className: "w-full h-0.5" })] }), pagination !== null ? _jsx(Pagination, { ...pagination }) : null] }));
 };
 const dispatcherFun = (prev, setter) => typeof setter === "function" ? setter(prev) : setter;
 const compareAndExec = (prev, state, exec) => (prev === state ? undefined : exec?.(state));

package/dist/components/table/row.js

@@ -27,9 +27,7 @@ const RowAside = (props) => {
         observer.observe(child);
         return () => observer.disconnect();
     }, []);
-    return (_jsx("div", { ref: parentRef, onMouseEnter: onEnter, onMouseLeave: onLeave, "data-component": "cell-aside", 
-        // inert={ariaHidden ? true : undefined}
-        tabIndex: ariaHidden ? -1 : undefined, className: `group-table-cell-aside absolute inset-0 top-0 flex h-full w-full min-w-8 max-w-20 items-stretch transition-opacity duration-300 ease-in-out ${className}`, children: _jsx("div", { ref: ref, className: "isolate block h-full w-auto", children: props.children }) }));
+    return (_jsx("div", { ref: parentRef, onMouseEnter: onEnter, onMouseLeave: onLeave, "data-component": "cell-aside", inert: ariaHidden ? true : undefined, tabIndex: ariaHidden ? -1 : undefined, className: `group-table-cell-aside absolute inset-0 top-0 flex h-full w-full items-stretch transition-opacity duration-300 ease-in-out ${className}`, children: _jsx("div", { ref: ref, className: "block isolate", children: props.children }) }));
 };
 export const Row = (index, row, context) => {
     const cols = context.cols;
@@ -43,7 +41,7 @@ export const Row = (index, row, context) => {
             const Aside = context.Aside;
             return (_createElement("td", { ...col.cellProps, role: "cell", "data-matrix": matrix, key: `accessor-${index}-${colIndex}`, className: `group-table-cell py-2 sm:py-2 flex flex-col md:table-cell md:h-14 md:border-l md:border-table-border px-2 first:border-transparent ${className}` },
                 exposeAside ? (_jsx(RowAside, { children: _jsx(Aside, { col: col, row: row, rowIndex: index }) })) : null,
-                _jsx("span", { className: "block md:hidden text-sm font-bold leading-tight", children: col.thead }),
+                _jsx("span", { className: "block text-sm font-bold leading-tight md:hidden", children: col.thead }),
                 _jsx("span", { className: "relative", children: loading ? (SkeletonCell) : Component ? (_jsx(Fragment, { children: _jsx(Component, { row: row, matrix: matrix, col: col, rowIndex: index, value: value }) })) : (_jsx(Fragment, { children: Is.nil(value) ? "" : value })) })));
         }) }));
 };

package/dist/components/table/table-lib.d.ts

@@ -48,7 +48,9 @@ type ColOptions<T extends POJO, K extends AllPaths<T>> = Partial<{
     cellProps: React.HTMLAttributes<HTMLTableCellElement>;
 }>;
 export type ColConstructor<T extends POJO> = {
+    getAll: () => Col<T>[];
     remove: <K extends AllPaths<T>>(id: K) => void;
+    filter: (c: (c: Col<T>) => boolean) => Col<T>[];
     add: <K extends AllPaths<T>>(id: K, thead: THead, props?: ColOptions<T, K>) => void;
 };
 declare const cols: <T extends POJO>() => <K extends AllPaths<T>>(id: K, thead: THead, options: ColOptions<T, K>) => {

package/dist/components/table/table-lib.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"table-lib.d.ts","sourceRoot":"","sources":["../../../src/components/table/table-lib.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"table-lib.d.ts","sourceRoot":"","sources":["../../../src/components/table/table-lib.ts"],"names":[],"mappings":"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"}

package/dist/components/table/table-lib.js

@@ -17,12 +17,15 @@ export var ColType;
     ColType["Text"] = "text";
 })(ColType || (ColType = {}));
 export const valueFromType = (input) => (input.type === "number" ? input.valueAsNumber : input.value);
+;
 const cols = () => (id, thead, options) => ({ ...options, id, thead });
 export const createColumns = (callback) => {
     let items = [];
     const add = (id, thead, options) => items.push({ ...options, id, thead });
     const remove = (id) => (items = items.filter((x) => x.id !== id));
-    callback({ add, remove });
+    const getAll = () => Array.from(items);
+    const filter = (c) => (items = Array.from(items.filter(c)));
+    callback({ add, remove, getAll, filter });
     return items;
 };
 const noop = {};
@@ -70,7 +73,7 @@ export const useWidthControl = (reorder) => {
     const onChange = useCallback((cols) => {
         stableRef.current(cols);
         cols.forEach((x) => {
-            const c = ref.current.querySelector(`th[data-colid="${x.id}"]`);
+            const c = ref.current.querySelector(`th[data-tableheader="${x.id}"]`);
             if (!c)
                 return;
             c.style.width = "auto";

package/dist/components/table/thead.js

@@ -42,7 +42,7 @@ const HeaderChild = (props) => {
     const ownSorter = props.sorters.find((x) => props.header.id === x.value);
     const ariaSort = !ownSorter?.type ? "none" : ownSorter.type === Order.Asc ? "ascending" : "descending";
     const label = getLabel(props.header);
-    return (_jsxs(Reorder.Item, { ...props.header.thProps, as: "th", ref: dragRef, initial: false, dragSnapToOrigin: true, dragDirectionLock: true, role: "columnheader", "aria-sort": ariaSort, value: props.header, "aria-busy": props.loading, "data-colid": props.header.id, whileDrag: { cursor: "grabbing" }, className: `relative min-w-0 cursor-grab font-medium ${props.header.thProps?.className ?? ""}`, children: [_jsx("span", { className: `flex h-full items-center justify-between bg-table-header px-2 py-4 ${props.isLast ? "rounded-tr-lg" : ""} ${props.index === 0 ? "rounded-tl-lg" : ""}`, children: _jsxs("span", { className: "flex items-center gap-1", children: [props.inlineFilter && defaultAllowFilter ? (_jsx(Dropdown, { arrow: true, trigger: _jsxs("span", { children: [_jsxs("span", { id: `${props.header.id}-filter-dropdown-button`, className: "sr-only", children: [translation.tableFilterDropdownTitleUnique, " ", label] }), _jsx(FilterIcon, { "aria-labelledby": `${props.header.id}-filter-dropdown-button`, size: 14 })] }), title: _jsxs("span", { className: "text-lg", children: [translation.tableFilterDropdownTitleUnique, " ", _jsx("span", { className: "font-medium", children: label })] }), children: _jsxs("ul", { className: "font-medium", children: [ownFilters.length === 0 ? null : (_jsx(Fragment, { children: ownFilters.map((filter) => (_jsx("li", { className: "my-1", children: _jsx(ColumnHeaderFilter, { onDelete: onDelete, filter: filter, set: props.setFilters }) }, `thead-filter-${filter.id}`))) })), _jsx("li", { children: _jsxs("button", { type: "button", className: "flex items-center gap-1 text-primary", onClick: () => props.setFilters((prev) => prev.concat(createFilterFromCol(props.header, operators.options, operators.operations))), children: [_jsx(PlusIcon, { size: 14 }), " ", translation.tableFilterNewFilter] }) })] }) })) : null, _jsx("span", { className: "pointer-events-auto text-balance text-base", children: props.header.thead }), props.inlineSorter && defaultAllowSort ? (_jsx(SorterHead, { col: props.header, setSorters: props.setSorters, sorters: props.sorters })) : null] }) }), props.isLast ? null : (_jsx(motion.button, { drag: "x", draggable: true, dragListener: true, dragMomentum: true, type: "button", animate: false, dragElastic: 0, dragPropagation: true, initial: false, dragSnapToOrigin: true, dragDirectionLock: true, "data-type": "resizer", title: props.header.id, dragConstraints: dragConstraints, className: "absolute -right-[0.5px] top-0 z-calendar block h-full w-[1px] cursor-col-resize bg-table-border hover:w-1.5 hover:bg-primary active:w-1.5 active:bg-primary", onClick: (e) => void e.currentTarget.focus(), onKeyDown: (e) => {
+    return (_jsxs(Reorder.Item, { ...props.header.thProps, as: "th", ref: dragRef, initial: false, dragSnapToOrigin: true, dragDirectionLock: true, role: "columnheader", "aria-sort": ariaSort, value: props.header, "aria-busy": props.loading, "data-tableheader": props.header.id, whileDrag: { cursor: "grabbing" }, className: `relative min-w-0 cursor-grab font-medium ${props.header.thProps?.className ?? ""}`, children: [_jsx("span", { className: `flex h-full items-center justify-between bg-table-header px-2 py-4 ${props.isLast ? "rounded-tr-lg" : ""} ${props.index === 0 ? "rounded-tl-lg" : ""}`, children: _jsxs("span", { className: "flex gap-1 items-center", children: [props.inlineFilter && defaultAllowFilter ? (_jsx(Dropdown, { arrow: true, trigger: _jsxs("span", { children: [_jsxs("span", { id: `${props.header.id}-filter-dropdown-button`, className: "sr-only", children: [translation.tableFilterDropdownTitleUnique, " ", label] }), _jsx(FilterIcon, { "aria-labelledby": `${props.header.id}-filter-dropdown-button`, size: 14 })] }), title: _jsxs("span", { className: "text-lg", children: [translation.tableFilterDropdownTitleUnique, " ", _jsx("span", { className: "font-medium", children: label })] }), children: _jsxs("ul", { className: "font-medium", children: [ownFilters.length === 0 ? null : (_jsx(Fragment, { children: ownFilters.map((filter) => (_jsx("li", { className: "my-1", children: _jsx(ColumnHeaderFilter, { onDelete: onDelete, filter: filter, set: props.setFilters }) }, `thead-filter-${filter.id}`))) })), _jsx("li", { children: _jsxs("button", { type: "button", className: "flex gap-1 items-center text-primary", onClick: () => props.setFilters((prev) => prev.concat(createFilterFromCol(props.header, operators.options, operators.operations))), children: [_jsx(PlusIcon, { size: 14 }), " ", translation.tableFilterNewFilter] }) })] }) })) : null, _jsx("span", { className: "text-base pointer-events-auto text-balance", children: props.header.thead }), props.inlineSorter && defaultAllowSort ? (_jsx(SorterHead, { col: props.header, setSorters: props.setSorters, sorters: props.sorters })) : null] }) }), props.isLast ? null : (_jsx(motion.button, { drag: "x", draggable: true, dragListener: true, dragMomentum: true, type: "button", animate: false, dragElastic: 0, dragPropagation: true, initial: false, dragSnapToOrigin: true, dragDirectionLock: true, "data-type": "resizer", title: props.header.id, dragConstraints: dragConstraints, className: "block absolute top-0 h-full hover:w-1.5 active:w-1.5 -right-[0.5px] z-calendar w-[1px] cursor-col-resize bg-table-border hover:bg-primary active:bg-primary", onClick: (e) => void e.currentTarget.focus(), onKeyDown: (e) => {
                     if (e.key === "ArrowLeft" || e.key === "ArrowRight") {
                         if (th.current === null)
                             return;
@@ -67,5 +67,5 @@ const HeaderChild = (props) => {
 };
 export const TableHeader = (props) => {
     const [ref, onChange] = useWidthControl(props.setCols);
-    return (_jsx(Reorder.Group, { layout: true, as: "tr", axis: "x", drag: "x", layoutRoot: true, role: "row", layoutScroll: true, ref: ref, onReorder: onChange, values: props.headers, children: _jsx(AnimatePresence, { children: props.headers.map((header, index) => (_jsx(HeaderChild, { index: index, header: header, filters: props.filters, loading: props.loading, sorters: props.sorters, setFilters: props.setFilters, setSorters: props.setSorters, inlineFilter: props.inlineFilter, inlineSorter: props.inlineSorter, isLast: index === props.headers.length - 1 }, `header-child-item-${header.id}`))) }) }));
+    return (_jsx(Reorder.Group, { layout: true, as: "tr", axis: "x", drag: "x", ref: ref, layoutRoot: true, role: "row", layoutScroll: true, onReorder: onChange, values: props.headers, children: _jsx(AnimatePresence, { children: props.headers.map((header, index) => (_jsx(HeaderChild, { index: index, header: header, filters: props.filters, loading: props.loading, sorters: props.sorters, setFilters: props.setFilters, setSorters: props.setSorters, inlineFilter: props.inlineFilter, inlineSorter: props.inlineSorter, isLast: index === props.headers.length - 1 }, `header-child-item-${header.id}`))) }) }));
 };