@zonos/amino 5.5.29 → 5.5.31

package/components/file-upload/FileUpload.d.ts

@@ -0,0 +1,112 @@
+import { type DropzoneOptions } from 'react-dropzone';
+import type { BaseProps } from "../../types/BaseProps";
+type UploadFileNoImage = {
+    name: string;
+    size?: string;
+};
+export type FileUploadProps = BaseProps & {
+    /**
+     * This `disabled` state only applies when no file is selected
+     * @default false
+     * */
+    disabled?: boolean;
+    dropzoneOptions: Omit<DropzoneOptions, 'disabled' | 'multiple'>;
+    /**
+     * Display error state with red border
+     * @default false
+     */
+    error?: boolean;
+    /**
+     * Text to display in empty state
+     * @default 'or drag your file here'
+     * */
+    instructionText?: string;
+    /**
+     * Show loading state
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * Text to show while loading state is active
+     * @default 'Uploading...'
+     */
+    loadingText?: string;
+    /**
+     * Function called when the remove button is clicked
+     */
+    onRemoveFile?: () => void;
+    /**
+     * Display file info if uploaded file property has data
+     */
+    uploadedFile: UploadFileNoImage | null;
+};
+/**
+ * FileUpload component provides a drag-and-drop interface for uploading single files.
+ * It displays file information once uploaded and supports loading states.
+ *
+ * @example Basic usage
+ * ```tsx
+ * <FileUpload
+ *   dropzoneOptions={{
+ *     maxSize: 5 * 1024 * 1024, // 5MB
+ *     onDrop: (acceptedFiles) => {
+ *       const file = acceptedFiles[0];
+ *       if (file) {
+ *         setUploadedFile({ name: file.name, size: `${file.size} bytes` });
+ *       }
+ *     }
+ *   }}
+ *   uploadedFile={null}
+ * />
+ * ```
+ *
+ * @example With a file already uploaded
+ * ```tsx
+ * <FileUpload
+ *   dropzoneOptions={{
+ *     maxSize: 5 * 1024 * 1024,
+ *     onDrop: (acceptedFiles) => {
+ *       // Handle file drop
+ *     }
+ *   }}
+ *   uploadedFile={{ name: 'document.pdf', size: '1.2 MB' }}
+ *   onRemoveFile={() => setUploadedFile(null)}
+ * />
+ * ```
+ *
+ * @example With custom instruction text and error state
+ * ```tsx
+ * <FileUpload
+ *   dropzoneOptions={{
+ *     accept: {
+ *       'image/*': ['.jpg', '.jpeg', '.png']
+ *     },
+ *     onDrop: (acceptedFiles, rejections) => {
+ *       // Handle file drop and rejection
+ *       setError(rejections.length > 0);
+ *     }
+ *   }}
+ *   error={hasError}
+ *   instructionText="Drop image files here"
+ *   uploadedFile={uploadedFile}
+ * />
+ * ```
+ *
+ * @example With loading state
+ * ```tsx
+ * <FileUpload
+ *   dropzoneOptions={{
+ *     onDrop: (acceptedFiles) => {
+ *       // Start upload
+ *       setLoading(true);
+ *       uploadFile(acceptedFiles[0]).then(() => setLoading(false));
+ *     }
+ *   }}
+ *   loading={isLoading}
+ *   loadingText="Uploading file..."
+ *   uploadedFile={uploadedFile}
+ * />
+ * ```
+ */
+export declare const FileUpload: ({ className, disabled, dropzoneOptions, error, instructionText, loading, loadingText, onRemoveFile, style, uploadedFile, }: FileUploadProps) => import("react").JSX.Element;
+export {};

package/components/filter/FilterWrapper.d.ts

@@ -0,0 +1,115 @@
+import type { KeyboardEvent, MouseEvent, ReactNode, RefObject } from 'react';
+import type { BaseProps } from "../../types/BaseProps";
+type FilterWrapperProps = BaseProps & {
+    active: boolean;
+    children: ReactNode;
+    dropDownOpen: boolean;
+    dropdownRef: RefObject<HTMLDivElement>;
+    dropdownTitle: string;
+    filterText: string;
+    handleApply: () => void;
+    handleKeyDown: (event: KeyboardEvent) => void;
+    handleOpenDropdown: (e: MouseEvent) => void;
+    handleToggle: () => void;
+    hasFilter: boolean;
+    label: string;
+};
+/**
+ * FilterWrapper provides a standardized UI for creating filters in data views.
+ * It displays a toggle button to activate the filter, a dropdown to select filter options,
+ * and includes the apply button to confirm filter selections.
+ *
+ * This component is typically used with other filtering components like FilterDate,
+ * FilterSelect, etc., and is designed to work with the useFilterWrapper hook for state
+ * management.
+ *
+ * @example Basic usage with useFilterWrapper hook
+ * ```tsx
+ * const {
+ *   renderWrapper,
+ *   setFilterText
+ * } = useFilterWrapper({
+ *   dropdownTitle: "Status Filter",
+ *   isActive: isStatusFilterActive,
+ *   label: "Status",
+ *   setActive: setIsStatusFilterActive,
+ *   initialFilterText: "All statuses",
+ *   onApply: (setFilterText) => {
+ *     setFilterText(selectedStatus ? selectedStatus.label : "All statuses");
+ *     onFilterApplied(selectedStatus?.value);
+ *   },
+ *   onApplyFilterText: (setFilterText) => {
+ *     setFilterText(selectedStatus ? selectedStatus.label : "All statuses");
+ *   },
+ *   onClose: () => {},
+ *   onRemove: () => {
+ *     setSelectedStatus(undefined);
+ *     onFilterApplied(undefined);
+ *   }
+ * });
+ *
+ * return renderWrapper(
+ *   <FilterSelect
+ *     options={[
+ *       { label: "Active", value: "active" },
+ *       { label: "Pending", value: "pending" },
+ *       { label: "Inactive", value: "inactive" }
+ *     ]}
+ *     onChange={setSelectedStatus}
+ *     value={selectedStatus}
+ *   />
+ * );
+ * ```
+ *
+ * @example With date filter
+ * ```tsx
+ * const {
+ *   renderWrapper,
+ *   setFilterText
+ * } = useFilterWrapper({
+ *   dropdownTitle: "Date Range",
+ *   isActive: isDateFilterActive,
+ *   label: "Date",
+ *   setActive: setIsDateFilterActive,
+ *   initialFilterText: "All dates",
+ *   onApply: (setFilterText) => {
+ *     if (startDate && endDate) {
+ *       const formattedText = `${formatDate(startDate)} - ${formatDate(endDate)}`;
+ *       setFilterText(formattedText);
+ *       onFilterApplied({ startDate, endDate });
+ *     }
+ *   },
+ *   onApplyFilterText: (setFilterText) => {
+ *     if (startDate && endDate) {
+ *       setFilterText(`${formatDate(startDate)} - ${formatDate(endDate)}`);
+ *     }
+ *   },
+ *   onClose: () => {},
+ *   onRemove: () => {
+ *     setStartDate(undefined);
+ *     setEndDate(undefined);
+ *     onFilterApplied({ startDate: null, endDate: null });
+ *   }
+ * });
+ *
+ * return renderWrapper(
+ *   <FilterDate
+ *     startDate={startDate}
+ *     endDate={endDate}
+ *     onStartDateChange={setStartDate}
+ *     onEndDateChange={setEndDate}
+ *   />
+ * );
+ * ```
+ *
+ * @example Multiple filters in a filter bar
+ * ```tsx
+ * <div style={{ display: 'flex', gap: '8px' }}>
+ *   {statusFilterWrapper}
+ *   {dateFilterWrapper}
+ *   {textFilterWrapper}
+ * </div>
+ * ```
+ */
+export declare const FilterWrapper: ({ active, children, className, dropDownOpen, dropdownRef, dropdownTitle, filterText, handleApply, handleKeyDown, handleOpenDropdown, handleToggle, hasFilter, label, style, }: FilterWrapperProps) => import("react").JSX.Element;
+export {};

package/components/filter/filter-amount/FilterAmount.d.ts

@@ -0,0 +1,55 @@
+import { type Dispatch } from 'react';
+import { type FilterAmountAction, type FilterAmountState } from "./filterAmountReducer";
+import { type BaseFilterProps } from "../useFilterWrapper";
+export type FilterAmountType = 'equal' | 'between' | 'greater' | 'less';
+export type FilterAmountProps = BaseFilterProps & {
+    dispatch: Dispatch<FilterAmountAction>;
+    filter: FilterAmountState;
+};
+/**
+ * FilterAmount provides a specialized filter interface for numeric amount values.
+ * It allows users to filter by equal to, between, greater than, or less than specific amounts.
+ * Integrates with the filter wrapper system for consistent behavior across filters.
+ *
+ * @example Basic usage with a reducer
+ * ```tsx
+ * const [filter, dispatch] = useReducer(filterAmountReducer, initialFilterAmountState);
+ *
+ * <FilterAmount
+ *   dispatch={dispatch}
+ *   dropdownTitle="Amount"
+ *   filter={filter}
+ *   label="Amount"
+ * />
+ * ```
+ *
+ * @example With specific initial filter value
+ * ```tsx
+ * const [filter, dispatch] = useReducer(filterAmountReducer, {
+ *   ...initialFilterAmountState,
+ *   amountFilterType: 'greater',
+ *   amountTotalMin: 100
+ * });
+ *
+ * <FilterAmount
+ *   dispatch={dispatch}
+ *   dropdownTitle="Price"
+ *   filter={filter}
+ *   label="Price"
+ * />
+ * ```
+ *
+ * @example As part of a filter group
+ * ```tsx
+ * <FilterWrapper>
+ *   <FilterAmount
+ *     dispatch={dispatch}
+ *     dropdownTitle="Total"
+ *     filter={filter}
+ *     label="Total Amount"
+ *   />
+ *   <OtherFilters... />
+ * </FilterWrapper>
+ * ```
+ */
+export declare const FilterAmount: ({ dispatch, dropdownTitle, filter, label, }: FilterAmountProps) => import("react").JSX.Element;

package/components/filter/filter-amount/filterAmountReducer.d.ts

@@ -0,0 +1,20 @@
+import type { DeepReducerActions } from "../../../types/deep/DeepReducerActions";
+export declare const filterAmountTypes: readonly ["equal", "between", "greater", "less"];
+export type FilterAmountType = (typeof filterAmountTypes)[number];
+export declare const filterAmountOptions: {
+    label: string;
+    value: FilterAmountType;
+}[];
+export type FilterAmountState = {
+    amountFilterType: FilterAmountType;
+    amountTotalMax: number | null;
+    amountTotalMin: number | null;
+    isActive: boolean;
+};
+export declare const initialFilterAmountState: FilterAmountState;
+export type FilterAmountAction = DeepReducerActions<FilterAmountState> | {
+    type: 'reset';
+};
+export declare const filterAmountReducer: (state: FilterAmountState, action: FilterAmountAction) => FilterAmountState;
+export declare const filterAmountReducerUrl: (prefixKey?: string) => (state: FilterAmountState, action: FilterAmountAction) => FilterAmountState;
+export declare const getInitialFilterAmountStateUrl: (prefixKey?: string) => FilterAmountState;

package/components/filter/filter-date/DateControls.d.ts

@@ -0,0 +1,11 @@
+import { type FilterDateData, type FilterDateRangeType } from "./filterDateReducer";
+import type { BaseProps } from "../../../types/BaseProps";
+type DateControlProps = BaseProps & {
+    onChange: (value: FilterDateData) => void;
+    onChangeFilterText: (text: string) => void;
+    rangeType: FilterDateRangeType;
+    setRangeType: (range: FilterDateRangeType) => void;
+    value: FilterDateData;
+};
+export declare const DateControls: ({ onChange, onChangeFilterText, rangeType, setRangeType, value, }: DateControlProps) => import("react").JSX.Element;
+export {};

package/components/filter/filter-date/DateControlsWrapper.d.ts

@@ -0,0 +1,13 @@
+import type { ReactNode } from 'react';
+import type { FilterDateData } from "./filterDateReducer";
+import type { BaseProps } from "../../../types/BaseProps";
+export type _DateControlProps = {
+    onChange: (value: FilterDateData) => void;
+    onChangeFilterText: (text: string) => void;
+    value: FilterDateData;
+};
+export declare const formatDate: (date: string) => string;
+export declare const defaultDateFormat = "YYYY-MM-DD";
+export declare const DateControlsWrapper: ({ children, className, style, }: BaseProps & {
+    children: ReactNode;
+}) => import("react").JSX.Element;

package/components/filter/filter-date/FilterDate.d.ts

@@ -0,0 +1,64 @@
+import { type Dispatch } from 'react';
+import { type FilterDateAction, type FilterDateState } from "./filterDateReducer";
+import { type BaseFilterProps } from "../useFilterWrapper";
+export type FilterDateProps = BaseFilterProps & {
+    dispatch: Dispatch<FilterDateAction>;
+    filter: FilterDateState;
+};
+/**
+ * FilterDate provides an interface for filtering by date ranges.
+ * It supports various range types such as "is between", "is equal to", "is on or after", and "is before or on".
+ * The component handles date formatting, adjustments, and integrates with the filter wrapper system.
+ *
+ * @example Basic usage with a reducer
+ * ```tsx
+ * const [filter, dispatch] = useReducer(filterDateReducer, initialFilterDateState);
+ *
+ * <FilterDate
+ *   dispatch={dispatch}
+ *   dropdownTitle="Date Range"
+ *   filter={filter}
+ *   label="Date"
+ * />
+ * ```
+ *
+ * @example With specific initial date filter
+ * ```tsx
+ * const [filter, dispatch] = useReducer(filterDateReducer, {
+ *   ...initialFilterDateState,
+ *   dateRangeType: 'is on or after',
+ *   dateData: {
+ *     ...initialFilterDateState.dateData,
+ *     dateBegin: '2025-01-01'
+ *   }
+ * });
+ *
+ * <FilterDate
+ *   dispatch={dispatch}
+ *   dropdownTitle="Created"
+ *   filter={filter}
+ *   label="Creation Date"
+ * />
+ * ```
+ *
+ * @example With "last N days" filtering
+ * ```tsx
+ * const [filter, dispatch] = useReducer(filterDateReducer, {
+ *   ...initialFilterDateState,
+ *   dateRangeType: 'last',
+ *   dateData: {
+ *     ...initialFilterDateState.dateData,
+ *     lastCount: 30,
+ *     lastUnit: 'days'
+ *   }
+ * });
+ *
+ * <FilterDate
+ *   dispatch={dispatch}
+ *   dropdownTitle="Recent"
+ *   filter={filter}
+ *   label="Recent Activity"
+ * />
+ * ```
+ */
+export declare const FilterDate: ({ dispatch, dropdownTitle, filter, label, }: FilterDateProps) => import("react").JSX.Element;

package/components/filter/filter-date/_DateControls/_IsAfter.d.ts

@@ -0,0 +1,2 @@
+import { type _DateControlProps } from "../DateControlsWrapper";
+export declare const IsAfter: ({ onChange, onChangeFilterText, value, }: _DateControlProps) => import("react").JSX.Element;

package/components/filter/filter-date/_DateControls/_IsBefore.d.ts

@@ -0,0 +1,2 @@
+import { type _DateControlProps } from "../DateControlsWrapper";
+export declare const IsBefore: ({ onChange, onChangeFilterText, value, }: _DateControlProps) => import("react").JSX.Element;

package/components/filter/filter-date/_DateControls/_IsBeforeOrOn.d.ts

@@ -0,0 +1,2 @@
+import { type _DateControlProps } from "../DateControlsWrapper";
+export declare const IsBeforeOrOn: ({ onChange, onChangeFilterText, value, }: _DateControlProps) => import("react").JSX.Element;

package/components/filter/filter-date/_DateControls/_IsBetween.d.ts

@@ -0,0 +1,3 @@
+import { type _DateControlProps } from "../DateControlsWrapper";
+/** Inclusive */
+export declare const IsBetween: ({ onChange, onChangeFilterText, value, }: _DateControlProps) => import("react").JSX.Element;

package/components/filter/filter-date/_DateControls/_IsEqualTo.d.ts

@@ -0,0 +1,2 @@
+import { type _DateControlProps } from "../DateControlsWrapper";
+export declare const IsEqualTo: ({ onChange, onChangeFilterText, value, }: _DateControlProps) => import("react").JSX.Element;

package/components/filter/filter-date/_DateControls/_IsInTheLast.d.ts

@@ -0,0 +1,2 @@
+import { type _DateControlProps } from "../DateControlsWrapper";
+export declare const IsInTheLast: ({ onChange, onChangeFilterText, value, }: _DateControlProps) => import("react").JSX.Element;

package/components/filter/filter-date/_DateControls/_IsOnOrAfter.d.ts

@@ -0,0 +1,2 @@
+import { type _DateControlProps } from "../DateControlsWrapper";
+export declare const IsOnOrAfter: ({ onChange, onChangeFilterText, value, }: _DateControlProps) => import("react").JSX.Element;

package/components/filter/filter-date/filterDateReducer.d.ts

@@ -0,0 +1,24 @@
+import type { DeepReducerActions } from "../../../types/deep/DeepReducerActions";
+export type FilterDateType = 'equal' | 'between' | 'greater' | 'less';
+export declare const filterDateRanges: readonly ["is in the last", "is equal to", "is after", "is before", "is between", "is on or after", "is before or on"];
+export type FilterDateRangeType = (typeof filterDateRanges)[number];
+export declare const dateUnits: readonly ["days", "months"];
+export type FilterDateLastRangeUnit = (typeof dateUnits)[number];
+export type FilterDateData = {
+    dateBegin: string | null;
+    dateEnd: string | null;
+    lastCount: number;
+    lastUnit: FilterDateLastRangeUnit;
+};
+export type FilterDateState = {
+    dateData: FilterDateData;
+    dateRangeType: FilterDateRangeType;
+    isActive: boolean;
+};
+export declare const initialFilterDateState: FilterDateState;
+export type FilterDateAction = DeepReducerActions<FilterDateState> | {
+    type: 'reset';
+};
+export declare const filterDateReducer: (state: FilterDateState, action: FilterDateAction) => FilterDateState;
+export declare const filterDateReducerUrl: (prefixKey?: string) => (state: FilterDateState, action: FilterDateAction) => FilterDateState;
+export declare const getInitialFilterDateStateUrl: (prefixKey?: string) => FilterDateState;

package/components/filter/filter-multi-select/FilterMultiSelect.d.ts

@@ -0,0 +1,64 @@
+import { type BaseFilterProps } from "../useFilterWrapper";
+import type { SelectOption, SelectValue } from "../../../types/SelectOption";
+export type FilterMultiSelectProps<T extends SelectValue = SelectValue> = BaseFilterProps & {
+    onChange: (value: T[]) => void;
+    options: SelectOption<T>[];
+    value: T[];
+};
+/**
+ * FilterMultiSelect provides a checkbox-based multi-selection filter.
+ * It allows users to select multiple options from a list and integrates
+ * with the filter wrapper system for consistent behavior.
+ *
+ * @example Basic usage
+ * ```tsx
+ * const [selected, setSelected] = useState<string[]>([]);
+ *
+ * <FilterMultiSelect
+ *   dropdownTitle="Categories"
+ *   label="Category"
+ *   onChange={setSelected}
+ *   options={[
+ *     { label: 'Electronics', value: 'electronics' },
+ *     { label: 'Clothing', value: 'clothing' },
+ *     { label: 'Books', value: 'books' }
+ *   ]}
+ *   value={selected}
+ * />
+ * ```
+ *
+ * @example With initial selection
+ * ```tsx
+ * const [selected, setSelected] = useState<string[]>(['electronics']);
+ *
+ * <FilterMultiSelect
+ *   dropdownTitle="Product Type"
+ *   label="Type"
+ *   onChange={setSelected}
+ *   options={[
+ *     { label: 'Electronics', value: 'electronics' },
+ *     { label: 'Clothing', value: 'clothing' },
+ *     { label: 'Books', value: 'books' }
+ *   ]}
+ *   value={selected}
+ * />
+ * ```
+ *
+ * @example With numeric values
+ * ```tsx
+ * const [selected, setSelected] = useState<number[]>([]);
+ *
+ * <FilterMultiSelect<number>
+ *   dropdownTitle="Priority"
+ *   label="Priority Level"
+ *   onChange={setSelected}
+ *   options={[
+ *     { label: 'High', value: 3 },
+ *     { label: 'Medium', value: 2 },
+ *     { label: 'Low', value: 1 }
+ *   ]}
+ *   value={selected}
+ * />
+ * ```
+ */
+export declare const FilterMultiSelect: <T extends SelectValue = SelectValue>({ dropdownTitle, label, onChange, options, value, }: FilterMultiSelectProps<T>) => import("react").JSX.Element;

package/components/filter/filter-select/FilterSelect.d.ts

@@ -0,0 +1,88 @@
+import { type BaseFilterProps } from "../useFilterWrapper";
+import { type SelectProps } from "../../select/Select";
+import type { SelectOption } from "../../../types/SelectOption";
+type CustomSelectProps<T extends string = string, O extends SelectOption<string> = SelectOption<T>> = Omit<SelectProps<T, O>, 'onChange' | 'value' | 'options'>;
+export type FilterSelectProps<T extends string = string, O extends SelectOption<string> = SelectOption<T>> = BaseFilterProps & {
+    filterTextCharacterLimit?: number;
+    /**
+     * @default `is ${value.label}`
+     */
+    getFilterText?: (value: O) => string;
+    onChange: (value: T | null) => void;
+    options: O[];
+    selectProps?: CustomSelectProps<T, O> | ((editingValue: O | null) => CustomSelectProps<T, O>);
+    value: T | null;
+};
+/**
+ * FilterSelect provides a dropdown-based single selection filter.
+ * It allows users to select a single option from a list and integrates
+ * with the filter wrapper system for consistent behavior.
+ *
+ * @example Basic usage
+ * ```tsx
+ * const [selected, setSelected] = useState<string | null>(null);
+ *
+ * <FilterSelect
+ *   dropdownTitle="Status"
+ *   label="Status"
+ *   onChange={setSelected}
+ *   options={[
+ *     { label: 'Active', value: 'active' },
+ *     { label: 'Pending', value: 'pending' },
+ *     { label: 'Completed', value: 'completed' }
+ *   ]}
+ *   value={selected}
+ * />
+ * ```
+ *
+ * @example With initial selection
+ * ```tsx
+ * const [selected, setSelected] = useState<string | null>('active');
+ *
+ * <FilterSelect
+ *   dropdownTitle="Status"
+ *   label="Status"
+ *   onChange={setSelected}
+ *   options={[
+ *     { label: 'Active', value: 'active' },
+ *     { label: 'Pending', value: 'pending' },
+ *     { label: 'Completed', value: 'completed' }
+ *   ]}
+ *   value={selected}
+ * />
+ * ```
+ *
+ * @example With custom filter text formatter
+ * ```tsx
+ * <FilterSelect
+ *   dropdownTitle="Priority"
+ *   getFilterText={(option) => `Priority: ${option.label}`}
+ *   label="Priority"
+ *   onChange={setPriority}
+ *   options={[
+ *     { label: 'High', value: 'high' },
+ *     { label: 'Medium', value: 'medium' },
+ *     { label: 'Low', value: 'low' }
+ *   ]}
+ *   value={priority}
+ * />
+ * ```
+ *
+ * @example With custom select props
+ * ```tsx
+ * <FilterSelect
+ *   dropdownTitle="Country"
+ *   label="Country"
+ *   onChange={setCountry}
+ *   options={countryOptions}
+ *   selectProps={{
+ *     isSearchable: true,
+ *     placeholder: 'Select a country...',
+ *     size: "md"
+ *   }}
+ *   value={country}
+ * />
+ * ```
+ */
+export declare const FilterSelect: <T extends string = string, O extends SelectOption<T> = SelectOption<T>>({ filterTextCharacterLimit, getFilterText: _getFilterText, onChange, options, selectProps, value, ...props }: FilterSelectProps<T, O>) => import("react").JSX.Element;
+export {};

package/components/filter/filter-text/FilterText.d.ts

@@ -0,0 +1,48 @@
+import { type BaseFilterProps } from "../useFilterWrapper";
+export type FilterTextProps = BaseFilterProps & {
+    onChange: (value: string | null) => void;
+    value: string | null;
+};
+/**
+ * FilterText provides a text input filter for searching or filtering by text.
+ * It allows users to type text input and integrates with the filter wrapper system
+ * for consistent behavior across filters.
+ *
+ * @example Basic usage
+ * ```tsx
+ * const [searchText, setSearchText] = useState<string | null>(null);
+ *
+ * <FilterText
+ *   dropdownTitle="Search"
+ *   label="Name"
+ *   onChange={setSearchText}
+ *   value={searchText}
+ * />
+ * ```
+ *
+ * @example With initial value
+ * ```tsx
+ * const [searchText, setSearchText] = useState<string | null>("initial search");
+ *
+ * <FilterText
+ *   dropdownTitle="Search Products"
+ *   label="Product Name"
+ *   onChange={setSearchText}
+ *   value={searchText}
+ * />
+ * ```
+ *
+ * @example As part of a filter group
+ * ```tsx
+ * <FilterWrapper>
+ *   <FilterText
+ *     dropdownTitle="Search"
+ *     label="Search"
+ *     onChange={setSearchText}
+ *     value={searchText}
+ *   />
+ *   <OtherFilters... />
+ * </FilterWrapper>
+ * ```
+ */
+export declare const FilterText: ({ dropdownTitle, label, onChange, value, }: FilterTextProps) => import("react").JSX.Element;