@rovula/ui 0.1.30 → 0.1.31

package/dist/cjs/types/components/Icon/Icon.stories.d.ts

@@ -510,6 +510,10 @@ export declare const LucideIconBrowser: {
     args: {};
     render: () => import("react/jsx-runtime").JSX.Element;
 };
+export declare const LucideIconAllBrowser: {
+    args: {};
+    render: () => import("react/jsx-runtime").JSX.Element;
+};
 export declare const PreviewMaterialIcon: {
     args: {};
     render: (args: {}) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Icon/Icon.stories.js

@@ -348,7 +348,7 @@ const LUCIDE_DESIGNER_ICONS = [
 ];
 export const PreviewLucideIcon = {
     args: {},
-    render: (args) => (_jsx("div", { className: "grid grid-cols-1 gap-4 w-full h-full", children: _jsxs("div", { className: "flex flex-col justify-start gap-4 w-full h-full", children: [_jsx("h4", { children: "Lucide icons (designer set)" }), _jsxs("p", { className: "text-sm text-gray-500", children: ["Names from ", _jsx("a", { href: "https://lucide.dev/icons", target: "_blank", rel: "noreferrer", className: "underline", children: "lucide.dev/icons" }), ". Use ", _jsx("code", { children: "getLucideIconNames()" }), " for full list."] }), LUCIDE_DESIGNER_ICONS.map((iconName) => (_jsxs("div", { className: "flex flex-row gap-6 items-center", children: [_jsx(Icon, Object.assign({}, args, { type: "lucide", name: iconName, variant: "outline", size: "sm" })), _jsx(Icon, Object.assign({}, args, { type: "lucide", name: iconName, variant: "outline", size: "md" })), _jsx(Icon, Object.assign({}, args, { type: "lucide", name: iconName, variant: "outline", size: "lg" })), _jsx("p", { className: "ml-4 font-mono text-sm", children: iconName })] }, iconName)))] }) })),
+    render: (args) => (_jsx("div", { className: "grid grid-cols-1 gap-4 w-full h-full", children: _jsxs("div", { className: "flex flex-col justify-start gap-4 w-full h-full", children: [_jsx("h4", { children: "Lucide icons (designer set)" }), _jsxs("p", { className: "text-sm text-gray-500", children: ["Names from", " ", _jsx("a", { href: "https://lucide.dev/icons", target: "_blank", rel: "noreferrer", className: "underline", children: "lucide.dev/icons" }), ". Use ", _jsx("code", { children: "getLucideIconNames()" }), " for full list."] }), LUCIDE_DESIGNER_ICONS.map((iconName) => (_jsxs("div", { className: "flex flex-row gap-6 items-center", children: [_jsx(Icon, Object.assign({}, args, { type: "lucide", name: iconName, variant: "outline", size: "sm" })), _jsx(Icon, Object.assign({}, args, { type: "lucide", name: iconName, variant: "outline", size: "md" })), _jsx(Icon, Object.assign({}, args, { type: "lucide", name: iconName, variant: "outline", size: "lg" })), _jsx("p", { className: "ml-4 font-mono text-sm", children: iconName })] }, iconName)))] }) })),
 };
 export const LucideIconBrowser = {
     args: {},
@@ -364,12 +364,31 @@ export const LucideIconBrowser = {
                 });
             });
         }, []);
+        console.log(names);
         const filtered = filter
-            ? names.filter((n) => n.toLowerCase().includes(filter.toLowerCase())).slice(0, 80)
+            ? names
+                .filter((n) => n.toLowerCase().includes(filter.toLowerCase()))
+                .slice(0, 80)
             : names.slice(0, 50);
         return (_jsxs("div", { className: "flex flex-col gap-4 p-4 max-h-[80vh] overflow-auto", children: [_jsxs("h4", { children: ["Lucide icon names (", names.length, " total)"] }), _jsx("input", { type: "text", placeholder: "Search icons...", value: filter, onChange: (e) => setFilter(e.target.value), className: "px-3 py-2 border rounded w-64" }), loading ? (_jsx("p", { children: "Loading..." })) : (_jsx("div", { className: "grid grid-cols-[repeat(auto-fill,minmax(140px,1fr))] gap-2", children: filtered.map((name) => (_jsxs("div", { className: "flex flex-col items-center gap-1 p-2 border rounded hover:bg-gray-50", children: [_jsx(Icon, { type: "lucide", name: name, size: "md" }), _jsx("span", { className: "font-mono text-xs truncate w-full text-center", children: name })] }, name))) }))] }));
     },
 };
+export const LucideIconAllBrowser = {
+    args: {},
+    render: () => {
+        const [names, setNames] = React.useState([]);
+        const [loading, setLoading] = React.useState(true);
+        React.useEffect(() => {
+            import("@/icons").then(({ getLucideIconNames }) => {
+                getLucideIconNames().then((n) => {
+                    setNames(n.sort());
+                    setLoading(false);
+                });
+            });
+        }, []);
+        return (_jsxs("div", { className: "flex flex-col gap-4 p-4 max-h-[80vh] overflow-auto w-full h-full", children: [_jsxs("h4", { children: ["Lucide icon names (", names.length, " total)"] }), loading ? (_jsx("p", { children: "Loading..." })) : (_jsx("div", { className: "grid grid-cols-[repeat(auto-fill,minmax(140px,1fr))] gap-2", children: names.map((name) => (_jsxs("div", { className: "flex flex-col items-center gap-1 p-2 border rounded hover:bg-gray-50", children: [_jsx(Icon, { type: "lucide", name: name, size: "md" }), _jsx("span", { className: "font-mono text-xs truncate w-full text-center", children: name })] }, name))) }))] }));
+    },
+};
 export const PreviewMaterialIcon = {
     args: {
     // variant: "outline",