reshaped 3.8.0-canary.7 → 3.8.0-canary.8

package/dist/components/Select/SelectCustomControlled.js

@@ -7,13 +7,14 @@ import { isMatchingComponentChildId, responsivePropDependency } from "../../util
 import SelectRoot from "./SelectRoot.js";
 import SelectTrigger from "./SelectTrigger.js";
 const SelectCustomControlled = (props) => {
-    const { children, value, name, placeholder, size } = props;
+    const { children, value, name, placeholder, size, multiple, width = "trigger", position, fallbackPositions, } = props;
     const initialFocusRef = React.useRef(null);
     const searchStringRef = React.useRef("");
     const searchTimeoutRef = React.useRef(null);
     const dropdownRef = React.useRef(null);
     const indexedOptions = [];
-    let selectedOption = null;
+    const selectedOptions = [];
+    const hasValue = multiple ? value.length > 0 : value;
     const traverseOptionList = (children) => {
         return React.Children.map(children, (child, index) => {
             if (!React.isValidElement(child))
@@ -21,10 +22,10 @@ const SelectCustomControlled = (props) => {
             if (isMatchingComponentChildId(child, "Select.Option")) {
                 const component = child;
                 const option = component.props;
-                const matchingValue = option.value === value;
+                const matchingValue = multiple ? value.includes(option.value) : option.value === value;
                 const selected = matchingValue || (!placeholder && !value && index === 0);
                 if (selected)
-                    selectedOption = option;
+                    selectedOptions.push(option);
                 indexedOptions.push({
                     value: option.value,
                     text: typeof option.children === "string" ? option.children : option.value,
@@ -32,10 +33,18 @@ const SelectCustomControlled = (props) => {
                 return React.cloneElement(component, {
                     key: option.value,
                     onClick: (e) => {
-                        props.onChange?.({ value: option.value, name });
                         option.onClick?.(e);
+                        if (multiple) {
+                            const nextValue = selected
+                                ? value.filter((v) => v !== option.value)
+                                : [...value, option.value];
+                            props.onChange?.({ value: nextValue, name });
+                        }
+                        else {
+                            props.onChange?.({ value: option.value, name });
+                        }
                     },
-                    startSlot: option?.startSlot || (value && _jsx(Icon, { svg: selected ? CheckmarkIcon : null })),
+                    startSlot: option?.startSlot || (hasValue && _jsx(Icon, { svg: selected ? CheckmarkIcon : null })),
                     attributes: {
                         ...component.props.attributes,
                         ref: selected ? initialFocusRef : undefined,
@@ -72,7 +81,7 @@ const SelectCustomControlled = (props) => {
         }, 1000);
     };
     return (_jsx(SelectRoot, { ...props, children: (props) => {
-            return (_jsxs(DropdownMenu, { width: "trigger", disableHideAnimation: true, position: "bottom", fallbackPositions: ["bottom", "top"], fallbackAdjustLayout: true, fallbackMinHeight: "150px", borderRadius: responsivePropDependency(size, (size) => size === "large" || size === "xlarge" ? "medium" : "small"), initialFocusRef: initialFocusRef, children: [_jsx(DropdownMenu.Trigger, { children: (attributes) => {
+            return (_jsxs(DropdownMenu, { width: width, disableHideAnimation: true, position: position ?? "bottom", fallbackPositions: fallbackPositions ?? (position ? undefined : ["bottom", "top"]), fallbackAdjustLayout: true, fallbackMinHeight: "150px", borderRadius: responsivePropDependency(size, (size) => size === "large" || size === "xlarge" ? "medium" : "small"), initialFocusRef: initialFocusRef, children: [_jsx(DropdownMenu.Trigger, { children: (attributes) => {
                             const triggerProps = {
                                 ...props,
                                 inputAttributes: {
@@ -80,8 +89,13 @@ const SelectCustomControlled = (props) => {
                                     ...attributes,
                                 },
                             };
-                            return (_jsx(SelectTrigger, { ...triggerProps, value: selectedOption?.value || "", children: value && selectedOption?.children }));
-                        } }), _jsx(DropdownMenu.Content, { attributes: { ref: dropdownRef, onKeyDown: handleKeyDown }, children: resolvedChildren })] }));
+                            return (_jsx(SelectTrigger, { ...triggerProps, value: value, children: selectedOptions?.map((option) => option.children).join(", ") }));
+                        } }), _jsx(DropdownMenu.Content, { attributes: {
+                            ref: dropdownRef,
+                            onKeyDown: handleKeyDown,
+                            // Ignore the default menu role since we're using options
+                            role: undefined,
+                        }, children: resolvedChildren })] }));
         } }));
 };
 SelectCustomControlled.displayName = "SelectCustomControlled";

package/dist/components/Select/SelectCustomUncontrolled.js

@@ -3,13 +3,16 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
 import SelectCustomControlled from "./SelectCustomControlled.js";
 const SelectCustomUncontrolled = (props) => {
-    const { defaultValue, onChange, ...controlledProps } = props;
-    const [value, setValue] = React.useState(defaultValue || "");
-    const handleChange = (args) => {
-        setValue(args.value);
-        onChange?.(args);
-    };
-    return _jsx(SelectCustomControlled, { ...controlledProps, value: value, onChange: handleChange });
+    const { defaultValue, onChange, multiple, ...controlledProps } = props;
+    const [value, setValue] = React.useState(defaultValue || (multiple ? [] : ""));
+    return (
+    // @ts-expect-error -- avoid complicating the types and implementation
+    _jsx(SelectCustomControlled, { ...controlledProps, multiple: multiple, value: value, 
+        // @ts-expect-error -- avoid complicating the types and implementation
+        onChange: (args) => {
+            setValue(args.value);
+            onChange?.(args);
+        } }));
 };
 SelectCustomUncontrolled.displayName = "SelectCustomUncontrolled";
 export default SelectCustomUncontrolled;

package/dist/components/Select/SelectTrigger.js

@@ -11,6 +11,6 @@ const SelectTrigger = (props) => {
                     onFocus: onFocus || inputAttributes?.onFocus,
                     onBlur: onBlur || inputAttributes?.onBlur,
                     ...inputAttributes,
-                }, children: [_jsx(SelectStartContent, { startSlot: startSlot, icon: icon, size: size }), children ? _jsx(Text, { maxLines: 1, children: children }) : null, placeholder && !children ? _jsx(Text, { color: "disabled", children: placeholder }) : null, _jsx(SelectEndContent, { disabled: disabled, size: size })] }), _jsx("input", { type: "hidden", value: value, name: name, id: id })] }));
+                }, children: [_jsx(SelectStartContent, { startSlot: startSlot, icon: icon, size: size }), children ? _jsx(Text, { maxLines: 1, children: children }) : null, placeholder && !children ? _jsx(Text, { color: "disabled", children: placeholder }) : null, _jsx(SelectEndContent, { disabled: disabled, size: size })] }), _jsx("input", { type: "hidden", value: typeof value === "string" ? value : JSON.stringify(value), name: name, id: id })] }));
 };
 export default SelectTrigger;

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

@@ -34,6 +34,9 @@ export declare const customHandlers: StoryObj<{
 export declare const triggerOnly: StoryObj<{
     handleClick: Mock;
 }>;
+export declare const multiple: StoryObj<{
+    handleChange: Mock;
+}>;
 export declare const variant: StoryObj;
 export declare const size: StoryObj;
 export declare const startSlot: StoryObj;

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

@@ -80,10 +80,11 @@ export const customRender = {
 				</Select.Custom>
 			</Example.Item>
 		</Example>),
-    play: async ({ canvas, canvasElement }) => {
-        const [trigger, triggerWithGroups] = canvas.getAllByRole("button");
+    play: async ({ canvas, canvasElement, mount }) => {
+        await mount();
+        const [trigger] = canvas.getAllByRole("button");
         const hiddenInputs = canvasElement.querySelectorAll('input[type="hidden"]');
-        const [hiddenInput, hiddenInputWithGroups] = Array.from(hiddenInputs);
+        const [hiddenInput] = Array.from(hiddenInputs);
         // Testing only options
         expect(hiddenInput).toHaveAttribute("name", "animal");
         expect(hiddenInput).toHaveAttribute("id", "animal-1");
@@ -94,12 +95,17 @@ export const customRender = {
         expect(options[0]).toHaveTextContent("Dog");
         expect(options[1]).toHaveTextContent("Turtle");
         // Testing options with groups
+        // Remount to instantly close select
+        await mount();
+        const [_, triggerWithGroups] = canvas.getAllByRole("button");
+        const hiddenInputs2 = canvasElement.querySelectorAll('input[type="hidden"]');
+        const [__, hiddenInputWithGroups] = Array.from(hiddenInputs2);
+        await userEvent.click(triggerWithGroups);
+        const optionsWithGroups = within(canvasElement.ownerDocument.body).getAllByRole("option");
+        const optionGroups = within(canvasElement.ownerDocument.body).getAllByRole("group");
         expect(hiddenInputWithGroups).toHaveAttribute("name", "animal-2");
         expect(hiddenInputWithGroups).toHaveAttribute("id", "animal-2");
         expect(triggerWithGroups).toHaveTextContent("Select an animal");
-        await userEvent.click(triggerWithGroups);
-        const optionGroups = within(canvasElement.ownerDocument.body).getAllByRole("group");
-        const optionsWithGroups = within(canvasElement.ownerDocument.body).getAllByRole("option");
         expect(optionGroups).toHaveLength(2);
         expect(optionGroups[0]).toHaveTextContent("Birds");
         expect(optionGroups[1]).toHaveTextContent("Sea Mammals");
@@ -121,19 +127,25 @@ export const nativeHandlers = {
     },
     render: (args) => (<Example>
 			<Example.Item title="native, uncontrolled, onChange">
-				<Select name="animal" placeholder="Select an animal" defaultValue="dog" onChange={args.handleChange}>
+				<Select name="animal" placeholder="Select an animal" defaultValue="dog" onChange={args.handleChange} inputAttributes={{
+            "aria-label": "Select an animal",
+        }}>
 					<option value="dog">Dog</option>
 					<option value="turtle">Turtle</option>
 				</Select>
 			</Example.Item>
 			<Example.Item title="native, controlled, onChange">
-				<Select name="animal" placeholder="Select an animal" value="dog" onChange={args.handleControlledChange}>
+				<Select name="animal-2" placeholder="Select an animal" value="dog" onChange={args.handleControlledChange} inputAttributes={{
+            "aria-label": "Select an animal",
+        }}>
 					<option value="dog">Dog</option>
 					<option value="turtle">Turtle</option>
 				</Select>
 			</Example.Item>
 			<Example.Item title="native, onFocus, onBlur, onClick">
-				<Select name="animal" placeholder="Select an animal" defaultValue="dog" onFocus={args.handleFocus} onBlur={args.handleBlur} onClick={args.handleClick}>
+				<Select name="animal-3" placeholder="Select an animal" defaultValue="dog" onFocus={args.handleFocus} onBlur={args.handleBlur} onClick={args.handleClick} inputAttributes={{
+            "aria-label": "Select an animal",
+        }}>
 					<option value="dog">Dog</option>
 					<option value="turtle">Turtle</option>
 				</Select>
@@ -157,7 +169,7 @@ export const nativeHandlers = {
         expect(controlled).toHaveValue("dog");
         expect(args.handleControlledChange).toHaveBeenCalledTimes(1);
         expect(args.handleControlledChange).toHaveBeenCalledWith({
-            name: "animal",
+            name: "animal-2",
             value: "turtle",
             event: expect.objectContaining({ target: controlled }),
         });
@@ -183,28 +195,35 @@ export const customHandlers = {
     },
     render: (args) => (<Example>
 			<Example.Item title="custom, uncontrolled, onChange">
-				<Select.Custom name="animal" placeholder="Select an animal" defaultValue="dog" onChange={args.handleChange}>
+				<Select.Custom name="animal" placeholder="Select an animal" defaultValue="dog" onChange={args.handleChange} inputAttributes={{
+            "aria-label": "Select an animal",
+        }}>
 					<Select.Option value="dog">Dog</Select.Option>
 					<Select.Option value="turtle">Turtle</Select.Option>
 				</Select.Custom>
 			</Example.Item>
 			<Example.Item title="custom, controlled, onChange">
-				<Select.Custom name="animal-2" placeholder="Select an animal" value="dog" onChange={args.handleControlledChange}>
+				<Select.Custom name="animal-2" placeholder="Select an animal" value="dog" onChange={args.handleControlledChange} inputAttributes={{
+            "aria-label": "Select an animal",
+        }}>
 					<Select.Option value="dog">Dog</Select.Option>
 					<Select.Option value="turtle">Turtle</Select.Option>
 				</Select.Custom>
 			</Example.Item>
 			<Example.Item title="native, onFocus, onBlur, onClick">
-				<Select.Custom name="animal-3" placeholder="Select an animal" defaultValue="dog" onFocus={args.handleFocus} onBlur={args.handleBlur} onClick={args.handleClick}>
+				<Select.Custom name="animal-3" placeholder="Select an animal" defaultValue="dog" onFocus={args.handleFocus} onBlur={args.handleBlur} onClick={args.handleClick} inputAttributes={{
+            "aria-label": "Select an animal",
+        }}>
 					<Select.Option value="dog">Dog</Select.Option>
 					<Select.Option value="turtle">Turtle</Select.Option>
 				</Select.Custom>
 			</Example.Item>
 		</Example>),
-    play: async ({ canvas, canvasElement, args }) => {
-        const [uncontrolled, controlled, focusable] = canvas.getAllByRole("button");
+    play: async ({ canvas, canvasElement, args, mount }) => {
+        await mount();
+        const [uncontrolled] = canvas.getAllByRole("button");
         const hiddenInputs = canvasElement.querySelectorAll('input[type="hidden"]');
-        const [inputUncontrolled, inputControlled] = Array.from(hiddenInputs);
+        const [inputUncontrolled] = Array.from(hiddenInputs);
         // Uncontrolled
         expect(inputUncontrolled).toHaveValue("dog");
         await userEvent.click(uncontrolled);
@@ -217,14 +236,18 @@ export const customHandlers = {
             value: "turtle",
         });
         // Controlled
+        await mount();
+        const [__, controlled, focusable] = canvas.getAllByRole("button");
+        const hiddenInputs2 = canvasElement.querySelectorAll('input[type="hidden"]');
+        const [___, inputControlled] = Array.from(hiddenInputs2);
         expect(inputControlled).toHaveValue("dog");
         await userEvent.click(controlled);
-        const [__, controlledOption] = within(canvasElement.ownerDocument.body).getAllByRole("option");
+        const [____, controlledOption] = within(canvasElement.ownerDocument.body).getAllByRole("option");
         await userEvent.click(controlledOption);
         expect(inputControlled).toHaveValue("dog");
-        expect(args.handleChange).toHaveBeenCalledTimes(1);
-        expect(args.handleChange).toHaveBeenCalledWith({
-            name: "animal",
+        expect(args.handleControlledChange).toHaveBeenCalledTimes(1);
+        expect(args.handleControlledChange).toHaveBeenCalledWith({
+            name: "animal-2",
             value: "turtle",
         });
         // Focus + blur + click
@@ -252,26 +275,30 @@ export const triggerOnly = {
         };
         return (<Example>
 				<Example.Item title="trigger only, onClick">
-					<Select name="animal" placeholder="Select an animal" onClick={handleClick} value="dog">
+					<Select name="animal" placeholder="Select an animal" onClick={handleClick} value="dog" inputAttributes={{
+                "aria-label": "Select an animal",
+            }}>
 						{value}
 					</Select>
-					<Modal active={toggle.active} onClose={toggle.deactivate} position="bottom" padding={2}>
-						<MenuItem roundedCorners onClick={() => {
+					<Modal active={toggle.active} onClose={toggle.deactivate} position="bottom" padding={2} attributes={{ "aria-label": "Select an animal" }}>
+						<div role="listbox" aria-label="Select an animal">
+							<MenuItem roundedCorners onClick={() => {
                 setValue("Dog");
                 toggle.deactivate();
             }} attributes={{
                 role: "option",
             }}>
-							Dog
-						</MenuItem>
-						<MenuItem roundedCorners attributes={{
+								Dog
+							</MenuItem>
+							<MenuItem roundedCorners attributes={{
                 role: "option",
             }} onClick={() => {
                 setValue("Turtle");
                 toggle.deactivate();
             }}>
-							Turtle
-						</MenuItem>
+								Turtle
+							</MenuItem>
+						</div>
 					</Modal>
 				</Example.Item>
 			</Example>);
@@ -288,32 +315,62 @@ export const triggerOnly = {
         expect(args.handleClick).toHaveBeenCalledWith(expect.objectContaining({ target: trigger }));
     },
 };
+export const multiple = {
+    name: "multiple",
+    args: {
+        handleChange: fn(),
+    },
+    render: (args) => (<Example>
+			<Example.Item title="multiple">
+				<Select.Custom multiple name="animal" placeholder="Select an animal" defaultValue={["dog"]} onChange={args.handleChange}>
+					<Select.Option value="dog">Dog</Select.Option>
+					<Select.Option value="turtle">Turtle</Select.Option>
+				</Select.Custom>
+			</Example.Item>
+		</Example>),
+    play: async ({ canvas, canvasElement, args }) => {
+        const [uncontrolled] = canvas.getAllByRole("button");
+        const hiddenInputs = canvasElement.querySelectorAll('input[type="hidden"]');
+        const [inputUncontrolled] = Array.from(hiddenInputs);
+        // Uncontrolled
+        expect(inputUncontrolled).toHaveValue('["dog"]');
+        await userEvent.click(uncontrolled);
+        const [_, uncontrolledOption] = within(canvasElement.ownerDocument.body).getAllByRole("option");
+        await userEvent.click(uncontrolledOption);
+        expect(inputUncontrolled).toHaveValue('["dog","turtle"]');
+        expect(args.handleChange).toHaveBeenCalledTimes(1);
+        expect(args.handleChange).toHaveBeenCalledWith({
+            name: "animal",
+            value: ["dog", "turtle"],
+        });
+    },
+};
 export const variant = {
     name: "variant",
     render: () => (<Example>
 			<Example.Item title="variant: faded, native">
-				<Select variant="faded" name="animal" placeholder="Select an animal">
+				<Select variant="faded" name="animal" placeholder="Select an animal" inputAttributes={{ "aria-label": "Select an animal" }}>
 					<option value="dog">Dog</option>
 					<option value="turtle">Turtle</option>
 				</Select>
 			</Example.Item>
 
 			<Example.Item title="variant: faded, custom">
-				<Select.Custom variant="faded" name="animal" placeholder="Select an animal">
+				<Select.Custom variant="faded" name="animal-2" placeholder="Select an animal" inputAttributes={{ "aria-label": "Select an animal" }}>
 					<Select.Option value="dog">Dog</Select.Option>
 					<Select.Option value="turtle">Turtle</Select.Option>
 				</Select.Custom>
 			</Example.Item>
 
 			<Example.Item title="variant: headless, native">
-				<Select variant="headless" name="animal" placeholder="Select an animal">
+				<Select variant="headless" name="animal-3" placeholder="Select an animal" inputAttributes={{ "aria-label": "Select an animal" }}>
 					<option value="dog">Dog</option>
 					<option value="turtle">Turtle</option>
 				</Select>
 			</Example.Item>
 
 			<Example.Item title="variant: headless, custom">
-				<Select.Custom variant="headless" name="animal" placeholder="Select an animal">
+				<Select.Custom variant="headless" name="animal-4" placeholder="Select an animal" inputAttributes={{ "aria-label": "Select an animal" }}>
 					<Select.Option value="dog">Dog</Select.Option>
 					<Select.Option value="turtle">Turtle</Select.Option>
 				</Select.Custom>
@@ -382,13 +439,13 @@ export const disabled = {
     name: "disabled",
     render: () => (<Example>
 			<Example.Item title="disabled, native">
-				<Select name="animal" placeholder="Select an animal" disabled>
+				<Select name="animal" placeholder="Select an animal" disabled inputAttributes={{ "aria-label": "Select an animal" }}>
 					<option value="dog">Dog</option>
 					<option value="turtle">Turtle</option>
 				</Select>
 			</Example.Item>
 			<Example.Item title="disabled, custom">
-				<Select.Custom name="animal" placeholder="Select an animal" disabled>
+				<Select.Custom name="animal-2" placeholder="Select an animal" disabled inputAttributes={{ "aria-label": "Select an animal" }}>
 					<Select.Option value="dog">Dog</Select.Option>
 					<Select.Option value="turtle">Turtle</Select.Option>
 				</Select.Custom>

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

@@ -1,3 +1,4 @@
+import { StoryObj } from "@storybook/react-vite";
 declare const _default: {
     title: string;
     component: import("react").FC<import("./..").SkeletonProps>;
@@ -8,5 +9,12 @@ declare const _default: {
     };
 };
 export default _default;
-export declare const variant: () => import("react").JSX.Element;
-export declare const radius: () => import("react").JSX.Element;
+export declare const variant: {
+    name: string;
+    render: () => import("react").JSX.Element;
+};
+export declare const radius: {
+    name: string;
+    render: () => import("react").JSX.Element;
+};
+export declare const className: StoryObj;

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

@@ -1,5 +1,6 @@
 import { Example } from "../../../utilities/storybook/index.js";
 import Skeleton from "../index.js";
+import { expect } from "storybook/test";
 export default {
     title: "Components/Skeleton",
     component: Skeleton,
@@ -9,37 +10,54 @@ export default {
         },
     },
 };
-export const variant = () => (<Example>
-		<Example.Item title="text">
-			<Skeleton />
-		</Example.Item>
+export const variant = {
+    name: "variant",
+    render: () => (<Example>
+			<Example.Item title="text">
+				<Skeleton />
+			</Example.Item>
 
-		<Example.Item title="view, rectangle">
-			<Skeleton width="100px" height="100px"/>
-		</Example.Item>
+			<Example.Item title="view, rectangle">
+				<Skeleton width="100px" height="100px"/>
+			</Example.Item>
 
-		<Example.Item title="view, circle">
-			<Skeleton width="100px" height="100px" borderRadius="circular"/>
-		</Example.Item>
+			<Example.Item title="view, circle">
+				<Skeleton width="100px" height="100px" borderRadius="circular"/>
+			</Example.Item>
 
-		<Example.Item title="view, rectangle, responsive">
-			<Skeleton width={{ s: "100px", m: "200px" }} height={{ s: "100px", m: "200px" }}/>
-		</Example.Item>
-	</Example>);
-export const radius = () => (<Example>
-		<Example.Item title="radius=small">
-			<Skeleton width="60px" height="60px" borderRadius="small"/>
-		</Example.Item>
+			<Example.Item title="view, rectangle, responsive">
+				<Skeleton width={{ s: "100px", m: "200px" }} height={{ s: "100px", m: "200px" }}/>
+			</Example.Item>
+		</Example>),
+};
+export const radius = {
+    name: "radius",
+    render: () => (<Example>
+			<Example.Item title="radius=small">
+				<Skeleton width="60px" height="60px" borderRadius="small"/>
+			</Example.Item>
 
-		<Example.Item title="radius=medium">
-			<Skeleton width="60px" height="60px" borderRadius="medium"/>
-		</Example.Item>
+			<Example.Item title="radius=medium">
+				<Skeleton width="60px" height="60px" borderRadius="medium"/>
+			</Example.Item>
 
-		<Example.Item title="radius=large">
-			<Skeleton width="60px" height="60px" borderRadius="large"/>
-		</Example.Item>
+			<Example.Item title="radius=large">
+				<Skeleton width="60px" height="60px" borderRadius="large"/>
+			</Example.Item>
 
-		<Example.Item title="radius=circular">
-			<Skeleton width="60px" height="60px" borderRadius="circular"/>
-		</Example.Item>
-	</Example>);
+			<Example.Item title="radius=circular">
+				<Skeleton width="60px" height="60px" borderRadius="circular"/>
+			</Example.Item>
+		</Example>),
+};
+export const className = {
+    name: "className, attributes",
+    render: () => (<div data-testid="root">
+			<Skeleton className="test-classname" attributes={{ id: "test-id" }}/>
+		</div>),
+    play: async ({ canvas }) => {
+        const root = canvas.getByTestId("root").firstChild;
+        expect(root).toHaveClass("test-classname");
+        expect(root).toHaveAttribute("id", "test-id");
+    },
+};

package/dist/components/Slider/Slider.module.css

@@ -1 +1 @@
-.root{--rs-slider-overflow-gap:var(--rs-unit-x1);--rs-slider-thumb-size:var(--rs-unit-x4);align-items:center;cursor:pointer;display:flex;position:relative;user-select:none;-webkit-tap-highlight-color:transparent}.root:has(.thumb:hover,.thumb--active,.input:focus-visible){overflow:visible}.bar{background:var(--rs-color-background-neutral);border-radius:var(--rs-radius-small);position:relative}.bar,.input{overflow:hidden}.input{height:1px;opacity:0;pointer-events:none;position:absolute;width:1px}.selection{background:var(--rs-color-background-primary);position:absolute}.tooltip{--rs-slider-tooltip-translate:calc(-50% + var(--rs-slider-tooltip-offset, 0px));background:var(--rs-color-background-elevation-overlay);border-radius:var(--rs-radius-small);box-shadow:var(--rs-shadow-overlay);box-sizing:initial;color:var(--rs-color-foreground-neutral);font-variant-numeric:tabular-nums;min-width:var(--rs-line-height-caption-1);opacity:0;padding:calc(var(--rs-unit-x1) / 2) var(--rs-unit-x1);pointer-events:none;text-align:center;transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:opacity,transform;user-select:none;white-space:nowrap;will-change:transform}.thumb,.thumbs,.tooltip{position:absolute}.thumb:before{background:var(--rs-color-background-primary);border-radius:var(--rs-radius-circular);box-shadow:0 0 0 2px var(--rs-color-background-elevation-base);box-sizing:border-box;height:var(--rs-slider-thumb-size);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:box-shadow;width:var(--rs-slider-thumb-size)}.thumb:after,.thumb:before{content:"";position:absolute}.thumb:after{cursor:grab;height:var(--rs-unit-x7);width:var(--rs-unit-x7)}.thumb:hover .tooltip{opacity:1}.thumb--active:after,[data-rs-keyboard] .input:focus+.thumb:after{cursor:grabbing}.thumb--active:before,[data-rs-keyboard] .input:focus+.thumb:before{box-shadow:0 0 0 1px var(--rs-color-background-elevation-base)}.thumb--active .tooltip,[data-rs-keyboard] .input:focus+.thumb .tooltip{opacity:1}[data-rs-keyboard] .input:focus+.thumb:before{box-shadow:var(--rs-focus-shadow)}.--orientation-horizontal{height:var(--rs-slider-thumb-size);margin-inline:calc(var(--rs-slider-overflow-gap) * -1);overflow-x:clip;padding-inline:var(--rs-slider-overflow-gap)}.--orientation-horizontal .bar{height:var(--rs-unit-x1);width:100%}.--orientation-horizontal .selection{height:100%;inset-inline-start:var(--rs-slider-selection-start);width:var(--rs-slider-selection-size)}.--orientation-horizontal .tooltip{bottom:100%;left:50%;transform:translate(var(--rs-slider-tooltip-translate))}.--orientation-horizontal .thumbs{height:100%;inset-inline:calc(var(--rs-slider-thumb-size) / 2 + var(--rs-slider-overflow-gap))}.--orientation-horizontal .thumb{height:100%;inset-inline-start:var(--ts-slider-thumb-position);width:0}.--orientation-horizontal .thumb:after,.--orientation-horizontal .thumb:before{left:0;top:50%;transform:translate(-50%,-50%)}.--orientation-horizontal .input:focus+.thumb .tooltip,.--orientation-horizontal .thumb--active .tooltip,.--orientation-horizontal .thumb:hover .tooltip{transform:translate(var(--rs-slider-tooltip-translate),calc(var(--rs-unit-x1) * -1.5))}.--orientation-vertical{flex-direction:column;height:100%;margin-block:calc(var(--rs-slider-overflow-gap) * -1);overflow-y:clip;padding-block:var(--rs-slider-overflow-gap);width:var(--rs-slider-thumb-size)}.--orientation-vertical .bar{height:100%;width:var(--rs-unit-x1)}.--orientation-vertical .selection{height:var(--rs-slider-selection-size);inset-block-end:var(--rs-slider-selection-start);inset-inline-start:auto;width:100%}.--orientation-vertical .tooltip{inset-inline-start:100%;top:50%;transform:translateY(var(--rs-slider-tooltip-translate))}.--orientation-vertical .thumbs{inset-block:calc(var(--rs-slider-thumb-size) / 2 + var(--rs-slider-overflow-gap));width:100%}.--orientation-vertical .thumb{height:0;inset-block-end:var(--ts-slider-thumb-position);width:100%}.--orientation-vertical .thumb:after,.--orientation-vertical .thumb:before{left:50%;top:0;transform:translate(-50%,-50%)}.--orientation-vertical .input:focus+.thumb .tooltip,.--orientation-vertical .thumb--active .tooltip,.--orientation-vertical .thumb:hover .tooltip{transform:translate(calc(var(--rs-unit-x1) * 1.5),-50%)}.--disabled{cursor:not-allowed}.--disabled .bar{background-color:var(--rs-color-background-disabled)}.--disabled .selection,.--disabled .thumb:before{background-color:var(--rs-color-foreground-disabled)}.--disabled .thumb:after{cursor:not-allowed}.--disabled .thumb:hover .tooltip{opacity:0}
+.root{--rs-slider-overflow-gap:var(--rs-unit-x1);--rs-slider-thumb-size:var(--rs-unit-x4);align-items:center;cursor:pointer;display:flex;position:relative;user-select:none;-webkit-tap-highlight-color:transparent}.root:has(.thumb:hover,.thumb--active,.input:focus-visible){overflow:visible}.bar{background:var(--rs-color-background-neutral);border-radius:var(--rs-radius-small);position:relative}.bar,.input{overflow:hidden}.input{height:1px;opacity:0;pointer-events:none;position:absolute;width:1px}.selection{background:var(--rs-color-background-primary);position:absolute}.tooltip{--rs-slider-tooltip-translate:calc(-50% + var(--rs-slider-tooltip-offset, 0px));background:var(--rs-color-background-elevation-overlay);border-radius:var(--rs-radius-small);box-shadow:var(--rs-shadow-overlay);box-sizing:initial;color:var(--rs-color-foreground-neutral);font-variant-numeric:tabular-nums;min-width:var(--rs-line-height-caption-1);opacity:0;padding:calc(var(--rs-unit-x1) / 2) var(--rs-unit-x1);pointer-events:none;text-align:center;transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:opacity,transform;user-select:none;white-space:nowrap;will-change:transform}.thumb,.thumbs,.tooltip{position:absolute}.thumb:before{background:var(--rs-color-background-primary);border-radius:var(--rs-radius-circular);box-shadow:0 0 0 2px var(--rs-color-background-elevation-base);box-sizing:border-box;height:var(--rs-slider-thumb-size);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:box-shadow;width:var(--rs-slider-thumb-size)}.thumb:after,.thumb:before{content:"";position:absolute}.thumb:after{cursor:grab;height:var(--rs-unit-x7);width:var(--rs-unit-x7)}.thumb:hover .tooltip{opacity:1}.thumb--active:after,[data-rs-keyboard] .input:focus+.thumb:after{cursor:grabbing}.thumb--active:before,[data-rs-keyboard] .input:focus+.thumb:before{box-shadow:0 0 0 1px var(--rs-color-background-elevation-base)}.thumb--active .tooltip,[data-rs-keyboard] .input:focus+.thumb .tooltip{opacity:1}[data-rs-keyboard] .input:focus+.thumb:before{box-shadow:var(--rs-shadow-focus)}.--orientation-horizontal{height:var(--rs-slider-thumb-size);margin-inline:calc(var(--rs-slider-overflow-gap) * -1);overflow-x:clip;padding-inline:var(--rs-slider-overflow-gap)}.--orientation-horizontal .bar{height:var(--rs-unit-x1);width:100%}.--orientation-horizontal .selection{height:100%;inset-inline-start:var(--rs-slider-selection-start);width:var(--rs-slider-selection-size)}.--orientation-horizontal .tooltip{bottom:100%;left:50%;transform:translate(var(--rs-slider-tooltip-translate))}.--orientation-horizontal .thumbs{height:100%;inset-inline:calc(var(--rs-slider-thumb-size) / 2 + var(--rs-slider-overflow-gap))}.--orientation-horizontal .thumb{height:100%;inset-inline-start:var(--ts-slider-thumb-position);width:0}.--orientation-horizontal .thumb:after,.--orientation-horizontal .thumb:before{left:0;top:50%;transform:translate(-50%,-50%)}.--orientation-horizontal .input:focus+.thumb .tooltip,.--orientation-horizontal .thumb--active .tooltip,.--orientation-horizontal .thumb:hover .tooltip{transform:translate(var(--rs-slider-tooltip-translate),calc(var(--rs-unit-x1) * -1.5))}.--orientation-vertical{flex-direction:column;height:100%;margin-block:calc(var(--rs-slider-overflow-gap) * -1);overflow-y:clip;padding-block:var(--rs-slider-overflow-gap);width:var(--rs-slider-thumb-size)}.--orientation-vertical .bar{height:100%;width:var(--rs-unit-x1)}.--orientation-vertical .selection{height:var(--rs-slider-selection-size);inset-block-end:var(--rs-slider-selection-start);inset-inline-start:auto;width:100%}.--orientation-vertical .tooltip{inset-inline-start:100%;top:50%;transform:translateY(var(--rs-slider-tooltip-translate))}.--orientation-vertical .thumbs{inset-block:calc(var(--rs-slider-thumb-size) / 2 + var(--rs-slider-overflow-gap));width:100%}.--orientation-vertical .thumb{height:0;inset-block-end:var(--ts-slider-thumb-position);width:100%}.--orientation-vertical .thumb:after,.--orientation-vertical .thumb:before{left:50%;top:0;transform:translate(-50%,-50%)}.--orientation-vertical .input:focus+.thumb .tooltip,.--orientation-vertical .thumb--active .tooltip,.--orientation-vertical .thumb:hover .tooltip{transform:translate(calc(var(--rs-unit-x1) * 1.5),-50%)}.--disabled{cursor:not-allowed}.--disabled .bar{background-color:var(--rs-color-background-disabled)}.--disabled .selection,.--disabled .thumb:before{background-color:var(--rs-color-foreground-disabled)}.--disabled .thumb:after{cursor:not-allowed}.--disabled .thumb:hover .tooltip{opacity:0}

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

@@ -1,4 +1,5 @@
 import React from "react";
+import { StoryObj } from "@storybook/react-vite";
 declare const _default: {
     title: string;
     component: React.FC<import("./..").StepperProps> & {
@@ -14,7 +15,20 @@ declare const _default: {
     };
 };
 export default _default;
-export declare const direction: () => React.JSX.Element;
-export declare const labelDisplay: () => React.JSX.Element;
-export declare const gap: () => React.JSX.Element;
-export declare const edgeCases: () => React.JSX.Element;
+export declare const direction: {
+    name: string;
+    render: () => React.JSX.Element;
+};
+export declare const labelDisplay: {
+    name: string;
+    render: () => React.JSX.Element;
+};
+export declare const gap: {
+    name: string;
+    render: () => React.JSX.Element;
+};
+export declare const className: StoryObj;
+export declare const edgeCases: {
+    name: string;
+    render: () => React.JSX.Element;
+};