kaizen-lib 0.2.8 → 0.2.9

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`) | en curso |
 
 ## ¿Qué uso para qué?
 
@@ -30,6 +30,7 @@ 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 |
 | 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-*)` |
 
 Ningún componente trae íconos ni banderas: los recibe como `children`/`icono`, y el
@@ -250,6 +251,20 @@ 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.
+
 ## Desarrollo
 
 ```bash

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kaizen-lib",
-  "version": "0.2.8",
+  "version": "0.2.9",
   "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/index.ts

@@ -9,3 +9,5 @@ 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';