kaizen-lib 0.2.2 → 0.2.4

package/README.md

@@ -177,6 +177,7 @@ import { LangSelector } from 'kaizen-lib/ui';
 <LangSelector
   actual={i18n.language}
   onChange={(codigo) => i18n.changeLanguage(codigo)}
+  etiqueta={(siguiente) => `Cambiar idioma a ${siguiente.nombre}`}
   opciones={[
     { codigo: 'es', nombre: 'Español', icono: <ReactCountryFlag countryCode="AR" /> },
     { codigo: 'en', nombre: 'English', icono: <ReactCountryFlag countryCode="US" /> },
@@ -189,9 +190,12 @@ cada tap y muestra el ícono del idioma actual, con el relieve de `Relieve` ya i
 (a diferencia de `IconButton`, acá no hace falta envolverlo aparte — todo consumidor lo
 quería). No trae banderas — mismo criterio que `IconButton` no trae íconos —, así que
 `icono` es cosa del producto; `react-country-flag` (ya usado en tuxon-front) es una
-opción probada. `onChange` recibe el código de la opción siguiente; qué hacer con eso
-(`i18n.changeLanguage`, `next-intl`, lo que sea) es del producto — la librería no sabe
-qué mecanismo de traducción hay atrás.
+opción probada. `etiqueta` arma el nombre accesible a partir de la opción siguiente y la
+actual — es obligatoria y sin default: la frase y el idioma son del producto (dos ya
+difieren: uno anuncia el destino, "Cambiar idioma a English"; otro el estado, "Idioma:
+English. Cambiar idioma"). `onChange` recibe el código de la opción siguiente; qué hacer
+con eso (`i18n.changeLanguage`, `next-intl`, lo que sea) es del producto — la librería no
+sabe qué mecanismo de traducción hay atrás.
 
 ## Desarrollo
 

package/package.json

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

package/src/ui/LangSelector.tsx

@@ -24,6 +24,15 @@ type Props<T extends string> = {
   opciones: OpcionDeIdioma<T>[];
   actual: T;
   onChange: (codigo: T) => void;
+  /**
+   * Arma el nombre accesible del botón, a partir de la opción actual y la
+   * siguiente (a la que se pasa al tocar). Obligatoria y sin default: qué
+   * frase decir y en qué idioma es del producto, la librería no lo fija.
+   * Dos productos ya difieren en esto mismo — uno anuncia el destino
+   * ("Cambiar idioma a English"), otro el estado ("Idioma: English. Cambiar
+   * idioma") — y los dos son legítimos.
+   */
+  etiqueta: (siguiente: OpcionDeIdioma<T>, actual: OpcionDeIdioma<T>) => string;
   size?: IconButtonSize;
 };
 
@@ -45,6 +54,7 @@ type Props<T extends string> = {
  * <LangSelector
  *   actual={idiomaActual}
  *   onChange={(codigo) => i18n.changeLanguage(codigo)}
+ *   etiqueta={(siguiente) => `Cambiar idioma a ${siguiente.nombre}`}
  *   opciones={[
  *     { codigo: 'es', nombre: 'Español', icono: <ReactCountryFlag countryCode="AR" /> },
  *     { codigo: 'en', nombre: 'English', icono: <ReactCountryFlag countryCode="US" /> },
@@ -52,7 +62,7 @@ type Props<T extends string> = {
  * />
  * ```
  */
-export function LangSelector<T extends string>({ opciones, actual, onChange, size = 'lg' }: Props<T>) {
+export function LangSelector<T extends string>({ opciones, actual, onChange, etiqueta, size = 'lg' }: Props<T>) {
   // Sin opciones no hay nada que ciclar. Defensivo: un selector de idioma
   // vacío es un error de uso, no algo que la librería deba explicar.
   if (opciones.length === 0) return null;
@@ -63,7 +73,7 @@ export function LangSelector<T extends string>({ opciones, actual, onChange, siz
 
   return (
     <Relieve>
-      <IconButton size={size} label={`Cambiar idioma a ${siguiente.nombre}`} onClick={() => onChange(siguiente.codigo)}>
+      <IconButton size={size} label={etiqueta(siguiente, opcionActual)} onClick={() => onChange(siguiente.codigo)}>
         {opcionActual.icono}
       </IconButton>
     </Relieve>

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 />