@retray-dev/ui-kit 7.0.1 → 9.0.0

package/dist/{chunk-YZJAFS4P.mjs → chunk-X4G6APW6.mjs}

@@ -1,12 +1,12 @@
-import { useColorTransition } from './chunk-7H2OR44A.mjs';
-import { usePressScale } from './chunk-QCNARS3X.mjs';
-import { selectionAsync } from './chunk-RTC3CFXF.mjs';
-import { PRESS_SCALE, SPRINGS } from './chunk-5IKW3VNC.mjs';
+import { usePressScale } from './chunk-YNROWHQJ.mjs';
+import { selectionAsync } from './chunk-EJ7ZPXOH.mjs';
+import { PRESS_SCALE, COLOR_TRANSITION, SPRING_ELASTIC } from './chunk-DVK4G2GT.mjs';
 import { useTheme } from './chunk-SOYNZDVY.mjs';
 import { mvs, ms, s, vs } from './chunk-2CE3TQVY.mjs';
-import React, { useEffect } from 'react';
+import React from 'react';
 import { StyleSheet, View, TouchableOpacity, Text } from 'react-native';
-import Animated, { useSharedValue, withSpring, useAnimatedStyle, interpolateColor } from 'react-native-reanimated';
+import Animated from 'react-native-reanimated';
+import { EaseView } from 'react-native-ease';
 
 function RadioItem({
   option,
@@ -18,18 +18,6 @@ function RadioItem({
     pressScale: PRESS_SCALE.button,
     disabled: option.disabled
   });
-  const colorProgress = useColorTransition(selected);
-  const dotScale = useSharedValue(selected ? 1 : 0);
-  useEffect(() => {
-    dotScale.value = withSpring(selected ? 1 : 0, SPRINGS.elastic);
-  }, [selected, dotScale]);
-  const radioStyle = useAnimatedStyle(() => ({
-    borderColor: interpolateColor(colorProgress.value, [0, 1], [colors.border, colors.primary])
-  }));
-  const dotStyle = useAnimatedStyle(() => ({
-    transform: [{ scale: dotScale.value }],
-    opacity: dotScale.value
-  }));
   return (
     // AUDIT FIX: opacity was applied only to the radio circle, leaving the label
     // at full opacity when disabled. The whole row now dims uniformly so users
@@ -53,7 +41,22 @@ function RadioItem({
         accessibilityLabel: option.label,
         accessibilityState: { checked: selected, disabled: !!option.disabled }
       },
-      /* @__PURE__ */ React.createElement(Animated.View, { style: scaleStyle }, /* @__PURE__ */ React.createElement(Animated.View, { style: [styles.radio, radioStyle] }, /* @__PURE__ */ React.createElement(Animated.View, { style: [styles.dot, { backgroundColor: colors.primary }, dotStyle] }))),
+      /* @__PURE__ */ React.createElement(Animated.View, { style: scaleStyle }, /* @__PURE__ */ React.createElement(
+        EaseView,
+        {
+          style: styles.radio,
+          animate: { borderColor: selected ? colors.primary : colors.border },
+          transition: COLOR_TRANSITION
+        },
+        /* @__PURE__ */ React.createElement(
+          EaseView,
+          {
+            style: [styles.dot, { backgroundColor: colors.primary }],
+            animate: { scale: selected ? 1 : 0, opacity: selected ? 1 : 0 },
+            transition: SPRING_ELASTIC
+          }
+        )
+      )),
       /* @__PURE__ */ React.createElement(
         Text,
         {

package/dist/chunk-Y6FXYEAI.mjs

@@ -0,0 +1,8 @@
+var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
+  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
+}) : x)(function(x) {
+  if (typeof require !== "undefined") return require.apply(this, arguments);
+  throw Error('Dynamic require of "' + x + '" is not supported');
+});
+
+export { __require };

package/dist/chunk-YFZ3ELX5.mjs

@@ -0,0 +1,16 @@
+import { ToastProvider } from './chunk-2UYENBLV.mjs';
+import { ThemeProvider } from './chunk-SOYNZDVY.mjs';
+import React from 'react';
+import { StyleSheet } from 'react-native';
+import { SafeAreaProvider, initialWindowMetrics } from 'react-native-safe-area-context';
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
+import { BottomSheetModalProvider } from '@gorhom/bottom-sheet';
+
+function RetrayProvider({ children, theme, colorScheme = "system" }) {
+  return /* @__PURE__ */ React.createElement(SafeAreaProvider, { initialMetrics: initialWindowMetrics }, /* @__PURE__ */ React.createElement(GestureHandlerRootView, { style: styles.root }, /* @__PURE__ */ React.createElement(ThemeProvider, { theme, colorScheme }, /* @__PURE__ */ React.createElement(BottomSheetModalProvider, null, /* @__PURE__ */ React.createElement(ToastProvider, null, children)))));
+}
+var styles = StyleSheet.create({
+  root: { flex: 1 }
+});
+
+export { RetrayProvider };

package/dist/{chunk-QCNARS3X.mjs → chunk-YNROWHQJ.mjs}

@@ -1,4 +1,4 @@
-import { PRESS_SCALE, SPRINGS } from './chunk-5IKW3VNC.mjs';
+import { PRESS_SCALE, SPRINGS } from './chunk-DVK4G2GT.mjs';
 import { useState, useCallback } from 'react';
 import { Platform } from 'react-native';
 import { useSharedValue, withSpring, useAnimatedStyle } from 'react-native-reanimated';

package/dist/chunk-Z4BVUWW6.mjs

@@ -0,0 +1,196 @@
+import { PagerDots } from './chunk-4K625MVM.mjs';
+import { renderIcon } from './chunk-T7XZ7H7Y.mjs';
+import { s, vs } from './chunk-2CE3TQVY.mjs';
+import React, { useState, useCallback } from 'react';
+import { StyleSheet, useWindowDimensions, Modal, ScrollView, TouchableOpacity, View } from 'react-native';
+import { Gesture, GestureHandlerRootView, GestureDetector } from 'react-native-gesture-handler';
+import Animated, { useSharedValue, runOnJS, withTiming, useAnimatedStyle } from 'react-native-reanimated';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+var MAX_SCALE = 3;
+var DOUBLE_TAP_SCALE = 2.5;
+function ZoomableImage({ source, width, height, onZoomChange }) {
+  const scale = useSharedValue(1);
+  const savedScale = useSharedValue(1);
+  const translateX = useSharedValue(0);
+  const translateY = useSharedValue(0);
+  const savedX = useSharedValue(0);
+  const savedY = useSharedValue(0);
+  const reportZoom = useCallback((zoomed) => onZoomChange(zoomed), [onZoomChange]);
+  const reset = () => {
+    "worklet";
+    scale.value = withTiming(1);
+    savedScale.value = 1;
+    translateX.value = withTiming(0);
+    translateY.value = withTiming(0);
+    savedX.value = 0;
+    savedY.value = 0;
+    runOnJS(reportZoom)(false);
+  };
+  const pinch = Gesture.Pinch().onUpdate((e) => {
+    scale.value = Math.max(1, Math.min(savedScale.value * e.scale, MAX_SCALE));
+  }).onEnd(() => {
+    savedScale.value = scale.value;
+    if (scale.value <= 1) {
+      reset();
+    } else {
+      runOnJS(reportZoom)(true);
+    }
+  });
+  const pan = Gesture.Pan().onUpdate((e) => {
+    if (scale.value <= 1) return;
+    translateX.value = savedX.value + e.translationX;
+    translateY.value = savedY.value + e.translationY;
+  }).onEnd(() => {
+    savedX.value = translateX.value;
+    savedY.value = translateY.value;
+  });
+  const doubleTap = Gesture.Tap().numberOfTaps(2).onEnd(() => {
+    if (scale.value > 1) {
+      reset();
+    } else {
+      scale.value = withTiming(DOUBLE_TAP_SCALE);
+      savedScale.value = DOUBLE_TAP_SCALE;
+      runOnJS(reportZoom)(true);
+    }
+  });
+  const composed = Gesture.Exclusive(doubleTap, Gesture.Simultaneous(pinch, pan));
+  const animatedStyle = useAnimatedStyle(() => ({
+    transform: [
+      { translateX: translateX.value },
+      { translateY: translateY.value },
+      { scale: scale.value }
+    ]
+  }));
+  return /* @__PURE__ */ React.createElement(GestureDetector, { gesture: composed }, /* @__PURE__ */ React.createElement(Animated.View, { style: [{ width, height }, styles.imageWrap] }, /* @__PURE__ */ React.createElement(
+    Animated.Image,
+    {
+      source,
+      style: [{ width, height }, animatedStyle],
+      resizeMode: "contain"
+    }
+  )));
+}
+function ImageViewer({ images, visible, onClose, initialIndex = 0 }) {
+  const { width, height } = useWindowDimensions();
+  const insets = useSafeAreaInsets();
+  const [index, setIndex] = useState(initialIndex);
+  const [pagingEnabled, setPagingEnabled] = useState(true);
+  const scrollRef = React.useRef(null);
+  React.useEffect(() => {
+    if (!visible) return;
+    const handle = requestAnimationFrame(() => {
+      setIndex(initialIndex);
+      setPagingEnabled(true);
+      scrollRef.current?.scrollTo({ x: initialIndex * width, animated: false });
+    });
+    return () => cancelAnimationFrame(handle);
+  }, [visible, initialIndex, width]);
+  const dragY = useSharedValue(0);
+  const DISMISS_THRESHOLD = height * 0.18;
+  const closeViewer = useCallback(() => onClose(), [onClose]);
+  const swipeDown = Gesture.Pan().enabled(pagingEnabled).activeOffsetY(12).failOffsetX([-16, 16]).onUpdate((e) => {
+    dragY.value = Math.max(0, e.translationY);
+  }).onEnd((e) => {
+    if (e.translationY > DISMISS_THRESHOLD || e.velocityY > 800) {
+      runOnJS(closeViewer)();
+    } else {
+      dragY.value = withTiming(0);
+    }
+  });
+  React.useEffect(() => {
+    if (visible) dragY.value = 0;
+  }, [visible, dragY]);
+  const dismissStyle = useAnimatedStyle(() => ({
+    transform: [{ translateY: dragY.value }]
+  }));
+  const backdropStyle = useAnimatedStyle(() => ({
+    opacity: 1 - Math.min(dragY.value / (height * 0.5), 0.85)
+  }));
+  const onMomentumEnd = (e) => {
+    const page = Math.round(e.nativeEvent.contentOffset.x / width);
+    setIndex(page);
+  };
+  const goTo = (page) => {
+    scrollRef.current?.scrollTo({ x: page * width, animated: true });
+    setIndex(page);
+  };
+  return /* @__PURE__ */ React.createElement(Modal, { visible, transparent: false, animationType: "fade", onRequestClose: onClose, statusBarTranslucent: true }, /* @__PURE__ */ React.createElement(GestureHandlerRootView, { style: styles.root }, /* @__PURE__ */ React.createElement(Animated.View, { style: [styles.backdrop, backdropStyle], pointerEvents: "none" }), /* @__PURE__ */ React.createElement(Animated.View, { style: [styles.container, dismissStyle] }, /* @__PURE__ */ React.createElement(GestureDetector, { gesture: swipeDown }, /* @__PURE__ */ React.createElement(Animated.View, { style: styles.root }, /* @__PURE__ */ React.createElement(
+    ScrollView,
+    {
+      ref: scrollRef,
+      horizontal: true,
+      pagingEnabled: true,
+      scrollEnabled: pagingEnabled,
+      showsHorizontalScrollIndicator: false,
+      onMomentumScrollEnd: onMomentumEnd,
+      bounces: false
+    },
+    images.map((source, i) => /* @__PURE__ */ React.createElement(
+      ZoomableImage,
+      {
+        key: i,
+        source,
+        width,
+        height,
+        onZoomChange: (zoomed) => setPagingEnabled(!zoomed)
+      }
+    ))
+  ))), /* @__PURE__ */ React.createElement(
+    TouchableOpacity,
+    {
+      style: [styles.closeButton, { top: insets.top + vs(8) }],
+      onPress: onClose,
+      activeOpacity: 0.7,
+      touchSoundDisabled: true,
+      accessibilityRole: "button",
+      accessibilityLabel: "Close",
+      hitSlop: { top: 12, bottom: 12, left: 12, right: 12 }
+    },
+    renderIcon("x", 26, "#fff")
+  ), images.length > 1 ? /* @__PURE__ */ React.createElement(View, { style: [styles.dots, { bottom: insets.bottom + vs(16) }], pointerEvents: "box-none" }, /* @__PURE__ */ React.createElement(
+    PagerDots,
+    {
+      count: images.length,
+      activeIndex: index,
+      onDotPress: goTo,
+      activeColor: "#fff",
+      inactiveColor: "rgba(255,255,255,0.4)"
+    }
+  )) : null)));
+}
+var styles = StyleSheet.create({
+  root: {
+    flex: 1
+  },
+  container: {
+    flex: 1
+  },
+  backdrop: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: "#000"
+  },
+  imageWrap: {
+    alignItems: "center",
+    justifyContent: "center",
+    overflow: "hidden"
+  },
+  closeButton: {
+    position: "absolute",
+    right: s(12),
+    width: s(40),
+    height: s(40),
+    borderRadius: s(20),
+    backgroundColor: "rgba(0,0,0,0.4)",
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  dots: {
+    position: "absolute",
+    left: 0,
+    right: 0,
+    alignItems: "center"
+  }
+});
+
+export { ImageViewer };

package/dist/{chunk-GPOUINK5.mjs → chunk-ZJKGQMYH.mjs}

@@ -1,13 +1,11 @@
-import { renderIcon } from './chunk-T7XZ7H7Y.mjs';
-import { usePressScale } from './chunk-QCNARS3X.mjs';
-import { selectionAsync } from './chunk-RTC3CFXF.mjs';
-import { SPRINGS, PRESS_SCALE } from './chunk-5IKW3VNC.mjs';
+import { PressableRow } from './chunk-3DKJ2GIC.mjs';
+import { selectionAsync } from './chunk-EJ7ZPXOH.mjs';
 import { RADIUS } from './chunk-QY3X2UYR.mjs';
+import { renderIcon } from './chunk-T7XZ7H7Y.mjs';
 import { useTheme } from './chunk-SOYNZDVY.mjs';
 import { vs, ms, s } from './chunk-2CE3TQVY.mjs';
 import React from 'react';
-import { StyleSheet, TouchableOpacity, View, Text } from 'react-native';
-import Animated from 'react-native-reanimated';
+import { StyleSheet, View, Text } from 'react-native';
 import { Entypo } from '@expo/vector-icons';
 
 function MenuItemBase({
@@ -27,12 +25,6 @@ function MenuItemBase({
   accessibilityLabel
 }) {
   const { colors } = useTheme();
-  const { animatedStyle, onPressIn, onPressOut, hoverHandlers } = usePressScale({
-    pressScale: PRESS_SCALE.row,
-    pressInSpring: SPRINGS.surfacePressIn,
-    pressOutSpring: SPRINGS.surfacePressOut,
-    disabled
-  });
   const handlePress = () => {
     selectionAsync();
     onPress();
@@ -50,16 +42,15 @@ function MenuItemBase({
     elevation: 2
   } : {};
   const a11yLabel = accessibilityLabel ?? (subtitle ? `${label}. ${subtitle}` : label);
-  return /* @__PURE__ */ React.createElement(Animated.View, { style: [animatedStyle, disabled && styles.disabled], ...hoverHandlers }, /* @__PURE__ */ React.createElement(
-    TouchableOpacity,
+  return /* @__PURE__ */ React.createElement(View, { style: disabled && styles.disabled }, /* @__PURE__ */ React.createElement(
+    PressableRow,
     {
       style: [styles.container, cardStyle, style],
       onPress: handlePress,
-      onPressIn,
-      onPressOut,
-      disabled,
-      activeOpacity: 1,
+      enabled: !disabled,
+      rippleColor: "transparent",
       touchSoundDisabled: true,
+      activateOnHover: true,
       accessibilityRole: "button",
       accessibilityLabel: a11yLabel,
       accessibilityState: { disabled }
@@ -92,15 +83,7 @@ function MenuItemBase({
       },
       rightRender
     ) : showChevron ? /* @__PURE__ */ React.createElement(Entypo, { name: "chevron-right", size: 18, color: colors.foregroundMuted }) : null
-  ), showSeparator ? /* @__PURE__ */ React.createElement(
-    View,
-    {
-      style: [
-        styles.separator,
-        { backgroundColor: colors.separator }
-      ]
-    }
-  ) : null);
+  ), showSeparator ? /* @__PURE__ */ React.createElement(View, { style: [styles.separator, { backgroundColor: colors.separator }] }) : null);
 }
 var MenuItem = React.memo(MenuItemBase);
 var styles = StyleSheet.create({

package/dist/index-wt-orHUi.d.mts

@@ -0,0 +1,85 @@
+import React from 'react';
+
+type ThemeColors = {
+    background: string;
+    foreground: string;
+    card: string;
+    primary: string;
+    primaryForeground: string;
+    border: string;
+    destructive: string;
+    destructiveForeground: string;
+    success: string;
+    successForeground: string;
+    warning: string;
+    warningForeground: string;
+    /** Backdrop/overlay color. Default: 'rgba(0,0,0,0.45)' */
+    overlay?: string;
+    /** Color accent (e.g. Airbnb coral). Default: same as primary */
+    accent?: string;
+    /** Text color on accent background. Default: same as primaryForeground */
+    accentForeground?: string;
+};
+type ResolvedColors = ThemeColors & {
+    foregroundSubtle: string;
+    foregroundMuted: string;
+    surface: string;
+    surfaceStrong: string;
+    destructiveTint: string;
+    destructiveBorder: string;
+    successTint: string;
+    successBorder: string;
+    warningTint: string;
+    warningBorder: string;
+    overlay: string;
+    accentResolved: string;
+    accentForegroundResolved: string;
+    ring: string;
+    input: string;
+    separator: string;
+};
+type Theme = {
+    light?: Partial<ThemeColors>;
+    dark?: Partial<ThemeColors>;
+};
+type ColorScheme = 'light' | 'dark' | 'system';
+type ThemeContextValue = {
+    colors: ResolvedColors;
+    colorScheme: 'light' | 'dark';
+};
+
+interface RetrayProviderProps {
+    children: React.ReactNode;
+    /** Optional per-scheme token overrides — forwarded to `ThemeProvider`. */
+    theme?: Theme;
+    /**
+     * - `'system'` (default): auto-detects device setting.
+     * - `'light'` / `'dark'`: forces a specific scheme.
+     */
+    colorScheme?: ColorScheme;
+}
+/**
+ * All-in-one provider that wires every provider the UI kit needs, in the one
+ * correct order:
+ *
+ * `SafeAreaProvider` → `GestureHandlerRootView` → `ThemeProvider` →
+ * `BottomSheetModalProvider` → `ToastProvider`
+ *
+ * Use this at your app root instead of nesting the five providers by hand — it
+ * removes an entire class of provider-order bugs. The individual providers stay
+ * exported for consumers who need a custom tree.
+ *
+ * @example
+ * import { RetrayProvider } from '@retray-dev/ui-kit'
+ *
+ * export default function App() {
+ *   return (
+ *     <RetrayProvider colorScheme="system">
+ *       <RootNavigator />
+ *     </RetrayProvider>
+ *   )
+ * }
+ */
+declare function RetrayProvider({ children, theme, colorScheme }: RetrayProviderProps): React.JSX.Element;
+
+export { type ColorScheme as C, type ResolvedColors as R, type Theme as T, type ThemeContextValue as a, type ThemeColors as b, RetrayProvider as c, type RetrayProviderProps as d };

package/dist/index-wt-orHUi.d.ts

@@ -0,0 +1,85 @@
+import React from 'react';
+
+type ThemeColors = {
+    background: string;
+    foreground: string;
+    card: string;
+    primary: string;
+    primaryForeground: string;
+    border: string;
+    destructive: string;
+    destructiveForeground: string;
+    success: string;
+    successForeground: string;
+    warning: string;
+    warningForeground: string;
+    /** Backdrop/overlay color. Default: 'rgba(0,0,0,0.45)' */
+    overlay?: string;
+    /** Color accent (e.g. Airbnb coral). Default: same as primary */
+    accent?: string;
+    /** Text color on accent background. Default: same as primaryForeground */
+    accentForeground?: string;
+};
+type ResolvedColors = ThemeColors & {
+    foregroundSubtle: string;
+    foregroundMuted: string;
+    surface: string;
+    surfaceStrong: string;
+    destructiveTint: string;
+    destructiveBorder: string;
+    successTint: string;
+    successBorder: string;
+    warningTint: string;
+    warningBorder: string;
+    overlay: string;
+    accentResolved: string;
+    accentForegroundResolved: string;
+    ring: string;
+    input: string;
+    separator: string;
+};
+type Theme = {
+    light?: Partial<ThemeColors>;
+    dark?: Partial<ThemeColors>;
+};
+type ColorScheme = 'light' | 'dark' | 'system';
+type ThemeContextValue = {
+    colors: ResolvedColors;
+    colorScheme: 'light' | 'dark';
+};
+
+interface RetrayProviderProps {
+    children: React.ReactNode;
+    /** Optional per-scheme token overrides — forwarded to `ThemeProvider`. */
+    theme?: Theme;
+    /**
+     * - `'system'` (default): auto-detects device setting.
+     * - `'light'` / `'dark'`: forces a specific scheme.
+     */
+    colorScheme?: ColorScheme;
+}
+/**
+ * All-in-one provider that wires every provider the UI kit needs, in the one
+ * correct order:
+ *
+ * `SafeAreaProvider` → `GestureHandlerRootView` → `ThemeProvider` →
+ * `BottomSheetModalProvider` → `ToastProvider`
+ *
+ * Use this at your app root instead of nesting the five providers by hand — it
+ * removes an entire class of provider-order bugs. The individual providers stay
+ * exported for consumers who need a custom tree.
+ *
+ * @example
+ * import { RetrayProvider } from '@retray-dev/ui-kit'
+ *
+ * export default function App() {
+ *   return (
+ *     <RetrayProvider colorScheme="system">
+ *       <RootNavigator />
+ *     </RetrayProvider>
+ *   )
+ * }
+ */
+declare function RetrayProvider({ children, theme, colorScheme }: RetrayProviderProps): React.JSX.Element;
+
+export { type ColorScheme as C, type ResolvedColors as R, type Theme as T, type ThemeContextValue as a, type ThemeColors as b, RetrayProvider as c, type RetrayProviderProps as d };

package/dist/index.d.mts

@@ -1,4 +1,6 @@
 import React from 'react';
+import { T as Theme, C as ColorScheme, a as ThemeContextValue, b as ThemeColors, R as ResolvedColors } from './index-wt-orHUi.mjs';
+export { c as RetrayProvider, d as RetrayProviderProps } from './index-wt-orHUi.mjs';
 export { Button, ButtonProps, ButtonSize, ButtonVariant } from './Button.mjs';
 export { ButtonGroup, ButtonGroupProps } from './ButtonGroup.mjs';
 export { IconButton, IconButtonProps, IconButtonSize, IconButtonVariant } from './IconButton.mjs';
@@ -24,7 +26,7 @@ export { Slider, SliderProps } from './Slider.mjs';
 export { Sheet, SheetProps } from './Sheet.mjs';
 export { Select, SelectOption, SelectProps } from './Select.mjs';
 export { ToastProvider, useToast } from './Toast.mjs';
-export { CurrencyInput, CurrencyInput as CurrencyInputLarge, CurrencyInputProps } from './CurrencyInput.mjs';
+export { CurrencyInput, CurrencyInputProps } from './CurrencyInput.mjs';
 export { CurrencyDisplay, CurrencyDisplayProps, CurrencyDisplayVariant } from './CurrencyDisplay.mjs';
 export { ListItem, ListItemProps } from './ListItem.mjs';
 export { ListGroup, ListGroupFooter, ListGroupFooterProps, ListGroupHeader, ListGroupHeaderProps, ListGroupProps, ListGroupVariant } from './ListGroup.mjs';
@@ -33,65 +35,24 @@ export { MenuGroup, MenuGroupFooter, MenuGroupFooterProps, MenuGroupHeader, Menu
 export { Chip, ChipGroup, ChipGroupProps, ChipOption, ChipProps } from './Chip.mjs';
 export { ConfirmDialog, ConfirmDialogProps } from './ConfirmDialog.mjs';
 export { LabelValue, LabelValueProps } from './LabelValue.mjs';
-export { MonthPicker, MonthPickerProps, MonthPickerValue } from './MonthPicker.mjs';
+export { MonthPicker, MonthPickerProps, MonthPickerValue, dateToMonthPickerValue, monthPickerValueToDate } from './MonthPicker.mjs';
 export { MediaCard, MediaCardAspectRatio, MediaCardProps } from './MediaCard.mjs';
 export { CategoryItem, CategoryStrip, CategoryStripProps } from './CategoryStrip.mjs';
 export { Pressable, PressableProps } from './Pressable.mjs';
 export { DetailRow, DetailRowLabelWeight, DetailRowProps, DetailRowSeparator } from './DetailRow.mjs';
 export { Form, FormField, FormFieldProps, FormFooter, FormFooterProps, FormProps, FormSection, FormSectionProps } from './Form.mjs';
 export { VirtualList, VirtualListItem, VirtualListProps } from './VirtualList.mjs';
+export { ErrorBoundary, ErrorBoundaryProps, ErrorFallbackProps } from './ErrorBoundary.mjs';
+export { PagerDots, PagerDotsProps } from './PagerDots.mjs';
+export { AppHeader, AppHeaderProps } from './AppHeader.mjs';
+export { SelectableGrid, SelectableGridItem, SelectableGridProps } from './SelectableGrid.mjs';
+export { PricingCard, PricingCardProps, PricingFeature } from './PricingCard.mjs';
+export { TabBar, TabBarItem, TabBarProps } from './TabBar.mjs';
+export { ImageViewer, ImageViewerProps } from './ImageViewer.mjs';
 export { BottomSheetModalProvider, BottomSheetTextInput as SheetTextInput } from '@gorhom/bottom-sheet';
 export { toast } from 'sonner-native';
 import 'react-native';
 
-type ThemeColors = {
-    background: string;
-    foreground: string;
-    card: string;
-    primary: string;
-    primaryForeground: string;
-    border: string;
-    destructive: string;
-    destructiveForeground: string;
-    success: string;
-    successForeground: string;
-    warning: string;
-    warningForeground: string;
-    /** Backdrop/overlay color. Default: 'rgba(0,0,0,0.45)' */
-    overlay?: string;
-    /** Color accent (e.g. Airbnb coral). Default: same as primary */
-    accent?: string;
-    /** Text color on accent background. Default: same as primaryForeground */
-    accentForeground?: string;
-};
-type ResolvedColors = ThemeColors & {
-    foregroundSubtle: string;
-    foregroundMuted: string;
-    surface: string;
-    surfaceStrong: string;
-    destructiveTint: string;
-    destructiveBorder: string;
-    successTint: string;
-    successBorder: string;
-    warningTint: string;
-    warningBorder: string;
-    overlay: string;
-    accentResolved: string;
-    accentForegroundResolved: string;
-    ring: string;
-    input: string;
-    separator: string;
-};
-type Theme = {
-    light?: Partial<ThemeColors>;
-    dark?: Partial<ThemeColors>;
-};
-type ColorScheme = 'light' | 'dark' | 'system';
-type ThemeContextValue = {
-    colors: ResolvedColors;
-    colorScheme: 'light' | 'dark';
-};
-
 interface ThemeProviderProps {
     children: React.ReactNode;
     /**
@@ -150,6 +111,53 @@ declare function getResponsiveFontSize(text: string, maxSize: number, steps?: {
     subtract: number;
 }[]): number;
 
+/**
+ * Light selection feedback — checkboxes, switches, toggles, pickers.
+ */
+declare function selectionAsync(): void;
+/**
+ * Light impact — cards, surfaces, light interactions.
+ */
+declare function impactLight(): void;
+/**
+ * Medium impact — buttons, primary actions.
+ */
+declare function impactMedium(): void;
+/**
+ * Heavy impact — confirmations, important actions.
+ */
+declare function impactHeavy(): void;
+/**
+ * Success notification — confirmations, completed actions.
+ */
+declare function notificationSuccess(): void;
+/**
+ * Error notification — failed actions, errors.
+ */
+declare function notificationError(): void;
+/**
+ * Warning notification — caution states.
+ */
+declare function notificationWarning(): void;
+/**
+ * Rich haptic presets from Pulsar — enhanced feedback for special interactions.
+ * Falls back to basic expo-haptics on Expo Go or unsupported devices.
+ */
+declare const richHaptics: {
+    /** Hammer strike — strong confirmation feedback. */
+    hammer: () => void;
+    /** Pulse — rhythmic feedback for toggles or state changes. */
+    pulse: () => void;
+    /** Buzz — continuous vibration for attention. */
+    buzz: () => void;
+    /** Flick — crisp click feedback. */
+    flick: () => void;
+    /** Soft — gentle, subtle feedback. */
+    soft: () => void;
+    /** Rigid — firm, solid feedback. */
+    rigid: () => void;
+};
+
 declare const SPACING: {
     readonly xxs: 2;
     readonly xs: 4;
@@ -353,4 +361,4 @@ type RadiusKey = keyof Radius;
 type Typography = typeof TYPOGRAPHY;
 type TypographyKey = keyof Typography;
 
-export { BREAKPOINTS, type ColorScheme, ICON_SIZES, Icon, type IconFamily, type IconProps, type IconSize, type IconSizeKey, RADIUS, type Radius, type RadiusKey, type ResolvedColors, SHADOWS, SPACING, type Spacing, type SpacingKey, TYPOGRAPHY, type Theme, type ThemeColors, ThemeProvider, type ThemeProviderProps, type Typography, type TypographyKey, configureIconFamilies, defaultDark, defaultLight, deriveColors, getResponsiveFontSize, renderIcon, useTheme };
+export { BREAKPOINTS, ColorScheme, ICON_SIZES, Icon, type IconFamily, type IconProps, type IconSize, type IconSizeKey, RADIUS, type Radius, type RadiusKey, ResolvedColors, SHADOWS, SPACING, type Spacing, type SpacingKey, TYPOGRAPHY, Theme, ThemeColors, ThemeProvider, type ThemeProviderProps, type Typography, type TypographyKey, configureIconFamilies, defaultDark, defaultLight, deriveColors, getResponsiveFontSize, impactHeavy, impactLight, impactMedium, notificationError, notificationSuccess, notificationWarning, renderIcon, richHaptics, selectionAsync, useTheme };