phone-input

1"use client";
2 
3import * as React from "react";
4import PhoneInput, { type Country } from "react-phone-number-input";
5import { isValidPhoneNumber } from "libphonenumber-js";
6import { cn } from "@/lib/utils";
7import { Label } from "./label";
8 
9import "react-phone-number-input/style.css";
10 
11export interface PhoneInputFieldProps {
12  value?: string;
13  onChange?: (value: string | undefined) => void;
14  label?: string;
15  placeholder?: string;
16  error?: string;
17  description?: string;
18  disabled?: boolean;
19  required?: boolean;
20  defaultCountry?: Country;
21  className?: string;
22}
23 
24export function PhoneInputField({
25  value,
26  onChange,
27  label,
28  placeholder = "Enter phone number",
29  error,
30  description,
31  disabled = false,
32  required = false,
33  defaultCountry = "US",
34  className,
35}: PhoneInputFieldProps) {
36  const [isFocused, setIsFocused] = React.useState(false);
37 
38  return (
39    <div className={cn("space-y-2", className)}>
40      {label && (
41        <Label className={cn(error && "text-destructive")}>
42          {label}
43          {required && <span className="text-destructive ml-1">*</span>}
44        </Label>
45      )}
46      
47      <div className="relative">
48        <PhoneInput
49          international
50          countryCallingCodeEditable={false}
51          defaultCountry={defaultCountry}
52          value={value}
53          onChange={(value) => onChange?.(value as string | undefined)}
54          placeholder={placeholder}
55          disabled={disabled}
56          onFocus={() => setIsFocused(true)}
57          onBlur={() => setIsFocused(false)}
58          className={cn(
59            "flex h-9 w-full rounded-md border bg-transparent px-3 py-1 text-sm shadow-sm transition-colors",
60            "border-input focus-visible:border-ring focus-visible:ring-ring/50",
61            "file:border-0 file:bg-transparent file:text-sm file:font-medium",
62            "placeholder:text-muted-foreground",
63            "focus-visible:outline-none focus-visible:ring-1",
64            "disabled:cursor-not-allowed disabled:opacity-50",
65            "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40",
66            "aria-invalid:border-destructive",
67            error && "border-destructive",
68            isFocused && !error && "ring-1 ring-ring",
69            "[&_.PhoneInputCountry]:bg-transparent",
70            "[&_.PhoneInputCountrySelect]:h-9",
71            "[&_.PhoneInputCountrySelect]:px-2",
72            "[&_.PhoneInputCountrySelect]:border-r",
73// … truncated