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

package/dist/ui-components.es208.js

@@ -1,416 +1,314 @@
-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) => {
+import * as J from "react";
+import e from "./ui-components.es89.js";
+import K from "./ui-components.es159.js";
+import Q from "./ui-components.es146.js";
+import { getSwitchBaseUtilityClass as W } from "./ui-components.es274.js";
+import k from "./ui-components.es117.js";
+import { j as w } from "./ui-components.es15.js";
+import X from "./ui-components.es177.js";
+import Y from "./ui-components.es109.js";
+import Z from "./ui-components.es97.js";
+import R from "./ui-components.es50.js";
+import ee from "./ui-components.es155.js";
+import oe from "./ui-components.es126.js";
+const te = (r) => {
   const {
-    classes: t
-  } = e, l = D({
-    root: ["root"],
-    notchedOutline: ["notchedOutline"],
+    classes: s,
+    checked: c,
+    disabled: d,
+    edge: i
+  } = r, p = {
+    root: ["root", c && "checked", d && "disabled", i && `edge${Y(i)}`],
     input: ["input"]
-  }, W, t);
-  return {
-    ...t,
-    // forward classes to the InputBase
-    ...l
   };
-}, 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"
-      }
-    }
-  },
+  return Z(p, W, s);
+}, se = R(ee, {
+  name: "MuiSwitchBase"
+})({
+  padding: 9,
+  borderRadius: "50%",
   variants: [{
     props: {
+      edge: "start",
       size: "small"
     },
     style: {
-      padding: "8.5px 14px"
+      marginLeft: -3
     }
   }, {
     props: ({
-      ownerState: t
-    }) => t.multiline,
+      edge: r,
+      ownerState: s
+    }) => r === "start" && s.size !== "small",
     style: {
-      padding: 0
+      marginLeft: -12
     }
   }, {
-    props: ({
-      ownerState: t
-    }) => t.startAdornment,
+    props: {
+      edge: "end",
+      size: "small"
+    },
     style: {
-      paddingLeft: 0
+      marginRight: -3
     }
   }, {
     props: ({
-      ownerState: t
-    }) => t.endAdornment,
+      edge: r,
+      ownerState: s
+    }) => r === "end" && s.size !== "small",
     style: {
-      paddingRight: 0
+      marginRight: -12
     }
   }]
-}))), 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,
+}), 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,
     shouldForwardComponentProp: !0,
-    ownerState: T,
     externalForwardedProps: {
-      slots: p,
-      slotProps: O
+      ...S,
+      component: "span",
+      ...M
     },
+    getSlotProps: (o) => ({
+      ...o,
+      onFocus: (t) => {
+        o.onFocus?.(t), v(t);
+      },
+      onBlur: (t) => {
+        o.onBlur?.(t), D(t);
+      }
+    }),
+    ownerState: u,
     additionalProps: {
-      label: i != null && i !== "" && s.required ? /* @__PURE__ */ a.jsxs(C.Fragment, {
-        children: [i, " ", "*"]
-      }) : i
+      centerRipple: !0,
+      focusRipple: !m,
+      role: void 0,
+      tabIndex: null
     }
-  });
-  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)
+  }), [G, H] = k("input", {
+    ref: O,
+    elementType: ne,
+    className: B.input,
+    externalForwardedProps: S,
+    getSlotProps: (o) => ({
+      ...o,
+      onChange: (t) => {
+        o.onChange?.(t), V(t);
+      }
     }),
-    fullWidth: f,
-    inputComponent: R,
-    multiline: b,
-    ref: r,
-    type: g,
-    ...I,
-    classes: {
-      ...h,
-      notchedOutline: null
+    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
+      }
     }
   });
+  return /* @__PURE__ */ w.jsxs($, {
+    ...A,
+    children: [/* @__PURE__ */ w.jsx(G, {
+      ...H
+    }), F ? p : T]
+  });
 });
-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`.     │
-  // └─────────────────────────────────────────────────────────────────────┘
-  /**
-   * 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,
+process.env.NODE_ENV !== "production" && (re.propTypes = {
   /**
    * If `true`, the `input` element is focused during the first mount.
    */
-  autoFocus: o.bool,
+  autoFocus: e.bool,
   /**
-   * Override or extend the styles applied to the component.
+   * If `true`, the component is checked.
    */
-  classes: o.object,
+  checked: e.bool,
   /**
-   * 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.
+   * The icon to display when the component is checked.
    */
-  color: o.oneOfType([o.oneOf(["primary", "secondary"]), o.string]),
+  checkedIcon: e.node.isRequired,
   /**
-   * 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 {}
+   * Override or extend the styles applied to the component.
    */
-  components: o.shape({
-    Input: o.elementType,
-    Root: o.elementType
-  }),
+  classes: e.object,
   /**
-   * The default value. Use when the component is not controlled.
+   * @ignore
    */
-  defaultValue: o.any,
+  className: e.string,
   /**
-   * If `true`, the component is disabled.
-   * The prop defaults to the value (`false`) inherited from the parent FormControl component.
+   * @ignore
    */
-  disabled: o.bool,
+  defaultChecked: e.bool,
   /**
-   * End `InputAdornment` for this component.
+   * If `true`, the component is disabled.
    */
-  endAdornment: o.node,
+  disabled: e.bool,
   /**
-   * If `true`, the `input` will indicate an error.
-   * The prop defaults to the value (`false`) inherited from the parent FormControl component.
+   * If `true`, the  keyboard focus ripple is disabled.
+   * @default false
    */
-  error: o.bool,
+  disableFocusRipple: e.bool,
   /**
-   * If `true`, the `input` will take up the full width of its container.
+   * 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
    */
-  fullWidth: o.bool,
+  edge: e.oneOf(["end", "start", !1]),
   /**
-   * The id of the `input` element.
+   * The icon to display when the component is unchecked.
    */
-  id: o.string,
+  icon: e.node.isRequired,
   /**
-   * The component used for the `input` element.
-   * Either a string to use a HTML element or a component.
-   * @default 'input'
+   * The id of the `input` element.
    */
-  inputComponent: o.elementType,
+  id: e.string,
   /**
    * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#attributes) applied to the `input` element.
-   * @default {}
    */
-  inputProps: o.object,
+  inputProps: e.object,
   /**
    * Pass a ref to the `input` element.
    */
-  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.
+  inputRef: oe,
+  /*
+   * @ignore
    */
-  name: o.string,
+  name: e.string,
   /**
-   * If `true`, the outline is notched to accommodate the label.
+   * @ignore
    */
-  notched: o.bool,
+  onBlur: e.func,
   /**
-   * Callback fired when the value is changed.
+   * Callback fired when the state 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).
+   * @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,
+  onChange: e.func,
   /**
-   * The short hint displayed in the `input` before the user enters a value.
+   * @ignore
    */
-  placeholder: o.string,
+  onFocus: e.func,
   /**
    * It prevents the user from changing the value of the field
    * (not from interacting with the field).
    */
-  readOnly: o.bool,
+  readOnly: e.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]),
+  required: e.bool,
   /**
    * The props used for each slot inside.
    * @default {}
    */
-  slotProps: o.shape({
-    input: o.object,
-    notchedOutline: o.oneOfType([o.func, o.object]),
-    root: o.object
+  slotProps: e.shape({
+    input: e.oneOfType([e.func, e.object]),
+    root: e.oneOfType([e.func, e.object])
   }),
   /**
    * The components used for each slot inside.
    * @default {}
    */
-  slots: o.shape({
-    input: o.elementType,
-    notchedOutline: o.elementType,
-    root: o.elementType
+  slots: e.shape({
+    input: e.elementType,
+    root: e.elementType
   }),
   /**
-   * Start `InputAdornment` for this component.
+   * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  startAdornment: o.node,
+  sx: e.object,
   /**
-   * The system prop that allows defining system overrides as well as additional CSS styles.
+   * @ignore
    */
-  sx: o.oneOfType([o.arrayOf(o.oneOfType([o.func, o.object, o.bool])), o.func, o.object]),
+  tabIndex: e.oneOfType([e.number, e.string]),
   /**
-   * 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'
+   * The input component prop `type`.
    */
-  type: o.string,
+  type: e.string.isRequired,
   /**
-   * The value of the `input` element, required for a controlled component.
+   * The value of the component.
    */
-  value: o.any
+  value: e.any
 });
-x.muiName = "Input";
 export {
-  x as default
+  re as default
 };
 //# sourceMappingURL=ui-components.es208.js.map