@fabio.caffarello/react-design-system 1.7.0 → 1.9.0

package/dist/ui/organisms/Table/TablePagination.d.ts

@@ -0,0 +1,14 @@
+import type { HTMLAttributes } from 'react';
+export interface TablePaginationProps extends HTMLAttributes<HTMLDivElement> {
+    showPageSizeSelector?: boolean;
+    showPageInfo?: boolean;
+    pageSizeOptions?: number[];
+}
+/**
+ * TablePagination Component
+ *
+ * Renders pagination controls for the table.
+ * Uses pagination state from Table context.
+ * Must be used within a Table component.
+ */
+export default function TablePagination({ showPageSizeSelector, showPageInfo, pageSizeOptions, className, ...props }: TablePaginationProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/ui/organisms/Table/TableProvider.d.ts

@@ -0,0 +1,55 @@
+import type { ReactNode } from 'react';
+import { type PaginationMode } from './TableContext';
+import type { TableColumn } from './TableTypes';
+import type { FilterConfig, FilterValue } from './TableFilters/TableFilters';
+import type { TableAction } from './TableActions/TableActions';
+export interface TableProviderProps<T extends Record<string, unknown> = Record<string, unknown>> {
+    columns: TableColumn<T>[];
+    data: T[];
+    loading?: boolean;
+    paginationMode?: PaginationMode;
+    page?: number;
+    pageSize?: number;
+    total?: number;
+    onPageChange?: (page: number) => void;
+    onPageSizeChange?: (size: number) => void;
+    defaultPageSize?: number;
+    pageSizeOptions?: number[];
+    sortColumn?: string;
+    sortDirection?: 'asc' | 'desc';
+    onSort?: (column: string, direction: 'asc' | 'desc') => void;
+    defaultSortColumn?: string;
+    defaultSortDirection?: 'asc' | 'desc';
+    filters?: FilterConfig[];
+    filterValues?: Record<string, FilterValue>;
+    onFilter?: (filters: Record<string, FilterValue>) => void;
+    initialFilterValues?: Record<string, FilterValue>;
+    selectable?: boolean;
+    selectedRows?: string[];
+    onSelectionChange?: (selected: string[]) => void;
+    rowId?: (row: T) => string;
+    actions?: (row: T) => TableAction<T>[];
+    emptyMessage?: string;
+    emptyStateTitle?: string;
+    emptyStateMessage?: string;
+    emptyStateIllustration?: ReactNode;
+    emptyStateAction?: ReactNode;
+    onRowClick?: (row: T) => void;
+    resizable?: boolean;
+    columnWidths?: Record<string, number>;
+    onColumnResize?: (columnKey: string, width: number) => void;
+    virtualScrolling?: boolean;
+    virtualScrollingOptions?: {
+        itemHeight?: number;
+        containerHeight?: number;
+        overscan?: number;
+    };
+    children: ReactNode;
+}
+/**
+ * TableProvider Component
+ *
+ * Manages table state (pagination, sorting, filters, selection) and provides it via Context.
+ * Supports both client-side and server-side pagination with auto-detection.
+ */
+export declare function TableProvider<T extends Record<string, unknown> = Record<string, unknown>>({ columns, data, loading, paginationMode: explicitMode, page: controlledPage, pageSize: controlledPageSize, total: externalTotal, onPageChange, onPageSizeChange, defaultPageSize, pageSizeOptions: _pageSizeOptions, sortColumn: controlledSortColumn, sortDirection: controlledSortDirection, onSort, defaultSortColumn, defaultSortDirection, filters, filterValues: controlledFilterValues, onFilter, initialFilterValues, selectable, selectedRows: controlledSelectedRows, onSelectionChange, rowId, actions, emptyMessage, emptyStateTitle, emptyStateMessage, emptyStateIllustration, emptyStateAction, onRowClick, resizable, columnWidths, onColumnResize, virtualScrolling, virtualScrollingOptions: _virtualScrollingOptions, children, }: TableProviderProps<T>): import("react/jsx-runtime").JSX.Element;

package/dist/ui/organisms/Table/TableRow.d.ts

@@ -0,0 +1,15 @@
+import type { HTMLAttributes } from 'react';
+export interface TableRowProps<T extends Record<string, unknown> = Record<string, unknown>> extends Omit<HTMLAttributes<HTMLTableRowElement>, 'style'> {
+    row: T;
+    rowIndex: number;
+    style?: React.CSSProperties;
+    className?: string;
+}
+/**
+ * TableRow Component
+ *
+ * Renders a table row (tr) with cells.
+ * Supports selection and row click.
+ * Must be used within a Table component.
+ */
+export default function TableRow<T extends Record<string, unknown> = Record<string, unknown>>({ row, rowIndex, className, onClick, style, ...props }: TableRowProps<T>): import("react/jsx-runtime").JSX.Element;

package/dist/ui/organisms/Table/TableTypes.d.ts

@@ -0,0 +1,8 @@
+import type { ReactNode } from 'react';
+export interface TableColumn<T = Record<string, unknown>> {
+    key: keyof T | string;
+    label: string;
+    render?: (value: unknown, row: T) => ReactNode;
+    sortable?: boolean;
+    hiddenOnMobile?: boolean;
+}

package/dist/ui/organisms/Table/index.d.ts

@@ -0,0 +1,30 @@
+export { default as Table } from './Table';
+export type { TableColumn } from './TableTypes';
+export { TableContext, useTableContext, useTableContextOptional } from './TableContext';
+export type { TableContextValue, PaginationMode, PaginationState, SortState, FilterState, SelectionState, } from './TableContext';
+export { TableProvider } from './TableProvider';
+export type { TableProviderProps } from './TableProvider';
+export { default as TableHeader } from './TableHeader';
+export type { TableHeaderProps } from './TableHeader';
+export { default as TableHeaderRow } from './TableHeaderRow';
+export type { TableHeaderRowProps } from './TableHeaderRow';
+export { default as TableHeaderCell } from './TableHeaderCell';
+export type { TableHeaderCellProps } from './TableHeaderCell';
+export { default as TableBody } from './TableBody';
+export type { TableBodyProps } from './TableBody';
+export { default as TableRow } from './TableRow';
+export type { TableRowProps } from './TableRow';
+export { default as TableCell } from './TableCell';
+export type { TableCellProps } from './TableCell';
+export { default as TableFilters } from './TableFilters';
+export type { TableFiltersProps } from './TableFilters';
+export { default as TablePagination } from './TablePagination';
+export type { TablePaginationProps } from './TablePagination';
+export { default as TableEmptyState } from './TableEmptyState';
+export type { TableEmptyStateProps } from './TableEmptyState';
+export { default as TableActions } from './TableActions';
+export type { TableActionsProps } from './TableActions';
+export { useVirtualScrolling } from './useVirtualScrolling';
+export { useColumnResizing } from './useColumnResizing';
+export type { UseVirtualScrollingOptions, VirtualScrollingResult } from './useVirtualScrolling';
+export type { UseColumnResizingOptions, UseColumnResizingResult } from './useColumnResizing';

package/dist/ui/organisms/Table/useColumnResizing.d.ts

@@ -0,0 +1,39 @@
+export interface ColumnWidth {
+    [key: string]: number;
+}
+export interface UseColumnResizingOptions {
+    defaultWidths?: ColumnWidth;
+    minWidth?: number;
+    maxWidth?: number;
+    resizable?: boolean;
+}
+export interface UseColumnResizingResult {
+    columnWidths: ColumnWidth;
+    setColumnWidth: (columnKey: string, width: number) => void;
+    resetColumnWidths: () => void;
+    isResizing: boolean;
+    resizingColumn: string | null;
+    startResize: (columnKey: string, startX: number, startWidth: number) => void;
+    handleResize: (currentX: number) => void;
+    endResize: () => void;
+}
+/**
+ * useColumnResizing Hook
+ *
+ * Hook for managing column resizing in tables.
+ *
+ * @example
+ * ```tsx
+ * const {
+ *   columnWidths,
+ *   setColumnWidth,
+ *   startResize,
+ *   handleResize,
+ *   endResize,
+ * } = useColumnResizing({
+ *   defaultWidths: { name: 200, email: 250 },
+ *   minWidth: 100,
+ * });
+ * ```
+ */
+export declare function useColumnResizing(options?: UseColumnResizingOptions): UseColumnResizingResult;

package/dist/ui/organisms/Table/useVirtualScrolling.d.ts

@@ -0,0 +1,35 @@
+export interface UseVirtualScrollingOptions {
+    itemHeight: number;
+    containerHeight?: number;
+    overscan?: number;
+    enabled?: boolean;
+}
+export interface VirtualScrollingResult {
+    virtualItems: Array<{
+        index: number;
+        start: number;
+        end: number;
+        size: number;
+    }>;
+    totalHeight: number;
+    scrollOffset: number;
+    setScrollOffset: (offset: number) => void;
+    scrollToIndex: (index: number) => void;
+    containerRef: React.RefObject<HTMLDivElement>;
+}
+/**
+ * useVirtualScrolling Hook
+ *
+ * Hook for virtual scrolling to improve performance with large datasets.
+ * Only renders visible items plus overscan buffer.
+ *
+ * @example
+ * ```tsx
+ * const { virtualItems, totalHeight, containerRef } = useVirtualScrolling({
+ *   itemHeight: 50,
+ *   containerHeight: 400,
+ *   overscan: 5,
+ * });
+ * ```
+ */
+export declare function useVirtualScrolling<T>(items: T[], options: UseVirtualScrollingOptions): VirtualScrollingResult;

package/dist/ui/organisms/Timeline/Timeline.d.ts

@@ -0,0 +1,34 @@
+import type { ReactNode } from 'react';
+export type TimelineOrientation = 'horizontal' | 'vertical';
+export interface TimelineItem {
+    id: string;
+    title: string;
+    description?: string;
+    content?: ReactNode;
+    timestamp?: string;
+    icon?: ReactNode;
+    status?: 'default' | 'active' | 'completed' | 'error';
+}
+export interface TimelineProps {
+    items: TimelineItem[];
+    orientation?: TimelineOrientation;
+    className?: string;
+}
+/**
+ * Timeline Component
+ *
+ * A timeline component for displaying events in chronological order.
+ * Supports horizontal and vertical orientations.
+ * Follows Atomic Design principles as an Organism component.
+ *
+ * @example
+ * ```tsx
+ * <Timeline
+ *   items={[
+ *     { id: '1', title: 'Event 1', description: 'Description 1', timestamp: '2024-01-01' },
+ *     { id: '2', title: 'Event 2', description: 'Description 2', timestamp: '2024-01-02' },
+ *   ]}
+ * />
+ * ```
+ */
+export default function Timeline({ items, orientation, className, }: TimelineProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/organisms/Timeline/Timeline.stories.d.ts

@@ -0,0 +1,21 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import Timeline from './Timeline';
+declare const meta: Meta<typeof Timeline>;
+export default meta;
+type Story = StoryObj<typeof Timeline>;
+export declare const Default: Story;
+export declare const Horizontal: Story;
+export declare const WithIcons: Story;
+export declare const WithContent: Story;
+export declare const WithErrors: Story;
+export declare const Simple: Story;
+export declare const LongContent: Story;
+export declare const InteractiveTimeline: Story;
+export declare const ManyItems: Story;
+export declare const WithEvents: Story;
+export declare const DefaultState: Story;
+export declare const HorizontalState: Story;
+export declare const VerticalState: Story;
+export declare const WithIconsState: Story;
+export declare const CompletedStatusState: Story;
+export declare const ActiveStatusState: Story;

package/dist/ui/organisms/Timeline/Timeline.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/ui/organisms/Timeline/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './Timeline';
+export type { TimelineProps, TimelineItem, TimelineOrientation } from './Timeline';

package/dist/ui/organisms/Toast/Toast.d.ts

@@ -0,0 +1,8 @@
+import { type HTMLAttributes } from 'react';
+import { type Toast as ToastType } from './ToastContext';
+export interface ToastProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+    toast: ToastType;
+    onDismiss: (id: string) => void;
+    position?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' | 'top-center' | 'bottom-center';
+}
+export declare function Toast({ toast, onDismiss, position, className, style, ...props }: ToastProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/organisms/Toast/Toast.stories.d.ts

@@ -0,0 +1,23 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { ToastProvider } from './index';
+declare const meta: Meta<typeof ToastProvider>;
+export default meta;
+type Story = StoryObj<typeof ToastProvider>;
+export declare const Default: Story;
+export declare const TopLeft: Story;
+export declare const BottomRight: Story;
+export declare const BottomLeft: Story;
+export declare const TopCenter: Story;
+export declare const BottomCenter: Story;
+export declare const MultipleToasts: Story;
+export declare const WithActions: Story;
+export declare const CustomDuration: Story;
+export declare const WithAction: Story;
+export declare const PersistentToast: Story;
+export declare const AllVariants: Story;
+export declare const ClearAll: Story;
+export declare const WithEvents: Story;
+export declare const SuccessState: Story;
+export declare const ErrorState: Story;
+export declare const WithActionState: Story;
+export declare const PersistentState: Story;

package/dist/ui/organisms/Toast/Toast.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/ui/organisms/Toast/ToastContainer.d.ts

@@ -0,0 +1,5 @@
+export interface ToastContainerProps {
+    position?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' | 'top-center' | 'bottom-center';
+    maxToasts?: number;
+}
+export declare function ToastContainer({ position, maxToasts, }: ToastContainerProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/ui/organisms/Toast/ToastContext.d.ts

@@ -0,0 +1,21 @@
+export type ToastVariant = 'success' | 'error' | 'warning' | 'info';
+export interface Toast {
+    id: string;
+    title: string;
+    description?: string;
+    variant: ToastVariant;
+    duration?: number;
+    action?: {
+        label: string;
+        onClick: () => void;
+    };
+}
+export interface ToastContextValue {
+    toasts: Toast[];
+    addToast: (toast: Omit<Toast, 'id'>) => string;
+    removeToast: (id: string) => void;
+    clearAll: () => void;
+}
+export declare const ToastContext: import("react").Context<ToastContextValue | undefined>;
+export declare function useToastContext(): ToastContextValue;
+export declare function useToastContextOptional(): ToastContextValue | undefined;

package/dist/ui/organisms/Toast/ToastProvider.d.ts

@@ -0,0 +1,7 @@
+import { type ReactNode } from 'react';
+export interface ToastProviderProps {
+    children: ReactNode;
+    defaultDuration?: number;
+    maxToasts?: number;
+}
+export declare function ToastProvider({ children, defaultDuration, maxToasts, }: ToastProviderProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/organisms/Toast/index.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Toast Components
+ *
+ * Toast notification system with provider, hook, and container.
+ */
+export { ToastProvider } from './ToastProvider';
+export { ToastContainer } from './ToastContainer';
+export { Toast } from './Toast';
+export { useToast } from './useToast';
+export { useToastContext, useToastContextOptional } from './ToastContext';
+export type { ToastProviderProps } from './ToastProvider';
+export type { ToastContainerProps } from './ToastContainer';
+export type { ToastProps } from './Toast';
+export type { ToastOptions } from './useToast';
+export type { Toast as ToastType, ToastVariant, ToastContextValue } from './ToastContext';

package/dist/ui/organisms/Toast/useToast.d.ts

@@ -0,0 +1,36 @@
+import { type ToastVariant } from './ToastContext';
+export interface ToastOptions {
+    title: string;
+    description?: string;
+    variant?: ToastVariant;
+    duration?: number;
+    action?: {
+        label: string;
+        onClick: () => void;
+    };
+}
+/**
+ * useToast Hook
+ *
+ * Hook for showing toast notifications.
+ *
+ * @example
+ * ```tsx
+ * const toast = useToast();
+ *
+ * toast.success('Success!', 'Operation completed successfully');
+ * toast.error('Error!', 'Something went wrong');
+ * toast.info('Info', 'Here is some information');
+ * toast.warning('Warning', 'Please be careful');
+ * ```
+ */
+export declare function useToast(): {
+    show: (options: ToastOptions) => string;
+    success: (title: string, description?: string, options?: Omit<ToastOptions, "title" | "description" | "variant">) => string;
+    error: (title: string, description?: string, options?: Omit<ToastOptions, "title" | "description" | "variant">) => string;
+    warning: (title: string, description?: string, options?: Omit<ToastOptions, "title" | "description" | "variant">) => string;
+    info: (title: string, description?: string, options?: Omit<ToastOptions, "title" | "description" | "variant">) => string;
+    withUndo: (title: string, description: string | undefined, onUndo: () => void, variant?: ToastVariant, duration?: number) => string;
+    dismiss: (id: string) => void;
+    clearAll: () => void;
+};

package/dist/ui/organisms/index.d.ts

@@ -1,6 +1,15 @@
 export { default as LoginBox } from "./LoginBox/LoginBox";
 export { default as Modal } from "./Modal/Modal";
-export { default as Table } from "./Table/Table";
-export type { TableColumn } from "./Table/Table";
-export { default as Sidebar } from "./Sidebar/Sidebar";
-export type { SidebarProps } from "./Sidebar/Sidebar";
+export * from "./Table";
+export { default as SideNavbar } from "./SideNavbar";
+export * from "./SideNavbar";
+export * from "./Dialog";
+export * from "./Toast";
+export { default as Stepper } from "./Stepper/Stepper";
+export type { StepperProps, StepperStep, StepperStatus } from "./Stepper/Stepper";
+export { default as Timeline } from "./Timeline/Timeline";
+export type { TimelineProps, TimelineItem, TimelineOrientation } from "./Timeline/Timeline";
+export { default as CommandPalette } from "./CommandPalette/CommandPalette";
+export type { CommandPaletteProps, CommandItem } from "./CommandPalette/CommandPalette";
+export { default as DataGrid } from "./DataGrid/DataGrid";
+export type { DataGridProps, DataGridColumn, DataGridGroup } from "./DataGrid/DataGrid";

package/dist/ui/patterns/DataTablePattern/DataTablePattern.d.ts

@@ -0,0 +1,73 @@
+import React from 'react';
+import type { TableColumn } from '../../organisms/Table/TableTypes';
+export interface DataTableColumn<T = unknown> extends Omit<TableColumn<T>, 'key' | 'label'> {
+    key?: keyof T | string;
+    label?: string;
+    accessor?: keyof T | string | ((row: T) => unknown);
+    header?: string;
+}
+export interface DataTablePatternProps<T = unknown> {
+    /**
+     * Table columns configuration
+     * Supports both TableColumn format (key, label) and legacy format (accessor, header)
+     */
+    columns: DataTableColumn<T>[];
+    /**
+     * Table data rows
+     */
+    data: T[];
+    /**
+     * Search placeholder text
+     * @default "Search..."
+     */
+    searchPlaceholder?: string;
+    /**
+     * Enable search functionality
+     * @default true
+     */
+    enableSearch?: boolean;
+    /**
+     * Items per page
+     * @default 10
+     */
+    itemsPerPage?: number;
+    /**
+     * Enable pagination
+     * @default true
+     */
+    enablePagination?: boolean;
+    /**
+     * Action buttons to display above the table
+     */
+    actions?: React.ReactNode;
+    /**
+     * Callback when row is clicked
+     */
+    onRowClick?: (row: T, index: number) => void;
+    /**
+     * Loading state
+     */
+    loading?: boolean;
+    /**
+     * Empty state message
+     */
+    emptyMessage?: string;
+}
+/**
+ * DataTablePattern - A complete data table pattern combining Table, Pagination, Search, and Actions
+ *
+ * This pattern solves the common UX problem of displaying searchable, paginated data tables
+ * with actions. It combines multiple components into a cohesive solution.
+ *
+ * @example
+ * ```tsx
+ * <DataTablePattern
+ *   columns={columns}
+ *   data={data}
+ *   enableSearch
+ *   enablePagination
+ *   actions={<Button>Export</Button>}
+ * />
+ * ```
+ */
+export declare function DataTablePattern<T extends Record<string, unknown> = Record<string, unknown>>({ columns, data, searchPlaceholder, enableSearch, itemsPerPage, enablePagination, actions, onRowClick, loading, emptyMessage, }: DataTablePatternProps<T>): import("react/jsx-runtime").JSX.Element;

package/dist/ui/patterns/DataTablePattern/DataTablePattern.stories.d.ts

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { DataTablePattern } from './DataTablePattern';
+declare const meta: Meta<typeof DataTablePattern>;
+export default meta;
+type Story = StoryObj<typeof DataTablePattern>;
+export declare const Default: Story;
+export declare const WithActions: Story;
+export declare const WithoutSearch: Story;
+export declare const WithoutPagination: Story;
+export declare const Loading: Story;
+export declare const Empty: Story;
+export declare const WithEvents: Story;
+export declare const DefaultState: Story;
+export declare const LoadingState: Story;
+export declare const EmptyState: Story;
+export declare const WithActionsState: Story;
+export declare const WithoutSearchState: Story;
+export declare const WithoutPaginationState: Story;

package/dist/ui/patterns/DataTablePattern/index.d.ts

@@ -0,0 +1 @@
+export { DataTablePattern, type DataTablePatternProps, type DataTableColumn } from './DataTablePattern';

package/dist/ui/patterns/FormWizardPattern/FormWizardPattern.d.ts

@@ -0,0 +1,51 @@
+import React from 'react';
+import type { StepperStep } from '../../organisms';
+export interface FormWizardStep extends StepperStep {
+    /**
+     * Form fields for this step
+     */
+    fields: React.ReactNode;
+    /**
+     * Validation function for this step
+     */
+    validate?: () => boolean | Promise<boolean>;
+    /**
+     * Submit handler for this step
+     */
+    onSubmit?: (data: unknown) => void | Promise<void>;
+}
+export interface FormWizardPatternProps {
+    /**
+     * Steps configuration
+     */
+    steps: FormWizardStep[];
+    /**
+     * Callback when wizard is completed
+     */
+    onComplete?: (data: Record<string, unknown>) => void;
+    /**
+     * Allow navigation to previous steps
+     * @default true
+     */
+    allowBackNavigation?: boolean;
+    /**
+     * Show step numbers
+     * @default true
+     */
+    showStepNumbers?: boolean;
+}
+/**
+ * FormWizardPattern - A complete form wizard pattern combining Stepper and Form
+ *
+ * This pattern solves the common UX problem of multi-step forms with validation.
+ * It combines Stepper for navigation and Form for data collection.
+ *
+ * @example
+ * ```tsx
+ * <FormWizardPattern
+ *   steps={steps}
+ *   onComplete={(data) => console.log(data)}
+ * />
+ * ```
+ */
+export declare function FormWizardPattern({ steps, onComplete, allowBackNavigation, showStepNumbers, }: FormWizardPatternProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/patterns/FormWizardPattern/FormWizardPattern.stories.d.ts

@@ -0,0 +1,11 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { FormWizardPattern } from './FormWizardPattern';
+declare const meta: Meta<typeof FormWizardPattern>;
+export default meta;
+type Story = StoryObj<typeof FormWizardPattern>;
+export declare const Default: Story;
+export declare const WithoutBackNavigation: Story;
+export declare const WithEvents: Story;
+export declare const DefaultState: Story;
+export declare const WithBackNavigationState: Story;
+export declare const WithoutBackNavigationState: Story;

package/dist/ui/patterns/FormWizardPattern/index.d.ts

@@ -0,0 +1 @@
+export { FormWizardPattern, type FormWizardPatternProps, type FormWizardStep } from './FormWizardPattern';

package/dist/ui/patterns/SearchAndFilterPattern/SearchAndFilterPattern.d.ts

@@ -0,0 +1,65 @@
+import React from 'react';
+export interface FilterOption {
+    id: string;
+    label: string;
+    value: unknown;
+}
+export interface FilterConfig {
+    id: string;
+    label: string;
+    type: 'select' | 'multiselect' | 'date' | 'range';
+    options?: FilterOption[];
+    placeholder?: string;
+}
+export interface SearchAndFilterPatternProps<T = unknown> {
+    /**
+     * Items to search and filter
+     */
+    items: T[];
+    /**
+     * Search function - receives search query and item, returns boolean
+     */
+    searchFn?: (query: string, item: T) => boolean;
+    /**
+     * Filter function - receives filter config and item, returns boolean
+     */
+    filterFn?: (filters: Record<string, unknown>, item: T) => boolean;
+    /**
+     * Render function for each item
+     */
+    renderItem: (item: T, index: number) => React.ReactNode;
+    /**
+     * Filter configurations
+     */
+    filters?: FilterConfig[];
+    /**
+     * Search placeholder
+     * @default "Search..."
+     */
+    searchPlaceholder?: string;
+    /**
+     * Empty state message
+     */
+    emptyMessage?: string;
+    /**
+     * Show results count
+     * @default true
+     */
+    showResultsCount?: boolean;
+}
+/**
+ * SearchAndFilterPattern - A complete search and filter pattern
+ *
+ * This pattern solves the common UX problem of searching and filtering lists of items.
+ * It combines SearchInput with filter controls and results display.
+ *
+ * @example
+ * ```tsx
+ * <SearchAndFilterPattern
+ *   items={products}
+ *   searchFn={(query, item) => item.name.includes(query)}
+ *   renderItem={(item) => <ProductCard product={item} />}
+ * />
+ * ```
+ */
+export declare function SearchAndFilterPattern<T = unknown>({ items, searchFn, filterFn, renderItem, filters, searchPlaceholder, emptyMessage, showResultsCount, }: SearchAndFilterPatternProps<T>): import("react/jsx-runtime").JSX.Element;