reshaped 3.9.1-canary.3 → 3.10.0-canary.10

package/dist/components/DropdownMenu/DropdownMenu.js

@@ -1,15 +1,13 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
+import { classNames, useHotkeys, useRTL } from "@reshaped/headless";
 import React from "react";
 import { useFlyoutContext } from "../Flyout/index.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 s from "./DropdownMenu.module.css";
 const DropdownMenuSubContext = React.createContext(null);
 const DropdownMenuSubTriggerContext = React.createContext(false);

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

@@ -3,7 +3,7 @@ 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" | "contentMaxHeight" | "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" | "contentZIndex" | "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,9 +1,8 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { classNames, useToggle } from "@reshaped/headless";
 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;

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

@@ -1,3 +1,4 @@
+import type { Attributes, ClassName } from "@reshaped/headless";
 import type { ViewProps } from "../View";
 import type React from "react";
 import type * as G from "../../types/global";
@@ -19,11 +20,11 @@ export type Props = {
     /** Change component to render inline making it more compact */
     inline?: boolean;
     /** Additional classname for the root element */
-    className?: G.ClassName;
+    className?: ClassName;
     /** Additional attributes for the root element */
-    attributes?: G.Attributes<"div">;
+    attributes?: Attributes<"div">;
     /** Additional attributes for the input element */
-    inputAttributes?: G.Attributes<"input">;
+    inputAttributes?: Attributes<"input">;
 };
 export type TriggerProps = {
     /** Node for inserting children */

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

@@ -1 +1 @@
-.content{--rs-flyout-max-h:100%;--rs-flyout-max-w:100%;--rs-flyout-origin-x:50%;--rs-flyout-origin-y:50%;display:flex;flex-direction:column;isolation:isolate;pointer-events:none;position:absolute;z-index:var(--rs-z-index-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:var(--rs-flyout-max-w);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%}.content.--position-bottom,.content.--position-bottom-end,.content.--position-bottom-start{--rs-flyout-origin-y:0%}.content.--position-bottom-start,.content.--position-top-start{--rs-flyout-origin-x:0%}.content.--position-bottom-end,.content.--position-start,.content.--position-start-bottom,.content.--position-start-top,.content.--position-top-end{--rs-flyout-origin-x:100%}.content.--position-end,.content.--position-end-bottom,.content.--position-end-top{--rs-flyout-origin-x:0%}.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-max-h:100%;--rs-flyout-max-w:100%;--rs-flyout-z-index:var(--rs-z-index-absolute);--rs-flyout-origin-x:50%;--rs-flyout-origin-y:50%;display:flex;flex-direction:column;isolation:isolate;pointer-events:none;position:absolute;z-index:var(--rs-flyout-z-index)}.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:var(--rs-flyout-max-w);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%}.content.--position-bottom,.content.--position-bottom-end,.content.--position-bottom-start{--rs-flyout-origin-y:0%}.content.--position-bottom-start,.content.--position-top-start{--rs-flyout-origin-x:0%}.content.--position-bottom-end,.content.--position-start,.content.--position-start-bottom,.content.--position-start-top,.content.--position-top-end{--rs-flyout-origin-x:100%}.content.--position-end,.content.--position-end-bottom,.content.--position-end-top{--rs-flyout-origin-x:0%}.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)}

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

@@ -1,6 +1,6 @@
 import React from "react";
-import type * as G from "../../types/global";
-import type { TrapMode } from "../../utilities/a11y";
+import type { Attributes, ClassName } from "@reshaped/headless";
+import type { TrapMode, Coordinates } from "@reshaped/headless/internal";
 /**
  * Utility
  */
@@ -115,7 +115,7 @@ type BaseProps = {
      */
     autoFocus?: boolean;
     /** Origin coordinates for the content when there is no trigger element */
-    originCoordinates?: G.Coordinates;
+    originCoordinates?: Coordinates;
     /** Node for inserting children */
     children?: React.ReactNode;
     /** Callback when the content is opened */
@@ -134,10 +134,12 @@ type BaseProps = {
     contentMaxHeight?: string;
     /** Maximum width for the content */
     contentMaxWidth?: string;
+    /** Z-index for the content element */
+    contentZIndex?: number;
     /** Additional classname for the content element */
     contentClassName?: string;
     /** Additional attributes for the content element */
-    contentAttributes?: G.Attributes<"div">;
+    contentAttributes?: Attributes<"div">;
     /** Ref accessor for the flyout methods */
     instanceRef?: React.Ref<Instance>;
     /** Container to render the content in using a portal, position is calculated based on the container bounds
@@ -164,9 +166,9 @@ export type ContentProps = {
     /** Node for inserting children */
     children?: React.ReactNode;
     /** Additional classname for the content element */
-    className?: G.ClassName;
+    className?: ClassName;
     /** Additional attributes for the content element */
-    attributes?: G.Attributes<"div">;
+    attributes?: Attributes<"div">;
 };
 export type ContextProps = {
     id: string;
@@ -190,7 +192,7 @@ export type ContextProps = {
     handleContentMouseDown: () => void;
     handleContentMouseUp: () => void;
     isSubmenu: boolean;
-} & Pick<Props, "triggerType" | "contentClassName" | "contentAttributes" | "contentGap" | "contentMaxHeight" | "contentMaxWidth" | "trapFocusMode" | "containerRef" | "disableContentHover" | "autoFocus">;
+} & Pick<Props, "triggerType" | "contentClassName" | "contentAttributes" | "contentGap" | "contentMaxHeight" | "contentMaxWidth" | "contentZIndex" | "trapFocusMode" | "containerRef" | "disableContentHover" | "autoFocus">;
 export type TriggerContextProps = {
     elRef?: ContextProps["triggerElRef"];
 };

package/dist/components/Flyout/FlyoutContent.js

@@ -1,15 +1,14 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
+import { classNames, useIsomorphicLayoutEffect } from "@reshaped/headless";
 import React from "react";
 import Portal from "../_private/Portal/index.js";
-import useIsomorphicLayoutEffect from "../../hooks/useIsomorphicLayoutEffect.js";
-import { classNames } from "../../utilities/props.js";
 import { useFlyoutContext, ContentProvider } from "./Flyout.context.js";
 import s from "./Flyout.module.css";
 import cooldown from "./utilities/cooldown.js";
 const FlyoutContent = (props) => {
     const { children, className, attributes } = props;
-    const { flyout, id, flyoutElRef, handleTransitionEnd, triggerType, handleContentMouseEnter, handleMouseLeave, handleContentMouseDown, handleContentMouseUp, contentClassName, contentAttributes, contentMaxHeight, contentMaxWidth, trapFocusMode, disableContentHover, autoFocus, width, isSubmenu, } = useFlyoutContext();
+    const { flyout, id, flyoutElRef, handleTransitionEnd, triggerType, handleContentMouseEnter, handleMouseLeave, handleContentMouseDown, handleContentMouseUp, contentClassName, contentAttributes, contentMaxHeight, contentMaxWidth, contentZIndex, trapFocusMode, disableContentHover, autoFocus, width, isSubmenu, } = useFlyoutContext();
     const { status, position } = flyout;
     const [mounted, setMounted] = React.useState(false);
     useIsomorphicLayoutEffect(() => {
@@ -43,6 +42,7 @@ const FlyoutContent = (props) => {
     const content = (_jsx(ContentProvider, { value: { elRef: flyoutElRef }, children: _jsx("div", { className: rootClassNames, style: {
                 "--rs-flyout-max-h": contentMaxHeight,
                 "--rs-flyout-max-w": contentMaxWidth,
+                "--rs-flyout-z-index": contentZIndex,
             }, ref: flyoutElRef, onTransitionEnd: handleTransitionEnd, onMouseEnter: triggerType === "hover" ? handleContentMouseEnter : undefined, onMouseLeave: triggerType === "hover" ? handleMouseLeave : undefined, onMouseDown: handleContentMouseDown, onTouchStart: handleContentMouseDown, onMouseUp: handleContentMouseUp, onTouchEnd: handleContentMouseUp, children: _jsx("div", { role: role, ...attributes, id: id, tabIndex: !autoFocus ? -1 : undefined, "aria-modal": role === "dialog" ? true : undefined, style: { ...attributes?.style, ...contentAttributes?.style }, className: innerClassNames, children: children }) }) }));
     return _jsx(Portal, { children: content });
 };

package/dist/components/Flyout/FlyoutControlled.js

@@ -1,14 +1,11 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
+import { TrapFocus, useHotkeys, useIsomorphicLayoutEffect, useHandlerRef, useOnClickOutside, } from "@reshaped/headless";
+import { checkKeyboardMode, } from "@reshaped/headless/internal";
 import React from "react";
 import useIsDismissible from "../../hooks/_private/useIsDismissible.js";
 import usePrevious from "../../hooks/_private/usePrevious.js";
 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 useOnClickOutside from "../../hooks/useOnClickOutside.js";
-import { TrapFocus, checkKeyboardMode } from "../../utilities/a11y/index.js";
 import { checkTransitions } from "../../utilities/animation.js";
 import * as timeouts from "./Flyout.constants.js";
 import { Provider, useFlyoutTriggerContext, useFlyoutContext, useFlyoutContentContext, } from "./Flyout.context.js";
@@ -16,7 +13,7 @@ import useFlyout from "./useFlyout.js";
 import cooldown from "./utilities/cooldown.js";
 import { createSafeArea } from "./utilities/safeArea.js";
 const FlyoutControlled = (props) => {
-    const { triggerType = "click", groupTimeouts, onOpen, onClose, children, disabled, forcePosition, fallbackAdjustLayout, fallbackMinHeight, trapFocusMode = "dialog", width, disableHideAnimation, disableContentHover, disableCloseOnOutsideClick, autoFocus = true, originCoordinates, contentGap = 2, contentShift, contentMaxHeight, contentMaxWidth, contentClassName, contentAttributes, position: passedPosition, active: passedActive, id: passedId, instanceRef, containerRef, initialFocusRef, positionRef, } = props;
+    const { triggerType = "click", groupTimeouts, onOpen, onClose, children, disabled, forcePosition, fallbackAdjustLayout, fallbackMinHeight, trapFocusMode = "dialog", width, disableHideAnimation, disableContentHover, disableCloseOnOutsideClick, autoFocus = true, originCoordinates, contentGap = 2, contentShift, contentMaxHeight, contentMaxWidth, contentZIndex, contentClassName, contentAttributes, position: passedPosition, active: passedActive, id: passedId, instanceRef, containerRef, initialFocusRef, positionRef, } = props;
     const fallbackPositions = props.fallbackPositions === false || forcePosition ? [] : props.fallbackPositions;
     const onOpenRef = useHandlerRef(onOpen);
     const onCloseRef = useHandlerRef(onClose);
@@ -349,6 +346,7 @@ const FlyoutControlled = (props) => {
             handleContentMouseUp,
             triggerType,
             trapFocusMode,
+            contentZIndex,
             contentClassName,
             contentAttributes,
             contentGap,

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

@@ -1,11 +1,11 @@
+import { type Coordinates } from "@reshaped/headless/internal";
 import type * as T from "./Flyout.types";
-import type * as G from "../../types/global";
 type UseFlyout = (args: Pick<T.Props, "width" | "position" | "defaultActive" | "fallbackAdjustLayout" | "fallbackMinHeight" | "contentGap" | "contentShift" | "onClose"> & {
     fallbackPositions?: T.Position[];
     container?: HTMLElement | null;
     triggerElRef: React.RefObject<HTMLElement | null>;
     flyoutElRef: React.RefObject<HTMLElement | null>;
-    triggerCoordinatesRef: React.RefObject<DOMRect | G.Coordinates | null>;
+    triggerCoordinatesRef: React.RefObject<DOMRect | Coordinates | null>;
 }) => Pick<T.State, "position" | "status"> & {
     updatePosition: (options?: {
         fallback?: boolean;

package/dist/components/Flyout/useFlyout.js

@@ -1,6 +1,6 @@
-import { Flyout } from "@reshaped/utilities";
+import { useIsomorphicLayoutEffect } from "@reshaped/headless";
+import { Flyout } from "@reshaped/headless/internal";
 import { useCallback, useMemo, useRef, useState } from "react";
-import useIsomorphicLayoutEffect from "../../hooks/useIsomorphicLayoutEffect.js";
 const useFlyout = (args) => {
     const { triggerElRef, flyoutElRef, triggerCoordinatesRef, contentGap, contentShift, onClose, ...options } = args;
     const { position: defaultPosition = "bottom", fallbackPositions, fallbackAdjustLayout, fallbackMinHeight, width, container, } = options;
@@ -38,7 +38,7 @@ const useFlyout = (args) => {
             fallbackMinHeight,
             contentGap: (contentGap ?? 0) * unitModifier,
             contentShift: (contentShift ?? 0) * unitModifier,
-            onClose: handleClose,
+            onDeactivate: handleClose,
         };
     }, [
         cachedFallbackPositions,
@@ -60,14 +60,14 @@ const useFlyout = (args) => {
         if (!flyoutOptions)
             return;
         flyoutRef.current = new Flyout(flyoutOptions);
-        const result = flyoutRef.current.open();
+        const result = flyoutRef.current.activate();
         setPosition(result.position);
         setStatus("visible");
     }, [getFlyoutOptions]);
     const remove = useCallback(() => {
         if (!flyoutRef.current)
             return;
-        flyoutRef.current.close();
+        flyoutRef.current.deactivate();
         setStatus("idle");
     }, []);
     const updatePosition = useCallback(() => {

package/dist/components/Flyout/utilities/safeArea.d.ts

@@ -1,10 +1,10 @@
-import type * as G from "../../../types/global";
+import type { Coordinates } from "@reshaped/headless/internal";
 type SafePolygonOptions = {
     contentRef: React.RefObject<HTMLElement | null>;
     triggerRef: React.RefObject<HTMLElement | null>;
     position: string | null | undefined;
     onClose: () => void;
-    origin: G.Coordinates;
+    origin: Coordinates;
 };
 export declare function createSafeArea(options: SafePolygonOptions): () => void;
 export {};

package/dist/components/Flyout/utilities/safeArea.js

@@ -49,21 +49,7 @@ export function createSafeArea(options) {
     }
     const contentRect = contentRef.current.getBoundingClientRect();
     const [corner1, corner2] = getContentCorners(contentRect, position);
-    // Add buffer to origin based on position to extend safe area
-    const buffer = 10;
     const origin = { x: passedOrigin.x, y: passedOrigin.y };
-    if (position?.startsWith("bottom")) {
-        origin.y -= buffer;
-    }
-    else if (position?.startsWith("top")) {
-        origin.y += buffer;
-    }
-    else if (position?.startsWith("start")) {
-        origin.x += buffer;
-    }
-    else if (position?.startsWith("end")) {
-        origin.x -= buffer;
-    }
     const triangle = [origin, corner1, corner2];
     let timeoutId = null;
     const cleanup = () => {

package/dist/components/Grid/Grid.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { classNames } from "@reshaped/headless";
 import { resolveMixin } from "../../styles/mixin.js";
-import { classNames, responsiveVariables, responsivePropDependency } from "../../utilities/props.js";
+import { responsiveVariables, responsivePropDependency } from "../../utilities/props.js";
 import s from "./Grid.module.css";
 export const GridItem = (props) => {
     const { area, colStart, colEnd, colSpan, rowStart, rowEnd, rowSpan, children, className, 

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

@@ -1,3 +1,4 @@
+import type { Attributes, ClassName } from "@reshaped/headless";
 import type { Property } from "csstype";
 import type React from "react";
 import type * as TStyles from "../../styles/types";
@@ -36,9 +37,9 @@ export type Props<TagName extends keyof React.JSX.IntrinsicElements | void = voi
     /** Custom root element html tag */
     as?: TagName extends keyof React.JSX.IntrinsicElements ? TagName : keyof React.JSX.IntrinsicElements;
     /** Additional classname for the root element */
-    className?: G.ClassName;
+    className?: ClassName;
     /** Additional attributes for the root element */
-    attributes?: G.Attributes<TagName>;
+    attributes?: Attributes<TagName>;
 };
 export type ItemProps<TagName extends keyof React.JSX.IntrinsicElements | void = void> = {
     /** Grid area for template syntax */
@@ -60,7 +61,7 @@ export type ItemProps<TagName extends keyof React.JSX.IntrinsicElements | void =
     /** Custom item element html tag */
     as?: TagName extends keyof React.JSX.IntrinsicElements ? TagName : keyof React.JSX.IntrinsicElements;
     /** Additional classname for the item element */
-    className?: G.ClassName;
+    className?: ClassName;
     /** Additional attributes for the item element */
-    attributes?: G.Attributes<TagName>;
+    attributes?: Attributes<TagName>;
 };

package/dist/components/Hidden/Hidden.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { classNames, responsiveClassNames } from "../../utilities/props.js";
+import { classNames } from "@reshaped/headless";
+import { responsiveClassNames } from "../../utilities/props.js";
 import s from "./Hidden.module.css";
 const Hidden = (props) => {
     const { as: TagName = "div", children, visibility, hide } = props;

package/dist/components/HiddenInput/HiddenInput.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { classNames } from "@reshaped/headless";
 import { useCheckboxGroup } from "../CheckboxGroup/index.js";
 import { useFormControl } from "../FormControl/index.js";
 import { useRadioGroup } from "../RadioGroup/index.js";
-import { classNames } from "../../utilities/props.js";
 import s from "./HiddenInput.module.css";
 const HiddenInput = (props) => {
     const { type, value, className, onBlur, onFocus, onChange, attributes } = props;

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

@@ -1,4 +1,5 @@
 import React from "react";
+import type { Attributes, ClassName } from "@reshaped/headless";
 import type * as G from "../../types/global";
 export type Props = {
     /** Name of the input element */
@@ -20,7 +21,7 @@ export type Props = {
     /** Type of the input element */
     type: "checkbox" | "radio";
     /** Additional classname for the root element */
-    className?: G.ClassName;
+    className?: ClassName;
     /** Additional attributes for the input element */
-    attributes?: G.Attributes<"input">;
+    attributes?: Attributes<"input">;
 };

package/dist/components/Hotkey/Hotkey.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { classNames } from "@reshaped/headless";
 import Text from "../Text/index.js";
-import { classNames } from "../../utilities/props.js";
 import s from "./Hotkey.module.css";
 const Hotkey = (props) => {
     const { children, active, className, attributes } = props;

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

@@ -1,12 +1,12 @@
+import type { Attributes, ClassName } from "@reshaped/headless";
 import type React from "react";
-import type * as G from "../../types/global";
 export type Props = {
     /** Node for inserting children */
     children: React.ReactNode;
     /** Highlight the component, can be used to show when hotkey is pressed */
     active?: boolean;
     /** Additional classname for the root element */
-    className?: G.ClassName;
+    className?: ClassName;
     /** Additional attributes for the root element */
-    attributes?: G.Attributes<"span">;
+    attributes?: Attributes<"span">;
 };

package/dist/components/Icon/Icon.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { classNames } from "@reshaped/headless";
 import React from "react";
 import { resolveMixin } from "../../styles/mixin.js";
-import { classNames } from "../../utilities/props.js";
 import s from "./Icon.module.css";
 const Icon = (props) => {
     const { svg: Component, className, color, size = "1em", autoWidth, attributes } = props;

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

@@ -1,3 +1,4 @@
+import type { Attributes, ClassName } from "@reshaped/headless";
 import type React from "react";
 import type * as G from "../../types/global";
 export type Props = {
@@ -10,7 +11,7 @@ export type Props = {
     /** Use the width of the svg asset instead of providing a square bounding box */
     autoWidth?: boolean;
     /** Additional classname for the root element */
-    className?: G.ClassName;
+    className?: ClassName;
     /** Additional attributes for the root element */
-    attributes?: G.Attributes<"span">;
+    attributes?: Attributes<"span">;
 };

package/dist/components/Image/Image.js

@@ -1,8 +1,8 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
+import { classNames } from "@reshaped/headless";
 import React from "react";
 import { resolveMixin } from "../../styles/mixin.js";
-import { classNames } from "../../utilities/props.js";
 import s from "./Image.module.css";
 const Image = (props) => {
     const { src, alt, width, maxWidth, height, aspectRatio, onLoad, onError, fallback, outline, displayMode = "cover", borderRadius, className, attributes, imageAttributes: passedImageAttributes, renderImage, } = props;

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

@@ -1,3 +1,4 @@
+import type { Attributes, ClassName } from "@reshaped/headless";
 import type React from "react";
 import type * as TStyles from "../../styles/types";
 import type * as G from "../../types/global";
@@ -27,14 +28,14 @@ export type Props = {
     /** Image fallback content if the image fails to load or was not provided */
     fallback?: string | React.ReactNode | boolean;
     /** Image render function, can be used for integrating with Image component in 3rd party frameworks */
-    renderImage?: (attributes: Omit<G.Attributes<"img">, "src" | "alt"> & {
+    renderImage?: (attributes: Omit<Attributes<"img">, "src" | "alt"> & {
         src: string;
         alt: string;
     }) => React.ReactNode;
     /** Additional attributes for the image element */
-    imageAttributes?: G.Attributes<"img">;
+    imageAttributes?: Attributes<"img">;
     /** Additional classname for the root element */
-    className?: G.ClassName;
+    className?: ClassName;
     /** Additional attributes for the root element */
-    attributes?: G.Attributes<"div"> & G.Attributes<"img">;
+    attributes?: Attributes<"div"> & Attributes<"img">;
 };

package/dist/components/Link/Link.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { classNames } from "@reshaped/headless";
 import { forwardRef } from "react";
 import Actionable from "../Actionable/index.js";
 import Icon from "../Icon/index.js";
-import { classNames } from "../../utilities/props.js";
 import s from "./Link.module.css";
 const Link = forwardRef((props, ref) => {
     const { icon, disabled, href, color = "primary", variant = "underline", className, children, attributes, type, onClick, stopPropagation, render, } = props;

package/dist/components/Loader/Loader.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { classNames, responsiveClassNames } from "../../utilities/props.js";
+import { classNames } from "@reshaped/headless";
+import { responsiveClassNames } from "../../utilities/props.js";
 import s from "./Loader.module.css";
 const Loader = (props) => {
     const { size = "small", color = "primary", className, attributes } = props;

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

@@ -1,3 +1,4 @@
+import type { Attributes, ClassName } from "@reshaped/headless";
 import type * as G from "../../types/global";
 export type Props = {
     /** Component size */
@@ -7,7 +8,7 @@ export type Props = {
     /** aria-label attribute for the root element */
     ariaLabel?: string;
     /** Additional classname for the root element */
-    className?: G.ClassName;
+    className?: ClassName;
     /** Additional attributes for the root element */
-    attributes?: G.Attributes<"span">;
+    attributes?: Attributes<"span">;
 };

package/dist/components/MenuItem/MenuItem.js

@@ -1,9 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { classNames } from "@reshaped/headless";
 import { forwardRef } from "react";
 import Actionable from "../Actionable/index.js";
 import Icon from "../Icon/index.js";
 import View from "../View/index.js";
-import { classNames, responsiveClassNames, responsivePropDependency } from "../../utilities/props.js";
+import { responsiveClassNames, responsivePropDependency } from "../../utilities/props.js";
 import s from "./MenuItem.module.css";
 const MenuItem = forwardRef((props, ref) => {
     const { icon, startSlot, endSlot, children, color = "primary", selected, highlighted, disabled, onClick, href, size = "medium", roundedCorners, stopPropagation, as, render, className, attributes, } = props;

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

@@ -1,3 +1,4 @@
+import type { Attributes, ClassName } from "@reshaped/headless";
 import type { ActionableProps } from "../Actionable";
 import type { IconProps } from "../Icon";
 import type React from "react";
@@ -27,7 +28,7 @@ export type AlignerProps = {
     /** Node for inserting children */
     children: React.ReactElement;
     /** Additional classname for the root element */
-    className?: G.ClassName;
+    className?: ClassName;
     /** Additional attributes for the root element */
-    attributes?: G.Attributes<"div">;
+    attributes?: Attributes<"div">;
 };

package/dist/components/Modal/Modal.js

@@ -1,14 +1,14 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
+import { classNames, useHandlerRef } from "@reshaped/headless";
+import { enableScroll, disableScroll } from "@reshaped/headless/internal";
 import React from "react";
 import Overlay from "../Overlay/index.js";
 import Text from "../Text/index.js";
 import useElementId from "../../hooks/useElementId.js";
-import useHandlerRef from "../../hooks/useHandlerRef.js";
 import useResponsiveClientValue from "../../hooks/useResponsiveClientValue.js";
 import { resolveMixin } from "../../styles/mixin.js";
-import { classNames, responsiveVariables, responsiveClassNames } from "../../utilities/props.js";
-import { enableScroll, disableScroll } from "../../utilities/scroll/index.js";
+import { responsiveVariables, responsiveClassNames } from "../../utilities/props.js";
 import s from "./Modal.module.css";
 const DRAG_THRESHOLD = 32;
 const DRAG_OPPOSITE_THRESHOLD = 100;
@@ -40,7 +40,7 @@ export const ModalSubtitle = (props) => {
     return (_jsx(Text, { variant: "body-3", color: "neutral-faded", attributes: { id: `${id}-subtitle` }, children: children }));
 };
 const Modal = (props) => {
-    const { children, onClose, onOpen, onAfterClose, onAfterOpen, active, size, padding = 4, position = "center", overflow, transparentOverlay, blurredOverlay, ariaLabel, autoFocus = true, disableSwipeGesture, disableCloseOnOutsideClick, containerRef, overlayClassName, className, attributes, } = props;
+    const { children, onClose, onOpen, onAfterClose, onAfterOpen, active, size, padding = 4, position = "center", overflow, transparentOverlay, blurredOverlay, ariaLabel, autoFocus = true, disableSwipeGesture, disableCloseOnOutsideClick, containerRef, contained, overlayClassName, className, attributes, } = props;
     const onCloseRef = useHandlerRef(onClose);
     const id = useElementId();
     const clientPosition = useResponsiveClientValue(position);
@@ -56,6 +56,7 @@ const Modal = (props) => {
     const [dragDistance, setDragDistance] = React.useState(0);
     const [hideProgress, setHideProgress] = React.useState(0);
     const mixinStyles = resolveMixin({ padding });
+    const shouldBeContained = containerRef && contained !== false;
     const value = React.useMemo(() => ({
         titleMounted,
         setTitleMounted,
@@ -165,10 +166,10 @@ const Modal = (props) => {
         setHideProgress(progress / 2);
         dragDistanceRef.current = dragDistance;
     }, [dragDistance, clientPosition, rootRef]);
-    return (_jsx(Overlay, { onClose: onClose, onOpen: onOpen, onAfterClose: onAfterClose, onAfterOpen: onAfterOpen, disableCloseOnClick: disableCloseOnOutsideClick, active: active, transparent: transparentOverlay || hideProgress, blurred: blurredOverlay, overflow: clientPosition === "center" ? "auto" : "hidden", className: overlayClassName, containerRef: containerRef, attributes: {
+    return (_jsx(Overlay, { onClose: onClose, onOpen: onOpen, onAfterClose: onAfterClose, onAfterOpen: onAfterOpen, disableCloseOnClick: disableCloseOnOutsideClick, active: active, transparent: transparentOverlay || hideProgress, blurred: blurredOverlay, overflow: clientPosition === "center" ? "auto" : "hidden", className: overlayClassName, contained: contained, containerRef: containerRef, attributes: {
             onTouchStart: handleDragStart,
         }, children: ({ active }) => {
-            const rootClassNames = classNames(s.root, className, active && s["--active"], dragging && s["--dragging"], overflow && s[`--overflow-${overflow}`], containerRef && s["--contained"], responsiveClassNames(s, "--position", position), mixinStyles.classNames);
+            const rootClassNames = classNames(s.root, className, active && s["--active"], dragging && s["--dragging"], overflow && s[`--overflow-${overflow}`], shouldBeContained && s["--contained"], responsiveClassNames(s, "--position", position), mixinStyles.classNames);
             return (_jsx(Context.Provider, { value: value, children: _jsx("div", { ...attributes, style: {
                         ...mixinStyles.variables,
                         ...responsiveVariables("--rs-modal-size", size),

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

@@ -1,3 +1,4 @@
+import type { Attributes, ClassName } from "@reshaped/headless";
 import type { OverlayProps, OverlayCloseReason } from "../Overlay";
 import type React from "react";
 import type * as G from "../../types/global";
@@ -46,11 +47,11 @@ export type Props = {
     /** aria-label attribute for the root element, useful when there is no visible title */
     ariaLabel?: string;
     /** Additional classname for the root element */
-    className?: G.ClassName;
+    className?: ClassName;
     /** Additional classname for the overlay element */
-    overlayClassName?: G.ClassName;
+    overlayClassName?: ClassName;
     /** Additional attributes for the root element */
-    attributes?: G.Attributes<"div"> & {
+    attributes?: Attributes<"div"> & {
         ref?: React.RefObject<HTMLDivElement | null>;
     };
-} & Pick<OverlayProps, "onOpen" | "onAfterOpen" | "onAfterClose" | "active" | "containerRef">;
+} & Pick<OverlayProps, "onOpen" | "onAfterOpen" | "onAfterClose" | "active" | "containerRef" | "contained">;

package/dist/components/NumberField/NumberFieldControlled.js

@@ -1,5 +1,6 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useHotkeys, useHandlerRef } from "@reshaped/headless";
 import React from "react";
 import Actionable from "../Actionable/index.js";
 import { useFormControl } from "../FormControl/index.js";
@@ -7,8 +8,6 @@ import Icon from "../Icon/index.js";
 import TextField from "../TextField/index.js";
 import * as keys from "../../constants/keys.js";
 import useElementId from "../../hooks/useElementId.js";
-import useHandlerRef from "../../hooks/useHandlerRef.js";
-import useHotkeys from "../../hooks/useHotkeys.js";
 import IconChevronDown from "../../icons/ChevronDown.js";
 import IconChevronUp from "../../icons/ChevronUp.js";
 import IconMinus from "../../icons/Minus.js";