reshaped 3.9.0-canary.1 → 3.9.0-canary.11

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,12 +1,13 @@
 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 Image from "../Image/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;
-    const alt = props.alt || passedImageAttributes?.alt;
+    const { color = "neutral", variant, src, size = 12, squared, initials, icon, className, renderImage, imageAttributes, attributes, } = props;
+    const alt = props.alt || imageAttributes?.alt;
     const radius = squared
         ? responsivePropDependency(size, (size) => {
             if (size >= 24)
@@ -16,30 +17,12 @@ const Avatar = (props) => {
             return "small";
         })
         : "circular";
+    if (src) {
+        return (_jsx(Image, { src: src, alt: alt, renderImage: renderImage, outline: true, borderRadius: radius, width: size, aspectRatio: 1, className: className, attributes: attributes, imageAttributes: imageAttributes }));
+    }
     const mixinStyles = resolveMixin({ height: size });
     const rootClassNames = classNames(s.root, className, mixinStyles?.classNames, color && s[`--color-${color}`], variant && s[`--variant-${variant}`]);
-    const renderContent = () => {
-        if (src) {
-            /**
-             * Not all img attributes might be supported by custom Image components
-             * Here is an example from Next: https://nextjs.org/docs/pages/api-reference/components/image#required-props
-             */
-            const imageAttributes = {
-                ...passedImageAttributes,
-                role: !alt ? "presentation" : undefined,
-                src: src ?? "",
-                alt: alt ?? "",
-                className: s.img,
-            };
-            // eslint-disable-next-line jsx-a11y/alt-text
-            return renderImage ? renderImage(imageAttributes) : _jsx("img", { ...imageAttributes });
-        }
-        if (icon) {
-            return (_jsx(Icon, { svg: icon, size: responsivePropDependency(size, (size) => Math.ceil(size * 0.4)) }));
-        }
-        return initials;
-    };
-    return (_jsx(View, { borderRadius: radius, attributes: { ...attributes, style: { ...mixinStyles?.variables } }, backgroundColor: variant === "faded" ? `${color}-${variant}` : color, className: rootClassNames, children: renderContent() }));
+    return (_jsx(View, { borderRadius: radius, attributes: { ...attributes, style: { ...mixinStyles?.variables } }, backgroundColor: variant === "faded" ? `${color}-${variant}` : color, className: rootClassNames, children: icon ? (_jsx(Icon, { svg: icon, size: responsivePropDependency(size, (size) => Math.ceil(size * 0.4)) })) : (initials) }));
 };
 Avatar.displayName = "Avatar";
 export default Avatar;

package/dist/components/Avatar/Avatar.module.css

@@ -1 +1 @@
-.root{align-items:center;aspect-ratio:1;display:flex;font-size:calc(var(--rs-h) / 3);font-weight:var(--rs-font-weight-bold);justify-content:center;line-height:100%}.img{border-radius:inherit;height:100%;object-fit:cover;width:100%}.--variant-faded.--color-neutral{color:var(--rs-color-foreground-neutral)}.--variant-faded.--color-critical{color:var(--rs-color-foreground-critical)}.--variant-faded.--color-positive{color:var(--rs-color-foreground-positive)}.--variant-faded.--color-warning{color:var(--rs-color-foreground-warning)}.--variant-faded.--color-primary{color:var(--rs-color-foreground-primary)}
+.root{align-items:center;aspect-ratio:1;display:flex;font-size:calc(var(--rs-h) / 3);font-weight:var(--rs-font-weight-bold);justify-content:center;line-height:100%}.--variant-faded.--color-neutral{color:var(--rs-color-foreground-neutral)}.--variant-faded.--color-critical{color:var(--rs-color-foreground-critical)}.--variant-faded.--color-positive{color:var(--rs-color-foreground-positive)}.--variant-faded.--color-warning{color:var(--rs-color-foreground-warning)}.--variant-faded.--color-primary{color:var(--rs-color-foreground-primary)}

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.module.css

@@ -1 +1 @@
-.root{--rs-badge-border-color:transparent;align-items:center;backface-visibility:hidden;background:var(--rs-color-background-neutral);border-radius:var(--rs-radius-small);box-shadow:0 0 0 1px var(--rs-badge-border-color) inset;box-sizing:border-box;color:var(--rs-color-foreground-neutral);display:inline-flex;gap:var(--rs-badge-gap);justify-content:center;min-height:calc(var(--rs-badge-line-height) + (var(--rs-badge-p-v) * 2));min-width:calc(var(--rs-badge-line-height) + (var(--rs-badge-p-v) * 2));padding:var(--rs-badge-p-v) var(--rs-badge-p-h);transition:var(--rs-duration-medium) var(--rs-easing-standard);transition-property:transform,opacity;vertical-align:top}.root:empty{height:var(--rs-badge-empty-size);min-height:auto;min-width:auto;padding:0;width:var(--rs-badge-empty-size)}.icon:only-child{margin-inline:calc(var(--rs-unit-x1) * -1)}.dismiss{border-radius:var(--rs-radius-small);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:opacity}.root.--highlighted{opacity:.8}@media (hover:hover) and (pointer:fine){.root .dismiss:hover,.root.--actionable:hover:not(:has(.dismiss:hover)){opacity:.8}}.root.--variant-faded{background:var(--rs-color-background-neutral-faded);color:var(--rs-color-foreground-neutral-faded)}.root.--variant-outline{--rs-badge-border-color:var(--rs-color-border-neutral);background:none}.root.--color-positive{background:var(--rs-color-background-positive);color:var(--rs-color-on-background-positive)}.root.--color-positive.--variant-faded{background:var(--rs-color-background-positive-faded);color:var(--rs-color-foreground-positive)}.root.--color-positive.--variant-outline{--rs-badge-border-color:var(--rs-color-border-positive-faded);background:none;color:var(--rs-color-foreground-positive)}.root.--color-critical{background:var(--rs-color-background-critical);color:var(--rs-color-on-background-critical)}.root.--color-critical.--variant-faded{background:var(--rs-color-background-critical-faded);color:var(--rs-color-foreground-critical)}.root.--color-critical.--variant-outline{--rs-badge-border-color:var(--rs-color-border-critical-faded);background:none;color:var(--rs-color-foreground-critical)}.root.--color-warning{background:var(--rs-color-background-warning);color:var(--rs-color-on-background-warning)}.root.--color-warning.--variant-faded{background:var(--rs-color-background-warning-faded);color:var(--rs-color-foreground-warning)}.root.--color-warning.--variant-outline{--rs-badge-border-color:var(--rs-color-border-warning-faded);background:none;color:var(--rs-color-foreground-warning)}.root.--color-primary{background:var(--rs-color-background-primary);color:var(--rs-color-on-background-primary)}.root.--color-primary.--variant-faded{background:var(--rs-color-background-primary-faded);color:var(--rs-color-foreground-primary)}.root.--color-primary.--variant-outline{--rs-badge-border-color:var(--rs-color-border-primary-faded);background:none;color:var(--rs-color-foreground-primary)}.root.--size-small{--rs-badge-p-v:calc(var(--rs-unit-x1) / 2);--rs-badge-p-h:var(--rs-unit-x1);--rs-badge-line-height:var(--rs-line-height-caption-1);--rs-badge-empty-size:var(--rs-unit-x2);--rs-badge-gap:calc(var(--rs-unit-x1) / 2)}.root.--size-medium{--rs-badge-p-v:var(--rs-unit-x1);--rs-badge-p-h:var(--rs-unit-x2);--rs-badge-line-height:var(--rs-line-height-caption-1);--rs-badge-empty-size:var(--rs-unit-x3);--rs-badge-gap:var(--rs-unit-x1)}.root.--size-large{--rs-badge-p-v:var(--rs-unit-x1);--rs-badge-p-h:var(--rs-unit-x2);--rs-badge-line-height:var(--rs-line-height-body-3);--rs-badge-empty-size:var(--rs-unit-x4);--rs-badge-gap:var(--rs-unit-x1)}.root.--rounded{border-radius:var(--rs-radius-circular)}.root.--hidden{opacity:0;transform:scale(.2)}.container{display:inline-block;position:relative;vertical-align:top}.container .root{inset-inline-end:0;pointer-events:none;position:absolute;transform:translate(50%,var(--rs-badge-translate-y)) scale(1);z-index:10}.container .root.--hidden{transform:translate(50%,var(--rs-badge-translate-y)) scale(.2)}[dir=rtl] .container .root{transform:translate(-50%,var(--rs-badge-translate-y)) scale(1)}[dir=rtl] .container .root.--hidden{transform:translate(-50%,var(--rs-badge-translate-y)) scale(.2)}.--container-overlap .root{inset-inline-end:14%}.--container-position-top-end .root{--rs-badge-translate-y:-50%;top:0}.--container-position-top-end.--container-overlap .root{top:14%}.--container-position-bottom-end .root{--rs-badge-translate-y:50%;bottom:0}.--container-position-bottom-end.--container-overlap .root{bottom:14%}
+.root{--rs-badge-border-color:transparent;align-items:center;backface-visibility:hidden;background:var(--rs-color-background-neutral);border-radius:var(--rs-radius-small);box-shadow:0 0 0 1px var(--rs-badge-border-color) inset;box-sizing:border-box;color:var(--rs-color-foreground-neutral);display:inline-flex;gap:var(--rs-badge-gap);justify-content:center;min-height:calc(var(--rs-badge-line-height) + (var(--rs-badge-p-v) * 2));min-width:calc(var(--rs-badge-line-height) + (var(--rs-badge-p-v) * 2));padding:var(--rs-badge-p-v) var(--rs-badge-p-h);transition:var(--rs-duration-medium) var(--rs-easing-standard);transition-property:transform,opacity;vertical-align:top}.root:empty{height:var(--rs-badge-empty-size);min-height:auto;min-width:auto;padding:0;width:var(--rs-badge-empty-size)}.icon:only-child{margin-inline:calc(var(--rs-unit-x1) * -1)}.dismiss{border-radius:var(--rs-radius-small);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:opacity}.root.--highlighted{opacity:.8}@media (hover:hover) and (pointer:fine){.root .dismiss:hover,.root.--actionable:hover:not(:has(.dismiss:hover)){opacity:.8}}.root.--variant-faded{background:var(--rs-color-background-neutral-faded);color:var(--rs-color-foreground-neutral-faded)}.root.--variant-outline{--rs-badge-border-color:var(--rs-color-border-neutral);background:none}.root.--color-positive{background:var(--rs-color-background-positive);color:var(--rs-color-on-background-positive)}.root.--color-positive.--variant-faded{background:var(--rs-color-background-positive-faded);color:var(--rs-color-foreground-positive)}.root.--color-positive.--variant-outline{--rs-badge-border-color:var(--rs-color-border-positive-faded);background:none;color:var(--rs-color-foreground-positive)}.root.--color-critical{background:var(--rs-color-background-critical);color:var(--rs-color-on-background-critical)}.root.--color-critical.--variant-faded{background:var(--rs-color-background-critical-faded);color:var(--rs-color-foreground-critical)}.root.--color-critical.--variant-outline{--rs-badge-border-color:var(--rs-color-border-critical-faded);background:none;color:var(--rs-color-foreground-critical)}.root.--color-warning{background:var(--rs-color-background-warning);color:var(--rs-color-on-background-warning)}.root.--color-warning.--variant-faded{background:var(--rs-color-background-warning-faded);color:var(--rs-color-foreground-warning)}.root.--color-warning.--variant-outline{--rs-badge-border-color:var(--rs-color-border-warning-faded);background:none;color:var(--rs-color-foreground-warning)}.root.--color-primary{background:var(--rs-color-background-primary);color:var(--rs-color-on-background-primary)}.root.--color-primary.--variant-faded{background:var(--rs-color-background-primary-faded);color:var(--rs-color-foreground-primary)}.root.--color-primary.--variant-outline{--rs-badge-border-color:var(--rs-color-border-primary-faded);background:none;color:var(--rs-color-foreground-primary)}.root.--size-small{--rs-badge-p-v:calc(var(--rs-unit-x1) / 2);--rs-badge-p-h:var(--rs-unit-x1);--rs-badge-line-height:var(--rs-line-height-caption-1);--rs-badge-empty-size:var(--rs-unit-x2);--rs-badge-gap:calc(var(--rs-unit-x1) / 2)}.root.--size-medium{--rs-badge-p-v:var(--rs-unit-x1);--rs-badge-p-h:var(--rs-unit-x2);--rs-badge-line-height:var(--rs-line-height-caption-1);--rs-badge-empty-size:var(--rs-unit-x3);--rs-badge-gap:var(--rs-unit-x1)}.root.--size-large{--rs-badge-p-v:var(--rs-unit-x1);--rs-badge-p-h:var(--rs-unit-x2);--rs-badge-line-height:var(--rs-line-height-body-3);--rs-badge-empty-size:var(--rs-unit-x4);--rs-badge-gap:var(--rs-unit-x1)}.root.--rounded{border-radius:var(--rs-radius-circular)}.root.--hidden{opacity:0;transform:scale(.2)}.container{display:inline-block;position:relative;vertical-align:top}.container .root{inset-inline-end:0;position:absolute;transform:translate(50%,var(--rs-badge-translate-y)) scale(1);user-select:none;z-index:10}.container .root.--hidden{transform:translate(50%,var(--rs-badge-translate-y)) scale(.2)}[dir=rtl] .container .root{transform:translate(-50%,var(--rs-badge-translate-y)) scale(1)}[dir=rtl] .container .root.--hidden{transform:translate(-50%,var(--rs-badge-translate-y)) scale(.2)}.--container-overlap .root{inset-inline-end:14%}.--container-position-top-end .root{--rs-badge-translate-y:-50%;top:0}.--container-position-top-end.--container-overlap .root{top:14%}.--container-position-bottom-end .root{--rs-badge-translate-y:50%;bottom:0}.--container-position-bottom-end.--container-overlap .root{bottom:14%}

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,19 +1,31 @@
 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
      */
     firstWeekDay?: number;
     /** Dates that are selected */
     selectedDates?: Date[];
+    /** Dates that are disabled */
+    disabledDates?: Date[];
     /** Render a custom weekday label, can be used for localization */
     renderWeekDay?: (args: {
         weekDay: number;
@@ -28,6 +40,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 +123,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" | "disabledDates" | "renderMonthLabel" | "renderWeekDay" | "renderSelectedMonthLabel" | "renderDateAriaLabel" | "renderDateSlot"> & Pick<ControlledProps, "value" | "onChange" | "range">;
 export type YearProps = {
     monthDate: Date;
     onMonthClick: (month: number) => void;
@@ -119,16 +136,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">;
+} & Pick<MonthProps, "hoveredDate" | "onDateHover" | "onDateHoverEnd" | "onChange" | "range" | "min" | "max" | "selectedDates" | "disabledDates">;
 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, 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,
                         } }) }) })] }));