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

package/dist/components/footer/footer.d.ts

@@ -1,37 +1,2 @@
-import type * as React from "react";
-export interface FooterLink {
-    label: string;
-    href: string;
-}
-export interface FooterLinkSection {
-    title: string;
-    links: FooterLink[];
-}
-export interface SocialLink {
-    name: string;
-    href: string;
-    icon: React.ReactNode;
-}
-export interface FooterProps extends React.HTMLAttributes<HTMLElement>, React.RefAttributes<HTMLElement> {
-    /**
-     * Sections of links to display in columns
-     */
-    linkSections?: FooterLinkSection[];
-    /**
-     * Social media links with icons
-     */
-    socialLinks?: SocialLink[];
-    /**
-     * Copyright text
-     */
-    copyright?: string;
-    /**
-     * Additional content to display in footer (e.g., newsletter signup)
-     */
-    children?: React.ReactNode;
-    /**
-     * Center align all content
-     */
-    centered?: boolean;
-}
-export declare function Footer({ ref, className, linkSections, socialLinks, copyright, children, centered, ...props }: FooterProps): React.JSX.Element;
+import type { FooterProps } from "./footer.types";
+export declare function Footer({ ref, className, style, slotStyles: slotStylesRaw, linkSections, socialLinks, copyright, children, centered, ...props }: FooterProps): import("react").JSX.Element;

package/dist/components/footer/footer.js

@@ -1,8 +1,24 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useSlotStyles } from "@kala-ui/react/kala-provider";
+import { applySlot } from "@kala-ui/react/lib/slot-styles";
 import { cn } from "@kala-ui/react/lib/utils";
-export function Footer({ ref, className, linkSections = [], socialLinks = [], copyright, children, centered = false, ...props }) {
+import { footerStyles } from "../../config/footer.js";
+export function Footer({ ref, className, style, slotStyles: slotStylesRaw, linkSections = [], socialLinks = [], copyright, children, centered = false, ...props }) {
+    const slotStyles = useSlotStyles("footer", slotStylesRaw);
     const currentYear = new Date().getFullYear();
     const copyrightText = copyright || `© ${currentYear} All rights reserved.`;
-    return (_jsx("footer", { ref: ref, "data-comp": "footer", className: cn("w-full bg-muted text-muted-foreground border-t", className), ...props, children: _jsxs("div", { className: "container mx-auto px-4 py-8 md:py-12", children: [centered && children && (_jsx("div", { className: "mb-12 flex flex-col items-center text-center", children: children })), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-8", children: [linkSections.map((section) => (_jsxs("nav", { "aria-label": `${section.title} links`, children: [_jsx("h3", { className: "text-foreground font-semibold text-sm uppercase tracking-wider mb-4", children: section.title }), _jsx("ul", { className: "space-y-2", children: section.links.map((link) => (_jsx("li", { children: _jsx("a", { href: link.href, className: "text-muted-foreground hover:text-primary transition-colors text-sm", children: link.label }) }, `${link.href}-${link.label}`))) })] }, section.title))), !centered && children && (_jsx("div", { className: "md:col-span-2 lg:col-span-1", children: children }))] }), _jsxs("div", { className: cn("border-t pt-8 flex flex-col gap-4", !centered && "md:flex-row md:justify-between md:items-center", centered && "items-center"), children: [_jsx("div", { className: "text-sm text-muted-foreground order-2 md:order-1", children: copyrightText }), socialLinks.length > 0 && (_jsx("div", { className: "flex items-center gap-4 order-1 md:order-2", children: socialLinks.map((social) => (_jsx("a", { href: social.href, target: "_blank", rel: "noopener noreferrer", className: "text-muted-foreground hover:text-primary transition-colors", "aria-label": social.name, children: social.icon }, social.href))) }))] })] }) }));
+    const root = applySlot(cn(footerStyles.root, className), slotStyles?.root);
+    const inner = applySlot(footerStyles.inner, slotStyles?.inner);
+    const centeredContent = applySlot(footerStyles.centeredContent, slotStyles?.centeredContent);
+    const grid = applySlot(footerStyles.grid, slotStyles?.grid);
+    const sectionTitle = applySlot(footerStyles.sectionTitle, slotStyles?.sectionTitle);
+    const sectionList = applySlot(footerStyles.sectionList, slotStyles?.sectionList);
+    const sectionLink = applySlot(footerStyles.sectionLink, slotStyles?.sectionLink);
+    const customContent = applySlot(footerStyles.customContent, slotStyles?.customContent);
+    const bottomRow = applySlot(footerStyles.bottomRow, slotStyles?.bottomRow);
+    const copyrightPart = applySlot(footerStyles.copyright, slotStyles?.copyright);
+    const socialList = applySlot(footerStyles.socialList, slotStyles?.socialList);
+    const socialLink = applySlot(footerStyles.socialLink, slotStyles?.socialLink);
+    return (_jsx("footer", { "data-kala-component": "footer", ref: ref, className: root.className, style: root.style, ...props, children: _jsxs("div", { className: inner.className, children: [centered && children && (_jsx("div", { className: centeredContent.className, children: children })), _jsxs("div", { className: grid.className, children: [linkSections.map((section) => (_jsxs("nav", { "aria-label": `${section.title} links`, children: [_jsx("h3", { className: sectionTitle.className, children: section.title }), _jsx("ul", { className: sectionList.className, children: section.links.map((link) => (_jsx("li", { children: _jsx("a", { href: link.href, className: sectionLink.className, children: link.label }) }, `${link.href}-${link.label}`))) })] }, section.title))), !centered && children && (_jsx("div", { className: customContent.className, children: children }))] }), _jsxs("div", { className: cn(bottomRow.className, !centered && footerStyles.bottomRowSide, centered && footerStyles.bottomRowCentered), children: [_jsx("div", { className: copyrightPart.className, children: copyrightText }), socialLinks.length > 0 && (_jsx("div", { className: socialList.className, children: socialLinks.map((social) => (_jsx("a", { href: social.href, target: "_blank", rel: "noopener noreferrer", className: socialLink.className, "aria-label": social.name, children: social.icon }, social.href))) }))] })] }) }));
 }

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

@@ -0,0 +1,25 @@
+import type { SlotStyles } from "@kala-ui/react/lib/slot-styles";
+import type * as React from "react";
+export interface FooterLink {
+    label: string;
+    href: string;
+}
+export interface FooterLinkSection {
+    title: string;
+    links: FooterLink[];
+}
+export interface SocialLink {
+    name: string;
+    href: string;
+    icon: React.ReactNode;
+}
+export interface FooterProps extends React.HTMLAttributes<HTMLElement>, React.RefAttributes<HTMLElement> {
+    linkSections?: FooterLinkSection[];
+    socialLinks?: SocialLink[];
+    copyright?: string;
+    children?: React.ReactNode;
+    centered?: boolean;
+    /** Per-part overrides: root, inner, centeredContent, grid, sectionTitle,
+     * sectionList, sectionLink, customContent, bottomRow, copyright, socialList, socialLink. */
+    slotStyles?: SlotStyles;
+}

package/dist/components/footer/footer.types.js

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

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

@@ -1,2 +1,2 @@
-export type { FooterLink, FooterLinkSection, FooterProps, SocialLink, } from "./footer";
 export { Footer } from "./footer";
+export type { FooterLink, FooterLinkSection, FooterProps, SocialLink, } from "./footer.types";

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

@@ -19,5 +19,5 @@ import { Skeleton } from "@kala-ui/react/skeleton";
  * ```
  */
 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" })] })] }));
+    return (_jsxs("header", { "data-kala-component": "header-skeleton", "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.js

@@ -9,7 +9,7 @@ import { NavigationMenu, NavigationMenuContent, NavigationMenuItem, NavigationMe
 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 { useFocusTrap, useMounted, useScrollLock, useWindowEvent, } from "@kala-ui/react-hooks";
 import { Bell, ChevronDown, Menu, Settings, X } from "lucide-react";
 import * as React from "react";
 import { createPortal } from "react-dom";
@@ -22,16 +22,10 @@ export function Header({ ref, className, logo, navLinks = [], userMenu, userProf
     }, [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]);
+    useWindowEvent("keydown", (event) => {
+        if (event.key === "Escape" && isMobileMenuOpen)
+            onMobileMenuToggle?.();
+    });
     const mounted = useMounted();
     // Track expanded mobile menu items
     const [expandedItems, setExpandedItems] = React.useState(new Set());
@@ -47,7 +41,7 @@ export function Header({ ref, className, logo, navLinks = [], userMenu, userProf
             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
+    return (_jsxs(Box, { "data-kala-component": "header", as: "header", ref: ref, 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 &&

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

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

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

@@ -10,6 +10,7 @@ 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";
+import { metricCardSkeletonStyles } from "../../config/metric-card.js";
 /**
  * Metric Card skeleton component with multiple variants
  *
@@ -21,7 +22,7 @@ import * as React from "react";
  * ```
  */
 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" }) }))] }) }));
+    return (_jsx(Card, { "data-kala-component": "metric-card-skeleton", ref: React.createRef(), "data-testid": dataTestId || "metric-card-skeleton", className: cn(className), children: _jsxs("div", { className: metricCardSkeletonStyles.body, children: [_jsxs("div", { className: metricCardSkeletonStyles.head, children: [_jsx(Skeleton, { className: metricCardSkeletonStyles.title }), variant === "withIcon" || showIcon ? (_jsx(SkeletonCircle, { size: "1.5rem", className: metricCardSkeletonStyles.icon })) : null] }), _jsx("div", { className: metricCardSkeletonStyles.valueBlock, children: _jsx(Skeleton, { className: metricCardSkeletonStyles.value }) }), (variant === "default" || showChange) && (_jsx("div", { className: metricCardSkeletonStyles.meta, children: _jsx(Skeleton, { className: metricCardSkeletonStyles.metaLine }) }))] }) }));
 }
 /**
  * Compound component: MetricCard.Skeleton

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

@@ -1,16 +1,4 @@
-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;
+import type { MetricCardProps } from "./metric-card.types";
+declare function MetricCard({ ref, title, value, icon, change, changeLabel, subtitle, className, style, slotStyles: slotStylesRaw, color, isLoading, skeletonConfig, skeleton, ...props }: MetricCardProps): React.JSX.Element;
 export { MetricCard };

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

@@ -1,22 +1,25 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Card } from "@kala-ui/react/card";
+import { useSlotStyles } from "@kala-ui/react/kala-provider";
+import { applySlot } from "@kala-ui/react/lib/slot-styles";
 import { cn } from "@kala-ui/react/lib/utils";
+import { metricCardChangeColors, metricCardColorStyles, metricCardStyles, } from "../../config/metric-card.js";
 import { MetricCardSkeleton } from "./metric-card-skeleton.js";
-function MetricCard({ ref, title, value, icon, change, changeLabel, subtitle, className, color = "muted", isLoading = false, skeletonConfig, skeleton, ...props }) {
+function MetricCard({ ref, title, value, icon, change, changeLabel, subtitle, className, style, slotStyles: slotStylesRaw, color = "muted", isLoading = false, skeletonConfig, skeleton, ...props }) {
+    const slotStyles = useSlotStyles("metric-card", slotStylesRaw);
     if (isLoading) {
         if (skeleton) {
-            return (_jsx(Card, { ref: ref, "data-comp": "metric-card", className: cn(className), ...props, children: skeleton }));
+            const loadingRoot = applySlot(cn(className), slotStyles?.root);
+            return (_jsx(Card, { "data-kala-component": "metric-card", ref: ref, className: loadingRoot.className, style: loadingRoot.style, ...props, children: skeleton }));
         }
-        return _jsx(MetricCardSkeleton, { className: className, ...skeletonConfig });
+        return (_jsx(MetricCardSkeleton, { "data-kala-component": "metric-card", className: className, ...skeletonConfig }));
     }
-    const getChangeColor = (changeValue) => {
-        if (changeValue > 0)
-            return "text-success";
-        if (changeValue < 0)
-            return "text-destructive";
-        return "text-muted-foreground";
-    };
+    const getChangeColor = (changeValue) => changeValue > 0
+        ? metricCardChangeColors.up
+        : changeValue < 0
+            ? metricCardChangeColors.down
+            : metricCardChangeColors.flat;
     const getChangeIcon = (changeValue) => {
         if (changeValue > 0)
             return "↑";
@@ -31,25 +34,26 @@ function MetricCard({ ref, title, value, icon, change, changeLabel, subtitle, cl
             : "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 }))] }) }));
+    const root = applySlot(cn(metricCardColorStyles[color], className), slotStyles?.root);
+    const body = applySlot(metricCardStyles.body, slotStyles?.body);
+    const head = applySlot(metricCardStyles.head, slotStyles?.head);
+    const titleLabel = applySlot(metricCardStyles.title, slotStyles?.title);
+    const iconSlot = applySlot(metricCardStyles.icon, slotStyles?.icon);
+    const valueSlot = applySlot(metricCardStyles.value, slotStyles?.value);
+    const meta = applySlot(metricCardStyles.meta, slotStyles?.meta);
+    const changeSlot = applySlot(metricCardStyles.change, slotStyles?.change);
+    const subtitleSlot = applySlot(metricCardStyles.subtitle, slotStyles?.subtitle);
+    return (_jsx(Card, { "data-kala-component": "metric-card", ref: ref, className: root.className, style: root.style, ...props, children: _jsxs("div", { className: body.className, children: [_jsxs("div", { className: head.className, children: [_jsx("h6", { className: cn(titleLabel.className, isColorful
+                                ? metricCardStyles.titleOnColor
+                                : metricCardStyles.titleMuted), children: title }), icon && (_jsx("div", { className: cn(iconSlot.className, isColorful
+                                ? metricCardStyles.iconOnColor
+                                : metricCardStyles.iconMuted), "aria-hidden": "true", children: icon }))] }), _jsx("div", { className: metricCardStyles.valueBlock, children: _jsxs("div", { className: cn(valueSlot.className, isColorful
+                            ? metricCardStyles.valueOnColor
+                            : metricCardStyles.valueMuted), 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: meta.className, children: change !== undefined ? (_jsxs("div", { className: cn(changeSlot.className, isColorful
+                            ? metricCardStyles.changeOnColor
+                            : 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(subtitleSlot.className, isColorful
+                            ? metricCardStyles.subtitleOnColor
+                            : metricCardStyles.subtitleMuted), children: subtitle })) : null }))] }) }));
 }
 export { MetricCard };

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

@@ -1,3 +1,4 @@
+import type { SlotStyles } from "@kala-ui/react/lib/slot-styles";
 import type { MetricCardSkeletonConfig } from "@kala-ui/react/skeleton";
 import type * as React from "react";
 export interface MetricCardProps extends Omit<React.ComponentProps<"div">, "title"> {
@@ -11,4 +12,6 @@ export interface MetricCardProps extends Omit<React.ComponentProps<"div">, "titl
     isLoading?: boolean;
     skeletonConfig?: MetricCardSkeletonConfig;
     skeleton?: React.ReactNode;
+    /** Per-part overrides: root, body, head, title, icon, value, meta, change, subtitle. */
+    slotStyles?: SlotStyles;
 }

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

@@ -1 +1,2 @@
-export * from "./nav-link";
+export { NavLink } from "./nav-link";
+export type { NavLinkProps } from "./nav-link.types";

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

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

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

@@ -1,26 +1,3 @@
 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;
+import type { NavLinkProps } from "./nav-link.types";
+export declare function NavLink({ className, label, description, icon, rightSection, active, href, defaultOpen, open: openProp, onOpenChange, children, disableRightSectionRotation, indent, onClick, type, disabled, ...props }: NavLinkProps): React.JSX.Element;

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

@@ -3,12 +3,53 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 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 }) {
+/** True for plain left-clicks only — modifier and non-left clicks stay native
+ *  so open-in-new-tab and download-as-link keep working. */
+function isPlainLeftClick(e) {
+    return e.button === 0 && !e.metaKey && !e.ctrlKey && !e.shiftKey && !e.altKey;
+}
+/** Props shared by both arms with element-specific handlers widened to a
+ *  common HTMLElement base, so the same rest-object spreads onto <button>
+ *  and <a> without fighting their event-target variance. */
+const widenHandlers = (props) => {
+    const out = {};
+    for (const [key, value] of Object.entries(props)) {
+        out[key] =
+            typeof value === "function" && (key.startsWith("on") || key === "ref")
+                ? value
+                : value;
+    }
+    return out;
+};
+/** Label/description/icon/right-section row shared by the anchor and
+ *  button arms. */
+function NavLinkContent({ label, description, icon, rightSection, children, disableRightSectionRotation, isOpened, }) {
+    return (_jsxs(_Fragment, { 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" })) }))] }));
+}
+/** Base classes for both arms; the active variant swaps fg/bg. */
+function navLinkBaseClassName(active, className) {
+    return 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);
+}
+export function NavLink({ className, label, description, icon, rightSection, active, href, defaultOpen = false, open: openProp, onOpenChange, children, disableRightSectionRotation = false, indent = false, onClick, type, disabled, ...props }) {
     const [isOpened, handleOpenChange] = useUncontrolled({
         value: openProp,
         defaultValue: defaultOpen,
         onChange: onOpenChange,
     });
+    const content = (_jsx(NavLinkContent, { label: label, description: description, icon: icon, rightSection: rightSection, children: children, disableRightSectionRotation: disableRightSectionRotation, isOpened: isOpened }));
+    const baseClassName = navLinkBaseClassName(active, className);
+    if (href) {
+        // Anchor mode: button-only props (type/disabled) are invalid on <a> —
+        // disabled degrades to aria-disabled + pointer-events styling. Plain
+        // left-clicks are the SPA router's to handle; every other click
+        // (modifiers, middle) stays native so open-in-new-tab keeps working.
+        const handleAnchorClick = (e) => {
+            if (isPlainLeftClick(e))
+                e.preventDefault();
+            onClick?.(e);
+        };
+        return (_jsx("a", { "data-kala-component": "nav-link", href: href, "aria-current": active ? "page" : undefined, "aria-disabled": disabled || undefined, className: cn(baseClassName, disabled && "pointer-events-none opacity-50"), onClick: handleAnchorClick, ...widenHandlers(props), children: content }));
+    }
     const handleToggle = (e) => {
         if (children) {
             e.preventDefault();
@@ -16,8 +57,5 @@ export function NavLink({ ref, className, label, description, icon, rightSection
         }
         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 }))] }));
+    return (_jsxs(_Fragment, { children: [_jsx("button", { "data-kala-component": "nav-link", type: type ?? "button", disabled: disabled, className: baseClassName, onClick: handleToggle, ...widenHandlers(props), children: content }), children && isOpened && (_jsx("div", { className: cn("flex flex-col gap-1", indent && "pl-4"), children: children }))] }));
 }

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

@@ -0,0 +1,23 @@
+import type * as React from "react";
+export interface NavLinkProps extends Omit<React.ComponentProps<"button">, "onChange" | "ref"> {
+    label: React.ReactNode;
+    description?: React.ReactNode;
+    icon?: React.ReactNode;
+    rightSection?: React.ReactNode;
+    active?: boolean;
+    /**
+     * Renders the NavLink as a real anchor (<a href>) instead of a button.
+     * Use for top-level navigation targets: the href keeps middle-click,
+     * clone-tab and keyboard semantics native. A plain left-click is
+     * preventDefaulted so SPA routers can route client-side; modifier clicks
+     * are left to the browser. Nested-collapse behavior (children chevron
+     * toggle) only applies in button mode.
+     */
+    href?: string;
+    defaultOpen?: boolean;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    children?: React.ReactNode;
+    disableRightSectionRotation?: boolean;
+    indent?: boolean;
+}

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

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

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

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

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

@@ -19,5 +19,5 @@ import { Skeleton } from "@kala-ui/react/skeleton";
  * ```
  */
 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}`))) }))] }));
+    return (_jsxs("nav", { "data-kala-component": "navigation-skeleton", "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

@@ -1,26 +1,3 @@
 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;
-}
+import type { NavigationProps } from "./navigation.types";
 export declare function Navigation({ ref, className, links, orientation, mobileLayout, pathname, ...props }: NavigationProps): React.JSX.Element;

package/dist/components/navigation/navigation.js

@@ -1,5 +1,6 @@
 "use client";
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useClickOutside } from "@kala-ui/react-hooks";
 import { cn } from "@kala-ui/react/lib/utils";
 import { ChevronDown } from "lucide-react";
 import * as React from "react";
@@ -7,22 +8,14 @@ import { isActivePath } from "../../lib/active-path.js";
 export function Navigation({ ref, className, links, orientation = "horizontal", mobileLayout = "dropdown", pathname = "", ...props }) {
     const [isMobileOpen, setIsMobileOpen] = React.useState(false);
     const isActive = (href) => isActivePath(pathname, href);
-    // Close mobile menu when clicking outside
-    React.useEffect(() => {
-        if (!isMobileOpen)
-            return;
-        const handleClickOutside = (event) => {
-            const target = event.target;
-            if (!target.closest("[data-mobile-nav]")) {
-                setIsMobileOpen(false);
-            }
-        };
-        document.addEventListener("click", handleClickOutside);
-        return () => document.removeEventListener("click", handleClickOutside);
-    }, [isMobileOpen]);
+    // Close mobile menu when clicking outside the wrapper (toggle + dropdown);
+    // React bails out on the redundant setState while already closed.
+    const mobileNavRef = useClickOutside(() => {
+        setIsMobileOpen(false);
+    });
     // Vertical desktop navigation (explicit opt-in via orientation)
     if (orientation === "vertical") {
-        return (_jsx("nav", { "data-comp": "navigation", className: cn(orientation === "vertical"
+        return (_jsx("nav", { "data-kala-component": "navigation", className: cn(orientation === "vertical"
                 ? "hidden md:flex md:flex-col gap-2"
                 : "flex md:hidden flex-col gap-2", className), "aria-label": "Navigation", ...props, ref: ref, children: links.map((link) => (_jsx("a", { href: link.href, className: cn("text-sm font-medium px-3 py-2 rounded-md transition-colors outline-none focus-visible:ring-2 focus-visible:ring-ring", isActive(link.href)
                     ? "bg-accent text-accent-foreground"
@@ -30,15 +23,12 @@ export function Navigation({ ref, className, links, orientation = "horizontal",
     }
     // Horizontal on desktop + stacked vertical list on mobile
     if (mobileLayout === "vertical") {
-        return (_jsxs(_Fragment, { children: [_jsx("nav", { "data-comp": "navigation", className: cn("hidden md:flex flex-row items-center gap-6", className), "aria-label": "Main navigation", ...props, ref: ref, children: links.map((link) => (_jsx("a", { href: link.href, className: cn("text-sm font-medium transition-colors hover:text-primary outline-none focus-visible:underline", isActive(link.href) ? "text-primary" : "text-foreground"), "aria-current": isActive(link.href) ? "page" : undefined, children: link.label }, link.href))) }), _jsx("nav", { "data-comp": "navigation", className: cn("flex md:hidden flex-col gap-2", className), "aria-label": "Mobile navigation", children: links.map((link) => (_jsx("a", { href: link.href, className: cn("text-sm font-medium px-3 py-2 rounded-md transition-colors outline-none focus-visible:ring-2 focus-visible:ring-ring", isActive(link.href)
+        return (_jsxs(_Fragment, { children: [_jsx("nav", { "data-kala-component": "navigation", className: cn("hidden md:flex flex-row items-center gap-6", className), "aria-label": "Main navigation", ...props, ref: ref, children: links.map((link) => (_jsx("a", { href: link.href, className: cn("text-sm font-medium transition-colors hover:text-primary outline-none focus-visible:underline", isActive(link.href) ? "text-primary" : "text-foreground"), "aria-current": isActive(link.href) ? "page" : undefined, children: link.label }, link.href))) }), _jsx("nav", { "data-kala-component": "navigation", className: cn("flex md:hidden flex-col gap-2", className), "aria-label": "Mobile navigation", children: links.map((link) => (_jsx("a", { href: link.href, className: cn("text-sm font-medium px-3 py-2 rounded-md transition-colors outline-none focus-visible:ring-2 focus-visible:ring-ring", isActive(link.href)
                             ? "bg-accent text-accent-foreground"
                             : "text-foreground hover:bg-accent hover:text-accent-foreground"), "aria-current": isActive(link.href) ? "page" : undefined, children: link.label }, link.href))) })] }));
     }
     // Horizontal desktop + dropdown mobile
-    return (_jsxs(_Fragment, { children: [_jsx("nav", { "data-comp": "navigation", className: cn("hidden md:flex flex-row items-center gap-6", className), "aria-label": "Main navigation", ...props, ref: ref, children: links.map((link) => (_jsx("a", { href: link.href, className: cn("text-sm font-medium transition-colors hover:text-primary outline-none focus-visible:underline", isActive(link.href) ? "text-primary" : "text-foreground"), "aria-current": isActive(link.href) ? "page" : undefined, children: link.label }, link.href))) }), _jsxs("div", { className: "md:hidden", "data-mobile-nav": true, children: [_jsxs("button", { type: "button", onClick: (e) => {
-                            e.stopPropagation();
-                            setIsMobileOpen(!isMobileOpen);
-                        }, className: "flex items-center gap-2 text-sm font-medium text-foreground hover:text-primary transition-colors outline-none focus-visible:ring-2 focus-visible:ring-ring rounded-md px-2 py-1", "aria-label": "Toggle mobile navigation", "aria-expanded": isMobileOpen, children: ["Menu", _jsx(ChevronDown, { className: cn("size-4 transition-transform", isMobileOpen && "rotate-180") })] }), isMobileOpen && (_jsx("nav", { "data-comp": "navigation", className: "mt-2 flex flex-col gap-2 bg-popover border rounded-md p-3 text-popover-foreground kala-surface-popover", "aria-label": "Mobile navigation", onClick: (e) => e.stopPropagation(), children: links.map((link) => (_jsx("a", { href: link.href, onClick: () => setIsMobileOpen(false), className: cn("text-sm font-medium px-3 py-2 rounded-md transition-colors outline-none focus-visible:ring-2 focus-visible:ring-ring", isActive(link.href)
+    return (_jsxs(_Fragment, { children: [_jsx("nav", { "data-kala-component": "navigation", className: cn("hidden md:flex flex-row items-center gap-6", className), "aria-label": "Main navigation", ...props, ref: ref, children: links.map((link) => (_jsx("a", { href: link.href, className: cn("text-sm font-medium transition-colors hover:text-primary outline-none focus-visible:underline", isActive(link.href) ? "text-primary" : "text-foreground"), "aria-current": isActive(link.href) ? "page" : undefined, children: link.label }, link.href))) }), _jsxs("div", { "data-kala-component": "navigation", className: "md:hidden", ref: mobileNavRef, children: [_jsxs("button", { type: "button", onClick: () => setIsMobileOpen(!isMobileOpen), className: "flex items-center gap-2 text-sm font-medium text-foreground hover:text-primary transition-colors outline-none focus-visible:ring-2 focus-visible:ring-ring rounded-md px-2 py-1", "aria-label": "Toggle mobile navigation", "aria-expanded": isMobileOpen, children: ["Menu", _jsx(ChevronDown, { className: cn("size-4 transition-transform", isMobileOpen && "rotate-180") })] }), isMobileOpen && (_jsx("nav", { className: "mt-2 flex flex-col gap-2 bg-popover border rounded-md p-3 text-popover-foreground kala-surface-popover", "aria-label": "Mobile navigation", children: links.map((link) => (_jsx("a", { href: link.href, onClick: () => setIsMobileOpen(false), className: cn("text-sm font-medium px-3 py-2 rounded-md transition-colors outline-none focus-visible:ring-2 focus-visible:ring-ring", isActive(link.href)
                                 ? "bg-accent text-accent-foreground"
                                 : "text-foreground hover:bg-accent hover:text-accent-foreground"), "aria-current": isActive(link.href) ? "page" : undefined, children: link.label }, link.href))) }))] })] }));
 }

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

@@ -0,0 +1,15 @@
+import type * 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;
+}

package/dist/components/navigation/navigation.types.js

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

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

@@ -1,2 +1,3 @@
-export { SessionCard, type SessionCardProps, type SessionData, } from "./session-card";
+export { SessionCard } from "./session-card";
+export type { SessionCardProps, SessionData, } from "./session-card.types";
 export { SessionCardSkeleton } from "./session-card-skeleton";

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

@@ -1,3 +1,3 @@
 "use client";
-export { SessionCard, } from "./session-card.js";
+export { SessionCard } from "./session-card.js";
 export { SessionCardSkeleton } from "./session-card-skeleton.js";