@retray-dev/ui-kit 6.2.0 → 9.0.0

package/src/utils/pressable.ts

@@ -0,0 +1,66 @@
+/**
+ * Pressto-based pressable primitives for the UI Kit.
+ *
+ * Pressto provides main-thread pressable animations built on react-native-gesture-handler
+ * and react-native-reanimated. Animations run at 60fps with zero JS overhead.
+ *
+ * These custom pressables match the UI Kit's design language:
+ * - Button: 0.95 scale (tight, premium press)
+ * - Card: 0.98 scale (subtle surface response)
+ * - Row: 0.97 scale (list items, menu items)
+ * - Chip: 0.94 scale (compact, snappy)
+ */
+import { createAnimatedPressable } from 'pressto'
+import { PRESS_SCALE } from './animations'
+
+/**
+ * Button pressable — tight 0.95 scale for primary actions.
+ * Use for: Button, IconButton, Toggle, Checkbox triggers.
+ */
+export const PressableButton = createAnimatedPressable((progress) => {
+  'worklet'
+  const scale = 1 - (1 - PRESS_SCALE.button) * progress
+  return { transform: [{ scale }] }
+})
+
+/**
+ * Card pressable — subtle 0.98 scale for surfaces.
+ * Use for: Card (interactive), MediaCard, Pressable component.
+ */
+export const PressableCard = createAnimatedPressable((progress) => {
+  'worklet'
+  const scale = 1 - (1 - PRESS_SCALE.card) * progress
+  return { transform: [{ scale }] }
+})
+
+/**
+ * Row pressable — balanced 0.97 scale for list interactions.
+ * Use for: ListItem, MenuItem, Accordion triggers.
+ */
+export const PressableRow = createAnimatedPressable((progress) => {
+  'worklet'
+  const scale = 1 - (1 - PRESS_SCALE.row) * progress
+  return { transform: [{ scale }] }
+})
+
+/**
+ * Chip pressable — snappy 0.94 scale for compact elements.
+ * Use for: Chip, small toggleable items.
+ */
+export const PressableChip = createAnimatedPressable((progress) => {
+  'worklet'
+  const scale = 1 - (1 - PRESS_SCALE.chip) * progress
+  return { transform: [{ scale }] }
+})
+
+/**
+ * Tab pressable — same as button for tab triggers.
+ */
+export const PressableTab = createAnimatedPressable((progress) => {
+  'worklet'
+  const scale = 1 - (1 - PRESS_SCALE.button) * progress
+  return { transform: [{ scale }] }
+})
+
+// Re-export pressto components for direct use
+export { PressableScale, PressableOpacity, PressablesConfig } from 'pressto'

package/src/utils/usePressScale.ts

@@ -48,11 +48,13 @@ export function usePressScale({
 
   const onPressIn = useCallback(() => {
     if (disabled) return
+    // eslint-disable-next-line react-hooks/immutability
     scale.value = withSpring(pressScale, pressInSpring)
   }, [disabled, pressScale, pressInSpring, scale])
 
   const onPressOut = useCallback(() => {
     if (disabled) return
+    // eslint-disable-next-line react-hooks/immutability
     scale.value = withSpring(1, pressOutSpring)
   }, [disabled, pressOutSpring, scale])