reshaped 3.10.0-canary.5 → 3.10.0-canary.7

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) => {

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