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

package/dist/components/navigation/navigation.js

@@ -0,0 +1,44 @@
+"use client";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "@kala-ui/react/lib/utils";
+import { ChevronDown } from "lucide-react";
+import * as React from "react";
+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]);
+    // Vertical desktop navigation (explicit opt-in via orientation)
+    if (orientation === "vertical") {
+        return (_jsx("nav", { "data-comp": "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"
+                    : "text-foreground hover:bg-accent hover:text-accent-foreground"), "aria-current": isActive(link.href) ? "page" : undefined, children: link.label }, link.href))) }));
+    }
+    // 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)
+                            ? "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)
+                                ? "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/session-card/index.d.ts

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

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

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

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

@@ -0,0 +1,31 @@
+/**
+ * Session Card Skeleton Component
+ *
+ * Loading placeholder for the Session Card component.
+ * Provides zero-CLS skeleton state that matches actual session card layout.
+ */
+import type { SessionCardSkeletonConfig } from "@kala-ui/react/skeleton";
+export interface SessionCardSkeletonProps extends SessionCardSkeletonConfig {
+    /**
+     * Additional className for the skeleton container
+     */
+    className?: string;
+    /**
+     * Test ID for querying the element
+     */
+    "data-testid"?: string;
+}
+/**
+ * Session Card skeleton component
+ *
+ * @example
+ * ```tsx
+ * <SessionCardSkeleton />
+ *
+ * <SessionCardSkeleton showBadge={true} />
+ * ```
+ */
+export declare function SessionCardSkeleton({ showBadge, showRevokeButton, className, "data-testid": dataTestId, }: SessionCardSkeletonProps): import("react").JSX.Element;
+export declare namespace SessionCardSkeleton {
+    export { SessionCardSkeleton as Skeleton };
+}

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

@@ -0,0 +1,28 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Session Card Skeleton Component
+ *
+ * Loading placeholder for the Session Card component.
+ * Provides zero-CLS skeleton state that matches actual session card layout.
+ */
+import { Card, CardContent, CardHeader } from "@kala-ui/react/card";
+import { cn } from "@kala-ui/react/lib/utils";
+import { Skeleton, SkeletonCircle } from "@kala-ui/react/skeleton";
+/**
+ * Session Card skeleton component
+ *
+ * @example
+ * ```tsx
+ * <SessionCardSkeleton />
+ *
+ * <SessionCardSkeleton showBadge={true} />
+ * ```
+ */
+export function SessionCardSkeleton({ showBadge = false, showRevokeButton = true, className, "data-testid": dataTestId, }) {
+    return (_jsxs(Card, { "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" })] }) })] }));
+}
+/**
+ * Compound component: SessionCard.Skeleton
+ */
+SessionCardSkeleton.Skeleton = SessionCardSkeleton;

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

@@ -0,0 +1,27 @@
+/**
+ * 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;

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

@@ -0,0 +1,67 @@
+"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 { cn } from "@kala-ui/react/lib/utils";
+import { Clock, HelpCircle, MapPin, Monitor, Smartphone, Tablet, Wifi, } from "lucide-react";
+import { SessionCardSkeleton } from "./session-card-skeleton.js";
+function getDeviceIcon(device) {
+    const deviceLower = device.toLowerCase();
+    if (deviceLower.includes("mobile") || deviceLower.includes("phone")) {
+        return Smartphone;
+    }
+    if (deviceLower.includes("tablet") || deviceLower.includes("ipad")) {
+        return Tablet;
+    }
+    if (deviceLower.includes("desktop") || deviceLower.includes("computer")) {
+        return Monitor;
+    }
+    return HelpCircle;
+}
+function formatTimestamp(timestamp) {
+    const date = new Date(timestamp);
+    if (Number.isNaN(date.getTime())) {
+        return "Unknown";
+    }
+    const now = new Date();
+    const diffMs = now.getTime() - date.getTime();
+    const diffMins = Math.floor(diffMs / 60000);
+    const diffHours = Math.floor(diffMs / 3600000);
+    const diffDays = Math.floor(diffMs / 86400000);
+    if (diffMins < 1)
+        return "Just now";
+    if (diffMins < 60)
+        return `${diffMins} minute${diffMins > 1 ? "s" : ""} ago`;
+    if (diffHours < 24)
+        return `${diffHours} hour${diffHours > 1 ? "s" : ""} ago`;
+    if (diffDays === 1) {
+        return `Yesterday at ${date.toLocaleTimeString("en-US", { hour: "numeric", minute: "2-digit", hour12: true })}`;
+    }
+    return date.toLocaleDateString("en-US", {
+        month: "short",
+        day: "numeric",
+        hour: "numeric",
+        minute: "2-digit",
+        hour12: true,
+    });
+}
+export function SessionCard({ session, onRevoke, isRevoking, className, isLoading = false, skeletonConfig, skeleton, ref, ...props }) {
+    if (isLoading) {
+        if (skeleton) {
+            return (_jsx(Card, { "data-comp": "session-card", ref: ref, className: cn("relative", className), ...props, children: skeleton }));
+        }
+        return _jsx(SessionCardSkeleton, { className: className, ...skeletonConfig });
+    }
+    const DeviceIcon = getDeviceIcon(session.device);
+    const lastActive = formatTimestamp(session.lastActiveAt);
+    const handleRevoke = () => {
+        if (onRevoke && !session.isCurrent) {
+            void onRevoke(session.id);
+        }
+    };
+    return (_jsxs(Card, { "data-comp": "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] })] })] }) })] }));
+}

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

@@ -0,0 +1,3 @@
+export { Sidebar, type SidebarLink, type SidebarProps, type SidebarSection, } from "./sidebar";
+export type { SidebarSkeletonConfig, SidebarSkeletonProps, } from "./sidebar-skeleton";
+export { SidebarSkeleton } from "./sidebar-skeleton";

package/dist/components/sidebar/index.js

@@ -0,0 +1,3 @@
+"use client";
+export { Sidebar, } from "./sidebar.js";
+export { SidebarSkeleton } from "./sidebar-skeleton.js";

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

@@ -0,0 +1,54 @@
+/**
+ * Sidebar Skeleton Component
+ *
+ * Loading placeholder for the Sidebar component.
+ * Supports sections, header, footer, and collapsed state.
+ */
+export interface SidebarSkeletonConfig {
+    /**
+     * Whether sidebar is collapsed
+     * @default false
+     */
+    collapsed?: boolean;
+    /**
+     * Show header/logo area
+     * @default true
+     */
+    showHeader?: boolean;
+    /**
+     * Show footer/user profile
+     * @default true
+     */
+    showFooter?: boolean;
+    /**
+     * Number of navigation sections
+     * @default 3
+     */
+    sectionCount?: number;
+    /**
+     * Items per section
+     * @default 4
+     */
+    itemsPerSection?: number;
+}
+export interface SidebarSkeletonProps extends SidebarSkeletonConfig {
+    /**
+     * Additional className for the skeleton container
+     */
+    className?: string;
+    /**
+     * Test ID for querying the element
+     */
+    "data-testid"?: string;
+}
+/**
+ * Sidebar skeleton component
+ *
+ * @example
+ * ```tsx
+ * <SidebarSkeleton sectionCount={3} itemsPerSection={4} />
+ *
+ * <SidebarSkeleton collapsed />
+ * ```
+ */
+export declare function SidebarSkeleton({ collapsed, showHeader, showFooter, sectionCount, itemsPerSection, className, "data-testid": dataTestId, }: SidebarSkeletonProps): import("react").JSX.Element;

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

@@ -0,0 +1,23 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Sidebar Skeleton Component
+ *
+ * Loading placeholder for the Sidebar component.
+ * Supports sections, header, footer, and collapsed state.
+ */
+import { cn } from "@kala-ui/react/lib/utils";
+import { Skeleton } from "@kala-ui/react/skeleton";
+/**
+ * Sidebar skeleton component
+ *
+ * @example
+ * ```tsx
+ * <SidebarSkeleton sectionCount={3} itemsPerSection={4} />
+ *
+ * <SidebarSkeleton collapsed />
+ * ```
+ */
+export function SidebarSkeleton({ collapsed = false, showHeader = true, showFooter = true, sectionCount = 3, itemsPerSection = 4, className, "data-testid": dataTestId, }) {
+    return (_jsxs("aside", { "data-testid": dataTestId || "sidebar-skeleton", className: cn("flex flex-col h-full bg-popover border-r", collapsed ? "w-16" : "w-64", className), "aria-label": "Loading sidebar", "aria-busy": "true", children: [showHeader && (_jsx("div", { className: "flex items-center h-16 px-6 border-b", children: collapsed ? (_jsx(Skeleton, { className: "h-8 w-8 mx-auto" })) : (_jsx(Skeleton, { className: "h-8 w-32" })) })), _jsx("div", { className: "flex-1 overflow-y-auto py-4 px-3", children: Array.from({ length: sectionCount }).map((_, sectionIndex) => (_jsxs("div", { className: "mb-6 last:mb-0", children: [!collapsed && _jsx(Skeleton, { className: "h-3 w-20 mb-2 mx-3" }), _jsx("div", { className: "space-y-2", children: Array.from({ length: itemsPerSection }).map((_, itemIndex) => (_jsxs("div", { className: cn("flex items-center px-3 py-2", collapsed ? "justify-center" : "gap-3"), children: [_jsx(Skeleton, { className: "h-5 w-5 flex-shrink-0" }), !collapsed && _jsx(Skeleton, { className: "h-4 flex-1" }), !collapsed && itemIndex === 0 && (_jsx(Skeleton, { className: "h-4 w-4 rounded-full flex-shrink-0" }))] }, itemIndex))) })] }, sectionIndex))) }), showFooter && (_jsx("div", { className: "p-4 border-t", children: _jsxs("div", { className: cn("flex items-center", collapsed ? "justify-center" : "gap-3"), children: [_jsx(Skeleton, { className: "h-10 w-10 rounded-full flex-shrink-0" }), !collapsed && (_jsxs("div", { className: "flex-1 min-w-0", children: [_jsx(Skeleton, { className: "h-4 w-24 mb-1" }), _jsx(Skeleton, { className: "h-3 w-32" })] }))] }) }))] }));
+}

package/dist/components/sidebar/sidebar.d.ts

@@ -0,0 +1,46 @@
+import type * as React from "react";
+import { type ReactNode } from "react";
+export interface SidebarLink {
+    label: string;
+    href: string;
+    icon?: ReactNode;
+    badge?: string | number;
+}
+export interface SidebarSection {
+    title?: string;
+    links: SidebarLink[];
+    collapsible?: boolean;
+    defaultOpen?: boolean;
+}
+export interface SidebarProps extends Omit<React.ComponentProps<"aside">, "color"> {
+    /**
+     * Logo or brand element to display at the top
+     */
+    logo?: ReactNode;
+    /**
+     * Navigation sections with links
+     */
+    navSections?: SidebarSection[];
+    /**
+     * Current pathname to highlight active links
+     */
+    pathname?: string;
+    /**
+     * Whether the sidebar is open
+     * @default true
+     */
+    isOpen?: boolean;
+    /**
+     * Callback when sidebar should close (mobile)
+     */
+    onClose?: () => void;
+    /**
+     * Additional CSS classes
+     */
+    className?: string;
+    /**
+     * Footer content
+     */
+    footer?: ReactNode;
+}
+export declare function Sidebar({ logo, navSections, pathname, isOpen, onClose, className, footer, ref, ...props }: SidebarProps): React.JSX.Element;

package/dist/components/sidebar/sidebar.js

@@ -0,0 +1,69 @@
+"use client";
+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 { ChevronDown } from "lucide-react";
+import { useEffect, useId, useState } from "react";
+import { isActivePath } from "../../lib/active-path.js";
+export function Sidebar({ logo, navSections = [], pathname = "", isOpen = true, onClose, className, footer, ref, ...props }) {
+    // Mobile overlay behavior: on small screens the sidebar acts as a modal
+    // drawer (Escape to close, focus trap, background scroll lock).
+    const isDesktop = useMediaQuery("(min-width: 768px)");
+    const overlayActive = isOpen && !isDesktop;
+    const [, setScrollLocked] = useScrollLock();
+    const trapRef = useFocusTrap(overlayActive);
+    const headingBaseId = useId();
+    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]);
+    // Track which sections are expanded
+    const [expandedSections, setExpandedSections] = useState(new Set(navSections
+        .map((section, index) => (section.defaultOpen !== false ? index : -1))
+        .filter((index) => index !== -1)));
+    const toggleSection = (index) => {
+        setExpandedSections((prev) => {
+            const next = new Set(prev);
+            if (next.has(index)) {
+                next.delete(index);
+            }
+            else {
+                next.add(index);
+            }
+            return next;
+        });
+    };
+    const isLinkActive = (href) => isActivePath(pathname, href);
+    const renderLink = (link) => {
+        const active = isLinkActive(link.href);
+        return (_jsxs("a", { href: link.href, onClick: onClose, className: cn("flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium transition-colors outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset", active
+                ? "bg-primary text-primary-foreground"
+                : "text-muted-foreground hover:bg-accent hover:text-accent-foreground"), children: [link.icon && _jsx("span", { className: "shrink-0", children: link.icon }), _jsx("span", { className: "flex-1 truncate", children: link.label }), link.badge !== undefined && (_jsx("span", { className: cn("shrink-0 px-2 py-0.5 text-xs font-semibold rounded-full", active
+                        ? "bg-primary-foreground/20 text-primary-foreground"
+                        : "bg-muted text-muted-foreground"), children: link.badge }))] }, link.href));
+    };
+    const sidebarContent = (_jsxs(_Fragment, { children: [logo && (_jsx("div", { className: "flex items-center h-16 px-6 border-b", children: logo })), _jsx("nav", { className: "flex-1 overflow-y-auto py-4 px-3", children: navSections.map((section, sectionIndex) => {
+                    const isExpanded = expandedSections.has(sectionIndex);
+                    const hasTitle = section.title;
+                    const isCollapsible = section.collapsible && hasTitle;
+                    const panelId = `${headingBaseId}-section-${sectionIndex}`;
+                    return (_jsxs("div", { className: "mb-6 last:mb-0", children: [hasTitle &&
+                                (isCollapsible ? (_jsxs(Button, { variant: "ghost", className: "w-full flex items-center justify-between px-3 mb-2 text-xs font-semibold text-muted-foreground uppercase tracking-wider h-auto py-0 hover:bg-transparent cursor-pointer hover:text-foreground", onClick: () => toggleSection(sectionIndex), "aria-expanded": isExpanded, "aria-controls": panelId, children: [_jsx("span", { children: section.title }), _jsx(ChevronDown, { className: cn("size-4 transition-transform", isExpanded && "rotate-180") })] })) : (_jsx("h3", { className: "flex items-center justify-between px-3 mb-2 text-xs font-semibold text-muted-foreground uppercase tracking-wider", children: section.title }))), !isCollapsible ? (_jsx("div", { className: "space-y-1", children: section.links.map((link) => renderLink(link)) })) : (_jsx("div", { id: panelId, className: "space-y-1", hidden: !isExpanded, children: section.links.map((link) => renderLink(link)) }))] }, section.title ?? `section-${sectionIndex}`));
+                }) }), footer && _jsx("div", { className: "border-t p-4", children: footer })] }));
+    // The sidebar is a plain <aside> on desktop; on mobile it becomes a modal
+    // dialog — role=dialog is not allowed on <aside>, so the element itself
+    // switches with the viewport.
+    const shellRef = useMergedRef(ref, trapRef);
+    const shellClassName = cn("fixed left-0 top-0 z-30 h-full w-64 bg-popover border-r text-foreground transition-transform duration-300 ease-out flex flex-col kala-surface-card", "md:translate-x-0 md:z-10", isOpen ? "animate-slide-in-from-left" : "-translate-x-full", className);
+    return (_jsxs(_Fragment, { children: [isOpen && (_jsx("div", { className: "fixed inset-0 bg-overlay z-30 md:hidden animate-fade-in transition-opacity duration-200 ease-out", onClick: onClose, "aria-hidden": "true" })), overlayActive ? (_jsx("div", { ref: shellRef, "data-comp": "sidebar", role: "dialog", "aria-modal": "true", "aria-label": "Sidebar", className: shellClassName, ...props, children: sidebarContent })) : (_jsx("aside", { ref: shellRef, "data-comp": "sidebar", className: shellClassName, ...props, children: sidebarContent }))] }));
+}

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

@@ -0,0 +1 @@
+export { SocialLoginButton, type SocialLoginButtonProps, } from "./social-login-button";

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

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

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

@@ -0,0 +1,20 @@
+/**
+ * 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;

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

@@ -0,0 +1,57 @@
+"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 { 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
+ */
+// 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" })] }));
+// 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 = {
+    google: {
+        icon: siGoogle,
+        label: "Google",
+        color: "hover:bg-brand-google hover:text-white hover:border-brand-google",
+    },
+    github: {
+        icon: siGithub,
+        label: "GitHub",
+        color: "hover:bg-brand-github hover:text-white hover:border-brand-github",
+    },
+    facebook: {
+        icon: siFacebook,
+        label: "Facebook",
+        color: "hover:bg-brand-facebook hover:text-white hover:border-brand-facebook",
+    },
+    twitter: {
+        icon: siX,
+        label: "X",
+        color: "hover:bg-brand-twitter hover:text-white hover:border-brand-twitter",
+    },
+    x: {
+        icon: siX,
+        label: "X",
+        color: "hover:bg-brand-twitter hover:text-white hover:border-brand-twitter",
+    },
+    linkedin: {
+        icon: null, // Custom component used instead
+        label: "LinkedIn",
+        color: "hover:bg-brand-linkedin hover:text-white hover:border-brand-linkedin",
+    },
+};
+export function SocialLoginButton({ ref, provider, isLoading = false, label, className, disabled, ...props }) {
+    const config = providerConfig[provider];
+    const displayLabel = label ?? config.label;
+    const icon = config.icon;
+    return (_jsxs(Button, { ref: ref, "data-comp": "social-login-button", 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 })] }));
+}

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

@@ -0,0 +1 @@
+export { SocialLoginButtons, type SocialLoginButtonsProps, } from "./social-login-buttons";

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

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

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

@@ -0,0 +1,34 @@
+/**
+ * SocialLoginButtons Component
+ * Grid of all OAuth provider buttons with divider
+ */
+import type * as React from "react";
+import { type SocialLoginButtonProps } from "../social-login-button";
+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
+     * @default "Or sign in with"
+     */
+    dividerText?: string;
+}
+export declare function SocialLoginButtons({ onProviderClick, loadingProvider, providers, className, showDivider, dividerText, }: SocialLoginButtonsProps): React.JSX.Element;

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

@@ -0,0 +1,18 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * SocialLoginButtons Component
+ * Grid of all OAuth provider buttons with divider
+ */
+import { cn } from "@kala-ui/react/lib/utils";
+import { SocialLoginButton, } from "../social-login-button/index.js";
+const defaultProviders = [
+    "google",
+    "github",
+    "facebook",
+    "x",
+    "linkedin",
+];
+export function SocialLoginButtons({ onProviderClick, loadingProvider, providers = defaultProviders, className, showDivider = true, dividerText = "Or sign in with", }) {
+    return (_jsxs("div", { "data-comp": "social-login-buttons", className: cn("w-full space-y-3", className), children: [showDivider && (_jsxs("div", { className: "relative", children: [_jsx("div", { className: "absolute inset-0 flex items-center", children: _jsx("span", { className: "w-full border-t" }) }), _jsx("div", { className: "relative flex justify-center text-xs uppercase", children: _jsx("span", { className: "bg-background px-2 text-muted-foreground", children: dividerText }) })] })), _jsx("div", { className: "flex flex-wrap justify-center gap-2", children: providers.map((provider) => (_jsx(SocialLoginButton, { provider: provider, isLoading: loadingProvider === provider, onClick: () => onProviderClick(provider), disabled: loadingProvider !== undefined && loadingProvider !== provider }, provider))) })] }));
+}

package/dist/components/sparkline-chart/index.d.ts

@@ -0,0 +1,2 @@
+export type { SparklineChartProps } from "./sparkline-chart";
+export { SparklineChart } from "./sparkline-chart";

package/dist/components/sparkline-chart/index.js

@@ -0,0 +1,2 @@
+"use client";
+export { SparklineChart } from "./sparkline-chart.js";

package/dist/components/sparkline-chart/sparkline-chart.d.ts

@@ -0,0 +1,51 @@
+/**
+ * SparklineChart Component
+ * Small inline chart for use in cards and dashboards
+ * Optimized for compact display with minimal visual noise
+ */
+export interface SparklineChartProps {
+    /**
+     * Data points for the sparkline
+     */
+    data: number[];
+    /**
+     * Chart type
+     */
+    type?: "line" | "area" | "bar";
+    /**
+     * Primary color for the chart
+     */
+    color?: string;
+    /**
+     * Width of the chart in pixels
+     */
+    width?: number | string;
+    /**
+     * Height of the chart in pixels
+     */
+    height?: number | string;
+    /**
+     * Show values on hover
+     * @default false
+     */
+    tooltip?: boolean;
+    /**
+     * Optional className for styling
+     */
+    className?: string;
+    /**
+     * Gradient colors (for area charts)
+     */
+    gradientFrom?: string;
+    gradientTo?: string;
+    /**
+     * Animation settings
+     */
+    animated?: boolean;
+    /**
+     * Enable interactions (hover states, markers, etc.)
+     * @default false
+     */
+    interactive?: boolean;
+}
+export declare function SparklineChart({ data, type, color, width, height, tooltip, className, gradientFrom, gradientTo, animated, interactive, }: SparklineChartProps): import("react").JSX.Element;