@spark-ui/components 13.1.3 → 13.1.4

package/dist/progress-tracker/index.js

@@ -1,2 +1,571 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),l=require("../index-DnaHaH_0.js"),n=require("react"),V=require("@spark-ui/icons/Check"),L=require("../Icon-Bf0XrmiR.js"),q=l.cx(["flex flex-nowrap items-start group/list","data-[orientation=horizontal]:flex-row data-[orientation=horizontal]:w-full","data-[orientation=vertical]:flex-col"]),S=n.createContext({}),P=n.createContext({}),T=()=>n.useContext(S),j=()=>n.useContext(P),O=":progress-tracker",I=({stepIndex:e=0,onStepClick:a,readOnly:r=!1,intent:s="basic",size:c="lg",orientation:p="horizontal",children:o,className:u,ref:v,...f})=>{const[x,z]=n.useState(new Map),d=r?"div":"nav";return t.jsx(S.Provider,{value:{stepIndex:e,onStepClick:a,steps:x,setSteps:z,size:c,intent:s,readOnly:r},children:t.jsx(d,{ref:v,"data-spark-component":"progress-tracker",className:l.cx("inline-flex",u),...f,children:t.jsx("ol",{"data-orientation":p,className:q,style:{counterReset:"step"},children:o})})})};I.displayName="ProgressTracker";const R=l.cva(["relative inline-flex items-start flex-auto first:grow-0 justify-center group/item","after:absolute after:z-base","last:after:content-none","after:bg-outline","group-data-[orientation=horizontal]/list:before:bg-outline","group-data-[orientation=horizontal]/list:px-[1px]","group-data-[orientation=horizontal]/list:before:absolute group-data-[orientation=horizontal]/list:before:z-base","group-data-[orientation=horizontal]/list:before:left-0 group-data-[orientation=horizontal]/list:after:right-0","group-data-[orientation=horizontal]/list:before:h-[1px] group-data-[orientation=horizontal]/list:after:h-[1px]","first:group-data-[orientation=horizontal]/list:before:content-none","group-data-[orientation=vertical]/list:py-[1px]","group-data-[orientation=vertical]/list:items-start","group-data-[orientation=vertical]/list:after:w-[1px] group-data-[orientation=vertical]/list:after:bottom-[-1px]"],{variants:{size:{sm:["group-data-[orientation=horizontal]/list:before:top-[8px] group-data-[orientation=horizontal]/list:after:top-[8px]","group-data-[orientation=horizontal]/list:before:right-[calc(50%+12px)] group-data-[orientation=horizontal]/list:after:left-[calc(50%+12px)]","first:group-data-[orientation=horizontal]/list:after:left-[calc(50%+10px)]","last:group-data-[orientation=horizontal]/list:before:right-[calc(50%+10px)]","group-data-[orientation=vertical]/list:after:left-[8px]","group-data-[orientation=vertical]/list:after:top-[25px]","first:group-data-[orientation=vertical]/list:after:top-[21px]"],md:["group-data-[orientation=horizontal]/list:before:top-[12px] group-data-[orientation=horizontal]/list:after:top-[12px]","group-data-[orientation=horizontal]/list:before:right-[calc(50%+16px)] group-data-[orientation=horizontal]/list:after:left-[calc(50%+16px)]","first:group-data-[orientation=horizontal]/list:after:left-[calc(50%+14px)]","last:group-data-[orientation=horizontal]/list:before:right-[calc(50%+14px)]","group-data-[orientation=vertical]/list:after:left-[12px]","group-data-[orientation=vertical]/list:after:top-[33px]","first:group-data-[orientation=vertical]/list:after:top-[29px]"],lg:["group-data-[orientation=horizontal]/list:before:top-[16px] group-data-[orientation=horizontal]/list:after:top-[16px]","group-data-[orientation=horizontal]/list:before:right-[calc(50%+20px)] group-data-[orientation=horizontal]/list:after:left-[calc(50%+20px)]","first:group-data-[orientation=horizontal]/list:after:left-[calc(50%+18px)]","last:group-data-[orientation=horizontal]/list:before:right-[calc(50%+18px)]","group-data-[orientation=vertical]/list:after:left-[16px]","group-data-[orientation=vertical]/list:after:top-[41px]","first:group-data-[orientation=vertical]/list:after:top-[37px]"]},intent:{basic:"",neutral:"",success:""},disabled:{true:"before:opacity-dim-3",false:""},disabledAfter:{true:"after:opacity-dim-3",false:""}},defaultVariants:{disabled:!1,disabledAfter:!1,size:"lg",intent:"basic"}}),$=l.cva(["relative flex group/btn disabled:cursor-default","group-data-[orientation=horizontal]/list:flex-col group-data-[orientation=horizontal]/list:items-center","group-data-[orientation=horizontal]/list:text-center group-data-[orientation=horizontal]/list:mx-sm","group-first/item:group-data-[orientation=horizontal]/list:ml-0 group-last/item:group-data-[orientation=horizontal]/list:mr-0","group-data-[orientation=vertical]/list:flex-row group-data-[orientation=vertical]/list:items-start","group-data-[orientation=vertical]/list:text-left group-data-[orientation=vertical]/list:my-sm","group-first/item:group-data-[orientation=vertical]/list:mt-0 group-last/item:group-data-[orientation=vertical]/list:mb-0"],{variants:{size:{sm:["group-data-[orientation=horizontal]/list:min-w-sz-16 group-data-[orientation=horizontal]/list:mt-[16px]","group-data-[orientation=vertical]/list:min-h-sz-16 group-data-[orientation=vertical]/list:ml-[16px]"],md:["group-data-[orientation=horizontal]/list:min-w-sz-24 group-data-[orientation=horizontal]/list:mt-[24px]","group-data-[orientation=vertical]/list:min-h-sz-24 group-data-[orientation=vertical]/list:ml-[24px]"],lg:["group-data-[orientation=horizontal]/list:min-w-sz-32 group-data-[orientation=horizontal]/list:mt-[32px]","group-data-[orientation=vertical]/list:min-h-sz-32 group-data-[orientation=vertical]/list:ml-[32px]"]},readOnly:{true:"cursor-default",false:"cursor-pointer"}},defaultVariants:{size:"lg",readOnly:!1}}),A=l.cva(["relative flex shrink-0 justify-center items-center","rounded-full","text-body-2 font-bold","group-disabled/btn:opacity-dim-3"],{variants:{size:{sm:["w-sz-16 h-sz-16","group-data-[orientation=horizontal]/list:mt-[-16px]","group-data-[orientation=vertical]/list:ml-[-16px]"],md:["w-sz-24 h-sz-24","group-data-[orientation=horizontal]/list:mt-[-24px]","group-data-[orientation=vertical]/list:ml-[-24px]"],lg:["w-sz-32 h-sz-32","group-data-[orientation=horizontal]/list:mt-[-32px]","group-data-[orientation=vertical]/list:ml-[-32px]"]},intent:{basic:"",neutral:"",success:""},state:{complete:"",incomplete:"",active:""}},compoundVariants:[{intent:"basic",state:["complete","incomplete"],class:["text-on-basic-container bg-basic-container","group-hover/btn:group-data-[interactive=true]/btn:bg-basic-container-hovered","group-hover/btn:group-data-[interactive=false]/btn:bg-basic-container"]},{intent:"basic",state:"active",class:"text-on-basic bg-basic"},{intent:"neutral",state:["complete","incomplete"],class:["text-on-neutral-container bg-neutral-container","group-hover/btn:group-data-[interactive=true]/btn:bg-neutral-container-hovered","group-hover/btn:group-data-[interactive=false]/btn:bg-neutral-container"]},{intent:"neutral",state:"active",class:"text-on-neutral bg-neutral"},{intent:"success",state:["complete","incomplete"],class:["text-on-success-container bg-success-container","group-hover/btn:group-data-[interactive=true]/btn:bg-success-container-hovered","group-hover/btn:group-data-[interactive=false]/btn:bg-success-container"]},{intent:"success",state:"active",class:"text-on-success bg-success"}],defaultVariants:{size:"lg",state:"incomplete",intent:"basic"}}),M=()=>t.jsx(L.Icon,{size:"sm",children:t.jsx(V.Check,{})}),h=({complete:e,incomplete:a,className:r})=>{const{size:s,intent:c}=T(),{index:p,state:o}=j();return t.jsx("span",{className:A({size:s,intent:c,state:o,className:r}),"aria-hidden":"true",children:s!=="sm"&&t.jsxs(t.Fragment,{children:[o==="complete"&&(e===void 0?t.jsx(M,{}):e),o!=="complete"&&(a===void 0?`${p+1}`:a)]})})};h.displayName="ProgressTracker.StepIndicator";const k=({disabled:e=!1,children:a,"aria-label":r,className:s,ref:c,...p})=>{const{stepIndex:o,steps:u,onStepClick:v,setSteps:f,size:x,intent:z,readOnly:d}=T(),m=`${O}-step-${n.useId()}`,g=[...u.keys()].indexOf(m),C=(()=>{const i=[...u.keys()][g+1];return!!(i&&u.get(i)?.includes("disabled"))})(),b=g===o?"active":g<o?"complete":"incomplete";return n.useEffect(()=>(f(i=>new Map(i).set(m,[b,e?"disabled":""].filter(N=>!!N))),()=>{f(i=>(i.delete(m),i))}),[]),t.jsx("li",{"data-spark-component":"progress-tracker-step",id:m,ref:c,"data-state":b,...b==="active"&&{"aria-current":"step"},className:R({size:x,intent:z,disabled:e,disabledAfter:C}),...p,children:t.jsx("button",{type:"button","aria-label":r,"data-interactive":!e&&!d,...!e&&!d&&{onClick:()=>v?.(g)},disabled:e,className:$({size:x,readOnly:d,className:s}),children:t.jsx(P.Provider,{value:{index:g,state:b},children:a||t.jsx(h,{})})})})};k.displayName="ProgressTracker.Step";const E=l.cva(["flex text-body-2 ","text-on-surface group-disabled/btn:text-on-surface/dim-1","group-data-[orientation=horizontal]/list:mt-md","group-data-[orientation=vertical]/list:ml-md","group-data-[orientation=vertical]/list:my-auto"],{variants:{state:{complete:"",incomplete:"",active:"font-bold"}}}),y=({className:e,children:a})=>{const{state:r}=j();return t.jsx("span",{className:E({state:r,className:e}),children:a})};y.displayName="ProgressTracker.StepLabel";const w=Object.assign(I,{Step:k,StepLabel:y,StepIndicator:h});w.displayName="ProgressTracker";k.displayName="ProgressTracker.Step";y.displayName="ProgressTracker.StepLabel";h.displayName="ProgressTracker.StepIndicator";exports.ProgressTracker=w;
-//# sourceMappingURL=index.js.map
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/progress-tracker/index.ts
+var progress_tracker_exports = {};
+__export(progress_tracker_exports, {
+  ProgressTracker: () => ProgressTracker2
+});
+module.exports = __toCommonJS(progress_tracker_exports);
+
+// src/progress-tracker/ProgressTracker.tsx
+var import_class_variance_authority2 = require("class-variance-authority");
+var import_react2 = require("react");
+
+// src/progress-tracker/ProgressTracker.styles.ts
+var import_class_variance_authority = require("class-variance-authority");
+var progressList = (0, import_class_variance_authority.cx)([
+  "flex flex-nowrap items-start group/list",
+  "data-[orientation=horizontal]:flex-row data-[orientation=horizontal]:w-full",
+  "data-[orientation=vertical]:flex-col"
+]);
+
+// src/progress-tracker/ProgressTrackerContext.ts
+var import_react = require("react");
+var ProgressTrackerContext = (0, import_react.createContext)(
+  {}
+);
+var ProgressTrackerStepContext = (0, import_react.createContext)(
+  {}
+);
+var useProgressTrackerContext = () => (0, import_react.useContext)(ProgressTrackerContext);
+var useProgressTrackerStepContext = () => (0, import_react.useContext)(ProgressTrackerStepContext);
+var ID_PREFIX = ":progress-tracker";
+
+// src/progress-tracker/ProgressTracker.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var ProgressTracker = ({
+  stepIndex = 0,
+  onStepClick,
+  readOnly = false,
+  intent = "basic",
+  size = "lg",
+  orientation = "horizontal",
+  children,
+  className,
+  ref,
+  ...rest
+}) => {
+  const [steps, setSteps] = (0, import_react2.useState)(/* @__PURE__ */ new Map());
+  const Component = readOnly ? "div" : "nav";
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    ProgressTrackerContext.Provider,
+    {
+      value: { stepIndex, onStepClick, steps, setSteps, size, intent, readOnly },
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        Component,
+        {
+          ref,
+          "data-spark-component": "progress-tracker",
+          className: (0, import_class_variance_authority2.cx)("inline-flex", className),
+          ...rest,
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "ol",
+            {
+              "data-orientation": orientation,
+              className: progressList,
+              style: { counterReset: "step" },
+              children
+            }
+          )
+        }
+      )
+    }
+  );
+};
+ProgressTracker.displayName = "ProgressTracker";
+
+// src/progress-tracker/ProgressTrackerStep.tsx
+var import_react5 = require("react");
+
+// src/progress-tracker/ProgressTrackerStep.styles.ts
+var import_class_variance_authority3 = require("class-variance-authority");
+var stepItemVariant = (0, import_class_variance_authority3.cva)(
+  [
+    "relative inline-flex items-start flex-auto first:grow-0 justify-center group/item",
+    // Progress Track
+    "after:absolute after:z-base",
+    "last:after:content-none",
+    "after:bg-outline",
+    "group-data-[orientation=horizontal]/list:before:bg-outline",
+    // Horizontal orientation
+    "group-data-[orientation=horizontal]/list:px-[1px]",
+    "group-data-[orientation=horizontal]/list:before:absolute group-data-[orientation=horizontal]/list:before:z-base",
+    "group-data-[orientation=horizontal]/list:before:left-0 group-data-[orientation=horizontal]/list:after:right-0",
+    "group-data-[orientation=horizontal]/list:before:h-[1px] group-data-[orientation=horizontal]/list:after:h-[1px]",
+    "first:group-data-[orientation=horizontal]/list:before:content-none",
+    // Vertical orientation
+    "group-data-[orientation=vertical]/list:py-[1px]",
+    "group-data-[orientation=vertical]/list:items-start",
+    "group-data-[orientation=vertical]/list:after:w-[1px] group-data-[orientation=vertical]/list:after:bottom-[-1px]"
+  ],
+  {
+    variants: {
+      size: {
+        sm: [
+          // Horizontal orientation
+          "group-data-[orientation=horizontal]/list:before:top-[8px] group-data-[orientation=horizontal]/list:after:top-[8px]",
+          "group-data-[orientation=horizontal]/list:before:right-[calc(50%+12px)] group-data-[orientation=horizontal]/list:after:left-[calc(50%+12px)]",
+          "first:group-data-[orientation=horizontal]/list:after:left-[calc(50%+10px)]",
+          "last:group-data-[orientation=horizontal]/list:before:right-[calc(50%+10px)]",
+          // Vertical orientation
+          "group-data-[orientation=vertical]/list:after:left-[8px]",
+          "group-data-[orientation=vertical]/list:after:top-[25px]",
+          "first:group-data-[orientation=vertical]/list:after:top-[21px]"
+        ],
+        md: [
+          // Horizontal orientation
+          "group-data-[orientation=horizontal]/list:before:top-[12px] group-data-[orientation=horizontal]/list:after:top-[12px]",
+          "group-data-[orientation=horizontal]/list:before:right-[calc(50%+16px)] group-data-[orientation=horizontal]/list:after:left-[calc(50%+16px)]",
+          "first:group-data-[orientation=horizontal]/list:after:left-[calc(50%+14px)]",
+          "last:group-data-[orientation=horizontal]/list:before:right-[calc(50%+14px)]",
+          // Vertical orientation
+          "group-data-[orientation=vertical]/list:after:left-[12px]",
+          "group-data-[orientation=vertical]/list:after:top-[33px]",
+          "first:group-data-[orientation=vertical]/list:after:top-[29px]"
+        ],
+        lg: [
+          // Horizontal orientation
+          "group-data-[orientation=horizontal]/list:before:top-[16px] group-data-[orientation=horizontal]/list:after:top-[16px]",
+          "group-data-[orientation=horizontal]/list:before:right-[calc(50%+20px)] group-data-[orientation=horizontal]/list:after:left-[calc(50%+20px)]",
+          "first:group-data-[orientation=horizontal]/list:after:left-[calc(50%+18px)]",
+          "last:group-data-[orientation=horizontal]/list:before:right-[calc(50%+18px)]",
+          // Vertical orientation
+          "group-data-[orientation=vertical]/list:after:left-[16px]",
+          "group-data-[orientation=vertical]/list:after:top-[41px]",
+          "first:group-data-[orientation=vertical]/list:after:top-[37px]"
+        ]
+      },
+      intent: {
+        basic: "",
+        neutral: "",
+        success: ""
+      },
+      disabled: {
+        true: "before:opacity-dim-3",
+        false: ""
+      },
+      disabledAfter: {
+        true: "after:opacity-dim-3",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      disabled: false,
+      disabledAfter: false,
+      size: "lg",
+      intent: "basic"
+    }
+  }
+);
+var stepButtonVariant = (0, import_class_variance_authority3.cva)(
+  [
+    "relative flex group/btn disabled:cursor-default",
+    // Horizontal orientation
+    "group-data-[orientation=horizontal]/list:flex-col group-data-[orientation=horizontal]/list:items-center",
+    "group-data-[orientation=horizontal]/list:text-center group-data-[orientation=horizontal]/list:mx-sm",
+    "group-first/item:group-data-[orientation=horizontal]/list:ml-0 group-last/item:group-data-[orientation=horizontal]/list:mr-0",
+    // Vertical orientation
+    "group-data-[orientation=vertical]/list:flex-row group-data-[orientation=vertical]/list:items-start",
+    "group-data-[orientation=vertical]/list:text-left group-data-[orientation=vertical]/list:my-sm",
+    "group-first/item:group-data-[orientation=vertical]/list:mt-0 group-last/item:group-data-[orientation=vertical]/list:mb-0"
+  ],
+  {
+    variants: {
+      size: {
+        sm: [
+          "group-data-[orientation=horizontal]/list:min-w-sz-16 group-data-[orientation=horizontal]/list:mt-[16px]",
+          "group-data-[orientation=vertical]/list:min-h-sz-16 group-data-[orientation=vertical]/list:ml-[16px]"
+        ],
+        md: [
+          "group-data-[orientation=horizontal]/list:min-w-sz-24 group-data-[orientation=horizontal]/list:mt-[24px]",
+          "group-data-[orientation=vertical]/list:min-h-sz-24 group-data-[orientation=vertical]/list:ml-[24px]"
+        ],
+        lg: [
+          "group-data-[orientation=horizontal]/list:min-w-sz-32 group-data-[orientation=horizontal]/list:mt-[32px]",
+          "group-data-[orientation=vertical]/list:min-h-sz-32 group-data-[orientation=vertical]/list:ml-[32px]"
+        ]
+      },
+      readOnly: {
+        true: "cursor-default",
+        false: "cursor-pointer"
+      }
+    },
+    defaultVariants: {
+      size: "lg",
+      readOnly: false
+    }
+  }
+);
+
+// src/progress-tracker/ProgressTrackerStepIndicator.tsx
+var import_Check = require("@spark-ui/icons/Check");
+
+// src/icon/Icon.tsx
+var import_react4 = require("react");
+
+// src/slot/Slot.tsx
+var import_radix_ui = require("radix-ui");
+var import_react3 = require("react");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var Slottable = import_radix_ui.Slot.Slottable;
+var Slot = ({ ref, ...props }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_radix_ui.Slot.Root, { ref, ...props });
+};
+
+// src/visually-hidden/VisuallyHidden.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var VisuallyHidden = ({ asChild = false, ref, ...props }) => {
+  const Component = asChild ? Slot : "span";
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    Component,
+    {
+      ...props,
+      ref,
+      style: {
+        // See: https://github.com/twbs/bootstrap/blob/main/scss/mixins/_visually-hidden.scss
+        position: "absolute",
+        border: 0,
+        width: 1,
+        height: 1,
+        padding: 0,
+        margin: -1,
+        overflow: "hidden",
+        clip: "rect(0, 0, 0, 0)",
+        whiteSpace: "nowrap",
+        wordWrap: "normal",
+        ...props.style
+      }
+    }
+  );
+};
+VisuallyHidden.displayName = "VisuallyHidden";
+
+// src/icon/Icon.styles.tsx
+var import_internal_utils = require("@spark-ui/internal-utils");
+var import_class_variance_authority4 = require("class-variance-authority");
+var iconStyles = (0, import_class_variance_authority4.cva)(["fill-current shrink-0"], {
+  variants: {
+    /**
+     * Color scheme of the icon.
+     */
+    intent: (0, import_internal_utils.makeVariants)({
+      current: ["text-current"],
+      main: ["text-main"],
+      support: ["text-support"],
+      accent: ["text-accent"],
+      basic: ["text-basic"],
+      success: ["text-success"],
+      alert: ["text-alert"],
+      error: ["text-error"],
+      info: ["text-info"],
+      neutral: ["text-neutral"]
+    }),
+    /**
+     * Sets the size of the icon.
+     */
+    size: (0, import_internal_utils.makeVariants)({
+      current: ["u-current-font-size"],
+      sm: ["w-sz-16", "h-sz-16"],
+      md: ["w-sz-24", "h-sz-24"],
+      lg: ["w-sz-32", "h-sz-32"],
+      xl: ["w-sz-40", "h-sz-40"]
+    })
+  }
+});
+
+// src/icon/Icon.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var Icon = ({
+  label,
+  className,
+  size = "current",
+  intent = "current",
+  children,
+  ...others
+}) => {
+  const child = import_react4.Children.only(children);
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+    (0, import_react4.cloneElement)(child, {
+      className: iconStyles({ className, size, intent }),
+      "data-spark-component": "icon",
+      "aria-hidden": "true",
+      focusable: "false",
+      ...others
+    }),
+    label && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(VisuallyHidden, { children: label })
+  ] });
+};
+Icon.displayName = "Icon";
+
+// src/progress-tracker/ProgressTrackerStepIndicator.styles.ts
+var import_class_variance_authority5 = require("class-variance-authority");
+var stepIndicatorVariant = (0, import_class_variance_authority5.cva)(
+  [
+    "relative flex shrink-0 justify-center items-center",
+    "rounded-full",
+    "text-body-2 font-bold",
+    "group-disabled/btn:opacity-dim-3"
+  ],
+  {
+    variants: {
+      size: {
+        sm: [
+          "w-sz-16 h-sz-16",
+          "group-data-[orientation=horizontal]/list:mt-[-16px]",
+          "group-data-[orientation=vertical]/list:ml-[-16px]"
+        ],
+        md: [
+          "w-sz-24 h-sz-24",
+          "group-data-[orientation=horizontal]/list:mt-[-24px]",
+          "group-data-[orientation=vertical]/list:ml-[-24px]"
+        ],
+        lg: [
+          "w-sz-32 h-sz-32",
+          "group-data-[orientation=horizontal]/list:mt-[-32px]",
+          "group-data-[orientation=vertical]/list:ml-[-32px]"
+        ]
+      },
+      intent: {
+        basic: "",
+        neutral: "",
+        success: ""
+      },
+      state: {
+        complete: "",
+        incomplete: "",
+        active: ""
+      }
+    },
+    /**
+     * Known type issue with CVA compoundVariants and VS Code/Intellisense:
+     * https://github.com/joe-bell/cva/discussions/195#discussioncomment-6750163
+     * */
+    /* @ts-ignore */
+    compoundVariants: [
+      // Basic
+      {
+        intent: "basic",
+        state: ["complete", "incomplete"],
+        class: [
+          "text-on-basic-container bg-basic-container",
+          "group-hover/btn:group-data-[interactive=true]/btn:bg-basic-container-hovered",
+          "group-hover/btn:group-data-[interactive=false]/btn:bg-basic-container"
+        ]
+      },
+      {
+        intent: "basic",
+        state: "active",
+        class: "text-on-basic bg-basic"
+      },
+      // Neutral
+      {
+        intent: "neutral",
+        state: ["complete", "incomplete"],
+        class: [
+          "text-on-neutral-container bg-neutral-container",
+          "group-hover/btn:group-data-[interactive=true]/btn:bg-neutral-container-hovered",
+          "group-hover/btn:group-data-[interactive=false]/btn:bg-neutral-container"
+        ]
+      },
+      {
+        intent: "neutral",
+        state: "active",
+        class: "text-on-neutral bg-neutral"
+      },
+      // Success
+      {
+        intent: "success",
+        state: ["complete", "incomplete"],
+        class: [
+          "text-on-success-container bg-success-container",
+          "group-hover/btn:group-data-[interactive=true]/btn:bg-success-container-hovered",
+          "group-hover/btn:group-data-[interactive=false]/btn:bg-success-container"
+        ]
+      },
+      {
+        intent: "success",
+        state: "active",
+        class: "text-on-success bg-success"
+      }
+    ],
+    defaultVariants: {
+      size: "lg",
+      state: "incomplete",
+      intent: "basic"
+    }
+  }
+);
+
+// src/progress-tracker/ProgressTrackerStepIndicator.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var CompleteIndicator = () => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon, { size: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_Check.Check, {}) });
+var ProgressTrackerStepIndicator = ({
+  complete,
+  incomplete,
+  className
+}) => {
+  const { size, intent } = useProgressTrackerContext();
+  const { index, state } = useProgressTrackerStepContext();
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: stepIndicatorVariant({ size, intent, state, className }), "aria-hidden": "true", children: size !== "sm" && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+    state === "complete" && (complete === void 0 ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(CompleteIndicator, {}) : complete),
+    state !== "complete" && (incomplete === void 0 ? `${index + 1}` : incomplete)
+  ] }) });
+};
+ProgressTrackerStepIndicator.displayName = "ProgressTracker.StepIndicator";
+
+// src/progress-tracker/ProgressTrackerStep.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var ProgressTrackerStep = ({
+  disabled = false,
+  children,
+  "aria-label": ariaLabel,
+  className,
+  ref,
+  ...rest
+}) => {
+  const {
+    stepIndex: currentStepIndex,
+    steps,
+    onStepClick,
+    setSteps,
+    size,
+    intent,
+    readOnly
+  } = useProgressTrackerContext();
+  const stepId = `${ID_PREFIX}-step-${(0, import_react5.useId)()}`;
+  const stepIndex = [...steps.keys()].indexOf(stepId);
+  const disabledAfter = (() => {
+    const nextStepId = [...steps.keys()][stepIndex + 1];
+    return !!(nextStepId && steps.get(nextStepId)?.includes("disabled"));
+  })();
+  const progressState = (() => {
+    if (stepIndex === currentStepIndex) return "active";
+    else if (stepIndex < currentStepIndex) return "complete";
+    else return "incomplete";
+  })();
+  (0, import_react5.useEffect)(() => {
+    setSteps((steps2) => {
+      const newSteps = new Map(steps2);
+      return newSteps.set(
+        stepId,
+        [progressState, disabled ? "disabled" : ""].filter((v) => !!v)
+      );
+    });
+    return () => {
+      setSteps((steps2) => {
+        steps2.delete(stepId);
+        return steps2;
+      });
+    };
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    "li",
+    {
+      "data-spark-component": "progress-tracker-step",
+      id: stepId,
+      ref,
+      "data-state": progressState,
+      ...progressState === "active" && {
+        "aria-current": "step"
+      },
+      className: stepItemVariant({
+        size,
+        intent,
+        disabled,
+        disabledAfter
+      }),
+      ...rest,
+      children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        "button",
+        {
+          type: "button",
+          "aria-label": ariaLabel,
+          "data-interactive": !disabled && !readOnly,
+          ...!disabled && !readOnly && {
+            onClick: () => onStepClick?.(stepIndex)
+          },
+          disabled,
+          className: stepButtonVariant({
+            size,
+            readOnly,
+            className
+          }),
+          children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            ProgressTrackerStepContext.Provider,
+            {
+              value: {
+                index: stepIndex,
+                state: progressState
+              },
+              children: children || /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ProgressTrackerStepIndicator, {})
+            }
+          )
+        }
+      )
+    }
+  );
+};
+ProgressTrackerStep.displayName = "ProgressTracker.Step";
+
+// src/progress-tracker/ProgressTrackerStepLabel.tsx
+var import_class_variance_authority6 = require("class-variance-authority");
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var stepLabel = (0, import_class_variance_authority6.cva)(
+  [
+    "flex text-body-2 ",
+    "text-on-surface group-disabled/btn:text-on-surface/dim-1",
+    "group-data-[orientation=horizontal]/list:mt-md",
+    "group-data-[orientation=vertical]/list:ml-md",
+    "group-data-[orientation=vertical]/list:my-auto"
+  ],
+  {
+    variants: {
+      state: {
+        complete: "",
+        incomplete: "",
+        active: "font-bold"
+      }
+    }
+  }
+);
+var ProgressTrackerStepLabel = ({
+  className,
+  children
+}) => {
+  const { state } = useProgressTrackerStepContext();
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: stepLabel({ state, className }), children });
+};
+ProgressTrackerStepLabel.displayName = "ProgressTracker.StepLabel";
+
+// src/progress-tracker/index.ts
+var ProgressTracker2 = Object.assign(ProgressTracker, {
+  Step: ProgressTrackerStep,
+  StepLabel: ProgressTrackerStepLabel,
+  StepIndicator: ProgressTrackerStepIndicator
+});
+ProgressTracker2.displayName = "ProgressTracker";
+ProgressTrackerStep.displayName = "ProgressTracker.Step";
+ProgressTrackerStepLabel.displayName = "ProgressTracker.StepLabel";
+ProgressTrackerStepIndicator.displayName = "ProgressTracker.StepIndicator";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ProgressTracker
+});
+//# sourceMappingURL=index.js.map