@primer-io/react-native 2.45.0 → 3.0.0-beta.0

package/src/Components/internal/checkout-sheet/CheckoutSheet.tsx

@@ -0,0 +1,301 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import type { HeightReleaseFn } from './SheetHeightContext';
+import {
+  Animated,
+  Easing,
+  InputAccessoryView,
+  Modal,
+  PanResponder,
+  Platform,
+  StyleSheet,
+  TouchableWithoutFeedback,
+  View,
+  useWindowDimensions,
+} from 'react-native';
+import { usePrimerTheme } from '../theme';
+import type { PrimerTokens } from '../theme';
+import { PRIMER_EMPTY_ACCESSORY_ID } from '../../inputs/PrimerTextInput';
+import { SheetHeightContext } from './SheetHeightContext';
+import type { SheetHeightContextValue } from './SheetHeightContext';
+import type { CheckoutSheetProps } from './types';
+
+const ANIMATION_DURATION = 300;
+const SWIPE_DISMISS_DURATION = 200;
+const DEFAULT_HEIGHT_RATIO = 0.92;
+const MIN_HEIGHT_RATIO = 0.1;
+const SWIPE_DISMISS_DISTANCE_RATIO = 0.25;
+const SWIPE_DISMISS_VELOCITY = 0.5;
+
+export function CheckoutSheet({
+  visible,
+  onDismiss,
+  onRequestDismiss,
+  dismissOnBackdropPress = true,
+  dismissOnSwipeDown = true,
+  showDragHandle,
+  children,
+}: CheckoutSheetProps) {
+  const tokens = usePrimerTheme();
+  const { height: screenHeight } = useWindowDimensions();
+  const styles = useMemo(() => createStyles(tokens), [tokens]);
+
+  const [modalVisible, setModalVisible] = useState(false);
+  // Token-keyed stack: latest entry wins. Per-token release prevents a stale screen's
+  // cleanup from clobbering the current screen's height request.
+  const [heightRequests, setHeightRequests] = useState<Array<{ token: number; ratio: number }>>([]);
+  const heightRatio =
+    heightRequests.length > 0 ? heightRequests[heightRequests.length - 1]!.ratio : DEFAULT_HEIGHT_RATIO;
+  const nextTokenRef = useRef(0);
+
+  // 0 = hidden (off-screen below), 1 = fully shown.
+  const showAnimValue = useRef(new Animated.Value(0)).current;
+  // translateY that pushes the sheet down so only `heightRatio` of the screen shows.
+  const heightOffsetValue = useRef(new Animated.Value(screenHeight * (1 - DEFAULT_HEIGHT_RATIO))).current;
+  const dragValue = useRef(new Animated.Value(0)).current;
+  const isMountedRef = useRef(true);
+
+  const sheetHeight = screenHeight * heightRatio;
+  const heightOffset = screenHeight - sheetHeight;
+  const shouldRenderDragHandle = showDragHandle ?? dismissOnSwipeDown;
+
+  useEffect(() => {
+    isMountedRef.current = true;
+    return () => {
+      isMountedRef.current = false;
+    };
+  }, []);
+
+  useEffect(() => {
+    Animated.timing(heightOffsetValue, {
+      toValue: heightOffset,
+      duration: ANIMATION_DURATION,
+      easing: Easing.out(Easing.cubic),
+      useNativeDriver: true,
+    }).start();
+  }, [heightOffset, heightOffsetValue]);
+
+  const animateIn = useCallback(() => {
+    Animated.timing(showAnimValue, {
+      toValue: 1,
+      duration: ANIMATION_DURATION,
+      easing: Easing.out(Easing.cubic),
+      useNativeDriver: true,
+    }).start();
+  }, [showAnimValue]);
+
+  const animateOut = useCallback(() => {
+    Animated.timing(showAnimValue, {
+      toValue: 0,
+      duration: ANIMATION_DURATION,
+      easing: Easing.in(Easing.cubic),
+      useNativeDriver: true,
+    }).start(({ finished }) => {
+      if (finished && isMountedRef.current) {
+        setModalVisible(false);
+        dragValue.setValue(0);
+        onDismiss?.();
+      }
+    });
+  }, [showAnimValue, dragValue, onDismiss]);
+
+  const springDragBack = useCallback(() => {
+    Animated.spring(dragValue, {
+      toValue: 0,
+      useNativeDriver: true,
+      bounciness: 0,
+    }).start();
+  }, [dragValue]);
+
+  const dismissBySwipe = useCallback(() => {
+    // Visibility is parent-controlled via `visible`; without onRequestDismiss we can't tell
+    // the parent to close, so dismissing here would strand the sheet (hidden but visible=true).
+    // Match handleBackdropPress: no handler → no dismiss, just spring back.
+    if (!onRequestDismiss) {
+      springDragBack();
+      return;
+    }
+    Animated.timing(dragValue, {
+      toValue: sheetHeight,
+      duration: SWIPE_DISMISS_DURATION,
+      easing: Easing.in(Easing.cubic),
+      useNativeDriver: true,
+    }).start(({ finished }) => {
+      if (finished && isMountedRef.current) {
+        setModalVisible(false);
+        dragValue.setValue(0);
+        showAnimValue.setValue(0);
+        onRequestDismiss(); // request first (parent sets visible=false) — matches other dismiss paths
+        onDismiss?.(); // then "fully dismissed"
+      }
+    });
+  }, [dragValue, sheetHeight, showAnimValue, onDismiss, onRequestDismiss, springDragBack]);
+
+  const prevVisibleRef = useRef(false);
+  useEffect(() => {
+    if (visible && !prevVisibleRef.current) {
+      setHeightRequests([]);
+      heightOffsetValue.setValue(screenHeight * (1 - DEFAULT_HEIGHT_RATIO));
+      setModalVisible(true);
+    } else if (!visible && prevVisibleRef.current && modalVisible) {
+      animateOut();
+    }
+    prevVisibleRef.current = visible;
+  }, [visible, modalVisible, animateOut, heightOffsetValue, screenHeight]);
+
+  const handleShow = useCallback(() => {
+    showAnimValue.setValue(0);
+    animateIn();
+  }, [showAnimValue, animateIn]);
+
+  const handleBackdropPress = useCallback(() => {
+    if (dismissOnBackdropPress) {
+      onRequestDismiss?.();
+    }
+  }, [dismissOnBackdropPress, onRequestDismiss]);
+
+  const handleRequestClose = useCallback(() => {
+    onRequestDismiss?.();
+  }, [onRequestDismiss]);
+
+  const panResponder = useMemo(
+    () =>
+      PanResponder.create({
+        onStartShouldSetPanResponder: () => dismissOnSwipeDown,
+        onMoveShouldSetPanResponder: (_, g) => dismissOnSwipeDown && g.dy > 2 && Math.abs(g.dy) > Math.abs(g.dx),
+        onPanResponderMove: (_, g) => {
+          dragValue.setValue(Math.max(0, g.dy));
+        },
+        onPanResponderRelease: (_, g) => {
+          const dismissed = g.dy > sheetHeight * SWIPE_DISMISS_DISTANCE_RATIO || g.vy > SWIPE_DISMISS_VELOCITY;
+          if (dismissed) {
+            dismissBySwipe();
+          } else {
+            springDragBack();
+          }
+        },
+        onPanResponderTerminate: () => springDragBack(),
+      }),
+    [dismissOnSwipeDown, sheetHeight, dragValue, dismissBySwipe, springDragBack]
+  );
+
+  const sheetHeightContextValue = useMemo<SheetHeightContextValue>(() => {
+    const register = (ratio: number): HeightReleaseFn => {
+      const clamped = Math.max(MIN_HEIGHT_RATIO, Math.min(1, ratio));
+      const token = nextTokenRef.current++;
+      setHeightRequests((prev) => [...prev, { token, ratio: clamped }]);
+      return () => {
+        setHeightRequests((prev) => prev.filter((r) => r.token !== token));
+      };
+    };
+    return {
+      requestHeight: (h: number) => register(h / screenHeight),
+      requestHeightRatio: (r: number) => register(r),
+    };
+  }, [screenHeight]);
+
+  // Slide the entire sheet from below the screen to its resting position.
+  const showTranslateY = showAnimValue.interpolate({
+    inputRange: [0, 1],
+    outputRange: [screenHeight, 0],
+  });
+
+  const translateY = Animated.add(Animated.add(showTranslateY, heightOffsetValue), dragValue);
+
+  const backdropOpacity = Animated.multiply(
+    showAnimValue,
+    dragValue.interpolate({
+      inputRange: [0, sheetHeight],
+      outputRange: [1, 0],
+      extrapolate: 'clamp',
+    })
+  );
+
+  if (!modalVisible) {
+    return null;
+  }
+
+  return (
+    <Modal
+      visible
+      transparent
+      animationType="none"
+      statusBarTranslucent
+      onShow={handleShow}
+      onRequestClose={handleRequestClose}
+    >
+      <View style={styles.fullScreen}>
+        <TouchableWithoutFeedback onPress={handleBackdropPress}>
+          <Animated.View style={[styles.backdrop, { opacity: backdropOpacity }]} />
+        </TouchableWithoutFeedback>
+
+        {/* Empty accessory claimed by every PrimerTextInput to suppress iOS's auto
+          Previous/Next/Done toolbar. See PRIMER_EMPTY_ACCESSORY_ID. */}
+        {Platform.OS === 'ios' && (
+          <InputAccessoryView nativeID={PRIMER_EMPTY_ACCESSORY_ID}>
+            <View />
+          </InputAccessoryView>
+        )}
+
+        <Animated.View style={[styles.sheetContainer, { transform: [{ translateY }] }]} pointerEvents="box-none">
+          {/* Constrained to the visible height so the inner ScrollView can detect overflow.
+            The container is full-screen (absoluteFillObject), so without this the ScrollView
+            measures itself as full-screen and never enters scroll mode. */}
+          <View style={[styles.sheetContent, { height: sheetHeight }]}>
+            {shouldRenderDragHandle && (
+              <View style={styles.dragHandleArea} {...panResponder.panHandlers}>
+                <View style={styles.dragHandle} />
+              </View>
+            )}
+            <SheetHeightContext.Provider value={sheetHeightContextValue}>
+              <View style={styles.childrenContainer}>{children}</View>
+            </SheetHeightContext.Provider>
+          </View>
+        </Animated.View>
+      </View>
+    </Modal>
+  );
+}
+
+/* eslint-disable react-native/no-unused-styles */
+function createStyles(tokens: PrimerTokens) {
+  const { colors, radii } = tokens;
+
+  return StyleSheet.create({
+    backdrop: {
+      ...StyleSheet.absoluteFillObject,
+      backgroundColor: colors.overlay,
+    },
+    childrenContainer: {
+      flex: 1,
+    },
+    dragHandle: {
+      backgroundColor: colors.textSecondary,
+      borderRadius: 2,
+      height: 4,
+      opacity: 0.3,
+      width: 40,
+    },
+    dragHandleArea: {
+      alignItems: 'center',
+      justifyContent: 'center',
+      paddingBottom: 4,
+      paddingTop: 12,
+    },
+    fullScreen: {
+      flex: 1,
+    },
+    sheetContainer: {
+      ...StyleSheet.absoluteFillObject,
+      // Matches sheetContent so no dark gap flashes below it: on resize sheetContent's
+      // height shrinks instantly while translateY animates to catch up.
+      backgroundColor: colors.background,
+      borderTopLeftRadius: radii.large,
+      borderTopRightRadius: radii.large,
+      overflow: 'hidden',
+    },
+    sheetContent: {
+      backgroundColor: colors.background,
+    },
+  });
+}
+/* eslint-enable react-native/no-unused-styles */

package/src/Components/internal/checkout-sheet/SheetHeightContext.ts

@@ -0,0 +1,24 @@
+import { createContext, useContext } from 'react';
+
+export type HeightReleaseFn = () => void;
+
+export interface SheetHeightContextValue {
+  /**
+   * Request `height` px of sheet. Returns a release for this specific request — the
+   * per-request release (instead of a free-standing reset) prevents a stale screen's
+   * cleanup from clobbering a newer screen's active request.
+   */
+  requestHeight: (height: number) => HeightReleaseFn;
+  /** Same as `requestHeight` but expressed as a 0–1 ratio of screen height. */
+  requestHeightRatio: (ratio: number) => HeightReleaseFn;
+}
+
+export const SheetHeightContext = createContext<SheetHeightContextValue | null>(null);
+
+export function useSheetHeight(): SheetHeightContextValue {
+  const context = useContext(SheetHeightContext);
+  if (!context) {
+    throw new Error('useSheetHeight must be used within a CheckoutSheet');
+  }
+  return context;
+}

package/src/Components/internal/checkout-sheet/index.ts

@@ -0,0 +1,4 @@
+export { CheckoutSheet } from './CheckoutSheet';
+export type { CheckoutSheetProps } from './types';
+export { useSheetHeight } from './SheetHeightContext';
+export type { SheetHeightContextValue } from './SheetHeightContext';

package/src/Components/internal/checkout-sheet/types.ts

@@ -0,0 +1,27 @@
+import type { ReactNode } from 'react';
+
+export interface CheckoutSheetProps {
+  /** Whether the sheet is visible. Drives show/hide animation. */
+  visible: boolean;
+
+  /** Called when the sheet finishes its dismiss animation (fully hidden). */
+  onDismiss?: () => void;
+
+  /**
+   * Called when the user requests dismissal (backdrop tap, Android back at root).
+   * The parent must set `visible` to false in response.
+   */
+  onRequestDismiss?: () => void;
+
+  /** Whether tapping the backdrop dismisses the sheet. Default: true. */
+  dismissOnBackdropPress?: boolean;
+
+  /** Whether swiping down on the drag handle dismisses the sheet. Default: true. */
+  dismissOnSwipeDown?: boolean;
+
+  /** Whether to render the drag handle at the top of the sheet. Default: true when swipe is enabled. */
+  showDragHandle?: boolean;
+
+  /** Sheet content. Expected to contain NavigationProvider + NavigationContainer. */
+  children: ReactNode;
+}

package/src/Components/internal/countries.ts

@@ -0,0 +1,302 @@
+// ISO 3166-1 alpha-2 country codes with English names.
+// The English `name` is the fallback used when `Intl.DisplayNames` is unavailable
+// or doesn't resolve a code. For display, prefer `getLocalizedCountryName(code, locale)`.
+//
+// The `as const` assertion below is load-bearing: it widens each entry's `code`
+// from `string` to its literal type, so `CountryCode` resolves to the union of
+// all 250 ISO codes rather than collapsing to `string`.
+
+export const COUNTRIES = [
+  { code: 'AF', name: 'Afghanistan' },
+  { code: 'AL', name: 'Albania' },
+  { code: 'DZ', name: 'Algeria' },
+  { code: 'AS', name: 'American Samoa' },
+  { code: 'AD', name: 'Andorra' },
+  { code: 'AO', name: 'Angola' },
+  { code: 'AI', name: 'Anguilla' },
+  { code: 'AQ', name: 'Antarctica' },
+  { code: 'AG', name: 'Antigua and Barbuda' },
+  { code: 'AR', name: 'Argentina' },
+  { code: 'AM', name: 'Armenia' },
+  { code: 'AW', name: 'Aruba' },
+  { code: 'AU', name: 'Australia' },
+  { code: 'AT', name: 'Austria' },
+  { code: 'AZ', name: 'Azerbaijan' },
+  { code: 'BS', name: 'Bahamas' },
+  { code: 'BH', name: 'Bahrain' },
+  { code: 'BD', name: 'Bangladesh' },
+  { code: 'BB', name: 'Barbados' },
+  { code: 'BY', name: 'Belarus' },
+  { code: 'BE', name: 'Belgium' },
+  { code: 'BZ', name: 'Belize' },
+  { code: 'BJ', name: 'Benin' },
+  { code: 'BM', name: 'Bermuda' },
+  { code: 'BT', name: 'Bhutan' },
+  { code: 'BO', name: 'Bolivia' },
+  { code: 'BQ', name: 'Bonaire, Sint Eustatius and Saba' },
+  { code: 'BA', name: 'Bosnia and Herzegovina' },
+  { code: 'BW', name: 'Botswana' },
+  { code: 'BV', name: 'Bouvet Island' },
+  { code: 'BR', name: 'Brazil' },
+  { code: 'IO', name: 'British Indian Ocean Territory' },
+  { code: 'BN', name: 'Brunei Darussalam' },
+  { code: 'BG', name: 'Bulgaria' },
+  { code: 'BF', name: 'Burkina Faso' },
+  { code: 'BI', name: 'Burundi' },
+  { code: 'CV', name: 'Cabo Verde' },
+  { code: 'KH', name: 'Cambodia' },
+  { code: 'CM', name: 'Cameroon' },
+  { code: 'CA', name: 'Canada' },
+  { code: 'KY', name: 'Cayman Islands' },
+  { code: 'CF', name: 'Central African Republic' },
+  { code: 'TD', name: 'Chad' },
+  { code: 'CL', name: 'Chile' },
+  { code: 'CN', name: 'China' },
+  { code: 'CX', name: 'Christmas Island' },
+  { code: 'CC', name: 'Cocos (Keeling) Islands' },
+  { code: 'CO', name: 'Colombia' },
+  { code: 'KM', name: 'Comoros' },
+  { code: 'CG', name: 'Congo' },
+  { code: 'CD', name: 'Congo, Democratic Republic of the' },
+  { code: 'CK', name: 'Cook Islands' },
+  { code: 'CR', name: 'Costa Rica' },
+  { code: 'CI', name: "Côte d'Ivoire" },
+  { code: 'HR', name: 'Croatia' },
+  { code: 'CU', name: 'Cuba' },
+  { code: 'CW', name: 'Curaçao' },
+  { code: 'CY', name: 'Cyprus' },
+  { code: 'CZ', name: 'Czechia' },
+  { code: 'DK', name: 'Denmark' },
+  { code: 'DJ', name: 'Djibouti' },
+  { code: 'DM', name: 'Dominica' },
+  { code: 'DO', name: 'Dominican Republic' },
+  { code: 'EC', name: 'Ecuador' },
+  { code: 'EG', name: 'Egypt' },
+  { code: 'SV', name: 'El Salvador' },
+  { code: 'GQ', name: 'Equatorial Guinea' },
+  { code: 'ER', name: 'Eritrea' },
+  { code: 'EE', name: 'Estonia' },
+  { code: 'SZ', name: 'Eswatini' },
+  { code: 'ET', name: 'Ethiopia' },
+  { code: 'FK', name: 'Falkland Islands' },
+  { code: 'FO', name: 'Faroe Islands' },
+  { code: 'FJ', name: 'Fiji' },
+  { code: 'FI', name: 'Finland' },
+  { code: 'FR', name: 'France' },
+  { code: 'GF', name: 'French Guiana' },
+  { code: 'PF', name: 'French Polynesia' },
+  { code: 'TF', name: 'French Southern Territories' },
+  { code: 'GA', name: 'Gabon' },
+  { code: 'GM', name: 'Gambia' },
+  { code: 'GE', name: 'Georgia' },
+  { code: 'DE', name: 'Germany' },
+  { code: 'GH', name: 'Ghana' },
+  { code: 'GI', name: 'Gibraltar' },
+  { code: 'GR', name: 'Greece' },
+  { code: 'GL', name: 'Greenland' },
+  { code: 'GD', name: 'Grenada' },
+  { code: 'GP', name: 'Guadeloupe' },
+  { code: 'GU', name: 'Guam' },
+  { code: 'GT', name: 'Guatemala' },
+  { code: 'GG', name: 'Guernsey' },
+  { code: 'GN', name: 'Guinea' },
+  { code: 'GW', name: 'Guinea-Bissau' },
+  { code: 'GY', name: 'Guyana' },
+  { code: 'HT', name: 'Haiti' },
+  { code: 'HM', name: 'Heard Island and McDonald Islands' },
+  { code: 'VA', name: 'Holy See' },
+  { code: 'HN', name: 'Honduras' },
+  { code: 'HK', name: 'Hong Kong' },
+  { code: 'HU', name: 'Hungary' },
+  { code: 'IS', name: 'Iceland' },
+  { code: 'IN', name: 'India' },
+  { code: 'ID', name: 'Indonesia' },
+  { code: 'IR', name: 'Iran' },
+  { code: 'IQ', name: 'Iraq' },
+  { code: 'IE', name: 'Ireland' },
+  { code: 'IM', name: 'Isle of Man' },
+  { code: 'IL', name: 'Israel' },
+  { code: 'IT', name: 'Italy' },
+  { code: 'JM', name: 'Jamaica' },
+  { code: 'JP', name: 'Japan' },
+  { code: 'JE', name: 'Jersey' },
+  { code: 'JO', name: 'Jordan' },
+  { code: 'KZ', name: 'Kazakhstan' },
+  { code: 'KE', name: 'Kenya' },
+  { code: 'KI', name: 'Kiribati' },
+  { code: 'KP', name: "Korea, Democratic People's Republic of" },
+  { code: 'KR', name: 'Korea, Republic of' },
+  { code: 'KW', name: 'Kuwait' },
+  { code: 'KG', name: 'Kyrgyzstan' },
+  { code: 'LA', name: "Lao People's Democratic Republic" },
+  { code: 'LV', name: 'Latvia' },
+  { code: 'LB', name: 'Lebanon' },
+  { code: 'LS', name: 'Lesotho' },
+  { code: 'LR', name: 'Liberia' },
+  { code: 'LY', name: 'Libya' },
+  { code: 'LI', name: 'Liechtenstein' },
+  { code: 'LT', name: 'Lithuania' },
+  { code: 'LU', name: 'Luxembourg' },
+  { code: 'MO', name: 'Macao' },
+  { code: 'MG', name: 'Madagascar' },
+  { code: 'MW', name: 'Malawi' },
+  { code: 'MY', name: 'Malaysia' },
+  { code: 'MV', name: 'Maldives' },
+  { code: 'ML', name: 'Mali' },
+  { code: 'MT', name: 'Malta' },
+  { code: 'MH', name: 'Marshall Islands' },
+  { code: 'MQ', name: 'Martinique' },
+  { code: 'MR', name: 'Mauritania' },
+  { code: 'MU', name: 'Mauritius' },
+  { code: 'YT', name: 'Mayotte' },
+  { code: 'MX', name: 'Mexico' },
+  { code: 'FM', name: 'Micronesia' },
+  { code: 'MD', name: 'Moldova' },
+  { code: 'MC', name: 'Monaco' },
+  { code: 'MN', name: 'Mongolia' },
+  { code: 'ME', name: 'Montenegro' },
+  { code: 'MS', name: 'Montserrat' },
+  { code: 'MA', name: 'Morocco' },
+  { code: 'MZ', name: 'Mozambique' },
+  { code: 'MM', name: 'Myanmar' },
+  { code: 'NA', name: 'Namibia' },
+  { code: 'NR', name: 'Nauru' },
+  { code: 'NP', name: 'Nepal' },
+  { code: 'NL', name: 'Netherlands' },
+  { code: 'NC', name: 'New Caledonia' },
+  { code: 'NZ', name: 'New Zealand' },
+  { code: 'NI', name: 'Nicaragua' },
+  { code: 'NE', name: 'Niger' },
+  { code: 'NG', name: 'Nigeria' },
+  { code: 'NU', name: 'Niue' },
+  { code: 'NF', name: 'Norfolk Island' },
+  { code: 'MK', name: 'North Macedonia' },
+  { code: 'MP', name: 'Northern Mariana Islands' },
+  { code: 'NO', name: 'Norway' },
+  { code: 'OM', name: 'Oman' },
+  { code: 'PK', name: 'Pakistan' },
+  { code: 'PW', name: 'Palau' },
+  { code: 'PS', name: 'Palestine, State of' },
+  { code: 'PA', name: 'Panama' },
+  { code: 'PG', name: 'Papua New Guinea' },
+  { code: 'PY', name: 'Paraguay' },
+  { code: 'PE', name: 'Peru' },
+  { code: 'PH', name: 'Philippines' },
+  { code: 'PN', name: 'Pitcairn' },
+  { code: 'PL', name: 'Poland' },
+  { code: 'PT', name: 'Portugal' },
+  { code: 'PR', name: 'Puerto Rico' },
+  { code: 'QA', name: 'Qatar' },
+  { code: 'RE', name: 'Réunion' },
+  { code: 'RO', name: 'Romania' },
+  { code: 'RU', name: 'Russian Federation' },
+  { code: 'RW', name: 'Rwanda' },
+  { code: 'BL', name: 'Saint Barthélemy' },
+  { code: 'SH', name: 'Saint Helena' },
+  { code: 'KN', name: 'Saint Kitts and Nevis' },
+  { code: 'LC', name: 'Saint Lucia' },
+  { code: 'MF', name: 'Saint Martin (French part)' },
+  { code: 'PM', name: 'Saint Pierre and Miquelon' },
+  { code: 'VC', name: 'Saint Vincent and the Grenadines' },
+  { code: 'WS', name: 'Samoa' },
+  { code: 'SM', name: 'San Marino' },
+  { code: 'ST', name: 'Sao Tome and Principe' },
+  { code: 'SA', name: 'Saudi Arabia' },
+  { code: 'SN', name: 'Senegal' },
+  { code: 'RS', name: 'Serbia' },
+  { code: 'SC', name: 'Seychelles' },
+  { code: 'SL', name: 'Sierra Leone' },
+  { code: 'SG', name: 'Singapore' },
+  { code: 'SX', name: 'Sint Maarten (Dutch part)' },
+  { code: 'SK', name: 'Slovakia' },
+  { code: 'SI', name: 'Slovenia' },
+  { code: 'SB', name: 'Solomon Islands' },
+  { code: 'SO', name: 'Somalia' },
+  { code: 'ZA', name: 'South Africa' },
+  { code: 'GS', name: 'South Georgia and the South Sandwich Islands' },
+  { code: 'SS', name: 'South Sudan' },
+  { code: 'ES', name: 'Spain' },
+  { code: 'LK', name: 'Sri Lanka' },
+  { code: 'SD', name: 'Sudan' },
+  { code: 'SR', name: 'Suriname' },
+  { code: 'SJ', name: 'Svalbard and Jan Mayen' },
+  { code: 'SE', name: 'Sweden' },
+  { code: 'CH', name: 'Switzerland' },
+  { code: 'SY', name: 'Syrian Arab Republic' },
+  { code: 'TW', name: 'Taiwan' },
+  { code: 'TJ', name: 'Tajikistan' },
+  { code: 'TZ', name: 'Tanzania' },
+  { code: 'TH', name: 'Thailand' },
+  { code: 'TL', name: 'Timor-Leste' },
+  { code: 'TG', name: 'Togo' },
+  { code: 'TK', name: 'Tokelau' },
+  { code: 'TO', name: 'Tonga' },
+  { code: 'TT', name: 'Trinidad and Tobago' },
+  { code: 'TN', name: 'Tunisia' },
+  { code: 'TR', name: 'Türkiye' },
+  { code: 'TM', name: 'Turkmenistan' },
+  { code: 'TC', name: 'Turks and Caicos Islands' },
+  { code: 'TV', name: 'Tuvalu' },
+  { code: 'UG', name: 'Uganda' },
+  { code: 'UA', name: 'Ukraine' },
+  { code: 'AE', name: 'United Arab Emirates' },
+  { code: 'GB', name: 'United Kingdom' },
+  { code: 'US', name: 'United States of America' },
+  { code: 'UM', name: 'United States Minor Outlying Islands' },
+  { code: 'UY', name: 'Uruguay' },
+  { code: 'UZ', name: 'Uzbekistan' },
+  { code: 'VU', name: 'Vanuatu' },
+  { code: 'VE', name: 'Venezuela' },
+  { code: 'VN', name: 'Viet Nam' },
+  { code: 'VG', name: 'Virgin Islands (British)' },
+  { code: 'VI', name: 'Virgin Islands (U.S.)' },
+  { code: 'WF', name: 'Wallis and Futuna' },
+  { code: 'EH', name: 'Western Sahara' },
+  { code: 'YE', name: 'Yemen' },
+  { code: 'ZM', name: 'Zambia' },
+  { code: 'ZW', name: 'Zimbabwe' },
+] as const;
+
+export type Country = (typeof COUNTRIES)[number];
+/** Literal union of every ISO 3166-1 alpha-2 code present in `COUNTRIES`. */
+export type CountryCode = Country['code'];
+
+const BY_CODE: Record<string, string> = Object.freeze(
+  COUNTRIES.reduce<Record<string, string>>((acc, c) => {
+    acc[c.code] = c.name;
+    return acc;
+  }, {})
+);
+
+export function getCountryName(code: string | undefined | null): string | undefined {
+  if (!code) return undefined;
+  return BY_CODE[code.toUpperCase()];
+}
+
+// Cache one Intl.DisplayNames per locale — constructor allocations are not free.
+const displayNamesCache: Map<string, Intl.DisplayNames | null> = new Map();
+
+function getDisplayNames(locale: string): Intl.DisplayNames | null {
+  if (displayNamesCache.has(locale)) return displayNamesCache.get(locale)!;
+  let instance: Intl.DisplayNames | null = null;
+  try {
+    instance = new Intl.DisplayNames([locale], { type: 'region' });
+  } catch {
+    instance = null;
+  }
+  displayNamesCache.set(locale, instance);
+  return instance;
+}
+
+export function getLocalizedCountryName(code: string | undefined | null, locale: string): string | undefined {
+  if (!code) return undefined;
+  const upper = code.toUpperCase();
+  const fallback = BY_CODE[upper];
+  const displayNames = getDisplayNames(locale);
+  if (!displayNames) return fallback;
+  try {
+    return displayNames.of(upper) ?? fallback;
+  } catch {
+    return fallback;
+  }
+}

package/src/Components/internal/currency/currencies.json

@@ -0,0 +1 @@
+[{"m":2,"c":"AED"},{"m":2,"c":"AFN"},{"m":2,"c":"ALL"},{"m":2,"c":"AMD"},{"m":2,"c":"ANG"},{"m":2,"c":"AOA"},{"m":2,"c":"ARS"},{"m":2,"c":"AUD"},{"m":2,"c":"AWG"},{"m":2,"c":"AZN"},{"m":2,"c":"BAM"},{"m":2,"c":"BBD"},{"m":2,"c":"BDT"},{"m":2,"c":"BGN"},{"m":3,"c":"BHD"},{"m":0,"c":"BIF"},{"m":2,"c":"BMD"},{"m":2,"c":"BND"},{"m":2,"c":"BOB"},{"m":2,"c":"BOV"},{"m":2,"c":"BRL"},{"m":2,"c":"BSD"},{"m":2,"c":"BTN"},{"m":2,"c":"BWP"},{"m":0,"c":"BYR"},{"m":2,"c":"BYN"},{"m":2,"c":"BZD"},{"m":2,"c":"CAD"},{"m":2,"c":"CDF"},{"m":2,"c":"CHE"},{"m":2,"c":"CHF"},{"m":2,"c":"CHW"},{"m":0,"c":"CLP"},{"m":2,"c":"CNY"},{"m":2,"c":"COP"},{"m":2,"c":"COU"},{"m":2,"c":"CRC"},{"m":2,"c":"CUC"},{"m":2,"c":"CUP"},{"m":2,"c":"CVE"},{"m":2,"c":"CZK"},{"m":0,"c":"DJF"},{"m":2,"c":"DKK"},{"m":2,"c":"DOP"},{"m":2,"c":"DZD"},{"m":2,"c":"EGP"},{"m":2,"c":"ERN"},{"m":2,"c":"ETB"},{"m":2,"c":"EUR"},{"m":2,"c":"FJD"},{"m":2,"c":"FKP"},{"m":2,"c":"GBP"},{"m":2,"c":"GEL"},{"m":2,"c":"GHS"},{"m":2,"c":"GIP"},{"m":2,"c":"GMD"},{"m":0,"c":"GNF"},{"m":2,"c":"GTQ"},{"m":2,"c":"GYD"},{"m":2,"c":"HKD"},{"m":2,"c":"HNL"},{"m":2,"c":"HRK"},{"m":2,"c":"HTG"},{"m":2,"c":"HUF"},{"m":2,"c":"IDR"},{"m":2,"c":"ILS"},{"m":2,"c":"INR"},{"m":3,"c":"IQD"},{"m":2,"c":"IRR"},{"m":0,"c":"ISK"},{"m":2,"c":"JMD"},{"m":3,"c":"JOD"},{"m":0,"c":"JPY"},{"m":2,"c":"KES"},{"m":2,"c":"KGS"},{"m":2,"c":"KHR"},{"m":0,"c":"KMF"},{"m":2,"c":"KPW"},{"m":0,"c":"KRW"},{"m":3,"c":"KWD"},{"m":2,"c":"KYD"},{"m":2,"c":"KZT"},{"m":2,"c":"LAK"},{"m":2,"c":"LBP"},{"m":2,"c":"LKR"},{"m":2,"c":"LRD"},{"m":2,"c":"LSL"},{"m":3,"c":"LYD"},{"m":2,"c":"MAD"},{"m":2,"c":"MDL"},{"m":2,"c":"MKD"},{"m":2,"c":"MMK"},{"m":2,"c":"MNT"},{"m":2,"c":"MOP"},{"m":2,"c":"MUR"},{"m":2,"c":"MVR"},{"m":2,"c":"MWK"},{"m":2,"c":"MXN"},{"m":2,"c":"MXV"},{"m":2,"c":"MYR"},{"m":2,"c":"MZN"},{"m":2,"c":"NAD"},{"m":2,"c":"NGN"},{"m":2,"c":"NIO"},{"m":2,"c":"NOK"},{"m":2,"c":"NPR"},{"m":2,"c":"NZD"},{"m":3,"c":"OMR"},{"m":2,"c":"PAB"},{"m":2,"c":"PEN"},{"m":2,"c":"PGK"},{"m":2,"c":"PHP"},{"m":2,"c":"PKR"},{"m":2,"c":"PLN"},{"m":0,"c":"PYG"},{"m":2,"c":"QAR"},{"m":2,"c":"RON"},{"m":2,"c":"RSD"},{"m":2,"c":"RUB"},{"m":0,"c":"RWF"},{"m":2,"c":"SAR"},{"m":2,"c":"SBD"},{"m":2,"c":"SCR"},{"m":2,"c":"SDG"},{"m":2,"c":"SEK"},{"m":2,"c":"SGD"},{"m":2,"c":"SHP"},{"m":2,"c":"SLE"},{"m":2,"c":"SOS"},{"m":2,"c":"SRD"},{"m":2,"c":"SSP"},{"m":2,"c":"STN"},{"m":2,"c":"SVC"},{"m":2,"c":"SYP"},{"m":2,"c":"SZL"},{"m":2,"c":"THB"},{"m":2,"c":"TJS"},{"m":2,"c":"TMT"},{"m":3,"c":"TND"},{"m":2,"c":"TOP"},{"m":2,"c":"TRY"},{"m":2,"c":"TTD"},{"m":2,"c":"TWD"},{"m":2,"c":"TZS"},{"m":2,"c":"UAH"},{"m":0,"c":"UGX"},{"m":2,"c":"USD"},{"m":2,"c":"UYU"},{"m":2,"c":"UZS"},{"m":2,"c":"VED"},{"m":2,"c":"VES"},{"m":0,"c":"VND"},{"m":0,"c":"VUV"},{"m":2,"c":"WST"},{"m":0,"c":"XAF"},{"m":2,"c":"XCD"},{"m":0,"c":"XOF"},{"m":0,"c":"XPF"},{"m":2,"c":"YER"},{"m":2,"c":"ZAR"},{"m":2,"c":"ZMW"},{"m":2,"c":"ZWL"}]