@algenium/blocks 1.5.0 → 1.7.0-rc.1

package/dist/index.js

@@ -1,7 +1,7 @@
 import * as React2 from 'react';
-import { createContext, useContext, useState, useCallback, useEffect, useRef, useMemo } from 'react';
+import { createContext, useContext, useState, useCallback, useEffect, useRef, useMemo, useId } from 'react';
 import { useTheme } from 'next-themes';
-import { CheckIcon, CircleIcon, ChevronRightIcon, Monitor, Sun, Moon, Languages, FlaskConical, X, Upload, Move, ZoomOut, ZoomIn, RotateCcw, RotateCw, Grid3X3, RefreshCw, XIcon, User, Pencil, Check, Loader2, Bell, CheckCheck, XCircle, AlertTriangle, CheckCircle, Info, Trash2, Clock, MapPin, Link, CalendarDays, ExternalLink, ChevronLeft, ChevronRight, Plus, HelpCircle, MessageSquare, Wifi, WifiOff, FileIcon, Download, Paperclip, Send, ArrowLeft } from 'lucide-react';
+import { CheckIcon, CircleIcon, ChevronRightIcon, Monitor, Sun, Moon, Languages, FlaskConical, X, Upload, Move, ZoomOut, ZoomIn, RotateCcw, RotateCw, Grid3X3, RefreshCw, XIcon, User, Pencil, Check, Loader2, Bell, CheckCheck, XCircle, AlertTriangle, CheckCircle, Info, Trash2, Clock, MapPin, Link, CalendarDays, ExternalLink, ChevronLeft, ChevronRight, Plus, HelpCircle, MessageSquare, Wifi, WifiOff, FileIcon, Download, Paperclip, Send, ArrowLeft, CreditCard, Search, CheckCircle2 } from 'lucide-react';
 import { AnimatePresence, motion } from 'framer-motion';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
@@ -15,6 +15,7 @@ import * as PopoverPrimitive from '@radix-ui/react-popover';
 import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
 import { startOfMonth, endOfMonth, eachDayOfInterval, endOfWeek, startOfWeek, format, isSameDay, subMonths, addMonths } from 'date-fns';
 import { DayPicker } from 'react-day-picker';
+import valid from 'card-validator';
 
 var CalendarContext = createContext(null);
 function useCalendarContext() {
@@ -3140,7 +3141,7 @@ function DropdownMenuItem({
       "data-inset": inset,
       "data-variant": variant,
       className: cn(
-        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[highlighted]:[&_svg:not([class*='text-'])]:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:[&_svg:not([class*='text-'])]:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:data-[highlighted]:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 dark:data-[variant=destructive]:data-[highlighted]:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:data-[highlighted]:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       ),
       ...props
@@ -3158,7 +3159,7 @@ function DropdownMenuCheckboxItem({
     {
       "data-slot": "dropdown-menu-checkbox-item",
       className: cn(
-        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "relative flex cursor-default select-none items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[highlighted]:[&_svg:not([class*='text-'])]:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:[&_svg:not([class*='text-'])]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       ),
       checked,
@@ -3191,7 +3192,7 @@ function DropdownMenuRadioItem({
     {
       "data-slot": "dropdown-menu-radio-item",
       className: cn(
-        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "relative flex cursor-default select-none items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[highlighted]:[&_svg:not([class*='text-'])]:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:[&_svg:not([class*='text-'])]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       ),
       ...props,
@@ -3266,7 +3267,7 @@ function DropdownMenuSubTrigger({
       "data-slot": "dropdown-menu-sub-trigger",
       "data-inset": inset,
       className: cn(
-        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden data-[inset]:pl-8 data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[highlighted]:[&_svg:not([class*='text-'])]:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground data-[state=open]:[&_svg:not([class*='text-'])]:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:[&_svg:not([class*='text-'])]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       ),
       ...props,
@@ -3342,9 +3343,9 @@ var buttonVariants = cva(
       variant: {
         default: "bg-primary text-primary-foreground hover:bg-primary/90",
         destructive: "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
-        outline: "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        outline: "border bg-background text-foreground shadow-xs hover:bg-accent hover:text-accent-foreground dark:border-input dark:bg-input/30 dark:text-foreground dark:hover:bg-muted dark:hover:text-foreground",
         secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50 dark:hover:text-foreground",
         link: "text-primary underline-offset-4 hover:underline"
       },
       size: {
@@ -3536,7 +3537,7 @@ function ThemeSwitcher({
           onClick: () => handleThemeClick(key),
           className: cn(
             "gap-2 cursor-pointer",
-            currentTheme === key && "bg-accent"
+            currentTheme === key && "bg-accent text-accent-foreground [&_svg]:text-accent-foreground"
           ),
           children: [
             /* @__PURE__ */ jsx(Icon, { className: "h-4 w-4" }),
@@ -3694,7 +3695,7 @@ function LanguageSwitcher({
               onClick: () => onLanguageChange?.(key),
               className: cn(
                 "justify-center text-xs font-semibold cursor-pointer px-3",
-                currentLanguage === key && "bg-accent"
+                currentLanguage === key && "bg-accent text-accent-foreground"
               ),
               children: nativeName
             },
@@ -3952,7 +3953,7 @@ function EnvironmentSwitcher({
           onClick: () => handleSelect(env),
           className: cn(
             "gap-2 cursor-pointer",
-            environment === env && "bg-accent"
+            environment === env && "bg-accent text-accent-foreground [&_svg]:text-accent-foreground"
           ),
           children: [
             /* @__PURE__ */ jsx(
@@ -7322,7 +7323,784 @@ function formatRelativeTime(dateStr) {
   if (diffD < 7) return `${diffD}d`;
   return date.toLocaleDateString([], { month: "short", day: "numeric" });
 }
+function useDebouncedValue(value, delayMs) {
+  const [debounced, setDebounced] = useState(value);
+  useEffect(() => {
+    const id = window.setTimeout(() => setDebounced(value), delayMs);
+    return () => window.clearTimeout(id);
+  }, [value, delayMs]);
+  return debounced;
+}
+function useDebouncedValueStrict(value, delayMs) {
+  const [debounced, setDebounced] = useState(void 0);
+  useEffect(() => {
+    setDebounced(void 0);
+    const id = window.setTimeout(() => setDebounced(value), delayMs);
+    return () => window.clearTimeout(id);
+  }, [value, delayMs]);
+  return debounced;
+}
+function onlyDigits(s, max) {
+  return s.replace(/\D/g, "").slice(0, max);
+}
+function formatPan(digits) {
+  const cardInfo = valid.number(digits).card;
+  const gaps = cardInfo?.gaps ?? [4, 8, 12];
+  const parts = [];
+  let idx = 0;
+  for (const g of gaps) {
+    parts.push(digits.slice(idx, g));
+    idx = g;
+  }
+  parts.push(digits.slice(idx));
+  return parts.filter((p) => p.length > 0).join(" ");
+}
+function parseExpiry(raw) {
+  const d = onlyDigits(raw, 4);
+  if (d.length < 4) return null;
+  const mm = Number.parseInt(d.slice(0, 2), 10);
+  const yy = Number.parseInt(d.slice(2, 4), 10);
+  if (mm < 1 || mm > 12) return null;
+  const year = yy < 100 ? 2e3 + yy : yy;
+  const exp = valid.expirationDate({ month: String(mm), year: String(year) });
+  if (!exp.isValid) return null;
+  return { month: mm, year };
+}
+function normalizeBrand(detected) {
+  if (!detected) return "";
+  if (detected === "american-express") return "amex";
+  return detected;
+}
+function brandAllowed(detected, accepted) {
+  if (!accepted?.length) return true;
+  if (!detected) return true;
+  const n = normalizeBrand(detected);
+  return accepted.map((a) => a.toLowerCase()).includes(n.toLowerCase());
+}
+var inputClassName = "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm";
+function CardInput({
+  tokenize,
+  value,
+  onChange,
+  acceptedBrands,
+  requireHolderName = false,
+  labels,
+  disabled = false,
+  largeText = false,
+  className,
+  onError
+}) {
+  const baseId = useId();
+  const [panDigits, setPanDigits] = useState("");
+  const [expiryRaw, setExpiryRaw] = useState("");
+  const [cvc, setCvc] = useState("");
+  const [holderName, setHolderName] = useState("");
+  const [panFocused, setPanFocused] = useState(false);
+  const [submitting, setSubmitting] = useState(false);
+  const inputClass = largeText ? "text-base py-3" : "";
+  const labelClass = largeText ? "text-base" : "text-sm";
+  const numberValidation = valid.number(panDigits);
+  const rawBrand = numberValidation.card?.type;
+  const brand = normalizeBrand(rawBrand) || "unknown";
+  const maxPanLen = numberValidation.card?.lengths?.slice(-1)[0] ?? 19;
+  const minPanLenForType = numberValidation.card?.lengths?.[0];
+  const panPastMinimumLength = minPanLenForType !== void 0 && panDigits.length >= minPanLenForType;
+  const cvcSize = rawBrand === "american-express" || brand === "amex" ? 4 : 3;
+  const expiryParsed = parseExpiry(expiryRaw);
+  const expiryValid = expiryRaw.replace(/\D/g, "").length >= 4 && expiryParsed !== null ? valid.expirationDate({
+    month: String(expiryParsed.month),
+    year: String(expiryParsed.year)
+  }).isValid : false;
+  const cvvValid = cvc.length >= cvcSize && valid.cvv(cvc, cvcSize).isValid;
+  const panComplete = numberValidation.isValid && brandAllowed(rawBrand, acceptedBrands);
+  const holderOk = !requireHolderName || holderName.trim().length > 1;
+  const canSubmit = panComplete && expiryValid && cvvValid && holderOk && !disabled && !value;
+  const handlePanChange = (e) => {
+    const d = onlyDigits(e.target.value, maxPanLen);
+    setPanDigits(d);
+  };
+  const handleExpiryChange = (e) => {
+    let d = onlyDigits(e.target.value, 4);
+    if (d.length >= 2) d = `${d.slice(0, 2)}/${d.slice(2)}`;
+    setExpiryRaw(d);
+  };
+  const runTokenize = useCallback(async () => {
+    if (!expiryParsed) return;
+    setSubmitting(true);
+    try {
+      const result = await tokenize({
+        pan: panDigits,
+        expMonth: expiryParsed.month,
+        expYear: expiryParsed.year,
+        cvc,
+        holderName: holderName.trim() || void 0
+      });
+      onChange(result);
+      setPanDigits("");
+      setExpiryRaw("");
+      setCvc("");
+      setHolderName("");
+    } catch (err) {
+      const msg = err instanceof Error ? err.message : labels.tokenizeFailed;
+      onError?.(msg);
+    } finally {
+      setSubmitting(false);
+    }
+  }, [
+    cvc,
+    expiryParsed,
+    holderName,
+    labels.tokenizeFailed,
+    onChange,
+    onError,
+    panDigits,
+    tokenize
+  ]);
+  const displayPan = panFocused || panDigits.length <= 4 ? formatPan(panDigits) : `\u2022\u2022\u2022\u2022 \u2022\u2022\u2022\u2022 \u2022\u2022\u2022\u2022 ${panDigits.slice(-4)}`;
+  if (value?.tokenId) {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn("space-y-3 rounded-lg border bg-muted/30 p-4", className),
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-sm", children: [
+            /* @__PURE__ */ jsx(CreditCard, { className: "h-4 w-4 text-muted-foreground" }),
+            /* @__PURE__ */ jsx("span", { className: "font-medium", children: value.masked }),
+            /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground", children: [
+              String(value.expMonth).padStart(2, "0"),
+              "/",
+              String(value.expYear).slice(-2)
+            ] })
+          ] }),
+          value.holderName ? /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: value.holderName }) : null,
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              type: "button",
+              variant: "outline",
+              size: "sm",
+              disabled,
+              onClick: () => onChange(null),
+              children: labels.replace
+            }
+          )
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs("div", { className: cn("space-y-4 rounded-lg border bg-card p-4", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
+      /* @__PURE__ */ jsx(
+        "label",
+        {
+          htmlFor: `${baseId}-pan`,
+          className: cn("font-medium leading-none", labelClass),
+          children: labels.number
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          id: `${baseId}-pan`,
+          inputMode: "numeric",
+          autoComplete: "cc-number",
+          value: displayPan,
+          onChange: handlePanChange,
+          onFocus: () => setPanFocused(true),
+          onBlur: () => setPanFocused(false),
+          placeholder: "4242 4242 4242 4242",
+          disabled,
+          className: cn(inputClassName, inputClass)
+        }
+      ),
+      panDigits.length > 0 && (!numberValidation.isPotentiallyValid || panPastMinimumLength && !numberValidation.isValid) && /* @__PURE__ */ jsx("p", { className: "text-xs text-destructive", children: labels.invalidNumber }),
+      panDigits.length > 0 && numberValidation.isPotentiallyValid && !brandAllowed(rawBrand, acceptedBrands) && /* @__PURE__ */ jsx("p", { className: "text-xs text-destructive", children: labels.invalidNumber })
+    ] }),
+    requireHolderName && /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
+      /* @__PURE__ */ jsx(
+        "label",
+        {
+          htmlFor: `${baseId}-holder`,
+          className: cn("font-medium leading-none", labelClass),
+          children: labels.holderName
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          id: `${baseId}-holder`,
+          autoComplete: "cc-name",
+          value: holderName,
+          onChange: (e) => setHolderName(e.target.value),
+          disabled,
+          className: cn(inputClassName, inputClass)
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-2", children: [
+      /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
+        /* @__PURE__ */ jsx(
+          "label",
+          {
+            htmlFor: `${baseId}-exp`,
+            className: cn("font-medium leading-none", labelClass),
+            children: labels.expiry
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            id: `${baseId}-exp`,
+            inputMode: "numeric",
+            autoComplete: "cc-exp",
+            value: expiryRaw,
+            onChange: handleExpiryChange,
+            placeholder: "MM/YY",
+            disabled,
+            className: cn(inputClassName, inputClass)
+          }
+        ),
+        expiryRaw.replace(/\D/g, "").length >= 4 && !expiryValid && /* @__PURE__ */ jsx("p", { className: "text-xs text-destructive", children: labels.expiredCard })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
+        /* @__PURE__ */ jsx(
+          "label",
+          {
+            htmlFor: `${baseId}-cvc`,
+            className: cn("font-medium leading-none", labelClass),
+            children: labels.cvc
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            id: `${baseId}-cvc`,
+            inputMode: "numeric",
+            autoComplete: "cc-csc",
+            value: cvc,
+            onChange: (e) => setCvc(onlyDigits(e.target.value, cvcSize)),
+            placeholder: cvcSize === 4 ? "0000" : "000",
+            disabled,
+            className: cn(inputClassName, inputClass),
+            maxLength: cvcSize
+          }
+        ),
+        cvc.length > 0 && !cvvValid && /* @__PURE__ */ jsx("p", { className: "text-xs text-destructive", children: labels.invalidCvc })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs(
+      Button,
+      {
+        type: "button",
+        disabled: !canSubmit || submitting,
+        onClick: () => void runTokenize(),
+        className: "gap-2",
+        children: [
+          submitting ? /* @__PURE__ */ jsx(Loader2, { className: "h-4 w-4 animate-spin" }) : /* @__PURE__ */ jsx(CreditCard, { className: "h-4 w-4" }),
+          labels.tokenize
+        ]
+      }
+    )
+  ] });
+}
+function parseInitial(value) {
+  if (!value) {
+    return {
+      street: "",
+      street2: "",
+      city: "",
+      state: "",
+      zip: "",
+      country: "US"
+    };
+  }
+  return {
+    street: value.street ?? "",
+    street2: value.street2 ?? "",
+    city: value.city ?? "",
+    state: value.state ?? "",
+    zip: value.zip ?? "",
+    country: "US"
+  };
+}
+function addressSig(a) {
+  return JSON.stringify({
+    street: a.street.trim(),
+    street2: (a.street2 ?? "").trim(),
+    city: a.city.trim(),
+    state: a.state.trim().toUpperCase(),
+    zip: a.zip.replace(/\D/g, "").slice(0, 5)
+  });
+}
+function isAddressComplete(a) {
+  const zip5 = a.zip.replace(/\D/g, "").slice(0, 5);
+  const st = a.state.trim();
+  return a.street.trim().length > 0 && a.city.trim().length > 0 && /^[A-Za-z]{2}$/.test(st) && zip5.length === 5;
+}
+var inputClassName2 = "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm";
+function USAddressInput({
+  value,
+  onChange,
+  lookupZip,
+  validateAddress,
+  autocomplete,
+  labels,
+  disabled = false,
+  largeText = false,
+  className,
+  onError
+}) {
+  const [searchQuery, setSearchQuery] = useState("");
+  const [showSuggestions, setShowSuggestions] = useState(false);
+  const [suggestions, setSuggestions] = useState([]);
+  const [address, setAddress] = useState(
+    () => parseInitial(value)
+  );
+  const [sessionToken] = useState(
+    () => typeof crypto !== "undefined" && crypto.randomUUID ? crypto.randomUUID() : `${Date.now()}-${Math.random()}`
+  );
+  const [loadingAutocomplete, setLoadingAutocomplete] = useState(false);
+  const [loadingZip, setLoadingZip] = useState(false);
+  const [loadingValidate, setLoadingValidate] = useState(false);
+  const [uspsSuggestion, setUspsSuggestion] = useState(
+    null
+  );
+  const [uspsVerifiedNoChange, setUspsVerifiedNoChange] = useState(false);
+  const searchRef = useRef(null);
+  const suggestionCache = useRef(/* @__PURE__ */ new Map());
+  const warnedRef = useRef({
+    autocomplete: false,
+    zip: false,
+    validate: false
+  });
+  const lastZipLookup = useRef("");
+  const addressRef = useRef(address);
+  addressRef.current = address;
+  const lastValidatedSigRef = useRef("");
+  const debouncedSearch = useDebouncedValue(searchQuery, 400);
+  const zipDigits = address.zip.replace(/\D/g, "").slice(0, 5);
+  const debouncedZip = useDebouncedValue(zipDigits, 400);
+  const debouncedAddressForValidate = useDebouncedValueStrict(address, 1200);
+  const inputClass = largeText ? "text-base py-3" : "";
+  const labelClass = largeText ? "text-base" : "text-sm";
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (searchRef.current && !searchRef.current.contains(event.target)) {
+        setShowSuggestions(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+  const valueSyncKey = value == null ? "" : `o:${JSON.stringify(value)}`;
+  useEffect(() => {
+    setAddress(parseInitial(value));
+  }, [valueSyncKey]);
+  const handleFieldChange = (field, fieldValue) => {
+    setAddress((prev) => {
+      const next = field === "country" ? { ...prev, country: "US" } : { ...prev, [field]: fieldValue };
+      onChange(next);
+      return next;
+    });
+  };
+  useEffect(() => {
+    const sig = addressSig(addressRef.current);
+    if (sig !== lastValidatedSigRef.current) {
+      setUspsVerifiedNoChange(false);
+      setUspsSuggestion(null);
+    }
+  }, [address]);
+  const allowAutocomplete = Boolean(autocomplete);
+  const allowUspsValidation = Boolean(validateAddress);
+  const allowZipLookup = Boolean(lookupZip);
+  useEffect(() => {
+    if (!allowAutocomplete || !autocomplete) return;
+    const q = debouncedSearch.trim();
+    if (q.length < 3) {
+      setSuggestions([]);
+      setShowSuggestions(false);
+      setLoadingAutocomplete(false);
+      return;
+    }
+    const cacheKey = q.toLowerCase();
+    const cached = suggestionCache.current.get(cacheKey);
+    if (cached) {
+      setSuggestions(cached);
+      setShowSuggestions(true);
+      setLoadingAutocomplete(false);
+      return;
+    }
+    const ctrl = new AbortController();
+    setLoadingAutocomplete(true);
+    autocomplete.search(q, sessionToken, ctrl.signal).then((list) => {
+      if (ctrl.signal.aborted) return;
+      suggestionCache.current.set(cacheKey, list);
+      setSuggestions(list);
+      setShowSuggestions(list.length > 0);
+    }).catch((e) => {
+      if (e.name === "AbortError") return;
+      if (!warnedRef.current.autocomplete) {
+        onError?.(labels.autocompleteUnavailable);
+        warnedRef.current.autocomplete = true;
+      }
+      setSuggestions([]);
+      setShowSuggestions(false);
+    }).finally(() => setLoadingAutocomplete(false));
+    return () => ctrl.abort();
+  }, [
+    debouncedSearch,
+    allowAutocomplete,
+    autocomplete,
+    sessionToken,
+    labels.autocompleteUnavailable,
+    onError
+  ]);
+  useEffect(() => {
+    if (!allowZipLookup || !lookupZip) return;
+    if (debouncedZip.length !== 5) return;
+    if (debouncedZip === lastZipLookup.current) return;
+    const ctrl = new AbortController();
+    setLoadingZip(true);
+    lookupZip(debouncedZip, ctrl.signal).then((data) => {
+      if (ctrl.signal.aborted) return;
+      lastZipLookup.current = debouncedZip;
+      setAddress((prev) => {
+        const cityEmpty = !prev.city.trim();
+        const stateEmpty = !prev.state.trim();
+        const next = { ...prev };
+        if (cityEmpty && data.city) next.city = data.city;
+        if (stateEmpty && data.state) next.state = data.state;
+        next.country = "US";
+        onChange(next);
+        return next;
+      });
+    }).catch(() => {
+      if (!warnedRef.current.zip) {
+        onError?.(labels.zipLookupFailed);
+        warnedRef.current.zip = true;
+      }
+    }).finally(() => setLoadingZip(false));
+    return () => ctrl.abort();
+  }, [
+    debouncedZip,
+    allowZipLookup,
+    lookupZip,
+    onChange,
+    labels.zipLookupFailed,
+    onError
+  ]);
+  useEffect(() => {
+    if (!allowUspsValidation || !validateAddress || disabled) return;
+    if (debouncedAddressForValidate === void 0) return;
+    const addr = debouncedAddressForValidate;
+    if (!isAddressComplete(addr)) return;
+    const requestSig = addressSig(addr);
+    if (requestSig === lastValidatedSigRef.current) return;
+    const ctrl = new AbortController();
+    const timeoutId = window.setTimeout(() => ctrl.abort(), 8e3);
+    setLoadingValidate(true);
+    setUspsVerifiedNoChange(false);
+    setUspsSuggestion(null);
+    validateAddress(addr, ctrl.signal).then((result) => {
+      if (ctrl.signal.aborted) return;
+      if (addressSig(addressRef.current) !== requestSig) return;
+      lastValidatedSigRef.current = requestSig;
+      const std = result.standardized;
+      if (result.changed) {
+        setUspsSuggestion(std);
+        setUspsVerifiedNoChange(false);
+      } else {
+        setUspsSuggestion(null);
+        setUspsVerifiedNoChange(true);
+      }
+    }).catch(() => {
+      if (ctrl.signal.aborted) return;
+      if (!warnedRef.current.validate) {
+        onError?.(labels.uspsUnavailable);
+        warnedRef.current.validate = true;
+      }
+    }).finally(() => {
+      window.clearTimeout(timeoutId);
+      setLoadingValidate(false);
+    });
+    return () => {
+      window.clearTimeout(timeoutId);
+      ctrl.abort();
+    };
+  }, [
+    debouncedAddressForValidate,
+    allowUspsValidation,
+    validateAddress,
+    disabled,
+    labels.uspsUnavailable,
+    onError
+  ]);
+  const handleSelectSuggestion = async (row) => {
+    if (!autocomplete) return;
+    try {
+      const next = await autocomplete.details(
+        row.placeId,
+        AbortSignal.timeout(8e3)
+      );
+      const normalized = {
+        ...next,
+        country: "US"
+      };
+      setAddress(normalized);
+      onChange(normalized);
+      setShowSuggestions(false);
+      setSearchQuery("");
+      setUspsSuggestion(null);
+      lastValidatedSigRef.current = "";
+      setUspsVerifiedNoChange(false);
+    } catch {
+      onError?.(labels.placeLookupFailed);
+    }
+  };
+  const applyUspsSuggestion = () => {
+    if (!uspsSuggestion) return;
+    setAddress(uspsSuggestion);
+    onChange(uspsSuggestion);
+    setUspsSuggestion(null);
+    lastValidatedSigRef.current = addressSig(uspsSuggestion);
+    setUspsVerifiedNoChange(true);
+  };
+  const dismissUspsSuggestion = () => {
+    setUspsSuggestion(null);
+    lastValidatedSigRef.current = addressSig(addressRef.current);
+    setUspsVerifiedNoChange(true);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: cn("space-y-4", className), children: [
+    allowAutocomplete && autocomplete && /* @__PURE__ */ jsxs("div", { ref: searchRef, className: "relative", children: [
+      /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+        /* @__PURE__ */ jsx(Search, { className: "absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            value: searchQuery,
+            onChange: (e) => setSearchQuery(e.target.value),
+            placeholder: labels.searchPlaceholder,
+            disabled,
+            className: cn(inputClassName2, "pl-9 pr-9", inputClass),
+            "aria-label": labels.searchPlaceholder
+          }
+        ),
+        loadingAutocomplete && /* @__PURE__ */ jsx(Loader2, { className: "absolute right-10 top-1/2 h-4 w-4 -translate-y-1/2 animate-spin text-muted-foreground" }),
+        searchQuery ? /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => setSearchQuery(""),
+            className: "absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground",
+            children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" })
+          }
+        ) : null
+      ] }),
+      showSuggestions && suggestions.length > 0 && /* @__PURE__ */ jsx("div", { className: "absolute z-10 mt-1 max-h-48 w-full overflow-y-auto rounded-lg border bg-background shadow-lg", children: suggestions.map((suggestion) => /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          onClick: () => void handleSelectSuggestion(suggestion),
+          className: "w-full border-b px-4 py-3 text-left transition-colors last:border-b-0 hover:bg-muted",
+          children: [
+            /* @__PURE__ */ jsx("p", { className: "text-sm font-medium", children: suggestion.mainText }),
+            /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: suggestion.secondaryText })
+          ]
+        },
+        suggestion.placeId
+      )) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "grid gap-4", children: [
+      /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
+        /* @__PURE__ */ jsx(
+          "label",
+          {
+            htmlFor: "blocks-usaddress-street",
+            className: cn("font-medium leading-none", labelClass),
+            children: labels.street
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            id: "blocks-usaddress-street",
+            value: address.street,
+            onChange: (e) => handleFieldChange("street", e.target.value),
+            placeholder: labels.streetPlaceholder ?? "",
+            disabled,
+            className: cn(inputClassName2, inputClass)
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
+        /* @__PURE__ */ jsxs(
+          "label",
+          {
+            htmlFor: "blocks-usaddress-street2",
+            className: cn(
+              `${labelClass} text-muted-foreground`,
+              "leading-none"
+            ),
+            children: [
+              labels.street2 ?? "Address line 2",
+              " ",
+              labels.street2OptionalHint ? /* @__PURE__ */ jsxs("span", { className: "text-xs", children: [
+                "(",
+                labels.street2OptionalHint,
+                ")"
+              ] }) : null
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            id: "blocks-usaddress-street2",
+            value: address.street2 || "",
+            onChange: (e) => handleFieldChange("street2", e.target.value),
+            placeholder: labels.street2Placeholder ?? "",
+            disabled,
+            className: cn(inputClassName2, inputClass)
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-2", children: [
+        /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
+          /* @__PURE__ */ jsx(
+            "label",
+            {
+              htmlFor: "blocks-usaddress-city",
+              className: cn("font-medium leading-none", labelClass),
+              children: labels.city
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              id: "blocks-usaddress-city",
+              value: address.city,
+              onChange: (e) => handleFieldChange("city", e.target.value),
+              placeholder: labels.cityPlaceholder ?? "",
+              disabled,
+              className: cn(inputClassName2, inputClass)
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
+          /* @__PURE__ */ jsx(
+            "label",
+            {
+              htmlFor: "blocks-usaddress-state",
+              className: cn("font-medium leading-none", labelClass),
+              children: labels.state
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              id: "blocks-usaddress-state",
+              value: address.state,
+              onChange: (e) => handleFieldChange("state", e.target.value),
+              placeholder: labels.statePlaceholder ?? "",
+              disabled,
+              className: cn(inputClassName2, inputClass)
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-2", children: [
+        /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
+          /* @__PURE__ */ jsx(
+            "label",
+            {
+              htmlFor: "blocks-usaddress-zip",
+              className: cn("font-medium leading-none", labelClass),
+              children: labels.zip
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                id: "blocks-usaddress-zip",
+                value: address.zip,
+                onChange: (e) => handleFieldChange(
+                  "zip",
+                  e.target.value.replace(/\D/g, "").slice(0, 10)
+                ),
+                placeholder: labels.zipPlaceholder ?? "",
+                disabled,
+                className: cn(inputClassName2, inputClass)
+              }
+            ),
+            loadingZip && /* @__PURE__ */ jsx(Loader2, { className: "absolute right-3 top-1/2 h-4 w-4 -translate-y-1/2 animate-spin text-muted-foreground" })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
+          /* @__PURE__ */ jsx(
+            "label",
+            {
+              htmlFor: "blocks-usaddress-country",
+              className: cn("font-medium leading-none", labelClass),
+              children: labels.countryLabel ?? "Country"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              id: "blocks-usaddress-country",
+              value: "United States",
+              readOnly: true,
+              disabled,
+              className: cn(inputClassName2, inputClass, "bg-muted/50"),
+              "aria-readonly": "true"
+            }
+          )
+        ] })
+      ] })
+    ] }),
+    allowUspsValidation && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "flex min-h-7 items-center gap-2 text-xs text-muted-foreground",
+          "aria-live": "polite",
+          children: loadingValidate ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(Loader2, { className: "h-3.5 w-3.5 shrink-0 animate-spin" }),
+            /* @__PURE__ */ jsx("span", { children: labels.uspsValidating })
+          ] }) : uspsVerifiedNoChange && !uspsSuggestion ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(CheckCircle2, { className: "h-3.5 w-3.5 shrink-0 text-emerald-600 dark:text-emerald-400" }),
+            /* @__PURE__ */ jsx("span", { children: labels.uspsVerified })
+          ] }) : /* @__PURE__ */ jsx("span", { className: "select-none opacity-0", "aria-hidden": true, children: "\xA0" })
+        }
+      ),
+      uspsSuggestion ? /* @__PURE__ */ jsxs("div", { className: "space-y-2 rounded-lg border border-amber-200 bg-amber-50 p-3 dark:border-amber-900 dark:bg-amber-950/30", children: [
+        /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-amber-900 dark:text-amber-100", children: labels.uspsSuggested }),
+        /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: [
+          uspsSuggestion.street,
+          uspsSuggestion.street2,
+          uspsSuggestion.city,
+          uspsSuggestion.state,
+          uspsSuggestion.zip
+        ].filter(Boolean).join(", ") }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-2", children: [
+          /* @__PURE__ */ jsx(Button, { type: "button", size: "sm", onClick: applyUspsSuggestion, children: labels.uspsUseSuggestion }),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              type: "button",
+              size: "sm",
+              variant: "outline",
+              onClick: dismissUspsSuggestion,
+              children: labels.uspsKeepMine
+            }
+          )
+        ] })
+      ] }) : null
+    ] })
+  ] });
+}
 
-export { AvatarEditor, AvatarEditorDialog, BLOCKS_DATA_ENVIRONMENTS, Button, CalendarContext, CalendarSubscribeButton, CalendarView, CalendarWidget, ChatRoomView, ChatSidebar, ChatSidebarContext, ChatSidebarProvider, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EnvironmentBanner, EnvironmentContext, EnvironmentDot, EnvironmentMiniBadge, EnvironmentSwitcher, EventDialog, EventRsvpBadge, LanguageContext, LanguageSwitcher, MiniCalendar, NotificationsContext, NotificationsWidget, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, ScrollArea, ScrollBar, Slider, ThemeSwitcher, Toggle, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, UpcomingEvents, buttonVariants, cn, defaultLanguages, getEnvironmentDotClass, getEnvironmentLabel, isBlocksDataEnvironment, toggleVariants, useCalendarContext, useChatRoom, useChatSidebar, useEnvironmentContext, useLanguageContext, useNotificationsContext };
+export { AvatarEditor, AvatarEditorDialog, BLOCKS_DATA_ENVIRONMENTS, Button, CalendarContext, CalendarSubscribeButton, CalendarView, CalendarWidget, CardInput, ChatRoomView, ChatSidebar, ChatSidebarContext, ChatSidebarProvider, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EnvironmentBanner, EnvironmentContext, EnvironmentDot, EnvironmentMiniBadge, EnvironmentSwitcher, EventDialog, EventRsvpBadge, LanguageContext, LanguageSwitcher, MiniCalendar, NotificationsContext, NotificationsWidget, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, ScrollArea, ScrollBar, Slider, ThemeSwitcher, Toggle, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, USAddressInput, UpcomingEvents, buttonVariants, cn, defaultLanguages, getEnvironmentDotClass, getEnvironmentLabel, isBlocksDataEnvironment, toggleVariants, useCalendarContext, useChatRoom, useChatSidebar, useDebouncedValue, useDebouncedValueStrict, useEnvironmentContext, useLanguageContext, useNotificationsContext };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map