@flikk/ui 1.0.0-beta.2 → 1.0.0-beta.21

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

@@ -1,7 +1,7 @@
-import { HTMLAttributes } from 'react';
-import { CalendarEventThemeOverrides } from './CalendarEvent.theme';
-import { CalendarEvent as CalendarEventType, GridConfig, EventPosition } from '../../../../utils';
-export type CalendarEventVariant = 'daily' | 'weekly' | 'monthly';
+import { HTMLAttributes } from "react";
+import { CalendarEventThemeOverrides } from "./CalendarEvent.theme";
+import { CalendarEvent as CalendarEventType, GridConfig, EventPosition } from "../../../../utils";
+export type CalendarEventVariant = "daily" | "weekly" | "monthly";
 export interface CalendarEventProps extends HTMLAttributes<HTMLDivElement> {
     variant?: CalendarEventVariant;
     event: CalendarEventType & {
@@ -9,7 +9,6 @@ export interface CalendarEventProps extends HTMLAttributes<HTMLDivElement> {
         attendees?: Array<{
             name: string;
             src: string;
-            alt: string;
             showTooltip?: boolean;
         }>;
     };
@@ -20,5 +19,5 @@ export interface CalendarEventProps extends HTMLAttributes<HTMLDivElement> {
     gridInterval?: number;
     startOffset?: number;
     theme?: CalendarEventThemeOverrides;
-    onEventClick?: (eventData: CalendarEventProps['event']) => void;
+    onEventClick?: (eventData: CalendarEventProps["event"]) => void;
 }

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 && {
@@ -242,8 +242,8 @@ const CalendarMini = React__default.forwardRef(({ selectedDate, currentMonth, on
                                                 day: "numeric",
                                             }), "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-sm 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)]" }) })] }));
+                                            }), 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: "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/Card/Card.d.ts

@@ -1,8 +1,8 @@
 import { CardComponent } from './Card.types';
 import { CardHeader } from './CardHeader';
 import { CardTitle } from './CardTitle';
-import { CardDescription } from './CardDescription';
-import { CardContent } from './CardContent';
+import { CardSubtitle } from './CardSubtitle';
+import { CardBody } from './CardBody';
 import { CardFooter } from './CardFooter';
-export { CardHeader, CardTitle, CardDescription, CardContent, CardFooter };
+export { CardHeader, CardTitle, CardSubtitle, CardBody, CardFooter };
 export declare const Card: CardComponent;

package/dist/components/core/Card/Card.js

@@ -1,29 +1,28 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx } from 'react/jsx-runtime';
 import React__default, { useMemo } from 'react';
 import { cn } from '../../../utils/cn.js';
 import { cardTheme } from './Card.theme.js';
 import { CardHeader } from './CardHeader.js';
 import { CardTitle } from './CardTitle.js';
-import { CardDescription } from './CardDescription.js';
-import { CardContent } from './CardContent.js';
+import { CardSubtitle } from './CardSubtitle.js';
+import { CardBody } from './CardBody.js';
 import { CardFooter } from './CardFooter.js';
 
-const CardRoot = React__default.forwardRef(({ children, className, theme: customTheme = {}, title, description, footer, darkMode = false, ...props }, ref) => {
+const CardRoot = React__default.forwardRef(({ children, className, theme: customTheme = {}, darkMode = false, ...props }, ref) => {
     const theme = useMemo(() => ({
         ...cardTheme,
         ...customTheme,
     }), [customTheme]);
-    const hasHeader = title || description;
-    return (jsxs("div", { ref: ref, className: cn(theme.baseStyle, darkMode && "dark", className), ...props, children: [hasHeader && (jsxs("div", { className: theme.headerStyle, children: [title && jsx("div", { className: theme.titleStyle, children: title }), description && jsx("div", { className: theme.descriptionStyle, children: description })] })), hasHeader ? (jsx("div", { className: theme.contentStyle, children: children })) : (children), footer && jsx("div", { className: theme.footerStyle, children: footer })] }));
+    return (jsx("div", { ref: ref, className: cn(theme.baseStyle, darkMode && "dark", className), ...props, children: children }));
 });
 CardRoot.displayName = 'Card';
 // Create compound component with proper typing
 const Card = Object.assign(CardRoot, {
     Header: CardHeader,
     Title: CardTitle,
-    Description: CardDescription,
-    Content: CardContent,
+    Subtitle: CardSubtitle,
+    Body: CardBody,
     Footer: CardFooter,
 });
 
-export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle };
+export { Card, CardBody, CardFooter, CardHeader, CardSubtitle, CardTitle };

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

@@ -1,10 +1,10 @@
 const cardTheme = {
     baseStyle: "rounded-[var(--card-radius)] overflow-hidden bg-white border border-[var(--color-border)] shadow-xs dark:bg-[var(--color-background-secondary)]",
-    headerStyle: "flex flex-col space-y-1.5 p-6",
-    titleStyle: "text-base font-semibold leading-none text-[var(--color-text-primary)]",
-    descriptionStyle: "text-sm text-[var(--color-text-muted)]",
-    contentStyle: "p-6 pt-0",
-    footerStyle: "flex items-center p-6 pt-0",
+    headerStyle: "flex flex-col p-6",
+    titleStyle: "text-lg font-semibold leading-none text-[var(--color-text-primary)]",
+    subtitleStyle: "text-base text-[var(--color-text-muted)] mt-1.5",
+    bodyStyle: "p-6 pt-0 first:pt-6",
+    footerStyle: "flex items-center p-6 pt-0 first:pt-6",
 };
 
 export { cardTheme };

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

@@ -3,19 +3,19 @@ export interface CardTheme {
     baseStyle: string;
     headerStyle: string;
     titleStyle: string;
-    descriptionStyle: string;
-    contentStyle: string;
+    subtitleStyle: string;
+    bodyStyle: string;
     footerStyle: string;
 }
 export interface CardThemeOverrides {
     baseStyle?: string;
     headerStyle?: string;
     titleStyle?: string;
-    descriptionStyle?: string;
-    contentStyle?: string;
+    subtitleStyle?: string;
+    bodyStyle?: string;
     footerStyle?: string;
 }
-export interface CardProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+export interface CardProps extends HTMLAttributes<HTMLDivElement> {
     /**
      * The content to be displayed inside the card
      */
@@ -28,21 +28,6 @@ export interface CardProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'>
      * Component-level theme overrides
      */
     theme?: CardThemeOverrides;
-    /**
-     * Card title - auto-generates header when provided
-     * Use this for simple cards instead of Card.Header/Card.Title
-     */
-    title?: ReactNode;
-    /**
-     * Card description - displayed below title in auto-generated header
-     * Use this for simple cards instead of Card.Header/Card.Description
-     */
-    description?: ReactNode;
-    /**
-     * Card footer content - auto-generates footer when provided
-     * Use this for simple cards instead of Card.Footer
-     */
-    footer?: ReactNode;
     /**
      * Force dark mode styling for the component. Use when placing the component
      * on a dark background while the page is in light mode. This applies the
@@ -54,28 +39,23 @@ export interface CardProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'>
 }
 export interface CardComponent extends ForwardRefExoticComponent<CardProps & RefAttributes<HTMLDivElement>> {
     Header: ForwardRefExoticComponent<CardHeaderProps & RefAttributes<HTMLDivElement>>;
-    Title: ForwardRefExoticComponent<CardTitleProps & RefAttributes<HTMLHeadingElement>>;
-    Description: ForwardRefExoticComponent<CardDescriptionProps & RefAttributes<HTMLParagraphElement>>;
-    Content: ForwardRefExoticComponent<CardContentProps & RefAttributes<HTMLDivElement>>;
+    Title: ForwardRefExoticComponent<CardTitleProps & RefAttributes<HTMLDivElement>>;
+    Subtitle: ForwardRefExoticComponent<CardSubtitleProps & RefAttributes<HTMLDivElement>>;
+    Body: ForwardRefExoticComponent<CardBodyProps & RefAttributes<HTMLDivElement>>;
     Footer: ForwardRefExoticComponent<CardFooterProps & RefAttributes<HTMLDivElement>>;
 }
 export interface CardHeaderProps extends HTMLAttributes<HTMLDivElement> {
-    children: ReactNode;
     className?: string;
 }
-export interface CardContentProps extends HTMLAttributes<HTMLDivElement> {
-    children: ReactNode;
+export interface CardBodyProps extends HTMLAttributes<HTMLDivElement> {
     className?: string;
 }
 export interface CardFooterProps extends HTMLAttributes<HTMLDivElement> {
-    children: ReactNode;
     className?: string;
 }
-export interface CardTitleProps extends HTMLAttributes<HTMLHeadingElement> {
-    children: ReactNode;
+export interface CardTitleProps extends HTMLAttributes<HTMLDivElement> {
     className?: string;
 }
-export interface CardDescriptionProps extends HTMLAttributes<HTMLParagraphElement> {
-    children: ReactNode;
+export interface CardSubtitleProps extends HTMLAttributes<HTMLDivElement> {
     className?: string;
 }

package/dist/components/core/Card/CardBody.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { CardBodyProps } from './Card.types';
+export declare const CardBody: React.ForwardRefExoticComponent<CardBodyProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/core/Card/CardBody.js

@@ -0,0 +1,11 @@
+import { jsx } from 'react/jsx-runtime';
+import React__default from 'react';
+import { cn } from '../../../utils/cn.js';
+import { cardTheme } from './Card.theme.js';
+
+const CardBody = React__default.forwardRef(({ children, className, ...props }, ref) => {
+    return (jsx("div", { ref: ref, className: cn(cardTheme.bodyStyle, className), ...props, children: children }));
+});
+CardBody.displayName = 'Card.Body';
+
+export { CardBody };

package/dist/components/core/Card/CardSubtitle.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { CardSubtitleProps } from './Card.types';
+export declare const CardSubtitle: React.ForwardRefExoticComponent<CardSubtitleProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/core/Card/CardSubtitle.js

@@ -0,0 +1,11 @@
+import { jsx } from 'react/jsx-runtime';
+import React__default from 'react';
+import { cn } from '../../../utils/cn.js';
+import { cardTheme } from './Card.theme.js';
+
+const CardSubtitle = React__default.forwardRef(({ children, className, ...props }, ref) => {
+    return (jsx("div", { ref: ref, className: cn(cardTheme.subtitleStyle, className), ...props, children: children }));
+});
+CardSubtitle.displayName = 'CardSubtitle';
+
+export { CardSubtitle };

package/dist/components/core/Card/CardTitle.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
 import { CardTitleProps } from './Card.types';
-export declare const CardTitle: React.ForwardRefExoticComponent<CardTitleProps & React.RefAttributes<HTMLHeadingElement>>;
+export declare const CardTitle: React.ForwardRefExoticComponent<CardTitleProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/core/Card/index.d.ts

@@ -1,2 +1,2 @@
-export { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from './Card';
-export type { CardProps, CardHeaderProps, CardTitleProps, CardDescriptionProps, CardContentProps, CardFooterProps, CardTheme, CardThemeOverrides } from './Card.types';
+export { Card, CardHeader, CardTitle, CardSubtitle, CardBody, CardFooter } from './Card';
+export type { CardProps, CardHeaderProps, CardTitleProps, CardSubtitleProps, CardBodyProps, CardFooterProps, CardTheme, CardThemeOverrides } from './Card.types';

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

@@ -3,18 +3,18 @@ import React__default, { useState, useEffect, useCallback, useMemo } from 'react
 import { cn } from '../../../utils/cn.js';
 import { carouselTheme } from './Carousel.theme.js';
 import { CarouselContext } from './CarouselContext.js';
-import { CarouselContent } from './CarouselContent.js';
+import { CarouselBody } from './CarouselBody.js';
 import { CarouselItem } from './CarouselItem.js';
 import { CarouselPrevious } from './CarouselPrevious.js';
 import { CarouselNext } from './CarouselNext.js';
 
 const CarouselRoot = React__default.forwardRef(({ orientation = 'horizontal', opts = {}, showControls = false, defaultIndex = 0, onSlideChange, className, children, ...rest }, ref) => {
     const { align = 'start', loop = false, slidesToScroll = 1, draggable = true, dragThreshold = 0.1, } = opts;
-    // Count total slides by looking for CarouselContent and its CarouselItem children
+    // Count total slides by looking for CarouselBody and its CarouselItem children
     const totalSlides = React__default.useMemo(() => {
         let count = 0;
         React__default.Children.forEach(children, (child) => {
-            if (React__default.isValidElement(child) && child.type === CarouselContent) {
+            if (React__default.isValidElement(child) && child.type === CarouselBody) {
                 const contentProps = child.props;
                 count = React__default.Children.count(contentProps.children);
             }
@@ -73,7 +73,7 @@ const CarouselRoot = React__default.forwardRef(({ orientation = 'horizontal', op
 CarouselRoot.displayName = 'Carousel';
 // Create compound component with sub-components
 const Carousel = Object.assign(CarouselRoot, {
-    Content: CarouselContent,
+    Body: CarouselBody,
     Item: CarouselItem,
     Previous: CarouselPrevious,
     Next: CarouselNext,

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

@@ -67,13 +67,13 @@ export interface CarouselProps extends HTMLAttributes<HTMLDivElement> {
      */
     className?: string;
     /**
-     * Children components (CarouselContent, CarouselPrevious, CarouselNext)
+     * Children components (CarouselBody, CarouselPrevious, CarouselNext)
      */
     children?: ReactNode;
 }
-export interface CarouselContentProps extends HTMLAttributes<HTMLDivElement> {
+export interface CarouselBodyProps extends HTMLAttributes<HTMLDivElement> {
     /**
-     * Custom class name for the content container
+     * Custom class name for the body container
      */
     className?: string;
     /**
@@ -106,7 +106,7 @@ export interface CarouselControlProps extends HTMLAttributes<HTMLButtonElement>
     'aria-label'?: string;
 }
 export interface CarouselComponent extends ForwardRefExoticComponent<CarouselProps & RefAttributes<HTMLDivElement>> {
-    Content: ForwardRefExoticComponent<CarouselContentProps & RefAttributes<HTMLDivElement>>;
+    Body: ForwardRefExoticComponent<CarouselBodyProps & RefAttributes<HTMLDivElement>>;
     Item: ForwardRefExoticComponent<CarouselItemProps & RefAttributes<HTMLDivElement>>;
     Previous: ForwardRefExoticComponent<CarouselControlProps & RefAttributes<HTMLButtonElement>>;
     Next: ForwardRefExoticComponent<CarouselControlProps & RefAttributes<HTMLButtonElement>>;

package/dist/components/core/Carousel/CarouselBody.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { CarouselBodyProps } from './Carousel.types';
+declare const CarouselBody: React.ForwardRefExoticComponent<CarouselBodyProps & React.RefAttributes<HTMLDivElement>>;
+export { CarouselBody };

package/dist/components/core/Carousel/{CarouselContent.js → CarouselBody.js}

@@ -5,7 +5,7 @@ import { cn } from '../../../utils/cn.js';
 import { useCarouselContext } from './CarouselContext.js';
 import { carouselTheme } from './Carousel.theme.js';
 
-const CarouselContent = React__default.forwardRef(({ className, children, ...props }, ref) => {
+const CarouselBody = React__default.forwardRef(({ className, children, ...props }, ref) => {
     const { currentIndex, orientation, opts, scrollPrev, scrollNext } = useCarouselContext();
     const shouldReduceMotion = useReducedMotion();
     const internalRef = React__default.useRef(null);
@@ -42,11 +42,10 @@ const CarouselContent = React__default.forwardRef(({ className, children, ...pro
                 if (!React__default.isValidElement(child))
                     return child;
                 return React__default.cloneElement(child, {
-                    ...child.props,
                     'aria-hidden': index !== currentIndex,
                 });
             }) }) }));
 });
-CarouselContent.displayName = 'Carousel.Content';
+CarouselBody.displayName = 'Carousel.Body';
 
-export { CarouselContent };
+export { CarouselBody };

package/dist/components/core/Carousel/index.d.ts

@@ -1,2 +1,3 @@
 export { Carousel } from './Carousel';
-export type { CarouselProps, CarouselContentProps, CarouselItemProps, CarouselControlProps, CarouselOptions, CarouselOrientation, } from './Carousel.types';
+export { CarouselBody } from './CarouselBody';
+export type { CarouselProps, CarouselBodyProps, CarouselItemProps, CarouselControlProps, CarouselOptions, CarouselOrientation, } from './Carousel.types';

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

@@ -36,7 +36,7 @@ export interface CommandItemProps {
  *   command={{
  *     id: 'user-profile',
  *     label: 'John Doe',
- *     description: 'View profile',
+ *     subtitle: 'View profile',
  *     contentStart: <Avatar src="..." />,
  *     contentEnd: <Badge>Admin</Badge>,
  *     onSelect: () => navigate('/profile')

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

@@ -88,7 +88,7 @@ const Shortcut = ({ keys }) => {
  *   command={{
  *     id: 'user-profile',
  *     label: 'John Doe',
- *     description: 'View profile',
+ *     subtitle: 'View profile',
  *     contentStart: <Avatar src="..." />,
  *     contentEnd: <Badge>Admin</Badge>,
  *     onSelect: () => navigate('/profile')
@@ -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-sm  truncate", children: command.label }), command.description && (jsx("div", { className: "text-sm opacity-70 truncate mt-0", children: command.description }))] }), 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
@@ -14,9 +16,9 @@ const defaultFilterFunction = (command, searchValue) => {
     var _a, _b;
     const search = searchValue.toLowerCase();
     const labelMatch = command.label.toLowerCase().includes(search);
-    const descriptionMatch = (_a = command.description) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes(search);
+    const subtitleMatch = (_a = command.subtitle) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes(search);
     const keywordsMatch = (_b = command.keywords) === null || _b === void 0 ? void 0 : _b.some((keyword) => keyword.toLowerCase().includes(search));
-    return labelMatch || descriptionMatch || keywordsMatch || false;
+    return labelMatch || subtitleMatch || keywordsMatch || false;
 };
 /**
  * Check if commands array is grouped
@@ -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

@@ -1,30 +1,31 @@
 const commandPaletteTheme = {
     overlay: "fixed inset-0 bg-[var(--overlay-bg)] backdrop-blur-[var(--overlay-blur)] z-50 " +
-        "flex items-start justify-center pt-[10vh] px-4",
-    container: "relative w-full max-h-[calc(100vh-2rem)] w-full max-w-lg " +
+        "flex items-start justify-center pt-[min(10vh,4rem)] px-4",
+    container: "relative w-full max-h-[calc(100vh-2rem)] max-w-lg " +
         "bg-[var(--color-background)] rounded-[var(--modal-radius)] shadow-2xl shadow-black/30 " +
         "border border-[var(--color-border)] ring-4 ring-[var(--color-background)]/20 " +
         "flex flex-col my-4 min-h-0 overflow-hidden " +
         // Dark mode
         "dark:ring-black/30",
     searchWrapper: "border-b border-[var(--color-border)] px-4 py-3 " + "",
-    searchInput: "w-full px-0 py-0 text-sm bg-transparent border-none outline-none " +
+    searchInput: "w-full px-0 py-0 text-base bg-transparent border-none outline-none " +
         "text-[var(--color-text-primary)] placeholder:text-[var(--color-text-placeholder)] " +
         "focus:outline-none focus:ring-0 " +
         // Dark mode
         "dark:text-[var(--color-neutral-200)] dark:placeholder:text-[var(--color-neutral-500)]",
-    groupLabel: "px-4 py-1 text-xs font-semibold text-[var(--color-text-muted)]/50 uppercase " +
+    groupLabel: "px-4 py-1 text-sm font-semibold text-[var(--color-text-muted)]/50 uppercase " +
         "dark:text-[var(--color-neutral-500)]",
     commandItem: "flex items-center gap-3 px-4 py-2 rounded-[var(--radius-base)] cursor-pointer transition-colors " +
         "hover:bg-[var(--color-primary)] " +
         "data-[highlighted=true]:bg-[var(--color-primary)] data-[highlighted=true]:hover:bg-[var(--color-primary)] " +
-        "data-[highlighted=true]:text-white " +
+        "data-[highlighted=true]:text-[var(--color-primary-contrast)] " +
         "data-[disabled=true]:opacity-50 data-[disabled=true]:cursor-not-allowed data-[disabled=true]:hover:bg-transparent " +
         // Dark mode - adjust hover state
         "dark:text-[var(--color-neutral-200)] dark:hover:bg-[var(--color-primary-600)] " +
         "dark:data-[highlighted=true]:bg-[var(--color-primary-600)]",
-    emptyState: "px-4 py-12 text-center text-sm text-[var(--color-text-muted)] " +
+    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

@@ -7,8 +7,8 @@ export interface CommandItem {
     id: string;
     /** Display label for the command */
     label: string;
-    /** Description or subtitle for the command */
-    description?: string;
+    /** Subtitle for the command */
+    subtitle?: string;
     /** Content to display at the start (icon, avatar, etc.) */
     contentStart?: React.ReactNode;
     /** Content to display at the end (keyboard shortcuts, badges, etc.) */
@@ -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.d.ts

@@ -5,11 +5,11 @@ export declare const ContextMenu: {
     displayName: string;
 } & {
     Trigger: React.ForwardRefExoticComponent<import("./ContextMenu.types").ContextMenuTriggerProps & React.RefAttributes<HTMLElement>>;
-    Content: React.ForwardRefExoticComponent<import("./ContextMenu.types").ContextMenuContentProps & React.RefAttributes<HTMLDivElement>>;
+    Body: React.ForwardRefExoticComponent<import("./ContextMenu.types").ContextMenuBodyProps & React.RefAttributes<HTMLDivElement>>;
     Item: React.ForwardRefExoticComponent<import("./ContextMenu.types").ContextMenuItemProps & React.RefAttributes<HTMLDivElement>>;
     Sub: React.FC<import("./ContextMenu.types").ContextMenuSubProps>;
     SubTrigger: React.ForwardRefExoticComponent<import("./ContextMenu.types").ContextMenuSubTriggerProps & React.RefAttributes<HTMLDivElement>>;
-    SubContent: React.ForwardRefExoticComponent<import("./ContextMenu.types").ContextMenuSubContentProps & React.RefAttributes<HTMLDivElement>>;
+    SubBody: React.ForwardRefExoticComponent<import("./ContextMenu.types").ContextMenuSubBodyProps & React.RefAttributes<HTMLDivElement>>;
     Separator: React.ForwardRefExoticComponent<import("./ContextMenu.types").ContextMenuSeparatorProps & React.RefAttributes<HTMLDivElement>>;
     Label: React.ForwardRefExoticComponent<import("./ContextMenu.types").ContextMenuLabelProps & React.RefAttributes<HTMLDivElement>>;
 };

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

@@ -3,11 +3,11 @@ import { useState, useRef, useCallback, useEffect } from 'react';
 import { cn } from '../../../utils/cn.js';
 import { ContextMenuContext } from './ContextMenuContext.js';
 import { ContextMenuTrigger } from './ContextMenuTrigger.js';
-import { ContextMenuContent } from './ContextMenuContent.js';
+import { ContextMenuBody } from './ContextMenuBody.js';
 import { ContextMenuItem } from './ContextMenuItem.js';
 import { ContextMenuSub } from './ContextMenuSub.js';
 import { ContextMenuSubTrigger } from './ContextMenuSubTrigger.js';
-import { ContextMenuSubContent } from './ContextMenuSubContent.js';
+import { ContextMenuSubBody } from './ContextMenuSubBody.js';
 import { ContextMenuSeparator } from './ContextMenuSeparator.js';
 import { ContextMenuLabel } from './ContextMenuLabel.js';
 import { contextMenuTheme } from './ContextMenu.theme.js';
@@ -22,11 +22,11 @@ import { contextMenuTheme } from './ContextMenu.theme.js';
  *   <ContextMenu.Trigger>
  *     <div>Right click here</div>
  *   </ContextMenu.Trigger>
- *   <ContextMenu.Content>
+ *   <ContextMenu.Body>
  *     <ContextMenu.Item shortcut="⌘R">Reload</ContextMenu.Item>
  *     <ContextMenu.Separator />
  *     <ContextMenu.Item checked={true}>Show Bookmarks</ContextMenu.Item>
- *   </ContextMenu.Content>
+ *   </ContextMenu.Body>
  * </ContextMenu>
  * ```
  */
@@ -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]);
@@ -78,11 +79,11 @@ ContextMenuRoot.displayName = "ContextMenu";
 // Export as a unified component with sub-components
 const ContextMenu = Object.assign(ContextMenuRoot, {
     Trigger: ContextMenuTrigger,
-    Content: ContextMenuContent,
+    Body: ContextMenuBody,
     Item: ContextMenuItem,
     Sub: ContextMenuSub,
     SubTrigger: ContextMenuSubTrigger,
-    SubContent: ContextMenuSubContent,
+    SubBody: ContextMenuSubBody,
     Separator: ContextMenuSeparator,
     Label: ContextMenuLabel,
 });

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

@@ -13,10 +13,10 @@ const contextMenuTheme = {
     // Submenu trigger - based on Dropdown item style with chevron space
     subTriggerStyle: `${dropdownTheme.itemBaseStyle} pr-8 data-[state=open]:bg-[var(--color-background-tertiary)] ` +
         "dark:data-[state=open]:bg-[var(--color-neutral-700)]",
-    // Submenu content - similar to main menu but slightly smaller
+    // Submenu content - matches main dropdown menu style
     subContentStyle: "min-w-[180px] max-h-[400px] overflow-y-auto rounded-[var(--dropdown-radius)] border border-[var(--color-border)] " +
-        "bg-[var(--color-background-secondary)] shadow-xl flex flex-col p-1 focus:outline-none " +
-        "dark:bg-[var(--color-neutral-800)] dark:border-[var(--color-neutral-700)]",
+        "bg-[var(--color-background)] shadow-real-xl flex flex-col p-1 focus:outline-none " +
+        "dark:bg-[var(--color-background-secondary)]",
     // Separator - horizontal divider
     separatorStyle: "h-px bg-[var(--color-border)] my-1 -mx-1 " +
         "dark:bg-[var(--color-neutral-700)]",

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

@@ -26,7 +26,7 @@ export interface ContextMenuTriggerProps {
     className?: string;
     disabled?: boolean;
 }
-export interface ContextMenuContentProps extends React.HTMLAttributes<HTMLDivElement> {
+export interface ContextMenuBodyProps extends React.HTMLAttributes<HTMLDivElement> {
     children: ReactNode;
     className?: string;
     animation?: boolean;
@@ -42,7 +42,7 @@ export interface ContextMenuItemProps extends Omit<React.HTMLAttributes<HTMLDivE
     onSelect?: () => void;
     startContent?: ReactNode;
     endContent?: ReactNode;
-    description?: string;
+    subtitle?: string;
 }
 export interface ContextMenuSubProps {
     children: ReactNode;
@@ -53,7 +53,7 @@ export interface ContextMenuSubTriggerProps extends React.HTMLAttributes<HTMLDiv
     className?: string;
     disabled?: boolean;
 }
-export interface ContextMenuSubContentProps extends React.HTMLAttributes<HTMLDivElement> {
+export interface ContextMenuSubBodyProps extends React.HTMLAttributes<HTMLDivElement> {
     children: ReactNode;
     className?: string;
     animation?: boolean;