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

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", { "data-kala-component": "nav-link", 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.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,19 +8,11 @@ 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-kala-component": "navigation", className: cn(orientation === "vertical"
@@ -35,10 +28,7 @@ export function Navigation({ ref, className, links, orientation = "horizontal",
                             : "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-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", "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", { 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";

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

@@ -14,6 +14,8 @@ export interface SessionCardSkeletonProps extends SessionCardSkeletonConfig {
      * Test ID for querying the element
      */
     "data-testid"?: string;
+    [dataKala: `data-${string}`]: string | undefined;
+    style?: React.CSSProperties;
 }
 /**
  * Session Card skeleton component
@@ -25,7 +27,7 @@ export interface SessionCardSkeletonProps extends SessionCardSkeletonConfig {
  * <SessionCardSkeleton showBadge={true} />
  * ```
  */
-export declare function SessionCardSkeleton({ showBadge, showRevokeButton, className, "data-testid": dataTestId, }: SessionCardSkeletonProps): import("react").JSX.Element;
+export declare function SessionCardSkeleton({ showBadge, showRevokeButton, className, "data-testid": dataTestId, style, ...markerProps }: SessionCardSkeletonProps): import("react").JSX.Element;
 export declare namespace SessionCardSkeleton {
     export { SessionCardSkeleton as Skeleton };
 }

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

@@ -8,6 +8,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  */
 import { Card, CardContent, CardHeader } from "@kala-ui/react/card";
 import { cn } from "@kala-ui/react/lib/utils";
+import { sessionCardSkeletonStyles, sessionCardStyles, } from "../../config/session-card.js";
 import { Skeleton, SkeletonCircle } from "@kala-ui/react/skeleton";
 /**
  * Session Card skeleton component
@@ -19,8 +20,8 @@ import { Skeleton, SkeletonCircle } from "@kala-ui/react/skeleton";
  * <SessionCardSkeleton showBadge={true} />
  * ```
  */
-export function SessionCardSkeleton({ showBadge = false, showRevokeButton = true, className, "data-testid": dataTestId, }) {
-    return (_jsxs(Card, { "data-kala-component": "session-card-skeleton", "data-testid": dataTestId || "session-card-skeleton", className: cn("relative", className), children: [_jsx(CardHeader, { className: "pb-3", children: _jsxs("div", { className: "flex items-start justify-between gap-4", children: [_jsxs("div", { className: "flex items-start gap-3 flex-1", children: [_jsx(SkeletonCircle, { size: "1.5rem", className: "rounded-md" }), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsx(Skeleton, { className: "h-4 w-32 mb-1" }), _jsx(Skeleton, { className: "h-3 w-48" })] })] }), showBadge ? (_jsx(Skeleton, { className: "h-5 w-24 rounded-md" })) : (showRevokeButton && _jsx(Skeleton, { className: "h-8 w-16 rounded-md" }))] }) }), _jsx(CardContent, { className: "pt-0", children: _jsxs("div", { className: "space-y-1.5", children: [_jsx(Skeleton, { className: "h-4 w-48" }), _jsx(Skeleton, { className: "h-4 w-40" }), _jsx(Skeleton, { className: "h-4 w-56" })] }) })] }));
+export function SessionCardSkeleton({ showBadge = false, showRevokeButton = true, className, "data-testid": dataTestId, style, ...markerProps }) {
+    return (_jsxs(Card, { "data-kala-component": "session-card-skeleton", "data-testid": dataTestId || "session-card-skeleton", className: cn(sessionCardSkeletonStyles.root, className), style: style, ...markerProps, children: [_jsx(CardHeader, { className: sessionCardStyles.header, children: _jsxs("div", { className: sessionCardSkeletonStyles.headerRow, children: [_jsxs("div", { className: sessionCardSkeletonStyles.headerMain, children: [_jsx(SkeletonCircle, { size: "1.5rem", className: sessionCardSkeletonStyles.deviceIcon }), _jsxs("div", { className: sessionCardSkeletonStyles.titleBlock, children: [_jsx(Skeleton, { className: sessionCardSkeletonStyles.titleSkeleton }), _jsx(Skeleton, { className: sessionCardSkeletonStyles.subtitleSkeleton })] })] }), showBadge ? (_jsx(Skeleton, { className: sessionCardSkeletonStyles.badgeSkeleton })) : (showRevokeButton && (_jsx(Skeleton, { className: sessionCardSkeletonStyles.revokeSkeleton })))] }) }), _jsx(CardContent, { className: sessionCardStyles.content, children: _jsxs("div", { className: sessionCardSkeletonStyles.detailList, children: [_jsx(Skeleton, { className: sessionCardSkeletonStyles.detailRowMedium }), _jsx(Skeleton, { className: sessionCardSkeletonStyles.detailRowNarrow }), _jsx(Skeleton, { className: sessionCardSkeletonStyles.detailRowWide })] }) })] }));
 }
 /**
  * Compound component: SessionCard.Skeleton

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

@@ -1,27 +1,4 @@
-/**
- * Session Card Component
- * Displays information about an active session with device, browser, location, and last activity
- */
-import type { SessionCardSkeletonConfig } from "@kala-ui/react/skeleton";
 import type * as React from "react";
-export interface SessionData {
-    id: string;
-    device: string;
-    browser: string;
-    os: string;
-    location?: string;
-    ip: string;
-    lastActiveAt: string;
-    createdAt: string;
-    isCurrent: boolean;
-}
-export interface SessionCardProps extends React.ComponentProps<"div"> {
-    session: SessionData;
-    onRevoke?: (sessionId: string) => void | Promise<void>;
-    isRevoking?: boolean;
-    className?: string;
-    isLoading?: boolean;
-    skeletonConfig?: SessionCardSkeletonConfig;
-    skeleton?: React.ReactNode;
-}
-export declare function SessionCard({ session, onRevoke, isRevoking, className, isLoading, skeletonConfig, skeleton, ref, ...props }: SessionCardProps): React.JSX.Element;
+import type { SessionCardProps } from "./session-card.types";
+export declare function SessionCard({ session, onRevoke, isRevoking, className, style, slotStyles: slotStylesRaw, isLoading, skeletonConfig, skeleton, ref, ...props }: SessionCardProps): React.JSX.Element;
+export type { SessionData } from "./session-card.types";

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

@@ -1,13 +1,12 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/**
- * Session Card Component
- * Displays information about an active session with device, browser, location, and last activity
- */
 import { Button } from "@kala-ui/react/button";
 import { Card, CardContent, CardHeader } 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 { Clock, HelpCircle, MapPin, Monitor, Smartphone, Tablet, Wifi, } from "lucide-react";
+import { sessionCardStyles } from "../../config/session-card.js";
 import { SessionCardSkeleton } from "./session-card-skeleton.js";
 function getDeviceIcon(device) {
     const deviceLower = device.toLowerCase();
@@ -49,12 +48,14 @@ function formatTimestamp(timestamp) {
         hour12: true,
     });
 }
-export function SessionCard({ session, onRevoke, isRevoking, className, isLoading = false, skeletonConfig, skeleton, ref, ...props }) {
+export function SessionCard({ session, onRevoke, isRevoking, className, style, slotStyles: slotStylesRaw, isLoading = false, skeletonConfig, skeleton, ref, ...props }) {
+    const slotStyles = useSlotStyles("session-card", slotStylesRaw);
+    const root = applySlot(cn(sessionCardStyles.root, className), slotStyles?.root);
     if (isLoading) {
         if (skeleton) {
-            return (_jsx(Card, { "data-kala-component": "session-card", ref: ref, className: cn("relative", className), ...props, children: skeleton }));
+            return (_jsx(Card, { "data-kala-component": "session-card", ref: ref, className: root.className, style: root.style, ...props, children: skeleton }));
         }
-        return (_jsx(SessionCardSkeleton, { "data-kala-component": "session-card", className: className, ...skeletonConfig }));
+        return (_jsx(SessionCardSkeleton, { "data-kala-component": "session-card", className: root.className, ...skeletonConfig }));
     }
     const DeviceIcon = getDeviceIcon(session.device);
     const lastActive = formatTimestamp(session.lastActiveAt);
@@ -63,5 +64,19 @@ export function SessionCard({ session, onRevoke, isRevoking, className, isLoadin
             void onRevoke(session.id);
         }
     };
-    return (_jsxs(Card, { "data-kala-component": "session-card", ref: ref, className: cn("relative", className), ...props, children: [_jsx(CardHeader, { className: "pb-3", children: _jsxs("div", { className: "flex items-start justify-between gap-4", children: [_jsxs("div", { className: "flex items-start gap-3 flex-1", children: [_jsx(DeviceIcon, { className: "size-6 text-muted-foreground mt-0.5", "aria-hidden": "true" }), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsx("div", { className: "flex items-center gap-2 flex-wrap", children: _jsx("h4", { className: "font-semibold text-sm", children: session.browser }) }), _jsxs("p", { className: "text-xs text-muted-foreground mt-0.5", children: [session.os, " \u2022 ", session.device] })] })] }), session.isCurrent ? (_jsx("div", { className: "inline-flex items-center rounded-md bg-success/10 px-2 py-1 text-xs font-medium text-success border border-success/20", children: "Current Session" })) : (onRevoke && (_jsx(Button, { variant: "ghost", size: "sm", onClick: handleRevoke, disabled: isRevoking, className: "text-destructive hover:text-destructive hover:bg-destructive/10", "aria-label": "Revoke session", children: isRevoking ? "Revoking..." : "Revoke" })))] }) }), _jsx(CardContent, { className: "pt-0", children: _jsxs("div", { className: "space-y-1.5 text-xs text-muted-foreground", children: [session.location && (_jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx(MapPin, { className: "size-3.5", "aria-hidden": "true" }), _jsx("span", { children: session.location })] })), _jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx(Wifi, { className: "size-3.5", "aria-hidden": "true" }), _jsx("span", { children: session.ip })] }), _jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx(Clock, { className: "size-3.5", "aria-hidden": "true" }), _jsxs("span", { children: ["Last active ", lastActive] })] })] }) })] }));
+    const header = applySlot(sessionCardStyles.header, slotStyles?.header);
+    const headerRow = applySlot(sessionCardStyles.headerRow, slotStyles?.headerRow);
+    const headerMain = applySlot(sessionCardStyles.headerMain, slotStyles?.headerMain);
+    const deviceIcon = applySlot(sessionCardStyles.deviceIcon, slotStyles?.deviceIcon);
+    const titleBlock = applySlot(sessionCardStyles.titleBlock, slotStyles?.titleBlock);
+    const titleRow = applySlot(sessionCardStyles.titleRow, slotStyles?.titleRow);
+    const title = applySlot(sessionCardStyles.title, slotStyles?.title);
+    const subtitle = applySlot(sessionCardStyles.subtitle, slotStyles?.subtitle);
+    const currentBadge = applySlot(sessionCardStyles.currentBadge, slotStyles?.currentBadge);
+    const revokeButton = applySlot(sessionCardStyles.revokeButton, slotStyles?.revokeButton);
+    const content = applySlot(sessionCardStyles.content, slotStyles?.content);
+    const detailList = applySlot(sessionCardStyles.detailList, slotStyles?.detailList);
+    const detailRow = applySlot(sessionCardStyles.detailRow, slotStyles?.detailRow);
+    const detailIcon = applySlot(sessionCardStyles.detailIcon, slotStyles?.detailIcon);
+    return (_jsxs(Card, { "data-kala-component": "session-card", ref: ref, className: root.className, style: root.style, ...props, children: [_jsx(CardHeader, { className: header.className, style: header.style, children: _jsxs("div", { className: headerRow.className, style: headerRow.style, children: [_jsxs("div", { className: headerMain.className, style: headerMain.style, children: [_jsx(DeviceIcon, { className: deviceIcon.className, style: deviceIcon.style, "aria-hidden": "true" }), _jsxs("div", { className: titleBlock.className, style: titleBlock.style, children: [_jsx("div", { className: titleRow.className, style: titleRow.style, children: _jsx("h4", { className: title.className, style: title.style, children: session.browser }) }), _jsxs("p", { className: subtitle.className, style: subtitle.style, children: [session.os, " \u2022 ", session.device] })] })] }), session.isCurrent ? (_jsx("div", { className: currentBadge.className, style: currentBadge.style, children: "Current Session" })) : (onRevoke && (_jsx(Button, { variant: "ghost", size: "sm", onClick: handleRevoke, disabled: isRevoking, className: revokeButton.className, style: revokeButton.style, "aria-label": "Revoke session", children: isRevoking ? "Revoking..." : "Revoke" })))] }) }), _jsx(CardContent, { className: content.className, style: content.style, children: _jsxs("div", { className: detailList.className, style: detailList.style, children: [session.location && (_jsxs("div", { className: detailRow.className, style: detailRow.style, children: [_jsx(MapPin, { className: detailIcon.className, "aria-hidden": "true" }), _jsx("span", { children: session.location })] })), _jsxs("div", { className: detailRow.className, style: detailRow.style, children: [_jsx(Wifi, { className: detailIcon.className, "aria-hidden": "true" }), _jsx("span", { children: session.ip })] }), _jsxs("div", { className: detailRow.className, style: detailRow.style, children: [_jsx(Clock, { className: detailIcon.className, "aria-hidden": "true" }), _jsxs("span", { children: ["Last active ", lastActive] })] })] }) })] }));
 }

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

@@ -0,0 +1,26 @@
+import type { SlotStyles } from "@kala-ui/react/lib/slot-styles";
+import type { SessionCardSkeletonConfig } from "@kala-ui/react/skeleton";
+import type * as React from "react";
+export interface SessionData {
+    id: string;
+    device: string;
+    browser: string;
+    os: string;
+    location?: string;
+    ip: string;
+    lastActiveAt: string;
+    createdAt: string;
+    isCurrent: boolean;
+}
+export interface SessionCardProps extends React.ComponentProps<"div"> {
+    session: SessionData;
+    onRevoke?: (sessionId: string) => void | Promise<void>;
+    isRevoking?: boolean;
+    className?: string;
+    isLoading?: boolean;
+    skeletonConfig?: SessionCardSkeletonConfig;
+    skeleton?: React.ReactNode;
+    /** Per-part overrides: root, header, headerRow, deviceIcon, title, subtitle,
+     * currentBadge, revokeButton, content, detailList, detailRow, detailIcon. */
+    slotStyles?: SlotStyles;
+}

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

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

package/dist/components/sidebar/sidebar.js

@@ -2,7 +2,7 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button } from "@kala-ui/react/button";
 import { cn } from "@kala-ui/react/lib/utils";
-import { useFocusTrap, useMediaQuery, useMergedRef, useScrollLock, } from "@kala-ui/react-hooks";
+import { useFocusTrap, useMediaQuery, useMergedRef, useScrollLock, useWindowEvent, } from "@kala-ui/react-hooks";
 import { ChevronDown } from "lucide-react";
 import { useEffect, useId, useState } from "react";
 import { isActivePath } from "../../lib/active-path.js";
@@ -17,16 +17,10 @@ export function Sidebar({ logo, navSections = [], pathname = "", isOpen = true,
     useEffect(() => {
         setScrollLocked(overlayActive);
     }, [overlayActive, setScrollLocked]);
-    useEffect(() => {
-        if (!overlayActive)
-            return;
-        const handleKeyDown = (event) => {
-            if (event.key === "Escape")
-                onClose?.();
-        };
-        window.addEventListener("keydown", handleKeyDown);
-        return () => window.removeEventListener("keydown", handleKeyDown);
-    }, [overlayActive, onClose]);
+    useWindowEvent("keydown", (event) => {
+        if (event.key === "Escape" && overlayActive)
+            onClose?.();
+    });
     // Track which sections are expanded
     const [expandedSections, setExpandedSections] = useState(new Set(navSections
         .map((section, index) => (section.defaultOpen !== false ? index : -1))

package/dist/components/social-login-button/index.d.ts

@@ -1 +1,3 @@
-export { SocialLoginButton, type SocialLoginButtonProps, } from "./social-login-button";
+export { SocialLoginButton } from "./social-login-button";
+export type { SocialLoginButtonProps, SocialLoginButtonsProps, } from "./social-login-button.types";
+export { SocialLoginButtons } from "./social-login-buttons";

package/dist/components/social-login-button/index.js

@@ -1,2 +1,3 @@
 "use client";
-export { SocialLoginButton, } from "./social-login-button.js";
+export { SocialLoginButton } from "./social-login-button.js";
+export { SocialLoginButtons } from "./social-login-buttons.js";

package/dist/components/social-login-button/social-login-button.d.ts

@@ -1,20 +1,2 @@
-/**
- * SocialLoginButton Component
- * Individual OAuth provider button with loading state and brand colors from design tokens
- */
-import { type ButtonProps } from "@kala-ui/react/button";
-export interface SocialLoginButtonProps extends Omit<ButtonProps, "variant"> {
-    /**
-     * OAuth provider name (e.g., 'google', 'github')
-     */
-    provider: "google" | "github" | "facebook" | "twitter" | "x" | "linkedin";
-    /**
-     * Loading state during OAuth redirect
-     */
-    isLoading?: boolean;
-    /**
-     * Optional custom label (defaults to provider name, e.g., "Google")
-     */
-    label?: string;
-}
-export declare function SocialLoginButton({ ref, provider, isLoading, label, className, disabled, ...props }: SocialLoginButtonProps): import("react").JSX.Element;
+import type { SocialLoginButtonProps } from "./social-login-button.types";
+export declare function SocialLoginButton({ ref, provider, isLoading, label, className, style, slotStyles: slotStylesRaw, disabled, ...props }: SocialLoginButtonProps): import("react").JSX.Element;

package/dist/components/social-login-button/social-login-button.js

@@ -1,20 +1,15 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/**
- * SocialLoginButton Component
- * Individual OAuth provider button with loading state and brand colors from design tokens
- */
 import { Button } from "@kala-ui/react/button";
+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 { Loader2 } from "lucide-react";
 import { siFacebook, siGithub, siGoogle, siX } from "simple-icons";
-/**
- * Provider configuration with proper brand colors
- * Using solid hover colors instead of opacity to fix white background issue
- */
+import { socialLoginButtonStyles } from "../../config/social-login-button.js";
 // Custom LinkedIn icon (removed from simple-icons due to Microsoft legal requirements)
 // See: https://github.com/simple-icons/simple-icons/issues/11372
-const LinkedInIcon = ({ className }) => (_jsxs("svg", { role: "img", viewBox: "0 0 24 24", className: className, fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("title", { children: "LinkedIn" }), _jsx("path", { d: "M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z" })] }));
+const LinkedInIcon = ({ className }) => (_jsxs("svg", { role: "img", viewBox: "0 0 24 24", className: className, fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("title", { children: "LinkedIn" }), _jsx("path", { d: "M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.224 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z" })] }));
 // Wrapper component to convert SimpleIcon to React component
 const SimpleIconWrapper = ({ icon, className, label, }) => (_jsxs("svg", { role: "img", viewBox: "0 0 24 24", className: className, fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("title", { children: label }), _jsx("path", { d: icon.path })] }));
 const providerConfig = {
@@ -49,9 +44,12 @@ const providerConfig = {
         color: "hover:bg-brand-linkedin hover:text-white hover:border-brand-linkedin",
     },
 };
-export function SocialLoginButton({ ref, provider, isLoading = false, label, className, disabled, ...props }) {
+export function SocialLoginButton({ ref, provider, isLoading = false, label, className, style, slotStyles: slotStylesRaw, disabled, ...props }) {
+    const slotStyles = useSlotStyles("social-login-button", slotStylesRaw);
     const config = providerConfig[provider];
     const displayLabel = label ?? config.label;
     const icon = config.icon;
-    return (_jsxs(Button, { "data-kala-component": "social-login-button", ref: ref, type: "button", variant: "outline", className: cn("relative transition-colors duration-200 bg-transparent border-input text-foreground", config.color, className), disabled: disabled || isLoading, ...props, children: [isLoading ? (_jsx(Loader2, { className: "w-5 h-5 animate-spin mr-2" })) : provider === "linkedin" ? (_jsx(LinkedInIcon, { className: "w-5 h-5 mr-2" })) : icon ? (_jsx(SimpleIconWrapper, { icon: icon, className: "w-5 h-5 mr-2", label: displayLabel })) : null, _jsx("span", { children: isLoading ? "Redirecting..." : displayLabel })] }));
+    const root = applySlot(cn(socialLoginButtonStyles.root, config.color, className), slotStyles?.root);
+    const iconSlot = applySlot(socialLoginButtonStyles.icon, slotStyles?.icon);
+    return (_jsxs(Button, { "data-kala-component": "social-login-button", ref: ref, type: "button", variant: "outline", className: root.className, style: root.style, disabled: disabled || isLoading, ...props, children: [isLoading ? (_jsx(Loader2, { className: applySlot(socialLoginButtonStyles.spinner, slotStyles?.icon).className })) : provider === "linkedin" ? (_jsx(LinkedInIcon, { className: iconSlot.className })) : icon ? (_jsx(SimpleIconWrapper, { icon: icon, className: iconSlot.className, label: displayLabel })) : null, _jsx("span", { children: isLoading ? "Redirecting..." : displayLabel })] }));
 }

package/dist/components/social-login-button/social-login-button.types.d.ts

@@ -0,0 +1,28 @@
+import type { ButtonProps } from "@kala-ui/react/button";
+import type { SlotStyles } from "@kala-ui/react/lib/slot-styles";
+export interface SocialLoginButtonProps extends Omit<ButtonProps, "variant"> {
+    /** OAuth provider name (e.g., 'google', 'github') */
+    provider: "google" | "github" | "facebook" | "twitter" | "x" | "linkedin";
+    /** Loading state during OAuth redirect */
+    isLoading?: boolean;
+    /** Optional custom label (defaults to provider name, e.g., "Google") */
+    label?: string;
+    /** Per-part overrides: `root` (button), `icon` (provider glyph). */
+    slotStyles?: SlotStyles;
+}
+export interface SocialLoginButtonsProps {
+    /** Callback when any provider button is clicked */
+    onProviderClick: (provider: SocialLoginButtonProps["provider"]) => void;
+    /** Currently loading provider (if any) */
+    loadingProvider?: SocialLoginButtonProps["provider"];
+    /** Optional list of providers to display (defaults to all 5) */
+    providers?: SocialLoginButtonProps["provider"][];
+    /** Optional custom class name for the container */
+    className?: string;
+    /** Show divider with "Or continue with" text */
+    showDivider?: boolean;
+    /** Custom text for the divider; defaults to "Or sign in with" */
+    dividerText?: string;
+    /** Per-part overrides: root, divider, dividerLine, dividerMask, dividerLabel, dividerRule, list. */
+    slotStyles?: SlotStyles;
+}

package/dist/components/social-login-button/social-login-button.types.js

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

package/dist/components/social-login-button/social-login-buttons.d.ts

@@ -0,0 +1,4 @@
+import type * as React from "react";
+import type { SocialLoginButtonsProps } from "./social-login-button.types";
+export declare function SocialLoginButtons({ onProviderClick, loadingProvider, providers, className, showDivider, dividerText, slotStyles: slotStylesRaw, }: SocialLoginButtonsProps): React.JSX.Element;
+export type { SocialLoginButtonProps } from "./social-login-button.types";

package/dist/components/social-login-button/social-login-buttons.js

@@ -0,0 +1,18 @@
+"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";
+import { socialLoginButtonsStyles } from "../../config/social-login-button.js";
+import { SocialLoginButton } from "./social-login-button.js";
+export function SocialLoginButtons({ onProviderClick, loadingProvider, providers = ["google", "github", "facebook", "x", "linkedin"], className, showDivider = true, dividerText = "Or sign in with", slotStyles: slotStylesRaw, }) {
+    const slotStyles = useSlotStyles("social-login-buttons", slotStylesRaw);
+    const root = applySlot(cn(socialLoginButtonsStyles.root, className), slotStyles?.root);
+    const divider = applySlot(socialLoginButtonsStyles.divider, slotStyles?.divider);
+    const dividerLine = applySlot(socialLoginButtonsStyles.dividerLine, slotStyles?.dividerLine);
+    const dividerMask = applySlot(socialLoginButtonsStyles.dividerMask, slotStyles?.dividerMask);
+    const dividerLabel = applySlot(socialLoginButtonsStyles.dividerLabel, slotStyles?.dividerLabel);
+    const dividerRule = applySlot(socialLoginButtonsStyles.dividerRule, slotStyles?.dividerRule);
+    const list = applySlot(socialLoginButtonsStyles.list, slotStyles?.list);
+    return (_jsxs("div", { "data-kala-component": "social-login-buttons", className: root.className, children: [showDivider && (_jsxs("div", { className: divider.className, children: [_jsx("div", { className: dividerLine.className, children: _jsx("span", { className: dividerRule.className }) }), _jsx("div", { className: dividerMask.className, children: _jsx("span", { className: dividerLabel.className, children: dividerText }) })] })), _jsx("div", { className: list.className, children: providers.map((provider) => (_jsx(SocialLoginButton, { provider: provider, isLoading: loadingProvider === provider, onClick: () => onProviderClick(provider), disabled: loadingProvider !== undefined && loadingProvider !== provider }, provider))) })] }));
+}

package/dist/components/user-menu-dropdown/index.d.ts

@@ -1 +1,2 @@
-export { UserMenuDropdown, type UserMenuDropdownProps, } from "./user-menu-dropdown";
+export { UserMenuDropdown } from "./user-menu-dropdown";
+export type { UserMenuDropdownProps } from "./user-menu-dropdown.types";

package/dist/components/user-menu-dropdown/index.js

@@ -1,2 +1,2 @@
 "use client";
-export { UserMenuDropdown, } from "./user-menu-dropdown.js";
+export { UserMenuDropdown } from "./user-menu-dropdown.js";