reshaped 3.6.0-canary.0 → 3.6.0-canary.1

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

@@ -1,3 +1,5 @@
+import { StoryObj } from "@storybook/react";
+import { fn } from "@storybook/test";
 declare const _default: {
     title: string;
     component: import("react").FC<import("./..").PopoverProps> & {
@@ -12,10 +14,47 @@ declare const _default: {
     };
 };
 export default _default;
-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;
-export declare const dismissible: () => import("react").JSX.Element;
-export declare const edgeCases: () => import("react").JSX.Element;
+export declare const position: {
+    name: string;
+    render: () => import("react").JSX.Element;
+};
+export declare const widthNumber: {
+    name: string;
+    render: () => import("react").JSX.Element;
+};
+export declare const widthFull: {
+    name: string;
+    render: () => import("react").JSX.Element;
+};
+export declare const padding: {
+    name: string;
+    render: () => import("react").JSX.Element;
+};
+export declare const elevation: {
+    name: string;
+    render: () => import("react").JSX.Element;
+};
+export declare const defaultActive: StoryObj<{
+    handleOpen: ReturnType<typeof fn>;
+    handleClose: ReturnType<typeof fn>;
+}>;
+export declare const active: StoryObj<{
+    handleOpen: ReturnType<typeof fn>;
+    handleClose: ReturnType<typeof fn>;
+}>;
+export declare const activeFalse: StoryObj<{
+    handleOpen: ReturnType<typeof fn>;
+    handleClose: ReturnType<typeof fn>;
+}>;
+export declare const dismissible: StoryObj<{
+    handleClose: ReturnType<typeof fn>;
+}>;
+export declare const className: StoryObj;
+export declare const testWithTooltip: {
+    name: string;
+    render: () => import("react").JSX.Element;
+};
+export declare const variant: {
+    name: string;
+    render: () => import("react").JSX.Element;
+};

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

@@ -1,4 +1,6 @@
+import { expect, fn, userEvent, within, waitFor } from "@storybook/test";
 import { Example } from "../../../utilities/storybook/index.js";
+import { sleep } from "../../../utilities/helpers.js";
 import View from "../../View/index.js";
 import Popover from "../index.js";
 import Tooltip from "../../Tooltip/index.js";
@@ -26,99 +28,206 @@ const Demo = (props) => {
 			</Popover.Content>
 		</Popover>);
 };
-export const position = () => (<Example>
-		<Example.Item title="position: bottom">
-			<View align="center" justify="center" gap={8} direction="row">
-				<Demo position="bottom-start"/>
-				<Demo position="bottom"/>
-				<Demo position="bottom-end"/>
-			</View>
-		</Example.Item>
-		<Example.Item title="position: top">
-			<View align="center" justify="center" gap={8} direction="row">
-				<Demo position="top-start"/>
-				<Demo position="top"/>
-				<Demo position="top-end"/>
-			</View>
-		</Example.Item>
-		<Example.Item title="position: start">
-			<View align="center" justify="center" gap={8} direction="row">
-				<Demo position="start-top"/>
-				<Demo position="start"/>
-				<Demo position="start-bottom"/>
-			</View>
-		</Example.Item>
-		<Example.Item title="position: end">
-			<View align="center" justify="center" gap={8} direction="row">
-				<Demo position="end-top"/>
-				<Demo position="end"/>
-				<Demo position="end-bottom"/>
-			</View>
-		</Example.Item>
-		<Example.Item title={["position: bottom", "changes to top-start because it doesn't fit"]}>
-			<View align="center">
-				<Demo position="bottom"/>
-			</View>
-		</Example.Item>
-	</Example>);
-export const width = () => (<Example>
-		<Example.Item title="width: 400">
-			<Demo width="400px"/>
-		</Example.Item>
-		<Example.Item title="width: 100%">
-			<Demo width="100%"/>
-		</Example.Item>
-	</Example>);
-export const variant = () => (<Example>
-		<Example.Item title="variant: headless">
-			<Popover variant="headless">
+export const position = {
+    name: "position",
+    render: () => (<Example>
+			<Example.Item title="position: bottom">
+				<View align="center" justify="center" gap={8} direction="row">
+					<Demo position="bottom-start"/>
+					<Demo position="bottom"/>
+					<Demo position="bottom-end"/>
+				</View>
+			</Example.Item>
+			<Example.Item title="position: top">
+				<View align="center" justify="center" gap={8} direction="row">
+					<Demo position="top-start"/>
+					<Demo position="top"/>
+					<Demo position="top-end"/>
+				</View>
+			</Example.Item>
+			<Example.Item title="position: start">
+				<View align="center" justify="center" gap={8} direction="row">
+					<Demo position="start-top"/>
+					<Demo position="start"/>
+					<Demo position="start-bottom"/>
+				</View>
+			</Example.Item>
+			<Example.Item title="position: end">
+				<View align="center" justify="center" gap={8} direction="row">
+					<Demo position="end-top"/>
+					<Demo position="end"/>
+					<Demo position="end-bottom" defaultActive/>
+				</View>
+			</Example.Item>
+		</Example>),
+};
+export const widthNumber = {
+    name: "width: px",
+    render: () => <Demo width="400px" defaultActive/>,
+};
+export const widthFull = {
+    name: "width: 100%",
+    render: () => <Demo width="100%" defaultActive/>,
+};
+export const padding = {
+    name: "padding",
+    render: () => (<Example>
+			<Example.Item title="padding: 0">
+				<Demo padding={0}/>
+			</Example.Item>
+			<Example.Item title="padding: 6">
+				<Demo padding={6} defaultActive/>
+			</Example.Item>
+		</Example>),
+};
+export const elevation = {
+    name: "elevation",
+    render: () => (<Example>
+			<Example.Item title="elevation: raised">
+				<Demo elevation="raised" defaultActive/>
+			</Example.Item>
+		</Example>),
+};
+export const defaultActive = {
+    name: "defaultActive, uncontrolled",
+    args: {
+        handleOpen: fn(),
+        handleClose: fn(),
+    },
+    render: (args) => (<Popover onOpen={args.handleOpen} onClose={args.handleClose} defaultActive>
+			<Popover.Trigger>
+				{(attributes) => <Button attributes={attributes}>Open</Button>}
+			</Popover.Trigger>
+			<Popover.Content>Content</Popover.Content>
+		</Popover>),
+    play: async ({ canvasElement, args }) => {
+        const canvas = within(canvasElement.ownerDocument.body);
+        const trigger = canvas.getAllByRole("button")[0];
+        let item = canvas.getByText("Content");
+        // Wait for the open animation
+        await sleep(500);
+        await userEvent.click(document.body);
+        await waitFor(() => {
+            expect(args.handleClose).toHaveBeenCalledTimes(1);
+            expect(args.handleClose).toHaveBeenCalledWith({ reason: "outside-click" });
+            expect(item).not.toBeInTheDocument();
+        });
+        await userEvent.click(trigger);
+        await waitFor(() => {
+            expect(args.handleOpen).toHaveBeenCalledTimes(1);
+            expect(args.handleOpen).toHaveBeenCalledWith();
+        });
+        item = canvas.getByText("Content");
+        expect(item).toBeInTheDocument();
+    },
+};
+export const active = {
+    name: "active, controlled",
+    args: {
+        handleOpen: fn(),
+        handleClose: fn(),
+    },
+    render: (args) => (<Popover onOpen={args.handleOpen} onClose={args.handleClose} active>
+			<Popover.Trigger>
+				{(attributes) => <Button attributes={attributes}>Open</Button>}
+			</Popover.Trigger>
+			<Popover.Content>Content</Popover.Content>
+		</Popover>),
+    play: async ({ canvasElement, args }) => {
+        const canvas = within(canvasElement.ownerDocument.body);
+        const item = canvas.getByText("Content");
+        await userEvent.click(document.body);
+        await waitFor(() => {
+            expect(args.handleClose).toHaveBeenCalledTimes(1);
+            expect(args.handleClose).toHaveBeenCalledWith({ reason: "outside-click" });
+        });
+        expect(item).toBeInTheDocument();
+    },
+};
+export const activeFalse = {
+    name: "active false, controlled",
+    args: {
+        handleOpen: fn(),
+        handleClose: fn(),
+    },
+    render: (args) => (<Popover onOpen={args.handleOpen} onClose={args.handleClose} active={false}>
+			<Popover.Trigger>
+				{(attributes) => <Button attributes={attributes}>Open</Button>}
+			</Popover.Trigger>
+			<Popover.Content>Content</Popover.Content>
+		</Popover>),
+    play: async ({ canvasElement, args }) => {
+        const canvas = within(canvasElement.ownerDocument.body);
+        const trigger = canvas.getAllByRole("button")[0];
+        await userEvent.click(trigger);
+        await waitFor(() => {
+            expect(args.handleOpen).toHaveBeenCalledTimes(1);
+            expect(args.handleOpen).toHaveBeenCalledWith();
+        });
+        const item = canvas.queryByText("Content");
+        expect(item).not.toBeInTheDocument();
+    },
+};
+export const dismissible = {
+    name: "dismissible, onClose, className, attributes, closeAriaLabel",
+    args: {
+        handleClose: fn(),
+    },
+    render: (args) => (<Popover onClose={args.handleClose} defaultActive>
+			<Popover.Trigger>
+				{(attributes) => <Button attributes={attributes}>Open</Button>}
+			</Popover.Trigger>
+			<Popover.Content>
+				<Popover.Dismissible closeAriaLabel="Close" attributes={{ "data-testid": "test-id" }} className="test-classname">
+					Content
+				</Popover.Dismissible>
+			</Popover.Content>
+		</Popover>),
+    play: async ({ canvasElement, args }) => {
+        const canvas = within(canvasElement.ownerDocument.body);
+        await sleep(300);
+        const dismissible = canvas.getByTestId("test-id");
+        const closeButton = within(dismissible).getByRole("button");
+        expect(dismissible).toHaveClass("test-classname");
+        expect(closeButton).toHaveAccessibleName("Close");
+        await userEvent.click(closeButton);
+        await waitFor(() => {
+            expect(args.handleClose).toHaveBeenCalledTimes(1);
+            expect(args.handleClose).toHaveBeenCalledWith({});
+        });
+        await sleep(300);
+        const trigger = canvas.getAllByRole("button")[0];
+        await userEvent.click(trigger);
+    },
+};
+export const className = {
+    name: "className, attributes",
+    render: () => (<div data-testid="root">
+			<Popover active>
 				<Popover.Trigger>
 					{(attributes) => <Button attributes={attributes}>Open</Button>}
 				</Popover.Trigger>
-				<Popover.Content>
-					<View height="100px" width="100px" borderColor="primary" borderRadius="medium" backgroundColor="neutral-faded"/>
+				<Popover.Content className="test-classname" attributes={{ "data-testid": "test-id" }}>
+					Content
 				</Popover.Content>
 			</Popover>
-		</Example.Item>
-	</Example>);
-export const padding = () => (<Example>
-		<Example.Item title="padding: 0">
-			<Demo padding={0}/>
-		</Example.Item>
-		<Example.Item title="padding: 6">
-			<Demo padding={6}/>
-		</Example.Item>
-	</Example>);
-export const triggerType = () => (<Example>
-		<Example.Item title="triggerType: hover">
-			<Demo triggerType="hover"/>
-		</Example.Item>
-	</Example>);
-export const dismissible = () => {
-    return (<Example>
-			<Example.Item title="with dismissible">
-				<Popover>
-					<Popover.Trigger>
-						{(attributes) => <Button attributes={attributes}>Open</Button>}
-					</Popover.Trigger>
-					<Popover.Content>
-						<Popover.Dismissible closeAriaLabel="Close" align="center">
-							Popover content
-						</Popover.Dismissible>
-					</Popover.Content>
-				</Popover>
-			</Example.Item>
-		</Example>);
+		</div>),
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement.ownerDocument.body);
+        const menu = await canvas.findByTestId("test-id");
+        expect(menu).toHaveClass("test-classname");
+    },
 };
-export const edgeCases = () => (<Example>
-		<Example.Item title="Popover with tooltip">
+export const testWithTooltip = {
+    name: "test: with tooltip",
+    render: () => (<View paddingTop={10}>
 			<Tooltip position="top" text="Hello">
 				{(tooltipAttributes) => (<Popover position="bottom">
 						<Popover.Trigger>
 							{(attributes) => (<Button attributes={{
-                ...attributes,
-                ...tooltipAttributes,
-            }}>
+                    ...attributes,
+                    ...tooltipAttributes,
+                }}>
 									Open
 								</Button>)}
 						</Popover.Trigger>
@@ -130,5 +239,20 @@ export const edgeCases = () => (<Example>
 						</Popover.Content>
 					</Popover>)}
 			</Tooltip>
-		</Example.Item>
-	</Example>);
+		</View>),
+};
+export const variant = {
+    name: "variant [deprecated]",
+    render: () => (<Example>
+			<Example.Item title="variant: headless">
+				<Popover variant="headless" defaultActive position="bottom-start">
+					<Popover.Trigger>
+						{(attributes) => <Button attributes={attributes}>Open</Button>}
+					</Popover.Trigger>
+					<Popover.Content>
+						<View height="100px" width="100px" borderColor="primary" borderRadius="medium" backgroundColor="primary-faded"/>
+					</Popover.Content>
+				</Popover>
+			</Example.Item>
+		</Example>),
+};

package/dist/components/Progress/Progress.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { classNames } from "../../utilities/helpers.js";
+import { classNames } from "../../utilities/props.js";
 import s from "./Progress.module.css";
 const Progress = (props) => {
     const { value = 0, min = 0, max = 100, color = "primary", size = "medium", duration, ariaLabel, className, attributes, } = props;

package/dist/components/ProgressIndicator/ProgressIndicator.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
-import { classNames } from "../../utilities/helpers.js";
+import { classNames } from "../../utilities/props.js";
 import { onNextFrame } from "../../utilities/animation.js";
 import usePrevious from "../../hooks/_private/usePrevious.js";
 import s from "./ProgressIndicator.module.css";

package/dist/components/Radio/Radio.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { classNames, responsiveClassNames, responsivePropDependency } from "../../utilities/helpers.js";
+import { classNames, responsiveClassNames, responsivePropDependency } from "../../utilities/props.js";
 import HiddenInput from "../_private/HiddenInput/index.js";
 import Text from "../Text/index.js";
 import { useRadioGroup } from "../RadioGroup/index.js";

package/dist/components/Radio/Radio.module.css

@@ -1 +1 @@
-@layer rs.radio.base;@layer rs.radio.error;@layer rs.radio.checked;@layer rs.radio.disabled;@layer rs.radio.base{.root{align-items:center;cursor:pointer;display:inline-flex;gap:var(--rs-radio-gap);user-select:none;vertical-align:top;-webkit-tap-highlight-color:transparent}.root:hover .decorator{background:var(--rs-color-background-neutral-faded)}.field{position:relative}.decorator{background:var(--rs-color-background-elevation-base);border:1px solid var(--rs-color-border-neutral);border-radius:50%;height:var(--rs-radio-line-height);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:background-color,border-color;width:var(--rs-radio-line-height)}.decorator:after{background:var(--rs-color-on-background-primary);border-radius:50%;content:"";height:calc(var(--rs-radio-line-height) * .4);left:50%;opacity:0;position:absolute;top:50%;transform:translate(-50%,-50%) scale(0);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:opacity,transform;width:calc(var(--rs-radio-line-height) * .4)}.--size-small{--rs-radio-line-height:var(--rs-line-height-caption-1);--rs-radio-gap:var(--rs-unit-x1)}.--size-medium{--rs-radio-line-height:var(--rs-line-height-body-3);--rs-radio-gap:var(--rs-unit-x2)}.--size-large{--rs-radio-line-height:var(--rs-line-height-body-2);--rs-radio-gap:var(--rs-unit-x2)}[data-rs-keyboard] .input:focus+.decorator{box-shadow:var(--rs-focus-shadow)}}@layer rs.radio.error{.root.--error .decorator{border-color:var(--rs-color-border-critical)}}@layer rs.radio.checked{.input:checked+.decorator{background:var(--rs-color-background-primary);border-color:var(--rs-color-background-primary)}.input:checked+.decorator:after{opacity:1;transform:translate(-50%,-50%) scale(1)}}@layer rs.radio.disabled{.root.--disabled{color:var(--rs-color-foreground-disabled);cursor:not-allowed}.root.--disabled .decorator{background:var(--rs-color-background-disabled-faded);border-color:var(--rs-color-border-disabled)}.root.--disabled .decorator:after{background-color:var(--rs-color-foreground-disabled)}.root.--disabled .input:checked+.decorator{background:var(--rs-color-background-disabled);border-color:transparent}}@media (--rs-viewport-m ){.--size-small--m{--rs-radio-line-height:var(--rs-line-height-caption-1);--rs-radio-gap:var(--rs-unit-x1)}.--size-medium--m{--rs-radio-line-height:var(--rs-line-height-body-3);--rs-radio-gap:var(--rs-unit-x2)}.--size-large--m{--rs-radio-line-height:var(--rs-line-height-body-2);--rs-radio-gap:var(--rs-unit-x2)}}@media (--rs-viewport-l ){.--size-small--l{--rs-radio-line-height:var(--rs-line-height-caption-1);--rs-radio-gap:var(--rs-unit-x1)}.--size-medium--l{--rs-radio-line-height:var(--rs-line-height-body-3);--rs-radio-gap:var(--rs-unit-x2)}.--size-large--l{--rs-radio-line-height:var(--rs-line-height-body-2);--rs-radio-gap:var(--rs-unit-x2)}}@media (--rs-viewport-xl ){.--size-small--xl{--rs-radio-line-height:var(--rs-line-height-caption-1);--rs-radio-gap:var(--rs-unit-x1)}.--size-medium--xl{--rs-radio-line-height:var(--rs-line-height-body-3);--rs-radio-gap:var(--rs-unit-x2)}.--size-large--xl{--rs-radio-line-height:var(--rs-line-height-body-2);--rs-radio-gap:var(--rs-unit-x2)}}
+.root{align-items:center;cursor:pointer;display:inline-flex;gap:var(--rs-radio-gap);user-select:none;vertical-align:top;-webkit-tap-highlight-color:transparent}.root:hover .decorator{background:var(--rs-color-background-neutral-faded)}.field{position:relative}.decorator{background:var(--rs-color-background-elevation-base);border:1px solid var(--rs-color-border-neutral);border-radius:50%;height:var(--rs-radio-line-height);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:background-color,border-color;width:var(--rs-radio-line-height)}.decorator:after{background:var(--rs-color-on-background-primary);border-radius:50%;content:"";height:calc(var(--rs-radio-line-height) * .4);left:50%;opacity:0;position:absolute;top:50%;transform:translate(-50%,-50%) scale(0);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:opacity,transform;width:calc(var(--rs-radio-line-height) * .4)}.--size-small{--rs-radio-line-height:var(--rs-line-height-caption-1);--rs-radio-gap:var(--rs-unit-x1)}.--size-medium{--rs-radio-line-height:var(--rs-line-height-body-3);--rs-radio-gap:var(--rs-unit-x2)}.--size-large{--rs-radio-line-height:var(--rs-line-height-body-2);--rs-radio-gap:var(--rs-unit-x2)}[data-rs-keyboard] .input:focus+.decorator{box-shadow:var(--rs-focus-shadow)}.root.--error .decorator{border-color:var(--rs-color-border-critical)}.input:checked+.decorator{background:var(--rs-color-background-primary);border-color:var(--rs-color-background-primary)}.input:checked+.decorator:after{opacity:1;transform:translate(-50%,-50%) scale(1)}.root.--disabled{color:var(--rs-color-foreground-disabled);cursor:not-allowed}.root.--disabled .decorator{background:var(--rs-color-background-disabled-faded);border-color:var(--rs-color-border-disabled)}.root.--disabled .decorator:after{background-color:var(--rs-color-foreground-disabled)}.root.--disabled .input:checked+.decorator{background:var(--rs-color-background-disabled);border-color:transparent}@media (--rs-viewport-m ){.--size-small--m{--rs-radio-line-height:var(--rs-line-height-caption-1);--rs-radio-gap:var(--rs-unit-x1)}.--size-medium--m{--rs-radio-line-height:var(--rs-line-height-body-3);--rs-radio-gap:var(--rs-unit-x2)}.--size-large--m{--rs-radio-line-height:var(--rs-line-height-body-2);--rs-radio-gap:var(--rs-unit-x2)}}@media (--rs-viewport-l ){.--size-small--l{--rs-radio-line-height:var(--rs-line-height-caption-1);--rs-radio-gap:var(--rs-unit-x1)}.--size-medium--l{--rs-radio-line-height:var(--rs-line-height-body-3);--rs-radio-gap:var(--rs-unit-x2)}.--size-large--l{--rs-radio-line-height:var(--rs-line-height-body-2);--rs-radio-gap:var(--rs-unit-x2)}}@media (--rs-viewport-xl ){.--size-small--xl{--rs-radio-line-height:var(--rs-line-height-caption-1);--rs-radio-gap:var(--rs-unit-x1)}.--size-medium--xl{--rs-radio-line-height:var(--rs-line-height-body-3);--rs-radio-gap:var(--rs-unit-x2)}.--size-large--xl{--rs-radio-line-height:var(--rs-line-height-body-2);--rs-radio-gap:var(--rs-unit-x2)}}

package/dist/components/Reshaped/Reshaped.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
-import { classNames } from "../../utilities/helpers.js";
+import { classNames } from "../../utilities/props.js";
 import { GlobalColorMode, PrivateTheme } from "../Theme/index.js";
 import { ToastProvider } from "../Toast/index.js";
 import { useGlobalColorMode } from "../Theme/useTheme.js";

package/dist/components/Resizable/Resizable.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
-import { classNames } from "../../utilities/helpers.js";
+import { classNames } from "../../utilities/props.js";
 import useDrag from "../../hooks/_private/useDrag.js";
 import View from "../View/index.js";
 import s from "./Resizable.module.css";

package/dist/components/Scrim/Scrim.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { classNames } from "../../utilities/helpers.js";
+import { classNames } from "../../utilities/props.js";
 import s from "./Scrim.module.css";
 const Scrim = (props) => {
     const { children, backgroundSlot, position = "cover", attributes, className, scrimClassName, } = props;

package/dist/components/ScrollArea/ScrollArea.js

@@ -1,7 +1,7 @@
 "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 { classNames } from "../../utilities/props.js";
 import { disableUserSelect, enableUserSelect } from "../../utilities/dom/index.js";
 import getHeightStyles from "../../styles/height/index.js";
 import getMaxHeightStyles from "../../styles/maxHeight/index.js";
@@ -70,14 +70,11 @@ const ScrollArea = forwardRef((props, ref) => {
     const [scrollRatio, setScrollRatio] = React.useState({ x: 1, y: 1 });
     const [scrollPosition, setScrollPosition] = React.useState({ x: 0, y: 0 });
     const scrollableRef = React.useRef(null);
-    const contentRef = React.useRef(null);
+    const rootRef = React.useRef(null);
     const heightStyles = getHeightStyles(height);
     const maxHeightStyles = getMaxHeightStyles(maxHeight);
-    const rootClassNames = classNames(s.root, scrollbarDisplay && s[`--display-${scrollbarDisplay}`], heightStyles?.classNames, maxHeightStyles?.classNames, className);
-    const rootVariables = {
-        ...heightStyles?.variables,
-        ...maxHeightStyles?.variables,
-    };
+    const rootClassNames = classNames(s.root, scrollbarDisplay && s[`--display-${scrollbarDisplay}`], heightStyles?.classNames, className);
+    const contentClassNames = classNames(s.content, maxHeightStyles?.classNames);
     const updateScroll = React.useCallback(() => {
         const scrollableEl = scrollableRef.current;
         if (!scrollableEl)
@@ -127,14 +124,14 @@ const ScrollArea = forwardRef((props, ref) => {
         updateScroll();
     }, [updateScroll]);
     useIsomorphicLayoutEffect(() => {
-        const contentEl = contentRef.current;
-        if (!contentEl)
+        const rootEl = rootRef.current;
+        if (!rootEl)
             return;
         const observer = new ResizeObserver(updateScroll);
-        observer.observe(contentEl);
+        observer.observe(rootEl);
         return () => observer.disconnect();
     }, [updateScroll]);
-    return (_jsxs("div", { ...attributes, className: rootClassNames, style: rootVariables, children: [_jsx("div", { className: s.scrollable, ref: scrollableRef, onScroll: handleScroll, tabIndex: 0, children: _jsx("div", { className: s.content, ref: contentRef, 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 }))] }));
+    return (_jsxs("div", { ...attributes, ref: rootRef, className: rootClassNames, style: { ...heightStyles?.variables }, children: [_jsx("div", { className: s.scrollable, ref: scrollableRef, onScroll: handleScroll, tabIndex: 0, children: _jsx("div", { className: contentClassNames, style: { ...maxHeightStyles?.variables }, 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 }))] }));
 });
 ScrollArea.displayName = "ScrollArea";
 export default ScrollArea;

package/dist/components/ScrollArea/ScrollArea.module.css

@@ -1 +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);height:100%;overflow:hidden;position:relative}[data-rs-keyboard] .root:has(.scrollable:focus){box-shadow:var(--rs-focus-shadow)}.scrollable{height:100%;overflow:auto;position:relative;scrollbar-width:none;-webkit-overflow-scrolling:touch}.scrollable::-webkit-scrollbar{display:none;height:0;width:0}.content{display:inline-block;min-height:100%;min-width:100%;vertical-align:top}.scrollbar{box-sizing:initial;padding:var(--rs-scroll-area-thumb-offset);position:absolute}.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>.scrollbar .thumb:before,.--display-visible .thumb:before{opacity:.2}.--display-hover:hover .--scrollbar-dragging .thumb:before,.--scrollbar-dragging .thumb:before,.scrollbar:hover .thumb:before{opacity:.32}
+.root{--rs-scroll-area-thumb-size:calc(var(--rs-unit-x1) * 1.5);--rs-scroll-area-thumb-offset:calc(var(--rs-unit-x1) / 2);height:100%;overflow:hidden;position:relative}[data-rs-keyboard] .root:has(.scrollable:focus){box-shadow:var(--rs-focus-shadow)}.scrollable{height:100%;outline:none;overflow:auto;position:relative;scrollbar-width:none;-webkit-overflow-scrolling:touch}.scrollable::-webkit-scrollbar{display:none;height:0;width:0}.content{display:inline-block;min-height:100%;min-width:100%;vertical-align:top}.scrollbar{box-sizing:initial;padding:var(--rs-scroll-area-thumb-offset);position:absolute}.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>.scrollbar .thumb:before,.--display-visible .thumb:before{opacity:.2}.--display-hover:hover .--scrollbar-dragging .thumb:before,.--scrollbar-dragging .thumb:before,.scrollbar:hover .thumb:before{opacity:.32}

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

@@ -1,5 +1,6 @@
 import React from "react";
 import { StoryObj } from "@storybook/react";
+import { Mock } from "@storybook/test";
 declare const _default: {
     title: string;
     component: React.ForwardRefExoticComponent<import("./..").ScrollAreaProps & React.RefAttributes<HTMLDivElement>>;
@@ -13,16 +14,24 @@ declare const _default: {
     };
 };
 export default _default;
-export declare const direction: {
+export declare const base: {
     name: string;
     render: () => React.JSX.Element;
 };
-export declare const visibility: {
+export declare const scrollbarDisplay: {
     name: string;
     render: () => React.JSX.Element;
 };
-export declare const composition: {
+export declare const height: {
     name: string;
     render: () => React.JSX.Element;
 };
-export declare const dynamicHeight: StoryObj;
+export declare const onScroll: StoryObj<{
+    handleScroll: Mock;
+}>;
+export declare const className: StoryObj;
+export declare const testNested: {
+    name: string;
+    render: () => React.JSX.Element;
+};
+export declare const testDynamicHeight: StoryObj;