@pezkuwi/ui-shared 3.16.6

package/build-tsc-cjs/icons/beachball/svg/svg.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.svg = svg;
+const SVG_NS = 'http://www.w3.org/2000/svg';
+function svg(type) {
+    return document.createElementNS(SVG_NS, type);
+}

package/build-tsc-cjs/icons/beachball/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/build-tsc-cjs/icons/index.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.polkadotIcon = exports.beachballIcon = void 0;
+var index_js_1 = require("./beachball/index.js");
+Object.defineProperty(exports, "beachballIcon", { enumerable: true, get: function () { return index_js_1.beachballIcon; } });
+var polkadot_js_1 = require("./polkadot.js");
+Object.defineProperty(exports, "polkadotIcon", { enumerable: true, get: function () { return polkadot_js_1.polkadotIcon; } });

package/build-tsc-cjs/icons/polkadot.js

@@ -0,0 +1,116 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.polkadotIcon = polkadotIcon;
+const util_crypto_1 = require("@pezkuwi/util-crypto");
+const S = 64;
+const C = S / 2;
+const Z = S / 64 * 5;
+const SCHEMES = [
+    /* target  */ { colors: [0, 28, 0, 0, 28, 0, 0, 28, 0, 0, 28, 0, 0, 28, 0, 0, 28, 0, 1], freq: 1 },
+    /* cube    */ { colors: [0, 1, 3, 2, 4, 3, 0, 1, 3, 2, 4, 3, 0, 1, 3, 2, 4, 3, 5], freq: 20 },
+    /* quazar  */ { colors: [1, 2, 3, 1, 2, 4, 5, 5, 4, 1, 2, 3, 1, 2, 4, 5, 5, 4, 0], freq: 16 },
+    /* flower  */ { colors: [0, 1, 2, 0, 1, 2, 0, 1, 2, 0, 1, 2, 0, 1, 2, 0, 1, 2, 3], freq: 32 },
+    /* cyclic  */ { colors: [0, 1, 2, 3, 4, 5, 0, 1, 2, 3, 4, 5, 0, 1, 2, 3, 4, 5, 6], freq: 32 },
+    /* vmirror */ { colors: [0, 1, 2, 3, 4, 5, 3, 4, 2, 0, 1, 6, 7, 8, 9, 7, 8, 6, 10], freq: 128 },
+    /* hmirror */ { colors: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 8, 6, 7, 5, 3, 4, 2, 11], freq: 128 }
+];
+const SCHEMES_TOTAL = SCHEMES
+    .map((s) => s.freq)
+    .reduce((a, b) => a + b);
+const OUTER_CIRCLE = {
+    cx: C,
+    cy: C,
+    fill: '#eee',
+    r: C
+};
+let zeroHash = new Uint8Array();
+function getRotation(isSixPoint) {
+    const r = isSixPoint
+        ? (C / 8 * 5)
+        : (C / 4 * 3);
+    const rroot3o2 = r * Math.sqrt(3) / 2;
+    const ro2 = r / 2;
+    const rroot3o4 = r * Math.sqrt(3) / 4;
+    const ro4 = r / 4;
+    const r3o4 = r * 3 / 4;
+    return { r, r3o4, ro2, ro4, rroot3o2, rroot3o4 };
+}
+function getCircleXY(isSixPoint = false) {
+    const { r, r3o4, ro2, ro4, rroot3o2, rroot3o4 } = getRotation(isSixPoint);
+    return [
+        [C, C - r],
+        [C, C - ro2],
+        [C - rroot3o4, C - r3o4],
+        [C - rroot3o2, C - ro2],
+        [C - rroot3o4, C - ro4],
+        [C - rroot3o2, C],
+        [C - rroot3o2, C + ro2],
+        [C - rroot3o4, C + ro4],
+        [C - rroot3o4, C + r3o4],
+        [C, C + r],
+        [C, C + ro2],
+        [C + rroot3o4, C + r3o4],
+        [C + rroot3o2, C + ro2],
+        [C + rroot3o4, C + ro4],
+        [C + rroot3o2, C],
+        [C + rroot3o2, C - ro2],
+        [C + rroot3o4, C - ro4],
+        [C + rroot3o4, C - r3o4],
+        [C, C]
+    ];
+}
+function findScheme(d) {
+    let cum = 0;
+    const schema = SCHEMES.find((schema) => {
+        cum += schema.freq;
+        return d < cum;
+    });
+    if (!schema) {
+        throw new Error('Unable to find schema');
+    }
+    return schema;
+}
+function addressToId(address) {
+    if (!zeroHash.length) {
+        zeroHash = (0, util_crypto_1.blake2AsU8a)(new Uint8Array(32), 512);
+    }
+    return (0, util_crypto_1.blake2AsU8a)((0, util_crypto_1.decodeAddress)(address), 512).map((x, i) => (x + 256 - zeroHash[i]) % 256);
+}
+function getColors(address) {
+    const id = addressToId(address);
+    const d = Math.floor((id[30] + id[31] * 256) % SCHEMES_TOTAL);
+    const rot = (id[28] % 6) * 3;
+    const sat = (Math.floor(id[29] * 70 / 256 + 26) % 80) + 30;
+    const scheme = findScheme(d);
+    const palette = Array.from(id).map((x, i) => {
+        const b = (x + i % 28 * 58) % 256;
+        if (b === 0) {
+            return '#444';
+        }
+        else if (b === 255) {
+            return 'transparent';
+        }
+        const h = Math.floor(b % 64 * 360 / 64);
+        const l = [53, 15, 35, 75][Math.floor(b / 64)];
+        return `hsl(${h}, ${sat}%, ${l}%)`;
+    });
+    return scheme.colors.map((_, i) => palette[scheme.colors[i < 18 ? (i + rot) % 18 : 18]]);
+}
+/**
+ * @description Generates an array of the circles that make up an identicon
+ */
+function polkadotIcon(address, { isAlternative }) {
+    const xy = getCircleXY(isAlternative);
+    let colors;
+    try {
+        // in some cases, e.g. RN where crypto may not be initialized, chaos can
+        // happen when hashing, in these cases we just fill with a placeholder
+        colors = getColors(address);
+    }
+    catch {
+        colors = new Array(xy.length).fill('#ddd');
+    }
+    return [OUTER_CIRCLE].concat(xy.map(([cx, cy], index) => ({
+        cx, cy, fill: colors[index], r: Z
+    })));
+}

package/build-tsc-cjs/icons/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/build-tsc-cjs/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+require("./packageDetect.js");
+tslib_1.__exportStar(require("./bundle.js"), exports);

package/build-tsc-cjs/packageDetect.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const util_1 = require("@pezkuwi/util");
+const packageInfo_js_1 = require("./packageInfo.js");
+(0, util_1.detectPackage)(packageInfo_js_1.packageInfo, null, []);

package/build-tsc-cjs/packageInfo.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.packageInfo = void 0;
+exports.packageInfo = { name: '@pezkuwi/ui-shared', path: typeof __dirname === 'string' ? __dirname : 'auto', type: 'cjs', version: '3.16.6' };

package/build-tsc-esm/bundle.js

@@ -0,0 +1,2 @@
+export * from './icons/index.js';
+export { packageInfo } from './packageInfo.js';

package/build-tsc-esm/icons/beachball/colors.js

@@ -0,0 +1,13 @@
+import { colord } from 'colord';
+import { COLORS } from './defaults.js';
+const WOBBLE = 30;
+export function colors(seeder) {
+    const amount = (seeder() * WOBBLE) - (WOBBLE / 2);
+    const all = COLORS.map((hex) => colord(hex).rotate(amount));
+    return (alpha = 1) => {
+        const index = Math.floor(all.length * seeder());
+        return all.splice(index, 1)[0]
+            .alpha(alpha)
+            .toHslString();
+    };
+}

package/build-tsc-esm/icons/beachball/container.js

@@ -0,0 +1,19 @@
+export function container(diameter, background = 'white', className = '', _style = {}) {
+    const element = document.createElement('div');
+    const style = Object.assign({
+        background,
+        borderRadius: `${diameter / 2}px`,
+        display: 'inline-block',
+        height: `${diameter}px`,
+        margin: '0px',
+        overflow: 'hidden',
+        padding: '0px',
+        width: `${diameter}px`
+    }, _style);
+    element.className = className;
+    element.style.background = background;
+    Object.keys(style).forEach((key) => {
+        element.style[key] = style[key];
+    });
+    return element;
+}

package/build-tsc-esm/icons/beachball/defaults.js

@@ -0,0 +1,5 @@
+export const COLORS = [
+    // https://sashat.me/2017/01/11/list-of-20-simple-distinct-colors/
+    '#ffe119', '#4363d8', '#f58231', '#fabebe', '#e6beff', '#800000', '#000075', '#a9a9a9', '#ffffff', '#000000'
+];
+export const SHAPE_COUNT = 5;

package/build-tsc-esm/icons/beachball/demo.js

@@ -0,0 +1,19 @@
+import { isNull } from '@pezkuwi/util';
+import { encodeAddress, randomAsU8a } from '@pezkuwi/util-crypto';
+import { beachballIcon } from './index.js';
+const element = document.getElementById('demo');
+function generateIcon(seed = encodeAddress(randomAsU8a(32))) {
+    const start = Date.now();
+    if (isNull(element)) {
+        throw new Error('Unable to find #demo element');
+    }
+    element.appendChild(beachballIcon(seed, { isAlternative: false, size: 100 }, 'padded'));
+    console.log(`Icon generated in ${(Date.now() - start)}ms`);
+}
+function generateIcons(count = 512) {
+    generateIcon(encodeAddress(new Uint8Array(32)));
+    for (let index = 1; index < count; index++) {
+        generateIcon();
+    }
+}
+generateIcons();

package/build-tsc-esm/icons/beachball/index.js

@@ -0,0 +1,21 @@
+import { circle } from './shape/circle.js';
+import { element } from './svg/element.js';
+import { colors } from './colors.js';
+import { container as newContainer } from './container.js';
+import { SHAPE_COUNT } from './defaults.js';
+import { seeder as newSeeder } from './seeder.js';
+export function beachballIcon(seed, { size = 256 }, className = '', style) {
+    const seeder = newSeeder(seed);
+    const colorGen = colors(seeder);
+    const outer = newContainer(size, 'white', className, style);
+    const container = newContainer(size, colorGen());
+    const svg = element(size);
+    outer.appendChild(container);
+    container.appendChild(svg);
+    for (let count = 0; count < SHAPE_COUNT; count++) {
+        const fill = colorGen();
+        const shape = circle(seeder, fill, size, count);
+        svg.appendChild(shape);
+    }
+    return outer;
+}

package/build-tsc-esm/icons/beachball/seeder.js

@@ -0,0 +1,18 @@
+import { isU8a, stringToU8a } from '@pezkuwi/util';
+const DIVISOR = 256 * 256;
+export function seeder(_seed = new Uint8Array(32)) {
+    const seed = isU8a(_seed)
+        ? _seed
+        : stringToU8a(_seed);
+    let index = (seed[Math.floor(seed.length / 2)] % seed.length) - 1;
+    const next = () => {
+        index += 1;
+        if (index === seed.length) {
+            index = 0;
+        }
+        return seed[index];
+    };
+    return () => {
+        return ((next() * 256) + next()) / DIVISOR;
+    };
+}

package/build-tsc-esm/icons/beachball/shape/circle.js

@@ -0,0 +1,13 @@
+import { SHAPE_COUNT } from '../defaults.js';
+import { circle as newCircle } from '../svg/circle.js';
+export function circle(seeder, fill, diameter, count) {
+    const center = diameter / 2;
+    const angle = seeder() * 360;
+    const radius = (((SHAPE_COUNT - count) / SHAPE_COUNT) * (diameter / 2)) + ((diameter / 8) * seeder());
+    const offset = (diameter / 4) * (seeder() + ((count + 1) / SHAPE_COUNT));
+    const cx = (offset * Math.sin(angle)) + center;
+    const cy = (offset * Math.cos(angle)) + center;
+    const svg = newCircle(radius, cx, cy);
+    svg.setAttributeNS('', 'fill', fill);
+    return svg;
+}

package/build-tsc-esm/icons/beachball/shape/square.js

@@ -0,0 +1,16 @@
+import { SHAPE_COUNT } from '../defaults.js';
+import { rect as newRect } from '../svg/rect.js';
+export function square(seeder, fill, diameter, count) {
+    const center = diameter / 2;
+    const svg = newRect(diameter);
+    const firstRot = seeder();
+    const angle = Math.PI * 2 * firstRot;
+    const scale = count / SHAPE_COUNT;
+    const velocity = ((diameter / SHAPE_COUNT) * seeder()) + (scale * diameter);
+    const tx = (Math.cos(angle) * velocity).toFixed(3);
+    const ty = (Math.sin(angle) * velocity).toFixed(3);
+    const rot = ((firstRot * 360) + (seeder() * 180)).toFixed(1);
+    svg.setAttributeNS('', 'transform', `translate(${tx} ${ty}) rotate(${rot} ${center} ${center})`);
+    svg.setAttributeNS('', 'fill', fill);
+    return svg;
+}

package/build-tsc-esm/icons/beachball/svg/circle.js

@@ -0,0 +1,8 @@
+import { svg } from './svg.js';
+export function circle(r, cx, cy) {
+    const elem = svg('circle');
+    elem.setAttributeNS('', 'cx', `${cx}`);
+    elem.setAttributeNS('', 'cy', `${cy}`);
+    elem.setAttributeNS('', 'r', `${r}`);
+    return elem;
+}

package/build-tsc-esm/icons/beachball/svg/element.js

@@ -0,0 +1,9 @@
+import { svg } from './svg.js';
+export function element(size, type = 'svg', x = 0, y = 0) {
+    const elem = svg(type);
+    elem.setAttributeNS('', 'x', `${x}`);
+    elem.setAttributeNS('', 'y', `${y}`);
+    elem.setAttributeNS('', 'width', `${size}`);
+    elem.setAttributeNS('', 'height', `${size}`);
+    return elem;
+}

package/build-tsc-esm/icons/beachball/svg/rect.js

@@ -0,0 +1,7 @@
+import { element } from './element.js';
+export function rect(size) {
+    const elem = element(size, 'rect');
+    elem.setAttributeNS('', 'rx', `${size / 16}`);
+    elem.setAttributeNS('', 'ry', `${size / 16}`);
+    return elem;
+}

package/build-tsc-esm/icons/beachball/svg/svg.js

@@ -0,0 +1,4 @@
+const SVG_NS = 'http://www.w3.org/2000/svg';
+export function svg(type) {
+    return document.createElementNS(SVG_NS, type);
+}

package/build-tsc-esm/icons/beachball/types.js

@@ -0,0 +1 @@
+export {};

package/build-tsc-esm/icons/index.js

@@ -0,0 +1,2 @@
+export { beachballIcon } from './beachball/index.js';
+export { polkadotIcon } from './polkadot.js';

package/build-tsc-esm/icons/polkadot.js

@@ -0,0 +1,113 @@
+import { blake2AsU8a, decodeAddress } from '@pezkuwi/util-crypto';
+const S = 64;
+const C = S / 2;
+const Z = S / 64 * 5;
+const SCHEMES = [
+    /* target  */ { colors: [0, 28, 0, 0, 28, 0, 0, 28, 0, 0, 28, 0, 0, 28, 0, 0, 28, 0, 1], freq: 1 },
+    /* cube    */ { colors: [0, 1, 3, 2, 4, 3, 0, 1, 3, 2, 4, 3, 0, 1, 3, 2, 4, 3, 5], freq: 20 },
+    /* quazar  */ { colors: [1, 2, 3, 1, 2, 4, 5, 5, 4, 1, 2, 3, 1, 2, 4, 5, 5, 4, 0], freq: 16 },
+    /* flower  */ { colors: [0, 1, 2, 0, 1, 2, 0, 1, 2, 0, 1, 2, 0, 1, 2, 0, 1, 2, 3], freq: 32 },
+    /* cyclic  */ { colors: [0, 1, 2, 3, 4, 5, 0, 1, 2, 3, 4, 5, 0, 1, 2, 3, 4, 5, 6], freq: 32 },
+    /* vmirror */ { colors: [0, 1, 2, 3, 4, 5, 3, 4, 2, 0, 1, 6, 7, 8, 9, 7, 8, 6, 10], freq: 128 },
+    /* hmirror */ { colors: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 8, 6, 7, 5, 3, 4, 2, 11], freq: 128 }
+];
+const SCHEMES_TOTAL = SCHEMES
+    .map((s) => s.freq)
+    .reduce((a, b) => a + b);
+const OUTER_CIRCLE = {
+    cx: C,
+    cy: C,
+    fill: '#eee',
+    r: C
+};
+let zeroHash = new Uint8Array();
+function getRotation(isSixPoint) {
+    const r = isSixPoint
+        ? (C / 8 * 5)
+        : (C / 4 * 3);
+    const rroot3o2 = r * Math.sqrt(3) / 2;
+    const ro2 = r / 2;
+    const rroot3o4 = r * Math.sqrt(3) / 4;
+    const ro4 = r / 4;
+    const r3o4 = r * 3 / 4;
+    return { r, r3o4, ro2, ro4, rroot3o2, rroot3o4 };
+}
+function getCircleXY(isSixPoint = false) {
+    const { r, r3o4, ro2, ro4, rroot3o2, rroot3o4 } = getRotation(isSixPoint);
+    return [
+        [C, C - r],
+        [C, C - ro2],
+        [C - rroot3o4, C - r3o4],
+        [C - rroot3o2, C - ro2],
+        [C - rroot3o4, C - ro4],
+        [C - rroot3o2, C],
+        [C - rroot3o2, C + ro2],
+        [C - rroot3o4, C + ro4],
+        [C - rroot3o4, C + r3o4],
+        [C, C + r],
+        [C, C + ro2],
+        [C + rroot3o4, C + r3o4],
+        [C + rroot3o2, C + ro2],
+        [C + rroot3o4, C + ro4],
+        [C + rroot3o2, C],
+        [C + rroot3o2, C - ro2],
+        [C + rroot3o4, C - ro4],
+        [C + rroot3o4, C - r3o4],
+        [C, C]
+    ];
+}
+function findScheme(d) {
+    let cum = 0;
+    const schema = SCHEMES.find((schema) => {
+        cum += schema.freq;
+        return d < cum;
+    });
+    if (!schema) {
+        throw new Error('Unable to find schema');
+    }
+    return schema;
+}
+function addressToId(address) {
+    if (!zeroHash.length) {
+        zeroHash = blake2AsU8a(new Uint8Array(32), 512);
+    }
+    return blake2AsU8a(decodeAddress(address), 512).map((x, i) => (x + 256 - zeroHash[i]) % 256);
+}
+function getColors(address) {
+    const id = addressToId(address);
+    const d = Math.floor((id[30] + id[31] * 256) % SCHEMES_TOTAL);
+    const rot = (id[28] % 6) * 3;
+    const sat = (Math.floor(id[29] * 70 / 256 + 26) % 80) + 30;
+    const scheme = findScheme(d);
+    const palette = Array.from(id).map((x, i) => {
+        const b = (x + i % 28 * 58) % 256;
+        if (b === 0) {
+            return '#444';
+        }
+        else if (b === 255) {
+            return 'transparent';
+        }
+        const h = Math.floor(b % 64 * 360 / 64);
+        const l = [53, 15, 35, 75][Math.floor(b / 64)];
+        return `hsl(${h}, ${sat}%, ${l}%)`;
+    });
+    return scheme.colors.map((_, i) => palette[scheme.colors[i < 18 ? (i + rot) % 18 : 18]]);
+}
+/**
+ * @description Generates an array of the circles that make up an identicon
+ */
+export function polkadotIcon(address, { isAlternative }) {
+    const xy = getCircleXY(isAlternative);
+    let colors;
+    try {
+        // in some cases, e.g. RN where crypto may not be initialized, chaos can
+        // happen when hashing, in these cases we just fill with a placeholder
+        colors = getColors(address);
+    }
+    catch {
+        colors = new Array(xy.length).fill('#ddd');
+    }
+    return [OUTER_CIRCLE].concat(xy.map(([cx, cy], index) => ({
+        cx, cy, fill: colors[index], r: Z
+    })));
+}

package/build-tsc-esm/icons/types.js

@@ -0,0 +1 @@
+export {};

package/build-tsc-esm/index.js

@@ -0,0 +1,2 @@
+import './packageDetect.js';
+export * from './bundle.js';

package/build-tsc-esm/packageDetect.js

@@ -0,0 +1,3 @@
+import { detectPackage } from '@pezkuwi/util';
+import { packageInfo } from './packageInfo.js';
+detectPackage(packageInfo, null, []);

package/build-tsc-esm/packageInfo.js

@@ -0,0 +1 @@
+export const packageInfo = { name: '@pezkuwi/ui-shared', path: (import.meta && import.meta.url) ? new URL(import.meta.url).pathname.substring(0, new URL(import.meta.url).pathname.lastIndexOf('/') + 1) : 'auto', type: 'esm', version: '3.16.6' };

package/package.json

@@ -0,0 +1,37 @@
+{
+  "author": "Jaco Greeff <jacogr@gmail.com>",
+  "bugs": "https://github.com/pezkuwichain/ui/issues",
+  "description": "Shared logic that is usable accross all frameworks-specific areas",
+  "engines": {
+    "node": ">=18"
+  },
+  "homepage": "https://github.com/pezkuwichain/ui/tree/master/packages/ui-shared#readme",
+  "license": "Apache-2.0",
+  "name": "@pezkuwi/ui-shared",
+  "repository": {
+    "directory": "packages/ui-shared",
+    "type": "git",
+    "url": "https://github.com/pezkuwichain/ui.git"
+  },
+  "sideEffects": [
+    "./packageDetect.js",
+    "./packageDetect.cjs"
+  ],
+  "type": "module",
+  "version": "3.16.6",
+  "main": "index.js",
+  "dependencies": {
+    "colord": "^2.9.3",
+    "tslib": "^2.8.1"
+  },
+  "devDependencies": {
+    "@pezkuwi/util": "^14.0.5",
+    "@pezkuwi/util-crypto": "^14.0.5",
+    "@types/xmlserializer": "^0.6.6",
+    "xmlserializer": "^0.6.1"
+  },
+  "peerDependencies": {
+    "@pezkuwi/util": "*",
+    "@pezkuwi/util-crypto": "*"
+  }
+}

package/src/bundle.ts

@@ -0,0 +1,5 @@
+// Copyright 2018-2025 @pezkuwi/ui-shared authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+export * from './icons/index.js';
+export { packageInfo } from './packageInfo.js';

package/src/icons/beachball/LICENSE

@@ -0,0 +1,16 @@
+Apache-2.0 License (Apache-2.0)
+
+Copyright 2016 Dan Finlay
+Copyright 2017-2025 @polkadot/ui-shared authors & contributors
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted, provided that the above
+copyright notice and this permission notice appear in all copies.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DApache-2.0LAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND
+FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.

package/src/icons/beachball/README.md

@@ -0,0 +1,19 @@
+# @pezkuwi/ui-shared/beachball
+
+Adapted from [Jazzicon](https://github.com/danfinlay/jazzicon) by Dan Finlay with the following changes -
+
+- Random values now is read from the Uint8Array supplied (as opposed to having the seed as a number). This allows us to give an publicKey/address as an input and use those values in the pattern generation.
+- Upgrade to the underlying [color](https://github.com/Qix-/color) library
+- Generate circles as shapes (instead of rectangles)
+- Interface updated to take in optional className & style
+- Update everywhere to use ES6
+- Split source into self-contained functions (TODO: future testing)
+- Everything has been updated to use flow
+- Test the library functions
+- Copyright headers added (original also under Apache-2.0)
+
+## Usage
+
+Also see [src/demo.js](src/demo.js) for a randomly generated example.
+
+![demo](https://raw.githubusercontent.com/pezkuwichain/ui/master/packages/ui-shared/demo.png)

package/src/icons/beachball/colors.spec.ts

@@ -0,0 +1,67 @@
+// Copyright 2017-2025 @pezkuwi/ui-shared authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+/// <reference types="@pezkuwi/dev-test/globals.d.ts" />
+
+import type { ColorGen } from './types.js';
+
+import { colors as newColors } from './colors.js';
+import { seeder as newSeeder } from './seeder.js';
+
+describe('colors', (): void => {
+  let colors: ColorGen;
+
+  beforeEach((): void => {
+    colors = newColors(newSeeder());
+  });
+
+  it('generates using default alpha', (): void => {
+    expect(
+      colors()
+    ).toEqual(
+      // with original color ...
+      // 'hsl(37.19999999999999, 100%, 54.9%)'
+      'hsl(37, 100%, 55%)'
+    );
+  });
+
+  it('applies specified alpha', (): void => {
+    expect(
+      colors(0.5)
+    ).toEqual(
+      // with original color ...
+      // 'hsla(37.19999999999999, 100%, 54.9%, 0.5)'
+      'hsla(37, 100%, 55%, 0.5)'
+    );
+  });
+
+  it('rolates colors', (): void => {
+    const orig = colors();
+
+    expect(
+      orig
+    ).toEqual('hsl(37, 100%, 55%)');
+
+    expect(
+      colors()
+    ).not.toEqual(orig);
+  });
+
+  it('works in edge conditions (0xff)', (): void => {
+    const u8a = new Uint8Array(32);
+
+    u8a.fill(255);
+
+    expect(
+      colors = newColors(newSeeder(u8a))
+    ).not.toThrow();
+
+    expect(
+      colors()
+    ).toEqual(
+      // with original color ...
+      // 'hsl(15, 0%, 100%)'
+      'hsl(0, 0%, 100%)'
+    );
+  });
+});

package/src/icons/beachball/colors.ts

@@ -0,0 +1,28 @@
+// Copyright 2017-2025 @pezkuwi/ui-shared authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+// Copyright 2016 Dan Finlay
+
+import type { Colord } from 'colord';
+import type { ColorGen, Seeder } from './types.js';
+
+import { colord } from 'colord';
+
+import { COLORS } from './defaults.js';
+
+const WOBBLE = 30;
+
+export function colors (seeder: Seeder): ColorGen {
+  const amount = (seeder() * WOBBLE) - (WOBBLE / 2);
+  const all = COLORS.map((hex): Colord =>
+    colord(hex).rotate(amount)
+  );
+
+  return (alpha = 1): string => {
+    const index = Math.floor(all.length * seeder());
+
+    return all.splice(index, 1)[0]
+      .alpha(alpha)
+      .toHslString();
+  };
+}