@g4rcez/components 5.0.1 → 5.0.3

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

@@ -0,0 +1,16 @@
+import { PropsWithoutRef } from "react";
+import { Label } from "../../types";
+type ProgressProps = {
+    min?: number;
+    max?: number;
+    value?: number;
+    /** @deprecated use value */
+    percent?: number;
+    label?: Label;
+    className?: string;
+    container?: string;
+    textClassName?: string;
+};
+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

@@ -0,0 +1 @@
+{"version":3,"file":"progress.d.ts","sourceRoot":"","sources":["../../../src/components/display/progress.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,eAAe,EAAE,MAAM,OAAO,CAAC;AACxC,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAEpC,KAAK,aAAa,GAAG;IACjB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4BAA4B;IAC5B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;CAC1B,CAAC;AAIF,eAAO,MAAM,QAAQ,GAAI,OAAO,eAAe,CAAC,aAAa,CAAC,gCA6B7D,CAAC"}

package/dist/components/display/progress.js

@@ -0,0 +1,3 @@
+"use client";
+import { t as e } from "../../progress-8LO5gWLp.js";
+export { e as Progress };

package/dist/components/display/progress.jsx

@@ -0,0 +1,19 @@
+"use client";
+import { Is } from "sidekicker";
+import { Progress as RadixProgress } from "@base-ui/react/progress";
+import { css } from "../../lib/dom";
+const clamp = (n, min, max) => Math.min(Math.max(n, min), max);
+export const Progress = (props) => {
+    const min = props.min ?? 0;
+    const max = props.max ?? 100;
+    const range = max - min;
+    const rawValue = props.value ?? props.percent;
+    const hasValue = Is.number(rawValue) && range > 0;
+    const percent = hasValue ? clamp(((rawValue - min) / range) * 100, 0, 100) : null;
+    return (<RadixProgress.Root min={min} max={max} value={hasValue ? rawValue : null} style={{ transform: "translateZ(0)" }} className={css("relative h-progress-track-h w-full overflow-hidden rounded-progress-radius bg-background", props.container)}>
+            <RadixProgress.Indicator className={css("h-full bg-primary transition-[width] duration-500 ease-in-out", props.className)}/>
+            {percent !== null ? (<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 : `${Math.round(percent)} %`}
+                </p>) : null}
+        </RadixProgress.Root>);
+};

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

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

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

@@ -0,0 +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,gCAehD,CAAC"}

package/dist/components/display/shortcut.js

@@ -0,0 +1,2 @@
+import { t as e } from "../../shortcut-CQCmgmlU.js";
+export { e as Shortcut };

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-shortcut-gap text-shortcut-text">
+            {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

@@ -0,0 +1,12 @@
+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;
+}) => React.JSX.Element;
+export declare const SkeletonList: (props: {
+    className?: string;
+    rows: number;
+}) => React.JSX.Element;
+//# sourceMappingURL=skeleton.d.ts.map

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

@@ -0,0 +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;AAKvE,eAAO,MAAM,YAAY,mBAOxB,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.js

@@ -0,0 +1,41 @@
+import { t as e } from "../../dom-Bn4wY_Zx.js";
+import { Polymorph as t } from "../core/polymorph.js";
+import { t as n } from "../../use-translations-BE4PuhLm.js";
+import { useRef as r } from "react";
+import { jsx as i } from "react/jsx-runtime";
+//#region src/components/display/skeleton.tsx
+var a = /* @__PURE__ */ i("div", {
+	role: "status",
+	"aria-busy": "true",
+	"aria-label": "Loading content",
+	className: "h-skeleton-cell-h w-10/12 animate-pulse rounded-skeleton-radius bg-muted"
+}), o = (r) => {
+	let a = n();
+	return /* @__PURE__ */ i(t, {
+		...r,
+		role: "status",
+		"aria-busy": "true",
+		"aria-label": a.skeletonLoading,
+		as: r.as || "span",
+		className: e("block h-skeleton-height w-skeleton-width animate-pulse rounded-skeleton-radius bg-muted", r.className)
+	});
+}, s = (t) => {
+	let a = n(), s = r(Array.from({ length: t.rows }).map((e, t) => {
+		let n = Math.max(100, Math.random() * 99);
+		return /* @__PURE__ */ i(o, {
+			style: { width: `${n}%` },
+			as: "li"
+		}, `skeleton-${n}-${t}`);
+	}));
+	return /* @__PURE__ */ i("ul", {
+		role: "status",
+		"aria-busy": "true",
+		"aria-label": a.skeletonLoading,
+		className: e("flex flex-col gap-skeleton-list-gap", t.className),
+		children: s.current
+	});
+};
+//#endregion
+export { o as Skeleton, a as SkeletonCell, s as SkeletonList };
+
+//# sourceMappingURL=skeleton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton.js","names":[],"sources":["../../../src/components/display/skeleton.tsx"],"sourcesContent":["import React, { CSSProperties, useRef, type ElementType } from \"react\";\nimport { useTranslations } from \"../../hooks/use-translations\";\nimport { css } from \"../../lib/dom\";\nimport { Polymorph } from \"../core/polymorph\";\n\nexport const SkeletonCell = (\n    <div\n        role=\"status\"\n        aria-busy=\"true\"\n        aria-label=\"Loading content\"\n        className=\"h-skeleton-cell-h w-10/12 animate-pulse rounded-skeleton-radius bg-muted\"\n    />\n);\n\nexport const Skeleton = (props: { className?: string; as?: ElementType; style?: CSSProperties }) => {\n    const t = useTranslations();\n    return (\n        <Polymorph\n            {...props}\n            role=\"status\"\n            aria-busy=\"true\"\n            aria-label={t.skeletonLoading}\n            as={props.as || \"span\"}\n            className={css(\"block h-skeleton-height w-skeleton-width animate-pulse rounded-skeleton-radius bg-muted\", props.className)}\n        />\n    );\n};\n\nexport const SkeletonList = (props: { className?: string; rows: number }) => {\n    const t = useTranslations();\n    const items = useRef(\n        Array.from({ length: props.rows }).map((_, i) => {\n            const rand = Math.max(100, Math.random() * 99);\n            return <Skeleton key={`skeleton-${rand}-${i}`} style={{ width: `${rand}%` }} as=\"li\" />;\n        })\n    );\n    return (\n        <ul role=\"status\" aria-busy=\"true\" aria-label={t.skeletonLoading} className={css(\"flex flex-col gap-skeleton-list-gap\", props.className)}>\n            {items.current}\n        </ul>\n    );\n};\n"],"mappings":";;;;;;AAKA,IAAa,IACT,kBAAC,OAAD;CACI,MAAK;CACL,aAAU;CACV,cAAW;CACX,WAAU;AACb,CAAA,GAGQ,KAAY,MAA2E;CAChG,IAAM,IAAI,EAAgB;CAC1B,OACI,kBAAC,GAAD;EACI,GAAI;EACJ,MAAK;EACL,aAAU;EACV,cAAY,EAAE;EACd,IAAI,EAAM,MAAM;EAChB,WAAW,EAAI,2FAA2F,EAAM,SAAS;CAC5H,CAAA;AAET,GAEa,KAAgB,MAAgD;CACzE,IAAM,IAAI,EAAgB,GACpB,IAAQ,EACV,MAAM,KAAK,EAAE,QAAQ,EAAM,KAAK,CAAC,EAAE,KAAK,GAAG,MAAM;EAC7C,IAAM,IAAO,KAAK,IAAI,KAAK,KAAK,OAAO,IAAI,EAAE;EAC7C,OAAO,kBAAC,GAAD;GAAwC,OAAO,EAAE,OAAO,GAAG,EAAK,GAAG;GAAG,IAAG;EAAM,GAAhE,YAAY,EAAK,GAAG,GAA4C;CAC1F,CAAC,CACL;CACA,OACI,kBAAC,MAAD;EAAI,MAAK;EAAS,aAAU;EAAO,cAAY,EAAE;EAAiB,WAAW,EAAI,uCAAuC,EAAM,SAAS;YAClI,EAAM;CACP,CAAA;AAEZ"}

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-skeleton-cell-h w-10/12 animate-pulse rounded-skeleton-radius 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-skeleton-height w-skeleton-width animate-pulse rounded-skeleton-radius 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-skeleton-list-gap", props.className)}>
+            {items.current}
+        </ul>);
+};

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

@@ -0,0 +1,5 @@
+export declare const Spinner: (props: {
+    className?: string;
+}) => 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

@@ -0,0 +1 @@
+{"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.js

@@ -0,0 +1,17 @@
+import { t as e } from "../../dom-Bn4wY_Zx.js";
+import { t } from "../../use-translations-BE4PuhLm.js";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/components/display/spinner.tsx
+var r = (r) => /* @__PURE__ */ n("span", {
+	role: "status",
+	"aria-live": "polite",
+	"aria-label": t().spinnerLoading,
+	className: e("box-border inline-block aspect-square size-spinner-size animate-spin rounded-full border-spinner-border border-background border-b-primary", r.className)
+}), i = () => /* @__PURE__ */ n("div", {
+	className: "flex h-full w-full items-center justify-center p-spinner-container-p",
+	children: /* @__PURE__ */ n(r, {})
+});
+//#endregion
+export { i as Loading, r as Spinner };
+
+//# sourceMappingURL=spinner.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"spinner.js","names":[],"sources":["../../../src/components/display/spinner.tsx"],"sourcesContent":["import { useTranslations } from \"../../hooks/use-translations\";\nimport { css } from \"../../lib/dom\";\n\nexport const Spinner = (props: { className?: string }) => {\n    const t = useTranslations();\n    return (\n        <span\n            role=\"status\"\n            aria-live=\"polite\"\n            aria-label={t.spinnerLoading}\n            className={css(\n                \"box-border inline-block aspect-square size-spinner-size animate-spin rounded-full border-spinner-border border-background border-b-primary\",\n                props.className\n            )}\n        />\n    );\n};\n\nexport const Loading = () => {\n    return (\n        <div className=\"flex h-full w-full items-center justify-center p-spinner-container-p\">\n            <Spinner />\n        </div>\n    );\n};\n"],"mappings":";;;;AAGA,IAAa,KAAW,MAGhB,kBAAC,QAAD;CACI,MAAK;CACL,aAAU;CACV,cALE,EAKU,EAAE;CACd,WAAW,EACP,8IACA,EAAM,SACV;AACH,CAAA,GAII,UAEL,kBAAC,OAAD;CAAK,WAAU;WACX,kBAAC,GAAD,CAAU,CAAA;AACT,CAAA"}

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-spinner-size animate-spin rounded-full border-spinner-border border-background border-b-primary", props.className)}/>);
+};
+export const Loading = () => {
+    return (<div className="flex h-full w-full items-center justify-center p-spinner-container-p">
+            <Spinner />
+        </div>);
+};

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

@@ -0,0 +1,12 @@
+import React from "react";
+import { Label } from "../../types";
+export type StatsProps = {
+    title: Label;
+    iconContainer?: string;
+    footer?: React.ReactElement;
+    Icon: React.FC<{
+        className: string;
+    }>;
+};
+export declare const Stats: (props: React.PropsWithChildren<StatsProps>) => React.JSX.Element;
+//# sourceMappingURL=stats.d.ts.map

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

@@ -0,0 +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,sBAe/D,CAAC"}

package/dist/components/display/stats.jsx

@@ -0,0 +1,16 @@
+import React from "react";
+import { css } from "../../lib/dom";
+export const Stats = (props) => {
+    return (<div className="divide-y divide-card-border overflow-hidden rounded-stats-radius border border-card-border bg-card-background shadow-shadow-card">
+            <header className="flex items-stretch gap-stats-gap">
+                <div className={css("flex shrink-0 items-center justify-center bg-primary p-stats-icon-p", props.iconContainer)}>
+                    <props.Icon className="aspect-square size-stats-icon-size text-primary-foreground"/>
+                </div>
+                <div className="flex flex-col justify-center gap-stats-inner-gap py-stats-p pr-stats-p">
+                    <h3 className="text-typography-base leading-none">{props.title}</h3>
+                    <p className="text-stats-value-text font-semibold">{props.children}</p>
+                </div>
+            </header>
+            {props.footer ? <footer className="px-stats-footer-px py-stats-footer-py">{props.footer}</footer> : null}
+        </div>);
+};

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

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

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

@@ -0,0 +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;AAUpC,KAAK,gBAAgB,GAAG;IACpB,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;IACrB,mBAAmB,EAAE,MAAM,CAAC;IAC5B,KAAK,EAAE,MAAM,CAAC;CACjB,CAAC;AA8CF,KAAK,UAAU,GAAG,QAAQ,GAAG,UAAU,GAAG,UAAU,GAAG,OAAO,CAAC;AAE/D,MAAM,MAAM,SAAS,GAAG,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,GAAG;IACrD,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,cAAc,CAAC,EAAE,MAAM,CAAC;CAC3B,CAAC;AAgCF,eAAO,MAAM,cAAc,+BAAgC,CAAC;AAE5D,eAAO,MAAM,IAAI,GAAI,gEAAgE,SAAS,sBA8F7F,CAAC;AAEF,eAAO,MAAM,KAAK,GAAI,OAAO,iBAAiB,CAAC;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,WAAW,EAAE,MAAM,CAAA;CAAE,CAAC,sBA0BrF,CAAC"}

package/dist/components/display/step.js

@@ -0,0 +1,3 @@
+"use client";
+import { n as e, r as t, t as n } from "../../step-DFpJ7zCG.js";
+export { n as Step, e as Steps, t as useStepContext };

package/dist/components/display/step.jsx

@@ -0,0 +1,145 @@
+"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} aria-hidden="true" focusable="false" 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} aria-hidden="true" focusable="false" 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-step-connector-h w-full bg-card-border first:hidden xl:block ${innerStatus === "active" || innerStatus === "complete" ? "bg-success" : ""}`}/>
+            <motion.button {...props} type="button" aria-current={innerStatus === "active" ? "step" : undefined} 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-step-size 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-step-icon-size text-primary-foreground"/>) : innerStatus === "error" ? (<ErrorIcon className="size-step-icon-size text-danger-foreground"/>) : (<Fragment>
+                                <span>{step}</span>
+                            </Fragment>)}
+                    </div>
+                </motion.div>
+                <div className="flex flex-col items-start justify-start px-step-label-px">
+                    <h3 className={`flex h-full items-center whitespace-nowrap font-normal ${titleClassName}`}>{title}</h3>
+                </div>
+            </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-step-gap lg:flex-row lg:items-center lg:justify-between">
+                {props.children}
+            </div>
+        </StepContext.Provider>);
+};

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../../src/components/display/tabs.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAiB,iBAAiB,EAAiC,MAAM,OAAO,CAAC;AAM/F,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;AA2CF,eAAO,MAAM,IAAI,GAAI,OAAO,iBAAiB,CAAC,SAAS,CAAC,sBAiGvD,CAAC;AAIF,KAAK,cAAc,GAAG;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC;AAEzD,MAAM,MAAM,QAAQ,GAAG,cAAc,GACjC,CACM;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,SAAS,CAAA;CAAE,GACpC;IACI,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;CAC9B,CACN,CAAC;AAEN,eAAO,MAAM,GAAG,GAAI,OAAO,iBAAiB,CAAC,QAAQ,CAAC,6BAQrD,CAAC"}

package/dist/components/display/tabs.js

@@ -1,3 +1,3 @@
 "use client";
-import { n as e, t } from "../../tabs-Ciy0l9OF.js";
+import { n as e, t } from "../../tabs-Brc963EW.js";
 export { t as Tab, e as Tabs };

package/dist/components/display/tabs.jsx

@@ -0,0 +1,125 @@
+"use client";
+import React, { createContext, useContext, useEffect, useRef } from "react";
+import { Is } from "sidekicker";
+import { useReactive } from "../../hooks/use-reactive";
+import { useStableRef } from "../../hooks/use-stable-ref";
+import { css } from "../../lib/dom";
+import { keyboardKeys } from "../../lib/keyboard-area";
+import { Polymorph } from "../core/polymorph";
+import { Card } from "./card";
+const Context = createContext("");
+const isElementDisabled = (element) => element.hasAttribute("disabled") || element.getAttribute("aria-disabled") === "true";
+const getNElement = (elements, currentIndex, direction) => {
+    const step = direction === "forward" ? 1 : -1;
+    const startIndex = currentIndex + step;
+    for (let i = startIndex; i >= 0 && i < elements.length; i += step) {
+        const element = elements[i];
+        if (!isElementDisabled(element))
+            return element;
+    }
+    return direction === "backward" ? getNElement(elements, elements.length - 1, "backward") : getNElement(elements, -1, "forward");
+};
+const moveOn = (ul, direction) => {
+    const items = Array.from(ul.querySelectorAll("li"));
+    const find = items.findIndex((x) => x.dataset.active === "true");
+    if (find === -1)
+        return null;
+    const item = getNElement(items, find, direction);
+    if (item === null)
+        return null;
+    item.querySelector("button")?.focus({ preventScroll: false });
+    return item.getAttribute("data-id") || "";
+};
+const moveToEdge = (ul, edge) => {
+    const items = Array.from(ul.querySelectorAll("li"));
+    const ordered = edge === "first" ? items : [...items].reverse();
+    for (const item of ordered) {
+        if (!isElementDisabled(item)) {
+            item.querySelector("button")?.focus({ preventScroll: false });
+            return item.getAttribute("data-id") || "";
+        }
+    }
+    return null;
+};
+const actionKeys = {
+    [keyboardKeys.ArrowLeft]: (_, ul) => moveOn(ul, "backward"),
+    [keyboardKeys.ArrowRight]: (_, ul) => moveOn(ul, "forward"),
+};
+export const Tabs = (props) => {
+    const [active, setActive] = useReactive(props.active);
+    const ref = useRef(null);
+    const onChangeRef = useStableRef(props.onChange);
+    useEffect(() => {
+        const header = ref.current;
+        if (header === null)
+            return;
+        let first = header.querySelector(`li[data-active=true]`);
+        if (first === null) {
+            first = header.querySelector(`li[data-id]`);
+            const id = first.getAttribute("data-id") || "";
+            setActive(id);
+        }
+    }, [props.active, setActive]);
+    useEffect(() => {
+        if (onChangeRef.current)
+            onChangeRef.current(active);
+    }, [onChangeRef, active]);
+    const items = React.Children.toArray(props.children);
+    const onClick = (e) => {
+        const anchor = e.currentTarget;
+        setActive(anchor.dataset.id || "");
+    };
+    const onKeyDown = (e) => {
+        if (ref.current === null)
+            return;
+        const k = e.key;
+        if (Is.keyof(actionKeys, k)) {
+            const fn = actionKeys[k];
+            const result = fn(e, ref.current);
+            if (result === null)
+                return;
+            setActive(result);
+        }
+        else if (k === "Home") {
+            e.preventDefault();
+            const result = moveToEdge(ref.current, "first");
+            if (result)
+                setActive(result);
+        }
+        else if (k === "End") {
+            e.preventDefault();
+            const result = moveToEdge(ref.current, "last");
+            if (result)
+                setActive(result);
+        }
+    };
+    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="relative mb-tabs-header-mb overflow-x-auto">
+                        <div className="absolute bottom-0 h-tabs-divider-h w-full bg-card-border"/>
+                        <nav className="min-w-0">
+                            <ul role="tablist" onKeyDown={onKeyDown} ref={ref} className="flex w-0 min-w-full flex-1 justify-start overflow-x-auto">
+                                {items.map((x) => {
+                const inner = x.props;
+                const current = active === inner.id;
+                return (<li data-id={inner.id} data-active={current} key={`tab-header-${inner.id}`} 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 role="tab" as="button" type="button" data-id={inner.id} id={`${inner.id}-tab`} aria-selected={current} disabled={inner.disabled} tabIndex={current ? 0 : -1} aria-controls={`${inner.id}-panel`} onClick={inner.disabled ? undefined : onClick} className="block w-full whitespace-nowrap px-tabs-item-px py-tabs-item-py 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();
+    if (props.id !== active)
+        return null;
+    return (<div role="tabpanel" tabIndex={0} id={`${props.id}-panel`} aria-labelledby={`${props.id}-tab`}>
+            {props.children}
+        </div>);
+};

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

@@ -0,0 +1,10 @@
+import React, { ComponentProps, ElementType, PropsWithChildren } from "react";
+import { PolymorphicProps } from "../core/polymorph";
+export declare const TimelineItem: {
+    (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) => React.JSX.Element;
+//# sourceMappingURL=timeline.d.ts.map

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

@@ -0,0 +1 @@
+{"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;gBAUJ,iBAAiB,CAAC,cAAc,CAAC,QAAQ,CAAC,CAAC;SAc9C,CAAC,SAAS,WAAW,qBAAqB,iBAAiB,CAAC,gBAAgB,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC;UAQtF,CAAC,SAAS,WAAW,oBAAoB,gBAAgB,CAAC,MAAM,EAAE,CAAC,CAAC;CAxBnH,CAAC;AAgCF,eAAO,MAAM,QAAQ,GAAI,OAAO,iBAAiB,sBAIhD,CAAC"}

package/dist/components/display/timeline.js

@@ -1,5 +1,5 @@
 import { t as e } from "../../dom-Bn4wY_Zx.js";
-import { t } from "../../polymorph-BLXhrn9n.js";
+import { Polymorph as t } from "../core/polymorph.js";
 import "react";
 import { jsx as n, jsxs as r } from "react/jsx-runtime";
 //#region src/components/display/timeline.tsx