@startdownnotez404/ui 1.0.0 → 1.3.5

package/dist/chunk-Y74ALKBL.mjs

@@ -0,0 +1,565 @@
+import {
+  default as default4
+} from "./chunk-27KYFU7R.mjs";
+import {
+  CLASSNAMEs
+} from "./chunk-CWFWRZWU.mjs";
+import {
+  MenuPopper,
+  useMenu
+} from "./chunk-HR3A4H4E.mjs";
+import {
+  Badge
+} from "./chunk-56TI2ZBT.mjs";
+import {
+  IconButton_default
+} from "./chunk-JIU5GVM7.mjs";
+import {
+  Subscript
+} from "./chunk-4RPFRNXG.mjs";
+import {
+  default as default2,
+  default2 as default3,
+  mergeSx
+} from "./chunk-S6EZVRZC.mjs";
+import {
+  __export
+} from "./chunk-FJ6ZGZIA.mjs";
+
+// src/components/elemental/Avatar/src/Avatar/Avatar.tsx
+import MuiAvatar from "@mui/material/Avatar";
+
+// 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
+import { jsx, jsxs } from "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__ */ jsxs(
+    default3,
+    {
+      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__ */ jsx(
+          AvatarSkel,
+          {
+            name,
+            src,
+            h,
+            w,
+            backgroundIcon,
+            ...rest
+          }
+        ),
+        name && displayName && /* @__PURE__ */ jsx(NameSkel, { name, direction, fontSize })
+      ]
+    }
+  );
+}
+function AvatarSkel(props) {
+  const { name, src, h, w, backgroundIcon, ...rest } = props;
+  if (!name && !src) return /* @__PURE__ */ jsx(default4, { variant: "circular", width: w, height: h });
+  if (backgroundIcon) return /* @__PURE__ */ jsx(default3, { 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__ */ jsx(NameAvatar, { name, src, h, w, ...rest });
+}
+function NameSkel(props) {
+  const { name, direction, fontSize } = props;
+  if (!name) return /* @__PURE__ */ jsx(default4, { variant: "text", width: 40, height: 20 });
+  const fs = typeof fontSize === "number" ? `${fontSize}px` : fontSize;
+  return /* @__PURE__ */ 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__ */ jsx(
+    MuiAvatar,
+    {
+      ...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/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
+import { jsx as jsx2, jsxs as jsxs2 } from "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__ */ jsxs2(
+    default2,
+    {
+      className: CLASSNAMEs.elemental.avatar.button,
+      sx: mergeSx(avatarButtonRootSx, {
+        display: "flex",
+        flexDirection: pos[namePosition]?.dir,
+        alignItems: "center",
+        gap: pos[namePosition]?.gap
+      }),
+      children: [
+        /* @__PURE__ */ jsx2(
+          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__ */ jsxs2(default2, { 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__ */ jsx2(ImageBackdrop, {}),
+              /* @__PURE__ */ jsx2(HoverIcon, { icon }),
+              /* @__PURE__ */ jsx2(
+                Avatar,
+                {
+                  name,
+                  src,
+                  backgroundIcon,
+                  displayName: false,
+                  dim: {
+                    width: _dim.w,
+                    height: _dim.h
+                  }
+                }
+              )
+            ] })
+          }
+        ),
+        showName && /* @__PURE__ */ jsx2(NameSkel, { name, direction: pos[namePosition].direction, fontSize })
+      ]
+    }
+  );
+}
+function HoverIcon({ icon }) {
+  return /* @__PURE__ */ jsx2(
+    default2,
+    {
+      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__ */ jsx2(default2, { sx: {
+        width: "100%",
+        height: "100%",
+        display: "none",
+        justifyContent: "center",
+        alignItems: "center",
+        color: "var(--avatar-hover-icon-color)"
+      }, children: icon })
+    }
+  );
+}
+function ImageBackdrop() {
+  return /* @__PURE__ */ jsx2(
+    default2,
+    {
+      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
+});
+import { styled } from "@mui/material/styles";
+
+// 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
+import { Fragment, jsx as jsx3, jsxs as jsxs3 } from "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__ */ jsxs3(Fragment, { children: [
+    /* @__PURE__ */ jsx3(
+      StyledBadge,
+      {
+        status: status2,
+        overlap: "circular",
+        anchorOrigin: {
+          vertical: "bottom",
+          horizontal: "right"
+        },
+        variant: "dot",
+        sx: mergeSx(statusAvatarRootSx, {
+          height: "fit-content"
+        }),
+        children: statusEditable ? /* @__PURE__ */ jsx3(AvatarButton, { name, src, ...slotProps?.avatarButton, onClick: p.onTriggerClickHandler }) : /* @__PURE__ */ jsx3(Avatar, { name, src, ...slotProps?.avatar, displayName: false })
+      }
+    ),
+    /* @__PURE__ */ jsx3(
+      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 = 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
+      }
+    }
+  ]
+}));
+
+export {
+  AVATARBUTTON_STANDARD_DIMENSIONs,
+  AVATAR_SIZEs,
+  AVATAR_SX,
+  Avatar,
+  NameSkel,
+  avatarTheme,
+  avatarButtonRootSx,
+  AvatarButton,
+  StatusAvatar_exports
+};
+//# sourceMappingURL=chunk-Y74ALKBL.mjs.map

package/dist/chunk-Y74ALKBL.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/elemental/Avatar/src/Avatar/Avatar.tsx","../src/components/elemental/Avatar/src/_utils/_const.ts","../src/components/elemental/Avatar/src/Avatar/themes.ts","../src/components/elemental/Avatar/src/Avatar/AvatarButton.tsx","../src/components/elemental/Avatar/src/StatusAvatar/StatusAvatar.tsx","../src/components/elemental/Avatar/src/StatusAvatar/theme.ts"],"sourcesContent":["import MuiAvatar, {type AvatarProps} from '@mui/material/Avatar'\nimport { CLASSNAMEs } from '@/_utils/_const/classNames';\nimport { Stack } from '@/ele/Box'\nimport { Skeleton } from '@/ele/Skeleton'\n\nimport { Subscript } from '@/ele/Typography'\n\nimport { AVATAR_SIZEs, AVATAR_SX, type Size } from '../_utils'\n\ninterface MuiAvatarProps {\n    name?: string;\n    src?: string;\n    size?: Size;\n    fontSize?: string | number;\n    displayName?: boolean;\n    direction?: 'column' | 'row';\n    dim?: {\n        width?: string | number;\n        height?: string | number;\n    };\n    backgroundIcon?: React.ReactNode;\n}\n\n/**\n * A styled Mui Avatar component\n * \n * [Doc](https://mui.com/material-ui/api/avatar/)\n */\nexport default function Avatar(props: MuiAvatarProps) {\n    const {\n        name,\n        src,\n        size=\"md\", // sm, md, lg\n        fontSize, \n        displayName=true, \n        direction=\"column\",\n        dim={},\n        backgroundIcon,\n        ...rest\n    } = props\n\n    const h = dim.height || AVATAR_SIZEs[size]\n    const w = dim.width || AVATAR_SIZEs[size]\n\n    return (\n        <Stack\n            className={CLASSNAMEs.elemental.avatar.root}\n            style={{\n            '--AVATAR_SX': direction,\n            '--gap': AVATAR_SX[direction]?.stackSX[size]?.gap,\n        } as React.CSSProperties}\n        sx={() => ({\n            direction:\"var(--AVATAR_SX)\",\n            gap: `calc(var(--gap) * 8px)`,\n            justifyContent: \"center\",\n            overflow: \"hidden\",\n        })} \n        alignItems=\"center\" direction={direction}>\n            <AvatarSkel \n                name={name} \n                src={src} \n                h={h} \n                w={w} \n                backgroundIcon={backgroundIcon} \n                {...rest}\n            />\n            {name && displayName && <NameSkel name={name} direction={direction} fontSize={fontSize}/>}\n        </Stack>\n    )\n}\n\ninterface AvatarSkelProps extends Omit<AvatarProps, \"children\"> {\n    name?: string;\n    src?: string;\n    h: string | number;\n    w: string | number;\n    backgroundIcon?: React.ReactNode;\n}\n\nfunction AvatarSkel(props: AvatarSkelProps) {\n    const { name, src, h, w, backgroundIcon, ...rest } = props\n    if(!name && !src) return <Skeleton variant=\"circular\" width={w} height={h} />\n    if(backgroundIcon) return (<Stack sx={{\n        position: 'relative', width: w, height: h,\n        alignItems: 'center', justifyContent: 'center',\n        \"&>svg\":{\n            height: w, width: h,\n            padding: '0.25em',\n            borderRadius: '50%',\n        },\n    }}>{backgroundIcon}</Stack>)\n    return (<NameAvatar name={name} src={src} h={h} w={w} {...rest}/>)\n}\n\ninterface NameSkelProps {\n    name?: string;\n    direction: 'column' | 'row';\n    fontSize?: string | number;\n}\n\n/**\n * A Mui Skeleton component which used as a placeholder for loading image\n * \n * [Doc](https://mui.com/material-ui/api/skeleton/)\n */\nexport function NameSkel(props: NameSkelProps) {\n    const { name, direction, fontSize } = props\n    if(!name) return <Skeleton variant=\"text\" width={40} height={20} />\n\n    const fs = typeof fontSize === 'number' ? `${fontSize}px` : fontSize\n    return <Subscript fontSize={fs || AVATAR_SX[direction]?.fontSize} lineHeight=\"1.2\" \n        style={{\n            \"--fs-n\": fontSize || AVATAR_SX[direction]?.fontSize,\n            \"--lh-n\": \"1.2\",\n        } as React.CSSProperties}\n        sx={{\n            \"&.MuiTypography-root\":{\n                whiteSpace:\"nowrap\",\n                fontSize: \"var(--fs-n)\",\n                lineHeight: \"var(--lh-n)\",\n                WebkitLineClamp: \"3\",\n                WebkitBoxOrient: \"vertical\",\n                maxWidth: '-webkit-fill-available',\n                lineBreak: 'anywhere',\n            },\n        }}>{name}</Subscript>\n\n}\n\ninterface NameAvatarProps extends Omit<AvatarProps, \"children\"> {\n    name?: string;\n    src?: string;\n    h: string | number;\n    w: string | number;\n}\n\nfunction NameAvatar(props: NameAvatarProps) {\n    const { name, src, h, w, ...rest } = props\n    return (\n    <MuiAvatar \n        {...stringAvatar(name,src)} \n        {...rest} \n        \n        style={{\n            '--w': typeof w === 'number' ? `${w}px` : w,\n            '--h': typeof h === 'number' ? `${h}px` : h,\n            '--fs': \"calc(var(--w) / 2)\", // half of the height, so it will be fit in the circle\n        } as React.CSSProperties} \n        sx={{\n            \"&.MuiAvatar-root\":{\n                fontSize: \"var(--fs)\",\n                color: 'var(--avatar-color)',\n                backgroundColor: 'transparent',\n                width: 'var(--w)',\n                height: 'var(--h)',\n            },\n        }}\n    />)\n}\nfunction stringAvatar(name?:string,src?:string){\n    if(src) return {src}\n    if(!name) return { children: '' }\n\n    const splitName = name.split(' ')\n    const first = splitName[0] || ''\n    const second = splitName[1] || ''\n    const str = `${first[0] || ''}${second[0] || ''}`\n\n    return {\n        children: str,\n    }\n}","import type { Size } from '../_utils'\n\nexport const AVATARBUTTON_STANDARD_DIMENSIONs = {\n  xs:\"36px\",\n  sm: \"100px\",\n  md: \"120px\",\n  lg: \"200px\",\n  xl: \"240px\",\n} as const satisfies Record<Size, string>;\n\nexport const AVATAR_SIZEs = {\n  xs: \"20px\",\n  sm: \"24px\",\n  md: \"40px\",\n  lg: \"56px\",\n  xl: \"80px\",\n} as const satisfies Record<Size, string>;\n\nexport const AVATAR_SX = {\n    column:{\n        stackSX:{\n            xs: {gap: 0.5},\n            sm: {gap: 0.5},\n            md: {gap: 0.75},\n            lg: {gap: 1},\n            xl: {gap: 1},\n        },\n        fontSize: \"0.6rem\",\n    },\n    row:{\n        stackSX:{\n            xs: {gap: 0.75},\n            sm: {gap: 0.75},\n            md: {gap: 1},\n            lg: {gap: 1.5},\n            xl: {gap: 2},\n        },\n        fontSize: \"0.8rem\",\n    }\n} as const satisfies {\n    [key in 'column' | 'row']: {\n        stackSX: Record<Size, {gap:number}>,\n        fontSize: string,\n    }\n};","import type { MuiComponentTheme } from '@/_utils/_types'\nimport type { SxProps, Theme } from '@mui/material/styles'\n\nexport const avatarTheme = {\n  styleOverrides: {\n    root: {\n      '--avatar-bg': 'var(--mui-palette-action-selected)',\n      '--avatar-color': 'var(--mui-palette-text-primary)',\n      backgroundColor: 'var(--avatar-bg)',\n      color: 'var(--avatar-color)',\n    },\n  },\n} as const satisfies MuiComponentTheme<'MuiAvatar'>\n\n/** Static palette aliases for AvatarButton root element */\nexport const avatarButtonRootSx: SxProps<Theme> = {\n  '--avatar-button-text':       'var(--mui-palette-text-primary)',\n  '--avatar-hover-icon-color':  'var(--mui-palette-text-subscript)',\n} as const satisfies SxProps<Theme>\n","import React from 'react'\nimport { IconButton } from '@/ele/Button'\nimport { Box } from '@/ele/Box'\n\nimport Avatar, { NameSkel } from './Avatar'\nimport { CLASSNAMEs } from '@/_utils/_const/classNames';\nimport { Size, AVATARBUTTON_STANDARD_DIMENSIONs } from '../_utils'\nimport { avatarButtonRootSx } from './themes'\nimport { mergeSx } from '@/_utils/_func'\n\nconst pos = {\n    top: {dir:\"column-reverse\",gap:0.5,direction:\"column\"},\n    bottom: {dir:\"column\",gap:0.5,direction:\"column\"},\n    left: {dir:\"row-reverse\",gap:1,direction:\"row\"},\n    right: {dir:\"row\",gap:1,direction:\"row\"},\n} as const\n\ninterface AvatarButtonProps {\n    onClick?: React.ComponentProps<typeof IconButton>['onClick'];\n    size?: Size;\n    disabled?: boolean;\n    dim?: React.ComponentProps<typeof Avatar>['dim'];\n\n    backgroundUrl?: string;\n    backgroundIcon?: React.ReactNode;\n    icon?: React.ReactNode;\n    fontSize?: string | number;\n\n    name?: string; \n    src?: string;\n    showName?: boolean;\n    namePosition?: keyof typeof pos;\n    hasBorder?: boolean;\n    'aria-label'?: string;\n}\n\n/**\n * A clickable Mui Avatar component\n * \n * use button to wrap an Avatar component\n * \n * logic:\n *  use backgroundIcon if any\n *  then use backgroundUrl if any\n *  then name if any\n */\nexport default function AvatarButton(props: AvatarButtonProps) {\n    const {\n        onClick,\n        size=\"md\",\n        disabled=false,\n        dim,\n\n        backgroundUrl=\"transparent\",\n        icon=null,\n        fontSize,\n\n        name=\"\", \n        src=\"\",\n        showName=false, \n        namePosition=\"bottom\",// namePosition: top, bottom, left, right\n        \n        backgroundIcon,\n        hasBorder=true,\n        'aria-label': ariaLabel,\n    } = props\n\n    const _dim = {\n      w: dim?.width ?? AVATARBUTTON_STANDARD_DIMENSIONs[size],\n      h: dim?.height ?? AVATARBUTTON_STANDARD_DIMENSIONs[size],\n    }\n\n    return (\n        <Box\n            className={CLASSNAMEs.elemental.avatar.button}\n            sx={mergeSx(avatarButtonRootSx, {\n            display:\"flex\",\n            flexDirection:pos[namePosition]?.dir,\n            alignItems:\"center\",\n            gap:pos[namePosition]?.gap,\n        })}>\n            <IconButton\n                onClick={onClick}\n                disabled={disabled}\n                disableRipple\n                aria-label={ariaLabel}\n                style={{\n                    '--bg': backgroundUrl,\n                    '--bg-size': _dim.w,\n                    '--size': _dim.w,\n                    '--shadow': hasBorder ? 'var(--mui-palette-shadow-border-1)' : 'none',\n                } as React.CSSProperties}\n                sx={{\n                    '&.MuiButtonBase-root':{\n                        border:\"none\",\n                        position: 'relative',\n                        color:\"var(--avatar-button-text)\",\n                        background:\"var(--bg)\",\n                        backgroundSize:'var(--bg-size)',\n                        width:'var(--size)',\n                        height:'var(--size)',\n                        // allow overlay banner to fit the button\n                        padding: 0,\n                \n                        // shadow\n                        boxShadow: \"var(--shadow)\",\n                        borderRadius:\"50%\",\n                \n                        // hover effect\n                        '&:hover, &.Mui-focusVisible': {\n                            zIndex: 1,\n                            '& .MuiImageBackdrop-root': {\n                                opacity: 0.5,\n                            },\n                            '& .MuiImageMarked-root': {\n                                opacity: 0,\n                            },\n                            '& .MuiTypography-root': {\n                                border: '4px solid currentColor',\n                            },\n                        },\n                    },\n                }} \n            >\n                <Box sx={{\n                    width:\"100%\",\n                    position:\"absolute\",\n                    top:0,\n                    left:0,\n                    right:0,\n                    bottom:0,\n                    zIndex:1,\n                    \"&>.MuiStack-root\":{\n                        width:\"100%\",\n                        height:\"100%\",\n                        maxWidth:\"100%\",\n                        maxHeight:\"100%\",\n                    },\n                }}>\n                    <ImageBackdrop/>\n                    <HoverIcon icon={icon} />\n                    <Avatar\n                        name={name} src={src} backgroundIcon={backgroundIcon}\n                        displayName={false}\n                        dim={{\n                            width:_dim.w,\n                            height:_dim.h,\n                        }}\n                    />\n                </Box>\n            </IconButton>\n            {showName && <NameSkel name={name} direction={pos[namePosition].direction} fontSize={fontSize}/>}\n        </Box>\n\n    )\n}\n\nfunction HoverIcon({ icon }: { icon: React.ReactNode }) {\n    return (\n    <Box className=\"HoverIcon-root\"\n    sx={{\n        position:\"absolute\",\n        top:0,\n        left:0,\n        right:0,\n        bottom:0,\n        zIndex:2,\n        \"&>*\":{display:\"none\"},\n        \"&:hover>*\":{display:\"flex\"},\n        borderRadius:\"50%\",\n    }}>\n        <Box sx={{\n          width:\"100%\",\n          height:\"100%\",\n          display:\"none\",\n          justifyContent:\"center\",\n          alignItems:\"center\",  \n          color:\"var(--avatar-hover-icon-color)\",\n        }}>\n            {icon}\n        </Box>\n    </Box>\n    )\n}\n\nfunction ImageBackdrop() {\n    return (\n    <Box component=\"span\"\n    className=\"MuiImageBackdrop-root\"\n    sx={{\n        zIndex: 2,\n        position: 'absolute',\n        left: 0,\n        right: 0,\n        top: 0,\n        bottom: 0,\n        backgroundColor: \"#000\", // photo overlay — CSS variable tokens cannot reliably target this layer\n        opacity: 0,\n        transition: \"opacity 0.3s\",\n        borderRadius:\"50%\",\n    }}/>\n    )\n}","'use client'\nimport { styled } from '@mui/material/styles'\nimport { Badge } from '@/ele/Badge'\n\nimport { useMenu, MenuPopper } from '@/ele/Menu'\n\nimport { Avatar, AvatarButton } from '../Avatar'\nimport { statusAvatarRootSx } from './theme'\nimport { mergeSx } from '@/_utils/_func'\n\n// all the status that can be changed except offline\nconst USER_STATUSs = {\n  online: 'online',\n  away: 'away',\n  busy: 'busy',\n  offline: 'offline',\n  invisible: 'invisible',\n} as const\nconst changable_status = Object.values(USER_STATUSs).filter(s=>s!=='offline')\ntype UserStatusTypes = typeof USER_STATUSs[keyof typeof USER_STATUSs]\n\n/**\n * StatusAvatar\n * @description: avatar of the participant with status\n * @param status - status of the participant\n * @param src - src of the avatar\n * @param name - name of the participant\n * \n * user status will be shown as a dot on the avatar\n */\nexport function Renderer(props:{\n  status:UserStatusTypes;\n  statusEditable?:boolean;\n  handleStatusChange?:((status:UserStatusTypes)=>void);\n  name:string;\n  src?:string;\n\n  slotProps?:{\n    badge?:React.ComponentProps<typeof Badge>;\n    avatar?:Partial<React.ComponentProps<typeof Avatar>>;\n    avatarButton?:Partial<React.ComponentProps<typeof AvatarButton>>;\n  };\n}){\n  const {\n    name, src,\n    status, handleStatusChange,\n    statusEditable,\n    slotProps,\n  } = props\n\n  const p = useMenu({\n    multiple: false,\n    initSelected: [status],\n  })\n  return (\n    <>\n    <StyledBadge \n\n      status={status}\n      overlap=\"circular\"\n      anchorOrigin={{\n        vertical: 'bottom',\n        horizontal: 'right',\n      }}\n      variant=\"dot\"\n\n      sx={mergeSx(statusAvatarRootSx, {\n        height:\"fit-content\",\n      })}\n    >\n      {statusEditable\n        ?<AvatarButton name={name} src={src} {...slotProps?.avatarButton} onClick={p.onTriggerClickHandler}/>\n        :<Avatar name={name} src={src} {...slotProps?.avatar} displayName={false}/>\n      }\n    </StyledBadge>\n    <MenuPopper\n      openMenuProps={p}\n      options={changable_status.map((s)=>({\n        id: s,\n        label: s,\n        onClick:()=>{\n          p.closeHandler()\n          if(handleStatusChange) handleStatusChange(s)\n        },\n      }))}\n    />\n    </>\n  )\n}\nexport const status = USER_STATUSs\nexport type Status = UserStatusTypes\n\n/**\n * StyledBadge\n * @description: styled badge for the avatar\n * @param status - status of the participant\n * \n * use css variables to set the color and animation of the badge\n */\nconst StyledBadge = styled(Badge,{\n  shouldForwardProp: p=> p!==\"status\"\n})<{status:UserStatusTypes}>(() => ({\n  '& .MuiBadge-badge': {\n    width:\"15%\",\n    height:\"15%\",\n    minWidth: '10px',\n    minHeight: '10px',\n    borderRadius: '50%',\n    borderColor:\"transparent\",\n    backgroundColor: 'var(--color)',\n    color: 'var(--color)',\n    boxShadow: `0 0 0 2px var(--status-badge-shadow)`,\n    display:\"var(--display)\",\n    '&::after': {\n      position: 'absolute',\n      top: 0,\n      left: 0,\n      width: '100%',\n      height: '100%',\n      borderRadius: '50%',\n      animation: 'var(--animate)',\n      border: '1px solid currentColor',\n      content: '\"\"',\n    },\n  },\n  '@keyframes ripple': {\n    '0%': {\n      transform: 'scale(.8)',\n      opacity: 1,\n    },\n    '100%': {\n      transform: 'scale(2.4)',\n      opacity: 0,\n    },\n  },\n\n  variants:[\n    {\n      props: {status:USER_STATUSs.online},\n      style: {\n        '--color': 'var(--status-color-online)',\n        '--animate': 'ripple 1.2s infinite ease-in-out', // ripple animation\n        '--display': 'block', // show the dot\n      },\n    },\n    {\n      props: {status:USER_STATUSs.away},\n      style: {\n        '--color': 'var(--status-color-away)',\n        '--animate': 'none', // no animation\n        '--display': 'block', // show the dot\n      },\n    },\n    {\n      props: {status:USER_STATUSs.busy},\n      style: {\n        '--color': 'var(--status-color-busy)',\n        '--animate': 'none', // no animation\n        '--display': 'block', // show the dot\n      },\n    },\n    {\n      props: {status:USER_STATUSs.offline,},\n      style: {\n        '--color': 'var(--status-color-offline)',\n        '--animate': 'none', // no animation\n        '--display': 'block', // show the dot\n      },\n    },\n    {\n      props: {status:USER_STATUSs.invisible,},\n      style: {\n        '--color': 'var(--status-color-offline)',\n        '--animate': 'none', // no animation\n        '--display': 'block', // show the dot\n      },\n    },\n  ]\n}))\n","import type { SxProps, Theme } from '@mui/material/styles'\n\nexport const statusAvatarRootSx: SxProps<Theme> = {\n\t'--status-badge-shadow': 'var(--mui-palette-background-default)',\n\t'--status-color-online': 'var(--mui-palette-success-main)',\n\t'--status-color-away': 'var(--mui-palette-warning-main)',\n\t'--status-color-busy': 'var(--mui-palette-error-main)',\n\t'--status-color-offline': 'var(--mui-palette-grey-500)',\n}\n"],"mappings":"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","names":["default","jsx","jsxs","default","jsx","jsxs","status"]}