@kala-ui/react-app 0.1.0-beta.0

package/dist/components/header/header-skeleton.d.ts

@@ -0,0 +1,54 @@
+/**
+ * Header Skeleton Component
+ *
+ * Loading placeholder for the Header component.
+ * Matches logo + navigation + actions layout.
+ */
+export interface HeaderSkeletonConfig {
+    /**
+     * Show navigation items
+     * @default true
+     */
+    showNavigation?: boolean;
+    /**
+     * Number of navigation items
+     * @default 4
+     */
+    navItemCount?: number;
+    /**
+     * Show search input
+     * @default false
+     */
+    showSearch?: boolean;
+    /**
+     * Show notifications button
+     * @default false
+     */
+    showNotifications?: boolean;
+    /**
+     * Show user menu button
+     * @default true
+     */
+    showUserMenu?: boolean;
+}
+export interface HeaderSkeletonProps extends HeaderSkeletonConfig {
+    /**
+     * Additional className for the skeleton container
+     */
+    className?: string;
+    /**
+     * Test ID for querying the element
+     */
+    "data-testid"?: string;
+}
+/**
+ * Header skeleton component
+ *
+ * @example
+ * ```tsx
+ * <HeaderSkeleton showNavigation showSearch showUserMenu />
+ *
+ * <HeaderSkeleton navItemCount={5} showNotifications />
+ * ```
+ */
+export declare function HeaderSkeleton({ showNavigation, navItemCount, showSearch, showNotifications, showUserMenu, className, "data-testid": dataTestId, }: HeaderSkeletonProps): import("react").JSX.Element;

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

@@ -0,0 +1,23 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Header Skeleton Component
+ *
+ * Loading placeholder for the Header component.
+ * Matches logo + navigation + actions layout.
+ */
+import { cn } from "@kala-ui/react/lib/utils";
+import { Skeleton } from "@kala-ui/react/skeleton";
+/**
+ * Header skeleton component
+ *
+ * @example
+ * ```tsx
+ * <HeaderSkeleton showNavigation showSearch showUserMenu />
+ *
+ * <HeaderSkeleton navItemCount={5} showNotifications />
+ * ```
+ */
+export function HeaderSkeleton({ showNavigation = true, navItemCount = 4, showSearch = false, showNotifications = false, showUserMenu = true, className, "data-testid": dataTestId, }) {
+    return (_jsxs("header", { "data-testid": dataTestId || "header-skeleton", className: cn("flex items-center justify-between p-4 border-b bg-background", className), children: [_jsx(Skeleton, { className: "h-8 w-32 flex-shrink-0" }), showNavigation && (_jsx("div", { className: "hidden md:flex gap-6 flex-1 mx-8", children: Array.from({ length: navItemCount }).map((_, i) => (_jsx(Skeleton, { className: "h-4 w-20" }, `nav-${i}`))) })), _jsxs("div", { className: "flex items-center gap-3 flex-shrink-0", children: [showSearch && (_jsx(Skeleton, { className: "hidden sm:block h-9 w-64 rounded-full" })), showNotifications && _jsx(Skeleton, { className: "h-9 w-9 rounded-full" }), showUserMenu && _jsx(Skeleton, { className: "h-9 w-9 rounded-full" }), _jsx(Skeleton, { className: "h-9 w-9 md:hidden" })] })] }));
+}

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

@@ -0,0 +1,40 @@
+import * as React from "react";
+export interface HeaderNavLink {
+    label: string;
+    href: string;
+    active?: boolean;
+    children?: HeaderNavLink[];
+}
+export interface UserProfileLink {
+    label: string;
+    href?: string;
+    icon?: React.ReactNode;
+    onClick?: () => void;
+    divider?: boolean;
+    variant?: "default" | "danger";
+}
+export interface UserProfile {
+    name: string;
+    email: string;
+    username?: string | null;
+    avatar?: string | null;
+    role?: string;
+    links: UserProfileLink[];
+}
+export interface HeaderProps extends React.HTMLAttributes<HTMLElement>, React.RefAttributes<HTMLElement> {
+    logo?: React.ReactNode;
+    navLinks?: HeaderNavLink[];
+    userMenu?: React.ReactNode;
+    userProfile?: UserProfile;
+    searchBar?: React.ReactNode;
+    notifications?: React.ReactNode;
+    mobileNotifications?: React.ReactNode;
+    themeSwitcher?: React.ReactNode;
+    themeSwitcherMobile?: React.ReactNode;
+    languageSwitcher?: React.ReactNode;
+    languageSwitcherMobile?: React.ReactNode;
+    onMobileMenuToggle?: () => void;
+    isMobileMenuOpen?: boolean;
+    variant?: "default" | "dashboard";
+}
+export declare function Header({ ref, className, logo, navLinks, userMenu, userProfile, searchBar, notifications, mobileNotifications, themeSwitcher, themeSwitcherMobile, languageSwitcher, languageSwitcherMobile, onMobileMenuToggle, isMobileMenuOpen, variant, ...props }: HeaderProps): React.JSX.Element;

package/dist/components/header/header.js

@@ -0,0 +1,77 @@
+"use client";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box } from "@kala-ui/react/box";
+import { Button } from "@kala-ui/react/button";
+import { Flex } from "@kala-ui/react/flex";
+import { cn } from "@kala-ui/react/lib/utils";
+import { List } from "@kala-ui/react/list";
+import { NavigationMenu, NavigationMenuContent, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, } from "@kala-ui/react/navigation-menu";
+import { Stack } from "@kala-ui/react/stack";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@kala-ui/react/tabs";
+import { Text } from "@kala-ui/react/text";
+import { useFocusTrap, 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";
+export function Header({ ref, className, logo, navLinks = [], userMenu, userProfile, searchBar, notifications, mobileNotifications, themeSwitcher, themeSwitcherMobile, languageSwitcher, languageSwitcherMobile, onMobileMenuToggle, isMobileMenuOpen, variant = "default", ...props }) {
+    // useScrollLock's argument is the INITIAL state only — drive it through
+    // the setter so opening/closing the menu actually engages the lock.
+    const [, setScrollLocked] = useScrollLock();
+    React.useEffect(() => {
+        setScrollLocked(!!isMobileMenuOpen);
+    }, [isMobileMenuOpen, setScrollLocked]);
+    // Fullscreen mobile menu: trap focus, close on Escape.
+    const mobileNavRef = useFocusTrap(!!isMobileMenuOpen);
+    React.useEffect(() => {
+        if (!isMobileMenuOpen)
+            return;
+        const handleKeyDown = (event) => {
+            if (event.key === "Escape")
+                onMobileMenuToggle?.();
+        };
+        window.addEventListener("keydown", handleKeyDown);
+        return () => window.removeEventListener("keydown", handleKeyDown);
+    }, [isMobileMenuOpen, onMobileMenuToggle]);
+    const mounted = useMounted();
+    // Track expanded mobile menu items
+    const [expandedItems, setExpandedItems] = React.useState(new Set());
+    const toggleExpanded = (label) => {
+        setExpandedItems((prev) => {
+            const next = new Set(prev);
+            if (next.has(label)) {
+                next.delete(label);
+            }
+            else {
+                next.add(label);
+            }
+            return next;
+        });
+    };
+    return (_jsxs(Box, { as: "header", ref: ref, "data-comp": "header", className: cn("w-full bg-popover border-b sticky top-0 z-20 kala-surface-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-visible:bg-accent focus-visible: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", className: "gap-1.5 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(Box, { className: "fixed inset-0 bg-overlay/40 backdrop-blur-sm z-40 lg:hidden", onClick: onMobileMenuToggle, "aria-hidden": "true" }), _jsxs(Box, { as: "nav", ref: mobileNavRef, role: "dialog", "aria-modal": "true", className: "fixed top-0 left-0 right-0 bottom-0 bg-popover z-40 lg:hidden overflow-hidden flex flex-col kala-surface-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 outline-none focus-visible:bg-accent", link.variant === "danger"
+                                                                                    ? "text-destructive hover:bg-destructive/10"
+                                                                                    : "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(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 outline-none focus-visible:bg-accent", 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 === "#") {
+                                                                                    e.preventDefault();
+                                                                                    toggleExpanded(link.label);
+                                                                                }
+                                                                                else {
+                                                                                    onMobileMenuToggle?.();
+                                                                                }
+                                                                            }, 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(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 outline-none focus-visible:bg-accent", 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(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)] }));
+}

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

@@ -0,0 +1,39 @@
+import type * as React from "react";
+export interface NavLink {
+    label: string;
+    href: string;
+    active?: boolean;
+    children?: NavLink[];
+}
+export interface UserProfileLink {
+    label: string;
+    href?: string;
+    icon?: React.ReactNode;
+    onClick?: () => void;
+    divider?: boolean;
+    variant?: "default" | "danger";
+}
+export interface UserProfile {
+    name: string;
+    email: string;
+    username?: string | null;
+    avatar?: string | null;
+    role?: string;
+    links: UserProfileLink[];
+}
+export interface HeaderProps extends React.HTMLAttributes<HTMLElement>, React.RefAttributes<HTMLElement> {
+    logo?: React.ReactNode;
+    navLinks?: NavLink[];
+    userMenu?: React.ReactNode;
+    userProfile?: UserProfile;
+    searchBar?: React.ReactNode;
+    notifications?: React.ReactNode;
+    mobileNotifications?: React.ReactNode;
+    themeSwitcher?: React.ReactNode;
+    themeSwitcherMobile?: React.ReactNode;
+    languageSwitcher?: React.ReactNode;
+    languageSwitcherMobile?: React.ReactNode;
+    onMobileMenuToggle?: () => void;
+    isMobileMenuOpen?: boolean;
+    variant?: "default" | "dashboard";
+}

package/dist/components/header/header.types.js

@@ -0,0 +1,2 @@
+"use client";
+export {};

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

@@ -0,0 +1,4 @@
+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/header/index.js

@@ -0,0 +1,3 @@
+"use client";
+export { Header } from "./header.js";
+export { HeaderSkeleton } from "./header-skeleton.js";

package/dist/components/metric-card/index.d.ts

@@ -0,0 +1,2 @@
+export { MetricCard, type MetricCardProps } from "./metric-card";
+export { MetricCardSkeleton } from "./metric-card-skeleton";

package/dist/components/metric-card/index.js

@@ -0,0 +1,3 @@
+"use client";
+export { MetricCard } from "./metric-card.js";
+export { MetricCardSkeleton } from "./metric-card-skeleton.js";

package/dist/components/metric-card/metric-card-skeleton.d.ts

@@ -0,0 +1,32 @@
+/**
+ * Metric Card Skeleton Component
+ *
+ * Loading placeholder variants for the Metric Card component.
+ * Provides zero-CLS skeleton states that match actual metric card layouts.
+ */
+import type { MetricCardSkeletonConfig } from "@kala-ui/react/skeleton";
+import * as React from "react";
+export interface MetricCardSkeletonProps extends MetricCardSkeletonConfig {
+    /**
+     * Additional className for the skeleton container
+     */
+    className?: string;
+    /**
+     * Test ID for querying the element
+     */
+    "data-testid"?: string;
+}
+/**
+ * Metric Card skeleton component with multiple variants
+ *
+ * @example
+ * ```tsx
+ * <MetricCardSkeleton variant="default" />
+ *
+ * <MetricCardSkeleton variant="withIcon" />
+ * ```
+ */
+export declare function MetricCardSkeleton({ variant, showIcon, showChange, className, "data-testid": dataTestId, }: MetricCardSkeletonProps): React.JSX.Element;
+export declare namespace MetricCardSkeleton {
+    export { MetricCardSkeleton as Skeleton };
+}

package/dist/components/metric-card/metric-card-skeleton.js

@@ -0,0 +1,29 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Metric Card Skeleton Component
+ *
+ * Loading placeholder variants for the Metric Card component.
+ * Provides zero-CLS skeleton states that match actual metric card layouts.
+ */
+import { Card } from "@kala-ui/react/card";
+import { cn } from "@kala-ui/react/lib/utils";
+import { Skeleton, SkeletonCircle } from "@kala-ui/react/skeleton";
+import * as React from "react";
+/**
+ * Metric Card skeleton component with multiple variants
+ *
+ * @example
+ * ```tsx
+ * <MetricCardSkeleton variant="default" />
+ *
+ * <MetricCardSkeleton variant="withIcon" />
+ * ```
+ */
+export function MetricCardSkeleton({ variant = "default", showIcon = false, showChange = true, className, "data-testid": dataTestId, }) {
+    return (_jsx(Card, { ref: React.createRef(), "data-testid": dataTestId || "metric-card-skeleton", className: cn(className), children: _jsxs("div", { className: "p-6", children: [_jsxs("div", { className: "flex items-center justify-between mb-4", children: [_jsx(Skeleton, { className: "h-4 w-24" }), variant === "withIcon" || showIcon ? (_jsx(SkeletonCircle, { size: "1.5rem", className: "rounded-md" })) : null] }), _jsx("div", { className: "mb-3", children: _jsx(Skeleton, { className: "h-10 w-32" }) }), (variant === "default" || showChange) && (_jsx("div", { className: "text-sm", children: _jsx(Skeleton, { className: "h-4 w-32" }) }))] }) }));
+}
+/**
+ * Compound component: MetricCard.Skeleton
+ */
+MetricCardSkeleton.Skeleton = MetricCardSkeleton;

package/dist/components/metric-card/metric-card.d.ts

@@ -0,0 +1,16 @@
+import type { MetricCardSkeletonConfig } from "@kala-ui/react/skeleton";
+import type * as React from "react";
+export interface MetricCardProps extends Omit<React.ComponentProps<"div">, "title"> {
+    title: string;
+    value: number | string;
+    icon?: React.ReactNode;
+    change?: number;
+    changeLabel?: string;
+    subtitle?: string;
+    color?: "primary" | "secondary" | "destructive" | "success" | "warning" | "info" | "muted";
+    isLoading?: boolean;
+    skeletonConfig?: MetricCardSkeletonConfig;
+    skeleton?: React.ReactNode;
+}
+declare function MetricCard({ ref, title, value, icon, change, changeLabel, subtitle, className, color, isLoading, skeletonConfig, skeleton, ...props }: MetricCardProps): React.JSX.Element;
+export { MetricCard };

package/dist/components/metric-card/metric-card.js

@@ -0,0 +1,55 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Card } from "@kala-ui/react/card";
+import { cn } from "@kala-ui/react/lib/utils";
+import { MetricCardSkeleton } from "./metric-card-skeleton.js";
+function MetricCard({ ref, title, value, icon, change, changeLabel, subtitle, className, color = "muted", isLoading = false, skeletonConfig, skeleton, ...props }) {
+    if (isLoading) {
+        if (skeleton) {
+            return (_jsx(Card, { ref: ref, "data-comp": "metric-card", className: cn(className), ...props, children: skeleton }));
+        }
+        return _jsx(MetricCardSkeleton, { className: className, ...skeletonConfig });
+    }
+    const getChangeColor = (changeValue) => {
+        if (changeValue > 0)
+            return "text-success";
+        if (changeValue < 0)
+            return "text-destructive";
+        return "text-muted-foreground";
+    };
+    const getChangeIcon = (changeValue) => {
+        if (changeValue > 0)
+            return "↑";
+        if (changeValue < 0)
+            return "↓";
+        return "−";
+    };
+    const getChangeText = (changeValue) => {
+        const absValue = Math.abs(changeValue);
+        const defaultLabel = changeValue > 0 || changeValue < 0
+            ? `${absValue}% than last week`
+            : "No change";
+        return changeLabel || defaultLabel;
+    };
+    const getColorStyles = () => {
+        switch (color) {
+            case "primary":
+                return "bg-gradient-to-br from-primary to-primary/90 text-primary-foreground";
+            case "secondary":
+                return "bg-gradient-to-br from-secondary to-secondary/90 text-secondary-foreground";
+            case "destructive":
+                return "bg-gradient-to-br from-destructive to-destructive/90 text-destructive-foreground";
+            case "success":
+                return "bg-gradient-to-br from-success to-success/90 text-success-foreground";
+            case "warning":
+                return "bg-gradient-to-br from-warning to-warning/90 text-warning-foreground";
+            case "info":
+                return "bg-gradient-to-br from-info to-info/90 text-info-foreground";
+            default:
+                return "bg-card border text-card-foreground";
+        }
+    };
+    const isColorful = color !== "muted" || className?.includes("bg-");
+    return (_jsx(Card, { ref: ref, "data-comp": "metric-card", className: cn(getColorStyles(), className), ...props, children: _jsxs("div", { className: "p-6", children: [_jsxs("div", { className: "flex items-center justify-between mb-4", children: [_jsx("h6", { className: cn("text-xs font-semibold uppercase tracking-wide", isColorful ? "opacity-90" : "text-muted-foreground"), children: title }), icon && (_jsx("div", { className: isColorful ? "opacity-70" : "text-muted-foreground", "aria-hidden": "true", children: icon }))] }), _jsx("div", { className: "mb-3", children: _jsxs("div", { className: cn("text-4xl font-bold leading-none", isColorful ? "" : "text-card-foreground"), children: [_jsxs("span", { className: "sr-only", children: [title, ":", " ", typeof value === "number" ? value.toLocaleString() : value] }), typeof value === "number" ? value.toLocaleString() : value] }) }), (change !== undefined || subtitle) && (_jsx("div", { className: "text-sm", children: change !== undefined ? (_jsxs("div", { className: cn("flex items-center gap-1", isColorful ? "opacity-90" : getChangeColor(change)), children: [_jsxs("span", { className: "sr-only", children: ["Change: ", getChangeText(change)] }), _jsx("span", { className: "inline-block", "aria-hidden": "true", children: getChangeIcon(change) }), _jsx("span", { children: getChangeText(change) })] })) : subtitle ? (_jsx("div", { className: cn(isColorful ? "opacity-80" : "text-muted-foreground"), children: subtitle })) : null }))] }) }));
+}
+export { MetricCard };

package/dist/components/metric-card/metric-card.types.d.ts

@@ -0,0 +1,14 @@
+import type { MetricCardSkeletonConfig } from "@kala-ui/react/skeleton";
+import type * as React from "react";
+export interface MetricCardProps extends Omit<React.ComponentProps<"div">, "title"> {
+    title: string;
+    value: number | string;
+    icon?: React.ReactNode;
+    change?: number;
+    changeLabel?: string;
+    subtitle?: string;
+    color?: "primary" | "secondary" | "destructive" | "success" | "warning" | "info" | "muted";
+    isLoading?: boolean;
+    skeletonConfig?: MetricCardSkeletonConfig;
+    skeleton?: React.ReactNode;
+}

package/dist/components/metric-card/metric-card.types.js

@@ -0,0 +1,2 @@
+"use client";
+export {};

package/dist/components/nav-link/index.d.ts

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

package/dist/components/nav-link/index.js

@@ -0,0 +1,2 @@
+"use client";
+export * from "./nav-link.js";

package/dist/components/nav-link/nav-link.d.ts

@@ -0,0 +1,26 @@
+import type * as React from "react";
+export interface NavLinkProps extends Omit<React.ComponentProps<"button">, "onChange"> {
+    /** Link label */
+    label: React.ReactNode;
+    /** Link description */
+    description?: React.ReactNode;
+    /** Left icon */
+    icon?: React.ReactNode;
+    /** Right section (e.g. badge, icon) */
+    rightSection?: React.ReactNode;
+    /** Active state */
+    active?: boolean;
+    /** Collapsed/Expanded state for nested items */
+    defaultOpen?: boolean;
+    /** Controlled opened state */
+    open?: boolean;
+    /** Callback for opened state change */
+    onOpenChange?: (open: boolean) => void;
+    /** Nested links */
+    children?: React.ReactNode;
+    /** Disable right section rotation when opened */
+    disableRightSectionRotation?: boolean;
+    /** Indentation for nested items */
+    indent?: boolean;
+}
+export declare function NavLink({ ref, className, label, description, icon, rightSection, active, defaultOpen, open: openProp, onOpenChange, children, disableRightSectionRotation, indent, onClick, ...props }: NavLinkProps): React.JSX.Element;

package/dist/components/nav-link/nav-link.js

@@ -0,0 +1,23 @@
+"use client";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "@kala-ui/react/lib/utils";
+import { useUncontrolled } from "@kala-ui/react-hooks";
+import { ChevronRight } from "lucide-react";
+export function NavLink({ ref, className, label, description, icon, rightSection, active, defaultOpen = false, open: openProp, onOpenChange, children, disableRightSectionRotation = false, indent = false, onClick, ...props }) {
+    const [isOpened, handleOpenChange] = useUncontrolled({
+        value: openProp,
+        defaultValue: defaultOpen,
+        onChange: onOpenChange,
+    });
+    const handleToggle = (e) => {
+        if (children) {
+            e.preventDefault();
+            handleOpenChange(!isOpened);
+        }
+        onClick?.(e);
+    };
+    return (_jsxs(_Fragment, { children: [_jsxs("button", { ref: ref, className: cn("flex w-full items-center gap-3 rounded-md px-3 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50", active ? "bg-accent text-accent-foreground" : "text-muted-foreground", className), onClick: handleToggle, ...props, children: [icon && (_jsx("span", { className: "flex items-center justify-center", children: icon })), _jsxs("div", { className: "flex flex-1 flex-col items-start overflow-hidden", children: [_jsx("span", { className: "truncate", children: label }), description && (_jsx("span", { className: "truncate text-xs text-muted-foreground font-normal", children: description }))] }), (rightSection || children) && (_jsx("span", { className: cn("flex items-center justify-center text-muted-foreground transition-transform duration-200", children &&
+                            !disableRightSectionRotation &&
+                            isOpened &&
+                            "rotate-90"), children: rightSection || (children && _jsx(ChevronRight, { className: "h-4 w-4" })) }))] }), children && isOpened && (_jsx("div", { className: cn("flex flex-col gap-1", indent && "pl-4"), children: children }))] }));
+}

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

@@ -0,0 +1,4 @@
+export type { NavigationLink, NavigationProps } from "./navigation";
+export { Navigation } from "./navigation";
+export type { NavigationSkeletonConfig, NavigationSkeletonProps, } from "./navigation-skeleton";
+export { NavigationSkeleton } from "./navigation-skeleton";

package/dist/components/navigation/index.js

@@ -0,0 +1,3 @@
+"use client";
+export { Navigation } from "./navigation.js";
+export { NavigationSkeleton } from "./navigation-skeleton.js";

package/dist/components/navigation/navigation-skeleton.d.ts

@@ -0,0 +1,54 @@
+/**
+ * Navigation Skeleton Component
+ *
+ * Loading placeholder for the Navigation component.
+ * Supports horizontal and vertical layouts with configurable items.
+ */
+export interface NavigationSkeletonConfig {
+    /**
+     * Orientation of the navigation
+     * @default 'horizontal'
+     */
+    orientation?: "horizontal" | "vertical";
+    /**
+     * Number of navigation items
+     * @default 5
+     */
+    itemCount?: number;
+    /**
+     * Show icon skeletons
+     * @default false
+     */
+    showIcons?: boolean;
+    /**
+     * Show badge skeletons
+     * @default false
+     */
+    showBadges?: boolean;
+    /**
+     * Show nested navigation items
+     * @default false
+     */
+    nested?: boolean;
+}
+export interface NavigationSkeletonProps extends NavigationSkeletonConfig {
+    /**
+     * Additional className for the skeleton container
+     */
+    className?: string;
+    /**
+     * Test ID for querying the element
+     */
+    "data-testid"?: string;
+}
+/**
+ * Navigation skeleton component
+ *
+ * @example
+ * ```tsx
+ * <NavigationSkeleton orientation="horizontal" itemCount={5} />
+ *
+ * <NavigationSkeleton orientation="vertical" showIcons showBadges />
+ * ```
+ */
+export declare function NavigationSkeleton({ orientation, itemCount, showIcons, showBadges, nested, className, "data-testid": dataTestId, }: NavigationSkeletonProps): import("react").JSX.Element;

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

@@ -0,0 +1,23 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Navigation Skeleton Component
+ *
+ * Loading placeholder for the Navigation component.
+ * Supports horizontal and vertical layouts with configurable items.
+ */
+import { cn } from "@kala-ui/react/lib/utils";
+import { Skeleton } from "@kala-ui/react/skeleton";
+/**
+ * Navigation skeleton component
+ *
+ * @example
+ * ```tsx
+ * <NavigationSkeleton orientation="horizontal" itemCount={5} />
+ *
+ * <NavigationSkeleton orientation="vertical" showIcons showBadges />
+ * ```
+ */
+export function NavigationSkeleton({ orientation = "horizontal", itemCount = 5, showIcons = false, showBadges = false, nested = false, className, "data-testid": dataTestId, }) {
+    return (_jsxs("nav", { "data-testid": dataTestId || "navigation-skeleton", className: cn("flex", orientation === "vertical" ? "flex-col gap-2" : "flex-row gap-6", className), "aria-label": "Loading navigation", "aria-busy": "true", children: [Array.from({ length: itemCount }).map((_, i) => (_jsxs("div", { className: cn("flex items-center", orientation === "vertical" ? "gap-3 px-3 py-2" : "gap-2"), children: [showIcons && (_jsx(Skeleton, { className: cn("flex-shrink-0", orientation === "vertical" ? "h-5 w-5" : "h-4 w-4") })), _jsx(Skeleton, { className: cn("h-4", orientation === "vertical" ? "w-24 flex-1" : "w-20") }), showBadges && (_jsx(Skeleton, { className: "h-4 w-4 rounded-full ml-auto flex-shrink-0" }))] }, `nav-${i}`))), nested && orientation === "vertical" && (_jsx("div", { className: "ml-8 space-y-2", children: Array.from({ length: 2 }).map((_, i) => (_jsxs("div", { className: "flex items-center gap-3 px-3 py-2", children: [showIcons && _jsx(Skeleton, { className: "h-4 w-4 flex-shrink-0" }), _jsx(Skeleton, { className: "h-4 w-20" })] }, `nested-${i}`))) }))] }));
+}

package/dist/components/navigation/navigation.d.ts

@@ -0,0 +1,26 @@
+import * as React from "react";
+export interface NavigationLink {
+    label: string;
+    href: string;
+}
+export interface NavigationProps extends React.HTMLAttributes<HTMLElement>, React.RefAttributes<HTMLElement> {
+    /**
+     * Array of navigation links
+     */
+    links: NavigationLink[];
+    /**
+     * Orientation of the navigation
+     * @default 'horizontal'
+     */
+    orientation?: "horizontal" | "vertical";
+    /**
+     * Mobile layout style
+     * @default 'dropdown'
+     */
+    mobileLayout?: "dropdown" | "vertical";
+    /**
+     * Current pathname for active link detection
+     */
+    pathname?: string;
+}
+export declare function Navigation({ ref, className, links, orientation, mobileLayout, pathname, ...props }: NavigationProps): React.JSX.Element;