@evolu/react-web 1.0.1-preview.5 → 1.0.1-preview.7

package/dist/components/EvoluIdenticon.d.ts

@@ -0,0 +1,9 @@
+import { type IdenticonStyle, type OwnerId } from "@evolu/common";
+import { FC } from "react";
+export declare const EvoluIdenticon: FC<{
+    id: OwnerId;
+    size?: number;
+    borderRadius?: number;
+    style?: IdenticonStyle;
+}>;
+//# sourceMappingURL=EvoluIdenticon.d.ts.map

package/dist/components/EvoluIdenticon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EvoluIdenticon.d.ts","sourceRoot":"","sources":["../../src/components/EvoluIdenticon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,cAAc,EACnB,KAAK,OAAO,EACb,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,EAAE,EAAW,MAAM,OAAO,CAAC;AAEpC,eAAO,MAAM,cAAc,EAAE,EAAE,CAAC;IAC9B,EAAE,EAAE,OAAO,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,cAAc,CAAC;CACxB,CAeA,CAAC"}

package/dist/components/EvoluIdenticon.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createIdenticon, } from "@evolu/common";
+import { useMemo } from "react";
+export const EvoluIdenticon = ({ id, size = 32, borderRadius = 3, style }) => {
+    const svg = useMemo(() => createIdenticon(id, style), [id, style]);
+    const uri = useMemo(() => `data:image/svg+xml,${encodeURIComponent(svg)}`, [svg]);
+    return (_jsx("img", { src: uri, width: size, height: size, style: { width: size, height: size, borderRadius }, alt: "Identicon" }));
+};

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import { EvoluDeps } from "@evolu/common/evolu";
 import { localAuth } from "@evolu/web";
-export * from "./EvoluAvatar.js";
+export * from "./components/EvoluIdenticon.js";
 export { localAuth };
 export declare const evoluReactWebDeps: EvoluDeps;
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAChD,OAAO,EAAgB,SAAS,EAAE,MAAM,YAAY,CAAC;AAGrD,cAAc,kBAAkB,CAAC;AACjC,OAAO,EAAE,SAAS,EAAE,CAAC;AAErB,eAAO,MAAM,iBAAiB,EAAE,SAG/B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAChD,OAAO,EAAgB,SAAS,EAAE,MAAM,YAAY,CAAC;AAGrD,cAAc,gCAAgC,CAAC;AAC/C,OAAO,EAAE,SAAS,EAAE,CAAC;AAErB,eAAO,MAAM,iBAAiB,EAAE,SAG/B,CAAC"}

package/dist/index.js

@@ -1,6 +1,6 @@
 import { evoluWebDeps, localAuth } from "@evolu/web";
 import { flushSync } from "react-dom";
-export * from "./EvoluAvatar.js";
+export * from "./components/EvoluIdenticon.js";
 export { localAuth };
 export const evoluReactWebDeps = {
     ...evoluWebDeps,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@evolu/react-web",
-  "version": "1.0.1-preview.5",
+  "version": "1.0.1-preview.7",
   "description": "Evolu for React (web platform)",
   "keywords": [
     "evolu",
@@ -29,9 +29,6 @@
     "src/**",
     "README.md"
   ],
-  "dependencies": {
-    "blo": "^2.0.0"
-  },
   "devDependencies": {
     "@types/react": "~19.1.13",
     "@types/react-dom": "~19.1.9",
@@ -41,12 +38,12 @@
     "typescript": "^5.9.2",
     "user-agent-data-types": "^0.4.2",
     "vitest": "^4.0.4",
-    "@evolu/common": "6.0.1-preview.23",
+    "@evolu/common": "6.0.1-preview.27",
     "@evolu/tsconfig": "0.0.2",
     "@evolu/web": "1.0.1-preview.7"
   },
   "peerDependencies": {
-    "@evolu/common": "^6.0.1-preview.23",
+    "@evolu/common": "^6.0.1-preview.27",
     "@evolu/web": "^1.0.1-preview.7",
     "react": ">=19",
     "react-dom": ">=19"

package/src/components/EvoluIdenticon.tsx

@@ -0,0 +1,28 @@
+import {
+  createIdenticon,
+  type IdenticonStyle,
+  type OwnerId,
+} from "@evolu/common";
+import { FC, useMemo } from "react";
+
+export const EvoluIdenticon: FC<{
+  id: OwnerId;
+  size?: number;
+  borderRadius?: number;
+  style?: IdenticonStyle;
+}> = ({ id, size = 32, borderRadius = 3, style }) => {
+  const svg = useMemo(() => createIdenticon(id, style), [id, style]);
+  const uri = useMemo(
+    () => `data:image/svg+xml,${encodeURIComponent(svg)}`,
+    [svg],
+  );
+  return (
+    <img
+      src={uri}
+      width={size}
+      height={size}
+      style={{ width: size, height: size, borderRadius }}
+      alt="Identicon"
+    />
+  );
+};

package/src/index.ts

@@ -2,7 +2,7 @@ import { EvoluDeps } from "@evolu/common/evolu";
 import { evoluWebDeps, localAuth } from "@evolu/web";
 import { flushSync } from "react-dom";
 
-export * from "./EvoluAvatar.js";
+export * from "./components/EvoluIdenticon.js";
 export { localAuth };
 
 export const evoluReactWebDeps: EvoluDeps = {

package/dist/EvoluAvatar.d.ts

@@ -1,8 +0,0 @@
-import type { OwnerId } from "@evolu/common";
-import { FC } from "react";
-export declare const EvoluAvatar: FC<{
-    id: OwnerId;
-    size?: number;
-    borderRadius?: number;
-}>;
-//# sourceMappingURL=EvoluAvatar.d.ts.map

package/dist/EvoluAvatar.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"EvoluAvatar.d.ts","sourceRoot":"","sources":["../src/EvoluAvatar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAE7C,OAAO,EAAE,EAAE,EAAW,MAAM,OAAO,CAAC;AAEpC,eAAO,MAAM,WAAW,EAAE,EAAE,CAAC;IAC3B,EAAE,EAAE,OAAO,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAUA,CAAC"}

package/dist/EvoluAvatar.js

@@ -1,7 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { blo } from "blo";
-import { useMemo } from "react";
-export const EvoluAvatar = ({ id, size = 32, borderRadius = 3 }) => {
-    const uri = useMemo(() => blo(`0x${id}`), [id]);
-    return (_jsx("img", { src: uri, width: size, height: size, style: { width: size, height: size, borderRadius } }));
-};

package/src/EvoluAvatar.tsx

@@ -1,19 +0,0 @@
-import type { OwnerId } from "@evolu/common";
-import { blo } from "blo";
-import { FC, useMemo } from "react";
-
-export const EvoluAvatar: FC<{
-  id: OwnerId;
-  size?: number;
-  borderRadius?: number;
-}> = ({ id, size = 32, borderRadius = 3 }) => {
-  const uri = useMemo(() => blo(`0x${id}`), [id]);
-  return (
-    <img
-      src={uri}
-      width={size}
-      height={size}
-      style={{ width: size, height: size, borderRadius }}
-    />
-  );
-};