reshaped 3.8.0-canary.7 → 3.8.0-canary.9

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

@@ -1,6 +1,7 @@
 import { Example } from "../../../utilities/storybook/index.js";
 import Radio from "../index.js";
 import View from "../../View/index.js";
+import { expect, fn, userEvent } from "storybook/test";
 export default {
     title: "Components/Radio",
     component: Radio,
@@ -10,71 +11,152 @@ export default {
         },
     },
 };
-export const selection = () => (<Example>
-		<Example.Item title="unselected">
-			<Radio name="unselected" value="dog">
-				Radio
-			</Radio>
-		</Example.Item>
-
-		<Example.Item title="checked, uncontrolled">
-			<Radio name="uncontrolled" value="dog" defaultChecked>
-				Radio
-			</Radio>
-		</Example.Item>
-
-		<Example.Item title="checked, controlled">
-			<Radio name="controlled" value="dog" checked>
-				Radio
-			</Radio>
-		</Example.Item>
-	</Example>);
-export const size = () => (<Example>
-		<Example.Item title="size: small">
-			<View gap={4} direction="row">
-				<Radio name="animal" value="dog" size="small" defaultChecked>
-					Radio
-				</Radio>
-			</View>
-		</Example.Item>
-		<Example.Item title="size: medium">
-			<View gap={4} direction="row">
-				<Radio name="animal" value="dog" size="medium">
-					Radio
-				</Radio>
-			</View>
-		</Example.Item>
-		<Example.Item title="size: large">
-			<View gap={4} direction="row">
-				<Radio name="animal" value="dog" size="large">
-					Radio
-				</Radio>
-			</View>
-		</Example.Item>
-		<Example.Item title="size: responsive, s: small, m: large">
-			<View gap={4} direction="row">
-				<Radio name="animal" value="dog" size={{ s: "small", m: "large" }}>
+export const size = {
+    name: "size",
+    render: () => (<Example>
+			<Example.Item title="size: small">
+				<View gap={4} direction="row">
+					<Radio name="animal" value="dog" size="small" defaultChecked>
+						Radio
+					</Radio>
+				</View>
+			</Example.Item>
+			<Example.Item title="size: medium">
+				<View gap={4} direction="row">
+					<Radio name="animal" value="dog" size="medium">
+						Radio
+					</Radio>
+				</View>
+			</Example.Item>
+			<Example.Item title="size: large">
+				<View gap={4} direction="row">
+					<Radio name="animal" value="dog" size="large">
+						Radio
+					</Radio>
+				</View>
+			</Example.Item>
+			<Example.Item title="size: responsive, s: small, m: large">
+				<View gap={4} direction="row">
+					<Radio name="animal" value="dog" size={{ s: "small", m: "large" }}>
+						Radio
+					</Radio>
+				</View>
+			</Example.Item>
+		</Example>),
+};
+export const error = {
+    name: "hasError",
+    render: () => (<Example>
+			<Example.Item title="error">
+				<Radio name="error" value="dog" hasError>
 					Radio
 				</Radio>
-			</View>
-		</Example.Item>
-	</Example>);
-export const error = () => (<Example>
-		<Example.Item title="error">
-			<Radio name="error" value="dog" hasError>
-				Radio
-			</Radio>
-		</Example.Item>
-	</Example>);
-export const disabled = () => (<Example>
-		<Example.Item title="disabled">
-			<Radio name="disabled" value="dog" disabled>
-				Radio
-			</Radio>
-		</Example.Item>
-		<Example.Item title="disabled, checked">
-			<Radio name="disabled-checked" value="dog" disabled checked>
-				Radio
+			</Example.Item>
+		</Example>),
+};
+export const render = {
+    name: "name, value",
+    render: () => (<Radio name="test-name" value="test-value">
+			Content
+		</Radio>),
+    play: async ({ canvas }) => {
+        const input = canvas.getByRole("radio");
+        expect(input).toHaveAttribute("value", "test-value");
+        expect(input).toHaveAttribute("name", "test-name");
+        expect(input).not.toBeChecked();
+    },
+};
+export const checked = {
+    name: "checked, controlled",
+    args: {
+        handleChange: fn(),
+    },
+    render: (args) => (<Radio name="test-name" value="test-value" checked onChange={args.handleChange}>
+			Content
+		</Radio>),
+    play: async ({ canvas, args }) => {
+        const input = canvas.getByRole("radio");
+        expect(input).toBeChecked();
+    },
+};
+export const checkedFalse = {
+    name: "checked false, controlled",
+    args: {
+        handleChange: fn(),
+    },
+    render: (args) => (<Radio name="test-name" value="test-value" checked={false} onChange={args.handleChange}>
+			Content
+		</Radio>),
+    play: async ({ canvas, args }) => {
+        const input = canvas.getByRole("radio");
+        expect(input).not.toBeChecked();
+        await userEvent.click(input);
+        expect(args.handleChange).toHaveBeenCalledTimes(1);
+        expect(args.handleChange).toHaveBeenCalledWith({
+            name: "test-name",
+            value: "test-value",
+            checked: true,
+            event: expect.objectContaining({ target: input }),
+        });
+        // Still not checked because it's controlled
+        expect(input).not.toBeChecked();
+    },
+};
+export const defaultChecked = {
+    name: "defaultChecked, uncontrolled",
+    args: {
+        handleChange: fn(),
+    },
+    render: (args) => (<Radio name="test-name" value="test-value" defaultChecked onChange={args.handleChange}>
+			Content
+		</Radio>),
+    play: async ({ canvas, args }) => {
+        const input = canvas.getByRole("radio");
+        expect(input).toBeChecked();
+    },
+};
+export const defaultCheckedFalse = {
+    name: "defaultChecked false, uncontrolled",
+    args: {
+        handleChange: fn(),
+    },
+    render: (args) => (<Radio name="test-name" value="test-value" onChange={args.handleChange}>
+			Content
+		</Radio>),
+    play: async ({ canvas, args }) => {
+        const input = canvas.getByRole("radio");
+        expect(input).not.toBeChecked();
+        await userEvent.click(input);
+        expect(args.handleChange).toHaveBeenCalledTimes(1);
+        expect(args.handleChange).toHaveBeenCalledWith({
+            name: "test-name",
+            value: "test-value",
+            checked: true,
+            event: expect.objectContaining({ target: input }),
+        });
+        expect(input).toBeChecked();
+    },
+};
+export const disabled = {
+    name: "disabled",
+    render: () => (<Radio name="test-name" value="test-value" disabled>
+			Content
+		</Radio>),
+    play: async ({ canvas }) => {
+        const input = canvas.getByRole("radio");
+        expect(input).toBeDisabled();
+    },
+};
+export const className = {
+    name: "className, attributes",
+    render: () => (<div data-testid="root">
+			<Radio className="test-classname" attributes={{ id: "test-id" }} value="value">
+				Content
 			</Radio>
-		</Example.Item>
-	</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/RadioGroup/tests/RadioGroup.stories.d.ts

@@ -1,3 +1,5 @@
+import { StoryObj } from "@storybook/react-vite";
+import { fn } from "storybook/test";
 declare const _default: {
     title: string;
     component: import("react").FC<import("./..").RadioGroupProps>;
@@ -8,5 +10,10 @@ declare const _default: {
     };
 };
 export default _default;
-export declare const selection: () => import("react").JSX.Element;
-export declare const disabled: () => import("react").JSX.Element;
+export declare const value: StoryObj<{
+    handleChange: ReturnType<typeof fn>;
+}>;
+export declare const defaultValue: StoryObj<{
+    handleChange: ReturnType<typeof fn>;
+}>;
+export declare const disabled: StoryObj;

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

@@ -1,7 +1,6 @@
-import { Example } from "../../../utilities/storybook/index.js";
-import View from "../../View/index.js";
 import RadioGroup from "../index.js";
 import Radio from "../../Radio/index.js";
+import { expect, fn, userEvent } from "storybook/test";
 export default {
     title: "Components/RadioGroup",
     component: RadioGroup,
@@ -11,41 +10,68 @@ export default {
         },
     },
 };
-export const selection = () => (<Example>
-		<Example.Item title="unselected">
-			<RadioGroup name="unselected">
-				<View gap={3}>
-					<Radio value="dog">Radio 1</Radio>
-					<Radio value="cat">Radio 2</Radio>
-				</View>
-			</RadioGroup>
-		</Example.Item>
+export const value = {
+    name: "value, controlled",
+    args: {
+        handleChange: fn(),
+    },
+    render: (args) => (<RadioGroup name="test-name" value="1" onChange={args.handleChange}>
+			{/* checked should be ignored */}
+			<Radio value="1" checked={false}>
+				Content
+			</Radio>
 
-		<Example.Item title="checked, uncontrolled">
-			<RadioGroup name="uncontrolled" defaultValue={"dog"}>
-				<View gap={3}>
-					<Radio value="dog">Radio 1</Radio>
-					<Radio value="cat">Radio 2</Radio>
-				</View>
-			</RadioGroup>
-		</Example.Item>
+			<Radio value="2">Content 2</Radio>
+		</RadioGroup>),
+    play: async ({ canvas, args }) => {
+        const inputs = canvas.getAllByRole("radio");
+        expect(inputs[0]).toBeChecked();
+        await userEvent.click(inputs[1]);
+        expect(args.handleChange).toHaveBeenCalledTimes(1);
+        expect(args.handleChange).toHaveBeenCalledWith({
+            name: "test-name",
+            value: "2",
+            event: expect.objectContaining({ target: inputs[1] }),
+        });
+        // Still checked because it's controlled
+        expect(inputs[0]).toBeChecked();
+        expect(inputs[1]).not.toBeChecked();
+    },
+};
+export const defaultValue = {
+    name: "defaultValue, uncontrolled",
+    args: {
+        handleChange: fn(),
+    },
+    render: (args) => (<RadioGroup name="test-name" defaultValue="1" onChange={args.handleChange}>
+			{/* checked should be ignored */}
+			<Radio value="1" checked={false}>
+				Content
+			</Radio>
 
-		<Example.Item title="checked, controlled">
-			<RadioGroup name="controlled" value={"dog"}>
-				<View gap={3}>
-					<Radio value="dog">Radio 1</Radio>
-					<Radio value="cat">Radio 2</Radio>
-				</View>
-			</RadioGroup>
-		</Example.Item>
-	</Example>);
-export const disabled = () => (<Example>
-		<Example.Item title="disabled">
-			<RadioGroup name="disabled" disabled>
-				<View gap={3}>
-					<Radio value="dog">Dog</Radio>
-					<Radio value="cat">Cat</Radio>
-				</View>
-			</RadioGroup>
-		</Example.Item>
-	</Example>);
+			<Radio value="2">Content 2</Radio>
+		</RadioGroup>),
+    play: async ({ canvas, args }) => {
+        const inputs = canvas.getAllByRole("radio");
+        expect(inputs[0]).toBeChecked();
+        await userEvent.click(inputs[1]);
+        expect(args.handleChange).toHaveBeenCalledTimes(1);
+        expect(args.handleChange).toHaveBeenCalledWith({
+            name: "test-name",
+            value: "2",
+            event: expect.objectContaining({ target: inputs[1] }),
+        });
+        expect(inputs[0]).not.toBeChecked();
+        expect(inputs[1]).toBeChecked();
+    },
+};
+export const disabled = {
+    name: "disabled",
+    render: () => (<RadioGroup name="test-name" disabled>
+			<Radio value="test-value">Content</Radio>
+		</RadioGroup>),
+    play: async ({ canvas }) => {
+        const input = canvas.getByRole("radio");
+        expect(input).toBeDisabled();
+    },
+};

package/dist/components/Reshaped/Reshaped.css

@@ -1 +1 @@
-@layer rs.reset{[data-rs-theme]{--rs-radius-circular:9999px;--rs-shadow-border-faded:0px 0px 0px 1px var(--rs-color-border-neutral-faded) inset}[data-rs-theme] blockquote,[data-rs-theme] body,[data-rs-theme] dd,[data-rs-theme] dl,[data-rs-theme] figcaption,[data-rs-theme] figure,[data-rs-theme] h1,[data-rs-theme] h2,[data-rs-theme] h3,[data-rs-theme] h4,[data-rs-theme] h5,[data-rs-theme] h6,[data-rs-theme] li,[data-rs-theme] ol,[data-rs-theme] p,[data-rs-theme] ul{margin:0;padding:0}[data-rs-theme] ol[class],[data-rs-theme] ul[class]{list-style:none}[data-rs-theme] textarea{resize:vertical}[data-rs-theme] table{border-collapse:collapse;border-spacing:0}[data-rs-theme] fieldset{border:0;margin:0;padding:0}[data-rs-theme] img{display:block;max-width:100%}[data-rs-theme] button,[data-rs-theme] input,[data-rs-theme] select,[data-rs-theme] textarea{font:inherit}[data-rs-theme] option{background:var(--rs-color-background-elevation-base)}[data-rs-theme] label{cursor:pointer}[data-rs-theme] input::placeholder,[data-rs-theme] textarea::placeholder{color:var(--rs-color-foreground-disabled)}html[data-rs-theme]{-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;font-size:100%;text-rendering:optimizelegibility;touch-action:manipulation}[data-rs-theme] *{box-sizing:border-box}[data-rs-theme] body,html[data-rs-theme]{background:var(--rs-color-background-page);color:var(--rs-color-foreground-neutral);min-height:100vh;scroll-behavior:smooth}}[data-rs-theme] body,[data-rs-theme]:not(html){font-family:var(--rs-font-family-body);font-size:var(--rs-font-size-body-3);font-weight:var(--rs-font-weight-regular);letter-spacing:var(--rs-letter-spacing-body-3);line-height:var(--rs-line-height-body-3)}[data-rs-color-mode=light]{color-scheme:light}[data-rs-color-mode=dark]{color-scheme:dark}@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}[data-rs-no-transition] *,[data-rs-no-transition] :after,[data-rs-no-transition] :before{transition:none!important}
+@layer rs.reset{[data-rs-theme] blockquote,[data-rs-theme] body,[data-rs-theme] dd,[data-rs-theme] dl,[data-rs-theme] figcaption,[data-rs-theme] figure,[data-rs-theme] h1,[data-rs-theme] h2,[data-rs-theme] h3,[data-rs-theme] h4,[data-rs-theme] h5,[data-rs-theme] h6,[data-rs-theme] li,[data-rs-theme] ol,[data-rs-theme] p,[data-rs-theme] ul{margin:0;padding:0}[data-rs-theme] ol[class],[data-rs-theme] ul[class]{list-style:none}[data-rs-theme] textarea{resize:vertical}[data-rs-theme] table{border-collapse:collapse;border-spacing:0}[data-rs-theme] fieldset{border:0;margin:0;padding:0}[data-rs-theme] img{display:block;max-width:100%}[data-rs-theme] button,[data-rs-theme] input,[data-rs-theme] select,[data-rs-theme] textarea{font:inherit}[data-rs-theme] option{background:var(--rs-color-background-elevation-base)}[data-rs-theme] label{cursor:pointer}[data-rs-theme] input::placeholder,[data-rs-theme] textarea::placeholder{color:var(--rs-color-foreground-disabled)}html[data-rs-theme]{-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;font-size:100%;text-rendering:optimizelegibility;touch-action:manipulation}[data-rs-theme] *{box-sizing:border-box}[data-rs-theme] body,html[data-rs-theme]{background:var(--rs-color-background-page);color:var(--rs-color-foreground-neutral);min-height:100vh;scroll-behavior:smooth}}[data-rs-theme] body,[data-rs-theme]:not(html){font-family:var(--rs-font-family-body);font-size:var(--rs-font-size-body-3);font-weight:var(--rs-font-weight-regular);letter-spacing:var(--rs-letter-spacing-body-3);line-height:var(--rs-line-height-body-3)}[data-rs-color-mode=light]{color-scheme:light}[data-rs-color-mode=dark]{color-scheme:dark}@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}[data-rs-no-transition] *,[data-rs-no-transition] :after,[data-rs-no-transition] :before{transition:none!important}

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

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

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

@@ -1,5 +1,6 @@
 import { Example, Placeholder } from "../../../utilities/storybook/index.js";
 import Scrim from "../index.js";
+import { expect } from "storybook/test";
 export default {
     title: "Components/Scrim",
     component: Scrim,
@@ -9,39 +10,58 @@ export default {
         },
     },
 };
-export const position = () => (<Example>
-		<Example.Item title="position: center">
-			<Scrim backgroundSlot={<Placeholder h={200}/>}>Scrim</Scrim>
-		</Example.Item>
+export const position = {
+    name: "position",
+    render: () => (<Example>
+			<Example.Item title="position: center">
+				<Scrim backgroundSlot={<Placeholder h={200}/>}>Scrim</Scrim>
+			</Example.Item>
 
-		<Example.Item title="position: bottom">
-			<Scrim position="bottom" backgroundSlot={<Placeholder h={200}/>}>
-				Scrim
-			</Scrim>
-		</Example.Item>
+			<Example.Item title="position: bottom">
+				<Scrim position="bottom" backgroundSlot={<Placeholder h={200}/>}>
+					Scrim
+				</Scrim>
+			</Example.Item>
 
-		<Example.Item title="position: top">
-			<Scrim position="top" backgroundSlot={<Placeholder h={200}/>}>
-				Scrim
-			</Scrim>
-		</Example.Item>
+			<Example.Item title="position: top">
+				<Scrim position="top" backgroundSlot={<Placeholder h={200}/>}>
+					Scrim
+				</Scrim>
+			</Example.Item>
 
-		<Example.Item title="position: start">
-			<Scrim position="start" backgroundSlot={<Placeholder h={200}/>}>
-				Scrim
-			</Scrim>
-		</Example.Item>
+			<Example.Item title="position: start">
+				<Scrim position="start" backgroundSlot={<Placeholder h={200}/>}>
+					Scrim
+				</Scrim>
+			</Example.Item>
 
-		<Example.Item title="position: end">
-			<Scrim position="end" backgroundSlot={<Placeholder h={200}/>}>
-				Scrim
+			<Example.Item title="position: end">
+				<Scrim position="end" backgroundSlot={<Placeholder h={200}/>}>
+					Scrim
+				</Scrim>
+			</Example.Item>
+		</Example>),
+};
+export const className = {
+    name: "className, attributes",
+    render: () => (<div data-testid="root">
+			<Scrim className="test-classname" attributes={{ id: "test-id" }}>
+				Content
 			</Scrim>
-		</Example.Item>
-	</Example>);
-export const composition = () => (<Example>
-		<Example.Item title="without backgroundSlot, size is based on the parent component">
-			<div style={{ height: 300, position: "relative" }}>
-				<Scrim>Text</Scrim>
-			</div>
-		</Example.Item>
-	</Example>);
+		</div>),
+    play: async ({ canvas }) => {
+        const root = canvas.getByTestId("root").firstChild;
+        expect(root).toHaveClass("test-classname");
+        expect(root).toHaveAttribute("id", "test-id");
+    },
+};
+export const composition = {
+    name: "test: composition",
+    render: () => (<Example>
+			<Example.Item title="without backgroundSlot, size is based on the parent component">
+				<div style={{ height: 300, position: "relative" }}>
+					<Scrim>Text</Scrim>
+				</div>
+			</Example.Item>
+		</Example>),
+};

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

@@ -1 +1 @@
-.root{--rs-scroll-area-thumb-size:calc(var(--rs-unit-x1) * 1.5);--rs-scroll-area-thumb-offset:calc(var(--rs-unit-x1) / 2);height:100%;overflow:hidden;position:relative}[data-rs-keyboard] .root:has(.scrollable:focus){box-shadow:var(--rs-focus-shadow)}.scrollable{height:100%;outline:none;overflow:auto;position:relative;scrollbar-width:none;-webkit-overflow-scrolling:touch}.scrollable::-webkit-scrollbar{display:none;height:0;width:0}.content{display:inline-block;min-height:100%;min-width:100%;vertical-align:top}.scrollbar{box-sizing:initial;padding:var(--rs-scroll-area-thumb-offset);position:absolute}.thumb{height:100%;position:relative;width:100%}.thumb:before{background:var(--rs-color-foreground-neutral);border-radius:var(--rs-radius-circular);content:"";display:block;opacity:0;position:absolute;transition:opacity var(--rs-duration-fast) var(--rs-easing-standard)}.--scrollbar-y{inset-block:0;inset-inline-end:0;width:var(--rs-scroll-area-thumb-size)}.--scrollbar-y .thumb:before{height:calc(var(--rs-scroll-area-ratio) * 100%);inset-block-start:calc(var(--rs-scroll-area-position) * 100%);width:100%}.--scrollbar-x{height:var(--rs-scroll-area-thumb-size);inset-block-end:0;inset-inline:0}.--scrollbar-x .thumb:before{height:100%;inset-inline-start:calc(var(--rs-scroll-area-position) * 100%);width:calc(var(--rs-scroll-area-ratio) * 100%)}.--scrollbar-y:not(:last-child){inset-block-end:calc(var(--rs-scroll-area-thumb-size) + var(--rs-scroll-area-thumb-offset) * 2)}.--scrollbar-y~.--scrollbar-x{inset-inline-end:calc(var(--rs-scroll-area-thumb-size) + var(--rs-scroll-area-thumb-offset) * 2)}.--display-hover:hover>.scrollbar .thumb:before,.--display-visible .thumb:before{opacity:.2}.--display-hover:hover .--scrollbar-dragging .thumb:before,.--scrollbar-dragging .thumb:before,.scrollbar:hover .thumb:before{opacity:.32}
+.root{--rs-scroll-area-thumb-size:calc(var(--rs-unit-x1) * 1.5);--rs-scroll-area-thumb-offset:calc(var(--rs-unit-x1) / 2);height:100%;overflow:hidden;position:relative}[data-rs-keyboard] .root:has(.scrollable:focus){box-shadow:var(--rs-shadow-focus)}.scrollable{height:100%;outline:none;overflow:auto;position:relative;scrollbar-width:none;-webkit-overflow-scrolling:touch}.scrollable::-webkit-scrollbar{display:none;height:0;width:0}.content{display:inline-block;min-height:100%;min-width:100%;vertical-align:top}.scrollbar{box-sizing:initial;padding:var(--rs-scroll-area-thumb-offset);position:absolute}.thumb{height:100%;position:relative;width:100%}.thumb:before{background:var(--rs-color-foreground-neutral);border-radius:var(--rs-radius-circular);content:"";display:block;opacity:0;position:absolute;transition:opacity var(--rs-duration-fast) var(--rs-easing-standard)}.--scrollbar-y{inset-block:0;inset-inline-end:0;width:var(--rs-scroll-area-thumb-size)}.--scrollbar-y .thumb:before{height:calc(var(--rs-scroll-area-ratio) * 100%);inset-block-start:calc(var(--rs-scroll-area-position) * 100%);width:100%}.--scrollbar-x{height:var(--rs-scroll-area-thumb-size);inset-block-end:0;inset-inline:0}.--scrollbar-x .thumb:before{height:100%;inset-inline-start:calc(var(--rs-scroll-area-position) * 100%);width:calc(var(--rs-scroll-area-ratio) * 100%)}.--scrollbar-y:not(:last-child){inset-block-end:calc(var(--rs-scroll-area-thumb-size) + var(--rs-scroll-area-thumb-offset) * 2)}.--scrollbar-y~.--scrollbar-x{inset-inline-end:calc(var(--rs-scroll-area-thumb-size) + var(--rs-scroll-area-thumb-offset) * 2)}.--display-hover:hover>.scrollbar .thumb:before,.--display-visible .thumb:before{opacity:.2}.--display-hover:hover .--scrollbar-dragging .thumb:before,.--scrollbar-dragging .thumb:before,.scrollbar:hover .thumb:before{opacity:.32}

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

@@ -1 +1 @@
-.root{background:var(--rs-color-background-elevation-base);display:flex;overflow:hidden;position:relative;z-index:0}.root,.root:after{border-radius:var(--rs-select-radius)}.root:after{box-shadow:var(--rs-shadow-border-faded);content:"";inset:0;pointer-events:none;position:absolute}[data-rs-keyboard] .root:focus-within{box-shadow:0 0 0 1px var(--rs-color-border-primary)}[data-rs-keyboard] .root:focus-within:after{box-shadow:0 0 0 1px var(--rs-color-border-primary) inset}.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}.input.input--placeholder{color:var(--rs-color-foreground-disabled)}.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);--rs-select-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:var(--rs-unit-x1)}.--size-medium{--rs-select-gap:var(--rs-unit-x2);--rs-select-chevron-size:var(--rs-unit-x4);--rs-select-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-x2)}.--size-large{--rs-select-gap:var(--rs-unit-x3);--rs-select-chevron-size:var(--rs-unit-x5);--rs-select-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-x3)}.--size-xlarge{--rs-select-gap:var(--rs-unit-x4);--rs-select-chevron-size:var(--rs-unit-x5);--rs-select-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-x4)}.root.--variant-faded{background:var(--rs-color-background-neutral-faded)}.root.--variant-faded:after{box-shadow:none}.root.--variant-faded:focus-within{border-color:var(--rs-color-border-primary)}.root.--variant-headless{background:transparent}.root.--variant-headless:after{box-shadow:none}.root.--variant-headless.--status-error,.root.--variant-headless.--status-error:focus-within,.root.--variant-headless:focus-within{border-color:transparent}.root.--variant-headless.--status-error:after,.root.--variant-headless.--status-error:focus-within:after,.root.--variant-headless:focus-within:after{box-shadow:none}.root.--status-error{box-shadow:0 0 0 1px var(--rs-color-border-critical)}.root.--status-error:after{box-shadow:0 0 0 1px var(--rs-color-border-critical) inset}.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);--rs-select-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:var(--rs-unit-x1)}.--size-medium--m{--rs-select-gap:var(--rs-unit-x2);--rs-select-chevron-size:var(--rs-unit-x4);--rs-select-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-x2)}.--size-large--m{--rs-select-gap:var(--rs-unit-x3);--rs-select-chevron-size:var(--rs-unit-x5);--rs-select-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-x3)}.--size-xlarge--m{--rs-select-gap:var(--rs-unit-x4);--rs-select-chevron-size:var(--rs-unit-x5);--rs-select-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-x4)}}@media (--rs-viewport-l ){.--size-small--l{--rs-select-gap:var(--rs-unit-x2);--rs-select-chevron-size:var(--rs-unit-x4);--rs-select-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:var(--rs-unit-x1)}.--size-medium--l{--rs-select-gap:var(--rs-unit-x2);--rs-select-chevron-size:var(--rs-unit-x4);--rs-select-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-x2)}.--size-large--l{--rs-select-gap:var(--rs-unit-x3);--rs-select-chevron-size:var(--rs-unit-x5);--rs-select-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-x3)}.--size-xlarge--l{--rs-select-gap:var(--rs-unit-x4);--rs-select-chevron-size:var(--rs-unit-x5);--rs-select-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-x4)}}@media (--rs-viewport-xl ){.--size-small--xl{--rs-select-gap:var(--rs-unit-x2);--rs-select-chevron-size:var(--rs-unit-x4);--rs-select-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:var(--rs-unit-x1)}.--size-medium--xl{--rs-select-gap:var(--rs-unit-x2);--rs-select-chevron-size:var(--rs-unit-x4);--rs-select-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-x2)}.--size-large--xl{--rs-select-gap:var(--rs-unit-x3);--rs-select-chevron-size:var(--rs-unit-x5);--rs-select-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-x3)}.--size-xlarge--xl{--rs-select-gap:var(--rs-unit-x4);--rs-select-chevron-size:var(--rs-unit-x5);--rs-select-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-x4)}}
+.root{background:var(--rs-color-background-elevation-base);display:flex;overflow:hidden;position:relative;z-index:0}.root,.root:after{border-radius:var(--rs-select-radius)}.root:after{box-shadow:0 0 0 1px var(--rs-color-border-neutral) inset;content:"";inset:0;pointer-events:none;position:absolute}[data-rs-keyboard] .root:focus-within:after{box-shadow:0 0 0 2px var(--rs-color-border-primary) inset}.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}.input.input--placeholder{color:var(--rs-color-foreground-disabled)}.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);--rs-select-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:var(--rs-unit-x1)}.--size-medium{--rs-select-gap:var(--rs-unit-x2);--rs-select-chevron-size:var(--rs-unit-x4);--rs-select-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-x2)}.--size-large{--rs-select-gap:var(--rs-unit-x3);--rs-select-chevron-size:var(--rs-unit-x5);--rs-select-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-x3)}.--size-xlarge{--rs-select-gap:var(--rs-unit-x4);--rs-select-chevron-size:var(--rs-unit-x5);--rs-select-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-x4)}.root.--variant-faded{background:var(--rs-color-background-neutral-faded)}.root.--variant-faded:after{box-shadow:none}.root.--variant-faded:focus-within{border-color:var(--rs-color-border-primary)}.root.--variant-headless{background:transparent}.root.--variant-headless:after{box-shadow:none}.root.--variant-headless.--status-error,.root.--variant-headless.--status-error:focus-within,.root.--variant-headless:focus-within{border-color:transparent}.root.--variant-headless.--status-error:after,.root.--variant-headless.--status-error:focus-within:after,.root.--variant-headless:focus-within:after{box-shadow:none}.root.--status-error:after{box-shadow:0 0 0 2px var(--rs-color-border-critical) inset}.root.--disabled{background:var(--rs-color-background-disabled-faded);border-color:var(--rs-color-border-disabled)}.root.--disabled:after{box-shadow:0 0 0 1px var(--rs-color-border-disabled) inset}.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);--rs-select-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:var(--rs-unit-x1)}.--size-medium--m{--rs-select-gap:var(--rs-unit-x2);--rs-select-chevron-size:var(--rs-unit-x4);--rs-select-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-x2)}.--size-large--m{--rs-select-gap:var(--rs-unit-x3);--rs-select-chevron-size:var(--rs-unit-x5);--rs-select-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-x3)}.--size-xlarge--m{--rs-select-gap:var(--rs-unit-x4);--rs-select-chevron-size:var(--rs-unit-x5);--rs-select-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-x4)}}@media (--rs-viewport-l ){.--size-small--l{--rs-select-gap:var(--rs-unit-x2);--rs-select-chevron-size:var(--rs-unit-x4);--rs-select-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:var(--rs-unit-x1)}.--size-medium--l{--rs-select-gap:var(--rs-unit-x2);--rs-select-chevron-size:var(--rs-unit-x4);--rs-select-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-x2)}.--size-large--l{--rs-select-gap:var(--rs-unit-x3);--rs-select-chevron-size:var(--rs-unit-x5);--rs-select-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-x3)}.--size-xlarge--l{--rs-select-gap:var(--rs-unit-x4);--rs-select-chevron-size:var(--rs-unit-x5);--rs-select-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-x4)}}@media (--rs-viewport-xl ){.--size-small--xl{--rs-select-gap:var(--rs-unit-x2);--rs-select-chevron-size:var(--rs-unit-x4);--rs-select-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:var(--rs-unit-x1)}.--size-medium--xl{--rs-select-gap:var(--rs-unit-x2);--rs-select-chevron-size:var(--rs-unit-x4);--rs-select-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-x2)}.--size-large--xl{--rs-select-gap:var(--rs-unit-x3);--rs-select-chevron-size:var(--rs-unit-x5);--rs-select-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-x3)}.--size-xlarge--xl{--rs-select-gap:var(--rs-unit-x4);--rs-select-chevron-size:var(--rs-unit-x5);--rs-select-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-x4)}}

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

@@ -3,6 +3,7 @@ import type * as G from "../../types/global";
 import type { IconProps } from "../Icon";
 import type { ActionableProps } from "../Actionable";
 import type { MenuItemProps } from "../MenuItem";
+import { DropdownMenuProps } from "../DropdownMenu";
 type Size = G.Responsive<"small" | "medium" | "large" | "xlarge">;
 type NativeOption = {
     /** Option text label */
@@ -49,21 +50,17 @@ type BaseFragment = {
 export type CustomFragment = {
     /** Options for the select */
     options?: never;
-    /** Callback when the input value changes */
-    onChange?: G.ChangeHandler<string>;
     /** Callback when the input is focused */
     onFocus?: (e: React.FocusEvent<HTMLButtonElement>) => void;
     /** Callback when the input is blurred */
     onBlur?: (e: React.FocusEvent<HTMLButtonElement>) => void;
     /** Additional attributes for the trigger element */
     inputAttributes?: ActionableProps["attributes"];
-};
+} & Pick<DropdownMenuProps, "position" | "width" | "fallbackPositions">;
 export type NativeFragment = {
     /** Options for the select */
     /** @deprecated Use <option /> children instead */
     options?: NativeOption[];
-    /** Callback when the input value changes */
-    onChange?: G.ChangeHandler<string, React.ChangeEvent<HTMLSelectElement>>;
     /** Callback when the input is focused */
     onFocus?: (e: React.FocusEvent<HTMLSelectElement>) => void;
     /** Callback when the input is blurred */
@@ -71,18 +68,48 @@ export type NativeFragment = {
     /** Additional attributes for the input element */
     inputAttributes?: G.Attributes<"select">;
 };
-export type ControlledFragment = {
+export type NativeControlledFragment = {
     value: string;
     defaultValue?: never;
+    /** Callback when the input value changes */
+    onChange?: G.ChangeHandler<string, React.ChangeEvent<HTMLSelectElement>>;
 };
-export type UncontrolledFragment = {
+export type NativeUncontrolledFragment = {
     value?: never;
     defaultValue?: string;
+    /** Callback when the input value changes */
+    onChange?: G.ChangeHandler<string, React.ChangeEvent<HTMLSelectElement>>;
+};
+export type CustomControlledFragment = {
+    multiple?: false;
+    value: string;
+    defaultValue?: never;
+    /** Callback when the input value changes */
+    onChange?: G.ChangeHandler<string>;
+} | {
+    multiple: true;
+    value: string[];
+    defaultValue?: never[];
+    /** Callback when the input value changes */
+    onChange?: G.ChangeHandler<string[]>;
+};
+export type CustomUncontrolledFragment = {
+    multiple?: false;
+    value?: never;
+    defaultValue?: string;
+    /** Callback when the input value changes */
+    onChange?: G.ChangeHandler<string>;
+} | {
+    multiple: true;
+    value?: never[];
+    defaultValue?: string[];
+    /** Callback when the input value changes */
+    onChange?: G.ChangeHandler<string[]>;
 };
-export type NativeControlledProps = BaseFragment & NativeFragment & ControlledFragment;
-export type NativeUncontrolledProps = BaseFragment & NativeFragment & UncontrolledFragment;
-export type CustomControlledProps = BaseFragment & CustomFragment & ControlledFragment;
-export type CustomUncontrolledProps = BaseFragment & CustomFragment & UncontrolledFragment;
+export type NativeControlledProps = BaseFragment & NativeFragment & NativeControlledFragment;
+export type NativeUncontrolledProps = BaseFragment & NativeFragment & NativeUncontrolledFragment;
+export type CustomControlledProps = BaseFragment & CustomFragment & CustomControlledFragment;
+export type CustomUncontrolledProps = BaseFragment & CustomFragment & CustomUncontrolledFragment;
 export type NativeProps = NativeControlledProps | NativeUncontrolledProps;
 export type CustomProps = CustomControlledProps | CustomUncontrolledProps;
 export type Props = NativeControlledProps | NativeUncontrolledProps | CustomControlledProps | CustomUncontrolledProps;

package/dist/components/Select/SelectCustom.js

@@ -3,8 +3,9 @@ import SelectCustomControlled from "./SelectCustomControlled.js";
 import SelectCustomUncontrolled from "./SelectCustomUncontrolled.js";
 const SelectCustom = (props) => {
     const { value } = props;
-    if (value !== undefined)
+    if (value !== undefined) {
         return _jsx(SelectCustomControlled, { ...props });
+    }
     return _jsx(SelectCustomUncontrolled, { ...props });
 };
 SelectCustom.displayName = "SelectCustom";