@tempots/beatui 1.2.2 → 1.2.3

package/dist/types/components/form/input/index.d.ts

@@ -12,6 +12,7 @@ export * from './dropdown-base';
 export * from './combobox-input';
 export * from './select-tags-input';
 export * from './combobox-tags-input';
+export * from './multi-select';
 export * from './date-input';
 export * from './date-time-input';
 export * from './editable-text';

package/dist/types/components/form/input/multi-select.d.ts

@@ -0,0 +1,98 @@
+import { Renderable, TNode, Value } from '@tempots/dom';
+import { InputOptions } from './input-options';
+import { DropdownOption } from './option';
+import { BaseControlOptions, ControlOptions } from '../control';
+/**
+ * Options for the {@link MultiSelect} component.
+ *
+ * @typeParam T - The type of option values.
+ */
+export type MultiSelectOptions<T> = {
+    /** The available dropdown options to choose from. */
+    options: Value<DropdownOption<T>[]>;
+    /**
+     * Custom equality function for comparing option values.
+     * @default (a, b) => a === b
+     */
+    equality?: (a: T, b: T) => boolean;
+    /** Placeholder text shown when no values are selected. */
+    placeholder?: Value<string>;
+    /** Placeholder text for the search input inside the dropdown. */
+    searchPlaceholder?: Value<string>;
+    /** Custom filter function for matching options against the search query. */
+    filter?: (q: string, opt: {
+        label: string;
+    }) => boolean;
+    /**
+     * Async option loader. When provided, called with the search query.
+     * The returned options replace the static `options` in the dropdown.
+     */
+    loadOptions?: (query: string) => Promise<DropdownOption<T>[]>;
+    /** Debounce delay in ms for async loading. @default 300 */
+    loadDebounce?: number;
+    /** Maximum number of values that can be selected. */
+    maxSelection?: Value<number | undefined>;
+    /** Whether to show "Select all" / "Clear all" action buttons. @default false */
+    showActions?: Value<boolean>;
+    /** Label for the "Select all" action. @default 'Select all' */
+    selectAllLabel?: Value<string>;
+    /** Label for the "Clear all" action. @default 'Clear all' */
+    clearAllLabel?: Value<string>;
+    /**
+     * Custom option renderer. Receives the option and whether it is selected.
+     * Return a TNode to replace the default option rendering.
+     */
+    renderOption?: (option: {
+        value: T;
+        label: string;
+        disabled?: boolean;
+    }, selected: Value<boolean>) => TNode;
+} & InputOptions<T[]>;
+/**
+ * A fully-featured multi-select dropdown component.
+ *
+ * Combines a dropdown flyout with searchable options, selected-value chips,
+ * keyboard navigation, async loading, select/clear all actions, and max
+ * selection limits. Uses proper ARIA combobox/listbox semantics.
+ *
+ * @typeParam T - The type of option values.
+ * @param options - Configuration options for the multi-select.
+ * @returns A renderable multi-select component.
+ *
+ * @example
+ * ```ts
+ * MultiSelect({
+ *   value: prop<string[]>([]),
+ *   options: [
+ *     Option.value('react', 'React'),
+ *     Option.value('vue', 'Vue'),
+ *     Option.group('Backend', [
+ *       Option.value('node', 'Node.js'),
+ *       Option.value('deno', 'Deno'),
+ *     ]),
+ *   ],
+ *   placeholder: 'Select frameworks...',
+ *   searchPlaceholder: 'Search...',
+ *   showActions: true,
+ *   maxSelection: 3,
+ *   onChange: tags => console.log('Selected:', tags),
+ * })
+ * ```
+ */
+export declare function MultiSelect<T>(options: MultiSelectOptions<T>): TNode;
+/**
+ * A base form control wrapper for {@link MultiSelect} using a raw controller.
+ *
+ * @typeParam T - The type of option values.
+ * @param options - Base controller options for the multi-select control.
+ * @returns A renderable form control component.
+ */
+export declare function BaseMultiSelectControl<T>(options: BaseControlOptions<T[], MultiSelectOptions<T>>): TNode;
+/**
+ * A full form control wrapper for {@link MultiSelect} with label, error, and description support.
+ *
+ * @typeParam T - The type of option values.
+ * @param options - Controller options for the multi-select control.
+ * @returns A renderable form control component with wrapper.
+ */
+export declare function MultiSelectControl<T>(options: ControlOptions<T[], MultiSelectOptions<T>>): Renderable;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tempots/beatui",
-  "version": "1.2.2",
+  "version": "1.2.3",
   "type": "module",
   "main": "dist/index.umd.js",
   "module": "dist/index.es.js",