componente · @solu30/ui-kit/navigation

SegmentedControl

Control segmentado de opciones con texto e íconos, que también sirve como navegación por enlaces.

Seguir leyendo — 2 párrafos más

Segmented control for toggling between named options with optional icons and labels.

Supports text labels, icons, sizes (xs/sm/md) and tones (default/accent). For icon-only toggles with no label/tone needs, prefer ViewModeToggle.

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

TheCharterPanel
cmp-packages
dietaly
gestorsalon
luigi
raquetea

El componente, montado

Cargando el espécimen…

export function SegmentedControlMatrix() {
  const [range, setRange] = useState('mes')
  const [tone, setTone] = useState('lista')
  const [view, setView] = useState<'grid' | 'list'>('grid')

  return (
    <Stage label="SegmentedControl · modo valor / modo navegación — y ViewModeToggle, la misma idea otra vez" tall wide>
      <div className="flex w-full flex-col gap-5">
        <div className="flex flex-wrap items-center gap-4">
          <SegmentedControl
            value={range}
            onChange={setRange}
            size="sm"
            tone="default"
            options={[
              { value: 'semana', label: 'Semana' },
              { value: 'mes', label: 'Mes' },
              { value: 'temporada', label: 'Temporada' },
            ]}
          />
          <SegmentedControl
            value={tone}
            onChange={setTone}
            size="sm"
            tone="accent"
            options={[
              { value: 'lista', label: 'Lista' },
              { value: 'calendario', label: 'Calendario' },
            ]}
          />
          <ViewModeToggle
            value={view}
            onChange={setView}
            ariaLabel="Vista de la flota"
            options={[
              { value: 'grid', icon: <IconGrid className="h-4 w-4" />, title: 'Grilla' },
              { value: 'list', icon: <IconMenu className="h-4 w-4" />, title: 'Lista' },
            ]}
          />
        </div>
        <div className="flex flex-col gap-1.5">
          <span className="text-[10px] uppercase tracking-wide text-content/50">
            modo navegación — options con href, sin renderLink degrada a &lt;a href=&quot;#&quot;&gt; (inerte a propósito)
          </span>
          <SegmentedControl
            value="reservas"
            onChange={() => {}}
            size="sm"
            options={[
              { value: 'reservas', label: 'Reservas', href: '#' },
              { value: 'clientes', label: 'Clientes', href: '#' },
              { value: 'facturacion', label: 'Facturación', href: '#' },
            ]}
          />
        </div>
      </div>
    </Stage>
  )
}

De specimens/navigation.tsx · SegmentedControlMatrix: 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 { SegmentedControl } from '@solu30/ui-kit/navigation'

Props

2 props declaradas en los tipos de la versión instalada.
Prop	Requerida	Tipo	Qué hace
options	sí	`SegmentedOption<T>[]`	—
renderLink	opcional	`undefined`	—

Ejemplo del paquete

import { LayoutGrid, LayoutList } from 'lucide-react'

<SegmentedControl
  value={mode}
  onChange={setMode}
  options={[
    { value: 'grid', icon: <LayoutGrid className="h-3 w-3" />, label: 'Grid', title: 'Grid view' },
    { value: 'list', icon: <LayoutList className="h-3 w-3" />, label: 'List', title: 'List view' },
  ]}
/>

<SegmentedControl
  value={activeSection}
  onChange={() => {}}
  options={[
    { value: 'plantillas', label: 'Plantillas', href: '/rrhh/tareas/plantillas' },
    { value: 'informes', label: 'Informes', href: '/rrhh/cursos/informes' },
  ]}
  renderLink={({ href, ...props }) => <Link href={href} {...props} />}
/>

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.