@retray-dev/ui-kit 10.0.0 → 10.2.0

package/dist/{chunk-VQ57HWPL.mjs → chunk-6L4G6PBT.mjs}

@@ -2,7 +2,7 @@ import { usePressScale } from './chunk-YNROWHQJ.mjs';
 import { selectionAsync } from './chunk-EJ7ZPXOH.mjs';
 import { PRESS_SCALE, COLOR_TRANSITION } from './chunk-DVK4G2GT.mjs';
 import { RADIUS } from './chunk-QY3X2UYR.mjs';
-import { renderIcon } from './chunk-T7XZ7H7Y.mjs';
+import { renderIcon } from './chunk-KA7LTET3.mjs';
 import { useTheme } from './chunk-SOYNZDVY.mjs';
 import { ms, s, vs } from './chunk-2CE3TQVY.mjs';
 import React, { useCallback } from 'react';

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

@@ -1,5 +1,5 @@
-import { Button } from './chunk-2TFTAWVJ.mjs';
-import { renderIcon } from './chunk-T7XZ7H7Y.mjs';
+import { Button } from './chunk-HTHGSXFG.mjs';
+import { renderIcon } from './chunk-KA7LTET3.mjs';
 import { useTheme } from './chunk-SOYNZDVY.mjs';
 import { s, vs, mvs, ms } from './chunk-2CE3TQVY.mjs';
 import React from 'react';

package/dist/{chunk-KIHCWCWL.mjs → chunk-7LWRKMF5.mjs}

@@ -1,7 +1,7 @@
 import { PressableButton } from './chunk-3DKJ2GIC.mjs';
 import { selectionAsync } from './chunk-EJ7ZPXOH.mjs';
 import { COLOR_TRANSITION } from './chunk-DVK4G2GT.mjs';
-import { renderIcon } from './chunk-T7XZ7H7Y.mjs';
+import { renderIcon } from './chunk-KA7LTET3.mjs';
 import { useTheme } from './chunk-SOYNZDVY.mjs';
 import { vs, s, ms } from './chunk-2CE3TQVY.mjs';
 import React from 'react';

package/dist/{chunk-4I7D47FH.mjs → chunk-AJRVDP2H.mjs}

@@ -1,7 +1,7 @@
-import { Badge } from './chunk-TERDKCLE.mjs';
-import { Button } from './chunk-2TFTAWVJ.mjs';
+import { Badge } from './chunk-VF2ATYN3.mjs';
+import { Button } from './chunk-HTHGSXFG.mjs';
 import { RADIUS, SHADOWS } from './chunk-QY3X2UYR.mjs';
-import { renderIcon } from './chunk-T7XZ7H7Y.mjs';
+import { renderIcon } from './chunk-KA7LTET3.mjs';
 import { useTheme } from './chunk-SOYNZDVY.mjs';
 import { mvs, ms, vs, s } from './chunk-2CE3TQVY.mjs';
 import React from 'react';

package/dist/{chunk-6MKGPAR2.mjs → chunk-BEMIQXXU.mjs}

@@ -1,5 +1,5 @@
 import { RADIUS } from './chunk-QY3X2UYR.mjs';
-import { renderIcon } from './chunk-T7XZ7H7Y.mjs';
+import { renderIcon } from './chunk-KA7LTET3.mjs';
 import { useTheme } from './chunk-SOYNZDVY.mjs';
 import { s, vs, ms } from './chunk-2CE3TQVY.mjs';
 import React from 'react';

package/dist/chunk-BUMAMSTZ.mjs

@@ -0,0 +1,126 @@
+import { PressableButton } from './chunk-3DKJ2GIC.mjs';
+import { impactLight } from './chunk-EJ7ZPXOH.mjs';
+import { RADIUS } from './chunk-QY3X2UYR.mjs';
+import { renderIcon } from './chunk-KA7LTET3.mjs';
+import { useTheme } from './chunk-SOYNZDVY.mjs';
+import { s, mvs, ms } from './chunk-2CE3TQVY.mjs';
+import React from 'react';
+import { StyleSheet, View, Text } from 'react-native';
+
+var sizeConfig = {
+  sm: { button: s(40), icon: 16, valueFontSize: ms(18), valueLineHeight: mvs(24), valueMinWidth: s(32) },
+  md: { button: s(44), icon: 18, valueFontSize: ms(22), valueLineHeight: mvs(28), valueMinWidth: s(36) },
+  lg: { button: s(52), icon: 22, valueFontSize: ms(26), valueLineHeight: mvs(32), valueMinWidth: s(40) }
+};
+function NumberStepperBase({
+  value,
+  onValueChange,
+  min = 1,
+  max = 99,
+  step = 1,
+  size = "md",
+  disabled = false,
+  style,
+  accessibilityLabel
+}) {
+  const { colors } = useTheme();
+  const canDecrement = value > min && !disabled;
+  const canIncrement = value < max && !disabled;
+  const handleDecrement = () => {
+    if (!canDecrement) return;
+    impactLight();
+    onValueChange(Math.max(min, value - step));
+  };
+  const handleIncrement = () => {
+    if (!canIncrement) return;
+    impactLight();
+    onValueChange(Math.min(max, value + step));
+  };
+  const { button: buttonSize, icon: iconSize, valueFontSize, valueLineHeight, valueMinWidth } = sizeConfig[size];
+  const displayValue = String(value);
+  return /* @__PURE__ */ React.createElement(View, { style: [styles.container, style] }, /* @__PURE__ */ React.createElement(
+    PressableButton,
+    {
+      style: [
+        styles.button,
+        {
+          width: buttonSize,
+          height: buttonSize,
+          backgroundColor: colors.surface,
+          borderColor: colors.border
+        },
+        !canDecrement && styles.buttonDisabled
+      ],
+      enabled: canDecrement,
+      onPress: handleDecrement,
+      rippleColor: "transparent",
+      touchSoundDisabled: true,
+      accessibilityRole: "button",
+      accessibilityLabel: `Decrease, current value ${displayValue}`,
+      accessibilityState: { disabled: !canDecrement }
+    },
+    renderIcon("minus", iconSize, canDecrement ? colors.foreground : colors.foregroundMuted)
+  ), /* @__PURE__ */ React.createElement(
+    Text,
+    {
+      style: [
+        styles.value,
+        {
+          color: colors.foreground,
+          fontSize: valueFontSize,
+          lineHeight: valueLineHeight,
+          minWidth: valueMinWidth
+        }
+      ],
+      allowFontScaling: true,
+      accessibilityLabel: accessibilityLabel ?? `Quantity: ${displayValue}`,
+      accessibilityRole: "text"
+    },
+    displayValue
+  ), /* @__PURE__ */ React.createElement(
+    PressableButton,
+    {
+      style: [
+        styles.button,
+        {
+          width: buttonSize,
+          height: buttonSize,
+          backgroundColor: colors.surface,
+          borderColor: colors.border
+        },
+        !canIncrement && styles.buttonDisabled
+      ],
+      enabled: canIncrement,
+      onPress: handleIncrement,
+      rippleColor: "transparent",
+      touchSoundDisabled: true,
+      accessibilityRole: "button",
+      accessibilityLabel: `Increase, current value ${displayValue}`,
+      accessibilityState: { disabled: !canIncrement }
+    },
+    renderIcon("plus", iconSize, canIncrement ? colors.foreground : colors.foregroundMuted)
+  ));
+}
+var NumberStepper = React.memo(NumberStepperBase);
+var styles = StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: s(12)
+  },
+  button: {
+    borderRadius: RADIUS.md,
+    alignItems: "center",
+    justifyContent: "center",
+    borderWidth: 1.5
+  },
+  buttonDisabled: {
+    opacity: 0.35
+  },
+  value: {
+    fontFamily: "Sohne-Medium",
+    textAlign: "center"
+  }
+});
+
+export { NumberStepper };

package/dist/{chunk-UREA2GYY.mjs → chunk-DYT7BG5I.mjs}

@@ -1,7 +1,7 @@
 import { PressableChip } from './chunk-3DKJ2GIC.mjs';
 import { selectionAsync } from './chunk-EJ7ZPXOH.mjs';
 import { COLOR_TRANSITION } from './chunk-DVK4G2GT.mjs';
-import { renderIcon } from './chunk-T7XZ7H7Y.mjs';
+import { renderIcon } from './chunk-KA7LTET3.mjs';
 import { useTheme } from './chunk-SOYNZDVY.mjs';
 import { s, mvs, ms, vs } from './chunk-2CE3TQVY.mjs';
 import React from 'react';

package/dist/{chunk-Z4BVUWW6.mjs → chunk-ELXBDILQ.mjs}

@@ -1,8 +1,8 @@
-import { PagerDots } from './chunk-4K625MVM.mjs';
-import { renderIcon } from './chunk-T7XZ7H7Y.mjs';
+import { PagerDots } from './chunk-ZZ2R6KZ3.mjs';
+import { IconButton } from './chunk-T2KCAHOS.mjs';
 import { s, vs } from './chunk-2CE3TQVY.mjs';
 import React, { useState, useCallback } from 'react';
-import { StyleSheet, useWindowDimensions, Modal, ScrollView, TouchableOpacity, View } from 'react-native';
+import { StyleSheet, useWindowDimensions, Dimensions, Modal, View, ScrollView, Image } from 'react-native';
 import { Gesture, GestureHandlerRootView, GestureDetector } from 'react-native-gesture-handler';
 import Animated, { useSharedValue, runOnJS, withTiming, useAnimatedStyle } from 'react-native-reanimated';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
@@ -62,17 +62,12 @@ function ZoomableImage({ source, width, height, onZoomChange }) {
       { scale: scale.value }
     ]
   }));
-  return /* @__PURE__ */ React.createElement(GestureDetector, { gesture: composed }, /* @__PURE__ */ React.createElement(Animated.View, { style: [{ width, height }, styles.imageWrap] }, /* @__PURE__ */ React.createElement(
-    Animated.Image,
-    {
-      source,
-      style: [{ width, height }, animatedStyle],
-      resizeMode: "contain"
-    }
-  )));
+  return /* @__PURE__ */ React.createElement(GestureDetector, { gesture: composed }, /* @__PURE__ */ React.createElement(View, { style: [{ width, height }, styles.imageWrap], collapsable: false }, /* @__PURE__ */ React.createElement(Animated.View, { style: [{ width, height }, animatedStyle] }, /* @__PURE__ */ React.createElement(Image, { source, style: { width, height }, resizeMode: "contain" }))));
 }
 function ImageViewer({ images, visible, onClose, initialIndex = 0 }) {
-  const { width, height } = useWindowDimensions();
+  const window = useWindowDimensions();
+  const width = window.width > 0 ? window.width : Dimensions.get("window").width;
+  const height = window.height > 0 ? window.height : Dimensions.get("window").height;
   const insets = useSafeAreaInsets();
   const [index, setIndex] = useState(initialIndex);
   const [pagingEnabled, setPagingEnabled] = useState(true);
@@ -115,7 +110,7 @@ function ImageViewer({ images, visible, onClose, initialIndex = 0 }) {
     scrollRef.current?.scrollTo({ x: page * width, animated: true });
     setIndex(page);
   };
-  return /* @__PURE__ */ React.createElement(Modal, { visible, transparent: false, animationType: "fade", onRequestClose: onClose, statusBarTranslucent: true }, /* @__PURE__ */ React.createElement(GestureHandlerRootView, { style: styles.root }, /* @__PURE__ */ React.createElement(Animated.View, { style: [styles.backdrop, backdropStyle], pointerEvents: "none" }), /* @__PURE__ */ React.createElement(Animated.View, { style: [styles.container, dismissStyle] }, /* @__PURE__ */ React.createElement(GestureDetector, { gesture: swipeDown }, /* @__PURE__ */ React.createElement(Animated.View, { style: styles.root }, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement(Modal, { visible, transparent: false, animationType: "fade", onRequestClose: onClose, statusBarTranslucent: true }, /* @__PURE__ */ React.createElement(GestureHandlerRootView, { style: styles.root }, /* @__PURE__ */ React.createElement(Animated.View, { style: [styles.backdrop, backdropStyle], pointerEvents: "none" }), /* @__PURE__ */ React.createElement(Animated.View, { style: [styles.container, dismissStyle] }, /* @__PURE__ */ React.createElement(GestureDetector, { gesture: swipeDown }, /* @__PURE__ */ React.createElement(View, { style: styles.root, collapsable: false }, /* @__PURE__ */ React.createElement(
     ScrollView,
     {
       ref: scrollRef,
@@ -136,19 +131,18 @@ function ImageViewer({ images, visible, onClose, initialIndex = 0 }) {
         onZoomChange: (zoomed) => setPagingEnabled(!zoomed)
       }
     ))
-  ))), /* @__PURE__ */ React.createElement(
-    TouchableOpacity,
+  ))), /* @__PURE__ */ React.createElement(View, { style: [styles.closeButtonWrapper, { top: insets.top + vs(8) }] }, /* @__PURE__ */ React.createElement(
+    IconButton,
     {
-      style: [styles.closeButton, { top: insets.top + vs(8) }],
+      iconName: "x",
+      size: "md",
+      variant: "text",
+      style: { backgroundColor: "rgba(255,255,255,0.18)" },
+      iconColor: "#fff",
       onPress: onClose,
-      activeOpacity: 0.7,
-      touchSoundDisabled: true,
-      accessibilityRole: "button",
-      accessibilityLabel: "Close",
-      hitSlop: { top: 12, bottom: 12, left: 12, right: 12 }
-    },
-    renderIcon("x", 26, "#fff")
-  ), images.length > 1 ? /* @__PURE__ */ React.createElement(View, { style: [styles.dots, { bottom: insets.bottom + vs(16) }], pointerEvents: "box-none" }, /* @__PURE__ */ React.createElement(
+      accessibilityLabel: "Close"
+    }
+  )), images.length > 1 ? /* @__PURE__ */ React.createElement(View, { style: [styles.dots, { bottom: insets.bottom + vs(16) }], pointerEvents: "box-none" }, /* @__PURE__ */ React.createElement(
     PagerDots,
     {
       count: images.length,
@@ -175,15 +169,9 @@ var styles = StyleSheet.create({
     justifyContent: "center",
     overflow: "hidden"
   },
-  closeButton: {
+  closeButtonWrapper: {
     position: "absolute",
-    right: s(12),
-    width: s(40),
-    height: s(40),
-    borderRadius: s(20),
-    backgroundColor: "rgba(0,0,0,0.4)",
-    alignItems: "center",
-    justifyContent: "center"
+    right: s(12)
   },
   dots: {
     position: "absolute",

package/dist/{chunk-A4MDAP7G.mjs → chunk-FCSSQK3L.mjs}

@@ -1,4 +1,4 @@
-import { renderIcon } from './chunk-T7XZ7H7Y.mjs';
+import { renderIcon } from './chunk-KA7LTET3.mjs';
 import { useTheme } from './chunk-SOYNZDVY.mjs';
 import { mvs, ms, s } from './chunk-2CE3TQVY.mjs';
 import React from 'react';

package/dist/{chunk-2TFTAWVJ.mjs → chunk-HTHGSXFG.mjs}

@@ -1,7 +1,7 @@
 import { PressableButton } from './chunk-3DKJ2GIC.mjs';
 import { impactMedium } from './chunk-EJ7ZPXOH.mjs';
 import { TYPOGRAPHY, RADIUS } from './chunk-QY3X2UYR.mjs';
-import { renderIcon } from './chunk-T7XZ7H7Y.mjs';
+import { renderIcon } from './chunk-KA7LTET3.mjs';
 import { useTheme } from './chunk-SOYNZDVY.mjs';
 import { vs, s, mvs, ms } from './chunk-2CE3TQVY.mjs';
 import React from 'react';

package/dist/{chunk-VGTDN7SW.mjs → chunk-IX3NYLYQ.mjs}

@@ -2,7 +2,7 @@ import { useHover, usePressScale } from './chunk-YNROWHQJ.mjs';
 import { impactLight } from './chunk-EJ7ZPXOH.mjs';
 import { SPRINGS, PRESS_SCALE } from './chunk-DVK4G2GT.mjs';
 import { RADIUS, SHADOWS } from './chunk-QY3X2UYR.mjs';
-import { renderIcon } from './chunk-T7XZ7H7Y.mjs';
+import { renderIcon } from './chunk-KA7LTET3.mjs';
 import { useTheme } from './chunk-SOYNZDVY.mjs';
 import { mvs, ms, vs, s } from './chunk-2CE3TQVY.mjs';
 import React from 'react';

package/dist/{chunk-T7XZ7H7Y.mjs → chunk-KA7LTET3.mjs}

@@ -23,9 +23,9 @@ function configureIconFamilies(families) {
   activeFamilies = order.length > 0 ? order : ALL_FAMILIES;
   resolvedCache = null;
 }
-function buildCache() {
+function buildCache(families) {
   const cache = /* @__PURE__ */ new Map();
-  for (const family of activeFamilies) {
+  for (const family of families ?? activeFamilies) {
     const glyphMap = family.getGlyphMap();
     for (const iconName of Object.keys(glyphMap)) {
       cache.set(iconName, family);
@@ -39,6 +39,20 @@ function resolveFamily(name) {
   }
   return resolvedCache.get(name) ?? null;
 }
+var cachedIconNames = null;
+function getValidIconNames(families) {
+  if (families && families.length > 0) {
+    const tempFamilies = families.map((n) => ALL_FAMILIES.find((f) => f.name === n)).filter((f) => f !== void 0);
+    if (tempFamilies.length === 0) return [];
+    const cache = buildCache(tempFamilies);
+    return Array.from(cache.keys());
+  }
+  if (!cachedIconNames) {
+    const cache = buildCache();
+    cachedIconNames = Array.from(cache.keys());
+  }
+  return cachedIconNames;
+}
 function Icon({ name, size, color, family }) {
   let resolved = null;
   if (family) {
@@ -54,4 +68,4 @@ function renderIcon(name, size, color) {
   return React.createElement(Icon, { name, size, color });
 }
 
-export { Icon, configureIconFamilies, renderIcon };
+export { Icon, configureIconFamilies, getValidIconNames, renderIcon };

package/dist/{chunk-URI2WBIV.mjs → chunk-KOO4WITD.mjs}

@@ -2,7 +2,7 @@ import { PressableChip } from './chunk-3DKJ2GIC.mjs';
 import { selectionAsync } from './chunk-EJ7ZPXOH.mjs';
 import { COLOR_TRANSITION } from './chunk-DVK4G2GT.mjs';
 import { RADIUS } from './chunk-QY3X2UYR.mjs';
-import { renderIcon } from './chunk-T7XZ7H7Y.mjs';
+import { renderIcon } from './chunk-KA7LTET3.mjs';
 import { useTheme } from './chunk-SOYNZDVY.mjs';
 import { ms, mvs, s, vs } from './chunk-2CE3TQVY.mjs';
 import React from 'react';

package/dist/{chunk-JUXSWN54.mjs → chunk-NMU5FMQJ.mjs}

@@ -1,4 +1,4 @@
-import { Input } from './chunk-ZUR7AU5R.mjs';
+import { Input } from './chunk-SXLKNTA4.mjs';
 import { ms, vs } from './chunk-2CE3TQVY.mjs';
 import React from 'react';
 

package/dist/{chunk-LXJIIOYQ.mjs → chunk-RYZC432S.mjs}

@@ -1,6 +1,6 @@
 import { impactLight } from './chunk-EJ7ZPXOH.mjs';
 import { RADIUS } from './chunk-QY3X2UYR.mjs';
-import { renderIcon } from './chunk-T7XZ7H7Y.mjs';
+import { renderIcon } from './chunk-KA7LTET3.mjs';
 import { useTheme } from './chunk-SOYNZDVY.mjs';
 import { ms, vs, s, mvs } from './chunk-2CE3TQVY.mjs';
 import React from 'react';

package/dist/{chunk-JB67UOB5.mjs → chunk-S2R7UVOE.mjs}

@@ -1,4 +1,4 @@
-import { renderIcon } from './chunk-T7XZ7H7Y.mjs';
+import { renderIcon } from './chunk-KA7LTET3.mjs';
 import { useTheme } from './chunk-SOYNZDVY.mjs';
 import { mvs, ms, s } from './chunk-2CE3TQVY.mjs';
 import React from 'react';

package/dist/{chunk-ZUR7AU5R.mjs → chunk-SXLKNTA4.mjs}

@@ -1,5 +1,5 @@
 import { COLOR_TRANSITION } from './chunk-DVK4G2GT.mjs';
-import { renderIcon } from './chunk-T7XZ7H7Y.mjs';
+import { renderIcon } from './chunk-KA7LTET3.mjs';
 import { useTheme } from './chunk-SOYNZDVY.mjs';
 import { ms, s, vs } from './chunk-2CE3TQVY.mjs';
 import React, { useState } from 'react';

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

@@ -1,6 +1,6 @@
 import { PressableButton } from './chunk-3DKJ2GIC.mjs';
 import { impactLight } from './chunk-EJ7ZPXOH.mjs';
-import { renderIcon } from './chunk-T7XZ7H7Y.mjs';
+import { renderIcon } from './chunk-KA7LTET3.mjs';
 import { useTheme } from './chunk-SOYNZDVY.mjs';
 import { s, ms } from './chunk-2CE3TQVY.mjs';
 import React from 'react';

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

@@ -1,7 +1,7 @@
 import { PressableRow } from './chunk-3DKJ2GIC.mjs';
 import { selectionAsync } from './chunk-EJ7ZPXOH.mjs';
 import { RADIUS } from './chunk-QY3X2UYR.mjs';
-import { renderIcon } from './chunk-T7XZ7H7Y.mjs';
+import { renderIcon } from './chunk-KA7LTET3.mjs';
 import { useTheme } from './chunk-SOYNZDVY.mjs';
 import { vs, ms, s } from './chunk-2CE3TQVY.mjs';
 import React from 'react';

package/dist/{chunk-AZJF2BLK.mjs → chunk-TBNZHU6C.mjs}

@@ -1,4 +1,4 @@
-import { IconButton } from './chunk-3U4SSNWP.mjs';
+import { IconButton } from './chunk-T2KCAHOS.mjs';
 import { BREAKPOINTS } from './chunk-QY3X2UYR.mjs';
 import { useTheme } from './chunk-SOYNZDVY.mjs';
 import { mvs, ms, vs, s } from './chunk-2CE3TQVY.mjs';

package/dist/{chunk-Y4GL2MHX.mjs → chunk-TZDGAP5N.mjs}

@@ -13,6 +13,7 @@ function ImageUpload({
   onChange,
   loading = false,
   placeholder = "Tap to add image",
+  showPlaceholderText = true,
   width,
   height = 200,
   borderRadius = RADIUS.lg,
@@ -25,23 +26,31 @@ function ImageUpload({
   const handlePress = async () => {
     if (disabled || loading) return;
     impactLight();
-    let ImagePicker;
+    let picker;
     try {
-      ImagePicker = await import('expo-image-picker');
+      const mod = await import('expo-image-picker/build/ExponentImagePicker');
+      picker = mod.default;
     } catch {
-      if (__DEV__) console.warn("[ImageUpload] expo-image-picker not installed. Add it as a dependency.");
-      return;
+      try {
+        picker = await import('expo-image-picker');
+      } catch {
+        if (__DEV__) console.warn("[ImageUpload] expo-image-picker not installed.");
+        return;
+      }
     }
     if (Platform.OS !== "web") {
-      const { status } = await ImagePicker.requestMediaLibraryPermissionsAsync();
-      if (status !== "granted") return;
+      try {
+        const { status } = await picker.requestMediaLibraryPermissionsAsync();
+        if (status !== "granted") return;
+      } catch {
+      }
     }
-    const result = await ImagePicker.launchImageLibraryAsync({
+    const result = await picker.launchImageLibraryAsync({
       mediaTypes: ["images"],
       allowsEditing: true,
       quality: 0.8
     });
-    if (!result.canceled && result.assets[0]) {
+    if (!result.canceled && result.assets?.[0]) {
       onChange?.(result.assets[0].uri);
     }
   };
@@ -74,7 +83,15 @@ function ImageUpload({
         style: [StyleSheet.absoluteFillObject, { borderRadius }],
         resizeMode
       }
-    ) : /* @__PURE__ */ React.createElement(View, { style: styles.placeholder }, /* @__PURE__ */ React.createElement(Feather, { name: "image", size: ms(28), color: colors.foregroundMuted }), /* @__PURE__ */ React.createElement(Text, { style: [styles.placeholderText, { color: colors.foregroundMuted }], allowFontScaling: true }, placeholder)),
+    ) : /* @__PURE__ */ React.createElement(View, { style: styles.placeholder }, /* @__PURE__ */ React.createElement(Feather, { name: "image", size: ms(28), color: colors.foregroundMuted }), showPlaceholderText ? /* @__PURE__ */ React.createElement(
+      Text,
+      {
+        style: [styles.placeholderText, { color: colors.foregroundMuted }],
+        numberOfLines: 1,
+        allowFontScaling: true
+      },
+      placeholder
+    ) : null),
     loading ? /* @__PURE__ */ React.createElement(View, { style: [styles.loadingOverlay, { backgroundColor: colors.overlay }] }, /* @__PURE__ */ React.createElement(Spinner, { size: "md" })) : null,
     value && !loading ? /* @__PURE__ */ React.createElement(View, { style: styles.editBadge, pointerEvents: "none" }, /* @__PURE__ */ React.createElement(View, { style: [styles.editBadgeInner, { backgroundColor: colors.overlay }] }, /* @__PURE__ */ React.createElement(Feather, { name: "edit-2", size: ms(12), color: "#fff" }))) : null
   );
@@ -88,7 +105,8 @@ var styles = StyleSheet.create({
   },
   placeholderText: {
     fontFamily: "Sohne-Regular",
-    fontSize: ms(13)
+    fontSize: ms(13),
+    textAlign: "center"
   },
   loadingOverlay: {
     ...StyleSheet.absoluteFillObject,

package/dist/{chunk-CZCQZHG6.mjs → chunk-U2XJFYED.mjs}

@@ -1,5 +1,5 @@
 import { TIMINGS, EASINGS } from './chunk-DVK4G2GT.mjs';
-import { renderIcon } from './chunk-T7XZ7H7Y.mjs';
+import { renderIcon } from './chunk-KA7LTET3.mjs';
 import { useTheme } from './chunk-SOYNZDVY.mjs';
 import { vs, ms, s } from './chunk-2CE3TQVY.mjs';
 import React, { useState, useEffect } from 'react';

package/dist/{chunk-TERDKCLE.mjs → chunk-VF2ATYN3.mjs}

@@ -1,4 +1,4 @@
-import { renderIcon } from './chunk-T7XZ7H7Y.mjs';
+import { renderIcon } from './chunk-KA7LTET3.mjs';
 import { useTheme } from './chunk-SOYNZDVY.mjs';
 import { vs, s, ms } from './chunk-2CE3TQVY.mjs';
 import React from 'react';

package/dist/{chunk-OHBNABL5.mjs → chunk-VKID2D2I.mjs}

@@ -1,7 +1,7 @@
 import { PressableRow } from './chunk-3DKJ2GIC.mjs';
 import { selectionAsync } from './chunk-EJ7ZPXOH.mjs';
 import { RADIUS } from './chunk-QY3X2UYR.mjs';
-import { renderIcon } from './chunk-T7XZ7H7Y.mjs';
+import { renderIcon } from './chunk-KA7LTET3.mjs';
 import { useTheme } from './chunk-SOYNZDVY.mjs';
 import { ms, s, mvs, vs } from './chunk-2CE3TQVY.mjs';
 import React from 'react';

package/dist/{chunk-QKH5ZOD5.mjs → chunk-WF2XDFRK.mjs}

@@ -13,9 +13,11 @@ 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);
+var DISABLED_OPACITY = 0.45;
 function Switch({ checked = false, onCheckedChange, disabled, style, accessibilityLabel }) {
   const { colors } = useTheme();
-  return /* @__PURE__ */ React.createElement(View, { style: [{ opacity: disabled ? 0.45 : 1, alignSelf: "flex-start" }, style] }, /* @__PURE__ */ React.createElement(
+  const isDisabled = !!disabled;
+  return /* @__PURE__ */ React.createElement(View, { style: [{ alignSelf: "flex-start" }, style] }, /* @__PURE__ */ React.createElement(
     TouchableOpacity,
     {
       onPress: () => {
@@ -27,47 +29,68 @@ function Switch({ checked = false, onCheckedChange, disabled, style, accessibili
       touchSoundDisabled: true,
       accessibilityRole: "switch",
       accessibilityLabel,
-      accessibilityState: { checked, disabled: !!disabled },
+      accessibilityState: { checked, disabled: isDisabled },
       style: styles.touchable
     },
-    /* @__PURE__ */ React.createElement(
+    /* @__PURE__ */ React.createElement(View, { style: styles.trackContainer }, /* @__PURE__ */ React.createElement(
       EaseView,
       {
-        style: styles.track,
+        style: [styles.track, isDisabled && styles.disabledTrack],
         animate: { backgroundColor: checked ? colors.primary : colors.surfaceStrong },
         transition: COLOR_TRANSITION
+      }
+    ), /* @__PURE__ */ React.createElement(
+      EaseView,
+      {
+        style: [styles.trackBorder, { borderWidth: 1.5 }],
+        pointerEvents: "none",
+        animate: { borderColor: checked ? "transparent" : colors.border },
+        transition: COLOR_TRANSITION
+      }
+    ), /* @__PURE__ */ React.createElement(
+      EaseView,
+      {
+        style: [styles.thumb, { backgroundColor: colors.primaryForeground }],
+        animate: { translateX: checked ? THUMB_TRAVEL : 0 },
+        transition: SPRING_ELASTIC
       },
       /* @__PURE__ */ React.createElement(
         EaseView,
         {
-          style: [styles.trackBorder, { borderWidth: 1.5 }],
-          pointerEvents: "none",
-          animate: { borderColor: checked ? "transparent" : colors.border },
-          transition: COLOR_TRANSITION
-        }
+          style: styles.iconWrapper,
+          animate: { opacity: checked ? isDisabled ? DISABLED_OPACITY : 1 : 0 },
+          transition: OPACITY_TRANSITION
+        },
+        /* @__PURE__ */ React.createElement(Feather, { name: "check", size: ICON_SIZE, color: colors.primary })
       ),
       /* @__PURE__ */ React.createElement(
         EaseView,
         {
-          style: [styles.thumb, { backgroundColor: colors.primaryForeground }],
-          animate: { translateX: checked ? THUMB_TRAVEL : 0 },
-          transition: SPRING_ELASTIC
+          style: styles.iconWrapper,
+          animate: { opacity: checked ? 0 : isDisabled ? DISABLED_OPACITY : 1 },
+          transition: OPACITY_TRANSITION
         },
-        /* @__PURE__ */ React.createElement(EaseView, { style: styles.iconWrapper, animate: { opacity: checked ? 1 : 0 }, transition: OPACITY_TRANSITION }, /* @__PURE__ */ React.createElement(Feather, { name: "check", size: ICON_SIZE, color: colors.primary })),
-        /* @__PURE__ */ React.createElement(EaseView, { style: styles.iconWrapper, animate: { opacity: checked ? 0 : 1 }, transition: OPACITY_TRANSITION }, /* @__PURE__ */ React.createElement(Feather, { name: "x", size: ICON_SIZE, color: colors.foregroundMuted }))
+        /* @__PURE__ */ React.createElement(Feather, { name: "x", size: ICON_SIZE, color: colors.foregroundMuted })
       )
-    )
+    ))
   ));
 }
 var styles = StyleSheet.create({
   touchable: {
     alignSelf: "flex-start"
   },
-  track: {
+  trackContainer: {
+    position: "relative",
     width: TRACK_WIDTH,
-    height: TRACK_HEIGHT,
+    height: TRACK_HEIGHT
+  },
+  track: {
+    ...StyleSheet.absoluteFillObject,
     borderRadius: TRACK_HEIGHT / 2
   },
+  disabledTrack: {
+    opacity: DISABLED_OPACITY
+  },
   trackBorder: {
     ...StyleSheet.absoluteFillObject,
     borderRadius: TRACK_HEIGHT / 2