reshaped 3.2.7 → 3.3.0

package/dist/components/_private/Flyout/FlyoutControlled.js

@@ -15,7 +15,7 @@ import cooldown from "./utilities/cooldown.js";
 import { Provider, useFlyoutTriggerContext, useFlyoutContext, useFlyoutContentContext, } from "./Flyout.context.js";
 import useHandlerRef from "../../../hooks/useHandlerRef.js";
 const FlyoutRoot = (props) => {
-    const { triggerType = "click", groupTimeouts, onOpen, onClose, children, disabled, forcePosition, trapFocusMode, width, disableHideAnimation, disableContentHover, disableCloseOnOutsideClick, contentGap = 2, contentShift, contentClassName, contentAttributes, position: passedPosition, active: passedActive, id: passedId, instanceRef, containerRef, initialFocusRef, } = props;
+    const { triggerType = "click", groupTimeouts, onOpen, onClose, children, disabled, forcePosition, trapFocusMode, width, disableHideAnimation, disableContentHover, disableCloseOnOutsideClick, originCoordinates, contentGap = 2, contentShift, contentClassName, contentAttributes, position: passedPosition, active: passedActive, id: passedId, instanceRef, containerRef, initialFocusRef, } = props;
     const fallbackPositions = props.fallbackPositions === false || forcePosition ? [] : props.fallbackPositions;
     const onOpenRef = useHandlerRef(onOpen);
     const onCloseRef = useHandlerRef(onClose);
@@ -33,7 +33,7 @@ const FlyoutRoot = (props) => {
      */
     const triggerElRef = (!parentFlyoutContentContext && parentFlyoutTriggerContext?.triggerElRef) ||
         internalTriggerElRef;
-    const triggerBoundsRef = React.useRef(null);
+    const triggerBoundsRef = React.useRef();
     const flyoutElRef = React.useRef(null);
     const id = useElementId(passedId);
     const timerRef = React.useRef();
@@ -44,7 +44,7 @@ const FlyoutRoot = (props) => {
     const transitionStartedRef = React.useRef(false);
     // Lock blur event while pressing anywhere inside the flyout content
     const lockedBlurEffects = React.useRef(false);
-    // Focus shouldn't retrun back to the trigger when user intentionally clicks outside the flyout
+    // Focus shouldn't return back to the trigger when user intentionally clicks outside the flyout
     const shouldReturnFocusRef = React.useRef(true);
     // Touch devices trigger onMouseEnter but we don't need to apply regular hover timeouts
     // So we're saving a flag on touch start and then change the mouse enter behavior
@@ -52,7 +52,7 @@ const FlyoutRoot = (props) => {
     const flyout = useFlyout({
         triggerElRef,
         flyoutElRef,
-        triggerBoundsRef,
+        triggerBounds: originCoordinates ?? triggerBoundsRef.current,
         width,
         position: passedPosition,
         defaultActive: resolvedActive,
@@ -74,11 +74,12 @@ const FlyoutRoot = (props) => {
      * Called from the internal actions
      */
     const handleOpen = React.useCallback(() => {
-        const canOpen = !lockedRef.current && !isRendered;
-        if (!canOpen)
+        if (lockedRef.current)
+            return;
+        if (isRendered && triggerType !== "hover")
             return;
         onOpenRef.current?.();
-    }, [isRendered, onOpenRef]);
+    }, [onOpenRef, isRendered, triggerType]);
     const handleClose = React.useCallback((options) => {
         const isLocked = triggerType === "click" && !isDismissible();
         const canClose = !isLocked && (isRendered || disabled);
@@ -164,7 +165,7 @@ const FlyoutRoot = (props) => {
          * After animation has started, we're sure about the correct bounds
          * so drop the cache to make flyout work when trigger moves around
          */
-        triggerBoundsRef.current = null;
+        triggerBoundsRef.current = undefined;
     }, [resolvedActive]);
     const handleTransitionEnd = React.useCallback((e) => {
         if (flyoutElRef.current !== e.currentTarget || e.propertyName !== "transform")
@@ -277,12 +278,14 @@ const FlyoutRoot = (props) => {
     }), [handleOpen, handleClose, updatePosition]);
     useHotkeys({ Escape: () => handleClose() }, [handleClose]);
     useOnClickOutside([flyoutElRef, triggerElRef], () => {
+        if (!isRendered)
+            return;
         if (disableCloseOnOutsideClick)
             return;
         // Clicking outside changes focused element so we don't need to set it back ourselves
         shouldReturnFocusRef.current = false;
         handleClose();
-    });
+    }, [isRendered]);
     return (_jsx(Provider, { value: {
             id,
             flyout,

package/dist/components/_private/Flyout/tests/Flyout.stories.d.ts

@@ -5,6 +5,7 @@ declare const _default: {
 export default _default;
 export declare const position: () => React.JSX.Element;
 export declare const dynamicPosition: () => React.JSX.Element;
+export declare const originCoordinates: () => React.JSX.Element;
 export declare const modes: () => React.JSX.Element;
 export declare const width: () => React.JSX.Element;
 export declare const offset: () => React.JSX.Element;

package/dist/components/_private/Flyout/tests/Flyout.stories.js

@@ -51,6 +51,21 @@ export const position = () => (<div style={{ paddingTop: 200 }}>
 export const dynamicPosition = () => (<div style={{ position: "absolute", top: 0, left: "50%" }}>
 		<Demo position="top"/>
 	</div>);
+export const originCoordinates = () => {
+    const [coordinates, setCoordinates] = React.useState(null);
+    return (<Example>
+			<Example.Item>
+				<View height={25} width={25} attributes={{
+            onContextMenu: (e) => {
+                e.preventDefault();
+                setCoordinates({ x: e.clientX, y: e.clientY });
+            },
+        }} backgroundColor="neutral-faded" borderRadius="medium"/>
+				<br /> <br />
+				<Demo position="top" originCoordinates={coordinates} active={!!coordinates} onClose={() => setCoordinates(null)}/>
+			</Example.Item>
+		</Example>);
+};
 export const modes = () => (<Example>
 		<Example.Item title="dialog click">
 			<Demo position="bottom-start" trapFocusMode="dialog">
@@ -187,7 +202,7 @@ export const customPortalTarget = () => {
     return (<Example>
 			<Example.Item title="Custom containerRef">
 				<View padding={4} paddingInline={40} height={50} overflow="auto" backgroundColor="neutral-faded" borderRadius="small" attributes={{ ref: portalRef }}>
-					<Flyout position="bottom-end" containerRef={portalRef} active>
+					<Flyout position="bottom-end" active>
 						<Flyout.Trigger>{(attributes) => <button {...attributes}>Open</button>}</Flyout.Trigger>
 						<Flyout.Content>
 							<div style={{

package/dist/components/_private/Flyout/useFlyout.d.ts

@@ -1,22 +1,17 @@
 import React from "react";
+import type * as G from "../../../types/global";
 import type * as T from "./Flyout.types";
-/**
- * Typings
- */
-type ElementRef = React.RefObject<HTMLElement>;
-type PassedFlyoutOptions = {
+type UseFlyout = (args: {
     width?: T.Width;
     position?: T.Position;
     defaultActive?: boolean;
     fallbackPositions?: T.Position[];
-    container?: HTMLElement | null;
-};
-type UseFlyout = (args: PassedFlyoutOptions & {
-    triggerElRef: ElementRef;
-    flyoutElRef: ElementRef;
-    triggerBoundsRef: React.RefObject<DOMRect | undefined>;
     contentGap?: number;
     contentShift?: number;
+    container?: HTMLElement | null;
+    triggerElRef: React.RefObject<HTMLElement>;
+    flyoutElRef: React.RefObject<HTMLElement>;
+    triggerBounds?: DOMRect | G.Coordinates;
 }) => Pick<T.State, "styles" | "position" | "status"> & {
     updatePosition: (options?: {
         sync?: boolean;

package/dist/components/_private/Flyout/useFlyout.js

@@ -1,23 +1,9 @@
 import React from "react";
 import useRTL from "../../../hooks/useRTL.js";
-import { getClosestFlyoutTarget, getShadowRoot } from "../../../utilities/dom/index.js";
+import { findClosestRenderContainer, getShadowRoot, getRectFromCoordinates } from "../../../utilities/dom/index.js";
 import calculatePosition from "./utilities/calculatePosition.js";
 import getPositionFallbacks from "./utilities/getPositionFallbacks.js";
-/**
- * Check if element visually fits on the screen
- */
-const fullyVisible = (args) => {
-    const { styles, scopeOffset } = args;
-    const htmlEl = document.documentElement;
-    const pageLeft = htmlEl.scrollLeft;
-    const pageRight = pageLeft + htmlEl.clientWidth;
-    const pageTop = htmlEl.scrollTop;
-    const pageBottom = pageTop + htmlEl.clientHeight;
-    return (styles.left + scopeOffset.left >= pageLeft &&
-        styles.left + styles.width + scopeOffset.left <= pageRight &&
-        styles.top + scopeOffset.top >= pageTop &&
-        styles.top + styles.height + scopeOffset.top <= pageBottom);
-};
+import isFullyVisible from "./utilities/isFullyVisible.js";
 /**
  * Order of keys here is responsible for the order of styles applied
  */
@@ -33,7 +19,6 @@ const resetStyles = {
     left: 0,
     top: 0,
     position: "fixed",
-    // opacity: 0,
     visibility: "hidden",
     animation: "none",
     transition: "none",
@@ -46,9 +31,12 @@ const flyout = (args) => {
     const { triggerEl, flyoutEl, triggerBounds: passedTriggerBounds, contentShift = 0, contentGap = 0, ...options } = args;
     const { position, fallbackPositions, width, container, lastUsedFallback, onFallback } = options;
     const targetClone = flyoutEl.cloneNode(true);
-    const triggerBounds = passedTriggerBounds || triggerEl.getBoundingClientRect();
     const baseUnit = getComputedStyle(flyoutEl).getPropertyValue("--rs-unit-x1");
     const unitModifier = baseUnit ? parseInt(baseUnit) : 0;
+    const triggerBounds = passedTriggerBounds || triggerEl?.getBoundingClientRect();
+    if (!triggerBounds)
+        return;
+    const resolvedTriggerBounds = getRectFromCoordinates(triggerBounds);
     // Reset all styles applied on the previous hook execution
     targetClone.style.cssText = "";
     Object.keys(resetStyles).forEach((key) => {
@@ -58,17 +46,17 @@ const flyout = (args) => {
     });
     if (width) {
         if (width === "trigger") {
-            targetClone.style.width = `${triggerBounds.width}px`;
+            targetClone.style.width = `${resolvedTriggerBounds.width}px`;
         }
         else if (width !== "full") {
             targetClone.style.width = width;
         }
     }
-    const shadowRoot = getShadowRoot(triggerEl);
+    const shadowRoot = triggerEl && getShadowRoot(triggerEl);
     // Insert inside shadow root if possible to make sure styles are applied correctly
     (shadowRoot || document.body).appendChild(targetClone);
     const flyoutBounds = targetClone.getBoundingClientRect();
-    const containerParent = container || getClosestFlyoutTarget(triggerEl);
+    const containerParent = container || (triggerEl ? findClosestRenderContainer({ el: triggerEl }) : document.body);
     const containerBounds = containerParent.getBoundingClientRect();
     const scopeOffset = {
         top: containerBounds.top + document.documentElement.scrollTop - containerParent.scrollTop,
@@ -79,14 +67,14 @@ const flyout = (args) => {
     testOrder.some((currentPosition) => {
         const tested = calculatePosition({
             ...options,
-            triggerBounds,
+            triggerBounds: resolvedTriggerBounds,
             flyoutBounds,
             scopeOffset,
             position: currentPosition,
             contentGap: contentGap * unitModifier,
             contentShift: contentShift * unitModifier,
         });
-        const visible = fullyVisible(tested);
+        const visible = isFullyVisible(tested);
         const validPosition = visible || fallbackPositions?.length === 0;
         // Saving first try in case non of the options work
         if (validPosition || lastUsedFallback === currentPosition) {
@@ -96,7 +84,7 @@ const flyout = (args) => {
         return validPosition;
     });
     if (!calculated) {
-        throw new Error(`Reshaped: Can't calculate styles for the ${position} position`);
+        throw new Error(`[Reshaped] Can't calculate styles for the ${position} position`);
     }
     targetClone.parentNode?.removeChild(targetClone);
     return calculated;
@@ -132,11 +120,11 @@ const flyoutReducer = (state, action) => {
                 return state;
             return { ...state, status: "idle", styles: resetStyles };
         default:
-            throw new Error("Invalid reducer type");
+            throw new Error("[Reshaped] Invalid flyout reducer type");
     }
 };
 const useFlyout = (args) => {
-    const { triggerElRef, flyoutElRef, triggerBoundsRef, contentGap, contentShift, ...options } = args;
+    const { triggerElRef, flyoutElRef, triggerBounds, contentGap, contentShift, ...options } = args;
     const { position: defaultPosition = "bottom", fallbackPositions, width, container } = options;
     const lastUsedFallbackRef = React.useRef(defaultPosition);
     // Memo the array internally to avoid new arrays triggering useCallback
@@ -165,12 +153,12 @@ const useFlyout = (args) => {
         lastUsedFallbackRef.current = position;
     }, []);
     const updatePosition = React.useCallback((options) => {
-        if (!triggerElRef.current || !flyoutElRef.current)
+        if (!flyoutElRef.current)
             return;
         const nextFlyoutData = flyout({
             triggerEl: triggerElRef.current,
             flyoutEl: flyoutElRef.current,
-            triggerBounds: triggerBoundsRef.current,
+            triggerBounds,
             width,
             position: defaultPosition,
             fallbackPositions: cachedFallbackPositions,
@@ -181,8 +169,9 @@ const useFlyout = (args) => {
             contentGap,
             contentShift,
         });
-        if (nextFlyoutData)
+        if (nextFlyoutData) {
             dispatch({ type: "position", payload: { ...nextFlyoutData, sync: options?.sync } });
+        }
     }, [
         container,
         defaultPosition,
@@ -190,7 +179,7 @@ const useFlyout = (args) => {
         isRTL,
         flyoutElRef,
         triggerElRef,
-        triggerBoundsRef,
+        triggerBounds,
         width,
         contentGap,
         contentShift,

package/dist/components/_private/Flyout/utilities/isFullyVisible.d.ts

@@ -0,0 +1,6 @@
+import calculatePosition from "./calculatePosition";
+/**
+ * Check if element visually fits on the screen
+ */
+declare const isFullyVisible: (args: ReturnType<typeof calculatePosition>) => boolean;
+export default isFullyVisible;

package/dist/components/_private/Flyout/utilities/isFullyVisible.js

@@ -0,0 +1,16 @@
+/**
+ * Check if element visually fits on the screen
+ */
+const isFullyVisible = (args) => {
+    const { styles, scopeOffset } = args;
+    const htmlEl = document.documentElement;
+    const pageLeft = htmlEl.scrollLeft;
+    const pageRight = pageLeft + htmlEl.clientWidth;
+    const pageTop = htmlEl.scrollTop;
+    const pageBottom = pageTop + htmlEl.clientHeight;
+    return (styles.left + scopeOffset.left >= pageLeft &&
+        styles.left + styles.width + scopeOffset.left <= pageRight &&
+        styles.top + scopeOffset.top >= pageTop &&
+        styles.top + styles.height + scopeOffset.top <= pageBottom);
+};
+export default isFullyVisible;

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

@@ -1,5 +1,5 @@
 "use client";
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
 import ReactDOM from "react-dom";
 import Theme from "../../Theme/index.js";
@@ -29,7 +29,10 @@ const Portal = (props) => {
     const nextScopeRef = targetRef || portal.scopeRef;
     const targetEl = nextScopeRef?.current || defaultTargetEl;
     /* Preserve the current theme when rendered in body */
-    return (_jsxs(_Fragment, { children: [ReactDOM.createPortal(_jsx(Theme, { children: children }), targetEl), _jsx("div", { ref: rootRef, className: s.root })] }));
+    return [
+        ReactDOM.createPortal(_jsx(Theme, { children: children }), targetEl),
+        _jsx("div", { ref: rootRef, className: s.root }, "root"),
+    ];
 };
 function PortalScope(props) {
     const { children } = props;

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

@@ -1,3 +1,3 @@
 import React from "react";
-declare const useOnClickOutside: (refs: React.RefObject<HTMLElement>[], handler: (event: Event) => void) => void;
+declare const useOnClickOutside: (refs: React.RefObject<HTMLElement>[], handler: (event: Event) => void, deps: any[]) => void;
 export default useOnClickOutside;

package/dist/hooks/_private/useOnClickOutside.js

@@ -1,17 +1,20 @@
 import useHandlerRef from "../useHandlerRef.js";
 import React from "react";
-const useOnClickOutside = (refs, handler) => {
+const useOnClickOutside = (refs, handler, deps) => {
     const handlerRef = useHandlerRef(handler);
     React.useEffect(() => {
         if (!handlerRef.current)
             return;
         const handleClick = (event) => {
+            if (event instanceof MouseEvent && event.button === 2) {
+                return;
+            }
             let isInside = false;
             const clickedEl = event.composedPath()[0];
             refs.forEach((elRef) => {
-                if (!elRef.current ||
-                    elRef.current === clickedEl ||
-                    elRef.current.contains(clickedEl)) {
+                if (!elRef.current)
+                    return;
+                if (elRef.current === clickedEl || elRef.current.contains(clickedEl)) {
                     isInside = true;
                 }
             });
@@ -27,6 +30,6 @@ const useOnClickOutside = (refs, handler) => {
             document.removeEventListener("touchstart", handleClick);
         };
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [handlerRef, ...refs]);
+    }, [handlerRef, ...refs, ...deps]);
 };
 export default useOnClickOutside;

package/dist/hooks/_private/useSingletonKeyboardMode.js

@@ -1,10 +1,14 @@
 import React from "react";
+import * as keys from "../../constants/keys.js";
 import { enableKeyboardMode, disableKeyboardMode } from "../../utilities/a11y/index.js";
 const useSingletonKeyboardMode = () => {
     React.useEffect(() => {
         const handleKeyDown = (e) => {
             if (e.metaKey || e.altKey || e.ctrlKey)
                 return;
+            // Prevent focus ring from appearing when using mouse but closing with esc
+            if (e.key === keys.ESC)
+                return;
             enableKeyboardMode();
         };
         const handleClick = () => {

package/dist/index.d.ts

@@ -31,6 +31,8 @@ export { default as CheckboxGroup } from "./components/CheckboxGroup";
 export type { CheckboxGroupProps } from "./components/CheckboxGroup";
 export { default as Container } from "./components/Container";
 export type { ContainerProps } from "./components/Container";
+export { default as ContextMenu } from "./components/ContextMenu";
+export type { ContextMenuProps } from "./components/ContextMenu";
 export { default as Dismissible } from "./components/Dismissible";
 export type { DismissibleProps } from "./components/Dismissible";
 export { default as Divider } from "./components/Divider";

package/dist/index.js

@@ -16,6 +16,7 @@ export { default as Carousel } from "./components/Carousel/index.js";
 export { default as Checkbox } from "./components/Checkbox/index.js";
 export { default as CheckboxGroup } from "./components/CheckboxGroup/index.js";
 export { default as Container } from "./components/Container/index.js";
+export { default as ContextMenu } from "./components/ContextMenu/index.js";
 export { default as Dismissible } from "./components/Dismissible/index.js";
 export { default as Divider } from "./components/Divider/index.js";
 export { default as DropdownMenu } from "./components/DropdownMenu/index.js";

package/dist/styles/align/align.css

@@ -0,0 +1 @@
+[style*="--rs-align-"]{align-items:var(--rs-align)!important;--rs-align-s: ;--rs-align-m:var(--rs-align-s);--rs-align-l:var(--rs-align-m);--rs-align-xl:var(--rs-align-l);--rs-align:var(--rs-align-s)}@media (--rs-viewport-m ){[style*="--rs-align-"]{--rs-align:var(--rs-align-m)}}@media (--rs-viewport-l ){[style*="--rs-align-"]{--rs-align:var(--rs-align-l)}}@media (--rs-viewport-xl ){[style*="--rs-align-"]{--rs-align:var(--rs-align-xl)}}

package/dist/styles/align/index.d.ts

@@ -1,3 +1,4 @@
 import * as T from "../types";
-declare const getAlignStyles: T.StaticStyleUtility<T.Align>;
+import "./align.css";
+declare const getAlignStyles: T.VariableStyleUtility<T.Align>;
 export default getAlignStyles;

package/dist/styles/align/index.js

@@ -1,10 +1,10 @@
-import { responsiveClassNames } from "../../utilities/helpers.js";
-import s from "./align.module.css";
+import { responsiveVariables } from "../../utilities/helpers.js";
+import "./align.css";
 const getAlignStyles = (value) => {
     if (!value)
         return null;
     return {
-        classNames: responsiveClassNames(s, "--align", value),
+        variables: responsiveVariables("--rs-align", value),
     };
 };
 export default getAlignStyles;

package/dist/styles/aspectRatio/aspectRatio.css

@@ -0,0 +1 @@
+[style*="--rs-ratio-"]{--rs-ratio-s:0;--rs-ratio-m:var(--rs-ratio-s);--rs-ratio-l:var(--rs-ratio-m);--rs-ratio-xl:var(--rs-ratio-l);--rs-ratio:var(--rs-ratio-s)}[style*="--rs-ratio-"]:empty,[style*="--rs-ratio-"]:not(:empty)>*{aspect-ratio:var(--rs-ratio)}[style*="--rs-ratio-"]>img{object-fit:cover}@media (--rs-viewport-m ){[style*="--rs-ratio-"]{--rs-ratio:var(--rs-ratio-m)}}@media (--rs-viewport-l ){[style*="--rs-ratio-"]{--rs-ratio:var(--rs-ratio-l)}}@media (--rs-viewport-xl ){[style*="--rs-ratio-"]{--rs-ratio:var(--rs-ratio-xl)}}

package/dist/styles/aspectRatio/index.d.ts

@@ -1,3 +1,4 @@
 import * as T from "../types";
-declare const getAspectRatioStyles: T.DynamicStyleUtility<number>;
+import "./aspectRatio.css";
+declare const getAspectRatioStyles: T.VariableStyleUtility<number>;
 export default getAspectRatioStyles;

package/dist/styles/aspectRatio/index.js

@@ -1,9 +1,9 @@
 import { responsiveVariables } from "../../utilities/helpers.js";
-import s from "./aspectRatio.module.css";
+import "./aspectRatio.css";
 const getAspectRatioStyles = (value) => {
     if (!value)
         return null;
     const variables = responsiveVariables("--rs-ratio", value);
-    return { classNames: s.root, variables };
+    return { variables };
 };
 export default getAspectRatioStyles;

package/dist/styles/bleed/bleed.module.css

@@ -1 +1 @@
-.root{margin-left:calc(var(--rs-unit-x1) * var(--rs-bleed) * -1);margin-right:calc(var(--rs-unit-x1) * var(--rs-bleed) * -1);--rs-bleed-s:0;--rs-bleed-m:var(--rs-bleed-s);--rs-bleed-l:var(--rs-bleed-m);--rs-bleed-xl:var(--rs-bleed-l);--rs-bleed:var(--rs-bleed-s)}.--bleed{border-left-style:none!important;border-radius:0;border-right-style:none!important}@media (--rs-viewport-m ){.root{--rs-bleed:var(--rs-bleed-m)}.--bleed-true--m{border-left-style:none!important;border-radius:0;border-right-style:none!important}.--bleed-false--m{border-left-style:solid!important;border-radius:var(--rs-radius);border-right-style:solid!important}}@media (--rs-viewport-l ){.root{--rs-bleed:var(--rs-bleed-l)}.--bleed-true--l{border-left-style:none!important;border-radius:0;border-right-style:none!important}.--bleed-false--l{border-left-style:solid!important;border-radius:var(--rs-radius);border-right-style:solid!important}}@media (--rs-viewport-xl ){.root{--rs-bleed:var(--rs-bleed-xl)}.--bleed-true--xl{border-left-style:none!important;border-radius:0;border-right-style:none!important}.--bleed-false--xl{border-left-style:solid!important;border-radius:var(--rs-radius);border-right-style:solid!important}}
+.root[style*="--rs-bleed-"]{margin-left:calc(var(--rs-unit-x1) * var(--rs-bleed) * -1);margin-right:calc(var(--rs-unit-x1) * var(--rs-bleed) * -1);--rs-bleed-s:0;--rs-bleed-m:var(--rs-bleed-s);--rs-bleed-l:var(--rs-bleed-m);--rs-bleed-xl:var(--rs-bleed-l);--rs-bleed:var(--rs-bleed-s)}.--bleed{border-left-style:none!important;border-radius:0;border-right-style:none!important}@media (--rs-viewport-m ){.root[style*="--rs-bleed-"]{--rs-bleed:var(--rs-bleed-m)}.--bleed-true--m{border-left-style:none!important;border-radius:0;border-right-style:none!important}.--bleed-false--m{border-left-style:solid!important;border-radius:var(--rs-radius);border-right-style:solid!important}}@media (--rs-viewport-l ){.root[style*="--rs-bleed-"]{--rs-bleed:var(--rs-bleed-l)}.--bleed-true--l{border-left-style:none!important;border-radius:0;border-right-style:none!important}.--bleed-false--l{border-left-style:solid!important;border-radius:var(--rs-radius);border-right-style:solid!important}}@media (--rs-viewport-xl ){.root[style*="--rs-bleed-"]{--rs-bleed:var(--rs-bleed-xl)}.--bleed-true--xl{border-left-style:none!important;border-radius:0;border-right-style:none!important}.--bleed-false--xl{border-left-style:solid!important;border-radius:var(--rs-radius);border-right-style:solid!important}}

package/dist/styles/bleed/index.js

@@ -3,11 +3,8 @@ import s from "./bleed.module.css";
 const getBleedStyles = (value) => {
     if (value === undefined)
         return null;
-    const classNames = [
-        s.root,
-        ...responsiveClassNames(s, "--bleed", responsivePropDependency(value, (value) => typeof value === "number" && value > 0)),
-    ];
+    const classNames = responsiveClassNames(s, "--bleed", responsivePropDependency(value, (value) => typeof value === "number" && value > 0));
     const variables = responsiveVariables("--rs-bleed", value);
-    return { classNames, variables };
+    return { classNames: [s.root, classNames], variables };
 };
 export default getBleedStyles;

package/dist/styles/height/height.module.css

@@ -1 +1 @@
-.literal,.unit{--rs-h-s:auto;--rs-h-m:var(--rs-h-s);--rs-h-l:var(--rs-h-m);--rs-h-xl:var(--rs-h-l);height:var(--rs-h)!important}.literal{--rs-h:var(--rs-h-s)}.unit{--rs-h:calc(var(--rs-h-s) * var(--rs-unit-x1))}@media (--rs-viewport-m ){.literal--m{--rs-h:var(--rs-h-m)}.unit--m{--rs-h:calc(var(--rs-h-m) * var(--rs-unit-x1))}}@media (--rs-viewport-l ){.literal--l{--rs-h:var(--rs-h-l)}.unit--l{--rs-h:calc(var(--rs-h-l) * var(--rs-unit-x1))}}@media (--rs-viewport-xl ){.literal--xl{--rs-h:var(--rs-h-xl)}.unit--xl{--rs-h:calc(var(--rs-h-xl) * var(--rs-unit-x1))}}
+.root{--rs-h-s:auto;--rs-h-m:var(--rs-h-s);--rs-h-l:var(--rs-h-m);--rs-h-xl:var(--rs-h-l);height:var(--rs-h)!important}.--type-literal{--rs-h:var(--rs-h-s)}.--type-unit{--rs-h:calc(var(--rs-h-s) * var(--rs-unit-x1))}@media (--rs-viewport-m ){.--type-literal--m{--rs-h:var(--rs-h-m)}.--type-unit--m{--rs-h:calc(var(--rs-h-m) * var(--rs-unit-x1))}}@media (--rs-viewport-l ){.--type-literal--l{--rs-h:var(--rs-h-l)}.--type-unit--l{--rs-h:calc(var(--rs-h-l) * var(--rs-unit-x1))}}@media (--rs-viewport-xl ){.--type-literal--xl{--rs-h:var(--rs-h-xl)}.--type-unit--xl{--rs-h:calc(var(--rs-h-xl) * var(--rs-unit-x1))}}

package/dist/styles/height/index.js

@@ -4,7 +4,7 @@ const getHeightStyles = (value) => {
     if (!value)
         return null;
     const variables = responsiveVariables("--rs-h", value);
-    const classNames = responsiveClassNames(s, (value) => (typeof value === "number" ? "unit" : "literal"), value, { excludeValueFromClassName: true });
-    return { classNames, variables };
+    const classNames = responsiveClassNames(s, (value) => (typeof value === "number" ? "--type-unit" : "--type-literal"), value, { excludeValueFromClassName: true });
+    return { classNames: [s.root, classNames], variables };
 };
 export default getHeightStyles;

package/dist/styles/inset/index.d.ts

@@ -1,4 +1,5 @@
 import * as T from "../types";
 import * as G from "../../types/global";
-declare const getInsetStyles: (value?: G.Responsive<number>, side?: "top" | "bottom" | "start" | "end") => T.DynamicStyleUtilityResult;
+import "./inset.css";
+declare const getInsetStyles: (value?: G.Responsive<number | "auto">, side?: "top" | "bottom" | "start" | "end") => T.VariableStyleUtilityResult;
 export default getInsetStyles;

package/dist/styles/inset/index.js

@@ -1,14 +1,11 @@
-import { responsiveVariables, responsiveClassNames } from "../../utilities/helpers.js";
-import s from "./inset.module.css";
+import { responsiveVariables } from "../../utilities/helpers.js";
+import "./inset.css";
 const getInsetStyles = (value, side) => {
     if (value === undefined)
         return null;
-    const suffix = side ? `-${side}` : "";
+    const suffix = side ? `-${side}` : "-all";
     const variableName = `--rs-inset${suffix}`;
     const variables = responsiveVariables(variableName, value);
-    const classNames = responsiveClassNames(s, `--inset${suffix}`, value, {
-        excludeValueFromClassName: true,
-    });
-    return { classNames, variables };
+    return { variables };
 };
 export default getInsetStyles;

package/dist/styles/inset/inset.css

@@ -0,0 +1 @@
+[style*="--rs-inset-all-"]{inset:calc(var(--rs-inset-all) * var(--rs-unit-x1));--rs-inset-all-s:0;--rs-inset-all-m:var(--rs-inset-all-s);--rs-inset-all-l:var(--rs-inset-all-m);--rs-inset-all-xl:var(--rs-inset-all-l);--rs-inset-all:var(--rs-inset-all-s)}[style*="--rs-inset-end-"]{inset-inline-end:calc(var(--rs-inset-end) * var(--rs-unit-x1));--rs-inset-end-s:0;--rs-inset-end-m:var(--rs-inset-end-s);--rs-inset-end-l:var(--rs-inset-end-m);--rs-inset-end-xl:var(--rs-inset-end-l);--rs-inset-end:var(--rs-inset-end-s)}[style*="--rs-inset-start-"]{inset-inline-start:calc(var(--rs-inset-start) * var(--rs-unit-x1));--rs-inset-start-s:0;--rs-inset-start-m:var(--rs-inset-start-s);--rs-inset-start-l:var(--rs-inset-start-m);--rs-inset-start-xl:var(--rs-inset-start-l);--rs-inset-start:var(--rs-inset-start-s)}[style*="--rs-inset-top-"]{inset-block-start:calc(var(--rs-inset-top) * var(--rs-unit-x1));--rs-inset-top-s:0;--rs-inset-top-m:var(--rs-inset-top-s);--rs-inset-top-l:var(--rs-inset-top-m);--rs-inset-top-xl:var(--rs-inset-top-l);--rs-inset-top:var(--rs-inset-top-s)}[style*="--rs-inset-bottom-"]{inset-block-end:calc(var(--rs-inset-bottom) * var(--rs-unit-x1));--rs-inset-bottom-s:0;--rs-inset-bottom-m:var(--rs-inset-bottom-s);--rs-inset-bottom-l:var(--rs-inset-bottom-m);--rs-inset-bottom-xl:var(--rs-inset-bottom-l);--rs-inset-bottom:var(--rs-inset-bottom-s)}@media (--rs-viewport-m ){[style*="--rs-inset-all-"]{--rs-inset-all:var(--rs-inset-all-m)}[style*="--rs-inset-end-"]{--rs-inset-end:var(--rs-inset-end-m)}[style*="--rs-inset-start-"]{--rs-inset-start:var(--rs-inset-start-m)}[style*="--rs-inset-top-"]{--rs-inset-top:var(--rs-inset-top-m)}[style*="--rs-inset-bottom-"]{--rs-inset-bottom:var(--rs-inset-bottom-m)}}@media (--rs-viewport-l ){[style*="--rs-inset-all-"]{--rs-inset-all:var(--rs-inset-all-l)}[style*="--rs-inset-end-"]{--rs-inset-end:var(--rs-inset-end-l)}[style*="--rs-inset-start-"]{--rs-inset-start:var(--rs-inset-start-l)}[style*="--rs-inset-top-"]{--rs-inset-top:var(--rs-inset-top-l)}[style*="--rs-inset-bottom-"]{--rs-inset-bottom:var(--rs-inset-bottom-l)}}@media (--rs-viewport-xl ){[style*="--rs-inset-all-"]{--rs-inset-all:var(--rs-inset-all-xl)}[style*="--rs-inset-end-"]{--rs-inset-end:var(--rs-inset-end-xl)}[style*="--rs-inset-start-"]{--rs-inset-start:var(--rs-inset-start-xl)}[style*="--rs-inset-top-"]{--rs-inset-top:var(--rs-inset-top-xl)}[style*="--rs-inset-bottom-"]{--rs-inset-bottom:var(--rs-inset-bottom-xl)}}

package/dist/styles/justify/index.d.ts

@@ -1,3 +1,4 @@
 import * as T from "../types";
-declare const getJustifyStyles: T.StaticStyleUtility<T.Justify>;
+import "./justify.css";
+declare const getJustifyStyles: T.VariableStyleUtility<T.Justify>;
 export default getJustifyStyles;

package/dist/styles/justify/index.js

@@ -1,10 +1,10 @@
-import { responsiveClassNames } from "../../utilities/helpers.js";
-import s from "./justify.module.css";
+import { responsiveVariables } from "../../utilities/helpers.js";
+import "./justify.css";
 const getJustifyStyles = (value) => {
     if (!value)
         return null;
     return {
-        classNames: responsiveClassNames(s, "--justify", value),
+        variables: responsiveVariables("--rs-justify", value),
     };
 };
 export default getJustifyStyles;

package/dist/styles/justify/justify.css

@@ -0,0 +1 @@
+[style*="--rs-justify-"]{justify-content:var(--rs-justify)!important;--rs-justify-s: ;--rs-justify-m:var(--rs-justify-s);--rs-justify-l:var(--rs-justify-m);--rs-justify-xl:var(--rs-justify-l);--rs-justify:var(--rs-justify-s)}@media (--rs-viewport-m ){[style*="--rs-justify-"]{--rs-justify:var(--rs-justify-m)}}@media (--rs-viewport-l ){[style*="--rs-justify-"]{--rs-justify:var(--rs-justify-l)}}@media (--rs-viewport-xl ){[style*="--rs-justify-"]{--rs-justify:var(--rs-justify-xl)}}

package/dist/styles/maxHeight/index.js

@@ -4,7 +4,7 @@ const getMaxHeightStyles = (value) => {
     if (!value)
         return null;
     const variables = responsiveVariables("--rs-max-h", value);
-    const classNames = responsiveClassNames(s, (value) => (typeof value === "number" ? "unit" : "literal"), value, { excludeValueFromClassName: true });
-    return { classNames, variables };
+    const classNames = responsiveClassNames(s, (value) => (typeof value === "number" ? "--type-unit" : "--type-literal"), value, { excludeValueFromClassName: true });
+    return { classNames: [s.root, classNames], variables };
 };
 export default getMaxHeightStyles;

package/dist/styles/maxHeight/maxHeight.module.css

@@ -1 +1 @@
-.literal{max-height:var(--rs-max-h-s,auto)}.unit{max-height:calc(var(--rs-max-h-s) * var(--rs-unit-x1))}@media (--rs-viewport-m ){.literal--m{max-height:var(--rs-max-h-m)}.unit--m{max-height:calc(var(--rs-max-h-m) * var(--rs-unit-x1))}}@media (--rs-viewport-l ){.literal--l{max-height:var(--rs-max-h-l)}.unit--l{max-height:calc(var(--rs-max-h-l) * var(--rs-unit-x1))}}@media (--rs-viewport-xl ){.literal--xl{max-height:var(--rs-max-h-xl)}.unit--xl{max-height:calc(var(--rs-max-h-xl) * var(--rs-unit-x1))}}
+.root[style*="--rs-max-h-"]{--rs-max-h-s:none;--rs-max-h-m:var(--rs-max-h-s);--rs-max-h-l:var(--rs-max-h-m);--rs-max-h-xl:var(--rs-max-h-l);--rs-max-h:var(--rs-max-h-s)}.--type-literal{max-height:var(--rs-max-h)!important}.--type-unit{max-height:calc(var(--rs-max-h) * var(--rs-unit-x1))!important}@media (--rs-viewport-m ){.root[style*="--rs-max-h-"]{--rs-max-h:var(--rs-max-h-m)}.--type-literal--m{max-height:var(--rs-max-h)!important}.--type-unit--m{max-height:calc(var(--rs-max-h) * var(--rs-unit-x1))!important}}@media (--rs-viewport-l ){.root[style*="--rs-max-h-"]{--rs-max-h:var(--rs-max-h-l)}.--type-literal--l{max-height:var(--rs-max-h)!important}.--type-unit--l{max-height:calc(var(--rs-max-h) * var(--rs-unit-x1))!important}}@media (--rs-viewport-xl ){.root[style*="--rs-max-h-"]{--rs-max-h:var(--rs-max-h-xl)}.--type-literal--xl{max-height:var(--rs-max-h)!important}.--type-unit--xl{max-height:calc(var(--rs-max-h) * var(--rs-unit-x1))!important}}

package/dist/styles/maxWidth/index.js

@@ -4,7 +4,7 @@ const getMaxWidthStyles = (value) => {
     if (!value)
         return null;
     const variables = responsiveVariables("--rs-max-w", value);
-    const classNames = responsiveClassNames(s, (value) => (typeof value === "number" ? "unit" : "literal"), value, { excludeValueFromClassName: true });
-    return { classNames, variables };
+    const classNames = responsiveClassNames(s, (value) => (typeof value === "number" ? "--type-unit" : "--type-literal"), value, { excludeValueFromClassName: true });
+    return { classNames: [s.root, classNames], variables };
 };
 export default getMaxWidthStyles;

package/dist/styles/maxWidth/maxWidth.module.css

@@ -1 +1 @@
-.literal{max-width:var(--rs-max-w-s,auto)}.unit{max-width:calc(var(--rs-max-w-s) * var(--rs-unit-x1))}@media (--rs-viewport-m ){.literal--m{max-width:var(--rs-max-w-m)}.unit--m{max-width:calc(var(--rs-max-w-m) * var(--rs-unit-x1))}}@media (--rs-viewport-l ){.literal--l{max-width:var(--rs-max-w-l)}.unit--l{max-width:calc(var(--rs-max-w-l) * var(--rs-unit-x1))}}@media (--rs-viewport-xl ){.literal--xl{max-width:var(--rs-max-w-xl)}.unit--xl{max-width:calc(var(--rs-max-w-xl) * var(--rs-unit-x1))}}
+.root[style*="--rs-max-w-"]{--rs-max-w-s:none;--rs-max-w-m:var(--rs-max-w-s);--rs-max-w-l:var(--rs-max-w-m);--rs-max-w-xl:var(--rs-max-w-l);--rs-max-w:var(--rs-max-w-s)}.--type-literal{max-width:var(--rs-max-w)!important}.--type-unit{max-width:calc(var(--rs-max-w) * var(--rs-unit-x1))!important}@media (--rs-viewport-m ){.root[style*="--rs-max-w-"]{--rs-max-w:var(--rs-max-w-m)}.--type-literal--m{max-width:var(--rs-max-w)!important}.--type-unit--m{max-width:calc(var(--rs-max-w) * var(--rs-unit-x1))!important}}@media (--rs-viewport-l ){.root[style*="--rs-max-w-"]{--rs-max-w:var(--rs-max-w-l)}.--type-literal--l{max-width:var(--rs-max-w)!important}.--type-unit--l{max-width:calc(var(--rs-max-w) * var(--rs-unit-x1))!important}}@media (--rs-viewport-xl ){.root[style*="--rs-max-w-"]{--rs-max-w:var(--rs-max-w-xl)}.--type-literal--xl{max-width:var(--rs-max-w)!important}.--type-unit--xl{max-width:calc(var(--rs-max-w) * var(--rs-unit-x1))!important}}

package/dist/styles/minHeight/index.js

@@ -4,7 +4,7 @@ const getMinHeightStyles = (value) => {
     if (!value)
         return null;
     const variables = responsiveVariables("--rs-min-h", value);
-    const classNames = responsiveClassNames(s, (value) => (typeof value === "number" ? "unit" : "literal"), value, { excludeValueFromClassName: true });
-    return { classNames, variables };
+    const classNames = responsiveClassNames(s, (value) => (typeof value === "number" ? "--type-unit" : "--type-literal"), value, { excludeValueFromClassName: true });
+    return { classNames: [s.root, classNames], variables };
 };
 export default getMinHeightStyles;

package/dist/styles/minHeight/minHeight.module.css

@@ -1 +1 @@
-.literal{min-height:var(--rs-min-h-s,auto)}.unit{min-height:calc(var(--rs-min-h-s) * var(--rs-unit-x1))}@media (--rs-viewport-m ){.literal--m{min-height:var(--rs-min-h-m)}.unit--m{min-height:calc(var(--rs-min-h-m) * var(--rs-unit-x1))}}@media (--rs-viewport-l ){.literal--l{min-height:var(--rs-min-h-l)}.unit--l{min-height:calc(var(--rs-min-h-l) * var(--rs-unit-x1))}}@media (--rs-viewport-xl ){.literal--xl{min-height:var(--rs-min-h-xl)}.unit--xl{min-height:calc(var(--rs-min-h-xl) * var(--rs-unit-x1))}}
+.root[style*="--rs-min-h-"]{--rs-min-h-s:none;--rs-min-h-m:var(--rs-min-h-s);--rs-min-h-l:var(--rs-min-h-m);--rs-min-h-xl:var(--rs-min-h-l);--rs-min-h:var(--rs-min-h-s)}.--type-literal{min-height:var(--rs-min-h)!important}.--type-unit{min-height:calc(var(--rs-min-h) * var(--rs-unit-x1))!important}@media (--rs-viewport-m ){.root[style*="--rs-min-h-"]{--rs-min-h:var(--rs-min-h-m)}.--type-literal--m{min-height:var(--rs-min-h)!important}.--type-unit--m{min-height:calc(var(--rs-min-h) * var(--rs-unit-x1))!important}}@media (--rs-viewport-l ){.root[style*="--rs-min-h-"]{--rs-min-h:var(--rs-min-h-l)}.--type-literal--l{min-height:var(--rs-min-h)!important}.--type-unit--l{min-height:calc(var(--rs-min-h) * var(--rs-unit-x1))!important}}@media (--rs-viewport-xl ){.root[style*="--rs-min-h-"]{--rs-min-h:var(--rs-min-h-xl)}.--type-literal--xl{min-height:var(--rs-min-h)!important}.--type-unit--xl{min-height:calc(var(--rs-min-h) * var(--rs-unit-x1))!important}}