import {
  Flex
} from "./chunk-25HMMI7R.js";
import {
  Typo
} from "./chunk-52MVZ6AN.js";
import {
  Avatar
} from "./chunk-JYJA2PMG.js";
import {
  CheckIcon
} from "./chunk-HLFG5ZTU.js";

// src/molecules/stepper.tsx
import { createContext, Children, useContext, useMemo } from "react";
import { Separator } from "@radix-ui/themes";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
var StepContext = createContext({
  active: false,
  completed: false,
  index: 0
});
function Root(props) {
  const {
    activeStep = 0,
    children,
    width,
    minWidth,
    maxWidth,
    direction = "vertical"
  } = props;
  return /* @__PURE__ */ jsx(
    Flex,
    {
      gap: "3",
      style: {
        width,
        minWidth,
        maxWidth
      },
      children: Children.map(children, (child, index) => {
        return /* @__PURE__ */ jsx(
          StepContext.Provider,
          {
            value: {
              active: index === activeStep,
              completed: index < activeStep,
              index,
              direction
            },
            children: child
          }
        );
      })
    }
  );
}
function Step(props) {
  const { Icon, children } = props;
  const {
    active,
    completed,
    index,
    direction = "vertical"
  } = useContext(StepContext);
  const connector = index > 0 ? /* @__PURE__ */ jsx(
    Separator,
    {
      style: {
        width: `calc(100% - 40px)`,
        position: "absolute",
        top: 16,
        right: `calc(50% + 26px)`
      }
    }
  ) : null;
  const InnerStep = useMemo(() => {
    if (active) {
      return ActiveStep;
    }
    if (completed) {
      return CompleteStep;
    }
    return IncompleteStep;
  }, [completed, active]);
  return /* @__PURE__ */ jsxs(
    Flex,
    {
      align: "center",
      direction: direction === "horizontal" ? "row" : "column",
      gap: "4",
      position: "relative",
      style: { flex: 1 },
      children: [
        connector,
        /* @__PURE__ */ jsx(InnerStep, { Icon, children })
      ]
    }
  );
}
function CompleteStep(props) {
  const { Icon, children } = props;
  const { completed, active } = useContext(StepContext);
  const background = "var(--accent-a4)";
  const border = "1px solid var(--accent-7)";
  const color = "var(--accent-contrast)";
  return /* @__PURE__ */ jsxs(Fragment, { children: [
    Icon ? /* @__PURE__ */ jsx(Icon, { active, completed }) : /* @__PURE__ */ jsx(
      Avatar,
      {
        fallback: /* @__PURE__ */ jsx(CheckIcon, { fill: color, height: 16, width: 16 }),
        radius: "full",
        size: "medium",
        style: {
          border,
          background
        }
      }
    ),
    /* @__PURE__ */ jsx(Typo, { align: "center", variant: "caption", children })
  ] });
}
function IncompleteStep(props) {
  const { Icon, children } = props;
  const { completed, active, index } = useContext(StepContext);
  const background = "var(--gray-5)";
  const color = "var(--gray-a11)";
  return /* @__PURE__ */ jsxs(Fragment, { children: [
    Icon ? /* @__PURE__ */ jsx(Icon, { active, completed }) : /* @__PURE__ */ jsx(
      Avatar,
      {
        fallback: /* @__PURE__ */ jsx(Typo, { style: { color }, children: index + 1 }),
        radius: "full",
        size: "medium",
        style: {
          background
        }
      }
    ),
    /* @__PURE__ */ jsx(Typo, { align: "center", style: { color }, variant: "caption", children })
  ] });
}
function ActiveStep(props) {
  const { Icon, children } = props;
  const { completed, active, index } = useContext(StepContext);
  const background = "var(--accent-10)";
  const color = "var(--accent-contrast)";
  return /* @__PURE__ */ jsxs(Fragment, { children: [
    Icon ? /* @__PURE__ */ jsx(Icon, { active, completed }) : /* @__PURE__ */ jsx(
      Avatar,
      {
        fallback: /* @__PURE__ */ jsx(Typo, { style: { color }, weight: "bold", children: index + 1 }),
        radius: "full",
        size: "medium",
        style: { background }
      }
    ),
    /* @__PURE__ */ jsx(Typo, { align: "center", variant: "caption", weight: "bold", children })
  ] });
}
var Stepper = {
  Root,
  Step
};

export {
  Stepper
};
//# sourceMappingURL=chunk-QIBROLOP.js.map