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

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 { classNames, responsivePropDependency } from "./utilities/props";
-export { TrapFocus } from "./utilities/a11y";
+export { responsivePropDependency } from "./utilities/props";
+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 { classNames, responsivePropDependency } from "./utilities/props.js";
-export { TrapFocus } from "./utilities/a11y/index.js";
+export { responsivePropDependency } from "./utilities/props.js";
+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/themes/figma/tailwind.css

@@ -1 +1 @@
-@theme inline{--background-color-primary:var(--rs-color-background-primary);--background-color-primary-faded:var(--rs-color-background-primary-faded);--border-color-primary:var(--rs-color-border-primary);--border-color-primary-faded:var(--rs-color-border-primary-faded);--text-color-primary:var(--rs-color-foreground-primary);--background-color-critical:var(--rs-color-background-critical);--background-color-critical-faded:var(--rs-color-background-critical-faded);--border-color-critical:var(--rs-color-border-critical);--border-color-critical-faded:var(--rs-color-border-critical-faded);--text-color-critical:var(--rs-color-foreground-critical);--background-color-warning:var(--rs-color-background-warning);--background-color-warning-faded:var(--rs-color-background-warning-faded);--border-color-warning:var(--rs-color-border-warning);--border-color-warning-faded:var(--rs-color-border-warning-faded);--text-color-warning:var(--rs-color-foreground-warning);--background-color-positive:var(--rs-color-background-positive);--background-color-positive-faded:var(--rs-color-background-positive-faded);--border-color-positive:var(--rs-color-border-positive);--border-color-positive-faded:var(--rs-color-border-positive-faded);--text-color-positive:var(--rs-color-foreground-positive);--background-color-neutral:var(--rs-color-background-neutral);--background-color-neutral-faded:var(--rs-color-background-neutral-faded);--border-color-neutral:var(--rs-color-border-neutral);--border-color-neutral-faded:var(--rs-color-border-neutral-faded);--text-color-neutral:var(--rs-color-foreground-neutral);--text-color-neutral-faded:var(--rs-color-foreground-neutral-faded);--background-color-disabled:var(--rs-color-background-disabled);--background-color-disabled-faded:var(--rs-color-background-disabled-faded);--border-color-disabled:var(--rs-color-border-disabled);--text-color-disabled:var(--rs-color-foreground-disabled);--background-color-elevation-base:var(--rs-color-background-elevation-base);--background-color-elevation-raised:var(--rs-color-background-elevation-raised);--background-color-elevation-overlay:var(--rs-color-background-elevation-overlay);--background-color-page:var(--rs-color-background-page);--background-color-page-faded:var(--rs-color-background-page-faded);--color-brand:var(--rs-color-brand);--color-white:var(--rs-color-white);--color-black:var(--rs-color-black);--text-color-on-primary:var(--rs-color-on-background-primary);--text-color-on-critical:var(--rs-color-on-background-critical);--text-color-on-warning:var(--rs-color-on-background-warning);--text-color-on-positive:var(--rs-color-on-background-positive);--text-color-on-neutral:var(--rs-color-on-background-neutral);--text-color-on-brand:var(--rs-color-on-brand);--radius-small:var(--rs-radius-small);--radius-medium:var(--rs-radius-medium);--radius-large:var(--rs-radius-large);--spacing-0:0px;--spacing-x1:var(--rs-unit-x1);--spacing-x2:var(--rs-unit-x2);--spacing-x3:var(--rs-unit-x3);--spacing-x4:var(--rs-unit-x4);--spacing-x5:var(--rs-unit-x5);--spacing-x6:var(--rs-unit-x6);--spacing-x7:var(--rs-unit-x7);--spacing-x8:var(--rs-unit-x8);--spacing-x9:var(--rs-unit-x9);--spacing-x10:var(--rs-unit-x10);--shadow-raised:var(--rs-shadow-raised);--shadow-overlay:var(--rs-shadow-overlay);--breakpoint-m:660px;--breakpoint-l:900px;--breakpoint-xl:1280px}
+@theme inline{--background-color-primary:var(--rs-color-background-primary);--background-color-primary-faded:var(--rs-color-background-primary-faded);--border-color-primary:var(--rs-color-border-primary);--outline-color-primary:var(--rs-color-border-primary);--border-color-primary-faded:var(--rs-color-border-primary-faded);--outline-color-primary-faded:var(--rs-color-border-primary-faded);--text-color-primary:var(--rs-color-foreground-primary);--background-color-critical:var(--rs-color-background-critical);--background-color-critical-faded:var(--rs-color-background-critical-faded);--border-color-critical:var(--rs-color-border-critical);--outline-color-critical:var(--rs-color-border-critical);--border-color-critical-faded:var(--rs-color-border-critical-faded);--outline-color-critical-faded:var(--rs-color-border-critical-faded);--text-color-critical:var(--rs-color-foreground-critical);--background-color-warning:var(--rs-color-background-warning);--background-color-warning-faded:var(--rs-color-background-warning-faded);--border-color-warning:var(--rs-color-border-warning);--outline-color-warning:var(--rs-color-border-warning);--border-color-warning-faded:var(--rs-color-border-warning-faded);--outline-color-warning-faded:var(--rs-color-border-warning-faded);--text-color-warning:var(--rs-color-foreground-warning);--background-color-positive:var(--rs-color-background-positive);--background-color-positive-faded:var(--rs-color-background-positive-faded);--border-color-positive:var(--rs-color-border-positive);--outline-color-positive:var(--rs-color-border-positive);--border-color-positive-faded:var(--rs-color-border-positive-faded);--outline-color-positive-faded:var(--rs-color-border-positive-faded);--text-color-positive:var(--rs-color-foreground-positive);--background-color-neutral:var(--rs-color-background-neutral);--background-color-neutral-faded:var(--rs-color-background-neutral-faded);--border-color-neutral:var(--rs-color-border-neutral);--outline-color-neutral:var(--rs-color-border-neutral);--border-color-neutral-faded:var(--rs-color-border-neutral-faded);--outline-color-neutral-faded:var(--rs-color-border-neutral-faded);--text-color-neutral:var(--rs-color-foreground-neutral);--text-color-neutral-faded:var(--rs-color-foreground-neutral-faded);--background-color-disabled:var(--rs-color-background-disabled);--background-color-disabled-faded:var(--rs-color-background-disabled-faded);--border-color-disabled:var(--rs-color-border-disabled);--outline-color-disabled:var(--rs-color-border-disabled);--text-color-disabled:var(--rs-color-foreground-disabled);--background-color-elevation-base:var(--rs-color-background-elevation-base);--background-color-elevation-raised:var(--rs-color-background-elevation-raised);--background-color-elevation-overlay:var(--rs-color-background-elevation-overlay);--background-color-page:var(--rs-color-background-page);--background-color-page-faded:var(--rs-color-background-page-faded);--color-brand:var(--rs-color-brand);--color-white:var(--rs-color-white);--color-black:var(--rs-color-black);--text-color-on-primary:var(--rs-color-on-background-primary);--text-color-on-critical:var(--rs-color-on-background-critical);--text-color-on-warning:var(--rs-color-on-background-warning);--text-color-on-positive:var(--rs-color-on-background-positive);--text-color-on-neutral:var(--rs-color-on-background-neutral);--text-color-on-brand:var(--rs-color-on-brand);--radius-small:var(--rs-radius-small);--radius-medium:var(--rs-radius-medium);--radius-large:var(--rs-radius-large);--spacing-0:0px;--spacing-x1:var(--rs-unit-x1);--spacing-x2:var(--rs-unit-x2);--spacing-x3:var(--rs-unit-x3);--spacing-x4:var(--rs-unit-x4);--spacing-x5:var(--rs-unit-x5);--spacing-x6:var(--rs-unit-x6);--spacing-x7:var(--rs-unit-x7);--spacing-x8:var(--rs-unit-x8);--spacing-x9:var(--rs-unit-x9);--spacing-x10:var(--rs-unit-x10);--shadow-raised:var(--rs-shadow-raised);--shadow-overlay:var(--rs-shadow-overlay);--breakpoint-m:660px;--breakpoint-l:900px;--breakpoint-xl:1280px}

package/dist/themes/fragments/twitter/tailwind.css

@@ -1 +1 @@
-@theme inline{--background-color-primary:var(--rs-color-background-primary);--background-color-primary-faded:var(--rs-color-background-primary-faded);--border-color-primary:var(--rs-color-border-primary);--border-color-primary-faded:var(--rs-color-border-primary-faded);--text-color-primary:var(--rs-color-foreground-primary);--background-color-critical:var(--rs-color-background-critical);--background-color-critical-faded:var(--rs-color-background-critical-faded);--border-color-critical:var(--rs-color-border-critical);--border-color-critical-faded:var(--rs-color-border-critical-faded);--text-color-critical:var(--rs-color-foreground-critical);--background-color-warning:var(--rs-color-background-warning);--background-color-warning-faded:var(--rs-color-background-warning-faded);--border-color-warning:var(--rs-color-border-warning);--border-color-warning-faded:var(--rs-color-border-warning-faded);--text-color-warning:var(--rs-color-foreground-warning);--background-color-positive:var(--rs-color-background-positive);--background-color-positive-faded:var(--rs-color-background-positive-faded);--border-color-positive:var(--rs-color-border-positive);--border-color-positive-faded:var(--rs-color-border-positive-faded);--text-color-positive:var(--rs-color-foreground-positive);--background-color-neutral:var(--rs-color-background-neutral);--background-color-neutral-faded:var(--rs-color-background-neutral-faded);--border-color-neutral:var(--rs-color-border-neutral);--border-color-neutral-faded:var(--rs-color-border-neutral-faded);--text-color-neutral:var(--rs-color-foreground-neutral);--text-color-neutral-faded:var(--rs-color-foreground-neutral-faded);--background-color-disabled:var(--rs-color-background-disabled);--background-color-disabled-faded:var(--rs-color-background-disabled-faded);--border-color-disabled:var(--rs-color-border-disabled);--text-color-disabled:var(--rs-color-foreground-disabled);--background-color-elevation-base:var(--rs-color-background-elevation-base);--background-color-elevation-raised:var(--rs-color-background-elevation-raised);--background-color-elevation-overlay:var(--rs-color-background-elevation-overlay);--background-color-page:var(--rs-color-background-page);--background-color-page-faded:var(--rs-color-background-page-faded);--color-brand:var(--rs-color-brand);--color-white:var(--rs-color-white);--color-black:var(--rs-color-black);--background-color-primary-highlighted:var(--rs-color-background-primary-highlighted);--text-color-on-primary:var(--rs-color-on-background-primary);--radius-small:var(--rs-radius-small);--radius-medium:var(--rs-radius-medium);--radius-large:var(--rs-radius-large);--spacing-0:0px;--spacing-x1:var(--rs-unit-x1);--spacing-x2:var(--rs-unit-x2);--spacing-x3:var(--rs-unit-x3);--spacing-x4:var(--rs-unit-x4);--spacing-x5:var(--rs-unit-x5);--spacing-x6:var(--rs-unit-x6);--spacing-x7:var(--rs-unit-x7);--spacing-x8:var(--rs-unit-x8);--spacing-x9:var(--rs-unit-x9);--spacing-x10:var(--rs-unit-x10);--shadow-raised:var(--rs-shadow-raised);--shadow-overlay:var(--rs-shadow-overlay);--breakpoint-m:660px;--breakpoint-l:900px;--breakpoint-xl:1280px}
+@theme inline{--background-color-primary:var(--rs-color-background-primary);--background-color-primary-faded:var(--rs-color-background-primary-faded);--border-color-primary:var(--rs-color-border-primary);--outline-color-primary:var(--rs-color-border-primary);--border-color-primary-faded:var(--rs-color-border-primary-faded);--outline-color-primary-faded:var(--rs-color-border-primary-faded);--text-color-primary:var(--rs-color-foreground-primary);--background-color-critical:var(--rs-color-background-critical);--background-color-critical-faded:var(--rs-color-background-critical-faded);--border-color-critical:var(--rs-color-border-critical);--outline-color-critical:var(--rs-color-border-critical);--border-color-critical-faded:var(--rs-color-border-critical-faded);--outline-color-critical-faded:var(--rs-color-border-critical-faded);--text-color-critical:var(--rs-color-foreground-critical);--background-color-warning:var(--rs-color-background-warning);--background-color-warning-faded:var(--rs-color-background-warning-faded);--border-color-warning:var(--rs-color-border-warning);--outline-color-warning:var(--rs-color-border-warning);--border-color-warning-faded:var(--rs-color-border-warning-faded);--outline-color-warning-faded:var(--rs-color-border-warning-faded);--text-color-warning:var(--rs-color-foreground-warning);--background-color-positive:var(--rs-color-background-positive);--background-color-positive-faded:var(--rs-color-background-positive-faded);--border-color-positive:var(--rs-color-border-positive);--outline-color-positive:var(--rs-color-border-positive);--border-color-positive-faded:var(--rs-color-border-positive-faded);--outline-color-positive-faded:var(--rs-color-border-positive-faded);--text-color-positive:var(--rs-color-foreground-positive);--background-color-neutral:var(--rs-color-background-neutral);--background-color-neutral-faded:var(--rs-color-background-neutral-faded);--border-color-neutral:var(--rs-color-border-neutral);--outline-color-neutral:var(--rs-color-border-neutral);--border-color-neutral-faded:var(--rs-color-border-neutral-faded);--outline-color-neutral-faded:var(--rs-color-border-neutral-faded);--text-color-neutral:var(--rs-color-foreground-neutral);--text-color-neutral-faded:var(--rs-color-foreground-neutral-faded);--background-color-disabled:var(--rs-color-background-disabled);--background-color-disabled-faded:var(--rs-color-background-disabled-faded);--border-color-disabled:var(--rs-color-border-disabled);--outline-color-disabled:var(--rs-color-border-disabled);--text-color-disabled:var(--rs-color-foreground-disabled);--background-color-elevation-base:var(--rs-color-background-elevation-base);--background-color-elevation-raised:var(--rs-color-background-elevation-raised);--background-color-elevation-overlay:var(--rs-color-background-elevation-overlay);--background-color-page:var(--rs-color-background-page);--background-color-page-faded:var(--rs-color-background-page-faded);--color-brand:var(--rs-color-brand);--color-white:var(--rs-color-white);--color-black:var(--rs-color-black);--background-color-primary-highlighted:var(--rs-color-background-primary-highlighted);--text-color-on-primary:var(--rs-color-on-background-primary);--radius-small:var(--rs-radius-small);--radius-medium:var(--rs-radius-medium);--radius-large:var(--rs-radius-large);--spacing-0:0px;--spacing-x1:var(--rs-unit-x1);--spacing-x2:var(--rs-unit-x2);--spacing-x3:var(--rs-unit-x3);--spacing-x4:var(--rs-unit-x4);--spacing-x5:var(--rs-unit-x5);--spacing-x6:var(--rs-unit-x6);--spacing-x7:var(--rs-unit-x7);--spacing-x8:var(--rs-unit-x8);--spacing-x9:var(--rs-unit-x9);--spacing-x10:var(--rs-unit-x10);--shadow-raised:var(--rs-shadow-raised);--shadow-overlay:var(--rs-shadow-overlay);--breakpoint-m:660px;--breakpoint-l:900px;--breakpoint-xl:1280px}

package/dist/themes/reshaped/tailwind.css

@@ -1 +1 @@
-@theme inline{--background-color-primary:var(--rs-color-background-primary);--background-color-primary-faded:var(--rs-color-background-primary-faded);--border-color-primary:var(--rs-color-border-primary);--border-color-primary-faded:var(--rs-color-border-primary-faded);--text-color-primary:var(--rs-color-foreground-primary);--background-color-critical:var(--rs-color-background-critical);--background-color-critical-faded:var(--rs-color-background-critical-faded);--border-color-critical:var(--rs-color-border-critical);--border-color-critical-faded:var(--rs-color-border-critical-faded);--text-color-critical:var(--rs-color-foreground-critical);--background-color-warning:var(--rs-color-background-warning);--background-color-warning-faded:var(--rs-color-background-warning-faded);--border-color-warning:var(--rs-color-border-warning);--border-color-warning-faded:var(--rs-color-border-warning-faded);--text-color-warning:var(--rs-color-foreground-warning);--background-color-positive:var(--rs-color-background-positive);--background-color-positive-faded:var(--rs-color-background-positive-faded);--border-color-positive:var(--rs-color-border-positive);--border-color-positive-faded:var(--rs-color-border-positive-faded);--text-color-positive:var(--rs-color-foreground-positive);--background-color-neutral:var(--rs-color-background-neutral);--background-color-neutral-faded:var(--rs-color-background-neutral-faded);--border-color-neutral:var(--rs-color-border-neutral);--border-color-neutral-faded:var(--rs-color-border-neutral-faded);--text-color-neutral:var(--rs-color-foreground-neutral);--text-color-neutral-faded:var(--rs-color-foreground-neutral-faded);--background-color-disabled:var(--rs-color-background-disabled);--background-color-disabled-faded:var(--rs-color-background-disabled-faded);--border-color-disabled:var(--rs-color-border-disabled);--text-color-disabled:var(--rs-color-foreground-disabled);--background-color-elevation-base:var(--rs-color-background-elevation-base);--background-color-elevation-raised:var(--rs-color-background-elevation-raised);--background-color-elevation-overlay:var(--rs-color-background-elevation-overlay);--background-color-page:var(--rs-color-background-page);--background-color-page-faded:var(--rs-color-background-page-faded);--color-brand:var(--rs-color-brand);--color-white:var(--rs-color-white);--color-black:var(--rs-color-black);--text-color-on-primary:var(--rs-color-on-background-primary);--text-color-on-critical:var(--rs-color-on-background-critical);--text-color-on-warning:var(--rs-color-on-background-warning);--text-color-on-positive:var(--rs-color-on-background-positive);--text-color-on-neutral:var(--rs-color-on-background-neutral);--text-color-on-brand:var(--rs-color-on-brand);--radius-small:var(--rs-radius-small);--radius-medium:var(--rs-radius-medium);--radius-large:var(--rs-radius-large);--spacing-0:0px;--spacing-x1:var(--rs-unit-x1);--spacing-x2:var(--rs-unit-x2);--spacing-x3:var(--rs-unit-x3);--spacing-x4:var(--rs-unit-x4);--spacing-x5:var(--rs-unit-x5);--spacing-x6:var(--rs-unit-x6);--spacing-x7:var(--rs-unit-x7);--spacing-x8:var(--rs-unit-x8);--spacing-x9:var(--rs-unit-x9);--spacing-x10:var(--rs-unit-x10);--shadow-raised:var(--rs-shadow-raised);--shadow-overlay:var(--rs-shadow-overlay);--breakpoint-m:660px;--breakpoint-l:900px;--breakpoint-xl:1280px}
+@theme inline{--background-color-primary:var(--rs-color-background-primary);--background-color-primary-faded:var(--rs-color-background-primary-faded);--border-color-primary:var(--rs-color-border-primary);--outline-color-primary:var(--rs-color-border-primary);--border-color-primary-faded:var(--rs-color-border-primary-faded);--outline-color-primary-faded:var(--rs-color-border-primary-faded);--text-color-primary:var(--rs-color-foreground-primary);--background-color-critical:var(--rs-color-background-critical);--background-color-critical-faded:var(--rs-color-background-critical-faded);--border-color-critical:var(--rs-color-border-critical);--outline-color-critical:var(--rs-color-border-critical);--border-color-critical-faded:var(--rs-color-border-critical-faded);--outline-color-critical-faded:var(--rs-color-border-critical-faded);--text-color-critical:var(--rs-color-foreground-critical);--background-color-warning:var(--rs-color-background-warning);--background-color-warning-faded:var(--rs-color-background-warning-faded);--border-color-warning:var(--rs-color-border-warning);--outline-color-warning:var(--rs-color-border-warning);--border-color-warning-faded:var(--rs-color-border-warning-faded);--outline-color-warning-faded:var(--rs-color-border-warning-faded);--text-color-warning:var(--rs-color-foreground-warning);--background-color-positive:var(--rs-color-background-positive);--background-color-positive-faded:var(--rs-color-background-positive-faded);--border-color-positive:var(--rs-color-border-positive);--outline-color-positive:var(--rs-color-border-positive);--border-color-positive-faded:var(--rs-color-border-positive-faded);--outline-color-positive-faded:var(--rs-color-border-positive-faded);--text-color-positive:var(--rs-color-foreground-positive);--background-color-neutral:var(--rs-color-background-neutral);--background-color-neutral-faded:var(--rs-color-background-neutral-faded);--border-color-neutral:var(--rs-color-border-neutral);--outline-color-neutral:var(--rs-color-border-neutral);--border-color-neutral-faded:var(--rs-color-border-neutral-faded);--outline-color-neutral-faded:var(--rs-color-border-neutral-faded);--text-color-neutral:var(--rs-color-foreground-neutral);--text-color-neutral-faded:var(--rs-color-foreground-neutral-faded);--background-color-disabled:var(--rs-color-background-disabled);--background-color-disabled-faded:var(--rs-color-background-disabled-faded);--border-color-disabled:var(--rs-color-border-disabled);--outline-color-disabled:var(--rs-color-border-disabled);--text-color-disabled:var(--rs-color-foreground-disabled);--background-color-elevation-base:var(--rs-color-background-elevation-base);--background-color-elevation-raised:var(--rs-color-background-elevation-raised);--background-color-elevation-overlay:var(--rs-color-background-elevation-overlay);--background-color-page:var(--rs-color-background-page);--background-color-page-faded:var(--rs-color-background-page-faded);--color-brand:var(--rs-color-brand);--color-white:var(--rs-color-white);--color-black:var(--rs-color-black);--text-color-on-primary:var(--rs-color-on-background-primary);--text-color-on-critical:var(--rs-color-on-background-critical);--text-color-on-warning:var(--rs-color-on-background-warning);--text-color-on-positive:var(--rs-color-on-background-positive);--text-color-on-neutral:var(--rs-color-on-background-neutral);--text-color-on-brand:var(--rs-color-on-brand);--radius-small:var(--rs-radius-small);--radius-medium:var(--rs-radius-medium);--radius-large:var(--rs-radius-large);--spacing-0:0px;--spacing-x1:var(--rs-unit-x1);--spacing-x2:var(--rs-unit-x2);--spacing-x3:var(--rs-unit-x3);--spacing-x4:var(--rs-unit-x4);--spacing-x5:var(--rs-unit-x5);--spacing-x6:var(--rs-unit-x6);--spacing-x7:var(--rs-unit-x7);--spacing-x8:var(--rs-unit-x8);--spacing-x9:var(--rs-unit-x9);--spacing-x10:var(--rs-unit-x10);--shadow-raised:var(--rs-shadow-raised);--shadow-overlay:var(--rs-shadow-overlay);--breakpoint-m:660px;--breakpoint-l:900px;--breakpoint-xl:1280px}

package/dist/themes/slate/tailwind.css

@@ -1 +1 @@
-@theme inline{--background-color-primary:var(--rs-color-background-primary);--background-color-primary-faded:var(--rs-color-background-primary-faded);--border-color-primary:var(--rs-color-border-primary);--border-color-primary-faded:var(--rs-color-border-primary-faded);--text-color-primary:var(--rs-color-foreground-primary);--background-color-critical:var(--rs-color-background-critical);--background-color-critical-faded:var(--rs-color-background-critical-faded);--border-color-critical:var(--rs-color-border-critical);--border-color-critical-faded:var(--rs-color-border-critical-faded);--text-color-critical:var(--rs-color-foreground-critical);--background-color-warning:var(--rs-color-background-warning);--background-color-warning-faded:var(--rs-color-background-warning-faded);--border-color-warning:var(--rs-color-border-warning);--border-color-warning-faded:var(--rs-color-border-warning-faded);--text-color-warning:var(--rs-color-foreground-warning);--background-color-positive:var(--rs-color-background-positive);--background-color-positive-faded:var(--rs-color-background-positive-faded);--border-color-positive:var(--rs-color-border-positive);--border-color-positive-faded:var(--rs-color-border-positive-faded);--text-color-positive:var(--rs-color-foreground-positive);--background-color-neutral:var(--rs-color-background-neutral);--background-color-neutral-faded:var(--rs-color-background-neutral-faded);--border-color-neutral:var(--rs-color-border-neutral);--border-color-neutral-faded:var(--rs-color-border-neutral-faded);--text-color-neutral:var(--rs-color-foreground-neutral);--text-color-neutral-faded:var(--rs-color-foreground-neutral-faded);--background-color-disabled:var(--rs-color-background-disabled);--background-color-disabled-faded:var(--rs-color-background-disabled-faded);--border-color-disabled:var(--rs-color-border-disabled);--text-color-disabled:var(--rs-color-foreground-disabled);--background-color-elevation-base:var(--rs-color-background-elevation-base);--background-color-elevation-raised:var(--rs-color-background-elevation-raised);--background-color-elevation-overlay:var(--rs-color-background-elevation-overlay);--background-color-page:var(--rs-color-background-page);--background-color-page-faded:var(--rs-color-background-page-faded);--color-brand:var(--rs-color-brand);--color-white:var(--rs-color-white);--color-black:var(--rs-color-black);--text-color-on-primary:var(--rs-color-on-background-primary);--text-color-on-critical:var(--rs-color-on-background-critical);--text-color-on-warning:var(--rs-color-on-background-warning);--text-color-on-positive:var(--rs-color-on-background-positive);--text-color-on-neutral:var(--rs-color-on-background-neutral);--text-color-on-brand:var(--rs-color-on-brand);--radius-small:var(--rs-radius-small);--radius-medium:var(--rs-radius-medium);--radius-large:var(--rs-radius-large);--spacing-0:0px;--spacing-x1:var(--rs-unit-x1);--spacing-x2:var(--rs-unit-x2);--spacing-x3:var(--rs-unit-x3);--spacing-x4:var(--rs-unit-x4);--spacing-x5:var(--rs-unit-x5);--spacing-x6:var(--rs-unit-x6);--spacing-x7:var(--rs-unit-x7);--spacing-x8:var(--rs-unit-x8);--spacing-x9:var(--rs-unit-x9);--spacing-x10:var(--rs-unit-x10);--shadow-raised:var(--rs-shadow-raised);--shadow-overlay:var(--rs-shadow-overlay);--breakpoint-m:660px;--breakpoint-l:900px;--breakpoint-xl:1280px}
+@theme inline{--background-color-primary:var(--rs-color-background-primary);--background-color-primary-faded:var(--rs-color-background-primary-faded);--border-color-primary:var(--rs-color-border-primary);--outline-color-primary:var(--rs-color-border-primary);--border-color-primary-faded:var(--rs-color-border-primary-faded);--outline-color-primary-faded:var(--rs-color-border-primary-faded);--text-color-primary:var(--rs-color-foreground-primary);--background-color-critical:var(--rs-color-background-critical);--background-color-critical-faded:var(--rs-color-background-critical-faded);--border-color-critical:var(--rs-color-border-critical);--outline-color-critical:var(--rs-color-border-critical);--border-color-critical-faded:var(--rs-color-border-critical-faded);--outline-color-critical-faded:var(--rs-color-border-critical-faded);--text-color-critical:var(--rs-color-foreground-critical);--background-color-warning:var(--rs-color-background-warning);--background-color-warning-faded:var(--rs-color-background-warning-faded);--border-color-warning:var(--rs-color-border-warning);--outline-color-warning:var(--rs-color-border-warning);--border-color-warning-faded:var(--rs-color-border-warning-faded);--outline-color-warning-faded:var(--rs-color-border-warning-faded);--text-color-warning:var(--rs-color-foreground-warning);--background-color-positive:var(--rs-color-background-positive);--background-color-positive-faded:var(--rs-color-background-positive-faded);--border-color-positive:var(--rs-color-border-positive);--outline-color-positive:var(--rs-color-border-positive);--border-color-positive-faded:var(--rs-color-border-positive-faded);--outline-color-positive-faded:var(--rs-color-border-positive-faded);--text-color-positive:var(--rs-color-foreground-positive);--background-color-neutral:var(--rs-color-background-neutral);--background-color-neutral-faded:var(--rs-color-background-neutral-faded);--border-color-neutral:var(--rs-color-border-neutral);--outline-color-neutral:var(--rs-color-border-neutral);--border-color-neutral-faded:var(--rs-color-border-neutral-faded);--outline-color-neutral-faded:var(--rs-color-border-neutral-faded);--text-color-neutral:var(--rs-color-foreground-neutral);--text-color-neutral-faded:var(--rs-color-foreground-neutral-faded);--background-color-disabled:var(--rs-color-background-disabled);--background-color-disabled-faded:var(--rs-color-background-disabled-faded);--border-color-disabled:var(--rs-color-border-disabled);--outline-color-disabled:var(--rs-color-border-disabled);--text-color-disabled:var(--rs-color-foreground-disabled);--background-color-elevation-base:var(--rs-color-background-elevation-base);--background-color-elevation-raised:var(--rs-color-background-elevation-raised);--background-color-elevation-overlay:var(--rs-color-background-elevation-overlay);--background-color-page:var(--rs-color-background-page);--background-color-page-faded:var(--rs-color-background-page-faded);--color-brand:var(--rs-color-brand);--color-white:var(--rs-color-white);--color-black:var(--rs-color-black);--text-color-on-primary:var(--rs-color-on-background-primary);--text-color-on-critical:var(--rs-color-on-background-critical);--text-color-on-warning:var(--rs-color-on-background-warning);--text-color-on-positive:var(--rs-color-on-background-positive);--text-color-on-neutral:var(--rs-color-on-background-neutral);--text-color-on-brand:var(--rs-color-on-brand);--radius-small:var(--rs-radius-small);--radius-medium:var(--rs-radius-medium);--radius-large:var(--rs-radius-large);--spacing-0:0px;--spacing-x1:var(--rs-unit-x1);--spacing-x2:var(--rs-unit-x2);--spacing-x3:var(--rs-unit-x3);--spacing-x4:var(--rs-unit-x4);--spacing-x5:var(--rs-unit-x5);--spacing-x6:var(--rs-unit-x6);--spacing-x7:var(--rs-unit-x7);--spacing-x8:var(--rs-unit-x8);--spacing-x9:var(--rs-unit-x9);--spacing-x10:var(--rs-unit-x10);--shadow-raised:var(--rs-shadow-raised);--shadow-overlay:var(--rs-shadow-overlay);--breakpoint-m:660px;--breakpoint-l:900px;--breakpoint-xl:1280px}

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

@@ -1,3 +1,2 @@
 export declare const sleep: (milliseconds: number) => Promise<unknown>;
 export declare const range: (start: number, end: number) => number[];
-export declare const rafThrottle: <T extends (...args: any[]) => void>(fn: T) => T;

package/dist/utilities/helpers.js

@@ -6,17 +6,3 @@ export const range = (start, end) => {
         return [];
     return Array.from({ length: end - start + 1 }, (_, i) => start + i);
 };
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export const rafThrottle = (fn) => {
-    let rafId = null;
-    let args = null;
-    return function (...newArgs) {
-        args = newArgs;
-        if (rafId === null) {
-            rafId = requestAnimationFrame(() => {
-                rafId = null;
-                fn(...args);
-            });
-        }
-    };
-};

package/dist/utilities/props.d.ts

@@ -1,13 +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);
-/**
- * Resolve an array of values into a classname string
- */
-export declare const classNames: (...args: G.ClassName[]) => 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/dist/utilities/props.js

@@ -1,21 +1,3 @@
-/**
- * Resolve an array of values into a classname string
- */
-export const classNames = (...args) => {
-    return args
-        .reduce((acc, cur) => {
-        if (Array.isArray(cur)) {
-            const className = classNames(...cur);
-            if (!className)
-                return acc;
-            return `${acc} ${className}`;
-        }
-        if (cur)
-            return `${acc} ${cur}`;
-        return acc;
-    }, "")
-        .trim();
-};
 const applyClassName = (passedClassName, value, options) => {
     const { base, excludeValueFromClassName } = options || {};
     const className = typeof passedClassName === "string" ? passedClassName : passedClassName(value);

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.9.1-canary.3",
+  "version": "3.10.0-canary.10",
   "license": "MIT",
   "email": "hello@reshaped.so",
   "homepage": "https://reshaped.so",
@@ -91,17 +91,17 @@
     "csstype": "3.1.3",
     "culori": "4.0.2",
     "postcss-custom-media": "11.0.6",
-    "@reshaped/utilities": "3.9.1-canary.3"
+    "@reshaped/headless": "3.10.0-canary.10"
   },
   "scripts": {
-    "clean": "sh ./bin/clean.sh",
+    "clean": "bash ./bin/clean.sh",
     "dev": "storybook dev -p 3001 -c ../../.storybook --disable-telemetry",
     "build": "pnpm clean && pnpm build:esm && pnpm build:css && pnpm build:bundle",
     "build:themes": "node bin/cli.js theming --config dist/cli/theming/reshaped.config.js --output src/themes",
     "build:esm": "tsc -p tsconfig.esm.json && resolve-tspaths -p tsconfig.esm.json",
     "build:css": "postcss \"src/**/*.css\" --dir dist --base src --config tools/build",
     "build:stories": "tsc -p tsconfig.stories.json && resolve-tspaths -p tsconfig.stories.json",
-    "build:bundle": "vite build && cp dist/index.d.ts dist/bundle.d.ts",
+    "build:bundle": "vite build && shx cp dist/index.d.ts dist/bundle.d.ts",
     "build:size": "pnpm clean && pnpm build:esm && pnpm build:bundle",
     "release:local": "pnpm build && pnpm pack --out reshaped-local.tgz",
     "test:browser": "vitest run --project=storybook",

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;

package/dist/core/Actionable/Actionable.js

@@ -1,73 +0,0 @@
-"use client";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
-import * as keys from "../../constants/keys.js";
-import { classNames } from "../../utilities/props.js";
-const Actionable = forwardRef((props, ref) => {
-    const { children, render, href, onClick, type, disabled, as, stopPropagation, className, attributes, } = props;
-    const rootAttributes = { ...attributes };
-    const hasClickHandler = onClick || attributes?.onClick;
-    const hasFocusHandler = attributes?.onFocus || attributes?.onBlur;
-    const isLink = Boolean(href || attributes?.href);
-    // Including attributes ref for the cases when event listeners are added through it
-    // To make sure it doesn't render a span
-    const isButton = Boolean(hasClickHandler || hasFocusHandler || type || attributes?.ref);
-    const renderedAsButton = !isLink && isButton && (!as || as === "button");
-    // Using any here to let TS save on type resolving, otherwise TS throws an error due to the type complexity
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    let TagName;
-    if (isLink) {
-        TagName = "a";
-        rootAttributes.href = disabled ? undefined : href || attributes?.href;
-    }
-    else if (renderedAsButton) {
-        TagName = "button";
-        rootAttributes.type = type || attributes?.type || "button";
-        rootAttributes.disabled = disabled || attributes?.disabled;
-    }
-    else if (isButton) {
-        const isFocusable = as === "label";
-        const simulateButton = !isFocusable || hasClickHandler || hasFocusHandler;
-        TagName = as || "span";
-        rootAttributes.role = simulateButton ? "button" : undefined;
-        rootAttributes.tabIndex = simulateButton ? 0 : undefined;
-    }
-    else {
-        TagName = as || "span";
-    }
-    const handlePress = (event) => {
-        if (disabled)
-            return;
-        if (stopPropagation)
-            event.stopPropagation();
-        onClick?.(event);
-        attributes?.onClick?.(event);
-    };
-    const handleKeyDown = (event) => {
-        const isSpace = event.key === keys.SPACE;
-        const isEnter = event.key === keys.ENTER;
-        if (!isSpace && !isEnter)
-            return;
-        if (rootAttributes.role !== "button")
-            return;
-        if (stopPropagation)
-            event.stopPropagation();
-        event.preventDefault();
-        handlePress(event);
-    };
-    const tagAttributes = {
-        ref: ref,
-        // rootAttributes can receive ref from Flyout
-        ...rootAttributes,
-        className: classNames(className),
-        onClick: handlePress,
-        onKeyDown: handleKeyDown,
-        "aria-disabled": disabled ? true : undefined,
-        children: children,
-    };
-    if (render)
-        return render(tagAttributes);
-    return _jsx(TagName, { ...tagAttributes });
-});
-Actionable.displayName = "Actionable";
-export default Actionable;

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

@@ -1,34 +0,0 @@
-import type React from "react";
-import type * as G from "../../types/global";
-export type AttributesRef = React.RefObject<HTMLButtonElement | null>;
-type Attributes = G.Attributes<"button"> & Omit<React.JSX.IntrinsicElements["a"], keyof G.Attributes<"button">> & {
-    ref?: AttributesRef;
-};
-export type RenderAttributes = G.Attributes<"a"> & {
-    ref: React.RefObject<HTMLAnchorElement | null>;
-    children: React.ReactNode;
-};
-export type Props = {
-    /** Node for inserting the content */
-    children?: React.ReactNode;
-    /** Render a custom root element, useful for integrating with routers */
-    render?: (attributes: RenderAttributes) => React.ReactNode;
-    /** Callback when clicked, renders it as a button tag if href is not provided */
-    onClick?: (e: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>) => void;
-    /** URL, renders it as an anchor tag */
-    href?: string;
-    /** Type attribute, renders it as a button tag */
-    type?: React.ButtonHTMLAttributes<HTMLButtonElement>["type"];
-    /** Disable from user interaction */
-    disabled?: boolean;
-    /** Prevent the event from bubbling up to the parent */
-    stopPropagation?: boolean;
-    /** Render as a different element */
-    as?: keyof React.JSX.IntrinsicElements;
-    /** Additional classname for the root element */
-    className?: G.ClassName;
-    /** Additional attributes for the root element */
-    attributes?: Attributes;
-};
-export type Ref = HTMLButtonElement | HTMLAnchorElement;
-export {};

package/dist/core/Actionable/Actionable.types.js

@@ -1 +0,0 @@
-export {};

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

@@ -1,2 +0,0 @@
-export { default } from "./Actionable";
-export type { Props as ActionableProps, Ref as ActionableRef } from "./Actionable.types";

package/dist/core/Actionable/index.js

@@ -1 +0,0 @@
-export { default } from "./Actionable.js";

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

@@ -1,9 +0,0 @@
-import React from "react";
-import type * as G from "../../types/global";
-type Context = {
-    rtl: [boolean, (state: boolean) => void];
-    defaultViewport: G.Viewport;
-};
-export declare const SingletonEnvironmentContext: React.Context<Context>;
-export declare const useSingletonEnvironment: (defaultRTL?: boolean) => [boolean, React.Dispatch<React.SetStateAction<boolean>>];
-export {};

package/dist/hooks/_private/useSingletonEnvironment.js

@@ -1,33 +0,0 @@
-import React from "react";
-import useIsomorphicLayoutEffect from "../useIsomorphicLayoutEffect.js";
-export const SingletonEnvironmentContext = React.createContext({
-    rtl: [false, () => { }],
-    defaultViewport: "s",
-});
-export const useSingletonEnvironment = (defaultRTL) => {
-    const state = React.useState(defaultRTL || false);
-    const [isRTL, setRTL] = state;
-    /**
-     * Handle changing dir attribute directly
-     */
-    useIsomorphicLayoutEffect(() => {
-        const observer = new MutationObserver((mutations) => {
-            mutations.forEach((mutation) => {
-                if (mutation.attributeName !== "dir")
-                    return;
-                const nextRTL = mutation.target.dir === "rtl";
-                if (isRTL !== nextRTL)
-                    setRTL(nextRTL);
-            });
-        });
-        observer.observe(document.documentElement, { attributes: true });
-        return () => observer.disconnect();
-    }, [isRTL]);
-    /**
-     * Handle setRTL usage
-     */
-    useIsomorphicLayoutEffect(() => {
-        document.documentElement.setAttribute("dir", isRTL ? "rtl" : "ltr");
-    }, [isRTL]);
-    return state;
-};