kaizen-lib 0.2.0 → 0.2.1

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 (por ahora `IconButton`) | en curso |
+| `kaizen-lib/ui` | Componentes (`IconButton`, `ReactionButton`, `Medidor`, `Relieve`) | en curso |
 
 ## Instalación
 
@@ -89,6 +89,88 @@ qué.
 
 La librería no trae íconos: cada producto usa los suyos.
 
+```tsx
+import { ReactionButton } from 'kaizen-lib/ui';
+
+<ReactionButton tone="danger" active={likeado} glow count={likes} label={`Me gusta, ${likes}`}>
+  <IconoCorazon />
+</ReactionButton>
+```
+
+**`ReactionButton`** es un ícono que cambia de color al reaccionar (`tone`: `neutral` |
+`accent` | `success` | `danger` | `warning` | `info`), con resplandor opcional (`glow`,
+del mismo color vía `currentColor`) y una cuenta al lado (`count`; `0` se muestra, no es
+una ausencia). No es `IconButton` con más props: **nunca tiñe el fondo**. `IconButton` es
+"esto está seleccionado" (la página actual, un filtro aplicado) y por eso tiñe el círculo
+entero; `ReactionButton` es "reaccioné con esto" (un me gusta, un guardado), y ahí sólo el
+ícono cambia — un corazón marcado no necesita, además, un círculo rosa detrás.
+
+Un color que los seis tonos no cubren —la marca de un producto, no una categoría
+semántica— se pisa con `style`, porque el color activo sale de la variable CSS
+`--kz-icon-on` y un estilo en línea le gana a la regla de la librería:
+
+```tsx
+<ReactionButton
+  active={guardado}
+  style={{ '--kz-icon-on': 'var(--mi-color-de-marca)' } as React.CSSProperties}
+  label="Guardar"
+>
+  <IconoMarcador />
+</ReactionButton>
+```
+
+```tsx
+import { Medidor } from 'kaizen-lib/ui';
+
+<Medidor valor={8} maximo={10} sentido="menos-es-mejor" label="Anotados: 8 de 10" />
+```
+
+**`Medidor`** es un arco que dice cuánto de un total está ocupado, pintado por escalón. No es
+un control: es un `role="img"`, así que si el dato tiene que llevar a algún lado lo envuelve
+un link o un botón del producto. `label` es obligatorio y va en palabras — el arco y el
+número del centro son decorativos, y el color nunca es el único portador del significado.
+
+Los cuatro escalones salen de la **proporción** `valor / maximo`, no del valor (8 no significa
+lo mismo sobre 10 que sobre 22). Sobre una escala de 0 a 10: `10` tope, `8` a `9,99` alto,
+`4` a `7,99` medio, menos de `4` bajo. Cada corte es inclusivo abajo.
+
+`sentido` es obligatorio y decide qué extremo es el bueno, porque eso lo define lo que el
+número *significa* en el producto y no el componente:
+
+| Escalón | `menos-es-mejor` | `mas-es-mejor` |
+|---|---|---|
+| bajo (< 40%) | verde | rojo |
+| medio (40–79%) | azul | naranja |
+| alto (80–99%) | naranja | azul |
+| tope (100%) | rojo | verde |
+
+`menos-es-mejor` es "cuánto lugar queda": vacío es una oportunidad, lleno una puerta
+cerrada. `mas-es-mejor` es un progreso o una meta. Usa los tonos `success`, `info`,
+`warning` y `danger`, así que un producto que ya los definió no declara nada nuevo. El
+centro muestra `valor/maximo` y se reemplaza con `children` cuando el formato es del producto.
+
+```tsx
+import { IconButton, Relieve } from 'kaizen-lib/ui';
+import Link from 'next/link';
+
+<Relieve>
+  <IconButton label="Notificaciones, 3 sin leer" badge={3}><IconoCampana /></IconButton>
+</Relieve>
+
+<Relieve $prendido={enPerfil}>
+  <IconButton as={Link} href="/perfil" active={enPerfil} label="Perfil"><IconoPerfil /></IconButton>
+</Relieve>
+```
+
+**`Relieve`** envuelve a `IconButton` con el relieve neumórfico: un círculo sin relleno ni
+borde, dibujado por un par de sombras opuestas (`--kz-relief-out`) que se invierten al
+presionar (`--kz-relief-in`) o con `$prendido` (el equivalente sostenido de "esto está
+activo" o "vos estás acá"). Es un `<span>` alrededor del control y no un
+`styled(IconButton)`: `IconButton` es polimórfico (`as`), y styled-components
+intercepta el `as` de cualquier componente que envuelve, así que envolverlo así lo haría
+saltear toda su lógica. El relieve es neutro por defecto (negro/blanco) — un producto con
+marca lo tiñe redefiniendo esos tres tokens, igual que con cualquier otro.
+
 ## Desarrollo
 
 ```bash

package/package.json

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

package/src/tokens/defaults.css

@@ -87,6 +87,17 @@
   --kz-shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.5);
   --kz-shadow-xl: 0 24px 60px rgba(0, 0, 0, 0.6);
 
+  /* ---- Relieve neumórfico -------------------------------------------------
+     Par de sombras opuestas para un control sin relleno ni borde: el círculo
+     lo dibuja la luz, no un fondo. `out` es el reposo, `out-strong` el hover
+     y `in` (invertida) el presionado o el "esto está activo". Neutras —negro
+     y blanco— porque la paleta por defecto ya lo es; un producto con marca
+     las tiñe (ver Relieve en ui/, y el ejemplo de mixbol-front en el README:
+     ahí la sombra oscura sale del azul de marca, no de un negro genérico). */
+  --kz-relief-out: 3px 3px 7px rgba(0, 0, 0, 0.5), -3px -3px 7px rgba(255, 255, 255, 0.05);
+  --kz-relief-out-strong: 4px 4px 10px rgba(0, 0, 0, 0.6), -4px -4px 10px rgba(255, 255, 255, 0.08);
+  --kz-relief-in: inset 3px 3px 6px rgba(0, 0, 0, 0.55), inset -3px -3px 6px rgba(255, 255, 255, 0.06);
+
   /* ---- Espaciado ---------------------------------------------------------
      Escala en pasos de 4px. Los saltos (no hay 7, 9, 11) son a propósito: una
      escala continua no es una escala, es un número libre con prefijo. */
@@ -115,6 +126,7 @@
   --kz-font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
   --kz-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
 
+  --kz-font-2xs: 11px;
   --kz-font-xs: 12px;
   --kz-font-sm: 14px;
   --kz-font-md: 16px;
@@ -182,4 +194,8 @@
   --kz-shadow-md: 0 4px 12px rgba(16, 24, 40, 0.1);
   --kz-shadow-lg: 0 10px 30px rgba(16, 24, 40, 0.12);
   --kz-shadow-xl: 0 24px 60px rgba(16, 24, 40, 0.16);
+
+  --kz-relief-out: 3px 3px 6px rgba(16, 24, 40, 0.14), -3px -3px 6px rgba(255, 255, 255, 0.9);
+  --kz-relief-out-strong: 4px 4px 9px rgba(16, 24, 40, 0.18), -4px -4px 9px rgba(255, 255, 255, 0.95);
+  --kz-relief-in: inset 3px 3px 6px rgba(16, 24, 40, 0.16), inset -3px -3px 6px rgba(255, 255, 255, 0.85);
 }

package/src/tokens/index.ts

@@ -104,6 +104,17 @@ export const shadow = {
   xl: 'var(--kz-shadow-xl)',
 } as const;
 
+/**
+ * Relieve neumórfico: el par de sombras opuestas que usa `Relieve` (`ui/`).
+ * `out` es el reposo y el hover fuerte, `in` es el presionado o "esto está
+ * prendido" — ver el docblock de `Relieve` para cuándo va cada uno.
+ */
+export const relief = {
+  out: 'var(--kz-relief-out)',
+  outStrong: 'var(--kz-relief-out-strong)',
+  in: 'var(--kz-relief-in)',
+} as const;
+
 /** Escala de espaciado, en pasos de 4px. Las claves salteadas son a propósito. */
 export const space = {
   1: 'var(--kz-space-1)',
@@ -131,6 +142,7 @@ export const radius = {
 export const font = {
   family: 'var(--kz-font-family)',
   mono: 'var(--kz-font-mono)',
+  '2xs': 'var(--kz-font-2xs)',
   xs: 'var(--kz-font-xs)',
   sm: 'var(--kz-font-sm)',
   md: 'var(--kz-font-md)',

package/src/ui/IconButton.tsx

@@ -2,17 +2,10 @@
 
 import type { ComponentPropsWithoutRef, ElementType, MouseEvent } from 'react';
 import styled, { css } from 'styled-components';
-import { accent, danger, fg, font, motion, radius, ring, surface } from '../tokens';
+import { accent, danger, fg, font, radius, surface } from '../tokens';
+import { formaBase, type IconButtonSize } from './shell';
 
-export type IconButtonSize = 'sm' | 'md' | 'lg';
-
-/**
- * Lado del círculo, en px. `lg` es el área táctil mínima de una topbar móvil
- * (44px): si el control va en una barra que se toca con el pulgar, es el que
- * corresponde. No son tokens porque son medidas de este componente, no una
- * escala que otros usen.
- */
-const LADO: Record<IconButtonSize, number> = { sm: 32, md: 40, lg: 44 };
+export type { IconButtonSize };
 
 /** Tope del badge: "+9" ocupa lo mismo que un dígito y dice lo mismo. */
 const BADGE_MAXIMO = 9;
@@ -53,35 +46,9 @@ type Props<T extends ElementType> = Propios & {
 } & Omit<ComponentPropsWithoutRef<T>, keyof Propios | 'as'>;
 
 const Raiz = styled.button<{ $size: IconButtonSize; $active: boolean }>`
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  width: ${({ $size }) => LADO[$size]}px;
-  height: ${({ $size }) => LADO[$size]}px;
-  padding: 0;
-  border: none;
-  border-radius: ${radius.circle};
+  ${({ $size }) => formaBase($size)}
   background: ${({ $active }) => ($active ? accent.soft : 'transparent')};
   color: ${({ $active }) => ($active ? accent.DEFAULT : fg.muted)};
-  font-family: inherit;
-  text-decoration: none;
-  cursor: pointer;
-  transition:
-    background ${motion.fast} ${motion.ease},
-    color ${motion.fast} ${motion.ease};
-
-  svg {
-    display: block;
-    width: 22px;
-    height: 22px;
-  }
-
-  &:focus-visible {
-    outline: 2px solid ${ring};
-    outline-offset: 2px;
-  }
 
   ${({ $active }) =>
     !$active &&
@@ -95,11 +62,6 @@ const Raiz = styled.button<{ $size: IconButtonSize; $active: boolean }>`
         background: ${surface.active};
       }
     `}
-
-  &[aria-disabled='true'] {
-    opacity: 0.45;
-    cursor: not-allowed;
-  }
 `;
 
 const Contador = styled.span`

package/src/ui/Medidor.tsx

@@ -0,0 +1,159 @@
+'use client';
+
+import type { ReactNode } from 'react';
+import styled from 'styled-components';
+import { danger, fg, font, info, success, warning } from '../tokens';
+
+/**
+ * Hacia dónde apunta lo bueno en la escala.
+ *
+ * - `menos-es-mejor`: vacío es verde y lleno es rojo. Es la lectura de "cuánto
+ *   lugar queda": un partido con dos anotados es una oportunidad, uno lleno es
+ *   una puerta cerrada.
+ * - `mas-es-mejor`: la inversa. Lleno es verde y vacío es rojo. Es la lectura
+ *   de un progreso, una meta o un puntaje.
+ *
+ * No hay un default universal a propósito: cuál corresponde depende de lo que
+ * el número **significa** en el producto, no del componente. Por eso es
+ * obligatoria — un default sería elegir en silencio el sentido de todos los
+ * medidores que no la pasen.
+ */
+export type MedidorSentido = 'menos-es-mejor' | 'mas-es-mejor';
+
+/**
+ * Los cuatro escalones de la escala, del más vacío al más lleno.
+ *
+ * Cortes sobre la **proporción** `valor / maximo` y no sobre el valor: sobre
+ * una escala de 0 a 10 son 10 → tope, 8 a 9,99 → alto, 4 a 7,99 → medio y
+ * menos de 4 → bajo, pero sobre un cupo de 22 el mismo `8` no significa lo
+ * mismo. Cada corte es inclusivo abajo: exactamente 8 de 10 ya es `alto`.
+ */
+type Escalon = 'bajo' | 'medio' | 'alto' | 'tope';
+
+const CORTE_MEDIO = 0.4;
+const CORTE_ALTO = 0.8;
+
+function escalonDe(proporcion: number): Escalon {
+  if (proporcion >= 1) return 'tope';
+  if (proporcion >= CORTE_ALTO) return 'alto';
+  if (proporcion >= CORTE_MEDIO) return 'medio';
+  return 'bajo';
+}
+
+/**
+ * Color de cada escalón según el sentido. Los cuatro son los tonos semánticos
+ * de la librería —ninguno inventado acá— y las dos rampas usan los mismos
+ * cuatro: el `info` (azul) es el escalón templado en las dos direcciones, y es
+ * azul y no un cuarto verde/ámbar a propósito, porque los otros tres van por
+ * temperatura y meter un cuarto dentro de esa franja los vuelve
+ * indistinguibles de un vistazo.
+ */
+const COLOR: Record<MedidorSentido, Record<Escalon, string>> = {
+  'menos-es-mejor': {
+    bajo: success.DEFAULT,
+    medio: info.DEFAULT,
+    alto: warning.DEFAULT,
+    tope: danger.DEFAULT,
+  },
+  'mas-es-mejor': {
+    bajo: danger.DEFAULT,
+    medio: warning.DEFAULT,
+    alto: info.DEFAULT,
+    tope: success.DEFAULT,
+  },
+};
+
+type Props = {
+  /** Cuánto hay. Fuera de `0..maximo` se recorta: el arco nunca se sale de su pista. */
+  valor: number;
+  /** Cuánto es el 100%. Debe ser mayor que 0; si no, el arco se dibuja vacío. */
+  maximo: number;
+  /**
+   * Nombre accesible, obligatorio y en palabras ("Anotados: 8 de 10"). El
+   * arco y el número son decorativos (`aria-hidden`): sin esto un lector de
+   * pantalla leería el mismo dato dos veces, o ninguna.
+   *
+   * El color nunca es el único portador del significado: el número va en
+   * texto en el centro y esto lo dice en palabras.
+   */
+  label: string;
+  sentido: MedidorSentido;
+  /** Lo que va en el centro. Por defecto `valor/maximo`. */
+  children?: ReactNode;
+};
+
+/**
+ * Un semicírculo de 100 unidades de perímetro: `pathLength={100}` hace que
+ * `stroke-dashoffset` sea directamente el porcentaje, sin calcular la longitud
+ * real del arco.
+ */
+const ARCO_D = 'M12 52 A38 38 0 0 1 88 52';
+
+const Raiz = styled.div`
+  position: relative;
+  flex-shrink: 0;
+  width: 56px;
+  height: 34px;
+`;
+
+const Svg = styled.svg`
+  display: block;
+  width: 100%;
+  height: 100%;
+`;
+
+const Centro = styled.span`
+  position: absolute;
+  bottom: 2px;
+  left: 50%;
+  transform: translateX(-50%);
+  font-size: ${font['2xs']};
+  font-weight: 800;
+  line-height: 1;
+  color: ${fg.DEFAULT};
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+`;
+
+/** Proporción en `0..1`. Un `maximo` inválido o un valor no finito dan 0, no NaN. */
+function proporcionDe(valor: number, maximo: number): number {
+  if (!Number.isFinite(valor) || !Number.isFinite(maximo) || maximo <= 0) return 0;
+  return Math.min(1, Math.max(0, valor / maximo));
+}
+
+/**
+ * Medidor de arco: cuánto de un total está ocupado, con el color por escalón.
+ *
+ * Es un `role="img"`, no un control: no se enfoca ni se opera. Si el dato
+ * tiene que llevar a algún lado, lo envuelve un link o un botón del producto.
+ */
+export function Medidor({ valor, maximo, label, sentido, children }: Props) {
+  const proporcion = proporcionDe(valor, maximo);
+  const color = COLOR[sentido][escalonDe(proporcion)];
+
+  return (
+    <Raiz role="img" aria-label={label}>
+      <Svg viewBox="0 0 100 60" aria-hidden="true">
+        <path
+          d={ARCO_D}
+          fill="none"
+          stroke={`color-mix(in srgb, ${fg.muted} 25%, transparent)`}
+          strokeWidth={10}
+          strokeLinecap="round"
+          pathLength={100}
+        />
+        <path
+          d={ARCO_D}
+          fill="none"
+          stroke={color}
+          strokeWidth={10}
+          strokeLinecap="round"
+          pathLength={100}
+          strokeDasharray={100}
+          strokeDashoffset={100 - proporcion * 100}
+        />
+      </Svg>
+      <Centro aria-hidden="true">{children ?? `${valor}/${maximo}`}</Centro>
+    </Raiz>
+  );
+}

package/src/ui/ReactionButton.tsx

@@ -0,0 +1,149 @@
+'use client';
+
+import type { ButtonHTMLAttributes, MouseEvent, ReactNode } from 'react';
+import styled from 'styled-components';
+import { accent, danger, fg, font, info, motion, success, warning } from '../tokens';
+import { formaBase, LADO_ICONO, type IconButtonSize } from './shell';
+
+/**
+ * El color que toma el ícono al reaccionar. Reusa los tonos semánticos que
+ * la librería ya tiene — no hay `heart` ni `bookmark`: eso es marca de
+ * producto, no una categoría que otro consumidor vaya a repetir. Un color
+ * que ninguno de estos seis cubre se pisa con `style` (ver `label`, abajo
+ * del componente, para el ejemplo).
+ */
+export type ReactionTone = 'neutral' | 'accent' | 'success' | 'danger' | 'warning' | 'info';
+
+const TONO_ENCENDIDO: Record<ReactionTone, string> = {
+  neutral: fg.DEFAULT,
+  accent: accent.DEFAULT,
+  success: success.DEFAULT,
+  danger: danger.DEFAULT,
+  warning: warning.DEFAULT,
+  info: info.DEFAULT,
+};
+
+type Props = {
+  /**
+   * Nombre accesible. Si hay `count`, la cifra va DENTRO del label ("Me
+   * gusta, 24"): el número visible es decorativo (`aria-hidden`), mismo
+   * criterio que el `badge` de `IconButton`.
+   */
+  label: string;
+  children: ReactNode;
+  tone?: ReactionTone;
+  size?: IconButtonSize;
+  /** Reaccionado o no. A diferencia de `IconButton`, no tiñe el fondo: sólo el ícono cambia de color. */
+  active?: boolean;
+  /**
+   * Resplandor alrededor del ícono cuando está activo. Del color del tono
+   * (`currentColor`), no uno propio — así no hace falta un token de glow por
+   * tono, y un color pisado con `style` resplandece del mismo color.
+   */
+  glow?: boolean;
+  /** Cuenta visible junto al ícono. `0` se muestra: "0 me gusta" es un dato, no una ausencia. */
+  count?: number;
+  motivo?: string;
+  onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
+};
+
+const Raiz = styled.button<{ $size: IconButtonSize; $tone: ReactionTone; $active: boolean; $glow: boolean }>`
+  ${({ $size }) => formaBase($size)}
+  gap: 4px;
+  width: auto;
+  min-width: ${({ $size }) => LADO_ICONO[$size]}px;
+  padding: 0 8px;
+  background: transparent;
+  --kz-icon-on: ${({ $tone }) => TONO_ENCENDIDO[$tone]};
+  color: ${({ $active }) => ($active ? 'var(--kz-icon-on)' : fg.muted)};
+
+  svg {
+    filter: ${({ $active, $glow }) =>
+      $active && $glow ? 'drop-shadow(0 0 8px color-mix(in srgb, currentColor 65%, transparent))' : 'none'};
+    transition: filter ${motion.fast} ${motion.ease};
+  }
+
+  &:hover:not([aria-disabled='true']) {
+    background: transparent;
+    color: ${({ $active }) => ($active ? 'var(--kz-icon-on)' : fg.DEFAULT)};
+  }
+`;
+
+const Cuenta = styled.span`
+  font-size: ${font.xs};
+  font-weight: 600;
+  line-height: 1;
+  pointer-events: none;
+`;
+
+/**
+ * Botón de reacción: ícono que cambia de color (y opcionalmente resplandece)
+ * al activarse, con una cuenta al lado. Generalizado del `IconButton` de
+ * taboo-next.
+ *
+ * No es `IconButton` con más props: `IconButton` tiñe el FONDO cuando está
+ * `active` (es "esto está seleccionado" — la página actual, un filtro
+ * aplicado). `ReactionButton` nunca tiñe el fondo — sólo el ícono cambia
+ * (es "reaccioné con esto"): un corazón marcado no necesita, además, un
+ * círculo rosa detrás. Por eso es un componente aparte y no una prop más.
+ *
+ * ```tsx
+ * <ReactionButton tone="danger" active={likeado} glow count={likes} label={`Me gusta, ${likes}`}>
+ *   <IconoCorazon />
+ * </ReactionButton>
+ * ```
+ *
+ * Un color que los seis tonos no cubren (la marca de un producto, no una
+ * categoría semántica) se pisa con `style`, ya que `--kz-icon-on` es una
+ * variable CSS común y un estilo en línea le gana a la de acá:
+ *
+ * ```tsx
+ * <ReactionButton
+ *   active={guardado}
+ *   glow
+ *   style={{ '--kz-icon-on': 'var(--mi-color-de-marca)' } as React.CSSProperties}
+ *   label="Guardar"
+ * >
+ *   <IconoMarcador />
+ * </ReactionButton>
+ * ```
+ */
+export function ReactionButton({
+  label,
+  children,
+  tone = 'neutral',
+  size = 'md',
+  active = false,
+  glow = false,
+  count,
+  motivo,
+  onClick,
+  ...rest
+}: Props & Omit<ButtonHTMLAttributes<HTMLButtonElement>, keyof Props>) {
+  const bloqueado = Boolean(motivo);
+
+  return (
+    <Raiz
+      {...rest}
+      type="button"
+      $size={size}
+      $tone={tone}
+      $active={active}
+      $glow={glow}
+      aria-label={label}
+      aria-pressed={active}
+      aria-disabled={bloqueado || undefined}
+      title={motivo ?? label}
+      onClick={(event) => {
+        if (bloqueado) {
+          event.preventDefault();
+          return;
+        }
+        onClick?.(event);
+      }}
+    >
+      {children}
+      {typeof count === 'number' ? <Cuenta aria-hidden="true">{count}</Cuenta> : null}
+    </Raiz>
+  );
+}

package/src/ui/Relieve.tsx

@@ -0,0 +1,52 @@
+'use client';
+
+import styled from 'styled-components';
+import { motion, relief } from '../tokens';
+
+/**
+ * Relieve neumórfico: envuelve a `IconButton` (o cualquier control) y le
+ * agrega el par de sombras opuestas que dibuja un círculo sin relleno ni
+ * borde. El botón se lee "hundido" al presionar, y "prendido" con `$prendido`
+ * — el mismo tratamiento en reposo mientras el estado se sostiene, para "vos
+ * estás acá" o "esto está activo".
+ *
+ * Es un `<span>` alrededor del control, no un `styled(IconButton)`, porque
+ * `IconButton` es polimórfico (`as={Link}`): styled-components intercepta su
+ * propio `as` en cualquier componente que envuelve, así que envolverlo así
+ * haría que renderice el `Link` directo y se saltee toda la lógica de
+ * `IconButton` (aria, badge, bloqueo por motivo). El span sólo pinta la
+ * sombra; el click, el foco y el aria son enteramente del control de adentro.
+ *
+ * ```tsx
+ * <Relieve>
+ *   <IconButton label="Notificaciones" badge={3}><IconoCampana /></IconButton>
+ * </Relieve>
+ *
+ * <Relieve $prendido={enPerfil}>
+ *   <IconButton as={Link} href="/perfil" active={enPerfil} label="Perfil">
+ *     <IconoPerfil />
+ *   </IconButton>
+ * </Relieve>
+ * ```
+ *
+ * Nace en mixbol-front y valle-verde, cada uno con su propia paleta —el
+ * relieve es neutro (`--kz-relief-*`, negro/blanco) y cada producto lo tiñe
+ * redefiniendo esos tres tokens con el color de su marca, igual que hace
+ * cualquier otro token de la librería.
+ */
+export const Relieve = styled.span<{ $prendido?: boolean }>`
+  display: inline-flex;
+  border-radius: 50%;
+  box-shadow: ${({ $prendido }) => ($prendido ? relief.in : relief.out)};
+  transition: box-shadow ${motion.fast} ${motion.ease};
+
+  /* $prendido ya vale el relieve hundido: hover no le suma nada. */
+  &:hover {
+    box-shadow: ${({ $prendido }) => ($prendido ? relief.in : relief.outStrong)};
+  }
+
+  &:active {
+    box-shadow: ${relief.in};
+    transform: translateY(1px);
+  }
+`;

package/src/ui/index.ts

@@ -1,2 +1,7 @@
 export { IconButton } from './IconButton';
 export type { IconButtonSize } from './IconButton';
+export { Medidor } from './Medidor';
+export type { MedidorSentido } from './Medidor';
+export { Relieve } from './Relieve';
+export { ReactionButton } from './ReactionButton';
+export type { ReactionTone } from './ReactionButton';

package/src/ui/shell.ts

@@ -0,0 +1,58 @@
+import { css } from 'styled-components';
+import { motion, radius, ring } from '../tokens';
+
+export type IconButtonSize = 'sm' | 'md' | 'lg';
+
+/**
+ * Lado del círculo, en px. `lg` es el área táctil mínima de una topbar móvil
+ * (44px): si el control va en una barra que se toca con el pulgar, es el que
+ * corresponde. No son tokens porque son medidas de este componente, no una
+ * escala que otros usen.
+ */
+export const LADO_ICONO: Record<'sm' | 'md' | 'lg', number> = { sm: 32, md: 40, lg: 44 };
+
+/**
+ * Forma compartida entre `IconButton` y `ReactionButton`: el círculo, el
+ * foco y el bloqueo. Lo que NO comparten —de dónde sale el color, si hay
+ * fondo teñido— es justamente lo que los distingue, y vive en cada uno.
+ *
+ * `IconButton` es "esto está seleccionado" (fondo teñido, un solo color de
+ * encendido). `ReactionButton` es "reaccioné con esto" (sin fondo, color +
+ * resplandor por tono, con contador). Forzar los dos casos por una sola
+ * prop de color es lo que hacía que una reacción con `tone="heart"` te
+ * dejara, de yapa, un círculo rosa detrás del ícono que nadie pidió.
+ */
+export const formaBase = (size: 'sm' | 'md' | 'lg') => css`
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: ${LADO_ICONO[size]}px;
+  height: ${LADO_ICONO[size]}px;
+  padding: 0;
+  border: none;
+  border-radius: ${radius.circle};
+  font-family: inherit;
+  text-decoration: none;
+  cursor: pointer;
+  transition:
+    background ${motion.fast} ${motion.ease},
+    color ${motion.fast} ${motion.ease};
+
+  svg {
+    display: block;
+    width: 22px;
+    height: 22px;
+  }
+
+  &:focus-visible {
+    outline: 2px solid ${ring};
+    outline-offset: 2px;
+  }
+
+  &[aria-disabled='true'] {
+    opacity: 0.45;
+    cursor: not-allowed;
+  }
+`;