reshaped 3.10.0-canary.6 → 3.10.0-canary.7

package/dist/components/Flyout/FlyoutContent.js

@@ -1,9 +1,8 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { classNames } from "@reshaped/utilities";
+import { classNames, useIsomorphicLayoutEffect } from "@reshaped/headless";
 import React from "react";
 import Portal from "../_private/Portal/index.js";
-import useIsomorphicLayoutEffect from "../../hooks/useIsomorphicLayoutEffect.js";
 import { useFlyoutContext, ContentProvider } from "./Flyout.context.js";
 import s from "./Flyout.module.css";
 import cooldown from "./utilities/cooldown.js";

package/dist/components/Flyout/FlyoutControlled.js

@@ -1,15 +1,11 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { TrapFocus } from "@reshaped/utilities";
-import { checkKeyboardMode } from "@reshaped/utilities/internal";
+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 { checkTransitions } from "../../utilities/animation.js";
 import * as timeouts from "./Flyout.constants.js";
 import { Provider, useFlyoutTriggerContext, useFlyoutContext, useFlyoutContentContext, } from "./Flyout.context.js";

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;

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/Grid/Grid.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { classNames } from "@reshaped/utilities";
+import { classNames } from "@reshaped/headless";
 import { resolveMixin } from "../../styles/mixin.js";
 import { responsiveVariables, responsivePropDependency } from "../../utilities/props.js";
 import s from "./Grid.module.css";

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,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { classNames } from "@reshaped/utilities";
+import { classNames } from "@reshaped/headless";
 import { responsiveClassNames } from "../../utilities/props.js";
 import s from "./Hidden.module.css";
 const Hidden = (props) => {

package/dist/components/HiddenInput/HiddenInput.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { classNames } from "@reshaped/utilities";
+import { classNames } from "@reshaped/headless";
 import { useCheckboxGroup } from "../CheckboxGroup/index.js";
 import { useFormControl } from "../FormControl/index.js";
 import { useRadioGroup } from "../RadioGroup/index.js";

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,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { classNames } from "@reshaped/utilities";
+import { classNames } from "@reshaped/headless";
 import Text from "../Text/index.js";
 import s from "./Hotkey.module.css";
 const Hotkey = (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,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { classNames } from "@reshaped/utilities";
+import { classNames } from "@reshaped/headless";
 import React from "react";
 import { resolveMixin } from "../../styles/mixin.js";
 import s from "./Icon.module.css";

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,6 +1,6 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { classNames } from "@reshaped/utilities";
+import { classNames } from "@reshaped/headless";
 import React from "react";
 import { resolveMixin } from "../../styles/mixin.js";
 import s from "./Image.module.css";

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,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { classNames } from "@reshaped/utilities";
+import { classNames } from "@reshaped/headless";
 import { forwardRef } from "react";
 import Actionable from "../Actionable/index.js";
 import Icon from "../Icon/index.js";

package/dist/components/Loader/Loader.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { classNames } from "@reshaped/utilities";
+import { classNames } from "@reshaped/headless";
 import { responsiveClassNames } from "../../utilities/props.js";
 import s from "./Loader.module.css";
 const Loader = (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,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { classNames } from "@reshaped/utilities";
+import { classNames } from "@reshaped/headless";
 import { forwardRef } from "react";
 import Actionable from "../Actionable/index.js";
 import Icon from "../Icon/index.js";

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,12 +1,11 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { classNames } from "@reshaped/utilities";
-import { enableScroll, disableScroll } from "@reshaped/utilities/internal";
+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 { responsiveVariables, responsiveClassNames } from "../../utilities/props.js";

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" | "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";

package/dist/components/Overlay/Overlay.js

@@ -1,15 +1,10 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { TrapFocus } from "@reshaped/utilities";
-import { classNames } from "@reshaped/utilities";
+import { TrapFocus, useHotkeys, useIsomorphicLayoutEffect, useHandlerRef, useScrollLock, useToggle, } from "@reshaped/headless";
+import { classNames } from "@reshaped/headless";
 import React from "react";
 import Portal from "../_private/Portal/index.js";
 import useIsDismissible from "../../hooks/_private/useIsDismissible.js";
-import useHandlerRef from "../../hooks/useHandlerRef.js";
-import useHotkeys from "../../hooks/useHotkeys.js";
-import useIsomorphicLayoutEffect from "../../hooks/useIsomorphicLayoutEffect.js";
-import useScrollLock from "../../hooks/useScrollLock.js";
-import useToggle from "../../hooks/useToggle.js";
 import { onNextFrame } from "../../utilities/animation.js";
 import s from "./Overlay.module.css";
 const Overlay = (props) => {
@@ -101,9 +96,8 @@ const Overlay = (props) => {
         const containerEl = containerRef?.current;
         if (containerEl) {
             originalOverflowRef.current = containerEl.style.overflow;
-            // eslint-disable-next-line react-hooks/immutability
-            containerEl.style.overflow = "hidden";
-            containerEl.style.isolation = "isolate";
+            containerEl.style.setProperty("overflow", "hidden");
+            containerEl.style.setProperty("isolation", "isolate");
             setOffset([containerEl.scrollLeft, containerEl.scrollTop]);
         }
         trapFocus.trap(contentRef.current, {

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

@@ -1,5 +1,5 @@
+import type { Attributes, ClassName } from "@reshaped/headless";
 import type React from "react";
-import type * as G from "../../types/global";
 export type CloseReason = "overlay-click" | "escape-key";
 export type Props = {
     /** Make the overlay transparent */
@@ -31,7 +31,7 @@ export type Props = {
     /** Contain the component within the container element. Defaults to true when containerRef is provided */
     contained?: 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">;
 };

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

@@ -1,4 +1,4 @@
-import type * as G from "../../types/global";
+import type { Attributes, ClassName } from "@reshaped/headless";
 export type BaseProps = {
     /** Total number of pages available */
     total: number;
@@ -15,9 +15,9 @@ export type BaseProps = {
     /** aria-label attribute for the next page button */
     nextAriaLabel: string;
     /** Additional classname for the root element */
-    className?: G.ClassName;
+    className?: ClassName;
     /** Additional attributes for the root element */
-    attributes?: G.Attributes<"div">;
+    attributes?: Attributes<"div">;
 };
 export type ControlledProps = BaseProps & {
     /** Currently selected page number, starts with 1, enables controlled mode */

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

@@ -1,3 +1,4 @@
+import type { Attributes, ClassName } from "@reshaped/headless";
 import type * as G from "../../types/global";
 export type Size = "small" | "medium" | "large" | "xlarge";
 type BaseProps = {
@@ -14,11 +15,11 @@ type BaseProps = {
     /** Callback when the input value changes */
     onChange?: G.ChangeHandler<string>;
     /** Additional attributes for the input element */
-    inputAttributes?: G.Attributes<"input">;
+    inputAttributes?: Attributes<"input">;
     /** Additional classname for the root element */
-    className?: G.ClassName;
+    className?: ClassName;
     /** Additional attributes for the root element */
-    attributes?: G.Attributes<"div">;
+    attributes?: Attributes<"div">;
 };
 export type ControlledProps = BaseProps & {
     /** Value of the input element, enables controlled mode */

package/dist/components/PinField/PinFieldControlled.js

@@ -1,11 +1,11 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useHotkeys } from "@reshaped/headless";
 import React from "react";
 import { useFormControl } from "../FormControl/index.js";
 import Text from "../Text/index.js";
 import View from "../View/index.js";
 import * as keys from "../../constants/keys.js";
-import useHotkeys from "../../hooks/useHotkeys.js";
 import { onNextFrame } from "../../utilities/animation.js";
 import { responsivePropDependency } from "../../utilities/props.js";
 import { regExpNumericChar, regExpAlphabeticChar, regExpAlphaNumericChar, } from "./PinField.constants.js";

package/dist/components/Popover/Popover.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { classNames } from "@reshaped/utilities";
+import { classNames } from "@reshaped/headless";
 import Dismissible from "../Dismissible/index.js";
 import Flyout, { useFlyoutContext } from "../Flyout/index.js";
 import { resolveMixin } from "../../styles/mixin.js";

package/dist/components/Progress/Progress.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { classNames } from "@reshaped/utilities";
+import { classNames } from "@reshaped/headless";
 import s from "./Progress.module.css";
 const Progress = (props) => {
     const { value = 0, min = 0, max = 100, color = "primary", size = "medium", duration, ariaLabel, className, attributes, } = props;

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

@@ -1,4 +1,4 @@
-import type * as G from "../../types/global";
+import type { Attributes, ClassName } from "@reshaped/headless";
 export type Props = {
     /** Value of the progress bar controlling the size of the fill */
     value?: number;
@@ -15,7 +15,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<"div">;
+    attributes?: Attributes<"div">;
 };

package/dist/components/ProgressIndicator/ProgressIndicator.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { classNames } from "@reshaped/utilities";
+import { classNames } from "@reshaped/headless";
 import s from "./ProgressIndicator.module.css";
 const VISIBLE_ITEMS = 7;
 const HALF_ITEMS = Math.floor(VISIBLE_ITEMS / 2);

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

@@ -1,4 +1,4 @@
-import type * as G from "../../types/global";
+import type { Attributes, ClassName } from "@reshaped/headless";
 export type Props = {
     /** Total amount of progress indicator dots */
     total: number;
@@ -11,7 +11,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<"div">;
+    attributes?: Attributes<"div">;
 };

package/dist/components/Radio/Radio.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { classNames } from "@reshaped/utilities";
+import { classNames } from "@reshaped/headless";
 import { useFormControl } from "../FormControl/index.js";
 import HiddenInput from "../HiddenInput/index.js";
 import { useRadioGroup } from "../RadioGroup/index.js";

package/dist/components/Radio/Radio.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";
 type BaseProps = {
@@ -20,11 +21,11 @@ type BaseProps = {
     /** Callback when the input is blurred */
     onBlur?: (e: React.FocusEvent) => void;
     /** Additional classname for the root element */
-    className?: G.ClassName;
+    className?: ClassName;
     /** Additional attributes for the root element */
-    attributes?: G.Attributes<"label">;
+    attributes?: Attributes<"label">;
     /** Additional attributes for the input element */
-    inputAttributes?: G.Attributes<"input">;
+    inputAttributes?: Attributes<"input">;
 };
 export type ControlledProps = BaseProps & {
     checked: boolean;

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

@@ -1,3 +1,4 @@
+import type { Attributes, ClassName } from "@reshaped/headless";
 import type { RadioProps } from "../Radio";
 import type React from "react";
 import type * as G from "../../types/global";
@@ -15,9 +16,9 @@ type BaseProps = {
     /** Callback when the input value changes */
     onChange?: G.ChangeHandler<string>;
     /** Additional classname for the root element */
-    className?: G.ClassName;
+    className?: ClassName;
     /** Additional attributes for the root element */
-    attributes?: G.Attributes<"div">;
+    attributes?: Attributes<"div">;
 };
 export type ControlledProps = BaseProps & {
     /** Value of the input element, enables controlled mode */

package/dist/components/Reshaped/Reshaped.js

@@ -1,26 +1,19 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { classNames } from "@reshaped/utilities";
+import { Reshaped as HeadlessReshaped, classNames } from "@reshaped/headless";
 import React from "react";
 import { GlobalColorMode, PrivateTheme } from "../Theme/index.js";
 import { useGlobalColorMode } from "../Theme/useTheme.js";
 import { ToastProvider } from "../Toast/index.js";
-import { SingletonEnvironmentContext, useSingletonEnvironment, } from "../../hooks/_private/useSingletonEnvironment.js";
-import { SingletonHotkeysProvider } from "../../hooks/_private/useSingletonHotkeys.js";
-import { SingletonKeyboardModeProvider } from "../../hooks/_private/useSingletonKeyboardMode.js";
+import { SingletonViewportProvider } from "../../hooks/_private/useSingletonViewport.js";
 import s from "./Reshaped.module.css";
 import "./Reshaped.css";
-const ReshapedInner = (props) => {
-    const { children, defaultRTL, defaultViewport = "s", toastOptions } = props;
-    const rtlState = useSingletonEnvironment(defaultRTL);
-    return (_jsx(SingletonKeyboardModeProvider, { children: _jsx(SingletonEnvironmentContext.Provider, { value: { rtl: rtlState, defaultViewport }, children: _jsx(SingletonHotkeysProvider, { children: _jsx(ToastProvider, { options: toastOptions, children: children }) }) }) }));
-};
 const Reshaped = (props) => {
-    const { theme, defaultTheme = "reshaped", colorMode, defaultColorMode, scoped, className, } = props;
+    const { theme, defaultTheme = "reshaped", colorMode, defaultColorMode, defaultViewport, toastOptions, scoped, className, } = props;
     const rootClassNames = classNames(s.root, className);
     const scopeRef = React.useRef(null);
     const parentGlobalColorMode = useGlobalColorMode();
-    return (_jsx(GlobalColorMode, { defaultMode: defaultColorMode || parentGlobalColorMode.mode || "light", mode: colorMode, scopeRef: !!parentGlobalColorMode && scoped ? scopeRef : undefined, children: _jsx(PrivateTheme, { name: theme, defaultName: defaultTheme, className: rootClassNames, scoped: scoped, scopeRef: !!parentGlobalColorMode && scoped ? scopeRef : undefined, children: _jsx(ReshapedInner, { ...props, children: props.children }) }) }));
+    return (_jsx(HeadlessReshaped, { children: _jsx(GlobalColorMode, { defaultMode: defaultColorMode || parentGlobalColorMode.mode || "light", mode: colorMode, scopeRef: !!parentGlobalColorMode && scoped ? scopeRef : undefined, children: _jsx(PrivateTheme, { name: theme, defaultName: defaultTheme, className: rootClassNames, scoped: scoped, scopeRef: !!parentGlobalColorMode && scoped ? scopeRef : undefined, children: _jsx(SingletonViewportProvider, { defaultViewport: defaultViewport, children: _jsx(ToastProvider, { options: toastOptions, children: props.children }) }) }) }) }));
 };
 Reshaped.displayName = "Reshaped";
 export default Reshaped;

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

@@ -1,3 +1,4 @@
+import type { Attributes, ClassName } from "@reshaped/headless";
 import type { GlobalColorModeProps, ThemeProps } from "../Theme";
 import type { ToastProviderProps } from "../Toast";
 import type React from "react";
@@ -22,7 +23,7 @@ export type Props = {
     /** Enable scoped mode for applications not using Reshaped provider at the application root */
     scoped?: 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">;
 };

package/dist/components/Resizable/Resizable.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { classNames } from "@reshaped/utilities";
+import { classNames } from "@reshaped/headless";
 import React from "react";
 import View from "../View/index.js";
 import s from "./Resizable.module.css";

package/dist/components/Resizable/ResizableHandle.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { classNames } from "@reshaped/utilities";
+import { classNames } from "@reshaped/headless";
 import React from "react";
 import View from "../View/index.js";
 import useDrag from "../../hooks/_private/useDrag.js";

package/dist/components/Scrim/Scrim.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { classNames } from "@reshaped/utilities";
+import { classNames } from "@reshaped/headless";
 import View from "../View/index.js";
 import s from "./Scrim.module.css";
 const Scrim = (props) => {