kaizen-lib 0.2.8 → 0.2.10

package/README.md

@@ -12,7 +12,7 @@ styled-components con `moduleResolution: "bundler"`, así que lo transpilan ello
 |---|---|---|
 | `kaizen-lib/tokens` | Referencias `var(--kz-*)` tipadas | listo |
 | `kaizen-lib/tokens.css` | Valores por defecto, tema oscuro y claro | listo |
-| `kaizen-lib/ui` | Componentes (`IconButton`, `ReactionButton`, `Medidor`, `Relieve`, `LangSelector`, `Modal`) | en curso |
+| `kaizen-lib/ui` | Componentes (`IconButton`, `ReactionButton`, `Medidor`, `Relieve`, `LangSelector`, `Modal`, `Badge`, `BottomNav`, `DiscoHaxball`) | en curso |
 
 ## ¿Qué uso para qué?
 
@@ -30,7 +30,10 @@ alcanza, extendé el componente en vez de bypassearlo (ver `implement.md` del ha
 | Un ciclador de idioma con banderas en la topbar | `LangSelector` | reconstruir el ciclado a mano — ya lo resuelve, con `Relieve` incluido |
 | Un panel flotante que bloquea el resto de la página hasta que se resuelve (formulario, confirmación, contenido a pantalla completa) | `Modal` | un overlay propio — portal, foco atrapado, `Escape`, scroll bloqueado y anidamiento ya están resueltos ahí |
 | Un arco/medidor que muestra cuánto de un total está ocupado | `Medidor` | un `<progress>` o una barra propia |
+| Una píldora de estado (activo, vencido, un rol, una etiqueta) con fondo lavado y texto del mismo tono | `Badge` | un `styled.span` propio por producto — es exactamente lo que ya había triplicado |
+| La navegación principal fija abajo en el teléfono (ícono + rótulo por destino) | `BottomNav`, y `bottomNavOffset` de padding inferior en lo que no debe quedar tapado | una barra propia — ya estaba cuadruplicada |
 | Espaciado, radios, color, tipografía, sombra | `kaizen-lib/tokens` (`space`, `radius`, `fg`, `accent`, `font`, `shadow`, `relief`...) | un valor a mano — cada uno es una referencia `var(--kz-*)` |
+| Mostrar la ficha/disco de Haxball de un equipo (para elegir un equipo representativo, o para lucir el catálogo de camisetas) | `DiscoHaxball` + `CAMISETAS_HAXBALL` | una imagen propia — es una aproximación visual generada por SVG, no requiere ningún asset |
 
 Ningún componente trae íconos ni banderas: los recibe como `children`/`icono`, y el
 producto elige de dónde salen (`react-icons`, `react-country-flag`, SVG propio).
@@ -250,6 +253,50 @@ Lo que **no** trae: un `placement` lateral (drawer) y un padding compacto de cue
 casos de un solo consumidor cada uno (`components/ui/Dialog` de valle-verde) — se resuelven
 ahí con un wrapper local hasta que un segundo consumidor los pida acá.
 
+```tsx
+import { Badge } from 'kaizen-lib/ui';
+
+<Badge tone="success">Activo</Badge>
+<Badge tone="danger" bordered>Vencido</Badge>
+```
+
+**`Badge`** es una píldora de estado: fondo lavado + texto del mismo tono (`neutral` |
+`accent` | `success` | `danger` | `warning` | `info`, default `neutral`), mayúsculas
+apretadas. Elicitado de tres implementaciones ya duplicadas (taboo-next, valle-verde,
+kaizen-next) — el look es el de valle-verde. `bordered` agrega un borde de 1px del color
+pleno del tono, para cuando el fondo lavado solo no alcanza de contraste contra la
+superficie de atrás; no es una segunda estética, es el mismo tono con más peso.
+
+```tsx
+import Link from 'next/link';
+import { BottomNav, bottomNavOffset } from 'kaizen-lib/ui';
+
+<BottomNav
+  items={[{ id: 'inicio', label: 'Inicio', icon: <IoHomeOutline />, href: '/' }, ...]}
+  activeId={activo}
+  maxWidth={640}
+  ariaLabel="Secciones"
+  linkAs={Link}
+/>
+
+const Contenido = styled.main`padding-bottom: ${bottomNavOffset};`;
+```
+
+**`BottomNav`** es la barra de navegación fija abajo del teléfono: ícono + rótulo por
+destino, el activo con color de acento y una franja arriba (no sólo color). Elicitada de
+cuatro barras ya duplicadas (mixbol, valle-verde, tuxon, platenzen). Existe hasta
+`maxWidth` px y arriba se apaga por CSS, sin desmontarse, para no parpadear al hidratar.
+
+Qué decide el producto: `activeId` (si un destino matchea exacto o por prefijo es regla de
+sus rutas), `linkAs` (su router; sin él, `<a>`), y `ariaLabel` (su idioma, sin default).
+`onSelect(item, event)` se llama antes de navegar; con `event.preventDefault()` el
+destino hace otra cosa sin dejar de ser un link.
+
+Mientras se ve, publica `--kz-bottom-nav-offset` (su alto más el inset inferior del
+dispositivo). La barra es fija, así que el contenido lleva `bottomNavOffset` de padding
+inferior y lo que flota (FAB, avisos) lo suma a su `bottom`; donde la barra no está, vale
+`0px`.
+
 ## Desarrollo
 
 ```bash

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kaizen-lib",
-  "version": "0.2.8",
+  "version": "0.2.10",
   "description": "Tokens y componentes compartidos entre los fronts de Kaizen.",
   "license": "MIT",
   "author": "Nicolás Sandobal",

package/src/ui/Badge.tsx

@@ -0,0 +1,77 @@
+'use client';
+
+import type { HTMLAttributes, ReactNode } from 'react';
+import styled from 'styled-components';
+import { accent, danger, fg, font, info, radius, space, success, surface, warning } from '../tokens';
+
+/**
+ * El tono resuelve un TRÍO por tabla: fondo lavado, texto y el color pleno
+ * (para `bordered`) — así no puede salir una píldora con el texto invisible
+ * sobre su propio fondo, ni un borde que no combina con ninguno de los dos.
+ */
+export type BadgeTone = 'neutral' | 'accent' | 'success' | 'danger' | 'warning' | 'info';
+
+const TONOS: Record<BadgeTone, { fondo: string; texto: string; pleno: string }> = {
+  neutral: { fondo: surface.hover, texto: fg.muted, pleno: fg.muted },
+  accent: { fondo: accent.soft, texto: accent.fg, pleno: accent.DEFAULT },
+  success: { fondo: success.soft, texto: success.fg, pleno: success.DEFAULT },
+  danger: { fondo: danger.soft, texto: danger.fg, pleno: danger.DEFAULT },
+  warning: { fondo: warning.soft, texto: warning.fg, pleno: warning.DEFAULT },
+  info: { fondo: info.soft, texto: info.fg, pleno: info.DEFAULT },
+};
+
+type Props = {
+  tone?: BadgeTone;
+  /** Borde de 1px del color pleno del tono. Para una píldora que necesita más peso que el fondo lavado solo. */
+  bordered?: boolean;
+  children: ReactNode;
+  className?: string;
+};
+
+const Raiz = styled.span<{ $tone: BadgeTone; $bordered: boolean }>`
+  display: inline-flex;
+  align-items: center;
+  gap: ${space[1]};
+  padding: 3px ${space[2]};
+  border-radius: ${radius.sm};
+  border: 1px solid ${({ $tone, $bordered }) => ($bordered ? TONOS[$tone].pleno : 'transparent')};
+  font-size: ${font.xs};
+  font-weight: 600;
+  line-height: 1.35;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  white-space: nowrap;
+  background: ${({ $tone }) => TONOS[$tone].fondo};
+  color: ${({ $tone }) => TONOS[$tone].texto};
+`;
+
+/**
+ * Píldora de estado: fondo lavado + texto del mismo tono, mayúsculas
+ * apretadas. Elicitado de las implementaciones ya duplicadas en tres
+ * productos (taboo-next, valle-verde, kaizen-next) — el look es el de
+ * valle-verde, que era el más resuelto de los tres.
+ *
+ * ```tsx
+ * <Badge tone="success">Activo</Badge>
+ * <Badge tone="danger" bordered>Vencido</Badge>
+ * ```
+ *
+ * `bordered` es opcional: el fondo lavado solo ya es suficiente contraste
+ * para la mayoría de los casos (ver `bordered={false}`, el default). Se usa
+ * cuando la píldora flota sobre una superficie parecida a su propio fondo y
+ * necesita un borde para no perderse — no es una segunda variante estética,
+ * es el mismo tono con más peso.
+ */
+export function Badge({
+  tone = 'neutral',
+  bordered = false,
+  children,
+  className,
+  ...rest
+}: Props & Omit<HTMLAttributes<HTMLSpanElement>, keyof Props>) {
+  return (
+    <Raiz $tone={tone} $bordered={bordered} className={className} {...rest}>
+      {children}
+    </Raiz>
+  );
+}

package/src/ui/BottomNav.tsx

@@ -0,0 +1,185 @@
+'use client';
+
+import type { ElementType, MouseEvent, ReactNode } from 'react';
+import styled from 'styled-components';
+import { accent, fg, font, hairline, motion, ring, surface } from '../tokens';
+
+export type BottomNavItem = {
+  /** Identidad del destino: la key de React y lo que compara `activeId`. */
+  id: string;
+  /** Rótulo visible, siempre presente: en una barra de pulgar el ícono solo no alcanza. */
+  label: string;
+  /** El ícono. La librería no trae íconos: cada producto usa los suyos. */
+  icon: ReactNode;
+  href: string;
+};
+
+type Props = {
+  items: readonly BottomNavItem[];
+  /**
+   * El ítem de la pantalla actual, o `null` si ninguno. Lo resuelve el
+   * producto: si `/` matchea exacto o por prefijo es una regla de sus rutas,
+   * no de esta barra.
+   */
+  activeId: string | null;
+  /**
+   * Ancho máximo, en px, en el que la barra existe. Arriba se apaga por CSS
+   * —no se desmonta— para que no parpadee en la primera pintura: medir la
+   * ventana desde JS arranca en "desktop" hasta que hidrata.
+   */
+  maxWidth: number;
+  /** Nombre accesible del `<nav>`. Sin default: el idioma es del producto. */
+  ariaLabel: string;
+  /**
+   * Componente de link (el `<Link>` de Next). Sin esto, `<a>` pelado: la
+   * librería no sabe con qué router navega cada producto.
+   */
+  linkAs?: ElementType;
+  /**
+   * Se llama al tocar un ítem, antes de navegar. `event.preventDefault()`
+   * cancela la navegación: es como un producto le cambia la acción a un
+   * destino sin dejar de ser un link (valle-verde abre el escáner desde el
+   * ítem del medio cuando ya está en ese eje).
+   */
+  onSelect?: (item: BottomNavItem, event: MouseEvent<HTMLElement>) => void;
+  className?: string;
+};
+
+/** Alto de contenido de la barra. El inset del dispositivo se suma aparte. */
+const ALTO = '56px';
+
+/**
+ * Lo que la barra le quita al viewport por abajo: su alto más el inset del
+ * dispositivo. Existe sólo mientras la barra está montada y visible; fuera de
+ * eso cae a `0px`. El producto lo usa de padding inferior del contenido y lo
+ * suma al `bottom` de lo que flota (FAB, avisos), así nada queda debajo.
+ */
+export const bottomNavOffset = 'var(--kz-bottom-nav-offset, 0px)';
+
+/**
+ * Un `<style>` de React y no `createGlobalStyle`: va en el HTML del servidor
+ * igual, y vive y muere con la barra sin depender de cómo cada entorno
+ * inyecta estilos globales.
+ */
+function reglaDeOffset(maxWidth: number): string {
+  return `@media (max-width: ${maxWidth}px) { :root { --kz-bottom-nav-offset: calc(${ALTO} + env(safe-area-inset-bottom, 0px)); } }`;
+}
+
+const Barra = styled.nav<{ $maxWidth: number }>`
+  display: none;
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 100;
+  /* Translúcida y desenfocada: lo que scrollea por detrás se ve pasar, así la
+     barra se lee como una capa encima y no como el final de la página. El
+     relleno y el desenfoque van juntos: sin desenfoque, lo de atrás compite
+     con los rótulos. El prefijo -webkit- lo sigue pidiendo Safari en iOS, que
+     es justo el ancho donde esta barra vive. */
+  background: color-mix(in srgb, ${surface[1]} 88%, transparent);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  border-top: 1px solid ${hairline.DEFAULT};
+  padding: 0 env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
+
+  @media (max-width: ${({ $maxWidth }) => $maxWidth}px) {
+    display: flex;
+  }
+`;
+
+const Item = styled.a<{ $active: boolean }>`
+  position: relative;
+  flex: 1 1 0;
+  min-width: 0;
+  height: ${ALTO};
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 2px;
+  color: ${({ $active }) => ($active ? accent.DEFAULT : fg.muted)};
+  font-family: inherit;
+  text-decoration: none;
+  transition: color ${motion.fast} ${motion.ease};
+
+  &:focus-visible {
+    outline: 2px solid ${ring};
+    outline-offset: -2px;
+  }
+
+  /* "Acá estoy" no se dice sólo con color: una franja arriba del activo. */
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 25%;
+    right: 25%;
+    height: 2px;
+    border-radius: 0 0 2px 2px;
+    background: ${({ $active }) => ($active ? accent.DEFAULT : 'transparent')};
+  }
+
+  svg {
+    flex-shrink: 0;
+    width: 22px;
+    height: 22px;
+    font-size: 22px;
+  }
+`;
+
+const Rotulo = styled.span<{ $active: boolean }>`
+  max-width: 100%;
+  font-size: ${font['2xs']};
+  font-weight: ${({ $active }) => ($active ? 600 : 500)};
+  line-height: 1.1;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;
+
+/**
+ * Navegación inferior fija para el teléfono: ícono + rótulo por destino, el
+ * activo con color y franja. Elicitada de cuatro implementaciones ya
+ * duplicadas (mixbol, valle-verde, tuxon, platenzen).
+ *
+ * Mientras se ve, publica `--kz-bottom-nav-offset` (ver `bottomNavOffset`):
+ * es fija, así que sin ese padding el final de la página queda debajo.
+ *
+ * ```tsx
+ * <BottomNav
+ *   items={ITEMS}
+ *   activeId={ITEMS.find((i) => i.href === pathname)?.id ?? null}
+ *   maxWidth={640}
+ *   ariaLabel="Secciones"
+ *   linkAs={Link}
+ * />
+ * ```
+ */
+export function BottomNav({ items, activeId, maxWidth, ariaLabel, linkAs, onSelect, className }: Props) {
+  return (
+    <>
+      <style>{reglaDeOffset(maxWidth)}</style>
+      <Barra $maxWidth={maxWidth} aria-label={ariaLabel} className={className}>
+        {items.map((item) => {
+          const active = item.id === activeId;
+          return (
+            <Item
+              key={item.id}
+              as={linkAs}
+              href={item.href}
+              $active={active}
+              aria-current={active ? 'page' : undefined}
+              onClick={onSelect ? (evento: MouseEvent<HTMLElement>) => onSelect(item, evento) : undefined}
+            >
+              <span aria-hidden="true" style={{ display: 'contents' }}>
+                {item.icon}
+              </span>
+              <Rotulo $active={active}>{item.label}</Rotulo>
+            </Item>
+          );
+        })}
+      </Barra>
+    </>
+  );
+}

package/src/ui/DiscoHaxball.tsx

@@ -0,0 +1,81 @@
+'use client';
+
+import { useId } from 'react';
+import styled from 'styled-components';
+import { CAMISETAS_HAXBALL, type CamisetaHaxball, type NombreCamiseta } from './camisetasHaxball';
+
+export { CAMISETAS_HAXBALL } from './camisetasHaxball';
+export type { CamisetaHaxball, NombreCamiseta } from './camisetasHaxball';
+
+type Props = {
+  /** Una clave de `CAMISETAS_HAXBALL`, o una camiseta suelta para previsualizar valores que todavía no están en el catálogo. */
+  camiseta: NombreCamiseta | CamisetaHaxball;
+  /** Lado del cuadrado, en px. */
+  size?: number;
+  className?: string;
+};
+
+/** Ancho de cada franja, en unidades del `viewBox` (0 a 100). No sale de ningún dato de Haxball: es la aproximación que arma un patrón legible sobre un disco de ese tamaño. */
+const GROSOR_FRANJA = 16;
+
+/** Alto de sobra del patrón para que, rotado a cualquier ángulo, siga cubriendo el círculo entero (diagonal de un cuadrado de 100 ≈ 141). */
+const ALTO_PATRON = 200;
+
+function resolverCamiseta(camiseta: Props['camiseta']): CamisetaHaxball {
+  return typeof camiseta === 'string' ? CAMISETAS_HAXBALL[camiseta] : camiseta;
+}
+
+const Svg = styled.svg`
+  display: block;
+  flex-shrink: 0;
+`;
+
+/**
+ * El disco de Haxball: la ficha con la que un jugador aparece en la cancha,
+ * pintada con las franjas que arma `room.setTeamColors(equipo, angulo,
+ * colorTexto, colores)` — la única personalización visual que da la API del
+ * juego, y la fuente de `CAMISETAS_HAXBALL` (copiada de
+ * `kaizen-bot/structure/base.js`).
+ *
+ * **Es una aproximación, no un renderer pixel-perfect.** No hay documentación
+ * pública del algoritmo exacto de Haxball (grosor real de franja, radio real
+ * del disco): esto reproduce el modelo general —franjas paralelas rotadas por
+ * `angulo`, cicladas por `colores`— calibrado a ojo. Si en algún momento hace
+ * falta fidelidad exacta, hay que calibrarlo contra capturas del juego real,
+ * no contra esta implementación.
+ *
+ * No dibuja `colorTexto`: en el juego es el color del número de jugador sobre
+ * el disco, y acá no hay ningún número que mostrar (esto es un selector fuera
+ * de partida, no una ficha en cancha). El dato queda en `CamisetaHaxball` por
+ * si el día de mañana hace falta superponer una inicial o un número.
+ */
+export function DiscoHaxball({ camiseta, size = 64, className }: Props) {
+  const { angulo, colores, nombre } = resolverCamiseta(camiseta);
+  const patternId = `disco-haxball-${useId()}`;
+
+  return (
+    <Svg
+      viewBox="0 0 100 100"
+      width={size}
+      height={size}
+      role="img"
+      aria-label={`Camiseta de ${nombre}`}
+      className={className}
+    >
+      <defs>
+        <pattern
+          id={patternId}
+          patternUnits="userSpaceOnUse"
+          width={GROSOR_FRANJA * colores.length}
+          height={ALTO_PATRON}
+          patternTransform={`rotate(${angulo} 50 50)`}
+        >
+          {colores.map((color, indice) => (
+            <rect key={indice} x={indice * GROSOR_FRANJA} y={0} width={GROSOR_FRANJA} height={ALTO_PATRON} fill={color} />
+          ))}
+        </pattern>
+      </defs>
+      <circle cx={50} cy={50} r={48} fill={`url(#${patternId})`} />
+    </Svg>
+  );
+}

package/src/ui/camisetasHaxball.ts

@@ -0,0 +1,128 @@
+/**
+ * Catálogo de camisetas de Haxball, copiado de `global_shirts` en
+ * `kaizen-bot/structure/base.js` — mismo patrón que cualquier catálogo
+ * portado entre repos de Kaizen (ver `tagsValoracionCancha.ts` en
+ * mixbol-front): **tocar el original implica revisar esta copia**, no hay
+ * sincronización automática.
+ *
+ * Dos cosas del original que NO se trajeron:
+ * - El 4to valor numérico de cada entrada (`[angulo, colorTexto, colores, N,
+ *   nombreNarrativo]`). El propósito es real —agrupar camisetas parecidas
+ *   para que la rotación automática de kaizen-bot no le toque a un equipo el
+ *   mismo color de familia que el rival (Brasil vs. Villarreal, amarillo
+ *   contra amarillo)—, pero en el código de hoy ese propósito lo cumple otra
+ *   cosa: `homeostatic_changeRedShirt` decide el choque con
+ *   `host_shirtDistance`, una distancia de color calculada de verdad sobre
+ *   `colorTexto` + `colores` (`base.js`), no con este número — no encontré
+ *   ningún lugar del repo que lea el índice `[3]`. Como acá no hay rotación
+ *   automática ni riesgo de choque (es un selector fijo, no equipos
+ *   enfrentados en vivo), no hace falta portarlo.
+ * - El texto narrativo de chat (`" booocaaa"`, `"l equipo con camiseta
+ *   oscura"`): está pensado para completar una frase ("cambiaste tu camiseta
+ *   a la de..."), no para ser un nombre de exhibición. `nombre` es un rótulo
+ *   prolijo nuevo, escrito para esta lista.
+ */
+
+export interface CamisetaHaxball {
+  /** Nombre para mostrar en un selector o como texto alternativo. */
+  nombre: string;
+  /** Ángulo de las franjas, en grados — el mismo valor que recibe `room.setTeamColors`. */
+  angulo: number;
+  /** Color del número de jugador sobre el disco, en Haxball. `DiscoHaxball` no lo dibuja hoy (no hay número que mostrar fuera de una partida). */
+  colorTexto: string;
+  /** 1 a 3 colores que arman las franjas, en el orden en que se ciclan. */
+  colores: string[];
+}
+
+export const CAMISETAS_HAXBALL = {
+  // Equipos de fantasía
+  pataflaca: { nombre: 'Pataflaca', angulo: 0, colorTexto: '#ffffff', colores: ['#000000', '#c26366', '#000000'] },
+  negro: { nombre: 'Negro', angulo: 0, colorTexto: '#ffffff', colores: ['#000000'] },
+  blanco: { nombre: 'Blanco', angulo: 0, colorTexto: '#000000', colores: ['#ffffff'] },
+  pink: { nombre: 'Rosa', angulo: 15, colorTexto: '#6b0068', colores: ['#d47b9f', '#e685ac', '#ff94bf'] },
+  hack: { nombre: 'Hacker', angulo: 60, colorTexto: '#00ff00', colores: ['#000000', '#002602', '#000000'] },
+  red: { nombre: 'Rojo', angulo: 132, colorTexto: '#ffffff', colores: ['#ba0202', '#540101', '#ba0202'] },
+  blue: { nombre: 'Azul', angulo: 60, colorTexto: '#ffffff', colores: ['#0080ff', '#004077', '#002033'] },
+  lila: { nombre: 'Lila', angulo: 60, colorTexto: '#efff12', colores: ['#ff03d5', '#991188', '#661155'] },
+  green: { nombre: 'Verde', angulo: 60, colorTexto: '#f7ff19', colores: ['#44bb1e', '#177711', '#0d3304'] },
+  violet: { nombre: 'Violeta', angulo: 13, colorTexto: '#ffffff', colores: ['#6e00ff', '#6e00ff', '#000000'] },
+  aqua: { nombre: 'Aguamarina', angulo: 60, colorTexto: '#00ffd5', colores: ['#003029', '#00211c', '#00120f'] },
+  salmon: { nombre: 'Salmón', angulo: 60, colorTexto: '#000000', colores: ['#ff5e5e', '#ff8c8c', '#ffbe99'] },
+  halloween1: { nombre: 'Vampiro', angulo: 120, colorTexto: '#a2ff00', colores: ['#463e70', '#513f70', '#5c3f70'] },
+  halloween2: { nombre: 'Zombie', angulo: 70, colorTexto: '#a80000', colores: ['#00ff11', '#99c211'] },
+  tornasolado: { nombre: 'Tornasolado', angulo: 60, colorTexto: '#ffffff', colores: ['#870fff', '#6e42ff', '#4d58ff'] },
+  verano: { nombre: 'Verano', angulo: 60, colorTexto: '#072940', colores: ['#ff7100', '#ff7142', '#ff7162'] },
+
+  // Clubes argentinos
+  boca: { nombre: 'Boca Juniors', angulo: 90, colorTexto: '#ffffff', colores: ['#0c004d', '#ffd500', '#0c004d'] },
+  bocaa: { nombre: 'Boca Juniors (alterna)', angulo: 90, colorTexto: '#ffffff', colores: ['#ffd500', '#0c004d', '#ffd500'] },
+  river: { nombre: 'River Plate', angulo: 40, colorTexto: '#000000', colores: ['#ffffff', '#e31212', '#ffffff'] },
+  independiente: { nombre: 'Independiente', angulo: 0, colorTexto: '#ffffff', colores: ['#ff0000', '#b50000', '#9e0500'] },
+  racing: { nombre: 'Racing Club', angulo: 0, colorTexto: '#000000', colores: ['#00a2ff', '#ffffff', '#00a2ff'] },
+
+  // Clubes sudamericanos
+  flamengo: { nombre: 'Flamengo', angulo: 90, colorTexto: '#ffffff', colores: ['#1f1f1f', '#ff1414', '#1f1f1f'] },
+  gremio: { nombre: 'Grêmio', angulo: 0, colorTexto: '#ffffff', colores: ['#000000', '#2457ff', '#000000'] },
+  fluminense: { nombre: 'Fluminense', angulo: 0, colorTexto: '#ffffff', colores: ['#004537', '#75021a', '#004537'] },
+  palmeiras: { nombre: 'Palmeiras', angulo: 0, colorTexto: '#ffffff', colores: ['#004f00', '#003b00', '#004f00'] },
+  corinthians: { nombre: 'Corinthians', angulo: 0, colorTexto: '#d60000', colores: ['#ffffff', '#000000', '#ffffff'] },
+  penarol: { nombre: 'Peñarol', angulo: 0, colorTexto: '#ffffff', colores: ['#000000', '#ffee00', '#000000'] },
+  nacional: { nombre: 'Nacional (Uruguay)', angulo: 40, colorTexto: '#c90000', colores: ['#0011ff', '#ffffff', '#0011ff'] },
+  boston: { nombre: 'Boston River', angulo: 40, colorTexto: '#d9ffe0', colores: ['#058717', '#de2f2f', '#058717'] },
+  danubio: { nombre: 'Danubio', angulo: 40, colorTexto: '#ff0000', colores: ['#ffffff', '#000000', '#ffffff'] },
+  fenix: { nombre: 'Fénix (Uruguay)', angulo: 0, colorTexto: '#a67014', colores: ['#ffffff', '#671f96'] },
+  atleticonacional: { nombre: 'Atlético Nacional', angulo: 37, colorTexto: '#dbdbdb', colores: ['#059c19', '#048a16', '#047d14'] },
+  millonarios: { nombre: 'Millonarios', angulo: 37, colorTexto: '#dbdbdb', colores: ['#0843a8', '#073b94', '#063380'] },
+
+  // Selecciones
+  argentina: { nombre: 'Argentina', angulo: 0, colorTexto: '#000000', colores: ['#96c7ff', '#ffffff', '#96c7ff'] },
+  españa: { nombre: 'España', angulo: 90, colorTexto: '#000000', colores: ['#e61700', '#ffe121', '#e61700'] },
+  inglaterra: { nombre: 'Inglaterra', angulo: 40, colorTexto: '#de0000', colores: ['#d7f0ff', '#ffffff', '#d7f0ff'] },
+  francia: { nombre: 'Francia', angulo: 90, colorTexto: '#ffffff', colores: ['#156485', '#26294f', '#1b1d38'] },
+  alemania: { nombre: 'Alemania', angulo: 270, colorTexto: '#ffffff', colores: ['#ffef5e', '#ff120a', '#002033'] },
+  italia: { nombre: 'Italia', angulo: 0, colorTexto: '#000000', colores: ['#00ff00', '#fee8ff', '#ff1c03'] },
+  brasil: { nombre: 'Brasil', angulo: 90, colorTexto: '#11520a', colores: ['#4ac900', '#fff700', '#fff700'] },
+  uruguay: { nombre: 'Uruguay', angulo: 90, colorTexto: '#000000', colores: ['#94b4eb', '#69aaff'] },
+  eeuu: { nombre: 'Estados Unidos', angulo: 0, colorTexto: '#00345c', colores: ['#a30000', '#e80000', '#a30000'] },
+  canada: { nombre: 'Canadá', angulo: 0, colorTexto: '#470700', colores: ['#cc0000', '#e8e8e8', '#cc0000'] },
+  mexico: { nombre: 'México', angulo: 0, colorTexto: '#030303', colores: ['#009919', '#ffffff', '#fc0000'] },
+  colombia: { nombre: 'Colombia', angulo: 90, colorTexto: '#ffffff', colores: ['#f7ff00', '#0022ff', '#fc0000'] },
+  bolivia: { nombre: 'Bolivia', angulo: -90, colorTexto: '#ded81f', colores: ['#10a11e', '#11870c', '#0b6911'] },
+  holanda: { nombre: 'Países Bajos', angulo: 0, colorTexto: '#0831ff', colores: ['#ed5a11', '#ff6112', '#ed5a11'] },
+  portugal: { nombre: 'Portugal', angulo: 0, colorTexto: '#ffff14', colores: ['#c90000', '#2d8501'] },
+  egipto: { nombre: 'Egipto', angulo: 90, colorTexto: '#ffff14', colores: ['#c90000', '#ffffff', '#000000'] },
+  ucrania: { nombre: 'Ucrania', angulo: 90, colorTexto: '#000000', colores: ['#004fd9', '#e6de00'] },
+  suecia: { nombre: 'Suecia', angulo: 0, colorTexto: '#030302', colores: ['#4059ff', '#ffff00', '#4059ff'] },
+  belgica: { nombre: 'Bélgica', angulo: 0, colorTexto: '#ffffff', colores: ['#050505', '#fff700', '#c91010'] },
+  venezuela: { nombre: 'Venezuela', angulo: 90, colorTexto: '#ffffff', colores: ['#fff700', '#090ead', '#d60000'] },
+  nigeria: { nombre: 'Nigeria', angulo: 0, colorTexto: '#030303', colores: ['#086302', '#ffffff', '#086302'] },
+  marruecos: { nombre: 'Marruecos', angulo: 0, colorTexto: '#133800', colores: ['#cc1b0e', '#cc1b0e', '#cc1b0e'] },
+  japon: { nombre: 'Japón', angulo: 0, colorTexto: '#ffffff', colores: ['#0033aa', '#0033aa', '#0033aa'] },
+  corea: { nombre: 'Corea del Sur', angulo: 90, colorTexto: '#000000', colores: ['#ffffff', '#ff0000', '#ffffff'] },
+  croacia: { nombre: 'Croacia', angulo: 0, colorTexto: '#000000', colores: ['#ffffff', '#d60000', '#ffffff'] },
+  suiza: { nombre: 'Suiza', angulo: 0, colorTexto: '#ffffff', colores: ['#d60000', '#d60000', '#d60000'] },
+  dinamarca: { nombre: 'Dinamarca', angulo: 0, colorTexto: '#ffffff', colores: ['#c00000', '#c00000', '#c00000'] },
+  serbia: { nombre: 'Serbia', angulo: 90, colorTexto: '#ffffff', colores: ['#c60000', '#0033aa', '#ffffff'] },
+  polonia: { nombre: 'Polonia', angulo: 90, colorTexto: '#d60000', colores: ['#ffffff', '#ffffff', '#d60000'] },
+  australia: { nombre: 'Australia', angulo: 0, colorTexto: '#ffd700', colores: ['#006b3f', '#006b3f', '#006b3f'] },
+  senegal: { nombre: 'Senegal', angulo: 0, colorTexto: '#000000', colores: ['#00853f', '#fdef42', '#e31b23'] },
+  camerun: { nombre: 'Camerún', angulo: 0, colorTexto: '#ffd700', colores: ['#007a33', '#c8102e', '#fcd116'] },
+  argelia: { nombre: 'Argelia', angulo: 90, colorTexto: '#d60000', colores: ['#ffffff', '#0b8a3e', '#ffffff'] },
+  peru: { nombre: 'Perú', angulo: 45, colorTexto: '#d60000', colores: ['#ffffff', '#ffffff', '#ffffff'] },
+  chile: { nombre: 'Chile', angulo: 90, colorTexto: '#ffffff', colores: ['#0039a6', '#ffffff', '#d52b1e'] },
+  paraguay: { nombre: 'Paraguay', angulo: 90, colorTexto: '#0039a6', colores: ['#d60000', '#ffffff', '#d60000'] },
+  ecuador: { nombre: 'Ecuador', angulo: 90, colorTexto: '#000000', colores: ['#ffd100', '#0033a0', '#d60000'] },
+  costarica: { nombre: 'Costa Rica', angulo: 90, colorTexto: '#ffffff', colores: ['#0033a0', '#d60000', '#0033a0'] },
+  canadaAlt: { nombre: 'Canadá (alterna)', angulo: 0, colorTexto: '#ffffff', colores: ['#d60000', '#d60000', '#d60000'] },
+  gales: { nombre: 'Gales', angulo: 0, colorTexto: '#ffffff', colores: ['#c8102e', '#c8102e', '#c8102e'] },
+  escocia: { nombre: 'Escocia', angulo: 0, colorTexto: '#ffffff', colores: ['#005eb8', '#005eb8', '#005eb8'] },
+  irlanda: { nombre: 'Irlanda', angulo: 90, colorTexto: '#ffffff', colores: ['#009a44', '#ffffff', '#ff8200'] },
+  noruega: { nombre: 'Noruega', angulo: 0, colorTexto: '#ffffff', colores: ['#ba0c2f', '#ba0c2f', '#ba0c2f'] },
+  turquia: { nombre: 'Turquía', angulo: 0, colorTexto: '#ffffff', colores: ['#e30a17', '#e30a17', '#e30a17'] },
+  arabia: { nombre: 'Arabia Saudita', angulo: 0, colorTexto: '#ffffff', colores: ['#006c35', '#006c35', '#006c35'] },
+  iran: { nombre: 'Irán', angulo: 90, colorTexto: '#ffffff', colores: ['#239f40', '#ffffff', '#da0000'] },
+  qatar: { nombre: 'Qatar', angulo: 0, colorTexto: '#ffffff', colores: ['#8a1538', '#8a1538', '#8a1538'] },
+  nuevazelanda: { nombre: 'Nueva Zelanda', angulo: 0, colorTexto: '#ffffff', colores: ['#111111', '#111111', '#111111'] },
+} as const satisfies Record<string, CamisetaHaxball>;
+
+export type NombreCamiseta = keyof typeof CAMISETAS_HAXBALL;

package/src/ui/index.ts

@@ -9,3 +9,9 @@ export { LangSelector } from './LangSelector';
 export type { OpcionDeIdioma } from './LangSelector';
 export { Modal } from './Modal';
 export type { ModalSize } from './Modal';
+export { Badge } from './Badge';
+export type { BadgeTone } from './Badge';
+export { BottomNav, bottomNavOffset } from './BottomNav';
+export type { BottomNavItem } from './BottomNav';
+export { DiscoHaxball, CAMISETAS_HAXBALL } from './DiscoHaxball';
+export type { CamisetaHaxball, NombreCamiseta } from './DiscoHaxball';