@moontra/moonui-pro 2.6.2 → 2.7.0

package/dist/index.mjs

@@ -3,7 +3,7 @@ import { twMerge } from 'tailwind-merge';
 import * as t from 'react';
 import t__default, { useState, useRef, useCallback, forwardRef, createContext, useEffect, useContext, useMemo, useLayoutEffect, useDebugValue, Component } from 'react';
 import * as AccordionPrimitive from '@radix-ui/react-accordion';
-import { ChevronDown, Info, AlertCircle, AlertTriangle, Check, X, MoreHorizontal, Loader2, Minus, Search, ChevronRight, Circle, ChevronUp, Lock, Sparkles, Plus, ChevronLeft, Calendar as Calendar$1, Edit, Trash2, Clock, MapPin, User, GripVertical, MessageCircle, Paperclip, Bold as Bold$1, Italic as Italic$1, Underline as Underline$1, Strikethrough, Code as Code$1, Type, Heading1, Heading2, Heading3, AlignLeft, AlignCenter, AlignRight, AlignJustify, List, ListOrdered, CheckSquare, Quote, Palette, Highlighter, Link2, Image as Image$1, Table as Table$1, Settings, Undo, Redo, Eye, RefreshCw, Wand2, Maximize, FileText, Languages, TrendingUp, TrendingDown, ZoomOut, ZoomIn, Download, FileSpreadsheet, FileJson, Maximize2, Move, Menu, Bell, CheckCheck, CheckCircle, Settings2, LogOut, Edit3, LayoutGrid, Upload, Share2, Save, CheckCircle2, Filter, FileDown, ArrowUp, ArrowDown, ArrowUpDown, ChevronsLeft, ChevronsRight, Pin, Sun, Moon, Monitor, XCircle, Trophy, RotateCcw, ExternalLink, CalendarIcon, DollarSign, Users, Github, Star, GitFork, Activity, Server, EyeOff, RotateCw, Zap, Timer, Cpu, MemoryStick, HardDrive, Network, BarChart3, Video, Music, Archive, File as File$1, Columns, Grip, Unlock, Minimize2, Map as Map$1, Target, MoreVertical, BellOff, ArrowDownRight, ArrowUpRight } from 'lucide-react';
+import { ChevronDown, Info, AlertCircle, AlertTriangle, Check, X, MoreHorizontal, Loader2, Minus, Search, ChevronRight, Circle, ChevronUp, Lock, Sparkles, Plus, CreditCard, Globe, ChevronLeft, Calendar as Calendar$1, Edit, Trash2, Clock, MapPin, User, GripVertical, MessageCircle, Paperclip, Bold as Bold$1, Italic as Italic$1, Underline as Underline$1, Strikethrough, Code as Code$1, Type, Heading1, Heading2, Heading3, AlignLeft, AlignCenter, AlignRight, AlignJustify, List, ListOrdered, CheckSquare, Quote, Palette, Highlighter, Link2, Image as Image$1, Table as Table$1, Settings, Undo, Redo, Eye, RefreshCw, Wand2, Maximize, FileText, Languages, TrendingUp, TrendingDown, ZoomOut, ZoomIn, Download, FileSpreadsheet, FileJson, Maximize2, Move, Menu, Bell, CheckCheck, CheckCircle, Settings2, LogOut, Edit3, LayoutGrid, Upload, Share2, Save, CheckCircle2, Filter, FileDown, ArrowUp, ArrowDown, ArrowUpDown, ChevronsLeft, ChevronsRight, Pin, Sun, Moon, Monitor, XCircle, Trophy, RotateCcw, ExternalLink, CalendarIcon, DollarSign, Users, Github, Star, GitFork, Activity, Server, EyeOff, RotateCw, Zap, Timer, Cpu, MemoryStick, HardDrive, Network, BarChart3, Video, Music, Archive, File as File$1, Columns, Grip, Unlock, Minimize2, Map as Map$1, Target, MoreVertical, BellOff, ArrowDownRight, ArrowUpRight } from 'lucide-react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { cva } from 'class-variance-authority';
 import * as AvatarPrimitive from '@radix-ui/react-avatar';
@@ -4044,7 +4044,7 @@ var me = t.forwardRef((r3, o3) => {
     var e2;
     return Array.from(((e2 = I.current) == null ? void 0 : e2.querySelectorAll(ce)) || []);
   }
-  function X18(e2) {
+  function X19(e2) {
     let s3 = V()[e2];
     s3 && E.setState("value", s3.getAttribute(T));
   }
@@ -4059,10 +4059,10 @@ var me = t.forwardRef((r3, o3) => {
       s3 = e2 > 0 ? we(s3, N) : De(s3, N), i3 = s3 == null ? void 0 : s3.querySelector(ce);
     i3 ? E.setState("value", i3.getAttribute(T)) : Q(e2);
   }
-  let oe = () => X18(V().length - 1), ie3 = (e2) => {
+  let oe = () => X19(V().length - 1), ie3 = (e2) => {
     e2.preventDefault(), e2.metaKey ? oe() : e2.altKey ? re(1) : Q(1);
   }, se = (e2) => {
-    e2.preventDefault(), e2.metaKey ? X18(0) : e2.altKey ? re(-1) : Q(-1);
+    e2.preventDefault(), e2.metaKey ? X19(0) : e2.altKey ? re(-1) : Q(-1);
   };
   return t.createElement(Primitive2.div, { ref: o3, tabIndex: -1, ...O, "cmdk-root": "", onKeyDown: (e2) => {
     var s3;
@@ -4089,7 +4089,7 @@ var me = t.forwardRef((r3, o3) => {
           break;
         }
         case "Home": {
-          e2.preventDefault(), X18(0);
+          e2.preventDefault(), X19(0);
           break;
         }
         case "End": {
@@ -60477,7 +60477,7 @@ var FormWizardNavigation = ({
     )
   ] });
 };
-var FormWizardPro = t__default.forwardRef(({
+var MoonUIFormWizardPro = t__default.forwardRef(({
   steps,
   currentStep = 0,
   onStepChange,
@@ -60559,7 +60559,7 @@ var FormWizardPro = t__default.forwardRef(({
     }
   );
 });
-FormWizardPro.displayName = "FormWizardPro";
+MoonUIFormWizardPro.displayName = "MoonUIFormWizardPro";
 var r2 = (t4, r3, o3) => {
   if (t4 && "reportValidity" in t4) {
     const s3 = get(o3, r3);
@@ -72111,7 +72111,7 @@ function createStepSchema(fields) {
   });
   return external_exports.object(shape);
 }
-function MultiStepFormPro({
+function MoonUIMultiStepFormPro({
   steps,
   onSubmit,
   defaultValues,
@@ -72197,7 +72197,7 @@ function MultiStepFormPro({
     }
   };
   return /* @__PURE__ */ jsx(
-    FormWizardPro,
+    MoonUIFormWizardPro,
     {
       ...wizardProps,
       steps: wizardSteps,
@@ -72216,7 +72216,7 @@ function shuffleArray(array2) {
   }
   return shuffled;
 }
-var QuizFormPro = ({
+var MoonUIQuizFormPro = ({
   title,
   description,
   questions: initialQuestions,
@@ -72565,7 +72565,7 @@ var QuizFormPro = ({
       )
     ] }),
     /* @__PURE__ */ jsx(
-      FormWizardPro,
+      MoonUIFormWizardPro,
       {
         steps: wizardSteps,
         onComplete: handleQuizComplete,
@@ -72578,6 +72578,537 @@ var QuizFormPro = ({
     )
   ] });
 };
+var cardPatterns = {
+  visa: /^4/,
+  mastercard: /^5[1-5]/,
+  amex: /^3[47]/,
+  discover: /^6(?:011|5)/,
+  diners: /^3(?:0[0-5]|[68])/,
+  jcb: /^35/,
+  unionpay: /^62/
+};
+function formatCardNumber(value, cardType) {
+  const v = value.replace(/\s+/g, "").replace(/[^0-9]/gi, "");
+  const matches2 = cardType === "amex" ? v.match(/\d{1,4}/g) : v.match(/\d{1,4}/g);
+  return matches2 ? matches2.join(" ") : v;
+}
+function formatExpiry(value) {
+  const v = value.replace(/\s+/g, "").replace(/[^0-9]/gi, "");
+  if (v.length >= 2) {
+    return v.slice(0, 2) + (v.length > 2 ? "/" + v.slice(2, 4) : "");
+  }
+  return v;
+}
+function detectCardType(number4) {
+  const cleanNumber = number4.replace(/\s+/g, "");
+  for (const [type, pattern] of Object.entries(cardPatterns)) {
+    if (pattern.test(cleanNumber)) {
+      return type;
+    }
+  }
+  return null;
+}
+function validateCardNumber(number4) {
+  const cleanNumber = number4.replace(/\s+/g, "");
+  if (!/^\d+$/.test(cleanNumber))
+    return false;
+  let sum = 0;
+  let isEven = false;
+  for (let i3 = cleanNumber.length - 1; i3 >= 0; i3--) {
+    let digit = parseInt(cleanNumber.charAt(i3), 10);
+    if (isEven) {
+      digit *= 2;
+      if (digit > 9) {
+        digit -= 9;
+      }
+    }
+    sum += digit;
+    isEven = !isEven;
+  }
+  return sum % 10 === 0;
+}
+function validateExpiry(expiry) {
+  const parts = expiry.split("/");
+  if (parts.length !== 2)
+    return false;
+  const month = parseInt(parts[0], 10);
+  const year = parseInt("20" + parts[1], 10);
+  if (month < 1 || month > 12)
+    return false;
+  const now = /* @__PURE__ */ new Date();
+  const expiryDate = new Date(year, month - 1);
+  return expiryDate > now;
+}
+var MoonUICreditCardInputPro = t__default.forwardRef(({
+  value = { number: "", expiry: "", cvc: "", name: "" },
+  onChange,
+  showCardPreview = true,
+  showCardType = true,
+  showSecurityBadge = true,
+  autoFormat = true,
+  validateOnChange = false,
+  labels = {},
+  placeholders = {},
+  errors = {},
+  className,
+  inputClassName,
+  labelClassName,
+  errorClassName,
+  disabled,
+  required: required2,
+  ...props
+}, ref) => {
+  const [cardType, setCardType] = useState(null);
+  const [focused, setFocused] = useState(null);
+  const [localErrors, setLocalErrors] = useState({});
+  const numberRef = useRef(null);
+  const expiryRef = useRef(null);
+  const cvcRef = useRef(null);
+  const nameRef = useRef(null);
+  useEffect(() => {
+    const detectedType = detectCardType(value.number);
+    setCardType(detectedType);
+  }, [value.number]);
+  useEffect(() => {
+    if (!validateOnChange)
+      return;
+    const newErrors = {};
+    if (value.number && !validateCardNumber(value.number)) {
+      newErrors.number = "Invalid card number";
+    }
+    if (value.expiry && !validateExpiry(value.expiry)) {
+      newErrors.expiry = "Invalid expiry date";
+    }
+    if (value.cvc && (value.cvc.length < 3 || value.cvc.length > 4)) {
+      newErrors.cvc = "Invalid CVC";
+    }
+    setLocalErrors(newErrors);
+  }, [value, validateOnChange]);
+  const handleChange = (field, newValue) => {
+    let formattedValue = newValue;
+    if (autoFormat) {
+      if (field === "number") {
+        formattedValue = formatCardNumber(newValue, cardType || void 0);
+        const maxLength = cardType === "amex" ? 18 : 19;
+        if (formattedValue.length > maxLength)
+          return;
+      } else if (field === "expiry") {
+        formattedValue = formatExpiry(newValue);
+        if (formattedValue.length > 5)
+          return;
+      } else if (field === "cvc") {
+        formattedValue = newValue.replace(/\D/g, "");
+        const maxLength = cardType === "amex" ? 4 : 3;
+        if (formattedValue.length > maxLength)
+          return;
+      }
+    }
+    onChange?.({
+      ...value,
+      [field]: formattedValue
+    });
+    if (autoFormat) {
+      if (field === "number" && formattedValue.length === (cardType === "amex" ? 18 : 19)) {
+        expiryRef.current?.focus();
+      } else if (field === "expiry" && formattedValue.length === 5) {
+        cvcRef.current?.focus();
+      } else if (field === "cvc" && formattedValue.length === (cardType === "amex" ? 4 : 3)) {
+        nameRef.current?.focus();
+      }
+    }
+  };
+  const displayErrors = { ...localErrors, ...errors };
+  return /* @__PURE__ */ jsxs("div", { ref, className: cn("space-y-4", className), ...props, children: [
+    showCardPreview && /* @__PURE__ */ jsxs(
+      motion.div,
+      {
+        className: "relative w-full max-w-md mx-auto h-48 rounded-xl bg-gradient-to-r from-gray-700 to-gray-900 p-6 text-white shadow-xl",
+        initial: { opacity: 0, y: -20 },
+        animate: { opacity: 1, y: 0 },
+        transition: { duration: 0.3 },
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-start mb-8", children: [
+            /* @__PURE__ */ jsx("div", { className: "text-lg font-semibold", children: cardType ? cardType.toUpperCase() : "CARD" }),
+            /* @__PURE__ */ jsx(CreditCard, { className: "w-8 h-8" })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+            /* @__PURE__ */ jsx("div", { className: "text-xl font-mono tracking-wider", children: value.number || "\u2022\u2022\u2022\u2022 \u2022\u2022\u2022\u2022 \u2022\u2022\u2022\u2022 \u2022\u2022\u2022\u2022" }),
+            /* @__PURE__ */ jsxs("div", { className: "flex justify-between", children: [
+              /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsx("div", { className: "text-xs opacity-70", children: "NAME" }),
+                /* @__PURE__ */ jsx("div", { className: "text-sm uppercase", children: value.name || "YOUR NAME" })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsx("div", { className: "text-xs opacity-70", children: "EXPIRES" }),
+                /* @__PURE__ */ jsx("div", { className: "text-sm", children: value.expiry || "MM/YY" })
+              ] })
+            ] })
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+      /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+        /* @__PURE__ */ jsxs(MoonUILabelPro, { htmlFor: "card-number", className: labelClassName, children: [
+          labels.number || "Card Number",
+          required2 && /* @__PURE__ */ jsx("span", { className: "text-destructive ml-1", children: "*" })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+          /* @__PURE__ */ jsx(
+            MoonUIInputPro,
+            {
+              ref: numberRef,
+              id: "card-number",
+              type: "text",
+              inputMode: "numeric",
+              value: value.number,
+              onChange: (e2) => handleChange("number", e2.target.value),
+              onFocus: () => setFocused("number"),
+              onBlur: () => setFocused(null),
+              placeholder: placeholders.number || "1234 5678 9012 3456",
+              className: cn(
+                "pr-20",
+                displayErrors.number && "border-destructive",
+                inputClassName
+              ),
+              disabled
+            }
+          ),
+          showCardType && cardType && /* @__PURE__ */ jsx("div", { className: "absolute right-3 top-1/2 -translate-y-1/2 text-sm font-medium text-muted-foreground", children: cardType.toUpperCase() })
+        ] }),
+        displayErrors.number && /* @__PURE__ */ jsx("p", { className: cn("text-sm text-destructive", errorClassName), children: displayErrors.number })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
+        /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+          /* @__PURE__ */ jsxs(MoonUILabelPro, { htmlFor: "card-expiry", className: labelClassName, children: [
+            labels.expiry || "Expiry Date",
+            required2 && /* @__PURE__ */ jsx("span", { className: "text-destructive ml-1", children: "*" })
+          ] }),
+          /* @__PURE__ */ jsx(
+            MoonUIInputPro,
+            {
+              ref: expiryRef,
+              id: "card-expiry",
+              type: "text",
+              inputMode: "numeric",
+              value: value.expiry,
+              onChange: (e2) => handleChange("expiry", e2.target.value),
+              onFocus: () => setFocused("expiry"),
+              onBlur: () => setFocused(null),
+              placeholder: placeholders.expiry || "MM/YY",
+              className: cn(
+                displayErrors.expiry && "border-destructive",
+                inputClassName
+              ),
+              disabled
+            }
+          ),
+          displayErrors.expiry && /* @__PURE__ */ jsx("p", { className: cn("text-sm text-destructive", errorClassName), children: displayErrors.expiry })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+          /* @__PURE__ */ jsxs(MoonUILabelPro, { htmlFor: "card-cvc", className: labelClassName, children: [
+            labels.cvc || "CVC",
+            required2 && /* @__PURE__ */ jsx("span", { className: "text-destructive ml-1", children: "*" })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+            /* @__PURE__ */ jsx(
+              MoonUIInputPro,
+              {
+                ref: cvcRef,
+                id: "card-cvc",
+                type: "text",
+                inputMode: "numeric",
+                value: value.cvc,
+                onChange: (e2) => handleChange("cvc", e2.target.value),
+                onFocus: () => setFocused("cvc"),
+                onBlur: () => setFocused(null),
+                placeholder: placeholders.cvc || cardType === "amex" ? "1234" : "123",
+                className: cn(
+                  displayErrors.cvc && "border-destructive",
+                  inputClassName
+                ),
+                disabled
+              }
+            ),
+            showSecurityBadge && /* @__PURE__ */ jsx(Lock, { className: "absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" })
+          ] }),
+          displayErrors.cvc && /* @__PURE__ */ jsx("p", { className: cn("text-sm text-destructive", errorClassName), children: displayErrors.cvc })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+        /* @__PURE__ */ jsx(MoonUILabelPro, { htmlFor: "card-name", className: labelClassName, children: labels.name || "Cardholder Name" }),
+        /* @__PURE__ */ jsx(
+          MoonUIInputPro,
+          {
+            ref: nameRef,
+            id: "card-name",
+            type: "text",
+            value: value.name,
+            onChange: (e2) => handleChange("name", e2.target.value),
+            onFocus: () => setFocused("name"),
+            onBlur: () => setFocused(null),
+            placeholder: placeholders.name || "John Doe",
+            className: cn(
+              displayErrors.name && "border-destructive",
+              inputClassName
+            ),
+            disabled
+          }
+        ),
+        displayErrors.name && /* @__PURE__ */ jsx("p", { className: cn("text-sm text-destructive", errorClassName), children: displayErrors.name })
+      ] })
+    ] }),
+    showSecurityBadge && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-sm text-muted-foreground", children: [
+      /* @__PURE__ */ jsx(Lock, { className: "w-4 h-4" }),
+      /* @__PURE__ */ jsx("span", { children: "Your payment information is secure and encrypted" })
+    ] })
+  ] });
+});
+MoonUICreditCardInputPro.displayName = "MoonUICreditCardInputPro";
+var countries = [
+  { code: "US", name: "United States", dialCode: "+1", flag: "\u{1F1FA}\u{1F1F8}", format: "(xxx) xxx-xxxx" },
+  { code: "GB", name: "United Kingdom", dialCode: "+44", flag: "\u{1F1EC}\u{1F1E7}", format: "xxxx xxxxxx" },
+  { code: "TR", name: "Turkey", dialCode: "+90", flag: "\u{1F1F9}\u{1F1F7}", format: "(xxx) xxx xx xx" },
+  { code: "DE", name: "Germany", dialCode: "+49", flag: "\u{1F1E9}\u{1F1EA}", format: "xxx xxxxxxxx" },
+  { code: "FR", name: "France", dialCode: "+33", flag: "\u{1F1EB}\u{1F1F7}", format: "x xx xx xx xx" },
+  { code: "IT", name: "Italy", dialCode: "+39", flag: "\u{1F1EE}\u{1F1F9}", format: "xxx xxxxxxx" },
+  { code: "ES", name: "Spain", dialCode: "+34", flag: "\u{1F1EA}\u{1F1F8}", format: "xxx xxx xxx" },
+  { code: "CN", name: "China", dialCode: "+86", flag: "\u{1F1E8}\u{1F1F3}", format: "xxx xxxx xxxx" },
+  { code: "JP", name: "Japan", dialCode: "+81", flag: "\u{1F1EF}\u{1F1F5}", format: "xx xxxx xxxx" },
+  { code: "KR", name: "South Korea", dialCode: "+82", flag: "\u{1F1F0}\u{1F1F7}", format: "xx xxxx xxxx" },
+  { code: "IN", name: "India", dialCode: "+91", flag: "\u{1F1EE}\u{1F1F3}", format: "xxxxx xxxxx" },
+  { code: "BR", name: "Brazil", dialCode: "+55", flag: "\u{1F1E7}\u{1F1F7}", format: "(xx) xxxxx-xxxx" },
+  { code: "MX", name: "Mexico", dialCode: "+52", flag: "\u{1F1F2}\u{1F1FD}", format: "xxx xxx xxxx" },
+  { code: "CA", name: "Canada", dialCode: "+1", flag: "\u{1F1E8}\u{1F1E6}", format: "(xxx) xxx-xxxx" },
+  { code: "AU", name: "Australia", dialCode: "+61", flag: "\u{1F1E6}\u{1F1FA}", format: "xxx xxx xxx" },
+  { code: "RU", name: "Russia", dialCode: "+7", flag: "\u{1F1F7}\u{1F1FA}", format: "(xxx) xxx-xx-xx" },
+  { code: "NL", name: "Netherlands", dialCode: "+31", flag: "\u{1F1F3}\u{1F1F1}", format: "x xxxxxxxx" },
+  { code: "SE", name: "Sweden", dialCode: "+46", flag: "\u{1F1F8}\u{1F1EA}", format: "xx xxx xx xx" },
+  { code: "NO", name: "Norway", dialCode: "+47", flag: "\u{1F1F3}\u{1F1F4}", format: "xxx xx xxx" },
+  { code: "FI", name: "Finland", dialCode: "+358", flag: "\u{1F1EB}\u{1F1EE}", format: "xx xxxxxxx" }
+];
+function formatPhoneNumber(number4, format3) {
+  const cleaned = number4.replace(/\D/g, "");
+  let formatted = "";
+  let digitIndex = 0;
+  for (let i3 = 0; i3 < format3.length && digitIndex < cleaned.length; i3++) {
+    if (format3[i3] === "x") {
+      formatted += cleaned[digitIndex];
+      digitIndex++;
+    } else {
+      formatted += format3[i3];
+    }
+  }
+  return formatted;
+}
+function validatePhoneNumber(number4, countryCode) {
+  const cleaned = number4.replace(/\D/g, "");
+  const country = countries.find((c2) => c2.code === countryCode);
+  if (!country)
+    return false;
+  const expectedLength = country.format.split("").filter((c2) => c2 === "x").length;
+  return cleaned.length === expectedLength;
+}
+function toInternationalFormat(countryCode, phoneNumber) {
+  const country = countries.find((c2) => c2.code === countryCode);
+  if (!country)
+    return phoneNumber;
+  const cleaned = phoneNumber.replace(/\D/g, "");
+  return `${country.dialCode}${cleaned}`;
+}
+var MoonUIPhoneNumberInputPro = t__default.forwardRef(({
+  value = { country: "US", number: "" },
+  onChange,
+  defaultCountry = "US",
+  countries: customCountries,
+  showFlags = true,
+  showDialCode = true,
+  autoFormat = true,
+  validateOnChange = true,
+  showValidationIcon = true,
+  label,
+  error: error42,
+  helperText,
+  required: required2,
+  className,
+  inputClassName,
+  selectClassName,
+  labelClassName,
+  errorClassName,
+  disabled,
+  allowInternationalFormat = true,
+  ...props
+}, ref) => {
+  const [isValid, setIsValid] = useState(false);
+  const [isFocused, setIsFocused] = useState(false);
+  const inputRef = useRef(null);
+  const countryList = customCountries || countries;
+  const selectedCountry = countryList.find((c2) => c2.code === value.country) || countryList[0];
+  useEffect(() => {
+    if (validateOnChange && value.number) {
+      const valid = validatePhoneNumber(value.number, value.country);
+      setIsValid(valid);
+    }
+  }, [value, validateOnChange]);
+  const handleCountryChange = (countryCode) => {
+    const fullNumber = allowInternationalFormat ? toInternationalFormat(countryCode, value.number) : value.number;
+    onChange?.({
+      country: countryCode,
+      number: value.number,
+      fullNumber,
+      isValid: validatePhoneNumber(value.number, countryCode)
+    });
+  };
+  const handleNumberChange = (e2) => {
+    let newValue = e2.target.value;
+    if (autoFormat) {
+      const cleaned = newValue.replace(/\D/g, "");
+      newValue = formatPhoneNumber(cleaned, selectedCountry.format);
+    }
+    const valid = validatePhoneNumber(newValue, value.country);
+    const fullNumber = allowInternationalFormat ? toInternationalFormat(value.country, newValue) : newValue;
+    onChange?.({
+      country: value.country,
+      number: newValue,
+      fullNumber,
+      isValid: valid
+    });
+  };
+  const handlePaste2 = (e2) => {
+    if (!autoFormat)
+      return;
+    e2.preventDefault();
+    const pastedText = e2.clipboardData.getData("text");
+    const cleaned = pastedText.replace(/\D/g, "");
+    const formatted = formatPhoneNumber(cleaned, selectedCountry.format);
+    const valid = validatePhoneNumber(formatted, value.country);
+    const fullNumber = allowInternationalFormat ? toInternationalFormat(value.country, formatted) : formatted;
+    onChange?.({
+      country: value.country,
+      number: formatted,
+      fullNumber,
+      isValid: valid
+    });
+  };
+  return /* @__PURE__ */ jsxs("div", { ref, className: cn("space-y-2", className), ...props, children: [
+    label && /* @__PURE__ */ jsxs(MoonUILabelPro, { htmlFor: "phone-number", className: labelClassName, children: [
+      label,
+      required2 && /* @__PURE__ */ jsx("span", { className: "text-destructive ml-1", children: "*" })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+      /* @__PURE__ */ jsxs(
+        MoonUISelectPro,
+        {
+          value: value.country,
+          onValueChange: handleCountryChange,
+          disabled,
+          children: [
+            /* @__PURE__ */ jsx(
+              MoonUISelectTriggerPro,
+              {
+                className: cn(
+                  "w-[140px]",
+                  error42 && "border-destructive",
+                  selectClassName
+                ),
+                children: /* @__PURE__ */ jsx(MoonUISelectValuePro, { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                  showFlags && /* @__PURE__ */ jsx("span", { className: "text-lg", children: selectedCountry.flag }),
+                  showDialCode && /* @__PURE__ */ jsx("span", { className: "text-sm", children: selectedCountry.dialCode }),
+                  !showFlags && !showDialCode && /* @__PURE__ */ jsx("span", { className: "text-sm", children: selectedCountry.code })
+                ] }) })
+              }
+            ),
+            /* @__PURE__ */ jsx(MoonUISelectContentPro, { children: countryList.map((country) => /* @__PURE__ */ jsx(MoonUISelectItemPro, { value: country.code, children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+              showFlags && /* @__PURE__ */ jsx("span", { className: "text-lg", children: country.flag }),
+              /* @__PURE__ */ jsx("span", { className: "text-sm", children: country.name }),
+              showDialCode && /* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-sm", children: country.dialCode })
+            ] }) }, country.code)) })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "relative flex-1", children: [
+        /* @__PURE__ */ jsx(
+          MoonUIInputPro,
+          {
+            ref: inputRef,
+            id: "phone-number",
+            type: "tel",
+            value: value.number,
+            onChange: handleNumberChange,
+            onPaste: handlePaste2,
+            onFocus: () => setIsFocused(true),
+            onBlur: () => setIsFocused(false),
+            placeholder: selectedCountry.format.replace(/x/g, "\u2022"),
+            className: cn(
+              "pr-10",
+              error42 && "border-destructive",
+              inputClassName
+            ),
+            disabled
+          }
+        ),
+        showValidationIcon && value.number && /* @__PURE__ */ jsx("div", { className: "absolute right-3 top-1/2 -translate-y-1/2", children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: isValid ? /* @__PURE__ */ jsx(
+          motion.div,
+          {
+            initial: { scale: 0, opacity: 0 },
+            animate: { scale: 1, opacity: 1 },
+            exit: { scale: 0, opacity: 0 },
+            transition: { duration: 0.2 },
+            children: /* @__PURE__ */ jsx(Check, { className: "w-4 h-4 text-green-500" })
+          },
+          "valid"
+        ) : /* @__PURE__ */ jsx(
+          motion.div,
+          {
+            initial: { scale: 0, opacity: 0 },
+            animate: { scale: 1, opacity: 1 },
+            exit: { scale: 0, opacity: 0 },
+            transition: { duration: 0.2 },
+            children: /* @__PURE__ */ jsx(X, { className: "w-4 h-4 text-destructive" })
+          },
+          "invalid"
+        ) }) })
+      ] })
+    ] }),
+    (error42 || helperText) && /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: error42 ? /* @__PURE__ */ jsx(
+      motion.p,
+      {
+        initial: { opacity: 0, height: 0 },
+        animate: { opacity: 1, height: "auto" },
+        exit: { opacity: 0, height: 0 },
+        className: cn("text-sm text-destructive", errorClassName),
+        children: error42
+      },
+      "error"
+    ) : /* @__PURE__ */ jsx(
+      motion.p,
+      {
+        initial: { opacity: 0, height: 0 },
+        animate: { opacity: 1, height: "auto" },
+        exit: { opacity: 0, height: 0 },
+        className: "text-sm text-muted-foreground",
+        children: helperText
+      },
+      "helper"
+    ) }),
+    allowInternationalFormat && value.number && isValid && /* @__PURE__ */ jsxs(
+      motion.div,
+      {
+        initial: { opacity: 0, y: -10 },
+        animate: { opacity: 1, y: 0 },
+        className: "flex items-center gap-2 text-sm text-muted-foreground",
+        children: [
+          /* @__PURE__ */ jsx(Globe, { className: "w-4 h-4" }),
+          /* @__PURE__ */ jsxs("span", { children: [
+            "International: ",
+            toInternationalFormat(value.country, value.number)
+          ] })
+        ]
+      }
+    )
+  ] });
+});
+MoonUIPhoneNumberInputPro.displayName = "MoonUIPhoneNumberInputPro";
 
 // src/components/enhanced/index.ts
 var enhanced_exports = {};
@@ -73477,4 +74008,4 @@ var BadgePro = t__default.forwardRef(({
 });
 BadgePro.displayName = "BadgePro";
 
-export { MoonUIAccordionPro as Accordion, MoonUIAccordionContentPro as AccordionContent, MoonUIAccordionItemPro as AccordionItem, MoonUIAccordionTriggerPro as AccordionTrigger, Calendar3 as AdvancedCalendar, AdvancedChart, AdvancedForms, MoonUIAlertPro as Alert, MoonUIAlertDescriptionPro as AlertDescription, MoonUIAlertTitlePro as AlertTitle, AnimatedButton, MoonUIAspectRatioPro as AspectRatio, MoonUIAvatarPro as Avatar, MoonUIAvatarFallbackPro as AvatarFallback, MoonUIAvatarImagePro as AvatarImage, MoonUIBadgePro as Badge, MoonUIBreadcrumbPro as Breadcrumb, MoonUIBreadcrumbEllipsisPro as BreadcrumbEllipsis, MoonUIBreadcrumbItemPro as BreadcrumbItem, MoonUIBreadcrumbLinkPro as BreadcrumbLink, MoonUIBreadcrumbListPro as BreadcrumbList, MoonUIBreadcrumbPagePro as BreadcrumbPage, MoonUIBreadcrumbSeparatorPro as BreadcrumbSeparator, MoonUIButtonPro as Button, Calendar, MoonUICardPro as Card, MoonUICardContentPro as CardContent, MoonUICardDescriptionPro as CardDescription, MoonUICardFooterPro as CardFooter, MoonUICardHeaderPro as CardHeader, MoonUICardTitlePro as CardTitle, MoonUICheckboxPro as Checkbox, MoonUICollapsiblePro as Collapsible, MoonUICollapsibleContentPro as CollapsibleContent, MoonUICollapsibleTriggerPro as CollapsibleTrigger, MoonUIColorPickerPro as ColorPicker, MoonUICommandPro as Command, MoonUICommandDialogPro as CommandDialog, MoonUICommandEmptyPro as CommandEmpty, MoonUICommandGroupPro as CommandGroup, MoonUICommandInputPro as CommandInput, MoonUICommandItemPro as CommandItem, MoonUICommandListPro as CommandList, MoonUICommandSeparatorPro as CommandSeparator, MoonUICommandShortcutPro as CommandShortcut, Dashboard, DataTable, MoonUIDialogPro as Dialog, MoonUIDialogClosePro as DialogClose, MoonUIDialogContentPro as DialogContent, MoonUIDialogDescriptionPro as DialogDescription, MoonUIDialogFooterPro as DialogFooter, MoonUIDialogHeaderPro as DialogHeader, MoonUIDialogTitlePro as DialogTitle, MoonUIDialogTriggerPro as DialogTrigger, DraggableList, MoonUIDropdownMenuPro as DropdownMenu, MoonUIDropdownMenuCheckboxItemPro as DropdownMenuCheckboxItem, MoonUIDropdownMenuContentPro as DropdownMenuContent, MoonUIDropdownMenuGroupPro as DropdownMenuGroup, MoonUIDropdownMenuItemPro as DropdownMenuItem, MoonUIDropdownMenuLabelPro as DropdownMenuLabel, MoonUIDropdownMenuPortalPro as DropdownMenuPortal, MoonUIDropdownMenuRadioGroupPro as DropdownMenuRadioGroup, MoonUIDropdownMenuRadioItemPro as DropdownMenuRadioItem, MoonUIDropdownMenuSeparatorPro as DropdownMenuSeparator, MoonUIDropdownMenuShortcutPro as DropdownMenuShortcut, MoonUIDropdownMenuSubPro as DropdownMenuSub, MoonUIDropdownMenuSubContentPro as DropdownMenuSubContent, MoonUIDropdownMenuSubTriggerPro as DropdownMenuSubTrigger, MoonUIDropdownMenuTriggerPro as DropdownMenuTrigger, enhanced_exports as Enhanced, ErrorBoundary, FileUpload, FloatingActionButton, FormWizardNavigation, FormWizardPro, FormWizardProgress, FormWizardStep, GitHubStars, HealthCheck, HoverCard2 as HoverCard, HoverCard3D, HoverCardContent2 as HoverCardContent, HoverCardTrigger2 as HoverCardTrigger, MoonUIInputPro as Input, Kanban, MoonUILabelPro as Label, LazyComponent, LazyImage, LazyList, MagneticButton, MemoryAnalytics, MemoryEfficientData, MoonUIAccordionContentPro, MoonUIAccordionItemPro, MoonUIAccordionPro, MoonUIAccordionTriggerPro, MoonUIAlertDescriptionPro, MoonUIAlertPro, MoonUIAlertTitlePro, MoonUIAspectRatioPro, MoonUIAvatarFallbackPro, MoonUIAvatarImagePro, MoonUIAvatarPro, MoonUIBadgePro, MoonUIBreadcrumbEllipsisPro, MoonUIBreadcrumbItemPro, MoonUIBreadcrumbLinkPro, MoonUIBreadcrumbListPro, MoonUIBreadcrumbPagePro, MoonUIBreadcrumbPro, MoonUIBreadcrumbSeparatorPro, MoonUIButtonPro, MoonUICardContentPro, MoonUICardDescriptionPro, MoonUICardFooterPro, MoonUICardHeaderPro, MoonUICardPro, MoonUICardTitlePro, MoonUICheckboxPro, MoonUICollapsibleContentPro, MoonUICollapsiblePro, MoonUICollapsibleTriggerPro, MoonUIColorPickerPro, MoonUICommandDialogPro, MoonUICommandEmptyPro, MoonUICommandGroupPro, MoonUICommandInputPro, MoonUICommandItemPro, MoonUICommandListPro, MoonUICommandPro, MoonUICommandSeparatorPro, MoonUICommandShortcutPro, MoonUIDialogClosePro, MoonUIDialogContentPro, MoonUIDialogDescriptionPro, MoonUIDialogFooterPro, MoonUIDialogHeaderPro, MoonUIDialogPro, MoonUIDialogTitlePro, MoonUIDialogTriggerPro, MoonUIDropdownMenuCheckboxItemPro, MoonUIDropdownMenuContentPro, MoonUIDropdownMenuGroupPro, MoonUIDropdownMenuItemPro, MoonUIDropdownMenuLabelPro, MoonUIDropdownMenuPortalPro, MoonUIDropdownMenuPro, MoonUIDropdownMenuRadioGroupPro, MoonUIDropdownMenuRadioItemPro, MoonUIDropdownMenuSeparatorPro, MoonUIDropdownMenuShortcutPro, MoonUIDropdownMenuSubContentPro, MoonUIDropdownMenuSubPro, MoonUIDropdownMenuSubTriggerPro, MoonUIDropdownMenuTriggerPro, MoonUIInputPro, MoonUILabelPro, MoonUIPaginationContentPro, MoonUIPaginationEllipsisPro, MoonUIPaginationItemPro, MoonUIPaginationLinkPro, MoonUIPaginationNextPro, MoonUIPaginationPreviousPro, MoonUIPaginationPro, MoonUIPopoverContentPro, MoonUIPopoverPro, MoonUIPopoverTriggerPro, MoonUIProgressPro, MoonUIRadioGroupContextPro, MoonUIRadioGroupItemPro, MoonUIRadioGroupPro, MoonUIRadioItemWithLabelPro, MoonUIRadioLabelPro, MoonUISelectContentPro, MoonUISelectGroupPro, MoonUISelectItemPro, MoonUISelectLabelPro, MoonUISelectPro, MoonUISelectSeparatorPro, MoonUISelectTriggerPro, MoonUISelectValuePro, MoonUISeparatorPro, MoonUISkeletonPro, MoonUISliderPro, MoonUISwitchPro, MoonUITableBodyPro, MoonUITableCaptionPro, MoonUITableCellPro, MoonUITableFooterPro, MoonUITableHeadPro, MoonUITableHeaderPro, MoonUITablePro, MoonUITableRowPro, MoonUITabsContentPro, MoonUITabsListPro, MoonUITabsPro, MoonUITabsTriggerPro, MoonUITextareaPro, MoonUIToastPro, MoonUITogglePro, MoonUITooltipContentPro, MoonUITooltipPro, MoonUITooltipProviderPro, MoonUITooltipTriggerPro, MoonUIalertVariantsPro, MoonUIaspectRatioVariantsPro, MoonUIbreadcrumbVariantsPro, MoonUIcollapsibleContentVariantsPro, MoonUIcollapsibleTriggerVariantsPro, MoonUIcommandVariantsPro, MoonUIradioGroupItemVariantsPro, MoonUItableVariantsPro, MoonUItoggleVariantsPro, MultiStepFormPro, OptimizedImage, MoonUIPaginationPro as Pagination, MoonUIPaginationContentPro as PaginationContent, MoonUIPaginationEllipsisPro as PaginationEllipsis, MoonUIPaginationItemPro as PaginationItem, MoonUIPaginationLinkPro as PaginationLink, MoonUIPaginationNextPro as PaginationNext, MoonUIPaginationPreviousPro as PaginationPrevious, PerformanceDebugger, PerformanceMonitor, PinchZoom, MoonUIPopoverPro as Popover, MoonUIPopoverContentPro as PopoverContent, MoonUIPopoverTriggerPro as PopoverTrigger, MoonUIProgressPro as Progress, QuizFormPro, MoonUIRadioGroupPro as RadioGroup, MoonUIRadioGroupContextPro as RadioGroupContext, MoonUIRadioGroupItemPro as RadioGroupItem, MoonUIRadioItemWithLabelPro as RadioItemWithLabel, MoonUIRadioLabelPro as RadioLabel, RichTextEditor, ScrollArea, ScrollBar, MoonUISelectPro as Select, MoonUISelectContentPro as SelectContent, MoonUISelectGroupPro as SelectGroup, MoonUISelectItemPro as SelectItem, MoonUISelectLabelPro as SelectLabel, MoonUISelectSeparatorPro as SelectSeparator, MoonUISelectTriggerPro as SelectTrigger, MoonUISelectValuePro as SelectValue, SelectableVirtualList, MoonUISeparatorPro as Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Sidebar, MoonUISkeletonPro as Skeleton, MoonUISliderPro as Slider, SpotlightCard, SwipeableCard, MoonUISwitchPro as Switch, MoonUITablePro as Table, MoonUITableBodyPro as TableBody, MoonUITableCaptionPro as TableCaption, MoonUITableCellPro as TableCell, MoonUITableFooterPro as TableFooter, MoonUITableHeadPro as TableHead, MoonUITableHeaderPro as TableHeader, MoonUITableRowPro as TableRow, MoonUITabsPro as Tabs, MoonUITabsContentPro as TabsContent, MoonUITabsListPro as TabsList, MoonUITabsTriggerPro as TabsTrigger, MoonUITextareaPro as Textarea, Timeline, MoonUIToastPro as Toast, MoonUITogglePro as Toggle, MoonUITooltipPro as Tooltip, MoonUITooltipContentPro as TooltipContent, MoonUITooltipProviderPro as TooltipProvider, MoonUITooltipTriggerPro as TooltipTrigger, VirtualList, MoonUIalertVariantsPro as alertVariants, animatedButtonVariants, MoonUIaspectRatioVariantsPro as aspectRatioVariants, moonUIBadgeVariantsPro as badgeVariants, MoonUIbreadcrumbVariantsPro as breadcrumbVariants, moonUIButtonProVariants as buttonVariants, cn, MoonUIcollapsibleContentVariantsPro as collapsibleContentVariants, MoonUIcollapsibleTriggerVariantsPro as collapsibleTriggerVariants, MoonUIcommandVariantsPro as commandVariants, getExpandableColumn, moonUIBadgeVariantsPro, moonUIButtonProVariants, moonUISeparatorVariantsPro, MoonUIradioGroupItemVariantsPro as radioGroupItemVariants, moonUISeparatorVariantsPro as separatorVariants, MoonUItableVariantsPro as tableVariants, MoonUItoggleVariantsPro as toggleVariants, useExpandableRows, useFormWizard, useStreamingData, useVirtualList };
+export { MoonUIAccordionPro as Accordion, MoonUIAccordionContentPro as AccordionContent, MoonUIAccordionItemPro as AccordionItem, MoonUIAccordionTriggerPro as AccordionTrigger, Calendar3 as AdvancedCalendar, AdvancedChart, AdvancedForms, MoonUIAlertPro as Alert, MoonUIAlertDescriptionPro as AlertDescription, MoonUIAlertTitlePro as AlertTitle, AnimatedButton, MoonUIAspectRatioPro as AspectRatio, MoonUIAvatarPro as Avatar, MoonUIAvatarFallbackPro as AvatarFallback, MoonUIAvatarImagePro as AvatarImage, MoonUIBadgePro as Badge, MoonUIBreadcrumbPro as Breadcrumb, MoonUIBreadcrumbEllipsisPro as BreadcrumbEllipsis, MoonUIBreadcrumbItemPro as BreadcrumbItem, MoonUIBreadcrumbLinkPro as BreadcrumbLink, MoonUIBreadcrumbListPro as BreadcrumbList, MoonUIBreadcrumbPagePro as BreadcrumbPage, MoonUIBreadcrumbSeparatorPro as BreadcrumbSeparator, MoonUIButtonPro as Button, Calendar, MoonUICardPro as Card, MoonUICardContentPro as CardContent, MoonUICardDescriptionPro as CardDescription, MoonUICardFooterPro as CardFooter, MoonUICardHeaderPro as CardHeader, MoonUICardTitlePro as CardTitle, MoonUICheckboxPro as Checkbox, MoonUICollapsiblePro as Collapsible, MoonUICollapsibleContentPro as CollapsibleContent, MoonUICollapsibleTriggerPro as CollapsibleTrigger, MoonUIColorPickerPro as ColorPicker, MoonUICommandPro as Command, MoonUICommandDialogPro as CommandDialog, MoonUICommandEmptyPro as CommandEmpty, MoonUICommandGroupPro as CommandGroup, MoonUICommandInputPro as CommandInput, MoonUICommandItemPro as CommandItem, MoonUICommandListPro as CommandList, MoonUICommandSeparatorPro as CommandSeparator, MoonUICommandShortcutPro as CommandShortcut, Dashboard, DataTable, MoonUIDialogPro as Dialog, MoonUIDialogClosePro as DialogClose, MoonUIDialogContentPro as DialogContent, MoonUIDialogDescriptionPro as DialogDescription, MoonUIDialogFooterPro as DialogFooter, MoonUIDialogHeaderPro as DialogHeader, MoonUIDialogTitlePro as DialogTitle, MoonUIDialogTriggerPro as DialogTrigger, DraggableList, MoonUIDropdownMenuPro as DropdownMenu, MoonUIDropdownMenuCheckboxItemPro as DropdownMenuCheckboxItem, MoonUIDropdownMenuContentPro as DropdownMenuContent, MoonUIDropdownMenuGroupPro as DropdownMenuGroup, MoonUIDropdownMenuItemPro as DropdownMenuItem, MoonUIDropdownMenuLabelPro as DropdownMenuLabel, MoonUIDropdownMenuPortalPro as DropdownMenuPortal, MoonUIDropdownMenuRadioGroupPro as DropdownMenuRadioGroup, MoonUIDropdownMenuRadioItemPro as DropdownMenuRadioItem, MoonUIDropdownMenuSeparatorPro as DropdownMenuSeparator, MoonUIDropdownMenuShortcutPro as DropdownMenuShortcut, MoonUIDropdownMenuSubPro as DropdownMenuSub, MoonUIDropdownMenuSubContentPro as DropdownMenuSubContent, MoonUIDropdownMenuSubTriggerPro as DropdownMenuSubTrigger, MoonUIDropdownMenuTriggerPro as DropdownMenuTrigger, enhanced_exports as Enhanced, ErrorBoundary, FileUpload, FloatingActionButton, FormWizardNavigation, FormWizardProgress, FormWizardStep, GitHubStars, HealthCheck, HoverCard2 as HoverCard, HoverCard3D, HoverCardContent2 as HoverCardContent, HoverCardTrigger2 as HoverCardTrigger, MoonUIInputPro as Input, Kanban, MoonUILabelPro as Label, LazyComponent, LazyImage, LazyList, MagneticButton, MemoryAnalytics, MemoryEfficientData, MoonUIAccordionContentPro, MoonUIAccordionItemPro, MoonUIAccordionPro, MoonUIAccordionTriggerPro, MoonUIAlertDescriptionPro, MoonUIAlertPro, MoonUIAlertTitlePro, MoonUIAspectRatioPro, MoonUIAvatarFallbackPro, MoonUIAvatarImagePro, MoonUIAvatarPro, MoonUIBadgePro, MoonUIBreadcrumbEllipsisPro, MoonUIBreadcrumbItemPro, MoonUIBreadcrumbLinkPro, MoonUIBreadcrumbListPro, MoonUIBreadcrumbPagePro, MoonUIBreadcrumbPro, MoonUIBreadcrumbSeparatorPro, MoonUIButtonPro, MoonUICardContentPro, MoonUICardDescriptionPro, MoonUICardFooterPro, MoonUICardHeaderPro, MoonUICardPro, MoonUICardTitlePro, MoonUICheckboxPro, MoonUICollapsibleContentPro, MoonUICollapsiblePro, MoonUICollapsibleTriggerPro, MoonUIColorPickerPro, MoonUICommandDialogPro, MoonUICommandEmptyPro, MoonUICommandGroupPro, MoonUICommandInputPro, MoonUICommandItemPro, MoonUICommandListPro, MoonUICommandPro, MoonUICommandSeparatorPro, MoonUICommandShortcutPro, MoonUICreditCardInputPro, MoonUIDialogClosePro, MoonUIDialogContentPro, MoonUIDialogDescriptionPro, MoonUIDialogFooterPro, MoonUIDialogHeaderPro, MoonUIDialogPro, MoonUIDialogTitlePro, MoonUIDialogTriggerPro, MoonUIDropdownMenuCheckboxItemPro, MoonUIDropdownMenuContentPro, MoonUIDropdownMenuGroupPro, MoonUIDropdownMenuItemPro, MoonUIDropdownMenuLabelPro, MoonUIDropdownMenuPortalPro, MoonUIDropdownMenuPro, MoonUIDropdownMenuRadioGroupPro, MoonUIDropdownMenuRadioItemPro, MoonUIDropdownMenuSeparatorPro, MoonUIDropdownMenuShortcutPro, MoonUIDropdownMenuSubContentPro, MoonUIDropdownMenuSubPro, MoonUIDropdownMenuSubTriggerPro, MoonUIDropdownMenuTriggerPro, MoonUIFormWizardPro, MoonUIInputPro, MoonUILabelPro, MoonUIMultiStepFormPro, MoonUIPaginationContentPro, MoonUIPaginationEllipsisPro, MoonUIPaginationItemPro, MoonUIPaginationLinkPro, MoonUIPaginationNextPro, MoonUIPaginationPreviousPro, MoonUIPaginationPro, MoonUIPhoneNumberInputPro, MoonUIPopoverContentPro, MoonUIPopoverPro, MoonUIPopoverTriggerPro, MoonUIProgressPro, MoonUIQuizFormPro, MoonUIRadioGroupContextPro, MoonUIRadioGroupItemPro, MoonUIRadioGroupPro, MoonUIRadioItemWithLabelPro, MoonUIRadioLabelPro, MoonUISelectContentPro, MoonUISelectGroupPro, MoonUISelectItemPro, MoonUISelectLabelPro, MoonUISelectPro, MoonUISelectSeparatorPro, MoonUISelectTriggerPro, MoonUISelectValuePro, MoonUISeparatorPro, MoonUISkeletonPro, MoonUISliderPro, MoonUISwitchPro, MoonUITableBodyPro, MoonUITableCaptionPro, MoonUITableCellPro, MoonUITableFooterPro, MoonUITableHeadPro, MoonUITableHeaderPro, MoonUITablePro, MoonUITableRowPro, MoonUITabsContentPro, MoonUITabsListPro, MoonUITabsPro, MoonUITabsTriggerPro, MoonUITextareaPro, MoonUIToastPro, MoonUITogglePro, MoonUITooltipContentPro, MoonUITooltipPro, MoonUITooltipProviderPro, MoonUITooltipTriggerPro, MoonUIalertVariantsPro, MoonUIaspectRatioVariantsPro, MoonUIbreadcrumbVariantsPro, MoonUIcollapsibleContentVariantsPro, MoonUIcollapsibleTriggerVariantsPro, MoonUIcommandVariantsPro, MoonUIradioGroupItemVariantsPro, MoonUItableVariantsPro, MoonUItoggleVariantsPro, OptimizedImage, MoonUIPaginationPro as Pagination, MoonUIPaginationContentPro as PaginationContent, MoonUIPaginationEllipsisPro as PaginationEllipsis, MoonUIPaginationItemPro as PaginationItem, MoonUIPaginationLinkPro as PaginationLink, MoonUIPaginationNextPro as PaginationNext, MoonUIPaginationPreviousPro as PaginationPrevious, PerformanceDebugger, PerformanceMonitor, PinchZoom, MoonUIPopoverPro as Popover, MoonUIPopoverContentPro as PopoverContent, MoonUIPopoverTriggerPro as PopoverTrigger, MoonUIProgressPro as Progress, MoonUIRadioGroupPro as RadioGroup, MoonUIRadioGroupContextPro as RadioGroupContext, MoonUIRadioGroupItemPro as RadioGroupItem, MoonUIRadioItemWithLabelPro as RadioItemWithLabel, MoonUIRadioLabelPro as RadioLabel, RichTextEditor, ScrollArea, ScrollBar, MoonUISelectPro as Select, MoonUISelectContentPro as SelectContent, MoonUISelectGroupPro as SelectGroup, MoonUISelectItemPro as SelectItem, MoonUISelectLabelPro as SelectLabel, MoonUISelectSeparatorPro as SelectSeparator, MoonUISelectTriggerPro as SelectTrigger, MoonUISelectValuePro as SelectValue, SelectableVirtualList, MoonUISeparatorPro as Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Sidebar, MoonUISkeletonPro as Skeleton, MoonUISliderPro as Slider, SpotlightCard, SwipeableCard, MoonUISwitchPro as Switch, MoonUITablePro as Table, MoonUITableBodyPro as TableBody, MoonUITableCaptionPro as TableCaption, MoonUITableCellPro as TableCell, MoonUITableFooterPro as TableFooter, MoonUITableHeadPro as TableHead, MoonUITableHeaderPro as TableHeader, MoonUITableRowPro as TableRow, MoonUITabsPro as Tabs, MoonUITabsContentPro as TabsContent, MoonUITabsListPro as TabsList, MoonUITabsTriggerPro as TabsTrigger, MoonUITextareaPro as Textarea, Timeline, MoonUIToastPro as Toast, MoonUITogglePro as Toggle, MoonUITooltipPro as Tooltip, MoonUITooltipContentPro as TooltipContent, MoonUITooltipProviderPro as TooltipProvider, MoonUITooltipTriggerPro as TooltipTrigger, VirtualList, MoonUIalertVariantsPro as alertVariants, animatedButtonVariants, MoonUIaspectRatioVariantsPro as aspectRatioVariants, moonUIBadgeVariantsPro as badgeVariants, MoonUIbreadcrumbVariantsPro as breadcrumbVariants, moonUIButtonProVariants as buttonVariants, cn, MoonUIcollapsibleContentVariantsPro as collapsibleContentVariants, MoonUIcollapsibleTriggerVariantsPro as collapsibleTriggerVariants, MoonUIcommandVariantsPro as commandVariants, getExpandableColumn, moonUIBadgeVariantsPro, moonUIButtonProVariants, moonUISeparatorVariantsPro, countries as phoneCountries, MoonUIradioGroupItemVariantsPro as radioGroupItemVariants, moonUISeparatorVariantsPro as separatorVariants, MoonUItableVariantsPro as tableVariants, MoonUItoggleVariantsPro as toggleVariants, useExpandableRows, useFormWizard, useStreamingData, useVirtualList };