@flikk/ui 1.0.0-beta.13 → 1.0.0-beta.15

package/dist/components/core/Calendar/Calendar.theme.js

@@ -5,8 +5,7 @@
 const calendarTheme = {
     baseStyle: "select-none w-full bg-white dark:bg-[var(--color-neutral-900)]",
     headerStyle: "flex items-center justify-between mb-4",
-    titleStyle: "text-lg font-semibold text-[var(--color-text-primary)] cursor-pointer hover:text-[var(--color-primary)] transition-colors " +
-        "dark:text-[var(--color-neutral-200)] dark:hover:text-[var(--color-primary-400)]",
+    titleStyle: "text-base font-semibold text-[var(--color-text-primary)] " + "",
     headerDropdownsStyle: "grid grid-cols-2 items-center gap-2 flex-1 justify-center mx-3",
     navButtonStyle: "inline-flex items-center justify-center size-8 rounded-[calc(var(--radius-base)*0.75)] border-0 bg-transparent " +
         "text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)] hover:bg-[var(--color-primary-50)] " +
@@ -18,8 +17,13 @@ const calendarTheme = {
     weekdaysStyle: "grid grid-cols-7 mb-2",
     weekdayStyle: "flex items-center justify-center h-8 text-sm font-medium text-[var(--color-text-muted)] " +
         "dark:text-[var(--color-neutral-500)]",
-    daysGridStyle: "grid grid-cols-7 gap-0.5",
-    dayButtonStyle: "relative flex items-center justify-center rounded-full border-0 bg-transparent font-medium cursor-pointer " +
+    daysGridStyle: "grid grid-cols-7 gap-y-0.5 gap-x-0",
+    rangeCellStyle: "bg-[var(--color-primary-50)]/70 " +
+        "data-[range-pos=start]:rounded-l-full " +
+        "data-[range-pos=end]:rounded-r-full " +
+        "data-[range-pos=single]:rounded-full " +
+        "dark:bg-[var(--color-primary-900)]/50",
+    dayButtonStyle: "relative z-10 flex items-center justify-center rounded-full border-0 bg-transparent font-medium cursor-pointer " +
         "transition-all duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary)] focus-visible:ring-offset-2 " +
         // Base text color
         "text-[var(--color-text-primary)] dark:text-[var(--color-neutral-200)] " +
@@ -37,11 +41,11 @@ const calendarTheme = {
         // Other month state
         "data-[other-month=true]:text-[var(--color-text-muted)] data-[other-month=true]:opacity-60 " +
         "dark:data-[other-month=true]:text-[var(--color-neutral-600)] " +
-        // Range mode states
+        // Range mode states (strip background handled by wrapper cell)
         "data-[range-start=true]:bg-[var(--color-primary)] data-[range-start=true]:text-[var(--color-primary-contrast)] " +
         "data-[range-end=true]:bg-[var(--color-primary)] data-[range-end=true]:text-[var(--color-primary-contrast)] " +
-        "data-[in-range=true]:bg-[var(--color-primary-50)]/70 data-[in-range=true]:text-[var(--color-text-primary)] " +
-        "dark:data-[in-range=true]:bg-[var(--color-primary-900)]/50 dark:data-[in-range=true]:text-[var(--color-neutral-200)] " +
+        "data-[in-range=true]:text-[var(--color-text-primary)] " +
+        "dark:data-[in-range=true]:text-[var(--color-neutral-200)] " +
         // Focus offset for dark mode
         "dark:focus-visible:ring-offset-[var(--color-neutral-900)]",
     dayButtonSizes: {

package/dist/components/core/Calendar/Calendar.types.d.ts

@@ -83,6 +83,8 @@ export interface CalendarProps extends Omit<React.HTMLAttributes<HTMLDivElement>
     onNavigatePrev?: (() => void) | null;
     /** Custom next navigation handler (null to hide right arrow) */
     onNavigateNext?: (() => void) | null;
+    /** Whether to show days from adjacent months (default: true) */
+    showOtherMonthDays?: boolean;
     /** Additional class name for the container */
     className?: string;
 }
@@ -119,6 +121,7 @@ export interface CalendarTheme {
     weekdaysStyle: string;
     weekdayStyle: string;
     daysGridStyle: string;
+    rangeCellStyle: string;
     dayButtonStyle: string;
     dayButtonSizes?: Record<CalendarSize, string>;
 }

package/dist/components/core/Calendar/CalendarMini/CalendarMini.js

@@ -195,7 +195,7 @@ const CalendarMini = React__default.forwardRef(({ selectedDate, currentMonth, on
     };
     const MonthRow = enableAnimations ? motion.div : "div";
     const DateItem = enableAnimations ? motion.button : "button";
-    return (jsxs("div", { ref: ref, className: cn(mergedTheme.baseStyle, className), role: "region", "aria-label": "Mini calendar", ...rest, children: [jsx(Button, { iconOnly: true, color: "neutral", variant: "ghost", className: "!flex-shrink !flex-grow-0 !w-fit self-stretch !h-auto !min-h-0 px-0.5", onClick: handlePrevMonth, "aria-label": "Previous month", children: jsx(ChevronLeftIcon, { className: "size-5 text-[var(--color-text-primary)]" }) }), jsxs("div", { className: "flex flex-col gap-1 relative", children: [jsxs("div", { className: "flex items-center gap-1", children: [jsx("div", { className: "flex flex-col relative overflow-hidden flex-1", style: {
+    return (jsxs("div", { ref: ref, className: cn(mergedTheme.baseStyle, className), role: "region", "aria-label": "Mini calendar", ...rest, children: [jsx(Button, { iconOnly: true, color: "neutral", variant: "soft", className: "!flex-shrink !flex-grow-0 !w-fit self-stretch !h-auto !min-h-0 px-0.5", onClick: handlePrevMonth, "aria-label": "Previous month", children: jsx(ChevronLeftIcon, { className: "size-5 text-[var(--color-text-primary)]" }) }), jsxs("div", { className: "flex flex-col gap-1 relative", children: [jsxs("div", { className: "flex items-center gap-1", children: [jsx("div", { className: "flex flex-col relative overflow-hidden flex-1", style: {
                                     maskImage: "linear-gradient(to right, transparent, black 16px, black calc(100% - 16px), transparent)",
                                     WebkitMaskImage: "linear-gradient(to right, transparent, black 16px, black calc(100% - 16px), transparent)",
                                 }, children: jsx("div", { ref: monthScrollRef, className: cn(mergedTheme.monthRowStyle), role: "tablist", "aria-label": "Month selection", children: jsx(AnimatePresence, { mode: "popLayout", initial: false, custom: direction, children: jsx(MonthRow, { custom: direction, ...(enableAnimations && {
@@ -243,7 +243,7 @@ const CalendarMini = React__default.forwardRef(({ selectedDate, currentMonth, on
                                             }), "aria-selected": isSelected, "aria-current": isToday ? "date" : undefined, "aria-disabled": disabled, type: "button", ...(enableAnimations && {
                                                 whileTap: !disabled ? { scale: 0.95 } : undefined,
                                             }), children: [jsx("div", { className: "text-base font-medium opacity-60", children: formatDayName(date) }), jsx("time", { dateTime: date.toISOString(), className: cn("font-semibold"), children: formatDateNumber(date) })] }, date.toISOString()));
-                                    }) }, `${startDate.getTime()}-dates`) }) }) })] }), jsx(Button, { iconOnly: true, color: "neutral", variant: "ghost", className: "!flex-shrink !flex-grow-0 !w-fit self-stretch !h-auto !min-h-0 px-0.5", onClick: handleNextMonth, "aria-label": "Next month", children: jsx(ChevronRightIcon, { className: "size-5 text-[var(--color-text-primary)]" }) })] }));
+                                    }) }, `${startDate.getTime()}-dates`) }) }) })] }), jsx(Button, { iconOnly: true, color: "neutral", variant: "soft", className: "!flex-shrink !flex-grow-0 !w-fit self-stretch !h-auto !min-h-0 px-0.5", onClick: handleNextMonth, "aria-label": "Next month", children: jsx(ChevronRightIcon, { className: "size-5 text-[var(--color-text-primary)]" }) })] }));
 });
 CalendarMini.displayName = "CalendarMini";
 

package/dist/components/core/Carousel/CarouselBody.js

@@ -42,7 +42,6 @@ const CarouselBody = React__default.forwardRef(({ className, children, ...props
                 if (!React__default.isValidElement(child))
                     return child;
                 return React__default.cloneElement(child, {
-                    ...child.props,
                     'aria-hidden': index !== currentIndex,
                 });
             }) }) }));

package/dist/components/core/CommandPalette/CommandItem.js

@@ -126,7 +126,7 @@ const CommandItem = ({ command, index, isHighlighted, contentStart, contentEnd,
         }
         return null;
     };
-    return (jsxs("div", { "data-command-index": index, "data-highlighted": isHighlighted, "data-disabled": command.disabled || false, className: cn(theme.commandItem, className), onClick: handleClick, onMouseEnter: handleMouseEnter, children: [finalContentStart && (jsx("div", { className: "flex-shrink-0", children: finalContentStart })), jsxs("div", { className: "flex-1 min-w-0", children: [jsx("div", { className: "text-base  truncate", children: command.label }), command.subtitle && (jsx("div", { className: "text-base opacity-70 truncate mt-0", children: command.subtitle }))] }), renderContentEnd()] }));
+    return (jsxs("div", { "data-command-index": index, "data-highlighted": isHighlighted, "data-disabled": command.disabled || false, className: cn(theme.commandItem, className), role: "option", "aria-selected": isHighlighted, "aria-disabled": command.disabled || false, onClick: handleClick, onMouseEnter: handleMouseEnter, children: [finalContentStart && (jsx("div", { className: "flex-shrink-0", children: finalContentStart })), jsxs("div", { className: "flex-1 min-w-0", children: [jsx("div", { className: "text-base  truncate", children: command.label }), command.subtitle && (jsx("div", { className: "text-base opacity-70 truncate mt-0", children: command.subtitle }))] }), renderContentEnd()] }));
 };
 
 export { CommandItem };

package/dist/components/core/CommandPalette/CommandPalette.js

@@ -6,6 +6,8 @@ import { cn } from '../../../utils/cn.js';
 import { MagnifyingGlassIcon } from '@heroicons/react/24/outline';
 import { CommandItem } from './CommandItem.js';
 import { Overlay } from '../../effects/Overlay/Overlay.js';
+import { ScrollArea } from '../ScrollArea/ScrollArea.js';
+import '../ScrollArea/smooth/SmoothScrollEngine.js';
 
 /**
  * Default filter function for commands
@@ -77,7 +79,7 @@ const groupCommandsByCategory = (commands) => {
  * />
  * ```
  */
-const CommandPalette = React__default.forwardRef(({ isOpen, onClose, commands = [], placeholder = "Type a command or search...", emptyMessage = "No results found.", maxHeight = "400px", className = "", overlayClassName = "", theme: themeOverrides, grouped = false, onSearchChange, filterFunction = defaultFilterFunction, closeOnOverlayClick = true, closeOnEsc = true, }, ref) => {
+const CommandPalette = React__default.forwardRef(({ isOpen, onClose, commands = [], placeholder = "Type a command or search...", emptyMessage = "No results found.", maxHeight = "400px", className = "", overlayClassName = "", theme: themeOverrides, grouped = false, onSearchChange, filterFunction = defaultFilterFunction, closeOnOverlayClick = true, closeOnEsc = true, footer, footerClassName, }, ref) => {
     // Merge theme with overrides
     const theme = useMemo(() => ({ ...commandPaletteTheme, ...(themeOverrides || {}) }), [themeOverrides]);
     // State
@@ -195,7 +197,7 @@ const CommandPalette = React__default.forwardRef(({ isOpen, onClose, commands =
     // Render commands list
     const renderCommandsList = () => {
         if (flatFilteredCommands.length === 0) {
-            return jsx("div", { className: theme.emptyState, children: emptyMessage });
+            return jsx("div", { className: theme.emptyState, "aria-live": "polite", children: emptyMessage });
         }
         // If grouped, render with group labels
         if (isGroupedCommands(displayCommands)) {
@@ -212,9 +214,9 @@ const CommandPalette = React__default.forwardRef(({ isOpen, onClose, commands =
     return (jsxs(Overlay, { ref: ref, isOpen: isOpen, onClose: onClose, closeOnOverlayClick: closeOnOverlayClick, closeOnEsc: closeOnEsc, position: "top", overlayClassName: overlayClassName, contentClassName: cn(theme.container, className), animations: {
             overlay: overlayAnimations,
             content: containerAnimations,
-        }, children: [jsx("div", { className: theme.searchWrapper, children: jsxs("div", { className: "flex items-center gap-3", children: [jsx(MagnifyingGlassIcon, { className: "w-5 h-5 text-[var(--color-text-muted)]", strokeWidth: 2 }), jsx("input", { ref: searchInputRef, type: "text", className: theme.searchInput, placeholder: placeholder, value: searchValue, onChange: handleSearchChange, autoComplete: "off", autoCorrect: "off", spellCheck: false })] }) }), jsx("div", { ref: listContainerRef, className: "overflow-y-auto overscroll-contain px-1", style: {
+        }, children: [jsx("div", { className: theme.searchWrapper, children: jsxs("div", { className: "flex items-center gap-3", children: [jsx(MagnifyingGlassIcon, { className: "w-5 h-5 text-[var(--color-text-muted)]", strokeWidth: 2 }), jsx("input", { ref: searchInputRef, type: "text", className: theme.searchInput, placeholder: placeholder, value: searchValue, onChange: handleSearchChange, autoComplete: "off", autoCorrect: "off", spellCheck: false, "aria-label": "Search commands" })] }) }), jsx(ScrollArea, { ref: listContainerRef, type: "hover", className: "overscroll-contain px-1", style: {
                     maxHeight: typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight,
-                }, children: renderCommandsList() })] }));
+                }, children: jsx("div", { role: "listbox", "aria-label": "Commands", children: renderCommandsList() }) }), footer && (jsx("div", { className: cn(theme.footer, footerClassName), children: footer }))] }));
 });
 CommandPalette.displayName = "CommandPalette";
 

package/dist/components/core/CommandPalette/CommandPalette.theme.js

@@ -25,6 +25,7 @@ const commandPaletteTheme = {
         "dark:data-[highlighted=true]:bg-[var(--color-primary-600)]",
     emptyState: "px-4 py-12 text-center text-base text-[var(--color-text-muted)] " +
         "dark:text-[var(--color-neutral-500)]",
+    footer: "border-t border-[var(--color-border)] px-4 py-2 text-sm text-[var(--color-text-muted)]font-medium",
 };
 
 export { commandPaletteTheme };

package/dist/components/core/CommandPalette/CommandPalette.types.d.ts

@@ -67,6 +67,10 @@ export interface CommandPaletteProps {
     closeOnOverlayClick?: boolean;
     /** Whether pressing Escape should close the palette (default: true) */
     closeOnEsc?: boolean;
+    /** Footer content rendered below the command list (e.g., keyboard hints) */
+    footer?: React.ReactNode;
+    /** Additional class name for the footer */
+    footerClassName?: string;
 }
 /**
  * Theme overrides for the CommandPalette component
@@ -86,4 +90,6 @@ export interface CommandPaletteThemeOverrides {
     commandItem?: string;
     /** Style for empty state */
     emptyState?: string;
+    /** Style for the footer area */
+    footer?: string;
 }

package/dist/components/core/ContextMenu/ContextMenu.js

@@ -39,11 +39,12 @@ const ContextMenuRoot = ({ children, className, onOpenChange, theme: themeOverri
     const handleOpenChange = useCallback((value) => {
         setIsOpen(value);
         onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(value);
-        // Get cursor position from trigger element when opening
+        // Get cursor position from trigger element data attributes when opening
         if (value && triggerRef.current) {
-            const storedPosition = triggerRef.current.__cursorPosition;
-            if (storedPosition) {
-                setCursorPosition(storedPosition);
+            const x = triggerRef.current.dataset.cursorX;
+            const y = triggerRef.current.dataset.cursorY;
+            if (x && y) {
+                setCursorPosition({ x: Number(x), y: Number(y) });
             }
         }
     }, [onOpenChange]);

package/dist/components/core/ContextMenu/ContextMenuTrigger.js

@@ -14,11 +14,10 @@ const ContextMenuTrigger = React__default.forwardRef(({ children, className, dis
         // Prevent default browser context menu
         e.preventDefault();
         e.stopPropagation();
-        // Store cursor position BEFORE opening menu
-        e.currentTarget.__cursorPosition = {
-            x: e.clientX,
-            y: e.clientY,
-        };
+        // Store cursor position on trigger element via data attributes
+        const target = e.currentTarget;
+        target.dataset.cursorX = String(e.clientX);
+        target.dataset.cursorY = String(e.clientY);
         // Now open the menu with position available
         onOpenChange(true);
     }, [disabled, onOpenChange]);
@@ -44,6 +43,6 @@ const ContextMenuTrigger = React__default.forwardRef(({ children, className, dis
         "data-disabled": disabled,
     });
 });
-ContextMenuTrigger.displayName = "ContextMenuTrigger";
+ContextMenuTrigger.displayName = "ContextMenu.Trigger";
 
 export { ContextMenuTrigger };

package/dist/components/core/Drawer/Drawer.d.ts

@@ -1,7 +1,7 @@
 import { DrawerProps, DrawerContextValue } from "./Drawer.types";
 export declare const useDrawerContext: () => DrawerContextValue;
 export declare const Drawer: {
-    ({ isOpen, onClose, title, subtitle, icon, position, size, closeOnOverlayClick, closeOnEsc, showCloseButton, children, className, theme: themeOverrides, scale, ...props }: DrawerProps): import("react/jsx-runtime").JSX.Element;
+    ({ isOpen, onClose, title, subtitle, icon, position, size, closeOnOverlayClick, closeOnEsc, showCloseButton, children, className, theme: themeOverrides, scale, closeOnBack, ...props }: DrawerProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 } & {
     Header: {

package/dist/components/core/Drawer/Drawer.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import React__default, { createContext, useId, useMemo, useContext } from 'react';
+import React__default, { createContext, useId, useMemo, useRef, useEffect, useContext } from 'react';
 import { cn } from '../../../utils/cn.js';
 import { useScaleBackground } from '../../../hooks/useScaleBackground.js';
 import { Overlay } from '../../effects/Overlay/Overlay.js';
@@ -11,6 +11,27 @@ import { DrawerSubtitle } from './DrawerSubtitle.js';
 import { DrawerBody } from './DrawerBody.js';
 import { DrawerFooter } from './DrawerFooter.js';
 
+/** Manages browser history so the back button closes the drawer instead of navigating. */
+function useCloseOnBack(isOpen, onClose, enabled) {
+    const closedByPopstate = useRef(false);
+    useEffect(() => {
+        if (!enabled || !isOpen)
+            return;
+        closedByPopstate.current = false;
+        history.pushState({ flikDrawer: true }, "");
+        const handlePopstate = () => {
+            closedByPopstate.current = true;
+            onClose();
+        };
+        window.addEventListener("popstate", handlePopstate);
+        return () => {
+            window.removeEventListener("popstate", handlePopstate);
+            if (!closedByPopstate.current) {
+                history.back();
+            }
+        };
+    }, [isOpen, onClose, enabled]);
+}
 // Create context for Drawer components
 const DrawerContext = createContext(undefined);
 const useDrawerContext = () => {
@@ -19,7 +40,9 @@ const useDrawerContext = () => {
         throw new Error("Drawer compound components must be used within <Drawer>");
     return ctx;
 };
-const DrawerRoot = ({ isOpen, onClose, title, subtitle, icon, position = "right", size = "md", closeOnOverlayClick = true, closeOnEsc = true, showCloseButton = true, children, className, theme: themeOverrides, scale = 0.94, ...props }) => {
+const DrawerRoot = ({ isOpen, onClose, title, subtitle, icon, position = "right", size = "md", closeOnOverlayClick = true, closeOnEsc = true, showCloseButton = true, children, className, theme: themeOverrides, scale = 0.94, closeOnBack = false, ...props }) => {
+    // Close drawer on browser back button
+    useCloseOnBack(isOpen, onClose, closeOnBack);
     // iOS-style scale background effect
     useScaleBackground({ isOpen, scale, position });
     // Generate unique IDs for ARIA linkage

package/dist/components/core/Drawer/Drawer.theme.js

@@ -11,8 +11,8 @@ const drawerTheme = {
     title: "text-lg font-semibold leading-6 text-[var(--color-text-primary)]",
     subtitle: "text-base text-[var(--color-text-secondary)] mt-0.5",
     body: "flex-1 overflow-y-auto p-4",
-    footer: "flex items-center justify-end gap-3 p-4 border-t border-[var(--color-border)] shrink-0 " +
-        "dark:border-[var(--color-border)]",
+    footer: "flex items-center justify-end gap-3 p-4 py-3 border-t border-[var(--color-border)] shrink-0 " +
+        "",
 };
 // Position variants with margin support
 const drawerPositionVariantsWithMargin = {

package/dist/components/core/Drawer/Drawer.types.d.ts

@@ -62,6 +62,12 @@ export interface DrawerProps extends Omit<React.HTMLAttributes<HTMLDivElement>,
      * @default 0.94
      */
     scale?: number;
+    /**
+     * When enabled, pressing the browser back button closes the drawer
+     * instead of navigating away. Useful for mobile-like UX.
+     * @default false
+     */
+    closeOnBack?: boolean;
 }
 export interface DrawerHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
     children: React.ReactNode;

package/dist/components/core/Drawer/DrawerHeader.js

@@ -8,7 +8,7 @@ import { XMarkIcon } from '@heroicons/react/24/outline';
 const DrawerHeader = ({ children, icon, showCloseButton, className, ...props }) => {
     const { onClose, showCloseButton: contextShowCloseButton, theme, } = useDrawerContext();
     const shouldShowCloseButton = showCloseButton !== null && showCloseButton !== void 0 ? showCloseButton : contextShowCloseButton;
-    return (jsxs("div", { className: cn(theme.header, className), ...props, children: [jsxs("div", { className: cn(theme.headerContent), children: [icon && (jsx("div", { className: "flex-shrink-0 text-[var(--color-text-secondary)]", children: icon })), jsx("div", { className: "flex-1 min-w-0", children: children })] }), shouldShowCloseButton && (jsx(Button, { color: "neutral", variant: "ghost", iconOnly: true, size: "sm", onClick: onClose, "aria-label": "Close drawer", className: "rounded-full shrink-0", children: jsx(XMarkIcon, { className: "size-5" }) }))] }));
+    return (jsxs("div", { className: cn(theme.header, className), ...props, children: [jsxs("div", { className: cn(theme.headerContent), children: [icon && (jsx("div", { className: "flex-shrink-0 text-[var(--color-text-secondary)]", children: icon })), jsx("div", { className: "flex-1 min-w-0", children: children })] }), shouldShowCloseButton && (jsx(Button, { color: "neutral", variant: "soft", iconOnly: true, size: "sm", onClick: onClose, "aria-label": "Close drawer", className: "rounded-full shrink-0", children: jsx(XMarkIcon, { className: "size-5" }) }))] }));
 };
 DrawerHeader.displayName = "Drawer.Header";
 

package/dist/components/core/Dropdown/Dropdown.d.ts

@@ -5,7 +5,7 @@ export declare const Dropdown: {
     displayName: string;
 } & {
     Trigger: {
-        ({ children, className }: import("./Dropdown.types").DropdownTriggerProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+        ({ children, className }: import("./Dropdown.types").DropdownTriggerProps): React.ReactElement<import("./DropdownTrigger").TriggerChildProps, string | React.JSXElementConstructor<any>>;
         displayName: string;
     };
     Menu: React.ForwardRefExoticComponent<import("./Dropdown.types").DropdownMenuProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/core/Dropdown/Dropdown.js

@@ -1,5 +1,5 @@
 import { jsx } from 'react/jsx-runtime';
-import { useState, useRef, useCallback } from 'react';
+import { useState, useRef, useId, useCallback } from 'react';
 import { cn } from '../../../utils/cn.js';
 import { DropdownContext } from './DropdownContext.js';
 import { DropdownTrigger } from './DropdownTrigger.js';
@@ -41,6 +41,9 @@ const DropdownRoot = ({ children, className, isOpen: controlledIsOpen, defaultIs
     // Refs for positioning
     const triggerRef = useRef(null);
     const menuRef = useRef(null);
+    // Generate a stable menu ID for aria-controls
+    const generatedMenuId = useId();
+    const menuId = `dropdown-menu-${generatedMenuId}`;
     // Handle open state changes
     const handleOpenChange = useCallback((value) => {
         if (!isControlledOpen) {
@@ -68,6 +71,7 @@ const DropdownRoot = ({ children, className, isOpen: controlledIsOpen, defaultIs
         onOpenChange: handleOpenChange,
         triggerRef,
         menuRef,
+        menuId,
         placement,
         offset,
         closeOnSelect,

package/dist/components/core/Dropdown/Dropdown.types.d.ts

@@ -7,6 +7,7 @@ export interface DropdownContextValue {
     onOpenChange: (isOpen: boolean) => void;
     triggerRef: React.RefObject<HTMLElement | null>;
     menuRef: React.RefObject<HTMLDivElement | null>;
+    menuId: string;
     placement: DropdownPlacement;
     offset: number;
     closeOnSelect: boolean;

package/dist/components/core/Dropdown/DropdownItem.js

@@ -69,6 +69,6 @@ const DropdownItem = React__default.forwardRef(({ itemKey, children, className,
             focusStyle: theme.itemFocusStyle,
         }, ...props, children: children }));
 });
-DropdownItem.displayName = "DropdownItem";
+DropdownItem.displayName = "Dropdown.Item";
 
 export { DropdownItem };

package/dist/components/core/Dropdown/DropdownMenu.js

@@ -41,7 +41,7 @@ const useDarkMode = () => {
  * DropdownMenu component - renders the menu with keyboard navigation
  */
 const DropdownMenu = React__default.forwardRef(({ children, className, animation = true, portal = true, horizontal = false, "aria-label": ariaLabel, ...props }, ref) => {
-    const { isOpen, onOpenChange, triggerRef, menuRef, placement, offset, theme, } = useDropdownContext();
+    const { isOpen, onOpenChange, triggerRef, menuRef, menuId, placement, offset, theme, } = useDropdownContext();
     // Detect dark mode for portal content
     const isDarkMode = useDarkMode();
     const isClient = useIsClient();
@@ -54,7 +54,7 @@ const DropdownMenu = React__default.forwardRef(({ children, className, animation
     const { position, cssVariables, contentRef: portalContentRef, } = useSelectPortal({
         triggerRef,
         isOpen: isOpen || false,
-        placement: placement,
+        placement,
         offset: offset || 4,
         autoWidth: false,
         stickyTracking: true,
@@ -208,7 +208,7 @@ const DropdownMenu = React__default.forwardRef(({ children, className, animation
                 ...cssVariables,
                 top: `${position.top}px`,
                 left: `${position.left}px`,
-            }, role: "menu", "aria-label": ariaLabel || "Menu", "aria-orientation": horizontal ? "horizontal" : "vertical", tabIndex: -1, onKeyDown: handleKeyDown, variants: shouldReduceMotion || !animation ? {} : menuVariants, initial: shouldReduceMotion || !animation ? undefined : "hidden", animate: shouldReduceMotion || !animation ? undefined : "visible", exit: shouldReduceMotion || !animation ? undefined : "exit", transition: shouldReduceMotion || !animation
+            }, id: menuId, role: "menu", "aria-label": ariaLabel || "Menu", "aria-orientation": horizontal ? "horizontal" : "vertical", tabIndex: -1, onKeyDown: handleKeyDown, variants: shouldReduceMotion || !animation ? {} : menuVariants, initial: shouldReduceMotion || !animation ? undefined : "hidden", animate: shouldReduceMotion || !animation ? undefined : "visible", exit: shouldReduceMotion || !animation ? undefined : "exit", transition: shouldReduceMotion || !animation
                 ? { duration: 0 }
                 : {
                     type: "spring",
@@ -221,6 +221,6 @@ const DropdownMenu = React__default.forwardRef(({ children, className, animation
     }
     return menuContent;
 });
-DropdownMenu.displayName = "DropdownMenu";
+DropdownMenu.displayName = "Dropdown.Menu";
 
 export { DropdownMenu };

package/dist/components/core/Dropdown/DropdownSection.js

@@ -12,6 +12,6 @@ const DropdownSection = React__default.forwardRef(({ children, className, title,
                         ? jsx("div", { className: theme.sectionTitleStyle, role: "presentation", children: title })
                         : title), children] })] }));
 });
-DropdownSection.displayName = "DropdownSection";
+DropdownSection.displayName = "Dropdown.Section";
 
 export { DropdownSection };

package/dist/components/core/Dropdown/DropdownSeparator.js

@@ -10,6 +10,6 @@ const DropdownSeparator = React__default.forwardRef(({ className, ...props }, re
     const { theme } = useDropdownContext();
     return (jsx("div", { ref: ref, role: "separator", className: cn(theme.separatorStyle, className), ...props }));
 });
-DropdownSeparator.displayName = "DropdownSeparator";
+DropdownSeparator.displayName = "Dropdown.Separator";
 
 export { DropdownSeparator };

package/dist/components/core/Dropdown/DropdownTrigger.d.ts

@@ -1,9 +1,14 @@
 import React from "react";
 import { DropdownTriggerProps } from "./Dropdown.types";
+export interface TriggerChildProps {
+    className?: string;
+    onClick?: (e: React.MouseEvent) => void;
+    ref?: React.Ref<HTMLElement>;
+}
 /**
  * DropdownTrigger component - wraps the trigger element
  */
 export declare const DropdownTrigger: {
-    ({ children, className }: DropdownTriggerProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+    ({ children, className }: DropdownTriggerProps): React.ReactElement<TriggerChildProps, string | React.JSXElementConstructor<any>>;
     displayName: string;
 };

package/dist/components/core/Dropdown/DropdownTrigger.js

@@ -6,16 +6,17 @@ import { useDropdownContext } from './DropdownContext.js';
  */
 const DropdownTrigger = ({ children, className }) => {
     var _a;
-    const { isOpen, onOpenChange, triggerRef } = useDropdownContext();
+    const { isOpen, onOpenChange, triggerRef, menuId } = useDropdownContext();
     const handleClick = useCallback(() => {
         onOpenChange(!isOpen);
     }, [isOpen, onOpenChange]);
+    const childElement = children;
     // Clone the child element and add our props
-    const trigger = React__default.cloneElement(children, {
+    const trigger = React__default.cloneElement(childElement, {
         ref: (el) => {
             triggerRef.current = el;
             // Preserve any existing ref from the child
-            const childRef = children.ref;
+            const childRef = childElement.ref;
             if (typeof childRef === "function") {
                 childRef(el);
             }
@@ -24,21 +25,22 @@ const DropdownTrigger = ({ children, className }) => {
             }
         },
         onClick: (e) => {
+            var _a;
             // Call our handler
             handleClick();
             // Preserve any existing onClick from the child
-            const childProps = children.props;
-            if (childProps === null || childProps === void 0 ? void 0 : childProps.onClick) {
-                childProps.onClick(e);
+            if ((_a = childElement.props) === null || _a === void 0 ? void 0 : _a.onClick) {
+                childElement.props.onClick(e);
             }
         },
         "aria-expanded": isOpen,
         "aria-haspopup": "menu",
+        "aria-controls": isOpen ? menuId : undefined,
         "data-state": isOpen ? "open" : "closed",
-        className: className || ((_a = children.props) === null || _a === void 0 ? void 0 : _a.className),
+        className: className || ((_a = childElement.props) === null || _a === void 0 ? void 0 : _a.className),
     });
     return trigger;
 };
-DropdownTrigger.displayName = "DropdownTrigger";
+DropdownTrigger.displayName = "Dropdown.Trigger";
 
 export { DropdownTrigger };

package/dist/components/core/Kbd/Kbd.theme.js

@@ -2,10 +2,10 @@
  * Default theme configuration for Kbd component
  */
 const kbdTheme = {
-    baseStyle: 'inline-flex items-center justify-center font-sans font-medium rounded-[calc(var(--radius-base)*0.75)]  bg-neutral-100 border border-[var(--color-border)] text-[var(--color-text-secondary)] glass-effect',
+    baseStyle: 'inline-flex items-center justify-center leading-none font-sans font-medium rounded-[calc(var(--radius-base)*0.75)] bg-[var(--color-background-secondary)] border border-[var(--color-border)] text-[var(--color-text-secondary)] glass-effect',
     sizes: {
-        sm: 'text-sm px-1 py-0.5 min-w-[1.25rem]',
-        md: 'text-base px-1.5 py-0.5 min-w-[1.5rem]',
+        sm: 'text-xs px-1 min-w-5 h-5',
+        md: 'text-sm px-1.5 min-w-6 h-6',
     },
     separatorStyle: 'text-[var(--color-text-muted)] text-sm',
 };

package/dist/components/core/Link/Link.js

@@ -4,7 +4,9 @@ import { useReducedMotion, motion } from 'motion/react';
 import { buttonTheme } from '../Button/Button.theme.js';
 import { cn } from '../../../utils/cn.js';
 
-const Link = React__default.forwardRef(({ children, className = "", size = "inherit", disabled = false, href, ...props }, ref) => {
+const Link = React__default.forwardRef(({ children, className = "", size = "inherit", disabled = false, href, 
+// Destructure motion-conflicting props to avoid type issues
+onAnimationStart: _onAnimationStart, onAnimationEnd: _onAnimationEnd, onDrag: _onDrag, onDragStart: _onDragStart, onDragEnd: _onDragEnd, ...props }, ref) => {
     const shouldReduceMotion = useReducedMotion();
     const color = "primary"; // Default to primary, can be overridden by className
     // A link is essentially a button with variant="link"
@@ -33,7 +35,7 @@ const Link = React__default.forwardRef(({ children, className = "", size = "inhe
         }, [shouldReduceMotion]);
     return (jsx(motion.a, { ref: ref, href: disabled ? undefined : href, className: cn(buttonTheme.baseStyle, themeClasses.colorClasses, themeClasses.variantClasses, themeClasses.sizeClasses, themeClasses.stateClasses, 
         // Special case for link variant to have an underline
-        "underline underline-offset-4 rounded-none", className), "data-color": color, "data-variant": resolvedVariant, "data-size": size, "aria-disabled": disabled || undefined, ...(disabled ? {} : animationProps), ...props, children: children }));
+        "underline underline-offset-4 rounded-none font-semibold", className), "data-color": color, "data-variant": resolvedVariant, "data-size": size, "aria-disabled": disabled || undefined, ...(disabled ? {} : animationProps), ...props, children: children }));
 });
 Link.displayName = "Link";
 

package/dist/components/core/Message/Message.d.ts

@@ -6,4 +6,13 @@ export declare const Message: React.ForwardRefExoticComponent<MessageProps & Rea
     Actions: React.ForwardRefExoticComponent<import("./MessageActions").MessageActionsProps & React.RefAttributes<HTMLDivElement>>;
     Timestamp: React.ForwardRefExoticComponent<import("./MessageTimestamp").MessageTimestampProps & React.RefAttributes<HTMLDivElement>>;
     List: React.ForwardRefExoticComponent<import("./MessageList.types").MessageListProps & React.RefAttributes<import("..").ScrollAreaRef>>;
+    Status: React.FC<import("./MessageStatusIndicator").MessageStatusIndicatorProps>;
+    SenderName: React.FC<import("./MessageSenderName").MessageSenderNameProps>;
+    File: React.FC<import("./MessageFile").MessageFileProps>;
+    Image: React.FC<import("./MessageImage").MessageImageProps>;
+    Audio: React.FC<import("./MessageAudio").MessageAudioProps>;
+    Link: React.FC<import("./MessageLink").MessageLinkProps>;
+    Reply: React.FC<import("./MessageReply").MessageReplyProps>;
+    Reactions: React.FC<import("./MessageReactions").MessageReactionsProps>;
+    DateDivider: React.FC<import("./MessageDateDivider").MessageDateDividerProps>;
 };