reshaped 3.6.0-canary.6 → 3.6.0-canary.8

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

@@ -139,21 +139,39 @@ export const value = {
     },
 };
 export const minMax = {
-    name: "min, max, step",
-    render: () => (<NumberField name="test-name" defaultValue={6} min={5} max={15} step={5} increaseAriaLabel="Increase" decreaseAriaLabel="Decrease" inputAttributes={{ "aria-label": "Label" }}/>),
+    name: "min, max",
+    render: () => (<NumberField name="test-name" defaultValue={6} min={5} max={10} increaseAriaLabel="Increase" decreaseAriaLabel="Decrease" inputAttributes={{ "aria-label": "Label" }}/>),
     play: async ({ canvas }) => {
         const input = canvas.getByRole("textbox");
         const [increaseButton, decreaseButton] = canvas.getAllByRole("button");
         expect(input).toHaveValue("6");
         await userEvent.click(increaseButton);
-        expect(input).toHaveValue("11");
+        await userEvent.click(increaseButton);
+        await userEvent.click(increaseButton);
+        await userEvent.click(increaseButton);
+        await userEvent.click(increaseButton);
+        expect(input).toHaveValue("10");
+        await userEvent.click(decreaseButton);
+        await userEvent.click(decreaseButton);
+        await userEvent.click(decreaseButton);
+        await userEvent.click(decreaseButton);
         await userEvent.click(decreaseButton);
         await userEvent.click(decreaseButton);
         expect(input).toHaveValue("5");
+    },
+};
+export const step = {
+    name: "step",
+    render: () => (<NumberField name="test-name" defaultValue={6} step={0.5} increaseAriaLabel="Increase" decreaseAriaLabel="Decrease" inputAttributes={{ "aria-label": "Label" }}/>),
+    play: async ({ canvas }) => {
+        const input = canvas.getByRole("textbox");
+        const [increaseButton, decreaseButton] = canvas.getAllByRole("button");
+        expect(input).toHaveValue("6");
         await userEvent.click(increaseButton);
-        await userEvent.click(increaseButton);
-        await userEvent.click(increaseButton);
-        expect(input).toHaveValue("15");
+        expect(input).toHaveValue("6.5");
+        await userEvent.click(decreaseButton);
+        await userEvent.click(decreaseButton);
+        expect(input).toHaveValue("5.5");
     },
 };
 export const className = {

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

@@ -18,7 +18,7 @@ export const base = {
         const overlayToggle = useToggle(false);
         return (<Example>
 				<Example.Item title="base">
-					<Button onClick={overlayToggle.toggle}>Open overlay</Button>
+					<Button onClick={overlayToggle.activate}>Open overlay</Button>
 					<Overlay active={overlayToggle.active} onClose={overlayToggle.deactivate}>
 						Overlay content
 					</Overlay>
@@ -36,7 +36,7 @@ export const transparent = {
         const overlayToggle = useToggle(false);
         return (<Example>
 				<Example.Item title="base">
-					<Button onClick={overlayToggle.toggle}>Open overlay</Button>
+					<Button onClick={overlayToggle.activate}>Open overlay</Button>
 					<Overlay active={overlayToggle.active} onClose={overlayToggle.deactivate} transparent>
 						Overlay content
 					</Overlay>
@@ -54,7 +54,7 @@ export const blurred = {
         const overlayToggle = useToggle(false);
         return (<Example>
 				<Example.Item title="base">
-					<Button onClick={overlayToggle.toggle}>Open overlay</Button>
+					<Button onClick={overlayToggle.activate}>Open overlay</Button>
 					<Overlay active={overlayToggle.active} onClose={overlayToggle.deactivate} blurred>
 						Overlay content
 					</Overlay>

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

@@ -36,7 +36,7 @@ export const handlers = {
     render: (args) => {
         const overlayToggle = useToggle();
         return (<>
-				<Button onClick={overlayToggle.toggle}>Open overlay</Button>
+				<Button onClick={() => overlayToggle.toggle()}>Open overlay</Button>
 				<Overlay active={overlayToggle.active} onClose={(closeArgs) => {
                 overlayToggle.deactivate();
                 args.handleClose(closeArgs);

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

@@ -1 +1 @@
-.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)}}
+.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}@media (hover:hover) and (pointer:fine){.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/Resizable/Resizable.js

@@ -2,31 +2,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
 import { classNames } from "../../utilities/props.js";
-import useDrag from "../../hooks/_private/useDrag.js";
 import View from "../View/index.js";
+import ResizableHandle, { ResizableHandleContext } from "./ResizableHandle.js";
 import s from "./Resizable.module.css";
-const PrivateResizableHandle = (props) => {
-    const { containerRef, onDrag, index, direction, children } = props;
-    const { ref, active } = useDrag((args) => {
-        onDrag({ ...args, index });
-    }, {
-        containerRef,
-        orientation: direction === "row" ? "horizontal" : "vertical",
-    });
-    const handleClassNames = classNames(s.handle, active && s["handle--dragging"]);
-    if (children)
-        return _jsx(View.Item, { children: children({ ref }) });
-    return (_jsx(View.Item, { className: handleClassNames, attributes: {
-            role: "button",
-            tabIndex: 0,
-            "aria-hidden": true,
-            ref: (el) => {
-                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                // @ts-ignore
-                ref.current = el;
-            },
-        } }));
-};
 const PrivateResizableItem = React.forwardRef((props, ref) => {
     const { children, defaultSize, minSize, maxSize } = props;
     const itemRef = React.useRef(null);
@@ -135,10 +113,10 @@ const Resizable = (props) => {
     }, [horizontal]);
     const output = React.Children.map(children, (child) => {
         const isComponent = React.isValidElement(child);
-        if (isComponent && child.type === Resizable.Handle && child.props) {
-            return (_jsx(PrivateResizableHandle, { ...child.props, containerRef: containerRef, index: currentHandleIndex++, onDrag: onDrag, direction: direction }));
+        if (isComponent && child.props && child.type !== Resizable.Item) {
+            return (_jsx(ResizableHandleContext.Provider, { value: { containerRef, index: currentHandleIndex++, onDrag, direction }, children: child }));
         }
-        if (isComponent && child.type === Resizable.Item && child.props) {
+        if (isComponent && child.props && child.type === Resizable.Item) {
             const index = currentHandleIndex;
             return (_jsx(PrivateResizableItem, { ...child.props, index: currentItemIndex++, ref: (el) => {
                     itemsRef.current[index] = { el, props: child.props };
@@ -149,6 +127,6 @@ const Resizable = (props) => {
     return (_jsx(View, { attributes: { ...attributes, ref: containerRef }, className: rootClassNames, height: height, direction: direction, align: "stretch", gap: gap, children: output }));
 };
 Resizable.Item = () => null;
-Resizable.Handle = () => null;
+Resizable.Handle = ResizableHandle;
 Resizable.displayName = "Resizable";
 export default Resizable;

package/dist/components/Resizable/Resizable.module.css

@@ -1 +1 @@
-.item{--rs-resizable-default-size:none;--rs-resizable-min-size:0;--rs-resizable-max-size:100%;flex-grow:100;max-width:var(--rs-resizable-default-size);min-width:var(--rs-resizable-default-size);overflow:hidden}.handle{flex-shrink:0;position:relative}.handle:after,.handle:before{border-radius:999px;content:"";position:absolute}.handle:after{transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:opacity,background-color}.--variant-bordered .handle:after{background:var(--rs-color-border-neutral-faded)}.--variant-bordered .handle--dragging:after,.--variant-bordered .handle:hover:after,.--variant-borderless .handle:after,[data-rs-keyboard] .--variant-bordered .handle:focus:after{background:var(--rs-color-border-neutral)}.--variant-borderless .handle:after{opacity:0}.--variant-borderless .handle--dragging:after,.--variant-borderless .handle:hover:after,[data-rs-keyboard] .--variant-borderless .handle:focus:after{opacity:.6}body:has(.handle--dragging) .--variant-borderless .handle:not(.handle--dragging){opacity:0}body:has(.handle--dragging) .--variant-bordered .handle:not(.handle--dragging):after{background:var(--rs-color-border-neutral-faded)}body:has(.--direction-row>.handle--dragging){cursor:ew-resize}body:has(.--direction-column>.handle--dragging){cursor:ns-resize}.--direction-row>.handle{cursor:ew-resize}.--direction-row>.handle:after,.--direction-row>.handle:before{inset-block:0;inset-inline-start:50%;transform:translateX(-50%)}.--direction-row>.handle:before{width:var(--rs-unit-x8)}.--variant-borderless.--direction-row>.handle:after{width:var(--rs-unit-x1)}.--variant-bordered.--direction-row>.handle:after{width:1px}.--direction-row>.item[data-rs-resizable-item-mounted]{max-width:var(--rs-resizable-max-size);min-width:var(--rs-resizable-min-size)}.--direction-column>.handle{cursor:ns-resize}.--direction-column>.handle:after,.--direction-column>.handle:before{inset-block-start:50%;inset-inline:0;transform:translateY(-50%)}.--direction-column>.handle:before{height:var(--rs-unit-x8)}.--variant-borderless.--direction-column>.handle:after{height:var(--rs-unit-x1)}.--variant-bordered.--direction-column>.handle:after{height:1px}.--direction-column>.item[data-rs-resizable-item-mounted]{max-height:var(--rs-resizable-max-size);min-height:var(--rs-resizable-min-size)}
+.root{isolation:isolate}.item{--rs-resizable-default-size:none;--rs-resizable-min-size:0;--rs-resizable-max-size:100%;flex-grow:100;max-width:var(--rs-resizable-default-size);min-width:var(--rs-resizable-default-size);overflow:hidden}.handle{flex-shrink:0;position:relative;z-index:var(--rs-z-index-raised)}.handle:after,.handle:before{border-radius:999px;content:"";position:absolute}.handle:after{transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:opacity,background-color}.--variant-bordered .handle:after{background:var(--rs-color-border-neutral-faded)}.--variant-bordered .handle--dragging:after,.--variant-bordered .handle:hover:after,.--variant-borderless .handle:after,[data-rs-keyboard] .--variant-bordered .handle:focus:after{background:var(--rs-color-border-neutral)}.--variant-borderless .handle:after{opacity:0}.--variant-borderless .handle--dragging:after,.--variant-borderless .handle:hover:after,[data-rs-keyboard] .--variant-borderless .handle:focus:after{opacity:.6}body:has(.handle--dragging) .--variant-borderless .handle:not(.handle--dragging){opacity:0}body:has(.handle--dragging) .--variant-bordered .handle:not(.handle--dragging):after{background:var(--rs-color-border-neutral-faded)}body:has(.--direction-row>.handle--dragging){cursor:ew-resize}body:has(.--direction-column>.handle--dragging){cursor:ns-resize}.--direction-row>.handle{cursor:ew-resize}.--direction-row>.handle:after,.--direction-row>.handle:before{inset-block:0;inset-inline-start:50%;transform:translateX(-50%)}.--direction-row>.handle:before{width:var(--rs-unit-x6)}.--variant-borderless.--direction-row>.handle:after{width:var(--rs-unit-x1)}.--variant-bordered.--direction-row>.handle:after{width:1px}.--direction-row>.item[data-rs-resizable-item-mounted]{max-width:var(--rs-resizable-max-size);min-width:var(--rs-resizable-min-size)}.--direction-column>.handle{cursor:ns-resize}.--direction-column>.handle:after,.--direction-column>.handle:before{inset-block-start:50%;inset-inline:0;transform:translateY(-50%)}.--direction-column>.handle:before{height:var(--rs-unit-x6)}.--variant-borderless.--direction-column>.handle:after{height:var(--rs-unit-x1)}.--variant-bordered.--direction-column>.handle:after{height:1px}.--direction-column>.item[data-rs-resizable-item-mounted]{max-height:var(--rs-resizable-max-size);min-height:var(--rs-resizable-min-size)}

package/dist/components/Resizable/Resizable.types.d.ts

@@ -3,7 +3,8 @@ import type { ViewProps } from "../View";
 import type { UseDragCallbackArgs } from "../../hooks/_private/useDrag";
 export type Props = {
     variant?: "bordered" | "borderless";
-} & Pick<ViewProps, "children" | "className" | "attributes" | "height" | "direction" | "gap">;
+    direction?: Extract<ViewProps["direction"], "row" | "column">;
+} & Pick<ViewProps, "children" | "className" | "attributes" | "height" | "gap">;
 export type ItemProps = {
     children: React.ReactNode;
     minSize?: `${number}px`;
@@ -16,9 +17,11 @@ export type PrivateItemProps = ItemProps & {
 export type HandleProps = {
     children?: (attributes: {
         ref: React.RefObject<HTMLButtonElement | null>;
+    }, props: Pick<Props, "direction"> & {
+        status: "idle" | "dragging";
     }) => React.ReactNode;
 };
-export type PrivateHandleProps = HandleProps & {
+export type HandleContext = {
     containerRef: React.RefObject<HTMLDivElement | null>;
     index: number;
     onDrag: (args: UseDragCallbackArgs & {

package/dist/components/Resizable/ResizableHandle.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import type * as T from "./Resizable.types";
+export declare const ResizableHandleContext: React.Context<T.HandleContext>;
+declare const ResizableHandle: React.FC<T.HandleProps>;
+export default ResizableHandle;

package/dist/components/Resizable/ResizableHandle.js

@@ -0,0 +1,32 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from "react";
+import { classNames } from "../../utilities/props.js";
+import View from "../View/index.js";
+import useDrag from "../../hooks/_private/useDrag.js";
+import s from "./Resizable.module.css";
+export const ResizableHandleContext = React.createContext({});
+const ResizableHandle = (props) => {
+    const { children } = props;
+    const { containerRef, onDrag, index, direction } = React.useContext(ResizableHandleContext);
+    const { ref, active } = useDrag((args) => {
+        onDrag({ ...args, index });
+    }, {
+        containerRef,
+        orientation: direction === "row" ? "horizontal" : "vertical",
+    });
+    const handleClassNames = classNames(s.handle, active && s["handle--dragging"]);
+    if (children)
+        return (_jsx(View.Item, { children: children({ ref }, { direction, status: active ? "dragging" : "idle" }) }));
+    return (_jsx(View.Item, { className: handleClassNames, attributes: {
+            role: "button",
+            tabIndex: 0,
+            "aria-hidden": true,
+            ref: (el) => {
+                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                // @ts-ignore
+                ref.current = el;
+            },
+        } }));
+};
+export default ResizableHandle;

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

@@ -1,3 +1,4 @@
+import { StoryObj } from "@storybook/react-vite";
 declare const _default: {
     title: string;
     component: import("react").FC<import("./..").ResizableProps> & {
@@ -14,4 +15,24 @@ declare const _default: {
     };
 };
 export default _default;
-export declare const base: () => import("react").JSX.Element;
+export declare const direction: {
+    name: string;
+    render: () => import("react").JSX.Element;
+};
+export declare const children: {
+    name: string;
+    render: () => import("react").JSX.Element;
+};
+export declare const variant: {
+    name: string;
+    render: () => import("react").JSX.Element;
+};
+export declare const size: {
+    name: string;
+    render: () => import("react").JSX.Element;
+};
+export declare const layout: {
+    name: string;
+    render: () => import("react").JSX.Element;
+};
+export declare const className: StoryObj;

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

@@ -1,3 +1,4 @@
+import { expect } from "storybook/test";
 import { Example } from "../../../utilities/storybook/index.js";
 import Resizable from "../index.js";
 import View from "../../View/index.js";
@@ -7,7 +8,7 @@ export default {
     component: Resizable,
     parameters: {
         iframe: {
-            url: "https://reshaped.so/docs/utilities/Resizable",
+            url: "https://reshaped.so/docs/utilities/resizable",
         },
         // Skip because of the aria-hidden applied to buttons, they're not needed for the screen reader navigation
         a11y: {
@@ -15,82 +16,170 @@ export default {
         },
     },
 };
-export const base = () => (<Example>
-		<Example.Item>
-			<Resizable height="300px" gap={4}>
-				<Resizable.Item minSize="100px" defaultSize="200px">
-					<View backgroundColor="neutral-faded" borderRadius="medium" align="center" justify="center" height="100%">
-						Panel
-					</View>
-				</Resizable.Item>
-				<Resizable.Handle />
-				<Resizable.Item>
-					<View backgroundColor="neutral-faded" borderRadius="medium" align="center" justify="center" height="100%">
-						Panel
-					</View>
-				</Resizable.Item>
-				<Resizable.Handle />
-				<Resizable.Item>
-					<Resizable height="100%" direction="column">
-						<Resizable.Item minSize="50px" maxSize="100px">
-							<View backgroundColor="neutral-faded" borderRadius="medium" align="center" justify="center" height="100%">
-								Panel
-							</View>
+const Panel = (props) => (<View backgroundColor="neutral-faded" borderRadius="medium" align="center" justify="center" height={props.height ?? "100%"}>
+		Panel
+	</View>);
+const Handle = () => {
+    return (<Resizable.Handle>
+			{(attributes, props) => (<View backgroundColor={props.status === "dragging" ? "primary" : "primary-faded"} padding={props.direction === "column" ? 1 : 8} height="100%" align="center" justify="center" borderRadius="small" animated>
+					<Button attributes={attributes} type="button">
+						Drag me
+					</Button>
+				</View>)}
+		</Resizable.Handle>);
+};
+export const direction = {
+    name: "direction",
+    render: () => {
+        return (<Example>
+				<Example.Item title="row">
+					<Resizable height="200px">
+						<Resizable.Item>
+							<Panel />
 						</Resizable.Item>
 						<Resizable.Handle />
 						<Resizable.Item>
-							<View backgroundColor="neutral-faded" borderRadius="medium" align="center" justify="center" height="100%">
-								Panel
-							</View>
+							<Panel />
 						</Resizable.Item>
-						<Resizable.Handle>
-							{(attributes) => (<View backgroundColor="primary-faded" padding={1} align="center" borderRadius="small">
-									<Button attributes={attributes} type="button">
-										Drag me
-									</Button>
-								</View>)}
-						</Resizable.Handle>
+						<Resizable.Handle />
 						<Resizable.Item>
-							<View backgroundColor="neutral-faded" borderRadius="medium" align="center" justify="center" height="100%">
-								Panel
-							</View>
+							<Panel />
 						</Resizable.Item>
 					</Resizable>
-				</Resizable.Item>
-			</Resizable>
-		</Example.Item>
+				</Example.Item>
+				<Example.Item title="column">
+					<Resizable height="400px" direction="column">
+						<Resizable.Item>
+							<Panel />
+						</Resizable.Item>
+						<Resizable.Handle />
+						<Resizable.Item>
+							<Panel />
+						</Resizable.Item>
+						<Resizable.Handle />
+						<Resizable.Item>
+							<Panel />
+						</Resizable.Item>
+					</Resizable>
+				</Example.Item>
 
-		<Example.Item>
-			<Resizable height="300px" gap={0} variant="bordered">
-				<Resizable.Item minSize="100px" defaultSize="200px">
-					<View align="center" justify="center" height="100%">
-						Panel
-					</View>
-				</Resizable.Item>
-				<Resizable.Handle />
-				<Resizable.Item>
-					<View align="center" justify="center" height="100%">
-						Panel
-					</View>
-				</Resizable.Item>
-				<Resizable.Handle />
-				<Resizable.Item>
-					<Resizable height="100%" direction="column" variant="bordered" gap={0}>
-						<Resizable.Item minSize="50px" maxSize="100px">
-							<View align="center" justify="center" height="100%">
-								Panel
-							</View>
+				{/* Test that page doesn't scroll on dragging */}
+				<div style={{ height: 2000 }}/>
+			</Example>);
+    },
+};
+export const children = {
+    name: "children",
+    render: () => {
+        return (<Example>
+				<Example.Item title="render props, row">
+					<Resizable height="200px">
+						<Resizable.Item>
+							<Panel />
 						</Resizable.Item>
 						<Resizable.Handle />
 						<Resizable.Item>
-							<View align="center" justify="center" height="100%">
-								Panel
-							</View>
+							<Panel />
+						</Resizable.Item>
+						<Handle />
+						<Resizable.Item>
+							<Panel />
+						</Resizable.Item>
+					</Resizable>
+				</Example.Item>
+				<Example.Item title="render props, column">
+					<Resizable height="400px" direction="column">
+						<Resizable.Item>
+							<Panel />
+						</Resizable.Item>
+						<Resizable.Handle />
+						<Resizable.Item>
+							<Panel />
+						</Resizable.Item>
+						<Handle />
+						<Resizable.Item>
+							<Panel />
 						</Resizable.Item>
 					</Resizable>
+				</Example.Item>
+			</Example>);
+    },
+};
+export const variant = {
+    name: "variant",
+    render: () => (<Example>
+			<Example.Item title="bordered, row">
+				<Resizable height="200px" variant="bordered">
+					<Resizable.Item>
+						<Panel />
+					</Resizable.Item>
+					<Resizable.Handle />
+					<Resizable.Item>
+						<Panel />
+					</Resizable.Item>
+					<Resizable.Handle />
+					<Resizable.Item>
+						<Panel />
+					</Resizable.Item>
+				</Resizable>
+			</Example.Item>
+			<Example.Item title="bordered, column">
+				<Resizable height="400px" direction="column" variant="bordered">
+					<Resizable.Item>
+						<Panel />
+					</Resizable.Item>
+					<Resizable.Handle />
+					<Resizable.Item>
+						<Panel />
+					</Resizable.Item>
+					<Resizable.Handle />
+					<Resizable.Item>
+						<Panel />
+					</Resizable.Item>
+				</Resizable>
+			</Example.Item>
+		</Example>),
+};
+export const size = {
+    name: "minSize, maxSize, defaultSize",
+    render: () => (<Resizable className="test-classname" attributes={{ id: "test-id" }} height="200px">
+			<Resizable.Item>
+				<Panel />
+			</Resizable.Item>
+			<Resizable.Handle />
+			<Resizable.Item minSize="200px" maxSize="500px" defaultSize="300px">
+				<Panel />
+			</Resizable.Item>
+		</Resizable>),
+};
+export const layout = {
+    name: "height, gap",
+    render: () => (<Resizable height="100px" gap={8}>
+			<Resizable.Item>
+				<Panel />
+			</Resizable.Item>
+			<Resizable.Handle />
+			<Resizable.Item>
+				<Panel />
+			</Resizable.Item>
+		</Resizable>),
+};
+export const className = {
+    name: "className, attributes",
+    render: () => (<div data-testid="root">
+			<Resizable className="test-classname" attributes={{ id: "test-id" }} height="200px">
+				<Resizable.Item>
+					<Panel />
+				</Resizable.Item>
+				<Resizable.Handle />
+				<Resizable.Item>
+					<Panel />
 				</Resizable.Item>
 			</Resizable>
-		</Example.Item>
-
-		<div style={{ height: 2000 }}/>
-	</Example>);
+		</div>),
+    play: async ({ canvas }) => {
+        const root = canvas.getByTestId("root").firstChild;
+        expect(root).toHaveClass("test-classname");
+        expect(root).toHaveAttribute("id", "test-id");
+    },
+};

package/dist/components/Select/Select.js

@@ -45,7 +45,7 @@ const Select = (props) => {
                             ...inputAttributes,
                             onFocus: onFocus || inputAttributes?.onFocus,
                             onBlur: onBlur || inputAttributes?.onBlur,
-                        }, children: [startContent, children || (placeholder ? _jsx(Text, { color: "neutral-faded", children: placeholder }) : null)] }), _jsx("input", { type: "hidden", value: value, name: name })] })), _jsx("div", { className: s.arrow, children: _jsx(Icon, { svg: IconArrow, color: disabled ? "disabled" : "neutral-faded", size: responsivePropDependency(size, (size) => {
+                        }, children: [startContent, children ? _jsx(Text, { maxLines: 1, children: children }) : null, placeholder && !children ? _jsx(Text, { color: "neutral-faded", children: placeholder }) : null] }), _jsx("input", { type: "hidden", value: value, name: name })] })), _jsx("div", { className: s.arrow, children: _jsx(Icon, { svg: IconArrow, color: disabled ? "disabled" : "neutral-faded", size: responsivePropDependency(size, (size) => {
                         return size === "large" || size === "xlarge" ? 5 : 4;
                     }) }) })] }));
 };

package/dist/components/Select/Select.module.css

@@ -1 +1 @@
-.root{background:var(--rs-color-background-elevation-base);border:1px solid var(--rs-color-border-neutral);display:flex;overflow:hidden;padding:calc(var(--rs-unit-x1) - 1px) 0;position:relative;z-index:0}.root:focus-within{border-color:var(--rs-color-border-primary);box-shadow:0 0 0 1px var(--rs-color-border-primary)}.input{align-items:center;-webkit-appearance:none;appearance:none;background:none;border:0;box-sizing:border-box;color:var(--rs-color-foreground-neutral);cursor:pointer;display:flex;flex-grow:1;font-family:var(--rs-font-family-body);font-weight:var(--rs-font-weight-regular);outline:none;padding-inline-end:calc(var(--rs-select-chevron-size) + var(--rs-select-gap) * 2 + var(--rs-unit-x1));padding-inline-start:var(--rs-select-gap);position:relative;width:100%;z-index:1}.input::-ms-expand{display:none}.slot{align-items:center;display:flex;flex-shrink:0;padding-inline-start:var(--rs-select-gap);position:relative;z-index:5}.input .slot{padding-inline-end:var(--rs-select-gap);padding-inline-start:0}.arrow{color:var(--rs-color-foreground-neutral-faded);display:flex;inset-block-start:50%;inset-inline-end:var(--rs-select-gap);pointer-events:none;position:absolute;transform:translateY(-50%);z-index:5}.--size-small{--rs-select-gap:var(--rs-unit-x2);--rs-select-chevron-size:var(--rs-unit-x4);border-radius:var(--rs-radius-small)}.--size-small .input{font-size:var(--rs-font-size-body-3);letter-spacing:var(--rs-letter-spacing-body-3);line-height:var(--rs-line-height-body-3);padding-block:0}.--size-medium{--rs-select-gap:var(--rs-unit-x2);--rs-select-chevron-size:var(--rs-unit-x4);border-radius:var(--rs-radius-small)}.--size-medium .input{font-size:var(--rs-font-size-body-3);letter-spacing:var(--rs-letter-spacing-body-3);line-height:var(--rs-line-height-body-3);padding-block:var(--rs-unit-x1)}.--size-large{--rs-select-gap:var(--rs-unit-x3);--rs-select-chevron-size:var(--rs-unit-x5);border-radius:var(--rs-radius-medium)}.--size-large .input{font-size:var(--rs-font-size-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2);padding-block:var(--rs-unit-x2)}.--size-xlarge{--rs-select-gap:var(--rs-unit-x4);--rs-select-chevron-size:var(--rs-unit-x5);border-radius:var(--rs-radius-medium)}.--size-xlarge .input{font-size:var(--rs-font-size-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2);padding-block:var(--rs-unit-x3)}.root.--variant-faded{background:var(--rs-color-background-neutral-faded);border-color:transparent}.root.--variant-faded:focus-within{border-color:var(--rs-color-border-primary)}.root.--variant-headless{background:transparent;border-color:transparent}.root.--variant-headless.--status-error,.root.--variant-headless.--status-error:focus-within,.root.--variant-headless:focus-within{border-color:transparent;box-shadow:none}.root.--status-error{border-color:var(--rs-color-border-critical)}.root.--status-error:focus-within{border-color:var(--rs-color-border-primary)}.root.--placeholder .input{color:var(--rs-color-foreground-neutral-faded)}.root.--disabled{background:var(--rs-color-background-disabled-faded);border-color:var(--rs-color-border-disabled)}.root.--disabled .arrow,.root.--disabled .input{color:var(--rs-color-foreground-disabled);cursor:not-allowed}@media (--rs-viewport-s ) and (hover:none){.input{font-size:var(--rs-font-size-body-2)!important}}@media (--rs-viewport-m ){.--size-small--m{--rs-select-gap:var(--rs-unit-x2);--rs-select-chevron-size:var(--rs-unit-x4);border-radius:var(--rs-radius-small)}.--size-small--m .input{font-size:var(--rs-font-size-body-3);letter-spacing:var(--rs-letter-spacing-body-3);line-height:var(--rs-line-height-body-3);padding-block:0}.--size-medium--m{--rs-select-gap:var(--rs-unit-x2);--rs-select-chevron-size:var(--rs-unit-x4);border-radius:var(--rs-radius-small)}.--size-medium--m .input{font-size:var(--rs-font-size-body-3);letter-spacing:var(--rs-letter-spacing-body-3);line-height:var(--rs-line-height-body-3);padding-block:var(--rs-unit-x1)}.--size-large--m{--rs-select-gap:var(--rs-unit-x3);--rs-select-chevron-size:var(--rs-unit-x5);border-radius:var(--rs-radius-medium)}.--size-large--m .input{font-size:var(--rs-font-size-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2);padding-block:var(--rs-unit-x2)}.--size-xlarge--m{--rs-select-gap:var(--rs-unit-x4);--rs-select-chevron-size:var(--rs-unit-x5);border-radius:var(--rs-radius-medium)}.--size-xlarge--m .input{font-size:var(--rs-font-size-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2);padding-block:var(--rs-unit-x3)}}@media (--rs-viewport-l ){.--size-small--l{--rs-select-gap:var(--rs-unit-x2);--rs-select-chevron-size:var(--rs-unit-x4);border-radius:var(--rs-radius-small)}.--size-small--l .input{font-size:var(--rs-font-size-body-3);letter-spacing:var(--rs-letter-spacing-body-3);line-height:var(--rs-line-height-body-3);padding-block:0}.--size-medium--l{--rs-select-gap:var(--rs-unit-x2);--rs-select-chevron-size:var(--rs-unit-x4);border-radius:var(--rs-radius-small)}.--size-medium--l .input{font-size:var(--rs-font-size-body-3);letter-spacing:var(--rs-letter-spacing-body-3);line-height:var(--rs-line-height-body-3);padding-block:var(--rs-unit-x1)}.--size-large--l{--rs-select-gap:var(--rs-unit-x3);--rs-select-chevron-size:var(--rs-unit-x5);border-radius:var(--rs-radius-medium)}.--size-large--l .input{font-size:var(--rs-font-size-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2);padding-block:var(--rs-unit-x2)}.--size-xlarge--l{--rs-select-gap:var(--rs-unit-x4);--rs-select-chevron-size:var(--rs-unit-x5);border-radius:var(--rs-radius-medium)}.--size-xlarge--l .input{font-size:var(--rs-font-size-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2);padding-block:var(--rs-unit-x3)}}@media (--rs-viewport-xl ){.--size-small--xl{--rs-select-gap:var(--rs-unit-x2);--rs-select-chevron-size:var(--rs-unit-x4);border-radius:var(--rs-radius-small)}.--size-small--xl .input{font-size:var(--rs-font-size-body-3);letter-spacing:var(--rs-letter-spacing-body-3);line-height:var(--rs-line-height-body-3);padding-block:0}.--size-medium--xl{--rs-select-gap:var(--rs-unit-x2);--rs-select-chevron-size:var(--rs-unit-x4);border-radius:var(--rs-radius-small)}.--size-medium--xl .input{font-size:var(--rs-font-size-body-3);letter-spacing:var(--rs-letter-spacing-body-3);line-height:var(--rs-line-height-body-3);padding-block:var(--rs-unit-x1)}.--size-large--xl{--rs-select-gap:var(--rs-unit-x3);--rs-select-chevron-size:var(--rs-unit-x5);border-radius:var(--rs-radius-medium)}.--size-large--xl .input{font-size:var(--rs-font-size-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2);padding-block:var(--rs-unit-x2)}.--size-xlarge--xl{--rs-select-gap:var(--rs-unit-x4);--rs-select-chevron-size:var(--rs-unit-x5);border-radius:var(--rs-radius-medium)}.--size-xlarge--xl .input{font-size:var(--rs-font-size-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2);padding-block:var(--rs-unit-x3)}}
+.root{background:var(--rs-color-background-elevation-base);border:1px solid var(--rs-color-border-neutral);display:flex;overflow:hidden;padding:calc(var(--rs-unit-x1) - 1px) 0;position:relative;z-index:0}.root:focus-within{border-color:var(--rs-color-border-primary);box-shadow:0 0 0 1px var(--rs-color-border-primary)}.input{align-items:center;-webkit-appearance:none;appearance:none;background:none;border:0;box-sizing:border-box;color:var(--rs-color-foreground-neutral);cursor:pointer;display:flex;flex-grow:1;font-family:var(--rs-font-family-body);font-weight:var(--rs-font-weight-regular);outline:none;padding-inline-end:calc(var(--rs-select-chevron-size) + var(--rs-select-gap) * 2 + var(--rs-unit-x1));padding-inline-start:var(--rs-select-gap);position:relative;text-overflow:ellipsis;width:100%;z-index:1}.input::-ms-expand{display:none}.slot{align-items:center;display:flex;flex-shrink:0;padding-inline-start:var(--rs-select-gap);position:relative;z-index:5}.input .slot{padding-inline-end:var(--rs-select-gap);padding-inline-start:0}.arrow{color:var(--rs-color-foreground-neutral-faded);display:flex;inset-block-start:50%;inset-inline-end:var(--rs-select-gap);pointer-events:none;position:absolute;transform:translateY(-50%);z-index:5}.--size-small{--rs-select-gap:var(--rs-unit-x2);--rs-select-chevron-size:var(--rs-unit-x4);border-radius:var(--rs-radius-small)}.--size-small .input{font-size:var(--rs-font-size-body-3);letter-spacing:var(--rs-letter-spacing-body-3);line-height:var(--rs-line-height-body-3);padding-block:0}.--size-medium{--rs-select-gap:var(--rs-unit-x2);--rs-select-chevron-size:var(--rs-unit-x4);border-radius:var(--rs-radius-small)}.--size-medium .input{font-size:var(--rs-font-size-body-3);letter-spacing:var(--rs-letter-spacing-body-3);line-height:var(--rs-line-height-body-3);padding-block:var(--rs-unit-x1)}.--size-large{--rs-select-gap:var(--rs-unit-x3);--rs-select-chevron-size:var(--rs-unit-x5);border-radius:var(--rs-radius-medium)}.--size-large .input{font-size:var(--rs-font-size-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2);padding-block:var(--rs-unit-x2)}.--size-xlarge{--rs-select-gap:var(--rs-unit-x4);--rs-select-chevron-size:var(--rs-unit-x5);border-radius:var(--rs-radius-medium)}.--size-xlarge .input{font-size:var(--rs-font-size-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2);padding-block:var(--rs-unit-x3)}.root.--variant-faded{background:var(--rs-color-background-neutral-faded);border-color:transparent}.root.--variant-faded:focus-within{border-color:var(--rs-color-border-primary)}.root.--variant-headless{background:transparent;border-color:transparent}.root.--variant-headless.--status-error,.root.--variant-headless.--status-error:focus-within,.root.--variant-headless:focus-within{border-color:transparent;box-shadow:none}.root.--status-error{border-color:var(--rs-color-border-critical)}.root.--status-error:focus-within{border-color:var(--rs-color-border-primary)}.root.--placeholder .input{color:var(--rs-color-foreground-neutral-faded)}.root.--disabled{background:var(--rs-color-background-disabled-faded);border-color:var(--rs-color-border-disabled)}.root.--disabled .arrow,.root.--disabled .input{color:var(--rs-color-foreground-disabled);cursor:not-allowed}@media (--rs-viewport-s ) and (hover:none){.input{font-size:var(--rs-font-size-body-2)!important}}@media (--rs-viewport-m ){.--size-small--m{--rs-select-gap:var(--rs-unit-x2);--rs-select-chevron-size:var(--rs-unit-x4);border-radius:var(--rs-radius-small)}.--size-small--m .input{font-size:var(--rs-font-size-body-3);letter-spacing:var(--rs-letter-spacing-body-3);line-height:var(--rs-line-height-body-3);padding-block:0}.--size-medium--m{--rs-select-gap:var(--rs-unit-x2);--rs-select-chevron-size:var(--rs-unit-x4);border-radius:var(--rs-radius-small)}.--size-medium--m .input{font-size:var(--rs-font-size-body-3);letter-spacing:var(--rs-letter-spacing-body-3);line-height:var(--rs-line-height-body-3);padding-block:var(--rs-unit-x1)}.--size-large--m{--rs-select-gap:var(--rs-unit-x3);--rs-select-chevron-size:var(--rs-unit-x5);border-radius:var(--rs-radius-medium)}.--size-large--m .input{font-size:var(--rs-font-size-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2);padding-block:var(--rs-unit-x2)}.--size-xlarge--m{--rs-select-gap:var(--rs-unit-x4);--rs-select-chevron-size:var(--rs-unit-x5);border-radius:var(--rs-radius-medium)}.--size-xlarge--m .input{font-size:var(--rs-font-size-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2);padding-block:var(--rs-unit-x3)}}@media (--rs-viewport-l ){.--size-small--l{--rs-select-gap:var(--rs-unit-x2);--rs-select-chevron-size:var(--rs-unit-x4);border-radius:var(--rs-radius-small)}.--size-small--l .input{font-size:var(--rs-font-size-body-3);letter-spacing:var(--rs-letter-spacing-body-3);line-height:var(--rs-line-height-body-3);padding-block:0}.--size-medium--l{--rs-select-gap:var(--rs-unit-x2);--rs-select-chevron-size:var(--rs-unit-x4);border-radius:var(--rs-radius-small)}.--size-medium--l .input{font-size:var(--rs-font-size-body-3);letter-spacing:var(--rs-letter-spacing-body-3);line-height:var(--rs-line-height-body-3);padding-block:var(--rs-unit-x1)}.--size-large--l{--rs-select-gap:var(--rs-unit-x3);--rs-select-chevron-size:var(--rs-unit-x5);border-radius:var(--rs-radius-medium)}.--size-large--l .input{font-size:var(--rs-font-size-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2);padding-block:var(--rs-unit-x2)}.--size-xlarge--l{--rs-select-gap:var(--rs-unit-x4);--rs-select-chevron-size:var(--rs-unit-x5);border-radius:var(--rs-radius-medium)}.--size-xlarge--l .input{font-size:var(--rs-font-size-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2);padding-block:var(--rs-unit-x3)}}@media (--rs-viewport-xl ){.--size-small--xl{--rs-select-gap:var(--rs-unit-x2);--rs-select-chevron-size:var(--rs-unit-x4);border-radius:var(--rs-radius-small)}.--size-small--xl .input{font-size:var(--rs-font-size-body-3);letter-spacing:var(--rs-letter-spacing-body-3);line-height:var(--rs-line-height-body-3);padding-block:0}.--size-medium--xl{--rs-select-gap:var(--rs-unit-x2);--rs-select-chevron-size:var(--rs-unit-x4);border-radius:var(--rs-radius-small)}.--size-medium--xl .input{font-size:var(--rs-font-size-body-3);letter-spacing:var(--rs-letter-spacing-body-3);line-height:var(--rs-line-height-body-3);padding-block:var(--rs-unit-x1)}.--size-large--xl{--rs-select-gap:var(--rs-unit-x3);--rs-select-chevron-size:var(--rs-unit-x5);border-radius:var(--rs-radius-medium)}.--size-large--xl .input{font-size:var(--rs-font-size-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2);padding-block:var(--rs-unit-x2)}.--size-xlarge--xl{--rs-select-gap:var(--rs-unit-x4);--rs-select-chevron-size:var(--rs-unit-x5);border-radius:var(--rs-radius-medium)}.--size-xlarge--xl .input{font-size:var(--rs-font-size-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2);padding-block:var(--rs-unit-x3)}}

package/dist/components/Tabs/Tabs.module.css

@@ -1 +1 @@
-@property --rs-tabs-mid-l{syntax:"<length>";initial-value:-24px;inherits:false}@property --rs-tabs-stop-l{syntax:"<length>";initial-value:0;inherits:false}@property --rs-tabs-stop-r{syntax:"<length-percentage>";initial-value:100%;inherits:false}@property --rs-tabs-mid-r{syntax:"<length-percentage>";initial-value:calc(100% + 24px);inherits:false}.root{box-sizing:initial;max-width:100%}.list,.root{position:relative}.list{--rs-tabs-gap:var(--rs-unit-x6);gap:var(--rs-tabs-gap)}.inner{mask-image:linear-gradient(to right,transparent 0,transparent var(--rs-tabs-mid-l),#000 var(--rs-tabs-stop-l),#000 var(--rs-tabs-stop-r),transparent var(--rs-tabs-mid-r),transparent 100%);transition:var(--rs-duration-medium) var(--rs-easing-decelerate);transition-property:--rs-tabs-stop-l,--rs-tabs-stop-r,--rs-tabs-mid-l,--rs-tabs-mid-r}.inner:after{background-color:var(--rs-color-border-neutral-faded);content:"";position:absolute;z-index:2}.listItem{flex-shrink:0;position:relative}.button{overflow:hidden;position:relative;z-index:1;-webkit-tap-highlight-color:transparent}.button,.buttonContent{border-radius:var(--rs-radius-medium);width:100%}.buttonContent{align-items:center;box-sizing:border-box;display:flex}.buttonContent:hover{color:var(--rs-color-foreground-neutral-faded)}.icon{color:inherit;transition:color var(--rs-duration-fast) var(--rs-easing-standard)}[data-rs-keyboard] .radio:focus+.buttonContent{box-shadow:var(--rs-focus-inset-shadow)}.icon:not(:last-child){margin-inline-end:var(--rs-unit-x2)}.--item-active:after{content:""}.--item-active:after,.selector{background:var(--rs-color-border-primary);border-radius:calc(var(--rs-radius-medium) - 1px);position:absolute;z-index:var(--rs-z-index-raised)}.selector{--rs-tab-selection-x:0;--rs-tab-selection-y:0;--rs-tab-selection-scale-x:0;--rs-tab-selection-scale-y:0;transform:translate(calc(var(--rs-tab-selection-x) * 1px),calc(var(--rs-tab-selection-y) * 1px)) translateZ(0);transform-origin:0 0}.--selector-hidden{visibility:hidden}.--selector-animated{transition:var(--rs-duration-medium) var(--rs-easing-decelerate);transition-property:transform,height,width;will-change:transform,height,width}.control{align-items:center;display:none;inset-block:0;opacity:0;pointer-events:none;position:absolute;transition:var(--rs-duration-medium) var(--rs-easing-decelerate);transition-property:opacity,transform;z-index:var(--rs-z-index-raised)}.control.control--active{opacity:1;pointer-events:all;transform:translateX(0)}[dir=rtl] .control{transform:scaleX(-1)}.control--next{inset-inline-end:0;transform:translateX(var(--rs-unit-x2))}.control--prev{inset-inline-start:0;transform:translateX(calc(var(--rs-unit-x2) * -1))}.panel{outline:none}[data-rs-keyboard] .panel:focus{box-shadow:var(--rs-focus-shadow)}.--panel-hidden{display:none}.--direction-row .inner{margin:0 calc(var(--rs-unit-x2) * -1);overflow:auto;padding:0 var(--rs-unit-x2);white-space:nowrap;-ms-overflow-style:none;overflow:-moz-scrollbars-none;scrollbar-width:none}.--direction-row .inner::-webkit-scrollbar{display:none}.--direction-row .inner:after{height:1px;inset-inline:var(--rs-unit-x2);bottom:0}.--direction-row .list{align-items:center;display:inline-flex;flex-wrap:nowrap;vertical-align:top}.--direction-row .--item-active:after{height:2px;inset-inline:0;bottom:0}.--direction-row .selector{bottom:0;height:2px;left:0;width:calc(var(--rs-tab-selection-scale-x) * 1px)}.--direction-row .button{box-sizing:initial;margin:var(--rs-unit-x1) calc(var(--rs-unit-x2) * -1);padding:0 var(--rs-unit-x2)}.--direction-row .buttonContent{justify-content:center;padding:var(--rs-tabs-item-p-v) 0}.--direction-column .inner:after{bottom:0;height:100%;inset-inline-end:0;top:0;width:1px}.--direction-column .list{--rs-tabs-gap:var(--rs-unit-x1);display:flex;flex-direction:column}.--direction-column .item{padding-inline-end:var(--rs-unit-x1)}.--direction-column .--item-active:after{bottom:0}.--direction-column .--item-active:after,.--direction-column .selector{height:100%;inset-inline-end:0;width:2px}.--direction-column .selector{height:calc(var(--rs-tab-selection-scale-y) * 1px);top:0}.--direction-column .button{margin-inline-start:calc(var(--rs-unit-x2) * -1);padding:var(--rs-unit-x2);width:calc(100% + var(--rs-unit-x1))}.--direction-column .buttonContent{justify-content:flex-start}.--variant-borderless .inner:after,.--variant-pills .inner:after,.--variant-pills-elevated .inner:after{content:none}.--variant-pills .button,.--variant-pills-elevated .button{margin:0;padding:0}.--variant-pills .buttonContent,.--variant-pills-elevated .buttonContent{margin:0;padding:var(--rs-tabs-item-p-v) var(--rs-tabs-item-p-h)}.--variant-pills .buttonContent:hover,.--variant-pills-elevated .buttonContent:hover{background:none}.--variant-pills-elevated .buttonContent{padding:calc(var(--rs-tabs-item-p-v) - var(--rs-unit-x1) / 2) var(--rs-tabs-item-p-h)}.--variant-pills .list,.--variant-pills-elevated .list{--rs-tabs-gap:var(--rs-unit-x1)}.--variant-pills .selector,.--variant-pills-elevated .selector{background-color:var(--rs-color-background-neutral);height:calc(var(--rs-tab-selection-scale-y) * 1px);opacity:.6;width:calc(var(--rs-tab-selection-scale-x) * 1px);z-index:0}.--direction-column.--variant-pills .selector,.--direction-column.--variant-pills-elevated .selector{left:0}.--direction-row.--variant-pills .selector,.--direction-row.--variant-pills-elevated .selector{top:0}.--variant-pills .--item-active:after,.--variant-pills-elevated .--item-active:after{background-color:var(--rs-color-background-neutral);opacity:.6;z-index:0}.--direction-column.--variant-pills .--item-active:after,.--direction-column.--variant-pills-elevated .--item-active:after{width:100%}.--direction-row.--variant-pills .--item-active:after,.--direction-row.--variant-pills-elevated .--item-active:after{height:100%}.--variant-pills-elevated .list{background:var(--rs-color-background-neutral-faded);border:2px solid transparent;border-radius:var(--rs-radius-medium)}.--variant-pills-elevated .--item-active:after,.--variant-pills-elevated .selector{background:var(--rs-color-background-elevation-raised);box-shadow:var(--rs-shadow-raised);box-sizing:border-box;opacity:1}.--size-medium{--rs-tabs-item-p-v:var(--rs-unit-x2);--rs-tabs-item-p-h:var(--rs-unit-x3)}.--size-large{--rs-tabs-item-p-v:var(--rs-unit-x3);--rs-tabs-item-p-h:var(--rs-unit-x4)}.--item-width-equal{max-width:none}.--item-width-equal .inner{flex-wrap:wrap;overflow:hidden}.--item-width-equal .list{display:flex}.--item-width-equal .listItem{flex-basis:0;flex-grow:1;margin:0}.--fade-end .inner,[dir=rtl] .--fade-start .inner{--rs-tabs-mid-r:100%;--rs-tabs-stop-r:calc(100% - var(--rs-unit-x1) * 12)}.--fade-start .inner,[dir=rtl] .--fade-end .inner{--rs-tabs-mid-l:0px;--rs-tabs-stop-l:calc(var(--rs-unit-x1) * 12)}@media (pointer:fine){.control{display:flex}.--fade-end .inner,[dir=rtl] .--fade-start .inner{--rs-tabs-mid-r:calc(100% - var(--rs-unit-x1) * 6);--rs-tabs-stop-r:calc(100% - var(--rs-unit-x1) * 12)}.--fade-start .inner,[dir=rtl] .--fade-end .inner{--rs-tabs-mid-l:calc(var(--rs-unit-x1) * 6);--rs-tabs-stop-l:calc(var(--rs-unit-x1) * 12)}}
+@property --rs-tabs-mid-l{syntax:"<length>";initial-value:-24px;inherits:false}@property --rs-tabs-stop-l{syntax:"<length>";initial-value:0;inherits:false}@property --rs-tabs-stop-r{syntax:"<length-percentage>";initial-value:100%;inherits:false}@property --rs-tabs-mid-r{syntax:"<length-percentage>";initial-value:calc(100% + 24px);inherits:false}.root{box-sizing:initial;max-width:100%}.list,.root{position:relative}.list{--rs-tabs-gap:var(--rs-unit-x6);gap:var(--rs-tabs-gap)}.inner{mask-image:linear-gradient(to right,transparent 0,transparent var(--rs-tabs-mid-l),#000 var(--rs-tabs-stop-l),#000 var(--rs-tabs-stop-r),transparent var(--rs-tabs-mid-r),transparent 100%);transition:var(--rs-duration-medium) var(--rs-easing-decelerate);transition-property:--rs-tabs-stop-l,--rs-tabs-stop-r,--rs-tabs-mid-l,--rs-tabs-mid-r}.inner:after{background-color:var(--rs-color-border-neutral-faded);content:"";position:absolute;z-index:2}.listItem{flex-shrink:0;position:relative}.button{overflow:hidden;position:relative;z-index:1;-webkit-tap-highlight-color:transparent}.button,.buttonContent{border-radius:var(--rs-radius-medium);width:100%}.buttonContent{align-items:center;box-sizing:border-box;display:flex}@media (hover:hover) and (pointer:fine){.buttonContent:hover{color:var(--rs-color-foreground-neutral-faded)}}.icon{color:inherit;transition:color var(--rs-duration-fast) var(--rs-easing-standard)}[data-rs-keyboard] .radio:focus+.buttonContent{box-shadow:var(--rs-focus-inset-shadow)}.icon:not(:last-child){margin-inline-end:var(--rs-unit-x2)}.--item-active:after{content:""}.--item-active:after,.selector{background:var(--rs-color-border-primary);border-radius:calc(var(--rs-radius-medium) - 1px);position:absolute;z-index:var(--rs-z-index-raised)}.selector{--rs-tab-selection-x:0;--rs-tab-selection-y:0;--rs-tab-selection-scale-x:0;--rs-tab-selection-scale-y:0;transform:translate(calc(var(--rs-tab-selection-x) * 1px),calc(var(--rs-tab-selection-y) * 1px)) translateZ(0);transform-origin:0 0}.--selector-hidden{visibility:hidden}.--selector-animated{transition:var(--rs-duration-medium) var(--rs-easing-decelerate);transition-property:transform,height,width;will-change:transform,height,width}.control{align-items:center;display:none;inset-block:0;opacity:0;pointer-events:none;position:absolute;transition:var(--rs-duration-medium) var(--rs-easing-decelerate);transition-property:opacity,transform;z-index:var(--rs-z-index-raised)}.control.control--active{opacity:1;pointer-events:all;transform:translateX(0)}[dir=rtl] .control{transform:scaleX(-1)}.control--next{inset-inline-end:0;transform:translateX(var(--rs-unit-x2))}.control--prev{inset-inline-start:0;transform:translateX(calc(var(--rs-unit-x2) * -1))}.panel{outline:none}[data-rs-keyboard] .panel:focus{box-shadow:var(--rs-focus-shadow)}.--panel-hidden{display:none}.--direction-row .inner{margin:0 calc(var(--rs-unit-x2) * -1);overflow:auto;padding:0 var(--rs-unit-x2);white-space:nowrap;-ms-overflow-style:none;overflow:-moz-scrollbars-none;scrollbar-width:none}.--direction-row .inner::-webkit-scrollbar{display:none}.--direction-row .inner:after{height:1px;inset-inline:var(--rs-unit-x2);bottom:0}.--direction-row .list{align-items:center;display:inline-flex;flex-wrap:nowrap;vertical-align:top}.--direction-row .--item-active:after{height:2px;inset-inline:0;bottom:0}.--direction-row .selector{bottom:0;height:2px;left:0;width:calc(var(--rs-tab-selection-scale-x) * 1px)}.--direction-row .button{box-sizing:initial;margin:var(--rs-unit-x1) calc(var(--rs-unit-x2) * -1);padding:0 var(--rs-unit-x2)}.--direction-row .buttonContent{justify-content:center;padding:var(--rs-tabs-item-p-v) 0}.--direction-column .inner:after{bottom:0;height:100%;inset-inline-end:0;top:0;width:1px}.--direction-column .list{--rs-tabs-gap:var(--rs-unit-x1);display:flex;flex-direction:column}.--direction-column .item{padding-inline-end:var(--rs-unit-x1)}.--direction-column .--item-active:after{bottom:0}.--direction-column .--item-active:after,.--direction-column .selector{height:100%;inset-inline-end:0;width:2px}.--direction-column .selector{height:calc(var(--rs-tab-selection-scale-y) * 1px);top:0}.--direction-column .button{margin-inline-start:calc(var(--rs-unit-x2) * -1);padding:var(--rs-unit-x2);width:calc(100% + var(--rs-unit-x1))}.--direction-column .buttonContent{justify-content:flex-start}.--variant-borderless .inner:after,.--variant-pills .inner:after,.--variant-pills-elevated .inner:after{content:none}.--variant-pills .button,.--variant-pills-elevated .button{margin:0;padding:0}.--variant-pills .buttonContent,.--variant-pills-elevated .buttonContent{margin:0;padding:var(--rs-tabs-item-p-v) var(--rs-tabs-item-p-h)}@media (hover:hover) and (pointer:fine){.--variant-pills .buttonContent:hover,.--variant-pills-elevated .buttonContent:hover{background:none}}.--variant-pills-elevated .buttonContent{padding:calc(var(--rs-tabs-item-p-v) - var(--rs-unit-x1) / 2) var(--rs-tabs-item-p-h)}.--variant-pills .list,.--variant-pills-elevated .list{--rs-tabs-gap:var(--rs-unit-x1)}.--variant-pills .selector,.--variant-pills-elevated .selector{background-color:var(--rs-color-background-neutral);height:calc(var(--rs-tab-selection-scale-y) * 1px);opacity:.6;width:calc(var(--rs-tab-selection-scale-x) * 1px);z-index:0}.--direction-column.--variant-pills .selector,.--direction-column.--variant-pills-elevated .selector{left:0}.--direction-row.--variant-pills .selector,.--direction-row.--variant-pills-elevated .selector{top:0}.--variant-pills .--item-active:after,.--variant-pills-elevated .--item-active:after{background-color:var(--rs-color-background-neutral);opacity:.6;z-index:0}.--direction-column.--variant-pills .--item-active:after,.--direction-column.--variant-pills-elevated .--item-active:after{width:100%}.--direction-row.--variant-pills .--item-active:after,.--direction-row.--variant-pills-elevated .--item-active:after{height:100%}.--variant-pills-elevated .list{background:var(--rs-color-background-neutral-faded);border:2px solid transparent;border-radius:var(--rs-radius-medium)}.--variant-pills-elevated .--item-active:after,.--variant-pills-elevated .selector{background:var(--rs-color-background-elevation-raised);box-shadow:var(--rs-shadow-raised);box-sizing:border-box;opacity:1}.--size-medium{--rs-tabs-item-p-v:var(--rs-unit-x2);--rs-tabs-item-p-h:var(--rs-unit-x3)}.--size-large{--rs-tabs-item-p-v:var(--rs-unit-x3);--rs-tabs-item-p-h:var(--rs-unit-x4)}.--item-width-equal{max-width:none}.--item-width-equal .inner{flex-wrap:wrap;overflow:hidden}.--item-width-equal .list{display:flex}.--item-width-equal .listItem{flex-basis:0;flex-grow:1;margin:0}.--fade-end .inner,[dir=rtl] .--fade-start .inner{--rs-tabs-mid-r:100%;--rs-tabs-stop-r:calc(100% - var(--rs-unit-x1) * 12)}.--fade-start .inner,[dir=rtl] .--fade-end .inner{--rs-tabs-mid-l:0px;--rs-tabs-stop-l:calc(var(--rs-unit-x1) * 12)}@media (pointer:fine){.control{display:flex}.--fade-end .inner,[dir=rtl] .--fade-start .inner{--rs-tabs-mid-r:calc(100% - var(--rs-unit-x1) * 6);--rs-tabs-stop-r:calc(100% - var(--rs-unit-x1) * 12)}.--fade-start .inner,[dir=rtl] .--fade-end .inner{--rs-tabs-mid-l:calc(var(--rs-unit-x1) * 6);--rs-tabs-stop-l:calc(var(--rs-unit-x1) * 12)}}

package/dist/components/ToggleButton/ToggleButton.d.ts

@@ -0,0 +1,3 @@
+import type * as T from "./ToggleButton.types";
+declare const ToggleButton: React.FC<T.Props>;
+export default ToggleButton;

package/dist/components/ToggleButton/ToggleButton.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import ToggleButtonControlled from "./ToggleButtonControlled.js";
+import ToggleButtonUncontrolled from "./ToggleButtonUncontrolled.js";
+const ToggleButton = (props) => {
+    const { checked } = props;
+    if (checked !== undefined)
+        return _jsx(ToggleButtonControlled, { ...props });
+    return _jsx(ToggleButtonUncontrolled, { ...props });
+};
+ToggleButton.displayName = "ToggleButton";
+export default ToggleButton;

package/dist/components/ToggleButton/ToggleButton.types.d.ts

@@ -0,0 +1,20 @@
+import type { ButtonProps } from "../Button";
+type BaseProps = Omit<ButtonProps, "variant" | "higlighted"> & {
+    variant?: Extract<ButtonProps["variant"], "outline" | "ghost">;
+    value?: string;
+    onChange?: (args: {
+        checked: boolean;
+        value: string;
+        event: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>;
+    }) => void;
+};
+export type ControlledProps = BaseProps & {
+    defaultChecked?: never;
+    checked: boolean;
+};
+export type UncontrolledProps = BaseProps & {
+    defaultChecked?: boolean;
+    checked?: never;
+};
+export type Props = ControlledProps | UncontrolledProps;
+export {};

package/dist/components/ToggleButton/ToggleButton.types.js

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