@spark-ui/components 10.0.0

package/dist/progress-tracker/index.js

@@ -0,0 +1,834 @@
+"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",
+  design = "outline",
+  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, design, 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",
+    // 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: ["after:bg-basic", "group-data-[orientation=horizontal]/list:before:bg-basic"],
+        support: ["after:bg-support", "group-data-[orientation=horizontal]/list:before:bg-support"],
+        main: ["after:bg-main", "group-data-[orientation=horizontal]/list:before:bg-main"],
+        neutral: ["after:bg-neutral", "group-data-[orientation=horizontal]/list:before:bg-neutral"],
+        info: ["after:bg-info", "group-data-[orientation=horizontal]/list:before:bg-info"],
+        accent: ["after:bg-accent", "group-data-[orientation=horizontal]/list:before:bg-accent"],
+        danger: ["after:bg-error", "group-data-[orientation=horizontal]/list:before:bg-error"],
+        alert: ["after:bg-alert", "group-data-[orientation=horizontal]/list:before:bg-alert"],
+        success: ["after:bg-success", "group-data-[orientation=horizontal]/list:before:bg-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");
+
+// src/progress-tracker/stepIndicatorVariants/outline.ts
+var outlineVariants = [
+  {
+    design: "outline",
+    intent: "basic",
+    state: ["complete", "incomplete"],
+    class: [
+      "text-on-basic-container bg-transparent",
+      "group-hover/btn:group-data-[interactive=true]/btn:bg-basic-container-hovered",
+      "group-hover/btn:group-data-[interactive=false]/btn:bg-transparent"
+    ]
+  },
+  {
+    design: "outline",
+    intent: "basic",
+    state: "active",
+    class: "text-on-basic-container bg-basic-container"
+  },
+  {
+    design: "outline",
+    intent: "support",
+    state: ["complete", "incomplete"],
+    class: [
+      "text-on-support-container bg-transparent",
+      "group-hover/btn:group-data-[interactive=true]/btn:bg-support-container-hovered",
+      "group-hover/btn:group-data-[interactive=false]/btn:bg-transparent"
+    ]
+  },
+  {
+    design: "outline",
+    intent: "support",
+    state: "active",
+    class: "text-on-support-container bg-support-container"
+  },
+  {
+    design: "outline",
+    intent: "main",
+    state: ["complete", "incomplete"],
+    class: [
+      "text-on-main-container bg-transparent",
+      "group-hover/btn:group-data-[interactive=true]/btn:bg-main-container-hovered",
+      "group-hover/btn:group-data-[interactive=false]/btn:bg-transparent"
+    ]
+  },
+  {
+    design: "outline",
+    intent: "main",
+    state: "active",
+    class: "text-on-main-container bg-main-container"
+  },
+  {
+    design: "outline",
+    intent: "neutral",
+    state: ["complete", "incomplete"],
+    class: [
+      "text-on-neutral-container bg-transparent",
+      "group-hover/btn:group-data-[interactive=true]/btn:bg-neutral-container-hovered",
+      "group-hover/btn:group-data-[interactive=false]/btn:bg-transparent"
+    ]
+  },
+  {
+    design: "outline",
+    intent: "neutral",
+    state: "active",
+    class: "text-on-neutral-container bg-neutral-container"
+  },
+  {
+    design: "outline",
+    intent: "info",
+    state: ["complete", "incomplete"],
+    class: [
+      "text-on-info-container bg-transparent",
+      "group-hover/btn:group-data-[interactive=true]/btn:bg-info-container-hovered",
+      "group-hover/btn:group-data-[interactive=false]/btn:bg-transparent"
+    ]
+  },
+  {
+    design: "outline",
+    intent: "info",
+    state: "active",
+    class: "text-on-info-container bg-info-container"
+  },
+  {
+    design: "outline",
+    intent: "accent",
+    state: ["complete", "incomplete"],
+    class: [
+      "text-on-accent-container bg-transparent",
+      "group-hover/btn:group-data-[interactive=true]/btn:bg-accent-container-hovered",
+      "group-hover/btn:group-data-[interactive=false]/btn:bg-transparent"
+    ]
+  },
+  {
+    design: "outline",
+    intent: "accent",
+    state: "active",
+    class: "text-on-accent-container bg-accent-container"
+  },
+  {
+    design: "outline",
+    intent: "danger",
+    state: ["complete", "incomplete"],
+    class: [
+      "text-on-error-container bg-transparent",
+      "group-hover/btn:group-data-[interactive=true]/btn:bg-error-container-hovered",
+      "group-hover/btn:group-data-[interactive=false]/btn:bg-transparent"
+    ]
+  },
+  {
+    design: "outline",
+    intent: "danger",
+    state: "active",
+    class: "text-on-error-container bg-error-container"
+  },
+  {
+    design: "outline",
+    intent: "alert",
+    state: ["complete", "incomplete"],
+    class: [
+      "text-on-alert-container bg-transparent",
+      "group-hover/btn:group-data-[interactive=true]/btn:bg-alert-container-hovered",
+      "group-hover/btn:group-data-[interactive=false]/btn:bg-transparent"
+    ]
+  },
+  {
+    design: "outline",
+    intent: "alert",
+    state: "active",
+    class: "text-on-alert-container bg-alert-container"
+  },
+  {
+    design: "outline",
+    intent: "success",
+    state: ["complete", "incomplete"],
+    class: [
+      "text-on-success-container bg-transparent",
+      "group-hover/btn:group-data-[interactive=true]/btn:bg-success-container-hovered",
+      "group-hover/btn:group-data-[interactive=false]/btn:bg-transparent"
+    ]
+  },
+  {
+    design: "outline",
+    intent: "success",
+    state: "active",
+    class: "text-on-success-container bg-success-container"
+  }
+];
+
+// src/progress-tracker/stepIndicatorVariants/tinted.ts
+var tintedVariants = [
+  {
+    design: "tinted",
+    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"
+    ]
+  },
+  {
+    design: "tinted",
+    intent: "basic",
+    state: "active",
+    class: "text-on-basic bg-basic"
+  },
+  {
+    design: "tinted",
+    intent: "support",
+    state: ["complete", "incomplete"],
+    class: [
+      "text-on-support-container bg-support-container",
+      "group-hover/btn:group-data-[interactive=true]/btn:bg-support-container-hovered",
+      "group-hover/btn:group-data-[interactive=false]/btn:bg-support-container"
+    ]
+  },
+  {
+    design: "tinted",
+    intent: "support",
+    state: "active",
+    class: "text-on-support bg-support"
+  },
+  {
+    design: "tinted",
+    intent: "main",
+    state: ["complete", "incomplete"],
+    class: [
+      "text-on-main-container bg-main-container",
+      "group-hover/btn:group-data-[interactive=true]/btn:bg-main-container-hovered",
+      "group-hover/btn:group-data-[interactive=false]/btn:bg-main-container"
+    ]
+  },
+  {
+    design: "tinted",
+    intent: "main",
+    state: "active",
+    class: "text-on-main bg-main"
+  },
+  {
+    design: "tinted",
+    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"
+    ]
+  },
+  {
+    design: "tinted",
+    intent: "neutral",
+    state: "active",
+    class: "text-on-neutral bg-neutral"
+  },
+  {
+    design: "tinted",
+    intent: "info",
+    state: ["complete", "incomplete"],
+    class: [
+      "text-on-info-container bg-info-container",
+      "group-hover/btn:group-data-[interactive=true]/btn:bg-info-container-hovered",
+      "group-hover/btn:group-data-[interactive=false]/btn:bg-info-container"
+    ]
+  },
+  {
+    design: "tinted",
+    intent: "info",
+    state: "active",
+    class: "text-on-info bg-info"
+  },
+  {
+    design: "tinted",
+    intent: "accent",
+    state: ["complete", "incomplete"],
+    class: [
+      "text-on-accent-container bg-accent-container",
+      "group-hover/btn:group-data-[interactive=true]/btn:bg-accent-container-hovered",
+      "group-hover/btn:group-data-[interactive=false]/btn:bg-accent-container"
+    ]
+  },
+  {
+    design: "tinted",
+    intent: "accent",
+    state: "active",
+    class: "text-on-accent bg-accent"
+  },
+  {
+    design: "tinted",
+    intent: "danger",
+    state: ["complete", "incomplete"],
+    class: [
+      "text-on-error-container bg-error-container",
+      "group-hover/btn:group-data-[interactive=true]/btn:bg-error-container-hovered",
+      "group-hover/btn:group-data-[interactive=false]/btn:bg-error-container"
+    ]
+  },
+  {
+    design: "tinted",
+    intent: "danger",
+    state: "active",
+    class: "text-on-error bg-error"
+  },
+  {
+    design: "tinted",
+    intent: "alert",
+    state: ["complete", "incomplete"],
+    class: [
+      "text-on-alert-container bg-alert-container",
+      "group-hover/btn:group-data-[interactive=true]/btn:bg-alert-container-hovered",
+      "group-hover/btn:group-data-[interactive=false]/btn:bg-alert-container"
+    ]
+  },
+  {
+    design: "tinted",
+    intent: "alert",
+    state: "active",
+    class: "text-on-alert bg-alert"
+  },
+  {
+    design: "tinted",
+    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"
+    ]
+  },
+  {
+    design: "tinted",
+    intent: "success",
+    state: "active",
+    class: "text-on-success bg-success"
+  }
+];
+
+// src/progress-tracker/ProgressTrackerStepIndicator.styles.ts
+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: "",
+        support: "",
+        main: "",
+        neutral: "",
+        info: "",
+        accent: "",
+        danger: "",
+        alert: "",
+        success: ""
+      },
+      design: {
+        outline: "border-sm",
+        tinted: ""
+      },
+      state: {
+        complete: "",
+        incomplete: "",
+        active: ""
+      }
+    },
+    /**
+     * Known type issue with CVA compoundVariants and VS Code/Intellisense:
+     * https://github.com/joe-bell/cva/discussions/195#discussioncomment-6750163
+     * */
+    /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
+    /* @ts-ignore */
+    compoundVariants: [...outlineVariants, ...tintedVariants],
+    defaultVariants: {
+      size: "lg",
+      state: "incomplete",
+      intent: "basic",
+      design: "outline"
+    }
+  }
+);
+
+// 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, design } = useProgressTrackerContext();
+  const { index, state } = useProgressTrackerStepContext();
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    "span",
+    {
+      className: stepIndicatorVariant({ size, intent, design, 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",
+    {
+      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.styles.ts
+var import_class_variance_authority6 = require("class-variance-authority");
+var stepLabel = (0, import_class_variance_authority6.cva)([
+  "flex text-body-2 font-bold",
+  "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"
+]);
+
+// src/progress-tracker/ProgressTrackerStepLabel.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var ProgressTrackerStepLabel = ({
+  className,
+  children
+}) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: stepLabel({ 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