50: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/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 51: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/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 52:T16b5,"use client"; import { CheckIcon, ChevronGrabberVerticalIcon, CircleXFilledIcon } from "blode-icons-react"; import * as React from "react"; import * as RPNInput from "react-phone-number-input"; import flags from "react-phone-number-input/flags"; import { cn } from "@/lib/utils"; import { Button } from "./button"; import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, } from "./command"; import { Input } from "./input"; import type { InputProps } from "./input"; import { Popover, PopoverContent, PopoverTrigger } from "./popover"; import { ScrollArea } from "./scroll-area"; interface CountrySelectOption { label: string; value?: RPNInput.Country; } interface CountrySelectProps { disabled?: boolean; onChange: (value?: RPNInput.Country) => void; options: CountrySelectOption[]; value?: RPNInput.Country; } export type PhoneInputProps = Omit< React.InputHTMLAttributes, "onChange" | "value" > & Omit, "onChange"> & { clearable?: boolean; clearClassName?: string; fallbackCountry?: RPNInput.Country; onChange?: (value: RPNInput.Value | "") => void; onClear?: () => void; ref?: React.Ref>; }; const PhoneNumberInput = RPNInput.default; const FlagComponent = ({ country, countryName, }: { country?: RPNInput.Country; countryName: string; }) => { const Flag = country ? flags[country] : undefined; return ( {Flag ? : null} ); }; const InputComponent = ({ className, inputClassName, ref, ...props }: InputProps & { inputClassName?: string; ref?: React.Ref }) => ( ); const CountrySelect = ({ disabled, onChange, options, value }: CountrySelectProps) => { const selectedCountryLabel = options.find((option) => option.value === value)?.label ?? "Select country"; return ( event.stopPropagation()}> No country found. {options.map((option) => { if (!option.value) { return null; } return ( onChange(option.value)} > {option.label} +{RPNInput.getCountryCallingCode(option.value)} ); })} ); }; const PhoneInput = ({ className, clearClassName, clearable, defaultCountry, fallbackCountry = "US", onChange, onClear, placeholder = "Enter phone number", ref, ...props }: PhoneInputProps) => { const hasValue = Boolean(props.value); const handleChange = React.useCallback( (value?: RPNInput.Value) => { onChange?.(value ?? ""); }, [onChange], ); const handleClear = React.useCallback(() => { onClear?.(); if (!onClear) { onChange?.(""); } }, [onClear, onChange]); return (

{clearable && hasValue ? (

) : null}

); }; export { PhoneInput }; 4f:["$","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","blode-icons-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/blode-icons-react","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":"blode-icons-react"}]]}]}],["$","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"}]]}]}]]}],["$","$L50",null,{"namespace":"@blode","registryDependencies":["button","command","input","popover","scroll-area"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"ui/phone-input.tsx","content":"$52","type":"registry:ui","target":""}],"className":"h-[70svh] min-h-80"}]]}]