4c:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"RegistryDependencies"] 4d:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"FilesView"] 4e:Td17,"use client"; import * as React from "react"; import PhoneInput, { type Country } from "react-phone-number-input"; import { isValidPhoneNumber } from "libphonenumber-js"; import { cn } from "@/lib/utils"; import { Label } from "./label"; import "react-phone-number-input/style.css"; export interface PhoneInputFieldProps { value?: string; onChange?: (value: string | undefined) => void; label?: string; placeholder?: string; error?: string; description?: string; disabled?: boolean; required?: boolean; defaultCountry?: Country; className?: string; } export function PhoneInputField({ value, onChange, label, placeholder = "Enter phone number", error, description, disabled = false, required = false, defaultCountry = "US", className, }: PhoneInputFieldProps) { const [isFocused, setIsFocused] = React.useState(false); return (

{label && ( {label} {required && *} )}

onChange?.(value as string | undefined)} placeholder={placeholder} disabled={disabled} onFocus={() => setIsFocused(true)} onBlur={() => setIsFocused(false)} className={cn( "flex h-9 w-full rounded-md border bg-transparent px-3 py-1 text-sm shadow-sm transition-colors", "border-input focus-visible:border-ring focus-visible:ring-ring/50", "file:border-0 file:bg-transparent file:text-sm file:font-medium", "placeholder:text-muted-foreground", "focus-visible:outline-none focus-visible:ring-1", "disabled:cursor-not-allowed disabled:opacity-50", "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40", "aria-invalid:border-destructive", error && "border-destructive", isFocused && !error && "ring-1 ring-ring", "[&_.PhoneInputCountry]:bg-transparent", "[&_.PhoneInputCountrySelect]:h-9", "[&_.PhoneInputCountrySelect]:px-2", "[&_.PhoneInputCountrySelect]:border-r", "[&_.PhoneInputCountrySelect]:border-input", "[&_.PhoneInputInput]:flex-1", "[&_.PhoneInputInput]:bg-transparent", "[&_.PhoneInputInput]:outline-none", "[&_.PhoneInputInput]:placeholder:text-muted-foreground", )} />

{description && !error && (

{description}

)} {error && (

{error}

)}

); } // Import z for the schema helper import * as z from "zod"; /** * Zod validation helper for phone numbers */ export const phoneSchema = (message = "Invalid phone number") => z.string().refine( (value) => !value || isValidPhoneNumber(value), message );4b:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","react-phone-number-input",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/react-phone-number-input","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"react-phone-number-input"}]]}]}],["$","li","libphonenumber-js",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/libphonenumber-js","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"libphonenumber-js"}]]}]}]]}],["$","$L4c",null,{"namespace":"@formscn","registryDependencies":["https://formscn.space/r/label.json"]}]]}],null]}],["$","$L4d",null,{"files":[{"path":"src/components/ui/phone-input.tsx","content":"$4e","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]