@spark-ui/components 10.0.0

package/dist/progress-tracker/index.mjs

@@ -0,0 +1,716 @@
+import {
+  Icon
+} from "../chunk-AESXFMCC.mjs";
+import "../chunk-NBZKMCHF.mjs";
+import "../chunk-4F5DOL57.mjs";
+
+// src/progress-tracker/ProgressTracker.tsx
+import { cx as cx2 } from "class-variance-authority";
+import { useState } from "react";
+
+// src/progress-tracker/ProgressTracker.styles.ts
+import { cx } from "class-variance-authority";
+var progressList = 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
+import { createContext, useContext } from "react";
+var ProgressTrackerContext = createContext(
+  {}
+);
+var ProgressTrackerStepContext = createContext(
+  {}
+);
+var useProgressTrackerContext = () => useContext(ProgressTrackerContext);
+var useProgressTrackerStepContext = () => useContext(ProgressTrackerStepContext);
+var ID_PREFIX = ":progress-tracker";
+
+// src/progress-tracker/ProgressTracker.tsx
+import { jsx } from "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] = useState(/* @__PURE__ */ new Map());
+  const Component = readOnly ? "div" : "nav";
+  return /* @__PURE__ */ jsx(
+    ProgressTrackerContext.Provider,
+    {
+      value: { stepIndex, onStepClick, steps, setSteps, size, intent, design, readOnly },
+      children: /* @__PURE__ */ jsx(
+        Component,
+        {
+          ref,
+          "data-spark-component": "progress-tracker",
+          className: cx2("inline-flex", className),
+          ...rest,
+          children: /* @__PURE__ */ jsx(
+            "ol",
+            {
+              "data-orientation": orientation,
+              className: progressList,
+              style: { counterReset: "step" },
+              children
+            }
+          )
+        }
+      )
+    }
+  );
+};
+ProgressTracker.displayName = "ProgressTracker";
+
+// src/progress-tracker/ProgressTrackerStep.tsx
+import { useEffect, useId } from "react";
+
+// src/progress-tracker/ProgressTrackerStep.styles.ts
+import { cva } from "class-variance-authority";
+var stepItemVariant = 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 = 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
+import { Check } from "@spark-ui/icons/Check";
+
+// src/progress-tracker/ProgressTrackerStepIndicator.styles.ts
+import { cva as cva2 } from "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 = cva2(
+  [
+    "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
+import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
+var CompleteIndicator = () => /* @__PURE__ */ jsx2(Icon, { size: "sm", children: /* @__PURE__ */ jsx2(Check, {}) });
+var ProgressTrackerStepIndicator = ({
+  complete,
+  incomplete,
+  className
+}) => {
+  const { size, intent, design } = useProgressTrackerContext();
+  const { index, state } = useProgressTrackerStepContext();
+  return /* @__PURE__ */ jsx2(
+    "span",
+    {
+      className: stepIndicatorVariant({ size, intent, design, state, className }),
+      "aria-hidden": "true",
+      children: size !== "sm" && /* @__PURE__ */ jsxs(Fragment, { children: [
+        state === "complete" && (complete === void 0 ? /* @__PURE__ */ jsx2(CompleteIndicator, {}) : complete),
+        state !== "complete" && (incomplete === void 0 ? `${index + 1}` : incomplete)
+      ] })
+    }
+  );
+};
+ProgressTrackerStepIndicator.displayName = "ProgressTracker.StepIndicator";
+
+// src/progress-tracker/ProgressTrackerStep.tsx
+import { jsx as jsx3 } from "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-${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";
+  })();
+  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__ */ jsx3(
+    "li",
+    {
+      id: stepId,
+      ref,
+      "data-state": progressState,
+      ...progressState === "active" && {
+        "aria-current": "step"
+      },
+      className: stepItemVariant({
+        size,
+        intent,
+        disabled,
+        disabledAfter
+      }),
+      ...rest,
+      children: /* @__PURE__ */ jsx3(
+        "button",
+        {
+          type: "button",
+          "aria-label": ariaLabel,
+          "data-interactive": !disabled && !readOnly,
+          ...!disabled && !readOnly && {
+            onClick: () => onStepClick?.(stepIndex)
+          },
+          disabled,
+          className: stepButtonVariant({
+            size,
+            readOnly,
+            className
+          }),
+          children: /* @__PURE__ */ jsx3(
+            ProgressTrackerStepContext.Provider,
+            {
+              value: {
+                index: stepIndex,
+                state: progressState
+              },
+              children: children || /* @__PURE__ */ jsx3(ProgressTrackerStepIndicator, {})
+            }
+          )
+        }
+      )
+    }
+  );
+};
+ProgressTrackerStep.displayName = "ProgressTracker.Step";
+
+// src/progress-tracker/ProgressTrackerStepLabel.styles.ts
+import { cva as cva3 } from "class-variance-authority";
+var stepLabel = cva3([
+  "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
+import { jsx as jsx4 } from "react/jsx-runtime";
+var ProgressTrackerStepLabel = ({
+  className,
+  children
+}) => /* @__PURE__ */ jsx4("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";
+export {
+  ProgressTracker2 as ProgressTracker
+};
+//# sourceMappingURL=index.mjs.map