import { VisualSlotType, IconFontColor, IconType } from '../../../../shared/types/types'; import { default as React } from 'react'; export interface BaseListItem { id: string; disabled?: boolean; } export interface DefaultListItem extends BaseListItem { label: string; icon?: VisualSlotType; iconColor?: IconFontColor; color?: 'blue' | 'red'; } export interface RadioListItem extends BaseListItem { label: string; count?: string | number; } export interface CheckboxListItem extends BaseListItem { title: string; description?: string; checked?: boolean; } export interface ToggleListItem extends BaseListItem { title: string; description?: string; checked?: boolean; draggable?: boolean; } export interface UserListItem extends BaseListItem { name: string; subtitle?: string; avatar?: React.ReactNode | string; badge?: string; badgeVariant?: 'success' | 'warning' | 'error' | 'info'; selected?: boolean; } export interface FilterListItem extends BaseListItem { label: string; checked?: boolean; } /** Ítem de lista para la variante con búsqueda y multiselección (cabecera + filas con checkbox). */ export interface SearchMultiCheckboxListItem extends BaseListItem { label: string; checked?: boolean; } /** * Cabecera tipo «seleccionar todo» (p. ej. «Todas las plazas»). * Usar `checked` + `indeterminate` como en {@link Checkbox}: si hay selección parcial, `checked: false` e `indeterminate: true`. */ export interface SearchMultiCheckboxHeaderRow extends BaseListItem { label: string; checked?: boolean; indeterminate?: boolean; } /** * Búsqueda en la variante `search-multi-checkbox` (API preferida: prop `search`). */ export interface ListBaseSearchMultiCheckboxSearchProps { /** * Si es `false`, no se muestra el buscador ni el filtrado por texto. * @default true */ show?: boolean; /** Texto del campo de búsqueda (filtra por `label` de cada ítem). */ placeholder?: string; } /** Cabecera e ítems en la variante `search-multi-checkbox` (API preferida: prop `list`). */ export interface ListBaseSearchMultiCheckboxListProps { /** Fila superior con checkbox (marcado / indeterminado / vacío). */ header: SearchMultiCheckboxHeaderRow; items: SearchMultiCheckboxListItem[]; } /** Callbacks en la variante `search-multi-checkbox` (API preferida: prop `events`). */ export interface ListBaseSearchMultiCheckboxEventsProps { onHeaderCheckboxChange?: (checked: boolean) => void; onItemCheckboxChange?: (itemId: string, checked: boolean) => void; } export interface AlphabeticGroup { letter: string; items: string[]; } export interface SeparatorGroup { items: DefaultListItem[]; } export interface UserProfileUser { name: string; email: string; avatar?: React.ReactNode | string; badge?: string; } export interface UserProfileMenuItem extends BaseListItem { label: string; icon?: VisualSlotType; color?: 'blue' | 'red'; iconColor?: IconFontColor; type?: 'item' | 'toggle' | 'separator'; } type ListBaseProps = { className?: string; }; /** Props tipadas solo para {@link ListBase} con `variant="search-multi-checkbox"`. */ export type ListBaseSearchMultiCheckboxVariantProps = ListBaseProps & { variant: 'search-multi-checkbox'; search?: Partial; events?: Partial; /** @deprecated Usar `search.show`. */ showSearch?: boolean; /** @deprecated Usar `search.placeholder`. */ searchPlaceholder?: string; /** @deprecated Usar `events.onHeaderCheckboxChange`. */ onHeaderCheckboxChange?: (checked: boolean) => void; /** @deprecated Usar `events.onItemCheckboxChange`. */ onItemCheckboxChange?: (itemId: string, checked: boolean) => void; } & ({ list: ListBaseSearchMultiCheckboxListProps; /** @deprecated Usar `list.header`. */ header?: SearchMultiCheckboxHeaderRow; /** @deprecated Usar `list.items`. */ items?: SearchMultiCheckboxListItem[]; } | { /** @deprecated Usar `list.header`. */ header: SearchMultiCheckboxHeaderRow; /** @deprecated Usar `list.items`. */ items: SearchMultiCheckboxListItem[]; list?: undefined; }); export type ListBaseDefaultVariantProps = ListBaseProps & { variant: 'default'; list?: Partial<{ items: DefaultListItem[]; }>; selection?: Partial<{ currentValue?: string; }>; events?: Partial<{ onItemClick?: (item: DefaultListItem) => void; }>; /** @deprecated Usar `list.items`. */ items?: DefaultListItem[]; /** @deprecated Usar `selection.currentValue`. */ currentValue?: string; /** @deprecated Usar `events.onItemClick`. */ onItemClick?: (item: DefaultListItem) => void; } & ({ list: { items: DefaultListItem[]; }; } | { items: DefaultListItem[]; list?: undefined; }); export type ListBaseSeparatorVariantProps = ListBaseProps & { variant: 'separator'; list?: Partial<{ groups: SeparatorGroup[]; }>; selection?: Partial<{ currentValue?: string; }>; events?: Partial<{ onItemClick?: (itemId: string) => void; }>; /** @deprecated Usar `list.groups`. */ groups?: SeparatorGroup[]; /** @deprecated Usar `selection.currentValue`. */ currentValue?: string; /** @deprecated Usar `events.onItemClick`. */ onItemClick?: (itemId: string) => void; } & ({ list: { groups: SeparatorGroup[]; }; } | { groups: SeparatorGroup[]; list?: undefined; }); export type ListBaseRadioVariantProps = ListBaseProps & { variant: 'radio'; list?: Partial<{ items: RadioListItem[]; }>; selection?: Partial<{ selectedValue?: string; }>; events?: Partial<{ onSelectionChange?: (itemId: string) => void; }>; /** @deprecated Usar `list.items`. */ items?: RadioListItem[]; /** @deprecated Usar `selection.selectedValue`. */ selectedValue?: string; /** @deprecated Usar `events.onSelectionChange`. */ onSelectionChange?: (itemId: string) => void; } & ({ list: { items: RadioListItem[]; }; } | { items: RadioListItem[]; list?: undefined; }); export type ListBaseUsersSelectVariantProps = ListBaseProps & { variant: 'users-select'; list?: Partial<{ users: UserListItem[]; }>; labels?: Partial<{ searchPlaceholder?: string; deleteButtonLabel?: string; }>; events?: Partial<{ onUserToggle?: (userId: string) => void; onDelete?: (userIds: string[]) => void; }>; /** @deprecated Usar `list.users`. */ users?: UserListItem[]; /** @deprecated Usar `labels.searchPlaceholder`. */ searchPlaceholder?: string; /** @deprecated Usar `labels.deleteButtonLabel`. */ deleteButtonLabel?: string; /** @deprecated Usar `events.onUserToggle`. */ onUserToggle?: (userId: string) => void; /** @deprecated Usar `events.onDelete`. */ onDelete?: (userIds: string[]) => void; } & ({ list: { users: UserListItem[]; }; } | { users: UserListItem[]; list?: undefined; }); export type ListBaseToggleVariantProps = ListBaseProps & { variant: 'toggle'; list?: Partial<{ items: ToggleListItem[]; }>; events?: Partial<{ onToggleChange?: (itemId: string, checked: boolean) => void; onItemsReorder?: (reorderedItems: ToggleListItem[]) => void; }>; options?: Partial<{ enableReordering?: boolean; }>; /** @deprecated Usar `list.items`. */ items?: ToggleListItem[]; /** @deprecated Usar `events.onToggleChange`. */ onToggleChange?: (itemId: string, checked: boolean) => void; /** @deprecated Usar `events.onItemsReorder`. */ onItemsReorder?: (reorderedItems: ToggleListItem[]) => void; /** @deprecated Usar `options.enableReordering`. */ enableReordering?: boolean; } & ({ list: { items: ToggleListItem[]; }; } | { items: ToggleListItem[]; list?: undefined; }); export type ListBaseUserListVariantProps = ListBaseProps & { variant: 'user-list'; list?: Partial<{ users: UserListItem[]; }>; selection?: Partial<{ selectedUserId?: string; }>; events?: Partial<{ onUserClick?: (userId: string) => void; }>; /** @deprecated Usar `list.users`. */ users?: UserListItem[]; /** @deprecated Usar `selection.selectedUserId`. */ selectedUserId?: string; /** @deprecated Usar `events.onUserClick`. */ onUserClick?: (userId: string) => void; } & ({ list: { users: UserListItem[]; }; } | { users: UserListItem[]; list?: undefined; }); export type ListBaseCheckboxVariantProps = ListBaseProps & { variant: 'checkbox'; list?: Partial<{ items: CheckboxListItem[]; }>; events?: Partial<{ onCheckboxChange?: (itemId: string, checked: boolean) => void; }>; /** @deprecated Usar `list.items`. */ items?: CheckboxListItem[]; /** @deprecated Usar `events.onCheckboxChange`. */ onCheckboxChange?: (itemId: string, checked: boolean) => void; } & ({ list: { items: CheckboxListItem[]; }; } | { items: CheckboxListItem[]; list?: undefined; }); export type ListBaseUserProfileVariantProps = ListBaseProps & { variant: 'user-profile'; profile?: Partial<{ user: UserProfileUser; }>; menu?: Partial<{ items: UserProfileMenuItem[]; }>; selection?: Partial<{ selectedItemId?: string; darkMode?: boolean; }>; events?: Partial<{ onMenuItemClick?: (itemId: string) => void; onDarkModeToggle?: (enabled: boolean) => void; }>; /** @deprecated Usar `profile.user`. */ user?: UserProfileUser; /** @deprecated Usar `menu.items`. */ menuItems?: UserProfileMenuItem[]; /** @deprecated Usar `selection.selectedItemId`. */ selectedItemId?: string; /** @deprecated Usar `selection.darkMode`. */ darkMode?: boolean; /** @deprecated Usar `events.onMenuItemClick`. */ onMenuItemClick?: (itemId: string) => void; /** @deprecated Usar `events.onDarkModeToggle`. */ onDarkModeToggle?: (enabled: boolean) => void; } & ({ profile: { user: UserProfileUser; }; menu: { items: UserProfileMenuItem[]; }; } | { user: UserProfileUser; menuItems: UserProfileMenuItem[]; profile?: undefined; menu?: undefined; }); export type ListBaseAlphabeticVariantProps = ListBaseProps & { variant: 'alphabetic'; list?: Partial<{ groups: AlphabeticGroup[]; }>; selection?: Partial<{ selectedItem?: string; }>; events?: Partial<{ onItemClick?: (item: string, groupIndex: number, itemIndex: number) => void; }>; /** @deprecated Usar `list.groups`. */ groups?: AlphabeticGroup[]; /** @deprecated Usar `selection.selectedItem`. */ selectedItem?: string; /** @deprecated Usar `events.onItemClick`. */ onItemClick?: (item: string, groupIndex: number, itemIndex: number) => void; } & ({ list: { groups: AlphabeticGroup[]; }; } | { groups: AlphabeticGroup[]; list?: undefined; }); export type ListBaseFiltersVariantProps = ListBaseProps & { variant: 'filters'; list?: Partial<{ items: FilterListItem[]; }>; labels?: Partial<{ title?: string; }>; selection?: Partial<{ selectedItemId?: string; }>; events?: Partial<{ onItemClick?: (itemId: string) => void; }>; /** @deprecated Usar `list.items`. */ items?: FilterListItem[]; /** @deprecated Usar `labels.title`. */ title?: string; /** @deprecated Usar `selection.selectedItemId`. */ selectedItemId?: string; /** @deprecated Usar `events.onItemClick`. */ onItemClick?: (itemId: string) => void; } & ({ list: { items: FilterListItem[]; }; } | { items: FilterListItem[]; list?: undefined; }); export type ListBaseFiltersCheckboxVariantProps = ListBaseProps & { variant: 'filters-checkbox'; list?: Partial<{ items: FilterListItem[]; }>; labels?: Partial<{ title?: string; clearLabel?: string; applyLabel?: string; }>; events?: Partial<{ onItemToggle?: (itemId: string) => void; onClear?: () => void; onApply?: (selectedIds: string[]) => void; onBack?: () => void; }>; /** @deprecated Usar `list.items`. */ items?: FilterListItem[]; /** @deprecated Usar `labels.title`. */ title?: string; /** @deprecated Usar `labels.clearLabel`. */ clearLabel?: string; /** @deprecated Usar `labels.applyLabel`. */ applyLabel?: string; /** @deprecated Usar `events.onItemToggle`. */ onItemToggle?: (itemId: string) => void; /** @deprecated Usar `events.onClear`. */ onClear?: () => void; /** @deprecated Usar `events.onApply`. */ onApply?: (selectedIds: string[]) => void; /** @deprecated Usar `events.onBack`. */ onBack?: () => void; } & ({ list: { items: FilterListItem[]; }; } | { items: FilterListItem[]; list?: undefined; }); export type ListBaseEmptyVariantProps = ListBaseProps & { variant: 'empty'; labels?: Partial<{ title?: string; description?: string; }>; content?: Partial<{ icon?: IconType; }>; /** @deprecated Usar `labels.title`. */ title?: string; /** @deprecated Usar `labels.description`. */ description?: string; /** @deprecated Usar `content.icon`. */ icon?: IconType; }; /** Unión de todas las variantes de {@link ListBase}; cada rama coincide con un `ListBase*VariantProps` exportado. */ export type InternalListProps = ListBaseDefaultVariantProps | ListBaseSeparatorVariantProps | ListBaseRadioVariantProps | ListBaseUsersSelectVariantProps | ListBaseToggleVariantProps | ListBaseUserListVariantProps | ListBaseCheckboxVariantProps | ListBaseUserProfileVariantProps | ListBaseAlphabeticVariantProps | ListBaseFiltersVariantProps | ListBaseFiltersCheckboxVariantProps | ListBaseEmptyVariantProps | ListBaseSearchMultiCheckboxVariantProps; /** * Lista base con múltiples variantes (menú, filtros, multiselección, etc.). * * **API agrupada (recomendada):** según variante, usar bloques `list` (ítems, grupos, usuarios, etc.), * `selection` (valor seleccionado / id), `events` (callbacks), `labels` (títulos, placeholders), * `profile` + `menu` (`user-profile`), `options` (p. ej. `enableReordering` en `toggle`), `content` (`empty`), * y en `search-multi-checkbox` además `search`. Tabla por variante y `Dropdown`: `packages/ui/DEVELOPMENT_GUIDE.md`. * * @example * ```tsx * {} }} * /> * * {}, * onItemCheckboxChange: (id, v) => {}, * }} * /> * ``` */ export declare const ListBase: React.FC; export {}; //# sourceMappingURL=ListBase.d.ts.map