reshaped 3.8.0-canary.0 → 3.8.0-canary.10

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;

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

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

@@ -1,10 +1,11 @@
 import React from "react";
 import type * as G from "../../types/global";
-import type { FormControlProps } from "../FormControl";
-import type { ActionableProps } from "../Actionable";
 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 Option = {
+type NativeOption = {
     /** Option text label */
     label: string;
     /** Option value used in the form submission */
@@ -12,40 +13,14 @@ type Option = {
     /** Disable the option from the selection */
     disabled?: boolean;
 };
-export type ButtonTriggerProps = {
-    /** Callback when the button is clicked */
-    onClick?: () => void;
-    /** Node for inserting children */
-    children?: React.ReactNode;
-    /** Additional attributes for the input element */
-    inputAttributes?: ActionableProps["attributes"];
-    /** Callback when the input is focused */
-    onFocus?: (e: React.FocusEvent<HTMLButtonElement>) => void;
-    /** Callback when the input is blurred */
-    onBlur?: (e: React.FocusEvent<HTMLButtonElement>) => void;
-    /** Options for the select */
-    options?: never;
-    /** Callback when the input value changes */
-    onChange?: never;
+export type OptionProps = Pick<MenuItemProps, "attributes" | "children" | "className" | "disabled" | "endSlot" | "startSlot" | "icon" | "onClick"> & {
+    value: string;
 };
-export type SelectTriggerProps = {
-    /** Options for the select */
-    options: Option[];
-    /** 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 */
-    onBlur?: (e: React.FocusEvent<HTMLSelectElement>) => void;
-    /** Additional attributes for the input element */
-    inputAttributes?: G.Attributes<"select">;
-    /** Callback when the button is clicked */
-    onClick?: never;
-    /** Node for inserting children */
-    children?: never;
+export type OptionGroupProps = {
+    label: string;
+    children: React.ReactNode;
 };
-type BaseProps = ((ButtonTriggerProps | SelectTriggerProps) & Pick<FormControlProps, "hasError">) & {
-    /** Unique identifier for the select */
+type BaseFragment = {
     id?: string;
     /** Name of the input element */
     name: string;
@@ -61,18 +36,88 @@ type BaseProps = ((ButtonTriggerProps | SelectTriggerProps) & Pick<FormControlPr
     icon?: IconProps["svg"];
     /** Node for inserting content before the select value */
     startSlot?: React.ReactNode;
+    /** Show an error state, automatically inherited when component is used inside FormControl */
+    hasError?: boolean;
+    /** Callback when the trigger is clicked */
+    onClick?: ActionableProps["onClick"];
     /** Additional classname for the root element */
     className?: G.ClassName;
     /** Additional attributes for the root element */
     attributes?: G.Attributes<"div">;
+    /** Node for inserting children */
+    children?: React.ReactNode;
 };
-export type ControlledProps = BaseProps & {
+export type CustomFragment = {
+    /** Options for the select */
+    options?: never;
+    /** 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 is focused */
+    onFocus?: (e: React.FocusEvent<HTMLSelectElement>) => void;
+    /** Callback when the input is blurred */
+    onBlur?: (e: React.FocusEvent<HTMLSelectElement>) => void;
+    /** Additional attributes for the input element */
+    inputAttributes?: G.Attributes<"select">;
+};
+export type NativeControlledFragment = {
     value: string;
     defaultValue?: never;
+    /** Callback when the input value changes */
+    onChange?: G.ChangeHandler<string, React.ChangeEvent<HTMLSelectElement>>;
 };
-export type UncontrolledProps = BaseProps & {
+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 & 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;
+export type TriggerProps = Pick<CustomControlledProps, "disabled" | "onClick" | "onFocus" | "onBlur" | "inputAttributes" | "startSlot" | "icon" | "size" | "placeholder" | "value" | "name" | "id"> & {
+    children?: React.ReactNode;
+};
+export type RootProps = Omit<Props, "children"> & {
+    children: (props: Omit<Props, "children">) => React.ReactNode;
 };
-export type Props = ControlledProps | UncontrolledProps;
+export type SelectContextProps = CustomControlledProps;
 export {};

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

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

package/dist/components/Select/SelectCustom.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import SelectCustomControlled from "./SelectCustomControlled.js";
+import SelectCustomUncontrolled from "./SelectCustomUncontrolled.js";
+const SelectCustom = (props) => {
+    const { value } = props;
+    if (value !== undefined) {
+        return _jsx(SelectCustomControlled, { ...props });
+    }
+    return _jsx(SelectCustomUncontrolled, { ...props });
+};
+SelectCustom.displayName = "SelectCustom";
+export default SelectCustom;

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

@@ -0,0 +1,4 @@
+import React from "react";
+import type * as T from "./Select.types";
+declare const SelectCustomControlled: React.FC<T.CustomControlledProps>;
+export default SelectCustomControlled;

package/dist/components/Select/SelectCustomControlled.js

@@ -0,0 +1,105 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import DropdownMenu from "../DropdownMenu/index.js";
+import Icon from "../Icon/index.js";
+import CheckmarkIcon from "../../icons/Checkmark.js";
+import { responsivePropDependency } from "../../utilities/props.js";
+import SelectRoot from "./SelectRoot.js";
+import SelectTrigger from "./SelectTrigger.js";
+import SelectOption from "./SelectOption.js";
+import SelectOptionGroup from "./SelectOptionGroup.js";
+const SelectCustomControlled = (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 = [];
+    const selectedOptions = [];
+    const hasValue = multiple ? value.length > 0 : value;
+    const traverseOptionList = (children) => {
+        return React.Children.map(children, (child, index) => {
+            if (!React.isValidElement(child))
+                return null;
+            if (child.type === SelectOption) {
+                const component = child;
+                const option = component.props;
+                const matchingValue = multiple ? value.includes(option.value) : option.value === value;
+                const selected = matchingValue || (!placeholder && !value && index === 0);
+                if (selected)
+                    selectedOptions.push(option);
+                indexedOptions.push({
+                    value: option.value,
+                    text: typeof option.children === "string" ? option.children : option.value,
+                });
+                return React.cloneElement(component, {
+                    key: option.value,
+                    onClick: (e) => {
+                        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 || (hasValue && _jsx(Icon, { svg: selected ? CheckmarkIcon : null })),
+                    attributes: {
+                        ...component.props.attributes,
+                        ref: selected ? initialFocusRef : undefined,
+                    },
+                });
+            }
+            if (child.type === SelectOptionGroup) {
+                const component = child;
+                const optionGroup = component.props;
+                return React.cloneElement(component, {
+                    key: optionGroup.label,
+                    children: traverseOptionList(optionGroup.children),
+                });
+            }
+            return null;
+        });
+    };
+    // eslint-disable-next-line react-hooks/refs
+    const resolvedChildren = traverseOptionList(children);
+    const handleKeyDown = (e) => {
+        const key = e.key;
+        // Only handle alphanumeric and space characters for type-ahead
+        if (key.length !== 1 || !key.match(/[\w\s]/))
+            return;
+        if (searchTimeoutRef.current)
+            clearTimeout(searchTimeoutRef.current);
+        searchStringRef.current += key.toLowerCase();
+        const matchingOption = indexedOptions.find((option) => option.text.toLowerCase().startsWith(searchStringRef.current));
+        if (matchingOption && dropdownRef.current) {
+            const button = dropdownRef.current.querySelector(`[value="${matchingOption.value}"]`);
+            button?.focus();
+        }
+        searchTimeoutRef.current = setTimeout(() => {
+            searchStringRef.current = "";
+        }, 1000);
+    };
+    return (_jsx(SelectRoot, { ...props, children: (props) => {
+            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: {
+                                    ...props.inputAttributes,
+                                    ...attributes,
+                                },
+                            };
+                            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";
+export default SelectCustomControlled;

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

@@ -0,0 +1,4 @@
+import React from "react";
+import type * as T from "./Select.types";
+declare const SelectCustomUncontrolled: React.FC<T.CustomUncontrolledProps>;
+export default SelectCustomUncontrolled;

package/dist/components/Select/SelectCustomUncontrolled.js

@@ -0,0 +1,18 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from "react";
+import SelectCustomControlled from "./SelectCustomControlled.js";
+const SelectCustomUncontrolled = (props) => {
+    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/SelectEndContent.d.ts

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

package/dist/components/Select/SelectEndContent.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import Icon from "../Icon/index.js";
+import { responsivePropDependency } from "../../utilities/props.js";
+import IconArrow from "../../icons/ChevronVertical.js";
+import s from "./Select.module.css";
+const SelectEndContent = (props) => {
+    const { disabled, size } = props;
+    return (_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;
+            }) }) }));
+};
+export default SelectEndContent;

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

@@ -0,0 +1,4 @@
+import React from "react";
+import type * as T from "./Select.types";
+declare const SelectNative: React.FC<T.NativeProps>;
+export default SelectNative;

package/dist/components/Select/SelectNative.js

@@ -0,0 +1,29 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React from "react";
+import { classNames } from "../../utilities/props.js";
+import SelectStartContent from "./SelectStartContent.js";
+import SelectEndContent from "./SelectEndContent.js";
+import s from "./Select.module.css";
+const SelectNative = (props) => {
+    const { startSlot, icon, size, inputAttributes, onFocus, onBlur, disabled, name, value, defaultValue, onChange, onClick, placeholder, id, children, } = props;
+    const [empty, setEmpty] = React.useState(value === undefined ? !defaultValue : !value);
+    const selectClassNames = classNames(s.input, placeholder && empty && s["input--placeholder"]);
+    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]);
+    return (_jsxs(_Fragment, { children: [_jsx(SelectStartContent, { startSlot: startSlot, icon: icon, size: size }), _jsxs("select", { ...inputAttributes, onFocus: onFocus || inputAttributes?.onFocus, onBlur: onBlur || inputAttributes?.onBlur, onClick: onClick || inputAttributes?.onClick, className: selectClassNames, disabled: disabled, name: name, value: value, defaultValue: defaultValue, onChange: handleChange, id: id, children: [placeholder && _jsx("option", { value: "", children: placeholder }), children] }), _jsx(SelectEndContent, { disabled: disabled, size: size })] }));
+};
+export default SelectNative;

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

@@ -0,0 +1,4 @@
+import React from "react";
+import type * as T from "./Select.types";
+declare const SelectOption: React.FC<T.OptionProps>;
+export default SelectOption;

package/dist/components/Select/SelectOption.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import DropdownMenu from "../DropdownMenu/index.js";
+import s from "./Select.module.css";
+const SelectOption = (props) => {
+    const { value, ...menuItemProps } = props;
+    return (_jsx(DropdownMenu.Item, { ...menuItemProps, className: [menuItemProps.className, s.option], color: "neutral", attributes: {
+            ...menuItemProps.attributes,
+            value,
+            role: "option",
+        } }));
+};
+SelectOption.displayName = "Select.Option";
+export default SelectOption;

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

@@ -0,0 +1,4 @@
+import React from "react";
+import type * as T from "./Select.types";
+declare const SelectOptionGroup: React.FC<T.OptionGroupProps>;
+export default SelectOptionGroup;