@xylabs/react-identicon 8.0.0 → 8.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -90,4 +90,4 @@ var Identicon = ({
90
90
  export {
91
91
  Identicon
92
92
  };
93
- //# sourceMappingURL=index.mjs.map
93
+ //# sourceMappingURL=index.mjs.map
@@ -1 +1,7 @@
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 canvasRef = useRef<HTMLCanvasElement>(null)\n\n useEffect(() => {\n updateCanvas(canvasRef, {\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={canvasRef}\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,YAAY,OAA0B,IAAI;AAEhD,YAAU,MAAM;AACd,iBAAa,WAAW;AAAA,MACtB;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":[]}
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../src/components/Identicon.tsx"],
4
+ "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 canvasRef = useRef<HTMLCanvasElement>(null)\n\n useEffect(() => {\n updateCanvas(canvasRef, {\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={canvasRef}\n style={{ height: size, width: size }}\n />\n )\n : null}\n </FlexRow>\n )\n}\n"],
5
+ "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,YAAY,OAA0B,IAAI;AAEhD,YAAU,MAAM;AACd,iBAAa,WAAW;AAAA,MACtB;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;",
6
+ "names": []
7
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@xylabs/react-identicon",
3
- "version": "8.0.0",
3
+ "version": "8.0.2",
4
4
  "description": "Common React library for all XY Labs projects that use React",
5
5
  "keywords": [
6
6
  "utility",
@@ -36,19 +36,19 @@
36
36
  "README.md"
37
37
  ],
38
38
  "dependencies": {
39
- "@xylabs/react-flexbox": "~8.0.0"
39
+ "@xylabs/react-flexbox": "~8.0.2"
40
40
  },
41
41
  "devDependencies": {
42
- "@mui/material": "~9.0.0",
42
+ "@mui/material": "~9.0.1",
43
43
  "@opentelemetry/api": "^1.9.1",
44
44
  "@opentelemetry/sdk-trace-base": "~2.7.1",
45
45
  "@types/md5": "~2.3.6",
46
46
  "@types/react": "^19.2.14",
47
- "@xylabs/sdk-js": "^5.1.0",
48
- "@xylabs/toolchain": "~7.13.0",
49
- "@xylabs/tsconfig": "~7.13.0",
50
- "@xylabs/tsconfig-dom": "~7.13.0",
51
- "@xylabs/tsconfig-react": "~7.13.0",
47
+ "@xylabs/sdk-js": "^5.1.2",
48
+ "@xylabs/toolchain": "~8.0.2",
49
+ "@xylabs/tsconfig": "~8.0.2",
50
+ "@xylabs/tsconfig-dom": "~8.0.2",
51
+ "@xylabs/tsconfig-react": "~8.0.2",
52
52
  "async-mutex": "~0.5.0",
53
53
  "bn.js": "~5.2.3",
54
54
  "buffer": "~6.0.3",
@@ -57,26 +57,26 @@
57
57
  "ethers": "~6.16.0",
58
58
  "md5": "~2.3.0",
59
59
  "pako": "~2.1.0",
60
- "react": "^19.2.5",
61
- "react-dom": "^19.2.5",
62
- "typescript": "^5.9.3",
60
+ "react": "^19.2.6",
61
+ "react-dom": "^19.2.6",
62
+ "typescript": "^6.0.3",
63
63
  "zod": "^4.4.3"
64
64
  },
65
65
  "peerDependencies": {
66
- "@mui/material": ">=9.0.0 <9.1",
67
- "@opentelemetry/api": ">=1.9.1 <2",
68
- "@opentelemetry/sdk-trace-base": ">=2.7.1 <2.8",
69
- "@xylabs/sdk-js": ">=5.1.0 <6",
70
- "async-mutex": ">=0.5.0 <0.6",
71
- "bn.js": ">=5.2.3 <5.3",
72
- "buffer": ">=6.0.3 <6.1",
73
- "chalk": ">=5.6.2 <5.7",
74
- "ethers": ">=6.16.0 <6.17",
75
- "md5": ">=2.3.0 <2.4",
76
- "pako": ">=2.1.0 <2.2",
77
- "react": ">=19.2.5 <20",
78
- "react-dom": ">=19.2.5 <20",
79
- "zod": ">=4.4.3 <5"
66
+ "@mui/material": "~9.0",
67
+ "@opentelemetry/api": "^1.9",
68
+ "@opentelemetry/sdk-trace-base": "~2.7",
69
+ "@xylabs/sdk-js": "^5.1",
70
+ "async-mutex": "~0.5",
71
+ "bn.js": "~5.2",
72
+ "buffer": "~6.0",
73
+ "chalk": "~5.6",
74
+ "ethers": "~6.16",
75
+ "md5": "~2.3",
76
+ "pako": "~2.1",
77
+ "react": "^19.2",
78
+ "react-dom": "^19.2",
79
+ "zod": "^4.4"
80
80
  },
81
81
  "publishConfig": {
82
82
  "access": "public"