reshaped 3.9.0-canary.1 → 3.9.0-canary.3

package/dist/cli/theming/index.js

@@ -1,9 +1,9 @@
-import fs from "fs";
-import path from "path";
+import fs from "node:fs";
+import path from "node:path";
 import chalk from "chalk";
-import mergeDefinitions from "../../themes/_generator/utilities/mergeDefinitions.js";
-import transform from "../../themes/_generator/transform.js";
 import reshapedDefinition from "../../themes/_generator/definitions/reshaped.js";
+import transform from "../../themes/_generator/transform.js";
+import mergeDefinitions from "../../themes/_generator/utilities/mergeDefinitions.js";
 import { transformToTailwind } from "./tailwind.js";
 const transformDefinition = (name, definition, options) => {
     const { isFragment, outputPath } = options;

package/dist/cli/theming/reshaped.config.js

@@ -1,5 +1,5 @@
-import reshapedDefinition from "../../themes/_generator/definitions/reshaped.js";
 import figmaDefinition from "../../themes/_generator/definitions/figma.js";
+import reshapedDefinition from "../../themes/_generator/definitions/reshaped.js";
 import slateDefinition from "../../themes/_generator/definitions/slate.js";
 const config = {
     themes: {

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

@@ -1,5 +1,5 @@
-import type React from "react";
 import type { IconProps } from "../Icon";
+import type React from "react";
 import type * as G from "../../types/global";
 export type BaseProps = {
     /** Expand / collapse icon size in units */

package/dist/components/Accordion/AccordionControlled.js

@@ -1,10 +1,10 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
-import { classNames } from "../../utilities/props.js";
 import useElementId from "../../hooks/useElementId.js";
-import AccordionContext from "./Accordion.context.js";
 import useHandlerRef from "../../hooks/useHandlerRef.js";
+import { classNames } from "../../utilities/props.js";
+import AccordionContext from "./Accordion.context.js";
 const AccordionControlled = (props) => {
     const { children, onToggle, active, iconPosition, iconSize, gap, className, attributes } = props;
     const rootClassNames = classNames(className);

package/dist/components/Accordion/AccordionTrigger.js

@@ -1,11 +1,11 @@
 "use client";
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
-import { classNames } from "../../utilities/props.js";
 import Actionable from "../Actionable/index.js";
-import View from "../View/index.js";
 import Icon from "../Icon/index.js";
+import View from "../View/index.js";
 import IconChevronDown from "../../icons/ChevronDown.js";
+import { classNames } from "../../utilities/props.js";
 import AccordionContext from "./Accordion.context.js";
 import s from "./Accordion.module.css";
 const AccordionTrigger = (props) => {

package/dist/components/Accordion/index.d.ts

@@ -1,6 +1,6 @@
 import Accordion from "./Accordion";
-import AccordionTrigger from "./AccordionTrigger";
 import AccordionContent from "./AccordionContent";
+import AccordionTrigger from "./AccordionTrigger";
 declare const AccordionRoot: typeof Accordion & {
     Trigger: typeof AccordionTrigger;
     Content: typeof AccordionContent;

package/dist/components/Accordion/index.js

@@ -1,6 +1,6 @@
 import Accordion from "./Accordion.js";
-import AccordionTrigger from "./AccordionTrigger.js";
 import AccordionContent from "./AccordionContent.js";
+import AccordionTrigger from "./AccordionTrigger.js";
 const AccordionRoot = Accordion;
 AccordionRoot.Trigger = AccordionTrigger;
 AccordionRoot.Content = AccordionContent;

package/dist/components/ActionBar/ActionBar.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { classNames, responsiveVariables } from "../../utilities/props.js";
 import View from "../View/index.js";
+import { classNames, responsiveVariables } from "../../utilities/props.js";
 import s from "./ActionBar.module.css";
 const fullWidthPositions = ["top", "bottom"];
 const ActionBar = (props) => {

package/dist/components/ActionBar/ActionBar.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, "paddingBlock" | "paddingInline" | "padding"> & {
     /** Show or hide the component */

package/dist/components/Actionable/Actionable.js

@@ -1,8 +1,8 @@
 "use client";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { classNames } from "../../utilities/props.js";
 import * as keys from "../../constants/keys.js";
+import { classNames } from "../../utilities/props.js";
 import s from "./Actionable.module.css";
 const Actionable = forwardRef((props, ref) => {
     const { children, render, href, onClick, type, disabled, insetFocus, disableFocusRing, borderRadius, as, stopPropagation, fullWidth, touchHitbox, className, attributes, } = props;

package/dist/components/Alert/Alert.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import Icon from "../Icon/index.js";
-import View from "../View/index.js";
 import Text from "../Text/index.js";
+import View from "../View/index.js";
 import s from "./Alert.module.css";
 const Alert = (props) => {
     const { title, children, icon, actionsSlot, color = "neutral", inline, bleed, className, attributes, } = props;

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

@@ -1,5 +1,5 @@
-import type React from "react";
 import type { IconProps } from "../Icon";
+import type React from "react";
 import type * as G from "../../types/global";
 export type Props = {
     /** SVG component for the icon */

package/dist/components/Autocomplete/Autocomplete.js

@@ -1,17 +1,17 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
-import TextField from "../TextField/index.js";
 import DropdownMenu from "../DropdownMenu/index.js";
+import TextField from "../TextField/index.js";
 import * as keys from "../../constants/keys.js";
-import useHotkeys from "../../hooks/useHotkeys.js";
-import useHandlerRef from "../../hooks/useHandlerRef.js";
-import s from "./Autocomplete.module.css";
 import useElementId from "../../hooks/useElementId.js";
+import useHandlerRef from "../../hooks/useHandlerRef.js";
+import useHotkeys from "../../hooks/useHotkeys.js";
 import useIsomorphicLayoutEffect from "../../hooks/useIsomorphicLayoutEffect.js";
+import s from "./Autocomplete.module.css";
 const AutocompleteContext = React.createContext({});
 const Autocomplete = (props) => {
-    const { children, onChange, onInput, onItemSelect, name, containerRef, instanceRef, onBackspace, onEnter, active, onOpen, onClose, fallbackAdjustLayout, fallbackMinWidth, fallbackMinHeight, ...textFieldProps } = props;
+    const { children, onChange, onInput, onItemSelect, name, containerRef, instanceRef, onBackspace, onEnter, active, onOpen, onClose, fallbackAdjustLayout, fallbackMinWidth, fallbackMinHeight, contentMaxHeight, ...textFieldProps } = props;
     const [highlightedId, setHighlightedId] = React.useState();
     const onBackspaceRef = useHandlerRef(onBackspace);
     const contentRef = React.useRef(null);
@@ -120,7 +120,7 @@ const Autocomplete = (props) => {
         highlightedId,
         setHighlightedId,
     }), [highlightedId, handleItemClick]);
-    return (_jsx(AutocompleteContext.Provider, { value: contextValue, children: _jsxs(DropdownMenu, { position: "bottom", width: "trigger", triggerType: "focus", trapFocusMode: false, active: isDropdownActive, onClose: handleClose, onOpen: handleOpen, containerRef: containerRef, fallbackAdjustLayout: fallbackAdjustLayout, fallbackMinWidth: fallbackMinWidth, fallbackMinHeight: fallbackMinHeight, disableHideAnimation: true, instanceRef: instanceRef, children: [_jsx(DropdownMenu.Trigger, { children: ({ ref, ...attributes }) => (_jsx(TextField, { ...textFieldProps, name: name, onChange: handleChange, focused: isDropdownActive, attributes: {
+    return (_jsx(AutocompleteContext.Provider, { value: contextValue, children: _jsxs(DropdownMenu, { position: "bottom", width: "trigger", triggerType: "focus", trapFocusMode: false, active: isDropdownActive, onClose: handleClose, onOpen: handleOpen, containerRef: containerRef, fallbackAdjustLayout: fallbackAdjustLayout, fallbackMinWidth: fallbackMinWidth, fallbackMinHeight: fallbackMinHeight, contentMaxHeight: contentMaxHeight, disableHideAnimation: true, instanceRef: instanceRef, children: [_jsx(DropdownMenu.Trigger, { children: ({ ref, ...attributes }) => (_jsx(TextField, { ...textFieldProps, name: name, onChange: handleChange, focused: isDropdownActive, attributes: {
                             ...textFieldProps.attributes,
                             // Ignoring the type check since TS can't infer the correct html element type
                             // eslint-disable-next-line @typescript-eslint/no-explicit-any

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

@@ -1,13 +1,13 @@
-import type { TextFieldProps } from "../TextField";
-import type { MenuItemProps } from "../MenuItem";
 import type { DropdownMenuProps, DropdownMenuInstance } from "../DropdownMenu";
+import type { MenuItemProps } from "../MenuItem";
+import type { TextFieldProps } from "../TextField";
 type SelectArgs = {
     /** Value that will be passed to the input on selection */
     value: string;
     /** Additional data that will be passed to the onItemSelect callback */
     data?: unknown;
 };
-export type Props = TextFieldProps & Pick<DropdownMenuProps, "containerRef" | "instanceRef" | "active" | "onOpen" | "onClose" | "fallbackAdjustLayout" | "fallbackMinWidth" | "fallbackMinHeight"> & {
+export type Props = TextFieldProps & Pick<DropdownMenuProps, "containerRef" | "instanceRef" | "active" | "onOpen" | "onClose" | "fallbackAdjustLayout" | "fallbackMinWidth" | "fallbackMinHeight" | "contentMaxHeight"> & {
     /** Callback for when value changes from user input */
     onInput?: TextFieldProps["onChange"];
     /** Callback for when an item is selected in the dropdown */

package/dist/components/Avatar/Avatar.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { classNames, responsivePropDependency } from "../../utilities/props.js";
-import { resolveMixin } from "../../styles/mixin.js";
 import Icon from "../Icon/index.js";
 import View from "../View/index.js";
+import { resolveMixin } from "../../styles/mixin.js";
+import { classNames, responsivePropDependency } from "../../utilities/props.js";
 import s from "./Avatar.module.css";
 const Avatar = (props) => {
     const { color = "neutral", variant, src, size = 12, squared, initials, icon, className, renderImage, imageAttributes: passedImageAttributes, attributes, } = props;

package/dist/components/Badge/Badge.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { classNames } from "../../utilities/props.js";
-import Text from "../Text/index.js";
+import { forwardRef } from "react";
+import Actionable from "../Actionable/index.js";
 import Icon from "../Icon/index.js";
+import Text from "../Text/index.js";
 import IconClose from "../../icons/Close.js";
-import Actionable from "../Actionable/index.js";
+import { classNames } from "../../utilities/props.js";
 import s from "./Badge.module.css";
-import { forwardRef } from "react";
 const Badge = forwardRef((props, ref) => {
     const { children, color, rounded, size = "medium", icon, endIcon, variant, hidden, highlighted, href, onClick, onDismiss, dismissAriaLabel, className, attributes, } = props;
     const isActionable = !!(onClick || href);

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

@@ -1,6 +1,6 @@
-import type React from "react";
 import type { ActionableProps } from "../Actionable";
 import type { IconProps } from "../Icon";
+import type React from "react";
 import type * as G from "../../types/global";
 type BaseProps = {
     /** Component color scheme

package/dist/components/Breadcrumbs/Breadcrumbs.js

@@ -1,13 +1,13 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
-import { classNames } from "../../utilities/props.js";
-import View from "../View/index.js";
+import Button from "../Button/index.js";
 import Icon from "../Icon/index.js";
 import Text from "../Text/index.js";
-import Button from "../Button/index.js";
+import View from "../View/index.js";
 import IconChevronRight from "../../icons/ChevronRight.js";
 import IconDotsHorizontal from "../../icons/DotsHorizontal.js";
+import { classNames } from "../../utilities/props.js";
 const Breadcrumbs = (props) => {
     const { children, separator, color, defaultVisibleItems, expandAriaLabel, disableExpand, ariaLabel, className, attributes, } = props;
     const visibleItems = defaultVisibleItems && defaultVisibleItems >= 2 ? defaultVisibleItems : null;

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

@@ -1,5 +1,5 @@
-import type React from "react";
 import type { LinkProps } from "../Link";
+import type React from "react";
 import type * as G from "../../types/global";
 export type Props = {
     /** Node for inserting children to position items */

package/dist/components/Breadcrumbs/BreadcrumbsItem.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import Text from "../Text/index.js";
 import Link from "../Link/index.js";
+import Text from "../Text/index.js";
 const BreadcrumbsItem = (props) => {
     const { children, onClick, href, icon, disabled } = props;
     if (!href && !onClick && !disabled) {

package/dist/components/Button/Button.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { classNames, responsiveClassNames, responsivePropDependency } from "../../utilities/props.js";
+import Actionable from "../Actionable/index.js";
 import Icon from "../Icon/index.js";
 import Loader from "../Loader/index.js";
-import Actionable from "../Actionable/index.js";
+import { classNames, responsiveClassNames, responsivePropDependency } from "../../utilities/props.js";
 import s from "./Button.module.css";
 const Button = forwardRef((props, ref) => {
     const { variant = "solid", color = "neutral", elevated, highlighted, fullWidth, loading, loadingAriaLabel, disabled, type, href, size = "medium", children, rounded, onClick, icon, endIcon, stopPropagation, as, render, className, attributes, } = props;

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

@@ -1,7 +1,7 @@
-import type React from "react";
-import type { IconProps } from "../Icon";
-import type { ActionableProps } from "../Actionable";
 import type { AlignerProps as BaseAlignerProps } from "../_private/Aligner";
+import type { ActionableProps } from "../Actionable";
+import type { IconProps } from "../Icon";
+import type React from "react";
 import type * as G from "../../types/global";
 export type Size = "xlarge" | "large" | "medium" | "small";
 export type Props = Pick<ActionableProps, "attributes" | "className" | "disabled" | "children" | "href" | "onClick" | "type" | "as" | "stopPropagation" | "render"> & {

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

@@ -1,13 +1,23 @@
 export type SelectionMode = "date" | "month";
 export type BaseProps = {
-    /** Default month to display
+    /** Default month to display. Used in uncontrolled mode to provide the initial month and then updated by the component internally
      * @default Date.now()
      */
     defaultMonth?: Date;
+    /** Month to display. Used in controlled mode and should be updated using the `onMonthChange` callback */
+    month?: Date;
+    /** Callback when the month changes */
+    onMonthChange?: (args: {
+        date: Date;
+    }) => void;
     /** Minimum date that can be selected */
     min?: Date;
     /** Maximum date that can be selected */
     max?: Date;
+    /** Number of months to render at the same time
+     * @default 1
+     */
+    monthsToRender?: number;
     /** First day of the week
      * @default 1, Monday
      */
@@ -28,6 +38,11 @@ export type BaseProps = {
         month: number;
         date: Date;
     }) => string;
+    /** Render a custom date slot content under the date number */
+    renderDateSlot?: (args: {
+        date: Date;
+        selected: boolean;
+    }) => React.ReactNode;
     /** Aria label for the previous month button */
     previousMonthAriaLabel?: string;
     nextMonthAriaLabel?: string;
@@ -106,7 +121,7 @@ export type MonthProps = {
     hoveredDate: Date | null;
     onDateHover: (date: Date) => void;
     onDateHoverEnd: (date: Date) => void;
-} & Pick<BaseProps, "max" | "min" | "firstWeekDay" | "selectedDates" | "renderMonthLabel" | "renderWeekDay" | "renderSelectedMonthLabel" | "renderDateAriaLabel"> & Pick<ControlledProps, "value" | "onChange" | "range">;
+} & Pick<BaseProps, "max" | "min" | "firstWeekDay" | "selectedDates" | "renderMonthLabel" | "renderWeekDay" | "renderSelectedMonthLabel" | "renderDateAriaLabel" | "renderDateSlot"> & Pick<ControlledProps, "value" | "onChange" | "range">;
 export type YearProps = {
     monthDate: Date;
     onMonthClick: (month: number) => void;
@@ -119,16 +134,18 @@ export type DateProps = {
     startValue: Date | null;
     endValue: Date | null;
     renderAriaLabel?: MonthProps["renderDateAriaLabel"];
+    renderSlot?: MonthProps["renderDateSlot"];
     onDateFocus: (date: Date) => void;
 } & Pick<MonthProps, "hoveredDate" | "onDateHover" | "onDateHoverEnd" | "onChange" | "range" | "min" | "max" | "selectedDates">;
 export type ControlsProps = {
     selectionMode: SelectionMode;
+    monthsToRender: number;
     onMonthTitleClick: () => void;
-    monthTitleRef: React.MutableRefObject<HTMLButtonElement | null>;
+    monthTitleRef?: React.RefObject<HTMLButtonElement | null>;
     monthDate: Date;
     renderSelectedMonthLabel?: BaseProps["renderSelectedMonthLabel"];
-    isFirstMonth?: boolean;
-    isLastMonth?: boolean;
+    hidePrevious?: boolean;
+    hideNext?: boolean;
     onNextClick: () => void;
     onPreviousClick: () => void;
 } & Pick<BaseProps, "nextMonthAriaLabel" | "nextYearAriaLabel" | "previousMonthAriaLabel" | "previousYearAriaLabel" | "monthSelectionAriaLabel">;

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, 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, 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,11 +1,11 @@
 "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, focusable, onChange, range, hoveredDate, onDateHover, onDateHoverEnd, onDateFocus, selectedDates, renderAriaLabel, renderSlot, } = props;
     if (!date)
         return _jsx("td", { className: s.cell, "aria-hidden": "true" });
     const isoStartValue = startValue && getLocalISODate({ date: startValue });
@@ -61,7 +61,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 +74,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, 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, 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.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 */