reshaped 3.0.3 → 3.0.4

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

@@ -1,9 +1,7 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
-import { debounce } from "../../../utilities/helpers.js";
 import TrapFocus from "../../../utilities/a11y/TrapFocus.js";
-import * as timeouts from "../../../constants/timeouts.js";
 import useIsDismissible from "../../../hooks/_private/useIsDismissible.js";
 import useElementId from "../../../hooks/useElementId.js";
 import useIsomorphicLayoutEffect from "../../../hooks/useIsomorphicLayoutEffect.js";
@@ -12,11 +10,15 @@ import useOnClickOutside from "../../../hooks/_private/useOnClickOutside.js";
 import useRTL from "../../../hooks/useRTL.js";
 import { checkTransitions, onNextFrame } from "../../../utilities/animation.js";
 import useFlyout from "./useFlyout.js";
+import * as timeouts from "./Flyout.constants.js";
+import cooldown from "./utilities/cooldown.js";
 import { Provider, useFlyoutTriggerContext, useFlyoutContext } from "./Flyout.context.js";
 const FlyoutRoot = (props) => {
-    const { triggerType = "click", onOpen, onClose, children, forcePosition, trapFocusMode, width, disableHideAnimation, contentGap, contentClassName, contentAttributes, position: passedPosition, active: passedActive, id: passedId, instanceRef, } = props;
+    const { triggerType = "click", onOpen, onClose, children, disabled, forcePosition, trapFocusMode, width, disableHideAnimation, disableContentHover, contentGap, contentClassName, contentAttributes, position: passedPosition, active: passedActive, id: passedId, instanceRef, containerRef, } = props;
     const parentFlyoutContext = useFlyoutContext();
     const parentFlyoutTriggerContext = useFlyoutTriggerContext();
+    const isSubmenu = parentFlyoutContext.trapFocusMode === "action-menu" ||
+        parentFlyoutContext.trapFocusMode === "content-menu";
     const [isRTL] = useRTL();
     const internalTriggerElRef = React.useRef(null);
     /**
@@ -36,6 +38,7 @@ const FlyoutRoot = (props) => {
         width,
         position: passedPosition,
         defaultActive: passedActive,
+        container: containerRef?.current,
         forcePosition,
     });
     const { status, updatePosition, render, hide, remove, show } = flyout;
@@ -50,24 +53,23 @@ const FlyoutRoot = (props) => {
      * Called from the internal actions
      */
     const handleOpen = React.useCallback(() => {
-        const canOpen = !lockedRef.current && status === "idle";
+        const canOpen = !lockedRef.current && status === "idle" && !disabled;
         if (!canOpen)
             return;
         onOpen?.();
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [status]);
+    }, [status, disabled]);
     const handleClose = React.useCallback((options) => {
         const isLocked = triggerType === "click" && !isDismissible();
-        const canClose = !isLocked && status !== "idle";
+        const canClose = !isLocked && status !== "idle" && !disabled;
         if (!canClose)
             return;
         onClose?.();
-        if (options?.closeParents) {
+        if (options?.closeParents)
             parentFlyoutContext?.handleClose?.();
-        }
     }, 
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [status, isDismissible, triggerType]);
+    [status, isDismissible, triggerType, disabled]);
     /**
      * Trigger event handlers
      */
@@ -89,9 +91,12 @@ const FlyoutRoot = (props) => {
     }, [handleOpen]);
     const handleMouseEnter = React.useCallback(() => {
         clearTimer();
-        timerRef.current = setTimeout(handleOpen, timeouts.mouseEnter);
-    }, [clearTimer, timerRef, handleOpen]);
+        timerRef.current = setTimeout(handleOpen, cooldown.timer || isSubmenu ? timeouts.mouseEnterShort : timeouts.mouseEnter);
+        if (!isSubmenu)
+            cooldown.warm();
+    }, [clearTimer, timerRef, handleOpen, isSubmenu]);
     const handleMouseLeave = React.useCallback(() => {
+        cooldown.cool();
         clearTimer();
         timerRef.current = setTimeout(() => handleClose(), timeouts.mouseLeave);
     }, [clearTimer, timerRef, handleClose]);
@@ -130,9 +135,13 @@ const FlyoutRoot = (props) => {
         }
         /**
          * Check that transitions are enabled and it has been triggered on tooltip open
-         * (keyboard focus navigation could move too fast and ignore the transitions completely)
+         * - keyboard focus navigation could move too fast and ignore the transitions completely
+         * - warmed up tooltips get removed instantly
          */
-        if (checkTransitions() && !disableHideAnimation && transitionStartedRef.current) {
+        if (checkTransitions() &&
+            !disableHideAnimation &&
+            transitionStartedRef.current &&
+            cooldown.status !== "warm") {
             hide();
         }
         else {
@@ -193,10 +202,12 @@ const FlyoutRoot = (props) => {
      * Update position on resize or RTL
      */
     React.useEffect(() => {
-        const update = debounce(updatePosition, 10);
-        window.addEventListener("resize", update);
-        return () => window.removeEventListener("resize", update);
-    }, [updatePosition]);
+        const resizeObserver = new ResizeObserver(() => updatePosition({ sync: true }));
+        resizeObserver.observe(document.body);
+        if (triggerElRef.current)
+            resizeObserver.observe(triggerElRef.current);
+        return () => resizeObserver.disconnect();
+    }, [updatePosition, triggerElRef]);
     React.useEffect(() => {
         updatePosition();
     }, [isRTL, updatePosition]);
@@ -206,7 +217,8 @@ const FlyoutRoot = (props) => {
     React.useImperativeHandle(instanceRef, () => ({
         open: handleOpen,
         close: handleClose,
-    }), [handleOpen, handleClose]);
+        updatePosition: () => updatePosition({ sync: true }),
+    }), [handleOpen, handleClose, updatePosition]);
     useHotkeys({ Escape: () => handleClose() }, [handleClose]);
     useOnClickOutside([flyoutElRef, triggerElRef], () => {
         // Clicking outside changes focused element so we don't need to set it back ourselves
@@ -235,6 +247,9 @@ const FlyoutRoot = (props) => {
             contentGap,
             contentClassName,
             contentAttributes,
+            containerRef,
+            disableContentHover,
+            isSubmenu,
         }, children: children }));
 };
 export default FlyoutRoot;

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

@@ -1,3 +1,3 @@
 export { default } from "./Flyout";
 export { useFlyoutContext } from "./Flyout.context";
-export type { Props as FlyoutProps, InstanceRef as FlyoutInstanceRef, TriggerProps as FlyoutTriggerProps, ContentProps as FlyoutContentProps, } from "./Flyout.types";
+export type { Props as FlyoutProps, Instance as FlyoutInstance, TriggerProps as FlyoutTriggerProps, ContentProps as FlyoutContentProps, } from "./Flyout.types";

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

@@ -11,8 +11,11 @@ export declare const modeContentMenuClick: () => React.JSX.Element;
 export declare const modeDialogHover: () => React.JSX.Element;
 export declare const modeActionMenuHover: () => React.JSX.Element;
 export declare const modeContentMenuHover: () => React.JSX.Element;
+export declare const disableContentHover: () => React.JSX.Element;
+export declare const customPortalTarget: () => React.JSX.Element;
 export declare const testWidthOverflowOnMobile: () => React.JSX.Element;
 export declare const testInsideScrollArea: () => React.JSX.Element;
 export declare const testInsideFixed: () => React.JSX.Element;
+export declare const testDynamicBounds: () => React.JSX.Element;
 export declare const widthTrigger: () => React.JSX.Element;
 export declare const scopedTheming: () => React.JSX.Element;

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

@@ -78,6 +78,31 @@ export const modeContentMenuHover = () => (<Demo position="bottom-start" trapFoc
 		<button type="button">Item 2</button>
 		<button type="button">Close</button>
 	</Demo>);
+export const disableContentHover = () => (<Demo triggerType="hover" disableContentHover>
+		Content
+	</Demo>);
+export const customPortalTarget = () => {
+    const portalRef = React.useRef(null);
+    return (<div style={{ position: "relative", padding: 16, height: 200, overflow: "auto" }} ref={portalRef}>
+			<Flyout position="bottom-start" containerRef={portalRef} active>
+				<Flyout.Trigger>{(attributes) => <button {...attributes}>Open</button>}</Flyout.Trigger>
+				<Flyout.Content>
+					<div style={{
+            background: "var(--rs-color-background-elevation-overlay)",
+            padding: "var(--rs-unit-x4)",
+            height: 100,
+            width: 160,
+            borderRadius: "var(--rs-radius-medium)",
+            border: "1px solid var(--rs-color-border-neutral-faded)",
+            boxSizing: "border-box",
+        }}>
+						{"Content"}
+					</div>
+				</Flyout.Content>
+			</Flyout>
+			<div style={{ height: 1000 }}/>
+		</div>);
+};
 export const testWidthOverflowOnMobile = () => (<Demo position="bottom-start" width={600}>
 		Should work on mobile
 		<button type="button">Item 1</button>
@@ -131,6 +156,43 @@ export const testInsideFixed = () => (<Example>
 			<div style={{ height: 2000 }}/>
 		</Example.Item>
 	</Example>);
+export const testDynamicBounds = () => {
+    const [left, setLeft] = React.useState("50%");
+    const [size, setSize] = React.useState("medium");
+    return (<View gap={4}>
+			<View direction="row" gap={2}>
+				<Button onClick={() => setLeft("0%")}>Left</Button>
+				<Button onClick={() => setLeft("50%")}>Center</Button>
+				<Button onClick={() => setLeft("100%")}>Right</Button>
+				<Button onClick={() => setSize("large")}>Large button</Button>
+				<Button onClick={() => setSize("medium")}>Small button</Button>
+			</View>
+			<View height={100}>
+				<Flyout position="bottom" active>
+					<Flyout.Trigger>
+						{(attributes) => (<div style={{ position: "absolute", left, top: "50%" }}>
+								<Button color="primary" attributes={attributes} size={size}>
+									Open
+								</Button>
+							</div>)}
+					</Flyout.Trigger>
+					<Flyout.Content>
+						<div style={{
+            background: "var(--rs-color-background-elevation-overlay)",
+            padding: "var(--rs-unit-x4)",
+            height: 100,
+            width: 160,
+            borderRadius: "var(--rs-radius-medium)",
+            border: "1px solid var(--rs-color-border-neutral-faded)",
+            boxSizing: "border-box",
+        }}>
+							{"Content"}
+						</div>
+					</Flyout.Content>
+				</Flyout>
+			</View>
+		</View>);
+};
 export const widthTrigger = () => (<Flyout triggerType="click" width="trigger" position="bottom">
 		<Flyout.Trigger>
 			{(attributes) => <button {...attributes}>Trigger with long text</button>}

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

@@ -9,9 +9,12 @@ type PassedFlyoutOptions = {
     position?: T.Position;
     defaultActive?: boolean;
     forcePosition?: boolean;
+    container?: HTMLElement | null;
 };
 type UseFlyout = (originRef: ElementRef, targetRef: ElementRef, options: PassedFlyoutOptions) => Pick<T.State, "styles" | "position" | "status"> & {
-    updatePosition: () => void;
+    updatePosition: (options?: {
+        sync?: boolean;
+    }) => void;
     render: () => void;
     hide: () => void;
     remove: () => void;

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

@@ -23,16 +23,17 @@ const getPositionOrder = (position) => {
 /**
  * Check if element visually fits on the screen
  */
-const fullyVisible = (bounds) => {
+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 (bounds.left >= pageLeft &&
-        bounds.left + bounds.width <= pageRight &&
-        bounds.top >= pageTop &&
-        bounds.top + bounds.height <= pageBottom);
+    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);
 };
 /**
  * Order of keys here is responsible for the order of styles applied
@@ -59,7 +60,7 @@ const resetStyles = {
  * Set position of the target element to fit on the screen
  */
 const flyout = (triggerEl, flyoutEl, options) => {
-    const { position, forcePosition, width } = options;
+    const { position, forcePosition, width, container } = options;
     const targetClone = flyoutEl.cloneNode(true);
     const triggerBounds = triggerEl.getBoundingClientRect();
     // Reset all styles applied on the previous hook execution
@@ -78,14 +79,14 @@ const flyout = (triggerEl, flyoutEl, options) => {
     }
     document.body.appendChild(targetClone);
     const flyoutBounds = targetClone.getBoundingClientRect();
-    const scrollableParent = getClosestFlyoutTarget(triggerEl);
+    const scrollableParent = container || getClosestFlyoutTarget(triggerEl);
     const scopeBounds = scrollableParent.getBoundingClientRect();
     const scopeOffset = {
         top: scopeBounds.top + document.documentElement.scrollTop - scrollableParent.scrollTop,
         left: scopeBounds.left + document.documentElement.scrollLeft - scrollableParent.scrollLeft,
     };
     let calculated = calculatePosition({ triggerBounds, flyoutBounds, scopeOffset, ...options });
-    if (!fullyVisible(calculated.styles) && !forcePosition) {
+    if (!fullyVisible(calculated) && !forcePosition) {
         const order = getPositionOrder(position);
         const mobileOrder = order.filter((position) => position === "top" || position === "bottom");
         const test = (testOrder, extraOptions = {}) => {
@@ -102,7 +103,7 @@ const flyout = (triggerEl, flyoutEl, options) => {
                     scopeOffset,
                     ...calculateOptions,
                 });
-                if (fullyVisible(tested.styles)) {
+                if (fullyVisible(tested)) {
                     calculated = tested;
                     return true;
                 }
@@ -110,7 +111,7 @@ const flyout = (triggerEl, flyoutEl, options) => {
             });
         };
         test(order);
-        if (!fullyVisible(calculated.styles)) {
+        if (!fullyVisible(calculated)) {
             test(mobileOrder, { fullWidth: true });
         }
     }
@@ -125,11 +126,13 @@ const flyoutReducer = (state, action) => {
             // Disable events before it's positioned to avoid mouseleave getting triggered
             return { ...state, status: "rendered", styles: { pointerEvents: "none", ...resetStyles } };
         case "position":
-            if (state.status !== "rendered")
+            if (!action.payload.sync && state.status !== "rendered")
+                return state;
+            if (action.payload.sync && state.status !== "visible")
                 return state;
             return {
                 ...state,
-                status: "positioned",
+                status: action.payload.sync ? "visible" : "positioned",
                 position: action.payload.position,
                 styles: { ...defaultStyles, ...action.payload.styles },
             };
@@ -150,7 +153,7 @@ const flyoutReducer = (state, action) => {
     }
 };
 const useFlyout = (originRef, targetRef, options) => {
-    const { position: defaultPosition = "bottom", forcePosition, width } = options;
+    const { position: defaultPosition = "bottom", forcePosition, width, container } = options;
     const [isRTL] = useRTL();
     const [state, dispatch] = React.useReducer(flyoutReducer, {
         position: defaultPosition,
@@ -169,7 +172,7 @@ const useFlyout = (originRef, targetRef, options) => {
     const remove = React.useCallback(() => {
         dispatch({ type: "remove" });
     }, []);
-    const updatePosition = React.useCallback(() => {
+    const updatePosition = React.useCallback((options) => {
         if (!originRef.current || !targetRef.current)
             return;
         const nextFlyoutData = flyout(originRef.current, targetRef.current, {
@@ -177,9 +180,11 @@ const useFlyout = (originRef, targetRef, options) => {
             position: defaultPosition,
             forcePosition,
             rtl: isRTL,
+            container,
         });
-        dispatch({ type: "position", payload: nextFlyoutData });
-    }, [originRef, targetRef, defaultPosition, isRTL, forcePosition, width]);
+        if (nextFlyoutData)
+            dispatch({ type: "position", payload: { ...nextFlyoutData, sync: options?.sync } });
+    }, [container, defaultPosition, forcePosition, isRTL, originRef, targetRef, width]);
     React.useEffect(() => {
         if (state.status === "rendered")
             updatePosition();

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

@@ -14,5 +14,6 @@ declare const calculatePosition: (args: T.Options & {
         height: number;
     };
     position: T.Position;
+    scopeOffset: Record<"left" | "top", number>;
 };
 export default calculatePosition;

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

@@ -33,7 +33,7 @@ const calculatePosition = (args) => {
         case "start":
         case "start-top":
         case "start-bottom":
-            left = triggerBounds.left - triggerBounds.width;
+            left = triggerBounds.left - flyoutBounds.width;
             break;
         case "end":
         case "end-top":
@@ -72,7 +72,7 @@ const calculatePosition = (args) => {
             break;
         case "start-bottom":
         case "end-bottom":
-            top = triggerBounds.bottom - triggerBounds.height;
+            top = triggerBounds.bottom - flyoutBounds.height;
             break;
         default:
             break;
@@ -92,6 +92,6 @@ const calculatePosition = (args) => {
         widthStyle = triggerBounds.width;
     }
     const styles = { left, top, width: widthStyle, height };
-    return { styles, position };
+    return { styles, position, scopeOffset };
 };
 export default calculatePosition;

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

@@ -0,0 +1,8 @@
+declare class Cooldown {
+    status: "cold" | "warm" | "cooling";
+    timer?: ReturnType<typeof setTimeout>;
+    warm: () => void;
+    cool: () => void;
+}
+declare const _default: Cooldown;
+export default _default;

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

@@ -0,0 +1,18 @@
+class Cooldown {
+    status = "cold";
+    timer;
+    warm = () => {
+        clearTimeout(this.timer);
+        this.status = "warm";
+    };
+    cool = () => {
+        this.status = "cooling";
+        const currentTimer = setTimeout(() => {
+            this.status = "cold";
+            if (currentTimer === this.timer)
+                this.timer = undefined;
+        }, 2000);
+        this.timer = currentTimer;
+    };
+}
+export default new Cooldown();

package/dist/index.d.ts

@@ -24,7 +24,7 @@ export type { CalendarProps } from "./components/Calendar";
 export { default as Card } from "./components/Card";
 export type { CardProps } from "./components/Card";
 export { default as Carousel } from "./components/Carousel";
-export type { CarouselProps, CarouselInstanceRef } from "./components/Carousel";
+export type { CarouselProps, CarouselInstanceRef, CarouselInstance } from "./components/Carousel";
 export { default as Checkbox } from "./components/Checkbox";
 export type { CheckboxProps } from "./components/Checkbox";
 export { default as CheckboxGroup } from "./components/CheckboxGroup";
@@ -36,7 +36,7 @@ export type { DismissibleProps } from "./components/Dismissible";
 export { default as Divider } from "./components/Divider";
 export type { DividerProps } from "./components/Divider";
 export { default as DropdownMenu } from "./components/DropdownMenu";
-export type { DropdownMenuProps } from "./components/DropdownMenu";
+export type { DropdownMenuProps, DropdownMenuInstance } from "./components/DropdownMenu";
 export { default as FileUpload } from "./components/FileUpload";
 export type { FileUploadProps } from "./components/FileUpload";
 export { default as FormControl } from "./components/FormControl";
@@ -66,7 +66,7 @@ export type { PaginationProps } from "./components/Pagination";
 export { default as PinField } from "./components/PinField";
 export type { PinFieldProps } from "./components/PinField";
 export { default as Popover } from "./components/Popover";
-export type { PopoverProps } from "./components/Popover";
+export type { PopoverProps, PopoverInstance } from "./components/Popover";
 export { default as Progress } from "./components/Progress";
 export type { ProgressProps } from "./components/Progress";
 export { default as Radio } from "./components/Radio";

package/dist/styles/border/border.module.css

@@ -0,0 +1 @@
+.root{border:1px solid var(--rs-border-color)}.--border-neutral{--rs-border-color:var(--rs-color-border-neutral)}.--border-neutral-faded{--rs-border-color:var(--rs-color-border-neutral-faded)}.--border-positive{--rs-border-color:var(--rs-color-border-positive)}.--border-positive-faded{--rs-border-color:var(--rs-color-border-positive-faded)}.--border-warning{--rs-border-color:var(--rs-color-border-warning)}.--border-warning-faded{--rs-border-color:var(--rs-color-border-warning-faded)}.--border-critical{--rs-border-color:var(--rs-color-border-critical)}.--border-critical-faded{--rs-border-color:var(--rs-color-border-critical-faded)}.--border-primary{--rs-border-color:var(--rs-color-border-primary)}.--border-primary-faded{--rs-border-color:var(--rs-color-border-primary-faded)}.--border-disabled{--rs-border-color:var(--rs-color-border-disabled)}.--border-brand{--rs-border-color:var(--rs-color-brand)}.--border-transparent{--rs-border-color:transparent}@media (--rs-viewport-m ){.--border-neutral--m{--rs-border-color:var(--rs-color-border-neutral)}.--border-neutral-faded--m{--rs-border-color:var(--rs-color-border-neutral-faded)}.--border-positive--m{--rs-border-color:var(--rs-color-border-positive)}.--border-positive-faded--m{--rs-border-color:var(--rs-color-border-positive-faded)}.--border-warning--m{--rs-border-color:var(--rs-color-border-warning)}.--border-warning-faded--m{--rs-border-color:var(--rs-color-border-warning-faded)}.--border-critical--m{--rs-border-color:var(--rs-color-border-critical)}.--border-critical-faded--m{--rs-border-color:var(--rs-color-border-critical-faded)}.--border-primary--m{--rs-border-color:var(--rs-color-border-primary)}.--border-primary-faded--m{--rs-border-color:var(--rs-color-border-primary-faded)}.--border-disabled--m{--rs-border-color:var(--rs-color-border-disabled)}.--border-brand--m{--rs-border-color:var(--rs-color-brand)}.--border-transparent--m{--rs-border-color:transparent}}@media (--rs-viewport-l ){.--border-neutral--l{--rs-border-color:var(--rs-color-border-neutral)}.--border-neutral-faded--l{--rs-border-color:var(--rs-color-border-neutral-faded)}.--border-positive--l{--rs-border-color:var(--rs-color-border-positive)}.--border-positive-faded--l{--rs-border-color:var(--rs-color-border-positive-faded)}.--border-warning--l{--rs-border-color:var(--rs-color-border-warning)}.--border-warning-faded--l{--rs-border-color:var(--rs-color-border-warning-faded)}.--border-critical--l{--rs-border-color:var(--rs-color-border-critical)}.--border-critical-faded--l{--rs-border-color:var(--rs-color-border-critical-faded)}.--border-primary--l{--rs-border-color:var(--rs-color-border-primary)}.--border-primary-faded--l{--rs-border-color:var(--rs-color-border-primary-faded)}.--border-disabled--l{--rs-border-color:var(--rs-color-border-disabled)}.--border-brand--l{--rs-border-color:var(--rs-color-brand)}.--border-transparent--l{--rs-border-color:transparent}}@media (--rs-viewport-xl ){.--border-neutral--xl{--rs-border-color:var(--rs-color-border-neutral)}.--border-neutral-faded--xl{--rs-border-color:var(--rs-color-border-neutral-faded)}.--border-positive--xl{--rs-border-color:var(--rs-color-border-positive)}.--border-positive-faded--xl{--rs-border-color:var(--rs-color-border-positive-faded)}.--border-warning--xl{--rs-border-color:var(--rs-color-border-warning)}.--border-warning-faded--xl{--rs-border-color:var(--rs-color-border-warning-faded)}.--border-critical--xl{--rs-border-color:var(--rs-color-border-critical)}.--border-critical-faded--xl{--rs-border-color:var(--rs-color-border-critical-faded)}.--border-primary--xl{--rs-border-color:var(--rs-color-border-primary)}.--border-primary-faded--xl{--rs-border-color:var(--rs-color-border-primary-faded)}.--border-disabled--xl{--rs-border-color:var(--rs-color-border-disabled)}.--border-brand--xl{--rs-border-color:var(--rs-color-brand)}.--border-transparent--xl{--rs-border-color:transparent}}

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

@@ -0,0 +1,3 @@
+import * as T from "../types";
+declare const getBorderStyles: T.StaticStyleUtility<T.BorderColor>;
+export default getBorderStyles;

package/dist/styles/border/index.js

@@ -0,0 +1,10 @@
+import { responsiveClassNames } from "../../utilities/helpers.js";
+import s from "./border.module.css";
+const getBorderStyles = (value) => {
+    if (!value)
+        return null;
+    return {
+        classNames: [s.root, ...responsiveClassNames(s, "--border", value)],
+    };
+};
+export default getBorderStyles;

package/dist/styles/types.d.ts

@@ -2,6 +2,7 @@ import React from "react";
 import * as G from "../types/global";
 export type Radius = "small" | "medium" | "large" | "circular" | "none";
 export type Position = "relative" | "absolute" | "fixed" | "sticky" | "static";
+export type BorderColor = "neutral" | "neutral-faded" | "critical" | "critical-faded" | "warning" | "warning-faded" | "positive" | "positive-faded" | "primary" | "primary-faded" | "disabled" | "brand" | "transparent";
 /**
  * Utility controlled only with classnames
  */

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.0.3",
+	"version": "3.0.4",
 	"license": "MIT",
 	"email": "hello@reshaped.so",
 	"homepage": "https://reshaped.so",

package/dist/constants/timeouts.d.ts

@@ -1,2 +0,0 @@
-export declare const mouseEnter = 100;
-export declare const mouseLeave = 150;

package/dist/constants/timeouts.js

@@ -1,2 +0,0 @@
-export const mouseEnter = 100;
-export const mouseLeave = 150;