@rovula/ui 0.0.82 → 0.1.1

package/dist/cjs/types/utils/colors.d.ts

@@ -1 +1,331 @@
+/** CSS variable names for theme colors (resolved by data-theme) */
+export declare const THEME_COLOR_KEYS: {
+    readonly "primary-5": "--primary-ramps-primary-5";
+    readonly "primary-10": "--primary-ramps-primary-10";
+    readonly "primary-20": "--primary-ramps-primary-20";
+    readonly "primary-30": "--primary-ramps-primary-30";
+    readonly "primary-40": "--primary-ramps-primary-40";
+    readonly "primary-50": "--primary-ramps-primary-50";
+    readonly "primary-60": "--primary-ramps-primary-60";
+    readonly "primary-70": "--primary-ramps-primary-70";
+    readonly "primary-80": "--primary-ramps-primary-80";
+    readonly "primary-90": "--primary-ramps-primary-90";
+    readonly "primary-100": "--primary-ramps-primary-100";
+    readonly "primary-110": "--primary-ramps-primary-110";
+    readonly "primary-120": "--primary-ramps-primary-120";
+    readonly "primary-130": "--primary-ramps-primary-130";
+    readonly "primary-140": "--primary-ramps-primary-140";
+    readonly "primary-150": "--primary-ramps-primary-150";
+    readonly "secondary-5": "--secondary-ramps-secondary-5";
+    readonly "secondary-10": "--secondary-ramps-secondary-10";
+    readonly "secondary-20": "--secondary-ramps-secondary-20";
+    readonly "secondary-30": "--secondary-ramps-secondary-30";
+    readonly "secondary-40": "--secondary-ramps-secondary-40";
+    readonly "secondary-50": "--secondary-ramps-secondary-50";
+    readonly "secondary-60": "--secondary-ramps-secondary-60";
+    readonly "secondary-70": "--secondary-ramps-secondary-70";
+    readonly "secondary-80": "--secondary-ramps-secondary-80";
+    readonly "secondary-90": "--secondary-ramps-secondary-90";
+    readonly "secondary-100": "--secondary-ramps-secondary-100";
+    readonly "secondary-110": "--secondary-ramps-secondary-110";
+    readonly "secondary-120": "--secondary-ramps-secondary-120";
+    readonly "secondary-130": "--secondary-ramps-secondary-130";
+    readonly "secondary-140": "--secondary-ramps-secondary-140";
+    readonly "secondary-150": "--secondary-ramps-secondary-150";
+    readonly "tertiary-5": "--tertiary-ramps-tertiary-5";
+    readonly "tertiary-10": "--tertiary-ramps-tertiary-10";
+    readonly "tertiary-20": "--tertiary-ramps-tertiary-20";
+    readonly "tertiary-30": "--tertiary-ramps-tertiary-30";
+    readonly "tertiary-40": "--tertiary-ramps-tertiary-40";
+    readonly "tertiary-50": "--tertiary-ramps-tertiary-50";
+    readonly "tertiary-60": "--tertiary-ramps-tertiary-60";
+    readonly "tertiary-70": "--tertiary-ramps-tertiary-70";
+    readonly "tertiary-80": "--tertiary-ramps-tertiary-80";
+    readonly "tertiary-90": "--tertiary-ramps-tertiary-90";
+    readonly "tertiary-100": "--tertiary-ramps-tertiary-100";
+    readonly "tertiary-110": "--tertiary-ramps-tertiary-110";
+    readonly "tertiary-120": "--tertiary-ramps-tertiary-120";
+    readonly "tertiary-130": "--tertiary-ramps-tertiary-130";
+    readonly "tertiary-140": "--tertiary-ramps-tertiary-140";
+    readonly "tertiary-150": "--tertiary-ramps-tertiary-150";
+    readonly "grey-5": "--grey-grey-5";
+    readonly "grey-10": "--grey-grey-10";
+    readonly "grey-20": "--grey-grey-20";
+    readonly "grey-30": "--grey-grey-30";
+    readonly "grey-40": "--grey-grey-40";
+    readonly "grey-50": "--grey-grey-50";
+    readonly "grey-60": "--grey-grey-60";
+    readonly "grey-70": "--grey-grey-70";
+    readonly "grey-80": "--grey-grey-80";
+    readonly "grey-90": "--grey-grey-90";
+    readonly "grey-100": "--grey-grey-100";
+    readonly "grey-110": "--grey-grey-110";
+    readonly "grey-120": "--grey-grey-120";
+    readonly "grey-130": "--grey-grey-130";
+    readonly "grey-140": "--grey-grey-140";
+    readonly "grey-150": "--grey-grey-150";
+    readonly "grey2-50": "--grey2-grey2-50";
+    readonly "grey2-100": "--grey2-grey2-100";
+    readonly "grey2-200": "--grey2-grey2-200";
+    readonly "grey2-300": "--grey2-grey2-300";
+    readonly "grey2-400": "--grey2-grey2-400";
+    readonly "grey2-500": "--grey2-grey2-500";
+    readonly "grey2-600": "--grey2-grey2-600";
+    readonly "grey2-700": "--grey2-grey2-700";
+    readonly "grey2-800": "--grey2-grey2-800";
+    readonly "grey2-900": "--grey2-grey2-900";
+    readonly "grey2-950": "--grey2-grey2-950";
+    readonly "info-50": "--info-info-50";
+    readonly "info-100": "--info-info-100";
+    readonly "info-200": "--info-info-200";
+    readonly "info-300": "--info-info-300";
+    readonly "info-400": "--info-info-400";
+    readonly "info-500": "--info-info-500";
+    readonly "info-600": "--info-info-600";
+    readonly "info-700": "--info-info-700";
+    readonly "info-800": "--info-info-800";
+    readonly "info-900": "--info-info-900";
+    readonly "info-950": "--info-info-950";
+    readonly "success-50": "--success-success-50";
+    readonly "success-100": "--success-success-100";
+    readonly "success-200": "--success-success-200";
+    readonly "success-300": "--success-success-300";
+    readonly "success-400": "--success-success-400";
+    readonly "success-500": "--success-success-500";
+    readonly "success-600": "--success-success-600";
+    readonly "success-700": "--success-success-700";
+    readonly "success-800": "--success-success-800";
+    readonly "success-900": "--success-success-900";
+    readonly "success-950": "--success-success-950";
+    readonly "warning-50": "--warning-warning-50";
+    readonly "warning-100": "--warning-warning-100";
+    readonly "warning-200": "--warning-warning-200";
+    readonly "warning-300": "--warning-warning-300";
+    readonly "warning-400": "--warning-warning-400";
+    readonly "warning-500": "--warning-warning-500";
+    readonly "warning-600": "--warning-warning-600";
+    readonly "warning-700": "--warning-warning-700";
+    readonly "warning-800": "--warning-warning-800";
+    readonly "warning-900": "--warning-warning-900";
+    readonly "warning-950": "--warning-warning-950";
+    readonly "error-50": "--error-error-50";
+    readonly "error-100": "--error-error-100";
+    readonly "error-200": "--error-error-200";
+    readonly "error-300": "--error-error-300";
+    readonly "error-400": "--error-error-400";
+    readonly "error-500": "--error-error-500";
+    readonly "error-600": "--error-error-600";
+    readonly "error-700": "--error-error-700";
+    readonly "error-800": "--error-error-800";
+    readonly "error-900": "--error-error-900";
+    readonly "error-950": "--error-error-950";
+    readonly primary: "--state-color-primary-default";
+    readonly "primary-hover": "--state-color-primary-hover";
+    readonly "primary-stroke": "--state-color-primary-stroke";
+    readonly "primary-hover-bg": "--state-color-primary-hover-bg";
+    readonly "primary-pressed": "--state-color-primary-pressed";
+    readonly "primary-active": "--state-color-primary-active";
+    readonly "primary-text-solid": "--state-color-primary-text-solid";
+    readonly "primary-text-outline": "--state-color-primary-text-outline";
+    readonly "primary-text-hover": "--state-color-primary-text-hover";
+    readonly "primary-text-pressed": "--state-color-primary-text-pressed";
+    readonly secondary: "--state-color-secondary-default";
+    readonly "secondary-hover": "--state-color-secondary-hover";
+    readonly "secondary-stroke": "--state-color-secondary-stroke";
+    readonly "secondary-hover-bg": "--state-color-secondary-hover-bg";
+    readonly "secondary-pressed": "--state-color-secondary-pressed";
+    readonly "secondary-active": "--state-color-secondary-active";
+    readonly "secondary-text-solid": "--state-color-secondary-text-solid";
+    readonly "secondary-text-outline": "--state-color-secondary-text-outline";
+    readonly "secondary-text-hover": "--state-color-secondary-text-hover";
+    readonly "secondary-text-pressed": "--state-color-secondary-text-pressed";
+    readonly tertiary: "--state-color-tertiary-default";
+    readonly "tertiary-hover": "--state-color-tertiary-hover";
+    readonly "tertiary-stroke": "--state-color-tertiary-stroke";
+    readonly "tertiary-hover-bg": "--state-color-tertiary-hover-bg";
+    readonly "tertiary-pressed": "--state-color-tertiary-pressed";
+    readonly "tertiary-active": "--state-color-tertiary-active";
+    readonly "tertiary-text-solid": "--state-color-tertiary-text-solid";
+    readonly "tertiary-text-outline": "--state-color-tertiary-text-outline";
+    readonly "tertiary-text-hover": "--state-color-tertiary-text-hover";
+    readonly "tertiary-text-pressed": "--state-color-tertiary-text-pressed";
+    readonly info: "--state-color-info-default";
+    readonly "info-hover": "--state-color-info-hover";
+    readonly "info-stroke": "--state-color-info-stroke";
+    readonly "info-hover-bg": "--state-color-info-hover-bg";
+    readonly "info-pressed": "--state-color-info-pressed";
+    readonly "info-active": "--state-color-info-active";
+    readonly "info-text-solid": "--state-color-info-text-solid";
+    readonly "info-text-outline": "--state-color-info-text-outline";
+    readonly "info-text-hover": "--state-color-info-text-hover";
+    readonly "info-text-pressed": "--state-color-info-text-pressed";
+    readonly success: "--state-color-success-default";
+    readonly "success-hover": "--state-color-success-hover";
+    readonly "success-stroke": "--state-color-success-stroke";
+    readonly "success-hover-bg": "--state-color-success-hover-bg";
+    readonly "success-pressed": "--state-color-success-pressed";
+    readonly "success-active": "--state-color-success-active";
+    readonly "success-text-solid": "--state-color-success-text-solid";
+    readonly "success-text-outline": "--state-color-success-text-outline";
+    readonly "success-text-hover": "--state-color-success-text-hover";
+    readonly "success-text-pressed": "--state-color-success-text-pressed";
+    readonly warning: "--state-color-warning-default";
+    readonly "warning-hover": "--state-color-warning-hover";
+    readonly "warning-stroke": "--state-color-warning-stroke";
+    readonly "warning-hover-bg": "--state-color-warning-hover-bg";
+    readonly "warning-pressed": "--state-color-warning-pressed";
+    readonly "warning-active": "--state-color-warning-active";
+    readonly "warning-text-solid": "--state-color-warning-text-solid";
+    readonly "warning-text-outline": "--state-color-warning-text-outline";
+    readonly "warning-text-hover": "--state-color-warning-text-hover";
+    readonly "warning-text-pressed": "--state-color-warning-text-pressed";
+    readonly error: "--state-color-error-default";
+    readonly "error-hover": "--state-color-error-hover";
+    readonly "error-stroke": "--state-color-error-stroke";
+    readonly "error-hover-bg": "--state-color-error-hover-bg";
+    readonly "error-pressed": "--state-color-error-pressed";
+    readonly "error-active": "--state-color-error-active";
+    readonly "error-text-solid": "--state-color-error-text-solid";
+    readonly "error-text-outline": "--state-color-error-text-outline";
+    readonly "error-text-hover": "--state-color-error-text-hover";
+    readonly "error-text-pressed": "--state-color-error-text-pressed";
+    readonly "disable-solid": "--state-color-disable-solid";
+    readonly "disable-outline": "--state-color-disable-outline";
+    readonly "text-black": "--text-black";
+    readonly "text-dark": "--text-dark";
+    readonly "text-medium": "--text-medium";
+    readonly "text-light": "--text-light";
+    readonly "text-grey-dark": "--text-grey-dark";
+    readonly "text-grey-medium": "--text-grey-medium";
+    readonly "text-grey-light": "--text-grey-light";
+    readonly "text-white": "--text-white";
+    readonly "input-default-text": "--input-color-default-text";
+    readonly "input-default-stroke": "--input-color-default-stroke";
+    readonly "input-filled-text": "--input-color-filled-text";
+    readonly "input-active-stroke": "--input-color-active-stroke";
+    readonly "input-disable-text": "--input-color-disable-text";
+    readonly "input-disable-stroke": "--input-color-disable-stroke";
+    readonly "input-disable-bg": "--input-color-disable-bg";
+    readonly "input-label-bg": "--input-color-label-bg";
+    readonly "input-error": "--input-color-error";
+    readonly "function-default-solid": "--function-default-solid";
+    readonly "function-default-hover": "--function-default-hover";
+    readonly "function-default-hover-bg": "--function-default-hover-bg";
+    readonly "function-default-stroke": "--function-default-stroke";
+    readonly "function-default-icon": "--function-default-icon";
+    readonly "function-default-outline-icon": "--function-default-outline-icon";
+    readonly "function-active-solid": "--function-active-solid";
+    readonly "function-active-hover": "--function-active-hover";
+    readonly "function-active-hover-bg": "--function-active-hover-bg";
+    readonly "function-active-stroke": "--function-active-stroke";
+    readonly "function-active-icon": "--function-active-icon";
+    readonly "base-bg": "--base-color-bg";
+    readonly "base-bg2": "--base-color-bg2";
+    readonly "base-bg3": "--base-color-bg3";
+    readonly "base-workspace-stroke": "--base-color-workspace-stroke";
+    readonly "base-guideline-stroke": "--base-color-guideline-stroke";
+    readonly "base-popup": "--base-color-popup";
+    readonly "base-popup-highlight": "--base-color-popup-hightlight";
+    readonly "base-popup-curtain": "--base-color-popup-curtain";
+    readonly "base-popup-foreground": "--base-color-popup-foreground";
+    readonly "common-white": "--common-white";
+    readonly "common-black": "--common-black";
+    readonly background: "--background";
+    readonly foreground: "--foreground";
+    readonly surface: "--surface";
+    readonly "surface-foreground": "--surface-foreground";
+    readonly "primary-foreground": "--primary-foreground";
+    readonly "secondary-foreground": "--secondary-foreground";
+    readonly "tertiary-foreground": "--tertiary-foreground";
+    readonly "info-foreground": "--info-foreground";
+    readonly "success-foreground": "--success-foreground";
+    readonly "warning-foreground": "--warning-foreground";
+    readonly "error-foreground": "--error-foreground";
+    readonly "grey-foreground": "--grey-foreground";
+    readonly "grey2-foreground": "--grey2-foreground";
+    readonly "primary-transparent-8": "--main-transparency-primary-8";
+    readonly "primary-transparent-12": "--main-transparency-primary-12";
+    readonly "primary-transparent-16": "--main-transparency-primary-16";
+    readonly "primary-transparent-24": "--main-transparency-primary-24";
+    readonly "primary-transparent-32": "--main-transparency-primary-32";
+    readonly "primary-transparent-48": "--main-transparency-primary-48";
+    readonly "secondary-transparent-8": "--main-transparency-secondary-8";
+    readonly "secondary-transparent-12": "--main-transparency-secondary-12";
+    readonly "secondary-transparent-16": "--main-transparency-secondary-16";
+    readonly "secondary-transparent-24": "--main-transparency-secondary-24";
+    readonly "secondary-transparent-32": "--main-transparency-secondary-32";
+    readonly "secondary-transparent-48": "--main-transparency-secondary-48";
+    readonly "tertiary-transparent-8": "--main-transparency-tertiary-8";
+    readonly "tertiary-transparent-12": "--main-transparency-tertiary-12";
+    readonly "tertiary-transparent-16": "--main-transparency-tertiary-16";
+    readonly "tertiary-transparent-24": "--main-transparency-tertiary-24";
+    readonly "tertiary-transparent-32": "--main-transparency-tertiary-32";
+    readonly "tertiary-transparent-48": "--main-transparency-tertiary-48";
+    readonly "info-transparent-8": "--other-transparency-info-8";
+    readonly "info-transparent-12": "--other-transparency-info-12";
+    readonly "info-transparent-16": "--other-transparency-info-16";
+    readonly "info-transparent-24": "--other-transparency-info-24";
+    readonly "info-transparent-32": "--other-transparency-info-32";
+    readonly "info-transparent-48": "--other-transparency-info-48";
+    readonly "success-transparent-8": "--other-transparency-success-8";
+    readonly "success-transparent-12": "--other-transparency-success-12";
+    readonly "success-transparent-16": "--other-transparency-success-16";
+    readonly "success-transparent-24": "--other-transparency-success-24";
+    readonly "success-transparent-32": "--other-transparency-success-32";
+    readonly "success-transparent-48": "--other-transparency-success-48";
+    readonly "warning-transparent-8": "--other-transparency-warning-8";
+    readonly "warning-transparent-12": "--other-transparency-warning-12";
+    readonly "warning-transparent-16": "--other-transparency-warning-16";
+    readonly "warning-transparent-24": "--other-transparency-warning-24";
+    readonly "warning-transparent-32": "--other-transparency-warning-32";
+    readonly "warning-transparent-48": "--other-transparency-warning-48";
+    readonly "error-transparent-8": "--other-transparency-error-8";
+    readonly "error-transparent-12": "--other-transparency-error-12";
+    readonly "error-transparent-16": "--other-transparency-error-16";
+    readonly "error-transparent-24": "--other-transparency-error-24";
+    readonly "error-transparent-32": "--other-transparency-error-32";
+    readonly "error-transparent-48": "--other-transparency-error-48";
+    readonly "grey-transparent-8": "--other-transparency-grey-8";
+    readonly "grey-transparent-12": "--other-transparency-grey-12";
+    readonly "grey-transparent-16": "--other-transparency-grey-16";
+    readonly "grey-transparent-24": "--other-transparency-grey-24";
+    readonly "grey-transparent-32": "--other-transparency-grey-32";
+    readonly "grey-transparent-48": "--other-transparency-grey-48";
+    readonly "grey2-transparent-8": "--other-transparency-grey2-8";
+    readonly "grey2-transparent-12": "--other-transparency-grey2-12";
+    readonly "grey2-transparent-16": "--other-transparency-grey2-16";
+    readonly "grey2-transparent-24": "--other-transparency-grey2-24";
+    readonly "grey2-transparent-32": "--other-transparency-grey2-32";
+    readonly "grey2-transparent-48": "--other-transparency-grey2-48";
+    readonly "white-transparent-8": "--other-transparency-white-08";
+    readonly "white-transparent-12": "--other-transparency-white-12";
+    readonly "white-transparent-16": "--other-transparency-white-16";
+    readonly "white-transparent-24": "--other-transparency-white-24";
+    readonly "white-transparent-32": "--other-transparency-white-32";
+    readonly "white-transparent-48": "--other-transparency-white-48";
+    readonly "black-transparent-8": "--other-transparency-black-08";
+    readonly "black-transparent-12": "--other-transparency-black-12";
+    readonly "black-transparent-16": "--other-transparency-black-16";
+    readonly "black-transparent-24": "--other-transparency-black-24";
+    readonly "black-transparent-32": "--other-transparency-black-32";
+    readonly "black-transparent-48": "--other-transparency-black-48";
+};
+export type ThemeColorKey = keyof typeof THEME_COLOR_KEYS;
+/**
+ * Get computed color value from a CSS variable (respects current theme).
+ * Use in browser only; returns empty string during SSR.
+ *
+ * @example
+ * const primary = getThemeColor('primary');
+ * const hex = getThemeColor('--primary-ramps-primary-100');
+ */
+export declare function getThemeColor(keyOrVar: ThemeColorKey | string, element?: HTMLElement | Document): string;
+/**
+ * Get multiple theme colors as a JS object.
+ *
+ * @example
+ * const colors = getThemeColors();
+ * // { primary: '#2563eb', secondary: '#60a5fa', ... }
+ */
+export declare function getThemeColors(keys?: ThemeColorKey[], element?: HTMLElement | Document): Record<string, string>;
 export declare const srgbToHex: (color: string) => string;

package/dist/components/Footer/Footer.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "@/utils/cn";
+const Footer = ({ 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 !== null && copyright !== void 0 ? copyright : center : center;
+    const defaultRight = isSimple ? null : rightNav;
+    return (_jsxs("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), children: [!isTransparent && (_jsx("div", { className: "absolute inset-0 -z-10 bg-[var(--footer-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 items-center", isSimple ? "justify-center" : "justify-between", { container }, containerClassName), children: children !== null && children !== void 0 ? children : (isSimple ? (_jsx("div", { className: cn("text-center", centerClassName), children: defaultCenter })) : (_jsxs(_Fragment, { children: [_jsx("nav", { className: cn("flex w-1/2 items-center gap-x-[var(--footer-gap)] text-xl", leftNavClassName), children: copyright && leftNav ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "flex-shrink-0", children: copyright }), leftNav] })) : (defaultLeft) }), _jsx("div", { className: cn("flex flex-shrink-0 flex-wrap justify-center", centerClassName), children: defaultCenter }), _jsx("nav", { className: cn("flex w-1/2 justify-end gap-x-[var(--footer-gap)] text-xl", rightNavClassName), children: defaultRight })] }))) })] }));
+};
+export default Footer;

package/dist/components/Footer/Footer.stories.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import Footer from "./Footer";
+const meta = {
+    title: "Components/Footer",
+    component: Footer,
+    tags: ["autodocs"],
+    parameters: {
+        layout: "fullscreen",
+    },
+    decorators: [
+        (Story) => (_jsxs("div", { className: "p-5 w-full h-screen flex flex-col", children: [_jsx("div", { className: "flex-1", children: "Page content" }), _jsx(Story, {})] })),
+    ],
+};
+export default meta;
+export const Default = {
+    args: {},
+    render: (args) => (_jsx(Footer, { leftNav: _jsxs("ul", { className: "flex gap-2", children: [_jsx("li", { children: "\u00A9 2024 Company" }), _jsx("li", { children: "Privacy" }), _jsx("li", { children: "Terms" })] }), center: _jsx(_Fragment, { children: "Footer center" }), rightNav: _jsxs("ul", { className: "flex gap-2", children: [_jsx("li", { children: "Link 1" }), _jsx("li", { children: "Link 2" }), _jsx("li", { children: "Link 3" })] }) })),
+};
+export const WithCopyright = {
+    args: {},
+    render: (args) => (_jsx(Footer, { copyright: "\u00A9 2024 Company. All rights reserved.", leftNav: _jsxs("ul", { className: "flex gap-2", children: [_jsx("li", { children: "Privacy" }), _jsx("li", { children: "Terms" })] }), rightNav: _jsxs("ul", { className: "flex gap-2", children: [_jsx("li", { children: "Help" }), _jsx("li", { children: "Contact" })] }) })),
+};
+export const Simple = {
+    args: {},
+    render: (args) => (_jsx(Footer, { variant: "simple", copyright: "\u00A9 2024 Company. Powered by Rovula." })),
+};
+export const Transparent = {
+    args: {},
+    render: (args) => (_jsxs("div", { className: "flex flex-col w-full min-h-screen bg-primary-5", children: [_jsx("div", { className: "flex-1 p-8", children: "Page content" }), _jsx(Footer, { variant: "transparent", copyright: "\u00A9 2024 Company", leftNav: _jsxs("ul", { className: "flex gap-2", children: [_jsx("li", { children: "Privacy" }), _jsx("li", { children: "Terms" })] }), rightNav: _jsxs("ul", { className: "flex gap-2", children: [_jsx("li", { children: "Help" }), _jsx("li", { children: "Contact" })] }) })] })),
+};
+export const Custom = {
+    args: {},
+    render: (args) => (_jsx(Footer, { className: "px-8", copyright: "\u00A9 2024 Company", center: _jsx(_Fragment, { children: "Powered by Rovula" }), rightNav: _jsxs("ul", { className: "flex gap-2", children: [_jsx("li", { children: "Help" }), _jsx("li", { children: "Contact" })] }) })),
+};

package/dist/components/Footer/index.js

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

package/dist/components/Icon/Icon.js

@@ -15,23 +15,40 @@ import { getIcon } from "@/icons";
 import { cn } from "@/utils/cn";
 import React from "react";
 import { iconVariants } from "./Icon.styles";
+const LUCIDE_SIZE = { sm: 16, md: 24, lg: 32 };
 const Icon = (_a) => {
     var { name, type = "heroicons", color = "inherit", variant = "solid", size = "md", className } = _a, props = __rest(_a, ["name", "type", "color", "variant", "size", "className"]);
     const [IconComponent, setIconComponent] = React.useState(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];
+                if (loader) {
+                    loader().then((m) => {
+                        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 (type === "lucide") {
+        if (!IconComponent) {
+            return _jsx("span", { className: cn(iconVariants({ color, size }), className) });
+        }
+        const sizeNum = size === "inherit" ? 24 : LUCIDE_SIZE[size];
+        return (_jsx(IconComponent, Object.assign({}, props, { size: sizeNum, strokeWidth: sizeNum <= 16 ? 1.5 : 2, absoluteStrokeWidth: true, shapeRendering: "geometricPrecision", className: cn(iconVariants({ color, size }), "stroke-current", className) })));
+    }
     if (!IconComponent)
-        return (_jsx("svg", Object.assign({ className: cn(iconVariants({ color, size }), className) }, props)));
+        return _jsx("svg", Object.assign({ className: cn(iconVariants({ color, size }), className) }, props));
     return (_jsx(IconComponent, Object.assign({ className: cn(iconVariants({ color, size }), className) }, props)));
 };
 export default Icon;

package/dist/components/Icon/Icon.stories.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
 import Icon from "./Icon";
 const meta = {
     title: "Components/Icon",
@@ -331,6 +332,44 @@ export const PreviewHeroIcon = {
         return (_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: "Hero icons" }), heroIcons.map((iconName) => (_jsxs("div", { className: "flex flex-row gap-6 items-center", children: [_jsx(Icon, Object.assign({}, props, { name: iconName, variant: "solid", size: "sm" })), _jsx(Icon, Object.assign({}, props, { name: iconName, variant: "outline", size: "sm" })), _jsx(Icon, Object.assign({}, props, { name: iconName, variant: "outline", size: "md" })), _jsx(Icon, Object.assign({}, props, { name: iconName, variant: "solid", size: "md" })), _jsx(Icon, Object.assign({}, props, { name: iconName, variant: "outline", size: "lg" })), _jsx(Icon, Object.assign({}, props, { name: iconName, variant: "solid", size: "lg" })), _jsx("p", { className: "ml-4", children: iconName })] }, iconName)))] }) }));
     },
 };
+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) => (_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: {},
+    render: () => {
+        const [names, setNames] = React.useState([]);
+        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 (_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 PreviewMaterialIcon = {
     args: {
     // variant: "outline",

package/dist/components/Navbar/Navbar.js

@@ -1,8 +1,22 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from "@/utils/cn";
-const Navbar = ({ children, className, center, leftNav, rightNav, position, container = false, containerClassName, leftNavClassName, centerClassName, rightNavClassName, }) => {
-    return (_jsx("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))]", { position }, className), children: _jsx("div", { className: cn("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 })] })) }) }));
+import { useEffect, useState } from "react";
+const SCROLL_THRESHOLD = 4;
+const Navbar = ({ children, className, variant = "default", scrollShadow = false, center, leftNav, rightNav, position, container = false, containerClassName, leftNavClassName, 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 (_jsxs("header", { className: cn("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), 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", {
+                    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 })] })) })] }));
 };
 export default Navbar;

package/dist/components/Navbar/Navbar.stories.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import Navbar from "./Navbar";
+import { Footer } from "../Footer";
 const meta = {
     title: "Components/Navbar",
     component: Navbar,
@@ -14,17 +15,23 @@ const meta = {
 export default meta;
 export const Default = {
     args: {},
-    render: (args) => {
-        console.log("args ", args);
-        const props = Object.assign({}, args);
-        return (_jsx("div", { className: "flex flex-row gap-4 w-full", children: _jsx(Navbar, { leftNav: _jsxs("ul", { className: "flex gap-2", children: [_jsx("li", { children: "link 1" }), _jsx("li", { children: "link 2" }), _jsx("li", { children: "link 3" })] }), center: _jsx(_Fragment, { children: "Center text" }), rightNav: _jsxs("ul", { className: "flex gap-2", children: [_jsx("li", { children: "sss 1" }), _jsx("li", { children: "ddd 2" }), _jsx("li", { children: "vvvv 3" })] }) }) }));
+    render: (args) => (_jsx("div", { className: "flex flex-row gap-4 w-full", children: _jsx(Navbar, { leftNav: _jsxs("ul", { className: "flex gap-2", children: [_jsx("li", { children: "link 1" }), _jsx("li", { children: "link 2" }), _jsx("li", { children: "link 3" })] }), center: _jsx(_Fragment, { children: "Center text" }), rightNav: _jsxs("ul", { className: "flex gap-2", children: [_jsx("li", { children: "sss 1" }), _jsx("li", { children: "ddd 2" }), _jsx("li", { children: "vvvv 3" })] }) }) })),
+};
+export const Transparent = {
+    args: {},
+    render: (args) => (_jsxs("div", { className: "flex flex-col w-full min-h-screen bg-primary-5", children: [_jsx(Navbar, { variant: "transparent", position: "sticky", scrollShadow: true, leftNav: _jsxs("ul", { className: "flex gap-2", children: [_jsx("li", { children: "link 1" }), _jsx("li", { children: "link 2" })] }), center: _jsx(_Fragment, { children: "Transparent Navbar" }), rightNav: _jsxs("ul", { className: "flex gap-2", children: [_jsx("li", { children: "Menu 1" }), _jsx("li", { children: "Menu 2" })] }) }), _jsx("div", { className: "flex-1 p-8", children: "Scroll down to see shadow" }), _jsx(Footer, { variant: "transparent", copyright: "\u00A9 2024" })] })),
+};
+export const WithScrollShadow = {
+    args: {},
+    parameters: {
+        layout: "fullscreen",
     },
+    decorators: [
+        (Story) => (_jsx("div", { className: "w-full h-[200vh]", children: _jsxs("div", { className: "h-screen flex flex-col", children: [_jsx(Story, {}), _jsx("div", { className: "flex-1 p-8 text-center", children: "Scroll down to see navbar shadow" })] }) })),
+    ],
+    render: (args) => (_jsx(Navbar, { position: "sticky", scrollShadow: true, leftNav: _jsxs("ul", { className: "flex gap-2", children: [_jsx("li", { children: "link 1" }), _jsx("li", { children: "link 2" })] }), center: _jsx(_Fragment, { children: "Sticky + Scroll Shadow" }), rightNav: _jsxs("ul", { className: "flex gap-2", children: [_jsx("li", { children: "Menu 1" }), _jsx("li", { children: "Menu 2" })] }) })),
 };
 export const Custom = {
     args: {},
-    render: (args) => {
-        console.log("args ", args);
-        const props = Object.assign({}, args);
-        return (_jsx("div", { className: "flex flex-row gap-4 w-full", children: _jsx(Navbar, { className: "px-8", leftNav: _jsxs("ul", { className: "flex gap-2", children: [_jsx("li", { children: "link 1" }), _jsx("li", { children: "link 2" }), _jsx("li", { children: "link 3" })] }), center: _jsx(_Fragment, { children: "Center text" }), rightNav: _jsxs("ul", { className: "flex gap-2", children: [_jsx("li", { children: "sss 1" }), _jsx("li", { children: "ddd 2" }), _jsx("li", { children: "vvvv 3" })] }) }) }));
-    },
+    render: (args) => (_jsx("div", { className: "flex flex-row gap-4 w-full", children: _jsx(Navbar, { className: "px-8", leftNav: _jsxs("ul", { className: "flex gap-2", children: [_jsx("li", { children: "link 1" }), _jsx("li", { children: "link 2" }), _jsx("li", { children: "link 3" })] }), center: _jsx(_Fragment, { children: "Center text" }), rightNav: _jsxs("ul", { className: "flex gap-2", children: [_jsx("li", { children: "sss 1" }), _jsx("li", { children: "ddd 2" }), _jsx("li", { children: "vvvv 3" })] }) }) })),
 };

package/dist/components/PasswordInput/PasswordInput.js

@@ -0,0 +1,36 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useImperativeHandle, useRef, useState } from "react";
+import TextInput from "../TextInput/TextInput";
+import Icon from "../Icon/Icon";
+export const PasswordInput = forwardRef((_a, ref) => {
+    var _b;
+    var { showToggle = true, hasClearIcon = false, hideIcon, showIcon, endIcon, renderEndIcon, onClickEndIcon } = _a, props = __rest(_a, ["showToggle", "hasClearIcon", "hideIcon", "showIcon", "endIcon", "renderEndIcon", "onClickEndIcon"]);
+    const inputRef = useRef(null);
+    const [visible, setVisible] = useState(false);
+    useImperativeHandle(ref, () => inputRef === null || inputRef === void 0 ? void 0 : inputRef.current);
+    const handleToggleVisibility = () => {
+        var _a;
+        if (props.disabled)
+            return;
+        setVisible((v) => !v);
+        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        onClickEndIcon === null || onClickEndIcon === void 0 ? void 0 : onClickEndIcon();
+    };
+    const toggleIcon = visible
+        ? showIcon !== null && showIcon !== void 0 ? showIcon : _jsx(Icon, { name: "eye", type: "lucide", size: "inherit", className: "size-full", "aria-label": "Hide password" })
+        : hideIcon !== null && hideIcon !== void 0 ? hideIcon : _jsx(Icon, { name: "eye-closed", type: "lucide", size: "inherit", className: "size-full", "aria-label": "Show password" });
+    return (_jsx(TextInput, Object.assign({ iconMode: "flat" }, props, { ref: inputRef, type: visible ? "text" : "password", hasClearIcon: hasClearIcon, endIcon: showToggle ? toggleIcon : endIcon, renderEndIcon: renderEndIcon, onClickEndIcon: showToggle ? handleToggleVisibility : onClickEndIcon, autoComplete: (_b = props.autoComplete) !== null && _b !== void 0 ? _b : "current-password" })));
+});
+PasswordInput.displayName = "PasswordInput";
+export default PasswordInput;