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

Yamada UI stepper component

"use client"
import {
  StepDescription
} from "./chunk-CCS4AQSX.mjs";
import {
  StepSeparator
} from "./chunk-NWJ6KBSI.mjs";
import {
  StepStatus
} from "./chunk-CCN2RFBK.mjs";
import {
  StepTitle
} from "./chunk-VYZV44UU.mjs";
import {
  Step
} from "./chunk-ABUIE4CG.mjs";
import {
  StepperDescendantsContextProvider,
  StepperProvider,
  useStepper
} from "./chunk-CGZP2FXU.mjs";

// src/stepper.tsx
import {
  forwardRef,
  omitThemeProps,
  ui,
  useComponentMultiStyle
} from "@yamada-ui/core";
import { cx } from "@yamada-ui/utils";
import { useMemo } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
var Stepper = forwardRef((props, ref) => {
  const [styles, mergedProps] = useComponentMultiStyle("Stepper", props);
  const { className, children, steps, ...computedProps } = omitThemeProps(mergedProps);
  const { descendants, getContainerProps, ...rest } = useStepper(computedProps);
  const computedChildren = useMemo(() => {
    const hasChildren = children != null;
    if (hasChildren) {
      return children;
    } else {
      return steps == null ? void 0 : steps.map(
        ({
          description,
          hasSeparator = true,
          title,
          descriptionProps,
          separatorProps,
          statusProps,
          titleProps,
          ...rest2
        }, index) => /* @__PURE__ */ jsxs(Step, { ...rest2, children: [
          /* @__PURE__ */ jsx(StepStatus, { ...statusProps }),
          /* @__PURE__ */ jsxs(ui.div, { flexShrink: 0, children: [
            title ? /* @__PURE__ */ jsx(StepTitle, { ...titleProps, children: title }) : null,
            description ? /* @__PURE__ */ jsx(StepDescription, { ...descriptionProps, children: description }) : null
          ] }),
          hasSeparator ? /* @__PURE__ */ jsx(StepSeparator, { ...separatorProps }) : null
        ] }, index)
      );
    }
  }, [children, steps]);
  const css = { ...styles.stepper };
  return /* @__PURE__ */ jsx(StepperDescendantsContextProvider, { value: descendants, children: /* @__PURE__ */ jsx(StepperProvider, { value: { ...rest, styles }, children: /* @__PURE__ */ jsx(
    ui.div,
    {
      className: cx("ui-stepper", className),
      __css: css,
      ...getContainerProps({}, ref),
      children: computedChildren
    }
  ) }) });
});
Stepper.displayName = "Stepper";
Stepper.__ui__ = "Stepper";

export {
  Stepper
};
//# sourceMappingURL=chunk-KQW5T37Q.mjs.map