@startdownnotez404/ui 1.0.0 → 1.3.5

package/dist/avatar.js

@@ -0,0 +1,992 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/elemental/Avatar/index.ts
+var Avatar_exports = {};
+__export(Avatar_exports, {
+  AVATARBUTTON_STANDARD_DIMENSIONs: () => AVATARBUTTON_STANDARD_DIMENSIONs,
+  AVATAR_SIZEs: () => AVATAR_SIZEs,
+  AVATAR_SX: () => AVATAR_SX,
+  Avatar: () => Avatar,
+  AvatarButton: () => AvatarButton,
+  NameSkel: () => NameSkel,
+  StatusAvatar: () => StatusAvatar_exports,
+  avatarButtonRootSx: () => avatarButtonRootSx,
+  avatarTheme: () => avatarTheme
+});
+module.exports = __toCommonJS(Avatar_exports);
+
+// src/components/elemental/Avatar/src/Avatar/Avatar.tsx
+var import_Avatar = __toESM(require("@mui/material/Avatar"));
+
+// src/_utils/_const/classNames.ts
+var CLASSNAMEs = {
+  elemental: {
+    avatar: {
+      // root wrapper for the Avatar component
+      root: "Elemental-Avatar",
+      // button variant used by AvatarButton and related controls
+      button: "Elemental-AvatarButton"
+    },
+    modal: "Elemental-Modal"
+  },
+  compound: {
+    useForm: {
+      // class applied to the wrapper around the avatar field inside UseForm
+      avatarField: "UseForm-AvatarField"
+    }
+  }
+};
+
+// src/_utils/_func/sx.ts
+function flattenSx(part) {
+  if (part == null || typeof part === "boolean") {
+    return [];
+  }
+  if (Array.isArray(part)) {
+    return part.flatMap(flattenSx);
+  }
+  if (typeof part === "function" || typeof part === "object") {
+    return [part];
+  }
+  return [];
+}
+function mergeSx(...parts) {
+  const list = parts.flatMap(flattenSx);
+  if (list.length === 0) {
+    return void 0;
+  }
+  if (list.length === 1) {
+    return list[0];
+  }
+  return list;
+}
+
+// src/components/elemental/Box/src/index.ts
+var import_Box = __toESM(require("@mui/material/Box"));
+var import_Stack = __toESM(require("@mui/material/Stack"));
+var import_Grid = __toESM(require("@mui/material/Grid"));
+
+// src/components/elemental/Skeleton/MuiSkeleton/index.ts
+var import_Skeleton = __toESM(require("@mui/material/Skeleton"));
+
+// src/components/elemental/Typography/src/Variants.tsx
+var import_Typography = __toESM(require("@mui/material/Typography"));
+var import_jsx_runtime = require("react/jsx-runtime");
+function Subscript(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_Typography.default,
+    {
+      variant: "caption",
+      ...props,
+      sx: {
+        ...props.sx,
+        color: props.color ?? "var(--mui-palette-text-subscript)"
+      }
+    }
+  );
+}
+
+// src/components/elemental/Avatar/src/_utils/_const.ts
+var AVATARBUTTON_STANDARD_DIMENSIONs = {
+  xs: "36px",
+  sm: "100px",
+  md: "120px",
+  lg: "200px",
+  xl: "240px"
+};
+var AVATAR_SIZEs = {
+  xs: "20px",
+  sm: "24px",
+  md: "40px",
+  lg: "56px",
+  xl: "80px"
+};
+var AVATAR_SX = {
+  column: {
+    stackSX: {
+      xs: { gap: 0.5 },
+      sm: { gap: 0.5 },
+      md: { gap: 0.75 },
+      lg: { gap: 1 },
+      xl: { gap: 1 }
+    },
+    fontSize: "0.6rem"
+  },
+  row: {
+    stackSX: {
+      xs: { gap: 0.75 },
+      sm: { gap: 0.75 },
+      md: { gap: 1 },
+      lg: { gap: 1.5 },
+      xl: { gap: 2 }
+    },
+    fontSize: "0.8rem"
+  }
+};
+
+// src/components/elemental/Avatar/src/Avatar/Avatar.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function Avatar(props) {
+  const {
+    name,
+    src,
+    size = "md",
+    // sm, md, lg
+    fontSize,
+    displayName = true,
+    direction = "column",
+    dim = {},
+    backgroundIcon,
+    ...rest
+  } = props;
+  const h = dim.height || AVATAR_SIZEs[size];
+  const w = dim.width || AVATAR_SIZEs[size];
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    import_Stack.default,
+    {
+      className: CLASSNAMEs.elemental.avatar.root,
+      style: {
+        "--AVATAR_SX": direction,
+        "--gap": AVATAR_SX[direction]?.stackSX[size]?.gap
+      },
+      sx: () => ({
+        direction: "var(--AVATAR_SX)",
+        gap: `calc(var(--gap) * 8px)`,
+        justifyContent: "center",
+        overflow: "hidden"
+      }),
+      alignItems: "center",
+      direction,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          AvatarSkel,
+          {
+            name,
+            src,
+            h,
+            w,
+            backgroundIcon,
+            ...rest
+          }
+        ),
+        name && displayName && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(NameSkel, { name, direction, fontSize })
+      ]
+    }
+  );
+}
+function AvatarSkel(props) {
+  const { name, src, h, w, backgroundIcon, ...rest } = props;
+  if (!name && !src) return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_Skeleton.default, { variant: "circular", width: w, height: h });
+  if (backgroundIcon) return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_Stack.default, { sx: {
+    position: "relative",
+    width: w,
+    height: h,
+    alignItems: "center",
+    justifyContent: "center",
+    "&>svg": {
+      height: w,
+      width: h,
+      padding: "0.25em",
+      borderRadius: "50%"
+    }
+  }, children: backgroundIcon });
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(NameAvatar, { name, src, h, w, ...rest });
+}
+function NameSkel(props) {
+  const { name, direction, fontSize } = props;
+  if (!name) return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_Skeleton.default, { variant: "text", width: 40, height: 20 });
+  const fs = typeof fontSize === "number" ? `${fontSize}px` : fontSize;
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    Subscript,
+    {
+      fontSize: fs || AVATAR_SX[direction]?.fontSize,
+      lineHeight: "1.2",
+      style: {
+        "--fs-n": fontSize || AVATAR_SX[direction]?.fontSize,
+        "--lh-n": "1.2"
+      },
+      sx: {
+        "&.MuiTypography-root": {
+          whiteSpace: "nowrap",
+          fontSize: "var(--fs-n)",
+          lineHeight: "var(--lh-n)",
+          WebkitLineClamp: "3",
+          WebkitBoxOrient: "vertical",
+          maxWidth: "-webkit-fill-available",
+          lineBreak: "anywhere"
+        }
+      },
+      children: name
+    }
+  );
+}
+function NameAvatar(props) {
+  const { name, src, h, w, ...rest } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    import_Avatar.default,
+    {
+      ...stringAvatar(name, src),
+      ...rest,
+      style: {
+        "--w": typeof w === "number" ? `${w}px` : w,
+        "--h": typeof h === "number" ? `${h}px` : h,
+        "--fs": "calc(var(--w) / 2)"
+        // half of the height, so it will be fit in the circle
+      },
+      sx: {
+        "&.MuiAvatar-root": {
+          fontSize: "var(--fs)",
+          color: "var(--avatar-color)",
+          backgroundColor: "transparent",
+          width: "var(--w)",
+          height: "var(--h)"
+        }
+      }
+    }
+  );
+}
+function stringAvatar(name, src) {
+  if (src) return { src };
+  if (!name) return { children: "" };
+  const splitName = name.split(" ");
+  const first = splitName[0] || "";
+  const second = splitName[1] || "";
+  const str = `${first[0] || ""}${second[0] || ""}`;
+  return {
+    children: str
+  };
+}
+
+// src/components/elemental/Button/src/IconButton/IconButton.tsx
+var import_react = require("react");
+var import_IconButton = __toESM(require("@mui/material/IconButton"));
+
+// src/components/elemental/Tooltip/src/Tooltip/index.ts
+var import_Tooltip = __toESM(require("@mui/material/Tooltip"));
+
+// src/components/elemental/Button/src/IconButton/IconButton.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var IconButton = (0, import_react.forwardRef)(({
+  title = "",
+  children,
+  color,
+  size,
+  slotProps,
+  selected,
+  className,
+  ...props
+}, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    import_Tooltip.default,
+    {
+      title,
+      slotProps: {
+        popper: {
+          sx: {
+            textTransform: "capitalize"
+          }
+        },
+        ...slotProps?.tooltip
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_Box.default, { component: "span", sx: { width: "fit-content" }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        import_IconButton.default,
+        {
+          ref,
+          color,
+          size,
+          className: [className, selected ? "Mui-selected" : ""].filter(Boolean).join(" "),
+          ...props,
+          children
+        }
+      ) })
+    }
+  );
+});
+var IconButton_default = IconButton;
+
+// src/components/elemental/Avatar/src/Avatar/themes.ts
+var avatarTheme = {
+  styleOverrides: {
+    root: {
+      "--avatar-bg": "var(--mui-palette-action-selected)",
+      "--avatar-color": "var(--mui-palette-text-primary)",
+      backgroundColor: "var(--avatar-bg)",
+      color: "var(--avatar-color)"
+    }
+  }
+};
+var avatarButtonRootSx = {
+  "--avatar-button-text": "var(--mui-palette-text-primary)",
+  "--avatar-hover-icon-color": "var(--mui-palette-text-subscript)"
+};
+
+// src/components/elemental/Avatar/src/Avatar/AvatarButton.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var pos = {
+  top: { dir: "column-reverse", gap: 0.5, direction: "column" },
+  bottom: { dir: "column", gap: 0.5, direction: "column" },
+  left: { dir: "row-reverse", gap: 1, direction: "row" },
+  right: { dir: "row", gap: 1, direction: "row" }
+};
+function AvatarButton(props) {
+  const {
+    onClick,
+    size = "md",
+    disabled = false,
+    dim,
+    backgroundUrl = "transparent",
+    icon = null,
+    fontSize,
+    name = "",
+    src = "",
+    showName = false,
+    namePosition = "bottom",
+    // namePosition: top, bottom, left, right
+    backgroundIcon,
+    hasBorder = true,
+    "aria-label": ariaLabel
+  } = props;
+  const _dim = {
+    w: dim?.width ?? AVATARBUTTON_STANDARD_DIMENSIONs[size],
+    h: dim?.height ?? AVATARBUTTON_STANDARD_DIMENSIONs[size]
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+    import_Box.default,
+    {
+      className: CLASSNAMEs.elemental.avatar.button,
+      sx: mergeSx(avatarButtonRootSx, {
+        display: "flex",
+        flexDirection: pos[namePosition]?.dir,
+        alignItems: "center",
+        gap: pos[namePosition]?.gap
+      }),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          IconButton_default,
+          {
+            onClick,
+            disabled,
+            disableRipple: true,
+            "aria-label": ariaLabel,
+            style: {
+              "--bg": backgroundUrl,
+              "--bg-size": _dim.w,
+              "--size": _dim.w,
+              "--shadow": hasBorder ? "var(--mui-palette-shadow-border-1)" : "none"
+            },
+            sx: {
+              "&.MuiButtonBase-root": {
+                border: "none",
+                position: "relative",
+                color: "var(--avatar-button-text)",
+                background: "var(--bg)",
+                backgroundSize: "var(--bg-size)",
+                width: "var(--size)",
+                height: "var(--size)",
+                // allow overlay banner to fit the button
+                padding: 0,
+                // shadow
+                boxShadow: "var(--shadow)",
+                borderRadius: "50%",
+                // hover effect
+                "&:hover, &.Mui-focusVisible": {
+                  zIndex: 1,
+                  "& .MuiImageBackdrop-root": {
+                    opacity: 0.5
+                  },
+                  "& .MuiImageMarked-root": {
+                    opacity: 0
+                  },
+                  "& .MuiTypography-root": {
+                    border: "4px solid currentColor"
+                  }
+                }
+              }
+            },
+            children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_Box.default, { sx: {
+              width: "100%",
+              position: "absolute",
+              top: 0,
+              left: 0,
+              right: 0,
+              bottom: 0,
+              zIndex: 1,
+              "&>.MuiStack-root": {
+                width: "100%",
+                height: "100%",
+                maxWidth: "100%",
+                maxHeight: "100%"
+              }
+            }, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ImageBackdrop, {}),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(HoverIcon, { icon }),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                Avatar,
+                {
+                  name,
+                  src,
+                  backgroundIcon,
+                  displayName: false,
+                  dim: {
+                    width: _dim.w,
+                    height: _dim.h
+                  }
+                }
+              )
+            ] })
+          }
+        ),
+        showName && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(NameSkel, { name, direction: pos[namePosition].direction, fontSize })
+      ]
+    }
+  );
+}
+function HoverIcon({ icon }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    import_Box.default,
+    {
+      className: "HoverIcon-root",
+      sx: {
+        position: "absolute",
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        zIndex: 2,
+        "&>*": { display: "none" },
+        "&:hover>*": { display: "flex" },
+        borderRadius: "50%"
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_Box.default, { sx: {
+        width: "100%",
+        height: "100%",
+        display: "none",
+        justifyContent: "center",
+        alignItems: "center",
+        color: "var(--avatar-hover-icon-color)"
+      }, children: icon })
+    }
+  );
+}
+function ImageBackdrop() {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    import_Box.default,
+    {
+      component: "span",
+      className: "MuiImageBackdrop-root",
+      sx: {
+        zIndex: 2,
+        position: "absolute",
+        left: 0,
+        right: 0,
+        top: 0,
+        bottom: 0,
+        backgroundColor: "#000",
+        // photo overlay — CSS variable tokens cannot reliably target this layer
+        opacity: 0,
+        transition: "opacity 0.3s",
+        borderRadius: "50%"
+      }
+    }
+  );
+}
+
+// src/components/elemental/Avatar/src/StatusAvatar/StatusAvatar.tsx
+var StatusAvatar_exports = {};
+__export(StatusAvatar_exports, {
+  Renderer: () => Renderer,
+  status: () => status
+});
+var import_styles3 = require("@mui/material/styles");
+
+// src/components/elemental/Badge/src/Badge/Badge.tsx
+var import_Badge = __toESM(require("@mui/material/Badge"));
+var import_jsx_runtime5 = require("react/jsx-runtime");
+function Badge(p) {
+  const { style_variant, variant, className, ...rest } = p;
+  const badge_var_class = style_variant === "outlined" ? "badge-outlined" : style_variant === "filled" ? "badge-filled" : "badge-outlined";
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_Badge.default, { ...rest, variant, className: badge_var_class + (className ? ` ${className}` : "") });
+}
+
+// src/components/elemental/Menu/src/Menu/Menu.tsx
+var import_react2 = require("react");
+var import_MenuList = __toESM(require("@mui/material/MenuList"));
+var import_ListItemText = __toESM(require("@mui/material/ListItemText"));
+var import_styles2 = require("@mui/material/styles");
+
+// src/components/elemental/Menu/src/MenuItem.tsx
+var import_MenuItem = __toESM(require("@mui/material/MenuItem"));
+var import_ListItemIcon = __toESM(require("@mui/material/ListItemIcon"));
+var import_styles = require("@mui/material/styles");
+var StyledMenuItem = (0, import_styles.styled)(import_MenuItem.default, {
+  shouldForwardProp: (prop) => prop !== "customPadding" && prop !== "customFontSize"
+})(({ customPadding, customFontSize }) => ({
+  width: "-webkit-fill-available",
+  borderRadius: "8px",
+  minHeight: "fit-content",
+  padding: customPadding || "6px 16px",
+  margin: "0",
+  overflow: "hidden",
+  gap: "4px",
+  "& .MuiListItemText-primary": {
+    fontSize: customFontSize || "1rem",
+    overflow: "hidden",
+    textOverflow: "ellipsis"
+  }
+}));
+var StyledItemIcon = (0, import_styles.styled)(import_ListItemIcon.default, {
+  shouldForwardProp: (prop) => prop !== "isIconOnly"
+})({
+  "&.MuiListItemIcon-root": {
+    minWidth: "var(--minW)"
+  },
+  variants: [
+    {
+      props: { isIconOnly: true },
+      style: {
+        "--minW": "0"
+      }
+    },
+    {
+      props: { isIconOnly: false },
+      style: {
+        "--minW": "auto"
+      }
+    },
+    {
+      props: { isIconOnly: void 0 },
+      // default
+      style: {
+        "--minW": "auto"
+      }
+    }
+  ]
+});
+
+// src/components/elemental/Menu/src/Menu/Menu.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var CustomMenuList = (0, import_react2.forwardRef)(({
+  options = [],
+  extraItemClickHandler,
+  menuItemProps,
+  initSelected = [],
+  multiple = false,
+  autoFocusItem,
+  menuRef,
+  isIconOnly = false,
+  optionHeader,
+  sorted = true
+}, ref) => {
+  const [localSelected, setLocalSelected] = (0, import_react2.useState)(initSelected);
+  (0, import_react2.useImperativeHandle)(ref, () => ({
+    getSelectedItem: () => localSelected
+  }), [localSelected]);
+  (0, import_react2.useEffect)(() => {
+    setLocalSelected(initSelected);
+  }, [initSelected]);
+  const sortedOptions = (0, import_react2.useMemo)(() => {
+    if (!sorted) return options;
+    return [...options].sort((a, b) => {
+      if (a.label && b.label) {
+        return a.label.toString().localeCompare(b.label.toString());
+      }
+      return 0;
+    });
+  }, [sorted, options]);
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+    StyledMenuList,
+    {
+      ref: menuRef,
+      autoFocusItem,
+      fontSize: menuItemProps?.fontSize,
+      padding: menuItemProps?.padding,
+      children: [
+        optionHeader,
+        sortedOptions.map((o, i) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+          StyledMenuItem,
+          {
+            selected: localSelected.includes(o.id),
+            customPadding: menuItemProps?.padding,
+            customFontSize: menuItemProps?.fontSize,
+            onClick: (e) => {
+              if (extraItemClickHandler) extraItemClickHandler(e);
+              if (multiple) setLocalSelected((old) => {
+                if (old.includes(o.id)) return old.filter((id) => id !== o.id);
+                return [...old, o.id];
+              });
+              o.onClick?.();
+            },
+            children: [
+              o.icon && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(StyledItemIcon, { isIconOnly, children: o.icon }),
+              o.label && !isIconOnly && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_ListItemText.default, { children: o.label }),
+              o.extension
+            ]
+          },
+          i
+        ))
+      ]
+    }
+  );
+});
+var Menu_default = CustomMenuList;
+var StyledMenuList = (0, import_styles2.styled)(import_MenuList.default, {
+  shouldForwardProp: (prop) => prop !== "fontSize" && prop !== "padding"
+})((p) => createMenuListTheme(p));
+function createMenuListTheme(p) {
+  return {
+    "&.MuiList-root": {
+      padding: "8px 4px",
+      display: "flex",
+      flexDirection: "column",
+      alignContent: "center",
+      alignItems: "center",
+      width: "100%",
+      gap: "2px",
+      "& li": {
+        width: "-webkit-fill-available",
+        borderRadius: "8px",
+        minHeight: "fit-content",
+        padding: p.padding || "6px 16px",
+        margin: "0",
+        overflow: "hidden",
+        "& .MuiListItemText-primary": {
+          fontSize: p.fontSize || "1rem",
+          overflow: "hidden",
+          textOverflow: "ellipsis"
+        }
+      }
+    }
+  };
+}
+
+// src/components/elemental/Menu/src/Menu/index.ts
+var import_MenuItem3 = __toESM(require("@mui/material/MenuItem"));
+
+// src/components/elemental/Overlay/src/index.ts
+var import_ClickAwayListener = __toESM(require("@mui/material/ClickAwayListener"));
+var import_Popper = __toESM(require("@mui/material/Popper"));
+
+// src/components/elemental/Paper/src/Paper/Paper.tsx
+var import_Paper = __toESM(require("@mui/material/Paper"));
+var import_jsx_runtime7 = require("react/jsx-runtime");
+function MuiPaper(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_Paper.default, { ...props });
+}
+
+// src/components/elemental/Menu/src/useMenu/useMenu.tsx
+var import_react3 = require("react");
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var MenuPopper = ({
+  placement = "bottom-start",
+  options = [],
+  openMenuProps,
+  menuItemProps,
+  optionHeader
+}) => {
+  const {
+    closeHandler,
+    anchorEl,
+    onItemClickClientArg,
+    multiple,
+    ref,
+    menuRef,
+    initSelected,
+    sorted = true
+  } = openMenuProps;
+  const open = Boolean(anchorEl);
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    import_Popper.default,
+    {
+      open,
+      anchorEl,
+      placement,
+      sx: { zIndex: "1301" },
+      modifiers: [{
+        name: "offset",
+        options: { offset: [0, 8] }
+      }],
+      children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        MuiPaper,
+        {
+          variant: "outlined",
+          sx: {
+            "&.MuiPaper-root": {
+              pr: 1,
+              minWidth: 150,
+              maxHeight: 300,
+              borderRadius: "16px",
+              overflow: "hidden",
+              display: "flex",
+              flexDirection: "column",
+              "& .MuiList-root": {
+                display: "flex",
+                flexDirection: "column",
+                alignContent: "center",
+                alignItems: "center",
+                width: "100%",
+                overflowY: "auto",
+                height: "100%"
+              },
+              "& li": {
+                width: "100%"
+              }
+            }
+          },
+          children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_ClickAwayListener.default, { onClickAway: closeHandler, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            Menu_default,
+            {
+              ref,
+              menuRef,
+              autoFocusItem: open,
+              menuItemProps,
+              optionHeader,
+              options,
+              multiple,
+              initSelected,
+              extraItemClickHandler: (e) => {
+                if (onItemClickClientArg) onItemClickClientArg({ event: e, closeHandler });
+              },
+              sorted
+            }
+          ) })
+        }
+      )
+    }
+  );
+};
+function useMenu({
+  onItemClickClientArg,
+  multiple = false,
+  initSelected = [],
+  setSelected
+}) {
+  const [anchorEl, setAnchorEl] = (0, import_react3.useState)(null);
+  const [anchorPosition, setAnchorPosition] = (0, import_react3.useState)({ top: 0, left: 0 });
+  const ref = (0, import_react3.useRef)(null);
+  const menuRef = (0, import_react3.useRef)(null);
+  const closeHandler = (event) => {
+    if (event && menuRef.current && event.target instanceof Node && menuRef.current.contains(event.target)) {
+      return;
+    }
+    if (setSelected && multiple) {
+      const localSelected = ref.current?.getSelectedItem();
+      if (localSelected && Array.isArray(localSelected)) {
+        setSelected(localSelected);
+      }
+    }
+    setAnchorEl(null);
+  };
+  const onTriggerClickHandler = (event) => {
+    const bottom = event.clientY;
+    const right = event.clientX;
+    setAnchorEl(event.currentTarget);
+    setAnchorPosition({ top: bottom, left: right });
+  };
+  return {
+    anchorEl,
+    anchorPosition,
+    onTriggerClickHandler,
+    onItemClickClientArg,
+    closeHandler,
+    multiple,
+    ref,
+    initSelected,
+    menuRef
+  };
+}
+
+// src/components/elemental/Avatar/src/StatusAvatar/theme.ts
+var statusAvatarRootSx = {
+  "--status-badge-shadow": "var(--mui-palette-background-default)",
+  "--status-color-online": "var(--mui-palette-success-main)",
+  "--status-color-away": "var(--mui-palette-warning-main)",
+  "--status-color-busy": "var(--mui-palette-error-main)",
+  "--status-color-offline": "var(--mui-palette-grey-500)"
+};
+
+// src/components/elemental/Avatar/src/StatusAvatar/StatusAvatar.tsx
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var USER_STATUSs = {
+  online: "online",
+  away: "away",
+  busy: "busy",
+  offline: "offline",
+  invisible: "invisible"
+};
+var changable_status = Object.values(USER_STATUSs).filter((s) => s !== "offline");
+function Renderer(props) {
+  const {
+    name,
+    src,
+    status: status2,
+    handleStatusChange,
+    statusEditable,
+    slotProps
+  } = props;
+  const p = useMenu({
+    multiple: false,
+    initSelected: [status2]
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      StyledBadge,
+      {
+        status: status2,
+        overlap: "circular",
+        anchorOrigin: {
+          vertical: "bottom",
+          horizontal: "right"
+        },
+        variant: "dot",
+        sx: mergeSx(statusAvatarRootSx, {
+          height: "fit-content"
+        }),
+        children: statusEditable ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(AvatarButton, { name, src, ...slotProps?.avatarButton, onClick: p.onTriggerClickHandler }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Avatar, { name, src, ...slotProps?.avatar, displayName: false })
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      MenuPopper,
+      {
+        openMenuProps: p,
+        options: changable_status.map((s) => ({
+          id: s,
+          label: s,
+          onClick: () => {
+            p.closeHandler();
+            if (handleStatusChange) handleStatusChange(s);
+          }
+        }))
+      }
+    )
+  ] });
+}
+var status = USER_STATUSs;
+var StyledBadge = (0, import_styles3.styled)(Badge, {
+  shouldForwardProp: (p) => p !== "status"
+})(() => ({
+  "& .MuiBadge-badge": {
+    width: "15%",
+    height: "15%",
+    minWidth: "10px",
+    minHeight: "10px",
+    borderRadius: "50%",
+    borderColor: "transparent",
+    backgroundColor: "var(--color)",
+    color: "var(--color)",
+    boxShadow: `0 0 0 2px var(--status-badge-shadow)`,
+    display: "var(--display)",
+    "&::after": {
+      position: "absolute",
+      top: 0,
+      left: 0,
+      width: "100%",
+      height: "100%",
+      borderRadius: "50%",
+      animation: "var(--animate)",
+      border: "1px solid currentColor",
+      content: '""'
+    }
+  },
+  "@keyframes ripple": {
+    "0%": {
+      transform: "scale(.8)",
+      opacity: 1
+    },
+    "100%": {
+      transform: "scale(2.4)",
+      opacity: 0
+    }
+  },
+  variants: [
+    {
+      props: { status: USER_STATUSs.online },
+      style: {
+        "--color": "var(--status-color-online)",
+        "--animate": "ripple 1.2s infinite ease-in-out",
+        // ripple animation
+        "--display": "block"
+        // show the dot
+      }
+    },
+    {
+      props: { status: USER_STATUSs.away },
+      style: {
+        "--color": "var(--status-color-away)",
+        "--animate": "none",
+        // no animation
+        "--display": "block"
+        // show the dot
+      }
+    },
+    {
+      props: { status: USER_STATUSs.busy },
+      style: {
+        "--color": "var(--status-color-busy)",
+        "--animate": "none",
+        // no animation
+        "--display": "block"
+        // show the dot
+      }
+    },
+    {
+      props: { status: USER_STATUSs.offline },
+      style: {
+        "--color": "var(--status-color-offline)",
+        "--animate": "none",
+        // no animation
+        "--display": "block"
+        // show the dot
+      }
+    },
+    {
+      props: { status: USER_STATUSs.invisible },
+      style: {
+        "--color": "var(--status-color-offline)",
+        "--animate": "none",
+        // no animation
+        "--display": "block"
+        // show the dot
+      }
+    }
+  ]
+}));
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  AVATARBUTTON_STANDARD_DIMENSIONs,
+  AVATAR_SIZEs,
+  AVATAR_SX,
+  Avatar,
+  AvatarButton,
+  NameSkel,
+  StatusAvatar,
+  avatarButtonRootSx,
+  avatarTheme
+});
+//# sourceMappingURL=avatar.js.map