@tailwind-styled/animate 2.0.0

package/dist/index.cjs

@@ -0,0 +1,277 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  animate: () => animate,
+  animations: () => animations,
+  compileAnimation: () => compileAnimation,
+  extractAnimationCss: () => extractAnimationCss,
+  getAnimationRegistry: () => getAnimationRegistry,
+  keyframes: () => keyframes
+});
+module.exports = __toCommonJS(index_exports);
+var TW_TO_CSS = {
+  // Opacity
+  "opacity-0": "opacity: 0",
+  "opacity-5": "opacity: 0.05",
+  "opacity-10": "opacity: 0.1",
+  "opacity-20": "opacity: 0.2",
+  "opacity-25": "opacity: 0.25",
+  "opacity-30": "opacity: 0.3",
+  "opacity-40": "opacity: 0.4",
+  "opacity-50": "opacity: 0.5",
+  "opacity-60": "opacity: 0.6",
+  "opacity-70": "opacity: 0.7",
+  "opacity-75": "opacity: 0.75",
+  "opacity-80": "opacity: 0.8",
+  "opacity-90": "opacity: 0.9",
+  "opacity-95": "opacity: 0.95",
+  "opacity-100": "opacity: 1",
+  // Translate Y
+  "translate-y-0": "transform: translateY(0px)",
+  "translate-y-0.5": "transform: translateY(0.125rem)",
+  "translate-y-1": "transform: translateY(0.25rem)",
+  "translate-y-2": "transform: translateY(0.5rem)",
+  "translate-y-3": "transform: translateY(0.75rem)",
+  "translate-y-4": "transform: translateY(1rem)",
+  "translate-y-6": "transform: translateY(1.5rem)",
+  "translate-y-8": "transform: translateY(2rem)",
+  "-translate-y-1": "transform: translateY(-0.25rem)",
+  "-translate-y-2": "transform: translateY(-0.5rem)",
+  "-translate-y-4": "transform: translateY(-1rem)",
+  "-translate-y-8": "transform: translateY(-2rem)",
+  // Translate X
+  "translate-x-0": "transform: translateX(0px)",
+  "translate-x-1": "transform: translateX(0.25rem)",
+  "translate-x-2": "transform: translateX(0.5rem)",
+  "translate-x-4": "transform: translateX(1rem)",
+  "-translate-x-1": "transform: translateX(-0.25rem)",
+  "-translate-x-2": "transform: translateX(-0.5rem)",
+  "-translate-x-4": "transform: translateX(-1rem)",
+  // Scale
+  "scale-0": "transform: scale(0)",
+  "scale-50": "transform: scale(0.5)",
+  "scale-75": "transform: scale(0.75)",
+  "scale-90": "transform: scale(0.9)",
+  "scale-95": "transform: scale(0.95)",
+  "scale-100": "transform: scale(1)",
+  "scale-105": "transform: scale(1.05)",
+  "scale-110": "transform: scale(1.1)",
+  "scale-125": "transform: scale(1.25)",
+  "scale-150": "transform: scale(1.5)",
+  // Rotate
+  "rotate-0": "transform: rotate(0deg)",
+  "rotate-1": "transform: rotate(1deg)",
+  "rotate-2": "transform: rotate(2deg)",
+  "rotate-3": "transform: rotate(3deg)",
+  "rotate-6": "transform: rotate(6deg)",
+  "rotate-12": "transform: rotate(12deg)",
+  "rotate-45": "transform: rotate(45deg)",
+  "rotate-90": "transform: rotate(90deg)",
+  "rotate-180": "transform: rotate(180deg)",
+  "-rotate-1": "transform: rotate(-1deg)",
+  "-rotate-2": "transform: rotate(-2deg)",
+  "-rotate-6": "transform: rotate(-6deg)",
+  "-rotate-12": "transform: rotate(-12deg)",
+  "-rotate-45": "transform: rotate(-45deg)",
+  "-rotate-90": "transform: rotate(-90deg)",
+  // Blur
+  "blur-none": "filter: blur(0)",
+  "blur-sm": "filter: blur(4px)",
+  blur: "filter: blur(8px)",
+  "blur-md": "filter: blur(12px)",
+  "blur-lg": "filter: blur(16px)",
+  "blur-xl": "filter: blur(24px)",
+  "blur-2xl": "filter: blur(40px)",
+  "blur-3xl": "filter: blur(64px)"
+};
+function classesToCss(classes) {
+  const parts = classes.split(/\s+/).filter(Boolean);
+  const transforms = [];
+  const others = [];
+  for (const cls of parts) {
+    const css = TW_TO_CSS[cls];
+    if (!css) continue;
+    if (css.startsWith("transform:")) {
+      transforms.push(css.replace("transform: ", ""));
+    } else {
+      others.push(css);
+    }
+  }
+  const result = [...others];
+  if (transforms.length > 0) {
+    result.push(`transform: ${transforms.join(" ")}`);
+  }
+  return result.join("; ");
+}
+var _animCounter = 0;
+function genAnimId(name) {
+  if (name) return `tw-${name.replace(/[^a-zA-Z0-9]/g, "-")}`;
+  return `tw-anim-${++_animCounter}`;
+}
+var _animRegistry = /* @__PURE__ */ new Map();
+function getAnimationRegistry() {
+  return _animRegistry;
+}
+function compileAnimation(opts) {
+  const {
+    from,
+    to,
+    duration = 300,
+    easing = "ease-out",
+    delay = 0,
+    fill = "both",
+    iterations = 1,
+    direction = "normal",
+    name
+  } = opts;
+  const animId = genAnimId(
+    name != null ? name : `${from.replace(/\s+/g, "-")}-${to.replace(/\s+/g, "-")}`.slice(0, 30)
+  );
+  if (_animRegistry.has(animId)) {
+    return _animRegistry.get(animId);
+  }
+  const fromCss = classesToCss(from);
+  const toCss = classesToCss(to);
+  const keyframesCss = [
+    `@keyframes ${animId} {`,
+    fromCss ? `  from { ${fromCss} }` : `  from {}`,
+    toCss ? `  to   { ${toCss} }` : `  to {}`,
+    `}`
+  ].join("\n");
+  const iterStr = iterations === "infinite" ? "infinite" : String(iterations);
+  const animationCss = [
+    `animation-name: ${animId}`,
+    `animation-duration: ${duration}ms`,
+    `animation-timing-function: ${easing}`,
+    `animation-delay: ${delay}ms`,
+    `animation-fill-mode: ${fill}`,
+    `animation-iteration-count: ${iterStr}`,
+    `animation-direction: ${direction}`
+  ].join("; ");
+  const className = animId;
+  const compiled = { className, keyframesCss, animationCss };
+  _animRegistry.set(animId, compiled);
+  return compiled;
+}
+function animate(opts) {
+  const compiled = compileAnimation(opts);
+  if (typeof document !== "undefined") {
+    const styleId = `__tw_anim_${compiled.className}`;
+    if (!document.getElementById(styleId)) {
+      const style = document.createElement("style");
+      style.id = styleId;
+      style.textContent = `${compiled.keyframesCss}
+.${compiled.className}{${compiled.animationCss}}`;
+      document.head.appendChild(style);
+    }
+  }
+  return compiled.className;
+}
+function keyframes(name, stops) {
+  const animId = genAnimId(name);
+  if (_animRegistry.has(animId)) {
+    return animId;
+  }
+  const stopLines = Object.entries(stops).map(([stop, classes]) => {
+    const css = classesToCss(classes);
+    return `  ${stop} { ${css} }`;
+  }).join("\n");
+  const keyframesCss = `@keyframes ${animId} {
+${stopLines}
+}`;
+  if (typeof document !== "undefined") {
+    const styleId = `__tw_kf_${animId}`;
+    if (!document.getElementById(styleId)) {
+      const style = document.createElement("style");
+      style.id = styleId;
+      style.textContent = keyframesCss;
+      document.head.appendChild(style);
+    }
+  }
+  _animRegistry.set(animId, {
+    className: animId,
+    keyframesCss,
+    animationCss: `animation-name: ${animId}`
+  });
+  return animId;
+}
+var animations = {
+  fadeIn: animate({ from: "opacity-0", to: "opacity-100", duration: 200 }),
+  fadeOut: animate({ from: "opacity-100", to: "opacity-0", duration: 200 }),
+  slideUp: animate({
+    from: "opacity-0 translate-y-4",
+    to: "opacity-100 translate-y-0",
+    duration: 300
+  }),
+  slideDown: animate({
+    from: "opacity-0 -translate-y-4",
+    to: "opacity-100 translate-y-0",
+    duration: 300
+  }),
+  slideLeft: animate({
+    from: "opacity-0 translate-x-4",
+    to: "opacity-100 translate-x-0",
+    duration: 300
+  }),
+  slideRight: animate({
+    from: "opacity-0 -translate-x-4",
+    to: "opacity-100 translate-x-0",
+    duration: 300
+  }),
+  scaleIn: animate({
+    from: "opacity-0 scale-95",
+    to: "opacity-100 scale-100",
+    duration: 200,
+    easing: "cubic-bezier(0.16,1,0.3,1)"
+  }),
+  scaleOut: animate({ from: "opacity-100 scale-100", to: "opacity-0 scale-95", duration: 150 }),
+  blurIn: animate({ from: "opacity-0 blur-sm", to: "opacity-100 blur-none", duration: 300 }),
+  bounceIn: animate({
+    from: "opacity-0 scale-50",
+    to: "opacity-100 scale-100",
+    duration: 400,
+    easing: "cubic-bezier(0.34,1.56,0.64,1)"
+  }),
+  spinIn: animate({
+    from: "opacity-0 rotate-180 scale-50",
+    to: "opacity-100 rotate-0 scale-100",
+    duration: 400,
+    easing: "cubic-bezier(0.16,1,0.3,1)"
+  })
+};
+function extractAnimationCss() {
+  const lines = [];
+  for (const [, compiled] of _animRegistry) {
+    lines.push(compiled.keyframesCss);
+    lines.push(`.${compiled.className} { ${compiled.animationCss} }`);
+  }
+  return lines.join("\n\n");
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  animate,
+  animations,
+  compileAnimation,
+  extractAnimationCss,
+  getAnimationRegistry,
+  keyframes
+});

package/dist/index.d.cts

@@ -0,0 +1,117 @@
+/**
+ * tailwind-styled-v4 — Animation DSL
+ *
+ * Compile-time animation system. Define animations dengan Tailwind class,
+ * compiler generate @keyframes — nol runtime, nol JS overhead.
+ *
+ * Usage:
+ *
+ *   // Cara 1: .animate() chaining pada tw component
+ *   const FadeIn = tw.div.animate({
+ *     from: "opacity-0 translate-y-2",
+ *     to:   "opacity-100 translate-y-0",
+ *     duration: 300,
+ *     easing: "ease-out"
+ *   })
+ *
+ *   // Cara 2: standalone animate() utility
+ *   const fadeIn = animate({
+ *     from: "opacity-0 scale-95",
+ *     to:   "opacity-100 scale-100",
+ *     duration: 200,
+ *   })
+ *   const Box = tw.div`${fadeIn}`
+ *
+ *   // Cara 3: preset animations
+ *   const Card = tw.div`${animations.fadeIn} ${animations.slideUp}`
+ *
+ *   // Cara 4: tw.keyframes() custom
+ *   const spin = tw.keyframes("spin", {
+ *     "0%":   "rotate-0",
+ *     "100%": "rotate-180",
+ *   })
+ */
+interface AnimateOptions {
+    /** Tailwind classes for animation start state */
+    from: string;
+    /** Tailwind classes for animation end state */
+    to: string;
+    /** Duration in ms. Default: 300 */
+    duration?: number;
+    /** CSS easing. Default: "ease-out" */
+    easing?: string;
+    /** Delay in ms. Default: 0 */
+    delay?: number;
+    /** Fill mode. Default: "both" */
+    fill?: "none" | "forwards" | "backwards" | "both";
+    /** Iteration count. Default: 1 */
+    iterations?: number | "infinite";
+    /** Direction. Default: "normal" */
+    direction?: "normal" | "reverse" | "alternate" | "alternate-reverse";
+    /** Animation name override (auto-generated from from+to if not set) */
+    name?: string;
+}
+interface KeyframesDefinition {
+    [stop: string]: string;
+}
+interface CompiledAnimation {
+    /** CSS animation class name to apply */
+    className: string;
+    /** @keyframes CSS to inject */
+    keyframesCss: string;
+    /** animation CSS shorthand */
+    animationCss: string;
+}
+declare function getAnimationRegistry(): Map<string, CompiledAnimation>;
+/**
+ * Compile AnimateOptions into CSS animation + @keyframes.
+ *
+ * Called at build time by the compiler, or at runtime in dev mode.
+ */
+declare function compileAnimation(opts: AnimateOptions): CompiledAnimation;
+/**
+ * Generate an animation class string to use in tw template literals.
+ *
+ * @example
+ * const fadeIn = animate({ from: "opacity-0", to: "opacity-100", duration: 200 })
+ * const Box = tw.div`${fadeIn} p-4 bg-white`
+ */
+declare function animate(opts: AnimateOptions): string;
+/**
+ * Define a custom keyframe animation with multiple stops.
+ *
+ * @example
+ * const pulse = tw.keyframes("pulse", {
+ *   "0%, 100%": "opacity-100 scale-100",
+ *   "50%":      "opacity-50 scale-95",
+ * })
+ * const Dot = tw.div`${pulse} w-4 h-4 rounded-full bg-blue-500`
+ */
+declare function keyframes(name: string, stops: KeyframesDefinition): string;
+/**
+ * Collection of ready-to-use animation class strings.
+ *
+ * @example
+ * const Card = tw.div`${animations.fadeIn} p-4 bg-white`
+ * const Modal = tw.div`${animations.scaleIn} fixed inset-0`
+ */
+declare const animations: {
+    readonly fadeIn: string;
+    readonly fadeOut: string;
+    readonly slideUp: string;
+    readonly slideDown: string;
+    readonly slideLeft: string;
+    readonly slideRight: string;
+    readonly scaleIn: string;
+    readonly scaleOut: string;
+    readonly blurIn: string;
+    readonly bounceIn: string;
+    readonly spinIn: string;
+};
+/**
+ * Get all compiled animation CSS to inject into a stylesheet.
+ * Called by the CSS extraction engine at build time.
+ */
+declare function extractAnimationCss(): string;
+
+export { type AnimateOptions, type CompiledAnimation, type KeyframesDefinition, animate, animations, compileAnimation, extractAnimationCss, getAnimationRegistry, keyframes };

package/dist/index.d.ts

@@ -0,0 +1,117 @@
+/**
+ * tailwind-styled-v4 — Animation DSL
+ *
+ * Compile-time animation system. Define animations dengan Tailwind class,
+ * compiler generate @keyframes — nol runtime, nol JS overhead.
+ *
+ * Usage:
+ *
+ *   // Cara 1: .animate() chaining pada tw component
+ *   const FadeIn = tw.div.animate({
+ *     from: "opacity-0 translate-y-2",
+ *     to:   "opacity-100 translate-y-0",
+ *     duration: 300,
+ *     easing: "ease-out"
+ *   })
+ *
+ *   // Cara 2: standalone animate() utility
+ *   const fadeIn = animate({
+ *     from: "opacity-0 scale-95",
+ *     to:   "opacity-100 scale-100",
+ *     duration: 200,
+ *   })
+ *   const Box = tw.div`${fadeIn}`
+ *
+ *   // Cara 3: preset animations
+ *   const Card = tw.div`${animations.fadeIn} ${animations.slideUp}`
+ *
+ *   // Cara 4: tw.keyframes() custom
+ *   const spin = tw.keyframes("spin", {
+ *     "0%":   "rotate-0",
+ *     "100%": "rotate-180",
+ *   })
+ */
+interface AnimateOptions {
+    /** Tailwind classes for animation start state */
+    from: string;
+    /** Tailwind classes for animation end state */
+    to: string;
+    /** Duration in ms. Default: 300 */
+    duration?: number;
+    /** CSS easing. Default: "ease-out" */
+    easing?: string;
+    /** Delay in ms. Default: 0 */
+    delay?: number;
+    /** Fill mode. Default: "both" */
+    fill?: "none" | "forwards" | "backwards" | "both";
+    /** Iteration count. Default: 1 */
+    iterations?: number | "infinite";
+    /** Direction. Default: "normal" */
+    direction?: "normal" | "reverse" | "alternate" | "alternate-reverse";
+    /** Animation name override (auto-generated from from+to if not set) */
+    name?: string;
+}
+interface KeyframesDefinition {
+    [stop: string]: string;
+}
+interface CompiledAnimation {
+    /** CSS animation class name to apply */
+    className: string;
+    /** @keyframes CSS to inject */
+    keyframesCss: string;
+    /** animation CSS shorthand */
+    animationCss: string;
+}
+declare function getAnimationRegistry(): Map<string, CompiledAnimation>;
+/**
+ * Compile AnimateOptions into CSS animation + @keyframes.
+ *
+ * Called at build time by the compiler, or at runtime in dev mode.
+ */
+declare function compileAnimation(opts: AnimateOptions): CompiledAnimation;
+/**
+ * Generate an animation class string to use in tw template literals.
+ *
+ * @example
+ * const fadeIn = animate({ from: "opacity-0", to: "opacity-100", duration: 200 })
+ * const Box = tw.div`${fadeIn} p-4 bg-white`
+ */
+declare function animate(opts: AnimateOptions): string;
+/**
+ * Define a custom keyframe animation with multiple stops.
+ *
+ * @example
+ * const pulse = tw.keyframes("pulse", {
+ *   "0%, 100%": "opacity-100 scale-100",
+ *   "50%":      "opacity-50 scale-95",
+ * })
+ * const Dot = tw.div`${pulse} w-4 h-4 rounded-full bg-blue-500`
+ */
+declare function keyframes(name: string, stops: KeyframesDefinition): string;
+/**
+ * Collection of ready-to-use animation class strings.
+ *
+ * @example
+ * const Card = tw.div`${animations.fadeIn} p-4 bg-white`
+ * const Modal = tw.div`${animations.scaleIn} fixed inset-0`
+ */
+declare const animations: {
+    readonly fadeIn: string;
+    readonly fadeOut: string;
+    readonly slideUp: string;
+    readonly slideDown: string;
+    readonly slideLeft: string;
+    readonly slideRight: string;
+    readonly scaleIn: string;
+    readonly scaleOut: string;
+    readonly blurIn: string;
+    readonly bounceIn: string;
+    readonly spinIn: string;
+};
+/**
+ * Get all compiled animation CSS to inject into a stylesheet.
+ * Called by the CSS extraction engine at build time.
+ */
+declare function extractAnimationCss(): string;
+
+export { type AnimateOptions, type CompiledAnimation, type KeyframesDefinition, animate, animations, compileAnimation, extractAnimationCss, getAnimationRegistry, keyframes };

package/dist/index.js

@@ -0,0 +1,247 @@
+// src/index.ts
+var TW_TO_CSS = {
+  // Opacity
+  "opacity-0": "opacity: 0",
+  "opacity-5": "opacity: 0.05",
+  "opacity-10": "opacity: 0.1",
+  "opacity-20": "opacity: 0.2",
+  "opacity-25": "opacity: 0.25",
+  "opacity-30": "opacity: 0.3",
+  "opacity-40": "opacity: 0.4",
+  "opacity-50": "opacity: 0.5",
+  "opacity-60": "opacity: 0.6",
+  "opacity-70": "opacity: 0.7",
+  "opacity-75": "opacity: 0.75",
+  "opacity-80": "opacity: 0.8",
+  "opacity-90": "opacity: 0.9",
+  "opacity-95": "opacity: 0.95",
+  "opacity-100": "opacity: 1",
+  // Translate Y
+  "translate-y-0": "transform: translateY(0px)",
+  "translate-y-0.5": "transform: translateY(0.125rem)",
+  "translate-y-1": "transform: translateY(0.25rem)",
+  "translate-y-2": "transform: translateY(0.5rem)",
+  "translate-y-3": "transform: translateY(0.75rem)",
+  "translate-y-4": "transform: translateY(1rem)",
+  "translate-y-6": "transform: translateY(1.5rem)",
+  "translate-y-8": "transform: translateY(2rem)",
+  "-translate-y-1": "transform: translateY(-0.25rem)",
+  "-translate-y-2": "transform: translateY(-0.5rem)",
+  "-translate-y-4": "transform: translateY(-1rem)",
+  "-translate-y-8": "transform: translateY(-2rem)",
+  // Translate X
+  "translate-x-0": "transform: translateX(0px)",
+  "translate-x-1": "transform: translateX(0.25rem)",
+  "translate-x-2": "transform: translateX(0.5rem)",
+  "translate-x-4": "transform: translateX(1rem)",
+  "-translate-x-1": "transform: translateX(-0.25rem)",
+  "-translate-x-2": "transform: translateX(-0.5rem)",
+  "-translate-x-4": "transform: translateX(-1rem)",
+  // Scale
+  "scale-0": "transform: scale(0)",
+  "scale-50": "transform: scale(0.5)",
+  "scale-75": "transform: scale(0.75)",
+  "scale-90": "transform: scale(0.9)",
+  "scale-95": "transform: scale(0.95)",
+  "scale-100": "transform: scale(1)",
+  "scale-105": "transform: scale(1.05)",
+  "scale-110": "transform: scale(1.1)",
+  "scale-125": "transform: scale(1.25)",
+  "scale-150": "transform: scale(1.5)",
+  // Rotate
+  "rotate-0": "transform: rotate(0deg)",
+  "rotate-1": "transform: rotate(1deg)",
+  "rotate-2": "transform: rotate(2deg)",
+  "rotate-3": "transform: rotate(3deg)",
+  "rotate-6": "transform: rotate(6deg)",
+  "rotate-12": "transform: rotate(12deg)",
+  "rotate-45": "transform: rotate(45deg)",
+  "rotate-90": "transform: rotate(90deg)",
+  "rotate-180": "transform: rotate(180deg)",
+  "-rotate-1": "transform: rotate(-1deg)",
+  "-rotate-2": "transform: rotate(-2deg)",
+  "-rotate-6": "transform: rotate(-6deg)",
+  "-rotate-12": "transform: rotate(-12deg)",
+  "-rotate-45": "transform: rotate(-45deg)",
+  "-rotate-90": "transform: rotate(-90deg)",
+  // Blur
+  "blur-none": "filter: blur(0)",
+  "blur-sm": "filter: blur(4px)",
+  blur: "filter: blur(8px)",
+  "blur-md": "filter: blur(12px)",
+  "blur-lg": "filter: blur(16px)",
+  "blur-xl": "filter: blur(24px)",
+  "blur-2xl": "filter: blur(40px)",
+  "blur-3xl": "filter: blur(64px)"
+};
+function classesToCss(classes) {
+  const parts = classes.split(/\s+/).filter(Boolean);
+  const transforms = [];
+  const others = [];
+  for (const cls of parts) {
+    const css = TW_TO_CSS[cls];
+    if (!css) continue;
+    if (css.startsWith("transform:")) {
+      transforms.push(css.replace("transform: ", ""));
+    } else {
+      others.push(css);
+    }
+  }
+  const result = [...others];
+  if (transforms.length > 0) {
+    result.push(`transform: ${transforms.join(" ")}`);
+  }
+  return result.join("; ");
+}
+var _animCounter = 0;
+function genAnimId(name) {
+  if (name) return `tw-${name.replace(/[^a-zA-Z0-9]/g, "-")}`;
+  return `tw-anim-${++_animCounter}`;
+}
+var _animRegistry = /* @__PURE__ */ new Map();
+function getAnimationRegistry() {
+  return _animRegistry;
+}
+function compileAnimation(opts) {
+  const {
+    from,
+    to,
+    duration = 300,
+    easing = "ease-out",
+    delay = 0,
+    fill = "both",
+    iterations = 1,
+    direction = "normal",
+    name
+  } = opts;
+  const animId = genAnimId(
+    name != null ? name : `${from.replace(/\s+/g, "-")}-${to.replace(/\s+/g, "-")}`.slice(0, 30)
+  );
+  if (_animRegistry.has(animId)) {
+    return _animRegistry.get(animId);
+  }
+  const fromCss = classesToCss(from);
+  const toCss = classesToCss(to);
+  const keyframesCss = [
+    `@keyframes ${animId} {`,
+    fromCss ? `  from { ${fromCss} }` : `  from {}`,
+    toCss ? `  to   { ${toCss} }` : `  to {}`,
+    `}`
+  ].join("\n");
+  const iterStr = iterations === "infinite" ? "infinite" : String(iterations);
+  const animationCss = [
+    `animation-name: ${animId}`,
+    `animation-duration: ${duration}ms`,
+    `animation-timing-function: ${easing}`,
+    `animation-delay: ${delay}ms`,
+    `animation-fill-mode: ${fill}`,
+    `animation-iteration-count: ${iterStr}`,
+    `animation-direction: ${direction}`
+  ].join("; ");
+  const className = animId;
+  const compiled = { className, keyframesCss, animationCss };
+  _animRegistry.set(animId, compiled);
+  return compiled;
+}
+function animate(opts) {
+  const compiled = compileAnimation(opts);
+  if (typeof document !== "undefined") {
+    const styleId = `__tw_anim_${compiled.className}`;
+    if (!document.getElementById(styleId)) {
+      const style = document.createElement("style");
+      style.id = styleId;
+      style.textContent = `${compiled.keyframesCss}
+.${compiled.className}{${compiled.animationCss}}`;
+      document.head.appendChild(style);
+    }
+  }
+  return compiled.className;
+}
+function keyframes(name, stops) {
+  const animId = genAnimId(name);
+  if (_animRegistry.has(animId)) {
+    return animId;
+  }
+  const stopLines = Object.entries(stops).map(([stop, classes]) => {
+    const css = classesToCss(classes);
+    return `  ${stop} { ${css} }`;
+  }).join("\n");
+  const keyframesCss = `@keyframes ${animId} {
+${stopLines}
+}`;
+  if (typeof document !== "undefined") {
+    const styleId = `__tw_kf_${animId}`;
+    if (!document.getElementById(styleId)) {
+      const style = document.createElement("style");
+      style.id = styleId;
+      style.textContent = keyframesCss;
+      document.head.appendChild(style);
+    }
+  }
+  _animRegistry.set(animId, {
+    className: animId,
+    keyframesCss,
+    animationCss: `animation-name: ${animId}`
+  });
+  return animId;
+}
+var animations = {
+  fadeIn: animate({ from: "opacity-0", to: "opacity-100", duration: 200 }),
+  fadeOut: animate({ from: "opacity-100", to: "opacity-0", duration: 200 }),
+  slideUp: animate({
+    from: "opacity-0 translate-y-4",
+    to: "opacity-100 translate-y-0",
+    duration: 300
+  }),
+  slideDown: animate({
+    from: "opacity-0 -translate-y-4",
+    to: "opacity-100 translate-y-0",
+    duration: 300
+  }),
+  slideLeft: animate({
+    from: "opacity-0 translate-x-4",
+    to: "opacity-100 translate-x-0",
+    duration: 300
+  }),
+  slideRight: animate({
+    from: "opacity-0 -translate-x-4",
+    to: "opacity-100 translate-x-0",
+    duration: 300
+  }),
+  scaleIn: animate({
+    from: "opacity-0 scale-95",
+    to: "opacity-100 scale-100",
+    duration: 200,
+    easing: "cubic-bezier(0.16,1,0.3,1)"
+  }),
+  scaleOut: animate({ from: "opacity-100 scale-100", to: "opacity-0 scale-95", duration: 150 }),
+  blurIn: animate({ from: "opacity-0 blur-sm", to: "opacity-100 blur-none", duration: 300 }),
+  bounceIn: animate({
+    from: "opacity-0 scale-50",
+    to: "opacity-100 scale-100",
+    duration: 400,
+    easing: "cubic-bezier(0.34,1.56,0.64,1)"
+  }),
+  spinIn: animate({
+    from: "opacity-0 rotate-180 scale-50",
+    to: "opacity-100 rotate-0 scale-100",
+    duration: 400,
+    easing: "cubic-bezier(0.16,1,0.3,1)"
+  })
+};
+function extractAnimationCss() {
+  const lines = [];
+  for (const [, compiled] of _animRegistry) {
+    lines.push(compiled.keyframesCss);
+    lines.push(`.${compiled.className} { ${compiled.animationCss} }`);
+  }
+  return lines.join("\n\n");
+}
+export {
+  animate,
+  animations,
+  compileAnimation,
+  extractAnimationCss,
+  getAnimationRegistry,
+  keyframes
+};

package/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "@tailwind-styled/animate",
+  "version": "2.0.0",
+  "description": "Compile-time animation DSL for tailwind-styled-v4 — zero-runtime @keyframes generation",
+  "license": "MIT",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types":   "./dist/index.d.ts",
+      "import":  "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "files": ["dist"],
+  "sideEffects": false,
+  "scripts": {
+    "build": "tsup src/index.ts --format cjs,esm --dts --out-dir dist --clean",
+    "dev":   "tsup src/index.ts --format cjs,esm --dts --out-dir dist --watch"
+  },
+  "devDependencies": {
+    "tsup": "^8",
+    "typescript": "^5"
+  }
+}