@datum-cloud/datum-ui 0.6.1 → 0.8.0

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
 	});
 }