@scripso-homepad/ui 0.4.22 → 0.4.23

package/dist/index.cjs

@@ -1816,6 +1816,35 @@ function countryCodeToFlagEmoji(code) {
     ...upper.split("").map((char) => 127462 - 65 + char.charCodeAt(0))
   );
 }
+function getCountryFlagImageUri(code) {
+  const lower = code.trim().toLowerCase();
+  if (!/^[a-z]{2}$/.test(lower)) return null;
+  return `https://flagcdn.com/w40/${lower}.png`;
+}
+var FLAG_HEIGHT = 18;
+var FLAG_WIDTH = 24;
+function CountryFlag({ code, style }) {
+  const uri = getCountryFlagImageUri(code);
+  if (uri === null) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactNative.Image,
+    {
+      source: { uri },
+      style: [styles5.flag, style],
+      accessibilityIgnoresInvertColors: true,
+      accessibilityLabel: `${code.trim().toUpperCase()} flag`
+    }
+  );
+}
+var styles5 = reactNative.StyleSheet.create({
+  flag: {
+    width: FLAG_WIDTH,
+    height: FLAG_HEIGHT,
+    borderRadius: 2
+  }
+});
 var DROPDOWN_GAP = 10;
 var DROPDOWN_HEIGHT = 186;
 var DROPDOWN_PADDING = 8;
@@ -1881,13 +1910,13 @@ function CountryCodeSelector({
         accessibilityRole: "button",
         onPress: () => handleSelect(item.code),
         style: [
-          styles5.option,
-          isSelected && styles5.optionSelected,
-          !isLast && styles5.optionSpacing
+          styles6.option,
+          isSelected && styles6.optionSelected,
+          !isLast && styles6.optionSpacing
         ],
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles5.flag, children: countryCodeToFlagEmoji(item.code) }),
-          /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles5.optionDialCode, children: item.dialCode })
+          /* @__PURE__ */ jsxRuntime.jsx(CountryFlag, { code: item.code }),
+          /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles6.optionDialCode, children: item.dialCode })
         ]
       },
       item.code
@@ -1897,8 +1926,8 @@ function CountryCodeSelector({
     reactNative.ScrollView,
     {
       ref: scrollRef,
-      style: styles5.dropdownScroll,
-      contentContainerStyle: styles5.dropdownContent,
+      style: styles6.dropdownScroll,
+      contentContainerStyle: styles6.dropdownContent,
       keyboardShouldPersistTaps: "handled",
       showsVerticalScrollIndicator: true,
       bounces: false,
@@ -1906,7 +1935,7 @@ function CountryCodeSelector({
       children: optionList
     }
   );
-  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { ref: wrapperRef, style: [styles5.root, style], children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { ref: wrapperRef, style: [styles6.root, style], children: [
     /* @__PURE__ */ jsxRuntime.jsxs(
       reactNative.Pressable,
       {
@@ -1915,13 +1944,13 @@ function CountryCodeSelector({
         disabled,
         onPress: handleOpen,
         style: [
-          styles5.trigger,
-          disabled ? styles5.triggerDisabled : styles5.triggerEnabled,
-          reactNative.Platform.OS === "web" ? styles5.triggerWeb : null
+          styles6.trigger,
+          disabled ? styles6.triggerDisabled : styles6.triggerEnabled,
+          reactNative.Platform.OS === "web" ? styles6.triggerWeb : null
         ],
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles5.flag, children: countryCodeToFlagEmoji(selected.code) }),
-          /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles5.dialCode, { color: textColor }], children: selected.dialCode }),
+          /* @__PURE__ */ jsxRuntime.jsx(CountryFlag, { code: selected.code }),
+          /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles6.dialCode, { color: textColor }], children: selected.dialCode }),
           /* @__PURE__ */ jsxRuntime.jsx(ChevronDownIcon, { size: CHEVRON_SIZE, color: colors.stormGray100 })
         ]
       }
@@ -1933,11 +1962,11 @@ function CountryCodeSelector({
         transparent: true,
         animationType: "fade",
         onRequestClose: closeDropdown,
-        children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Pressable, { style: styles5.overlay, onPress: closeDropdown, children: anchor ? /* @__PURE__ */ jsxRuntime.jsx(
+        children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Pressable, { style: styles6.overlay, onPress: closeDropdown, children: anchor ? /* @__PURE__ */ jsxRuntime.jsx(
           reactNative.View,
           {
             style: [
-              styles5.dropdown,
+              styles6.dropdown,
               {
                 top: dropdownTop,
                 left: anchor.x,
@@ -1951,7 +1980,7 @@ function CountryCodeSelector({
     )
   ] });
 }
-var styles5 = reactNative.StyleSheet.create({
+var styles6 = reactNative.StyleSheet.create({
   root: {
     alignSelf: "flex-start",
     flexShrink: 0
@@ -1979,10 +2008,6 @@ var styles5 = reactNative.StyleSheet.create({
   triggerWeb: {
     width: "max-content"
   },
-  flag: {
-    fontSize: 18,
-    lineHeight: 24
-  },
   dialCode: {
     fontSize: fontSize.md,
     fontWeight: fontWeight.medium,
@@ -2081,7 +2106,7 @@ function PhoneInput({
     onChangeText?.(sanitizePhoneDigits(value));
   }
   const helperMessage = error ?? hint;
-  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { ref: wrapperRef, style: [styles6.wrapper, containerStyle], children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { ref: wrapperRef, style: [styles7.wrapper, containerStyle], children: [
     label ? /* @__PURE__ */ jsxRuntime.jsx(
       Label,
       {
@@ -2091,24 +2116,24 @@ function PhoneInput({
         children: label
       }
     ) : null,
-    /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles6.row, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles7.row, children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         CountryCodeSelector,
         {
           value: countryCode,
           onValueChange: onCountryCodeChange,
           disabled: isDisabled,
-          style: styles6.countrySelector
+          style: styles7.countrySelector
         }
       ),
-      /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [phoneFieldStyles.outline, styles6.phoneOutline], children: /* @__PURE__ */ jsxRuntime.jsx(
+      /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [phoneFieldStyles.outline, styles7.phoneOutline], children: /* @__PURE__ */ jsxRuntime.jsx(
         reactNative.View,
         {
           style: [
             inputFieldMetrics.containerBase,
             inputFieldMetrics.container,
             phoneFieldStyles.container,
-            styles6.phoneField
+            styles7.phoneField
           ],
           children: /* @__PURE__ */ jsxRuntime.jsx(
             reactNative.TextInput,
@@ -2132,10 +2157,10 @@ function PhoneInput({
         }
       ) })
     ] }),
-    helperMessage ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { ref: helperRef, style: error ? styles6.error : styles6.hint, children: helperMessage }) : null
+    helperMessage ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { ref: helperRef, style: error ? styles7.error : styles7.hint, children: helperMessage }) : null
   ] });
 }
-var styles6 = reactNative.StyleSheet.create({
+var styles7 = reactNative.StyleSheet.create({
   wrapper: {
     width: "100%",
     gap: spacing.sm
@@ -3313,16 +3338,16 @@ function DatePicker(props) {
     reactNative.View,
     {
       ref: wrapperRef,
-      style: [styles7.wrapper, isFluidField && styles7.wrapperFluid, containerStyle],
+      style: [styles8.wrapper, isFluidField && styles8.wrapperFluid, containerStyle],
       children: [
-        label ? /* @__PURE__ */ jsxRuntime.jsx(Label, { disabled, style: styles7.label, className: labelClassName, children: label }) : null,
+        label ? /* @__PURE__ */ jsxRuntime.jsx(Label, { disabled, style: styles8.label, className: labelClassName, children: label }) : null,
         /* @__PURE__ */ jsxRuntime.jsx(
           reactNative.View,
           {
             style: [
               fieldStyles.outline,
-              styles7.fieldOutline,
-              isFluidField && styles7.fieldOutlineFluid,
+              styles8.fieldOutline,
+              isFluidField && styles8.fieldOutlineFluid,
               fieldOutlineStyle
             ],
             children: /* @__PURE__ */ jsxRuntime.jsxs(
@@ -3335,7 +3360,7 @@ function DatePicker(props) {
                 onPress: openPicker,
                 style: [
                   calendarFieldMetrics.container,
-                  isFluidField && styles7.fieldContainerFluid,
+                  isFluidField && styles8.fieldContainerFluid,
                   fieldStyles.container,
                   fieldStyle
                 ],
@@ -3348,7 +3373,7 @@ function DatePicker(props) {
                       children: displayValue
                     }
                   ),
-                  /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles7.iconSlot, children: /* @__PURE__ */ jsxRuntime.jsx(
+                  /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles8.iconSlot, children: /* @__PURE__ */ jsxRuntime.jsx(
                     CalendarIcon,
                     {
                       size: CALENDAR_FIELD_ICON_SIZE,
@@ -3360,12 +3385,12 @@ function DatePicker(props) {
             )
           }
         ),
-        helperMessage ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { ref: helperRef, style: error ? styles7.error : styles7.hint, children: helperMessage }) : null,
-        /* @__PURE__ */ jsxRuntime.jsx(reactNative.Modal, { visible: open, transparent: true, animationType: "fade", onRequestClose: closePicker, children: /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles7.modalRoot, children: [
+        helperMessage ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { ref: helperRef, style: error ? styles8.error : styles8.hint, children: helperMessage }) : null,
+        /* @__PURE__ */ jsxRuntime.jsx(reactNative.Modal, { visible: open, transparent: true, animationType: "fade", onRequestClose: closePicker, children: /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles8.modalRoot, children: [
           /* @__PURE__ */ jsxRuntime.jsx(
             reactNative.Pressable,
             {
-              style: styles7.backdrop,
+              style: styles8.backdrop,
               onPress: closePicker,
               accessibilityRole: "button",
               accessibilityLabel: labels?.closeCalendar ?? translations.closeCalendar
@@ -3375,7 +3400,7 @@ function DatePicker(props) {
             reactNative.View,
             {
               style: [
-                styles7.panelPosition,
+                styles8.panelPosition,
                 {
                   top: dropdownTop,
                   left: panelLeft,
@@ -3423,7 +3448,7 @@ function DatePicker(props) {
     }
   );
 }
-var styles7 = reactNative.StyleSheet.create({
+var styles8 = reactNative.StyleSheet.create({
   wrapper: {
     width: CALENDAR_FIELD_WIDTH,
     maxWidth: "100%",
@@ -3504,6 +3529,7 @@ exports.Calendar = Calendar;
 exports.CalendarIcon = CalendarIcon;
 exports.CalendarLocaleProvider = CalendarLocaleProvider;
 exports.CountryCodeSelector = CountryCodeSelector;
+exports.CountryFlag = CountryFlag;
 exports.DatePicker = DatePicker;
 exports.Input = Input;
 exports.Label = Label;
@@ -3515,6 +3541,7 @@ exports.buttonTypography = buttonTypography;
 exports.calendarTranslations = calendarTranslations;
 exports.colors = colors;
 exports.countries = countries;
+exports.countryCodeToFlagEmoji = countryCodeToFlagEmoji;
 exports.defaultCountry = defaultCountry;
 exports.emeraldGreen = emeraldGreen;
 exports.findCountry = findCountry;
@@ -3524,6 +3551,7 @@ exports.fonts = fonts;
 exports.formatLocalizedCalendarMonthYear = formatLocalizedCalendarMonthYear;
 exports.getCalendarMonthLabels = getCalendarMonthLabels;
 exports.getCalendarTranslations = getCalendarTranslations;
+exports.getCountryFlagImageUri = getCountryFlagImageUri;
 exports.labelTypography = labelTypography;
 exports.navy = navy;
 exports.radii = radii;