reshaped 2.8.4 → 2.9.0

package/components/MenuItem/MenuItem.types.d.ts

@@ -3,7 +3,7 @@ import type { IconProps } from "../Icon";
 import type { ActionableProps } from "../Actionable";
 import type * as G from "../../types/global";
 export type Size = "small" | "medium" | "large";
-export type Props = Omit<ActionableProps, "type"> & {
+export type Props = Pick<ActionableProps, "attributes" | "className" | "disabled" | "children" | "href" | "onClick"> & {
     color?: "neutral" | "critical" | "primary";
     icon?: IconProps["svg"];
     startSlot?: React.ReactNode;

package/components/MenuItem/tests/MenuItem.stories.d.ts

@@ -1,12 +1,17 @@
-import React from "react";
 declare const _default: {
     title: string;
+    component: import("../MenuItem.types").Export;
+    parameters: {
+        iframe: {
+            url: string;
+        };
+    };
 };
 export default _default;
-export declare const size: () => React.JSX.Element;
-export declare const color: () => React.JSX.Element;
-export declare const selected: () => React.JSX.Element;
-export declare const disabled: () => React.JSX.Element;
-export declare const roundedCorners: () => React.JSX.Element;
-export declare const slots: () => React.JSX.Element;
-export declare const aligner: () => React.JSX.Element;
+export declare const size: () => import("react").JSX.Element;
+export declare const color: () => import("react").JSX.Element;
+export declare const selected: () => import("react").JSX.Element;
+export declare const disabled: () => import("react").JSX.Element;
+export declare const roundedCorners: () => import("react").JSX.Element;
+export declare const slots: () => import("react").JSX.Element;
+export declare const aligner: () => import("react").JSX.Element;

package/components/MenuItem/tests/MenuItem.stories.js

@@ -1,10 +1,17 @@
-import React from "react";
 import { Example, Placeholder } from "../../../utilities/storybook/index.js";
 import View from "../../View/index.js";
 import Text from "../../Text/index.js";
 import MenuItem from "../index.js";
 import IconZap from "../../../icons/Zap.js";
-export default { title: "Components/MenuItem" };
+export default {
+    title: "Components/MenuItem",
+    component: MenuItem,
+    parameters: {
+        iframe: {
+            url: "https://reshaped.so/docs/components/menu-item",
+        },
+    },
+};
 export const size = () => (<Example>
 		<Example.Item title="size: small">
 			<MenuItem size="small" icon={IconZap} onClick={() => { }}>

package/components/Modal/Modal.js

@@ -2,6 +2,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
 import { classNames, responsiveVariables, responsiveClassNames } from "../../utilities/helpers.js";
+import { enableUserSelect, disableUserSelect } from "../../utilities/dom.js";
 import useResponsiveClientValue from "../../hooks/useResponsiveClientValue.js";
 import Text from "../Text/index.js";
 import Overlay from "../Overlay/index.js";
@@ -76,6 +77,7 @@ const Modal = (props) => {
         // Prevent the drag handling when browser tab swiping is triggering
         if (clientPosition === "start" && e.targetTouches[0].clientX < DRAG_EDGE_BOUNDARY)
             return;
+        disableUserSelect();
         setDragging(true);
     };
     // Once modal is closed - reset its drag data
@@ -92,6 +94,7 @@ const Modal = (props) => {
         if (!dragging)
             return;
         const handleDragEnd = () => {
+            enableUserSelect();
             setDragging(false);
             // Close only when dragging in the closing direction
             // Changing to a different direction will keep the modal opened

package/components/Modal/tests/Modal.stories.d.ts

@@ -1,12 +1,21 @@
-import React from "react";
 declare const _default: {
     title: string;
+    component: {
+        (props: import("./..").ModalProps): import("react").JSX.Element;
+        Title: (props: import("../Modal.types").TitleProps) => import("react").JSX.Element;
+        Subtitle: (props: import("../Modal.types").SubtitleProps) => import("react").JSX.Element;
+    };
+    parameters: {
+        iframe: {
+            url: string;
+        };
+    };
 };
 export default _default;
-export declare const position: () => React.JSX.Element;
-export declare const size: () => React.JSX.Element;
-export declare const padding: () => React.JSX.Element;
-export declare const composition: () => React.JSX.Element;
-export declare const overlay: () => React.JSX.Element;
-export declare const edgeCases: () => React.JSX.Element;
-export declare const trapFocusEdgeCases: () => React.JSX.Element;
+export declare const position: () => import("react").JSX.Element;
+export declare const size: () => import("react").JSX.Element;
+export declare const padding: () => import("react").JSX.Element;
+export declare const composition: () => import("react").JSX.Element;
+export declare const overlay: () => import("react").JSX.Element;
+export declare const edgeCases: () => import("react").JSX.Element;
+export declare const trapFocusEdgeCases: () => import("react").JSX.Element;

package/components/Modal/tests/Modal.stories.js

@@ -9,7 +9,6 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import React from "react";
 import { Example } from "../../../utilities/storybook/index.js";
 import Modal from "../index.js";
 import View from "../../View/index.js";
@@ -20,7 +19,15 @@ import Switch from "../../Switch/index.js";
 import TextField from "../../TextField/index.js";
 import useToggle from "../../../hooks/useToggle.js";
 import Radio from "../../Radio/index.js";
-export default { title: "Components/Modal" };
+export default {
+    title: "Components/Modal",
+    component: Modal,
+    parameters: {
+        iframe: {
+            url: "https://reshaped.so/docs/components/modal",
+        },
+    },
+};
 const Demo = (props) => {
     const { active: activeProp, title, subtitle, children } = props, modalProps = __rest(props, ["active", "title", "subtitle", "children"]);
     const { active, activate, deactivate } = useToggle(activeProp);

package/components/Overlay/tests/Overlay.stories.d.ts

@@ -1,6 +1,11 @@
-import React from "react";
 declare const _default: {
     title: string;
+    component: (props: import("./..").OverlayProps) => import("react").JSX.Element | null;
+    parameters: {
+        iframe: {
+            url: string;
+        };
+    };
 };
 export default _default;
-export declare const base: () => React.JSX.Element;
+export declare const base: () => import("react").JSX.Element;

package/components/Overlay/tests/Overlay.stories.js

@@ -1,9 +1,16 @@
-import React from "react";
 import { Example } from "../../../utilities/storybook/index.js";
 import Overlay from "../index.js";
 import Button from "../../Button/index.js";
 import useToggle from "../../../hooks/useToggle.js";
-export default { title: "Utilities/Overlay" };
+export default {
+    title: "Utilities/Overlay",
+    component: Overlay,
+    parameters: {
+        iframe: {
+            url: "https://reshaped.so/docs/components/overlay",
+        },
+    },
+};
 export const base = () => {
     const baseToggle = useToggle(true);
     const transparentToggle = useToggle(false);

package/components/Popover/tests/Popover.stories.d.ts

@@ -1,10 +1,19 @@
-import React from "react";
 declare const _default: {
     title: string;
+    component: {
+        (props: import("./..").PopoverProps): import("react").JSX.Element;
+        Trigger: (props: import("../../_private/Flyout").FlyoutTriggerProps) => import("react").JSX.Element;
+        Content: (props: import("../../_private/Flyout").FlyoutContentProps) => import("react").JSX.Element | null;
+    };
+    parameters: {
+        iframe: {
+            url: string;
+        };
+    };
 };
 export default _default;
-export declare const position: () => React.JSX.Element;
-export declare const width: () => React.JSX.Element;
-export declare const variant: () => React.JSX.Element;
-export declare const padding: () => React.JSX.Element;
-export declare const triggerType: () => React.JSX.Element;
+export declare const position: () => import("react").JSX.Element;
+export declare const width: () => import("react").JSX.Element;
+export declare const variant: () => import("react").JSX.Element;
+export declare const padding: () => import("react").JSX.Element;
+export declare const triggerType: () => import("react").JSX.Element;

package/components/Popover/tests/Popover.stories.js

@@ -9,12 +9,19 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import React from "react";
 import { Example } from "../../../utilities/storybook/index.js";
 import View from "../../View/index.js";
 import Popover from "../index.js";
 import Button from "../../Button/index.js";
-export default { title: "Components/Popover" };
+export default {
+    title: "Components/Popover",
+    component: Popover,
+    parameters: {
+        iframe: {
+            url: "https://reshaped.so/docs/components/popover",
+        },
+    },
+};
 const Demo = (props) => {
     const { position } = props, rest = __rest(props, ["position"]);
     return (<Popover position={position} {...rest}>

package/components/Progress/tests/Progress.stories.d.ts

@@ -1,6 +1,12 @@
 import React from "react";
 declare const _default: {
     title: string;
+    component: (props: import("./..").ProgressProps) => React.JSX.Element;
+    parameters: {
+        iframe: {
+            url: string;
+        };
+    };
 };
 export default _default;
 export declare const value: () => React.JSX.Element;

package/components/Progress/tests/Progress.stories.js

@@ -3,7 +3,15 @@ import { Example } from "../../../utilities/storybook/index.js";
 import View from "../../View/index.js";
 import Progress from "../index.js";
 import Button from "../../Button/index.js";
-export default { title: "Components/Progress" };
+export default {
+    title: "Components/Progress",
+    component: Progress,
+    parameters: {
+        iframe: {
+            url: "https://reshaped.so/docs/components/progress",
+        },
+    },
+};
 export const value = () => (<Example>
 		<Example.Item title="value: 50">
 			<Progress value={50}/>

package/components/Radio/tests/Radio.stories.d.ts

@@ -1,8 +1,13 @@
-import React from "react";
 declare const _default: {
     title: string;
+    component: (props: import("./..").RadioProps) => import("react").JSX.Element;
+    parameters: {
+        iframe: {
+            url: string;
+        };
+    };
 };
 export default _default;
-export declare const selection: () => React.JSX.Element;
-export declare const error: () => React.JSX.Element;
-export declare const disabled: () => React.JSX.Element;
+export declare const selection: () => import("react").JSX.Element;
+export declare const error: () => import("react").JSX.Element;
+export declare const disabled: () => import("react").JSX.Element;

package/components/Radio/tests/Radio.stories.js

@@ -1,7 +1,14 @@
-import React from "react";
 import { Example } from "../../../utilities/storybook/index.js";
 import Radio from "../index.js";
-export default { title: "Components/Radio" };
+export default {
+    title: "Components/Radio",
+    component: Radio,
+    parameters: {
+        iframe: {
+            url: "https://reshaped.so/docs/components/radio",
+        },
+    },
+};
 export const selection = () => (<Example>
 		<Example.Item title="unselected">
 			<Radio name="unselected" value="dog">

package/components/RadioGroup/tests/RadioGroup.stories.d.ts

@@ -1,7 +1,12 @@
-import React from "react";
 declare const _default: {
     title: string;
+    component: (props: import("./..").RadioGroupProps) => import("react").JSX.Element;
+    parameters: {
+        iframe: {
+            url: string;
+        };
+    };
 };
 export default _default;
-export declare const selection: () => React.JSX.Element;
-export declare const disabled: () => React.JSX.Element;
+export declare const selection: () => import("react").JSX.Element;
+export declare const disabled: () => import("react").JSX.Element;

package/components/RadioGroup/tests/RadioGroup.stories.js

@@ -1,9 +1,16 @@
-import React from "react";
 import { Example } from "../../../utilities/storybook/index.js";
 import View from "../../View/index.js";
 import RadioGroup from "../index.js";
 import Radio from "../../Radio/index.js";
-export default { title: "Components/RadioGroup" };
+export default {
+    title: "Components/RadioGroup",
+    component: RadioGroup,
+    parameters: {
+        iframe: {
+            url: "https://reshaped.so/docs/components/radio",
+        },
+    },
+};
 export const selection = () => (<Example>
 		<Example.Item title="unselected">
 			<RadioGroup name="unselected">

package/components/Reshaped/Reshaped.css

@@ -1 +1 @@
-:root{--rs-z-index-raised:5;--rs-z-index-flyout:80;--rs-z-index-fixed:90;--rs-z-index-overlay:100;--rs-z-index-notification:110}[data-rs-color-mode=light]{color-scheme:light}[data-rs-color-mode=dark]{color-scheme:dark}*{box-sizing:border-box}blockquote,body,dd,dl,figcaption,figure,h1,h2,h3,h4,h5,h6,li,ol,p,ul{margin:0;padding:0}ol[class],ul[class]{list-style:none}a:not([class]){text-decoration-skip-ink:auto}img{display:block;max-width:100%}button,input,select,textarea{font:inherit}option{background:var(--rs-color-background-elevation-base)}label{cursor:pointer}@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}[data-rs-no-transition] *,[data-rs-no-transition] :after,[data-rs-no-transition] :before{transition:none!important}input::placeholder,textarea::placeholder{color:var(--rs-color-foreground-neutral-faded);opacity:.5}html{-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility;touch-action:manipulation}body,html{height:100%}body{background:var(--rs-color-background-page);color:var(--rs-color-foreground-neutral);scroll-behavior:smooth;text-rendering:optimizespeed}[data-rs-theme],body{font-family:var(--rs-font-family-body);font-size:var(--rs-font-size-body-3);font-weight:var(--rs-font-weight-regular);line-height:var(--rs-line-height-body-3)}textarea{resize:vertical}table{border-collapse:collapse;border-spacing:0}fieldset{border:0;margin:0;padding:0}a{color:var(--rs-color-foreground-primary);text-decoration:underline}a:hover{text-decoration:none}
+:root{--rs-z-index-raised:5;--rs-z-index-flyout:80;--rs-z-index-fixed:90;--rs-z-index-overlay:100;--rs-z-index-notification:110}[data-rs-color-mode=light]{color-scheme:light}[data-rs-color-mode=dark]{color-scheme:dark}*{box-sizing:border-box}blockquote,body,dd,dl,figcaption,figure,h1,h2,h3,h4,h5,h6,li,ol,p,ul{margin:0;padding:0}ol[class],ul[class]{list-style:none}a:not([class]){text-decoration-skip-ink:auto}img{display:block;max-width:100%}button,input,select,textarea{font:inherit}option{background:var(--rs-color-background-elevation-base)}label{cursor:pointer}@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}[data-rs-no-transition] *,[data-rs-no-transition] :after,[data-rs-no-transition] :before{transition:none!important}input::placeholder,textarea::placeholder{color:var(--rs-color-foreground-neutral-faded);opacity:.5}html{-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility;touch-action:manipulation}body,html{background:var(--rs-color-background-page);color:var(--rs-color-foreground-neutral);height:100%;scroll-behavior:smooth}[data-rs-theme],body{font-family:var(--rs-font-family-body);font-size:var(--rs-font-size-body-3);font-weight:var(--rs-font-weight-regular);line-height:var(--rs-line-height-body-3)}textarea{resize:vertical}table{border-collapse:collapse;border-spacing:0}fieldset{border:0;margin:0;padding:0}a{color:var(--rs-color-foreground-primary);text-decoration:underline}a:hover{text-decoration:none}

package/components/Scrim/tests/Scrim.stories.d.ts

@@ -1,7 +1,12 @@
-import React from "react";
 declare const _default: {
     title: string;
+    component: (props: import("./..").ScrimProps) => import("react").JSX.Element;
+    parameters: {
+        iframe: {
+            url: string;
+        };
+    };
 };
 export default _default;
-export declare const position: () => React.JSX.Element;
-export declare const composition: () => React.JSX.Element;
+export declare const position: () => import("react").JSX.Element;
+export declare const composition: () => import("react").JSX.Element;

package/components/Scrim/tests/Scrim.stories.js

@@ -1,7 +1,14 @@
-import React from "react";
 import { Example, Placeholder } from "../../../utilities/storybook/index.js";
 import Scrim from "../index.js";
-export default { title: "Components/Scrim" };
+export default {
+    title: "Components/Scrim",
+    component: Scrim,
+    parameters: {
+        iframe: {
+            url: "https://reshaped.so/docs/components/scrim",
+        },
+    },
+};
 export const position = () => (<Example>
 		<Example.Item title="position: center">
 			<Scrim backgroundSlot={<Placeholder h={200}/>}>Scrim</Scrim>

package/components/ScrollArea/ScrollArea.d.ts

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

package/components/ScrollArea/ScrollArea.js

@@ -0,0 +1,139 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { forwardRef } from "react";
+import { classNames } from "../../utilities/helpers.js";
+import { disableUserSelect, enableUserSelect } from "../../utilities/dom.js";
+import getHeightStyles from "../../styles/height/index.js";
+import getMaxHeightStyles from "../../styles/maxHeight/index.js";
+import useIsomorphicLayoutEffect from "../../hooks/useIsomorphicLayoutEffect.js";
+import s from "./ScrollArea.module.css";
+const ScrollAreaBar = (props) => {
+    const { ratio, position, vertical, onThumbMove } = props;
+    const [dragging, setDragging] = React.useState(false);
+    const dragStartPositionRef = React.useRef(0);
+    const barRef = React.useRef(null);
+    const barClassNames = classNames(s.scrollbar, vertical ? s["--scrollbar-y"] : s["--scrollbar-x"], dragging && s["--scrollbar-dragging"]);
+    const handleClick = (e) => {
+        const elBar = barRef.current;
+        const isDirty = dragStartPositionRef.current;
+        dragStartPositionRef.current = 0;
+        if (isDirty)
+            return;
+        if (!elBar || e.currentTarget !== elBar)
+            return;
+        const rect = elBar.getBoundingClientRect();
+        const diff = vertical ? e.pageY - rect.top : e.pageX - rect.left;
+        const total = vertical ? elBar.clientHeight : elBar.clientWidth;
+        // Move the center of the thumb to the clicked coordinates
+        onThumbMove({ value: diff / total - ratio / 2, type: "absolute" });
+    };
+    const handleDrag = React.useCallback((e) => {
+        if (!dragStartPositionRef.current) {
+            dragStartPositionRef.current = vertical ? e.pageY : e.pageX;
+        }
+        const elBar = barRef.current;
+        if (!elBar)
+            return;
+        if (!dragging)
+            return;
+        const diff = vertical ? e.movementY : e.movementX;
+        const total = vertical ? elBar.scrollHeight : elBar.scrollWidth;
+        onThumbMove({ value: diff / total, type: "relative" });
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [ratio, vertical, dragging]);
+    const handleDragEnd = React.useCallback(() => {
+        setDragging(false);
+        enableUserSelect();
+    }, []);
+    const handleDragStart = () => {
+        setDragging(true);
+        disableUserSelect();
+    };
+    React.useEffect(() => {
+        if (!dragging)
+            return;
+        document.addEventListener("mousemove", handleDrag);
+        document.addEventListener("mouseup", handleDragEnd);
+        return () => {
+            document.removeEventListener("mousemove", handleDrag);
+            document.removeEventListener("mouseup", handleDragEnd);
+        };
+    }, [handleDrag, handleDragEnd, dragging]);
+    return (_jsx("div", { className: barClassNames, style: {
+            "--rs-scroll-area-ratio": ratio,
+            "--rs-scroll-area-position": position,
+        }, ref: barRef, onClick: handleClick, onMouseDown: handleDragStart, "aria-hidden": "true", children: _jsx("div", { className: s.thumb }) }));
+};
+const ScrollArea = forwardRef((props, ref) => {
+    const { children, height, maxHeight, scrollbarDisplay = "hover", onScroll, className, attributes, } = props;
+    const [scrollRatio, setScrollRatio] = React.useState({ x: 1, y: 1 });
+    const [scrollPosition, setScrollPosition] = React.useState({ x: 0, y: 0 });
+    const scrollableRef = React.useRef(null);
+    const resizeObserverRef = React.useRef();
+    const heightStyles = getHeightStyles(height);
+    const maxHeightStyles = getMaxHeightStyles(maxHeight);
+    const rootClassNames = classNames(s.root, scrollbarDisplay && s[`--display-${scrollbarDisplay}`], heightStyles === null || heightStyles === void 0 ? void 0 : heightStyles.classNames, maxHeightStyles === null || maxHeightStyles === void 0 ? void 0 : maxHeightStyles.classNames, className);
+    const rootVariables = Object.assign(Object.assign({}, heightStyles === null || heightStyles === void 0 ? void 0 : heightStyles.variables), maxHeightStyles === null || maxHeightStyles === void 0 ? void 0 : maxHeightStyles.variables);
+    const updateScroll = React.useCallback(() => {
+        const scrollableEl = scrollableRef.current;
+        if (!scrollableEl)
+            return;
+        setScrollRatio({
+            x: scrollableEl.clientWidth / scrollableEl.scrollWidth,
+            y: scrollableEl.clientHeight / scrollableEl.scrollHeight,
+        });
+    }, []);
+    const handleScroll = (e) => {
+        const scrollableEl = scrollableRef.current;
+        if (!scrollableEl)
+            return;
+        const next = {
+            x: e.currentTarget.scrollLeft / scrollableEl.scrollWidth,
+            y: e.currentTarget.scrollTop / scrollableEl.scrollHeight,
+        };
+        setScrollPosition(next);
+        onScroll === null || onScroll === void 0 ? void 0 : onScroll(next);
+    };
+    const handleThumbYMove = (args) => {
+        const scrollableEl = scrollableRef.current;
+        if (!scrollableEl)
+            return;
+        const value = scrollableEl.scrollHeight * args.value;
+        if (args.type === "absolute") {
+            scrollableEl.scrollTop = value;
+        }
+        else {
+            scrollableEl.scrollTop += value;
+        }
+    };
+    const handleThumbXMove = (args) => {
+        const scrollableEl = scrollableRef.current;
+        if (!scrollableEl)
+            return;
+        const value = scrollableEl.clientWidth * args.value;
+        if (args.type === "absolute") {
+            scrollableEl.scrollLeft = value;
+        }
+        else {
+            scrollableEl.scrollLeft += value;
+        }
+    };
+    React.useImperativeHandle(ref, () => scrollableRef.current);
+    useIsomorphicLayoutEffect(() => {
+        updateScroll();
+    }, [updateScroll]);
+    useIsomorphicLayoutEffect(() => {
+        const scrollableEl = scrollableRef.current;
+        if (!scrollableEl)
+            return;
+        resizeObserverRef.current = new ResizeObserver(updateScroll);
+        resizeObserverRef.current.observe(scrollableEl);
+        return () => {
+            var _a;
+            (_a = resizeObserverRef.current) === null || _a === void 0 ? void 0 : _a.disconnect();
+        };
+    }, [updateScroll]);
+    return (_jsxs("div", Object.assign({}, attributes, { className: rootClassNames, style: rootVariables, children: [_jsx("div", { className: s.scrollable, ref: scrollableRef, onScroll: handleScroll, children: children }), scrollRatio.y < 1 && scrollbarDisplay !== "hidden" && (_jsx(ScrollAreaBar, { vertical: true, onThumbMove: handleThumbYMove, ratio: scrollRatio.y, position: scrollPosition.y })), scrollRatio.x < 1 && scrollbarDisplay !== "hidden" && (_jsx(ScrollAreaBar, { onThumbMove: handleThumbXMove, ratio: scrollRatio.x, position: scrollPosition.x }))] })));
+});
+export default ScrollArea;

package/components/ScrollArea/ScrollArea.module.css

@@ -0,0 +1 @@
+.root{--rs-scroll-area-thumb-size:calc(var(--rs-unit-x1) * 1.5);--rs-scroll-area-thumb-offset:calc(var(--rs-unit-x1) / 2)}.root,.scrollable{height:100%;position:relative}.scrollable{overflow:auto;scrollbar-width:none}.scrollable::-webkit-scrollbar{height:0;width:0}.scrollbar{box-sizing:initial;padding:var(--rs-scroll-area-thumb-offset);position:absolute}.scrollbar.--scrollbar-dragging .thumb:before,.scrollbar:hover .thumb:before{opacity:.4}.thumb{height:100%;position:relative;width:100%}.thumb:before{background:var(--rs-color-foreground-neutral);border-radius:999px;content:"";display:block;opacity:0;position:absolute;transition:opacity var(--rs-duration-fast) var(--rs-easing-standard)}.--scrollbar-y{inset-block:0;inset-inline-end:0;width:var(--rs-scroll-area-thumb-size)}.--scrollbar-y .thumb:before{height:calc(var(--rs-scroll-area-ratio) * 100%);inset-block-start:calc(var(--rs-scroll-area-position) * 100%);width:100%}.--scrollbar-x{height:var(--rs-scroll-area-thumb-size);inset-block-end:0;inset-inline:0}.--scrollbar-x .thumb:before{height:100%;inset-inline-start:calc(var(--rs-scroll-area-position) * 100%);width:calc(var(--rs-scroll-area-ratio) * 100%)}.--scrollbar-y:not(:last-child){inset-block-end:calc(var(--rs-scroll-area-thumb-size) + var(--rs-scroll-area-thumb-offset) * 2)}.--scrollbar-y~.--scrollbar-x{inset-inline-end:calc(var(--rs-scroll-area-thumb-size) + var(--rs-scroll-area-thumb-offset) * 2)}.--display-hover:hover .thumb:before,.--display-visible .thumb:before{opacity:.2}

package/components/ScrollArea/ScrollArea.types.d.ts

@@ -0,0 +1,23 @@
+import type React from "react";
+import type * as G from "../../types/global";
+export type Props = {
+    children: React.ReactNode;
+    scrollbarDisplay?: "visible" | "hover" | "hidden";
+    onScroll?: (args: {
+        x: number;
+        y: number;
+    }) => void;
+    height?: G.Responsive<string | number>;
+    maxHeight?: G.Responsive<string | number>;
+    className?: G.ClassName;
+    attributes?: G.Attributes<"div", Props>;
+};
+export type BarProps = {
+    ratio: number;
+    position: number;
+    vertical?: boolean;
+    onThumbMove: (args: {
+        value: number;
+        type: "absolute" | "relative";
+    }) => void;
+};

package/components/ScrollArea/ScrollArea.types.js

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

package/components/ScrollArea/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./ScrollArea";
+export type { Props as ScrollAreaProps } from "./ScrollArea.types";

package/components/ScrollArea/index.js

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

package/components/ScrollArea/tests/ScrollArea.stories.d.ts

@@ -0,0 +1,13 @@
+declare const _default: {
+    title: string;
+    component: import("react").ForwardRefExoticComponent<import("./..").ScrollAreaProps & import("react").RefAttributes<HTMLDivElement>>;
+    parameters: {
+        iframe: {
+            url: string;
+        };
+    };
+};
+export default _default;
+export declare const direction: () => import("react").JSX.Element;
+export declare const visibility: () => import("react").JSX.Element;
+export declare const ref: () => import("react").JSX.Element;