@yamada-ui/stepper/dist/chunk-CCN2RFBK.mjs

Yamada UI stepper component

"use client"
import {
  useStepContext
} from "./chunk-ABUIE4CG.mjs";
import {
  useStepperContext
} from "./chunk-CGZP2FXU.mjs";

// src/step-status.tsx
import { forwardRef, ui } from "@yamada-ui/core";
import { Icon } from "@yamada-ui/icon";
import { cx, runIfFunc } from "@yamada-ui/utils";
import { jsx } from "react/jsx-runtime";
var StepStatus = forwardRef(
  ({
    className,
    active = /* @__PURE__ */ jsx(StepNumber, {}),
    complete = /* @__PURE__ */ jsx(StepIcon, {}),
    incomplete = /* @__PURE__ */ jsx(StepNumber, {}),
    ...rest
  }, ref) => {
    const { styles } = useStepperContext();
    const { status, ...props } = useStepContext();
    const css = { ...styles.status };
    let component = null;
    switch (status) {
      case "complete":
        component = runIfFunc(complete, props);
        break;
      case "incomplete":
        component = runIfFunc(incomplete, props);
        break;
      case "active":
        component = runIfFunc(active, props);
        break;
    }
    return /* @__PURE__ */ jsx(
      ui.div,
      {
        ref,
        className: cx("ui-step__status", className),
        "data-status": status,
        __css: css,
        ...rest,
        children: component ? component : null
      }
    );
  }
);
StepStatus.displayName = "StepStatus";
StepStatus.__ui__ = "StepStatus";
var StepNumber = forwardRef(
  ({ className, children, ...rest }, ref) => {
    const { styles } = useStepperContext();
    const { index, status } = useStepContext();
    const css = { ...styles.number };
    return /* @__PURE__ */ jsx(
      ui.div,
      {
        ref,
        className: cx("ui-step__number", className),
        "data-status": status,
        __css: css,
        ...rest,
        children: children || index + 1
      }
    );
  }
);
StepNumber.displayName = "StepNumber";
StepNumber.__ui__ = "StepNumber";
var StepIcon = forwardRef(
  ({ className, ...rest }, ref) => {
    const { styles } = useStepperContext();
    const { status } = useStepContext();
    const as = status === "complete" ? CheckIcon : void 0;
    const css = { ...styles.icon };
    return /* @__PURE__ */ jsx(
      Icon,
      {
        ref,
        as,
        className: cx("ui-step__icon", className),
        "data-status": status,
        __css: css,
        ...rest
      }
    );
  }
);
StepIcon.displayName = "StepIcon";
StepIcon.__ui__ = "StepIcon";
var CheckIcon = (props) => {
  return /* @__PURE__ */ jsx(
    "svg",
    {
      "aria-hidden": "true",
      fill: "currentColor",
      height: "1em",
      stroke: "currentColor",
      strokeWidth: "0",
      viewBox: "0 0 20 20",
      width: "1em",
      ...props,
      children: /* @__PURE__ */ jsx(
        "path",
        {
          clipRule: "evenodd",
          d: "M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z",
          fillRule: "evenodd"
        }
      )
    }
  );
};

export {
  StepStatus,
  StepNumber,
  StepIcon
};
//# sourceMappingURL=chunk-CCN2RFBK.mjs.map