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

package/dist/ui-components.es210.js

@@ -1,347 +1,297 @@
-import * as P from "react";
-import o from "./ui-components.es89.js";
-import C from "./ui-components.es136.js";
-import j from "./ui-components.es93.js";
-import x from "./ui-components.es133.js";
-import s, { getInputUtilityClass as B } from "./ui-components.es337.js";
-import w, { InputBaseRoot as U, rootOverridesResolver as $, InputBaseInput as S, inputOverridesResolver as h } from "./ui-components.es41.js";
-import { j as E } from "./ui-components.es15.js";
-import { useDefaultProps as F } from "./ui-components.es96.js";
-import M from "./ui-components.es162.js";
-import N from "./ui-components.es97.js";
-import d from "./ui-components.es40.js";
-import V from "./ui-components.es128.js";
-const W = (t) => {
-  const {
-    classes: n,
-    disableUnderline: r
-  } = t, i = N({
-    root: ["root", !r && "underline"],
-    input: ["input"]
-  }, B, n);
-  return {
-    ...n,
-    // forward classes to the InputBase
-    ...i
-  };
-}, X = d(U, {
-  shouldForwardProp: (t) => C(t) || t === "classes",
-  name: "MuiInput",
-  slot: "Root",
-  overridesResolver: (t, n) => {
-    const {
-      ownerState: r
-    } = t;
-    return [...$(t, n), !r.disableUnderline && n.underline];
-  }
-})(j(({
-  theme: t
-}) => {
-  let r = t.palette.mode === "light" ? "rgba(0, 0, 0, 0.42)" : "rgba(255, 255, 255, 0.7)";
-  return t.vars && (r = t.alpha(t.vars.palette.common.onBackground, t.vars.opacity.inputUnderline)), {
-    position: "relative",
-    variants: [{
-      props: ({
-        ownerState: e
-      }) => e.formControl,
-      style: {
-        "label + &": {
-          marginTop: 16
-        }
-      }
-    }, {
-      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.
-        },
-        [`&.${s.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)"
-        },
-        [`&.${s.error}`]: {
-          "&::before, &::after": {
-            borderBottomColor: (t.vars || t).palette.error.main
-          }
-        },
-        "&::before": {
-          borderBottom: `1px solid ${r}`,
-          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(.${s.disabled}, .${s.error}):before`]: {
-          borderBottom: `2px solid ${(t.vars || t).palette.text.primary}`,
-          // Reset on touch devices, it doesn't add specificity
-          "@media (hover: none)": {
-            borderBottom: `1px solid ${r}`
-          }
-        },
-        [`&.${s.disabled}:before`]: {
-          borderBottomStyle: "dotted"
-        }
-      }
-    }, ...Object.entries(t.palette).filter(x()).map(([e]) => ({
-      props: {
-        color: e,
-        disableUnderline: !1
-      },
-      style: {
-        "&::after": {
-          borderBottom: `2px solid ${(t.vars || t).palette[e].main}`
-        }
+import { sizingTransform as o, maxWidth as s } from "./ui-components.es337.js";
+import { columnGap as i, rowGap as n, gap as m } from "./ui-components.es335.js";
+import { margin as e, padding as t } from "./ui-components.es213.js";
+import { paletteTransform as l } from "./ui-components.es338.js";
+import { borderRadius as y, borderTransform as r } from "./ui-components.es331.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
       }
-    }))]
-  };
-})), A = d(S, {
-  name: "MuiInput",
-  slot: "Input",
-  overridesResolver: h
-})({}), c = /* @__PURE__ */ P.forwardRef(function(n, r) {
-  const e = F({
-    props: n,
-    name: "MuiInput"
-  }), {
-    disableUnderline: i = !1,
-    components: p = {},
-    componentsProps: a,
-    fullWidth: f = !1,
-    inputComponent: b = "input",
-    multiline: y = !1,
-    slotProps: l,
-    slots: u = {},
-    type: g = "text",
-    ...v
-  } = e, I = W(e), m = {
-    root: {
-      ownerState: {
-        disableUnderline: i
-      }
-    }
-  }, R = l ?? a ? M(l ?? a, m) : m, T = u.root ?? p.Root ?? X, O = u.input ?? p.Input ?? A;
-  return /* @__PURE__ */ E.jsx(w, {
-    slots: {
-      root: T,
-      input: O
-    },
-    slotProps: R,
-    fullWidth: f,
-    inputComponent: b,
-    multiline: y,
-    ref: r,
-    type: g,
-    ...v,
-    classes: I
-  });
-});
-process.env.NODE_ENV !== "production" && (c.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,
-  /**
-   * 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: V,
-  /**
-   * 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
-});
-c.muiName = "Input";
+    })
+  },
+  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"
+  }
+};
 export {
-  c as default
+  b as default
 };
 //# sourceMappingURL=ui-components.es210.js.map