@kala-ui/react-app 0.1.0-beta.3 → 0.1.0-beta.5

package/dist/components/dnd/dnd.js

@@ -10,6 +10,8 @@ import { restrictToFirstScrollableAncestor, restrictToHorizontalAxis, restrictTo
 import { horizontalListSortingStrategy, rectSortingStrategy, rectSwappingStrategy, SortableContext as SortableContextKit, sortableKeyboardCoordinates, useSortable, verticalListSortingStrategy, } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
 import { cn } from "@kala-ui/react/lib/utils";
+import { useSlotStyles } from "@kala-ui/react/kala-provider";
+import { applySlot } from "@kala-ui/react/lib/slot-styles";
 import { useMergedRef } from "@kala-ui/react-hooks";
 import * as React from "react";
 // ============================================================================
@@ -40,6 +42,9 @@ export const sortingStrategies = {
     rect: rectSortingStrategy,
     rectSwapping: rectSwappingStrategy,
 };
+// ============================================================================
+// Sensors Hook
+// ============================================================================
 function createDragDropSensors(options = {}) {
     const { activationConstraint, keyboardCoordinateGetter = sortableKeyboardCoordinates, } = options;
     const sensors = useSensors(useSensor(PointerSensor, {
@@ -51,11 +56,17 @@ function createDragDropSensors(options = {}) {
     }));
     return sensors;
 }
+// ============================================================================
+// DndContext
+// ============================================================================
 function DragDropContext({ children, sensors: sensorsProp, useSensors: useSensorsOptions, ...props }) {
     const defaultSensors = createDragDropSensors(useSensorsOptions);
     const sensors = sensorsProp ?? defaultSensors;
     return (_jsx(DndKitContext, { "data-kala-component": "dnd-drag-drop-context", sensors: sensors, ...props, children: children }));
 }
+// ============================================================================
+// Droppable
+// ============================================================================
 function Droppable({ ref, children, className, id, disabled = false, ...props }) {
     const { isOver, setNodeRef } = useDroppable({
         id,
@@ -66,6 +77,9 @@ function Droppable({ ref, children, className, id, disabled = false, ...props })
         : children;
     return (_jsx("div", { "data-kala-component": "dnd-droppable", ref: useMergedRef(ref, setNodeRef), className: cn(className), ...props, children: content }));
 }
+// ============================================================================
+// Draggable
+// ============================================================================
 function Draggable({ ref, children, className, id, disabled = false, ...props }) {
     const { attributes, listeners, setNodeRef, transform, isDragging } = useDraggable({
         id,
@@ -81,12 +95,17 @@ function Draggable({ ref, children, className, id, disabled = false, ...props })
         : undefined;
     return (_jsx("div", { "data-kala-component": "dnd-draggable", ref: useMergedRef(ref, setNodeRef), style: style, className: cn(className), ...attributes, ...listeners, ...props, children: content }));
 }
+// ============================================================================
+// Sortable Context
+// ============================================================================
 function SortableContext({ children, items, strategy = verticalListSortingStrategy, }) {
     const itemIds = React.useMemo(() => items.map((item) => typeof item === "object" && "id" in item ? item.id : item), [items]);
     return (_jsx(SortableContextKit, { "data-kala-component": "dnd-sortable-context", items: itemIds, strategy: strategy, children: children }));
 }
 const SortableHandleContext = React.createContext(null);
-function SortableItem({ ref, children, className, id, disabled = false, handle = false, ...props }) {
+function SortableItem({ ref, children, className, id, disabled = false, handle = false, slotStyles: slotStylesRaw, ...props }) {
+    const slotStyles = useSlotStyles("dnd", slotStylesRaw);
+    const itemRoot = applySlot(cn(className), slotStyles?.root);
     const { attributes, listeners, setNodeRef, setActivatorNodeRef, transform, transition, isDragging, isSorting, isOver, } = useSortable({
         id,
         disabled,
@@ -108,8 +127,11 @@ function SortableItem({ ref, children, className, id, disabled = false, handle =
         transition,
         zIndex: isDragging ? 9999 : undefined,
     };
-    return (_jsx(SortableHandleContext.Provider, { "data-kala-component": "dnd-sortable-item", value: { attributes, listeners, setActivatorNodeRef }, children: _jsx("div", { ref: useMergedRef(ref, setNodeRef), style: style, className: cn(className), ...attributes, ...(handle ? {} : listeners), ...props, children: content }) }));
+    return (_jsx(SortableHandleContext.Provider, { value: { attributes, listeners, setActivatorNodeRef }, children: _jsx("div", { "data-kala-component": "dnd-sortable-item", ref: useMergedRef(ref, setNodeRef), style: style, className: itemRoot.className, ...attributes, ...(handle ? {} : listeners), ...props, children: content }) }));
 }
+// ============================================================================
+// Sortable Handle
+// ============================================================================
 function SortableHandle({ ref, children, className, ...props }) {
     const sortable = React.useContext(SortableHandleContext);
     if (!sortable && process.env.NODE_ENV !== "production") {
@@ -118,9 +140,15 @@ function SortableHandle({ ref, children, className, ...props }) {
     const content = typeof children === "function" ? children(sortable?.listeners) : children;
     return (_jsx("div", { "data-kala-component": "dnd-sortable-handle", ref: useMergedRef(ref, sortable?.setActivatorNodeRef), className: cn("cursor-grab active:cursor-grabbing", className), ...(sortable?.attributes ?? {}), ...(sortable?.listeners ?? {}), ...props, children: content }));
 }
+// ============================================================================
+// Drag Overlay Component
+// ============================================================================
 function DragOverlayComponent({ children, className, dropAnimation, ...props }) {
     return (_jsx(DragOverlay, { "data-kala-component": "dnd-drag-overlay-component", dropAnimation: dropAnimation, ...props, children: children ? _jsx("div", { className: cn(className), children: children }) : null }));
 }
+// ============================================================================
+// Exports
+// ============================================================================
 export { createDragDropSensors as useDragDropSensors, DragDropContext, Draggable, DragOverlayComponent, Droppable, 
 // Re-export sensors
 KeyboardSensor, PointerSensor, SortableContext, SortableHandle, SortableItem, sortableKeyboardCoordinates, TouchSensor, 

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

@@ -0,0 +1,92 @@
+/**
+ * DnD family types — the Kala-named surface over @dnd-kit plus the wrapper
+ * component prop shapes. Kept free of runtime code so it doubles as the
+ * @dnd-kit type re-export point for the family barrel.
+ */
+import type { Active, Collision, CollisionDetection, DndContextProps as DndKitContextProps, DragEndEvent, DraggableAttributes, DraggableSyntheticListeners, DragOverEvent, DragStartEvent, Modifier, Over, PointerActivationConstraint, UniqueIdentifier, useSensors } from "@dnd-kit/core";
+import type { sortableKeyboardCoordinates, SortingStrategy } from "@dnd-kit/sortable";
+import type { Transform } from "@dnd-kit/utilities";
+import type { SlotStyles } from "@kala-ui/react/lib/slot-styles";
+import type * as React from "react";
+export type SyntheticListenerMap = DraggableSyntheticListeners;
+export type DragDropModifier = Modifier;
+export type DragDropCollisionDetection = CollisionDetection;
+export type DragDropSortingStrategy = SortingStrategy;
+export type DragDropPointerConstraint = PointerActivationConstraint;
+export interface UseDragDropSensorsOptions {
+    activationConstraint?: PointerActivationConstraint;
+    keyboardCoordinateGetter?: typeof sortableKeyboardCoordinates;
+}
+export interface DragDropContextProps extends Omit<DndKitContextProps, "sensors"> {
+    children: React.ReactNode;
+    sensors?: ReturnType<typeof useSensors>;
+    useSensors?: UseDragDropSensorsOptions;
+}
+export interface DroppableProps {
+    ref?: React.Ref<HTMLDivElement>;
+    id: UniqueIdentifier;
+    children: React.ReactNode | ((args: {
+        isOver: boolean;
+        setNodeRef: (node: HTMLElement | null) => void;
+    }) => React.ReactNode);
+    className?: string;
+    disabled?: boolean;
+}
+export interface DraggableProps {
+    ref?: React.Ref<HTMLDivElement>;
+    id: UniqueIdentifier;
+    children: React.ReactNode | ((args: {
+        attributes: DraggableAttributes;
+        listeners: SyntheticListenerMap | undefined;
+        setNodeRef: (node: HTMLElement | null) => void;
+        transform: {
+            x: number;
+            y: number;
+            scaleX: number;
+            scaleY: number;
+        } | null;
+        isDragging: boolean;
+    }) => React.ReactNode);
+    className?: string;
+    disabled?: boolean;
+}
+export interface SortableContextProps {
+    id?: UniqueIdentifier;
+    items: UniqueIdentifier[] | {
+        id: UniqueIdentifier;
+    }[];
+    strategy?: SortingStrategy;
+    children: React.ReactNode;
+}
+export interface SortableItemProps {
+    ref?: React.Ref<HTMLDivElement>;
+    id: UniqueIdentifier;
+    children: React.ReactNode | ((args: {
+        attributes: DraggableAttributes;
+        listeners: SyntheticListenerMap | undefined;
+        setNodeRef: (node: HTMLElement | null) => void;
+        transform: Transform | null;
+        transition: string | undefined;
+        isDragging: boolean;
+        isSorting: boolean;
+        isOver: boolean;
+    }) => React.ReactNode);
+    className?: string;
+    disabled?: boolean;
+    handle?: boolean;
+    slotStyles?: SlotStyles;
+}
+export interface SortableHandleProps {
+    ref?: React.Ref<HTMLDivElement>;
+    children: React.ReactNode | ((listeners: SyntheticListenerMap | undefined) => React.ReactNode);
+    className?: string;
+}
+export interface DragOverlayComponentProps {
+    children: React.ReactNode;
+    className?: string;
+    dropAnimation?: {
+        duration?: number;
+        easing?: string;
+    } | null;
+}
+export type { Active, Collision, DragEndEvent as DropResult, DraggableAttributes, DraggableSyntheticListeners, DragOverEvent as DragUpdate, DragOverEvent, DragStartEvent as DragStart, Over, SortingStrategy, Transform, UniqueIdentifier, };

package/dist/components/dnd/dnd.types.js

@@ -0,0 +1,7 @@
+"use client";
+/**
+ * DnD family types — the Kala-named surface over @dnd-kit plus the wrapper
+ * component prop shapes. Kept free of runtime code so it doubles as the
+ * @dnd-kit type re-export point for the family barrel.
+ */
+export {};

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

@@ -1 +1,2 @@
-export { DragDropContext, type DragDropContextProps, Draggable, type DraggableAttributes, type DraggableProps, type DragStart, type DragUpdate, Droppable, type DroppableProps, type DropResult, type UniqueIdentifier, } from "./dnd";
+export { DragDropContext, Draggable, Droppable } from "./dnd";
+export type { DragDropContextProps, DraggableAttributes, DraggableProps, DragStart, DragUpdate, DroppableProps, DropResult, UniqueIdentifier, } from "./dnd.types";

package/dist/components/dnd/index.js

@@ -1,2 +1,2 @@
 "use client";
-export { DragDropContext, Draggable, Droppable, } from "./dnd.js";
+export { DragDropContext, Draggable, Droppable } from "./dnd.js";

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", { "data-kala-component": "footer", ref: ref, 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.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());

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, { "data-kala-component": "metric-card-skeleton", 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, { "data-kala-component": "metric-card", ref: ref, 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, { "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,16 @@ 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, { "data-kala-component": "metric-card", ref: ref, 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 ? "opacity-90" : "text-muted-foreground"), children: title }), icon && (_jsx("div", { className: cn(iconSlot.className, isColorful ? "opacity-70" : "text-muted-foreground"), "aria-hidden": "true", children: icon }))] }), _jsx("div", { className: "mb-3", children: _jsxs("div", { className: cn(valueSlot.className, 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: meta.className, children: change !== undefined ? (_jsxs("div", { className: cn(changeSlot.className, 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(subtitleSlot.className, isColorful ? "opacity-80" : "text-muted-foreground"), 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,35 +1,3 @@
 import type * as React from "react";
-export interface NavLinkProps extends Omit<React.ComponentProps<"button">, "onChange" | "ref"> {
-    /** 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;
-    /**
-     * 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;
-    /** 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;
-}
+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,11 +3,14 @@ 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";
+/** 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. */
-// biome-ignore lint: manual widening of every *EventHandler — Record spread is
-// the pragmatic bridge until the props are re-modeled per-element.
 const widenHandlers = (props) => {
     const out = {};
     for (const [key, value] of Object.entries(props)) {
@@ -18,25 +21,30 @@ const widenHandlers = (props) => {
     }
     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 = (_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" })) }))] }));
-    const baseClassName = 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);
+    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) => {
-            const isPlainLeftClick = e.button === 0 && !e.metaKey && !e.ctrlKey && !e.shiftKey && !e.altKey;
-            if (isPlainLeftClick)
+            if (isPlainLeftClick(e))
                 e.preventDefault();
             onClick?.(e);
         };

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";