@genarou/blazir-icons 1.1.17 → 1.2.0

package/dist/Icon.svelte

@@ -1,80 +1,122 @@
 <script lang="ts">
   import { iconRegistry, type IconName } from "./icons/registry";
-  import type { IconComponent, IconProps } from "./types";
+  import {
+    iconPresets,
+    iconVariants,
+    type IconPreset,
+    type IconVariant,
+  } from "./presets";
+  import type { IconProps } from "./types";
   import { coerceSize } from "./utils/defaults";
 
-  let {
-    name,
-    size = 24,
-    color,
-    stroke,
-    strokeWidth,
-    fill,
-    class: classAttr = "",
-    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();
+  interface DynamicIconProps extends Omit<IconProps, "children"> {
+    name: IconName;
+    preset?: IconPreset;
+    variant?: IconVariant;
+  }
 
-  // ✅ Comp tipado como el mismo tipo que usa tu registry
-  const Comp: IconComponent | undefined = $derived(iconRegistry?.[name]);
+  const props: DynamicIconProps = $props();
 
-  // ❌ ANTES: const colorOverrides = $derived(() => color !== undefined ? {...} : {...})
-  // ✅ AHORA:
-  const colorOverrides = $derived(
-    color !== undefined
-      ? { color, stroke: stroke ?? "none", fill: fill ?? color }
-      : { stroke, fill }
+  let internalHovered = $state(false);
+  const isHovered = $derived(
+    internalHovered || (props.parentHoverContext?.hovered ?? false)
   );
 
-  // ❌ ANTES: const passProps = $derived(() => ({ ... }))
-  // ✅ AHORA:
-  const passProps = $derived({
-    size: coerceSize(size, 24),
-    ...colorOverrides,
-    strokeWidth,
-    className: classAttr || className,
-    ariaLabel,
-    title,
-    rotate,
-    flipH,
-    flipV,
-    spin,
-    nonScalingStroke,
-    preserveAspectRatio,
-    decorative,
-    titleId,
-    testId,
-    attrs,
-    animationDuration:
-      typeof animationDuration === "number"
-        ? `${animationDuration}ms`
-        : animationDuration,
-    animationDelay:
-      typeof animationDelay === "number"
-        ? `${animationDelay}ms`
-        : animationDelay,
-    animationEasing,
-    ...rest,
+  const Comp = $derived(iconRegistry[props.name]);
+
+  // Preset y variant (opcionales)
+  const presetProps = $derived(() =>
+    props.preset ? iconPresets[props.preset] : {}
+  );
+  const variantProps = $derived(() =>
+    props.variant ? iconVariants[props.variant] : {}
+  );
+
+  // Merge: preset < variant < props explícitas
+  const mergedProps = $derived({ ...presetProps, ...variantProps, ...props });
+
+  // Color efectivo con fallback
+  const effectiveColor = $derived(() => {
+    const baseColor = mergedProps.color || "currentColor";
+    if (isHovered && mergedProps.hoverColor) return mergedProps.hoverColor;
+    return baseColor;
   });
+
+  // Normalizar durations (string ms)
+  const normalizeAnimationValue = (
+    value?: number | string
+  ): string | undefined =>
+    value === undefined
+      ? undefined
+      : typeof value === "number"
+        ? `${value}ms`
+        : value;
+
+  // Props finales para el Icono concreto
+  const iconProps = $derived(() => {
+    const {
+      name,
+      preset,
+      variant,
+      size,
+      color,
+      hoverColor,
+      activeColor,
+      parentHoverContext,
+      animationDuration,
+      animationDelay,
+      ...rest
+    } = mergedProps;
+
+    return {
+      ...rest,
+      size: coerceSize(size, 24),
+      color: effectiveColor,
+      animationDuration: normalizeAnimationValue(animationDuration),
+      animationDelay: normalizeAnimationValue(animationDelay),
+    };
+  });
+
+  function handleMouseEnter() {
+    internalHovered = true;
+  }
+  function handleMouseLeave() {
+    internalHovered = false;
+  }
 </script>
 
 {#if Comp}
-  <Comp {...passProps} />
+  <span
+    class="bz-icon-wrapper"
+    role="presentation"
+    onmouseenter={handleMouseEnter}
+    onmouseleave={handleMouseLeave}
+  >
+    <Comp {...iconProps} />
+  </span>
 {:else}
-  <span class="inline-block text-xs text-red-500">Unknown icon: {name}</span>
+  <span class="bz-icon-error" data-icon={props.name}>
+    ⚠️ Icon not found: {props.name}
+  </span>
 {/if}
+
+<style>
+  .bz-icon-wrapper {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    line-height: 1;
+  }
+  .bz-icon-error {
+    display: inline-block;
+    width: 1em;
+    height: 1em;
+    background: var(--danger-color, #ef4444);
+    color: var(--danger-foreground, white);
+    text-align: center;
+    line-height: 1;
+    font-size: 0.75rem;
+    border-radius: var(--ui-radius, 0.25rem);
+    font-weight: 600;
+  }
+</style>

package/dist/Icon.svelte.d.ts

@@ -1,8 +1,11 @@
 import { type IconName } from "./icons/registry";
+import { type IconPreset, type IconVariant } from "./presets";
 import type { IconProps } from "./types";
-type $$ComponentProps = {
+interface DynamicIconProps extends Omit<IconProps, "children"> {
     name: IconName;
-} & Partial<IconProps>;
-declare const Icon: import("svelte").Component<$$ComponentProps, {}, "">;
+    preset?: IconPreset;
+    variant?: IconVariant;
+}
+declare const Icon: import("svelte").Component<DynamicIconProps, {}, "">;
 type Icon = ReturnType<typeof Icon>;
 export default Icon;

package/dist/IconBase.svelte

@@ -1,31 +1,55 @@
-<!-- 📁 src/lib/IconBase.svelte -->
 <script lang="ts">
-  import type { IconMode, IconProps } from "./types.js";
+  import { IconEffectOptions, iconEffects } from "./effects.js";
+  import type { IconMode, IconProps } from "./types";
   import {
     combineTransforms,
     getAnimationClasses,
     getAnimationStyle,
-  } from "./utils/animations.js";
+  } from "./utils/animations";
   import {
     commonDefaults,
     modeDefaults,
     normalizeClass,
-  } from "./utils/defaults.js";
+  } from "./utils/defaults";
+
+  // id simple para <title>
+  function uid(): string {
+    return Math.random().toString(36).slice(2);
+  }
 
-  // Props del icono + modo visual
   const props: IconProps & { mode?: IconMode } = $props();
 
-  // ====== Derivados visuales / clases / defaults ======
+  // ── Interacción ────────────────────────────────────────────────────────────
+  let internalHovered = $state(false);
+  const isHovered = $derived(
+    internalHovered || (props.parentHoverContext?.hovered ?? false)
+  );
+
+  // ── Color por defecto dark-first con fallbacks ─────────────────────────────
+  // 1) --icon-fg        (si existe)
+  // 2) --ui-muted-fg    (ya lo defines distinto en claro/oscuro)
+  // 3) currentColor     (último fallback)
+  const DEFAULT_ICON_COLOR = "var(--icon-fg, var(--ui-muted-fg, currentColor))";
+
+  const effectiveColor = $derived(
+    (isHovered && props.hoverColor ? props.hoverColor : props.color) ??
+      DEFAULT_ICON_COLOR
+  );
+
+  // ── Modo / clases / defaults compartidos ───────────────────────────────────
   const mode = $derived(props.mode ?? "solid");
   const klass = $derived(normalizeClass(props));
-  const common = $derived(commonDefaults(props)); // size, viewBox, preserveAspectRatio
-  const visual = $derived(modeDefaults(mode, props)); // lo que ya tienes
+  const common = $derived(commonDefaults(props));
 
+  // Pasar color efectivo al pipeline visual
+  const propsWithEffectiveColor = $derived({ ...props, color: effectiveColor });
+  const visual = $derived(modeDefaults(mode, propsWithEffectiveColor));
+
+  // ── Animaciones (clases + timing inline) ───────────────────────────────────
   const animationClasses = $derived(getAnimationClasses(props).join(" "));
-  const timingStyle = $derived(getAnimationStyle(props)); // duration/delay/easing
+  const timingStyle = $derived(getAnimationStyle(props));
 
-  // ⚠️ Solo CSS transforms semánticos (chevron/morph/slide).
-  //    Quitamos rotate/flip del combine para no duplicar (rotate/flip van en <g transform>).
+  // ── Transform sólo CSS (no colisionar con transform del <g>) ──────────────
   const cssTransformOnly = $derived(
     combineTransforms({
       ...props,
@@ -35,74 +59,80 @@
     })
   );
 
-  // ✅ 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};`;
-    })()
+  // ── Duración de spin como custom prop ──────────────────────────────────────
+  const spinDuration = $derived(
+    props.spin
+      ? props.spin === true
+        ? "1s"
+        : typeof props.spin === "number"
+          ? `${props.spin}ms`
+          : props.spin
+      : null
   );
 
-  // Estilo final inline (añadimos transform-origin/box, timing y variable de spin)
-  const style = $derived(
-    `${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
-  );
+  // ── style final (string) ───────────────────────────────────────────────────
+  const style = $derived(() => {
+    const parts: string[] = [];
+    if (props.style)
+      parts.push(props.style.endsWith(";") ? props.style : `${props.style};`);
+    if (cssTransformOnly) parts.push(`transform: ${cssTransformOnly};`);
+    parts.push("transform-origin: center;");
+    if (spinDuration) parts.push(`--bz-spin: ${spinDuration};`);
+    if (timingStyle) parts.push(timingStyle);
+    // 💡 clave: color por defecto dark-first
+    if (effectiveColor) parts.push(`color: ${effectiveColor};`);
+    return parts.join(" ");
+  });
 
-  // A11y derivados
+  // ── A11y ───────────────────────────────────────────────────────────────────
   const ariaHidden = $derived(props.decorative ? "true" : undefined);
+  const computedTitleId = $derived(
+    props.title ? (props.titleId ?? `bz-icon-title-${uid()}`) : undefined
+  );
   const ariaLabel = $derived(
     props.decorative ? undefined : props.ariaLabel || undefined
   );
   const ariaLabelledby = $derived(
-    !props.decorative && props.title ? props.titleId : undefined
+    !props.decorative && props.title ? computedTitleId : undefined
   );
 
-  // Size final como string para width/height
+  // ── Tamaño final ───────────────────────────────────────────────────────────
   const finalSize = $derived(
     typeof common.size === "number" ? `${common.size}px` : common.size
   );
 
-  // Atributos seguros (evitar que pisen width/height del svg)
+  // ── Attrs seguros (no permitir width/height externos) ──────────────────────
   const safeAttrs = $derived(() => {
-    const a = { ...(props.attrs ?? {}) } as Record<string, any>;
-    delete a.width;
-    delete a.height;
+    const a = { ...(props.attrs ?? {}) };
+    delete (a as any).width;
+    delete (a as any).height;
     return a;
   });
 
+  // ── Clase final ────────────────────────────────────────────────────────────
   const finalClass = $derived(
     `${klass} ${animationClasses} ${props.chevronState ? "bz-icon-chevron" : ""}`.trim()
   );
 
-  // ====== ROTATE / FLIPS en <g transform> (SVG nativo, centrado) ======
+  // ── Centro del viewBox para rot/flip exactos en SVG ────────────────────────
   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 center = $derived(getViewBoxCenter(common.viewBox));
+  const cx = $derived(center.cx);
+  const cy = $derived(center.cy);
 
   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})`);
+      if (!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;
@@ -110,27 +140,46 @@
         `translate(${cx} ${cy}) scale(${sx} ${sy}) translate(${-cx} ${-cy})`
       );
     }
-
     return cmds.join(" ");
   });
 
-  const visualColor = $derived(() => {
-    if (!props.color) return visual;
-
-    const v = { ...visual };
+  // ── Hover handlers ─────────────────────────────────────────────────────────
+  function handleMouseEnter() {
+    internalHovered = true;
+  }
+  function handleMouseLeave() {
+    internalHovered = false;
+  }
 
-    if (mode === "solid") {
-      v.fill = props.color; // ← Fuerza el color aquí
-    } else {
-      v.stroke = props.color;
+  // ── Efectos declarativos (props.effects > attrs.* retrocompat) ─────────────
+  let svgRef: SVGSVGElement | null = $state(null);
+
+  $effect(() => {
+    if (!svgRef) return;
+
+    const effectsOpts: IconEffectOptions = { ...(props.effects ?? {}) };
+    const a = props.attrs ?? {};
+    if (a.spinOnHover) effectsOpts.spinOnHover = true;
+    if (a.bounceOnHover) effectsOpts.bounceOnHover = true;
+    if (a.wiggleOnHover) effectsOpts.wiggleOnHover = true;
+    if (a.slideOnHover) effectsOpts.slideOnHover = a.slideOnHover;
+    if (a.morphOnHover) effectsOpts.morphOnHover = a.morphOnHover;
+    if (a.elasticOnClick) effectsOpts.elasticOnClick = true;
+    if (a.heartbeatOnActive) effectsOpts.heartbeatOnActive = true;
+    if (a.hoverScale) effectsOpts.hoverScale = a.hoverScale;
+    if (a.pressScale) effectsOpts.pressScale = a.pressScale;
+
+    if (Object.keys(effectsOpts).length > 0) {
+      const controller = iconEffects(svgRef, effectsOpts);
+      return () => controller.destroy();
     }
-    return v;
   });
 </script>
 
 <svg
+  bind:this={svgRef}
   xmlns="http://www.w3.org/2000/svg"
-  {...safeAttrs}
+  {...safeAttrs()}
   width={finalSize}
   height={finalSize}
   viewBox={common.viewBox}
@@ -141,16 +190,18 @@
   aria-label={ariaLabel}
   aria-labelledby={ariaLabelledby}
   focusable="false"
-  {style}
-  fill={visualColor().fill}
-  stroke={visualColor().stroke}
-  stroke-width={visualColor().strokeWidth}
+  style={style()}
+  fill={visual.fill}
+  stroke={visual.stroke}
+  stroke-width={visual.strokeWidth}
   stroke-linecap={props.strokeLinecap}
   stroke-linejoin={props.strokeLinejoin}
   vector-effect={props.nonScalingStroke ? "non-scaling-stroke" : undefined}
   data-testid={props.testId}
+  onmouseenter={handleMouseEnter}
+  onmouseleave={handleMouseLeave}
 >
-  {#if props.title}<title id={props.titleId}>{props.title}</title>{/if}
+  {#if props.title}<title id={computedTitleId}>{props.title}</title>{/if}
   <g transform={svgTransform()}>
     {@render props.children?.()}
   </g>

package/dist/IconBase.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { IconMode, IconProps } from "./types.js";
+import type { IconMode, IconProps } from "./types";
 type $$ComponentProps = IconProps & {
     mode?: IconMode;
 };

package/dist/{actions.d.ts → effects.d.ts}

@@ -1,13 +1,15 @@
 export type IconEffectOptions = {
-    hoverColor?: string;
-    activeColor?: string;
-    hoverScale?: number;
-    pressScale?: number;
-    rotateOnHover?: number;
     spinOnHover?: boolean;
     bounceOnHover?: boolean;
+    wiggleOnHover?: boolean;
+    slideOnHover?: "up" | "down" | "left" | "right";
+    morphOnHover?: "play" | "pause" | "menu" | "close" | "arrow" | "check";
+    elasticOnClick?: boolean;
+    heartbeatOnActive?: boolean;
     pulse?: boolean;
-    opacityHover?: number;
+    hoverScale?: number;
+    pressScale?: number;
+    rotateOnHover?: number;
     transitionMs?: number;
     easing?: string;
     cursor?: string;
@@ -15,7 +17,7 @@ export type IconEffectOptions = {
     focusRing?: boolean;
     kbFocusAttr?: string;
 };
-export declare function iconEffects(node: HTMLElement, opts?: IconEffectOptions): {
+export declare function iconEffects(node: Element, opts?: IconEffectOptions): {
     update(next?: IconEffectOptions): void;
     destroy(): void;
 };

package/dist/effects.js

@@ -0,0 +1,128 @@
+function getPrefersReducedMotion() {
+    if (typeof window === "undefined")
+        return false;
+    return (window.matchMedia?.("(prefers-reduced-motion: reduce)").matches ?? false);
+}
+export function iconEffects(node, opts = {}) {
+    const prefersReducedMotion = getPrefersReducedMotion();
+    let hovering = false;
+    let pressing = false;
+    let rafId = 0;
+    // Setup inicial
+    if (opts.tooltip)
+        node.setAttribute("title", opts.tooltip);
+    if (opts.cursor && node instanceof HTMLElement)
+        node.style.cursor = opts.cursor;
+    const transitionMs = opts.transitionMs ?? 160;
+    const easing = opts.easing ?? "cubic-bezier(.2,.8,.2,1)";
+    if (!prefersReducedMotion &&
+        (node instanceof HTMLElement || node instanceof SVGElement)) {
+        node.style.transition = `transform ${transitionMs}ms ${easing}`;
+    }
+    if (opts.pulse && !prefersReducedMotion) {
+        node.classList.add("bz-icon-pulse");
+    }
+    function applyAnimations() {
+        cancelAnimationFrame(rafId);
+        rafId = requestAnimationFrame(() => {
+            if (prefersReducedMotion)
+                return;
+            const parts = [];
+            // Escala
+            const scale = hovering
+                ? pressing && opts.pressScale
+                    ? opts.pressScale
+                    : opts.hoverScale ?? 1
+                : 1;
+            if (scale !== 1)
+                parts.push(`scale(${scale})`);
+            // Rotación
+            if (hovering && opts.rotateOnHover)
+                parts.push(`rotate(${opts.rotateOnHover}deg)`);
+            // Slide
+            if (hovering && opts.slideOnHover) {
+                const slideMap = {
+                    up: "translateY(-4px)",
+                    down: "translateY(4px)",
+                    left: "translateX(-4px)",
+                    right: "translateX(4px)",
+                };
+                parts.push(slideMap[opts.slideOnHover]);
+            }
+            if (node instanceof HTMLElement || node instanceof SVGElement) {
+                node.style.transform = parts.join(" ");
+            }
+            // Clases de animación CSS
+            node.classList.toggle("bz-icon-spin", !!(hovering && opts.spinOnHover));
+            node.classList.toggle("bz-icon-bounce", !!(hovering && opts.bounceOnHover));
+            node.classList.toggle("bz-icon-wiggle", !!(hovering && opts.wiggleOnHover));
+            node.classList.toggle("bz-icon-heartbeat", !!(pressing && opts.heartbeatOnActive));
+            node.classList.toggle("bz-icon-elastic", !!(pressing && opts.elasticOnClick));
+            if (opts.morphOnHover) {
+                node.classList.toggle(`bz-icon-morph-${opts.morphOnHover}`, hovering);
+            }
+        });
+    }
+    // Handlers
+    function onEnter() {
+        hovering = true;
+        applyAnimations();
+    }
+    function onLeave() {
+        hovering = false;
+        pressing = false;
+        applyAnimations();
+    }
+    function onDown() {
+        pressing = true;
+        applyAnimations();
+    }
+    function onUp() {
+        pressing = false;
+        applyAnimations();
+    }
+    // Nota: eventos de teclado SIN { passive: true }
+    function onKeydown(e) {
+        if (opts.focusRing !== false && e.key === "Tab") {
+            node.setAttribute(opts.kbFocusAttr ?? "data-bz-kb-focus", "true");
+        }
+    }
+    function onMousedown() {
+        if (opts.focusRing !== false) {
+            node.removeAttribute(opts.kbFocusAttr ?? "data-bz-kb-focus");
+        }
+    }
+    // Listeners
+    node.addEventListener("pointerenter", onEnter, { passive: true });
+    node.addEventListener("pointerleave", onLeave, { passive: true });
+    node.addEventListener("pointerdown", onDown, { passive: true });
+    node.addEventListener("pointerup", onUp, { passive: true });
+    node.addEventListener("keydown", onKeydown); // ← sin passive
+    node.addEventListener("mousedown", onMousedown, { passive: true });
+    return {
+        update(next) {
+            if (!next)
+                return;
+            if (next.tooltip !== undefined) {
+                if (next.tooltip)
+                    node.setAttribute("title", next.tooltip);
+                else
+                    node.removeAttribute("title");
+            }
+            if (next.cursor !== undefined && node instanceof HTMLElement) {
+                node.style.cursor = next.cursor || "";
+            }
+            Object.assign(opts, next);
+            applyAnimations();
+        },
+        destroy() {
+            cancelAnimationFrame(rafId);
+            node.removeEventListener("pointerenter", onEnter);
+            node.removeEventListener("pointerleave", onLeave);
+            node.removeEventListener("pointerdown", onDown);
+            node.removeEventListener("pointerup", onUp);
+            node.removeEventListener("keydown", onKeydown);
+            node.removeEventListener("mousedown", onMousedown);
+        },
+    };
+}