@wentools/iconic 0.1.1 → 0.2.0

package/README.md

@@ -61,13 +61,15 @@ Then use string variants anywhere:
 
 ### Animations
 
-Five built-in animations with `prefers-reduced-motion` support:
+Seven built-in animations with `prefers-reduced-motion` support:
 
 - `spin` — continuous rotation
 - `pulse` — opacity fade
 - `bounce` — vertical bounce
 - `shake` — horizontal shake
 - `ping` — scale + fade out
+- `wiggle` — rotational wobble (attention nudge)
+- `throb` — scale pulse (active/in-progress indicator)
 
 ```svelte
 <Icon icon={Search} animation="spin" />

package/dist/icon/Icon.svelte

@@ -56,6 +56,8 @@
 			bounce: 1.2,
 			shake: 0.5,
 			ping: 1,
+			wiggle: 0.5,
+			throb: 1.5,
 		}
 
 		const defaultEasings: Record<IconAnimation, string> = {
@@ -64,6 +66,8 @@
 			bounce: 'ease-in-out',
 			shake: 'ease-in-out',
 			ping: 'cubic-bezier(0, 0, 0.2, 1)',
+			wiggle: 'ease-in-out',
+			throb: 'ease-in-out',
 		}
 
 		return {
@@ -173,6 +177,38 @@
 		}
 	}
 
+	@keyframes wiggle {
+		0%,
+		100% {
+			transform: rotate(0deg);
+		}
+		15% {
+			transform: rotate(-12deg);
+		}
+		30% {
+			transform: rotate(10deg);
+		}
+		45% {
+			transform: rotate(-6deg);
+		}
+		60% {
+			transform: rotate(3deg);
+		}
+		75% {
+			transform: rotate(-1deg);
+		}
+	}
+
+	@keyframes throb {
+		0%,
+		100% {
+			transform: scale(1);
+		}
+		50% {
+			transform: scale(1.15);
+		}
+	}
+
 	/* Animation classes */
 	.animate-spin {
 		animation: spin var(--animation-duration) var(--animation-easing) var(--animation-iterations);
@@ -194,13 +230,23 @@
 		animation: ping var(--animation-duration) var(--animation-easing) var(--animation-iterations);
 	}
 
+	.animate-wiggle {
+		animation: wiggle var(--animation-duration) var(--animation-easing) var(--animation-iterations);
+	}
+
+	.animate-throb {
+		animation: throb var(--animation-duration) var(--animation-easing) var(--animation-iterations);
+	}
+
 	/* Respect user's motion preferences */
 	@media (prefers-reduced-motion: reduce) {
 		.animate-spin,
 		.animate-pulse,
 		.animate-bounce,
 		.animate-shake,
-		.animate-ping {
+		.animate-ping,
+		.animate-wiggle,
+		.animate-throb {
 			animation: none;
 		}
 	}

package/dist/index.d.ts

@@ -1,4 +1,4 @@
 export { Icon } from './icon/index';
 export type { IconAnimation, IconAction } from './types';
-export { createIconResolver, setIconResolver, getIconResolver } from './resolver/index';
+export { createIconResolver, setIconResolver, setGlobalIconResolver, getIconResolver } from './resolver/index';
 export type { IconResolver } from './resolver/index';

package/dist/index.js

@@ -1,2 +1,2 @@
 export { Icon } from './icon/index';
-export { createIconResolver, setIconResolver, getIconResolver } from './resolver/index';
+export { createIconResolver, setIconResolver, setGlobalIconResolver, getIconResolver } from './resolver/index';

package/dist/resolver/context.d.ts

@@ -6,5 +6,10 @@ declare const setIconResolver: <TVariant extends string>(resolver: {
     isIconVariant: (value: string) => value is TVariant;
     iconVariants: readonly TVariant[];
 }) => void;
+declare const setGlobalIconResolver: <TVariant extends string>(resolver: {
+    resolveToComponent: (variant: TVariant) => Component;
+    isIconVariant: (value: string) => value is TVariant;
+    iconVariants: readonly TVariant[];
+}) => void;
 declare const getIconResolver: () => IconResolver | undefined;
-export { ICON_RESOLVER_KEY, setIconResolver, getIconResolver };
+export { ICON_RESOLVER_KEY, setIconResolver, setGlobalIconResolver, getIconResolver };

package/dist/resolver/context.js

@@ -1,9 +1,18 @@
 import { getContext, setContext } from 'svelte';
 const ICON_RESOLVER_KEY = Symbol('icon-resolver');
+let globalResolver;
 const setIconResolver = (resolver) => {
     setContext(ICON_RESOLVER_KEY, resolver);
 };
+const setGlobalIconResolver = (resolver) => {
+    globalResolver = resolver;
+};
 const getIconResolver = () => {
-    return getContext(ICON_RESOLVER_KEY);
+    try {
+        return getContext(ICON_RESOLVER_KEY) ?? globalResolver;
+    }
+    catch {
+        return globalResolver;
+    }
 };
-export { ICON_RESOLVER_KEY, setIconResolver, getIconResolver };
+export { ICON_RESOLVER_KEY, setIconResolver, setGlobalIconResolver, getIconResolver };

package/dist/resolver/index.d.ts

@@ -1,3 +1,3 @@
 export { createIconResolver } from './create_icon_resolver';
 export type { IconResolver } from './create_icon_resolver';
-export { setIconResolver, getIconResolver } from './context';
+export { setIconResolver, setGlobalIconResolver, getIconResolver } from './context';

package/dist/resolver/index.js

@@ -1,2 +1,2 @@
 export { createIconResolver } from './create_icon_resolver';
-export { setIconResolver, getIconResolver } from './context';
+export { setIconResolver, setGlobalIconResolver, getIconResolver } from './context';

package/dist/types.d.ts

@@ -1,5 +1,5 @@
 import type { Component } from 'svelte';
-type IconAnimation = 'spin' | 'pulse' | 'bounce' | 'shake' | 'ping';
+type IconAnimation = 'spin' | 'pulse' | 'bounce' | 'shake' | 'ping' | 'wiggle' | 'throb';
 /**
  * Shared type for icon actions used in form inputs, tags, badges, etc.
  * Generic over the icon variant string type so projects can narrow it.

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wentools/iconic",
-	"version": "0.1.1",
+	"version": "0.2.0",
 	"description": "Svelte 5 icon component with animations and resolver factory for Lucide icons",
 	"type": "module",
 	"sideEffects": false,