@mekari/pixel3-avatar 0.0.0

package/dist/avatar.d.ts

@@ -0,0 +1,102 @@
+import * as vue from 'vue';
+import { AvatarSize, AvatarVariant, AvatarVariantColor } from './modules/avatar.types.js';
+import '@mekari/pixel3-utils';
+
+/**
+ * MpAvatar component used to display profile image, initial or fallback icon.
+ */
+declare const MpAvatar: vue.DefineComponent<{
+    id: {
+        type: vue.PropType<string | undefined>;
+    };
+    name: {
+        type: vue.PropType<string | undefined>;
+        default: string;
+    };
+    size: {
+        type: vue.PropType<AvatarSize | undefined>;
+        default: string;
+    };
+    variant: {
+        type: vue.PropType<AvatarVariant | undefined>;
+        default: string;
+    };
+    variantColor: {
+        type: vue.PropType<AvatarVariantColor | undefined>;
+    };
+    hasBorder: {
+        type: vue.PropType<boolean | undefined>;
+        default: boolean;
+    };
+    borderColor: {
+        type: vue.PropType<string | undefined>;
+    };
+    src: {
+        type: vue.PropType<string | undefined>;
+    };
+    icon: {
+        type: vue.PropType<string | undefined>;
+    };
+    iconVariant: {
+        type: vue.PropType<string | undefined>;
+    };
+    iconColor: {
+        type: vue.PropType<string | undefined>;
+    };
+    spacing: {
+        type: vue.PropType<number | undefined>;
+        default: number;
+    };
+}, () => JSX.Element, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, "click"[], "click", vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
+    id: {
+        type: vue.PropType<string | undefined>;
+    };
+    name: {
+        type: vue.PropType<string | undefined>;
+        default: string;
+    };
+    size: {
+        type: vue.PropType<AvatarSize | undefined>;
+        default: string;
+    };
+    variant: {
+        type: vue.PropType<AvatarVariant | undefined>;
+        default: string;
+    };
+    variantColor: {
+        type: vue.PropType<AvatarVariantColor | undefined>;
+    };
+    hasBorder: {
+        type: vue.PropType<boolean | undefined>;
+        default: boolean;
+    };
+    borderColor: {
+        type: vue.PropType<string | undefined>;
+    };
+    src: {
+        type: vue.PropType<string | undefined>;
+    };
+    icon: {
+        type: vue.PropType<string | undefined>;
+    };
+    iconVariant: {
+        type: vue.PropType<string | undefined>;
+    };
+    iconColor: {
+        type: vue.PropType<string | undefined>;
+    };
+    spacing: {
+        type: vue.PropType<number | undefined>;
+        default: number;
+    };
+}>> & {
+    onClick?: ((...args: any[]) => any) | undefined;
+}, {
+    name: string | undefined;
+    size: AvatarSize | undefined;
+    variant: AvatarVariant | undefined;
+    hasBorder: boolean | undefined;
+    spacing: number | undefined;
+}, {}>;
+
+export { MpAvatar };

package/dist/avatar.js

@@ -0,0 +1,284 @@
+"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/avatar.tsx
+var avatar_exports = {};
+__export(avatar_exports, {
+  MpAvatar: () => MpAvatar
+});
+module.exports = __toCommonJS(avatar_exports);
+var import_vue8 = require("vue");
+var import_vue9 = require("vue");
+
+// src/modules/avatar.props.ts
+var import_pixel3_utils = require("@mekari/pixel3-utils");
+var avatarProps = {
+  id: {
+    type: String
+  },
+  name: {
+    type: String,
+    default: ""
+  },
+  size: {
+    type: String,
+    default: "md"
+  },
+  variant: {
+    type: String,
+    default: "circle"
+  },
+  variantColor: {
+    type: String
+  },
+  hasBorder: {
+    type: Boolean,
+    default: false
+  },
+  borderColor: {
+    type: String
+  },
+  src: {
+    type: String
+  },
+  icon: {
+    type: String
+  },
+  iconVariant: {
+    type: String
+  },
+  iconColor: {
+    type: String
+  },
+  spacing: {
+    type: Number,
+    default: 0
+  }
+};
+var avatarEmits = (0, import_pixel3_utils.declareEmit)(["click"]);
+var avatarGroupEmits = (0, import_pixel3_utils.declareEmit)(["click"]);
+
+// src/modules/avatar.hooks.ts
+var import_vue2 = require("vue");
+var import_vue3 = require("@xstate/vue");
+var import_pixel3_utils2 = 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");
+
+// 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 getInitial = /* @__PURE__ */ __name((value) => {
+  const [first, last] = value.split(" ");
+  if (first && last)
+    return `${first.charAt(0)}${last.charAt(0)}`;
+  else
+    return first.charAt(0);
+}, "getInitial");
+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");
+
+// 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_utils2.useId)()}`,
+    onClick: (evt) => emit("click", evt)
+  }));
+  const [avatarProps2] = import_recipes.avatarSlotRecipe.splitVariantProps(context.value);
+  const classes = (0, import_recipes.avatarSlotRecipe)(avatarProps2);
+  return (0, import_vue2.computed)(() => avatarConnect(state.value, send, classes));
+}, "useAvatar");
+
+// src/avatar.tsx
+var import_pixel3_icon = require("@mekari/pixel3-icon");
+
+// src/avatar-fallback.tsx
+var import_vue4 = require("vue");
+var import_vue5 = require("vue");
+var MpAvatarFallback = (0, import_vue5.defineComponent)({
+  name: "MpAvatarFallback",
+  setup() {
+    return () => (0, import_vue4.createVNode)("div", null, [(0, import_vue4.createVNode)("svg", {
+      "fill": "#ffffff",
+      "viewBox": "0 0 128 128",
+      "role": "img"
+    }, [(0, import_vue4.createVNode)("path", {
+      "d": "M103,102.1388 C93.094,111.92 79.3504,118 64.1638,118 C48.8056,118 34.9294,111.768 25,101.7892 L25,95.2 C25,86.8096 31.981,80 40.6,80 L87.4,80 C96.019,80 103,86.8096 103,95.2 L103,102.1388 Z"
+    }, null), (0, import_vue4.createVNode)("path", {
+      "d": "M63.9961647,24 C51.2938136,24 41,34.2938136 41,46.9961647 C41,59.7061864 51.2938136,70 63.9961647,70 C76.6985159,70 87,59.7061864 87,46.9961647 C87,34.2938136 76.6985159,24 63.9961647,24"
+    }, null)])]);
+  }
+});
+
+// src/avatar-image.tsx
+var import_vue6 = require("vue");
+var import_vue7 = require("vue");
+var MpAvatarImage = (0, import_vue7.defineComponent)({
+  name: "MpAvatarImage",
+  setup() {
+    return () => (0, import_vue6.createVNode)("img", null, null);
+  }
+});
+
+// src/avatar.tsx
+var MpAvatar = (0, import_vue9.defineComponent)({
+  name: "MpAvatar",
+  props: avatarProps,
+  emits: avatarEmits,
+  setup(props, {
+    emit
+  }) {
+    const api = useAvatar(props, emit);
+    return () => (0, import_vue8.createVNode)("div", api.value.rootProps, [api.value.src ? (0, import_vue8.createVNode)(MpAvatarImage, api.value.imageProps, null) : void 0, !api.value.icon && !api.value.src || api.value.src && !api.value.isLoaded ? api.value.name ? getInitial(api.value.name) : (0, import_vue8.createVNode)(MpAvatarFallback, api.value.fallbackProps, null) : void 0, api.value.icon && (0, import_vue8.createVNode)(import_pixel3_icon.MpIcon, api.value.iconProps, null)]);
+  }
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  MpAvatar
+});

package/dist/avatar.mjs

@@ -0,0 +1,14 @@
+import {
+  MpAvatar
+} from "./chunk-43VB6T4V.mjs";
+import "./chunk-NKXS73IR.mjs";
+import "./chunk-ITYXDMOF.mjs";
+import "./chunk-4VNSI4PL.mjs";
+import "./chunk-JVROEGO3.mjs";
+import "./chunk-U4MXRXR7.mjs";
+import "./chunk-ZMUFXMG4.mjs";
+import "./chunk-ZK47OSEJ.mjs";
+import "./chunk-QZ7VFGWC.mjs";
+export {
+  MpAvatar
+};

package/dist/chunk-43VB6T4V.mjs

@@ -0,0 +1,36 @@
+import {
+  MpAvatarFallback
+} from "./chunk-NKXS73IR.mjs";
+import {
+  avatarEmits,
+  avatarProps
+} from "./chunk-ITYXDMOF.mjs";
+import {
+  MpAvatarImage
+} from "./chunk-4VNSI4PL.mjs";
+import {
+  useAvatar
+} from "./chunk-JVROEGO3.mjs";
+import {
+  getInitial
+} from "./chunk-ZK47OSEJ.mjs";
+
+// src/avatar.tsx
+import { createVNode as _createVNode } from "vue";
+import { defineComponent } from "vue";
+import { MpIcon } from "@mekari/pixel3-icon";
+var MpAvatar = defineComponent({
+  name: "MpAvatar",
+  props: avatarProps,
+  emits: avatarEmits,
+  setup(props, {
+    emit
+  }) {
+    const api = useAvatar(props, emit);
+    return () => _createVNode("div", api.value.rootProps, [api.value.src ? _createVNode(MpAvatarImage, api.value.imageProps, null) : void 0, !api.value.icon && !api.value.src || api.value.src && !api.value.isLoaded ? api.value.name ? getInitial(api.value.name) : _createVNode(MpAvatarFallback, api.value.fallbackProps, null) : void 0, api.value.icon && _createVNode(MpIcon, api.value.iconProps, null)]);
+  }
+});
+
+export {
+  MpAvatar
+};

package/dist/chunk-4VNSI4PL.mjs

@@ -0,0 +1,13 @@
+// src/avatar-image.tsx
+import { createVNode as _createVNode } from "vue";
+import { defineComponent } from "vue";
+var MpAvatarImage = defineComponent({
+  name: "MpAvatarImage",
+  setup() {
+    return () => _createVNode("img", null, null);
+  }
+});
+
+export {
+  MpAvatarImage
+};

package/dist/chunk-CY2Z6I23.mjs

@@ -0,0 +1,18 @@
+// src/avatar-excess.tsx
+import { createVNode as _createVNode } from "vue";
+import { defineComponent } from "vue";
+var MpAvatarExcess = defineComponent({
+  name: "MpAvatarExcess",
+  setup(_, {
+    slots
+  }) {
+    return () => {
+      var _a;
+      return _createVNode("div", null, [(_a = slots.default) == null ? void 0 : _a.call(slots)]);
+    };
+  }
+});
+
+export {
+  MpAvatarExcess
+};

package/dist/chunk-ITYXDMOF.mjs

@@ -0,0 +1,74 @@
+// src/modules/avatar.props.ts
+import { declareEmit } from "@mekari/pixel3-utils";
+var avatarProps = {
+  id: {
+    type: String
+  },
+  name: {
+    type: String,
+    default: ""
+  },
+  size: {
+    type: String,
+    default: "md"
+  },
+  variant: {
+    type: String,
+    default: "circle"
+  },
+  variantColor: {
+    type: String
+  },
+  hasBorder: {
+    type: Boolean,
+    default: false
+  },
+  borderColor: {
+    type: String
+  },
+  src: {
+    type: String
+  },
+  icon: {
+    type: String
+  },
+  iconVariant: {
+    type: String
+  },
+  iconColor: {
+    type: String
+  },
+  spacing: {
+    type: Number,
+    default: 0
+  }
+};
+var avatarGroupProps = {
+  id: {
+    type: String
+  },
+  size: {
+    type: String,
+    default: "md"
+  },
+  max: {
+    type: Number,
+    default: 3
+  },
+  spacing: {
+    type: Number,
+    default: -2
+  },
+  borderColor: {
+    type: String
+  }
+};
+var avatarEmits = declareEmit(["click"]);
+var avatarGroupEmits = declareEmit(["click"]);
+
+export {
+  avatarProps,
+  avatarGroupProps,
+  avatarEmits,
+  avatarGroupEmits
+};

package/dist/chunk-JVROEGO3.mjs

@@ -0,0 +1,52 @@
+import {
+  avatarGroupMachine,
+  avatarMachine
+} from "./chunk-U4MXRXR7.mjs";
+import {
+  avatarConnect,
+  avatarGroupConnect
+} from "./chunk-ZMUFXMG4.mjs";
+import {
+  __name
+} from "./chunk-QZ7VFGWC.mjs";
+
+// src/modules/avatar.hooks.ts
+import { computed, ref } from "vue";
+import { useMachine } from "@xstate/vue";
+import { useId } from "@mekari/pixel3-utils";
+import { avatarSlotRecipe, avatarGroupSlotRecipe } from "@mekari/pixel3-styled-system/recipes";
+var useAvatar = /* @__PURE__ */ __name((props, emit) => {
+  var _a;
+  const context = ref(props);
+  const {
+    state,
+    send
+  } = useMachine(avatarMachine({
+    ...context.value,
+    id: (_a = context.value.id) != null ? _a : `mp-avatar-${useId()}`,
+    onClick: (evt) => emit("click", evt)
+  }));
+  const [avatarProps] = avatarSlotRecipe.splitVariantProps(context.value);
+  const classes = avatarSlotRecipe(avatarProps);
+  return computed(() => avatarConnect(state.value, send, classes));
+}, "useAvatar");
+var useAvatarGroup = /* @__PURE__ */ __name((props, emit) => {
+  var _a;
+  const context = ref(props);
+  const {
+    state,
+    send
+  } = useMachine(avatarGroupMachine({
+    ...context.value,
+    id: (_a = context.value.id) != null ? _a : `mp-avatar-group-${useId()}`,
+    onClick: (evt) => emit("click", evt)
+  }));
+  const [avatarGroupProps] = avatarGroupSlotRecipe.splitVariantProps(context.value);
+  const classes = avatarGroupSlotRecipe(avatarGroupProps);
+  return computed(() => avatarGroupConnect(state.value, send, classes));
+}, "useAvatarGroup");
+
+export {
+  useAvatar,
+  useAvatarGroup
+};

package/dist/chunk-NKXS73IR.mjs

@@ -0,0 +1,21 @@
+// src/avatar-fallback.tsx
+import { createVNode as _createVNode } from "vue";
+import { defineComponent } from "vue";
+var MpAvatarFallback = defineComponent({
+  name: "MpAvatarFallback",
+  setup() {
+    return () => _createVNode("div", null, [_createVNode("svg", {
+      "fill": "#ffffff",
+      "viewBox": "0 0 128 128",
+      "role": "img"
+    }, [_createVNode("path", {
+      "d": "M103,102.1388 C93.094,111.92 79.3504,118 64.1638,118 C48.8056,118 34.9294,111.768 25,101.7892 L25,95.2 C25,86.8096 31.981,80 40.6,80 L87.4,80 C96.019,80 103,86.8096 103,95.2 L103,102.1388 Z"
+    }, null), _createVNode("path", {
+      "d": "M63.9961647,24 C51.2938136,24 41,34.2938136 41,46.9961647 C41,59.7061864 51.2938136,70 63.9961647,70 C76.6985159,70 87,59.7061864 87,46.9961647 C87,34.2938136 76.6985159,24 63.9961647,24"
+    }, null)])]);
+  }
+});
+
+export {
+  MpAvatarFallback
+};

package/dist/chunk-QZ7VFGWC.mjs

@@ -0,0 +1,6 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+
+export {
+  __name
+};

package/dist/chunk-RTYPPBOR.mjs

@@ -0,0 +1,44 @@
+import {
+  MpAvatarExcess
+} from "./chunk-CY2Z6I23.mjs";
+import {
+  avatarGroupEmits,
+  avatarGroupProps
+} from "./chunk-ITYXDMOF.mjs";
+import {
+  useAvatarGroup
+} from "./chunk-JVROEGO3.mjs";
+
+// src/avatar-group.tsx
+import { createVNode as _createVNode } from "vue";
+import { defineComponent, computed, cloneVNode } from "vue";
+import { objectFilterUndefined, getChildren } from "@mekari/pixel3-utils";
+var MpAvatarGroup = defineComponent({
+  name: "MpAvatarGroup",
+  props: avatarGroupProps,
+  emits: avatarGroupEmits,
+  setup(props, {
+    slots,
+    emit
+  }) {
+    const api = useAvatarGroup(props, emit);
+    const children = computed(() => getChildren(slots));
+    const count = computed(() => children.value.length - (props.max || 0));
+    const cloneChildren = computed(() => computed(() => children.value.slice(0, props.max)).value.map((vnode, index) => {
+      const overrideProps = objectFilterUndefined({
+        size: props.size,
+        spacing: index === 0 ? 0 : props.spacing,
+        hasBorder: true,
+        borderColor: props.borderColor
+      });
+      return cloneVNode(vnode, overrideProps);
+    }));
+    return () => _createVNode("div", api.value.rootProps, [cloneChildren.value, count.value > 0 && props.max !== 0 && _createVNode(MpAvatarExcess, api.value.excessProps, {
+      default: () => [`+${count.value}`]
+    })]);
+  }
+});
+
+export {
+  MpAvatarGroup
+};