@genarou/blazir-icons 1.1.3 → 1.1.5

package/dist/DynamicIcon.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { iconRegistry } from "./icons/registry.js";
   import type { IconName, IconProps } from "./types.js";
+  import { coerceSize } from "./utils/defaults.js";
 
   // Props específicas del componente dinámico
   interface DynamicIconProps extends Omit<IconProps, "children"> {
@@ -12,10 +13,13 @@
   // Obtener el componente del registry
   const IconComponent = $derived(iconRegistry[props.name]);
 
-  // Extraer solo las props que necesita el icono (sin 'name')
+  // 🔧 Extraer solo las props que necesita el icono (sin 'name') y normalizar size
   const iconProps = $derived(() => {
-    const { name, ...rest } = props;
-    return rest;
+    const { name, size, ...rest } = props;
+    return {
+      ...rest,
+      size: coerceSize(size, 24), // 🎯 Normalizar size aquí también
+    };
   });
 </script>
 

package/dist/Icon.svelte

@@ -2,48 +2,39 @@
 <script lang="ts">
   import { iconRegistry, type IconName } from "./icons/registry";
   import type { IconProps } from "./types";
+  import { coerceSize } from "./utils/defaults";
 
   let {
     name,
-    size = $bindable(24),
-    color = $bindable("#6b7280"),
-    stroke = $bindable(undefined),
-    strokeWidth = $bindable(undefined),
-    fill = $bindable(undefined),
-    className = $bindable(""),
-    ariaLabel = $bindable(undefined),
-    title = $bindable(""),
-    rotate = $bindable(0),
-    flipH = $bindable(false),
-    flipV = $bindable(false),
-    spin = $bindable(false),
-    nonScalingStroke = $bindable(false),
-    preserveAspectRatio = $bindable("xMidYMid meet"),
-    decorative = $bindable(false),
-    titleId = $bindable(""),
-    testId = $bindable(undefined),
-    attrs = $bindable({}),
-    animationDuration = $bindable(undefined),
-    animationDelay = $bindable(undefined),
-    animationEasing = $bindable(undefined),
-    ...restProps
+    size = 24, // ✅ primitivo
+    color = "#6b7280",
+    stroke,
+    strokeWidth,
+    fill,
+    className = "",
+    ariaLabel,
+    title = "",
+    rotate = 0,
+    flipH = false,
+    flipV = false,
+    spin = false,
+    nonScalingStroke = false,
+    preserveAspectRatio = "xMidYMid meet",
+    decorative = false,
+    titleId = "",
+    testId,
+    attrs = {},
+    animationDuration,
+    animationDelay,
+    animationEasing,
+    ...rest
   }: { name: IconName } & Partial<IconProps> = $props();
 
   const Comp = $derived(iconRegistry[name]);
 
-  // Normalizar valores de animación
-  function normalizeAnimationValue(
-    value: number | string | undefined
-  ): string | undefined {
-    if (typeof value === "number") {
-      return `${value}ms`;
-    }
-    return value;
-  }
-
-  // Props a pasar - obteniendo valores directamente, no funciones derivadas
   const passProps = $derived(() => ({
-    size,
+    // ✅ tamaño garantizado como number|string simple
+    size: coerceSize(size, 24),
     color,
     stroke: color ? (stroke ?? "none") : stroke,
     fill: color ? (fill ?? color) : fill,
@@ -61,18 +52,21 @@
     titleId,
     testId,
     attrs,
-    // Normalizar las propiedades de animación
-    animationDuration: normalizeAnimationValue(animationDuration),
-    animationDelay: normalizeAnimationValue(animationDelay),
+    animationDuration:
+      typeof animationDuration === "number"
+        ? `${animationDuration}ms`
+        : animationDuration,
+    animationDelay:
+      typeof animationDelay === "number"
+        ? `${animationDelay}ms`
+        : animationDelay,
     animationEasing,
-    ...restProps,
+    ...rest,
   }));
 </script>
 
 {#if Comp}
   <Comp {...passProps} />
 {:else}
-  <span class="inline-block align-middle text-xs text-red-500">
-    Unknown icon: {name}
-  </span>
+  <span class="inline-block text-xs text-red-500">Unknown icon: {name}</span>
 {/if}

package/dist/Icon.svelte.d.ts

@@ -3,6 +3,6 @@ import type { IconProps } from "./types";
 type $$ComponentProps = {
     name: IconName;
 } & Partial<IconProps>;
-declare const Icon: import("svelte").Component<$$ComponentProps, {}, "size" | "stroke" | "strokeWidth" | "fill" | "className" | "ariaLabel" | "title" | "rotate" | "flipH" | "flipV" | "spin" | "color" | "nonScalingStroke" | "preserveAspectRatio" | "decorative" | "titleId" | "testId" | "attrs" | "animationDuration" | "animationDelay" | "animationEasing">;
+declare const Icon: import("svelte").Component<$$ComponentProps, {}, "">;
 type Icon = ReturnType<typeof Icon>;
 export default Icon;

package/dist/IconBase.svelte

@@ -12,32 +12,29 @@
   } from "./utils/defaults.js";
 
   const props: IconProps & { mode?: IconMode } = $props();
-  const mode = $derived(props.mode ?? "solid");
 
+  const mode = $derived(props.mode ?? "solid");
   const klass = $derived(normalizeClass(props));
-  const common = $derived(commonDefaults(props));
+  const common = $derived(commonDefaults(props)); // ✅ ya coercea size
   const visual = $derived(modeDefaults(mode, props));
 
   const animationClasses = $derived(getAnimationClasses(props).join(" "));
   const baseTransform = $derived(combineTransforms(props));
   const animationStyle = $derived(getAnimationStyle(props));
 
-  const ariaLabel = $derived(props.ariaLabel);
-  const title = $derived(props.title);
-  const titleId = $derived(props.titleId);
   const _ariaHidden = $derived(props.decorative ? "true" : undefined);
   const _ariaLabel = $derived(
-    props.decorative ? undefined : ariaLabel || undefined
+    props.decorative ? undefined : props.ariaLabel || undefined
   );
   const _ariaLabelledby = $derived(
-    !props.decorative && title ? titleId : undefined
+    !props.decorative && props.title ? props.titleId : undefined
   );
 
-  const transformStr = $derived(() => {
-    return baseTransform
+  const transformStr = $derived(() =>
+    baseTransform
       ? `transform: ${baseTransform}; transform-origin: center;`
-      : "";
-  });
+      : ""
+  );
 
   const spinStr = $derived(() => {
     const s = props.spin;
@@ -50,6 +47,19 @@
     `${props.style || ""}${props.style && !props.style.endsWith(";") ? ";" : ""}${transformStr}${spinStr}${animationStyle}`.trim()
   );
 
+  // ✅ finalSize es un VALOR, no una función
+  const finalSize = $derived(
+    typeof common.size === "number" ? `${common.size}px` : common.size
+  );
+
+  // ✅ evita que attrs pisen width/height
+  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
+    return a;
+  });
+
   const finalClass = $derived(
     `${klass} ${animationClasses} ${props.chevronState ? "bz-icon-chevron" : ""}`.trim()
   );
@@ -57,8 +67,9 @@
 
 <svg
   xmlns="http://www.w3.org/2000/svg"
-  width={typeof common.size === "number" ? `${common.size}px` : common.size}
-  height={typeof common.size === "number" ? `${common.size}px` : common.size}
+  {...safeAttrs}
+  width={finalSize}
+  height={finalSize}
   viewBox={common.viewBox}
   preserveAspectRatio={common.preserveAspectRatio}
   class={finalClass}
@@ -75,10 +86,9 @@
   stroke-linejoin={props.strokeLinejoin}
   vector-effect={props.nonScalingStroke ? "non-scaling-stroke" : undefined}
   data-testid={props.testId}
-  {...props.attrs ?? {}}
 >
-  {#if title}<title id={titleId}>{title}</title>{/if}
-  {@render props.children()}
+  {#if props.title}<title id={props.titleId}>{props.title}</title>{/if}
+  {@render props.children?.()}
 </svg>
 
 <style>

package/dist/actions.js

@@ -141,7 +141,7 @@ export function iconEffects(node, opts = {}) {
             cancelAnimationFrame(rafId);
             node.removeEventListener("pointerenter", onEnter);
             node.removeEventListener("pointerleave", onLeave);
-            node.addEventListener("pointerdown", onDown);
+            node.removeEventListener("pointerdown", onDown);
             node.removeEventListener("pointerup", onUp);
             node.removeEventListener("keydown", onKeydown);
             node.removeEventListener("mousedown", onMousedown);

package/dist/icons-api.d.ts

@@ -102,7 +102,7 @@ export declare const iconStats: {
     readonly categories: number;
     readonly animated: number;
     readonly byCategory: {
-        [k: string]: 2 | 9 | 3 | 4 | 5 | 6 | 7 | 8 | 10 | 12;
+        [k: string]: 12 | 2 | 9 | 3 | 10 | 4 | 8 | 7 | 6 | 5;
     };
     readonly mostUsedCategory: string;
     readonly shortcuts: number;

package/dist/utils/defaults.d.ts

@@ -1,6 +1,27 @@
 import type { IconMode, IconProps } from "../types.js";
-/** Prioriza `class` sobre `className` (sin mutar el objeto) */
-export declare function normalizeClass(p: Partial<IconProps>): string;
+export declare const SIZE_TOKENS: {
+    readonly xs: 12;
+    readonly sm: 16;
+    readonly md: 20;
+    readonly lg: 24;
+    readonly xl: 32;
+    readonly "2xl": 40;
+    readonly "3xl": 48;
+};
+export type SizeToken = keyof typeof SIZE_TOKENS;
+/**
+ * 🔧 Coerce size con soporte para:
+ * - Números: 24, 32
+ * - Strings con unidades: "1.5rem", "24px", "100%"
+ * - Tokens semánticos: "sm", "lg", "xl"
+ * - Bindables/Proxies: unwrapping automático
+ */
+export declare function coerceSize(v: any, fallback?: number): number | string;
+/** Prioriza class sobre className (sin mutar el objeto) */
+export declare function normalizeClass(p: Partial<{
+    class?: string;
+    className?: string;
+}>): string;
 /** Convierte ancho de trazo string->number con fallback */
 export declare function coerceStrokeWidth(v: IconProps["strokeWidth"], fallback?: number): number | undefined;
 /** Aplica defaults solo cuando la prop está undefined */
@@ -19,8 +40,14 @@ export declare function modeDefaults(mode: IconMode, props: Partial<IconProps>):
     strokeLinecap: any;
     strokeLinejoin: any;
 };
-/** Defaults comunes no visuales */
-export declare function commonDefaults(p: Partial<IconProps>): {
+/**
+ * 🎯 Defaults comunes con size coercionado
+ */
+export declare function commonDefaults(p: Partial<{
+    size?: number | string;
+    viewBox?: string;
+    preserveAspectRatio?: string;
+}>): {
     size: string | number;
     viewBox: string;
     preserveAspectRatio: string;

package/dist/utils/defaults.js

@@ -1,4 +1,48 @@
-/** Prioriza `class` sobre `className` (sin mutar el objeto) */
+// 🎯 TOKENS DE TAMAÑO - Expandible y consistente
+export const SIZE_TOKENS = {
+    xs: 12,
+    sm: 16,
+    md: 20,
+    lg: 24,
+    xl: 32,
+    "2xl": 40,
+    "3xl": 48,
+};
+/**
+ * 🔧 Coerce size con soporte para:
+ * - Números: 24, 32
+ * - Strings con unidades: "1.5rem", "24px", "100%"
+ * - Tokens semánticos: "sm", "lg", "xl"
+ * - Bindables/Proxies: unwrapping automático
+ */
+export function coerceSize(v, fallback = 24) {
+    if (v == null)
+        return fallback;
+    if (typeof v === "number")
+        return v;
+    if (typeof v === "string") {
+        if (v in SIZE_TOKENS)
+            return SIZE_TOKENS[v];
+        if (/^\d+(\.\d+)?(px|em|rem|%|vh|vw|ch|ex)$/.test(v))
+            return v; // “24px”, “1.25rem”, “100%”
+        const num = parseFloat(v);
+        if (!Number.isNaN(num))
+            return num; // “24” => 24
+        return v; // otros strings, respétalos
+    }
+    // Unwrap bindables/proxies si llegan
+    try {
+        const unwrapped = v.value ?? v;
+        if (unwrapped !== v)
+            return coerceSize(unwrapped, fallback);
+        const n = Number(v);
+        if (!Number.isNaN(n))
+            return n;
+    }
+    catch { }
+    return fallback;
+}
+/** Prioriza class sobre className (sin mutar el objeto) */
 export function normalizeClass(p) {
     return (p.class ?? p.className ?? "");
 }
@@ -44,10 +88,12 @@ export function modeDefaults(mode, props) {
             };
     }
 }
-/** Defaults comunes no visuales */
+/**
+ * 🎯 Defaults comunes con size coercionado
+ */
 export function commonDefaults(p) {
     return {
-        size: p.size ?? 24,
+        size: coerceSize(p.size, 24),
         viewBox: p.viewBox ?? "0 0 24 24",
         preserveAspectRatio: p.preserveAspectRatio ?? "xMidYMid meet",
     };

package/package.json

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