@retray-dev/ui-kit 7.0.1 → 9.1.0

package/dist/{chunk-KWCPOM6W.mjs → chunk-3U4SSNWP.mjs}

@@ -1,15 +1,14 @@
+import { PressableButton } from './chunk-3DKJ2GIC.mjs';
+import { impactLight } from './chunk-EJ7ZPXOH.mjs';
 import { renderIcon } from './chunk-T7XZ7H7Y.mjs';
-import { usePressScale } from './chunk-QCNARS3X.mjs';
-import { impactLight } from './chunk-RTC3CFXF.mjs';
-import { PRESS_SCALE } from './chunk-5IKW3VNC.mjs';
 import { useTheme } from './chunk-SOYNZDVY.mjs';
 import { s, ms } from './chunk-2CE3TQVY.mjs';
 import React from 'react';
-import { StyleSheet, TouchableOpacity, ActivityIndicator, View, Text } from 'react-native';
-import Animated from 'react-native-reanimated';
+import { StyleSheet, View, ActivityIndicator, Text } from 'react-native';
 
 var sizeMap = {
-  sm: { container: s(32), icon: 16 },
+  // AUDIT FIX: sm was 32pt — below Apple HIG 44pt minimum touch target.
+  sm: { container: s(44), icon: 18 },
   md: { container: s(44), icon: 20 },
   lg: { container: s(52), icon: 24 }
 };
@@ -25,18 +24,13 @@ function IconButtonBase({
   style,
   onPress,
   accessibilityLabel,
-  accessibilityHint,
-  ...props
+  accessibilityHint
 }) {
   const { colors } = useTheme();
   const isDisabled = disabled || loading;
-  const { animatedStyle, onPressIn, onPressOut, hoverHandlers } = usePressScale({
-    pressScale: PRESS_SCALE.button,
-    disabled: isDisabled
-  });
-  const handlePress = (e) => {
+  const handlePress = () => {
     impactLight();
-    onPress?.(e);
+    onPress?.();
   };
   const containerVariantStyle = {
     primary: { backgroundColor: colors.primary },
@@ -58,42 +52,32 @@ function IconButtonBase({
   const showBadge = badge !== void 0 && badge !== false && badge !== 0;
   const badgeCount = typeof badge === "number" ? Math.min(badge, 99) : null;
   const showCount = typeof badge === "number" && badge > 0;
-  return /* @__PURE__ */ React.createElement(
-    Animated.View,
+  return /* @__PURE__ */ React.createElement(View, { style: styles.wrapper }, /* @__PURE__ */ React.createElement(
+    PressableButton,
     {
-      style: [styles.wrapper, animatedStyle],
-      ...hoverHandlers
+      style: [
+        styles.base,
+        containerVariantStyle,
+        { width: containerSize, height: containerSize },
+        isDisabled && styles.disabled,
+        style
+      ],
+      enabled: !isDisabled,
+      onPress: handlePress,
+      rippleColor: "transparent",
+      touchSoundDisabled: true,
+      activateOnHover: true,
+      accessibilityRole: "button",
+      accessibilityLabel: accessibilityLabel ?? iconName ?? "icon button",
+      accessibilityHint,
+      accessibilityState: { disabled: isDisabled, busy: loading }
     },
-    /* @__PURE__ */ React.createElement(
-      TouchableOpacity,
-      {
-        style: [
-          styles.base,
-          containerVariantStyle,
-          { width: containerSize, height: containerSize },
-          isDisabled && styles.disabled,
-          style
-        ],
-        disabled: isDisabled,
-        activeOpacity: 1,
-        touchSoundDisabled: true,
-        onPress: handlePress,
-        onPressIn,
-        onPressOut,
-        accessibilityRole: "button",
-        accessibilityLabel: accessibilityLabel ?? iconName ?? "icon button",
-        accessibilityHint,
-        accessibilityState: { disabled: isDisabled, busy: loading },
-        ...props
-      },
-      loading ? /* @__PURE__ */ React.createElement(ActivityIndicator, { size: "small", color: spinnerColor }) : resolvedIcon
-    ),
-    showBadge && /* @__PURE__ */ React.createElement(View, { style: [
-      styles.badge,
-      { backgroundColor: colors.primary },
-      showCount ? styles.badgeCount : styles.badgeDot
-    ] }, showCount && /* @__PURE__ */ React.createElement(Text, { style: [styles.badgeText, { color: colors.primaryForeground }] }, badgeCount))
-  );
+    loading ? /* @__PURE__ */ React.createElement(ActivityIndicator, { size: "small", color: spinnerColor }) : resolvedIcon
+  ), showBadge && /* @__PURE__ */ React.createElement(View, { style: [
+    styles.badge,
+    { backgroundColor: colors.primary },
+    showCount ? styles.badgeCount : styles.badgeDot
+  ] }, showCount && /* @__PURE__ */ React.createElement(Text, { style: [styles.badgeText, { color: colors.primaryForeground }] }, badgeCount)));
 }
 var IconButton = React.memo(IconButtonBase);
 var styles = StyleSheet.create({

package/dist/chunk-4I7D47FH.mjs

@@ -0,0 +1,139 @@
+import { Badge } from './chunk-TERDKCLE.mjs';
+import { Button } from './chunk-2TFTAWVJ.mjs';
+import { RADIUS, SHADOWS } from './chunk-QY3X2UYR.mjs';
+import { renderIcon } from './chunk-T7XZ7H7Y.mjs';
+import { useTheme } from './chunk-SOYNZDVY.mjs';
+import { mvs, ms, vs, s } from './chunk-2CE3TQVY.mjs';
+import React from 'react';
+import { StyleSheet, View, Text } from 'react-native';
+
+var normalize = (f) => typeof f === "string" ? { label: f, included: true } : { included: true, ...f };
+function PricingCard({
+  name,
+  price,
+  period,
+  description,
+  features = [],
+  ctaLabel,
+  onCtaPress,
+  badge,
+  highlighted = false,
+  footnote,
+  style
+}) {
+  const { colors } = useTheme();
+  return /* @__PURE__ */ React.createElement(
+    View,
+    {
+      style: [
+        styles.card,
+        {
+          backgroundColor: colors.card,
+          borderColor: highlighted ? colors.primary : colors.border,
+          borderWidth: highlighted ? 2 : StyleSheet.hairlineWidth
+        },
+        highlighted && SHADOWS.md,
+        style
+      ],
+      accessibilityRole: "summary"
+    },
+    /* @__PURE__ */ React.createElement(View, { style: styles.header }, /* @__PURE__ */ React.createElement(Text, { style: [styles.name, { color: colors.foreground }], allowFontScaling: true }, name), badge ? /* @__PURE__ */ React.createElement(Badge, { label: badge, variant: highlighted ? "default" : "secondary", size: "sm" }) : null),
+    /* @__PURE__ */ React.createElement(View, { style: styles.priceRow }, /* @__PURE__ */ React.createElement(Text, { style: [styles.price, { color: colors.foreground }], allowFontScaling: true }, price), period ? /* @__PURE__ */ React.createElement(Text, { style: [styles.period, { color: colors.foregroundMuted }], allowFontScaling: true }, period) : null),
+    description ? /* @__PURE__ */ React.createElement(Text, { style: [styles.description, { color: colors.foregroundMuted }], allowFontScaling: true }, description) : null,
+    features.length > 0 ? /* @__PURE__ */ React.createElement(View, { style: styles.features }, features.map(normalize).map((f, i) => /* @__PURE__ */ React.createElement(View, { key: i, style: styles.featureRow }, renderIcon(
+      f.included ? "check" : "minus",
+      ms(16),
+      f.included ? colors.success : colors.foregroundMuted
+    ), /* @__PURE__ */ React.createElement(
+      Text,
+      {
+        style: [
+          styles.featureLabel,
+          { color: f.included ? colors.foreground : colors.foregroundMuted },
+          !f.included && styles.featureExcluded
+        ],
+        allowFontScaling: true
+      },
+      f.label
+    )))) : null,
+    ctaLabel ? /* @__PURE__ */ React.createElement(
+      Button,
+      {
+        label: ctaLabel,
+        variant: highlighted ? "primary" : "secondary",
+        fullWidth: true,
+        onPress: onCtaPress,
+        style: styles.cta
+      }
+    ) : null,
+    footnote ? /* @__PURE__ */ React.createElement(Text, { style: [styles.footnote, { color: colors.foregroundMuted }], allowFontScaling: true }, footnote) : null
+  );
+}
+var styles = StyleSheet.create({
+  card: {
+    borderRadius: RADIUS.md,
+    padding: s(16),
+    gap: vs(8)
+  },
+  header: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: s(8)
+  },
+  name: {
+    fontFamily: "Sohne-SemiBold",
+    fontSize: ms(16),
+    lineHeight: mvs(20)
+  },
+  priceRow: {
+    flexDirection: "row",
+    alignItems: "baseline",
+    gap: s(3)
+  },
+  price: {
+    fontFamily: "Sohne-Bold",
+    fontSize: ms(28),
+    lineHeight: mvs(32),
+    letterSpacing: -0.5
+  },
+  period: {
+    fontFamily: "Sohne-Regular",
+    fontSize: ms(13),
+    lineHeight: mvs(16)
+  },
+  description: {
+    fontFamily: "Sohne-Regular",
+    fontSize: ms(13),
+    lineHeight: mvs(18)
+  },
+  features: {
+    gap: vs(6),
+    marginTop: vs(2)
+  },
+  featureRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: s(6)
+  },
+  featureLabel: {
+    flex: 1,
+    fontFamily: "Sohne-Regular",
+    fontSize: ms(13),
+    lineHeight: mvs(18)
+  },
+  featureExcluded: {
+    textDecorationLine: "line-through"
+  },
+  cta: {
+    marginTop: vs(2)
+  },
+  footnote: {
+    fontFamily: "Sohne-Regular",
+    fontSize: ms(11),
+    lineHeight: mvs(14),
+    textAlign: "center"
+  }
+});
+
+export { PricingCard };

package/dist/chunk-4K625MVM.mjs

@@ -0,0 +1,142 @@
+import { selectionAsync } from './chunk-EJ7ZPXOH.mjs';
+import { SPRINGS } from './chunk-DVK4G2GT.mjs';
+import { renderIcon } from './chunk-T7XZ7H7Y.mjs';
+import { useTheme } from './chunk-SOYNZDVY.mjs';
+import { s } from './chunk-2CE3TQVY.mjs';
+import React, { useEffect } from 'react';
+import { StyleSheet, View, TouchableOpacity } from 'react-native';
+import Animated, { useSharedValue, withSpring, useAnimatedStyle, interpolateColor } from 'react-native-reanimated';
+
+function Dot({ active, size, activeColor, inactiveColor, onPress, index, total }) {
+  const progress = useSharedValue(active ? 1 : 0);
+  useEffect(() => {
+    progress.value = withSpring(active ? 1 : 0, SPRINGS.glide);
+  }, [active, progress]);
+  const animatedStyle = useAnimatedStyle(() => ({
+    width: size + progress.value * size * 1.5,
+    backgroundColor: interpolateColor(progress.value, [0, 1], [inactiveColor, activeColor])
+  }));
+  const dot = /* @__PURE__ */ React.createElement(Animated.View, { style: [{ height: size, borderRadius: size / 2 }, animatedStyle] });
+  if (!onPress) return dot;
+  const handlePress = () => {
+    selectionAsync();
+    onPress();
+  };
+  return /* @__PURE__ */ React.createElement(
+    TouchableOpacity,
+    {
+      onPress: handlePress,
+      activeOpacity: 0.7,
+      touchSoundDisabled: true,
+      accessibilityRole: "button",
+      accessibilityLabel: `Page ${index + 1} of ${total}${active ? ", current page" : ""}`,
+      hitSlop: { top: 8, bottom: 8, left: 4, right: 4 }
+    },
+    dot
+  );
+}
+function PagerDots({
+  count,
+  activeIndex,
+  onDotPress,
+  showControls = false,
+  dotSize = 8,
+  spacing = 8,
+  activeColor,
+  inactiveColor,
+  style
+}) {
+  const { colors } = useTheme();
+  const resolvedActive = activeColor ?? colors.primary;
+  const resolvedInactive = inactiveColor ?? colors.border;
+  const size = s(dotSize);
+  const hasControls = showControls !== false;
+  const canGoPrev = activeIndex > 0;
+  const canGoNext = activeIndex < count - 1;
+  const handlePrevious = () => {
+    if (!canGoPrev) return;
+    selectionAsync();
+    if (typeof showControls === "object" && showControls.onPrevious) {
+      showControls.onPrevious();
+    } else if (onDotPress) {
+      onDotPress(activeIndex - 1);
+    }
+  };
+  const handleNext = () => {
+    if (!canGoNext) return;
+    selectionAsync();
+    if (typeof showControls === "object" && showControls.onNext) {
+      showControls.onNext();
+    } else if (onDotPress) {
+      onDotPress(activeIndex + 1);
+    }
+  };
+  return /* @__PURE__ */ React.createElement(
+    View,
+    {
+      style: [styles.container, { gap: s(spacing) }, style],
+      accessibilityRole: "adjustable",
+      accessibilityLabel: `Page ${activeIndex + 1} of ${count}`
+    },
+    hasControls && /* @__PURE__ */ React.createElement(
+      TouchableOpacity,
+      {
+        onPress: handlePrevious,
+        disabled: !canGoPrev,
+        activeOpacity: 0.7,
+        touchSoundDisabled: true,
+        accessibilityRole: "button",
+        accessibilityLabel: "Previous page",
+        hitSlop: { top: 8, bottom: 8, left: 8, right: 8 },
+        style: [styles.controlBtn, !canGoPrev && styles.controlBtnDisabled]
+      },
+      renderIcon("chevron-left", s(18), canGoPrev ? colors.foreground : colors.foregroundMuted)
+    ),
+    /* @__PURE__ */ React.createElement(View, { style: [styles.dotsRow, { gap: s(spacing) }] }, Array.from({ length: count }).map((_, i) => /* @__PURE__ */ React.createElement(
+      Dot,
+      {
+        key: i,
+        active: i === activeIndex,
+        size,
+        activeColor: resolvedActive,
+        inactiveColor: resolvedInactive,
+        index: i,
+        total: count,
+        onPress: onDotPress ? () => onDotPress(i) : void 0
+      }
+    ))),
+    hasControls && /* @__PURE__ */ React.createElement(
+      TouchableOpacity,
+      {
+        onPress: handleNext,
+        disabled: !canGoNext,
+        activeOpacity: 0.7,
+        touchSoundDisabled: true,
+        accessibilityRole: "button",
+        accessibilityLabel: "Next page",
+        hitSlop: { top: 8, bottom: 8, left: 8, right: 8 },
+        style: [styles.controlBtn, !canGoNext && styles.controlBtnDisabled]
+      },
+      renderIcon("chevron-right", s(18), canGoNext ? colors.foreground : colors.foregroundMuted)
+    )
+  );
+}
+var styles = StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  dotsRow: {
+    flexDirection: "row",
+    alignItems: "center"
+  },
+  controlBtn: {
+    padding: s(4)
+  },
+  controlBtnDisabled: {
+    opacity: 0.3
+  }
+});
+
+export { PagerDots };

package/dist/{chunk-MN7OG7IY.mjs → chunk-6OAZJ577.mjs}

@@ -1,4 +1,4 @@
-import { Button } from './chunk-CRYBX2CM.mjs';
+import { Button } from './chunk-2TFTAWVJ.mjs';
 import { renderIcon } from './chunk-T7XZ7H7Y.mjs';
 import { useTheme } from './chunk-SOYNZDVY.mjs';
 import { s, vs, mvs, ms } from './chunk-2CE3TQVY.mjs';
@@ -47,9 +47,12 @@ var styles = StyleSheet.create({
     justifyContent: "center",
     borderWidth: 1,
     borderStyle: "dashed",
-    borderRadius: ms(12)
+    borderRadius: ms(12),
+    paddingBottom: vs(32)
+  },
+  containerCompact: {
+    paddingBottom: vs(20)
   },
-  containerCompact: {},
   iconWrapper: {
     width: s(80),
     height: s(80),
@@ -88,7 +91,6 @@ var styles = StyleSheet.create({
   },
   action: {
     marginTop: vs(8),
-    marginBottom: s(32),
     paddingHorizontal: s(32)
   }
 });

package/dist/{chunk-L7E7TVEZ.mjs → chunk-756RAKE4.mjs}

@@ -1,6 +1,6 @@
-import { useColorTransition } from './chunk-7H2OR44A.mjs';
+import { useColorTransition } from './chunk-26BCI223.mjs';
+import { TIMINGS } from './chunk-DVK4G2GT.mjs';
 import { renderIcon } from './chunk-T7XZ7H7Y.mjs';
-import { TIMINGS } from './chunk-5IKW3VNC.mjs';
 import { useTheme } from './chunk-SOYNZDVY.mjs';
 import { ms, s, vs } from './chunk-2CE3TQVY.mjs';
 import React, { useState } from 'react';

package/dist/{chunk-HSPSMN6U.mjs → chunk-7QHVVCB3.mjs}

@@ -1,5 +1,5 @@
-import { Button } from './chunk-CRYBX2CM.mjs';
-import { impactMedium, notificationSuccess, selectionAsync } from './chunk-RTC3CFXF.mjs';
+import { Button } from './chunk-2TFTAWVJ.mjs';
+import { impactMedium, notificationSuccess, selectionAsync } from './chunk-EJ7ZPXOH.mjs';
 import { useTheme } from './chunk-SOYNZDVY.mjs';
 import { vs, mvs, ms, s } from './chunk-2CE3TQVY.mjs';
 import React, { useRef, useEffect } from 'react';

package/dist/{chunk-URLL5JBR.mjs → chunk-A3A6KNQN.mjs}

@@ -1,6 +1,6 @@
-import { usePressScale } from './chunk-QCNARS3X.mjs';
-import { selectionAsync } from './chunk-RTC3CFXF.mjs';
-import { PRESS_SCALE } from './chunk-5IKW3VNC.mjs';
+import { usePressScale } from './chunk-YNROWHQJ.mjs';
+import { selectionAsync } from './chunk-EJ7ZPXOH.mjs';
+import { PRESS_SCALE } from './chunk-DVK4G2GT.mjs';
 import { useTheme } from './chunk-SOYNZDVY.mjs';
 import { ms, vs, s } from './chunk-2CE3TQVY.mjs';
 import React, { useState, useRef } from 'react';

package/dist/chunk-AJ7ZDNBT.mjs

@@ -0,0 +1,120 @@
+import { TIMINGS } from './chunk-DVK4G2GT.mjs';
+import { RADIUS } from './chunk-QY3X2UYR.mjs';
+import { useTheme } from './chunk-SOYNZDVY.mjs';
+import { vs, s } from './chunk-2CE3TQVY.mjs';
+import React, { useState, useEffect } from 'react';
+import { StyleSheet, View } from 'react-native';
+import Animated, { useSharedValue, withRepeat, withTiming, Easing, useAnimatedStyle } from 'react-native-reanimated';
+import { LinearGradient } from 'expo-linear-gradient';
+
+function Skeleton({
+  width = "100%",
+  height = 16,
+  borderRadius = 6,
+  preset = "base",
+  diameter = 40,
+  style
+}) {
+  const { colors, colorScheme } = useTheme();
+  const shimmer = useSharedValue(0);
+  const [containerWidth, setContainerWidth] = useState(300);
+  const shimmerHighlight = colorScheme === "dark" ? "rgba(255,255,255,0.08)" : "rgba(255,255,255,0.7)";
+  useEffect(() => {
+    shimmer.value = withRepeat(
+      withTiming(1, { duration: TIMINGS.shimmer.duration, easing: Easing.linear }),
+      -1,
+      false
+    );
+  }, [shimmer]);
+  const shimmerStyle = useAnimatedStyle(() => ({
+    transform: [{ translateX: -containerWidth + shimmer.value * (containerWidth * 2) }]
+  }));
+  const resolvedWidth = preset === "circle" ? s(diameter) : preset === "text" ? "60%" : width;
+  const resolvedHeight = preset === "circle" ? s(diameter) : preset === "text" ? 14 : height;
+  const resolvedRadius = preset === "circle" ? 9999 : preset === "text" ? 4 : borderRadius;
+  return /* @__PURE__ */ React.createElement(
+    View,
+    {
+      style: [
+        styles.base,
+        { width: resolvedWidth, height: resolvedHeight, borderRadius: resolvedRadius, backgroundColor: colors.surface },
+        style
+      ],
+      onLayout: (e) => setContainerWidth(e.nativeEvent.layout.width),
+      accessibilityRole: "progressbar",
+      accessibilityLabel: "Loading",
+      accessibilityState: { busy: true }
+    },
+    /* @__PURE__ */ React.createElement(Animated.View, { style: [StyleSheet.absoluteFill, shimmerStyle] }, /* @__PURE__ */ React.createElement(
+      LinearGradient,
+      {
+        colors: ["transparent", shimmerHighlight, "transparent"],
+        start: { x: 0, y: 0 },
+        end: { x: 1, y: 0 },
+        style: StyleSheet.absoluteFill
+      }
+    ))
+  );
+}
+var aspectRatioMap = {
+  "1:1": 1,
+  "4:3": 3 / 4,
+  "16:9": 9 / 16,
+  "4:5": 5 / 4,
+  "3:2": 2 / 3
+};
+function MediaCardSkeleton({ aspectRatio = "4:3", showSubtitle = true, style }) {
+  const ratio = aspectRatioMap[aspectRatio];
+  return /* @__PURE__ */ React.createElement(View, { style }, /* @__PURE__ */ React.createElement(View, { style: { paddingTop: `${ratio * 100}%` } }, /* @__PURE__ */ React.createElement(View, { style: StyleSheet.absoluteFill }, /* @__PURE__ */ React.createElement(Skeleton, { width: "100%", height: void 0, style: skeletonStyles.fill, borderRadius: RADIUS.md }))), /* @__PURE__ */ React.createElement(View, { style: skeletonStyles.meta }, /* @__PURE__ */ React.createElement(Skeleton, { width: "70%", height: vs(14), borderRadius: RADIUS.xs }), showSubtitle ? /* @__PURE__ */ React.createElement(Skeleton, { width: "45%", height: vs(12), borderRadius: RADIUS.xs }) : null));
+}
+function ListItemSkeleton({ showAvatar = true, showSubtitle = true, style }) {
+  return /* @__PURE__ */ React.createElement(View, { style: [skeletonStyles.row, style] }, showAvatar ? /* @__PURE__ */ React.createElement(Skeleton, { preset: "circle", diameter: 40 }) : null, /* @__PURE__ */ React.createElement(View, { style: skeletonStyles.rowText }, /* @__PURE__ */ React.createElement(Skeleton, { width: "60%", height: vs(14), borderRadius: RADIUS.xs }), showSubtitle ? /* @__PURE__ */ React.createElement(Skeleton, { width: "40%", height: vs(12), borderRadius: RADIUS.xs }) : null));
+}
+function ListSkeleton({
+  count = 6,
+  columns = 1,
+  gap = 12,
+  aspectRatio = "4:3",
+  showAvatar = true,
+  style
+}) {
+  if (columns <= 1) {
+    return /* @__PURE__ */ React.createElement(View, { style: [{ gap: vs(gap) }, style] }, Array.from({ length: count }).map((_, i) => /* @__PURE__ */ React.createElement(ListItemSkeleton, { key: i, showAvatar })));
+  }
+  const widthPct = `${100 / columns}%`;
+  return /* @__PURE__ */ React.createElement(View, { style: [skeletonStyles.grid, { marginHorizontal: -s(gap) / 2 }, style] }, Array.from({ length: count }).map((_, i) => /* @__PURE__ */ React.createElement(View, { key: i, style: { width: widthPct, paddingHorizontal: s(gap) / 2, marginBottom: vs(gap) } }, /* @__PURE__ */ React.createElement(MediaCardSkeleton, { aspectRatio }))));
+}
+Skeleton.MediaCard = MediaCardSkeleton;
+Skeleton.ListItem = ListItemSkeleton;
+Skeleton.List = ListSkeleton;
+var styles = StyleSheet.create({
+  base: {
+    overflow: "hidden"
+  }
+});
+var skeletonStyles = StyleSheet.create({
+  grid: {
+    flexDirection: "row",
+    flexWrap: "wrap"
+  },
+  fill: {
+    width: "100%",
+    height: "100%"
+  },
+  meta: {
+    paddingTop: vs(8),
+    gap: vs(6)
+  },
+  row: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: s(12),
+    paddingVertical: vs(8)
+  },
+  rowText: {
+    flex: 1,
+    gap: vs(6)
+  }
+});
+
+export { Skeleton };

package/dist/{chunk-FTLJOUOQ.mjs → chunk-AV4EMIRH.mjs}

@@ -1,12 +1,11 @@
-import { useColorTransition } from './chunk-7H2OR44A.mjs';
-import { usePressScale } from './chunk-QCNARS3X.mjs';
-import { selectionAsync } from './chunk-RTC3CFXF.mjs';
-import { PRESS_SCALE, EASINGS, TIMINGS } from './chunk-5IKW3VNC.mjs';
+import { PressableButton } from './chunk-3DKJ2GIC.mjs';
+import { selectionAsync } from './chunk-EJ7ZPXOH.mjs';
+import { COLOR_TRANSITION, OPACITY_TRANSITION } from './chunk-DVK4G2GT.mjs';
 import { useTheme } from './chunk-SOYNZDVY.mjs';
 import { mvs, ms, vs, s } from './chunk-2CE3TQVY.mjs';
 import React from 'react';
-import { StyleSheet, TouchableOpacity, View, Text } from 'react-native';
-import Animated, { useAnimatedStyle, interpolateColor, withTiming } from 'react-native-reanimated';
+import { StyleSheet, View, Text } from 'react-native';
+import { EaseView } from 'react-native-ease';
 
 function Checkbox({
   checked = false,
@@ -17,40 +16,38 @@ function Checkbox({
   accessibilityLabel
 }) {
   const { colors } = useTheme();
-  const { animatedStyle: scaleStyle, onPressIn, onPressOut } = usePressScale({
-    pressScale: PRESS_SCALE.button,
-    disabled
-  });
-  const progress = useColorTransition(checked);
-  const boxStyle = useAnimatedStyle(() => ({
-    borderColor: interpolateColor(progress.value, [0, 1], [colors.border, colors.primary]),
-    backgroundColor: interpolateColor(progress.value, [0, 1], ["transparent", colors.primary])
-  }));
-  const checkStyle = useAnimatedStyle(() => ({
-    opacity: withTiming(checked ? 1 : 0, { duration: TIMINGS.state.duration, easing: EASINGS.standard })
-  }));
+  const handlePress = () => {
+    selectionAsync();
+    onCheckedChange?.(!checked);
+  };
   return (
     // AUDIT FIX: opacity was applied only to the box, leaving the label at full
     // opacity when disabled — a contradictory visual signal. Now the entire row
     // dims uniformly so label and control communicate the same disabled state.
     /* @__PURE__ */ React.createElement(
-      TouchableOpacity,
+      PressableButton,
       {
         style: [styles.row, disabled && styles.rowDisabled, style],
-        onPress: () => {
-          selectionAsync();
-          onCheckedChange?.(!checked);
-        },
-        onPressIn,
-        onPressOut,
-        disabled,
-        activeOpacity: 1,
+        onPress: handlePress,
+        enabled: !disabled,
+        rippleColor: "transparent",
         touchSoundDisabled: true,
         accessibilityRole: "checkbox",
         accessibilityLabel: accessibilityLabel ?? label,
         accessibilityState: { checked, disabled: !!disabled }
       },
-      /* @__PURE__ */ React.createElement(Animated.View, { style: scaleStyle }, /* @__PURE__ */ React.createElement(Animated.View, { style: [styles.box, boxStyle] }, /* @__PURE__ */ React.createElement(Animated.View, { style: checkStyle }, /* @__PURE__ */ React.createElement(View, { style: [styles.checkmark, { borderColor: colors.primaryForeground }] })))),
+      /* @__PURE__ */ React.createElement(
+        EaseView,
+        {
+          style: styles.box,
+          animate: {
+            borderColor: checked ? colors.primary : colors.border,
+            backgroundColor: checked ? colors.primary : "transparent"
+          },
+          transition: COLOR_TRANSITION
+        },
+        /* @__PURE__ */ React.createElement(EaseView, { animate: { opacity: checked ? 1 : 0 }, transition: OPACITY_TRANSITION }, /* @__PURE__ */ React.createElement(View, { style: [styles.checkmark, { borderColor: colors.primaryForeground }] }))
+      ),
       label ? /* @__PURE__ */ React.createElement(
         Text,
         {