@datum-cloud/datum-ui 0.6.0 → 0.7.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Datum Technology, Inc
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -462,3 +462,13 @@ See the [Form README](./src/components/features/form/README.md) for detailed doc
 ## License
 
 MIT
+
+## Optional: Canela font
+
+Datum-branded surfaces can opt into Canela Text for the `font-title` Tailwind utility:
+
+```ts
+import '@datum-cloud/datum-ui/styles/canela'
+```
+
+Consumers who do not import this file use the default system font stack declared in tokens — no visual degradation.

package/dist/action-row-DnhBhMtt.mjs

@@ -0,0 +1,22 @@
+import { t as cn } from "./cn-D2KYQ917.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/features/more-actions/action-row.tsx
+function ActionRow({ action, data, onSelect }) {
+	const isDisabled = typeof action.disabled === "function" ? action.disabled(data) : action.disabled ?? false;
+	const IconComponent = typeof action.icon === "function" ? action.icon : null;
+	const iconNode = IconComponent ? /* @__PURE__ */ jsx(IconComponent, { className: "size-4" }) : action.icon;
+	return /* @__PURE__ */ jsxs("button", {
+		type: "button",
+		onClick: (e) => {
+			e.preventDefault();
+			e.stopPropagation();
+			action.onClick(data);
+			onSelect();
+		},
+		disabled: isDisabled,
+		className: cn("hover:bg-accent hover:text-accent-foreground flex w-full cursor-pointer items-center gap-2 px-3 py-2 text-left text-xs disabled:pointer-events-none disabled:opacity-50", "[&_svg]:size-4 [&_svg]:shrink-0", action.variant === "destructive" && "text-destructive [&_svg]:!text-destructive hover:!text-destructive hover:[&_svg]:!text-destructive", action.className),
+		children: [iconNode, /* @__PURE__ */ jsx("span", { children: action.label })]
+	});
+}
+//#endregion
+export { ActionRow as t };

package/dist/app-navigation/index.mjs

@@ -1,4 +1,4 @@
-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 { 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-B8LQJiNI.mjs";
 import "../sidebar/index.mjs";
-import { n as NavMenu, t as AppNavigation } from "../app-navigation-84ro28PU.mjs";
+import { n as NavMenu, t as AppNavigation } from "../app-navigation-D0EBWUwJ.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-84ro28PU.mjs → app-navigation-D0EBWUwJ.mjs}

@@ -1,7 +1,7 @@
 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 { C as SidebarTrigger, S as SidebarSeparator, _ as SidebarMenuSub, c as SidebarHeader, d as SidebarMenu, g as SidebarMenuSkeleton, 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-B8LQJiNI.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";
@@ -379,7 +379,46 @@ 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 }) {
+/** Skeleton that mirrors the project nav layout: Home, separator, 6 items, separator, Project Settings */
+function NavSkeleton() {
+	return /* @__PURE__ */ jsxs("ul", {
+		className: "flex h-full w-full min-w-0 flex-col gap-0.5 py-2",
+		"data-sidebar": "menu",
+		children: [
+			/* @__PURE__ */ jsx(SidebarMenu, {
+				className: "px-2",
+				children: /* @__PURE__ */ jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsx(SidebarMenuSkeleton, {
+					showIcon: true,
+					className: "bg-sidebar-accent/60 h-8 rounded-xl **:data-[sidebar=menu-skeleton-text]:max-w-12"
+				}) })
+			}),
+			/* @__PURE__ */ jsx(SidebarSeparator, { className: "my-2" }),
+			[
+				1,
+				2,
+				3,
+				4,
+				5,
+				6
+			].map((i) => /* @__PURE__ */ jsx(SidebarMenu, {
+				className: "px-2",
+				children: /* @__PURE__ */ jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsx(SidebarMenuSkeleton, {
+					showIcon: true,
+					className: "h-8 rounded-xl"
+				}) })
+			}, i)),
+			/* @__PURE__ */ jsx(SidebarSeparator, { className: "my-2" }),
+			/* @__PURE__ */ jsx(SidebarMenu, {
+				className: "px-2",
+				children: /* @__PURE__ */ jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsx(SidebarMenuSkeleton, {
+					showIcon: true,
+					className: "h-8 rounded-xl [&_[data-sidebar=menu-skeleton-text]]:max-w-28"
+				}) })
+			})
+		]
+	});
+}
+function AppNavigation({ navItems, title, closeOnNavigation, defaultOpen, currentPath, linkComponent, loading = false, ...props }) {
 	const { setOpen } = useSidebar();
 	useEffect(() => {
 		if (defaultOpen === false) setOpen(false);
@@ -394,7 +433,13 @@ function AppNavigation({ navItems, title, closeOnNavigation, defaultOpen, curren
 					className: "px-4 pt-4 pb-0",
 					children: title
 				}),
-				navItems.length > 0 && /* @__PURE__ */ jsx(NavMenu, {
+				loading ? /* @__PURE__ */ jsx(SidebarGroup, {
+					className: "mb-2 p-0! px-0",
+					children: /* @__PURE__ */ jsx(SidebarGroupContent, {
+						className: "flex flex-col gap-0 py-0",
+						children: /* @__PURE__ */ jsx(NavSkeleton, {})
+					})
+				}) : navItems.length > 0 && /* @__PURE__ */ jsx(NavMenu, {
 					className: "h-fit py-2",
 					items: navItems,
 					currentPath,

package/dist/autocomplete/index.mjs

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

package/dist/autocomplete-DdbTQe6u.mjs

@@ -0,0 +1,141 @@
+import { t as cn } from "./cn-D2KYQ917.mjs";
+import { t as ResponsivePopover } from "./responsive-popover-D-t9bxSN.mjs";
+import { t as LoaderOverlay } from "./loader-overlay-C2WDla6V.mjs";
+import { n as OptionList, t as useOptionPicker } from "./use-option-picker-BXQOfyrK.mjs";
+import { ChevronDown } from "lucide-react";
+import * as React$1 from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/features/autocomplete/trigger.tsx
+function Trigger({ ref, selectedOption, renderValue, placeholder, loading, disabled, open, id, className, ...rest }) {
+	let displayContent;
+	if (!selectedOption) displayContent = /* @__PURE__ */ jsx("span", {
+		className: "text-muted-foreground",
+		children: placeholder
+	});
+	else if (renderValue) displayContent = renderValue(selectedOption);
+	else displayContent = /* @__PURE__ */ jsx("span", {
+		className: "truncate",
+		children: selectedOption.label
+	});
+	return /* @__PURE__ */ jsxs("button", {
+		ref,
+		type: "button",
+		id,
+		role: "combobox",
+		"aria-expanded": open,
+		disabled: disabled || loading,
+		className: cn("text-input-foreground placeholder:text-input-placeholder", "border-input-border bg-input-background/50 relative flex h-10 w-full items-center justify-between rounded-lg border px-3 py-2 text-left text-sm transition-all", "focus-visible:border-input-focus-border focus-visible:shadow-(--input-focus-shadow)", "focus-visible:ring-0 focus-visible:ring-offset-0 focus-visible:outline-hidden", "aria-invalid:border-destructive", (disabled || loading) && "cursor-not-allowed opacity-50", className),
+		...rest,
+		children: [
+			loading && /* @__PURE__ */ jsx(LoaderOverlay, {}),
+			/* @__PURE__ */ jsx("div", {
+				className: "min-w-0 flex-1",
+				children: displayContent
+			}),
+			/* @__PURE__ */ jsx(ChevronDown, { className: "text-muted-foreground ml-2 size-4 shrink-0" })
+		]
+	});
+}
+Trigger.displayName = "AutocompleteTrigger";
+//#endregion
+//#region src/components/features/autocomplete/autocomplete.tsx
+/**
+* Autocomplete - A searchable select component
+*
+* Standalone, form-agnostic combobox built on ResponsivePopover + OptionList engine.
+* Supports flat/grouped options, virtualization, custom rendering, and async search.
+*
+* @example Basic usage
+* ```tsx
+* <Autocomplete
+*   value={country}
+*   onValueChange={setCountry}
+*   options={countries}
+*   placeholder="Select country..."
+* />
+* ```
+*
+* @example Async search
+* ```tsx
+* <Autocomplete
+*   value={userId}
+*   onValueChange={setUserId}
+*   options={users ?? []}
+*   onSearchChange={setSearch}
+*   loading={isLoading}
+*   placeholder="Search users..."
+* />
+* ```
+*/
+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, responsive = true, sheetTitle, disabled = false, name, id, className, triggerClassName, contentClassName, listClassName }) {
+	const [open, setOpen] = React$1.useState(false);
+	const picker = useOptionPicker({
+		multiple: false,
+		options,
+		value,
+		onValueChange,
+		onSearchChange,
+		creatable,
+		creatableLabel,
+		closeOnSelect: true,
+		open,
+		onOpenChange: setOpen
+	});
+	const flatOptions = React$1.useMemo(() => {
+		if (Array.isArray(options) && options.length > 0 && "options" in options[0]) return options.flatMap((g) => g.options);
+		return options;
+	}, [options]);
+	const displayOption = React$1.useMemo(() => {
+		const found = flatOptions.find((o) => o.value === value);
+		if (found) return found;
+		if (creatable && value) return {
+			value,
+			label: value
+		};
+	}, [
+		flatOptions,
+		value,
+		creatable
+	]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("relative", className),
+		children: [/* @__PURE__ */ jsx(ResponsivePopover, {
+			open,
+			onOpenChange: setOpen,
+			modal,
+			responsive,
+			sheetTitle: sheetTitle ?? placeholder ?? "Search",
+			contentClassName: cn("popover-content-width-full", contentClassName),
+			align: "start",
+			trigger: /* @__PURE__ */ jsx(Trigger, {
+				selectedOption: displayOption,
+				renderValue,
+				placeholder,
+				loading,
+				disabled,
+				open,
+				id,
+				className: triggerClassName
+			}),
+			children: /* @__PURE__ */ jsx(OptionList, {
+				picker,
+				searchPlaceholder,
+				disableSearch,
+				emptyContent,
+				renderOption,
+				footer,
+				loading,
+				virtualize,
+				itemSize,
+				listClassName
+			})
+		}), name && /* @__PURE__ */ jsx("input", {
+			type: "hidden",
+			name,
+			value: value ?? ""
+		})]
+	});
+}
+Autocomplete.displayName = "Autocomplete";
+//#endregion
+export { Autocomplete as t };

package/dist/autosearch/index.mjs

@@ -1,25 +1,12 @@
 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 { t as ResponsivePopover } from "../responsive-popover-D-t9bxSN.mjs";
+import { t as Tooltip } from "../tooltip-a7NTDCWw.mjs";
+import { n as OptionList, t as useOptionPicker } from "../use-option-picker-BXQOfyrK.mjs";
+import { AlertCircle, 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
@@ -50,32 +37,28 @@ function defaultAutosearchValue(option) {
 * />
 * ```
 */
-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("");
+function Autosearch({ options = [], value, onValueChange, onSearch, searchDebounceMs = 300, placeholder = "Search for an option", emptyMessage = "No results found.", emptyContent, loading = false, modal = false, responsive = true, sheetTitle, disabled = false, name, id, className, inputClassName, contentClassName, selectedClassName }) {
 	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();
+	const onSearchChangeForEngine = React$1.useCallback((query) => {
+		const normalized = query.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);
-	};
+	}, [onSearch, searchDebounceMs]);
 	React$1.useEffect(() => {
 		return () => {
 			if (searchDebounceRef.current) {
@@ -84,39 +67,60 @@ function Autosearch({ options = [], value, onValueChange, onSearch, searchDeboun
 			}
 		};
 	}, []);
-	const handleSelect = React$1.useCallback((option) => {
-		setPersistedOption(option);
-		onValueChange?.(option.value);
-		setSearchQuery("");
-		onSearch?.("");
-		setOpen(false);
-		setSearchExecuted(false);
-	}, [onValueChange, onSearch]);
+	const picker = useOptionPicker({
+		multiple: false,
+		options,
+		value,
+		onValueChange: (selected) => {
+			setPersistedOption(options.find((o) => o.value === selected) ?? null);
+			onValueChange?.(selected);
+			picker.setSearch("");
+			onSearch?.("");
+			setSearchExecuted(false);
+		},
+		onSearchChange: onSearchChangeForEngine,
+		closeOnSelect: true,
+		open,
+		onOpenChange: setOpen
+	});
+	const hasSearch = Boolean(picker.search.trim());
+	const showResults = hasSearch && !value && options.length > 1;
+	const showNoResults = hasSearch && !loading && options.length === 0 && searchExecuted;
+	React$1.useEffect(() => {
+		if (hasSearch && !value) setOpen(true);
+		else if (!hasSearch) setOpen(false);
+	}, [hasSearch, value]);
+	React$1.useEffect(() => {
+		if (value || !hasSearch) return;
+		if (options.length === 1 && !options[0].disabled) {
+			const option = options[0];
+			setPersistedOption(option);
+			onValueChange?.(option.value);
+			picker.setSearch("");
+			onSearch?.("");
+			setSearchExecuted(false);
+			setOpen(false);
+		}
+	}, [
+		options,
+		value,
+		hasSearch
+	]);
 	const handleClear = React$1.useCallback(() => {
 		setPersistedOption(null);
-		setSearchQuery("");
+		picker.setSearch("");
 		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
+		onValueChange,
+		onSearch,
+		picker
 	]);
-	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", {
@@ -142,58 +146,62 @@ function Autosearch({ options = [], value, onValueChange, onSearch, searchDeboun
 				disabled,
 				children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" })
 			})]
-		}) : /* @__PURE__ */ jsxs(Popover, {
+		}) : /* @__PURE__ */ jsx(ResponsivePopover, {
 			open: open && showResults,
 			onOpenChange: setOpen,
+			responsive,
 			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" })
-							})
+			sheetTitle: sheetTitle ?? placeholder ?? "Search",
+			align: "start",
+			side: "bottom",
+			contentClassName: cn("popover-content-width-full", contentClassName),
+			onOpenAutoFocus: (event) => event.preventDefault(),
+			trigger: /* @__PURE__ */ jsxs("div", {
+				className: "relative",
+				children: [
+					/* @__PURE__ */ jsx(Input, {
+						id,
+						placeholder,
+						value: picker.search,
+						onChange: (e) => {
+							picker.setSearch(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)) }) }) })
-			})]
+					})
+				]
+			}),
+			children: /* @__PURE__ */ jsx(OptionList, {
+				picker,
+				disableSearch: true,
+				emptyContent: emptyContent ?? emptyMessage,
+				loading
+			})
 		})]
 	});
 }
 Autosearch.displayName = "Autosearch";
 //#endregion
+//#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
 export { Autosearch, defaultAutosearchValue };

package/dist/avatar-stack/index.mjs

@@ -1,2 +1,2 @@
-import { n as avatarStackVariants, t as AvatarStack } from "../avatar-stack-oVr8tsU7.mjs";
+import { n as avatarStackVariants, t as AvatarStack } from "../avatar-stack-CDhlA1Nm.mjs";
 export { AvatarStack, avatarStackVariants };

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

@@ -1,6 +1,6 @@
 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 { t as Tooltip } from "./tooltip-a7NTDCWw.mjs";
 import { cva } from "class-variance-authority";
 import "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";

package/dist/calendar/index.mjs

@@ -1,2 +1,2 @@
-import { n as CalendarDayButton, t as Calendar } from "../calendar-DEkCw7I1.mjs";
+import { n as CalendarDayButton, t as Calendar } from "../calendar-C-Hbf74r.mjs";
 export { Calendar, CalendarDayButton };

package/dist/{calendar-DEkCw7I1.mjs → calendar-C-Hbf74r.mjs}

@@ -69,9 +69,9 @@ function Calendar$1({ className, classNames, showOutsideDays = true, captionLayo
 			week_number_header: cn("select-none w-(--cell-size)", defaultClassNames.week_number_header),
 			week_number: cn("text-[0.8rem] select-none text-muted-foreground", defaultClassNames.week_number),
 			day: cn("relative w-full h-full p-0 text-center [&:first-child[data-selected=true]_button]:rounded-l-md [&:last-child[data-selected=true]_button]:rounded-r-md group/day aspect-square select-none", defaultClassNames.day),
-			range_start: cn("rounded-l-md bg-accent", defaultClassNames.range_start),
-			range_middle: cn("rounded-none", defaultClassNames.range_middle),
-			range_end: cn("rounded-r-md bg-accent", defaultClassNames.range_end),
+			range_start: cn("rounded-l-md bg-primary/10", defaultClassNames.range_start),
+			range_middle: cn("rounded-none bg-primary/10", defaultClassNames.range_middle),
+			range_end: cn("rounded-r-md bg-primary/10", defaultClassNames.range_end),
 			today: cn("bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none", defaultClassNames.today),
 			outside: cn("text-muted-foreground aria-selected:text-muted-foreground", defaultClassNames.outside),
 			disabled: cn("text-muted-foreground opacity-50", defaultClassNames.disabled),
@@ -103,7 +103,7 @@ function CalendarDayButton({ className, day, modifiers, ...props }) {
 		"data-range-start": modifiers.range_start,
 		"data-range-end": modifiers.range_end,
 		"data-range-middle": modifiers.range_middle,
-		className: cn("data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-accent-foreground flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md [&>span]:text-xs [&>span]:opacity-70", defaultClassNames.day, className),
+		className: cn("data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-transparent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-accent-foreground flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md [&>span]:text-xs [&>span]:opacity-70", defaultClassNames.day, className),
 		...props
 	});
 }