@skdx/react 0.28.0 → 0.29.0

package/dist/select/SelectTrigger.d.cts

@@ -1,22 +1,7 @@
 import * as React from 'react';
 import type { SelectTriggerProps } from './types.cjs';
 /**
- * Opens listbox, displays current value, and anchors its popper positioning.
- * Renders `<button type="button" role="combobox">` with `aria-haspopup`,
- * `aria-expanded`, `aria-controls`, `aria-activedescendant`, `data-state`,
- * `data-disabled`, `data-placeholder`, `aria-readonly`/`data-readonly`,
- * `aria-invalid`/`data-invalid`.
- *
- * Six opening keys, each leaving active option at different position: ArrowDown/Home
- * at first, ArrowUp/End at last, Enter/Space/"without moving" (already selected).
- * Click opens same as Enter. No opening while `readOnly`.
- *
- * Keeps real DOM focus for entire interaction (APG pattern). Owns all listbox keys:
- * Arrow Up/Down moves active (no wrap), PageUp/PageDown moves 10, Home/End jumps
- * ends, typeahead searches, Enter/Space/Alt+ArrowUp commits, Tab commits and exits.
- * With `multiple`, commits only add, never remove. Typeahead works closed (like native
- * `<select>`) unless `multiple` (then opens).
- *
+ * Opens the listbox, displays the current value, and anchors its popper positioning.
  *
  * @example
  * ```tsx
@@ -26,4 +11,7 @@ import type { SelectTriggerProps } from './types.cjs';
  * </SelectTrigger>
  * ```
  */
-export declare const SelectTrigger: React.ForwardRefExoticComponent<Omit<SelectTriggerProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export declare const SelectTrigger: {
+    ({ ref: forwardedRef, shape, size, ...props }: SelectTriggerProps): React.ReactNode;
+    displayName: string;
+};

package/dist/select/SelectTrigger.d.ts

@@ -1,22 +1,7 @@
 import * as React from 'react';
 import type { SelectTriggerProps } from './types.js';
 /**
- * Opens listbox, displays current value, and anchors its popper positioning.
- * Renders `<button type="button" role="combobox">` with `aria-haspopup`,
- * `aria-expanded`, `aria-controls`, `aria-activedescendant`, `data-state`,
- * `data-disabled`, `data-placeholder`, `aria-readonly`/`data-readonly`,
- * `aria-invalid`/`data-invalid`.
- *
- * Six opening keys, each leaving active option at different position: ArrowDown/Home
- * at first, ArrowUp/End at last, Enter/Space/"without moving" (already selected).
- * Click opens same as Enter. No opening while `readOnly`.
- *
- * Keeps real DOM focus for entire interaction (APG pattern). Owns all listbox keys:
- * Arrow Up/Down moves active (no wrap), PageUp/PageDown moves 10, Home/End jumps
- * ends, typeahead searches, Enter/Space/Alt+ArrowUp commits, Tab commits and exits.
- * With `multiple`, commits only add, never remove. Typeahead works closed (like native
- * `<select>`) unless `multiple` (then opens).
- *
+ * Opens the listbox, displays the current value, and anchors its popper positioning.
  *
  * @example
  * ```tsx
@@ -26,4 +11,7 @@ import type { SelectTriggerProps } from './types.js';
  * </SelectTrigger>
  * ```
  */
-export declare const SelectTrigger: React.ForwardRefExoticComponent<Omit<SelectTriggerProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export declare const SelectTrigger: {
+    ({ ref: forwardedRef, shape, size, ...props }: SelectTriggerProps): React.ReactNode;
+    displayName: string;
+};

package/dist/select/SelectValue.d.cts

@@ -1,25 +1,7 @@
 import * as React from 'react';
 import type { SelectValueProps } from './types.cjs';
 /**
- * Displays the selected {@link Select} option's label or `placeholder` when
- * nothing is selected. Renders a `<span>` with `pointer-events: none` so
- * clicks pass through to the trigger. Without `asChild`, pass explicit
- * `children` to override the auto-derived label; under `asChild`, `children`
- * is the element to clone and the derived label or chips render inside it.
- *
- * Carries the id the trigger's `aria-labelledby` points at, and registers
- * itself with the root on mount so the trigger only points here while this
- * part exists. That wiring is what gives the trigger an accessible name at
- * all: `role="combobox"` does not take its name from content, so this text —
- * visible as it is — named nothing before. The name it produces is the current
- * *value*, so a consumer must still supply an external `<label>` or
- * `aria-label` saying what the control is for.
- *
- * While the root is `multiple`, renders one chip per selected option instead —
- * a `data-chip` span carrying `data-value`, to be styled like a TagsInput tag.
- * The chips are deliberately inert: the trigger is a `<button>`, so a remove
- * button nested inside one would be invalid HTML and unreachable by keyboard.
- * Deselecting happens in the listbox.
+ * Displays the selected {@link Select} option's label or `placeholder` when nothing is selected.
  *
  * @example
  * ```tsx
@@ -29,4 +11,7 @@ import type { SelectValueProps } from './types.cjs';
  * </SelectTrigger>
  * ```
  */
-export declare const SelectValue: React.ForwardRefExoticComponent<Omit<SelectValueProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+export declare const SelectValue: {
+    ({ placeholder, children, ref: forwardedRef, ...props }: SelectValueProps): React.ReactNode;
+    displayName: string;
+};

package/dist/select/SelectValue.d.ts

@@ -1,25 +1,7 @@
 import * as React from 'react';
 import type { SelectValueProps } from './types.js';
 /**
- * Displays the selected {@link Select} option's label or `placeholder` when
- * nothing is selected. Renders a `<span>` with `pointer-events: none` so
- * clicks pass through to the trigger. Without `asChild`, pass explicit
- * `children` to override the auto-derived label; under `asChild`, `children`
- * is the element to clone and the derived label or chips render inside it.
- *
- * Carries the id the trigger's `aria-labelledby` points at, and registers
- * itself with the root on mount so the trigger only points here while this
- * part exists. That wiring is what gives the trigger an accessible name at
- * all: `role="combobox"` does not take its name from content, so this text —
- * visible as it is — named nothing before. The name it produces is the current
- * *value*, so a consumer must still supply an external `<label>` or
- * `aria-label` saying what the control is for.
- *
- * While the root is `multiple`, renders one chip per selected option instead —
- * a `data-chip` span carrying `data-value`, to be styled like a TagsInput tag.
- * The chips are deliberately inert: the trigger is a `<button>`, so a remove
- * button nested inside one would be invalid HTML and unreachable by keyboard.
- * Deselecting happens in the listbox.
+ * Displays the selected {@link Select} option's label or `placeholder` when nothing is selected.
  *
  * @example
  * ```tsx
@@ -29,4 +11,7 @@ import type { SelectValueProps } from './types.js';
  * </SelectTrigger>
  * ```
  */
-export declare const SelectValue: React.ForwardRefExoticComponent<Omit<SelectValueProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+export declare const SelectValue: {
+    ({ placeholder, children, ref: forwardedRef, ...props }: SelectValueProps): React.ReactNode;
+    displayName: string;
+};

package/dist/select/SelectViewport.d.cts

@@ -1,8 +1,7 @@
-import * as React from 'react';
+import type * as React from 'react';
 import type { SelectViewportProps } from './types.cjs';
 /**
- * Scrollable container for `SelectItem`s inside {@link SelectContent}.
- * Renders a plain `<div>` with `overflow: auto`.
+ * Scrollable container for `SelectItem`s inside {@link SelectContent}, with `overflow: auto`.
  *
  * @example
  * ```tsx
@@ -13,4 +12,7 @@ import type { SelectViewportProps } from './types.cjs';
  * </SelectViewport>
  * ```
  */
-export declare const SelectViewport: React.ForwardRefExoticComponent<Omit<SelectViewportProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const SelectViewport: {
+    ({ ref: forwardedRef, ...props }: SelectViewportProps): React.ReactNode;
+    displayName: string;
+};

package/dist/select/SelectViewport.d.ts

@@ -1,8 +1,7 @@
-import * as React from 'react';
+import type * as React from 'react';
 import type { SelectViewportProps } from './types.js';
 /**
- * Scrollable container for `SelectItem`s inside {@link SelectContent}.
- * Renders a plain `<div>` with `overflow: auto`.
+ * Scrollable container for `SelectItem`s inside {@link SelectContent}, with `overflow: auto`.
  *
  * @example
  * ```tsx
@@ -13,4 +12,7 @@ import type { SelectViewportProps } from './types.js';
  * </SelectViewport>
  * ```
  */
-export declare const SelectViewport: React.ForwardRefExoticComponent<Omit<SelectViewportProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const SelectViewport: {
+    ({ ref: forwardedRef, ...props }: SelectViewportProps): React.ReactNode;
+    displayName: string;
+};

package/dist/select/index.d.cts

@@ -1,3 +1,3 @@
 export * from './Select.cjs';
-export type { SelectItemDescriptor, SelectOption, SelectOptionGroup, SelectOptionOrGroup, SelectProps, SelectHandle, } from './types.cjs';
+export type { SelectFilter, SelectItemDescriptor, SelectOption, SelectOptionGroup, SelectOptionOrGroup, SelectProps, SelectHandle, } from './types.cjs';
 export type { SelectionChangeDetail } from '../utils/useSelection.cjs';

package/dist/select/index.d.ts

@@ -1,3 +1,3 @@
 export * from './Select.js';
-export type { SelectItemDescriptor, SelectOption, SelectOptionGroup, SelectOptionOrGroup, SelectProps, SelectHandle, } from './types.js';
+export type { SelectFilter, SelectItemDescriptor, SelectOption, SelectOptionGroup, SelectOptionOrGroup, SelectProps, SelectHandle, } from './types.js';
 export type { SelectionChangeDetail } from '../utils/useSelection.js';

package/dist/select/primitives.d.cts

@@ -15,7 +15,7 @@
  *       <SelectViewport>
  *         <SelectItem value="react">
  *           <SelectItemIndicator>✓</SelectItemIndicator>
- *           <SelectItemText>React</SelectItemText>
+ *           <SelectItemText>Ruby</SelectItemText>
  *         </SelectItem>
  *       </SelectViewport>
  *     </SelectContent>
@@ -27,13 +27,20 @@ export { Select } from './Select.cjs';
 export { SelectTrigger } from './SelectTrigger.cjs';
 export { SelectValue } from './SelectValue.cjs';
 export { SelectIcon } from './SelectIcon.cjs';
+export { SelectInput } from './SelectInput.cjs';
+export { SelectTagList } from './SelectTagList.cjs';
+export { SelectTag } from './SelectTag.cjs';
+export { SelectTagRemove } from './SelectTagRemove.cjs';
+export { SelectClear } from './SelectClear.cjs';
 export { SelectPortal } from './SelectPortal.cjs';
 export { SelectContent } from './SelectContent.cjs';
 export { SelectViewport } from './SelectViewport.cjs';
+export { SelectAll } from './SelectAll.cjs';
 export { SelectItem } from './SelectItem.cjs';
 export { SelectItemText } from './SelectItemText.cjs';
 export { SelectItemIndicator } from './SelectItemIndicator.cjs';
 export { SelectGroup } from './SelectGroup.cjs';
 export { SelectLabel } from './SelectLabel.cjs';
 export { SelectSeparator } from './SelectSeparator.cjs';
-export type { SelectProps, SelectTriggerProps, SelectValueProps, SelectIconProps, SelectPortalProps, SelectContentProps, SelectViewportProps, SelectItemProps, SelectItemTextProps, SelectItemIndicatorProps, SelectGroupProps, SelectLabelProps, SelectSeparatorProps, } from './types.cjs';
+export { SelectEmpty } from './SelectEmpty.cjs';
+export type { SelectProps, SelectTriggerProps, SelectValueProps, SelectIconProps, SelectInputProps, SelectTagListProps, SelectTagProps, SelectTagRemoveProps, SelectClearProps, SelectPortalProps, SelectContentProps, SelectViewportProps, SelectAllProps, SelectItemProps, SelectItemTextProps, SelectItemIndicatorProps, SelectGroupProps, SelectLabelProps, SelectSeparatorProps, SelectEmptyProps, } from './types.cjs';

package/dist/select/primitives.d.ts

@@ -15,7 +15,7 @@
  *       <SelectViewport>
  *         <SelectItem value="react">
  *           <SelectItemIndicator>✓</SelectItemIndicator>
- *           <SelectItemText>React</SelectItemText>
+ *           <SelectItemText>Ruby</SelectItemText>
  *         </SelectItem>
  *       </SelectViewport>
  *     </SelectContent>
@@ -27,13 +27,20 @@ export { Select } from './Select.js';
 export { SelectTrigger } from './SelectTrigger.js';
 export { SelectValue } from './SelectValue.js';
 export { SelectIcon } from './SelectIcon.js';
+export { SelectInput } from './SelectInput.js';
+export { SelectTagList } from './SelectTagList.js';
+export { SelectTag } from './SelectTag.js';
+export { SelectTagRemove } from './SelectTagRemove.js';
+export { SelectClear } from './SelectClear.js';
 export { SelectPortal } from './SelectPortal.js';
 export { SelectContent } from './SelectContent.js';
 export { SelectViewport } from './SelectViewport.js';
+export { SelectAll } from './SelectAll.js';
 export { SelectItem } from './SelectItem.js';
 export { SelectItemText } from './SelectItemText.js';
 export { SelectItemIndicator } from './SelectItemIndicator.js';
 export { SelectGroup } from './SelectGroup.js';
 export { SelectLabel } from './SelectLabel.js';
 export { SelectSeparator } from './SelectSeparator.js';
-export type { SelectProps, SelectTriggerProps, SelectValueProps, SelectIconProps, SelectPortalProps, SelectContentProps, SelectViewportProps, SelectItemProps, SelectItemTextProps, SelectItemIndicatorProps, SelectGroupProps, SelectLabelProps, SelectSeparatorProps, } from './types.js';
+export { SelectEmpty } from './SelectEmpty.js';
+export type { SelectProps, SelectTriggerProps, SelectValueProps, SelectIconProps, SelectInputProps, SelectTagListProps, SelectTagProps, SelectTagRemoveProps, SelectClearProps, SelectPortalProps, SelectContentProps, SelectViewportProps, SelectAllProps, SelectItemProps, SelectItemTextProps, SelectItemIndicatorProps, SelectGroupProps, SelectLabelProps, SelectSeparatorProps, SelectEmptyProps, } from './types.js';

package/dist/select/types.d.cts

@@ -1,29 +1,33 @@
 import type * as React from 'react';
+import type { BadgeProps } from '../badge/types.cjs';
+import type { TagGroupProps } from '../tag-group/types.cjs';
+import type { AutoFocusEvent } from '../utils/dismissal.cjs';
 import type { FormValidityHandle } from '../utils/formControl.cjs';
 import type { PassThroughProps } from '../utils/passThrough.cjs';
 import type { PopperContentProps } from '../utils/popper.cjs';
 import type { PortalProps } from '../utils/portal.cjs';
 import type { PrimitivePropsWithRef } from '../utils/primitive.cjs';
+import type { ScoredFilterResult } from '../utils/scoredFilter.cjs';
 import type { InteractOutsideEvent } from '../utils/useDismiss.cjs';
-import type { AutoFocusEvent } from '../utils/useFocusTrap.cjs';
-import type { SelectionChangeDetail } from '../utils/useSelection.cjs';
+import type { OptionEntry } from '../utils/useOptionCollection.cjs';
+import type { SelectionChangeDetail, SelectionChangeReason } from '../utils/useSelection.cjs';
 /** One entry of {@link SelectProps.items}: option metadata before rendering. */
 export interface SelectItemDescriptor {
     /** Identifier committed to the root's value when chosen. */
     value: string;
     /** Text for SelectValue and typeahead; overridden by mounted SelectItemText. @default undefined — falls back to value. */
-    label?: string;
+    label?: string | undefined;
     /** Excludes from trigger typeahead; rendered SelectItem's disabled excludes from selection. @default false */
-    disabled?: boolean;
+    disabled?: boolean | undefined;
 }
 /** One option for {@link SelectProps.options} recipe prop — flat entry rendered as SelectItem. */
 export interface SelectOption {
     /** Identifier committed when chosen. */
     value: string;
     /** Text for SelectValue and typeahead. @default undefined — falls back to value. */
-    label?: string;
+    label?: string | undefined;
     /** Excludes from selection and typeahead. @default false */
-    disabled?: boolean;
+    disabled?: boolean | undefined;
 }
 /** Labeled group of SelectOptions for SelectProps.options; grouping is data-driven. */
 export interface SelectOptionGroup {
@@ -34,14 +38,16 @@ export interface SelectOptionGroup {
 }
 /** One entry of {@link SelectProps.options}: a flat option, or a labeled group of them. */
 export type SelectOptionOrGroup = SelectOption | SelectOptionGroup;
+/** Decides which options survive the draft text: a boolean keeps or drops, a number filters and ranks. */
+export type SelectFilter = (itemText: string, inputValue: string) => ScoredFilterResult;
 /** Where opening should put the active option: 'selected', 'first', or 'last'. @internal */
 export type SelectOpenIntent = 'selected' | 'first' | 'last';
-/** @internal Shared state distributed from {@link Select} to its parts via context. Not part of the public API. */
+/** @internal Shared state distributed from {@link Select} to its parts via context. */
 export interface SelectContextValue {
     /** Hands focus back to the trigger; the one place `close-auto-focus` announces from. */
     focusTrigger: () => void;
     /** SelectContent's onCloseAutoFocus callback; mutable ref because Content's lifecycle spans the root's. */
-    closeAutoFocusRef: React.MutableRefObject<((event: AutoFocusEvent) => void) | undefined>;
+    closeAutoFocusRef: React.RefObject<((event: AutoFocusEvent) => void) | undefined>;
     triggerRef: React.RefObject<HTMLButtonElement | null>;
     contentRef: React.RefObject<HTMLDivElement | null>;
     contentId: string;
@@ -56,17 +62,57 @@ export interface SelectContextValue {
     /** Moves virtual focus to an option or clears it. */
     setActiveId: (id: string | null) => void;
     /** Where next open should put active option; written by trigger, read by SelectContent on mount. Ref for inter-part messaging, not rendering. */
-    openIntentRef: React.MutableRefObject<SelectOpenIntent>;
+    openIntentRef: React.RefObject<SelectOpenIntent>;
+    /** The filter Input, which holds DOM focus in the trigger's place while `filterable`. */
+    inputRef: React.RefObject<HTMLInputElement | null>;
     /** Whether more than one option can be selected. */
     multiple: boolean;
+    /** Whether a filter Input stands in for the trigger and narrows the options. */
+    filterable: boolean;
+    /** Whether the option list is in flight, published as aria-busy/data-loading. */
+    loading: boolean;
+    /** Whether Control+A may sweep every enabled option while multiple. */
+    allowSelectAll: boolean;
+    /** Whether the selection reached maxSelected, capping the options that would grow it. */
+    atMax: boolean;
+    /** Draft text in the filter Input. */
+    inputValue: string;
+    /** Replaces the draft text, reporting it through onInputValueChange. */
+    setInputValue: (next: string) => void;
     /** Whether committing an option closes the listbox (defaults to !multiple). */
     closeOnSelect: boolean;
+    /** The rendered enabled options in traversal order, ranked when the filter scores. */
+    orderedOptions: () => HTMLElement[];
+    /** Rank each visible option renders in when the filter scores numerically; null leaves DOM order. */
+    itemOrder: ReadonlyMap<string, number> | null;
+    /** How many options currently survive the filter, for the Empty part. */
+    itemCount: number;
+    /** Publishes an option's filter text while it is rendered. */
+    registerItem: (id: string, entry: OptionEntry) => void;
+    /** Withdraws an option the filter dropped, or unmount removed. */
+    unregisterItem: (id: string) => void;
+    /** The entry an option id registered, for committing the highlighted option. */
+    getItem: (id: string) => OptionEntry | undefined;
+    /** Whether an option's text survives the current filter and draft text. */
+    matchesFilter: (text: string) => boolean;
+    /** Selects the run between the range anchor and the highlighted option. */
+    selectRange: () => void;
+    /** Selects from the highlighted option to one end of the list, additively. */
+    selectToEdge: (edge: 'first' | 'last') => void;
+    /** Selects every enabled option, or clears them when all are already selected. */
+    selectAllOrClear: () => void;
+    /** Empties the selection and any draft text in one step. */
+    clear: () => void;
+    /** Removes the last selected value, for Backspace on an empty filter Input. */
+    removeLast: () => void;
+    /** Removes one value from the selection, for a Tag's remove button. */
+    deselect: (value: string) => void;
     /** Every selected value, normalized to an array. */
     selectedValues: string[];
     /** Whether one option value is currently selected. */
     isSelected: (value: string) => boolean;
     /** Commits an option: replaces or toggles it when multiple. */
-    selectItem: (value: string) => void;
+    selectItem: (value: string, reason?: SelectionChangeReason) => void;
     open: boolean;
     onOpenChange: (open: boolean) => void;
     disabled: boolean;
@@ -74,7 +120,7 @@ export interface SelectContextValue {
     readOnly: boolean;
     required: boolean;
     invalid: boolean;
-    name?: string;
+    name?: string | undefined;
     registerOptionLabel: (value: string, label: string) => void;
     /** Label for a value: registered SelectItemText, then items, then value itself. */
     getOptionLabel: (value: string) => string;
@@ -87,61 +133,146 @@ export interface SelectProps extends PassThroughProps {
      * Trigger, portal, and content parts with selection/open state via context.
      * @default undefined
      */
-    children?: React.ReactNode;
+    children?: React.ReactNode | undefined;
     /** Selected option value(s) for controlled usage; pair with onValueChange. @default undefined — uncontrolled. */
-    value?: string | string[];
+    value?: string | string[] | undefined;
     /** Initially selected value(s) for uncontrolled usage. @default undefined — no option selected until user picks one. */
-    defaultValue?: string | string[];
+    defaultValue?: string | string[] | undefined;
     /** Fires when selection changes with the whole selection, not the toggled option. @default undefined — no-op if omitted. */
-    onValueChange?: (detail: SelectionChangeDetail) => void;
+    onValueChange?: ((detail: SelectionChangeDetail) => void) | undefined;
     /** Allows more than one option selected. Sets aria-multiselectable="true" on Content, toggles options instead of replacing, keeps listbox open. @default false */
-    multiple?: boolean;
+    multiple?: boolean | undefined;
     /** Picking the already-selected option in single-select mode clears it; ignored in multiple mode. @default false */
-    deselectable?: boolean;
+    deselectable?: boolean | undefined;
+    /** Largest number of values selectable while multiple; unselected options go aria-disabled once reached, and selected ones stay removable. @default undefined — the selection grows without a cap. */
+    maxSelected?: number | undefined;
+    /** Whether Control+A selects every enabled option while multiple and the listbox is open, and the derived anatomy offers a SelectAll row. @default true */
+    allowSelectAll?: boolean | undefined;
+    /** Whether the derived anatomy renders a filter Input in the trigger's place, narrowing the options as the user types. @default false */
+    filterable?: boolean | undefined;
+    /** Controlled draft text in the filter Input; pair with onInputValueChange. Read only while filterable. @default undefined — uncontrolled. */
+    inputValue?: string | undefined;
+    /** Initial draft text in the filter Input, for uncontrolled usage. @default '' */
+    defaultInputValue?: string | undefined;
+    /** Fires with the new draft text on every keystroke, and with the empty string when a selection or Clear empties it. @default undefined — no-op if omitted. */
+    onInputValueChange?: ((inputValue: string) => void) | undefined;
+    /** Predicate deciding which options survive the draft text: a boolean filters, a number filters and ranks (0 excludes). Read only while filterable. @default undefined — every option survives. */
+    filter?: SelectFilter | undefined;
+    /** Whether the option list is in flight, published as aria-busy and data-loading without blocking interaction. @default false */
+    loading?: boolean | undefined;
+    /** Whether the derived anatomy renders a Clear button emptying the selection and draft text in one press. @default false */
+    clearable?: boolean | undefined;
+    /** Formats the message announced after each selection change while multiple; return an empty string to announce nothing. @default defaultGetSelectionLabel — "2 selected". */
+    getSelectionLabel?: ((count: number) => string) | undefined;
     /** Option collection declared up front. Enables closed-trigger typeahead and labels on first paint before Content mounts. @default undefined — only knows rendered options. */
-    items?: SelectItemDescriptor[];
+    items?: SelectItemDescriptor[] | undefined;
     /** Flat or grouped option data to render automatically — trigger, portal, listbox, and Items — instead of hand composition. @default undefined — compose parts yourself. */
-    options?: SelectOptionOrGroup[];
+    options?: SelectOptionOrGroup[] | undefined;
     /** Customizes how derived option renders inside SelectItem; receives option and selected state. @default undefined — renders option.label ?? option.value. */
-    renderOption?: (option: SelectOption, state: {
+    renderOption?: ((option: SelectOption, state: {
         selected: boolean;
-    }) => React.ReactNode;
+    }) => React.ReactNode) | undefined;
     /** Customizes trigger content in place of default label/chips; receives selected option(s) or null. @default undefined — renders default label/placeholder/chips. */
-    renderValue?: (selected: SelectOption | SelectOption[] | null) => React.ReactNode;
+    renderValue?: ((selected: SelectOption | SelectOption[] | null) => React.ReactNode) | undefined;
+    /** Customises a selected value's content inside its derived Tag; only read while multiple and options derives the anatomy. @default undefined — renders option.label ?? option.value. */
+    renderTag?: ((option: SelectOption) => React.ReactNode) | undefined;
     /** Placeholder shown by derived trigger while nothing is selected; only read while options derives. @default undefined — renders nothing when no option selected. */
-    placeholder?: string;
+    placeholder?: string | undefined;
     /** Picking an option closes the listbox. Defaults to !multiple; can override the default. @default !multiple */
-    closeOnSelect?: boolean;
+    closeOnSelect?: boolean | undefined;
     /** Whether the listbox popup is open for controlled usage; pair with onOpenChange. @default undefined — uncontrolled. */
-    open?: boolean;
+    open?: boolean | undefined;
     /** Initial open state for uncontrolled usage. @default false */
-    defaultOpen?: boolean;
+    defaultOpen?: boolean | undefined;
     /** Fires with new open state whenever it changes, controlled or not. @default undefined — no-op if omitted. */
-    onOpenChange?: (open: boolean) => void;
+    onOpenChange?: ((open: boolean) => void) | undefined;
     /** Fires with new open state once animation finishes (after SelectContent's enter/exit ends). @default undefined — no-op if omitted. */
-    onOpenChangeComplete?: (open: boolean) => void;
+    onOpenChangeComplete?: ((open: boolean) => void) | undefined;
     /** Disables the trigger and prevents opening. Distinct from readOnly, which keeps focusable and submits. @default false */
-    disabled?: boolean;
+    disabled?: boolean | undefined;
     /** Unchangeable value. Trigger keeps tab stop and focus, carries aria-readonly="true" and data-readonly, submits the value. @default false */
-    readOnly?: boolean;
+    readOnly?: boolean | undefined;
     /** Marks hidden form controls as required for constraint validation (only meaningful when name is set). @default false */
-    required?: boolean;
+    required?: boolean | undefined;
     /** Marks select as invalid, exposed as aria-invalid/data-invalid on SelectTrigger. @default false */
-    invalid?: boolean;
+    invalid?: boolean | undefined;
     /** Visually-hidden native form control kept in sync with value for submission, reset, and validation. @default undefined — no hidden control. */
-    name?: string;
+    name?: string | undefined;
     /** Form id the select submits into, forwarded to every hidden control so select can live outside the form it belongs to. @default undefined — submit into nearest ancestor form. */
-    form?: string;
+    form?: string | undefined;
     /** Browser autofill hint, forwarded to the first mirrored hidden control — the same one that answers for the whole set's validity. @default undefined — no autofill hint. */
-    autoComplete?: string;
+    autoComplete?: string | undefined;
+    /**
+     * Corner rung the skin rounds the control by, fed to the derived `SelectTrigger`.
+     * @default undefined — the skin's own default corner.
+     */
+    shape?: 'rounded' | 'square' | 'pill' | (string & {}) | undefined;
+    /**
+     * Size rung the skin scales the control by, fed to the derived `SelectTrigger` and every derived Tag.
+     * @default undefined — the skin's own default size.
+     */
+    size?: 'sm' | 'lg' | (string & {}) | undefined;
+    /**
+     * Severity rung the skin colours the chips by, fed to every derived Tag.
+     * @default undefined — the skin's own neutral styling.
+     */
+    status?: 'info' | 'success' | 'warning' | 'danger' | (string & {}) | undefined;
+    /**
+     * Spacing rung the skin packs the tag strip by, fed to the derived `SelectTagList`.
+     * @default undefined — the skin's own default spacing.
+     */
+    density?: 'comfortable' | 'compact' | (string & {}) | undefined;
+    /**
+     * Matches the listbox width to the trigger, fed to the derived `SelectContent`.
+     * @default undefined — the panel sizes to its content.
+     */
+    matchWidth?: boolean | undefined;
+    /**
+     * Accessible name for the derived Trigger or filter Input, and the tag strip beside it.
+     * @default undefined — the field must be named some other way.
+     */
+    'aria-label'?: string | undefined;
 }
 /** Props for {@link SelectTrigger}, the button that opens the listbox and displays the current value. */
 export interface SelectTriggerProps extends PrimitivePropsWithRef<'button'> {
+    /**
+     * Corner rung the skin rounds the trigger by, mirrored to `data-shape`.
+     * @default undefined — the skin's own default corner.
+     */
+    shape?: 'rounded' | 'square' | 'pill' | (string & {}) | undefined;
+    /**
+     * Size rung the skin scales the trigger by, mirrored to `data-size`.
+     * @default undefined — the skin's own default size.
+     */
+    size?: 'sm' | 'lg' | (string & {}) | undefined;
+}
+/** Props for {@link SelectInput}, the filter text field that stands in for the trigger while `filterable`. */
+export interface SelectInputProps extends Omit<PrimitivePropsWithRef<'input'>, 'value' | 'defaultValue'> {
+}
+/** Props for {@link SelectTagList}, the strip holding one removable Tag per selected value. */
+export interface SelectTagListProps extends Omit<TagGroupProps, 'disabled' | 'tags' | 'onRemove'> {
+}
+/** Props for {@link SelectTag}, one selected value inside the tag strip. */
+export interface SelectTagProps extends Omit<BadgeProps, 'index' | 'value' | 'onDelete' | 'deletable' | 'deleteLabel' | 'dot' | 'leading' | 'selected' | 'trailing' | 'variant'> {
+    /** The selected value this tag represents; deselects it when remove is pressed. */
+    value: string;
+}
+/** Props for {@link SelectTagRemove}, the button deselecting its tag's value. */
+export interface SelectTagRemoveProps extends PrimitivePropsWithRef<'button'> {
+}
+/** Props for {@link SelectClear}, the button emptying selection and draft text in one press. */
+export interface SelectClearProps extends PrimitivePropsWithRef<'button'> {
+}
+/** Props for {@link SelectAll}, the listbox row toggling every enabled option at once. */
+export interface SelectAllProps extends PrimitivePropsWithRef<'div'> {
+}
+/** Props for {@link SelectEmpty}, the message shown when the filter leaves no option. */
+export interface SelectEmptyProps extends PrimitivePropsWithRef<'div'> {
 }
 /** Props for SelectValue: renders the selected option's label or placeholder inside the trigger. */
 export interface SelectValueProps extends PrimitivePropsWithRef<'span'> {
     /** Shown while no option is selected. @default undefined — renders nothing. */
-    placeholder?: React.ReactNode;
+    placeholder?: React.ReactNode | undefined;
 }
 /** Props for SelectIcon, a decorative indicator inside the trigger (defaults to ▾). */
 export interface SelectIconProps extends PrimitivePropsWithRef<'span'> {
@@ -149,22 +280,27 @@ export interface SelectIconProps extends PrimitivePropsWithRef<'span'> {
 /** Props for SelectPortal: teleports its content to document.body while the listbox is open. */
 export interface SelectPortalProps extends PortalProps {
     /** Mount SelectContent even while closed, for animation exit transitions. @default false */
-    forceMount?: boolean;
+    forceMount?: boolean | undefined;
 }
 /** Props for SelectContent: the listbox popup with side='bottom', align='start', sideOffset=4 defaults. */
 export interface SelectContentProps extends PopperContentProps {
     /** Mount listbox even while closed, for animation exit transitions. @default false */
-    forceMount?: boolean;
+    forceMount?: boolean | undefined;
     /** Fires on Escape while open; preventDefault() keeps it open. @default undefined — no-op if omitted. */
-    onEscapeKeyDown?: (event: KeyboardEvent) => void;
+    onEscapeKeyDown?: ((event: KeyboardEvent) => void) | undefined;
     /** Fires on pointer-down outside listbox and trigger; preventDefault() keeps it open. @default undefined — no-op if omitted. */
-    onPointerDownOutside?: (event: PointerEvent) => void;
+    onPointerDownOutside?: ((event: PointerEvent) => void) | undefined;
     /** Fires when focus moves outside (cancelable focusin stand-in); preventDefault() keeps it open. @default undefined — no-op if omitted. */
-    onFocusOutside?: (event: CustomEvent<FocusEvent>) => void;
+    onFocusOutside?: ((event: CustomEvent<FocusEvent>) => void) | undefined;
     /** Fires for outside interaction before specific handler; preventDefault() vetoes both paths. @default undefined — no-op if omitted. */
-    onInteractOutside?: (event: InteractOutsideEvent) => void;
+    onInteractOutside?: ((event: InteractOutsideEvent) => void) | undefined;
     /** Fires before focus returns to trigger as listbox closes; preventDefault() suppresses return. @default undefined — no-op if omitted. */
-    onCloseAutoFocus?: (event: AutoFocusEvent) => void;
+    onCloseAutoFocus?: ((event: AutoFocusEvent) => void) | undefined;
+    /**
+     * Matches this panel width to its trigger, mirrored as a bare `data-match-width`.
+     * @default undefined — the panel sizes to its content.
+     */
+    matchWidth?: boolean | undefined;
 }
 /** Props for {@link SelectViewport}, the scrollable container for `SelectItem`s inside `SelectContent`. */
 export interface SelectViewportProps extends PrimitivePropsWithRef<'div'> {
@@ -180,9 +316,9 @@ export interface SelectItemProps extends PrimitivePropsWithRef<'div'> {
     /** Identifier committed to the root's value when chosen. */
     value: string;
     /** Excludes from selection and keyboard navigation. @default false */
-    disabled?: boolean;
+    disabled?: boolean | undefined;
     /** Text for Trigger label and typeahead, published as data-text-value; falls back to rendered text. @default undefined — falls back to rendered text. */
-    textValue?: string;
+    textValue?: string | undefined;
 }
 /** Props for SelectItemText: an Item's label content, captured so Value can render it inside Trigger. */
 export interface SelectItemTextProps extends PrimitivePropsWithRef<'span'> {
@@ -190,7 +326,7 @@ export interface SelectItemTextProps extends PrimitivePropsWithRef<'span'> {
 /** Props for SelectItemIndicator: selected-state glyph inside an Item, rendered only while selected. */
 export interface SelectItemIndicatorProps extends PrimitivePropsWithRef<'span'> {
     /** Mount this indicator even while its item isn't selected, for animation exit transitions. @default false */
-    forceMount?: boolean;
+    forceMount?: boolean | undefined;
 }
 /** Props for SelectGroup, a labeled group of related SelectItems. */
 export interface SelectGroupProps extends PrimitivePropsWithRef<'div'> {