@fangzsx/component-library 0.0.14 → 0.0.16

package/dist/components/Stepper/index.js

@@ -0,0 +1,607 @@
+import { jsxs as P, jsx as s } from "react/jsx-runtime";
+import { Stepper as ee } from "@mui/material";
+import { B as te } from "../../Box-DPlM16yK.js";
+import * as u from "react";
+import { g as A, a as D, P as e } from "../../generateUtilityClasses-BCID9NF1.js";
+import { u as V, s as C, c as j, a as W, m as R } from "../../useForkRef-gLJikozA.js";
+import { i as oe } from "../../integerPropType-BihGt2aU.js";
+import { u as $ } from "../../useSlot-jPRhj-MO.js";
+import { c as H, S as ne } from "../../createSvgIcon-ChKzptBc.js";
+const _ = /* @__PURE__ */ u.createContext({});
+process.env.NODE_ENV !== "production" && (_.displayName = "StepperContext");
+const k = /* @__PURE__ */ u.createContext({});
+process.env.NODE_ENV !== "production" && (k.displayName = "StepContext");
+function re(t) {
+  return A("MuiStep", t);
+}
+D("MuiStep", ["root", "horizontal", "vertical", "alternativeLabel", "completed"]);
+const ae = (t) => {
+  const {
+    classes: o,
+    orientation: n,
+    alternativeLabel: r,
+    completed: a
+  } = t;
+  return W({
+    root: ["root", n, r && "alternativeLabel", a && "completed"]
+  }, re, o);
+}, le = C("div", {
+  name: "MuiStep",
+  slot: "Root",
+  overridesResolver: (t, o) => {
+    const {
+      ownerState: n
+    } = t;
+    return [o.root, o[n.orientation], n.alternativeLabel && o.alternativeLabel, n.completed && o.completed];
+  }
+})({
+  variants: [{
+    props: {
+      orientation: "horizontal"
+    },
+    style: {
+      paddingLeft: 8,
+      paddingRight: 8
+    }
+  }, {
+    props: {
+      alternativeLabel: !0
+    },
+    style: {
+      flex: 1,
+      position: "relative"
+    }
+  }]
+}), J = /* @__PURE__ */ u.forwardRef(function(o, n) {
+  const r = V({
+    props: o,
+    name: "MuiStep"
+  }), {
+    active: a,
+    children: l,
+    className: b,
+    component: i = "div",
+    completed: p,
+    disabled: m,
+    expanded: d = !1,
+    index: c,
+    last: S,
+    ...E
+  } = r, {
+    activeStep: N,
+    connector: L,
+    alternativeLabel: I,
+    orientation: w,
+    nonLinear: O
+  } = u.useContext(_);
+  let [x = !1, M = !1, v = !1] = [a, p, m];
+  N === c ? x = a !== void 0 ? a : !0 : !O && N > c ? M = p !== void 0 ? p : !0 : !O && N < c && (v = m !== void 0 ? m : !0);
+  const T = u.useMemo(() => ({
+    index: c,
+    last: S,
+    expanded: d,
+    icon: c + 1,
+    active: x,
+    completed: M,
+    disabled: v
+  }), [c, S, d, x, M, v]), f = {
+    ...r,
+    active: x,
+    orientation: w,
+    alternativeLabel: I,
+    completed: M,
+    disabled: v,
+    expanded: d,
+    component: i
+  }, h = ae(f), g = /* @__PURE__ */ P(le, {
+    as: i,
+    className: j(h.root, b),
+    ref: n,
+    ownerState: f,
+    ...E,
+    children: [L && I && c !== 0 ? L : null, l]
+  });
+  return /* @__PURE__ */ s(k.Provider, {
+    value: T,
+    children: L && !I && c !== 0 ? /* @__PURE__ */ P(u.Fragment, {
+      children: [L, g]
+    }) : g
+  });
+});
+process.env.NODE_ENV !== "production" && (J.propTypes = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * Sets the step as active. Is passed to child components.
+   */
+  active: e.bool,
+  /**
+   * Should be `Step` sub-components such as `StepLabel`, `StepContent`.
+   */
+  children: e.node,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: e.object,
+  /**
+   * @ignore
+   */
+  className: e.string,
+  /**
+   * Mark the step as completed. Is passed to child components.
+   */
+  completed: e.bool,
+  /**
+   * The component used for the root node.
+   * Either a string to use a HTML element or a component.
+   */
+  component: e.elementType,
+  /**
+   * If `true`, the step is disabled, will also disable the button if
+   * `StepButton` is a child of `Step`. Is passed to child components.
+   */
+  disabled: e.bool,
+  /**
+   * Expand the step.
+   * @default false
+   */
+  expanded: e.bool,
+  /**
+   * The position of the step.
+   * The prop defaults to the value inherited from the parent Stepper component.
+   */
+  index: oe,
+  /**
+   * If `true`, the Step is displayed as rendered last.
+   * The prop defaults to the value inherited from the parent Stepper component.
+   */
+  last: e.bool,
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: e.oneOfType([e.arrayOf(e.oneOfType([e.func, e.object, e.bool])), e.func, e.object])
+});
+const se = H(/* @__PURE__ */ s("path", {
+  d: "M12 0a12 12 0 1 0 0 24 12 12 0 0 0 0-24zm-2 17l-5-5 1.4-1.4 3.6 3.6 7.6-7.6L19 8l-9 9z"
+}), "CheckCircle"), ie = H(/* @__PURE__ */ s("path", {
+  d: "M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"
+}), "Warning");
+function ce(t) {
+  return A("MuiStepIcon", t);
+}
+const z = D("MuiStepIcon", ["root", "active", "completed", "error", "text"]);
+var G;
+const pe = (t) => {
+  const {
+    classes: o,
+    active: n,
+    completed: r,
+    error: a
+  } = t;
+  return W({
+    root: ["root", n && "active", r && "completed", a && "error"],
+    text: ["text"]
+  }, ce, o);
+}, U = C(ne, {
+  name: "MuiStepIcon",
+  slot: "Root"
+})(R(({
+  theme: t
+}) => ({
+  display: "block",
+  transition: t.transitions.create("color", {
+    duration: t.transitions.duration.shortest
+  }),
+  color: (t.vars || t).palette.text.disabled,
+  [`&.${z.completed}`]: {
+    color: (t.vars || t).palette.primary.main
+  },
+  [`&.${z.active}`]: {
+    color: (t.vars || t).palette.primary.main
+  },
+  [`&.${z.error}`]: {
+    color: (t.vars || t).palette.error.main
+  }
+}))), de = C("text", {
+  name: "MuiStepIcon",
+  slot: "Text"
+})(R(({
+  theme: t
+}) => ({
+  fill: (t.vars || t).palette.primary.contrastText,
+  fontSize: t.typography.caption.fontSize,
+  fontFamily: t.typography.fontFamily
+}))), K = /* @__PURE__ */ u.forwardRef(function(o, n) {
+  const r = V({
+    props: o,
+    name: "MuiStepIcon"
+  }), {
+    active: a = !1,
+    className: l,
+    completed: b = !1,
+    error: i = !1,
+    icon: p,
+    ...m
+  } = r, d = {
+    ...r,
+    active: a,
+    completed: b,
+    error: i
+  }, c = pe(d);
+  if (typeof p == "number" || typeof p == "string") {
+    const S = j(l, c.root);
+    return i ? /* @__PURE__ */ s(U, {
+      as: ie,
+      className: S,
+      ref: n,
+      ownerState: d,
+      ...m
+    }) : b ? /* @__PURE__ */ s(U, {
+      as: se,
+      className: S,
+      ref: n,
+      ownerState: d,
+      ...m
+    }) : /* @__PURE__ */ P(U, {
+      className: S,
+      ref: n,
+      ownerState: d,
+      ...m,
+      children: [G || (G = /* @__PURE__ */ s("circle", {
+        cx: "12",
+        cy: "12",
+        r: "12"
+      })), /* @__PURE__ */ s(de, {
+        className: c.text,
+        x: "12",
+        y: "12",
+        textAnchor: "middle",
+        dominantBaseline: "central",
+        ownerState: d,
+        children: p
+      })]
+    });
+  }
+  return p;
+});
+process.env.NODE_ENV !== "production" && (K.propTypes = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * Whether this step is active.
+   * @default false
+   */
+  active: e.bool,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: e.object,
+  /**
+   * @ignore
+   */
+  className: e.string,
+  /**
+   * Mark the step as completed. Is passed to child components.
+   * @default false
+   */
+  completed: e.bool,
+  /**
+   * If `true`, the step is marked as failed.
+   * @default false
+   */
+  error: e.bool,
+  /**
+   * The label displayed in the step icon.
+   */
+  icon: e.node,
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: e.oneOfType([e.arrayOf(e.oneOfType([e.func, e.object, e.bool])), e.func, e.object])
+});
+function be(t) {
+  return A("MuiStepLabel", t);
+}
+const y = D("MuiStepLabel", ["root", "horizontal", "vertical", "label", "active", "completed", "error", "disabled", "iconContainer", "alternativeLabel", "labelContainer"]), ue = (t) => {
+  const {
+    classes: o,
+    orientation: n,
+    active: r,
+    completed: a,
+    error: l,
+    disabled: b,
+    alternativeLabel: i
+  } = t;
+  return W({
+    root: ["root", n, l && "error", b && "disabled", i && "alternativeLabel"],
+    label: ["label", r && "active", a && "completed", l && "error", b && "disabled", i && "alternativeLabel"],
+    iconContainer: ["iconContainer", r && "active", a && "completed", l && "error", b && "disabled", i && "alternativeLabel"],
+    labelContainer: ["labelContainer", i && "alternativeLabel"]
+  }, be, o);
+}, me = C("span", {
+  name: "MuiStepLabel",
+  slot: "Root",
+  overridesResolver: (t, o) => {
+    const {
+      ownerState: n
+    } = t;
+    return [o.root, o[n.orientation]];
+  }
+})({
+  display: "flex",
+  alignItems: "center",
+  [`&.${y.alternativeLabel}`]: {
+    flexDirection: "column"
+  },
+  [`&.${y.disabled}`]: {
+    cursor: "default"
+  },
+  variants: [{
+    props: {
+      orientation: "vertical"
+    },
+    style: {
+      textAlign: "left",
+      padding: "8px 0"
+    }
+  }]
+}), fe = C("span", {
+  name: "MuiStepLabel",
+  slot: "Label"
+})(R(({
+  theme: t
+}) => ({
+  ...t.typography.body2,
+  display: "block",
+  transition: t.transitions.create("color", {
+    duration: t.transitions.duration.shortest
+  }),
+  [`&.${y.active}`]: {
+    color: (t.vars || t).palette.text.primary,
+    fontWeight: 500
+  },
+  [`&.${y.completed}`]: {
+    color: (t.vars || t).palette.text.primary,
+    fontWeight: 500
+  },
+  [`&.${y.alternativeLabel}`]: {
+    marginTop: 16
+  },
+  [`&.${y.error}`]: {
+    color: (t.vars || t).palette.error.main
+  }
+}))), Se = C("span", {
+  name: "MuiStepLabel",
+  slot: "IconContainer"
+})({
+  flexShrink: 0,
+  display: "flex",
+  paddingRight: 8,
+  [`&.${y.alternativeLabel}`]: {
+    paddingRight: 0
+  }
+}), ve = C("span", {
+  name: "MuiStepLabel",
+  slot: "LabelContainer"
+})(R(({
+  theme: t
+}) => ({
+  width: "100%",
+  color: (t.vars || t).palette.text.secondary,
+  [`&.${y.alternativeLabel}`]: {
+    textAlign: "center"
+  }
+}))), F = /* @__PURE__ */ u.forwardRef(function(o, n) {
+  const r = V({
+    props: o,
+    name: "MuiStepLabel"
+  }), {
+    children: a,
+    className: l,
+    componentsProps: b = {},
+    error: i = !1,
+    icon: p,
+    optional: m,
+    slots: d = {},
+    slotProps: c = {},
+    StepIconComponent: S,
+    StepIconProps: E,
+    ...N
+  } = r, {
+    alternativeLabel: L,
+    orientation: I
+  } = u.useContext(_), {
+    active: w,
+    disabled: O,
+    completed: x,
+    icon: M
+  } = u.useContext(k), v = p || M;
+  let T = S;
+  v && !T && (T = K);
+  const f = {
+    ...r,
+    active: w,
+    alternativeLabel: L,
+    completed: x,
+    disabled: O,
+    error: i,
+    orientation: I
+  }, h = ue(f), g = {
+    slots: d,
+    slotProps: {
+      stepIcon: E,
+      ...b,
+      ...c
+    }
+  }, [Q, X] = $("root", {
+    elementType: me,
+    externalForwardedProps: {
+      ...g,
+      ...N
+    },
+    ownerState: f,
+    ref: n,
+    className: j(h.root, l)
+  }), [Y, B] = $("label", {
+    elementType: fe,
+    externalForwardedProps: g,
+    ownerState: f
+  }), [q, Z] = $("stepIcon", {
+    elementType: T,
+    externalForwardedProps: g,
+    ownerState: f
+  });
+  return /* @__PURE__ */ P(Q, {
+    ...X,
+    children: [v || q ? /* @__PURE__ */ s(Se, {
+      className: h.iconContainer,
+      ownerState: f,
+      children: /* @__PURE__ */ s(q, {
+        completed: x,
+        active: w,
+        error: i,
+        icon: v,
+        ...Z
+      })
+    }) : null, /* @__PURE__ */ P(ve, {
+      className: h.labelContainer,
+      ownerState: f,
+      children: [a ? /* @__PURE__ */ s(Y, {
+        ...B,
+        className: j(h.label, B?.className),
+        children: a
+      }) : null, m]
+    })]
+  });
+});
+process.env.NODE_ENV !== "production" && (F.propTypes = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * In most cases will simply be a string containing a title for the label.
+   */
+  children: e.node,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: e.object,
+  /**
+   * @ignore
+   */
+  className: e.string,
+  /**
+   * The props used for each slot inside.
+   * @default {}
+   * @deprecated use the `slotProps` prop instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
+   */
+  componentsProps: e.shape({
+    label: e.object
+  }),
+  /**
+   * If `true`, the step is marked as failed.
+   * @default false
+   */
+  error: e.bool,
+  /**
+   * Override the default label of the step icon.
+   */
+  icon: e.node,
+  /**
+   * The optional node to display.
+   */
+  optional: e.node,
+  /**
+   * The props used for each slot inside.
+   * @default {}
+   */
+  slotProps: e.shape({
+    label: e.oneOfType([e.func, e.object]),
+    root: e.oneOfType([e.func, e.object]),
+    stepIcon: e.oneOfType([e.func, e.object])
+  }),
+  /**
+   * The components used for each slot inside.
+   * @default {}
+   */
+  slots: e.shape({
+    label: e.elementType,
+    root: e.elementType,
+    stepIcon: e.elementType
+  }),
+  /**
+   * The component to render in place of the [`StepIcon`](https://mui.com/material-ui/api/step-icon/).
+   * @deprecated Use `slots.stepIcon` instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
+   */
+  StepIconComponent: e.elementType,
+  /**
+   * Props applied to the [`StepIcon`](https://mui.com/material-ui/api/step-icon/) element.
+   * @deprecated Use `slotProps.stepIcon` instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
+   */
+  StepIconProps: e.object,
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: e.oneOfType([e.arrayOf(e.oneOfType([e.func, e.object, e.bool])), e.func, e.object])
+});
+F.muiName = "StepLabel";
+function Ie({
+  steps: t,
+  activeStep: o = 0,
+  sx: n,
+  stepperSx: r
+}) {
+  const a = {
+    "& .MuiStepLabel-root .Mui-completed": {
+      color: "#27A4E8"
+    },
+    "& .MuiStepLabel-root .Mui-active": {
+      color: "#27A4E8"
+    },
+    "& .MuiStepLabel-root .Mui-active .MuiStepIcon-text": {
+      fill: "white"
+    },
+    "& .MuiStepIcon-root": {
+      color: "#bdbdbd",
+      width: "32px",
+      height: "32px",
+      "&.Mui-active": {
+        color: "#27A4E8"
+      },
+      "&.Mui-completed": {
+        color: "#27A4E8"
+      }
+    },
+    "& .MuiStepLabel-label": {
+      color: "#6B7C93",
+      fontSize: "14px",
+      "&.Mui-active": {
+        color: "#000000",
+        fontWeight: 600
+      },
+      "&.Mui-completed": {
+        color: "#000000"
+      }
+    },
+    "& .MuiStepConnector-line": {
+      borderColor: "#e0e0e0",
+      borderTopWidth: 1
+    },
+    "& .MuiStepConnector-root.Mui-active .MuiStepConnector-line": {
+      borderColor: "#e0e0e0"
+    },
+    "& .MuiStepConnector-root.Mui-completed .MuiStepConnector-line": {
+      borderColor: "#e0e0e0"
+    },
+    ...r
+  };
+  return /* @__PURE__ */ s(te, { sx: { width: "100%", ...n }, children: /* @__PURE__ */ s(ee, { activeStep: o, sx: a, children: t.map((l) => /* @__PURE__ */ s(J, { children: /* @__PURE__ */ s(F, { children: l.label }) }, l.label)) }) });
+}
+export {
+  Ie as Stepper
+};