@genarou/blazir-icons 1.2.8 → 1.2.13

package/dist/Icon.svelte

@@ -1,122 +1,195 @@
+<!-- DynamicIcon.svelte -->
 <script lang="ts">
+  import { coerceSize } from ".";
   import { iconRegistry, type IconName } from "./icons/registry";
-  import {
-    iconPresets,
-    iconVariants,
-    type IconPreset,
-    type IconVariant,
-  } from "./presets";
+  import { iconPresets, iconVariants } from "./presets";
   import type { IconProps } from "./types";
-  import { coerceSize } from "./utils/defaults";
+
+  // Bridge de actions externas (no importamos lazy aquí)
+  type ActionFn<T = HTMLElement, P = any> = (
+    node: T,
+    params?: P
+  ) => void | { update?: (p?: P) => void; destroy?: () => void };
+
+  type ActionEntry<T = HTMLElement> = [ActionFn<T, any>, any?];
+
+  type IconPresetName = keyof typeof iconPresets;
+  type IconVariantName = keyof typeof iconVariants;
 
   interface DynamicIconProps extends Omit<IconProps, "children"> {
-    name: IconName;
-    preset?: IconPreset;
-    variant?: IconVariant;
+    name?: IconName;
+    preset?: IconPresetName;
+    variant?: IconVariantName;
+    class?: string;
+    style?: string;
+    /** Pasas aquí tus actions: p.ej. actions={[[lazyClass, opts]]} */
+    actions?: ActionEntry[];
   }
 
-  const props: DynamicIconProps = $props();
+  const p: DynamicIconProps = $props();
 
-  let internalHovered = $state(false);
-  const isHovered = $derived(
-    internalHovered || (props.parentHoverContext?.hovered ?? false)
-  );
+  let iconName = $state<IconName | null>(null);
+  let Comp = $state<any>(null);
 
-  const Comp = $derived.by(() => iconRegistry[props.name]);
+  let presetProps = $state<Partial<IconProps>>({});
+  let variantProps = $state<Partial<IconProps>>({});
 
-  // Preset y variant (opcionales)
-  const presetProps = $derived(() =>
-    props.preset ? iconPresets[props.preset] : {}
-  );
-  const variantProps = $derived(() =>
-    props.variant ? iconVariants[props.variant] : {}
-  );
+  let child = $state<IconProps>({} as IconProps);
+  let boxSize = $state<string>("1em");
+  let hostClass = $state<string>("bz-icon-wrapper");
+  let hostStyle = $state<string>("");
 
-  // Merge: preset < variant < props explícitas
-  const mergedProps = $derived({ ...presetProps, ...variantProps, ...props });
+  // Key para forzar remonte y reiniciar animaciones
+  let mountKey = $state(0);
 
-  // Color efectivo con fallback
-  const effectiveColor = $derived(() => {
-    const baseColor = mergedProps.color || "currentColor";
-    if (isHovered && mergedProps.hoverColor) return mergedProps.hoverColor;
-    return baseColor;
+  // name -> componente
+  $effect(() => {
+    iconName = p.name ?? null;
+    Comp = iconName ? iconRegistry[iconName] : null;
   });
 
-  // 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(() => {
+  // preset/variant -> props parciales
+  $effect(() => {
+    const key = p.preset as IconPresetName | undefined;
+    presetProps = key ? iconPresets[key] : {};
+  });
+  $effect(() => {
+    const key = p.variant as IconVariantName | undefined;
+    variantProps = key ? iconVariants[key] : {};
+  });
+
+  // Limpia class/style/actions del host antes de pasar al hijo
+  $effect(() => {
     const {
-      name,
-      preset,
-      variant,
-      size,
-      color,
-      hoverColor,
-      activeColor,
-      parentHoverContext,
-      animationDuration,
-      animationDelay,
-      ...rest
-    } = mergedProps;
+      class: _class,
+      style: _style,
+      actions: _actions,
+      ...restRaw
+    } = { ...presetProps, ...variantProps, ...p } as Record<string, unknown>;
 
-    return {
-      ...rest,
-      size: coerceSize(size, 24),
-      color: effectiveColor(),
-      animationDuration: normalizeAnimationValue(animationDuration),
-      animationDelay: normalizeAnimationValue(animationDelay),
-    };
+    const toMs = (v: unknown) =>
+      v == null ? undefined : typeof v === "number" ? `${v}ms` : (v as string);
+
+    child = {
+      ...(restRaw as IconProps),
+      animationDuration: toMs((restRaw as any).animationDuration),
+      animationDelay: toMs((restRaw as any).animationDelay),
+    } as IconProps;
+  });
+
+  // Tamaño del wrapper
+  $effect(() => {
+    const rawSize =
+      (p as any).size ??
+      (presetProps as any).size ??
+      (variantProps as any).size;
+    const s = coerceSize(rawSize, 24);
+    boxSize = typeof s === "number" ? `${s}px` : s;
+  });
+
+  // Host attrs
+  $effect(() => {
+    hostClass = `bz-icon-wrapper ${p.class ?? ""}`.trim();
+    hostStyle =
+      `--bz-icon-size:${boxSize};` +
+      `width:${boxSize};height:${boxSize};` +
+      `inline-size:${boxSize};block-size:${boxSize};` +
+      `${p.style ?? ""}`;
   });
 
-  function handleMouseEnter() {
-    internalHovered = true;
+  // Bridge para aplicar actions externas
+  function applyActions(node: HTMLElement, entries: ActionEntry[] = []) {
+    let handles =
+      entries?.map(([fn, params]) => fn?.(node, params)).filter(Boolean) ?? [];
+    return {
+      update(next: ActionEntry[] = []) {
+        handles.forEach((h) => h?.destroy?.());
+        handles =
+          next?.map(([fn, params]) => fn?.(node, params)).filter(Boolean) ?? [];
+      },
+      destroy() {
+        handles.forEach((h) => h?.destroy?.());
+        handles = [];
+      },
+    };
   }
-  function handleMouseLeave() {
-    internalHovered = false;
+
+  // Reanima al recibir el evento del action (asegúrate de que el action emita "lazyMount")
+  function onLazyMount() {
+    mountKey++;
   }
 </script>
 
 {#if Comp}
   <span
-    class="bz-icon-wrapper"
-    role="presentation"
-    onmouseenter={handleMouseEnter}
-    onmouseleave={handleMouseLeave}
+    class={hostClass}
+    style={hostStyle}
+    use:applyActions={p.actions ?? []}
+    onlazyMount={onLazyMount}
   >
-    <Comp {...iconProps()} />
+    {#key mountKey}
+      <Comp {...child} />
+    {/key}
   </span>
-{:else}
-  <span class="bz-icon-error" data-icon={props.name}>
-    ⚠️ Icon not found: {props.name}
+{:else if iconName}
+  <span class="bz-icon-error" data-icon={iconName}>
+    ⚠️ Icon not found: {iconName}
   </span>
+{:else}
+  <span class="bz-icon-skeleton" aria-hidden="true"></span>
 {/if}
 
 <style>
-  .bz-icon-wrapper {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    line-height: 1;
+  .bz-icon-skeleton {
+    width: 100%;
+    height: 100%;
+    border-radius: var(--ui-radius, 0.25rem);
+    background: color-mix(in oklab, currentColor 12%, transparent);
+    opacity: 0.5;
   }
   .bz-icon-error {
     display: inline-block;
     width: 1em;
     height: 1em;
     background: var(--danger-color, #ef4444);
-    color: var(--danger-foreground, white);
+    color: var(--danger-foreground, #fff);
     text-align: center;
     line-height: 1;
     font-size: 0.75rem;
     border-radius: var(--ui-radius, 0.25rem);
     font-weight: 600;
   }
+  .is-entering {
+    opacity: 0.001;
+    transform: translateY(4px);
+    animation: ic-enter 160ms ease-out forwards;
+  }
+  .is-leaving {
+    opacity: 1;
+    transform: none;
+    animation: ic-leave 160ms ease-in forwards;
+  }
+  .is-mounted {
+    opacity: 1;
+    transform: none;
+  }
+  @keyframes ic-enter {
+    to {
+      opacity: 1;
+      transform: none;
+    }
+  }
+  @keyframes ic-leave {
+    to {
+      opacity: 0.001;
+      transform: translateY(4px);
+    }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .is-entering,
+    .is-leaving {
+      animation: none;
+      transform: none;
+    }
+  }
 </style>

package/dist/Icon.svelte.d.ts

@@ -1,10 +1,21 @@
 import { type IconName } from "./icons/registry";
-import { type IconPreset, type IconVariant } from "./presets";
+import { iconPresets, iconVariants } from "./presets";
 import type { IconProps } from "./types";
+type ActionFn<T = HTMLElement, P = any> = (node: T, params?: P) => void | {
+    update?: (p?: P) => void;
+    destroy?: () => void;
+};
+type ActionEntry<T = HTMLElement> = [ActionFn<T, any>, any?];
+type IconPresetName = keyof typeof iconPresets;
+type IconVariantName = keyof typeof iconVariants;
 interface DynamicIconProps extends Omit<IconProps, "children"> {
-    name: IconName;
-    preset?: IconPreset;
-    variant?: IconVariant;
+    name?: IconName;
+    preset?: IconPresetName;
+    variant?: IconVariantName;
+    class?: string;
+    style?: string;
+    /** Pasas aquí tus actions: p.ej. actions={[[lazyClass, opts]]} */
+    actions?: ActionEntry[];
 }
 declare const Icon: import("svelte").Component<DynamicIconProps, {}, "">;
 type Icon = ReturnType<typeof Icon>;