@eightshift/ui-components 6.3.0 → 7.0.0

package/dist/icons/generic-color-swatch.js

@@ -1,113 +1,83 @@
-import { jsxs, jsx } from "react/jsx-runtime";
 import { useId } from "react";
-const GenericColorSwatch = ({ style }) => {
-  const clipId = useId();
-  return /* @__PURE__ */ jsxs(
-    "svg",
-    {
-      style,
-      width: "20",
-      height: "20",
-      viewBox: "0 0 20 20",
-      fill: "none",
-      xmlns: "http://www.w3.org/2000/svg",
-      children: [
-        /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("clipPath", { id: `genericColorSwatchShape-${clipId}`, children: /* @__PURE__ */ jsx(
-          "rect",
-          {
-            className: "generic-swatch-icon-color-mask",
-            x: "1",
-            y: "1",
-            width: "18",
-            height: "18",
-            rx: "2"
-          }
-        ) }) }),
-        /* @__PURE__ */ jsxs(
-          "g",
-          {
-            opacity: "var(--checkerboard-opacity, 0)",
-            clipPath: `url(#genericColorSwatchShape-${clipId})`,
-            className: "generic-swatch-icon-checkerboard-group",
-            children: [
-              /* @__PURE__ */ jsx(
-                "path",
-                {
-                  fill: "#CCC",
-                  d: "M1 1h3v3H1V1zm0 6h3v3H1zm0 6h3v3H1zM7 1h3v3H7zm0 6h3v3H7zm0 6h3v3H7zm6-12h3v3h-3zm0 6h3v3h-3zm0 6h3v3h-3z"
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                "path",
-                {
-                  fill: "#fff",
-                  d: "M4 1h3v3H4zm0 6h3v3H4zm0 6h3v3H4zm6-12h3v3h-3zm0 6h3v3h-3zm0 6h3v3h-3zm6-12h3v3h-3V1zm0 6h3v3h-3zm0 6h3v3h-3z"
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                "path",
-                {
-                  fill: "#CCC",
-                  d: "M4 4h3v3H4zm0 6h3v3H4zm0 6h3v3H4zm6-12h3v3h-3zm0 6h3v3h-3zm0 6h3v3h-3zm6-12h3v3h-3zm0 6h3v3h-3zm0 6h3v3h-3v-3z"
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                "path",
-                {
-                  fill: "#fff",
-                  d: "M1 4h3v3H1zm0 6h3v3H1zm0 6h3v3H1v-3zM7 4h3v3H7zm0 6h3v3H7zm0 6h3v3H7zm6-12h3v3h-3zm0 6h3v3h-3zm0 6h3v3h-3z"
-                }
-              )
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "rect",
-          {
-            className: "generic-swatch-icon-color",
-            x: "1",
-            y: "1",
-            width: "18",
-            height: "18",
-            rx: "2",
-            fill: "var(--selected-color, currentColor)",
-            stroke: "gray"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "path",
-          {
-            opacity: "var(--selected-opacity, 0)",
-            d: "M4 16 16 4",
-            stroke: "gray",
-            strokeLinejoin: "round",
-            fill: "none"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "circle",
-          {
-            opacity: "var(--current-opacity, 0)",
-            cx: "10",
-            cy: "10",
-            r: "4.5",
-            fill: "#fff"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "circle",
-          {
-            opacity: "var(--current-opacity, 0)",
-            cx: "10",
-            cy: "10",
-            r: "2.5",
-            fill: "#000"
-          }
-        )
-      ]
-    }
-  );
-};
-export {
-  GenericColorSwatch
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region lib/icons/generic-color-swatch.jsx
+var GenericColorSwatch = ({ style }) => {
+	const clipId = useId();
+	return jsxs("svg", {
+		style,
+		width: "20",
+		height: "20",
+		viewBox: "0 0 20 20",
+		fill: "none",
+		xmlns: "http://www.w3.org/2000/svg",
+		children: [
+			jsx("defs", { children: jsx("clipPath", {
+				id: `genericColorSwatchShape-${clipId}`,
+				children: jsx("rect", {
+					className: "generic-swatch-icon-color-mask",
+					x: "1",
+					y: "1",
+					width: "18",
+					height: "18",
+					rx: "2"
+				})
+			}) }),
+			jsxs("g", {
+				opacity: "var(--checkerboard-opacity, 0)",
+				clipPath: `url(#genericColorSwatchShape-${clipId})`,
+				className: "generic-swatch-icon-checkerboard-group",
+				children: [
+					jsx("path", {
+						fill: "#CCC",
+						d: "M1 1h3v3H1V1zm0 6h3v3H1zm0 6h3v3H1zM7 1h3v3H7zm0 6h3v3H7zm0 6h3v3H7zm6-12h3v3h-3zm0 6h3v3h-3zm0 6h3v3h-3z"
+					}),
+					jsx("path", {
+						fill: "#fff",
+						d: "M4 1h3v3H4zm0 6h3v3H4zm0 6h3v3H4zm6-12h3v3h-3zm0 6h3v3h-3zm0 6h3v3h-3zm6-12h3v3h-3V1zm0 6h3v3h-3zm0 6h3v3h-3z"
+					}),
+					jsx("path", {
+						fill: "#CCC",
+						d: "M4 4h3v3H4zm0 6h3v3H4zm0 6h3v3H4zm6-12h3v3h-3zm0 6h3v3h-3zm0 6h3v3h-3zm6-12h3v3h-3zm0 6h3v3h-3zm0 6h3v3h-3v-3z"
+					}),
+					jsx("path", {
+						fill: "#fff",
+						d: "M1 4h3v3H1zm0 6h3v3H1zm0 6h3v3H1v-3zM7 4h3v3H7zm0 6h3v3H7zm0 6h3v3H7zm6-12h3v3h-3zm0 6h3v3h-3zm0 6h3v3h-3z"
+					})
+				]
+			}),
+			jsx("rect", {
+				className: "generic-swatch-icon-color",
+				x: "1",
+				y: "1",
+				width: "18",
+				height: "18",
+				rx: "2",
+				fill: "var(--selected-color, currentColor)",
+				stroke: "gray"
+			}),
+			jsx("path", {
+				opacity: "var(--selected-opacity, 0)",
+				d: "M4 16 16 4",
+				stroke: "gray",
+				strokeLinejoin: "round",
+				fill: "none"
+			}),
+			jsx("circle", {
+				opacity: "var(--current-opacity, 0)",
+				cx: "10",
+				cy: "10",
+				r: "4.5",
+				fill: "#fff"
+			}),
+			jsx("circle", {
+				opacity: "var(--current-opacity, 0)",
+				cx: "10",
+				cy: "10",
+				r: "2.5",
+				fill: "#000"
+			})
+		]
+	});
 };
+//#endregion
+export { GenericColorSwatch };

package/dist/icons/icon.js

@@ -0,0 +1,67 @@
+import { hasIconLoader, loadIconByName } from "./generated-icon-loaders.js";
+import { dummySpacer } from "./ui-icons/dummy-spacer.js";
+import { cloneElement, useEffect, useState } from "react";
+//#region lib/icons/icon.jsx
+var normalizeIconName = (name) => name.replace(/[-_]+([a-z0-9])/gi, (_, char) => char.toUpperCase()).replace(/^([A-Z])/, (char) => char.toLowerCase());
+var iconCache = new Map();
+var iconLoads = new Map();
+var loadIcon = (iconName) => {
+	if (iconCache.has(iconName)) return Promise.resolve(iconCache.get(iconName));
+	if (!iconLoads.has(iconName)) {
+		const iconLoad = loadIconByName(iconName).then((loadedIcon) => {
+			iconCache.set(iconName, loadedIcon);
+			return loadedIcon;
+		}).catch(() => {
+			iconCache.set(iconName, null);
+			return null;
+		}).finally(() => {
+			iconLoads.delete(iconName);
+		});
+		iconLoads.set(iconName, iconLoad);
+	}
+	return iconLoads.get(iconName);
+};
+var renderIcon = (iconToRender, rest) => {
+	if (!iconToRender) return null;
+	if (Object.keys(rest ?? {}).length === 0) return iconToRender;
+	return cloneElement(iconToRender, rest);
+};
+/**
+* Renders an icon by name without eagerly importing the entire icon set.
+*
+* String icons are lazy-loaded on demand and render `dummySpacer` while the
+* module resolves. Invalid icon names render `fallback` instead.
+*/
+var Icon = ({ icon, fallback = null, ...rest }) => {
+	const normalizedIconName = typeof icon === "string" ? normalizeIconName(icon) : null;
+	const [loadedIcon, setLoadedIcon] = useState(() => normalizedIconName && iconCache.has(normalizedIconName) ? iconCache.get(normalizedIconName) : void 0);
+	useEffect(() => {
+		let isDisposed = false;
+		if (!normalizedIconName) {
+			setLoadedIcon(void 0);
+			return;
+		}
+		if (iconCache.has(normalizedIconName)) {
+			setLoadedIcon(iconCache.get(normalizedIconName));
+			return;
+		}
+		if (!hasIconLoader(normalizedIconName)) {
+			setLoadedIcon(null);
+			return;
+		}
+		setLoadedIcon(void 0);
+		loadIcon(normalizedIconName).then((resolvedIcon) => {
+			if (!isDisposed) setLoadedIcon(resolvedIcon);
+		});
+		return () => {
+			isDisposed = true;
+		};
+	}, [normalizedIconName]);
+	if (!icon) return fallback;
+	if (typeof icon !== "string") return icon;
+	if (loadedIcon === void 0) return renderIcon(dummySpacer, rest);
+	if (!loadedIcon) return fallback;
+	return renderIcon(loadedIcon, rest);
+};
+//#endregion
+export { Icon };