@classytic/fluid 0.2.4 → 0.3.3

package/dist/search.mjs

@@ -0,0 +1,523 @@
+"use client";
+
+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 { useEffect, useRef, useState } from "react";
+import { Filter, FilterX, RotateCcw, Search, X } from "lucide-react";
+import { Button } from "@/components/ui/button";
+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
+/**
+* Root search component that provides context to all child components
+*
+* @example
+* // Manual mode (default)
+* <Search.Root hook={useMySearch()}>
+*   <Search.Input />
+*   <Search.Actions />
+* </Search.Root>
+*
+* @example
+* // Auto-search mode — no Search button needed
+* <Search.Root hook={useMySearch()} autoSearch>
+*   <Search.Input />
+*   <Search.ActiveFilters />
+* </Search.Root>
+*/
+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
+		})
+	});
+}
+
+//#endregion
+//#region src/components/search/search-input.tsx
+/**
+* Search input component using modern shadcn InputGroup pattern
+*
+* @example
+* <Search.Input placeholder="Search..." />
+*/
+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" })
+				})
+			})
+		]
+	});
+}
+
+//#endregion
+//#region src/components/search/search-type-input.tsx
+/**
+* Search input component with type selector using InputGroup pattern
+*
+* @example
+* <Search.TypeInput
+*   placeholder="Search..."
+*   searchTypeOptions={[
+*     { value: "_id", label: "ID" },
+*     { value: "customerPhone", label: "Phone" },
+*     { value: "customerEmail", label: "Email" },
+*   ]}
+* />
+*/
+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" })
+				})
+			})
+		]
+	});
+}
+
+//#endregion
+//#region src/components/search/search-filter-actions.tsx
+/**
+* Filter actions component (Reset/Apply buttons)
+* Used inside filter popovers/sheets
+*/
+function SearchFilterActions({ onClose, disabled }) {
+	const { handleSearch, clearFilters, hasActiveFilters } = useSearch();
+	const handleApply = () => {
+		handleSearch?.();
+		onClose?.();
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex gap-2 border-t bg-muted/30 p-4 pt-3 -mx-4 -mb-4",
+		children: [/* @__PURE__ */ jsx(Button, {
+			variant: "outline",
+			size: "sm",
+			onClick: clearFilters,
+			className: "flex-1",
+			disabled: disabled || !hasActiveFilters,
+			children: "Reset"
+		}), /* @__PURE__ */ jsxs(Button, {
+			size: "sm",
+			onClick: handleApply,
+			className: "flex-1",
+			disabled,
+			children: [/* @__PURE__ */ jsx(Search, {
+				size: 16,
+				className: "mr-2"
+			}), "Apply"]
+		})]
+	});
+}
+
+//#endregion
+//#region src/components/search/search-filters.tsx
+/**
+* Search filters component with mobile sheet support
+*
+* @example
+* <Search.Filters>
+*   <TagChoiceInput label="Category" ... />
+*   <SelectInput label="Status" ... />
+* </Search.Filters>
+*/
+function SearchFilters({ children, title = "Filters", description = "Refine your search results", disabled, className }) {
+	const { hasActiveFilters, filters = {} } = useSearch();
+	const isMobile = useIsMobile();
+	const [isOpen, setIsOpen] = useState(false);
+	const activeFilterCount = Object.values(filters).filter((value) => {
+		if (Array.isArray(value)) return value.filter(Boolean).length > 0;
+		if (typeof value === "string") return value.trim().length > 0 && value !== "all";
+		if (typeof value === "number") return value !== void 0 && value !== null && !Number.isNaN(value);
+		if (typeof value === "boolean") return value;
+		return Boolean(value);
+	}).length;
+	const FilterContent = () => /* @__PURE__ */ jsxs("div", {
+		className: "space-y-4",
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "space-y-4",
+			children
+		}), /* @__PURE__ */ jsx(SearchFilterActions, { onClose: () => setIsOpen(false) })]
+	});
+	const triggerButton = /* @__PURE__ */ jsxs(Button, {
+		variant: "outline",
+		size: "default",
+		className: cn("relative h-10 w-10 shrink-0 px-0 sm:w-auto sm:px-4", hasActiveFilters && "bg-primary/10 border-primary hover:bg-primary/15"),
+		disabled,
+		"aria-label": "Open filters",
+		children: [
+			/* @__PURE__ */ jsx(Filter, { className: "size-4" }),
+			/* @__PURE__ */ jsx("span", {
+				className: "hidden sm:inline ml-2",
+				children: "Filters"
+			}),
+			activeFilterCount > 0 && /* @__PURE__ */ jsx(Badge, {
+				variant: "secondary",
+				className: "absolute -right-1 -top-1 flex h-5 min-w-5 items-center justify-center rounded-full bg-primary px-1 text-xs font-medium text-primary-foreground",
+				children: activeFilterCount
+			})
+		]
+	});
+	if (isMobile) return /* @__PURE__ */ jsxs(Fragment, { 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"),
+		disabled,
+		"aria-label": "Open filters",
+		onClick: () => setIsOpen(true),
+		children: [/* @__PURE__ */ jsx(Filter, { className: "size-4" }), activeFilterCount > 0 && /* @__PURE__ */ jsx(Badge, {
+			variant: "secondary",
+			className: "absolute -right-1 -top-1 flex h-5 min-w-5 items-center justify-center rounded-full bg-primary px-1 text-xs font-medium text-primary-foreground",
+			children: activeFilterCount
+		})]
+	}), /* @__PURE__ */ jsx(SheetWrapper, {
+		open: isOpen,
+		onOpenChange: setIsOpen,
+		title,
+		description,
+		side: "bottom",
+		size: "default",
+		children: /* @__PURE__ */ jsx(FilterContent, {})
+	})] });
+	return /* @__PURE__ */ jsxs(Popover, {
+		open: isOpen,
+		onOpenChange: setIsOpen,
+		children: [/* @__PURE__ */ jsx(PopoverTrigger, { render: triggerButton }), /* @__PURE__ */ jsx(PopoverContent, {
+			className: "w-80 p-4 sm:w-96",
+			align: "end",
+			sideOffset: 8,
+			children: /* @__PURE__ */ jsx(FilterContent, {})
+		})]
+	});
+}
+
+//#endregion
+//#region src/components/search/search-actions.tsx
+/**
+* Search action buttons
+*
+* @example
+* // Combined clear (default)
+* <Search.Actions />
+*
+* @example
+* // Split clear — separate buttons for search text vs filters
+* <Search.Actions clearMode="split" />
+*/
+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, { 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-container.tsx
+/**
+* Container for search input and action buttons
+* Provides responsive layout
+*
+* @example
+* <Search.Container>
+*   <Search.Input />
+*   <Search.Filters />
+*   <Search.Actions />
+* </Search.Container>
+*/
+function SearchContainer({ children, className }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("flex items-center gap-2 flex-1", 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;
+}
+/**
+* Renders active filters as removable pills below the search bar.
+*
+* @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>
+* ```
+*/
+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/index.ts
+var search_exports = /* @__PURE__ */ __exportAll({
+	Actions: () => SearchActions,
+	ActiveFilters: () => SearchActiveFilters,
+	Container: () => SearchContainer,
+	FilterActions: () => SearchFilterActions,
+	Filters: () => SearchFilters,
+	Input: () => SearchInput,
+	Root: () => SearchRoot,
+	SearchProvider: () => SearchProvider,
+	TypeInput: () => SearchTypeInput,
+	useSearch: () => useSearch
+});
+
+//#endregion
+//#region src/search.ts
+/**
+* @classytic/fluid/search
+* Composable search component system with filters and actions
+*
+* @example
+* ```tsx
+* import { Search, SearchProvider, useSearch } from "@classytic/fluid/search";
+*
+* function MySearch() {
+*   return (
+*     <Search.Root hook={searchHook}>
+*       <Search.Container>
+*         <Search.Input placeholder="Search..." />
+*         <Search.Filters>{...}</Search.Filters>
+*         <Search.Actions />
+*       </Search.Container>
+*     </Search.Root>
+*   );
+* }
+* ```
+*/
+
+//#endregion
+export { search_exports as Search, SearchProvider, useSearch };