open-avatar 0.1.0

package/dist/react/Avatar.d.ts

@@ -0,0 +1,9 @@
+import { ImgHTMLAttributes } from 'react';
+import { AvatarOptions } from '../core/types';
+
+export interface AvatarProps extends AvatarOptions, Omit<ImgHTMLAttributes<HTMLImageElement>, "src" | "width" | "height"> {
+    hash: string;
+    size?: number;
+}
+export declare function Avatar({ hash, shape, size, title, alt, ...imageProps }: AvatarProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Avatar.d.ts.map

package/dist/react/Avatar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../src/react/Avatar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE/C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAanD,MAAM,WAAW,WACf,SAAQ,aAAa,EACnB,IAAI,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,CAAC;IACvE,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,wBAAgB,MAAM,CAAC,EACrB,IAAI,EACJ,KAAK,EACL,IAAI,EACJ,KAAK,EACL,GAAG,EACH,GAAG,UAAU,EACd,EAAE,WAAW,2CAcb"}

package/dist/react/AvatarGrid.d.ts

@@ -0,0 +1,11 @@
+import { HTMLAttributes } from 'react';
+import { AvatarOptions, AvatarResult } from '../core/types';
+
+export interface AvatarGridProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+    count?: number;
+    size?: number;
+    shape?: AvatarOptions["shape"];
+    onBatchChange?: (avatars: AvatarResult[]) => void;
+}
+export declare function AvatarGrid({ count, size, shape, className, onBatchChange, ...gridProps }: AvatarGridProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=AvatarGrid.d.ts.map

package/dist/react/AvatarGrid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AvatarGrid.d.ts","sourceRoot":"","sources":["../../src/react/AvatarGrid.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,KAAK,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AA0BjE,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC;IACvF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IAC/B,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,YAAY,EAAE,KAAK,IAAI,CAAC;CACnD;AAED,wBAAgB,UAAU,CAAC,EACzB,KAAU,EACV,IAAS,EACT,KAAK,EACL,SAAS,EACT,aAAa,EACb,GAAG,SAAS,EACb,EAAE,eAAe,2CAgEjB"}

package/dist/react/index.d.ts

@@ -0,0 +1,5 @@
+export { Avatar } from './Avatar';
+export type { AvatarProps } from './Avatar';
+export { AvatarGrid } from './AvatarGrid';
+export type { AvatarGridProps } from './AvatarGrid';
+//# sourceMappingURL=index.d.ts.map

package/dist/react/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/react/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAC5C,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC"}

package/dist/react.d.ts

@@ -0,0 +1,2 @@
+export * from './react/index';
+//# sourceMappingURL=react.d.ts.map

package/dist/react.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"react.d.ts","sourceRoot":"","sources":["../src/react.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC"}

package/dist/react.js

@@ -0,0 +1,98 @@
+import { jsx as f, jsxs as x } from "react/jsx-runtime";
+import { generateAvatarUrl as I, generateRandomAvatars as T, MAX_RANDOM_AVATAR_BATCH as b } from "./index.js";
+import { useRef as l, useState as E, useEffect as A, useCallback as R } from "react";
+const D = 96, F = 1024;
+function G(t) {
+  return t === void 0 || !Number.isFinite(t) || t <= 0 ? D : Math.min(Math.max(Math.floor(t), 1), F);
+}
+function y({
+  hash: t,
+  shape: u,
+  size: o,
+  title: s,
+  alt: e,
+  ...m
+}) {
+  const r = G(o), c = s ?? (e || t), n = e ?? s ?? t;
+  return /* @__PURE__ */ f(
+    "img",
+    {
+      ...m,
+      src: I(t, { shape: u, size: r, title: c }),
+      width: r,
+      height: r,
+      alt: n
+    }
+  );
+}
+const N = 96, Z = 1024;
+function d(t, u) {
+  return Array.from(T(t, u));
+}
+function U(t) {
+  return !Number.isFinite(t) || t <= 0 ? 0 : Math.min(Math.floor(t), b);
+}
+function V(t) {
+  return !Number.isFinite(t) || t <= 0 ? N : Math.min(Math.max(Math.floor(t), 1), Z);
+}
+function L({
+  count: t = 10,
+  size: u = 96,
+  shape: o,
+  className: s,
+  onBatchChange: e,
+  ...m
+}) {
+  const r = U(t), c = V(u), n = l(e), [v, M] = E(
+    () => d(r, { shape: o })
+  ), S = l(v), _ = l({ count: r, shape: o });
+  A(() => {
+    n.current = e;
+  }, [e]);
+  const z = R(() => {
+    var a;
+    const i = d(r, { shape: o });
+    M(i), (a = n.current) == null || a.call(n, i);
+  }, [r, o]);
+  return A(() => {
+    var i;
+    (i = n.current) == null || i.call(n, S.current);
+  }, []), A(() => {
+    var p;
+    const i = _.current;
+    if (i.count === r && i.shape === o)
+      return;
+    _.current = { count: r, shape: o };
+    const a = d(r, { shape: o });
+    M(a), (p = n.current) == null || p.call(n, a);
+  }, [r, o]), /* @__PURE__ */ x("div", { ...m, className: s, children: [
+    /* @__PURE__ */ x("button", { type: "button", onClick: z, children: [
+      "Random ",
+      r
+    ] }),
+    /* @__PURE__ */ f(
+      "div",
+      {
+        style: {
+          display: "grid",
+          gap: 8,
+          gridTemplateColumns: `repeat(auto-fill, minmax(${c}px, 1fr))`
+        },
+        children: v.map((i) => /* @__PURE__ */ f(
+          y,
+          {
+            hash: i.hash,
+            shape: o ?? i.shape,
+            size: c,
+            alt: ""
+          },
+          i.hash
+        ))
+      }
+    )
+  ] });
+}
+export {
+  y as Avatar,
+  L as AvatarGrid
+};

package/dist/vue/Avatar.d.ts

@@ -0,0 +1,58 @@
+import { PropType } from 'vue';
+import { AvatarOptions } from '../core/types';
+
+export interface AvatarProps extends AvatarOptions {
+    hash: string;
+    alt?: string;
+}
+export declare const Avatar: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    hash: {
+        type: StringConstructor;
+        required: true;
+    };
+    shape: {
+        type: PropType<AvatarOptions["shape"]>;
+        default: string;
+    };
+    size: {
+        type: NumberConstructor;
+        default: number;
+    };
+    title: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    alt: {
+        type: StringConstructor;
+        default: undefined;
+    };
+}>, () => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    hash: {
+        type: StringConstructor;
+        required: true;
+    };
+    shape: {
+        type: PropType<AvatarOptions["shape"]>;
+        default: string;
+    };
+    size: {
+        type: NumberConstructor;
+        default: number;
+    };
+    title: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    alt: {
+        type: StringConstructor;
+        default: undefined;
+    };
+}>> & Readonly<{}>, {
+    size: number;
+    shape: import('..').AvatarShape | undefined;
+    alt: string;
+    title: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+//# sourceMappingURL=Avatar.d.ts.map

package/dist/vue/Avatar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../src/vue/Avatar.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,KAAK,CAAC;AAEpC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAanD,MAAM,WAAW,WAAY,SAAQ,aAAa;IAChD,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;CACd;AAED,eAAO,MAAM,MAAM;;;;;;cASG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;;;;;;;;;;;;;;;;;;;;;;;cAAhC,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;;;;;;;;;;;;;;;;;;;;4EAmCpD,CAAC"}

package/dist/vue/AvatarGrid.d.ts

@@ -0,0 +1,46 @@
+import { PropType } from 'vue';
+import { AvatarOptions, AvatarResult } from '../core/types';
+
+export interface AvatarGridProps {
+    count?: number;
+    size?: number;
+    shape?: AvatarOptions["shape"];
+}
+export declare const AvatarGrid: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    count: {
+        type: NumberConstructor;
+        default: number;
+    };
+    size: {
+        type: NumberConstructor;
+        default: number;
+    };
+    shape: {
+        type: PropType<AvatarOptions["shape"]>;
+        default: string;
+    };
+}>, () => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    batchChange: (_avatars: AvatarResult[]) => true;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    count: {
+        type: NumberConstructor;
+        default: number;
+    };
+    size: {
+        type: NumberConstructor;
+        default: number;
+    };
+    shape: {
+        type: PropType<AvatarOptions["shape"]>;
+        default: string;
+    };
+}>> & Readonly<{
+    onBatchChange?: ((_avatars: AvatarResult[]) => any) | undefined;
+}>, {
+    size: number;
+    shape: import('..').AvatarShape | undefined;
+    count: number;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+//# sourceMappingURL=AvatarGrid.d.ts.map

package/dist/vue/AvatarGrid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AvatarGrid.d.ts","sourceRoot":"","sources":["../../src/vue/AvatarGrid.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,KAAK,CAAC;AAEpC,OAAO,KAAK,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AA0BjE,MAAM,WAAW,eAAe;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;CAChC;AAED,eAAO,MAAM,UAAU;;;;;;;;;;cAYD,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;;;;;;4BAK1B,YAAY,EAAE;;;;;;;;;;;cALpB,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;;;;;;;;;4EAoDpD,CAAC"}

package/dist/vue/index.d.ts

@@ -0,0 +1,5 @@
+export { Avatar } from './Avatar';
+export type { AvatarProps } from './Avatar';
+export { AvatarGrid } from './AvatarGrid';
+export type { AvatarGridProps } from './AvatarGrid';
+//# sourceMappingURL=index.d.ts.map

package/dist/vue/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/vue/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAC5C,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC"}

package/dist/vue.d.ts

@@ -0,0 +1,2 @@
+export * from './vue/index';
+//# sourceMappingURL=vue.d.ts.map

package/dist/vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"vue.d.ts","sourceRoot":"","sources":["../src/vue.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC"}

package/dist/vue.js

@@ -0,0 +1,116 @@
+import { defineComponent as s, h as i, computed as o, ref as c, watch as A } from "vue";
+import { generateAvatarUrl as f, MAX_RANDOM_AVATAR_BATCH as v, generateRandomAvatars as g } from "./index.js";
+const m = 96, p = 1024;
+function y(t) {
+  return t === void 0 || !Number.isFinite(t) || t <= 0 ? m : Math.min(Math.max(Math.floor(t), 1), p);
+}
+const S = s({
+  name: "OpenAvatar",
+  inheritAttrs: !1,
+  props: {
+    hash: {
+      type: String,
+      required: !0
+    },
+    shape: {
+      type: String,
+      default: "rounded-square"
+    },
+    size: {
+      type: Number,
+      default: m
+    },
+    title: {
+      type: String,
+      default: void 0
+    },
+    alt: {
+      type: String,
+      default: void 0
+    }
+  },
+  setup(t, { attrs: a }) {
+    return () => {
+      const r = y(t.size), n = t.title ?? t.alt ?? t.hash, u = t.alt ?? t.title ?? t.hash;
+      return i("img", {
+        ...a,
+        src: f(t.hash, {
+          shape: t.shape,
+          size: r,
+          title: n
+        }),
+        width: r,
+        height: r,
+        alt: u
+      });
+    };
+  }
+}), d = 96, M = 1024;
+function _(t, a) {
+  return Array.from(g(t, a));
+}
+function b(t) {
+  return !Number.isFinite(t) || t <= 0 ? 0 : Math.min(Math.floor(t), v);
+}
+function z(t) {
+  return !Number.isFinite(t) || t <= 0 ? d : Math.min(Math.max(Math.floor(t), 1), M);
+}
+const T = s({
+  name: "OpenAvatarGrid",
+  props: {
+    count: {
+      type: Number,
+      default: 10
+    },
+    size: {
+      type: Number,
+      default: d
+    },
+    shape: {
+      type: String,
+      default: "rounded-square"
+    }
+  },
+  emits: {
+    batchChange: (t) => !0
+  },
+  setup(t, { attrs: a, emit: r }) {
+    const n = o(() => b(t.count)), u = o(() => z(t.size)), h = c([]), l = () => {
+      const e = _(n.value, { shape: t.shape });
+      h.value = e, r("batchChange", e);
+    };
+    return A([n, () => t.shape], l, { immediate: !0 }), () => i("div", a, [
+      i(
+        "button",
+        {
+          type: "button",
+          onClick: l
+        },
+        `Random ${n.value}`
+      ),
+      i(
+        "div",
+        {
+          style: {
+            display: "grid",
+            gap: "8px",
+            gridTemplateColumns: `repeat(auto-fill, minmax(${u.value}px, 1fr))`
+          }
+        },
+        h.value.map(
+          (e) => i(S, {
+            key: e.hash,
+            hash: e.hash,
+            shape: t.shape ?? e.shape,
+            size: u.value,
+            alt: ""
+          })
+        )
+      )
+    ]);
+  }
+});
+export {
+  S as Avatar,
+  T as AvatarGrid
+};

package/package.json

@@ -0,0 +1,88 @@
+{
+  "name": "open-avatar",
+  "version": "0.1.0",
+  "description": "Deterministic SVG avatar generator with React and Vue components.",
+  "license": "MIT",
+  "type": "module",
+  "author": "SMICES",
+  "homepage": "https://github.com/smices/open-avatar#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/smices/open-avatar.git"
+  },
+  "bugs": {
+    "url": "https://github.com/smices/open-avatar/issues"
+  },
+  "keywords": [
+    "avatar",
+    "svg",
+    "generator",
+    "react",
+    "vue",
+    "dicebear",
+    "openavatar"
+  ],
+  "sideEffects": false,
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE",
+    "THIRD_PARTY_NOTICES.md"
+  ],
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "scripts": {
+    "dev": "vite --host 0.0.0.0",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "build": "tsc -p tsconfig.json --noEmit && vite build",
+    "prepublishOnly": "npm test && npm run build",
+    "preview": "vite preview --host 0.0.0.0"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./react": {
+      "types": "./dist/react.d.ts",
+      "import": "./dist/react.js"
+    },
+    "./vue": {
+      "types": "./dist/vue.d.ts",
+      "import": "./dist/vue.js"
+    }
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "vue": ">=3"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    },
+    "vue": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@testing-library/react": "^15.0.0",
+    "@vitejs/plugin-react": "^4.0.0",
+    "@vitejs/plugin-vue": "^5.0.0",
+    "@vue/test-utils": "^2.4.0",
+    "jsdom": "^24.1.0",
+    "lucide-react": "^1.16.0",
+    "react": "^18.3.0",
+    "react-dom": "^18.3.0",
+    "typescript": "^5.5.0",
+    "vite": "^5.4.0",
+    "vite-plugin-dts": "^3.9.0",
+    "vitest": "^2.0.0",
+    "vue": "^3.4.0"
+  },
+  "dependencies": {
+    "@dicebear/avataaars": "^9.2.2",
+    "@dicebear/core": "^9.2.2"
+  }
+}