@algenium/blocks 1.5.0 → 1.6.0

package/dist/index.cjs

@@ -16,6 +16,9 @@ var PopoverPrimitive = require('@radix-ui/react-popover');
 var ScrollAreaPrimitive = require('@radix-ui/react-scroll-area');
 var dateFns = require('date-fns');
 var reactDayPicker = require('react-day-picker');
+var valid = require('card-validator');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -43,6 +46,7 @@ var TogglePrimitive__namespace = /*#__PURE__*/_interopNamespace(TogglePrimitive)
 var DialogPrimitive__namespace = /*#__PURE__*/_interopNamespace(DialogPrimitive);
 var PopoverPrimitive__namespace = /*#__PURE__*/_interopNamespace(PopoverPrimitive);
 var ScrollAreaPrimitive__namespace = /*#__PURE__*/_interopNamespace(ScrollAreaPrimitive);
+var valid__default = /*#__PURE__*/_interopDefault(valid);
 
 var CalendarContext = React2.createContext(null);
 function useCalendarContext() {
@@ -3168,7 +3172,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
@@ -3186,7 +3190,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,
@@ -3219,7 +3223,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,
@@ -3294,7 +3298,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,
@@ -3370,9 +3374,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: {
@@ -3564,7 +3568,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__ */ jsxRuntime.jsx(Icon, { className: "h-4 w-4" }),
@@ -3722,7 +3726,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
             },
@@ -3980,7 +3984,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__ */ jsxRuntime.jsx(
@@ -7350,6 +7354,746 @@ function formatRelativeTime(dateStr) {
   if (diffD < 7) return `${diffD}d`;
   return date.toLocaleDateString([], { month: "short", day: "numeric" });
 }
+function useDebouncedValue(value, delayMs) {
+  const [debounced, setDebounced] = React2.useState(value);
+  React2.useEffect(() => {
+    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__default.default.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__default.default.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 = React2.useId();
+  const [panDigits, setPanDigits] = React2.useState("");
+  const [expiryRaw, setExpiryRaw] = React2.useState("");
+  const [cvc, setCvc] = React2.useState("");
+  const [holderName, setHolderName] = React2.useState("");
+  const [panFocused, setPanFocused] = React2.useState(false);
+  const [submitting, setSubmitting] = React2.useState(false);
+  const inputClass = largeText ? "text-base py-3" : "";
+  const labelClass = largeText ? "text-base" : "text-sm";
+  const numberValidation = valid__default.default.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__default.default.expirationDate({
+    month: String(expiryParsed.month),
+    year: String(expiryParsed.year)
+  }).isValid : false;
+  const cvvValid = cvc.length >= cvcSize && valid__default.default.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 = React2.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__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: cn("space-y-3 rounded-lg border bg-muted/30 p-4", className),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 text-sm", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CreditCard, { className: "h-4 w-4 text-muted-foreground" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", children: value.masked }),
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-muted-foreground", children: [
+              String(value.expMonth).padStart(2, "0"),
+              "/",
+              String(value.expYear).slice(-2)
+            ] })
+          ] }),
+          value.holderName ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground", children: value.holderName }) : null,
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Button,
+            {
+              type: "button",
+              variant: "outline",
+              size: "sm",
+              disabled,
+              onClick: () => onChange(null),
+              children: labels.replace
+            }
+          )
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("space-y-4 rounded-lg border bg-card p-4", className), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1.5", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "label",
+        {
+          htmlFor: `${baseId}-pan`,
+          className: cn("font-medium leading-none", labelClass),
+          children: labels.number
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("p", { className: "text-xs text-destructive", children: labels.invalidNumber }),
+      panDigits.length > 0 && numberValidation.isPotentiallyValid && !brandAllowed(rawBrand, acceptedBrands) && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-destructive", children: labels.invalidNumber })
+    ] }),
+    requireHolderName && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1.5", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "label",
+        {
+          htmlFor: `${baseId}-holder`,
+          className: cn("font-medium leading-none", labelClass),
+          children: labels.holderName
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          id: `${baseId}-holder`,
+          autoComplete: "cc-name",
+          value: holderName,
+          onChange: (e) => setHolderName(e.target.value),
+          disabled,
+          className: cn(inputClassName, inputClass)
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1.5", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "label",
+          {
+            htmlFor: `${baseId}-exp`,
+            className: cn("font-medium leading-none", labelClass),
+            children: labels.expiry
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("p", { className: "text-xs text-destructive", children: labels.expiredCard })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1.5", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "label",
+          {
+            htmlFor: `${baseId}-cvc`,
+            className: cn("font-medium leading-none", labelClass),
+            children: labels.cvc
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("p", { className: "text-xs text-destructive", children: labels.invalidCvc })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      Button,
+      {
+        type: "button",
+        disabled: !canSubmit || submitting,
+        onClick: () => void runTokenize(),
+        className: "gap-2",
+        children: [
+          submitting ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "h-4 w-4 animate-spin" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.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"
+  };
+}
+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,
+  showAutocompleteToggle = true
+}) {
+  const [autocompleteEnabled, setAutocompleteEnabled] = React2.useState(false);
+  const [searchQuery, setSearchQuery] = React2.useState("");
+  const [showSuggestions, setShowSuggestions] = React2.useState(false);
+  const [suggestions, setSuggestions] = React2.useState([]);
+  const [address, setAddress] = React2.useState(
+    () => parseInitial(value)
+  );
+  const [sessionToken] = React2.useState(
+    () => typeof crypto !== "undefined" && crypto.randomUUID ? crypto.randomUUID() : `${Date.now()}-${Math.random()}`
+  );
+  const [loadingAutocomplete, setLoadingAutocomplete] = React2.useState(false);
+  const [loadingZip, setLoadingZip] = React2.useState(false);
+  const [loadingValidate, setLoadingValidate] = React2.useState(false);
+  const [uspsSuggestion, setUspsSuggestion] = React2.useState(
+    null
+  );
+  const searchRef = React2.useRef(null);
+  const suggestionCache = React2.useRef(/* @__PURE__ */ new Map());
+  const warnedRef = React2.useRef({
+    autocomplete: false,
+    zip: false,
+    validate: false
+  });
+  const lastZipLookup = React2.useRef("");
+  const debouncedSearch = useDebouncedValue(searchQuery, 300);
+  const zipDigits = address.zip.replace(/\D/g, "").slice(0, 5);
+  const debouncedZip = useDebouncedValue(zipDigits, 400);
+  const inputClass = largeText ? "text-base py-3" : "";
+  const labelClass = largeText ? "text-base" : "text-sm";
+  React2.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)}`;
+  React2.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;
+    });
+  };
+  const allowAutocomplete = Boolean(autocomplete);
+  const allowUspsValidation = Boolean(validateAddress);
+  const allowZipLookup = Boolean(lookupZip);
+  React2.useEffect(() => {
+    if (!allowAutocomplete || !autocompleteEnabled || !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) => {
+      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,
+    autocompleteEnabled,
+    autocomplete,
+    sessionToken,
+    labels.autocompleteUnavailable,
+    onError
+  ]);
+  React2.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) => {
+      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
+  ]);
+  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);
+    } catch {
+      onError?.(labels.placeLookupFailed);
+    }
+  };
+  const runUspsValidate = async () => {
+    if (!allowUspsValidation || !validateAddress || disabled) return;
+    setLoadingValidate(true);
+    setUspsSuggestion(null);
+    try {
+      const result = await validateAddress(address, AbortSignal.timeout(8e3));
+      const std = result.standardized;
+      if (result.changed) {
+        setUspsSuggestion(std);
+      }
+    } catch {
+      if (!warnedRef.current.validate) {
+        onError?.(labels.uspsUnavailable);
+        warnedRef.current.validate = true;
+      }
+    } finally {
+      setLoadingValidate(false);
+    }
+  };
+  const applyUspsSuggestion = () => {
+    if (!uspsSuggestion) return;
+    setAddress(uspsSuggestion);
+    onChange(uspsSuggestion);
+    setUspsSuggestion(null);
+  };
+  const showAutocompleteUi = allowAutocomplete && showAutocompleteToggle && autocompleteEnabled;
+  const toggleTitle = labels.autocompleteTitle ?? labels.searchPlaceholder;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("space-y-4", className), children: [
+    allowAutocomplete && showAutocompleteToggle && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between rounded-lg border bg-muted/50 p-3", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MapPin, { className: "h-4 w-4 text-muted-foreground" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("font-medium", labelClass), children: toggleTitle }),
+          labels.autocompleteDescription ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground", children: labels.autocompleteDescription }) : null
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          role: "switch",
+          "aria-checked": autocompleteEnabled,
+          disabled,
+          onClick: () => setAutocompleteEnabled((v) => !v),
+          className: cn(
+            "relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors",
+            autocompleteEnabled ? "bg-primary" : "bg-input",
+            disabled && "cursor-not-allowed opacity-50"
+          ),
+          children: /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              className: cn(
+                "pointer-events-none block size-5 translate-x-0 rounded-full bg-background shadow-lg ring-0 transition-transform",
+                autocompleteEnabled && "translate-x-5"
+              )
+            }
+          )
+        }
+      )
+    ] }),
+    showAutocompleteUi && autocomplete && /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: searchRef, className: "relative", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, { className: "absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            value: searchQuery,
+            onChange: (e) => setSearchQuery(e.target.value),
+            placeholder: labels.searchPlaceholder,
+            disabled,
+            className: cn(inputClassName2, "pl-9 pr-9", inputClass)
+          }
+        ),
+        loadingAutocomplete && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "absolute right-10 top-1/2 h-4 w-4 -translate-y-1/2 animate-spin text-muted-foreground" }),
+        searchQuery ? /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.X, { className: "h-4 w-4" })
+          }
+        ) : null
+      ] }),
+      showSuggestions && suggestions.length > 0 && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium", children: suggestion.mainText }),
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground", children: suggestion.secondaryText })
+          ]
+        },
+        suggestion.placeId
+      )) })
+    ] }),
+    allowUspsValidation && uspsSuggestion && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium text-amber-900 dark:text-amber-100", children: labels.uspsSuggested }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground", children: [
+        uspsSuggestion.street,
+        uspsSuggestion.street2,
+        uspsSuggestion.city,
+        uspsSuggestion.state,
+        uspsSuggestion.zip
+      ].filter(Boolean).join(", ") }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap gap-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Button, { type: "button", size: "sm", onClick: applyUspsSuggestion, children: labels.uspsUseSuggestion }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Button,
+          {
+            type: "button",
+            size: "sm",
+            variant: "outline",
+            onClick: () => setUspsSuggestion(null),
+            children: labels.uspsKeepMine
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1.5", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "label",
+          {
+            htmlFor: "blocks-usaddress-street",
+            className: cn("font-medium leading-none", labelClass),
+            children: labels.street
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "space-y-1.5", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "label",
+          {
+            htmlFor: "blocks-usaddress-street2",
+            className: cn(
+              `${labelClass} text-muted-foreground`,
+              "leading-none"
+            ),
+            children: [
+              labels.street2 ?? "Address line 2",
+              " ",
+              labels.street2OptionalHint ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs", children: [
+                "(",
+                labels.street2OptionalHint,
+                ")"
+              ] }) : null
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1.5", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "label",
+            {
+              htmlFor: "blocks-usaddress-city",
+              className: cn("font-medium leading-none", labelClass),
+              children: labels.city
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "space-y-1.5", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "label",
+            {
+              htmlFor: "blocks-usaddress-state",
+              className: cn("font-medium leading-none", labelClass),
+              children: labels.state
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1.5", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "label",
+            {
+              htmlFor: "blocks-usaddress-zip",
+              className: cn("font-medium leading-none", labelClass),
+              children: labels.zip
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+            /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "absolute right-3 top-1/2 h-4 w-4 -translate-y-1/2 animate-spin text-muted-foreground" })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1.5", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "label",
+            {
+              htmlFor: "blocks-usaddress-country",
+              className: cn("font-medium leading-none", labelClass),
+              children: labels.countryLabel ?? "Country"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              id: "blocks-usaddress-country",
+              value: "United States",
+              readOnly: true,
+              disabled,
+              className: cn(inputClassName2, inputClass, "bg-muted/50"),
+              "aria-readonly": "true"
+            }
+          )
+        ] })
+      ] }),
+      allowUspsValidation && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ jsxRuntime.jsx(
+        Button,
+        {
+          type: "button",
+          variant: "secondary",
+          size: "sm",
+          disabled: disabled || loadingValidate,
+          onClick: () => void runUspsValidate(),
+          className: "gap-2",
+          children: loadingValidate ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "h-4 w-4 animate-spin" }),
+            labels.uspsValidating
+          ] }) : labels.uspsValidate
+        }
+      ) })
+    ] })
+  ] });
+}
 
 exports.AvatarEditor = AvatarEditor;
 exports.AvatarEditorDialog = AvatarEditorDialog;
@@ -7359,6 +8103,7 @@ exports.CalendarContext = CalendarContext;
 exports.CalendarSubscribeButton = CalendarSubscribeButton;
 exports.CalendarView = CalendarView;
 exports.CalendarWidget = CalendarWidget;
+exports.CardInput = CardInput;
 exports.ChatRoomView = ChatRoomView;
 exports.ChatSidebar = ChatSidebar;
 exports.ChatSidebarContext = ChatSidebarContext;
@@ -7423,6 +8168,7 @@ exports.Tooltip = Tooltip;
 exports.TooltipContent = TooltipContent;
 exports.TooltipProvider = TooltipProvider;
 exports.TooltipTrigger = TooltipTrigger;
+exports.USAddressInput = USAddressInput;
 exports.UpcomingEvents = UpcomingEvents;
 exports.buttonVariants = buttonVariants;
 exports.cn = cn;
@@ -7434,6 +8180,7 @@ exports.toggleVariants = toggleVariants;
 exports.useCalendarContext = useCalendarContext;
 exports.useChatRoom = useChatRoom;
 exports.useChatSidebar = useChatSidebar;
+exports.useDebouncedValue = useDebouncedValue;
 exports.useEnvironmentContext = useEnvironmentContext;
 exports.useLanguageContext = useLanguageContext;
 exports.useNotificationsContext = useNotificationsContext;