@muja-ui/native 0.3.0 → 0.4.0

package/dist/index.js

@@ -1,6 +1,6 @@
 import { createContext, forwardRef, useState, useContext, useCallback, useMemo, useRef, useEffect } from 'react';
-import { View, Text as Text$1, Pressable, ActivityIndicator, TextInput, Platform, useColorScheme, StyleSheet, useWindowDimensions, Animated, Easing, PanResponder, Modal as Modal$1, ScrollView, RefreshControl, Image } from 'react-native';
-import { darkTheme, lightTheme, getIcon } from '@muja-ui/core';
+import { View, Text as Text$1, Pressable, ActivityIndicator, TextInput, StyleSheet, Platform, useColorScheme, Switch as Switch$1, useWindowDimensions, PanResponder, Animated, Modal as Modal$1, ScrollView, Easing, RefreshControl, Image } from 'react-native';
+import { createTheme, darkTheme, lightTheme, getIcon } from '@muja-ui/core';
 export { createTheme, darkTheme, lightTheme, registerIcons } from '@muja-ui/core';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { warnOnce, clamp } from '@muja-ui/utils';
@@ -9,6 +9,25 @@ import { MinusIcon, CheckIcon, ChevronDownIcon, InfoIcon, AlertCircleIcon, Alert
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 // src/components/Box.tsx
+function isIOS() {
+  return Platform.OS === "ios";
+}
+var iosThemeOverride = {
+  typography: {
+    fontSize: { xs: 13, sm: 15, md: 17, lg: 20, xl: 22, "2xl": 28, "3xl": 34, "4xl": 40 }
+  },
+  radius: { sm: 6, md: 10, lg: 12, xl: 14, "2xl": 20 }
+};
+function adaptThemeToPlatform(theme) {
+  return isIOS() ? createTheme(theme, iosThemeOverride) : theme;
+}
+var IOS_PRESSED_OPACITY = 0.6;
+var sheetSpring = {
+  stiffness: 320,
+  damping: 34,
+  mass: 1,
+  overshootClamping: true
+};
 var ThemeContext = createContext(null);
 function ThemeProvider({
   theme = lightTheme,
@@ -16,6 +35,7 @@ function ThemeProvider({
   defaultColorMode = "system",
   colorMode: colorModeProp,
   onColorModeChange,
+  platformAdaptive = true,
   children
 }) {
   const [uncontrolledMode, setUncontrolledMode] = useState(defaultColorMode);
@@ -32,15 +52,20 @@ function ThemeProvider({
   const toggleColorMode = useCallback(() => {
     setColorMode(resolvedColorMode === "dark" ? "light" : "dark");
   }, [resolvedColorMode, setColorMode]);
+  const activeTheme = resolvedColorMode === "dark" ? darkTheme2 : theme;
+  const renderedTheme = useMemo(
+    () => platformAdaptive ? adaptThemeToPlatform(activeTheme) : activeTheme,
+    [activeTheme, platformAdaptive]
+  );
   const value = useMemo(
     () => ({
-      theme: resolvedColorMode === "dark" ? darkTheme2 : theme,
+      theme: renderedTheme,
       colorMode,
       resolvedColorMode,
       setColorMode,
       toggleColorMode
     }),
-    [theme, darkTheme2, colorMode, resolvedColorMode, setColorMode, toggleColorMode]
+    [renderedTheme, colorMode, resolvedColorMode, setColorMode, toggleColorMode]
   );
   return /* @__PURE__ */ jsx(ThemeContext.Provider, { value, children });
 }
@@ -199,6 +224,50 @@ function Divider({ orientation = "horizontal", color = "border", style }) {
     }
   );
 }
+var SYSTEM_SANS = /* @__PURE__ */ new Set([
+  "-apple-system",
+  "blinkmacsystemfont",
+  "system-ui",
+  "ui-sans-serif",
+  "ui-rounded",
+  "sans-serif",
+  "system",
+  "roboto"
+]);
+var SYSTEM_MONO = /* @__PURE__ */ new Set(["ui-monospace", "monospace"]);
+var SYSTEM_SERIF = /* @__PURE__ */ new Set(["ui-serif", "serif"]);
+var IOS_ONLY = /* @__PURE__ */ new Set([
+  "helvetica neue",
+  "georgia",
+  "menlo",
+  "times new roman",
+  "times",
+  "arial"
+]);
+var NEVER_INSTALLED = /* @__PURE__ */ new Set([
+  "segoe ui",
+  "sfmono-regular",
+  "sf mono",
+  "liberation mono",
+  "consolas",
+  "cambria"
+]);
+function nativeFontFamily(stack) {
+  if (!stack) return void 0;
+  const ios = Platform.OS === "ios";
+  for (const raw of stack.split(",")) {
+    const name = raw.trim().replace(/^['"]|['"]$/g, "");
+    if (!name) continue;
+    const key = name.toLowerCase();
+    if (SYSTEM_SANS.has(key)) return void 0;
+    if (SYSTEM_MONO.has(key)) return ios ? "Menlo" : "monospace";
+    if (SYSTEM_SERIF.has(key)) return ios ? "Georgia" : "serif";
+    if (NEVER_INSTALLED.has(key)) continue;
+    if (!ios && IOS_ONLY.has(key)) continue;
+    return name;
+  }
+  return void 0;
+}
 var Text = forwardRef(function Text2(props, ref) {
   const theme = useTheme();
   const {
@@ -214,13 +283,10 @@ var Text = forwardRef(function Text2(props, ref) {
     numberOfLines,
     ...restProps
   } = props;
-  const { style: tokenStyle, rest } = splitStyleProps(
-    restProps,
-    theme
-  );
+  const { style: tokenStyle, rest } = splitStyleProps(restProps, theme);
   const fontSize = theme.typography.fontSize[size];
   const textStyle = {
-    fontFamily: theme.typography.fontFamily[family],
+    fontFamily: nativeFontFamily(theme.typography.fontFamily[family]),
     fontSize,
     color: theme.colors[color],
     fontWeight: weight ? theme.typography.fontWeight[weight] : void 0,
@@ -247,7 +313,8 @@ var defaultSize = {
   5: "md",
   6: "sm"
 };
-var Heading = forwardRef(function Heading2({ level = 2, size, weight = "semibold", leading = "tight", ...rest }, ref) {
+var Heading = forwardRef(function Heading2({ level = 2, size, weight, leading = "tight", ...rest }, ref) {
+  const resolvedWeight = weight ?? (isIOS() && level <= 2 ? "bold" : "semibold");
   return /* @__PURE__ */ jsx(
     Text,
     {
@@ -255,7 +322,7 @@ var Heading = forwardRef(function Heading2({ level = 2, size, weight = "semibold
       accessibilityRole: "header",
       "aria-level": level,
       size: size ?? defaultSize[level],
-      weight,
+      weight: resolvedWeight,
       leading,
       ...rest
     }
@@ -308,6 +375,7 @@ function Icon({
 // src/system/variants.ts
 function variantColors(variant, theme) {
   const { colors, borderWidth } = theme;
+  const ios = isIOS();
   switch (variant) {
     case "primary":
       return {
@@ -334,6 +402,13 @@ function variantColors(variant, theme) {
         foreground: "onDanger"
       };
     case "outline":
+      if (ios) {
+        return {
+          background: colors.primarySubtle,
+          backgroundPressed: colors.primarySubtleHover,
+          foreground: "primaryText"
+        };
+      }
       return {
         background: "transparent",
         backgroundPressed: colors.surfaceActive,
@@ -344,8 +419,8 @@ function variantColors(variant, theme) {
     case "ghost":
       return {
         background: "transparent",
-        backgroundPressed: colors.surfaceActive,
-        foreground: "text"
+        backgroundPressed: ios ? "transparent" : colors.surfaceActive,
+        foreground: ios ? "primaryText" : "text"
       };
     case "link":
       return {
@@ -356,6 +431,10 @@ function variantColors(variant, theme) {
       };
   }
 }
+function pressFeedback(pressed, colors) {
+  if (!pressed) return { backgroundColor: colors.background, opacity: 1 };
+  return isIOS() ? { backgroundColor: colors.background, opacity: IOS_PRESSED_OPACITY } : { backgroundColor: colors.backgroundPressed, opacity: 1 };
+}
 function sizeMetrics(size, theme) {
   switch (size) {
     case "sm":
@@ -403,6 +482,7 @@ var Button = forwardRef(function Button2({
   const metrics = sizeMetrics(size, theme);
   const isInert = disabled || loading;
   const isLink = variant === "link";
+  const slop = metrics.height < 44 ? (44 - metrics.height) / 2 : 0;
   return /* @__PURE__ */ jsxs(
     Pressable,
     {
@@ -411,23 +491,27 @@ var Button = forwardRef(function Button2({
       accessibilityState: { disabled: isInert, busy: loading },
       accessibilityLabel,
       disabled: isInert,
-      style: ({ pressed }) => [
-        {
-          flexDirection: "row",
-          alignItems: "center",
-          justifyContent: "center",
-          gap: metrics.gap,
-          height: isLink ? void 0 : metrics.height,
-          paddingHorizontal: isLink ? 0 : metrics.paddingHorizontal,
-          borderRadius: isLink ? 0 : theme.radius.md,
-          backgroundColor: pressed ? colors.backgroundPressed : colors.background,
-          borderColor: colors.borderColor,
-          borderWidth: colors.borderWidth,
-          alignSelf: fullWidth ? "stretch" : "flex-start",
-          opacity: isInert ? theme.opacity.disabled : 1
-        },
-        style
-      ],
+      hitSlop: slop > 0 ? { top: slop, bottom: slop } : void 0,
+      style: ({ pressed }) => {
+        const feedback = pressFeedback(pressed, colors);
+        return [
+          {
+            flexDirection: "row",
+            alignItems: "center",
+            justifyContent: "center",
+            gap: metrics.gap,
+            minHeight: isLink ? void 0 : metrics.height,
+            paddingHorizontal: isLink ? 0 : metrics.paddingHorizontal,
+            borderRadius: isLink ? 0 : size === "lg" ? theme.radius.lg : theme.radius.md,
+            backgroundColor: feedback.backgroundColor,
+            borderColor: colors.borderColor,
+            borderWidth: colors.borderWidth,
+            alignSelf: fullWidth ? "stretch" : "flex-start",
+            opacity: isInert ? theme.opacity.disabled : feedback.opacity
+          },
+          style
+        ];
+      },
       ...rest,
       children: [
         loading ? /* @__PURE__ */ jsx(ActivityIndicator, { size: "small", color: theme.colors[colors.foreground] }) : leftIcon ? /* @__PURE__ */ jsx(View, { children: leftIcon }) : null,
@@ -469,20 +553,23 @@ var IconButton = forwardRef(function IconButton2({
       accessibilityState: { disabled: isInert, busy: loading },
       disabled: isInert,
       hitSlop: dimension < 44 ? (44 - dimension) / 2 : void 0,
-      style: ({ pressed }) => [
-        {
-          width: dimension,
-          height: dimension,
-          alignItems: "center",
-          justifyContent: "center",
-          borderRadius: round ? theme.radius.full : theme.radius.md,
-          backgroundColor: pressed ? colors.backgroundPressed : colors.background,
-          borderColor: colors.borderColor,
-          borderWidth: colors.borderWidth,
-          opacity: isInert ? theme.opacity.disabled : 1
-        },
-        style
-      ],
+      style: ({ pressed }) => {
+        const feedback = pressFeedback(pressed, colors);
+        return [
+          {
+            width: dimension,
+            height: dimension,
+            alignItems: "center",
+            justifyContent: "center",
+            borderRadius: round ? theme.radius.full : theme.radius.md,
+            backgroundColor: feedback.backgroundColor,
+            borderColor: colors.borderColor,
+            borderWidth: colors.borderWidth,
+            opacity: isInert ? theme.opacity.disabled : feedback.opacity
+          },
+          style
+        ];
+      },
       ...rest,
       children: loading ? /* @__PURE__ */ jsx(ActivityIndicator, { size: "small", color: theme.colors[colors.foreground] }) : icon
     }
@@ -500,9 +587,13 @@ var Input = forwardRef(function Input2({
   ...rest
 }, ref) {
   const theme = useTheme();
+  const { resolvedColorMode } = useColorMode();
   const metrics = sizeMetrics(size, theme);
   const [focused, setFocused] = useState(false);
+  const ios = isIOS();
   const borderColor = invalid ? theme.colors.danger : focused ? theme.colors.focusRing : theme.colors.border;
+  const borderWidth = ios ? focused || invalid ? theme.borderWidth.thin : 0 : focused || invalid ? theme.borderWidth.medium : theme.borderWidth.thin;
+  const backgroundColor = ios ? disabled ? theme.colors.bgSubtle : theme.colors.bgMuted : disabled ? theme.colors.bgMuted : theme.colors.surface;
   return /* @__PURE__ */ jsxs(
     View,
     {
@@ -511,12 +602,12 @@ var Input = forwardRef(function Input2({
           flexDirection: "row",
           alignItems: "center",
           gap: metrics.gap,
-          height: metrics.height,
+          minHeight: metrics.height,
           paddingHorizontal: metrics.paddingHorizontal,
           borderRadius: theme.radius.md,
-          borderWidth: focused || invalid ? theme.borderWidth.medium : theme.borderWidth.thin,
+          borderWidth,
           borderColor,
-          backgroundColor: disabled ? theme.colors.bgMuted : theme.colors.surface
+          backgroundColor
         },
         style
       ],
@@ -531,6 +622,8 @@ var Input = forwardRef(function Input2({
             "aria-disabled": disabled || void 0,
             placeholderTextColor: theme.colors.textMuted,
             selectionColor: theme.colors.primary,
+            keyboardAppearance: resolvedColorMode,
+            clearButtonMode: ios && !rightElement ? "while-editing" : void 0,
             onFocus: (event) => {
               setFocused(true);
               onFocus?.(event);
@@ -541,9 +634,9 @@ var Input = forwardRef(function Input2({
             },
             style: {
               flex: 1,
-              // Android adds its own vertical padding; zero it so `height` wins.
+              // Android adds its own vertical padding; zero it so `minHeight` wins.
               paddingVertical: 0,
-              fontFamily: theme.typography.fontFamily.sans,
+              fontFamily: nativeFontFamily(theme.typography.fontFamily.sans),
               fontSize: theme.typography.fontSize[metrics.fontSize],
               color: disabled ? theme.colors.textDisabled : theme.colors.text
             },
@@ -557,10 +650,12 @@ var Input = forwardRef(function Input2({
 });
 var Textarea = forwardRef(function Textarea2({ invalid = false, disabled = false, rows = 4, style, onFocus, onBlur, ...rest }, ref) {
   const theme = useTheme();
+  const { resolvedColorMode } = useColorMode();
   const [focused, setFocused] = useState(false);
-  const lineHeight = Math.round(
-    theme.typography.fontSize.md * theme.typography.lineHeight.normal
-  );
+  const ios = isIOS();
+  const lineHeight = Math.round(theme.typography.fontSize.md * theme.typography.lineHeight.normal);
+  const borderWidth = ios ? focused || invalid ? theme.borderWidth.thin : 0 : focused || invalid ? theme.borderWidth.medium : theme.borderWidth.thin;
+  const backgroundColor = ios ? disabled ? theme.colors.bgSubtle : theme.colors.bgMuted : disabled ? theme.colors.bgMuted : theme.colors.surface;
   return /* @__PURE__ */ jsx(
     TextInput,
     {
@@ -571,6 +666,7 @@ var Textarea = forwardRef(function Textarea2({ invalid = false, disabled = false
       "aria-invalid": invalid || void 0,
       placeholderTextColor: theme.colors.textMuted,
       selectionColor: theme.colors.primary,
+      keyboardAppearance: resolvedColorMode,
       onFocus: (event) => {
         setFocused(true);
         onFocus?.(event);
@@ -584,10 +680,10 @@ var Textarea = forwardRef(function Textarea2({ invalid = false, disabled = false
           minHeight: rows * lineHeight + theme.space[4],
           padding: theme.space[3],
           borderRadius: theme.radius.md,
-          borderWidth: focused || invalid ? theme.borderWidth.medium : theme.borderWidth.thin,
+          borderWidth,
           borderColor: invalid ? theme.colors.danger : focused ? theme.colors.focusRing : theme.colors.border,
-          backgroundColor: disabled ? theme.colors.bgMuted : theme.colors.surface,
-          fontFamily: theme.typography.fontFamily.sans,
+          backgroundColor,
+          fontFamily: nativeFontFamily(theme.typography.fontFamily.sans),
           fontSize: theme.typography.fontSize.md,
           lineHeight,
           color: disabled ? theme.colors.textDisabled : theme.colors.text
@@ -644,13 +740,10 @@ function Checkbox({
   style
 }) {
   const theme = useTheme();
-  const [checked, setChecked] = useControllableState(
-    controlledChecked,
-    defaultChecked,
-    onChange
-  );
+  const [checked, setChecked] = useControllableState(controlledChecked, defaultChecked, onChange);
   const dimension = boxSize2[size];
   const filled = checked || indeterminate;
+  const ios = isIOS();
   return /* @__PURE__ */ jsxs(
     Pressable,
     {
@@ -680,7 +773,7 @@ function Checkbox({
               height: dimension,
               alignItems: "center",
               justifyContent: "center",
-              borderRadius: theme.radius.sm,
+              borderRadius: ios ? theme.radius.full : theme.radius.sm,
               borderWidth: theme.borderWidth.medium,
               borderColor: invalid ? theme.colors.danger : filled ? theme.colors.primary : theme.colors.borderStrong,
               backgroundColor: filled ? theme.colors.primary : theme.colors.surface
@@ -696,7 +789,7 @@ function Checkbox({
             ) : null
           }
         ),
-        children != null ? typeof children === "string" ? /* @__PURE__ */ jsx(Text, { size: size === "lg" ? "md" : "sm", style: { flexShrink: 1 }, children }) : children : null
+        children != null ? typeof children === "string" ? /* @__PURE__ */ jsx(Text, { size: size === "lg" || ios ? "md" : "sm", style: { flexShrink: 1 }, children }) : children : null
       ]
     }
   );
@@ -706,6 +799,7 @@ var track = {
   md: { width: 44, height: 26, thumb: 22 },
   lg: { width: 52, height: 32, thumb: 28 }
 };
+var iosScale = { sm: 0.8, md: 1, lg: 1 };
 function Switch({
   checked: controlledChecked,
   defaultChecked = false,
@@ -716,11 +810,40 @@ function Switch({
   style
 }) {
   const theme = useTheme();
-  const [checked, setChecked] = useControllableState(
-    controlledChecked,
-    defaultChecked,
-    onChange
-  );
+  const [checked, setChecked] = useControllableState(controlledChecked, defaultChecked, onChange);
+  const row = {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: theme.space[3]
+  };
+  if (isIOS()) {
+    const label = typeof children === "string" ? children : void 0;
+    const scale = iosScale[size];
+    return /* @__PURE__ */ jsxs(View, { style: [row, style], children: [
+      children != null ? label !== void 0 ? /* @__PURE__ */ jsx(
+        Text,
+        {
+          size: "md",
+          style: { flexShrink: 1, opacity: disabled ? theme.opacity.disabled : 1 },
+          children: label
+        }
+      ) : children : null,
+      /* @__PURE__ */ jsx(
+        Switch$1,
+        {
+          value: checked,
+          onValueChange: setChecked,
+          disabled,
+          accessibilityLabel: label,
+          trackColor: { false: theme.colors.secondaryActive, true: theme.colors.primary },
+          thumbColor: theme.colors.onPrimary,
+          ios_backgroundColor: theme.colors.secondaryActive,
+          style: scale !== 1 ? { transform: [{ scale }] } : void 0
+        }
+      )
+    ] });
+  }
   const metrics = track[size];
   const inset = (metrics.height - metrics.thumb) / 2;
   return /* @__PURE__ */ jsxs(
@@ -730,16 +853,7 @@ function Switch({
       accessibilityState: { checked, disabled },
       disabled,
       onPress: () => setChecked(!checked),
-      style: [
-        {
-          flexDirection: "row",
-          alignItems: "center",
-          justifyContent: "space-between",
-          gap: theme.space[3],
-          opacity: disabled ? theme.opacity.disabled : 1
-        },
-        style
-      ],
+      style: [row, { opacity: disabled ? theme.opacity.disabled : 1 }, style],
       children: [
         children != null ? typeof children === "string" ? /* @__PURE__ */ jsx(Text, { size: "sm", style: { flexShrink: 1 }, children }) : children : null,
         /* @__PURE__ */ jsx(
@@ -866,11 +980,42 @@ function Radio({ value, disabled = false, children, style }) {
             ) : null
           }
         ),
-        children != null ? typeof children === "string" ? /* @__PURE__ */ jsx(Text, { size: group.size === "lg" ? "md" : "sm", style: { flexShrink: 1 }, children }) : children : null
+        children != null ? typeof children === "string" ? /* @__PURE__ */ jsx(Text, { size: group.size === "lg" || isIOS() ? "md" : "sm", style: { flexShrink: 1 }, children }) : children : null
       ]
     }
   );
 }
+function useSheetTransition(open, distance) {
+  const theme = useTheme();
+  const translateY = useRef(new Animated.Value(distance)).current;
+  const backdrop = useRef(new Animated.Value(0)).current;
+  useEffect(() => {
+    const animation = open ? Animated.parallel([
+      Animated.spring(translateY, { toValue: 0, ...sheetSpring, useNativeDriver: true }),
+      Animated.timing(backdrop, {
+        toValue: 1,
+        duration: theme.motion.duration.normal,
+        easing: Easing.out(Easing.quad),
+        useNativeDriver: true
+      })
+    ]) : Animated.parallel([
+      Animated.timing(translateY, {
+        toValue: distance,
+        duration: theme.motion.duration.fast,
+        easing: Easing.in(Easing.cubic),
+        useNativeDriver: true
+      }),
+      Animated.timing(backdrop, {
+        toValue: 0,
+        duration: theme.motion.duration.fast,
+        useNativeDriver: true
+      })
+    ]);
+    animation.start();
+    return () => animation.stop();
+  }, [open, distance, translateY, backdrop, theme.motion.duration]);
+  return { translateY, backdrop };
+}
 var DISMISS_THRESHOLD = 96;
 function BottomSheet({
   open,
@@ -885,16 +1030,9 @@ function BottomSheet({
   const theme = useTheme();
   const insets = useSafeAreaInsets();
   const { height } = useWindowDimensions();
-  const translateY = useRef(new Animated.Value(height)).current;
+  const { translateY, backdrop } = useSheetTransition(open, height);
   const dragY = useRef(0);
-  useEffect(() => {
-    Animated.timing(translateY, {
-      toValue: open ? 0 : height,
-      duration: open ? theme.motion.duration.normal : theme.motion.duration.fast,
-      easing: Easing.out(Easing.cubic),
-      useNativeDriver: true
-    }).start();
-  }, [open, height, translateY, theme.motion.duration]);
+  const ios = isIOS();
   const panResponder = useRef(
     PanResponder.create({
       onMoveShouldSetPanResponder: (_event, gesture) => gesture.dy > 4,
@@ -908,7 +1046,11 @@ function BottomSheet({
         if (dragY.current > DISMISS_THRESHOLD) {
           onClose();
         } else {
-          Animated.spring(translateY, { toValue: 0, useNativeDriver: true }).start();
+          Animated.spring(translateY, {
+            toValue: 0,
+            ...sheetSpring,
+            useNativeDriver: true
+          }).start();
         }
         dragY.current = 0;
       }
@@ -924,11 +1066,17 @@ function BottomSheet({
       onRequestClose: onClose,
       children: /* @__PURE__ */ jsxs(View, { style: { flex: 1, justifyContent: "flex-end" }, children: [
         /* @__PURE__ */ jsx(
-          Pressable,
+          Animated.View,
           {
-            accessibilityLabel: closeOnOverlayPress ? "Close" : void 0,
-            onPress: closeOnOverlayPress ? onClose : void 0,
-            style: { flex: 1, backgroundColor: theme.colors.overlay }
+            style: { flex: 1, backgroundColor: theme.colors.overlay, opacity: backdrop },
+            children: /* @__PURE__ */ jsx(
+              Pressable,
+              {
+                accessibilityLabel: closeOnOverlayPress ? "Close" : void 0,
+                onPress: closeOnOverlayPress ? onClose : void 0,
+                style: { flex: 1 }
+              }
+            )
           }
         ),
         /* @__PURE__ */ jsxs(
@@ -948,32 +1096,39 @@ function BottomSheet({
               style
             ],
             children: [
-              /* @__PURE__ */ jsxs(View, { ...panResponder.panHandlers, style: { paddingTop: theme.space[3] }, children: [
-                /* @__PURE__ */ jsx(
-                  View,
-                  {
-                    style: {
-                      alignSelf: "center",
-                      width: 40,
-                      height: 4,
-                      borderRadius: theme.radius.full,
-                      backgroundColor: theme.colors.borderStrong
-                    }
-                  }
-                ),
-                title ? /* @__PURE__ */ jsx(
-                  Heading,
-                  {
-                    level: 3,
-                    size: "lg",
-                    style: {
-                      paddingHorizontal: theme.space[5],
-                      paddingTop: theme.space[4]
-                    },
-                    children: title
-                  }
-                ) : null
-              ] }),
+              /* @__PURE__ */ jsxs(
+                View,
+                {
+                  ...panResponder.panHandlers,
+                  style: { paddingTop: ios ? theme.space[1.5] : theme.space[3] },
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      View,
+                      {
+                        style: {
+                          alignSelf: "center",
+                          width: ios ? 36 : 40,
+                          height: ios ? 5 : 4,
+                          borderRadius: theme.radius.full,
+                          backgroundColor: theme.colors.borderStrong
+                        }
+                      }
+                    ),
+                    title ? /* @__PURE__ */ jsx(
+                      Heading,
+                      {
+                        level: 3,
+                        size: "lg",
+                        style: {
+                          paddingHorizontal: theme.space[5],
+                          paddingTop: theme.space[4]
+                        },
+                        children: title
+                      }
+                    ) : null
+                  ]
+                }
+              ),
               children
             ]
           }
@@ -998,6 +1153,7 @@ function Select({
   const metrics = sizeMetrics(size, theme);
   const [open, setOpen] = useState(false);
   const selected = options.find((option) => option.value === value);
+  const ios = isIOS();
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsxs(
       Pressable,
@@ -1015,12 +1171,13 @@ function Select({
             alignItems: "center",
             justifyContent: "space-between",
             gap: metrics.gap,
-            height: metrics.height,
+            minHeight: metrics.height,
             paddingHorizontal: metrics.paddingHorizontal,
             borderRadius: theme.radius.md,
-            borderWidth: invalid ? theme.borderWidth.medium : theme.borderWidth.thin,
+            // Mirrors Input: iOS is a filled rect that only gains a stroke when invalid.
+            borderWidth: invalid ? ios ? theme.borderWidth.thin : theme.borderWidth.medium : ios ? 0 : theme.borderWidth.thin,
             borderColor: invalid ? theme.colors.danger : theme.colors.border,
-            backgroundColor: disabled ? theme.colors.bgMuted : theme.colors.surface,
+            backgroundColor: ios ? disabled ? theme.colors.bgSubtle : theme.colors.bgMuted : disabled ? theme.colors.bgMuted : theme.colors.surface,
             opacity: disabled ? theme.opacity.disabled : 1
           },
           style
@@ -1244,6 +1401,7 @@ function ToastCard({
   const theme = useTheme();
   const tone = entry.tone ?? "neutral";
   const enter = useRef(new Animated.Value(0)).current;
+  const ios = isIOS();
   useEffect(() => {
     Animated.timing(enter, {
       toValue: 1,
@@ -1268,8 +1426,8 @@ function ToastCard({
         alignItems: "flex-start",
         gap: theme.space[3],
         padding: theme.space[3.5],
-        borderRadius: theme.radius.lg,
-        borderWidth: theme.borderWidth.thin,
+        borderRadius: ios ? theme.radius.xl : theme.radius.lg,
+        borderWidth: ios ? 0 : theme.borderWidth.thin,
         borderColor: theme.colors.border,
         backgroundColor: theme.colors.surface,
         opacity: enter,
@@ -1465,7 +1623,7 @@ var Card = forwardRef(function Card2({ variant = "outline", onPress, accessibili
   const base = {
     borderRadius: theme.radius.lg,
     backgroundColor: variant === "filled" ? theme.colors.bgSubtle : theme.colors.surface,
-    borderWidth: variant === "outline" ? theme.borderWidth.thin : 0,
+    borderWidth: variant === "outline" ? isIOS() ? StyleSheet.hairlineWidth : theme.borderWidth.thin : 0,
     borderColor: theme.colors.border,
     ...variant === "elevated" ? shadowStyle(theme.shadow.sm) : null
   };
@@ -1490,7 +1648,16 @@ var Card = forwardRef(function Card2({ variant = "outline", onPress, accessibili
 });
 function CardHeader({ children, style }) {
   const theme = useTheme();
-  return /* @__PURE__ */ jsx(View, { style: [{ padding: theme.space[4], paddingBottom: theme.space[2], gap: theme.space[1] }, style], children });
+  return /* @__PURE__ */ jsx(
+    View,
+    {
+      style: [
+        { padding: theme.space[4], paddingBottom: theme.space[2], gap: theme.space[1] },
+        style
+      ],
+      children
+    }
+  );
 }
 function CardTitle({ children, style }) {
   return /* @__PURE__ */ jsx(Heading, { level: 3, size: "md", style, children });
@@ -1589,6 +1756,7 @@ function Screen({
       style: [{ flex: 1, backgroundColor: theme.colors[bg] }, style],
       contentContainerStyle: [padding, contentContainerStyle],
       keyboardShouldPersistTaps: "handled",
+      keyboardDismissMode: isIOS() ? "interactive" : "on-drag",
       refreshControl: onRefresh ? /* @__PURE__ */ jsx(
         RefreshControl,
         {
@@ -1613,21 +1781,30 @@ function ListRow({
   style
 }) {
   const theme = useTheme();
+  const ios = isIOS();
   const content = /* @__PURE__ */ jsxs(Fragment, { children: [
     left,
     /* @__PURE__ */ jsxs(View, { style: { flex: 1, gap: theme.space[0.5] }, children: [
       /* @__PURE__ */ jsx(Text, { size: "md", numberOfLines: 1, children: title }),
-      subtitle ? /* @__PURE__ */ jsx(Text, { size: "sm", color: "textMuted", numberOfLines: 2, children: subtitle }) : null
+      subtitle ? /* @__PURE__ */ jsx(Text, { size: "sm", color: ios ? "textSecondary" : "textMuted", numberOfLines: 2, children: subtitle }) : null
     ] }),
-    right ?? (onPress && !hideChevron ? /* @__PURE__ */ jsx(Icon, { icon: ChevronRightIcon, size: 18, color: "textMuted" }) : null)
+    right ?? (onPress && !hideChevron ? /* @__PURE__ */ jsx(
+      Icon,
+      {
+        icon: ChevronRightIcon,
+        size: ios ? 16 : 18,
+        strokeWidth: ios ? 2.5 : 2,
+        color: "textMuted"
+      }
+    ) : null)
   ] });
   const layout = {
     flexDirection: "row",
     alignItems: "center",
     gap: theme.space[3],
     paddingHorizontal: theme.space[4],
-    paddingVertical: theme.space[3.5],
-    minHeight: 56,
+    paddingVertical: ios ? theme.space[2.5] : theme.space[3.5],
+    minHeight: ios ? 44 : 56,
     opacity: disabled ? theme.opacity.disabled : 1
   };
   if (!onPress) return /* @__PURE__ */ jsx(View, { style: [layout, style], children: content });
@@ -1709,6 +1886,7 @@ function Tabs({
     onChange
   );
   const isSegmented = variant === "segmented";
+  const iosSegmented = isSegmented && isIOS();
   const tabs = items.map((item) => {
     const selected = item.value === value;
     return /* @__PURE__ */ jsxs(
@@ -1723,20 +1901,22 @@ function Tabs({
           alignItems: "center",
           justifyContent: "center",
           gap: theme.space[1.5],
+          minHeight: iosSegmented ? 28 : void 0,
           paddingHorizontal: theme.space[3],
-          paddingVertical: isSegmented ? theme.space[2] : theme.space[3],
-          borderRadius: isSegmented ? theme.radius.md : 0,
+          paddingVertical: iosSegmented ? theme.space[1] : isSegmented ? theme.space[2] : theme.space[3],
+          borderRadius: iosSegmented ? theme.radius.md - 2 : isSegmented ? theme.radius.md : 0,
           backgroundColor: isSegmented && selected ? theme.colors.surface : "transparent",
           borderBottomWidth: isSegmented ? 0 : theme.borderWidth.medium,
-          borderBottomColor: selected ? theme.colors.primary : "transparent"
+          borderBottomColor: selected ? theme.colors.primary : "transparent",
+          ...iosSegmented && selected ? shadowStyle(theme.shadow.sm) : null
         },
         children: [
           /* @__PURE__ */ jsx(
             Text,
             {
-              size: "sm",
+              size: iosSegmented ? "xs" : "sm",
               weight: selected ? "semibold" : "medium",
-              color: selected ? isSegmented ? "text" : "primaryText" : "textMuted",
+              color: selected ? isSegmented ? "text" : "primaryText" : iosSegmented ? "text" : "textMuted",
               numberOfLines: 1,
               children: item.label
             }
@@ -1747,7 +1927,12 @@ function Tabs({
       item.value
     );
   });
-  const container = isSegmented ? {
+  const container = iosSegmented ? {
+    flexDirection: "row",
+    padding: theme.space[0.5],
+    borderRadius: theme.radius.md,
+    backgroundColor: theme.colors.bgMuted
+  } : isSegmented ? {
     flexDirection: "row",
     gap: theme.space[1],
     padding: theme.space[1],
@@ -1771,7 +1956,15 @@ function Tabs({
       }
     );
   }
-  return /* @__PURE__ */ jsx(View, { accessibilityRole: "tablist", accessibilityLabel, style: [container, style], children: tabs });
+  return /* @__PURE__ */ jsx(
+    View,
+    {
+      accessibilityRole: "tablist",
+      accessibilityLabel,
+      style: [container, style],
+      children: tabs
+    }
+  );
 }
 function Accordion({
   items,
@@ -2220,6 +2413,7 @@ function ModalFooter({
   style
 }) {
   const theme = useTheme();
+  const ios = isIOS();
   return /* @__PURE__ */ jsx(
     View,
     {
@@ -2229,8 +2423,10 @@ function ModalFooter({
           justifyContent: "flex-end",
           gap: theme.space[2],
           paddingHorizontal: theme.space[5],
-          paddingTop: theme.space[3],
-          paddingBottom: theme.space[5]
+          paddingTop: ios ? theme.space[4] : theme.space[3],
+          paddingBottom: theme.space[5],
+          borderTopWidth: ios ? StyleSheet.hairlineWidth : 0,
+          borderTopColor: theme.colors.border
         },
         style
       ],
@@ -2329,7 +2525,136 @@ function Drawer({
     }
   );
 }
-function ActionSheet({
+function ActionSheet(props) {
+  return isIOS() ? /* @__PURE__ */ jsx(IOSActionSheet, { ...props }) : /* @__PURE__ */ jsx(SheetActionSheet, { ...props });
+}
+function IOSActionSheet({
+  open,
+  onClose,
+  title,
+  description,
+  actions,
+  cancelLabel = "Cancel",
+  style
+}) {
+  const theme = useTheme();
+  const insets = useSafeAreaInsets();
+  const { height } = useWindowDimensions();
+  const { translateY, backdrop } = useSheetTransition(open, height);
+  const hasHeader = Boolean(title || description);
+  const group = {
+    borderRadius: theme.radius.xl,
+    backgroundColor: theme.colors.surface,
+    overflow: "hidden"
+  };
+  const separator = {
+    borderTopWidth: StyleSheet.hairlineWidth,
+    borderTopColor: theme.colors.border
+  };
+  const row = (pressed, leading) => ({
+    minHeight: 56,
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: leading ? "flex-start" : "center",
+    gap: theme.space[3],
+    paddingHorizontal: theme.space[4],
+    backgroundColor: pressed ? theme.colors.surfaceActive : "transparent"
+  });
+  return /* @__PURE__ */ jsx(
+    Modal$1,
+    {
+      visible: open,
+      transparent: true,
+      animationType: "none",
+      statusBarTranslucent: true,
+      onRequestClose: onClose,
+      children: /* @__PURE__ */ jsxs(View, { style: { flex: 1, justifyContent: "flex-end" }, children: [
+        /* @__PURE__ */ jsx(
+          Animated.View,
+          {
+            style: { flex: 1, backgroundColor: theme.colors.overlay, opacity: backdrop },
+            children: /* @__PURE__ */ jsx(Pressable, { accessibilityLabel: "Close", onPress: onClose, style: { flex: 1 } })
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          Animated.View,
+          {
+            accessibilityViewIsModal: true,
+            accessibilityLabel: title,
+            style: [
+              {
+                paddingHorizontal: theme.space[2],
+                paddingBottom: insets.bottom + theme.space[2],
+                gap: theme.space[2],
+                transform: [{ translateY }]
+              },
+              style
+            ],
+            children: [
+              /* @__PURE__ */ jsxs(View, { style: group, accessibilityRole: "menu", children: [
+                hasHeader ? /* @__PURE__ */ jsxs(
+                  View,
+                  {
+                    style: {
+                      alignItems: "center",
+                      gap: theme.space[1],
+                      paddingHorizontal: theme.space[4],
+                      paddingVertical: theme.space[3.5]
+                    },
+                    children: [
+                      title ? /* @__PURE__ */ jsx(Text, { size: "xs", weight: "semibold", color: "textSecondary", align: "center", children: title }) : null,
+                      description ? /* @__PURE__ */ jsx(Text, { size: "xs", color: "textSecondary", align: "center", children: description }) : null
+                    ]
+                  }
+                ) : null,
+                actions.map((action, index) => /* @__PURE__ */ jsxs(
+                  Pressable,
+                  {
+                    accessibilityRole: "menuitem",
+                    accessibilityState: { disabled: action.disabled },
+                    disabled: action.disabled,
+                    onPress: () => {
+                      onClose();
+                      action.onPress();
+                    },
+                    style: ({ pressed }) => [
+                      row(pressed, action.icon != null),
+                      index > 0 || hasHeader ? separator : null,
+                      action.disabled ? { opacity: theme.opacity.disabled } : null
+                    ],
+                    children: [
+                      action.icon,
+                      /* @__PURE__ */ jsx(
+                        Text,
+                        {
+                          size: "lg",
+                          color: action.destructive ? "dangerText" : "primaryText",
+                          numberOfLines: 1,
+                          children: action.label
+                        }
+                      )
+                    ]
+                  },
+                  action.label
+                ))
+              ] }),
+              cancelLabel ? /* @__PURE__ */ jsx(
+                Pressable,
+                {
+                  accessibilityRole: "button",
+                  onPress: onClose,
+                  style: ({ pressed }) => [group, row(pressed, false)],
+                  children: /* @__PURE__ */ jsx(Text, { size: "lg", weight: "semibold", color: "primaryText", children: cancelLabel })
+                }
+              ) : null
+            ]
+          }
+        )
+      ] })
+    }
+  );
+}
+function SheetActionSheet({
   open,
   onClose,
   title,
@@ -2395,6 +2720,6 @@ function ActionSheet({
   ] });
 }
 
-export { Accordion, ActionSheet, Avatar, Badge, BottomSheet, Box, Button, Calendar, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, Checkbox, Chip, Collapse, Container, Divider, Drawer, EmptyState, Flex, FormField, HStack, Heading, Icon, IconButton, Input, Label, ListRow, Modal, ModalBody, ModalFooter, ModalHeader, ModalTitle, Progress, Radio, RadioGroup, Screen, Section, Select, Skeleton, Spacer, Spinner, Stack, Switch, Tabs, Text, Textarea, ThemeProvider, ToastProvider, Tooltip, addDays, addMonths, dayKey, isSameDay, monthGrid, shadowStyle, sizeMetrics, splitStyleProps, startOfDay, startOfMonth, useColorMode, useColorModeValue, useTheme, useToast, variantColors };
+export { Accordion, ActionSheet, Avatar, Badge, BottomSheet, Box, Button, Calendar, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, Checkbox, Chip, Collapse, Container, Divider, Drawer, EmptyState, Flex, FormField, HStack, Heading, Icon, IconButton, Input, Label, ListRow, Modal, ModalBody, ModalFooter, ModalHeader, ModalTitle, Progress, Radio, RadioGroup, Screen, Section, Select, Skeleton, Spacer, Spinner, Stack, Switch, Tabs, Text, Textarea, ThemeProvider, ToastProvider, Tooltip, adaptThemeToPlatform, addDays, addMonths, dayKey, iosThemeOverride, isIOS, isSameDay, monthGrid, nativeFontFamily, pressFeedback, shadowStyle, sizeMetrics, splitStyleProps, startOfDay, startOfMonth, useColorMode, useColorModeValue, useTheme, useToast, variantColors };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map