@datum-cloud/datum-ui 0.4.0 → 0.6.0-alpha.3e04d8c

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,30 +136,34 @@ 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             |
-| `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                  |
+| `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
 
@@ -211,26 +215,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
@@ -363,15 +386,21 @@ 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
 
 # Charts (ChartContainer, ChartTooltip, etc.)
 npm install recharts
 
+# Code editor (CodeEditor, CodeEditorTabs)
+npm install @monaco-editor/react monaco-editor
+
 # Date pickers (Calendar, CalendarDatePicker, TimeRangePicker)
 npm install react-day-picker date-fns date-fns-tz
 
@@ -403,6 +432,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/alert/index.mjs

@@ -1,3 +1,2 @@
-import { n as AlertDescription, r as AlertTitle, t as Alert } from "../alert-BC2Mccfo.mjs";
-
-export { Alert, AlertDescription, AlertTitle };
+import { n as AlertDescription, r as AlertTitle, t as Alert } from "../alert-BDj6od5I.mjs";
+export { Alert, AlertDescription, AlertTitle };

package/dist/{alert-BC2Mccfo.mjs → alert-BDj6od5I.mjs}

@@ -1,9 +1,8 @@
-import { t as cn } from "./cn-DWCc1QRE.mjs";
+import { t as cn } from "./cn-D2KYQ917.mjs";
 import { cva } from "class-variance-authority";
 import { CircleXIcon } from "lucide-react";
 import * as React$1 from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-
 //#region src/components/base/alert/alert.tsx
 /**
 * Datum Alert Component
@@ -90,6 +89,5 @@ function AlertDescription({ className, ...props }) {
 		...props
 	});
 }
-
 //#endregion
-export { AlertDescription as n, AlertTitle as r, Alert as t };
+export { AlertDescription as n, AlertTitle as r, Alert as t };

package/dist/app-navigation/index.mjs

@@ -1,12 +1,4 @@
-import "../utils-DJboNGQM.mjs";
-import "../separator-BzyALya2.mjs";
-import "../button-D6AORsOz.mjs";
-import "../collapsible-Dw71o2um.mjs";
-import "../input-DEMoi_8F.mjs";
-import "../sheet-DAcFjaGw.mjs";
-import { C as SidebarTrigger, S as SidebarSeparator, _ as SidebarMenuSub, a as SidebarGroupAction, b as SidebarProvider, c as SidebarHeader, d as SidebarMenu, f as SidebarMenuAction, g as SidebarMenuSkeleton, h as SidebarMenuItem, i as SidebarGroup, l as SidebarInput, m as SidebarMenuButton, n as SidebarContent, o as SidebarGroupContent, p as SidebarMenuBadge, r as SidebarFooter, s as SidebarGroupLabel, t as Sidebar, u as SidebarInset, v as SidebarMenuSubButton, w as useSidebar, x as SidebarRail, y as SidebarMenuSubItem } from "../sidebar-B3EV33mG.mjs";
-import "../skeleton-2vQ0vFQk.mjs";
-import "../tooltip-CuX2jQA9.mjs";
-import { n as NavMenu, t as AppNavigation } from "../app-navigation-DsCKgfPe.mjs";
-
-export { AppNavigation, NavMenu, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, useSidebar };
+import { C as SidebarTrigger, S as SidebarSeparator, _ as SidebarMenuSub, a as SidebarGroupAction, b as SidebarProvider, c as SidebarHeader, d as SidebarMenu, f as SidebarMenuAction, g as SidebarMenuSkeleton, h as SidebarMenuItem, i as SidebarGroup, l as SidebarInput, m as SidebarMenuButton, n as SidebarContent, o as SidebarGroupContent, p as SidebarMenuBadge, r as SidebarFooter, s as SidebarGroupLabel, t as Sidebar, u as SidebarInset, v as SidebarMenuSubButton, w as useSidebar, x as SidebarRail, y as SidebarMenuSubItem } from "../sidebar-BnhnjvfO.mjs";
+import "../sidebar/index.mjs";
+import { n as NavMenu, t as AppNavigation } from "../app-navigation-84ro28PU.mjs";
+export { AppNavigation, NavMenu, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, useSidebar };

package/dist/{app-navigation-DsCKgfPe.mjs → app-navigation-84ro28PU.mjs}

@@ -1,12 +1,11 @@
-import { t as cn } from "./cn-DWCc1QRE.mjs";
-import { t as Icon } from "./icon-wrapper-BBK4z4tj.mjs";
-import { n as CollapsibleContent, r as CollapsibleTrigger, t as Collapsible } from "./collapsible-Dw71o2um.mjs";
-import { C as SidebarTrigger, S as SidebarSeparator, _ as SidebarMenuSub, c as SidebarHeader, d as SidebarMenu, h as SidebarMenuItem, i as SidebarGroup, m as SidebarMenuButton, n as SidebarContent, o as SidebarGroupContent, r as SidebarFooter, s as SidebarGroupLabel, t as Sidebar, w as useSidebar } from "./sidebar-B3EV33mG.mjs";
+import { t as cn } from "./cn-D2KYQ917.mjs";
+import { t as Icon } from "./icon-wrapper-DuLp3RM1.mjs";
+import { n as CollapsibleContent, r as CollapsibleTrigger, t as Collapsible } from "./collapsible-CUphkSBt.mjs";
+import { C as SidebarTrigger, S as SidebarSeparator, _ as SidebarMenuSub, c as SidebarHeader, d as SidebarMenu, h as SidebarMenuItem, i as SidebarGroup, m as SidebarMenuButton, n as SidebarContent, o as SidebarGroupContent, r as SidebarFooter, s as SidebarGroupLabel, t as Sidebar, w as useSidebar } from "./sidebar-BnhnjvfO.mjs";
 import { ChevronRight, ExternalLinkIcon } from "lucide-react";
 import { Fragment, useCallback, useEffect, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { motion } from "motion/react";
-
 //#region src/components/features/app-navigation/nav-menu.tsx
 const NAV_STYLES = {
 	menuButton: "rounded-xl h-8 font-normal text-xs transition-all px-2 py-1 data-[active=true]:bg-sidebar data-[active=true]:text-foreground data-[active=true]:text-sidebar-primary data-[active=true]:[&>svg]:text-primary hover:bg-sidebar hover:text-sidebar-primary hover:[&>svg]:text-sidebar-primary hover:bg-sidebar-accent data-[active=true]:bg-sidebar-accent hover:font-semibold data-[active=true]:hover:[&>svg]:text-sidebar-primary transition-colors duration-300 gap-2.5 text-foreground [&>svg]:text-icon-primary",
@@ -378,7 +377,6 @@ function NavMenu({ ref, className, items, currentPath, linkComponent: LinkComp =
 	});
 }
 NavMenu.displayName = "NavMenu";
-
 //#endregion
 //#region src/components/features/app-navigation/app-navigation.tsx
 function AppNavigation({ navItems, title, closeOnNavigation, defaultOpen, currentPath, linkComponent, ...props }) {
@@ -411,6 +409,5 @@ function AppNavigation({ navItems, title, closeOnNavigation, defaultOpen, curren
 		})
 	});
 }
-
 //#endregion
-export { NavMenu as n, AppNavigation as t };
+export { NavMenu as n, AppNavigation as t };

package/dist/autocomplete/index.mjs

@@ -1,7 +1,2 @@
-import "../utils-DJboNGQM.mjs";
-import "../dialog-DdrHeboM.mjs";
-import "../command-DVroicgn.mjs";
-import "../popover-ugw5MpuT.mjs";
-import { t as Autocomplete } from "../autocomplete-DRB_kSVx.mjs";
-
-export { Autocomplete };
+import { t as Autocomplete } from "../autocomplete-CkYJueBL.mjs";
+export { Autocomplete };

package/dist/{autocomplete-DRB_kSVx.mjs → autocomplete-CkYJueBL.mjs}

@@ -1,12 +1,11 @@
-import { t as cn } from "./cn-DWCc1QRE.mjs";
-import { a as CommandInput, i as CommandGroup, o as CommandItem, r as CommandEmpty, s as CommandList, t as Command } from "./command-DVroicgn.mjs";
-import { i as PopoverTrigger, r as PopoverContent, t as Popover } from "./popover-ugw5MpuT.mjs";
-import { t as LoaderOverlay } from "./loader-overlay-8IWX_1Ga.mjs";
+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 { t as LoaderOverlay } from "./loader-overlay-BTFdkp7W.mjs";
 import { CheckIcon, ChevronDown } from "lucide-react";
 import * as React$1 from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { useVirtualizer } from "@tanstack/react-virtual";
-
 //#region src/components/features/autocomplete/autocomplete.tsx
 function isGroupedOptions(options) {
 	return options.length > 0 && "options" in options[0];
@@ -160,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]);
@@ -213,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, {
@@ -290,6 +289,5 @@ function Autocomplete({ options, value, onValueChange, onSearchChange, searchPla
 	});
 }
 Autocomplete.displayName = "Autocomplete";
-
 //#endregion
-export { Autocomplete as t };
+export { Autocomplete as t };

package/dist/autosearch/index.mjs

@@ -0,0 +1,195 @@
+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 { 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("div", {
+							className: "pointer-events-none absolute top-1/2 right-3 -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/avatar/index.mjs

@@ -1,4 +1,2 @@
-import "../utils-DJboNGQM.mjs";
-import { n as AvatarFallback, r as AvatarImage, t as Avatar } from "../avatar-DyLq0xkt.mjs";
-
-export { Avatar, AvatarFallback, AvatarImage };
+import { n as AvatarFallback, r as AvatarImage, t as Avatar } from "../avatar-BtKVcvO4.mjs";
+export { Avatar, AvatarFallback, AvatarImage };

package/dist/{avatar-DyLq0xkt.mjs → avatar-BtKVcvO4.mjs}

@@ -1,8 +1,7 @@
-import { t as cn } from "./utils-DJboNGQM.mjs";
+import { t as cn } from "./utils-C8KwMfT_.mjs";
 import "react";
 import { jsx } from "react/jsx-runtime";
 import * as AvatarPrimitive from "@radix-ui/react-avatar";
-
 //#region ../shadcn/ui/avatar.tsx
 const Avatar = ({ className, ...props }) => {
 	return /* @__PURE__ */ jsx(AvatarPrimitive.Root, {
@@ -25,6 +24,5 @@ const AvatarFallback = ({ className, ...props }) => {
 		...props
 	});
 };
-
 //#endregion
-export { AvatarFallback as n, AvatarImage as r, Avatar as t };
+export { AvatarFallback as n, AvatarImage as r, Avatar as t };

package/dist/avatar-stack/index.mjs

@@ -1,6 +1,2 @@
-import "../utils-DJboNGQM.mjs";
-import "../avatar-DyLq0xkt.mjs";
-import "../tooltip-CuX2jQA9.mjs";
-import { n as avatarStackVariants, t as AvatarStack } from "../avatar-stack-BT0dBswq.mjs";
-
-export { AvatarStack, avatarStackVariants };
+import { n as avatarStackVariants, t as AvatarStack } from "../avatar-stack-oVr8tsU7.mjs";
+export { AvatarStack, avatarStackVariants };

package/dist/{avatar-stack-BT0dBswq.mjs → avatar-stack-oVr8tsU7.mjs}

@@ -1,10 +1,9 @@
-import { t as cn } from "./cn-DWCc1QRE.mjs";
-import { n as AvatarFallback, r as AvatarImage, t as Avatar } from "./avatar-DyLq0xkt.mjs";
-import { t as Tooltip } from "./tooltip-CuX2jQA9.mjs";
+import { t as cn } from "./cn-D2KYQ917.mjs";
+import { n as AvatarFallback, r as AvatarImage, t as Avatar } from "./avatar-BtKVcvO4.mjs";
+import { t as Tooltip } from "./tooltip-Cruvl5F6.mjs";
 import { cva } from "class-variance-authority";
 import "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-
 //#region src/components/features/avatar-stack/avatar-stack.tsx
 const avatarStackVariants = cva("flex", {
 	variants: {
@@ -50,6 +49,5 @@ function AvatarStack({ className, orientation, avatars, spacing, maxAvatarsAmoun
 		}) : null]
 	});
 }
-
 //#endregion
-export { avatarStackVariants as n, AvatarStack as t };
+export { avatarStackVariants as n, AvatarStack as t };

package/dist/badge/index.mjs

@@ -1,3 +1,2 @@
-import { n as badgeVariants, t as Badge } from "../badge-BgFj4Nsc.mjs";
-
-export { Badge, badgeVariants };
+import { n as badgeVariants, t as Badge } from "../badge-DJR33ftJ.mjs";
+export { Badge, badgeVariants };

package/dist/{badge-BgFj4Nsc.mjs → badge-DJR33ftJ.mjs}

@@ -1,8 +1,7 @@
-import { t as cn } from "./cn-DWCc1QRE.mjs";
+import { t as cn } from "./cn-D2KYQ917.mjs";
 import { cva } from "class-variance-authority";
 import "react";
 import { jsx } from "react/jsx-runtime";
-
 //#region src/components/base/badge/badge.tsx
 /**
 * Datum Badge Component
@@ -180,6 +179,5 @@ function Badge({ className, type, theme, ...props }) {
 		...props
 	});
 }
-
 //#endregion
-export { badgeVariants as n, Badge as t };
+export { badgeVariants as n, Badge as t };

package/dist/breadcrumb/index.mjs

@@ -1,4 +1,2 @@
-import "../utils-DJboNGQM.mjs";
-import { a as BreadcrumbList, i as BreadcrumbLink, n as BreadcrumbEllipsis, o as BreadcrumbPage, r as BreadcrumbItem, s as BreadcrumbSeparator, t as Breadcrumb } from "../breadcrumb-CJNaYyk1.mjs";
-
-export { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator };
+import { a as BreadcrumbList, i as BreadcrumbLink, n as BreadcrumbEllipsis, o as BreadcrumbPage, r as BreadcrumbItem, s as BreadcrumbSeparator, t as Breadcrumb } from "../breadcrumb-B-9G347O.mjs";
+export { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator };