@rebasepro/ui 0.24.0 → 0.24.1-canary.gcb918fc

package/dist/icons/LucideIconByName.d.ts

@@ -1,31 +1,34 @@
 import React from "react";
 import type { LucideIcon } from "lucide-react";
 /**
- * Rendering a Lucide icon chosen at runtime, without shipping all 1,600 of them
+ * Rendering a Lucide icon chosen at runtime, without shipping all ~1,750 of them
  * on the login screen.
  *
- * `@rebasepro/ui` used to re-export lucide's whole `icons` map:
+ * `@rebasepro/ui` re-exports lucide's whole `icons` map:
  *
  *     export { icons as lucideIcons } from "lucide-react";
  *
  * That map is an object literal holding a reference to every icon component in
  * the library, so a tree-shaker cannot drop a single one — reaching the map
- * reaches all of them. Two callers reached it, both by name lookup: `getIcon`
+ * reaches all of them. Two callers used to reach it, both by name lookup: `getIcon`
  * in `@rebasepro/app` (a collection's `icon: "ShoppingCart"`) and the admin's
- * icon picker. That put 822 kB of SVG components into the entry chunk's static
- * graph, `modulepreload`ed before authentication.
+ * icon picker. That put 822 kB of SVG components (unminified) into the entry
+ * chunk's static graph, `modulepreload`ed before authentication.
  *
  * The ~130 icons the product's own chrome uses are still plain named imports
  * from `lucide-react`, which tree-shake to just those. Only the by-name lookup
- * goes through here, and it pays for the map once, asynchronously, the first
- * time a runtime-chosen icon is rendered.
+ * goes through here (both callers render {@link LucideIconByName} now), and it
+ * pays for the map once, asynchronously, the first time a runtime-chosen icon
+ * is rendered: an async chunk of ~480 kB minified, ~120 kB gzipped.
  */
 type IconsMap = Record<string, LucideIcon | undefined>;
 /**
  * The full lucide icon map, fetched on first use and cached for the session.
  *
- * Prefer {@link LucideIconByName}. This is here for callers that need to know
- * whether a name resolves, such as the icon picker's grid.
+ * Prefer {@link LucideIconByName}, which calls this. It is exported for callers
+ * that need the whole set at once; nothing in the admin does (the icon picker
+ * renders `LucideIconByName` per icon). To ask whether a name exists without
+ * fetching anything, use `iconKeys`.
  */
 export declare function loadLucideIcons(): Promise<IconsMap>;
 /** The map if it has already been fetched, otherwise `undefined`. Never fetches. */

package/dist/icons/LucideIconByName.es.js

@@ -0,0 +1,83 @@
+"use client";
+import React from "react";
+import { Fragment, jsx } from "react/jsx-runtime";
+//#region src/icons/LucideIconByName.tsx
+var loaded;
+var pending;
+/**
+* The full lucide icon map, fetched on first use and cached for the session.
+*
+* Prefer {@link LucideIconByName}, which calls this. It is exported for callers
+* that need the whole set at once; nothing in the admin does (the icon picker
+* renders `LucideIconByName` per icon). To ask whether a name exists without
+* fetching anything, use `iconKeys`.
+*/
+function loadLucideIcons() {
+	if (loaded) return Promise.resolve(loaded);
+	pending ??= import("./lucide_icon_map.es.js").then(({ icons }) => {
+		loaded = icons;
+		return loaded;
+	});
+	return pending;
+}
+/** The map if it has already been fetched, otherwise `undefined`. Never fetches. */
+function getLoadedLucideIcons() {
+	return loaded;
+}
+/**
+* Subscribe to the icon map.
+*
+* Returns it synchronously once loaded — including on the very first render of
+* every icon after the first one anywhere, which is what stops a page full of
+* icons from each flashing its placeholder.
+*/
+function useLucideIcons() {
+	const [map, setMap] = React.useState(loaded);
+	React.useEffect(() => {
+		if (map) return;
+		let cancelled = false;
+		loadLucideIcons().then((resolved) => {
+			if (!cancelled) setMap(resolved);
+		}).catch((error) => console.error("[rebase] could not load the icon set", error));
+		return () => {
+			cancelled = true;
+		};
+	}, [map]);
+	return map;
+}
+function toPascalCase(str) {
+	return str.split(/[-_]/).map((word) => word.charAt(0).toUpperCase() + word.slice(1)).join("");
+}
+/**
+* The same resolution order the two call sites used against the eager map:
+* exact name, then PascalCase, then `CircleAlert` as the visible "unknown icon".
+*/
+function resolveLucideIcon(icons, name) {
+	return icons[name] ?? icons[toPascalCase(name)] ?? icons.CircleAlert;
+}
+/**
+* An icon named at runtime. Renders `fallback` until the icon set arrives.
+*/
+var LucideIconByName = React.memo(function LucideIconByName({ name, size, className, fallback }) {
+	const icons = useLucideIcons();
+	const Icon = icons ? resolveLucideIcon(icons, name) : void 0;
+	if (!Icon) {
+		if (fallback !== void 0) return /* @__PURE__ */ jsx(Fragment, { children: fallback });
+		return /* @__PURE__ */ jsx("span", {
+			"aria-hidden": true,
+			className: "inline-block shrink-0",
+			style: {
+				width: size,
+				height: size
+			}
+		});
+	}
+	return /* @__PURE__ */ jsx(Icon, {
+		size,
+		className
+	});
+});
+//#endregion
+export { LucideIconByName, getLoadedLucideIcons, loadLucideIcons, resolveLucideIcon, useLucideIcons };
+
+//# sourceMappingURL=LucideIconByName.es.js.map

package/dist/icons/LucideIconByName.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LucideIconByName.es.js","names":[],"sources":["../../src/icons/LucideIconByName.tsx"],"sourcesContent":["\"use client\";\n\nimport React from \"react\";\nimport type { LucideIcon } from \"lucide-react\";\n\n/**\n * Rendering a Lucide icon chosen at runtime, without shipping all ~1,750 of them\n * on the login screen.\n *\n * `@rebasepro/ui` re-exports lucide's whole `icons` map:\n *\n *     export { icons as lucideIcons } from \"lucide-react\";\n *\n * That map is an object literal holding a reference to every icon component in\n * the library, so a tree-shaker cannot drop a single one — reaching the map\n * reaches all of them. Two callers used to reach it, both by name lookup: `getIcon`\n * in `@rebasepro/app` (a collection's `icon: \"ShoppingCart\"`) and the admin's\n * icon picker. That put 822 kB of SVG components (unminified) into the entry\n * chunk's static graph, `modulepreload`ed before authentication.\n *\n * The ~130 icons the product's own chrome uses are still plain named imports\n * from `lucide-react`, which tree-shake to just those. Only the by-name lookup\n * goes through here (both callers render {@link LucideIconByName} now), and it\n * pays for the map once, asynchronously, the first time a runtime-chosen icon\n * is rendered: an async chunk of ~480 kB minified, ~120 kB gzipped.\n */\n\ntype IconsMap = Record<string, LucideIcon | undefined>;\n\nlet loaded: IconsMap | undefined;\nlet pending: Promise<IconsMap> | undefined;\n\n/**\n * The full lucide icon map, fetched on first use and cached for the session.\n *\n * Prefer {@link LucideIconByName}, which calls this. It is exported for callers\n * that need the whole set at once; nothing in the admin does (the icon picker\n * renders `LucideIconByName` per icon). To ask whether a name exists without\n * fetching anything, use `iconKeys`.\n */\nexport function loadLucideIcons(): Promise<IconsMap> {\n    if (loaded) return Promise.resolve(loaded);\n    // A local module, not `import(\"lucide-react\")`: lucide-react is statically\n    // imported too, so importing IT dynamically cannot split anything off and\n    // the map lands in the static chunk. See `lucide_icon_map.ts`.\n    pending ??= import(\"./lucide_icon_map\").then(({ icons }) => {\n        loaded = icons as IconsMap;\n        return loaded;\n    });\n    return pending;\n}\n\n/** The map if it has already been fetched, otherwise `undefined`. Never fetches. */\nexport function getLoadedLucideIcons(): IconsMap | undefined {\n    return loaded;\n}\n\n/**\n * Subscribe to the icon map.\n *\n * Returns it synchronously once loaded — including on the very first render of\n * every icon after the first one anywhere, which is what stops a page full of\n * icons from each flashing its placeholder.\n */\nexport function useLucideIcons(): IconsMap | undefined {\n    const [map, setMap] = React.useState<IconsMap | undefined>(loaded);\n    React.useEffect(() => {\n        if (map) return;\n        let cancelled = false;\n        loadLucideIcons()\n            .then(resolved => { if (!cancelled) setMap(resolved); })\n            .catch(error => console.error(\"[rebase] could not load the icon set\", error));\n        return () => { cancelled = true; };\n    }, [map]);\n    return map;\n}\n\nfunction toPascalCase(str: string): string {\n    return str.split(/[-_]/).map(word => word.charAt(0).toUpperCase() + word.slice(1)).join(\"\");\n}\n\n/**\n * The same resolution order the two call sites used against the eager map:\n * exact name, then PascalCase, then `CircleAlert` as the visible \"unknown icon\".\n */\nexport function resolveLucideIcon(icons: IconsMap, name: string): LucideIcon | undefined {\n    return icons[name] ?? icons[toPascalCase(name)] ?? icons.CircleAlert;\n}\n\nexport type LucideIconByNameProps = {\n    /**\n     * A PascalCase lucide icon name, e.g. `\"ShoppingCart\"`. Whether a name\n     * exists can be answered ahead of the fetch with `iconKeys`, which is a\n     * plain string array and costs nothing.\n     */\n    name: string;\n    size?: number;\n    className?: string;\n    /** Rendered while the icon set is in flight. Defaults to a blank box of `size`. */\n    fallback?: React.ReactNode;\n};\n\n/**\n * An icon named at runtime. Renders `fallback` until the icon set arrives.\n */\nexport const LucideIconByName = React.memo(\n    function LucideIconByName({ name, size, className, fallback }: LucideIconByNameProps) {\n        const icons = useLucideIcons();\n        const Icon = icons ? resolveLucideIcon(icons, name) : undefined;\n\n        if (!Icon) {\n            if (fallback !== undefined) return <>{fallback}</>;\n            // A box of the right size, so the layout does not jump when the\n            // icon lands.\n            return <span aria-hidden={true}\n                className={\"inline-block shrink-0\"}\n                style={{ width: size, height: size }}/>;\n        }\n\n        return <Icon size={size}\n            className={className}/>;\n    }\n);\n"],"mappings":";;;;AA6BA,IAAI;AACJ,IAAI;;;;;;;;;AAUJ,SAAgB,kBAAqC;CACjD,IAAI,QAAQ,OAAO,QAAQ,QAAQ,MAAM;CAIzC,YAAY,OAAO,0BAAoB,CAAC,MAAM,EAAE,YAAY;EACxD,SAAS;EACT,OAAO;CACX,CAAC;CACD,OAAO;AACX;;AAGA,SAAgB,uBAA6C;CACzD,OAAO;AACX;;;;;;;;AASA,SAAgB,iBAAuC;CACnD,MAAM,CAAC,KAAK,UAAU,MAAM,SAA+B,MAAM;CACjE,MAAM,gBAAgB;EAClB,IAAI,KAAK;EACT,IAAI,YAAY;EAChB,gBAAgB,CAAC,CACZ,MAAK,aAAY;GAAE,IAAI,CAAC,WAAW,OAAO,QAAQ;EAAG,CAAC,CAAC,CACvD,OAAM,UAAS,QAAQ,MAAM,wCAAwC,KAAK,CAAC;EAChF,aAAa;GAAE,YAAY;EAAM;CACrC,GAAG,CAAC,GAAG,CAAC;CACR,OAAO;AACX;AAEA,SAAS,aAAa,KAAqB;CACvC,OAAO,IAAI,MAAM,MAAM,CAAC,CAAC,KAAI,SAAQ,KAAK,OAAO,CAAC,CAAC,CAAC,YAAY,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE;AAC9F;;;;;AAMA,SAAgB,kBAAkB,OAAiB,MAAsC;CACrF,OAAO,MAAM,SAAS,MAAM,aAAa,IAAI,MAAM,MAAM;AAC7D;;;;AAkBA,IAAa,mBAAmB,MAAM,KAClC,SAAS,iBAAiB,EAAE,MAAM,MAAM,WAAW,YAAmC;CAClF,MAAM,QAAQ,eAAe;CAC7B,MAAM,OAAO,QAAQ,kBAAkB,OAAO,IAAI,IAAI,KAAA;CAEtD,IAAI,CAAC,MAAM;EACP,IAAI,aAAa,KAAA,GAAW,OAAO,oBAAA,UAAA,EAAA,UAAG,SAAW,CAAA;EAGjD,OAAO,oBAAC,QAAD;GAAM,eAAa;GACtB,WAAW;GACX,OAAO;IAAE,OAAO;IAAM,QAAQ;GAAK;EAAG,CAAA;CAC9C;CAEA,OAAO,oBAAC,MAAD;EAAY;EACJ;CAAW,CAAA;AAC9B,CACJ"}

package/dist/icons/cool_icon_keys.es.js

@@ -0,0 +1,55 @@
+//#region src/icons/cool_icon_keys.ts
+var coolIconKeys = [
+	"Rows4",
+	"Video",
+	"Plane",
+	"LayoutDashboard",
+	"LayoutGrid",
+	"Square",
+	"Snowflake",
+	"CircleDashed",
+	"AlignCenterHorizontal",
+	"Disc",
+	"Infinity",
+	"Maximize",
+	"Play",
+	"Sparkles",
+	"Music",
+	"Wallet",
+	"Layout",
+	"Zap",
+	"Circle",
+	"Coffee",
+	"ImageOff",
+	"Sun",
+	"Cable",
+	"CalendarDays",
+	"Dices",
+	"Shapes",
+	"Cloud",
+	"Palette",
+	"CreditCard",
+	"Headphones",
+	"Egg",
+	"Disc3",
+	"Flag",
+	"Bandage",
+	"Thermometer",
+	"Hexagon",
+	"Network",
+	"Library",
+	"Pizza",
+	"Cpu",
+	"Plug",
+	"Files",
+	"Globe",
+	"SignalZero",
+	"Gamepad2",
+	"CloudLightning",
+	"ListTree",
+	"Command"
+];
+//#endregion
+export { coolIconKeys };
+
+//# sourceMappingURL=cool_icon_keys.es.js.map

package/dist/icons/cool_icon_keys.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cool_icon_keys.es.js","names":[],"sources":["../../src/icons/cool_icon_keys.ts"],"sourcesContent":["export const coolIconKeys: string[] = [\n    \"Rows4\", \"Video\",\n    \"Plane\", \"LayoutDashboard\", \"LayoutGrid\", \"Square\", \"Snowflake\",\n    \"CircleDashed\", \"AlignCenterHorizontal\", \"Disc\", \"Infinity\",\n    \"Maximize\", \"Play\", \"Sparkles\", \"Music\",\n    \"Wallet\", \"Layout\", \"Zap\", \"Circle\", \"Coffee\",\n    \"ImageOff\", \"Sun\", \"Cable\", \"CalendarDays\",\n    \"Dices\", \"Shapes\", \"Cloud\", \"Palette\",\n    \"CreditCard\", \"Headphones\", \"Egg\", \"Disc3\", \"Flag\",\n    \"Bandage\", \"Thermometer\", \"Hexagon\", \"Network\", \"Library\", \"Pizza\",\n    \"Cpu\", \"Plug\", \"Files\", \"Globe\", \"SignalZero\",\n    \"Gamepad2\", \"CloudLightning\", \"ListTree\", \"Command\"];\n"],"mappings":";AAAA,IAAa,eAAyB;CAClC;CAAS;CACT;CAAS;CAAmB;CAAc;CAAU;CACpD;CAAgB;CAAyB;CAAQ;CACjD;CAAY;CAAQ;CAAY;CAChC;CAAU;CAAU;CAAO;CAAU;CACrC;CAAY;CAAO;CAAS;CAC5B;CAAS;CAAU;CAAS;CAC5B;CAAc;CAAc;CAAO;CAAS;CAC5C;CAAW;CAAe;CAAW;CAAW;CAAW;CAC3D;CAAO;CAAQ;CAAS;CAAS;CACjC;CAAY;CAAkB;CAAY;AAAS"}