@genarou/blazir-icons 1.2.4 → 1.2.11

package/dist/Icon.svelte

@@ -9,94 +9,233 @@
   import type { IconProps } from "./types";
   import { coerceSize } from "./utils/defaults";
 
+  // ───────────────────────────────────────────────────────────────────────────
+  // POOLS (1 IO por root scrolleable, 1 RO global)
+  // ───────────────────────────────────────────────────────────────────────────
+  type RootKey = Element | undefined;
+  type Entry = {
+    el: HTMLElement;
+    onViewportChange?: (v: boolean) => void;
+    onSizeChange?: (w: number, h: number) => void;
+  };
+
+  class IntersectionPool {
+    private pools = new Map<
+      RootKey,
+      { io: IntersectionObserver; entries: Set<Entry> }
+    >();
+
+    register(root: RootKey, entry: Entry) {
+      let pool = this.pools.get(root);
+      if (!pool) {
+        const io = new IntersectionObserver(
+          (entries) => {
+            const p = this.pools.get(root);
+            if (!p) return;
+            for (const e of entries) {
+              const tgt = e.target as HTMLElement;
+              for (const item of p.entries) {
+                if (item.el === tgt) {
+                  item.onViewportChange?.(e.isIntersecting);
+                  break;
+                }
+              }
+            }
+          },
+          { root: root as Element | undefined, rootMargin: "200px" }
+        );
+        pool = { io, entries: new Set() };
+        this.pools.set(root, pool);
+      }
+
+      pool.entries.add(entry);
+      pool.io.observe(entry.el);
+
+      return () => {
+        const p = this.pools.get(root);
+        if (!p) return;
+        p.io.unobserve(entry.el);
+        p.entries.delete(entry);
+        if (p.entries.size === 0) {
+          p.io.disconnect();
+          this.pools.delete(root);
+        }
+      };
+    }
+  }
+
+  class ResizePool {
+    private ro: ResizeObserver | null = null;
+    private entries = new Set<Entry>();
+
+    private ensure() {
+      if (this.ro || typeof ResizeObserver === "undefined") return;
+      this.ro = new ResizeObserver((ros) => {
+        for (const r of ros) {
+          const tgt = r.target as HTMLElement;
+          for (const item of this.entries) {
+            if (item.el === tgt) {
+              item.onSizeChange?.(tgt.offsetWidth, tgt.offsetHeight);
+              break;
+            }
+          }
+        }
+      });
+    }
+
+    register(entry: Entry) {
+      this.ensure();
+      this.entries.add(entry);
+      this.ro?.observe(entry.el);
+      entry.onSizeChange?.(entry.el.offsetWidth, entry.el.offsetHeight); // inicial
+      return () => {
+        this.ro?.unobserve(entry.el);
+        this.entries.delete(entry);
+        if (this.entries.size === 0) {
+          this.ro?.disconnect();
+          this.ro = null;
+        }
+      };
+    }
+  }
+
+  const IO_POOL = new IntersectionPool();
+  const RO_POOL = new ResizePool();
+
+  function getScrollRoot(el: HTMLElement | null): Element | undefined {
+    let p: HTMLElement | null = el?.parentElement ?? null;
+    while (p) {
+      const s = getComputedStyle(p);
+      if (/(auto|scroll)/.test(`${s.overflow}${s.overflowX}${s.overflowY}`))
+        return p;
+      p = p.parentElement;
+    }
+    return undefined;
+  }
+
+  // ───────────────────────────────────────────────────────────────────────────
+  // PROPS
+  // ───────────────────────────────────────────────────────────────────────────
   interface DynamicIconProps extends Omit<IconProps, "children"> {
     name: IconName;
     preset?: IconPreset;
     variant?: IconVariant;
+    skeleton?: boolean;
   }
 
   const props: DynamicIconProps = $props();
+  const inputProps = $derived(() => ({ skeleton: false, ...props }));
 
-  let internalHovered = $state(false);
-  const isHovered = $derived(
-    internalHovered || (props.parentHoverContext?.hovered ?? false)
-  );
-
-  const Comp = $derived(iconRegistry[props.name]);
-
-  // Preset y variant (opcionales)
+  const Comp = $derived.by(() => iconRegistry[inputProps().name]);
   const presetProps = $derived(() =>
-    props.preset ? iconPresets[props.preset] : {}
+    inputProps().preset ? iconPresets[inputProps().preset!] : {}
   );
   const variantProps = $derived(() =>
-    props.variant ? iconVariants[props.variant] : {}
+    inputProps().variant ? iconVariants[inputProps().variant!] : {}
   );
+  const mergedProps = $derived(() => ({
+    ...presetProps(),
+    ...variantProps(),
+    ...inputProps(),
+  }));
 
-  // 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;
-  });
+  // 🔹 No pasar `skeleton` al hijo
+  const childProps = $derived(() => {
+    const { skeleton, animationDuration, animationDelay, ...rest } =
+      mergedProps();
 
-  // 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;
+    const toMsString = (v?: string | number) =>
+      v === undefined ? undefined : typeof v === "number" ? `${v}ms` : v;
 
     return {
       ...rest,
-      size: coerceSize(size, 24),
-      color: effectiveColor,
-      animationDuration: normalizeAnimationValue(animationDuration),
-      animationDelay: normalizeAnimationValue(animationDelay),
+      animationDuration: toMsString(animationDuration),
+      animationDelay: toMsString(animationDelay),
     };
   });
 
-  function handleMouseEnter() {
-    internalHovered = true;
-  }
-  function handleMouseLeave() {
-    internalHovered = false;
+  const boxSize = $derived(() => {
+    const s = coerceSize(mergedProps().size, 24);
+    return typeof s === "number" ? `${s}px` : s;
+  });
+
+  // ───────────────────────────────────────────────────────────────────────────
+  // Lazy-mount con pooling
+  // ───────────────────────────────────────────────────────────────────────────
+  let hostEl: HTMLElement | null = $state(null);
+  let isVisible = $state(false);
+  let inViewport = false,
+    hasSize = false;
+  let unregIO: (() => void) | null = null,
+    unregRO: (() => void) | null = null;
+
+  function tryMount() {
+    if (!isVisible && inViewport && hasSize) {
+      isVisible = true;
+      unregIO?.();
+      unregIO = null;
+      unregRO?.();
+      unregRO = null;
+    }
   }
+
+  $effect(() => {
+    if (
+      typeof window === "undefined" ||
+      typeof IntersectionObserver === "undefined"
+    ) {
+      isVisible = true;
+      return;
+    }
+    if (!hostEl || isVisible) return;
+
+    const root = getScrollRoot(hostEl) ?? undefined;
+    unregIO = IO_POOL.register(root, {
+      el: hostEl,
+      onViewportChange: (v) => {
+        inViewport = v;
+        tryMount();
+      },
+    });
+
+    if (typeof ResizeObserver !== "undefined") {
+      unregRO = RO_POOL.register({
+        el: hostEl,
+        onSizeChange: (w, h) => {
+          hasSize = w > 0 && h > 0;
+          tryMount();
+        },
+      });
+    } else {
+      hasSize = hostEl.offsetWidth > 0 && hostEl.offsetHeight > 0;
+      tryMount();
+    }
+
+    return () => {
+      unregIO?.();
+      unregIO = null;
+      unregRO?.();
+      unregRO = null;
+    };
+  });
 </script>
 
 {#if Comp}
   <span
+    bind:this={hostEl}
     class="bz-icon-wrapper"
-    role="presentation"
-    onmouseenter={handleMouseEnter}
-    onmouseleave={handleMouseLeave}
+    style={`inline-size:${boxSize};block-size:${boxSize};`}
+    data-mounted={isVisible ? "true" : "false"}
   >
-    <Comp {...iconProps} />
+    {#if isVisible}
+      <Comp {...childProps()} />
+    {:else if mergedProps().skeleton}
+      <span class="bz-icon-skeleton" aria-hidden="true"></span>
+    {/if}
   </span>
 {:else}
-  <span class="bz-icon-error" data-icon={props.name}>
-    ⚠️ Icon not found: {props.name}
+  <span class="bz-icon-error" data-icon={inputProps().name}>
+    ⚠️ Icon not found: {inputProps().name}
   </span>
 {/if}
 
@@ -107,12 +246,19 @@
     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;

package/dist/Icon.svelte.d.ts

@@ -5,6 +5,7 @@ interface DynamicIconProps extends Omit<IconProps, "children"> {
     name: IconName;
     preset?: IconPreset;
     variant?: IconVariant;
+    skeleton?: boolean;
 }
 declare const Icon: import("svelte").Component<DynamicIconProps, {}, "">;
 type Icon = ReturnType<typeof Icon>;

package/dist/IconBase.svelte

@@ -1,55 +1,55 @@
 <script lang="ts">
   import { type IconEffectOptions, iconEffects } from "./effects.js";
-  import type { IconMode, IconProps } from "./types";
+  import type { IconMode, IconProps } from "./types.js";
   import {
     combineTransforms,
     getAnimationClasses,
     getAnimationStyle,
-  } from "./utils/animations";
+  } from "./utils/animations.js";
   import {
     commonDefaults,
     modeDefaults,
     normalizeClass,
-  } from "./utils/defaults";
+  } from "./utils/defaults.js";
+
+  const DEFAULT_MS = 180;
+  const DEFAULT_EASING = "cubic-bezier(.2,.8,.2,1)";
+
+  function normalizeMs(v?: number | string): number {
+    if (v == null) return DEFAULT_MS;
+    if (typeof v === "number") return v;
+    const s = String(v).trim();
+    if (s.endsWith("ms")) return parseFloat(s);
+    if (s.endsWith("s")) return parseFloat(s) * 1000;
+    const n = parseFloat(s);
+    return Number.isFinite(n) ? n : DEFAULT_MS;
+  }
 
-  // id simple para <title>
   function uid(): string {
     return Math.random().toString(36).slice(2);
   }
 
   const props: IconProps & { mode?: IconMode } = $props();
-
-  // ── 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));
 
-  // 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));
 
-  // ── Transform sólo CSS (no colisionar con transform del <g>) ──────────────
   const cssTransformOnly = $derived(
     combineTransforms({
       ...props,
@@ -59,7 +59,6 @@
     })
   );
 
-  // ── Duración de spin como custom prop ──────────────────────────────────────
   const spinDuration = $derived(
     props.spin
       ? props.spin === true
@@ -70,21 +69,29 @@
       : null
   );
 
-  // ── style final (string) ───────────────────────────────────────────────────
+  const hoverMs = $derived(
+    normalizeMs(props.transitionMs ?? props.animationDuration)
+  );
+  const hoverEase = $derived(
+    props.transitionEasing ?? props.animationEasing ?? DEFAULT_EASING
+  );
+
   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 (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};`);
+    if (effectiveColor) parts.push(`color:${effectiveColor};`);
+    parts.push(
+      `transition:color ${hoverMs}ms ${hoverEase},fill ${hoverMs}ms ${hoverEase},` +
+        `stroke ${hoverMs}ms ${hoverEase},transform ${hoverMs}ms ${hoverEase},opacity ${hoverMs}ms ${hoverEase};`
+    );
     return parts.join(" ");
   });
 
-  // ── A11y ───────────────────────────────────────────────────────────────────
   const ariaHidden = $derived(props.decorative ? "true" : undefined);
   const computedTitleId = $derived(
     props.title ? (props.titleId ?? `bz-icon-title-${uid()}`) : undefined
@@ -96,12 +103,9 @@
     !props.decorative && props.title ? computedTitleId : undefined
   );
 
-  // ── Tamaño final ───────────────────────────────────────────────────────────
   const finalSize = $derived(
     typeof common.size === "number" ? `${common.size}px` : common.size
   );
-
-  // ── Attrs seguros (no permitir width/height externos) ──────────────────────
   const safeAttrs = $derived(() => {
     const a = { ...(props.attrs ?? {}) };
     delete (a as any).width;
@@ -109,21 +113,15 @@
     return a;
   });
 
-  // ── Clase final ────────────────────────────────────────────────────────────
   const finalClass = $derived(
-    `${klass} ${animationClasses} ${props.chevronState ? "bz-icon-chevron" : ""}`.trim()
+    `bz-icon ${klass} ${animationClasses} ${props.chevronState ? "bz-icon-chevron" : ""}`.trim()
   );
 
-  // ── 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];
+    const [minX, minY, w, h] = vb.trim().split(/\s+/).map(Number);
     return { cx: minX + w / 2, cy: minY + h / 2 };
   }
   const center = $derived(getViewBoxCenter(common.viewBox));
-  const cx = $derived(center.cx);
-  const cy = $derived(center.cy);
-
   const svgTransform = $derived(() => {
     const cmds: string[] = [];
     if (props.rotate != null) {
@@ -131,32 +129,21 @@
         typeof props.rotate === "number"
           ? props.rotate
           : parseFloat(String(props.rotate));
-      if (!isNaN(r)) cmds.push(`rotate(${r} ${cx} ${cy})`);
+      if (!isNaN(r)) cmds.push(`rotate(${r} ${center.cx} ${center.cy})`);
     }
     if (props.flipH || props.flipV) {
-      const sx = props.flipH ? -1 : 1;
-      const sy = props.flipV ? -1 : 1;
+      const sx = props.flipH ? -1 : 1,
+        sy = props.flipV ? -1 : 1;
       cmds.push(
-        `translate(${cx} ${cy}) scale(${sx} ${sy}) translate(${-cx} ${-cy})`
+        `translate(${center.cx} ${center.cy}) scale(${sx} ${sy}) translate(${-center.cx} ${-center.cy})`
       );
     }
     return cmds.join(" ");
   });
 
-  // ── Hover handlers ─────────────────────────────────────────────────────────
-  function handleMouseEnter() {
-    internalHovered = true;
-  }
-  function handleMouseLeave() {
-    internalHovered = false;
-  }
-
-  // ── 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;
@@ -168,12 +155,18 @@
     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();
     }
   });
+
+  function handleMouseEnter() {
+    internalHovered = true;
+  }
+  function handleMouseLeave() {
+    internalHovered = false;
+  }
 </script>
 
 <svg
@@ -206,3 +199,22 @@
     {@render props.children?.()}
   </g>
 </svg>
+
+<style>
+  @media (prefers-reduced-motion: no-preference) {
+    .bz-icon {
+      animation: bzIconIn 0.18s cubic-bezier(0.2, 0.8, 0.2, 1) both;
+      will-change: opacity, transform;
+    }
+    @keyframes bzIconIn {
+      from {
+        opacity: 0;
+        transform: translateY(2px) scale(0.985);
+      }
+      to {
+        opacity: 1;
+        transform: none;
+      }
+    }
+  }
+</style>

package/dist/IconBase.svelte.d.ts

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

package/dist/icons/Ai.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+  import IconBase from "../IconBase.svelte";
+  import type { IconProps } from "../types";
+
+  const props: IconProps = $props();
+</script>
+
+<IconBase
+  {...props}
+  mode="solid"
+  viewBox="0 0 24 24"
+  ariaLabel={props.ariaLabel ?? "File settings icon"}
+  title={props.title ?? ""}
+>
+  <path
+    d="m20.467 8.694l.246-.566a4.36 4.36 0 0 1 2.22-2.25l.759-.339a.53.53 0 0 0 0-.963l-.717-.319a4.37 4.37 0 0 1-2.251-2.326l-.253-.611a.506.506 0 0 0-.942 0l-.253.61a4.37 4.37 0 0 1-2.25 2.327l-.718.32a.53.53 0 0 0 0 .962l.76.338a4.36 4.36 0 0 1 2.219 2.251l.246.566c.18.414.753.414.934 0M5.8 16h2.154l.6-1.5h2.892l.6 1.5H14.2L11 8H9zm4.2-5.115l.646 1.615H9.354zM15 16V8h2v8zM3 3a1 1 0 0 0-1 1v16a1 1 0 0 0 1 1h18a1 1 0 0 0 1-1v-9h-2v8H4V5h10V3z"
+  />
+</IconBase>

package/dist/icons/Ai.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { IconProps } from "../types";
+declare const Ai: import("svelte").Component<IconProps, {}, "">;
+type Ai = ReturnType<typeof Ai>;
+export default Ai;

package/dist/icons/Cart.svelte

@@ -0,0 +1,28 @@
+<!-- src/lib/icons/Cart.svelte -->
+<script lang="ts">
+  import IconBase from "../IconBase.svelte";
+  import type { IconProps } from "../types";
+
+  const props: IconProps = $props();
+  const ariaLabel = props.ariaLabel ?? "Cart";
+  const title = props.title ?? "";
+</script>
+
+<IconBase
+  {...props}
+  mode={props.mode ?? "solid"}
+  viewBox="0 0 24 24"
+  {ariaLabel}
+  {title}
+>
+  <!-- IconBase controla color/hover/animaciones/transición; aquí solo paths -->
+  <g fill="none">
+    <path
+      d="m12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.018-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z"
+    />
+    <path
+      fill="currentColor"
+      d="M9 20a1 1 0 1 1 0 2a1 1 0 0 1 0-2m7 0a1 1 0 1 1 0 2a1 1 0 0 1 0-2M2.2 2.9a1 1 0 0 1 1.295-.269l.105.07l1.708 1.28a2 2 0 0 1 .653.848l.06.171h12.846a2 2 0 0 1 1.998 2.1l-.013.148l-.457 3.655a5 5 0 0 1-4.32 4.34l-.226.023l-7.313.61l.26 1.124H17.5a1 1 0 0 1 .117 1.993L17.5 19H8.796a2 2 0 0 1-1.906-1.393l-.043-.157l-2.74-11.87L2.4 4.3a1 1 0 0 1-.2-1.4"
+    />
+  </g>
+</IconBase>

package/dist/icons/Cart.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { IconProps } from "../types";
+declare const Cart: import("svelte").Component<IconProps, {}, "">;
+type Cart = ReturnType<typeof Cart>;
+export default Cart;

package/dist/icons/Category.svelte

@@ -0,0 +1,57 @@
+<!-- src/lib/icons/GridAlt.svelte -->
+<script lang="ts">
+  import IconBase from "../IconBase.svelte";
+  import type { IconProps } from "../types";
+  const props: IconProps = $props();
+</script>
+
+<IconBase {...props} mode="outline" viewBox="0 0 24 24">
+  <!-- Cuadro superior derecho (romboado) -->
+  <rect
+    x="13"
+    y="3"
+    width="8"
+    height="8"
+    rx="2"
+    ry="2"
+    transform="rotate(45 17 7)"
+    fill="none"
+    stroke="currentColor"
+  />
+
+  <!-- Cuadro superior izquierdo -->
+  <rect
+    x="3"
+    y="3"
+    width="8"
+    height="8"
+    rx="2"
+    ry="2"
+    fill="none"
+    stroke="currentColor"
+  />
+
+  <!-- Cuadro inferior derecho -->
+  <rect
+    x="13"
+    y="13"
+    width="8"
+    height="8"
+    rx="2"
+    ry="2"
+    fill="none"
+    stroke="currentColor"
+  />
+
+  <!-- Cuadro inferior izquierdo -->
+  <rect
+    x="3"
+    y="13"
+    width="8"
+    height="8"
+    rx="2"
+    ry="2"
+    fill="none"
+    stroke="currentColor"
+  />
+</IconBase>

package/dist/icons/Category.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { IconProps } from "../types";
+declare const Category: import("svelte").Component<IconProps, {}, "">;
+type Category = ReturnType<typeof Category>;
+export default Category;