@bricks-toolkit/toolkit 0.1.15 → 0.1.16

package/dist/chunk-TBI5ZOJJ.cjs

@@ -0,0 +1,443 @@
+'use strict';
+
+var chunkL5VQZZVR_cjs = require('./chunk-L5VQZZVR.cjs');
+var react = require('react');
+var solid = require('@heroicons/react/20/solid');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/components/Phone/countries.ts
+var COUNTRIES = [
+  { name: "Afghanistan", id: "AF", dialCode: "+93", maxLength: 9, flag: "\u{1F1E6}\u{1F1EB}" },
+  { name: "Albania", id: "AL", dialCode: "+355", maxLength: 9, flag: "\u{1F1E6}\u{1F1F1}" },
+  { name: "Algeria", id: "DZ", dialCode: "+213", maxLength: 9, flag: "\u{1F1E9}\u{1F1FF}" },
+  { name: "Andorra", id: "AD", dialCode: "+376", maxLength: 6, flag: "\u{1F1E6}\u{1F1E9}" },
+  { name: "Angola", id: "AO", dialCode: "+244", maxLength: 9, flag: "\u{1F1E6}\u{1F1F4}" },
+  { name: "Argentina", id: "AR", dialCode: "+54", maxLength: 10, flag: "\u{1F1E6}\u{1F1F7}" },
+  { name: "Armenia", id: "AM", dialCode: "+374", maxLength: 8, flag: "\u{1F1E6}\u{1F1F2}" },
+  { name: "Australia", id: "AU", dialCode: "+61", maxLength: 9, flag: "\u{1F1E6}\u{1F1FA}" },
+  { name: "Austria", id: "AT", dialCode: "+43", maxLength: 13, flag: "\u{1F1E6}\u{1F1F9}" },
+  { name: "Azerbaijan", id: "AZ", dialCode: "+994", maxLength: 9, flag: "\u{1F1E6}\u{1F1FF}" },
+  { name: "Bahrain", id: "BH", dialCode: "+973", maxLength: 8, flag: "\u{1F1E7}\u{1F1ED}" },
+  { name: "Bangladesh", id: "BD", dialCode: "+880", maxLength: 10, flag: "\u{1F1E7}\u{1F1E9}" },
+  { name: "Belarus", id: "BY", dialCode: "+375", maxLength: 9, flag: "\u{1F1E7}\u{1F1FE}" },
+  { name: "Belgium", id: "BE", dialCode: "+32", maxLength: 9, flag: "\u{1F1E7}\u{1F1EA}" },
+  { name: "Bolivia", id: "BO", dialCode: "+591", maxLength: 8, flag: "\u{1F1E7}\u{1F1F4}" },
+  { name: "Bosnia and Herzegovina", id: "BA", dialCode: "+387", maxLength: 8, flag: "\u{1F1E7}\u{1F1E6}" },
+  { name: "Brazil", id: "BR", dialCode: "+55", maxLength: 11, flag: "\u{1F1E7}\u{1F1F7}" },
+  { name: "Bulgaria", id: "BG", dialCode: "+359", maxLength: 9, flag: "\u{1F1E7}\u{1F1EC}" },
+  { name: "Cambodia", id: "KH", dialCode: "+855", maxLength: 9, flag: "\u{1F1F0}\u{1F1ED}" },
+  { name: "Canada", id: "CA", dialCode: "+1", maxLength: 10, flag: "\u{1F1E8}\u{1F1E6}" },
+  { name: "Chile", id: "CL", dialCode: "+56", maxLength: 9, flag: "\u{1F1E8}\u{1F1F1}" },
+  { name: "China", id: "CN", dialCode: "+86", maxLength: 11, flag: "\u{1F1E8}\u{1F1F3}" },
+  { name: "Colombia", id: "CO", dialCode: "+57", maxLength: 10, flag: "\u{1F1E8}\u{1F1F4}" },
+  { name: "Costa Rica", id: "CR", dialCode: "+506", maxLength: 8, flag: "\u{1F1E8}\u{1F1F7}" },
+  { name: "Croatia", id: "HR", dialCode: "+385", maxLength: 9, flag: "\u{1F1ED}\u{1F1F7}" },
+  { name: "Cuba", id: "CU", dialCode: "+53", maxLength: 8, flag: "\u{1F1E8}\u{1F1FA}" },
+  { name: "Cyprus", id: "CY", dialCode: "+357", maxLength: 8, flag: "\u{1F1E8}\u{1F1FE}" },
+  { name: "Czech Republic", id: "CZ", dialCode: "+420", maxLength: 9, flag: "\u{1F1E8}\u{1F1FF}" },
+  { name: "Denmark", id: "DK", dialCode: "+45", maxLength: 8, flag: "\u{1F1E9}\u{1F1F0}" },
+  { name: "Ecuador", id: "EC", dialCode: "+593", maxLength: 9, flag: "\u{1F1EA}\u{1F1E8}" },
+  { name: "Egypt", id: "EG", dialCode: "+20", maxLength: 10, flag: "\u{1F1EA}\u{1F1EC}" },
+  { name: "Estonia", id: "EE", dialCode: "+372", maxLength: 8, flag: "\u{1F1EA}\u{1F1EA}" },
+  { name: "Ethiopia", id: "ET", dialCode: "+251", maxLength: 9, flag: "\u{1F1EA}\u{1F1F9}" },
+  { name: "Finland", id: "FI", dialCode: "+358", maxLength: 10, flag: "\u{1F1EB}\u{1F1EE}" },
+  { name: "France", id: "FR", dialCode: "+33", maxLength: 9, flag: "\u{1F1EB}\u{1F1F7}" },
+  { name: "Georgia", id: "GE", dialCode: "+995", maxLength: 9, flag: "\u{1F1EC}\u{1F1EA}" },
+  { name: "Germany", id: "DE", dialCode: "+49", maxLength: 11, flag: "\u{1F1E9}\u{1F1EA}" },
+  { name: "Ghana", id: "GH", dialCode: "+233", maxLength: 9, flag: "\u{1F1EC}\u{1F1ED}" },
+  { name: "Greece", id: "GR", dialCode: "+30", maxLength: 10, flag: "\u{1F1EC}\u{1F1F7}" },
+  { name: "Guatemala", id: "GT", dialCode: "+502", maxLength: 8, flag: "\u{1F1EC}\u{1F1F9}" },
+  { name: "Hong Kong", id: "HK", dialCode: "+852", maxLength: 8, flag: "\u{1F1ED}\u{1F1F0}" },
+  { name: "Hungary", id: "HU", dialCode: "+36", maxLength: 9, flag: "\u{1F1ED}\u{1F1FA}" },
+  { name: "Iceland", id: "IS", dialCode: "+354", maxLength: 7, flag: "\u{1F1EE}\u{1F1F8}" },
+  { name: "India", id: "IN", dialCode: "+91", maxLength: 10, flag: "\u{1F1EE}\u{1F1F3}" },
+  { name: "Indonesia", id: "ID", dialCode: "+62", maxLength: 12, flag: "\u{1F1EE}\u{1F1E9}" },
+  { name: "Iran", id: "IR", dialCode: "+98", maxLength: 10, flag: "\u{1F1EE}\u{1F1F7}" },
+  { name: "Iraq", id: "IQ", dialCode: "+964", maxLength: 10, flag: "\u{1F1EE}\u{1F1F6}" },
+  { name: "Ireland", id: "IE", dialCode: "+353", maxLength: 9, flag: "\u{1F1EE}\u{1F1EA}" },
+  { name: "Israel", id: "IL", dialCode: "+972", maxLength: 9, flag: "\u{1F1EE}\u{1F1F1}" },
+  { name: "Italy", id: "IT", dialCode: "+39", maxLength: 10, flag: "\u{1F1EE}\u{1F1F9}" },
+  { name: "Japan", id: "JP", dialCode: "+81", maxLength: 10, flag: "\u{1F1EF}\u{1F1F5}" },
+  { name: "Jordan", id: "JO", dialCode: "+962", maxLength: 9, flag: "\u{1F1EF}\u{1F1F4}" },
+  { name: "Kazakhstan", id: "KZ", dialCode: "+7", maxLength: 10, flag: "\u{1F1F0}\u{1F1FF}" },
+  { name: "Kenya", id: "KE", dialCode: "+254", maxLength: 9, flag: "\u{1F1F0}\u{1F1EA}" },
+  { name: "Kuwait", id: "KW", dialCode: "+965", maxLength: 8, flag: "\u{1F1F0}\u{1F1FC}" },
+  { name: "Latvia", id: "LV", dialCode: "+371", maxLength: 8, flag: "\u{1F1F1}\u{1F1FB}" },
+  { name: "Lebanon", id: "LB", dialCode: "+961", maxLength: 8, flag: "\u{1F1F1}\u{1F1E7}" },
+  { name: "Lithuania", id: "LT", dialCode: "+370", maxLength: 8, flag: "\u{1F1F1}\u{1F1F9}" },
+  { name: "Luxembourg", id: "LU", dialCode: "+352", maxLength: 9, flag: "\u{1F1F1}\u{1F1FA}" },
+  { name: "Macau", id: "MO", dialCode: "+853", maxLength: 8, flag: "\u{1F1F2}\u{1F1F4}" },
+  { name: "Malaysia", id: "MY", dialCode: "+60", maxLength: 10, flag: "\u{1F1F2}\u{1F1FE}" },
+  { name: "Mexico", id: "MX", dialCode: "+52", maxLength: 10, flag: "\u{1F1F2}\u{1F1FD}" },
+  { name: "Morocco", id: "MA", dialCode: "+212", maxLength: 9, flag: "\u{1F1F2}\u{1F1E6}" },
+  { name: "Myanmar", id: "MM", dialCode: "+95", maxLength: 9, flag: "\u{1F1F2}\u{1F1F2}" },
+  { name: "Nepal", id: "NP", dialCode: "+977", maxLength: 10, flag: "\u{1F1F3}\u{1F1F5}" },
+  { name: "Netherlands", id: "NL", dialCode: "+31", maxLength: 9, flag: "\u{1F1F3}\u{1F1F1}" },
+  { name: "New Zealand", id: "NZ", dialCode: "+64", maxLength: 9, flag: "\u{1F1F3}\u{1F1FF}" },
+  { name: "Nigeria", id: "NG", dialCode: "+234", maxLength: 10, flag: "\u{1F1F3}\u{1F1EC}" },
+  { name: "Norway", id: "NO", dialCode: "+47", maxLength: 8, flag: "\u{1F1F3}\u{1F1F4}" },
+  { name: "Oman", id: "OM", dialCode: "+968", maxLength: 8, flag: "\u{1F1F4}\u{1F1F2}" },
+  { name: "Pakistan", id: "PK", dialCode: "+92", maxLength: 10, flag: "\u{1F1F5}\u{1F1F0}" },
+  { name: "Panama", id: "PA", dialCode: "+507", maxLength: 8, flag: "\u{1F1F5}\u{1F1E6}" },
+  { name: "Paraguay", id: "PY", dialCode: "+595", maxLength: 9, flag: "\u{1F1F5}\u{1F1FE}" },
+  { name: "Peru", id: "PE", dialCode: "+51", maxLength: 9, flag: "\u{1F1F5}\u{1F1EA}" },
+  { name: "Philippines", id: "PH", dialCode: "+63", maxLength: 10, flag: "\u{1F1F5}\u{1F1ED}" },
+  { name: "Poland", id: "PL", dialCode: "+48", maxLength: 9, flag: "\u{1F1F5}\u{1F1F1}" },
+  { name: "Portugal", id: "PT", dialCode: "+351", maxLength: 9, flag: "\u{1F1F5}\u{1F1F9}" },
+  { name: "Qatar", id: "QA", dialCode: "+974", maxLength: 8, flag: "\u{1F1F6}\u{1F1E6}" },
+  { name: "Romania", id: "RO", dialCode: "+40", maxLength: 9, flag: "\u{1F1F7}\u{1F1F4}" },
+  { name: "Russia", id: "RU", dialCode: "+7", maxLength: 10, flag: "\u{1F1F7}\u{1F1FA}" },
+  { name: "Saudi Arabia", id: "SA", dialCode: "+966", maxLength: 9, flag: "\u{1F1F8}\u{1F1E6}" },
+  { name: "Serbia", id: "RS", dialCode: "+381", maxLength: 9, flag: "\u{1F1F7}\u{1F1F8}" },
+  { name: "Singapore", id: "SG", dialCode: "+65", maxLength: 8, flag: "\u{1F1F8}\u{1F1EC}" },
+  { name: "Slovakia", id: "SK", dialCode: "+421", maxLength: 9, flag: "\u{1F1F8}\u{1F1F0}" },
+  { name: "Slovenia", id: "SI", dialCode: "+386", maxLength: 8, flag: "\u{1F1F8}\u{1F1EE}" },
+  { name: "South Africa", id: "ZA", dialCode: "+27", maxLength: 9, flag: "\u{1F1FF}\u{1F1E6}" },
+  { name: "South Korea", id: "KR", dialCode: "+82", maxLength: 10, flag: "\u{1F1F0}\u{1F1F7}" },
+  { name: "Spain", id: "ES", dialCode: "+34", maxLength: 9, flag: "\u{1F1EA}\u{1F1F8}" },
+  { name: "Sri Lanka", id: "LK", dialCode: "+94", maxLength: 9, flag: "\u{1F1F1}\u{1F1F0}" },
+  { name: "Sweden", id: "SE", dialCode: "+46", maxLength: 9, flag: "\u{1F1F8}\u{1F1EA}" },
+  { name: "Switzerland", id: "CH", dialCode: "+41", maxLength: 9, flag: "\u{1F1E8}\u{1F1ED}" },
+  { name: "Syria", id: "SY", dialCode: "+963", maxLength: 9, flag: "\u{1F1F8}\u{1F1FE}" },
+  { name: "Taiwan", id: "TW", dialCode: "+886", maxLength: 9, flag: "\u{1F1F9}\u{1F1FC}" },
+  { name: "Thailand", id: "TH", dialCode: "+66", maxLength: 9, flag: "\u{1F1F9}\u{1F1ED}" },
+  { name: "Tunisia", id: "TN", dialCode: "+216", maxLength: 8, flag: "\u{1F1F9}\u{1F1F3}" },
+  { name: "Turkey", id: "TR", dialCode: "+90", maxLength: 10, flag: "\u{1F1F9}\u{1F1F7}" },
+  { name: "Ukraine", id: "UA", dialCode: "+380", maxLength: 9, flag: "\u{1F1FA}\u{1F1E6}" },
+  { name: "United Arab Emirates", id: "AE", dialCode: "+971", maxLength: 9, flag: "\u{1F1E6}\u{1F1EA}" },
+  { name: "United Kingdom", id: "GB", dialCode: "+44", maxLength: 10, flag: "\u{1F1EC}\u{1F1E7}" },
+  { name: "United States", id: "US", dialCode: "+1", maxLength: 10, flag: "\u{1F1FA}\u{1F1F8}" },
+  { name: "Uruguay", id: "UY", dialCode: "+598", maxLength: 8, flag: "\u{1F1FA}\u{1F1FE}" },
+  { name: "Uzbekistan", id: "UZ", dialCode: "+998", maxLength: 9, flag: "\u{1F1FA}\u{1F1FF}" },
+  { name: "Venezuela", id: "VE", dialCode: "+58", maxLength: 10, flag: "\u{1F1FB}\u{1F1EA}" },
+  { name: "Vietnam", id: "VN", dialCode: "+84", maxLength: 9, flag: "\u{1F1FB}\u{1F1F3}" },
+  { name: "Yemen", id: "YE", dialCode: "+967", maxLength: 9, flag: "\u{1F1FE}\u{1F1EA}" }
+];
+var wrapperSizeClasses = {
+  xs: "h-6 text-xs",
+  sm: "h-8 text-sm",
+  md: "h-10 text-sm",
+  lg: "h-12 text-base",
+  xl: "h-14 text-lg"
+};
+var labelSizeClasses = {
+  xs: "text-[10px]",
+  sm: "text-xs",
+  md: "text-sm",
+  lg: "text-base",
+  xl: "text-lg"
+};
+var variantClasses = {
+  default: "border border-border bg-surface-primary shadow-sm focus-within:ring-2 focus-within:ring-primary focus-within:border-primary",
+  filled: "border-transparent bg-surface-secondary focus-within:bg-surface-primary focus-within:ring-2 focus-within:ring-primary focus-within:border-primary",
+  flushed: "border-b border-border bg-transparent rounded-none focus-within:border-primary",
+  unstyled: "border-none bg-transparent shadow-none p-0 h-auto focus-within:ring-0"
+};
+var stateVariantClasses = {
+  default: {
+    default: "",
+    filled: "",
+    flushed: "",
+    unstyled: ""
+  },
+  error: {
+    default: "border-error focus-within:ring-error/20 focus-within:border-error",
+    filled: "border-error bg-error/5 focus-within:bg-error/10 focus-within:ring-error/20 focus-within:border-error",
+    flushed: "border-error focus-within:border-error",
+    unstyled: ""
+  },
+  success: {
+    default: "border-success focus-within:ring-success/20 focus-within:border-success",
+    filled: "border-success bg-success/5 focus-within:bg-success/10 focus-within:ring-success/20 focus-within:border-success",
+    flushed: "border-success focus-within:border-success",
+    unstyled: ""
+  },
+  warning: {
+    default: "border-warning focus-within:ring-warning/20 focus-within:border-warning",
+    filled: "border-warning bg-warning/5 focus-within:bg-warning/10 focus-within:ring-warning/20 focus-within:border-warning",
+    flushed: "border-warning focus-within:border-warning",
+    unstyled: ""
+  }
+};
+var disabledClasses = "opacity-50 cursor-not-allowed bg-surface-secondary grayscale-[0.5]";
+var Phone = react.forwardRef(
+  ({
+    id: idProp,
+    label,
+    required,
+    helperText,
+    errorMessage,
+    successMessage,
+    warningMessage,
+    variant = "default",
+    size = "md",
+    state: stateProp = "default",
+    fullWidth = false,
+    leftElement,
+    rightElement,
+    prefix,
+    suffix,
+    wrapperClassName,
+    inputGroupClassName,
+    inputClassName,
+    labelClassName,
+    helperClassName,
+    clearable = false,
+    isLoading = false,
+    disabled,
+    className,
+    value,
+    defaultValue,
+    onChange,
+    showFlag = true,
+    defaultCountryCode = "+91",
+    autoComplete = "tel",
+    ...rest
+  }, ref) => {
+    const generatedId = react.useId();
+    const inputId = idProp ?? generatedId;
+    const helperId = `${inputId}-helper`;
+    const stateMessageId = `${inputId}-state`;
+    const [internalError, setInternalError] = react.useState(null);
+    const [isOpen, setIsOpen] = react.useState(false);
+    const [searchTerm, setSearchTerm] = react.useState("");
+    const dropdownRef = react.useRef(null);
+    const [internalPhone, setInternalPhone] = react.useState(
+      defaultValue ?? { countryCode: defaultCountryCode, phoneNumber: "" }
+    );
+    const isControlled = value !== void 0;
+    const currentPhone = isControlled ? value : internalPhone;
+    const activeCountry = COUNTRIES.find((c) => c.dialCode === currentPhone.countryCode) ?? COUNTRIES[0];
+    const mergedState = errorMessage || internalError ? "error" : stateProp;
+    const currentMessage = errorMessage || internalError || successMessage || warningMessage || helperText;
+    const triggerChange = (newValue) => {
+      if (!isControlled) {
+        setInternalPhone(newValue);
+      }
+      onChange?.(newValue);
+    };
+    const handleChange = (e) => {
+      const input = e.target.value;
+      const cleanValue = input.replace(/[^\d\s-()]/g, "");
+      const newValue = { ...currentPhone, phoneNumber: cleanValue };
+      triggerChange(newValue);
+    };
+    const handleClear = () => {
+      triggerChange({ ...currentPhone, phoneNumber: "" });
+      setInternalError(null);
+    };
+    react.useState(() => {
+      if (typeof window === "undefined") return;
+      const handler = (e) => {
+        if (dropdownRef.current && !dropdownRef.current.contains(e.target)) {
+          setIsOpen(false);
+        }
+      };
+      document.addEventListener("mousedown", handler);
+      return () => document.removeEventListener("mousedown", handler);
+    });
+    const filteredCountries = react.useMemo(() => {
+      return COUNTRIES.filter(
+        (c) => c.name.toLowerCase().includes(searchTerm.toLowerCase()) || c.dialCode.includes(searchTerm) || c.id.toLowerCase().includes(searchTerm.toLowerCase())
+      );
+    }, [searchTerm]);
+    const hasLeftElement = leftElement !== void 0;
+    const hasRightElement = rightElement !== void 0 || clearable && currentPhone.phoneNumber;
+    const leftRadiusClass = prefix !== void 0 ? "" : "rounded-l-md";
+    const describedBy = `${helperText ? helperId : ""} ${currentMessage ? stateMessageId : ""}`.trim();
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: chunkL5VQZZVR_cjs.cn(
+          "flex flex-col gap-1",
+          fullWidth ? "w-full" : "w-fit",
+          wrapperClassName,
+          className
+        ),
+        children: [
+          label !== void 0 && /* @__PURE__ */ jsxRuntime.jsxs(
+            "label",
+            {
+              htmlFor: inputId,
+              className: chunkL5VQZZVR_cjs.cn(
+                "font-black leading-none text-text mb-2 uppercase tracking-widest",
+                labelSizeClasses[size],
+                labelClassName
+              ),
+              children: [
+                label,
+                required && /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", className: "ml-1 text-error", children: "*" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              className: chunkL5VQZZVR_cjs.cn("flex items-stretch", fullWidth ? "w-full" : "w-fit", inputGroupClassName),
+              children: [
+                prefix !== void 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-flex items-center rounded-l-md border border-r-0 border-border bg-surface-secondary px-3 text-sm text-text-secondary select-none", children: prefix }),
+                /* @__PURE__ */ jsxRuntime.jsxs(
+                  "div",
+                  {
+                    ref: dropdownRef,
+                    className: chunkL5VQZZVR_cjs.cn(
+                      "relative flex flex-1 items-stretch",
+                      wrapperSizeClasses[size],
+                      variantClasses[variant],
+                      stateVariantClasses[mergedState][variant],
+                      disabled ? disabledClasses : "",
+                      prefix !== void 0 && suffix !== void 0 ? "rounded-none" : prefix !== void 0 ? "rounded-l-none" : suffix !== void 0 ? "rounded-r-none" : ""
+                    ),
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsxs(
+                        "button",
+                        {
+                          type: "button",
+                          onClick: () => {
+                            setIsOpen(!isOpen);
+                          },
+                          disabled: Boolean(disabled) || Boolean(isLoading),
+                          className: chunkL5VQZZVR_cjs.cn(
+                            "relative flex items-center justify-center flex-shrink-0 px-2 sm:px-3 text-text bg-surface-secondary border-r border-border hover:bg-hover active:bg-active transition-colors outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:z-10 disabled:cursor-not-allowed",
+                            leftRadiusClass
+                          ),
+                          children: [
+                            showFlag && activeCountry && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mr-1.5 text-base sm:text-lg opacity-90", children: activeCountry.flag }),
+                            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium", children: activeCountry?.dialCode ?? defaultCountryCode }),
+                            /* @__PURE__ */ jsxRuntime.jsx(
+                              solid.ChevronDownIcon,
+                              {
+                                className: chunkL5VQZZVR_cjs.cn(
+                                  "w-3.5 h-3.5 ml-1.5 text-text-secondary transition-transform",
+                                  isOpen && "rotate-180"
+                                )
+                              }
+                            )
+                          ]
+                        }
+                      ),
+                      isOpen && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute left-0 top-full z-[100] mt-1 w-64 max-h-80 overflow-hidden rounded-md border border-border bg-surface-primary shadow-lg animate-in fade-in zoom-in-95 duration-100", children: [
+                        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sticky top-0 z-10 border-b border-border bg-surface-primary p-2", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex items-center", children: [
+                          /* @__PURE__ */ jsxRuntime.jsx(
+                            "input",
+                            {
+                              autoFocus: true,
+                              type: "text",
+                              placeholder: "Search country...",
+                              className: "w-full rounded-sm border border-border bg-surface-secondary px-2 py-1 text-sm outline-none focus:border-primary",
+                              value: searchTerm,
+                              onChange: (e) => setSearchTerm(e.target.value)
+                            }
+                          ),
+                          searchTerm && /* @__PURE__ */ jsxRuntime.jsx(
+                            "button",
+                            {
+                              type: "button",
+                              onClick: () => setSearchTerm(""),
+                              className: "absolute right-2 text-text-muted hover:text-text",
+                              children: /* @__PURE__ */ jsxRuntime.jsx(solid.XMarkIcon, { className: "h-4 w-4" })
+                            }
+                          )
+                        ] }) }),
+                        /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "overflow-y-auto p-1 max-h-64 scrollbar-thin", children: filteredCountries.length > 0 ? filteredCountries.map((c) => /* @__PURE__ */ jsxRuntime.jsxs(
+                          "li",
+                          {
+                            role: "option",
+                            tabIndex: 0,
+                            "aria-selected": currentPhone.countryCode === c.dialCode,
+                            className: chunkL5VQZZVR_cjs.cn(
+                              "flex items-center px-2 py-1.5 text-sm rounded-sm cursor-pointer transition-colors outline-none focus:bg-hover active:bg-active",
+                              currentPhone.countryCode === c.dialCode ? "bg-primary/10 text-primary font-medium" : "text-text"
+                            ),
+                            onKeyDown: (e) => {
+                              if (e.key === "Enter" || e.key === " ") {
+                                e.preventDefault();
+                                triggerChange({ ...currentPhone, countryCode: c.dialCode });
+                                setIsOpen(false);
+                                setSearchTerm("");
+                              }
+                            },
+                            onClick: () => {
+                              triggerChange({ ...currentPhone, countryCode: c.dialCode });
+                              setIsOpen(false);
+                              setSearchTerm("");
+                            },
+                            children: [
+                              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mr-2 text-base", children: c.flag }),
+                              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 truncate", children: c.name }),
+                              /* @__PURE__ */ jsxRuntime.jsx(
+                                "span",
+                                {
+                                  className: chunkL5VQZZVR_cjs.cn(
+                                    "text-xs ml-2",
+                                    currentPhone.countryCode === c.dialCode ? "text-primary/70" : "text-text-muted"
+                                  ),
+                                  children: c.dialCode
+                                }
+                              )
+                            ]
+                          },
+                          c.id
+                        )) : /* @__PURE__ */ jsxRuntime.jsx("li", { className: "px-2 py-3 text-center text-sm text-text-muted", children: "No countries found" }) })
+                      ] }),
+                      hasLeftElement && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center pl-3", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-text-secondary flex items-center justify-center", children: leftElement }) }),
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        "input",
+                        {
+                          ref,
+                          ...rest,
+                          id: inputId,
+                          disabled: Boolean(disabled) || Boolean(isLoading),
+                          type: "tel",
+                          inputMode: "numeric",
+                          value: currentPhone.phoneNumber,
+                          onChange: handleChange,
+                          autoComplete,
+                          "aria-invalid": mergedState === "error" ? true : void 0,
+                          "aria-describedby": describedBy,
+                          "aria-required": required,
+                          className: chunkL5VQZZVR_cjs.cn(
+                            "flex h-full w-full bg-transparent px-3 py-1 text-sm outline-none transition-colors placeholder:text-text-muted disabled:cursor-not-allowed",
+                            inputClassName
+                          )
+                        }
+                      ),
+                      hasRightElement && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center pr-2 space-x-1", children: [
+                        clearable && currentPhone.phoneNumber && !disabled && !isLoading && /* @__PURE__ */ jsxRuntime.jsx(
+                          "button",
+                          {
+                            type: "button",
+                            onClick: handleClear,
+                            className: "p-0.5 rounded-full text-text-muted hover:text-text hover:bg-hover transition-colors outline-none focus-visible:ring-2 focus-visible:ring-primary",
+                            children: /* @__PURE__ */ jsxRuntime.jsx(solid.XMarkIcon, { className: "w-4 h-4" })
+                          }
+                        ),
+                        rightElement && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-text-secondary flex items-center justify-center", children: rightElement })
+                      ] })
+                    ]
+                  }
+                ),
+                suffix !== void 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-flex items-center rounded-r-md border border-l-0 border-border bg-surface-secondary px-3 text-sm text-text-secondary select-none", children: suffix })
+              ]
+            }
+          ),
+          currentMessage && /* @__PURE__ */ jsxRuntime.jsx(
+            "p",
+            {
+              id: stateMessageId,
+              className: chunkL5VQZZVR_cjs.cn(
+                "text-xs mt-1",
+                mergedState === "error" ? "text-error" : mergedState === "success" ? "text-success" : mergedState === "warning" ? "text-warning" : "text-text-muted",
+                helperClassName
+              ),
+              children: currentMessage
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Phone.displayName = "Phone";
+
+exports.Phone = Phone;

package/dist/index.cjs

@@ -16,7 +16,7 @@ var chunkS7VEND5Z_cjs = require('./chunk-S7VEND5Z.cjs');
 var chunk56ILK7Y4_cjs = require('./chunk-56ILK7Y4.cjs');
 var chunkNRZIXK35_cjs = require('./chunk-NRZIXK35.cjs');
 var chunk5RKET2JO_cjs = require('./chunk-5RKET2JO.cjs');
-var chunkMP3GFB25_cjs = require('./chunk-MP3GFB25.cjs');
+var chunkTBI5ZOJJ_cjs = require('./chunk-TBI5ZOJJ.cjs');
 var chunkVRZFAKSV_cjs = require('./chunk-VRZFAKSV.cjs');
 var chunk7R5JRJ2W_cjs = require('./chunk-7R5JRJ2W.cjs');
 var chunkOEU5VG3D_cjs = require('./chunk-OEU5VG3D.cjs');
@@ -697,7 +697,7 @@ Object.defineProperty(exports, "PasswordInput", {
 });
 Object.defineProperty(exports, "Phone", {
   enumerable: true,
-  get: function () { return chunkMP3GFB25_cjs.Phone; }
+  get: function () { return chunkTBI5ZOJJ_cjs.Phone; }
 });
 Object.defineProperty(exports, "RadioButton", {
   enumerable: true,

package/dist/index.mjs

@@ -14,7 +14,7 @@ export { Skeleton, SkeletonAvatar, SkeletonCard, SkeletonTable, SkeletonText } f
 export { MultiSelect } from './chunk-JKPNJ4PZ.mjs';
 export { OtpInput } from './chunk-RYWDZHKG.mjs';
 export { PasswordInput } from './chunk-446OJWC6.mjs';
-export { Phone } from './chunk-C2MMUQPD.mjs';
+export { Phone } from './chunk-AGAOODRL.mjs';
 export { RadioButton } from './chunk-DN2GFJF4.mjs';
 export { Select } from './chunk-TIVSMCXZ.mjs';
 export { Pagination, Table } from './chunk-7364SUK6.mjs';

package/dist/phone/index.cjs

@@ -1,11 +1,11 @@
 'use strict';
 
-var chunkMP3GFB25_cjs = require('../chunk-MP3GFB25.cjs');
+var chunkTBI5ZOJJ_cjs = require('../chunk-TBI5ZOJJ.cjs');
 require('../chunk-L5VQZZVR.cjs');
 
 
 
 Object.defineProperty(exports, "Phone", {
   enumerable: true,
-  get: function () { return chunkMP3GFB25_cjs.Phone; }
+  get: function () { return chunkTBI5ZOJJ_cjs.Phone; }
 });

package/dist/phone/index.d.mts

@@ -1,4 +1,4 @@
-import { InputHTMLAttributes, ReactNode } from 'react';
+import React__default, { InputHTMLAttributes, ReactNode } from 'react';
 
 type PhoneVariant = 'default' | 'filled' | 'flushed' | 'unstyled';
 type PhoneSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
@@ -13,7 +13,6 @@ interface PhoneProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'
     onChange?: (value: PhoneValue) => void;
     showFlag?: boolean;
     defaultCountryCode?: string;
-    defaultCountry?: string;
     label?: string;
     required?: boolean;
     helperText?: string;
@@ -37,6 +36,6 @@ interface PhoneProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'
     isLoading?: boolean;
 }
 
-declare const Phone: React.ForwardRefExoticComponent<PhoneProps & React.RefAttributes<HTMLInputElement>>;
+declare const Phone: React__default.ForwardRefExoticComponent<PhoneProps & React__default.RefAttributes<HTMLInputElement>>;
 
 export { Phone, type PhoneProps, type PhoneSize, type PhoneState, type PhoneValue, type PhoneVariant };

package/dist/phone/index.d.ts

@@ -1,4 +1,4 @@
-import { InputHTMLAttributes, ReactNode } from 'react';
+import React__default, { InputHTMLAttributes, ReactNode } from 'react';
 
 type PhoneVariant = 'default' | 'filled' | 'flushed' | 'unstyled';
 type PhoneSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
@@ -13,7 +13,6 @@ interface PhoneProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'
     onChange?: (value: PhoneValue) => void;
     showFlag?: boolean;
     defaultCountryCode?: string;
-    defaultCountry?: string;
     label?: string;
     required?: boolean;
     helperText?: string;
@@ -37,6 +36,6 @@ interface PhoneProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'
     isLoading?: boolean;
 }
 
-declare const Phone: React.ForwardRefExoticComponent<PhoneProps & React.RefAttributes<HTMLInputElement>>;
+declare const Phone: React__default.ForwardRefExoticComponent<PhoneProps & React__default.RefAttributes<HTMLInputElement>>;
 
 export { Phone, type PhoneProps, type PhoneSize, type PhoneState, type PhoneValue, type PhoneVariant };

package/dist/phone/index.mjs

@@ -1,2 +1,2 @@
-export { Phone } from '../chunk-C2MMUQPD.mjs';
+export { Phone } from '../chunk-AGAOODRL.mjs';
 import '../chunk-OCPFOFJ4.mjs';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bricks-toolkit/toolkit",
-  "version": "0.1.15",
+  "version": "0.1.16",
   "description": "Micro-modularized, fully independent, type-safe UI component library",
   "license": "MIT",
   "author": "ITProfound",