@cyberkaidev/ui 0.1.0 → 0.1.2

package/lib/module/components/Button.js

@@ -1,12 +1,13 @@
 "use strict";
 
-import { Platform, TouchableOpacity } from 'react-native';
-import { RippleEffect } from "./RippleEffect.js";
+import { Platform, Pressable, TouchableOpacity } from 'react-native';
+import { useColors } from "../ThemeProvider.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
- * Base pressable. Android gets a touch ripple; every other platform gets
- * opacity feedback. Kept in one file (not `.ios`/`.android`) so consumers'
- * type resolution works without `moduleSuffixes`.
+ * Base pressable. Android gets the platform touch ripple (drawn in the
+ * foreground and clipped to the view's own shape); every other platform gets
+ * opacity feedback. Kept in one file (not `.ios`/`.android`) so consumers' type
+ * resolution works without `moduleSuffixes`.
  */
 export function Button({
   children,
@@ -17,11 +18,11 @@ export function Button({
   style,
   testID,
   hitSlop,
-  rippleColor,
-  rippleContainerBorderRadius
+  rippleColor
 }) {
+  const colors = useColors();
   if (Platform.OS === 'android') {
-    return /*#__PURE__*/_jsx(RippleEffect, {
+    return /*#__PURE__*/_jsx(Pressable, {
       testID: testID,
       style: style,
       disabled: disabled,
@@ -29,8 +30,10 @@ export function Button({
       onPressIn: onPressIn,
       onPressOut: onPressOut,
       hitSlop: hitSlop,
-      rippleColor: rippleColor,
-      rippleContainerBorderRadius: rippleContainerBorderRadius,
+      android_ripple: {
+        color: rippleColor ?? colors.text,
+        foreground: true
+      },
       children: children
     });
   }

package/lib/module/components/Button.js.map

@@ -1 +1 @@
-{"version":3,"names":["Platform","TouchableOpacity","RippleEffect","jsx","_jsx","Button","children","onPress","onPressIn","onPressOut","disabled","style","testID","hitSlop","rippleColor","rippleContainerBorderRadius","OS"],"sourceRoot":"../../../src","sources":["components/Button.tsx"],"mappings":";;AACA,SAASA,QAAQ,EAAEC,gBAAgB,QAAQ,cAAc;AAGzD,SAASC,YAAY,QAAQ,mBAAgB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAiB9C;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,MAAMA,CAAC;EACrBC,QAAQ;EACRC,OAAO;EACPC,SAAS;EACTC,UAAU;EACVC,QAAQ;EACRC,KAAK;EACLC,MAAM;EACNC,OAAO;EACPC,WAAW;EACXC;AACK,CAAC,EAAE;EACR,IAAIf,QAAQ,CAACgB,EAAE,KAAK,SAAS,EAAE;IAC7B,oBACEZ,IAAA,CAACF,YAAY;MACXU,MAAM,EAAEA,MAAO;MACfD,KAAK,EAAEA,KAAM;MACbD,QAAQ,EAAEA,QAAS;MACnBH,OAAO,EAAEA,OAAQ;MACjBC,SAAS,EAAEA,SAAU;MACrBC,UAAU,EAAEA,UAAW;MACvBI,OAAO,EAAEA,OAAQ;MACjBC,WAAW,EAAEA,WAAY;MACzBC,2BAA2B,EAAEA,2BAA4B;MAAAT,QAAA,EAExDA;IAAQ,CACG,CAAC;EAEnB;EAEA,oBACEF,IAAA,CAACH,gBAAgB;IACfW,MAAM,EAAEA,MAAO;IACfD,KAAK,EAAEA,KAAM;IACbD,QAAQ,EAAEA,QAAS;IACnBH,OAAO,EAAEA,OAAQ;IACjBC,SAAS,EAAEA,SAAU;IACrBC,UAAU,EAAEA,UAAW;IACvBI,OAAO,EAAEA,OAAQ;IAAAP,QAAA,EAEhBA;EAAQ,CACO,CAAC;AAEvB","ignoreList":[]}
+{"version":3,"names":["Platform","Pressable","TouchableOpacity","useColors","jsx","_jsx","Button","children","onPress","onPressIn","onPressOut","disabled","style","testID","hitSlop","rippleColor","colors","OS","android_ripple","color","text","foreground"],"sourceRoot":"../../../src","sources":["components/Button.tsx"],"mappings":";;AACA,SAASA,QAAQ,EAAEC,SAAS,EAAEC,gBAAgB,QAAQ,cAAc;AAGpE,SAASC,SAAS,QAAQ,qBAAkB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAe7C;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,MAAMA,CAAC;EACrBC,QAAQ;EACRC,OAAO;EACPC,SAAS;EACTC,UAAU;EACVC,QAAQ;EACRC,KAAK;EACLC,MAAM;EACNC,OAAO;EACPC;AACK,CAAC,EAAE;EACR,MAAMC,MAAM,GAAGb,SAAS,CAAC,CAAC;EAE1B,IAAIH,QAAQ,CAACiB,EAAE,KAAK,SAAS,EAAE;IAC7B,oBACEZ,IAAA,CAACJ,SAAS;MACRY,MAAM,EAAEA,MAAO;MACfD,KAAK,EAAEA,KAAM;MACbD,QAAQ,EAAEA,QAAS;MACnBH,OAAO,EAAEA,OAAQ;MACjBC,SAAS,EAAEA,SAAU;MACrBC,UAAU,EAAEA,UAAW;MACvBI,OAAO,EAAEA,OAAQ;MACjBI,cAAc,EAAE;QACdC,KAAK,EAAEJ,WAAW,IAAIC,MAAM,CAACI,IAAI;QACjCC,UAAU,EAAE;MACd,CAAE;MAAAd,QAAA,EAEDA;IAAQ,CACA,CAAC;EAEhB;EAEA,oBACEF,IAAA,CAACH,gBAAgB;IACfW,MAAM,EAAEA,MAAO;IACfD,KAAK,EAAEA,KAAM;IACbD,QAAQ,EAAEA,QAAS;IACnBH,OAAO,EAAEA,OAAQ;IACjBC,SAAS,EAAEA,SAAU;IACrBC,UAAU,EAAEA,UAAW;IACvBI,OAAO,EAAEA,OAAQ;IAAAP,QAAA,EAEhBA;EAAQ,CACO,CAAC;AAEvB","ignoreList":[]}

package/lib/module/components/Chips.js

@@ -53,15 +53,24 @@ export function Chips({
         disabled,
         prefix,
         scheme = 'surface'
-      }) => /*#__PURE__*/_jsxs(Button, {
+      }) => /*#__PURE__*/_jsx(Button, {
         testID: `chip-${String(key)}`,
         disabled: !isInteractive || disabled,
         style: [styles.button, schemeButton[scheme], disabled ? styles.dimmed : null],
         onPress: () => onPress?.(key),
-        children: [prefix, /*#__PURE__*/_jsx(Text, {
+        children: prefix == null ? /*#__PURE__*/_jsx(Text, {
           color: schemeTextColor[scheme],
           children: label
-        })]
+        }) : /*#__PURE__*/_jsxs(View, {
+          style: styles.row,
+          children: [/*#__PURE__*/_jsx(View, {
+            style: styles.prefix,
+            children: prefix
+          }), /*#__PURE__*/_jsx(Text, {
+            color: schemeTextColor[scheme],
+            children: label
+          })]
+        })
       }, String(key)))
     })
   });
@@ -83,9 +92,15 @@ function makeStyles(t) {
       borderStyle: 'solid',
       flexDirection: 'row',
       alignItems: 'center',
-      gap: t.spaces.horizontal.s,
       overflow: 'hidden'
     },
+    row: {
+      flexDirection: 'row',
+      alignItems: 'center'
+    },
+    prefix: {
+      marginRight: t.spaces.horizontal.s
+    },
     dimmed: {
       opacity: 0.5
     }

package/lib/module/components/Chips.js.map

@@ -1 +1 @@
-{"version":3,"names":["ScrollView","StyleSheet","View","useTheme","useThemedStyles","Text","Button","jsx","_jsx","jsxs","_jsxs","Chips","data","marginB","marginT","onPress","testID","colors","styles","makeStyles","isInteractive","schemeButton","surface","borderColor","border","backgroundColor","on_surface","primary","schemeTextColor","text","style","container","marginTop","marginBottom","children","horizontal","showsHorizontalScrollIndicator","contentContainerStyle","content","map","key","label","disabled","prefix","scheme","String","button","dimmed","color","t","create","width","gap","spaces","l","paddingHorizontal","pageSpacing","m","paddingVertical","vertical","xs","borderRadius","radius_20","borderWidth","borderStyle","flexDirection","alignItems","s","overflow","opacity"],"sourceRoot":"../../../src","sources":["components/Chips.tsx"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["ScrollView","StyleSheet","View","useTheme","useThemedStyles","Text","Button","jsx","_jsx","jsxs","_jsxs","Chips","data","marginB","marginT","onPress","testID","colors","styles","makeStyles","isInteractive","schemeButton","surface","borderColor","border","backgroundColor","on_surface","primary","schemeTextColor","text","style","container","marginTop","marginBottom","children","horizontal","showsHorizontalScrollIndicator","contentContainerStyle","content","map","key","label","disabled","prefix","scheme","String","button","dimmed","color","row","t","create","width","gap","spaces","l","paddingHorizontal","pageSpacing","m","paddingVertical","vertical","xs","borderRadius","radius_20","borderWidth","borderStyle","flexDirection","alignItems","overflow","marginRight","s","opacity"],"sourceRoot":"../../../src","sources":["components/Chips.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/components/RippleEffect.js

@@ -21,6 +21,7 @@ export function RippleEffect({
   rippleSequential = false,
   rippleFades = true,
   disabled = false,
+  style,
   onLayout,
   onPressIn,
   onPressOut,
@@ -74,19 +75,13 @@ export function RippleEffect({
     };
     ripplesRef.current.set(ripple.unique, ripple);
     activeRippleRef.current = ripple.unique;
-    Animated.timing(ripple.scale, {
-      toValue: 1,
-      duration: rippleDuration,
-      easing: Easing.out(Easing.ease),
-      useNativeDriver: true
-    }).start();
-    Animated.timing(ripple.opacity, {
-      toValue: rippleOpacity,
-      duration: Math.min(rippleDuration, PRESS_FADE_IN_DURATION),
-      useNativeDriver: true
-    }).start();
+
+    // The entrance animation is kicked off from `RippleCircle`'s mount effect,
+    // not here: on the New Architecture, starting a native-driven animation on
+    // an `Animated.Value` before its `Animated.View` is mounted leaves the
+    // native driver with no view to attach to, so the ripple never shows.
     setRippleIds(current => current.concat(ripple.unique));
-  }, [layout.width, layout.height, onPressIn, rippleCentered, rippleDuration, rippleOpacity, rippleSequential, rippleSize]);
+  }, [layout.width, layout.height, onPressIn, rippleCentered, rippleSequential, rippleSize]);
   const handlePressOut = React.useCallback(event => {
     onPressOut?.(event);
     const releasedUnique = activeRippleRef.current;
@@ -118,7 +113,10 @@ export function RippleEffect({
     onLayout: handleLayout,
     onPressIn: handlePressIn,
     onPressOut: handlePressOut,
-    children: [children, /*#__PURE__*/_jsx(View, {
+    children: [/*#__PURE__*/_jsx(View, {
+      style: style,
+      children: children
+    }), /*#__PURE__*/_jsx(View, {
       pointerEvents: "none",
       style: [styles.container, {
         borderRadius: rippleContainerBorderRadius
@@ -128,7 +126,9 @@ export function RippleEffect({
         if (!ripple) return null;
         return /*#__PURE__*/_jsx(RippleCircle, {
           ripple: ripple,
-          color: color
+          color: color,
+          duration: rippleDuration,
+          toOpacity: rippleOpacity
         }, id);
       })
     })]
@@ -136,7 +136,9 @@ export function RippleEffect({
 }
 function RippleCircleComponent({
   ripple,
-  color
+  color,
+  duration,
+  toOpacity
 }) {
   const {
     locationX,
@@ -145,6 +147,21 @@ function RippleCircleComponent({
     scale,
     opacity
   } = ripple;
+  React.useEffect(() => {
+    Animated.timing(scale, {
+      toValue: 1,
+      duration,
+      easing: Easing.out(Easing.ease),
+      useNativeDriver: true
+    }).start();
+    Animated.timing(opacity, {
+      toValue: toOpacity,
+      duration: Math.min(duration, PRESS_FADE_IN_DURATION),
+      useNativeDriver: true
+    }).start();
+    // Entrance runs exactly once, when the ripple view mounts.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
   const rippleStyle = {
     top: locationY - CIRCLE_RADIUS,
     [I18nManager.isRTL ? 'right' : 'left']: locationX - CIRCLE_RADIUS,

package/lib/module/components/RippleEffect.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Animated","Easing","I18nManager","Pressable","StyleSheet","View","useColors","jsx","_jsx","jsxs","_jsxs","CIRCLE_RADIUS","RELEASE_GROW_DURATION","RELEASE_FADE_DURATION","PRESS_FADE_IN_DURATION","RippleEffect","children","rippleColor","rippleOpacity","rippleDuration","rippleSize","rippleContainerBorderRadius","rippleCentered","rippleSequential","rippleFades","disabled","onLayout","onPressIn","onPressOut","pressableProps","colors","color","text","layout","setLayout","useState","width","height","rippleIds","setRippleIds","ripplesRef","useRef","Map","activeRippleRef","uniqueRef","handleLayout","event","nativeEvent","handlePressIn","useCallback","current","size","w2","h2","locationX","locationY","offsetX","Math","abs","offsetY","radius","sqrt","ripple","unique","scale","Value","opacity","set","timing","toValue","duration","easing","out","ease","useNativeDriver","start","min","concat","handlePressOut","releasedUnique","get","removeRipple","delete","filter","id","parallel","pointerEvents","style","styles","container","borderRadius","map","RippleCircle","RippleCircleComponent","rippleStyle","top","isRTL","backgroundColor","transform","interpolate","inputRange","outputRange","circle","memo","create","absoluteFillObject","overflow","position"],"sourceRoot":"../../../src","sources":["components/RippleEffect.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SACEC,QAAQ,EACRC,MAAM,EACNC,WAAW,EACXC,SAAS,EACTC,UAAU,EACVC,IAAI,QACC,cAAc;AAOrB,SAASC,SAAS,QAAQ,qBAAkB;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAwB7C,MAAMC,aAAa,GAAG,EAAE;AACxB,MAAMC,qBAAqB,GAAG,GAAG;AACjC,MAAMC,qBAAqB,GAAG,GAAG;AACjC,MAAMC,sBAAsB,GAAG,EAAE;;AAEjC;AACA,OAAO,SAASC,YAAYA,CAAC;EAC3BC,QAAQ;EACRC,WAAW;EACXC,aAAa,GAAG,GAAG;EACnBC,cAAc,GAAG,GAAG;EACpBC,UAAU,GAAG,CAAC;EACdC,2BAA2B,GAAG,CAAC;EAC/BC,cAAc,GAAG,KAAK;EACtBC,gBAAgB,GAAG,KAAK;EACxBC,WAAW,GAAG,IAAI;EAClBC,QAAQ,GAAG,KAAK;EAChBC,QAAQ;EACRC,SAAS;EACTC,UAAU;EACV,GAAGC;AACE,CAAC,EAAE;EACR,MAAMC,MAAM,GAAGxB,SAAS,CAAC,CAAC;EAC1B,MAAMyB,KAAK,GAAGd,WAAW,IAAIa,MAAM,CAACE,IAAI;EAExC,MAAM,CAACC,MAAM,EAAEC,SAAS,CAAC,GAAGnC,KAAK,CAACoC,QAAQ,CAAC;IAAEC,KAAK,EAAE,CAAC;IAAEC,MAAM,EAAE;EAAE,CAAC,CAAC;EACnE,MAAM,CAACC,SAAS,EAAEC,YAAY,CAAC,GAAGxC,KAAK,CAACoC,QAAQ,CAAW,EAAE,CAAC;EAC9D,MAAMK,UAAU,GAAGzC,KAAK,CAAC0C,MAAM,CAAC,IAAIC,GAAG,CAAyB,CAAC,CAAC;EAClE,MAAMC,eAAe,GAAG5C,KAAK,CAAC0C,MAAM,CAAgB,IAAI,CAAC;EACzD,MAAMG,SAAS,GAAG7C,KAAK,CAAC0C,MAAM,CAAC,CAAC,CAAC;EAEjC,MAAMI,YAAY,GAAIC,KAAwB,IAAK;IACjD,MAAM;MAAEV,KAAK;MAAEC;IAAO,CAAC,GAAGS,KAAK,CAACC,WAAW,CAACd,MAAM;IAClDC,SAAS,CAAC;MAAEE,KAAK;MAAEC;IAAO,CAAC,CAAC;IAC5BX,QAAQ,GAAGoB,KAAK,CAAC;EACnB,CAAC;EAED,MAAME,aAAa,GAAGjD,KAAK,CAACkD,WAAW,CACpCH,KAA4B,IAAK;IAChCnB,SAAS,GAAGmB,KAAK,CAAC;IAElB,IAAIvB,gBAAgB,IAAIiB,UAAU,CAACU,OAAO,CAACC,IAAI,EAAE;IAEjD,MAAMC,EAAE,GAAG,GAAG,GAAGnB,MAAM,CAACG,KAAK;IAC7B,MAAMiB,EAAE,GAAG,GAAG,GAAGpB,MAAM,CAACI,MAAM;;IAE9B;IACA,MAAM;MAAEiB,SAAS;MAAEC;IAAU,CAAC,GAC5BjC,cAAc,IAAI,CAACwB,KAAK,EAAEC,WAAW,GACjC;MAAEO,SAAS,EAAEF,EAAE;MAAEG,SAAS,EAAEF;IAAG,CAAC,GAChCP,KAAK,CAACC,WAAW;IAEvB,MAAMS,OAAO,GAAGC,IAAI,CAACC,GAAG,CAACN,EAAE,GAAGE,SAAS,CAAC;IACxC,MAAMK,OAAO,GAAGF,IAAI,CAACC,GAAG,CAACL,EAAE,GAAGE,SAAS,CAAC;IAExC,MAAMK,MAAM,GACVxC,UAAU,GAAG,CAAC,GACV,GAAG,GAAGA,UAAU,GAChBqC,IAAI,CAACI,IAAI,CAAC,CAACT,EAAE,GAAGI,OAAO,KAAK,CAAC,GAAG,CAACH,EAAE,GAAGM,OAAO,KAAK,CAAC,CAAC;IAE1D,MAAMG,MAAsB,GAAG;MAC7BC,MAAM,EAAEnB,SAAS,CAACM,OAAO,EAAE;MAC3BI,SAAS;MACTC,SAAS;MACTK,MAAM;MACNI,KAAK,EAAE,IAAIhE,QAAQ,CAACiE,KAAK,CAAC,CAAC,CAAC;MAC5BC,OAAO,EAAE,IAAIlE,QAAQ,CAACiE,KAAK,CAAC,CAAC;IAC/B,CAAC;IAEDzB,UAAU,CAACU,OAAO,CAACiB,GAAG,CAACL,MAAM,CAACC,MAAM,EAAED,MAAM,CAAC;IAC7CnB,eAAe,CAACO,OAAO,GAAGY,MAAM,CAACC,MAAM;IAEvC/D,QAAQ,CAACoE,MAAM,CAACN,MAAM,CAACE,KAAK,EAAE;MAC5BK,OAAO,EAAE,CAAC;MACVC,QAAQ,EAAEnD,cAAc;MACxBoD,MAAM,EAAEtE,MAAM,CAACuE,GAAG,CAACvE,MAAM,CAACwE,IAAI,CAAC;MAC/BC,eAAe,EAAE;IACnB,CAAC,CAAC,CAACC,KAAK,CAAC,CAAC;IAEV3E,QAAQ,CAACoE,MAAM,CAACN,MAAM,CAACI,OAAO,EAAE;MAC9BG,OAAO,EAAEnD,aAAa;MACtBoD,QAAQ,EAAEb,IAAI,CAACmB,GAAG,CAACzD,cAAc,EAAEL,sBAAsB,CAAC;MAC1D4D,eAAe,EAAE;IACnB,CAAC,CAAC,CAACC,KAAK,CAAC,CAAC;IAEVpC,YAAY,CAAEW,OAAO,IAAKA,OAAO,CAAC2B,MAAM,CAACf,MAAM,CAACC,MAAM,CAAC,CAAC;EAC1D,CAAC,EACD,CACE9B,MAAM,CAACG,KAAK,EACZH,MAAM,CAACI,MAAM,EACbV,SAAS,EACTL,cAAc,EACdH,cAAc,EACdD,aAAa,EACbK,gBAAgB,EAChBH,UAAU,CAEd,CAAC;EAED,MAAM0D,cAAc,GAAG/E,KAAK,CAACkD,WAAW,CACrCH,KAA4B,IAAK;IAChClB,UAAU,GAAGkB,KAAK,CAAC;IAEnB,MAAMiC,cAAc,GAAGpC,eAAe,CAACO,OAAO;IAC9CP,eAAe,CAACO,OAAO,GAAG,IAAI;IAC9B,IAAI6B,cAAc,KAAK,IAAI,EAAE;IAE7B,MAAMjB,MAAM,GAAGtB,UAAU,CAACU,OAAO,CAAC8B,GAAG,CAACD,cAAc,CAAC;IACrD,IAAI,CAACjB,MAAM,EAAE;IAEb,MAAMmB,YAAY,GAAGA,CAAA,KAAM;MACzBzC,UAAU,CAACU,OAAO,CAACgC,MAAM,CAACH,cAAc,CAAC;MACzCxC,YAAY,CAAEW,OAAO,IACnBA,OAAO,CAACiC,MAAM,CAAEC,EAAE,IAAKA,EAAE,KAAKL,cAAc,CAC9C,CAAC;IACH,CAAC;IAED,IAAI,CAACvD,WAAW,EAAE;MAChByD,YAAY,CAAC,CAAC;MACd;IACF;IAEAjF,QAAQ,CAACqF,QAAQ,CAAC,CAChBrF,QAAQ,CAACoE,MAAM,CAACN,MAAM,CAACE,KAAK,EAAE;MAC5BK,OAAO,EAAE,CAAC;MACVC,QAAQ,EAAE1D,qBAAqB;MAC/B8D,eAAe,EAAE;IACnB,CAAC,CAAC,EACF1E,QAAQ,CAACoE,MAAM,CAACN,MAAM,CAACI,OAAO,EAAE;MAC9BG,OAAO,EAAE,CAAC;MACVC,QAAQ,EAAEzD,qBAAqB;MAC/B6D,eAAe,EAAE;IACnB,CAAC,CAAC,CACH,CAAC,CAACC,KAAK,CAACM,YAAY,CAAC;EACxB,CAAC,EACD,CAACrD,UAAU,EAAEJ,WAAW,CAC1B,CAAC;EAED,oBACEd,KAAA,CAACP,SAAS;IAAA,GACJ0B,cAAc;IAClBJ,QAAQ,EAAEA,QAAS;IACnBC,QAAQ,EAAEmB,YAAa;IACvBlB,SAAS,EAAEqB,aAAc;IACzBpB,UAAU,EAAEkD,cAAe;IAAA9D,QAAA,GAE1BA,QAAQ,eACTR,IAAA,CAACH,IAAI;MACHiF,aAAa,EAAC,MAAM;MACpBC,KAAK,EAAE,CACLC,MAAM,CAACC,SAAS,EAChB;QAAEC,YAAY,EAAErE;MAA4B,CAAC,CAC7C;MAAAL,QAAA,EAEDsB,SAAS,CAACqD,GAAG,CAAEP,EAAE,IAAK;QACrB,MAAMtB,MAAM,GAAGtB,UAAU,CAACU,OAAO,CAAC8B,GAAG,CAACI,EAAE,CAAC;QACzC,IAAI,CAACtB,MAAM,EAAE,OAAO,IAAI;QACxB,oBAAOtD,IAAA,CAACoF,YAAY;UAAU9B,MAAM,EAAEA,MAAO;UAAC/B,KAAK,EAAEA;QAAM,GAAjCqD,EAAmC,CAAC;MAChE,CAAC;IAAC,CACE,CAAC;EAAA,CACE,CAAC;AAEhB;AAOA,SAASS,qBAAqBA,CAAC;EAAE/B,MAAM;EAAE/B;AAAyB,CAAC,EAAE;EACnE,MAAM;IAAEuB,SAAS;IAAEC,SAAS;IAAEK,MAAM;IAAEI,KAAK;IAAEE;EAAQ,CAAC,GAAGJ,MAAM;EAE/D,MAAMgC,WAAW,GAAG;IAClBC,GAAG,EAAExC,SAAS,GAAG5C,aAAa;IAC9B,CAACT,WAAW,CAAC8F,KAAK,GAAG,OAAO,GAAG,MAAM,GAAG1C,SAAS,GAAG3C,aAAa;IACjEsF,eAAe,EAAElE,KAAK;IACtBmC,OAAO;IACPgC,SAAS,EAAE,CACT;MACElC,KAAK,EAAEA,KAAK,CAACmC,WAAW,CAAC;QACvBC,UAAU,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;QAClBC,WAAW,EAAE,CAAC,GAAG,GAAG1F,aAAa,EAAEiD,MAAM,GAAGjD,aAAa;MAC3D,CAAC;IACH,CAAC;EAEL,CAAC;EAED,oBAAOH,IAAA,CAACR,QAAQ,CAACK,IAAI;IAACkF,KAAK,EAAE,CAACC,MAAM,CAACc,MAAM,EAAER,WAAW;EAAE,CAAE,CAAC;AAC/D;AAEA,MAAMF,YAAY,gBAAG7F,KAAK,CAACwG,IAAI,CAACV,qBAAqB,CAAC;AAEtD,MAAML,MAAM,GAAGpF,UAAU,CAACoG,MAAM,CAAC;EAC/Bf,SAAS,EAAE;IACT,GAAGrF,UAAU,CAACqG,kBAAkB;IAChCC,QAAQ,EAAE;EACZ,CAAC;EACDJ,MAAM,EAAE;IACNlE,KAAK,EAAEzB,aAAa,GAAG,CAAC;IACxB0B,MAAM,EAAE1B,aAAa,GAAG,CAAC;IACzB+E,YAAY,EAAE/E,aAAa;IAC3B+F,QAAQ,EAAE,QAAQ;IAClBC,QAAQ,EAAE;EACZ;AACF,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["React","Animated","Easing","I18nManager","Pressable","StyleSheet","View","useColors","jsx","_jsx","jsxs","_jsxs","CIRCLE_RADIUS","RELEASE_GROW_DURATION","RELEASE_FADE_DURATION","PRESS_FADE_IN_DURATION","RippleEffect","children","rippleColor","rippleOpacity","rippleDuration","rippleSize","rippleContainerBorderRadius","rippleCentered","rippleSequential","rippleFades","disabled","style","onLayout","onPressIn","onPressOut","pressableProps","colors","color","text","layout","setLayout","useState","width","height","rippleIds","setRippleIds","ripplesRef","useRef","Map","activeRippleRef","uniqueRef","handleLayout","event","nativeEvent","handlePressIn","useCallback","current","size","w2","h2","locationX","locationY","offsetX","Math","abs","offsetY","radius","sqrt","ripple","unique","scale","Value","opacity","set","concat","handlePressOut","releasedUnique","get","removeRipple","delete","filter","id","parallel","timing","toValue","duration","useNativeDriver","start","pointerEvents","styles","container","borderRadius","map","RippleCircle","toOpacity","RippleCircleComponent","useEffect","easing","out","ease","min","rippleStyle","top","isRTL","backgroundColor","transform","interpolate","inputRange","outputRange","circle","memo","create","absoluteFillObject","overflow","position"],"sourceRoot":"../../../src","sources":["components/RippleEffect.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SACEC,QAAQ,EACRC,MAAM,EACNC,WAAW,EACXC,SAAS,EACTC,UAAU,EACVC,IAAI,QACC,cAAc;AASrB,SAASC,SAAS,QAAQ,qBAAkB;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AA0B7C,MAAMC,aAAa,GAAG,EAAE;AACxB,MAAMC,qBAAqB,GAAG,GAAG;AACjC,MAAMC,qBAAqB,GAAG,GAAG;AACjC,MAAMC,sBAAsB,GAAG,EAAE;;AAEjC;AACA,OAAO,SAASC,YAAYA,CAAC;EAC3BC,QAAQ;EACRC,WAAW;EACXC,aAAa,GAAG,GAAG;EACnBC,cAAc,GAAG,GAAG;EACpBC,UAAU,GAAG,CAAC;EACdC,2BAA2B,GAAG,CAAC;EAC/BC,cAAc,GAAG,KAAK;EACtBC,gBAAgB,GAAG,KAAK;EACxBC,WAAW,GAAG,IAAI;EAClBC,QAAQ,GAAG,KAAK;EAChBC,KAAK;EACLC,QAAQ;EACRC,SAAS;EACTC,UAAU;EACV,GAAGC;AACE,CAAC,EAAE;EACR,MAAMC,MAAM,GAAGzB,SAAS,CAAC,CAAC;EAC1B,MAAM0B,KAAK,GAAGf,WAAW,IAAIc,MAAM,CAACE,IAAI;EAExC,MAAM,CAACC,MAAM,EAAEC,SAAS,CAAC,GAAGpC,KAAK,CAACqC,QAAQ,CAAC;IAAEC,KAAK,EAAE,CAAC;IAAEC,MAAM,EAAE;EAAE,CAAC,CAAC;EACnE,MAAM,CAACC,SAAS,EAAEC,YAAY,CAAC,GAAGzC,KAAK,CAACqC,QAAQ,CAAW,EAAE,CAAC;EAC9D,MAAMK,UAAU,GAAG1C,KAAK,CAAC2C,MAAM,CAAC,IAAIC,GAAG,CAAyB,CAAC,CAAC;EAClE,MAAMC,eAAe,GAAG7C,KAAK,CAAC2C,MAAM,CAAgB,IAAI,CAAC;EACzD,MAAMG,SAAS,GAAG9C,KAAK,CAAC2C,MAAM,CAAC,CAAC,CAAC;EAEjC,MAAMI,YAAY,GAAIC,KAAwB,IAAK;IACjD,MAAM;MAAEV,KAAK;MAAEC;IAAO,CAAC,GAAGS,KAAK,CAACC,WAAW,CAACd,MAAM;IAClDC,SAAS,CAAC;MAAEE,KAAK;MAAEC;IAAO,CAAC,CAAC;IAC5BX,QAAQ,GAAGoB,KAAK,CAAC;EACnB,CAAC;EAED,MAAME,aAAa,GAAGlD,KAAK,CAACmD,WAAW,CACpCH,KAA4B,IAAK;IAChCnB,SAAS,GAAGmB,KAAK,CAAC;IAElB,IAAIxB,gBAAgB,IAAIkB,UAAU,CAACU,OAAO,CAACC,IAAI,EAAE;IAEjD,MAAMC,EAAE,GAAG,GAAG,GAAGnB,MAAM,CAACG,KAAK;IAC7B,MAAMiB,EAAE,GAAG,GAAG,GAAGpB,MAAM,CAACI,MAAM;;IAE9B;IACA,MAAM;MAAEiB,SAAS;MAAEC;IAAU,CAAC,GAC5BlC,cAAc,IAAI,CAACyB,KAAK,EAAEC,WAAW,GACjC;MAAEO,SAAS,EAAEF,EAAE;MAAEG,SAAS,EAAEF;IAAG,CAAC,GAChCP,KAAK,CAACC,WAAW;IAEvB,MAAMS,OAAO,GAAGC,IAAI,CAACC,GAAG,CAACN,EAAE,GAAGE,SAAS,CAAC;IACxC,MAAMK,OAAO,GAAGF,IAAI,CAACC,GAAG,CAACL,EAAE,GAAGE,SAAS,CAAC;IAExC,MAAMK,MAAM,GACVzC,UAAU,GAAG,CAAC,GACV,GAAG,GAAGA,UAAU,GAChBsC,IAAI,CAACI,IAAI,CAAC,CAACT,EAAE,GAAGI,OAAO,KAAK,CAAC,GAAG,CAACH,EAAE,GAAGM,OAAO,KAAK,CAAC,CAAC;IAE1D,MAAMG,MAAsB,GAAG;MAC7BC,MAAM,EAAEnB,SAAS,CAACM,OAAO,EAAE;MAC3BI,SAAS;MACTC,SAAS;MACTK,MAAM;MACNI,KAAK,EAAE,IAAIjE,QAAQ,CAACkE,KAAK,CAAC,CAAC,CAAC;MAC5BC,OAAO,EAAE,IAAInE,QAAQ,CAACkE,KAAK,CAAC,CAAC;IAC/B,CAAC;IAEDzB,UAAU,CAACU,OAAO,CAACiB,GAAG,CAACL,MAAM,CAACC,MAAM,EAAED,MAAM,CAAC;IAC7CnB,eAAe,CAACO,OAAO,GAAGY,MAAM,CAACC,MAAM;;IAEvC;IACA;IACA;IACA;IACAxB,YAAY,CAAEW,OAAO,IAAKA,OAAO,CAACkB,MAAM,CAACN,MAAM,CAACC,MAAM,CAAC,CAAC;EAC1D,CAAC,EACD,CACE9B,MAAM,CAACG,KAAK,EACZH,MAAM,CAACI,MAAM,EACbV,SAAS,EACTN,cAAc,EACdC,gBAAgB,EAChBH,UAAU,CAEd,CAAC;EAED,MAAMkD,cAAc,GAAGvE,KAAK,CAACmD,WAAW,CACrCH,KAA4B,IAAK;IAChClB,UAAU,GAAGkB,KAAK,CAAC;IAEnB,MAAMwB,cAAc,GAAG3B,eAAe,CAACO,OAAO;IAC9CP,eAAe,CAACO,OAAO,GAAG,IAAI;IAC9B,IAAIoB,cAAc,KAAK,IAAI,EAAE;IAE7B,MAAMR,MAAM,GAAGtB,UAAU,CAACU,OAAO,CAACqB,GAAG,CAACD,cAAc,CAAC;IACrD,IAAI,CAACR,MAAM,EAAE;IAEb,MAAMU,YAAY,GAAGA,CAAA,KAAM;MACzBhC,UAAU,CAACU,OAAO,CAACuB,MAAM,CAACH,cAAc,CAAC;MACzC/B,YAAY,CAAEW,OAAO,IACnBA,OAAO,CAACwB,MAAM,CAAEC,EAAE,IAAKA,EAAE,KAAKL,cAAc,CAC9C,CAAC;IACH,CAAC;IAED,IAAI,CAAC/C,WAAW,EAAE;MAChBiD,YAAY,CAAC,CAAC;MACd;IACF;IAEAzE,QAAQ,CAAC6E,QAAQ,CAAC,CAChB7E,QAAQ,CAAC8E,MAAM,CAACf,MAAM,CAACE,KAAK,EAAE;MAC5Bc,OAAO,EAAE,CAAC;MACVC,QAAQ,EAAEpE,qBAAqB;MAC/BqE,eAAe,EAAE;IACnB,CAAC,CAAC,EACFjF,QAAQ,CAAC8E,MAAM,CAACf,MAAM,CAACI,OAAO,EAAE;MAC9BY,OAAO,EAAE,CAAC;MACVC,QAAQ,EAAEnE,qBAAqB;MAC/BoE,eAAe,EAAE;IACnB,CAAC,CAAC,CACH,CAAC,CAACC,KAAK,CAACT,YAAY,CAAC;EACxB,CAAC,EACD,CAAC5C,UAAU,EAAEL,WAAW,CAC1B,CAAC;EAED,oBACEd,KAAA,CAACP,SAAS;IAAA,GACJ2B,cAAc;IAClBL,QAAQ,EAAEA,QAAS;IACnBE,QAAQ,EAAEmB,YAAa;IACvBlB,SAAS,EAAEqB,aAAc;IACzBpB,UAAU,EAAEyC,cAAe;IAAAtD,QAAA,gBAK3BR,IAAA,CAACH,IAAI;MAACqB,KAAK,EAAEA,KAAM;MAAAV,QAAA,EAAEA;IAAQ,CAAO,CAAC,eACrCR,IAAA,CAACH,IAAI;MACH8E,aAAa,EAAC,MAAM;MACpBzD,KAAK,EAAE,CACL0D,MAAM,CAACC,SAAS,EAChB;QAAEC,YAAY,EAAEjE;MAA4B,CAAC,CAC7C;MAAAL,QAAA,EAEDuB,SAAS,CAACgD,GAAG,CAAEX,EAAE,IAAK;QACrB,MAAMb,MAAM,GAAGtB,UAAU,CAACU,OAAO,CAACqB,GAAG,CAACI,EAAE,CAAC;QACzC,IAAI,CAACb,MAAM,EAAE,OAAO,IAAI;QACxB,oBACEvD,IAAA,CAACgF,YAAY;UAEXzB,MAAM,EAAEA,MAAO;UACf/B,KAAK,EAAEA,KAAM;UACbgD,QAAQ,EAAE7D,cAAe;UACzBsE,SAAS,EAAEvE;QAAc,GAJpB0D,EAKN,CAAC;MAEN,CAAC;IAAC,CACE,CAAC;EAAA,CACE,CAAC;AAEhB;AASA,SAASc,qBAAqBA,CAAC;EAC7B3B,MAAM;EACN/B,KAAK;EACLgD,QAAQ;EACRS;AACiB,CAAC,EAAE;EACpB,MAAM;IAAElC,SAAS;IAAEC,SAAS;IAAEK,MAAM;IAAEI,KAAK;IAAEE;EAAQ,CAAC,GAAGJ,MAAM;EAE/DhE,KAAK,CAAC4F,SAAS,CAAC,MAAM;IACpB3F,QAAQ,CAAC8E,MAAM,CAACb,KAAK,EAAE;MACrBc,OAAO,EAAE,CAAC;MACVC,QAAQ;MACRY,MAAM,EAAE3F,MAAM,CAAC4F,GAAG,CAAC5F,MAAM,CAAC6F,IAAI,CAAC;MAC/Bb,eAAe,EAAE;IACnB,CAAC,CAAC,CAACC,KAAK,CAAC,CAAC;IAEVlF,QAAQ,CAAC8E,MAAM,CAACX,OAAO,EAAE;MACvBY,OAAO,EAAEU,SAAS;MAClBT,QAAQ,EAAEtB,IAAI,CAACqC,GAAG,CAACf,QAAQ,EAAElE,sBAAsB,CAAC;MACpDmE,eAAe,EAAE;IACnB,CAAC,CAAC,CAACC,KAAK,CAAC,CAAC;IACV;IACA;EACF,CAAC,EAAE,EAAE,CAAC;EAEN,MAAMc,WAAW,GAAG;IAClBC,GAAG,EAAEzC,SAAS,GAAG7C,aAAa;IAC9B,CAACT,WAAW,CAACgG,KAAK,GAAG,OAAO,GAAG,MAAM,GAAG3C,SAAS,GAAG5C,aAAa;IACjEwF,eAAe,EAAEnE,KAAK;IACtBmC,OAAO;IACPiC,SAAS,EAAE,CACT;MACEnC,KAAK,EAAEA,KAAK,CAACoC,WAAW,CAAC;QACvBC,UAAU,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;QAClBC,WAAW,EAAE,CAAC,GAAG,GAAG5F,aAAa,EAAEkD,MAAM,GAAGlD,aAAa;MAC3D,CAAC;IACH,CAAC;EAEL,CAAC;EAED,oBAAOH,IAAA,CAACR,QAAQ,CAACK,IAAI;IAACqB,KAAK,EAAE,CAAC0D,MAAM,CAACoB,MAAM,EAAER,WAAW;EAAE,CAAE,CAAC;AAC/D;AAEA,MAAMR,YAAY,gBAAGzF,KAAK,CAAC0G,IAAI,CAACf,qBAAqB,CAAC;AAEtD,MAAMN,MAAM,GAAGhF,UAAU,CAACsG,MAAM,CAAC;EAC/BrB,SAAS,EAAE;IACT,GAAGjF,UAAU,CAACuG,kBAAkB;IAChCC,QAAQ,EAAE;EACZ,CAAC;EACDJ,MAAM,EAAE;IACNnE,KAAK,EAAE1B,aAAa,GAAG,CAAC;IACxB2B,MAAM,EAAE3B,aAAa,GAAG,CAAC;IACzB2E,YAAY,EAAE3E,aAAa;IAC3BiG,QAAQ,EAAE,QAAQ;IAClBC,QAAQ,EAAE;EACZ;AACF,CAAC,CAAC","ignoreList":[]}

package/lib/typescript/src/components/Button.d.ts

@@ -9,16 +9,15 @@ type Props = {
     style?: StyleProp<ViewStyle>;
     testID?: string;
     hitSlop?: Insets;
-    /** Android only. */
+    /** Android only. Ripple color. Defaults to the theme `text` color. */
     rippleColor?: string;
-    /** Android only. */
-    rippleContainerBorderRadius?: number;
 };
 /**
- * Base pressable. Android gets a touch ripple; every other platform gets
- * opacity feedback. Kept in one file (not `.ios`/`.android`) so consumers'
- * type resolution works without `moduleSuffixes`.
+ * Base pressable. Android gets the platform touch ripple (drawn in the
+ * foreground and clipped to the view's own shape); every other platform gets
+ * opacity feedback. Kept in one file (not `.ios`/`.android`) so consumers' type
+ * resolution works without `moduleSuffixes`.
  */
-export declare function Button({ children, onPress, onPressIn, onPressOut, disabled, style, testID, hitSlop, rippleColor, rippleContainerBorderRadius, }: Props): import("react").JSX.Element;
+export declare function Button({ children, onPress, onPressIn, onPressOut, disabled, style, testID, hitSlop, rippleColor, }: Props): import("react").JSX.Element;
 export {};
 //# sourceMappingURL=Button.d.ts.map

package/lib/typescript/src/components/Button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../src/components/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAIjE,KAAK,KAAK,GAAG;IACX,QAAQ,EAAE,SAAS,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,oBAAoB;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,oBAAoB;IACpB,2BAA2B,CAAC,EAAE,MAAM,CAAC;CACtC,CAAC;AAEF;;;;GAIG;AACH,wBAAgB,MAAM,CAAC,EACrB,QAAQ,EACR,OAAO,EACP,SAAS,EACT,UAAU,EACV,QAAQ,EACR,KAAK,EACL,MAAM,EACN,OAAO,EACP,WAAW,EACX,2BAA2B,GAC5B,EAAE,KAAK,+BAgCP"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../src/components/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAIjE,KAAK,KAAK,GAAG;IACX,QAAQ,EAAE,SAAS,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,sEAAsE;IACtE,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF;;;;;GAKG;AACH,wBAAgB,MAAM,CAAC,EACrB,QAAQ,EACR,OAAO,EACP,SAAS,EACT,UAAU,EACV,QAAQ,EACR,KAAK,EACL,MAAM,EACN,OAAO,EACP,WAAW,GACZ,EAAE,KAAK,+BAoCP"}

package/lib/typescript/src/components/Chips.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Chips.d.ts","sourceRoot":"","sources":["../../../../src/components/Chips.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAQvC,KAAK,UAAU,GAAG,SAAS,GAAG,SAAS,GAAG,YAAY,CAAC;AAEvD,KAAK,QAAQ,CAAC,IAAI,IAAI;IACpB,GAAG,EAAE,IAAI,CAAC;IACV,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,8DAA8D;IAC9D,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,0CAA0C;IAC1C,MAAM,CAAC,EAAE,UAAU,CAAC;CACrB,CAAC;AAEF,KAAK,KAAK,CAAC,IAAI,IAAI;IACjB,IAAI,EAAE,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC;IACvB,4EAA4E;IAC5E,OAAO,CAAC,EAAE,CAAC,GAAG,EAAE,IAAI,KAAK,IAAI,CAAC;IAC9B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,sDAAsD;AACtD,wBAAgB,KAAK,CAAC,IAAI,EAAE,EAC1B,IAAI,EACJ,OAAW,EACX,OAAW,EACX,OAAO,EACP,MAAM,GACP,EAAE,KAAK,CAAC,IAAI,CAAC,+BAoDb"}
+{"version":3,"file":"Chips.d.ts","sourceRoot":"","sources":["../../../../src/components/Chips.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAQvC,KAAK,UAAU,GAAG,SAAS,GAAG,SAAS,GAAG,YAAY,CAAC;AAEvD,KAAK,QAAQ,CAAC,IAAI,IAAI;IACpB,GAAG,EAAE,IAAI,CAAC;IACV,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,8DAA8D;IAC9D,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,0CAA0C;IAC1C,MAAM,CAAC,EAAE,UAAU,CAAC;CACrB,CAAC;AAEF,KAAK,KAAK,CAAC,IAAI,IAAI;IACjB,IAAI,EAAE,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC;IACvB,4EAA4E;IAC5E,OAAO,CAAC,EAAE,CAAC,GAAG,EAAE,IAAI,KAAK,IAAI,CAAC;IAC9B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,sDAAsD;AACtD,wBAAgB,KAAK,CAAC,IAAI,EAAE,EAC1B,IAAI,EACJ,OAAW,EACX,OAAW,EACX,OAAO,EACP,MAAM,GACP,EAAE,KAAK,CAAC,IAAI,CAAC,+BA6Db"}

package/lib/typescript/src/components/RippleEffect.d.ts

@@ -1,7 +1,9 @@
 import React from 'react';
-import type { PressableProps } from 'react-native';
-type Props = PressableProps & {
+import type { PressableProps, StyleProp, ViewStyle } from 'react-native';
+type Props = Omit<PressableProps, 'style'> & {
     children: React.ReactNode;
+    /** Applied to an inner wrapper around `children`, not to the pressable. */
+    style?: StyleProp<ViewStyle>;
     /** Ripple color. Default: theme `text`. */
     rippleColor?: string;
     rippleOpacity?: number;
@@ -13,6 +15,6 @@ type Props = PressableProps & {
     rippleFades?: boolean;
 };
 /** Wraps a child and paints a touch ripple at the press location. */
-export declare function RippleEffect({ children, rippleColor, rippleOpacity, rippleDuration, rippleSize, rippleContainerBorderRadius, rippleCentered, rippleSequential, rippleFades, disabled, onLayout, onPressIn, onPressOut, ...pressableProps }: Props): React.JSX.Element;
+export declare function RippleEffect({ children, rippleColor, rippleOpacity, rippleDuration, rippleSize, rippleContainerBorderRadius, rippleCentered, rippleSequential, rippleFades, disabled, style, onLayout, onPressIn, onPressOut, ...pressableProps }: Props): React.JSX.Element;
 export {};
 //# sourceMappingURL=RippleEffect.d.ts.map

package/lib/typescript/src/components/RippleEffect.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RippleEffect.d.ts","sourceRoot":"","sources":["../../../../src/components/RippleEffect.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAS1B,OAAO,KAAK,EAGV,cAAc,EACf,MAAM,cAAc,CAAC;AAatB,KAAK,KAAK,GAAG,cAAc,GAAG;IAC5B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,2CAA2C;IAC3C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,2BAA2B,CAAC,EAAE,MAAM,CAAC;IACrC,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AAOF,qEAAqE;AACrE,wBAAgB,YAAY,CAAC,EAC3B,QAAQ,EACR,WAAW,EACX,aAAmB,EACnB,cAAoB,EACpB,UAAc,EACd,2BAA+B,EAC/B,cAAsB,EACtB,gBAAwB,EACxB,WAAkB,EAClB,QAAgB,EAChB,QAAQ,EACR,SAAS,EACT,UAAU,EACV,GAAG,cAAc,EAClB,EAAE,KAAK,qBA6IP"}
+{"version":3,"file":"RippleEffect.d.ts","sourceRoot":"","sources":["../../../../src/components/RippleEffect.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAS1B,OAAO,KAAK,EAGV,cAAc,EACd,SAAS,EACT,SAAS,EACV,MAAM,cAAc,CAAC;AAatB,KAAK,KAAK,GAAG,IAAI,CAAC,cAAc,EAAE,OAAO,CAAC,GAAG;IAC3C,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,2EAA2E;IAC3E,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,2CAA2C;IAC3C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,2BAA2B,CAAC,EAAE,MAAM,CAAC;IACrC,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AAOF,qEAAqE;AACrE,wBAAgB,YAAY,CAAC,EAC3B,QAAQ,EACR,WAAW,EACX,aAAmB,EACnB,cAAoB,EACpB,UAAc,EACd,2BAA+B,EAC/B,cAAsB,EACtB,gBAAwB,EACxB,WAAkB,EAClB,QAAgB,EAChB,KAAK,EACL,QAAQ,EACR,SAAS,EACT,UAAU,EACV,GAAG,cAAc,EAClB,EAAE,KAAK,qBA6IP"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cyberkaidev/ui",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "Components for React Native",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",

package/src/components/Button.tsx

@@ -1,8 +1,8 @@
 import type { ReactNode } from 'react';
-import { Platform, TouchableOpacity } from 'react-native';
+import { Platform, Pressable, TouchableOpacity } from 'react-native';
 import type { Insets, StyleProp, ViewStyle } from 'react-native';
 
-import { RippleEffect } from './RippleEffect';
+import { useColors } from '../ThemeProvider';
 
 type Props = {
   children: ReactNode;
@@ -13,16 +13,15 @@ type Props = {
   style?: StyleProp<ViewStyle>;
   testID?: string;
   hitSlop?: Insets;
-  /** Android only. */
+  /** Android only. Ripple color. Defaults to the theme `text` color. */
   rippleColor?: string;
-  /** Android only. */
-  rippleContainerBorderRadius?: number;
 };
 
 /**
- * Base pressable. Android gets a touch ripple; every other platform gets
- * opacity feedback. Kept in one file (not `.ios`/`.android`) so consumers'
- * type resolution works without `moduleSuffixes`.
+ * Base pressable. Android gets the platform touch ripple (drawn in the
+ * foreground and clipped to the view's own shape); every other platform gets
+ * opacity feedback. Kept in one file (not `.ios`/`.android`) so consumers' type
+ * resolution works without `moduleSuffixes`.
  */
 export function Button({
   children,
@@ -34,11 +33,12 @@ export function Button({
   testID,
   hitSlop,
   rippleColor,
-  rippleContainerBorderRadius,
 }: Props) {
+  const colors = useColors();
+
   if (Platform.OS === 'android') {
     return (
-      <RippleEffect
+      <Pressable
         testID={testID}
         style={style}
         disabled={disabled}
@@ -46,11 +46,13 @@ export function Button({
         onPressIn={onPressIn}
         onPressOut={onPressOut}
         hitSlop={hitSlop}
-        rippleColor={rippleColor}
-        rippleContainerBorderRadius={rippleContainerBorderRadius}
+        android_ripple={{
+          color: rippleColor ?? colors.text,
+          foreground: true,
+        }}
       >
         {children}
-      </RippleEffect>
+      </Pressable>
     );
   }
 

package/src/components/Chips.tsx

@@ -79,8 +79,17 @@ export function Chips<Item>({
             ]}
             onPress={() => onPress?.(key)}
           >
-            {prefix}
-            <Text color={schemeTextColor[scheme]}>{label}</Text>
+            {/* Keep this a single child when there is no prefix — a falsy
+                leading child still reserves a flex `gap` slot on the New
+                Architecture, which reads as extra padding on the label side. */}
+            {prefix == null ? (
+              <Text color={schemeTextColor[scheme]}>{label}</Text>
+            ) : (
+              <View style={styles.row}>
+                <View style={styles.prefix}>{prefix}</View>
+                <Text color={schemeTextColor[scheme]}>{label}</Text>
+              </View>
+            )}
           </Button>
         ))}
       </ScrollView>
@@ -105,9 +114,15 @@ function makeStyles(t: ThemeType) {
       borderStyle: 'solid',
       flexDirection: 'row',
       alignItems: 'center',
-      gap: t.spaces.horizontal.s,
       overflow: 'hidden',
     },
+    row: {
+      flexDirection: 'row',
+      alignItems: 'center',
+    },
+    prefix: {
+      marginRight: t.spaces.horizontal.s,
+    },
     dimmed: {
       opacity: 0.5,
     },

package/src/components/RippleEffect.tsx

@@ -11,6 +11,8 @@ import type {
   GestureResponderEvent,
   LayoutChangeEvent,
   PressableProps,
+  StyleProp,
+  ViewStyle,
 } from 'react-native';
 
 import { useColors } from '../ThemeProvider';
@@ -24,8 +26,10 @@ type RippleItemType = {
   opacity: Animated.Value;
 };
 
-type Props = PressableProps & {
+type Props = Omit<PressableProps, 'style'> & {
   children: React.ReactNode;
+  /** Applied to an inner wrapper around `children`, not to the pressable. */
+  style?: StyleProp<ViewStyle>;
   /** Ripple color. Default: theme `text`. */
   rippleColor?: string;
   rippleOpacity?: number;
@@ -54,6 +58,7 @@ export function RippleEffect({
   rippleSequential = false,
   rippleFades = true,
   disabled = false,
+  style,
   onLayout,
   onPressIn,
   onPressOut,
@@ -109,19 +114,10 @@ export function RippleEffect({
       ripplesRef.current.set(ripple.unique, ripple);
       activeRippleRef.current = ripple.unique;
 
-      Animated.timing(ripple.scale, {
-        toValue: 1,
-        duration: rippleDuration,
-        easing: Easing.out(Easing.ease),
-        useNativeDriver: true,
-      }).start();
-
-      Animated.timing(ripple.opacity, {
-        toValue: rippleOpacity,
-        duration: Math.min(rippleDuration, PRESS_FADE_IN_DURATION),
-        useNativeDriver: true,
-      }).start();
-
+      // The entrance animation is kicked off from `RippleCircle`'s mount effect,
+      // not here: on the New Architecture, starting a native-driven animation on
+      // an `Animated.Value` before its `Animated.View` is mounted leaves the
+      // native driver with no view to attach to, so the ripple never shows.
       setRippleIds((current) => current.concat(ripple.unique));
     },
     [
@@ -129,8 +125,6 @@ export function RippleEffect({
       layout.height,
       onPressIn,
       rippleCentered,
-      rippleDuration,
-      rippleOpacity,
       rippleSequential,
       rippleSize,
     ]
@@ -183,7 +177,10 @@ export function RippleEffect({
       onPressIn={handlePressIn}
       onPressOut={handlePressOut}
     >
-      {children}
+      {/* The caller's `style` (often a flex row with `justifyContent`) is
+          applied here, wrapping only the real children — so the absolutely
+          positioned ripple layer below can never take part in that layout. */}
+      <View style={style}>{children}</View>
       <View
         pointerEvents="none"
         style={[
@@ -194,7 +191,15 @@ export function RippleEffect({
         {rippleIds.map((id) => {
           const ripple = ripplesRef.current.get(id);
           if (!ripple) return null;
-          return <RippleCircle key={id} ripple={ripple} color={color} />;
+          return (
+            <RippleCircle
+              key={id}
+              ripple={ripple}
+              color={color}
+              duration={rippleDuration}
+              toOpacity={rippleOpacity}
+            />
+          );
         })}
       </View>
     </Pressable>
@@ -204,11 +209,35 @@ export function RippleEffect({
 type RippleCircleProps = {
   ripple: RippleItemType;
   color: string;
+  duration: number;
+  toOpacity: number;
 };
 
-function RippleCircleComponent({ ripple, color }: RippleCircleProps) {
+function RippleCircleComponent({
+  ripple,
+  color,
+  duration,
+  toOpacity,
+}: RippleCircleProps) {
   const { locationX, locationY, radius, scale, opacity } = ripple;
 
+  React.useEffect(() => {
+    Animated.timing(scale, {
+      toValue: 1,
+      duration,
+      easing: Easing.out(Easing.ease),
+      useNativeDriver: true,
+    }).start();
+
+    Animated.timing(opacity, {
+      toValue: toOpacity,
+      duration: Math.min(duration, PRESS_FADE_IN_DURATION),
+      useNativeDriver: true,
+    }).start();
+    // Entrance runs exactly once, when the ripple view mounts.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   const rippleStyle = {
     top: locationY - CIRCLE_RADIUS,
     [I18nManager.isRTL ? 'right' : 'left']: locationX - CIRCLE_RADIUS,