@rainersoft/design-tokens 1.0.2 → 1.0.3

package/formats/tailwind.config.ts

@@ -33,7 +33,7 @@ import { tokens } from '../tokens';
  * @description
  * Objeto de configuração completo do Tailwind CSS que estende o tema padrão
  * com todos os tokens de design do sistema. Inclui cores, tipografia,
- * espaçamento, raios de borda e sombras.
+ * espaçamento, raios de borda, sombras e animações.
  * 
  * @type {Object}
  * @property {Object} theme - Configurações de tema do Tailwind
@@ -47,6 +47,8 @@ import { tokens } from '../tokens';
  * @property {Object} theme.extend.spacing - Espaçamentos dos tokens
  * @property {Object} theme.extend.borderRadius - Raios de borda dos tokens
  * @property {Object} theme.extend.boxShadow - Sombras dos tokens (incluindo efeitos glow)
+ * @property {Object} theme.extend.animation - Animações dos tokens (nome, duração, timing)
+ * @property {Object} theme.extend.keyframes - Keyframes das animações
  * @property {string} darkMode - Modo escuro configurado como 'class'
  * 
  * @constant
@@ -230,6 +232,48 @@ export const tailwindConfig = {
         'glow-purple': '0 0 20px rgba(125, 0, 255, 0.5), 0 0 40px rgba(125, 0, 255, 0.3)',
         'glow-green': '0 0 20px rgba(0, 255, 0, 0.5), 0 0 40px rgba(0, 255, 0, 0.3)',
       },
+      animation: {
+        'accordion-down': 'accordion-down 0.2s ease-out',
+        'accordion-up': 'accordion-up 0.2s ease-out',
+        'slide-in': 'slide-in 0.3s ease-out',
+        'fade-in': 'fade-in 0.5s ease-in',
+      },
+      keyframes: {
+        'accordion-down': {
+          'from': {
+            height: '0',
+          },
+          'to': {
+            height: 'var(--radix-accordion-content-height)',
+          },
+        },
+        'accordion-up': {
+          'from': {
+            height: 'var(--radix-accordion-content-height)',
+          },
+          'to': {
+            height: '0',
+          },
+        },
+        'slide-in': {
+          '0%': {
+            transform: 'translateY(-10px)',
+            opacity: '0',
+          },
+          '100%': {
+            transform: 'translateY(0)',
+            opacity: '1',
+          },
+        },
+        'fade-in': {
+          '0%': {
+            opacity: '0',
+          },
+          '100%': {
+            opacity: '1',
+          },
+        },
+      },
     },
   },
   darkMode: 'class',

package/formats/tokens.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/rainer-design-tokens.json",
   "name": "@rainersoft/design-tokens",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "Universal design tokens export for Rainer Design System",
   "$generated": "This file is auto-generated. Do not edit manually.",
   "$source": "tokens/*.json",
@@ -41,6 +41,6 @@
     "repository": "https://github.com/RainerTeixeira/rainer-design-tokens.git",
     "author": "Rainer Teixeira <suporte@rainersoft.com.br>",
     "license": "MIT",
-    "generatedAt": "2025-11-18T04:09:16.450Z"
+    "generatedAt": "2025-11-18T16:01:24.358Z"
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rainersoft/design-tokens",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "type": "module",
   "description": "Design tokens profissionais seguindo padrões W3C/DTCG, com estrutura modular e suporte a tokens primitivos e semânticos.",
   "author": "Rainer Teixeira <suporte@rainersoft.com.br>",
@@ -56,6 +56,29 @@
     "README.md",
     "LICENSE"
   ],
+  "scripts": {
+    "build": "pnpm run build:formats && tsup",
+    "build:formats": "tsx scripts/build-formats.ts",
+    "build:css": "tsx scripts/build-css.ts",
+    "build:tailwind": "tsx scripts/build-tailwind.ts",
+    "build:tokens-json": "tsx scripts/build-tokens-json.ts",
+    "dev": "tsup --watch",
+    "type-check": "tsc --noEmit",
+    "lint": "pnpm exec eslint .",
+    "test": "echo \"No tests configured\" && exit 0",
+    "test:watch": "jest --watch",
+    "test:coverage": "jest --coverage",
+    "prepare:publish": "node scripts/prepare-publish.js",
+    "setup:auth": "node scripts/setup-npm-auth.js",
+    "prepublishOnly": "pnpm run build:formats",
+    "clean": "node -e \"require('fs').rmSync('dist', {recursive: true, force: true})\"",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "update:dates": "tsx scripts/update-dates.ts",
+    "setup": "pnpm install",
+    "setup:clean": "pnpm run clean:all && pnpm install",
+    "clean:all": "pnpm exec rimraf node_modules pnpm-lock.yaml dist .storybook-build"
+  },
   "peerDependencies": {
     "react": ">=18.0.0"
   },
@@ -91,27 +114,5 @@
   "bugs": {
     "url": "https://github.com/RainerTeixeira/rainer-design-tokens/issues"
   },
-  "homepage": "https://github.com/RainerTeixeira/rainer-design-tokens#readme",
-  "scripts": {
-    "build": "pnpm run build:formats && tsup",
-    "build:formats": "tsx scripts/build-formats.ts",
-    "build:css": "tsx scripts/build-css.ts",
-    "build:tailwind": "tsx scripts/build-tailwind.ts",
-    "build:tokens-json": "tsx scripts/build-tokens-json.ts",
-    "dev": "tsup --watch",
-    "type-check": "tsc --noEmit",
-    "lint": "pnpm exec eslint .",
-    "test": "echo \"No tests configured\" && exit 0",
-    "test:watch": "jest --watch",
-    "test:coverage": "jest --coverage",
-    "prepare:publish": "node scripts/prepare-publish.js",
-    "setup:auth": "node scripts/setup-npm-auth.js",
-    "clean": "node -e \"require('fs').rmSync('dist', {recursive: true, force: true})\"",
-    "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build",
-    "update:dates": "tsx scripts/update-dates.ts",
-    "setup": "pnpm install",
-    "setup:clean": "pnpm run clean:all && pnpm install",
-    "clean:all": "pnpm exec rimraf node_modules pnpm-lock.yaml dist .storybook-build"
-  }
+  "homepage": "https://github.com/RainerTeixeira/rainer-design-tokens#readme"
 }

package/tokens/animations.json

@@ -0,0 +1,59 @@
+{
+  "animations": {
+    "accordion-down": {
+      "name": "accordion-down",
+      "duration": "0.2s",
+      "timingFunction": "ease-out",
+      "keyframes": {
+        "from": {
+          "height": "0"
+        },
+        "to": {
+          "height": "var(--radix-accordion-content-height)"
+        }
+      }
+    },
+    "accordion-up": {
+      "name": "accordion-up",
+      "duration": "0.2s",
+      "timingFunction": "ease-out",
+      "keyframes": {
+        "from": {
+          "height": "var(--radix-accordion-content-height)"
+        },
+        "to": {
+          "height": "0"
+        }
+      }
+    },
+    "slide-in": {
+      "name": "slide-in",
+      "duration": "0.3s",
+      "timingFunction": "ease-out",
+      "keyframes": {
+        "0%": {
+          "transform": "translateY(-10px)",
+          "opacity": "0"
+        },
+        "100%": {
+          "transform": "translateY(0)",
+          "opacity": "1"
+        }
+      }
+    },
+    "fade-in": {
+      "name": "fade-in",
+      "duration": "0.5s",
+      "timingFunction": "ease-in",
+      "keyframes": {
+        "0%": {
+          "opacity": "0"
+        },
+        "100%": {
+          "opacity": "1"
+        }
+      }
+    }
+  }
+}
+

package/tokens/index.ts

@@ -18,6 +18,7 @@ import typography from './typography.json';
 import spacing from './spacing.json';
 import radius from './radius.json';
 import shadows from './shadows.json';
+import animations from './animations.json';
 
 // Utility tokens (Tailwind CSS classes)
 export * from './utilities';
@@ -40,6 +41,7 @@ export * from './accessibility';
  * @property {Object} spacing - Tokens de espaçamento (margens, paddings)
  * @property {Object} radius - Tokens de raio de borda
  * @property {Object} shadows - Tokens de sombras para ambos os temas
+ * @property {Object} animations - Tokens de animações (keyframes e durações)
  * 
  * @constant
  * @readonly
@@ -64,6 +66,7 @@ export const tokens = {
   spacing: spacing.spacing,
   radius: radius.radius,
   shadows: shadows.shadows,
+  animations: animations.animations,
 } as const;
 
 /**
@@ -186,6 +189,27 @@ export const radiusTokens = radius.radius;
  */
 export const shadowTokens = shadows.shadows;
 
+/**
+ * Tokens de animações
+ * 
+ * @description
+ * Exporta todos os tokens de animações, incluindo keyframes, durações
+ * e funções de timing para transições e animações do sistema.
+ * 
+ * @type {Object}
+ * @constant
+ * @readonly
+ * 
+ * @example
+ * ```typescript
+ * import { animationTokens } from 'rainer-design-tokens';
+ * 
+ * const slideIn = animationTokens['slide-in'];
+ * const fadeIn = animationTokens['fade-in'];
+ * ```
+ */
+export const animationTokens = animations.animations;
+
 /**
  * Tipo TypeScript para todos os tokens
  * 
@@ -250,6 +274,15 @@ export type Radius = typeof radius.radius;
  */
 export type Shadows = typeof shadows.shadows;
 
+/**
+ * Tipo TypeScript para tokens de animações
+ * 
+ * @typedef {Object} Animations
+ * @description
+ * Tipo que representa todos os tokens de animações.
+ */
+export type Animations = typeof animations.animations;
+
 /**
  * Exportação padrão dos tokens
  *