@rovula/ui 0.1.30 → 0.1.31

package/dist/esm/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rovula/ui",
-  "version": "0.1.30",
+  "version": "0.1.31",
   "main": "dist/cjs/bundle.js",
   "module": "dist/esm/bundle.js",
   "types": "dist/index.d.ts",
@@ -63,10 +63,10 @@
     "@vitejs/plugin-react": "^4.3.4",
     "autoprefixer": "^10.4.19",
     "babel-loader": "^9.1.3",
-    "jsdom": "^26.0.0",
     "chromatic": "^11.7.1",
     "copyfiles": "^2.4.1",
     "css-loader": "^7.1.2",
+    "jsdom": "^26.0.0",
     "postcss": "^8.4.38",
     "rollup": "^4.18.0",
     "rollup-plugin-dts": "^6.1.1",
@@ -111,7 +111,7 @@
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "date-fns": "^3.6.0",
-    "lucide-react": "^0.460.0",
+    "lucide-react": "^1.7.0",
     "react": "^17.0.0 || ^18.0.0",
     "react-day-picker": "^9.0.7",
     "react-dom": "^17.0.0 || ^18.0.0",

package/src/components/Icon/Icon.stories.tsx

@@ -390,13 +390,40 @@ export const PreviewLucideIcon = {
       <div className="flex flex-col justify-start gap-4 w-full h-full">
         <h4>Lucide icons (designer set)</h4>
         <p className="text-sm text-gray-500">
-          Names from <a href="https://lucide.dev/icons" target="_blank" rel="noreferrer" className="underline">lucide.dev/icons</a>. Use <code>getLucideIconNames()</code> for full list.
+          Names from{" "}
+          <a
+            href="https://lucide.dev/icons"
+            target="_blank"
+            rel="noreferrer"
+            className="underline"
+          >
+            lucide.dev/icons
+          </a>
+          . Use <code>getLucideIconNames()</code> for full list.
         </p>
         {LUCIDE_DESIGNER_ICONS.map((iconName) => (
           <div key={iconName} className="flex flex-row gap-6 items-center">
-            <Icon {...args} type="lucide" name={iconName} variant="outline" size="sm" />
-            <Icon {...args} type="lucide" name={iconName} variant="outline" size="md" />
-            <Icon {...args} type="lucide" name={iconName} variant="outline" size="lg" />
+            <Icon
+              {...args}
+              type="lucide"
+              name={iconName}
+              variant="outline"
+              size="sm"
+            />
+            <Icon
+              {...args}
+              type="lucide"
+              name={iconName}
+              variant="outline"
+              size="md"
+            />
+            <Icon
+              {...args}
+              type="lucide"
+              name={iconName}
+              variant="outline"
+              size="lg"
+            />
             <p className="ml-4 font-mono text-sm">{iconName}</p>
           </div>
         ))}
@@ -421,8 +448,12 @@ 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 (
@@ -457,6 +488,47 @@ export const LucideIconBrowser = {
   },
 } satisfies StoryObj;
 
+export const LucideIconAllBrowser = {
+  args: {},
+  render: () => {
+    const [names, setNames] = React.useState<string[]>([]);
+    const [loading, setLoading] = React.useState(true);
+
+    React.useEffect(() => {
+      import("@/icons").then(({ getLucideIconNames }) => {
+        getLucideIconNames().then((n) => {
+          setNames(n.sort());
+          setLoading(false);
+        });
+      });
+    }, []);
+
+    return (
+      <div className="flex flex-col gap-4 p-4 max-h-[80vh] overflow-auto w-full h-full">
+        <h4>Lucide icon names ({names.length} total)</h4>
+
+        {loading ? (
+          <p>Loading...</p>
+        ) : (
+          <div className="grid grid-cols-[repeat(auto-fill,minmax(140px,1fr))] gap-2">
+            {names.map((name) => (
+              <div
+                key={name}
+                className="flex flex-col items-center gap-1 p-2 border rounded hover:bg-gray-50"
+              >
+                <Icon type="lucide" name={name} size="md" />
+                <span className="font-mono text-xs truncate w-full text-center">
+                  {name}
+                </span>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    );
+  },
+} satisfies StoryObj;
+
 export const PreviewMaterialIcon = {
   args: {
     // variant: "outline",