@datum-cloud/datum-ui 0.5.0 → 0.6.0-alpha.a37bf9a

package/README.md

@@ -88,7 +88,7 @@ Some components with shared heavy dependencies are grouped under a single subpat
 | `@datum-cloud/datum-ui/map`         | `Map`, `PlaceAutocomplete`, + map controls | `leaflet`, `react-leaflet`, + leaflet plugins |
 | `@datum-cloud/datum-ui/dropzone`    | `Dropzone`, `FileInputButton`              | `react-dropzone`                              |
 | `@datum-cloud/datum-ui/chart`       | `ChartContainer`, `ChartTooltip`, etc.     | `recharts`                                    |
-| `@datum-cloud/datum-ui/form`        | `Form`, `FormField`, `FormInput`, etc.     | `@conform-to/react`, `@conform-to/zod`, `zod` |
+| `@datum-cloud/datum-ui/form`        | `Form`, `FormField`, `FormInput`, etc.     | See [Form Adapters](#form-adapters) below     |
 
 ## Components
 
@@ -136,31 +136,35 @@ Thin wrappers around shadcn/Radix primitives with Datum styling. **Radix UI depe
 
 Complex, fully-customized components with significant business logic.
 
-| Component                                                                                                                        | Additional Dependencies                       | Description                                |
-| -------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------- | ------------------------------------------ |
-| `Autocomplete`                                                                                                                   | —                                             | Search autocomplete input                  |
-| `AvatarStack`                                                                                                                    | —                                             | Stacked avatar display                     |
-| `CalendarDatePicker`                                                                                                             | `react-day-picker`, `date-fns`                | Date/range picker with presets             |
-| `CodeEditor`, `CodeEditorTabs`                                                                                                   | `@monaco-editor/react`, `monaco-editor`       | Monaco-based code editor with VS Code UX   |
-| `DataTable`, `DataTableColumnHeader`, `DataTablePagination`, `DataTableToolbar`, `DataTableViewOptions`                          | `@tanstack/react-table`                       | Advanced data table with sorting/filtering |
-| `Dropdown`, `DropdownHeader`, `DropdownItem`, `DropdownSection`                                                                  | —                                             | Dropdown menu                              |
-| `Dropzone`                                                                                                                       | `react-dropzone`                              | File drag-and-drop upload area             |
-| `EmptyContent`                                                                                                                   | —                                             | Empty state placeholder                    |
-| `FileInputButton`                                                                                                                | —                                             | File upload button                         |
-| `Form`, `FormField`, `FormInput`, `FormTextarea`, `FormSelect`, `FormCheckbox`, `FormSwitch`, `FormRadioGroup`, `FormFieldArray` | `@conform-to/react`, `@conform-to/zod`, `zod` | Form system with validation                |
-| `Grid`                                                                                                                           | `@tanstack/react-virtual`                     | Virtualized data grid                      |
-| `InputNumber`                                                                                                                    | `react-number-format`                         | Numeric input with formatting              |
-| `InputWithAddons`                                                                                                                | —                                             | Input with prefix/suffix addons            |
-| `LoaderOverlay`                                                                                                                  | —                                             | Full-screen loading overlay                |
-| `MoreActions`                                                                                                                    | —                                             | Three-dot actions menu                     |
-| `NProgress`                                                                                                                      | `nprogress`                                   | Page navigation progress bar               |
-| `PageTitle`                                                                                                                      | —                                             | Page header with breadcrumbs               |
-| `Sidebar`, `SidebarHeader`, `SidebarContent`, `SidebarFooter`, `SidebarMenu`, `SidebarMenuItem`, `SidebarMenuButton`             | —                                             | App sidebar navigation                     |
-| `Stepper`                                                                                                                        | `@stepperize/react`                           | Multi-step wizard                          |
-| `TagInput`                                                                                                                       | —                                             | Tag/chip input                             |
-| `TaskQueue`, `TaskQueueProvider`, `TaskQueueDropdown`, `TaskPanelHeader`, `TaskSummaryDialog`                                    | —                                             | Background task queue with progress UI     |
-| `TimeRangePicker`                                                                                                                | `date-fns`, `date-fns-tz`                     | Time range selector with timezone support  |
-| `Toast`, `Toaster`, `useToast`                                                                                                   | `sonner`                                      | Toast notifications                        |
+| Component                                                                                                                        | Additional Dependencies                   | Description                                |
+| -------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------- | ------------------------------------------ |
+| `Autocomplete`                                                                                                                   | —                                         | Search autocomplete input                  |
+| `Autosearch`                                                                                                                     | —                                         | Search-first input with async results      |
+| `AvatarStack`                                                                                                                    | —                                         | Stacked avatar display                     |
+| `CalendarDatePicker`                                                                                                             | `react-day-picker`, `date-fns`            | Date/range picker with presets             |
+| `Combobox`                                                                                                                       | —                                         | Searchable single-select dropdown          |
+| `CodeEditor`, `CodeEditorTabs`                                                                                                   | `@monaco-editor/react`, `monaco-editor`   | Monaco-based code editor with VS Code UX   |
+| `DataTable`, `DataTableColumnHeader`, `DataTablePagination`, `DataTableToolbar`, `DataTableViewOptions`                          | `@tanstack/react-table`                   | Advanced data table with sorting/filtering |
+| `DateTimePicker`, `TimePicker`                                                                                                   | `date-fns`, `date-fns-tz`                 | Date/time picker with timezone support     |
+| `Dropdown`, `DropdownHeader`, `DropdownItem`, `DropdownSection`                                                                  | —                                         | Dropdown menu                              |
+| `Dropzone`                                                                                                                       | `react-dropzone`                          | File drag-and-drop upload area             |
+| `EmptyContent`                                                                                                                   | —                                         | Empty state placeholder                    |
+| `FileInputButton`                                                                                                                | —                                         | File upload button                         |
+| `Form`, `FormField`, `FormInput`, `FormTextarea`, `FormSelect`, `FormCheckbox`, `FormSwitch`, `FormRadioGroup`, `FormFieldArray` | See [Form Adapters](#form-adapters) below | Form system with pluggable adapter support |
+| `Grid`                                                                                                                           | `@tanstack/react-virtual`                 | Virtualized data grid                      |
+| `InputNumber`                                                                                                                    | `react-number-format`                     | Numeric input with formatting              |
+| `InputWithAddons`                                                                                                                | —                                         | Input with prefix/suffix addons            |
+| `LoaderOverlay`                                                                                                                  | —                                         | Full-screen loading overlay                |
+| `MoreActions`                                                                                                                    | —                                         | Three-dot actions menu                     |
+| `NProgress`                                                                                                                      | `nprogress`                               | Page navigation progress bar               |
+| `PageTitle`                                                                                                                      | —                                         | Page header with breadcrumbs               |
+| `Sidebar`, `SidebarHeader`, `SidebarContent`, `SidebarFooter`, `SidebarMenu`, `SidebarMenuItem`, `SidebarMenuButton`             | —                                         | App sidebar navigation                     |
+| `Stepper`                                                                                                                        | `@stepperize/react`                       | Multi-step wizard                          |
+| `TagInput`                                                                                                                       | —                                         | Tag/chip input                             |
+| `TaskQueue`, `TaskQueueProvider`, `TaskQueueDropdown`, `TaskPanelHeader`, `TaskSummaryDialog`                                    | —                                         | Background task queue with progress UI     |
+| `TimeRangePicker`                                                                                                                | `date-fns`, `date-fns-tz`                 | Time range selector with timezone support  |
+| `Transfer`                                                                                                                       | —                                         | Dual-panel item selector with search       |
+| `Toast`, `Toaster`, `useToast`                                                                                                   | `sonner`                                  | Toast notifications                        |
 
 ## Usage Examples
 
@@ -212,26 +216,45 @@ import { Title, Text, Paragraph, Code } from '@datum-cloud/datum-ui/typography'
 
 ### Form with Validation
 
+The form system uses a pluggable adapter pattern. Wrap your app with an adapter, then use `Form.*` components as usual:
+
 ```tsx
-import { Form, FormField, FormInput, FormSelect } from '@datum-cloud/datum-ui/form'
+import { Form } from '@datum-cloud/datum-ui/form'
+import { ConformAdapter } from '@datum-cloud/datum-ui/form/adapters/conform'
+// or: import { RHFAdapter } from '@datum-cloud/datum-ui/form/adapters/rhf'
 import { z } from 'zod'
 
 const schema = z.object({
-  name: z.string().min(1),
+  name: z.string().min(1, 'Name is required'),
   role: z.enum(['admin', 'user']),
 })
 
-<Form schema={schema} onSubmit={handleSubmit}>
-  <FormField name="name">
-    <FormInput label="Name" />
-  </FormField>
-  <FormField name="role">
-    <FormSelect label="Role" options={[
-      { label: 'Admin', value: 'admin' },
-      { label: 'User', value: 'user' },
-    ]} />
-  </FormField>
-</Form>
+// Wrap your app once with an adapter
+function App() {
+  return (
+    <ConformAdapter>
+      <MyForm />
+    </ConformAdapter>
+  )
+}
+
+// Form code is identical regardless of adapter
+function MyForm() {
+  return (
+    <Form.Root schema={schema} onSubmit={handleSubmit}>
+      <Form.Field name="name" label="Name" required>
+        <Form.Input />
+      </Form.Field>
+      <Form.Field name="role" label="Role" required>
+        <Form.Select placeholder="Select a role">
+          <Form.SelectItem value="admin">Admin</Form.SelectItem>
+          <Form.SelectItem value="user">User</Form.SelectItem>
+        </Form.Select>
+      </Form.Field>
+      <Form.Submit>Save</Form.Submit>
+    </Form.Root>
+  )
+}
 ```
 
 ### Map
@@ -364,9 +387,12 @@ Many components require additional packages. Install only what you use:
 > Replace `npm install` with `yarn add`, `pnpm add`, or `bun add` for your package manager.
 
 ```bash
-# Forms (Form, FormField, FormInput, etc.)
+# Forms — Conform adapter
 npm install @conform-to/react @conform-to/zod zod
 
+# Forms — React Hook Form adapter (alternative)
+npm install react-hook-form @hookform/resolvers zod
+
 # Maps (Map, MapMarker, MapPopup, etc.)
 npm install leaflet react-leaflet leaflet-draw leaflet.fullscreen leaflet.markercluster react-leaflet-markercluster
 
@@ -407,6 +433,19 @@ npm install nuqs
 npm install motion
 ```
 
+## Form Adapters
+
+The form system supports pluggable adapters. Choose one and wrap your app:
+
+| Adapter             | Import Path                                   | Dependencies                                                         |
+| ------------------- | --------------------------------------------- | -------------------------------------------------------------------- |
+| **Conform.js**      | `@datum-cloud/datum-ui/form/adapters/conform` | `@conform-to/react`, `@conform-to/zod`, `zod` (>=4)                  |
+| **React Hook Form** | `@datum-cloud/datum-ui/form/adapters/rhf`     | `react-hook-form` (>=7.55), `@hookform/resolvers` (>=5), `zod` (>=4) |
+
+The `Form.*` component API is identical with either adapter. Switch adapters by changing only the root provider -- no form code changes needed.
+
+See the [Form README](./src/components/features/form/README.md) for detailed documentation.
+
 ## Tech Stack
 
 - **React 19** with server component support

package/dist/adapter-context-rWveHhDd.mjs

@@ -0,0 +1,25 @@
+import * as React$1 from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/features/form/adapter-context.tsx
+const AdapterContext = React$1.createContext(null);
+/**
+* Read the current form adapter from context.
+* Throws with a helpful error if no adapter is found.
+*/
+function useAdapter() {
+	const adapter = React$1.use(AdapterContext);
+	if (!adapter) throw new Error("No form adapter found. Wrap your application with an adapter provider:\n\n  import { ConformAdapter } from '@datum-cloud/datum-ui/form/adapters/conform'\n  // or\n  import { RHFAdapter } from '@datum-cloud/datum-ui/form/adapters/rhf'\n\n  <ConformAdapter>\n    <App />\n  </ConformAdapter>");
+	return adapter;
+}
+/**
+* Internal provider used by adapter packages (ConformAdapter, RHFAdapter).
+* Consumers don't use this directly.
+*/
+function FormAdapterProvider({ adapter, children }) {
+	return /* @__PURE__ */ jsx(AdapterContext, {
+		value: adapter,
+		children
+	});
+}
+//#endregion
+export { useAdapter as n, FormAdapterProvider as t };

package/dist/autocomplete/index.mjs

@@ -1,2 +1,2 @@
-import { t as Autocomplete } from "../autocomplete-V5-qslzS.mjs";
+import { t as Autocomplete } from "../autocomplete-CkYJueBL.mjs";
 export { Autocomplete };

package/dist/{autocomplete-V5-qslzS.mjs → autocomplete-CkYJueBL.mjs}

@@ -159,7 +159,7 @@ function VirtualizedOptions({ options, selectedValue, onSelect, renderOption, it
 * />
 * ```
 */
-function Autocomplete({ options, value, onValueChange, onSearchChange, searchPlaceholder = "Search...", disableSearch = false, renderOption, renderValue, placeholder = "Select...", emptyContent = "No results found", footer, creatable = false, creatableLabel, virtualize = false, itemSize = 36, loading = false, disabled = false, name, id, className, triggerClassName, contentClassName, listClassName }) {
+function Autocomplete({ options, value, onValueChange, onSearchChange, searchPlaceholder = "Search...", disableSearch = false, renderOption, renderValue, placeholder = "Select...", emptyContent = "No results found", footer, creatable = false, creatableLabel, virtualize = false, itemSize = 36, loading = false, modal = false, disabled = false, name, id, className, triggerClassName, contentClassName, listClassName }) {
 	const [open, setOpen] = React$1.useState(false);
 	const [search, setSearch] = React$1.useState("");
 	const flatOptions = React$1.useMemo(() => flattenOptions(options), [options]);
@@ -212,7 +212,7 @@ function Autocomplete({ options, value, onValueChange, onSearchChange, searchPla
 		children: [/* @__PURE__ */ jsxs(Popover, {
 			open,
 			onOpenChange: handleOpenChange,
-			modal: true,
+			modal,
 			children: [/* @__PURE__ */ jsx(PopoverTrigger, {
 				asChild: true,
 				children: /* @__PURE__ */ jsx(Trigger, {

package/dist/autosearch/index.mjs

@@ -0,0 +1,199 @@
+import { t as cn } from "../cn-D2KYQ917.mjs";
+import { t as Button } from "../button-BllvE9Lm.mjs";
+import { i as CommandGroup, o as CommandItem, r as CommandEmpty, s as CommandList, t as Command } from "../command-DqHWukGK.mjs";
+import { t as Input } from "../input-FKGqZypx.mjs";
+import { i as PopoverTrigger, r as PopoverContent, t as Popover } from "../popover-FJAcbYoH.mjs";
+import { t as Tooltip } from "../tooltip-Cruvl5F6.mjs";
+import { AlertCircle, Check, Loader2, X } from "lucide-react";
+import * as React$1 from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/features/autosearch/autosearch.types.ts
+/**
+* Default function to extract searchable text from an option.
+* Combines label, description, and value for comprehensive searching.
+*/
+function defaultAutosearchValue(option) {
+	return [
+		option.label,
+		option.description,
+		option.value
+	].filter(Boolean).join(" ");
+}
+//#endregion
+//#region src/components/features/autosearch/autosearch.tsx
+/**
+* Autosearch - Search-first input with dropdown results
+*
+* A text input that opens a popover with search results as you type.
+* Different from Autocomplete which shows all options upfront.
+*
+* @example Basic usage
+* ```tsx
+* <Autosearch
+*   options={users}
+*   value={selectedUser}
+*   onValueChange={setSelectedUser}
+*   onSearch={handleSearch}
+*   placeholder="Search users..."
+* />
+* ```
+*
+* @example With loading state
+* ```tsx
+* <Autosearch
+*   options={searchResults}
+*   value={selected}
+*   onValueChange={setSelected}
+*   onSearch={debouncedSearch}
+*   loading={isSearching}
+*   placeholder="Type to search..."
+* />
+* ```
+*/
+function Autosearch({ options = [], value, onValueChange, onSearch, searchDebounceMs = 300, getValue = defaultAutosearchValue, placeholder = "Search for an option", emptyMessage = "No results found.", emptyContent, loading = false, modal = false, disabled = false, name, id, className, inputClassName, contentClassName, selectedClassName }) {
+	const [searchQuery, setSearchQuery] = React$1.useState("");
+	const [open, setOpen] = React$1.useState(false);
+	const [persistedOption, setPersistedOption] = React$1.useState(null);
+	const [searchExecuted, setSearchExecuted] = React$1.useState(false);
+	const searchDebounceRef = React$1.useRef(null);
+	const handleSearchChange = (inputValue) => {
+		setSearchQuery(inputValue);
+		const normalized = inputValue.trim();
+		if (searchDebounceRef.current) {
+			clearTimeout(searchDebounceRef.current);
+			searchDebounceRef.current = null;
+		}
+		if (!normalized) {
+			onSearch?.("");
+			setOpen(false);
+			setSearchExecuted(false);
+			return;
+		}
+		setOpen(true);
+		searchDebounceRef.current = setTimeout(() => {
+			setSearchExecuted(true);
+			onSearch?.(normalized);
+			searchDebounceRef.current = null;
+		}, searchDebounceMs);
+	};
+	React$1.useEffect(() => {
+		return () => {
+			if (searchDebounceRef.current) {
+				clearTimeout(searchDebounceRef.current);
+				searchDebounceRef.current = null;
+			}
+		};
+	}, []);
+	const handleSelect = React$1.useCallback((option) => {
+		setPersistedOption(option);
+		onValueChange?.(option.value);
+		setSearchQuery("");
+		onSearch?.("");
+		setOpen(false);
+		setSearchExecuted(false);
+	}, [onValueChange, onSearch]);
+	const handleClear = React$1.useCallback(() => {
+		setPersistedOption(null);
+		setSearchQuery("");
+		onSearch?.("");
+		setOpen(false);
+		setSearchExecuted(false);
+		onValueChange?.("");
+	}, [onValueChange, onSearch]);
+	React$1.useEffect(() => {
+		const normalized = searchQuery.trim();
+		if (value || !normalized) return;
+		if (options.length === 1 && !options[0].disabled) handleSelect(options[0]);
+	}, [
+		searchQuery,
+		options,
+		value,
+		handleSelect
+	]);
+	const normalizedQuery = searchQuery.trim();
+	const hasSearch = Boolean(normalizedQuery);
+	const showResults = hasSearch && !value && options.length > 1;
+	const selectedOption = options.find((opt) => opt.value === value) ?? persistedOption;
+	const selectedLabel = selectedOption?.label ?? "";
+	const selectedDescription = selectedOption?.description ?? "";
+	const showNoResults = hasSearch && !loading && options.length === 0 && searchExecuted;
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("relative", className),
+		children: [name && /* @__PURE__ */ jsx("input", {
+			type: "hidden",
+			name,
+			value: value ?? ""
+		}), value ? /* @__PURE__ */ jsxs("div", {
+			className: cn("bg-muted/10 border-border flex items-center justify-between gap-2 rounded-md border px-3 py-1 pr-1", selectedClassName),
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "text-sm font-medium",
+					children: selectedLabel
+				}), selectedDescription && /* @__PURE__ */ jsx("span", {
+					className: "text-muted-foreground text-xs",
+					children: selectedDescription
+				})]
+			}), /* @__PURE__ */ jsx(Button, {
+				size: "small",
+				type: "tertiary",
+				theme: "borderless",
+				onClick: handleClear,
+				disabled,
+				children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" })
+			})]
+		}) : /* @__PURE__ */ jsxs(Popover, {
+			open: open && showResults,
+			onOpenChange: setOpen,
+			modal,
+			children: [/* @__PURE__ */ jsx(PopoverTrigger, {
+				asChild: true,
+				children: /* @__PURE__ */ jsxs("div", {
+					className: "relative",
+					children: [
+						/* @__PURE__ */ jsx(Input, {
+							id,
+							placeholder,
+							value: searchQuery,
+							onChange: (e) => handleSearchChange(e.target.value),
+							disabled,
+							autoComplete: "off",
+							className: cn("w-full pr-10", inputClassName)
+						}),
+						loading && /* @__PURE__ */ jsx(Loader2, { className: "text-muted-foreground pointer-events-none absolute top-1/2 right-3 h-4 w-4 -translate-y-1/2 animate-spin" }),
+						showNoResults && /* @__PURE__ */ jsx(Tooltip, {
+							message: emptyMessage,
+							children: /* @__PURE__ */ jsx("span", {
+								className: "absolute top-1/2 right-3 h-4 w-4 -translate-y-1/2",
+								children: /* @__PURE__ */ jsx(AlertCircle, { className: "text-destructive h-4 w-4" })
+							})
+						})
+					]
+				})
+			}), /* @__PURE__ */ jsx(PopoverContent, {
+				className: cn("popover-content-width-full p-0", contentClassName),
+				side: "bottom",
+				align: "start",
+				onOpenAutoFocus: (event) => event.preventDefault(),
+				children: /* @__PURE__ */ jsx(Command, { children: /* @__PURE__ */ jsx(CommandList, { children: loading ? /* @__PURE__ */ jsx(CommandEmpty, { children: "Searching..." }) : options.length === 0 ? /* @__PURE__ */ jsx(CommandEmpty, { children: emptyContent ?? emptyMessage }) : /* @__PURE__ */ jsx(CommandGroup, { children: options.map((option) => /* @__PURE__ */ jsxs(CommandItem, {
+					value: getValue(option),
+					onSelect: () => handleSelect(option),
+					disabled: option.disabled,
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: "flex flex-col",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "font-medium",
+							children: option.label
+						}), option.description && /* @__PURE__ */ jsx("span", {
+							className: "text-muted-foreground text-xs",
+							children: option.description
+						})]
+					}), /* @__PURE__ */ jsx(Check, { className: cn("ml-auto h-4 w-4", value === option.value ? "opacity-100" : "opacity-0") })]
+				}, option.value)) }) }) })
+			})]
+		})]
+	});
+}
+Autosearch.displayName = "Autosearch";
+//#endregion
+export { Autosearch, defaultAutosearchValue };

package/dist/{calendar-date-picker-DWK94_DC.mjs → calendar-date-picker-CDT-8Ha8.mjs}

@@ -35,7 +35,7 @@ const multiSelectVariants = cva("flex font-normal shadow-none items-center justi
 	} },
 	defaultVariants: { variant: "default" }
 });
-function CalendarDatePicker({ ref, id = "calendar-date-picker", className, triggerClassName, date, closeOnSelect = false, numberOfMonths = 2, yearsRange = 10, onDateSelect, variant, placeholder, excludePresets, customPresets, minDate, maxDate, disableFuture = false, disablePast = false, maxRange, popoverClassName, disabled, ...props }) {
+function CalendarDatePicker({ ref, id = "calendar-date-picker", className, triggerClassName, date, closeOnSelect = false, numberOfMonths = 2, yearsRange = 10, onDateSelect, variant, placeholder, excludePresets, customPresets, minDate, maxDate, disableFuture = false, disablePast = false, maxRange, popoverClassName, disabled, modal = false, ...props }) {
 	const [isPopoverOpen, setIsPopoverOpen] = React$1.useState(false);
 	const [selectedRange, setSelectedRange] = React$1.useState(numberOfMonths === 2 ? "This Year" : "Today");
 	const [monthFrom, setMonthFrom] = React$1.useState(date?.from);
@@ -421,6 +421,7 @@ function CalendarDatePicker({ ref, id = "calendar-date-picker", className, trigg
           ` }), /* @__PURE__ */ jsxs(Popover, {
 		open: isPopoverOpen,
 		onOpenChange: setIsPopoverOpen,
+		modal,
 		children: [/* @__PURE__ */ jsx(PopoverTrigger, {
 			asChild: true,
 			children: /* @__PURE__ */ jsx(Button, {

package/dist/combobox/index.mjs

@@ -0,0 +1,2 @@
+import { t as Combobox } from "../combobox-B-C9lJeD.mjs";
+export { Combobox };

package/dist/combobox-B-C9lJeD.mjs

@@ -0,0 +1,97 @@
+import { t as cn } from "./cn-D2KYQ917.mjs";
+import { a as CommandInput, i as CommandGroup, o as CommandItem, r as CommandEmpty, s as CommandList, t as Command } from "./command-DqHWukGK.mjs";
+import { i as PopoverTrigger, r as PopoverContent, t as Popover } from "./popover-FJAcbYoH.mjs";
+import { CheckIcon, ChevronDown, X } from "lucide-react";
+import * as React$1 from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/features/combobox/combobox.tsx
+/**
+* Combobox - Single-select dropdown with search
+*
+* A simpler alternative to Autocomplete for basic select scenarios.
+* Supports grouped options and search filtering.
+*
+* @example
+* ```tsx
+* const options = [
+*   { value: '1', label: 'Option 1' },
+*   { value: '2', label: 'Option 2' },
+* ]
+*
+* <Combobox
+*   options={options}
+*   value={value}
+*   onChange={setValue}
+*   placeholder="Select an option"
+* />
+* ```
+*/
+function Combobox({ options, value, onChange, placeholder = "Select option...", searchPlaceholder = "Search...", emptyMessage = "No options found.", disabled = false, className, triggerClassName, contentClassName, searchable = true, showDropdownArrow = true, clearable = false, id, "data-testid": testId, modal = true }) {
+	const [open, setOpen] = React$1.useState(false);
+	const isGrouped = options.length > 0 && "options" in options[0];
+	const selectedOption = React$1.useMemo(() => {
+		if (isGrouped) return options.flatMap((group) => group.options);
+		return options;
+	}, [options, isGrouped]).find((opt) => opt.value === value);
+	const handleSelect = React$1.useCallback((selectedValue) => {
+		onChange?.(selectedValue === value ? void 0 : selectedValue);
+		setOpen(false);
+	}, [value, onChange]);
+	const handleClear = React$1.useCallback((e) => {
+		e.stopPropagation();
+		onChange?.(void 0);
+	}, [onChange]);
+	return /* @__PURE__ */ jsxs(Popover, {
+		open,
+		onOpenChange: setOpen,
+		modal,
+		children: [/* @__PURE__ */ jsx(PopoverTrigger, {
+			asChild: true,
+			children: /* @__PURE__ */ jsxs("button", {
+				type: "button",
+				role: "combobox",
+				"aria-expanded": open,
+				disabled,
+				id,
+				"data-testid": testId,
+				className: cn("flex h-10 w-full items-center justify-between rounded-lg border border-input bg-background px-3 py-2 text-sm", "ring-offset-background placeholder:text-muted-foreground", "focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2", "disabled:cursor-not-allowed disabled:opacity-50", triggerClassName, className),
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "truncate",
+					children: selectedOption ? selectedOption.label : placeholder
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "ml-2 flex shrink-0 items-center gap-1",
+					children: [clearable && selectedOption && !disabled && /* @__PURE__ */ jsx(X, {
+						className: "size-4 opacity-50 hover:opacity-100",
+						onClick: handleClear
+					}), showDropdownArrow && /* @__PURE__ */ jsx(ChevronDown, { className: "size-4 opacity-50" })]
+				})]
+			})
+		}), /* @__PURE__ */ jsx(PopoverContent, {
+			className: cn("popover-content-width-full p-0", contentClassName),
+			align: "start",
+			children: /* @__PURE__ */ jsxs(Command, { children: [searchable && /* @__PURE__ */ jsx(CommandInput, {
+				placeholder: searchPlaceholder,
+				className: "h-9"
+			}), /* @__PURE__ */ jsxs(CommandList, {
+				className: "max-h-[300px]",
+				children: [/* @__PURE__ */ jsx(CommandEmpty, { children: emptyMessage }), isGrouped ? options.map((group) => /* @__PURE__ */ jsx(CommandGroup, {
+					heading: group.label,
+					children: group.options.map((option) => /* @__PURE__ */ jsxs(CommandItem, {
+						value: option.value,
+						disabled: option.disabled,
+						onSelect: handleSelect,
+						children: [option.label, /* @__PURE__ */ jsx(CheckIcon, { className: cn("ml-auto size-4", value === option.value ? "opacity-100" : "opacity-0") })]
+					}, option.value))
+				}, group.label)) : /* @__PURE__ */ jsx(CommandGroup, { children: options.map((option) => /* @__PURE__ */ jsxs(CommandItem, {
+					value: option.value,
+					disabled: option.disabled,
+					onSelect: handleSelect,
+					children: [option.label, /* @__PURE__ */ jsx(CheckIcon, { className: cn("ml-auto size-4", value === option.value ? "opacity-100" : "opacity-0") })]
+				}, option.value)) })]
+			})] })
+		})]
+	});
+}
+Combobox.displayName = "Combobox";
+//#endregion
+export { Combobox as t };

package/dist/components/features/autocomplete/autocomplete.d.ts

@@ -27,7 +27,7 @@ import type { AutocompleteOption, AutocompleteProps } from './autocomplete.types
  * />
  * ```
  */
-export declare function Autocomplete<T extends AutocompleteOption = AutocompleteOption>({ options, value, onValueChange, onSearchChange, searchPlaceholder, disableSearch, renderOption, renderValue, placeholder, emptyContent, footer, creatable, creatableLabel, virtualize, itemSize, loading, disabled, name, id, className, triggerClassName, contentClassName, listClassName, }: AutocompleteProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function Autocomplete<T extends AutocompleteOption = AutocompleteOption>({ options, value, onValueChange, onSearchChange, searchPlaceholder, disableSearch, renderOption, renderValue, placeholder, emptyContent, footer, creatable, creatableLabel, virtualize, itemSize, loading, modal, disabled, name, id, className, triggerClassName, contentClassName, listClassName, }: AutocompleteProps<T>): import("react/jsx-runtime").JSX.Element;
 export declare namespace Autocomplete {
     var displayName: string;
 }

package/dist/components/features/autocomplete/autocomplete.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"autocomplete.d.ts","sourceRoot":"","sources":["../../../../src/components/features/autocomplete/autocomplete.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAEV,kBAAkB,EAClB,iBAAiB,EAClB,MAAM,sBAAsB,CAAA;AAkP7B;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,wBAAgB,YAAY,CAAC,CAAC,SAAS,kBAAkB,GAAG,kBAAkB,EAAE,EAC9E,OAAO,EACP,KAAK,EACL,aAAa,EACb,cAAc,EACd,iBAA+B,EAC/B,aAAqB,EACrB,YAAY,EACZ,WAAW,EACX,WAAyB,EACzB,YAAiC,EACjC,MAAM,EACN,SAAiB,EACjB,cAAc,EACd,UAAkB,EAClB,QAAa,EACb,OAAe,EACf,QAAgB,EAChB,IAAI,EACJ,EAAE,EACF,SAAS,EACT,gBAAgB,EAChB,gBAAgB,EAChB,aAAa,GACd,EAAE,iBAAiB,CAAC,CAAC,CAAC,2CA8JtB;yBAtLe,YAAY"}
+{"version":3,"file":"autocomplete.d.ts","sourceRoot":"","sources":["../../../../src/components/features/autocomplete/autocomplete.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAEV,kBAAkB,EAClB,iBAAiB,EAClB,MAAM,sBAAsB,CAAA;AAkP7B;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,wBAAgB,YAAY,CAAC,CAAC,SAAS,kBAAkB,GAAG,kBAAkB,EAAE,EAC9E,OAAO,EACP,KAAK,EACL,aAAa,EACb,cAAc,EACd,iBAA+B,EAC/B,aAAqB,EACrB,YAAY,EACZ,WAAW,EACX,WAAyB,EACzB,YAAiC,EACjC,MAAM,EACN,SAAiB,EACjB,cAAc,EACd,UAAkB,EAClB,QAAa,EACb,OAAe,EACf,KAAa,EACb,QAAgB,EAChB,IAAI,EACJ,EAAE,EACF,SAAS,EACT,gBAAgB,EAChB,gBAAgB,EAChB,aAAa,GACd,EAAE,iBAAiB,CAAC,CAAC,CAAC,2CA8JtB;yBAvLe,YAAY"}

package/dist/components/features/autocomplete/autocomplete.types.d.ts

@@ -48,6 +48,8 @@ export interface AutocompleteProps<T extends AutocompleteOption = AutocompleteOp
     itemSize?: number;
     /** External loading state */
     loading?: boolean;
+    /** Popover modal mode - required when using inside a Dialog/Modal component (default: true) */
+    modal?: boolean;
     /** Disable the component */
     disabled?: boolean;
     /** HTML name attribute for hidden input */

package/dist/components/features/autocomplete/autocomplete.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"autocomplete.types.d.ts","sourceRoot":"","sources":["../../../../src/components/features/autocomplete/autocomplete.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAA;AAMnC,MAAM,WAAW,kBAAkB;IACjC,2CAA2C;IAC3C,KAAK,EAAE,MAAM,CAAA;IACb,uDAAuD;IACvD,KAAK,EAAE,MAAM,CAAA;IACb,gDAAgD;IAChD,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,uCAAuC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,MAAM,WAAW,iBAAiB,CAAC,CAAC,SAAS,kBAAkB,GAAG,kBAAkB;IAClF,0BAA0B;IAC1B,KAAK,EAAE,MAAM,CAAA;IACb,gCAAgC;IAChC,OAAO,EAAE,CAAC,EAAE,CAAA;CACb;AAMD,MAAM,WAAW,iBAAiB,CAAC,CAAC,SAAS,kBAAkB,GAAG,kBAAkB;IAElF,4EAA4E;IAC5E,OAAO,EAAE,CAAC,EAAE,GAAG,iBAAiB,CAAC,CAAC,CAAC,EAAE,CAAA;IAGrC,sCAAsC;IACtC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,oCAAoC;IACpC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAGvC,4EAA4E;IAC5E,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACxC,uCAAuC;IACvC,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,qCAAqC;IACrC,aAAa,CAAC,EAAE,OAAO,CAAA;IAGvB,oDAAoD;IACpD,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,EAAE,UAAU,EAAE,OAAO,KAAK,KAAK,CAAC,SAAS,CAAA;IAClE,0DAA0D;IAC1D,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAA;IAC5C,8CAA8C;IAC9C,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,0CAA0C;IAC1C,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC9B,oEAAoE;IACpE,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAGxB,kDAAkD;IAClD,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,iFAAiF;IACjF,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAA;IACnD,6DAA6D;IAC7D,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,uEAAuE;IACvE,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,6BAA6B;IAC7B,OAAO,CAAC,EAAE,OAAO,CAAA;IAGjB,4BAA4B;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,2CAA2C;IAC3C,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,wBAAwB;IACxB,EAAE,CAAC,EAAE,MAAM,CAAA;IAGX,kDAAkD;IAClD,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,oDAAoD;IACpD,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,qDAAqD;IACrD,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,kDAAkD;IAClD,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB;AAMD;;;GAGG;AACH,MAAM,MAAM,qBAAqB,CAAC,CAAC,SAAS,kBAAkB,GAAG,kBAAkB,IAAI,IAAI,CACzF,iBAAiB,CAAC,CAAC,CAAC,EACpB,OAAO,GAAG,eAAe,GAAG,MAAM,GAAG,IAAI,CAC1C,CAAA"}
+{"version":3,"file":"autocomplete.types.d.ts","sourceRoot":"","sources":["../../../../src/components/features/autocomplete/autocomplete.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAA;AAMnC,MAAM,WAAW,kBAAkB;IACjC,2CAA2C;IAC3C,KAAK,EAAE,MAAM,CAAA;IACb,uDAAuD;IACvD,KAAK,EAAE,MAAM,CAAA;IACb,gDAAgD;IAChD,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,uCAAuC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,MAAM,WAAW,iBAAiB,CAAC,CAAC,SAAS,kBAAkB,GAAG,kBAAkB;IAClF,0BAA0B;IAC1B,KAAK,EAAE,MAAM,CAAA;IACb,gCAAgC;IAChC,OAAO,EAAE,CAAC,EAAE,CAAA;CACb;AAMD,MAAM,WAAW,iBAAiB,CAAC,CAAC,SAAS,kBAAkB,GAAG,kBAAkB;IAElF,4EAA4E;IAC5E,OAAO,EAAE,CAAC,EAAE,GAAG,iBAAiB,CAAC,CAAC,CAAC,EAAE,CAAA;IAGrC,sCAAsC;IACtC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,oCAAoC;IACpC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAGvC,4EAA4E;IAC5E,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACxC,uCAAuC;IACvC,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,qCAAqC;IACrC,aAAa,CAAC,EAAE,OAAO,CAAA;IAGvB,oDAAoD;IACpD,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,EAAE,UAAU,EAAE,OAAO,KAAK,KAAK,CAAC,SAAS,CAAA;IAClE,0DAA0D;IAC1D,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAA;IAC5C,8CAA8C;IAC9C,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,0CAA0C;IAC1C,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC9B,oEAAoE;IACpE,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAGxB,kDAAkD;IAClD,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,iFAAiF;IACjF,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAA;IACnD,6DAA6D;IAC7D,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,uEAAuE;IACvE,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,6BAA6B;IAC7B,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,+FAA+F;IAC/F,KAAK,CAAC,EAAE,OAAO,CAAA;IAGf,4BAA4B;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,2CAA2C;IAC3C,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,wBAAwB;IACxB,EAAE,CAAC,EAAE,MAAM,CAAA;IAGX,kDAAkD;IAClD,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,oDAAoD;IACpD,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,qDAAqD;IACrD,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,kDAAkD;IAClD,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB;AAMD;;;GAGG;AACH,MAAM,MAAM,qBAAqB,CAAC,CAAC,SAAS,kBAAkB,GAAG,kBAAkB,IAAI,IAAI,CACzF,iBAAiB,CAAC,CAAC,CAAC,EACpB,OAAO,GAAG,eAAe,GAAG,MAAM,GAAG,IAAI,CAC1C,CAAA"}

package/dist/components/features/autosearch/autosearch.d.ts

@@ -0,0 +1,35 @@
+import type { AutosearchProps } from './autosearch.types';
+/**
+ * Autosearch - Search-first input with dropdown results
+ *
+ * A text input that opens a popover with search results as you type.
+ * Different from Autocomplete which shows all options upfront.
+ *
+ * @example Basic usage
+ * ```tsx
+ * <Autosearch
+ *   options={users}
+ *   value={selectedUser}
+ *   onValueChange={setSelectedUser}
+ *   onSearch={handleSearch}
+ *   placeholder="Search users..."
+ * />
+ * ```
+ *
+ * @example With loading state
+ * ```tsx
+ * <Autosearch
+ *   options={searchResults}
+ *   value={selected}
+ *   onValueChange={setSelected}
+ *   onSearch={debouncedSearch}
+ *   loading={isSearching}
+ *   placeholder="Type to search..."
+ * />
+ * ```
+ */
+export declare function Autosearch({ options, value, onValueChange, onSearch, searchDebounceMs, getValue, placeholder, emptyMessage, emptyContent, loading, modal, disabled, name, id, className, inputClassName, contentClassName, selectedClassName, }: AutosearchProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace Autosearch {
+    var displayName: string;
+}
+//# sourceMappingURL=autosearch.d.ts.map

package/dist/components/features/autosearch/autosearch.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"autosearch.d.ts","sourceRoot":"","sources":["../../../../src/components/features/autosearch/autosearch.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAA;AAiBzD;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,wBAAgB,UAAU,CAAC,EAEzB,OAAY,EAGZ,KAAK,EACL,aAAa,EAGb,QAAQ,EACR,gBAAsB,EACtB,QAAiC,EAGjC,WAAoC,EACpC,YAAkC,EAClC,YAAY,EAGZ,OAAe,EACf,KAAa,EAGb,QAAgB,EAChB,IAAI,EACJ,EAAE,EAGF,SAAS,EACT,cAAc,EACd,gBAAgB,EAChB,iBAAiB,GAClB,EAAE,eAAe,2CA2MjB;yBA3Oe,UAAU"}