@wecareu/icons 1.1.3 → 1.2.2

package/dist/index.d.mts

@@ -12,6 +12,18 @@ type Props = SvgProps & {
 };
 declare const Icon: React.FC<Props>;
 
+interface FlagIconProps {
+    /**
+     * ISO 3166-1 alpha-2 country code (e.g. 'BR', 'US', 'PT')
+     */
+    countryCode: string;
+    /**
+     * Size in pixels. Width will be proportional (3:2 ratio). Defaults to 20
+     */
+    size?: number;
+}
+declare function FlagIcon({ countryCode, size }: FlagIconProps): React.ReactElement;
+
 declare const ICON_NAMES: IconName[];
 
-export { ICONS, ICONS as ICONS_MAP, ICON_NAMES, Icon, type IconName };
+export { FlagIcon, type FlagIconProps, ICONS, ICONS as ICONS_MAP, ICON_NAMES, Icon, type IconName };

package/dist/index.d.ts

@@ -12,6 +12,18 @@ type Props = SvgProps & {
 };
 declare const Icon: React.FC<Props>;
 
+interface FlagIconProps {
+    /**
+     * ISO 3166-1 alpha-2 country code (e.g. 'BR', 'US', 'PT')
+     */
+    countryCode: string;
+    /**
+     * Size in pixels. Width will be proportional (3:2 ratio). Defaults to 20
+     */
+    size?: number;
+}
+declare function FlagIcon({ countryCode, size }: FlagIconProps): React.ReactElement;
+
 declare const ICON_NAMES: IconName[];
 
-export { ICONS, ICONS as ICONS_MAP, ICON_NAMES, Icon, type IconName };
+export { FlagIcon, type FlagIconProps, ICONS, ICONS as ICONS_MAP, ICON_NAMES, Icon, type IconName };

package/dist/index.js

@@ -30,6 +30,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.tsx
 var src_exports = {};
 __export(src_exports, {
+  FlagIcon: () => FlagIcon,
   ICONS: () => ICONS,
   ICONS_MAP: () => ICONS,
   ICON_NAMES: () => ICON_NAMES,
@@ -636,6 +637,28 @@ var Icon = ({ name, size, color, testID = "icon", ...rest }) => {
   );
 };
 
+// src/FlagIcon.tsx
+var import_react_native = require("react-native");
+var import_jsx_runtime71 = require("react/jsx-runtime");
+function countryCodeToEmoji(code) {
+  return [...code.toUpperCase().slice(0, 2)].map((c) => String.fromCodePoint(127462 + c.charCodeAt(0) - 65)).join("");
+}
+function FlagIcon({ countryCode, size = 20 }) {
+  const code = countryCode.toLowerCase().slice(0, 2);
+  if (import_react_native.Platform.OS === "web") {
+    return /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+      import_react_native.Image,
+      {
+        accessibilityLabel: countryCode.toUpperCase(),
+        resizeMode: "contain",
+        source: { uri: `https://flagcdn.com/w40/${code}.png` },
+        style: { borderRadius: 2, height: size, width: size * 1.5 }
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(import_react_native.Text, { accessibilityLabel: countryCode, style: { fontSize: size, lineHeight: size + 4 }, children: countryCodeToEmoji(countryCode) });
+}
+
 // src/LottieView.tsx
 var import_lottie_react_native = __toESM(require("lottie-react-native"));
 
@@ -657,7 +680,7 @@ var LOTTIE_ANIMATIONS = {
 var LOTTIE_ANIMATION_NAMES = ["dots", "locations", "notification"];
 
 // src/LottieView.tsx
-var import_jsx_runtime71 = require("react/jsx-runtime");
+var import_jsx_runtime72 = require("react/jsx-runtime");
 function Lottie({
   autoPlay = true,
   loop = true,
@@ -669,7 +692,7 @@ function Lottie({
 }) {
   const source = LOTTIE_ANIMATIONS[name];
   const sizeStyle = size != null ? { height: size, width: size } : {};
-  return /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
     import_lottie_react_native.default,
     {
       autoPlay,
@@ -686,6 +709,7 @@ function Lottie({
 var ICON_NAMES = Object.keys(ICONS);
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  FlagIcon,
   ICONS,
   ICONS_MAP,
   ICON_NAMES,

package/dist/index.mjs

@@ -600,9 +600,32 @@ var Icon = ({ name, size, color, testID = "icon", ...rest }) => {
   );
 };
 
+// src/FlagIcon.tsx
+import { Image as Image2, Platform, Text } from "react-native";
+import { jsx as jsx71 } from "react/jsx-runtime";
+function countryCodeToEmoji(code) {
+  return [...code.toUpperCase().slice(0, 2)].map((c) => String.fromCodePoint(127462 + c.charCodeAt(0) - 65)).join("");
+}
+function FlagIcon({ countryCode, size = 20 }) {
+  const code = countryCode.toLowerCase().slice(0, 2);
+  if (Platform.OS === "web") {
+    return /* @__PURE__ */ jsx71(
+      Image2,
+      {
+        accessibilityLabel: countryCode.toUpperCase(),
+        resizeMode: "contain",
+        source: { uri: `https://flagcdn.com/w40/${code}.png` },
+        style: { borderRadius: 2, height: size, width: size * 1.5 }
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx71(Text, { accessibilityLabel: countryCode, style: { fontSize: size, lineHeight: size + 4 }, children: countryCodeToEmoji(countryCode) });
+}
+
 // src/index.tsx
 var ICON_NAMES = Object.keys(ICONS);
 export {
+  FlagIcon,
   ICONS,
   ICONS as ICONS_MAP,
   ICON_NAMES,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wecareu/icons",
-  "version": "1.1.3",
+  "version": "1.2.2",
   "description": "Sistema de ícones SVG para WeCareU Design System",
   "main": "dist/index.js",
   "module": "dist/index.mjs",

package/src/FlagIcon.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+
+interface FlagIconProps {
+    /**
+     * ISO 3166-1 alpha-2 country code (e.g. 'BR', 'US', 'PT')
+     */
+    countryCode: string;
+    /**
+     * Size in pixels. Width will be proportional (3:2 ratio). Defaults to 20
+     */
+    size?: number;
+}
+export declare function FlagIcon({ countryCode, size }: FlagIconProps): React.ReactElement;
+export type { FlagIconProps };
+//# sourceMappingURL=FlagIcon.d.ts.map

package/src/FlagIcon.tsx

@@ -0,0 +1,41 @@
+import React from 'react'
+
+import { Image, Platform, Text } from 'react-native'
+
+interface FlagIconProps {
+  /**
+   * ISO 3166-1 alpha-2 country code (e.g. 'BR', 'US', 'PT')
+   */
+  countryCode: string
+  /**
+   * Size in pixels. Width will be proportional (3:2 ratio). Defaults to 20
+   */
+  size?: number
+}
+
+function countryCodeToEmoji(code: string): string {
+  return [...code.toUpperCase().slice(0, 2)]
+    .map(c => String.fromCodePoint(0x1f1e6 + c.charCodeAt(0) - 65))
+    .join('')
+}
+
+export function FlagIcon({ countryCode, size = 20 }: FlagIconProps): React.ReactElement {
+  const code = countryCode.toLowerCase().slice(0, 2)
+
+  if (Platform.OS === 'web') {
+    return (
+      <Image
+        accessibilityLabel={countryCode.toUpperCase()}
+        resizeMode="contain"
+        source={{ uri: `https://flagcdn.com/w40/${code}.png` }}
+        style={{ borderRadius: 2, height: size, width: size * 1.5 }}
+      />
+    )
+  }
+
+  return (
+    <Text accessibilityLabel={countryCode} style={{ fontSize: size, lineHeight: size + 4 }}>
+      {countryCodeToEmoji(countryCode)}
+    </Text>
+  )
+}

package/src/index.d.ts

@@ -2,6 +2,8 @@ import type { IconName } from './Icon';
 export { Icon, ICONS } from './Icon';
 export type { IconName } from './Icon';
 export { ICONS as ICONS_MAP } from './icons-map';
+export { FlagIcon } from './FlagIcon';
+export type { FlagIconProps } from './FlagIcon';
 export type { LottieAnimationName } from './lottie-map';
 export { LOTTIE_ANIMATION_NAMES, LOTTIE_ANIMATIONS } from './lottie-map';
 export declare const ICON_NAMES: IconName[];

package/src/index.tsx

@@ -6,6 +6,9 @@ export { Icon, ICONS } from './Icon'
 export type { IconName } from './Icon'
 export { ICONS as ICONS_MAP } from './icons-map'
 
+// Flag emojis
+export { FlagIcon } from './FlagIcon'
+
 // Lottie component and metadata
 export { Lottie } from './LottieView'
 export type { LottieAnimationName } from './lottie-map'