@nexub/react-native 0.0.0-stage → 2.1.0

package/lib/module/components/mobile.js

@@ -0,0 +1,811 @@
+"use strict";
+
+import * as React from 'react';
+import { AppState, FlatList, KeyboardAvoidingView, PanResponder, Platform, RefreshControl as RNRefreshControl, StyleSheet, TextInput, View, useWindowDimensions } from 'react-native';
+import Animated, { useAnimatedStyle, useSharedValue, withSpring } from 'react-native-reanimated';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { currencySymbol, fractionDigits, parseMoney } from '@nexub/core';
+import { Calendar, Delete, Eye, EyeOff } from '@nexub/icons/native';
+import { useControllableState } from "../hooks/useControllableState.js";
+import { Pressable } from "../primitives/Pressable.js";
+import { Surface } from "../primitives/Surface.js";
+import { Text } from "../primitives/Text.js";
+import { fontStyle } from "../theme/fonts.js";
+import { useHaptics, useTheme } from "../theme/ThemeProvider.js";
+import { Button, IconButton } from "./actions.js";
+import { Banner } from "./feedback.js";
+import { BottomSheet } from "./overlays.js";
+
+// ─── SwipeableRow ────────────────────────────────────────────────────────────
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const SWIPE_ACTION_WIDTH = 80;
+
+/**
+ * Swipe a row to reveal actions. Never the only way to an action: they are
+ * custom accessibility actions too (VoiceOver rotor / TalkBack actions).
+ */
+export function SwipeableRow({
+  label,
+  onPress,
+  actions,
+  children,
+  style
+}) {
+  const {
+    roles,
+    dir
+  } = useTheme();
+  const play = useHaptics();
+  const width = actions.length * SWIPE_ACTION_WIDTH;
+  const sign = dir === 'rtl' ? 1 : -1; // open = content moves toward the start edge
+  const x = useSharedValue(0);
+  const open = React.useRef(false);
+  const spring = useTheme().tokens.motion.spring.spatial.default;
+  const settle = to => {
+    if (to !== open.current) play('snap');
+    open.current = to;
+    x.value = withSpring(to ? sign * width : 0, spring);
+  };
+  const responder = React.useMemo(() => PanResponder.create({
+    onMoveShouldSetPanResponder: (_, g) => Math.abs(g.dx) > 8 && Math.abs(g.dx) > Math.abs(g.dy) * 1.5,
+    onPanResponderMove: (_, g) => {
+      const base = open.current ? sign * width : 0;
+      const next = base + g.dx;
+      x.value = sign < 0 ? Math.min(0, Math.max(-width * 1.2, next)) : Math.max(0, Math.min(width * 1.2, next));
+    },
+    onPanResponderRelease: (_, g) => settle(Math.abs((open.current ? sign * width : 0) + g.dx) > width / 2),
+    onPanResponderTerminate: () => settle(open.current)
+  }),
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  [width, sign]);
+  const slide = useAnimatedStyle(() => ({
+    transform: [{
+      translateX: x.value
+    }]
+  }));
+  const bg = {
+    neutral: ['surface-container-highest', 'on-surface'],
+    danger: ['error', 'on-error'],
+    primary: ['primary', 'on-primary']
+  };
+  return /*#__PURE__*/_jsxs(View, {
+    style: [{
+      overflow: 'hidden'
+    }, style]
+    // One screen-reader element for the row: its name, its tap, and every swipe action.
+    ,
+    accessible: true,
+    accessibilityRole: onPress ? 'button' : undefined,
+    accessibilityLabel: label,
+    accessibilityActions: [...(onPress ? [{
+      name: 'activate'
+    }] : []), ...actions.map(a => ({
+      name: a.label,
+      label: a.label
+    }))],
+    onAccessibilityAction: e => {
+      const name = e.nativeEvent.actionName;
+      if (name === 'activate') onPress?.();else actions.find(a => a.label === name)?.onPress();
+    },
+    children: [/*#__PURE__*/_jsx(View, {
+      style: [StyleSheet.absoluteFill, {
+        flexDirection: 'row',
+        justifyContent: 'flex-end'
+      }],
+      importantForAccessibility: "no-hide-descendants",
+      accessibilityElementsHidden: true,
+      children: actions.map(a => {
+        const [b, f] = bg[a.tone ?? 'neutral'];
+        const Glyph = a.icon;
+        return /*#__PURE__*/_jsxs(Pressable, {
+          accessibilityLabel: a.label,
+          onPress: () => {
+            settle(false);
+            a.onPress();
+          },
+          pressScale: false,
+          stateLayer: f,
+          style: {
+            width: SWIPE_ACTION_WIDTH,
+            backgroundColor: roles[b],
+            alignItems: 'center',
+            justifyContent: 'center',
+            gap: 4
+          },
+          children: [Glyph && /*#__PURE__*/_jsx(Glyph, {
+            size: "md",
+            color: roles[f]
+          }), /*#__PURE__*/_jsx(Text, {
+            variant: "label-md",
+            color: f,
+            children: a.label
+          })]
+        }, a.label);
+      })
+    }), /*#__PURE__*/_jsx(Animated.View, {
+      style: [{
+        backgroundColor: roles['surface-container-lowest']
+      }, slide],
+      ...responder.panHandlers,
+      children: children
+    })]
+  });
+}
+
+// ─── RefreshControl ──────────────────────────────────────────────────────────
+
+/** The platform pull-to-refresh in the primary role. Pass to a ScrollView/FlatList `refreshControl`. */
+export function RefreshControl(props) {
+  const {
+    roles
+  } = useTheme();
+  return /*#__PURE__*/_jsx(RNRefreshControl, {
+    tintColor: roles.primary,
+    colors: [roles.primary],
+    progressBackgroundColor: roles['surface-container-high'],
+    ...props
+  });
+}
+
+// ─── Carousel + PageIndicator ────────────────────────────────────────────────
+
+/** Dots for paged content: "Page 2 of 4" to screen readers. */
+export function PageIndicator({
+  count,
+  index,
+  style
+}) {
+  const {
+    roles,
+    messages
+  } = useTheme();
+  return /*#__PURE__*/_jsx(View, {
+    accessible: true,
+    accessibilityLabel: messages.page(index + 1, count),
+    style: [{
+      flexDirection: 'row',
+      gap: 6,
+      alignSelf: 'center'
+    }, style],
+    children: Array.from({
+      length: count
+    }, (_, i) => /*#__PURE__*/_jsx(View, {
+      style: {
+        width: i === index ? 20 : 6,
+        height: 6,
+        borderRadius: 3,
+        backgroundColor: roles[i === index ? 'primary' : 'outline-variant']
+      }
+    }, i))
+  });
+}
+/** Full-width paging (onboarding, card stacks) with a page indicator. */
+export function Carousel({
+  data,
+  renderItem,
+  width: w,
+  onIndexChange,
+  style
+}) {
+  const {
+    width: window
+  } = useWindowDimensions();
+  const width = w ?? window;
+  const [index, setIndex] = React.useState(0);
+  const {
+    tokens
+  } = useTheme();
+  return /*#__PURE__*/_jsxs(View, {
+    style: [{
+      gap: tokens.spacing[3]
+    }, style],
+    children: [/*#__PURE__*/_jsx(FlatList, {
+      data: data,
+      horizontal: true,
+      pagingEnabled: true,
+      showsHorizontalScrollIndicator: false,
+      renderItem: info => /*#__PURE__*/_jsx(View, {
+        style: {
+          width
+        },
+        children: renderItem(info)
+      }),
+      keyExtractor: (_, i) => String(i),
+      onMomentumScrollEnd: e => {
+        const i = Math.round(e.nativeEvent.contentOffset.x / width);
+        setIndex(i);
+        onIndexChange?.(i);
+      }
+    }), /*#__PURE__*/_jsx(PageIndicator, {
+      count: data.length,
+      index: index
+    })]
+  });
+}
+
+// ─── StickyFooter ────────────────────────────────────────────────────────────
+
+/** Screen body + a footer that stays above the keyboard: the primary button of every flow. */
+export function StickyFooter({
+  children,
+  footer,
+  style
+}) {
+  const {
+    roles,
+    tokens
+  } = useTheme();
+  const insets = useSafeAreaInsets();
+  return /*#__PURE__*/_jsxs(KeyboardAvoidingView, {
+    behavior: Platform.OS === 'ios' ? 'padding' : 'height',
+    style: [{
+      flex: 1,
+      backgroundColor: roles.surface
+    }, style],
+    children: [/*#__PURE__*/_jsx(View, {
+      style: {
+        flex: 1
+      },
+      children: children
+    }), /*#__PURE__*/_jsx(View, {
+      style: {
+        paddingHorizontal: tokens.spacing[4],
+        paddingTop: tokens.spacing[3],
+        paddingBottom: Math.max(insets.bottom, tokens.spacing[4]),
+        gap: tokens.spacing[2],
+        backgroundColor: roles.surface,
+        borderTopWidth: StyleSheet.hairlineWidth,
+        borderTopColor: roles['outline-variant']
+      },
+      children: footer
+    })]
+  });
+}
+
+// ─── OTPInput ────────────────────────────────────────────────────────────────
+
+/**
+ * One-time code / PIN entry: one hidden field (so paste and SMS autofill work:
+ * iOS oneTimeCode, Android sms-otp) drawn as boxes.
+ */
+export function OTPInput({
+  label,
+  length = 6,
+  value,
+  onValueChange,
+  onComplete,
+  secure,
+  error,
+  autoFocus,
+  style
+}) {
+  const {
+    roles,
+    tokens,
+    fonts
+  } = useTheme();
+  const ref = React.useRef(null);
+  const [focused, setFocused] = React.useState(false);
+  const [code, setCode] = useControllableState({
+    value,
+    defaultValue: '',
+    onChange: onValueChange
+  });
+  return /*#__PURE__*/_jsxs(View, {
+    style: [{
+      gap: tokens.spacing[2]
+    }, style],
+    children: [/*#__PURE__*/_jsx(Pressable, {
+      onPress: () => ref.current?.focus(),
+      stateLayer: false,
+      pressScale: false,
+      accessible: false,
+      style: {
+        flexDirection: 'row',
+        gap: tokens.spacing[2],
+        justifyContent: 'center'
+      },
+      children: Array.from({
+        length
+      }, (_, i) => {
+        const ch = code[i];
+        const active = focused && i === Math.min(code.length, length - 1);
+        return /*#__PURE__*/_jsx(View, {
+          style: {
+            width: 44,
+            height: 52,
+            borderRadius: tokens.shape.field,
+            borderWidth: active || error ? 2 : 1,
+            borderColor: error ? roles.error : active ? roles.primary : roles.outline,
+            backgroundColor: roles['surface-container-lowest'],
+            alignItems: 'center',
+            justifyContent: 'center'
+          },
+          children: /*#__PURE__*/_jsx(Text, {
+            variant: "title-lg",
+            tabular: true,
+            children: ch ? secure ? '•' : ch : ''
+          })
+        }, i);
+      })
+    }), /*#__PURE__*/_jsx(TextInput, {
+      ref: ref,
+      accessibilityLabel: label,
+      accessibilityHint: error,
+      value: code,
+      onChangeText: t => {
+        const next = t.replace(/\D/g, '').slice(0, length);
+        setCode(next);
+        if (next.length === length) onComplete?.(next);
+      },
+      onFocus: () => setFocused(true),
+      onBlur: () => setFocused(false),
+      autoFocus: autoFocus,
+      keyboardType: "number-pad",
+      inputMode: "numeric",
+      maxLength: length,
+      secureTextEntry: secure,
+      textContentType: secure ? 'password' : 'oneTimeCode',
+      autoComplete: secure ? 'off' : 'sms-otp',
+      caretHidden: true,
+      style: {
+        position: 'absolute',
+        opacity: 0.011,
+        width: 1,
+        height: 1,
+        ...fontStyle('sans', 400, fonts)
+      }
+    }), error && /*#__PURE__*/_jsx(Text, {
+      variant: "body-sm",
+      color: "error",
+      style: {
+        textAlign: 'center'
+      },
+      accessibilityLiveRegion: "polite",
+      children: error
+    })]
+  });
+}
+
+// ─── NumericKeypad + ExpressiveMoneyInput ────────────────────────────────────
+
+/** On-screen digits for amounts and PINs (no system keyboard covering the screen). */
+export function NumericKeypad({
+  onKey,
+  decimal,
+  locale,
+  style
+}) {
+  const {
+    roles,
+    messages,
+    locale: loc
+  } = useTheme();
+  const sep = new Intl.NumberFormat(locale ?? loc).format(1.5).replace(/\p{Nd}/gu, '') || '.';
+  const keys = ['1', '2', '3', '4', '5', '6', '7', '8', '9', decimal ? sep : '', '0', 'delete'];
+  return /*#__PURE__*/_jsx(View, {
+    style: [{
+      flexDirection: 'row',
+      flexWrap: 'wrap'
+    }, style],
+    children: keys.map((k, i) => k === '' ? /*#__PURE__*/_jsx(View, {
+      style: {
+        width: '33.333%',
+        height: 64
+      }
+    }, i) : /*#__PURE__*/_jsx(Pressable, {
+      accessibilityLabel: k === 'delete' ? messages.deleteDigit : k,
+      haptic: "selection",
+      onPress: () => onKey(k),
+      style: {
+        width: '33.333%',
+        height: 64,
+        alignItems: 'center',
+        justifyContent: 'center',
+        borderRadius: 16
+      },
+      children: k === 'delete' ? /*#__PURE__*/_jsx(Delete, {
+        size: "lg",
+        color: roles['on-surface']
+      }) : /*#__PURE__*/_jsx(Text, {
+        variant: "headline-md",
+        children: k
+      })
+    }, i))
+  });
+}
+/** Big amount in the brand face + keypad (Wise-style money entry). */
+export function ExpressiveMoneyInput({
+  currency,
+  value,
+  onValueChange,
+  label,
+  locale,
+  caption,
+  error,
+  style
+}) {
+  const theme = useTheme();
+  const loc = locale ?? theme.locale;
+  const digits = fractionDigits(currency, loc);
+  const sep = new Intl.NumberFormat(loc).format(1.5).replace(/\p{Nd}/gu, '') || '.';
+  const [text, setText] = React.useState(value == null ? '' : String(value).replace('.', sep));
+  const press = k => {
+    let next = text;
+    if (k === 'delete') next = text.slice(0, -1);else if (k === sep) next = digits === 0 || text.includes(sep) ? text : (text || '0') + sep;else {
+      const [, frac] = text.split(sep);
+      if (frac !== undefined && frac.length >= digits) return;
+      next = text === '0' ? k : text + k;
+    }
+    setText(next);
+    onValueChange?.(next ? parseMoney(next, currency, loc) : null);
+  };
+  return /*#__PURE__*/_jsxs(View, {
+    style: [{
+      gap: theme.tokens.spacing[4]
+    }, style],
+    children: [/*#__PURE__*/_jsxs(View, {
+      accessible: true,
+      accessibilityLabel: `${label}, ${text || '0'} ${currency}`,
+      accessibilityLiveRegion: "polite",
+      style: {
+        alignItems: 'center',
+        gap: 4
+      },
+      children: [/*#__PURE__*/_jsxs(Text, {
+        variant: "display-md",
+        color: error ? 'error' : 'on-surface',
+        tabular: true,
+        children: [/*#__PURE__*/_jsx(Text, {
+          variant: "headline-md",
+          color: "on-surface-variant",
+          children: currencySymbol(currency, loc)
+        }), text || '0']
+      }), caption && /*#__PURE__*/_jsx(Text, {
+        variant: "body-md",
+        color: error ? 'error' : 'on-surface-variant',
+        children: caption
+      })]
+    }), /*#__PURE__*/_jsx(NumericKeypad, {
+      onKey: press,
+      decimal: digits > 0,
+      locale: loc
+    })]
+  });
+}
+
+// ─── SensitiveValue ──────────────────────────────────────────────────────────
+
+/**
+ * A value that can be hidden (balances, card numbers). Masked text reads as
+ * "Balance, hidden", never as dots, and it re-masks when the app backgrounds.
+ */
+export function SensitiveValue({
+  label,
+  children,
+  variant = 'title-lg',
+  revealed,
+  defaultRevealed = false,
+  onRevealedChange
+}) {
+  const {
+    messages
+  } = useTheme();
+  const [shown, setShown] = useControllableState({
+    value: revealed,
+    defaultValue: defaultRevealed,
+    onChange: onRevealedChange
+  });
+  React.useEffect(() => {
+    const sub = AppState.addEventListener('change', s => s !== 'active' && setShown(false));
+    return () => sub.remove();
+  }, [setShown]);
+  return /*#__PURE__*/_jsxs(View, {
+    style: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 4
+    },
+    children: [/*#__PURE__*/_jsx(Text, {
+      variant: variant,
+      tabular: true,
+      accessibilityLabel: `${label}, ${shown ? children : messages.hidden}`,
+      children: shown ? children : '••••••'
+    }), /*#__PURE__*/_jsx(IconButton, {
+      icon: shown ? EyeOff : Eye,
+      label: shown ? messages.hide(label) : messages.show(label),
+      size: "sm",
+      onPress: () => setShown(!shown)
+    })]
+  });
+}
+
+// ─── PrivacyShield ───────────────────────────────────────────────────────────
+
+let ScreenCapture;
+try {
+  // eslint-disable-next-line @typescript-eslint/no-require-imports -- optional peer, must not fail when absent
+  ScreenCapture = require('expo-screen-capture');
+} catch {
+  ScreenCapture = undefined;
+}
+/**
+ * Covers the app when it leaves the foreground, so the app-switcher snapshot
+ * shows no balances. Wrap screens with sensitive data (or the whole app).
+ */
+export function PrivacyShield({
+  children,
+  cover,
+  preventCapture
+}) {
+  const {
+    roles
+  } = useTheme();
+  const [covered, setCovered] = React.useState(false);
+  React.useEffect(() => {
+    const sub = AppState.addEventListener('change', s => setCovered(s !== 'active'));
+    return () => sub.remove();
+  }, []);
+  React.useEffect(() => {
+    if (!preventCapture || !ScreenCapture) return;
+    const key = 'nexub-privacy-shield';
+    ScreenCapture.preventScreenCaptureAsync(key).catch(() => {});
+    return () => {
+      ScreenCapture?.allowScreenCaptureAsync(key).catch(() => {});
+    };
+  }, [preventCapture]);
+  return /*#__PURE__*/_jsxs(View, {
+    style: {
+      flex: 1
+    },
+    children: [children, covered && /*#__PURE__*/_jsx(View, {
+      style: [StyleSheet.absoluteFill, {
+        backgroundColor: roles.surface,
+        alignItems: 'center',
+        justifyContent: 'center'
+      }],
+      accessibilityElementsHidden: true,
+      children: cover
+    })]
+  });
+}
+
+// ─── OfflineBanner ───────────────────────────────────────────────────────────
+
+/** Slim notice while the app has no connection. Pass your network state (e.g. NetInfo). */
+export function OfflineBanner({
+  offline,
+  style
+}) {
+  const {
+    messages
+  } = useTheme();
+  if (!offline) return null;
+  return /*#__PURE__*/_jsx(Banner, {
+    tone: "warning",
+    style: [{
+      borderRadius: 0,
+      paddingVertical: 10
+    }, style],
+    accessibilityLiveRegion: "polite",
+    children: messages.offline
+  });
+}
+
+// ─── Coachmark ───────────────────────────────────────────────────────────────
+
+/** A one-time hint next to a new feature. Place it in your layout; it doesn't measure targets. */
+export function Coachmark({
+  title,
+  children,
+  arrow = 'top',
+  onDismiss,
+  dismissLabel,
+  style
+}) {
+  const {
+    roles,
+    tokens,
+    messages
+  } = useTheme();
+  const tip = /*#__PURE__*/_jsx(View, {
+    style: {
+      width: 14,
+      height: 14,
+      marginStart: 24,
+      transform: [{
+        rotate: '45deg'
+      }],
+      backgroundColor: roles['inverse-surface'],
+      marginVertical: -7
+    }
+  });
+  return /*#__PURE__*/_jsxs(View, {
+    accessibilityRole: "alert",
+    style: style,
+    children: [arrow === 'top' && tip, /*#__PURE__*/_jsxs(View, {
+      style: {
+        padding: tokens.spacing[4],
+        gap: tokens.spacing[2],
+        borderRadius: tokens.shape.container,
+        backgroundColor: roles['inverse-surface']
+      },
+      children: [title && /*#__PURE__*/_jsx(Text, {
+        variant: "title-sm",
+        color: "inverse-on-surface",
+        children: title
+      }), /*#__PURE__*/_jsx(Text, {
+        variant: "body-sm",
+        color: "inverse-on-surface",
+        children: children
+      }), /*#__PURE__*/_jsx(Button, {
+        variant: "text",
+        size: "sm",
+        onPress: onDismiss,
+        style: {
+          alignSelf: 'flex-end'
+        },
+        children: dismissLabel ?? messages.close
+      })]
+    }), arrow === 'bottom' && tip]
+  });
+}
+
+// ─── FAB ─────────────────────────────────────────────────────────────────────
+
+/** Floating primary action, bottom end. Android only by default (MOBILE_PLAN.md D7). */
+export function FAB({
+  icon: Glyph,
+  label,
+  onPress,
+  extended,
+  platforms = ['android'],
+  bottomOffset = 0
+}) {
+  const {
+    roles,
+    tokens
+  } = useTheme();
+  const insets = useSafeAreaInsets();
+  if (!platforms.includes(Platform.OS)) return null;
+  return /*#__PURE__*/_jsxs(Pressable, {
+    accessibilityLabel: label,
+    onPress: onPress,
+    stateLayer: "on-primary-container",
+    style: {
+      position: 'absolute',
+      end: 16,
+      bottom: insets.bottom + 16 + bottomOffset,
+      height: 56,
+      minWidth: 56,
+      paddingHorizontal: extended ? 20 : 0,
+      borderRadius: 16,
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'center',
+      gap: 12,
+      backgroundColor: roles['primary-container'],
+      boxShadow: tokens.elevation[3].light
+    },
+    children: [/*#__PURE__*/_jsx(Glyph, {
+      size: "lg",
+      color: roles['on-primary-container']
+    }), extended && /*#__PURE__*/_jsx(Text, {
+      variant: "label-lg",
+      color: "on-primary-container",
+      children: label
+    })]
+  });
+}
+
+// ─── DateTimeField ───────────────────────────────────────────────────────────
+
+let Picker;
+try {
+  // eslint-disable-next-line @typescript-eslint/no-require-imports -- optional peer, must not fail when absent
+  Picker = require('@react-native-community/datetimepicker');
+} catch {
+  Picker = undefined;
+}
+/**
+ * A field that opens the platform picker (Android dialog, iOS inline calendar
+ * in a sheet). Needs @react-native-community/datetimepicker.
+ */
+export function DateTimeField({
+  label,
+  value,
+  onValueChange,
+  mode = 'date',
+  minimumDate,
+  maximumDate,
+  placeholder,
+  style
+}) {
+  const theme = useTheme();
+  const {
+    roles,
+    tokens,
+    messages,
+    locale
+  } = theme;
+  const [open, setOpen] = React.useState(false);
+  if (!Picker) throw new Error('@nexub/react-native: DateTimeField needs @react-native-community/datetimepicker (npx expo install @react-native-community/datetimepicker).');
+  const {
+    default: RNDateTimePicker,
+    DateTimePickerAndroid
+  } = Picker;
+  const text = value ? new Intl.DateTimeFormat(locale, mode === 'date' ? {
+    dateStyle: 'medium'
+  } : {
+    timeStyle: 'short'
+  }).format(value) : placeholder ?? messages.pickDate;
+  const show = () => {
+    if (Platform.OS === 'android') {
+      DateTimePickerAndroid.open({
+        value: value ?? new Date(),
+        mode,
+        minimumDate,
+        maximumDate,
+        onChange: (e, d) => e.type === 'set' && d && onValueChange(d)
+      });
+    } else setOpen(true);
+  };
+  return /*#__PURE__*/_jsxs(View, {
+    style: [{
+      gap: 6
+    }, style],
+    children: [/*#__PURE__*/_jsx(Text, {
+      variant: "label-lg",
+      color: "on-surface-variant",
+      importantForAccessibility: "no",
+      children: label
+    }), /*#__PURE__*/_jsxs(Pressable, {
+      accessibilityLabel: `${label}, ${text}`,
+      onPress: show,
+      pressScale: false,
+      style: {
+        minHeight: tokens.size.control.lg,
+        paddingHorizontal: 14,
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 8,
+        borderRadius: tokens.shape.field,
+        borderWidth: 1,
+        borderColor: roles.outline,
+        backgroundColor: roles['surface-container-lowest']
+      },
+      children: [/*#__PURE__*/_jsx(Calendar, {
+        size: "sm",
+        color: roles['on-surface-variant']
+      }), /*#__PURE__*/_jsx(Text, {
+        variant: "body-lg",
+        color: value ? 'on-surface' : 'on-surface-muted',
+        children: text
+      })]
+    }), Platform.OS === 'ios' && /*#__PURE__*/_jsxs(BottomSheet, {
+      open: open,
+      onOpenChange: setOpen,
+      title: label,
+      children: [/*#__PURE__*/_jsx(Surface, {
+        tone: "surface-elevated",
+        children: /*#__PURE__*/_jsx(RNDateTimePicker, {
+          value: value ?? new Date(),
+          mode: mode,
+          display: mode === 'date' ? 'inline' : 'spinner',
+          minimumDate: minimumDate,
+          maximumDate: maximumDate,
+          accentColor: roles.primary,
+          themeVariant: theme.scheme,
+          locale: locale,
+          onChange: (_, d) => d && onValueChange(d)
+        })
+      }), /*#__PURE__*/_jsx(Button, {
+        size: "lg",
+        fullWidth: true,
+        onPress: () => setOpen(false),
+        children: messages.close
+      })]
+    })]
+  });
+}
+//# sourceMappingURL=mobile.js.map