@bug-on/m3-expressive 1.3.0 → 1.3.2

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

@@ -1,6 +1,8 @@
-import * as React from 'react';
+import * as React$1 from 'react';
 import * as class_variance_authority_types from 'class-variance-authority/types';
 import { VariantProps } from 'class-variance-authority';
+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
@@ -48,7 +50,7 @@ interface CheckboxProps {
     /** Extra class names on the outermost wrapper. */
     className?: string;
     /** Ref pointing to the hidden `<input type="checkbox">`. */
-    ref?: React.Ref<HTMLInputElement>;
+    ref?: React$1.Ref<HTMLInputElement>;
 }
 /**
  * `TriStateCheckbox` props — requires `state` + `onStateChange`.
@@ -71,7 +73,7 @@ interface TriStateCheckboxProps extends Omit<CheckboxProps, "checked" | "default
  * ```
  * @see https://m3.material.io/components/checkbox/overview
  */
-declare const Checkbox: React.NamedExoticComponent<Omit<CheckboxProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+declare const Checkbox: React$1.NamedExoticComponent<Omit<CheckboxProps, "ref"> & React$1.RefAttributes<HTMLInputElement>>;
 /**
  * MD3 Expressive Tri-State Checkbox.
  *
@@ -83,12 +85,12 @@ declare const Checkbox: React.NamedExoticComponent<Omit<CheckboxProps, "ref"> &
  * <TriStateCheckbox state={parentState} onStateChange={setParentState} label="Select all" />
  * ```
  */
-declare const TriStateCheckbox: React.NamedExoticComponent<Omit<TriStateCheckboxProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+declare const TriStateCheckbox: React$1.NamedExoticComponent<Omit<TriStateCheckboxProps, "ref"> & React$1.RefAttributes<HTMLInputElement>>;
 
 declare const chipVariants: (props?: ({
     variant?: "input" | "filter" | "assist" | "suggestion" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
-interface ChipProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "children"> {
+interface ChipProps extends Omit<React$1.ButtonHTMLAttributes<HTMLButtonElement>, "children"> {
     /**
      * Chip variant.
      * - `assist`     → Smart/automated actions. Flat by default, can be elevated.
@@ -106,15 +108,17 @@ interface ChipProps extends Omit<React.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}`
      */
@@ -122,36 +126,37 @@ interface ChipProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>,
     /**
      * Visible label. Required. Can be a string or ReactNode.
      */
-    label: React.ReactNode;
+    label: React$1.ReactNode;
     /**
      * Optional leading icon element (18×18px recommended).
      * For `filter` chips with `selected=true`, this is replaced by an animated checkmark.
      * For `assist`/`suggestion`: icon color → `primary`
      * For `input` (unselected): icon color → `on-surface-variant`
      */
-    leadingIcon?: React.ReactNode;
+    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.ReactNode;
+    trailingIcon?: React$1.ReactNode;
     /**
      * Avatar element for `input` chips. Takes priority over `leadingIcon`.
      * Rendered as a 24×24px circle (InputChipTokens: AvatarSize = 24.dp, AvatarShape = CornerFull).
      */
-    avatar?: React.ReactNode;
+    avatar?: React$1.ReactNode;
     /**
      * Callback when the trailing remove (×) button is activated on `input` chips.
      * When provided, a dedicated tabbable close button with `aria-label="Remove {label}"` is rendered.
      */
-    onRemove?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    onRemove?: (e: React$1.MouseEvent<HTMLButtonElement>) => void;
     /**
      * Change the component to the underlying child element and merge props/behavior.
      * Useful when wrapping in Next.js `<Link>` or custom anchor tags.
      * @default false
      */
     asChild?: boolean;
-    children?: React.ReactNode;
+    children?: React$1.ReactNode;
 }
 /**
  * MD3 Expressive Chip — 4-variant interactive tag component.
@@ -176,7 +181,7 @@ interface ChipProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>,
  *
  * @see https://m3.material.io/components/chips/overview
  */
-declare const Chip: React.NamedExoticComponent<ChipProps & React.RefAttributes<HTMLButtonElement>>;
+declare const Chip: React$1.NamedExoticComponent<ChipProps & React$1.RefAttributes<HTMLButtonElement>>;
 
 /**
  * @file radio-button.tsx
@@ -221,7 +226,7 @@ interface RadioButtonProps {
     /** Whether the radio is required for form submission. */
     required?: boolean;
     /** Ref to the hidden `<input type="radio">`. */
-    ref?: React.Ref<HTMLInputElement>;
+    ref?: React$1.Ref<HTMLInputElement>;
 }
 /** Props for `RadioGroup`. */
 interface RadioGroupProps {
@@ -245,7 +250,7 @@ interface RadioGroupProps {
     orientation?: "horizontal" | "vertical";
     /** Whether at least one radio in the group must be selected. */
     required?: boolean;
-    children: React.ReactNode;
+    children: React$1.ReactNode;
     className?: string;
 }
 /**
@@ -266,7 +271,7 @@ interface RadioGroupProps {
  * ```
  * @see https://m3.material.io/components/radio-button/overview
  */
-declare const RadioButton: React.NamedExoticComponent<Omit<RadioButtonProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+declare const RadioButton: React$1.NamedExoticComponent<Omit<RadioButtonProps, "ref"> & React$1.RefAttributes<HTMLInputElement>>;
 /**
  * MD3 Expressive RadioGroup component.
  *
@@ -283,7 +288,7 @@ declare const RadioButton: React.NamedExoticComponent<Omit<RadioButtonProps, "re
  * ```
  * @see https://m3.material.io/components/radio-button/overview
  */
-declare const RadioGroup: React.NamedExoticComponent<RadioGroupProps & React.RefAttributes<HTMLDivElement>>;
+declare const RadioGroup: React$1.NamedExoticComponent<RadioGroupProps & React$1.RefAttributes<HTMLDivElement>>;
 
 /**
  * @file text-field.types.ts
@@ -328,7 +333,7 @@ interface TextFieldProps {
     /** Initial value for uncontrolled mode. */
     defaultValue?: string;
     /** Fires when value changes. Receives new value string and native event. */
-    onChange?: (value: string, event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+    onChange?: (value: string, event: React$1.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
     /** Input type. Use 'textarea' for multi-line input. @default 'text' */
     type?: TextFieldInputType;
     /** Placeholder text — shown only when no label OR label is floated. */
@@ -336,7 +341,7 @@ interface TextFieldProps {
     name?: string;
     id?: string;
     autoComplete?: string;
-    inputMode?: React.HTMLAttributes<HTMLInputElement>["inputMode"];
+    inputMode?: React$1.HTMLAttributes<HTMLInputElement>["inputMode"];
     /** Number of rows for textarea type. @default 2 */
     rows?: number;
     /** Number of columns for textarea type. @default 20 */
@@ -371,9 +376,9 @@ interface TextFieldProps {
     /** Text displayed after the input value (e.g., ".00"). */
     suffixText?: string;
     /** Icon node for the leading slot. Should be 24×24px. */
-    leadingIcon?: React.ReactNode;
+    leadingIcon?: React$1.ReactNode;
     /** Custom trailing icon node. Used when trailingIconMode='custom'. */
-    trailingIcon?: React.ReactNode;
+    trailingIcon?: React$1.ReactNode;
     /**
      * Built-in trailing icon behavior.
      * - 'none' — no trailing icon
@@ -397,11 +402,11 @@ interface TextFieldProps {
     fullWidth?: boolean;
     /** Dense variant — reduced height (48px instead of 56px). */
     dense?: boolean;
-    onFocus?: React.FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;
-    onBlur?: React.FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;
-    onKeyDown?: React.KeyboardEventHandler<HTMLInputElement | HTMLTextAreaElement>;
-    onKeyUp?: React.KeyboardEventHandler<HTMLInputElement | HTMLTextAreaElement>;
-    ref?: React.Ref<TextFieldHandle>;
+    onFocus?: React$1.FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;
+    onBlur?: React$1.FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;
+    onKeyDown?: React$1.KeyboardEventHandler<HTMLInputElement | HTMLTextAreaElement>;
+    onKeyUp?: React$1.KeyboardEventHandler<HTMLInputElement | HTMLTextAreaElement>;
+    ref?: React$1.Ref<TextFieldHandle>;
     /**
      * Controls when the scrollbars are visible when type="textarea".
      * - `hover`: Show on hover (default)
@@ -412,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.
@@ -419,8 +570,8 @@ interface TextFieldProps {
  * Reference: docs/m3/sliders/Slider.kt
  */
 
-/** Track size variants mapping to physical px values. */
-type SliderTrackSize = "xs" | "s" | "m" | "l" | "xl";
+/** @deprecated Use MD3Size instead */
+type SliderTrackSize = MD3Size;
 type SliderVariant = "primary" | "secondary" | "tertiary" | "error";
 type SliderTrackShape = "md3" | "full" | number;
 /** Slider layout direction. */
@@ -471,11 +622,11 @@ interface SliderProps {
     /** Layout orientation. @default "horizontal" */
     orientation?: SliderOrientation;
     /**
-     * Physical track size.
+     * Physical track size per MD3 specification.
      * Horizontal: height. Vertical: width.
-     * @default "m"
+     * @default "md"
      */
-    trackSize?: SliderTrackSize;
+    size?: MD3Size;
     /**
      * Color variant.
      * @default "primary"
@@ -588,7 +739,7 @@ interface SliderThumbProps {
     showValueIndicator: boolean;
     /** For the drag constraint ref. */
     trackRef: React.RefObject<HTMLDivElement | null>;
-    trackSize: SliderTrackSize;
+    size: MD3Size;
     variant: SliderVariant;
     /** Called during pointer drag with new value. */
     onValueChange: (value: number) => void;
@@ -650,7 +801,7 @@ interface SliderThumbProps {
  *
  * @see https://m3.material.io/components/sliders/overview
  */
-declare const RangeSlider: React.NamedExoticComponent<RangeSliderProps & React.RefAttributes<HTMLDivElement>>;
+declare const RangeSlider: React$1.NamedExoticComponent<RangeSliderProps & React$1.RefAttributes<HTMLDivElement>>;
 
 /**
  * @file slider.tsx
@@ -710,7 +861,7 @@ declare const RangeSlider: React.NamedExoticComponent<RangeSliderProps & React.R
  *
  * @see https://m3.material.io/components/sliders/overview
  */
-declare const Slider: React.NamedExoticComponent<SliderProps & React.RefAttributes<HTMLDivElement>>;
+declare const Slider: React$1.NamedExoticComponent<SliderProps & React$1.RefAttributes<HTMLDivElement>>;
 
 /**
  * @file slider.tokens.ts
@@ -729,24 +880,24 @@ declare const Slider: React.NamedExoticComponent<SliderProps & React.RefAttribut
 declare const SliderTokens: {
     readonly trackSizes: {
         xs: number;
-        s: number;
-        m: number;
-        l: number;
+        sm: number;
+        md: number;
+        lg: number;
         xl: number;
     };
     readonly trackShapes: {
         xs: number;
-        s: number;
-        m: number;
-        l: number;
+        sm: number;
+        md: number;
+        lg: number;
         xl: number;
     };
     /** Thumb height grows with track size */
     readonly thumbHeights: {
         xs: number;
-        s: number;
-        m: number;
-        l: number;
+        sm: number;
+        md: number;
+        lg: number;
         xl: number;
     };
     /**
@@ -785,9 +936,9 @@ declare const SliderTokens: {
     /** Standard icon size map for inset icons inside the track. */
     readonly insetIconSizes: {
         xs: number;
-        s: number;
-        m: number;
-        l: number;
+        sm: number;
+        md: number;
+        lg: number;
         xl: number;
     };
     /**
@@ -824,14 +975,14 @@ declare const SliderColors: {
     readonly valueIndicatorText: "var(--md-sys-color-inverse-on-surface)";
     /**
      * Tick on the INACTIVE portion of the track.
-     * Maps to TickMarkActiveContainerColor (in spec: primary color stands out).
+     * Maps to TickMarkInactiveContainerColor (in spec: primary color stands out).
      */
     readonly tickOnInactive: "var(--md-sys-color-primary)";
     /**
      * Tick on the ACTIVE portion of the track.
-     * Maps to TickMarkInactiveContainerColor (secondary-container blends in).
+     * Maps to TickMarkActiveContainerColor (in spec: on-primary contrasts with filled track).
      */
-    readonly tickOnActive: "var(--md-sys-color-secondary-container)";
+    readonly tickOnActive: "var(--md-sys-color-on-primary)";
     readonly disabledTick: "var(--md-sys-color-on-surface)";
 };
 
@@ -860,7 +1011,7 @@ interface SwitchProps {
      * Optional icon content rendered inside the thumb.
      * Expected to measure 16dp (SwitchTokens.iconSize).
      */
-    thumbContent?: React.ReactNode;
+    thumbContent?: React$1.ReactNode;
     /**
      * When true, shows thumb icons in both selected and unselected states.
      * Requires `thumbContent` to be provided.
@@ -923,7 +1074,7 @@ interface SwitchProps {
  *
  * @see https://m3.material.io/components/switch/overview
  */
-declare const Switch: React.NamedExoticComponent<SwitchProps & React.RefAttributes<HTMLButtonElement>>;
+declare const Switch: React$1.NamedExoticComponent<SwitchProps & React$1.RefAttributes<HTMLButtonElement>>;
 
 /**
  * @file switch.tokens.ts
@@ -1040,6 +1191,6 @@ declare const SwitchColors: {
  *
  * @see https://m3.material.io/components/text-fields/overview
  */
-declare const TextField: React.NamedExoticComponent<Omit<TextFieldProps, "ref"> & React.RefAttributes<TextFieldHandle>>;
+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.0",
+  "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-tailwind": "1.2.1",
-    "@bug-on/m3-tokens": "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",