@weng-lab/ui-components 2.0.2 → 2.0.3

package/dist/ui-components.es70.js

@@ -1,249 +1,324 @@
-import * as A from "react";
-import r from "./ui-components.es81.js";
-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) => {
+import * as Q from "react";
+import r from "./ui-components.es80.js";
+import { clsx as X } from "./ui-components.es79.js";
+import Y from "./ui-components.es242.js";
+import S from "./ui-components.es81.js";
+import w from "./ui-components.es169.js";
+import e, { getBadgeUtilityClass as oo } from "./ui-components.es243.js";
+import C from "./ui-components.es149.js";
+import { j as D } from "./ui-components.es12.js";
+import { useDefaultProps as ro } from "./ui-components.es84.js";
+import to from "./ui-components.es244.js";
+import N from "./ui-components.es31.js";
+import n from "./ui-components.es147.js";
+import ao from "./ui-components.es85.js";
+const f = 10, m = 4, no = (t) => {
   const {
-    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) => {
+    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) => {
     const {
-      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];
+      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];
   }
-})(m(({
-  theme: e
+})(S(({
+  theme: t
 }) => ({
-  margin: 0,
-  // Reset browser default style.
-  flexShrink: 0,
-  borderWidth: 0,
-  borderStyle: "solid",
-  borderColor: (e.vars || e).palette.divider,
-  borderBottomWidth: "thin",
-  variants: [{
+  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]) => ({
     props: {
-      absolute: !0
+      color: o
     },
     style: {
-      position: "absolute",
-      bottom: 0,
-      left: 0,
-      width: "100%"
-    }
-  }, {
-    props: {
-      light: !0
-    },
-    style: {
-      borderColor: e.vars ? `rgba(${e.vars.palette.dividerChannel} / 0.08)` : C(e.palette.divider, 0.08)
+      backgroundColor: (t.vars || t).palette[o].main,
+      color: (t.vars || t).palette[o].contrastText
     }
-  }, {
+  })), {
     props: {
-      variant: "inset"
+      variant: "dot"
     },
     style: {
-      marginLeft: 72
+      borderRadius: m,
+      height: m * 2,
+      minWidth: m * 2,
+      padding: 0
     }
   }, {
-    props: {
-      variant: "middle",
-      orientation: "horizontal"
-    },
-    style: {
-      marginLeft: e.spacing(2),
-      marginRight: e.spacing(2)
-    }
-  }, {
-    props: {
-      variant: "middle",
-      orientation: "vertical"
-    },
+    props: ({
+      ownerState: o
+    }) => o.anchorOrigin.vertical === "top" && o.anchorOrigin.horizontal === "right" && o.overlap === "rectangular",
     style: {
-      marginTop: e.spacing(1),
-      marginBottom: e.spacing(1)
+      top: 0,
+      right: 0,
+      transform: "scale(1) translate(50%, -50%)",
+      transformOrigin: "100% 0%",
+      [`&.${e.invisible}`]: {
+        transform: "scale(0) translate(50%, -50%)"
+      }
     }
   }, {
-    props: {
-      orientation: "vertical"
-    },
+    props: ({
+      ownerState: o
+    }) => o.anchorOrigin.vertical === "bottom" && o.anchorOrigin.horizontal === "right" && o.overlap === "rectangular",
     style: {
-      height: "100%",
-      borderBottomWidth: 0,
-      borderRightWidth: "thin"
+      bottom: 0,
+      right: 0,
+      transform: "scale(1) translate(50%, 50%)",
+      transformOrigin: "100% 100%",
+      [`&.${e.invisible}`]: {
+        transform: "scale(0) translate(50%, 50%)"
+      }
     }
   }, {
-    props: {
-      flexItem: !0
-    },
+    props: ({
+      ownerState: o
+    }) => o.anchorOrigin.vertical === "top" && o.anchorOrigin.horizontal === "left" && o.overlap === "rectangular",
     style: {
-      alignSelf: "stretch",
-      height: "auto"
+      top: 0,
+      left: 0,
+      transform: "scale(1) translate(-50%, -50%)",
+      transformOrigin: "0% 0%",
+      [`&.${e.invisible}`]: {
+        transform: "scale(0) translate(-50%, -50%)"
+      }
     }
   }, {
     props: ({
-      ownerState: t
-    }) => !!t.children,
+      ownerState: o
+    }) => o.anchorOrigin.vertical === "bottom" && o.anchorOrigin.horizontal === "left" && o.overlap === "rectangular",
     style: {
-      display: "flex",
-      textAlign: "center",
-      border: 0,
-      borderTopStyle: "solid",
-      borderLeftStyle: "solid",
-      "&::before, &::after": {
-        content: '""',
-        alignSelf: "center"
+      bottom: 0,
+      left: 0,
+      transform: "scale(1) translate(-50%, 50%)",
+      transformOrigin: "0% 100%",
+      [`&.${e.invisible}`]: {
+        transform: "scale(0) translate(-50%, 50%)"
       }
     }
   }, {
     props: ({
-      ownerState: t
-    }) => t.children && t.orientation !== "vertical",
+      ownerState: o
+    }) => o.anchorOrigin.vertical === "top" && o.anchorOrigin.horizontal === "right" && o.overlap === "circular",
     style: {
-      "&::before, &::after": {
-        width: "100%",
-        borderTop: `thin solid ${(e.vars || e).palette.divider}`,
-        borderTopStyle: "inherit"
+      top: "14%",
+      right: "14%",
+      transform: "scale(1) translate(50%, -50%)",
+      transformOrigin: "100% 0%",
+      [`&.${e.invisible}`]: {
+        transform: "scale(0) translate(50%, -50%)"
       }
     }
   }, {
     props: ({
-      ownerState: t
-    }) => t.orientation === "vertical" && t.children,
+      ownerState: o
+    }) => o.anchorOrigin.vertical === "bottom" && o.anchorOrigin.horizontal === "right" && o.overlap === "circular",
     style: {
-      flexDirection: "column",
-      "&::before, &::after": {
-        height: "100%",
-        borderLeft: `thin solid ${(e.vars || e).palette.divider}`,
-        borderLeftStyle: "inherit"
+      bottom: "14%",
+      right: "14%",
+      transform: "scale(1) translate(50%, 50%)",
+      transformOrigin: "100% 100%",
+      [`&.${e.invisible}`]: {
+        transform: "scale(0) translate(50%, 50%)"
       }
     }
   }, {
     props: ({
-      ownerState: t
-    }) => t.textAlign === "right" && t.orientation !== "vertical",
+      ownerState: o
+    }) => o.anchorOrigin.vertical === "top" && o.anchorOrigin.horizontal === "left" && o.overlap === "circular",
     style: {
-      "&::before": {
-        width: "90%"
-      },
-      "&::after": {
-        width: "10%"
+      top: "14%",
+      left: "14%",
+      transform: "scale(1) translate(-50%, -50%)",
+      transformOrigin: "0% 0%",
+      [`&.${e.invisible}`]: {
+        transform: "scale(0) translate(-50%, -50%)"
       }
     }
   }, {
     props: ({
-      ownerState: t
-    }) => t.textAlign === "left" && t.orientation !== "vertical",
+      ownerState: o
+    }) => o.anchorOrigin.vertical === "bottom" && o.anchorOrigin.horizontal === "left" && o.overlap === "circular",
     style: {
-      "&::before": {
-        width: "10%"
-      },
-      "&::after": {
-        width: "90%"
+      bottom: "14%",
+      left: "14%",
+      transform: "scale(1) translate(-50%, 50%)",
+      transformOrigin: "0% 100%",
+      [`&.${e.invisible}`]: {
+        transform: "scale(0) translate(-50%, 50%)"
       }
     }
-  }]
-}))), 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: {
-      orientation: "vertical"
+      invisible: !0
     },
     style: {
-      paddingTop: `calc(${e.spacing(1)} * 1.2)`,
-      paddingBottom: `calc(${e.spacing(1)} * 1.2)`
+      transition: t.transitions.create("transform", {
+        easing: t.transitions.easing.easeInOut,
+        duration: t.transitions.duration.leavingScreen
+      })
     }
   }]
-}))), f = /* @__PURE__ */ A.forwardRef(function(t, i) {
-  const s = D({
-    props: t,
-    name: "MuiDivider"
+})));
+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"
   }), {
-    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
+    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
+    })]
   });
 });
-f && (f.muiSkipListHighlight = !0);
-process.env.NODE_ENV !== "production" && (f.propTypes = {
+process.env.NODE_ENV !== "production" && (so.propTypes = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐
   // │ These PropTypes are generated from the TypeScript type definitions. │
   // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
   // └─────────────────────────────────────────────────────────────────────┘
   /**
-   * Absolutely position the element.
-   * @default false
+   * 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.
    */
-  absolute: r.bool,
+  badgeContent: r.node,
   /**
-   * The content of the component.
+   * The badge will be added relative to this node.
    */
   children: r.node,
   /**
@@ -254,48 +329,88 @@ process.env.NODE_ENV !== "production" && (f.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,
   /**
-   * 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.)
+   * 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.
    * @default false
    */
-  flexItem: r.bool,
+  invisible: r.bool,
   /**
-   * If `true`, the divider will have a lighter color.
+   * 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.
    * @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.
    */
-  light: r.bool,
+  showZero: r.bool,
   /**
-   * The component orientation.
-   * @default 'horizontal'
+   * The props used for each slot inside.
+   * @default {}
    */
-  orientation: r.oneOf(["horizontal", "vertical"]),
+  slotProps: r.shape({
+    badge: r.oneOfType([r.func, r.object]),
+    root: r.oneOfType([r.func, r.object])
+  }),
   /**
-   * @ignore
+   * The components used for each slot inside.
+   * @default {}
    */
-  role: r.string,
+  slots: r.shape({
+    badge: r.elementType,
+    root: r.elementType
+  }),
   /**
    * 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 'fullWidth'
+   * @default 'standard'
    */
-  variant: r.oneOfType([r.oneOf(["fullWidth", "inset", "middle"]), r.string])
+  variant: r.oneOfType([r.oneOf(["dot", "standard"]), r.string])
 });
 export {
-  f as default
+  so as default
 };
 //# sourceMappingURL=ui-components.es70.js.map