@delightui/components 0.1.110 → 0.1.112

package/dist/index.d.ts

@@ -4,6 +4,7 @@ import React__default, { ImgHTMLAttributes, SyntheticEvent, HTMLAttributes, Reac
 import { LinkProps } from 'react-router-dom';
 import { Plugin } from 'flatpickr/dist/types/options';
 import FlatPickr from 'react-flatpickr';
+import { ModalTransitionComponent } from 'react-overlays/cjs/Modal';
 import { Offset } from 'react-overlays/usePopper';
 
 /**
@@ -1461,6 +1462,10 @@ type ModalProps = {
      * Additional CSS class names to apply to the modal.
      */
     className?: string;
+    /**
+     * Optional transition component for the modal.
+     */
+    Transition?: ModalTransitionComponent;
 };
 
 /**
@@ -2027,6 +2032,76 @@ type ChipInputProps = ControlledFormComponentProps<string[]> & {
 
 declare const _default: React__default.NamedExoticComponent<ChipInputProps>;
 
+/**
+ * Enum for different search modes.
+ */
+type SearchStyleEnum = 'Auto' | 'Button';
+/**
+ * Search callback function type that receives the search query and returns a promise
+ */
+type SearchCallback = (query: string) => Promise<void>;
+/**
+ * Props for the Search component
+ */
+type SearchProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'value'> & ControlledFormComponentProps<string> & {
+    /**
+     * The search style - 'Auto' for debounced search on input, 'Button' for search on enter/submit
+     * @default 'Auto'
+     */
+    style?: SearchStyleEnum;
+    /**
+     * Callback function to handle search with the query string
+     */
+    onSearch?: SearchCallback;
+    /**
+     * Debounce delay in milliseconds for auto style
+     * @default 300
+     */
+    debounceMs?: number;
+    /**
+     * Minimum characters required to trigger search in auto style
+     * @default 1
+     */
+    minCharacters?: number;
+    /**
+     * Show submit button in button style
+     * @default true
+     */
+    showSubmitButton?: boolean;
+    /**
+     * Show clear button when there is text
+     * @default true
+     */
+    showClearButton?: boolean;
+    /**
+     * Loading state while search is in progress in auto style
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * Provide a way to override the styling
+     */
+    'component-variant'?: string;
+};
+
+/**
+ * Search component with auto and manual search modes
+ *
+ * @param props - The search component props
+ * @param ref - Forward ref to the input element
+ * @returns Search component
+ */
+declare const Search: React$1.ForwardRefExoticComponent<Omit<React$1.InputHTMLAttributes<HTMLInputElement>, "value" | "type"> & ControlledFormComponentProps<string> & {
+    style?: SearchStyleEnum;
+    onSearch?: SearchCallback;
+    debounceMs?: number;
+    minCharacters?: number;
+    showSubmitButton?: boolean;
+    showClearButton?: boolean;
+    loading?: boolean;
+    'component-variant'?: string;
+} & React$1.RefAttributes<HTMLInputElement>>;
+
 type DropzoneStatus = 'Empty' | 'Loading' | 'Uploaded';
 /**
  * Dropzone component props
@@ -2319,11 +2394,15 @@ type RenderStateViewProps<T = unknown, P = any> = {
     className?: string;
     data?: T | null;
     isLoading?: boolean;
+    errorData?: Error | string | null;
     filled?: React.ComponentType<{
         data: T;
     } & P>;
     empty?: React.ComponentType<P>;
     loading?: React.ComponentType<P>;
+    error?: React.ComponentType<{
+        error: Error | string;
+    } & P>;
 };
 
 declare const RenderStateView: <T = unknown, P = any>(props: RenderStateViewProps<T, P>) => react_jsx_runtime.JSX.Element;
@@ -2369,6 +2448,17 @@ declare const RenderStateView: <T = unknown, P = any>(props: RenderStateViewProp
  */
 declare const useInflateView: <T extends ComponentType<any>>(Component: T, props: React.ComponentProps<T>) => ReactElement;
 
+/**
+ * Custom hook that debounces a callback function
+ * @param callback - The function to debounce
+ * @param delay - The debounce delay in milliseconds
+ * @returns Object containing the debounced function and a cancel function
+ */
+declare const useDebounce: <T extends (...args: any[]) => void>(callback: T, delay: number) => {
+    debouncedCallback: (...args: Parameters<T>) => void;
+    cancel: () => void;
+};
+
 type ArrowDirectionEnum = 'ArrowUp' | 'ArrowDown' | 'ArrowLeft' | 'ArrowRight';
 type AccessibilityActions = {
     onClick?: (event?: SyntheticEvent) => void;
@@ -2466,4 +2556,4 @@ declare const NotificationContext: React__default.Context<NotificationContextVal
 declare const NotificationProvider: React__default.FC<NotificationProviderProps>;
 declare const useNotification: () => NotificationContextValue;
 
-export { type AccessibilityActions, type AccessibilityProps, Accordion, AccordionDetails, AccordionGroup, AccordionSummary, ActionCard, type ActionCardProps, ActionImage, type ActionImageProps, Breadcrumb, type BreadcrumbProps, Breadcrumbs, type BreadcrumbsProps, Breakpoint, type BreakpointProps, Button, ButtonGroup, type ButtonGroupProps, type ButtonProps, Card, type CardProps, Checkbox, CheckboxItem, type CheckboxItemProps, type CheckboxLabelAlignmentEnum, type CheckboxProps, type CheckboxSizeEnum, type CheckboxTypeEnum, Chip, _default as ChipInput, type ChipInputProps, type ChipListItemProps, type ChipListItemTypeEnum, type ChipProps, ConditionalView, type ConditionalViewProps, ContextMenu, type ContextMenuProps, type CustomTimePickerConfig, CustomToggle, type CustomToggleProps, DatePicker, type DatePickerProps, SortableItem as DraggableItem, SortableTrigger as DraggableItemTrigger, Dropzone, DropzoneClear, DropzoneContent, type DropzoneContentProps, type DropzoneContentTypeEnum, DropzoneFilename, DropzoneFilename as DropzonePreview, type DropzoneProps, DropzoneSupportedFormats as DropzoneReject, DropzoneTrigger as DropzoneRoot, DropzoneSupportedFormats, DropzoneTrigger, type FieldValidationFunction, type FieldValidators, type FieldValue, Form, type FormContextValues, type FormErrors, FormField, type FormFieldProps, type FormProps, type FormProviderProps, type FormState, type FormStateChangeHandler, type FormSubmitHandler, type FormValidator, Grid, GridItem, type GridItemProps, GridList, type GridListProps, type GridProps, Icon, IconButton, type IconButtonProps, type IconButtonStyleEnum, type IconProps, type IconSizeEnum, type IconStyleEnum, Image, type ImageFitEnum, type ImageProps, Input, type InputProps, type InputTypeEnum, List, ListItem, type ListItemProps$1 as ListItemProps, type ListProps, Modal, type ModalComponentProps, ModalFooter, type ModalFooterProps, ModalHeader, type ModalHeaderProps, type ModalProps, ModalProvider, type ModalProviderProps, Nav, NavItem, type NavItemProps, NavLink, type NavLinkProps, type NavProps, type NotificationContainerProps, NotificationContext, NotificationProvider, Option, type OptionProps, type OverlayDirectionEnum, Pagination, PaginationNumberField, type PaginationNumberFieldProps, type PaginationProps, Password, Popover, type PopoverHandle, type PopoverProps, ProgressBar, type ProgressBarProps, RadioButton, RadioButtonItem, type RadioButtonItemProps, type RadioButtonLabelAlignmentEnum, type RadioButtonProps, type RadioButtonSizeEnum, RadioGroup, type RadioGroupProps, RenderStateView, type RenderStateViewProps, RepeaterList, type RepeaterListProps, type RequiredFields, ResponsiveComponent, type ResponsiveComponentProps, Select, SelectListItem, type SelectListItemProps, type SelectProps, SelectProvider, SlideOutPanel, type SlideOutPanelDirectionEnum, type SlideOutPanelProps, type SlideOutPanelSizeEnum, Slider, type SliderProps, Spinner, type SpinnerProps, TabContent, type TabContentProps, TabItem, type TabItemProps, Table, TableBody, type TableBodyProps, TableCell, type TableCellProps, TableHeader, TableHeaderCell, type TableHeaderCellProps, type TableHeaderProps, type TableProps, TableRow, type TableRowProps, Tabs, type TabsProps, Text, TextArea, type TextAreaProps, type TextDecorationEnum, type TextProps, type TextTypeEnum, type TextWeightEnum, ThemeContext, type ThemeContextType, ThemeProvider, type ThemeProviderProps, Toggle, ToggleButton, type ToggleButtonProps, type ToggleLabelAlignmentEnum, type ToggleProps, Tooltip, type TooltipProps, type UseModalReturn, WrapTextNodes, type WrapTextNodesProps, applyPropsToChildren, getClickAccessibilityProps, mergeRefs, useDropzoneContext, useInflateView, useModal, useNotification, useSelectContext, useTab };
+export { type AccessibilityActions, type AccessibilityProps, Accordion, AccordionDetails, AccordionGroup, AccordionSummary, ActionCard, type ActionCardProps, ActionImage, type ActionImageProps, Breadcrumb, type BreadcrumbProps, Breadcrumbs, type BreadcrumbsProps, Breakpoint, type BreakpointProps, Button, ButtonGroup, type ButtonGroupProps, type ButtonProps, Card, type CardProps, Checkbox, CheckboxItem, type CheckboxItemProps, type CheckboxLabelAlignmentEnum, type CheckboxProps, type CheckboxSizeEnum, type CheckboxTypeEnum, Chip, _default as ChipInput, type ChipInputProps, type ChipListItemProps, type ChipListItemTypeEnum, type ChipProps, ConditionalView, type ConditionalViewProps, ContextMenu, type ContextMenuProps, type CustomTimePickerConfig, CustomToggle, type CustomToggleProps, DatePicker, type DatePickerProps, SortableItem as DraggableItem, SortableTrigger as DraggableItemTrigger, Dropzone, DropzoneClear, DropzoneContent, type DropzoneContentProps, type DropzoneContentTypeEnum, DropzoneFilename, DropzoneFilename as DropzonePreview, type DropzoneProps, DropzoneSupportedFormats as DropzoneReject, DropzoneTrigger as DropzoneRoot, DropzoneSupportedFormats, DropzoneTrigger, type FieldValidationFunction, type FieldValidators, type FieldValue, Form, type FormContextValues, type FormErrors, FormField, type FormFieldProps, type FormProps, type FormProviderProps, type FormState, type FormStateChangeHandler, type FormSubmitHandler, type FormValidator, Grid, GridItem, type GridItemProps, GridList, type GridListProps, type GridProps, Icon, IconButton, type IconButtonProps, type IconButtonStyleEnum, type IconProps, type IconSizeEnum, type IconStyleEnum, Image, type ImageFitEnum, type ImageProps, Input, type InputProps, type InputTypeEnum, List, ListItem, type ListItemProps$1 as ListItemProps, type ListProps, Modal, type ModalComponentProps, ModalFooter, type ModalFooterProps, ModalHeader, type ModalHeaderProps, type ModalProps, ModalProvider, type ModalProviderProps, Nav, NavItem, type NavItemProps, NavLink, type NavLinkProps, type NavProps, type NotificationContainerProps, NotificationContext, NotificationProvider, Option, type OptionProps, type OverlayDirectionEnum, Pagination, PaginationNumberField, type PaginationNumberFieldProps, type PaginationProps, Password, Popover, type PopoverHandle, type PopoverProps, ProgressBar, type ProgressBarProps, RadioButton, RadioButtonItem, type RadioButtonItemProps, type RadioButtonLabelAlignmentEnum, type RadioButtonProps, type RadioButtonSizeEnum, RadioGroup, type RadioGroupProps, RenderStateView, type RenderStateViewProps, RepeaterList, type RepeaterListProps, type RequiredFields, ResponsiveComponent, type ResponsiveComponentProps, Search, type SearchCallback, type SearchStyleEnum as SearchModeEnum, type SearchProps, Select, SelectListItem, type SelectListItemProps, type SelectProps, SelectProvider, SlideOutPanel, type SlideOutPanelDirectionEnum, type SlideOutPanelProps, type SlideOutPanelSizeEnum, Slider, type SliderProps, Spinner, type SpinnerProps, TabContent, type TabContentProps, TabItem, type TabItemProps, Table, TableBody, type TableBodyProps, TableCell, type TableCellProps, TableHeader, TableHeaderCell, type TableHeaderCellProps, type TableHeaderProps, type TableProps, TableRow, type TableRowProps, Tabs, type TabsProps, Text, TextArea, type TextAreaProps, type TextDecorationEnum, type TextProps, type TextTypeEnum, type TextWeightEnum, ThemeContext, type ThemeContextType, ThemeProvider, type ThemeProviderProps, Toggle, ToggleButton, type ToggleButtonProps, type ToggleLabelAlignmentEnum, type ToggleProps, Tooltip, type TooltipProps, type UseModalReturn, WrapTextNodes, type WrapTextNodesProps, applyPropsToChildren, getClickAccessibilityProps, mergeRefs, useDebounce, useDropzoneContext, useInflateView, useModal, useNotification, useSelectContext, useTab };

package/docs/README.md

@@ -185,6 +185,9 @@ Combinations of atoms forming more complex UI patterns:
 - **[RepeaterList](./docs/components/molecules/RepeaterList.md)** - A simple list rendering component that iterates over an array of data and renders each item using a specified component. It provides a minimal, lightweight approach to rendering collections without additional layout or styling, making it perfect for simple repetitive content rendering.
   - *Aliases: RepeaterList, ItemRepeater, DataRepeater, ComponentRepeater*
 
+- **[Search](./docs/components/molecules/Search.md)** - A versatile search input component that supports both automatic and manual search modes. In auto mode, searches are triggered automatically with debouncing as the user types. In manual mode, searches are triggered only when the user presses Enter or clicks the search button. Includes built-in search, clear, and loading states with full keyboard navigation support.
+  - *Aliases: Search, SearchInput, SearchField, SearchBox, QueryInput*
+
 - **[Select](./docs/components/molecules/Select.md)** - A dropdown selection component that allows users to choose from a list of options. Supports single and multiple selections, custom icons, placeholder text, and integrates seamlessly with form validation. Built with accessibility and keyboard navigation in mind.
   - *Aliases: Select, Dropdown, ComboBox, Picker, OptionList*
 
@@ -254,6 +257,9 @@ React hooks for enhanced functionality:
 - **[useInflateView](./docs/components/utils/useInflateView.md)** - A React hook that takes a component type and props and returns a memoized React element. This hook is useful for creating reusable component instances with built-in memoization to prevent unnecessary re-renders when props haven't changed.
   - *Aliases: useInflateView, Component Inflater, Memoized View Hook, Dynamic Component Hook*
 
+- **[useDebounce](./docs/components/utils/useDebounce.md)** - A React hook that debounces callback functions, preventing them from being called too frequently. Particularly useful for optimizing performance in scenarios like search inputs, API calls, window resize handlers, or any function that might be triggered rapidly.
+  - *Aliases: useDebounce, Debounce Hook, Throttled Callback Hook, Delayed Execution Hook*
+
 ### Utilities
 Helper components and utilities:
 

package/docs/components/atoms/Input.md

@@ -263,69 +263,6 @@ function DisabledExample() {
 }
 ```
 
-### Search Input
-```tsx
-import { IconButton, Icon } from '@delightui/components';
-
-function SearchExample() {
-  const [searchTerm, setSearchTerm] = useState('');
-  const [results, setResults] = useState([]);
-
-  const handleSearch = useCallback(
-    debounce((term) => {
-      if (term.length > 2) {
-        // Simulate search
-        setResults([
-          `Result 1 for "${term}"`,
-          `Result 2 for "${term}"`,
-          `Result 3 for "${term}"`
-        ]);
-      } else {
-        setResults([]);
-      }
-    }, 300),
-    []
-  );
-
-  useEffect(() => {
-    handleSearch(searchTerm);
-  }, [searchTerm, handleSearch]);
-
-  const clearSearch = () => {
-    setSearchTerm('');
-    setResults([]);
-  };
-
-  return (
-    <div className="search-input">
-      <Input
-        leadingIcon={<MagnifyingGlassIcon />}
-        trailingIcon={
-          searchTerm ? (
-            <IconButton onClick={clearSearch} size="Small">
-              <Icon icon="Close" />
-            </IconButton>
-          ) : null
-        }
-        placeholder="Search..."
-        value={searchTerm}
-        onValueChange={setSearchTerm}
-      />
-      
-      {results.length > 0 && (
-        <div className="search-results">
-          {results.map((result, index) => (
-            <div key={index} className="result-item">
-              {result}
-            </div>
-          ))}
-        </div>
-      )}
-    </div>
-  );
-}
-```
-
 ### Number Input with Validation
 ```tsx
 import { Text } from '@delightui/components';