fn_registry/docs/capabilities/mantine.md

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<typeof badgeVariants>): 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<typeof buttonVariants>): 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<HTMLDivElement>): 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

./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

import { FnMantineProvider, FnButton, FnTextInput, FnModal } from "@fn_library";
import { Stack, Group } from "@mantine/core";
import { IconHome } from "@tabler/icons-react";

export function App() {
  return (
    <FnMantineProvider>
      <Stack p="md">
        <Group>
          <IconHome />
          <FnTextInput label="Nombre" placeholder="..." />
        </Group>
        <FnButton variant="filled" leftSection={<IconHome />}>Submit</FnButton>
      </Stack>
    </FnMantineProvider>
  );
}

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 <button>, usa FnButton. Antes de <input>, usa FnTextInput.
• NO usa MUI, Chakra, Ant Design u otro framework. Stack es Mantine v9 + @fn_library exclusivamente.
• Componentes ImGui (button_cpp_core, modal_dialog_cpp_core, ...) viven en @fn_library C++ y son el equivalente para apps nativas; comparten naming pero son codigo separado, no convierten entre sí.