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

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;

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,9 +1,10 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
+import { classNames } from "@reshaped/headless";
 import React, { isValidElement } from "react";
 import useFadeSide from "../../hooks/_private/useFadeSide.js";
 import { resolveMixin } from "../../styles/mixin.js";
-import { classNames, responsiveVariables } from "../../utilities/props.js";
+import { responsiveVariables } from "../../utilities/props.js";
 import s from "./Table.module.css";
 const TableCellPrivate = (props) => {
     const { minWidth, rowSpan, colSpan, align, verticalAlign, tagName: TagName, padding, paddingInline, paddingBlock, children, className, attributes, } = props;

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, 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 { findParent } from "../../utilities/dom/index.js";
-import { classNames } from "../../utilities/props.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,15 +1,12 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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 { classNames } from "../../utilities/props.js";
 import s from "./Tabs.module.css";
 import { useTabs } from "./TabsContext.js";
 import TabsItem from "./TabsItem.js";

package/dist/components/Tabs/TabsPanel.js

@@ -1,8 +1,8 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
+import { classNames } from "@reshaped/headless";
+import { getFocusableElements } from "@reshaped/headless/internal";
 import React from "react";
-import { getFocusableElements } from "../../utilities/a11y/index.js";
-import { classNames } from "../../utilities/props.js";
 import s from "./Tabs.module.css";
 import { useTabs } from "./TabsContext.js";
 const TabsPanel = (props) => {

package/dist/components/Text/Text.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { classNames } from "@reshaped/headless";
 import { resolveMixin } from "../../styles/mixin.js";
-import { classNames, responsiveClassNames } from "../../utilities/props.js";
+import { responsiveClassNames } from "../../utilities/props.js";
 import s from "./Text.module.css";
 const tagMap = {
     "title-1": "h1",

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,9 +1,10 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
+import { classNames } from "@reshaped/headless";
 import React from "react";
 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 "./TextArea.module.css";
 const TextArea = (props) => {
     const { onChange, onFocus, onBlur, name, value, defaultValue, placeholder, size = "medium", variant = "outline", resize, className, attributes, } = props;

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,10 +1,11 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { classNames } from "@reshaped/headless";
 import React from "react";
 import { useFormControl } from "../FormControl/index.js";
 import Icon from "../Icon/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 "./TextField.module.css";
 const TextFieldSlot = (props) => {
     const { slot, icon, size, affix, position, id } = props;

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, useIsomorphicLayoutEffect } from "@reshaped/headless";
 import React from "react";
-import useIsomorphicLayoutEffect from "../../hooks/useIsomorphicLayoutEffect.js";
-import { classNames } from "../../utilities/props.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,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { classNames } from "@reshaped/headless";
 import React, { isValidElement } from "react";
 import View from "../View/index.js";
-import { classNames } from "../../utilities/props.js";
 import s from "./Timeline.module.css";
 export const TimelineItem = (props) => {
     const { children, markerSlot, className, attributes } = props;

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,9 +1,9 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
+import { TrapFocus, classNames } from "@reshaped/headless";
+import { checkKeyboardMode } from "@reshaped/headless/internal";
 import React from "react";
-import { checkKeyboardMode, TrapFocus } from "../../utilities/a11y/index.js";
 import { onNextFrame } from "../../utilities/animation.js";
-import { classNames } from "../../utilities/props.js";
 import Toast from "./Toast.js";
 import { timeouts } from "./Toast.constants.js";
 import ToastContext from "./Toast.context.js";

package/dist/components/Toast/ToastRegion.js

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

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/Tooltip/Tooltip.types.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 import type { FlyoutProps, FlyoutTriggerAttributes } from "../Flyout";
-export type Props = Pick<FlyoutProps, "id" | "position" | "onOpen" | "onClose" | "active" | "disabled" | "disableContentHover" | "containerRef" | "positionRef" | "contentGap" | "contentShift" | "contentMaxWidth" | "originCoordinates" | "contentAttributes" | "contentClassName" | "instanceRef"> & {
+export type Props = Pick<FlyoutProps, "id" | "position" | "onOpen" | "onClose" | "active" | "disabled" | "disableContentHover" | "containerRef" | "positionRef" | "contentGap" | "contentShift" | "contentMaxWidth" | "contentZIndex" | "originCoordinates" | "contentAttributes" | "contentClassName" | "instanceRef"> & {
     /** Node for inserting children */
     children: (attributes: FlyoutTriggerAttributes) => React.ReactNode;
     /** Text content for the tooltip */

package/dist/components/View/View.js

@@ -1,10 +1,11 @@
 import { createElement as _createElement } from "react";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { classNames } from "@reshaped/headless";
 import React, { isValidElement } from "react";
 import Divider from "../Divider/index.js";
 import Hidden from "../Hidden/index.js";
 import { resolveMixin } from "../../styles/mixin.js";
-import { classNames, responsiveClassNames, responsiveVariables } from "../../utilities/props.js";
+import { responsiveClassNames, responsiveVariables } from "../../utilities/props.js";
 import s from "./View.module.css";
 export const ViewItem = (props) => {
     const { columns, grow, shrink, gapBefore, 

package/dist/components/View/View.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";
@@ -93,9 +94,9 @@ export type Props<TagName extends keyof React.JSX.IntrinsicElements | void = voi
     /** Add transition for the properties */
     animated?: boolean;
     /** Additional classname for the root element */
-    className?: G.ClassName;
+    className?: ClassName;
     /** Additional attributes for the root element */
-    attributes?: G.Attributes<TagName>;
+    attributes?: Attributes<TagName>;
 } & Pick<ItemProps, "grow" | "shrink">;
 export type ItemProps<TagName extends keyof React.JSX.IntrinsicElements | void = void> = {
     /** Flex order of the item inside the parent */
@@ -111,9 +112,9 @@ export type ItemProps<TagName extends keyof React.JSX.IntrinsicElements | void =
     /** Render as a different element */
     as?: TagName extends keyof React.JSX.IntrinsicElements ? TagName : keyof React.JSX.IntrinsicElements;
     /** Additional attributes for the root element */
-    attributes?: G.Attributes<TagName>;
+    attributes?: Attributes<TagName>;
     /** Additional classname for the root element */
-    className?: G.ClassName;
+    className?: ClassName;
     /** Node for inserting the item content */
     children?: React.ReactNode;
 };

package/dist/components/_private/Aligner/Aligner.js

@@ -7,7 +7,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * It relies on using a data-rs-aligner-target attribute in other components and works based
  * on the --rs-p, --rs-p-v and --rs-p-h css variables
  */
-import { classNames } from "../../../utilities/props.js";
+import { classNames } from "@reshaped/headless";
 import s from "./Aligner.module.css";
 const Aligner = (props) => {
     const { side: passedSide = "all", children, className, attributes } = props;

package/dist/components/_private/Aligner/Aligner.types.d.ts

@@ -1,4 +1,4 @@
-import type * as G from "../../../types/global";
+import type { ClassName, Attributes } from "@reshaped/headless";
 type Side = "start" | "end" | "top" | "bottom" | "inline" | "block" | "all";
 export type Props = {
     /** Node for inserting children components */
@@ -8,8 +8,8 @@ export type Props = {
      */
     side?: Side | Side[];
     /** 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 {};

package/dist/components/_private/Expandable/Expandable.js

@@ -1,9 +1,9 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
+import { useIsomorphicLayoutEffect } from "@reshaped/headless";
+import { classNames } from "@reshaped/headless";
 import React from "react";
-import useIsomorphicLayoutEffect from "../../../hooks/useIsomorphicLayoutEffect.js";
 import { onNextFrame } from "../../../utilities/animation.js";
-import { classNames } from "../../../utilities/props.js";
 import s from "./Expandable.module.css";
 const Expandable = (props) => {
     const { children, active, attributes } = props;

package/dist/components/_private/Expandable/Expandable.types.d.ts

@@ -1,7 +1,7 @@
 import React from "react";
-import * as G from "../../../types/global";
+import type { Attributes } from "@reshaped/headless";
 export type ContentProps = {
     active?: boolean;
     children?: React.ReactNode;
-    attributes?: G.Attributes<"div">;
+    attributes?: Attributes<"div">;
 };

package/dist/components/_private/Portal/Portal.js

@@ -1,10 +1,9 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
+import { useIsomorphicLayoutEffect, useToggle } from "@reshaped/headless";
 import React from "react";
 import ReactDOM from "react-dom";
 import Theme from "../../Theme/index.js";
-import useIsomorphicLayoutEffect from "../../../hooks/useIsomorphicLayoutEffect.js";
-import useToggle from "../../../hooks/useToggle.js";
 import s from "./Portal.module.css";
 const PortalScopeContext = React.createContext({});
 export const usePortalScope = () => {

package/dist/hooks/_private/useDrag.js

@@ -1,10 +1,8 @@
 "use client";
+import { useHotkeys, useHandlerRef, useToggle } from "@reshaped/headless";
+import { disableScroll, enableScroll } from "@reshaped/headless/internal";
 import React from "react";
 import * as keys from "../../constants/keys.js";
-import useHandlerRef from "../useHandlerRef.js";
-import useHotkeys from "../useHotkeys.js";
-import useToggle from "../useToggle.js";
-import { disableScroll, enableScroll } from "../../utilities/scroll/index.js";
 const useDrag = (cb, options) => {
     const { disabled, containerRef: passedContainerRef, orientation = "all" } = options || {};
     const cbRef = useHandlerRef(cb);

package/dist/hooks/_private/useFadeSide.js

@@ -1,8 +1,7 @@
 "use client";
+import { useIsomorphicLayoutEffect, useRTL } from "@reshaped/headless";
+import { rafThrottle } from "@reshaped/headless/internal";
 import React from "react";
-import useIsomorphicLayoutEffect from "../useIsomorphicLayoutEffect.js";
-import useRTL from "../useRTL.js";
-import { rafThrottle } from "../../utilities/helpers.js";
 const useFadeSide = (scrollableRef, options = {}) => {
     const { disabled } = options;
     const [rtl] = useRTL();

package/dist/hooks/_private/useSingletonViewport.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import type * as G from "../../types/global";
+export declare const SingletonViewportProvider: React.FC<{
+    children: React.ReactNode;
+    defaultViewport?: G.Viewport;
+}>;
+declare const useSingletonViewport: () => {
+    viewport: G.Viewport;
+};
+export default useSingletonViewport;