@butternutbox/pawprint-native 0.0.1 → 0.1.0

package/.turbo/turbo-build.log

@@ -7,24 +7,24 @@
 CJS Build start
 ESM Build start
 DTS Build start
-CJS dist/ida-narrow-500-normal-C6I2PK4T.woff2              47.41 KB
-CJS dist/ida-narrow-700-normal-UPHPRIN6.woff2              49.90 KB
-CJS dist/ibm-plex-sans-condensed-400-normal-I2XLJNNB.woff2 19.33 KB
-CJS dist/ibm-plex-sans-condensed-500-normal-IEQBNVGX.woff2 19.48 KB
-CJS dist/ibm-plex-sans-condensed-600-normal-UX5ZU5T6.woff2 19.35 KB
-CJS dist/ibm-plex-sans-condensed-700-normal-4PFYFTSO.woff2 18.90 KB
-CJS dist/index.cjs                                         120.33 KB
-CJS dist/index.cjs.map                                     266.09 KB
-CJS ⚡️ Build success in 2528ms
 ESM dist/ida-narrow-500-normal-C6I2PK4T.woff2              47.41 KB
 ESM dist/ida-narrow-700-normal-UPHPRIN6.woff2              49.90 KB
 ESM dist/ibm-plex-sans-condensed-400-normal-I2XLJNNB.woff2 19.33 KB
 ESM dist/ibm-plex-sans-condensed-500-normal-IEQBNVGX.woff2 19.48 KB
 ESM dist/ibm-plex-sans-condensed-600-normal-UX5ZU5T6.woff2 19.35 KB
 ESM dist/ibm-plex-sans-condensed-700-normal-4PFYFTSO.woff2 18.90 KB
-ESM dist/index.js                                          113.16 KB
-ESM dist/index.js.map                                      265.43 KB
-ESM ⚡️ Build success in 2529ms
-DTS ⚡️ Build success in 12741ms
-DTS dist/index.d.cts 31.31 KB
-DTS dist/index.d.ts  31.31 KB
+ESM dist/index.js                                          1.61 MB
+ESM dist/index.js.map                                      2.44 MB
+ESM ⚡️ Build success in 10371ms
+CJS dist/ida-narrow-500-normal-C6I2PK4T.woff2              47.41 KB
+CJS dist/ida-narrow-700-normal-UPHPRIN6.woff2              49.90 KB
+CJS dist/ibm-plex-sans-condensed-400-normal-I2XLJNNB.woff2 19.33 KB
+CJS dist/ibm-plex-sans-condensed-500-normal-IEQBNVGX.woff2 19.48 KB
+CJS dist/ibm-plex-sans-condensed-600-normal-UX5ZU5T6.woff2 19.35 KB
+CJS dist/ibm-plex-sans-condensed-700-normal-4PFYFTSO.woff2 18.90 KB
+CJS dist/index.cjs                                         1.67 MB
+CJS dist/index.cjs.map                                     2.44 MB
+CJS ⚡️ Build success in 10375ms
+DTS ⚡️ Build success in 21699ms
+DTS dist/index.d.cts 76.92 KB
+DTS dist/index.d.ts  76.92 KB

package/CHANGELOG.md

@@ -0,0 +1,16 @@
+# @butternutbox/pawprint-native
+
+## 0.1.0
+
+### Minor Changes
+
+- 44da3ae: creates new components for web and app
+
+### Patch Changes
+
+- 0c6ed0c: regenerates release with missing yarn install immutable tag
+- 8461dee: Updated UI after QA
+- Updated dependencies [0c6ed0c]
+- Updated dependencies [44da3ae]
+- Updated dependencies [8461dee]
+  - @butternutbox/pawprint-tokens@0.1.0

package/COMPONENT_GUIDELINES.md

@@ -485,7 +485,114 @@ import type { PawprintIllustration } from "../Illustration"
 - Import paths are the same: `@butternutbox/pawprint-icons/core` — Metro resolves the `.native.js` build automatically
 - No `fill="currentColor"` — native icons receive `color` as a prop
 
-### **14. Performance Considerations**
+### **14. Animations with Reanimated**
+
+Use `react-native-reanimated` (v4+) for all animations — never React Native's legacy `Animated` API.
+
+**The `Animated` molecule** covers the common case: enter/exit animations driven by conditional rendering.
+
+```tsx
+import { Animated } from "@butternutbox/pawprint-native"
+
+// Enter on mount — Reanimated handles exit automatically on unmount
+{
+  visible && (
+    <Animated variant="fadeUp">
+      <Card />
+    </Animated>
+  )
+}
+
+// Sequenced elements with delay
+{
+  items.map((item, i) => (
+    <Animated key={item.id} variant="fadeUp" delay={i * 0.08}>
+      <Row {...item} />
+    </Animated>
+  ))
+}
+```
+
+Available variants: `fade`, `fadeUp`, `fadeDown`, `scale`, `slideIn`, `slideOut`, `drawerSlide`.
+
+**No `AnimatePresence` needed** — Reanimated intercepts unmounts and runs the `exiting` animation before the component is removed. Conditionally render directly.
+
+**Custom / imperative animations** — use `useSharedValue`, `useAnimatedStyle`, `withTiming`, `withSpring` directly. This is the right pattern when a headless library controls mounting internally (e.g. the Drawer), or when the animation must compose with a gesture in real time.
+
+```tsx
+import Reanimated, {
+  useSharedValue,
+  useAnimatedStyle,
+  withTiming,
+  Easing
+} from "react-native-reanimated"
+
+const opacity = useSharedValue(0)
+const animatedStyle = useAnimatedStyle(() => ({ opacity: opacity.value }))
+
+// Drive the animation imperatively
+opacity.value = withTiming(1, {
+  duration: 200,
+  easing: Easing.out(Easing.ease)
+})
+```
+
+**Stagger without a container** — pass incremental `delay` to `Animated`. For direct `Reanimated.View` usage, use the exported animation preset objects:
+
+```tsx
+import { fadeUpAnimation } from "@butternutbox/pawprint-native"
+
+// Each call to .duration() creates a fresh builder instance — safe to chain
+<Reanimated.View entering={fadeUpAnimation.entering.duration(200).delay(80)}>
+```
+
+**Custom builders** — extend `ComplexAnimationBuilder` and override `build` as a property (arrow function):
+
+```tsx
+import {
+  ComplexAnimationBuilder,
+  BaseAnimationBuilder,
+  withTiming,
+  type EntryExitAnimationFunction
+} from "react-native-reanimated"
+
+class MyEnter extends ComplexAnimationBuilder {
+  static override createInstance<T extends typeof BaseAnimationBuilder>(
+    this: T
+  ): InstanceType<T> {
+    return new (this as unknown as new () => InstanceType<T>)()
+  }
+
+  override build = (): EntryExitAnimationFunction => {
+    const delay = this.getDelay()
+    const duration = this.getDuration()
+    const delayFn = this.getDelayFunction()
+    const callback = this.callbackV
+
+    return () => {
+      "worklet"
+      return {
+        initialValues: { opacity: 0 },
+        animations: { opacity: delayFn(delay, withTiming(1, { duration })) },
+        callback
+      }
+    }
+  }
+}
+```
+
+**Reduced motion** — `useReducedMotion()` from Reanimated returns `true` when the OS accessibility setting is on. Set `duration: 0` to skip animations:
+
+```tsx
+import { useReducedMotion } from "react-native-reanimated"
+
+const reducedMotion = useReducedMotion()
+const duration = reducedMotion ? 0 : 200
+```
+
+The `Animated` molecule handles this automatically.
+
+### **15. Performance Considerations**
 
 ```tsx
 // ✅ GOOD: Stable style references
@@ -513,7 +620,7 @@ const opacity = useRef(new Animated.Value(0)).current
 - Use `React.memo` sparingly — only for expensive renders with stable props
 - Use `Animated` or `Reanimated` for animations, not `setState`
 
-### **15. Error Handling & Validation**
+### **16. Error Handling & Validation**
 
 ```tsx
 export const Icon = React.forwardRef<View, IconProps>(
@@ -541,7 +648,7 @@ export const Icon = React.forwardRef<View, IconProps>(
 )
 ```
 
-### **16. Parity with pawprint-web**
+### **17. Parity with pawprint-web**
 
 Native components should mirror the web API where possible:
 
@@ -557,7 +664,7 @@ Native components should mirror the web API where possible:
 - Web uses `styled()` from `@mui/system` — native uses `styled()` from `@emotion/native`
 - Web has `shouldForwardProp` — native relies on prop name prefixing
 
-### **17. Documentation Standards**
+### **18. Documentation Standards**
 
 **Add JSDoc comments for all exported components:**