componente · @solu30/ui-kit/navigation

ThemeToggle

Botón que alterna entre tema claro y oscuro, como ícono o como fila con etiqueta.

Seguir leyendo — 2 párrafos más

Icon button (or full-width row) that toggles between dark and light mode via next-themes. Renders Sun/Moon icons with CSS transition animations.

Use variant="full" for sidebar/drawer rows that need label + switch.

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

cmp-packages
gestorsalon
luigi

El componente, montado

Cargando el espécimen…

export function ThemeToggleSpecimen() {
  return (
    <Stage label="ThemeToggle · las tres variantes son tres lugares, no tres estéticas" tall>
      <div className="flex w-full flex-col gap-4 px-1 py-1">
        <div className="flex flex-col gap-1.5">
          <span className="text-[10px] uppercase tracking-wide text-content/50">
            menu — adentro de SidebarUserMenu (GestorSalón)
          </span>
          <div className="w-[240px] rounded-lg border border-content/10 bg-container p-1.5">
            <ThemeToggle variant="menu" />
          </div>
        </div>
        <div className="flex flex-col gap-1.5">
          <span className="text-[10px] uppercase tracking-wide text-content/50">
            full — fila suelta, en el pie del sidebar o en preferencias (Luigi, GestorSalón)
          </span>
          <div className="w-[240px] rounded-lg border border-content/10 bg-container p-1.5">
            <ThemeToggle variant="full" />
          </div>
        </div>
        <div className="flex flex-col gap-1.5">
          <span className="text-[10px] uppercase tracking-wide text-content/50">
            icon — el default, sin ningún consumidor real en los doce verticales
          </span>
          <div className="w-fit rounded-lg border border-content/10 bg-container p-1.5">
            <ThemeToggle variant="icon" />
          </div>
        </div>
      </div>
    </Stage>
  )
}

De specimens/navigation.tsx · ThemeToggleSpecimen: 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.

Cómo se usa

import { ThemeToggle } from '@solu30/ui-kit/navigation'

Props

3 props declaradas en los tipos de la versión instalada.
Prop	Requerida	Tipo	Qué hace
className	opcional	`string`	Additional CSS classes for the button wrapper.
ariaLabel	opcional	`string`	Accessible label. Defaults to "Toggle theme".
variant	opcional	`"icon" \| "full" \| "menu"`	Visual variant. "icon" = compact button; "full" = icon + label + switch row (standalone styling, p-2 + hover:bg-inner); "menu" = same content as "full" but padding/colors normalized to match SidebarUserMenu's item rows (px-2.5 py-2, hover:bg-surface, text-content) — use inside `<SidebarUserMenu themeToggle={...}>` for consistent left indent.

Ejemplo del paquete

// `menu` es la variante para adentro de un DropdownMenu; `icon` la de la barra superior.
<ThemeToggle variant="icon" ariaLabel="Cambiar tema" />

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.