componente · @solu30/ui-kit/feedback

SideSheet

El panel lateral estándar del ecosistema: siempre desde la derecha y a 700px, con título y pie.

Seguir leyendo — 3 párrafos más

Estándar del proyecto para modales laterales.

Siempre aparece desde la derecha, h-full de la pantalla (heredado del Sheet).
Ancho fijo 700px en desktop, w-full en pantallas menores a 700px.
El prop size del Sheet se sobrescribe vía className (twMerge elige la última clase de max-w) por lo que este wrapper es la fuente única de verdad del tamaño de los side sheets.

Usá este componente en vez del Sheet crudo para mantener consistencia: <SideSheet isOpen={open} onClose={close} title="Nuevo cliente">…</SideSheet>

11 sitios de import en 4 de 15 verticales — un archivo que la importa cuenta una vez, monte una instancia o veinte.

cmp-packages
dietaly
gestorsalon
luigi

El componente, montado

Cargando el espécimen…

Éste es el conjunto completo. Abajo, los mismos casos por separado, cada uno con su código.

Cómo se usa

import { SideSheet } from '@solu30/ui-kit/feedback'

Props

6 props declaradas en los tipos de la versión instalada.
Prop	Requerida	Tipo	Qué hace
isOpen	sí	`boolean`	—
onClose	sí	`() => void`	—
title	opcional	`string`	—
children	sí	`ReactNode`	—
className	opcional	`string`	Override ancho si necesitás algo distinto al estándar.
footer	opcional	`ReactNode`	—

Ancho fijo

Cuando el panel lateral es siempre el mismo tipo de contenido —una ficha, un formulario largo— y conviene no elegir el ancho cada vez. Es el wrapper estándar del proyecto sobre «Sheet», con 700px fijos en desktop.

Cargando el espécimen…

export function SheetEstandar() {
  const [sideSheetOpen, setSideSheetOpen] = useState(false)
  const sideSheetFocus = useFocusReturnCheck()
  const closeSideSheet = () => {
    setSideSheetOpen(false)
    sideSheetFocus.notifyClosed()
  }

  return (
    <>
      <TriggerButton onClick={(e) => sideSheetFocus.openFrom(e, () => setSideSheetOpen(true))}>
        SideSheet (700px)
      </TriggerButton>
      <FocusReturnNote result={sideSheetFocus.result} />

      <SideSheet isOpen={sideSheetOpen} onClose={closeSideSheet} title="Nuevo cliente de charter">
        <div className="flex flex-col gap-2 text-sm text-content/70">
          <p>Ancho fijo 700px en desktop — estándar del proyecto para paneles laterales.</p>
        </div>
      </SideSheet>
    </>
  )
}

De specimens/feedback.tsx · SheetEstandar: el espécimen del Muestrario, no un ejemplo oficial del paquete. Muestra cómo se usa la pieza de verdad, montada contra los tipos instalados —eso es lo que vale— pero no es documentación del kit.

Ejemplo del paquete

// Panel lateral controlado, con pie propio.
<SideSheet isOpen={abierto} onClose={cerrar} title="Detalle" footer={<Button onClick={guardar}>Guardar</Button>}>
  <Detalle id={id} />
</SideSheet>

Del @example del JSDoc de @solu30/ui-kit, sin editar: son 65 de los 541 símbolos. La sangría y los renglones en blanco son los del paquete.