sebs7n-ui

Contenido y datosServer Component

import { SettingsGrid, SettingsSection } from "sebs7n-ui/settings-section"

Ejemplos

Secciones en dos columnas

Una columna en el teléfono y dos desde `lg`; las cards de una fila comparten el alto de cabecera y de cuerpo. `wide` ocupa las dos.

import { Field, FieldDescription, FieldLabel } from "sebs7n-ui/field"
import { Input } from "sebs7n-ui/input"
import { SettingsGrid, SettingsSection } from "sebs7n-ui/settings-section"
import { Switch } from "sebs7n-ui/switch"

function Basic() {
  return (
    <SettingsGrid className="w-full">
      <SettingsSection description="Cómo se llama y cómo se ve." title="Perfil">
        <Field name="name">
          <FieldLabel>Nombre</FieldLabel>
          <Input defaultValue="Equipo de ejemplo" />
        </Field>
        <Field name="site">
          <FieldLabel>Sitio</FieldLabel>
          <Input defaultValue="ejemplo.com" />
          <FieldDescription>Se muestra en el pie de los documentos.</FieldDescription>
        </Field>
      </SettingsSection>
      <SettingsSection description="Qué avisos llegan y por dónde." title="Avisos">
        <div className="flex items-center justify-between gap-4">
          <span className="text-callout text-label">Por correo</span>
          <Switch aria-label="Avisos por correo" defaultChecked />
        </div>
        <div className="flex items-center justify-between gap-4">
          <span className="text-callout text-label">En la app</span>
          <Switch aria-label="Avisos en la app" />
        </div>
      </SettingsSection>
      <SettingsSection description="Ocupa las dos columnas." title="Avanzado" wide>
        <p className="text-callout text-label-secondary">Un contenido ancho: una tabla, una zona de arrastre.</p>
      </SettingsSection>
    </SettingsGrid>
  )
}

Props

Generadas del TypeScript del paquete. Las propias del componente, más las heredadas del primitivo que tienen algo que explicar —marcadas «heredada de Base UI»—. El resto está en la línea «hereda de».

SettingsGrid

Hereda las props de <div>.

Prop	Tipo	Por defecto	Descripción
`className`	`string`	—	Se fusiona con las clases del componente vía `cn()` (tailwind-merge): lo que pongas gana.

SettingsSection

Hereda las props de <section>.

Prop	Tipo	Por defecto	Descripción
`title`*	`React.ReactNode`	—	El título de la sección. Nombra la región.
`description`	`React.ReactNode`	—	Una línea debajo del título.
`footer`	`React.ReactNode`	—	El pie de la card.
`id`	`string`	—	El `id` de la card; el título cuelga de él para nombrar la región. Sin `id`, se genera uno.
`wide`	`boolean`	—	Ocupa las dos columnas cuando la grilla las tiene (desde 48 rem de ancho, `@3xl`).
`className`	`string`	—	Se fusiona con las clases del componente vía `cn()` (tailwind-merge): lo que pongas gana.

Teclado

Tab: La sección no es una parada: recorre los campos de adentro.

Accesibilidad

Cada sección es una región (role="region") nombrada por su título con aria-labelledby: el lector las lista y se salta de una a otra.
El orden del DOM es el de lectura: de izquierda a derecha y fila por fila. Con wide, la sección ocupa las dos columnas sin cambiar el orden.
Sin estado ni "use client": sirve en un Server Component (los campos de adentro pueden ser clientes).

Reglas de uso

Configuración = secciones en cards, 2 columnas desde 48 rem de ancho de la grilla (`@3xl`) y 1 por debajo; nunca una columna angosta de campos pegada a un costado.
Una sección por tema («Empresa», «Marca», «Moneda e impuestos»): título corto y una descripción de una línea. Los campos llenan el ancho de la card.
SettingsGrid pone las secciones de una fila a la misma altura (subgrid). wide es para lo que necesita el ancho: una zona de arrastre, una tabla.
footer es el pie de la card (un botón propio de la sección). El «Guardar» de toda la pantalla va aparte, en una barra a todo el ancho.

Relacionados

Card Field Switch Form