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

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

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

@@ -1,31 +1,2 @@
-export interface UserMenuDropdownProps extends Omit<React.ComponentProps<"button">, "color"> {
-    /**
-     * User information to display
-     */
-    user: {
-        name?: string;
-        email?: string;
-        avatar?: string;
-    };
-    /**
-     * Whether the dropdown is currently open
-     */
-    isOpen?: boolean;
-    /**
-     * Callback when dropdown open state changes
-     */
-    onOpenChange?: (open: boolean) => void;
-    /**
-     * Callback when logout is clicked
-     */
-    onLogout?: () => void;
-    /**
-     * Base URL for navigation links (default: '/admin')
-     */
-    baseUrl?: string;
-    /**
-     * Additional CSS classes for the trigger button
-     */
-    className?: string;
-}
-export declare function UserMenuDropdown({ user, isOpen, onOpenChange, onLogout, baseUrl, className, ref, ...props }: UserMenuDropdownProps): import("react").JSX.Element;
+import type { UserMenuDropdownProps } from "./user-menu-dropdown.types";
+export declare function UserMenuDropdown({ user, isOpen, onOpenChange, onLogout, baseUrl, className, style, slotStyles: slotStylesRaw, ref, ...props }: UserMenuDropdownProps): import("react").JSX.Element;

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

@@ -3,9 +3,13 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Avatar, AvatarFallback, AvatarImage } from "@kala-ui/react/avatar";
 import { Button } from "@kala-ui/react/button";
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from "@kala-ui/react/dropdown-menu";
+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 { LogOut, Settings, User } from "lucide-react";
-export function UserMenuDropdown({ user, isOpen, onOpenChange, onLogout, baseUrl = "/admin", className, ref, ...props }) {
+import { userMenuDropdownStyles } from "../../config/user-menu-dropdown.js";
+export function UserMenuDropdown({ user, isOpen, onOpenChange, onLogout, baseUrl = "/admin", className, style, slotStyles: slotStylesRaw, ref, ...props }) {
+    const slotStyles = useSlotStyles("user-menu-dropdown", slotStylesRaw);
     const initials = user.name
         ? user.name
             .split(" ")
@@ -23,5 +27,13 @@ export function UserMenuDropdown({ user, isOpen, onOpenChange, onLogout, baseUrl
     const handleLogoutClick = () => {
         onLogout?.();
     };
-    return (_jsxs(DropdownMenu, { "data-kala-component": "user-menu-dropdown", ...(isOpen !== undefined && { open: isOpen }), ...(onOpenChange && { onOpenChange }), children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(Button, { variant: "ghost", ref: ref, className: cn("h-auto p-1 rounded-full hover:bg-accent", className), "aria-label": "User menu", ...props, children: _jsxs(Avatar, { className: "size-8", children: [user.avatar && (_jsx(AvatarImage, { src: user.avatar, alt: user.name ?? "User" })), _jsx(AvatarFallback, { className: "bg-primary text-primary-foreground text-sm font-medium", children: initials })] }) }) }), _jsxs(DropdownMenuContent, { align: "end", className: "w-56", children: [_jsx(DropdownMenuLabel, { children: _jsxs("div", { className: "flex flex-col space-y-1", children: [user.name && (_jsx("p", { className: "text-sm font-medium leading-none", children: user.name })), user.email && (_jsx("p", { className: "text-xs text-muted-foreground leading-none", children: user.email }))] }) }), _jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuItem, { onClick: handleProfileClick, children: [_jsx(User, { className: "mr-2 size-4" }), "Profile"] }), _jsxs(DropdownMenuItem, { onClick: handleSettingsClick, children: [_jsx(Settings, { className: "mr-2 size-4" }), "Settings"] }), _jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuItem, { onClick: handleLogoutClick, color: "destructive", children: [_jsx(LogOut, { className: "mr-2 size-4" }), "Logout"] })] })] }));
+    const trigger = applySlot(cn(userMenuDropdownStyles.trigger, className), slotStyles?.trigger);
+    const avatar = applySlot(userMenuDropdownStyles.avatar, slotStyles?.avatar);
+    const avatarFallback = applySlot(userMenuDropdownStyles.avatarFallback, slotStyles?.avatarFallback);
+    const content = applySlot(userMenuDropdownStyles.content, slotStyles?.content);
+    const label = applySlot(userMenuDropdownStyles.label, slotStyles?.label);
+    const name = applySlot(userMenuDropdownStyles.name, slotStyles?.name);
+    const email = applySlot(userMenuDropdownStyles.email, slotStyles?.email);
+    const itemIcon = applySlot(userMenuDropdownStyles.itemIcon, slotStyles?.itemIcon);
+    return (_jsxs(DropdownMenu, { "data-kala-component": "user-menu-dropdown", ...(isOpen !== undefined && { open: isOpen }), ...(onOpenChange && { onOpenChange }), children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(Button, { variant: "ghost", ref: ref, className: trigger.className, style: trigger.style, "aria-label": "User menu", ...props, children: _jsxs(Avatar, { className: avatar.className, style: avatar.style, children: [user.avatar && (_jsx(AvatarImage, { src: user.avatar, alt: user.name ?? "User" })), _jsx(AvatarFallback, { className: avatarFallback.className, style: avatarFallback.style, children: initials })] }) }) }), _jsxs(DropdownMenuContent, { align: "end", className: content.className, style: content.style, children: [_jsx(DropdownMenuLabel, { children: _jsxs("div", { className: label.className, style: label.style, children: [user.name && (_jsx("p", { className: name.className, style: name.style, children: user.name })), user.email && (_jsx("p", { className: email.className, style: email.style, children: user.email }))] }) }), _jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuItem, { onClick: handleProfileClick, children: [_jsx(User, { className: itemIcon.className }), "Profile"] }), _jsxs(DropdownMenuItem, { onClick: handleSettingsClick, children: [_jsx(Settings, { className: itemIcon.className }), "Settings"] }), _jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuItem, { onClick: handleLogoutClick, color: "destructive", children: [_jsx(LogOut, { className: itemIcon.className }), "Logout"] })] })] }));
 }

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

@@ -0,0 +1,16 @@
+import type { SlotStyles } from "@kala-ui/react/lib/slot-styles";
+import type * as React from "react";
+export interface UserMenuDropdownProps extends Omit<React.ComponentProps<"button">, "color"> {
+    user: {
+        name?: string;
+        email?: string;
+        avatar?: string;
+    };
+    isOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    onLogout?: () => void;
+    baseUrl?: string;
+    className?: string;
+    /** Per-part overrides: trigger, avatar, avatarFallback, content, label, name, email, itemIcon. */
+    slotStyles?: SlotStyles;
+}

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

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

package/dist/config/app-shell.d.ts

@@ -0,0 +1,13 @@
+export declare const appShellStyles: {
+    base: string;
+    header: string;
+    headerBorder: string;
+    navbar: string;
+    navbarBorder: string;
+    aside: string;
+    asideBorder: string;
+    main: string;
+    footer: string;
+    footerBorder: string;
+    padding: Record<string, string>;
+};

package/dist/config/app-shell.js

@@ -0,0 +1,20 @@
+export const appShellStyles = {
+    base: "flex min-h-screen flex-col bg-background text-foreground",
+    header: "fixed top-0 left-0 right-0 z-50 flex items-center bg-background px-4",
+    headerBorder: "border-b",
+    navbar: "fixed left-0 z-40 flex flex-col bg-background transition-transform duration-300 ease-in-out",
+    navbarBorder: "border-r",
+    aside: "fixed right-0 z-40 flex flex-col bg-background transition-transform duration-300 ease-in-out",
+    asideBorder: "border-l",
+    main: "flex-1 transition-all duration-300 ease-in-out",
+    footer: "fixed bottom-0 left-0 right-0 z-50 flex items-center bg-background px-4",
+    footerBorder: "border-t",
+    padding: {
+        none: "p-0",
+        xs: "p-2",
+        sm: "p-3",
+        md: "p-4",
+        lg: "p-6",
+        xl: "p-8",
+    },
+};

package/dist/config/charts.d.ts

@@ -0,0 +1,23 @@
+export declare const chartSkeletonStyles: {
+    root: string;
+    frame: string;
+    frameInner: string;
+    frameFill: string;
+    legendRow: string;
+    legendItem: string;
+    legendDot: string;
+    legendLabel: string;
+    tableWrap: string;
+    tableHead: string;
+    tableRow: string;
+    tableCell: string;
+};
+export declare const chartStyles: {
+    root: string;
+    empty: string;
+    emptyIcon: string;
+    emptyText: string;
+    titleBlock: string;
+    title: string;
+    subtitle: string;
+};