egutierrez
2d108c295a
Reescribe todos los componentes UI para usar Mantine v9 en lugar de shadcn/Tailwind. Elimina cn(), CVA, components.json, theme_provider custom y globals.css con Tailwind. Añade 25+ componentes nuevos (AppShell, AuthForm, DatePickerInput, Dropzone, etc.) y MantineProvider como wrapper estándar del sistema de temas. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
78 lines
2.0 KiB
Markdown
78 lines
2.0 KiB
Markdown
---
|
|
name: action_icon
|
|
kind: component
|
|
lang: ts
|
|
domain: ui
|
|
version: "1.0.0"
|
|
purity: impure
|
|
signature: "FnActionIcon(props: FnActionIconProps): JSX.Element"
|
|
description: "Boton de icono con variantes, loading y tooltip opcional. Wrapper sobre Mantine ActionIcon."
|
|
tags: [mantine, button, icon, action, tooltip, component, ui]
|
|
uses_functions: []
|
|
uses_types: []
|
|
returns: []
|
|
returns_optional: false
|
|
error_type: ""
|
|
imports: ["@mantine/core"]
|
|
framework: react
|
|
props:
|
|
- name: icon
|
|
type: "ReactNode"
|
|
required: true
|
|
description: "Icono a renderizar dentro del boton"
|
|
- name: variant
|
|
type: "'filled' | 'light' | 'outline' | 'transparent' | 'default' | 'subtle'"
|
|
required: false
|
|
description: "Variante visual del boton, default 'default'"
|
|
- name: size
|
|
type: "MantineSize | number"
|
|
required: false
|
|
description: "Tamano del boton"
|
|
- name: color
|
|
type: "MantineColor"
|
|
required: false
|
|
description: "Color del boton"
|
|
- name: onClick
|
|
type: "MouseEventHandler"
|
|
required: false
|
|
description: "Callback al hacer click"
|
|
- name: loading
|
|
type: "boolean"
|
|
required: false
|
|
description: "Muestra spinner de carga"
|
|
- name: disabled
|
|
type: "boolean"
|
|
required: false
|
|
description: "Deshabilita el boton"
|
|
- name: tooltip
|
|
type: "string"
|
|
required: false
|
|
description: "Si se provee, envuelve el boton en un Tooltip"
|
|
output: "Boton de icono con tooltip opcional, estados loading/disabled y multiples variantes"
|
|
tested: false
|
|
tests: []
|
|
test_file_path: ""
|
|
file_path: "frontend/functions/ui/action_icon.tsx"
|
|
emits: []
|
|
has_state: false
|
|
variant: [filled, light, outline, transparent, default, subtle]
|
|
---
|
|
|
|
## Ejemplo
|
|
|
|
```tsx
|
|
import { FnActionIcon } from '@fn_library'
|
|
import { IconSettings } from '@tabler/icons-react'
|
|
|
|
<FnActionIcon
|
|
icon={<IconSettings size={18} />}
|
|
tooltip="Configuracion"
|
|
variant="light"
|
|
onClick={() => openSettings()}
|
|
/>
|
|
```
|
|
|
|
## Notas
|
|
|
|
Wrapper sobre Mantine `ActionIcon`. Si se provee `tooltip`, envuelve automaticamente en Mantine `Tooltip`. Compatible con iconos de `@tabler/icons-react`.
|