@kala-ui/react 0.0.1-beta.7 → 0.0.2

package/dist/components/header/header.js

@@ -1,35 +1,21 @@
 "use client";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMounted, useScrollLock } from "@kala-ui/react-hooks";
 import { Bell, ChevronDown, Menu, Settings, X } from "lucide-react";
 import * as React from "react";
 import { createPortal } from "react-dom";
 import { cn } from "../../lib/utils";
+import { Box } from "../box";
 import { Button } from "../button";
+import { Flex } from "../flex";
+import { List } from "../list";
 import { NavigationMenu, NavigationMenuContent, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, } from "../navigation-menu";
+import { Stack } from "../stack";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "../tabs";
+import { Text } from "../text";
 export const Header = React.forwardRef(({ className, logo, navLinks = [], userMenu, userProfile, searchBar, notifications, mobileNotifications, themeSwitcher, themeSwitcherMobile, languageSwitcher, languageSwitcherMobile, onMobileMenuToggle, isMobileMenuOpen, variant = "default", ...props }, ref) => {
-    // Lock body scroll when mobile menu is open
-    React.useEffect(() => {
-        if (isMobileMenuOpen) {
-            // Calculate scrollbar width
-            const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
-            document.body.style.setProperty("--removed-body-scroll-bar-size", `${scrollbarWidth}px`);
-            document.body.setAttribute("data-scroll-locked", "1");
-        }
-        else {
-            document.body.removeAttribute("data-scroll-locked");
-            document.body.style.removeProperty("--removed-body-scroll-bar-size");
-        }
-        // Cleanup on unmount
-        return () => {
-            document.body.removeAttribute("data-scroll-locked");
-            document.body.style.removeProperty("--removed-body-scroll-bar-size");
-        };
-    }, [isMobileMenuOpen]);
-    const [mounted, setMounted] = React.useState(false);
-    React.useEffect(() => {
-        setMounted(true);
-    }, []);
+    useScrollLock(!!isMobileMenuOpen);
+    const mounted = useMounted();
     // Track expanded mobile menu items
     const [expandedItems, setExpandedItems] = React.useState(new Set());
     const toggleExpanded = (label) => {
@@ -44,19 +30,19 @@ export const Header = React.forwardRef(({ className, logo, navLinks = [], userMe
             return next;
         });
     };
-    return (_jsxs("header", { ref: ref, "data-comp": "header", className: cn("w-full bg-popover border-b sticky top-0 z-20 theme-popover", className), ...props, children: [_jsx("div", { className: "container mx-auto px-3 sm:px-4 lg:px-6 xl:px-8", children: _jsxs("div", { className: "flex items-center justify-between h-14 sm:h-16 gap-2 sm:gap-4", children: [_jsx("div", { className: "shrink-0 min-w-0 max-w-[120px] sm:max-w-none", children: logo }), _jsx("div", { className: cn("hidden lg:flex items-center gap-3 lg:gap-6", variant === "default" ? "flex-1" : ""), children: _jsx("div", { className: cn("flex", variant === "default" ? "mx-auto" : ""), children: _jsxs(NavigationMenu, { children: [_jsx(NavigationMenuList, { children: navLinks.map((link) => (_jsx(NavigationMenuItem, { children: link.children ? (_jsxs(_Fragment, { children: [_jsx(NavigationMenuTrigger, { className: cn("text-sm lg:text-base", link.active && "text-primary"), children: link.label }), _jsx(NavigationMenuContent, { children: _jsx("ul", { className: cn("py-2", link.children.length <= 3
-                                                                    ? "w-[220px]"
-                                                                    : "w-[440px] grid grid-cols-2"), children: link.children.map((child) => (_jsx("li", { children: _jsx(NavigationMenuLink, { asChild: true, children: _jsx("a", { href: child.href, className: cn("block px-4 py-2.5 text-sm font-normal no-underline outline-none transition-colors", "text-foreground", "hover:bg-accent hover:text-accent-foreground", "focus:bg-accent focus:text-accent-foreground", child.active &&
-                                                                                "text-primary bg-primary/10"), children: child.label }) }) }, child.href))) }) })] })) : (_jsx(NavigationMenuLink, { href: link.href, className: cn("px-4 py-2 text-sm lg:text-base", link.active && "text-primary"), "aria-current": link.active ? "page" : undefined, children: link.label })) }, link.href))) }), _jsx(NavigationMenuViewport, {})] }) }) }), _jsxs("div", { className: "flex items-center gap-1.5 sm:gap-2 lg:gap-3 shrink-0", children: [searchBar && (_jsx("div", { className: "hidden lg:block w-48 xl:w-64", children: searchBar })), languageSwitcher && (_jsx("div", { className: "hidden lg:block", children: languageSwitcher })), themeSwitcher && (_jsx("div", { className: "hidden lg:block", children: themeSwitcher })), notifications && (_jsx("div", { className: "hidden lg:block", children: notifications })), userMenu && _jsx("div", { className: "hidden lg:block", children: userMenu }), onMobileMenuToggle && (_jsx(Button, { variant: "ghost", size: "icon", className: "lg:hidden h-9 w-9 sm:h-10 sm:w-10", onClick: onMobileMenuToggle, "aria-label": "Toggle mobile menu", "aria-expanded": isMobileMenuOpen, children: isMobileMenuOpen ? (_jsx(X, { className: "w-5 h-5 sm:w-6 sm:h-6" })) : (_jsx(Menu, { className: "w-5 h-5 sm:w-6 sm:h-6" })) }))] })] }) }), isMobileMenuOpen &&
+    return (_jsxs(Box, { as: "header", ref: ref, "data-comp": "header", className: cn("w-full bg-popover border-b sticky top-0 z-20 theme-popover", className), ...props, children: [_jsx(Box, { className: "container mx-auto px-3 sm:px-4 lg:px-6 xl:px-8", children: _jsxs(Flex, { align: "center", justify: "between", className: "h-14 sm:h-16 gap-2 sm:gap-4", children: [_jsx(Box, { className: "shrink-0 min-w-0 max-w-[120px] sm:max-w-none", children: logo }), _jsx(Flex, { align: "center", gap: variant === "default" ? 3 : 6, className: cn("hidden lg:flex", variant === "default" ? "flex-1" : ""), children: _jsx(Box, { className: cn("flex", variant === "default" ? "mx-auto" : ""), children: _jsxs(NavigationMenu, { children: [_jsx(NavigationMenuList, { children: navLinks.map((link) => (_jsx(NavigationMenuItem, { children: link.children ? (_jsxs(_Fragment, { children: [_jsx(NavigationMenuTrigger, { className: cn("text-sm lg:text-base", link.active && "text-primary"), children: link.label }), _jsx(NavigationMenuContent, { children: _jsx(Box, { className: "py-2", children: _jsx(List, { divided: false, className: cn("bg-transparent border-none", link.children.length <= 3
+                                                                        ? "w-[220px]"
+                                                                        : "w-[440px] grid grid-cols-2"), children: link.children.map((child) => (_jsx(Box, { as: "li", children: _jsx(NavigationMenuLink, { asChild: true, children: _jsx(Box, { as: "a", href: child.href, className: cn("block px-4 py-2.5 text-sm font-normal no-underline outline-none transition-colors", "text-foreground", "hover:bg-accent hover:text-accent-foreground", "focus:bg-accent focus:text-accent-foreground", child.active &&
+                                                                                    "text-primary bg-primary/10"), children: child.label }) }) }, child.href))) }) }) })] })) : (_jsx(NavigationMenuLink, { href: link.href, className: cn("px-4 py-2 text-sm lg:text-base", link.active && "text-primary"), "aria-current": link.active ? "page" : undefined, children: link.label })) }, link.href))) }), _jsx(NavigationMenuViewport, {})] }) }) }), _jsxs(Flex, { align: "center", gap: 1.5, className: "sm:gap-2 lg:gap-3 shrink-0", children: [searchBar && (_jsx(Box, { className: "hidden lg:block w-48 xl:w-64", children: searchBar })), languageSwitcher && (_jsx(Box, { className: "hidden lg:block", children: languageSwitcher })), themeSwitcher && (_jsx(Box, { className: "hidden lg:block", children: themeSwitcher })), notifications && (_jsx(Box, { className: "hidden lg:block", children: notifications })), userMenu && _jsx(Box, { className: "hidden lg:block", children: userMenu }), onMobileMenuToggle && (_jsx(Button, { variant: "ghost", size: "icon", className: "lg:hidden h-9 w-9 sm:h-10 sm:w-10", onClick: onMobileMenuToggle, "aria-label": "Toggle mobile menu", "aria-expanded": isMobileMenuOpen, children: isMobileMenuOpen ? (_jsx(X, { className: "w-5 h-5 sm:w-6 sm:h-6" })) : (_jsx(Menu, { className: "w-5 h-5 sm:w-6 sm:h-6" })) }))] })] }) }), isMobileMenuOpen &&
                 mounted &&
-                createPortal(_jsxs(_Fragment, { children: [_jsx("div", { className: "fixed inset-0 bg-black/20 backdrop-blur-sm z-40 lg:hidden", onClick: onMobileMenuToggle, "aria-hidden": "true" }), _jsxs("nav", { className: "fixed top-0 left-0 right-0 bottom-0 bg-popover z-40 lg:hidden overflow-hidden flex flex-col theme-popover", "aria-label": "Mobile navigation", children: [_jsxs("div", { className: "flex items-center justify-between px-4 h-14 sm:h-16 border-b shrink-0", children: [_jsx("div", { className: "shrink-0 min-w-0 max-w-[120px] sm:max-w-none", children: logo }), _jsx(Button, { variant: "ghost", size: "icon", className: "h-9 w-9 sm:h-10 sm:w-10", onClick: onMobileMenuToggle, "aria-label": "Close mobile menu", children: _jsx(X, { className: "w-5 h-5 sm:w-6 sm:h-6" }) })] }), _jsxs(Tabs, { defaultValue: "menu", className: "flex flex-col flex-1 overflow-hidden", children: [_jsx("div", { className: "px-4 py-2 border-b shrink-0", children: _jsxs(TabsList, { className: "w-full grid grid-cols-3", children: [_jsx(TabsTrigger, { value: "menu", children: _jsxs("span", { className: "flex items-center gap-2", children: [_jsx(Menu, { className: "w-4 h-4" }), _jsx("span", { children: "Menu" })] }) }), _jsx(TabsTrigger, { value: "notifications", children: _jsxs("span", { className: "flex items-center gap-2", children: [_jsx(Bell, { className: "w-4 h-4" }), _jsx("span", { children: "Alerts" })] }) }), _jsx(TabsTrigger, { value: "preferences", children: _jsxs("span", { className: "flex items-center gap-2", children: [_jsx(Settings, { className: "w-4 h-4" }), _jsx("span", { children: "Preferences" })] }) })] }) }), _jsxs("div", { className: "flex-1 overflow-y-auto", children: [_jsxs(TabsContent, { value: "menu", className: "mt-0 h-full", children: [searchBar && (_jsx("div", { className: "px-4 py-3 border-b", children: searchBar })), userProfile ? (_jsxs("div", { className: "border-b", children: [_jsxs("div", { className: "px-4 py-4 flex items-center gap-3 bg-muted", children: [userProfile.avatar ? (_jsx("img", { src: userProfile.avatar, alt: userProfile.name, className: "w-10 h-10 rounded-full object-cover" })) : (_jsx("div", { className: "w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center text-primary font-semibold", children: userProfile.name.charAt(0).toUpperCase() })), _jsxs("div", { className: "flex flex-col min-w-0", children: [_jsx("span", { className: "text-sm font-medium text-foreground truncate", children: userProfile.name }), _jsx("span", { className: "text-xs text-muted-foreground truncate", children: userProfile.email })] })] }), _jsx("div", { className: "py-2", children: userProfile.links.map((link, index) => (_jsxs(React.Fragment, { children: [link.divider && index > 0 && (_jsx("div", { className: "my-2 border-t" })), link.href ? (_jsxs("a", { href: link.href, className: cn("flex items-center gap-3 px-4 py-2.5 text-sm transition-colors hover:bg-accent", link.variant === "danger"
+                createPortal(_jsxs(_Fragment, { children: [_jsx(Box, { className: "fixed inset-0 bg-black/20 backdrop-blur-sm z-40 lg:hidden", onClick: onMobileMenuToggle, "aria-hidden": "true" }), _jsxs(Box, { as: "nav", className: "fixed top-0 left-0 right-0 bottom-0 bg-popover z-40 lg:hidden overflow-hidden flex flex-col theme-popover", "aria-label": "Mobile navigation", children: [_jsxs(Flex, { align: "center", justify: "between", className: "px-4 h-14 sm:h-16 border-b shrink-0", children: [_jsx(Box, { className: "shrink-0 min-w-0 max-w-[120px] sm:max-w-none", children: logo }), _jsx(Button, { variant: "ghost", size: "icon", className: "h-9 w-9 sm:h-10 sm:w-10", onClick: onMobileMenuToggle, "aria-label": "Close mobile menu", children: _jsx(X, { className: "w-5 h-5 sm:w-6 sm:h-6" }) })] }), _jsxs(Tabs, { defaultValue: "menu", className: "flex flex-col flex-1 overflow-hidden", children: [_jsx(Box, { className: "px-4 py-2 border-b shrink-0", children: _jsxs(TabsList, { className: "w-full grid grid-cols-3", children: [_jsx(TabsTrigger, { value: "menu", children: _jsxs(Flex, { align: "center", gap: 2, children: [_jsx(Menu, { className: "w-4 h-4" }), _jsx(Text, { children: "Menu" })] }) }), _jsx(TabsTrigger, { value: "notifications", children: _jsxs(Flex, { align: "center", gap: 2, children: [_jsx(Bell, { className: "w-4 h-4" }), _jsx(Text, { children: "Alerts" })] }) }), _jsx(TabsTrigger, { value: "preferences", children: _jsxs(Flex, { align: "center", gap: 2, children: [_jsx(Settings, { className: "w-4 h-4" }), _jsx(Text, { children: "Preferences" })] }) })] }) }), _jsxs(Box, { className: "flex-1 overflow-y-auto", children: [_jsxs(TabsContent, { value: "menu", className: "mt-0 h-full", children: [searchBar && (_jsx(Box, { className: "px-4 py-3 border-b", children: searchBar })), userProfile ? (_jsxs(Box, { className: "border-b", children: [_jsxs(Flex, { align: "center", gap: 3, className: "px-4 py-4 bg-muted", children: [userProfile.avatar ? (_jsx(Box, { as: "img", src: userProfile.avatar, alt: userProfile.name, className: "w-10 h-10 rounded-full object-cover" })) : (_jsx(Flex, { align: "center", justify: "center", className: "w-10 h-10 rounded-full bg-primary/10 text-primary font-semibold", children: userProfile.name.charAt(0).toUpperCase() })), _jsxs(Stack, { gap: 0, className: "min-w-0", children: [_jsx(Text, { size: "sm", weight: "medium", className: "truncate", children: userProfile.name }), _jsx(Text, { size: "xs", className: "text-muted-foreground truncate", children: userProfile.email })] })] }), _jsx(Box, { className: "py-2", children: userProfile.links.map((link, index) => (_jsxs(React.Fragment, { children: [link.divider && index > 0 && (_jsx(Box, { className: "my-2 border-t" })), link.href ? (_jsxs(Box, { as: "a", href: link.href, className: cn("flex items-center gap-3 px-4 py-2.5 text-sm transition-colors hover:bg-accent", link.variant === "danger"
                                                                                     ? "text-destructive hover:bg-destructive/10"
-                                                                                    : "text-foreground hover:text-foreground"), onClick: onMobileMenuToggle, children: [link.icon && (_jsx("span", { className: "w-4 h-4", children: link.icon })), link.label] })) : (_jsxs("button", { type: "button", className: cn("w-full flex items-center gap-3 px-4 py-2.5 text-sm transition-colors hover:bg-accent text-left", link.variant === "danger"
+                                                                                    : "text-foreground hover:text-foreground"), onClick: onMobileMenuToggle, children: [link.icon && (_jsx(Box, { as: "span", className: "w-4 h-4", children: link.icon })), link.label] })) : (_jsxs(Button, { variant: "ghost", className: cn("w-full flex items-center gap-3 px-4 py-2.5 text-sm transition-colors hover:bg-accent text-left justify-start font-normal h-auto rounded-none", link.variant === "danger"
                                                                                     ? "text-destructive hover:bg-destructive/10"
                                                                                     : "text-foreground hover:text-foreground"), onClick: () => {
                                                                                     link.onClick?.();
                                                                                     onMobileMenuToggle?.();
-                                                                                }, children: [link.icon && (_jsx("span", { className: "w-4 h-4", children: link.icon })), link.label] }))] }, link.label))) })] })) : userMenu ? (_jsxs("div", { className: "px-4 py-3 border-b", children: [_jsx("div", { className: "text-xs font-semibold text-muted-foreground uppercase mb-2", children: "Account" }), userMenu] })) : null, _jsx("div", { className: "py-2", children: navLinks.map((link) => (_jsx(React.Fragment, { children: _jsxs("div", { className: "flex flex-col", children: [_jsxs("a", { href: link.href, className: cn("text-sm font-medium px-4 py-3 flex items-center justify-between transition-colors hover:bg-accent border-l-4", link.active
+                                                                                }, children: [link.icon && (_jsx(Box, { as: "span", className: "w-4 h-4", children: link.icon })), link.label] }))] }, link.label))) })] })) : userMenu ? (_jsxs(Box, { className: "px-4 py-3 border-b", children: [_jsx(Text, { size: "xs", weight: "semibold", className: "text-muted-foreground uppercase mb-2", children: "Account" }), userMenu] })) : null, _jsx(Box, { className: "py-2", children: navLinks.map((link) => (_jsx(React.Fragment, { children: _jsxs(Flex, { direction: "column", children: [_jsxs(Box, { as: "a", href: link.href, className: cn("text-sm font-medium px-4 py-3 flex items-center justify-between transition-colors hover:bg-accent border-l-4", link.active
                                                                                 ? "bg-primary/10 text-primary border-primary"
                                                                                 : "text-foreground border-transparent hover:border-border"), "aria-current": link.active ? "page" : undefined, onClick: (e) => {
                                                                                 if (link.children || link.href === "#") {
@@ -69,8 +55,8 @@ export const Header = React.forwardRef(({ className, logo, navLinks = [], userMe
                                                                             }, children: [link.label, link.children && (_jsx(ChevronDown, { className: cn("w-4 h-4 transition-transform duration-200", expandedItems.has(link.label)
                                                                                         ? "rotate-180"
                                                                                         : "") }))] }), link.children &&
-                                                                            expandedItems.has(link.label) && (_jsx("div", { className: "bg-muted animate-in slide-in-from-top-2 duration-200", children: link.children.map((child) => (_jsx("a", { href: child.href, className: cn("block text-sm px-8 py-2.5 transition-colors hover:bg-accent border-l-4 border-transparent", child.active
+                                                                            expandedItems.has(link.label) && (_jsx(Box, { className: "bg-muted animate-in slide-in-from-top-2 duration-200", children: link.children.map((child) => (_jsx(Box, { as: "a", href: child.href, className: cn("block text-sm px-8 py-2.5 transition-colors hover:bg-accent border-l-4 border-transparent", child.active
                                                                                     ? "text-primary font-medium"
-                                                                                    : "text-muted-foreground hover:text-foreground"), onClick: onMobileMenuToggle, children: child.label }, child.label))) }))] }) }, link.label))) })] }), _jsx(TabsContent, { value: "notifications", className: "mt-0 h-full", children: mobileNotifications || notifications ? (_jsx("div", { className: "p-0", children: mobileNotifications || notifications })) : (_jsxs("div", { className: "flex flex-col items-center justify-center h-64 text-muted-foreground", children: [_jsx(Bell, { className: "w-12 h-12 mb-4 opacity-20" }), _jsx("p", { children: "No notifications" })] })) }), _jsx(TabsContent, { value: "preferences", className: "mt-0 h-full", children: _jsx("div", { className: "flex flex-col", children: (themeSwitcherMobile || languageSwitcherMobile) && (_jsxs("div", { className: "p-4 space-y-6", children: [_jsx("div", { className: "text-xs font-semibold text-muted-foreground uppercase", children: "Preferences" }), _jsxs("div", { className: "flex flex-col gap-6", children: [themeSwitcherMobile && (_jsx("div", { className: "w-full", children: themeSwitcherMobile })), languageSwitcherMobile && (_jsx("div", { className: "w-full", children: languageSwitcherMobile }))] })] })) }) })] })] })] })] }), document.body)] }));
+                                                                                    : "text-muted-foreground hover:text-foreground"), onClick: onMobileMenuToggle, children: child.label }, child.label))) }))] }) }, link.label))) })] }), _jsx(TabsContent, { value: "notifications", className: "mt-0 h-full", children: mobileNotifications || notifications ? (_jsx(Box, { className: "p-0", children: mobileNotifications || notifications })) : (_jsxs(Flex, { direction: "column", align: "center", justify: "center", className: "h-64 text-muted-foreground", children: [_jsx(Bell, { className: "w-12 h-12 mb-4 opacity-20" }), _jsx(Text, { children: "No notifications" })] })) }), _jsx(TabsContent, { value: "preferences", className: "mt-0 h-full", children: _jsx(Flex, { direction: "column", children: (themeSwitcherMobile || languageSwitcherMobile) && (_jsxs(Stack, { gap: 6, className: "p-4", children: [_jsx(Text, { size: "xs", weight: "semibold", className: "text-muted-foreground uppercase", children: "Preferences" }), _jsxs(Stack, { gap: 6, children: [themeSwitcherMobile && (_jsx(Box, { className: "w-full", children: themeSwitcherMobile })), languageSwitcherMobile && (_jsx(Box, { className: "w-full", children: languageSwitcherMobile }))] })] })) }) })] })] })] })] }), document.body)] }));
 });
 Header.displayName = "Header";

package/dist/components/header/index.d.ts

@@ -1,4 +1,4 @@
-export type { HeaderProps, NavLink } from "./header";
+export type { HeaderNavLink, HeaderProps } from "./header";
 export { Header } from "./header";
 export type { HeaderSkeletonConfig, HeaderSkeletonProps, } from "./header-skeleton";
 export { HeaderSkeleton } from "./header-skeleton";

package/dist/components/heading/heading.d.ts

@@ -5,8 +5,10 @@ declare const headingVariants: (props?: ({
     align?: "center" | "left" | "right" | null | undefined;
     weight?: "default" | "medium" | "semibold" | "extrabold" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
-export interface HeadingProps extends React.HTMLAttributes<HTMLHeadingElement>, VariantProps<typeof headingVariants> {
+export interface HeadingProps extends React.HTMLAttributes<HTMLElement>, VariantProps<typeof headingVariants> {
     asChild?: boolean;
+    as?: React.ElementType;
+    [key: string]: any;
 }
-declare const Heading: React.ForwardRefExoticComponent<HeadingProps & React.RefAttributes<HTMLHeadingElement>>;
+declare const Heading: React.ForwardRefExoticComponent<Omit<HeadingProps, "ref"> & React.RefAttributes<HTMLElement>>;
 export { Heading, headingVariants };

package/dist/components/heading/heading.js

@@ -31,13 +31,9 @@ const headingVariants = cva("font-bold tracking-tight text-foreground", {
         weight: "default",
     },
 });
-const Heading = React.forwardRef(({ className, size, align, weight, asChild = false, ...props }, ref) => {
-    const _Comp = asChild ? Slot : "h2";
-    // If asChild is false, we try to use the appropriate heading tag based on size
-    // But since Comp is determined by asChild, we can't easily change it dynamically if not asChild
-    // Unless we map size to tag.
-    // Simple mapping if not asChild
-    const Tag = asChild ? Slot : size || "h2";
+const Heading = React.forwardRef(({ className, size, align, weight, asChild = false, as, ...props }, ref) => {
+    const defaultTag = size || "h2";
+    const Tag = asChild ? Slot : (as || defaultTag);
     return (_jsx(Tag, { className: cn(headingVariants({ size, align, weight, className })), ref: ref, ...props }));
 });
 Heading.displayName = "Heading";

package/dist/components/heading/index.d.ts

@@ -1 +1 @@
-export * from './heading';
+export * from "./heading";

package/dist/components/heading/index.js

@@ -1 +1 @@
-export * from './heading';
+export * from "./heading";

package/dist/components/indicator/index.d.ts

@@ -0,0 +1 @@
+export * from "./indicator";

package/dist/components/indicator/index.js

@@ -0,0 +1 @@
+export * from "./indicator";

package/dist/components/indicator/indicator.d.ts

@@ -0,0 +1,30 @@
+import { type VariantProps } from "class-variance-authority";
+import * as React from "react";
+declare const indicatorVariants: (props?: ({
+    position?: "top-left" | "top-right" | "bottom-left" | "bottom-right" | "top-center" | "middle-left" | "middle-center" | "middle-right" | "bottom-center" | null | undefined;
+    color?: "primary" | "secondary" | "success" | "danger" | "warning" | "info" | null | undefined;
+    withBorder?: boolean | null | undefined;
+    processing?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface IndicatorProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "color">, VariantProps<typeof indicatorVariants> {
+    /** Indicator position relative to the target element */
+    position?: "top-left" | "top-center" | "top-right" | "middle-left" | "middle-center" | "middle-right" | "bottom-left" | "bottom-center" | "bottom-right";
+    /** Offset from the edge of the target element, in px */
+    offset?: number;
+    /** Determines whether the indicator should be displayed inline */
+    inline?: boolean;
+    /** Size of the indicator in px */
+    size?: number;
+    /** Determines whether the indicator should have a border */
+    withBorder?: boolean;
+    /** Determines whether the indicator should be disabled (hidden) */
+    disabled?: boolean;
+    /** Determines whether the indicator should show a processing animation */
+    processing?: boolean;
+    /** Indicator label */
+    label?: React.ReactNode;
+    /** Target element */
+    children?: React.ReactNode;
+}
+declare const Indicator: React.ForwardRefExoticComponent<IndicatorProps & React.RefAttributes<HTMLDivElement>>;
+export { Indicator, indicatorVariants };

package/dist/components/indicator/indicator.js

@@ -0,0 +1,89 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import * as React from "react";
+import { cn } from "../../lib/utils";
+import { Box } from "../box";
+const indicatorVariants = cva("absolute flex items-center justify-center font-bold z-50", {
+    variants: {
+        position: {
+            "top-left": "top-0 left-0 -translate-x-1/2 -translate-y-1/2",
+            "top-center": "top-0 left-1/2 -translate-x-1/2 -translate-y-1/2",
+            "top-right": "top-0 right-0 translate-x-1/2 -translate-y-1/2",
+            "middle-left": "top-1/2 left-0 -translate-x-1/2 -translate-y-1/2",
+            "middle-center": "top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2",
+            "middle-right": "top-1/2 right-0 translate-x-1/2 -translate-y-1/2",
+            "bottom-left": "bottom-0 left-0 -translate-x-1/2 translate-y-1/2",
+            "bottom-center": "bottom-0 left-1/2 -translate-x-1/2 translate-y-1/2",
+            "bottom-right": "bottom-0 right-0 translate-x-1/2 translate-y-1/2",
+        },
+        color: {
+            primary: "bg-primary text-primary-foreground",
+            secondary: "bg-secondary text-secondary-foreground",
+            danger: "bg-destructive text-destructive-foreground",
+            success: "bg-success text-success-foreground",
+            warning: "bg-warning text-warning-foreground",
+            info: "bg-info text-info-foreground",
+        },
+        withBorder: {
+            true: "border-2 border-background",
+        },
+        processing: {
+            true: "animate-pulse",
+        },
+    },
+    defaultVariants: {
+        position: "top-right",
+        color: "primary",
+        withBorder: false,
+        processing: false,
+    },
+});
+const Indicator = React.forwardRef(({ className, position = "top-right", offset = 0, inline = false, size = 10, withBorder = false, disabled = false, processing = false, color = "primary", label, children, style, ...props }, ref) => {
+    const getPositionStyles = () => {
+        const styles = {};
+        if (offset) {
+            switch (position) {
+                case "top-left":
+                    styles.top = offset;
+                    styles.left = offset;
+                    break;
+                case "top-center":
+                    styles.top = offset;
+                    break;
+                case "top-right":
+                    styles.top = offset;
+                    styles.right = offset;
+                    break;
+                case "middle-left":
+                    styles.left = offset;
+                    break;
+                case "middle-right":
+                    styles.right = offset;
+                    break;
+                case "bottom-left":
+                    styles.bottom = offset;
+                    styles.left = offset;
+                    break;
+                case "bottom-center":
+                    styles.bottom = offset;
+                    break;
+                case "bottom-right":
+                    styles.bottom = offset;
+                    styles.right = offset;
+                    break;
+            }
+        }
+        return styles;
+    };
+    return (_jsxs(Box, { ref: ref, className: cn("relative", inline ? "inline-block" : "block"), children: [!disabled && (_jsx("div", { className: cn(indicatorVariants({ position, color, withBorder, processing }), "rounded-full", className), style: {
+                    width: label ? "auto" : size,
+                    height: size,
+                    minWidth: size,
+                    padding: label ? `0 ${size / 3}px` : 0,
+                    fontSize: size * 0.7,
+                    ...getPositionStyles(),
+                    ...style,
+                }, ...props, children: label })), children] }));
+});
+Indicator.displayName = "Indicator";
+export { Indicator, indicatorVariants };

package/dist/components/indicator/indicator.stories.d.ts

@@ -0,0 +1,10 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Indicator } from "./indicator";
+declare const meta: Meta<typeof Indicator>;
+export default meta;
+type Story = StoryObj<typeof Indicator>;
+export declare const Default: Story;
+export declare const WithLabel: Story;
+export declare const Processing: Story;
+export declare const Positions: Story;
+export declare const Inline: Story;

package/dist/components/indicator/indicator.stories.js

@@ -0,0 +1,75 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Avatar, AvatarFallback, AvatarImage } from "../avatar";
+import { Indicator } from "./indicator";
+const meta = {
+    title: "Components/Indicator",
+    component: Indicator,
+    parameters: {
+        layout: "centered",
+    },
+    tags: ["autodocs"],
+    argTypes: {
+        color: {
+            control: "select",
+            options: [
+                "primary",
+                "secondary",
+                "danger",
+                "success",
+                "warning",
+                "info",
+            ],
+        },
+        position: {
+            control: "select",
+            options: [
+                "top-left",
+                "top-center",
+                "top-right",
+                "middle-left",
+                "middle-center",
+                "middle-right",
+                "bottom-left",
+                "bottom-center",
+                "bottom-right",
+            ],
+        },
+        size: {
+            control: { type: "number", min: 6, max: 30, step: 2 },
+        },
+        offset: {
+            control: { type: "number", min: -20, max: 20, step: 1 },
+        },
+    },
+};
+export default meta;
+export const Default = {
+    args: {
+        children: (_jsxs(Avatar, { children: [_jsx(AvatarImage, { src: "https://github.com/shadcn.png", alt: "@shadcn" }), _jsx(AvatarFallback, { children: "CN" })] })),
+    },
+};
+export const WithLabel = {
+    args: {
+        label: "New",
+        size: 16,
+        children: (_jsx("div", { className: "w-12 h-12 bg-gray-200 rounded-md" })),
+    },
+};
+export const Processing = {
+    args: {
+        processing: true,
+        children: (_jsxs(Avatar, { children: [_jsx(AvatarImage, { src: "https://github.com/shadcn.png", alt: "@shadcn" }), _jsx(AvatarFallback, { children: "CN" })] })),
+    },
+};
+export const Positions = {
+    render: () => (_jsxs("div", { className: "grid grid-cols-3 gap-8", children: [_jsx(Indicator, { position: "top-left", children: _jsx("div", { className: "w-12 h-12 bg-gray-200" }) }), _jsx(Indicator, { position: "top-center", children: _jsx("div", { className: "w-12 h-12 bg-gray-200" }) }), _jsx(Indicator, { position: "top-right", children: _jsx("div", { className: "w-12 h-12 bg-gray-200" }) }), _jsx(Indicator, { position: "middle-left", children: _jsx("div", { className: "w-12 h-12 bg-gray-200" }) }), _jsx(Indicator, { position: "middle-center", children: _jsx("div", { className: "w-12 h-12 bg-gray-200" }) }), _jsx(Indicator, { position: "middle-right", children: _jsx("div", { className: "w-12 h-12 bg-gray-200" }) }), _jsx(Indicator, { position: "bottom-left", children: _jsx("div", { className: "w-12 h-12 bg-gray-200" }) }), _jsx(Indicator, { position: "bottom-center", children: _jsx("div", { className: "w-12 h-12 bg-gray-200" }) }), _jsx(Indicator, { position: "bottom-right", children: _jsx("div", { className: "w-12 h-12 bg-gray-200" }) })] })),
+};
+export const Inline = {
+    args: {
+        inline: true,
+        label: "New",
+        size: 16,
+        children: _jsx("span", { children: "Label with indicator" }),
+        position: "middle-right",
+    },
+};

package/dist/components/input/input.js

@@ -14,7 +14,7 @@ import { Eye, EyeOff } from "lucide-react";
 import * as React from "react";
 import { inputStyles } from "../../config/input";
 import { cn } from "../../lib/utils";
-import { Skeleton } from "../skeleton/skeleton";
+import { Skeleton } from "../skeleton";
 export const Input = React.forwardRef(({ className, type: typeProp = "text", showPasswordToggle = false, prefixIcon, suffixIcon, hasError = false, hasSuccess = false, unstyled = false, isLoading = false, ...props }, ref) => {
     const [showPassword, setShowPassword] = React.useState(false);
     const [internalType, setInternalType] = React.useState(typeProp);

package/dist/components/input/input.stories.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { fn } from "@storybook/test";
 import { Mail, Search, User } from "lucide-react";
-import { Skeleton } from "../skeleton/skeleton";
+import { Skeleton } from "../skeleton";
 import { Input } from "./input";
 const meta = {
     title: "Forms/Input",

package/dist/components/input-group/input-group.stories.js

@@ -2,11 +2,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ChevronDown, Copy, Search, User } from "lucide-react";
 import { Button } from "../button";
 import { Checkbox } from "../checkbox";
-import { Skeleton } from "../skeleton/skeleton";
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, } from "../dropdown-menu";
 import { Input } from "../input";
 import { RadioGroup, RadioGroupItem } from "../radio-group";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "../select";
+import { Skeleton } from "../skeleton";
 import { Textarea } from "../textarea";
 import { InputGroup, InputGroupText } from "./input-group";
 const meta = {

package/dist/components/kbd/index.d.ts

@@ -0,0 +1 @@
+export * from "./kbd";

package/dist/components/kbd/index.js

@@ -0,0 +1 @@
+export * from "./kbd";

package/dist/components/kbd/kbd.d.ts

@@ -0,0 +1,6 @@
+import * as React from "react";
+export interface KbdProps extends React.HTMLAttributes<HTMLElement> {
+    /** Size of the keyboard key */
+    size?: "xs" | "sm" | "md" | "lg";
+}
+export declare const Kbd: React.ForwardRefExoticComponent<KbdProps & React.RefAttributes<HTMLElement>>;

package/dist/components/kbd/kbd.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../lib/utils";
+export const Kbd = React.forwardRef(({ className, size = "sm", ...props }, ref) => {
+    const sizeClasses = {
+        xs: "px-1 text-[10px] h-4 min-w-[16px]",
+        sm: "px-1.5 text-xs h-5 min-w-[20px]",
+        md: "px-2 text-sm h-6 min-w-[24px]",
+        lg: "px-2.5 text-base h-7 min-w-[28px]",
+    };
+    return (_jsx("kbd", { ref: ref, className: cn("inline-flex items-center justify-center rounded border border-b-2 bg-muted font-mono font-medium text-muted-foreground", sizeClasses[size], className), ...props }));
+});
+Kbd.displayName = "Kbd";

package/dist/components/kbd/kbd.stories.d.ts

@@ -0,0 +1,9 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Kbd } from "./kbd";
+declare const meta: Meta<typeof Kbd>;
+export default meta;
+type Story = StoryObj<typeof Kbd>;
+export declare const Default: Story;
+export declare const Combination: Story;
+export declare const Sizes: Story;
+export declare const InContext: Story;

package/dist/components/kbd/kbd.stories.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Kbd } from "./kbd";
+const meta = {
+    title: "Components/Kbd",
+    component: Kbd,
+    tags: ["autodocs"],
+    argTypes: {
+        size: {
+            control: { type: "select" },
+            options: ["xs", "sm", "md", "lg"],
+        },
+    },
+};
+export default meta;
+export const Default = {
+    args: {
+        children: "Ctrl",
+    },
+};
+export const Combination = {
+    render: () => (_jsxs("div", { className: "flex items-center gap-1", children: [_jsx(Kbd, { children: "\u2318" }), _jsx("span", { children: "+" }), _jsx(Kbd, { children: "Shift" }), _jsx("span", { children: "+" }), _jsx(Kbd, { children: "M" })] })),
+};
+export const Sizes = {
+    render: () => (_jsxs("div", { className: "flex items-end gap-2", children: [_jsx(Kbd, { size: "xs", children: "xs" }), _jsx(Kbd, { size: "sm", children: "sm" }), _jsx(Kbd, { size: "md", children: "md" }), _jsx(Kbd, { size: "lg", children: "lg" })] })),
+};
+export const InContext = {
+    render: () => (_jsxs("div", { className: "text-sm", children: ["Press ", _jsx(Kbd, { children: "Ctrl" }), " + ", _jsx(Kbd, { children: "C" }), " to copy"] })),
+};

package/dist/components/label/label.stories.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Skeleton } from "../skeleton/skeleton";
+import { Skeleton } from "../skeleton";
 import { Label } from "./label";
 const meta = {
     title: "Forms/Label",

package/dist/components/list/list-skeleton.js

@@ -6,7 +6,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  * Provides zero-CLS skeleton states that match actual list layouts.
  */
 import { cn } from "../../lib/utils";
-import { Skeleton } from "../skeleton/skeleton";
+import { Skeleton } from "../skeleton";
 import { SkeletonAvatar, SkeletonCircle } from "../skeleton/skeleton-patterns";
 /**
  * List skeleton component with multiple variants
@@ -19,7 +19,7 @@ import { SkeletonAvatar, SkeletonCircle } from "../skeleton/skeleton-patterns";
  * ```
  */
 export function ListSkeleton({ variant = "simple", itemCount = 3, showDividers = true, dense = false, className, "data-testid": dataTestId, }) {
-    return (_jsx("ul", { "data-testid": dataTestId || "list-skeleton", className: cn("flex flex-col bg-card rounded-lg border overflow-hidden", showDividers && "[&>li:not(:last-child)]:border-b", className), children: Array.from({ length: itemCount }).map((_, index) => (_jsxs("li", { className: cn("flex items-center gap-3 w-full", dense ? "px-3 py-2" : "px-4 py-3"), children: [variant === "simple" && _jsx(SimpleListItemSkeleton, { dense: dense }), variant === "withAvatar" && _jsx(AvatarListItemSkeleton, { dense: dense }), variant === "withIcon" && _jsx(IconListItemSkeleton, { dense: dense }), variant === "withBadge" && _jsx(BadgeListItemSkeleton, { dense: dense }), variant === "multiLine" && _jsx(MultiLineListItemSkeleton, { dense: dense })] }, index))) }));
+    return (_jsx("ul", { "data-testid": dataTestId || "list-skeleton", className: cn("flex flex-col bg-card rounded-lg border overflow-hidden", showDividers && "[&>li:not(:last-child)]:border-b", className), children: Array.from({ length: itemCount }).map((_, index) => (_jsxs("li", { className: cn("flex items-center gap-3 w-full", dense ? "px-3 py-2" : "px-4 py-3"), children: [variant === "simple" && _jsx(SimpleListItemSkeleton, { dense: dense }), variant === "withAvatar" && _jsx(AvatarListItemSkeleton, { dense: dense }), variant === "withIcon" && _jsx(IconListItemSkeleton, { dense: dense }), variant === "withBadge" && _jsx(BadgeListItemSkeleton, { dense: dense }), variant === "multiLine" && (_jsx(MultiLineListItemSkeleton, { dense: dense }))] }, index))) }));
 }
 /**
  * Simple variant: text only items

package/dist/components/list/list.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { cn } from "../../lib/utils";
-import { Badge } from "../badge/badge";
+import { Badge } from "../badge";
 import { ListSkeleton } from "./list-skeleton";
 function List({ className, divided = true, dense = false, isLoading = false, skeletonConfig, skeleton, children, ...props }) {
     if (isLoading) {

package/dist/components/list/list.stories.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { CheckCircle, ChevronRight, Home, Info, Mail, MessageCircle, Settings, Trash2, User, UserPlus, } from "lucide-react";
-import { Skeleton } from "../skeleton/skeleton";
 import { Button } from "../button";
+import { Skeleton } from "../skeleton";
 import { List, ListItem, ListItemAction, ListItemAvatar, ListItemBadge, ListItemContent, ListItemIcon, ListItemText, ListItemTitle, } from "./list";
 const meta = {
     title: "Data Display/List",

package/dist/components/list/list.types.d.ts

@@ -1,6 +1,6 @@
-import type * as React from "react";
-import type { badgeVariants } from "../badge/badge";
 import type { VariantProps } from "class-variance-authority";
+import type * as React from "react";
+import type { badgeVariants } from "../badge";
 import type { ListSkeletonConfig } from "../skeleton/skeleton.types";
 export interface ListProps extends React.HTMLAttributes<HTMLUListElement> {
     /**

package/dist/components/loading-overlay/index.d.ts

@@ -0,0 +1 @@
+export * from "./loading-overlay";

package/dist/components/loading-overlay/index.js

@@ -0,0 +1 @@
+export * from "./loading-overlay";

package/dist/components/loading-overlay/loading-overlay.d.ts

@@ -0,0 +1,19 @@
+import * as React from "react";
+import { type OverlayProps } from "../overlay";
+import { Spinner } from "../spinner";
+export interface LoadingOverlayProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** If set loading overlay will be visible */
+    visible?: boolean;
+    /** Overlay z-index */
+    zIndex?: number;
+    /** Props passed to Overlay component */
+    overlayProps?: OverlayProps;
+    /** Props passed to Loader component */
+    loaderProps?: React.ComponentProps<typeof Spinner> & {
+        children?: React.ReactNode;
+    };
+    /** Transition duration in ms */
+    transitionDuration?: number;
+}
+declare const LoadingOverlay: React.ForwardRefExoticComponent<LoadingOverlayProps & React.RefAttributes<HTMLDivElement>>;
+export { LoadingOverlay };

package/dist/components/loading-overlay/loading-overlay.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../lib/utils";
+import { Box } from "../box";
+import { Overlay } from "../overlay";
+import { Spinner } from "../spinner";
+const LoadingOverlay = React.forwardRef(({ className, visible = false, zIndex = 400, overlayProps, loaderProps, transitionDuration = 0, style, ...props }, ref) => {
+    const { children: loaderChildren, ...otherLoaderProps } = loaderProps || {};
+    if (!visible && transitionDuration === 0) {
+        return null;
+    }
+    return (_jsxs(Box, { ref: ref, className: cn("absolute inset-0 flex items-center justify-center pointer-events-none transition-opacity", visible ? "opacity-100 pointer-events-auto" : "opacity-0", className), style: {
+            zIndex,
+            transitionDuration: `${transitionDuration}ms`,
+            ...style,
+        }, ...props, children: [_jsx(Overlay, { zIndex: zIndex, ...overlayProps, fixed: false, className: cn(overlayProps?.className) }), _jsx(Box, { className: "relative z-10", children: loaderChildren ? (loaderChildren) : (_jsx(Spinner, { size: "lg", ...otherLoaderProps })) })] }));
+});
+LoadingOverlay.displayName = "LoadingOverlay";
+export { LoadingOverlay };

package/dist/components/loading-overlay/loading-overlay.stories.d.ts

@@ -0,0 +1,8 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { LoadingOverlay } from "./loading-overlay";
+declare const meta: Meta<typeof LoadingOverlay>;
+export default meta;
+type Story = StoryObj<typeof LoadingOverlay>;
+export declare const Default: Story;
+export declare const CustomLoader: Story;
+export declare const WithTransition: Story;