@tecsinapse/cortex-react 2.1.0-beta.6 → 2.1.0-beta.7

package/dist/cjs/components/PhoneInput/FlagIcon.js

@@ -0,0 +1,46 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var Flags = require('country-flag-icons/react/3x2');
+
+function _interopNamespaceDefault(e) {
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var Flags__namespace = /*#__PURE__*/_interopNamespaceDefault(Flags);
+
+const FlagIcon = ({
+  countryCode,
+  className = "w-[25px]",
+  title
+}) => {
+  if (!countryCode) return null;
+  const upperCode = countryCode.toUpperCase();
+  const FlagComponent = Flags__namespace[upperCode];
+  if (!FlagComponent) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    FlagComponent,
+    {
+      className,
+      title: title || upperCode,
+      "aria-label": `Flag of ${upperCode}`
+    }
+  );
+};
+
+exports.FlagIcon = FlagIcon;

package/dist/cjs/components/PhoneInput/Option.js

@@ -10,14 +10,14 @@ const PhoneInputOption = ({
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "button",
     {
-      className: "flex w-full h-[2rem] items-center justify-between p-centi cursor-pointer hover:bg-gray-100 bg-inherit",
+      className: "flex w-full h-[2rem] items-center justify-between p-centi cursor-pointer hover:bg-secondary-xlight bg-inherit",
       onClick: () => {
         handleSelectCountry(country);
       },
       disabled: disableClick,
       children: [
         /* @__PURE__ */ jsxRuntime.jsx("span", { children: country?.name }),
-        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-gray-400 text-sm", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-secondary-light text-sm", children: [
           "+",
           country?.dialCode
         ] })

package/dist/cjs/components/PhoneInput/Options.js

@@ -64,6 +64,7 @@ require('react-icons/fa6');
 require('react-dom');
 require('react-icons/io5');
 var reactInternationalPhone = require('react-international-phone');
+require('country-flag-icons/react/3x2');
 
 const countries = reactInternationalPhone.defaultCountries.map((c) => {
   return reactInternationalPhone.parseCountry(c);

package/dist/cjs/components/PhoneInput/Popover.js

@@ -10,9 +10,8 @@ const PhoneInputPopover = ({ children }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(react.FloatingPortal, { children: /* @__PURE__ */ jsxRuntime.jsx(
     index.Popover.Content,
     {
-      className: "bg-white shadow-md rounded-md overflow-hidden h-full max-h-[30vh] outline-none",
+      className: "bg-white shadow-md rounded-md overflow-hidden h-full max-h-[30vh] outline-none z-9999",
       style: {
-        zIndex: 9999,
         width: triggerWidth ? `${triggerWidth}px` : "auto"
       },
       children

package/dist/cjs/components/PhoneInput/Trigger.js

@@ -64,6 +64,7 @@ require('react-dom');
 require('./Options.js');
 var context = require('./context.js');
 require('react-international-phone');
+var FlagIcon = require('./FlagIcon.js');
 
 const PhoneInputTrigger = ({
   disabled = false,
@@ -100,13 +101,7 @@ const PhoneInputTrigger = ({
         className: "flex items-center gap-1 cursor-pointer w-full",
         onClick: () => setIsOpen?.(true),
         children: [
-          country ? /* @__PURE__ */ jsxRuntime.jsx(
-            "img",
-            {
-              src: `https://purecatamphetamine.github.io/country-flag-icons/3x2/${country?.iso2.toUpperCase()}.svg`,
-              className: "w-[25px]"
-            }
-          ) : null,
+          country ? /* @__PURE__ */ jsxRuntime.jsx(FlagIcon.FlagIcon, { countryCode: country.iso2, className: "w-[25px]" }) : null,
           /* @__PURE__ */ jsxRuntime.jsx(io5.IoChevronDown, { className: "h-full text-md" })
         ]
       }

package/dist/cjs/provider/ManagerContext.js

@@ -70,6 +70,7 @@ require('../components/PhoneInput/Options.js');
 require('../components/PhoneInput/context.js');
 require('react-international-phone');
 require('react-icons/io5');
+require('country-flag-icons/react/3x2');
 
 const ManagerContext = React.createContext(null);
 const ManagerProvider = ({ children }) => {

package/dist/esm/components/PhoneInput/FlagIcon.js

@@ -0,0 +1,25 @@
+import { jsx } from 'react/jsx-runtime';
+import * as Flags from 'country-flag-icons/react/3x2';
+
+const FlagIcon = ({
+  countryCode,
+  className = "w-[25px]",
+  title
+}) => {
+  if (!countryCode) return null;
+  const upperCode = countryCode.toUpperCase();
+  const FlagComponent = Flags[upperCode];
+  if (!FlagComponent) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    FlagComponent,
+    {
+      className,
+      title: title || upperCode,
+      "aria-label": `Flag of ${upperCode}`
+    }
+  );
+};
+
+export { FlagIcon };

package/dist/esm/components/PhoneInput/Option.js

@@ -8,14 +8,14 @@ const PhoneInputOption = ({
   return /* @__PURE__ */ jsxs(
     "button",
     {
-      className: "flex w-full h-[2rem] items-center justify-between p-centi cursor-pointer hover:bg-gray-100 bg-inherit",
+      className: "flex w-full h-[2rem] items-center justify-between p-centi cursor-pointer hover:bg-secondary-xlight bg-inherit",
       onClick: () => {
         handleSelectCountry(country);
       },
       disabled: disableClick,
       children: [
         /* @__PURE__ */ jsx("span", { children: country?.name }),
-        /* @__PURE__ */ jsxs("span", { className: "text-gray-400 text-sm", children: [
+        /* @__PURE__ */ jsxs("span", { className: "text-secondary-light text-sm", children: [
           "+",
           country?.dialCode
         ] })

package/dist/esm/components/PhoneInput/Options.js

@@ -62,6 +62,7 @@ import 'react-icons/fa6';
 import 'react-dom';
 import 'react-icons/io5';
 import { defaultCountries, parseCountry } from 'react-international-phone';
+import 'country-flag-icons/react/3x2';
 
 const countries = defaultCountries.map((c) => {
   return parseCountry(c);

package/dist/esm/components/PhoneInput/Popover.js

@@ -8,9 +8,8 @@ const PhoneInputPopover = ({ children }) => {
   return /* @__PURE__ */ jsx(FloatingPortal, { children: /* @__PURE__ */ jsx(
     Popover.Content,
     {
-      className: "bg-white shadow-md rounded-md overflow-hidden h-full max-h-[30vh] outline-none",
+      className: "bg-white shadow-md rounded-md overflow-hidden h-full max-h-[30vh] outline-none z-9999",
       style: {
-        zIndex: 9999,
         width: triggerWidth ? `${triggerWidth}px` : "auto"
       },
       children

package/dist/esm/components/PhoneInput/Trigger.js

@@ -62,6 +62,7 @@ import 'react-dom';
 import './Options.js';
 import { usePhoneContext } from './context.js';
 import 'react-international-phone';
+import { FlagIcon } from './FlagIcon.js';
 
 const PhoneInputTrigger = ({
   disabled = false,
@@ -98,13 +99,7 @@ const PhoneInputTrigger = ({
         className: "flex items-center gap-1 cursor-pointer w-full",
         onClick: () => setIsOpen?.(true),
         children: [
-          country ? /* @__PURE__ */ jsx(
-            "img",
-            {
-              src: `https://purecatamphetamine.github.io/country-flag-icons/3x2/${country?.iso2.toUpperCase()}.svg`,
-              className: "w-[25px]"
-            }
-          ) : null,
+          country ? /* @__PURE__ */ jsx(FlagIcon, { countryCode: country.iso2, className: "w-[25px]" }) : null,
           /* @__PURE__ */ jsx(IoChevronDown, { className: "h-full text-md" })
         ]
       }

package/dist/esm/provider/ManagerContext.js

@@ -68,6 +68,7 @@ import '../components/PhoneInput/Options.js';
 import '../components/PhoneInput/context.js';
 import 'react-international-phone';
 import 'react-icons/io5';
+import 'country-flag-icons/react/3x2';
 
 const ManagerContext = createContext(null);
 const ManagerProvider = ({ children }) => {

package/dist/types/components/PhoneInput/FlagIcon.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+interface FlagIconProps {
+    countryCode: string;
+    className?: string;
+    title?: string;
+}
+export declare const FlagIcon: React.FC<FlagIconProps>;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tecsinapse/cortex-react",
-  "version": "2.1.0-beta.6",
+  "version": "2.1.0-beta.7",
   "description": "React components based in @tecsinapse/cortex-core",
   "license": "MIT",
   "main": "dist/esm/index.js",
@@ -20,8 +20,9 @@
   "dependencies": {
     "@floating-ui/react": "^0.26.18",
     "@internationalized/date": "3.7.0",
-    "@tecsinapse/cortex-core": "2.0.0",
+    "@tecsinapse/cortex-core": "2.0.1",
     "clsx": "2.1.1",
+    "country-flag-icons": "^1.6.4",
     "currency.js": "2.0.4",
     "embla-carousel-autoplay": "^8.0.0",
     "embla-carousel-react": "^8.6.0",
@@ -49,5 +50,5 @@
     "react-icons": ">=5.2.0",
     "tailwindcss": "^4.1.16"
   },
-  "gitHead": "ed355af197814bf13f477826cc4deff86c0ea5d5"
-}
+  "gitHead": "ba46003a38a57a0de7b0afd9bcdb438fc639a98e"
+}