@retray-dev/ui-kit 4.0.0 → 5.2.0

package/dist/index.mjs

@@ -1,5 +1,5 @@
 import React25, { createContext, useMemo, useContext, useRef, useState, useEffect, useCallback } from 'react';
-import { Platform, StyleSheet, useColorScheme, Animated, TouchableOpacity, ActivityIndicator, Text, View, TextInput, Image, Easing, Modal, Pressable } from 'react-native';
+import { Platform, StyleSheet, useColorScheme, Animated, TouchableOpacity, ActivityIndicator, Text, View, TextInput, Image, Easing, Modal, ScrollView, Pressable } from 'react-native';
 import { verticalScale, scale, moderateScale, moderateVerticalScale } from 'react-native-size-matters';
 import AntDesign from '@expo/vector-icons/AntDesign';
 import Entypo from '@expo/vector-icons/Entypo';
@@ -7,11 +7,11 @@ import Feather from '@expo/vector-icons/Feather';
 import FontAwesome5 from '@expo/vector-icons/FontAwesome5';
 import MaterialIcons from '@expo/vector-icons/MaterialIcons';
 import Ionicons from '@expo/vector-icons/Ionicons';
-import { AntDesign as AntDesign$1, Entypo as Entypo$1, Feather as Feather$1, FontAwesome5 as FontAwesome5$1, MaterialIcons as MaterialIcons$1 } from '@expo/vector-icons';
+import { AntDesign as AntDesign$1, Feather as Feather$1, Entypo as Entypo$1, FontAwesome5 as FontAwesome5$1, MaterialIcons as MaterialIcons$1 } from '@expo/vector-icons';
 import { LinearGradient } from 'expo-linear-gradient';
 import Animated11, { useSharedValue, useDerivedValue, withTiming, Easing as Easing$1, useAnimatedStyle, withSpring } from 'react-native-reanimated';
 import RNSlider from '@react-native-community/slider';
-import { BottomSheetModal, BottomSheetView, BottomSheetBackdrop } from '@gorhom/bottom-sheet';
+import { BottomSheetModal, BottomSheetView, BottomSheetScrollView, BottomSheetBackdrop } from '@gorhom/bottom-sheet';
 export { BottomSheetModalProvider } from '@gorhom/bottom-sheet';
 import { Picker } from '@react-native-picker/picker';
 import { scheduleOnRN } from 'react-native-worklets';
@@ -20,61 +20,125 @@ import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 // src/theme/ThemeProvider.tsx
 
+// src/theme/colorUtils.ts
+function hexToRgb(hex) {
+  const clean = hex.replace("#", "");
+  const full = clean.length === 3 ? clean.split("").map((c) => c + c).join("") : clean;
+  if (full.length !== 6) return null;
+  return {
+    r: parseInt(full.slice(0, 2), 16),
+    g: parseInt(full.slice(2, 4), 16),
+    b: parseInt(full.slice(4, 6), 16)
+  };
+}
+function componentToHex(c) {
+  return Math.round(Math.max(0, Math.min(255, c))).toString(16).padStart(2, "0");
+}
+function rgbToHex(r, g, b) {
+  return `#${componentToHex(r)}${componentToHex(g)}${componentToHex(b)}`;
+}
+function withAlphaOnWhite(hex, alpha) {
+  const rgb = hexToRgb(hex);
+  if (!rgb) return hex;
+  const r = rgb.r * alpha + 255 * (1 - alpha);
+  const g = rgb.g * alpha + 255 * (1 - alpha);
+  const b = rgb.b * alpha + 255 * (1 - alpha);
+  return rgbToHex(r, g, b);
+}
+function withAlphaOnDark(hex, alpha, bgHex = "#0f0f0f") {
+  const rgb = hexToRgb(hex);
+  const bg = hexToRgb(bgHex);
+  if (!rgb || !bg) return hex;
+  const r = rgb.r * alpha + bg.r * (1 - alpha);
+  const g = rgb.g * alpha + bg.g * (1 - alpha);
+  const b = rgb.b * alpha + bg.b * (1 - alpha);
+  return rgbToHex(r, g, b);
+}
+function mixWithBackground(fgHex, bgHex, opacity) {
+  const fg = hexToRgb(fgHex);
+  const bg = hexToRgb(bgHex);
+  if (!fg || !bg) return fgHex;
+  const r = fg.r * opacity + bg.r * (1 - opacity);
+  const g = fg.g * opacity + bg.g * (1 - opacity);
+  const b = fg.b * opacity + bg.b * (1 - opacity);
+  return rgbToHex(r, g, b);
+}
+function lighten(hex, amount) {
+  return withAlphaOnWhite(hex, 1 - amount);
+}
+function darken(hex, amount) {
+  const rgb = hexToRgb(hex);
+  if (!rgb) return hex;
+  return rgbToHex(rgb.r * (1 - amount), rgb.g * (1 - amount), rgb.b * (1 - amount));
+}
+
 // src/theme/colors.ts
 var defaultLight = {
   background: "#ffffff",
-  foreground: "#171717",
+  foreground: "#222222",
+  // Airbnb ink — deep near-black, never pure black
   card: "#ffffff",
-  cardForeground: "#171717",
   primary: "#1a1a1a",
+  // Near-black primary — clean, premium default
   primaryForeground: "#ffffff",
-  secondary: "#f1f1f1",
-  secondaryForeground: "#171717",
-  muted: "#f1f1f1",
-  mutedForeground: "#a2a2a2",
-  accent: "#e4e4e4",
-  accentForeground: "#171717",
-  destructive: "#ef4444",
+  border: "#dddddd",
+  // Airbnb hairline — light, airy
+  destructive: "#e53935",
   destructiveForeground: "#ffffff",
-  border: "#e5e5e5",
-  input: "#e5e5e5",
-  ring: "#1a1a1a",
   success: "#1a7a45",
   successForeground: "#ffffff",
-  destructiveTint: "#fff5f5",
-  destructiveBorder: "#fecaca",
-  successTint: "#f0fdf4",
-  successBorder: "#bbf7d0"
+  warning: "#e67e00",
+  warningForeground: "#ffffff"
 };
 var defaultDark = {
   background: "#0f0f0f",
   foreground: "#fafafa",
   card: "#1c1c1c",
-  cardForeground: "#fafafa",
   primary: "#fafafa",
   primaryForeground: "#0f0f0f",
-  secondary: "#272727",
-  secondaryForeground: "#fafafa",
-  muted: "#272727",
-  mutedForeground: "#9a9a9a",
-  accent: "#2e2e2e",
-  accentForeground: "#fafafa",
-  destructive: "#dc2626",
-  destructiveForeground: "#ffffff",
   border: "#303030",
-  input: "#2a2a2a",
-  ring: "#fafafa",
-  success: "#166534",
+  destructive: "#ef5350",
+  destructiveForeground: "#ffffff",
+  success: "#2e7d52",
   successForeground: "#ffffff",
-  destructiveTint: "#3b0a0a",
-  destructiveBorder: "#7f1d1d",
-  successTint: "#052e16",
-  successBorder: "#166534"
+  warning: "#f57c00",
+  warningForeground: "#ffffff"
 };
+function deriveColors(t, scheme) {
+  const dark = scheme === "dark";
+  const bg = t.background;
+  const foregroundSubtle = mixWithBackground(t.foreground, bg, 0.55);
+  const foregroundMuted = mixWithBackground(t.foreground, bg, 0.38);
+  const surface = dark ? lighten(bg, -0.06) : darken(bg, 0.04);
+  const surfaceStrong = dark ? lighten(bg, -0.12) : darken(bg, 0.08);
+  const destructiveTint = dark ? withAlphaOnDark(t.destructive, 0.15, bg) : withAlphaOnWhite(t.destructive, 0.08);
+  const destructiveBorder = dark ? withAlphaOnDark(t.destructive, 0.45, bg) : withAlphaOnWhite(t.destructive, 0.3);
+  const successTint = dark ? withAlphaOnDark(t.success, 0.15, bg) : withAlphaOnWhite(t.success, 0.08);
+  const successBorder = dark ? withAlphaOnDark(t.success, 0.45, bg) : withAlphaOnWhite(t.success, 0.3);
+  const warningTint = dark ? withAlphaOnDark(t.warning, 0.15, bg) : withAlphaOnWhite(t.warning, 0.08);
+  const warningBorder = dark ? withAlphaOnDark(t.warning, 0.45, bg) : withAlphaOnWhite(t.warning, 0.3);
+  return {
+    ...t,
+    foregroundSubtle,
+    foregroundMuted,
+    surface,
+    surfaceStrong,
+    destructiveTint,
+    destructiveBorder,
+    successTint,
+    successBorder,
+    warningTint,
+    warningBorder,
+    ring: t.primary,
+    // focus ring always = primary
+    input: t.border
+    // input border always = border
+  };
+}
 
 // src/theme/ThemeProvider.tsx
 var ThemeContext = createContext({
-  colors: defaultLight,
+  colors: deriveColors(defaultLight, "light"),
   colorScheme: "light"
 });
 function ThemeProvider({ children, theme, colorScheme = "system" }) {
@@ -83,7 +147,8 @@ function ThemeProvider({ children, theme, colorScheme = "system" }) {
   const colors = useMemo(() => {
     const base = resolvedScheme === "dark" ? defaultDark : defaultLight;
     const override = resolvedScheme === "dark" ? theme?.dark : theme?.light;
-    return override ? { ...base, ...override } : base;
+    const merged = override ? { ...base, ...override } : base;
+    return deriveColors(merged, resolvedScheme);
   }, [resolvedScheme, theme]);
   return /* @__PURE__ */ React25.createElement(ThemeContext.Provider, { value: { colors, colorScheme: resolvedScheme } }, children);
 }
@@ -163,17 +228,194 @@ function renderIcon(name, size, color) {
   return React25.createElement(Icon, { name, size, color });
 }
 
+// src/tokens.ts
+var SPACING = {
+  xxs: 2,
+  xs: 4,
+  sm: 8,
+  md: 12,
+  base: 16,
+  lg: 24,
+  xl: 32,
+  xxl: 48,
+  section: 64
+};
+var ICON_SIZES = {
+  sm: 14,
+  md: 18,
+  lg: 22,
+  xl: 28,
+  "2xl": 32
+};
+var RADIUS = {
+  none: 0,
+  xs: 4,
+  sm: 8,
+  md: 14,
+  lg: 20,
+  xl: 32,
+  full: 9999
+};
+var SHADOWS = {
+  sm: {
+    shadowColor: "#000",
+    shadowOffset: { width: 0, height: 1 },
+    shadowOpacity: 0.06,
+    shadowRadius: 4,
+    elevation: 2
+  },
+  md: {
+    shadowColor: "#000",
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.1,
+    shadowRadius: 8,
+    elevation: 5
+  },
+  lg: {
+    shadowColor: "#000",
+    shadowOffset: { width: 0, height: 6 },
+    shadowOpacity: 0.16,
+    shadowRadius: 16,
+    elevation: 10
+  },
+  xl: {
+    shadowColor: "#000",
+    shadowOffset: { width: 0, height: 12 },
+    shadowOpacity: 0.24,
+    shadowRadius: 24,
+    elevation: 18
+  }
+};
+var BREAKPOINTS = {
+  wide: 700
+};
+var TYPOGRAPHY = {
+  "display-hero": {
+    fontFamily: "Poppins-Bold",
+    fontSize: 64,
+    fontWeight: "700",
+    lineHeight: 70,
+    letterSpacing: -1
+  },
+  "display-xl": {
+    fontFamily: "Poppins-Bold",
+    fontSize: 28,
+    fontWeight: "700",
+    lineHeight: 40,
+    letterSpacing: 0
+  },
+  "display-lg": {
+    fontFamily: "Poppins-Medium",
+    fontSize: 22,
+    fontWeight: "500",
+    lineHeight: 26,
+    letterSpacing: -0.44
+  },
+  "display-md": {
+    fontFamily: "Poppins-Bold",
+    fontSize: 21,
+    fontWeight: "700",
+    lineHeight: 30,
+    letterSpacing: 0
+  },
+  "display-sm": {
+    fontFamily: "Poppins-SemiBold",
+    fontSize: 20,
+    fontWeight: "600",
+    lineHeight: 24,
+    letterSpacing: -0.18
+  },
+  "title-md": {
+    fontFamily: "Poppins-SemiBold",
+    fontSize: 16,
+    fontWeight: "600",
+    lineHeight: 20,
+    letterSpacing: 0
+  },
+  "title-sm": {
+    fontFamily: "Poppins-Medium",
+    fontSize: 16,
+    fontWeight: "500",
+    lineHeight: 20,
+    letterSpacing: 0
+  },
+  "body-md": {
+    fontFamily: "Poppins-Regular",
+    fontSize: 16,
+    fontWeight: "400",
+    lineHeight: 24,
+    letterSpacing: 0
+  },
+  "body-sm": {
+    fontFamily: "Poppins-Regular",
+    fontSize: 14,
+    fontWeight: "400",
+    lineHeight: 20,
+    letterSpacing: 0
+  },
+  caption: {
+    fontFamily: "Poppins-Medium",
+    fontSize: 14,
+    fontWeight: "500",
+    lineHeight: 18,
+    letterSpacing: 0
+  },
+  "caption-sm": {
+    fontFamily: "Poppins-Regular",
+    fontSize: 13,
+    fontWeight: "400",
+    lineHeight: 16,
+    letterSpacing: 0
+  },
+  "badge-text": {
+    fontFamily: "Poppins-SemiBold",
+    fontSize: 11,
+    fontWeight: "600",
+    lineHeight: 13,
+    letterSpacing: 0
+  },
+  "micro-label": {
+    fontFamily: "Poppins-Bold",
+    fontSize: 12,
+    fontWeight: "700",
+    lineHeight: 16,
+    letterSpacing: 0
+  },
+  "uppercase-tag": {
+    fontFamily: "Poppins-Bold",
+    fontSize: 8,
+    fontWeight: "700",
+    lineHeight: 10,
+    letterSpacing: 0.32,
+    textTransform: "uppercase"
+  },
+  "button-lg": {
+    fontFamily: "Poppins-Medium",
+    fontSize: 16,
+    fontWeight: "500",
+    lineHeight: 20,
+    letterSpacing: 0
+  },
+  "button-sm": {
+    fontFamily: "Poppins-Medium",
+    fontSize: 14,
+    fontWeight: "500",
+    lineHeight: 18,
+    letterSpacing: 0
+  }
+};
+
 // src/components/Button/Button.tsx
 var nativeDriver = Platform.OS !== "web";
 var containerSizeStyles = {
-  sm: { paddingHorizontal: s(12), paddingVertical: vs(10), minHeight: 44 },
-  md: { paddingHorizontal: s(16), paddingVertical: vs(10), minHeight: 44 },
-  lg: { paddingHorizontal: s(20), paddingVertical: vs(12), minHeight: 48 }
+  sm: { paddingHorizontal: s(16), paddingVertical: vs(10), minHeight: 40 },
+  md: { paddingHorizontal: s(24), paddingVertical: vs(14), minHeight: 48 },
+  lg: { paddingHorizontal: s(28), paddingVertical: vs(16), minHeight: 56 }
 };
 var labelSizeStyles = {
-  sm: { fontSize: ms(13) },
-  md: { fontSize: ms(15) },
-  lg: { fontSize: ms(16) }
+  sm: { ...TYPOGRAPHY["button-sm"], fontSize: ms(TYPOGRAPHY["button-sm"].fontSize) },
+  md: { ...TYPOGRAPHY["button-lg"], fontSize: ms(TYPOGRAPHY["button-lg"].fontSize) },
+  lg: { ...TYPOGRAPHY["button-lg"], fontSize: ms(TYPOGRAPHY["button-lg"].fontSize + 1) }
 };
 var iconSizeMap = { sm: 16, md: 18, lg: 20 };
 function Button({
@@ -196,12 +438,7 @@ function Button({
   const scale2 = useRef(new Animated.Value(1)).current;
   const handlePressIn = () => {
     if (isDisabled) return;
-    Animated.spring(scale2, {
-      toValue: 0.95,
-      useNativeDriver: nativeDriver,
-      speed: 40,
-      bounciness: 0
-    }).start();
+    Animated.spring(scale2, { toValue: 0.95, useNativeDriver: nativeDriver, speed: 40, bounciness: 0 }).start();
   };
   const handlePressOut = () => {
     Animated.spring(scale2, { toValue: 1, useNativeDriver: nativeDriver, speed: 40, bounciness: 4 }).start();
@@ -212,20 +449,18 @@ function Button({
   };
   const containerVariantStyle = {
     primary: { backgroundColor: colors.primary },
-    secondary: { backgroundColor: colors.secondary },
-    outline: { backgroundColor: "transparent", borderWidth: 1.5, borderColor: colors.border },
-    ghost: { backgroundColor: "transparent" },
+    secondary: { backgroundColor: "transparent", borderWidth: 1.5, borderColor: colors.primary },
+    text: { backgroundColor: "transparent" },
     destructive: { backgroundColor: colors.destructive }
   }[variant];
   const labelVariantStyle = {
     primary: { color: colors.primaryForeground },
-    secondary: { color: colors.secondaryForeground },
-    outline: { color: colors.foreground },
-    ghost: { color: colors.foreground },
+    secondary: { color: colors.primary },
+    text: { color: colors.foreground },
     destructive: { color: colors.destructiveForeground }
   }[variant];
   const effectiveIcon = iconName ? renderIcon(iconName, iconSizeMap[size], iconColor ?? labelVariantStyle.color) : typeof icon === "function" ? icon({ label, size, variant }) : icon;
-  const spinnerColor = variant === "destructive" ? colors.destructiveForeground : variant === "primary" || variant === "secondary" ? colors.primaryForeground : colors.foreground;
+  const spinnerColor = variant === "destructive" ? colors.destructiveForeground : variant === "primary" ? colors.primaryForeground : colors.foreground;
   return /* @__PURE__ */ React25.createElement(Animated.View, { style: [fullWidth && styles.fullWidth, { transform: [{ scale: scale2 }] }] }, /* @__PURE__ */ React25.createElement(
     TouchableOpacity,
     {
@@ -245,12 +480,20 @@ function Button({
       onPressOut: handlePressOut,
       ...props
     },
-    loading ? /* @__PURE__ */ React25.createElement(ActivityIndicator, { size: "small", color: spinnerColor }) : /* @__PURE__ */ React25.createElement(React25.Fragment, null, effectiveIcon && iconPosition === "left" && /* @__PURE__ */ React25.createElement(React25.Fragment, null, effectiveIcon), /* @__PURE__ */ React25.createElement(Text, { style: [styles.label, labelVariantStyle, labelSizeStyles[size], effectiveIcon ? styles.labelWithIcon : void 0], allowFontScaling: true }, label), effectiveIcon && iconPosition === "right" && /* @__PURE__ */ React25.createElement(React25.Fragment, null, effectiveIcon))
+    loading ? /* @__PURE__ */ React25.createElement(ActivityIndicator, { size: "small", color: spinnerColor }) : /* @__PURE__ */ React25.createElement(React25.Fragment, null, effectiveIcon && iconPosition === "left" && /* @__PURE__ */ React25.createElement(React25.Fragment, null, effectiveIcon), /* @__PURE__ */ React25.createElement(
+      Text,
+      {
+        style: [styles.label, labelVariantStyle, labelSizeStyles[size], effectiveIcon ? styles.labelWithIcon : void 0],
+        allowFontScaling: true
+      },
+      label
+    ), effectiveIcon && iconPosition === "right" && /* @__PURE__ */ React25.createElement(React25.Fragment, null, effectiveIcon))
   ));
 }
 var styles = StyleSheet.create({
   base: {
-    borderRadius: 8,
+    borderRadius: RADIUS.xl,
+    // 32px — pill-shaped primary CTA (Airbnb spec)
     alignItems: "center",
     justifyContent: "center",
     flexDirection: "row"
@@ -259,18 +502,18 @@ var styles = StyleSheet.create({
     width: "100%"
   },
   disabled: {
-    opacity: 0.5
+    opacity: 0.45
   },
   label: {
-    fontFamily: "Poppins-SemiBold"
+    fontFamily: "Poppins-Medium"
   },
   labelWithIcon: {
-    marginHorizontal: s(8)
+    marginHorizontal: s(6)
   }
 });
 var nativeDriver2 = Platform.OS !== "web";
 var sizeMap = {
-  sm: { container: s(40), icon: 18 },
+  sm: { container: s(32), icon: 16 },
   md: { container: s(44), icon: 20 },
   lg: { container: s(52), icon: 24 }
 };
@@ -281,6 +524,7 @@ function IconButton({
   variant = "primary",
   size = "md",
   loading = false,
+  badge,
   disabled,
   style,
   onPress,
@@ -291,20 +535,10 @@ function IconButton({
   const scale2 = useRef(new Animated.Value(1)).current;
   const handlePressIn = () => {
     if (isDisabled) return;
-    Animated.spring(scale2, {
-      toValue: 0.95,
-      useNativeDriver: nativeDriver2,
-      speed: 40,
-      bounciness: 0
-    }).start();
+    Animated.spring(scale2, { toValue: 0.95, useNativeDriver: nativeDriver2, speed: 40, bounciness: 0 }).start();
   };
   const handlePressOut = () => {
-    Animated.spring(scale2, {
-      toValue: 1,
-      useNativeDriver: nativeDriver2,
-      speed: 40,
-      bounciness: 4
-    }).start();
+    Animated.spring(scale2, { toValue: 1, useNativeDriver: nativeDriver2, speed: 40, bounciness: 4 }).start();
   };
   const handlePress = (e) => {
     impactLight();
@@ -312,22 +546,25 @@ function IconButton({
   };
   const containerVariantStyle = {
     primary: { backgroundColor: colors.primary },
-    secondary: { backgroundColor: colors.secondary },
+    secondary: { backgroundColor: colors.surface },
     outline: { backgroundColor: "transparent", borderWidth: 1.5, borderColor: colors.border },
-    ghost: { backgroundColor: "transparent" },
+    text: { backgroundColor: "transparent" },
     destructive: { backgroundColor: colors.destructive }
   }[variant];
   const defaultIconColor = {
     primary: colors.primaryForeground,
-    secondary: colors.secondaryForeground,
+    secondary: colors.foreground,
     outline: colors.foreground,
-    ghost: colors.foreground,
+    text: colors.foreground,
     destructive: colors.destructiveForeground
   }[variant];
-  const spinnerColor = variant === "destructive" ? colors.destructiveForeground : variant === "primary" || variant === "secondary" ? colors.primaryForeground : colors.foreground;
+  const spinnerColor = variant === "destructive" ? colors.destructiveForeground : variant === "primary" ? colors.primaryForeground : colors.foreground;
   const { container: containerSize, icon: iconSize } = sizeMap[size];
   const resolvedIcon = iconName ? renderIcon(iconName, iconSize, iconColor ?? defaultIconColor) : icon;
-  return /* @__PURE__ */ React25.createElement(Animated.View, { style: { transform: [{ scale: scale2 }] } }, /* @__PURE__ */ React25.createElement(
+  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__ */ React25.createElement(Animated.View, { style: [styles2.wrapper, { transform: [{ scale: scale2 }] }] }, /* @__PURE__ */ React25.createElement(
     TouchableOpacity,
     {
       style: [
@@ -346,33 +583,93 @@ function IconButton({
       ...props
     },
     loading ? /* @__PURE__ */ React25.createElement(ActivityIndicator, { size: "small", color: spinnerColor }) : resolvedIcon
-  ));
+  ), showBadge && /* @__PURE__ */ React25.createElement(View, { style: [
+    styles2.badge,
+    { backgroundColor: colors.primary },
+    showCount ? styles2.badgeCount : styles2.badgeDot
+  ] }, showCount && /* @__PURE__ */ React25.createElement(Text, { style: [styles2.badgeText, { color: colors.primaryForeground }] }, badgeCount)));
 }
 var styles2 = StyleSheet.create({
+  wrapper: {
+    alignSelf: "flex-start"
+  },
   base: {
-    borderRadius: 999,
+    borderRadius: 9999,
     alignItems: "center",
     justifyContent: "center"
   },
   disabled: {
-    opacity: 0.5
+    opacity: 0.45
+  },
+  badge: {
+    position: "absolute",
+    top: -2,
+    right: -2,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  badgeDot: {
+    width: 8,
+    height: 8,
+    borderRadius: 9999
+  },
+  badgeCount: {
+    minWidth: 16,
+    height: 16,
+    borderRadius: 9999,
+    paddingHorizontal: 3
+  },
+  badgeText: {
+    fontFamily: "Poppins-Bold",
+    fontSize: ms(9),
+    lineHeight: 14
   }
 });
 var variantStyles = {
-  h1: { fontFamily: "Poppins-Bold", fontSize: ms(40), lineHeight: mvs(52) },
-  h2: { fontFamily: "Poppins-Bold", fontSize: ms(28), lineHeight: mvs(36) },
-  h3: { fontFamily: "Poppins-SemiBold", fontSize: ms(22), lineHeight: mvs(30) },
-  body: { fontFamily: "Poppins-Regular", fontSize: ms(17), lineHeight: mvs(26) },
-  caption: { fontFamily: "Poppins-Regular", fontSize: ms(13), lineHeight: mvs(20) },
-  label: { fontFamily: "Poppins-Medium", fontSize: ms(15), lineHeight: mvs(22) }
+  "display-hero": { ...TYPOGRAPHY["display-hero"], fontSize: ms(TYPOGRAPHY["display-hero"].fontSize), lineHeight: mvs(TYPOGRAPHY["display-hero"].lineHeight) },
+  "display-xl": { ...TYPOGRAPHY["display-xl"], fontSize: ms(TYPOGRAPHY["display-xl"].fontSize), lineHeight: mvs(TYPOGRAPHY["display-xl"].lineHeight) },
+  "display-lg": { ...TYPOGRAPHY["display-lg"], fontSize: ms(TYPOGRAPHY["display-lg"].fontSize), lineHeight: mvs(TYPOGRAPHY["display-lg"].lineHeight) },
+  "display-md": { ...TYPOGRAPHY["display-md"], fontSize: ms(TYPOGRAPHY["display-md"].fontSize), lineHeight: mvs(TYPOGRAPHY["display-md"].lineHeight) },
+  "display-sm": { ...TYPOGRAPHY["display-sm"], fontSize: ms(TYPOGRAPHY["display-sm"].fontSize), lineHeight: mvs(TYPOGRAPHY["display-sm"].lineHeight) },
+  "title-md": { ...TYPOGRAPHY["title-md"], fontSize: ms(TYPOGRAPHY["title-md"].fontSize), lineHeight: mvs(TYPOGRAPHY["title-md"].lineHeight) },
+  "title-sm": { ...TYPOGRAPHY["title-sm"], fontSize: ms(TYPOGRAPHY["title-sm"].fontSize), lineHeight: mvs(TYPOGRAPHY["title-sm"].lineHeight) },
+  "body-md": { ...TYPOGRAPHY["body-md"], fontSize: ms(TYPOGRAPHY["body-md"].fontSize), lineHeight: mvs(TYPOGRAPHY["body-md"].lineHeight) },
+  "body-sm": { ...TYPOGRAPHY["body-sm"], fontSize: ms(TYPOGRAPHY["body-sm"].fontSize), lineHeight: mvs(TYPOGRAPHY["body-sm"].lineHeight) },
+  caption: { ...TYPOGRAPHY["caption"], fontSize: ms(TYPOGRAPHY["caption"].fontSize), lineHeight: mvs(TYPOGRAPHY["caption"].lineHeight) },
+  "caption-sm": { ...TYPOGRAPHY["caption-sm"], fontSize: ms(TYPOGRAPHY["caption-sm"].fontSize), lineHeight: mvs(TYPOGRAPHY["caption-sm"].lineHeight) },
+  "badge-text": { ...TYPOGRAPHY["badge-text"], fontSize: ms(TYPOGRAPHY["badge-text"].fontSize), lineHeight: mvs(TYPOGRAPHY["badge-text"].lineHeight) },
+  "micro-label": { ...TYPOGRAPHY["micro-label"], fontSize: ms(TYPOGRAPHY["micro-label"].fontSize), lineHeight: mvs(TYPOGRAPHY["micro-label"].lineHeight) },
+  "uppercase-tag": { ...TYPOGRAPHY["uppercase-tag"], fontSize: ms(TYPOGRAPHY["uppercase-tag"].fontSize), lineHeight: mvs(TYPOGRAPHY["uppercase-tag"].lineHeight) },
+  "button-lg": { ...TYPOGRAPHY["button-lg"], fontSize: ms(TYPOGRAPHY["button-lg"].fontSize), lineHeight: mvs(TYPOGRAPHY["button-lg"].lineHeight) },
+  "button-sm": { ...TYPOGRAPHY["button-sm"], fontSize: ms(TYPOGRAPHY["button-sm"].fontSize), lineHeight: mvs(TYPOGRAPHY["button-sm"].lineHeight) }
 };
-function Text2({ variant = "body", color, style, children, ...props }) {
+var defaultColorVariant = {
+  "display-hero": "foreground",
+  "display-xl": "foreground",
+  "display-lg": "foreground",
+  "display-md": "foreground",
+  "display-sm": "foreground",
+  "title-md": "foreground",
+  "title-sm": "foreground",
+  "body-md": "foregroundSubtle",
+  // running text — slightly softer
+  "body-sm": "foregroundSubtle",
+  caption: "foregroundMuted",
+  "caption-sm": "foregroundMuted",
+  "badge-text": "foreground",
+  "micro-label": "foreground",
+  "uppercase-tag": "foregroundMuted",
+  "button-lg": "foreground",
+  "button-sm": "foreground"
+};
+function Text3({ variant = "body-md", color, style, children, ...props }) {
   const { colors } = useTheme();
-  const defaultColor = variant === "caption" ? colors.mutedForeground : colors.foreground;
+  const colorKey = defaultColorVariant[variant] ?? "foreground";
+  const resolvedColor = color ?? colors[colorKey];
   return /* @__PURE__ */ React25.createElement(
     Text,
     {
-      style: [variantStyles[variant], { color: color ?? defaultColor }, style],
+      style: [variantStyles[variant], { color: resolvedColor }, style],
       allowFontScaling: true,
       ...props
     },
@@ -386,21 +683,21 @@ function Input({ label, error, hint, prefix, suffix, prefixStyle, suffixStyle, p
   const [showPassword, setShowPassword] = useState(false);
   const isPassword = type === "password";
   const effectiveSecure = isPassword ? !showPassword : secureTextEntry;
-  const effectivePrefix = prefixIcon ? renderIcon(prefixIcon, 20, prefixIconColor ?? colors.mutedForeground) : prefix;
-  const effectiveSuffix = isPassword && !suffix && !suffixIcon ? /* @__PURE__ */ React25.createElement(TouchableOpacity, { onPress: () => setShowPassword(!showPassword), style: styles3.passwordToggle, activeOpacity: 0.6 }, /* @__PURE__ */ React25.createElement(AntDesign$1, { name: showPassword ? "eye" : "eye-invisible", size: 20, color: colors.mutedForeground })) : suffixIcon ? renderIcon(suffixIcon, 20, suffixIconColor ?? colors.mutedForeground) : suffix;
+  const effectivePrefix = prefixIcon ? renderIcon(prefixIcon, 20, prefixIconColor ?? colors.foregroundMuted) : prefix;
+  const effectiveSuffix = isPassword && !suffix && !suffixIcon ? /* @__PURE__ */ React25.createElement(TouchableOpacity, { onPress: () => setShowPassword(!showPassword), style: styles3.passwordToggle, activeOpacity: 0.6 }, /* @__PURE__ */ React25.createElement(AntDesign$1, { name: showPassword ? "eye" : "eye-invisible", size: 20, color: colors.foregroundMuted })) : suffixIcon ? renderIcon(suffixIcon, 20, suffixIconColor ?? colors.foregroundMuted) : suffix;
   return /* @__PURE__ */ React25.createElement(View, { style: [styles3.container, containerStyle] }, label ? /* @__PURE__ */ React25.createElement(Text, { style: [styles3.label, { color: colors.foreground }], allowFontScaling: true }, label) : null, /* @__PURE__ */ React25.createElement(
     View,
     {
       style: [
         styles3.inputWrapper,
         {
-          borderColor: error ? colors.destructive : focused ? colors.ring ?? colors.primary : colors.border,
+          borderColor: error ? colors.destructive : focused ? colors.primary : colors.border,
           backgroundColor: colors.background
         },
         inputWrapperStyle
       ]
     },
-    effectivePrefix ? typeof effectivePrefix === "string" ? /* @__PURE__ */ React25.createElement(Text, { style: [styles3.prefixText, { color: colors.mutedForeground }, prefixStyle], allowFontScaling: true }, effectivePrefix) : /* @__PURE__ */ React25.createElement(View, { style: styles3.prefixContainer }, effectivePrefix) : null,
+    effectivePrefix ? typeof effectivePrefix === "string" ? /* @__PURE__ */ React25.createElement(Text, { style: [styles3.prefixText, { color: colors.foregroundMuted }, prefixStyle], allowFontScaling: true }, effectivePrefix) : /* @__PURE__ */ React25.createElement(View, { style: styles3.prefixContainer }, effectivePrefix) : null,
     /* @__PURE__ */ React25.createElement(
       TextInput,
       {
@@ -420,14 +717,14 @@ function Input({ label, error, hint, prefix, suffix, prefixStyle, suffixStyle, p
           setFocused(false);
           onBlur?.(e);
         },
-        placeholderTextColor: colors.mutedForeground,
+        placeholderTextColor: colors.foregroundMuted,
         allowFontScaling: true,
         secureTextEntry: effectiveSecure,
         ...props
       }
     ),
-    effectiveSuffix ? typeof effectiveSuffix === "string" ? /* @__PURE__ */ React25.createElement(Text, { style: [styles3.suffixText, { color: colors.mutedForeground }, suffixStyle], allowFontScaling: true }, effectiveSuffix) : /* @__PURE__ */ React25.createElement(View, { style: styles3.suffixContainer }, effectiveSuffix) : null
-  ), error ? /* @__PURE__ */ React25.createElement(Text, { style: [styles3.helperText, { color: colors.destructive }], allowFontScaling: true }, error) : null, !error && hint ? /* @__PURE__ */ React25.createElement(Text, { style: [styles3.helperText, { color: colors.mutedForeground }], allowFontScaling: true }, hint) : null);
+    effectiveSuffix ? typeof effectiveSuffix === "string" ? /* @__PURE__ */ React25.createElement(Text, { style: [styles3.suffixText, { color: colors.foregroundMuted }, suffixStyle], allowFontScaling: true }, effectiveSuffix) : /* @__PURE__ */ React25.createElement(View, { style: styles3.suffixContainer }, effectiveSuffix) : null
+  ), error ? /* @__PURE__ */ React25.createElement(Text, { style: [styles3.helperText, { color: colors.destructive }], allowFontScaling: true }, error) : null, !error && hint ? /* @__PURE__ */ React25.createElement(Text, { style: [styles3.helperText, { color: colors.foregroundMuted }], allowFontScaling: true }, hint) : null);
 }
 var styles3 = StyleSheet.create({
   container: {
@@ -435,21 +732,24 @@ var styles3 = StyleSheet.create({
   },
   label: {
     fontFamily: "Poppins-Medium",
-    fontSize: ms(13)
+    fontSize: ms(14)
+    // caption size for input labels
   },
   inputWrapper: {
     flexDirection: "row",
     alignItems: "center",
-    borderWidth: 1,
-    borderRadius: ms(8),
+    borderWidth: 2,
+    borderRadius: 8,
     paddingHorizontal: s(14),
-    paddingVertical: vs(11)
+    paddingVertical: vs(11),
+    minHeight: 48
   },
   input: {
     fontFamily: "Poppins-Regular",
     flex: 1,
-    fontSize: ms(15),
-    paddingVertical: 0
+    fontSize: ms(16),
+    paddingVertical: vs(2),
+    includeFontPadding: false
   },
   prefixContainer: {
     marginRight: s(8)
@@ -495,23 +795,25 @@ function Badge({ label, children, variant = "default", size = "md", icon, iconNa
   const { colors } = useTheme();
   const containerStyle = {
     default: { backgroundColor: colors.primary },
-    secondary: { backgroundColor: colors.secondary },
+    secondary: { backgroundColor: colors.surface },
     destructive: { backgroundColor: colors.destructive },
     outline: { backgroundColor: "transparent", borderWidth: 1, borderColor: colors.border },
     success: { backgroundColor: colors.success },
-    warning: { backgroundColor: "#f59e0b" },
+    warning: { backgroundColor: colors.warning },
     successOutline: { backgroundColor: colors.successTint, borderWidth: 1, borderColor: colors.successBorder },
-    destructiveOutline: { backgroundColor: colors.destructiveTint, borderWidth: 1, borderColor: colors.destructiveBorder }
+    destructiveOutline: { backgroundColor: colors.destructiveTint, borderWidth: 1, borderColor: colors.destructiveBorder },
+    warningOutline: { backgroundColor: colors.warningTint, borderWidth: 1, borderColor: colors.warningBorder }
   }[variant];
   const textColor = {
     default: colors.primaryForeground,
-    secondary: colors.secondaryForeground,
+    secondary: colors.foreground,
     destructive: colors.destructiveForeground,
     outline: colors.foreground,
     success: colors.successForeground,
-    warning: "#ffffff",
+    warning: colors.warningForeground,
     successOutline: colors.success,
-    destructiveOutline: colors.destructive
+    destructiveOutline: colors.destructive,
+    warningOutline: colors.warning
   }[variant];
   const effectiveIcon = iconName ? renderIcon(iconName, sizeIconSize[size], iconColor ?? textColor) : icon;
   const content = children ?? label;
@@ -572,7 +874,7 @@ function Card({ children, variant = "elevated", onPress, style }) {
       elevation: 0
     },
     filled: {
-      backgroundColor: colors.accent,
+      backgroundColor: colors.surfaceStrong,
       borderColor: colors.border,
       shadowOpacity: 0,
       elevation: 0
@@ -599,11 +901,11 @@ function CardHeader({ children, style }) {
 }
 function CardTitle({ children, style }) {
   const { colors } = useTheme();
-  return /* @__PURE__ */ React25.createElement(Text, { style: [styles5.title, { color: colors.cardForeground }, style], allowFontScaling: true }, children);
+  return /* @__PURE__ */ React25.createElement(Text, { style: [styles5.title, { color: colors.foreground }, style], allowFontScaling: true }, children);
 }
 function CardDescription({ children, style }) {
   const { colors } = useTheme();
-  return /* @__PURE__ */ React25.createElement(Text, { style: [styles5.description, { color: colors.mutedForeground }, style], allowFontScaling: true }, children);
+  return /* @__PURE__ */ React25.createElement(Text, { style: [styles5.description, { color: colors.foregroundMuted }, style], allowFontScaling: true }, children);
 }
 function CardContent({ children, style }) {
   return /* @__PURE__ */ React25.createElement(View, { style: [styles5.content, style] }, children);
@@ -613,7 +915,8 @@ function CardFooter({ children, style }) {
 }
 var styles5 = StyleSheet.create({
   card: {
-    borderRadius: ms(12),
+    borderRadius: 14,
+    // RADIUS.md — Airbnb property card spec
     borderWidth: 1
   },
   header: {
@@ -682,7 +985,7 @@ function Spinner({ size = "md", color, label, ...props }) {
     return /* @__PURE__ */ React25.createElement(View, { style: styles7.wrapper }, /* @__PURE__ */ React25.createElement(ActivityIndicator, { size: sizeMap2[size], color: color ?? colors.primary, ...props }), /* @__PURE__ */ React25.createElement(
       Text,
       {
-        style: [styles7.label, { color: colors.mutedForeground, fontSize: labelFontSize[size] }],
+        style: [styles7.label, { color: colors.foregroundMuted, fontSize: labelFontSize[size] }],
         allowFontScaling: true
       },
       label
@@ -700,18 +1003,21 @@ var styles7 = StyleSheet.create({
     lineHeight: mvs(18)
   }
 });
-function Skeleton({ width = "100%", height = 16, borderRadius = 6, style }) {
+function Skeleton({
+  width = "100%",
+  height = 16,
+  borderRadius = 6,
+  preset = "base",
+  diameter = 40,
+  style
+}) {
   const { colors, colorScheme } = useTheme();
   const shimmerAnim = useRef(new Animated.Value(0)).current;
   const [containerWidth, setContainerWidth] = useState(300);
   const shimmerHighlight = colorScheme === "dark" ? "rgba(255,255,255,0.08)" : "rgba(255,255,255,0.7)";
   useEffect(() => {
     const animation = Animated.loop(
-      Animated.timing(shimmerAnim, {
-        toValue: 1,
-        duration: 1200,
-        useNativeDriver: true
-      })
+      Animated.timing(shimmerAnim, { toValue: 1, duration: 1200, useNativeDriver: true })
     );
     animation.start();
     return () => animation.stop();
@@ -720,12 +1026,15 @@ function Skeleton({ width = "100%", height = 16, borderRadius = 6, style }) {
     inputRange: [0, 1],
     outputRange: [-containerWidth, containerWidth]
   });
+  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__ */ React25.createElement(
     View,
     {
       style: [
         styles8.base,
-        { width, height, borderRadius, backgroundColor: colors.muted },
+        { width: resolvedWidth, height: resolvedHeight, borderRadius: resolvedRadius, backgroundColor: colors.surface },
         style
       ],
       onLayout: (e) => setContainerWidth(e.nativeEvent.layout.width)
@@ -758,19 +1067,32 @@ var fontSizeMap = {
   lg: ms(22),
   xl: ms(28)
 };
-function Avatar({ src, fallback, size = "md", style }) {
+var statusSizeMap = {
+  sm: 8,
+  md: 10,
+  lg: 13,
+  xl: 16
+};
+function Avatar({ src, fallback, size = "md", status, style }) {
   const { colors } = useTheme();
   const [imageError, setImageError] = useState(false);
   const dimension = sizeMap3[size];
   const showFallback = !src || imageError;
+  const statusSize = statusSizeMap[size];
+  const statusColor = {
+    online: "#22c55e",
+    offline: "transparent",
+    busy: colors.destructive,
+    away: colors.warning
+  };
   const containerStyle = {
     width: dimension,
     height: dimension,
     borderRadius: dimension / 2,
-    backgroundColor: colors.muted,
+    backgroundColor: colors.surface,
     overflow: "hidden"
   };
-  return /* @__PURE__ */ React25.createElement(View, { style: [styles9.base, containerStyle, style] }, !showFallback ? /* @__PURE__ */ React25.createElement(
+  return /* @__PURE__ */ React25.createElement(View, { style: [styles9.wrapper, style] }, /* @__PURE__ */ React25.createElement(View, { style: [styles9.base, containerStyle] }, !showFallback ? /* @__PURE__ */ React25.createElement(
     Image,
     {
       source: { uri: src },
@@ -780,64 +1102,86 @@ function Avatar({ src, fallback, size = "md", style }) {
   ) : /* @__PURE__ */ React25.createElement(
     Text,
     {
-      style: [styles9.fallback, { color: colors.mutedForeground, fontSize: fontSizeMap[size] }],
+      style: [styles9.fallback, { color: colors.foregroundMuted, fontSize: fontSizeMap[size] }],
       allowFontScaling: true
     },
     fallback?.slice(0, 2).toUpperCase() ?? "?"
+  )), status && /* @__PURE__ */ React25.createElement(
+    View,
+    {
+      style: [
+        styles9.statusDot,
+        {
+          width: statusSize,
+          height: statusSize,
+          borderRadius: statusSize / 2,
+          backgroundColor: statusColor[status],
+          borderWidth: status === "offline" ? 2 : 1.5,
+          borderColor: status === "offline" ? colors.border : colors.background
+        }
+      ]
+    }
   ));
 }
 var styles9 = StyleSheet.create({
+  wrapper: {
+    alignSelf: "flex-start",
+    position: "relative"
+  },
   base: {
     alignItems: "center",
     justifyContent: "center"
   },
   fallback: {
     fontFamily: "Poppins-Medium"
+  },
+  statusDot: {
+    position: "absolute",
+    bottom: 0,
+    right: 0
   }
 });
 function AlertBanner({ title, description, variant = "default", icon, iconName, iconColor, style }) {
   const { colors } = useTheme();
-  const bgColor = variant === "destructive" ? colors.destructiveBorder : variant === "success" ? colors.successBorder : colors.card;
-  const textColor = variant === "destructive" ? "#991b1b" : variant === "success" ? "#166534" : colors.foreground;
-  const borderColor = textColor;
-  const defaultIcon = variant === "success" ? /* @__PURE__ */ React25.createElement(FontAwesome5$1, { name: "check-circle", size: 18, color: textColor }) : variant === "destructive" ? /* @__PURE__ */ React25.createElement(MaterialIcons$1, { name: "error-outline", size: 20, color: textColor }) : /* @__PURE__ */ React25.createElement(Entypo$1, { name: "info-with-circle", size: 18, color: textColor });
-  const effectiveIcon = iconName ? renderIcon(iconName, 18, iconColor ?? textColor) : icon ?? defaultIcon;
-  return /* @__PURE__ */ React25.createElement(View, { style: [styles10.container, { backgroundColor: bgColor, borderColor }, style] }, /* @__PURE__ */ React25.createElement(View, { style: styles10.header }, /* @__PURE__ */ React25.createElement(View, { style: styles10.icon }, effectiveIcon), title ? /* @__PURE__ */ React25.createElement(Text, { style: [styles10.title, { color: textColor }], allowFontScaling: true }, title) : null), description ? /* @__PURE__ */ React25.createElement(Text, { style: [styles10.description, { color: textColor, opacity: 0.85 }], allowFontScaling: true }, description) : null);
+  const bgColor = variant === "destructive" ? colors.destructiveTint : variant === "success" ? colors.successTint : variant === "warning" ? colors.warningTint : colors.card;
+  const borderColor = variant === "destructive" ? colors.destructiveBorder : variant === "success" ? colors.successBorder : variant === "warning" ? colors.warningBorder : colors.border;
+  const accentColor = variant === "destructive" ? colors.destructive : variant === "success" ? colors.success : variant === "warning" ? colors.warning : colors.primary;
+  const titleColor = variant === "default" ? colors.foreground : accentColor;
+  const descColor = variant === "default" ? colors.foregroundMuted : accentColor;
+  const defaultIcon = variant === "success" ? /* @__PURE__ */ React25.createElement(FontAwesome5$1, { name: "check-circle", size: 16, color: accentColor }) : variant === "destructive" ? /* @__PURE__ */ React25.createElement(MaterialIcons$1, { name: "error-outline", size: 17, color: accentColor }) : variant === "warning" ? /* @__PURE__ */ React25.createElement(MaterialIcons$1, { name: "warning-amber", size: 17, color: accentColor }) : /* @__PURE__ */ React25.createElement(Entypo$1, { name: "info-with-circle", size: 16, color: accentColor });
+  const effectiveIcon = iconName ? renderIcon(iconName, 16, iconColor ?? accentColor) : icon ?? defaultIcon;
+  return /* @__PURE__ */ React25.createElement(View, { style: [styles10.container, { backgroundColor: bgColor, borderColor }, style] }, /* @__PURE__ */ React25.createElement(View, { style: styles10.iconSlot }, effectiveIcon), /* @__PURE__ */ React25.createElement(View, { style: styles10.content }, /* @__PURE__ */ React25.createElement(Text, { style: [styles10.title, { color: titleColor }], allowFontScaling: true }, title), description ? /* @__PURE__ */ React25.createElement(Text, { style: [styles10.description, { color: descColor }], allowFontScaling: true }, description) : null));
 }
 var styles10 = StyleSheet.create({
   container: {
-    borderWidth: 1,
-    borderRadius: ms(12),
-    paddingHorizontal: s(14),
-    paddingVertical: vs(12),
-    gap: vs(8),
-    shadowColor: "#000",
-    shadowOffset: { width: 0, height: 3 },
-    shadowOpacity: 0.1,
-    shadowRadius: 8,
-    elevation: 5
-  },
-  header: {
     flexDirection: "row",
-    alignItems: "center",
+    alignItems: "flex-start",
+    borderWidth: 0.5,
+    borderRadius: 10,
+    paddingHorizontal: s(12),
+    paddingVertical: vs(10),
     gap: s(10)
   },
-  icon: {
-    marginTop: 0
+  iconSlot: {
+    marginTop: vs(1)
+  },
+  content: {
+    flex: 1,
+    gap: vs(2)
   },
   title: {
-    fontFamily: "Poppins-Bold",
-    fontSize: ms(15),
-    lineHeight: mvs(20),
-    flex: 1
+    fontFamily: "Poppins-Medium",
+    fontSize: ms(13),
+    lineHeight: ms(18)
   },
   description: {
     fontFamily: "Poppins-Regular",
-    fontSize: ms(14),
-    lineHeight: mvs(20)
+    fontSize: ms(12),
+    lineHeight: ms(17),
+    opacity: 0.85
   }
 });
-function Progress({ value = 0, max = 100, style }) {
+function Progress({ value = 0, max = 100, variant = "default", style }) {
   const { colors } = useTheme();
   const percent = Math.min(Math.max(value / max * 100, 0), 100);
   const [trackWidth, setTrackWidth] = useState(0);
@@ -851,16 +1195,17 @@ function Progress({ value = 0, max = 100, style }) {
       bounciness: 0
     }).start();
   }, [percent, trackWidth]);
+  const indicatorColor = variant === "success" ? colors.success : variant === "warning" ? colors.warning : variant === "destructive" ? colors.destructive : colors.primary;
   return /* @__PURE__ */ React25.createElement(
     View,
     {
-      style: [styles11.track, { backgroundColor: colors.muted }, style],
+      style: [styles11.track, { backgroundColor: colors.surface }, style],
       onLayout: (e) => setTrackWidth(e.nativeEvent.layout.width)
     },
     /* @__PURE__ */ React25.createElement(
       Animated.View,
       {
-        style: [styles11.indicator, { width: animatedWidth, backgroundColor: colors.primary }]
+        style: [styles11.indicator, { width: animatedWidth, backgroundColor: indicatorColor }]
       }
     )
   );
@@ -868,19 +1213,19 @@ function Progress({ value = 0, max = 100, style }) {
 var styles11 = StyleSheet.create({
   track: {
     height: vs(8),
-    borderRadius: 999,
+    borderRadius: 9999,
     overflow: "hidden",
     width: "100%"
   },
   indicator: {
     height: "100%",
-    borderRadius: 999
+    borderRadius: 9999
   }
 });
 function EmptyState({ icon, iconName, iconColor, title, description, action, size = "default", style }) {
   const { colors } = useTheme();
   const isCompact = size === "compact";
-  const effectiveIcon = iconName ? renderIcon(iconName, isCompact ? 32 : 48, iconColor ?? colors.mutedForeground) : icon;
+  const effectiveIcon = iconName ? renderIcon(iconName, isCompact ? 32 : 48, iconColor ?? colors.foregroundMuted) : icon;
   return /* @__PURE__ */ React25.createElement(
     View,
     {
@@ -897,7 +1242,7 @@ function EmptyState({ icon, iconName, iconColor, title, description, action, siz
         style: [
           styles12.iconWrapper,
           isCompact && styles12.iconWrapperCompact,
-          { backgroundColor: colors.muted }
+          { backgroundColor: colors.surface }
         ]
       },
       effectiveIcon
@@ -909,7 +1254,7 @@ function EmptyState({ icon, iconName, iconColor, title, description, action, siz
         allowFontScaling: true
       },
       title
-    ), description && !isCompact ? /* @__PURE__ */ React25.createElement(Text, { style: [styles12.description, { color: colors.mutedForeground }], allowFontScaling: true }, description) : null),
+    ), description && !isCompact ? /* @__PURE__ */ React25.createElement(Text, { style: [styles12.description, { color: colors.foregroundMuted }], allowFontScaling: true }, description) : null),
     action && !isCompact ? /* @__PURE__ */ React25.createElement(View, { style: styles12.action }, action) : null
   );
 }
@@ -928,16 +1273,16 @@ var styles12 = StyleSheet.create({
     gap: vs(10)
   },
   iconWrapper: {
-    width: s(48),
-    height: s(48),
-    borderRadius: ms(12),
+    width: s(80),
+    height: s(80),
+    borderRadius: ms(20),
     alignItems: "center",
     justifyContent: "center"
   },
   iconWrapperCompact: {
-    width: s(36),
-    height: s(36),
-    borderRadius: ms(8)
+    width: s(56),
+    height: s(56),
+    borderRadius: ms(14)
   },
   textWrapper: {
     alignItems: "center",
@@ -1001,11 +1346,11 @@ function Textarea({
         setFocused(false);
         onBlur?.(e);
       },
-      placeholderTextColor: colors.mutedForeground,
+      placeholderTextColor: colors.foregroundMuted,
       allowFontScaling: true,
       ...props
     }
-  ), error ? /* @__PURE__ */ React25.createElement(Text, { style: [styles13.helperText, { color: colors.destructive }], allowFontScaling: true }, error) : null, !error && hint ? /* @__PURE__ */ React25.createElement(Text, { style: [styles13.helperText, { color: colors.mutedForeground }], allowFontScaling: true }, hint) : null);
+  ), error ? /* @__PURE__ */ React25.createElement(Text, { style: [styles13.helperText, { color: colors.destructive }], allowFontScaling: true }, error) : null, !error && hint ? /* @__PURE__ */ React25.createElement(Text, { style: [styles13.helperText, { color: colors.foregroundMuted }], allowFontScaling: true }, hint) : null);
 }
 var styles13 = StyleSheet.create({
   container: {
@@ -1017,11 +1362,12 @@ var styles13 = StyleSheet.create({
   },
   input: {
     fontFamily: "Poppins-Regular",
-    borderWidth: 1,
+    borderWidth: 2,
     borderRadius: ms(8),
     paddingHorizontal: s(14),
     paddingVertical: vs(11),
-    fontSize: ms(15)
+    fontSize: ms(15),
+    includeFontPadding: false
   },
   helperText: {
     fontFamily: "Poppins-Regular",
@@ -1038,6 +1384,30 @@ function Checkbox({
 }) {
   const { colors } = useTheme();
   const scale2 = useRef(new Animated.Value(1)).current;
+  const bgOpacity = useRef(new Animated.Value(checked ? 1 : 0)).current;
+  const checkOpacity = useRef(new Animated.Value(checked ? 1 : 0)).current;
+  useEffect(() => {
+    Animated.parallel([
+      Animated.timing(bgOpacity, {
+        toValue: checked ? 1 : 0,
+        duration: 150,
+        useNativeDriver: false
+      }),
+      Animated.timing(checkOpacity, {
+        toValue: checked ? 1 : 0,
+        duration: 120,
+        useNativeDriver: false
+      })
+    ]).start();
+  }, [checked, bgOpacity, checkOpacity]);
+  const borderColor = bgOpacity.interpolate({
+    inputRange: [0, 1],
+    outputRange: [colors.border, colors.primary]
+  });
+  const backgroundColor = bgOpacity.interpolate({
+    inputRange: [0, 1],
+    outputRange: ["transparent", colors.primary]
+  });
   const handlePressIn = () => {
     if (disabled) return;
     Animated.spring(scale2, { toValue: 0.95, useNativeDriver: nativeDriver4, speed: 40, bounciness: 0 }).start();
@@ -1059,25 +1429,24 @@ function Checkbox({
       activeOpacity: 1,
       touchSoundDisabled: true
     },
-    /* @__PURE__ */ React25.createElement(
+    /* @__PURE__ */ React25.createElement(Animated.View, { style: { transform: [{ scale: scale2 }] } }, /* @__PURE__ */ React25.createElement(
       Animated.View,
       {
         style: [
           styles14.box,
           {
-            borderColor: checked ? colors.primary : colors.border,
-            backgroundColor: checked ? colors.primary : "transparent",
-            opacity: disabled ? 0.45 : 1,
-            transform: [{ scale: scale2 }]
+            borderColor,
+            backgroundColor,
+            opacity: disabled ? 0.45 : 1
           }
         ]
       },
-      checked ? /* @__PURE__ */ React25.createElement(View, { style: [styles14.checkmark, { borderColor: colors.primaryForeground }] }) : null
-    ),
+      /* @__PURE__ */ React25.createElement(Animated.View, { style: { opacity: checkOpacity } }, /* @__PURE__ */ React25.createElement(View, { style: [styles14.checkmark, { borderColor: colors.primaryForeground }] }))
+    )),
     label ? /* @__PURE__ */ React25.createElement(
       Text,
       {
-        style: [styles14.label, { color: disabled ? colors.mutedForeground : colors.foreground }],
+        style: [styles14.label, { color: disabled ? colors.foregroundMuted : colors.foreground }],
         allowFontScaling: true
       },
       label
@@ -1117,10 +1486,13 @@ var TRACK_HEIGHT = s(30);
 var THUMB_SIZE = s(24);
 var THUMB_OFFSET = s(3);
 var THUMB_TRAVEL = TRACK_WIDTH - THUMB_SIZE - THUMB_OFFSET * 2;
+var ICON_SIZE = s(13);
 function Switch({ checked = false, onCheckedChange, disabled, style }) {
   const { colors } = useTheme();
   const translateX = useRef(new Animated.Value(checked ? THUMB_TRAVEL : 0)).current;
   const trackOpacity = useRef(new Animated.Value(checked ? 1 : 0)).current;
+  const checkOpacity = useRef(new Animated.Value(checked ? 1 : 0)).current;
+  const crossOpacity = useRef(new Animated.Value(checked ? 0 : 1)).current;
   useEffect(() => {
     Animated.parallel([
       Animated.spring(translateX, {
@@ -1132,12 +1504,22 @@ function Switch({ checked = false, onCheckedChange, disabled, style }) {
         toValue: checked ? 1 : 0,
         duration: 150,
         useNativeDriver: false
+      }),
+      Animated.timing(checkOpacity, {
+        toValue: checked ? 1 : 0,
+        duration: 120,
+        useNativeDriver: true
+      }),
+      Animated.timing(crossOpacity, {
+        toValue: checked ? 0 : 1,
+        duration: 120,
+        useNativeDriver: true
       })
     ]).start();
-  }, [checked, translateX, trackOpacity]);
+  }, [checked, translateX, trackOpacity, checkOpacity, crossOpacity]);
   const trackColor = trackOpacity.interpolate({
     inputRange: [0, 1],
-    outputRange: [colors.muted, colors.primary]
+    outputRange: [colors.surface, colors.primary]
   });
   return /* @__PURE__ */ React25.createElement(View, { style: [{ opacity: disabled ? 0.45 : 1 }, style] }, /* @__PURE__ */ React25.createElement(
     TouchableOpacity,
@@ -1158,7 +1540,9 @@ function Switch({ checked = false, onCheckedChange, disabled, style }) {
           styles15.thumb,
           { backgroundColor: colors.primaryForeground, transform: [{ translateX }] }
         ]
-      }
+      },
+      /* @__PURE__ */ React25.createElement(Animated.View, { style: [styles15.iconWrapper, { opacity: checkOpacity }] }, /* @__PURE__ */ React25.createElement(Feather$1, { name: "check", size: ICON_SIZE, color: colors.primary })),
+      /* @__PURE__ */ React25.createElement(Animated.View, { style: [styles15.iconWrapper, { opacity: crossOpacity }] }, /* @__PURE__ */ React25.createElement(Feather$1, { name: "x", size: ICON_SIZE, color: colors.foregroundMuted }))
     ))
   ));
 }
@@ -1182,7 +1566,12 @@ var styles15 = StyleSheet.create({
     shadowOffset: { width: 0, height: 1 },
     shadowOpacity: 0.15,
     shadowRadius: 2,
-    elevation: 2
+    elevation: 2,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  iconWrapper: {
+    position: "absolute"
   }
 });
 var nativeDriver6 = Platform.OS !== "web";
@@ -1232,7 +1621,7 @@ function Toggle({
   });
   const backgroundColor = pressAnim.interpolate({
     inputRange: [0, 1],
-    outputRange: ["transparent", colors.accent]
+    outputRange: ["transparent", colors.surfaceStrong]
   });
   const textColor = pressAnim.interpolate({
     inputRange: [0, 1],
@@ -1251,10 +1640,10 @@ function Toggle({
       if (active) return /* @__PURE__ */ React25.createElement(React25.Fragment, null, active);
       return /* @__PURE__ */ React25.createElement(FontAwesome5$1, { name: "check-circle", size: iconSize, color: colors.primary });
     }
-    if (iconName) return /* @__PURE__ */ React25.createElement(React25.Fragment, null, renderIcon(iconName, iconSize, iconColor ?? colors.mutedForeground));
+    if (iconName) return /* @__PURE__ */ React25.createElement(React25.Fragment, null, renderIcon(iconName, iconSize, iconColor ?? colors.foregroundMuted));
     const custom = renderProp(icon);
     if (custom) return /* @__PURE__ */ React25.createElement(React25.Fragment, null, custom);
-    return /* @__PURE__ */ React25.createElement(FontAwesome5$1, { name: "circle", size: iconSize, color: colors.mutedForeground });
+    return /* @__PURE__ */ React25.createElement(FontAwesome5$1, { name: "circle", size: iconSize, color: colors.foregroundMuted });
   };
   return /* @__PURE__ */ React25.createElement(Animated.View, { style: [{ transform: [{ scale: scale2 }] }, disabled && styles16.disabled, style] }, /* @__PURE__ */ React25.createElement(
     TouchableOpacity,
@@ -1351,7 +1740,7 @@ function RadioItem({
       {
         style: [
           styles17.label,
-          { color: option.disabled ? colors.mutedForeground : colors.foreground }
+          { color: option.disabled ? colors.foregroundMuted : colors.foreground }
         ],
         allowFontScaling: true
       },
@@ -1413,7 +1802,8 @@ function TabTrigger({
   tab,
   isActive,
   onPress,
-  onLayout
+  onLayout,
+  variant
 }) {
   const { colors } = useTheme();
   const scale2 = useRef(new Animated.Value(1)).current;
@@ -1423,10 +1813,15 @@ function TabTrigger({
   const handlePressOut = () => {
     Animated.spring(scale2, { toValue: 1, useNativeDriver: nativeDriver8, speed: 40, bounciness: 4 }).start();
   };
+  const isUnderline = variant === "underline";
   return /* @__PURE__ */ React25.createElement(
     TouchableOpacity,
     {
-      style: styles18.trigger,
+      style: [
+        styles18.trigger,
+        isUnderline && styles18.triggerUnderline,
+        isUnderline && isActive && { borderBottomColor: colors.primary }
+      ],
       onPress,
       onPressIn: handlePressIn,
       onPressOut: handlePressOut,
@@ -1439,8 +1834,8 @@ function TabTrigger({
       {
         style: [
           styles18.triggerLabel,
-          { color: isActive ? colors.foreground : colors.mutedForeground },
-          isActive && styles18.activeTriggerLabel
+          { color: isActive ? colors.foreground : colors.foregroundMuted },
+          isActive && (isUnderline ? styles18.activeTriggerLabelUnderline : styles18.activeTriggerLabel)
         ],
         allowFontScaling: true
       },
@@ -1448,7 +1843,7 @@ function TabTrigger({
     )))
   );
 }
-function Tabs({ tabs, value, onValueChange, children, style }) {
+function Tabs({ tabs, variant = "pill", value, onValueChange, children, style }) {
   const [internal, setInternal] = useState(tabs[0]?.value ?? "");
   const { colors } = useTheme();
   const active = value ?? internal;
@@ -1461,18 +1856,8 @@ function Tabs({ tabs, value, onValueChange, children, style }) {
     if (!layout) return;
     if (animate) {
       Animated.parallel([
-        Animated.spring(pillX, {
-          toValue: layout.x,
-          useNativeDriver: false,
-          speed: 20,
-          bounciness: 0
-        }),
-        Animated.spring(pillWidth, {
-          toValue: layout.width,
-          useNativeDriver: false,
-          speed: 20,
-          bounciness: 0
-        })
+        Animated.spring(pillX, { toValue: layout.x, useNativeDriver: false, speed: 20, bounciness: 0 }),
+        Animated.spring(pillWidth, { toValue: layout.width, useNativeDriver: false, speed: 20, bounciness: 0 })
       ]).start();
     } else {
       pillX.setValue(layout.x);
@@ -1480,16 +1865,16 @@ function Tabs({ tabs, value, onValueChange, children, style }) {
     }
   };
   useEffect(() => {
-    if (initialised.current) {
-      animatePill(active, true);
-    }
+    if (initialised.current) animatePill(active, true);
   }, [active]);
   const handlePress = (v) => {
     selectionAsync();
     if (!value) setInternal(v);
     onValueChange?.(v);
   };
-  return /* @__PURE__ */ React25.createElement(View, { style }, /* @__PURE__ */ React25.createElement(View, { style: [styles18.list, { backgroundColor: colors.muted }] }, /* @__PURE__ */ React25.createElement(
+  return /* @__PURE__ */ React25.createElement(View, { style }, /* @__PURE__ */ React25.createElement(View, { style: [
+    variant === "pill" ? [styles18.list, { backgroundColor: colors.surface }] : styles18.listUnderline
+  ] }, variant === "pill" && /* @__PURE__ */ React25.createElement(
     Animated.View,
     {
       style: [
@@ -1504,7 +1889,7 @@ function Tabs({ tabs, value, onValueChange, children, style }) {
           borderRadius: 8,
           shadowColor: "#000",
           shadowOffset: { width: 0, height: 1 },
-          shadowOpacity: 0.1,
+          shadowOpacity: 0.08,
           shadowRadius: 2,
           elevation: 2
         }
@@ -1517,6 +1902,7 @@ function Tabs({ tabs, value, onValueChange, children, style }) {
       tab,
       isActive: tab.value === active,
       onPress: () => handlePress(tab.value),
+      variant,
       onLayout: (e) => {
         const { x, width } = e.nativeEvent.layout;
         tabLayouts.current[tab.value] = { x, width };
@@ -1535,20 +1921,32 @@ function TabsContent({ value, activeValue, children, style }) {
 var styles18 = StyleSheet.create({
   list: {
     flexDirection: "row",
-    borderRadius: ms(12),
+    borderRadius: 12,
     padding: s(4),
     gap: s(4)
   },
+  listUnderline: {
+    flexDirection: "row",
+    borderBottomWidth: 1
+  },
   pill: {},
   trigger: {
     flex: 1,
     paddingVertical: vs(7),
     paddingHorizontal: s(10),
-    borderRadius: ms(6),
+    borderRadius: 8,
     alignItems: "center",
     justifyContent: "center",
     zIndex: 1
   },
+  triggerUnderline: {
+    flex: 0,
+    paddingVertical: vs(12),
+    paddingHorizontal: s(16),
+    borderRadius: 0,
+    borderBottomWidth: 2,
+    borderBottomColor: "transparent"
+  },
   triggerInner: {
     flexDirection: "row",
     alignItems: "center",
@@ -1561,6 +1959,10 @@ var styles18 = StyleSheet.create({
   },
   activeTriggerLabel: {
     fontFamily: "Poppins-Medium"
+  },
+  activeTriggerLabelUnderline: {
+    fontFamily: "Poppins-SemiBold",
+    fontSize: ms(14)
   }
 });
 function AccordionItemComponent({
@@ -1603,7 +2005,7 @@ function AccordionItemComponent({
       }
     },
     /* @__PURE__ */ React25.createElement(Text, { style: [styles19.triggerText, { color: colors.foreground }], allowFontScaling: true }, item.trigger),
-    /* @__PURE__ */ React25.createElement(Animated11.View, { style: [styles19.chevron, rotationStyle] }, /* @__PURE__ */ React25.createElement(Entypo$1, { name: "chevron-down", size: 18, color: colors.mutedForeground }))
+    /* @__PURE__ */ React25.createElement(Animated11.View, { style: [styles19.chevron, rotationStyle] }, /* @__PURE__ */ React25.createElement(Entypo$1, { name: "chevron-down", size: 18, color: colors.foregroundMuted }))
   ), /* @__PURE__ */ React25.createElement(Animated11.View, { style: bodyStyle }, /* @__PURE__ */ React25.createElement(
     View,
     {
@@ -1695,7 +2097,7 @@ function Slider({
     }
     onValueChange?.(v);
   };
-  return /* @__PURE__ */ React25.createElement(View, { style: [styles20.wrapper, style], accessibilityLabel }, label || showValue ? /* @__PURE__ */ React25.createElement(View, { style: styles20.header }, label ? /* @__PURE__ */ React25.createElement(Text, { style: [styles20.label, { color: colors.foreground }], allowFontScaling: true }, label) : null, showValue ? /* @__PURE__ */ React25.createElement(Text, { style: [styles20.valueText, { color: colors.mutedForeground }], allowFontScaling: true }, formatValue2(value)) : null) : null, /* @__PURE__ */ React25.createElement(View, { style: disabled ? styles20.disabled : void 0 }, /* @__PURE__ */ React25.createElement(
+  return /* @__PURE__ */ React25.createElement(View, { style: [styles20.wrapper, style], accessibilityLabel }, label || showValue ? /* @__PURE__ */ React25.createElement(View, { style: styles20.header }, label ? /* @__PURE__ */ React25.createElement(Text, { style: [styles20.label, { color: colors.foreground }], allowFontScaling: true }, label) : null, showValue ? /* @__PURE__ */ React25.createElement(Text, { style: [styles20.valueText, { color: colors.foregroundMuted }], allowFontScaling: true }, formatValue2(value)) : null) : null, /* @__PURE__ */ React25.createElement(View, { style: disabled ? styles20.disabled : void 0 }, /* @__PURE__ */ React25.createElement(
     RNSlider,
     {
       value,
@@ -1706,7 +2108,7 @@ function Slider({
       onValueChange: handleValueChange,
       onSlidingComplete,
       minimumTrackTintColor: colors.primary,
-      maximumTrackTintColor: colors.muted,
+      maximumTrackTintColor: colors.surface,
       thumbTintColor: colors.primary,
       style: styles20.slider,
       accessibilityLabel
@@ -1744,7 +2146,9 @@ function Sheet({
   title,
   description,
   children,
-  style
+  style,
+  scrollable,
+  maxHeight
 }) {
   const { colors } = useTheme();
   const ref = useRef(null);
@@ -1765,6 +2169,8 @@ function Sheet({
       pressBehavior: "close"
     }
   );
+  const headerNode = title || description ? /* @__PURE__ */ React25.createElement(View, { style: styles21.header }, title ? /* @__PURE__ */ React25.createElement(Text, { style: [styles21.title, { color: colors.foreground }], allowFontScaling: true }, title) : null, description ? /* @__PURE__ */ React25.createElement(Text, { style: [styles21.description, { color: colors.foregroundMuted }], allowFontScaling: true }, description) : null) : null;
+  const useScroll = scrollable || !!maxHeight;
   return /* @__PURE__ */ React25.createElement(
     BottomSheetModal,
     {
@@ -1776,7 +2182,7 @@ function Sheet({
       handleIndicatorStyle: [styles21.handle, { backgroundColor: colors.border }],
       enablePanDownToClose: true
     },
-    /* @__PURE__ */ React25.createElement(BottomSheetView, { style: [styles21.content, style] }, title || description ? /* @__PURE__ */ React25.createElement(View, { style: styles21.header }, title ? /* @__PURE__ */ React25.createElement(Text, { style: [styles21.title, { color: colors.cardForeground }], allowFontScaling: true }, title) : null, description ? /* @__PURE__ */ React25.createElement(Text, { style: [styles21.description, { color: colors.mutedForeground }], allowFontScaling: true }, description) : null) : null, children)
+    /* @__PURE__ */ React25.createElement(BottomSheetView, { style: maxHeight ? { maxHeight } : void 0 }, useScroll ? /* @__PURE__ */ React25.createElement(BottomSheetScrollView, { contentContainerStyle: [styles21.content, style] }, headerNode, children) : /* @__PURE__ */ React25.createElement(BottomSheetView, { style: [styles21.content, style] }, headerNode, children))
   );
 }
 var styles21 = StyleSheet.create({
@@ -1875,14 +2281,14 @@ function Select({
       {
         style: [
           styles22.triggerText,
-          { color: selected ? colors.foreground : colors.mutedForeground }
+          { color: selected ? colors.foreground : colors.foregroundMuted }
         ],
         numberOfLines: 1,
         allowFontScaling: true
       },
       selected?.label ?? placeholder
     ),
-    /* @__PURE__ */ React25.createElement(Entypo$1, { name: "chevron-with-circle-down", size: 20, color: colors.mutedForeground })
+    /* @__PURE__ */ React25.createElement(Entypo$1, { name: "chevron-with-circle-down", size: 20, color: colors.foregroundMuted })
   )) : null, isIOS ? /* @__PURE__ */ React25.createElement(
     Modal,
     {
@@ -1899,7 +2305,7 @@ function Select({
         onValueChange: (val) => setPendingValue(val),
         itemStyle: { color: colors.foreground }
       },
-      !value ? /* @__PURE__ */ React25.createElement(Picker.Item, { label: placeholder, value: "", color: colors.mutedForeground, enabled: false }) : null,
+      !value ? /* @__PURE__ */ React25.createElement(Picker.Item, { label: placeholder, value: "", color: colors.foregroundMuted, enabled: false }) : null,
       options.map((o) => /* @__PURE__ */ React25.createElement(
         Picker.Item,
         {
@@ -1907,7 +2313,7 @@ function Select({
           label: o.label,
           value: o.value,
           enabled: !o.disabled,
-          color: o.disabled ? colors.mutedForeground : colors.foreground
+          color: o.disabled ? colors.foregroundMuted : colors.foreground
         }
       ))
     ))
@@ -1951,7 +2357,7 @@ function Select({
         styles22.webPicker,
         {
           borderColor: error ? colors.destructive : colors.border,
-          color: selected ? colors.foreground : colors.mutedForeground,
+          color: selected ? colors.foreground : colors.foregroundMuted,
           backgroundColor: colors.background,
           opacity: disabled ? 0.45 : 1
         }
@@ -2086,22 +2492,42 @@ function ToastNotification({ item, onDismiss }) {
   }));
   const variant = item.variant ?? "default";
   const bgColor = {
-    default: colors.foreground,
+    default: colors.card,
+    destructive: colors.destructiveTint,
+    success: colors.successTint,
+    warning: colors.warningTint
+  }[variant];
+  const borderColor = {
+    default: colors.border,
     destructive: colors.destructiveBorder,
-    success: colors.successBorder
+    success: colors.successBorder,
+    warning: colors.warningBorder
   }[variant];
-  const textColor = {
-    default: colors.background,
-    destructive: "#991b1b",
-    success: "#166534"
+  const accentColor = {
+    default: colors.primary,
+    destructive: colors.destructive,
+    success: colors.success,
+    warning: colors.warning
   }[variant];
-  const borderColor = textColor;
-  const defaultIcon = variant === "success" ? /* @__PURE__ */ React25.createElement(FontAwesome5$1, { name: "check-circle", size: 18, color: textColor }) : variant === "destructive" ? /* @__PURE__ */ React25.createElement(AntDesign$1, { name: "exclamation-circle", size: 18, color: textColor }) : /* @__PURE__ */ React25.createElement(Entypo$1, { name: "info-with-circle", size: 18, color: textColor });
-  const leftIcon = item.iconName ? renderIcon(item.iconName, 22, item.iconColor ?? textColor) : item.icon ?? defaultIcon;
-  return /* @__PURE__ */ React25.createElement(GestureDetector, { gesture: panGesture }, /* @__PURE__ */ React25.createElement(Animated11.View, { style: [styles23.toast, { backgroundColor: bgColor, borderColor }, animatedStyle] }, /* @__PURE__ */ React25.createElement(View, { style: styles23.leftIconContainer }, leftIcon), /* @__PURE__ */ React25.createElement(View, { style: styles23.toastContent }, item.title ? /* @__PURE__ */ React25.createElement(Text, { style: [styles23.toastTitle, { color: textColor }], allowFontScaling: true }, item.title) : null, item.description ? /* @__PURE__ */ React25.createElement(Text, { style: [styles23.toastDescription, { color: textColor, opacity: 0.85 }], allowFontScaling: true }, item.description) : null), /* @__PURE__ */ React25.createElement(TouchableOpacity, { onPress: onDismiss, style: styles23.dismissButton, touchSoundDisabled: true }, /* @__PURE__ */ React25.createElement(AntDesign$1, { name: "close-circle", size: 18, color: textColor }))));
-}
-function ToastProvider({ children }) {
-  const [toasts, setToasts] = useState([]);
+  const titleColor = variant === "default" ? colors.foreground : accentColor;
+  const descColor = variant === "default" ? colors.foregroundMuted : accentColor;
+  const defaultIcon = variant === "success" ? /* @__PURE__ */ React25.createElement(FontAwesome5$1, { name: "check-circle", size: 16, color: accentColor }) : variant === "destructive" ? /* @__PURE__ */ React25.createElement(AntDesign$1, { name: "exclamation-circle", size: 16, color: accentColor }) : variant === "warning" ? /* @__PURE__ */ React25.createElement(MaterialIcons$1, { name: "warning-amber", size: 17, color: accentColor }) : /* @__PURE__ */ React25.createElement(Entypo$1, { name: "info-with-circle", size: 16, color: accentColor });
+  const leftIcon = item.iconName ? renderIcon(item.iconName, 16, item.iconColor ?? accentColor) : item.icon ?? defaultIcon;
+  return /* @__PURE__ */ React25.createElement(GestureDetector, { gesture: panGesture }, /* @__PURE__ */ React25.createElement(Animated11.View, { style: [styles23.toast, { backgroundColor: bgColor, borderColor }, animatedStyle] }, /* @__PURE__ */ React25.createElement(View, { style: styles23.leftIconContainer }, leftIcon), /* @__PURE__ */ React25.createElement(View, { style: styles23.toastContent }, item.title ? /* @__PURE__ */ React25.createElement(Text, { style: [styles23.toastTitle, { color: titleColor }], allowFontScaling: true }, item.title) : null, item.description ? /* @__PURE__ */ React25.createElement(Text, { style: [styles23.toastDescription, { color: descColor }], allowFontScaling: true }, item.description) : null), item.action && /* @__PURE__ */ React25.createElement(
+    TouchableOpacity,
+    {
+      onPress: () => {
+        item.action.onPress();
+        onDismiss();
+      },
+      style: styles23.actionButton,
+      touchSoundDisabled: true
+    },
+    /* @__PURE__ */ React25.createElement(Text, { style: [styles23.actionLabel, { color: accentColor }], allowFontScaling: true }, item.action.label)
+  ), /* @__PURE__ */ React25.createElement(TouchableOpacity, { onPress: onDismiss, style: styles23.dismissButton, touchSoundDisabled: true }, /* @__PURE__ */ React25.createElement(AntDesign$1, { name: "close-circle", size: 16, color: descColor }))));
+}
+function ToastProvider({ children }) {
+  const [toasts, setToasts] = useState([]);
   const insets = useSafeAreaInsets();
   const toast = useCallback((item) => {
     const id = Math.random().toString(36).slice(2);
@@ -2109,6 +2535,8 @@ function ToastProvider({ children }) {
       notificationSuccess();
     } else if (item.variant === "destructive") {
       notificationError();
+    } else if (item.variant === "warning") {
+      notificationError();
     } else {
       impactLight();
     }
@@ -2135,38 +2563,52 @@ var styles23 = StyleSheet.create({
   },
   toast: {
     flexDirection: "row",
-    alignItems: "center",
-    borderRadius: ms(12),
-    borderWidth: 1,
-    paddingHorizontal: s(14),
-    paddingVertical: vs(12),
+    alignItems: "flex-start",
+    borderRadius: ms(10),
+    borderWidth: 0.5,
+    paddingHorizontal: s(12),
+    paddingVertical: vs(10),
     shadowColor: "#000",
-    shadowOffset: { width: 0, height: 3 },
-    shadowOpacity: 0.1,
-    shadowRadius: 8,
-    elevation: 5
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.06,
+    shadowRadius: 4,
+    elevation: 3
   },
   toastContent: {
     flex: 1,
-    gap: vs(4)
+    gap: vs(2)
   },
   leftIconContainer: {
-    width: s(28),
+    marginTop: vs(1),
     alignItems: "center",
     justifyContent: "center",
     marginRight: s(10)
   },
   toastTitle: {
-    fontFamily: "Poppins-SemiBold",
-    fontSize: ms(15)
+    fontFamily: "Poppins-Medium",
+    fontSize: ms(13),
+    lineHeight: ms(18)
   },
   toastDescription: {
     fontFamily: "Poppins-Regular",
-    fontSize: ms(14)
+    fontSize: ms(12),
+    lineHeight: ms(17),
+    opacity: 0.85
   },
-  dismissButton: {
-    padding: s(8),
+  actionButton: {
+    paddingHorizontal: s(8),
+    paddingVertical: vs(4),
     marginLeft: s(4)
+  },
+  actionLabel: {
+    fontFamily: "Poppins-Medium",
+    fontSize: ms(12),
+    textDecorationLine: "underline"
+  },
+  dismissButton: {
+    padding: s(6),
+    marginLeft: s(2),
+    marginTop: vs(0)
   }
 });
 function formatCurrency(raw, separator) {
@@ -2200,7 +2642,7 @@ function CurrencyInput({
     onChangeValue?.(isNaN(raw) ? 0 : raw);
   };
   const inputStyle = size === "large" ? { fontFamily: "Poppins-Regular", fontSize: ms(36) } : { fontFamily: "Poppins-Regular" };
-  const dollarIcon = renderIcon("dollar-sign", size === "large" ? 24 : 16, colors.mutedForeground);
+  const dollarIcon = renderIcon("dollar-sign", size === "large" ? 24 : 16, colors.foregroundMuted);
   const displayValue = value && prefix && value.startsWith(prefix) ? value.slice(prefix.length) : value;
   return /* @__PURE__ */ React25.createElement(
     Input,
@@ -2215,7 +2657,7 @@ function CurrencyInput({
       editable,
       prefix: dollarIcon,
       containerStyle,
-      inputWrapperStyle: size === "large" ? { paddingVertical: 10 } : void 0,
+      inputWrapperStyle: size === "large" ? { paddingVertical: vs(16), minHeight: 72 } : void 0,
       style: [inputStyle, style]
     }
   );
@@ -2241,7 +2683,8 @@ var styles24 = StyleSheet.create({
   container: {},
   amount: {
     fontFamily: "Poppins-Bold",
-    fontSize: ms(56)
+    fontSize: ms(56),
+    letterSpacing: -2
   }
 });
 var nativeDriver10 = Platform.OS !== "web";
@@ -2291,7 +2734,7 @@ function ListItem({
     onPress?.();
   };
   const effectiveLeft = leftIcon ? renderIcon(leftIcon, 24, leftIconColor ?? colors.foreground) : leftRender ?? icon;
-  const effectiveRight = rightIcon ? renderIcon(rightIcon, 24, rightIconColor ?? colors.mutedForeground) : rightRender ?? trailing;
+  const effectiveRight = rightIcon ? renderIcon(rightIcon, 24, rightIconColor ?? colors.foregroundMuted) : rightRender ?? trailing;
   const cardStyle = variant === "card" ? {
     backgroundColor: colors.card,
     borderRadius: 12,
@@ -2326,7 +2769,7 @@ function ListItem({
     ), subtitle ? /* @__PURE__ */ React25.createElement(
       Text,
       {
-        style: [styles25.subtitle, { color: colors.mutedForeground }, subtitleStyle],
+        style: [styles25.subtitle, { color: colors.foregroundMuted }, subtitleStyle],
         numberOfLines: 2,
         allowFontScaling: true
       },
@@ -2334,7 +2777,7 @@ function ListItem({
     ) : null, caption ? /* @__PURE__ */ React25.createElement(
       Text,
       {
-        style: [styles25.caption, { color: colors.mutedForeground }, captionStyle],
+        style: [styles25.caption, { color: colors.foregroundMuted }, captionStyle],
         numberOfLines: 1,
         allowFontScaling: true
       },
@@ -2343,11 +2786,11 @@ function ListItem({
     effectiveRight !== void 0 ? /* @__PURE__ */ React25.createElement(View, { style: styles25.rightContainer }, typeof effectiveRight === "string" ? /* @__PURE__ */ React25.createElement(
       Text,
       {
-        style: [styles25.rightText, { color: colors.mutedForeground }],
+        style: [styles25.rightText, { color: colors.foregroundMuted }],
         allowFontScaling: true
       },
       effectiveRight
-    ) : effectiveRight) : showChevron ? /* @__PURE__ */ React25.createElement(Entypo$1, { name: "chevron-with-circle-right", size: 20, color: colors.mutedForeground }) : null
+    ) : effectiveRight) : showChevron ? /* @__PURE__ */ React25.createElement(Entypo$1, { name: "chevron-with-circle-right", size: 20, color: colors.foregroundMuted }) : null
   ), showSeparator ? /* @__PURE__ */ React25.createElement(
     View,
     {
@@ -2449,7 +2892,7 @@ function Chip({ label, selected = false, onPress, icon, iconName, style }) {
   };
   const backgroundColor = pressAnim.interpolate({
     inputRange: [0, 1],
-    outputRange: [colors.secondary, colors.primary]
+    outputRange: [colors.surface, colors.primary]
   });
   const textColor = pressAnim.interpolate({
     inputRange: [0, 1],
@@ -2571,16 +3014,7 @@ function ConfirmDialog({
       handleIndicatorStyle: [styles27.handle, { backgroundColor: colors.border }],
       enablePanDownToClose: true
     },
-    /* @__PURE__ */ React25.createElement(BottomSheetView, { style: styles27.content }, /* @__PURE__ */ React25.createElement(Text, { style: [styles27.title, { color: colors.cardForeground }], allowFontScaling: true }, title), description ? /* @__PURE__ */ React25.createElement(Text, { style: [styles27.description, { color: colors.mutedForeground }], allowFontScaling: true }, description) : null, /* @__PURE__ */ React25.createElement(View, { style: styles27.actions }, /* @__PURE__ */ React25.createElement(
-      Button,
-      {
-        label: cancelLabel,
-        variant: "outline",
-        fullWidth: true,
-        onPress: onCancel,
-        icon: /* @__PURE__ */ React25.createElement(Feather$1, { name: "x", size: 15, color: colors.foreground })
-      }
-    ), /* @__PURE__ */ React25.createElement(
+    /* @__PURE__ */ React25.createElement(BottomSheetView, { style: styles27.content }, /* @__PURE__ */ React25.createElement(Text, { style: [styles27.title, { color: colors.foreground }], allowFontScaling: true }, title), description ? /* @__PURE__ */ React25.createElement(Text, { style: [styles27.description, { color: colors.foregroundMuted }], allowFontScaling: true }, description) : null, /* @__PURE__ */ React25.createElement(View, { style: styles27.actions }, /* @__PURE__ */ React25.createElement(
       Button,
       {
         label: confirmLabel,
@@ -2596,6 +3030,15 @@ function ConfirmDialog({
           }
         )
       }
+    ), /* @__PURE__ */ React25.createElement(
+      Button,
+      {
+        label: cancelLabel,
+        variant: "secondary",
+        fullWidth: true,
+        onPress: onCancel,
+        icon: /* @__PURE__ */ React25.createElement(Feather$1, { name: "x", size: 15, color: colors.foreground })
+      }
     )))
   );
 }
@@ -2631,7 +3074,7 @@ var styles27 = StyleSheet.create({
 });
 function LabelValue({ label, value, style }) {
   const { colors } = useTheme();
-  return /* @__PURE__ */ React25.createElement(View, { style: [styles28.container, style] }, /* @__PURE__ */ React25.createElement(Text, { style: [styles28.label, { color: colors.mutedForeground }], allowFontScaling: true }, label), typeof value === "string" ? /* @__PURE__ */ React25.createElement(Text, { style: [styles28.value, { color: colors.foreground }], allowFontScaling: true }, value) : value);
+  return /* @__PURE__ */ React25.createElement(View, { style: [styles28.container, style] }, /* @__PURE__ */ React25.createElement(Text, { style: [styles28.label, { color: colors.foregroundMuted }], allowFontScaling: true }, label), typeof value === "string" ? /* @__PURE__ */ React25.createElement(Text, { style: [styles28.value, { color: colors.foreground }], allowFontScaling: true }, value) : value);
 }
 var styles28 = StyleSheet.create({
   container: {
@@ -2724,63 +3167,342 @@ var styles29 = StyleSheet.create({
     minWidth: s(160)
   }
 });
+function useHover() {
+  const [hovered, setHovered] = useState(false);
+  const onMouseEnter = useCallback(() => setHovered(true), []);
+  const onMouseLeave = useCallback(() => setHovered(false), []);
+  if (Platform.OS !== "web") {
+    return { hovered: false, hoverHandlers: {} };
+  }
+  return { hovered, hoverHandlers: { onMouseEnter, onMouseLeave } };
+}
 
-// src/tokens.ts
-var SPACING = {
-  xs: 4,
-  sm: 8,
-  md: 12,
-  lg: 16,
-  xl: 24,
-  "2xl": 32,
-  "3xl": 48
+// src/components/MediaCard/MediaCard.tsx
+var nativeDriver12 = Platform.OS !== "web";
+var aspectRatioMap = {
+  "1:1": 1,
+  "4:3": 3 / 4,
+  "16:9": 9 / 16,
+  "4:5": 5 / 4,
+  "3:2": 2 / 3
 };
-var ICON_SIZES = {
-  sm: 14,
-  md: 18,
-  lg: 22,
-  xl: 28,
-  "2xl": 32
-};
-var RADIUS = {
-  sm: 4,
-  md: 8,
-  lg: 12,
-  xl: 16,
-  full: 9999
-};
-var SHADOWS = {
-  sm: {
-    shadowColor: "#000",
-    shadowOffset: { width: 0, height: 1 },
-    shadowOpacity: 0.08,
-    shadowRadius: 4,
-    elevation: 2
+function MediaCard({
+  imageSource,
+  aspectRatio = "4:3",
+  badge,
+  actionIcon,
+  actionIconName,
+  actionActive = false,
+  onActionPress,
+  title,
+  subtitle,
+  caption,
+  onPress,
+  style,
+  imageStyle,
+  footer
+}) {
+  const { colors } = useTheme();
+  const scale2 = useRef(new Animated.Value(1)).current;
+  const { hovered, hoverHandlers } = useHover();
+  const handlePressIn = () => {
+    if (!onPress) return;
+    Animated.spring(scale2, { toValue: 0.98, useNativeDriver: nativeDriver12, speed: 40, bounciness: 0 }).start();
+  };
+  const handlePressOut = () => {
+    if (!onPress) return;
+    Animated.spring(scale2, { toValue: 1, useNativeDriver: nativeDriver12, speed: 40, bounciness: 4 }).start();
+  };
+  const handlePress = () => {
+    if (!onPress) return;
+    impactLight();
+    onPress();
+  };
+  const ratio = aspectRatioMap[aspectRatio];
+  const resolvedActionIcon = actionIconName ? renderIcon(actionIconName, 18, actionActive ? colors.primary : colors.background) : actionIcon ?? renderIcon("heart", 18, actionActive ? colors.primary : colors.background);
+  const cardContent = /* @__PURE__ */ React25.createElement(
+    View,
+    {
+      style: [
+        styles30.card,
+        hovered && styles30.cardHovered,
+        style
+      ],
+      ...Platform.OS === "web" ? hoverHandlers : {}
+    },
+    /* @__PURE__ */ React25.createElement(View, { style: [styles30.imageContainer, imageStyle] }, /* @__PURE__ */ React25.createElement(View, { style: { paddingTop: `${ratio * 100}%` } }, /* @__PURE__ */ React25.createElement(View, { style: StyleSheet.absoluteFill }, imageSource ? /* @__PURE__ */ React25.createElement(
+      Image,
+      {
+        source: imageSource,
+        style: styles30.image,
+        resizeMode: "cover"
+      }
+    ) : /* @__PURE__ */ React25.createElement(View, { style: [styles30.imagePlaceholder, { backgroundColor: colors.surface }] }))), badge && /* @__PURE__ */ React25.createElement(View, { style: styles30.badgeContainer }, badge), (onActionPress || actionIcon || actionIconName) && /* @__PURE__ */ React25.createElement(
+      TouchableOpacity,
+      {
+        style: [styles30.actionButton, { backgroundColor: "rgba(0,0,0,0.24)" }],
+        onPress: () => {
+          impactLight();
+          onActionPress?.();
+        },
+        activeOpacity: 0.8,
+        touchSoundDisabled: true
+      },
+      resolvedActionIcon
+    )),
+    (title || subtitle || caption || footer) && /* @__PURE__ */ React25.createElement(View, { style: styles30.meta }, title ? /* @__PURE__ */ React25.createElement(Text, { style: [styles30.title, { color: colors.foreground }], numberOfLines: 2, allowFontScaling: true }, title) : null, subtitle ? /* @__PURE__ */ React25.createElement(Text, { style: [styles30.subtitle, { color: colors.foregroundSubtle }], numberOfLines: 1, allowFontScaling: true }, subtitle) : null, caption ? /* @__PURE__ */ React25.createElement(Text, { style: [styles30.caption, { color: colors.foregroundMuted }], numberOfLines: 1, allowFontScaling: true }, caption) : null, footer)
+  );
+  if (onPress) {
+    return /* @__PURE__ */ React25.createElement(Animated.View, { style: { transform: [{ scale: scale2 }] } }, /* @__PURE__ */ React25.createElement(
+      TouchableOpacity,
+      {
+        onPress: handlePress,
+        onPressIn: handlePressIn,
+        onPressOut: handlePressOut,
+        activeOpacity: 1,
+        touchSoundDisabled: true
+      },
+      cardContent
+    ));
+  }
+  return cardContent;
+}
+var styles30 = StyleSheet.create({
+  card: {
+    borderRadius: RADIUS.md,
+    // 14px — Airbnb property card spec
+    overflow: "hidden",
+    backgroundColor: "transparent"
   },
-  md: {
-    shadowColor: "#000",
-    shadowOffset: { width: 0, height: 3 },
-    shadowOpacity: 0.12,
-    shadowRadius: 8,
-    elevation: 5
+  cardHovered: {
+    // Web hover: lift shadow
+    ...SHADOWS.md
   },
-  lg: {
-    shadowColor: "#000",
-    shadowOffset: { width: 0, height: 6 },
-    shadowOpacity: 0.2,
-    shadowRadius: 16,
-    elevation: 10
+  imageContainer: {
+    borderRadius: RADIUS.md,
+    overflow: "hidden"
   },
-  xl: {
-    shadowColor: "#000",
-    shadowOffset: { width: 0, height: 12 },
-    shadowOpacity: 0.28,
-    shadowRadius: 24,
-    elevation: 18
+  image: {
+    width: "100%",
+    height: "100%"
+  },
+  imagePlaceholder: {
+    width: "100%",
+    height: "100%"
+  },
+  badgeContainer: {
+    position: "absolute",
+    top: s(8),
+    left: s(8)
+  },
+  actionButton: {
+    position: "absolute",
+    top: s(8),
+    right: s(8),
+    width: s(32),
+    height: s(32),
+    borderRadius: 9999,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  meta: {
+    paddingTop: vs(8),
+    gap: vs(2)
+  },
+  title: {
+    fontFamily: "Poppins-SemiBold",
+    fontSize: ms(14),
+    lineHeight: mvs(20)
+  },
+  subtitle: {
+    fontFamily: "Poppins-Regular",
+    fontSize: ms(13),
+    lineHeight: mvs(18)
+  },
+  caption: {
+    fontFamily: "Poppins-Regular",
+    fontSize: ms(12),
+    lineHeight: mvs(16)
   }
-};
-var BREAKPOINTS = {
-  wide: 700
-};
+});
+var nativeDriver13 = Platform.OS !== "web";
+function CategoryChip({
+  item,
+  selected,
+  onPress
+}) {
+  const { colors } = useTheme();
+  const scale2 = useRef(new Animated.Value(1)).current;
+  const handlePressIn = () => {
+    Animated.spring(scale2, { toValue: 0.95, useNativeDriver: nativeDriver13, speed: 40, bounciness: 0 }).start();
+  };
+  const handlePressOut = () => {
+    Animated.spring(scale2, { toValue: 1, useNativeDriver: nativeDriver13, speed: 40, bounciness: 4 }).start();
+  };
+  const bgColor = selected ? colors.primary : colors.surface;
+  const textColor = selected ? colors.primaryForeground : colors.foregroundSubtle;
+  const borderColor = selected ? colors.primary : colors.border;
+  const resolvedIcon = typeof item.icon === "string" ? renderIcon(item.icon, 16, textColor) : item.icon ?? null;
+  return /* @__PURE__ */ React25.createElement(Animated.View, { style: { transform: [{ scale: scale2 }] } }, /* @__PURE__ */ React25.createElement(
+    TouchableOpacity,
+    {
+      style: [
+        styles31.chip,
+        {
+          backgroundColor: bgColor,
+          borderColor
+        }
+      ],
+      onPress,
+      onPressIn: handlePressIn,
+      onPressOut: handlePressOut,
+      activeOpacity: 1,
+      touchSoundDisabled: true
+    },
+    resolvedIcon && /* @__PURE__ */ React25.createElement(View, { style: styles31.chipIcon }, resolvedIcon),
+    /* @__PURE__ */ React25.createElement(Text, { style: [styles31.chipLabel, { color: textColor }], allowFontScaling: true }, item.label),
+    item.badge !== void 0 && item.badge > 0 && /* @__PURE__ */ React25.createElement(View, { style: [styles31.chipBadge, { backgroundColor: colors.primary }] }, /* @__PURE__ */ React25.createElement(Text, { style: [styles31.chipBadgeText, { color: colors.primaryForeground }] }, Math.min(item.badge, 99)))
+  ));
+}
+function CategoryStrip({
+  categories,
+  value,
+  onValueChange,
+  multiSelect = false,
+  style,
+  itemStyle
+}) {
+  const selected = Array.isArray(value) ? value : value ? [value] : [];
+  const handlePress = (v) => {
+    selectionAsync();
+    if (multiSelect) {
+      const current = Array.isArray(value) ? value : value ? [value] : [];
+      const next = current.includes(v) ? current.filter((x) => x !== v) : [...current, v];
+      onValueChange?.(next);
+    } else {
+      onValueChange?.(v === value ? "" : v);
+    }
+  };
+  return /* @__PURE__ */ React25.createElement(
+    ScrollView,
+    {
+      horizontal: true,
+      showsHorizontalScrollIndicator: false,
+      contentContainerStyle: [styles31.container, style],
+      style: styles31.scroll
+    },
+    categories.map((cat) => /* @__PURE__ */ React25.createElement(View, { key: cat.value, style: itemStyle }, /* @__PURE__ */ React25.createElement(
+      CategoryChip,
+      {
+        item: cat,
+        selected: selected.includes(cat.value),
+        onPress: () => handlePress(cat.value)
+      }
+    )))
+  );
+}
+var styles31 = StyleSheet.create({
+  scroll: {
+    flexGrow: 0
+  },
+  container: {
+    flexDirection: "row",
+    gap: s(8),
+    paddingHorizontal: s(4),
+    paddingVertical: vs(4)
+  },
+  chip: {
+    flexDirection: "row",
+    alignItems: "center",
+    borderRadius: RADIUS.full,
+    borderWidth: 1,
+    paddingHorizontal: s(14),
+    paddingVertical: vs(8),
+    gap: s(6)
+  },
+  chipIcon: {
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  chipLabel: {
+    fontFamily: "Poppins-Medium",
+    fontSize: ms(13)
+  },
+  chipBadge: {
+    minWidth: 16,
+    height: 16,
+    borderRadius: 9999,
+    paddingHorizontal: 3,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  chipBadgeText: {
+    fontFamily: "Poppins-Bold",
+    fontSize: ms(9),
+    lineHeight: 14
+  }
+});
+var nativeDriver14 = Platform.OS !== "web";
+function Pressable2({
+  children,
+  onPress,
+  pressScale = 0.98,
+  bounciness = 4,
+  haptics = true,
+  style,
+  disabled,
+  hoverScale = 1.02,
+  ...touchableProps
+}) {
+  const scale2 = useRef(new Animated.Value(1)).current;
+  const { hovered, hoverHandlers } = useHover();
+  const handlePressIn = () => {
+    if (disabled) return;
+    Animated.spring(scale2, {
+      toValue: pressScale,
+      useNativeDriver: nativeDriver14,
+      speed: 40,
+      bounciness: 0
+    }).start();
+  };
+  const handlePressOut = () => {
+    if (disabled) return;
+    Animated.spring(scale2, {
+      toValue: 1,
+      useNativeDriver: nativeDriver14,
+      speed: 40,
+      bounciness
+    }).start();
+  };
+  const handlePress = () => {
+    if (disabled || !onPress) return;
+    if (haptics) impactLight();
+    onPress();
+  };
+  const hoverScaleValue = hovered && hoverScale !== 1 ? hoverScale : 1;
+  return /* @__PURE__ */ React25.createElement(
+    Animated.View,
+    {
+      style: [
+        { transform: [{ scale: Animated.multiply(scale2, hoverScaleValue) }] },
+        style
+      ],
+      ...Platform.OS === "web" ? hoverHandlers : {}
+    },
+    /* @__PURE__ */ React25.createElement(
+      TouchableOpacity,
+      {
+        onPress: handlePress,
+        onPressIn: handlePressIn,
+        onPressOut: handlePressOut,
+        activeOpacity: 1,
+        disabled,
+        touchSoundDisabled: true,
+        ...touchableProps
+      },
+      children
+    )
+  );
+}
 
-export { Accordion, AlertBanner, Avatar, BREAKPOINTS, Badge, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, Chip, ChipGroup, ConfirmDialog, CurrencyDisplay, CurrencyInput, CurrencyInput as CurrencyInputLarge, EmptyState, ICON_SIZES, Icon, IconButton, Input, LabelValue, ListItem, MonthPicker, Progress, RADIUS, RadioGroup, SHADOWS, SPACING, Select, Separator, Sheet, Skeleton, Slider, Spinner, Switch, Tabs, TabsContent, Text2 as Text, Textarea, ThemeProvider, ToastProvider, Toggle, defaultDark, defaultLight, renderIcon, useTheme, useToast };
+export { Accordion, AlertBanner, Avatar, BREAKPOINTS, Badge, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CategoryStrip, Checkbox, Chip, ChipGroup, ConfirmDialog, CurrencyDisplay, CurrencyInput, CurrencyInput as CurrencyInputLarge, EmptyState, ICON_SIZES, Icon, IconButton, Input, LabelValue, ListItem, MediaCard, MonthPicker, Pressable2 as Pressable, Progress, RADIUS, RadioGroup, SHADOWS, SPACING, Select, Separator, Sheet, Skeleton, Slider, Spinner, Switch, TYPOGRAPHY, Tabs, TabsContent, Text3 as Text, Textarea, ThemeProvider, ToastProvider, Toggle, defaultDark, defaultLight, deriveColors, renderIcon, useTheme, useToast };