@classytic/fluid 0.4.1 → 0.5.0

package/dist/search.mjs

@@ -2,183 +2,197 @@
 
 import { t as __exportAll } from "./chunk-DQk6qfdC.mjs";
 import { t as cn } from "./utils-DQ5SCVoW.mjs";
-import { t as useIsMobile } from "./use-mobile-BX3SQVo2.mjs";
-import { r as SheetWrapper } from "./sheet-wrapper-C13Y-Q6w.mjs";
-import { n as useSearch, t as SearchProvider } from "./search-context-DR7DBs7S.mjs";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { t as useIsMobile } from "./use-mobile-CnEmFiQx.mjs";
+import { r as SheetWrapper } from "./sheet-wrapper-B2uxookb.mjs";
+import { n as useSearch, t as SearchProvider } from "./search-context-1g3ZmOvx.mjs";
 import { useEffect, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { Filter, FilterX, RotateCcw, Search, X } from "lucide-react";
 import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
 import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput } from "@/components/ui/input-group";
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
-import { Badge } from "@/components/ui/badge";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 
-//#region src/components/search/search-root.tsx
+//#region src/components/search/search-actions.tsx
 /**
-* Root search component that provides context to all child components
+* Search action buttons
 *
 * @example
-* // Manual mode (default)
-* <Search.Root hook={useMySearch()}>
-*   <Search.Input />
-*   <Search.Actions />
-* </Search.Root>
+* // Combined clear (default)
+* <Search.Actions />
 *
 * @example
-* // Auto-search mode — no Search button needed
-* <Search.Root hook={useMySearch()} autoSearch>
-*   <Search.Input />
-*   <Search.ActiveFilters />
-* </Search.Root>
+* // Split clear — separate buttons for search text vs filters
+* <Search.Actions clearMode="split" />
 */
-function SearchRoot({ children, hook, className, autoSearch = false, autoSearchDelay = 300 }) {
-	const handleSearchRef = useRef(hook.handleSearch);
-	handleSearchRef.current = hook.handleSearch;
-	const timerRef = useRef(void 0);
-	const isInitialMount = useRef(true);
-	useEffect(() => {
-		if (!autoSearch) return;
-		if (isInitialMount.current) {
-			isInitialMount.current = false;
-			return;
-		}
-		if (timerRef.current) clearTimeout(timerRef.current);
-		timerRef.current = setTimeout(() => {
-			handleSearchRef.current();
-		}, autoSearchDelay);
-		return () => {
-			if (timerRef.current) clearTimeout(timerRef.current);
-		};
-	}, [
-		autoSearch,
-		autoSearchDelay,
-		hook.searchValue,
-		hook.searchType,
-		hook.filters
-	]);
-	return /* @__PURE__ */ jsx(SearchProvider, {
-		value: hook,
-		children: /* @__PURE__ */ jsx("div", {
-			className: cn("w-full", className),
-			children
-		})
+function SearchActions({ showSearchButton = true, showClearButton = true, searchButtonText, clearButtonText = "Clear", clearMode = "combined", disabled, className }) {
+	const { handleSearch, clearSearch, clearSearchValue, clearFilters, searchValue, hasActiveFilters, hasActiveSearch } = useSearch();
+	const isMobile = useIsMobile();
+	const canSearch = Boolean(searchValue?.trim() || hasActiveFilters);
+	const canClear = Boolean(searchValue?.trim() || hasActiveFilters || hasActiveSearch);
+	const canClearSearch = Boolean(searchValue?.trim() || hasActiveSearch);
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex items-center gap-2", className),
+		children: [
+			showClearButton && clearMode === "combined" && canClear && (isMobile ? /* @__PURE__ */ jsx(Button, {
+				variant: "outline",
+				size: "icon",
+				onClick: clearSearch,
+				"aria-label": clearButtonText,
+				title: clearButtonText,
+				className: "shrink-0",
+				children: /* @__PURE__ */ jsx(RotateCcw, {})
+			}) : /* @__PURE__ */ jsx(Button, {
+				variant: "outline",
+				size: "default",
+				onClick: clearSearch,
+				className: "h-10 shrink-0",
+				children: clearButtonText
+			})),
+			showClearButton && clearMode === "split" && /* @__PURE__ */ jsxs(Fragment$1, { children: [canClearSearch && /* @__PURE__ */ jsx(Button, {
+				variant: "outline",
+				size: isMobile ? "icon" : "default",
+				onClick: clearSearchValue,
+				"aria-label": "Clear search",
+				title: "Clear search",
+				className: cn("shrink-0", !isMobile && "h-10"),
+				children: isMobile ? /* @__PURE__ */ jsx(RotateCcw, {}) : "Clear search"
+			}), hasActiveFilters && /* @__PURE__ */ jsx(Button, {
+				variant: "outline",
+				size: isMobile ? "icon" : "default",
+				onClick: clearFilters,
+				"aria-label": "Clear filters",
+				title: "Clear filters",
+				className: cn("shrink-0", !isMobile && "h-10"),
+				children: isMobile ? /* @__PURE__ */ jsx(FilterX, {}) : "Clear filters"
+			})] }),
+			showSearchButton && /* @__PURE__ */ jsxs(Button, {
+				size: "default",
+				onClick: handleSearch,
+				disabled: disabled || !canSearch,
+				className: "h-10 shrink-0 px-3 sm:px-4",
+				children: [/* @__PURE__ */ jsx(Search, {
+					size: 16,
+					className: cn(searchButtonText ? "mr-2" : "sm:mr-2")
+				}), /* @__PURE__ */ jsx("span", {
+					className: "hidden sm:inline",
+					children: searchButtonText || "Search"
+				})]
+			})
+		]
 	});
 }
 
 //#endregion
-//#region src/components/search/search-input.tsx
+//#region src/components/search/search-active-filters.tsx
+function capitalize(s) {
+	return s.charAt(0).toUpperCase() + s.replace(/([A-Z])/g, " $1").slice(1);
+}
+function isFilterActive(value, defaultValue) {
+	if (value === defaultValue) return false;
+	if (Array.isArray(value)) return value.filter(Boolean).length > 0;
+	if (typeof value === "string") return value.trim().length > 0 && value !== "all";
+	if (typeof value === "boolean") return value;
+	return value != null;
+}
+function formatFilterValue(value, valueLabelMap) {
+	if (Array.isArray(value)) {
+		const mapped = value.map((v) => valueLabelMap?.[String(v)] ?? String(v));
+		return mapped.length <= 3 ? mapped.join(", ") : `${mapped.length} selected`;
+	}
+	if (typeof value === "boolean") return value ? "Yes" : "No";
+	const str = String(value);
+	return valueLabelMap?.[str] ?? str;
+}
 /**
-* Search input component using modern shadcn InputGroup pattern
+* Renders active filters as removable pills below the search bar.
 *
 * @example
-* <Search.Input placeholder="Search..." />
+* ```tsx
+* <Search.Root hook={searchHook}>
+*   <Search.Container>
+*     <Search.Input />
+*     <Search.Filters>{...}</Search.Filters>
+*     <Search.Actions />
+*   </Search.Container>
+*   <Search.ActiveFilters
+*     labels={{ status: "Status", role: "Role" }}
+*     valueLabels={{ status: { active: "Active", inactive: "Inactive" } }}
+*   />
+* </Search.Root>
+* ```
 */
-function SearchInput({ placeholder = "Search...", className, disabled, showIcon = true, showClearButton = false, onKeyDown, ...props }) {
-	const { searchValue, setSearchValue, handleSearch } = useSearch();
-	const handleKeyDown = (event) => {
-		onKeyDown?.(event);
-		if (!event.defaultPrevented && event.key === "Enter" && !disabled) handleSearch?.();
-	};
-	return /* @__PURE__ */ jsxs(InputGroup, {
-		className: cn("h-10 flex-1 shadow-sm", className),
-		"data-disabled": disabled || void 0,
-		children: [
-			showIcon && /* @__PURE__ */ jsx(InputGroupAddon, {
-				align: "inline-start",
-				children: /* @__PURE__ */ jsx(Search, { className: "size-4" })
-			}),
-			/* @__PURE__ */ jsx(InputGroupInput, {
-				...props,
-				type: "text",
-				placeholder,
-				value: searchValue || "",
-				onChange: (e) => setSearchValue?.(e.target.value),
-				onKeyDown: handleKeyDown,
-				disabled,
-				className: "text-base"
-			}),
-			showClearButton && searchValue && /* @__PURE__ */ jsx(InputGroupAddon, {
-				align: "inline-end",
-				children: /* @__PURE__ */ jsx(InputGroupButton, {
-					variant: "ghost",
-					size: "icon-sm",
-					onClick: () => setSearchValue?.(""),
-					disabled,
-					children: /* @__PURE__ */ jsx(X, { className: "size-4" })
+function SearchActiveFilters({ labels, valueLabels, formatValue: customFormat, showClearAll = true, className }) {
+	const { filters, filterFields, removeFilter, clearFilters, hasActiveFilters } = useSearch();
+	if (!hasActiveFilters) return null;
+	const activePills = [];
+	for (const [key, value] of Object.entries(filters)) {
+		const config = filterFields[key];
+		if (!config) continue;
+		if (!isFilterActive(value, config.defaultValue ?? (config.type === "array" ? [] : ""))) continue;
+		const label = labels?.[key] ?? config.label ?? capitalize(key);
+		let display;
+		if (customFormat) {
+			display = customFormat(key, value);
+			if (display === null) continue;
+		} else display = formatFilterValue(value, valueLabels?.[key]);
+		activePills.push({
+			key,
+			label,
+			display
+		});
+	}
+	if (activePills.length === 0) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex flex-wrap items-center gap-1.5", className),
+		children: [activePills.map(({ key, label, display }) => /* @__PURE__ */ jsxs(Badge, {
+			variant: "secondary",
+			className: "gap-1 pl-2 pr-1 py-0.5 text-xs font-normal",
+			children: [
+				/* @__PURE__ */ jsxs("span", {
+					className: "font-medium",
+					children: [label, ":"]
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: "max-w-[120px] truncate",
+					children: display
+				}),
+				/* @__PURE__ */ jsx("button", {
+					type: "button",
+					onClick: () => removeFilter(key),
+					className: "ml-0.5 rounded-sm p-0.5 hover:bg-muted-foreground/20",
+					"aria-label": `Remove ${label} filter`,
+					children: /* @__PURE__ */ jsx(X, { className: "h-3 w-3" })
 				})
-			})
-		]
+			]
+		}, key)), showClearAll && activePills.length > 1 && /* @__PURE__ */ jsx(Button, {
+			variant: "ghost",
+			size: "sm",
+			onClick: clearFilters,
+			className: "h-6 px-2 text-xs text-muted-foreground",
+			children: "Clear all"
+		})]
 	});
 }
 
 //#endregion
-//#region src/components/search/search-type-input.tsx
+//#region src/components/search/search-container.tsx
 /**
-* Search input component with type selector using InputGroup pattern
+* Container for search input and action buttons
+* Provides responsive layout
 *
 * @example
-* <Search.TypeInput
-*   placeholder="Search..."
-*   searchTypeOptions={[
-*     { value: "_id", label: "ID" },
-*     { value: "customerPhone", label: "Phone" },
-*     { value: "customerEmail", label: "Email" },
-*   ]}
-* />
+* <Search.Container>
+*   <Search.Input />
+*   <Search.Filters />
+*   <Search.Actions />
+* </Search.Container>
 */
-function SearchTypeInput({ placeholder = "Search...", className, disabled, showIcon = true, showClearButton = false, searchTypeOptions = [], onKeyDown, ...props }) {
-	const { searchValue, setSearchValue, searchType, setSearchType, handleSearch } = useSearch();
-	const handleKeyDown = (event) => {
-		onKeyDown?.(event);
-		if (!event.defaultPrevented && event.key === "Enter" && !disabled) handleSearch?.();
-	};
-	const selectedOption = searchTypeOptions.find((opt) => opt.value === searchType);
-	return /* @__PURE__ */ jsxs(InputGroup, {
-		className: cn("h-10 flex-1 shadow-sm", className),
-		"data-disabled": disabled || void 0,
-		children: [
-			showIcon && /* @__PURE__ */ jsx(InputGroupAddon, {
-				align: "inline-start",
-				children: /* @__PURE__ */ jsx(Search, { className: "size-4" })
-			}),
-			searchTypeOptions.length > 0 && /* @__PURE__ */ jsxs(InputGroupAddon, {
-				align: "inline-start",
-				className: "pr-0",
-				children: [/* @__PURE__ */ jsxs(Select, {
-					value: searchType,
-					onValueChange: setSearchType,
-					disabled,
-					children: [/* @__PURE__ */ jsx(SelectTrigger, {
-						className: "h-7 w-auto border-0 bg-transparent px-2 text-sm font-medium shadow-none focus:ring-0 focus-visible:ring-0 focus-visible:border-0",
-						children: /* @__PURE__ */ jsx(SelectValue, { children: selectedOption?.label || searchTypeOptions[0]?.label })
-					}), /* @__PURE__ */ jsx(SelectContent, { children: searchTypeOptions.map((option) => /* @__PURE__ */ jsx(SelectItem, {
-						value: option.value,
-						children: option.label
-					}, option.value)) })]
-				}), /* @__PURE__ */ jsx("div", { className: "h-6 w-px bg-border ml-1" })]
-			}),
-			/* @__PURE__ */ jsx(InputGroupInput, {
-				...props,
-				type: "text",
-				placeholder,
-				value: searchValue || "",
-				onChange: (e) => setSearchValue?.(e.target.value),
-				onKeyDown: handleKeyDown,
-				disabled,
-				className: "text-base"
-			}),
-			showClearButton && searchValue && /* @__PURE__ */ jsx(InputGroupAddon, {
-				align: "inline-end",
-				children: /* @__PURE__ */ jsx(InputGroupButton, {
-					variant: "ghost",
-					size: "icon-sm",
-					onClick: () => setSearchValue?.(""),
-					disabled,
-					children: /* @__PURE__ */ jsx(X, { className: "size-4" })
-				})
-			})
-		]
+function SearchContainer({ children, className }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("flex items-center gap-2 flex-1", className),
+		children
 	});
 }
 
@@ -264,7 +278,7 @@ function SearchFilters({ children, title = "Filters", description = "Refine your
 			})
 		]
 	});
-	if (isMobile) return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs(Button, {
+	if (isMobile) return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs(Button, {
 		variant: "outline",
 		size: "default",
 		className: cn("relative h-10 w-10 shrink-0 px-0", hasActiveFilters && "bg-primary/10 border-primary hover:bg-primary/15"),
@@ -298,185 +312,175 @@ function SearchFilters({ children, title = "Filters", description = "Refine your
 }
 
 //#endregion
-//#region src/components/search/search-actions.tsx
+//#region src/components/search/search-input.tsx
 /**
-* Search action buttons
-*
-* @example
-* // Combined clear (default)
-* <Search.Actions />
+* Search input component using modern shadcn InputGroup pattern
 *
 * @example
-* // Split clear — separate buttons for search text vs filters
-* <Search.Actions clearMode="split" />
+* <Search.Input placeholder="Search..." />
 */
-function SearchActions({ showSearchButton = true, showClearButton = true, searchButtonText, clearButtonText = "Clear", clearMode = "combined", disabled, className }) {
-	const { handleSearch, clearSearch, clearSearchValue, clearFilters, searchValue, hasActiveFilters, hasActiveSearch } = useSearch();
-	const isMobile = useIsMobile();
-	const canSearch = Boolean(searchValue?.trim() || hasActiveFilters);
-	const canClear = Boolean(searchValue?.trim() || hasActiveFilters || hasActiveSearch);
-	const canClearSearch = Boolean(searchValue?.trim() || hasActiveSearch);
-	return /* @__PURE__ */ jsxs("div", {
-		className: cn("flex items-center gap-2", className),
+function SearchInput({ placeholder = "Search...", className, inputClassName, disabled, showIcon = true, showClearButton = false, onKeyDown, ...props }) {
+	const { searchValue, setSearchValue, handleSearch } = useSearch();
+	const handleKeyDown = (event) => {
+		onKeyDown?.(event);
+		if (!event.defaultPrevented && event.key === "Enter" && !disabled) handleSearch?.();
+	};
+	return /* @__PURE__ */ jsxs(InputGroup, {
+		className: cn("h-10 flex-1 shadow-sm", className),
+		"data-disabled": disabled || void 0,
 		children: [
-			showClearButton && clearMode === "combined" && canClear && (isMobile ? /* @__PURE__ */ jsx(Button, {
-				variant: "outline",
-				size: "icon",
-				onClick: clearSearch,
-				"aria-label": clearButtonText,
-				title: clearButtonText,
-				className: "shrink-0",
-				children: /* @__PURE__ */ jsx(RotateCcw, {})
-			}) : /* @__PURE__ */ jsx(Button, {
-				variant: "outline",
-				size: "default",
-				onClick: clearSearch,
-				className: "h-10 shrink-0",
-				children: clearButtonText
-			})),
-			showClearButton && clearMode === "split" && /* @__PURE__ */ jsxs(Fragment, { children: [canClearSearch && /* @__PURE__ */ jsx(Button, {
-				variant: "outline",
-				size: isMobile ? "icon" : "default",
-				onClick: clearSearchValue,
-				"aria-label": "Clear search",
-				title: "Clear search",
-				className: cn("shrink-0", !isMobile && "h-10"),
-				children: isMobile ? /* @__PURE__ */ jsx(RotateCcw, {}) : "Clear search"
-			}), hasActiveFilters && /* @__PURE__ */ jsx(Button, {
-				variant: "outline",
-				size: isMobile ? "icon" : "default",
-				onClick: clearFilters,
-				"aria-label": "Clear filters",
-				title: "Clear filters",
-				className: cn("shrink-0", !isMobile && "h-10"),
-				children: isMobile ? /* @__PURE__ */ jsx(FilterX, {}) : "Clear filters"
-			})] }),
-			showSearchButton && /* @__PURE__ */ jsxs(Button, {
-				size: "default",
-				onClick: handleSearch,
-				disabled: disabled || !canSearch,
-				className: "h-10 shrink-0 px-3 sm:px-4",
-				children: [/* @__PURE__ */ jsx(Search, {
-					size: 16,
-					className: cn(searchButtonText ? "mr-2" : "sm:mr-2")
-				}), /* @__PURE__ */ jsx("span", {
-					className: "hidden sm:inline",
-					children: searchButtonText || "Search"
-				})]
+			showIcon && /* @__PURE__ */ jsx(InputGroupAddon, {
+				align: "inline-start",
+				children: /* @__PURE__ */ jsx(Search, { className: "size-4" })
+			}),
+			/* @__PURE__ */ jsx(InputGroupInput, {
+				...props,
+				type: "text",
+				placeholder,
+				value: searchValue || "",
+				onChange: (e) => setSearchValue?.(e.target.value),
+				onKeyDown: handleKeyDown,
+				disabled,
+				className: cn("text-base", inputClassName)
+			}),
+			showClearButton && searchValue && /* @__PURE__ */ jsx(InputGroupAddon, {
+				align: "inline-end",
+				children: /* @__PURE__ */ jsx(InputGroupButton, {
+					variant: "ghost",
+					size: "icon-sm",
+					onClick: () => setSearchValue?.(""),
+					disabled,
+					children: /* @__PURE__ */ jsx(X, { className: "size-4" })
+				})
 			})
 		]
 	});
 }
 
 //#endregion
-//#region src/components/search/search-container.tsx
+//#region src/components/search/search-root.tsx
 /**
-* Container for search input and action buttons
-* Provides responsive layout
+* Root search component that provides context to all child components
 *
 * @example
-* <Search.Container>
+* // Manual mode (default)
+* <Search.Root hook={useMySearch()}>
 *   <Search.Input />
-*   <Search.Filters />
 *   <Search.Actions />
-* </Search.Container>
+* </Search.Root>
+*
+* @example
+* // Auto-search mode — no Search button needed
+* <Search.Root hook={useMySearch()} autoSearch>
+*   <Search.Input />
+*   <Search.ActiveFilters />
+* </Search.Root>
 */
-function SearchContainer({ children, className }) {
-	return /* @__PURE__ */ jsx("div", {
-		className: cn("flex items-center gap-2 flex-1", className),
-		children
+function SearchRoot({ children, hook, className, autoSearch = false, autoSearchDelay = 300 }) {
+	const handleSearchRef = useRef(hook.handleSearch);
+	handleSearchRef.current = hook.handleSearch;
+	const timerRef = useRef(void 0);
+	const isInitialMount = useRef(true);
+	useEffect(() => {
+		if (!autoSearch) return () => {
+			if (timerRef.current) clearTimeout(timerRef.current);
+		};
+		if (isInitialMount.current) {
+			isInitialMount.current = false;
+			return () => {
+				if (timerRef.current) clearTimeout(timerRef.current);
+			};
+		}
+		if (timerRef.current) clearTimeout(timerRef.current);
+		timerRef.current = setTimeout(() => {
+			handleSearchRef.current();
+		}, autoSearchDelay);
+		return () => {
+			if (timerRef.current) clearTimeout(timerRef.current);
+		};
+	}, [
+		autoSearch,
+		autoSearchDelay,
+		hook.searchValue,
+		hook.searchType,
+		hook.filters
+	]);
+	return /* @__PURE__ */ jsx(SearchProvider, {
+		value: hook,
+		children: /* @__PURE__ */ jsx("div", {
+			className: cn("w-full", className),
+			children
+		})
 	});
 }
 
 //#endregion
-//#region src/components/search/search-active-filters.tsx
-function capitalize(s) {
-	return s.charAt(0).toUpperCase() + s.replace(/([A-Z])/g, " $1").slice(1);
-}
-function isFilterActive(value, defaultValue) {
-	if (value === defaultValue) return false;
-	if (Array.isArray(value)) return value.filter(Boolean).length > 0;
-	if (typeof value === "string") return value.trim().length > 0 && value !== "all";
-	if (typeof value === "boolean") return value;
-	return value != null;
-}
-function formatFilterValue(value, valueLabelMap) {
-	if (Array.isArray(value)) {
-		const mapped = value.map((v) => valueLabelMap?.[String(v)] ?? String(v));
-		return mapped.length <= 3 ? mapped.join(", ") : `${mapped.length} selected`;
-	}
-	if (typeof value === "boolean") return value ? "Yes" : "No";
-	const str = String(value);
-	return valueLabelMap?.[str] ?? str;
-}
+//#region src/components/search/search-type-input.tsx
 /**
-* Renders active filters as removable pills below the search bar.
+* Search input component with type selector using InputGroup pattern
 *
 * @example
-* ```tsx
-* <Search.Root hook={searchHook}>
-*   <Search.Container>
-*     <Search.Input />
-*     <Search.Filters>{...}</Search.Filters>
-*     <Search.Actions />
-*   </Search.Container>
-*   <Search.ActiveFilters
-*     labels={{ status: "Status", role: "Role" }}
-*     valueLabels={{ status: { active: "Active", inactive: "Inactive" } }}
-*   />
-* </Search.Root>
-* ```
+* <Search.TypeInput
+*   placeholder="Search..."
+*   searchTypeOptions={[
+*     { value: "_id", label: "ID" },
+*     { value: "customerPhone", label: "Phone" },
+*     { value: "customerEmail", label: "Email" },
+*   ]}
+* />
 */
-function SearchActiveFilters({ labels, valueLabels, formatValue: customFormat, showClearAll = true, className }) {
-	const { filters, filterFields, removeFilter, clearFilters, hasActiveFilters } = useSearch();
-	if (!hasActiveFilters) return null;
-	const activePills = [];
-	for (const [key, value] of Object.entries(filters)) {
-		const config = filterFields[key];
-		if (!config) continue;
-		if (!isFilterActive(value, config.defaultValue ?? (config.type === "array" ? [] : ""))) continue;
-		const label = labels?.[key] ?? config.label ?? capitalize(key);
-		let display;
-		if (customFormat) {
-			display = customFormat(key, value);
-			if (display === null) continue;
-		} else display = formatFilterValue(value, valueLabels?.[key]);
-		activePills.push({
-			key,
-			label,
-			display
-		});
-	}
-	if (activePills.length === 0) return null;
-	return /* @__PURE__ */ jsxs("div", {
-		className: cn("flex flex-wrap items-center gap-1.5", className),
-		children: [activePills.map(({ key, label, display }) => /* @__PURE__ */ jsxs(Badge, {
-			variant: "secondary",
-			className: "gap-1 pl-2 pr-1 py-0.5 text-xs font-normal",
-			children: [
-				/* @__PURE__ */ jsxs("span", {
-					className: "font-medium",
-					children: [label, ":"]
-				}),
-				/* @__PURE__ */ jsx("span", {
-					className: "max-w-[120px] truncate",
-					children: display
-				}),
-				/* @__PURE__ */ jsx("button", {
-					type: "button",
-					onClick: () => removeFilter(key),
-					className: "ml-0.5 rounded-sm p-0.5 hover:bg-muted-foreground/20",
-					"aria-label": `Remove ${label} filter`,
-					children: /* @__PURE__ */ jsx(X, { className: "h-3 w-3" })
+function SearchTypeInput({ placeholder = "Search...", className, inputClassName, disabled, showIcon = true, showClearButton = false, searchTypeOptions = [], onKeyDown, ...props }) {
+	const { searchValue, setSearchValue, searchType, setSearchType, handleSearch } = useSearch();
+	const handleKeyDown = (event) => {
+		onKeyDown?.(event);
+		if (!event.defaultPrevented && event.key === "Enter" && !disabled) handleSearch?.();
+	};
+	const selectedOption = searchTypeOptions.find((opt) => opt.value === searchType);
+	return /* @__PURE__ */ jsxs(InputGroup, {
+		className: cn("h-10 flex-1 shadow-sm", className),
+		"data-disabled": disabled || void 0,
+		children: [
+			showIcon && /* @__PURE__ */ jsx(InputGroupAddon, {
+				align: "inline-start",
+				children: /* @__PURE__ */ jsx(Search, { className: "size-4" })
+			}),
+			searchTypeOptions.length > 0 && /* @__PURE__ */ jsxs(InputGroupAddon, {
+				align: "inline-start",
+				className: "pr-0",
+				children: [/* @__PURE__ */ jsxs(Select, {
+					value: searchType,
+					onValueChange: setSearchType,
+					disabled,
+					children: [/* @__PURE__ */ jsx(SelectTrigger, {
+						className: "h-7 w-auto border-0 bg-transparent px-2 text-sm font-medium shadow-none focus:ring-0 focus-visible:ring-0 focus-visible:border-0 dark:bg-transparent dark:hover:bg-transparent",
+						children: /* @__PURE__ */ jsx(SelectValue, { children: selectedOption?.label || searchTypeOptions[0]?.label })
+					}), /* @__PURE__ */ jsx(SelectContent, { children: searchTypeOptions.map((option) => /* @__PURE__ */ jsx(SelectItem, {
+						value: option.value,
+						children: option.label
+					}, option.value)) })]
+				}), /* @__PURE__ */ jsx("div", { className: "h-6 w-px bg-border ml-1" })]
+			}),
+			/* @__PURE__ */ jsx(InputGroupInput, {
+				...props,
+				type: "text",
+				placeholder,
+				value: searchValue || "",
+				onChange: (e) => setSearchValue?.(e.target.value),
+				onKeyDown: handleKeyDown,
+				disabled,
+				className: cn("text-base", inputClassName)
+			}),
+			showClearButton && searchValue && /* @__PURE__ */ jsx(InputGroupAddon, {
+				align: "inline-end",
+				children: /* @__PURE__ */ jsx(InputGroupButton, {
+					variant: "ghost",
+					size: "icon-sm",
+					onClick: () => setSearchValue?.(""),
+					disabled,
+					children: /* @__PURE__ */ jsx(X, { className: "size-4" })
 				})
-			]
-		}, key)), showClearAll && activePills.length > 1 && /* @__PURE__ */ jsx(Button, {
-			variant: "ghost",
-			size: "sm",
-			onClick: clearFilters,
-			className: "h-6 px-2 text-xs text-muted-foreground",
-			children: "Clear all"
-		})]
+			})
+		]
 	});
 }