@weng-lab/ui-components 3.0.0-beta.0 → 3.0.1

package/dist/ui-components.es134.js

@@ -1,180 +1,501 @@
-import * as y from "react";
-import e from "./ui-components.es89.js";
-import { clsx as z } from "./ui-components.es94.js";
-import F from "./ui-components.es144.js";
-import R from "./ui-components.es146.js";
-import j from "./ui-components.es95.js";
-import f, { getFormHelperTextUtilityClasses as q } from "./ui-components.es295.js";
-import { j as u } from "./ui-components.es15.js";
-import { useDefaultProps as C } from "./ui-components.es92.js";
-import x from "./ui-components.es117.js";
-import H from "./ui-components.es98.js";
-import O from "./ui-components.es34.js";
-var b;
-const N = (r) => {
+import * as k from "react";
+import o from "./ui-components.es89.js";
+import L from "./ui-components.es149.js";
+import v from "./ui-components.es90.js";
+import O from "./ui-components.es110.js";
+import l, { getFilledInputUtilityClass as h } from "./ui-components.es305.js";
+import P, { InputBaseRoot as j, rootOverridesResolver as $, InputBaseInput as w, inputOverridesResolver as U } from "./ui-components.es35.js";
+import { j as A } from "./ui-components.es15.js";
+import { useDefaultProps as S } from "./ui-components.es93.js";
+import W from "./ui-components.es156.js";
+import z from "./ui-components.es115.js";
+import E from "./ui-components.es94.js";
+import R from "./ui-components.es34.js";
+import M from "./ui-components.es140.js";
+const N = (t) => {
   const {
-    classes: o,
-    contained: s,
+    classes: r,
+    disableUnderline: s,
+    startAdornment: n,
+    endAdornment: p,
     size: i,
-    disabled: a,
-    error: l,
-    filled: n,
-    focused: p,
-    required: c
-  } = r, m = {
-    root: ["root", a && "disabled", l && "error", i && `size${x(i)}`, s && "contained", p && "focused", n && "filled", c && "required"]
+    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
   };
-  return H(m, q, o);
-}, w = O("p", {
-  name: "MuiFormHelperText",
+}, V = R(j, {
+  shouldForwardProp: (t) => L(t) || t === "classes",
+  name: "MuiFilledInput",
   slot: "Root",
-  overridesResolver: (r, o) => {
+  overridesResolver: (t, r) => {
     const {
       ownerState: s
-    } = r;
-    return [o.root, s.size && o[`size${x(s.size)}`], s.contained && o.contained, s.filled && o.filled];
+    } = t;
+    return [...$(t, r), !s.disableUnderline && r.underline];
   }
-})(j(({
-  theme: r
+})(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
 }) => ({
-  color: (r.vars || r).palette.text.secondary,
-  ...r.typography.caption,
-  textAlign: "left",
-  marginTop: 3,
-  marginRight: 0,
-  marginBottom: 0,
-  marginLeft: 0,
-  [`&.${f.disabled}`]: {
-    color: (r.vars || r).palette.text.disabled
+  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"
+    }
   },
-  [`&.${f.error}`]: {
-    color: (r.vars || r).palette.error.main
+  ...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: {
-      marginTop: 4
+      paddingTop: 21,
+      paddingBottom: 4
+    }
+  }, {
+    props: ({
+      ownerState: r
+    }) => r.hiddenLabel,
+    style: {
+      paddingTop: 16,
+      paddingBottom: 17
     }
   }, {
     props: ({
-      ownerState: o
-    }) => o.contained,
+      ownerState: r
+    }) => r.startAdornment,
     style: {
-      marginLeft: 14,
-      marginRight: 14
+      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
     }
   }]
-}))), S = /* @__PURE__ */ y.forwardRef(function(o, s) {
-  const i = C({
-    props: o,
-    name: "MuiFormHelperText"
+}))), T = /* @__PURE__ */ k.forwardRef(function(r, s) {
+  const n = S({
+    props: r,
+    name: "MuiFilledInput"
   }), {
-    children: a,
-    className: l,
-    component: n = "p",
-    disabled: p,
-    error: c,
-    filled: m,
-    focused: h,
-    margin: $,
-    required: E,
-    variant: B,
-    ...g
-  } = i, v = R(), t = F({
-    props: i,
-    muiFormControl: v,
-    states: ["variant", "size", "disabled", "error", "filled", "focused", "required"]
-  }), d = {
-    ...i,
-    component: n,
-    contained: t.variant === "filled" || t.variant === "outlined",
-    variant: t.variant,
-    size: t.size,
-    disabled: t.disabled,
-    error: t.error,
-    filled: t.filled,
-    focused: t.focused,
-    required: t.required
-  };
-  delete d.ownerState;
-  const T = N(d);
-  return /* @__PURE__ */ u.jsx(w, {
-    as: n,
-    className: z(T.root, l),
+    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,
-    ...g,
-    ownerState: d,
-    children: a === " " ? (
-      // notranslate needed while Google Translate will not fix zero-width space issue
-      b || (b = /* @__PURE__ */ u.jsx("span", {
-        className: "notranslate",
-        "aria-hidden": !0,
-        children: "​"
-      }))
-    ) : a
+    type: m,
+    ...I,
+    classes: C
   });
 });
-process.env.NODE_ENV !== "production" && (S.propTypes = {
+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`.     │
   // └─────────────────────────────────────────────────────────────────────┘
   /**
-   * The content of the component.
-   *
-   * If `' '` is provided, the component reserves one line height for displaying a future message.
+   * 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).
    */
-  children: e.node,
+  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: e.object,
+  classes: o.object,
   /**
-   * @ignore
+   * 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.
    */
-  className: e.string,
+  color: o.oneOfType([o.oneOf(["primary", "secondary"]), o.string]),
   /**
-   * The component used for the root node.
-   * Either a string to use a HTML element or a component.
+   * 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.
    */
-  component: e.elementType,
+  disabled: o.bool,
   /**
-   * If `true`, the helper text should be displayed in a disabled state.
+   * If `true`, the input will not have an underline.
+   * @default false
    */
-  disabled: e.bool,
+  disableUnderline: o.bool,
   /**
-   * If `true`, helper text should be displayed in an error state.
+   * End `InputAdornment` for this component.
    */
-  error: e.bool,
+  endAdornment: o.node,
   /**
-   * If `true`, the helper text should use filled classes key.
+   * If `true`, the `input` will indicate an error.
+   * The prop defaults to the value (`false`) inherited from the parent FormControl component.
    */
-  filled: e.bool,
+  error: o.bool,
   /**
-   * If `true`, the helper text should use focused classes key.
+   * If `true`, the `input` will take up the full width of its container.
+   * @default false
    */
-  focused: e.bool,
+  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.
    */
-  margin: e.oneOf(["dense"]),
+  rows: o.oneOfType([o.number, o.string]),
   /**
-   * If `true`, the helper text should use required classes key.
+   * 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.
    */
-  required: e.bool,
+  startAdornment: o.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]),
+  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 variant to use.
+   * The value of the `input` element, required for a controlled component.
    */
-  variant: e.oneOfType([e.oneOf(["filled", "outlined", "standard"]), e.string])
+  value: o.any
 });
+T.muiName = "Input";
 export {
-  S as default
+  T as default
 };
 //# sourceMappingURL=ui-components.es134.js.map