reshaped 3.9.0-canary.0 → 3.9.0-canary.10

package/dist/components/Calendar/CalendarControlled.js

@@ -4,14 +4,14 @@ import React from "react";
 import View from "../View/index.js";
 import { onNextFrame } from "../../utilities/animation.js";
 import { setMonthToPrevious, setMonthToNext, setMonthTo, setYearToNext, setYearToPrevious, applyNavigationBounds, } from "./Calendar.utils.js";
-import useCalendarKeyboardNavigation from "./useCalendarKeyboardNavigation.js";
+import CalendarControls from "./CalendarControls.js";
 import CalendarMonth from "./CalendarMonth.js";
 import CalendarYear from "./CalendarYear.js";
-import CalendarControls from "./CalendarControls.js";
+import useCalendarKeyboardNavigation from "./useCalendarKeyboardNavigation.js";
 const CalendarControlled = (props) => {
-    const { value, onChange, defaultMonth, min, max, range, firstWeekDay, selectedDates, renderMonthLabel, renderSelectedMonthLabel, renderWeekDay, previousMonthAriaLabel, previousYearAriaLabel, nextMonthAriaLabel, nextYearAriaLabel, monthSelectionAriaLabel, renderMonthAriaLabel, renderDateAriaLabel, } = props;
+    const { value, onChange, defaultMonth, month, onMonthChange, min, max, range, firstWeekDay, selectedDates, disabledDates, monthsToRender = 1, renderMonthLabel, renderSelectedMonthLabel, renderWeekDay, previousMonthAriaLabel, previousYearAriaLabel, nextMonthAriaLabel, nextYearAriaLabel, monthSelectionAriaLabel, renderMonthAriaLabel, renderDateAriaLabel, renderDateSlot, } = props;
     const [selectionMode, setSelectionMode] = React.useState("date");
-    const [monthDate, setMonthDate] = React.useState(defaultMonth || new Date());
+    const [monthDate, setMonthDate] = React.useState(month || defaultMonth || new Date());
     const [hoveredDate, setHoveredDate] = React.useState(null);
     const monthTitleRef = React.useRef(null);
     const prevSelectionModeRef = React.useRef(selectionMode);
@@ -19,23 +19,38 @@ const CalendarControlled = (props) => {
     const selectionRootRef = React.useRef(null);
     const handlePreviousClick = () => {
         if (selectionMode === "month") {
-            setMonthDate((prev) => setYearToPrevious(prev));
+            const updatedMonth = setYearToPrevious(monthDate);
+            onMonthChange?.({ date: updatedMonth });
+            if (month === undefined)
+                setMonthDate(updatedMonth);
             return;
         }
-        setMonthDate((prev) => setMonthToPrevious(prev));
+        const updatedMonth = setMonthToPrevious(monthDate);
+        onMonthChange?.({ date: updatedMonth });
+        if (month === undefined)
+            setMonthDate(updatedMonth);
     };
     const handleNextClick = () => {
         if (selectionMode === "month") {
-            setMonthDate((prev) => setYearToNext(prev));
+            const updatedMonth = setYearToNext(monthDate);
+            onMonthChange?.({ date: updatedMonth });
+            if (month === undefined)
+                setMonthDate(updatedMonth);
             return;
         }
-        setMonthDate((prev) => setMonthToNext(prev));
+        const updatedMonth = setMonthToNext(monthDate);
+        onMonthChange?.({ date: updatedMonth });
+        if (month === undefined)
+            setMonthDate(updatedMonth);
     };
     const handleMonthTitleClick = () => {
         setSelectionMode("month");
     };
     const handleMonthClick = (i) => {
-        setMonthDate((prev) => setMonthTo(prev, i));
+        const updatedMonth = setMonthTo(monthDate, i);
+        onMonthChange?.({ date: updatedMonth });
+        if (month === undefined)
+            setMonthDate(updatedMonth);
         setSelectionMode("date");
     };
     const handleDateHover = (date) => {
@@ -53,6 +68,14 @@ const CalendarControlled = (props) => {
         }
         prevSelectionModeRef.current = selectionMode;
     }, [selectionMode]);
+    /**
+     * Handle rendering in controlled mode
+     */
+    React.useEffect(() => {
+        if (!month)
+            return;
+        setMonthDate(month);
+    }, [month]);
     useCalendarKeyboardNavigation({
         monthDate,
         rootRef: selectionRootRef,
@@ -63,7 +86,19 @@ const CalendarControlled = (props) => {
         min,
         max,
     });
-    return (_jsxs(View, { gap: 2, children: [_jsx(CalendarControls, { renderSelectedMonthLabel: renderSelectedMonthLabel, monthDate: monthDate, selectionMode: selectionMode, isFirstMonth: bounds.isFirstMonth, isLastMonth: bounds.isLastMonth, monthTitleRef: monthTitleRef, onMonthTitleClick: handleMonthTitleClick, onNextClick: handleNextClick, onPreviousClick: handlePreviousClick, previousMonthAriaLabel: previousMonthAriaLabel, previousYearAriaLabel: previousYearAriaLabel, nextMonthAriaLabel: nextMonthAriaLabel, nextYearAriaLabel: nextYearAriaLabel, monthSelectionAriaLabel: monthSelectionAriaLabel }), _jsxs(View.Item, { attributes: { ref: selectionRootRef }, children: [selectionMode === "date" && (_jsx(CalendarMonth, { date: monthDate, value: value, onChange: onChange, min: min, max: max, range: range, firstWeekDay: firstWeekDay, hoveredDate: hoveredDate, selectedDates: selectedDates, onDateHover: handleDateHover, onDateHoverEnd: handleDateHoverEnd, renderWeekDay: renderWeekDay, renderDateAriaLabel: renderDateAriaLabel })), selectionMode === "month" && (_jsx(CalendarYear, { monthDate: monthDate, onMonthClick: handleMonthClick, renderMonthLabel: renderMonthLabel, renderMonthAriaLabel: renderMonthAriaLabel, min: min, max: max }))] })] }));
+    return (_jsxs(View, { gap: 2, children: [_jsx(View, { direction: "row", gap: 4, children: Array.from({ length: selectionMode === "date" ? monthsToRender : 1 }).map((_, index) => {
+                    const hidePrevious = bounds.isFirstMonth || (monthsToRender > 0 && index > 0);
+                    const hideNext = bounds.isLastMonth ||
+                        (selectionMode === "date" && monthsToRender > 0 && index < monthsToRender - 1);
+                    const currentMonthDate = new Date(monthDate);
+                    currentMonthDate.setMonth(currentMonthDate.getMonth() + index);
+                    return (_jsx(View.Item, { grow: true, children: _jsx(CalendarControls, { renderSelectedMonthLabel: renderSelectedMonthLabel, monthDate: currentMonthDate, selectionMode: selectionMode, hidePrevious: hidePrevious, hideNext: hideNext, monthTitleRef: index === 0 ? monthTitleRef : undefined, onMonthTitleClick: handleMonthTitleClick, onNextClick: handleNextClick, onPreviousClick: handlePreviousClick, previousMonthAriaLabel: previousMonthAriaLabel, previousYearAriaLabel: previousYearAriaLabel, nextMonthAriaLabel: nextMonthAriaLabel, nextYearAriaLabel: nextYearAriaLabel, monthSelectionAriaLabel: monthSelectionAriaLabel, monthsToRender: monthsToRender }) }, index));
+                }) }), _jsxs(View, { direction: "row", gap: 4, attributes: { ref: selectionRootRef }, children: [selectionMode === "date" &&
+                        Array.from({ length: monthsToRender }).map((_, index) => {
+                            const currentMonthDate = new Date(monthDate);
+                            currentMonthDate.setMonth(currentMonthDate.getMonth() + index);
+                            return (_jsx(View.Item, { grow: true, children: _jsx(CalendarMonth, { date: currentMonthDate, value: value, onChange: onChange, min: min, max: max, range: range, firstWeekDay: firstWeekDay, hoveredDate: hoveredDate, selectedDates: selectedDates, disabledDates: disabledDates, onDateHover: handleDateHover, onDateHoverEnd: handleDateHoverEnd, renderWeekDay: renderWeekDay, renderDateAriaLabel: renderDateAriaLabel, renderDateSlot: renderDateSlot }) }, index));
+                        }), selectionMode === "month" && (_jsx(CalendarYear, { monthDate: monthDate, onMonthClick: handleMonthClick, renderMonthLabel: renderMonthLabel, renderMonthAriaLabel: renderMonthAriaLabel, min: min, max: max }))] })] }));
 };
 CalendarControlled.displayName = "CalendarControlled";
 export default CalendarControlled;

package/dist/components/Calendar/CalendarControls.js

@@ -1,44 +1,44 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
 import Button from "../Button/index.js";
-import View from "../View/index.js";
 import Hidden from "../Hidden/index.js";
-import Text from "../Text/index.js";
 import HiddenVisually from "../HiddenVisually/index.js";
+import Text from "../Text/index.js";
+import View from "../View/index.js";
 import IconChevronLeft from "../../icons/ChevronLeft.js";
 import IconChevronRight from "../../icons/ChevronRight.js";
 import { onNextFrame } from "../../utilities/animation.js";
 import s from "./Calendar.module.css";
 const CalendarControls = (props) => {
-    const { selectionMode, onMonthTitleClick, monthTitleRef, monthDate, renderSelectedMonthLabel, isFirstMonth, isLastMonth, onNextClick, onPreviousClick, monthSelectionAriaLabel = "Select a month", previousMonthAriaLabel = "Previous month", previousYearAriaLabel = "Previous year", nextMonthAriaLabel = "Next month", nextYearAriaLabel = "Next year", } = props;
+    const { selectionMode, onMonthTitleClick, monthTitleRef, monthDate, renderSelectedMonthLabel, hidePrevious, hideNext, onNextClick, onPreviousClick, monthSelectionAriaLabel = "Select a month", previousMonthAriaLabel = "Previous month", previousYearAriaLabel = "Previous year", nextMonthAriaLabel = "Next month", nextYearAriaLabel = "Next year", } = props;
     const prevRef = React.useRef(null);
     const nextRef = React.useRef(null);
     React.useEffect(() => {
-        if (!isFirstMonth)
+        if (!hidePrevious)
             return;
         if (document.activeElement !== prevRef.current)
             return;
-        const targetEl = nextRef.current || monthTitleRef.current;
+        const targetEl = nextRef.current || monthTitleRef?.current;
         onNextFrame(() => {
             targetEl?.focus();
         });
-    }, [isFirstMonth, monthTitleRef]);
+    }, [hidePrevious, monthTitleRef]);
     React.useEffect(() => {
-        if (!isLastMonth)
+        if (!hideNext)
             return;
         if (document.activeElement !== nextRef.current)
             return;
-        const targetEl = prevRef.current || monthTitleRef.current;
+        const targetEl = prevRef.current || monthTitleRef?.current;
         onNextFrame(() => {
             targetEl?.focus();
         });
-    }, [isLastMonth, monthTitleRef]);
-    return (_jsxs(View, { direction: "row", gap: 2, align: "center", children: [_jsx(Hidden, { visibility: true, hide: isFirstMonth, children: _jsx("div", { className: s.control, children: _jsx(Button, { variant: "ghost", icon: IconChevronLeft, onClick: onPreviousClick, attributes: {
+    }, [hideNext, monthTitleRef]);
+    return (_jsxs(View, { direction: "row", gap: 2, align: "center", children: [_jsx(Hidden, { visibility: true, hide: hidePrevious, children: _jsx("div", { className: s.control, children: _jsx(Button, { variant: "ghost", icon: IconChevronLeft, onClick: onPreviousClick, attributes: {
                             ref: prevRef,
                             "aria-label": selectionMode === "date" ? previousMonthAriaLabel : previousYearAriaLabel,
                         } }) }) }), _jsxs(View.Item, { grow: true, children: [selectionMode === "date" && (_jsxs(Button, { fullWidth: true, variant: "ghost", onClick: onMonthTitleClick, attributes: { ref: monthTitleRef }, children: [renderSelectedMonthLabel
                                 ? renderSelectedMonthLabel({ date: monthDate })
-                                : monthDate.toLocaleDateString("en-US", { month: "long", year: "numeric" }), _jsx(HiddenVisually, { children: monthSelectionAriaLabel })] })), selectionMode === "month" && (_jsx(Text, { align: "center", weight: "medium", children: monthDate.toLocaleDateString("en-US", { year: "numeric" }) }))] }), _jsx(Hidden, { visibility: true, hide: isLastMonth, children: _jsx("div", { className: s.control, children: _jsx(Button, { variant: "ghost", icon: IconChevronRight, onClick: onNextClick, attributes: {
+                                : monthDate.toLocaleDateString("en-US", { month: "long", year: "numeric" }), _jsx(HiddenVisually, { children: monthSelectionAriaLabel })] })), selectionMode === "month" && (_jsx(Text, { align: "center", weight: "medium", children: monthDate.toLocaleDateString("en-US", { year: "numeric" }) }))] }), _jsx(Hidden, { visibility: true, hide: hideNext, children: _jsx("div", { className: s.control, children: _jsx(Button, { variant: "ghost", icon: IconChevronRight, onClick: onNextClick, attributes: {
                             ref: nextRef,
                             "aria-label": selectionMode === "date" ? nextMonthAriaLabel : nextYearAriaLabel,
                         } }) }) })] }));

package/dist/components/Calendar/CalendarDate.js

@@ -1,21 +1,23 @@
 "use client";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import Actionable from "../Actionable/index.js";
 import { classNames } from "../../utilities/props.js";
-import { getLocalISODate } from "./Calendar.utils.js";
 import s from "./Calendar.module.css";
+import { getLocalISODate } from "./Calendar.utils.js";
 const CalendarDate = (props) => {
-    const { date, isoDate, startValue, endValue, disabled, focusable, onChange, range, hoveredDate, onDateHover, onDateHoverEnd, onDateFocus, renderAriaLabel, selectedDates, } = props;
+    const { date, isoDate, startValue, endValue, disabled: passedDisabled, focusable, onChange, range, hoveredDate, onDateHover, onDateHoverEnd, onDateFocus, selectedDates, disabledDates, renderAriaLabel, renderSlot, } = props;
     if (!date)
         return _jsx("td", { className: s.cell, "aria-hidden": "true" });
     const isoStartValue = startValue && getLocalISODate({ date: startValue });
     const isoEndValue = endValue && getLocalISODate({ date: endValue });
-    const isStartValue = !!isoDate && !!isoStartValue && isoDate === isoStartValue;
-    const isEndValue = !!isoDate && !!isoEndValue && isoDate === isoEndValue;
-    const isAfterStartValue = startValue && date > startValue;
-    const isBeforeEndValue = endValue && date < endValue;
-    const isInHoveredRange = hoveredDate && !endValue && hoveredDate > date;
-    const isInSelectedDates = !!selectedDates?.find((selectedDate) => getLocalISODate({ date: selectedDate }) === isoDate);
+    const isStartValue = Boolean(isoDate && !!isoStartValue && isoDate === isoStartValue);
+    const isEndValue = Boolean(isoDate && !!isoEndValue && isoDate === isoEndValue);
+    const isAfterStartValue = Boolean(isoDate && isoStartValue && isoDate > isoStartValue);
+    const isBeforeEndValue = Boolean(isoDate && isoEndValue && isoDate < isoEndValue);
+    const isInHoveredRange = Boolean(hoveredDate && !endValue && hoveredDate > date);
+    const isInSelectedDates = !!selectedDates?.some((selectedDate) => getLocalISODate({ date: selectedDate }) === isoDate);
+    const disabled = passedDisabled ||
+        disabledDates?.some((disabledDate) => getLocalISODate({ date: disabledDate }) === isoDate);
     let selection;
     switch (true) {
         case isAfterStartValue && isInHoveredRange:
@@ -61,7 +63,7 @@ const CalendarDate = (props) => {
         handleMouseEnter();
         onDateFocus(date);
     };
-    return (_jsx("td", { className: dateClassNames, role: disabled ? "presentation" : "gridcell", children: _jsx(Actionable, { fullWidth: true, insetFocus: true, className: s["cell-button"], disabled: disabled, onClick: handleClick, attributes: {
+    return (_jsx("td", { className: dateClassNames, role: disabled ? "presentation" : "gridcell", children: _jsxs(Actionable, { fullWidth: true, insetFocus: true, className: s["cell-button"], disabled: disabled, onClick: handleClick, attributes: {
                 role: "checkbox",
                 tabIndex: focusable ? 0 : -1,
                 "aria-hidden": disabled,
@@ -74,7 +76,7 @@ const CalendarDate = (props) => {
                 onMouseLeave: handleMouseLeave,
                 onFocus: handleFocus,
                 onBlur: handleMouseLeave,
-            }, children: date.getDate() }) }));
+            }, children: [date.getDate(), renderSlot?.({ date, selected: Boolean(selection && selection !== "range") })] }) }));
 };
 CalendarDate.displayName = "CalendarDate";
 export default CalendarDate;

package/dist/components/Calendar/CalendarMonth.js

@@ -1,11 +1,11 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from "react";
+import s from "./Calendar.module.css";
 import { getMonthWeeks, getWeekdayNames, getLocalISODate, isDateFocusable } from "./Calendar.utils.js";
 import CalendarDate from "./CalendarDate.js";
-import s from "./Calendar.module.css";
 const CalendarMonth = (props) => {
-    const { date, value, onChange, min, max, range, firstWeekDay, selectedDates, hoveredDate, onDateHover, onDateHoverEnd, renderWeekDay, renderDateAriaLabel, } = props;
+    const { date, value, onChange, min, max, range, firstWeekDay, selectedDates, disabledDates, hoveredDate, onDateHover, onDateHoverEnd, renderWeekDay, renderDateAriaLabel, renderDateSlot, } = props;
     let foundFocusableDate = false;
     const [lastFocusedDate, setLastFocusedDate] = useState();
     const month = date.getMonth();
@@ -26,7 +26,7 @@ const CalendarMonth = (props) => {
                             // eslint-disable-next-line react-hooks/immutability
                             if (focusable)
                                 foundFocusableDate = true;
-                            return (_jsx(CalendarDate, { date: date, isoDate: isoDate, disabled: disabled, range: range, focusable: focusable, startValue: startValue, endValue: endValue, onChange: onChange, hoveredDate: hoveredDate, onDateHover: onDateHover, onDateHoverEnd: onDateHoverEnd, onDateFocus: setLastFocusedDate, renderAriaLabel: renderDateAriaLabel, selectedDates: selectedDates }, index));
+                            return (_jsx(CalendarDate, { date: date, isoDate: isoDate, disabled: disabled, range: range, focusable: focusable, startValue: startValue, endValue: endValue, onChange: onChange, hoveredDate: hoveredDate, onDateHover: onDateHover, onDateHoverEnd: onDateHoverEnd, onDateFocus: setLastFocusedDate, renderAriaLabel: renderDateAriaLabel, selectedDates: selectedDates, disabledDates: disabledDates, renderSlot: renderDateSlot }, index));
                         }) }, key));
                 }) })] }));
 };

package/dist/components/Calendar/CalendarYear.js

@@ -2,8 +2,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
 import Actionable from "../Actionable/index.js";
 import { onNextFrame } from "../../utilities/animation.js";
-import { getMonthNames } from "./Calendar.utils.js";
 import s from "./Calendar.module.css";
+import { getMonthNames } from "./Calendar.utils.js";
 const MONTHS_PER_ROW = 3;
 const CalendarYear = (props) => {
     const { renderMonthLabel, renderMonthAriaLabel, monthDate, min, max, onMonthClick } = props;

package/dist/components/Calendar/useCalendarKeyboardNavigation.js

@@ -1,6 +1,6 @@
 import React from "react";
-import useHotkeys from "../../hooks/useHotkeys.js";
 import * as keys from "../../constants/keys.js";
+import useHotkeys from "../../hooks/useHotkeys.js";
 import { getFocusableDates } from "./Calendar.utils.js";
 const useCalendarKeyboardNavigation = (props) => {
     const { rootRef, changeToNextMonth, changeToPreviousMonth, monthDate, verticalDelta, min, max } = props;

package/dist/components/Card/Card.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { classNames } from "../../utilities/props.js";
 import Actionable from "../Actionable/index.js";
-import s from "./Card.module.css";
 import { resolveMixin } from "../../styles/mixin.js";
+import { classNames } from "../../utilities/props.js";
+import s from "./Card.module.css";
 const Card = forwardRef((props, ref) => {
     const { padding = 4 } = props;
     const { selected, elevated, bleed, height, onClick, href, children, className, attributes, 

package/dist/components/Card/Card.module.css

@@ -1 +1 @@
-.root{--rs-card-shadow-border:0 0 0 1px var(--rs-color-border-neutral-faded) inset;--rs-card-shadow-elevation:0 0 transparent;background:var(--rs-color-background-elevation-base);box-shadow:var(--rs-card-shadow-border),var(--rs-card-shadow-elevation);color:var(--rs-color-foreground-neutral);display:block;overflow:hidden;position:relative;text-align:initial;transition:var(--rs-duration-fast) var(--rs-easing-accelerate);transition-property:box-shadow,border-color}.--selected{border-color:transparent;box-shadow:0 0 0 2px var(--rs-color-border-primary);transition-timing-function:var(--rs-easing-decelerate)}.--elevated{--rs-card-shadow-elevation:var(--rs-shadow-raised);background:var(--rs-color-background-elevation-raised)}.--actionable:not(.--selected){color:inherit;cursor:pointer;outline:none;text-decoration:none}[data-rs-keyboard] .--actionable:not(.--selected):focus{--rs-card-shadow-border:var(--rs-shadow-focus)}.--actionable:not(.--selected):before{background:rgba(var(--rs-color-rgb-background-neutral-faded),32%);content:"";inset:0;opacity:0;pointer-events:none;position:absolute;transition:opacity var(--rs-duration-fast) var(--rs-easing-standard)}@media (hover:hover) and (pointer:fine){.--actionable:not(.--selected):hover:before{opacity:1}}
+.root{--rs-border-w:1px;background:var(--rs-color-background-elevation-base);border:var(--rs-border-w) solid var(--rs-color-border-neutral-faded);color:var(--rs-color-foreground-neutral);display:block;overflow:hidden;position:relative;text-align:initial;transition:var(--rs-duration-fast) var(--rs-easing-accelerate);transition-property:box-shadow,border-color}.--selected{border-color:transparent;box-shadow:0 0 0 2px var(--rs-color-border-primary);transition-timing-function:var(--rs-easing-decelerate)}.--elevated{background:var(--rs-color-background-elevation-raised);box-shadow:var(--rs-shadow-raised)}.--actionable:not(.--selected){color:inherit;cursor:pointer;outline:none;text-decoration:none}[data-rs-keyboard] .--actionable:not(.--selected):focus{box-shadow:var(--rs-shadow-focus)}.--actionable:not(.--selected):before{background:rgba(var(--rs-color-rgb-background-neutral-faded),32%);content:"";inset:0;opacity:0;pointer-events:none;position:absolute;transition:opacity var(--rs-duration-fast) var(--rs-easing-standard)}@media (hover:hover) and (pointer:fine){.--actionable:not(.--selected):hover:before{opacity:1}}

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

@@ -1,6 +1,6 @@
-import type React from "react";
 import type { ActionableProps } from "../Actionable";
 import type { ViewProps } from "../View";
+import type React from "react";
 import type * as G from "../../types/global";
 export type Props<TagName extends keyof React.JSX.IntrinsicElements = "div"> = {
     /** Component padding, base unit multiplier */

package/dist/components/Carousel/Carousel.js

@@ -1,13 +1,13 @@
 "use client";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
-import { classNames, responsiveVariables, responsiveClassNames } from "../../utilities/props.js";
-import { rafThrottle } from "../../utilities/helpers.js";
 import View from "../View/index.js";
-import useRTL from "../../hooks/useRTL.js";
 import useIsomorphicLayoutEffect from "../../hooks/useIsomorphicLayoutEffect.js";
-import CarouselControl from "./CarouselControl.js";
+import useRTL from "../../hooks/useRTL.js";
+import { rafThrottle } from "../../utilities/helpers.js";
+import { classNames, responsiveVariables, responsiveClassNames } from "../../utilities/props.js";
 import s from "./Carousel.module.css";
+import CarouselControl from "./CarouselControl.js";
 const Carousel = (props) => {
     const { children, gap = 3, visibleItems, bleed, navigationDisplay, onChange, onScroll, instanceRef, className, attributes, } = props;
     const currentIndexRef = React.useRef(0);

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

@@ -1,6 +1,6 @@
+import type { ActionableRef } from "../Actionable";
 import type React from "react";
 import type * as G from "../../types/global";
-import type { ActionableRef } from "../Actionable";
 export type Instance = {
     /** Scroll to the previous item */
     navigateBack: () => void;

package/dist/components/Carousel/CarouselControl.d.ts

@@ -1,4 +1,4 @@
-import type { ActionableRef } from "../Actionable";
 import * as T from "./Carousel.types";
+import type { ActionableRef } from "../Actionable";
 declare const CarouselControl: import("react").ForwardRefExoticComponent<T.ControlProps & import("react").RefAttributes<ActionableRef>>;
 export default CarouselControl;

package/dist/components/Carousel/CarouselControl.js

@@ -1,11 +1,11 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef, useState } from "react";
-import { classNames } from "../../utilities/props.js";
 import Button from "../Button/index.js";
-import IconChevronRight from "../../icons/ChevronRight.js";
-import IconChevronLeft from "../../icons/ChevronLeft.js";
 import useIsomorphicLayoutEffect from "../../hooks/useIsomorphicLayoutEffect.js";
+import IconChevronLeft from "../../icons/ChevronLeft.js";
+import IconChevronRight from "../../icons/ChevronRight.js";
+import { classNames } from "../../utilities/props.js";
 import s from "./Carousel.module.css";
 const CarouselControl = forwardRef((props, ref) => {
     const { type, scrollElRef, oppositeControlElRef, scrollPosition, onClick, isRTL, mounted } = props;

package/dist/components/Checkbox/Checkbox.js

@@ -1,14 +1,14 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
-import { classNames, responsiveClassNames, responsivePropDependency } from "../../utilities/props.js";
-import useIsomorphicLayoutEffect from "../../hooks/useIsomorphicLayoutEffect.js";
-import HiddenInput from "../_private/HiddenInput/index.js";
-import { useFormControl } from "../FormControl/index.js";
 import { useCheckboxGroup } from "../CheckboxGroup/index.js";
+import { useFormControl } from "../FormControl/index.js";
+import HiddenInput from "../HiddenInput/index.js";
 import Icon from "../Icon/index.js";
 import Text from "../Text/index.js";
+import useIsomorphicLayoutEffect from "../../hooks/useIsomorphicLayoutEffect.js";
 import IconCheckmark from "../../icons/Checkmark.js";
+import { classNames, responsiveClassNames, responsivePropDependency } from "../../utilities/props.js";
 import s from "./Checkbox.module.css";
 const Checkbox = (props) => {
     const { children, value, onChange, onFocus, onBlur, indeterminate, size = "medium", className, attributes, inputAttributes, } = props;
@@ -21,20 +21,10 @@ const Checkbox = (props) => {
     const name = checkboxGroup ? checkboxGroup.name : props.name;
     const inputRef = React.useRef(null);
     const rootClassName = classNames(s.root, className, size && hasError && s["--error"], disabled && s["--disabled"], size && responsiveClassNames(s, "--size", size));
-    const handleChange = (event) => {
-        if (!name)
-            return;
-        const { checked } = event.target;
-        const changeArgs = { name, value, checked, event };
-        if (onChange)
-            onChange(changeArgs);
-        if (checkboxGroup?.onChange)
-            checkboxGroup.onChange(changeArgs);
-    };
     useIsomorphicLayoutEffect(() => {
         inputRef.current.indeterminate = indeterminate || false;
     }, [indeterminate, checked]);
-    return (_jsxs("label", { ...attributes, className: rootClassName, children: [_jsxs("span", { className: s.field, children: [_jsx(HiddenInput, { className: s.input, type: "checkbox", checked: checked, defaultChecked: defaultChecked, name: name, disabled: disabled, value: value, onChange: handleChange, onFocus: onFocus, onBlur: onBlur, attributes: {
+    return (_jsxs("label", { ...attributes, className: rootClassName, children: [_jsxs("span", { className: s.field, children: [_jsx(HiddenInput, { className: s.input, type: "checkbox", checked: checked, defaultChecked: defaultChecked, name: name, disabled: disabled, value: value, onChange: onChange, onFocus: onFocus, onBlur: onBlur, attributes: {
                             ...inputAttributes,
                             ref: inputRef,
                         } }), _jsx("div", { className: s.decorator, children: _jsx(Icon, { svg: IconCheckmark, className: s.icon, size: responsivePropDependency(size, (size) => {

package/dist/components/CheckboxGroup/CheckboxGroup.types.d.ts

@@ -1,6 +1,6 @@
+import type { CheckboxProps } from "../Checkbox";
 import type React from "react";
 import type * as G from "../../types/global";
-import type { CheckboxProps } from "../Checkbox";
 type BaseProps = {
     /** Component id attribute */
     id?: string;

package/dist/components/Container/Container.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { classNames } from "../../utilities/props.js";
 import View from "../View/index.js";
+import { classNames } from "../../utilities/props.js";
 import s from "./Container.module.css";
 const Container = (props) => {
     const { children, padding = 4, width, align, justify, height, maxHeight, className, attributes, } = props;

package/dist/components/Container/Container.types.d.ts

@@ -1,5 +1,5 @@
-import type React from "react";
 import type { ViewProps } from "../View";
+import type React from "react";
 import type * as G from "../../types/global";
 export type Props = Pick<ViewProps, "align" | "justify" | "height" | "maxHeight"> & {
     /** Component inline padding */

package/dist/components/ContextMenu/ContextMenu.js

@@ -2,9 +2,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
 import DropdownMenu from "../DropdownMenu/index.js";
+import useHandlerRef from "../../hooks/useHandlerRef.js";
 import useScrollLock from "../../hooks/useScrollLock.js";
 import s from "./ContextMenu.module.css";
-import useHandlerRef from "../../hooks/useHandlerRef.js";
 const ContextMenu = (props) => {
     const { position = "end-top", onOpen, onClose, ...dropdownMenuProps } = props;
     const [coordinates, setCoordinates] = React.useState();

package/dist/components/Dismissible/Dismissible.js

@@ -1,8 +1,8 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { classNames } from "../../utilities/props.js";
 import Button from "../Button/index.js";
 import IconClose from "../../icons/Close.js";
+import { classNames } from "../../utilities/props.js";
 import s from "./Dismissible.module.css";
 const Dismissible = (props) => {
     const { children, align, onClose, hideCloseButton, variant, closeAriaLabel, className, attributes, } = props;

package/dist/components/Divider/Divider.d.ts

@@ -1,4 +1,4 @@
-import type React from "react";
 import type * as T from "./Divider.types";
+import type React from "react";
 declare const Divider: React.FC<T.Props>;
 export default Divider;

package/dist/components/Divider/Divider.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { classNames, responsiveClassNames } from "../../utilities/props.js";
 import Text from "../Text/index.js";
+import { classNames, responsiveClassNames } from "../../utilities/props.js";
 import s from "./Divider.module.css";
 const Divider = (props) => {
     const { vertical, blank, children, contentPosition = "center", color, offset, className, attributes, } = props;

package/dist/components/DropdownMenu/DropdownMenu.js

@@ -1,21 +1,21 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
-import Popover from "../Popover/index.js";
-import MenuItem from "../MenuItem/index.js";
-import Icon from "../Icon/index.js";
 import { useFlyoutContext } from "../Flyout/index.js";
-import IconChevronRight from "../../icons/ChevronRight.js";
+import Icon from "../Icon/index.js";
+import MenuItem from "../MenuItem/index.js";
+import Popover from "../Popover/index.js";
+import * as keys from "../../constants/keys.js";
 import useHotkeys from "../../hooks/useHotkeys.js";
 import useRTL from "../../hooks/useRTL.js";
+import IconChevronRight from "../../icons/ChevronRight.js";
 import { classNames } from "../../utilities/props.js";
-import * as keys from "../../constants/keys.js";
 import s from "./DropdownMenu.module.css";
 const DropdownMenuSubContext = React.createContext(null);
 const DropdownMenuSubTriggerContext = React.createContext(false);
 const DropdownMenu = (props) => {
     const { children, position = "bottom-start", triggerType = "click", trapFocusMode = "action-menu", borderRadius = "small", ...popoverProps } = props;
-    return (_jsx(Popover, { ...popoverProps, position: position, padding: 0, trapFocusMode: trapFocusMode, triggerType: triggerType, borderRadius: borderRadius, disableHideAnimation: true, children: children }));
+    return (_jsx(Popover, { ...popoverProps, position: position, padding: 0, trapFocusMode: trapFocusMode, triggerType: triggerType, borderRadius: borderRadius, disableHideAnimation: triggerType !== "hover", children: children }));
 };
 export const DropdownMenuContent = (props) => {
     const { children, attributes, className } = props;

package/dist/components/DropdownMenu/DropdownMenu.types.d.ts

@@ -1,9 +1,9 @@
-import type React from "react";
-import type { PopoverProps, PopoverInstance } from "../Popover";
-import type { MenuItemProps } from "../MenuItem";
 import type { FlyoutContentProps } from "../Flyout";
+import type { MenuItemProps } from "../MenuItem";
+import type { PopoverProps, PopoverInstance } from "../Popover";
+import type React from "react";
 export type Instance = PopoverInstance;
-export type Props = Pick<PopoverProps, "children" | "position" | "forcePosition" | "fallbackPositions" | "fallbackAdjustLayout" | "fallbackMinWidth" | "fallbackMinHeight" | "triggerType" | "contentGap" | "contentShift" | "onOpen" | "onClose" | "active" | "defaultActive" | "width" | "disableHideAnimation" | "disableCloseOnOutsideClick" | "instanceRef" | "containerRef" | "positionRef" | "originCoordinates" | "borderRadius" | "elevation" | "initialFocusRef"> & {
+export type Props = Pick<PopoverProps, "children" | "position" | "forcePosition" | "fallbackPositions" | "fallbackAdjustLayout" | "fallbackMinWidth" | "fallbackMinHeight" | "triggerType" | "contentGap" | "contentShift" | "contentMaxHeight" | "onOpen" | "onClose" | "active" | "defaultActive" | "width" | "disableHideAnimation" | "disableCloseOnOutsideClick" | "instanceRef" | "containerRef" | "positionRef" | "originCoordinates" | "borderRadius" | "elevation" | "initialFocusRef"> & {
     /** Change component trap focus keyboard behavior and shortcuts */
     trapFocusMode?: Extract<PopoverProps["trapFocusMode"], "action-menu" | "selection-menu"> | false;
 };

package/dist/components/FileUpload/FileUpload.js

@@ -1,18 +1,18 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { classNames } from "../../utilities/props.js";
-import View from "../View/index.js";
 import HiddenVisually from "../HiddenVisually/index.js";
+import View from "../View/index.js";
 import useToggle from "../../hooks/useToggle.js";
+import { classNames } from "../../utilities/props.js";
 import s from "./FileUpload.module.css";
 export const FileUploadTrigger = (props) => {
     const { children } = props;
     return _jsx("span", { className: s.trigger, children: children });
 };
 const FileUpload = (props) => {
-    const { name, children, height, variant = "outline", inline, className, attributes, inputAttributes, onChange, } = props;
+    const { name, children, height, variant = "outline", inline, className, disabled, attributes, inputAttributes, onChange, } = props;
     const highlightToggle = useToggle();
-    const rootClassNames = classNames(s.root, variant && s[`--variant-${variant}`], inline && s[`--inline`], highlightToggle.active && s["--highlighted"], className);
+    const rootClassNames = classNames(s.root, variant && s[`--variant-${variant}`], inline && s[`--inline`], highlightToggle.active && s["--highlighted"], disabled && s["--disabled"], className);
     const handleDragOver = (event) => {
         event.preventDefault();
         attributes?.onDragOver?.(event);
@@ -41,15 +41,17 @@ const FileUpload = (props) => {
         onChange?.({ name, event, value: Array.from(nextValue) });
         inputAttributes?.onChange?.(event);
     };
-    const inputNode = (_jsx(HiddenVisually, { children: _jsx("input", { ...inputAttributes, type: "file", className: s.field, name: name, onChange: handleChange }) }));
+    const inputNode = (_jsx(HiddenVisually, { children: _jsx("input", { ...inputAttributes, type: "file", className: s.field, name: name, disabled: disabled, onChange: handleChange }) }));
     const childrenNode = typeof children === "function" ? children({ highlighted: highlightToggle.active }) : children;
-    return (_jsx(View, { className: rootClassNames, height: height, attributes: {
+    return (_jsx(View, { className: rootClassNames, height: height, 
+        // For the focus ring radius
+        borderRadius: "medium", attributes: {
             ...attributes,
             onDragOver: handleDragOver,
             onDragEnter: handleDragEnter,
             onDragLeave: handleDragLeave,
             onDrop: handleDrop,
-        }, children: variant === "outline" && !inline ? (_jsxs(View, { as: "label", className: s.triggerLayer, padding: 6, borderRadius: "medium", gap: 2, align: "center", justify: "center", textAlign: "center", animated: true, height: "100%", children: [inputNode, _jsx(View.Item, { children: childrenNode })] })) : (_jsxs("label", { className: s.triggerLayer, children: [inputNode, childrenNode] })) }));
+        }, children: variant === "outline" && !inline ? (_jsxs(View, { as: "label", className: s.triggerLayer, padding: 6, borderRadius: "medium", gap: 2, align: "center", justify: "center", textAlign: "center", height: "100%", children: [inputNode, _jsx(View.Item, { children: childrenNode })] })) : (_jsxs("label", { className: s.triggerLayer, children: [inputNode, childrenNode] })) }));
 };
 FileUpload.displayName = "FileUpload";
 FileUploadTrigger.displayName = "FileUpload.Trigger";

package/dist/components/FileUpload/FileUpload.module.css

@@ -1 +1 @@
-.root{--rs-file-upload-radius:var(--rs-radius-medium);display:block}[data-rs-keyboard] .root:focus-within{box-shadow:var(--rs-shadow-focus)}.--inline{--rs-file-upload-radius:var(--rs-radius-small)}.--inline,.--inline .triggerLayer{display:inline-block;vertical-align:top}[data-rs-keyboard] .--inline:focus-within{box-shadow:none}[data-rs-keyboard] .--inline:focus-within .triggerLayer>*{box-shadow:var(--rs-shadow-focus)}.--variant-outline .triggerLayer{border:1px dashed var(--rs-color-border-neutral);border-radius:var(--rs-file-upload-radius)}.--highlighted.--variant-outline .triggerLayer{background:rgba(var(--rs-color-rgb-background-primary),.08);border-color:var(--rs-color-border-primary)}@media (hover:hover) and (pointer:fine){.--variant-outline .triggerLayer:hover:not(:has(.trigger)){background:rgba(var(--rs-color-rgb-background-neutral),.16)}}.triggerLayer:has(.trigger){pointer-events:none}.triggerLayer:has(.trigger) .trigger{pointer-events:all}.trigger{display:contents}
+.root{--rs-file-upload-radius:var(--rs-radius-medium);--rs-file-upload-border-color:var(--rs-color-border-neutral);--rs-file-upload-hover-background-color:rgba(var(--rs-color-rgb-background-neutral),0.16);display:block}[data-rs-keyboard] .root:focus-within{box-shadow:var(--rs-shadow-focus)}.triggerLayer:has(.trigger){pointer-events:none}.triggerLayer:has(.trigger) .trigger,.triggerLayer:has(.trigger) a,.triggerLayer:has(.trigger) button{pointer-events:all}.trigger{display:contents}.--inline{--rs-file-upload-radius:var(--rs-radius-small)}.--inline,.--inline .triggerLayer{display:inline-block;vertical-align:top}[data-rs-keyboard] .--inline:focus-within{box-shadow:none}[data-rs-keyboard] .--inline:focus-within .triggerLayer>*{box-shadow:var(--rs-shadow-focus)}.--variant-outline .triggerLayer{border:1px dashed var(--rs-file-upload-border-color);border-radius:var(--rs-file-upload-radius);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:background-color,border-color}.--highlighted.--variant-outline .triggerLayer{background:rgba(var(--rs-color-rgb-background-primary),.08);border-color:var(--rs-color-border-primary)}@media (hover:hover) and (pointer:fine){.--variant-outline .triggerLayer:hover:not(:has(.trigger)){background:var(--rs-file-upload-hover-background-color)}}.--disabled{--rs-file-upload-border-color:var(--rs-color-border-disabled);--rs-file-upload-hover-background-color:transparent}.--disabled .triggerLayer{cursor:not-allowed;opacity:.4}

package/dist/components/FileUpload/FileUpload.types.d.ts

@@ -1,9 +1,11 @@
-import type React from "react";
 import type { ViewProps } from "../View";
+import type React from "react";
 import type * as G from "../../types/global";
 export type Props = {
     /** Name of the input element */
     name: string;
+    /** Disable the file upload input */
+    disabled?: boolean;
     /** Node for inserting children, can be a render function that receives component state */
     children?: React.ReactNode | ((props: {
         highlighted?: boolean;

package/dist/components/Flyout/Flyout.constants.d.ts

@@ -1,6 +1,3 @@
-import type * as T from "./Flyout.types";
-export declare const mouseEnter = 800;
-export declare const mouseEnterShort = 100;
-export declare const mouseLeave = 150;
-export declare const defaultStyles: T.Styles;
-export declare const resetStyles: T.Styles;
+export declare const mouseEnter = 600;
+export declare const defaultStyles: React.CSSProperties;
+export declare const resetStyles: React.CSSProperties;

package/dist/components/Flyout/Flyout.constants.js

@@ -1,6 +1,4 @@
-export const mouseEnter = 800;
-export const mouseEnterShort = 100;
-export const mouseLeave = 150;
+export const mouseEnter = 600;
 export const defaultStyles = {
     left: 0,
     top: 0,

package/dist/components/Flyout/Flyout.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import FlyoutUncontrolled from "./FlyoutUncontrolled.js";
 import FlyoutControlled from "./FlyoutControlled.js";
+import FlyoutUncontrolled from "./FlyoutUncontrolled.js";
 const Flyout = (props) => {
     const { active } = props;
     if (typeof active === "boolean")

package/dist/components/Flyout/Flyout.module.css

@@ -1 +1 @@
-.content{--rs-flyout-gap:0;--rs-flyout-origin-x:50%;--rs-flyout-origin-y:50%;isolation:isolate;pointer-events:none;position:absolute}.content.--hover{pointer-events:all}.content.--hover-disabled,.content.--hover-disabled .inner{pointer-events:none}.inner{backface-visibility:hidden;height:100%;max-height:100%;max-width:100%;opacity:0;outline:none;overflow:auto;pointer-events:all;transform:scale(.92) translateY(0);transform-origin:var(--rs-flyout-origin-x) var(--rs-flyout-origin-y);transition:1ms var(--rs-easing-accelerate)}[data-rs-keyboard] .inner:focus{box-shadow:var(--rs-shadow-focus)}.content.--width-trigger .inner{transform:scale(1) translateY(var(--rs-unit-x2))}.content.--position-top,.content.--position-top-end,.content.--position-top-start{--rs-flyout-origin-y:100%;padding-bottom:calc(var(--rs-unit-x1) * var(--rs-flyout-gap))}.content.--position-bottom,.content.--position-bottom-end,.content.--position-bottom-start{--rs-flyout-origin-y:0%;padding-top:calc(var(--rs-unit-x1) * var(--rs-flyout-gap))}.content.--position-bottom-start,.content.--position-top-start{--rs-flyout-origin-x:0%}.content.--position-bottom-end,.content.--position-top-end{--rs-flyout-origin-x:100%}.content.--position-start,.content.--position-start-bottom,.content.--position-start-top{--rs-flyout-origin-x:100%;padding-right:calc(var(--rs-unit-x1) * var(--rs-flyout-gap))}.content.--position-end,.content.--position-end-bottom,.content.--position-end-top{--rs-flyout-origin-x:0%;padding-left:calc(var(--rs-unit-x1) * var(--rs-flyout-gap))}.content.--position-end-top,.content.--position-start-top{--rs-flyout-origin-y:0%}.content.--position-end-bottom,.content.--position-start-bottom{--rs-flyout-origin-y:100%}.content.--visible .inner{opacity:1;transform:scale(1) translateY(0)}.content.--animated .inner{transition-duration:var(--rs-duration-rapid);transition-property:opacity,transform}.content.--animated.--visible .inner{transition-duration:var(--rs-duration-fast);transition-timing-function:var(--rs-easing-decelerate)}
+.content{--rs-flyout-gap:0;--rs-flyout-max-h:100%;--rs-flyout-origin-x:50%;--rs-flyout-origin-y:50%;display:flex;flex-direction:column;isolation:isolate;pointer-events:none;position:absolute}.content.--hover{pointer-events:all}.content.--hover-disabled,.content.--hover-disabled .inner{pointer-events:none}.inner{backface-visibility:hidden;flex-grow:1;height:100%;max-height:var(--rs-flyout-max-h);max-width:100%;opacity:0;outline:none;overflow:auto;pointer-events:all;transform:scale(.92) translateY(0);transform-origin:var(--rs-flyout-origin-x) var(--rs-flyout-origin-y);transition:1ms var(--rs-easing-accelerate)}[data-rs-keyboard] .inner:focus{box-shadow:var(--rs-shadow-focus)}.content.--width-trigger .inner{transform:scale(1) translateY(var(--rs-unit-x2))}.content.--position-top,.content.--position-top-end,.content.--position-top-start{--rs-flyout-origin-y:100%;padding-bottom:calc(var(--rs-unit-x1) * var(--rs-flyout-gap))}.content.--position-bottom,.content.--position-bottom-end,.content.--position-bottom-start{--rs-flyout-origin-y:0%;padding-top:calc(var(--rs-unit-x1) * var(--rs-flyout-gap))}.content.--position-bottom-start,.content.--position-top-start{--rs-flyout-origin-x:0%}.content.--position-bottom-end,.content.--position-top-end{--rs-flyout-origin-x:100%}.content.--position-start,.content.--position-start-bottom,.content.--position-start-top{--rs-flyout-origin-x:100%;padding-right:calc(var(--rs-unit-x1) * var(--rs-flyout-gap))}.content.--position-end,.content.--position-end-bottom,.content.--position-end-top{--rs-flyout-origin-x:0%;padding-left:calc(var(--rs-unit-x1) * var(--rs-flyout-gap))}.content.--position-end-top,.content.--position-start-top{--rs-flyout-origin-y:0%}.content.--position-end-bottom,.content.--position-start-bottom{--rs-flyout-origin-y:100%}.content.--visible .inner{opacity:1;transform:scale(1) translateY(0)}.content.--animated .inner{transition-duration:var(--rs-duration-rapid);transition-property:opacity,transform}.content.--animated.--visible .inner{transition-duration:var(--rs-duration-fast);transition-timing-function:var(--rs-easing-decelerate)}