@rovula/ui 0.1.30 → 0.1.32

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",

package/dist/components/Navbar/Navbar.js

@@ -15,7 +15,7 @@ const Navbar = ({ children, className, variant = "default", scrollShadow = false
         return () => window.removeEventListener("scroll", handleScroll);
     }, [scrollShadow]);
     const isTransparent = variant === "transparent";
-    return (_jsxs("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", { position }, scrollShadow && isScrolled && "shadow-[var(--navbar-shadow-scrolled)]", className), children: [!isTransparent && (_jsx("div", { className: "absolute inset-0 -z-10 bg-[rgb(var(--navbar-bg-color))]", "aria-hidden": true })), _jsx("div", { className: cn("absolute inset-0 -z-[5] pointer-events-none", className), "aria-hidden": true }), _jsx("div", { className: cn("relative mx-auto flex h-full justify-between items-center", {
+    return (_jsxs("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 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), children: [!isTransparent && (_jsx("div", { className: "absolute inset-0 -z-10 bg-[var(--navbar-bg-color)]", "aria-hidden": true })), _jsx("div", { className: cn("absolute inset-0 -z-[5] pointer-events-none", className), "aria-hidden": true }), _jsx("div", { className: cn("relative mx-auto flex h-full justify-between items-center", {
                     container,
                 }, containerClassName), children: children || (_jsxs(_Fragment, { children: [_jsx("nav", { className: cn("flex w-1/2 gap-x-[var(--navbar-gap)] text-xl", leftNavClassName), children: leftNav }), _jsx("div", { className: cn("flex flex-shrink-0 flex-wrap justify-center", centerClassName), children: center }), _jsx("nav", { className: cn("flex w-1/2 justify-end gap-x-[var(--navbar-gap)] text-xl", rightNavClassName), children: rightNav })] })) })] }));
 };

package/dist/esm/bundle.css

@@ -2026,8 +2026,8 @@ input[type=number] {
 .border-white\/20{
   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{
   --tw-border-opacity: 1;
@@ -2111,9 +2111,6 @@ input[type=number] {
 .bg-\[rgb\(var\(--base-bg-2\)\)\]{
   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);
 }
@@ -2165,6 +2162,9 @@ input[type=number] {
 .bg-\[var\(--footer-bg-color\)\]{
   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);
@@ -4131,9 +4131,6 @@ input[type=number] {
   --tw-text-opacity: 1 !important;
   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);
 }
@@ -4179,6 +4176,9 @@ input[type=number] {
 .text-\[var\(--loading-track-color\)\]{
   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);