@wentools/iconic 0.1.2 → 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/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.2",
+	"version": "0.2.0",
 	"description": "Svelte 5 icon component with animations and resolver factory for Lucide icons",
 	"type": "module",
 	"sideEffects": false,