"use client";
import { jsx, jsxs } from "react/jsx-runtime";
import { forwardRef, createContext, useContext } from "react";
import flattenChildren from "react-keyed-flatten-children";
import { useCSSPropsPolyfill } from "./tailwind/useCSSPropsPolyfill.js";
import { getCSSPropsAttributes } from "./tailwind/cssProps.js";
import { classNames } from "../utils/classNames.js";
import { Check } from "../icons/Check.js";
const ExperimentalStepperRoot = forwardRef(
  ({
    count = 1,
    currentIndex: passedCurrentIndex,
    labelPosition,
    className,
    style,
    children,
    ...props
  }, ref) => {
    const { polyfillAttributes, polyfillElement } = useCSSPropsPolyfill("stepper", { labelPosition });
    const childrenArray = children ? flattenChildren(children) : Array.from({ length: Math.max(1, count) }, (_, index) => /* @__PURE__ */ jsx(ExperimentalStepperStep, {}, index));
    const currentIndex = Math.max(
      0,
      Math.min(
        childrenArray.length - 1,
        Number.isInteger(passedCurrentIndex) ? passedCurrentIndex : Math.round(passedCurrentIndex)
      )
    );
    return /* @__PURE__ */ jsxs(
      "div",
      {
        className: classNames(["gds-stepper h-max", className]),
        ...getCSSPropsAttributes("stepper", { labelPosition }, style),
        ...polyfillAttributes,
        children: [
          polyfillElement,
          /* @__PURE__ */ jsx("ol", { ref, className: "flex gap-1", ...props, children: childrenArray.map((child, childIndex) => /* @__PURE__ */ jsx(ExperimentalStepperStepContext.Provider, { value: { index: childIndex, currentIndex }, children: child }, childIndex)) })
        ]
      }
    );
  }
);
ExperimentalStepperRoot.displayName = "ExperimentalStepper";
const ExperimentalStepperStepContext = createContext({
  index: 0,
  currentIndex: 0
});
const ExperimentalStepperStep = forwardRef(
  ({ className, children, ...props }, ref) => {
    const { index, currentIndex } = useContext(ExperimentalStepperStepContext);
    const isCurrent = index === currentIndex;
    const isComplete = index < currentIndex;
    return /* @__PURE__ */ jsxs(
      "li",
      {
        ref,
        "aria-current": isCurrent ? "step" : void 0,
        "data-state": isComplete ? "complete" : isCurrent ? "current" : "incomplete",
        className: classNames([
          `group/stepper-step flex min-w-4 flex-1 flex-col gap-2
          @prop-label-position-bottom/stepper:flex-col-reverse`,
          className
        ]),
        ...props,
        children: [
          children ? /* @__PURE__ */ jsxs(
            "span",
            {
              className: `
              flex items-center gap-1 px-1
              @prop-label-position-hidden/stepper:sr-only
            `,
              children: [
                /* @__PURE__ */ jsx(
                  "span",
                  {
                    "aria-hidden": "true",
                    className: `
                flex size-4 items-center justify-center rounded-full bg-white/4 text-10 text-white/88 transition ease-out
                group-data-[state=current]/stepper-step:bg-purple/48
              `,
                    children: isComplete ? /* @__PURE__ */ jsx(Check, { alt: "Completed", size: 2.5 }) : index + 1
                  }
                ),
                /* @__PURE__ */ jsx(
                  "span",
                  {
                    className: `
                text-p12 truncate transition ease-out
                group-data-[state=complete]/stepper-step:text-white/32
                group-data-[state=current]/stepper-step:text-white
                group-data-[state=incomplete]/stepper-step:text-white/64
              `,
                    children
                  }
                )
              ]
            }
          ) : /* @__PURE__ */ jsxs("span", { className: "sr-only", children: [
            "Step ",
            index,
            isComplete ? " (completed)" : ""
          ] }),
          /* @__PURE__ */ jsx("span", { className: "block h-0.5 overflow-clip rounded-full rtl:-scale-x-100", children: /* @__PURE__ */ jsxs(
            "span",
            {
              className: `
              animate-translate-x-from-0 animate-translate-x-to-0
              absolute inset-y-0 left-0 flex w-[205%] transition duration-300 ease-out animate-duration-300 animate-ease-out
              group-data-[state=current]/stepper-step:animate-translate-x-from-[-51%]
              group-data-[state=incomplete]/stepper-step:animate-translate-x-from-[-51%]
              group-data-[state=incomplete]/stepper-step:animate-translate-x-to-[-51%]
              group-data-[state=incomplete]/stepper-step:translate-x-[-51%]
              group-data-[state=incomplete]/stepper-step:group-not-[[data-state=current]+*]/stepper-step:transition-none
              group-has-[~[data-state=current]]/stepper-step:transition-none
              rtl:flex-row-reverse
            `,
              children: [
                /* @__PURE__ */ jsx(
                  "span",
                  {
                    className: `
                flex-1 bg-purple transition duration-300 ease-out
                group-data-[state=complete]/stepper-step:bg-purple/48
              `
                  }
                ),
                /* @__PURE__ */ jsx("span", { className: "flex-1 bg-purple/16" })
              ]
            }
          ) })
        ]
      }
    );
  }
);
ExperimentalStepperStep.displayName = "ExperimentalStepper.Step";
export {
  ExperimentalStepperRoot,
  ExperimentalStepperStep
};
