@vamos-ui/react 0.0.0-stage → 0.2.0

package/dist/components/pagination.js

@@ -0,0 +1,174 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { ChevronDown, ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react";
+import { cn } from "../lib/cn.js";
+import { useLabels } from "../lib/labels.js";
+import { useFormat } from "../lib/locale.js";
+import { useLink } from "../lib/provider.js";
+import { controlVariants } from "../lib/variants.js";
+import { buttonVariants } from "./button.js";
+import { Spinner } from "./spinner.js";
+const paginationLabels = {
+    label: "Pagination",
+    previous: "Previous",
+    next: "Next",
+    previousPage: "Previous page",
+    nextPage: "Next page",
+    goTo: "Page {page}",
+    page: "Page {page} of {total}",
+    range: "{from}–{to} of {total}",
+    empty: "No results",
+    pageSize: "Rows per page",
+    morePages: "More pages",
+};
+/**
+ * The page numbers to render, with ellipsis markers. The length stays constant while paging
+ * (no jumping buttons): `paginationRange({ page: 6, pageCount: 20 })` → `[1, "ellipsis-start", 5, 6, 7, "ellipsis-end", 20]`.
+ * A gap of exactly one page shows the page instead of "…".
+ */
+export function paginationRange({ page, pageCount, siblingCount = 1, boundaryCount = 1 }) {
+    const count = Math.max(0, Math.floor(pageCount));
+    if (count === 0)
+        return [];
+    const current = Math.min(Math.max(1, Math.floor(page)), count);
+    const range = (a, b) => Array.from({ length: Math.max(0, b - a + 1) }, (_, i) => a + i);
+    // boundaries + siblings + current + 2 ellipses
+    const total = boundaryCount * 2 + siblingCount * 2 + 3;
+    if (count <= total)
+        return range(1, count);
+    const startPages = range(1, Math.min(boundaryCount, count));
+    const endPages = range(Math.max(count - boundaryCount + 1, boundaryCount + 1), count);
+    const siblingsStart = Math.max(Math.min(current - siblingCount, count - boundaryCount - siblingCount * 2 - 1), boundaryCount + 2);
+    const siblingsEnd = Math.min(Math.max(current + siblingCount, boundaryCount + siblingCount * 2 + 2), count - boundaryCount - 1);
+    const out = [...startPages];
+    if (siblingsStart > boundaryCount + 2)
+        out.push("ellipsis-start");
+    else if (boundaryCount + 1 < count - boundaryCount)
+        out.push(boundaryCount + 1);
+    out.push(...range(siblingsStart, siblingsEnd));
+    if (siblingsEnd < count - boundaryCount - 1)
+        out.push("ellipsis-end");
+    else if (count - boundaryCount > boundaryCount)
+        out.push(count - boundaryCount);
+    out.push(...endPages);
+    return out;
+}
+/** Memoised `paginationRange` for components. */
+export function usePaginationRange(options) {
+    const { page, pageCount, siblingCount, boundaryCount } = options;
+    return React.useMemo(() => paginationRange({ page, pageCount, siblingCount, boundaryCount }), [page, pageCount, siblingCount, boundaryCount]);
+}
+const SizeContext = React.createContext("md");
+const itemSize = {
+    sm: "h-8 min-w-8 px-2 text-[13px] rounded-ui-sm [&_svg]:size-3.5",
+    md: "h-(--control-h) min-w-(--control-h) px-2.5 text-sm rounded-ui [&_svg]:size-4",
+};
+/** The `<ul>` of page items. */
+export const PaginationList = React.forwardRef(function PaginationList({ className, ...props }, ref) {
+    return _jsx("ul", { ref: ref, "data-slot": "pagination-list", className: cn("flex items-center gap-1", className), ...props });
+});
+/** One `<li>`. */
+export const PaginationItem = React.forwardRef(function PaginationItem({ className, ...props }, ref) {
+    return _jsx("li", { ref: ref, "data-slot": "pagination-item", className: cn("inline-flex", className), ...props });
+});
+/** A page number, or the shell for Previous / Next. Router `Link` when `href` is set, else a button. */
+export const PaginationLink = React.forwardRef(function PaginationLink({ href, isActive, disabled, loading, className, children, onClick, ...props }, ref) {
+    const Link = useLink();
+    const size = React.useContext(SizeContext);
+    const classes = cn(buttonVariants({ variant: "ghost" }), itemSize[size], "tabular font-normal text-fg-muted hover:text-fg", isActive && "bg-selected font-semibold text-fg hover:bg-selected", className);
+    const content = loading ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "invisible", children: children }), _jsx(Spinner, { size: "xs", className: "absolute" })] })) : (children);
+    if (href !== undefined && !disabled) {
+        return (_jsx(Link, { ref: ref, href: href, "aria-current": isActive ? "page" : undefined, "aria-busy": loading || undefined, className: classes, "data-slot": "pagination-link", onClick: onClick, ...props, children: content }));
+    }
+    if (href !== undefined && disabled) {
+        // A disabled link: no href, so it isn't focusable or followable.
+        return (_jsx("a", { ref: ref, role: "link", "aria-disabled": "true", className: classes, "data-slot": "pagination-link", ...props, children: content }));
+    }
+    return (_jsx("button", { ref: ref, type: "button", "aria-current": isActive ? "page" : undefined, "aria-busy": loading || undefined, disabled: disabled, className: classes, "data-slot": "pagination-link", onClick: onClick, ...props, children: content }));
+});
+/** Previous-page control. The arrow flips in RTL. */
+export const PaginationPrevious = React.forwardRef(function PaginationPrevious({ showLabel, labels, className, ...props }, ref) {
+    const t = useLabels("pagination", paginationLabels, labels);
+    return (_jsxs(PaginationLink, { ref: ref, "aria-label": t("previousPage"), className: cn(showLabel && "gap-1 ps-2 pe-3", className), "data-slot": "pagination-previous", ...props, children: [_jsx(ChevronLeft, { "aria-hidden": true, className: "rtl:-scale-x-100" }), showLabel ? _jsx("span", { children: t("previous") }) : null] }));
+});
+/** Next-page control. The arrow flips in RTL. */
+export const PaginationNext = React.forwardRef(function PaginationNext({ showLabel, labels, className, ...props }, ref) {
+    const t = useLabels("pagination", paginationLabels, labels);
+    return (_jsxs(PaginationLink, { ref: ref, "aria-label": t("nextPage"), className: cn(showLabel && "gap-1 ps-3 pe-2", className), "data-slot": "pagination-next", ...props, children: [showLabel ? _jsx("span", { children: t("next") }) : null, _jsx(ChevronRight, { "aria-hidden": true, className: "rtl:-scale-x-100" })] }));
+});
+/** "…" between page numbers. */
+export function PaginationEllipsis({ className, labels, ...props }) {
+    const t = useLabels("pagination", paginationLabels, labels);
+    const size = React.useContext(SizeContext);
+    return (_jsxs("span", { "data-slot": "pagination-ellipsis", className: cn("inline-flex items-center justify-center text-fg-subtle", size === "sm" ? "h-8 w-6 [&_svg]:size-3.5" : "h-(--control-h) w-7 [&_svg]:size-4", className), ...props, children: [_jsx(MoreHorizontal, { "aria-hidden": true }), _jsx("span", { className: "sr-only", children: t("morePages") })] }));
+}
+/**
+ * Page through a long list. 1-based `page`, props line up with TanStack Table state.
+ *
+ * ```tsx
+ * <Pagination page={page} pageCount={52} onPageChange={setPage} />
+ * <Pagination page={3} pageCount={12} getHref={(p) => `/blog?page=${p}`} />   // SEO links
+ * ```
+ *
+ * Moving focus to the top of the list after a page change is the consumer's job.
+ */
+export const Pagination = React.forwardRef(function Pagination({ page, pageCount, onPageChange, getHref, siblingCount, boundaryCount, variant = "numbers", size = "md", hideOnSinglePage = true, loading, labels, className, ...props }, ref) {
+    const t = useLabels("pagination", paginationLabels, labels);
+    const range = usePaginationRange({ page, pageCount, siblingCount, boundaryCount });
+    if (pageCount < 1 || (hideOnSinglePage && pageCount <= 1))
+        return null;
+    const current = Math.min(Math.max(1, page), pageCount);
+    const go = (p) => (e) => {
+        if (loading) {
+            e.preventDefault();
+            return;
+        }
+        if (p !== current)
+            onPageChange?.(p);
+    };
+    const linkProps = (p) => (getHref ? { href: getHref(p) } : {});
+    const compact = (_jsxs("span", { className: "tabular px-2 text-[13px] text-fg-muted", "aria-live": "polite", children: [_jsx("span", { className: "sr-only", children: t("page", { page: current, total: pageCount }) }), _jsxs("span", { "aria-hidden": true, children: [_jsx("span", { className: "font-medium text-fg", children: current }), " / ", pageCount] })] }));
+    return (_jsx(SizeContext.Provider, { value: size, children: _jsx("nav", { ref: ref, "aria-label": t("label"), "data-slot": "pagination", "data-variant": variant, className: cn("flex", className), ...props, children: _jsxs(PaginationList, { children: [_jsx(PaginationItem, { children: _jsx(PaginationPrevious, { disabled: current <= 1 || loading, onClick: go(current - 1), showLabel: variant === "simple", labels: labels, ...linkProps(current - 1) }) }), variant === "numbers"
+                        ? range.map((item) => typeof item === "number" ? (_jsx(PaginationItem, { className: "max-sm:hidden", children: _jsx(PaginationLink, { isActive: item === current, loading: loading && item === current, "aria-label": t("goTo", { page: item }), onClick: go(item), ...linkProps(item), children: item }) }, item)) : (_jsx(PaginationItem, { className: "max-sm:hidden", children: _jsx(PaginationEllipsis, { labels: labels }) }, item)))
+                        : null, variant === "numbers" ? _jsx(PaginationItem, { className: "sm:hidden", children: compact }) : null, variant === "compact" ? _jsx(PaginationItem, { children: compact }) : null, _jsx(PaginationItem, { children: _jsx(PaginationNext, { disabled: current >= pageCount || loading, onClick: go(current + 1), showLabel: variant === "simple", labels: labels, ...linkProps(current + 1) }) })] }) }) }));
+});
+/**
+ * The table footer: "1–20 of 312" + rows per page + page numbers. Changing the page size keeps the
+ * first visible row on screen (the page is recomputed) — the consumer receives both callbacks.
+ */
+export const PaginationBar = React.forwardRef(function PaginationBar({ total, pageSize, pageSizeOptions = [10, 20, 50, 100], onPageSizeChange, page, onPageChange, labels, size = "md", className, style, id, ...props }, ref) {
+    const t = useLabels("pagination", paginationLabels, labels);
+    const f = useFormat();
+    const selectId = React.useId();
+    const pageCount = Math.max(1, Math.ceil(total / Math.max(1, pageSize)));
+    const current = Math.min(Math.max(1, page), pageCount);
+    const from = total === 0 ? 0 : (current - 1) * pageSize + 1;
+    const to = Math.min(total, current * pageSize);
+    const options = pageSizeOptions.includes(pageSize) || pageSizeOptions.length === 0 ? pageSizeOptions : [...pageSizeOptions, pageSize].sort((a, b) => a - b);
+    return (_jsxs("div", { ref: ref, id: id, style: style, "data-slot": "pagination-bar", className: cn("flex flex-wrap items-center gap-x-6 gap-y-2 text-[13px] text-fg-muted", className), children: [_jsx("p", { className: "tabular me-auto", "aria-live": "polite", children: total === 0 ? t("empty") : t("range", { from: f.number(from), to: f.number(to), total: f.number(total) }) }), options.length > 0 && onPageSizeChange ? (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("label", { htmlFor: selectId, className: "whitespace-nowrap", children: t("pageSize") }), _jsxs("div", { className: "relative", children: [_jsx("select", { id: selectId, value: pageSize, onChange: (e) => {
+                                    const next = Number(e.target.value);
+                                    onPageSizeChange(next);
+                                    // keep the first visible row on screen
+                                    const nextPage = Math.floor((from > 0 ? from - 1 : 0) / next) + 1;
+                                    if (nextPage !== current)
+                                        onPageChange?.(nextPage);
+                                }, className: cn(controlVariants({ size: "sm" }), "tabular w-auto appearance-none pe-7 text-fg"), children: options.map((o) => (_jsx("option", { value: o, children: f.number(o) }, o))) }), _jsx(ChevronDown, { "aria-hidden": true, className: "pointer-events-none absolute end-2 top-1/2 size-3.5 -translate-y-1/2 text-fg-subtle" })] })] })) : null, _jsx(Pagination, { page: current, pageCount: pageCount, onPageChange: onPageChange, labels: labels, size: size, hideOnSinglePage: false, ...props })] }));
+});
+/** Previous / Next for cursor APIs where the total is unknown. */
+export const CursorPagination = React.forwardRef(function CursorPagination({ hasPrev, hasNext, onPrev, onNext, loading, status, size = "md", labels, className, ...props }, ref) {
+    const t = useLabels("pagination", paginationLabels, labels);
+    const [pressed, setPressed] = React.useState(null);
+    React.useEffect(() => {
+        if (!loading)
+            setPressed(null);
+    }, [loading]);
+    const btn = cn(buttonVariants({ variant: "secondary", size: size === "sm" ? "sm" : "md" }), "gap-1");
+    return (_jsxs("nav", { ref: ref, "aria-label": t("label"), "data-slot": "cursor-pagination", className: cn("flex items-center gap-3", className), ...props, children: [_jsxs("button", { type: "button", className: cn(btn, "ps-2.5"), disabled: !hasPrev || loading, "aria-busy": (loading && pressed === "prev") || undefined, onClick: () => {
+                    setPressed("prev");
+                    onPrev?.();
+                }, children: [loading && pressed === "prev" ? _jsx(Spinner, { size: "xs" }) : _jsx(ChevronLeft, { "aria-hidden": true, className: "rtl:-scale-x-100" }), t("previous")] }), status ? _jsx("span", { className: "tabular text-[13px] text-fg-muted", children: status }) : null, _jsxs("button", { type: "button", className: cn(btn, "pe-2.5"), disabled: !hasNext || loading, "aria-busy": (loading && pressed === "next") || undefined, onClick: () => {
+                    setPressed("next");
+                    onNext?.();
+                }, children: [t("next"), loading && pressed === "next" ? _jsx(Spinner, { size: "xs" }) : _jsx(ChevronRight, { "aria-hidden": true, className: "rtl:-scale-x-100" })] })] }));
+});

package/dist/components/phone-input.d.ts

@@ -0,0 +1,49 @@
+import * as React from "react";
+import { type BaseFormattedProps } from "./formatted-input.js";
+type PhoneLib = typeof import("libphonenumber-js/min");
+/**
+ * Loads the phone metadata (`libphonenumber-js/min`, ~80 kB) once. PhoneInput calls it on mount;
+ * call it earlier (e.g. on hover of "Add contact") to have formatting ready on first keystroke.
+ */
+export declare function preloadPhoneInput(): Promise<PhoneLib>;
+declare const phoneInputLabels: {
+    country: string;
+    suggested: string;
+    allCountries: string;
+    invalid: string;
+    invalidFor: string;
+    tooShort: string;
+    tooLong: string;
+};
+export type PhoneInputLabels = typeof phoneInputLabels;
+export interface PhoneInputProps extends BaseFormattedProps<string | null> {
+    /** Selected country (ISO 3166-1 alpha-2), controlled. */
+    country?: string;
+    /** Initial country. Default `"TR"` for Turkish locales, else the locale's region, else `"US"`. */
+    defaultCountry?: string;
+    onCountryChange?: (country: string) => void;
+    /** Limit the country list. */
+    countries?: string[];
+    /** Shown first, under "Suggested". */
+    preferredCountries?: string[];
+    /**
+     * How a complete number is shown after blur: `"national"` ("0532 123 45 67") when it belongs to
+     * the selected country, or `"international"` ("+90 532 123 45 67"). Default `"national"`.
+     */
+    display?: "national" | "international";
+    /** Hide the country picker (single-country forms). */
+    hideCountry?: boolean;
+    labels?: Partial<PhoneInputLabels>;
+}
+/**
+ * Phone number entry with a country picker. Formats as you type for the selected country,
+ * accepts what people actually type ("0532…", "532…", "90532…", "+90 (532)…", "0090…") and
+ * emits **E.164** (`"+905321234567"`). Typing `+` and a calling code switches the country.
+ * Parsing uses `libphonenumber-js` (min metadata), loaded lazily.
+ *
+ * ```tsx
+ * <Field label="Mobile"><PhoneInput defaultCountry="TR" onValueChange={(e164) => save(e164)} /></Field>
+ * ```
+ */
+export declare const PhoneInput: React.ForwardRefExoticComponent<PhoneInputProps & React.RefAttributes<HTMLInputElement>>;
+export {};

package/dist/components/phone-input.js

@@ -0,0 +1,266 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import * as React from "react";
+import { ChevronDown } from "lucide-react";
+import { cn } from "../lib/cn.js";
+import { useComposedRefs } from "../lib/compose-refs.js";
+import { useLabels } from "../lib/labels.js";
+import { useLocale } from "../lib/locale.js";
+import { compareText } from "../lib/text.js";
+import { useControllableState } from "../lib/use-controllable-state.js";
+import { useFormattedInput } from "../lib/use-formatted-input.js";
+import { Input } from "./input.js";
+import { WithoutFieldName, useFormattedValidity, useSubmitName } from "./formatted-input.js";
+let libPromise;
+let libLoaded = null;
+/**
+ * Loads the phone metadata (`libphonenumber-js/min`, ~80 kB) once. PhoneInput calls it on mount;
+ * call it earlier (e.g. on hover of "Add contact") to have formatting ready on first keystroke.
+ */
+export function preloadPhoneInput() {
+    libPromise ??= import("libphonenumber-js/min").then((m) => {
+        const lib = (m.default?.AsYouType ? m.default : m);
+        libLoaded = lib;
+        return lib;
+    });
+    return libPromise;
+}
+const phoneInputLabels = {
+    country: "Country",
+    suggested: "Suggested",
+    allCountries: "All countries",
+    invalid: "Enter a valid phone number",
+    invalidFor: "Enter a valid phone number for {country}",
+    tooShort: "This number is too short",
+    tooLong: "This number is too long",
+};
+function regionOfLocale(locale) {
+    try {
+        return new Intl.Locale(locale).maximize().region;
+    }
+    catch {
+        return undefined;
+    }
+}
+const accept = (ch) => (ch >= "0" && ch <= "9") || ch === "+";
+/**
+ * Phone number entry with a country picker. Formats as you type for the selected country,
+ * accepts what people actually type ("0532…", "532…", "90532…", "+90 (532)…", "0090…") and
+ * emits **E.164** (`"+905321234567"`). Typing `+` and a calling code switches the country.
+ * Parsing uses `libphonenumber-js` (min metadata), loaded lazily.
+ *
+ * ```tsx
+ * <Field label="Mobile"><PhoneInput defaultCountry="TR" onValueChange={(e164) => save(e164)} /></Field>
+ * ```
+ */
+export const PhoneInput = React.forwardRef(function PhoneInput(props, forwardedRef) {
+    const { country: countryProp, defaultCountry, onCountryChange, countries, preferredCountries, display: displayMode = "national", hideCountry, value, defaultValue, onValueChange, validateOn = "blur", onValidate, mono, labels, name, invalid, inputClassName, onBlur, onKeyDown, disabled, readOnly, size, ...rest } = props;
+    const { locale } = useLocale();
+    const t = useLabels("phoneInput", phoneInputLabels, labels);
+    const [lib, setLib] = React.useState(libLoaded);
+    const libRef = React.useRef(lib);
+    libRef.current = lib;
+    const fallbackCountry = (defaultCountry ?? (locale.toLowerCase().startsWith("tr") ? "TR" : regionOfLocale(locale)) ?? "US").toUpperCase();
+    const [country, setCountry] = useControllableState({ value: countryProp?.toUpperCase(), defaultValue: fallbackCountry, onChange: onCountryChange, name: "PhoneInput" });
+    const countryRef = React.useRef(country);
+    countryRef.current = country;
+    const v = useFormattedValidity(validateOn, onValidate);
+    const regionNames = React.useMemo(() => {
+        try {
+            return new Intl.DisplayNames([locale], { type: "region" });
+        }
+        catch {
+            return null;
+        }
+    }, [locale]);
+    const countryName = (c) => regionNames?.of(c) ?? c;
+    /* ---------------- parsing (pure helpers over the loaded lib) ---------------- */
+    const digitsOf = (s) => {
+        let plus = /^\s*\+/.test(s);
+        let d = s.replace(/\D/g, "");
+        if (!plus && d.startsWith("00")) {
+            plus = true;
+            d = d.slice(2);
+        }
+        return { plus, d };
+    };
+    const parseNumber = (text) => {
+        const l = libRef.current;
+        if (!l)
+            return undefined;
+        const { plus, d } = digitsOf(text);
+        if (!d)
+            return undefined;
+        const c = countryRef.current;
+        const primary = plus ? l.parsePhoneNumberFromString(`+${d}`) : l.parsePhoneNumberFromString(d, c);
+        if (primary?.isValid())
+            return primary;
+        if (!plus) {
+            // "90532…" with the calling code but without "+"
+            const alt = l.parsePhoneNumberFromString(`+${d}`);
+            if (alt?.isValid())
+                return alt;
+        }
+        return primary;
+    };
+    const format = (typed) => {
+        const { plus, d } = digitsOf(typed);
+        const l = libRef.current;
+        if (!d)
+            return plus ? "+" : "";
+        if (!l)
+            return (plus ? "+" : "") + d.slice(0, 15);
+        if (plus)
+            return new l.AsYouType().input(`+${d.slice(0, 15)}`);
+        return new l.AsYouType(countryRef.current).input(d.slice(0, 17));
+    };
+    const parse = (display) => {
+        const l = libRef.current;
+        const { plus, d } = digitsOf(display);
+        if (!d)
+            return null;
+        if (!l)
+            return plus && d.length >= 7 ? `+${d}` : null;
+        const p = parseNumber(display);
+        return p && p.isPossible() ? p.number : null;
+    };
+    const pretty = (display) => {
+        const p = parseNumber(display);
+        if (!p || !p.isValid())
+            return display;
+        return displayMode === "national" && p.country === countryRef.current ? p.formatNational() : p.formatInternational();
+    };
+    const toDisplay = (raw) => {
+        if (!raw)
+            return "";
+        if (!libRef.current)
+            return raw;
+        return pretty(raw.startsWith("+") ? raw : `+${raw}`);
+    };
+    const check = (display) => {
+        const l = libRef.current;
+        const { d } = digitsOf(display);
+        if (!d)
+            return { valid: true };
+        if (!l)
+            return d.length >= 7 ? { valid: true } : { valid: false, reason: "tooShort", message: t("tooShort") };
+        const p = parseNumber(display);
+        if (p?.isValid())
+            return { valid: true };
+        const { plus } = digitsOf(display);
+        const len = plus ? l.validatePhoneNumberLength(`+${d}`) : l.validatePhoneNumberLength(d, countryRef.current);
+        if (len === "TOO_SHORT")
+            return { valid: false, reason: "tooShort", message: t("tooShort") };
+        if (len === "TOO_LONG")
+            return { valid: false, reason: "tooLong", message: t("tooLong") };
+        return { valid: false, reason: "invalid", message: plus ? t("invalid") : t("invalidFor", { country: countryName(countryRef.current) }) };
+    };
+    const engine = useFormattedInput({
+        value,
+        defaultValue,
+        accept,
+        format,
+        parse,
+        toDisplay,
+        formatOnBlur: pretty,
+        onValueChange: (raw, formatted) => {
+            const c = check(formatted);
+            v.report(c, "change");
+            // "+44 20…" typed into a TR field: follow the number's country.
+            const l = libRef.current;
+            if (l && formatted.trim().startsWith("+")) {
+                const detected = parseNumber(formatted)?.country;
+                if (detected && detected !== countryRef.current && (!countries || countries.includes(detected)))
+                    setCountry(detected);
+            }
+            onValueChange?.(raw, { valid: c.valid, reason: c.reason, formatted, kind: raw ? parseNumber(formatted)?.country : undefined });
+        },
+    });
+    const ref = useComposedRefs(forwardedRef, engine.ref);
+    const submitName = useSubmitName(name);
+    const engineRef = React.useRef(engine);
+    engineRef.current = engine;
+    // Load metadata, then re-format whatever is there.
+    React.useEffect(() => {
+        if (libRef.current)
+            return;
+        let alive = true;
+        preloadPhoneInput().then((l) => {
+            if (!alive)
+                return;
+            libRef.current = l;
+            setLib(l);
+            const e = engineRef.current;
+            const raw = e.raw;
+            if (raw)
+                e.setDisplay(toDisplay(raw));
+            else if (e.display)
+                e.setDisplay(e.display);
+        });
+        return () => {
+            alive = false;
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    const changeCountry = (next) => {
+        const prev = countryRef.current;
+        setCountry(next);
+        countryRef.current = next;
+        const e = engineRef.current;
+        const l = libRef.current;
+        if (!e.display)
+            return;
+        const { plus } = digitsOf(e.display);
+        // Keep the local part when switching country ("0532…" stays, "+90 532…" → national under the new country).
+        let national = e.display.replace(/\D/g, "");
+        if (l && plus) {
+            const p = parseNumber(e.display);
+            national = p?.nationalNumber ?? national;
+        }
+        else if (l && prev !== next) {
+            const p = l.parsePhoneNumberFromString(national, prev);
+            if (p)
+                national = p.nationalNumber;
+        }
+        e.setDisplay(national);
+    };
+    /* ---------------- country list ---------------- */
+    const list = React.useMemo(() => {
+        const all = (countries ?? lib?.getCountries() ?? [country]).map((c) => c.toUpperCase());
+        if (!all.includes(country))
+            all.unshift(country);
+        const cmp = compareText(locale);
+        return all.map((c) => ({ code: c, name: countryName(c) })).sort((a, b) => cmp(a.name, b.name));
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [countries, lib, locale, country, regionNames]);
+    const preferred = preferredCountries?.map((c) => c.toUpperCase()).filter((c) => list.some((x) => x.code === c));
+    const callingCode = (c) => {
+        try {
+            return lib ? `+${lib.getCountryCallingCode(c)}` : "";
+        }
+        catch {
+            return "";
+        }
+    };
+    const optionText = (c) => `${c.name} ${callingCode(c.code)}`.trim();
+    const picker = hideCountry ? null : (_jsxs("span", { "data-slot": "phone-input-country", className: "relative -mx-3 flex h-full items-center gap-1.5 px-3 font-mono text-[12px] tabular text-fg-muted has-[select:focus-visible]:bg-hover has-[select:focus-visible]:text-fg", children: [_jsx("span", { "aria-hidden": true, className: "font-semibold tracking-[0.04em] text-fg", children: country }), _jsx("span", { "aria-hidden": true, className: "text-fg-subtle", children: callingCode(country) }), !readOnly ? _jsx(ChevronDown, { "aria-hidden": true, className: "size-3 text-fg-subtle" }) : null, !readOnly ? (_jsxs("select", { "aria-label": t("country"), value: country, disabled: disabled, onChange: (e) => changeCountry(e.currentTarget.value), className: "absolute inset-0 cursor-pointer appearance-none bg-transparent opacity-0 outline-none disabled:cursor-not-allowed", children: [preferred?.length ? (_jsx("optgroup", { label: t("suggested"), children: preferred.map((c) => (_jsx("option", { value: c, children: optionText({ code: c, name: countryName(c) }) }, `p-${c}`))) })) : null, preferred?.length ? (_jsx("optgroup", { label: t("allCountries"), children: list.map((c) => (_jsx("option", { value: c.code, children: optionText(c) }, c.code))) })) : (list.map((c) => (_jsx("option", { value: c.code, children: optionText(c) }, c.code))))] })) : null] }));
+    return (_jsxs(_Fragment, { children: [_jsx(WithoutFieldName, { children: _jsx(Input, { ref: ref, ...rest, ...engine.inputProps, size: size, type: "tel", inputMode: "tel", autoComplete: "tel", dir: "ltr", disabled: disabled, readOnly: readOnly, invalid: invalid || v.invalid, addonStart: picker ?? undefined, inputClassName: cn("tabular", mono && "font-mono", inputClassName), "data-slot": "phone-input", "data-country": country, placeholder: rest.placeholder ?? (lib ? exampleFor(lib, country, displayMode) : undefined), onKeyDown: (e) => {
+                        onKeyDown?.(e);
+                        engine.inputProps.onKeyDown(e);
+                    }, onBlur: (e) => {
+                        engine.inputProps.onBlur(e);
+                        v.report(check(e.currentTarget.value), "blur");
+                        onBlur?.(e);
+                    } }) }), submitName ? _jsx("input", { type: "hidden", name: submitName, value: engine.raw ?? "", disabled: disabled }) : null] }));
+});
+/** A typed-looking placeholder per country, derived from the metadata (no example numbers in /min). */
+function exampleFor(lib, country, mode) {
+    const samples = { TR: "5321234567", US: "2015550123", GB: "7400123456", DE: "15123456789", NL: "612345678", FR: "612345678" };
+    const n = samples[country];
+    if (!n)
+        return undefined;
+    const p = lib.parsePhoneNumberFromString(n, country);
+    if (!p)
+        return undefined;
+    return mode === "national" ? p.formatNational() : p.formatInternational();
+}

package/dist/components/popover.d.ts

@@ -0,0 +1,38 @@
+import * as React from "react";
+import { Popover as PopoverPrimitive } from "radix-ui";
+import { type VariantProps } from "class-variance-authority";
+/** Root. Controlled (`open` / `onOpenChange`) or uncontrolled (`defaultOpen`). */
+export declare const Popover: React.FC<PopoverPrimitive.PopoverProps>;
+export declare const PopoverTrigger: React.ForwardRefExoticComponent<PopoverPrimitive.PopoverTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+/** Position the content against something other than the trigger. */
+export declare const PopoverAnchor: React.ForwardRefExoticComponent<PopoverPrimitive.PopoverAnchorProps & React.RefAttributes<HTMLDivElement>>;
+/** Closes the popover; use `asChild` with a Button. */
+export declare const PopoverClose: React.ForwardRefExoticComponent<PopoverPrimitive.PopoverCloseProps & React.RefAttributes<HTMLButtonElement>>;
+export declare const popoverContentVariants: (props?: ({
+    size?: "auto" | "trigger" | "sm" | "md" | "lg" | null | undefined;
+    padded?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface PopoverContentProps extends React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>, VariantProps<typeof popoverContentVariants> {
+    /** Show the pointer arrow. Default `false`. */
+    arrow?: boolean;
+}
+/**
+ * The floating panel. Portals into the nearest `ThemeScope`, sets the layer depth
+ * (only the first layer blurs in glass mode; a popover inside a dialog turns opaque),
+ * and is labelled by its `PopoverTitle` when one is rendered.
+ */
+export declare const PopoverContent: React.ForwardRefExoticComponent<PopoverContentProps & React.RefAttributes<HTMLDivElement>>;
+export interface PopoverHeaderProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
+    /** Heading; becomes the popover's accessible name. */
+    title?: React.ReactNode;
+    description?: React.ReactNode;
+    /** Trailing element (a close button, a badge). */
+    action?: React.ReactNode;
+}
+/** Title + optional description at the top of the content. */
+export declare const PopoverHeader: React.ForwardRefExoticComponent<PopoverHeaderProps & React.RefAttributes<HTMLDivElement>>;
+/** Heading inside the content; wired to `aria-labelledby`. */
+export declare const PopoverTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLHeadingElement> & React.RefAttributes<HTMLHeadingElement>>;
+export declare function PopoverDescription({ className, ...props }: React.HTMLAttributes<HTMLParagraphElement>): React.JSX.Element;
+/** Bottom row for actions. Bleeds to the panel edge with a hairline on top. */
+export declare const PopoverFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;

package/dist/components/popover.js

@@ -0,0 +1,69 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Popover as PopoverPrimitive } from "radix-ui";
+import { cva } from "class-variance-authority";
+import { cn } from "../lib/cn.js";
+import { usePortalContainer } from "../lib/theme-scope.js";
+import { Layer } from "../lib/layer.js";
+import { FloatingArrow } from "../lib/floating-arrow.js";
+/** Root. Controlled (`open` / `onOpenChange`) or uncontrolled (`defaultOpen`). */
+export const Popover = PopoverPrimitive.Root;
+export const PopoverTrigger = PopoverPrimitive.Trigger;
+/** Position the content against something other than the trigger. */
+export const PopoverAnchor = PopoverPrimitive.Anchor;
+/** Closes the popover; use `asChild` with a Button. */
+export const PopoverClose = PopoverPrimitive.Close;
+export const popoverContentVariants = cva(["surface-popover ui-pop z-(--z-popover) rounded-ui-lg outline-none", "max-h-(--radix-popover-content-available-height) overflow-y-auto overscroll-contain"], {
+    variants: {
+        size: {
+            auto: "w-auto max-w-[calc(100vw-1.5rem)]",
+            sm: "w-64 max-w-[calc(100vw-1.5rem)]",
+            md: "w-80 max-w-[calc(100vw-1.5rem)]",
+            lg: "w-[26rem] max-w-[calc(100vw-1.5rem)]",
+            /** Same width as the trigger (lists, comboboxes). */
+            trigger: "w-(--radix-popover-trigger-width) min-w-40",
+        },
+        padded: {
+            true: "p-(--popover-p) [--popover-p:calc(var(--gap)*0.85)]",
+            false: "p-0 [--popover-p:0px]",
+        },
+    },
+    defaultVariants: { size: "md", padded: true },
+});
+const PopoverTitleContext = React.createContext(null);
+/**
+ * The floating panel. Portals into the nearest `ThemeScope`, sets the layer depth
+ * (only the first layer blurs in glass mode; a popover inside a dialog turns opaque),
+ * and is labelled by its `PopoverTitle` when one is rendered.
+ */
+export const PopoverContent = React.forwardRef(function PopoverContent({ className, size, padded, arrow = false, sideOffset = 6, collisionPadding = 12, align = "center", children, ...props }, ref) {
+    const container = usePortalContainer();
+    const titleId = React.useId();
+    const [hasTitle, setHasTitle] = React.useState(false);
+    const titleCtx = React.useMemo(() => ({ id: titleId, register: setHasTitle }), [titleId]);
+    return (_jsx(PopoverPrimitive.Portal, { container: container, children: _jsx(Layer, { asChild: true, children: _jsxs(PopoverPrimitive.Content, { ref: ref, "data-slot": "popover-content", sideOffset: sideOffset, collisionPadding: collisionPadding, align: align, "aria-labelledby": hasTitle ? titleId : undefined, className: cn(popoverContentVariants({ size, padded }), className), ...props, children: [_jsx(PopoverTitleContext.Provider, { value: titleCtx, children: children }), arrow ? (_jsx(PopoverPrimitive.Arrow, { asChild: true, width: 14, height: 7, children: _jsx(FloatingArrow, {}) })) : null] }) }) }));
+});
+/** Title + optional description at the top of the content. */
+export const PopoverHeader = React.forwardRef(function PopoverHeader({ title, description, action, className, children, ...props }, ref) {
+    return (_jsxs("div", { ref: ref, "data-slot": "popover-header", className: cn("mb-3 flex items-start gap-3", className), ...props, children: [_jsxs("div", { className: "grid min-w-0 flex-1 gap-0.5", children: [title != null ? _jsx(PopoverTitle, { children: title }) : null, description != null ? _jsx(PopoverDescription, { children: description }) : null, children] }), action ? _jsx("div", { className: "-me-1 -mt-1 shrink-0", children: action }) : null] }));
+});
+/** Heading inside the content; wired to `aria-labelledby`. */
+export const PopoverTitle = React.forwardRef(function PopoverTitle({ className, id, ...props }, ref) {
+    const ctx = React.useContext(PopoverTitleContext);
+    const register = ctx?.register;
+    React.useEffect(() => {
+        if (!register || id)
+            return;
+        register(true);
+        return () => register(false);
+    }, [register, id]);
+    return _jsx("h3", { ref: ref, id: id ?? ctx?.id, "data-slot": "popover-title", className: cn("text-sm font-semibold leading-tight tracking-[-0.005em] text-fg", className), ...props });
+});
+export function PopoverDescription({ className, ...props }) {
+    return _jsx("p", { "data-slot": "popover-description", className: cn("text-[13px] leading-snug text-fg-muted", className), ...props });
+}
+/** Bottom row for actions. Bleeds to the panel edge with a hairline on top. */
+export const PopoverFooter = React.forwardRef(function PopoverFooter({ className, ...props }, ref) {
+    return (_jsx("div", { ref: ref, "data-slot": "popover-footer", className: cn("-mx-(--popover-p) -mb-(--popover-p) mt-4 flex items-center justify-end gap-2 border-t border-line px-(--popover-p) py-[calc(var(--popover-p)*0.7)]", className), ...props }));
+});