@puzzle-ui/icons 0.0.0-stage → 0.2.0

package/README.md

@@ -1,3 +1,85 @@
-# Temporary Holding Version
+# @puzzle-ui/icons
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+React icon components backed by Iconify. Use named icons in your application
+or alongside Puzzle UI components.
+
+> Puzzle is under active development. APIs and framework compatibility may
+> change; use it for experimentation and evaluation rather than production.
+
+## Installation
+
+```sh
+npm install @puzzle-ui/icons
+# or
+bun add @puzzle-ui/icons
+# or
+pnpm add @puzzle-ui/icons
+# or
+yarn add @puzzle-ui/icons
+```
+
+Requires React and React DOM 19 (`^19.0.0`). No theme provider is required.
+
+## Usage
+
+```tsx
+import { Icon } from "@puzzle-ui/icons";
+
+export const HomeIcon = () => (
+  <Icon name="lucide:house" size={24} aria-hidden="true" />
+);
+```
+
+`Icon` accepts a collection-prefixed `name`, optional numeric `size` in
+pixels, optional `color`, and SVG attributes. Without an explicit color,
+it can inherit the surrounding text color.
+
+For icon-only controls, label the control and keep its icon decorative:
+
+```tsx
+<button type="button" aria-label="Search">
+  <Icon name="lucide:search" aria-hidden="true" />
+</button>
+```
+
+## Server rendering
+
+The package also exports `SSRIcon` and `SSRIconProps`. `SSRIcon` is an async
+component that fetches icon data on the server and falls back to Iconify's
+client-side loading when data is unavailable.
+
+Use it only in rendering environments that support async components, such
+as an appropriate React Server Component setup. It is not a drop-in async
+component for ordinary client-side React rendering.
+
+Icon loading can make external requests to Iconify. Account for network
+availability and your Content Security Policy. Framework compatibility is
+still being evaluated.
+
+## Exports
+
+- `Icon`, `IconProps`
+- `SSRIcon`, `SSRIconProps`
+
+Import from `@puzzle-ui/icons`; generated internal icon-set files are not
+exported package entry points. ESM and CommonJS builds and TypeScript
+declarations are included.
+
+## Development
+
+```sh
+# From the repository root
+npm run build --workspace=@puzzle-ui/icons
+
+# From this package directory
+bun run vitest
+```
+
+`prepack` rebuilds the package before packing or publishing. See the root
+[publishing guide](../../README.md#publishing-packages).
+
+## License
+
+Package code is MIT; see [LICENSE](../../LICENSE), also included at
+`dist/LICENSE` in published packages. Individual icon collections may carry
+their own licenses; check the collection's terms before using its artwork.

package/dist/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Sjoerd van Den Berg
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/index.cjs

@@ -0,0 +1,62 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+let _iconify_react = require("@iconify/react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let _iconify_utils = require("@iconify/utils");
+// src/icon.tsx
+const Icon = ({ name, size, color, ...props }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_iconify_react.Icon, {
+		...props,
+		icon: name ?? "",
+		width: size,
+		height: size,
+		style: {
+			color,
+			width: size ? `${size}px` : void 0,
+			height: size ? `${size}px` : void 0
+		}
+	});
+};
+// src/ssr-icon.tsx
+async function fetchIconDataServer(iconName) {
+	const iconObj = (0, _iconify_utils.stringToIcon)(iconName);
+	if (!iconObj) return null;
+	try {
+		const response = await fetch(`https://iconify.design/${iconObj.prefix}.json?icons=${iconObj.name}`);
+		if (!response.ok) return null;
+		const json = await response.json();
+		return (0, _iconify_utils.getIconData)(json, iconObj.name);
+	} catch (error) {
+		console.error(`[SSR] Error fetching icon ${iconName}:`, error);
+		return null;
+	}
+}
+const SSRIcon = async ({ name, size, color, ...props }) => {
+	const iconData = await fetchIconDataServer(name);
+	if (iconData) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_iconify_react.Icon, {
+		...props,
+		icon: iconData,
+		width: size,
+		height: size,
+		style: {
+			color,
+			width: size ? `${size}px` : void 0,
+			height: size ? `${size}px` : void 0
+		}
+	});
+	console.warn(`[SSR] Fallback to client-side for icon: ${name}`);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_iconify_react.Icon, {
+		...props,
+		icon: name ?? "",
+		width: size,
+		height: size,
+		style: {
+			color,
+			width: size ? `${size}px` : void 0,
+			height: size ? `${size}px` : void 0
+		}
+	});
+};
+exports.Icon = Icon;
+exports.SSRIcon = SSRIcon;
+
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":["IconifyIcon","stringToIcon","getIconData","IconifyIcon"],"sources":["../src/icon.tsx","../src/ssr-icon.tsx"],"sourcesContent":["import { Icon as IconifyIcon } from \"@iconify/react\";\nimport type { ComponentProps } from \"react\";\n\ntype IconProps = Omit<ComponentProps<\"svg\">, \"mode\" | \"onLoad\" | \"rotate\"> & {\n  name: string;\n  size?: number;\n  color?: string;\n};\n\nconst Icon = ({ name, size, color, ...props }: IconProps) => {\n  return (\n    <IconifyIcon\n      {...props}\n      icon={name ?? \"\"}\n      width={size}\n      height={size}\n      style={{\n        color: color,\n        width: size ? `${size}px` : undefined,\n        height: size ? `${size}px` : undefined,\n      }}\n    />\n  );\n};\n\nexport { Icon, type IconProps };\n","import { Icon as IconifyIcon } from \"@iconify/react\";\nimport type { ComponentProps } from \"react\";\nimport { getIconData, stringToIcon } from \"@iconify/utils\";\n\nasync function fetchIconDataServer(iconName: string) {\n  const iconObj = stringToIcon(iconName);\n  if (!iconObj) return null;\n\n  try {\n    const response = await fetch(\n      `https://iconify.design/${iconObj.prefix}.json?icons=${iconObj.name}`,\n    );\n    if (!response.ok) return null;\n\n    const json = await response.json();\n    return getIconData(json, iconObj.name);\n  } catch (error) {\n    console.error(`[SSR] Error fetching icon ${iconName}:`, error);\n    return null;\n  }\n}\n\ntype SSRIconProps = Omit<\n  ComponentProps<\"svg\">,\n  \"mode\" | \"onLoad\" | \"rotate\"\n> & {\n  name: string;\n  size?: number;\n  color?: string;\n};\n\nconst SSRIcon = async ({ name, size, color, ...props }: SSRIconProps) => {\n  const iconData = await fetchIconDataServer(name);\n  if (iconData) {\n    return (\n      <IconifyIcon\n        {...props}\n        icon={iconData}\n        width={size}\n        height={size}\n        style={{\n          color: color,\n          width: size ? `${size}px` : undefined,\n          height: size ? `${size}px` : undefined,\n        }}\n      />\n    );\n  }\n  console.warn(`[SSR] Fallback to client-side for icon: ${name}`);\n  return (\n    <IconifyIcon\n      {...props}\n      icon={name ?? \"\"}\n      width={size}\n      height={size}\n      style={{\n        color: color,\n        width: size ? `${size}px` : undefined,\n        height: size ? `${size}px` : undefined,\n      }}\n    />\n  );\n};\n\nexport { SSRIcon, type SSRIconProps };\n"],"mappings":";;;;;AASA,MAAM,QAAQ,EAAE,MAAM,MAAM,OAAO,GAAG,YAAuB;CAC3D,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACA,eAAAA,MAAD;EACE,GAAI;EACJ,MAAM,QAAQ;EACd,OAAO;EACP,QAAQ;EACR,OAAO;GACE;GACP,OAAO,OAAO,GAAG,KAAK,MAAM,KAAA;GAC5B,QAAQ,OAAO,GAAG,KAAK,MAAM,KAAA;EAC/B;CACD,CAAA;AAEL;;ACnBA,eAAe,oBAAoB,UAAkB;CACnD,MAAM,WAAA,GAAUC,eAAAA,aAAAA,CAAa,QAAQ;CACrC,IAAI,CAAC,SAAS,OAAO;CAErB,IAAI;EACF,MAAM,WAAW,MAAM,MACrB,0BAA0B,QAAQ,OAAO,cAAc,QAAQ,MACjE;EACA,IAAI,CAAC,SAAS,IAAI,OAAO;EAEzB,MAAM,OAAO,MAAM,SAAS,KAAK;EACjC,QAAA,GAAOC,eAAAA,YAAAA,CAAY,MAAM,QAAQ,IAAI;CACvC,SAAS,OAAO;EACd,QAAQ,MAAM,6BAA6B,SAAS,IAAI,KAAK;EAC7D,OAAO;CACT;AACF;AAWA,MAAM,UAAU,OAAO,EAAE,MAAM,MAAM,OAAO,GAAG,YAA0B;CACvE,MAAM,WAAW,MAAM,oBAAoB,IAAI;CAC/C,IAAI,UACF,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,eAAAA,MAAD;EACE,GAAI;EACJ,MAAM;EACN,OAAO;EACP,QAAQ;EACR,OAAO;GACE;GACP,OAAO,OAAO,GAAG,KAAK,MAAM,KAAA;GAC5B,QAAQ,OAAO,GAAG,KAAK,MAAM,KAAA;EAC/B;CACD,CAAA;CAGL,QAAQ,KAAK,2CAA2C,MAAM;CAC9D,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACA,eAAAA,MAAD;EACE,GAAI;EACJ,MAAM,QAAQ;EACd,OAAO;EACP,QAAQ;EACR,OAAO;GACE;GACP,OAAO,OAAO,GAAG,KAAK,MAAM,KAAA;GAC5B,QAAQ,OAAO,GAAG,KAAK,MAAM,KAAA;EAC/B;CACD,CAAA;AAEL"}

package/dist/index.d.cts

@@ -0,0 +1,14 @@
+import { ComponentProps } from "react";
+type IconProps = Omit<ComponentProps<"svg">, "mode" | "onLoad" | "rotate"> & {
+  name: string;
+  size?: number;
+  color?: string;
+};
+declare const Icon: ({ name, size, color, ...props }: IconProps) => import("react").JSX.Element;
+type SSRIconProps = Omit<ComponentProps<"svg">, "mode" | "onLoad" | "rotate"> & {
+  name: string;
+  size?: number;
+  color?: string;
+};
+declare const SSRIcon: ({ name, size, color, ...props }: SSRIconProps) => Promise<import("react").JSX.Element>;
+export { Icon, type IconProps, SSRIcon, type SSRIconProps };

package/dist/index.d.ts

@@ -0,0 +1,14 @@
+import { ComponentProps } from "react";
+type IconProps = Omit<ComponentProps<"svg">, "mode" | "onLoad" | "rotate"> & {
+  name: string;
+  size?: number;
+  color?: string;
+};
+declare const Icon: ({ name, size, color, ...props }: IconProps) => import("react").JSX.Element;
+type SSRIconProps = Omit<ComponentProps<"svg">, "mode" | "onLoad" | "rotate"> & {
+  name: string;
+  size?: number;
+  color?: string;
+};
+declare const SSRIcon: ({ name, size, color, ...props }: SSRIconProps) => Promise<import("react").JSX.Element>;
+export { Icon, type IconProps, SSRIcon, type SSRIconProps };

package/dist/index.js

@@ -0,0 +1,60 @@
+import { Icon as Icon$1 } from "@iconify/react";
+import { jsx } from "react/jsx-runtime";
+import { getIconData, stringToIcon } from "@iconify/utils";
+// src/icon.tsx
+const Icon = ({ name, size, color, ...props }) => {
+	return /* @__PURE__ */ jsx(Icon$1, {
+		...props,
+		icon: name ?? "",
+		width: size,
+		height: size,
+		style: {
+			color,
+			width: size ? `${size}px` : void 0,
+			height: size ? `${size}px` : void 0
+		}
+	});
+};
+// src/ssr-icon.tsx
+async function fetchIconDataServer(iconName) {
+	const iconObj = stringToIcon(iconName);
+	if (!iconObj) return null;
+	try {
+		const response = await fetch(`https://iconify.design/${iconObj.prefix}.json?icons=${iconObj.name}`);
+		if (!response.ok) return null;
+		const json = await response.json();
+		return getIconData(json, iconObj.name);
+	} catch (error) {
+		console.error(`[SSR] Error fetching icon ${iconName}:`, error);
+		return null;
+	}
+}
+const SSRIcon = async ({ name, size, color, ...props }) => {
+	const iconData = await fetchIconDataServer(name);
+	if (iconData) return /* @__PURE__ */ jsx(Icon$1, {
+		...props,
+		icon: iconData,
+		width: size,
+		height: size,
+		style: {
+			color,
+			width: size ? `${size}px` : void 0,
+			height: size ? `${size}px` : void 0
+		}
+	});
+	console.warn(`[SSR] Fallback to client-side for icon: ${name}`);
+	return /* @__PURE__ */ jsx(Icon$1, {
+		...props,
+		icon: name ?? "",
+		width: size,
+		height: size,
+		style: {
+			color,
+			width: size ? `${size}px` : void 0,
+			height: size ? `${size}px` : void 0
+		}
+	});
+};
+export { Icon, SSRIcon };
+
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["IconifyIcon","IconifyIcon"],"sources":["../src/icon.tsx","../src/ssr-icon.tsx"],"sourcesContent":["import { Icon as IconifyIcon } from \"@iconify/react\";\nimport type { ComponentProps } from \"react\";\n\ntype IconProps = Omit<ComponentProps<\"svg\">, \"mode\" | \"onLoad\" | \"rotate\"> & {\n  name: string;\n  size?: number;\n  color?: string;\n};\n\nconst Icon = ({ name, size, color, ...props }: IconProps) => {\n  return (\n    <IconifyIcon\n      {...props}\n      icon={name ?? \"\"}\n      width={size}\n      height={size}\n      style={{\n        color: color,\n        width: size ? `${size}px` : undefined,\n        height: size ? `${size}px` : undefined,\n      }}\n    />\n  );\n};\n\nexport { Icon, type IconProps };\n","import { Icon as IconifyIcon } from \"@iconify/react\";\nimport type { ComponentProps } from \"react\";\nimport { getIconData, stringToIcon } from \"@iconify/utils\";\n\nasync function fetchIconDataServer(iconName: string) {\n  const iconObj = stringToIcon(iconName);\n  if (!iconObj) return null;\n\n  try {\n    const response = await fetch(\n      `https://iconify.design/${iconObj.prefix}.json?icons=${iconObj.name}`,\n    );\n    if (!response.ok) return null;\n\n    const json = await response.json();\n    return getIconData(json, iconObj.name);\n  } catch (error) {\n    console.error(`[SSR] Error fetching icon ${iconName}:`, error);\n    return null;\n  }\n}\n\ntype SSRIconProps = Omit<\n  ComponentProps<\"svg\">,\n  \"mode\" | \"onLoad\" | \"rotate\"\n> & {\n  name: string;\n  size?: number;\n  color?: string;\n};\n\nconst SSRIcon = async ({ name, size, color, ...props }: SSRIconProps) => {\n  const iconData = await fetchIconDataServer(name);\n  if (iconData) {\n    return (\n      <IconifyIcon\n        {...props}\n        icon={iconData}\n        width={size}\n        height={size}\n        style={{\n          color: color,\n          width: size ? `${size}px` : undefined,\n          height: size ? `${size}px` : undefined,\n        }}\n      />\n    );\n  }\n  console.warn(`[SSR] Fallback to client-side for icon: ${name}`);\n  return (\n    <IconifyIcon\n      {...props}\n      icon={name ?? \"\"}\n      width={size}\n      height={size}\n      style={{\n        color: color,\n        width: size ? `${size}px` : undefined,\n        height: size ? `${size}px` : undefined,\n      }}\n    />\n  );\n};\n\nexport { SSRIcon, type SSRIconProps };\n"],"mappings":";;;;AASA,MAAM,QAAQ,EAAE,MAAM,MAAM,OAAO,GAAG,YAAuB;CAC3D,OACE,oBAACA,QAAD;EACE,GAAI;EACJ,MAAM,QAAQ;EACd,OAAO;EACP,QAAQ;EACR,OAAO;GACE;GACP,OAAO,OAAO,GAAG,KAAK,MAAM,KAAA;GAC5B,QAAQ,OAAO,GAAG,KAAK,MAAM,KAAA;EAC/B;CACD,CAAA;AAEL;;ACnBA,eAAe,oBAAoB,UAAkB;CACnD,MAAM,UAAU,aAAa,QAAQ;CACrC,IAAI,CAAC,SAAS,OAAO;CAErB,IAAI;EACF,MAAM,WAAW,MAAM,MACrB,0BAA0B,QAAQ,OAAO,cAAc,QAAQ,MACjE;EACA,IAAI,CAAC,SAAS,IAAI,OAAO;EAEzB,MAAM,OAAO,MAAM,SAAS,KAAK;EACjC,OAAO,YAAY,MAAM,QAAQ,IAAI;CACvC,SAAS,OAAO;EACd,QAAQ,MAAM,6BAA6B,SAAS,IAAI,KAAK;EAC7D,OAAO;CACT;AACF;AAWA,MAAM,UAAU,OAAO,EAAE,MAAM,MAAM,OAAO,GAAG,YAA0B;CACvE,MAAM,WAAW,MAAM,oBAAoB,IAAI;CAC/C,IAAI,UACF,OACE,oBAACC,QAAD;EACE,GAAI;EACJ,MAAM;EACN,OAAO;EACP,QAAQ;EACR,OAAO;GACE;GACP,OAAO,OAAO,GAAG,KAAK,MAAM,KAAA;GAC5B,QAAQ,OAAO,GAAG,KAAK,MAAM,KAAA;EAC/B;CACD,CAAA;CAGL,QAAQ,KAAK,2CAA2C,MAAM;CAC9D,OACE,oBAACA,QAAD;EACE,GAAI;EACJ,MAAM,QAAQ;EACd,OAAO;EACP,QAAQ;EACR,OAAO;GACE;GACP,OAAO,OAAO,GAAG,KAAK,MAAM,KAAA;GAC5B,QAAQ,OAAO,GAAG,KAAK,MAAM,KAAA;EAC/B;CACD,CAAA;AAEL"}

package/package.json

@@ -1,6 +1,53 @@
 {
   "name": "@puzzle-ui/icons",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.2.0",
+  "description": "Icons for Puzzle",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "type": "module",
+  "sideEffects": false,
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsdown",
+    "vitest": "bunx vitest run --passWithNoTests",
+    "vitest:watch": "bunx vitest",
+    "clean": "rm -rf dist",
+    "prepack": "tsdown"
+  },
+  "dependencies": {
+    "@iconify/react": "^6.0.3",
+    "@iconify/utils": "^3.1.7",
+    "@puzzle-ui/core": "^0.2.0"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "tsdown": "^0.23.1",
+    "typescript": "^6.0.3",
+    "vitest": "latest"
+  }
+}