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

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,102 @@
+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 { isMatchingComponentChildId, responsivePropDependency } from "../../utilities/props.js";
+import SelectRoot from "./SelectRoot.js";
+import SelectTrigger from "./SelectTrigger.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 (isMatchingComponentChildId(child, "Select.Option")) {
+                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 (isMatchingComponentChildId(child, "Select.OptionGroup")) {
+                const component = child;
+                const optionGroup = component.props;
+                return React.cloneElement(component, {
+                    key: optionGroup.label,
+                    children: traverseOptionList(optionGroup.children),
+                });
+            }
+            return null;
+        });
+    };
+    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,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import DropdownMenu from "../DropdownMenu/index.js";
+import { setComponentChildId } from "../../utilities/props.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";
+setComponentChildId(SelectOption, "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;

package/dist/components/Select/SelectOptionGroup.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import View from "../View/index.js";
+import Text from "../Text/index.js";
+import { setComponentChildId } from "../../utilities/props.js";
+const SelectOptionGroup = (props) => {
+    const { label, children } = props;
+    return (_jsxs(View, { attributes: { role: "group" }, gap: 1, children: [_jsx(View, { paddingInline: 3, paddingTop: 3, children: _jsx(Text, { variant: "caption-1", color: "neutral-faded", children: label }) }), _jsx(View.Item, { children: children })] }));
+};
+SelectOptionGroup.displayName = "Select.OptionGroup";
+setComponentChildId(SelectOptionGroup, "Select.OptionGroup");
+export default SelectOptionGroup;

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

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

package/dist/components/Select/SelectRoot.js

@@ -0,0 +1,21 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import useElementId from "../../hooks/useElementId.js";
+import { useFormControl } from "../FormControl/index.js";
+import { classNames, responsiveClassNames } from "../../utilities/props.js";
+import s from "./Select.module.css";
+const SelectRoot = (passedProps) => {
+    const formControl = useFormControl();
+    const internalId = useElementId(passedProps.id);
+    const props = {
+        ...passedProps,
+        id: formControl?.attributes?.id || passedProps.inputAttributes?.id || internalId,
+        disabled: formControl?.disabled || passedProps.disabled,
+        hasError: formControl?.hasError || passedProps.hasError,
+        inputAttributes: { ...passedProps.inputAttributes, ...formControl?.attributes },
+    };
+    const { children, className, size = "medium", variant = "outline", hasError, disabled, attributes, } = props;
+    const rootClassName = classNames(s.root, className, size && responsiveClassNames(s, "--size", size), hasError && s["--status-error"], disabled && s["--disabled"], variant && s[`--variant-${variant}`]);
+    return (_jsx("div", { ...attributes, className: rootClassName, children: children(props) }));
+};
+export default SelectRoot;

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

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

package/dist/components/Select/SelectStartContent.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import Icon from "../Icon/index.js";
+import { responsivePropDependency } from "../../utilities/props.js";
+import s from "./Select.module.css";
+const SelectStartContent = (props) => {
+    const { startSlot, icon, size } = props;
+    if (!startSlot && !icon)
+        return null;
+    if (icon) {
+        return (_jsx("div", { className: s.slot, children: _jsx(Icon, { size: responsivePropDependency(size, (size) => {
+                    if (size === "large")
+                        return 5;
+                    if (size === "xlarge")
+                        return 6;
+                    return 4;
+                }), svg: icon }) }));
+    }
+    return _jsx("div", { className: s.slot, children: startSlot });
+};
+export default SelectStartContent;

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

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

package/dist/components/Select/SelectTrigger.js

@@ -0,0 +1,16 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import Actionable from "../Actionable/index.js";
+import Text from "../Text/index.js";
+import SelectStartContent from "./SelectStartContent.js";
+import s from "./Select.module.css";
+import SelectEndContent from "./SelectEndContent.js";
+const SelectTrigger = (props) => {
+    const { children, disabled, onClick, onFocus, onBlur, inputAttributes, startSlot, icon, size, placeholder, value, name, id, } = props;
+    return (_jsxs(_Fragment, { children: [_jsxs(Actionable, { className: s.input, disabled: disabled, disableFocusRing: true, onClick: onClick, attributes: {
+                    onFocus: onFocus || inputAttributes?.onFocus,
+                    onBlur: onBlur || inputAttributes?.onBlur,
+                    ...inputAttributes,
+                }, children: [_jsx(SelectStartContent, { startSlot: startSlot, icon: icon, size: size }), children ? _jsx(Text, { maxLines: 1, children: children }) : null, placeholder && !children ? _jsx(Text, { color: "disabled", children: placeholder }) : null, _jsx(SelectEndContent, { disabled: disabled, size: size })] }), _jsx("input", { type: "hidden", value: typeof value === "string" ? value : JSON.stringify(value), name: name, id: id })] }));
+};
+export default SelectTrigger;

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

@@ -1,6 +1,13 @@
+import React from "react";
+import { Mock } from "storybook/test";
+import { StoryObj } from "@storybook/react-vite";
 declare const _default: {
     title: string;
-    component: import("react").FC<import("./..").SelectProps>;
+    component: React.FC<import("../Select.types").NativeProps> & {
+        Custom: React.FC<import("../Select.types").CustomProps>;
+        Option: React.FC<import("../Select.types").OptionProps>;
+        OptionGroup: React.FC<import("../Select.types").OptionGroupProps>;
+    };
     parameters: {
         iframe: {
             url: string;
@@ -8,12 +15,33 @@ declare const _default: {
     };
 };
 export default _default;
-export declare const value: () => import("react").JSX.Element;
-export declare const variants: () => import("react").JSX.Element;
-export declare const size: () => import("react").JSX.Element;
-export declare const disabled: () => import("react").JSX.Element;
-export declare const error: () => import("react").JSX.Element;
-export declare const icon: () => import("react").JSX.Element;
-export declare const slots: () => import("react").JSX.Element;
-export declare const triggerComposition: () => import("react").JSX.Element;
-export declare const formControl: () => import("react").JSX.Element;
+export declare const nativeRender: StoryObj;
+export declare const customRender: StoryObj;
+export declare const nativeHandlers: StoryObj<{
+    handleChange: Mock;
+    handleControlledChange: Mock;
+    handleFocus: Mock;
+    handleBlur: Mock;
+    handleClick: Mock;
+}>;
+export declare const customHandlers: StoryObj<{
+    handleChange: Mock;
+    handleControlledChange: Mock;
+    handleFocus: Mock;
+    handleBlur: Mock;
+    handleClick: Mock;
+}>;
+export declare const triggerOnly: StoryObj<{
+    handleClick: Mock;
+}>;
+export declare const multiple: StoryObj<{
+    handleChange: Mock;
+}>;
+export declare const variant: StoryObj;
+export declare const size: StoryObj;
+export declare const startSlot: StoryObj;
+export declare const error: StoryObj;
+export declare const disabled: StoryObj;
+export declare const className: StoryObj;
+export declare const fallback: StoryObj;
+export declare const formControl: StoryObj;