@scripso-homepad/ui 0.4.22 → 0.4.23

package/dist/index.d.cts

@@ -1,6 +1,6 @@
 import * as react from 'react';
 import { ReactNode } from 'react';
-import { GestureResponderEvent, StyleProp, ViewStyle, TextStyle, TextInputProps, TextProps } from 'react-native';
+import { GestureResponderEvent, StyleProp, ViewStyle, TextStyle, TextInputProps, ImageStyle, TextProps } from 'react-native';
 
 type ButtonVariant = "white" | "primary" | "green" | "gray";
 type ButtonSize = "lg" | "sm";
@@ -131,6 +131,21 @@ interface CountryCodeSelectorProps {
 }
 declare function CountryCodeSelector({ value, onValueChange, options, disabled, style, className, }: CountryCodeSelectorProps): react.JSX.Element;
 
+type CountryFlagProps = {
+    code: string;
+    style?: StyleProp<ImageStyle>;
+};
+/** Renders a country flag image (works on Windows; emoji flags do not). */
+declare function CountryFlag({ code, style }: CountryFlagProps): react.JSX.Element | null;
+
+/** ISO 3166-1 alpha-2 country code → flag emoji. Prefer CountryFlag images on Windows. */
+declare function countryCodeToFlagEmoji(code: string): string;
+/**
+ * PNG flag URL (flagcdn). Windows does not render regional-indicator flag emoji,
+ * so UI should use images instead of countryCodeToFlagEmoji.
+ */
+declare function getCountryFlagImageUri(code: string): string | null;
+
 type DateRange = {
     start: Date;
     end?: Date;
@@ -525,4 +540,4 @@ declare const shadows: {
     };
 };
 
-export { Button, type ButtonProps, type ButtonSize, type ButtonVariant, Calendar, CalendarIcon, type CalendarLabels, type CalendarLocale, CalendarLocaleProvider, type CalendarLocaleProviderProps, type CalendarProps, type CalendarRangeProps, type CalendarSingleProps, type CalendarTranslationKey$1 as CalendarTranslationKey, type CalendarTranslations, type Country, CountryCodeSelector, type CountryCodeSelectorProps, DatePicker, type DatePickerProps, type DatePickerRangeProps, type DatePickerSingleProps, type DateRange, type EmeraldGreenStep, Input, type InputProps, Label, type LabelProps, LockIcon, type MultipleSelectProps, type NavyStep, PhoneInput, type PhoneInputProps, type RubyRedStep, Select, type SelectOption, type SelectProps, type SingleSelectProps, type StormGrayStep, brand, buttonTypography, calendarTranslations, colors, countries, defaultCountry, emeraldGreen, findCountry, fontSize, fontWeight, fonts, formatLocalizedCalendarMonthYear, getCalendarMonthLabels, getCalendarTranslations, labelTypography, navy, radii, resolveCalendarLocale, resolveWeekdayLabels, rubyRed, shadows, spacing, stormGray, typographyScale, useCalendarLocale };
+export { Button, type ButtonProps, type ButtonSize, type ButtonVariant, Calendar, CalendarIcon, type CalendarLabels, type CalendarLocale, CalendarLocaleProvider, type CalendarLocaleProviderProps, type CalendarProps, type CalendarRangeProps, type CalendarSingleProps, type CalendarTranslationKey$1 as CalendarTranslationKey, type CalendarTranslations, type Country, CountryCodeSelector, type CountryCodeSelectorProps, CountryFlag, type CountryFlagProps, DatePicker, type DatePickerProps, type DatePickerRangeProps, type DatePickerSingleProps, type DateRange, type EmeraldGreenStep, Input, type InputProps, Label, type LabelProps, LockIcon, type MultipleSelectProps, type NavyStep, PhoneInput, type PhoneInputProps, type RubyRedStep, Select, type SelectOption, type SelectProps, type SingleSelectProps, type StormGrayStep, brand, buttonTypography, calendarTranslations, colors, countries, countryCodeToFlagEmoji, defaultCountry, emeraldGreen, findCountry, fontSize, fontWeight, fonts, formatLocalizedCalendarMonthYear, getCalendarMonthLabels, getCalendarTranslations, getCountryFlagImageUri, labelTypography, navy, radii, resolveCalendarLocale, resolveWeekdayLabels, rubyRed, shadows, spacing, stormGray, typographyScale, useCalendarLocale };

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import * as react from 'react';
 import { ReactNode } from 'react';
-import { GestureResponderEvent, StyleProp, ViewStyle, TextStyle, TextInputProps, TextProps } from 'react-native';
+import { GestureResponderEvent, StyleProp, ViewStyle, TextStyle, TextInputProps, ImageStyle, TextProps } from 'react-native';
 
 type ButtonVariant = "white" | "primary" | "green" | "gray";
 type ButtonSize = "lg" | "sm";
@@ -131,6 +131,21 @@ interface CountryCodeSelectorProps {
 }
 declare function CountryCodeSelector({ value, onValueChange, options, disabled, style, className, }: CountryCodeSelectorProps): react.JSX.Element;
 
+type CountryFlagProps = {
+    code: string;
+    style?: StyleProp<ImageStyle>;
+};
+/** Renders a country flag image (works on Windows; emoji flags do not). */
+declare function CountryFlag({ code, style }: CountryFlagProps): react.JSX.Element | null;
+
+/** ISO 3166-1 alpha-2 country code → flag emoji. Prefer CountryFlag images on Windows. */
+declare function countryCodeToFlagEmoji(code: string): string;
+/**
+ * PNG flag URL (flagcdn). Windows does not render regional-indicator flag emoji,
+ * so UI should use images instead of countryCodeToFlagEmoji.
+ */
+declare function getCountryFlagImageUri(code: string): string | null;
+
 type DateRange = {
     start: Date;
     end?: Date;
@@ -525,4 +540,4 @@ declare const shadows: {
     };
 };
 
-export { Button, type ButtonProps, type ButtonSize, type ButtonVariant, Calendar, CalendarIcon, type CalendarLabels, type CalendarLocale, CalendarLocaleProvider, type CalendarLocaleProviderProps, type CalendarProps, type CalendarRangeProps, type CalendarSingleProps, type CalendarTranslationKey$1 as CalendarTranslationKey, type CalendarTranslations, type Country, CountryCodeSelector, type CountryCodeSelectorProps, DatePicker, type DatePickerProps, type DatePickerRangeProps, type DatePickerSingleProps, type DateRange, type EmeraldGreenStep, Input, type InputProps, Label, type LabelProps, LockIcon, type MultipleSelectProps, type NavyStep, PhoneInput, type PhoneInputProps, type RubyRedStep, Select, type SelectOption, type SelectProps, type SingleSelectProps, type StormGrayStep, brand, buttonTypography, calendarTranslations, colors, countries, defaultCountry, emeraldGreen, findCountry, fontSize, fontWeight, fonts, formatLocalizedCalendarMonthYear, getCalendarMonthLabels, getCalendarTranslations, labelTypography, navy, radii, resolveCalendarLocale, resolveWeekdayLabels, rubyRed, shadows, spacing, stormGray, typographyScale, useCalendarLocale };
+export { Button, type ButtonProps, type ButtonSize, type ButtonVariant, Calendar, CalendarIcon, type CalendarLabels, type CalendarLocale, CalendarLocaleProvider, type CalendarLocaleProviderProps, type CalendarProps, type CalendarRangeProps, type CalendarSingleProps, type CalendarTranslationKey$1 as CalendarTranslationKey, type CalendarTranslations, type Country, CountryCodeSelector, type CountryCodeSelectorProps, CountryFlag, type CountryFlagProps, DatePicker, type DatePickerProps, type DatePickerRangeProps, type DatePickerSingleProps, type DateRange, type EmeraldGreenStep, Input, type InputProps, Label, type LabelProps, LockIcon, type MultipleSelectProps, type NavyStep, PhoneInput, type PhoneInputProps, type RubyRedStep, Select, type SelectOption, type SelectProps, type SingleSelectProps, type StormGrayStep, brand, buttonTypography, calendarTranslations, colors, countries, countryCodeToFlagEmoji, defaultCountry, emeraldGreen, findCountry, fontSize, fontWeight, fonts, formatLocalizedCalendarMonthYear, getCalendarMonthLabels, getCalendarTranslations, getCountryFlagImageUri, labelTypography, navy, radii, resolveCalendarLocale, resolveWeekdayLabels, rubyRed, shadows, spacing, stormGray, typographyScale, useCalendarLocale };

package/dist/index.js

@@ -1,7 +1,7 @@
 import { spacing, colors, fontWeight, fontSize, fonts, radii, INPUT_ICON_GAP, useApplyWebClassName, resolveInputVisualState, Label, getInputFieldStyles, inputFieldMetrics } from './chunk-KJYQA5OY.js';
 export { Button, Input, Label, brand, buttonTypography, colors, emeraldGreen, fontSize, fontWeight, fonts, labelTypography, navy, radii, rubyRed, shadows, spacing, stormGray, typographyScale } from './chunk-KJYQA5OY.js';
 import { createContext, useRef, useState, useMemo, useEffect, useLayoutEffect, useContext, isValidElement, cloneElement } from 'react';
-import { Platform, StyleSheet, Animated, Easing, View, Pressable, Text, Modal, ScrollView, TextInput, Dimensions } from 'react-native';
+import { Platform, StyleSheet, Animated, Easing, View, Pressable, Text, Modal, ScrollView, Image, TextInput, Dimensions } from 'react-native';
 import Svg2, { Path } from 'react-native-svg';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
@@ -886,6 +886,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__ */ jsx(
+    Image,
+    {
+      source: { uri },
+      style: [styles2.flag, style],
+      accessibilityIgnoresInvertColors: true,
+      accessibilityLabel: `${code.trim().toUpperCase()} flag`
+    }
+  );
+}
+var styles2 = StyleSheet.create({
+  flag: {
+    width: FLAG_WIDTH,
+    height: FLAG_HEIGHT,
+    borderRadius: 2
+  }
+});
 var DROPDOWN_GAP = 10;
 var DROPDOWN_HEIGHT = 186;
 var DROPDOWN_PADDING = 8;
@@ -951,13 +980,13 @@ function CountryCodeSelector({
         accessibilityRole: "button",
         onPress: () => handleSelect(item.code),
         style: [
-          styles2.option,
-          isSelected && styles2.optionSelected,
-          !isLast && styles2.optionSpacing
+          styles3.option,
+          isSelected && styles3.optionSelected,
+          !isLast && styles3.optionSpacing
         ],
         children: [
-          /* @__PURE__ */ jsx(Text, { style: styles2.flag, children: countryCodeToFlagEmoji(item.code) }),
-          /* @__PURE__ */ jsx(Text, { style: styles2.optionDialCode, children: item.dialCode })
+          /* @__PURE__ */ jsx(CountryFlag, { code: item.code }),
+          /* @__PURE__ */ jsx(Text, { style: styles3.optionDialCode, children: item.dialCode })
         ]
       },
       item.code
@@ -967,8 +996,8 @@ function CountryCodeSelector({
     ScrollView,
     {
       ref: scrollRef,
-      style: styles2.dropdownScroll,
-      contentContainerStyle: styles2.dropdownContent,
+      style: styles3.dropdownScroll,
+      contentContainerStyle: styles3.dropdownContent,
       keyboardShouldPersistTaps: "handled",
       showsVerticalScrollIndicator: true,
       bounces: false,
@@ -976,7 +1005,7 @@ function CountryCodeSelector({
       children: optionList
     }
   );
-  return /* @__PURE__ */ jsxs(View, { ref: wrapperRef, style: [styles2.root, style], children: [
+  return /* @__PURE__ */ jsxs(View, { ref: wrapperRef, style: [styles3.root, style], children: [
     /* @__PURE__ */ jsxs(
       Pressable,
       {
@@ -985,13 +1014,13 @@ function CountryCodeSelector({
         disabled,
         onPress: handleOpen,
         style: [
-          styles2.trigger,
-          disabled ? styles2.triggerDisabled : styles2.triggerEnabled,
-          Platform.OS === "web" ? styles2.triggerWeb : null
+          styles3.trigger,
+          disabled ? styles3.triggerDisabled : styles3.triggerEnabled,
+          Platform.OS === "web" ? styles3.triggerWeb : null
         ],
         children: [
-          /* @__PURE__ */ jsx(Text, { style: styles2.flag, children: countryCodeToFlagEmoji(selected.code) }),
-          /* @__PURE__ */ jsx(Text, { style: [styles2.dialCode, { color: textColor }], children: selected.dialCode }),
+          /* @__PURE__ */ jsx(CountryFlag, { code: selected.code }),
+          /* @__PURE__ */ jsx(Text, { style: [styles3.dialCode, { color: textColor }], children: selected.dialCode }),
           /* @__PURE__ */ jsx(ChevronDownIcon, { size: CHEVRON_SIZE, color: colors.stormGray100 })
         ]
       }
@@ -1003,11 +1032,11 @@ function CountryCodeSelector({
         transparent: true,
         animationType: "fade",
         onRequestClose: closeDropdown,
-        children: /* @__PURE__ */ jsx(Pressable, { style: styles2.overlay, onPress: closeDropdown, children: anchor ? /* @__PURE__ */ jsx(
+        children: /* @__PURE__ */ jsx(Pressable, { style: styles3.overlay, onPress: closeDropdown, children: anchor ? /* @__PURE__ */ jsx(
           View,
           {
             style: [
-              styles2.dropdown,
+              styles3.dropdown,
               {
                 top: dropdownTop,
                 left: anchor.x,
@@ -1021,7 +1050,7 @@ function CountryCodeSelector({
     )
   ] });
 }
-var styles2 = StyleSheet.create({
+var styles3 = StyleSheet.create({
   root: {
     alignSelf: "flex-start",
     flexShrink: 0
@@ -1049,10 +1078,6 @@ var styles2 = StyleSheet.create({
   triggerWeb: {
     width: "max-content"
   },
-  flag: {
-    fontSize: 18,
-    lineHeight: 24
-  },
   dialCode: {
     fontSize: fontSize.md,
     fontWeight: fontWeight.medium,
@@ -1151,7 +1176,7 @@ function PhoneInput({
     onChangeText?.(sanitizePhoneDigits(value));
   }
   const helperMessage = error ?? hint;
-  return /* @__PURE__ */ jsxs(View, { ref: wrapperRef, style: [styles3.wrapper, containerStyle], children: [
+  return /* @__PURE__ */ jsxs(View, { ref: wrapperRef, style: [styles4.wrapper, containerStyle], children: [
     label ? /* @__PURE__ */ jsx(
       Label,
       {
@@ -1161,24 +1186,24 @@ function PhoneInput({
         children: label
       }
     ) : null,
-    /* @__PURE__ */ jsxs(View, { style: styles3.row, children: [
+    /* @__PURE__ */ jsxs(View, { style: styles4.row, children: [
       /* @__PURE__ */ jsx(
         CountryCodeSelector,
         {
           value: countryCode,
           onValueChange: onCountryCodeChange,
           disabled: isDisabled,
-          style: styles3.countrySelector
+          style: styles4.countrySelector
         }
       ),
-      /* @__PURE__ */ jsx(View, { style: [phoneFieldStyles.outline, styles3.phoneOutline], children: /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx(View, { style: [phoneFieldStyles.outline, styles4.phoneOutline], children: /* @__PURE__ */ jsx(
         View,
         {
           style: [
             inputFieldMetrics.containerBase,
             inputFieldMetrics.container,
             phoneFieldStyles.container,
-            styles3.phoneField
+            styles4.phoneField
           ],
           children: /* @__PURE__ */ jsx(
             TextInput,
@@ -1202,10 +1227,10 @@ function PhoneInput({
         }
       ) })
     ] }),
-    helperMessage ? /* @__PURE__ */ jsx(Text, { ref: helperRef, style: error ? styles3.error : styles3.hint, children: helperMessage }) : null
+    helperMessage ? /* @__PURE__ */ jsx(Text, { ref: helperRef, style: error ? styles4.error : styles4.hint, children: helperMessage }) : null
   ] });
 }
-var styles3 = StyleSheet.create({
+var styles4 = StyleSheet.create({
   wrapper: {
     width: "100%",
     gap: spacing.sm
@@ -2383,16 +2408,16 @@ function DatePicker(props) {
     View,
     {
       ref: wrapperRef,
-      style: [styles4.wrapper, isFluidField && styles4.wrapperFluid, containerStyle],
+      style: [styles5.wrapper, isFluidField && styles5.wrapperFluid, containerStyle],
       children: [
-        label ? /* @__PURE__ */ jsx(Label, { disabled, style: styles4.label, className: labelClassName, children: label }) : null,
+        label ? /* @__PURE__ */ jsx(Label, { disabled, style: styles5.label, className: labelClassName, children: label }) : null,
         /* @__PURE__ */ jsx(
           View,
           {
             style: [
               fieldStyles.outline,
-              styles4.fieldOutline,
-              isFluidField && styles4.fieldOutlineFluid,
+              styles5.fieldOutline,
+              isFluidField && styles5.fieldOutlineFluid,
               fieldOutlineStyle
             ],
             children: /* @__PURE__ */ jsxs(
@@ -2405,7 +2430,7 @@ function DatePicker(props) {
                 onPress: openPicker,
                 style: [
                   calendarFieldMetrics.container,
-                  isFluidField && styles4.fieldContainerFluid,
+                  isFluidField && styles5.fieldContainerFluid,
                   fieldStyles.container,
                   fieldStyle
                 ],
@@ -2418,7 +2443,7 @@ function DatePicker(props) {
                       children: displayValue
                     }
                   ),
-                  /* @__PURE__ */ jsx(View, { style: styles4.iconSlot, children: /* @__PURE__ */ jsx(
+                  /* @__PURE__ */ jsx(View, { style: styles5.iconSlot, children: /* @__PURE__ */ jsx(
                     CalendarIcon,
                     {
                       size: CALENDAR_FIELD_ICON_SIZE,
@@ -2430,12 +2455,12 @@ function DatePicker(props) {
             )
           }
         ),
-        helperMessage ? /* @__PURE__ */ jsx(Text, { ref: helperRef, style: error ? styles4.error : styles4.hint, children: helperMessage }) : null,
-        /* @__PURE__ */ jsx(Modal, { visible: open, transparent: true, animationType: "fade", onRequestClose: closePicker, children: /* @__PURE__ */ jsxs(View, { style: styles4.modalRoot, children: [
+        helperMessage ? /* @__PURE__ */ jsx(Text, { ref: helperRef, style: error ? styles5.error : styles5.hint, children: helperMessage }) : null,
+        /* @__PURE__ */ jsx(Modal, { visible: open, transparent: true, animationType: "fade", onRequestClose: closePicker, children: /* @__PURE__ */ jsxs(View, { style: styles5.modalRoot, children: [
           /* @__PURE__ */ jsx(
             Pressable,
             {
-              style: styles4.backdrop,
+              style: styles5.backdrop,
               onPress: closePicker,
               accessibilityRole: "button",
               accessibilityLabel: labels?.closeCalendar ?? translations.closeCalendar
@@ -2445,7 +2470,7 @@ function DatePicker(props) {
             View,
             {
               style: [
-                styles4.panelPosition,
+                styles5.panelPosition,
                 {
                   top: dropdownTop,
                   left: panelLeft,
@@ -2493,7 +2518,7 @@ function DatePicker(props) {
     }
   );
 }
-var styles4 = StyleSheet.create({
+var styles5 = StyleSheet.create({
   wrapper: {
     width: CALENDAR_FIELD_WIDTH,
     maxWidth: "100%",
@@ -2569,6 +2594,6 @@ function LockIcon({
   ) });
 }
 
-export { Calendar, CalendarIcon, CalendarLocaleProvider, CountryCodeSelector, DatePicker, LockIcon, PhoneInput, Select, calendarTranslations, countries, defaultCountry, findCountry, formatLocalizedCalendarMonthYear, getCalendarMonthLabels, getCalendarTranslations, resolveCalendarLocale, resolveWeekdayLabels, useCalendarLocale };
+export { Calendar, CalendarIcon, CalendarLocaleProvider, CountryCodeSelector, CountryFlag, DatePicker, LockIcon, PhoneInput, Select, calendarTranslations, countries, countryCodeToFlagEmoji, defaultCountry, findCountry, formatLocalizedCalendarMonthYear, getCalendarMonthLabels, getCalendarTranslations, getCountryFlagImageUri, resolveCalendarLocale, resolveWeekdayLabels, useCalendarLocale };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map