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

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-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-comp": "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, { 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-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] })] })] }) })] }));
+    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-skeleton.js

@@ -19,5 +19,5 @@ import { Skeleton } from "@kala-ui/react/skeleton";
  * ```
  */
 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" })] }))] }) }))] }));
+    return (_jsxs("aside", { "data-kala-component": "sidebar-skeleton", "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.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))
@@ -65,5 +59,5 @@ export function Sidebar({ logo, navSections = [], pathname = "", isOpen = true,
     // 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 }))] }));
+    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-kala-component": "sidebar", role: "dialog", "aria-modal": "true", "aria-label": "Sidebar", className: shellClassName, ...props, children: sidebarContent })) : (_jsx("aside", { ref: shellRef, "data-kala-component": "sidebar", className: shellClassName, ...props, children: sidebarContent }))] }));
 }

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, { 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 })] }));
+    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/social-login-buttons/social-login-buttons.js

@@ -14,5 +14,5 @@ const defaultProviders = [
     "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))) })] }));
+    return (_jsxs("div", { "data-kala-component": "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/sparkline-chart.js

@@ -130,5 +130,5 @@ export function SparklineChart({ data, type = "line", color, width = "100%", hei
             data: data,
         },
     ];
-    return (_jsx("div", { className: cn("sparkline-chart", className), children: _jsx(Chart, { options: options, series: series, type: type, height: height, width: width }) }));
+    return (_jsx("div", { "data-kala-component": "sparkline-chart", className: cn("sparkline-chart", className), children: _jsx(Chart, { options: options, series: series, type: type, height: height, width: width }) }));
 }

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, { ...(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;
+};

package/dist/config/charts.js

@@ -0,0 +1,23 @@
+export const chartSkeletonStyles = {
+    root: "w-full space-y-4",
+    frame: "w-full rounded-lg border bg-card kala-surface-card",
+    frameInner: "flex items-center justify-center h-full",
+    frameFill: "h-full w-full",
+    legendRow: "flex gap-4 justify-center mt-4",
+    legendItem: "flex items-center gap-2",
+    legendDot: "h-3 w-3 rounded-full",
+    legendLabel: "h-4 w-16",
+    tableWrap: "mt-6",
+    tableHead: "h-4 w-24",
+    tableRow: "border-0",
+    tableCell: "h-4 w-20",
+};
+export const chartStyles = {
+    root: "w-full",
+    empty: "w-full flex flex-col items-center justify-center text-center rounded-lg border bg-card text-muted-foreground",
+    emptyIcon: "mb-3 h-10 w-10 opacity-40",
+    emptyText: "text-sm",
+    titleBlock: "mb-1.5 text-left",
+    title: "text-lg font-semibold text-foreground",
+    subtitle: "text-sm text-muted-foreground",
+};

package/dist/config/footer.d.ts

@@ -0,0 +1,16 @@
+export declare const footerStyles: {
+    root: string;
+    inner: string;
+    centeredContent: string;
+    grid: string;
+    sectionTitle: string;
+    sectionList: string;
+    sectionLink: string;
+    customContent: string;
+    bottomRow: string;
+    bottomRowSide: string;
+    bottomRowCentered: string;
+    copyright: string;
+    socialList: string;
+    socialLink: string;
+};

package/dist/config/footer.js

@@ -0,0 +1,16 @@
+export const footerStyles = {
+    root: "w-full bg-muted text-muted-foreground border-t",
+    inner: "container mx-auto px-4 py-8 md:py-12",
+    centeredContent: "mb-12 flex flex-col items-center text-center",
+    grid: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-8",
+    sectionTitle: "text-foreground font-semibold text-sm uppercase tracking-wider mb-4",
+    sectionList: "space-y-2",
+    sectionLink: "text-muted-foreground hover:text-primary transition-colors text-sm",
+    customContent: "md:col-span-2 lg:col-span-1",
+    bottomRow: "border-t pt-8 flex flex-col gap-4",
+    bottomRowSide: "md:flex-row md:justify-between md:items-center",
+    bottomRowCentered: "items-center",
+    copyright: "text-sm text-muted-foreground order-2 md:order-1",
+    socialList: "flex items-center gap-4 order-1 md:order-2",
+    socialLink: "text-muted-foreground hover:text-primary transition-colors",
+};