@illlustrations/avatars 1.0.0

package/dist/internal/style.js

@@ -0,0 +1,71 @@
+import { colorRoles, slots } from '../core/types.js';
+const compiled = new WeakSet();
+const identifier = /^[a-z][a-z0-9-]*$/;
+export const isColor = (value) => typeof value === 'string' && /^(#[\da-f]{3}|#[\da-f]{4}|#[\da-f]{6}|#[\da-f]{8}|transparent)$/i.test(value);
+export const isRoleColor = (value) => value === 'original' || isColor(value);
+const own = (object, key) => Object.prototype.hasOwnProperty.call(object, key);
+export function validateSelections(style, selections) {
+    for (const slot of slots) {
+        const id = selections[slot];
+        if (['face', 'facialHair', 'accessories'].includes(slot) && id === 'none')
+            continue;
+        if (!style.parts[slot].some(part => part.id === id))
+            throw new Error(`Unknown ${slot} part: ${id}`);
+    }
+    for (const { first, second } of style.incompatible ?? []) {
+        if (selections[first.slot] === first.id && selections[second.slot] === second.id) {
+            throw new Error(`Incompatible parts: ${first.slot}/${first.id} and ${second.slot}/${second.id}`);
+        }
+    }
+}
+function freeze(value) {
+    Object.freeze(value);
+    for (const child of Object.values(value))
+        if (child && typeof child === 'object' && !Object.isFrozen(child))
+            freeze(child);
+}
+/** Internal build output loader. Not a public arbitrary-SVG authoring API. */
+export function defineStyle(definition) {
+    const style = JSON.parse(JSON.stringify(definition));
+    if (!identifier.test(style.id) || !style.version)
+        throw new Error('Invalid style identity');
+    for (const slot of slots) {
+        const ids = new Set();
+        for (const part of style.parts[slot]) {
+            if (!identifier.test(part.id) || part.id === 'none' || ids.has(part.id))
+                throw new Error(`Invalid or duplicate part: ${slot}/${part.id}`);
+            ids.add(part.id);
+            if (!Number.isFinite(part.zIndex))
+                throw new Error('Invalid part layer order');
+            if (!part.svg.startsWith('<svg ') || !part.svg.endsWith('</svg>'))
+                throw new Error('Expected compiled SVG');
+            const root = part.svg.match(/^<svg\b([^>]*)>/)?.[1] ?? '';
+            const nativeWidth = Number(root.match(/\swidth="([\d.]+)"/)?.[1]);
+            const nativeHeight = Number(root.match(/\sheight="([\d.]+)"/)?.[1]);
+            if (![nativeWidth, nativeHeight].every(value => Number.isFinite(value) && value > 0))
+                throw new Error('Expected compiled native SVG dimensions');
+            const { x, y, width, height } = part.position;
+            if (![x, y, width, height].every(Number.isFinite) || width <= 0 || height <= 0)
+                throw new Error('Invalid part position');
+        }
+    }
+    for (const role of colorRoles)
+        if (!isRoleColor(style.defaults.colors[role]))
+            throw new Error(`Invalid default ${role} color`);
+    validateSelections(style, style.defaults.selections);
+    if (!own(style.seedPools, style.defaultSeedPool))
+        throw new Error('Missing default seed pool');
+    for (const [id, pool] of Object.entries(style.seedPools)) {
+        if (!identifier.test(id) || pool.length === 0)
+            throw new Error('Invalid seed pool');
+        for (const selections of pool)
+            validateSelections(style, selections);
+    }
+    freeze(style);
+    compiled.add(style);
+    return style;
+}
+export function assertStyle(style) {
+    if (!style || !compiled.has(style))
+        throw new Error('Use a compiled style import; arbitrary SVG input is not supported');
+}

package/dist/react/index.d.ts

@@ -0,0 +1,8 @@
+import type { SVGProps } from 'react';
+import type { AvatarOptions, AvatarStyle } from '../core/types.js';
+export type { AvatarOptions, AvatarStyle } from '../core/types.js';
+export type AvatarProps = AvatarOptions & Omit<SVGProps<SVGSVGElement>, keyof AvatarOptions | 'children' | 'dangerouslySetInnerHTML' | 'title' | 'viewBox' | 'width' | 'height'> & {
+    assets: AvatarStyle;
+    title?: string;
+};
+export declare function Avatar({ assets, theme, seed, seedPool, selections, colors, background, size, shape, title, style, ...props }: AvatarProps): import("react").JSX.Element;

package/dist/react/index.js

@@ -0,0 +1,15 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useId } from 'react';
+import { createAvatar } from '../core/index.js';
+import { escapeXml, renderContents } from '../internal/render.js';
+export function Avatar({ assets, theme, seed, seedPool, selections, colors, background, size = 64, shape, title, style, ...props }) {
+    const reactId = useId();
+    // Hex encoding is injective and works with both React 18 and 19's useId formats.
+    const prefix = `avatar-${Array.from(reactId, char => char.codePointAt(0).toString(16)).join('-')}`;
+    const state = createAvatar(assets, { theme, seed, seedPool, selections, colors, background, size, shape }).toJSON();
+    const labelled = Boolean(props['aria-label'] || props['aria-labelledby'] || title);
+    const titleMarkup = title ? `<title id="${prefix}-title">${escapeXml(title)}</title>` : '';
+    const variables = Object.fromEntries(Object.entries(state.colors).filter(([, value]) => value !== 'original').map(([role, value]) => [`--avatar-${role}`, value]));
+    return _jsx("svg", { ...props, xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", viewBox: "0 0 600 600", width: size, height: size, role: props.role ?? (labelled ? 'img' : undefined), "aria-hidden": props['aria-hidden'] ?? (labelled ? undefined : true), "aria-labelledby": props['aria-labelledby'] ?? (title && !props['aria-label'] ? `${prefix}-title` : undefined), focusable: props.focusable ?? false, style: { ...variables, ...style }, dangerouslySetInnerHTML: { __html: titleMarkup + renderContents(assets, state, prefix, true) } });
+}

package/dist/styles/croods-presets.json

@@ -0,0 +1,530 @@
+[
+  {
+    "id": "croods-001",
+    "schemaVersion": 1,
+    "style": "croods",
+    "styleVersion": "1.0.0",
+    "selections": {
+      "upperBody": "blazer",
+      "head": "afro-1",
+      "face": "drool",
+      "facialHair": "beard",
+      "accessories": "glass"
+    },
+    "colors": {
+      "hair": "original",
+      "skin": "original",
+      "clothing": "original",
+      "stroke": "original"
+    },
+    "background": "#FFDAA5",
+    "size": 600,
+    "shape": "rounded"
+  },
+  {
+    "id": "croods-002",
+    "schemaVersion": 1,
+    "style": "croods",
+    "styleVersion": "1.0.0",
+    "selections": {
+      "upperBody": "hoodie-1",
+      "head": "afro-2",
+      "face": "drool-2",
+      "facialHair": "none",
+      "accessories": "none"
+    },
+    "colors": {
+      "hair": "original",
+      "skin": "original",
+      "clothing": "original",
+      "stroke": "original"
+    },
+    "background": "#F2F0EE",
+    "size": 600,
+    "shape": "rounded"
+  },
+  {
+    "id": "croods-003",
+    "schemaVersion": 1,
+    "style": "croods",
+    "styleVersion": "1.0.0",
+    "selections": {
+      "upperBody": "shirt-1",
+      "head": "bangs",
+      "face": "happy",
+      "facialHair": "none",
+      "accessories": "none"
+    },
+    "colors": {
+      "hair": "original",
+      "skin": "original",
+      "clothing": "original",
+      "stroke": "original"
+    },
+    "background": "#EDEDFF",
+    "size": 600,
+    "shape": "rounded"
+  },
+  {
+    "id": "croods-004",
+    "schemaVersion": 1,
+    "style": "croods",
+    "styleVersion": "1.0.0",
+    "selections": {
+      "upperBody": "t-shirt-1",
+      "head": "bowl-cut",
+      "face": "normal",
+      "facialHair": "none",
+      "accessories": "glass"
+    },
+    "colors": {
+      "hair": "original",
+      "skin": "original",
+      "clothing": "original",
+      "stroke": "original"
+    },
+    "background": "#9BF1D9",
+    "size": 600,
+    "shape": "rounded"
+  },
+  {
+    "id": "croods-005",
+    "schemaVersion": 1,
+    "style": "croods",
+    "styleVersion": "1.0.0",
+    "selections": {
+      "upperBody": "t-shirt-bag",
+      "head": "braid-2",
+      "face": "open-mouth-1",
+      "facialHair": "moustache",
+      "accessories": "none"
+    },
+    "colors": {
+      "hair": "original",
+      "skin": "original",
+      "clothing": "original",
+      "stroke": "original"
+    },
+    "background": "#FFE900",
+    "size": 600,
+    "shape": "rounded"
+  },
+  {
+    "id": "croods-006",
+    "schemaVersion": 1,
+    "style": "croods",
+    "styleVersion": "1.0.0",
+    "selections": {
+      "upperBody": "blazer",
+      "head": "bun-1",
+      "face": "sad",
+      "facialHair": "none",
+      "accessories": "none"
+    },
+    "colors": {
+      "hair": "original",
+      "skin": "original",
+      "clothing": "original",
+      "stroke": "original"
+    },
+    "background": "#FFDAA5",
+    "size": 600,
+    "shape": "rounded"
+  },
+  {
+    "id": "croods-007",
+    "schemaVersion": 1,
+    "style": "croods",
+    "styleVersion": "1.0.0",
+    "selections": {
+      "upperBody": "hoodie-1",
+      "head": "bun",
+      "face": "drool",
+      "facialHair": "none",
+      "accessories": "glass"
+    },
+    "colors": {
+      "hair": "original",
+      "skin": "original",
+      "clothing": "original",
+      "stroke": "original"
+    },
+    "background": "#F2F0EE",
+    "size": 600,
+    "shape": "rounded"
+  },
+  {
+    "id": "croods-008",
+    "schemaVersion": 1,
+    "style": "croods",
+    "styleVersion": "1.0.0",
+    "selections": {
+      "upperBody": "shirt-1",
+      "head": "default",
+      "face": "drool-2",
+      "facialHair": "none",
+      "accessories": "none"
+    },
+    "colors": {
+      "hair": "original",
+      "skin": "original",
+      "clothing": "original",
+      "stroke": "original"
+    },
+    "background": "#EDEDFF",
+    "size": 600,
+    "shape": "rounded"
+  },
+  {
+    "id": "croods-009",
+    "schemaVersion": 1,
+    "style": "croods",
+    "styleVersion": "1.0.0",
+    "selections": {
+      "upperBody": "t-shirt-1",
+      "head": "long-hair",
+      "face": "happy",
+      "facialHair": "stubble",
+      "accessories": "none"
+    },
+    "colors": {
+      "hair": "original",
+      "skin": "original",
+      "clothing": "original",
+      "stroke": "original"
+    },
+    "background": "#9BF1D9",
+    "size": 600,
+    "shape": "rounded"
+  },
+  {
+    "id": "croods-010",
+    "schemaVersion": 1,
+    "style": "croods",
+    "styleVersion": "1.0.0",
+    "selections": {
+      "upperBody": "t-shirt-bag",
+      "head": "long-hair-1",
+      "face": "normal",
+      "facialHair": "none",
+      "accessories": "glass"
+    },
+    "colors": {
+      "hair": "original",
+      "skin": "original",
+      "clothing": "original",
+      "stroke": "original"
+    },
+    "background": "#FFE900",
+    "size": 600,
+    "shape": "rounded"
+  },
+  {
+    "id": "croods-011",
+    "schemaVersion": 1,
+    "style": "croods",
+    "styleVersion": "1.0.0",
+    "selections": {
+      "upperBody": "blazer",
+      "head": "messy-afro",
+      "face": "open-mouth-1",
+      "facialHair": "none",
+      "accessories": "none"
+    },
+    "colors": {
+      "hair": "original",
+      "skin": "original",
+      "clothing": "original",
+      "stroke": "original"
+    },
+    "background": "#FFDAA5",
+    "size": 600,
+    "shape": "rounded"
+  },
+  {
+    "id": "croods-012",
+    "schemaVersion": 1,
+    "style": "croods",
+    "styleVersion": "1.0.0",
+    "selections": {
+      "upperBody": "hoodie-1",
+      "head": "messy",
+      "face": "sad",
+      "facialHair": "none",
+      "accessories": "none"
+    },
+    "colors": {
+      "hair": "original",
+      "skin": "original",
+      "clothing": "original",
+      "stroke": "original"
+    },
+    "background": "#F2F0EE",
+    "size": 600,
+    "shape": "rounded"
+  },
+  {
+    "id": "croods-013",
+    "schemaVersion": 1,
+    "style": "croods",
+    "styleVersion": "1.0.0",
+    "selections": {
+      "upperBody": "shirt-1",
+      "head": "no-hair",
+      "face": "drool",
+      "facialHair": "beard",
+      "accessories": "glass"
+    },
+    "colors": {
+      "hair": "original",
+      "skin": "original",
+      "clothing": "original",
+      "stroke": "original"
+    },
+    "background": "#EDEDFF",
+    "size": 600,
+    "shape": "rounded"
+  },
+  {
+    "id": "croods-014",
+    "schemaVersion": 1,
+    "style": "croods",
+    "styleVersion": "1.0.0",
+    "selections": {
+      "upperBody": "t-shirt-1",
+      "head": "normal",
+      "face": "drool-2",
+      "facialHair": "none",
+      "accessories": "none"
+    },
+    "colors": {
+      "hair": "original",
+      "skin": "original",
+      "clothing": "original",
+      "stroke": "original"
+    },
+    "background": "#9BF1D9",
+    "size": 600,
+    "shape": "rounded"
+  },
+  {
+    "id": "croods-015",
+    "schemaVersion": 1,
+    "style": "croods",
+    "styleVersion": "1.0.0",
+    "selections": {
+      "upperBody": "t-shirt-bag",
+      "head": "quiff-1",
+      "face": "happy",
+      "facialHair": "none",
+      "accessories": "none"
+    },
+    "colors": {
+      "hair": "original",
+      "skin": "original",
+      "clothing": "original",
+      "stroke": "original"
+    },
+    "background": "#FFE900",
+    "size": 600,
+    "shape": "rounded"
+  },
+  {
+    "id": "croods-016",
+    "schemaVersion": 1,
+    "style": "croods",
+    "styleVersion": "1.0.0",
+    "selections": {
+      "upperBody": "blazer",
+      "head": "quiff-2",
+      "face": "normal",
+      "facialHair": "none",
+      "accessories": "glass"
+    },
+    "colors": {
+      "hair": "original",
+      "skin": "original",
+      "clothing": "original",
+      "stroke": "original"
+    },
+    "background": "#FFDAA5",
+    "size": 600,
+    "shape": "rounded"
+  },
+  {
+    "id": "croods-017",
+    "schemaVersion": 1,
+    "style": "croods",
+    "styleVersion": "1.0.0",
+    "selections": {
+      "upperBody": "hoodie-1",
+      "head": "short-hair-1",
+      "face": "open-mouth-1",
+      "facialHair": "moustache",
+      "accessories": "none"
+    },
+    "colors": {
+      "hair": "original",
+      "skin": "original",
+      "clothing": "original",
+      "stroke": "original"
+    },
+    "background": "#F2F0EE",
+    "size": 600,
+    "shape": "rounded"
+  },
+  {
+    "id": "croods-018",
+    "schemaVersion": 1,
+    "style": "croods",
+    "styleVersion": "1.0.0",
+    "selections": {
+      "upperBody": "shirt-1",
+      "head": "short-hair-2",
+      "face": "sad",
+      "facialHair": "none",
+      "accessories": "none"
+    },
+    "colors": {
+      "hair": "original",
+      "skin": "original",
+      "clothing": "original",
+      "stroke": "original"
+    },
+    "background": "#EDEDFF",
+    "size": 600,
+    "shape": "rounded"
+  },
+  {
+    "id": "croods-019",
+    "schemaVersion": 1,
+    "style": "croods",
+    "styleVersion": "1.0.0",
+    "selections": {
+      "upperBody": "t-shirt-1",
+      "head": "short-hair-4",
+      "face": "drool",
+      "facialHair": "none",
+      "accessories": "glass"
+    },
+    "colors": {
+      "hair": "original",
+      "skin": "original",
+      "clothing": "original",
+      "stroke": "original"
+    },
+    "background": "#9BF1D9",
+    "size": 600,
+    "shape": "rounded"
+  },
+  {
+    "id": "croods-020",
+    "schemaVersion": 1,
+    "style": "croods",
+    "styleVersion": "1.0.0",
+    "selections": {
+      "upperBody": "t-shirt-bag",
+      "head": "short-hair-5",
+      "face": "drool-2",
+      "facialHair": "none",
+      "accessories": "none"
+    },
+    "colors": {
+      "hair": "original",
+      "skin": "original",
+      "clothing": "original",
+      "stroke": "original"
+    },
+    "background": "#FFE900",
+    "size": 600,
+    "shape": "rounded"
+  },
+  {
+    "id": "croods-021",
+    "schemaVersion": 1,
+    "style": "croods",
+    "styleVersion": "1.0.0",
+    "selections": {
+      "upperBody": "blazer",
+      "head": "short-hair-7",
+      "face": "happy",
+      "facialHair": "stubble",
+      "accessories": "none"
+    },
+    "colors": {
+      "hair": "original",
+      "skin": "original",
+      "clothing": "original",
+      "stroke": "original"
+    },
+    "background": "#FFDAA5",
+    "size": 600,
+    "shape": "rounded"
+  },
+  {
+    "id": "croods-022",
+    "schemaVersion": 1,
+    "style": "croods",
+    "styleVersion": "1.0.0",
+    "selections": {
+      "upperBody": "hoodie-1",
+      "head": "short-hair-8",
+      "face": "normal",
+      "facialHair": "none",
+      "accessories": "glass"
+    },
+    "colors": {
+      "hair": "original",
+      "skin": "original",
+      "clothing": "original",
+      "stroke": "original"
+    },
+    "background": "#F2F0EE",
+    "size": 600,
+    "shape": "rounded"
+  },
+  {
+    "id": "croods-023",
+    "schemaVersion": 1,
+    "style": "croods",
+    "styleVersion": "1.0.0",
+    "selections": {
+      "upperBody": "shirt-1",
+      "head": "straight-long",
+      "face": "open-mouth-1",
+      "facialHair": "none",
+      "accessories": "none"
+    },
+    "colors": {
+      "hair": "original",
+      "skin": "original",
+      "clothing": "original",
+      "stroke": "original"
+    },
+    "background": "#EDEDFF",
+    "size": 600,
+    "shape": "rounded"
+  },
+  {
+    "id": "croods-024",
+    "schemaVersion": 1,
+    "style": "croods",
+    "styleVersion": "1.0.0",
+    "selections": {
+      "upperBody": "t-shirt-1",
+      "head": "trimmed",
+      "face": "sad",
+      "facialHair": "none",
+      "accessories": "none"
+    },
+    "colors": {
+      "hair": "original",
+      "skin": "original",
+      "clothing": "original",
+      "stroke": "original"
+    },
+    "background": "#9BF1D9",
+    "size": 600,
+    "shape": "rounded"
+  }
+]

package/dist/styles/croods.d.ts

@@ -0,0 +1,2 @@
+import type { AvatarStyle } from '../core/types.js';
+export declare const croods: AvatarStyle;