@mekari/pixel3-avatar 0.0.0

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

@@ -0,0 +1,71 @@
+import { AvatarSize, AvatarVariant, AvatarVariantColor } from './avatar.types.mjs';
+import { PropType } from 'vue';
+import '@mekari/pixel3-utils';
+
+declare const avatarProps: {
+    id: {
+        type: PropType<string | undefined>;
+    };
+    name: {
+        type: PropType<string | undefined>;
+        default: string;
+    };
+    size: {
+        type: PropType<AvatarSize | undefined>;
+        default: string;
+    };
+    variant: {
+        type: PropType<AvatarVariant | undefined>;
+        default: string;
+    };
+    variantColor: {
+        type: PropType<AvatarVariantColor | undefined>;
+    };
+    hasBorder: {
+        type: PropType<boolean | undefined>;
+        default: boolean;
+    };
+    borderColor: {
+        type: PropType<string | undefined>;
+    };
+    src: {
+        type: PropType<string | undefined>;
+    };
+    icon: {
+        type: PropType<string | undefined>;
+    };
+    iconVariant: {
+        type: PropType<string | undefined>;
+    };
+    iconColor: {
+        type: PropType<string | undefined>;
+    };
+    spacing: {
+        type: PropType<number | undefined>;
+        default: number;
+    };
+};
+declare const avatarGroupProps: {
+    id: {
+        type: PropType<string | undefined>;
+    };
+    size: {
+        type: PropType<AvatarSize | undefined>;
+        default: string;
+    };
+    max: {
+        type: PropType<number | undefined>;
+        default: number;
+    };
+    spacing: {
+        type: PropType<number | undefined>;
+        default: number;
+    };
+    borderColor: {
+        type: PropType<string | undefined>;
+    };
+};
+declare const avatarEmits: "click"[];
+declare const avatarGroupEmits: "click"[];
+
+export { avatarEmits, avatarGroupEmits, avatarGroupProps, avatarProps };

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

@@ -0,0 +1,71 @@
+import { AvatarSize, AvatarVariant, AvatarVariantColor } from './avatar.types.js';
+import { PropType } from 'vue';
+import '@mekari/pixel3-utils';
+
+declare const avatarProps: {
+    id: {
+        type: PropType<string | undefined>;
+    };
+    name: {
+        type: PropType<string | undefined>;
+        default: string;
+    };
+    size: {
+        type: PropType<AvatarSize | undefined>;
+        default: string;
+    };
+    variant: {
+        type: PropType<AvatarVariant | undefined>;
+        default: string;
+    };
+    variantColor: {
+        type: PropType<AvatarVariantColor | undefined>;
+    };
+    hasBorder: {
+        type: PropType<boolean | undefined>;
+        default: boolean;
+    };
+    borderColor: {
+        type: PropType<string | undefined>;
+    };
+    src: {
+        type: PropType<string | undefined>;
+    };
+    icon: {
+        type: PropType<string | undefined>;
+    };
+    iconVariant: {
+        type: PropType<string | undefined>;
+    };
+    iconColor: {
+        type: PropType<string | undefined>;
+    };
+    spacing: {
+        type: PropType<number | undefined>;
+        default: number;
+    };
+};
+declare const avatarGroupProps: {
+    id: {
+        type: PropType<string | undefined>;
+    };
+    size: {
+        type: PropType<AvatarSize | undefined>;
+        default: string;
+    };
+    max: {
+        type: PropType<number | undefined>;
+        default: number;
+    };
+    spacing: {
+        type: PropType<number | undefined>;
+        default: number;
+    };
+    borderColor: {
+        type: PropType<string | undefined>;
+    };
+};
+declare const avatarEmits: "click"[];
+declare const avatarGroupEmits: "click"[];
+
+export { avatarEmits, avatarGroupEmits, avatarGroupProps, avatarProps };

package/dist/modules/avatar.props.js

@@ -0,0 +1,101 @@
+"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/modules/avatar.props.ts
+var avatar_props_exports = {};
+__export(avatar_props_exports, {
+  avatarEmits: () => avatarEmits,
+  avatarGroupEmits: () => avatarGroupEmits,
+  avatarGroupProps: () => avatarGroupProps,
+  avatarProps: () => avatarProps
+});
+module.exports = __toCommonJS(avatar_props_exports);
+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 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"]);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  avatarEmits,
+  avatarGroupEmits,
+  avatarGroupProps,
+  avatarProps
+});

package/dist/modules/avatar.props.mjs

@@ -0,0 +1,13 @@
+import {
+  avatarEmits,
+  avatarGroupEmits,
+  avatarGroupProps,
+  avatarProps
+} from "../chunk-ITYXDMOF.mjs";
+import "../chunk-QZ7VFGWC.mjs";
+export {
+  avatarEmits,
+  avatarGroupEmits,
+  avatarGroupProps,
+  avatarProps
+};

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

@@ -0,0 +1,65 @@
+import { Optional, PropTypes } from '@mekari/pixel3-utils';
+
+/**
+ * Exported avatar types.
+ */
+
+type AvatarVariant = 'square' | 'circle';
+type AvatarVariantColor = 'gray' | 'sky' | 'teal' | 'violet' | 'amber' | 'rose' | 'stone' | 'lime' | 'pink';
+type AvatarSize = 'sm' | 'md' | 'lg' | 'xl';
+interface AvatarProps {
+    id?: string;
+    name?: string;
+    size?: AvatarSize;
+    variant?: AvatarVariant;
+    variantColor?: AvatarVariantColor;
+    hasBorder?: boolean;
+    borderColor?: string;
+    src?: string;
+    icon?: string;
+    iconVariant?: string;
+    iconColor?: string;
+    spacing?: number;
+    onClick?: (evt: MouseEvent | TouchEvent) => void;
+}
+interface AvatarGroupProps {
+    id?: string;
+    size?: AvatarSize;
+    max?: number;
+    spacing?: number;
+    borderColor?: string;
+    onClick?: (evt: MouseEvent | TouchEvent) => void;
+}
+type AvatarDefinedContext = Optional<AvatarProps, 'id'>;
+type AvatarGroupDefinedContext = Optional<AvatarGroupProps, 'id'>;
+interface AvatarApiMachine<T extends PropTypes = PropTypes> {
+    name?: string;
+    src?: string;
+    icon?: string;
+    isLoaded?: boolean;
+    rootProps?: T['element'];
+    fallbackProps?: T['element'];
+    imageProps?: T['img'];
+    iconProps?: T['img'];
+}
+interface AvatarGroupApiMachine<T extends PropTypes = PropTypes> {
+    rootProps?: T['element'];
+    excessProps?: T['element'];
+}
+interface AvatarState {
+    matches(value: string): boolean;
+    context: AvatarProps;
+}
+interface AvatarGroupState {
+    context: AvatarGroupProps;
+}
+type AvatarSend = CallableFunction;
+interface AvatarClasses {
+    root?: string;
+    fallback?: string;
+    image?: string;
+    icon?: string;
+    excess?: string;
+}
+
+export { AvatarApiMachine, AvatarClasses, AvatarDefinedContext, AvatarGroupApiMachine, AvatarGroupDefinedContext, AvatarGroupProps, AvatarGroupState, AvatarProps, AvatarSend, AvatarSize, AvatarState, AvatarVariant, AvatarVariantColor };

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

@@ -0,0 +1,65 @@
+import { Optional, PropTypes } from '@mekari/pixel3-utils';
+
+/**
+ * Exported avatar types.
+ */
+
+type AvatarVariant = 'square' | 'circle';
+type AvatarVariantColor = 'gray' | 'sky' | 'teal' | 'violet' | 'amber' | 'rose' | 'stone' | 'lime' | 'pink';
+type AvatarSize = 'sm' | 'md' | 'lg' | 'xl';
+interface AvatarProps {
+    id?: string;
+    name?: string;
+    size?: AvatarSize;
+    variant?: AvatarVariant;
+    variantColor?: AvatarVariantColor;
+    hasBorder?: boolean;
+    borderColor?: string;
+    src?: string;
+    icon?: string;
+    iconVariant?: string;
+    iconColor?: string;
+    spacing?: number;
+    onClick?: (evt: MouseEvent | TouchEvent) => void;
+}
+interface AvatarGroupProps {
+    id?: string;
+    size?: AvatarSize;
+    max?: number;
+    spacing?: number;
+    borderColor?: string;
+    onClick?: (evt: MouseEvent | TouchEvent) => void;
+}
+type AvatarDefinedContext = Optional<AvatarProps, 'id'>;
+type AvatarGroupDefinedContext = Optional<AvatarGroupProps, 'id'>;
+interface AvatarApiMachine<T extends PropTypes = PropTypes> {
+    name?: string;
+    src?: string;
+    icon?: string;
+    isLoaded?: boolean;
+    rootProps?: T['element'];
+    fallbackProps?: T['element'];
+    imageProps?: T['img'];
+    iconProps?: T['img'];
+}
+interface AvatarGroupApiMachine<T extends PropTypes = PropTypes> {
+    rootProps?: T['element'];
+    excessProps?: T['element'];
+}
+interface AvatarState {
+    matches(value: string): boolean;
+    context: AvatarProps;
+}
+interface AvatarGroupState {
+    context: AvatarGroupProps;
+}
+type AvatarSend = CallableFunction;
+interface AvatarClasses {
+    root?: string;
+    fallback?: string;
+    image?: string;
+    icon?: string;
+    excess?: string;
+}
+
+export { AvatarApiMachine, AvatarClasses, AvatarDefinedContext, AvatarGroupApiMachine, AvatarGroupDefinedContext, AvatarGroupProps, AvatarGroupState, AvatarProps, AvatarSend, AvatarSize, AvatarState, AvatarVariant, AvatarVariantColor };

package/dist/modules/avatar.types.js

@@ -0,0 +1,18 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+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.types.ts
+var avatar_types_exports = {};
+module.exports = __toCommonJS(avatar_types_exports);

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

@@ -0,0 +1,8 @@
+/**
+ * Exported avatar utils.
+ */
+declare const getInitial: (value: string) => string;
+declare const getColor: () => string;
+declare const isColorInList: (value: string) => boolean;
+
+export { getColor, getInitial, isColorInList };

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

@@ -0,0 +1,8 @@
+/**
+ * Exported avatar utils.
+ */
+declare const getInitial: (value: string) => string;
+declare const getColor: () => string;
+declare const isColorInList: (value: string) => boolean;
+
+export { getColor, getInitial, isColorInList };

package/dist/modules/avatar.utils.js

@@ -0,0 +1,49 @@
+"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.utils.ts
+var avatar_utils_exports = {};
+__export(avatar_utils_exports, {
+  getColor: () => getColor,
+  getInitial: () => getInitial,
+  isColorInList: () => isColorInList
+});
+module.exports = __toCommonJS(avatar_utils_exports);
+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");
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  getColor,
+  getInitial,
+  isColorInList
+});

package/dist/modules/avatar.utils.mjs

@@ -0,0 +1,11 @@
+import {
+  getColor,
+  getInitial,
+  isColorInList
+} from "../chunk-ZK47OSEJ.mjs";
+import "../chunk-QZ7VFGWC.mjs";
+export {
+  getColor,
+  getInitial,
+  isColorInList
+};

package/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "@mekari/pixel3-avatar",
+  "description": "Mekari Pixel 3 | Avatar component is used to display profile image, initial or fallback icon",
+  "version": "0.0.0",
+  "license": "LGPL-3.0",
+  "author": "Dirga Prakesha <dirga.prakesha@mekari.com>",
+  "sideEffects": false,
+  "main": "dist/index.js",
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "@xstate/vue": "2.0.0",
+    "xstate": "4.35.0",
+    "@mekari/pixel3-icon": "0.0.0",
+    "@mekari/pixel3-styled-system": "0.0.0",
+    "@mekari/pixel3-utils": "0.0.0"
+  },
+  "peerDependencies": {
+    "vue": "^3.3.7"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "devDependencies": {
+    "vue": "^3.3.7",
+    "@pandacss/dev": "0.10.0"
+  },
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "require": "./dist/index.js",
+      "default": "./dist/index.mjs"
+    }
+  },
+  "scripts": {
+    "clean": "rimraf dist .turbo",
+    "build": "tsup && pnpm build:types",
+    "build:css": "pnpm build && pnpm css:gen",
+    "build:fast": "tsup",
+    "build:types": "tsup src --dts-only",
+    "build:external": "tsup src/index.tsx --external @acme-org/styled-system",
+    "types:check": "tsc --noEmit",
+    "css:gen": "panda cssgen --outfile dist/styles.css",
+    "replace-config": "clean-package",
+    "restore-config": "clean-package restore"
+  }
+}