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

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

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 "@reshaped/utilities";
+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,8 +1,8 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { classNames } from "@reshaped/utilities";
+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 s from "./Expandable.module.css";
 const Expandable = (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 { disableScroll, enableScroll } from "@reshaped/utilities/internal";
+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";
 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 { rafThrottle } from "@reshaped/utilities/internal";
+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";
 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;

package/dist/hooks/_private/useSingletonViewport.js

@@ -0,0 +1,52 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useIsomorphicLayoutEffect } from "@reshaped/headless";
+import React from "react";
+import defaultBreakpoints from "../../constants/breakpoints.js";
+const SingletonViewportContext = React.createContext({
+    viewport: "s",
+});
+export const SingletonViewportProvider = (props) => {
+    const { children, defaultViewport = "s" } = props;
+    const [viewport, setViewport] = React.useState(defaultViewport);
+    useIsomorphicLayoutEffect(() => {
+        const rootThemeEl = document.querySelector("[data-rs-theme]");
+        const rootStyle = rootThemeEl && window.getComputedStyle(rootThemeEl);
+        /**
+         * We generate variables for the viewport breakpoints in the themes
+         * We use them here in case they're custom and fallback to the default values
+         * in case there is no SSR passing the data-rs-theme attribute
+         */
+        const breakpoints = {
+            m: (rootStyle && Number(rootStyle.getPropertyValue("--rs-viewport-m-min"))) ||
+                defaultBreakpoints.m,
+            l: (rootStyle && Number(rootStyle.getPropertyValue("--rs-viewport-l-min"))) ||
+                defaultBreakpoints.l,
+            xl: (rootStyle && Number(rootStyle.getPropertyValue("--rs-viewport-xl-min"))) ||
+                defaultBreakpoints.xl,
+        };
+        const mediaQueries = {
+            s: `(max-width: ${breakpoints.m - 1}px)`,
+            m: `(min-width: ${breakpoints.m}px) and (max-width: ${breakpoints.l - 1}px)`,
+            l: `(min-width: ${breakpoints.l}px) and (max-width: ${breakpoints.xl - 1}px)`,
+            xl: `(min-width: ${breakpoints.xl}px)`,
+        };
+        const viewports = Object.keys(mediaQueries);
+        const matchers = viewports.map((viewport) => {
+            const mq = window.matchMedia(mediaQueries[viewport]);
+            return { mq, handler: () => mq.matches && setViewport(viewport) };
+        });
+        matchers.forEach(({ handler, mq }) => {
+            handler();
+            mq.addEventListener("change", handler);
+        });
+        return () => {
+            matchers.forEach(({ handler, mq }) => {
+                mq.removeEventListener("change", handler);
+            });
+        };
+    }, []);
+    return (_jsx(SingletonViewportContext.Provider, { value: { viewport }, children: children }));
+};
+const useSingletonViewport = () => React.useContext(SingletonViewportContext);
+export default useSingletonViewport;

package/dist/hooks/useResponsiveClientValue.js

@@ -1,57 +1,19 @@
 "use client";
-import React from "react";
-import defaultBreakpoints from "../constants/breakpoints.js";
-import { SingletonEnvironmentContext } from "./_private/useSingletonEnvironment.js";
-import useIsomorphicLayoutEffect from "./useIsomorphicLayoutEffect.js";
+import { useMemo } from "react";
+import useViewport from "./useViewport.js";
 const useResponsiveClientValue = (value) => {
-    const { defaultViewport } = React.useContext(SingletonEnvironmentContext);
-    const [viewport, setViewport] = React.useState(defaultViewport);
-    useIsomorphicLayoutEffect(() => {
-        const rootThemeEl = document.querySelector("[data-rs-theme]");
-        const rootStyle = rootThemeEl && window.getComputedStyle(rootThemeEl);
-        /**
-         * We generate variables for the viewport breakpoints in the themes
-         * We use them here in case they're custom and fallback to the default values
-         * in case there is no SSR passing the data-rs-theme attribute
-         */
-        const breakpoints = {
-            m: (rootStyle && Number(rootStyle.getPropertyValue("--rs-viewport-m-min"))) ||
-                defaultBreakpoints.m,
-            l: (rootStyle && Number(rootStyle.getPropertyValue("--rs-viewport-l-min"))) ||
-                defaultBreakpoints.l,
-            xl: (rootStyle && Number(rootStyle.getPropertyValue("--rs-viewport-xl-min"))) ||
-                defaultBreakpoints.xl,
-        };
-        const mediaQueries = {
-            s: `(max-width: ${breakpoints.m - 1}px)`,
-            m: `(min-width: ${breakpoints.m}px) and (max-width: ${breakpoints.l - 1}px)`,
-            l: `(min-width: ${breakpoints.l}px) and (max-width: ${breakpoints.xl - 1}px)`,
-            xl: `(min-width: ${breakpoints.xl}px)`,
-        };
-        const viewports = Object.keys(mediaQueries);
-        const matchers = viewports.map((viewport) => {
-            const mq = window.matchMedia(mediaQueries[viewport]);
-            return { mq, handler: () => mq.matches && setViewport(viewport) };
-        });
-        matchers.forEach(({ handler, mq }) => {
-            handler();
-            mq.addEventListener("change", handler);
-        });
-        return () => {
-            matchers.forEach(({ handler, mq }) => {
-                mq.removeEventListener("change", handler);
-            });
-        };
-    }, []);
-    if (typeof value !== "object" || value === null || !("s" in value)) {
-        return value;
-    }
-    if (viewport === "xl")
-        return value.xl ?? value.l ?? value.m ?? value.s;
-    if (viewport === "l")
-        return value.l ?? value.m ?? value.s;
-    if (viewport === "m")
-        return value.m ?? value.s;
-    return value.s;
+    const viewport = useViewport();
+    return useMemo(() => {
+        if (typeof value !== "object" || value === null || !("s" in value)) {
+            return value;
+        }
+        if (viewport === "xl")
+            return value.xl ?? value.l ?? value.m ?? value.s;
+        if (viewport === "l")
+            return value.l ?? value.m ?? value.s;
+        if (viewport === "m")
+            return value.m ?? value.s;
+        return value.s;
+    }, [viewport, value]);
 };
 export default useResponsiveClientValue;

package/dist/hooks/useViewport.d.ts

@@ -0,0 +1,2 @@
+declare const useViewport: () => import("../types/global").Viewport;
+export default useViewport;

package/dist/hooks/useViewport.js

@@ -0,0 +1,6 @@
+import useSingletonViewport from "./_private/useSingletonViewport.js";
+const useViewport = () => {
+    const { viewport } = useSingletonViewport();
+    return viewport;
+};
+export default useViewport;

package/dist/index.d.ts

@@ -131,28 +131,21 @@ export type { ViewProps, ViewItemProps } from "./components/View";
 /**
  * Hooks
  */
+export { useHotkeys, useIsomorphicLayoutEffect, useRTL, useKeyboardArrowNavigation, useKeyboardMode, useHandlerRef, useOnClickOutside, useScrollLock, useToggle, } from "@reshaped/headless";
 export { useFormControl } from "./components/FormControl";
 export { default as Theme, useTheme, type ThemeProps } from "./components/Theme";
-export { default as useHandlerRef } from "./hooks/useHandlerRef";
-export { default as useHotkeys } from "./hooks/useHotkeys";
-export { default as useIsomorphicLayoutEffect } from "./hooks/useIsomorphicLayoutEffect";
-export { default as useKeyboardMode } from "./hooks/useKeyboardMode";
-export { default as useKeyboardArrowNavigation } from "./hooks/useKeyboardArrowNavigation";
-export { default as useOnClickOutside } from "./hooks/useOnClickOutside";
 export { default as useResponsiveClientValue } from "./hooks/useResponsiveClientValue";
-export { default as useRTL } from "./hooks/useRTL";
-export { default as useScrollLock } from "./hooks/useScrollLock";
-export { default as useToggle } from "./hooks/useToggle";
 /**
  * Utility functions
  */
 export { responsivePropDependency } from "./utilities/props";
-export { TrapFocus, classNames } from "@reshaped/utilities";
+export { TrapFocus, classNames } from "@reshaped/headless";
 /**
  * Types
  */
+export type { Attributes } from "@reshaped/headless";
 export type { ReshapedConfig } from "./types/config";
-export type { Responsive, Attributes, ColorMode } from "./types/global";
+export type { Responsive, ColorMode } from "./types/global";
 /**
  * Dev utilities
  */

package/dist/index.js

@@ -69,23 +69,15 @@ export { default as View } from "./components/View/index.js";
 /**
  * Hooks
  */
+export { useHotkeys, useIsomorphicLayoutEffect, useRTL, useKeyboardArrowNavigation, useKeyboardMode, useHandlerRef, useOnClickOutside, useScrollLock, useToggle, } from "@reshaped/headless";
 export { useFormControl } from "./components/FormControl/index.js";
 export { default as Theme, useTheme } from "./components/Theme/index.js";
-export { default as useHandlerRef } from "./hooks/useHandlerRef.js";
-export { default as useHotkeys } from "./hooks/useHotkeys.js";
-export { default as useIsomorphicLayoutEffect } from "./hooks/useIsomorphicLayoutEffect.js";
-export { default as useKeyboardMode } from "./hooks/useKeyboardMode.js";
-export { default as useKeyboardArrowNavigation } from "./hooks/useKeyboardArrowNavigation.js";
-export { default as useOnClickOutside } from "./hooks/useOnClickOutside.js";
 export { default as useResponsiveClientValue } from "./hooks/useResponsiveClientValue.js";
-export { default as useRTL } from "./hooks/useRTL.js";
-export { default as useScrollLock } from "./hooks/useScrollLock.js";
-export { default as useToggle } from "./hooks/useToggle.js";
 /**
  * Utility functions
  */
 export { responsivePropDependency } from "./utilities/props.js";
-export { TrapFocus, classNames } from "@reshaped/utilities";
+export { TrapFocus, classNames } from "@reshaped/headless";
 /**
  * Dev utilities
  */

package/dist/styles/mixin.d.ts

@@ -1,6 +1,6 @@
+import type { ClassName } from "@reshaped/headless";
 import type { Mixin } from "./types";
-import type * as G from "../types/global";
 export declare const resolveMixin: (mixin: Mixin) => {
     variables: React.CSSProperties;
-    classNames: G.ClassName[];
+    classNames: ClassName[];
 };

package/dist/styles/types.d.ts

@@ -1,5 +1,6 @@
 import React from "react";
 import * as G from "../types/global";
+import type { ClassName } from "@reshaped/headless";
 type Unit = number;
 type Literal = string;
 type Size = Literal | Unit;
@@ -26,7 +27,7 @@ export type BorderColor = "neutral" | "neutral-faded" | "critical" | "critical-f
  */
 export type StyleResolver<Value> = (value?: G.Responsive<Value>) => {
     variables?: React.CSSProperties;
-    classNames?: G.ClassName;
+    classNames?: ClassName;
 };
 export type Mixin = {
     align?: G.Responsive<Align>;

package/dist/tests/ThemesPlayground.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useToggle } from "@reshaped/headless";
 import React from "react";
 import Alert from "../components/Alert/index.js";
 import Avatar from "../components/Avatar/index.js";
@@ -18,7 +19,6 @@ import Table from "../components/Table/index.js";
 import Text from "../components/Text/index.js";
 import TextField from "../components/TextField/index.js";
 import View from "../components/View/index.js";
-import useToggle from "../hooks/useToggle.js";
 import IconChevronDown from "../icons/ChevronDown.js";
 import IconChevronRight from "../icons/ChevronRight.js";
 import IconZap from "../icons/Zap.js";

package/dist/types/global.d.ts

@@ -1,24 +1,9 @@
 import React from "react";
-/**
- * DOM
- */
-type ClassNameValue = string | null | undefined | false;
-export type ClassName = ClassNameValue | ClassNameValue[] | ClassName[];
-export type CSSVariable = `--${string}`;
-export type StyleAttribute = React.CSSProperties | (React.CSSProperties & Record<CSSVariable, string | number | undefined>);
-type DataAttributes = object | Record<`data-${string}`, string | boolean>;
-export type Attributes<TagName extends keyof React.JSX.IntrinsicElements | void = void> = (TagName extends keyof React.JSX.IntrinsicElements ? React.JSX.IntrinsicElements[TagName] : React.HTMLAttributes<HTMLElement>) & DataAttributes & {
-    style?: StyleAttribute;
-};
 export type Viewport = "s" | "m" | "l" | "xl";
 export type ResponsiveOnly<T> = {
     [key in Viewport]?: T;
 };
 export type Responsive<T> = T | ResponsiveOnly<T>;
-export type Coordinates = {
-    x: number;
-    y: number;
-};
 /**
  * Form handlers
  */

package/dist/utilities/props.d.ts

@@ -1,9 +1,10 @@
+import type { CSSVariable } from "@reshaped/headless";
 import type * as G from "../types/global";
 type Value = string | boolean | number | undefined;
 type ClassNameResolver = string | ((value: Value) => string);
 export declare const responsiveClassNames: <V extends G.Responsive<Value>>(s: Record<string, string>, className: ClassNameResolver, value: V, options?: {
     excludeValueFromClassName?: boolean;
 }) => string[];
-export declare const responsiveVariables: <V extends Value = Value>(variableName: G.CSSVariable, value?: G.Responsive<V>) => Record<G.CSSVariable, V>;
+export declare const responsiveVariables: <V extends Value = Value>(variableName: CSSVariable, value?: G.Responsive<V>) => Record<CSSVariable, V>;
 export declare const responsivePropDependency: <Result, T>(prop: G.Responsive<T>, resolver: (value: T, key: G.Viewport) => Result) => Result;
 export {};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "reshaped",
   "description": "Professionally crafted design system in React & Figma for building products of any scale and complexity",
-  "version": "3.10.0-canary.5",
+  "version": "3.10.0-canary.7",
   "license": "MIT",
   "email": "hello@reshaped.so",
   "homepage": "https://reshaped.so",
@@ -91,7 +91,7 @@
     "csstype": "3.1.3",
     "culori": "4.0.2",
     "postcss-custom-media": "11.0.6",
-    "@reshaped/utilities": "3.10.0-canary.5"
+    "@reshaped/headless": "3.10.0-canary.7"
   },
   "scripts": {
     "clean": "bash ./bin/clean.sh",

package/dist/core/Actionable/Actionable.d.ts

@@ -1,4 +0,0 @@
-import React from "react";
-import type * as T from "./Actionable.types";
-declare const Actionable: React.ForwardRefExoticComponent<T.Props & React.RefAttributes<T.Ref>>;
-export default Actionable;