@scripso-homepad/ui 0.4.22 → 0.4.23

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scripso-homepad/ui",
-  "version": "0.4.22",
+  "version": "0.4.23",
   "type": "module",
   "description": "Cross-platform UI components for Homepad (React Web + React Native)",
   "license": "MIT",

package/src/components/CountryCodeSelector.tsx

@@ -19,12 +19,12 @@ import {
 } from "../data/countries";
 import { ChevronDownIcon } from "../icons/ChevronDownIcon";
 import { colors, fontSize, fontWeight, radii, spacing, fonts } from "../theme/tokens";
-import { countryCodeToFlagEmoji } from "../utils/countryFlag";
 import {
   COUNTRY_DROPDOWN_SCROLL_CLASS,
   ensureCountryDropdownScrollStyles,
 } from "../utils/countryDropdownScrollStyles";
 import { useApplyWebClassName } from "../utils/useApplyWebClassName";
+import { CountryFlag } from "./CountryFlag";
 
 const DROPDOWN_GAP = 10;
 const DROPDOWN_HEIGHT = 186;
@@ -126,7 +126,7 @@ export function CountryCodeSelector({
           !isLast && styles.optionSpacing,
         ]}
       >
-        <Text style={styles.flag}>{countryCodeToFlagEmoji(item.code)}</Text>
+        <CountryFlag code={item.code} />
         <Text style={styles.optionDialCode}>{item.dialCode}</Text>
       </Pressable>
     );
@@ -159,7 +159,7 @@ export function CountryCodeSelector({
           Platform.OS === "web" ? styles.triggerWeb : null,
         ]}
       >
-        <Text style={styles.flag}>{countryCodeToFlagEmoji(selected.code)}</Text>
+        <CountryFlag code={selected.code} />
         <Text style={[styles.dialCode, { color: textColor }]}>{selected.dialCode}</Text>
         <ChevronDownIcon size={CHEVRON_SIZE} color={colors.stormGray100} />
       </Pressable>
@@ -219,10 +219,6 @@ const styles = StyleSheet.create({
   triggerWeb: {
     width: "max-content" as ViewStyle["width"],
   },
-  flag: {
-    fontSize: 18,
-    lineHeight: 24,
-  },
   dialCode: {
     fontSize: fontSize.md,
     fontWeight: fontWeight.medium,

package/src/components/CountryFlag.tsx

@@ -0,0 +1,37 @@
+import { Image, StyleSheet, type StyleProp, type ImageStyle } from "react-native";
+
+import { getCountryFlagImageUri } from "../utils/countryFlag";
+
+const FLAG_HEIGHT = 18;
+const FLAG_WIDTH = 24;
+
+export type CountryFlagProps = {
+  code: string;
+  style?: StyleProp<ImageStyle>;
+};
+
+/** Renders a country flag image (works on Windows; emoji flags do not). */
+export function CountryFlag({ code, style }: CountryFlagProps) {
+  const uri = getCountryFlagImageUri(code);
+
+  if (uri === null) {
+    return null;
+  }
+
+  return (
+    <Image
+      source={{ uri }}
+      style={[styles.flag, style]}
+      accessibilityIgnoresInvertColors
+      accessibilityLabel={`${code.trim().toUpperCase()} flag`}
+    />
+  );
+}
+
+const styles = StyleSheet.create({
+  flag: {
+    width: FLAG_WIDTH,
+    height: FLAG_HEIGHT,
+    borderRadius: 2,
+  },
+});

package/src/index.ts

@@ -22,6 +22,14 @@ export type { PhoneInputProps } from "./components/PhoneInput";
 export { CountryCodeSelector } from "./components/CountryCodeSelector";
 export type { CountryCodeSelectorProps } from "./components/CountryCodeSelector";
 
+export { CountryFlag } from "./components/CountryFlag";
+export type { CountryFlagProps } from "./components/CountryFlag";
+
+export {
+  countryCodeToFlagEmoji,
+  getCountryFlagImageUri,
+} from "./utils/countryFlag";
+
 export { Calendar } from "./components/Calendar";
 export type {
   CalendarLabels,

package/src/utils/countryFlag.ts

@@ -1,4 +1,4 @@
-/** ISO 3166-1 alpha-2 country code → flag emoji (cross-platform). */
+/** ISO 3166-1 alpha-2 country code → flag emoji. Prefer CountryFlag images on Windows. */
 export function countryCodeToFlagEmoji(code: string): string {
   const upper = code.trim().toUpperCase();
   if (upper.length !== 2) return "";
@@ -7,3 +7,14 @@ export function countryCodeToFlagEmoji(code: string): string {
     ...upper.split("").map((char) => 0x1f1e6 - 65 + char.charCodeAt(0)),
   );
 }
+
+/**
+ * PNG flag URL (flagcdn). Windows does not render regional-indicator flag emoji,
+ * so UI should use images instead of countryCodeToFlagEmoji.
+ */
+export function getCountryFlagImageUri(code: string): string | null {
+  const lower = code.trim().toLowerCase();
+  if (!/^[a-z]{2}$/.test(lower)) return null;
+
+  return `https://flagcdn.com/w40/${lower}.png`;
+}

package/src/web/components/Drawer.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { fn } from '@storybook/test';
-import { useState } from 'react';
+import { useState, type ReactNode } from 'react';
 
 import { Button } from '../../components/Button';
 import { WebLayoutCanvas } from '../layout/story-helpers';
@@ -132,8 +132,8 @@ function DrawerStoryShell({
 }: {
   open: boolean;
   onClose: () => void;
-  footer?: React.ReactNode;
-  title?: string;
+  footer?: ReactNode;
+  title?: ReactNode;
   subtitle?: string;
 }) {
   return (

package/src/web/components/Drawer.tsx

@@ -38,7 +38,7 @@ function unlockBodyScroll() {
 
 export type DrawerProps = {
   open: boolean;
-  title: string;
+  title: ReactNode;
   subtitle?: string;
   subtitleClassName?: string;
   headerBottom?: ReactNode;