@weng-lab/ui-components 2.2.1 → 2.2.2

package/dist/ui-components.es200.js

@@ -1,297 +1,501 @@
-import { sizingTransform as o, maxWidth as s } from "./ui-components.es328.js";
-import { columnGap as i, rowGap as n, gap as m } from "./ui-components.es322.js";
-import { margin as e, padding as t } from "./ui-components.es203.js";
-import { paletteTransform as l } from "./ui-components.es326.js";
-import { borderRadius as y, borderTransform as r } from "./ui-components.es315.js";
-const b = {
-  // borders
-  border: {
-    themeKey: "borders",
-    transform: r
-  },
-  borderTop: {
-    themeKey: "borders",
-    transform: r
-  },
-  borderRight: {
-    themeKey: "borders",
-    transform: r
-  },
-  borderBottom: {
-    themeKey: "borders",
-    transform: r
-  },
-  borderLeft: {
-    themeKey: "borders",
-    transform: r
-  },
-  borderColor: {
-    themeKey: "palette"
-  },
-  borderTopColor: {
-    themeKey: "palette"
-  },
-  borderRightColor: {
-    themeKey: "palette"
-  },
-  borderBottomColor: {
-    themeKey: "palette"
-  },
-  borderLeftColor: {
-    themeKey: "palette"
-  },
-  outline: {
-    themeKey: "borders",
-    transform: r
-  },
-  outlineColor: {
-    themeKey: "palette"
-  },
-  borderRadius: {
-    themeKey: "shape.borderRadius",
-    style: y
-  },
-  // palette
-  color: {
-    themeKey: "palette",
-    transform: l
-  },
-  bgcolor: {
-    themeKey: "palette",
-    cssProperty: "backgroundColor",
-    transform: l
-  },
-  backgroundColor: {
-    themeKey: "palette",
-    transform: l
-  },
-  // spacing
-  p: {
-    style: t
-  },
-  pt: {
-    style: t
-  },
-  pr: {
-    style: t
-  },
-  pb: {
-    style: t
-  },
-  pl: {
-    style: t
-  },
-  px: {
-    style: t
-  },
-  py: {
-    style: t
-  },
-  padding: {
-    style: t
-  },
-  paddingTop: {
-    style: t
-  },
-  paddingRight: {
-    style: t
-  },
-  paddingBottom: {
-    style: t
-  },
-  paddingLeft: {
-    style: t
-  },
-  paddingX: {
-    style: t
-  },
-  paddingY: {
-    style: t
-  },
-  paddingInline: {
-    style: t
-  },
-  paddingInlineStart: {
-    style: t
-  },
-  paddingInlineEnd: {
-    style: t
-  },
-  paddingBlock: {
-    style: t
-  },
-  paddingBlockStart: {
-    style: t
-  },
-  paddingBlockEnd: {
-    style: t
-  },
-  m: {
-    style: e
-  },
-  mt: {
-    style: e
-  },
-  mr: {
-    style: e
-  },
-  mb: {
-    style: e
-  },
-  ml: {
-    style: e
-  },
-  mx: {
-    style: e
-  },
-  my: {
-    style: e
-  },
-  margin: {
-    style: e
-  },
-  marginTop: {
-    style: e
-  },
-  marginRight: {
-    style: e
-  },
-  marginBottom: {
-    style: e
-  },
-  marginLeft: {
-    style: e
-  },
-  marginX: {
-    style: e
-  },
-  marginY: {
-    style: e
-  },
-  marginInline: {
-    style: e
-  },
-  marginInlineStart: {
-    style: e
-  },
-  marginInlineEnd: {
-    style: e
-  },
-  marginBlock: {
-    style: e
-  },
-  marginBlockStart: {
-    style: e
-  },
-  marginBlockEnd: {
-    style: e
-  },
-  // display
-  displayPrint: {
-    cssProperty: !1,
-    transform: (a) => ({
-      "@media print": {
-        display: a
-      }
-    })
-  },
-  display: {},
-  overflow: {},
-  textOverflow: {},
-  visibility: {},
-  whiteSpace: {},
-  // flexbox
-  flexBasis: {},
-  flexDirection: {},
-  flexWrap: {},
-  justifyContent: {},
-  alignItems: {},
-  alignContent: {},
-  order: {},
-  flex: {},
-  flexGrow: {},
-  flexShrink: {},
-  alignSelf: {},
-  justifyItems: {},
-  justifySelf: {},
-  // grid
-  gap: {
-    style: m
-  },
-  rowGap: {
-    style: n
-  },
-  columnGap: {
-    style: i
-  },
-  gridColumn: {},
-  gridRow: {},
-  gridAutoFlow: {},
-  gridAutoColumns: {},
-  gridAutoRows: {},
-  gridTemplateColumns: {},
-  gridTemplateRows: {},
-  gridTemplateAreas: {},
-  gridArea: {},
-  // positions
-  position: {},
-  zIndex: {
-    themeKey: "zIndex"
-  },
-  top: {},
-  right: {},
-  bottom: {},
-  left: {},
-  // shadows
-  boxShadow: {
-    themeKey: "shadows"
-  },
-  // sizing
-  width: {
-    transform: o
-  },
-  maxWidth: {
-    style: s
-  },
-  minWidth: {
-    transform: o
-  },
-  height: {
-    transform: o
-  },
-  maxHeight: {
-    transform: o
-  },
-  minHeight: {
-    transform: o
-  },
-  boxSizing: {},
-  // typography
-  font: {
-    themeKey: "font"
-  },
-  fontFamily: {
-    themeKey: "typography"
-  },
-  fontSize: {
-    themeKey: "typography"
-  },
-  fontStyle: {
-    themeKey: "typography"
-  },
-  fontWeight: {
-    themeKey: "typography"
-  },
-  letterSpacing: {},
-  textTransform: {},
-  lineHeight: {},
-  textAlign: {},
-  typography: {
-    cssProperty: !1,
-    themeKey: "typography"
+import * as k from "react";
+import o from "./ui-components.es88.js";
+import L from "./ui-components.es132.js";
+import v from "./ui-components.es93.js";
+import O from "./ui-components.es133.js";
+import l, { getFilledInputUtilityClass as h } from "./ui-components.es325.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.es96.js";
+import W from "./ui-components.es187.js";
+import z from "./ui-components.es108.js";
+import E from "./ui-components.es97.js";
+import R from "./ui-components.es34.js";
+import M from "./ui-components.es130.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
+  });
+});
+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 {
-  b as default
+  T as default
 };
 //# sourceMappingURL=ui-components.es200.js.map