@datum-cloud/datum-ui 0.6.1 → 0.8.0

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-rSOfo1KV.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-rSOfo1KV.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";
@@ -223,58 +223,61 @@ function NavMenu({ ref, className, items, currentPath, linkComponent: LinkComp =
 						}));
 					},
 					className: "group/collapsible",
-					children: /* @__PURE__ */ jsxs(SidebarMenuItem, { children: [/* @__PURE__ */ jsx(CollapsibleTrigger, {
-						asChild: true,
-						className: "w-full",
-						children: /* @__PURE__ */ jsxs(NavSidebarMenuButton, {
-							item,
-							isActive,
-							disableTooltip,
-							className: itemClassName,
-							children: [/* @__PURE__ */ jsx("span", { children: item.title }), /* @__PURE__ */ jsx(Icon, {
-								icon: ChevronRight,
-								className: "ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90"
-							})]
-						})
-					}), /* @__PURE__ */ jsx(CollapsibleContent, {
-						className: "data-[state=open]:animate-collapsible-down data-[state=closed]:animate-collapsible-up overflow-hidden",
-						children: /* @__PURE__ */ jsx("div", {
-							style: {
-								minHeight: 0,
-								overflow: "hidden"
-							},
-							children: /* @__PURE__ */ jsx(motion.div, {
-								variants: {
-									hidden: { opacity: 0 },
-									visible: {
-										opacity: 1,
-										transition: {
-											staggerChildren: .05,
-											delayChildren: .1
-										}
-									}
+					children: /* @__PURE__ */ jsxs(SidebarMenuItem, {
+						className: "[&>*:first-child]:w-full",
+						children: [/* @__PURE__ */ jsx(CollapsibleTrigger, {
+							asChild: true,
+							className: "w-full",
+							children: /* @__PURE__ */ jsxs(NavSidebarMenuButton, {
+								item,
+								isActive,
+								disableTooltip,
+								className: itemClassName,
+								children: [/* @__PURE__ */ jsx("span", { children: item.title }), /* @__PURE__ */ jsx(Icon, {
+									icon: ChevronRight,
+									className: "ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90"
+								})]
+							})
+						}), /* @__PURE__ */ jsx(CollapsibleContent, {
+							className: "data-[state=open]:animate-collapsible-down data-[state=closed]:animate-collapsible-up overflow-hidden",
+							children: /* @__PURE__ */ jsx("div", {
+								style: {
+									minHeight: 0,
+									overflow: "hidden"
 								},
-								initial: isInitialMount.current || previousOpenItems.current[item.href] === openItems[item.href] && previousState.current === state && previousPathname.current === pathname && !hasActiveChild ? "visible" : "hidden",
-								animate: isOpen ? "visible" : "hidden",
-								children: /* @__PURE__ */ jsx(SidebarMenuSub, {
-									className: cn(level >= 1 ? "mr-0 pr-[.1rem]" : "", level === 2 ? "pl-4" : "", level === 3 ? "pl-6" : "", "mr-0 gap-0.5 pr-0"),
-									children: item.children?.map((subItem, index) => /* @__PURE__ */ jsx(motion.div, {
-										variants: {
-											hidden: { opacity: 0 },
-											visible: {
-												opacity: 1,
-												transition: {
-													duration: .2,
-													ease: "easeOut"
-												}
+								children: /* @__PURE__ */ jsx(motion.div, {
+									variants: {
+										hidden: { opacity: 0 },
+										visible: {
+											opacity: 1,
+											transition: {
+												staggerChildren: .05,
+												delayChildren: .1
 											}
-										},
-										children: renderNavItem(subItem, level + 1)
-									}, `${subItem.href}-${level}-${index}`))
-								})
-							}, `collapsible-${item.href}-${isOpen}`)
-						})
-					})] })
+										}
+									},
+									initial: isInitialMount.current || previousOpenItems.current[item.href] === openItems[item.href] && previousState.current === state && previousPathname.current === pathname && !hasActiveChild ? "visible" : "hidden",
+									animate: isOpen ? "visible" : "hidden",
+									children: /* @__PURE__ */ jsx(SidebarMenuSub, {
+										className: cn(level >= 1 ? "mr-0 pr-[.1rem]" : "", level === 2 ? "pl-4" : "", level === 3 ? "pl-6" : "", "mr-0 gap-0.5 pr-0"),
+										children: item.children?.map((subItem, index) => /* @__PURE__ */ jsx(motion.div, {
+											variants: {
+												hidden: { opacity: 0 },
+												visible: {
+													opacity: 1,
+													transition: {
+														duration: .2,
+														ease: "easeOut"
+													}
+												}
+											},
+											children: renderNavItem(subItem, level + 1)
+										}, `${subItem.href}-${level}-${index}`))
+									})
+								}, `collapsible-${item.href}-${isOpen}`)
+							})
+						})]
+					})
 				}, `collapsed-item-drop-down-item-${item.title}-${level}`)
 			}),
 			item.showSeparatorBelow && /* @__PURE__ */ jsx(SidebarSeparator, { className: "my-2" })
@@ -292,32 +295,35 @@ function NavMenu({ ref, className, items, currentPath, linkComponent: LinkComp =
 					}));
 				},
 				className: "group/collapsible",
-				children: /* @__PURE__ */ jsxs(SidebarMenuItem, { children: [/* @__PURE__ */ jsx(CollapsibleTrigger, {
-					asChild: true,
-					className: "w-full",
-					children: /* @__PURE__ */ jsxs(NavSidebarMenuButton, {
-						item: currentItem,
-						isActive: currentItemIsActive,
-						disableTooltip,
-						className: itemClassName,
-						children: [/* @__PURE__ */ jsx("span", { children: currentItem.title }), /* @__PURE__ */ jsx(Icon, {
-							icon: ChevronRight,
-							className: "ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90"
-						})]
-					})
-				}), /* @__PURE__ */ jsx(CollapsibleContent, {
-					className: "data-[state=open]:animate-collapsible-down data-[state=closed]:animate-collapsible-up overflow-hidden",
-					children: /* @__PURE__ */ jsx("div", {
-						style: {
-							minHeight: 0,
-							overflow: "hidden"
-						},
-						children: /* @__PURE__ */ jsx(SidebarMenuSub, {
-							className: cn(currentLevel >= 1 ? "mr-0 pr-[.1rem]" : "", "gap-0.5"),
-							children: currentItem.children?.map((subItem) => renderNavItem(subItem, currentLevel + 1))
+				children: /* @__PURE__ */ jsxs(SidebarMenuItem, {
+					className: "[&>*:first-child]:w-full",
+					children: [/* @__PURE__ */ jsx(CollapsibleTrigger, {
+						asChild: true,
+						className: "w-full",
+						children: /* @__PURE__ */ jsxs(NavSidebarMenuButton, {
+							item: currentItem,
+							isActive: currentItemIsActive,
+							disableTooltip,
+							className: itemClassName,
+							children: [/* @__PURE__ */ jsx("span", { children: currentItem.title }), /* @__PURE__ */ jsx(Icon, {
+								icon: ChevronRight,
+								className: "ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90"
+							})]
 						})
-					})
-				})] }, `collapsible-sidebar-${currentItem.title}-${currentLevel}`)
+					}), /* @__PURE__ */ jsx(CollapsibleContent, {
+						className: "data-[state=open]:animate-collapsible-down data-[state=closed]:animate-collapsible-up overflow-hidden",
+						children: /* @__PURE__ */ jsx("div", {
+							style: {
+								minHeight: 0,
+								overflow: "hidden"
+							},
+							children: /* @__PURE__ */ jsx(SidebarMenuSub, {
+								className: cn(currentLevel >= 1 ? "mr-0 pr-[.1rem]" : "", "gap-0.5"),
+								children: currentItem.children?.map((subItem) => renderNavItem(subItem, currentLevel + 1))
+							})
+						})
+					})]
+				}, `collapsible-sidebar-${currentItem.title}-${currentLevel}`)
 			}, `collapsed-item-drop-down-item-${currentItem.title}-${currentLevel}`);
 		};
 		if (level <= 2 && hasChildren) return /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -332,38 +338,41 @@ function NavMenu({ ref, className, items, currentPath, linkComponent: LinkComp =
 			item.showSeparatorAbove && /* @__PURE__ */ jsx(SidebarSeparator, { className: "my-2" }),
 			/* @__PURE__ */ jsx(SidebarMenu, {
 				className: cn(`level_${level} px-2`),
-				children: /* @__PURE__ */ jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsx(NavSidebarMenuButton, {
-					asChild: true,
-					item,
-					isActive: isActive && !hasActiveChild,
-					disableTooltip,
-					onClick: () => hasChildren && toggleItem(item.href),
-					className: cn(level >= 1 && "h-6", itemClassName),
-					children: item.type === "externalLink" ? /* @__PURE__ */ jsxs("a", {
-						href: item.href || "",
-						target: "_blank",
-						rel: "noopener noreferrer",
-						className: "flex items-center justify-between",
-						children: [/* @__PURE__ */ jsxs("div", {
-							className: "flex items-center gap-2",
+				children: /* @__PURE__ */ jsx(SidebarMenuItem, {
+					className: "[&>*:first-child]:w-full",
+					children: /* @__PURE__ */ jsx(NavSidebarMenuButton, {
+						asChild: true,
+						item,
+						isActive: isActive && !hasActiveChild,
+						disableTooltip,
+						onClick: () => hasChildren && toggleItem(item.href),
+						className: cn(level >= 1 && "h-6", itemClassName),
+						children: item.type === "externalLink" ? /* @__PURE__ */ jsxs("a", {
+							href: item.href || "",
+							target: "_blank",
+							rel: "noopener noreferrer",
+							className: "flex items-center justify-between",
+							children: [/* @__PURE__ */ jsxs("div", {
+								className: "flex items-center gap-2",
+								children: [item?.icon && /* @__PURE__ */ jsx(Icon, {
+									icon: item.icon,
+									className: "size-4 transition-all duration-300"
+								}), /* @__PURE__ */ jsx("span", { children: item.title })]
+							}), /* @__PURE__ */ jsx(Icon, {
+								icon: ExternalLinkIcon,
+								className: "ml-auto size-4"
+							})]
+						}) : /* @__PURE__ */ jsxs(LinkComp, {
+							...LinkComp === "a" ? { href: item.href || "" } : { to: item.href || "" },
+							onClick: handleNavigation,
+							onMouseEnter: () => item.onPrefetch?.(),
 							children: [item?.icon && /* @__PURE__ */ jsx(Icon, {
 								icon: item.icon,
-								className: "size-4 transition-all duration-300"
+								className: "text-sidebar-primary transition-all duration-300"
 							}), /* @__PURE__ */ jsx("span", { children: item.title })]
-						}), /* @__PURE__ */ jsx(Icon, {
-							icon: ExternalLinkIcon,
-							className: "ml-auto size-4"
-						})]
-					}) : /* @__PURE__ */ jsxs(LinkComp, {
-						...LinkComp === "a" ? { href: item.href || "" } : { to: item.href || "" },
-						onClick: handleNavigation,
-						onMouseEnter: () => item.onPrefetch?.(),
-						children: [item?.icon && /* @__PURE__ */ jsx(Icon, {
-							icon: item.icon,
-							className: "text-sidebar-primary transition-all duration-300"
-						}), /* @__PURE__ */ jsx("span", { children: item.title })]
+						})
 					})
-				}) })
+				})
 			}),
 			item.showSeparatorBelow && /* @__PURE__ */ jsx(SidebarSeparator, { className: "my-2" })
 		] }, itemKey);
@@ -379,7 +388,55 @@ 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, {
+					className: "[&>*:first-child]:w-full",
+					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, {
+					className: "[&>*:first-child]:w-full",
+					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, {
+					className: "[&>*:first-child]:w-full",
+					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 +451,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 };