kaizen-lib 0.2.3 → 0.2.5

package/README.md

@@ -14,6 +14,26 @@ styled-components con `moduleResolution: "bundler"`, así que lo transpilan ello
 | `kaizen-lib/tokens.css` | Valores por defecto, tema oscuro y claro | listo |
 | `kaizen-lib/ui` | Componentes (`IconButton`, `ReactionButton`, `Medidor`, `Relieve`, `LangSelector`) | en curso |
 
+## ¿Qué uso para qué?
+
+Antes de escribir un `styled.button` a mano o un ciclador de idioma propio, revisá esta
+tabla. Si tu caso está acá, es un defecto reconstruirlo local — usá esto, y si no
+alcanza, extendé el componente en vez de bypassearlo (ver `implement.md` del harness:
+"un duplicado local de algo que ya existe compartido se reemplaza por el compartido").
+
+| Necesito... | Uso | No es... |
+|---|---|---|
+| Un botón redondo de sólo ícono en una topbar (notificaciones, perfil, cerrar) | `IconButton` | — |
+| Que ese botón tenga fondo teñido cuando está seleccionado (la página actual, un filtro aplicado) | `IconButton` con `active` | `ReactionButton` (ver abajo, distinción a propósito) |
+| Un ícono que cambia de color al reaccionar (me gusta, guardar, favorito) — **sin** fondo teñido | `ReactionButton` | `IconButton` con `active` |
+| El relieve neumórfico (círculo con sombra, sin relleno) alrededor de un `IconButton` | `Relieve` envolviendo el `IconButton` | una prop de `IconButton` — ver por qué en su docblock |
+| Un ciclador de idioma con banderas en la topbar | `LangSelector` | reconstruir el ciclado a mano — ya lo resuelve, con `Relieve` incluido |
+| Un arco/medidor que muestra cuánto de un total está ocupado | `Medidor` | un `<progress>` o una barra propia |
+| 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
+producto elige de dónde salen (`react-icons`, `react-country-flag`, SVG propio).
+
 ## Instalación
 
 ```bash

package/package.json

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

package/src/ui/ReactionButton.tsx

@@ -55,11 +55,11 @@ const Raiz = styled.button<{ $size: IconButtonSize; $tone: ReactionTone; $active
   padding: 0 8px;
   background: transparent;
   --kz-icon-on: ${({ $tone }) => TONO_ENCENDIDO[$tone]};
+  --kz-icon-glow: ${({ $glow }) => ($glow ? '0 0 8px color-mix(in srgb, currentColor 65%, transparent)' : 'none')};
   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'};
+    filter: ${({ $active }) => ($active ? 'drop-shadow(var(--kz-icon-glow))' : 'none')};
     transition: filter ${motion.fast} ${motion.ease};
   }
 
@@ -94,14 +94,19 @@ const Cuenta = styled.span`
  * ```
  *
  * 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á:
+ * categoría semántica), o una intensidad de resplandor propia y no la
+ * genérica de `glow`, se pisan con `style`: `--kz-icon-on` y `--kz-icon-glow`
+ * son variables CSS comunes, y un estilo en línea le gana a la de acá por
+ * origen, no por especificidad — no hace falta tocar la librería por un
+ * color o un resplandor que ningún otro consumidor va a repetir.
  *
  * ```tsx
  * <ReactionButton
  *   active={guardado}
- *   glow
- *   style={{ '--kz-icon-on': 'var(--mi-color-de-marca)' } as React.CSSProperties}
+ *   style={{
+ *     '--kz-icon-on': 'var(--mi-color-de-marca)',
+ *     '--kz-icon-glow': '0 0 8px rgba(255, 77, 109, 0.75)',
+ *   } as React.CSSProperties}
  *   label="Guardar"
  * >
  *   <IconoMarcador />