@xylabs/react-identicon 3.0.5 → 3.0.7

package/dist/browser/components/Identicon.js

@@ -1,11 +1,12 @@
-import { jsx } from "react/jsx-runtime";
+// src/components/Identicon.tsx
 import { FlexRow } from "@xylabs/react-flexbox";
 import md5 from "md5";
 import { useEffect, useRef } from "react";
-const range = (n, in_min, in_max, out_min, out_max) => {
+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;
 };
-const updateCanvas = (canvas, props) => {
+var updateCanvas = (canvas, props) => {
   const { value = "", size = 400, bg = "transparent", count = 5, palette, iconPadding = 0 } = props;
   let { fg } = props;
   const hash = md5(value);
@@ -50,7 +51,7 @@ const updateCanvas = (canvas, props) => {
     });
   }
 };
-const Identicon = ({
+var Identicon = ({
   size = 400,
   className = "identicon",
   bg,

package/dist/browser/components/Identicon.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Identicon.tsx"],"sourcesContent":["import { FlexBoxProps, 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>, props: IdenticonProps) => {\n  const { value = '', size = 400, bg = 'transparent', count = 5, palette, iconPadding = 0 } = 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) {\n    const index = Math.floor(range(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.split('').map((el) => {\n    const parsedEl = parseInt(el, 16)\n    if (parsedEl < 8) {\n      return 0\n    } else {\n      return 1\n    }\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    map.forEach((row, i) => {\n      row.forEach((el, j) => {\n        if (el) {\n          ctx.fillStyle = fg ? 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, { bg, className, count, fg, iconPadding, palette, size, value })\n  })\n\n  return <FlexRow {...props}>{value ? <canvas className={className} ref={canvas} style={{ height: size, width: size }} /> : null}</FlexRow>\n}\n"],"mappings":"AA0FsC;AA1FtC,SAAuB,eAAe;AACtC,OAAO,SAAS;AAChB,SAAgB,WAAW,cAAc;AAEzC,MAAM,QAAQ,CAAC,GAAW,QAAgB,QAAgB,SAAiB,YAAoB;AAC7F,UAAS,IAAI,WAAW,UAAU,YAAa,SAAS,UAAU;AACpE;AAaA,MAAM,eAAe,CAAC,QAA4C,UAA0B;AAC1F,QAAM,EAAE,QAAQ,IAAI,OAAO,KAAK,KAAK,eAAe,QAAQ,GAAG,SAAS,cAAc,EAAE,IAAI;AAC5F,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,OAAO;AAEvB,MAAI,CAAC,SAAS;AACZ;AAAA,EACF;AAEA,MAAI,WAAW,QAAQ,QAAQ;AAC7B,UAAM,QAAQ,KAAK,MAAM,MAAM,SAAS,KAAK,MAAM,EAAE,GAAG,EAAE,GAAG,GAAG,MAAM,GAAG,QAAQ,MAAM,CAAC;AACxF,SAAK,QAAQ,KAAK;AAAA,EACpB;AAEA,UAAQ,QAAQ,QAAQ,QAAQ;AAChC,UAAQ,SAAS,QAAQ,QAAQ;AACjC,QAAM,MAAM,KAAK,MAAM,EAAE,EAAE,IAAI,CAAC,OAAO;AACrC,UAAM,WAAW,SAAS,IAAI,EAAE;AAChC,QAAI,WAAW,GAAG;AAChB,aAAO;AAAA,IACT,OAAO;AACL,aAAO;AAAA,IACT;AAAA,EACF,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,QAAI,QAAQ,CAAC,KAAK,MAAM;AACtB,UAAI,QAAQ,CAAC,IAAI,MAAM;AACrB,YAAI,IAAI;AACN,cAAI,YAAY,KAAK,KAAK,MAAM;AAChC,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,CAAC;AAAA,IACH,CAAC;AAAA,EACH;AACF;AAEO,MAAM,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,EAAE,IAAI,WAAW,OAAO,IAAI,aAAa,SAAS,MAAM,MAAM,CAAC;AAAA,EACtF,CAAC;AAED,SAAO,oBAAC,WAAS,GAAG,OAAQ,kBAAQ,oBAAC,YAAO,WAAsB,KAAK,QAAQ,OAAO,EAAE,QAAQ,MAAM,OAAO,KAAK,GAAG,IAAK,MAAK;AACjI;","names":[]}
+{"version":3,"sources":["../../../src/components/Identicon.tsx"],"sourcesContent":["import { FlexBoxProps, 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>, props: IdenticonProps) => {\n  const { value = '', size = 400, bg = 'transparent', count = 5, palette, iconPadding = 0 } = 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) {\n    const index = Math.floor(range(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.split('').map((el) => {\n    const parsedEl = parseInt(el, 16)\n    if (parsedEl < 8) {\n      return 0\n    } else {\n      return 1\n    }\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    map.forEach((row, i) => {\n      row.forEach((el, j) => {\n        if (el) {\n          ctx.fillStyle = fg ? 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, { bg, className, count, fg, iconPadding, palette, size, value })\n  })\n\n  return <FlexRow {...props}>{value ? <canvas className={className} ref={canvas} style={{ height: size, width: size }} /> : null}</FlexRow>\n}\n"],"mappings":";AAAA,SAAuB,eAAe;AACtC,OAAO,SAAS;AAChB,SAAgB,WAAW,cAAc;AAwFH;AAtFtC,IAAM,QAAQ,CAAC,GAAW,QAAgB,QAAgB,SAAiB,YAAoB;AAC7F,UAAS,IAAI,WAAW,UAAU,YAAa,SAAS,UAAU;AACpE;AAaA,IAAM,eAAe,CAAC,QAA4C,UAA0B;AAC1F,QAAM,EAAE,QAAQ,IAAI,OAAO,KAAK,KAAK,eAAe,QAAQ,GAAG,SAAS,cAAc,EAAE,IAAI;AAC5F,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,OAAO;AAEvB,MAAI,CAAC,SAAS;AACZ;AAAA,EACF;AAEA,MAAI,WAAW,QAAQ,QAAQ;AAC7B,UAAM,QAAQ,KAAK,MAAM,MAAM,SAAS,KAAK,MAAM,EAAE,GAAG,EAAE,GAAG,GAAG,MAAM,GAAG,QAAQ,MAAM,CAAC;AACxF,SAAK,QAAQ,KAAK;AAAA,EACpB;AAEA,UAAQ,QAAQ,QAAQ,QAAQ;AAChC,UAAQ,SAAS,QAAQ,QAAQ;AACjC,QAAM,MAAM,KAAK,MAAM,EAAE,EAAE,IAAI,CAAC,OAAO;AACrC,UAAM,WAAW,SAAS,IAAI,EAAE;AAChC,QAAI,WAAW,GAAG;AAChB,aAAO;AAAA,IACT,OAAO;AACL,aAAO;AAAA,IACT;AAAA,EACF,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,QAAI,QAAQ,CAAC,KAAK,MAAM;AACtB,UAAI,QAAQ,CAAC,IAAI,MAAM;AACrB,YAAI,IAAI;AACN,cAAI,YAAY,KAAK,KAAK,MAAM;AAChC,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,CAAC;AAAA,IACH,CAAC;AAAA,EACH;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,EAAE,IAAI,WAAW,OAAO,IAAI,aAAa,SAAS,MAAM,MAAM,CAAC;AAAA,EACtF,CAAC;AAED,SAAO,oBAAC,WAAS,GAAG,OAAQ,kBAAQ,oBAAC,YAAO,WAAsB,KAAK,QAAQ,OAAO,EAAE,QAAQ,MAAM,OAAO,KAAK,GAAG,IAAK,MAAK;AACjI;","names":[]}

package/dist/browser/components/index.js

@@ -1,2 +1,74 @@
-export * from "./Identicon";
+// src/components/Identicon.tsx
+import { FlexRow } from "@xylabs/react-flexbox";
+import md5 from "md5";
+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;
+};
+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);
+  const hashcolor = hash.slice(0, 6);
+  const current = canvas.current;
+  if (!current) {
+    return;
+  }
+  if (palette && palette.length) {
+    const index = Math.floor(range(parseInt(hash.slice(-3), 16), 0, 4095, 0, palette.length));
+    fg = palette[index];
+  }
+  current.width = block * count + iconPadding;
+  current.height = block * count + iconPadding;
+  const arr = hash.split("").map((el) => {
+    const parsedEl = parseInt(el, 16);
+    if (parsedEl < 8) {
+      return 0;
+    } else {
+      return 1;
+    }
+  });
+  const map = [];
+  map[0] = map[4] = arr.slice(0, 5);
+  map[1] = map[3] = arr.slice(5, 10);
+  map[2] = arr.slice(10, 15);
+  const ctx = current.getContext("2d");
+  if (ctx) {
+    ctx.imageSmoothingEnabled = false;
+    ctx.clearRect(0, 0, current.width, current.height);
+    map.forEach((row, i) => {
+      row.forEach((el, j) => {
+        if (el) {
+          ctx.fillStyle = fg ? fg : "#" + hashcolor;
+          ctx.fillRect(block * i + iconPadding, block * j + iconPadding, block - iconPadding, block - iconPadding);
+        } else {
+          ctx.fillStyle = bg;
+          ctx.fillRect(block * i + iconPadding, block * j + iconPadding, block - iconPadding, block - iconPadding);
+        }
+      });
+    });
+  }
+};
+var Identicon = ({
+  size = 400,
+  className = "identicon",
+  bg,
+  count,
+  fg,
+  iconPadding,
+  palette,
+  value,
+  ...props
+}) => {
+  const canvas = useRef(null);
+  useEffect(() => {
+    updateCanvas(canvas, { bg, className, count, fg, iconPadding, palette, size, value });
+  });
+  return /* @__PURE__ */ jsx(FlexRow, { ...props, children: value ? /* @__PURE__ */ jsx("canvas", { className, ref: canvas, style: { height: size, width: size } }) : null });
+};
+export {
+  Identicon
+};
 //# sourceMappingURL=index.js.map

package/dist/browser/components/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/index.ts"],"sourcesContent":["export * from './Identicon'\n"],"mappings":"AAAA,cAAc;","names":[]}
+{"version":3,"sources":["../../../src/components/Identicon.tsx"],"sourcesContent":["import { FlexBoxProps, 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>, props: IdenticonProps) => {\n  const { value = '', size = 400, bg = 'transparent', count = 5, palette, iconPadding = 0 } = 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) {\n    const index = Math.floor(range(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.split('').map((el) => {\n    const parsedEl = parseInt(el, 16)\n    if (parsedEl < 8) {\n      return 0\n    } else {\n      return 1\n    }\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    map.forEach((row, i) => {\n      row.forEach((el, j) => {\n        if (el) {\n          ctx.fillStyle = fg ? 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, { bg, className, count, fg, iconPadding, palette, size, value })\n  })\n\n  return <FlexRow {...props}>{value ? <canvas className={className} ref={canvas} style={{ height: size, width: size }} /> : null}</FlexRow>\n}\n"],"mappings":";AAAA,SAAuB,eAAe;AACtC,OAAO,SAAS;AAChB,SAAgB,WAAW,cAAc;AAwFH;AAtFtC,IAAM,QAAQ,CAAC,GAAW,QAAgB,QAAgB,SAAiB,YAAoB;AAC7F,UAAS,IAAI,WAAW,UAAU,YAAa,SAAS,UAAU;AACpE;AAaA,IAAM,eAAe,CAAC,QAA4C,UAA0B;AAC1F,QAAM,EAAE,QAAQ,IAAI,OAAO,KAAK,KAAK,eAAe,QAAQ,GAAG,SAAS,cAAc,EAAE,IAAI;AAC5F,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,OAAO;AAEvB,MAAI,CAAC,SAAS;AACZ;AAAA,EACF;AAEA,MAAI,WAAW,QAAQ,QAAQ;AAC7B,UAAM,QAAQ,KAAK,MAAM,MAAM,SAAS,KAAK,MAAM,EAAE,GAAG,EAAE,GAAG,GAAG,MAAM,GAAG,QAAQ,MAAM,CAAC;AACxF,SAAK,QAAQ,KAAK;AAAA,EACpB;AAEA,UAAQ,QAAQ,QAAQ,QAAQ;AAChC,UAAQ,SAAS,QAAQ,QAAQ;AACjC,QAAM,MAAM,KAAK,MAAM,EAAE,EAAE,IAAI,CAAC,OAAO;AACrC,UAAM,WAAW,SAAS,IAAI,EAAE;AAChC,QAAI,WAAW,GAAG;AAChB,aAAO;AAAA,IACT,OAAO;AACL,aAAO;AAAA,IACT;AAAA,EACF,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,QAAI,QAAQ,CAAC,KAAK,MAAM;AACtB,UAAI,QAAQ,CAAC,IAAI,MAAM;AACrB,YAAI,IAAI;AACN,cAAI,YAAY,KAAK,KAAK,MAAM;AAChC,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,CAAC;AAAA,IACH,CAAC;AAAA,EACH;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,EAAE,IAAI,WAAW,OAAO,IAAI,aAAa,SAAS,MAAM,MAAM,CAAC;AAAA,EACtF,CAAC;AAED,SAAO,oBAAC,WAAS,GAAG,OAAQ,kBAAQ,oBAAC,YAAO,WAAsB,KAAK,QAAQ,OAAO,EAAE,QAAQ,MAAM,OAAO,KAAK,GAAG,IAAK,MAAK;AACjI;","names":[]}

package/dist/browser/index.js

@@ -1,2 +1,74 @@
-export * from "./components";
+// src/components/Identicon.tsx
+import { FlexRow } from "@xylabs/react-flexbox";
+import md5 from "md5";
+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;
+};
+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);
+  const hashcolor = hash.slice(0, 6);
+  const current = canvas.current;
+  if (!current) {
+    return;
+  }
+  if (palette && palette.length) {
+    const index = Math.floor(range(parseInt(hash.slice(-3), 16), 0, 4095, 0, palette.length));
+    fg = palette[index];
+  }
+  current.width = block * count + iconPadding;
+  current.height = block * count + iconPadding;
+  const arr = hash.split("").map((el) => {
+    const parsedEl = parseInt(el, 16);
+    if (parsedEl < 8) {
+      return 0;
+    } else {
+      return 1;
+    }
+  });
+  const map = [];
+  map[0] = map[4] = arr.slice(0, 5);
+  map[1] = map[3] = arr.slice(5, 10);
+  map[2] = arr.slice(10, 15);
+  const ctx = current.getContext("2d");
+  if (ctx) {
+    ctx.imageSmoothingEnabled = false;
+    ctx.clearRect(0, 0, current.width, current.height);
+    map.forEach((row, i) => {
+      row.forEach((el, j) => {
+        if (el) {
+          ctx.fillStyle = fg ? fg : "#" + hashcolor;
+          ctx.fillRect(block * i + iconPadding, block * j + iconPadding, block - iconPadding, block - iconPadding);
+        } else {
+          ctx.fillStyle = bg;
+          ctx.fillRect(block * i + iconPadding, block * j + iconPadding, block - iconPadding, block - iconPadding);
+        }
+      });
+    });
+  }
+};
+var Identicon = ({
+  size = 400,
+  className = "identicon",
+  bg,
+  count,
+  fg,
+  iconPadding,
+  palette,
+  value,
+  ...props
+}) => {
+  const canvas = useRef(null);
+  useEffect(() => {
+    updateCanvas(canvas, { bg, className, count, fg, iconPadding, palette, size, value });
+  });
+  return /* @__PURE__ */ jsx(FlexRow, { ...props, children: value ? /* @__PURE__ */ jsx("canvas", { className, ref: canvas, style: { height: size, width: size } }) : null });
+};
+export {
+  Identicon
+};
 //# sourceMappingURL=index.js.map

package/dist/browser/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/index.ts"],"sourcesContent":["export * from './components'\n"],"mappings":"AAAA,cAAc;","names":[]}
+{"version":3,"sources":["../../src/components/Identicon.tsx"],"sourcesContent":["import { FlexBoxProps, 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>, props: IdenticonProps) => {\n  const { value = '', size = 400, bg = 'transparent', count = 5, palette, iconPadding = 0 } = 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) {\n    const index = Math.floor(range(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.split('').map((el) => {\n    const parsedEl = parseInt(el, 16)\n    if (parsedEl < 8) {\n      return 0\n    } else {\n      return 1\n    }\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    map.forEach((row, i) => {\n      row.forEach((el, j) => {\n        if (el) {\n          ctx.fillStyle = fg ? 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, { bg, className, count, fg, iconPadding, palette, size, value })\n  })\n\n  return <FlexRow {...props}>{value ? <canvas className={className} ref={canvas} style={{ height: size, width: size }} /> : null}</FlexRow>\n}\n"],"mappings":";AAAA,SAAuB,eAAe;AACtC,OAAO,SAAS;AAChB,SAAgB,WAAW,cAAc;AAwFH;AAtFtC,IAAM,QAAQ,CAAC,GAAW,QAAgB,QAAgB,SAAiB,YAAoB;AAC7F,UAAS,IAAI,WAAW,UAAU,YAAa,SAAS,UAAU;AACpE;AAaA,IAAM,eAAe,CAAC,QAA4C,UAA0B;AAC1F,QAAM,EAAE,QAAQ,IAAI,OAAO,KAAK,KAAK,eAAe,QAAQ,GAAG,SAAS,cAAc,EAAE,IAAI;AAC5F,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,OAAO;AAEvB,MAAI,CAAC,SAAS;AACZ;AAAA,EACF;AAEA,MAAI,WAAW,QAAQ,QAAQ;AAC7B,UAAM,QAAQ,KAAK,MAAM,MAAM,SAAS,KAAK,MAAM,EAAE,GAAG,EAAE,GAAG,GAAG,MAAM,GAAG,QAAQ,MAAM,CAAC;AACxF,SAAK,QAAQ,KAAK;AAAA,EACpB;AAEA,UAAQ,QAAQ,QAAQ,QAAQ;AAChC,UAAQ,SAAS,QAAQ,QAAQ;AACjC,QAAM,MAAM,KAAK,MAAM,EAAE,EAAE,IAAI,CAAC,OAAO;AACrC,UAAM,WAAW,SAAS,IAAI,EAAE;AAChC,QAAI,WAAW,GAAG;AAChB,aAAO;AAAA,IACT,OAAO;AACL,aAAO;AAAA,IACT;AAAA,EACF,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,QAAI,QAAQ,CAAC,KAAK,MAAM;AACtB,UAAI,QAAQ,CAAC,IAAI,MAAM;AACrB,YAAI,IAAI;AACN,cAAI,YAAY,KAAK,KAAK,MAAM;AAChC,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,CAAC;AAAA,IACH,CAAC;AAAA,EACH;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,EAAE,IAAI,WAAW,OAAO,IAAI,aAAa,SAAS,MAAM,MAAM,CAAC;AAAA,EACtF,CAAC;AAED,SAAO,oBAAC,WAAS,GAAG,OAAQ,kBAAQ,oBAAC,YAAO,WAAsB,KAAK,QAAQ,OAAO,EAAE,QAAQ,MAAM,OAAO,KAAK,GAAG,IAAK,MAAK;AACjI;","names":[]}

package/package.json

@@ -13,14 +13,14 @@
     "packages/*"
   ],
   "dependencies": {
-    "@xylabs/react-flexbox": "~3.0.5",
+    "@xylabs/react-flexbox": "~3.0.7",
     "md5": "^2.3.0"
   },
   "description": "Common React library for all XY Labs projects that use React",
   "devDependencies": {
     "@types/md5": "^2.3.3",
-    "@xylabs/ts-scripts-yarn3": "^3.0.78",
-    "@xylabs/tsconfig-react": "^3.0.78",
+    "@xylabs/ts-scripts-yarn3": "^3.0.82",
+    "@xylabs/tsconfig-react": "^3.0.82",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "typescript": "^5.2.2"
@@ -77,6 +77,6 @@
     "url": "https://github.com/xylabs/sdk-react.git"
   },
   "sideEffects": false,
-  "version": "3.0.5",
+  "version": "3.0.7",
   "type": "module"
 }