@usenavii/react 0.1.0

package/dist/index.cjs

@@ -0,0 +1,75 @@
+'use strict';
+
+var React = require('react');
+var core = require('@usenavii/core');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+// src/index.tsx
+function Navii({
+  seed,
+  size = 96,
+  paletteId,
+  background,
+  title,
+  animated,
+  className,
+  style,
+  alt
+}) {
+  const dataUri = React__namespace.useMemo(() => {
+    const opts = { size };
+    if (paletteId !== void 0) opts.paletteId = paletteId;
+    if (background !== void 0) opts.background = background;
+    if (title !== void 0) opts.title = title;
+    if (animated !== void 0) opts.animated = animated;
+    const svg = core.createAvatar(seed, opts);
+    return `data:image/svg+xml;utf8,${encodeURIComponent(svg)}`;
+  }, [seed, size, paletteId, background, title, animated]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "img",
+    {
+      src: dataUri,
+      width: size,
+      height: size,
+      alt: alt ?? title ?? "",
+      className,
+      style
+    }
+  );
+}
+
+Object.defineProperty(exports, "createAvatar", {
+  enumerable: true,
+  get: function () { return core.createAvatar; }
+});
+Object.defineProperty(exports, "renderAvatar", {
+  enumerable: true,
+  get: function () { return core.renderAvatar; }
+});
+Object.defineProperty(exports, "selectAvatar", {
+  enumerable: true,
+  get: function () { return core.selectAvatar; }
+});
+exports.Navii = Navii;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.tsx"],"names":["React","createAvatar","jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAiBO,SAAS,KAAA,CAAM;AAAA,EACpB,IAAA;AAAA,EACA,IAAA,GAAO,EAAA;AAAA,EACP,SAAA;AAAA,EACA,UAAA;AAAA,EACA,KAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AAAA,EACA,KAAA;AAAA,EACA;AACF,CAAA,EAAmC;AACjC,EAAA,MAAM,OAAA,GAAgBA,yBAAQ,MAAM;AAClC,IAAA,MAAM,IAAA,GAAsB,EAAE,IAAA,EAAK;AACnC,IAAA,IAAI,SAAA,KAAc,MAAA,EAAW,IAAA,CAAK,SAAA,GAAY,SAAA;AAC9C,IAAA,IAAI,UAAA,KAAe,MAAA,EAAW,IAAA,CAAK,UAAA,GAAa,UAAA;AAChD,IAAA,IAAI,KAAA,KAAU,MAAA,EAAW,IAAA,CAAK,KAAA,GAAQ,KAAA;AACtC,IAAA,IAAI,QAAA,KAAa,MAAA,EAAW,IAAA,CAAK,QAAA,GAAW,QAAA;AAC5C,IAAA,MAAM,GAAA,GAAMC,iBAAA,CAAa,IAAA,EAAM,IAAI,CAAA;AACnC,IAAA,OAAO,CAAA,wBAAA,EAA2B,kBAAA,CAAmB,GAAG,CAAC,CAAA,CAAA;AAAA,EAC3D,CAAA,EAAG,CAAC,IAAA,EAAM,IAAA,EAAM,WAAW,UAAA,EAAY,KAAA,EAAO,QAAQ,CAAC,CAAA;AAEvD,EAAA,uBACEC,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,GAAA,EAAK,OAAA;AAAA,MACL,KAAA,EAAO,IAAA;AAAA,MACP,MAAA,EAAQ,IAAA;AAAA,MACR,GAAA,EAAK,OAAO,KAAA,IAAS,EAAA;AAAA,MACrB,SAAA;AAAA,MACA;AAAA;AAAA,GACF;AAEJ","file":"index.cjs","sourcesContent":["import * as React from 'react';\nimport { createAvatar, type AvatarOptions } from '@usenavii/core';\n\nexport interface NaviiProps extends AvatarOptions {\n  seed: string;\n  className?: string;\n  style?: React.CSSProperties;\n  alt?: string;\n}\n\n\n\n/**\n * Drop-in React avatar. Renders the engine output as a data-URI SVG image so\n * the SVG markup is treated as opaque by the browser (no inline scripting\n * surface). Memoized on seed + options.\n */\nexport function Navii({\n  seed,\n  size = 96,\n  paletteId,\n  background,\n  title,\n  animated,\n  className,\n  style,\n  alt,\n}: NaviiProps): React.ReactElement {\n  const dataUri = React.useMemo(() => {\n    const opts: AvatarOptions = { size };\n    if (paletteId !== undefined) opts.paletteId = paletteId;\n    if (background !== undefined) opts.background = background;\n    if (title !== undefined) opts.title = title;\n    if (animated !== undefined) opts.animated = animated;\n    const svg = createAvatar(seed, opts);\n    return `data:image/svg+xml;utf8,${encodeURIComponent(svg)}`;\n  }, [seed, size, paletteId, background, title, animated]);\n\n  return (\n    <img\n      src={dataUri}\n      width={size}\n      height={size}\n      alt={alt ?? title ?? ''}\n      className={className}\n      style={style}\n    />\n  );\n}\n\nexport { createAvatar, selectAvatar, renderAvatar } from '@usenavii/core';\nexport type { AvatarSpec, AvatarOptions, Palette } from '@usenavii/core';\n"]}

package/dist/index.d.cts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { AvatarOptions } from '@usenavii/core';
+export { AvatarOptions, AvatarSpec, Palette, createAvatar, renderAvatar, selectAvatar } from '@usenavii/core';
+
+interface NaviiProps extends AvatarOptions {
+    seed: string;
+    className?: string;
+    style?: React.CSSProperties;
+    alt?: string;
+}
+/**
+ * Drop-in React avatar. Renders the engine output as a data-URI SVG image so
+ * the SVG markup is treated as opaque by the browser (no inline scripting
+ * surface). Memoized on seed + options.
+ */
+declare function Navii({ seed, size, paletteId, background, title, animated, className, style, alt, }: NaviiProps): React.ReactElement;
+
+export { Navii, type NaviiProps };

package/dist/index.d.ts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { AvatarOptions } from '@usenavii/core';
+export { AvatarOptions, AvatarSpec, Palette, createAvatar, renderAvatar, selectAvatar } from '@usenavii/core';
+
+interface NaviiProps extends AvatarOptions {
+    seed: string;
+    className?: string;
+    style?: React.CSSProperties;
+    alt?: string;
+}
+/**
+ * Drop-in React avatar. Renders the engine output as a data-URI SVG image so
+ * the SVG markup is treated as opaque by the browser (no inline scripting
+ * surface). Memoized on seed + options.
+ */
+declare function Navii({ seed, size, paletteId, background, title, animated, className, style, alt, }: NaviiProps): React.ReactElement;
+
+export { Navii, type NaviiProps };

package/dist/index.js

@@ -0,0 +1,42 @@
+import * as React from 'react';
+import { createAvatar } from '@usenavii/core';
+export { createAvatar, renderAvatar, selectAvatar } from '@usenavii/core';
+import { jsx } from 'react/jsx-runtime';
+
+// src/index.tsx
+function Navii({
+  seed,
+  size = 96,
+  paletteId,
+  background,
+  title,
+  animated,
+  className,
+  style,
+  alt
+}) {
+  const dataUri = React.useMemo(() => {
+    const opts = { size };
+    if (paletteId !== void 0) opts.paletteId = paletteId;
+    if (background !== void 0) opts.background = background;
+    if (title !== void 0) opts.title = title;
+    if (animated !== void 0) opts.animated = animated;
+    const svg = createAvatar(seed, opts);
+    return `data:image/svg+xml;utf8,${encodeURIComponent(svg)}`;
+  }, [seed, size, paletteId, background, title, animated]);
+  return /* @__PURE__ */ jsx(
+    "img",
+    {
+      src: dataUri,
+      width: size,
+      height: size,
+      alt: alt ?? title ?? "",
+      className,
+      style
+    }
+  );
+}
+
+export { Navii };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.tsx"],"names":[],"mappings":";;;;;;AAiBO,SAAS,KAAA,CAAM;AAAA,EACpB,IAAA;AAAA,EACA,IAAA,GAAO,EAAA;AAAA,EACP,SAAA;AAAA,EACA,UAAA;AAAA,EACA,KAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AAAA,EACA,KAAA;AAAA,EACA;AACF,CAAA,EAAmC;AACjC,EAAA,MAAM,OAAA,GAAgB,cAAQ,MAAM;AAClC,IAAA,MAAM,IAAA,GAAsB,EAAE,IAAA,EAAK;AACnC,IAAA,IAAI,SAAA,KAAc,MAAA,EAAW,IAAA,CAAK,SAAA,GAAY,SAAA;AAC9C,IAAA,IAAI,UAAA,KAAe,MAAA,EAAW,IAAA,CAAK,UAAA,GAAa,UAAA;AAChD,IAAA,IAAI,KAAA,KAAU,MAAA,EAAW,IAAA,CAAK,KAAA,GAAQ,KAAA;AACtC,IAAA,IAAI,QAAA,KAAa,MAAA,EAAW,IAAA,CAAK,QAAA,GAAW,QAAA;AAC5C,IAAA,MAAM,GAAA,GAAM,YAAA,CAAa,IAAA,EAAM,IAAI,CAAA;AACnC,IAAA,OAAO,CAAA,wBAAA,EAA2B,kBAAA,CAAmB,GAAG,CAAC,CAAA,CAAA;AAAA,EAC3D,CAAA,EAAG,CAAC,IAAA,EAAM,IAAA,EAAM,WAAW,UAAA,EAAY,KAAA,EAAO,QAAQ,CAAC,CAAA;AAEvD,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,GAAA,EAAK,OAAA;AAAA,MACL,KAAA,EAAO,IAAA;AAAA,MACP,MAAA,EAAQ,IAAA;AAAA,MACR,GAAA,EAAK,OAAO,KAAA,IAAS,EAAA;AAAA,MACrB,SAAA;AAAA,MACA;AAAA;AAAA,GACF;AAEJ","file":"index.js","sourcesContent":["import * as React from 'react';\nimport { createAvatar, type AvatarOptions } from '@usenavii/core';\n\nexport interface NaviiProps extends AvatarOptions {\n  seed: string;\n  className?: string;\n  style?: React.CSSProperties;\n  alt?: string;\n}\n\n\n\n/**\n * Drop-in React avatar. Renders the engine output as a data-URI SVG image so\n * the SVG markup is treated as opaque by the browser (no inline scripting\n * surface). Memoized on seed + options.\n */\nexport function Navii({\n  seed,\n  size = 96,\n  paletteId,\n  background,\n  title,\n  animated,\n  className,\n  style,\n  alt,\n}: NaviiProps): React.ReactElement {\n  const dataUri = React.useMemo(() => {\n    const opts: AvatarOptions = { size };\n    if (paletteId !== undefined) opts.paletteId = paletteId;\n    if (background !== undefined) opts.background = background;\n    if (title !== undefined) opts.title = title;\n    if (animated !== undefined) opts.animated = animated;\n    const svg = createAvatar(seed, opts);\n    return `data:image/svg+xml;utf8,${encodeURIComponent(svg)}`;\n  }, [seed, size, paletteId, background, title, animated]);\n\n  return (\n    <img\n      src={dataUri}\n      width={size}\n      height={size}\n      alt={alt ?? title ?? ''}\n      className={className}\n      style={style}\n    />\n  );\n}\n\nexport { createAvatar, selectAvatar, renderAvatar } from '@usenavii/core';\nexport type { AvatarSpec, AvatarOptions, Palette } from '@usenavii/core';\n"]}

package/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "@usenavii/react",
+  "version": "0.1.0",
+  "description": "React binding for Navii deterministic avatars — <Navii seed=\"...\" />.",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "keywords": [
+    "avatar",
+    "avatars",
+    "mascot",
+    "svg",
+    "react",
+    "deterministic",
+    "navii"
+  ],
+  "license": "MIT",
+  "author": "uxderrick",
+  "homepage": "https://navii.uxderrick.com",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/uxderrick/navii.git",
+    "directory": "packages/react"
+  },
+  "bugs": "https://github.com/uxderrick/navii/issues",
+  "sideEffects": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@usenavii/core": "^0.1.0"
+  },
+  "peerDependencies": {
+    "react": ">=17"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.0",
+    "react": "^18.3.0",
+    "tsup": "^8.3.0"
+  },
+  "scripts": {
+    "build": "tsup",
+    "typecheck": "tsc -p tsconfig.json --noEmit",
+    "test": "vitest run --passWithNoTests"
+  }
+}