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

package/dist/ui-components.es208.js

@@ -1,416 +1,297 @@
-import * as C from "react";
-import o from "./ui-components.es89.js";
-import F from "./ui-components.es335.js";
-import k from "./ui-components.es116.js";
-import $ from "./ui-components.es114.js";
-import B from "./ui-components.es127.js";
-import u from "./ui-components.es93.js";
-import N from "./ui-components.es128.js";
-import n, { getOutlinedInputUtilityClass as W } from "./ui-components.es336.js";
-import A, { InputBaseRoot as L, rootOverridesResolver as z, InputBaseInput as M, inputOverridesResolver as q } from "./ui-components.es38.js";
-import E from "./ui-components.es108.js";
-import { j as a } from "./ui-components.es15.js";
-import { useDefaultProps as V } from "./ui-components.es95.js";
-import D from "./ui-components.es97.js";
-import c from "./ui-components.es37.js";
-import U from "./ui-components.es125.js";
-const _ = (e) => {
-  const {
-    classes: t
-  } = e, l = D({
-    root: ["root"],
-    notchedOutline: ["notchedOutline"],
-    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"
+import { sizingTransform as o, maxWidth as s } from "./ui-components.es338.js";
+import { columnGap as i, rowGap as n, gap as m } from "./ui-components.es339.js";
+import { margin as e, padding as t } from "./ui-components.es211.js";
+import { paletteTransform as l } from "./ui-components.es337.js";
+import { borderRadius as y, borderTransform as r } from "./ui-components.es327.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
       }
-    }
-  },
-  variants: [{
-    props: {
-      size: "small"
-    },
-    style: {
-      padding: "8.5px 14px"
-    }
-  }, {
-    props: ({
-      ownerState: t
-    }) => t.multiline,
-    style: {
-      padding: 0
-    }
-  }, {
-    props: ({
-      ownerState: t
-    }) => t.startAdornment,
-    style: {
-      paddingLeft: 0
-    }
-  }, {
-    props: ({
-      ownerState: t
-    }) => t.endAdornment,
-    style: {
-      paddingRight: 0
-    }
-  }]
-}))), 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: {
-      slots: p,
-      slotProps: O
-    },
-    additionalProps: {
-      label: i != null && i !== "" && s.required ? /* @__PURE__ */ a.jsxs(C.Fragment, {
-        children: [i, " ", "*"]
-      }) : i
-    }
-  });
-  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)
-    }),
-    fullWidth: f,
-    inputComponent: R,
-    multiline: b,
-    ref: r,
-    type: g,
-    ...I,
-    classes: {
-      ...h,
-      notchedOutline: null
-    }
-  });
-});
-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,
-  /**
-   * 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 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,
-  /**
-   * 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: 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: o.string,
-  /**
-   * If `true`, the outline is notched to accommodate the label.
-   */
-  notched: o.bool,
-  /**
-   * 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 props used for each slot inside.
-   * @default {}
-   */
-  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: o.shape({
-    input: o.elementType,
-    notchedOutline: 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
-});
-x.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 {
-  x as default
+  b as default
 };
 //# sourceMappingURL=ui-components.es208.js.map