@genarou/blazir-icons 1.1.5 → 1.1.7

package/dist/Icon.svelte

@@ -1,16 +1,16 @@
-<!-- src/lib/Icon.svelte -->
 <script lang="ts">
   import { iconRegistry, type IconName } from "./icons/registry";
-  import type { IconProps } from "./types";
+  import type { IconComponent, IconProps } from "./types";
   import { coerceSize } from "./utils/defaults";
 
   let {
     name,
-    size = 24, // ✅ primitivo
-    color = "#6b7280",
+    size = 24,
+    color,
     stroke,
     strokeWidth,
     fill,
+    class: classAttr = "",
     className = "",
     ariaLabel,
     title = "",
@@ -30,16 +30,24 @@
     ...rest
   }: { name: IconName } & Partial<IconProps> = $props();
 
-  const Comp = $derived(iconRegistry[name]);
+  // ✅ Comp tipado como el mismo tipo que usa tu registry
+  const Comp: IconComponent | undefined = $derived(iconRegistry?.[name]);
+
+  // ❌ ANTES: const colorOverrides = $derived(() => color !== undefined ? {...} : {...})
+  // ✅ AHORA:
+  const colorOverrides = $derived(
+    color !== undefined
+      ? { color, stroke: stroke ?? "none", fill: fill ?? color }
+      : { stroke, fill }
+  );
 
-  const passProps = $derived(() => ({
-    // ✅ tamaño garantizado como number|string simple
+  // ❌ ANTES: const passProps = $derived(() => ({ ... }))
+  // ✅ AHORA:
+  const passProps = $derived({
     size: coerceSize(size, 24),
-    color,
-    stroke: color ? (stroke ?? "none") : stroke,
-    fill: color ? (fill ?? color) : fill,
+    ...colorOverrides,
     strokeWidth,
-    className,
+    className: classAttr || className,
     ariaLabel,
     title,
     rotate,
@@ -62,7 +70,7 @@
         : animationDelay,
     animationEasing,
     ...rest,
-  }));
+  });
 </script>
 
 {#if Comp}

package/dist/IconBase.svelte

@@ -1,3 +1,4 @@
+<!-- 📁 src/lib/IconBase.svelte -->
 <script lang="ts">
   import type { IconMode, IconProps } from "./types.js";
   import {
@@ -11,58 +12,122 @@
     normalizeClass,
   } from "./utils/defaults.js";
 
+  // Props del icono + modo visual
   const props: IconProps & { mode?: IconMode } = $props();
 
+  // ====== Derivados visuales / clases / defaults ======
   const mode = $derived(props.mode ?? "solid");
   const klass = $derived(normalizeClass(props));
-  const common = $derived(commonDefaults(props)); // ✅ ya coercea size
-  const visual = $derived(modeDefaults(mode, props));
+  const common = $derived(commonDefaults(props)); // size, viewBox, preserveAspectRatio
+  const visual = $derived(modeDefaults(mode, props)); // lo que ya tienes
 
   const animationClasses = $derived(getAnimationClasses(props).join(" "));
-  const baseTransform = $derived(combineTransforms(props));
-  const animationStyle = $derived(getAnimationStyle(props));
+  const timingStyle = $derived(getAnimationStyle(props)); // duration/delay/easing
 
-  const _ariaHidden = $derived(props.decorative ? "true" : undefined);
-  const _ariaLabel = $derived(
-    props.decorative ? undefined : props.ariaLabel || undefined
-  );
-  const _ariaLabelledby = $derived(
-    !props.decorative && props.title ? props.titleId : undefined
+  // ⚠️ Solo CSS transforms semánticos (chevron/morph/slide).
+  //    Quitamos rotate/flip del combine para no duplicar (rotate/flip van en <g transform>).
+  const cssTransformOnly = $derived(
+    combineTransforms({
+      ...props,
+      rotate: undefined as any,
+      flipH: false,
+      flipV: false,
+    })
   );
 
-  const transformStr = $derived(() =>
-    baseTransform
-      ? `transform: ${baseTransform}; transform-origin: center;`
-      : ""
+  // ✅ Sólo variable para spin (sin animation: inline)
+  const spinStyle = $derived(
+    (() => {
+      const s = props.spin;
+      if (!s) return "";
+      const dur = s === true ? "1s" : typeof s === "number" ? `${s}ms` : s;
+      return `--bz-spin: ${dur};`;
+    })()
   );
 
-  const spinStr = $derived(() => {
-    const s = props.spin;
-    if (!s) return "";
-    const dur = s === true ? "1s" : typeof s === "number" ? `${s}ms` : s;
-    return `animation: __icon_spin ${dur} linear infinite;`;
-  });
-
+  // Estilo final inline (añadimos transform-origin/box, timing y variable de spin)
   const style = $derived(
-    `${props.style || ""}${props.style && !props.style.endsWith(";") ? ";" : ""}${transformStr}${spinStr}${animationStyle}`.trim()
+    `${props.style || ""}${props.style && !props.style.endsWith(";") ? ";" : ""}` +
+      (cssTransformOnly ? `transform: ${cssTransformOnly};` : "") +
+      `transform-origin: center;` + // deja 'transform-box' fuera si TS te marca error
+      (spinStyle ? spinStyle : "") +
+      (timingStyle ? timingStyle : "") +
+      (props.color ? `color: ${props.color};` : "") // ← ★ clave para currentColor
   );
 
-  // ✅ finalSize es un VALOR, no una función
+  // A11y derivados
+  const ariaHidden = $derived(props.decorative ? "true" : undefined);
+  const ariaLabel = $derived(
+    props.decorative ? undefined : props.ariaLabel || undefined
+  );
+  const ariaLabelledby = $derived(
+    !props.decorative && props.title ? props.titleId : undefined
+  );
+
+  // Size final como string para width/height
   const finalSize = $derived(
     typeof common.size === "number" ? `${common.size}px` : common.size
   );
 
-  // ✅ evita que attrs pisen width/height
+  // Atributos seguros (evitar que pisen width/height del svg)
   const safeAttrs = $derived(() => {
     const a = { ...(props.attrs ?? {}) } as Record<string, any>;
     delete a.width;
-    delete a.height; // opcional: delete a.style si te meten width/height por style
+    delete a.height;
     return a;
   });
 
   const finalClass = $derived(
     `${klass} ${animationClasses} ${props.chevronState ? "bz-icon-chevron" : ""}`.trim()
   );
+
+  // ====== ROTATE / FLIPS en <g transform> (SVG nativo, centrado) ======
+  function getViewBoxCenter(vb: string) {
+    const parts = vb.trim().split(/\s+/).map(Number);
+    const [minX, minY, w, h] = parts.length === 4 ? parts : [0, 0, 24, 24];
+    return { cx: minX + w / 2, cy: minY + h / 2 };
+  }
+
+  const { cx, cy } = $derived(getViewBoxCenter(common.viewBox));
+
+  const svgTransform = $derived(() => {
+    const cmds: string[] = [];
+
+    // rotate
+    if (props.rotate != null) {
+      const r =
+        typeof props.rotate === "number"
+          ? props.rotate
+          : parseFloat(String(props.rotate));
+      if (!Number.isNaN(r)) cmds.push(`rotate(${r} ${cx} ${cy})`);
+    }
+
+    // flips
+    if (props.flipH || props.flipV) {
+      const sx = props.flipH ? -1 : 1;
+      const sy = props.flipV ? -1 : 1;
+      cmds.push(
+        `translate(${cx} ${cy}) scale(${sx} ${sy}) translate(${-cx} ${-cy})`
+      );
+    }
+
+    return cmds.join(" ");
+  });
+
+  const visualColor = $derived(() => {
+    if (!props.color) return visual;
+
+    const v = { ...visual };
+
+    if (mode === "solid") {
+      v.fill = props.color; // ← Fuerza el color aquí
+    } else {
+      v.stroke = props.color;
+    }
+
+    console.log("Final visual color:", v); // ← Debug temporal
+    return v;
+  });
 </script>
 
 <svg
@@ -74,27 +139,21 @@
   preserveAspectRatio={common.preserveAspectRatio}
   class={finalClass}
   role="img"
-  aria-hidden={_ariaHidden}
-  aria-label={_ariaLabel}
-  aria-labelledby={_ariaLabelledby}
+  aria-hidden={ariaHidden}
+  aria-label={ariaLabel}
+  aria-labelledby={ariaLabelledby}
   focusable="false"
   {style}
-  fill={visual.fill}
-  stroke={visual.stroke}
-  stroke-width={visual.strokeWidth}
+  fill={visualColor().fill}
+  stroke={visualColor().stroke}
+  stroke-width={visualColor().strokeWidth}
   stroke-linecap={props.strokeLinecap}
   stroke-linejoin={props.strokeLinejoin}
   vector-effect={props.nonScalingStroke ? "non-scaling-stroke" : undefined}
   data-testid={props.testId}
 >
   {#if props.title}<title id={props.titleId}>{props.title}</title>{/if}
-  {@render props.children?.()}
+  <g transform={svgTransform()}>
+    {@render props.children?.()}
+  </g>
 </svg>
-
-<style>
-  @keyframes __icon_spin {
-    to {
-      transform: rotate(360deg);
-    }
-  }
-</style>

package/dist/icons-api.d.ts

@@ -1,4 +1,4 @@
-import { IconComponent, IconName } from "./icons/registry";
+import { IconComponent, IconName } from "./types";
 export declare const bzIcons: Record<string, IconName>;
 export declare class IconAPI {
     static getValid(...names: string[]): Array<{
@@ -102,7 +102,7 @@ export declare const iconStats: {
     readonly categories: number;
     readonly animated: number;
     readonly byCategory: {
-        [k: string]: 12 | 2 | 9 | 3 | 10 | 4 | 8 | 7 | 6 | 5;
+        [k: string]: 12 | 2 | 4 | 3 | 9 | 10 | 8 | 7 | 6 | 5;
     };
     readonly mostUsedCategory: string;
     readonly shortcuts: number;

package/dist/icons-api.js

@@ -1,4 +1,3 @@
-// 📁 src/lib/icons/icon-api.ts - MANTENIENDO bzIcons como nombre original
 import { iconRegistry } from "./icons/registry";
 // 🎯 MANTENER TU NOMBRE ORIGINAL: bzIcons
 export const bzIcons = {

package/dist/index.d.ts

@@ -4,8 +4,9 @@ export { combineTransforms, getAnimationClasses, getAnimationStyle, getChevronTr
 export { batchStyleUpdates, EASING_PRESETS, getPrefersReducedMotion, optimizeEasing, } from "./utils/performance.js";
 export { iconEffects } from "./effects/icon-effects.js";
 export { getInjectionInfo, injectIconEffectsCSS, injectIconEffectsCSSFromFile, injectIconEffectsCSSLegacy, injectIconEffectsCSSOptimized, } from "./styles/css-injection.js";
-export { default as DynamicIcon, default as Icon } from "./DynamicIcon.svelte";
-export { default as BaseIcon } from "./Icon.svelte";
+export { default as DynamicIcon } from "./DynamicIcon.svelte";
+export { default as Icon } from "./Icon.svelte";
+export { default as BaseIcon } from "./IconBase.svelte";
 export { bzIcons, IconAPI, iconCategories, iconShortcuts, iconStats, type BzIconKey, type IconCategory, type IconShortcutCategory, } from "./icons-api.js";
 export { iconRegistry, type IconComponent, type IconName, } from "./icons/registry.js";
 export { default as AnimatedArrowLeft } from "./icons/AnimatedArrowLeft.svelte";

package/dist/index.js

@@ -8,8 +8,9 @@ export { iconEffects } from "./effects/icon-effects.js";
 // CSS Injection
 export { getInjectionInfo, injectIconEffectsCSS, injectIconEffectsCSSFromFile, injectIconEffectsCSSLegacy, injectIconEffectsCSSOptimized, } from "./styles/css-injection.js";
 // 🎯 COMPONENTES
-export { default as DynamicIcon, default as Icon } from "./DynamicIcon.svelte"; // Componente dinámico principal
-export { default as BaseIcon } from "./Icon.svelte"; // Componente base original
+export { default as DynamicIcon } from "./DynamicIcon.svelte";
+export { default as Icon } from "./Icon.svelte"; // wrapper que usa iconRegistry
+export { default as BaseIcon } from "./IconBase.svelte"; // donde vive el <svg>
 // 🆕 NUEVA API DE ICONOS
 export { bzIcons, IconAPI, iconCategories, iconShortcuts, iconStats, } from "./icons-api.js";
 // Registry original (para casos avanzados)

package/dist/styles/hybrid-inject.d.ts

@@ -1,9 +1,9 @@
-/** API PRINCIPAL - Inyección híbrida inteligente */
+/** API principal (singleton + carrera segura) */
 export declare function injectIconEffectsCSS(): Promise<void>;
-/** API adicional para casos específicos */
+/** API explícita virtual/tradicional */
 export declare function injectVirtualIconCSS(): Promise<void>;
 export declare function injectTraditionalIconCSS(): void;
-/** Utility - Info del método usado */
+/** Info */
 export declare function getInjectionInfo(): {
     injected: boolean;
     method: "virtual" | "traditional" | null;

package/dist/styles/hybrid-inject.js

@@ -2,6 +2,7 @@
 let cssInjected = false;
 let virtualStyleSheet = null;
 let injectionMethod = null;
+let injectOncePromise = null;
 const CSS_CONTENT = `
 :root {
   --bz-icon-bounce-amt: 18%;
@@ -12,10 +13,10 @@ const CSS_CONTENT = `
   --bz-icon-wiggle-angle: 3deg;
 }
 
-@keyframes bz-icon-spin {
-  to { transform: rotate(360deg); }
-}
+/* ✅ keyframes estándar para spin */
+@keyframes __icon_spin { to { transform: rotate(360deg); } }
 
+/* ===== Keyframes de efectos ===== */
 @keyframes bz-icon-bounce {
   0% { transform: translateY(0); }
   35% { transform: translateY(calc(var(--bz-icon-bounce-amt) * -1)); }
@@ -80,7 +81,17 @@ const CSS_CONTENT = `
   100% { transform: translateX(0); opacity: 1; }
 }
 
-:where(.bz-icon-spin) { animation: bz-icon-spin 900ms linear infinite; }
+/* ===== Clases de efectos ===== */
+
+/* ✅ Spin performante por variable */
+:where(.bz-icon--spin) {
+  animation-name: __icon_spin;
+  animation-duration: var(--bz-spin, 1s);
+  animation-timing-function: linear;
+  animation-iteration-count: infinite;
+}
+
+/* Otras animaciones */
 :where(.bz-icon-bounce) { animation: bz-icon-bounce 400ms ease; }
 :where(.bz-icon-pulse) { animation: bz-icon-pulse 1200ms cubic-bezier(.2,.8,.2,1) infinite; }
 :where(.bz-icon-wiggle) { animation: bz-icon-wiggle 200ms ease-in-out; }
@@ -90,35 +101,25 @@ const CSS_CONTENT = `
 :where(.bz-icon-fade-in) { animation: bz-icon-fade-in 200ms ease-out; }
 :where(.bz-icon-slide-in) { animation: bz-icon-slide-in-up 200ms ease-out; }
 
+/* Estados utilitarios */
 :where(.bz-icon-chevron) {
   transition: transform 200ms cubic-bezier(.2,.8,.2,1);
 }
+:where(.bz-icon-morph-play)  { transform: scale(1.05); transition: all 150ms ease; }
+:where(.bz-icon-morph-pause) { transform: scale(0.95); transition: all 150ms ease; }
+:where(.bz-icon-morph-close) { transform: rotate(45deg); transition: all 200ms ease; }
+:where(.bz-icon-morph-menu)  { transform: scale(1); transition: all 200ms ease; }
 
-:where(.bz-icon-morph-play) { 
-  transform: scale(1.05); 
-  transition: all 150ms ease;
-}
-:where(.bz-icon-morph-pause) { 
-  transform: scale(0.95); 
-  transition: all 150ms ease;
-}
-:where(.bz-icon-morph-close) { 
-  transform: rotate(45deg); 
-  transition: all 200ms ease;
-}
-:where(.bz-icon-morph-menu) { 
-  transform: scale(1); 
-  transition: all 200ms ease;
-}
-
+/* A11y */
 :where([data-bz-kb-focus="true"]:focus-visible) {
   outline: 2px solid var(--bz-icon-ring);
   outline-offset: 2px;
   border-radius: var(--bz-icon-ring-radius);
 }
 
+/* Reduce motion */
 @media (prefers-reduced-motion: reduce) {
-  :where(.bz-icon-spin),
+  :where(.bz-icon--spin),
   :where(.bz-icon-bounce),
   :where(.bz-icon-pulse),
   :where(.bz-icon-wiggle),
@@ -126,16 +127,15 @@ const CSS_CONTENT = `
   :where(.bz-icon-heartbeat),
   :where(.bz-icon-scale-in),
   :where(.bz-icon-slide-in) {
-    animation: none;
+    animation: none !important;
+    animation-duration: 0s !important;
+    animation-iteration-count: 0 !important;
   }
-  
   :where(.bz-icon-chevron),
-  :where([class*="bz-icon-morph"]) {
-    transition: none;
-  }
+  :where([class*="bz-icon-morph"]) { transition: none !important; }
 }
 `;
-/** Detecta si estamos en desarrollo (compatible con todos los bundlers) */
+/** Detecta si estamos en desarrollo (compatible) */
 function isDevelopment() {
     if (typeof window === "undefined")
         return false;
@@ -146,11 +146,7 @@ function isDevelopment() {
         window.location.protocol === "file:" ||
         window.location.search.includes("debug"));
 }
-// Luego úsala en los logs:
-if (isDevelopment()) {
-    console.debug("🚀 Blazir Icons: Virtual CSS injected");
-}
-/** Detecta si el navegador soporta Constructable Stylesheets */
+/** Soporte constructable stylesheets */
 function supportsConstructableStylesheets() {
     if (typeof window === "undefined")
         return false;
@@ -158,7 +154,7 @@ function supportsConstructableStylesheets() {
         "CSSStyleSheet" in window &&
         "replace" in CSSStyleSheet.prototype);
 }
-/** Inyección Virtual CSS para navegadores modernos */
+/** Inyección Virtual CSS */
 async function injectVirtualCSS() {
     if (virtualStyleSheet || cssInjected)
         return;
@@ -171,17 +167,16 @@ async function injectVirtualCSS() {
         ];
         cssInjected = true;
         injectionMethod = "virtual";
-        if (isDevelopment()) {
+        if (isDevelopment())
             console.debug("🚀 Blazir Icons: Virtual CSS injected (optimized)");
-        }
     }
     catch (error) {
         console.warn("Virtual CSS failed, falling back to traditional:", error);
         virtualStyleSheet = null;
-        return injectTraditionalCSS();
+        injectTraditionalCSS();
     }
 }
-/** Fallback tradicional para navegadores legacy */
+/** Fallback tradicional */
 function injectTraditionalCSS() {
     if (cssInjected || typeof document === "undefined")
         return;
@@ -195,22 +190,21 @@ function injectTraditionalCSS() {
     document.head.insertBefore(style, document.head.firstChild);
     cssInjected = true;
     injectionMethod = "traditional";
-    if (isDevelopment()) {
+    if (isDevelopment())
         console.debug("🔄 Blazir Icons: Traditional CSS injected (fallback)");
-    }
 }
-/** API PRINCIPAL - Inyección híbrida inteligente */
-export async function injectIconEffectsCSS() {
+/** API principal (singleton + carrera segura) */
+export function injectIconEffectsCSS() {
     if (cssInjected || typeof window === "undefined")
-        return;
-    if (supportsConstructableStylesheets()) {
-        await injectVirtualCSS();
-    }
-    else {
-        injectTraditionalCSS();
-    }
-}
-/** API adicional para casos específicos */
+        return Promise.resolve();
+    if (injectOncePromise)
+        return injectOncePromise;
+    injectOncePromise = supportsConstructableStylesheets()
+        ? injectVirtualCSS()
+        : (injectTraditionalCSS(), Promise.resolve());
+    return injectOncePromise;
+}
+/** API explícita virtual/tradicional */
 export async function injectVirtualIconCSS() {
     if (!supportsConstructableStylesheets()) {
         throw new Error("Constructable Stylesheets not supported");
@@ -220,7 +214,7 @@ export async function injectVirtualIconCSS() {
 export function injectTraditionalIconCSS() {
     injectTraditionalCSS();
 }
-/** Utility - Info del método usado */
+/** Info */
 export function getInjectionInfo() {
     return {
         injected: cssInjected,

package/dist/types.d.ts

@@ -1,4 +1,4 @@
-import { IconName } from "./icons/registry.js";
+import type { IconName } from "./icons/registry.js";
 export type IconMode = "solid" | "outline" | "duotone";
 export type IconProps = {
     size?: number | string;

package/dist/utils/animations.d.ts

@@ -7,7 +7,7 @@ export declare function getMorphTransform(morphTo: IconProps["morphTo"]): string
 export declare function getSlideTransform(direction: IconProps["slideDirection"]): string;
 /** Combina todas las transformaciones */
 export declare function combineTransforms(props: Partial<IconProps>): string;
-/** Genera clases de animación basadas en props */
+/** Clases de animación */
 export declare function getAnimationClasses(props: Partial<IconProps>): string[];
-/** Genera estilos de timing de animación */
+/** Estilos de timing (no interfieren con spin) */
 export declare function getAnimationStyle(props: Partial<IconProps>): string;

package/dist/utils/animations.js

@@ -40,31 +40,26 @@ export function getSlideTransform(direction) {
 /** Combina todas las transformaciones */
 export function combineTransforms(props) {
     const transforms = [];
-    // Rotación base
     if (props.rotate) {
         const rot = typeof props.rotate === "number" ? `${props.rotate}deg` : props.rotate;
         transforms.push(`rotate(${rot})`);
     }
-    // Flips
     if (props.flipH)
         transforms.push("scaleX(-1)");
     if (props.flipV)
         transforms.push("scaleY(-1)");
-    // Chevron state
     const chevronTransform = getChevronTransform(props.chevronState);
     if (chevronTransform)
         transforms.push(chevronTransform);
-    // Morph state
     const morphTransform = getMorphTransform(props.morphTo);
     if (morphTransform)
         transforms.push(morphTransform);
-    // Slide
     const slideTransform = getSlideTransform(props.slideDirection);
     if (slideTransform)
         transforms.push(slideTransform);
     return transforms.length ? transforms.join(" ") : "";
 }
-/** Genera clases de animación basadas en props */
+/** Clases de animación */
 export function getAnimationClasses(props) {
     const classes = [];
     if (props.scaleIn)
@@ -81,11 +76,12 @@ export function getAnimationClasses(props) {
         classes.push("bz-icon-heartbeat");
     if (props.pulse)
         classes.push("bz-icon-pulse");
+    // ✅ clase correcta de spin
     if (props.spin)
-        classes.push("bz-icon-spin");
+        classes.push("bz-icon--spin");
     return classes;
 }
-/** Genera estilos de timing de animación */
+/** Estilos de timing (no interfieren con spin) */
 export function getAnimationStyle(props) {
     const parts = [];
     if (props.animationDuration) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@genarou/blazir-icons",
-  "version": "1.1.5",
+  "version": "1.1.7",
   "type": "module",
   "private": false,
   "publishConfig": {