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

package/dist/ui-components.es208.js

@@ -1,314 +1,416 @@
-import * as J from "react";
-import e from "./ui-components.es89.js";
-import K from "./ui-components.es143.js";
-import Q from "./ui-components.es152.js";
-import { getSwitchBaseUtilityClass as W } from "./ui-components.es255.js";
-import k from "./ui-components.es123.js";
-import { j as w } from "./ui-components.es15.js";
-import X from "./ui-components.es179.js";
-import Y from "./ui-components.es113.js";
-import Z from "./ui-components.es114.js";
-import R from "./ui-components.es48.js";
-import ee from "./ui-components.es148.js";
-import oe from "./ui-components.es132.js";
-const te = (r) => {
+import * as C from "react";
+import o from "./ui-components.es89.js";
+import F from "./ui-components.es342.js";
+import k from "./ui-components.es120.js";
+import $ from "./ui-components.es118.js";
+import B from "./ui-components.es136.js";
+import u from "./ui-components.es93.js";
+import N from "./ui-components.es133.js";
+import n, { getOutlinedInputUtilityClass as W } from "./ui-components.es343.js";
+import A, { InputBaseRoot as L, rootOverridesResolver as z, InputBaseInput as M, inputOverridesResolver as q } from "./ui-components.es41.js";
+import E from "./ui-components.es114.js";
+import { j as a } from "./ui-components.es15.js";
+import { useDefaultProps as V } from "./ui-components.es96.js";
+import D from "./ui-components.es97.js";
+import c from "./ui-components.es40.js";
+import U from "./ui-components.es128.js";
+const _ = (e) => {
   const {
-    classes: s,
-    checked: c,
-    disabled: d,
-    edge: i
-  } = r, p = {
-    root: ["root", c && "checked", d && "disabled", i && `edge${Y(i)}`],
+    classes: t
+  } = e, l = D({
+    root: ["root"],
+    notchedOutline: ["notchedOutline"],
     input: ["input"]
+  }, W, t);
+  return {
+    ...t,
+    // forward classes to the InputBase
+    ...l
   };
-  return Z(p, W, s);
-}, se = R(ee, {
-  name: "MuiSwitchBase"
-})({
-  padding: 9,
-  borderRadius: "50%",
+}, G = c(L, {
+  shouldForwardProp: (e) => B(e) || e === "classes",
+  name: "MuiOutlinedInput",
+  slot: "Root",
+  overridesResolver: z
+})(u(({
+  theme: e
+}) => {
+  const t = e.palette.mode === "light" ? "rgba(0, 0, 0, 0.23)" : "rgba(255, 255, 255, 0.23)";
+  return {
+    position: "relative",
+    borderRadius: (e.vars || e).shape.borderRadius,
+    [`&:hover .${n.notchedOutline}`]: {
+      borderColor: (e.vars || e).palette.text.primary
+    },
+    // Reset on touch devices, it doesn't add specificity
+    "@media (hover: none)": {
+      [`&:hover .${n.notchedOutline}`]: {
+        borderColor: e.vars ? e.alpha(e.vars.palette.common.onBackground, 0.23) : t
+      }
+    },
+    [`&.${n.focused} .${n.notchedOutline}`]: {
+      borderWidth: 2
+    },
+    variants: [...Object.entries(e.palette).filter(N()).map(([r]) => ({
+      props: {
+        color: r
+      },
+      style: {
+        [`&.${n.focused} .${n.notchedOutline}`]: {
+          borderColor: (e.vars || e).palette[r].main
+        }
+      }
+    })), {
+      props: {},
+      // to override the above style
+      style: {
+        [`&.${n.error} .${n.notchedOutline}`]: {
+          borderColor: (e.vars || e).palette.error.main
+        },
+        [`&.${n.disabled} .${n.notchedOutline}`]: {
+          borderColor: (e.vars || e).palette.action.disabled
+        }
+      }
+    }, {
+      props: ({
+        ownerState: r
+      }) => r.startAdornment,
+      style: {
+        paddingLeft: 14
+      }
+    }, {
+      props: ({
+        ownerState: r
+      }) => r.endAdornment,
+      style: {
+        paddingRight: 14
+      }
+    }, {
+      props: ({
+        ownerState: r
+      }) => r.multiline,
+      style: {
+        padding: "16.5px 14px"
+      }
+    }, {
+      props: ({
+        ownerState: r,
+        size: l
+      }) => r.multiline && l === "small",
+      style: {
+        padding: "8.5px 14px"
+      }
+    }]
+  };
+})), H = c(F, {
+  name: "MuiOutlinedInput",
+  slot: "NotchedOutline"
+})(u(({
+  theme: e
+}) => {
+  const t = e.palette.mode === "light" ? "rgba(0, 0, 0, 0.23)" : "rgba(255, 255, 255, 0.23)";
+  return {
+    borderColor: e.vars ? e.alpha(e.vars.palette.common.onBackground, 0.23) : t
+  };
+})), J = c(M, {
+  name: "MuiOutlinedInput",
+  slot: "Input",
+  overridesResolver: q
+})(u(({
+  theme: e
+}) => ({
+  padding: "16.5px 14px",
+  ...!e.vars && {
+    "&:-webkit-autofill": {
+      WebkitBoxShadow: e.palette.mode === "light" ? null : "0 0 0 100px #266798 inset",
+      WebkitTextFillColor: e.palette.mode === "light" ? null : "#fff",
+      caretColor: e.palette.mode === "light" ? null : "#fff",
+      borderRadius: "inherit"
+    }
+  },
+  ...e.vars && {
+    "&:-webkit-autofill": {
+      borderRadius: "inherit"
+    },
+    [e.getColorSchemeSelector("dark")]: {
+      "&:-webkit-autofill": {
+        WebkitBoxShadow: "0 0 0 100px #266798 inset",
+        WebkitTextFillColor: "#fff",
+        caretColor: "#fff"
+      }
+    }
+  },
   variants: [{
     props: {
-      edge: "start",
       size: "small"
     },
     style: {
-      marginLeft: -3
+      padding: "8.5px 14px"
     }
   }, {
     props: ({
-      edge: r,
-      ownerState: s
-    }) => r === "start" && s.size !== "small",
+      ownerState: t
+    }) => t.multiline,
     style: {
-      marginLeft: -12
+      padding: 0
     }
   }, {
-    props: {
-      edge: "end",
-      size: "small"
-    },
+    props: ({
+      ownerState: t
+    }) => t.startAdornment,
     style: {
-      marginRight: -3
+      paddingLeft: 0
     }
   }, {
     props: ({
-      edge: r,
-      ownerState: s
-    }) => r === "end" && s.size !== "small",
+      ownerState: t
+    }) => t.endAdornment,
     style: {
-      marginRight: -12
+      paddingRight: 0
     }
   }]
-}), ne = R("input", {
-  name: "MuiSwitchBase",
-  shouldForwardProp: K
-})({
-  cursor: "inherit",
-  position: "absolute",
-  opacity: 0,
-  width: "100%",
-  height: "100%",
-  top: 0,
-  left: 0,
-  margin: 0,
-  padding: 0,
-  zIndex: 1
-}), re = /* @__PURE__ */ J.forwardRef(function(s, c) {
-  const {
-    autoFocus: d,
-    checked: i,
-    checkedIcon: p,
-    defaultChecked: f,
-    disabled: C,
-    disableFocusRipple: m = !1,
-    edge: x = !1,
-    icon: T,
-    id: j,
-    inputProps: I,
-    inputRef: O,
-    name: z,
-    onBlur: h,
-    onChange: b,
-    onFocus: g,
-    readOnly: y,
-    required: q = !1,
-    tabIndex: N,
-    type: a,
-    value: P,
-    slots: E = {},
-    slotProps: L = {},
-    ...M
-  } = s, [F, U] = X({
-    controlled: i,
-    default: !!f,
-    name: "SwitchBase",
-    state: "checked"
-  }), n = Q(), v = (o) => {
-    g && g(o), n && n.onFocus && n.onFocus(o);
-  }, D = (o) => {
-    h && h(o), n && n.onBlur && n.onBlur(o);
-  }, V = (o) => {
-    if (o.nativeEvent.defaultPrevented || y)
-      return;
-    const t = o.target.checked;
-    U(t), b && b(o, t);
-  };
-  let l = C;
-  n && typeof l > "u" && (l = n.disabled);
-  const _ = a === "checkbox" || a === "radio", u = {
-    ...s,
-    checked: F,
-    disabled: l,
-    disableFocusRipple: m,
-    edge: x
-  }, B = te(u), S = {
-    slots: E,
-    slotProps: {
-      input: I,
-      ...L
-    }
-  }, [$, A] = k("root", {
-    ref: c,
-    elementType: se,
-    className: B.root,
+}))), x = /* @__PURE__ */ C.forwardRef(function(t, r) {
+  const l = V({
+    props: t,
+    name: "MuiOutlinedInput"
+  }), {
+    components: m = {},
+    fullWidth: f = !1,
+    inputComponent: R = "input",
+    label: i,
+    multiline: b = !1,
+    notched: y,
+    slots: p = {},
+    slotProps: O = {},
+    type: g = "text",
+    ...I
+  } = l, h = _(l), v = k(), s = $({
+    props: l,
+    muiFormControl: v,
+    states: ["color", "disabled", "error", "focused", "hiddenLabel", "size", "required"]
+  }), T = {
+    ...l,
+    color: s.color || "primary",
+    disabled: s.disabled,
+    error: s.error,
+    focused: s.focused,
+    formControl: v,
+    fullWidth: f,
+    hiddenLabel: s.hiddenLabel,
+    multiline: b,
+    size: s.size,
+    type: g
+  }, w = p.root ?? m.Root ?? G, j = p.input ?? m.Input ?? J, [P, S] = E("notchedOutline", {
+    elementType: H,
+    className: h.notchedOutline,
     shouldForwardComponentProp: !0,
+    ownerState: T,
     externalForwardedProps: {
-      ...S,
-      component: "span",
-      ...M
+      slots: p,
+      slotProps: O
     },
-    getSlotProps: (o) => ({
-      ...o,
-      onFocus: (t) => {
-        o.onFocus?.(t), v(t);
-      },
-      onBlur: (t) => {
-        o.onBlur?.(t), D(t);
-      }
-    }),
-    ownerState: u,
     additionalProps: {
-      centerRipple: !0,
-      focusRipple: !m,
-      role: void 0,
-      tabIndex: null
+      label: i != null && i !== "" && s.required ? /* @__PURE__ */ a.jsxs(C.Fragment, {
+        children: [i, " ", "*"]
+      }) : i
     }
-  }), [G, H] = k("input", {
-    ref: O,
-    elementType: ne,
-    className: B.input,
-    externalForwardedProps: S,
-    getSlotProps: (o) => ({
-      ...o,
-      onChange: (t) => {
-        o.onChange?.(t), V(t);
-      }
+  });
+  return /* @__PURE__ */ a.jsx(A, {
+    slots: {
+      root: w,
+      input: j
+    },
+    slotProps: O,
+    renderSuffix: (d) => /* @__PURE__ */ a.jsx(P, {
+      ...S,
+      notched: typeof y < "u" ? y : !!(d.startAdornment || d.filled || d.focused)
     }),
-    ownerState: u,
-    additionalProps: {
-      autoFocus: d,
-      checked: i,
-      defaultChecked: f,
-      disabled: l,
-      id: _ ? j : void 0,
-      name: z,
-      readOnly: y,
-      required: q,
-      tabIndex: N,
-      type: a,
-      ...a === "checkbox" && P === void 0 ? {} : {
-        value: P
-      }
+    fullWidth: f,
+    inputComponent: R,
+    multiline: b,
+    ref: r,
+    type: g,
+    ...I,
+    classes: {
+      ...h,
+      notchedOutline: null
     }
   });
-  return /* @__PURE__ */ w.jsxs($, {
-    ...A,
-    children: [/* @__PURE__ */ w.jsx(G, {
-      ...H
-    }), F ? p : T]
-  });
 });
-process.env.NODE_ENV !== "production" && (re.propTypes = {
+process.env.NODE_ENV !== "production" && (x.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 `input` element is focused during the first mount.
+   * 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).
    */
-  autoFocus: e.bool,
+  autoComplete: o.string,
   /**
-   * If `true`, the component is checked.
+   * If `true`, the `input` element is focused during the first mount.
    */
-  checked: e.bool,
+  autoFocus: o.bool,
   /**
-   * The icon to display when the component is checked.
+   * Override or extend the styles applied to the component.
    */
-  checkedIcon: e.node.isRequired,
+  classes: o.object,
   /**
-   * Override or extend the styles applied to the component.
+   * 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.
    */
-  classes: e.object,
+  color: o.oneOfType([o.oneOf(["primary", "secondary"]), o.string]),
   /**
-   * @ignore
+   * 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 {}
    */
-  className: e.string,
+  components: o.shape({
+    Input: o.elementType,
+    Root: o.elementType
+  }),
   /**
-   * @ignore
+   * The default value. Use when the component is not controlled.
    */
-  defaultChecked: e.bool,
+  defaultValue: o.any,
   /**
    * If `true`, the component is disabled.
+   * The prop defaults to the value (`false`) inherited from the parent FormControl component.
    */
-  disabled: e.bool,
+  disabled: o.bool,
   /**
-   * If `true`, the  keyboard focus ripple is disabled.
-   * @default false
+   * End `InputAdornment` for this component.
    */
-  disableFocusRipple: e.bool,
+  endAdornment: o.node,
   /**
-   * 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
+   * If `true`, the `input` will indicate an error.
+   * The prop defaults to the value (`false`) inherited from the parent FormControl component.
    */
-  edge: e.oneOf(["end", "start", !1]),
+  error: o.bool,
   /**
-   * The icon to display when the component is unchecked.
+   * If `true`, the `input` will take up the full width of its container.
+   * @default false
    */
-  icon: e.node.isRequired,
+  fullWidth: o.bool,
   /**
    * The id of the `input` element.
    */
-  id: e.string,
+  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: e.object,
+  inputProps: o.object,
   /**
    * Pass a ref to the `input` element.
    */
-  inputRef: oe,
-  /*
-   * @ignore
+  inputRef: U,
+  /**
+   * The label of the `input`. It is only used for layout. The actual labelling
+   * is handled by `InputLabel`.
+   */
+  label: o.node,
+  /**
+   * 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: e.string,
+  name: o.string,
   /**
-   * @ignore
+   * If `true`, the outline is notched to accommodate the label.
    */
-  onBlur: e.func,
+  notched: o.bool,
   /**
-   * Callback fired when the state is changed.
+   * Callback fired when the value 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).
+   * @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: e.func,
+  onChange: o.func,
   /**
-   * @ignore
+   * The short hint displayed in the `input` before the user enters a value.
    */
-  onFocus: e.func,
+  placeholder: o.string,
   /**
    * It prevents the user from changing the value of the field
    * (not from interacting with the field).
    */
-  readOnly: e.bool,
+  readOnly: o.bool,
   /**
    * If `true`, the `input` element is required.
+   * The prop defaults to the value (`false`) inherited from the parent FormControl component.
    */
-  required: e.bool,
+  required: o.bool,
+  /**
+   * Number of rows to display when multiline option is set to true.
+   */
+  rows: o.oneOfType([o.number, o.string]),
   /**
    * The props used for each slot inside.
    * @default {}
    */
-  slotProps: e.shape({
-    input: e.oneOfType([e.func, e.object]),
-    root: e.oneOfType([e.func, e.object])
+  slotProps: o.shape({
+    input: o.object,
+    notchedOutline: o.oneOfType([o.func, o.object]),
+    root: o.object
   }),
   /**
    * The components used for each slot inside.
    * @default {}
    */
-  slots: e.shape({
-    input: e.elementType,
-    root: e.elementType
+  slots: o.shape({
+    input: o.elementType,
+    notchedOutline: o.elementType,
+    root: o.elementType
   }),
   /**
-   * The system prop that allows defining system overrides as well as additional CSS styles.
+   * Start `InputAdornment` for this component.
    */
-  sx: e.object,
+  startAdornment: o.node,
   /**
-   * @ignore
+   * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  tabIndex: e.oneOfType([e.number, e.string]),
+  sx: o.oneOfType([o.arrayOf(o.oneOfType([o.func, o.object, o.bool])), o.func, o.object]),
   /**
-   * The input component prop `type`.
+   * 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: e.string.isRequired,
+  type: o.string,
   /**
-   * The value of the component.
+   * The value of the `input` element, required for a controlled component.
    */
-  value: e.any
+  value: o.any
 });
+x.muiName = "Input";
 export {
-  re as default
+  x as default
 };
 //# sourceMappingURL=ui-components.es208.js.map