notionsoft-ui 1.0.21 → 1.0.22

package/cli/index.cjs

@@ -137,13 +137,95 @@ program
     }
 
     // Copy as a flat file into user's project
-    const destFile = path.join(config.componentDir, component + ".tsx");
-    fs.ensureDirSync(config.componentDir);
-    fs.copyFileSync(templateFile, destFile);
-
-    console.log(
-      chalk.green(`✓ Installed ${component} component as ${destFile}`)
-    );
+    // const destFile = path.join(config.componentDir, component + ".tsx");
+    // fs.ensureDirSync(config.componentDir);
+    // fs.copyFileSync(templateFile, destFile);
+
+    // console.log(
+    //   chalk.green(`✓ Installed ${component} component as ${destFile}`)
+    // );
+    try {
+      const templateDir = path.join(__dirname, "../src/notion-ui", component);
+      const destDir = path.join(config.componentDir, component);
+
+      if (!fs.existsSync(templateDir)) {
+        console.log(chalk.red(`❌ Component '${component}' does not exist.`));
+        return;
+      }
+
+      // --- Step 1: Merge to utils ---
+      const utilsDir = path.join(cwd, "src/utils");
+      fs.ensureDirSync(utilsDir);
+
+      let mergeSuccess = true;
+
+      fs.readdirSync(templateDir).forEach((file) => {
+        const filePath = path.join(templateDir, file);
+        const content = fs.readFileSync(filePath, "utf-8").trim();
+
+        try {
+          let targetPath;
+          if (file.endsWith("-data.ts"))
+            targetPath = path.join(utilsDir, "dt.ts");
+          else if (file === "type.ts")
+            targetPath = path.join(utilsDir, "type.ts");
+          else if (file.startsWith("use-") && file.endsWith(".ts"))
+            targetPath = path.join(utilsDir, "hook.ts");
+          else return; // skip other files
+
+          let targetContent = "";
+          if (fs.existsSync(targetPath))
+            targetContent = fs.readFileSync(targetPath, "utf-8");
+
+          // Append only if content not already in the target file
+          if (!targetContent.includes(content)) {
+            if (targetContent.length > 0) targetContent += "\n\n";
+            targetContent += content;
+            fs.writeFileSync(targetPath, targetContent);
+            console.log(
+              chalk.green(
+                `✓ Merged ${file} → ${path.relative(cwd, targetPath)}`
+              )
+            );
+          } else {
+            console.log(
+              chalk.yellow(
+                `⚠ ${file} already exists in ${path.relative(
+                  cwd,
+                  targetPath
+                )}, skipping`
+              )
+            );
+          }
+        } catch (err) {
+          mergeSuccess = false;
+          console.log(chalk.red(`❌ Failed merging ${file}: ${err.message}`));
+        }
+      });
+
+      if (!mergeSuccess) {
+        console.log(
+          chalk.red(
+            "❌ Failed to merge required files. Component installation aborted."
+          )
+        );
+        return;
+      }
+
+      // --- Step 2: Copy component files ---
+      fs.copySync(templateDir, destDir, {
+        filter: (src) => {
+          const filename = path.basename(src);
+          if (filename === "index.ts") return false;
+          if (filename.endsWith(".stories.tsx")) return false;
+          return true;
+        },
+      });
+
+      console.log(chalk.green(`✓ Installed ${component} to ${destDir}`));
+    } catch (err) {
+      console.log(chalk.red(`❌ Installation failed: ${err.message}`));
+    }
   });
 
 /* ------------------------------

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "notionsoft-ui",
-  "version": "1.0.21",
+  "version": "1.0.22",
   "description": "A React UI component installer (shadcn-style). Installs components directly into your project.",
   "bin": {
     "notionsoft-ui": "./cli/index.cjs"

package/src/notion-ui/date-picker/date-picker.tsx

@@ -25,7 +25,6 @@ export interface DatePickerProps {
   };
   placeholder: string;
   place?: string;
-  required?: boolean;
   format?: string;
   requiredHint?: string;
   hintColor?: string;
@@ -42,7 +41,6 @@ export default function DatePicker(props: DatePickerProps) {
     className,
     classNames,
     placeholder,
-    required,
     requiredHint,
     measurement,
     label,

package/src/notion-ui/phone-input/country-data.ts

@@ -0,0 +1,420 @@
+import type { ParsedCountry } from "./type";
+
+export const defaultCountries: ParsedCountry[] = [
+  { name: "Afghanistan", iso2: "af", dialCode: "93" },
+  { name: "Albania", iso2: "al", dialCode: "355" },
+  { name: "Algeria", iso2: "dz", dialCode: "213" },
+  { name: "Andorra", iso2: "ad", dialCode: "376" },
+  { name: "Angola", iso2: "ao", dialCode: "244" },
+  { name: "Antigua and Barbuda", iso2: "ag", dialCode: "1268" },
+  {
+    name: "Argentina",
+    iso2: "ar",
+    dialCode: "54",
+    format: {
+      default: "(..) .... ....",
+      "/^11/": "(..) .... ....",
+      "/^15/": "(..) ... ....",
+      "/^(2|3|4|5)/": "(.) .... ....",
+      "/^9/": "(.) .... .....",
+    },
+    priority: 0,
+  },
+  { name: "Armenia", iso2: "am", dialCode: "374", format: ".. ......" },
+  { name: "Aruba", iso2: "aw", dialCode: "297" },
+  {
+    name: "Australia",
+    iso2: "au",
+    dialCode: "61",
+    format: {
+      default: ". .... ....",
+      "/^4/": "... ... ...",
+      "/^5(?!50)/": "... ... ...",
+      "/^1(3|8)00/": ".... ... ...",
+      "/^13/": ".. .. ..",
+      "/^180/": "... ....",
+    },
+    priority: 0,
+    areaCodes: [],
+  },
+  { name: "Austria", iso2: "at", dialCode: "43" },
+  { name: "Azerbaijan", iso2: "az", dialCode: "994", format: "(..) ... .. .." },
+  { name: "Bahamas", iso2: "bs", dialCode: "1242" },
+  { name: "Bahrain", iso2: "bh", dialCode: "973" },
+  { name: "Bangladesh", iso2: "bd", dialCode: "880" },
+  { name: "Barbados", iso2: "bb", dialCode: "1246" },
+  { name: "Belarus", iso2: "by", dialCode: "375", format: "(..) ... .. .." },
+  { name: "Belgium", iso2: "be", dialCode: "32", format: "... .. .. .." },
+  { name: "Belize", iso2: "bz", dialCode: "501" },
+  { name: "Benin", iso2: "bj", dialCode: "229" },
+  { name: "Bhutan", iso2: "bt", dialCode: "975" },
+  { name: "Bolivia", iso2: "bo", dialCode: "591" },
+  { name: "Bosnia and Herzegovina", iso2: "ba", dialCode: "387" },
+  { name: "Botswana", iso2: "bw", dialCode: "267" },
+  { name: "Brazil", iso2: "br", dialCode: "55", format: "(..) .....-...." },
+  { name: "British Indian Ocean Territory", iso2: "io", dialCode: "246" },
+  { name: "Brunei", iso2: "bn", dialCode: "673" },
+  { name: "Bulgaria", iso2: "bg", dialCode: "359" },
+  { name: "Burkina Faso", iso2: "bf", dialCode: "226" },
+  { name: "Burundi", iso2: "bi", dialCode: "257" },
+  { name: "Cambodia", iso2: "kh", dialCode: "855" },
+  { name: "Cameroon", iso2: "cm", dialCode: "237" },
+  {
+    name: "Canada",
+    iso2: "ca",
+    dialCode: "1",
+    format: "(...) ...-....",
+    priority: 1,
+    areaCodes: [
+      "204",
+      "226",
+      "236",
+      "249",
+      "250",
+      "289",
+      "306",
+      "343",
+      "365",
+      "387",
+      "403",
+      "416",
+      "418",
+      "431",
+      "437",
+      "438",
+      "450",
+      "506",
+      "514",
+      "519",
+      "548",
+      "579",
+      "581",
+      "587",
+      "604",
+      "613",
+      "639",
+      "647",
+      "672",
+      "705",
+      "709",
+      "742",
+      "778",
+      "780",
+      "782",
+      "807",
+      "819",
+      "825",
+      "867",
+      "873",
+      "902",
+      "905",
+    ],
+  },
+  { name: "Cape Verde", iso2: "cv", dialCode: "238" },
+  { name: "Caribbean Netherlands", iso2: "bq", dialCode: "599", priority: 1 },
+  {
+    name: "Cayman Islands",
+    iso2: "ky",
+    dialCode: "1",
+    format: "... ... ....",
+    priority: 4,
+    areaCodes: ["345"],
+  },
+  { name: "Central African Republic", iso2: "cf", dialCode: "236" },
+  { name: "Chad", iso2: "td", dialCode: "235" },
+  { name: "Chile", iso2: "cl", dialCode: "56" },
+  { name: "China", iso2: "cn", dialCode: "86", format: "... .... ...." },
+  { name: "Colombia", iso2: "co", dialCode: "57", format: "... ... ...." },
+  { name: "Comoros", iso2: "km", dialCode: "269" },
+  { name: "Congo", iso2: "cd", dialCode: "243" },
+  { name: "Congo", iso2: "cg", dialCode: "242" },
+  { name: "Costa Rica", iso2: "cr", dialCode: "506", format: "....-...." },
+  {
+    name: "Côte d'Ivoire",
+    iso2: "ci",
+    dialCode: "225",
+    format: ".. .. .. .. ..",
+  },
+  { name: "Croatia", iso2: "hr", dialCode: "385" },
+  { name: "Cuba", iso2: "cu", dialCode: "53" },
+  { name: "Curaçao", iso2: "cw", dialCode: "599", priority: 0 },
+  { name: "Cyprus", iso2: "cy", dialCode: "357", format: ".. ......" },
+  {
+    name: "Czech Republic",
+    iso2: "cz",
+    dialCode: "420",
+    format: "... ... ...",
+  },
+  { name: "Denmark", iso2: "dk", dialCode: "45", format: ".. .. .. .." },
+  { name: "Djibouti", iso2: "dj", dialCode: "253", format: ".. .. ...." },
+  { name: "Dominica", iso2: "dm", dialCode: "1767" },
+  {
+    name: "Dominican Republic",
+    iso2: "do",
+    dialCode: "1",
+    format: "(...) ...-....",
+    priority: 2,
+    areaCodes: ["809", "829", "849"],
+  },
+  { name: "Ecuador", iso2: "ec", dialCode: "593" },
+  { name: "Egypt", iso2: "eg", dialCode: "20" },
+  { name: "El Salvador", iso2: "sv", dialCode: "503", format: "....-...." },
+  { name: "Equatorial Guinea", iso2: "gq", dialCode: "240" },
+  { name: "Eritrea", iso2: "er", dialCode: "291" },
+  { name: "Estonia", iso2: "ee", dialCode: "372", format: ".... ......" },
+  { name: "Ethiopia", iso2: "et", dialCode: "251", format: ".. ... ...." },
+  { name: "Faroe Islands", iso2: "fo", dialCode: "298", format: ".. .. .." },
+  { name: "Fiji", iso2: "fj", dialCode: "679" },
+  { name: "Finland", iso2: "fi", dialCode: "358", format: ".. ... .. .." },
+  { name: "France", iso2: "fr", dialCode: "33", format: ". .. .. .. .." },
+  {
+    name: "French Guiana",
+    iso2: "gf",
+    dialCode: "594",
+    format: "... .. .. ..",
+  },
+  {
+    name: "French Polynesia",
+    iso2: "pf",
+    dialCode: "689",
+    format: {
+      "/^44/": ".. .. ..",
+      "/^80[0-5]/": "... .. .. ..",
+      default: ".. .. .. ..",
+    },
+  },
+  { name: "Gabon", iso2: "ga", dialCode: "241" },
+  { name: "Gambia", iso2: "gm", dialCode: "220" },
+  { name: "Georgia", iso2: "ge", dialCode: "995" },
+  { name: "Germany", iso2: "de", dialCode: "49", format: "... ........." },
+  { name: "Ghana", iso2: "gh", dialCode: "233" },
+  { name: "Greece", iso2: "gr", dialCode: "30" },
+  { name: "Greenland", iso2: "gl", dialCode: "299", format: ".. .. .." },
+  { name: "Grenada", iso2: "gd", dialCode: "1473" },
+  {
+    name: "Guadeloupe",
+    iso2: "gp",
+    dialCode: "590",
+    format: "... .. .. ..",
+    priority: 0,
+  },
+  { name: "Guam", iso2: "gu", dialCode: "1671" },
+  { name: "Guatemala", iso2: "gt", dialCode: "502", format: "....-...." },
+  { name: "Guinea", iso2: "gn", dialCode: "224" },
+  { name: "Guinea-Bissau", iso2: "gw", dialCode: "245" },
+  { name: "Guyana", iso2: "gy", dialCode: "592" },
+  { name: "Haiti", iso2: "ht", dialCode: "509", format: "....-...." },
+  { name: "Honduras", iso2: "hn", dialCode: "504" },
+  { name: "Hong Kong", iso2: "hk", dialCode: "852", format: ".... ...." },
+  { name: "Hungary", iso2: "hu", dialCode: "36" },
+  { name: "Iceland", iso2: "is", dialCode: "354", format: "... ...." },
+  { name: "India", iso2: "in", dialCode: "91", format: ".....-....." },
+  { name: "Indonesia", iso2: "id", dialCode: "62" },
+  { name: "Iran", iso2: "ir", dialCode: "98", format: "... ... ...." },
+  { name: "Iraq", iso2: "iq", dialCode: "964" },
+  { name: "Ireland", iso2: "ie", dialCode: "353", format: ".. ......." },
+  { name: "Israel", iso2: "il", dialCode: "972", format: "... ... ...." },
+  {
+    name: "Italy",
+    iso2: "it",
+    dialCode: "39",
+    format: "... .......",
+    priority: 0,
+  },
+  { name: "Jamaica", iso2: "jm", dialCode: "1876" },
+  { name: "Japan", iso2: "jp", dialCode: "81", format: ".. .... ...." },
+  { name: "Jordan", iso2: "jo", dialCode: "962" },
+  {
+    name: "Kazakhstan",
+    iso2: "kz",
+    dialCode: "7",
+    format: "... ...-..-..",
+    priority: 0,
+  },
+  { name: "Kenya", iso2: "ke", dialCode: "254" },
+  { name: "Kiribati", iso2: "ki", dialCode: "686" },
+  { name: "Kosovo", iso2: "xk", dialCode: "383" },
+  { name: "Kuwait", iso2: "kw", dialCode: "965" },
+  { name: "Kyrgyzstan", iso2: "kg", dialCode: "996", format: "... ... ..." },
+  { name: "Laos", iso2: "la", dialCode: "856" },
+  { name: "Latvia", iso2: "lv", dialCode: "371", format: ".. ... ..." },
+  { name: "Lebanon", iso2: "lb", dialCode: "961" },
+  { name: "Lesotho", iso2: "ls", dialCode: "266" },
+  { name: "Liberia", iso2: "lr", dialCode: "231" },
+  { name: "Libya", iso2: "ly", dialCode: "218" },
+  { name: "Liechtenstein", iso2: "li", dialCode: "423" },
+  { name: "Lithuania", iso2: "lt", dialCode: "370" },
+  { name: "Luxembourg", iso2: "lu", dialCode: "352" },
+  { name: "Macau", iso2: "mo", dialCode: "853" },
+  { name: "Macedonia", iso2: "mk", dialCode: "389" },
+  { name: "Madagascar", iso2: "mg", dialCode: "261" },
+  { name: "Malawi", iso2: "mw", dialCode: "265" },
+  { name: "Malaysia", iso2: "my", dialCode: "60", format: "..-....-...." },
+  { name: "Maldives", iso2: "mv", dialCode: "960" },
+  { name: "Mali", iso2: "ml", dialCode: "223" },
+  { name: "Malta", iso2: "mt", dialCode: "356" },
+  { name: "Marshall Islands", iso2: "mh", dialCode: "692" },
+  { name: "Martinique", iso2: "mq", dialCode: "596", format: "... .. .. .." },
+  { name: "Mauritania", iso2: "mr", dialCode: "222" },
+  { name: "Mauritius", iso2: "mu", dialCode: "230" },
+  {
+    name: "Mayotte",
+    iso2: "yt",
+    dialCode: "262",
+    format: "... .. .. ..",
+    priority: 1,
+    areaCodes: ["269", "639"],
+  },
+  {
+    name: "Mexico",
+    iso2: "mx",
+    dialCode: "52",
+    format: "... ... ....",
+    priority: 0,
+  },
+  { name: "Micronesia", iso2: "fm", dialCode: "691" },
+  { name: "Moldova", iso2: "md", dialCode: "373", format: "(..) ..-..-.." },
+  { name: "Monaco", iso2: "mc", dialCode: "377" },
+  { name: "Mongolia", iso2: "mn", dialCode: "976" },
+  { name: "Montenegro", iso2: "me", dialCode: "382" },
+  { name: "Morocco", iso2: "ma", dialCode: "212" },
+  { name: "Mozambique", iso2: "mz", dialCode: "258" },
+  { name: "Myanmar", iso2: "mm", dialCode: "95" },
+  { name: "Namibia", iso2: "na", dialCode: "264" },
+  { name: "Nauru", iso2: "nr", dialCode: "674" },
+  { name: "Nepal", iso2: "np", dialCode: "977" },
+  {
+    name: "Netherlands",
+    iso2: "nl",
+    dialCode: "31",
+    format: {
+      "/^06/": "(.). .........",
+      "/^6/": ". .........",
+      "/^0(10|13|14|15|20|23|24|26|30|33|35|36|38|40|43|44|45|46|50|53|55|58|70|71|72|73|74|75|76|77|78|79|82|84|85|87|88|91)/":
+        "(.).. ........",
+      "/^(10|13|14|15|20|23|24|26|30|33|35|36|38|40|43|44|45|46|50|53|55|58|70|71|72|73|74|75|76|77|78|79|82|84|85|87|88|91)/":
+        ".. ........",
+      "/^0/": "(.)... .......",
+      default: "... .......",
+    },
+  },
+  { name: "New Caledonia", iso2: "nc", dialCode: "687" },
+  { name: "New Zealand", iso2: "nz", dialCode: "64", format: "...-...-...." },
+  { name: "Nicaragua", iso2: "ni", dialCode: "505" },
+  { name: "Niger", iso2: "ne", dialCode: "227" },
+  { name: "Nigeria", iso2: "ng", dialCode: "234" },
+  { name: "North Korea", iso2: "kp", dialCode: "850" },
+  { name: "Norway", iso2: "no", dialCode: "47", format: "... .. ..." },
+  { name: "Oman", iso2: "om", dialCode: "968" },
+  { name: "Pakistan", iso2: "pk", dialCode: "92", format: "...-......." },
+  { name: "Palau", iso2: "pw", dialCode: "680" },
+  { name: "Palestine", iso2: "ps", dialCode: "970" },
+  { name: "Panama", iso2: "pa", dialCode: "507" },
+  { name: "Papua New Guinea", iso2: "pg", dialCode: "675" },
+  { name: "Paraguay", iso2: "py", dialCode: "595" },
+  { name: "Peru", iso2: "pe", dialCode: "51" },
+  { name: "Philippines", iso2: "ph", dialCode: "63", format: "... ... ...." },
+  { name: "Poland", iso2: "pl", dialCode: "48", format: "...-...-..." },
+  { name: "Portugal", iso2: "pt", dialCode: "351" },
+  {
+    name: "Puerto Rico",
+    iso2: "pr",
+    dialCode: "1",
+    format: "(...) ...-....",
+    priority: 3,
+    areaCodes: ["787", "939"],
+  },
+  { name: "Qatar", iso2: "qa", dialCode: "974" },
+  {
+    name: "Réunion",
+    iso2: "re",
+    dialCode: "262",
+    format: "... .. .. ..",
+    priority: 0,
+  },
+  { name: "Romania", iso2: "ro", dialCode: "40" },
+  {
+    name: "Russia",
+    iso2: "ru",
+    dialCode: "7",
+    format: "(...) ...-..-..",
+    priority: 1,
+  },
+  { name: "Rwanda", iso2: "rw", dialCode: "250" },
+  { name: "Saint Kitts and Nevis", iso2: "kn", dialCode: "1869" },
+  { name: "Saint Lucia", iso2: "lc", dialCode: "1758" },
+  {
+    name: "Saint Pierre & Miquelon",
+    iso2: "pm",
+    dialCode: "508",
+    format: {
+      "/^708/": "... ... ...",
+      "/^8/": "... .. .. ..",
+      default: ".. .. ..",
+    },
+  },
+  { name: "Saint Vincent and the Grenadines", iso2: "vc", dialCode: "1784" },
+  { name: "Samoa", iso2: "ws", dialCode: "685" },
+  { name: "San Marino", iso2: "sm", dialCode: "378" },
+  { name: "São Tomé and Príncipe", iso2: "st", dialCode: "239" },
+  { name: "Saudi Arabia", iso2: "sa", dialCode: "966" },
+  { name: "Senegal", iso2: "sn", dialCode: "221" },
+  { name: "Serbia", iso2: "rs", dialCode: "381" },
+  { name: "Seychelles", iso2: "sc", dialCode: "248" },
+  { name: "Sierra Leone", iso2: "sl", dialCode: "232" },
+  { name: "Singapore", iso2: "sg", dialCode: "65", format: "....-...." },
+  { name: "Slovakia", iso2: "sk", dialCode: "421" },
+  { name: "Slovenia", iso2: "si", dialCode: "386" },
+  { name: "Solomon Islands", iso2: "sb", dialCode: "677" },
+  { name: "Somalia", iso2: "so", dialCode: "252" },
+  { name: "South Africa", iso2: "za", dialCode: "27" },
+  { name: "South Korea", iso2: "kr", dialCode: "82", format: "... .... ...." },
+  { name: "South Sudan", iso2: "ss", dialCode: "211" },
+  { name: "Spain", iso2: "es", dialCode: "34", format: "... ... ..." },
+  { name: "Sri Lanka", iso2: "lk", dialCode: "94" },
+  { name: "Sudan", iso2: "sd", dialCode: "249" },
+  { name: "Suriname", iso2: "sr", dialCode: "597" },
+  { name: "Swaziland", iso2: "sz", dialCode: "268" },
+  { name: "Sweden", iso2: "se", dialCode: "46", format: "... ... ..." },
+  { name: "Switzerland", iso2: "ch", dialCode: "41", format: ".. ... .. .." },
+  { name: "Syria", iso2: "sy", dialCode: "963" },
+  { name: "Taiwan", iso2: "tw", dialCode: "886" },
+  { name: "Tajikistan", iso2: "tj", dialCode: "992" },
+  { name: "Tanzania", iso2: "tz", dialCode: "255" },
+  { name: "Thailand", iso2: "th", dialCode: "66" },
+  { name: "Timor-Leste", iso2: "tl", dialCode: "670" },
+  { name: "Togo", iso2: "tg", dialCode: "228" },
+  { name: "Tonga", iso2: "to", dialCode: "676" },
+  { name: "Trinidad and Tobago", iso2: "tt", dialCode: "1868" },
+  { name: "Tunisia", iso2: "tn", dialCode: "216" },
+  { name: "Turkey", iso2: "tr", dialCode: "90", format: "... ... .. .." },
+  { name: "Turkmenistan", iso2: "tm", dialCode: "993" },
+  { name: "Tuvalu", iso2: "tv", dialCode: "688" },
+  { name: "Uganda", iso2: "ug", dialCode: "256" },
+  { name: "Ukraine", iso2: "ua", dialCode: "380", format: "(..) ... .. .." },
+  { name: "United Arab Emirates", iso2: "ae", dialCode: "971" },
+  { name: "United Kingdom", iso2: "gb", dialCode: "44", format: ".... ......" },
+  {
+    name: "United States",
+    iso2: "us",
+    dialCode: "1",
+    format: "(...) ...-....",
+    priority: 0,
+  },
+  { name: "Uruguay", iso2: "uy", dialCode: "598" },
+  { name: "Uzbekistan", iso2: "uz", dialCode: "998", format: ".. ... .. .." },
+  { name: "Vanuatu", iso2: "vu", dialCode: "678" },
+  {
+    name: "Vatican City",
+    iso2: "va",
+    dialCode: "39",
+    format: ".. .... ....",
+    priority: 1,
+  },
+  { name: "Venezuela", iso2: "ve", dialCode: "58" },
+  { name: "Vietnam", iso2: "vn", dialCode: "84" },
+  { name: "Wallis & Futuna", iso2: "wf", dialCode: "681", format: ".. .. .." },
+  { name: "Yemen", iso2: "ye", dialCode: "967" },
+  { name: "Zambia", iso2: "zm", dialCode: "260" },
+  { name: "Zimbabwe", iso2: "zw", dialCode: "263" },
+];

package/src/notion-ui/phone-input/lazy-flag.tsx

@@ -0,0 +1,83 @@
+import { getFlagCodepoint } from "./utils";
+import { useEffect, useRef, useState } from "react";
+
+export const LazyFlag: React.FC<{
+  iso2: string;
+  className?: string | string;
+}> = ({ iso2, className }) => {
+  const ref = useRef<HTMLDivElement>(null);
+  const [svgContent, setSvgContent] = useState<string | undefined>(undefined);
+  const codepoint = getFlagCodepoint(iso2);
+
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+
+    const io = new IntersectionObserver(
+      (entries) => {
+        if (entries[0].isIntersecting) {
+          const fullUrl = `https://cdnjs.cloudflare.com/ajax/libs/twemoji/14.0.2/svg/${codepoint}.svg`;
+
+          const fetchAndCacheSvg = async () => {
+            try {
+              let response = await fetch(fullUrl);
+              if (response.ok) {
+                const responseClone = response.clone(); // clone BEFORE consuming body
+                const svgText = await response.text();
+
+                setSvgContent(svgText);
+
+                if ("caches" in window) {
+                  const cache = await caches.open("flags-cache");
+                  await cache.put(codepoint, responseClone);
+                }
+              } else {
+                console.error("Failed to fetch SVG", response.statusText);
+              }
+            } catch (error) {
+              console.error("Error fetching SVG:", error);
+            }
+          };
+          const checkCache = async () => {
+            if (!("caches" in window)) {
+              fetchAndCacheSvg();
+              return;
+            }
+
+            const cache = await caches.open("flags-cache");
+            const cachedResponse = await cache.match(codepoint);
+
+            if (cachedResponse) {
+              const svgText = await cachedResponse.text();
+
+              setSvgContent(svgText);
+            } else {
+              fetchAndCacheSvg();
+            }
+          };
+          checkCache();
+
+          io.disconnect();
+        }
+      },
+      { rootMargin: "550px" }
+    );
+
+    io.observe(el);
+    return () => io.disconnect();
+  }, [codepoint]);
+
+  return (
+    <div ref={ref}>
+      {!svgContent ? (
+        <div className={`bg-primary rounded-full size-4 animate-pulse`} />
+      ) : (
+        <div
+          ref={ref}
+          className={className}
+          dangerouslySetInnerHTML={{ __html: svgContent }}
+        />
+      )}
+    </div>
+  );
+};

package/src/notion-ui/phone-input/phone-input.tsx

@@ -0,0 +1,400 @@
+import { defaultCountries } from "./country-data";
+import { LazyFlag } from "./lazy-flag";
+import type { ParsedCountry } from "./type";
+import { cn } from "@/utils/cn";
+import React, {
+  useState,
+  useRef,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+} from "react";
+import { createPortal } from "react-dom";
+
+interface VirtualListProps {
+  items: ParsedCountry[];
+  renderRow: (item: ParsedCountry, index: number) => React.ReactNode;
+  height: number;
+  ROW_HEIGHT: number;
+  BUFFER: number;
+}
+
+const VirtualList: React.FC<VirtualListProps> = ({
+  items,
+  renderRow,
+  height,
+  ROW_HEIGHT,
+  BUFFER,
+}) => {
+  const [scrollTop, setScrollTop] = useState(0);
+
+  const totalHeight = items.length * ROW_HEIGHT;
+
+  // calculate visible indices
+  const startIndex = Math.max(0, Math.floor(scrollTop / ROW_HEIGHT) - BUFFER);
+  const endIndex = Math.min(
+    items.length,
+    Math.ceil((scrollTop + height) / ROW_HEIGHT) + BUFFER
+  );
+
+  // Slice items to render
+  const visibleItems = items.slice(startIndex, endIndex);
+
+  return (
+    <div
+      className="overflow-y-auto max-h-60"
+      onScroll={(e) => setScrollTop(e.currentTarget.scrollTop)}
+    >
+      <div style={{ height: totalHeight, position: "relative" }}>
+        {visibleItems.map((item, i) => {
+          const index = startIndex + i; // absolute index
+          return (
+            <div
+              key={`${item.iso2}-${index}`} // absolute key ensures React updates
+              style={{
+                position: "absolute",
+                top: index * ROW_HEIGHT,
+                left: 0,
+                right: 0,
+                height: ROW_HEIGHT,
+              }}
+            >
+              {renderRow(item, index)} {/* pass absolute index */}
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+};
+export type PhoneCountryPickerSize = "sm" | "md" | "lg";
+
+interface PhoneCountryPickerProps
+  extends React.InputHTMLAttributes<HTMLInputElement> {
+  requiredHint?: string;
+  label?: string;
+  errorMessage?: string;
+  classNames?: {
+    rootDivClassName?: string;
+    iconClassName?: string;
+  };
+  measurement?: PhoneCountryPickerSize;
+  ROW_HEIGHT?: number;
+  VISIBLE_ROWS?: number;
+  BUFFER?: number;
+}
+
+export const PhoneCountryPicker: React.FC<PhoneCountryPickerProps> = ({
+  measurement = "sm",
+  errorMessage,
+  label,
+  readOnly,
+  className,
+  classNames,
+  requiredHint,
+  value,
+  onChange,
+  ROW_HEIGHT = 32,
+  VISIBLE_ROWS = 10,
+  BUFFER = 5,
+  ...rest
+}) => {
+  const { rootDivClassName, iconClassName = "size-4" } = classNames || {};
+  const [open, setOpen] = useState(false);
+  const [country, setCountry] = useState<ParsedCountry>(defaultCountries[0]);
+  const [highlightedIndex, setHighlightedIndex] = useState<number>(0);
+  const [phone, setPhone] = useState<string>(
+    typeof value == "string" ? value : ""
+  );
+  const containerRef = useRef<HTMLDivElement>(null);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const [position, setPosition] = useState({ top: 0, left: 0, width: 0 });
+
+  const [dropDirection, setDropDirection] = useState<"down" | "up">("down");
+
+  const hasError = !!errorMessage;
+
+  // Choose country
+  const chooseCountry = (c: ParsedCountry) => {
+    setCountry(c);
+    setOpen(false);
+    inputRef.current?.focus();
+  };
+
+  // Keyboard navigation
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
+    if (!open) {
+      if (e.key === "ArrowDown" || e.key === "Enter") {
+        setOpen(true);
+        e.preventDefault();
+      }
+      return;
+    }
+
+    if (e.key === "ArrowDown") {
+      setHighlightedIndex((prev) =>
+        Math.min(prev + 1, defaultCountries.length - 1)
+      );
+      e.preventDefault();
+    } else if (e.key === "ArrowUp") {
+      setHighlightedIndex((prev) => Math.max(prev - 1, 0));
+      e.preventDefault();
+    } else if (e.key === "Enter") {
+      chooseCountry(defaultCountries[highlightedIndex]);
+      e.preventDefault();
+    } else if (e.key === "Escape") {
+      setOpen(false);
+      e.preventDefault();
+    }
+  };
+
+  // Scroll highlighted item into view
+  useEffect(() => {
+    if (!open || !dropdownRef.current) return;
+
+    // Get the scrollable container inside the virtual list
+    const scrollableContainer =
+      dropdownRef.current.querySelector(".overflow-y-auto");
+    if (!scrollableContainer) return;
+
+    const rowTop = highlightedIndex * ROW_HEIGHT;
+    const rowBottom = rowTop + ROW_HEIGHT;
+    const scrollContainer = scrollableContainer as HTMLDivElement;
+
+    if (rowTop < scrollContainer.scrollTop) {
+      scrollContainer.scrollTop = rowTop;
+    } else if (
+      rowBottom >
+      scrollContainer.scrollTop + ROW_HEIGHT * VISIBLE_ROWS
+    ) {
+      scrollContainer.scrollTop = rowBottom - ROW_HEIGHT * VISIBLE_ROWS;
+    }
+  }, [highlightedIndex, open]);
+
+  // Close on outside click
+  useEffect(() => {
+    const handleClickOutside = (e: MouseEvent) => {
+      if (
+        !containerRef.current?.contains(e.target as Node) &&
+        !dropdownRef.current?.contains(e.target as Node)
+      ) {
+        setOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+
+  // Update dropdown position
+  const updateDropdownPosition = () => {
+    const inputEl = containerRef.current;
+    const dropdownEl = dropdownRef.current;
+    if (!inputEl || !dropdownEl) return;
+
+    const rect = inputEl.getBoundingClientRect();
+    const viewportHeight = window.innerHeight;
+    const gap = 4;
+
+    const dropdownHeight = Math.min(dropdownEl.offsetHeight || 0, 260);
+
+    const spaceBelow = viewportHeight - rect.bottom;
+    const spaceAbove = rect.top;
+
+    if (spaceBelow < dropdownHeight && spaceAbove > spaceBelow) {
+      setDropDirection("up");
+      setPosition({
+        top: rect.top + window.scrollY - dropdownHeight - gap,
+        left: rect.left + window.scrollX,
+        width: rect.width,
+      });
+    } else {
+      setDropDirection("down");
+      setPosition({
+        top: rect.bottom + window.scrollY + gap,
+        left: rect.left + window.scrollX,
+        width: rect.width,
+      });
+    }
+  };
+
+  useLayoutEffect(() => updateDropdownPosition(), [open]);
+  useEffect(() => {
+    if (!open) return;
+    window.addEventListener("resize", updateDropdownPosition);
+    window.addEventListener("scroll", updateDropdownPosition, true);
+    return () => {
+      window.removeEventListener("resize", updateDropdownPosition);
+      window.removeEventListener("scroll", updateDropdownPosition, true);
+    };
+  }, [open]);
+
+  // Reset highlighted index when opening
+  useEffect(() => {
+    if (open) {
+      const currentIndex = defaultCountries.findIndex(
+        (c) => c.iso2 === country.iso2
+      );
+      if (currentIndex >= 0) {
+        setHighlightedIndex(currentIndex);
+      }
+    }
+  }, [open, country]);
+  const heightStyle = useMemo(
+    () =>
+      measurement == "lg"
+        ? {
+            height: "50px",
+            endContent: label
+              ? "ltr:top-[48px] rtl:top-[54px]-translate-y-1/2"
+              : "top-[26px] -translate-y-1/2",
+            startContent: label
+              ? "ltr:top-[48px] rtl:top-[54px] -translate-y-1/2"
+              : "top-[26px] -translate-y-1/2",
+            required: label ? "ltr:top-[4px] rtl:top-[12px]" : "top-[-19px]",
+          }
+        : measurement == "md"
+        ? {
+            height: "44px",
+            endContent: label
+              ? "ltr:top-[45px] rtl:top-[51px] -translate-y-1/2"
+              : "top-[22px] -translate-y-1/2",
+            startContent: label
+              ? "ltr:top-[45px] rtl:top-[51px] -translate-y-1/2"
+              : "top-[22px] -translate-y-1/2",
+            required: label ? "ltr:top-[4px] rtl:top-[12px]" : "top-[-19px]",
+          }
+        : {
+            height: "40px",
+            endContent: label
+              ? "ltr:top-[44px] rtl:top-[50px] -translate-y-1/2"
+              : "top-[20px] -translate-y-1/2",
+            startContent: label
+              ? "ltr:top-[44px] rtl:top-[50px] -translate-y-1/2"
+              : "top-[20px] -translate-y-1/2",
+            required: label ? "ltr:top-[4px] rtl:top-[12px]" : "top-[-19px]",
+          },
+    [measurement, label]
+  );
+  const readOnlyStyle = readOnly && "opacity-40";
+
+  return (
+    <div
+      className={cn(
+        rootDivClassName,
+        "relative flex flex-col w-full",
+        readOnlyStyle
+      )}
+      ref={containerRef}
+      onKeyDown={handleKeyDown}
+    >
+      {/* Required Hint */}
+      {requiredHint && (
+        <span
+          className={cn(
+            "absolute font-semibold text-red-600 rtl:text-[13px] ltr:text-[11px] ltr:right-2.5 rtl:left-2.5",
+            heightStyle.required
+          )}
+        >
+          {requiredHint}
+        </span>
+      )}
+
+      {/* Label */}
+      {label && (
+        <label
+          htmlFor={label}
+          className={cn(
+            "font-semibold ltr:text-[13px] rtl:text-[18px] text-start inline-block pb-1"
+          )}
+        >
+          {label}
+        </label>
+      )}
+      <div className="flex gap-2">
+        <button
+          type="button"
+          style={{
+            height: heightStyle.height,
+          }}
+          className="flex items-center dark:bg-input/30 gap-2 px-2 border rounded-sm bg-card hover:bg-primary/5 focus:outline-none focus:ring-1 focus:ring-tertiary/60"
+          onClick={() => setOpen(!open)}
+          aria-haspopup="listbox"
+          aria-expanded={open}
+        >
+          <LazyFlag iso2={country.iso2} className={iconClassName} />
+          <span className="text-primary ltr:text-sm rtl:text-sm rtl:font-semibold">
+            +{country.dialCode}
+          </span>
+        </button>
+        <input
+          ref={inputRef}
+          type="tel"
+          value={phone}
+          onChange={(e) => {
+            if (onChange) onChange(e);
+            setPhone(e.target.value);
+          }}
+          placeholder="Phone number"
+          style={{
+            height: heightStyle.height,
+          }}
+          className={cn(
+            "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 flex w-full min-w-0 rounded-sm border px-3 text-base transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-70",
+            "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+            "appearance-none placeholder:text-primary/60 ltr:text-sm rtl:text-sm rtl:font-semibold focus-visible:ring-0 focus-visible:shadow-sm focus-visible:ring-offset-0 transition-[border] bg-card",
+            "focus-visible:border-tertiary/60",
+            "[&::-webkit-outer-spin-button]:appearance-none",
+            "[&::-webkit-inner-spin-button]:appearance-none",
+            "[-moz-appearance:textfield] ",
+            hasError && "border-red-400",
+            className
+          )}
+          {...rest}
+          disabled={readOnly}
+        />
+      </div>
+
+      {open &&
+        createPortal(
+          <div
+            ref={dropdownRef}
+            className={cn(
+              "absolute z-50 border bg-card shadow-lg",
+              dropDirection === "down" ? "rounded-b" : "rounded-t"
+            )}
+            style={{
+              top: position.top,
+              left: position.left,
+              width: position.width,
+              maxHeight: ROW_HEIGHT * VISIBLE_ROWS, // Set maxHeight here instead
+            }}
+            role="listbox"
+          >
+            <VirtualList
+              ROW_HEIGHT={ROW_HEIGHT}
+              BUFFER={BUFFER}
+              items={defaultCountries}
+              height={ROW_HEIGHT * VISIBLE_ROWS}
+              renderRow={(c, i) => (
+                <div
+                  onClick={() => chooseCountry(c)}
+                  onMouseEnter={() => setHighlightedIndex(i)}
+                  className={`flex ltr:text-sm rtl:text-sm rtl:font-semibold items-center gap-2 px-2 py-1 cursor-pointer ${
+                    i == highlightedIndex ? "bg-primary/5" : ""
+                  }`}
+                  role="option"
+                  aria-selected={i === highlightedIndex}
+                >
+                  <LazyFlag iso2={c.iso2} className={iconClassName} />
+                  <span className="flex-1 truncate">{c.name}</span>
+                  <span>+{c.dialCode}</span>
+                </div>
+              )}
+            />
+          </div>,
+          document.body
+        )}
+    </div>
+  );
+};

package/src/notion-ui/phone-input/type.ts

@@ -0,0 +1,227 @@
+export type CountryIso2 =
+  | (string & {}) // allow any string but add autocompletion
+  | "af"
+  | "al"
+  | "dz"
+  | "ad"
+  | "ao"
+  | "ag"
+  | "ar"
+  | "am"
+  | "aw"
+  | "au"
+  | "at"
+  | "az"
+  | "bs"
+  | "bh"
+  | "bd"
+  | "bb"
+  | "by"
+  | "be"
+  | "bz"
+  | "bj"
+  | "bt"
+  | "bo"
+  | "ba"
+  | "bw"
+  | "br"
+  | "io"
+  | "bn"
+  | "bg"
+  | "bf"
+  | "bi"
+  | "kh"
+  | "cm"
+  | "ca"
+  | "cv"
+  | "bq"
+  | "cf"
+  | "td"
+  | "cl"
+  | "cn"
+  | "co"
+  | "km"
+  | "cd"
+  | "cg"
+  | "cr"
+  | "ci"
+  | "hr"
+  | "cu"
+  | "cw"
+  | "cy"
+  | "cz"
+  | "dk"
+  | "dj"
+  | "dm"
+  | "do"
+  | "ec"
+  | "eg"
+  | "sv"
+  | "gq"
+  | "er"
+  | "ee"
+  | "et"
+  | "fj"
+  | "fo"
+  | "fi"
+  | "fr"
+  | "gf"
+  | "pf"
+  | "ga"
+  | "gm"
+  | "ge"
+  | "de"
+  | "gh"
+  | "gr"
+  | "gd"
+  | "gp"
+  | "gu"
+  | "gt"
+  | "gn"
+  | "gw"
+  | "gy"
+  | "ht"
+  | "hn"
+  | "hk"
+  | "hu"
+  | "is"
+  | "in"
+  | "id"
+  | "ir"
+  | "iq"
+  | "ie"
+  | "il"
+  | "it"
+  | "jm"
+  | "jp"
+  | "jo"
+  | "kz"
+  | "ke"
+  | "ki"
+  | "xk"
+  | "kw"
+  | "kg"
+  | "la"
+  | "lv"
+  | "lb"
+  | "ls"
+  | "lr"
+  | "ly"
+  | "li"
+  | "lt"
+  | "lu"
+  | "mo"
+  | "mk"
+  | "mg"
+  | "mw"
+  | "my"
+  | "mv"
+  | "ml"
+  | "mt"
+  | "mh"
+  | "mq"
+  | "mr"
+  | "mu"
+  | "mx"
+  | "fm"
+  | "md"
+  | "mc"
+  | "mn"
+  | "me"
+  | "ma"
+  | "mz"
+  | "mm"
+  | "na"
+  | "nr"
+  | "np"
+  | "nl"
+  | "nc"
+  | "nz"
+  | "ni"
+  | "ne"
+  | "ng"
+  | "kp"
+  | "no"
+  | "om"
+  | "pk"
+  | "pw"
+  | "ps"
+  | "pa"
+  | "pg"
+  | "py"
+  | "pe"
+  | "ph"
+  | "pl"
+  | "pm"
+  | "pt"
+  | "pr"
+  | "qa"
+  | "re"
+  | "ro"
+  | "ru"
+  | "rw"
+  | "kn"
+  | "lc"
+  | "vc"
+  | "ws"
+  | "sm"
+  | "st"
+  | "sa"
+  | "sn"
+  | "rs"
+  | "sc"
+  | "sl"
+  | "sg"
+  | "sk"
+  | "si"
+  | "sb"
+  | "so"
+  | "za"
+  | "kr"
+  | "ss"
+  | "es"
+  | "lk"
+  | "sd"
+  | "sr"
+  | "sz"
+  | "se"
+  | "ch"
+  | "sy"
+  | "tw"
+  | "tj"
+  | "tz"
+  | "th"
+  | "tl"
+  | "tg"
+  | "to"
+  | "tt"
+  | "tn"
+  | "tr"
+  | "tm"
+  | "tv"
+  | "ug"
+  | "ua"
+  | "ae"
+  | "gb"
+  | "us"
+  | "uy"
+  | "uz"
+  | "vu"
+  | "va"
+  | "ve"
+  | "vn"
+  | "wf"
+  | "ye"
+  | "yt"
+  | "zm"
+  | "zw";
+type FormatConfig = Record<string, string> & { default: string };
+
+export interface ParsedCountry {
+  name: string;
+  iso2: CountryIso2;
+  dialCode: string;
+  format?: string | FormatConfig; // make sure this line exists
+  priority?: number;
+  areaCodes?: string[];
+}

package/src/notion-ui/phone-input/utils.ts

@@ -0,0 +1,23 @@
+const alphabet = "abcdefghijklmnopqrstuvwxyz";
+const A_LETTER_CODEPOINT = "1f1e6";
+
+const incrementCodepoint = (codePoint: string, incrementBy: number): string => {
+  const decimal = parseInt(codePoint, 16);
+  return (decimal + incrementBy).toString(16);
+};
+
+const codepoints: Record<string, string> = alphabet.split("").reduce(
+  (obj, currentLetter, index) => ({
+    ...obj,
+    [currentLetter]: incrementCodepoint(A_LETTER_CODEPOINT, index),
+  }),
+  {}
+);
+export const getFlagCodepoint = (iso2: string) => {
+  if (!iso2 || iso2.length !== 2) return "";
+  const lower = iso2.toLowerCase();
+  const first = codepoints[lower[0]];
+  const second = codepoints[lower[1]];
+  if (!first || !second) return "";
+  return `${first}-${second}`;
+};