@umituz/react-native-design-system 1.4.0 → 1.4.1

package/src/presentation/tokens/AppDesignTokens.ts

@@ -31,12 +31,14 @@ export {
   BASE_TOKENS,
   spacing,
   typography,
+  animations,
   borders,
   iconSizes,
   opacity,
   avatarSizes,
   type Spacing,
   type Typography,
+  type Animations,
   type Borders,
   type IconSizes,
   type Opacity,

package/src/presentation/tokens/commonStyles.ts

@@ -96,7 +96,7 @@ export const useCommonStyles = () => {
 
     /**
      * Centered container - both horizontal and vertical
-     * Perfect for empty states, splash screens
+     * Perfect for empty states, loading screens, splash screens
      */
     centerContainer: {
       flex: 1,

package/src/presentation/tokens/core/BaseTokens.ts

@@ -219,6 +219,26 @@ export const typography = {
   } as TextStyle,
 } as const;
 
+// =============================================================================
+// ANIMATION TOKENS
+// =============================================================================
+
+export const animations = {
+  // Duration scale (milliseconds)
+  fastest: 150,
+  fast: 150,
+  normal: 300,
+  slow: 500,
+  slower: 750,
+  slowest: 1000,
+
+  // Easing functions
+  easeInOut: 'ease-in-out' as const,
+  easeIn: 'ease-in' as const,
+  easeOut: 'ease-out' as const,
+  linear: 'linear' as const,
+} as const;
+
 // =============================================================================
 // OPACITY TOKENS
 // =============================================================================
@@ -351,6 +371,7 @@ export const avatarSizes = {
 export const BASE_TOKENS = {
   spacing,
   typography,
+  animations,
   opacity,
   borders,
   sizes,
@@ -364,6 +385,7 @@ export const BASE_TOKENS = {
 
 export type Spacing = typeof spacing;
 export type Typography = typeof typography;
+export type Animations = typeof animations;
 export type Opacity = typeof opacity;
 export type Borders = typeof borders;
 export type Sizes = typeof sizes;

package/src/presentation/tokens/core/TokenFactory.ts

@@ -18,12 +18,13 @@ import { getColorPalette, withAlpha, type ThemeMode, type ColorPalette } from '.
 
 /**
  * Complete design tokens shape
- * Combines static tokens (spacing, typography, borders) + dynamic colors
+ * Combines static tokens (spacing, typography, animations, borders) + dynamic colors
  */
 export type DesignTokens = {
   colors: ColorPalette;
   spacing: typeof BASE_TOKENS.spacing;
   typography: typeof BASE_TOKENS.typography;
+  animations: typeof BASE_TOKENS.animations;
   iconSizes: typeof BASE_TOKENS.iconSizes;
   opacity: typeof BASE_TOKENS.opacity;
   avatarSizes: typeof BASE_TOKENS.avatarSizes;
@@ -66,6 +67,7 @@ export const createDesignTokens = (mode: ThemeMode): DesignTokens => {
     // ✅ STATIC: These don't change with theme
     spacing: BASE_TOKENS.spacing,
     typography: BASE_TOKENS.typography,
+    animations: BASE_TOKENS.animations,
     iconSizes: BASE_TOKENS.iconSizes,
     opacity: BASE_TOKENS.opacity,
     avatarSizes: BASE_TOKENS.avatarSizes,
@@ -105,7 +107,7 @@ export const createDesignTokens = (mode: ThemeMode): DesignTokens => {
 export const STATIC_DESIGN_TOKENS = createDesignTokens('light');
 
 /**
- * STATIC TOKENS (spacing, typography, borders)
+ * STATIC TOKENS (spacing, typography, animations, borders)
  * These DON'T change with theme - safe to use anywhere
  */
 export const STATIC_TOKENS = BASE_TOKENS;