@mekari/pixel3-avatar 0.0.0

package/dist/avatar-excess.d.mts

@@ -0,0 +1,8 @@
+import * as vue from 'vue';
+
+/**
+ * MpAvatarExcess component used to display more label counter.
+ */
+declare const MpAvatarExcess: vue.DefineComponent<{}, () => JSX.Element, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{}>>, {}, {}>;
+
+export { MpAvatarExcess };

package/dist/avatar-excess.d.ts

@@ -0,0 +1,8 @@
+import * as vue from 'vue';
+
+/**
+ * MpAvatarExcess component used to display more label counter.
+ */
+declare const MpAvatarExcess: vue.DefineComponent<{}, () => JSX.Element, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{}>>, {}, {}>;
+
+export { MpAvatarExcess };

package/dist/avatar-excess.js

@@ -0,0 +1,42 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/avatar-excess.tsx
+var avatar_excess_exports = {};
+__export(avatar_excess_exports, {
+  MpAvatarExcess: () => MpAvatarExcess
+});
+module.exports = __toCommonJS(avatar_excess_exports);
+var import_vue = require("vue");
+var import_vue2 = require("vue");
+var MpAvatarExcess = (0, import_vue2.defineComponent)({
+  name: "MpAvatarExcess",
+  setup(_, {
+    slots
+  }) {
+    return () => {
+      var _a;
+      return (0, import_vue.createVNode)("div", null, [(_a = slots.default) == null ? void 0 : _a.call(slots)]);
+    };
+  }
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  MpAvatarExcess
+});

package/dist/avatar-excess.mjs

@@ -0,0 +1,7 @@
+import {
+  MpAvatarExcess
+} from "./chunk-CY2Z6I23.mjs";
+import "./chunk-QZ7VFGWC.mjs";
+export {
+  MpAvatarExcess
+};

package/dist/avatar-fallback.d.mts

@@ -0,0 +1,8 @@
+import * as vue from 'vue';
+
+/**
+ * MpAvatarFallback component used to display fallback icon.
+ */
+declare const MpAvatarFallback: vue.DefineComponent<{}, () => JSX.Element, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{}>>, {}, {}>;
+
+export { MpAvatarFallback };

package/dist/avatar-fallback.d.ts

@@ -0,0 +1,8 @@
+import * as vue from 'vue';
+
+/**
+ * MpAvatarFallback component used to display fallback icon.
+ */
+declare const MpAvatarFallback: vue.DefineComponent<{}, () => JSX.Element, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{}>>, {}, {}>;
+
+export { MpAvatarFallback };

package/dist/avatar-fallback.js

@@ -0,0 +1,45 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/avatar-fallback.tsx
+var avatar_fallback_exports = {};
+__export(avatar_fallback_exports, {
+  MpAvatarFallback: () => MpAvatarFallback
+});
+module.exports = __toCommonJS(avatar_fallback_exports);
+var import_vue = require("vue");
+var import_vue2 = require("vue");
+var MpAvatarFallback = (0, import_vue2.defineComponent)({
+  name: "MpAvatarFallback",
+  setup() {
+    return () => (0, import_vue.createVNode)("div", null, [(0, import_vue.createVNode)("svg", {
+      "fill": "#ffffff",
+      "viewBox": "0 0 128 128",
+      "role": "img"
+    }, [(0, import_vue.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_vue.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)])]);
+  }
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  MpAvatarFallback
+});

package/dist/avatar-fallback.mjs

@@ -0,0 +1,7 @@
+import {
+  MpAvatarFallback
+} from "./chunk-NKXS73IR.mjs";
+import "./chunk-QZ7VFGWC.mjs";
+export {
+  MpAvatarFallback
+};

package/dist/avatar-group.d.mts

@@ -0,0 +1,54 @@
+import * as vue from 'vue';
+import { AvatarSize } from './modules/avatar.types.mjs';
+import '@mekari/pixel3-utils';
+
+/**
+ * MpAvatarGroup used to combines multiple avatars into a stack.
+ */
+declare const MpAvatarGroup: vue.DefineComponent<{
+    id: {
+        type: vue.PropType<string | undefined>;
+    };
+    size: {
+        type: vue.PropType<AvatarSize | undefined>;
+        default: string;
+    };
+    max: {
+        type: vue.PropType<number | undefined>;
+        default: number;
+    };
+    spacing: {
+        type: vue.PropType<number | undefined>;
+        default: number;
+    };
+    borderColor: {
+        type: vue.PropType<string | undefined>;
+    };
+}, () => JSX.Element, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, "click"[], "click", vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
+    id: {
+        type: vue.PropType<string | undefined>;
+    };
+    size: {
+        type: vue.PropType<AvatarSize | undefined>;
+        default: string;
+    };
+    max: {
+        type: vue.PropType<number | undefined>;
+        default: number;
+    };
+    spacing: {
+        type: vue.PropType<number | undefined>;
+        default: number;
+    };
+    borderColor: {
+        type: vue.PropType<string | undefined>;
+    };
+}>> & {
+    onClick?: ((...args: any[]) => any) | undefined;
+}, {
+    size: AvatarSize | undefined;
+    spacing: number | undefined;
+    max: number | undefined;
+}, {}>;
+
+export { MpAvatarGroup };

package/dist/avatar-group.d.ts

@@ -0,0 +1,54 @@
+import * as vue from 'vue';
+import { AvatarSize } from './modules/avatar.types.js';
+import '@mekari/pixel3-utils';
+
+/**
+ * MpAvatarGroup used to combines multiple avatars into a stack.
+ */
+declare const MpAvatarGroup: vue.DefineComponent<{
+    id: {
+        type: vue.PropType<string | undefined>;
+    };
+    size: {
+        type: vue.PropType<AvatarSize | undefined>;
+        default: string;
+    };
+    max: {
+        type: vue.PropType<number | undefined>;
+        default: number;
+    };
+    spacing: {
+        type: vue.PropType<number | undefined>;
+        default: number;
+    };
+    borderColor: {
+        type: vue.PropType<string | undefined>;
+    };
+}, () => JSX.Element, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, "click"[], "click", vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
+    id: {
+        type: vue.PropType<string | undefined>;
+    };
+    size: {
+        type: vue.PropType<AvatarSize | undefined>;
+        default: string;
+    };
+    max: {
+        type: vue.PropType<number | undefined>;
+        default: number;
+    };
+    spacing: {
+        type: vue.PropType<number | undefined>;
+        default: number;
+    };
+    borderColor: {
+        type: vue.PropType<string | undefined>;
+    };
+}>> & {
+    onClick?: ((...args: any[]) => any) | undefined;
+}, {
+    size: AvatarSize | undefined;
+    spacing: number | undefined;
+    max: number | undefined;
+}, {}>;
+
+export { MpAvatarGroup };

package/dist/avatar-group.js

@@ -0,0 +1,166 @@
+"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-group.tsx
+var avatar_group_exports = {};
+__export(avatar_group_exports, {
+  MpAvatarGroup: () => MpAvatarGroup
+});
+module.exports = __toCommonJS(avatar_group_exports);
+var import_vue6 = require("vue");
+var import_vue7 = require("vue");
+var import_pixel3_utils3 = require("@mekari/pixel3-utils");
+
+// src/modules/avatar.props.ts
+var import_pixel3_utils = require("@mekari/pixel3-utils");
+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 = (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 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");
+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 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_utils2.useId)()}`,
+    onClick: (evt) => emit("click", evt)
+  }));
+  const [avatarGroupProps2] = import_recipes.avatarGroupSlotRecipe.splitVariantProps(context.value);
+  const classes = (0, import_recipes.avatarGroupSlotRecipe)(avatarGroupProps2);
+  return (0, import_vue2.computed)(() => avatarGroupConnect(state.value, send, classes));
+}, "useAvatarGroup");
+
+// src/avatar-excess.tsx
+var import_vue4 = require("vue");
+var import_vue5 = require("vue");
+var MpAvatarExcess = (0, import_vue5.defineComponent)({
+  name: "MpAvatarExcess",
+  setup(_, {
+    slots
+  }) {
+    return () => {
+      var _a;
+      return (0, import_vue4.createVNode)("div", null, [(_a = slots.default) == null ? void 0 : _a.call(slots)]);
+    };
+  }
+});
+
+// src/avatar-group.tsx
+var MpAvatarGroup = (0, import_vue7.defineComponent)({
+  name: "MpAvatarGroup",
+  props: avatarGroupProps,
+  emits: avatarGroupEmits,
+  setup(props, {
+    slots,
+    emit
+  }) {
+    const api = useAvatarGroup(props, emit);
+    const children = (0, import_vue7.computed)(() => (0, import_pixel3_utils3.getChildren)(slots));
+    const count = (0, import_vue7.computed)(() => children.value.length - (props.max || 0));
+    const cloneChildren = (0, import_vue7.computed)(() => (0, import_vue7.computed)(() => children.value.slice(0, props.max)).value.map((vnode, index) => {
+      const overrideProps = (0, import_pixel3_utils3.objectFilterUndefined)({
+        size: props.size,
+        spacing: index === 0 ? 0 : props.spacing,
+        hasBorder: true,
+        borderColor: props.borderColor
+      });
+      return (0, import_vue7.cloneVNode)(vnode, overrideProps);
+    }));
+    return () => (0, import_vue6.createVNode)("div", api.value.rootProps, [cloneChildren.value, count.value > 0 && props.max !== 0 && (0, import_vue6.createVNode)(MpAvatarExcess, api.value.excessProps, {
+      default: () => [`+${count.value}`]
+    })]);
+  }
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  MpAvatarGroup
+});

package/dist/avatar-group.mjs

@@ -0,0 +1,13 @@
+import {
+  MpAvatarGroup
+} from "./chunk-RTYPPBOR.mjs";
+import "./chunk-CY2Z6I23.mjs";
+import "./chunk-ITYXDMOF.mjs";
+import "./chunk-JVROEGO3.mjs";
+import "./chunk-U4MXRXR7.mjs";
+import "./chunk-ZMUFXMG4.mjs";
+import "./chunk-ZK47OSEJ.mjs";
+import "./chunk-QZ7VFGWC.mjs";
+export {
+  MpAvatarGroup
+};

package/dist/avatar-image.d.mts

@@ -0,0 +1,8 @@
+import * as vue from 'vue';
+
+/**
+ * MpAvatarImage component used to display profile image.
+ */
+declare const MpAvatarImage: vue.DefineComponent<{}, () => JSX.Element, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{}>>, {}, {}>;
+
+export { MpAvatarImage };

package/dist/avatar-image.d.ts

@@ -0,0 +1,8 @@
+import * as vue from 'vue';
+
+/**
+ * MpAvatarImage component used to display profile image.
+ */
+declare const MpAvatarImage: vue.DefineComponent<{}, () => JSX.Element, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{}>>, {}, {}>;
+
+export { MpAvatarImage };

package/dist/avatar-image.js

@@ -0,0 +1,37 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/avatar-image.tsx
+var avatar_image_exports = {};
+__export(avatar_image_exports, {
+  MpAvatarImage: () => MpAvatarImage
+});
+module.exports = __toCommonJS(avatar_image_exports);
+var import_vue = require("vue");
+var import_vue2 = require("vue");
+var MpAvatarImage = (0, import_vue2.defineComponent)({
+  name: "MpAvatarImage",
+  setup() {
+    return () => (0, import_vue.createVNode)("img", null, null);
+  }
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  MpAvatarImage
+});

package/dist/avatar-image.mjs

@@ -0,0 +1,7 @@
+import {
+  MpAvatarImage
+} from "./chunk-4VNSI4PL.mjs";
+import "./chunk-QZ7VFGWC.mjs";
+export {
+  MpAvatarImage
+};

package/dist/avatar.d.mts

@@ -0,0 +1,102 @@
+import * as vue from 'vue';
+import { AvatarSize, AvatarVariant, AvatarVariantColor } from './modules/avatar.types.mjs';
+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 };