@rovula/ui 0.1.0 → 0.1.2

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

package/src/components/PasswordInput/PasswordInput.stories.tsx

@@ -0,0 +1,111 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import PasswordInput from "./PasswordInput";
+
+const meta = {
+  title: "Components/PasswordInput",
+  component: PasswordInput,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "fullscreen",
+  },
+  decorators: [
+    (Story) => (
+      <div className="p-5 flex w-full bg-[rgb(var(--base-bg-2))]">
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof PasswordInput>;
+
+export default meta;
+
+export const Default = {
+  args: {
+    label: "Password",
+    placeholder: "Enter your password",
+    fullwidth: true,
+  },
+  render: (args) => (
+    <div className="flex flex-col gap-4 w-full max-w-md">
+      <PasswordInput id="1" size="lg" {...args} />
+      <PasswordInput id="2" size="md" {...args} />
+      <PasswordInput id="3" size="sm" {...args} />
+    </div>
+  ),
+} satisfies StoryObj;
+
+export const WithHelperText = {
+  args: {
+    label: "Password",
+    placeholder: "Enter your password",
+    helperText: "Must be at least 8 characters",
+    fullwidth: true,
+  },
+  render: (args) => (
+    <div className="w-full max-w-md">
+      <PasswordInput id="1" size="md" {...args} />
+    </div>
+  ),
+} satisfies StoryObj;
+
+export const WithError = {
+  args: {
+    label: "Password",
+    placeholder: "Enter your password",
+    error: true,
+    errorMessage: "Password is required",
+    fullwidth: true,
+  },
+  render: (args) => (
+    <div className="w-full max-w-md">
+      <PasswordInput id="1" size="md" {...args} />
+    </div>
+  ),
+} satisfies StoryObj;
+
+export const Disabled = {
+  args: {
+    label: "Password",
+    value: "secret123",
+    disabled: true,
+    fullwidth: true,
+  },
+  render: (args) => (
+    <div className="w-full max-w-md">
+      <PasswordInput id="1" size="md" {...args} />
+    </div>
+  ),
+} satisfies StoryObj;
+
+export const CustomIcons = {
+  args: {
+    label: "Password",
+    placeholder: "Enter your password",
+    fullwidth: true,
+  },
+  render: (args) => (
+    <div className="w-full max-w-md">
+      <PasswordInput
+        {...args}
+        id="1"
+        hideIcon={<span className="text-sm">👁</span>}
+        showIcon={<span className="text-sm">🙈</span>}
+      />
+    </div>
+  ),
+} satisfies StoryObj;
+
+export const WithoutToggle = {
+  args: {
+    label: "Password",
+    placeholder: "Enter your password",
+    showToggle: false,
+    fullwidth: true,
+  },
+  render: (args) => (
+    <div className="w-full max-w-md">
+      <PasswordInput id="1" size="md" {...args} />
+    </div>
+  ),
+} satisfies StoryObj;

package/src/components/PasswordInput/PasswordInput.tsx

@@ -0,0 +1,50 @@
+import React, { forwardRef, useImperativeHandle, useRef, useState } from "react";
+import TextInput, { InputProps } from "../TextInput/TextInput";
+import Icon from "../Icon/Icon";
+
+export type PasswordInputProps = Omit<InputProps, "type"> & {
+  /** Show toggle visibility button. Default: true */
+  showToggle?: boolean;
+  /** Icon when password is hidden (click to reveal). Default: Icon eye (lucide) */
+  hideIcon?: React.ReactNode;
+  /** Icon when password is visible (click to hide). Default: Icon eye-off (lucide) */
+  showIcon?: React.ReactNode;
+};
+
+export const PasswordInput = forwardRef<HTMLInputElement, PasswordInputProps>(
+  ({ showToggle = true, hasClearIcon = false, hideIcon, showIcon, endIcon, renderEndIcon, onClickEndIcon, ...props }, ref) => {
+    const inputRef = useRef<HTMLInputElement>(null);
+    const [visible, setVisible] = useState(false);
+
+    useImperativeHandle(ref, () => inputRef?.current as HTMLInputElement);
+
+    const handleToggleVisibility = () => {
+      if (props.disabled) return;
+      setVisible((v) => !v);
+      inputRef.current?.focus();
+      onClickEndIcon?.();
+    };
+
+    const toggleIcon = visible
+      ? showIcon ?? <Icon name="eye" type="lucide" size="inherit" className="size-full stroke-input-default-stroke hover:stroke-input-active-stroke" aria-label="Hide password" />
+      : hideIcon ?? <Icon name="eye-closed" type="lucide" size="inherit" className="size-full stroke-input-default-stroke hover:stroke-input-active-stroke" aria-label="Show password" />;
+
+    return (
+      <TextInput
+        iconMode="flat"
+        {...props}
+        ref={inputRef}
+        type={visible ? "text" : "password"}
+        hasClearIcon={hasClearIcon}
+        endIcon={showToggle ? toggleIcon : endIcon}
+        renderEndIcon={renderEndIcon}
+        onClickEndIcon={showToggle ? handleToggleVisibility : onClickEndIcon}
+        autoComplete={props.autoComplete ?? "current-password"}
+      />
+    );
+  }
+);
+
+PasswordInput.displayName = "PasswordInput";
+
+export default PasswordInput;

package/src/components/PasswordInput/index.ts

@@ -0,0 +1,2 @@
+export { default } from "./PasswordInput";
+export type { PasswordInputProps } from "./PasswordInput";

package/src/components/TextArea/TextArea.styles.ts

@@ -203,7 +203,7 @@ export const clearIconVariant = cva(
 );
 
 export const helperTextVariant = cva(
-  ["text-small1 flex flex-row items-center gap-1"],
+  ["typography-small1 flex flex-row items-center gap-1"],
   {
     variants: {
       size: {