@pathscale/ui 0.1.0 → 1.2.0

package/dist/components/stats/Stat.js

@@ -0,0 +1,51 @@
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
+import "./stat.css";
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__ from "solid-js";
+import * as __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__ from "tailwind-merge";
+import * as __WEBPACK_EXTERNAL_MODULE_clsx__ from "clsx";
+import * as __WEBPACK_EXTERNAL_MODULE__StatSection_js_715654c8__ from "./StatSection.js";
+var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>");
+const Stat = (props)=>{
+    const [local, rest] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "class",
+        "className",
+        "dataTheme"
+    ]);
+    const classes = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>(0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("stat", (0, __WEBPACK_EXTERNAL_MODULE_clsx__.clsx)(local.class, local.className)));
+    return (()=>{
+        var _el$ = _tmpl$();
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(rest, {
+            get ["class"] () {
+                return classes();
+            },
+            get ["data-theme"] () {
+                return local.dataTheme;
+            }
+        }), false, true);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, ()=>props.children);
+        return _el$;
+    })();
+};
+const StatTitle = (props)=>(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__StatSection_js_715654c8__["default"], (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)({
+        section: "title"
+    }, props));
+const StatValue = (props)=>(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__StatSection_js_715654c8__["default"], (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)({
+        section: "value"
+    }, props));
+const StatDesc = (props)=>(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__StatSection_js_715654c8__["default"], (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)({
+        section: "desc"
+    }, props));
+const StatFigure = (props)=>(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__StatSection_js_715654c8__["default"], (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)({
+        section: "figure"
+    }, props));
+const StatActions = (props)=>(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__StatSection_js_715654c8__["default"], (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)({
+        section: "actions"
+    }, props));
+const stats_Stat = Object.assign(Stat, {
+    Title: StatTitle,
+    Value: StatValue,
+    Desc: StatDesc,
+    Figure: StatFigure,
+    Actions: StatActions
+});
+export { stats_Stat as default };

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

@@ -0,0 +1,6 @@
+import { type JSX } from "solid-js";
+export type StatSectionProps = JSX.HTMLAttributes<HTMLDivElement> & {
+    section: "title" | "value" | "desc" | "figure" | "actions";
+};
+declare const StatSection: (props: StatSectionProps) => JSX.Element;
+export default StatSection;

package/dist/components/stats/StatSection.js

@@ -0,0 +1,29 @@
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__ from "solid-js";
+import * as __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__ from "tailwind-merge";
+import * as __WEBPACK_EXTERNAL_MODULE_clsx__ from "clsx";
+var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>");
+const StatSection_StatSection = (props)=>{
+    const [local, rest] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "class",
+        "section"
+    ]);
+    return (()=>{
+        var _el$ = _tmpl$();
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(rest, {
+            get ["class"] () {
+                return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)((0, __WEBPACK_EXTERNAL_MODULE_clsx__.clsx)({
+                    "stat-title": "title" === local.section,
+                    "stat-value": "value" === local.section,
+                    "stat-desc": "desc" === local.section,
+                    "stat-figure": "figure" === local.section,
+                    "stat-actions": "actions" === local.section
+                }), local.class);
+            }
+        }), false, true);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, ()=>props.children);
+        return _el$;
+    })();
+};
+const StatSection = StatSection_StatSection;
+export { StatSection as default };

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

@@ -0,0 +1,15 @@
+import { type JSX } from "solid-js";
+export type StatsProps = {
+    direction?: "horizontal" | "vertical";
+    children?: JSX.Element;
+} & JSX.HTMLAttributes<HTMLDivElement>;
+declare const _default: ((props: StatsProps) => JSX.Element) & {
+    Stat: ((props: import("./Stat").StatProps) => JSX.Element) & {
+        Title: (props: Omit<import("./StatSection").StatSectionProps, "section">) => JSX.Element;
+        Value: (props: Omit<import("./StatSection").StatSectionProps, "section">) => JSX.Element;
+        Desc: (props: Omit<import("./StatSection").StatSectionProps, "section">) => JSX.Element;
+        Figure: (props: Omit<import("./StatSection").StatSectionProps, "section">) => JSX.Element;
+        Actions: (props: Omit<import("./StatSection").StatSectionProps, "section">) => JSX.Element;
+    };
+};
+export default _default;

package/dist/components/stats/Stats.js

@@ -0,0 +1,29 @@
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__ from "solid-js";
+import * as __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__ from "tailwind-merge";
+import * as __WEBPACK_EXTERNAL_MODULE_clsx__ from "clsx";
+import * as __WEBPACK_EXTERNAL_MODULE__Stat_js_d5da03e7__ from "./Stat.js";
+var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>");
+const Stats = (props)=>{
+    const [local, rest] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "class",
+        "direction"
+    ]);
+    return (()=>{
+        var _el$ = _tmpl$();
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(rest, {
+            get ["class"] () {
+                return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("stats", (0, __WEBPACK_EXTERNAL_MODULE_clsx__.clsx)({
+                    "stats-horizontal": "horizontal" === local.direction,
+                    "stats-vertical": "vertical" === local.direction
+                }), local.class);
+            }
+        }), false, true);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, ()=>props.children);
+        return _el$;
+    })();
+};
+const stats_Stats = Object.assign(Stats, {
+    Stat: __WEBPACK_EXTERNAL_MODULE__Stat_js_d5da03e7__["default"]
+});
+export { stats_Stats as default };

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

@@ -0,0 +1 @@
+export { default, type StatsProps } from "./Stats";

package/dist/components/stats/index.js

@@ -0,0 +1,3 @@
+import * as __WEBPACK_EXTERNAL_MODULE__Stats_js_3a123b47__ from "./Stats.js";
+var __webpack_exports__default = __WEBPACK_EXTERNAL_MODULE__Stats_js_3a123b47__["default"];
+export { __webpack_exports__default as default };

package/dist/components/stats/stat.css

@@ -0,0 +1,67 @@
+@layer components {
+  .stat-figure {
+      grid-column-start: 2;
+      grid-row: span 3 / span 3;
+      grid-row-start: 1;
+      place-self: center;
+      justify-self: flex-end;
+    }
+
+  .stat-value {
+      grid-column-start: 1;
+      white-space: nowrap;
+      font-size: 2rem;
+      font-weight: 800;
+    }
+
+  .stat-desc {
+      grid-column-start: 1;
+      white-space: nowrap;
+      color: var(--color-base-content);
+      font-size: 0.75rem;
+    }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .stat-desc {
+      color: color-mix(in oklab, var(--color-base-content) 60%, transparent);
+    }
+    }
+
+  .stat-title {
+      grid-column-start: 1;
+      white-space: nowrap;
+      color: var(--color-base-content);
+      font-size: 0.75rem;
+    }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .stat-title {
+      color: color-mix(in oklab, var(--color-base-content) 60%, transparent);
+    }
+    }
+
+  .stat-actions {
+      grid-column-start: 1;
+      white-space: nowrap;
+    }
+
+  .stat {
+      display: inline-grid;
+      width: 100%;
+      column-gap: calc(0.25rem * 4);
+      padding-inline: calc(0.25rem * 6);
+      padding-block: calc(0.25rem * 4);
+      grid-template-columns: repeat(1, 1fr);
+    }
+
+  .stat:not(:last-child) {
+      border-inline-end: var(--border) dashed currentColor;
+      border-block-end: none;
+    }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .stat:not(:last-child) {
+      border-inline-end: var(--border) dashed color-mix(in oklab, currentColor 10%, #0000);
+    }
+    }
+}

package/dist/components/status/Status.d.ts

@@ -0,0 +1,8 @@
+import { type ParentComponent } from "solid-js";
+import type { ComponentColor, IComponentBaseProps } from "../types";
+export interface StatusProps extends IComponentBaseProps {
+    color?: ComponentColor;
+    size?: "xs" | "sm" | "md" | "lg" | "xl";
+}
+declare const Status: ParentComponent<StatusProps>;
+export default Status;

package/dist/components/status/Status.js

@@ -0,0 +1,30 @@
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__ from "solid-js";
+import * as __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__ from "tailwind-merge";
+var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<span>");
+const Status = (props)=>{
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "children",
+        "class",
+        "className",
+        "dataTheme",
+        "color",
+        "size"
+    ]);
+    const className = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>(0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("status", local.color && `status-${local.color}`, local.size && `status-${local.size}`, local.class, local.className));
+    return (()=>{
+        var _el$ = _tmpl$();
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
+            get ["data-theme"] () {
+                return local.dataTheme;
+            },
+            get ["class"] () {
+                return className();
+            }
+        }), false, true);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, ()=>local.children);
+        return _el$;
+    })();
+};
+const status_Status = Status;
+export { status_Status as default };

package/dist/components/status/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Status } from "./Status";
+export type { StatusProps } from "./Status";

package/dist/components/status/index.js

@@ -0,0 +1,3 @@
+import * as __WEBPACK_EXTERNAL_MODULE__Status_js_bb280419__ from "./Status.js";
+var __webpack_exports__Status = __WEBPACK_EXTERNAL_MODULE__Status_js_bb280419__["default"];
+export { __webpack_exports__Status as Status };

package/dist/components/steps/Step.d.ts

@@ -0,0 +1,20 @@
+import "./step.css";
+import { type JSX } from "solid-js";
+import type { IComponentBaseProps, ComponentColor } from "../types";
+type ElementType = keyof JSX.IntrinsicElements;
+type StepBaseProps = {
+    /** Label for the step indicator */
+    value?: string;
+    /** Color variant */
+    color?: "neutral" | ComponentColor;
+    /** Custom element tag */
+    as?: ElementType;
+    class?: string;
+    className?: string;
+    style?: JSX.CSSProperties;
+    children?: JSX.Element;
+};
+type PropsOf<E extends ElementType> = JSX.IntrinsicElements[E];
+export type StepProps<E extends ElementType = "li"> = Omit<PropsOf<E>, keyof StepBaseProps | "color"> & StepBaseProps & IComponentBaseProps;
+declare const Step: <E extends ElementType = "li">(props: StepProps<E>) => JSX.Element;
+export default Step;

package/dist/components/steps/Step.js

@@ -0,0 +1,88 @@
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
+import "./step.css";
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__ from "solid-js";
+import * as __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__ from "tailwind-merge";
+import * as __WEBPACK_EXTERNAL_MODULE_clsx__ from "clsx";
+const VoidElementList = [
+    "area",
+    "base",
+    "br",
+    "col",
+    "embed",
+    "hr",
+    "img",
+    "input",
+    "link",
+    "keygen",
+    "meta",
+    "param",
+    "source",
+    "track",
+    "wbr"
+];
+const Step = (props)=>{
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "value",
+        "color",
+        "as",
+        "class",
+        "className",
+        "style",
+        "children",
+        "dataTheme"
+    ]);
+    const Tag = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>local.as || "li");
+    const classes = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>(0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("step", local.class, local.className, (0, __WEBPACK_EXTERNAL_MODULE_clsx__.clsx)({
+            "step-neutral": "neutral" === local.color,
+            "step-primary": "primary" === local.color,
+            "step-secondary": "secondary" === local.color,
+            "step-accent": "accent" === local.color,
+            "step-info": "info" === local.color,
+            "step-success": "success" === local.color,
+            "step-warning": "warning" === local.color,
+            "step-error": "error" === local.color
+        })));
+    if (VoidElementList.includes(Tag())) return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.Dynamic, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)({
+        get component () {
+            return Tag();
+        }
+    }, others, {
+        "aria-label": "Step",
+        get ["data-theme"] () {
+            return local.dataTheme;
+        },
+        get ["data-content"] () {
+            return local.value;
+        },
+        get ["class"] () {
+            return classes();
+        },
+        get style () {
+            return local.style;
+        }
+    }));
+    return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.Dynamic, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)({
+        get component () {
+            return Tag();
+        }
+    }, others, {
+        "aria-label": "Step",
+        get ["data-theme"] () {
+            return local.dataTheme;
+        },
+        get ["data-content"] () {
+            return local.value;
+        },
+        get ["class"] () {
+            return classes();
+        },
+        get style () {
+            return local.style;
+        },
+        get children () {
+            return local.children;
+        }
+    }));
+};
+const steps_Step = Step;
+export { steps_Step as default };

package/dist/components/steps/Steps.d.ts

@@ -0,0 +1,18 @@
+import { type JSX } from "solid-js";
+import type { IComponentBaseProps } from "../types";
+type ElementType = keyof JSX.IntrinsicElements;
+type StepsBaseProps = {
+    vertical?: boolean;
+    horizontal?: boolean;
+    as?: ElementType;
+    class?: string;
+    className?: string;
+    style?: JSX.CSSProperties;
+    children?: JSX.Element;
+};
+type PropsOf<E extends ElementType> = JSX.IntrinsicElements[E];
+export type StepsProps<E extends ElementType = "ul"> = Omit<PropsOf<E>, keyof StepsBaseProps> & StepsBaseProps & IComponentBaseProps;
+declare const _default: (<E extends ElementType = "ul">(props: StepsProps<E>) => JSX.Element) & {
+    Step: <E extends keyof JSX.IntrinsicElements = "li">(props: import("./Step").StepProps<E>) => JSX.Element;
+};
+export default _default;

package/dist/components/steps/Steps.js

@@ -0,0 +1,80 @@
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__ from "solid-js";
+import * as __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__ from "tailwind-merge";
+import * as __WEBPACK_EXTERNAL_MODULE_clsx__ from "clsx";
+import * as __WEBPACK_EXTERNAL_MODULE__Step_js_26e1551d__ from "./Step.js";
+const VoidElementList = [
+    "area",
+    "base",
+    "br",
+    "col",
+    "embed",
+    "hr",
+    "img",
+    "input",
+    "link",
+    "keygen",
+    "meta",
+    "param",
+    "source",
+    "track",
+    "wbr"
+];
+const Steps = (props)=>{
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "children",
+        "vertical",
+        "horizontal",
+        "as",
+        "class",
+        "className",
+        "style",
+        "dataTheme"
+    ]);
+    const Tag = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>local.as || "ul");
+    const classes = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>(0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("steps", local.class, local.className, (0, __WEBPACK_EXTERNAL_MODULE_clsx__.clsx)({
+            "steps-vertical": local.vertical,
+            "steps-horizontal": local.horizontal
+        })));
+    if (VoidElementList.includes(Tag())) return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.Dynamic, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)({
+        get component () {
+            return Tag();
+        }
+    }, others, {
+        role: "group",
+        "aria-label": "Steps",
+        get ["data-theme"] () {
+            return local.dataTheme;
+        },
+        get ["class"] () {
+            return classes();
+        },
+        get style () {
+            return local.style;
+        }
+    }));
+    return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.Dynamic, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)({
+        get component () {
+            return Tag();
+        }
+    }, others, {
+        role: "group",
+        "aria-label": "Steps",
+        get ["data-theme"] () {
+            return local.dataTheme;
+        },
+        get ["class"] () {
+            return classes();
+        },
+        get style () {
+            return local.style;
+        },
+        get children () {
+            return local.children;
+        }
+    }));
+};
+const steps_Steps = Object.assign(Steps, {
+    Step: __WEBPACK_EXTERNAL_MODULE__Step_js_26e1551d__["default"]
+});
+export { steps_Steps as default };

package/dist/components/steps/index.d.ts

@@ -0,0 +1,3 @@
+import Steps from "./Steps";
+export type { StepsProps } from "./Steps";
+export default Steps;

package/dist/components/steps/index.js

@@ -0,0 +1,3 @@
+import * as __WEBPACK_EXTERNAL_MODULE__Steps_js_f8eb7408__ from "./Steps.js";
+const steps = __WEBPACK_EXTERNAL_MODULE__Steps_js_f8eb7408__["default"];
+export { steps as default };

package/dist/components/steps/step.css

@@ -0,0 +1,179 @@
+@layer components {
+  .steps {
+      display: inline-grid;
+      grid-auto-flow: column;
+      overflow: hidden;
+      overflow-x: auto;
+      counter-reset: step;
+      grid-auto-columns: 1fr;
+    }
+
+  .steps .step {
+      display: grid;
+      grid-template-columns: repeat(1, minmax(0, 1fr));
+      grid-template-columns: auto;
+      grid-template-rows: repeat(2, minmax(0, 1fr));
+      grid-template-rows: 40px 1fr;
+      place-items: center;
+      text-align: center;
+      min-width: 4rem;
+      --step-bg: var(--color-base-300);
+      --step-fg: var(--color-base-content);
+    }
+
+  .steps .step:before {
+      top: calc(0.25rem * 0);
+      grid-column-start: 1;
+      grid-row-start: 1;
+      height: calc(0.25rem * 2);
+      width: 100%;
+      border: 1px solid;
+      color: var(--step-bg);
+      background-color: var(--step-bg);
+      content: "";
+      margin-inline-start: -100%;
+    }
+
+  .steps .step > .step-icon,
+    .steps .step:not(:has(.step-icon)):after {
+      --tw-content: counter(step);
+      content: var(--tw-content);
+      counter-increment: step;
+      z-index: 1;
+      color: var(--step-fg);
+      background-color: var(--step-bg);
+      border: 1px solid var(--step-bg);
+      position: relative;
+      grid-column-start: 1;
+      grid-row-start: 1;
+      display: grid;
+      height: calc(0.25rem * 8);
+      width: calc(0.25rem * 8);
+      place-items: center;
+      place-self: center;
+      border-radius: calc(infinity * 1px);
+    }
+
+  .steps .step:first-child:before {
+      --tw-content: none;
+      content: var(--tw-content);
+    }
+
+  .steps .step[data-content]:after {
+      --tw-content: attr(data-content);
+      content: var(--tw-content);
+    }
+
+  .steps .step-neutral + .step-neutral:before,
+    .steps .step-neutral:after,
+    .steps .step-neutral > .step-icon {
+      --step-bg: var(--color-neutral);
+      --step-fg: var(--color-neutral-content);
+    }
+
+  .steps .step-primary + .step-primary:before,
+    .steps .step-primary:after,
+    .steps .step-primary > .step-icon {
+      --step-bg: var(--color-primary);
+      --step-fg: var(--color-primary-content);
+    }
+
+  .steps .step-secondary + .step-secondary:before,
+    .steps .step-secondary:after,
+    .steps .step-secondary > .step-icon {
+      --step-bg: var(--color-secondary);
+      --step-fg: var(--color-secondary-content);
+    }
+
+  .steps .step-accent + .step-accent:before,
+    .steps .step-accent:after,
+    .steps .step-accent > .step-icon {
+      --step-bg: var(--color-accent);
+      --step-fg: var(--color-accent-content);
+    }
+
+  .steps .step-info + .step-info:before,
+    .steps .step-info:after,
+    .steps .step-info > .step-icon {
+      --step-bg: var(--color-info);
+      --step-fg: var(--color-info-content);
+    }
+
+  .steps .step-success + .step-success:before,
+    .steps .step-success:after,
+    .steps .step-success > .step-icon {
+      --step-bg: var(--color-success);
+      --step-fg: var(--color-success-content);
+    }
+
+  .steps .step-warning + .step-warning:before,
+    .steps .step-warning:after,
+    .steps .step-warning > .step-icon {
+      --step-bg: var(--color-warning);
+      --step-fg: var(--color-warning-content);
+    }
+
+  .steps .step-error + .step-error:before,
+    .steps .step-error:after,
+    .steps .step-error > .step-icon {
+      --step-bg: var(--color-error);
+      --step-fg: var(--color-error-content);
+    }
+
+  .steps-vertical {
+      grid-auto-rows: 1fr;
+      grid-auto-flow: row;
+    }
+
+  .steps-vertical .step {
+      display: grid;
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+      grid-template-columns: 40px 1fr;
+      grid-template-rows: repeat(1, minmax(0, 1fr));
+      grid-template-rows: auto;
+      gap: 0.5rem;
+      min-height: 4rem;
+      justify-items: start;
+    }
+
+  .steps-vertical .step:before {
+      height: 100%;
+      width: calc(0.25rem * 2);
+      translate: -50% -50%;
+      margin-inline-start: 50%;
+    }
+
+  [dir="rtl"] .steps-vertical .step:before {
+      translate: 50% -50%;
+    }
+
+  .steps-horizontal {
+      grid-auto-columns: 1fr;
+      display: inline-grid;
+      grid-auto-flow: column;
+      overflow: hidden;
+      overflow-x: auto;
+    }
+
+  .steps-horizontal .step {
+      display: grid;
+      grid-template-columns: repeat(1, minmax(0, 1fr));
+      grid-template-columns: auto;
+      grid-template-rows: repeat(2, minmax(0, 1fr));
+      grid-template-rows: 40px 1fr;
+      place-items: center;
+      text-align: center;
+      min-width: 4rem;
+    }
+
+  .steps-horizontal .step:before {
+      height: calc(0.25rem * 2);
+      width: 100%;
+      translate: 0;
+      margin-inline-start: -100%;
+    }
+
+  [dir="rtl"] .steps-horizontal .step:before {
+      translate: 0;
+    }
+}