@g4rcez/components 3.0.0-0 → 3.0.0

package/dist/components/display/notifications.jsx

@@ -1,14 +1,15 @@
 "use client";
+import { Toast as Base } from "@base-ui/react/toast";
 import { cva } from "class-variance-authority";
-import { XIcon } from "lucide-react";
+import { XIcon, CheckCircleIcon, TriangleAlertIcon, InfoIcon, Loader2Icon } from "lucide-react";
 import { AnimatePresence, motion } from "motion/react";
-import { Toast as Base } from "@base-ui/react/toast";
 import { createContext, useCallback, useContext, useRef } from "react";
 import { useHover } from "../../hooks/use-hover";
-const variants = cva("relative isolate z-tooltip flex justify-between overflow-hidden whitespace-wrap rounded-lg border text-sm shadow-shadow-notification", {
+import { css } from "../../lib/dom";
+const variants = cva("relative isolate z-tooltip flex w-full flex-col overflow-hidden rounded-xl border bg-card-background backdrop-blur-md text-sm shadow-notification transition-all duration-300", {
     variants: {
         theme: {
-            default: "border-card-border bg-card-background text-foreground",
+            default: "border-card-border text-foreground shadow-black/5",
             info: "bg-alert-info-bg text-alert-info-text border-alert-info-border",
             warn: "bg-alert-warn-bg text-alert-warn-text border-alert-warn-border",
             muted: "bg-alert-muted-bg text-alert-muted-text border-alert-muted-border",
@@ -19,53 +20,66 @@ const variants = cva("relative isolate z-tooltip flex justify-between overflow-h
     },
     defaultVariants: { theme: "default" },
 });
+const themeIcons = {
+    default: InfoIcon,
+    info: InfoIcon,
+    warn: TriangleAlertIcon,
+    muted: InfoIcon,
+    danger: TriangleAlertIcon,
+    success: CheckCircleIcon,
+    secondary: InfoIcon,
+};
 const NotificationContext = createContext(() => {
     throw new Error("Not implemented");
 });
 export const useNotification = () => useContext(NotificationContext);
-const animatedIndex = {
-    0: { opacity: 1, y: [10, 15], scale: [1, 0.98] },
-    1: { opacity: 1, y: [15, 20], scale: [1, 0.97] },
-    2: { opacity: 1, y: [20, 25], scale: [1, 0.96] },
-    default: { opacity: 1, y: [25, 30], scale: [1, 0.95] },
-};
 function Notification(props) {
     const closable = props.toast.data?.closable ?? true;
-    const variant = props.hover ? "hover" : props.isLast ? "isLast" : "other";
-    const className = variants({ theme: props.toast.data?.theme || "default" });
-    return (<Base.Root toast={props.toast} swipeDirection={["down", "right"]}>
-      <motion.li layout layoutScroll animate={variant} data-index={props.index} initial={{ y: -100, zIndex: -1 }} className="absolute top-0 right-0 w-80 pointer-events-auto text-select" transition={{ type: "spring", mass: 1.2, damping: 30, stiffness: 200 }} exit={{ opacity: [0.9, 0], transition: { opacity: { bounce: 0.25, duration: 0.3 } } }} variants={{
-            isLast: { y: 10, scale: 1, animationDuration: "300ms", opacity: 1 },
-            hover: { y: 0, position: "static", scale: 1, opacity: 1 },
-            other: animatedIndex[props.reversedIndex] || animatedIndex.default,
-        }}>
-        <Base.Content className={className}>
-          <div className="flex flex-col p-4">
-            {props.toast.title ? (<Base.Title className="text-lg font-medium leading-relaxed select-text"/>) : null}
-            <Base.Description className="select-text"/>
-          </div>
-          {closable ? (<Base.Close className="absolute top-2 right-2 p-1 rounded-full transition text-foreground hover:bg-danger/10 hover:text-danger-hover">
-              <XIcon className="size-5"/>
-            </Base.Close>) : null}
-        </Base.Content>
-      </motion.li>
-    </Base.Root>);
+    const loading = props.toast.data?.loading ?? false;
+    const theme = props.toast.data?.theme || "default";
+    const className = variants({ theme });
+    const Icon = loading ? Loader2Icon : themeIcons[theme] || InfoIcon;
+    return (<Base.Root toast={props.toast} swipeDirection="right">
+            <motion.li layout initial={{ opacity: 0, y: -20, scale: 0.95 }} animate={{ opacity: 1, y: 0, scale: 1 }} exit={{ opacity: 0, scale: 0.9, y: -20, transition: { duration: 0.2 } }} transition={{
+            type: "spring",
+            damping: 25,
+            stiffness: 300,
+        }} className="pointer-events-auto w-full list-none">
+                <Base.Content className={css(className, "shadow-lg")}>
+                    <div className="flex items-start gap-3 p-4">
+                        <div className={css("mt-0.5 shrink-0 opacity-80", loading && "animate-spin")}>
+                            <Icon className="size-4"/>
+                        </div>
+
+                        <div className="flex flex-1 flex-col gap-1 overflow-hidden">
+                            {props.toast.title ? <Base.Title className="select-text truncate font-semibold leading-tight tracking-tight"/> : null}
+                            <Base.Description className="line-clamp-2 select-text text-xs font-medium leading-relaxed opacity-90"/>
+                        </div>
+
+                        {closable && !loading ? (<Base.Close className="-mr-1 -mt-1 shrink-0 rounded-lg p-1.5 text-foreground/40 transition hover:bg-foreground/10 hover:text-foreground">
+                                <XIcon className="size-3.5"/>
+                            </Base.Close>) : null}
+                    </div>
+                </Base.Content>
+            </motion.li>
+        </Base.Root>);
 }
 function NotificationsViewport({ max = 5 }) {
     const ref = useRef(null);
     const hover = useHover(ref);
     const toastManager = Base.useToastManager();
-    const toasts = toastManager.toasts.slice(-max);
-    return (<Base.Viewport ref={ref} data-items={toasts.length} style={{
-            justifyContent: "start",
-            height: `${(hover ? toasts.length : Math.min(1, toasts.length)) * 7}rem`,
-        }} className="fixed right-4 top-10 flex w-80 list-none flex-col-reverse items-end gap-4 overflow-y-clip overflow-x-visible data-[items=true]:pb-8 max-sm:top-20">
-      <motion.ol className="flex flex-col gap-4">
-        <AnimatePresence presenceAffectsLayout mode="popLayout">
-          {toasts.reverse().map((toast, index, list) => (<Notification toast={toast} hover={hover} index={index} key={toast.id} isLast={list.length - 1 === index} reversedIndex={list.length - (index + 1)}/>))}
-        </AnimatePresence>
-      </motion.ol>
-    </Base.Viewport>);
+    const allToasts = max ? toastManager.toasts.slice(0, max) : toastManager.toasts;
+    const visibleToasts = hover ? allToasts : allToasts.slice(0, 3);
+    const hiddenCount = allToasts.length - visibleToasts.length;
+    return (<Base.Viewport ref={ref} className="pointer-events-none fixed left-1/2 top-6 z-[100] flex w-full max-w-[380px] -translate-x-1/2 flex-col gap-3 overflow-visible outline-none">
+            <AnimatePresence mode="popLayout" initial={false}>
+                {visibleToasts.map((toast) => (<Notification key={toast.id} toast={toast}/>))}
+            </AnimatePresence>
+
+            {!hover && hiddenCount > 0 && (<motion.div layout initial={{ opacity: 0, y: -10 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, y: -10 }} className="pointer-events-auto cursor-default self-center rounded-full border border-card-border bg-card-background/80 px-3 py-1 text-[10px] font-bold uppercase tracking-wider text-foreground/50 shadow-sm backdrop-blur transition-all hover:bg-card-background hover:text-foreground/80">
+                    +{hiddenCount} more
+                </motion.div>)}
+        </Base.Viewport>);
 }
 function NotificationsInner({ children, max = 5 }) {
     const toastManager = Base.useToastManager();
@@ -73,11 +87,25 @@ function NotificationsInner({ children, max = 5 }) {
         toastManager.toasts.forEach((t) => toastManager.close(t.id));
     }, [toastManager]);
     const notify = useCallback((description, args) => {
+        const data = { theme: args?.theme, closable: args?.closable, loading: args?.loading };
+        if (args?.id) {
+            const existing = toastManager.toasts.find((t) => t.id === args.id);
+            if (existing) {
+                toastManager.update(args.id, {
+                    description,
+                    title: args.title,
+                    timeout: args.timeout,
+                    data,
+                });
+                return { close: () => toastManager.close(args.id), clear };
+            }
+        }
         const id = toastManager.add({
             description,
+            id: args?.id,
             title: args?.title,
             timeout: args?.timeout,
-            data: { theme: args?.theme, closable: args?.closable },
+            data,
         });
         return {
             close: () => toastManager.close(id),
@@ -85,14 +113,14 @@ function NotificationsInner({ children, max = 5 }) {
         };
     }, [toastManager, clear]);
     return (<NotificationContext.Provider value={notify}>
-      {children}
-      <Base.Portal>
-        <NotificationsViewport max={max}/>
-      </Base.Portal>
-    </NotificationContext.Provider>);
+            {children}
+            <Base.Portal>
+                <NotificationsViewport max={max}/>
+            </Base.Portal>
+        </NotificationContext.Provider>);
 }
 export function Notifications({ children, max = 5, timeout = 5000 }) {
     return (<Base.Provider limit={max} timeout={timeout}>
-      <NotificationsInner max={max}>{children}</NotificationsInner>
-    </Base.Provider>);
+            <NotificationsInner max={max}>{children}</NotificationsInner>
+        </Base.Provider>);
 }

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

@@ -1 +1 @@
-{"version":3,"file":"progress.d.ts","sourceRoot":"","sources":["../../../src/components/display/progress.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,eAAe,EAAE,MAAM,OAAO,CAAC;AACxC,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAEpC,KAAK,aAAa,GAAG;IACnB,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAA;AAED,eAAO,MAAM,QAAQ,GAAI,OAAO,eAAe,CAAC,aAAa,CAAC,gCAoB7D,CAAA"}
+{"version":3,"file":"progress.d.ts","sourceRoot":"","sources":["../../../src/components/display/progress.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,eAAe,EAAE,MAAM,OAAO,CAAC;AACxC,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAEpC,KAAK,aAAa,GAAG;IACjB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;CAC1B,CAAC;AAEF,eAAO,MAAM,QAAQ,GAAI,OAAO,eAAe,CAAC,aAAa,CAAC,gCAwB7D,CAAC"}

package/dist/components/display/progress.jsx

@@ -1,13 +1,11 @@
 import { Is } from "sidekicker";
-import { Progress as ProgressBar } from "@base-ui/react/progress";
+import { Progress as RadixProgress } from "@base-ui/react/progress";
 import { css } from "../../lib/dom";
 export const Progress = (props) => {
-    return (<ProgressBar.Root max={props.max} value={props.percent ?? null} style={{ transform: "translateZ(0)", }} className={css("overflow-hidden relative w-full rounded-full h-6 bg-background", props.container)}>
-      <ProgressBar.Indicator style={{ transform: Is.number(props.percent) ? `translateX(-${100 - props.percent}%)` : undefined }} className={css("bg-primary transition-transform ease-in-out size-full duration-500", props.className)}/>
-      {Is.number(props.percent)
-            ? <p className={css("flex absolute inset-0 justify-center items-center w-full font-semibold tabular-nums text-primary-foreground", props.textClassName)}>
-          {props.label ? props.label : `${props.percent} %`}
-        </p>
-            : null}
-    </ProgressBar.Root>);
+    return (<RadixProgress.Root max={props.max} value={props.percent ?? null} style={{ transform: "translateZ(0)" }} className={css("relative h-6 w-full overflow-hidden rounded-full bg-background", props.container)}>
+            <RadixProgress.Indicator style={{ transform: Is.number(props.percent) ? `translateX(-${100 - props.percent}%)` : undefined }} className={css("size-full bg-primary transition-transform duration-500 ease-in-out", props.className)}/>
+            {Is.number(props.percent) ? (<p className={css("absolute inset-0 flex w-full items-center justify-center font-semibold tabular-nums text-primary-foreground", props.textClassName)}>
+                    {props.label ? props.label : `${props.percent} %`}
+                </p>) : null}
+        </RadixProgress.Root>);
 };

package/dist/components/display/shortcut.jsx

@@ -11,7 +11,7 @@ const remap = (x) => {
 };
 export const Shortcut = (props) => {
     const p = props.value.trim().split("+");
-    return (<span className="flex text-sm items-center gap-1">
+    return (<span className="flex items-center gap-1 text-sm">
             {p.map((x, i) => {
             const isLast = p.length - 1 === i;
             return (<Fragment key={`${props.value}-${x}-key-${i}`}>

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

@@ -1 +1 @@
-{"version":3,"file":"skeleton.d.ts","sourceRoot":"","sources":["../../../src/components/display/skeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,aAAa,EAAU,KAAK,WAAW,EAAE,MAAM,OAAO,CAAC;AAIvE,eAAO,MAAM,YAAY,mBAAoE,CAAC;AAE9F,eAAO,MAAM,QAAQ,GAAI,OAAO;IAAE,SAAS,CAAC,EAAE,MAAM,CAAC;IAAC,EAAE,CAAC,EAAE,WAAW,CAAC;IAAC,KAAK,CAAC,EAAE,aAAa,CAAA;CAAE,sBAE9F,CAAC;AAEF,eAAO,MAAM,YAAY,GAAI,OAAO;IAAE,SAAS,CAAC,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,sBAUvE,CAAA"}
+{"version":3,"file":"skeleton.d.ts","sourceRoot":"","sources":["../../../src/components/display/skeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,aAAa,EAAU,KAAK,WAAW,EAAE,MAAM,OAAO,CAAC;AAIvE,eAAO,MAAM,YAAY,mBAAiE,CAAC;AAE3F,eAAO,MAAM,QAAQ,GAAI,OAAO;IAAE,SAAS,CAAC,EAAE,MAAM,CAAC;IAAC,EAAE,CAAC,EAAE,WAAW,CAAC;IAAC,KAAK,CAAC,EAAE,aAAa,CAAA;CAAE,sBAE9F,CAAC;AAEF,eAAO,MAAM,YAAY,GAAI,OAAO;IAAE,SAAS,CAAC,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,sBAQvE,CAAC"}

package/dist/components/display/skeleton.jsx

@@ -1,14 +1,12 @@
 import React, { useRef } from "react";
 import { css } from "../../lib/dom";
 import { Polymorph } from "../core/polymorph";
-export const SkeletonCell = <div className="w-10/12 h-6 rounded-sm animate-pulse bg-muted"/>;
-export const Skeleton = (props) => (<Polymorph {...props} as={props.as || "span"} className={css("block rounded-sm h-8 w-32 animate-pulse bg-muted", props.className)}/>);
+export const SkeletonCell = <div className="h-6 w-10/12 animate-pulse rounded bg-muted"/>;
+export const Skeleton = (props) => (<Polymorph {...props} as={props.as || "span"} className={css("block h-8 w-32 animate-pulse rounded bg-muted", props.className)}/>);
 export const SkeletonList = (props) => {
     const items = useRef(Array.from({ length: props.rows }).map((_, i) => {
         const rand = Math.max(100, Math.random() * 99);
         return <Skeleton key={`skeleton-${rand}-${i}`} style={{ width: `${rand}%` }} as="li"/>;
     }));
-    return (<ul className={css("flex flex-col gap-6", props.className)}>
-      {items.current}
-    </ul>);
+    return <ul className={css("flex flex-col gap-6", props.className)}>{items.current}</ul>;
 };

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,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC;AA+BlH,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;AAiCF,eAAO,MAAM,cAAc,+BAAgC,CAAC;AAE5D,eAAO,MAAM,IAAI,GAAI,gEAAgE,SAAS,sBA0F7F,CAAC;AAEF,eAAO,MAAM,KAAK,GAAI,OAAO,iBAAiB,CAAC;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,WAAW,EAAE,MAAM,CAAA;CAAE,CAAC,sBA0BrF,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,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC;AA+BlH,KAAK,UAAU,GAAG,QAAQ,GAAG,UAAU,GAAG,UAAU,GAAG,OAAO,CAAC;AAE/D,MAAM,MAAM,SAAS,GAAG,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,GAAG;IACrD,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;CAC3B,CAAC;AA2BF,eAAO,MAAM,cAAc,+BAAgC,CAAC;AAE5D,eAAO,MAAM,IAAI,GAAI,gEAAgE,SAAS,sBA6F7F,CAAC;AAEF,eAAO,MAAM,KAAK,GAAI,OAAO,iBAAiB,CAAC;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,WAAW,EAAE,MAAM,CAAA;CAAE,CAAC,sBA0BrF,CAAC"}

package/dist/components/display/step.jsx

@@ -11,17 +11,17 @@ const states = {
     animate: { pathLength: 1, opacity: 1 },
 };
 const ErrorIcon = (props) => (<svg {...props} viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-    <motion.path className="currentColor" initial={states.initial} animate={states.animate} transition={iconTransitions} d="M18 6 6 18"/>
-    <motion.path className="currentColor" initial={states.initial} animate={states.animate} transition={iconTransitions} d="m6 6 12 12"/>
-  </svg>);
+        <motion.path className="currentColor" initial={states.initial} animate={states.animate} transition={iconTransitions} d="M18 6 6 18"/>
+        <motion.path className="currentColor" initial={states.initial} animate={states.animate} transition={iconTransitions} d="m6 6 12 12"/>
+    </svg>);
 const CheckIcon = (props) => (<svg {...props} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={3}>
-    <motion.path d="M5 13l4 4L19 7" strokeLinecap="round" strokeLinejoin="round" animate={states.animate} initial={states.initial} transition={iconTransitions}/>
-  </svg>);
+        <motion.path d="M5 13l4 4L19 7" strokeLinecap="round" strokeLinejoin="round" animate={states.animate} initial={states.initial} transition={iconTransitions}/>
+    </svg>);
 const variants = {
     complete: { scale: 1.25 },
-    active: { scale: 1, transition: { delay: 0, duration: 0.3 } }
+    active: { scale: 1, transition: { delay: 0, duration: 0.3 } },
 };
-const transitions = { duration: 0.6, delay: 0.2, type: "tween", ease: "circOut", };
+const transitions = { duration: 0.6, delay: 0.2, type: "tween", ease: "circOut" };
 const getCurrentStatus = (step, currentStep, status) => {
     if (status === "error")
         return "error";
@@ -65,12 +65,12 @@ export const Step = ({ step, currentStep, status, title, titleClassName, ...prop
         return () => clearTimeout(timer);
     }, [currentStep, context, step]);
     const innerStatus = getCurrentStatus(step, visualCurrentStep, status);
-    const widthPerStep = context?.steps ? 100 / (context?.steps) : undefined;
+    const widthPerStep = context?.steps ? 100 / context?.steps : undefined;
     return (<Fragment>
-      <div className={`h-[2px] w-full xl:block bg-card-border hidden first:hidden ${innerStatus === "active" || innerStatus === "complete" ? "bg-success" : ""}`}/>
-      <motion.button {...props} type="button" data-step={step} animate={innerStatus} className="flex relative justify-center items-center w-auto text-center">
-        <motion.div variants={variants} transition={transitions} className={`hidden xl:block absolute inset-0 rounded-full text-center ${innerStatus === "error" ? "bg-danger" : ""}`}/>
-        <motion.div initial={false} animate={innerStatus} transition={transition} className="flex relative justify-center items-center font-semibold rounded-full size-10 aspect-square" variants={{
+            <div className={`hidden h-[2px] w-full bg-card-border first:hidden xl:block ${innerStatus === "active" || innerStatus === "complete" ? "bg-success" : ""}`}/>
+            <motion.button {...props} type="button" data-step={step} animate={innerStatus} className="relative flex w-auto items-center justify-center text-center">
+                <motion.div variants={variants} transition={transitions} className={`absolute inset-0 hidden rounded-full text-center xl:block ${innerStatus === "error" ? "bg-danger" : ""}`}/>
+                <motion.div initial={false} animate={innerStatus} transition={transition} className="relative flex aspect-square size-10 items-center justify-center rounded-full font-semibold" variants={{
             error: {
                 color: parser("var(--danger-foreground)"),
                 borderColor: parser("var(--danger-hover)"),
@@ -95,17 +95,17 @@ export const Step = ({ step, currentStep, status, title, titleClassName, ...prop
                 backgroundColor: parser("var(--success-DEFAULT)"),
             },
         }}>
-          <div className="flex justify-center items-center">
-            {innerStatus === "complete" ? (<CheckIcon className="size-6 text-primary-foreground"/>) : innerStatus === "error" ? (<ErrorIcon className="size-6 text-danger-foreground"/>) : (<Fragment>
-                <span>{step}</span>
-              </Fragment>)}
-          </div>
-        </motion.div>
-        <header className="flex flex-col justify-start items-start px-2">
-          <h3 className={`h-full whitespace-nowrap flex items-center ${titleClassName}`}>{title}</h3>
-        </header>
-        </motion.button>
-    </Fragment>);
+                    <div className="flex items-center justify-center">
+                        {innerStatus === "complete" ? (<CheckIcon className="size-6 text-primary-foreground"/>) : innerStatus === "error" ? (<ErrorIcon className="size-6 text-danger-foreground"/>) : (<Fragment>
+                                <span>{step}</span>
+                            </Fragment>)}
+                    </div>
+                </motion.div>
+                <header className="flex flex-col items-start justify-start px-2">
+                    <h3 className={`flex h-full items-center whitespace-nowrap ${titleClassName}`}>{title}</h3>
+                </header>
+            </motion.button>
+        </Fragment>);
 };
 export const Steps = (props) => {
     const previousStepRef = useRef(props.currentStep);
@@ -124,8 +124,8 @@ export const Steps = (props) => {
         steps: React.Children.count(props.children),
     };
     return (<StepContext.Provider value={contextValue}>
-      <div className="flex relative flex-col gap-4 justify-center items-start w-full lg:flex-row lg:justify-between lg:items-center">
-        {props.children}
-      </div>
-    </StepContext.Provider>);
+            <div className="relative flex w-full flex-col items-start justify-center gap-4 lg:flex-row lg:items-center lg:justify-between">
+                {props.children}
+            </div>
+        </StepContext.Provider>);
 };

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,OAAO,KAAK,EAAE,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,sBAsFvD,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,sBAGrD,CAAC"}
+{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../../src/components/display/tabs.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,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;AA+BF,eAAO,MAAM,IAAI,GAAI,OAAO,iBAAiB,CAAC,SAAS,CAAC,sBAsFvD,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,sBAGrD,CAAC"}

package/dist/components/display/tabs.jsx

@@ -17,9 +17,7 @@ const getNElement = (elements, currentIndex, direction) => {
         if (!isElementDisabled(element))
             return element;
     }
-    return direction === "backward"
-        ? getNElement(elements, elements.length - 1, "backward")
-        : getNElement(elements, -1, "forward");
+    return direction === "backward" ? getNElement(elements, elements.length - 1, "backward") : getNElement(elements, -1, "forward");
 };
 const moveOn = (ul, direction) => {
     const items = Array.from(ul.querySelectorAll("li"));
@@ -73,15 +71,15 @@ export const Tabs = (props) => {
         }
     };
     return (<Context.Provider value={active}>
-            <Card className={props.className} container={css("pt-0 max-w-full w-full min-w-0", props.container)} header={<header className="overflow-x-auto relative mb-2">
-                        <div className="absolute bottom-0 w-full h-px bg-card-border"/>
+            <Card className={props.className} container={css("pt-0 max-w-full w-full min-w-0", props.container)} header={<header className="relative mb-2 overflow-x-auto">
+                        <div className="absolute bottom-0 h-[1px] w-full bg-card-border"/>
                         <nav className="min-w-0">
-                            <ul onKeyDown={onKeyDown} ref={ref} className="flex overflow-x-auto flex-1 justify-start w-0 min-w-full">
+                            <ul onKeyDown={onKeyDown} ref={ref} className="flex w-0 min-w-full flex-1 justify-start overflow-x-auto">
                                 {items.map((x) => {
                 const inner = x.props;
                 const current = active === inner.id;
                 return (<li data-id={inner.id} data-active={current} key={`tab-header-${inner.id}`} 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" : "")}>
-                                            <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">
+                                            <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">
                                                 {inner.title}
                                             </Polymorph>
                                         </li>);

package/dist/components/display/timeline.jsx

@@ -6,7 +6,7 @@ export const TimelineItem = (props) => (<li data-component="timeline-item" class
         <div className="relative flex items-stretch justify-start space-x-3">{props.children}</div>
     </li>);
 TimelineItem.Icon = function TimelineIcon(props) {
-    return (<header {...props} className={css("flex size-12 items-center justify-center rounded-full bg-primary p-2 text-primary-foreground", props.className)}>
+    return (<header {...props} className={css("flex size-12 items-center justify-center rounded-full bg-primary p-2 text-warn-foreground", props.className)}>
             {props.children}
         </header>);
 };

package/dist/components/floating/command-palette.d.ts

@@ -16,6 +16,7 @@ type CommandShortcutItem = CommandItem<"shortcut", {
     shortcut?: string;
     action: (args: {
         text: string;
+        setText: (state: string) => void;
         setOpen: (state: boolean) => void;
         event: KeyboardEvent | React.MouseEvent | React.KeyboardEvent;
     }) => void | Promise<void>;

package/dist/components/floating/command-palette.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"command-palette.d.ts","sourceRoot":"","sources":["../../../src/components/floating/command-palette.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAc,WAAW,EAAE,MAAM,cAAc,CAAC;AACvD,OAAO,KAAmE,MAAM,OAAO,CAAC;AAQxF,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAKpC,KAAK,SAAS,GAAG;IAAE,IAAI,EAAE,MAAM,CAAA;CAAE,CAAC;AAElC,KAAK,WAAW,CAAC,CAAC,SAAS,MAAM,EAAE,CAAC,SAAS,MAAM,IAAI,CAAC,GAAG;IACzD,IAAI,EAAE,CAAC,CAAC;IACR,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IACzB,IAAI,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAC1B,OAAO,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE,SAAS,KAAK,OAAO,CAAC,GAAG,OAAO,CAAC;CACrD,CAAC;AAEF,KAAK,IAAI,GAAG,MAAM,GAAG,CAAC,CAAC,KAAK,EAAE,SAAS,KAAK,MAAM,CAAC,CAAC;AAEpD,KAAK,mBAAmB,GAAG,WAAW,CACpC,UAAU,EACV;IACE,KAAK,EAAE,IAAI,CAAC;IACZ,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,EAAE,CAAC,IAAI,EAAE;QACb,IAAI,EAAE,MAAM,CAAC;QACb,OAAO,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;QAClC,KAAK,EAAE,aAAa,GAAG,KAAK,CAAC,UAAU,GAAG,KAAK,CAAC,aAAa,CAAC;KAC/D,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;CAC5B,CACF,CAAC;AAEF,KAAK,gBAAgB,GAAG,WAAW,CAAC,OAAO,EAAE;IAAE,KAAK,EAAE,IAAI,CAAC;IAAC,KAAK,EAAE,gBAAgB,EAAE,CAAA;CAAE,CAAC,CAAC;AAEzF,MAAM,MAAM,gBAAgB,GAAG,gBAAgB,GAAG,mBAAmB,CAAC;AA8CtE,MAAM,MAAM,mBAAmB,GAAG;IAChC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,YAAY,CAAC,EAAE,KAAK,CAAC;IACrB,MAAM,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAC5B,QAAQ,EAAE,gBAAgB,EAAE,CAAC;IAC7B,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,kBAAkB,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAC5C,OAAO,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC;QAAE,OAAO,EAAE,gBAAgB,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAChE,IAAI,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,GAAG;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAAC,CAAA;KAAE,CAAC,CAAC;CACjF,CAAC;AAsBF,eAAO,MAAM,cAAc,GAAI,OAAO,mBAAmB,sBA6KxD,CAAC"}
+{"version":3,"file":"command-palette.d.ts","sourceRoot":"","sources":["../../../src/components/floating/command-palette.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAc,WAAW,EAAE,MAAM,cAAc,CAAC;AACvD,OAAO,KAAmE,MAAM,OAAO,CAAC;AAQxF,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAKpC,KAAK,SAAS,GAAG;IAAE,IAAI,EAAE,MAAM,CAAA;CAAE,CAAC;AAElC,KAAK,WAAW,CAAC,CAAC,SAAS,MAAM,EAAE,CAAC,SAAS,MAAM,IAAI,CAAC,GAAG;IACvD,IAAI,EAAE,CAAC,CAAC;IACR,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IACzB,IAAI,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAC1B,OAAO,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE,SAAS,KAAK,OAAO,CAAC,GAAG,OAAO,CAAC;CACvD,CAAC;AAEF,KAAK,IAAI,GAAG,MAAM,GAAG,CAAC,CAAC,KAAK,EAAE,SAAS,KAAK,MAAM,CAAC,CAAC;AAEpD,KAAK,mBAAmB,GAAG,WAAW,CAClC,UAAU,EACV;IACI,KAAK,EAAE,IAAI,CAAC;IACZ,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,EAAE,CAAC,IAAI,EAAE;QACX,IAAI,EAAE,MAAM,CAAC;QACb,OAAO,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;QACjC,OAAO,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;QAClC,KAAK,EAAE,aAAa,GAAG,KAAK,CAAC,UAAU,GAAG,KAAK,CAAC,aAAa,CAAC;KACjE,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;CAC9B,CACJ,CAAC;AAEF,KAAK,gBAAgB,GAAG,WAAW,CAAC,OAAO,EAAE;IAAE,KAAK,EAAE,IAAI,CAAC;IAAC,KAAK,EAAE,gBAAgB,EAAE,CAAA;CAAE,CAAC,CAAC;AAEzF,MAAM,MAAM,gBAAgB,GAAG,gBAAgB,GAAG,mBAAmB,CAAC;AA8CtE,MAAM,MAAM,mBAAmB,GAAG;IAC9B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,YAAY,CAAC,EAAE,KAAK,CAAC;IACrB,MAAM,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAC5B,QAAQ,EAAE,gBAAgB,EAAE,CAAC;IAC7B,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,kBAAkB,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAC5C,OAAO,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC;QAAE,OAAO,EAAE,gBAAgB,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAChE,IAAI,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,GAAG;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAAC,CAAA;KAAE,CAAC,CAAC;CACnF,CAAC;AAgCF,eAAO,MAAM,cAAc,GAAI,OAAO,mBAAmB,sBA0LxD,CAAC"}