@notificationapi/react 0.0.37 → 1.0.1

package/dist/assets/Badge.js

@@ -0,0 +1,456 @@
+import * as x from "react";
+import { g as Y, a as w, s as M, h as t, m as rr, u as or, c as A, P as o, f as ar } from "./DefaultPropsProvider.js";
+import { c as nr } from "./createSimplePaletteValueFilter.js";
+import { jsxs as tr, jsx as er } from "react/jsx-runtime";
+import { u as F } from "./useSlotProps.js";
+const U = (a) => {
+  const r = x.useRef({});
+  return x.useEffect(() => {
+    r.current = a;
+  }), r.current;
+};
+function ir(a) {
+  const {
+    badgeContent: r,
+    invisible: n = !1,
+    max: e = 99,
+    showZero: l = !1
+  } = a, d = U({
+    badgeContent: r,
+    max: e
+  });
+  let c = n;
+  n === !1 && r === 0 && !l && (c = !0);
+  const {
+    badgeContent: i,
+    max: p = e
+  } = c ? d : a, m = i && Number(i) > p ? `${p}+` : i;
+  return {
+    badgeContent: i,
+    invisible: c,
+    max: p,
+    displayValue: m
+  };
+}
+function sr(a) {
+  return w("MuiBadge", a);
+}
+const s = Y("MuiBadge", [
+  "root",
+  "badge",
+  "dot",
+  "standard",
+  "anchorOriginTopRight",
+  "anchorOriginBottomRight",
+  "anchorOriginTopLeft",
+  "anchorOriginBottomLeft",
+  "invisible",
+  "colorError",
+  "colorInfo",
+  "colorPrimary",
+  "colorSecondary",
+  "colorSuccess",
+  "colorWarning",
+  "overlapRectangular",
+  "overlapCircular",
+  // TODO: v6 remove the overlap value from these class keys
+  "anchorOriginTopLeftCircular",
+  "anchorOriginTopLeftRectangular",
+  "anchorOriginTopRightCircular",
+  "anchorOriginTopRightRectangular",
+  "anchorOriginBottomLeftCircular",
+  "anchorOriginBottomLeftRectangular",
+  "anchorOriginBottomRightCircular",
+  "anchorOriginBottomRightRectangular"
+]), O = 10, y = 4, lr = (a) => {
+  const {
+    color: r,
+    anchorOrigin: n,
+    invisible: e,
+    overlap: l,
+    variant: d,
+    classes: c = {}
+  } = a, i = {
+    root: ["root"],
+    badge: ["badge", d, e && "invisible", `anchorOrigin${t(n.vertical)}${t(n.horizontal)}`, `anchorOrigin${t(n.vertical)}${t(n.horizontal)}${t(l)}`, `overlap${t(l)}`, r !== "default" && `color${t(r)}`]
+  };
+  return ar(i, sr, c);
+}, cr = M("span", {
+  name: "MuiBadge",
+  slot: "Root",
+  overridesResolver: (a, r) => r.root
+})({
+  position: "relative",
+  display: "inline-flex",
+  // For correct alignment with the text.
+  verticalAlign: "middle",
+  flexShrink: 0
+}), pr = M("span", {
+  name: "MuiBadge",
+  slot: "Badge",
+  overridesResolver: (a, r) => {
+    const {
+      ownerState: n
+    } = a;
+    return [r.badge, r[n.variant], r[`anchorOrigin${t(n.anchorOrigin.vertical)}${t(n.anchorOrigin.horizontal)}${t(n.overlap)}`], n.color !== "default" && r[`color${t(n.color)}`], n.invisible && r.invisible];
+  }
+})(rr(({
+  theme: a
+}) => ({
+  display: "flex",
+  flexDirection: "row",
+  flexWrap: "wrap",
+  justifyContent: "center",
+  alignContent: "center",
+  alignItems: "center",
+  position: "absolute",
+  boxSizing: "border-box",
+  fontFamily: a.typography.fontFamily,
+  fontWeight: a.typography.fontWeightMedium,
+  fontSize: a.typography.pxToRem(12),
+  minWidth: O * 2,
+  lineHeight: 1,
+  padding: "0 6px",
+  height: O * 2,
+  borderRadius: O,
+  zIndex: 1,
+  // Render the badge on top of potential ripples.
+  transition: a.transitions.create("transform", {
+    easing: a.transitions.easing.easeInOut,
+    duration: a.transitions.duration.enteringScreen
+  }),
+  variants: [...Object.entries(a.palette).filter(nr(["contrastText"])).map(([r]) => ({
+    props: {
+      color: r
+    },
+    style: {
+      backgroundColor: (a.vars || a).palette[r].main,
+      color: (a.vars || a).palette[r].contrastText
+    }
+  })), {
+    props: {
+      variant: "dot"
+    },
+    style: {
+      borderRadius: y,
+      height: y * 2,
+      minWidth: y * 2,
+      padding: 0
+    }
+  }, {
+    props: ({
+      ownerState: r
+    }) => r.anchorOrigin.vertical === "top" && r.anchorOrigin.horizontal === "right" && r.overlap === "rectangular",
+    style: {
+      top: 0,
+      right: 0,
+      transform: "scale(1) translate(50%, -50%)",
+      transformOrigin: "100% 0%",
+      [`&.${s.invisible}`]: {
+        transform: "scale(0) translate(50%, -50%)"
+      }
+    }
+  }, {
+    props: ({
+      ownerState: r
+    }) => r.anchorOrigin.vertical === "bottom" && r.anchorOrigin.horizontal === "right" && r.overlap === "rectangular",
+    style: {
+      bottom: 0,
+      right: 0,
+      transform: "scale(1) translate(50%, 50%)",
+      transformOrigin: "100% 100%",
+      [`&.${s.invisible}`]: {
+        transform: "scale(0) translate(50%, 50%)"
+      }
+    }
+  }, {
+    props: ({
+      ownerState: r
+    }) => r.anchorOrigin.vertical === "top" && r.anchorOrigin.horizontal === "left" && r.overlap === "rectangular",
+    style: {
+      top: 0,
+      left: 0,
+      transform: "scale(1) translate(-50%, -50%)",
+      transformOrigin: "0% 0%",
+      [`&.${s.invisible}`]: {
+        transform: "scale(0) translate(-50%, -50%)"
+      }
+    }
+  }, {
+    props: ({
+      ownerState: r
+    }) => r.anchorOrigin.vertical === "bottom" && r.anchorOrigin.horizontal === "left" && r.overlap === "rectangular",
+    style: {
+      bottom: 0,
+      left: 0,
+      transform: "scale(1) translate(-50%, 50%)",
+      transformOrigin: "0% 100%",
+      [`&.${s.invisible}`]: {
+        transform: "scale(0) translate(-50%, 50%)"
+      }
+    }
+  }, {
+    props: ({
+      ownerState: r
+    }) => r.anchorOrigin.vertical === "top" && r.anchorOrigin.horizontal === "right" && r.overlap === "circular",
+    style: {
+      top: "14%",
+      right: "14%",
+      transform: "scale(1) translate(50%, -50%)",
+      transformOrigin: "100% 0%",
+      [`&.${s.invisible}`]: {
+        transform: "scale(0) translate(50%, -50%)"
+      }
+    }
+  }, {
+    props: ({
+      ownerState: r
+    }) => r.anchorOrigin.vertical === "bottom" && r.anchorOrigin.horizontal === "right" && r.overlap === "circular",
+    style: {
+      bottom: "14%",
+      right: "14%",
+      transform: "scale(1) translate(50%, 50%)",
+      transformOrigin: "100% 100%",
+      [`&.${s.invisible}`]: {
+        transform: "scale(0) translate(50%, 50%)"
+      }
+    }
+  }, {
+    props: ({
+      ownerState: r
+    }) => r.anchorOrigin.vertical === "top" && r.anchorOrigin.horizontal === "left" && r.overlap === "circular",
+    style: {
+      top: "14%",
+      left: "14%",
+      transform: "scale(1) translate(-50%, -50%)",
+      transformOrigin: "0% 0%",
+      [`&.${s.invisible}`]: {
+        transform: "scale(0) translate(-50%, -50%)"
+      }
+    }
+  }, {
+    props: ({
+      ownerState: r
+    }) => r.anchorOrigin.vertical === "bottom" && r.anchorOrigin.horizontal === "left" && r.overlap === "circular",
+    style: {
+      bottom: "14%",
+      left: "14%",
+      transform: "scale(1) translate(-50%, 50%)",
+      transformOrigin: "0% 100%",
+      [`&.${s.invisible}`]: {
+        transform: "scale(0) translate(-50%, 50%)"
+      }
+    }
+  }, {
+    props: {
+      invisible: !0
+    },
+    style: {
+      transition: a.transitions.create("transform", {
+        easing: a.transitions.easing.easeInOut,
+        duration: a.transitions.duration.leavingScreen
+      })
+    }
+  }]
+})));
+function L(a) {
+  return {
+    vertical: (a == null ? void 0 : a.vertical) ?? "top",
+    horizontal: (a == null ? void 0 : a.horizontal) ?? "right"
+  };
+}
+const gr = /* @__PURE__ */ x.forwardRef(function(r, n) {
+  const e = or({
+    props: r,
+    name: "MuiBadge"
+  }), {
+    anchorOrigin: l,
+    className: d,
+    classes: c,
+    component: i,
+    components: p = {},
+    componentsProps: m = {},
+    children: V,
+    overlap: T = "rectangular",
+    color: P = "default",
+    invisible: W = !1,
+    max: k = 99,
+    badgeContent: R,
+    slots: g,
+    slotProps: f,
+    showZero: C = !1,
+    variant: h = "standard",
+    ...E
+  } = e, {
+    badgeContent: B,
+    invisible: H,
+    max: Z,
+    displayValue: _
+  } = ir({
+    max: k,
+    invisible: W,
+    badgeContent: R,
+    showZero: C
+  }), q = U({
+    anchorOrigin: L(l),
+    color: P,
+    overlap: T,
+    variant: h,
+    badgeContent: R
+  }), $ = H || B == null && h !== "dot", {
+    color: G = P,
+    overlap: J = T,
+    anchorOrigin: K,
+    variant: z = h
+  } = $ ? q : e, Q = L(K), j = z !== "dot" ? _ : void 0, b = {
+    ...e,
+    badgeContent: B,
+    invisible: $,
+    max: Z,
+    displayValue: j,
+    showZero: C,
+    anchorOrigin: Q,
+    color: G,
+    overlap: J,
+    variant: z
+  }, N = lr(b), D = (g == null ? void 0 : g.root) ?? p.Root ?? cr, I = (g == null ? void 0 : g.badge) ?? p.Badge ?? pr, u = (f == null ? void 0 : f.root) ?? m.root, v = (f == null ? void 0 : f.badge) ?? m.badge, S = F({
+    elementType: D,
+    externalSlotProps: u,
+    externalForwardedProps: E,
+    additionalProps: {
+      ref: n,
+      as: i
+    },
+    ownerState: b,
+    className: A(u == null ? void 0 : u.className, N.root, d)
+  }), X = F({
+    elementType: I,
+    externalSlotProps: v,
+    ownerState: b,
+    className: A(N.badge, v == null ? void 0 : v.className)
+  });
+  return /* @__PURE__ */ tr(D, {
+    ...S,
+    children: [V, /* @__PURE__ */ er(I, {
+      ...X,
+      children: j
+    })]
+  });
+});
+process.env.NODE_ENV !== "production" && (gr.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: o.shape({
+    horizontal: o.oneOf(["left", "right"]),
+    vertical: o.oneOf(["bottom", "top"])
+  }),
+  /**
+   * The content rendered within the badge.
+   */
+  badgeContent: o.node,
+  /**
+   * The badge will be added relative to this node.
+   */
+  children: o.node,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: o.object,
+  /**
+   * @ignore
+   */
+  className: o.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: o.oneOfType([o.oneOf(["default", "primary", "secondary", "error", "info", "success", "warning"]), o.string]),
+  /**
+   * The component used for the root node.
+   * Either a string to use a HTML element or a component.
+   */
+  component: o.elementType,
+  /**
+   * The components used for each slot inside.
+   *
+   * @deprecated use the `slots` prop instead. This prop will be removed in v7. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
+   *
+   * @default {}
+   */
+  components: o.shape({
+    Badge: 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 v7. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
+   *
+   * @default {}
+   */
+  componentsProps: o.shape({
+    badge: o.oneOfType([o.func, o.object]),
+    root: o.oneOfType([o.func, o.object])
+  }),
+  /**
+   * If `true`, the badge is invisible.
+   * @default false
+   */
+  invisible: o.bool,
+  /**
+   * Max count to show.
+   * @default 99
+   */
+  max: o.number,
+  /**
+   * Wrapped shape the badge should overlap.
+   * @default 'rectangular'
+   */
+  overlap: o.oneOf(["circular", "rectangular"]),
+  /**
+   * Controls whether the badge is hidden when `badgeContent` is zero.
+   * @default false
+   */
+  showZero: o.bool,
+  /**
+   * The props used for each slot inside the Badge.
+   * @default {}
+   */
+  slotProps: o.shape({
+    badge: o.oneOfType([o.func, o.object]),
+    root: o.oneOfType([o.func, o.object])
+  }),
+  /**
+   * The components used for each slot inside the Badge.
+   * Either a string to use a HTML element or a component.
+   * @default {}
+   */
+  slots: o.shape({
+    badge: o.elementType,
+    root: o.elementType
+  }),
+  /**
+   * 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]),
+  /**
+   * The variant to use.
+   * @default 'standard'
+   */
+  variant: o.oneOfType([o.oneOf(["dot", "standard"]), o.string])
+});
+export {
+  gr as B
+};

package/dist/assets/Box.js

@@ -0,0 +1,57 @@
+import { k as x, l as p, c as h, g as T, n as y, T as B, C as N, P as e } from "./DefaultPropsProvider.js";
+import * as C from "react";
+import { jsx as g } from "react/jsx-runtime";
+import { u as b } from "./useTheme2.js";
+import { e as v } from "./Typography.js";
+function E(n = {}) {
+  const {
+    themeId: t,
+    defaultTheme: m,
+    defaultClassName: a = "MuiBox-root",
+    generateClassName: r
+  } = n, c = x("div", {
+    shouldForwardProp: (o) => o !== "theme" && o !== "sx" && o !== "as"
+  })(p);
+  return /* @__PURE__ */ C.forwardRef(function(l, f) {
+    const s = b(m), {
+      className: d,
+      component: i = "div",
+      ...u
+    } = v(l);
+    return /* @__PURE__ */ g(c, {
+      as: i,
+      ref: f,
+      className: h(d, r ? r(a) : a),
+      theme: t && s[t] || s,
+      ...u
+    });
+  });
+}
+const O = T("MuiBox", ["root"]), P = y(), j = E({
+  themeId: B,
+  defaultTheme: P,
+  defaultClassName: O.root,
+  generateClassName: N.generate
+});
+process.env.NODE_ENV !== "production" && (j.propTypes = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * @ignore
+   */
+  children: e.node,
+  /**
+   * The component used for the root node.
+   * Either a string to use a HTML element or a component.
+   */
+  component: e.elementType,
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: e.oneOfType([e.arrayOf(e.oneOfType([e.func, e.object, e.bool])), e.func, e.object])
+});
+export {
+  j as B
+};