@g4rcez/components 2.0.30 → 2.0.32

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

@@ -1 +1 @@
-{"version":3,"file":"step.d.ts","sourceRoot":"","sources":["../../../src/components/display/step.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAA2C,iBAAiB,EAA2C,MAAM,OAAO,CAAC;AAEnI,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAMpC,KAAK,gBAAgB,GAAG;IAAE,WAAW,EAAE,MAAM,CAAC;IAAC,YAAY,EAAE,MAAM,CAAC;IAAC,mBAAmB,EAAE,MAAM,CAAA;CAAE,CAAC;AA+BnG,KAAK,UAAU,GAAG,QAAQ,GAAG,UAAU,GAAG,UAAU,GAAG,OAAO,CAAC;AAE/D,MAAM,MAAM,SAAS,GAAG,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,GAAG;IACvD,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB,CAAC;AAoCF,eAAO,MAAM,cAAc,+BAAgC,CAAC;AAE5D,eAAO,MAAM,IAAI,GAAI,gEAAgE,SAAS,4CAmF7F,CAAC;AAEF,eAAO,MAAM,KAAK,GAAI,OAAO,iBAAiB,CAAC;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,WAAW,EAAE,MAAM,CAAA;CAAE,CAAC,4CA2CrF,CAAC"}
+{"version":3,"file":"step.d.ts","sourceRoot":"","sources":["../../../src/components/display/step.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAA2C,iBAAiB,EAA2C,MAAM,OAAO,CAAC;AAEnI,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAMpC,KAAK,gBAAgB,GAAG;IAAE,WAAW,EAAE,MAAM,CAAC;IAAC,YAAY,EAAE,MAAM,CAAC;IAAC,mBAAmB,EAAE,MAAM,CAAA;CAAE,CAAC;AA+BnG,KAAK,UAAU,GAAG,QAAQ,GAAG,UAAU,GAAG,UAAU,GAAG,OAAO,CAAC;AAE/D,MAAM,MAAM,SAAS,GAAG,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,GAAG;IACvD,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB,CAAC;AAoCF,eAAO,MAAM,cAAc,+BAAgC,CAAC;AAE5D,eAAO,MAAM,IAAI,GAAI,gEAAgE,SAAS,4CAqF7F,CAAC;AAEF,eAAO,MAAM,KAAK,GAAI,OAAO,iBAAiB,CAAC;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,WAAW,EAAE,MAAM,CAAA;CAAE,CAAC,4CA2CrF,CAAC"}

package/dist/components/display/step.js

@@ -64,7 +64,7 @@ export const Step = ({ step, currentStep, status, title, titleClassName, ...prop
         return () => clearTimeout(timer);
     }, [currentStep, context, step]);
     const innerStatus = getCurrentStatus(step, visualCurrentStep, status);
-    return (_jsxs(motion.button, { ...props, type: "button", "data-step": step, animate: innerStatus, className: "relative w-auto text-center flex items-center justify-center", children: [_jsx(motion.div, { variants: variants, transition: transitions, className: `absolute inset-0 rounded-full text-center ${innerStatus === "error" ? "bg-danger" : ""}` }), _jsx(motion.div, { initial: false, animate: innerStatus, transition: transition, className: "flex relative justify-center items-center w-10 h-10 font-semibold rounded-full", variants: {
+    return (_jsxs(motion.button, { ...props, type: "button", "data-step": step, animate: innerStatus, className: "flex relative justify-center items-center w-auto text-center", children: [_jsx(motion.div, { variants: variants, transition: transitions, className: `hidden lg:block absolute inset-0 rounded-full text-center ${innerStatus === "error" ? "bg-danger" : ""}` }), _jsx(motion.div, { initial: false, animate: innerStatus, transition: transition, className: "flex relative justify-center items-center w-10 h-10 font-semibold rounded-full", variants: {
                     error: {
                         color: parser("var(--danger-foreground)"),
                         borderColor: parser("var(--danger-hover)"),
@@ -88,7 +88,8 @@ export const Step = ({ step, currentStep, status, title, titleClassName, ...prop
                         borderColor: parser("var(--success-DEFAULT)"),
                         backgroundColor: parser("var(--success-DEFAULT)"),
                     },
-                }, children: _jsx("div", { className: "flex justify-center items-center", children: innerStatus === "complete" ? (_jsx(CheckIcon, { className: "size-6 text-primary-foreground" })) : innerStatus === "error" ? (_jsx(ErrorIcon, { className: "size-6 text-danger-foreground" })) : (_jsx(Fragment, { children: _jsx("span", { children: step }) })) }) }), title && innerStatus === "active" ? _jsx("span", { className: `h-full flex items-center px-4 ${titleClassName}`, children: title }) : null] }));
+                }, children: _jsx("div", { className: "flex justify-center items-center", children: innerStatus === "complete" ? (_jsx(CheckIcon, { className: "size-6 text-primary-foreground" })) : innerStatus === "error" ? (_jsx(ErrorIcon, { className: "size-6 text-danger-foreground" })) : (_jsx(Fragment, { children: _jsx("span", { children: step }) })) }) }), title && innerStatus === "active" ? _jsx("span", { className: `h-full flex items-center px-4 ${titleClassName}`, children: title }) :
+                _jsx("span", { className: `block lg:hidden h-full items-center px-4 ${titleClassName}`, children: title })] }));
 };
 export const Steps = (props) => {
     const [ref, animate] = useAnimate();
@@ -117,5 +118,5 @@ export const Steps = (props) => {
         previousStep: previousStepRef.current,
         progressBarDuration: PROGRESS_BAR_DURATION,
     };
-    return (_jsx(StepContext.Provider, { value: contextValue, children: _jsxs("div", { className: "flex relative justify-between", ref: ref, children: [_jsx("div", { className: "absolute top-1/2 h-1 w-[calc(100%)] bg-card-border" }), _jsx("div", { "data-name": "progress", className: "absolute top-1/2 w-0 h-1 bg-success" }), props.children] }) }));
+    return (_jsx(StepContext.Provider, { value: contextValue, children: _jsxs("div", { className: "flex relative flex-col gap-4 justify-center lg:justify-between items-start w-full lg:flex-row lg:items-center", ref: ref, children: [_jsx("div", { className: "hidden lg:block absolute top-1/2 h-1 w-[calc(100%)] bg-card-border" }), _jsx("div", { "data-name": "progress", className: "hidden absolute top-1/2 w-0 h-1 lg:block bg-success" }), props.children] }) }));
 };

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

@@ -0,0 +1,26 @@
+import { Placement } from "@floating-ui/react";
+import React from "react";
+export type WizardStep = {
+    side?: Placement;
+    onNext?: () => void;
+    onEnter?: () => void;
+    onPrevious?: () => void;
+    title?: React.ReactNode;
+    description?: React.ReactNode;
+    element: string | Element | React.RefObject<Element | null>;
+};
+export type WizardProps = {
+    active?: boolean;
+    steps: WizardStep[];
+    onClose?: () => void;
+    onFinish?: () => void;
+    onChange?: (index: number) => void;
+    labels?: {
+        next?: string;
+        skip?: string;
+        finish?: string;
+        previous?: string;
+    };
+};
+export declare const Wizard: ({ steps, active, onClose, onFinish, onChange, labels: labelsProp, }: WizardProps) => import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=wizard.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"wizard.d.ts","sourceRoot":"","sources":["../../../src/components/floating/wizard.tsx"],"names":[],"mappings":"AACA,OAAO,EAOL,SAAS,EAKV,MAAM,oBAAoB,CAAC;AAE5B,OAAO,KAAgF,MAAM,OAAO,CAAC;AAOrG,MAAM,MAAM,UAAU,GAAG;IACvB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,OAAO,EAAE,MAAM,GAAG,OAAO,GAAG,KAAK,CAAC,SAAS,CAAC,OAAO,GAAG,IAAI,CAAC,CAAC;CAC7D,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG;IACxB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,UAAU,EAAE,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,MAAM,CAAC,EAAE;QAAE,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,MAAM,CAAC,EAAE,MAAM,CAAC;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;CAC/E,CAAC;AAiBF,eAAO,MAAM,MAAM,GAAI,qEAOpB,WAAW,mDAqLb,CAAC"}

package/dist/components/floating/wizard.js

@@ -0,0 +1,119 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { arrow, autoUpdate, flip, FloatingArrow, FloatingPortal, offset, shift, useFloating, useInteractions, useRole, } from "@floating-ui/react";
+import { AnimatePresence, motion } from "motion/react";
+import { Fragment, useEffect, useLayoutEffect, useRef, useState } from "react";
+import { useResizeObserver } from "../../hooks/use-resize-observer";
+import { useTranslations } from "../../hooks/use-translations";
+import { useWindowSize } from "../../hooks/use-window-size";
+import { noop } from "../../lib/fns";
+import { Button } from "../core/button";
+const getRect = (element) => {
+    if (!element)
+        return { top: 0, left: 0, width: 0, height: 0, bottom: 0, right: 0 };
+    return element.getBoundingClientRect();
+};
+const resolveElement = (element) => {
+    if (typeof element === 'string') {
+        return document.querySelector(element);
+    }
+    if ('current' in element) {
+        return element.current;
+    }
+    return element;
+};
+export const Wizard = ({ steps, active = false, onClose = noop, onFinish = noop, onChange = noop, labels: labelsProp, }) => {
+    const translation = useTranslations();
+    const [index, setIndex] = useState(0);
+    const currentStep = steps[index];
+    const [element, setElement] = useState(null);
+    const [rect, setRect] = useState(getRect(null));
+    const [isOverlayReady, setIsOverlayReady] = useState(false);
+    const arrowRef = useRef(null);
+    const { width, height } = useWindowSize();
+    const labels = {
+        next: labelsProp?.next ?? translation.driverNext,
+        previous: labelsProp?.previous ?? translation.driverPrevious,
+        finish: labelsProp?.finish ?? translation.driverFinish,
+        skip: labelsProp?.skip ?? translation.driverSkip,
+    };
+    const { refs, floatingStyles, context } = useFloating({
+        open: active && isOverlayReady,
+        placement: currentStep?.side || "bottom",
+        whileElementsMounted: autoUpdate,
+        middleware: [
+            offset(10),
+            flip(),
+            shift(),
+            arrow({ element: arrowRef }),
+        ],
+    });
+    const { getFloatingProps } = useInteractions([useRole(context),]);
+    useEffect(() => {
+        if (active) {
+            setIndex(0);
+        }
+    }, [active]);
+    useEffect(() => {
+        setIsOverlayReady(false);
+    }, [index, active]);
+    useEffect(() => {
+        if (!active || !currentStep)
+            return;
+        const el = resolveElement(currentStep.element);
+        if (el) {
+            setElement(el);
+            setRect(el.getBoundingClientRect());
+            refs.setReference(el);
+            currentStep.onEnter?.();
+        }
+        else {
+            console.warn(`Driver: Element not found:`, currentStep.element);
+            setElement(null);
+            setRect({ top: 0, left: 0, width: 0, height: 0, bottom: 0, right: 0 });
+        }
+    }, [index, active, currentStep, refs]);
+    useLayoutEffect(() => {
+        if (!element)
+            return;
+        const update = () => setRect(element.getBoundingClientRect());
+        update();
+        window.addEventListener("scroll", update, { capture: true, passive: true });
+        window.addEventListener("resize", update, { capture: true, passive: true });
+        return () => {
+            window.removeEventListener("scroll", update, { capture: true });
+            window.removeEventListener("resize", update, { capture: true });
+        };
+    }, [element, width, height]);
+    useResizeObserver(element, (entry) => {
+        setRect(entry.target.getBoundingClientRect());
+    });
+    const handleNext = () => {
+        currentStep.onNext?.();
+        if (index < steps.length - 1) {
+            setIndex((i) => i + 1);
+            onChange(index + 1);
+        }
+        else {
+            onFinish();
+            onClose();
+        }
+    };
+    const handlePrevious = () => {
+        currentStep.onPrevious?.();
+        if (index > 0) {
+            setIndex((i) => i - 1);
+            onChange(index - 1);
+        }
+    };
+    if (!active)
+        return null;
+    const hasNext = index < steps.length - 1;
+    const hasPrevious = index > 0;
+    return (_jsx(FloatingPortal, { children: _jsxs("div", { className: "fixed inset-0 pointer-events-none z-[9999]", children: [_jsxs("svg", { className: "absolute inset-0 w-full h-full fill-current text-floating-overlay/70", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("defs", { children: _jsxs("mask", { id: "driver-mask", children: [_jsx("rect", { x: "0", y: "0", width: "100%", height: "100%", fill: "white" }), _jsx(motion.rect, { rx: "4", fill: "black", initial: false, onAnimationComplete: () => setIsOverlayReady(true), transition: { type: "spring", duration: 0.5, ease: "easeInOut" }, animate: {
+                                            x: rect.left - 5,
+                                            y: rect.top - 5,
+                                            width: rect.width + 10,
+                                            height: rect.height + 10
+                                        } })] }) }), _jsx("rect", { x: "0", y: "0", width: "100%", height: "100%", mask: "url(#driver-mask)", className: "pointer-events-auto" })] }), _jsx(AnimatePresence, { mode: "wait", children: currentStep && element && isOverlayReady && (_jsx("div", { ...getFloatingProps(), ref: refs.setFloating, style: floatingStyles, className: "outline-none pointer-events-auto", children: _jsxs(motion.div, { transition: { duration: 0.2 }, exit: { opacity: 0, scale: 0.9 }, animate: { opacity: 1, scale: 1 }, initial: { opacity: 0, scale: 0.9 }, className: "flex flex-col gap-3 p-4 w-80 max-w-sm rounded-lg border shadow-lg bg-card-background border-card-border", children: [_jsx(FloatingArrow, { ref: arrowRef, context: context, className: "fill-card-background stroke-card-border" }), currentStep.title && (_jsx("h3", { children: currentStep.title })), currentStep.description && (_jsx(Fragment, { children: currentStep.description })), _jsxs("div", { className: "flex justify-between items-center pt-2 mt-2 border-t border-floating-border", children: [_jsx(Button, { theme: "raw", size: "small", onClick: onClose, className: "text-xs text-muted-foreground hover:text-foreground", children: labels.skip }), _jsxs("div", { className: "flex gap-2", children: [hasPrevious && (_jsx(Button, { size: "small", theme: "neutral", onClick: handlePrevious, children: labels.previous })), _jsx(Button, { size: "small", onClick: handleNext, children: hasNext ? labels.next : labels.finish })] })] }), _jsxs("div", { className: "absolute top-2 right-2 text-xs text-muted-foreground", children: [index + 1, " / ", steps.length] })] }) })) })] }) }));
+};

package/dist/components/index.d.ts

@@ -8,8 +8,8 @@ export * from "./form/switch";
 export * from "./table/index";
 export * from "./display/card";
 export * from "./display/list";
-export * from "./display/tabs";
 export * from "./display/step";
+export * from "./display/tabs";
 export * from "./display/alert";
 export * from "./display/empty";
 export * from "./display/stats";
@@ -23,6 +23,7 @@ export * from "./form/task-list";
 export * from "./core/typography";
 export * from "./display/spinner";
 export * from "./floating/expand";
+export * from "./floating/wizard";
 export * from "./display/calendar";
 export * from "./display/progress";
 export * from "./display/timeline";

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

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

package/dist/components/index.js

@@ -8,8 +8,8 @@ export * from "./form/switch";
 export * from "./table/index";
 export * from "./display/card";
 export * from "./display/list";
-export * from "./display/tabs";
 export * from "./display/step";
+export * from "./display/tabs";
 export * from "./display/alert";
 export * from "./display/empty";
 export * from "./display/stats";
@@ -23,6 +23,7 @@ export * from "./form/task-list";
 export * from "./core/typography";
 export * from "./display/spinner";
 export * from "./floating/expand";
+export * from "./floating/wizard";
 export * from "./display/calendar";
 export * from "./display/progress";
 export * from "./display/timeline";

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":"AAEA,OAAO,EAAE,cAAc,EAAW,MAAM,OAAO,CAAC;AAGhD,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;IAC7C,WAAW,EAAE,CAAC,GAAG,EAAE,CAAC,KAAK,cAAc,CAAC,IAAI,CAAC,CAAC;CACjD,CACJ,CAAC;AASF,eAAO,MAAM,KAAK,GAAI,CAAC,SAAS,GAAG,EAAE,OAAO,UAAU,CAAC,CAAC,CAAC,4CAgHxD,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/table/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAsB,MAAM,OAAO,CAAC;AAG3D,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAGlC,OAAO,EAAc,eAAe,EAAE,MAAM,eAAe,CAAC;AAG5D,OAAO,EAAyB,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAGzE,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;IACvH,IAAI,EAAE,MAAM,CAAC;CACd,GAAG,OAAO,CACT,mBAAmB,CAAC,CAAC,CAAC,GAAG;IACvB,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;IAC7C,WAAW,EAAE,CAAC,GAAG,EAAE,CAAC,KAAK,cAAc,CAAC,IAAI,CAAC,CAAC;CAC/C,CACF,CAAC;AASF,eAAO,MAAM,KAAK,GAAI,CAAC,SAAS,GAAG,EAAE,OAAO,UAAU,CAAC,CAAC,CAAC,4CAoHxD,CAAC"}

package/dist/components/table/index.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { AnimatePresence } from "motion/react";
-import { useMemo } from "react";
+import { useEffect, useMemo } from "react";
 import { useReducer } from "use-typed-reducer";
 import { useTweaks } from "../../hooks/use-tweaks";
 import { InnerTable } from "./inner-table";
@@ -45,5 +45,8 @@ export const Table = (props) => {
             },
         ],
     });
+    useEffect(() => {
+        dispatch.cols(props.cols);
+    }, [props.cols]);
     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

@@ -25,5 +25,5 @@ export type InnerTableProps<T extends Any> = HTMLAttributes<HTMLTableElement> &
     getRowProps?: (_: T) => ComponentProps<"tr">;
     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;
+export declare const InnerTable: <T extends Any>({ cols, filters, setCols, sorters, setFilters, setSorters, onScrollEnd, getScrollRef, 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

@@ -1 +1 @@
-{"version":3,"file":"inner-table.d.ts","sourceRoot":"","sources":["../../../src/components/table/inner-table.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAE,cAAc,EAA2B,cAAc,EAAwC,MAAM,OAAO,CAAC;AAI7H,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,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,cAAc,CAAC,IAAI,CAAC,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,4CA0EpB,CAAC"}
+{"version":3,"file":"inner-table.d.ts","sourceRoot":"","sources":["../../../src/components/table/inner-table.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAE,cAAc,EAA2B,cAAc,EAAwC,MAAM,OAAO,CAAC;AAI7H,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,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,cAAc,CAAC,IAAI,CAAC,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,0HAYvC,eAAe,CAAC,CAAC,CAAC,4CA0EpB,CAAC"}

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

@@ -46,9 +46,9 @@ 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 emptyRows = [];
-export const InnerTable = ({ cols, filters, setCols, sorters, setFilters, setSorters, onScrollEnd, getScrollRef, border = true, pagination = null, useControl = false, ...props }) => {
+export const InnerTable = ({ cols, filters, setCols, sorters, setFilters, setSorters, onScrollEnd, getScrollRef, pagination = null, useControl = false, ...props }) => {
     const ref = useRef(null);
-    const [showLoadingFooter, setShowLoadingFooter] = useState(false);
+    const [, setShowLoadingFooter] = useState(false);
     const onScrollEndRef = useStableRef(onScrollEnd);
     const loadingMoreRef = useStableRef(props.loadingMore);
     const rows = useMemo(() => {
@@ -88,5 +88,5 @@ export const InnerTable = ({ cols, filters, setCols, sorters, setFilters, setSor
         getRowProps: props.getRowProps,
         loadingMore: props.loadingMore,
     };
-    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] }));
+    return (_jsxs("div", { className: "flex relative flex-col w-full whitespace-nowrap rounded-lg group", children: [_jsx(TableVirtuoso, { components: components, context: context, 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/metadata.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"metadata.d.ts","sourceRoot":"","sources":["../../../src/components/table/metadata.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAIlC,OAAO,EAAE,mBAAmB,EAAiB,MAAM,aAAa,CAAC;AAEjE,eAAO,MAAM,QAAQ,GAAI,CAAC,SAAS,GAAG,EAAE,OAAO,mBAAmB,CAAC,CAAC,CAAC,4CAiDpE,CAAC"}
+{"version":3,"file":"metadata.d.ts","sourceRoot":"","sources":["../../../src/components/table/metadata.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAIlC,OAAO,EAAE,mBAAmB,EAAiB,MAAM,aAAa,CAAC;AAEjE,eAAO,MAAM,QAAQ,GAAI,CAAC,SAAS,GAAG,EAAE,OAAO,mBAAmB,CAAC,CAAC,CAAC,4CA6CpE,CAAC"}

package/dist/components/table/metadata.js

@@ -3,12 +3,8 @@ import { Filter } from "./filter";
 import { Group } from "./group";
 import { Sort } from "./sort";
 import { valueFromType } from "./table-lib";
-export const Metadata = (props) => (_jsx("header", { className: "min-w-full mb-1", children: _jsxs("div", { className: "flex flex-wrap min-w-full items-center justify-between gap-x-4 gap-y-1", children: [_jsxs("div", { className: "flex w-fit items-centeend gap-4 whitespace-nowrap py-2", children: [_jsx("span", { children: _jsx(Filter, { cols: props.cols, options: props.options, filters: props.filters, set: props.setFilters }) }), _jsx("span", { children: _jsx(Sort, { options: props.options, cols: props.cols, sorters: props.sorters, set: props.setSorters }) }), _jsx("span", { children: _jsx(Group, { rows: props.rows, groups: props.groups, setGroups: props.setGroups, options: props.options, cols: props.cols }) })] }), _jsx("ul", { className: "flex flex-wrap w-full flex-1 flex-grow flex-row items-center md:justify-end gap-4", children: props.filters.map((x) => (_jsxs("li", { className: "flex gap-1 items-center rounded-xl border border-card-border px-4 py-0.5", children: [_jsxs("span", { children: [_jsx("span", { className: "size-3 mr-2 aspect-square bg-primary inline-block rounded-full", "aria-hidden": "true" }), x.label, " ", x.operation.label.toLowerCase(), ":"] }), _jsxs("div", { className: "relative w-min min-w-[1ch]", children: [_jsx("span", { "aria-hidden": "true", className: "invisible whitespace-pre p-0", children: x.value || " " }), _jsx("input", { type: x.type, value: x.value, className: "absolute left-0 top-0 m-0 inline-block w-full bg-transparent p-0 placeholder-primary/70 outline-none [appearance:textfield] after:empty:text-primary/70 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none", onChange: (e) => {
+export const Metadata = (props) => (_jsx("header", { className: "mb-1 min-w-full", children: _jsxs("div", { className: "flex flex-wrap gap-y-1 gap-x-4 justify-between items-center min-w-full", children: [_jsxs("div", { className: "flex gap-4 py-2 whitespace-nowrap w-fit items-centeend", children: [_jsx("span", { children: _jsx(Filter, { cols: props.cols, options: props.options, filters: props.filters, set: props.setFilters }) }), _jsx("span", { children: _jsx(Sort, { options: props.options, cols: props.cols, sorters: props.sorters, set: props.setSorters }) }), _jsx("span", { children: _jsx(Group, { rows: props.rows, groups: props.groups, setGroups: props.setGroups, options: props.options, cols: props.cols }) })] }), _jsx("ul", { className: "flex flex-row flex-wrap flex-1 flex-grow gap-4 items-center w-full md:justify-end", children: props.filters.map((x) => (_jsxs("li", { className: "flex gap-1 items-center py-0.5 px-4 rounded-xl border border-card-border", children: [_jsxs("span", { children: [_jsx("span", { className: "inline-block mr-2 rounded-full size-3 aspect-square bg-primary", "aria-hidden": "true" }), x.label, " ", x.operation.label.toLowerCase(), ":"] }), _jsxs("div", { className: "relative w-min min-w-[1ch]", children: [_jsx("span", { "aria-hidden": "true", className: "invisible p-0 whitespace-pre", children: x.value || " " }), _jsx("input", { type: x.type, value: x.value, className: "absolute left-0 top-0 m-0 inline-block w-full bg-transparent p-0 placeholder-primary/70 outline-none [appearance:textfield] after:empty:text-primary/70 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none", onChange: (e) => {
                                         const value = valueFromType(e.target);
                                         props.setFilters((prev) => prev.map((item) => x.id === item.id
-                                            ? {
-                                                ...item,
-                                                value,
-                                            }
-                                            : item));
+                                            ? { ...item, value, } : item));
                                     } })] })] }, `filter-table-${x.id}`))) })] }) }));

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

@@ -1 +1 @@
-{"version":3,"file":"row.d.ts","sourceRoot":"","sources":["../../../src/components/table/row.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmE,MAAM,OAAO,CAAC;AAGxF,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC,OAAO,EAAE,gBAAgB,EAAoB,GAAG,EAAa,MAAM,aAAa,CAAC;AAEjF,KAAK,kBAAkB,GAAG;IACtB,IAAI,EAAE,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,KAAK,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAAC,GAAG,CAAC,CAAC,CAAC;CAC3C,CAAC;AA6CF,eAAO,MAAM,GAAG,GAAI,OAAO,MAAM,EAAE,KAAK,GAAG,EAAE,SAAS,kBAAkB,4CA0CvE,CAAC"}
+{"version":3,"file":"row.d.ts","sourceRoot":"","sources":["../../../src/components/table/row.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmE,MAAM,OAAO,CAAC;AAGxF,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC,OAAO,EAAE,gBAAgB,EAAoB,GAAG,EAAa,MAAM,aAAa,CAAC;AAEjF,KAAK,kBAAkB,GAAG;IACxB,IAAI,EAAE,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,KAAK,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAAC,GAAG,CAAC,CAAC,CAAC;CACzC,CAAC;AA6CF,eAAO,MAAM,GAAG,GAAI,OAAO,MAAM,EAAE,KAAK,GAAG,EAAE,SAAS,kBAAkB,4CAwCvE,CAAC"}

package/dist/components/table/row.js

@@ -42,6 +42,6 @@ export const Row = (index, row, context) => {
             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 })) })));
+                _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/config/default-translations.d.ts

@@ -15,6 +15,10 @@ export declare const defaultTranslations: {
     inputCaretDown: string;
     inputCloseValue: string;
     inputOptionalLabel: string;
+    driverNext: string;
+    driverPrevious: string;
+    driverFinish: string;
+    driverSkip: string;
     multiSelectInnerPlaceholder: string;
     multiSelectSelectedLabel: string;
     tableColumnResizer: string;

package/dist/config/default-translations.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"default-translations.d.ts","sourceRoot":"","sources":["../../src/config/default-translations.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAExC,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wCAuCQ;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,UAAU,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;QAAC,OAAO,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,KAAK,CAAC,SAAS,CAAA;KAAE;;;;;;;;;;;;;;;4BAqB7G;QAAE,CAAC,EAAE,MAAM,CAAA;KAAE;;+BAGV,MAAM;CACpC,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG,OAAO,mBAAmB,CAAC"}
+{"version":3,"file":"default-translations.d.ts","sourceRoot":"","sources":["../../src/config/default-translations.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAExC,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wCA2CQ;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,UAAU,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;QAAC,OAAO,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,KAAK,CAAC,SAAS,CAAA;KAAE;;;;;;;;;;;;;;;4BAqB7G;QAAE,CAAC,EAAE,MAAM,CAAA;KAAE;;+BAGV,MAAM;CACpC,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG,OAAO,mBAAmB,CAAC"}

package/dist/config/default-translations.js

@@ -16,6 +16,10 @@ export const defaultTranslations = {
     inputCaretDown: "Click to see all options",
     inputCloseValue: "Click to clear the value",
     inputOptionalLabel: "Optional",
+    driverNext: "Next",
+    driverPrevious: "Previous",
+    driverFinish: "Finish",
+    driverSkip: "Skip",
     multiSelectInnerPlaceholder: "Search...",
     multiSelectSelectedLabel: "Selected",
     tableColumnResizer: "Resize column",

package/dist/hooks/use-resize-observer.d.ts

@@ -0,0 +1,2 @@
+export declare const useResizeObserver: (element: HTMLElement | null, onResize: (entry: ResizeObserverEntry) => void) => void;
+//# sourceMappingURL=use-resize-observer.d.ts.map

package/dist/hooks/use-resize-observer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-resize-observer.d.ts","sourceRoot":"","sources":["../../src/hooks/use-resize-observer.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,iBAAiB,GAC5B,SAAS,WAAW,GAAG,IAAI,EAC3B,UAAU,CAAC,KAAK,EAAE,mBAAmB,KAAK,IAAI,SAe/C,CAAC"}

package/dist/hooks/use-resize-observer.js

@@ -0,0 +1,17 @@
+"use client";
+import { useEffect, useRef } from "react";
+export const useResizeObserver = (element, onResize) => {
+    const onResizeRef = useRef(onResize);
+    onResizeRef.current = onResize;
+    useEffect(() => {
+        if (!element)
+            return;
+        const observer = new ResizeObserver((entries) => {
+            if (entries[0]) {
+                onResizeRef.current(entries[0]);
+            }
+        });
+        observer.observe(element);
+        return () => observer.disconnect();
+    }, [element]);
+};

package/dist/hooks/use-translations.d.ts

@@ -14,6 +14,10 @@ export declare const useTranslations: () => {
     inputCaretDown: string;
     inputCloseValue: string;
     inputOptionalLabel: string;
+    driverNext: string;
+    driverPrevious: string;
+    driverFinish: string;
+    driverSkip: string;
     multiSelectInnerPlaceholder: string;
     multiSelectSelectedLabel: string;
     tableColumnResizer: string;

package/dist/hooks/use-translations.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-translations.d.ts","sourceRoot":"","sources":["../../src/hooks/use-translations.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;aAKy2C,CAAC;;;;;;;;;;;;;;;;;;;;;;;CADr4C,CAAC"}
+{"version":3,"file":"use-translations.d.ts","sourceRoot":"","sources":["../../src/hooks/use-translations.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;aAKq9C,CAAC;;;;;;;;;;;;;;;;;;;;;;;CADj/C,CAAC"}

package/dist/hooks/use-window-size.d.ts

@@ -0,0 +1,5 @@
+export declare const useWindowSize: () => {
+    width: number;
+    height: number;
+};
+//# sourceMappingURL=use-window-size.d.ts.map

package/dist/hooks/use-window-size.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-window-size.d.ts","sourceRoot":"","sources":["../../src/hooks/use-window-size.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,aAAa;;;CAYzB,CAAC"}

package/dist/hooks/use-window-size.js

@@ -0,0 +1,14 @@
+"use client";
+import { useEffect, useState } from "react";
+export const useWindowSize = () => {
+    const [size, setSize] = useState({ width: 0, height: 0 });
+    useEffect(() => {
+        if (typeof window === "undefined")
+            return;
+        const update = () => setSize({ width: window.innerWidth, height: window.innerHeight });
+        update();
+        window.addEventListener("resize", update, { passive: true });
+        return () => window.removeEventListener("resize", update);
+    }, []);
+    return size;
+};