@giddaa-housing/ui 0.1.0 → 1.0.0

package/dist/phone-input.js

@@ -1,4 +1,29 @@
-// src/components/ui/phone-input.tsx
+"use client";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger
+} from "./chunk-JVLUBAPB.js";
+import {
+  Separator
+} from "./chunk-CHII2QHH.js";
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupInput
+} from "./chunk-6ZSGQHH2.js";
+import "./chunk-KSMDANKI.js";
+import "./chunk-MEKCCOP5.js";
+import "./chunk-3ACQVT7A.js";
+import "./chunk-B4H6RNDH.js";
+import {
+  useComponentSize
+} from "./chunk-HL3ZSYES.js";
+import {
+  cn
+} from "./chunk-Y4TTYVNE.js";
+
+// src/phone-input.tsx
 import {
   AsYouType,
   getCountries,
@@ -8,314 +33,7 @@ import {
 import { CheckIcon, ChevronDownIcon, SearchIcon } from "lucide-react";
 import * as React from "react";
 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";
+import { jsx, jsxs } 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,
@@ -355,7 +73,7 @@ function CountryFlag({
   className
 }) {
   const Flag = flags[country];
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx(
     "span",
     {
       className: cn(
@@ -363,7 +81,83 @@ function CountryFlag({
         flagSizeVariants[size],
         className
       ),
-      children: Flag ? /* @__PURE__ */ jsx7(Flag, { title: country }) : /* @__PURE__ */ jsx7("span", { className: "text-gdt-xs text-fg-secondary", children: country })
+      children: Flag ? /* @__PURE__ */ jsx(Flag, { title: country }) : /* @__PURE__ */ jsx("span", { className: "text-gdt-xs text-fg-secondary", children: country })
+    }
+  );
+}
+var ROW_HEIGHT = 40;
+var LIST_PADDING = 6;
+var 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
+            );
+          })
+        }
+      )
     }
   );
 }
@@ -371,16 +165,12 @@ function CountrySelect({
   country,
   size,
   disabled,
-  onSelect
+  onSelect,
+  finalFocusRef
 }) {
   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;
@@ -393,8 +183,12 @@ function CountrySelect({
     setOpen(next);
     if (!next) setQuery("");
   }
-  return /* @__PURE__ */ jsxs2(Popover, { open, onOpenChange: handleOpenChange, children: [
-    /* @__PURE__ */ jsxs2(
+  function handleSelect(next) {
+    onSelect(next);
+    handleOpenChange(false);
+  }
+  return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: handleOpenChange, children: [
+    /* @__PURE__ */ jsxs(
       PopoverTrigger,
       {
         disabled,
@@ -407,12 +201,12 @@ function CountrySelect({
           size === "lg" && "text-gdt-md"
         ),
         children: [
-          /* @__PURE__ */ jsx7(CountryFlag, { country, size }),
-          /* @__PURE__ */ jsxs2("span", { children: [
+          /* @__PURE__ */ jsx(CountryFlag, { country, size }),
+          /* @__PURE__ */ jsxs("span", { children: [
             "+",
             getCountryCallingCode(country)
           ] }),
-          /* @__PURE__ */ jsx7(
+          /* @__PURE__ */ jsx(
             ChevronDownIcon,
             {
               className: cn(
@@ -425,18 +219,19 @@ function CountrySelect({
         ]
       }
     ),
-    /* @__PURE__ */ jsxs2(
+    /* @__PURE__ */ jsxs(
       PopoverContent,
       {
         showArrow: false,
         align: "start",
         alignOffset: 0,
         sideOffset: 10,
+        finalFocus: finalFocusRef,
         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(
+          /* @__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,
@@ -447,33 +242,15 @@ function CountrySelect({
               }
             )
           ] }),
-          /* @__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
-            );
-          }) })
+          /* @__PURE__ */ jsx(
+            CountryList,
+            {
+              items: filtered,
+              country,
+              onSelect: handleSelect
+            },
+            query
+          )
         ]
       }
     )
@@ -490,9 +267,19 @@ function PhoneInput({
   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
@@ -528,18 +315,19 @@ function PhoneInput({
     "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(
+  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
+          onSelect: handleCountrySelect,
+          finalFocusRef: inputRef
         }
       ),
-      /* @__PURE__ */ jsx7(
+      /* @__PURE__ */ jsx(
         Separator,
         {
           orientation: "vertical",
@@ -548,9 +336,10 @@ function PhoneInput({
         }
       )
     ] }),
-    /* @__PURE__ */ jsx7(
+    /* @__PURE__ */ jsx(
       InputGroupInput,
       {
+        ref: setInputRef,
         id,
         name,
         type: "tel",