@g4rcez/components 4.0.2 → 4.1.2

package/dist/components/display/card.jsx

@@ -0,0 +1,43 @@
+import { InfoIcon } from "@phosphor-icons/react";
+import React from "react";
+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 }) => (<Polymorph {...props} as={as || "div"} data-component="card" className={css("flex w-full flex-col gap-4 rounded-card border border-card-border bg-card-background py-3 shadow-shadow-card", container)}>
+        {title ? (<header data-component="card-title" className={css("mb-2 w-full border-b border-card-border px-6 pb-2 text-xl font-medium", titleClassName)}>
+                {title}
+            </header>) : (header)}
+        <div data-component="card-body" className={css("min-w-full px-6", props.className)}>
+            {loading ? (<div className="flex flex-col gap-4">
+                    <Skeleton className="w-full"/>
+                    <Skeleton className="w-8/12"/>
+                    <Skeleton className="w-10/12"/>
+                    <Skeleton className="w-1/2"/>
+                </div>) : (children)}
+        </div>
+    </Polymorph>);
+Card.Title = ({ as, titleTag, navTag, children, ...props }) => {
+    const Component = (as || "div");
+    const Title = (titleTag || "h2");
+    const Nav = (navTag || "nav");
+    return (<Component {...props} title={Is.string(props.title) ? props.title : undefined} className={css("flex w-full flex-col flex-wrap items-start justify-between gap-base sm:flex-row sm:items-center", props.className)}>
+            <Title className="font-semibold">{props.title}</Title>
+            {children ? (<Nav className="gap-kilo flex flex-col items-start justify-start sm:flex-row sm:items-center sm:justify-end">{children}</Nav>) : null}
+        </Component>);
+};
+export const StatsCard = (props) => {
+    const interactive = props.interactive ?? true;
+    const Icon = props.Icon ?? InfoIcon;
+    return (<Card {...props} title={null} loading={undefined} container="px-0 py-0" className="flex items-center gap-4 px-0">
+            <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" : ""}`}>
+                <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)}>
+                    {<Icon size={48}/>}
+                </div>
+                <div className="flex flex-col justify-center gap-2 py-2">
+                    <p className="text-lg">{props.title}</p>
+                    {props.loading ? <Skeleton className="h-10"/> : <p className="text-4xl font-bold tracking-wide">{props.value}</p>}
+                </div>
+            </div>
+        </Card>);
+};

package/dist/components/display/empty.jsx

@@ -0,0 +1,11 @@
+import { FileIcon } from "@phosphor-icons/react";
+import React from "react";
+import { useTranslations } from "../../hooks/use-translations";
+export const Empty = (props) => {
+    const Icon = props.Icon ?? FileIcon;
+    const translate = useTranslations();
+    return (<div className="flex w-full flex-col items-center justify-center gap-4 px-8 py-12">
+            <Icon size={64} className="text-disabled"/>
+            <p className="text-disabled">{props.message ?? translate.emptyDataMessage}</p>
+        </div>);
+};

package/dist/components/display/list.js

@@ -1,5 +1,5 @@
 import { jsx as e, jsxs as r } from "react/jsx-runtime";
-import { u as w, n as F, d as k, i as C, c as I, F as j, k as A, l as O } from "../../floating-ui.react-QNHG9W4N.js";
+import { u as w, n as F, d as k, j as C, c as I, F as j, l as A, m as O } from "../../floating-ui.react-M2PGXLDp.js";
 import { e as P } from "../../X.es-BJ1O93El.js";
 import $, { useState as L, useId as M, useCallback as z, Fragment as m } from "react";
 import { m as s, A as S } from "../../proxy-BZcQiBrp.js";

package/dist/components/display/list.js.map

@@ -1 +1 @@
-{"version":3,"file":"list.js","sources":["../../../src/components/display/list.tsx"],"sourcesContent":["\"use client\";\nimport {\n    FloatingContext,\n    FloatingFocusManager,\n    FloatingOverlay,\n    FloatingPortal,\n    useClick,\n    useDismiss,\n    useFloating,\n    useInteractions,\n    useRole,\n} from \"@floating-ui/react\";\nimport { AnimatePresence, motion, MotionConfig } from \"motion/react\";\nimport { XIcon } from \"@phosphor-icons/react\";\nimport React, { Fragment, PropsWithChildren, useCallback, useId, useState } from \"react\";\nimport { Label } from \"../../types\";\n\ntype AnimatedItemProps = {\n    title: Label;\n    description: Label;\n    children: Label;\n    avatar?: Label;\n    leading?: React.FC<{ open: () => void }>;\n};\n\ntype IdAnimatedItem = AnimatedItemProps & { id: string };\n\ntype AnimatedListProps = object;\n\ntype FloatItemProps = {\n    setter: () => void;\n    context: FloatingContext;\n    item: IdAnimatedItem | null;\n    refs: { setFloating: any };\n    get: ReturnType<typeof useInteractions>[\"getFloatingProps\"];\n};\n\nconst FloatItem = ({ item, context, setter, get, refs }: FloatItemProps) => (\n    <FloatingPortal>\n        <MotionConfig reducedMotion=\"user\" transition={{ type: \"spring\", damping: 30, stiffness: 350 }}>\n            <AnimatePresence mode=\"wait\" presenceAffectsLayout>\n                {item ? (\n                    <motion.div\n                        key=\"overlay\"\n                        exit={{ opacity: 0 }}\n                        animate={{ opacity: 1 }}\n                        initial={{ opacity: 0 }}\n                        transition={{ type: \"tween\", duration: 0.15, ease: \"easeOut\" }}\n                        className=\"pointer-events-none fixed inset-0 top-0 z-overlay h-screen w-screen bg-floating-overlay/70\"\n                    />\n                ) : null}\n                {item ? (\n                    <FloatingOverlay key=\"card\" lockScroll className=\"absolute inset-0 z-floating flex items-center justify-center\">\n                        <FloatingFocusManager visuallyHiddenDismiss modal closeOnFocusOut context={context}>\n                            <motion.div\n                                layout\n                                layoutId={`item-${item.id}`}\n                                initial={{ opacity: 0.6, scale: 0.98 }}\n                                animate={{ opacity: 1, scale: 1 }}\n                                exit={{ opacity: 0, scale: 0.98 }}\n                                className=\"relative flex h-min w-min min-w-xs flex-col gap-4 rounded-card border border-card-border bg-card-background p-6 py-4 pb-8 shadow-shadow-card\"\n                                ref={refs.setFloating}\n                                {...get()}\n                            >\n                                <nav className=\"absolute right-4 top-1 lg:right-2\">\n                                    <button\n                                        type=\"button\"\n                                        onClick={setter}\n                                        className=\"p-1 opacity-70 transition-colors hover:text-danger hover:opacity-100 focus:text-danger\"\n                                    >\n                                        <XIcon />\n                                    </button>\n                                </nav>\n                                <motion.header layout className=\"flex w-full flex-wrap items-center justify-between gap-2\">\n                                    <h3 className=\"min-w-full text-balance text-2xl font-medium\">{item.title}</h3>\n                                    <p className=\"text-sm leading-snug text-secondary\">{item.description}</p>\n                                </motion.header>\n                                <motion.div layout>{item.children}</motion.div>\n                            </motion.div>\n                        </FloatingFocusManager>\n                    </FloatingOverlay>\n                ) : null}\n            </AnimatePresence>\n        </MotionConfig>\n    </FloatingPortal>\n);\n\nexport const AnimatedList = (props: PropsWithChildren<AnimatedListProps>) => {\n    const [selected, setSelected] = useState<IdAnimatedItem | null>(null);\n    const id = useId();\n    const { context, refs } = useFloating({\n        open: selected !== null,\n        transform: true,\n        onOpenChange: (open) => (open ? undefined : setSelected(null)),\n    });\n    const click = useClick(context);\n    const role = useRole(context, { role: \"dialog\" });\n    const dismiss = useDismiss(context, { escapeKey: true, referencePress: true, outsidePress: true });\n    const { getFloatingProps } = useInteractions([click, role, dismiss]);\n\n    const clear = useCallback(() => {\n        setSelected(null);\n    }, []);\n\n    const items = React.Children.toArray(props.children);\n\n    return (\n        <Fragment>\n            <FloatItem refs={refs} context={context} get={getFloatingProps} item={selected} setter={clear} />\n            <ul role=\"list\">\n                {items.map((x, index) => {\n                    const item: AnimatedItemProps = (x as any).props;\n                    const innerId = `${id}-${index}`;\n                    const setter = () => setSelected({ ...item, id: innerId });\n                    const Leading = item.leading;\n                    return (\n                        <motion.li\n                            layout\n                            key={innerId}\n                            layoutId={`item-${innerId}`}\n                            className={`border-b border-card-border py-2 last:border-transparent`}\n                        >\n                            <motion.div layoutId={`toast-${innerId}`} className=\"relative\">\n                                <div className=\"relative flex items-start space-x-3\">\n                                    <Fragment>\n                                        {item.avatar ? (\n                                            <div>\n                                                <div className=\"relative px-1\">\n                                                    <button onClick={setter} className=\"flex size-10 items-center justify-center ring-primary\">\n                                                        {item.avatar}\n                                                    </button>\n                                                </div>\n                                            </div>\n                                        ) : null}\n                                        <div className=\"min-w-0 flex-1 py-1 text-foreground\">\n                                            <div className=\"flex flex-row flex-nowrap justify-between gap-4\">\n                                                <button\n                                                    onClick={setter}\n                                                    className=\"cursor-pointer text-left transition-all ease-out hover:text-primary\"\n                                                >\n                                                    <h3>{item.title}</h3>\n                                                    <p className=\"text-sm leading-snug text-secondary\">{item.description}</p>\n                                                </button>\n                                                {Leading ? <Leading open={setter} /> : null}\n                                            </div>\n                                        </div>\n                                    </Fragment>\n                                </div>\n                            </motion.div>\n                        </motion.li>\n                    );\n                })}\n            </ul>\n        </Fragment>\n    );\n};\n\nexport const AnimatedListItem = (props: PropsWithChildren<AnimatedItemProps>) => <Fragment>{props.children}</Fragment>;\n"],"names":["FloatItem","item","context","setter","get","refs","jsx","FloatingPortal","MotionConfig","jsxs","AnimatePresence","motion","FloatingOverlay","FloatingFocusManager","XIcon","AnimatedList","props","selected","setSelected","useState","id","useId","useFloating","open","click","useClick","role","useRole","dismiss","useDismiss","getFloatingProps","useInteractions","clear","useCallback","items","React","Fragment","x","index","innerId","Leading","AnimatedListItem"],"mappings":"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"}
+{"version":3,"file":"list.js","sources":["../../../src/components/display/list.tsx"],"sourcesContent":["\"use client\";\nimport {\n    FloatingContext,\n    FloatingFocusManager,\n    FloatingOverlay,\n    FloatingPortal,\n    useClick,\n    useDismiss,\n    useFloating,\n    useInteractions,\n    useRole,\n} from \"@floating-ui/react\";\nimport { AnimatePresence, motion, MotionConfig } from \"motion/react\";\nimport { XIcon } from \"@phosphor-icons/react\";\nimport React, { Fragment, PropsWithChildren, useCallback, useId, useState } from \"react\";\nimport { Label } from \"../../types\";\n\ntype AnimatedItemProps = {\n    title: Label;\n    description: Label;\n    children: Label;\n    avatar?: Label;\n    leading?: React.FC<{ open: () => void }>;\n};\n\ntype IdAnimatedItem = AnimatedItemProps & { id: string };\n\ntype AnimatedListProps = object;\n\ntype FloatItemProps = {\n    setter: () => void;\n    context: FloatingContext;\n    item: IdAnimatedItem | null;\n    refs: { setFloating: (node: HTMLElement | null) => void };\n    get: ReturnType<typeof useInteractions>[\"getFloatingProps\"];\n};\n\nconst FloatItem = ({ item, context, setter, get, refs }: FloatItemProps) => (\n    <FloatingPortal>\n        <MotionConfig reducedMotion=\"user\" transition={{ type: \"spring\", damping: 30, stiffness: 350 }}>\n            <AnimatePresence mode=\"wait\" presenceAffectsLayout>\n                {item ? (\n                    <motion.div\n                        key=\"overlay\"\n                        exit={{ opacity: 0 }}\n                        animate={{ opacity: 1 }}\n                        initial={{ opacity: 0 }}\n                        transition={{ type: \"tween\", duration: 0.15, ease: \"easeOut\" }}\n                        className=\"pointer-events-none fixed inset-0 top-0 z-overlay h-screen w-screen bg-floating-overlay/70\"\n                    />\n                ) : null}\n                {item ? (\n                    <FloatingOverlay key=\"card\" lockScroll className=\"absolute inset-0 z-floating flex items-center justify-center\">\n                        <FloatingFocusManager visuallyHiddenDismiss modal closeOnFocusOut context={context}>\n                            <motion.div\n                                layout\n                                layoutId={`item-${item.id}`}\n                                initial={{ opacity: 0.6, scale: 0.98 }}\n                                animate={{ opacity: 1, scale: 1 }}\n                                exit={{ opacity: 0, scale: 0.98 }}\n                                className=\"relative flex h-min w-min min-w-xs flex-col gap-4 rounded-card border border-card-border bg-card-background p-6 py-4 pb-8 shadow-shadow-card\"\n                                ref={refs.setFloating}\n                                {...get()}\n                            >\n                                <nav className=\"absolute right-4 top-1 lg:right-2\">\n                                    <button\n                                        type=\"button\"\n                                        onClick={setter}\n                                        className=\"p-1 opacity-70 transition-colors hover:text-danger hover:opacity-100 focus:text-danger\"\n                                    >\n                                        <XIcon />\n                                    </button>\n                                </nav>\n                                <motion.header layout className=\"flex w-full flex-wrap items-center justify-between gap-2\">\n                                    <h3 className=\"min-w-full text-balance text-2xl font-medium\">{item.title}</h3>\n                                    <p className=\"text-sm leading-snug text-secondary\">{item.description}</p>\n                                </motion.header>\n                                <motion.div layout>{item.children}</motion.div>\n                            </motion.div>\n                        </FloatingFocusManager>\n                    </FloatingOverlay>\n                ) : null}\n            </AnimatePresence>\n        </MotionConfig>\n    </FloatingPortal>\n);\n\nexport const AnimatedList = (props: PropsWithChildren<AnimatedListProps>) => {\n    const [selected, setSelected] = useState<IdAnimatedItem | null>(null);\n    const id = useId();\n    const { context, refs } = useFloating({\n        open: selected !== null,\n        transform: true,\n        onOpenChange: (open) => (open ? undefined : setSelected(null)),\n    });\n    const click = useClick(context);\n    const role = useRole(context, { role: \"dialog\" });\n    const dismiss = useDismiss(context, { escapeKey: true, referencePress: true, outsidePress: true });\n    const { getFloatingProps } = useInteractions([click, role, dismiss]);\n\n    const clear = useCallback(() => {\n        setSelected(null);\n    }, []);\n\n    const items = React.Children.toArray(props.children);\n\n    return (\n        <Fragment>\n            <FloatItem refs={refs} context={context} get={getFloatingProps} item={selected} setter={clear} />\n            <ul role=\"list\">\n                {items.map((x, index) => {\n                    const item = (x as React.ReactElement<AnimatedItemProps>).props;\n                    const innerId = `${id}-${index}`;\n                    const setter = () => setSelected({ ...item, id: innerId });\n                    const Leading = item.leading;\n                    return (\n                        <motion.li\n                            layout\n                            key={innerId}\n                            layoutId={`item-${innerId}`}\n                            className={`border-b border-card-border py-2 last:border-transparent`}\n                        >\n                            <motion.div layoutId={`toast-${innerId}`} className=\"relative\">\n                                <div className=\"relative flex items-start space-x-3\">\n                                    <Fragment>\n                                        {item.avatar ? (\n                                            <div>\n                                                <div className=\"relative px-1\">\n                                                    <button onClick={setter} className=\"flex size-10 items-center justify-center ring-primary\">\n                                                        {item.avatar}\n                                                    </button>\n                                                </div>\n                                            </div>\n                                        ) : null}\n                                        <div className=\"min-w-0 flex-1 py-1 text-foreground\">\n                                            <div className=\"flex flex-row flex-nowrap justify-between gap-4\">\n                                                <button\n                                                    onClick={setter}\n                                                    className=\"cursor-pointer text-left transition-all ease-out hover:text-primary\"\n                                                >\n                                                    <h3>{item.title}</h3>\n                                                    <p className=\"text-sm leading-snug text-secondary\">{item.description}</p>\n                                                </button>\n                                                {Leading ? <Leading open={setter} /> : null}\n                                            </div>\n                                        </div>\n                                    </Fragment>\n                                </div>\n                            </motion.div>\n                        </motion.li>\n                    );\n                })}\n            </ul>\n        </Fragment>\n    );\n};\n\nexport const AnimatedListItem = (props: PropsWithChildren<AnimatedItemProps>) => <Fragment>{props.children}</Fragment>;\n"],"names":["FloatItem","item","context","setter","get","refs","jsx","FloatingPortal","MotionConfig","jsxs","AnimatePresence","motion","FloatingOverlay","FloatingFocusManager","XIcon","AnimatedList","props","selected","setSelected","useState","id","useId","useFloating","open","click","useClick","role","useRole","dismiss","useDismiss","getFloatingProps","useInteractions","clear","useCallback","items","React","Fragment","x","index","innerId","Leading","AnimatedListItem"],"mappings":"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"}

package/dist/components/display/list.jsx

@@ -0,0 +1,81 @@
+"use client";
+import { FloatingFocusManager, FloatingOverlay, FloatingPortal, useClick, useDismiss, useFloating, useInteractions, useRole, } from "@floating-ui/react";
+import { AnimatePresence, motion, MotionConfig } from "motion/react";
+import { XIcon } from "@phosphor-icons/react";
+import React, { Fragment, useCallback, useId, useState } from "react";
+const FloatItem = ({ item, context, setter, get, refs }) => (<FloatingPortal>
+        <MotionConfig reducedMotion="user" transition={{ type: "spring", damping: 30, stiffness: 350 }}>
+            <AnimatePresence mode="wait" presenceAffectsLayout>
+                {item ? (<motion.div key="overlay" exit={{ opacity: 0 }} animate={{ opacity: 1 }} initial={{ opacity: 0 }} transition={{ type: "tween", duration: 0.15, ease: "easeOut" }} className="pointer-events-none fixed inset-0 top-0 z-overlay h-screen w-screen bg-floating-overlay/70"/>) : null}
+                {item ? (<FloatingOverlay key="card" lockScroll className="absolute inset-0 z-floating flex items-center justify-center">
+                        <FloatingFocusManager visuallyHiddenDismiss modal closeOnFocusOut context={context}>
+                            <motion.div layout layoutId={`item-${item.id}`} initial={{ opacity: 0.6, scale: 0.98 }} animate={{ opacity: 1, scale: 1 }} exit={{ opacity: 0, scale: 0.98 }} className="relative flex h-min w-min min-w-xs flex-col gap-4 rounded-card border border-card-border bg-card-background p-6 py-4 pb-8 shadow-shadow-card" ref={refs.setFloating} {...get()}>
+                                <nav className="absolute right-4 top-1 lg:right-2">
+                                    <button type="button" onClick={setter} className="p-1 opacity-70 transition-colors hover:text-danger hover:opacity-100 focus:text-danger">
+                                        <XIcon />
+                                    </button>
+                                </nav>
+                                <motion.header layout className="flex w-full flex-wrap items-center justify-between gap-2">
+                                    <h3 className="min-w-full text-balance text-2xl font-medium">{item.title}</h3>
+                                    <p className="text-sm leading-snug text-secondary">{item.description}</p>
+                                </motion.header>
+                                <motion.div layout>{item.children}</motion.div>
+                            </motion.div>
+                        </FloatingFocusManager>
+                    </FloatingOverlay>) : null}
+            </AnimatePresence>
+        </MotionConfig>
+    </FloatingPortal>);
+export const AnimatedList = (props) => {
+    const [selected, setSelected] = useState(null);
+    const id = useId();
+    const { context, refs } = useFloating({
+        open: selected !== null,
+        transform: true,
+        onOpenChange: (open) => (open ? undefined : setSelected(null)),
+    });
+    const click = useClick(context);
+    const role = useRole(context, { role: "dialog" });
+    const dismiss = useDismiss(context, { escapeKey: true, referencePress: true, outsidePress: true });
+    const { getFloatingProps } = useInteractions([click, role, dismiss]);
+    const clear = useCallback(() => {
+        setSelected(null);
+    }, []);
+    const items = React.Children.toArray(props.children);
+    return (<Fragment>
+            <FloatItem refs={refs} context={context} get={getFloatingProps} item={selected} setter={clear}/>
+            <ul role="list">
+                {items.map((x, index) => {
+            const item = x.props;
+            const innerId = `${id}-${index}`;
+            const setter = () => setSelected({ ...item, id: innerId });
+            const Leading = item.leading;
+            return (<motion.li layout key={innerId} layoutId={`item-${innerId}`} className={`border-b border-card-border py-2 last:border-transparent`}>
+                            <motion.div layoutId={`toast-${innerId}`} className="relative">
+                                <div className="relative flex items-start space-x-3">
+                                    <Fragment>
+                                        {item.avatar ? (<div>
+                                                <div className="relative px-1">
+                                                    <button onClick={setter} className="flex size-10 items-center justify-center ring-primary">
+                                                        {item.avatar}
+                                                    </button>
+                                                </div>
+                                            </div>) : null}
+                                        <div className="min-w-0 flex-1 py-1 text-foreground">
+                                            <div className="flex flex-row flex-nowrap justify-between gap-4">
+                                                <button onClick={setter} className="cursor-pointer text-left transition-all ease-out hover:text-primary">
+                                                    <h3>{item.title}</h3>
+                                                    <p className="text-sm leading-snug text-secondary">{item.description}</p>
+                                                </button>
+                                                {Leading ? <Leading open={setter}/> : null}
+                                            </div>
+                                        </div>
+                                    </Fragment>
+                                </div>
+                            </motion.div>
+                        </motion.li>);
+        })}
+            </ul>
+        </Fragment>);
+};
+export const AnimatedListItem = (props) => <Fragment>{props.children}</Fragment>;

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

@@ -3,7 +3,7 @@ import { type PropsWithChildren } from "react";
 import { Label } from "../../types";
 declare const variants: (props?: ({
     theme?: "info" | "warn" | "muted" | "danger" | "success" | "secondary" | "default" | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 type NotificationOptions = Partial<{
     id: string;
     title: Label;

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

@@ -1 +1 @@
-{"version":3,"file":"notifications.d.ts","sourceRoot":"","sources":["../../../src/components/display/notifications.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAGlE,OAAO,EAAiB,KAAK,iBAAiB,EAAmC,MAAM,OAAO,CAAC;AAG/F,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAEpC,QAAA,MAAM,QAAQ;;mFAgBb,CAAC;AAYF,KAAK,mBAAmB,GAAG,OAAO,CAAC;IAC/B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,KAAK,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,YAAY,CAAC,OAAO,QAAQ,CAAC,CAAC,OAAO,CAAC,CAAC;CACjD,CAAC,CAAC;AAQH,KAAK,sBAAsB,GAAG;IAAE,KAAK,EAAE,MAAM,IAAI,CAAC;IAAC,KAAK,EAAE,MAAM,IAAI,CAAA;CAAE,CAAC;AAEvE,KAAK,eAAe,GAAG,CAAC,WAAW,EAAE,KAAK,EAAE,IAAI,CAAC,EAAE,mBAAmB,KAAK,sBAAsB,CAAC;AAMlG,eAAO,MAAM,eAAe,uBAAwC,CAAC;AAkDrE,MAAM,MAAM,iBAAiB,GAAG,OAAO,CAAC;IAAE,GAAG,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,MAAM,CAAA;CAAE,CAAC,CAAC;AAsF1E,wBAAgB,aAAa,CAAC,EAAE,QAAQ,EAAE,GAAO,EAAE,OAAc,EAAE,EAAE,iBAAiB,CAAC,iBAAiB,CAAC,+BAMxG"}
+{"version":3,"file":"notifications.d.ts","sourceRoot":"","sources":["../../../src/components/display/notifications.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAGlE,OAAO,EAAiB,KAAK,iBAAiB,EAAmC,MAAM,OAAO,CAAC;AAG/F,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAEpC,QAAA,MAAM,QAAQ;;8EAgBb,CAAC;AAYF,KAAK,mBAAmB,GAAG,OAAO,CAAC;IAC/B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,KAAK,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,YAAY,CAAC,OAAO,QAAQ,CAAC,CAAC,OAAO,CAAC,CAAC;CACjD,CAAC,CAAC;AAQH,KAAK,sBAAsB,GAAG;IAAE,KAAK,EAAE,MAAM,IAAI,CAAC;IAAC,KAAK,EAAE,MAAM,IAAI,CAAA;CAAE,CAAC;AAEvE,KAAK,eAAe,GAAG,CAAC,WAAW,EAAE,KAAK,EAAE,IAAI,CAAC,EAAE,mBAAmB,KAAK,sBAAsB,CAAC;AAMlG,eAAO,MAAM,eAAe,uBAAwC,CAAC;AAkDrE,MAAM,MAAM,iBAAiB,GAAG,OAAO,CAAC;IAAE,GAAG,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,MAAM,CAAA;CAAE,CAAC,CAAC;AAsF1E,wBAAgB,aAAa,CAAC,EAAE,QAAQ,EAAE,GAAO,EAAE,OAAc,EAAE,EAAE,iBAAiB,CAAC,iBAAiB,CAAC,+BAMxG"}

package/dist/components/display/notifications.js

@@ -1,12 +1,12 @@
 import "react/jsx-runtime";
-import "../../index-DJSMaZR4.js";
+import "../../index-DlJ_2RBL.js";
 import "../../CheckCircle.es-C6QWLfk_.js";
-import { w as n, s as N } from "../../notifications-cUdVPs-B.js";
+import { w as n, s as N } from "../../notifications-Dp0ydKJS.js";
 import "../../Info.es-CrZKs4q4.js";
 import "../../Warning.es-D_eI6tLe.js";
 import "../../X.es-BJ1O93El.js";
 import "react";
-import "../../dom-Dl8XH0CK.js";
+import "../../dom-CyQHY7ID.js";
 import "../../proxy-BZcQiBrp.js";
 export {
   n as Notifications,

package/dist/components/display/notifications.jsx

@@ -0,0 +1,126 @@
+"use client";
+import { Toast as Base } from "@base-ui/react/toast";
+import { cva } from "class-variance-authority";
+import { XIcon, CheckCircleIcon, WarningIcon, InfoIcon, CircleNotchIcon } from "@phosphor-icons/react";
+import { AnimatePresence, motion } from "motion/react";
+import { createContext, useCallback, useContext, useRef } from "react";
+import { useHover } from "../../hooks/use-hover";
+import { css } from "../../lib/dom";
+const variants = cva("shadow-notification relative isolate z-tooltip flex w-full flex-col overflow-hidden rounded-xl border bg-card-background text-sm backdrop-blur-md transition-all duration-300", {
+    variants: {
+        theme: {
+            default: "border-card-border text-foreground shadow-black/5",
+            info: "border-alert-info-border bg-alert-info-bg text-alert-info-text",
+            warn: "border-alert-warn-border bg-alert-warn-bg text-alert-warn-text",
+            muted: "border-alert-muted-border bg-alert-muted-bg text-alert-muted-text",
+            danger: "border-alert-danger-border bg-alert-danger-bg text-alert-danger-text",
+            success: "border-alert-success-border bg-alert-success-bg text-alert-success-text",
+            secondary: "border-alert-secondary-border bg-alert-secondary-bg text-alert-secondary-text",
+        },
+    },
+    defaultVariants: { theme: "default" },
+});
+const themeIcons = {
+    default: InfoIcon,
+    info: InfoIcon,
+    warn: WarningIcon,
+    muted: InfoIcon,
+    danger: WarningIcon,
+    success: CheckCircleIcon,
+    secondary: InfoIcon,
+};
+const NotificationContext = createContext(() => {
+    throw new Error("Not implemented");
+});
+export const useNotification = () => useContext(NotificationContext);
+function Notification(props) {
+    const closable = props.toast.data?.closable ?? true;
+    const loading = props.toast.data?.loading ?? false;
+    const theme = props.toast.data?.theme || "default";
+    const className = variants({ theme });
+    const Icon = loading ? CircleNotchIcon : 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 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();
+    const clear = useCallback(() => {
+        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,
+        });
+        return {
+            close: () => toastManager.close(id),
+            clear,
+        };
+    }, [toastManager, clear]);
+    return (<NotificationContext.Provider value={notify}>
+            {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>);
+}

package/dist/components/display/progress.jsx

@@ -0,0 +1,11 @@
+import { Is } from "sidekicker";
+import { Progress as RadixProgress } from "@base-ui/react/progress";
+import { css } from "../../lib/dom";
+export const Progress = (props) => {
+    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

@@ -0,0 +1,23 @@
+import { CommandIcon, OptionIcon } from "@phosphor-icons/react";
+import { Fragment } from "react";
+import { isMac } from "../../lib/combi-keys";
+const remap = (x) => {
+    x = x.trim();
+    if (x === "Alt")
+        return isMac() ? <OptionIcon aria-label="Option" size={12}/> : "Alt";
+    if (x === "Mod")
+        return isMac() ? <CommandIcon aria-label="Command" size={12}/> : "Ctrl";
+    return x;
+};
+export const Shortcut = (props) => {
+    const p = props.value.trim().split("+");
+    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}`}>
+                        <kbd aria-label={x}>{remap(x)}</kbd>
+                        {isLast ? null : <span>+</span>}
+                    </Fragment>);
+        })}
+        </span>);
+};

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,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"}
+{"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;AAKvE,eAAO,MAAM,YAAY,mBAExB,CAAC;AAEF,eAAO,MAAM,QAAQ,GAAI,OAAO;IAAE,SAAS,CAAC,EAAE,MAAM,CAAC;IAAC,EAAE,CAAC,EAAE,WAAW,CAAC;IAAC,KAAK,CAAC,EAAE,aAAa,CAAA;CAAE,sBAY9F,CAAC;AAEF,eAAO,MAAM,YAAY,GAAI,OAAO;IAAE,SAAS,CAAC,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,sBAavE,CAAC"}

package/dist/components/display/skeleton.jsx

@@ -0,0 +1,19 @@
+import React, { useRef } from "react";
+import { useTranslations } from "../../hooks/use-translations";
+import { css } from "../../lib/dom";
+import { Polymorph } from "../core/polymorph";
+export const SkeletonCell = (<div role="status" aria-busy="true" aria-label="Loading content" className="h-6 w-10/12 animate-pulse rounded bg-muted"/>);
+export const Skeleton = (props) => {
+    const t = useTranslations();
+    return (<Polymorph {...props} role="status" aria-busy="true" aria-label={t.skeletonLoading} as={props.as || "span"} className={css("block h-8 w-32 animate-pulse rounded bg-muted", props.className)}/>);
+};
+export const SkeletonList = (props) => {
+    const t = useTranslations();
+    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 role="status" aria-busy="true" aria-label={t.skeletonLoading} className={css("flex flex-col gap-6", props.className)}>
+            {items.current}
+        </ul>);
+};

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

@@ -1 +1 @@
-{"version":3,"file":"spinner.d.ts","sourceRoot":"","sources":["../../../src/components/display/spinner.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,OAAO,GAAI,OAAO;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,gCASpD,CAAC;AAEF,eAAO,MAAM,OAAO,mCAMnB,CAAC"}
+{"version":3,"file":"spinner.d.ts","sourceRoot":"","sources":["../../../src/components/display/spinner.tsx"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO,GAAI,OAAO;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,gCAapD,CAAC;AAEF,eAAO,MAAM,OAAO,mCAMnB,CAAC"}

package/dist/components/display/spinner.jsx

@@ -0,0 +1,11 @@
+import { useTranslations } from "../../hooks/use-translations";
+import { css } from "../../lib/dom";
+export const Spinner = (props) => {
+    const t = useTranslations();
+    return (<span role="status" aria-live="polite" aria-label={t.spinnerLoading} className={css("box-border inline-block aspect-square size-12 animate-spin rounded-full border-4 border-background border-b-primary", props.className)}/>);
+};
+export const Loading = () => {
+    return (<div className="flex h-full w-full items-center justify-center p-12">
+            <Spinner />
+        </div>);
+};

package/dist/components/display/stats.js

@@ -1,5 +1,5 @@
 import { jsxs as a, jsx as e } from "react/jsx-runtime";
-import { c as d } from "../../dom-Dl8XH0CK.js";
+import { c as d } from "../../dom-CyQHY7ID.js";
 const i = (r) => /* @__PURE__ */ a("div", { className: "divide-y divide-card-border rounded-card border border-card-border bg-card-background shadow-shadow-card", children: [
   /* @__PURE__ */ a("header", { className: "flex items-start gap-4 p-6", children: [
     /* @__PURE__ */ e("div", { className: d("flex aspect-square size-10 items-center justify-center rounded-card bg-primary p-8", r.iconContainer), children: /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(r.Icon, { className: "aspect-square size-10 text-primary-foreground" }) }) }),

package/dist/components/display/stats.jsx

@@ -0,0 +1,20 @@
+import React from "react";
+import { css } from "../../lib/dom";
+export const Stats = (props) => {
+    return (<div className="divide-y divide-card-border rounded-card border border-card-border bg-card-background shadow-shadow-card">
+            <header className="flex items-start gap-4 p-6">
+                <div className={css("flex aspect-square size-10 items-center justify-center rounded-card bg-primary p-8", props.iconContainer)}>
+                    <div>
+                        <props.Icon className="aspect-square size-10 text-primary-foreground"/>
+                    </div>
+                </div>
+                <div className="flex flex-col gap-1">
+                    <header>
+                        <h3 className="text-base leading-none">{props.title}</h3>
+                    </header>
+                    <p className="text-4xl font-semibold">{props.children}</p>
+                </div>
+            </header>
+            {props.footer ? <footer className="px-6 py-2">{props.footer}</footer> : null}
+        </div>);
+};

package/dist/components/display/step.jsx

@@ -0,0 +1,131 @@
+"use client";
+import { motion } from "motion/react";
+import React, { createContext, Fragment, useContext, useEffect, useRef, useState } from "react";
+import { useColorParser } from "../../hooks/use-color-parser";
+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) => (<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>);
+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>);
+const variants = {
+    complete: { scale: 1.25 },
+    active: { scale: 1, transition: { delay: 0, duration: 0.3 } },
+};
+const transitions = { duration: 0.6, delay: 0.2, type: "tween", ease: "circOut" };
+const getCurrentStatus = (step, currentStep, status) => {
+    if (status === "error")
+        return "error";
+    if (currentStep === step)
+        return "active";
+    if (currentStep < step)
+        return "inactive";
+    return "complete";
+};
+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 (!context) {
+            setVisualCurrentStep(currentStep);
+            return;
+        }
+        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);
+    const widthPerStep = context?.steps ? 100 / context?.steps : undefined;
+    return (<Fragment>
+            <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-medium" variants={{
+            error: {
+                color: parser("var(--danger-foreground)"),
+                borderColor: parser("var(--danger-hover)"),
+                backgroundColor: parser("var(--danger-DEFAULT)"),
+            },
+            inactive: {
+                transition,
+                color: parser("var(--disabled)"),
+                borderColor: parser("var(--card-border)"),
+                backgroundColor: parser("var(--background)"),
+            },
+            active: {
+                transition,
+                color: parser("var(--primary-foreground)"),
+                borderColor: parser("var(--primary-DEFAULT)"),
+                backgroundColor: parser("var(--primary-DEFAULT)"),
+            },
+            complete: {
+                transition,
+                color: parser("var(--success-foreground)"),
+                borderColor: parser("var(--success-DEFAULT)"),
+                backgroundColor: parser("var(--success-DEFAULT)"),
+            },
+        }}>
+                    <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 font-normal ${titleClassName}`}>{title}</h3>
+                </header>
+            </motion.button>
+        </Fragment>);
+};
+export const Steps = (props) => {
+    const previousStepRef = useRef(props.currentStep);
+    const [previousStep, setPreviousStep] = useState(props.currentStep);
+    useEffect(() => {
+        previousStepRef.current = previousStep;
+        const timer = setTimeout(() => {
+            setPreviousStep(props.currentStep);
+        }, PROGRESS_BAR_DURATION * 1000);
+        return () => clearTimeout(timer);
+    }, [props.currentStep, previousStep]);
+    const contextValue = {
+        currentStep: props.currentStep,
+        previousStep: previousStepRef.current,
+        progressBarDuration: PROGRESS_BAR_DURATION,
+        steps: React.Children.count(props.children),
+    };
+    return (<StepContext.Provider value={contextValue}>
+            <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

@@ -19,6 +19,6 @@ export type TabProps = CommonTabProps & ({
     label: string;
     title: Omit<Label, string>;
 });
-export declare const Tab: (props: PropsWithChildren<TabProps>) => React.JSX.Element;
+export declare const Tab: (props: PropsWithChildren<TabProps>) => React.JSX.Element | null;
 export {};
 //# sourceMappingURL=tabs.d.ts.map