@flikk/ui 1.0.0-beta.3 → 1.0.0-beta.31

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

@@ -1,12 +1,11 @@
 import React from "react";
-import { HTMLMotionProps } from "motion/react";
 import { RippleEffectType } from "./Button.ripple";
 /**
  * Button component props
  * @property {ButtonColor} color - The semantic color/intent of the button
  * @property {ButtonVariant} variant - The visual style variant of the button
  * @property {ButtonSize} size - The size of the button
- * @property {ButtonState} state - The state of the button (normal, disabled, error)
+ * @property {ButtonState} state - The state of the button (default, loading, disabled)
  * @property {boolean} iconOnly - Whether the button should display as icon-only (square padding)
  * @property {boolean} block - Whether the button should be full width
  * @property {boolean} enableRipple - Whether to enable ripple effect on click
@@ -14,19 +13,36 @@ import { RippleEffectType } from "./Button.ripple";
  * @property {string} rippleClassName - Custom class name for ripple styling
  * @property {number} rippleScale - Scale multiplier for ripple expansion (default: 10)
  */
-export interface ButtonProps extends HTMLMotionProps<"button"> {
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     /** The semantic color/intent of the button */
     color?: ButtonColor;
     /** The visual style variant of the button */
     variant?: ButtonVariant;
     /** The size of the button */
     size?: ButtonSize;
-    /** The state of the button (normal, disabled, error) */
+    /** The state of the button (default, loading, disabled) */
     state?: ButtonState;
     /** Whether the button should display as icon-only (square padding) */
     iconOnly?: boolean;
     /** Whether the button should be full width */
     block?: boolean;
+    /**
+     * Small decorative icon before the label, auto-sized to the button's `size`.
+     *
+     * The SERIALIZABLE front door — composing the icon into `children` stays the
+     * idiomatic hand-written form (`<Button><SearchIcon className="size-4" />Search</Button>`)
+     * and is unchanged. This slot exists because a generative UI spec is JSON: it can name
+     * an icon but cannot pass a React element, so `children` alone leaves an LLM unable to
+     * put an icon on a button at all. Same "one contract, two front doors" shape as Card's
+     * `title`/`subtitle` slot-props and the collection `items` APIs (CLAUDE.md §2).
+     *
+     * Deliberately NO `contentStart`/`contentEnd` counterpart: those take arbitrary
+     * ReactNode, which is not serializable, so they would buy the generative path nothing
+     * — compose those into `children`.
+     */
+    iconStart?: React.ReactNode;
+    /** Small decorative icon after the label, auto-sized to the button's `size`. See `iconStart`. */
+    iconEnd?: React.ReactNode;
     /** Button contents */
     children?: React.ReactNode;
     /** Additional class names */
@@ -50,7 +66,7 @@ export interface ButtonProps extends HTMLMotionProps<"button"> {
      */
     darkMode?: boolean;
 }
-export type ButtonColor = "neutral" | "primary" | "success" | "warning" | "danger";
-export type ButtonVariant = "filled" | "outline" | "ghost" | "link";
+export type ButtonColor = "mono" | "primary" | "danger";
+export type ButtonVariant = "filled" | "outline" | "soft" | "ghost";
 export type ButtonSize = "sm" | "md" | "lg";
-export type ButtonState = "default" | "disabled" | "error" | "loading";
+export type ButtonState = "default" | "disabled" | "loading";

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

@@ -1,2 +1,4 @@
 export { Button } from './Button';
 export * from './Button.types';
+export { useRipple, getRippleColorClass, getRippleAnimation } from './Button.ripple';
+export type { RippleEffectType, RippleConfig, Ripple } from './Button.ripple';

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.animations.js

@@ -1,3 +1,4 @@
+"use client";
 /**
  * Animation variants for Calendar component
  */

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

@@ -1,14 +1,18 @@
+"use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
-import React__default, { useState, useEffect, useMemo, useCallback } from 'react';
+import React__default, { useState, useCallback, useEffect, useMemo } from 'react';
 import { useReducedMotion, motion } from 'motion/react';
-import { ChevronLeftIcon, ChevronRightIcon } from '@heroicons/react/24/outline';
+import { CaretLeft, CaretRight } from '@phosphor-icons/react';
 import { calendarTheme } from './Calendar.theme.js';
 import { calendarAnimations } from './Calendar.animations.js';
 import { cn } from '../../../utils/cn.js';
+import '../../../theme/ThemeContext.js';
+import '../../../theme/SurfaceContext.js';
+import { springs } from '../../../theme/animations.js';
 import { Select } from '../../forms/Select/Select.js';
 import '../../forms/Select/Select.theme.js';
-import { getMonthName, isDateDisabled as isDateDisabled$1, isSameDay } from './calendar.utils.js';
 import { Button } from '../Button/Button.js';
+import { getMonthName, isDateDisabled as isDateDisabled$1, isSameDay } from './calendar.utils.js';
 
 /**
  * Constants for date utilities
@@ -112,7 +116,9 @@ 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, 
+// Destructure motion-conflicting props to avoid type issues
+onAnimationStart: _onAnimationStart, onAnimationEnd: _onAnimationEnd, onDrag: _onDrag, onDragStart: _onDragStart, onDragEnd: _onDragEnd, ...props }, ref) => {
     // Determine initial view date from value/defaultValue
     const getInitialViewDate = () => {
         if (value) {
@@ -146,6 +152,21 @@ const Calendar = React__default.forwardRef(({ mode = 'single', value, defaultVal
     });
     // Track range selection state (for range mode)
     const [rangeSelectionState, setRangeSelectionState] = useState('start');
+    // Roving tabindex (WAI-ARIA APG date-picker grid pattern): exactly one day
+    // button is Tab-reachable at a time. Tracks the index of that day within
+    // the currently-rendered `calendarDays` grid.
+    const [focusedIndex, setFocusedIndex] = useState(0);
+    // Refs to the rendered day buttons, keyed by their index in `calendarDays`,
+    // so arrow-key navigation can imperatively move focus.
+    const dayButtonRefs = React__default.useRef(new Map());
+    const registerDayButtonRef = useCallback((index, el) => {
+        if (el) {
+            dayButtonRefs.current.set(index, el);
+        }
+        else {
+            dayButtonRefs.current.delete(index);
+        }
+    }, []);
     // Determine the selected value (controlled vs uncontrolled)
     const selectedValue = value !== undefined ? value : internalValue;
     // Keep range selection state in sync with current selection to avoid misinterpreting clicks
@@ -224,8 +245,8 @@ const Calendar = React__default.forwardRef(({ mode = 'single', value, defaultVal
     // Generate year options - filter based on minDate/maxDate
     const currentDate = new Date();
     const defaultYearRange = {
-        start: currentDate.getFullYear() - 50,
-        end: currentDate.getFullYear() + 50,
+        start: currentDate.getFullYear() - 100,
+        end: currentDate.getFullYear() + 10,
     };
     const actualYearRange = yearRange || defaultYearRange;
     const yearOptions = useMemo(() => {
@@ -236,10 +257,10 @@ const Calendar = React__default.forwardRef(({ mode = 'single', value, defaultVal
             startYear = Math.max(startYear, minDate.getFullYear());
         }
         if (maxDate) {
-            endYear = Math.min(endYear, maxDate.getFullYear());
+            endYear = Math.max(endYear, maxDate.getFullYear());
         }
         const options = [];
-        for (let year = startYear; year <= endYear; year++) {
+        for (let year = endYear; year >= startYear; year--) {
             options.push({
                 id: year,
                 value: year.toString(),
@@ -282,6 +303,75 @@ const Calendar = React__default.forwardRef(({ mode = 'single', value, defaultVal
         maxDate,
         customIsDateDisabled,
     ]);
+    // Calculate days grid height dynamically to animate height smoothly without layout scale distortion
+    const gridHeight = useMemo(() => {
+        const rowCount = calendarDays.length / 7;
+        // Must mirror calendarTheme.dayButtonSizes (size-8/10/12 → 32/40/48px)
+        const rowHeight = size === 'sm' ? 32 : size === 'lg' ? 48 : 40;
+        // Row height * number of rows + gap-y (2px) * (number of rows - 1),
+        // plus the grid's py-1 (4px top + bottom) that keeps focus rings
+        // visible inside the overflow-hidden clip.
+        return rowCount * rowHeight + (rowCount - 1) * 2 + 8;
+    }, [calendarDays.length, size]);
+    // Reset the roving tabindex target whenever the visible month changes —
+    // prefer the selected day, then today, then the first day of the month.
+    // Deliberately does NOT depend on `selectedValue`/`calendarDays` so that
+    // picking a date (without changing month) doesn't fight in-grid arrow-key
+    // navigation that already moved the roving target elsewhere.
+    useEffect(() => {
+        const selectedIdx = calendarDays.findIndex((d) => d.isSelected);
+        if (selectedIdx >= 0) {
+            setFocusedIndex(selectedIdx);
+            return;
+        }
+        const todayIdx = calendarDays.findIndex((d) => d.isToday);
+        if (todayIdx >= 0) {
+            setFocusedIndex(todayIdx);
+            return;
+        }
+        const firstCurrentIdx = calendarDays.findIndex((d) => d.isCurrentMonth);
+        setFocusedIndex(firstCurrentIdx >= 0 ? firstCurrentIdx : 0);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [currentYear, currentMonth]);
+    // Arrow-key navigation for the day grid (roving tabindex). Moves focus by
+    // ±1 day (ArrowLeft/ArrowRight) or ±7 days / one week (ArrowUp/ArrowDown).
+    // A target outside the currently-rendered grid — or a cell hidden by
+    // showOtherMonthDays={false} — is a no-op rather than crossing into a
+    // different visible month.
+    const handleDayKeyDown = useCallback((event, index) => {
+        var _a;
+        let delta = 0;
+        switch (event.key) {
+            case "ArrowLeft":
+                delta = -1;
+                break;
+            case "ArrowRight":
+                delta = 1;
+                break;
+            case "ArrowUp":
+                delta = -7;
+                break;
+            case "ArrowDown":
+                delta = 7;
+                break;
+            default:
+                return;
+        }
+        const targetIndex = index + delta;
+        if (targetIndex < 0 || targetIndex >= calendarDays.length)
+            return;
+        const targetDay = calendarDays[targetIndex];
+        if (!targetDay.isCurrentMonth && !showOtherMonthDays)
+            return;
+        event.preventDefault();
+        // Move the roving target in the SAME (act-wrapped) keydown handler,
+        // not only via the target's onFocus. onFocus is a second event fired by
+        // .focus() and may land in a later microtask that a synchronous
+        // assertion (or a parallel-loaded test runner) hasn't flushed yet;
+        // setting it directly here keeps the tabIndex update in this batch.
+        setFocusedIndex(targetIndex);
+        (_a = dayButtonRefs.current.get(targetIndex)) === null || _a === void 0 ? void 0 : _a.focus();
+    }, [calendarDays, showOtherMonthDays]);
     // Navigation handlers
     const navigateToPreviousMonth = useCallback(() => {
         if (onNavigatePrev === null)
@@ -371,10 +461,44 @@ 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-sm font-medium" })), (resolvedHeaderMode === 'dropdown' || (resolvedHeaderMode === 'mixed' && enableYearDropdown)) && (jsx(Select, { value: currentYear.toString(), onChange: handleYearChange, options: yearOptions, size: "sm", className: "text-sm 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: "ghost", color: "mono", size: "sm", children: jsx(CaretLeft, { className: "size-4", weight: "bold" }) })), 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: "font-medium" })), (resolvedHeaderMode === 'dropdown' || (resolvedHeaderMode === 'mixed' && enableYearDropdown)) && (jsx(Select, { value: currentYear.toString(), onChange: handleYearChange, options: yearOptions, size: "sm", className: "font-medium" }))] })), onNavigateNext !== null && (jsx(Button, { onClick: navigateToNextMonth, "aria-label": "Next month", disabled: !canNavigateToNext, iconOnly: true, variant: "ghost", color: "mono", size: "sm", children: jsx(CaretRight, { className: "size-4", weight: "bold" }) })), onNavigateNext === null && jsx("div", { className: "w-8" })] }), jsx("div", { className: calendarTheme.weekdaysStyle, children: weekdays.map((day, i) => (
+                // Index in the key: default labels (e.g. M,T,W,T,F,S,S) repeat, so `day` alone is not unique.
+                jsx("div", { className: calendarTheme.weekdayStyle, children: day }, `${day}-${i}`))) }), jsx(motion.div, { animate: { height: gridHeight }, transition: springs.smooth, className: cn(calendarTheme.daysGridStyle, "content-start overflow-hidden py-1 -my-1"), 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, { ref: (el) => registerDayButtonRef(index, el), type: "button", onClick: () => {
+                                // Clicking a day makes it the roving-tabindex target
+                                // directly (same act batch as the click), independent of
+                                // the onFocus round-trip.
+                                setFocusedIndex(index);
+                                handleDateSelect(day.date);
+                            }, onKeyDown: (e) => handleDayKeyDown(e, index), onFocus: () => setFocusedIndex(index), tabIndex: index === focusedIndex ? 0 : -1, disabled: day.isDisabled, className: cn(calendarTheme.dayButtonStyle, (_a = calendarTheme.dayButtonSizes) === null || _a === void 0 ? void 0 : _a[size]), "data-selected": day.isSelected || day.isRangeStart || day.isRangeEnd, "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

@@ -3,47 +3,43 @@
  * Uses design tokens and data-[state=*] selectors
  */
 const calendarTheme = {
-    baseStyle: "select-none w-full bg-white dark:bg-[var(--color-neutral-900)]",
+    baseStyle: "select-none w-full",
     headerStyle: "flex items-center justify-between mb-4",
-    titleStyle: "text-base 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-sm 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)] " +
-        "focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary)] focus-visible:ring-offset-2 " +
-        "transition-colors disabled:opacity-50 disabled:cursor-not-allowed " +
-        // Dark mode
-        "dark:text-[var(--color-neutral-500)] dark:hover:text-[var(--color-neutral-200)] dark:hover:bg-[var(--color-neutral-800)] " +
-        "dark:focus-visible:ring-offset-[var(--color-neutral-900)]",
     weekdaysStyle: "grid grid-cols-7 mb-2",
-    weekdayStyle: "flex items-center justify-center h-8 text-xs 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 " +
+    weekdayStyle: "flex items-center justify-center h-8 text-xs font-medium text-[var(--color-text-muted)]",
+    daysGridStyle: "grid grid-cols-7 gap-y-0.5 gap-x-0",
+    rangeCellStyle: "bg-[var(--color-primary-300)]/50 dark:bg-[var(--color-primary-500)]/20 " +
+        "data-[range-pos=start]:rounded-l-full " +
+        "data-[range-pos=end]:rounded-r-full " +
+        "data-[range-pos=single]:rounded-full",
+    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)] " +
+        "text-[var(--color-text-primary)] " +
         // Hover state
-        "hover:bg-[var(--color-primary-50)] dark:hover:bg-[var(--color-neutral-800)] " +
+        "hover:bg-[var(--color-primary-50)] dark:hover:bg-[var(--color-primary)]/30 " +
         // Selected state
-        "data-[selected=true]:bg-[var(--color-primary)] data-[selected=true]:text-white " +
-        "data-[selected=true]:hover:bg-[var(--color-primary-600)] data-[selected=true]:border-t data-[selected=true]:border-white/30 " +
+        "data-[selected=true]:bg-[var(--color-primary)] data-[selected=true]:text-[var(--color-primary-contrast)] " +
+        "data-[selected=true]:hover:bg-[var(--color-primary-600)] data-[selected=true]:dark:hover:bg-[var(--color-primary)]/80 data-[selected=true]:border-t data-[selected=true]:border-white/30 " +
         // Today indicator
         "data-[today=true]:text-[var(--color-primary)] dark:data-[today=true]:text-[var(--color-primary-400)] " +
         // Disabled state
         "data-[disabled=true]:text-[var(--color-text-muted)] data-[disabled=true]:opacity-50 " +
         "data-[disabled=true]:cursor-not-allowed data-[disabled=true]:hover:bg-transparent " +
-        "dark:data-[disabled=true]:text-[var(--color-neutral-600)] " +
         // 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
-        "data-[range-start=true]:bg-[var(--color-primary)] data-[range-start=true]:text-white " +
-        "data-[range-end=true]:bg-[var(--color-primary)] data-[range-end=true]:text-white " +
-        "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)] " +
+        // Range mode: endpoints (start/end) reuse the single-selected styling via
+        // data-selected (set in Calendar.tsx) — ONE source of truth for a selected
+        // day (fill, text, border, hover). In-range (between) days only override
+        // text colour for readability on the strip; their hover intentionally falls
+        // through to the base day-hover above, so a hovered day looks identical
+        // whether or not it sits inside a range.
+        "data-[in-range=true]:text-[var(--color-text-primary)] " +
+        "dark:data-[in-range=true]:text-[var(--color-mono-200)] " +
         // Focus offset for dark mode
-        "dark:focus-visible:ring-offset-[var(--color-neutral-900)]",
+        "dark:focus-visible:ring-offset-[var(--color-mono-900)]",
     dayButtonSizes: {
         sm: "size-8 text-sm",
         md: "size-10 text-sm",

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

@@ -70,7 +70,7 @@ export interface CalendarProps extends Omit<React.HTMLAttributes<HTMLDivElement>
     enableMonthDropdown?: boolean;
     /** Whether to enable year dropdown instead of navigation arrows (default: true) */
     enableYearDropdown?: boolean;
-    /** Year range for dropdown selection (default: ±50 years from current) */
+    /** Year range for dropdown selection (default: 100 years past to 10 years future from current year) */
     yearRange?: {
         start: number;
         end: number;
@@ -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;
 }
@@ -115,10 +117,10 @@ export interface CalendarTheme {
     headerStyle: string;
     titleStyle: string;
     headerDropdownsStyle: string;
-    navButtonStyle: string;
     weekdaysStyle: string;
     weekdayStyle: string;
     daysGridStyle: string;
+    rangeCellStyle: string;
     dayButtonStyle: string;
     dayButtonSizes?: Record<CalendarSize, string>;
 }

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.animations.js

@@ -1,3 +1,4 @@
+"use client";
 const monthTransitionVariants = {
     enter: (direction) => ({
         x: direction > 0 ? 20 : -20,

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

@@ -1,5 +1,6 @@
+"use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { ChevronLeftIcon, ChevronRightIcon } from '@heroicons/react/24/outline';
+import { CaretLeft, CaretRight } from '@phosphor-icons/react';
 import { useReducedMotion, motion, AnimatePresence } from 'motion/react';
 import React__default, { useMemo, useState, useRef, useEffect, useCallback } from 'react';
 import { cn } from '../../../../utils/cn.js';
@@ -7,6 +8,7 @@ import { isCurrentMonth, isDateDisabled, isSameDay } from '../calendar.utils.js'
 import { monthTransitionVariants, dateRowTransitionVariants } from './CalendarMini.animations.js';
 import { calendarMiniTheme } from './CalendarMini.theme.js';
 import { Button } from '../../Button/Button.js';
+import { Link } from '../../Link/Link.js';
 
 /**
  * Generate array of months centered around current month
@@ -182,7 +184,9 @@ const CalendarMini = React__default.forwardRef(({ selectedDate, currentMonth, on
     }, [activeMonth]);
     // Check if date is selected
     const isDateSelected = useCallback((date) => {
-        return defaultSelectedDate ? isSameDay(date, defaultSelectedDate) : false;
+        return defaultSelectedDate
+            ? isSameDay(date, defaultSelectedDate)
+            : false;
     }, [defaultSelectedDate]);
     // Check if date is today
     const isDateToday = useCallback((date) => {
@@ -195,7 +199,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: "mono", 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(CaretLeft, { 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 && {
@@ -207,7 +211,7 @@ const CalendarMini = React__default.forwardRef(({ selectedDate, currentMonth, on
                                             }), className: "flex gap-4", children: months.map((month, index) => {
                                                 const isActive = isMonthActive(month);
                                                 return (jsx("button", { onClick: () => handleMonthClick(month), onKeyDown: (e) => handleKeyDown(e, () => handleMonthClick(month)), "data-state": isActive ? "active" : undefined, className: cn(mergedTheme.monthItemStyle, !isActive && "opacity-60"), role: "tab", "aria-selected": isActive, "aria-label": `${formatMonth(month)} ${month.getFullYear()}`, type: "button", children: formatMonth(month) }, `${month.getFullYear()}-${month.getMonth()}`));
-                                            }) }, `${activeMonth.getFullYear()}-${activeMonth.getMonth()}`) }) }) }), showTodayButton && !isTodayVisible && (jsx(Button, { size: "sm", variant: "link", onClick: handleTodayClick, "aria-label": "Jump to today", className: "mr-7", children: "Today" }))] }), jsx("div", { className: "relative overflow-hidden", style: {
+                                            }) }, `${activeMonth.getFullYear()}-${activeMonth.getMonth()}`) }) }) }), showTodayButton && !isTodayVisible && (jsx(Link, { size: "sm", onClick: handleTodayClick, "aria-label": "Jump to today", className: "mr-7", children: "Today" }))] }), jsx("div", { className: "relative overflow-hidden", 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", { className: cn(mergedTheme.dateRowStyle), role: "list", "aria-label": "Date selection", children: jsx(AnimatePresence, { mode: "popLayout", initial: false, custom: direction, children: jsx(motion.div, { custom: direction, ...(enableAnimations && {
@@ -243,7 +247,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-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)]" }) })] }));
+                                    }) }, `${startDate.getTime()}-dates`) }) }) })] }), jsx(Button, { iconOnly: true, color: "mono", 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(CaretRight, { className: "size-5 text-[var(--color-text-primary)]" }) })] }));
 });
 CalendarMini.displayName = "CalendarMini";
 

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

@@ -1,9 +1,9 @@
 const calendarMiniTheme = {
-    baseStyle: "flex items-center justify-center gap-1 transition-all duration-300",
+    baseStyle: "flex items-center justify-center gap-1 transition-all duration-300 text-sm",
     monthRowStyle: "flex flex-1 gap-4 overflow-x-auto scrollbar-hide scroll-smooth snap-x snap-mandatory px-4 ml-3",
     monthItemStyle: "font-semibold text-[var(--color-text-secondary)] cursor-pointer transition-colors hover:text-[var(--color-text-primary)] flex-shrink-0 snap-center data-[state=active]:text-[var(--color-text-primary)] data-[state=active]:opacity-100",
     dateRowStyle: "relative overflow-hidden px-4 py-0.5",
-    dateItemStyle: "px-0 py-1.5 min-w-[50px] flex flex-col items-center rounded-[var(--form-radius)] cursor-pointer transition-all text-[var(--color-text-primary)] hover:bg-[var(--color-background-tertiary)] flex-shrink-0 snap-center ring-1 ring-transparent data-[state=selected]:bg-[var(--color-background-secondary)] data-[state=selected]:ring-[var(--color-border)] data-[state=selected]:hover:bg-[var(--color-background-secondary)] data-[state=selected]:z-2 data-[disabled]:opacity-40 data-[disabled]:cursor-not-allowed data-[disabled]:hover:bg-[var(--color-background-secondary)]",
+    dateItemStyle: "px-0 py-1.5 min-w-[50px] flex flex-col items-center rounded-[var(--form-radius)] cursor-pointer transition-all text-[var(--color-text-primary)] hover:bg-[var(--color-surface-hover)] flex-shrink-0 snap-center ring-1 ring-transparent data-[state=selected]:bg-[var(--color-background-secondary)] data-[state=selected]:ring-[var(--color-border)] data-[state=selected]:hover:bg-[var(--color-background-secondary)] data-[state=selected]:z-2 data-[disabled]:opacity-40 data-[disabled]:cursor-not-allowed data-[disabled]:hover:bg-[var(--color-background-secondary)]",
 };
 
 export { calendarMiniTheme };

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

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

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

@@ -1,19 +1,30 @@
-import { jsx } from 'react/jsx-runtime';
+"use client";
+import { jsx, jsxs, Fragment } 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 { CardSubtitle } from './CardSubtitle.js';
-import { CardContent } from './CardContent.js';
+import { CardBody } from './CardBody.js';
 import { CardFooter } from './CardFooter.js';
+import { useSurfaceElevation, SurfaceProvider, surfaceClasses } from '../../../theme/SurfaceContext.js';
 
-const CardRoot = React__default.forwardRef(({ children, className, theme: customTheme = {}, darkMode = false, ...props }, ref) => {
+const CardRoot = React__default.forwardRef(({ children, className, theme: customTheme = {}, darkMode = false, title, subtitle, actions, footer, elevation, lift, ...props }, ref) => {
+    // Relative elevation: a Card lifts two rungs above its host substrate (base = 3, so a
+    // standalone card on the floor reads rung 3). shadow:true (the engine default) supplies the
+    // hairline ring + doubling shadow — the ONLY elevation cue in light mode, where rungs 3–8 are
+    // all white; without it a nested (or floor-resting) white card would be edgeless.
+    const surfaceLevel = useSurfaceElevation({ baseRung: 3, offset: 2, elevation, lift });
     const theme = useMemo(() => ({
         ...cardTheme,
         ...customTheme,
     }), [customTheme]);
-    return (jsx("div", { ref: ref, className: cn(theme.baseStyle, darkMode && "dark", className), ...props, children: children }));
+    const hasHeader = Boolean(title || subtitle || actions);
+    // Slot-prop mode: any header/footer slot composes Header/Body/Footer for us.
+    // Otherwise children render raw — the compound API path, unchanged.
+    const managed = hasHeader || Boolean(footer);
+    return (jsx("div", { ref: ref, className: cn(surfaceClasses(surfaceLevel), theme.baseStyle, darkMode && "dark", className), ...props, children: jsx(SurfaceProvider, { level: surfaceLevel, children: managed ? (jsxs(Fragment, { children: [hasHeader && (jsxs(CardHeader, { className: actions ? "flex-row items-start justify-between gap-4" : undefined, children: [(title || subtitle) && (jsxs("div", { className: "flex flex-col", children: [title && jsx(CardTitle, { children: title }), subtitle && jsx(CardSubtitle, { children: subtitle })] })), actions && (jsx("div", { className: "flex items-center gap-2 shrink-0", children: actions }))] })), children != null && jsx(CardBody, { children: children }), footer && jsx(CardFooter, { className: "justify-end gap-2", children: footer })] })) : (children) }) }));
 });
 CardRoot.displayName = 'Card';
 // Create compound component with proper typing
@@ -21,8 +32,8 @@ const Card = Object.assign(CardRoot, {
     Header: CardHeader,
     Title: CardTitle,
     Subtitle: CardSubtitle,
-    Content: CardContent,
+    Body: CardBody,
     Footer: CardFooter,
 });
 
-export { Card, CardContent, CardFooter, CardHeader, CardSubtitle, CardTitle };
+export { Card, CardBody, CardFooter, CardHeader, CardSubtitle, CardTitle };