@flikk/ui 1.0.0-beta.14 → 1.0.0-beta.16

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

@@ -2,7 +2,7 @@ import React, { ReactNode, MouseEvent } from "react";
 import { SemanticColor } from "../../../utils/colorUtils";
 export type BadgeVariant = "filled" | "outline" | "soft";
 export type BadgeColor = SemanticColor;
-export type BadgeSize = "xs" | "sm" | "md";
+export type BadgeSize = "sm" | "md";
 /**
  * Theme configuration for Badge component
  */
@@ -28,10 +28,6 @@ export interface BadgeTheme {
      * Additional padding for pill-shaped badges
      */
     pillSizes: Record<BadgeSize, string>;
-    /**
-     * Border radius per badge size
-     */
-    radiusSizes: Record<BadgeSize, string>;
     /**
      * Icon sizes for each badge size
      */
@@ -41,13 +37,9 @@ export interface BadgeTheme {
      */
     avatarSizes: Record<BadgeSize, string>;
     /**
-     * Dismiss button sizes for each badge size
-     */
-    dismissButtonSizes: Record<BadgeSize, string>;
-    /**
-     * Dismiss icon sizes for each badge size
+     * Dismiss icon sizes (button sizes itself from icon + padding)
      */
-    dismissIconSizes: Record<BadgeSize, string>;
+    dismissSizes: Record<BadgeSize, string>;
     /**
      * Color styles for dot indicators
      */
@@ -69,18 +61,16 @@ export interface BadgeThemeOverrides {
     variantColors?: Partial<Record<BadgeVariant, Partial<Record<BadgeColor, string>>>>;
     sizes?: Partial<Record<BadgeSize, string>>;
     pillSizes?: Partial<Record<BadgeSize, string>>;
-    radiusSizes?: Partial<Record<BadgeSize, string>>;
     iconSizes?: Partial<Record<BadgeSize, string>>;
     avatarSizes?: Partial<Record<BadgeSize, string>>;
-    dismissButtonSizes?: Partial<Record<BadgeSize, string>>;
-    dismissIconSizes?: Partial<Record<BadgeSize, string>>;
+    dismissSizes?: Partial<Record<BadgeSize, string>>;
     dotColors?: Partial<Record<BadgeColor, string>>;
     states?: Partial<{
         disabled: string;
         hover: string;
     }>;
 }
-export interface BadgeProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "onSelect" | "inputMode"> {
+export interface BadgeProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "inputMode"> {
     /**
      * The content to be displayed inside the badge
      */
@@ -136,20 +126,6 @@ export interface BadgeProps extends Omit<React.HTMLAttributes<HTMLSpanElement>,
      * Required when dismissible is true
      */
     onDismiss?: (event: MouseEvent<HTMLButtonElement>) => void;
-    /**
-     * Whether the badge is selectable/toggleable
-     * @default false
-     */
-    selectable?: boolean;
-    /**
-     * Whether the badge is currently selected (controlled)
-     * @default false
-     */
-    selected?: boolean;
-    /**
-     * Callback when badge selection changes (for selectable badges)
-     */
-    onSelect?: (selected: boolean) => void;
     /**
      * Whether the badge is disabled
      * @default false

package/dist/components/core/Button/Button.js

@@ -18,7 +18,7 @@ const BUTTON_TAP_ANIMATION = {
         },
     },
 };
-const Button = React__default.forwardRef(({ children, className = "", iconOnly = false, state = "default", size = "md", color, variant, block = false, onClick, enableRipple = true, rippleEffect = "default", rippleClassName, rippleScale = 10, showReflection = true, darkMode = false, disabled: disabledProp, "aria-label": ariaLabelProp, ...restProps }, ref) => {
+const Button = React__default.forwardRef(({ children, className = "", iconOnly = false, state = "default", size = "md", color, variant, block = false, onClick, enableRipple = true, rippleEffect = "default", rippleClassName, rippleScale = 10, showReflection = true, darkMode = false, disabled: disabledProp, "aria-label": ariaLabelProp, onAnimationStart: _onAnimationStart, onAnimationEnd: _onAnimationEnd, onDrag: _onDrag, onDragStart: _onDragStart, onDragEnd: _onDragEnd, ...restProps }, ref) => {
     var _a, _b, _c, _d, _e, _f, _g;
     const shouldReduceMotion = useReducedMotion();
     const shouldDisableAnimations = !!shouldReduceMotion;
@@ -104,7 +104,7 @@ const Button = React__default.forwardRef(({ children, className = "", iconOnly =
                 node;
         }
     }, [buttonRef]);
-    return (jsxs(motion.button, { ...restProps /* React drag events conflict with motion drag events */, ...animationProps, ref: mergedRef, type: "button", className: cn(buttonTheme.baseStyle, colorClasses, variantClasses, sizeClasses, blockStyle, stateClasses, darkMode && "dark", className), disabled: isDisabled, "data-state": state, "data-color": resolvedColor, "data-variant": resolvedVariant, "data-size": size, "data-icon-only": iconOnly ? "true" : "false", "data-block": block ? "true" : "false", "aria-disabled": isDisabled || undefined, "aria-invalid": isError || undefined, "aria-label": ariaLabel, onClick: handleClick, children: [showReflection &&
+    return (jsxs(motion.button, { ...restProps, ...animationProps, ref: mergedRef, type: "button", className: cn(buttonTheme.baseStyle, colorClasses, variantClasses, sizeClasses, blockStyle, stateClasses, darkMode && "dark", className), disabled: isDisabled, "data-state": state, "data-color": resolvedColor, "data-variant": resolvedVariant, "data-size": size, "data-icon-only": iconOnly ? "true" : "false", "data-block": block ? "true" : "false", "aria-disabled": isDisabled || undefined, "aria-invalid": isError || undefined, "aria-label": ariaLabel, onClick: handleClick, children: [showReflection &&
                 resolvedVariant !== "link" &&
                 resolvedVariant !== "outline" && (jsx("div", { className: "absolute top-0.25 right-0.25 left-0.25 h-3 border-t-[0.5px] border-white/40 rounded-t-[calc(var(--button-radius)-1.25px)] opacity-60" })), isLoading && (jsx("div", { className: "absolute inset-0 flex items-center justify-center", children: jsx(Spinner, { size: "sm", color: color, className: spinnerClassName }) })), jsx("span", { className: cn("inline-flex items-center gap-2 whitespace-nowrap", isLoading && "opacity-0"), children: children }), enableRipple &&
                 ripples.map((ripple) => {

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

@@ -124,9 +124,9 @@ const buttonTheme = {
     // Size variants
     sizes: {
         sm: {
-            default: "font-semibold min-h-[var(--button-min-h-sm)] px-[var(--button-px-sm)] py-[var(--button-py-sm)] text-sm",
+            default: "font-semibold min-h-[var(--button-min-h-sm)] px-[var(--button-px-sm)] py-[var(--button-py-sm)] text-base",
             iconOnly: "size-[var(--button-icon-size-sm)] p-[var(--button-icon-p-sm)]",
-            link: "font-semibold p-0 text-sm h-fit",
+            link: "font-semibold p-0 text-base h-fit",
         },
         md: {
             default: "font-semibold min-h-[var(--button-min-h-md)] px-[var(--button-px-md)] py-[var(--button-py-md)] text-base",

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

@@ -4,15 +4,15 @@
 const buttonGroupTheme = {
     // Base styles for the button group container with child button styling
     baseStyle: "inline-flex items-stretch " +
-        // Horizontal orientation - direct button children
-        "[&>button:first-child]:rounded-r-none " +
-        "[&>button:last-child]:rounded-l-none " +
+        // Horizontal orientation - direct button children (skip only-child)
+        "[&>button:first-child:not(:only-child)]:rounded-r-none " +
+        "[&>button:last-child:not(:only-child)]:rounded-l-none " +
         "[&>button:not(:first-child):not(:last-child)]:rounded-none " +
         "[&>button:not(:first-child)]:-ml-px " +
         "[&>button]:relative [&>button]:focus:z-10 [&>button]:hover:z-10 " +
-        // Horizontal orientation - nested button children (e.g., in Dropdown)
-        "[&>*:first-child>button]:rounded-r-none " +
-        "[&>*:last-child>button]:rounded-l-none " +
+        // Horizontal orientation - nested button children (skip only-child)
+        "[&>*:first-child:not(:only-child)>button]:rounded-r-none " +
+        "[&>*:last-child:not(:only-child)>button]:rounded-l-none " +
         "[&>*:not(:first-child):not(:last-child)>button]:rounded-none " +
         "[&>*:not(:first-child)>button]:-ml-px " +
         "[&>*>button]:relative [&>*>button]:focus:z-10 [&>*>button]:hover:z-10 " +

package/dist/components/core/ButtonGroup/ButtonGroupText.js

@@ -6,11 +6,9 @@ import { cn } from '../../../utils/cn.js';
 const ButtonGroupText = React__default.forwardRef(({ children, className = "", asChild = false, ...props }, ref) => {
     // If asChild is true, clone the child element with our styles
     if (asChild && React__default.isValidElement(children)) {
-        const childProps = children.props;
         return React__default.cloneElement(children, {
-            ...childProps,
             ref,
-            className: cn(buttonGroupTheme.textStyles, childProps.className, className),
+            className: cn(buttonGroupTheme.textStyles, children.props.className, className),
         });
     }
     // Otherwise, render as a div

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

@@ -112,7 +112,7 @@ const generateCalendarDays = (year, month, selectedValue, mode = 'single', today
     }
     return days;
 };
-const Calendar = React__default.forwardRef(({ mode = 'single', value, defaultValue, onChange, minDate, maxDate, isDateDisabled: customIsDateDisabled, showToday = true, selectTodayByDefault = false, weekdays = ["M", "T", "W", "T", "F", "S", "S"], months, size = "md", headerMode, enableMonthDropdown = true, enableYearDropdown = true, yearRange, viewDate: externalViewDate, onViewDateChange, onNavigatePrev, onNavigateNext, className, ...props }, ref) => {
+const Calendar = React__default.forwardRef(({ mode = 'single', value, defaultValue, onChange, minDate, maxDate, isDateDisabled: customIsDateDisabled, showToday = true, selectTodayByDefault = false, weekdays = ["M", "T", "W", "T", "F", "S", "S"], months, size = "md", headerMode, enableMonthDropdown = true, enableYearDropdown = true, yearRange, viewDate: externalViewDate, onViewDateChange, onNavigatePrev, onNavigateNext, showOtherMonthDays = true, className, ...props }, ref) => {
     // Determine initial view date from value/defaultValue
     const getInitialViewDate = () => {
         if (value) {
@@ -371,10 +371,36 @@ const Calendar = React__default.forwardRef(({ mode = 'single', value, defaultVal
             }
         }
     }, [minDate, maxDate, customIsDateDisabled, currentMonth, currentYear, onViewDateChange, mode, value, onChange, selectedValue, rangeSelectionState]);
-    return (jsxs("div", { ref: ref, className: cn(calendarTheme.baseStyle, className), ...props, children: [jsxs("div", { className: calendarTheme.headerStyle, children: [onNavigatePrev !== null && (jsx(Button, { onClick: navigateToPreviousMonth, "aria-label": "Previous month", disabled: !canNavigateToPrev, iconOnly: true, variant: "link", color: "neutral", size: "sm", children: jsx(ChevronLeftIcon, { className: "size-4", strokeWidth: 2 }) })), onNavigatePrev === null && jsx("div", { className: "w-8" }), resolvedHeaderMode === 'static' ? (jsxs("h2", { className: calendarTheme.titleStyle, children: [getMonthName(viewDate, months), " ", currentYear] })) : (jsxs("div", { className: calendarTheme.headerDropdownsStyle, children: [(resolvedHeaderMode === 'dropdown' || (resolvedHeaderMode === 'mixed' && enableMonthDropdown)) && (jsx(Select, { value: currentMonth.toString(), onChange: handleMonthChange, options: monthOptions, displayValue: currentAbbreviatedMonth, size: "sm", className: "text-base font-medium" })), (resolvedHeaderMode === 'dropdown' || (resolvedHeaderMode === 'mixed' && enableYearDropdown)) && (jsx(Select, { value: currentYear.toString(), onChange: handleYearChange, options: yearOptions, size: "sm", className: "text-base font-medium" }))] })), onNavigateNext !== null && (jsx(Button, { onClick: navigateToNextMonth, "aria-label": "Next month", disabled: !canNavigateToNext, iconOnly: true, variant: "link", color: "neutral", size: "sm", children: jsx(ChevronRightIcon, { className: "size-4", strokeWidth: 2 }) })), onNavigateNext === null && jsx("div", { className: "w-8" })] }), jsx("div", { className: calendarTheme.weekdaysStyle, children: weekdays.map((day, index) => (jsx("div", { className: calendarTheme.weekdayStyle, children: day }, index))) }), jsx("div", { className: calendarTheme.daysGridStyle, children: calendarDays.map((day) => {
+    return (jsxs("div", { ref: ref, className: cn(calendarTheme.baseStyle, className), ...props, children: [jsxs("div", { className: calendarTheme.headerStyle, children: [onNavigatePrev !== null && (jsx(Button, { onClick: navigateToPreviousMonth, "aria-label": "Previous month", disabled: !canNavigateToPrev, iconOnly: true, variant: "link", color: "neutral", size: "sm", children: jsx(ChevronLeftIcon, { className: "size-4", strokeWidth: 2 }) })), onNavigatePrev === null && jsx("div", { className: "w-8" }), resolvedHeaderMode === 'static' ? (jsxs("h2", { className: calendarTheme.titleStyle, children: [getMonthName(viewDate, months), " ", currentYear] })) : (jsxs("div", { className: calendarTheme.headerDropdownsStyle, children: [(resolvedHeaderMode === 'dropdown' || (resolvedHeaderMode === 'mixed' && enableMonthDropdown)) && (jsx(Select, { value: currentMonth.toString(), onChange: handleMonthChange, options: monthOptions, displayValue: currentAbbreviatedMonth, size: "sm", className: "text-base font-medium" })), (resolvedHeaderMode === 'dropdown' || (resolvedHeaderMode === 'mixed' && enableYearDropdown)) && (jsx(Select, { value: currentYear.toString(), onChange: handleYearChange, options: yearOptions, size: "sm", className: "text-base font-medium" }))] })), onNavigateNext !== null && (jsx(Button, { onClick: navigateToNextMonth, "aria-label": "Next month", disabled: !canNavigateToNext, iconOnly: true, variant: "link", color: "neutral", size: "sm", children: jsx(ChevronRightIcon, { className: "size-4", strokeWidth: 2 }) })), onNavigateNext === null && jsx("div", { className: "w-8" })] }), jsx("div", { className: calendarTheme.weekdaysStyle, children: weekdays.map((day, index) => (jsx("div", { className: calendarTheme.weekdayStyle, children: day }, index))) }), jsx("div", { className: calendarTheme.daysGridStyle, children: calendarDays.map((day, index) => {
                     var _a;
                     const dayNumber = day.date.getDate();
-                    return (jsxs(motion.button, { type: "button", onClick: () => handleDateSelect(day.date), disabled: day.isDisabled, className: cn(calendarTheme.dayButtonStyle, (_a = calendarTheme.dayButtonSizes) === null || _a === void 0 ? void 0 : _a[size]), "data-selected": day.isSelected, "data-range-start": day.isRangeStart, "data-range-end": day.isRangeEnd, "data-in-range": day.isInRange, "data-today": day.isToday && !day.isSelected && !day.isRangeStart && !day.isRangeEnd, "data-disabled": day.isDisabled, "data-other-month": !day.isCurrentMonth, "aria-label": `Select ${day.date.toLocaleDateString()}`, variants: shouldReduceMotion ? {} : calendarAnimations.dayButton, whileHover: shouldReduceMotion ? undefined : (!day.isDisabled ? "hover" : undefined), whileTap: shouldReduceMotion ? undefined : (!day.isDisabled ? "tap" : undefined), children: [jsx("time", { dateTime: day.date.toISOString().split("T")[0], children: dayNumber }), day.isToday && (jsx(motion.span, { className: "absolute z-10 bottom-1 left-1/2 -translate-x-1/2 w-1 h-1 bg-[var(--color-primary)] rounded-full", variants: shouldReduceMotion ? {} : calendarAnimations.todayDot, initial: shouldReduceMotion ? undefined : "initial", animate: shouldReduceMotion ? undefined : "animate" }))] }, day.date.toISOString()));
+                    const isInStrip = day.isRangeStart || day.isRangeEnd || day.isInRange;
+                    // Determine range position for strip rounding
+                    let rangePos;
+                    if (isInStrip) {
+                        const isRowStart = index % 7 === 0;
+                        const isRowEnd = index % 7 === 6;
+                        const nextDay = calendarDays[index + 1];
+                        const prevDay = calendarDays[index - 1];
+                        const nextVisible = nextDay && (nextDay.isCurrentMonth || showOtherMonthDays);
+                        const prevVisible = prevDay && (prevDay.isCurrentMonth || showOtherMonthDays);
+                        const nextInStrip = nextVisible && (nextDay.isInRange || nextDay.isRangeEnd);
+                        const prevInStrip = prevVisible && (prevDay.isInRange || prevDay.isRangeStart);
+                        const effectiveStart = day.isRangeStart || isRowStart || !prevInStrip;
+                        const effectiveEnd = day.isRangeEnd || isRowEnd || !nextInStrip;
+                        if (effectiveStart && effectiveEnd)
+                            rangePos = "single";
+                        else if (effectiveStart)
+                            rangePos = "start";
+                        else if (effectiveEnd)
+                            rangePos = "end";
+                        else
+                            rangePos = "middle";
+                    }
+                    if (!day.isCurrentMonth && !showOtherMonthDays) {
+                        return jsx("div", {}, day.date.toISOString());
+                    }
+                    return (jsx("div", { className: cn("flex items-center justify-center", isInStrip && calendarTheme.rangeCellStyle), "data-range-pos": rangePos, children: jsxs(motion.button, { type: "button", onClick: () => handleDateSelect(day.date), disabled: day.isDisabled, className: cn(calendarTheme.dayButtonStyle, (_a = calendarTheme.dayButtonSizes) === null || _a === void 0 ? void 0 : _a[size]), "data-selected": day.isSelected, "data-range-start": day.isRangeStart, "data-range-end": day.isRangeEnd, "data-in-range": day.isInRange, "data-today": day.isToday && !day.isSelected && !day.isRangeStart && !day.isRangeEnd, "data-disabled": day.isDisabled, "data-other-month": !day.isCurrentMonth, "aria-label": `Select ${day.date.toLocaleDateString()}`, variants: shouldReduceMotion ? {} : calendarAnimations.dayButton, whileHover: shouldReduceMotion ? undefined : (!day.isDisabled ? "hover" : undefined), whileTap: shouldReduceMotion ? undefined : (!day.isDisabled ? "tap" : undefined), children: [jsx("time", { dateTime: day.date.toISOString().split("T")[0], children: dayNumber }), day.isToday && (jsx(motion.span, { className: "absolute z-10 bottom-1 left-1/2 -translate-x-1/2 w-1 h-1 bg-[var(--color-primary)] rounded-full", variants: shouldReduceMotion ? {} : calendarAnimations.todayDot, initial: shouldReduceMotion ? undefined : "initial", animate: shouldReduceMotion ? undefined : "animate" }))] }) }, day.date.toISOString()));
                 }) })] }));
 });
 Calendar.displayName = "Calendar";

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/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/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;
 };