@g4rcez/components 2.0.13 → 2.0.15

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

@@ -7,6 +7,7 @@ declare const variants: {
         big: string;
         default: string;
         small: string;
+        tiny: string;
     };
     theme: {
         custom: string;

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

@@ -1 +1 @@
-{"version":3,"file":"tag.d.ts","sourceRoot":"","sources":["../../../src/components/core/tag.tsx"],"names":[],"mappings":"AACA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAE1C,OAAO,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AACjD,OAAO,EAAa,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE1D,QAAA,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;CAoBb,CAAC;AAEF,KAAK,QAAQ,GAAG,WAAW,CAAC,OAAO,QAAQ,CAAC,CAAC;AAE7C,KAAK,MAAM,GAAG,WAAW,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC;AAsB7C,MAAM,MAAM,QAAQ,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,MAAM,IAAI,gBAAgB,CACzE,WAAW,CAAC,OAAO,QAAQ,CAAC,GAAG,OAAO,CAAC;IAAE,IAAI,EAAE,KAAK,CAAC;IAAC,OAAO,EAAE,OAAO,CAAC;IAAC,SAAS,EAAE,MAAM,CAAA;CAAE,CAAC,EAC5F,CAAC,CACJ,CAAC;AAEF,eAAO,MAAM,GAAG,EAAE,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,MAAM,EAAE,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,KAAK,GAkB9E,CAAC"}
+{"version":3,"file":"tag.d.ts","sourceRoot":"","sources":["../../../src/components/core/tag.tsx"],"names":[],"mappings":"AACA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAE1C,OAAO,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AACjD,OAAO,EAAa,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE1D,QAAA,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;CAqBb,CAAC;AAEF,KAAK,QAAQ,GAAG,WAAW,CAAC,OAAO,QAAQ,CAAC,CAAC;AAE7C,KAAK,MAAM,GAAG,WAAW,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC;AAsB7C,MAAM,MAAM,QAAQ,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,MAAM,IAAI,gBAAgB,CACzE,WAAW,CAAC,OAAO,QAAQ,CAAC,GAAG,OAAO,CAAC;IAAE,IAAI,EAAE,KAAK,CAAC;IAAC,OAAO,EAAE,OAAO,CAAC;IAAC,SAAS,EAAE,MAAM,CAAA;CAAE,CAAC,EAC5F,CAAC,CACJ,CAAC;AAEF,eAAO,MAAM,GAAG,EAAE,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,MAAM,EAAE,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,KAAK,GAkB9E,CAAC"}

package/dist/components/core/tag.js

@@ -9,6 +9,7 @@ const variants = {
         big: "h-12 px-6 py-4",
         default: "h-8 px-4 py-2",
         small: "h-6 p-2 px-3 text-sm",
+        tiny: "h-6 p-2 px-3 text-xs",
     },
     theme: {
         custom: "",

package/dist/components/display/calendar.js

@@ -44,12 +44,12 @@ const focusDate = (origin, root, next, delay = 0) => {
     const select = () => {
         if (origin?.dataset.focustrap) {
             const el = root.current?.querySelector(`button[data-focustrap="${origin?.dataset.focustrap}"]`);
-            return setTimeout(() => el?.focus({ preventScroll: false }), delay);
+            return setTimeout(() => el?.focus({ preventScroll: true }), delay);
         }
         if (root.current) {
             const element = root.current.querySelector(`button[data-date="${d}"]`);
             if (element)
-                return element.focus({ preventScroll: false });
+                return element.focus({ preventScroll: true });
         }
     };
     if (delay === 0)

package/dist/components/floating/menu.js

@@ -98,7 +98,7 @@ const MenuComponent = React.forwardRef(({ children, FloatingComponent = "div", h
                             setHasFocusInside(false);
                             parent.setHasFocusInside(true);
                         },
-                    })), children: [label, isNested && (_jsxs("span", { style: { marginLeft: 10, fontSize: 10 }, children: [_jsx("span", { className: "sr-only", children: "Next menu" }), _jsx(ChevronRightIcon, { size: 14 })] }))] })) }), _jsx(MenuContext.Provider, { value: { activeIndex, setActiveIndex, getItemProps, setHasFocusInside, isOpen }, children: _jsx(FloatingList, { elementsRef: elementsRef, labelsRef: labelsRef, children: isOpen && (_jsx(FloatingPortal, { preserveTabOrder: true, children: _jsx(FloatingFocusManager, { context: context, modal: false, initialFocus: isNested ? -1 : 0, returnFocus: isParent ? restoreFocus : !isNested, children: _jsx(FloatingComponent, { ...getFloatingProps(), ref: refs.setFloating, style: { ...props.style, ...floatingStyles }, className: css("isolate z-tooltip flex max-h-80 flex-col items-start overflow-y-auto rounded-lg border border-floating-border bg-floating-background text-left shadow-shadow-floating outline-none", floatingClassName), children: children }) }) })) }) })] }));
+                    })), children: [label, isNested && (_jsxs("span", { style: { marginLeft: 10, fontSize: 10 }, children: [_jsx("span", { className: "sr-only", children: "Next menu" }), _jsx(ChevronRightIcon, { size: 14 })] }))] })) }), _jsx(MenuContext.Provider, { value: { activeIndex, setActiveIndex, getItemProps, setHasFocusInside, isOpen }, children: _jsx(FloatingList, { elementsRef: elementsRef, labelsRef: labelsRef, children: isOpen && (_jsx(FloatingPortal, { children: _jsx(FloatingFocusManager, { context: context, modal: false, initialFocus: isNested ? -1 : 0, returnFocus: isParent ? restoreFocus : !isNested, children: _jsx(FloatingComponent, { ...getFloatingProps(), ref: refs.setFloating, style: { ...props.style, ...floatingStyles }, className: css("isolate z-tooltip flex max-h-80 flex-col items-start overflow-y-auto rounded-lg border border-floating-border bg-floating-background text-left shadow-shadow-floating outline-none", floatingClassName), children: children }) }) })) }) })] }));
 });
 export const MenuItem = React.forwardRef(({ title, Right, disabled, children, ...props }, forwardedRef) => {
     const menu = useContext(MenuContext);

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,EASH,KAAK,YAAY,EACpB,MAAM,oBAAoB,CAAC;AAG5B,OAAO,EAAmB,eAAe,EAAqE,MAAM,cAAc,CAAC;AAEnI,OAAO,KAA+G,MAAM,OAAO,CAAC;AAIpI,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;AAgFF,KAAK,QAAQ,GAAG;IAAE,OAAO,EAAE,GAAG,CAAC;IAAC,QAAQ,EAAE,WAAW,GAAG,IAAI,CAAA;CAAE,CAAC;AAI/D,eAAO,MAAM,KAAK;WAzGJ,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;;;2CA4UrC,CAAC"}
+{"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["../../../src/components/floating/modal.tsx"],"names":[],"mappings":"AACA,OAAO,EASH,KAAK,YAAY,EACpB,MAAM,oBAAoB,CAAC;AAG5B,OAAO,EAAmB,eAAe,EAAmF,MAAM,cAAc,CAAC;AAEjJ,OAAO,KAA+G,MAAM,OAAO,CAAC;AAIpI,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;AAgFF,KAAK,QAAQ,GAAG;IAAE,OAAO,EAAE,GAAG,CAAC;IAAC,QAAQ,EAAE,WAAW,GAAG,IAAI,CAAA;CAAE,CAAC;AAI/D,eAAO,MAAM,KAAK;WAzGJ,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;;;2CA8UrC,CAAC"}

package/dist/components/floating/modal.js

@@ -3,7 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { FloatingFocusManager, FloatingOverlay, FloatingPortal, useClick, useDismiss, useFloating, useInteractions, useRole, } from "@floating-ui/react";
 import { cva } from "class-variance-authority";
 import { XIcon } from "lucide-react";
-import { AnimatePresence, motion, useMotionValue } from "motion/react";
+import { AnimatePresence, motion, MotionConfig, useMotionValue } from "motion/react";
 import { Slot as RadixSlot } from "radix-ui";
 import { forwardRef, Fragment, useEffect, useId, useImperativeHandle, useRef } from "react";
 import { useMediaQuery } from "../../hooks/use-media-query";
@@ -82,7 +82,7 @@ const Draggable = (props) => {
             ? "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) => {
@@ -168,41 +168,41 @@ export const Modal = forwardRef(({ open, title, footer, asChild, trigger, childr
     } : { animate: animated, initial: false };
     const scrollInitial = useMotionValue(undefined);
     const scroll = useMotionValue(undefined);
-    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, ...(title
-                                    ? {
-                                        "aria-labelledby": headingId,
-                                        "aria-describedby": descriptionId,
-                                    }
-                                    : { "aria-label": ariaTitle }), ...interactions.getFloatingProps({
-                                    "aria-modal": open,
-                                    ref: mergeRefs(floating.refs.setFloating, removeScrollRef),
-                                    className: css(variants({ position, type }), className, "isolate overscroll-contain"),
-                                }), exit: "exit", layout: true, animate: "enter", initial: "initial", layoutId: layoutId, variants: animation, "data-component": "modal", style: type === "drawer" ? { width: floatingSize } : { height: floatingSize }, children: [useResizer && resizer ? (_jsx(Draggable, { onChange: onChange, value: floatingSize, sheet: type === "sheet", position: position, parent: floating.refs.floating })) : null, title ? (_jsx(motion.header, { ...draggableMotionProps, className: "relative isolate 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 block", children: title })) : null })) : null, _jsx(motion.section, { ref: innerContent, "data-component": "modal-body", dragConstraints: dragConstraints, drag: isDesktop ? "y" : undefined, onDrag: type === "sheet" ? (isDesktop ? onDragBody : undefined) : undefined, className: css("flex-1 select-text overflow-y-auto px-8 py-1", bodyClassName), onTouchEnd: () => {
-                                            scroll.set(undefined);
-                                            scrollInitial.set(undefined);
-                                        }, onTouchStart: e => {
-                                            const touch = e.changedTouches[0];
-                                            scrollInitial.set(touch.pageY);
-                                            scroll.set(touch.pageY);
-                                        }, onTouchMove: e => {
-                                            const touch = e.changedTouches[0];
-                                            const y = touch.pageY;
-                                            const initial = scrollInitial.get();
-                                            if (initial < y) {
-                                                const distanceFromTop = innerContent.current?.scrollTop;
-                                                if (distanceFromTop === 0) {
-                                                    const div = floating.refs.floating.current;
-                                                    const rect = div.getBoundingClientRect();
-                                                    const v = floatingSize.get() || rect.height;
-                                                    const diff = (initial - y) / 10;
-                                                    const down = v + diff;
-                                                    const max = window.outerHeight;
-                                                    const screenHeightToClose = calculateClose(max);
-                                                    if (down < screenHeightToClose)
-                                                        onChange?.(false);
-                                                    floatingSize.set(down);
+    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(MotionConfig, { reducedMotion: animated ? "user" : "always", children: _jsx(FloatingFocusManager, { guards: true, visuallyHiddenDismiss: true, modal: true, closeOnFocusOut: true, context: floating.context, children: _jsxs(motion.div, { ...props, ...(title
+                                        ? {
+                                            "aria-labelledby": headingId,
+                                            "aria-describedby": descriptionId,
+                                        }
+                                        : { "aria-label": ariaTitle }), ...interactions.getFloatingProps({
+                                        "aria-modal": open,
+                                        ref: mergeRefs(floating.refs.setFloating, removeScrollRef),
+                                        className: css(variants({ position, type }), className, "isolate overscroll-contain"),
+                                    }), exit: "exit", layout: true, animate: "enter", initial: "initial", layoutId: layoutId, variants: animation, "data-component": "modal", style: type === "drawer" ? { width: floatingSize } : { height: floatingSize }, children: [useResizer && resizer ? (_jsx(Draggable, { onChange: onChange, value: floatingSize, sheet: type === "sheet", position: position, parent: floating.refs.floating })) : null, title ? (_jsx(motion.header, { ...draggableMotionProps, className: "relative w-full isolate", children: title ? (_jsx("h2", { id: headingId, className: "block px-8 pb-2 text-3xl font-medium leading-relaxed border-b select-text border-floating-border", children: title })) : null })) : null, _jsx(motion.section, { ref: innerContent, "data-component": "modal-body", dragConstraints: dragConstraints, drag: isDesktop ? "y" : undefined, onDrag: type === "sheet" ? (isDesktop ? onDragBody : undefined) : undefined, className: css("flex-1 select-text overflow-y-auto px-8 py-1", bodyClassName), onTouchEnd: () => {
+                                                scroll.set(undefined);
+                                                scrollInitial.set(undefined);
+                                            }, onTouchStart: e => {
+                                                const touch = e.changedTouches[0];
+                                                scrollInitial.set(touch.pageY);
+                                                scroll.set(touch.pageY);
+                                            }, onTouchMove: e => {
+                                                const touch = e.changedTouches[0];
+                                                const y = touch.pageY;
+                                                const initial = scrollInitial.get();
+                                                if (initial < y) {
+                                                    const distanceFromTop = innerContent.current?.scrollTop;
+                                                    if (distanceFromTop === 0) {
+                                                        const div = floating.refs.floating.current;
+                                                        const rect = div.getBoundingClientRect();
+                                                        const v = floatingSize.get() || rect.height;
+                                                        const diff = (initial - y) / 10;
+                                                        const down = v + diff;
+                                                        const max = window.outerHeight;
+                                                        const screenHeightToClose = calculateClose(max);
+                                                        if (down < screenHeightToClose)
+                                                            onChange?.(false);
+                                                        floatingSize.set(down);
+                                                    }
                                                 }
-                                            }
-                                            scroll.set(touch.pageY);
-                                        }, 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] }) }) })) : null }, headingId) })] }));
+                                                scroll.set(touch.pageY);
+                                            }, 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] }) }) }) })) : null }, headingId) })] }));
 });

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

@@ -1 +1 @@
-{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../../src/components/floating/tooltip.tsx"],"names":[],"mappings":"AACA,OAAO,EAOH,KAAK,SAAS,EAWjB,MAAM,oBAAoB,CAAC;AAC5B,OAAO,KAA4D,MAAM,OAAO,CAAC;AACjF,OAAO,EAAa,gBAAgB,EAAE,MAAM,iCAAiC,CAAC;AAI9E,OAAO,EAAE,aAAa,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAEnD,MAAM,MAAM,YAAY,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,MAAM,IAAI,gBAAgB,CAC7E;IACI,KAAK,EAAE,KAAK,CAAC;IACb,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;CACnC,EACD,CAAC,CACJ,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,CAAC,CAAC,SAAS,aAAa,GAAG,MAAM,EAAE,CAAC,EAAE,YAAY,CAAC,CAAC,CAAC,KAAK,KAAK,CAAC,YA6F9E,CAAC"}
+{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../../src/components/floating/tooltip.tsx"],"names":[],"mappings":"AACA,OAAO,EAQH,KAAK,SAAS,EAWjB,MAAM,oBAAoB,CAAC;AAC5B,OAAO,KAA4D,MAAM,OAAO,CAAC;AACjF,OAAO,EAAa,gBAAgB,EAAE,MAAM,iCAAiC,CAAC;AAI9E,OAAO,EAAE,aAAa,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAEnD,MAAM,MAAM,YAAY,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,MAAM,IAAI,gBAAgB,CAC7E;IACI,KAAK,EAAE,KAAK,CAAC;IACb,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;CACnC,EACD,CAAC,CACJ,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,CAAC,CAAC,SAAS,aAAa,GAAG,MAAM,EAAE,CAAC,EAAE,YAAY,CAAC,CAAC,CAAC,KAAK,KAAK,CAAC,YAyF9E,CAAC"}

package/dist/components/floating/tooltip.js

@@ -1,12 +1,12 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { arrow, autoUpdate, flip, FloatingArrow, FloatingPortal, offset, safePolygon, shift, useClick, useClientPoint, useDismiss, useFloating, useFocus, useHover, useInteractions, useRole, } from "@floating-ui/react";
+import { arrow, autoPlacement, autoUpdate, flip, FloatingArrow, FloatingPortal, offset, safePolygon, shift, useClick, useClientPoint, useDismiss, useFloating, useFocus, useHover, useInteractions, useRole, } from "@floating-ui/react";
 import { forwardRef, Fragment, useEffect, useRef, useState } from "react";
 import { Polymorph } from "../../components/core/polymorph";
 import { FLOATING_DELAY } from "../../constants";
 import { mergeRefs } from "../../lib/dom";
 import { noop } from "../../lib/fns";
-export const Tooltip = forwardRef(function Tooltip({ as, title, children, placement, open, focus = true, hover = true, enabled = true, popover = true, followCursor = false, onChange = noop, ...props }, outerRef) {
+export const Tooltip = forwardRef(function Tooltip({ as, open, title, children, placement, focus = true, hover = true, enabled = true, popover = true, onChange = noop, followCursor = false, ...props }, outerRef) {
     const [innerOpen, setInnerOpen] = useState(open ?? false);
     const arrowRef = useRef(null);
     const Component = as || "span";
@@ -15,33 +15,29 @@ export const Tooltip = forwardRef(function Tooltip({ as, title, children, placem
         onChange?.(b);
     };
     const { refs, floatingStyles, context } = useFloating({
-        open: innerOpen,
         placement,
-        transform: true,
-        strategy: "absolute",
+        open: innerOpen,
         whileElementsMounted: autoUpdate,
         onOpenChange: open ? undefined : toggleBoth,
         middleware: [
             shift(),
             offset(5),
+            autoPlacement(),
+            arrow({ padding: 5, element: arrowRef }),
             flip({ fallbackAxisSideDirection: "start" }),
-            arrow({
-                padding: 5,
-                element: arrowRef,
-            }),
         ],
     });
+    const dismiss = useDismiss(context, { enabled });
+    const role = useRole(context, { role: "tooltip", enabled });
+    const focusController = useFocus(context, { enabled: enabled ? focus : false });
+    const clickController = useClick(context, { enabled: enabled ? popover : false });
+    const clientPoint = useClientPoint(context, { enabled: !!enabled && !!followCursor });
     const hoverController = useHover(context, {
         move: true,
         delay: { open: FLOATING_DELAY },
         enabled: enabled ? hover : false,
         handleClose: popover ? safePolygon() : null,
     });
-    const focusController = useFocus(context, { enabled: enabled ? focus : false });
-    const clickController = useClick(context, { enabled: enabled ? popover : false });
-    const dismiss = useDismiss(context, { enabled });
-    const role = useRole(context, { role: "tooltip", enabled });
-    const clientPoint = useClientPoint(context, { enabled: !!enabled && !!followCursor });
     const { getReferenceProps, getFloatingProps } = useInteractions([
         role,
         dismiss,
@@ -55,5 +51,5 @@ export const Tooltip = forwardRef(function Tooltip({ as, title, children, placem
             return setInnerOpen(false);
         return setInnerOpen(open);
     }, [open]);
-    return (_jsxs(Fragment, { children: [_jsx(Component, { ...getReferenceProps(props), ref: mergeRefs(refs.setReference, outerRef), children: title }), innerOpen && (_jsx(FloatingPortal, { preserveTabOrder: true, children: _jsxs(Polymorph, { ...getFloatingProps(), ref: refs.setFloating, style: floatingStyles, className: "isolate z-tooltip rounded-lg border border-tooltip-border bg-tooltip-background p-3 text-tooltip-foreground shadow-shadow-floating", children: [_jsx(FloatingArrow, { ref: arrowRef, context: context, strokeWidth: 0.1, className: "fill-tooltip-background stroke-tooltip-border" }), children] }) }))] }));
+    return (_jsxs(Fragment, { children: [_jsx(Component, { ...getReferenceProps(props), ref: mergeRefs(refs.setReference, outerRef), children: title }), innerOpen && (_jsx(FloatingPortal, { children: _jsxs(Polymorph, { ...getFloatingProps(), ref: refs.setFloating, style: floatingStyles, className: "isolate z-tooltip rounded-lg border border-tooltip-border bg-tooltip-background p-3 text-tooltip-foreground shadow-shadow-floating", children: [_jsx(FloatingArrow, { ref: arrowRef, context: context, strokeWidth: 0.1, className: "fill-tooltip-background stroke-tooltip-border" }), children] }) }))] }));
 });

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

@@ -1,29 +1,6 @@
-import React, { HTMLAttributes } from "react";
 import { Any } from "../../types";
-import { OptionProps } from "../form/select";
-import { FilterConfig } from "./filter";
-import { GroupItem } from "./group";
-import { Sorter } from "./sort";
-import { CellAsideElement, Col, TableOperationProps } from "./table-lib";
-type InnerTableProps<T extends Any> = HTMLAttributes<HTMLTableElement> & TableOperationProps<T> & {
-    rows: T[];
-    index: number;
-    cols: Col<T>[];
-    border?: boolean;
-    loading?: boolean;
-    group?: GroupItem<T>;
-    useControl?: boolean;
-    loadingMore?: boolean;
-    sorters?: Sorter<T>[];
-    showMetadata?: boolean;
-    groups?: GroupItem<T>[];
-    onScrollEnd?: () => void;
-    optionCols: OptionProps[];
-    filters?: FilterConfig<T>[];
-    Aside?: React.FC<CellAsideElement<T>>;
-    getScrollRef?: () => HTMLElement | undefined;
-    setGroups: React.Dispatch<React.SetStateAction<GroupItem<T>[]>>;
-};
+import { InnerTableProps } from "./inner-table";
+import { TableOperationProps } from "./table-lib";
 export type TableProps<T extends Any> = Pick<InnerTableProps<T>, "cols" | "rows" | "loadingMore" | "border" | "Aside"> & {
     name: string;
 } & Partial<TableOperationProps<T> & {
@@ -38,5 +15,4 @@ export type TableProps<T extends Any> = Pick<InnerTableProps<T>, "cols" | "rows"
     getScrollRef?: () => HTMLElement | undefined;
 }>;
 export declare const Table: <T extends Any>(props: TableProps<T>) => import("react/jsx-runtime").JSX.Element;
-export {};
 //# sourceMappingURL=index.d.ts.map

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;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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/table/index.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAGlC,OAAO,EAAc,eAAe,EAAE,MAAM,eAAe,CAAC;AAG5D,OAAO,EAAyB,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAIzE,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,4CAgHxD,CAAC"}

package/dist/components/table/index.js

@@ -1,94 +1,13 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import Linq from "linq-arrays";
 import { AnimatePresence } from "motion/react";
-import React, { createContext, Fragment, useContext, useEffect, useMemo, useRef, useState } from "react";
-import { TableVirtuoso } from "react-virtuoso";
-import { Is } from "sidekicker";
+import { useMemo } from "react";
 import { useReducer } from "use-typed-reducer";
-import { useStableRef } from "../../hooks/use-stable-ref";
 import { useTweaks } from "../../hooks/use-tweaks";
-import { Empty } from "../display/empty";
-import { SkeletonCell } from "../display/skeleton";
+import { InnerTable } from "./inner-table";
 import { Metadata } from "./metadata";
-import { Pagination } from "./pagination";
-import { Row } from "./row";
-import { multiSort } from "./sort";
 import { createOptionCols } from "./table-lib";
-import { TableHeader } from "./thead";
-const TableContext = createContext({});
-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-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, 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 ?? ""}` }));
-});
-const TFoot = React.forwardRef((props, ref) => {
-    if (props.context.loadingMore) {
-        return (_jsx("tfoot", { ...props, ref: ref, className: "bg-card-background", children: _jsx("tr", { role: "row", className: "bg-card-background", children: _jsx("td", { colSpan: 999, className: "px-2 h-14 bg-card-background", children: _jsx("span", { className: "block w-full h-2 rounded opacity-60 animate-pulse bg-foreground" }) }) }) }));
-    }
-    return null;
-});
-const components = {
-    TableHead: Thead,
-    Table: VirtualTable,
-    TableBody: TableBody,
-    TableRow: TRow,
-    TableFoot: TFoot,
-};
-const loadingArray = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
-const EmptyContent = (props) => (_jsx("div", { className: "flex justify-center items-center px-2 w-full h-48", children: props.loading ? SkeletonCell : _jsx(Empty, {}) }));
-const EmptyCell = () => _jsx(Fragment, {});
-const Frag = () => _jsx(Fragment, {});
-const emptyRows = [];
-const InnerTable = ({ cols, filters, setCols, sorters, setFilters, setSorters, onScrollEnd, getScrollRef, border = false, pagination = null, useControl = false, ...props }) => {
-    const ref = useRef(null);
-    const [showLoadingFooter, setShowLoadingFooter] = useState(false);
-    const onScrollEndRef = useStableRef(onScrollEnd);
-    const loadingMoreRef = useStableRef(props.loadingMore);
-    const rows = useMemo(() => {
-        if (props.loading)
-            return loadingArray;
-        if (useControl)
-            return props.rows;
-        const linq = new Linq(props.rows);
-        if (filters.length > 0) {
-            filters.forEach((x) => x.value === "" || Number.isNaN(x.value) ? undefined : linq.Where(x.name, x.operation.symbol, x.value));
-        }
-        if (sorters.length === 0)
-            return linq.Select();
-        return multiSort(linq.Select(), sorters);
-    }, [props.loading, props.rows, useControl, filters, sorters]);
-    useEffect(() => {
-        if (ref.current === null)
-            return () => { };
-        const div = ref.current;
-        const observer = new IntersectionObserver((entries) => {
-            const endOfPage = entries[entries.length - 1];
-            const condition = endOfPage.isIntersecting && loadingMoreRef.current;
-            if (condition) {
-                onScrollEndRef.current?.();
-                return void setShowLoadingFooter(true);
-            }
-            return setShowLoadingFooter(false);
-        });
-        observer.observe(div);
-        return () => observer.disconnect();
-    }, [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 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] }));
-};
+import { TableProvider } from "./table.context";
 const dispatcherFun = (prev, setter) => typeof setter === "function" ? setter(prev) : setter;
 const compareAndExec = (prev, state, exec) => (prev === state ? undefined : exec?.(state));
 export const Table = (props) => {
@@ -126,5 +45,5 @@ export const Table = (props) => {
             },
         ],
     });
-    return (_jsxs(TableContext.Provider, { value: contextState, children: [operations ? (_jsx(Metadata, { cols: state.cols, rows: props.rows, options: optionCols, groups: state.groups, filters: state.filters, setCols: dispatch.cols, sorters: state.sorters, setGroups: dispatch.groups, setFilters: dispatch.filters, setSorters: dispatch.sorters, pagination: props.pagination ?? null, inlineFilter: props.inlineFilter ?? true, inlineSorter: props.inlineSorter ?? true })) : null, state.groups.length === 0 ? (_jsx(InnerTable, { ...props, index: 0, cols: state.cols, options: optionCols, groups: state.groups, filters: state.filters, optionCols: optionCols, setCols: dispatch.cols, sorters: state.sorters, setGroups: dispatch.groups, setFilters: dispatch.filters, setSorters: dispatch.sorters, onScrollEnd: props.onScrollEnd, pagination: props.pagination ?? null, inlineFilter: props.inlineFilter ?? true, inlineSorter: props.inlineSorter ?? true })) : (_jsx("div", { className: "flex flex-wrap gap-4", children: state.groups.map((group, index) => (_jsx("div", { className: "min-w-full", children: _jsx(InnerTable, { ...props, group: group, index: index, cols: state.cols, pagination: null, rows: group.rows, options: optionCols, groups: state.groups, filters: state.filters, optionCols: optionCols, setCols: dispatch.cols, sorters: state.sorters, setGroups: dispatch.groups, setFilters: dispatch.filters, setSorters: dispatch.sorters, onScrollEnd: props.onScrollEnd, inlineFilter: props.inlineFilter ?? true, inlineSorter: props.inlineSorter ?? true }) }, `group-${group.groupId}`))) }))] }));
+    return (_jsx(TableProvider, { value: contextState, children: _jsxs(AnimatePresence, { initial: false, children: [operations ? (_jsx(Metadata, { cols: state.cols, rows: props.rows, options: optionCols, groups: state.groups, filters: state.filters, setCols: dispatch.cols, sorters: state.sorters, setGroups: dispatch.groups, setFilters: dispatch.filters, setSorters: dispatch.sorters, pagination: props.pagination ?? null, inlineFilter: props.inlineFilter ?? true, inlineSorter: props.inlineSorter ?? true })) : null, state.groups.length === 0 ? (_jsx(InnerTable, { ...props, index: 0, cols: state.cols, options: optionCols, groups: state.groups, filters: state.filters, optionCols: optionCols, setCols: dispatch.cols, sorters: state.sorters, setGroups: dispatch.groups, setFilters: dispatch.filters, setSorters: dispatch.sorters, onScrollEnd: props.onScrollEnd, pagination: props.pagination ?? null, inlineFilter: props.inlineFilter ?? true, inlineSorter: props.inlineSorter ?? true })) : (_jsx("div", { className: "flex flex-wrap gap-4", children: state.groups.map((group, index) => (_jsx("div", { className: "min-w-full", children: _jsx(InnerTable, { ...props, group: group, index: index, cols: state.cols, pagination: null, rows: group.rows, options: optionCols, groups: state.groups, filters: state.filters, optionCols: optionCols, setCols: dispatch.cols, sorters: state.sorters, setGroups: dispatch.groups, setFilters: dispatch.filters, setSorters: dispatch.sorters, onScrollEnd: props.onScrollEnd, inlineFilter: props.inlineFilter ?? true, inlineSorter: props.inlineSorter ?? true }) }, `group-${group.groupId}`))) }))] }) }));
 };

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

@@ -0,0 +1,28 @@
+import React, { HTMLAttributes } from "react";
+import { Any } from "../../types";
+import { OptionProps } from "../form/select";
+import { FilterConfig } from "./filter";
+import { GroupItem } from "./group";
+import { Sorter } from "./sort";
+import { CellAsideElement, Col, TableOperationProps } from "./table-lib";
+export type InnerTableProps<T extends Any> = HTMLAttributes<HTMLTableElement> & TableOperationProps<T> & {
+    rows: T[];
+    index: number;
+    cols: Col<T>[];
+    border?: boolean;
+    loading?: boolean;
+    group?: GroupItem<T>;
+    useControl?: boolean;
+    loadingMore?: boolean;
+    sorters?: Sorter<T>[];
+    showMetadata?: boolean;
+    groups?: GroupItem<T>[];
+    onScrollEnd?: () => void;
+    optionCols: OptionProps[];
+    filters?: FilterConfig<T>[];
+    Aside?: React.FC<CellAsideElement<T>>;
+    getScrollRef?: () => HTMLElement | undefined;
+    setGroups: React.Dispatch<React.SetStateAction<GroupItem<T>[]>>;
+};
+export declare const InnerTable: <T extends Any>({ cols, filters, setCols, sorters, setFilters, setSorters, onScrollEnd, getScrollRef, border, pagination, useControl, ...props }: InnerTableProps<T>) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=inner-table.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"inner-table.d.ts","sourceRoot":"","sources":["../../../src/components/table/inner-table.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAA2B,cAAc,EAAwC,MAAM,OAAO,CAAC;AAI7G,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;AAGpC,OAAO,EAAa,MAAM,EAAE,MAAM,QAAQ,CAAC;AAC3C,OAAO,EAAE,gBAAgB,EAAE,GAAG,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAIzE,MAAM,MAAM,eAAe,CAAC,CAAC,SAAS,GAAG,IAAI,cAAc,CAAC,gBAAgB,CAAC,GAC3E,mBAAmB,CAAC,CAAC,CAAC,GAAG;IACvB,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;CACjE,CAAC;AA8FJ,eAAO,MAAM,UAAU,GAAI,CAAC,SAAS,GAAG,EAAE,kIAavC,eAAe,CAAC,CAAC,CAAC,4CAoEpB,CAAC"}

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

@@ -0,0 +1,85 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Linq from "linq-arrays";
+import { AnimatePresence } from "motion/react";
+import React, { Fragment, useEffect, useMemo, useRef, useState } from "react";
+import { TableVirtuoso } from "react-virtuoso";
+import { Is } from "sidekicker";
+import { useStableRef } from "../../hooks/use-stable-ref";
+import { Empty } from "../display/empty";
+import { SkeletonCell } from "../display/skeleton";
+import { Pagination } from "./pagination";
+import { Row } from "./row";
+import { multiSort } from "./sort";
+import { useTable } from "./table.context";
+import { TableHeader } from "./thead";
+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, role: "table", ref: ref, style: { ...props.style, "--table-cell-padding": "0.75rem" }, className: `table 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, 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 pb-4 flex h-fit flex-col flex-wrap justify-center gap-1 md:table-row ${props?.className ?? ""}` }));
+});
+const TFoot = React.forwardRef((props, ref) => {
+    if (props.context.loadingMore) {
+        return (_jsx("tfoot", { ...props, ref: ref, className: "bg-card-background", children: _jsx("tr", { role: "row", className: "bg-card-background", children: _jsx("td", { colSpan: 999, className: "px-2 h-14 bg-card-background", children: _jsx("span", { className: "block w-full h-2 rounded opacity-60 animate-pulse bg-foreground" }) }) }) }));
+    }
+    return null;
+});
+const components = {
+    TableHead: Thead,
+    Table: VirtualTable,
+    TableBody: TableBody,
+    TableRow: TRow,
+    TableFoot: TFoot,
+};
+const loadingArray = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
+const EmptyContent = (props) => (_jsx("div", { className: "flex justify-center items-center px-2 w-full h-48", children: props.loading ? SkeletonCell : _jsx(Empty, {}) }));
+const EmptyCell = () => _jsx(Fragment, {});
+const Frag = () => _jsx(Fragment, {});
+const emptyRows = [];
+export const InnerTable = ({ cols, filters, setCols, sorters, setFilters, setSorters, onScrollEnd, getScrollRef, border = true, pagination = null, useControl = false, ...props }) => {
+    const ref = useRef(null);
+    const [showLoadingFooter, setShowLoadingFooter] = useState(false);
+    const onScrollEndRef = useStableRef(onScrollEnd);
+    const loadingMoreRef = useStableRef(props.loadingMore);
+    const rows = useMemo(() => {
+        if (props.loading)
+            return loadingArray;
+        if (useControl)
+            return props.rows;
+        const linq = new Linq(props.rows);
+        if (filters.length > 0) {
+            filters.forEach((x) => x.value === "" || Number.isNaN(x.value) ? undefined : linq.Where(x.name, x.operation.symbol, x.value));
+        }
+        if (sorters.length === 0)
+            return linq.Select();
+        return multiSort(linq.Select(), sorters);
+    }, [props.loading, props.rows, useControl, filters, sorters]);
+    useEffect(() => {
+        if (ref.current === null)
+            return () => { };
+        const div = ref.current;
+        const observer = new IntersectionObserver((entries) => {
+            const endOfPage = entries[entries.length - 1];
+            const condition = endOfPage.isIntersecting && loadingMoreRef.current;
+            if (condition) {
+                onScrollEndRef.current?.();
+                return void setShowLoadingFooter(true);
+            }
+            return setShowLoadingFooter(false);
+        });
+        observer.observe(div);
+        return () => observer.disconnect();
+    }, [loadingMoreRef, onScrollEndRef]);
+    const empty = rows.length === 0;
+    const context = { loading: props.loading, loadingMore: props.loadingMore, cols: cols, Aside: props.Aside };
+    return (_jsxs("div", { className: "flex relative flex-col w-full whitespace-nowrap rounded-lg group", children: [_jsx(TableVirtuoso, { context: context, components: components, totalCount: rows.length, itemContent: empty ? EmptyCell : Row, data: empty ? emptyRows : rows, useWindowScroll: getScrollRef ? false : true, 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] }));
+};

package/dist/components/table/row.js

@@ -39,7 +39,7 @@ export const Row = (index, row, context) => {
             const className = col.cellProps?.className || "";
             const exposeAside = colIndex === 0 && context.Aside && loading === false;
             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}` },
+            return (_createElement("td", { ...col.cellProps, role: "cell", "data-matrix": matrix, key: `accessor-${index}-${colIndex}`, className: `typography group-table-cell p-[var(--table-cell-padding)] whitespace-pre-wrap flex flex-col md:table-cell border-b border md:border-l-transparent md:border-b-0 border-y border-collapse border-table-border md:border-r md:last:border-r-transparent ${className}` },
                 exposeAside ? (_jsx(RowAside, { children: _jsx(Aside, { col: col, row: row, rowIndex: index }) })) : null,
                 _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.context.d.ts

@@ -0,0 +1,10 @@
+export type TableContextProps = Partial<{
+    sticky: number;
+}>;
+export declare const TableProvider: import("react").Provider<Partial<{
+    sticky: number;
+}>>;
+export declare const useTable: () => Partial<{
+    sticky: number;
+}>;
+//# sourceMappingURL=table.context.d.ts.map

package/dist/components/table/table.context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"table.context.d.ts","sourceRoot":"","sources":["../../../src/components/table/table.context.tsx"],"names":[],"mappings":"AAEA,MAAM,MAAM,iBAAiB,GAAG,OAAO,CAAC;IAAE,MAAM,EAAE,MAAM,CAAA;CAAE,CAAC,CAAC;AAI5D,eAAO,MAAM,aAAa;YAJwB,MAAM;GAIN,CAAC;AAEnD,eAAO,MAAM,QAAQ;YAN6B,MAAM;EAMF,CAAC"}

package/dist/components/table/table.context.js

@@ -0,0 +1,4 @@
+import { createContext, useContext } from "react";
+const TableContext = createContext({});
+export const TableProvider = TableContext.Provider;
+export const useTable = () => useContext(TableContext);

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-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) => {
+    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 md:h-14 typography 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 p-[var(--table-cell-padding)] ${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;