@g4rcez/components 2.0.21 → 2.0.23

package/dist/components/display/card.js

@@ -4,7 +4,7 @@ import { Is } from "sidekicker";
 import { css } from "../../lib/dom";
 import { Polymorph } from "../core/polymorph";
 import { Skeleton } from "./skeleton";
-export const Card = ({ title, loading, children, as, header = null, container = "", titleClassName = "", ...props }) => (_jsxs(Polymorph, { ...props, as: as || "div", "data-component": "card", className: css("flex shadow-shadow-card flex-col gap-4 rounded-card border border-card-border bg-card-background w-full py-4 pb-5", container), children: [title ? (_jsx("header", { "data-component": "card-title", className: css("mb-2 w-full border-b border-card-border px-4 pb-4 text-xl font-medium lg:px-8", titleClassName), children: title })) : (header), _jsx("div", { "data-component": "card-body", className: css("min-w-full px-4 lg:px-8", props.className), children: loading ? (_jsxs("div", { className: "flex flex-col gap-4", children: [_jsx(Skeleton, { className: "w-full" }), _jsx(Skeleton, { className: "w-8/12" }), _jsx(Skeleton, { className: "w-10/12" }), _jsx(Skeleton, { className: "w-1/2" })] })) : children })] }));
+export const Card = ({ title, loading, children, as, header = null, container = "", titleClassName = "", ...props }) => (_jsxs(Polymorph, { ...props, as: as || "div", "data-component": "card", className: css("flex shadow-shadow-card flex-col gap-4 rounded-card border border-card-border bg-card-background w-full py-4", container), children: [title ? (_jsx("header", { "data-component": "card-title", className: css("mb-2 w-full border-b border-card-border px-6 pb-4 text-xl font-medium", titleClassName), children: title })) : (header), _jsx("div", { "data-component": "card-body", className: css("min-w-full px-6", props.className), children: loading ? (_jsxs("div", { className: "flex flex-col gap-4", children: [_jsx(Skeleton, { className: "w-full" }), _jsx(Skeleton, { className: "w-8/12" }), _jsx(Skeleton, { className: "w-10/12" }), _jsx(Skeleton, { className: "w-1/2" })] })) : children })] }));
 Card.Title = ({ as, titleTag, navTag, children, ...props }) => {
     const Component = (as || "div");
     const Title = (titleTag || "h2");
@@ -14,5 +14,5 @@ Card.Title = ({ as, titleTag, navTag, children, ...props }) => {
 export const StatsCard = (props) => {
     const interactive = props.interactive ?? true;
     const Icon = props.Icon ?? InfoIcon;
-    return (_jsx(Card, { ...props, title: null, loading: undefined, container: "px-0 py-0", className: "flex gap-4 items-center px-0 lg:px-0", children: _jsxs("div", { className: `flex w-full items-center gap-4 rounded-card px-0 lg:px-0 ${interactive ? "transition-colors duration-300 ease-linear hover:bg-primary-hover/10" : ""}`, children: [_jsx("div", { className: css("flex aspect-square h-[stretch] w-20 items-center justify-center rounded-l-card bg-primary p-4 text-primary-foreground", props.mark), children: _jsx(Icon, { size: 48 }) }), _jsxs("div", { className: "flex flex-col gap-2 justify-center py-2", children: [_jsx("p", { className: "text-lg", children: props.title }), props.loading ? _jsx(Skeleton, { className: "h-10" }) : _jsx("p", { className: "text-4xl font-bold tracking-wide", children: props.value })] })] }) }));
+    return (_jsx(Card, { ...props, title: null, loading: undefined, container: "px-0 py-0", className: "flex gap-4 items-center px-0", children: _jsxs("div", { className: `flex w-full items-center gap-4 rounded-card px-0 lg:px-0 ${interactive ? "transition-colors duration-300 ease-linear hover:bg-primary-hover/10" : ""}`, children: [_jsx("div", { className: css("flex aspect-square h-[stretch] w-20 items-center justify-center rounded-l-card bg-primary p-4 text-primary-foreground", props.mark), children: _jsx(Icon, { size: 48 }) }), _jsxs("div", { className: "flex flex-col gap-2 justify-center py-2", children: [_jsx("p", { className: "text-lg", children: props.title }), props.loading ? _jsx(Skeleton, { className: "h-10" }) : _jsx("p", { className: "text-4xl font-bold tracking-wide", children: props.value })] })] }) }));
 };

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

@@ -1,14 +1,23 @@
 import React, { PropsWithChildren } from "react";
+import { Label } from "../../types";
+type StepContextValue = {
+    currentStep: number;
+    previousStep: number;
+    progressBarDuration: number;
+};
 type StepStatus = "active" | "inactive" | "complete" | "error";
 export type StepProps = React.ComponentProps<"button"> & {
     step: number;
+    title?: Label;
     currentStep: number;
     status?: StepStatus;
+    titleClassName?: string;
 };
-export declare const StepsContainer: (props: PropsWithChildren<{
+export declare const useStepContext: () => StepContextValue | null;
+export declare const Step: ({ step, currentStep, status, title, titleClassName, ...props }: StepProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Steps: (props: PropsWithChildren<{
     steps: number;
     currentStep: number;
 }>) => import("react/jsx-runtime").JSX.Element;
-export declare const Step: (props: StepProps) => import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=step.d.ts.map

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,EAAkB,iBAAiB,EAAa,MAAM,OAAO,CAAC;AAmC5E,KAAK,UAAU,GAAG,QAAQ,GAAG,UAAU,GAAG,UAAU,GAAG,OAAO,CAAC;AAE/D,MAAM,MAAM,SAAS,GAAG,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,GAAG;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,WAAW,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,UAAU,CAAA;CAAE,CAAC;AAkBpH,eAAO,MAAM,cAAc,GAAI,OAAO,iBAAiB,CAAC;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,WAAW,EAAE,MAAM,CAAA;CAAE,CAAC,4CA6B9F,CAAC;AAEF,eAAO,MAAM,IAAI,GAAI,OAAO,SAAS,4CAkDpC,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,4CAmF7F,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

@@ -1,78 +1,121 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { motion, stagger, useAnimate } from "motion/react";
-import { useEffect } from "react";
+import { motion, useAnimate } from "motion/react";
+import { createContext, Fragment, useContext, useEffect, useRef, useState } from "react";
 import { useColorParser } from "../../hooks/use-color-parser";
-const iconTransitions = {
-    delay: 0.2,
-    duration: 0.3,
-    type: "tween",
-    ease: "easeOut",
-};
+const PROGRESS_BAR_DURATION = 0.3;
+const transition = { duration: PROGRESS_BAR_DURATION, type: "tween", ease: "easeInOut" };
+const StepContext = createContext(null);
+const iconTransitions = { delay: 0.2, duration: 0.3, type: "tween", ease: "easeOut" };
 const states = {
     initial: { pathLength: 0, opacity: 0 },
     animate: { pathLength: 1, opacity: 1 },
 };
 const ErrorIcon = (props) => (_jsxs("svg", { ...props, viewBox: "0 0 24 24", fill: "currentColor", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx(motion.path, { className: "currentColor", initial: states.initial, animate: states.animate, transition: iconTransitions, d: "M18 6 6 18" }), _jsx(motion.path, { className: "currentColor", initial: states.initial, animate: states.animate, transition: iconTransitions, d: "m6 6 12 12" })] }));
 const CheckIcon = (props) => (_jsx("svg", { ...props, fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 3, children: _jsx(motion.path, { d: "M5 13l4 4L19 7", strokeLinecap: "round", strokeLinejoin: "round", animate: states.animate, initial: states.initial, transition: iconTransitions }) }));
-const variants = { complete: { scale: 1.25 }, active: { scale: 1, transition: { delay: 0, duration: 0.2 } } };
-const transitions = {
-    duration: 0.6,
-    delay: 0.2,
-    type: "tween",
-    ease: "circOut",
+const variants = {
+    complete: { scale: 1.25 },
+    active: {
+        scale: 1,
+        transition: { delay: 0, duration: 0.3 }
+    }
 };
-const getCurrentStatus = (props) => {
-    if (props.status === "error")
+const transitions = { duration: 0.6, delay: 0.2, type: "tween", ease: "circOut", };
+const getCurrentStatus = (step, currentStep, status) => {
+    if (status === "error")
         return "error";
-    if (props.currentStep === props.step)
+    if (currentStep === step)
         return "active";
-    if (props.currentStep < props.step)
+    if (currentStep < step)
         return "inactive";
     return "complete";
 };
-export const StepsContainer = (props) => {
-    const [ref, animate] = useAnimate();
+const calculateStepDelay = (step, currentStep, previousStep, duration) => {
+    if (currentStep === previousStep)
+        return 0;
+    const isForward = currentStep > previousStep;
+    if (isForward) {
+        if (step <= previousStep || step > currentStep)
+            return 0;
+        return ((step - previousStep) / (currentStep - previousStep)) * duration;
+    }
+    if (step <= currentStep || step > previousStep)
+        return 0;
+    return ((previousStep - step) / (previousStep - currentStep)) * duration;
+};
+export const useStepContext = () => useContext(StepContext);
+export const Step = ({ step, currentStep, status, title, titleClassName, ...props }) => {
+    const parser = useColorParser();
+    const context = useStepContext();
+    const [visualCurrentStep, setVisualCurrentStep] = useState(currentStep);
     useEffect(() => {
-        if (props.currentStep === 0)
+        if (!context) {
+            setVisualCurrentStep(currentStep);
             return;
-        const container = ref.current;
-        const first = container.querySelectorAll('[data-step]')[0];
-        const step = container.querySelector(`[data-step="${props.currentStep}"]`);
-        if (first && step) {
-            const diff = step.getBoundingClientRect().left - first.getBoundingClientRect().left;
-            animate("div[data-name='progress']", { width: `${Math.max(0, diff)}px` }, {
-                type: "spring",
-                duration: 0.5,
-                delay: stagger(0.075),
-            });
         }
-    }, [props.currentStep]);
-    return (_jsxs("div", { className: "relative flex 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 h-1 w-0 bg-success transition-all duration-300 ease-out" }), props.children] }));
-};
-export const Step = (props) => {
-    const parser = useColorParser();
-    const status = getCurrentStatus(props);
-    return (_jsxs(motion.button, { ...props, type: "button", "data-step": props.step, animate: status, className: "relative block w-auto", children: [_jsx(motion.div, { variants: variants, transition: transitions, className: `absolute inset-0 rounded-full ${props.status === "error" ? "bg-danger" : ""}` }), _jsx(motion.div, { initial: false, variants: {
+        const delay = calculateStepDelay(step, context.currentStep, context.previousStep, context.progressBarDuration);
+        if (delay === 0) {
+            setVisualCurrentStep(currentStep);
+            return;
+        }
+        const timer = setTimeout(() => {
+            setVisualCurrentStep(currentStep);
+        }, delay * 1000);
+        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: {
                     error: {
-                        backgroundColor: parser("var(--danger-DEFAULT)"),
-                        borderColor: parser("var(--danger-hover)"),
                         color: parser("var(--danger-foreground)"),
+                        borderColor: parser("var(--danger-hover)"),
+                        backgroundColor: parser("var(--danger-DEFAULT)"),
                     },
                     inactive: {
-                        backgroundColor: parser("var(--background)"),
-                        borderColor: parser("var(--card-border)"),
+                        transition,
                         color: parser("var(--disabled)"),
+                        borderColor: parser("var(--card-border)"),
+                        backgroundColor: parser("var(--background)"),
                     },
                     active: {
-                        backgroundColor: parser("var(--primary-DEFAULT)"),
-                        borderColor: parser("var(--primary-DEFAULT)"),
+                        transition,
                         color: parser("var(--primary-foreground)"),
+                        borderColor: parser("var(--primary-DEFAULT)"),
+                        backgroundColor: parser("var(--primary-DEFAULT)"),
                     },
                     complete: {
-                        backgroundColor: parser("var(--success-DEFAULT)"),
-                        borderColor: parser("var(--success-DEFAULT)"),
+                        transition,
                         color: parser("var(--success-foreground)"),
+                        borderColor: parser("var(--success-DEFAULT)"),
+                        backgroundColor: parser("var(--success-DEFAULT)"),
                     },
-                }, transition: { duration: 0.2 }, className: "relative flex h-10 w-10 items-center justify-center rounded-full font-semibold", children: _jsx("div", { className: "flex items-center justify-center", children: status === "complete" ? (_jsx(CheckIcon, { className: "h-6 w-6 text-primary-foreground" })) : status === "error" ? (_jsx(ErrorIcon, { className: "h-6 w-6 text-danger-foreground" })) : (_jsx("span", { children: props.step })) }) })] }));
+                }, 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] }));
+};
+export const Steps = (props) => {
+    const [ref, animate] = useAnimate();
+    const previousStepRef = useRef(props.currentStep);
+    const [previousStep, setPreviousStep] = useState(props.currentStep);
+    useEffect(() => {
+        if (props.currentStep === 0)
+            return;
+        const container = ref.current;
+        const first = container.querySelectorAll('[data-step]')[0];
+        const step = container.querySelector(`[data-step="${props.currentStep}"]`);
+        if (first && step) {
+            const diff = step.getBoundingClientRect().left - first.getBoundingClientRect().left;
+            animate("div[data-name='progress']", { width: `${Math.max(0, diff)}px` }, transition);
+        }
+    }, [props.currentStep]);
+    useEffect(() => {
+        previousStepRef.current = previousStep;
+        const timer = setTimeout(() => {
+            setPreviousStep(props.currentStep);
+        }, PROGRESS_BAR_DURATION * 1000);
+        return () => clearTimeout(timer);
+    }, [props.currentStep]);
+    const contextValue = {
+        currentStep: props.currentStep,
+        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] }) }));
 };

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

@@ -1,6 +1,7 @@
 import { PropsWithChildren } from "react";
 import { Label } from "../../types";
-export type TabsProps = {
+import { CardProps } from "./card";
+export type TabsProps = Omit<CardProps<"div">, "onChange"> & {
     active: string;
     container?: string;
     className?: string;

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

@@ -1 +1 @@
-{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../../src/components/display/tabs.tsx"],"names":[],"mappings":"AACA,OAAc,EAA2B,iBAAiB,EAAiC,MAAM,OAAO,CAAC;AAMzG,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAIpC,MAAM,MAAM,SAAS,GAAG;IACpB,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC,CAAC;AAiCF,eAAO,MAAM,IAAI,GAAI,OAAO,iBAAiB,CAAC,SAAS,CAAC,4CAsFvD,CAAC;AAIF,KAAK,cAAc,GAAG;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC;AAEzD,MAAM,MAAM,QAAQ,GAAG,cAAc,GACjC,CACM;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,SAAS,CAAA;CAAE,GACpC;IACI,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;CAC9B,CACN,CAAC;AAEN,eAAO,MAAM,GAAG,GAAI,OAAO,iBAAiB,CAAC,QAAQ,CAAC,4CAGrD,CAAC"}
+{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../../src/components/display/tabs.tsx"],"names":[],"mappings":"AACA,OAAc,EAA2B,iBAAiB,EAAiC,MAAM,OAAO,CAAC;AAMzG,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAEpC,OAAO,EAAQ,SAAS,EAAE,MAAM,QAAQ,CAAC;AAEzC,MAAM,MAAM,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,GAAG;IACzD,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC,CAAC;AAiCF,eAAO,MAAM,IAAI,GAAI,OAAO,iBAAiB,CAAC,SAAS,CAAC,4CAsFvD,CAAC;AAIF,KAAK,cAAc,GAAG;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC;AAEzD,MAAM,MAAM,QAAQ,GAAG,cAAc,GACjC,CACM;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,SAAS,CAAA;CAAE,GACpC;IACE,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;CAC9B,CACJ,CAAC;AAEN,eAAO,MAAM,GAAG,GAAI,OAAO,iBAAiB,CAAC,QAAQ,CAAC,4CAGrD,CAAC"}

package/dist/components/display/tabs.js

@@ -73,10 +73,10 @@ export const Tabs = (props) => {
             setActive(result);
         }
     };
-    return (_jsx(Context.Provider, { value: active, children: _jsx(Card, { className: props.className, container: css("pt-0 max-w-full w-full min-w-0", props.container), header: _jsxs("header", { className: "relative mb-2 overflow-x-auto", children: [_jsx("div", { className: "absolute bottom-0 h-[1px] w-full bg-card-border" }), _jsx("nav", { className: "min-w-0", children: _jsx("ul", { onKeyDown: onKeyDown, ref: ref, className: "flex w-0 min-w-full flex-1 justify-start overflow-x-auto", children: items.map((x) => {
+    return (_jsx(Context.Provider, { value: active, children: _jsx(Card, { className: props.className, container: css("pt-0 max-w-full w-full min-w-0", props.container), header: _jsxs("header", { className: "overflow-x-auto relative mb-2", children: [_jsx("div", { className: "absolute bottom-0 w-full h-[1px] bg-card-border" }), _jsx("nav", { className: "min-w-0", children: _jsx("ul", { onKeyDown: onKeyDown, ref: ref, className: "flex overflow-x-auto flex-1 justify-start w-0 min-w-full", children: items.map((x) => {
                                 const inner = x.props;
                                 const current = active === inner.id;
-                                return (_jsx("li", { "data-id": inner.id, "data-active": current, "aria-disabled": inner.disabled, className: css("relative w-fit border-b border-transparent transition-all", current ? "border-primary font-medium text-primary" : "", inner.disabled ? "aria-disabled:text-disabled" : ""), children: _jsx(Polymorph, { as: "button", type: "button", "data-id": inner.id, "aria-current": "page", disabled: inner.disabled, onClick: inner.disabled ? undefined : onClick, className: "block w-full whitespace-nowrap px-10 py-4 disabled:cursor-not-allowed", children: inner.title }) }, `tab-header-${inner.id}`));
+                                return (_jsx("li", { "data-id": inner.id, "data-active": current, "aria-disabled": inner.disabled, className: css("relative w-fit border-b border-transparent transition-all", current ? "border-primary font-medium text-primary" : "", inner.disabled ? "aria-disabled:text-disabled" : ""), children: _jsx(Polymorph, { as: "button", type: "button", "data-id": inner.id, "aria-current": "page", disabled: inner.disabled, onClick: inner.disabled ? undefined : onClick, className: "block py-4 px-10 w-full whitespace-nowrap disabled:cursor-not-allowed", children: inner.title }) }, `tab-header-${inner.id}`));
                             }) }) })] }), children: props.children }) }));
 };
 const useTabs = () => useContext(Context);

package/dist/components/floating/modal.js

@@ -97,11 +97,11 @@ export const Modal = forwardRef(({ open, title, footer, asChild, trigger, childr
     const headingId = useId();
     const descriptionId = useId();
     const isDesktop = useMediaQuery("(min-width: 64rem)");
-    const useResizer = _type !== "dialog";
     const position = fetchPosition(isDesktop, forceType, _type, propsPosition);
     const func = isDesktop ? animations[_type] : forceType ? animations[_type] : animations.sheet;
     const animation = typeof func === "function" ? func(position) : func;
     const type = isDesktop ? _type : forceType ? _type : "sheet";
+    const useResizer = type !== "dialog";
     const floating = useFloating({ open, onOpenChange: onChange });
     const click = useClick(floating.context, {});
     const role = useRole(floating.context, { role: roleName });
@@ -175,7 +175,7 @@ export const Modal = forwardRef(({ open, title, footer, asChild, trigger, childr
                                         "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: () => {
+                                    }), 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 ? undefined : "y", onDrag: type === "sheet" ? (isDesktop ? undefined : onDragBody) : undefined, className: css("flex-1 select-text overflow-y-auto px-8 py-1", bodyClassName), onTouchEnd: () => {
                                                 scroll.set(undefined);
                                                 scrollInitial.set(undefined);
                                             }, onTouchStart: e => {

package/dist/components/floating/tooltip.js

@@ -51,5 +51,5 @@ export const Tooltip = forwardRef(function Tooltip({ as, open, title, children,
             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, { 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: "p-3 rounded-lg border isolate z-tooltip border-tooltip-border bg-tooltip-background 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/form/autocomplete.js

@@ -28,7 +28,7 @@ const Item = forwardRef(function VirtualItem({ item, context, ...props }, ref) {
     return _jsx(motion.li, { ...props, ref: ref, className: "first:rounded-t-lg last:rounded-t-lg" });
 });
 const components = { List, Item };
-const MIN_SIZE = 44;
+const MIN_SIZE = 40;
 export const Autocomplete = forwardRef(({ left, error, right, loading, options, container, rightLabel, interactive, emptyMessage, optionalText, labelClassName, feedback = null, hideLeft = false, required = false, dynamicOption = false, ...props }, externalRef) => {
     const scroller = useRef(null);
     const fieldset = useRef(null);
@@ -217,7 +217,7 @@ export const Autocomplete = forwardRef(({ left, error, right, loading, options,
                     },
                 }), "data-value": value, "data-error": !!error, "data-name": id, "data-target": id, required: required, value: open ? shadow : options.length === 0 ? "" : label || value, "aria-autocomplete": "list", autoComplete: "off", className: css("input placeholder-input-mask group h-input-height w-full flex-1", "rounded-md bg-transparent px-input-x py-input-y text-foreground", "outline-none transition-colors focus:ring-2 focus:ring-inset focus:ring-primary", "group-error:text-danger group-error:placeholder-input-mask-error", "text-base group-focus-within:border-primary group-hover:border-primary", props.className) }), _jsx("input", { id: id, name: id, type: "hidden", "data-origin": id, ref: externalRef, required: required, defaultValue: props.value || value || undefined }), _jsx(FloatingPortal, { preserveTabOrder: true, children: open ? (_jsx(FloatingFocusManager, { modal: true, guards: true, returnFocus: false, context: context, initialFocus: -1, visuallyHiddenDismiss: true, children: _jsxs(motion.div, { ...getFloatingProps({
                             ref: mergeRefs(removeScrollRef, refs.setFloating),
-                            style: { ...transitions.styles, left: x, top: y ?? 0, position: strategy },
+                            style: { ...transitions.styles, left: x, top: y ?? 0, position: strategy, height: "auto" },
                         }), initial: false, "data-floating": "true", animate: { height: isEmpty ? "auto" : h }, className: "isolate z-floating m-0 max-h-80 origin-[top_center] list-none overscroll-contain rounded-b-lg rounded-t-lg border border-floating-border bg-floating-background p-0 text-foreground shadow-floating ease-in-out", onAnimationComplete: () => {
                             if (!open)
                                 return setH(0);
@@ -225,7 +225,9 @@ export const Autocomplete = forwardRef(({ left, error, right, loading, options,
                             const li = ul.querySelectorAll("li").item(0);
                             const sum = (li ? li.getBoundingClientRect().height : MIN_SIZE) * displayList.length;
                             return flushSync(() => setH(sum + 10));
-                        }, children: [isEmpty ? (_jsx("div", { role: "option", className: "w-full border-b border-tooltip-border", children: _jsx("span", { className: "flex w-full justify-between p-2 text-left text-disabled", children: emptyMessage || translation.autocompleteEmpty }) })) : null, _jsx(Virtuoso, { overscan: 40, ref: virtuoso, hidden: isEmpty, data: displayList, style: { height: h - 10 }, defaultItemHeight: MIN_SIZE, components: components, scrollerRef: (e) => void (scroller.current = e), className: "max-h-[calc(100%-2px)] overscroll-contain rounded-lg border-floating bg-floating-background p-0 text-foreground", itemContent: (i, option) => {
+                        }, children: [isEmpty ? (_jsx("div", { role: "option", className: "w-full border-b border-tooltip-border", children: _jsx("span", { className: "flex w-full justify-between p-2 text-left text-disabled", children: emptyMessage || translation.autocompleteEmpty }) })) : null, _jsx(Virtuoso, { overscan: 40, ref: virtuoso, hidden: isEmpty, data: displayList, 
+                                // style={{ height: h - 10 }}
+                                defaultItemHeight: MIN_SIZE, components: components, scrollerRef: (e) => void (scroller.current = e), className: "max-h-full overscroll-contain rounded-lg border-floating bg-floating-background p-0 text-foreground", itemContent: (i, option) => {
                                     const Label = option.Render ?? Frag;
                                     const active = value === option.value || value === option.label;
                                     const selected = index === i;

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

@@ -3,6 +3,7 @@ import { Override } from "../../types";
 import { CalendarProps } from "../display/calendar";
 import { InputProps } from "./input";
 export type DatePickerProps = Omit<Override<InputProps, CalendarProps & {
+    floating?: boolean;
     clickToClose?: boolean;
 }>, "currency">;
 export declare const DatePicker: React.ForwardRefExoticComponent<Omit<DatePickerProps, "ref"> & React.RefAttributes<HTMLInputElement>>;

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

@@ -1 +1 @@
-{"version":3,"file":"date-picker.d.ts","sourceRoot":"","sources":["../../../src/components/form/date-picker.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAoE,MAAM,OAAO,CAAC;AAIzF,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAY,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAE9D,OAAO,EAAS,UAAU,EAAE,MAAM,SAAS,CAAC;AAE5C,MAAM,MAAM,eAAe,GAAG,IAAI,CAAC,QAAQ,CAAC,UAAU,EAAE,aAAa,GAAG;IACpE,YAAY,CAAC,EAAE,OAAO,CAAA;CACzB,CAAC,EAAE,UAAU,CAAC,CAAA;AAkDf,eAAO,MAAM,UAAU,uGA2HtB,CAAC"}
+{"version":3,"file":"date-picker.d.ts","sourceRoot":"","sources":["../../../src/components/form/date-picker.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAoE,MAAM,OAAO,CAAC;AAIzF,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAY,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAE9D,OAAO,EAAS,UAAU,EAAE,MAAM,SAAS,CAAC;AAE5C,MAAM,MAAM,eAAe,GAAG,IAAI,CAAC,QAAQ,CAAC,UAAU,EAAE,aAAa,GAAG;IACpE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,OAAO,CAAA;CACzB,CAAC,EAAE,UAAU,CAAC,CAAA;AAkDf,eAAO,MAAM,UAAU,uGAiItB,CAAC"}

package/dist/components/form/date-picker.js

@@ -49,7 +49,7 @@ const formatParts = (datetimeFormat, date) => {
 };
 const DATE_TIME_FORMAT = { day: "numeric", month: "numeric", year: "numeric", hour: "numeric", minute: "numeric" };
 const DATE_FORMAT = { day: "numeric", month: "numeric", year: "numeric" };
-export const DatePicker = forwardRef(({ date, locale: inputLocal, disabledDate, onChange, markToday, clickToClose, type, ...props }, externalRef) => {
+export const DatePicker = forwardRef(({ date, locale: inputLocal, disabledDate, onChange, markToday, clickToClose, floating = true, type, ...props }, externalRef) => {
     const locale = useLocale(inputLocal);
     const labelId = useId();
     const translation = useTranslations();
@@ -99,5 +99,6 @@ export const DatePicker = forwardRef(({ date, locale: inputLocal, disabledDate,
     };
     const validDate = isValid(innerDate);
     const htmlValue = validDate ? innerDate.toISOString() : undefined;
-    return (_jsx(Input, { ...props, mask: mask, value: value, id: undefined, name: undefined, "data-value": htmlValue, formNoValidate: !open, "data-target": props.name, "data-component": "date-picker", onChange: onChangeDateInput, required: props.required ?? true, error: open ? undefined : props.error, placeholder: props.placeholder || translation.datepickerPlaceholder(placeholder), right: _jsxs(Fragment, { children: [_jsx("input", { "data-origin": props.name, defaultValue: htmlValue, form: props.form, hidden: true, id: props.name, name: props.name, ref: externalRef, type: "date" }), _jsx(Dropdown, { open: open, onChange: setOpen, buttonProps: { "aria-describedby": labelId }, trigger: _jsxs("span", { "aria-labelledby": labelId, children: [_jsx("span", { id: labelId, className: "sr-only", children: translation.datePickerCalendarButtonLabel }), _jsx(CalendarIcon, {})] }), children: _jsx(Calendar, { ...props, type: type, locale: locale, changeOnlyOnClick: true, markToday: markToday, onChange: onChangeDate, disabledDate: disabledDate, date: validDate ? innerDate : undefined }) })] }) }));
+    const CalendarComponent = _jsx(Calendar, { ...props, type: type, locale: locale, changeOnlyOnClick: true, markToday: markToday, onChange: onChangeDate, disabledDate: disabledDate, date: validDate ? innerDate : undefined });
+    return (_jsxs(Fragment, { children: [_jsx(Input, { ...props, mask: mask, value: value, id: undefined, name: undefined, "data-value": htmlValue, formNoValidate: !open, "data-target": props.name, "data-component": "date-picker", onChange: onChangeDateInput, required: props.required ?? true, error: open ? undefined : props.error, placeholder: props.placeholder || translation.datepickerPlaceholder(placeholder), right: floating ? _jsxs(Fragment, { children: [_jsx("input", { "data-origin": props.name, defaultValue: htmlValue, form: props.form, hidden: true, id: props.name, name: props.name, ref: externalRef, type: "date" }), _jsx(Dropdown, { open: open, onChange: setOpen, buttonProps: { "aria-describedby": labelId }, trigger: _jsxs("span", { "aria-labelledby": labelId, children: [_jsx("span", { id: labelId, className: "sr-only", children: translation.datePickerCalendarButtonLabel }), _jsx(CalendarIcon, {})] }), children: CalendarComponent })] }) : null }), CalendarComponent] }));
 });

package/dist/components/index.d.ts

@@ -9,6 +9,7 @@ export * from "./table/index";
 export * from "./display/card";
 export * from "./display/list";
 export * from "./display/tabs";
+export * from "./display/step";
 export * from "./display/alert";
 export * from "./display/empty";
 export * from "./display/stats";

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,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,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

@@ -9,6 +9,7 @@ export * from "./table/index";
 export * from "./display/card";
 export * from "./display/list";
 export * from "./display/tabs";
+export * from "./display/step";
 export * from "./display/alert";
 export * from "./display/empty";
 export * from "./display/stats";

package/dist/components/table/pagination.js

@@ -32,7 +32,7 @@ export const Pagination = (pagination) => {
     const translation = useTranslations();
     const pageNavigation = useMemo(() => createPaginationItems(pagination.current, pagination.pages), [pagination.current, pagination.pages]);
     const hasNext = pagination.current < pagination.pages;
-    return (_jsxs("footer", { className: "flex flex-wrap items-center justify-center gap-4 px-1 py-4 lg:flex-nowrap lg:justify-between", children: [_jsx("p", { children: _jsx(translation.tablePaginationFooter, { ...pagination, sizes: pagination.sizes, select: pagination.onChangeSize && Array.isArray(pagination.sizes) ? (_jsxs(Fragment, { children: [_jsx("label", { htmlFor: id, children: translation.tablePaginationSelectLabel }), _jsx("select", { id: id, value: pagination.size, className: "cursor-pointer bg-transparent", onChange: (e) => {
+    return (_jsxs("footer", { className: "flex flex-wrap items-center justify-center gap-4 p-3 border-t-muted text-sm lg:flex-nowrap lg:justify-between", children: [_jsx("p", { children: _jsx(translation.tablePaginationFooter, { ...pagination, sizes: pagination.sizes, select: pagination.onChangeSize && Array.isArray(pagination.sizes) ? (_jsxs(Fragment, { children: [_jsx("label", { htmlFor: id, children: translation.tablePaginationSelectLabel }), _jsx("select", { id: id, value: pagination.size, className: "cursor-pointer bg-transparent", onChange: (e) => {
                                     pagination.onChangeSize?.(Number(e.target.value));
                                 }, children: pagination.sizes.map((value) => (_jsx("option", { value: value, children: value }, `pagination-opt-${value}`))) }), " "] })) : null }) }), _jsx("nav", { children: _jsxs("ul", { className: "flex items-center gap-2", children: [pagination.current > 1 ? (_jsx("li", { children: _jsx(Polymorph, { as: pagination.asLink || "button", href: "previous", className: "", children: translation.tablePaginationPrevious }) })) : null, pageNavigation.map((x) => {
                             if (x === null)