@spark-ui/components 13.1.4 → 13.2.0

package/dist/progress-tracker/index.js

@@ -1,571 +1,2 @@
-"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
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),l=require("class-variance-authority"),n=require("react"),V=require("@spark-ui/icons/Check"),L=require("../Icon-CF0W0LKr.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 A=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"}}),R=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}}),$=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:$({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:A({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:R({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