@classytic/fluid 0.2.1 → 0.3.2

package/dist/search.d.mts

@@ -0,0 +1,254 @@
+import { n as UseBaseSearchReturn } from "./use-base-search-BGgWnWaF.mjs";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+import { KeyboardEvent, ReactNode } from "react";
+
+//#region src/components/search/search-root.d.ts
+interface SearchRootProps {
+  children: ReactNode;
+  hook: UseBaseSearchReturn;
+  className?: string;
+  /**
+   * When true, automatically triggers `handleSearch` (debounced) whenever
+   * `searchValue` or `filters` change. Removes the need for a manual
+   * "Search" button — useful for DataTableToolbar-style UIs.
+   */
+  autoSearch?: boolean;
+  /** Debounce delay in ms for auto-search (default: 300) */
+  autoSearchDelay?: number;
+}
+/**
+ * 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>
+ */
+declare function SearchRoot({
+  children,
+  hook,
+  className,
+  autoSearch,
+  autoSearchDelay
+}: SearchRootProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region src/components/search/search-input.d.ts
+interface SearchInputProps {
+  placeholder?: string;
+  className?: string;
+  disabled?: boolean;
+  showIcon?: boolean;
+  showClearButton?: boolean;
+  onKeyDown?: (event: KeyboardEvent<HTMLInputElement>) => void;
+}
+/**
+ * Search input component using modern shadcn InputGroup pattern
+ *
+ * @example
+ * <Search.Input placeholder="Search..." />
+ */
+declare function SearchInput({
+  placeholder,
+  className,
+  disabled,
+  showIcon,
+  showClearButton,
+  onKeyDown,
+  ...props
+}: SearchInputProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region src/components/search/search-type-input.d.ts
+interface SearchTypeOption {
+  value: string;
+  label: string;
+}
+interface SearchTypeInputProps {
+  placeholder?: string;
+  className?: string;
+  disabled?: boolean;
+  showIcon?: boolean;
+  showClearButton?: boolean;
+  searchTypeOptions?: SearchTypeOption[];
+  onKeyDown?: (event: KeyboardEvent<HTMLInputElement>) => void;
+}
+/**
+ * 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" },
+ *   ]}
+ * />
+ */
+declare function SearchTypeInput({
+  placeholder,
+  className,
+  disabled,
+  showIcon,
+  showClearButton,
+  searchTypeOptions,
+  onKeyDown,
+  ...props
+}: SearchTypeInputProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region src/components/search/search-filters.d.ts
+interface SearchFiltersProps {
+  children: ReactNode;
+  title?: string;
+  description?: string;
+  disabled?: boolean;
+  className?: string;
+}
+/**
+ * Search filters component with mobile sheet support
+ *
+ * @example
+ * <Search.Filters>
+ *   <TagChoiceInput label="Category" ... />
+ *   <SelectInput label="Status" ... />
+ * </Search.Filters>
+ */
+declare function SearchFilters({
+  children,
+  title,
+  description,
+  disabled,
+  className
+}: SearchFiltersProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region src/components/search/search-actions.d.ts
+interface SearchActionsProps {
+  showSearchButton?: boolean;
+  showClearButton?: boolean;
+  searchButtonText?: string;
+  clearButtonText?: string;
+  /**
+   * "combined" (default): single Clear button that clears everything.
+   * "split": separate Clear Search and Clear Filters buttons.
+   */
+  clearMode?: "combined" | "split";
+  disabled?: boolean;
+  className?: string;
+}
+/**
+ * Search action buttons
+ *
+ * @example
+ * // Combined clear (default)
+ * <Search.Actions />
+ *
+ * @example
+ * // Split clear — separate buttons for search text vs filters
+ * <Search.Actions clearMode="split" />
+ */
+declare function SearchActions({
+  showSearchButton,
+  showClearButton,
+  searchButtonText,
+  clearButtonText,
+  clearMode,
+  disabled,
+  className
+}: SearchActionsProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region src/components/search/search-container.d.ts
+interface SearchContainerProps {
+  children: ReactNode;
+  className?: string;
+}
+/**
+ * Container for search input and action buttons
+ * Provides responsive layout
+ *
+ * @example
+ * <Search.Container>
+ *   <Search.Input />
+ *   <Search.Filters />
+ *   <Search.Actions />
+ * </Search.Container>
+ */
+declare function SearchContainer({
+  children,
+  className
+}: SearchContainerProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region src/components/search/search-filter-actions.d.ts
+interface SearchFilterActionsProps {
+  onClose?: () => void;
+  disabled?: boolean;
+}
+/**
+ * Filter actions component (Reset/Apply buttons)
+ * Used inside filter popovers/sheets
+ */
+declare function SearchFilterActions({
+  onClose,
+  disabled
+}: SearchFilterActionsProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region src/components/search/search-active-filters.d.ts
+interface SearchActiveFiltersProps {
+  /** Override labels for filter keys (falls back to FilterConfig.label, then capitalized key) */
+  labels?: Record<string, string>;
+  /** Map filter values to display text, per filter key */
+  valueLabels?: Record<string, Record<string, string>>;
+  /** Custom formatter — return null to hide a filter pill */
+  formatValue?: (key: string, value: unknown) => string | null;
+  /** Show "Clear all" link when multiple filters active */
+  showClearAll?: boolean;
+  className?: string;
+}
+/**
+ * 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>
+ * ```
+ */
+declare function SearchActiveFilters({
+  labels,
+  valueLabels,
+  formatValue: customFormat,
+  showClearAll,
+  className
+}: SearchActiveFiltersProps): react_jsx_runtime0.JSX.Element | null;
+//#endregion
+//#region src/components/search/search-context.d.ts
+interface SearchProviderProps {
+  children: ReactNode;
+  value: UseBaseSearchReturn;
+}
+declare function SearchProvider({
+  children,
+  value
+}: SearchProviderProps): react_jsx_runtime0.JSX.Element;
+declare function useSearch(): UseBaseSearchReturn;
+declare namespace index_d_exports {
+  export { SearchActions as Actions, SearchActiveFilters as ActiveFilters, SearchContainer as Container, SearchFilterActions as FilterActions, SearchFilters as Filters, SearchInput as Input, SearchRoot as Root, SearchActionsProps, SearchActiveFiltersProps, SearchContainerProps, SearchFilterActionsProps, SearchFiltersProps, SearchInputProps, SearchProvider, SearchProviderProps, SearchRootProps, SearchTypeInputProps, SearchTypeOption, SearchTypeInput as TypeInput, useSearch };
+}
+//#endregion
+export { index_d_exports as Search, type SearchActionsProps, type SearchActiveFiltersProps, type SearchContainerProps, type SearchFilterActionsProps, type SearchFiltersProps, type SearchInputProps, SearchProvider, type SearchProviderProps, type SearchRootProps, type SearchTypeInputProps, type SearchTypeOption, useSearch };