@birhaus/primitives
Version:
BIRHAUS Primitive Components - Enhanced base UI components with DataTable, FilterBar, BulkActions, and cognitive load reduction
1,619 lines (1,596 loc) • 139 kB
TypeScript
import * as react from 'react';
import react__default, { ReactNode } from 'react';
import * as react_jsx_runtime from 'react/jsx-runtime';
import { LucideIcon } from 'lucide-react';
interface BirhausButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {
label?: string;
labelEs?: string;
labelEn?: string;
variant?: 'primary' | 'secondary' | 'destructive' | 'outline' | 'ghost';
size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
isPrimaryAction?: boolean;
loading?: boolean;
loadingText?: string;
loadingTextEs?: string;
loadingTextEn?: string;
destructive?: boolean;
undoAction?: () => Promise<void>;
undoTimeoutMs?: number;
showSuccessState?: boolean;
successText?: string;
successTextEs?: string;
successTextEn?: string;
describedBy?: string;
describedByEs?: string;
describedByEn?: string;
icon?: ReactNode;
iconPosition?: 'left' | 'right';
fullWidth?: boolean;
trackCognitiveLoad?: boolean;
cognitiveLoadLevel?: 'low' | 'medium' | 'high';
children?: ReactNode;
}
declare const BirhausButton: react.ForwardRefExoticComponent<BirhausButtonProps & react.RefAttributes<HTMLButtonElement>>;
declare function useBirhausButton(): {
loading: boolean;
success: boolean;
executeAction: (action: () => Promise<void>) => Promise<void>;
setLoading: react.Dispatch<react.SetStateAction<boolean>>;
setSuccess: react.Dispatch<react.SetStateAction<boolean>>;
};
interface BirhausBadgeProps extends react.HTMLAttributes<HTMLSpanElement> {
variant?: 'default' | 'success' | 'warning' | 'error' | 'info';
size?: 'sm' | 'md' | 'lg';
}
declare function BirhausBadge({ variant, size, className, children, ...props }: BirhausBadgeProps): react_jsx_runtime.JSX.Element;
interface BirhausInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'prefix' | 'autoSave'> {
label?: string;
labelEs?: string;
labelEn?: string;
description?: string;
descriptionEs?: string;
descriptionEn?: string;
error?: string;
errorEs?: string;
errorEn?: string;
solution?: string;
solutionEs?: string;
solutionEn?: string;
autoSave?: boolean;
autoSaveDelay?: number;
onAutoSave?: (value: string) => Promise<void>;
validateOnChange?: boolean;
validateOnBlur?: boolean;
validationRules?: ValidationRule$1[];
size?: 'sm' | 'md' | 'lg';
variant?: 'default' | 'filled' | 'minimal';
prefix?: ReactNode;
suffix?: ReactNode;
showPasswordToggle?: boolean;
showClearButton?: boolean;
helpText?: string;
helpTextEs?: string;
helpTextEn?: string;
loading?: boolean;
success?: boolean;
fieldPriority?: 'required' | 'optional' | 'progressive';
cognitiveWeight?: number;
}
interface ValidationRule$1 {
test: (value: string) => boolean;
errorEs: string;
errorEn?: string;
solutionEs?: string;
solutionEn?: string;
severity?: 'error' | 'warning' | 'info';
}
declare const BirhausInput: react.ForwardRefExoticComponent<BirhausInputProps & react.RefAttributes<HTMLInputElement>>;
declare const birhausValidationRules: {
required: (fieldName: string) => ValidationRule$1;
email: () => ValidationRule$1;
minLength: (min: number) => ValidationRule$1;
paraguayPhone: () => ValidationRule$1;
ruc: () => ValidationRule$1;
};
interface BirhausSelectOption {
value: string;
label: string;
labelEs?: string;
labelEn?: string;
description?: string;
descriptionEs?: string;
descriptionEn?: string;
disabled?: boolean;
icon?: ReactNode;
group?: string;
}
interface BirhausSelectProps {
label?: string;
labelEs?: string;
labelEn?: string;
description?: string;
descriptionEs?: string;
descriptionEn?: string;
options: BirhausSelectOption[];
value?: string | string[];
defaultValue?: string | string[];
onChange?: (value: string | string[]) => void;
error?: string;
errorEs?: string;
errorEn?: string;
placeholder?: string;
placeholderEs?: string;
placeholderEn?: string;
multiple?: boolean;
maxSelections?: number;
searchable?: boolean;
searchPlaceholder?: string;
searchPlaceholderEs?: string;
searchPlaceholderEn?: string;
size?: 'sm' | 'md' | 'lg';
variant?: 'default' | 'filled' | 'minimal';
helpText?: string;
helpTextEs?: string;
helpTextEn?: string;
disabled?: boolean;
required?: boolean;
loading?: boolean;
cognitiveLoadLevel?: 'low' | 'medium' | 'high';
showCognitiveWarning?: boolean;
clearable?: boolean;
closeOnSelect?: boolean;
className?: string;
id?: string;
}
declare const BirhausSelect: react.ForwardRefExoticComponent<BirhausSelectProps & react.RefAttributes<HTMLButtonElement>>;
declare function useBirhausSelect(): {
value: string | string[];
isOpen: boolean;
handleChange: (newValue: string | string[]) => void;
clear: () => void;
setValue: react.Dispatch<react.SetStateAction<string | string[]>>;
setIsOpen: react.Dispatch<react.SetStateAction<boolean>>;
};
declare function createBirhausOptionGroups(options: BirhausSelectOption[], groupBy: (option: BirhausSelectOption) => string): Record<string, BirhausSelectOption[]>;
interface BirhausCardAction {
id: string;
label: string;
labelEs?: string;
labelEn?: string;
icon?: ReactNode;
onClick: () => void;
variant?: 'primary' | 'secondary' | 'destructive';
disabled?: boolean;
loading?: boolean;
}
interface BirhausCardProps extends React.HTMLAttributes<HTMLDivElement> {
title?: string;
titleEs?: string;
titleEn?: string;
subtitle?: string;
subtitleEs?: string;
subtitleEn?: string;
description?: string;
descriptionEs?: string;
descriptionEn?: string;
children?: ReactNode;
header?: ReactNode;
footer?: ReactNode;
aside?: ReactNode;
primaryAction?: BirhausCardAction;
secondaryActions?: BirhausCardAction[];
collapsible?: boolean;
defaultExpanded?: boolean;
expandedContent?: ReactNode;
status?: 'neutral' | 'success' | 'warning' | 'error' | 'info';
statusMessage?: string;
statusMessageEs?: string;
statusMessageEn?: string;
variant?: 'default' | 'elevated' | 'outlined' | 'minimal';
size?: 'sm' | 'md' | 'lg';
loading?: boolean;
skeleton?: boolean;
lazyLoad?: boolean;
selectable?: boolean;
selected?: boolean;
onSelect?: () => void;
badge?: string | number;
badgeVariant?: 'neutral' | 'success' | 'warning' | 'error';
timestamp?: Date;
author?: string;
category?: string;
informationDensity?: 'low' | 'medium' | 'high';
className?: string;
}
declare const BirhausCard: react.ForwardRefExoticComponent<BirhausCardProps & react.RefAttributes<HTMLDivElement>>;
declare function useBirhausCard(): {
expanded: boolean;
selected: boolean;
loading: boolean;
setExpanded: react.Dispatch<react.SetStateAction<boolean>>;
setSelected: react.Dispatch<react.SetStateAction<boolean>>;
setLoading: react.Dispatch<react.SetStateAction<boolean>>;
toggleExpanded: () => void;
toggleSelected: () => void;
};
declare function createBirhausCardAction(id: string, labelEs: string, onClick: () => void, options?: {
labelEn?: string;
icon?: ReactNode;
variant?: 'primary' | 'secondary' | 'destructive';
disabled?: boolean;
}): BirhausCardAction;
interface BirhausDialogAction {
id: string;
label: string;
labelEs?: string;
labelEn?: string;
onClick: () => void | Promise<void>;
variant?: 'primary' | 'secondary' | 'destructive';
disabled?: boolean;
loading?: boolean;
icon?: ReactNode;
}
interface BirhausUndoConfig {
enabled: boolean;
timeoutMs?: number;
undoAction: () => void | Promise<void>;
messageEs?: string;
messageEn?: string;
labelEs?: string;
labelEn?: string;
}
interface BirhausDialogProps {
open?: boolean;
onOpenChange?: (open: boolean) => void;
title?: string;
titleEs?: string;
titleEn?: string;
description?: string;
descriptionEs?: string;
descriptionEn?: string;
children?: ReactNode;
undoConfig?: BirhausUndoConfig;
variant?: 'default' | 'success' | 'warning' | 'error' | 'info';
primaryAction?: BirhausDialogAction;
secondaryActions?: BirhausDialogAction[];
size?: 'sm' | 'md' | 'lg' | 'xl' | 'full';
position?: 'center' | 'top' | 'bottom';
closeOnOverlayClick?: boolean;
closeOnEscape?: boolean;
persistent?: boolean;
role?: 'dialog' | 'alertdialog';
ariaLabelledBy?: string;
ariaDescribedBy?: string;
className?: string;
overlayClassName?: string;
}
declare const BirhausDialog: react.ForwardRefExoticComponent<BirhausDialogProps & react.RefAttributes<HTMLDivElement>>;
declare function useBirhausDialog(): {
open: boolean;
undoActive: boolean;
openDialog: () => void;
closeDialog: () => void;
activateUndo: () => void;
deactivateUndo: () => void;
setOpen: react.Dispatch<react.SetStateAction<boolean>>;
};
declare function createBirhausDialogAction(id: string, labelEs: string, onClick: () => void | Promise<void>, options?: {
labelEn?: string;
icon?: ReactNode;
variant?: 'primary' | 'secondary' | 'destructive';
disabled?: boolean;
}): BirhausDialogAction;
interface BirhausTableColumn$1<T = any> {
id: string;
header: string;
headerEs?: string;
headerEn?: string;
accessor: keyof T | ((item: T) => any);
sortable?: boolean;
filterable?: boolean;
searchable?: boolean;
cell?: (value: any, item: T) => ReactNode;
width?: string | number;
align?: 'left' | 'center' | 'right';
isCurrency?: boolean;
isPercentage?: boolean;
isDate?: boolean;
priority?: 'high' | 'medium' | 'low';
hideOnMobile?: boolean;
cognitiveWeight?: number;
}
interface BirhausTableProps<T = any> {
data: T[];
columns: BirhausTableColumn$1<T>[];
emptyMessage?: string;
emptyMessageEs?: string;
emptyMessageEn?: string;
loadingMessage?: string;
loadingMessageEs?: string;
loadingMessageEn?: string;
maxVisibleColumns?: number;
showCognitiveWarning?: boolean;
sortable?: boolean;
filterable?: boolean;
searchable?: boolean;
selectable?: boolean;
loading?: boolean;
selectedRows?: Set<string | number>;
onRowSelect?: (id: string | number, selected: boolean) => void;
onRowsSelect?: (ids: (string | number)[], selected: boolean) => void;
pagination?: {
page: number;
pageSize: number;
total: number;
onPageChange: (page: number) => void;
onPageSizeChange: (size: number) => void;
};
sortConfig?: {
key: string;
direction: 'asc' | 'desc';
};
onSort?: (key: string, direction: 'asc' | 'desc') => void;
filters?: Record<string, any>;
onFilter?: (filters: Record<string, any>) => void;
searchValue?: string;
onSearch?: (value: string) => void;
getRowId?: (item: T, index: number) => string | number;
rowActions?: Array<{
id: string;
label: string;
labelEs?: string;
labelEn?: string;
icon?: ReactNode;
onClick: (item: T) => void;
variant?: 'primary' | 'secondary' | 'destructive';
disabled?: (item: T) => boolean;
}>;
variant?: 'default' | 'striped' | 'bordered' | 'minimal';
size?: 'sm' | 'md' | 'lg';
className?: string;
}
declare const BirhausTable: react.ForwardRefExoticComponent<BirhausTableProps<any> & react.RefAttributes<HTMLTableElement>>;
declare function useBirhausTable<T>(initialData?: T[]): {
data: T[];
setData: react.Dispatch<react.SetStateAction<T[]>>;
selectedRows: Set<string | number>;
setSelectedRows: react.Dispatch<react.SetStateAction<Set<string | number>>>;
sortConfig: {
key: string;
direction: "asc" | "desc";
} | undefined;
setSortConfig: react.Dispatch<react.SetStateAction<{
key: string;
direction: "asc" | "desc";
} | undefined>>;
filters: Record<string, any>;
setFilters: react.Dispatch<react.SetStateAction<Record<string, any>>>;
searchValue: string;
setSearchValue: react.Dispatch<react.SetStateAction<string>>;
handleRowSelect: (id: string | number, selected: boolean) => void;
handleRowsSelect: (ids: (string | number)[], selected: boolean) => void;
clearSelection: () => void;
};
interface BirhausCheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
label?: string;
labelEs?: string;
labelEn?: string;
description?: string;
descriptionEs?: string;
descriptionEn?: string;
indeterminate?: boolean;
variant?: 'default' | 'success' | 'warning' | 'error';
size?: 'sm' | 'md' | 'lg';
labelPosition?: 'right' | 'left';
showStateIcon?: boolean;
error?: boolean;
errorMessage?: string;
errorMessageEs?: string;
errorMessageEn?: string;
success?: boolean;
successMessage?: string;
successMessageEs?: string;
successMessageEn?: string;
className?: string;
labelClassName?: string;
}
declare const BirhausCheckbox: react.ForwardRefExoticComponent<BirhausCheckboxProps & react.RefAttributes<HTMLInputElement>>;
interface BirhausSwitchProps extends Omit<BirhausCheckboxProps, 'indeterminate' | 'showStateIcon'> {
size?: 'sm' | 'md' | 'lg';
showLabels?: boolean;
onLabel?: string;
onLabelEs?: string;
onLabelEn?: string;
offLabel?: string;
offLabelEs?: string;
offLabelEn?: string;
}
declare const BirhausSwitch: react.ForwardRefExoticComponent<BirhausSwitchProps & react.RefAttributes<HTMLInputElement>>;
declare function useBirhausCheckbox(initialChecked?: boolean): {
checked: boolean;
setChecked: react.Dispatch<react.SetStateAction<boolean>>;
error: boolean;
setError: react.Dispatch<react.SetStateAction<boolean>>;
success: boolean;
setSuccess: react.Dispatch<react.SetStateAction<boolean>>;
toggle: () => void;
reset: () => void;
};
interface BirhausTabItem {
id: string;
label: string;
labelEs?: string;
labelEn?: string;
content: ReactNode;
disabled?: boolean;
icon?: ReactNode;
badge?: string | number;
cognitiveWeight?: number;
}
interface BirhausTabsProps {
tabs: BirhausTabItem[];
activeTab?: string;
onTabChange?: (tabId: string) => void;
maxVisibleTabs?: number;
showCognitiveWarning?: boolean;
variant?: 'default' | 'pills' | 'underline' | 'bordered';
size?: 'sm' | 'md' | 'lg';
orientation?: 'horizontal' | 'vertical';
activateOnHover?: boolean;
lazy?: boolean;
overflowBehavior?: 'dropdown' | 'scroll' | 'wrap';
contentPadding?: boolean;
className?: string;
tabListClassName?: string;
tabClassName?: string;
contentClassName?: string;
}
declare const BirhausTabs: react.ForwardRefExoticComponent<BirhausTabsProps & react.RefAttributes<HTMLDivElement>>;
interface BirhausTabProps {
id: string;
label: string;
labelEs?: string;
labelEn?: string;
disabled?: boolean;
icon?: ReactNode;
badge?: string | number;
cognitiveWeight?: number;
children: ReactNode;
}
declare const BirhausTab: {
({ children }: BirhausTabProps): react_jsx_runtime.JSX.Element;
displayName: string;
};
declare function useBirhausTabs(initialActiveTab?: string): {
activeTab: string;
setActiveTab: (tabId: string) => void;
tabHistory: string[];
goBack: () => string | null;
reset: (defaultTab: string) => void;
};
declare function createBirhausTabItem(id: string, labelEs: string, content: ReactNode, options?: {
labelEn?: string;
icon?: ReactNode;
badge?: string | number;
disabled?: boolean;
cognitiveWeight?: number;
}): BirhausTabItem;
interface BirhausComboboxOption {
value: string;
label: string;
labelEs?: string;
labelEn?: string;
description?: string;
descriptionEs?: string;
descriptionEn?: string;
disabled?: boolean;
group?: string;
icon?: React.ReactNode;
searchTerms?: string[];
}
interface BirhausComboboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
options: BirhausComboboxOption[];
value?: string;
onValueChange?: (value: string) => void;
placeholder?: string;
placeholderEs?: string;
placeholderEn?: string;
emptyMessage?: string;
emptyMessageEs?: string;
emptyMessageEn?: string;
searchPlaceholder?: string;
searchPlaceholderEs?: string;
searchPlaceholderEn?: string;
maxVisibleOptions?: number;
showCognitiveWarning?: boolean;
searchable?: boolean;
clearable?: boolean;
disabled?: boolean;
loading?: boolean;
filterFunction?: (option: BirhausComboboxOption, search: string) => boolean;
variant?: 'default' | 'success' | 'warning' | 'error';
size?: 'sm' | 'md' | 'lg';
error?: boolean;
errorMessage?: string;
errorMessageEs?: string;
errorMessageEn?: string;
required?: boolean;
dropdownPosition?: 'bottom' | 'top' | 'auto';
className?: string;
dropdownClassName?: string;
}
declare const BirhausCombobox: react.ForwardRefExoticComponent<BirhausComboboxProps & react.RefAttributes<HTMLInputElement>>;
declare function useBirhausCombobox(initialValue?: string): {
value: string;
setValue: react.Dispatch<react.SetStateAction<string>>;
isOpen: boolean;
setIsOpen: react.Dispatch<react.SetStateAction<boolean>>;
searchTerm: string;
setSearchTerm: react.Dispatch<react.SetStateAction<string>>;
reset: () => void;
};
declare function createBirhausComboboxOption(value: string, labelEs: string, options?: {
labelEn?: string;
descriptionEs?: string;
descriptionEn?: string;
disabled?: boolean;
group?: string;
icon?: React.ReactNode;
searchTerms?: string[];
}): BirhausComboboxOption;
interface BirhausCalendarProps {
label?: string;
labelEs?: string;
labelEn?: string;
value?: Date | null;
defaultValue?: Date | null;
onChange?: (date: Date | null) => void;
minDate?: Date;
maxDate?: Date;
disabledDates?: Date[];
disabledDaysOfWeek?: number[];
showTodayButton?: boolean;
showClearButton?: boolean;
showMonthYearSelector?: boolean;
enableUndo?: boolean;
undoTimeoutMs?: number;
onUndo?: (previousDate: Date | null) => void;
size?: 'sm' | 'md' | 'lg';
variant?: 'default' | 'minimal' | 'inline';
describedBy?: string;
describedByEs?: string;
describedByEn?: string;
error?: string;
errorEs?: string;
errorEn?: string;
dateFormat?: 'DD/MM/YYYY' | 'MM/DD/YYYY' | 'YYYY-MM-DD';
locale?: 'es' | 'en';
firstDayOfWeek?: 0 | 1;
placeholder?: string;
placeholderEs?: string;
placeholderEn?: string;
disabled?: boolean;
required?: boolean;
cognitiveWeight?: number;
trackInteraction?: boolean;
onFocus?: () => void;
onBlur?: () => void;
onMonthChange?: (month: number, year: number) => void;
onYearChange?: (year: number) => void;
}
declare const BirhausCalendar: react.ForwardRefExoticComponent<BirhausCalendarProps & react.RefAttributes<HTMLDivElement>>;
declare const useBirhausCalendar: (initialDate?: Date | null) => {
selectedDate: Date | null;
selectDate: (date: Date | null) => void;
clearDate: () => void;
undoLastSelection: () => Date | null;
canUndo: boolean;
undoHistory: Date[];
};
declare const createBirhausDateRange: (start: Date, end: Date) => Date[];
declare const getBirhausWeekdays: (exclude?: number[]) => number[];
declare const getBirhausWeekends: () => number[];
interface BirhausTextareaProps extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'autoSave'> {
label?: string;
labelEs?: string;
labelEn?: string;
description?: string;
descriptionEs?: string;
descriptionEn?: string;
error?: string;
errorEs?: string;
errorEn?: string;
solution?: string;
solutionEs?: string;
solutionEn?: string;
autoSave?: boolean;
autoSaveDelay?: number;
onAutoSave?: (value: string) => Promise<void>;
validateOnChange?: boolean;
validateOnBlur?: boolean;
validationRules?: ValidationRule[];
size?: 'sm' | 'md' | 'lg';
variant?: 'default' | 'filled' | 'minimal';
maxLength?: number;
showCharacterCount?: boolean;
characterCountThreshold?: number;
autoResize?: boolean;
minRows?: number;
maxRows?: number;
enableUndo?: boolean;
undoTimeoutMs?: number;
undoThreshold?: number;
helpText?: string;
helpTextEs?: string;
helpTextEn?: string;
loading?: boolean;
success?: boolean;
fieldPriority?: 'required' | 'optional' | 'progressive';
cognitiveWeight?: number;
locale?: 'es' | 'en';
}
interface ValidationRule {
test: (value: string) => boolean;
errorEs: string;
errorEn: string;
solution?: string;
solutionEs?: string;
solutionEn?: string;
}
declare const BirhausTextarea: react.ForwardRefExoticComponent<BirhausTextareaProps & react.RefAttributes<HTMLTextAreaElement>>;
declare const birhausTextareaValidationRules: {
required: () => ValidationRule;
minLength: (min: number) => ValidationRule;
maxWords: (max: number) => ValidationRule;
noSpecialChars: () => ValidationRule;
};
declare const useBirhausTextarea: (initialValue?: string) => {
value: string;
setValue: (newValue: string) => void;
undo: () => string | null;
redo: () => string | null;
canUndo: boolean;
canRedo: boolean;
wordCount: number;
characterCount: number;
};
declare const CURRENCIES: {
readonly PYG: {
readonly symbol: "₲";
readonly name: "Guaraníes";
readonly nameEs: "Guaraníes";
readonly nameEn: "Paraguayan Guaraní";
readonly decimals: 0;
readonly thousandsSeparator: ".";
readonly decimalSeparator: ",";
readonly symbolPosition: "before";
};
readonly USD: {
readonly symbol: "$";
readonly name: "Dólares";
readonly nameEs: "Dólares";
readonly nameEn: "US Dollars";
readonly decimals: 2;
readonly thousandsSeparator: ",";
readonly decimalSeparator: ".";
readonly symbolPosition: "before";
};
};
type CurrencyCode = keyof typeof CURRENCIES;
interface BirhausCurrencyInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange' | 'type' | 'defaultValue' | 'size' | 'autoSave'> {
label?: string;
labelEs?: string;
labelEn?: string;
description?: string;
descriptionEs?: string;
descriptionEn?: string;
error?: string;
errorEs?: string;
errorEn?: string;
value?: number | null;
defaultValue?: number | null;
onChange?: (value: number | null, currency: CurrencyCode) => void;
currency?: CurrencyCode;
defaultCurrency?: CurrencyCode;
allowCurrencySwitch?: boolean;
showCurrencyName?: boolean;
exchangeRate?: number;
showConversion?: boolean;
onCurrencyChange?: (currency: CurrencyCode) => void;
minValue?: number;
maxValue?: number;
requiredMessage?: string;
requiredMessageEs?: string;
requiredMessageEn?: string;
autoSave?: boolean;
autoSaveDelay?: number;
onAutoSave?: (value: number | null, currency: CurrencyCode) => Promise<void>;
size?: 'sm' | 'md' | 'lg';
variant?: 'default' | 'filled' | 'minimal';
enableUndo?: boolean;
undoTimeoutMs?: number;
undoThreshold?: number;
helpText?: string;
helpTextEs?: string;
helpTextEn?: string;
loading?: boolean;
success?: boolean;
fieldPriority?: 'required' | 'optional' | 'progressive';
locale?: 'es' | 'en';
}
declare const BirhausCurrencyInput: react.ForwardRefExoticComponent<BirhausCurrencyInputProps & react.RefAttributes<HTMLInputElement>>;
declare const useBirhausCurrency: (initialValue?: number | null, initialCurrency?: CurrencyCode) => {
amount: number | null;
currency: "PYG" | "USD";
exchangeRate: number;
setExchangeRate: react.Dispatch<react.SetStateAction<number>>;
convert: (value: number, fromCurrency: CurrencyCode, toCurrency: CurrencyCode) => number;
getFormattedAmount: (currencyCode?: CurrencyCode) => string;
updateAmount: (newAmount: number | null, newCurrency?: CurrencyCode) => void;
amountInPYG: number | null;
amountInUSD: number | null;
};
declare const paraguayanCurrencyUtils: {
formatPYG: (amount: number) => string;
formatUSD: (amount: number) => string;
usdToPyg: (usdAmount: number, rate?: number) => number;
pygToUsd: (pygAmount: number, rate?: number) => number;
validateRUC: (ruc: string) => boolean;
calculateIVA: (amount: number) => {
baseAmount: number;
ivaAmount: number;
totalAmount: number;
};
};
type ToastVariant = 'success' | 'error' | 'warning' | 'info';
interface BirhausToastData {
id: string;
variant: ToastVariant;
title?: string;
titleEs?: string;
titleEn?: string;
message?: string;
messageEs?: string;
messageEn?: string;
duration?: number;
persistent?: boolean;
undoAction?: () => void | Promise<void>;
undoLabel?: string;
undoLabelEs?: string;
undoLabelEn?: string;
action?: {
label: string;
labelEs?: string;
labelEn?: string;
onClick: () => void;
};
onDismiss?: (id: string) => void;
locale?: 'es' | 'en';
}
interface BirhausToastProviderProps {
children: ReactNode;
maxToasts?: number;
defaultLocale?: 'es' | 'en';
position?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' | 'top-center' | 'bottom-center';
}
declare const BirhausToastProvider: ({ children, maxToasts, defaultLocale, position }: BirhausToastProviderProps) => react_jsx_runtime.JSX.Element;
declare const useBirhausToast: () => {
addToast: (toast: Omit<BirhausToastData, "id">) => string;
dismissToast: (id: string) => void;
clearAllToasts: () => void;
showSuccess: (message: string, options?: Partial<Omit<BirhausToastData, "id" | "variant" | "message">>) => string;
showError: (message: string, options?: Partial<Omit<BirhausToastData, "id" | "variant" | "message">>) => string;
showWarning: (message: string, options?: Partial<Omit<BirhausToastData, "id" | "variant" | "message">>) => string;
showInfo: (message: string, options?: Partial<Omit<BirhausToastData, "id" | "variant" | "message">>) => string;
showSaved: (entity?: string, options?: Partial<Omit<BirhausToastData, "id" | "variant" | "message">>) => string;
showDeleted: (entity?: string, undoAction?: () => void, options?: Partial<Omit<BirhausToastData, "id" | "variant" | "message">>) => string;
showPaymentSuccess: (amount: string, options?: Partial<Omit<BirhausToastData, "id" | "variant" | "message">>) => string;
locale: "es" | "en";
toasts: BirhausToastData[];
};
interface BirhausToastStandaloneProps extends Omit<BirhausToastData, 'id'> {
visible?: boolean;
onClose?: () => void;
}
declare const BirhausToastStandalone: react.ForwardRefExoticComponent<BirhausToastStandaloneProps & react.RefAttributes<HTMLDivElement>>;
declare const birhausToastMessages: {
saved: {
es: string;
en: string;
};
deleted: {
es: string;
en: string;
};
updated: {
es: string;
en: string;
};
created: {
es: string;
en: string;
};
memberAdded: {
es: string;
en: string;
};
memberUpdated: {
es: string;
en: string;
};
memberDeleted: {
es: string;
en: string;
};
donationRecorded: {
es: string;
en: string;
};
paymentProcessed: {
es: string;
en: string;
};
receiptGenerated: {
es: string;
en: string;
};
saveError: {
es: string;
en: string;
};
deleteError: {
es: string;
en: string;
};
networkError: {
es: string;
en: string;
};
validationError: {
es: string;
en: string;
};
};
type AlertVariant = 'success' | 'error' | 'warning' | 'info';
interface BirhausAlertAction {
label: string;
labelEs?: string;
labelEn?: string;
onClick: () => void | Promise<void>;
variant?: 'primary' | 'secondary';
loading?: boolean;
}
interface BirhausAlertProps {
title?: string;
titleEs?: string;
titleEn?: string;
message?: string;
messageEs?: string;
messageEn?: string;
details?: string;
detailsEs?: string;
detailsEn?: string;
collapsible?: boolean;
defaultExpanded?: boolean;
variant?: AlertVariant;
size?: 'sm' | 'md' | 'lg';
dismissible?: boolean;
dismissKey?: string;
onDismiss?: () => void;
autoHide?: boolean;
autoHideDelay?: number;
actions?: BirhausAlertAction[];
showIcon?: boolean;
customIcon?: ReactNode;
role?: 'alert' | 'alertdialog' | 'status';
locale?: 'es' | 'en';
className?: string;
children?: ReactNode;
}
declare const BirhausAlert: react.ForwardRefExoticComponent<BirhausAlertProps & react.RefAttributes<HTMLDivElement>>;
declare const useBirhausAlert: (dismissKey?: string) => {
isVisible: boolean;
dismiss: () => void;
reset: () => void;
wasDismissed: boolean;
};
declare const birhausAlertPresets: {
memberSaved: {
variant: "success";
titleEs: string;
titleEn: string;
messageEs: string;
messageEn: string;
};
donationRecorded: {
variant: "success";
titleEs: string;
titleEn: string;
messageEs: string;
messageEn: string;
};
paymentProcessed: {
variant: "success";
titleEs: string;
titleEn: string;
messageEs: string;
messageEn: string;
};
saveError: {
variant: "error";
titleEs: string;
titleEn: string;
messageEs: string;
messageEn: string;
dismissible: boolean;
};
validationError: {
variant: "error";
titleEs: string;
titleEn: string;
messageEs: string;
messageEn: string;
dismissible: boolean;
};
networkError: {
variant: "error";
titleEs: string;
titleEn: string;
messageEs: string;
messageEn: string;
dismissible: boolean;
};
unsavedChanges: {
variant: "warning";
titleEs: string;
titleEn: string;
messageEs: string;
messageEn: string;
actions: ({
label: string;
labelEs: string;
labelEn: string;
variant: "primary";
onClick: () => void;
} | {
label: string;
labelEs: string;
labelEn: string;
variant: "secondary";
onClick: () => void;
})[];
};
deleteConfirmation: {
variant: "warning";
titleEs: string;
titleEn: string;
messageEs: string;
messageEn: string;
actions: ({
label: string;
labelEs: string;
labelEn: string;
variant: "primary";
onClick: () => void;
} | {
label: string;
labelEs: string;
labelEn: string;
variant: "secondary";
onClick: () => void;
})[];
};
backupReminder: {
variant: "info";
titleEs: string;
titleEn: string;
messageEs: string;
messageEn: string;
detailsEs: string;
detailsEn: string;
collapsible: boolean;
dismissible: boolean;
dismissKey: string;
};
updateAvailable: {
variant: "info";
titleEs: string;
titleEn: string;
messageEs: string;
messageEn: string;
actions: ({
label: string;
labelEs: string;
labelEn: string;
variant: "primary";
onClick: () => void;
} | {
label: string;
labelEs: string;
labelEn: string;
variant: "secondary";
onClick: () => void;
})[];
};
};
interface BirhausEmptyStateAction {
label: string;
labelEs?: string;
labelEn?: string;
onClick: () => void | Promise<void>;
variant?: 'primary' | 'secondary';
icon?: ReactNode;
loading?: boolean;
}
interface BirhausEmptyStateProps {
title?: string;
titleEs?: string;
titleEn?: string;
description?: string;
descriptionEs?: string;
descriptionEn?: string;
helpText?: string;
helpTextEs?: string;
helpTextEn?: string;
showHelpText?: boolean;
icon?: ReactNode;
illustration?: ReactNode;
size?: 'sm' | 'md' | 'lg';
actions?: BirhausEmptyStateAction[];
scenario?: 'members' | 'donations' | 'events' | 'search' | 'reports' | 'general';
loading?: boolean;
error?: boolean;
role?: string;
locale?: 'es' | 'en';
className?: string;
children?: ReactNode;
}
declare const BirhausEmptyState: react.ForwardRefExoticComponent<BirhausEmptyStateProps & react.RefAttributes<HTMLDivElement>>;
declare const useBirhausEmptyState: (data: any[] | null | undefined, loading?: boolean, error?: Error | null) => {
isEmpty: boolean;
hasError: boolean;
isLoading: boolean;
showEmptyState: boolean;
errorMessage: string | undefined;
};
declare const birhausEmptyStatePresets: {
noMembers: {
scenario: "members";
actions: {
labelEs: string;
labelEn: string;
variant: "primary";
icon: react_jsx_runtime.JSX.Element;
onClick: () => void;
}[];
};
filteredMembers: {
scenario: "search";
titleEs: string;
titleEn: string;
descriptionEs: string;
descriptionEn: string;
actions: {
labelEs: string;
labelEn: string;
variant: "secondary";
icon: react_jsx_runtime.JSX.Element;
onClick: () => void;
}[];
};
noDonations: {
scenario: "donations";
actions: {
labelEs: string;
labelEn: string;
variant: "primary";
icon: react_jsx_runtime.JSX.Element;
onClick: () => void;
}[];
};
monthlyDonations: {
scenario: "reports";
titleEs: string;
titleEn: string;
descriptionEs: string;
descriptionEn: string;
actions: {
labelEs: string;
labelEn: string;
variant: "secondary";
icon: react_jsx_runtime.JSX.Element;
onClick: () => void;
}[];
};
noEvents: {
scenario: "events";
actions: {
labelEs: string;
labelEn: string;
variant: "primary";
icon: react_jsx_runtime.JSX.Element;
onClick: () => void;
}[];
};
upcomingEvents: {
scenario: "events";
titleEs: string;
titleEn: string;
descriptionEs: string;
descriptionEn: string;
actions: {
labelEs: string;
labelEn: string;
variant: "primary";
icon: react_jsx_runtime.JSX.Element;
onClick: () => void;
}[];
};
noReportData: {
scenario: "reports";
titleEs: string;
titleEn: string;
descriptionEs: string;
descriptionEn: string;
helpTextEs: string;
helpTextEn: string;
actions: {
labelEs: string;
labelEn: string;
variant: "secondary";
icon: react_jsx_runtime.JSX.Element;
onClick: () => void;
}[];
};
};
interface DateRange {
start: Date | null;
end: Date | null;
}
interface PresetRange {
id: string;
labelEs: string;
labelEn: string;
getValue: () => DateRange;
isDefault?: boolean;
}
interface BirhausDateRangePickerProps {
label?: string;
labelEs?: string;
labelEn?: string;
description?: string;
descriptionEs?: string;
descriptionEn?: string;
value?: DateRange;
defaultValue?: DateRange;
onChange?: (range: DateRange) => void;
error?: string;
errorEs?: string;
errorEn?: string;
minDate?: Date;
maxDate?: Date;
maxRangeDays?: number;
presets?: PresetRange[];
showPresets?: boolean;
enableCustomRange?: boolean;
enableUndo?: boolean;
undoTimeoutMs?: number;
disabled?: boolean;
required?: boolean;
placeholder?: string;
autoApply?: boolean;
size?: 'sm' | 'md' | 'lg';
variant?: 'default' | 'minimal';
locale?: 'es' | 'en';
reportType?: 'financial' | 'membership' | 'events' | 'custom';
}
declare const BirhausDateRangePicker: react.ForwardRefExoticComponent<BirhausDateRangePickerProps & react.RefAttributes<HTMLDivElement>>;
declare const useBirhausDateRange: (initialRange?: DateRange) => {
range: DateRange;
setRange: (newRange: DateRange) => void;
undo: () => DateRange | null;
redo: () => DateRange | null;
canUndo: boolean;
canRedo: boolean;
daysBetween: number;
isValid: boolean | null;
};
declare const ipuAdminDatePresets: {
financial: () => PresetRange[];
events: () => PresetRange[];
};
interface SearchSuggestion {
id: string;
text: string;
category?: SearchCategory;
icon?: React.ReactNode;
metadata?: string;
}
interface SearchCategory {
id: string;
labelEs: string;
labelEn: string;
icon: React.ReactNode;
color: string;
}
interface BirhausSearchInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
label?: string;
labelEs?: string;
labelEn?: string;
placeholderEs?: string;
placeholderEn?: string;
value?: string;
defaultValue?: string;
onSearch?: (query: string) => void;
onSuggestionSelect?: (suggestion: SearchSuggestion) => void;
suggestions?: SearchSuggestion[];
loadingSuggestions?: boolean;
maxSuggestions?: number;
categories?: SearchCategory[];
selectedCategory?: string;
onCategoryChange?: (categoryId: string) => void;
enableRecentSearches?: boolean;
maxRecentSearches?: number;
recentSearches?: string[];
onRecentSearchesChange?: (searches: string[]) => void;
enableUndo?: boolean;
undoTimeoutMs?: number;
debounceMs?: number;
minQueryLength?: number;
disabled?: boolean;
required?: boolean;
size?: 'sm' | 'md' | 'lg';
variant?: 'default' | 'minimal' | 'filled';
showIcon?: boolean;
locale?: 'es' | 'en';
searchScope?: 'all' | 'members' | 'donations' | 'events' | 'reports';
}
declare const BirhausSearchInput: react.ForwardRefExoticComponent<BirhausSearchInputProps & react.RefAttributes<HTMLInputElement>>;
declare const useBirhausSearch: (initialQuery?: string) => {
query: string;
setQuery: react.Dispatch<react.SetStateAction<string>>;
recentSearches: string[];
setRecentSearches: react.Dispatch<react.SetStateAction<string[]>>;
addToHistory: (searchQuery: string) => void;
clearHistory: () => void;
isLoading: boolean;
setIsLoading: react.Dispatch<react.SetStateAction<boolean>>;
suggestions: SearchSuggestion[];
setSuggestions: react.Dispatch<react.SetStateAction<SearchSuggestion[]>>;
performSearch: (searchQuery: string, searchFn?: (query: string) => Promise<SearchSuggestion[]>) => Promise<void>;
};
declare const ipuAdminSearchCategories: SearchCategory[];
declare const createIPUAdminSuggestion: (id: string, text: string, category: SearchCategory, metadata?: string) => SearchSuggestion;
interface FileItem {
id: string;
file: File;
preview?: string;
progress: number;
status: 'pending' | 'uploading' | 'completed' | 'error';
error?: string;
}
interface BirhausFileUploadProps {
label?: string;
labelEs?: string;
labelEn?: string;
description?: string;
descriptionEs?: string;
descriptionEn?: string;
files?: FileItem[];
defaultFiles?: FileItem[];
onChange?: (files: FileItem[]) => void;
onUpload?: (file: File) => Promise<string>;
onRemove?: (fileId: string) => Promise<void>;
error?: string;
errorEs?: string;
errorEn?: string;
acceptedTypes?: string[];
maxFileSize?: number;
maxFiles?: number;
uploadType?: 'receipts' | 'reports' | 'photos' | 'documents' | 'custom';
enableUndo?: boolean;
undoTimeoutMs?: number;
disabled?: boolean;
required?: boolean;
variant?: 'default' | 'compact' | 'minimal';
size?: 'sm' | 'md' | 'lg';
enableDragDrop?: boolean;
locale?: 'es' | 'en';
showPreview?: boolean;
previewSize?: 'sm' | 'md' | 'lg';
}
declare const BirhausFileUpload: react.ForwardRefExoticComponent<BirhausFileUploadProps & react.RefAttributes<HTMLDivElement>>;
declare const useBirhausFileUpload: (maxFiles?: number) => {
files: FileItem[];
setFiles: react.Dispatch<react.SetStateAction<FileItem[]>>;
addFiles: (newFiles: FileItem[]) => void;
removeFile: (fileId: string) => void;
updateFileStatus: (fileId: string, updates: Partial<FileItem>) => void;
uploadAll: (uploadFn: (file: File) => Promise<string>) => Promise<void>;
isUploading: boolean;
hasErrors: boolean;
allCompleted: boolean;
totalProgress: number;
};
interface PaginationInfo$1 {
currentPage: number;
totalPages: number;
totalItems: number;
itemsPerPage: number;
startItem: number;
endItem: number;
}
interface BirhausPaginationProps {
label?: string;
labelEs?: string;
labelEn?: string;
currentPage: number;
totalItems: number;
itemsPerPage: number;
onPageChange: (page: number) => void;
pageSizeOptions?: number[];
onPageSizeChange?: (pageSize: number) => void;
showPageSizeSelector?: boolean;
maxVisiblePages?: number;
showQuickJump?: boolean;
showFirstLast?: boolean;
disabled?: boolean;
variant?: 'default' | 'minimal' | 'compact';
size?: 'sm' | 'md' | 'lg';
previousLabel?: string;
nextLabel?: string;
firstLabel?: string;
lastLabel?: string;
ofLabel?: string;
itemsLabel?: string;
locale?: 'es' | 'en';
mobileVariant?: 'compact' | 'minimal' | 'hidden';
showItemsInfo?: boolean;
showQuickActions?: boolean;
}
declare const BirhausPagination: react.ForwardRefExoticComponent<BirhausPaginationProps & react.RefAttributes<HTMLDivElement>>;
declare const useBirhausPagination: (totalItems: number, initialPageSize?: number) => {
currentPage: number;
pageSize: number;
totalPages: number;
startIndex: number;
endIndex: number;
handlePageChange: (page: number) => void;
handlePageSizeChange: (newPageSize: number) => void;
reset: () => void;
hasNextPage: boolean;
hasPreviousPage: boolean;
};
declare const ipuAdminPaginationConfig: {
members: {
defaultPageSize: number;
pageSizeOptions: number[];
showQuickJump: boolean;
};
donations: {
defaultPageSize: number;
pageSizeOptions: number[];
showQuickJump: boolean;
};
events: {
defaultPageSize: number;
pageSizeOptions: number[];
showQuickJump: boolean;
};
reports: {
defaultPageSize: number;
pageSizeOptions: number[];
showQuickJump: boolean;
};
};
interface CheckboxOption {
id: string;
value: string;
labelEs: string;
labelEn: string;
description?: string;
descriptionEs?: string;
descriptionEn?: string;
disabled?: boolean;
icon?: React.ReactNode;
category?: string;
}
interface CheckboxCategory {
id: string;
labelEs: string;
labelEn: string;
description?: string;
descriptionEs?: string;
descriptionEn?: string;
icon?: React.ReactNode;
color?: string;
}
interface BirhausCheckboxGroupProps {
label?: string;
labelEs?: string;
labelEn?: string;
description?: string;
descriptionEs?: string;
descriptionEn?: string;
options: CheckboxOption[];
value?: string[];
defaultValue?: string[];
onChange?: (values: string[]) => void;
error?: string;
errorEs?: string;
errorEn?: string;
categories?: CheckboxCategory[];
showCategories?: boolean;
maxItemsPerCategory?: number;
disabled?: boolean;
required?: boolean;
showSelectAll?: boolean;
selectAllLabelEs?: string;
selectAllLabelEn?: string;
variant?: 'default' | 'cards' | 'minimal';
size?: 'sm' | 'md' | 'lg';
layout?: 'vertical' | 'horizontal' | 'grid';
minSelections?: number;
maxSelections?: number;
locale?: 'es' | 'en';
presetType?: 'permissions' | 'ministries' | 'roles' | 'custom';
}
declare const BirhausCheckboxGroup: react.ForwardRefExoticComponent<BirhausCheckboxGroupProps & react.RefAttributes<HTMLDivElement>>;
declare const useBirhausCheckboxGroup: (options: CheckboxOption[], initialValues?: string[]) => {
selectedValues: string[];
setSelectedValues: react.Dispatch<react.SetStateAction<string[]>>;
selectAll: () => void;
deselectAll: () => void;
toggleOption: (value: string) => void;
isSelected: (value: string) => boolean;
getSelectedOptions: () => CheckboxOption[];
selectedCount: number;
allSelected: boolean;
noneSelected: boolean;
};
declare const ipuAdminCheckboxOptions: {
permissions: () => CheckboxOption[];
ministries: () => CheckboxOption[];
};
interface ProgressMilestone {
id: string;
value: number;
labelEs: string;
labelEn: string;
description?: string;
descriptionEs?: string;
descriptionEn?: string;
icon?: React.ReactNode;
color?: string;
reached?: boolean;
}
interface ProgressMetrics {
current: number;
target: number;
percentage: number;
remaining: number;
timeElapsed?: number;
timeRemaining?: number;
averagePerDay?: number;
}
interface BirhausProgressProps {
label?: string;
labelEs?: string;
labelEn?: string;
description?: string;
descriptionEs?: string;
descriptionEn?: string;
current: number;
target: number;
unit?: string;
type?: 'linear' | 'circular' | 'stepped' | 'radial';
variant?: 'default' | 'success' | 'warning' | 'error' | 'gradient';
milestones?: ProgressMilestone[];
showMilestones?: boolean;
startDate?: Date;
endDate?: Date;
showTimeMetrics?: boolean;
size?: 'sm' | 'md' | 'lg' | 'xl';
showPercentage?: boolean;
showValues?: boolean;
showAnimation?: boolean;
animationDuration?: number;
colorThresholds?: {
low: number;
medium: number;
high: number;
};
ariaLabel?: string;
ariaLabelEs?: string;
ariaLabelEn?: string;
locale?: 'es' | 'en';
progressType?: 'donation_goal' | 'membership_goal' | 'event_capacity' | 'fundraising' | 'custom';
campaignName?: string;
onMilestoneReached?: (milestone: ProgressMilestone) => void;
onTargetReached?: () => void;
}
declare const BirhausProgress: react.ForwardRefExoticComponent<BirhausProgressProps & react.RefAttributes<HTMLDivElement>>;
declare const useBirhausProgress: (target: number, initialValue?: number) => {
current: number;
setCurrent: (value: number) => void;
increment: (amount: number) => void;
decrement: (amount: number) => void;
reset: () => void;
percentage: number;
remaining: number;
isComplete: boolean;
milestones: ProgressMilestone[];
setMilestones: react.Dispatch<react.SetStateAction<ProgressMilestone[]>>;
};
declare const ipuAdminProgressPresets: {
donationGoal: (target: number, currency?: string) => {
type: "linear";
progressType: "donation_goal";
unit: string;
showTimeMetrics: boolean;
showMilestones: boolean;
colorThresholds: {
low: number;
medium: number;
high: number;
};
};
membershipGoal: (target: number, locale?: string) => {
type: "circular";
progressType: "membership_goal";
unit: string;
showMilestones: boolean;
colorThresholds: {
low: number;
medium: number;
high: number;
};
};
eventCapacity: (target: number, locale?: string) => {
type: "linear";
progressType: "event_capacity";
unit: string;
showMilestones: boolean;
showTimeMetrics: boolean;
colorThresholds: {
low: number;
medium: number;
high: number;
};
};
};
interface RadioOption {
id: string;
value: string;
labelEs: string;
labelEn: string;
description?: string;
descriptionEs?: string;
descriptionEn?: string;
disabled?: boolean;
icon?: React.ReactNode;
badge?: string;
badgeEs?: string;
badgeEn?: string;
recommended?: boolean;
}
interface BirhausRadioGroupProps {
label?: string;
labelEs?: string;
labelEn?: string;
description?: string;
descriptionEs?: string;
descriptionEn?: string;
options: RadioOption[];
value?: string;
defaultValue?: string;
onChange?: (value: string) => void;
name: string;
error?: string;
errorEs?: string;
errorEn?: string;
disabled?: boolean;
required?: boolean;
variant?: 'default' | 'cards' | 'minimal' | 'buttons';
size?: 'sm' | 'md' | 'lg';
layout?: 'vertica