@bricks-toolkit/toolkit 0.1.1 → 0.1.2

package/dist/chunk-B4OV5GRT.cjs

@@ -0,0 +1,510 @@
+'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-11 text-base",
+  xl: "h-12 text-lg"
+};
+var labelSizeClasses = {
+  xs: "text-xs",
+  sm: "text-xs",
+  md: "text-sm",
+  lg: "text-sm",
+  xl: "text-base"
+};
+var variantClasses = {
+  default: "rounded-md border border-border bg-surface shadow-sm focus-within:ring-2 focus-within:ring-primary/40 focus-within:border-primary transition-all duration-normal",
+  filled: "rounded-md border border-transparent bg-surface-secondary focus-within:bg-surface focus-within:ring-2 focus-within:ring-primary/40 focus-within:border-primary transition-all duration-normal",
+  flushed: "rounded-none border-0 border-b border-border bg-transparent focus-within:border-primary transition-all",
+  unstyled: "border-0 bg-transparent p-0"
+};
+var stateVariantClasses = {
+  default: {
+    default: "border-border focus-within:border-primary focus-within:ring-primary/40",
+    filled: "focus-within:border-primary focus-within:ring-primary/40",
+    flushed: "border-border focus-within:border-primary",
+    unstyled: ""
+  },
+  error: {
+    default: "border-error focus-within:border-error focus-within:ring-error/20",
+    filled: "bg-error/5 focus-within:border-error focus-within:ring-error/20",
+    flushed: "border-error focus-within:border-error",
+    unstyled: ""
+  },
+  success: {
+    default: "border-success focus-within:border-success focus-within:ring-success/20",
+    filled: "bg-success/5 focus-within:border-success focus-within:ring-success/20",
+    flushed: "border-success focus-within:border-success",
+    unstyled: ""
+  },
+  warning: {
+    default: "border-warning focus-within:border-warning focus-within:ring-warning/20",
+    filled: "bg-warning/5 border-warning focus-within:border-warning focus-within:ring-warning/20",
+    flushed: "border-warning focus-within:border-warning",
+    unstyled: ""
+  }
+};
+var stateMessageClasses = {
+  default: "text-text-muted",
+  error: "text-error",
+  success: "text-success",
+  warning: "text-warning"
+};
+var disabledClasses = "cursor-not-allowed opacity-50 bg-surface-secondary [&_*]:cursor-not-allowed";
+function getStateMessage(state, errorMessage, successMessage, warningMessage) {
+  if (state === "error" && errorMessage) return errorMessage;
+  if (state === "success" && successMessage) return successMessage;
+  if (state === "warning" && warningMessage) return warningMessage;
+  return void 0;
+}
+var Phone = react.forwardRef(function Phone2({
+  label,
+  required = false,
+  helperText,
+  errorMessage,
+  successMessage,
+  warningMessage,
+  variant = "default",
+  size = "md",
+  state = "default",
+  fullWidth = true,
+  leftElement,
+  rightElement,
+  prefix,
+  suffix,
+  wrapperClassName,
+  inputGroupClassName,
+  inputClassName,
+  labelClassName,
+  helperClassName,
+  id: idProp,
+  disabled,
+  className,
+  clearable,
+  isLoading,
+  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 currentMaxLength = activeCountry?.maxLength ?? 15;
+  const showClear = clearable && currentPhone.phoneNumber.length > 0;
+  const hasLeftElement = leftElement !== void 0;
+  const hasRightElement = rightElement !== void 0 || Boolean(showClear) || Boolean(isLoading);
+  const mergedState = internalError ? "error" : state;
+  const mergedErrorMessage = internalError ?? errorMessage;
+  const stateMessage = getStateMessage(
+    mergedState,
+    mergedErrorMessage,
+    successMessage,
+    warningMessage
+  );
+  const describedBy = [helperText ? helperId : null, stateMessage ? stateMessageId : null].filter(Boolean).join(" ") || void 0;
+  const triggerChange = (newPhone) => {
+    if (!isControlled) {
+      setInternalPhone(newPhone);
+    }
+    if (onChange) {
+      onChange(newPhone);
+    }
+  };
+  const handleChange = (e) => {
+    const rawValue = e.target.value;
+    const numericValue = rawValue.replace(/\D/g, "");
+    if (numericValue !== rawValue) {
+      setInternalError("Only numbers are allowed");
+    } else {
+      setInternalError(null);
+    }
+    if (numericValue.length > currentMaxLength) {
+      return;
+    }
+    triggerChange({ ...currentPhone, phoneNumber: numericValue });
+  };
+  const handleClear = () => {
+    setInternalError(null);
+    triggerChange({ ...currentPhone, phoneNumber: "" });
+  };
+  react.useEffect(() => {
+    if (!isOpen) return;
+    const handleClickOutside = (e) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(e.target)) {
+        setIsOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [isOpen]);
+  const filteredCountries = COUNTRIES.filter(
+    (c) => c.name.toLowerCase().includes(searchTerm.toLowerCase()) || c.dialCode.includes(searchTerm)
+  );
+  const renderRightIcon = () => {
+    if (isLoading) {
+      return /* @__PURE__ */ jsxRuntime.jsxs(
+        "svg",
+        {
+          className: "animate-spin h-4 w-4 text-text-muted",
+          xmlns: "http://www.w3.org/2000/svg",
+          fill: "none",
+          viewBox: "0 0 24 24",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "circle",
+              {
+                className: "opacity-25",
+                cx: "12",
+                cy: "12",
+                r: "10",
+                stroke: "currentColor",
+                strokeWidth: "4"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "path",
+              {
+                className: "opacity-75",
+                fill: "currentColor",
+                d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+              }
+            )
+          ]
+        }
+      );
+    }
+    if (showClear) {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          onClick: handleClear,
+          disabled,
+          className: "flex items-center justify-center rounded-full text-text-muted hover:text-text hover:bg-hover p-0.5 transition-all duration-fast disabled:cursor-not-allowed",
+          "aria-label": "Clear input",
+          children: /* @__PURE__ */ jsxRuntime.jsx(solid.XMarkIcon, { className: "w-4 h-4" })
+        }
+      );
+    }
+    return rightElement;
+  };
+  const leftRadiusClass = prefix !== void 0 || variant === "flushed" || variant === "unstyled" ? "" : "rounded-l-md";
+  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 top-full left-0 mt-1 w-64 rounded-md border border-border bg-surface p-1 shadow-lg z-dropdown flex flex-col animate-in fade-in zoom-in-95 duration-fast", children: [
+                      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-2 py-1.5 pb-2 sticky top-0 bg-surface z-10 border-b border-divider", children: /* @__PURE__ */ jsxRuntime.jsx(
+                        "input",
+                        {
+                          type: "text",
+                          placeholder: "Search country...",
+                          className: "w-full text-sm bg-transparent px-1 focus:outline-none text-text placeholder:text-text-muted",
+                          value: searchTerm,
+                          onChange: (e) => {
+                            setSearchTerm(e.target.value);
+                          },
+                          onKeyDown: (e) => {
+                            e.stopPropagation();
+                          }
+                        }
+                      ) }),
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        "ul",
+                        {
+                          role: "listbox",
+                          className: "max-h-56 overflow-y-auto overflow-x-hidden p-1 scrollbar-thin scrollbar-thumb-border scrollbar-track-transparent",
+                          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,
+                        maxLength: currentMaxLength,
+                        className: chunkL5VQZZVR_cjs.cn(
+                          "flex-1 w-full bg-transparent border-none outline-none focus:ring-0 focus:outline-none focus:border-none focus-visible:ring-0 focus-visible:outline-none px-3 min-w-0 transition-colors duration-150 disabled:cursor-not-allowed",
+                          inputClassName
+                        )
+                      }
+                    ),
+                    hasRightElement && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center pr-3", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-text-secondary flex items-center justify-center", children: renderRightIcon() }) })
+                  ]
+                }
+              ),
+              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 })
+            ]
+          }
+        ),
+        helperText !== void 0 && /* @__PURE__ */ jsxRuntime.jsx("p", { id: helperId, className: chunkL5VQZZVR_cjs.cn("text-xs leading-tight text-text-muted", helperClassName), children: helperText }),
+        stateMessage !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(
+          "p",
+          {
+            id: stateMessageId,
+            role: mergedState === "error" ? "alert" : void 0,
+            className: chunkL5VQZZVR_cjs.cn(
+              "text-xs leading-tight mt-1",
+              stateMessageClasses[mergedState],
+              helperClassName
+            ),
+            children: stateMessage
+          }
+        )
+      ]
+    }
+  );
+});
+Phone.displayName = "Phone";
+
+exports.Phone = Phone;

package/dist/chunk-B5MYGYJY.mjs

@@ -0,0 +1,122 @@
+import { cn } from './chunk-OCPFOFJ4.mjs';
+import { forwardRef, useState } from 'react';
+import { UserIcon } from '@heroicons/react/24/solid';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var sizeClasses = {
+  "2xs": "w-4 h-4 text-[10px]",
+  xs: "w-6 h-6 text-xs",
+  sm: "w-8 h-8 text-sm",
+  md: "w-10 h-10 text-base",
+  lg: "w-12 h-12 text-lg",
+  xl: "w-14 h-14 text-xl",
+  "2xl": "w-16 h-16 text-2xl",
+  "3xl": "w-20 h-20 text-3xl",
+  "4xl": "w-24 h-24 text-4xl"
+};
+var variantClasses = {
+  circle: "rounded-full",
+  square: "rounded-none",
+  rounded: "rounded-md"
+};
+var stateBorderClasses = {
+  default: "ring-0",
+  error: "ring-2 ring-error ring-offset-2 ring-offset-surface",
+  success: "ring-2 ring-success ring-offset-2 ring-offset-surface",
+  warning: "ring-2 ring-warning ring-offset-2 ring-offset-surface",
+  offline: "ring-2 ring-border ring-offset-2 ring-offset-surface",
+  online: "ring-2 ring-success ring-offset-2 ring-offset-surface",
+  busy: "ring-2 ring-error ring-offset-2 ring-offset-surface",
+  away: "ring-2 ring-warning ring-offset-2 ring-offset-surface"
+};
+var stateBadgeClasses = {
+  default: "hidden",
+  error: "bg-error",
+  success: "bg-success",
+  warning: "bg-warning",
+  offline: "bg-border",
+  online: "bg-success",
+  busy: "bg-error",
+  away: "bg-warning"
+};
+function getInitials(name) {
+  const parts = name.trim().split(/\s+/);
+  if (parts.length === 0) return "";
+  if (parts.length === 1) return parts[0]?.substring(0, 2).toUpperCase() ?? "";
+  const first = parts[0];
+  const last = parts[parts.length - 1];
+  return `${first?.[0] ?? ""}${last?.[0] ?? ""}`.toUpperCase();
+}
+var Avatar = forwardRef(function Avatar2({
+  size = "md",
+  variant = "circle",
+  state = "default",
+  stateType = "border",
+  fallback,
+  alt,
+  src,
+  className,
+  containerClassName,
+  fallbackClassName,
+  ...rest
+}, ref) {
+  const [hasError, setHasError] = useState(false);
+  const showFallback = typeof src !== "string" || src.length === 0 || hasError;
+  let initial = "";
+  if (typeof fallback === "string") {
+    initial = getInitials(fallback);
+  } else if (typeof alt === "string" && alt.length > 0) {
+    initial = getInitials(alt);
+  }
+  const renderedFallback = typeof fallback === "string" || typeof fallback === "undefined" ? /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn(
+        "flex h-full w-full items-center justify-center font-bold text-text-muted",
+        fallbackClassName
+      ),
+      children: initial || /* @__PURE__ */ jsx(UserIcon, { className: "h-3/5 w-3/5 text-text-muted/40", "aria-hidden": "true" })
+    }
+  ) : /* @__PURE__ */ jsx("span", { className: cn("flex h-full w-full items-center justify-center", fallbackClassName), children: fallback });
+  return /* @__PURE__ */ jsxs("div", { className: cn("relative inline-block", containerClassName), children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn(
+          "relative inline-flex shrink-0 items-center justify-center overflow-hidden bg-surface-secondary",
+          sizeClasses[size],
+          variantClasses[variant],
+          stateType === "border" ? stateBorderClasses[state] : "",
+          className
+        ),
+        children: showFallback ? renderedFallback : /* @__PURE__ */ jsx(
+          "img",
+          {
+            src,
+            alt,
+            onError: () => {
+              setHasError(true);
+            },
+            className: "h-full w-full object-cover",
+            ...rest
+          }
+        )
+      }
+    ),
+    stateType === "badge" && state !== "default" && /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: cn(
+          "absolute bottom-0 right-0 block rounded-full border-2 border-surface",
+          stateBadgeClasses[state],
+          size === "2xs" || size === "xs" ? "h-2 w-2" : size === "sm" ? "h-2.5 w-2.5" : size === "md" ? "h-3 w-3" : size === "lg" ? "h-3.5 w-3.5" : size === "xl" ? "h-4 w-4" : size === "2xl" ? "h-4.5 w-4.5" : size === "3xl" ? "h-5 w-5" : "h-6 w-6",
+          variant === "square" ? "-translate-x-1/2 -translate-y-1/2" : ""
+        )
+      }
+    )
+  ] });
+});
+Avatar.displayName = "Avatar";
+
+export { Avatar };