tailwind-styled-v4 1.0.1 → 4.0.0

package/dist/animate.cjs

@@ -0,0 +1,252 @@
+'use strict';
+
+/* tailwind-styled-v4 v4 | MIT | https://github.com/dictionar32/tailwind-styled-v4 */
+
+// ../animate/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");
+}
+
+exports.animate = animate;
+exports.animations = animations;
+exports.compileAnimation = compileAnimation;
+exports.extractAnimationCss = extractAnimationCss;
+exports.getAnimationRegistry = getAnimationRegistry;
+exports.keyframes = keyframes;
+//# sourceMappingURL=animate.cjs.map
+//# sourceMappingURL=animate.cjs.map

package/dist/animate.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../animate/src/index.ts"],"names":[],"mappings":"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","file":"animate.cjs","sourcesContent":["/**\n * tailwind-styled-v4 — Animation DSL\n *\n * Compile-time animation system. Define animations dengan Tailwind class,\n * compiler generate @keyframes — nol runtime, nol JS overhead.\n *\n * Usage:\n *\n *   // Cara 1: .animate() chaining pada tw component\n *   const FadeIn = tw.div.animate({\n *     from: \"opacity-0 translate-y-2\",\n *     to:   \"opacity-100 translate-y-0\",\n *     duration: 300,\n *     easing: \"ease-out\"\n *   })\n *\n *   // Cara 2: standalone animate() utility\n *   const fadeIn = animate({\n *     from: \"opacity-0 scale-95\",\n *     to:   \"opacity-100 scale-100\",\n *     duration: 200,\n *   })\n *   const Box = tw.div`${fadeIn}`\n *\n *   // Cara 3: preset animations\n *   const Card = tw.div`${animations.fadeIn} ${animations.slideUp}`\n *\n *   // Cara 4: tw.keyframes() custom\n *   const spin = tw.keyframes(\"spin\", {\n *     \"0%\":   \"rotate-0\",\n *     \"100%\": \"rotate-180\",\n *   })\n */\n\n// ─────────────────────────────────────────────────────────────────────────────\n// Types\n// ─────────────────────────────────────────────────────────────────────────────\n\nexport interface AnimateOptions {\n  /** Tailwind classes for animation start state */\n  from: string\n  /** Tailwind classes for animation end state */\n  to: string\n  /** Duration in ms. Default: 300 */\n  duration?: number\n  /** CSS easing. Default: \"ease-out\" */\n  easing?: string\n  /** Delay in ms. Default: 0 */\n  delay?: number\n  /** Fill mode. Default: \"both\" */\n  fill?: \"none\" | \"forwards\" | \"backwards\" | \"both\"\n  /** Iteration count. Default: 1 */\n  iterations?: number | \"infinite\"\n  /** Direction. Default: \"normal\" */\n  direction?: \"normal\" | \"reverse\" | \"alternate\" | \"alternate-reverse\"\n  /** Animation name override (auto-generated from from+to if not set) */\n  name?: string\n}\n\nexport interface KeyframesDefinition {\n  [stop: string]: string // \"0%\": \"opacity-0 translate-y-2\"\n}\n\nexport interface CompiledAnimation {\n  /** CSS animation class name to apply */\n  className: string\n  /** @keyframes CSS to inject */\n  keyframesCss: string\n  /** animation CSS shorthand */\n  animationCss: string\n}\n\n// ─────────────────────────────────────────────────────────────────────────────\n// Tailwind class → CSS property mapping\n// (for compile-time keyframe generation)\n// ─────────────────────────────────────────────────────────────────────────────\n\nconst TW_TO_CSS: Record<string, string> = {\n  // Opacity\n  \"opacity-0\": \"opacity: 0\",\n  \"opacity-5\": \"opacity: 0.05\",\n  \"opacity-10\": \"opacity: 0.1\",\n  \"opacity-20\": \"opacity: 0.2\",\n  \"opacity-25\": \"opacity: 0.25\",\n  \"opacity-30\": \"opacity: 0.3\",\n  \"opacity-40\": \"opacity: 0.4\",\n  \"opacity-50\": \"opacity: 0.5\",\n  \"opacity-60\": \"opacity: 0.6\",\n  \"opacity-70\": \"opacity: 0.7\",\n  \"opacity-75\": \"opacity: 0.75\",\n  \"opacity-80\": \"opacity: 0.8\",\n  \"opacity-90\": \"opacity: 0.9\",\n  \"opacity-95\": \"opacity: 0.95\",\n  \"opacity-100\": \"opacity: 1\",\n\n  // Translate Y\n  \"translate-y-0\": \"transform: translateY(0px)\",\n  \"translate-y-0.5\": \"transform: translateY(0.125rem)\",\n  \"translate-y-1\": \"transform: translateY(0.25rem)\",\n  \"translate-y-2\": \"transform: translateY(0.5rem)\",\n  \"translate-y-3\": \"transform: translateY(0.75rem)\",\n  \"translate-y-4\": \"transform: translateY(1rem)\",\n  \"translate-y-6\": \"transform: translateY(1.5rem)\",\n  \"translate-y-8\": \"transform: translateY(2rem)\",\n  \"-translate-y-1\": \"transform: translateY(-0.25rem)\",\n  \"-translate-y-2\": \"transform: translateY(-0.5rem)\",\n  \"-translate-y-4\": \"transform: translateY(-1rem)\",\n  \"-translate-y-8\": \"transform: translateY(-2rem)\",\n\n  // Translate X\n  \"translate-x-0\": \"transform: translateX(0px)\",\n  \"translate-x-1\": \"transform: translateX(0.25rem)\",\n  \"translate-x-2\": \"transform: translateX(0.5rem)\",\n  \"translate-x-4\": \"transform: translateX(1rem)\",\n  \"-translate-x-1\": \"transform: translateX(-0.25rem)\",\n  \"-translate-x-2\": \"transform: translateX(-0.5rem)\",\n  \"-translate-x-4\": \"transform: translateX(-1rem)\",\n\n  // Scale\n  \"scale-0\": \"transform: scale(0)\",\n  \"scale-50\": \"transform: scale(0.5)\",\n  \"scale-75\": \"transform: scale(0.75)\",\n  \"scale-90\": \"transform: scale(0.9)\",\n  \"scale-95\": \"transform: scale(0.95)\",\n  \"scale-100\": \"transform: scale(1)\",\n  \"scale-105\": \"transform: scale(1.05)\",\n  \"scale-110\": \"transform: scale(1.1)\",\n  \"scale-125\": \"transform: scale(1.25)\",\n  \"scale-150\": \"transform: scale(1.5)\",\n\n  // Rotate\n  \"rotate-0\": \"transform: rotate(0deg)\",\n  \"rotate-1\": \"transform: rotate(1deg)\",\n  \"rotate-2\": \"transform: rotate(2deg)\",\n  \"rotate-3\": \"transform: rotate(3deg)\",\n  \"rotate-6\": \"transform: rotate(6deg)\",\n  \"rotate-12\": \"transform: rotate(12deg)\",\n  \"rotate-45\": \"transform: rotate(45deg)\",\n  \"rotate-90\": \"transform: rotate(90deg)\",\n  \"rotate-180\": \"transform: rotate(180deg)\",\n  \"-rotate-1\": \"transform: rotate(-1deg)\",\n  \"-rotate-2\": \"transform: rotate(-2deg)\",\n  \"-rotate-6\": \"transform: rotate(-6deg)\",\n  \"-rotate-12\": \"transform: rotate(-12deg)\",\n  \"-rotate-45\": \"transform: rotate(-45deg)\",\n  \"-rotate-90\": \"transform: rotate(-90deg)\",\n\n  // Blur\n  \"blur-none\": \"filter: blur(0)\",\n  \"blur-sm\": \"filter: blur(4px)\",\n  blur: \"filter: blur(8px)\",\n  \"blur-md\": \"filter: blur(12px)\",\n  \"blur-lg\": \"filter: blur(16px)\",\n  \"blur-xl\": \"filter: blur(24px)\",\n  \"blur-2xl\": \"filter: blur(40px)\",\n  \"blur-3xl\": \"filter: blur(64px)\",\n}\n\n// Multi-transform classes need merging\nfunction classesToCss(classes: string): string {\n  const parts = classes.split(/\\s+/).filter(Boolean)\n  const transforms: string[] = []\n  const others: string[] = []\n\n  for (const cls of parts) {\n    const css = TW_TO_CSS[cls]\n    if (!css) continue\n\n    if (css.startsWith(\"transform:\")) {\n      transforms.push(css.replace(\"transform: \", \"\"))\n    } else {\n      others.push(css)\n    }\n  }\n\n  const result = [...others]\n  if (transforms.length > 0) {\n    result.push(`transform: ${transforms.join(\" \")}`)\n  }\n\n  return result.join(\"; \")\n}\n\n// ─────────────────────────────────────────────────────────────────────────────\n// Animation ID generator\n// ─────────────────────────────────────────────────────────────────────────────\n\nlet _animCounter = 0\nfunction genAnimId(name?: string): string {\n  if (name) return `tw-${name.replace(/[^a-zA-Z0-9]/g, \"-\")}`\n  return `tw-anim-${++_animCounter}`\n}\n\n// Global registry of generated animations (for CSS extraction)\nconst _animRegistry = new Map<string, CompiledAnimation>()\n\nexport function getAnimationRegistry(): Map<string, CompiledAnimation> {\n  return _animRegistry\n}\n\n// ─────────────────────────────────────────────────────────────────────────────\n// Core: compile animation options → CSS\n// ─────────────────────────────────────────────────────────────────────────────\n\n/**\n * Compile AnimateOptions into CSS animation + @keyframes.\n *\n * Called at build time by the compiler, or at runtime in dev mode.\n */\nexport function compileAnimation(opts: AnimateOptions): CompiledAnimation {\n  const {\n    from,\n    to,\n    duration = 300,\n    easing = \"ease-out\",\n    delay = 0,\n    fill = \"both\",\n    iterations = 1,\n    direction = \"normal\",\n    name,\n  } = opts\n\n  const animId = genAnimId(\n    name ?? `${from.replace(/\\s+/g, \"-\")}-${to.replace(/\\s+/g, \"-\")}`.slice(0, 30)\n  )\n\n  // Already compiled — return cached\n  if (_animRegistry.has(animId)) {\n    return _animRegistry.get(animId)!\n  }\n\n  const fromCss = classesToCss(from)\n  const toCss = classesToCss(to)\n\n  const keyframesCss = [\n    `@keyframes ${animId} {`,\n    fromCss ? `  from { ${fromCss} }` : `  from {}`,\n    toCss ? `  to   { ${toCss} }` : `  to {}`,\n    `}`,\n  ].join(\"\\n\")\n\n  const iterStr = iterations === \"infinite\" ? \"infinite\" : String(iterations)\n  const animationCss = [\n    `animation-name: ${animId}`,\n    `animation-duration: ${duration}ms`,\n    `animation-timing-function: ${easing}`,\n    `animation-delay: ${delay}ms`,\n    `animation-fill-mode: ${fill}`,\n    `animation-iteration-count: ${iterStr}`,\n    `animation-direction: ${direction}`,\n  ].join(\"; \")\n\n  const className = animId\n\n  const compiled: CompiledAnimation = { className, keyframesCss, animationCss }\n  _animRegistry.set(animId, compiled)\n\n  return compiled\n}\n\n// ─────────────────────────────────────────────────────────────────────────────\n// Public API: animate()\n// ─────────────────────────────────────────────────────────────────────────────\n\n/**\n * Generate an animation class string to use in tw template literals.\n *\n * @example\n * const fadeIn = animate({ from: \"opacity-0\", to: \"opacity-100\", duration: 200 })\n * const Box = tw.div`${fadeIn} p-4 bg-white`\n */\nexport function animate(opts: AnimateOptions): string {\n  const compiled = compileAnimation(opts)\n\n  // In browser: inject keyframes into <style> if not already present\n  if (typeof document !== \"undefined\") {\n    const styleId = `__tw_anim_${compiled.className}`\n    if (!document.getElementById(styleId)) {\n      const style = document.createElement(\"style\")\n      style.id = styleId\n      style.textContent = `${compiled.keyframesCss}\\n.${compiled.className}{${compiled.animationCss}}`\n      document.head.appendChild(style)\n    }\n  }\n\n  return compiled.className\n}\n\n// ─────────────────────────────────────────────────────────────────────────────\n// tw.keyframes() — custom multi-stop keyframes\n// ─────────────────────────────────────────────────────────────────────────────\n\n/**\n * Define a custom keyframe animation with multiple stops.\n *\n * @example\n * const pulse = tw.keyframes(\"pulse\", {\n *   \"0%, 100%\": \"opacity-100 scale-100\",\n *   \"50%\":      \"opacity-50 scale-95\",\n * })\n * const Dot = tw.div`${pulse} w-4 h-4 rounded-full bg-blue-500`\n */\nexport function keyframes(name: string, stops: KeyframesDefinition): string {\n  const animId = genAnimId(name)\n\n  if (_animRegistry.has(animId)) {\n    return animId\n  }\n\n  const stopLines = Object.entries(stops)\n    .map(([stop, classes]) => {\n      const css = classesToCss(classes)\n      return `  ${stop} { ${css} }`\n    })\n    .join(\"\\n\")\n\n  const keyframesCss = `@keyframes ${animId} {\\n${stopLines}\\n}`\n\n  // Inject in browser\n  if (typeof document !== \"undefined\") {\n    const styleId = `__tw_kf_${animId}`\n    if (!document.getElementById(styleId)) {\n      const style = document.createElement(\"style\")\n      style.id = styleId\n      style.textContent = keyframesCss\n      document.head.appendChild(style)\n    }\n  }\n\n  _animRegistry.set(animId, {\n    className: animId,\n    keyframesCss,\n    animationCss: `animation-name: ${animId}`,\n  })\n\n  return animId\n}\n\n// ─────────────────────────────────────────────────────────────────────────────\n// Preset animations — ready to use\n// ─────────────────────────────────────────────────────────────────────────────\n\n/**\n * Collection of ready-to-use animation class strings.\n *\n * @example\n * const Card = tw.div`${animations.fadeIn} p-4 bg-white`\n * const Modal = tw.div`${animations.scaleIn} fixed inset-0`\n */\nexport const animations = {\n  fadeIn: animate({ from: \"opacity-0\", to: \"opacity-100\", duration: 200 }),\n  fadeOut: animate({ from: \"opacity-100\", to: \"opacity-0\", duration: 200 }),\n  slideUp: animate({\n    from: \"opacity-0 translate-y-4\",\n    to: \"opacity-100 translate-y-0\",\n    duration: 300,\n  }),\n  slideDown: animate({\n    from: \"opacity-0 -translate-y-4\",\n    to: \"opacity-100 translate-y-0\",\n    duration: 300,\n  }),\n  slideLeft: animate({\n    from: \"opacity-0 translate-x-4\",\n    to: \"opacity-100 translate-x-0\",\n    duration: 300,\n  }),\n  slideRight: animate({\n    from: \"opacity-0 -translate-x-4\",\n    to: \"opacity-100 translate-x-0\",\n    duration: 300,\n  }),\n  scaleIn: animate({\n    from: \"opacity-0 scale-95\",\n    to: \"opacity-100 scale-100\",\n    duration: 200,\n    easing: \"cubic-bezier(0.16,1,0.3,1)\",\n  }),\n  scaleOut: animate({ from: \"opacity-100 scale-100\", to: \"opacity-0 scale-95\", duration: 150 }),\n  blurIn: animate({ from: \"opacity-0 blur-sm\", to: \"opacity-100 blur-none\", duration: 300 }),\n  bounceIn: animate({\n    from: \"opacity-0 scale-50\",\n    to: \"opacity-100 scale-100\",\n    duration: 400,\n    easing: \"cubic-bezier(0.34,1.56,0.64,1)\",\n  }),\n  spinIn: animate({\n    from: \"opacity-0 rotate-180 scale-50\",\n    to: \"opacity-100 rotate-0 scale-100\",\n    duration: 400,\n    easing: \"cubic-bezier(0.16,1,0.3,1)\",\n  }),\n} as const\n\n// ─────────────────────────────────────────────────────────────────────────────\n// Extract all animation CSS (for build-time injection)\n// ─────────────────────────────────────────────────────────────────────────────\n\n/**\n * Get all compiled animation CSS to inject into a stylesheet.\n * Called by the CSS extraction engine at build time.\n */\nexport function extractAnimationCss(): string {\n  const lines: string[] = []\n  for (const [, compiled] of _animRegistry) {\n    lines.push(compiled.keyframesCss)\n    lines.push(`.${compiled.className} { ${compiled.animationCss} }`)\n  }\n  return lines.join(\"\\n\\n\")\n}\n"]}

package/dist/animate.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/animate.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 };