reshaped 3.8.0-canary.6 → 3.8.0-canary.8

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)}[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/Resizable/Resizable.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
-import { classNames } from "../../utilities/props.js";
+import { classNames, setComponentChildId, isMatchingComponentChildId } from "../../utilities/props.js";
 import View from "../View/index.js";
 import ResizableHandle, { ResizableHandleContext } from "./ResizableHandle.js";
 import s from "./Resizable.module.css";
@@ -113,10 +113,10 @@ const Resizable = (props) => {
     }, [horizontal]);
     const output = React.Children.map(children, (child) => {
         const isComponent = React.isValidElement(child);
-        if (isComponent && child.props && child.type !== Resizable.Item) {
+        if (isComponent && child.props && !isMatchingComponentChildId(child, "Resizable.Item")) {
             return (_jsx(ResizableHandleContext.Provider, { value: { containerRef, index: currentHandleIndex++, onDrag, direction }, children: child }));
         }
-        if (isComponent && child.props && child.type === Resizable.Item) {
+        if (isComponent && child.props && isMatchingComponentChildId(child, "Resizable.Item")) {
             const index = currentHandleIndex;
             return (_jsx(PrivateResizableItem, { ...child.props, index: currentItemIndex++, ref: (el) => {
                     itemsRef.current[index] = { el, props: child.props };
@@ -127,6 +127,7 @@ 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;
+setComponentChildId(Resizable.Item, "Resizable.Item");
 Resizable.Handle = ResizableHandle;
 Resizable.displayName = "Resizable";
 export default Resizable;

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.d.ts

@@ -1,4 +1,11 @@
 import React from "react";
 import type * as T from "./Select.types";
-declare const Select: React.FC<T.Props>;
+import SelectOption from "./SelectOption";
+import SelectOptionGroup from "./SelectOptionGroup";
+import SelectCustom from "./SelectCustom";
+declare const Select: React.FC<T.NativeProps> & {
+    Custom: typeof SelectCustom;
+    Option: typeof SelectOption;
+    OptionGroup: typeof SelectOptionGroup;
+};
 export default Select;

package/dist/components/Select/Select.js

@@ -1,53 +1,27 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
-import Icon from "../Icon/index.js";
-import { useFormControl } from "../FormControl/index.js";
-import Actionable from "../Actionable/index.js";
-import Text from "../Text/index.js";
-import IconArrow from "../../icons/ChevronVertical.js";
-import { classNames, responsiveClassNames, responsivePropDependency } from "../../utilities/props.js";
-import useElementId from "../../hooks/useElementId.js";
-import s from "./Select.module.css";
+import SelectNative from "./SelectNative.js";
+import SelectRoot from "./SelectRoot.js";
+import SelectTrigger from "./SelectTrigger.js";
+import SelectOption from "./SelectOption.js";
+import SelectOptionGroup from "./SelectOptionGroup.js";
+import SelectCustom from "./SelectCustom.js";
 const Select = (props) => {
-    const { onChange, onClick, onFocus, onBlur, name, value, defaultValue, placeholder, options, children, icon, startSlot, size = "medium", variant = "outline", className, attributes, } = props;
-    const [empty, setEmpty] = React.useState(value === undefined ? !defaultValue : !value);
-    const formControl = useFormControl();
-    const id = useElementId(props.id);
-    const inputId = formControl?.attributes?.id || props.inputAttributes?.id || id;
-    const disabled = formControl?.disabled || props.disabled;
-    const hasError = formControl?.hasError || props.hasError;
-    const inputAttributes = { ...props.inputAttributes, ...formControl?.attributes };
-    const rootClassName = classNames(s.root, className, size && responsiveClassNames(s, "--size", size), hasError && s["--status-error"], disabled && s["--disabled"], empty && options && s["--placeholder"], variant && s[`--variant-${variant}`]);
-    const handleChange = (event) => {
-        const nextValue = event.target.value;
-        // Uncontrolled placeholder
-        if (value === undefined)
-            setEmpty(!nextValue);
-        if (!onChange)
-            return;
-        onChange({ name, value: nextValue, event });
-    };
-    // Controlled placeholder
-    React.useEffect(() => {
-        if (value === undefined)
-            return;
-        setEmpty(!value);
-    }, [value]);
-    const startContent = (startSlot || icon) && (_jsx("div", { className: s.slot, children: icon ? (_jsx(Icon, { size: responsivePropDependency(size, (size) => {
-                if (size === "large")
-                    return 5;
-                if (size === "xlarge")
-                    return 6;
-                return 4;
-            }), svg: icon })) : (startSlot) }));
-    return (_jsxs("div", { ...attributes, className: rootClassName, children: [options ? (_jsxs(_Fragment, { children: [startContent, _jsxs("select", { ...inputAttributes, onFocus: (onFocus || inputAttributes?.onFocus), onBlur: (onBlur || inputAttributes?.onBlur), className: s.input, disabled: disabled, name: name, value: value, defaultValue: defaultValue, onChange: handleChange, id: inputId, children: [placeholder && _jsx("option", { value: "", children: placeholder }), options.map((option) => (_jsx("option", { value: option.value, disabled: option.disabled, children: option.label }, option.value)))] })] })) : (_jsxs(_Fragment, { children: [_jsxs(Actionable, { className: s.input, disabled: disabled, disableFocusRing: true, onClick: onClick, attributes: {
-                            ...inputAttributes,
-                            onFocus: onFocus || inputAttributes?.onFocus,
-                            onBlur: onBlur || inputAttributes?.onBlur,
-                        }, 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;
-                    }) }) })] }));
+    const { children } = props;
+    return (_jsx(SelectRoot, { ...props, children: (props) => {
+            const { options } = props;
+            const hasOptionChildren = React.Children.toArray(children).some((child) => {
+                return React.isValidElement(child) && child.type === "option";
+            });
+            const hasOptions = Boolean(options || hasOptionChildren);
+            if (!hasOptions) {
+                return _jsx(SelectTrigger, { ...props, children: children });
+            }
+            return (_jsxs(SelectNative, { ...props, children: [options?.map((option) => (_jsx("option", { value: option.value, disabled: option.disabled, children: option.label }, option.value))), children] }));
+        } }));
 };
 Select.displayName = "Select";
+Select.Custom = SelectCustom;
+Select.Option = SelectOption;
+Select.OptionGroup = SelectOptionGroup;
 export default Select;