@idealyst/animate 1.2.55 → 1.2.57

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@idealyst/animate",
-  "version": "1.2.55",
+  "version": "1.2.57",
   "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.55",
+    "@idealyst/theme": "^1.2.57",
     "react": ">=16.8.0",
     "react-native": ">=0.60.0",
     "react-native-reanimated": ">=3.0.0",
@@ -48,7 +48,7 @@
     }
   },
   "devDependencies": {
-    "@idealyst/theme": "^1.2.55",
+    "@idealyst/theme": "^1.2.57",
     "@types/react": "^19.1.0",
     "react": "^19.1.0",
     "react-native": "^0.80.1",

package/src/index.native.ts

@@ -6,18 +6,21 @@
  * that work on both web and native platforms.
  *
  * On native, animations use Reanimated for UI thread performance.
+ * Use `withAnimated` to wrap components for use with animated styles.
  *
  * @example
  * ```tsx
- * import Animated from 'react-native-reanimated';
- * import { useAnimatedStyle, usePresence, useGradientBorder } from '@idealyst/animate';
+ * import { View } from '@idealyst/components';
+ * import { withAnimated, useAnimatedStyle, usePresence, useGradientBorder } from '@idealyst/animate';
+ *
+ * const AnimatedView = withAnimated(View);
  *
  * // State-driven animations
  * const style = useAnimatedStyle({
  *   opacity: isVisible ? 1 : 0,
  * }, { duration: 'normal', easing: 'easeOut' });
  *
- * return <Animated.View style={style}>Content</Animated.View>;
+ * return <AnimatedView style={style}>Content</AnimatedView>;
  *
  * // Mount/unmount animations
  * const { isPresent, style } = usePresence(isOpen, {
@@ -62,5 +65,8 @@ export { useAnimatedValue } from './useAnimatedValue.native';
 export { usePresence } from './usePresence.native';
 export { useGradientBorder } from './useGradientBorder.native';
 
+// HOC for wrapping components to work with Reanimated
+export { withAnimated } from './withAnimated.native';
+
 // Re-export animation tokens for convenience
 export { durations, easings, presets } from '@idealyst/theme/animation';

package/src/index.ts

@@ -60,5 +60,8 @@ export { useAnimatedValue } from './useAnimatedValue';
 export { usePresence } from './usePresence';
 export { useGradientBorder, createGradientBorderStyle } from './useGradientBorder';
 
+// HOC for wrapping components (no-op on web, CSS handles animations)
+export { withAnimated } from './withAnimated';
+
 // Re-export animation tokens for convenience
 export { durations, easings, presets } from '@idealyst/theme/animation';

package/src/withAnimated.native.ts

@@ -0,0 +1,30 @@
+import type { ComponentType } from 'react';
+import Animated from 'react-native-reanimated';
+
+/**
+ * Native implementation of withAnimated - wraps a component to work with Reanimated.
+ *
+ * On native, components must be wrapped with Animated.createAnimatedComponent
+ * to receive animated styles from useAnimatedStyle, usePresence, etc.
+ *
+ * @example
+ * ```tsx
+ * import { View } from '@idealyst/components';
+ * import { withAnimated, useAnimatedStyle } from '@idealyst/animate';
+ *
+ * const AnimatedView = withAnimated(View);
+ *
+ * function MyComponent() {
+ *   const style = useAnimatedStyle(
+ *     { opacity: isVisible ? 1 : 0 },
+ *     { duration: 'normal' }
+ *   );
+ *   return <AnimatedView style={style}>Content</AnimatedView>;
+ * }
+ * ```
+ */
+export function withAnimated<T extends ComponentType<any>>(
+  component: T
+): ReturnType<typeof Animated.createAnimatedComponent<T>> {
+  return Animated.createAnimatedComponent(component);
+}

package/src/withAnimated.ts

@@ -0,0 +1,27 @@
+import type { ComponentType } from 'react';
+
+/**
+ * Web implementation of withAnimated - a no-op that returns the component as-is.
+ *
+ * On web, CSS transitions handle animations automatically on regular elements,
+ * so no HOC wrapping is needed.
+ *
+ * @example
+ * ```tsx
+ * import { View } from '@idealyst/components';
+ * import { withAnimated, useAnimatedStyle } from '@idealyst/animate';
+ *
+ * const AnimatedView = withAnimated(View);
+ *
+ * function MyComponent() {
+ *   const style = useAnimatedStyle(
+ *     { opacity: isVisible ? 1 : 0 },
+ *     { duration: 'normal' }
+ *   );
+ *   return <AnimatedView style={style}>Content</AnimatedView>;
+ * }
+ * ```
+ */
+export function withAnimated<T extends ComponentType<any>>(component: T): T {
+  return component;
+}