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

package/dist/components/Overlay/Overlay.js

@@ -1,19 +1,14 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
+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 { TrapFocus } from "../../utilities/a11y/index.js";
 import { onNextFrame } from "../../utilities/animation.js";
-import { classNames } from "../../utilities/props.js";
 import s from "./Overlay.module.css";
 const Overlay = (props) => {
-    const { active, children, transparent, blurred, overflow, onClose, onOpen, onAfterClose, onAfterOpen, disableCloseOnClick, containerRef, className, attributes, } = props;
+    const { active, children, transparent, blurred, overflow, onClose, onOpen, onAfterClose, onAfterOpen, disableCloseOnClick, containerRef, contained, className, attributes, } = props;
     // Selectors wrapped with refs to simplify working with useEffect dependency array
     const onCloseRef = useHandlerRef(onClose);
     const onOpenRef = useHandlerRef(onOpen);
@@ -32,7 +27,8 @@ const Overlay = (props) => {
     const { active: rendered, activate: render, deactivate: remove } = useToggle(active || false);
     const { active: visible, activate: show, deactivate: hide } = useToggle(active || false);
     const isDismissible = useIsDismissible({ active, contentRef, hasTrigger: false });
-    const rootClassNames = classNames(s.root, visible && s["--visible"], isTransparent && s["--click-through"], blurred && s["--blurred"], animated && s["--animated"], containerRef && s["--contained"], overflow === "auto" && s["--overflow-auto"], className);
+    const shouldBeContained = containerRef && contained !== false;
+    const rootClassNames = classNames(s.root, visible && s["--visible"], isTransparent && s["--click-through"], blurred && s["--blurred"], animated && s["--animated"], shouldBeContained && s["--contained"], overflow === "auto" && s["--overflow-auto"], className);
     const isInsideContent = (el) => {
         if (!contentRef.current)
             return;
@@ -100,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 */
@@ -28,8 +28,10 @@ export type Props = {
     disableCloseOnClick?: boolean;
     /** Element to render the component in */
     containerRef?: React.RefObject<HTMLElement | null>;
+    /** 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,8 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { classNames } from "@reshaped/headless";
 import Dismissible from "../Dismissible/index.js";
 import Flyout, { useFlyoutContext } from "../Flyout/index.js";
 import { resolveMixin } from "../../styles/mixin.js";
-import { classNames } from "../../utilities/props.js";
 import s from "./Popover.module.css";
 const Popover = (props) => {
     const { width, variant = "elevated", triggerType = "click", position = "bottom", elevation, borderRadius, ...flyoutProps } = props;

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

@@ -1,7 +1,7 @@
 import type { FlyoutProps, FlyoutInstance } from "../Flyout";
 import type React from "react";
 export type Instance = FlyoutInstance;
-export type Props = Pick<FlyoutProps, "id" | "position" | "forcePosition" | "fallbackPositions" | "fallbackAdjustLayout" | "fallbackMinWidth" | "fallbackMinHeight" | "onOpen" | "onClose" | "width" | "trapFocusMode" | "active" | "defaultActive" | "contentGap" | "contentShift" | "contentMaxHeight" | "instanceRef" | "triggerType" | "disableHideAnimation" | "disableContentHover" | "disableCloseOnOutsideClick" | "autoFocus" | "containerRef" | "positionRef" | "initialFocusRef" | "originCoordinates"> & {
+export type Props = Pick<FlyoutProps, "id" | "position" | "forcePosition" | "fallbackPositions" | "fallbackAdjustLayout" | "fallbackMinWidth" | "fallbackMinHeight" | "onOpen" | "onClose" | "width" | "trapFocusMode" | "active" | "defaultActive" | "contentGap" | "contentShift" | "contentMaxHeight" | "contentZIndex" | "instanceRef" | "triggerType" | "disableHideAnimation" | "disableContentHover" | "disableCloseOnOutsideClick" | "autoFocus" | "containerRef" | "positionRef" | "initialFocusRef" | "originCoordinates"> & {
     /** Node for inserting children */
     children?: React.ReactNode;
     /** Content element padding, unit token multiplier */

package/dist/components/Progress/Progress.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { classNames } from "../../utilities/props.js";
+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 "../../utilities/props.js";
+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,10 +1,11 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { classNames } from "@reshaped/headless";
 import { useFormControl } from "../FormControl/index.js";
 import HiddenInput from "../HiddenInput/index.js";
 import { useRadioGroup } from "../RadioGroup/index.js";
 import Text from "../Text/index.js";
-import { classNames, responsiveClassNames, responsivePropDependency } from "../../utilities/props.js";
+import { responsiveClassNames, responsivePropDependency } from "../../utilities/props.js";
 import s from "./Radio.module.css";
 const Radio = (props) => {
     const { children, value, onChange, onFocus, onBlur, size = "medium", className, attributes, inputAttributes, } = props;

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 { 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 { classNames } from "../../utilities/props.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,8 +1,8 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
+import { classNames } from "@reshaped/headless";
 import React from "react";
 import View from "../View/index.js";
-import { classNames } from "../../utilities/props.js";
 import s from "./Resizable.module.css";
 import { ResizableHandleContext } from "./ResizableHandle.js";
 export const ResizableItem = () => null;

package/dist/components/Resizable/ResizableHandle.js

@@ -1,9 +1,9 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
+import { classNames } from "@reshaped/headless";
 import React from "react";
 import View from "../View/index.js";
 import useDrag from "../../hooks/_private/useDrag.js";
-import { classNames } from "../../utilities/props.js";
 import s from "./Resizable.module.css";
 export const ResizableHandleContext = React.createContext({});
 const ResizableHandle = (props) => {

package/dist/components/Scrim/Scrim.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { classNames } from "@reshaped/headless";
 import View from "../View/index.js";
-import { classNames } from "../../utilities/props.js";
 import s from "./Scrim.module.css";
 const Scrim = (props) => {
     const { children, backgroundSlot, position = "cover", paddingInline, paddingBlock, padding, borderRadius, attributes, className, scrimClassName, } = props;

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

@@ -1,6 +1,6 @@
 import React from "react";
+import type { Attributes, ClassName } from "@reshaped/headless";
 import type { ViewProps } from "../View";
-import type * as G from "../../types/global";
 export type Props = {
     /** Node for inserting content */
     children?: React.ReactNode;
@@ -9,9 +9,9 @@ export type Props = {
     /** Component content position */
     position?: "full" | "top" | "bottom" | "start" | "end";
     /** Additional classname for the scrim element */
-    scrimClassName?: G.ClassName;
+    scrimClassName?: ClassName;
     /** Additional classname for the root element */
-    className?: G.ClassName;
+    className?: ClassName;
     /** Additional attributes for the root element */
-    attributes?: G.Attributes<"div">;
+    attributes?: Attributes<"div">;
 } & Pick<ViewProps, "paddingInline" | "paddingBlock" | "padding" | "borderRadius">;

package/dist/components/ScrollArea/ScrollArea.js

@@ -1,11 +1,9 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { classNames, useIsomorphicLayoutEffect, useHandlerRef } from "@reshaped/headless";
+import { disableScroll, enableScroll } from "@reshaped/headless/internal";
 import React, { forwardRef } from "react";
-import useHandlerRef from "../../hooks/useHandlerRef.js";
-import useIsomorphicLayoutEffect from "../../hooks/useIsomorphicLayoutEffect.js";
 import { resolveMixin } from "../../styles/mixin.js";
-import { classNames } from "../../utilities/props.js";
-import { disableScroll, enableScroll } from "../../utilities/scroll/index.js";
 import s from "./ScrollArea.module.css";
 const ScrollAreaBar = (props) => {
     const { ratio, position, vertical, onThumbMove } = props;

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

@@ -1,3 +1,5 @@
+import type { Attributes, ClassName } from "@reshaped/headless";
+import type { Coordinates } from "@reshaped/headless/internal";
 import type React from "react";
 import type * as G from "../../types/global";
 export type Props = {
@@ -6,15 +8,15 @@ export type Props = {
     /** Scrollbar visibility behavior based on the user interaction */
     scrollbarDisplay?: "visible" | "hover" | "hidden";
     /** Callback when the scroll area is scrolled */
-    onScroll?: (args: G.Coordinates) => void;
+    onScroll?: (args: Coordinates) => void;
     /** Height of the scroll area, literal css value or unit token multiplier */
     height?: G.Responsive<string | number>;
     /** Maximum height of the scroll area, literal css value or unit token multiplier */
     maxHeight?: G.Responsive<string | number>;
     /** 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 BarProps = {
     ratio: number;

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

@@ -1,6 +1,7 @@
 import React from "react";
-import { DropdownMenuProps } from "../DropdownMenu";
+import type { Attributes, ClassName } from "@reshaped/headless";
 import type { ActionableProps } from "../Actionable";
+import type { DropdownMenuProps } from "../DropdownMenu";
 import type { IconProps } from "../Icon";
 import type { MenuItemProps } from "../MenuItem";
 import type * as G from "../../types/global";
@@ -47,9 +48,9 @@ type BaseFragment = {
     /** Callback when the trigger is clicked */
     onClick?: ActionableProps["onClick"];
     /** Additional classname for the root element */
-    className?: G.ClassName;
+    className?: ClassName;
     /** Additional attributes for the root element */
-    attributes?: G.Attributes<"div">;
+    attributes?: Attributes<"div">;
     /** Node for inserting children */
     children?: React.ReactNode;
 };
@@ -72,7 +73,7 @@ export type NativeFragment = {
     /** Callback when the input is blurred */
     onBlur?: (e: React.FocusEvent<HTMLSelectElement>) => void;
     /** Additional attributes for the input element */
-    inputAttributes?: G.Attributes<"select">;
+    inputAttributes?: Attributes<"select">;
 };
 export type NativeControlledFragment = {
     value: string;

package/dist/components/Select/SelectNative.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { classNames } from "@reshaped/headless";
 import React from "react";
-import { classNames } from "../../utilities/props.js";
 import s from "./Select.module.css";
 import SelectEndContent from "./SelectEndContent.js";
 import SelectStartContent from "./SelectStartContent.js";

package/dist/components/Select/SelectRoot.js

@@ -1,8 +1,9 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
+import { classNames } from "@reshaped/headless";
 import { useFormControl } from "../FormControl/index.js";
 import useElementId from "../../hooks/useElementId.js";
-import { classNames, responsiveClassNames } from "../../utilities/props.js";
+import { responsiveClassNames } from "../../utilities/props.js";
 import s from "./Select.module.css";
 const SelectRoot = (passedProps) => {
     const formControl = useFormControl();

package/dist/components/Skeleton/Skeleton.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { classNames } from "@reshaped/headless";
 import View from "../View/index.js";
-import { classNames } from "../../utilities/props.js";
 import s from "./Skeleton.module.css";
 const Skeleton = (props) => {
     const { borderRadius = "small", width, height, className, attributes } = props;

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

@@ -1,8 +1,8 @@
+import type { Attributes, ClassName } from "@reshaped/headless";
 import type { ViewProps } from "../View";
-import type * as G from "../../types/global";
 export type Props = Pick<ViewProps, "width" | "height" | "borderRadius"> & {
     /** 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/Slider/Slider.types.d.ts

@@ -1,4 +1,4 @@
-import type * as G from "../../types/global";
+import type { Attributes, ClassName } from "@reshaped/headless";
 export type SingleChangeArgs = {
     /** Value of the slider, enables controlled mode */
     value: number;
@@ -131,9 +131,9 @@ type BaseProps = {
         value: number;
     }) => string) | false;
     /** 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 & ((ControlledSingleProps & SingleSelectionProps) | (ControlledRangeProps & (RangeSelectionProps | NameRangeSelectionProps)));
 export type UncontrolledProps = BaseProps & ((UncontrolledSingleProps & SingleSelectionProps) | (UncontrolledRangeProps & (RangeSelectionProps | NameRangeSelectionProps)));

package/dist/components/Slider/Slider.utilities.d.ts

@@ -4,3 +4,10 @@ export declare const getDragCoord: ({ event, vertical, }: {
     event: MouseEvent | TouchEvent;
     vertical?: boolean;
 }) => number;
+/**
+ * Workaround for changing a hidden input value with triggering
+ * React input onChange and form onChange handlers
+ *
+ * Based on https://stackoverflow.com/a/60378508
+ */
+export declare const triggerChangeEvent: (el: HTMLInputElement, value: string) => void;

package/dist/components/Slider/Slider.utilities.js

@@ -22,3 +22,14 @@ export const getDragCoord = ({ event, vertical, }) => {
         return event.clientX;
     return event.changedTouches[0].clientX;
 };
+/**
+ * Workaround for changing a hidden input value with triggering
+ * React input onChange and form onChange handlers
+ *
+ * Based on https://stackoverflow.com/a/60378508
+ */
+export const triggerChangeEvent = (el, value) => {
+    const nativeInputValueSetter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, "value").set;
+    nativeInputValueSetter.call(el, value);
+    el.dispatchEvent(new Event("change", { bubbles: true }));
+};

package/dist/components/Slider/SliderControlled.js

@@ -1,15 +1,12 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { classNames, useRTL, useHandlerRef } from "@reshaped/headless";
+import { disableScroll, enableScroll } from "@reshaped/headless/internal";
 import React from "react";
 import { useFormControl } from "../FormControl/index.js";
 import useElementId from "../../hooks/useElementId.js";
-import useHandlerRef from "../../hooks/useHandlerRef.js";
-import useRTL from "../../hooks/useRTL.js";
-import { triggerChangeEvent } from "../../utilities/dom/index.js";
-import { classNames } from "../../utilities/props.js";
-import { disableScroll, enableScroll } from "../../utilities/scroll/index.js";
 import s from "./Slider.module.css";
-import { applyStepToValue, getDragCoord } from "./Slider.utilities.js";
+import { applyStepToValue, getDragCoord, triggerChangeEvent } from "./Slider.utilities.js";
 import SliderThumb from "./SliderThumb.js";
 const THUMB_SIZE = 16;
 const SliderControlled = (props) => {
@@ -93,13 +90,18 @@ const SliderControlled = (props) => {
         // @ts-ignore
         if (options.commit)
             onChangeCommitRef.current?.(args);
+        // Keyboard changes should commit immediately
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        if (options.native && !draggingId)
+            onChangeCommitRef.current?.(args);
         // Manually controlled resolving of single/range handlers
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         // @ts-ignore
         if (options.native)
             onChangeRef.current?.(args);
         triggerChangeEvent(minInputRef.current, value.toString());
-    }, [maxValue, name, minName, maxName, range, onChangeCommitRef, onChangeRef]);
+    }, [range, maxValue, name, minName, maxName, draggingId, onChangeCommitRef, onChangeRef]);
     const handleMaxChange = React.useCallback((value, options = {}) => {
         const args = range
             ? { minValue: minValue, maxValue: value, name, minName, maxName }
@@ -109,13 +111,18 @@ const SliderControlled = (props) => {
         // @ts-ignore
         if (options.commit)
             onChangeCommitRef.current?.(args);
+        // Keyboard changes should commit immediately
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        if (options.native && !draggingId)
+            onChangeCommitRef.current?.(args);
         // Manually controlled resolving of single/range handlers
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         // @ts-ignore
         if (options.native)
             onChangeRef.current?.(args);
         triggerChangeEvent(maxInputRef.current, value.toString());
-    }, [minValue, name, minName, maxName, range, onChangeRef, onChangeCommitRef]);
+    }, [range, minValue, name, minName, maxName, onChangeCommitRef, draggingId, onChangeRef]);
     const handleMouseDown = ({ nativeEvent }) => {
         if (disabled)
             return;

package/dist/components/Slider/SliderThumb.js

@@ -1,9 +1,9 @@
 "use client";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { classNames } from "@reshaped/headless";
 import React from "react";
 import Text from "../Text/index.js";
 import Theme from "../Theme/index.js";
-import { classNames } from "../../utilities/props.js";
 import s from "./Slider.module.css";
 import { getPrecision } from "./Slider.utilities.js";
 const SliderThumb = React.forwardRef((props, ref) => {

package/dist/components/Stepper/Stepper.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 = {
@@ -12,9 +13,9 @@ export type Props = {
     /** Gap between items (default: 3) */
     gap?: G.Responsive<number>;
     /** 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 ItemProps = {
     /** Id of the item, used for selecting the active item */
@@ -28,9 +29,9 @@ export type ItemProps = {
     /** Node for inserting children */
     children?: React.ReactNode;
     /** 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 ItemPrivateProps = ItemProps & {
     labelDisplay: Props["labelDisplay"];

package/dist/components/Switch/Switch.js

@@ -1,9 +1,10 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { classNames } from "@reshaped/headless";
 import { useFormControl } from "../FormControl/index.js";
 import Text from "../Text/index.js";
 import useElementId from "../../hooks/useElementId.js";
-import { classNames, responsiveClassNames, responsivePropDependency } from "../../utilities/props.js";
+import { responsiveClassNames, responsivePropDependency } from "../../utilities/props.js";
 import s from "./Switch.module.css";
 const Switch = (props) => {
     const { children, name, checked, size = "medium", reversed, defaultChecked, onChange, onFocus, onBlur, className, attributes, } = props;