@anthonybir/birhaus-primitives

import * as react from 'react'; import { ReactNode } from 'react'; import * as react_jsx_runtime from 'react/jsx-runtime'; 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 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[]; 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 { 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; email: () => ValidationRule; minLength: (min: number) => ValidationRule; paraguayPhone: () => ValidationRule; ruc: () => ValidationRule; }; 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<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<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; /** * BIRHAUS Performance Budgets * * These constants define the performance and cognitive load limits * that all BIRHAUS components must adhere to. */ declare const BIRHAUS_PERFORMANCE: { /** * Bundle and asset size limits (in bytes) */ readonly BUDGETS: { readonly MAX_BUNDLE_SIZE: 200000; readonly MAX_COMPONENT_SIZE: 50000; readonly MAX_THEME_SIZE: 25000; readonly MAX_ICON_SIZE: 2000; readonly MAX_IMAGE_SIZE: 100000; readonly MAX_FONT_SIZE: 50000; }; /** * Core Web Vitals and performance metrics */ readonly WEB_VITALS: { readonly MAX_TTI: 2000; readonly MAX_FCP: 1000; readonly MAX_LCP: 2500; readonly MAX_CLS: 0.1; readonly MAX_INP: 200; readonly MAX_TBT: 300; readonly MIN_FID: 100; }; /** * Cognitive load and UX performance limits */ readonly COGNITIVE: { readonly MAX_ANIMATION_DURATION: 300; readonly MIN_ANIMATION_DURATION: 150; readonly MAX_TRANSITION_DURATION: 200; readonly MIN_TOUCH_TARGET: 44; readonly MIN_CONTRAST_RATIO: 4.5; readonly MAX_SIMULTANEOUS_ANIMATIONS: 2; readonly MAX_MODAL_STACK: 2; readonly MAX_TOAST_STACK: 3; }; /** * Network and loading performance */ readonly NETWORK: { readonly MAX_API_RESPONSE_TIME: 1000; readonly MAX_CONCURRENT_REQUESTS: 6; readonly MAX_RETRY_ATTEMPTS: 3; readonly CACHE_TTL: 300000; readonly OFFLINE_CACHE_SIZE: 50000000; }; /** * Memory and resource usage */ readonly MEMORY: { readonly MAX_DOM_NODES: 1500; readonly MAX_EVENT_LISTENERS: 100; readonly MAX_COMPONENT_INSTANCES: 50; readonly MAX_STATE_SIZE: 1000000; readonly MEMORY_LEAK_THRESHOLD: 10000000; }; /** * Accessibility performance */ readonly ACCESSIBILITY: { readonly MAX_TAB_STOPS: 20; readonly MIN_FOCUS_INDICATOR: 2; readonly MAX_HEADING_LEVELS: 6; readonly MIN_COLOR_CONTRAST: 4.5; readonly MIN_COLOR_CONTRAST_LARGE: 3; readonly MAX_ALT_TEXT_LENGTH: 125; }; }; /** * Lighthouse scoring weights for Birhaus Score calculation */ declare const BIRHAUS_SCORING: { readonly WEIGHTS: { readonly PERFORMANCE: 0.4; readonly ACCESSIBILITY: 0.3; readonly COGNITIVE_LOAD: 0.2; readonly SPANISH_COVERAGE: 0.1; }; readonly PENALTIES: { readonly CONFIRMATION_DIALOG: -10; readonly MILLER_LAW_VIOLATION: -5; readonly MISSING_SPANISH_LABEL: -2; readonly ACCESSIBILITY_VIOLATION: -3; readonly PERFORMANCE_BUDGET_EXCEEDED: -5; }; readonly BONUSES: { readonly UNDO_PATTERN_IMPLEMENTED: 5; readonly PROGRESSIVE_DISCLOSURE: 3; readonly SPANISH_FIRST_DESIGN: 2; readonly WCAG_AAA_COMPLIANCE: 5; readonly PERFORMANCE_EXCELLENCE: 3; }; }; /** * Type definitions for performance monitoring */ interface PerformanceMetrics { bundleSize: number; componentSize: number; ttiduration: number; fcp: number; lcp: number; cls: number; inp: number; domNodes: number; memoryUsage: number; apiResponseTime: number; accessibilityScore: number; } interface CognitiveLoadMetrics { navigationItems: number; formFields: number; selectOptions: number; modalStack: number; confirmationDialogs: number; undoPatterns: number; millerLawViolations: number; } interface BirhausScore { total: number; performance: number; accessibility: number; cognitiveLoad: number; spanishCoverage: number; violations: string[]; recommendations: string[]; timestamp: Date; } /** * Default Birhaus performance configuration */ declare const DEFAULT_BIRHAUS_CONFIG: { readonly strictMode: true; readonly cognitiveLoadTracking: true; readonly performanceBudgets: true; readonly accessibilityValidation: true; readonly spanishFirst: true; readonly undoOverConfirm: true; readonly millerLawEnforcement: true; readonly progressiveDisclosure: true; }; /** * Environment-specific configurations */ declare const BIRHAUS_ENV_CONFIG: { readonly development: { readonly strictMode: true; readonly showWarnings: true; readonly detailedLogging: true; readonly performanceMonitoring: true; readonly cognitiveLoadTracking: true; readonly performanceBudgets: true; readonly accessibilityValidation: true; readonly spanishFirst: true; readonly undoOverConfirm: true; readonly millerLawEnforcement: true; readonly progressiveDisclosure: true; }; readonly production: { readonly strictMode: false; readonly showWarnings: false; readonly detailedLogging: false; readonly performanceMonitoring: true; readonly analyticsEnabled: true; readonly cognitiveLoadTracking: true; readonly performanceBudgets: true; readonly accessibilityValidation: true; readonly spanishFirst: true; readonly undoOverConfirm: true; readonly millerLawEnforcement: true; readonly progressiveDisclosure: true; }; readonly testing: { readonly strictMode: true; readonly showWarnings: false; readonly detailedLogging: false; readonly performanceMonitoring: false; readonly cognitiveLoadTracking: true; readonly performanceBudgets: true; readonly accessibilityValidation: true; readonly spanishFirst: true; readonly undoOverConfirm: true; readonly millerLawEnforcement: true; readonly progressiveDisclosure: true; }; }; export { BIRHAUS_ENV_CONFIG, BIRHAUS_PERFORMANCE, BIRHAUS_SCORING, BirhausButton, type BirhausButtonProps, BirhausCard, type BirhausCardAction, type BirhausCardProps, BirhausCheckbox, type BirhausCheckboxProps, BirhausCombobox, type BirhausComboboxOption, type BirhausComboboxProps, BirhausDialog, type BirhausDialogAction, type BirhausDialogProps, BirhausInput, type BirhausInputProps, type BirhausScore, BirhausSelect, type BirhausSelectOption, type BirhausSelectProps, BirhausSwitch, type BirhausSwitchProps, BirhausTab, type BirhausTabItem, type BirhausTabProps, BirhausTable, type BirhausTableColumn, type BirhausTableProps, BirhausTabs, type BirhausTabsProps, type BirhausUndoConfig, type CognitiveLoadMetrics, DEFAULT_BIRHAUS_CONFIG, type PerformanceMetrics, type ValidationRule, birhausValidationRules, createBirhausCardAction, createBirhausComboboxOption, createBirhausDialogAction, createBirhausOptionGroups, createBirhausTabItem, useBirhausButton, useBirhausCard, useBirhausCheckbox, useBirhausCombobox, useBirhausDialog, useBirhausSelect, useBirhausTable, useBirhausTabs };