@rovula/ui 0.1.30 → 0.1.32

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/dist/src/theme/global.css

@@ -2993,9 +2993,9 @@
   --loading-track-color: var(--transparent-grey-32);
   /* Navbar */
   --navbar-height: 58px;
-  --navbar-bg-color: var(--primary-default);
-  --navbar-text-color: var(--primary-foreground);
-  --navbar-border-color: var(--primary-foreground);
+  --navbar-bg-color: var(--bg-bg1);
+  --navbar-text-color: var(--text-contrast-max);
+  --navbar-border-color: var(--bg-stroke1);
   --navbar-gap: 16px;
   --navbar-shadow-scrolled: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
   /* Footer */
@@ -5686,8 +5686,8 @@ input[type=number] {
   border-color: rgb(255 255 255 / 0.2);
 }
 
-.border-b-\[rgb\(var\(--navbar-border-color\)\)\] {
-  border-bottom-color: rgb(var(--navbar-border-color));
+.border-b-\[var\(--navbar-border-color\)\] {
+  border-bottom-color: var(--navbar-border-color);
 }
 
 .border-l-input-default-stroke {
@@ -5794,10 +5794,6 @@ input[type=number] {
   background-color: rgb(var(--base-bg-2));
 }
 
-.bg-\[rgb\(var\(--navbar-bg-color\)\)\] {
-  background-color: rgb(var(--navbar-bg-color));
-}
-
 .bg-\[var\(--badge-default-bg\)\] {
   background-color: var(--badge-default-bg);
 }
@@ -5866,6 +5862,10 @@ input[type=number] {
   background-color: var(--footer-bg-color);
 }
 
+.bg-\[var\(--navbar-bg-color\)\] {
+  background-color: var(--navbar-bg-color);
+}
+
 .bg-action-button-icon-active {
   --tw-bg-opacity: 1;
   background-color: color-mix(in srgb, var(--action-button-icon-active-bg) calc(100% * var(--tw-bg-opacity, 1)), transparent);
@@ -8346,10 +8346,6 @@ input[type=number] {
   color: color-mix(in srgb, var(--state-primary-text-solid) calc(100% * var(--tw-text-opacity, 1)), transparent) !important;
 }
 
-.text-\[rgb\(var\(--navbar-text-color\)\)\] {
-  color: rgb(var(--navbar-text-color));
-}
-
 .text-\[var\(--badge-default-text\)\] {
   color: var(--badge-default-text);
 }
@@ -8410,6 +8406,10 @@ input[type=number] {
   color: var(--loading-track-color);
 }
 
+.text-\[var\(--navbar-text-color\)\] {
+  color: var(--navbar-text-color);
+}
+
 .text-action-button-icon-active {
   --tw-text-opacity: 1;
   color: color-mix(in srgb, var(--action-button-icon-active-text) calc(100% * var(--tw-text-opacity, 1)), transparent);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rovula/ui",
-  "version": "0.1.30",
+  "version": "0.1.32",
   "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",

package/src/components/Navbar/Navbar.tsx

@@ -57,16 +57,17 @@ const Navbar: FC<NavbarProps> = ({
   return (
     <header
       className={cn(
-        "relative w-full px-4 py-6 h-[var(--navbar-height)] box-border overflow-hidden typography-subtitle2 border-solid border-b-2 text-[rgb(var(--navbar-text-color))] border-b-[rgb(var(--navbar-border-color))] transition-shadow duration-200",
+        "relative w-full px-4 py-6 h-[var(--navbar-height)] box-border overflow-hidden typography-subtitle2 border-solid border-b-2 border-b-[var(--navbar-border-color)] transition-shadow duration-200",
+        isTransparent ? "text-inherit" : "text-[var(--navbar-text-color)]",
         { position },
         scrollShadow && isScrolled && "shadow-[var(--navbar-shadow-scrolled)]",
-        className
+        className,
       )}
     >
       {/* Default bg (z:-10) + overlay for className override - hidden when transparent */}
       {!isTransparent && (
         <div
-          className="absolute inset-0 -z-10 bg-[rgb(var(--navbar-bg-color))]"
+          className="absolute inset-0 -z-10 bg-[var(--navbar-bg-color)]"
           aria-hidden
         />
       )}
@@ -80,7 +81,7 @@ const Navbar: FC<NavbarProps> = ({
           {
             container,
           },
-          containerClassName
+          containerClassName,
         )}
       >
         {children || (
@@ -88,7 +89,7 @@ const Navbar: FC<NavbarProps> = ({
             <nav
               className={cn(
                 "flex w-1/2 gap-x-[var(--navbar-gap)] text-xl",
-                leftNavClassName
+                leftNavClassName,
               )}
             >
               {leftNav}
@@ -97,7 +98,7 @@ const Navbar: FC<NavbarProps> = ({
             <div
               className={cn(
                 "flex flex-shrink-0 flex-wrap justify-center",
-                centerClassName
+                centerClassName,
               )}
             >
               {center}
@@ -106,7 +107,7 @@ const Navbar: FC<NavbarProps> = ({
             <nav
               className={cn(
                 "flex w-1/2 justify-end gap-x-[var(--navbar-gap)] text-xl",
-                rightNavClassName
+                rightNavClassName,
               )}
             >
               {rightNav}

package/src/theme/tokens/components/navbar.css

@@ -1,9 +1,9 @@
 :root {
   /* Navbar */
   --navbar-height: 58px;
-  --navbar-bg-color: var(--primary-default);
-  --navbar-text-color: var(--primary-foreground);
-  --navbar-border-color: var(--primary-foreground);
+  --navbar-bg-color: var(--bg-bg1);
+  --navbar-text-color: var(--text-contrast-max);
+  --navbar-border-color: var(--bg-stroke1);
   --navbar-gap: 16px;
   --navbar-shadow-scrolled: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
 }