@eocrm/design-system 0.6.24 → 0.7.0

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

@@ -0,0 +1,274 @@
+import { type HTMLAttributes, type ReactNode, type Ref } from 'react';
+/**
+ * Visual size of the trigger. Mirrors `<Input>` and `<Button>` sizes.
+ * - `'sm'` — 24px tall; dense toolbars and tables.
+ * - `'md'` — 32px tall (default).
+ * - `'lg'` — 40px tall; hero-form prominence.
+ */
+export type SelectSize = 'sm' | 'md' | 'lg';
+/**
+ * How a multi-select renders its selections inside the trigger.
+ * - `'chips'` — inline removable chips; wraps vertically as needed (default).
+ * - `'summary'` — comma-joined labels with ellipsis on overflow; reads as a single line.
+ */
+export type SelectTriggerDisplay = 'chips' | 'summary';
+/**
+ * One row of selectable data.
+ *
+ * `value` is the identity that `onChange` emits and that `value` /
+ * `defaultValue` reference. `label` is what the user sees and what
+ * the substring filter searches against. `data` is an opaque payload
+ * that flows through to `renderOption`, `renderValue`, and `renderTag`.
+ */
+export interface SelectOption<T = unknown> {
+    /** Unique key. What `onChange` emits. */
+    value: string;
+    /** Displayed text. Used for substring search when `searchable` is on. */
+    label: string;
+    /** Optional secondary line shown under the label in default render. */
+    description?: string;
+    /** When true, the option is dimmed, `aria-disabled`, and skipped in keyboard nav. */
+    disabled?: boolean;
+    /** Arbitrary payload — surfaces in `renderOption`, `renderValue`, `renderTag`. */
+    data?: T;
+}
+/**
+ * A labelled bucket of options. Use grouped input when you want a header
+ * row to appear above a chunk of options. Mixing flat options and groups
+ * at the same level is not supported — the input must be all-flat or
+ * all-grouped.
+ */
+export interface SelectGroup<T = unknown> {
+    /** Header text shown above the group's options. */
+    label: string;
+    /** Members of the group. */
+    options: SelectOption<T>[];
+}
+/**
+ * Either a flat list of options or a list of groups, discriminated at
+ * runtime by inspecting whether the first element has an `options` field.
+ */
+export type SelectOptions<T = unknown> = SelectOption<T>[] | SelectGroup<T>[];
+export interface SelectProps<T = unknown> extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue'> {
+    /**
+     * Placed on the combobox trigger (the `<button>` / `<input>`), not the
+     * wrapper div, so a `<label for>` — Field / SettingRow wire one — focuses
+     * the control when clicked (#568). Default: a generated id. Target the
+     * wrapper by `className` or a `data-*` attribute, not `#id`.
+     */
+    id?: string;
+    /**
+     * Sync options — flat list or list of groups. Ignored when `loadOptions`
+     * is provided (dev warning fires if both are non-empty). For grouped
+     * input, every element must carry an `options` field; mixing flat options
+     * with groups at the same level is not supported.
+     */
+    options?: SelectOptions<T>;
+    /**
+     * Async fetcher that returns the options for a given query. When set, the
+     * Select switches to async mode: the local substring filter is bypassed
+     * (the server filters), loading/error/empty rows replace the listbox
+     * body, and `options` is ignored (with a dev warning). The `signal`
+     * argument is aborted whenever a newer query supersedes this one — wire
+     * it through to `fetch` to cancel in-flight requests.
+     */
+    loadOptions?: (query: string, signal: AbortSignal) => Promise<SelectOptions<T>>;
+    /**
+     * When `true` (default), defers the first `loadOptions` call until the
+     * user opens the listbox. Set to `false` to fetch eagerly on mount.
+     */
+    loadOnOpen?: boolean;
+    /**
+     * Debounce window (ms) between the last query keystroke and the next
+     * `loadOptions` call. Default `250`.
+     */
+    searchDebounceMs?: number;
+    /**
+     * Enables multi-select. `value` / `defaultValue` become `string[]` and
+     * `onChange` emits arrays. Picking a row toggles it in/out of the
+     * selection instead of replacing-and-closing.
+     */
+    multiple?: boolean;
+    /**
+     * How the trigger renders the selected value(s) in multi mode. Ignored
+     * in single mode. See `SelectTriggerDisplay`. Defaults to `'chips'`. Use
+     * `'summary'` for table-filter UIs where chips would crowd the toolbar.
+     */
+    triggerDisplay?: SelectTriggerDisplay;
+    /**
+     * Renders the trigger as a combobox text input with substring filtering
+     * over the (sync) options. In async mode the filter is delegated to the
+     * server. Required by `creatable`.
+     */
+    searchable?: boolean;
+    /**
+     * When the searchable combobox opens, select the current text so the user
+     * can immediately type to replace it (type-to-search). Default `false`.
+     * Only affects the single searchable trigger.
+     */
+    selectOnOpen?: boolean;
+    /**
+     * Adds a "+ Create <query>" row when the trimmed query has no exact
+     * label match. Activating it fires `onCreate(label)` and folds the new
+     * value into the selection. Requires `searchable` (throws in dev otherwise).
+     */
+    creatable?: boolean;
+    /**
+     * Fires when the user activates the "+ Create" row (creatable mode).
+     * The trimmed query string is passed as `label`. After this fires,
+     * the Select also calls `onChange` with the new value: in single mode
+     * the value replaces the current selection and the listbox closes; in
+     * multi mode the value is appended to the current selection and the
+     * query is cleared.
+     *
+     * Consumers typically use this hook to persist the new option upstream
+     * (e.g. POST to a backend) and reconcile their `options` array.
+     */
+    onCreate?: (label: string) => void;
+    /**
+     * Controlled selection. `string` in single mode, `string[]` in multi.
+     * Provide alongside `onChange` to drive the value externally.
+     *
+     * `''` is NOT reserved for "nothing selected". If your `options` contain
+     * an option whose `value` is `''` — the common "one sentinel row plus N
+     * catalog ids" shape — that option renders and selects like any other, and
+     * the trigger shows its label. "Nothing selected" means simply "the value
+     * matches no option", which is what an untouched Select resolves to when
+     * the list has no `''` row.
+     */
+    value?: string | string[];
+    /**
+     * Initial selection for uncontrolled usage. `string` in single mode,
+     * `string[]` in multi. Ignored when `value` is provided.
+     */
+    defaultValue?: string | string[];
+    /**
+     * Fires when the selection changes. The first argument is the next
+     * value (`string` in single mode, `string[]` in multi). The second
+     * argument is the matched `SelectOption` (single), the matched array
+     * (multi), or `null` when the selection clears in single mode. For
+     * creatable rows not present in `options`, a synthetic
+     * `{ value, label: value }` is supplied.
+     *
+     * The match is a lookup, not an emptiness test: an emitted `''` yields the
+     * matching `SelectOption` when your `options` contain a `value: ''` row,
+     * and `null` only when they don't (a genuine clear).
+     */
+    onChange?: (value: string | string[], option: SelectOption<T> | SelectOption<T>[] | null) => void;
+    /**
+     * Controlled open state. Pair with `onOpenChange`. Omit both to let
+     * Select own its open state (the common case).
+     */
+    open?: boolean;
+    /** Initial open state for uncontrolled usage. Defaults to `false`. */
+    defaultOpen?: boolean;
+    /** Fires whenever Select wants to change open state. */
+    onOpenChange?: (open: boolean) => void;
+    /** Trigger height + type scale. See `SelectSize`. Defaults to `'md'`. */
+    size?: SelectSize;
+    /**
+     * Marks the trigger as invalid — applies the error border + sets
+     * `aria-invalid="true"`. Pair with an external error message linked via
+     * `aria-describedby`.
+     */
+    invalid?: boolean;
+    /**
+     * Placeholder shown when nothing is selected. In searchable mode, also
+     * the input's `placeholder` until the user types.
+     */
+    placeholder?: string;
+    /**
+     * Shows a `✕` button in the trigger that clears the selection. Opt-in:
+     * defaults to `false`. Always forced `false` when `disabled` or `readOnly`.
+     *
+     * "Clear" means "reset to the empty value" (`''` / `[]`), so the button
+     * only appears when the current value differs from that. A Select whose
+     * selected option IS `value: ''` is already at the cleared value and shows
+     * no ✕; a value matching no option (a stale id) does show one.
+     */
+    clearable?: boolean;
+    /**
+     * Disables the trigger entirely — non-interactive, dimmed, focusable
+     * only via assistive tech. Hidden form inputs are also disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Read-only — trigger is focusable but cannot open or change the
+     * selection. Useful for displaying a value inside a form that's not yet
+     * editable.
+     */
+    readOnly?: boolean;
+    /**
+     * Name attribute for native form submission. In multi mode, one hidden
+     * `<input>` per selected value is emitted (so `FormData.getAll(name)`
+     * returns the array).
+     */
+    name?: string;
+    /**
+     * Marks the field as required. The trigger exposes `aria-required="true"` to
+     * assistive technology. Hidden inputs still serialize named values, but they do
+     * not participate in native constraint validation; validate the selection in
+     * your form layer.
+     */
+    required?: boolean;
+    /** `form` attribute forwarded to the hidden `<input>` elements. */
+    form?: string;
+    /**
+     * Custom renderer for a row inside the listbox. Receives the option and
+     * its current `{ active, selected }` state (active = keyboard-focused
+     * row, selected = part of the current value). The returned node
+     * replaces the default label / description layout — chrome (padding,
+     * background, `aria-*`) stays.
+     */
+    renderOption?: (opt: SelectOption<T>, state: {
+        active: boolean;
+        selected: boolean;
+    }) => ReactNode;
+    /**
+     * Custom renderer for the selected value inside the single-mode trigger.
+     * Ignored in multi mode (see `renderTag`).
+     */
+    renderValue?: (opt: SelectOption<T>) => ReactNode;
+    /**
+     * Custom renderer for a chip inside the multi-mode `chips` trigger.
+     * Receives the option and a `remove` callback that deselects it. Ignored
+     * in single mode and in `triggerDisplay='summary'`.
+     */
+    renderTag?: (opt: SelectOption<T>, remove: () => void) => ReactNode;
+    /**
+     * Custom empty-state renderer. Fires when the filtered listbox has no
+     * rows. Receives the current trimmed query for use in messages like
+     * "No matches for 'foo'".
+     */
+    renderEmpty?: (query: string) => ReactNode;
+    /** Custom loading-state renderer for async mode. */
+    renderLoading?: () => ReactNode;
+    /**
+     * Custom error-state renderer for async mode. Receives the thrown
+     * `Error` and a `retry` callback that re-invokes `loadOptions` with the
+     * current query.
+     */
+    renderError?: (err: Error, retry: () => void) => ReactNode;
+    /**
+     * Accessible name for the trigger. Use this when a visible `<label>` is
+     * not present. Mutually exclusive with `aria-labelledby`.
+     */
+    'aria-label'?: string;
+    /**
+     * ID of an element that labels the trigger. Use when the label is a
+     * sibling node (e.g. a `<Field>` label).
+     */
+    'aria-labelledby'?: string;
+    /**
+     * ID of an element that describes the trigger — e.g. an error message
+     * or helper hint paired with `invalid`.
+     */
+    'aria-describedby'?: string;
+}
+/**
+ * Value picker covering single, multi (chips and summary), searchable, grouped, async-loaded and creatable patterns.
+ * @see docs/components/Select.md
+ */
+export declare const Select: <T = unknown>(props: SelectProps<T> & {
+    ref?: Ref<HTMLDivElement>;
+}) => React.ReactElement;

package/dist/components/Select/Select.js

@@ -0,0 +1,215 @@
+'use client';
+import Select_module_default from "./Select.module.js";
+import { SelectContext } from "./context.js";
+import { sanitizeId } from "../_internal/refs.js";
+import { useSelectState } from "./useSelectState.js";
+import { useAsyncOptions } from "../_internal/useAsyncOptions.js";
+import { findOption, findOptions, flattenOptions, hasExactLabelMatch } from "./utils.js";
+import { Trigger } from "./Trigger.js";
+import { Listbox } from "./Listbox.js";
+import { HiddenInputs } from "./HiddenInputs.js";
+import { forwardRef, useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
+import clsx from "clsx";
+import { jsx, jsxs } from "react/jsx-runtime";
+/**
+* Value picker covering single, multi (chips and summary), searchable, grouped, async-loaded and creatable patterns.
+* @see docs/components/Select.md
+*/
+var Select = forwardRef(function Select(props, ref) {
+	const { options = [], loadOptions, loadOnOpen = true, searchDebounceMs = 250, multiple = false, triggerDisplay = "chips", searchable = false, creatable = false, onCreate, value: controlledValue, defaultValue, onChange, open: controlledOpen, defaultOpen, onOpenChange, size = "md", invalid = false, placeholder, clearable, selectOnOpen = false, disabled = false, readOnly = false, name, required, form, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby, "aria-required": ariaRequired, renderOption, renderValue, renderTag, renderEmpty, renderLoading, renderError, className, id, ...rest } = props;
+	if (process.env.NODE_ENV !== "production" && creatable && !searchable) throw new Error("<Select>: `creatable` requires `searchable`. A creatable picker without a search input has no way to capture the new label.");
+	const reactId = useId();
+	const idBase = sanitizeId(reactId);
+	const listboxId = `select-listbox-${idBase}`;
+	const triggerId = id ?? `select-trigger-${idBase}`;
+	const getOptionId = useCallback((v) => `select-opt-${idBase}-${sanitizeId(v)}`, [idBase]);
+	const getGroupHeaderId = useCallback((label) => `select-grp-${idBase}-${sanitizeId(label)}`, [idBase]);
+	const lookupOptionsRef = useRef(options);
+	const state = useSelectState({
+		multiple,
+		value: controlledValue,
+		defaultValue,
+		onChange: (v) => {
+			if (multiple) {
+				const values = Array.isArray(v) ? v : [];
+				const found = findOptions(lookupOptionsRef.current, values);
+				const byValue = new Map(found.map((o) => [o.value, o]));
+				const opts = values.map((val) => byValue.get(val) ?? {
+					value: val,
+					label: val
+				});
+				onChange?.(v, opts);
+			} else if (typeof v === "string") {
+				const opt = findOption(lookupOptionsRef.current, v);
+				if (opt) onChange?.(v, opt);
+				else if (v === "") onChange?.(v, null);
+				else onChange?.(v, {
+					value: v,
+					label: v
+				});
+			} else onChange?.(v, null);
+		},
+		open: controlledOpen,
+		defaultOpen,
+		onOpenChange
+	});
+	if (process.env.NODE_ENV !== "production" && loadOptions && Array.isArray(options) && options.length > 0) console.warn("<Select> received both `options` and `loadOptions`. `loadOptions` wins; `options` is ignored.");
+	const [activeIndex, setActiveIndex] = useState(-1);
+	const [query, setQuery] = useState("");
+	const [hasOpenedOnce, setHasOpenedOnce] = useState(!loadOnOpen);
+	useEffect(() => {
+		if (state.open && !hasOpenedOnce) setHasOpenedOnce(true);
+	}, [state.open, hasOpenedOnce]);
+	const asyncResult = useAsyncOptions({
+		loadOptions,
+		query,
+		enabled: !!loadOptions && hasOpenedOnce,
+		debounceMs: searchDebounceMs
+	});
+	const effectiveOptions = loadOptions ? asyncResult.options : options;
+	lookupOptionsRef.current = effectiveOptions;
+	const allRows = useMemo(() => flattenOptions(effectiveOptions), [effectiveOptions]);
+	const rows = useMemo(() => {
+		if (loadOptions) return allRows;
+		if (!searchable || query.trim() === "") return allRows;
+		const q = query.toLowerCase();
+		const out = [];
+		let pendingHeader = null;
+		for (const row of allRows) {
+			if (row.kind === "header") {
+				pendingHeader = row;
+				continue;
+			}
+			if (row.option.label.toLowerCase().includes(q) || (row.option.description?.toLowerCase().includes(q) ?? false)) {
+				if (pendingHeader) {
+					out.push(pendingHeader);
+					pendingHeader = null;
+				}
+				out.push(row);
+			}
+		}
+		return out;
+	}, [
+		allRows,
+		searchable,
+		query,
+		loadOptions
+	]);
+	const createRow = useMemo(() => {
+		const trimmed = query.trim();
+		if (!creatable || !searchable || trimmed === "") return null;
+		if (hasExactLabelMatch(effectiveOptions, trimmed)) return null;
+		if (multiple) {
+			if ((Array.isArray(state.value) ? state.value : []).some((v) => v.toLowerCase() === trimmed.toLowerCase())) return null;
+		}
+		return {
+			kind: "option",
+			option: {
+				value: trimmed,
+				label: trimmed,
+				data: { __create: true }
+			}
+		};
+	}, [
+		creatable,
+		searchable,
+		query,
+		effectiveOptions,
+		multiple,
+		state.value
+	]);
+	const rowsWithCreate = useMemo(() => {
+		return createRow ? [...rows, createRow] : rows;
+	}, [rows, createRow]);
+	const prevQueryRef = useRef(query);
+	useEffect(() => {
+		if (prevQueryRef.current === query) return;
+		prevQueryRef.current = query;
+		if (!state.open) return;
+		setActiveIndex(rowsWithCreate.findIndex((r) => r.kind === "option" && !r.option.disabled));
+	}, [query, state.open]);
+	useEffect(() => {
+		if (!state.open || activeIndex < rowsWithCreate.length) return;
+		setActiveIndex(rowsWithCreate.findIndex((r) => r.kind === "option" && !r.option.disabled));
+	}, [
+		state.open,
+		activeIndex,
+		rowsWithCreate
+	]);
+	const triggerRef = useRef(null);
+	const triggerRootRef = useRef(null);
+	const listboxRef = useRef(null);
+	const effectiveClearable = (clearable ?? false) && !disabled && !readOnly;
+	const closeAndFocusTrigger = () => {
+		state.setOpen(false);
+		queueMicrotask(() => triggerRef.current?.focus({ preventScroll: true }));
+	};
+	const ctxValue = {
+		multiple,
+		searchable,
+		creatable,
+		triggerDisplay,
+		rows: rowsWithCreate,
+		allRows,
+		loading: loadOptions ? asyncResult.loading : false,
+		error: loadOptions ? asyncResult.error : null,
+		loadedQuery: loadOptions ? asyncResult.loadedQuery : void 0,
+		value: state.value,
+		setValue: state.setValue,
+		toggleValue: state.toggleValue,
+		open: state.open,
+		setOpen: state.setOpen,
+		activeIndex,
+		setActiveIndex,
+		query,
+		setQuery,
+		listboxId,
+		triggerId,
+		getOptionId,
+		getGroupHeaderId,
+		triggerRef,
+		triggerRootRef,
+		listboxRef,
+		closeAndFocusTrigger,
+		retry: asyncResult.retry,
+		onCreate,
+		renderOption,
+		renderValue,
+		renderTag,
+		renderEmpty,
+		renderLoading,
+		renderError
+	};
+	return /* @__PURE__ */ jsx(SelectContext.Provider, {
+		value: ctxValue,
+		children: /* @__PURE__ */ jsxs("div", {
+			ref,
+			...rest,
+			className: clsx(Select_module_default.root, Select_module_default[`size-${size}`], invalid && Select_module_default.invalid, disabled && Select_module_default.disabled, readOnly && Select_module_default.readOnly, className),
+			children: [
+				/* @__PURE__ */ jsx(Trigger, {
+					placeholder,
+					disabled,
+					readOnly,
+					invalid,
+					clearable: effectiveClearable,
+					selectOnOpen,
+					"aria-label": ariaLabel,
+					"aria-labelledby": ariaLabelledby,
+					"aria-describedby": ariaDescribedby,
+					"aria-required": required ? true : ariaRequired
+				}),
+				state.open && /* @__PURE__ */ jsx(Listbox, {}),
+				/* @__PURE__ */ jsx(HiddenInputs, {
+					name,
+					value: state.value,
+					multiple,
+					required: required ?? false,
+					form,
+					disabled
+				})
+			]
+		})
+	});
+});
+export { Select };

package/dist/components/Select/Select.module.js

@@ -0,0 +1,78 @@
+import "./Select.css";
+// src/components/Select/Select.module.scss
+var root = "Select__root__SJT5H";
+var triggerWrap = "Select__triggerWrap__tCrXD";
+var trigger = "Select__trigger__PdIsd";
+var chipsInput = "Select__chipsInput__tBM4Y";
+var triggerButton = "Select__triggerButton__IYvyH";
+var placeholder = "Select__placeholder__xJNJF";
+var triggerInput = "Select__triggerInput__Vl54R";
+var chevron = "Select__chevron__vZOjS";
+var clearButton = "Select__clearButton__FW-rG";
+var clearButtonInline = "Select__clearButtonInline__9onOd";
+var listbox = "Select__listbox__jvbXN";
+var listboxBody = "Select__listboxBody__YUgsm";
+var groupHeader = "Select__groupHeader__8Z4L8";
+var groupList = "Select__groupList__btSwG";
+var option = "Select__option__Uh7Df";
+var optionActive = "Select__optionActive__6juFb";
+var optionSelected = "Select__optionSelected__NXHT4";
+var optionDisabled = "Select__optionDisabled__TbbSG";
+var optionDescription = "Select__optionDescription__b5yq0";
+var optionCreate = "Select__optionCreate__t8-6b";
+var popoverSearch = "Select__popoverSearch__tpSpN";
+var triggerChips = "Select__triggerChips__MKAY6";
+var chip = "Select__chip__Qsk9S";
+var chipLabel = "Select__chipLabel__jmzCd";
+var chipRemove = "Select__chipRemove__IYFac";
+var chipDisabled = "Select__chipDisabled__kZM1C";
+var triggerChipsInput = "Select__triggerChipsInput__-jA59";
+var stateRow = "Select__stateRow__68Aig";
+var spinner = "Select__spinner__dUfnf";
+var retryButton = "Select__retryButton__YApIw";
+var invalid = "Select__invalid__1KBqo";
+var disabled = "Select__disabled__urn-S";
+var readOnly = "Select__readOnly__Xhi4i";
+var srOnly = "Select__srOnly__PhRwy";
+var Select_module_default = {
+	root,
+	triggerWrap,
+	trigger,
+	chipsInput,
+	triggerButton,
+	placeholder,
+	triggerInput,
+	chevron,
+	clearButton,
+	clearButtonInline,
+	listbox,
+	"select-open": "Select__select-open__xDwQy",
+	listboxBody,
+	groupHeader,
+	groupList,
+	option,
+	optionActive,
+	optionSelected,
+	optionDisabled,
+	optionDescription,
+	optionCreate,
+	popoverSearch,
+	triggerChips,
+	chip,
+	chipLabel,
+	chipRemove,
+	chipDisabled,
+	triggerChipsInput,
+	stateRow,
+	spinner,
+	"select-spin": "Select__select-spin__imTBE",
+	retryButton,
+	"size-sm": "Select__size-sm__lbxGH",
+	"size-md": "Select__size-md__EmtOs",
+	"size-lg": "Select__size-lg__zQrZ1",
+	invalid,
+	disabled,
+	readOnly,
+	srOnly
+};
+export { chevron, chip, chipDisabled, chipLabel, chipRemove, chipsInput, clearButton, clearButtonInline, Select_module_default as default, disabled, groupHeader, groupList, invalid, listbox, listboxBody, option, optionActive, optionCreate, optionDescription, optionDisabled, optionSelected, placeholder, popoverSearch, readOnly, retryButton, root, spinner, srOnly, stateRow, trigger, triggerButton, triggerChips, triggerChipsInput, triggerInput, triggerWrap };

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

@@ -0,0 +1,24 @@
+export interface TriggerProps {
+    placeholder?: string;
+    disabled?: boolean;
+    readOnly?: boolean;
+    invalid?: boolean;
+    clearable?: boolean;
+    /** Select the combobox text on open (single searchable trigger only). */
+    selectOnOpen?: boolean;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    'aria-describedby'?: string;
+    'aria-required'?: boolean | 'true' | 'false';
+}
+/**
+ * Internal dispatcher rendered by `<Select>`. Routes to the appropriate
+ * trigger variant based on mode flags from context.
+ *
+ *  - `single + !searchable`            → `ButtonTrigger`
+ *  - `single + searchable`             → `ComboboxInputTrigger`
+ *  - `multi + chips + !searchable`     → `ChipsButtonTrigger`
+ *  - `multi + chips + searchable`      → `ChipsInputTrigger` (Phase 6 task 15)
+ *  - `multi + summary` (both forms)    → `ButtonTrigger` w/ comma-joined labels
+ */
+export declare function Trigger(props: TriggerProps): import("react").JSX.Element;