@g4rcez/components 2.0.32 → 2.0.34

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 "lucide-react";
+import React, { Fragment, useCallback, useId, useState } from "react";
+const FloatItem = ({ item, context, setter, get, refs }) => (<FloatingPortal>
+        <MotionConfig reducedMotion="user" transition={{ type: "tween", stiffness: 25, duration: 0.3 }}>
+            <AnimatePresence presenceAffectsLayout>
+                {item ? (<motion.div exit={{ opacity: 0 }} animate={{ opacity: 1 }} initial={{ opacity: 0 }} className="pointer-events-none fixed inset-0 top-0 z-overlay h-screen w-screen bg-floating-overlay/70"/>) : null}
+                {item ? (<FloatingOverlay 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}`} 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>
+                                <header 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>
+                                </header>
+                                {item.children}
+                            </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

@@ -20,6 +20,6 @@ export type NotificationProps = Partial<{
     max: number;
     timeout: number;
 }>;
-export declare function Notifications({ children, max, timeout }: PropsWithChildren<NotificationProps>): import("react/jsx-runtime").JSX.Element;
+export declare function Notifications({ children, max, timeout }: PropsWithChildren<NotificationProps>): import("react").JSX.Element;
 export {};
 //# sourceMappingURL=notifications.d.ts.map

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":"AACA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAIlE,OAAO,EAAiB,KAAK,iBAAiB,EAAmC,MAAM,OAAO,CAAC;AAE/F,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAEpC,QAAA,MAAM,QAAQ;;mFAgBb,CAAC;AAEF,KAAK,mBAAmB,GAAG,OAAO,CAAC;IACjC,KAAK,EAAE,KAAK,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,EAAE,YAAY,CAAC,OAAO,QAAQ,CAAC,CAAC,OAAO,CAAC,CAAC;CAC/C,CAAC,CAAC;AAIH,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;AAwDrE,MAAM,MAAM,iBAAiB,GAAG,OAAO,CAAC;IAAE,GAAG,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,MAAM,CAAA;CAAE,CAAC,CAAC;AAqE1E,wBAAgB,aAAa,CAAC,EAAE,QAAQ,EAAE,GAAO,EAAE,OAAc,EAAE,EAAE,iBAAiB,CAAC,iBAAiB,CAAC,2CAMxG"}
+{"version":3,"file":"notifications.d.ts","sourceRoot":"","sources":["../../../src/components/display/notifications.tsx"],"names":[],"mappings":"AACA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAIlE,OAAO,EAAiB,KAAK,iBAAiB,EAAmC,MAAM,OAAO,CAAC;AAE/F,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAEpC,QAAA,MAAM,QAAQ;;mFAgBb,CAAC;AAEF,KAAK,mBAAmB,GAAG,OAAO,CAAC;IACjC,KAAK,EAAE,KAAK,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,EAAE,YAAY,CAAC,OAAO,QAAQ,CAAC,CAAC,OAAO,CAAC,CAAC;CAC/C,CAAC,CAAC;AAIH,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;AAwDrE,MAAM,MAAM,iBAAiB,GAAG,OAAO,CAAC;IAAE,GAAG,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,MAAM,CAAA;CAAE,CAAC,CAAC;AAqE1E,wBAAgB,aAAa,CAAC,EAAE,QAAQ,EAAE,GAAO,EAAE,OAAc,EAAE,EAAE,iBAAiB,CAAC,iBAAiB,CAAC,+BAMxG"}

package/dist/components/display/{notifications.js → notifications.jsx}

@@ -1,5 +1,4 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 import { XIcon } from "lucide-react";
 import { AnimatePresence, motion } from "motion/react";
@@ -34,21 +33,39 @@ 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 (_jsx(Base.Root, { toast: props.toast, swipeDirection: ["down", "right"], children: _jsx(motion.li, { layout: true, layoutScroll: true, animate: variant, "data-index": props.index, initial: { y: -100, zIndex: -1 }, className: "absolute top-0 right-0 w-80 pointer-events-auto text-select", 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,
-            }, transition: { type: "spring", mass: 1.2, damping: 30, stiffness: 200 }, exit: { opacity: [0.9, 0], transition: { opacity: { bounce: 0.25, duration: 0.3 } } }, children: _jsxs(Base.Content, { className: className, children: [_jsxs("div", { className: "flex flex-col p-4", children: [props.toast.title ? (_jsx(Base.Title, { className: "text-lg font-medium leading-relaxed select-text truncate" })) : null, _jsx(Base.Description, { className: "select-text truncate" })] }), closable ? (_jsx(Base.Close, { className: "absolute top-2 right-2 p-1 rounded-full transition text-foreground hover:bg-danger/10 hover:text-danger-hover", children: _jsx(XIcon, { className: "size-5" }) })) : null] }) }) }));
+    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" 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,
+        }} transition={{ type: "spring", mass: 1.2, damping: 30, stiffness: 200 }} exit={{ opacity: [0.9, 0], transition: { opacity: { bounce: 0.25, duration: 0.3 } } }}>
+        <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 truncate"/>) : null}
+            <Base.Description className="select-text truncate"/>
+          </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>);
 }
 function NotificationsViewport({ max = 5 }) {
     const ref = useRef(null);
     const hover = useHover(ref);
     const toastManager = Base.useToastManager();
     const toasts = toastManager.toasts.slice(-max);
-    return (_jsx(Base.Viewport, { ref: ref, "data-items": toasts.length, style: {
+    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", children: _jsx(motion.ol, { className: "flex flex-col gap-4", children: _jsx(AnimatePresence, { presenceAffectsLayout: true, mode: "popLayout", children: toasts.reverse().map((toast, index, list) => (_jsx(Notification, { toast: toast, hover: hover, index: index, isLast: list.length - 1 === index, reversedIndex: list.length - (index + 1) }, toast.id))) }) }) }));
+        }} 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>);
 }
 function NotificationsInner({ children, max = 5 }) {
     const toastManager = Base.useToastManager();
@@ -67,8 +84,15 @@ function NotificationsInner({ children, max = 5 }) {
             clear,
         };
     }, [toastManager, clear]);
-    return (_jsxs(NotificationContext.Provider, { value: notify, children: [children, _jsx(Base.Portal, { children: _jsx(NotificationsViewport, { max: max }) })] }));
+    return (<NotificationContext.Provider value={notify}>
+      {children}
+      <Base.Portal>
+        <NotificationsViewport max={max}/>
+      </Base.Portal>
+    </NotificationContext.Provider>);
 }
 export function Notifications({ children, max = 5, timeout = 5000 }) {
-    return (_jsx(Base.Provider, { limit: max, timeout: timeout, children: _jsx(NotificationsInner, { max: max, children: children }) }));
+    return (<Base.Provider limit={max} timeout={timeout}>
+      <NotificationsInner max={max}>{children}</NotificationsInner>
+    </Base.Provider>);
 }

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

@@ -8,6 +8,6 @@ type ProgressProps = {
     className?: string;
     textClassName?: string;
 };
-export declare const Progress: (props: PropsWithoutRef<ProgressProps>) => import("react/jsx-runtime").JSX.Element;
+export declare const Progress: (props: PropsWithoutRef<ProgressProps>) => import("react").JSX.Element;
 export {};
 //# sourceMappingURL=progress.d.ts.map

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,4CAoB7D,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;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"}

package/dist/components/display/progress.jsx

@@ -0,0 +1,13 @@
+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("overflow-hidden relative w-full rounded-full h-6 bg-background", props.container)}>
+      <RadixProgress.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}
+    </RadixProgress.Root>);
+};

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

@@ -1,4 +1,4 @@
 export declare const Shortcut: (props: {
     value: string;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("react").JSX.Element;
 //# sourceMappingURL=shortcut.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"shortcut.d.ts","sourceRoot":"","sources":["../../../src/components/display/shortcut.tsx"],"names":[],"mappings":"AAWA,eAAO,MAAM,QAAQ,GAAI,OAAO;IAAE,KAAK,EAAE,MAAM,CAAA;CAAE,4CAehD,CAAC"}
+{"version":3,"file":"shortcut.d.ts","sourceRoot":"","sources":["../../../src/components/display/shortcut.tsx"],"names":[],"mappings":"AAWA,eAAO,MAAM,QAAQ,GAAI,OAAO;IAAE,KAAK,EAAE,MAAM,CAAA;CAAE,gCAehD,CAAC"}

package/dist/components/display/shortcut.jsx

@@ -0,0 +1,23 @@
+import { CommandIcon, OptionIcon } from "lucide-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={14}/> : "Alt";
+    if (x === "Mod")
+        return isMac() ? <CommandIcon aria-label="Command" size={14}/> : "Ctrl";
+    return x;
+};
+export const Shortcut = (props) => {
+    const p = props.value.trim().split("+");
+    return (<span className="flex items-center gap-1">
+            {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

@@ -1,12 +1,12 @@
-import { CSSProperties, type ElementType } from "react";
-export declare const SkeletonCell: import("react/jsx-runtime").JSX.Element;
+import React, { CSSProperties, type ElementType } from "react";
+export declare const SkeletonCell: React.JSX.Element;
 export declare const Skeleton: (props: {
     className?: string;
     as?: ElementType;
     style?: CSSProperties;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => React.JSX.Element;
 export declare const SkeletonList: (props: {
     className?: string;
     rows: number;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => React.JSX.Element;
 //# sourceMappingURL=skeleton.d.ts.map

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,OAAc,EAAE,aAAa,EAAU,KAAK,WAAW,EAAE,MAAM,OAAO,CAAC;AAIvE,eAAO,MAAM,YAAY,yCAAiE,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,4CAE9F,CAAC;AAEF,eAAO,MAAM,YAAY,GAAI,OAAO;IAAE,SAAS,CAAC,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,4CAUvE,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,sBAUvE,CAAA"}

package/dist/components/display/skeleton.jsx

@@ -0,0 +1,14 @@
+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 animate-pulse bg-muted"/>;
+export const Skeleton = (props) => (<Polymorph {...props} as={props.as || "span"} className={css("block rounded h-8 w-32 animate-pulse 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>);
+};

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

@@ -1,5 +1,5 @@
 export declare const Spinner: (props: {
     className?: string;
-}) => import("react/jsx-runtime").JSX.Element;
-export declare const Loading: () => import("react/jsx-runtime").JSX.Element;
+}) => import("react").JSX.Element;
+export declare const Loading: () => import("react").JSX.Element;
 //# sourceMappingURL=spinner.d.ts.map

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,4CASpD,CAAC;AAEF,eAAO,MAAM,OAAO,+CAMnB,CAAC"}
+{"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"}

package/dist/components/display/spinner.jsx

@@ -0,0 +1,7 @@
+import { css } from "../../lib/dom";
+export const Spinner = (props) => (<span aria-busy="true" aria-description="Carregando..." 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.d.ts

@@ -8,5 +8,5 @@ export type StatsProps = {
         className: string;
     }>;
 };
-export declare const Stats: (props: React.PropsWithChildren<StatsProps>) => import("react/jsx-runtime").JSX.Element;
+export declare const Stats: (props: React.PropsWithChildren<StatsProps>) => React.JSX.Element;
 //# sourceMappingURL=stats.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"stats.d.ts","sourceRoot":"","sources":["../../../src/components/display/stats.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAEpC,MAAM,MAAM,UAAU,GAAG;IACrB,KAAK,EAAE,KAAK,CAAC;IACb,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,MAAM,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAC5B,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC;QAAE,SAAS,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;CACzC,CAAC;AAEF,eAAO,MAAM,KAAK,GAAI,OAAO,KAAK,CAAC,iBAAiB,CAAC,UAAU,CAAC,4CAmB/D,CAAC"}
+{"version":3,"file":"stats.d.ts","sourceRoot":"","sources":["../../../src/components/display/stats.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAEpC,MAAM,MAAM,UAAU,GAAG;IACrB,KAAK,EAAE,KAAK,CAAC;IACb,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,MAAM,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAC5B,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC;QAAE,SAAS,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;CACzC,CAAC;AAEF,eAAO,MAAM,KAAK,GAAI,OAAO,KAAK,CAAC,iBAAiB,CAAC,UAAU,CAAC,sBAmB/D,CAAC"}

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.d.ts

@@ -14,10 +14,10 @@ export type StepProps = React.ComponentProps<"button"> & {
     titleClassName?: string;
 };
 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 Step: ({ step, currentStep, status, title, titleClassName, ...props }: StepProps) => React.JSX.Element;
 export declare const Steps: (props: PropsWithChildren<{
     steps: number;
     currentStep: number;
-}>) => import("react/jsx-runtime").JSX.Element;
+}>) => React.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,EAA2C,iBAAiB,EAA2C,MAAM,OAAO,CAAC;AAEnI,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAMpC,KAAK,gBAAgB,GAAG;IAAE,WAAW,EAAE,MAAM,CAAC;IAAC,YAAY,EAAE,MAAM,CAAC;IAAC,mBAAmB,EAAE,MAAM,CAAA;CAAE,CAAC;AA+BnG,KAAK,UAAU,GAAG,QAAQ,GAAG,UAAU,GAAG,UAAU,GAAG,OAAO,CAAC;AAE/D,MAAM,MAAM,SAAS,GAAG,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,GAAG;IACvD,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB,CAAC;AAoCF,eAAO,MAAM,cAAc,+BAAgC,CAAC;AAE5D,eAAO,MAAM,IAAI,GAAI,gEAAgE,SAAS,4CAqF7F,CAAC;AAEF,eAAO,MAAM,KAAK,GAAI,OAAO,iBAAiB,CAAC;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,WAAW,EAAE,MAAM,CAAA;CAAE,CAAC,4CA2CrF,CAAC"}
+{"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;AAiCF,eAAO,MAAM,cAAc,+BAAgC,CAAC;AAE5D,eAAO,MAAM,IAAI,GAAI,gEAAgE,SAAS,sBA4F7F,CAAC;AAEF,eAAO,MAAM,KAAK,GAAI,OAAO,iBAAiB,CAAC;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,WAAW,EAAE,MAAM,CAAA;CAAE,CAAC,sBAyBrF,CAAC"}

package/dist/components/display/step.jsx

@@ -0,0 +1,133 @@
+"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);
+    return (<Fragment>
+      <div className={`h-[2px] w-full lg: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 lg: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 w-10 h-10 font-semibold rounded-full" 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 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>
+        {title && innerStatus === "active" ?
+            <header className="flex flex-col justify-start items-start px-2">
+            <h3 className={`h-full flex items-center ${titleClassName}`}>{title}</h3>
+          </header> :
+            <header className="flex flex-col justify-start items-start px-2 lg:hidden">
+            <h3 className={`h-full whitespace-nowrap flex items-center ${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,
+    };
+    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>);
+};

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

@@ -1,4 +1,4 @@
-import { PropsWithChildren } from "react";
+import React, { PropsWithChildren } from "react";
 import { Label } from "../../types";
 import { CardProps } from "./card";
 export type TabsProps = Omit<CardProps<"div">, "onChange"> & {
@@ -7,7 +7,7 @@ export type TabsProps = Omit<CardProps<"div">, "onChange"> & {
     className?: string;
     onChange?: (id: string) => void;
 };
-export declare const Tabs: (props: PropsWithChildren<TabsProps>) => import("react/jsx-runtime").JSX.Element;
+export declare const Tabs: (props: PropsWithChildren<TabsProps>) => React.JSX.Element;
 type CommonTabProps = {
     id: string;
     disabled?: boolean;
@@ -19,6 +19,6 @@ export type TabProps = CommonTabProps & ({
     label: string;
     title: Omit<Label, string>;
 });
-export declare const Tab: (props: PropsWithChildren<TabProps>) => import("react/jsx-runtime").JSX.Element;
+export declare const Tab: (props: PropsWithChildren<TabProps>) => React.JSX.Element;
 export {};
 //# sourceMappingURL=tabs.d.ts.map

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;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"}
+{"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"}

package/dist/components/display/{tabs.js → tabs.jsx}

@@ -1,5 +1,4 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { createContext, Fragment, useContext, useEffect, useRef } from "react";
 import { Is } from "sidekicker";
 import { useReactive } from "../../hooks/use-reactive";
@@ -73,14 +72,29 @@ 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: "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 py-4 px-10 w-full whitespace-nowrap disabled:cursor-not-allowed", children: inner.title }) }, `tab-header-${inner.id}`));
-                            }) }) })] }), children: props.children }) }));
+    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-[1px] 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">
+                                {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">
+                                                {inner.title}
+                                            </Polymorph>
+                                        </li>);
+            })}
+                            </ul>
+                        </nav>
+                    </header>}>
+                {props.children}
+            </Card>
+        </Context.Provider>);
 };
 const useTabs = () => useContext(Context);
 export const Tab = (props) => {
     const active = useTabs();
-    return _jsx(Fragment, { children: props.id === active ? props.children : null });
+    return <Fragment>{props.id === active ? props.children : null}</Fragment>;
 };

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

@@ -1,10 +1,10 @@
-import { ComponentProps, ElementType, PropsWithChildren } from "react";
+import React, { ComponentProps, ElementType, PropsWithChildren } from "react";
 import { PolymorphicProps } from "../core/polymorph";
 export declare const TimelineItem: {
-    (props: PropsWithChildren): import("react/jsx-runtime").JSX.Element;
-    Icon(props: PropsWithChildren<ComponentProps<"header">>): import("react/jsx-runtime").JSX.Element;
-    Body<T extends ElementType = "section">(props: PropsWithChildren<PolymorphicProps<object, T>>): import("react/jsx-runtime").JSX.Element;
-    Right<T extends ElementType = "button">(props: PolymorphicProps<object, T>): import("react/jsx-runtime").JSX.Element;
+    (props: PropsWithChildren): React.JSX.Element;
+    Icon(props: PropsWithChildren<ComponentProps<"header">>): React.JSX.Element;
+    Body<T extends ElementType = "section">(props: PropsWithChildren<PolymorphicProps<object, T>>): React.JSX.Element;
+    Right<T extends ElementType = "button">(props: PolymorphicProps<object, T>): React.JSX.Element;
 };
-export declare const Timeline: (props: PropsWithChildren) => import("react/jsx-runtime").JSX.Element;
+export declare const Timeline: (props: PropsWithChildren) => React.JSX.Element;
 //# sourceMappingURL=timeline.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"timeline.d.ts","sourceRoot":"","sources":["../../../src/components/display/timeline.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,cAAc,EAAE,WAAW,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE9E,OAAO,EAAa,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAEhE,eAAO,MAAM,YAAY;YAAW,iBAAiB;gBAOJ,iBAAiB,CAAC,cAAc,CAAC,QAAQ,CAAC,CAAC;SAW9C,CAAC,SAAS,WAAW,qBAAqB,iBAAiB,CAAC,gBAAgB,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC;UAQtF,CAAC,SAAS,WAAW,oBAAoB,gBAAgB,CAAC,MAAM,EAAE,CAAC,CAAC;CArBnH,CAAC;AA6BF,eAAO,MAAM,QAAQ,GAAI,OAAO,iBAAiB,4CAIhD,CAAC"}
+{"version":3,"file":"timeline.d.ts","sourceRoot":"","sources":["../../../src/components/display/timeline.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,cAAc,EAAE,WAAW,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE9E,OAAO,EAAa,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAEhE,eAAO,MAAM,YAAY;YAAW,iBAAiB;gBAOJ,iBAAiB,CAAC,cAAc,CAAC,QAAQ,CAAC,CAAC;SAW9C,CAAC,SAAS,WAAW,qBAAqB,iBAAiB,CAAC,gBAAgB,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC;UAQtF,CAAC,SAAS,WAAW,oBAAoB,gBAAgB,CAAC,MAAM,EAAE,CAAC,CAAC;CArBnH,CAAC;AA6BF,eAAO,MAAM,QAAQ,GAAI,OAAO,iBAAiB,sBAIhD,CAAC"}