@xylabs/react-identicon 6.2.19 → 6.3.1

package/dist/browser/index.mjs

@@ -1,15 +1,20 @@
-var __defProp = Object.defineProperty;
-var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
-
 // src/components/Identicon.tsx
 import { FlexRow } from "@xylabs/react-flexbox";
 import md5 from "md5";
-import React, { useEffect, useRef } from "react";
-var range = /* @__PURE__ */ __name((n, in_min, in_max, out_min, out_max) => {
+import { useEffect, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+var range = (n, in_min, in_max, out_min, out_max) => {
   return (n - in_min) * (out_max - out_min) / (in_max - in_min) + out_min;
-}, "range");
-var updateCanvas = /* @__PURE__ */ __name((canvas, props) => {
-  const { value = "", size = 400, bg = "transparent", count = 5, palette, iconPadding = 0 } = props;
+};
+var updateCanvas = (canvas, props) => {
+  const {
+    value = "",
+    size = 400,
+    bg = "transparent",
+    count = 5,
+    palette,
+    iconPadding = 0
+  } = props;
   let { fg } = props;
   const hash = md5(value);
   const block = Math.floor(size / count);
@@ -24,9 +29,7 @@ var updateCanvas = /* @__PURE__ */ __name((canvas, props) => {
   }
   current.width = block * count + iconPadding;
   current.height = block * count + iconPadding;
-  const arr = [
-    ...hash
-  ].map((el) => {
+  const arr = [...hash].map((el) => {
     const parsedEl = Number.parseInt(el, 16);
     return parsedEl < 8 ? 0 : 1;
   });
@@ -50,8 +53,18 @@ var updateCanvas = /* @__PURE__ */ __name((canvas, props) => {
       }
     }
   }
-}, "updateCanvas");
-var Identicon = /* @__PURE__ */ __name(({ size = 400, className = "identicon", bg, count, fg, iconPadding, palette, value, ...props }) => {
+};
+var Identicon = ({
+  size = 400,
+  className = "identicon",
+  bg,
+  count,
+  fg,
+  iconPadding,
+  palette,
+  value,
+  ...props
+}) => {
   const canvas = useRef(null);
   useEffect(() => {
     updateCanvas(canvas, {
@@ -65,15 +78,15 @@ var Identicon = /* @__PURE__ */ __name(({ size = 400, className = "identicon", b
       value
     });
   });
-  return /* @__PURE__ */ React.createElement(FlexRow, props, value ? /* @__PURE__ */ React.createElement("canvas", {
-    className,
-    ref: canvas,
-    style: {
-      height: size,
-      width: size
+  return /* @__PURE__ */ jsx(FlexRow, { ...props, children: value ? /* @__PURE__ */ jsx(
+    "canvas",
+    {
+      className,
+      ref: canvas,
+      style: { height: size, width: size }
     }
-  }) : null);
-}, "Identicon");
+  ) : null });
+};
 export {
   Identicon
 };

package/dist/browser/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/Identicon.tsx"],"sourcesContent":["import type { FlexBoxProps } from '@xylabs/react-flexbox'\nimport { FlexRow } from '@xylabs/react-flexbox'\nimport md5 from 'md5'\nimport React, { useEffect, useRef } from 'react'\n\nconst range = (n: number, in_min: number, in_max: number, out_min: number, out_max: number) => {\n  return ((n - in_min) * (out_max - out_min)) / (in_max - in_min) + out_min\n}\n\nexport interface IdenticonProps extends FlexBoxProps {\n  bg?: string\n  className?: string\n  count?: number\n  fg?: string\n  iconPadding?: number\n  palette?: string[]\n  size?: number\n  value?: string\n}\n\nconst updateCanvas = (canvas: React.RefObject<HTMLCanvasElement | null>, props: IdenticonProps) => {\n  const {\n    value = '', size = 400, bg = 'transparent', count = 5, palette, iconPadding = 0,\n  } = props\n  let { fg } = props\n  const hash = md5(value)\n  const block = Math.floor(size / count)\n  const hashColor = hash.slice(0, 6)\n\n  const current = canvas?.current\n\n  if (!current) {\n    return\n  }\n\n  if (palette && palette.length > 0) {\n    const index = Math.floor(range(Number.parseInt(hash.slice(-3), 16), 0, 4095, 0, palette.length))\n    fg = palette[index]\n  }\n\n  current.width = block * count + iconPadding\n  current.height = block * count + iconPadding\n  const arr = [...hash].map((el) => {\n    const parsedEl = Number.parseInt(el, 16)\n    return parsedEl < 8 ? 0 : 1\n  })\n\n  const map = []\n\n  map[0] = map[4] = arr.slice(0, 5)\n  map[1] = map[3] = arr.slice(5, 10)\n  map[2] = arr.slice(10, 15)\n\n  const ctx = current.getContext('2d')\n  if (ctx) {\n    ctx.imageSmoothingEnabled = false\n    ctx.clearRect(0, 0, current.width, current.height)\n\n    for (const [i, row] of map.entries()) {\n      for (const [j, el] of row.entries()) {\n        if (el) {\n          ctx.fillStyle = fg ?? '#' + hashColor\n          ctx.fillRect(block * i + iconPadding, block * j + iconPadding, block - iconPadding, block - iconPadding)\n        } else {\n          ctx.fillStyle = bg\n          ctx.fillRect(block * i + iconPadding, block * j + iconPadding, block - iconPadding, block - iconPadding)\n        }\n      }\n    }\n  }\n}\n\nexport const Identicon: React.FC<IdenticonProps> = ({\n  size = 400,\n  className = 'identicon',\n  bg,\n  count,\n  fg,\n  iconPadding,\n  palette,\n  value,\n  ...props\n}) => {\n  const canvas = useRef<HTMLCanvasElement>(null)\n\n  useEffect(() => {\n    updateCanvas(canvas, {\n      bg, className, count, fg, iconPadding, palette, size, value,\n    })\n  })\n\n  return (\n    <FlexRow {...props}>\n      {value\n        ? (\n            <canvas\n              className={className}\n              ref={canvas}\n              style={{ height: size, width: size }}\n            />\n          )\n        : null}\n    </FlexRow>\n  )\n}\n"],"mappings":";;;;AACA,SAASA,eAAe;AACxB,OAAOC,SAAS;AAChB,OAAOC,SAASC,WAAWC,cAAc;AAEzC,IAAMC,QAAQ,wBAACC,GAAWC,QAAgBC,QAAgBC,SAAiBC,YAAAA;AACzE,UAASJ,IAAIC,WAAWG,UAAUD,YAAaD,SAASD,UAAUE;AACpE,GAFc;AAed,IAAME,eAAe,wBAACC,QAAmDC,UAAAA;AACvE,QAAM,EACJC,QAAQ,IAAIC,OAAO,KAAKC,KAAK,eAAeC,QAAQ,GAAGC,SAASC,cAAc,EAAC,IAC7EN;AACJ,MAAI,EAAEO,GAAE,IAAKP;AACb,QAAMQ,OAAOC,IAAIR,KAAAA;AACjB,QAAMS,QAAQC,KAAKC,MAAMV,OAAOE,KAAAA;AAChC,QAAMS,YAAYL,KAAKM,MAAM,GAAG,CAAA;AAEhC,QAAMC,UAAUhB,QAAQgB;AAExB,MAAI,CAACA,SAAS;AACZ;EACF;AAEA,MAAIV,WAAWA,QAAQW,SAAS,GAAG;AACjC,UAAMC,QAAQN,KAAKC,MAAMpB,MAAM0B,OAAOC,SAASX,KAAKM,MAAM,EAAC,GAAI,EAAA,GAAK,GAAG,MAAM,GAAGT,QAAQW,MAAM,CAAA;AAC9FT,SAAKF,QAAQY,KAAAA;EACf;AAEAF,UAAQK,QAAQV,QAAQN,QAAQE;AAChCS,UAAQM,SAASX,QAAQN,QAAQE;AACjC,QAAMgB,MAAM;OAAId;IAAMe,IAAI,CAACC,OAAAA;AACzB,UAAMC,WAAWP,OAAOC,SAASK,IAAI,EAAA;AACrC,WAAOC,WAAW,IAAI,IAAI;EAC5B,CAAA;AAEA,QAAMF,MAAM,CAAA;AAEZA,MAAI,CAAA,IAAKA,IAAI,CAAA,IAAKD,IAAIR,MAAM,GAAG,CAAA;AAC/BS,MAAI,CAAA,IAAKA,IAAI,CAAA,IAAKD,IAAIR,MAAM,GAAG,EAAA;AAC/BS,MAAI,CAAA,IAAKD,IAAIR,MAAM,IAAI,EAAA;AAEvB,QAAMY,MAAMX,QAAQY,WAAW,IAAA;AAC/B,MAAID,KAAK;AACPA,QAAIE,wBAAwB;AAC5BF,QAAIG,UAAU,GAAG,GAAGd,QAAQK,OAAOL,QAAQM,MAAM;AAEjD,eAAW,CAACS,GAAGC,GAAAA,KAAQR,IAAIS,QAAO,GAAI;AACpC,iBAAW,CAACC,GAAGT,EAAAA,KAAOO,IAAIC,QAAO,GAAI;AACnC,YAAIR,IAAI;AACNE,cAAIQ,YAAY3B,MAAM,MAAMM;AAC5Ba,cAAIS,SAASzB,QAAQoB,IAAIxB,aAAaI,QAAQuB,IAAI3B,aAAaI,QAAQJ,aAAaI,QAAQJ,WAAAA;QAC9F,OAAO;AACLoB,cAAIQ,YAAY/B;AAChBuB,cAAIS,SAASzB,QAAQoB,IAAIxB,aAAaI,QAAQuB,IAAI3B,aAAaI,QAAQJ,aAAaI,QAAQJ,WAAAA;QAC9F;MACF;IACF;EACF;AACF,GAlDqB;AAoDd,IAAM8B,YAAsC,wBAAC,EAClDlC,OAAO,KACPmC,YAAY,aACZlC,IACAC,OACAG,IACAD,aACAD,SACAJ,OACA,GAAGD,MAAAA,MACJ;AACC,QAAMD,SAASuC,OAA0B,IAAA;AAEzCC,YAAU,MAAA;AACRzC,iBAAaC,QAAQ;MACnBI;MAAIkC;MAAWjC;MAAOG;MAAID;MAAaD;MAASH;MAAMD;IACxD,CAAA;EACF,CAAA;AAEA,SACE,sBAAA,cAACuC,SAAYxC,OACVC,QAEK,sBAAA,cAACF,UAAAA;IACCsC;IACAI,KAAK1C;IACL2C,OAAO;MAAErB,QAAQnB;MAAMkB,OAAOlB;IAAK;OAGvC,IAAA;AAGV,GAhCmD;","names":["FlexRow","md5","React","useEffect","useRef","range","n","in_min","in_max","out_min","out_max","updateCanvas","canvas","props","value","size","bg","count","palette","iconPadding","fg","hash","md5","block","Math","floor","hashColor","slice","current","length","index","Number","parseInt","width","height","arr","map","el","parsedEl","ctx","getContext","imageSmoothingEnabled","clearRect","i","row","entries","j","fillStyle","fillRect","Identicon","className","useRef","useEffect","FlexRow","ref","style"]}
+{"version":3,"sources":["../../src/components/Identicon.tsx"],"sourcesContent":["import type { FlexBoxProps } from '@xylabs/react-flexbox'\nimport { FlexRow } from '@xylabs/react-flexbox'\nimport md5 from 'md5'\nimport React, { useEffect, useRef } from 'react'\n\nconst range = (n: number, in_min: number, in_max: number, out_min: number, out_max: number) => {\n  return ((n - in_min) * (out_max - out_min)) / (in_max - in_min) + out_min\n}\n\nexport interface IdenticonProps extends FlexBoxProps {\n  bg?: string\n  className?: string\n  count?: number\n  fg?: string\n  iconPadding?: number\n  palette?: string[]\n  size?: number\n  value?: string\n}\n\nconst updateCanvas = (canvas: React.RefObject<HTMLCanvasElement | null>, props: IdenticonProps) => {\n  const {\n    value = '', size = 400, bg = 'transparent', count = 5, palette, iconPadding = 0,\n  } = props\n  let { fg } = props\n  const hash = md5(value)\n  const block = Math.floor(size / count)\n  const hashColor = hash.slice(0, 6)\n\n  const current = canvas?.current\n\n  if (!current) {\n    return\n  }\n\n  if (palette && palette.length > 0) {\n    const index = Math.floor(range(Number.parseInt(hash.slice(-3), 16), 0, 4095, 0, palette.length))\n    fg = palette[index]\n  }\n\n  current.width = block * count + iconPadding\n  current.height = block * count + iconPadding\n  const arr = [...hash].map((el) => {\n    const parsedEl = Number.parseInt(el, 16)\n    return parsedEl < 8 ? 0 : 1\n  })\n\n  const map = []\n\n  map[0] = map[4] = arr.slice(0, 5)\n  map[1] = map[3] = arr.slice(5, 10)\n  map[2] = arr.slice(10, 15)\n\n  const ctx = current.getContext('2d')\n  if (ctx) {\n    ctx.imageSmoothingEnabled = false\n    ctx.clearRect(0, 0, current.width, current.height)\n\n    for (const [i, row] of map.entries()) {\n      for (const [j, el] of row.entries()) {\n        if (el) {\n          ctx.fillStyle = fg ?? '#' + hashColor\n          ctx.fillRect(block * i + iconPadding, block * j + iconPadding, block - iconPadding, block - iconPadding)\n        } else {\n          ctx.fillStyle = bg\n          ctx.fillRect(block * i + iconPadding, block * j + iconPadding, block - iconPadding, block - iconPadding)\n        }\n      }\n    }\n  }\n}\n\nexport const Identicon: React.FC<IdenticonProps> = ({\n  size = 400,\n  className = 'identicon',\n  bg,\n  count,\n  fg,\n  iconPadding,\n  palette,\n  value,\n  ...props\n}) => {\n  const canvas = useRef<HTMLCanvasElement>(null)\n\n  useEffect(() => {\n    updateCanvas(canvas, {\n      bg, className, count, fg, iconPadding, palette, size, value,\n    })\n  })\n\n  return (\n    <FlexRow {...props}>\n      {value\n        ? (\n            <canvas\n              className={className}\n              ref={canvas}\n              style={{ height: size, width: size }}\n            />\n          )\n        : null}\n    </FlexRow>\n  )\n}\n"],"mappings":";AACA,SAAS,eAAe;AACxB,OAAO,SAAS;AAChB,SAAgB,WAAW,cAAc;AA4F7B;AA1FZ,IAAM,QAAQ,CAAC,GAAW,QAAgB,QAAgB,SAAiB,YAAoB;AAC7F,UAAS,IAAI,WAAW,UAAU,YAAa,SAAS,UAAU;AACpE;AAaA,IAAM,eAAe,CAAC,QAAmD,UAA0B;AACjG,QAAM;AAAA,IACJ,QAAQ;AAAA,IAAI,OAAO;AAAA,IAAK,KAAK;AAAA,IAAe,QAAQ;AAAA,IAAG;AAAA,IAAS,cAAc;AAAA,EAChF,IAAI;AACJ,MAAI,EAAE,GAAG,IAAI;AACb,QAAM,OAAO,IAAI,KAAK;AACtB,QAAM,QAAQ,KAAK,MAAM,OAAO,KAAK;AACrC,QAAM,YAAY,KAAK,MAAM,GAAG,CAAC;AAEjC,QAAM,UAAU,QAAQ;AAExB,MAAI,CAAC,SAAS;AACZ;AAAA,EACF;AAEA,MAAI,WAAW,QAAQ,SAAS,GAAG;AACjC,UAAM,QAAQ,KAAK,MAAM,MAAM,OAAO,SAAS,KAAK,MAAM,EAAE,GAAG,EAAE,GAAG,GAAG,MAAM,GAAG,QAAQ,MAAM,CAAC;AAC/F,SAAK,QAAQ,KAAK;AAAA,EACpB;AAEA,UAAQ,QAAQ,QAAQ,QAAQ;AAChC,UAAQ,SAAS,QAAQ,QAAQ;AACjC,QAAM,MAAM,CAAC,GAAG,IAAI,EAAE,IAAI,CAAC,OAAO;AAChC,UAAM,WAAW,OAAO,SAAS,IAAI,EAAE;AACvC,WAAO,WAAW,IAAI,IAAI;AAAA,EAC5B,CAAC;AAED,QAAM,MAAM,CAAC;AAEb,MAAI,CAAC,IAAI,IAAI,CAAC,IAAI,IAAI,MAAM,GAAG,CAAC;AAChC,MAAI,CAAC,IAAI,IAAI,CAAC,IAAI,IAAI,MAAM,GAAG,EAAE;AACjC,MAAI,CAAC,IAAI,IAAI,MAAM,IAAI,EAAE;AAEzB,QAAM,MAAM,QAAQ,WAAW,IAAI;AACnC,MAAI,KAAK;AACP,QAAI,wBAAwB;AAC5B,QAAI,UAAU,GAAG,GAAG,QAAQ,OAAO,QAAQ,MAAM;AAEjD,eAAW,CAAC,GAAG,GAAG,KAAK,IAAI,QAAQ,GAAG;AACpC,iBAAW,CAAC,GAAG,EAAE,KAAK,IAAI,QAAQ,GAAG;AACnC,YAAI,IAAI;AACN,cAAI,YAAY,MAAM,MAAM;AAC5B,cAAI,SAAS,QAAQ,IAAI,aAAa,QAAQ,IAAI,aAAa,QAAQ,aAAa,QAAQ,WAAW;AAAA,QACzG,OAAO;AACL,cAAI,YAAY;AAChB,cAAI,SAAS,QAAQ,IAAI,aAAa,QAAQ,IAAI,aAAa,QAAQ,aAAa,QAAQ,WAAW;AAAA,QACzG;AAAA,MACF;AAAA,IACF;AAAA,EACF;AACF;AAEO,IAAM,YAAsC,CAAC;AAAA,EAClD,OAAO;AAAA,EACP,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,SAAS,OAA0B,IAAI;AAE7C,YAAU,MAAM;AACd,iBAAa,QAAQ;AAAA,MACnB;AAAA,MAAI;AAAA,MAAW;AAAA,MAAO;AAAA,MAAI;AAAA,MAAa;AAAA,MAAS;AAAA,MAAM;AAAA,IACxD,CAAC;AAAA,EACH,CAAC;AAED,SACE,oBAAC,WAAS,GAAG,OACV,kBAEK;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,KAAK;AAAA,MACL,OAAO,EAAE,QAAQ,MAAM,OAAO,KAAK;AAAA;AAAA,EACrC,IAEF,MACN;AAEJ;","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xylabs/react-identicon",
-  "version": "6.2.19",
+  "version": "6.3.1",
   "description": "Common React library for all XY Labs projects that use React",
   "keywords": [
     "utility",
@@ -37,16 +37,16 @@
     "packages/*"
   ],
   "dependencies": {
-    "@xylabs/react-flexbox": "^6.2.19",
+    "@xylabs/react-flexbox": "^6.3.1",
     "md5": "^2.3.0"
   },
   "devDependencies": {
-    "@mui/material": "^7.0.2",
+    "@mui/material": "^7.1.0",
     "@types/md5": "^2.3.5",
-    "@types/react": "^19.1.2",
-    "@xylabs/ts-scripts-yarn3": "^6.3.5",
-    "@xylabs/tsconfig-react": "^6.3.5",
-    "knip": "^5.50.5",
+    "@types/react": "^19.1.4",
+    "@xylabs/ts-scripts-yarn3": "^6.5.5",
+    "@xylabs/tsconfig-react": "^6.5.5",
+    "knip": "^5.55.1",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "typescript": "^5.8.3"