@fangzsx/component-library 0.0.7 → 0.0.8

package/dist/components/Checkbox/index.js

@@ -0,0 +1,783 @@
+import { jsxs as ae, jsx as k } from "react/jsx-runtime";
+import * as f from "react";
+import { c as I, g as q, a as D, p as ie, s as j, b as B, d as L, B as le, k as _, P as o, q as de, u as ue, m as pe, j as V } from "../../ButtonBase-CAtBagnK.js";
+import { c as $ } from "../../createSvgIcon-DAI5icic.js";
+function fe(e) {
+  const {
+    controlled: t,
+    default: n,
+    name: s,
+    state: c = "value"
+  } = e, {
+    current: a
+  } = f.useRef(t !== void 0), [u, r] = f.useState(n), i = a ? t : u;
+  if (process.env.NODE_ENV !== "production") {
+    f.useEffect(() => {
+      a !== (t !== void 0) && console.error([`MUI: A component is changing the ${a ? "" : "un"}controlled ${c} state of ${s} to be ${a ? "un" : ""}controlled.`, "Elements should not switch from uncontrolled to controlled (or vice versa).", `Decide between using a controlled or uncontrolled ${s} element for the lifetime of the component.`, "The nature of the state is determined during the first render. It's considered controlled if the value is not `undefined`.", "More info: https://fb.me/react-controlled-components"].join(`
+`));
+    }, [c, s, t]);
+    const {
+      current: d
+    } = f.useRef(n);
+    f.useEffect(() => {
+      !a && JSON.stringify(n) !== JSON.stringify(d) && console.error([`MUI: A component is changing the default ${c} state of an uncontrolled ${s} after being initialized. To suppress this warning opt to use a controlled ${s}.`].join(`
+`));
+    }, [JSON.stringify(n)]);
+  }
+  const l = f.useCallback((d) => {
+    a || r(d);
+  }, []);
+  return [i, l];
+}
+function me(e, t) {
+  const n = e.charCodeAt(2);
+  return e[0] === "o" && e[1] === "n" && n >= 65 && n <= 90 && typeof t == "function";
+}
+function he(e, t) {
+  if (!e)
+    return t;
+  function n(u, r) {
+    const i = {};
+    return Object.keys(r).forEach((l) => {
+      me(l, r[l]) && typeof u[l] == "function" && (i[l] = (...d) => {
+        u[l](...d), r[l](...d);
+      });
+    }), i;
+  }
+  if (typeof e == "function" || typeof t == "function")
+    return (u) => {
+      const r = typeof t == "function" ? t(u) : t, i = typeof e == "function" ? e({
+        ...u,
+        ...r
+      }) : e, l = I(u?.className, r?.className, i?.className), d = n(i, r);
+      return {
+        ...r,
+        ...i,
+        ...d,
+        ...!!l && {
+          className: l
+        },
+        ...r?.style && i?.style && {
+          style: {
+            ...r.style,
+            ...i.style
+          }
+        },
+        ...r?.sx && i?.sx && {
+          sx: [...Array.isArray(r.sx) ? r.sx : [r.sx], ...Array.isArray(i.sx) ? i.sx : [i.sx]]
+        }
+      };
+    };
+  const s = t, c = n(e, s), a = I(s?.className, e?.className);
+  return {
+    ...t,
+    ...e,
+    ...c,
+    ...!!a && {
+      className: a
+    },
+    ...s?.style && e?.style && {
+      style: {
+        ...s.style,
+        ...e.style
+      }
+    },
+    ...s?.sx && e?.sx && {
+      sx: [...Array.isArray(s.sx) ? s.sx : [s.sx], ...Array.isArray(e.sx) ? e.sx : [e.sx]]
+    }
+  };
+}
+const J = /* @__PURE__ */ f.createContext(void 0);
+process.env.NODE_ENV !== "production" && (J.displayName = "FormControlContext");
+function ye() {
+  return f.useContext(J);
+}
+function be(e) {
+  return q("PrivateSwitchBase", e);
+}
+D("PrivateSwitchBase", ["root", "checked", "disabled", "input", "edgeStart", "edgeEnd"]);
+function ge(e) {
+  return typeof e == "string";
+}
+function Ce(e, t, n) {
+  return e === void 0 || ge(e) ? t : {
+    ...t,
+    ownerState: {
+      ...t.ownerState,
+      ...n
+    }
+  };
+}
+function xe(e, t, n) {
+  return typeof e == "function" ? e(t, n) : e;
+}
+function ke(e, t = []) {
+  if (e === void 0)
+    return {};
+  const n = {};
+  return Object.keys(e).filter((s) => s.match(/^on[A-Z]/) && typeof e[s] == "function" && !t.includes(s)).forEach((s) => {
+    n[s] = e[s];
+  }), n;
+}
+function U(e) {
+  if (e === void 0)
+    return {};
+  const t = {};
+  return Object.keys(e).filter((n) => !(n.match(/^on[A-Z]/) && typeof e[n] == "function")).forEach((n) => {
+    t[n] = e[n];
+  }), t;
+}
+function ve(e) {
+  const {
+    getSlotProps: t,
+    additionalProps: n,
+    externalSlotProps: s,
+    externalForwardedProps: c,
+    className: a
+  } = e;
+  if (!t) {
+    const y = I(n?.className, a, c?.className, s?.className), b = {
+      ...n?.style,
+      ...c?.style,
+      ...s?.style
+    }, m = {
+      ...n,
+      ...c,
+      ...s
+    };
+    return y.length > 0 && (m.className = y), Object.keys(b).length > 0 && (m.style = b), {
+      props: m,
+      internalRef: void 0
+    };
+  }
+  const u = ke({
+    ...c,
+    ...s
+  }), r = U(s), i = U(c), l = t(u), d = I(l?.className, n?.className, a, c?.className, s?.className), g = {
+    ...l?.style,
+    ...n?.style,
+    ...c?.style,
+    ...s?.style
+  }, C = {
+    ...l,
+    ...n,
+    ...i,
+    ...r
+  };
+  return d.length > 0 && (C.className = d), Object.keys(g).length > 0 && (C.style = g), {
+    props: C,
+    internalRef: l.ref
+  };
+}
+function E(e, t) {
+  const {
+    className: n,
+    elementType: s,
+    ownerState: c,
+    externalForwardedProps: a,
+    internalForwardedProps: u,
+    shouldForwardComponentProp: r = !1,
+    ...i
+  } = t, {
+    component: l,
+    slots: d = {
+      [e]: void 0
+    },
+    slotProps: g = {
+      [e]: void 0
+    },
+    ...C
+  } = a, y = d[e] || s, b = xe(g[e], c), {
+    props: {
+      component: m,
+      ...P
+    },
+    internalRef: w
+  } = ve({
+    className: n,
+    ...i,
+    externalForwardedProps: e === "root" ? C : void 0,
+    externalSlotProps: b
+  }), v = ie(w, b?.ref, t.ref), x = e === "root" ? m || l : m, O = Ce(y, {
+    ...e === "root" && !l && !d[e] && u,
+    ...e !== "root" && !d[e] && u,
+    ...P,
+    ...x && !r && {
+      as: x
+    },
+    ...x && r && {
+      component: x
+    },
+    ref: v
+  }, c);
+  return [y, O];
+}
+const Ne = (e) => {
+  const {
+    classes: t,
+    checked: n,
+    disabled: s,
+    edge: c
+  } = e, a = {
+    root: ["root", n && "checked", s && "disabled", c && `edge${B(c)}`],
+    input: ["input"]
+  };
+  return L(a, be, t);
+}, Pe = j(le, {
+  name: "MuiSwitchBase"
+})({
+  padding: 9,
+  borderRadius: "50%",
+  variants: [{
+    props: {
+      edge: "start",
+      size: "small"
+    },
+    style: {
+      marginLeft: -3
+    }
+  }, {
+    props: ({
+      edge: e,
+      ownerState: t
+    }) => e === "start" && t.size !== "small",
+    style: {
+      marginLeft: -12
+    }
+  }, {
+    props: {
+      edge: "end",
+      size: "small"
+    },
+    style: {
+      marginRight: -3
+    }
+  }, {
+    props: ({
+      edge: e,
+      ownerState: t
+    }) => e === "end" && t.size !== "small",
+    style: {
+      marginRight: -12
+    }
+  }]
+}), we = j("input", {
+  name: "MuiSwitchBase",
+  shouldForwardProp: _
+})({
+  cursor: "inherit",
+  position: "absolute",
+  opacity: 0,
+  width: "100%",
+  height: "100%",
+  top: 0,
+  left: 0,
+  margin: 0,
+  padding: 0,
+  zIndex: 1
+}), W = /* @__PURE__ */ f.forwardRef(function(t, n) {
+  const {
+    autoFocus: s,
+    checked: c,
+    checkedIcon: a,
+    defaultChecked: u,
+    disabled: r,
+    disableFocusRipple: i = !1,
+    edge: l = !1,
+    icon: d,
+    id: g,
+    inputProps: C,
+    inputRef: y,
+    name: b,
+    onBlur: m,
+    onChange: P,
+    onFocus: w,
+    readOnly: v,
+    required: x = !1,
+    tabIndex: O,
+    type: R,
+    value: S,
+    slots: G = {},
+    slotProps: K = {},
+    ...Q
+  } = t, [A, X] = fe({
+    controlled: c,
+    default: !!u,
+    name: "SwitchBase",
+    state: "checked"
+  }), N = ye(), Y = (p) => {
+    w && w(p), N && N.onFocus && N.onFocus(p);
+  }, ee = (p) => {
+    m && m(p), N && N.onBlur && N.onBlur(p);
+  }, oe = (p) => {
+    if (p.nativeEvent.defaultPrevented || v)
+      return;
+    const h = p.target.checked;
+    X(h), P && P(p, h);
+  };
+  let F = r;
+  N && typeof F > "u" && (F = N.disabled);
+  const te = R === "checkbox" || R === "radio", T = {
+    ...t,
+    checked: A,
+    disabled: F,
+    disableFocusRipple: i,
+    edge: l
+  }, H = Ne(T), M = {
+    slots: G,
+    slotProps: {
+      input: C,
+      ...K
+    }
+  }, [ne, se] = E("root", {
+    ref: n,
+    elementType: Pe,
+    className: H.root,
+    shouldForwardComponentProp: !0,
+    externalForwardedProps: {
+      ...M,
+      component: "span",
+      ...Q
+    },
+    getSlotProps: (p) => ({
+      ...p,
+      onFocus: (h) => {
+        p.onFocus?.(h), Y(h);
+      },
+      onBlur: (h) => {
+        p.onBlur?.(h), ee(h);
+      }
+    }),
+    ownerState: T,
+    additionalProps: {
+      centerRipple: !0,
+      focusRipple: !i,
+      disabled: F,
+      role: void 0,
+      tabIndex: null
+    }
+  }), [re, ce] = E("input", {
+    ref: y,
+    elementType: we,
+    className: H.input,
+    externalForwardedProps: M,
+    getSlotProps: (p) => ({
+      ...p,
+      onChange: (h) => {
+        p.onChange?.(h), oe(h);
+      }
+    }),
+    ownerState: T,
+    additionalProps: {
+      autoFocus: s,
+      checked: c,
+      defaultChecked: u,
+      disabled: F,
+      id: te ? g : void 0,
+      name: b,
+      readOnly: v,
+      required: x,
+      tabIndex: O,
+      type: R,
+      ...R === "checkbox" && S === void 0 ? {} : {
+        value: S
+      }
+    }
+  });
+  return /* @__PURE__ */ ae(ne, {
+    ...se,
+    children: [/* @__PURE__ */ k(re, {
+      ...ce
+    }), A ? a : d]
+  });
+});
+process.env.NODE_ENV !== "production" && (W.propTypes = {
+  /**
+   * If `true`, the `input` element is focused during the first mount.
+   */
+  autoFocus: o.bool,
+  /**
+   * If `true`, the component is checked.
+   */
+  checked: o.bool,
+  /**
+   * The icon to display when the component is checked.
+   */
+  checkedIcon: o.node.isRequired,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: o.object,
+  /**
+   * @ignore
+   */
+  className: o.string,
+  /**
+   * @ignore
+   */
+  defaultChecked: o.bool,
+  /**
+   * If `true`, the component is disabled.
+   */
+  disabled: o.bool,
+  /**
+   * If `true`, the  keyboard focus ripple is disabled.
+   * @default false
+   */
+  disableFocusRipple: o.bool,
+  /**
+   * If given, uses a negative margin to counteract the padding on one
+   * side (this is often helpful for aligning the left or right
+   * side of the icon with content above or below, without ruining the border
+   * size and shape).
+   * @default false
+   */
+  edge: o.oneOf(["end", "start", !1]),
+  /**
+   * The icon to display when the component is unchecked.
+   */
+  icon: o.node.isRequired,
+  /**
+   * The id of the `input` element.
+   */
+  id: o.string,
+  /**
+   * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#attributes) applied to the `input` element.
+   */
+  inputProps: o.object,
+  /**
+   * Pass a ref to the `input` element.
+   */
+  inputRef: de,
+  /*
+   * @ignore
+   */
+  name: o.string,
+  /**
+   * @ignore
+   */
+  onBlur: o.func,
+  /**
+   * Callback fired when the state is changed.
+   *
+   * @param {object} event The event source of the callback.
+   * You can pull out the new checked state by accessing `event.target.checked` (boolean).
+   */
+  onChange: o.func,
+  /**
+   * @ignore
+   */
+  onFocus: o.func,
+  /**
+   * It prevents the user from changing the value of the field
+   * (not from interacting with the field).
+   */
+  readOnly: o.bool,
+  /**
+   * If `true`, the `input` element is required.
+   */
+  required: o.bool,
+  /**
+   * The props used for each slot inside.
+   * @default {}
+   */
+  slotProps: o.shape({
+    input: o.oneOfType([o.func, o.object]),
+    root: o.oneOfType([o.func, o.object])
+  }),
+  /**
+   * The components used for each slot inside.
+   * @default {}
+   */
+  slots: o.shape({
+    input: o.elementType,
+    root: o.elementType
+  }),
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: o.object,
+  /**
+   * @ignore
+   */
+  tabIndex: o.oneOfType([o.number, o.string]),
+  /**
+   * The input component prop `type`.
+   */
+  type: o.string.isRequired,
+  /**
+   * The value of the component.
+   */
+  value: o.any
+});
+const Oe = $(/* @__PURE__ */ k("path", {
+  d: "M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
+}), "CheckBoxOutlineBlank"), Re = $(/* @__PURE__ */ k("path", {
+  d: "M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
+}), "CheckBox"), Fe = $(/* @__PURE__ */ k("path", {
+  d: "M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-2 10H7v-2h10v2z"
+}), "IndeterminateCheckBox");
+function Ie(e) {
+  return q("MuiCheckbox", e);
+}
+const z = D("MuiCheckbox", ["root", "checked", "disabled", "indeterminate", "colorPrimary", "colorSecondary", "sizeSmall", "sizeMedium"]), Be = (e) => {
+  const {
+    classes: t,
+    indeterminate: n,
+    color: s,
+    size: c
+  } = e, a = {
+    root: ["root", n && "indeterminate", `color${B(s)}`, `size${B(c)}`]
+  }, u = L(a, Ie, t);
+  return {
+    ...t,
+    // forward the disabled and checked classes to the SwitchBase
+    ...u
+  };
+}, Se = j(W, {
+  shouldForwardProp: (e) => _(e) || e === "classes",
+  name: "MuiCheckbox",
+  slot: "Root",
+  overridesResolver: (e, t) => {
+    const {
+      ownerState: n
+    } = e;
+    return [t.root, n.indeterminate && t.indeterminate, t[`size${B(n.size)}`], n.color !== "default" && t[`color${B(n.color)}`]];
+  }
+})(pe(({
+  theme: e
+}) => ({
+  color: (e.vars || e).palette.text.secondary,
+  variants: [{
+    props: {
+      color: "default",
+      disableRipple: !1
+    },
+    style: {
+      "&:hover": {
+        backgroundColor: e.alpha((e.vars || e).palette.action.active, (e.vars || e).palette.action.hoverOpacity)
+      }
+    }
+  }, ...Object.entries(e.palette).filter(V()).map(([t]) => ({
+    props: {
+      color: t,
+      disableRipple: !1
+    },
+    style: {
+      "&:hover": {
+        backgroundColor: e.alpha((e.vars || e).palette[t].main, (e.vars || e).palette.action.hoverOpacity)
+      }
+    }
+  })), ...Object.entries(e.palette).filter(V()).map(([t]) => ({
+    props: {
+      color: t
+    },
+    style: {
+      [`&.${z.checked}, &.${z.indeterminate}`]: {
+        color: (e.vars || e).palette[t].main
+      },
+      [`&.${z.disabled}`]: {
+        color: (e.vars || e).palette.action.disabled
+      }
+    }
+  })), {
+    // Should be last to override other colors
+    props: {
+      disableRipple: !1
+    },
+    style: {
+      // Reset on touch devices, it doesn't add specificity
+      "&:hover": {
+        "@media (hover: none)": {
+          backgroundColor: "transparent"
+        }
+      }
+    }
+  }]
+}))), Te = /* @__PURE__ */ k(Re, {}), ze = /* @__PURE__ */ k(Oe, {}), Ee = /* @__PURE__ */ k(Fe, {}), Z = /* @__PURE__ */ f.forwardRef(function(t, n) {
+  const s = ue({
+    props: t,
+    name: "MuiCheckbox"
+  }), {
+    checkedIcon: c = Te,
+    color: a = "primary",
+    icon: u = ze,
+    indeterminate: r = !1,
+    indeterminateIcon: i = Ee,
+    inputProps: l,
+    size: d = "medium",
+    disableRipple: g = !1,
+    className: C,
+    slots: y = {},
+    slotProps: b = {},
+    ...m
+  } = s, P = r ? i : u, w = r ? i : c, v = {
+    ...s,
+    disableRipple: g,
+    color: a,
+    indeterminate: r,
+    size: d
+  }, x = Be(v), O = b.input ?? l, [R, S] = E("root", {
+    ref: n,
+    elementType: Se,
+    className: I(x.root, C),
+    shouldForwardComponentProp: !0,
+    externalForwardedProps: {
+      slots: y,
+      slotProps: b,
+      ...m
+    },
+    ownerState: v,
+    additionalProps: {
+      type: "checkbox",
+      icon: /* @__PURE__ */ f.cloneElement(P, {
+        fontSize: P.props.fontSize ?? d
+      }),
+      checkedIcon: /* @__PURE__ */ f.cloneElement(w, {
+        fontSize: w.props.fontSize ?? d
+      }),
+      disableRipple: g,
+      slots: y,
+      slotProps: {
+        input: he(typeof O == "function" ? O(v) : O, {
+          "data-indeterminate": r
+        })
+      }
+    }
+  });
+  return /* @__PURE__ */ k(R, {
+    ...S,
+    classes: x
+  });
+});
+process.env.NODE_ENV !== "production" && (Z.propTypes = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * If `true`, the component is checked.
+   */
+  checked: o.bool,
+  /**
+   * The icon to display when the component is checked.
+   * @default <CheckBoxIcon />
+   */
+  checkedIcon: o.node,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: o.object,
+  /**
+   * @ignore
+   */
+  className: o.string,
+  /**
+   * The color of the component.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
+   * @default 'primary'
+   */
+  color: o.oneOfType([o.oneOf(["default", "primary", "secondary", "error", "info", "success", "warning"]), o.string]),
+  /**
+   * The default checked state. Use when the component is not controlled.
+   */
+  defaultChecked: o.bool,
+  /**
+   * If `true`, the component is disabled.
+   * @default false
+   */
+  disabled: o.bool,
+  /**
+   * If `true`, the ripple effect is disabled.
+   * @default false
+   */
+  disableRipple: o.bool,
+  /**
+   * The icon to display when the component is unchecked.
+   * @default <CheckBoxOutlineBlankIcon />
+   */
+  icon: o.node,
+  /**
+   * The id of the `input` element.
+   */
+  id: o.string,
+  /**
+   * If `true`, the component appears indeterminate.
+   * This does not set the native input element to indeterminate due
+   * to inconsistent behavior across browsers.
+   * However, we set a `data-indeterminate` attribute on the `input`.
+   * @default false
+   */
+  indeterminate: o.bool,
+  /**
+   * The icon to display when the component is indeterminate.
+   * @default <IndeterminateCheckBoxIcon />
+   */
+  indeterminateIcon: o.node,
+  /**
+   * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#attributes) applied to the `input` element.
+   * @deprecated Use `slotProps.input` 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.
+   */
+  inputProps: o.object,
+  /**
+   * Callback fired when the state is changed.
+   *
+   * @param {React.ChangeEvent<HTMLInputElement>} event The event source of the callback.
+   * You can pull out the new checked state by accessing `event.target.checked` (boolean).
+   */
+  onChange: o.func,
+  /**
+   * If `true`, the `input` element is required.
+   * @default false
+   */
+  required: o.bool,
+  /**
+   * The size of the component.
+   * `small` is equivalent to the dense checkbox styling.
+   * @default 'medium'
+   */
+  size: o.oneOfType([o.oneOf(["medium", "small"]), o.string]),
+  /**
+   * The props used for each slot inside.
+   * @default {}
+   */
+  slotProps: o.shape({
+    input: o.oneOfType([o.func, o.object]),
+    root: o.oneOfType([o.func, o.object])
+  }),
+  /**
+   * The components used for each slot inside.
+   * @default {}
+   */
+  slots: o.shape({
+    input: o.elementType,
+    root: o.elementType
+  }),
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: o.oneOfType([o.arrayOf(o.oneOfType([o.func, o.object, o.bool])), o.func, o.object]),
+  /**
+   * The value of the component. The DOM API casts this to a string.
+   * The browser uses "on" as the default value.
+   */
+  value: o.any
+});
+function He(e) {
+  const { className: t, sx: n, disabled: s, color: c = "blue", ...a } = e;
+  return /* @__PURE__ */ k(
+    Z,
+    {
+      className: t,
+      disabled: s,
+      ...a,
+      sx: {
+        ...n
+      }
+    }
+  );
+}
+export {
+  He as CheckBox
+};