@giddaa-housing/ui 0.1.0 → 1.1.0

package/dist/phone-input.js

@@ -1,573 +1,244 @@
-// src/components/ui/phone-input.tsx
-import {
-  AsYouType,
-  getCountries,
-  getCountryCallingCode,
-  parsePhoneNumber
-} from "libphonenumber-js";
+"use client";
+import { t as cn } from "./cn-BI_4DMBf.js";
+import { useComponentSize } from "./size-context.js";
+import { Separator } from "./separator.js";
+import { InputGroup, InputGroupAddon, InputGroupInput } from "./input-group.js";
+import { Popover, PopoverContent, PopoverTrigger } from "./popover.js";
 import { CheckIcon, ChevronDownIcon, SearchIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
+import { AsYouType, getCountries, getCountryCallingCode, parsePhoneNumber } from "libphonenumber-js";
 import flags from "react-phone-number-input/flags";
-
-// src/lib/cn.ts
-import { clsx } from "clsx";
-import { extendTailwindMerge } from "tailwind-merge";
-var twMerge = extendTailwindMerge({
-  extend: {
-    classGroups: {
-      "font-size": [
-        {
-          text: [
-            "gdt-display",
-            "gdt-h1",
-            "gdt-h2",
-            "gdt-h3",
-            "gdt-h4",
-            "gdt-h5",
-            "gdt-xl",
-            "gdt-lg",
-            "gdt-md",
-            "gdt-sm",
-            "gdt-xs",
-            "gdt-subtext",
-            "gdt-capitalized"
-          ]
-        }
-      ]
-    }
-  }
-});
-function cn(...inputs) {
-  return twMerge(clsx(inputs));
-}
-
-// src/components/ui/input-group.tsx
-import { cva as cva2 } from "class-variance-authority";
-
-// src/components/ui/size-context.tsx
-import { createContext, useContext } from "react";
-import { Fragment, jsx } from "react/jsx-runtime";
-var SizeContext = createContext(void 0);
-function SizeProvider({
-  children,
-  size
-}) {
-  if (!size) {
-    return /* @__PURE__ */ jsx(Fragment, { children });
-  }
-  return /* @__PURE__ */ jsx(SizeContext.Provider, { value: size, children });
-}
-function useComponentSize(size, fallback = "md") {
-  const inheritedSize = useContext(SizeContext);
-  return size ?? inheritedSize ?? fallback;
-}
-
-// src/components/ui/input.tsx
-import { Input as InputPrimitive } from "@base-ui/react/input";
-import { cva } from "class-variance-authority";
-
-// src/components/ui/input-size-context.tsx
-import { createContext as createContext2, useContext as useContext2 } from "react";
-import { Fragment as Fragment2, jsx as jsx2 } from "react/jsx-runtime";
-var InputSizeContext = createContext2(
-  void 0
-);
-function InputSizeProvider({
-  children,
-  size
-}) {
-  if (!size) {
-    return /* @__PURE__ */ jsx2(Fragment2, { children });
-  }
-  return /* @__PURE__ */ jsx2(InputSizeContext.Provider, { value: size, children });
-}
-function useInputComponentSize(size, fallback = "md") {
-  const inheritedSize = useContext2(InputSizeContext);
-  return size ?? inheritedSize ?? fallback;
-}
-
-// src/components/ui/input.tsx
-import { jsx as jsx3 } from "react/jsx-runtime";
-var inputVariants = cva(
-  "flex w-full min-w-0 rounded-full border border-line bg-canvas text-fg-primary transition-[background-color,border-color,box-shadow,color] outline-none file:inline-flex file:border-0 file:bg-transparent file:font-normal file:text-fg-primary placeholder:text-fg-muted hover:border-line-strong focus-visible:border-line-focus focus-visible:inset-ring-1 inset-ring-line-focus disabled:pointer-events-none disabled:cursor-not-allowed disabled:border-line-subtle disabled:bg-surface disabled:text-fg-muted disabled:placeholder:text-fg-muted aria-invalid:border-line-danger aria-invalid:text-fg-danger aria-invalid:placeholder:text-fg-danger aria-invalid:shadow-none",
-  {
-    variants: {
-      size: {
-        sm: "h-8 px-3 text-gdt-xs font-normal file:text-gdt-xs",
-        md: "h-10 px-3.5 text-gdt-sm font-normal file:text-gdt-sm",
-        lg: "h-12 px-4 text-gdt-md font-normal file:text-gdt-md",
-        xl: "h-14 px-4.5 text-gdt-lg font-normal file:text-gdt-lg"
-      }
-    },
-    defaultVariants: {
-      size: "md"
-    }
-  }
-);
-function Input({ className, size, type, ...props }) {
-  const resolvedSize = useInputComponentSize(size);
-  return /* @__PURE__ */ jsx3(
-    InputPrimitive,
-    {
-      type,
-      "data-slot": "input",
-      "data-size": resolvedSize,
-      className: cn(inputVariants({ size: resolvedSize }), className),
-      ...props
-    }
-  );
-}
-
-// src/components/ui/input-group.tsx
-import { jsx as jsx4 } from "react/jsx-runtime";
-var inputGroupVariants = cva2(
-  "group/input-group relative flex w-full min-w-0 items-center rounded-full has-[textarea]:rounded-xl has-data-[align=block-end]:rounded-xl has-data-[align=block-start]:rounded-xl border border-line bg-canvas transition-[background-color,border-color,box-shadow,color] outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:border-line-subtle has-disabled:bg-surface has-disabled:text-fg-muted focus-within:border-line-focus focus-within:inset-ring-1 inset-ring-line-focus has-[[data-slot][aria-invalid=true]]:border-line-danger has-[[data-slot][aria-invalid=true]]:inset-shadow-none has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-start]]:[&>[data-slot=input-group-control]]:group-data-[size=sm]/input-group:pl-2 has-[>[data-align=inline-start]]:[&>[data-slot=input-group-control]]:group-data-[size=md]/input-group:pl-2.5 has-[>[data-align=inline-start]]:[&>[data-slot=input-group-control]]:group-data-[size=lg]/input-group:pl-3 has-[>[data-align=inline-start]]:[&>[data-slot=input-group-control]]:group-data-[size=xl]/input-group:pl-3 has-[>[data-align=inline-end]]:[&>[data-slot=input-group-control]]:group-data-[size=sm]/input-group:pr-2 has-[>[data-align=inline-end]]:[&>[data-slot=input-group-control]]:group-data-[size=md]/input-group:pr-2.5 has-[>[data-align=inline-end]]:[&>[data-slot=input-group-control]]:group-data-[size=lg]/input-group:pr-3 has-[>[data-align=inline-end]]:[&>[data-slot=input-group-control]]:group-data-[size=xl]/input-group:pr-3",
-  {
-    variants: {
-      size: {
-        sm: "h-8",
-        md: "h-10",
-        lg: "h-12",
-        xl: "h-14"
-      }
-    },
-    defaultVariants: {
-      size: "md"
-    }
-  }
-);
-function InputGroup({
-  className,
-  size,
-  ...props
-}) {
-  const inheritedSize = useComponentSize();
-  const resolvedSize = size ?? inheritedSize;
-  const componentSize = resolvedSize === "xl" ? void 0 : resolvedSize;
-  return /* @__PURE__ */ jsx4(SizeProvider, { size: componentSize, children: /* @__PURE__ */ jsx4(InputSizeProvider, { size: resolvedSize, children: /* @__PURE__ */ jsx4(
-    "div",
-    {
-      "data-slot": "input-group",
-      "data-size": resolvedSize,
-      role: "group",
-      className: cn(inputGroupVariants({ size: resolvedSize }), className),
-      ...props
-    }
-  ) }) });
-}
-var inputGroupAddonVariants = cva2(
-  "flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-gdt-sm font-normal text-fg-secondary select-none group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] group-data-[size=lg]/input-group:[&>svg:not([class*='size-'])]:size-4.5 group-data-[size=xl]/input-group:[&>svg:not([class*='size-'])]:size-5 [&>svg:not([class*='size-'])]:size-4",
-  {
-    variants: {
-      align: {
-        "inline-start": "order-first group-data-[size=sm]/input-group:pl-3 group-data-[size=md]/input-group:pl-3.5 group-data-[size=lg]/input-group:pl-4 group-data-[size=xl]/input-group:pl-4.5 has-[>button]:ml-[-0.3rem] has-[>kbd]:ml-[-0.15rem]",
-        "inline-end": "order-last group-data-[size=sm]/input-group:pr-3 group-data-[size=md]/input-group:pr-3.5 group-data-[size=lg]/input-group:pr-4 group-data-[size=xl]/input-group:pr-4.5 has-[>button]:mr-[-0.3rem] has-[>kbd]:mr-[-0.15rem]",
-        "block-start": "order-first w-full justify-start px-3 group-data-[size=md]/input-group:px-3.5 group-data-[size=lg]/input-group:px-4 group-data-[size=xl]/input-group:px-4.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2",
-        "block-end": "order-last w-full justify-start px-3 group-data-[size=md]/input-group:px-3.5 group-data-[size=lg]/input-group:px-4 group-data-[size=xl]/input-group:px-4.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2"
-      }
-    },
-    defaultVariants: {
-      align: "inline-start"
-    }
-  }
-);
-function InputGroupAddon({
-  className,
-  align = "inline-start",
-  ...props
-}) {
-  return (
-    // biome-ignore lint/a11y/useSemanticElements: addon is a structural wrapper for grouped input affordances.
-    // biome-ignore lint/a11y/useKeyWithClickEvents: click only forwards focus to the sibling input and is not a standalone action target.
-    /* @__PURE__ */ jsx4(
-      "div",
-      {
-        role: "group",
-        "data-slot": "input-group-addon",
-        "data-align": align,
-        className: cn(inputGroupAddonVariants({ align }), className),
-        onClick: (e) => {
-          if (e.target.closest("button")) {
-            return;
-          }
-          e.currentTarget.parentElement?.querySelector("input")?.focus();
-        },
-        ...props
-      }
-    )
-  );
-}
-var inputGroupButtonVariants = cva2(
-  "flex items-center gap-2 text-sm shadow-none rounded-full",
-  {
-    variants: {
-      size: {
-        xs: "h-6 gap-1 px-1.5 [&>svg:not([class*='size-'])]:size-3.5",
-        sm: "",
-        "icon-xs": "size-6 p-0 has-[>svg]:p-0",
-        "icon-sm": "size-8 p-0 has-[>svg]:p-0"
-      }
-    },
-    defaultVariants: {
-      size: "xs"
-    }
-  }
-);
-function InputGroupInput({
-  className,
-  size,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx4(
-    Input,
-    {
-      "data-slot": "input-group-control",
-      size,
-      className: cn(
-        "flex-1 rounded-none border-0 bg-transparent shadow-none inset-shadow-none  inset-ring-0 focus:border-transparent focus:shadow-none focus:inset-shadow-none focus-visible:border-transparent focus-visible:shadow-none focus-visible:ring-0 focus-visible:inset-ring-0 focus-visible:inset-shadow-none disabled:bg-transparent aria-invalid:ring-0 aria-invalid:inset-ring-0 dark:bg-transparent dark:disabled:bg-transparent",
-        className
-      ),
-      ...props
-    }
-  );
-}
-
-// src/components/ui/popover.tsx
-import { Popover as PopoverPrimitive } from "@base-ui/react/popover";
-import { jsx as jsx5, jsxs } from "react/jsx-runtime";
-function Popover({ ...props }) {
-  return /* @__PURE__ */ jsx5(PopoverPrimitive.Root, { "data-slot": "popover", ...props });
-}
-function PopoverTrigger({ ...props }) {
-  return /* @__PURE__ */ jsx5(PopoverPrimitive.Trigger, { "data-slot": "popover-trigger", ...props });
-}
-function PopoverContent({
-  className,
-  align = "center",
-  alignOffset = 0,
-  side = "bottom",
-  sideOffset = 6,
-  showArrow = true,
-  size = "md",
-  children,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx5(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx5(
-    PopoverPrimitive.Positioner,
-    {
-      align,
-      alignOffset,
-      side,
-      sideOffset,
-      className: "isolate z-50",
-      children: /* @__PURE__ */ jsxs(
-        PopoverPrimitive.Popup,
-        {
-          "data-slot": "popover-content",
-          className: cn(
-            "z-50 relative flex w-72 max-w-[calc(100vw-2rem)] origin-(--transform-origin) flex-col rounded-lg border-0 bg-surface-overlay py-4 text-gdt-sm text-fg-primary shadow-2 outline-hidden duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 has-[&_[data-slot=popover-footer]]:pb-0",
-            className
-          ),
-          ...props,
-          children: [
-            /* @__PURE__ */ jsx5(SizeProvider, { size, children }),
-            showArrow ? /* @__PURE__ */ jsx5(PopoverPrimitive.Arrow, { className: "relative block w-3 h-1.5 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-surface-overlay before:border before:border-line before:[transform:translate(-50%,50%)_rotate(45deg)]" }) : null
-          ]
-        }
-      )
-    }
-  ) });
-}
-
-// src/components/ui/separator.tsx
-import { Separator as SeparatorPrimitive } from "@base-ui/react/separator";
-import { jsx as jsx6 } from "react/jsx-runtime";
-function Separator({
-  className,
-  orientation = "horizontal",
-  dashed = false,
-  shade = "feint",
-  thickness = "default",
-  ...props
-}) {
-  return /* @__PURE__ */ jsx6(
-    SeparatorPrimitive,
-    {
-      "data-slot": "separator",
-      orientation,
-      className: cn(
-        "shrink-0 data-horizontal:h-0 data-horizontal:w-full data-vertical:w-0 data-vertical:self-stretch",
-        // style
-        dashed ? "border-dashed" : "border-solid",
-        // shade
-        shade === "feint" && "border-line-subtle",
-        shade === "deep" && "border-line",
-        // thickness
-        thickness === "hairline" && "data-horizontal:border-t-[0.5px] data-vertical:border-l-[0.5px]",
-        thickness === "default" && "data-horizontal:border-t data-vertical:border-l",
-        thickness === "thick" && "data-horizontal:border-t-2 data-vertical:border-l-2",
-        thickness === "extra-thick" && "data-horizontal:border-t-[3px] data-vertical:border-l-[3px]",
-        className
-      ),
-      ...props
-    }
-  );
-}
-
-// src/components/ui/phone-input.tsx
-import { jsx as jsx7, jsxs as jsxs2 } from "react/jsx-runtime";
-var regionNames = typeof Intl !== "undefined" && "DisplayNames" in Intl ? new Intl.DisplayNames(["en"], { type: "region" }) : void 0;
-var COUNTRIES = getCountries().map((code) => ({
-  code,
-  name: regionNames?.of(code) ?? code,
-  calling: getCountryCallingCode(code)
+//#region src/phone-input.tsx
+const regionNames = typeof Intl !== "undefined" && "DisplayNames" in Intl ? new Intl.DisplayNames(["en"], { type: "region" }) : void 0;
+const COUNTRIES = getCountries().map((code) => ({
+	code,
+	name: regionNames?.of(code) ?? code,
+	calling: getCountryCallingCode(code)
 })).sort((a, b) => a.name.localeCompare(b.name));
 function getNationalDigits(value) {
-  return value.replace(/\D/g, "");
+	return value.replace(/\D/g, "");
 }
 function formatNational(digits, country) {
-  if (!digits) return "";
-  return new AsYouType(country).input(digits);
+	if (!digits) return "";
+	return new AsYouType(country).input(digits);
 }
 function toE164(digits, country) {
-  if (!digits) return void 0;
-  return `+${getCountryCallingCode(country)}${digits}`;
+	if (!digits) return void 0;
+	return `+${getCountryCallingCode(country)}${digits}`;
 }
 function parseValue(value) {
-  if (!value) return { digits: "" };
-  try {
-    const parsed = parsePhoneNumber(value);
-    if (parsed?.nationalNumber) {
-      return { country: parsed.country, digits: parsed.nationalNumber };
-    }
-  } catch {
-  }
-  return { digits: "" };
-}
-var flagSizeVariants = {
-  sm: "h-3 w-[18px]",
-  md: "h-3.5 w-5",
-  lg: "h-4 w-6"
-};
-function CountryFlag({
-  country,
-  size,
-  className
-}) {
-  const Flag = flags[country];
-  return /* @__PURE__ */ jsx7(
-    "span",
-    {
-      className: cn(
-        "inline-flex shrink-0 items-center justify-center overflow-hidden rounded-[3px] bg-surface-raised [&>svg]:h-full [&>svg]:w-full [&>svg]:object-cover",
-        flagSizeVariants[size],
-        className
-      ),
-      children: Flag ? /* @__PURE__ */ jsx7(Flag, { title: country }) : /* @__PURE__ */ jsx7("span", { className: "text-gdt-xs text-fg-secondary", children: country })
-    }
-  );
-}
-function CountrySelect({
-  country,
-  size,
-  disabled,
-  onSelect
-}) {
-  const [open, setOpen] = React.useState(false);
-  const [query, setQuery] = React.useState("");
-  const searchRef = React.useRef(null);
-  React.useEffect(() => {
-    if (!open) return;
-    const frame = requestAnimationFrame(() => searchRef.current?.focus());
-    return () => cancelAnimationFrame(frame);
-  }, [open]);
-  const filtered = React.useMemo(() => {
-    const q = query.trim().toLowerCase();
-    if (!q) return COUNTRIES;
-    const normalized = q.replace(/^\+/, "");
-    return COUNTRIES.filter(
-      (entry) => entry.name.toLowerCase().includes(q) || entry.calling.includes(normalized) || entry.code.toLowerCase().includes(q)
-    );
-  }, [query]);
-  function handleOpenChange(next) {
-    setOpen(next);
-    if (!next) setQuery("");
-  }
-  return /* @__PURE__ */ jsxs2(Popover, { open, onOpenChange: handleOpenChange, children: [
-    /* @__PURE__ */ jsxs2(
-      PopoverTrigger,
-      {
-        disabled,
-        "data-slot": "phone-country-trigger",
-        className: cn(
-          "flex shrink-0 items-center gap-1.5 rounded-full font-normal text-fg-primary outline-none transition-colors select-none",
-          "focus-visible:text-fg-brand disabled:cursor-not-allowed disabled:text-fg-caption-placeholder",
-          size === "sm" && "text-gdt-xs",
-          size === "md" && "text-gdt-sm",
-          size === "lg" && "text-gdt-md"
-        ),
-        children: [
-          /* @__PURE__ */ jsx7(CountryFlag, { country, size }),
-          /* @__PURE__ */ jsxs2("span", { children: [
-            "+",
-            getCountryCallingCode(country)
-          ] }),
-          /* @__PURE__ */ jsx7(
-            ChevronDownIcon,
-            {
-              className: cn(
-                "text-fg-secondary transition-transform",
-                open && "rotate-180",
-                size === "lg" ? "size-4" : "size-3.5"
-              )
-            }
-          )
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsxs2(
-      PopoverContent,
-      {
-        showArrow: false,
-        align: "start",
-        alignOffset: 0,
-        sideOffset: 10,
-        className: "w-72 gap-0 overflow-hidden p-0",
-        children: [
-          /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-2 border-b border-line-subtle px-3.5 py-2.5", children: [
-            /* @__PURE__ */ jsx7(SearchIcon, { className: "size-4 shrink-0 text-fg-secondary" }),
-            /* @__PURE__ */ jsx7(
-              "input",
-              {
-                ref: searchRef,
-                value: query,
-                onChange: (event) => setQuery(event.target.value),
-                placeholder: "Search country",
-                className: "w-full bg-transparent text-gdt-sm text-fg-primary outline-none placeholder:text-fg-caption-placeholder"
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsx7("div", { className: "no-scrollbar max-h-64 overflow-y-auto py-1.5", children: filtered.length === 0 ? /* @__PURE__ */ jsx7("p", { className: "px-3.5 py-6 text-center text-gdt-sm text-fg-secondary", children: "No country found" }) : filtered.map((entry) => {
-            const selected = entry.code === country;
-            return /* @__PURE__ */ jsxs2(
-              "button",
-              {
-                type: "button",
-                onClick: () => {
-                  onSelect(entry.code);
-                  handleOpenChange(false);
-                },
-                className: cn(
-                  "flex w-full items-center gap-2.5 px-3.5 py-2 text-left text-gdt-sm outline-none transition-colors hover:bg-surface focus-visible:bg-surface",
-                  selected ? "font-medium text-fg-brand" : "text-fg-primary"
-                ),
-                children: [
-                  /* @__PURE__ */ jsx7(CountryFlag, { country: entry.code, size: "md" }),
-                  /* @__PURE__ */ jsx7("span", { className: "min-w-0 flex-1 truncate", children: entry.name }),
-                  /* @__PURE__ */ jsxs2("span", { className: "shrink-0 text-fg-secondary", children: [
-                    "+",
-                    entry.calling
-                  ] }),
-                  selected && /* @__PURE__ */ jsx7(CheckIcon, { className: "size-4 shrink-0 text-fg-brand" })
-                ]
-              },
-              entry.code
-            );
-          }) })
-        ]
-      }
-    )
-  ] });
-}
-function PhoneInput({
-  value,
-  onChange,
-  defaultCountry = "NG",
-  size,
-  disabled = false,
-  readOnly = false,
-  placeholder = "(0000) 000-0000",
-  className,
-  id,
-  name,
-  "aria-invalid": ariaInvalid
-}) {
-  const resolvedSize = useComponentSize(size);
-  const initial = React.useMemo(() => parseValue(value), []);
-  const [country, setCountry] = React.useState(
-    initial.country ?? defaultCountry
-  );
-  const [national, setNational] = React.useState(
-    () => formatNational(initial.digits, initial.country ?? defaultCountry)
-  );
-  React.useEffect(() => {
-    const currentDigits = getNationalDigits(national);
-    if (toE164(currentDigits, country) === value) return;
-    const next = parseValue(value);
-    const nextCountry = next.country ?? country;
-    setCountry(nextCountry);
-    setNational(formatNational(next.digits, nextCountry));
-  }, [value]);
-  function emit(digits, nextCountry) {
-    onChange?.(toE164(digits, nextCountry));
-  }
-  function handleInputChange(event) {
-    const digits = getNationalDigits(event.target.value);
-    setNational(formatNational(digits, country));
-    emit(digits, country);
-  }
-  function handleCountrySelect(nextCountry) {
-    const digits = getNationalDigits(national);
-    setCountry(nextCountry);
-    setNational(formatNational(digits, nextCountry));
-    emit(digits, nextCountry);
-  }
-  const dividerStateClasses = cn(
-    "group-hover/input-group:bg-line-strong",
-    "group-focus-within/input-group:bg-line-focus",
-    "group-has-[[aria-invalid=true]]/input-group:bg-line-danger",
-    "group-has-disabled/input-group:bg-line-subtle"
-  );
-  return /* @__PURE__ */ jsxs2(InputGroup, { size: resolvedSize, className, children: [
-    /* @__PURE__ */ jsxs2(InputGroupAddon, { align: "inline-start", className: "gap-2", children: [
-      /* @__PURE__ */ jsx7(
-        CountrySelect,
-        {
-          country,
-          size: resolvedSize,
-          disabled,
-          onSelect: handleCountrySelect
-        }
-      ),
-      /* @__PURE__ */ jsx7(
-        Separator,
-        {
-          orientation: "vertical",
-          shade: "deep",
-          className: cn("self-stretch transition-colors", dividerStateClasses)
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsx7(
-      InputGroupInput,
-      {
-        id,
-        name,
-        type: "tel",
-        inputMode: "tel",
-        autoComplete: "tel",
-        value: national,
-        onChange: handleInputChange,
-        placeholder,
-        disabled,
-        readOnly,
-        "aria-invalid": ariaInvalid || void 0,
-        className: "pl-0"
-      }
-    )
-  ] });
-}
-export {
-  PhoneInput
+	if (!value) return { digits: "" };
+	try {
+		const parsed = parsePhoneNumber(value);
+		if (parsed?.nationalNumber) return {
+			country: parsed.country,
+			digits: parsed.nationalNumber
+		};
+	} catch {}
+	return { digits: "" };
+}
+const flagSizeVariants = {
+	sm: "h-3 w-[18px]",
+	md: "h-3.5 w-5",
+	lg: "h-4 w-6"
 };
-//# sourceMappingURL=phone-input.js.map
+function CountryFlag({ country, size, className }) {
+	const Flag = flags[country];
+	return /* @__PURE__ */ jsx("span", {
+		className: cn("inline-flex shrink-0 items-center justify-center overflow-hidden rounded-[3px] bg-surface-raised [&>svg]:h-full [&>svg]:w-full [&>svg]:object-cover", flagSizeVariants[size], className),
+		children: Flag ? /* @__PURE__ */ jsx(Flag, { title: country }) : /* @__PURE__ */ jsx("span", {
+			className: "text-gdt-xs text-fg-secondary",
+			children: country
+		})
+	});
+}
+const ROW_HEIGHT = 40;
+const LIST_PADDING = 6;
+const OVERSCAN = 6;
+function CountryList({ items, country, onSelect }) {
+	const scrollRef = React.useRef(null);
+	const [viewport, setViewport] = React.useState(256);
+	const [scrollTop, setScrollTop] = React.useState(() => {
+		const index = items.findIndex((entry) => entry.code === country);
+		return index > 0 ? index * ROW_HEIGHT : 0;
+	});
+	React.useLayoutEffect(() => {
+		const el = scrollRef.current;
+		if (!el) return;
+		setViewport(el.clientHeight);
+		el.scrollTop = scrollTop;
+	}, []);
+	if (items.length === 0) return /* @__PURE__ */ jsx("p", {
+		className: "px-3.5 py-6 text-center text-gdt-sm text-fg-secondary",
+		children: "No country found"
+	});
+	const total = items.length;
+	const first = Math.max(0, Math.floor(scrollTop / ROW_HEIGHT) - OVERSCAN);
+	const last = Math.min(total, Math.ceil((scrollTop + viewport) / ROW_HEIGHT) + OVERSCAN);
+	const visible = items.slice(first, last);
+	return /* @__PURE__ */ jsx("div", {
+		ref: scrollRef,
+		onScroll: (event) => setScrollTop(event.currentTarget.scrollTop),
+		className: "no-scrollbar max-h-64 overflow-y-auto",
+		children: /* @__PURE__ */ jsx("div", {
+			className: "relative w-full",
+			style: { height: total * ROW_HEIGHT + LIST_PADDING * 2 },
+			children: visible.map((entry, i) => {
+				const index = first + i;
+				const selected = entry.code === country;
+				return /* @__PURE__ */ jsxs("button", {
+					type: "button",
+					style: {
+						position: "absolute",
+						top: index * ROW_HEIGHT + LIST_PADDING,
+						height: ROW_HEIGHT
+					},
+					onClick: () => onSelect(entry.code),
+					className: cn("flex w-full items-center gap-2.5 px-3.5 text-left text-gdt-sm outline-none transition-colors hover:bg-surface focus-visible:bg-surface", selected ? "font-medium text-fg-brand" : "text-fg-primary"),
+					children: [
+						/* @__PURE__ */ jsx(CountryFlag, {
+							country: entry.code,
+							size: "md"
+						}),
+						/* @__PURE__ */ jsx("span", {
+							className: "min-w-0 flex-1 truncate",
+							children: entry.name
+						}),
+						/* @__PURE__ */ jsxs("span", {
+							className: "shrink-0 text-fg-secondary",
+							children: ["+", entry.calling]
+						}),
+						selected && /* @__PURE__ */ jsx(CheckIcon, { className: "size-4 shrink-0 text-fg-brand" })
+					]
+				}, entry.code);
+			})
+		})
+	});
+}
+function CountrySelect({ country, size, disabled, onSelect, finalFocusRef }) {
+	const [open, setOpen] = React.useState(false);
+	const [query, setQuery] = React.useState("");
+	const searchRef = React.useRef(null);
+	const filtered = React.useMemo(() => {
+		const q = query.trim().toLowerCase();
+		if (!q) return COUNTRIES;
+		const normalized = q.replace(/^\+/, "");
+		return COUNTRIES.filter((entry) => entry.name.toLowerCase().includes(q) || entry.calling.includes(normalized) || entry.code.toLowerCase().includes(q));
+	}, [query]);
+	function handleOpenChange(next) {
+		setOpen(next);
+		if (!next) setQuery("");
+	}
+	function handleSelect(next) {
+		onSelect(next);
+		handleOpenChange(false);
+	}
+	return /* @__PURE__ */ jsxs(Popover, {
+		open,
+		onOpenChange: handleOpenChange,
+		children: [/* @__PURE__ */ jsxs(PopoverTrigger, {
+			disabled,
+			"data-slot": "phone-country-trigger",
+			className: cn("flex shrink-0 items-center gap-1.5 rounded-full font-normal text-fg-primary outline-none transition-colors select-none", "focus-visible:text-fg-brand disabled:cursor-not-allowed disabled:text-fg-caption-placeholder", size === "sm" && "text-gdt-xs", size === "md" && "text-gdt-sm", size === "lg" && "text-gdt-md"),
+			children: [
+				/* @__PURE__ */ jsx(CountryFlag, {
+					country,
+					size
+				}),
+				/* @__PURE__ */ jsxs("span", { children: ["+", getCountryCallingCode(country)] }),
+				/* @__PURE__ */ jsx(ChevronDownIcon, { className: cn("text-fg-secondary transition-transform", open && "rotate-180", size === "lg" ? "size-4" : "size-3.5") })
+			]
+		}), /* @__PURE__ */ jsxs(PopoverContent, {
+			showArrow: false,
+			align: "start",
+			alignOffset: 0,
+			sideOffset: 10,
+			finalFocus: finalFocusRef,
+			className: "w-72 gap-0 overflow-hidden p-0",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-2 border-b border-line-subtle px-3.5 py-2.5",
+				children: [/* @__PURE__ */ jsx(SearchIcon, { className: "size-4 shrink-0 text-fg-secondary" }), /* @__PURE__ */ jsx("input", {
+					ref: searchRef,
+					value: query,
+					onChange: (event) => setQuery(event.target.value),
+					placeholder: "Search country",
+					className: "w-full bg-transparent text-gdt-sm text-fg-primary outline-none placeholder:text-fg-caption-placeholder"
+				})]
+			}), /* @__PURE__ */ jsx(CountryList, {
+				items: filtered,
+				country,
+				onSelect: handleSelect
+			}, query)]
+		})]
+	});
+}
+function PhoneInput({ value, onChange, defaultCountry = "NG", size, disabled = false, readOnly = false, placeholder = "(0000) 000-0000", className, id, name, ref, "aria-invalid": ariaInvalid }) {
+	const resolvedSize = useComponentSize(size);
+	const inputRef = React.useRef(null);
+	const setInputRef = React.useCallback((node) => {
+		inputRef.current = node;
+		if (typeof ref === "function") ref(node);
+		else if (ref) ref.current = node;
+	}, [ref]);
+	const initial = React.useMemo(() => parseValue(value), []);
+	const [country, setCountry] = React.useState(initial.country ?? defaultCountry);
+	const [national, setNational] = React.useState(() => formatNational(initial.digits, initial.country ?? defaultCountry));
+	React.useEffect(() => {
+		if (toE164(getNationalDigits(national), country) === value) return;
+		const next = parseValue(value);
+		const nextCountry = next.country ?? country;
+		setCountry(nextCountry);
+		setNational(formatNational(next.digits, nextCountry));
+	}, [value]);
+	function emit(digits, nextCountry) {
+		onChange?.(toE164(digits, nextCountry));
+	}
+	function handleInputChange(event) {
+		const digits = getNationalDigits(event.target.value);
+		setNational(formatNational(digits, country));
+		emit(digits, country);
+	}
+	function handleCountrySelect(nextCountry) {
+		const digits = getNationalDigits(national);
+		setCountry(nextCountry);
+		setNational(formatNational(digits, nextCountry));
+		emit(digits, nextCountry);
+	}
+	const dividerStateClasses = cn("group-hover/input-group:bg-line-strong", "group-focus-within/input-group:bg-line-focus", "group-has-[[aria-invalid=true]]/input-group:bg-line-danger", "group-has-disabled/input-group:bg-line-subtle");
+	return /* @__PURE__ */ jsxs(InputGroup, {
+		size: resolvedSize,
+		className,
+		children: [/* @__PURE__ */ jsxs(InputGroupAddon, {
+			align: "inline-start",
+			className: "gap-2 self-stretch py-0",
+			children: [/* @__PURE__ */ jsx(CountrySelect, {
+				country,
+				size: resolvedSize,
+				disabled,
+				onSelect: handleCountrySelect,
+				finalFocusRef: inputRef
+			}), /* @__PURE__ */ jsx(Separator, {
+				orientation: "vertical",
+				shade: "deep",
+				className: cn("self-stretch transition-colors", dividerStateClasses)
+			})]
+		}), /* @__PURE__ */ jsx(InputGroupInput, {
+			ref: setInputRef,
+			id,
+			name,
+			type: "tel",
+			inputMode: "tel",
+			autoComplete: "tel",
+			value: national,
+			onChange: handleInputChange,
+			placeholder,
+			disabled,
+			readOnly,
+			"aria-invalid": ariaInvalid || void 0,
+			className: "pl-0"
+		})]
+	});
+}
+//#endregion
+export { PhoneInput };