# Capability: mantine Componentes y helpers Mantine v9 + `@fn_library` (alias a `frontend/functions/ui/`). Cubre: inputs (TextInput, NumberInput, Select, MultiSelect, ColorPicker), layout (Group, Stack, AppShell, Grid), feedback (Modal, Drawer, Notification, Loader), data display (Table, Card, Badge), navegacion (Tabs, Accordion, Menu), instalacion+theming (`install_mantine`, `frontend_doctor`). Tambien componentes ImGui equivalentes en `@fn_library` C++ (cpp/core). ## Funciones | ID | Firma | Que hace | |---|---|---| | `accordion_ts_ui` | `Accordion(props: AccordionProps): JSX.Element` | Secciones colapsables con animaciones. Mantine Accordion. Composable: AccordionItem + AccordionTrigger + AccordionContent. | | `action_icon_ts_ui` | `FnActionIcon(props: FnActionIconProps): JSX.Element` | Boton de icono con variantes, loading y tooltip opcional. Wrapper sobre Mantine ActionIcon. | | `alert_ts_ui` | `Alert(props: { variant?: 'default' \| 'destructive' \| 'success' \| 'warning' \| 'info' }): JSX.Element` | Alerta accesible con 5 variantes semánticas (default, destructive, success, warning, info). Mantine Alert con slots para título, descripción y acción. | | `app_shell_ts_ui` | `FnAppShell(props: FnAppShellProps): JSX.Element` | Layout shell con header, navbar colapsable y area principal. Wrapper sobre Mantine AppShell. | | `area_chart_ts_ui` | `AreaChart(props: AreaChartProps): JSX.Element` | Gráfico de área @mantine/charts con gradientes automáticos, multi-series, stacking y tooltips. | | `auth_form_ts_ui` | `AuthForm(config: AuthFormConfig): ReactElement` | Genera página de autenticación con toggle login/register, social buttons opcionales, campos extra en registro y validación. Basado en Mantine AuthenticationForm. | | `autocomplete_ts_ui` | `Autocomplete(props: AutocompleteProps): JSX.Element` | Input con sugerencias de autocompletado. Permite valores libres a diferencia de Select. Wrapper sobre Mantine Autocomplete. | | `avatar_ts_ui` | `Avatar(props: AvatarProps): JSX.Element` | Imagen de usuario circular con fallback a iniciales generadas automaticamente. 5 tamaños via Mantine Avatar. | | `badge_ts_ui` | `Badge(props: BadgeProps & VariantProps): JSX.Element` | Badge con 10 variantes semánticas (default, secondary, destructive, outline, ghost, link, success, warning, error, info) y 2 tamaños. Mantine Badge. | | `bar_chart_ts_ui` | `BarChart(props: BarChartProps): JSX.Element` | Gráfico de barras @mantine/charts con multi-series, orientación horizontal/vertical y tooltips. | | `breadcrumb_ts_ui` | `Breadcrumb(props: BreadcrumbProps): JSX.Element` | Navegacion jerarquica con separadores, elipsis para paths largos y soporte para router links via asChild. Mantine Anchor/Text. | | `button_ts_ui` | `Button(props: ButtonProps & VariantProps): JSX.Element` | Botón accesible con 6 variantes (default, outline, secondary, ghost, destructive, link) y 8 tamaños. Mantine Button. | | `chart_container_ts_ui` | `ChartContainer(props: { children: ReactNode; height?: number \| string }): JSX.Element` | Thin wrapper Paper y utilidades de colores/series para los charts @mantine/charts. | | `checkbox_ts_ui` | `Checkbox(props: CheckboxProps): JSX.Element` | Input booleano accesible con label opcional y variante indeterminate. Mantine Checkbox. | | `chip_ts_ui` | `Chip(props: ChipProps): JSX.Element` | Chip seleccionable con variantes filled/outline/light. ChipGroup para selección simple o múltiple. Wrapper sobre Mantine Chip. | | `color_bg_ts_ui` | `colorBg(color: string): string` | Genera el valor CSS color-mix para el fondo de un elemento con color Mantine. Sin color retorna dark-6. Hex: mezcla 18% con dark-6. Token Mantine (blue, red, ...): mezcla tono -9 al 18% con dark-6. | | `color_border_ts_ui` | `colorBorder(color: string): string` | Genera el valor CSS color-mix para el borde de un elemento con color Mantine. Sin color retorna dark-4. Hex: mezcla 30% con dark-4. Token Mantine: mezcla tono -7 al 30% con dark-4. | | `color_input_ts_ui` | `ColorInput(props: ColorInputProps): JSX.Element` | Selector de color con picker, swatches predefinidos y eye dropper. Soporta hex, rgb, hsl con alpha. Wrapper sobre Mantine ColorInput. | | `color_picker_grid_ts_ui` | `ColorPickerGrid(props: ColorPickerGridProps): JSX.Element` | Grid de swatches de color con boton extra que abre un modal con ColorPicker de Mantine para seleccionar un hexadecimal libre. Soporta tokens Mantine y valores hex. El swatch activo recibe borde blanco + box-shadow azul; el custom-active aplica el mismo feedback visual. | | `color_swatch_ts_ui` | `colorSwatch(color: string): string` | Genera el valor CSS para mostrar un swatch (muestra de color) Mantine. Sin color retorna dark-3. Hex: retorna el hex directamente. Token Mantine: retorna CSS var del tono -7. | | `date_picker_input_ts_ui` | `DatePickerInput(props: DatePickerInputProps): JSX.Element` | Selector de fecha con input y calendario desplegable. Soporta fecha simple, múltiple y rango. Wrapper sobre Mantine DatePickerInput. | | `dialog_ts_ui` | `Dialog(props: DialogRootProps): JSX.Element` | Diálogo modal accesible con close button y sistema de slots (header, footer, title, description). Mantine Modal. | | `dropdown_menu_ts_ui` | `DropdownMenu(props: DropdownMenuProps): JSX.Element` | Menu de acciones y contexto accesible con items, checkboxes, radios, separadores y submenus. Base-UI Menu primitive. | | `dropzone_ts_ui` | `Dropzone(props: DropzoneProps): JSX.Element` | Zona de drag-and-drop para archivos con estados idle/accept/reject, límite de tamaño y tipos MIME. Wrapper sobre Mantine Dropzone. | | `empty_state_ts_ui` | `EmptyState(props: EmptyStateProps): JSX.Element` | Placeholder para listas y tablas vacías con icono, título, descripción y acción opcional. Tabler Icons por defecto. | | `error_page_ts_ui` | `ErrorPage(config: ErrorPageConfig): JSX.Element` | Genera página de error con código grande, título, descripción y acciones. Soporta 404, 500, 403 y cualquier código custom. | | `file_input_ts_ui` | `FileInput(props: FileInputProps): JSX.Element` | Input de archivos con soporte para múltiples archivos, tipos aceptados y botón de limpiar. Wrapper sobre Mantine FileInput. | | `frontend_doctor_bash_infra` | `frontend_doctor(project_dir: string) -> diagnostics_stdout` | Diagnostica la salud de un proyecto frontend Mantine. Verifica Node, React, Mantine, PostCSS, TypeScript, vite.config y detecta residuos de shadcn/@base-ui. Imprime tabla de checks con exit code 0/1. | | `indicator_ts_ui` | `FnIndicator(props: FnIndicatorProps): JSX.Element` | Badge indicador posicionado sobre un elemento hijo. Wrapper sobre Mantine Indicator. | | `input_ts_ui` | `Input(props: InputHTMLAttributes): JSX.Element` | Campo de entrada accesible con soporte para iconos, grupos, validación ARIA y estados disabled/invalid. Mantine TextInput. | | `install_mantine_bash_infra` | `install_mantine(project_dir: string) -> void` | Instala Mantine UI con todas sus dependencias (@mantine/core, hooks, charts, notifications, form) y PostCSS en un proyecto frontend. Detecta package manager por lockfile. Genera postcss.config.cjs si no existe. Idempotente. | | `label_ts_ui` | `Label(props: LabelHTMLAttributes): JSX.Element` | Etiqueta de formulario accesible con soporte para estados disabled. Mantine Text con component=label. | | `line_chart_ts_ui` | `LineChart(props: LineChartProps): JSX.Element` | Gráfico de líneas @mantine/charts con multi-series, 5 tipos de curva, líneas de referencia y tooltips. | | `loading_overlay_ts_ui` | `FnLoadingOverlay(props: FnLoadingOverlayProps): JSX.Element` | Overlay de carga con blur y opacidad configurable. Wrapper sobre Mantine LoadingOverlay. | | `mantine_provider_ts_ui` | `FnMantineProvider({ children, theme?, defaultColorScheme? })` | Provider raiz de Mantine para apps del registry. Wrappea MantineProvider con Notifications incluido. Importa los CSS de @mantine/core, charts y notifications. | | `month_heatmap_ts_ui` | `MonthHeatmap(props: MonthHeatmapProps): JSX.Element` | Grid mensual de calor (heatmap) con inicio en lunes. Renderiza 7 columnas con header de dias de semana y celdas que muestran numero del dia, hasta dos contadores con icono, borde azul para hoy y fondo tintado segun valores primary/secondary. | | `multi_select_ts_ui` | `MultiSelect(props: MultiSelectProps): JSX.Element` | Selector múltiple con búsqueda, pills y límite de selecciones. Wrapper sobre Mantine MultiSelect. | | `nav_link_ts_ui` | `FnNavLink(props: FnNavLinkProps): JSX.Element` | Link de navegacion con icono, descripcion y anidamiento. Wrapper sobre Mantine NavLink. | | `number_input_ts_ui` | `FnNumberInput(props: FnNumberInputProps): JSX.Element` | Input numerico con min/max, step, prefijo y sufijo. Wrapper sobre Mantine NumberInput. | | `pagination_ts_ui` | `Pagination(props: PaginationProps): JSX.Element` | Controles de navegacion de paginas autocontenido. Mantine Pagination. | | `password_input_ts_ui` | `PasswordInput(props: PasswordInputProps): JSX.Element` | Input de contraseña con toggle de visibilidad y soporte para indicador de fortaleza. Wrapper sobre Mantine PasswordInput. | | `pie_chart_ts_ui` | `PieChart(props: PieChartProps): JSX.Element` | Gráfico de torta/dona @mantine/charts con colores automáticos, labels y tooltip. Usa DonutChart para dona, PieChart para torta. | | `pin_input_ts_ui` | `PinInput(props: PinInputProps): JSX.Element` | Input de código PIN/OTP con campos individuales y autocompletado. Wrapper sobre Mantine PinInput. | | `popover_ts_ui` | `Popover(props: PopoverProps): JSX.Element` | Contenido flotante posicionado accesible con animaciones. Mantine Popover. | | `progress_bar_ts_ui` | `ProgressBar(props: ProgressBarProps): JSX.Element` | Barra de progreso con variantes de color y tamaño, buffer, animación, modo indeterminado y display de valor. Mantine Progress. | | `radio_group_ts_ui` | `RadioGroup(props: RadioGroupProps): JSX.Element` | Grupo de opciones exclusivas accesible. Mantine Radio.Group + Radio. | | `rating_ts_ui` | `Rating(props: RatingProps): JSX.Element` | Selector de calificación con estrellas, fracciones y símbolos custom. Wrapper sobre Mantine Rating. | | `ring_progress_ts_ui` | `FnRingProgress(props: FnRingProgressProps): JSX.Element` | Anillo de progreso con secciones coloreadas y label central. Wrapper sobre Mantine RingProgress. | | `segmented_control_ts_ui` | `FnSegmentedControl(props: FnSegmentedControlProps): JSX.Element` | Control segmentado para seleccion unica entre opciones. Wrapper sobre Mantine SegmentedControl. | | `select_ts_ui` | `Select(props: SelectProps): JSX.Element` | Select dropdown con búsqueda, grupos y accesibilidad. Wrapper sobre Mantine Select con API declarativa via prop data. | | `sheet_ts_ui` | `Sheet(props: SheetProps): JSX.Element` | Panel lateral deslizante (drawer) accesible con variantes de lado y animaciones. Mantine Drawer. | | `skeleton_ts_ui` | `Skeleton(props: HTMLAttributes): JSX.Element` | Sistema de loading skeletons: base, text, card, avatar, button, table. Variantes preconfiguradas para estados de carga. Mantine Skeleton. | | `slider_cpp_core` | `bool slider_float(const char* label, float* v, float min, float max, const char* fmt); bool slider_float_log(...); bool slider_int(const char* label, int* v, int min, int max, const char* fmt); bool slider_double(const char* label, double* v, double min, double max, const char* fmt)` | Slider ImGui con label muted arriba, estilo acorde con fn_tokens (radius, border, primary grab). Variantes float, float_log (logaritmico), int, double. Equivalente al de Mantine / fn_library. | | `slider_ts_ui` | `Slider(props: SliderProps): JSX.Element \| RangeSlider(props: RangeSliderProps): JSX.Element` | Deslizador de valor numérico con marcas, labels y modo rango. Incluye RangeSlider. Wrapper sobre Mantine Slider. | | `stepper_ts_ui` | `FnStepper(props: FnStepperProps): JSX.Element` | Stepper de pasos con orientacion horizontal/vertical. Wrapper sobre Mantine Stepper. | | `sticker_picker_ts_ui` | `StickerPicker(props: StickerPickerProps): JSX.Element` | Selector de emoji/sticker encapsulado en un Popover de Mantine. Monta emoji-mart Picker una sola vez para evitar re-creaciones en cada render. | | `switch_toggle_ts_ui` | `SwitchToggle(props: SwitchToggleProps): JSX.Element` | Toggle on/off accesible con label opcional a izquierda o derecha. Mantine Switch. | | `tabs_ts_ui` | `Tabs(props: TabsRootProps): JSX.Element` | Sistema de tabs con orientacion horizontal/vertical, variantes default y line. Mantine Tabs. | | `tags_input_ts_ui` | `TagsInput(props: TagsInputProps): JSX.Element` | Input de tags libre con sugerencias opcionales. Permite crear valores custom a diferencia de MultiSelect. Wrapper sobre Mantine TagsInput. | | `textarea_ts_ui` | `Textarea(props: TextareaProps): JSX.Element` | Input multilinea accesible con auto-resize opcional. Mantine Textarea con autosize. | | `timeline_ts_ui` | `FnTimeline(props: FnTimelineProps): JSX.Element` | Timeline vertical con items, iconos y colores. Wrapper sobre Mantine Timeline. | | `toast_ts_ui` | `Toast(props: ToastProps): JSX.Element` | Notificaciones temporales con variantes semanticas (success, error, warning, info), iconos automaticos, auto-dismiss y provider con hook useToast. | | `tooltip_ts_ui` | `Tooltip(props: TooltipRootProps): JSX.Element` | Tooltip accesible con posicionamiento automático. Mantine Tooltip con delay configurable. | ## Ejemplo canonico ### Frontend nuevo desde cero ```bash ./fn run install_mantine --target frontend ./fn doctor # verifica que pnpm + node + tsx esten OK (grupo registry) cd frontend && pnpm dev ``` ### Pagina con @fn_library ```tsx import { FnMantineProvider, FnButton, FnTextInput, FnModal } from "@fn_library"; import { Stack, Group } from "@mantine/core"; import { IconHome } from "@tabler/icons-react"; export function App() { return ( }>Submit ); } ``` ## Fronteras - **NO usa Tailwind, CVA, cn(), CSS variables custom**. Solo Mantine theme system + props. - **NO usa lucide-react ni heroicons**. Solo `@tabler/icons-react` (set nativo de Mantine). - **NO crea componentes HTML nativos cuando hay equivalente en @fn_library**. Antes de `