gbs-add-block 1.2.8 → 1.2.9

package/README.md

@@ -1,4 +1,4 @@
-# GBS Building Blocks 2.0 (v1.2.8)
+# GBS Building Blocks 2.0 (v1.2.9)
 
 Latest and upgraded version of GBS building blocks with headless UI and removed dependencies.
 
@@ -6,9 +6,9 @@ Latest and upgraded version of GBS building blocks with headless UI and removed
 
 For detailed documentation on usage and props, Please visit: [Building Block Documentation v2.0](https://gramprokit.vercel.app)
 
-## What's New 🎉 (Ver 1.2.8)
+## What's New 🎉 (Ver 1.2.9)
 
-- Canditate update for next major change 2.0.0
+- Update Candidate for next major change 2.0.0
 
 ## Authors
 

package/index.cjs

@@ -35,6 +35,7 @@ const CONFIG = {
     "UsePaginatedData",
     "UseUploader",
     "DataGridBeta",
+    "Combobox"
   ],
   // Define component dependencies
   dependencies: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gbs-add-block",
-  "version": "1.2.8",
+  "version": "1.2.9",
   "description": "React Component Library",
   "type": "module",
   "files": [

package/source/components/combobox/README.md

@@ -0,0 +1,170 @@
+# Combobox: Select and MultiSelect
+
+Two value pickers with option search, built on one engine and styled to match
+the DataGrid. No runtime dependencies besides React 19.
+
+- **`<Select>`** — one value.
+- **`<MultiSelect>`** — many values, shown as tags.
+
+Both support client or server options, grouping, descriptions, disabled
+options, virtualization for long lists, creating new options, forms, full
+keyboard control, dark mode and right-to-left layouts.
+
+## Setup
+
+```ts
+import { MultiSelect, Select } from "@/components/combobox";
+import "@/components/combobox/styles.css";
+```
+
+The stylesheet reuses the DataGrid's `--dg-*` variables when that stylesheet is
+loaded, so both components share a theme, and falls back to the same palette
+when used on its own.
+
+## Basic usage
+
+```tsx
+const countries = [
+  { value: "in", label: "India", group: "Asia" },
+  { value: "de", label: "Germany", group: "Europe", description: "Berlin" },
+  { value: "mx", label: "Mexico", group: "Americas", disabled: true },
+];
+
+const [country, setCountry] = useState<string | null>(null);
+
+<Select label="Country" options={countries} value={country} onChange={setCountry} />;
+
+const [tags, setTags] = useState<string[]>([]);
+<MultiSelect label="Tags" options={tagOptions} value={tags} onChange={setTags} max={5} />;
+```
+
+Both are controlled with `value` + `onChange`, or uncontrolled with
+`defaultValue`. `onChange` also receives the full option objects:
+`onChange={(value, option) => …}` (single) and `(values, options) => …` (multi).
+
+## Options
+
+```ts
+interface ComboboxOption<V = string> {
+  value: V;              // string or number
+  label: string;
+  description?: string;  // second line
+  group?: string;        // heading; groups appear in first-seen order
+  disabled?: boolean;
+  icon?: ReactNode;
+  keywords?: string[];   // extra search terms
+}
+```
+
+Search matches the label (and highlights it), the description and keywords.
+
+## Props
+
+Shared by both components:
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `options` | `ComboboxOption<V>[]` | required | Options to show. |
+| `mode` | `"client"` \| `"server"` | `"client"` | `server` skips local filtering; `options` are the current results. |
+| `loading` | `boolean` | `false` | Shows a spinner; keeps current options visible. |
+| `onSearchChange` | `(search: string) => void` | — | Search text; debounced in server mode, and fired on open. |
+| `searchDebounce` | `number` | `250` | Debounce in milliseconds (server mode). |
+| `searchable` | `boolean` | `true` | Show the search box. When `false`, typing jumps to a matching option. |
+| `hasMore` / `onLoadMore` | `boolean` / `() => void` | — | Paging: called when the list nears its end, plus a "Load more" button. |
+| `filterFn` | `(option, search) => boolean` | — | Replaces the built-in matching (client mode). |
+| `renderOption` | `(option, { selected, active }) => ReactNode` | — | Custom option content. |
+| `allowCreate` / `onCreate` | `boolean` / `(label: string) => void` | — | Offers "Create …" when nothing matches. |
+| `label`, `description`, `error` | `ReactNode` | — | Field label, hint and error message. `error` also marks the control invalid. |
+| `placeholder` | `string` | `"Select…"` | Shown when nothing is selected. |
+| `required`, `disabled` | `boolean` | `false` | Field states. |
+| `clearable` | `boolean` | `true` | Show the clear button. |
+| `size` | `"sm"` \| `"md"` \| `"lg"` | `"md"` | Control height and font size. |
+| `name` | `string` | — | Posts hidden inputs for forms (one per value). |
+| `maxHeight` | `number` | `280` | Max height of the list. |
+| `virtualize` | `boolean` \| `number` | `true` | Virtualizes above 80 options; pass a number to change the threshold. |
+| `emptyMessage` | `ReactNode` | "No options found" | Shown when nothing matches. |
+| `className`, `classNames`, `style` | — | — | Styling hooks. Slots: `root`, `label`, `control`, `value`, `tag`, `popover`, `search`, `list`, `option`, `footer`. |
+| `localeText` | `Partial<ComboboxLocaleText>` | English | Overrides UI text. |
+| `onOpenChange` | `(open: boolean) => void` | — | Fires when the list opens or closes. |
+| `ref` | `Ref<ComboboxHandle<V>>` | — | `open()`, `close()`, `toggle()`, `focus()`, `clear()`, `getValue()`, `getSelectedOptions()`. |
+
+`Select` adds `value` / `defaultValue` (`V | null`) and `closeOnSelect`
+(default `true`). `MultiSelect` adds `value` / `defaultValue` (`V[]`), `max`,
+`maxVisibleTags` (default 3), `showSelectAll` (default `true`) and
+`closeOnSelect` (default `false`).
+
+## Server options
+
+```tsx
+const [search, setSearch] = useState("");
+const [page, setPage] = useState(0);
+const { data, isFetching } = useQuery({
+  queryKey: ["people", search, page],
+  queryFn: ({ signal }) => fetchPeople({ search, page, signal }),
+  placeholderData: keepPreviousData,
+});
+
+<MultiSelect
+  mode="server"
+  options={data?.options ?? []}
+  hasMore={data?.hasMore}
+  loading={isFetching}
+  onSearchChange={(term) => { setPage(0); setSearch(term); }}
+  onLoadMore={() => setPage((p) => p + 1)}
+  value={selected}
+  onChange={setSelected}
+/>;
+```
+
+- `onSearchChange` fires once when the list opens (so you can load a first page)
+  and then debounced as the user types.
+- Labels of chosen options are remembered, so tags stay readable after the
+  results change. If you set `value` from outside before the matching options
+  have loaded, the raw value is shown until they arrive.
+
+## Keyboard
+
+| Keys | Action |
+| --- | --- |
+| **Enter**, **Space**, **↓**, **↑** | Open the list. |
+| **↓** / **↑** | Move between options (disabled options are skipped). |
+| **Home** / **End** | First / last option. |
+| **Page Down** / **Page Up** | Move ten options. |
+| **Enter** | Choose the highlighted option, or create. |
+| **Escape** | Close and return focus to the control. |
+| **Tab** | Close and move to the next field. |
+| **Backspace** | MultiSelect: remove the last tag (when the search box is empty). |
+| typing | Types into the search box, or jumps to a matching option when `searchable={false}`. |
+
+The control is a `role="combobox"` that owns a `role="listbox"`; the active
+option is tracked with `aria-activedescendant`, so focus stays in the search
+box. The list renders in the top layer through the native Popover API, so it is
+never clipped by a scrolling parent (including inside a DataGrid cell).
+
+## Theming
+
+Override `--cb-*` variables (they default to the grid's `--dg-*`):
+
+```css
+.cb-root { --cb-accent: #7c3aed; --cb-radius: 12px; }
+```
+
+State attributes for styling: `data-state="open"`, `data-size`, `data-invalid`,
+`data-disabled` on the root and control; `data-active`, `data-selected`,
+`data-disabled` on options.
+
+## Headless use
+
+`useCombobox()` holds the whole engine (filtering, active option, keyboard,
+selection, search requests) and is exported if you want to build a different UI
+on top. The framework-free helpers — `filterOptions`, `buildListItems`,
+`nextEnabledIndex`, `toggleValue`, `measureItems`, `getVisibleRange` — are
+exported from `@/components/combobox/core` and can also run on a server.
+
+## Known limits
+
+- Option rows have a fixed height per `size` (taller when any option has a
+  description), because the list is virtualized.
+- No async "load option by value": pass options that include the selected
+  values, or select them through the UI at least once.
+- Tree or multi-level options are not supported.

package/source/components/combobox/__tests__/core.test.ts

@@ -0,0 +1,134 @@
+import { describe, expect, it } from "vitest";
+import {
+  buildListItems,
+  filterOptions,
+  findByPrefix,
+  firstEnabledIndex,
+  lastEnabledIndex,
+  matchRanges,
+  nextEnabledIndex,
+  toggleValue,
+} from "../core/filter";
+import type { ComboboxOption } from "../core/types";
+import { getVisibleRange, measureItems, scrollToItem } from "../core/virtual";
+
+const options: ComboboxOption[] = [
+  { value: "in", label: "India", group: "Asia", keywords: ["bharat"] },
+  { value: "jp", label: "Japan", group: "Asia" },
+  { value: "kr", label: "South Korea", group: "Asia", disabled: true },
+  { value: "de", label: "Germany", group: "Europe", description: "Berlin" },
+  { value: "fr", label: "France", group: "Europe" },
+];
+
+const labels = (list: { option: ComboboxOption }[]) => list.map((entry) => entry.option.label);
+
+describe("matching", () => {
+  it("returns merged, case-insensitive ranges for every term", () => {
+    expect(matchRanges("South Korea", ["korea"])).toEqual([[6, 11]]);
+    expect(matchRanges("Germany", ["ger", "man"])).toEqual([[0, 6]]);
+    expect(matchRanges("Germany", ["ger", "xyz"])).toBeNull();
+    expect(matchRanges("Germany", [])).toEqual([]);
+  });
+
+  it("filters on label, description and keywords", () => {
+    expect(labels(filterOptions(options, ""))).toHaveLength(5);
+    expect(labels(filterOptions(options, "an"))).toEqual(["Japan", "Germany", "France"]);
+    expect(labels(filterOptions(options, "berlin"))).toEqual(["Germany"]);
+    expect(labels(filterOptions(options, "bharat"))).toEqual(["India"]);
+    expect(labels(filterOptions(options, "nothing"))).toEqual([]);
+  });
+
+  it("highlights the label only", () => {
+    const [india] = filterOptions(options, "ind");
+    expect(india.matches).toEqual([[0, 3]]);
+    const [germany] = filterOptions(options, "berlin");
+    expect(germany.matches).toEqual([]);
+  });
+
+  it("uses a custom filter when given", () => {
+    const entries = filterOptions(options, "x", (option) => option.value === "jp");
+    expect(labels(entries)).toEqual(["Japan"]);
+  });
+});
+
+describe("list building", () => {
+  it("adds group headings and numbers options across groups", () => {
+    const items = buildListItems(filterOptions(options, ""));
+    expect(items.map((item) => (item.kind === "group" ? `# ${item.label}` : item.entry.option.label))).toEqual([
+      "# Asia",
+      "India",
+      "Japan",
+      "South Korea",
+      "# Europe",
+      "Germany",
+      "France",
+    ]);
+    const optionItems = items.filter((item) => item.kind === "option");
+    expect(optionItems.map((item) => (item.kind === "option" ? item.index : -1))).toEqual([0, 1, 2, 3, 4]);
+  });
+
+  it("skips headings when no option has a group", () => {
+    const flat = buildListItems(filterOptions([{ value: "a", label: "A" }], ""));
+    expect(flat).toHaveLength(1);
+    expect(flat[0].kind).toBe("option");
+  });
+});
+
+describe("keyboard helpers", () => {
+  const entries = filterOptions(options, "");
+
+  it("moves over enabled options and wraps", () => {
+    expect(nextEnabledIndex(entries, 0, 1)).toBe(1);
+    expect(nextEnabledIndex(entries, 1, 1)).toBe(3); // skips the disabled option
+    expect(nextEnabledIndex(entries, 4, 1)).toBe(0);
+    expect(nextEnabledIndex(entries, 0, -1)).toBe(4);
+    expect(nextEnabledIndex([], 0, 1)).toBe(-1);
+  });
+
+  it("finds the first and last enabled option", () => {
+    expect(firstEnabledIndex(entries)).toBe(0);
+    expect(firstEnabledIndex(entries, 2)).toBe(3);
+    expect(lastEnabledIndex(entries)).toBe(4);
+    expect(lastEnabledIndex([{ option: options[2], matches: [] }])).toBe(-1);
+  });
+
+  it("jumps to a typed prefix", () => {
+    expect(findByPrefix(entries, "ja", -1)).toBe(1);
+    expect(findByPrefix(entries, "s", -1)).toBe(-1); // South Korea is disabled
+    expect(findByPrefix(entries, "zz", -1)).toBe(-1);
+  });
+});
+
+describe("selection", () => {
+  it("adds, removes and respects max", () => {
+    expect(toggleValue(["a"], "b")).toEqual(["a", "b"]);
+    expect(toggleValue(["a", "b"], "a")).toEqual(["b"]);
+    expect(toggleValue(["a", "b"], "c", 2)).toEqual(["a", "b"]);
+    expect(toggleValue(["a", "b"], "b", 2)).toEqual(["a"]);
+  });
+});
+
+describe("virtualization", () => {
+  const items = buildListItems(filterOptions(options, ""));
+  const metrics = measureItems(items, { option: 34, group: 26 });
+
+  it("measures group and option rows", () => {
+    expect(metrics.total).toBe(2 * 26 + 5 * 34);
+    expect(metrics.offsets[0]).toBe(0);
+    expect(metrics.offsets[1]).toBe(26);
+  });
+
+  it("returns the visible window with overscan", () => {
+    expect(getVisibleRange(metrics, 0, 60, 0)).toEqual({ start: 0, end: 3 });
+    expect(getVisibleRange(metrics, 0, 0, 0)).toEqual({ start: 0, end: 7 });
+    const range = getVisibleRange(metrics, 100, 60, 1);
+    expect(range.start).toBeLessThanOrEqual(3);
+    expect(range.end).toBeGreaterThanOrEqual(5);
+  });
+
+  it("scrolls an item into view only when needed", () => {
+    expect(scrollToItem(metrics, 0, 0, 100)).toBeNull();
+    expect(scrollToItem(metrics, 6, 0, 100)).toBe(metrics.offsets[7] - 100);
+    expect(scrollToItem(metrics, 1, 40, 100)).toBe(26);
+  });
+});

package/source/components/combobox/core/filter.ts

@@ -0,0 +1,155 @@
+import type {
+  ComboboxOption,
+  ListItem,
+  MatchRange,
+  OptionEntry,
+  OptionValue,
+} from "./types";
+
+/** Ranges of `text` matching every search term, or null when one term is missing. */
+export function matchRanges(text: string, terms: readonly string[]): MatchRange[] | null {
+  if (terms.length === 0) return [];
+  const haystack = text.toLocaleLowerCase();
+  const ranges: MatchRange[] = [];
+  for (const term of terms) {
+    const start = haystack.indexOf(term);
+    if (start === -1) return null;
+    ranges.push([start, start + term.length]);
+  }
+  return mergeRanges(ranges);
+}
+
+function mergeRanges(ranges: MatchRange[]): MatchRange[] {
+  const sorted = [...ranges].sort((a, b) => a[0] - b[0]);
+  const merged: MatchRange[] = [];
+  for (const range of sorted) {
+    const last = merged.at(-1);
+    if (last && range[0] <= last[1]) last[1] = Math.max(last[1], range[1]);
+    else merged.push([...range]);
+  }
+  return merged;
+}
+
+export const splitTerms = (search: string) =>
+  search.trim().toLocaleLowerCase().split(/\s+/).filter(Boolean);
+
+/**
+ * Filters options by search text. The label is matched first; description and
+ * keywords also match but are not highlighted.
+ */
+export function filterOptions<V extends OptionValue>(
+  options: readonly ComboboxOption<V>[],
+  search: string,
+  filterFn?: (option: ComboboxOption<V>, search: string) => boolean,
+): OptionEntry<V>[] {
+  const terms = splitTerms(search);
+  if (terms.length === 0 && !filterFn) {
+    return options.map((option) => ({ option, matches: [] }));
+  }
+
+  const entries: OptionEntry<V>[] = [];
+  for (const option of options) {
+    if (filterFn) {
+      if (filterFn(option, search)) entries.push({ option, matches: matchRanges(option.label, terms) ?? [] });
+      continue;
+    }
+    const labelMatches = matchRanges(option.label, terms);
+    if (labelMatches) {
+      entries.push({ option, matches: labelMatches });
+      continue;
+    }
+    const extra = [option.description, ...(option.keywords ?? [])].filter(Boolean).join(" ");
+    if (extra && matchRanges(extra, terms)) entries.push({ option, matches: [] });
+  }
+  return entries;
+}
+
+/** Adds group headings, keeping the order in which groups first appear. */
+export function buildListItems<V extends OptionValue>(entries: readonly OptionEntry<V>[]): ListItem<V>[] {
+  const hasGroups = entries.some((entry) => entry.option.group);
+  if (!hasGroups) {
+    return entries.map((entry, index) => ({ kind: "option", entry, index }));
+  }
+
+  const groups = new Map<string, OptionEntry<V>[]>();
+  for (const entry of entries) {
+    const key = entry.option.group ?? "";
+    const list = groups.get(key);
+    if (list) list.push(entry);
+    else groups.set(key, [entry]);
+  }
+
+  const items: ListItem<V>[] = [];
+  let index = 0;
+  for (const [group, list] of groups) {
+    if (group) items.push({ kind: "group", label: group });
+    for (const entry of list) items.push({ kind: "option", entry, index: index++ });
+  }
+  return items;
+}
+
+/** Next selectable option index, skipping disabled options. Wraps around. */
+export function nextEnabledIndex<V extends OptionValue>(
+  entries: readonly OptionEntry<V>[],
+  from: number,
+  delta: number,
+): number {
+  const count = entries.length;
+  if (count === 0) return -1;
+  let index = from;
+  for (let step = 0; step < count; step++) {
+    index = index + delta;
+    if (index < 0) index = count - 1;
+    if (index >= count) index = 0;
+    if (!entries[index].option.disabled) return index;
+  }
+  return -1;
+}
+
+/** First selectable option at or after `from` (searching forward, no wrap). */
+export function firstEnabledIndex<V extends OptionValue>(
+  entries: readonly OptionEntry<V>[],
+  from = 0,
+): number {
+  for (let index = Math.max(0, from); index < entries.length; index++) {
+    if (!entries[index].option.disabled) return index;
+  }
+  for (let index = Math.min(from, entries.length) - 1; index >= 0; index--) {
+    if (!entries[index].option.disabled) return index;
+  }
+  return -1;
+}
+
+export function lastEnabledIndex<V extends OptionValue>(entries: readonly OptionEntry<V>[]): number {
+  for (let index = entries.length - 1; index >= 0; index--) {
+    if (!entries[index].option.disabled) return index;
+  }
+  return -1;
+}
+
+/** Adds or removes a value, respecting `max` (ignored when removing). */
+export function toggleValue<V extends OptionValue>(
+  values: readonly V[],
+  value: V,
+  max?: number,
+): V[] {
+  if (values.includes(value)) return values.filter((v) => v !== value);
+  if (max !== undefined && values.length >= max) return [...values];
+  return [...values, value];
+}
+
+/** Index of the first option matching a typed prefix, for type-ahead. */
+export function findByPrefix<V extends OptionValue>(
+  entries: readonly OptionEntry<V>[],
+  prefix: string,
+  from: number,
+): number {
+  const needle = prefix.toLocaleLowerCase();
+  const count = entries.length;
+  for (let step = 1; step <= count; step++) {
+    const index = (from + step + count) % count;
+    const { option } = entries[index];
+    if (!option.disabled && option.label.toLocaleLowerCase().startsWith(needle)) return index;
+  }
+  return -1;
+}

package/source/components/combobox/core/index.ts

@@ -0,0 +1,16 @@
+// Framework-free helpers: the same filtering and list building the components
+// use, so a server (or a test) can reproduce them.
+export {
+  buildListItems,
+  filterOptions,
+  findByPrefix,
+  firstEnabledIndex,
+  lastEnabledIndex,
+  matchRanges,
+  nextEnabledIndex,
+  splitTerms,
+  toggleValue,
+} from "./filter";
+export { getVisibleRange, measureItems, scrollToItem } from "./virtual";
+export type { ItemSizes, ListMetrics, Range } from "./virtual";
+export type * from "./types";

package/source/components/combobox/core/types.ts

@@ -0,0 +1,48 @@
+import type { ReactNode } from "react";
+
+export type OptionValue = string | number;
+
+export interface ComboboxOption<V extends OptionValue = string> {
+  value: V;
+  label: string;
+  /** Secondary line shown under the label. */
+  description?: string;
+  /** Options with the same group are listed under one heading. */
+  group?: string;
+  disabled?: boolean;
+  /** Rendered before the label. */
+  icon?: ReactNode;
+  /** Extra text the search should match (synonyms, codes). */
+  keywords?: string[];
+}
+
+/** Character range of a search hit, used to highlight the label. */
+export type MatchRange = [start: number, end: number];
+
+export interface OptionEntry<V extends OptionValue = string> {
+  option: ComboboxOption<V>;
+  /** Ranges in `option.label` that matched the search. */
+  matches: MatchRange[];
+}
+
+/** One row of the rendered list: a group heading or an option. */
+export type ListItem<V extends OptionValue = string> =
+  | { kind: "group"; label: string }
+  | { kind: "option"; entry: OptionEntry<V>; index: number };
+
+export type ComboboxSize = "sm" | "md" | "lg";
+
+export interface ComboboxLocaleText {
+  searchPlaceholder: string;
+  noResults: string;
+  loading: string;
+  loadMore: string;
+  clear: string;
+  clearAll: string;
+  selectAll: string;
+  createOption(label: string): string;
+  selectedCount(count: string): string;
+  moreCount(count: string): string;
+  removeOption(label: string): string;
+  maxReached(max: string): string;
+}

package/source/components/combobox/core/virtual.ts

@@ -0,0 +1,67 @@
+import type { ListItem, OptionValue } from "./types";
+
+export interface ItemSizes {
+  option: number;
+  group: number;
+}
+
+export interface ListMetrics {
+  /** Offset of each item, plus the total height as the last entry. */
+  offsets: number[];
+  total: number;
+}
+
+export function measureItems<V extends OptionValue>(
+  items: readonly ListItem<V>[],
+  sizes: ItemSizes,
+): ListMetrics {
+  const offsets = new Array<number>(items.length + 1);
+  let offset = 0;
+  for (let i = 0; i < items.length; i++) {
+    offsets[i] = offset;
+    offset += items[i].kind === "group" ? sizes.group : sizes.option;
+  }
+  offsets[items.length] = offset;
+  return { offsets, total: offset };
+}
+
+export interface Range {
+  start: number;
+  end: number;
+}
+
+/** Items intersecting the visible window, plus overscan. */
+export function getVisibleRange(metrics: ListMetrics, scrollTop: number, height: number, overscan = 4): Range {
+  const count = metrics.offsets.length - 1;
+  if (count === 0 || height === 0) return { start: 0, end: count };
+
+  const find = (position: number) => {
+    let lo = 0;
+    let hi = count;
+    while (lo < hi) {
+      const mid = (lo + hi) >> 1;
+      if (metrics.offsets[mid + 1] <= position) lo = mid + 1;
+      else hi = mid;
+    }
+    return lo;
+  };
+
+  const start = find(scrollTop);
+  const end = find(scrollTop + height) + 1;
+  return { start: Math.max(0, start - overscan), end: Math.min(count, end + overscan) };
+}
+
+/** Scroll position that brings an item fully into view, or null if it already is. */
+export function scrollToItem(
+  metrics: ListMetrics,
+  itemIndex: number,
+  scrollTop: number,
+  height: number,
+): number | null {
+  const top = metrics.offsets[itemIndex];
+  const bottom = metrics.offsets[itemIndex + 1];
+  if (top === undefined || bottom === undefined) return null;
+  if (top < scrollTop) return top;
+  if (bottom > scrollTop + height) return bottom - height;
+  return null;
+}

package/source/components/combobox/index.ts

@@ -0,0 +1,13 @@
+export { Select } from "./react/Select";
+export type { SelectProps } from "./react/Select";
+export { MultiSelect } from "./react/MultiSelect";
+export type { MultiSelectProps } from "./react/MultiSelect";
+export { useCombobox } from "./react/useCombobox";
+export { defaultComboboxText } from "./react/locale";
+export type {
+  ComboboxHandle,
+  ComboboxSharedProps,
+  ComboboxSlot,
+  OptionState,
+} from "./react/props";
+export * from "./core";