@weng-lab/ui-components 2.0.0 → 2.0.2

package/dist/ui-components.es70.js

@@ -1,324 +1,249 @@
-import * as Q from "react";
+import * as A from "react";
 import r from "./ui-components.es81.js";
-import { clsx as X } from "./ui-components.es80.js";
-import Y from "./ui-components.es275.js";
-import S from "./ui-components.es82.js";
-import w from "./ui-components.es106.js";
-import e, { getBadgeUtilityClass as oo } from "./ui-components.es276.js";
-import C from "./ui-components.es122.js";
-import { j as D } from "./ui-components.es12.js";
-import { useDefaultProps as ro } from "./ui-components.es85.js";
-import to from "./ui-components.es277.js";
-import N from "./ui-components.es40.js";
-import n from "./ui-components.es110.js";
-import ao from "./ui-components.es86.js";
-const f = 10, m = 4, no = (t) => {
+import { clsx as R } from "./ui-components.es82.js";
+import m from "./ui-components.es86.js";
+import { getDividerUtilityClass as T } from "./ui-components.es263.js";
+import { j as v } from "./ui-components.es12.js";
+import { useDefaultProps as D } from "./ui-components.es92.js";
+import b from "./ui-components.es25.js";
+import S from "./ui-components.es95.js";
+import { alpha as C } from "./ui-components.es42.js";
+const L = (e) => {
   const {
-    color: o,
-    anchorOrigin: a,
-    invisible: i,
-    overlap: s,
-    variant: l,
-    classes: d = {}
-  } = t, c = {
-    root: ["root"],
-    badge: ["badge", l, i && "invisible", `anchorOrigin${n(a.vertical)}${n(a.horizontal)}`, `anchorOrigin${n(a.vertical)}${n(a.horizontal)}${n(s)}`, `overlap${n(s)}`, o !== "default" && `color${n(o)}`]
-  };
-  return ao(c, oo, d);
-}, eo = N("span", {
-  name: "MuiBadge",
-  slot: "Root"
-})({
-  position: "relative",
-  display: "inline-flex",
-  // For correct alignment with the text.
-  verticalAlign: "middle",
-  flexShrink: 0
-}), io = N("span", {
-  name: "MuiBadge",
-  slot: "Badge",
-  overridesResolver: (t, o) => {
+    absolute: t,
+    children: i,
+    classes: s,
+    flexItem: p,
+    light: n,
+    orientation: o,
+    textAlign: a,
+    variant: l
+  } = e;
+  return S({
+    root: ["root", t && "absolute", l, n && "light", o === "vertical" && "vertical", p && "flexItem", i && "withChildren", i && o === "vertical" && "withChildrenVertical", a === "right" && o !== "vertical" && "textAlignRight", a === "left" && o !== "vertical" && "textAlignLeft"],
+    wrapper: ["wrapper", o === "vertical" && "wrapperVertical"]
+  }, T, s);
+}, O = b("div", {
+  name: "MuiDivider",
+  slot: "Root",
+  overridesResolver: (e, t) => {
     const {
-      ownerState: a
-    } = t;
-    return [o.badge, o[a.variant], o[`anchorOrigin${n(a.anchorOrigin.vertical)}${n(a.anchorOrigin.horizontal)}${n(a.overlap)}`], a.color !== "default" && o[`color${n(a.color)}`], a.invisible && o.invisible];
+      ownerState: i
+    } = e;
+    return [t.root, i.absolute && t.absolute, t[i.variant], i.light && t.light, i.orientation === "vertical" && t.vertical, i.flexItem && t.flexItem, i.children && t.withChildren, i.children && i.orientation === "vertical" && t.withChildrenVertical, i.textAlign === "right" && i.orientation !== "vertical" && t.textAlignRight, i.textAlign === "left" && i.orientation !== "vertical" && t.textAlignLeft];
   }
-})(S(({
-  theme: t
+})(m(({
+  theme: e
 }) => ({
-  display: "flex",
-  flexDirection: "row",
-  flexWrap: "wrap",
-  justifyContent: "center",
-  alignContent: "center",
-  alignItems: "center",
-  position: "absolute",
-  boxSizing: "border-box",
-  fontFamily: t.typography.fontFamily,
-  fontWeight: t.typography.fontWeightMedium,
-  fontSize: t.typography.pxToRem(12),
-  minWidth: f * 2,
-  lineHeight: 1,
-  padding: "0 6px",
-  height: f * 2,
-  borderRadius: f,
-  zIndex: 1,
-  // Render the badge on top of potential ripples.
-  transition: t.transitions.create("transform", {
-    easing: t.transitions.easing.easeInOut,
-    duration: t.transitions.duration.enteringScreen
-  }),
-  variants: [...Object.entries(t.palette).filter(w(["contrastText"])).map(([o]) => ({
+  margin: 0,
+  // Reset browser default style.
+  flexShrink: 0,
+  borderWidth: 0,
+  borderStyle: "solid",
+  borderColor: (e.vars || e).palette.divider,
+  borderBottomWidth: "thin",
+  variants: [{
     props: {
-      color: o
+      absolute: !0
     },
     style: {
-      backgroundColor: (t.vars || t).palette[o].main,
-      color: (t.vars || t).palette[o].contrastText
+      position: "absolute",
+      bottom: 0,
+      left: 0,
+      width: "100%"
     }
-  })), {
+  }, {
     props: {
-      variant: "dot"
+      light: !0
     },
     style: {
-      borderRadius: m,
-      height: m * 2,
-      minWidth: m * 2,
-      padding: 0
+      borderColor: e.vars ? `rgba(${e.vars.palette.dividerChannel} / 0.08)` : C(e.palette.divider, 0.08)
     }
   }, {
-    props: ({
-      ownerState: o
-    }) => o.anchorOrigin.vertical === "top" && o.anchorOrigin.horizontal === "right" && o.overlap === "rectangular",
+    props: {
+      variant: "inset"
+    },
     style: {
-      top: 0,
-      right: 0,
-      transform: "scale(1) translate(50%, -50%)",
-      transformOrigin: "100% 0%",
-      [`&.${e.invisible}`]: {
-        transform: "scale(0) translate(50%, -50%)"
-      }
+      marginLeft: 72
     }
   }, {
-    props: ({
-      ownerState: o
-    }) => o.anchorOrigin.vertical === "bottom" && o.anchorOrigin.horizontal === "right" && o.overlap === "rectangular",
+    props: {
+      variant: "middle",
+      orientation: "horizontal"
+    },
     style: {
-      bottom: 0,
-      right: 0,
-      transform: "scale(1) translate(50%, 50%)",
-      transformOrigin: "100% 100%",
-      [`&.${e.invisible}`]: {
-        transform: "scale(0) translate(50%, 50%)"
-      }
+      marginLeft: e.spacing(2),
+      marginRight: e.spacing(2)
     }
   }, {
-    props: ({
-      ownerState: o
-    }) => o.anchorOrigin.vertical === "top" && o.anchorOrigin.horizontal === "left" && o.overlap === "rectangular",
+    props: {
+      variant: "middle",
+      orientation: "vertical"
+    },
     style: {
-      top: 0,
-      left: 0,
-      transform: "scale(1) translate(-50%, -50%)",
-      transformOrigin: "0% 0%",
-      [`&.${e.invisible}`]: {
-        transform: "scale(0) translate(-50%, -50%)"
-      }
+      marginTop: e.spacing(1),
+      marginBottom: e.spacing(1)
+    }
+  }, {
+    props: {
+      orientation: "vertical"
+    },
+    style: {
+      height: "100%",
+      borderBottomWidth: 0,
+      borderRightWidth: "thin"
+    }
+  }, {
+    props: {
+      flexItem: !0
+    },
+    style: {
+      alignSelf: "stretch",
+      height: "auto"
     }
   }, {
     props: ({
-      ownerState: o
-    }) => o.anchorOrigin.vertical === "bottom" && o.anchorOrigin.horizontal === "left" && o.overlap === "rectangular",
+      ownerState: t
+    }) => !!t.children,
     style: {
-      bottom: 0,
-      left: 0,
-      transform: "scale(1) translate(-50%, 50%)",
-      transformOrigin: "0% 100%",
-      [`&.${e.invisible}`]: {
-        transform: "scale(0) translate(-50%, 50%)"
+      display: "flex",
+      textAlign: "center",
+      border: 0,
+      borderTopStyle: "solid",
+      borderLeftStyle: "solid",
+      "&::before, &::after": {
+        content: '""',
+        alignSelf: "center"
       }
     }
   }, {
     props: ({
-      ownerState: o
-    }) => o.anchorOrigin.vertical === "top" && o.anchorOrigin.horizontal === "right" && o.overlap === "circular",
+      ownerState: t
+    }) => t.children && t.orientation !== "vertical",
     style: {
-      top: "14%",
-      right: "14%",
-      transform: "scale(1) translate(50%, -50%)",
-      transformOrigin: "100% 0%",
-      [`&.${e.invisible}`]: {
-        transform: "scale(0) translate(50%, -50%)"
+      "&::before, &::after": {
+        width: "100%",
+        borderTop: `thin solid ${(e.vars || e).palette.divider}`,
+        borderTopStyle: "inherit"
       }
     }
   }, {
     props: ({
-      ownerState: o
-    }) => o.anchorOrigin.vertical === "bottom" && o.anchorOrigin.horizontal === "right" && o.overlap === "circular",
+      ownerState: t
+    }) => t.orientation === "vertical" && t.children,
     style: {
-      bottom: "14%",
-      right: "14%",
-      transform: "scale(1) translate(50%, 50%)",
-      transformOrigin: "100% 100%",
-      [`&.${e.invisible}`]: {
-        transform: "scale(0) translate(50%, 50%)"
+      flexDirection: "column",
+      "&::before, &::after": {
+        height: "100%",
+        borderLeft: `thin solid ${(e.vars || e).palette.divider}`,
+        borderLeftStyle: "inherit"
       }
     }
   }, {
     props: ({
-      ownerState: o
-    }) => o.anchorOrigin.vertical === "top" && o.anchorOrigin.horizontal === "left" && o.overlap === "circular",
+      ownerState: t
+    }) => t.textAlign === "right" && t.orientation !== "vertical",
     style: {
-      top: "14%",
-      left: "14%",
-      transform: "scale(1) translate(-50%, -50%)",
-      transformOrigin: "0% 0%",
-      [`&.${e.invisible}`]: {
-        transform: "scale(0) translate(-50%, -50%)"
+      "&::before": {
+        width: "90%"
+      },
+      "&::after": {
+        width: "10%"
       }
     }
   }, {
     props: ({
-      ownerState: o
-    }) => o.anchorOrigin.vertical === "bottom" && o.anchorOrigin.horizontal === "left" && o.overlap === "circular",
+      ownerState: t
+    }) => t.textAlign === "left" && t.orientation !== "vertical",
     style: {
-      bottom: "14%",
-      left: "14%",
-      transform: "scale(1) translate(-50%, 50%)",
-      transformOrigin: "0% 100%",
-      [`&.${e.invisible}`]: {
-        transform: "scale(0) translate(-50%, 50%)"
+      "&::before": {
+        width: "10%"
+      },
+      "&::after": {
+        width: "90%"
       }
     }
-  }, {
+  }]
+}))), W = b("span", {
+  name: "MuiDivider",
+  slot: "Wrapper",
+  overridesResolver: (e, t) => {
+    const {
+      ownerState: i
+    } = e;
+    return [t.wrapper, i.orientation === "vertical" && t.wrapperVertical];
+  }
+})(m(({
+  theme: e
+}) => ({
+  display: "inline-block",
+  paddingLeft: `calc(${e.spacing(1)} * 1.2)`,
+  paddingRight: `calc(${e.spacing(1)} * 1.2)`,
+  whiteSpace: "nowrap",
+  variants: [{
     props: {
-      invisible: !0
+      orientation: "vertical"
     },
     style: {
-      transition: t.transitions.create("transform", {
-        easing: t.transitions.easing.easeInOut,
-        duration: t.transitions.duration.leavingScreen
-      })
+      paddingTop: `calc(${e.spacing(1)} * 1.2)`,
+      paddingBottom: `calc(${e.spacing(1)} * 1.2)`
     }
   }]
-})));
-function F(t) {
-  return {
-    vertical: t?.vertical ?? "top",
-    horizontal: t?.horizontal ?? "right"
-  };
-}
-const so = /* @__PURE__ */ Q.forwardRef(function(o, a) {
-  const i = ro({
-    props: o,
-    name: "MuiBadge"
+}))), f = /* @__PURE__ */ A.forwardRef(function(t, i) {
+  const s = D({
+    props: t,
+    name: "MuiDivider"
   }), {
-    anchorOrigin: s,
-    className: l,
-    classes: d,
-    component: c,
-    components: v = {},
-    componentsProps: b = {},
-    children: A,
-    overlap: h = "rectangular",
-    color: u = "default",
-    invisible: I = !1,
-    max: V = 99,
-    badgeContent: O,
-    slots: y,
-    slotProps: x,
-    showZero: P = !1,
-    variant: p = "standard",
-    ...W
-  } = i, {
-    badgeContent: T,
-    invisible: k,
-    max: M,
-    displayValue: U
-  } = Y({
-    max: V,
-    invisible: I,
-    badgeContent: O,
-    showZero: P
-  }), E = to({
-    anchorOrigin: F(s),
-    color: u,
-    overlap: h,
-    variant: p,
-    badgeContent: O
-  }), $ = k || T == null && p !== "dot", {
-    color: H = u,
-    overlap: _ = h,
-    anchorOrigin: Z,
-    variant: z = p
-  } = $ ? E : i, q = F(Z), R = z !== "dot" ? U : void 0, g = {
-    ...i,
-    badgeContent: T,
-    invisible: $,
-    max: M,
-    displayValue: R,
-    showZero: P,
-    anchorOrigin: q,
-    color: H,
-    overlap: _,
-    variant: z
-  }, B = no(g), j = {
-    slots: {
-      root: y?.root ?? v.Root,
-      badge: y?.badge ?? v.Badge
-    },
-    slotProps: {
-      root: x?.root ?? b.root,
-      badge: x?.badge ?? b.badge
-    }
-  }, [G, J] = C("root", {
-    elementType: eo,
-    externalForwardedProps: {
-      ...j,
-      ...W
-    },
-    ownerState: g,
-    className: X(B.root, l),
-    ref: a,
-    additionalProps: {
-      as: c
-    }
-  }), [K, L] = C("badge", {
-    elementType: io,
-    externalForwardedProps: j,
-    ownerState: g,
-    className: B.badge
-  });
-  return /* @__PURE__ */ D.jsxs(G, {
-    ...J,
-    children: [A, /* @__PURE__ */ D.jsx(K, {
-      ...L,
-      children: R
-    })]
+    absolute: p = !1,
+    children: n,
+    className: o,
+    orientation: a = "horizontal",
+    component: l = n || a === "vertical" ? "div" : "hr",
+    flexItem: g = !1,
+    light: u = !1,
+    role: c = l !== "hr" ? "separator" : void 0,
+    textAlign: x = "center",
+    variant: w = "fullWidth",
+    ...y
+  } = s, d = {
+    ...s,
+    absolute: p,
+    component: l,
+    flexItem: g,
+    light: u,
+    orientation: a,
+    role: c,
+    textAlign: x,
+    variant: w
+  }, h = L(d);
+  return /* @__PURE__ */ v.jsx(O, {
+    as: l,
+    className: R(h.root, o),
+    role: c,
+    ref: i,
+    ownerState: d,
+    "aria-orientation": c === "separator" && (l !== "hr" || a === "vertical") ? a : void 0,
+    ...y,
+    children: n ? /* @__PURE__ */ v.jsx(W, {
+      className: h.wrapper,
+      ownerState: d,
+      children: n
+    }) : null
   });
 });
-process.env.NODE_ENV !== "production" && (so.propTypes = {
+f && (f.muiSkipListHighlight = !0);
+process.env.NODE_ENV !== "production" && (f.propTypes = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐
   // │ These PropTypes are generated from the TypeScript type definitions. │
   // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
   // └─────────────────────────────────────────────────────────────────────┘
   /**
-   * The anchor of the badge.
-   * @default {
-   *   vertical: 'top',
-   *   horizontal: 'right',
-   * }
-   */
-  anchorOrigin: r.shape({
-    horizontal: r.oneOf(["left", "right"]),
-    vertical: r.oneOf(["bottom", "top"])
-  }),
-  /**
-   * The content rendered within the badge.
+   * Absolutely position the element.
+   * @default false
    */
-  badgeContent: r.node,
+  absolute: r.bool,
   /**
-   * The badge will be added relative to this node.
+   * The content of the component.
    */
   children: r.node,
   /**
@@ -329,88 +254,48 @@ process.env.NODE_ENV !== "production" && (so.propTypes = {
    * @ignore
    */
   className: r.string,
-  /**
-   * 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).
-   * @default 'default'
-   */
-  color: r.oneOfType([r.oneOf(["default", "primary", "secondary", "error", "info", "success", "warning"]), r.string]),
   /**
    * The component used for the root node.
    * Either a string to use a HTML element or a component.
    */
   component: r.elementType,
   /**
-   * 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: r.shape({
-    Badge: r.elementType,
-    Root: r.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: r.shape({
-    badge: r.oneOfType([r.func, r.object]),
-    root: r.oneOfType([r.func, r.object])
-  }),
-  /**
-   * If `true`, the badge is invisible.
+   * If `true`, a vertical divider will have the correct height when used in flex container.
+   * (By default, a vertical divider will have a calculated height of `0px` if it is the child of a flex container.)
    * @default false
    */
-  invisible: r.bool,
+  flexItem: r.bool,
   /**
-   * Max count to show.
-   * @default 99
-   */
-  max: r.number,
-  /**
-   * Wrapped shape the badge should overlap.
-   * @default 'rectangular'
-   */
-  overlap: r.oneOf(["circular", "rectangular"]),
-  /**
-   * Controls whether the badge is hidden when `badgeContent` is zero.
+   * If `true`, the divider will have a lighter color.
    * @default false
+   * @deprecated Use <Divider sx={{ opacity: 0.6 }} /> (or any opacity or color) instead. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
-  showZero: r.bool,
+  light: r.bool,
   /**
-   * The props used for each slot inside.
-   * @default {}
+   * The component orientation.
+   * @default 'horizontal'
    */
-  slotProps: r.shape({
-    badge: r.oneOfType([r.func, r.object]),
-    root: r.oneOfType([r.func, r.object])
-  }),
+  orientation: r.oneOf(["horizontal", "vertical"]),
   /**
-   * The components used for each slot inside.
-   * @default {}
+   * @ignore
    */
-  slots: r.shape({
-    badge: r.elementType,
-    root: r.elementType
-  }),
+  role: r.string,
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
   sx: r.oneOfType([r.arrayOf(r.oneOfType([r.func, r.object, r.bool])), r.func, r.object]),
+  /**
+   * The text alignment.
+   * @default 'center'
+   */
+  textAlign: r.oneOf(["center", "left", "right"]),
   /**
    * The variant to use.
-   * @default 'standard'
+   * @default 'fullWidth'
    */
-  variant: r.oneOfType([r.oneOf(["dot", "standard"]), r.string])
+  variant: r.oneOfType([r.oneOf(["fullWidth", "inset", "middle"]), r.string])
 });
 export {
-  so as default
+  f as default
 };
 //# sourceMappingURL=ui-components.es70.js.map