@bug-on/m3-expressive 1.3.1 → 1.3.2

package/dist/overlays.d.mts

@@ -1,5 +1,5 @@
-import { S as SheetValue } from './side-sheet-modal-Dgjt739k.mjs';
-export { B as BaseSheetProps, a as BottomSheet, b as BottomSheetHandle, c as BottomSheetModal, d as BottomSheetModalProps, e as BottomSheetProps, f as BottomSheetSnapPoint, D as Dialog, g as DialogBody, h as DialogClose, i as DialogContent, j as DialogContentProps, k as DialogDescription, l as DialogFooter, m as DialogFullScreenContent, n as DialogFullScreenContentProps, o as DialogHeader, p as DialogIcon, q as DialogOverlay, r as DialogPortal, s as DialogProps, t as DialogTitle, u as DialogTrigger, v as DragHandle, w as DragHandleProps, x as Drawer, y as DrawerClose, z as DrawerContent, A as DrawerContentProps, C as DrawerDescription, E as DrawerFooter, F as DrawerHeader, G as DrawerOverlay, H as DrawerPortal, I as DrawerProps, J as DrawerTitle, K as DrawerTrigger, L as Scrim, M as ScrimProps, N as SheetEdge, O as SheetState, P as SideSheet, Q as SideSheetModal, R as SideSheetModalProps, T as SideSheetProps, U as UseBottomSheetOptions, V as UseBottomSheetReturn, W as useBottomSheet } from './side-sheet-modal-Dgjt739k.mjs';
+import { W as SheetValue } from './side-sheet-modal-64FGhDxL.mjs';
+export { B as BaseSheetProps, a as BottomSheet, b as BottomSheetHandle, c as BottomSheetModal, d as BottomSheetModalProps, e as BottomSheetProps, f as BottomSheetSnapPoint, D as Dialog, g as DialogBody, h as DialogClose, i as DialogContent, j as DialogContentProps, k as DialogDescription, l as DialogFooter, m as DialogFullScreenContent, n as DialogFullScreenContentProps, o as DialogHeader, p as DialogIcon, q as DialogOverlay, r as DialogPortal, s as DialogProps, t as DialogTitle, u as DialogTrigger, v as DragHandle, w as DragHandleProps, x as Drawer, y as DrawerClose, z as DrawerContent, A as DrawerContentProps, C as DrawerDescription, E as DrawerFooter, F as DrawerHeader, G as DrawerOverlay, H as DrawerPortal, I as DrawerProps, J as DrawerTitle, K as DrawerTrigger, S as Scrim, L as ScrimProps, M as SheetEdge, N as SheetState, O as SideSheet, P as SideSheetModal, Q as SideSheetModalProps, R as SideSheetProps, U as UseBottomSheetOptions, T as UseBottomSheetReturn, V as useBottomSheet } from './side-sheet-modal-64FGhDxL.mjs';
 import * as React$1 from 'react';
 import { useMotionValue, PanInfo } from 'motion/react';
 import 'react/jsx-runtime';

package/dist/overlays.d.ts

@@ -1,5 +1,5 @@
-import { S as SheetValue } from './side-sheet-modal-DdEZR6Vl.js';
-export { B as BaseSheetProps, a as BottomSheet, b as BottomSheetHandle, c as BottomSheetModal, d as BottomSheetModalProps, e as BottomSheetProps, f as BottomSheetSnapPoint, D as Dialog, g as DialogBody, h as DialogClose, i as DialogContent, j as DialogContentProps, k as DialogDescription, l as DialogFooter, m as DialogFullScreenContent, n as DialogFullScreenContentProps, o as DialogHeader, p as DialogIcon, q as DialogOverlay, r as DialogPortal, s as DialogProps, t as DialogTitle, u as DialogTrigger, v as DragHandle, w as DragHandleProps, x as Drawer, y as DrawerClose, z as DrawerContent, A as DrawerContentProps, C as DrawerDescription, E as DrawerFooter, F as DrawerHeader, G as DrawerOverlay, H as DrawerPortal, I as DrawerProps, J as DrawerTitle, K as DrawerTrigger, L as Scrim, M as ScrimProps, N as SheetEdge, O as SheetState, P as SideSheet, Q as SideSheetModal, R as SideSheetModalProps, T as SideSheetProps, U as UseBottomSheetOptions, V as UseBottomSheetReturn, W as useBottomSheet } from './side-sheet-modal-DdEZR6Vl.js';
+import { W as SheetValue } from './side-sheet-modal-Bd5Qqvp9.js';
+export { B as BaseSheetProps, a as BottomSheet, b as BottomSheetHandle, c as BottomSheetModal, d as BottomSheetModalProps, e as BottomSheetProps, f as BottomSheetSnapPoint, D as Dialog, g as DialogBody, h as DialogClose, i as DialogContent, j as DialogContentProps, k as DialogDescription, l as DialogFooter, m as DialogFullScreenContent, n as DialogFullScreenContentProps, o as DialogHeader, p as DialogIcon, q as DialogOverlay, r as DialogPortal, s as DialogProps, t as DialogTitle, u as DialogTrigger, v as DragHandle, w as DragHandleProps, x as Drawer, y as DrawerClose, z as DrawerContent, A as DrawerContentProps, C as DrawerDescription, E as DrawerFooter, F as DrawerHeader, G as DrawerOverlay, H as DrawerPortal, I as DrawerProps, J as DrawerTitle, K as DrawerTrigger, S as Scrim, L as ScrimProps, M as SheetEdge, N as SheetState, O as SideSheet, P as SideSheetModal, Q as SideSheetModalProps, R as SideSheetProps, U as UseBottomSheetOptions, T as UseBottomSheetReturn, V as useBottomSheet } from './side-sheet-modal-Bd5Qqvp9.js';
 import * as React$1 from 'react';
 import { useMotionValue, PanInfo } from 'motion/react';
 import 'react/jsx-runtime';

package/dist/{side-sheet-modal-Dgjt739k.d.mts → side-sheet-modal-64FGhDxL.d.mts}

@@ -549,4 +549,4 @@ interface SideSheetModalProps extends BaseSheetProps {
  */
 declare const SideSheetModal: React$1.ForwardRefExoticComponent<SideSheetModalProps & React$1.RefAttributes<HTMLDivElement>>;
 
-export { type DrawerContentProps as A, type BaseSheetProps as B, DrawerDescription as C, Dialog as D, DrawerFooter as E, DrawerHeader as F, DrawerOverlay as G, DrawerPortal as H, type DrawerProps as I, DrawerTitle as J, DrawerTrigger as K, Scrim as L, type ScrimProps as M, type SheetEdge as N, type SheetState as O, SideSheet as P, SideSheetModal as Q, type SideSheetModalProps as R, type SheetValue as S, type SideSheetProps as T, type UseBottomSheetOptions as U, type UseBottomSheetReturn as V, useBottomSheet as W, BottomSheet as a, type BottomSheetHandle as b, BottomSheetModal as c, type BottomSheetModalProps as d, type BottomSheetProps as e, type BottomSheetSnapPoint as f, DialogBody as g, DialogClose as h, DialogContent as i, type DialogContentProps as j, DialogDescription as k, DialogFooter as l, DialogFullScreenContent as m, type DialogFullScreenContentProps as n, DialogHeader as o, DialogIcon as p, DialogOverlay as q, DialogPortal as r, type DialogProps as s, DialogTitle as t, DialogTrigger as u, DragHandle as v, type DragHandleProps as w, Drawer as x, DrawerClose as y, DrawerContent as z };
+export { type DrawerContentProps as A, type BaseSheetProps as B, DrawerDescription as C, Dialog as D, DrawerFooter as E, DrawerHeader as F, DrawerOverlay as G, DrawerPortal as H, type DrawerProps as I, DrawerTitle as J, DrawerTrigger as K, type ScrimProps as L, type SheetEdge as M, type SheetState as N, SideSheet as O, SideSheetModal as P, type SideSheetModalProps as Q, type SideSheetProps as R, Scrim as S, type UseBottomSheetReturn as T, type UseBottomSheetOptions as U, useBottomSheet as V, type SheetValue as W, BottomSheet as a, type BottomSheetHandle as b, BottomSheetModal as c, type BottomSheetModalProps as d, type BottomSheetProps as e, type BottomSheetSnapPoint as f, DialogBody as g, DialogClose as h, DialogContent as i, type DialogContentProps as j, DialogDescription as k, DialogFooter as l, DialogFullScreenContent as m, type DialogFullScreenContentProps as n, DialogHeader as o, DialogIcon as p, DialogOverlay as q, DialogPortal as r, type DialogProps as s, DialogTitle as t, DialogTrigger as u, DragHandle as v, type DragHandleProps as w, Drawer as x, DrawerClose as y, DrawerContent as z };

package/dist/{side-sheet-modal-DdEZR6Vl.d.ts → side-sheet-modal-Bd5Qqvp9.d.ts}

@@ -549,4 +549,4 @@ interface SideSheetModalProps extends BaseSheetProps {
  */
 declare const SideSheetModal: React$1.ForwardRefExoticComponent<SideSheetModalProps & React$1.RefAttributes<HTMLDivElement>>;
 
-export { type DrawerContentProps as A, type BaseSheetProps as B, DrawerDescription as C, Dialog as D, DrawerFooter as E, DrawerHeader as F, DrawerOverlay as G, DrawerPortal as H, type DrawerProps as I, DrawerTitle as J, DrawerTrigger as K, Scrim as L, type ScrimProps as M, type SheetEdge as N, type SheetState as O, SideSheet as P, SideSheetModal as Q, type SideSheetModalProps as R, type SheetValue as S, type SideSheetProps as T, type UseBottomSheetOptions as U, type UseBottomSheetReturn as V, useBottomSheet as W, BottomSheet as a, type BottomSheetHandle as b, BottomSheetModal as c, type BottomSheetModalProps as d, type BottomSheetProps as e, type BottomSheetSnapPoint as f, DialogBody as g, DialogClose as h, DialogContent as i, type DialogContentProps as j, DialogDescription as k, DialogFooter as l, DialogFullScreenContent as m, type DialogFullScreenContentProps as n, DialogHeader as o, DialogIcon as p, DialogOverlay as q, DialogPortal as r, type DialogProps as s, DialogTitle as t, DialogTrigger as u, DragHandle as v, type DragHandleProps as w, Drawer as x, DrawerClose as y, DrawerContent as z };
+export { type DrawerContentProps as A, type BaseSheetProps as B, DrawerDescription as C, Dialog as D, DrawerFooter as E, DrawerHeader as F, DrawerOverlay as G, DrawerPortal as H, type DrawerProps as I, DrawerTitle as J, DrawerTrigger as K, type ScrimProps as L, type SheetEdge as M, type SheetState as N, SideSheet as O, SideSheetModal as P, type SideSheetModalProps as Q, type SideSheetProps as R, Scrim as S, type UseBottomSheetReturn as T, type UseBottomSheetOptions as U, useBottomSheet as V, type SheetValue as W, BottomSheet as a, type BottomSheetHandle as b, BottomSheetModal as c, type BottomSheetModalProps as d, type BottomSheetProps as e, type BottomSheetSnapPoint as f, DialogBody as g, DialogClose as h, DialogContent as i, type DialogContentProps as j, DialogDescription as k, DialogFooter as l, DialogFullScreenContent as m, type DialogFullScreenContentProps as n, DialogHeader as o, DialogIcon as p, DialogOverlay as q, DialogPortal as r, type DialogProps as s, DialogTitle as t, DialogTrigger as u, DragHandle as v, type DragHandleProps as w, Drawer as x, DrawerClose as y, DrawerContent as z };

package/dist/{split-button-trailing-uncheckable-DTQJjzsB.d.ts → split-button-trailing-uncheckable-CGzk7KcG.d.ts}

@@ -1,5 +1,5 @@
 import { HTMLMotionProps } from 'motion/react';
-import { a as MD3ColorStyle, c as MD3Size, b as MD3Shape } from './md3-D0_Z7IXj.js';
+import { M as MD3ColorStyle, b as MD3Size, a as MD3Shape } from './md3-BQhRygSi.js';
 import * as React$1 from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 

package/dist/{split-button-trailing-uncheckable-CIVEYgjY.d.mts → split-button-trailing-uncheckable-gAz6OAIi.d.mts}

@@ -1,5 +1,5 @@
 import { HTMLMotionProps } from 'motion/react';
-import { a as MD3ColorStyle, c as MD3Size, b as MD3Shape } from './md3-D0_Z7IXj.mjs';
+import { M as MD3ColorStyle, b as MD3Size, a as MD3Shape } from './md3-BQhRygSi.mjs';
 import * as React$1 from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 

package/dist/{text-field-Ear3hCSq.d.mts → text-field-4OlT9o8s.d.mts}

@@ -1,7 +1,8 @@
 import * as React$1 from 'react';
 import * as class_variance_authority_types from 'class-variance-authority/types';
 import { VariantProps } from 'class-variance-authority';
-import { c as MD3Size } from './md3-D0_Z7IXj.mjs';
+import { M as MenuColorVariant, l as MenuVariant, p as VerticalMenuSeparatorStyle } from './menu-types-rZNQFO7Y.mjs';
+import { b as MD3Size } from './md3-BQhRygSi.mjs';
 
 /**
  * @file checkbox.tsx
@@ -107,15 +108,17 @@ interface ChipProps extends Omit<React$1.ButtonHTMLAttributes<HTMLButtonElement>
     elevated?: boolean;
     /**
      * Toggle/selection state.
-     * - `filter`:  selected → bg `secondary-container`, animated checkmark appears.
-     * - `input`:   selected → bg `secondary-container`.
-     * Used for `role="checkbox"` (filter) / `aria-pressed` (input).
+     * - `filter`:     selected → bg `secondary-container`, animated checkmark appears.
+     * - `input`:      selected → bg `secondary-container`.
+     * - `suggestion`: selected → bg `secondary-container`.
+     * Used for `role="checkbox"` (filter) / `aria-pressed` (input/suggestion).
      */
     selected?: boolean;
     /**
      * Disables the chip. Applies:
      * - `pointer-events-none` – no mouse/touch interaction
      * - `opacity-[0.38]`      – DisabledLabelTextOpacity (0.38) per MD3 tokens
+     * - `text-m3-on-surface`  – DisabledLabelTextColor per MD3 tokens
      * - `aria-disabled="true"`
      * - `tabIndex={-1}`
      */
@@ -133,6 +136,7 @@ interface ChipProps extends Omit<React$1.ButtonHTMLAttributes<HTMLButtonElement>
     leadingIcon?: React$1.ReactNode;
     /**
      * Optional trailing icon element (18×18px recommended).
+     * Supported across all chip variants including `filter` (alongside checkmark).
      * Color: `on-surface-variant` (unselected) / `on-secondary-container` (selected).
      */
     trailingIcon?: React$1.ReactNode;
@@ -413,6 +417,152 @@ interface TextFieldProps {
     scrollAreaType?: "hover" | "scroll" | "always" | "none";
 }
 
+interface SelectOption {
+    /** Display label for the option */
+    label: string;
+    /** Unique value for the option */
+    value: string;
+    /** Optional disabled state for this option */
+    disabled?: boolean;
+    /** Optional leading icon for this option */
+    leadingIcon?: React$1.ReactNode;
+    /** Supporting text below option label */
+    supportingText?: React$1.ReactNode;
+}
+interface SelectOptionRenderState {
+    /** Whether the option is currently selected */
+    selected: boolean;
+    /** Whether the option is disabled */
+    disabled?: boolean;
+    /** Select handler to trigger when clicking the custom option */
+    handleSelect: () => void;
+    /** Index in the current visible list */
+    index: number;
+}
+interface SelectContentRenderState {
+    /** Original options array passed to the component */
+    options: SelectOption[];
+    /** Options after filtering (or external options when onSearchChange is used) */
+    filteredOptions: SelectOption[];
+    /** Currently visible items slice */
+    visibleOptions: SelectOption[];
+    /** Whether there are more items to load in the virtual window */
+    hasMore: boolean;
+    /** Ref to attach to a sentinel element for progressive loading */
+    sentinelRef: React$1.RefObject<HTMLDivElement | null>;
+    /** Controlled/uncontrolled current value */
+    currentValue?: string;
+    /** Selected option object */
+    selectedOption?: SelectOption;
+    /** Current search query string */
+    searchQuery: string;
+    /** Callback to select an option and close menu */
+    handleSelect: (option: SelectOption) => void;
+    /** Empty state text */
+    emptyText: string;
+    /** Whether loading state is active */
+    loading?: boolean;
+}
+interface SelectProps extends Omit<TextFieldProps, "value" | "onChange" | "defaultValue" | "type" | "multiline" | "children"> {
+    /** Array of selectable options */
+    options: SelectOption[];
+    /** Controlled selected value */
+    value?: string;
+    /** Default selected value (uncontrolled) */
+    defaultValue?: string;
+    /** Callback fired when selection changes */
+    onChange?: (value: string, option?: SelectOption) => void;
+    /**
+     * Callback fired when search query changes in searchable mode.
+     * When provided, INTERNAL filtering is disabled — pass filtered `options` from outside (for server-side/async search).
+     */
+    onSearchChange?: (query: string) => void;
+    /** Enable autocomplete mode (input filtering real-time search) */
+    searchable?: boolean;
+    /** Whether data is loading (displays a spinner inside the dropdown) */
+    loading?: boolean;
+    /** Maximum number of items rendered per chunk in virtual window (default: 50) */
+    maxVisible?: number;
+    /** Custom placeholder when no option is selected or when searching */
+    placeholder?: string;
+    /** Label text for the input field */
+    label?: string;
+    /** Supporting text below the input field */
+    supportingText?: string;
+    /** Color variant for the dropdown menu ('standard' | 'vibrant') */
+    colorVariant?: MenuColorVariant;
+    /** Menu visual variant ('expressive' | 'baseline') */
+    menuVariant?: MenuVariant;
+    /**
+     * Whether to show divider lines between menu options.
+     * Default: true
+     */
+    showDividers?: boolean;
+    /**
+     * Separation style between menu options ('divider' | 'gap' | 'none').
+     * Overrides `showDividers` when explicitly specified.
+     * Default: 'divider' (or 'none' if showDividers={false})
+     */
+    separatorStyle?: VerticalMenuSeparatorStyle;
+    /** Custom empty state message when searchable mode yields no results */
+    emptyText?: string;
+    /** Whether the popup menu automatically matches the input width. Default: true */
+    matchTriggerWidth?: boolean;
+    /**
+     * Maximum height of the dropdown options list before scrolling.
+     * Default: "360px"
+     */
+    maxHeight?: string;
+    /** Additional class names for the root container */
+    className?: string;
+    /** Custom renderer for individual option items */
+    renderOption?: (option: SelectOption, state: SelectOptionRenderState) => React$1.ReactNode;
+    /** Custom renderer for the dropdown content (e.g. for custom virtual list libraries like TanStack Virtual) */
+    renderContent?: (state: SelectContentRenderState) => React$1.ReactNode;
+    /** Custom children to render inside MenuContent if fully overriding options */
+    children?: React$1.ReactNode;
+}
+
+/**
+ * M3 Expressive Select component (Exposed Dropdown Menu & Autocomplete).
+ *
+ * Implements Material 3 Exposed Dropdown Menu spec (Figma Node `58966:3961`).
+ * Features progressive slice virtualization and server-side/async search via `onSearchChange`.
+ *
+ * @example
+ * // Standard Exposed Dropdown Menu
+ * <Select
+ *   label="City"
+ *   options={[
+ *     { label: "Hanoi", value: "hn" },
+ *     { label: "Ho Chi Minh City", value: "hcm" }
+ *   ]}
+ *   value={city}
+ *   onChange={(val) => setCity(val)}
+ * />
+ *
+ * @example
+ * // Searchable Autocomplete (Local filtering)
+ * <Select
+ *   searchable
+ *   label="Search Employee"
+ *   options={userList}
+ *   onChange={(val, opt) => setSelected(opt)}
+ * />
+ *
+ * @example
+ * // Searchable Autocomplete (Async / Server-side search)
+ * <Select
+ *   searchable
+ *   loading={isLoading}
+ *   label="Search Countries"
+ *   options={searchResults}
+ *   onSearchChange={(query) => fetchCountries(query)}
+ *   onChange={(val, opt) => setSelectedCountry(opt)}
+ * />
+ */
+declare const Select: React$1.ForwardRefExoticComponent<Omit<SelectProps, "ref"> & React$1.RefAttributes<TextFieldHandle>>;
+
 /**
  * @file slider.types.ts
  * MD3 Expressive Slider — TypeScript prop definitions.
@@ -1043,4 +1193,4 @@ declare const SwitchColors: {
  */
 declare const TextField: React$1.NamedExoticComponent<Omit<TextFieldProps, "ref"> & React$1.RefAttributes<TextFieldHandle>>;
 
-export { TriStateCheckbox as A, type TriStateCheckboxProps as B, Checkbox as C, RadioButton as R, type SliderThumbProps as S, TextField as T, type CheckboxProps as a, type CheckboxState as b, Chip as c, type ChipProps as d, type RadioButtonColors as e, type RadioButtonProps as f, RadioGroup as g, type RadioGroupProps as h, RangeSlider as i, type RangeSliderProps as j, Slider as k, SliderColors as l, type SliderOrientation as m, type SliderProps as n, SliderTokens as o, type SliderTrackSize as p, type SliderVariant as q, Switch as r, SwitchColors as s, type SwitchProps as t, SwitchTokens as u, type TextFieldHandle as v, type TextFieldInputType as w, type TextFieldProps as x, type TextFieldTrailingIconMode as y, type TextFieldVariant as z };
+export { type TextFieldInputType as A, type TextFieldProps as B, Checkbox as C, type TextFieldTrailingIconMode as D, type TextFieldVariant as E, TriStateCheckbox as F, type TriStateCheckboxProps as G, type SliderThumbProps as H, RadioButton as R, Select as S, TextField as T, type CheckboxProps as a, type CheckboxState as b, Chip as c, type ChipProps as d, type RadioButtonColors as e, type RadioButtonProps as f, RadioGroup as g, type RadioGroupProps as h, RangeSlider as i, type RangeSliderProps as j, type SelectContentRenderState as k, type SelectOption as l, type SelectOptionRenderState as m, type SelectProps as n, Slider as o, SliderColors as p, type SliderOrientation as q, type SliderProps as r, SliderTokens as s, type SliderTrackSize as t, type SliderVariant as u, Switch as v, SwitchColors as w, type SwitchProps as x, SwitchTokens as y, type TextFieldHandle as z };

package/dist/{text-field-CiOmDM_8.d.ts → text-field-DARNdj14.d.ts}

@@ -1,7 +1,8 @@
 import * as React$1 from 'react';
 import * as class_variance_authority_types from 'class-variance-authority/types';
 import { VariantProps } from 'class-variance-authority';
-import { c as MD3Size } from './md3-D0_Z7IXj.js';
+import { M as MenuColorVariant, l as MenuVariant, p as VerticalMenuSeparatorStyle } from './menu-types-rZNQFO7Y.js';
+import { b as MD3Size } from './md3-BQhRygSi.js';
 
 /**
  * @file checkbox.tsx
@@ -107,15 +108,17 @@ interface ChipProps extends Omit<React$1.ButtonHTMLAttributes<HTMLButtonElement>
     elevated?: boolean;
     /**
      * Toggle/selection state.
-     * - `filter`:  selected → bg `secondary-container`, animated checkmark appears.
-     * - `input`:   selected → bg `secondary-container`.
-     * Used for `role="checkbox"` (filter) / `aria-pressed` (input).
+     * - `filter`:     selected → bg `secondary-container`, animated checkmark appears.
+     * - `input`:      selected → bg `secondary-container`.
+     * - `suggestion`: selected → bg `secondary-container`.
+     * Used for `role="checkbox"` (filter) / `aria-pressed` (input/suggestion).
      */
     selected?: boolean;
     /**
      * Disables the chip. Applies:
      * - `pointer-events-none` – no mouse/touch interaction
      * - `opacity-[0.38]`      – DisabledLabelTextOpacity (0.38) per MD3 tokens
+     * - `text-m3-on-surface`  – DisabledLabelTextColor per MD3 tokens
      * - `aria-disabled="true"`
      * - `tabIndex={-1}`
      */
@@ -133,6 +136,7 @@ interface ChipProps extends Omit<React$1.ButtonHTMLAttributes<HTMLButtonElement>
     leadingIcon?: React$1.ReactNode;
     /**
      * Optional trailing icon element (18×18px recommended).
+     * Supported across all chip variants including `filter` (alongside checkmark).
      * Color: `on-surface-variant` (unselected) / `on-secondary-container` (selected).
      */
     trailingIcon?: React$1.ReactNode;
@@ -413,6 +417,152 @@ interface TextFieldProps {
     scrollAreaType?: "hover" | "scroll" | "always" | "none";
 }
 
+interface SelectOption {
+    /** Display label for the option */
+    label: string;
+    /** Unique value for the option */
+    value: string;
+    /** Optional disabled state for this option */
+    disabled?: boolean;
+    /** Optional leading icon for this option */
+    leadingIcon?: React$1.ReactNode;
+    /** Supporting text below option label */
+    supportingText?: React$1.ReactNode;
+}
+interface SelectOptionRenderState {
+    /** Whether the option is currently selected */
+    selected: boolean;
+    /** Whether the option is disabled */
+    disabled?: boolean;
+    /** Select handler to trigger when clicking the custom option */
+    handleSelect: () => void;
+    /** Index in the current visible list */
+    index: number;
+}
+interface SelectContentRenderState {
+    /** Original options array passed to the component */
+    options: SelectOption[];
+    /** Options after filtering (or external options when onSearchChange is used) */
+    filteredOptions: SelectOption[];
+    /** Currently visible items slice */
+    visibleOptions: SelectOption[];
+    /** Whether there are more items to load in the virtual window */
+    hasMore: boolean;
+    /** Ref to attach to a sentinel element for progressive loading */
+    sentinelRef: React$1.RefObject<HTMLDivElement | null>;
+    /** Controlled/uncontrolled current value */
+    currentValue?: string;
+    /** Selected option object */
+    selectedOption?: SelectOption;
+    /** Current search query string */
+    searchQuery: string;
+    /** Callback to select an option and close menu */
+    handleSelect: (option: SelectOption) => void;
+    /** Empty state text */
+    emptyText: string;
+    /** Whether loading state is active */
+    loading?: boolean;
+}
+interface SelectProps extends Omit<TextFieldProps, "value" | "onChange" | "defaultValue" | "type" | "multiline" | "children"> {
+    /** Array of selectable options */
+    options: SelectOption[];
+    /** Controlled selected value */
+    value?: string;
+    /** Default selected value (uncontrolled) */
+    defaultValue?: string;
+    /** Callback fired when selection changes */
+    onChange?: (value: string, option?: SelectOption) => void;
+    /**
+     * Callback fired when search query changes in searchable mode.
+     * When provided, INTERNAL filtering is disabled — pass filtered `options` from outside (for server-side/async search).
+     */
+    onSearchChange?: (query: string) => void;
+    /** Enable autocomplete mode (input filtering real-time search) */
+    searchable?: boolean;
+    /** Whether data is loading (displays a spinner inside the dropdown) */
+    loading?: boolean;
+    /** Maximum number of items rendered per chunk in virtual window (default: 50) */
+    maxVisible?: number;
+    /** Custom placeholder when no option is selected or when searching */
+    placeholder?: string;
+    /** Label text for the input field */
+    label?: string;
+    /** Supporting text below the input field */
+    supportingText?: string;
+    /** Color variant for the dropdown menu ('standard' | 'vibrant') */
+    colorVariant?: MenuColorVariant;
+    /** Menu visual variant ('expressive' | 'baseline') */
+    menuVariant?: MenuVariant;
+    /**
+     * Whether to show divider lines between menu options.
+     * Default: true
+     */
+    showDividers?: boolean;
+    /**
+     * Separation style between menu options ('divider' | 'gap' | 'none').
+     * Overrides `showDividers` when explicitly specified.
+     * Default: 'divider' (or 'none' if showDividers={false})
+     */
+    separatorStyle?: VerticalMenuSeparatorStyle;
+    /** Custom empty state message when searchable mode yields no results */
+    emptyText?: string;
+    /** Whether the popup menu automatically matches the input width. Default: true */
+    matchTriggerWidth?: boolean;
+    /**
+     * Maximum height of the dropdown options list before scrolling.
+     * Default: "360px"
+     */
+    maxHeight?: string;
+    /** Additional class names for the root container */
+    className?: string;
+    /** Custom renderer for individual option items */
+    renderOption?: (option: SelectOption, state: SelectOptionRenderState) => React$1.ReactNode;
+    /** Custom renderer for the dropdown content (e.g. for custom virtual list libraries like TanStack Virtual) */
+    renderContent?: (state: SelectContentRenderState) => React$1.ReactNode;
+    /** Custom children to render inside MenuContent if fully overriding options */
+    children?: React$1.ReactNode;
+}
+
+/**
+ * M3 Expressive Select component (Exposed Dropdown Menu & Autocomplete).
+ *
+ * Implements Material 3 Exposed Dropdown Menu spec (Figma Node `58966:3961`).
+ * Features progressive slice virtualization and server-side/async search via `onSearchChange`.
+ *
+ * @example
+ * // Standard Exposed Dropdown Menu
+ * <Select
+ *   label="City"
+ *   options={[
+ *     { label: "Hanoi", value: "hn" },
+ *     { label: "Ho Chi Minh City", value: "hcm" }
+ *   ]}
+ *   value={city}
+ *   onChange={(val) => setCity(val)}
+ * />
+ *
+ * @example
+ * // Searchable Autocomplete (Local filtering)
+ * <Select
+ *   searchable
+ *   label="Search Employee"
+ *   options={userList}
+ *   onChange={(val, opt) => setSelected(opt)}
+ * />
+ *
+ * @example
+ * // Searchable Autocomplete (Async / Server-side search)
+ * <Select
+ *   searchable
+ *   loading={isLoading}
+ *   label="Search Countries"
+ *   options={searchResults}
+ *   onSearchChange={(query) => fetchCountries(query)}
+ *   onChange={(val, opt) => setSelectedCountry(opt)}
+ * />
+ */
+declare const Select: React$1.ForwardRefExoticComponent<Omit<SelectProps, "ref"> & React$1.RefAttributes<TextFieldHandle>>;
+
 /**
  * @file slider.types.ts
  * MD3 Expressive Slider — TypeScript prop definitions.
@@ -1043,4 +1193,4 @@ declare const SwitchColors: {
  */
 declare const TextField: React$1.NamedExoticComponent<Omit<TextFieldProps, "ref"> & React$1.RefAttributes<TextFieldHandle>>;
 
-export { TriStateCheckbox as A, type TriStateCheckboxProps as B, Checkbox as C, RadioButton as R, type SliderThumbProps as S, TextField as T, type CheckboxProps as a, type CheckboxState as b, Chip as c, type ChipProps as d, type RadioButtonColors as e, type RadioButtonProps as f, RadioGroup as g, type RadioGroupProps as h, RangeSlider as i, type RangeSliderProps as j, Slider as k, SliderColors as l, type SliderOrientation as m, type SliderProps as n, SliderTokens as o, type SliderTrackSize as p, type SliderVariant as q, Switch as r, SwitchColors as s, type SwitchProps as t, SwitchTokens as u, type TextFieldHandle as v, type TextFieldInputType as w, type TextFieldProps as x, type TextFieldTrailingIconMode as y, type TextFieldVariant as z };
+export { type TextFieldInputType as A, type TextFieldProps as B, Checkbox as C, type TextFieldTrailingIconMode as D, type TextFieldVariant as E, TriStateCheckbox as F, type TriStateCheckboxProps as G, type SliderThumbProps as H, RadioButton as R, Select as S, TextField as T, type CheckboxProps as a, type CheckboxState as b, Chip as c, type ChipProps as d, type RadioButtonColors as e, type RadioButtonProps as f, RadioGroup as g, type RadioGroupProps as h, RangeSlider as i, type RangeSliderProps as j, type SelectContentRenderState as k, type SelectOption as l, type SelectOptionRenderState as m, type SelectProps as n, Slider as o, SliderColors as p, type SliderOrientation as q, type SliderProps as r, SliderTokens as s, type SliderTrackSize as t, type SliderVariant as u, Switch as v, SwitchColors as w, type SwitchProps as x, SwitchTokens as y, type TextFieldHandle as z };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bug-on/m3-expressive",
-  "version": "1.3.1",
+  "version": "1.3.2",
   "description": "Material Design 3 Expressive React components",
   "author": "Bug On",
   "license": "MIT",
@@ -179,8 +179,8 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "tailwind-merge": "^3.3.1",
-    "@bug-on/m3-tokens": "1.2.1",
-    "@bug-on/m3-tailwind": "1.2.1"
+    "@bug-on/m3-tailwind": "1.2.2",
+    "@bug-on/m3-tokens": "1.2.2"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.9.1",