@fangzsx/component-library 0.0.11 → 0.0.13

package/dist/FormLabel-DKoCtSGZ.js

@@ -0,0 +1,600 @@
+import * as a from "react";
+import { g as z, a as E, c as T, P as e } from "./generateUtilityClasses-BCID9NF1.js";
+import { u as L, s as N, c as $, a as A, m as H, b as re } from "./useTimeout-BWi4JTOH.js";
+import { F as oe, a as Q } from "./useSlot-S2pEBHE8.js";
+import { jsx as O, jsxs as P } from "react/jsx-runtime";
+function Ce(...r) {
+  return r.reduce((o, t) => t == null ? o : function(...s) {
+    o.apply(this, s), t.apply(this, s);
+  }, () => {
+  });
+}
+function R(r, o) {
+  return /* @__PURE__ */ a.isValidElement(r) && o.indexOf(
+    // For server components `muiName` is available in element.type._payload.value.muiName
+    // relevant info - https://github.com/facebook/react/blob/2807d781a08db8e9873687fccc25c0f12b4fb3d4/packages/react/src/ReactLazy.js#L45
+    // eslint-disable-next-line no-underscore-dangle
+    r.type.muiName ?? r.type?._payload?.value?.muiName
+  ) !== -1;
+}
+function _(r) {
+  return r != null && !(Array.isArray(r) && r.length === 0);
+}
+function G(r, o = !1) {
+  return r && (_(r.value) && r.value !== "" || o && _(r.defaultValue) && r.defaultValue !== "");
+}
+function te(r) {
+  return r.startAdornment;
+}
+function se(r) {
+  return z("MuiFormControl", r);
+}
+E("MuiFormControl", ["root", "marginNone", "marginNormal", "marginDense", "fullWidth", "disabled"]);
+const ne = (r) => {
+  const {
+    classes: o,
+    margin: t,
+    fullWidth: n
+  } = r, s = {
+    root: ["root", t !== "none" && `margin${T(t)}`, n && "fullWidth"]
+  };
+  return A(s, se, o);
+}, le = N("div", {
+  name: "MuiFormControl",
+  slot: "Root",
+  overridesResolver: (r, o) => {
+    const {
+      ownerState: t
+    } = r;
+    return [o.root, o[`margin${T(t.margin)}`], t.fullWidth && o.fullWidth];
+  }
+})({
+  display: "inline-flex",
+  flexDirection: "column",
+  position: "relative",
+  // Reset fieldset default style.
+  minWidth: 0,
+  padding: 0,
+  margin: 0,
+  border: 0,
+  verticalAlign: "top",
+  // Fix alignment issue on Safari.
+  variants: [{
+    props: {
+      margin: "normal"
+    },
+    style: {
+      marginTop: 16,
+      marginBottom: 8
+    }
+  }, {
+    props: {
+      margin: "dense"
+    },
+    style: {
+      marginTop: 8,
+      marginBottom: 4
+    }
+  }, {
+    props: {
+      fullWidth: !0
+    },
+    style: {
+      width: "100%"
+    }
+  }]
+}), ie = /* @__PURE__ */ a.forwardRef(function(o, t) {
+  const n = L({
+    props: o,
+    name: "MuiFormControl"
+  }), {
+    children: s,
+    className: u,
+    color: d = "primary",
+    component: f = "div",
+    disabled: c = !1,
+    error: b = !1,
+    focused: C,
+    fullWidth: g = !1,
+    hiddenLabel: v = !1,
+    margin: h = "none",
+    required: y = !1,
+    size: i = "medium",
+    variant: l = "outlined",
+    ...p
+  } = n, S = {
+    ...n,
+    color: d,
+    component: f,
+    disabled: c,
+    error: b,
+    fullWidth: g,
+    hiddenLabel: v,
+    margin: h,
+    required: y,
+    size: i,
+    variant: l
+  }, Y = ne(S), [j, Z] = a.useState(() => {
+    let F = !1;
+    return s && a.Children.forEach(s, (m) => {
+      if (!R(m, ["Input", "Select"]))
+        return;
+      const I = R(m, ["Select"]) ? m.props.input : m;
+      I && te(I.props) && (F = !0);
+    }), F;
+  }), [U, V] = a.useState(() => {
+    let F = !1;
+    return s && a.Children.forEach(s, (m) => {
+      R(m, ["Input", "Select"]) && (G(m.props, !0) || G(m.props.inputProps, !0)) && (F = !0);
+    }), F;
+  }), [W, q] = a.useState(!1);
+  c && W && q(!1);
+  const k = C !== void 0 && !c ? C : W;
+  let w;
+  const M = a.useRef(!1);
+  process.env.NODE_ENV !== "production" && (w = () => (M.current && console.error(["MUI: There are multiple `InputBase` components inside a FormControl.", "This creates visual inconsistencies, only use one `InputBase`."].join(`
+`)), M.current = !0, () => {
+    M.current = !1;
+  }));
+  const B = a.useCallback(() => {
+    V(!0);
+  }, []), D = a.useCallback(() => {
+    V(!1);
+  }, []), ee = a.useMemo(() => ({
+    adornedStart: j,
+    setAdornedStart: Z,
+    color: d,
+    disabled: c,
+    error: b,
+    filled: U,
+    focused: k,
+    fullWidth: g,
+    hiddenLabel: v,
+    size: i,
+    onBlur: () => {
+      q(!1);
+    },
+    onFocus: () => {
+      q(!0);
+    },
+    onEmpty: D,
+    onFilled: B,
+    registerEffect: w,
+    required: y,
+    variant: l
+  }), [j, d, c, b, U, k, g, v, w, D, B, y, i, l]);
+  return /* @__PURE__ */ O(oe.Provider, {
+    value: ee,
+    children: /* @__PURE__ */ O(le, {
+      as: f,
+      ownerState: S,
+      className: $(Y.root, u),
+      ref: t,
+      ...p,
+      children: s
+    })
+  });
+});
+process.env.NODE_ENV !== "production" && (ie.propTypes = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * The content of the component.
+   */
+  children: e.node,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: e.object,
+  /**
+   * @ignore
+   */
+  className: e.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: e.oneOfType([e.oneOf(["primary", "secondary", "error", "info", "success", "warning"]), e.string]),
+  /**
+   * The component used for the root node.
+   * Either a string to use a HTML element or a component.
+   */
+  component: e.elementType,
+  /**
+   * If `true`, the label, input and helper text should be displayed in a disabled state.
+   * @default false
+   */
+  disabled: e.bool,
+  /**
+   * If `true`, the label is displayed in an error state.
+   * @default false
+   */
+  error: e.bool,
+  /**
+   * If `true`, the component is displayed in focused state.
+   */
+  focused: e.bool,
+  /**
+   * If `true`, the component will take up the full width of its container.
+   * @default false
+   */
+  fullWidth: e.bool,
+  /**
+   * If `true`, the label is hidden.
+   * This is used to increase density for a `FilledInput`.
+   * Be sure to add `aria-label` to the `input` element.
+   * @default false
+   */
+  hiddenLabel: e.bool,
+  /**
+   * If `dense` or `normal`, will adjust vertical spacing of this and contained components.
+   * @default 'none'
+   */
+  margin: e.oneOf(["dense", "none", "normal"]),
+  /**
+   * If `true`, the label will indicate that the `input` is required.
+   * @default false
+   */
+  required: e.bool,
+  /**
+   * The size of the component.
+   * @default 'medium'
+   */
+  size: e.oneOfType([e.oneOf(["medium", "small"]), e.string]),
+  /**
+   * 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]),
+  /**
+   * The variant to use.
+   * @default 'outlined'
+   */
+  variant: e.oneOf(["filled", "outlined", "standard"])
+});
+function X({
+  props: r,
+  states: o,
+  muiFormControl: t
+}) {
+  return o.reduce((n, s) => (n[s] = r[s], t && typeof r[s] > "u" && (n[s] = t[s]), n), {});
+}
+function ae(r) {
+  return z("MuiFormHelperText", r);
+}
+const J = E("MuiFormHelperText", ["root", "error", "disabled", "sizeSmall", "sizeMedium", "contained", "focused", "filled", "required"]);
+var K;
+const de = (r) => {
+  const {
+    classes: o,
+    contained: t,
+    size: n,
+    disabled: s,
+    error: u,
+    filled: d,
+    focused: f,
+    required: c
+  } = r, b = {
+    root: ["root", s && "disabled", u && "error", n && `size${T(n)}`, t && "contained", f && "focused", d && "filled", c && "required"]
+  };
+  return A(b, ae, o);
+}, ce = N("p", {
+  name: "MuiFormHelperText",
+  slot: "Root",
+  overridesResolver: (r, o) => {
+    const {
+      ownerState: t
+    } = r;
+    return [o.root, t.size && o[`size${T(t.size)}`], t.contained && o.contained, t.filled && o.filled];
+  }
+})(H(({
+  theme: r
+}) => ({
+  color: (r.vars || r).palette.text.secondary,
+  ...r.typography.caption,
+  textAlign: "left",
+  marginTop: 3,
+  marginRight: 0,
+  marginBottom: 0,
+  marginLeft: 0,
+  [`&.${J.disabled}`]: {
+    color: (r.vars || r).palette.text.disabled
+  },
+  [`&.${J.error}`]: {
+    color: (r.vars || r).palette.error.main
+  },
+  variants: [{
+    props: {
+      size: "small"
+    },
+    style: {
+      marginTop: 4
+    }
+  }, {
+    props: ({
+      ownerState: o
+    }) => o.contained,
+    style: {
+      marginLeft: 14,
+      marginRight: 14
+    }
+  }]
+}))), ue = /* @__PURE__ */ a.forwardRef(function(o, t) {
+  const n = L({
+    props: o,
+    name: "MuiFormHelperText"
+  }), {
+    children: s,
+    className: u,
+    component: d = "p",
+    disabled: f,
+    error: c,
+    filled: b,
+    focused: C,
+    margin: g,
+    required: v,
+    variant: h,
+    ...y
+  } = n, i = Q(), l = X({
+    props: n,
+    muiFormControl: i,
+    states: ["variant", "size", "disabled", "error", "filled", "focused", "required"]
+  }), p = {
+    ...n,
+    component: d,
+    contained: l.variant === "filled" || l.variant === "outlined",
+    variant: l.variant,
+    size: l.size,
+    disabled: l.disabled,
+    error: l.error,
+    filled: l.filled,
+    focused: l.focused,
+    required: l.required
+  };
+  delete p.ownerState;
+  const S = de(p);
+  return /* @__PURE__ */ O(ce, {
+    as: d,
+    className: $(S.root, u),
+    ref: t,
+    ...y,
+    ownerState: p,
+    children: s === " " ? (
+      // notranslate needed while Google Translate will not fix zero-width space issue
+      K || (K = /* @__PURE__ */ O("span", {
+        className: "notranslate",
+        "aria-hidden": !0,
+        children: "​"
+      }))
+    ) : s
+  });
+});
+process.env.NODE_ENV !== "production" && (ue.propTypes = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * The content of the component.
+   *
+   * If `' '` is provided, the component reserves one line height for displaying a future message.
+   */
+  children: e.node,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: e.object,
+  /**
+   * @ignore
+   */
+  className: e.string,
+  /**
+   * The component used for the root node.
+   * Either a string to use a HTML element or a component.
+   */
+  component: e.elementType,
+  /**
+   * If `true`, the helper text should be displayed in a disabled state.
+   */
+  disabled: e.bool,
+  /**
+   * If `true`, helper text should be displayed in an error state.
+   */
+  error: e.bool,
+  /**
+   * If `true`, the helper text should use filled classes key.
+   */
+  filled: e.bool,
+  /**
+   * If `true`, the helper text should use focused classes key.
+   */
+  focused: e.bool,
+  /**
+   * If `dense`, will adjust vertical spacing. This is normally obtained via context from
+   * FormControl.
+   */
+  margin: e.oneOf(["dense"]),
+  /**
+   * If `true`, the helper text should use required classes key.
+   */
+  required: 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]),
+  /**
+   * The variant to use.
+   */
+  variant: e.oneOfType([e.oneOf(["filled", "outlined", "standard"]), e.string])
+});
+function fe(r) {
+  return z("MuiFormLabel", r);
+}
+const x = E("MuiFormLabel", ["root", "colorSecondary", "focused", "disabled", "error", "filled", "required", "asterisk"]), pe = (r) => {
+  const {
+    classes: o,
+    color: t,
+    focused: n,
+    disabled: s,
+    error: u,
+    filled: d,
+    required: f
+  } = r, c = {
+    root: ["root", `color${T(t)}`, s && "disabled", u && "error", d && "filled", n && "focused", f && "required"],
+    asterisk: ["asterisk", u && "error"]
+  };
+  return A(c, fe, o);
+}, me = N("label", {
+  name: "MuiFormLabel",
+  slot: "Root",
+  overridesResolver: (r, o) => {
+    const {
+      ownerState: t
+    } = r;
+    return [o.root, t.color === "secondary" && o.colorSecondary, t.filled && o.filled];
+  }
+})(H(({
+  theme: r
+}) => ({
+  color: (r.vars || r).palette.text.secondary,
+  ...r.typography.body1,
+  lineHeight: "1.4375em",
+  padding: 0,
+  position: "relative",
+  variants: [...Object.entries(r.palette).filter(re()).map(([o]) => ({
+    props: {
+      color: o
+    },
+    style: {
+      [`&.${x.focused}`]: {
+        color: (r.vars || r).palette[o].main
+      }
+    }
+  })), {
+    props: {},
+    style: {
+      [`&.${x.disabled}`]: {
+        color: (r.vars || r).palette.text.disabled
+      },
+      [`&.${x.error}`]: {
+        color: (r.vars || r).palette.error.main
+      }
+    }
+  }]
+}))), be = N("span", {
+  name: "MuiFormLabel",
+  slot: "Asterisk"
+})(H(({
+  theme: r
+}) => ({
+  [`&.${x.error}`]: {
+    color: (r.vars || r).palette.error.main
+  }
+}))), ye = /* @__PURE__ */ a.forwardRef(function(o, t) {
+  const n = L({
+    props: o,
+    name: "MuiFormLabel"
+  }), {
+    children: s,
+    className: u,
+    color: d,
+    component: f = "label",
+    disabled: c,
+    error: b,
+    filled: C,
+    focused: g,
+    required: v,
+    ...h
+  } = n, y = Q(), i = X({
+    props: n,
+    muiFormControl: y,
+    states: ["color", "required", "focused", "disabled", "error", "filled"]
+  }), l = {
+    ...n,
+    color: i.color || "primary",
+    component: f,
+    disabled: i.disabled,
+    error: i.error,
+    filled: i.filled,
+    focused: i.focused,
+    required: i.required
+  }, p = pe(l);
+  return /* @__PURE__ */ P(me, {
+    as: f,
+    ownerState: l,
+    className: $(p.root, u),
+    ref: t,
+    ...h,
+    children: [s, i.required && /* @__PURE__ */ P(be, {
+      ownerState: l,
+      "aria-hidden": !0,
+      className: p.asterisk,
+      children: [" ", "*"]
+    })]
+  });
+});
+process.env.NODE_ENV !== "production" && (ye.propTypes = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * The content of the component.
+   */
+  children: e.node,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: e.object,
+  /**
+   * @ignore
+   */
+  className: e.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).
+   */
+  color: e.oneOfType([e.oneOf(["error", "info", "primary", "secondary", "success", "warning"]), e.string]),
+  /**
+   * The component used for the root node.
+   * Either a string to use a HTML element or a component.
+   */
+  component: e.elementType,
+  /**
+   * If `true`, the label should be displayed in a disabled state.
+   */
+  disabled: e.bool,
+  /**
+   * If `true`, the label is displayed in an error state.
+   */
+  error: e.bool,
+  /**
+   * If `true`, the label should use filled classes key.
+   */
+  filled: e.bool,
+  /**
+   * If `true`, the input of this label is focused (used by `FormGroup` components).
+   */
+  focused: e.bool,
+  /**
+   * If `true`, the label will indicate that the `input` is required.
+   */
+  required: 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])
+});
+export {
+  ie as F,
+  ye as a,
+  ue as b,
+  Ce as c,
+  x as d,
+  X as f,
+  G as i
+};