import { jsx as a, jsxs as j, Fragment as O } from "react/jsx-runtime";
import { a as y, c as x } from "../index-BmAFn37q.mjs";
import { createContext as S, useContext as P, useState as $, useId as A, useEffect as E } from "react";
import { Check as F } from "@spark-ui/icons/Check";
import { I as M } from "../Icon-D1RueiPY.mjs";
const R = y([
  "flex flex-nowrap items-start group/list",
  "data-[orientation=horizontal]:flex-row data-[orientation=horizontal]:w-full",
  "data-[orientation=vertical]:flex-col"
]), I = S(
  {}
), T = S(
  {}
), w = () => P(I), N = () => P(T), B = ":progress-tracker", C = ({
  stepIndex: t = 0,
  onStepClick: e,
  readOnly: r = !1,
  intent: n = "basic",
  size: s = "lg",
  orientation: l = "horizontal",
  children: o,
  className: c,
  ref: h,
  ...d
}) => {
  const [g, v] = $(/* @__PURE__ */ new Map()), p = r ? "div" : "nav";
  return /* @__PURE__ */ a(
    I.Provider,
    {
      value: { stepIndex: t, onStepClick: e, steps: g, setSteps: v, size: s, intent: n, readOnly: r },
      children: /* @__PURE__ */ a(
        p,
        {
          ref: h,
          "data-spark-component": "progress-tracker",
          className: y("inline-flex", c),
          ...d,
          children: /* @__PURE__ */ a(
            "ol",
            {
              "data-orientation": l,
              className: R,
              style: { counterReset: "step" },
              children: o
            }
          )
        }
      )
    }
  );
};
C.displayName = "ProgressTracker";
const D = x(
  [
    "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: !1,
      disabledAfter: !1,
      size: "lg",
      intent: "basic"
    }
  }
), X = x(
  [
    "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: !1
    }
  }
), _ = x(
  [
    "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"
    }
  }
), q = () => /* @__PURE__ */ a(M, { size: "sm", children: /* @__PURE__ */ a(F, {}) }), b = ({
  complete: t,
  incomplete: e,
  className: r
}) => {
  const { size: n, intent: s } = w(), { index: l, state: o } = N();
  return /* @__PURE__ */ a("span", { className: _({ size: n, intent: s, state: o, className: r }), "aria-hidden": "true", children: n !== "sm" && /* @__PURE__ */ j(O, { children: [
    o === "complete" && (t === void 0 ? /* @__PURE__ */ a(q, {}) : t),
    o !== "complete" && (e === void 0 ? `${l + 1}` : e)
  ] }) });
};
b.displayName = "ProgressTracker.StepIndicator";
const z = ({
  disabled: t = !1,
  children: e,
  "aria-label": r,
  className: n,
  ref: s,
  ...l
}) => {
  const {
    stepIndex: o,
    steps: c,
    onStepClick: h,
    setSteps: d,
    size: g,
    intent: v,
    readOnly: p
  } = w(), f = `${B}-step-${A()}`, u = [...c.keys()].indexOf(f), V = (() => {
    const i = [...c.keys()][u + 1];
    return !!(i && c.get(i)?.includes("disabled"));
  })(), m = u === o ? "active" : u < o ? "complete" : "incomplete";
  return E(() => (d((i) => new Map(i).set(
    f,
    [m, t ? "disabled" : ""].filter((L) => !!L)
  )), () => {
    d((i) => (i.delete(f), i));
  }), []), /* @__PURE__ */ a(
    "li",
    {
      "data-spark-component": "progress-tracker-step",
      id: f,
      ref: s,
      "data-state": m,
      ...m === "active" && {
        "aria-current": "step"
      },
      className: D({
        size: g,
        intent: v,
        disabled: t,
        disabledAfter: V
      }),
      ...l,
      children: /* @__PURE__ */ a(
        "button",
        {
          type: "button",
          "aria-label": r,
          "data-interactive": !t && !p,
          ...!t && !p && {
            onClick: () => h?.(u)
          },
          disabled: t,
          className: X({
            size: g,
            readOnly: p,
            className: n
          }),
          children: /* @__PURE__ */ a(
            T.Provider,
            {
              value: {
                index: u,
                state: m
              },
              children: e || /* @__PURE__ */ a(b, {})
            }
          )
        }
      )
    }
  );
};
z.displayName = "ProgressTracker.Step";
const G = x(
  [
    "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"
      }
    }
  }
), k = ({
  className: t,
  children: e
}) => {
  const { state: r } = N();
  return /* @__PURE__ */ a("span", { className: G({ state: r, className: t }), children: e });
};
k.displayName = "ProgressTracker.StepLabel";
const H = Object.assign(C, {
  Step: z,
  StepLabel: k,
  StepIndicator: b
});
H.displayName = "ProgressTracker";
z.displayName = "ProgressTracker.Step";
k.displayName = "ProgressTracker.StepLabel";
b.displayName = "ProgressTracker.StepIndicator";
export {
  H as ProgressTracker
};
//# sourceMappingURL=index.mjs.map
