National: {phoneNumber && formatPhoneNumber(phoneNumber)}

International: {phoneNumber && formatPhoneNumberIntl(phoneNumber)}

Country code: {country && getCountryCallingCode(country)}

); }; export PhoneInputDemo; `,__src__:"src/registry/default/example/extra-new/phone-input/phone-input-demo.tsx","data-rehype-pretty-code-figure":"",children:(0,n.jsx)(e.pre,{style:{backgroundColor:"#22272e",color:"#adbac7"},tabIndex:"0","data-language":"tsx","data-theme":"github-dark-dimmed",__rawString__:`"use client"; import React, { useState, useEffect } from "react"; import { Country, formatPhoneNumber, formatPhoneNumberIntl, getCountryCallingCode, } from "react-phone-number-input"; import { PhoneInput } from "@/components/ui/extension/phone-input"; const PhoneInputDemo = () => { const [country, setCountry] = useState(); const [phoneNumber, setPhoneNumber] = useState(""); // Detect country using the Intl API useEffect(() => { const fetchCountryCode = async () => { try { // Retrieve client info from localStorage const clientInfo = JSON.parse( localStorage.getItem("clientInfo") || "{}", ); setCountry(clientInfo.country || "US"); } catch (error) { console.error("Error fetching country code:", error); setCountry("US" as Country); // Fallback to "US" if the fetch fails } }; fetchCountryCode(); }, []); return (

National: {phoneNumber && formatPhoneNumber(phoneNumber)}

International: {phoneNumber && formatPhoneNumberIntl(phoneNumber)}

Country code: {country && getCountryCallingCode(country)}

); }; export PhoneInputDemo; `,__src__:"src/registry/default/example/extra-new/phone-input/phone-input-demo.tsx",children:(0,n.jsxs)(e.code,{"data-language":"tsx","data-theme":"github-dark-dimmed",style:{display:"grid"},children:[(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#96D0FF"},children:'"use client"'}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:";"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" React, { useState, useEffect } "}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"#96D0FF"},children:' "react"'}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:";"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" {"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" Country,"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" formatPhoneNumber,"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" formatPhoneNumberIntl,"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" getCountryCallingCode,"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:"} "}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"#96D0FF"},children:' "react-phone-number-input"'}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:";"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" { PhoneInput } "}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"#96D0FF"},children:' "@/components/ui/extension/phone-input"'}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:";"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"const"}),(0,n.jsx)(e.span,{style:{color:"#DCBDFB"},children:" PhoneInputDemo"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:" ="}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" () "}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"=>"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" {"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F47067"},children:" const"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" ["}),(0,n.jsx)(e.span,{style:{color:"#6CB6FF"},children:"country"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:", "}),(0,n.jsx)(e.span,{style:{color:"#6CB6FF"},children:"setCountry"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:"] "}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#DCBDFB"},children:" useState"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:"<"}),(0,n.jsx)(e.span,{style:{color:"#F69D50"},children:"Country"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:">();"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F47067"},children:" const"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" ["}),(0,n.jsx)(e.span,{style:{color:"#6CB6FF"},children:"phoneNumber"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:", "}),(0,n.jsx)(e.span,{style:{color:"#6CB6FF"},children:"setPhoneNumber"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:"] "}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#DCBDFB"},children:" useState"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:"("}),(0,n.jsx)(e.span,{style:{color:"#96D0FF"},children:'""'}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:");"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#768390"},children:" // Detect country using the Intl API"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#DCBDFB"},children:" useEffect"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:"(() "}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"=>"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" {"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F47067"},children:" const"}),(0,n.jsx)(e.span,{style:{color:"#DCBDFB"},children:" fetchCountryCode"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:" ="}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:" async"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" () "}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"=>"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" {"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F47067"},children:" try"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" {"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#768390"},children:" // Retrieve client info from localStorage"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F47067"},children:" const"}),(0,n.jsx)(e.span,{style:{color:"#6CB6FF"},children:" clientInfo"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:" ="}),(0,n.jsx)(e.span,{style:{color:"#6CB6FF"},children:" JSON"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:"."}),(0,n.jsx)(e.span,{style:{color:"#DCBDFB"},children:"parse"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:"("})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" localStorage."}),(0,n.jsx)(e.span,{style:{color:"#DCBDFB"},children:"getItem"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:"("}),(0,n.jsx)(e.span,{style:{color:"#96D0FF"},children:'"clientInfo"'}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:") "}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"||"}),(0,n.jsx)(e.span,{style:{color:"#96D0FF"},children:' "{}"'}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:","})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" );"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#DCBDFB"},children:" setCountry"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:"(clientInfo.country "}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"||"}),(0,n.jsx)(e.span,{style:{color:"#96D0FF"},children:' "US"'}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:");"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" } "}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"catch"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" (error) {"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" console."}),(0,n.jsx)(e.span,{style:{color:"#DCBDFB"},children:"error"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:"("}),(0,n.jsx)(e.span,{style:{color:"#96D0FF"},children:'"Error fetching country code:"'}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:", error);"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#DCBDFB"},children:" setCountry"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:"("}),(0,n.jsx)(e.span,{style:{color:"#96D0FF"},children:'"US"'}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:" as"}),(0,n.jsx)(e.span,{style:{color:"#F69D50"},children:" Country"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:"); "}),(0,n.jsx)(e.span,{style:{color:"#768390"},children:'// Fallback to "US" if the fetch fails'})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" }"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" };"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#DCBDFB"},children:" fetchCountryCode"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:"();"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" }, []);"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F47067"},children:" return"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" ("})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#8DDB8C"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:">"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#8DDB8C"},children:"PhoneInput"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#6CB6FF"},children:" value"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"={"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:"phoneNumber"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"}"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#6CB6FF"},children:" onChange"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"={"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:"setPhoneNumber"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"}"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#6CB6FF"},children:" onCountryChange"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"={"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:"setCountry"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"}"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#6CB6FF"},children:" defaultCountry"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"={"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:"country"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"}"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#6CB6FF"},children:" placeholder"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#96D0FF"},children:'"Enter a phone number"'})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" />"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#8DDB8C"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"#6CB6FF"},children:" className"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#96D0FF"},children:'"mt-4 space-y-2 text-sm"'}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:">"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#8DDB8C"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:">National: "}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"{"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:"phoneNumber "}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"&&"}),(0,n.jsx)(e.span,{style:{color:"#DCBDFB"},children:" formatPhoneNumber"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:"(phoneNumber)"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"}"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:""})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#8DDB8C"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:">"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" International: "}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"{"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:"phoneNumber "}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"&&"}),(0,n.jsx)(e.span,{style:{color:"#DCBDFB"},children:" formatPhoneNumberIntl"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:"(phoneNumber)"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"}"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" "})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#8DDB8C"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:">Country code: "}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"{"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:"country "}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"&&"}),(0,n.jsx)(e.span,{style:{color:"#DCBDFB"},children:" getCountryCallingCode"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:"(country)"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"}"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:""})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" "})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" "})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" );"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:"};"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"export"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" PhoneInputDemo;"})]})]})})})}),` `,(0,n.jsx)(e.h2,{id:"installation",children:"Installation"}),` `,(0,n.jsxs)(p,{defaultValue:"cli",children:[(0,n.jsxs)(h,{children:[(0,n.jsx)(i,{value:"cli",children:"CLI"}),(0,n.jsx)(i,{value:"manual",children:"Manual"})]}),(0,n.jsx)(s,{value:"manual",children:(0,n.jsxs)(d,{children:[(0,n.jsx)(o,{children:"Run the following command:"}),(0,n.jsx)(e.figure,{"data-rehype-pretty-code-figure":"",children:(0,n.jsx)(e.pre,{style:{backgroundColor:"#22272e",color:"#adbac7"},tabIndex:"0","data-language":"bash","data-theme":"github-dark-dimmed",__rawString__:`npm install react-phone-number-input `,__npmCommand__:`npm install react-phone-number-input `,__yarnCommand__:`yarn add react-phone-number-input `,__pnpmCommand__:`pnpm add react-phone-number-input `,__bunCommand__:`bun add react-phone-number-input `,children:(0,n.jsx)(e.code,{"data-language":"bash","data-theme":"github-dark-dimmed",style:{display:"grid"},children:(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F69D50"},children:"npm"}),(0,n.jsx)(e.span,{style:{color:"#96D0FF"},children:" install"}),(0,n.jsx)(e.span,{style:{color:"#96D0FF"},children:" react-phone-number-input"})]})})})}),(0,n.jsx)(o,{children:"Copy and paste the following code into your project."}),(0,n.jsx)(a,{name:"phone-input",children:(0,n.jsx)(e.figure,{"data-language":"tsx","data-theme":"default",__rawString__:`import * as React from "react"; import { CheckIcon, ChevronsUpDown } from "lucide-react"; import * as RPNInput from "react-phone-number-input"; import flags from "react-phone-number-input/flags"; import { Button } from "@/components/ui/button"; import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, } from "@/components/ui/command"; import { Input } from "@/components/ui/input"; import { Popover, PopoverContent, PopoverTrigger, } from "@/components/ui/popover"; import { ScrollArea } from "@/components/ui/scroll-area"; import { cn } from "@/lib/utils"; type PhoneInputProps = Omit< React.ComponentProps<"input">, "onChange" | "value" | "ref" > & Omit, "onChange"> & { onChange?: (value: RPNInput.Value) => void; }; const PhoneInput: React.ForwardRefExoticComponent = React.forwardRef, PhoneInputProps>( ({ className, onChange, ...props }, ref) => { return ( onChange?.(value || ("" as RPNInput.Value))} {...props} /> ); }, ); PhoneInput.displayName = "PhoneInput"; const InputComponent = React.forwardRef< HTMLInputElement, React.ComponentProps<"input"> >(({ className, ...props }, ref) => ( )); InputComponent.displayName = "InputComponent"; type CountryEntry = { label: string; value: RPNInput.Country | undefined }; type CountrySelectProps = { disabled?: boolean; value: RPNInput.Country; options: CountryEntry[]; onChange: (country: RPNInput.Country) => void; }; const CountrySelect = ({ disabled, value: selectedCountry, options: countryList, onChange, }: CountrySelectProps) => { return ( No country found. {countryList.map(({ value, label }) => value ? ( ) : null, )} ); }; interface CountrySelectOptionProps extends RPNInput.FlagProps { selectedCountry: RPNInput.Country; onChange: (country: RPNInput.Country) => void; } const CountrySelectOption = ({ country, countryName, selectedCountry, onChange, }: CountrySelectOptionProps) => { return ( onChange(country)}> {countryName} {\`+\${RPNInput.getCountryCallingCode(country)}\`} ); }; const FlagComponent = ({ country, countryName }: RPNInput.FlagProps) => { const Flag = flags[country]; return ( {Flag && } ); }; export { PhoneInput }; `,__src__:"src/registry/default/extension/phone-input.tsx","data-rehype-pretty-code-figure":"",children:(0,n.jsx)(e.pre,{style:{backgroundColor:"#22272e",color:"#adbac7"},tabIndex:"0","data-language":"tsx","data-theme":"github-dark-dimmed",__rawString__:`import * as React from "react"; import { CheckIcon, ChevronsUpDown } from "lucide-react"; import * as RPNInput from "react-phone-number-input"; import flags from "react-phone-number-input/flags"; import { Button } from "@/components/ui/button"; import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, } from "@/components/ui/command"; import { Input } from "@/components/ui/input"; import { Popover, PopoverContent, PopoverTrigger, } from "@/components/ui/popover"; import { ScrollArea } from "@/components/ui/scroll-area"; import { cn } from "@/lib/utils"; type PhoneInputProps = Omit< React.ComponentProps<"input">, "onChange" | "value" | "ref" > & Omit, "onChange"> & { onChange?: (value: RPNInput.Value) => void; }; const PhoneInput: React.ForwardRefExoticComponent = React.forwardRef, PhoneInputProps>( ({ className, onChange, ...props }, ref) => { return ( onChange?.(value || ("" as RPNInput.Value))} {...props} /> ); }, ); PhoneInput.displayName = "PhoneInput"; const InputComponent = React.forwardRef< HTMLInputElement, React.ComponentProps<"input"> >(({ className, ...props }, ref) => ( )); InputComponent.displayName = "InputComponent"; type CountryEntry = { label: string; value: RPNInput.Country | undefined }; type CountrySelectProps = { disabled?: boolean; value: RPNInput.Country; options: CountryEntry[]; onChange: (country: RPNInput.Country) => void; }; const CountrySelect = ({ disabled, value: selectedCountry, options: countryList, onChange, }: CountrySelectProps) => { return ( No country found. {countryList.map(({ value, label }) => value ? ( ) : null, )} ); }; interface CountrySelectOptionProps extends RPNInput.FlagProps { selectedCountry: RPNInput.Country; onChange: (country: RPNInput.Country) => void; } const CountrySelectOption = ({ country, countryName, selectedCountry, onChange, }: CountrySelectOptionProps) => { return ( onChange(country)}> {countryName} {\`+\${RPNInput.getCountryCallingCode(country)}\`} ); }; const FlagComponent = ({ country, countryName }: RPNInput.FlagProps) => { const Flag = flags[country]; return ( {Flag && } ); }; export { PhoneInput }; `,__src__:"src/registry/default/extension/phone-input.tsx",children:(0,n.jsxs)(e.code,{"data-language":"tsx","data-theme":"github-dark-dimmed",style:{display:"grid"},children:[(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#6CB6FF"},children:" *"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:" as"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" React "}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"#96D0FF"},children:' "react"'}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:";"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" { CheckIcon, ChevronsUpDown } "}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"#96D0FF"},children:' "lucide-react"'}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:";"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#6CB6FF"},children:" *"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:" as"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" RPNInput "}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"#96D0FF"},children:' "react-phone-number-input"'}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:";"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" flags "}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"#96D0FF"},children:' "react-phone-number-input/flags"'}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:";"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" { Button } "}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"#96D0FF"},children:' "@/components/ui/button"'}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:";"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" {"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" Command,"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" CommandEmpty,"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" CommandGroup,"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" CommandInput,"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" CommandItem,"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" CommandList,"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:"} "}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"#96D0FF"},children:' "@/components/ui/command"'}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:";"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" { Input } "}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"#96D0FF"},children:' "@/components/ui/input"'}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:";"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" {"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" Popover,"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" PopoverContent,"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" PopoverTrigger,"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:"} "}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"#96D0FF"},children:' "@/components/ui/popover"'}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:";"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" { ScrollArea } "}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"#96D0FF"},children:' "@/components/ui/scroll-area"'}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:";"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" { cn } "}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"#96D0FF"},children:' "@/lib/utils"'}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:";"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"type"}),(0,n.jsx)(e.span,{style:{color:"#F69D50"},children:" PhoneInputProps"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:" ="}),(0,n.jsx)(e.span,{style:{color:"#F69D50"},children:" Omit"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:"<"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F69D50"},children:" React"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:"."}),(0,n.jsx)(e.span,{style:{color:"#F69D50"},children:"ComponentProps"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:"<"}),(0,n.jsx)(e.span,{style:{color:"#96D0FF"},children:'"input"'}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:">,"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#96D0FF"},children:' "onChange"'}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:" |"}),(0,n.jsx)(e.span,{style:{color:"#96D0FF"},children:' "value"'}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:" |"}),(0,n.jsx)(e.span,{style:{color:"#96D0FF"},children:' "ref"'})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:"> "}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"&"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F69D50"},children:" Omit"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:"<"}),(0,n.jsx)(e.span,{style:{color:"#F69D50"},children:"RPNInput"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:"."}),(0,n.jsx)(e.span,{style:{color:"#F69D50"},children:"Props"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:"<"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"typeof"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" RPNInput.default>, "}),(0,n.jsx)(e.span,{style:{color:"#96D0FF"},children:'"onChange"'}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:"> "}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"&"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" {"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#DCBDFB"},children:" onChange"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"?:"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" ("}),(0,n.jsx)(e.span,{style:{color:"#F69D50"},children:"value"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:":"}),(0,n.jsx)(e.span,{style:{color:"#F69D50"},children:" RPNInput"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:"."}),(0,n.jsx)(e.span,{style:{color:"#F69D50"},children:"Value"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:") "}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"=>"}),(0,n.jsx)(e.span,{style:{color:"#6CB6FF"},children:" void"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:";"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" };"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"const"}),(0,n.jsx)(e.span,{style:{color:"#6CB6FF"},children:" PhoneInput"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:":"}),(0,n.jsx)(e.span,{style:{color:"#F69D50"},children:" React"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:"."}),(0,n.jsx)(e.span,{style:{color:"#F69D50"},children:"ForwardRefExoticComponent"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:"<"}),(0,n.jsx)(e.span,{style:{color:"#F69D50"},children:"PhoneInputProps"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:"> "}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"="})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" React."}),(0,n.jsx)(e.span,{style:{color:"#DCBDFB"},children:"forwardRef"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:"<"}),(0,n.jsx)(e.span,{style:{color:"#F69D50"},children:"React"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:"."}),(0,n.jsx)(e.span,{style:{color:"#F69D50"},children:"ElementRef"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:"<"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"typeof"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" RPNInput.default>, "}),(0,n.jsx)(e.span,{style:{color:"#F69D50"},children:"PhoneInputProps"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:">("})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" ({ "}),(0,n.jsx)(e.span,{style:{color:"#F69D50"},children:"className"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:", "}),(0,n.jsx)(e.span,{style:{color:"#F69D50"},children:"onChange"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:", "}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"..."}),(0,n.jsx)(e.span,{style:{color:"#F69D50"},children:"props"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" }, "}),(0,n.jsx)(e.span,{style:{color:"#F69D50"},children:"ref"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:") "}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"=>"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" {"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F47067"},children:" return"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" ("})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#8DDB8C"},children:"RPNInput.default"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#6CB6FF"},children:" ref"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"={"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:"ref"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"}"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#6CB6FF"},children:" className"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"={"}),(0,n.jsx)(e.span,{style:{color:"#DCBDFB"},children:"cn"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:"("}),(0,n.jsx)(e.span,{style:{color:"#96D0FF"},children:'"flex"'}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:", className)"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"}"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#6CB6FF"},children:" flagComponent"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"={"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:"FlagComponent"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"}"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#6CB6FF"},children:" countrySelectComponent"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"={"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:"CountrySelect"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"}"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#6CB6FF"},children:" inputComponent"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"={"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:"InputComponent"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"}"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#6CB6FF"},children:" smartCaret"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"={"}),(0,n.jsx)(e.span,{style:{color:"#6CB6FF"},children:"false"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"}"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#768390"},children:" /**"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#768390"},children:" * Handles the onChange event."})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#768390"},children:" *"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#768390"},children:" * react-phone-number-input might trigger the onChange event as undefined"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#768390"},children:" * when a valid phone number is not entered. To prevent this,"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#768390"},children:" * the value is coerced to an empty string."})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#768390"},children:" *"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#768390"},children:" * "}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"@param"}),(0,n.jsx)(e.span,{style:{color:"#F69D50"},children:" {E164Number | undefined}"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" value"}),(0,n.jsx)(e.span,{style:{color:"#768390"},children:" - The entered value"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#768390"},children:" */"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#6CB6FF"},children:" onChange"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"={"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:"("}),(0,n.jsx)(e.span,{style:{color:"#F69D50"},children:"value"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:") "}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"=>"}),(0,n.jsx)(e.span,{style:{color:"#DCBDFB"},children:" onChange"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:"?.(value "}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"||"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" ("}),(0,n.jsx)(e.span,{style:{color:"#96D0FF"},children:'""'}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:" as"}),(0,n.jsx)(e.span,{style:{color:"#F69D50"},children:" RPNInput"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:"."}),(0,n.jsx)(e.span,{style:{color:"#F69D50"},children:"Value"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:"))"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"}"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F47067"},children:" {..."}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:"props"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"}"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" />"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" );"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" },"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" );"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:"PhoneInput.displayName "}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#96D0FF"},children:' "PhoneInput"'}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:";"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"const"}),(0,n.jsx)(e.span,{style:{color:"#6CB6FF"},children:" InputComponent"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:" ="}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" React.forwardRef"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"<"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" HTMLInputElement,"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" React.ComponentProps"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"<"}),(0,n.jsx)(e.span,{style:{color:"#96D0FF"},children:'"input"'}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:">"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F47067"},children:">"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:"(({ "}),(0,n.jsx)(e.span,{style:{color:"#F69D50"},children:"className"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:", "}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"..."}),(0,n.jsx)(e.span,{style:{color:"#F69D50"},children:"props"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" }, "}),(0,n.jsx)(e.span,{style:{color:"#F69D50"},children:"ref"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:") "}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"=>"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" ("})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#8DDB8C"},children:"Input"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#6CB6FF"},children:" className"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"={"}),(0,n.jsx)(e.span,{style:{color:"#DCBDFB"},children:"cn"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:"("}),(0,n.jsx)(e.span,{style:{color:"#96D0FF"},children:'"rounded-e-lg rounded-s-none"'}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:", className)"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"}"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F47067"},children:" {..."}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:"props"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"}"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#6CB6FF"},children:" ref"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"={"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:"ref"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"}"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" />"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:"));"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:"InputComponent.displayName "}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#96D0FF"},children:' "InputComponent"'}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:";"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"type"}),(0,n.jsx)(e.span,{style:{color:"#F69D50"},children:" CountryEntry"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:" ="}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" { "}),(0,n.jsx)(e.span,{style:{color:"#F69D50"},children:"label"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:":"}),(0,n.jsx)(e.span,{style:{color:"#6CB6FF"},children:" string"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:"; "}),(0,n.jsx)(e.span,{style:{color:"#F69D50"},children:"value"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:":"}),(0,n.jsx)(e.span,{style:{color:"#F69D50"},children:" RPNInput"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:"."}),(0,n.jsx)(e.span,{style:{color:"#F69D50"},children:"Country"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:" |"}),(0,n.jsx)(e.span,{style:{color:"#6CB6FF"},children:" undefined"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" };"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"type"}),(0,n.jsx)(e.span,{style:{color:"#F69D50"},children:" CountrySelectProps"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:" ="}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" {"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F69D50"},children:" disabled"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"?:"}),(0,n.jsx)(e.span,{style:{color:"#6CB6FF"},children:" boolean"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:";"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F69D50"},children:" value"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:":"}),(0,n.jsx)(e.span,{style:{color:"#F69D50"},children:" RPNInput"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:"."}),(0,n.jsx)(e.span,{style:{color:"#F69D50"},children:"Country"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:";"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F69D50"},children:" options"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:":"}),(0,n.jsx)(e.span,{style:{color:"#F69D50"},children:" CountryEntry"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:"[];"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#DCBDFB"},children:" onChange"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:":"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" ("}),(0,n.jsx)(e.span,{style:{color:"#F69D50"},children:"country"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:":"}),(0,n.jsx)(e.span,{style:{color:"#F69D50"},children:" RPNInput"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:"."}),(0,n.jsx)(e.span,{style:{color:"#F69D50"},children:"Country"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:") "}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"=>"}),(0,n.jsx)(e.span,{style:{color:"#6CB6FF"},children:" void"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:";"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:"};"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"const"}),(0,n.jsx)(e.span,{style:{color:"#DCBDFB"},children:" CountrySelect"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:" ="}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" ({"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" disabled,"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" value: selectedCountry,"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" options: countryList,"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" onChange,"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:"}"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:":"}),(0,n.jsx)(e.span,{style:{color:"#F69D50"},children:" CountrySelectProps"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:") "}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"=>"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" {"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F47067"},children:" return"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" ("})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#8DDB8C"},children:"Popover"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:">"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#8DDB8C"},children:"PopoverTrigger"}),(0,n.jsx)(e.span,{style:{color:"#6CB6FF"},children:" asChild"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:">"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#8DDB8C"},children:"Button"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#6CB6FF"},children:" type"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#96D0FF"},children:'"button"'})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#6CB6FF"},children:" variant"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#96D0FF"},children:'"outline"'})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#6CB6FF"},children:" className"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#96D0FF"},children:'"flex gap-1 rounded-e-none rounded-s-lg border-r-0 px-3 focus:z-10"'})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#6CB6FF"},children:" disabled"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"={"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:"disabled"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"}"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" >"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#8DDB8C"},children:"FlagComponent"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#6CB6FF"},children:" country"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"={"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:"selectedCountry"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"}"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#6CB6FF"},children:" countryName"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"={"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:"selectedCountry"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"}"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" />"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#8DDB8C"},children:"ChevronsUpDown"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#6CB6FF"},children:" className"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"={"}),(0,n.jsx)(e.span,{style:{color:"#DCBDFB"},children:"cn"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:"("})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#96D0FF"},children:' "-mr-2 size-4 opacity-50"'}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:","})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" disabled "}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"?"}),(0,n.jsx)(e.span,{style:{color:"#96D0FF"},children:' "hidden"'}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:" :"}),(0,n.jsx)(e.span,{style:{color:"#96D0FF"},children:' "opacity-100"'}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:","})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" )"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"}"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" />"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" "})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" "})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#8DDB8C"},children:"PopoverContent"}),(0,n.jsx)(e.span,{style:{color:"#6CB6FF"},children:" className"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#96D0FF"},children:'"w-[300px] p-0"'}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:">"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#8DDB8C"},children:"Command"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:">"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#8DDB8C"},children:"CommandInput"}),(0,n.jsx)(e.span,{style:{color:"#6CB6FF"},children:" placeholder"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#96D0FF"},children:'"Search country..."'}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" />"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#8DDB8C"},children:"CommandList"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:">"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#8DDB8C"},children:"ScrollArea"}),(0,n.jsx)(e.span,{style:{color:"#6CB6FF"},children:" className"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#96D0FF"},children:'"h-72"'}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:">"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#8DDB8C"},children:"CommandEmpty"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:">No country found."})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#8DDB8C"},children:"CommandGroup"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:">"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F47067"},children:" {"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:"countryList."}),(0,n.jsx)(e.span,{style:{color:"#DCBDFB"},children:"map"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:"(({ "}),(0,n.jsx)(e.span,{style:{color:"#F69D50"},children:"value"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:", "}),(0,n.jsx)(e.span,{style:{color:"#F69D50"},children:"label"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" }) "}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"=>"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" value "}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"?"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" ("})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#8DDB8C"},children:"CountrySelectOption"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#6CB6FF"},children:" key"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"={"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:"value"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"}"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#6CB6FF"},children:" country"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"={"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:"value"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"}"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#6CB6FF"},children:" countryName"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"={"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:"label"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"}"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#6CB6FF"},children:" selectedCountry"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"={"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:"selectedCountry"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"}"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#6CB6FF"},children:" onChange"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"={"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:"onChange"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"}"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" />"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" ) "}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:":"}),(0,n.jsx)(e.span,{style:{color:"#6CB6FF"},children:" null"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:","})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" )"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"}"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" "})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" "})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" "})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" "})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" "})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" "})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" );"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:"};"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"interface"}),(0,n.jsx)(e.span,{style:{color:"#F69D50"},children:" CountrySelectOptionProps"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:" extends"}),(0,n.jsx)(e.span,{style:{color:"#F69D50"},children:" RPNInput"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:"."}),(0,n.jsx)(e.span,{style:{color:"#6CB6FF"},children:"FlagProps"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" {"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F69D50"},children:" selectedCountry"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:":"}),(0,n.jsx)(e.span,{style:{color:"#F69D50"},children:" RPNInput"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:"."}),(0,n.jsx)(e.span,{style:{color:"#F69D50"},children:"Country"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:";"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#DCBDFB"},children:" onChange"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:":"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" ("}),(0,n.jsx)(e.span,{style:{color:"#F69D50"},children:"country"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:":"}),(0,n.jsx)(e.span,{style:{color:"#F69D50"},children:" RPNInput"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:"."}),(0,n.jsx)(e.span,{style:{color:"#F69D50"},children:"Country"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:") "}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"=>"}),(0,n.jsx)(e.span,{style:{color:"#6CB6FF"},children:" void"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:";"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:"}"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"const"}),(0,n.jsx)(e.span,{style:{color:"#DCBDFB"},children:" CountrySelectOption"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:" ="}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" ({"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" country,"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" countryName,"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" selectedCountry,"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" onChange,"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:"}"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:":"}),(0,n.jsx)(e.span,{style:{color:"#F69D50"},children:" CountrySelectOptionProps"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:") "}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"=>"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" {"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F47067"},children:" return"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" ("})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#8DDB8C"},children:"CommandItem"}),(0,n.jsx)(e.span,{style:{color:"#6CB6FF"},children:" className"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#96D0FF"},children:'"gap-2"'}),(0,n.jsx)(e.span,{style:{color:"#6CB6FF"},children:" onSelect"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"={"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:"() "}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"=>"}),(0,n.jsx)(e.span,{style:{color:"#DCBDFB"},children:" onChange"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:"(country)"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"}"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:">"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#8DDB8C"},children:"FlagComponent"}),(0,n.jsx)(e.span,{style:{color:"#6CB6FF"},children:" country"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"={"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:"country"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"}"}),(0,n.jsx)(e.span,{style:{color:"#6CB6FF"},children:" countryName"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"={"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:"countryName"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"}"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" />"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#8DDB8C"},children:"span"}),(0,n.jsx)(e.span,{style:{color:"#6CB6FF"},children:" className"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#96D0FF"},children:'"flex-1 text-sm"'}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:">"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"{"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:"countryName"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"}"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:""})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#8DDB8C"},children:"span"}),(0,n.jsx)(e.span,{style:{color:"#6CB6FF"},children:" className"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#96D0FF"},children:'"text-sm text-foreground/50"'}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:">"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"{"}),(0,n.jsx)(e.span,{style:{color:"#96D0FF"},children:"`+${"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:"RPNInput"}),(0,n.jsx)(e.span,{style:{color:"#96D0FF"},children:"."}),(0,n.jsx)(e.span,{style:{color:"#DCBDFB"},children:"getCountryCallingCode"}),(0,n.jsx)(e.span,{style:{color:"#96D0FF"},children:"("}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:"country"}),(0,n.jsx)(e.span,{style:{color:"#96D0FF"},children:")"}),(0,n.jsx)(e.span,{style:{color:"#96D0FF"},children:"}`"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"}"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:""})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#8DDB8C"},children:"CheckIcon"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#6CB6FF"},children:" className"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"={"}),(0,n.jsx)(e.span,{style:{color:"#96D0FF"},children:"`ml-auto size-4 ${"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:"country"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:" ==="}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" selectedCountry"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:" ?"}),(0,n.jsx)(e.span,{style:{color:"#96D0FF"},children:' "opacity-100"'}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:" :"}),(0,n.jsx)(e.span,{style:{color:"#96D0FF"},children:' "opacity-0"}`'}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"}"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" />"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" "})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" );"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:"};"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"const"}),(0,n.jsx)(e.span,{style:{color:"#DCBDFB"},children:" FlagComponent"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:" ="}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" ({ "}),(0,n.jsx)(e.span,{style:{color:"#F69D50"},children:"country"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:", "}),(0,n.jsx)(e.span,{style:{color:"#F69D50"},children:"countryName"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" }"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:":"}),(0,n.jsx)(e.span,{style:{color:"#F69D50"},children:" RPNInput"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:"."}),(0,n.jsx)(e.span,{style:{color:"#F69D50"},children:"FlagProps"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:") "}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"=>"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" {"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F47067"},children:" const"}),(0,n.jsx)(e.span,{style:{color:"#6CB6FF"},children:" Flag"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:" ="}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" flags[country];"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F47067"},children:" return"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" ("})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#8DDB8C"},children:"span"}),(0,n.jsx)(e.span,{style:{color:"#6CB6FF"},children:" className"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#96D0FF"},children:'"flex h-4 w-6 overflow-hidden rounded-sm bg-foreground/20 [&_svg]:size-full"'}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:">"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F47067"},children:" {"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:"Flag "}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"&&"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#8DDB8C"},children:"Flag"}),(0,n.jsx)(e.span,{style:{color:"#6CB6FF"},children:" title"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"={"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:"countryName"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"}"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" />"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"}"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" "})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" );"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:"};"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"export"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" { PhoneInput };"})]})]})})})}),(0,n.jsx)(o,{children:"Update the import paths to match your project setup."})]})}),(0,n.jsxs)(s,{value:"cli",children:[(0,n.jsx)(o,{children:"Run the following command "}),(0,n.jsx)(e.figure,{"data-rehype-pretty-code-figure":"",children:(0,n.jsx)(e.pre,{style:{backgroundColor:"#22272e",color:"#adbac7"},tabIndex:"0","data-language":"bash","data-theme":"github-dark-dimmed",__rawString__:`npx @shadext/cli add phone-input `,__npmCommand__:`npx @shadext/cli add phone-input `,__yarnCommand__:`npx @shadext/cli add phone-input `,__pnpmCommand__:`pnpm dlx @shadext/cli add phone-input `,__bunCommand__:`bunx --bun @shadext/cli add phone-input `,children:(0,n.jsx)(e.code,{"data-language":"bash","data-theme":"github-dark-dimmed",style:{display:"grid"},children:(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F69D50"},children:"npx"}),(0,n.jsx)(e.span,{style:{color:"#96D0FF"},children:" @shadext/cli"}),(0,n.jsx)(e.span,{style:{color:"#96D0FF"},children:" add"}),(0,n.jsx)(e.span,{style:{color:"#96D0FF"},children:" phone-input"})]})})})})]})]}),` `,(0,n.jsx)(e.h2,{id:"example",children:"Example"}),` `,(0,n.jsx)(e.h3,{id:"setting-default-country",children:"Setting default country"}),` `,(0,n.jsx)(r,{name:"phone-input-setting-default-country",children:(0,n.jsx)(e.figure,{"data-language":"tsx","data-theme":"default",__rawString__:`"use client"; import React from "react"; import { useState } from "react"; import { PhoneInput } from "@/components/ui/extension/phone-input"; const PhoneInputForceNationalFormat = () => { const [phoneNumber, setPhoneNumber] = useState(""); return (

); }; export PhoneInputForceNationalFormat; `,__src__:"src/registry/default/example/extra-new/phone-input/phone-input-setting-default-country.tsx","data-rehype-pretty-code-figure":"",children:(0,n.jsx)(e.pre,{style:{backgroundColor:"#22272e",color:"#adbac7"},tabIndex:"0","data-language":"tsx","data-theme":"github-dark-dimmed",__rawString__:`"use client"; import React from "react"; import { useState } from "react"; import { PhoneInput } from "@/components/ui/extension/phone-input"; const PhoneInputForceNationalFormat = () => { const [phoneNumber, setPhoneNumber] = useState(""); return (

); }; export PhoneInputForceNationalFormat; `,__src__:"src/registry/default/example/extra-new/phone-input/phone-input-setting-default-country.tsx",children:(0,n.jsxs)(e.code,{"data-language":"tsx","data-theme":"github-dark-dimmed",style:{display:"grid"},children:[(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#96D0FF"},children:'"use client"'}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:";"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" React "}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"#96D0FF"},children:' "react"'}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:";"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" { useState } "}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"#96D0FF"},children:' "react"'}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:";"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" { PhoneInput } "}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"#96D0FF"},children:' "@/components/ui/extension/phone-input"'}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:";"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"const"}),(0,n.jsx)(e.span,{style:{color:"#DCBDFB"},children:" PhoneInputForceNationalFormat"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:" ="}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" () "}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"=>"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" {"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F47067"},children:" const"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" ["}),(0,n.jsx)(e.span,{style:{color:"#6CB6FF"},children:"phoneNumber"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:", "}),(0,n.jsx)(e.span,{style:{color:"#6CB6FF"},children:"setPhoneNumber"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:"] "}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#DCBDFB"},children:" useState"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:"("}),(0,n.jsx)(e.span,{style:{color:"#96D0FF"},children:'""'}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:");"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F47067"},children:" return"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" ("})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#8DDB8C"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:">"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#8DDB8C"},children:"PhoneInput"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#6CB6FF"},children:" value"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"={"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:"phoneNumber"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"}"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#6CB6FF"},children:" onChange"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"={"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:"setPhoneNumber"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"}"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#6CB6FF"},children:" international"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#6CB6FF"},children:" defaultCountry"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#96D0FF"},children:'"LK"'})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" />"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" "})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" );"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:"};"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"export"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" PhoneInputForceNationalFormat;"})]})]})})})}),` `,(0,n.jsx)(e.h3,{id:"internationalization",children:"Internationalization"}),` `,(0,n.jsx)(r,{name:"phone-input-internationalization",children:(0,n.jsx)(e.figure,{"data-language":"tsx","data-theme":"default",__rawString__:`"use client"; import React from "react"; import { useState } from "react"; import { PhoneInput } from "@/components/ui/extension/phone-input"; const PhoneInputForceNationalFormat = () => { const [phoneNumber, setPhoneNumber] = useState(""); return (

); }; export PhoneInputForceNationalFormat; `,__src__:"src/registry/default/example/extra-new/phone-input/phone-input-internationalization.tsx","data-rehype-pretty-code-figure":"",children:(0,n.jsx)(e.pre,{style:{backgroundColor:"#22272e",color:"#adbac7"},tabIndex:"0","data-language":"tsx","data-theme":"github-dark-dimmed",__rawString__:`"use client"; import React from "react"; import { useState } from "react"; import { PhoneInput } from "@/components/ui/extension/phone-input"; const PhoneInputForceNationalFormat = () => { const [phoneNumber, setPhoneNumber] = useState(""); return (

); }; export PhoneInputForceNationalFormat; `,__src__:"src/registry/default/example/extra-new/phone-input/phone-input-internationalization.tsx",children:(0,n.jsxs)(e.code,{"data-language":"tsx","data-theme":"github-dark-dimmed",style:{display:"grid"},children:[(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#96D0FF"},children:'"use client"'}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:";"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" React "}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"#96D0FF"},children:' "react"'}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:";"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" { useState } "}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"#96D0FF"},children:' "react"'}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:";"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" { PhoneInput } "}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"#96D0FF"},children:' "@/components/ui/extension/phone-input"'}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:";"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"const"}),(0,n.jsx)(e.span,{style:{color:"#DCBDFB"},children:" PhoneInputForceNationalFormat"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:" ="}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" () "}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"=>"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" {"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F47067"},children:" const"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" ["}),(0,n.jsx)(e.span,{style:{color:"#6CB6FF"},children:"phoneNumber"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:", "}),(0,n.jsx)(e.span,{style:{color:"#6CB6FF"},children:"setPhoneNumber"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:"] "}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#DCBDFB"},children:" useState"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:"("}),(0,n.jsx)(e.span,{style:{color:"#96D0FF"},children:'""'}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:");"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F47067"},children:" return"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" ("})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#8DDB8C"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:">"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#8DDB8C"},children:"PhoneInput"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#6CB6FF"},children:" value"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"={"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:"phoneNumber"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"}"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#6CB6FF"},children:" onChange"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"={"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:"setPhoneNumber"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"}"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#6CB6FF"},children:" international"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#6CB6FF"},children:" defaultCountry"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#96D0FF"},children:'"LK"'})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" />"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" "})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" );"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:"};"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"export"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" PhoneInputForceNationalFormat;"})]})]})})})}),` `,(0,n.jsx)(e.h3,{id:"force-international-format",children:"Force international format"}),` `,(0,n.jsx)(r,{name:"phone-input-force-international-format",children:(0,n.jsx)(e.figure,{"data-language":"tsx","data-theme":"default",__rawString__:`"use client"; import React from "react"; import { useState } from "react"; import { PhoneInput } from "@/components/ui/extension/phone-input"; const PhoneInputForceNationalFormat = () => { const [phoneNumber, setPhoneNumber] = useState(""); return (

); }; export PhoneInputForceNationalFormat; `,__src__:"src/registry/default/example/extra-new/phone-input/phone-input-force-international-format.tsx","data-rehype-pretty-code-figure":"",children:(0,n.jsx)(e.pre,{style:{backgroundColor:"#22272e",color:"#adbac7"},tabIndex:"0","data-language":"tsx","data-theme":"github-dark-dimmed",__rawString__:`"use client"; import React from "react"; import { useState } from "react"; import { PhoneInput } from "@/components/ui/extension/phone-input"; const PhoneInputForceNationalFormat = () => { const [phoneNumber, setPhoneNumber] = useState(""); return (

); }; export PhoneInputForceNationalFormat; `,__src__:"src/registry/default/example/extra-new/phone-input/phone-input-force-international-format.tsx",children:(0,n.jsxs)(e.code,{"data-language":"tsx","data-theme":"github-dark-dimmed",style:{display:"grid"},children:[(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#96D0FF"},children:'"use client"'}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:";"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" React "}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"#96D0FF"},children:' "react"'}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:";"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" { useState } "}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"#96D0FF"},children:' "react"'}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:";"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" { PhoneInput } "}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"#96D0FF"},children:' "@/components/ui/extension/phone-input"'}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:";"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"const"}),(0,n.jsx)(e.span,{style:{color:"#DCBDFB"},children:" PhoneInputForceNationalFormat"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:" ="}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" () "}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"=>"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" {"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F47067"},children:" const"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" ["}),(0,n.jsx)(e.span,{style:{color:"#6CB6FF"},children:"phoneNumber"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:", "}),(0,n.jsx)(e.span,{style:{color:"#6CB6FF"},children:"setPhoneNumber"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:"] "}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#DCBDFB"},children:" useState"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:"("}),(0,n.jsx)(e.span,{style:{color:"#96D0FF"},children:'""'}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:");"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F47067"},children:" return"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" ("})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#8DDB8C"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:">"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#8DDB8C"},children:"PhoneInput"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#6CB6FF"},children:" value"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"={"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:"phoneNumber"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"}"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#6CB6FF"},children:" onChange"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"={"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:"setPhoneNumber"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"}"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#6CB6FF"},children:" international"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#6CB6FF"},children:" defaultCountry"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#96D0FF"},children:'"LK"'})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" />"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" "})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" );"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:"};"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"export"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" PhoneInputForceNationalFormat;"})]})]})})})}),` `,(0,n.jsx)(e.h3,{id:"force-national-format",children:"Force national format"}),` `,(0,n.jsx)(r,{name:"phone-input-force-national-format",children:(0,n.jsx)(e.figure,{"data-language":"tsx","data-theme":"default",__rawString__:`"use client"; import React from "react"; import { useState } from "react"; import { PhoneInput } from "@/components/ui/extension/phone-input"; const PhoneInputForceNationalFormat = () => { const [phoneNumber, setPhoneNumber] = useState(""); return (

); }; export PhoneInputForceNationalFormat; `,__src__:"src/registry/default/example/extra-new/phone-input/phone-input-force-national-format.tsx","data-rehype-pretty-code-figure":"",children:(0,n.jsx)(e.pre,{style:{backgroundColor:"#22272e",color:"#adbac7"},tabIndex:"0","data-language":"tsx","data-theme":"github-dark-dimmed",__rawString__:`"use client"; import React from "react"; import { useState } from "react"; import { PhoneInput } from "@/components/ui/extension/phone-input"; const PhoneInputForceNationalFormat = () => { const [phoneNumber, setPhoneNumber] = useState(""); return (

); }; export PhoneInputForceNationalFormat; `,__src__:"src/registry/default/example/extra-new/phone-input/phone-input-force-national-format.tsx",children:(0,n.jsxs)(e.code,{"data-language":"tsx","data-theme":"github-dark-dimmed",style:{display:"grid"},children:[(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#96D0FF"},children:'"use client"'}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:";"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" React "}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"#96D0FF"},children:' "react"'}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:";"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" { useState } "}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"#96D0FF"},children:' "react"'}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:";"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" { PhoneInput } "}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"#96D0FF"},children:' "@/components/ui/extension/phone-input"'}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:";"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"const"}),(0,n.jsx)(e.span,{style:{color:"#DCBDFB"},children:" PhoneInputForceNationalFormat"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:" ="}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" () "}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"=>"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" {"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F47067"},children:" const"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" ["}),(0,n.jsx)(e.span,{style:{color:"#6CB6FF"},children:"phoneNumber"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:", "}),(0,n.jsx)(e.span,{style:{color:"#6CB6FF"},children:"setPhoneNumber"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:"] "}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#DCBDFB"},children:" useState"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:"("}),(0,n.jsx)(e.span,{style:{color:"#96D0FF"},children:'""'}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:");"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F47067"},children:" return"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" ("})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#8DDB8C"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:">"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#8DDB8C"},children:"PhoneInput"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#6CB6FF"},children:" value"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"={"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:"phoneNumber"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"}"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#6CB6FF"},children:" onChange"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"={"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:"setPhoneNumber"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"}"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#6CB6FF"},children:" international"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"={"}),(0,n.jsx)(e.span,{style:{color:"#6CB6FF"},children:"false"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"}"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#6CB6FF"},children:" defaultCountry"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#96D0FF"},children:'"LK"'})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#6CB6FF"},children:" placeholder"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#96D0FF"},children:'"Enter a phone number"'})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" />"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" "})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" );"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:"};"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"export"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" PhoneInputForceNationalFormat;"})]})]})})})}),` `,(0,n.jsx)(e.h3,{id:"initialvalueformat",children:"initialValueFormat"}),` `,(0,n.jsx)(r,{name:"phone-input-initial-value-format",children:(0,n.jsx)(e.figure,{"data-language":"tsx","data-theme":"default",__rawString__:`"use client"; import React from "react"; import { useState } from "react"; import { PhoneInput } from "@/components/ui/extension/phone-input"; const PhoneInputInitialValueFormat = () => { const [phoneNumber, setPhoneNumber] = useState(""); return (

); }; export PhoneInputInitialValueFormat; `,__src__:"src/registry/default/example/extra-new/phone-input/phone-input-initial-value-format.tsx","data-rehype-pretty-code-figure":"",children:(0,n.jsx)(e.pre,{style:{backgroundColor:"#22272e",color:"#adbac7"},tabIndex:"0","data-language":"tsx","data-theme":"github-dark-dimmed",__rawString__:`"use client"; import React from "react"; import { useState } from "react"; import { PhoneInput } from "@/components/ui/extension/phone-input"; const PhoneInputInitialValueFormat = () => { const [phoneNumber, setPhoneNumber] = useState(""); return (

); }; export PhoneInputInitialValueFormat; `,__src__:"src/registry/default/example/extra-new/phone-input/phone-input-initial-value-format.tsx",children:(0,n.jsxs)(e.code,{"data-language":"tsx","data-theme":"github-dark-dimmed",style:{display:"grid"},children:[(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#96D0FF"},children:'"use client"'}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:";"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" React "}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"#96D0FF"},children:' "react"'}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:";"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" { useState } "}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"#96D0FF"},children:' "react"'}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:";"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" { PhoneInput } "}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"#96D0FF"},children:' "@/components/ui/extension/phone-input"'}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:";"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"const"}),(0,n.jsx)(e.span,{style:{color:"#DCBDFB"},children:" PhoneInputInitialValueFormat"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:" ="}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" () "}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"=>"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" {"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F47067"},children:" const"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" ["}),(0,n.jsx)(e.span,{style:{color:"#6CB6FF"},children:"phoneNumber"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:", "}),(0,n.jsx)(e.span,{style:{color:"#6CB6FF"},children:"setPhoneNumber"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:"] "}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#DCBDFB"},children:" useState"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:"("}),(0,n.jsx)(e.span,{style:{color:"#96D0FF"},children:'""'}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:");"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F47067"},children:" return"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" ("})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#8DDB8C"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:">"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#8DDB8C"},children:"PhoneInput"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#6CB6FF"},children:" value"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"={"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:"phoneNumber"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"}"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#6CB6FF"},children:" onChange"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"={"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:"setPhoneNumber"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"}"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#6CB6FF"},children:" initialValueFormat"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#96D0FF"},children:'"national"'})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#6CB6FF"},children:" placeholder"}),(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#96D0FF"},children:'"Enter a phone number"'})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" />"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" "})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" );"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:"};"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F47067"},children:"export"}),(0,n.jsx)(e.span,{style:{color:"#ADBAC7"},children:" PhoneInputInitialValueFormat;"})]})]})})})}),` `,(0,n.jsx)(e.h3,{id:"formatting-value",children:"Formatting value"}),` `,(0,n.jsx)(r,{name:"phone-input-demo",children:(0,n.jsx)(e.figure,{"data-language":"tsx","data-theme":"default",__rawString__:`"use client"; import React, { useState, useEffect } from "react"; import { Country, formatPhoneNumber, formatPhoneNumberIntl, getCountryCallingCode, } from "react-phone-number-input"; import { PhoneInput } from "@/components/ui/extension/phone-input"; const PhoneInputDemo = () => { const [country, setCountry] = useState(); const [phoneNumber, setPhoneNumber] = useState(""); // Detect country using the Intl API useEffect(() => { const fetchCountryCode = async () => { try { // Retrieve client info from localStorage const clientInfo = JSON.parse( localStorage.getItem("clientInfo") || "{}", ); setCountry(clientInfo.country || "US"); } catch (error) { console.error("Error fetching country code:", error); setCountry("US" as Country); // Fallback to "US" if the fetch fails } }; fetchCountryCode(); }, []); return (

National: {phoneNumber && formatPhoneNumber(phoneNumber)}

International: {phoneNumber && formatPhoneNumberIntl(phoneNumber)}

Country code: {country && getCountryCallingCode(country)}

National: {phoneNumber && formatPhoneNumber(phoneNumber)}

International: {phoneNumber && formatPhoneNumberIntl(phoneNumber)}

Country code: {country && getCountryCallingCode(country)}

Phone Input

Installation

Run the following command

Example

Setting default country

Internationalization

Force international format

Force national format

initialValueFormat

Formatting value

Table of Content

Github