@mekari/pixel3-avatar 0.0.0

package/dist/metafile-esm.json

@@ -0,0 +1 @@
+{"inputs":{"src/avatar-excess.tsx":{"bytes":424,"imports":[{"path":"vue","kind":"import-statement","external":true},{"path":"vue","kind":"import-statement","external":true}],"format":"esm"},"src/avatar-fallback.tsx":{"bytes":974,"imports":[{"path":"vue","kind":"import-statement","external":true},{"path":"vue","kind":"import-statement","external":true}],"format":"esm"},"src/modules/avatar.props.ts":{"bytes":1862,"imports":[{"path":"vue","kind":"import-statement","external":true},{"path":"@mekari/pixel3-utils","kind":"import-statement","external":true},{"path":"./avatar.types","kind":"import-statement","external":true}],"format":"esm"},"src/modules/avatar.machines.ts":{"bytes":1580,"imports":[{"path":"xstate","kind":"import-statement","external":true},{"path":"./avatar.types","kind":"import-statement","external":true},{"path":"<runtime>","kind":"import-statement","external":true}],"format":"esm"},"src/modules/avatar.utils.ts":{"bytes":627,"imports":[{"path":"<runtime>","kind":"import-statement","external":true}],"format":"esm"},"src/modules/avatar.connects.ts":{"bytes":3024,"imports":[{"path":"vue","kind":"import-statement","external":true},{"path":"@mekari/pixel3-styled-system/tokens","kind":"import-statement","external":true},{"path":"src/modules/avatar.utils.ts","kind":"import-statement","original":"./avatar.utils"},{"path":"./avatar.types","kind":"import-statement","external":true},{"path":"<runtime>","kind":"import-statement","external":true}],"format":"esm"},"src/modules/avatar.hooks.ts":{"bytes":1599,"imports":[{"path":"vue","kind":"import-statement","external":true},{"path":"@xstate/vue","kind":"import-statement","external":true},{"path":"@mekari/pixel3-utils","kind":"import-statement","external":true},{"path":"@mekari/pixel3-styled-system/recipes","kind":"import-statement","external":true},{"path":"src/modules/avatar.machines.ts","kind":"import-statement","original":"./avatar.machines"},{"path":"src/modules/avatar.connects.ts","kind":"import-statement","original":"./avatar.connects"},{"path":"./avatar.types","kind":"import-statement","external":true},{"path":"<runtime>","kind":"import-statement","external":true}],"format":"esm"},"src/avatar-group.tsx":{"bytes":1488,"imports":[{"path":"vue","kind":"import-statement","external":true},{"path":"vue","kind":"import-statement","external":true},{"path":"@mekari/pixel3-utils","kind":"import-statement","external":true},{"path":"src/modules/avatar.props.ts","kind":"import-statement","original":"./modules/avatar.props"},{"path":"src/modules/avatar.hooks.ts","kind":"import-statement","original":"./modules/avatar.hooks"},{"path":"src/avatar-excess.tsx","kind":"import-statement","original":"./avatar-excess"}],"format":"esm"},"src/avatar-image.tsx":{"bytes":383,"imports":[{"path":"vue","kind":"import-statement","external":true},{"path":"vue","kind":"import-statement","external":true}],"format":"esm"},"src/avatar.tsx":{"bytes":1179,"imports":[{"path":"vue","kind":"import-statement","external":true},{"path":"vue","kind":"import-statement","external":true},{"path":"src/modules/avatar.props.ts","kind":"import-statement","original":"./modules/avatar.props"},{"path":"src/modules/avatar.hooks.ts","kind":"import-statement","original":"./modules/avatar.hooks"},{"path":"src/modules/avatar.utils.ts","kind":"import-statement","original":"./modules/avatar.utils"},{"path":"@mekari/pixel3-icon","kind":"import-statement","external":true},{"path":"src/avatar-fallback.tsx","kind":"import-statement","original":"./avatar-fallback"},{"path":"src/avatar-image.tsx","kind":"import-statement","original":"./avatar-image"}],"format":"esm"},"src/index.ts":{"bytes":359,"imports":[{"path":"src/avatar.tsx","kind":"import-statement","original":"./avatar"},{"path":"src/avatar-group.tsx","kind":"import-statement","original":"./avatar-group"}],"format":"esm"},"src/modules/avatar.types.ts":{"bytes":1788,"imports":[{"path":"@mekari/pixel3-utils","kind":"import-statement","external":true}],"format":"esm"}},"outputs":{"dist/modules/avatar.machines.mjs":{"imports":[{"path":"dist/chunk-U4MXRXR7.mjs","kind":"import-statement"},{"path":"dist/chunk-QZ7VFGWC.mjs","kind":"import-statement"}],"exports":["avatarGroupMachine","avatarMachine"],"entryPoint":"src/modules/avatar.machines.ts","inputs":{},"bytes":161},"dist/modules/avatar.props.mjs":{"imports":[{"path":"dist/chunk-ITYXDMOF.mjs","kind":"import-statement"},{"path":"dist/chunk-QZ7VFGWC.mjs","kind":"import-statement"}],"exports":["avatarEmits","avatarGroupEmits","avatarGroupProps","avatarProps"],"entryPoint":"src/modules/avatar.props.ts","inputs":{},"bytes":223},"dist/modules/avatar.types.mjs":{"imports":[],"exports":[],"entryPoint":"src/modules/avatar.types.ts","inputs":{"src/modules/avatar.types.ts":{"bytesInOutput":0}},"bytes":0},"dist/modules/avatar.utils.mjs":{"imports":[{"path":"dist/chunk-ZK47OSEJ.mjs","kind":"import-statement"},{"path":"dist/chunk-QZ7VFGWC.mjs","kind":"import-statement"}],"exports":["getColor","getInitial","isColorInList"],"entryPoint":"src/modules/avatar.utils.ts","inputs":{},"bytes":169},"dist/avatar-excess.mjs":{"imports":[{"path":"dist/chunk-CY2Z6I23.mjs","kind":"import-statement"},{"path":"dist/chunk-QZ7VFGWC.mjs","kind":"import-statement"}],"exports":["MpAvatarExcess"],"entryPoint":"src/avatar-excess.tsx","inputs":{},"bytes":117},"dist/avatar-fallback.mjs":{"imports":[{"path":"dist/chunk-NKXS73IR.mjs","kind":"import-statement"},{"path":"dist/chunk-QZ7VFGWC.mjs","kind":"import-statement"}],"exports":["MpAvatarFallback"],"entryPoint":"src/avatar-fallback.tsx","inputs":{},"bytes":121},"dist/avatar-group.mjs":{"imports":[{"path":"dist/chunk-RTYPPBOR.mjs","kind":"import-statement"},{"path":"dist/chunk-CY2Z6I23.mjs","kind":"import-statement"},{"path":"dist/chunk-ITYXDMOF.mjs","kind":"import-statement"},{"path":"dist/chunk-JVROEGO3.mjs","kind":"import-statement"},{"path":"dist/chunk-U4MXRXR7.mjs","kind":"import-statement"},{"path":"dist/chunk-ZMUFXMG4.mjs","kind":"import-statement"},{"path":"dist/chunk-ZK47OSEJ.mjs","kind":"import-statement"},{"path":"dist/chunk-QZ7VFGWC.mjs","kind":"import-statement"}],"exports":["MpAvatarGroup"],"entryPoint":"src/avatar-group.tsx","inputs":{},"bytes":301},"dist/avatar-image.mjs":{"imports":[{"path":"dist/chunk-4VNSI4PL.mjs","kind":"import-statement"},{"path":"dist/chunk-QZ7VFGWC.mjs","kind":"import-statement"}],"exports":["MpAvatarImage"],"entryPoint":"src/avatar-image.tsx","inputs":{},"bytes":115},"dist/avatar.mjs":{"imports":[{"path":"dist/chunk-43VB6T4V.mjs","kind":"import-statement"},{"path":"dist/chunk-NKXS73IR.mjs","kind":"import-statement"},{"path":"dist/chunk-ITYXDMOF.mjs","kind":"import-statement"},{"path":"dist/chunk-4VNSI4PL.mjs","kind":"import-statement"},{"path":"dist/chunk-JVROEGO3.mjs","kind":"import-statement"},{"path":"dist/chunk-U4MXRXR7.mjs","kind":"import-statement"},{"path":"dist/chunk-ZMUFXMG4.mjs","kind":"import-statement"},{"path":"dist/chunk-ZK47OSEJ.mjs","kind":"import-statement"},{"path":"dist/chunk-QZ7VFGWC.mjs","kind":"import-statement"}],"exports":["MpAvatar"],"entryPoint":"src/avatar.tsx","inputs":{},"bytes":322},"dist/index.mjs":{"imports":[{"path":"dist/chunk-RTYPPBOR.mjs","kind":"import-statement"},{"path":"dist/chunk-CY2Z6I23.mjs","kind":"import-statement"},{"path":"dist/chunk-43VB6T4V.mjs","kind":"import-statement"},{"path":"dist/chunk-NKXS73IR.mjs","kind":"import-statement"},{"path":"dist/chunk-ITYXDMOF.mjs","kind":"import-statement"},{"path":"dist/chunk-4VNSI4PL.mjs","kind":"import-statement"},{"path":"dist/chunk-JVROEGO3.mjs","kind":"import-statement"},{"path":"dist/chunk-U4MXRXR7.mjs","kind":"import-statement"},{"path":"dist/chunk-ZMUFXMG4.mjs","kind":"import-statement"},{"path":"dist/chunk-ZK47OSEJ.mjs","kind":"import-statement"},{"path":"dist/chunk-QZ7VFGWC.mjs","kind":"import-statement"}],"exports":["MpAvatar","MpAvatarGroup"],"entryPoint":"src/index.ts","inputs":{"src/index.ts":{"bytesInOutput":0}},"bytes":426},"dist/chunk-RTYPPBOR.mjs":{"imports":[{"path":"dist/chunk-CY2Z6I23.mjs","kind":"import-statement"},{"path":"dist/chunk-ITYXDMOF.mjs","kind":"import-statement"},{"path":"dist/chunk-JVROEGO3.mjs","kind":"import-statement"},{"path":"vue","kind":"import-statement","external":true},{"path":"vue","kind":"import-statement","external":true},{"path":"@mekari/pixel3-utils","kind":"import-statement","external":true}],"exports":["MpAvatarGroup"],"inputs":{"src/avatar-group.tsx":{"bytesInOutput":1137}},"bytes":1384},"dist/chunk-CY2Z6I23.mjs":{"imports":[{"path":"vue","kind":"import-statement","external":true},{"path":"vue","kind":"import-statement","external":true}],"exports":["MpAvatarExcess"],"inputs":{"src/avatar-excess.tsx":{"bytesInOutput":331}},"bytes":386},"dist/chunk-43VB6T4V.mjs":{"imports":[{"path":"dist/chunk-NKXS73IR.mjs","kind":"import-statement"},{"path":"dist/chunk-ITYXDMOF.mjs","kind":"import-statement"},{"path":"dist/chunk-4VNSI4PL.mjs","kind":"import-statement"},{"path":"dist/chunk-JVROEGO3.mjs","kind":"import-statement"},{"path":"dist/chunk-ZK47OSEJ.mjs","kind":"import-statement"},{"path":"vue","kind":"import-statement","external":true},{"path":"vue","kind":"import-statement","external":true},{"path":"@mekari/pixel3-icon","kind":"import-statement","external":true}],"exports":["MpAvatar"],"inputs":{"src/avatar.tsx":{"bytesInOutput":718}},"bytes":1050},"dist/chunk-NKXS73IR.mjs":{"imports":[{"path":"vue","kind":"import-statement","external":true},{"path":"vue","kind":"import-statement","external":true}],"exports":["MpAvatarFallback"],"inputs":{"src/avatar-fallback.tsx":{"bytesInOutput":811}},"bytes":870},"dist/chunk-ITYXDMOF.mjs":{"imports":[{"path":"@mekari/pixel3-utils","kind":"import-statement","external":true}],"exports":["avatarEmits","avatarGroupEmits","avatarGroupProps","avatarProps"],"inputs":{"src/modules/avatar.props.ts":{"bytesInOutput":924}},"bytes":1037},"dist/chunk-4VNSI4PL.mjs":{"imports":[{"path":"vue","kind":"import-statement","external":true},{"path":"vue","kind":"import-statement","external":true}],"exports":["MpAvatarImage"],"inputs":{"src/avatar-image.tsx":{"bytesInOutput":223}},"bytes":276},"dist/modules/avatar.connects.mjs":{"imports":[{"path":"dist/chunk-ZMUFXMG4.mjs","kind":"import-statement"},{"path":"dist/chunk-ZK47OSEJ.mjs","kind":"import-statement"},{"path":"dist/chunk-QZ7VFGWC.mjs","kind":"import-statement"}],"exports":["avatarConnect","avatarGroupConnect"],"entryPoint":"src/modules/avatar.connects.ts","inputs":{},"bytes":193},"dist/modules/avatar.hooks.mjs":{"imports":[{"path":"dist/chunk-JVROEGO3.mjs","kind":"import-statement"},{"path":"dist/chunk-U4MXRXR7.mjs","kind":"import-statement"},{"path":"dist/chunk-ZMUFXMG4.mjs","kind":"import-statement"},{"path":"dist/chunk-ZK47OSEJ.mjs","kind":"import-statement"},{"path":"dist/chunk-QZ7VFGWC.mjs","kind":"import-statement"}],"exports":["useAvatar","useAvatarGroup"],"entryPoint":"src/modules/avatar.hooks.ts","inputs":{},"bytes":241},"dist/chunk-JVROEGO3.mjs":{"imports":[{"path":"dist/chunk-U4MXRXR7.mjs","kind":"import-statement"},{"path":"dist/chunk-ZMUFXMG4.mjs","kind":"import-statement"},{"path":"dist/chunk-QZ7VFGWC.mjs","kind":"import-statement"},{"path":"vue","kind":"import-statement","external":true},{"path":"@xstate/vue","kind":"import-statement","external":true},{"path":"@mekari/pixel3-utils","kind":"import-statement","external":true},{"path":"@mekari/pixel3-styled-system/recipes","kind":"import-statement","external":true}],"exports":["useAvatar","useAvatarGroup"],"inputs":{"src/modules/avatar.hooks.ts":{"bytesInOutput":1289}},"bytes":1569},"dist/chunk-U4MXRXR7.mjs":{"imports":[{"path":"dist/chunk-QZ7VFGWC.mjs","kind":"import-statement"},{"path":"xstate","kind":"import-statement","external":true}],"exports":["avatarGroupMachine","avatarMachine"],"inputs":{"src/modules/avatar.machines.ts":{"bytesInOutput":1398}},"bytes":1533},"dist/chunk-ZMUFXMG4.mjs":{"imports":[{"path":"dist/chunk-ZK47OSEJ.mjs","kind":"import-statement"},{"path":"dist/chunk-QZ7VFGWC.mjs","kind":"import-statement"},{"path":"vue","kind":"import-statement","external":true},{"path":"@mekari/pixel3-styled-system/tokens","kind":"import-statement","external":true}],"exports":["avatarConnect","avatarGroupConnect"],"inputs":{"src/modules/avatar.connects.ts":{"bytesInOutput":2773}},"bytes":2976},"dist/chunk-ZK47OSEJ.mjs":{"imports":[{"path":"dist/chunk-QZ7VFGWC.mjs","kind":"import-statement"}],"exports":["getColor","getInitial","isColorInList"],"inputs":{"src/modules/avatar.utils.ts":{"bytesInOutput":589}},"bytes":725},"dist/chunk-QZ7VFGWC.mjs":{"imports":[],"exports":["__name"],"inputs":{},"bytes":151}}}

package/dist/modules/avatar.connects.d.mts

@@ -0,0 +1,11 @@
+import { AvatarState, AvatarSend, AvatarClasses, AvatarApiMachine, AvatarGroupState, AvatarGroupApiMachine } from './avatar.types.mjs';
+import '@mekari/pixel3-utils';
+
+/**
+ * Exported avatar connects.
+ */
+
+declare function avatarConnect(state: AvatarState, send: AvatarSend, classes: AvatarClasses): AvatarApiMachine;
+declare function avatarGroupConnect(state: AvatarGroupState, send: AvatarSend, classes: AvatarClasses): AvatarGroupApiMachine;
+
+export { avatarConnect, avatarGroupConnect };

package/dist/modules/avatar.connects.d.ts

@@ -0,0 +1,11 @@
+import { AvatarState, AvatarSend, AvatarClasses, AvatarApiMachine, AvatarGroupState, AvatarGroupApiMachine } from './avatar.types.js';
+import '@mekari/pixel3-utils';
+
+/**
+ * Exported avatar connects.
+ */
+
+declare function avatarConnect(state: AvatarState, send: AvatarSend, classes: AvatarClasses): AvatarApiMachine;
+declare function avatarGroupConnect(state: AvatarGroupState, send: AvatarSend, classes: AvatarClasses): AvatarGroupApiMachine;
+
+export { avatarConnect, avatarGroupConnect };

package/dist/modules/avatar.connects.js

@@ -0,0 +1,148 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/modules/avatar.connects.ts
+var avatar_connects_exports = {};
+__export(avatar_connects_exports, {
+  avatarConnect: () => avatarConnect,
+  avatarGroupConnect: () => avatarGroupConnect
+});
+module.exports = __toCommonJS(avatar_connects_exports);
+var import_vue = require("vue");
+var import_tokens = require("@mekari/pixel3-styled-system/tokens");
+
+// src/modules/avatar.utils.ts
+var background = ["gray", "sky", "teal", "violet", "amber", "rose", "stone", "lime", "pink"];
+var getColor = /* @__PURE__ */ __name(() => {
+  const order = Math.floor(Math.random() * background.length);
+  return `${background[order]}.400`;
+}, "getColor");
+var isColorInList = /* @__PURE__ */ __name((value) => {
+  return background.includes(value);
+}, "isColorInList");
+
+// src/modules/avatar.connects.ts
+function avatarConnect(state, send, classes) {
+  const {
+    id,
+    name,
+    borderColor,
+    hasBorder,
+    variantColor,
+    src,
+    icon,
+    iconVariant,
+    iconColor,
+    spacing,
+    onClick
+  } = state.context;
+  const isLoaded = state.matches("loaded");
+  const isClickable = (0, import_vue.computed)(() => {
+    var _a, _b;
+    return !!((_b = (_a = (0, import_vue.getCurrentInstance)()) == null ? void 0 : _a.vnode.props) == null ? void 0 : _b.onClick);
+  }).value;
+  const isRandomColor = isColorInList(variantColor);
+  return {
+    name,
+    src,
+    icon,
+    isLoaded,
+    rootProps: {
+      id,
+      onClick,
+      class: classes.root,
+      style: {
+        "--mp-avatar--cursor": isClickable ? "pointer" : void 0,
+        "--mp-avatar--margin-left": `calc(${import_tokens.token.var(`spacing.${spacing}`)} * -1)`,
+        "--mp-avatar--border-color": import_tokens.token.var(`colors.${hasBorder ? borderColor != null ? borderColor : "white" : "white"}`),
+        "--mp-avatar--background-color": import_tokens.token.var(`colors.${isRandomColor ? variantColor : getColor()}`)
+      },
+      "data-has-border": hasBorder,
+      "data-pixel-component": "MpAvatar"
+    },
+    fallbackProps: {
+      id: `${id}-fallback`,
+      class: classes.fallback,
+      "data-pixel-component": "MpAvatarFallback"
+    },
+    imageProps: {
+      id: `${id}-image`,
+      alt: name,
+      src,
+      onLoad() {
+        send({
+          type: "IMG_LOADED"
+        });
+      },
+      onError() {
+        send({
+          type: "IMG_ERROR"
+        });
+      },
+      class: classes.image,
+      style: {
+        "--mp-avatar--visibility": !isLoaded ? "hidden" : void 0,
+        "--mp-avatar--display": !isLoaded ? "contents" : void 0
+      },
+      "data-pixel-component": "MpAvatarImage"
+    },
+    iconProps: {
+      id: `${id}-icon`,
+      name: icon,
+      variant: iconVariant,
+      variantColor: iconColor,
+      class: classes.icon,
+      "data-pixel-component": "MpAvatarIcon"
+    }
+  };
+}
+__name(avatarConnect, "avatarConnect");
+function avatarGroupConnect(state, send, classes) {
+  const {
+    id,
+    onClick
+  } = state.context;
+  const isClickable = (0, import_vue.computed)(() => {
+    var _a, _b;
+    return !!((_b = (_a = (0, import_vue.getCurrentInstance)()) == null ? void 0 : _a.vnode.props) == null ? void 0 : _b.onClick);
+  }).value;
+  return {
+    rootProps: {
+      id,
+      class: classes.root,
+      "data-pixel-component": "MpAvatarGroup"
+    },
+    excessProps: {
+      id: `${id}-excess`,
+      onClick,
+      class: classes.excess,
+      style: {
+        "--mp-avatar-group--cursor": isClickable ? "pointer" : void 0
+      },
+      "data-pixel-component": "MpAvatarExcess"
+    }
+  };
+}
+__name(avatarGroupConnect, "avatarGroupConnect");
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  avatarConnect,
+  avatarGroupConnect
+});

package/dist/modules/avatar.connects.mjs

@@ -0,0 +1,10 @@
+import {
+  avatarConnect,
+  avatarGroupConnect
+} from "../chunk-ZMUFXMG4.mjs";
+import "../chunk-ZK47OSEJ.mjs";
+import "../chunk-QZ7VFGWC.mjs";
+export {
+  avatarConnect,
+  avatarGroupConnect
+};

package/dist/modules/avatar.hooks.d.mts

@@ -0,0 +1,8 @@
+import * as vue from 'vue';
+import { AvatarDefinedContext, AvatarApiMachine, AvatarGroupDefinedContext, AvatarGroupApiMachine } from './avatar.types.mjs';
+import * as _mekari_pixel3_utils from '@mekari/pixel3-utils';
+
+declare const useAvatar: (props: AvatarDefinedContext, emit: CallableFunction) => vue.ComputedRef<AvatarApiMachine<_mekari_pixel3_utils.PropTypes>>;
+declare const useAvatarGroup: (props: AvatarGroupDefinedContext, emit: CallableFunction) => vue.ComputedRef<AvatarGroupApiMachine<_mekari_pixel3_utils.PropTypes>>;
+
+export { useAvatar, useAvatarGroup };

package/dist/modules/avatar.hooks.d.ts

@@ -0,0 +1,8 @@
+import * as vue from 'vue';
+import { AvatarDefinedContext, AvatarApiMachine, AvatarGroupDefinedContext, AvatarGroupApiMachine } from './avatar.types.js';
+import * as _mekari_pixel3_utils from '@mekari/pixel3-utils';
+
+declare const useAvatar: (props: AvatarDefinedContext, emit: CallableFunction) => vue.ComputedRef<AvatarApiMachine<_mekari_pixel3_utils.PropTypes>>;
+declare const useAvatarGroup: (props: AvatarGroupDefinedContext, emit: CallableFunction) => vue.ComputedRef<AvatarGroupApiMachine<_mekari_pixel3_utils.PropTypes>>;
+
+export { useAvatar, useAvatarGroup };

package/dist/modules/avatar.hooks.js

@@ -0,0 +1,234 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/modules/avatar.hooks.ts
+var avatar_hooks_exports = {};
+__export(avatar_hooks_exports, {
+  useAvatar: () => useAvatar,
+  useAvatarGroup: () => useAvatarGroup
+});
+module.exports = __toCommonJS(avatar_hooks_exports);
+var import_vue2 = require("vue");
+var import_vue3 = require("@xstate/vue");
+var import_pixel3_utils = require("@mekari/pixel3-utils");
+var import_recipes = require("@mekari/pixel3-styled-system/recipes");
+
+// src/modules/avatar.machines.ts
+var import_xstate = require("xstate");
+function avatarMachine(context) {
+  return (0, import_xstate.createMachine)({
+    /** @xstate-layout N4IgpgJg5mDOIC5QEMBuyAuyBOA6ANgPbIQCWAdlAMQCSAsgOID6AMgPICCAIgKJcDaABgC6iUAAdCsUhlKFyYkAA9EARgAsATlwBWAMybBANgBMOgDQgAnojMncAdh0BfZ5bSYcBYmUq1GTDwASkFsQUKiSCCS0rLyiioIGtr6hqYW1ogAHA64gll6hUXFha7u6Fh4RCSQ-szBoeEiijEycgpRieoajnrqek6WNghZqrplIB6VuGDY2ITYdaycvALNUa1xHaBdgnq4mgMZw6p6Jq5uIOSEEHCKUzgtUm3xnYgAtEZDH0YTD1U+ChQJ6xdoJRDqEzfBCadR-Cpeaq3CAgl7bZSIHRGfajMzQ04uS7-GZzBaorbghB6QTabrqYx4zIjXI6AoldkXZxAA */
+    id: "avatar",
+    context,
+    initial: "loading",
+    states: {
+      loading: {
+        on: {
+          IMG_LOADED: {
+            target: "loaded"
+          },
+          IMG_ERROR: {
+            target: "error"
+          }
+        }
+      },
+      loaded: {
+        on: {
+          IMG_ERROR: {
+            target: "error"
+          }
+        }
+      },
+      error: {
+        on: {
+          IMG_LOADED: {
+            target: "loaded"
+          }
+        }
+      }
+    },
+    predictableActionArguments: true
+  });
+}
+__name(avatarMachine, "avatarMachine");
+function avatarGroupMachine(context) {
+  return (0, import_xstate.createMachine)({
+    /** @xstate-layout N4IgpgJg5mDOIC5gF8A0IB2B7CdGgEMA3AgFwICcBaKCrAVwAd8RGtYBLUjrDFgD0QBGAEzoAnsJHIZyIA */
+    id: "avatar-group",
+    context,
+    predictableActionArguments: true
+  });
+}
+__name(avatarGroupMachine, "avatarGroupMachine");
+
+// src/modules/avatar.connects.ts
+var import_vue = require("vue");
+var import_tokens = require("@mekari/pixel3-styled-system/tokens");
+
+// src/modules/avatar.utils.ts
+var background = ["gray", "sky", "teal", "violet", "amber", "rose", "stone", "lime", "pink"];
+var getColor = /* @__PURE__ */ __name(() => {
+  const order = Math.floor(Math.random() * background.length);
+  return `${background[order]}.400`;
+}, "getColor");
+var isColorInList = /* @__PURE__ */ __name((value) => {
+  return background.includes(value);
+}, "isColorInList");
+
+// src/modules/avatar.connects.ts
+function avatarConnect(state, send, classes) {
+  const {
+    id,
+    name,
+    borderColor,
+    hasBorder,
+    variantColor,
+    src,
+    icon,
+    iconVariant,
+    iconColor,
+    spacing,
+    onClick
+  } = state.context;
+  const isLoaded = state.matches("loaded");
+  const isClickable = (0, import_vue.computed)(() => {
+    var _a, _b;
+    return !!((_b = (_a = (0, import_vue.getCurrentInstance)()) == null ? void 0 : _a.vnode.props) == null ? void 0 : _b.onClick);
+  }).value;
+  const isRandomColor = isColorInList(variantColor);
+  return {
+    name,
+    src,
+    icon,
+    isLoaded,
+    rootProps: {
+      id,
+      onClick,
+      class: classes.root,
+      style: {
+        "--mp-avatar--cursor": isClickable ? "pointer" : void 0,
+        "--mp-avatar--margin-left": `calc(${import_tokens.token.var(`spacing.${spacing}`)} * -1)`,
+        "--mp-avatar--border-color": import_tokens.token.var(`colors.${hasBorder ? borderColor != null ? borderColor : "white" : "white"}`),
+        "--mp-avatar--background-color": import_tokens.token.var(`colors.${isRandomColor ? variantColor : getColor()}`)
+      },
+      "data-has-border": hasBorder,
+      "data-pixel-component": "MpAvatar"
+    },
+    fallbackProps: {
+      id: `${id}-fallback`,
+      class: classes.fallback,
+      "data-pixel-component": "MpAvatarFallback"
+    },
+    imageProps: {
+      id: `${id}-image`,
+      alt: name,
+      src,
+      onLoad() {
+        send({
+          type: "IMG_LOADED"
+        });
+      },
+      onError() {
+        send({
+          type: "IMG_ERROR"
+        });
+      },
+      class: classes.image,
+      style: {
+        "--mp-avatar--visibility": !isLoaded ? "hidden" : void 0,
+        "--mp-avatar--display": !isLoaded ? "contents" : void 0
+      },
+      "data-pixel-component": "MpAvatarImage"
+    },
+    iconProps: {
+      id: `${id}-icon`,
+      name: icon,
+      variant: iconVariant,
+      variantColor: iconColor,
+      class: classes.icon,
+      "data-pixel-component": "MpAvatarIcon"
+    }
+  };
+}
+__name(avatarConnect, "avatarConnect");
+function avatarGroupConnect(state, send, classes) {
+  const {
+    id,
+    onClick
+  } = state.context;
+  const isClickable = (0, import_vue.computed)(() => {
+    var _a, _b;
+    return !!((_b = (_a = (0, import_vue.getCurrentInstance)()) == null ? void 0 : _a.vnode.props) == null ? void 0 : _b.onClick);
+  }).value;
+  return {
+    rootProps: {
+      id,
+      class: classes.root,
+      "data-pixel-component": "MpAvatarGroup"
+    },
+    excessProps: {
+      id: `${id}-excess`,
+      onClick,
+      class: classes.excess,
+      style: {
+        "--mp-avatar-group--cursor": isClickable ? "pointer" : void 0
+      },
+      "data-pixel-component": "MpAvatarExcess"
+    }
+  };
+}
+__name(avatarGroupConnect, "avatarGroupConnect");
+
+// src/modules/avatar.hooks.ts
+var useAvatar = /* @__PURE__ */ __name((props, emit) => {
+  var _a;
+  const context = (0, import_vue2.ref)(props);
+  const {
+    state,
+    send
+  } = (0, import_vue3.useMachine)(avatarMachine({
+    ...context.value,
+    id: (_a = context.value.id) != null ? _a : `mp-avatar-${(0, import_pixel3_utils.useId)()}`,
+    onClick: (evt) => emit("click", evt)
+  }));
+  const [avatarProps] = import_recipes.avatarSlotRecipe.splitVariantProps(context.value);
+  const classes = (0, import_recipes.avatarSlotRecipe)(avatarProps);
+  return (0, import_vue2.computed)(() => avatarConnect(state.value, send, classes));
+}, "useAvatar");
+var useAvatarGroup = /* @__PURE__ */ __name((props, emit) => {
+  var _a;
+  const context = (0, import_vue2.ref)(props);
+  const {
+    state,
+    send
+  } = (0, import_vue3.useMachine)(avatarGroupMachine({
+    ...context.value,
+    id: (_a = context.value.id) != null ? _a : `mp-avatar-group-${(0, import_pixel3_utils.useId)()}`,
+    onClick: (evt) => emit("click", evt)
+  }));
+  const [avatarGroupProps] = import_recipes.avatarGroupSlotRecipe.splitVariantProps(context.value);
+  const classes = (0, import_recipes.avatarGroupSlotRecipe)(avatarGroupProps);
+  return (0, import_vue2.computed)(() => avatarGroupConnect(state.value, send, classes));
+}, "useAvatarGroup");
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useAvatar,
+  useAvatarGroup
+});

package/dist/modules/avatar.hooks.mjs

@@ -0,0 +1,12 @@
+import {
+  useAvatar,
+  useAvatarGroup
+} from "../chunk-JVROEGO3.mjs";
+import "../chunk-U4MXRXR7.mjs";
+import "../chunk-ZMUFXMG4.mjs";
+import "../chunk-ZK47OSEJ.mjs";
+import "../chunk-QZ7VFGWC.mjs";
+export {
+  useAvatar,
+  useAvatarGroup
+};

package/dist/modules/avatar.machines.d.mts

@@ -0,0 +1,14 @@
+import * as xstate from 'xstate';
+import { AvatarDefinedContext, AvatarProps, AvatarGroupDefinedContext, AvatarGroupProps } from './avatar.types.mjs';
+import '@mekari/pixel3-utils';
+
+declare function avatarMachine(context: AvatarDefinedContext): xstate.StateMachine<Pick<Partial<AvatarProps>, "id"> & Omit<AvatarProps, "id">, any, xstate.AnyEventObject, {
+    value: any;
+    context: Pick<Partial<AvatarProps>, "id"> & Omit<AvatarProps, "id">;
+}, xstate.BaseActionObject, xstate.ServiceMap, xstate.ResolveTypegenMeta<xstate.TypegenDisabled, xstate.AnyEventObject, xstate.BaseActionObject, xstate.ServiceMap>>;
+declare function avatarGroupMachine(context: AvatarGroupDefinedContext): xstate.StateMachine<Pick<Partial<AvatarGroupProps>, "id"> & Omit<AvatarGroupProps, "id">, any, xstate.AnyEventObject, {
+    value: any;
+    context: Pick<Partial<AvatarGroupProps>, "id"> & Omit<AvatarGroupProps, "id">;
+}, xstate.BaseActionObject, xstate.ServiceMap, xstate.ResolveTypegenMeta<xstate.TypegenDisabled, xstate.AnyEventObject, xstate.BaseActionObject, xstate.ServiceMap>>;
+
+export { avatarGroupMachine, avatarMachine };

package/dist/modules/avatar.machines.d.ts

@@ -0,0 +1,14 @@
+import * as xstate from 'xstate';
+import { AvatarDefinedContext, AvatarProps, AvatarGroupDefinedContext, AvatarGroupProps } from './avatar.types.js';
+import '@mekari/pixel3-utils';
+
+declare function avatarMachine(context: AvatarDefinedContext): xstate.StateMachine<Pick<Partial<AvatarProps>, "id"> & Omit<AvatarProps, "id">, any, xstate.AnyEventObject, {
+    value: any;
+    context: Pick<Partial<AvatarProps>, "id"> & Omit<AvatarProps, "id">;
+}, xstate.BaseActionObject, xstate.ServiceMap, xstate.ResolveTypegenMeta<xstate.TypegenDisabled, xstate.AnyEventObject, xstate.BaseActionObject, xstate.ServiceMap>>;
+declare function avatarGroupMachine(context: AvatarGroupDefinedContext): xstate.StateMachine<Pick<Partial<AvatarGroupProps>, "id"> & Omit<AvatarGroupProps, "id">, any, xstate.AnyEventObject, {
+    value: any;
+    context: Pick<Partial<AvatarGroupProps>, "id"> & Omit<AvatarGroupProps, "id">;
+}, xstate.BaseActionObject, xstate.ServiceMap, xstate.ResolveTypegenMeta<xstate.TypegenDisabled, xstate.AnyEventObject, xstate.BaseActionObject, xstate.ServiceMap>>;
+
+export { avatarGroupMachine, avatarMachine };

package/dist/modules/avatar.machines.js

@@ -0,0 +1,78 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/modules/avatar.machines.ts
+var avatar_machines_exports = {};
+__export(avatar_machines_exports, {
+  avatarGroupMachine: () => avatarGroupMachine,
+  avatarMachine: () => avatarMachine
+});
+module.exports = __toCommonJS(avatar_machines_exports);
+var import_xstate = require("xstate");
+function avatarMachine(context) {
+  return (0, import_xstate.createMachine)({
+    /** @xstate-layout N4IgpgJg5mDOIC5QEMBuyAuyBOA6ANgPbIQCWAdlAMQCSAsgOID6AMgPICCAIgKJcDaABgC6iUAAdCsUhlKFyYkAA9EARgAsATlwBWAMybBANgBMOgDQgAnojMncAdh0BfZ5bSYcBYmUq1GTDwASkFsQUKiSCCS0rLyiioIGtr6hqYW1ogAHA64gll6hUXFha7u6Fh4RCSQ-szBoeEiijEycgpRieoajnrqek6WNghZqrplIB6VuGDY2ITYdaycvALNUa1xHaBdgnq4mgMZw6p6Jq5uIOSEEHCKUzgtUm3xnYgAtEZDH0YTD1U+ChQJ6xdoJRDqEzfBCadR-Cpeaq3CAgl7bZSIHRGfajMzQ04uS7-GZzBaorbghB6QTabrqYx4zIjXI6AoldkXZxAA */
+    id: "avatar",
+    context,
+    initial: "loading",
+    states: {
+      loading: {
+        on: {
+          IMG_LOADED: {
+            target: "loaded"
+          },
+          IMG_ERROR: {
+            target: "error"
+          }
+        }
+      },
+      loaded: {
+        on: {
+          IMG_ERROR: {
+            target: "error"
+          }
+        }
+      },
+      error: {
+        on: {
+          IMG_LOADED: {
+            target: "loaded"
+          }
+        }
+      }
+    },
+    predictableActionArguments: true
+  });
+}
+__name(avatarMachine, "avatarMachine");
+function avatarGroupMachine(context) {
+  return (0, import_xstate.createMachine)({
+    /** @xstate-layout N4IgpgJg5mDOIC5gF8A0IB2B7CdGgEMA3AgFwICcBaKCrAVwAd8RGtYBLUjrDFgD0QBGAEzoAnsJHIZyIA */
+    id: "avatar-group",
+    context,
+    predictableActionArguments: true
+  });
+}
+__name(avatarGroupMachine, "avatarGroupMachine");
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  avatarGroupMachine,
+  avatarMachine
+});

package/dist/modules/avatar.machines.mjs

@@ -0,0 +1,9 @@
+import {
+  avatarGroupMachine,
+  avatarMachine
+} from "../chunk-U4MXRXR7.mjs";
+import "../chunk-QZ7VFGWC.mjs";
+export {
+  avatarGroupMachine,
+  avatarMachine
+};