@flikk/ui 1.0.0-beta.23 → 1.0.0-beta.25

package/dist/components/charts/AreaChart/AreaChart.types.d.ts

@@ -19,7 +19,7 @@ export declare const AREA_CHART_DEFAULTS: {
     readonly radius: 4;
     readonly strokeWidth: 2;
     readonly curved: true;
-    readonly curveType: import("../types/chart.types").CurveType;
+    readonly curveType: import("..").CurveType;
     readonly showDots: true;
     readonly fillOpacity: 0.3;
     readonly showStroke: true;
@@ -32,7 +32,7 @@ export declare const AREA_CHART_DEFAULTS: {
     readonly gap: 4;
     readonly categoryGap: 16;
     readonly orientation: "vertical" | "horizontal";
-    readonly variant: import("../types/chart.types").ChartVariant;
+    readonly variant: import("..").ChartVariant;
     readonly enableKeyboardNavigation: true;
 };
 export type AreaChartData = BaseChartProps['data'][0];

package/dist/components/charts/BarChart/BarChart.types.d.ts

@@ -38,12 +38,12 @@ export declare const BAR_CHART_DEFAULTS: {
     readonly cellRadius: 4;
     readonly strokeWidth: 2;
     readonly curved: true;
-    readonly curveType: import("../types/chart.types").CurveType;
+    readonly curveType: import("..").CurveType;
     readonly fillOpacity: 0.3;
     readonly showStroke: true;
     readonly showDots: true;
     readonly stacked: false;
-    readonly variant: import("../types/chart.types").ChartVariant;
+    readonly variant: import("..").ChartVariant;
     readonly enableKeyboardNavigation: true;
 };
 export type BarChartData = BaseChartProps["data"][0];

package/dist/components/charts/ComboChart/ComboChart.types.d.ts

@@ -32,7 +32,7 @@ export declare const COMBO_CHART_DEFAULTS: {
     readonly dotRadius: 4;
     readonly categoryGap: 16;
     readonly curved: true;
-    readonly curveType: import("../types/chart.types").CurveType;
+    readonly curveType: import("..").CurveType;
     readonly showDots: true;
     readonly showDualAxis: false;
     readonly showGrid: true;
@@ -46,6 +46,6 @@ export declare const COMBO_CHART_DEFAULTS: {
     readonly showStroke: true;
     readonly orientation: "vertical" | "horizontal";
     readonly stacked: false;
-    readonly variant: import("../types/chart.types").ChartVariant;
+    readonly variant: import("..").ChartVariant;
     readonly enableKeyboardNavigation: true;
 };

package/dist/components/charts/LineChart/LineChart.types.d.ts

@@ -15,7 +15,7 @@ export declare const LINE_CHART_DEFAULTS: {
     readonly radius: 4;
     readonly strokeWidth: 2;
     readonly curved: true;
-    readonly curveType: import("../types/chart.types").CurveType;
+    readonly curveType: import("..").CurveType;
     readonly showDots: true;
     readonly showGrid: true;
     readonly showXAxis: true;
@@ -28,6 +28,6 @@ export declare const LINE_CHART_DEFAULTS: {
     readonly showStroke: true;
     readonly orientation: "vertical" | "horizontal";
     readonly stacked: false;
-    readonly variant: import("../types/chart.types").ChartVariant;
+    readonly variant: import("..").ChartVariant;
     readonly enableKeyboardNavigation: true;
 };

package/dist/components/charts/ScatterPlot/ScatterPlot.types.d.ts

@@ -60,12 +60,12 @@ export declare const SCATTER_PLOT_DEFAULTS: {
     readonly gap: 4;
     readonly categoryGap: 16;
     readonly curved: true;
-    readonly curveType: import("../types/chart.types").CurveType;
+    readonly curveType: import("..").CurveType;
     readonly fillOpacity: 0.3;
     readonly showStroke: true;
     readonly showDots: true;
     readonly orientation: "vertical" | "horizontal";
     readonly stacked: false;
-    readonly variant: import("../types/chart.types").ChartVariant;
+    readonly variant: import("..").ChartVariant;
     readonly enableKeyboardNavigation: true;
 };

package/dist/components/charts/StackedBarChart/StackedBarChart.types.d.ts

@@ -23,12 +23,12 @@ export declare const STACKED_BAR_CHART_DEFAULTS: {
     readonly radius: 20;
     readonly strokeWidth: 2;
     readonly curved: true;
-    readonly curveType: import("../types/chart.types").CurveType;
+    readonly curveType: import("..").CurveType;
     readonly fillOpacity: 0.3;
     readonly showStroke: true;
     readonly showDots: true;
     readonly stacked: false;
-    readonly variant: import("../types/chart.types").ChartVariant;
+    readonly variant: import("..").ChartVariant;
     readonly enableKeyboardNavigation: true;
 };
 export type StackedBarChartData = BaseChartProps["data"][0];

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

@@ -8,9 +8,9 @@ const accordionTheme = {
     // Item styles for stacked variant (shared borders, no spacing)
     itemStyleStacked: "bg-white border-t border-[var(--color-border)] first-of-type:border-t-0",
     // Trigger styles (shared across variants)
-    triggerStyle: "flex w-full gap-3 items-center px-4 py-2.5 text-left font-medium transition-all duration-200 cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary)] focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 text-[var(--color-text-primary)]",
+    triggerStyle: "flex w-full gap-3 items-center px-4 py-2.5 text-left font-medium transition-all duration-200 cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary)] focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 text-[var(--color-text-primary)] text-sm",
     // Body styles (shared across variants)
-    bodyStyle: "data-[state=closed]:max-h-0 data-[state=open]:max-h-[320px] accordion-content overflow-hidden",
+    bodyStyle: "data-[state=closed]:max-h-0 data-[state=open]:max-h-[320px] accordion-content overflow-hidden text-sm",
     // Body inner wrapper styles
     bodyInnerStyle: "p-4 pb-2.5 pt-0",
 };

package/dist/components/core/Accordion/AccordionTrigger.js

@@ -24,7 +24,34 @@ const AccordionTrigger = React__default.forwardRef(({ children, className, chevr
     // When chevronPosition="left", render the default animated chevron before children
     const useDefaultOnLeft = chevron !== null && chevronPosition === "left" && chevron === undefined;
     const animatedChevron = (rotation, extraClass) => (jsx(motion.div, { initial: false, animate: isOpen ? "open" : "closed", variants: createTriggerIconVariants(rotation), className: cn("flex items-center justify-center shrink-0", extraClass), children: defaultChevronIcon }));
-    return (jsxs("button", { ref: ref, type: "button", id: triggerId, className: cn(theme === null || theme === void 0 ? void 0 : theme.triggerStyle, className), "aria-expanded": isOpen, "aria-controls": contentId, "data-state": isOpen ? "open" : "closed", onClick: toggle, ...props, children: [useDefaultOnLeft && animatedChevron(resolvedChevronRotation), children, resolvedChevron && (jsx(motion.div, { initial: false, animate: isOpen ? "open" : "closed", variants: createTriggerIconVariants(resolvedChevronRotation), className: "flex items-center justify-center shrink-0 ml-auto", children: resolvedChevron }))] }));
+    const handleKeyDown = (event) => {
+        const currentButton = event.currentTarget;
+        // Find the accordion container (closest ancestor with role="region" or the first
+        // common ancestor that holds all triggers). Walk up until we find a container
+        // that owns multiple [data-accordion-trigger] buttons.
+        let container = currentButton.parentElement;
+        while (container) {
+            const triggers = container.querySelectorAll('[data-accordion-trigger]');
+            if (triggers.length > 1)
+                break;
+            container = container.parentElement;
+        }
+        if (!container)
+            return;
+        const triggers = Array.from(container.querySelectorAll('[data-accordion-trigger]'));
+        const currentIndex = triggers.indexOf(currentButton);
+        if (event.key === 'ArrowDown') {
+            event.preventDefault();
+            const next = triggers[(currentIndex + 1) % triggers.length];
+            next === null || next === void 0 ? void 0 : next.focus();
+        }
+        else if (event.key === 'ArrowUp') {
+            event.preventDefault();
+            const prev = triggers[(currentIndex - 1 + triggers.length) % triggers.length];
+            prev === null || prev === void 0 ? void 0 : prev.focus();
+        }
+    };
+    return (jsxs("button", { ref: ref, type: "button", id: triggerId, className: cn(theme === null || theme === void 0 ? void 0 : theme.triggerStyle, className), "aria-expanded": isOpen, "aria-controls": contentId, "data-state": isOpen ? "open" : "closed", "data-accordion-trigger": true, onClick: toggle, onKeyDown: handleKeyDown, ...props, children: [useDefaultOnLeft && animatedChevron(resolvedChevronRotation), children, resolvedChevron && (jsx(motion.div, { initial: false, animate: isOpen ? "open" : "closed", variants: createTriggerIconVariants(resolvedChevronRotation), className: "flex items-center justify-center shrink-0 ml-auto", children: resolvedChevron }))] }));
 });
 AccordionTrigger.displayName = "Accordion.Trigger";
 

package/dist/components/core/Alert/Alert.js

@@ -41,7 +41,8 @@ const Alert = React__default.forwardRef(({ variant = "default", color = "primary
         const IconComponent = defaultIcons[color];
         return (jsx("div", { className: "flex-shrink-0 w-6 h-6 mt-1", "aria-hidden": "true", children: jsx(IconComponent, { className: cn("w-6 h-6", iconColor) }) }));
     };
-    const alertContent = (jsxs("div", { ref: ref, className: cn(alertTheme.baseStyle, alertTheme.variants[variant], className), role: "alert", "aria-live": "assertive", "aria-atomic": "true", ...props, children: [renderIconOrAvatar(), jsxs("div", { className: `flex-1 min-w-0 ${showDismiss ? "mr-5" : ""}`, children: [title && (typeof title === 'string'
+    const isUrgent = color === 'danger' || color === 'warning';
+    const alertContent = (jsxs("div", { ref: ref, className: cn(alertTheme.baseStyle, alertTheme.variants[variant], className), role: isUrgent ? 'alert' : 'status', "aria-live": isUrgent ? undefined : 'polite', ...props, children: [renderIconOrAvatar(), jsxs("div", { className: `flex-1 min-w-0 ${showDismiss ? "mr-5" : ""}`, children: [title && (typeof title === 'string'
                         ? jsx("div", { className: cn("font-semibold text-[var(--color-text-primary)]"), children: title })
                         : title), subtitle && (typeof subtitle === 'string'
                         ? jsx("div", { className: "text-[var(--color-text-secondary)]/90 mt-1", children: subtitle })

package/dist/components/core/AlertDialog/AlertDialog.js

@@ -10,7 +10,7 @@ const AlertDialog = ({ trigger, icon, title, subtitle, footer, className, }) =>
     const triggerElement = isValidElement(trigger)
         ? cloneElement(trigger, { onClick: handleOpen })
         : null;
-    return (jsxs(Fragment, { children: [triggerElement, jsxs(Modal, { isOpen: isOpen, onClose: handleClose, size: "sm", closeOnOverlayClick: false, closeOnEsc: false, showCloseButton: false, role: "alertdialog", className: cn("!overflow-visible", className), children: [jsxs(Modal.Header, { children: [icon && (jsx("div", { className: "text-2xl rounded-full p-3  mb-3 w-fit glass-effect shadow-xl shadow-black/5", "aria-hidden": "true", children: icon })), jsx(Modal.Title, { children: title })] }), jsx(Modal.Body, { className: "pt-2", children: jsx("div", { className: "text-[var(--color-text-secondary)] text-base", children: subtitle }) }), footer && (jsx(Modal.Footer, { className: "pb-6", children: footer(handleClose) }))] })] }));
+    return (jsxs(Fragment, { children: [triggerElement, jsxs(Modal, { isOpen: isOpen, onClose: handleClose, size: "sm", closeOnOverlayClick: false, closeOnEsc: !footer, showCloseButton: false, role: "alertdialog", className: cn("!overflow-visible", className), children: [jsxs(Modal.Header, { children: [icon && (jsx("div", { className: "text-2xl rounded-full p-3  mb-3 w-fit glass-effect shadow-xl shadow-black/5", "aria-hidden": "true", children: icon })), jsx(Modal.Title, { children: title })] }), jsx(Modal.Body, { className: "pt-2", children: jsx("div", { className: "text-[var(--color-text-secondary)] text-base", children: subtitle }) }), footer && (jsx(Modal.Footer, { className: "pb-6", children: footer(handleClose) }))] })] }));
 };
 AlertDialog.displayName = "AlertDialog";
 

package/dist/components/core/Badge/Badge.js

@@ -1,6 +1,6 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import React__default, { useState, useMemo, useCallback } from 'react';
-import { AnimatePresence, motion } from 'motion/react';
+import React__default, { useState, useCallback } from 'react';
+import { useReducedMotion, AnimatePresence, motion } from 'motion/react';
 import { XMarkIcon } from '@heroicons/react/24/outline';
 import { UserIcon } from '@heroicons/react/16/solid';
 import { cn } from '../../../utils/cn.js';
@@ -8,19 +8,6 @@ import { Avatar } from '../Avatar/Avatar.js';
 import { animationTiming, dismissVariants, badgeVariants, dismissButtonVariants, dotVariants } from './Badge.animations.js';
 import { badgeTheme } from './Badge.theme.js';
 
-// Helper to determine whether we should animate (Storybook can disable animations globally)
-const getShouldAnimate = () => {
-    if (typeof window === "undefined")
-        return true;
-    if (window.__STORYBOOK_DISABLE_ANIMATIONS__)
-        return false;
-    try {
-        return !window.matchMedia("(prefers-reduced-motion: reduce)").matches;
-    }
-    catch (_a) {
-        return true;
-    }
-};
 /**
  * Badge component for displaying status, labels, or counters.
  *
@@ -36,7 +23,9 @@ const Badge = React__default.memo(React__default.forwardRef(({ children, variant
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
     // State management
     const [isVisible, setIsVisible] = useState(true);
-    const shouldAnimate = useMemo(getShouldAnimate, []);
+    // useReducedMotion is SSR-safe (returns null on server, actual value after hydration)
+    const prefersReducedMotion = useReducedMotion();
+    const shouldAnimate = !prefersReducedMotion;
     // Development-only warnings
     if (process.env.NODE_ENV !== "production") {
         if (dismissible && !onDismiss) {
@@ -155,7 +144,7 @@ const Badge = React__default.memo(React__default.forwardRef(({ children, variant
     if (!shouldAnimate) {
         // Spread props directly — Badge only receives HTMLSpanElement attributes
         const restHtmlProps = props;
-        // Non-animated render for Storybook or reduced-motion environments
+        // Non-animated render for reduced-motion environments
         return isVisible ? (jsxs("span", { ref: ref, className: baseStyles, onClick: handleClick, "aria-disabled": disabled || undefined, ...dataAttributes, ...restHtmlProps, children: [renderLeftContent(), jsx("span", { className: cn("badge-content", maxWidth && "truncate"), style: maxWidth
                         ? {
                             maxWidth: typeof maxWidth === "number"

package/dist/components/core/Breadcrumbs/Breadcrumbs.js

@@ -39,20 +39,17 @@ const Breadcrumbs = ({ items, separator, maxItems = 4, variant = "default", clas
         return { visibleItems, hiddenItems };
     };
     const { visibleItems, hiddenItems } = getVisibleItems();
-    // Render individual breadcrumb item
+    // Render the inner content of a breadcrumb item (icon + label)
+    const renderItemContent = (item) => (jsxs(Fragment, { children: [showIcons && item.iconStart && (jsx("span", { className: "mr-1.5 flex-shrink-0", children: item.iconStart })), typeof item.label === 'string'
+                ? jsx("span", { children: item.label })
+                : item.label] }));
+    // Render individual breadcrumb item wrapped in its own <li>
     const renderItem = (item, index, isLast) => {
         const isCurrentPage = isLast || !item.href;
-        const itemContent = (jsxs(Fragment, { children: [showIcons && item.iconStart && (jsx("span", { className: "mr-1.5 flex-shrink-0", children: item.iconStart })), typeof item.label === 'string'
-                    ? jsx("span", { children: item.label })
-                    : item.label] }));
-        return (jsx("span", { className: "flex items-center text-base", children: isCurrentPage ? (jsx("span", { className: cn("flex items-center", theme.current), "aria-current": "page", children: itemContent })) : (jsx("a", { href: item.href, className: cn("flex items-center", theme.link), "aria-label": typeof item.label === 'string' ? `Navigate to ${item.label}` : undefined, children: itemContent })) }, `breadcrumb-${index}`));
+        return (jsxs("li", { className: "flex items-center", children: [isCurrentPage ? (jsx("span", { className: cn("flex items-center text-sm", theme.current), "aria-current": "page", children: renderItemContent(item) })) : (jsx("a", { href: item.href, className: cn("flex items-center text-sm", theme.link), "aria-label": typeof item.label === 'string' ? `Navigate to ${item.label}` : undefined, children: renderItemContent(item) })), !isLast && (jsx("span", { className: cn("flex items-center ml-1", theme.separator), "aria-hidden": "true", children: SeparatorComponent }))] }, `breadcrumb-${index}`));
     };
-    // Render separator
-    const renderSeparator = (index) => {
-        return (jsx("span", { className: cn("flex items-center", theme.separator), "aria-hidden": "true", children: SeparatorComponent }, `separator-${index}`));
-    };
-    // Render ellipsis with dropdown
-    const renderEllipsis = () => {
+    // Render ellipsis with dropdown wrapped in its own <li>
+    const renderEllipsis = (separatorIndex) => {
         if (hiddenItems.length === 0)
             return null;
         const handleEllipsisAction = (itemKey) => {
@@ -62,29 +59,24 @@ const Breadcrumbs = ({ items, separator, maxItems = 4, variant = "default", clas
                 window.location.href = selectedItem.href;
             }
         };
-        return (jsxs(Dropdown, { isOpen: isEllipsisOpen, onOpenChange: setIsEllipsisOpen, onAction: handleEllipsisAction, placement: "bottom-start", offset: 8, children: [jsx(Dropdown.Trigger, { children: jsx("button", { type: "button", className: cn(theme.ellipsis), "aria-label": `Navigate to one of ${hiddenItems.length} hidden breadcrumbs`, children: "..." }) }), jsx(Dropdown.Menu, { "aria-label": "Hidden breadcrumb items", children: hiddenItems.map((item, index) => (jsx(Dropdown.Item, { itemKey: `hidden-${index}`, startContent: showIcons && item.iconStart, children: typeof item.label === 'string'
-                            ? jsx("span", { children: item.label })
-                            : item.label }, `hidden-${index}`))) })] }, "ellipsis"));
+        return (jsxs("li", { className: "flex items-center", children: [jsxs(Dropdown, { isOpen: isEllipsisOpen, onOpenChange: setIsEllipsisOpen, onAction: handleEllipsisAction, placement: "bottom-start", offset: 8, children: [jsx(Dropdown.Trigger, { children: jsx("button", { type: "button", className: cn(theme.ellipsis), "aria-label": `Navigate to one of ${hiddenItems.length} hidden breadcrumbs`, children: "..." }) }), jsx(Dropdown.Menu, { "aria-label": "Hidden breadcrumb items", children: hiddenItems.map((item, index) => (jsx(Dropdown.Item, { itemKey: `hidden-${index}`, startContent: showIcons && item.iconStart, children: typeof item.label === 'string'
+                                    ? jsx("span", { children: item.label })
+                                    : item.label }, `hidden-${index}`))) })] }), jsx("span", { className: cn("flex items-center ml-1", theme.separator), "aria-hidden": "true", children: SeparatorComponent }, `separator-${separatorIndex}`)] }, "ellipsis"));
     };
-    // Build the breadcrumb elements
+    // Build the breadcrumb <li> elements
     const breadcrumbElements = [];
     let separatorIndex = 0; // Unique separator counter
     if (shouldCollapse) {
-        // Add first item
+        // Add first item (not last, so it will include a separator)
         breadcrumbElements.push(renderItem(visibleItems[0], 0, false));
-        breadcrumbElements.push(renderSeparator(separatorIndex++));
-        // Add ellipsis
-        breadcrumbElements.push(renderEllipsis());
-        breadcrumbElements.push(renderSeparator(separatorIndex++));
+        // Add ellipsis (includes its own trailing separator)
+        breadcrumbElements.push(renderEllipsis(separatorIndex++));
         // Add last two items
         const lastTwoItems = visibleItems.slice(1);
         lastTwoItems.forEach((item, index) => {
             const actualIndex = index + 1;
-            const isLast = actualIndex === lastTwoItems.length;
+            const isLast = index === lastTwoItems.length - 1;
             breadcrumbElements.push(renderItem(item, actualIndex, isLast));
-            if (!isLast) {
-                breadcrumbElements.push(renderSeparator(separatorIndex++));
-            }
         });
     }
     else {
@@ -92,12 +84,9 @@ const Breadcrumbs = ({ items, separator, maxItems = 4, variant = "default", clas
         visibleItems.forEach((item, index) => {
             const isLast = index === visibleItems.length - 1;
             breadcrumbElements.push(renderItem(item, index, isLast));
-            if (!isLast) {
-                breadcrumbElements.push(renderSeparator(separatorIndex++));
-            }
         });
     }
-    return (jsx("nav", { "aria-label": "Breadcrumb", className: cn("flex items-center", className), ...props, children: jsx("ol", { className: "flex items-center gap-1", children: jsx("li", { className: "contents", children: breadcrumbElements }) }) }));
+    return (jsx("nav", { "aria-label": "Breadcrumb", className: cn("flex items-center", className), ...props, children: jsx("ol", { className: "flex items-center gap-1 flex-wrap", children: breadcrumbElements }) }));
 };
 Breadcrumbs.displayName = "Breadcrumbs";
 

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

@@ -10,7 +10,7 @@ const breadcrumbsTheme = {
     link: "text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)] transition-colors duration-150 font-medium",
     current: "text-[var(--color-text-primary)] font-medium",
     separator: "text-[var(--color-text-muted)] select-none",
-    ellipsis: "text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)] transition-colors duration-150 cursor-pointer p-1 rounded hover:bg-[var(--color-background-tertiary)]",
+    ellipsis: "text-sm text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)] transition-colors duration-150 cursor-pointer p-1 rounded hover:bg-[var(--color-background-tertiary)]",
 };
 /**
  * Variant styles for different breadcrumb appearances
@@ -21,7 +21,7 @@ const breadcrumbsVariants = {
         link: "text-[var(--color-text-muted)] hover:text-[var(--color-text-secondary)] transition-colors duration-150 font-normal",
         current: "text-[var(--color-text-secondary)] font-normal",
         separator: "text-[var(--color-border)]",
-        ellipsis: "text-[var(--color-text-muted)] hover:text-[var(--color-text-secondary)] transition-colors duration-150 cursor-pointer p-1 rounded hover:bg-[var(--color-background-secondary)]",
+        ellipsis: "text-sm text-[var(--color-text-muted)] hover:text-[var(--color-text-secondary)] transition-colors duration-150 cursor-pointer p-1 rounded hover:bg-[var(--color-background-secondary)]",
     },
 };
 /**

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

@@ -371,7 +371,7 @@ 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, index) => {
+    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: "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: "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) => (jsx("div", { className: calendarTheme.weekdayStyle, children: day }, day))) }), jsx("div", { className: calendarTheme.daysGridStyle, children: calendarDays.map((day, index) => {
                     var _a;
                     const dayNumber = day.date.getDate();
                     const isInStrip = day.isRangeStart || day.isRangeEnd || day.isInRange;

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

@@ -182,7 +182,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) => {
@@ -242,7 +244,7 @@ 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-base font-medium opacity-60", children: formatDayName(date) }), jsx("time", { dateTime: date.toISOString(), className: cn("font-semibold"), children: formatDateNumber(date) })] }, date.toISOString()));
+                                            }), 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: "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/Calendar/CalendarMini/CalendarMini.theme.js

@@ -1,5 +1,5 @@
 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",

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

@@ -41,8 +41,13 @@ const CarouselBody = React__default.forwardRef(({ className, children, ...props
                 : { type: 'spring', stiffness: 180, damping: 25, mass: 0.7 }, children: React__default.Children.map(children, (child, index) => {
                 if (!React__default.isValidElement(child))
                     return child;
+                const isActive = index === currentIndex;
                 return React__default.cloneElement(child, {
-                    'aria-hidden': index !== currentIndex,
+                    'aria-hidden': !isActive,
+                    // inert removes all focusable descendants from tab order and hides
+                    // them from assistive technologies when the slide is not active.
+                    // The empty string is the correct value for boolean HTML attributes in React.
+                    inert: !isActive ? "" : undefined,
                 });
             }) }) }));
 });

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

@@ -100,6 +100,8 @@ const ContextMenuBody = React__default.forwardRef(({ children, className, animat
     // Update position when menu opens
     useEffect(() => {
         if (isOpen && cursorPosition) {
+            if (typeof window === "undefined")
+                return;
             // Get cursor position from trigger
             const { x, y } = cursorPosition;
             // Adjust position to keep menu in viewport
@@ -135,6 +137,8 @@ const ContextMenuBody = React__default.forwardRef(({ children, className, animat
     useEffect(() => {
         if (!isOpen)
             return;
+        if (typeof window === "undefined")
+            return;
         const handleScroll = () => {
             onOpenChange(false);
         };
@@ -188,9 +192,8 @@ const ContextMenuBody = React__default.forwardRef(({ children, className, animat
                     damping: 30,
                 }, "data-state": isOpen ? "open" : "closed", ...domProps, children: children })) }));
     // Always use portal for context menus
-    return isClient
-        ? createPortal(menuContent, document.body)
-        : null;
+    const portalTarget = isClient ? document.body : null;
+    return portalTarget ? createPortal(menuContent, portalTarget) : null;
 });
 ContextMenuBody.displayName = "ContextMenu.Body";
 

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

@@ -19,6 +19,8 @@ const ContextMenuSubBody = React__default.forwardRef(({ children, className, ani
     // Update position when submenu opens
     useEffect(() => {
         if (isOpen && triggerRef.current) {
+            if (typeof window === "undefined")
+                return;
             const triggerRect = triggerRef.current.getBoundingClientRect();
             // Position to the right of the trigger
             let x = triggerRect.right + 4; // 4px offset
@@ -44,6 +46,8 @@ const ContextMenuSubBody = React__default.forwardRef(({ children, className, ani
     useEffect(() => {
         if (!isOpen)
             return;
+        if (typeof window === "undefined")
+            return;
         const handleScroll = () => {
             onOpenChange(false);
         };
@@ -97,9 +101,8 @@ const ContextMenuSubBody = React__default.forwardRef(({ children, className, ani
                     damping: 30,
                 }, "data-state": isOpen ? "open" : "closed", ...domProps, children: children })) }));
     // Always use portal for submenus
-    return isClient
-        ? createPortal(submenuContent, document.body)
-        : null;
+    const portalTarget = isClient ? document.body : null;
+    return portalTarget ? createPortal(submenuContent, portalTarget) : null;
 });
 ContextMenuSubBody.displayName = "ContextMenu.SubBody";