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

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,10 +1,8 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { classNames } from "@reshaped/utilities";
-import { disableScroll, enableScroll } from "@reshaped/utilities/internal";
+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 s from "./ScrollArea.module.css";
 const ScrollAreaBar = (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,6 +1,6 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { classNames } from "@reshaped/utilities";
+import { classNames } from "@reshaped/headless";
 import React from "react";
 import s from "./Select.module.css";
 import SelectEndContent from "./SelectEndContent.js";

package/dist/components/Select/SelectRoot.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 { useFormControl } from "../FormControl/index.js";
 import useElementId from "../../hooks/useElementId.js";
 import { responsiveClassNames } from "../../utilities/props.js";

package/dist/components/Skeleton/Skeleton.js

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

@@ -1,12 +1,10 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { classNames } from "@reshaped/utilities";
-import { disableScroll, enableScroll } from "@reshaped/utilities/internal";
+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 s from "./Slider.module.css";
 import { applyStepToValue, getDragCoord, triggerChangeEvent } from "./Slider.utilities.js";
 import SliderThumb from "./SliderThumb.js";

package/dist/components/Slider/SliderThumb.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { classNames } from "@reshaped/utilities";
+import { classNames } from "@reshaped/headless";
 import React from "react";
 import Text from "../Text/index.js";
 import Theme from "../Theme/index.js";

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,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 Text from "../Text/index.js";
 import useElementId from "../../hooks/useElementId.js";

package/dist/components/Switch/Switch.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";
 type BaseProps = {
     /** Node for inserting children */
@@ -20,11 +21,11 @@ type BaseProps = {
     /** Callback when the switch 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 & {
     /** Default value of the switch, enables uncontrolled mode */

package/dist/components/Table/Table.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, { isValidElement } from "react";
 import useFadeSide from "../../hooks/_private/useFadeSide.js";
 import { resolveMixin } from "../../styles/mixin.js";

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

@@ -1,5 +1,5 @@
 import React from "react";
-import type * as G from "../../types/global";
+import type { Attributes, ClassName } from "@reshaped/headless";
 export type Props = {
     /** Add border around the table */
     border?: boolean;
@@ -8,9 +8,9 @@ export type Props = {
     /** 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 RowProps = {
     /** Indicate that the row is selected */
@@ -20,9 +20,9 @@ export type RowProps = {
     /** Node for inserting children */
     children: React.ReactNode;
     /** Additional classname for the row element */
-    className?: G.ClassName;
+    className?: ClassName;
     /** Additional attributes for the row element */
-    attributes?: G.Attributes<"tr">;
+    attributes?: Attributes<"tr">;
 };
 export type CellProps = {
     /** Align the cell content */
@@ -46,29 +46,29 @@ export type CellProps = {
     /** Node for inserting children */
     children?: React.ReactNode;
     /** Additional classname for the cell element */
-    className?: G.ClassName;
+    className?: ClassName;
     /** Additional attributes for the cell element */
-    attributes?: G.Attributes<"td">;
+    attributes?: Attributes<"td">;
 };
 export type HeadingProps = CellProps & {
     /** Additional attributes for the heading element */
-    attributes?: G.Attributes<"th">;
+    attributes?: Attributes<"th">;
 };
 export type BodyProps = {
     /** Node for inserting children */
     children: React.ReactNode;
     /** Additional classname for the body element */
-    className?: G.ClassName;
+    className?: ClassName;
     /** Additional attributes for the body element */
-    attributes?: G.Attributes<"tbody">;
+    attributes?: Attributes<"tbody">;
 };
 export type HeadProps = {
     /** Node for inserting children */
     children: React.ReactNode;
     /** Additional classname for the head element */
-    className?: G.ClassName;
+    className?: ClassName;
     /** Additional attributes for the head element */
-    attributes?: G.Attributes<"thead">;
+    attributes?: Attributes<"thead">;
 };
 export type PrivateCellProps = CellProps & {
     tagName: "td" | "th";

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

@@ -1,6 +1,6 @@
+import type { Attributes, ClassName } from "@reshaped/headless";
 import type { IconProps } from "../Icon";
 import type React from "react";
-import type * as G from "../../types/global";
 export type SelectionState = {
     left: number;
     top: number;
@@ -20,15 +20,15 @@ export type ItemProps = {
     /** Disable the item user interaction */
     disabled?: boolean;
     /** Additional attributes for the item element */
-    attributes?: G.Attributes<"div">;
+    attributes?: Attributes<"div">;
 };
 export type ListProps = {
     /** Node for inserting children */
     children?: React.ReactNode;
     /** Additional classname for the list element */
-    className?: G.ClassName;
+    className?: ClassName;
     /** Additional attributes for the list element */
-    attributes?: G.Attributes<"div">;
+    attributes?: Attributes<"div">;
 };
 export type PanelProps = {
     /** Value of the panel used for the active panel selection */
@@ -36,9 +36,9 @@ export type PanelProps = {
     /** Node for inserting children */
     children?: React.ReactNode;
     /** Additional classname for the panel element */
-    className?: G.ClassName;
+    className?: ClassName;
     /** Additional attributes for the panel element */
-    attributes?: G.Attributes<"div">;
+    attributes?: Attributes<"div">;
 };
 export type BaseProps = {
     /** Node for inserting children */

package/dist/components/Tabs/TabsItem.js

@@ -1,13 +1,12 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { classNames } from "@reshaped/utilities";
-import { findParent } from "@reshaped/utilities/internal";
+import { classNames, useIsomorphicLayoutEffect } from "@reshaped/headless";
+import { findParent } from "@reshaped/headless/internal";
 import React from "react";
 import Actionable from "../Actionable/index.js";
 import HiddenInput from "../HiddenInput/index.js";
 import Icon from "../Icon/index.js";
 import Text from "../Text/index.js";
-import useIsomorphicLayoutEffect from "../../hooks/useIsomorphicLayoutEffect.js";
 import s from "./Tabs.module.css";
 import { useTabs } from "./TabsContext.js";
 const TabsItem = React.forwardRef((props, ref) => {

package/dist/components/Tabs/TabsList.js

@@ -1,13 +1,10 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { classNames } from "@reshaped/utilities";
+import { classNames, useIsomorphicLayoutEffect, useRTL, useKeyboardArrowNavigation, } from "@reshaped/headless";
 import React from "react";
 import Actionable from "../Actionable/index.js";
 import Icon from "../Icon/index.js";
 import useFadeSide from "../../hooks/_private/useFadeSide.js";
-import useIsomorphicLayoutEffect from "../../hooks/useIsomorphicLayoutEffect.js";
-import useKeyboardArrowNavigation from "../../hooks/useKeyboardArrowNavigation.js";
-import useRTL from "../../hooks/useRTL.js";
 import IconChevronLeft from "../../icons/ChevronLeft.js";
 import IconChevronRight from "../../icons/ChevronRight.js";
 import s from "./Tabs.module.css";

package/dist/components/Tabs/TabsPanel.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { classNames } from "@reshaped/utilities";
-import { getFocusableElements } from "@reshaped/utilities/internal";
+import { classNames } from "@reshaped/headless";
+import { getFocusableElements } from "@reshaped/headless/internal";
 import React from "react";
 import s from "./Tabs.module.css";
 import { useTabs } from "./TabsContext.js";

package/dist/components/Text/Text.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 { responsiveClassNames } from "../../utilities/props.js";
 import s from "./Text.module.css";

package/dist/components/Text/Text.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 Variant = "title-1" | "title-2" | "title-3" | "title-4" | "title-5" | "title-6" | "featured-1" | "featured-2" | "featured-3" | "body-1" | "body-2" | "body-3" | "caption-1" | "caption-2";
@@ -23,9 +24,9 @@ export type Props<TagName extends keyof React.JSX.IntrinsicElements | void = voi
     /** 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<TagName>;
+    attributes?: Attributes<TagName>;
     /** Render as a different html tag */
     as?: TagName extends keyof React.JSX.IntrinsicElements ? TagName : keyof React.JSX.IntrinsicElements;
 };

package/dist/components/TextArea/TextArea.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 { useFormControl } from "../FormControl/index.js";
 import useElementId from "../../hooks/useElementId.js";

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

@@ -1,5 +1,6 @@
 import React from "react";
-import { type FormControlProps } from "../FormControl";
+import type { Attributes, ClassName } from "@reshaped/headless";
+import type { FormControlProps } from "../FormControl";
 import type * as G from "../../types/global";
 type Size = G.Responsive<"medium" | "large" | "xlarge">;
 type BaseProps = {
@@ -26,11 +27,11 @@ type BaseProps = {
     /** Callback when the text area is blurred */
     onBlur?: (e: React.FocusEvent<HTMLTextAreaElement>) => void;
     /** 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<"textarea">;
+    inputAttributes?: Attributes<"textarea">;
     /** Enable or disable the text area resizing, supports auto-sizing */
     resize?: "none" | "auto";
 } & Pick<FormControlProps, "hasError">;

package/dist/components/TextField/TextField.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 React from "react";
 import { useFormControl } from "../FormControl/index.js";
 import Icon from "../Icon/index.js";

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

@@ -1,3 +1,4 @@
+import type { Attributes, ClassName } from "@reshaped/headless";
 import type { FormControlProps } from "../FormControl";
 import type { IconProps } from "../Icon";
 import type React from "react";
@@ -49,11 +50,11 @@ export type BaseProps = {
     /** Callback when the text field is blurred */
     onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;
     /** 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">;
 } & Pick<FormControlProps, "hasError">;
 export type ControlledProps = BaseProps & {
     /** Value of the text field, enables controlled mode */

package/dist/components/Theme/GlobalColorMode.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
+import { useIsomorphicLayoutEffect } from "@reshaped/headless";
 import React from "react";
-import useIsomorphicLayoutEffect from "../../hooks/useIsomorphicLayoutEffect.js";
 import { enableTransitions, disableTransitions, onNextFrame } from "../../utilities/animation.js";
 import { GlobalColorModeContext } from "./Theme.context.js";
 import { getRootThemeEl } from "./Theme.utilities.js";

package/dist/components/Theme/Theme.js

@@ -1,8 +1,7 @@
 "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 useIsomorphicLayoutEffect from "../../hooks/useIsomorphicLayoutEffect.js";
 import { ThemeContext } from "./Theme.context.js";
 import s from "./Theme.module.css";
 import { getRootThemeEl } from "./Theme.utilities.js";

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

@@ -1,5 +1,6 @@
 import React from "react";
 import * as G from "../../types/global";
+import type { ClassName } from "@reshaped/headless";
 export type GlobalColorModeContextData = {
     mode: G.ColorMode;
     setMode: (mode: G.ColorMode) => void;
@@ -20,7 +21,7 @@ export type Props = {
     /** Color mode to use */
     colorMode?: G.ColorMode | "inverted";
     /** Additional classname for the root element */
-    className?: G.ClassName;
+    className?: ClassName;
     /** Node for inserting children */
     children?: React.ReactNode;
 };

package/dist/components/Timeline/Timeline.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 React, { isValidElement } from "react";
 import View from "../View/index.js";
 import s from "./Timeline.module.css";

package/dist/components/Timeline/Timeline.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;
     /** Additional classname for the root element */
-    className?: G.ClassName;
+    className?: ClassName;
     /** Additional attributes for the root element */
-    attributes?: G.Attributes<"ul">;
+    attributes?: Attributes<"ul">;
 };
 export type ItemProps = {
     /** Node for rendering custom item markers */
@@ -14,7 +14,7 @@ export type ItemProps = {
     /** Node for inserting children */
     children?: React.ReactNode;
     /** Additional classname for the item element */
-    className?: G.ClassName;
+    className?: ClassName;
     /** Additional attributes for the item element */
-    attributes?: G.Attributes<"li">;
+    attributes?: Attributes<"li">;
 };

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

@@ -1,6 +1,6 @@
+import type { Attributes, ClassName } from "@reshaped/headless";
 import type { IconProps } from "../Icon";
 import type React from "react";
-import type * as G from "../../types/global";
 export type Status = "entering" | "entered" | "exited";
 export type TimeoutAlias = "short" | "long";
 export type Timeout = TimeoutAlias | number;
@@ -27,9 +27,9 @@ export type Props = {
      */
     color?: "neutral" | "primary" | "critical" | "positive" | "warning" | "inverted";
     /** 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 ProviderProps = {
     /** Node for inserting children */

package/dist/components/Toast/ToastContainer.js

@@ -1,8 +1,7 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { TrapFocus } from "@reshaped/utilities";
-import { classNames } from "@reshaped/utilities";
-import { checkKeyboardMode } from "@reshaped/utilities/internal";
+import { TrapFocus, classNames } from "@reshaped/headless";
+import { checkKeyboardMode } from "@reshaped/headless/internal";
 import React from "react";
 import { onNextFrame } from "../../utilities/animation.js";
 import Toast from "./Toast.js";

package/dist/components/Toast/ToastRegion.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { classNames } from "@reshaped/utilities";
-import { focusableSelector } from "@reshaped/utilities/internal";
+import { classNames } from "@reshaped/headless";
+import { focusableSelector } from "@reshaped/headless/internal";
 import React from "react";
 import ToastContext from "./Toast.context.js";
 import s from "./Toast.module.css";

package/dist/components/ToggleButton/ToggleButtonUncontrolled.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
-import useToggle from "../../hooks/useToggle.js";
+import { useToggle } from "@reshaped/headless";
 import ToggleButtonControlled from "./ToggleButtonControlled.js";
 const ToggleButtonUncontrolled = (props) => {
     const { defaultChecked, onChange, ...buttonProps } = props;

package/dist/components/ToggleButtonGroup/ToggleButtonGroupControlled.js

@@ -1,8 +1,8 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
+import { useKeyboardArrowNavigation } from "@reshaped/headless";
 import React from "react";
 import Button from "../Button/index.js";
-import useKeyboardArrowNavigation from "../../hooks/useKeyboardArrowNavigation.js";
 import Context from "./ToggleButtonGroup.context.js";
 const ToggleButtonGroupControlled = (props) => {
     const { onChange, value, selectionMode = "single", children, color, selectedColor, ...buttonGroupProps } = props;

package/dist/components/View/View.js

@@ -1,6 +1,6 @@
 import { createElement as _createElement } from "react";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { classNames } from "@reshaped/utilities";
+import { classNames } from "@reshaped/headless";
 import React, { isValidElement } from "react";
 import Divider from "../Divider/index.js";
 import Hidden from "../Hidden/index.js";