@aziontech/theme 1.6.0 → 1.8.0

package/README.md

@@ -364,7 +364,7 @@ export { tokenRef } from './build/refs.js';
 export { resolveRefsToCssVars } from './build/resolve.js';
 export { createCssVars, cssVarsString, injectCssVars } from './build/css-vars.js';
 export { preset } from './build/preset.js';
-export { tokenUtilities } from './build/tailwind-plugin.js';
+export { tokenUtilities } from './build/tailwind-plugin';
 ```
 
 ## Token Resolution
@@ -425,7 +425,7 @@ packages/theme/
 │       └── build/         # Build utilities
 │           ├── preset.js
 │           ├── css-vars.js
-│           └── tailwind-plugin.js
+│           └── tailwind-plugin
 └── package.json
 ```
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@aziontech/theme",
   "type": "module",
-  "version": "1.6.0",
+  "version": "1.8.0",
   "author": "aziontech",
   "license": "MIT",
   "repository": {
@@ -58,11 +58,12 @@
     "./tokens/semantic/borders": "./tokens.js",
     "./tokens/build/preset": "./src/tokens/build/preset.js",
     "./tokens/build/tailwind-helper": "./src/tokens/build/tailwind-helper.js",
-    "./tokens/build/tailwind-plugin": "./src/tokens/build/tailwind-plugin.js",
+    "./tokens/build/tailwind-plugin": "./src/tokens/build/tailwind-plugin",
     "./tokens/build/css-vars.js": "./src/tokens/build/css-vars.js",
-    "./tailwind/tailwind-theme.js": "./src/tailwind/tailwind-theme.js",
-    "./tailwind/semantic-colors-plugin.js": "./src/tailwind/semantic-colors-plugin.js",
-    "./tailwind/semantic-texts-plugin.js": "./src/tailwind/semantic-texts-plugin.js",
-    "./tailwind/semantic-spacing-plugin.js": "./src/tailwind/semantic-spacing-plugin.js"
+    "./tailwind/tailwind-theme": "./src/tailwind/tailwind-theme.js",
+    "./tailwind/semantic-colors-plugin": "./src/tailwind/semantic-colors-plugin.js",
+    "./tailwind/semantic-texts-plugin": "./src/tailwind/semantic-texts-plugin.js",
+    "./tailwind/semantic-spacing-plugin": "./src/tailwind/semantic-spacing-plugin.js",
+    "./tailwind/semantic-animations-plugin": "./src/tailwind/semantic-animations-plugin.js"
   }
 }

package/src/tailwind/semantic-animations-plugin.js

@@ -0,0 +1,82 @@
+/**
+ * Tailwind plugin to expose semantic animations and keyframes.
+ *
+ * This adds animation utilities and keyframes for common UI animations.
+ *
+ * Usage in tailwind.config.js:
+ * ```javascript
+ * import { theme } from '@aziontech/theme/tailwind/tailwind-theme.js';
+ * import semanticAnimations from '@aziontech/theme/tailwind/semantic-animations-plugin';
+ *
+ * export default {
+ *   theme,
+ *   plugins: [semanticAnimations()],
+ * };
+ * ```
+ */
+
+// Lazy-require to avoid hard dependency for consumers
+const plugin = (() => {
+  try {
+    return require('tailwindcss/plugin');
+  } catch {
+    return (handler) => handler;
+  }
+})();
+
+/**
+ * Generate semantic animation utilities and keyframes
+ * @returns {import('tailwindcss/plugin').Plugin}
+ */
+export const semanticAnimations = () => {
+  return plugin(({ addUtilities, addComponents, theme }) => {
+    // Animation utilities
+    const animations = {
+      '.animate-fade-in': {
+        animation: 'fadeIn 220ms ease-in-out',
+      },
+      '.animate-fade-out': {
+        animation: 'fadeOut 220ms ease-in-out',
+      },
+      '.animate-slide-down': {
+        animation: 'slideDown 220ms ease-in-out',
+      },
+      '.animate-blink': {
+        animation: 'blink 1s step-end infinite',
+      },
+      '.animate-highlight-fade': {
+        animation: 'highlight ease-in forwards',
+      },
+    };
+
+    // Keyframes components
+    const keyframes = {
+      '@keyframes fadeIn': {
+        '0%': { opacity: '0' },
+        '100%': { opacity: '1' },
+      },
+      '@keyframes fadeOut': {
+        '0%': { opacity: '1' },
+        '100%': { opacity: '0' },
+      },
+      '@keyframes slideDown': {
+        '0%': { height: '0' },
+        '100%': { height: 'auto' },
+      },
+      '@keyframes blink': {
+        '0%, 100%': { opacity: '1' },
+        '50%': { opacity: '0' },
+      },
+      '@keyframes highlight': {
+        '0%': { backgroundColor: 'var(--surface-hover)', fontWeight: '500' },
+        '100%': { backgroundColor: 'var(--surface-hover)', fontWeight: '500' },
+      },
+    };
+
+    const variants = ['responsive', 'hover', 'focus', 'active', 'motion-safe', 'motion-reduce'];
+    addUtilities(animations, variants);
+    addComponents(keyframes);
+  });
+};
+
+export default semanticAnimations;

package/src/tailwind/semantic-colors-plugin.js

@@ -6,7 +6,7 @@
  * Usage in tailwind.config.js:
  * ```javascript
  * import { theme } from '@aziontech/theme/tailwind/tailwind-theme.js';
- * import semanticColors from '@aziontech/theme/tailwind/semantic-colors-plugin.js';
+ * import semanticColors from '@aziontech/theme/tailwind/semantic-colors-plugin';
  *
  * export default {
  *   theme,

package/src/tailwind/semantic-spacing-plugin.js

@@ -6,7 +6,7 @@
  * Usage in tailwind.config.js:
  * ```javascript
  * import { theme } from '@aziontech/theme/tailwind/tailwind-theme.js';
- * import semanticSpacing from '@aziontech/theme/tailwind/semantic-spacing-plugin.js';
+ * import semanticSpacing from '@aziontech/theme/tailwind/semantic-spacing-plugin';
  *
  * export default {
  *   theme,

package/src/tailwind/semantic-texts-plugin.js

@@ -6,7 +6,7 @@
  * Usage in tailwind.config.js:
  * ```javascript
  * import { theme } from '@aziontech/theme/tailwind/tailwind-theme.js';
- * import semanticTexts from '@aziontech/theme/tailwind/semantic-texts-plugin.js';
+ * import semanticTexts from '@aziontech/theme/tailwind/semantic-texts-plugin';
  *
  * export default {
  *   theme,