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

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.6",
+  "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.6"
+    "@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;

package/dist/core/Actionable/Actionable.js

@@ -1,73 +0,0 @@
-"use client";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { classNames } from "@reshaped/utilities";
-import { forwardRef } from "react";
-import * as keys from "../../constants/keys.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;
-};

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

@@ -1,35 +0,0 @@
-import React from "react";
-/**
- * Types
- */
-type Callback = (e?: KeyboardEvent) => void;
-type PressedMap = Map<string, KeyboardEvent>;
-export type Hotkeys = Record<string, Callback | null>;
-type HotkeyOptions = {
-    preventDefault?: boolean;
-};
-type Context = {
-    isPressed: (key: string) => boolean;
-    addHotkeys: (hotkeys: Hotkeys, ref: React.RefObject<HTMLElement | null>, options?: HotkeyOptions) => (() => void) | undefined;
-};
-type HotkeyData = {
-    callback: Callback;
-    ref: React.RefObject<HTMLElement | null>;
-    options: HotkeyOptions;
-};
-export declare class HotkeyStore {
-    hotkeyMap: Record<string, Set<HotkeyData>>;
-    getSize: () => number;
-    bindHotkeys: (hotkeys: Hotkeys, ref: React.RefObject<HTMLElement | null>, options: HotkeyOptions) => void;
-    unbindHotkeys: (hotkeys: Hotkeys) => void;
-    handleKeyDown: (pressedMap: PressedMap, e: KeyboardEvent) => void;
-}
-/**
- * Components / Hooks
- */
-export declare const HotkeyContext: React.Context<Context>;
-export declare const SingletonHotkeysProvider: React.FC<{
-    children: React.ReactNode;
-}>;
-declare const useSingletonHotkeys: () => Context;
-export default useSingletonHotkeys;