Files
Egutierrez 5a824c2eee initial: mirror of @fn_library from fn_registry
75 components + DESIGN_SYSTEM.md + sync script.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-04-21 19:06:49 +02:00

2.1 KiB

name, kind, lang, domain, version, purity, signature, description, tags, uses_functions, uses_types, returns, returns_optional, error_type, imports, output, tested, tests, test_file_path, file_path, props, emits, has_state, framework, variant
name kind lang domain version purity signature description tags uses_functions uses_types returns returns_optional error_type imports output tested tests test_file_path file_path props emits has_state framework variant
sheet component ts ui 1.0.0 impure Sheet(props: SheetProps): JSX.Element Panel lateral deslizante (drawer) accesible con variantes de lado y animaciones. Mantine Drawer.
sheet
drawer
panel
component
ui
interactive
overlay
mantine
false
@mantine/core
react
Componente Sheet que renderiza panel deslizante lateral accesible con animaciones via Mantine Drawer false
frontend/functions/ui/sheet.tsx
name type required description
side 'top' | 'bottom' | 'left' | 'right' false Lado desde el que aparece el panel (default: right)
name type required description
showCloseButton boolean false Muestra el boton de cierre (default: true)
name type required description
open boolean false Estado controlado de apertura
name type required description
onOpenChange (open: boolean) => void false Callback cuando cambia el estado
onOpenChange
false react
top
bottom
left
right

Ejemplo

<Sheet>
  <SheetTrigger asChild>
    <Button variant="outline">Abrir panel</Button>
  </SheetTrigger>
  <SheetContent side="right">
    <SheetHeader>
      <SheetTitle>Editar perfil</SheetTitle>
      <SheetDescription>Realiza cambios en tu perfil.</SheetDescription>
    </SheetHeader>
    <div className="py-4">
      {/* contenido del panel */}
    </div>
    <SheetFooter>
      <SheetClose asChild>
        <Button variant="outline">Cancelar</Button>
      </SheetClose>
      <Button>Guardar</Button>
    </SheetFooter>
  </SheetContent>
</Sheet>

Notas

Reutiliza Mantine Drawer para el comportamiento modal y animaciones. SheetPortal y SheetOverlay son no-ops mantenidos por compatibilidad. Exports: Sheet, SheetTrigger, SheetContent, SheetClose, SheetPortal, SheetOverlay, SheetHeader, SheetFooter, SheetTitle, SheetDescription.