@idealyst/animate 1.2.74 → 1.2.76

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@idealyst/animate",
-  "version": "1.2.74",
+  "version": "1.2.76",
   "description": "Cross-platform animation hooks for React and React Native",
   "readme": "README.md",
   "main": "src/index.ts",
@@ -30,7 +30,7 @@
     "publish:npm": "npm publish"
   },
   "peerDependencies": {
-    "@idealyst/theme": "^1.2.74",
+    "@idealyst/theme": "^1.2.76",
     "react": ">=16.8.0",
     "react-native": ">=0.60.0",
     "react-native-reanimated": ">=3.0.0",
@@ -48,7 +48,7 @@
     }
   },
   "devDependencies": {
-    "@idealyst/theme": "^1.2.74",
+    "@idealyst/theme": "^1.2.76",
     "@types/react": "^19.1.0",
     "react": "^19.1.0",
     "react-native": "^0.80.1",

package/src/types.ts

@@ -59,49 +59,153 @@ export interface TransformObject {
   perspective?: number;
 }
 
-// Animatable properties (subset that can be animated smoothly)
+/**
+ * All animatable style properties.
+ * Includes properties from ViewStyle, TextStyle, and ImageStyle that can be animated.
+ */
 export interface AnimatableProperties {
-  // Opacity
+  // ============================================
+  // OPACITY (GPU accelerated)
+  // ============================================
   opacity?: number;
 
-  // Background
-  backgroundColor?: string;
+  // ============================================
+  // TRANSFORM (GPU accelerated - preferred)
+  // ============================================
+  /**
+   * Transform - preferred for performance (GPU accelerated).
+   * Accepts either the new object syntax or legacy array format.
+   *
+   * @example
+   * // New object syntax (recommended)
+   * transform: { x: 10, y: 20, scale: 1.2, rotate: 45 }
+   *
+   * // Legacy array syntax (still supported)
+   * transform: [{ translateX: 10 }, { translateY: 20 }, { scale: 1.2 }]
+   */
+  transform?: TransformObject | TransformProperty[];
 
-  // Border
+  // ============================================
+  // COLORS
+  // ============================================
+  backgroundColor?: string;
   borderColor?: string;
+  borderTopColor?: string;
+  borderRightColor?: string;
+  borderBottomColor?: string;
+  borderLeftColor?: string;
+  borderStartColor?: string;
+  borderEndColor?: string;
+  color?: string;
+  textDecorationColor?: string;
+  textShadowColor?: string;
+  shadowColor?: string;
+  tintColor?: string;
+  overlayColor?: string;
+
+  // ============================================
+  // BORDER WIDTH
+  // ============================================
   borderWidth?: number;
+  borderTopWidth?: number;
+  borderRightWidth?: number;
+  borderBottomWidth?: number;
+  borderLeftWidth?: number;
+  borderStartWidth?: number;
+  borderEndWidth?: number;
+
+  // ============================================
+  // BORDER RADIUS
+  // ============================================
   borderRadius?: number;
   borderTopLeftRadius?: number;
   borderTopRightRadius?: number;
   borderBottomLeftRadius?: number;
   borderBottomRightRadius?: number;
+  borderTopStartRadius?: number;
+  borderTopEndRadius?: number;
+  borderBottomStartRadius?: number;
+  borderBottomEndRadius?: number;
 
-  // Dimensions (use sparingly - triggers layout)
+  // ============================================
+  // DIMENSIONS
+  // ============================================
   width?: number | string;
   height?: number | string;
-  maxHeight?: number | string;
+  minWidth?: number | string;
   maxWidth?: number | string;
   minHeight?: number | string;
-  minWidth?: number | string;
+  maxHeight?: number | string;
 
-  // Positioning (use sparingly - triggers layout)
+  // ============================================
+  // POSITIONING
+  // ============================================
   top?: number | string;
   right?: number | string;
   bottom?: number | string;
   left?: number | string;
+  start?: number | string;
+  end?: number | string;
 
-  /**
-   * Transform - preferred for performance (GPU accelerated).
-   * Accepts either the new object syntax or legacy array format.
-   *
-   * @example
-   * // New object syntax (recommended)
-   * transform: { x: 10, y: 20, scale: 1.2, rotate: 45 }
-   *
-   * // Legacy array syntax (still supported)
-   * transform: [{ translateX: 10 }, { translateY: 20 }, { scale: 1.2 }]
-   */
-  transform?: TransformObject | TransformProperty[];
+  // ============================================
+  // MARGIN
+  // ============================================
+  margin?: number | string;
+  marginTop?: number | string;
+  marginRight?: number | string;
+  marginBottom?: number | string;
+  marginLeft?: number | string;
+  marginStart?: number | string;
+  marginEnd?: number | string;
+  marginHorizontal?: number | string;
+  marginVertical?: number | string;
+
+  // ============================================
+  // PADDING
+  // ============================================
+  padding?: number | string;
+  paddingTop?: number | string;
+  paddingRight?: number | string;
+  paddingBottom?: number | string;
+  paddingLeft?: number | string;
+  paddingStart?: number | string;
+  paddingEnd?: number | string;
+  paddingHorizontal?: number | string;
+  paddingVertical?: number | string;
+
+  // ============================================
+  // GAP (Flexbox)
+  // ============================================
+  gap?: number | string;
+  rowGap?: number | string;
+  columnGap?: number | string;
+
+  // ============================================
+  // FLEX
+  // ============================================
+  flex?: number;
+  flexGrow?: number;
+  flexShrink?: number;
+  flexBasis?: number | string;
+
+  // ============================================
+  // SHADOW (iOS)
+  // ============================================
+  shadowOpacity?: number;
+  shadowRadius?: number;
+
+  // ============================================
+  // TEXT
+  // ============================================
+  fontSize?: number;
+  letterSpacing?: number;
+  lineHeight?: number;
+  textShadowRadius?: number;
+
+  // ============================================
+  // IMAGE
+  // ============================================
+  resizeMode?: 'cover' | 'contain' | 'stretch' | 'repeat' | 'center';
 }
 
 // Animation configuration