@weng-lab/ui-components 2.2.3 → 2.2.4

package/dist/ui-components.es209.js

@@ -1,85 +1,501 @@
-import { getPath as l } from "./ui-components.es331.js";
-import y from "./ui-components.es334.js";
-import h from "./ui-components.es337.js";
-import d from "./ui-components.es329.js";
-import { handleBreakpoints as E } from "./ui-components.es332.js";
-const b = {
-  m: "margin",
-  p: "padding"
-}, N = {
-  t: "Top",
-  r: "Right",
-  b: "Bottom",
-  l: "Left",
-  x: ["Left", "Right"],
-  y: ["Top", "Bottom"]
-}, p = {
-  marginX: "mx",
-  marginY: "my",
-  paddingX: "px",
-  paddingY: "py"
-}, $ = h((n) => {
-  if (n.length > 2)
-    if (p[n])
-      n = p[n];
-    else
-      return [n];
-  const [e, i] = n.split(""), o = b[e], r = N[i] || "";
-  return Array.isArray(r) ? r.map((t) => o + t) : [o + r];
-}), u = ["m", "mt", "mr", "mb", "ml", "mx", "my", "margin", "marginTop", "marginRight", "marginBottom", "marginLeft", "marginX", "marginY", "marginInline", "marginInlineStart", "marginInlineEnd", "marginBlock", "marginBlockStart", "marginBlockEnd"], c = ["p", "pt", "pr", "pb", "pl", "px", "py", "padding", "paddingTop", "paddingRight", "paddingBottom", "paddingLeft", "paddingX", "paddingY", "paddingInline", "paddingInlineStart", "paddingInlineEnd", "paddingBlock", "paddingBlockStart", "paddingBlockEnd"], I = [...u, ...c];
-function B(n, e, i, o) {
-  const r = l(n, e, !0) ?? i;
-  return typeof r == "number" || typeof r == "string" ? (t) => typeof t == "string" ? t : (process.env.NODE_ENV !== "production" && typeof t != "number" && console.error(`MUI: Expected ${o} argument to be a number or a string, got ${t}.`), typeof r == "string" ? r.startsWith("var(") && t === 0 ? 0 : r.startsWith("var(") && t === 1 ? r : `calc(${t} * ${r})` : r * t) : Array.isArray(r) ? (t) => {
-    if (typeof t == "string")
-      return t;
-    const s = Math.abs(t);
-    process.env.NODE_ENV !== "production" && (Number.isInteger(s) ? s > r.length - 1 && console.error([`MUI: The value provided (${s}) overflows.`, `The supported values are: ${JSON.stringify(r)}.`, `${s} > ${r.length - 1}, you need to add the missing values.`].join(`
-`)) : console.error([`MUI: The \`theme.${e}\` array type cannot be combined with non integer values.You should either use an integer value that can be used as index, or define the \`theme.${e}\` as a number.`].join(`
-`)));
-    const a = r[s];
-    return t >= 0 ? a : typeof a == "number" ? -a : typeof a == "string" && a.startsWith("var(") ? `calc(-1 * ${a})` : `-${a}`;
-  } : typeof r == "function" ? r : (process.env.NODE_ENV !== "production" && console.error([`MUI: The \`theme.${e}\` value (${r}) is invalid.`, "It should be a number, an array or a function."].join(`
-`)), () => {
+import * as k from "react";
+import o from "./ui-components.es89.js";
+import L from "./ui-components.es127.js";
+import v from "./ui-components.es93.js";
+import O from "./ui-components.es128.js";
+import l, { getFilledInputUtilityClass as h } from "./ui-components.es337.js";
+import P, { InputBaseRoot as j, rootOverridesResolver as $, InputBaseInput as w, inputOverridesResolver as U } from "./ui-components.es38.js";
+import { j as A } from "./ui-components.es15.js";
+import { useDefaultProps as S } from "./ui-components.es95.js";
+import W from "./ui-components.es186.js";
+import z from "./ui-components.es96.js";
+import E from "./ui-components.es97.js";
+import R from "./ui-components.es37.js";
+import M from "./ui-components.es125.js";
+const N = (t) => {
+  const {
+    classes: r,
+    disableUnderline: s,
+    startAdornment: n,
+    endAdornment: p,
+    size: i,
+    hiddenLabel: e,
+    multiline: a
+  } = t, u = {
+    root: ["root", !s && "underline", n && "adornedStart", p && "adornedEnd", i === "small" && `size${z(i)}`, e && "hiddenLabel", a && "multiline"],
+    input: ["input"]
+  }, d = E(u, h, r);
+  return {
+    ...r,
+    // forward classes to the InputBase
+    ...d
+  };
+}, V = R(j, {
+  shouldForwardProp: (t) => L(t) || t === "classes",
+  name: "MuiFilledInput",
+  slot: "Root",
+  overridesResolver: (t, r) => {
+    const {
+      ownerState: s
+    } = t;
+    return [...$(t, r), !s.disableUnderline && r.underline];
+  }
+})(v(({
+  theme: t
+}) => {
+  const r = t.palette.mode === "light", s = r ? "rgba(0, 0, 0, 0.42)" : "rgba(255, 255, 255, 0.7)", n = r ? "rgba(0, 0, 0, 0.06)" : "rgba(255, 255, 255, 0.09)", p = r ? "rgba(0, 0, 0, 0.09)" : "rgba(255, 255, 255, 0.13)", i = r ? "rgba(0, 0, 0, 0.12)" : "rgba(255, 255, 255, 0.12)";
+  return {
+    position: "relative",
+    backgroundColor: t.vars ? t.vars.palette.FilledInput.bg : n,
+    borderTopLeftRadius: (t.vars || t).shape.borderRadius,
+    borderTopRightRadius: (t.vars || t).shape.borderRadius,
+    transition: t.transitions.create("background-color", {
+      duration: t.transitions.duration.shorter,
+      easing: t.transitions.easing.easeOut
+    }),
+    "&:hover": {
+      backgroundColor: t.vars ? t.vars.palette.FilledInput.hoverBg : p,
+      // Reset on touch devices, it doesn't add specificity
+      "@media (hover: none)": {
+        backgroundColor: t.vars ? t.vars.palette.FilledInput.bg : n
+      }
+    },
+    [`&.${l.focused}`]: {
+      backgroundColor: t.vars ? t.vars.palette.FilledInput.bg : n
+    },
+    [`&.${l.disabled}`]: {
+      backgroundColor: t.vars ? t.vars.palette.FilledInput.disabledBg : i
+    },
+    variants: [{
+      props: ({
+        ownerState: e
+      }) => !e.disableUnderline,
+      style: {
+        "&::after": {
+          left: 0,
+          bottom: 0,
+          content: '""',
+          position: "absolute",
+          right: 0,
+          transform: "scaleX(0)",
+          transition: t.transitions.create("transform", {
+            duration: t.transitions.duration.shorter,
+            easing: t.transitions.easing.easeOut
+          }),
+          pointerEvents: "none"
+          // Transparent to the hover style.
+        },
+        [`&.${l.focused}:after`]: {
+          // translateX(0) is a workaround for Safari transform scale bug
+          // See https://github.com/mui/material-ui/issues/31766
+          transform: "scaleX(1) translateX(0)"
+        },
+        [`&.${l.error}`]: {
+          "&::before, &::after": {
+            borderBottomColor: (t.vars || t).palette.error.main
+          }
+        },
+        "&::before": {
+          borderBottom: `1px solid ${t.vars ? t.alpha(t.vars.palette.common.onBackground, t.vars.opacity.inputUnderline) : s}`,
+          left: 0,
+          bottom: 0,
+          content: '"\\00a0"',
+          position: "absolute",
+          right: 0,
+          transition: t.transitions.create("border-bottom-color", {
+            duration: t.transitions.duration.shorter
+          }),
+          pointerEvents: "none"
+          // Transparent to the hover style.
+        },
+        [`&:hover:not(.${l.disabled}, .${l.error}):before`]: {
+          borderBottom: `1px solid ${(t.vars || t).palette.text.primary}`
+        },
+        [`&.${l.disabled}:before`]: {
+          borderBottomStyle: "dotted"
+        }
+      }
+    }, ...Object.entries(t.palette).filter(O()).map(([e]) => ({
+      props: {
+        disableUnderline: !1,
+        color: e
+      },
+      style: {
+        "&::after": {
+          borderBottom: `2px solid ${(t.vars || t).palette[e]?.main}`
+        }
+      }
+    })), {
+      props: ({
+        ownerState: e
+      }) => e.startAdornment,
+      style: {
+        paddingLeft: 12
+      }
+    }, {
+      props: ({
+        ownerState: e
+      }) => e.endAdornment,
+      style: {
+        paddingRight: 12
+      }
+    }, {
+      props: ({
+        ownerState: e
+      }) => e.multiline,
+      style: {
+        padding: "25px 12px 8px"
+      }
+    }, {
+      props: ({
+        ownerState: e,
+        size: a
+      }) => e.multiline && a === "small",
+      style: {
+        paddingTop: 21,
+        paddingBottom: 4
+      }
+    }, {
+      props: ({
+        ownerState: e
+      }) => e.multiline && e.hiddenLabel,
+      style: {
+        paddingTop: 16,
+        paddingBottom: 17
+      }
+    }, {
+      props: ({
+        ownerState: e
+      }) => e.multiline && e.hiddenLabel && e.size === "small",
+      style: {
+        paddingTop: 8,
+        paddingBottom: 9
+      }
+    }]
+  };
+})), X = R(w, {
+  name: "MuiFilledInput",
+  slot: "Input",
+  overridesResolver: U
+})(v(({
+  theme: t
+}) => ({
+  paddingTop: 25,
+  paddingRight: 12,
+  paddingBottom: 8,
+  paddingLeft: 12,
+  ...!t.vars && {
+    "&:-webkit-autofill": {
+      WebkitBoxShadow: t.palette.mode === "light" ? null : "0 0 0 100px #266798 inset",
+      WebkitTextFillColor: t.palette.mode === "light" ? null : "#fff",
+      caretColor: t.palette.mode === "light" ? null : "#fff",
+      borderTopLeftRadius: "inherit",
+      borderTopRightRadius: "inherit"
+    }
+  },
+  ...t.vars && {
+    "&:-webkit-autofill": {
+      borderTopLeftRadius: "inherit",
+      borderTopRightRadius: "inherit"
+    },
+    [t.getColorSchemeSelector("dark")]: {
+      "&:-webkit-autofill": {
+        WebkitBoxShadow: "0 0 0 100px #266798 inset",
+        WebkitTextFillColor: "#fff",
+        caretColor: "#fff"
+      }
+    }
+  },
+  variants: [{
+    props: {
+      size: "small"
+    },
+    style: {
+      paddingTop: 21,
+      paddingBottom: 4
+    }
+  }, {
+    props: ({
+      ownerState: r
+    }) => r.hiddenLabel,
+    style: {
+      paddingTop: 16,
+      paddingBottom: 17
+    }
+  }, {
+    props: ({
+      ownerState: r
+    }) => r.startAdornment,
+    style: {
+      paddingLeft: 0
+    }
+  }, {
+    props: ({
+      ownerState: r
+    }) => r.endAdornment,
+    style: {
+      paddingRight: 0
+    }
+  }, {
+    props: ({
+      ownerState: r
+    }) => r.hiddenLabel && r.size === "small",
+    style: {
+      paddingTop: 8,
+      paddingBottom: 9
+    }
+  }, {
+    props: ({
+      ownerState: r
+    }) => r.multiline,
+    style: {
+      paddingTop: 0,
+      paddingBottom: 0,
+      paddingLeft: 0,
+      paddingRight: 0
+    }
+  }]
+}))), T = /* @__PURE__ */ k.forwardRef(function(r, s) {
+  const n = S({
+    props: r,
+    name: "MuiFilledInput"
+  }), {
+    disableUnderline: p = !1,
+    components: i = {},
+    componentsProps: e,
+    fullWidth: a = !1,
+    hiddenLabel: u,
+    // declare here to prevent spreading to DOM
+    inputComponent: d = "input",
+    multiline: b = !1,
+    slotProps: c,
+    slots: f = {},
+    type: m = "text",
+    ...I
+  } = n, g = {
+    ...n,
+    disableUnderline: p,
+    fullWidth: a,
+    inputComponent: d,
+    multiline: b,
+    type: m
+  }, C = N(n), y = {
+    root: {
+      ownerState: g
+    },
+    input: {
+      ownerState: g
+    }
+  }, B = c ?? e ? W(y, c ?? e) : y, x = f.root ?? i.Root ?? V, F = f.input ?? i.Input ?? X;
+  return /* @__PURE__ */ A.jsx(P, {
+    slots: {
+      root: x,
+      input: F
+    },
+    slotProps: B,
+    fullWidth: a,
+    inputComponent: d,
+    multiline: b,
+    ref: s,
+    type: m,
+    ...I,
+    classes: C
   });
-}
-function T(n) {
-  return B(n, "spacing", 8, "spacing");
-}
-function v(n, e) {
-  return typeof e == "string" || e == null ? e : n(e);
-}
-function P(n, e) {
-  return (i) => n.reduce((o, r) => (o[r] = v(e, i), o), {});
-}
-function k(n, e, i, o) {
-  if (!e.includes(i))
-    return null;
-  const r = $(i), t = P(r, o), s = n[i];
-  return E(n, s, t);
-}
-function g(n, e) {
-  const i = T(n.theme);
-  return Object.keys(n).map((o) => k(n, e, o, i)).reduce(y, {});
-}
-function m(n) {
-  return g(n, u);
-}
-m.propTypes = process.env.NODE_ENV !== "production" ? u.reduce((n, e) => (n[e] = d, n), {}) : {};
-m.filterProps = u;
-function f(n) {
-  return g(n, c);
-}
-f.propTypes = process.env.NODE_ENV !== "production" ? c.reduce((n, e) => (n[e] = d, n), {}) : {};
-f.filterProps = c;
-process.env.NODE_ENV !== "production" && I.reduce((n, e) => (n[e] = d, n), {});
+});
+process.env.NODE_ENV !== "production" && (T.propTypes = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * This prop helps users to fill forms faster, especially on mobile devices.
+   * The name can be confusing, as it's more like an autofill.
+   * You can learn more about it [following the specification](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill).
+   */
+  autoComplete: o.string,
+  /**
+   * If `true`, the `input` element is focused during the first mount.
+   */
+  autoFocus: o.bool,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: o.object,
+  /**
+   * 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).
+   * The prop defaults to the value (`'primary'`) inherited from the parent FormControl component.
+   */
+  color: o.oneOfType([o.oneOf(["primary", "secondary"]), o.string]),
+  /**
+   * The components used for each slot inside.
+   *
+   * @deprecated use the `slots` 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.
+   *
+   * @default {}
+   */
+  components: o.shape({
+    Input: o.elementType,
+    Root: o.elementType
+  }),
+  /**
+   * The extra props for the slot components.
+   * You can override the existing props or add new ones.
+   *
+   * @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.
+   *
+   * @default {}
+   */
+  componentsProps: o.shape({
+    input: o.object,
+    root: o.object
+  }),
+  /**
+   * The default value. Use when the component is not controlled.
+   */
+  defaultValue: o.any,
+  /**
+   * If `true`, the component is disabled.
+   * The prop defaults to the value (`false`) inherited from the parent FormControl component.
+   */
+  disabled: o.bool,
+  /**
+   * If `true`, the input will not have an underline.
+   * @default false
+   */
+  disableUnderline: o.bool,
+  /**
+   * End `InputAdornment` for this component.
+   */
+  endAdornment: o.node,
+  /**
+   * If `true`, the `input` will indicate an error.
+   * The prop defaults to the value (`false`) inherited from the parent FormControl component.
+   */
+  error: o.bool,
+  /**
+   * If `true`, the `input` will take up the full width of its container.
+   * @default false
+   */
+  fullWidth: o.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: o.bool,
+  /**
+   * The id of the `input` element.
+   */
+  id: o.string,
+  /**
+   * The component used for the `input` element.
+   * Either a string to use a HTML element or a component.
+   * @default 'input'
+   */
+  inputComponent: o.elementType,
+  /**
+   * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#attributes) applied to the `input` element.
+   * @default {}
+   */
+  inputProps: o.object,
+  /**
+   * Pass a ref to the `input` element.
+   */
+  inputRef: M,
+  /**
+   * If `dense`, will adjust vertical spacing. This is normally obtained via context from
+   * FormControl.
+   * The prop defaults to the value (`'none'`) inherited from the parent FormControl component.
+   */
+  margin: o.oneOf(["dense", "none"]),
+  /**
+   * Maximum number of rows to display when multiline option is set to true.
+   */
+  maxRows: o.oneOfType([o.number, o.string]),
+  /**
+   * Minimum number of rows to display when multiline option is set to true.
+   */
+  minRows: o.oneOfType([o.number, o.string]),
+  /**
+   * If `true`, a [TextareaAutosize](https://mui.com/material-ui/react-textarea-autosize/) element is rendered.
+   * @default false
+   */
+  multiline: o.bool,
+  /**
+   * Name attribute of the `input` element.
+   */
+  name: o.string,
+  /**
+   * Callback fired when the value is changed.
+   *
+   * @param {React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>} event The event source of the callback.
+   * You can pull out the new value by accessing `event.target.value` (string).
+   */
+  onChange: o.func,
+  /**
+   * The short hint displayed in the `input` before the user enters a value.
+   */
+  placeholder: o.string,
+  /**
+   * 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.
+   * The prop defaults to the value (`false`) inherited from the parent FormControl component.
+   */
+  required: o.bool,
+  /**
+   * Number of rows to display when multiline option is set to true.
+   */
+  rows: o.oneOfType([o.number, o.string]),
+  /**
+   * The extra props for the slot components.
+   * You can override the existing props or add new ones.
+   *
+   * This prop is an alias for the `componentsProps` prop, which will be deprecated in the future.
+   *
+   * @default {}
+   */
+  slotProps: o.shape({
+    input: o.object,
+    root: o.object
+  }),
+  /**
+   * The components used for each slot inside.
+   *
+   * This prop is an alias for the `components` prop, which will be deprecated in the future.
+   *
+   * @default {}
+   */
+  slots: o.shape({
+    input: o.elementType,
+    root: o.elementType
+  }),
+  /**
+   * Start `InputAdornment` for this component.
+   */
+  startAdornment: o.node,
+  /**
+   * 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]),
+  /**
+   * Type of the `input` element. It should be [a valid HTML5 input type](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#input_types).
+   * @default 'text'
+   */
+  type: o.string,
+  /**
+   * The value of the `input` element, required for a controlled component.
+   */
+  value: o.any
+});
+T.muiName = "Input";
 export {
-  T as createUnarySpacing,
-  B as createUnaryUnit,
-  P as getStyleFromPropValue,
-  v as getValue,
-  m as margin,
-  u as marginKeys,
-  f as padding,
-  c as paddingKeys
+  T as default
 };
 //# sourceMappingURL=ui-components.es209.js.map