@bizapps/ui 1.3.7 → 1.4.0

package/dist/main.cjs

@@ -10,8 +10,10 @@ var react = require('react');
 var radixUi = require('radix-ui');
 var dateFns = require('date-fns');
 var useEmblaCarousel = require('embla-carousel-react');
-var react$1 = require('motion/react');
+var libphonenumberJs = require('libphonenumber-js');
 var cmdk = require('cmdk');
+var _3x2 = require('country-flag-icons/react/3x2');
+var react$1 = require('motion/react');
 var reactDropzone = require('react-dropzone');
 var Color = require('color');
 var reactDayPicker = require('react-day-picker');
@@ -1052,6 +1054,410 @@ function Link({
     }
   );
 }
+function Popover({ ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(radixUi.Popover.Root, { "data-slot": "popover", ...props });
+}
+function PopoverTrigger({ ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(radixUi.Popover.Trigger, { "data-slot": "popover-trigger", ...props });
+}
+function PopoverContent({
+  className,
+  align = "center",
+  sideOffset = 4,
+  container,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(radixUi.Popover.Portal, { container, children: /* @__PURE__ */ jsxRuntime.jsx(
+    radixUi.Popover.Content,
+    {
+      "data-slot": "popover-content",
+      align,
+      sideOffset,
+      className: cn(
+        "bg-popover text-popover-foreground ring-foreground/5 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 z-50 flex w-72 origin-(--radix-popover-content-transform-origin) flex-col gap-1 rounded-3xl p-4 text-sm shadow-lg ring-1 outline-hidden duration-100",
+        className
+      ),
+      ...props
+    }
+  ) });
+}
+function PopoverAnchor({ ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(radixUi.Popover.Anchor, { "data-slot": "popover-anchor", ...props });
+}
+function PopoverHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "popover-header",
+      className: cn("flex flex-col gap-1 text-sm", className),
+      ...props
+    }
+  );
+}
+function PopoverTitle({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "popover-title",
+      className: cn("text-base font-medium", className),
+      ...props
+    }
+  );
+}
+function PopoverDescription({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "p",
+    {
+      "data-slot": "popover-description",
+      className: cn("text-muted-foreground", className),
+      ...props
+    }
+  );
+}
+function stripLeadingDialCode(raw, dialCode) {
+  if (!raw.startsWith("+")) {
+    return raw.replace(/\D/g, "");
+  }
+  const parsed = libphonenumberJs.parsePhoneNumberFromString(raw);
+  if (parsed) {
+    return parsed.nationalNumber;
+  }
+  const digits = raw.replace(/\D/g, "");
+  const code = dialCode.replace(/\D/g, "");
+  return code && digits.startsWith(code) ? digits.length > code.length ? digits.slice(code.length) : "" : digits;
+}
+var flagByCode = {
+  AR: _3x2.AR,
+  BO: _3x2.BO,
+  BR: _3x2.BR,
+  CA: _3x2.CA,
+  CL: _3x2.CL,
+  CO: _3x2.CO,
+  CR: _3x2.CR,
+  CU: _3x2.CU,
+  DE: _3x2.DE,
+  DO: _3x2.DO,
+  EC: _3x2.EC,
+  ES: _3x2.ES,
+  FR: _3x2.FR,
+  GB: _3x2.GB,
+  GT: _3x2.GT,
+  HN: _3x2.HN,
+  IN: _3x2.IN,
+  IT: _3x2.IT,
+  MX: _3x2.MX,
+  NI: _3x2.NI,
+  PA: _3x2.PA,
+  PE: _3x2.PE,
+  PT: _3x2.PT,
+  PY: _3x2.PY,
+  SV: _3x2.SV,
+  US: _3x2.US,
+  UY: _3x2.UY,
+  VE: _3x2.VE
+};
+function CountryFlag({
+  code,
+  flagUrl,
+  className
+}) {
+  if (flagUrl) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "img",
+      {
+        src: flagUrl,
+        alt: "",
+        "aria-hidden": "true",
+        className: cn("size-4 shrink-0 rounded-[2px] object-cover", className)
+      }
+    );
+  }
+  const FlagComponent = flagByCode[(code || "").toUpperCase()];
+  if (FlagComponent) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      FlagComponent,
+      {
+        "aria-hidden": "true",
+        className: cn("size-4 shrink-0 rounded-[2px]", className)
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", className: cn("bg-muted size-4 shrink-0 rounded-full", className) });
+}
+function PhoneField({
+  countries,
+  value,
+  onValueChange,
+  defaultCountry,
+  placeholder = "Phone number",
+  disabled = false,
+  className,
+  container,
+  name,
+  ...inputProps
+}) {
+  const [open, setOpen] = react.useState(false);
+  const [pickedCode, setPickedCode] = react.useState(
+    (defaultCountry ?? countries[0]?.code)?.toUpperCase()
+  );
+  const [internalValue, setInternalValue] = react.useState("");
+  const listRef = react.useRef(null);
+  const inputRef = react.useRef(null);
+  const caretRef = react.useRef(null);
+  const listId = `${react.useId()}-countries-list`;
+  const isControlled = value !== void 0;
+  const currentValue = isControlled ? value : internalValue;
+  const parsed = currentValue ? libphonenumberJs.parsePhoneNumberFromString(currentValue) : void 0;
+  const parsedCountry = parsed?.country;
+  const parsedCallingCode = parsed?.countryCallingCode;
+  const countryInList = parsedCountry !== void 0 && countries.some((country) => country.code.toUpperCase() === parsedCountry);
+  const callingCodeInList = parsedCallingCode !== void 0 && countries.some(
+    (country) => country.dialCode.replace(/\D/g, "") === parsedCallingCode
+  );
+  const representedCode = countryInList ? parsedCountry : callingCodeInList ? countries.find(
+    (country) => country.dialCode.replace(/\D/g, "") === parsedCallingCode
+  )?.code : void 0;
+  const selectedCode = representedCode ?? pickedCode ?? defaultCountry ?? countries[0]?.code;
+  const selectedCountry = countries.find(
+    (country) => country.code.toUpperCase() === selectedCode?.toUpperCase()
+  ) ?? countries[0];
+  const dialCode = selectedCountry ? selectedCountry.dialCode.replace(/\D/g, "") : "";
+  const emitDialCode = parsedCallingCode ?? dialCode;
+  const nationalDigits = parsed ? parsed.nationalNumber : currentValue ? stripLeadingDialCode(currentValue, dialCode) : "";
+  const canFormat = selectedCountry !== void 0 && (!parsed || countryInList || callingCodeInList);
+  const inputValue = selectedCountry && canFormat && nationalDigits ? new libphonenumberJs.AsYouType((selectedCountry.code || "").toUpperCase()).input(
+    nationalDigits
+  ) : nationalDigits;
+  const isInvalid = inputProps["aria-invalid"] === true || inputProps["aria-invalid"] === "true";
+  react.useLayoutEffect(() => {
+    const input = inputRef.current;
+    const caret = caretRef.current;
+    if (!input || !caret || document.activeElement !== input) {
+      return;
+    }
+    const digitsBefore = caret.raw.slice(0, caret.start).replace(/\D/g, "").length;
+    let position = 0;
+    if (digitsBefore > 0) {
+      let digitsSeen = 0;
+      for (let i = 0; i < inputValue.length; i++) {
+        if (/\d/.test(inputValue[i])) {
+          digitsSeen += 1;
+        }
+        position = i + 1;
+        if (digitsSeen >= digitsBefore) {
+          break;
+        }
+      }
+    }
+    input.setSelectionRange(position, position + (caret.end - caret.start));
+    caretRef.current = null;
+  }, [inputValue]);
+  const handleSearchChange = () => {
+    requestAnimationFrame(() => listRef.current?.scrollTo({ top: 0 }));
+  };
+  function handleCountrySelect(code) {
+    setPickedCode(code);
+    setOpen(false);
+    const nextCountry = countries.find(
+      (country) => country.code.toUpperCase() === code.toUpperCase()
+    );
+    if (nextCountry && nationalDigits) {
+      const next = `+${nextCountry.dialCode.replace(/\D/g, "")}${nationalDigits}`;
+      onValueChange?.(next);
+      if (!isControlled) {
+        setInternalValue(next);
+      }
+    }
+  }
+  function deriveFromE164(e164) {
+    const parsed2 = libphonenumberJs.parsePhoneNumberFromString(e164);
+    if (!parsed2?.nationalNumber) {
+      return void 0;
+    }
+    const countryMatch = parsed2.country ? countries.find((country) => country.code.toUpperCase() === parsed2.country) : void 0;
+    const nextPickedCode = countryMatch ? countryMatch.code : parsed2.countryCallingCode ? countries.find(
+      (country) => country.dialCode.replace(/\D/g, "") === parsed2.countryCallingCode
+    )?.code : void 0;
+    return {
+      nationalNumber: parsed2.nationalNumber,
+      emitCode: parsed2.countryCallingCode,
+      nextPickedCode
+    };
+  }
+  function handleInputChange(raw, nativeEvent) {
+    const input = inputRef.current;
+    if (input) {
+      caretRef.current = {
+        raw,
+        start: input.selectionStart ?? raw.length,
+        end: input.selectionEnd ?? raw.length
+      };
+    }
+    if (!selectedCountry) return;
+    let national = stripLeadingDialCode(raw, dialCode);
+    let emitCode = emitDialCode;
+    let nextPickedCode;
+    const plusIndex = raw.indexOf("+");
+    if (plusIndex === 0) {
+      const derived = deriveFromE164(raw);
+      if (derived) {
+        emitCode = derived.emitCode || emitDialCode;
+        nextPickedCode = derived.nextPickedCode;
+      } else if (nativeEvent?.inputType === "insertFromPaste") {
+        national = "";
+      }
+    } else if (plusIndex > 0) {
+      const pasted = nativeEvent?.inputType === "insertFromPaste" && nativeEvent.data?.startsWith("+") ? nativeEvent.data : void 0;
+      if (pasted) {
+        const derived = deriveFromE164(pasted);
+        const prefixDigits = raw.slice(0, plusIndex).replace(/\D/g, "");
+        const suffixDigits = raw.slice(plusIndex + pasted.length).replace(/\D/g, "");
+        if (derived) {
+          national = prefixDigits + derived.nationalNumber + suffixDigits;
+          emitCode = derived.emitCode || emitDialCode;
+          nextPickedCode = derived.nextPickedCode;
+        } else {
+          national = prefixDigits + suffixDigits;
+        }
+      }
+    }
+    if (nextPickedCode) {
+      setPickedCode(nextPickedCode);
+    }
+    if (!national) {
+      onValueChange?.("");
+      if (!isControlled) {
+        setInternalValue("");
+      }
+      return;
+    }
+    const next = `+${emitCode}${national}`;
+    onValueChange?.(next);
+    if (!isControlled) {
+      setInternalValue(next);
+    }
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      "data-slot": "phone-field",
+      "data-invalid": isInvalid || void 0,
+      className: cn(
+        "border-input flex h-9 w-full min-w-0 items-center overflow-hidden rounded-md border bg-transparent shadow-xs transition-[color,box-shadow]",
+        "focus-within:border-ring focus-within:ring-ring/30 focus-within:ring-3",
+        "data-[invalid=true]:border-destructive data-[invalid=true]:ring-destructive/20 data-[invalid=true]:ring-3",
+        "dark:data-[invalid=true]:border-destructive/50 dark:data-[invalid=true]:ring-destructive/40",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(Popover, { open, onOpenChange: setOpen, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              "data-slot": "phone-field-country-select",
+              disabled,
+              "aria-expanded": open,
+              "aria-haspopup": "listbox",
+              "aria-controls": open ? listId : void 0,
+              "aria-label": selectedCountry ? `${selectedCountry.name} ${selectedCountry.dialCode}` : void 0,
+              className: cn(
+                "flex h-full shrink-0 cursor-pointer items-center gap-1.5 border-r border-input px-2.5 text-sm font-medium outline-none select-none",
+                "hover:bg-muted",
+                "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50"
+              ),
+              children: selectedCountry && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  CountryFlag,
+                  {
+                    code: selectedCountry.code,
+                    flagUrl: selectedCountry.flagUrl
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "tabular-nums", children: selectedCountry.dialCode }),
+                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronsUpDownIcon, { size: 14, className: "text-muted-foreground shrink-0" })
+              ] })
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            PopoverContent,
+            {
+              className: "w-72 rounded-xl p-0",
+              align: "start",
+              container,
+              children: /* @__PURE__ */ jsxRuntime.jsxs(cmdk.Command, { className: "rounded-xl", label: "Search countries", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border-border flex items-center gap-2 border-b px-3", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.SearchIcon, { size: 14, className: "text-muted-foreground shrink-0" }),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    cmdk.Command.Input,
+                    {
+                      placeholder: "Search country...",
+                      onValueChange: handleSearchChange,
+                      className: "placeholder:text-muted-foreground flex h-9 w-full bg-transparent py-2 text-sm outline-none"
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsx("div", { id: listId, children: /* @__PURE__ */ jsxRuntime.jsxs(cmdk.Command.List, { ref: listRef, className: "max-h-56 overflow-y-auto p-1", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(cmdk.Command.Empty, { className: "text-muted-foreground py-4 text-center text-sm", children: "No country found." }),
+                  countries.map((country) => /* @__PURE__ */ jsxRuntime.jsxs(
+                    cmdk.Command.Item,
+                    {
+                      value: country.code,
+                      keywords: [country.name, country.dialCode],
+                      "data-slot": "phone-field-country-item",
+                      onSelect: () => handleCountrySelect(country.code),
+                      className: cn(
+                        "flex cursor-pointer items-center justify-between gap-2 rounded-md px-2 py-1.5 text-sm outline-none select-none",
+                        "data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground",
+                        "hover:bg-accent hover:text-accent-foreground"
+                      ),
+                      children: [
+                        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex min-w-0 items-center gap-2", children: [
+                          /* @__PURE__ */ jsxRuntime.jsx(CountryFlag, { code: country.code, flagUrl: country.flagUrl }),
+                          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: country.name })
+                        ] }),
+                        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-2", children: [
+                          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground tabular-nums", children: country.dialCode }),
+                          selectedCode?.toUpperCase() === country.code.toUpperCase() && /* @__PURE__ */ jsxRuntime.jsx(
+                            lucideReact.CheckIcon,
+                            {
+                              size: 14,
+                              className: "text-[var(--color-main-blue-primary)] shrink-0"
+                            }
+                          )
+                        ] })
+                      ]
+                    },
+                    country.code
+                  ))
+                ] }) })
+              ] })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Input,
+          {
+            ref: inputRef,
+            ...inputProps,
+            "data-slot": "phone-field-input",
+            type: "tel",
+            value: inputValue,
+            onChange: (event) => handleInputChange(event.target.value, event.nativeEvent),
+            placeholder,
+            disabled,
+            autoComplete: inputProps.autoComplete ?? "tel",
+            className: cn(
+              "h-full flex-1 rounded-none border-0 bg-transparent shadow-none",
+              "px-3 focus-visible:border-transparent focus-visible:ring-0"
+            )
+          }
+        ),
+        name !== void 0 && /* @__PURE__ */ jsxRuntime.jsx("input", { type: "hidden", name, value: currentValue, "data-slot": "phone-field-hidden-input" })
+      ]
+    }
+  );
+}
 function PinInput({
   length = 6,
   value = "",
@@ -2116,66 +2522,6 @@ function TooltipContent({
     }
   ) });
 }
-function Popover({ ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(radixUi.Popover.Root, { "data-slot": "popover", ...props });
-}
-function PopoverTrigger({ ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(radixUi.Popover.Trigger, { "data-slot": "popover-trigger", ...props });
-}
-function PopoverContent({
-  className,
-  align = "center",
-  sideOffset = 4,
-  container,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(radixUi.Popover.Portal, { container, children: /* @__PURE__ */ jsxRuntime.jsx(
-    radixUi.Popover.Content,
-    {
-      "data-slot": "popover-content",
-      align,
-      sideOffset,
-      className: cn(
-        "bg-popover text-popover-foreground ring-foreground/5 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 z-50 flex w-72 origin-(--radix-popover-content-transform-origin) flex-col gap-1 rounded-3xl p-4 text-sm shadow-lg ring-1 outline-hidden duration-100",
-        className
-      ),
-      ...props
-    }
-  ) });
-}
-function PopoverAnchor({ ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(radixUi.Popover.Anchor, { "data-slot": "popover-anchor", ...props });
-}
-function PopoverHeader({ className, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      "data-slot": "popover-header",
-      className: cn("flex flex-col gap-1 text-sm", className),
-      ...props
-    }
-  );
-}
-function PopoverTitle({ className, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      "data-slot": "popover-title",
-      className: cn("text-base font-medium", className),
-      ...props
-    }
-  );
-}
-function PopoverDescription({ className, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "p",
-    {
-      "data-slot": "popover-description",
-      className: cn("text-muted-foreground", className),
-      ...props
-    }
-  );
-}
 var TEXT_SIZES = [12, 14, 16, 18, 20, 24, 28, 32, 40, 48];
 var TEXT_WEIGHTS = [100, 200, 300, 400, 500, 700, 800, 900];
 function Text({
@@ -8949,6 +9295,7 @@ exports.PaginationItem = PaginationItem;
 exports.PaginationLink = PaginationLink;
 exports.PaginationNext = PaginationNext;
 exports.PaginationPrevious = PaginationPrevious;
+exports.PhoneField = PhoneField;
 exports.PinInput = PinInput;
 exports.Popover = Popover;
 exports.PopoverAnchor = PopoverAnchor;