Files
fn_registry/frontend/functions/ui/sheet.md
T
egutierrez 35bcb63300 feat: nuevos componentes UI — accordion, avatar, breadcrumb, checkbox, command, dropdown, pagination, popover, radio, sheet, select, switch, textarea, toast
Componentes React accesibles basados en Radix UI con soporte de temas via CSS variables. Incluye barrel export en index.ts.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-03 03:23:32 +02:00

2.1 KiB

name, kind, lang, domain, version, purity, signature, description, tags, uses_functions, uses_types, returns, returns_optional, error_type, imports, 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 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. Base-UI Dialog con posicionamiento lateral via CVA.
sheet
drawer
panel
component
ui
interactive
overlay
base-ui
cva
cn_ts_core
false
@base-ui/react/dialog
class-variance-authority
lucide-react
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 Base-UI Dialog para el comportamiento modal. Las animaciones de deslizamiento usan slide-in-from-* de Tailwind. CVA gestiona las variantes de lado. Exports: Sheet, SheetTrigger, SheetContent, SheetClose, SheetPortal, SheetOverlay, SheetHeader, SheetFooter, SheetTitle, SheetDescription.