@rovula/ui 0.1.0 → 0.1.1

package/src/components/Footer/Footer.stories.tsx

@@ -0,0 +1,119 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+
+import Footer from "./Footer";
+
+const meta = {
+  title: "Components/Footer",
+  component: Footer,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "fullscreen",
+  },
+  decorators: [
+    (Story) => (
+      <div className="p-5 w-full h-screen flex flex-col">
+        <div className="flex-1">Page content</div>
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof Footer>;
+
+export default meta;
+
+export const Default = {
+  args: {},
+  render: (args) => (
+    <Footer
+      leftNav={
+        <ul className="flex gap-2">
+          <li>© 2024 Company</li>
+          <li>Privacy</li>
+          <li>Terms</li>
+        </ul>
+      }
+      center={<>Footer center</>}
+      rightNav={
+        <ul className="flex gap-2">
+          <li>Link 1</li>
+          <li>Link 2</li>
+          <li>Link 3</li>
+        </ul>
+      }
+    />
+  ),
+} satisfies StoryObj;
+
+export const WithCopyright = {
+  args: {},
+  render: (args) => (
+    <Footer
+      copyright="© 2024 Company. All rights reserved."
+      leftNav={
+        <ul className="flex gap-2">
+          <li>Privacy</li>
+          <li>Terms</li>
+        </ul>
+      }
+      rightNav={
+        <ul className="flex gap-2">
+          <li>Help</li>
+          <li>Contact</li>
+        </ul>
+      }
+    />
+  ),
+} satisfies StoryObj;
+
+export const Simple = {
+  args: {},
+  render: (args) => (
+    <Footer
+      variant="simple"
+      copyright="© 2024 Company. Powered by Rovula."
+    />
+  ),
+} satisfies StoryObj;
+
+export const Transparent = {
+  args: {},
+  render: (args) => (
+    <div className="flex flex-col w-full min-h-screen bg-primary-5">
+      <div className="flex-1 p-8">Page content</div>
+      <Footer
+        variant="transparent"
+        copyright="© 2024 Company"
+        leftNav={
+          <ul className="flex gap-2">
+            <li>Privacy</li>
+            <li>Terms</li>
+          </ul>
+        }
+        rightNav={
+          <ul className="flex gap-2">
+            <li>Help</li>
+            <li>Contact</li>
+          </ul>
+        }
+      />
+    </div>
+  ),
+} satisfies StoryObj;
+
+export const Custom = {
+  args: {},
+  render: (args) => (
+    <Footer
+      className="px-8"
+      copyright="© 2024 Company"
+      center={<>Powered by Rovula</>}
+      rightNav={
+        <ul className="flex gap-2">
+          <li>Help</li>
+          <li>Contact</li>
+        </ul>
+      }
+    />
+  ),
+} satisfies StoryObj;

package/src/components/Footer/Footer.tsx

@@ -0,0 +1,122 @@
+import { cn } from "@/utils/cn";
+import React, { FC, ReactNode } from "react";
+
+export type FooterVariant = "default" | "simple" | "transparent";
+
+export type FooterProps = {
+  /** Layout variant: default (3-column) | simple (centered) | transparent (no bg) */
+  variant?: FooterVariant;
+  /** Copyright text - renders in left (default) or center (simple) */
+  copyright?: ReactNode;
+  position?: "static" | "sticky";
+  children?: ReactNode;
+  leftNav?: ReactNode;
+  rightNav?: ReactNode;
+  center?: ReactNode;
+  container?: boolean;
+  className?: string;
+  containerClassName?: string;
+  leftNavClassName?: string;
+  centerClassName?: string;
+  rightNavClassName?: string;
+};
+
+const Footer: FC<FooterProps> = ({
+  children,
+  className,
+  variant = "default",
+  copyright,
+  center,
+  leftNav,
+  rightNav,
+  position,
+  container = false,
+  containerClassName,
+  leftNavClassName,
+  centerClassName,
+  rightNavClassName,
+}) => {
+  const isSimple = variant === "simple";
+  const isTransparent = variant === "transparent";
+
+  const defaultLeft = leftNav || copyright;
+  const defaultCenter = isSimple ? copyright ?? center : center;
+  const defaultRight = isSimple ? null : rightNav;
+
+  return (
+    <footer
+      className={cn(
+        "relative w-full px-4 py-6 box-border overflow-hidden typography-subtitile2 border-solid border-t-2 text-[var(--footer-text-color)] border-t-[var(--footer-border-color)]",
+        isSimple ? "h-[var(--footer-height-simple)]" : "h-[var(--footer-height)]",
+        { position },
+        className
+      )}
+    >
+      {/* Default bg (z:-10) + overlay for className override - hidden when transparent */}
+      {!isTransparent && (
+        <div
+          className="absolute inset-0 -z-10 bg-[var(--footer-bg-color)]"
+          aria-hidden
+        />
+      )}
+      <div
+        className={cn("absolute inset-0 -z-[5] pointer-events-none", className)}
+        aria-hidden
+      />
+      <div
+        className={cn(
+          "relative mx-auto flex h-full items-center",
+          isSimple ? "justify-center" : "justify-between",
+          { container },
+          containerClassName
+        )}
+      >
+        {children ?? (
+          isSimple ? (
+            <div className={cn("text-center", centerClassName)}>
+              {defaultCenter}
+            </div>
+          ) : (
+            <>
+              <nav
+                className={cn(
+                  "flex w-1/2 items-center gap-x-[var(--footer-gap)] text-xl",
+                  leftNavClassName
+                )}
+              >
+                {copyright && leftNav ? (
+                  <>
+                    <span className="flex-shrink-0">{copyright}</span>
+                    {leftNav}
+                  </>
+                ) : (
+                  defaultLeft
+                )}
+              </nav>
+
+              <div
+                className={cn(
+                  "flex flex-shrink-0 flex-wrap justify-center",
+                  centerClassName
+                )}
+              >
+                {defaultCenter}
+              </div>
+
+              <nav
+                className={cn(
+                  "flex w-1/2 justify-end gap-x-[var(--footer-gap)] text-xl",
+                  rightNavClassName
+                )}
+              >
+                {defaultRight}
+              </nav>
+            </>
+          )
+        )}
+      </div>
+    </footer>
+  );
+};
+
+export default Footer;

package/src/components/Footer/index.ts

@@ -0,0 +1,3 @@
+import Footer from "./Footer";
+
+export { Footer };

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

@@ -368,6 +368,95 @@ export const PreviewHeroIcon = {
   },
 } satisfies StoryObj;
 
+const LUCIDE_DESIGNER_ICONS = [
+  "user",
+  "lock",
+  "eye-closed",
+  "eye",
+  "circle-check",
+  "circle-x",
+  "circle-alert",
+  "sliders-horizontal",
+  "calendar",
+  "search",
+  "check",
+  "triangle-alert",
+];
+
+export const PreviewLucideIcon = {
+  args: {},
+  render: (args) => (
+    <div className="grid grid-cols-1 gap-4 w-full h-full">
+      <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.
+        </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" />
+            <p className="ml-4 font-mono text-sm">{iconName}</p>
+          </div>
+        ))}
+      </div>
+    </div>
+  ),
+} satisfies StoryObj;
+
+export const LucideIconBrowser = {
+  args: {},
+  render: () => {
+    const [names, setNames] = React.useState<string[]>([]);
+    const [filter, setFilter] = React.useState("");
+    const [loading, setLoading] = React.useState(true);
+
+    React.useEffect(() => {
+      import("@/icons").then(({ getLucideIconNames }) => {
+        getLucideIconNames().then((n) => {
+          setNames(n.sort());
+          setLoading(false);
+        });
+      });
+    }, []);
+
+    const filtered = filter
+      ? names.filter((n) => n.toLowerCase().includes(filter.toLowerCase())).slice(0, 80)
+      : names.slice(0, 50);
+
+    return (
+      <div className="flex flex-col gap-4 p-4 max-h-[80vh] overflow-auto">
+        <h4>Lucide icon names ({names.length} total)</h4>
+        <input
+          type="text"
+          placeholder="Search icons..."
+          value={filter}
+          onChange={(e) => setFilter(e.target.value)}
+          className="px-3 py-2 border rounded w-64"
+        />
+        {loading ? (
+          <p>Loading...</p>
+        ) : (
+          <div className="grid grid-cols-[repeat(auto-fill,minmax(140px,1fr))] gap-2">
+            {filtered.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/Icon/Icon.tsx

@@ -7,21 +7,23 @@ import { iconVariants } from "./Icon.styles";
 
 export type IconProps = {
   name: string;
-  type?: "heroicons" | "material" | "custom";
+  type?: "heroicons" | "material" | "lucide" | "custom";
   color?:
-    | "primary"
-    | "secondary"
-    | "success"
-    | "tertiary"
-    | "info"
-    | "warning"
-    | "error"
-    | "inherit";
+  | "primary"
+  | "secondary"
+  | "success"
+  | "tertiary"
+  | "info"
+  | "warning"
+  | "error"
+  | "inherit";
   variant?: "solid" | "outline";
   size?: "sm" | "md" | "lg" | "inherit";
   className?: string;
 } & React.SVGProps<SVGSVGElement>;
 
+const LUCIDE_SIZE = { sm: 16, md: 24, lg: 32 } as const;
+
 const Icon: React.FC<IconProps> = ({
   name,
   type = "heroicons",
@@ -36,25 +38,44 @@ const Icon: React.FC<IconProps> = ({
   > | null>(null);
 
   React.useEffect(() => {
-    const loadIcon = async () => {
-      const icon = getIcon(type, name, variant);
-      if (icon) {
-        setIconComponent(() => icon);
-      } else {
-        console.warn(`Icon "${name}" from "${type}" not found.`);
-      }
-    };
-
-    loadIcon();
+    if (type === "lucide") {
+      import("lucide-react/dynamicIconImports").then(({ default: dynamicIconImports }) => {
+        const loader = dynamicIconImports[name as keyof typeof dynamicIconImports];
+        if (loader) {
+          loader().then((m: { default: React.ComponentType<React.SVGProps<SVGSVGElement>>; }) => {
+            setIconComponent(() => m.default);
+          });
+        } else {
+          console.warn(`Lucide icon "${name}" not found.`);
+        }
+      });
+      return;
+    }
+    const icon = getIcon(type, name, variant);
+    if (icon) setIconComponent(() => icon);
+    else console.warn(`Icon "${name}" from "${type}" not found.`);
   }, [name, type, variant]);
 
-  if (!IconComponent)
+  if (type === "lucide") {
+    if (!IconComponent) {
+      return <span className={cn(iconVariants({ color, size }), className)} />;
+    }
+
+    const sizeNum = size === "inherit" ? 24 : LUCIDE_SIZE[size];
     return (
-      <svg
-        className={cn(iconVariants({ color, size }), className)}
-        {...props}
+      <IconComponent
+        {...(props as any)}
+        size={sizeNum}
+        strokeWidth={sizeNum <= 16 ? 1.5 : 2}
+        absoluteStrokeWidth
+        shapeRendering="geometricPrecision"
+        className={cn(iconVariants({ color, size }), "stroke-current", className)}
       />
     );
+  }
+
+  if (!IconComponent)
+    return <svg className={cn(iconVariants({ color, size }), className)} {...props} />;
 
   return (
     <IconComponent

package/src/components/Navbar/Navbar.stories.tsx

@@ -1,8 +1,8 @@
 import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
 
-import { Checkbox } from "../Checkbox/Checkbox";
 import Navbar from "./Navbar";
+import { Footer } from "../Footer";
 
 const meta = {
   title: "Components/Navbar",
@@ -24,63 +24,117 @@ export default meta;
 
 export const Default = {
   args: {},
-  render: (args) => {
-    console.log("args ", args);
-    const props: typeof args = {
-      ...args,
-    };
-    return (
-      <div className="flex flex-row gap-4 w-full">
-        <Navbar
-          leftNav={
-            <ul className="flex gap-2">
-              <li>link 1</li>
-              <li>link 2</li>
-              <li>link 3</li>
-            </ul>
-          }
-          center={<>Center text</>}
-          rightNav={
-            <ul className="flex gap-2">
-              <li>sss 1</li>
-              <li>ddd 2</li>
-              <li>vvvv 3</li>
-            </ul>
-          }
-        />
-      </div>
-    );
+  render: (args) => (
+    <div className="flex flex-row gap-4 w-full">
+      <Navbar
+        leftNav={
+          <ul className="flex gap-2">
+            <li>link 1</li>
+            <li>link 2</li>
+            <li>link 3</li>
+          </ul>
+        }
+        center={<>Center text</>}
+        rightNav={
+          <ul className="flex gap-2">
+            <li>sss 1</li>
+            <li>ddd 2</li>
+            <li>vvvv 3</li>
+          </ul>
+        }
+      />
+    </div>
+  ),
+} satisfies StoryObj;
+
+export const Transparent = {
+  args: {},
+  render: (args) => (
+    <div className="flex flex-col w-full min-h-screen bg-primary-5">
+      <Navbar
+        variant="transparent"
+        position="sticky"
+        scrollShadow
+        leftNav={
+          <ul className="flex gap-2">
+            <li>link 1</li>
+            <li>link 2</li>
+          </ul>
+        }
+        center={<>Transparent Navbar</>}
+        rightNav={
+          <ul className="flex gap-2">
+            <li>Menu 1</li>
+            <li>Menu 2</li>
+          </ul>
+        }
+      />
+      <div className="flex-1 p-8">Scroll down to see shadow</div>
+      <Footer variant="transparent" copyright="© 2024" />
+    </div>
+  ),
+} satisfies StoryObj;
+
+export const WithScrollShadow = {
+  args: {},
+  parameters: {
+    layout: "fullscreen",
   },
+  decorators: [
+    (Story) => (
+      <div className="w-full h-[200vh]">
+        <div className="h-screen flex flex-col">
+          <Story />
+          <div className="flex-1 p-8 text-center">
+            Scroll down to see navbar shadow
+          </div>
+        </div>
+      </div>
+    ),
+  ],
+  render: (args) => (
+    <Navbar
+      position="sticky"
+      scrollShadow
+      leftNav={
+        <ul className="flex gap-2">
+          <li>link 1</li>
+          <li>link 2</li>
+        </ul>
+      }
+      center={<>Sticky + Scroll Shadow</>}
+      rightNav={
+        <ul className="flex gap-2">
+          <li>Menu 1</li>
+          <li>Menu 2</li>
+        </ul>
+      }
+    />
+  ),
 } satisfies StoryObj;
 
 export const Custom = {
   args: {},
-  render: (args) => {
-    console.log("args ", args);
-    const props: typeof args = {
-      ...args,
-    };
-    return (
-      <div className="flex flex-row gap-4 w-full">
-        <Navbar
-          className="px-8"
-          leftNav={
-            <ul className="flex gap-2">
-              <li>link 1</li>
-              <li>link 2</li>
-              <li>link 3</li>
-            </ul>
-          }
-          center={<>Center text</>}
-          rightNav={
-            <ul className="flex gap-2">
-              <li>sss 1</li>
-              <li>ddd 2</li>
-              <li>vvvv 3</li>
-            </ul>
-          }
-        />
-      </div>
-    );
-  },
+  render: (args) => (
+    <div className="flex flex-row gap-4 w-full">
+      <Navbar
+        className="px-8"
+        leftNav={
+          <ul className="flex gap-2">
+            <li>link 1</li>
+            <li>link 2</li>
+            <li>link 3</li>
+          </ul>
+        }
+        center={<>Center text</>}
+        rightNav={
+          <ul className="flex gap-2">
+            <li>sss 1</li>
+            <li>ddd 2</li>
+            <li>vvvv 3</li>
+          </ul>
+        }
+      />
+    </div>
+  ),
 } satisfies StoryObj;

package/src/components/Navbar/Navbar.tsx

@@ -1,7 +1,13 @@
 import { cn } from "@/utils/cn";
-import React, { FC, ReactNode } from "react";
+import React, { FC, ReactNode, useEffect, useState } from "react";
+
+export type NavbarVariant = "default" | "transparent";
 
 export type NavbarProps = {
+  /** Appearance: default (solid bg) | transparent */
+  variant?: NavbarVariant;
+  /** Show shadow when page is scrolled (works with position="sticky") */
+  scrollShadow?: boolean;
   position?: "static" | "sticky";
   children?: ReactNode;
   leftNav?: ReactNode;
@@ -15,9 +21,13 @@ export type NavbarProps = {
   rightNavClassName?: string;
 };
 
+const SCROLL_THRESHOLD = 4;
+
 const Navbar: FC<NavbarProps> = ({
   children,
   className,
+  variant = "default",
+  scrollShadow = false,
   center,
   leftNav,
   rightNav,
@@ -28,17 +38,45 @@ const Navbar: FC<NavbarProps> = ({
   centerClassName,
   rightNavClassName,
 }) => {
+  const [isScrolled, setIsScrolled] = useState(false);
+
+  useEffect(() => {
+    if (!scrollShadow || typeof window === "undefined") return;
+
+    const handleScroll = () => {
+      setIsScrolled(window.scrollY > SCROLL_THRESHOLD);
+    };
+
+    handleScroll(); // init
+    window.addEventListener("scroll", handleScroll, { passive: true });
+    return () => window.removeEventListener("scroll", handleScroll);
+  }, [scrollShadow]);
+
+  const isTransparent = variant === "transparent";
+
   return (
     <header
       className={cn(
-        "w-full px-4 py-6 h-[var(--navbar-height)] box-border overflow-hidden typography-subtitile2 border-solid border-b-2 bg-[rgb(var(--navbar-bg-color))] text-[rgb(var(--navbar-text-color))] border-b-[rgb(var(--navbar-border-color))]",
+        "relative w-full px-4 py-6 h-[var(--navbar-height)] box-border overflow-hidden typography-subtitile2 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
       )}
     >
+      {/* 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))]"
+          aria-hidden
+        />
+      )}
+      <div
+        className={cn("absolute inset-0 -z-[5] pointer-events-none", className)}
+        aria-hidden
+      />
       <div
         className={cn(
-          "mx-auto flex h-full justify-between items-center",
+          "relative mx-auto flex h-full justify-between items-center",
           {
             container,
           },