@payfit/unity-components
Version:
125 lines (124 loc) • 3.38 kB
TypeScript
import { VariantProps } from '@payfit/unity-themes';
import { ReactNode } from 'react';
import { SearchFieldProps } from 'react-aria-components/SearchField';
export declare const search: import('tailwind-variants').TVReturnType<{
isReadOnly: {
true: {
base: string;
icon: string;
button: string;
input: string;
};
false: {
base: string[];
icon: string;
input: string;
};
};
}, {
base: string[];
input: string[];
icon: string[];
invalidIcon: string[];
wrapperState: string[];
feedbackText: string[];
closeButton: string[];
}, undefined, {
isReadOnly: {
true: {
base: string;
icon: string;
button: string;
input: string;
};
false: {
base: string[];
icon: string;
input: string;
};
};
}, {
base: string[];
input: string[];
icon: string[];
invalidIcon: string[];
wrapperState: string[];
feedbackText: string[];
closeButton: string[];
}, import('tailwind-variants').TVReturnType<{
isReadOnly: {
true: {
base: string;
icon: string;
button: string;
input: string;
};
false: {
base: string[];
icon: string;
input: string;
};
};
}, {
base: string[];
input: string[];
icon: string[];
invalidIcon: string[];
wrapperState: string[];
feedbackText: string[];
closeButton: string[];
}, undefined, unknown, unknown, undefined>>;
export interface SearchProps extends VariantProps<typeof search>, SearchFieldProps {
/**
* Use this when search results are being fetched asynchronously.
* @default false
*/
isLoading?: boolean;
/**
* Text displayed below the search field, typically used for error messages.
* Only visible when isInvalid is true.
*/
feedbackText?: ReactNode;
/**
* Custom placeholder text for the search input.
* @default "Search"
*/
placeholder?: string;
/**
* A label used as aria-label for the search input
*/
label: string;
}
/**
* The `Search` component enables users to search or filter content within your application. The component
* supports various states including loading, invalid, disabled, and read-only modes to handle different
* @param {SearchProps} props - The props for the Search component
* @see {@link SearchProps} for all available props
* @example
* ```tsx
* import { Search } from '@payfit/unity-components'
*
* function OnChangeExample() {
* const [filteredItems, setFilteredItems] = useState(items)
*
* const handleChange = (value) => {
* setFilteredItems(
* value !== '' ? items.filter(item => item.name.includes(value)) : items
* )
* }
*
* return (
* <>
* <Search onChange={handleChange} />
* {filteredItems.map(item => (
* <div key={item.id}>{item.name}</div>
* ))}
* </>
* )
* }
* ```
* @remarks
* [API Docs](https://unity-components.payfit.io/?path=/docs/search--docs)
*/
declare const Search: import('react').ForwardRefExoticComponent<SearchProps & import('react').RefAttributes<HTMLDivElement>>;
export { Search };