@bricks-toolkit/toolkit 0.1.1 → 0.1.2

package/dist/chunk-BBVWG5GH.cjs

@@ -0,0 +1,75 @@
+'use strict';
+
+var chunkL5VQZZVR_cjs = require('./chunk-L5VQZZVR.cjs');
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+var sizeClasses = {
+  xs: "text-xs",
+  sm: "text-sm",
+  md: "text-base",
+  lg: "text-lg",
+  xl: "text-xl"
+};
+var variantClasses = {
+  primary: "text-primary hover:text-primary-hover active:text-primary-active",
+  secondary: "text-text-secondary hover:text-text active:text-text",
+  danger: "text-error hover:text-error/80 active:text-error/90",
+  ghost: "text-text-muted hover:text-text active:text-text hover:bg-hover px-2 py-0.5 rounded-sm transition-all duration-normal"
+};
+var underlineClasses = {
+  always: "underline underline-offset-4",
+  hover: "hover:underline hover:underline-offset-4",
+  none: "no-underline"
+};
+var disabledClasses = "opacity-50 cursor-not-allowed pointer-events-none";
+var Link = react.forwardRef(function Link2({
+  children,
+  className,
+  variant = "primary",
+  size = "md",
+  underline = "hover",
+  isExternal = false,
+  disabled = false,
+  leftIcon,
+  rightIcon,
+  href,
+  rel,
+  target,
+  ...rest
+}, ref) {
+  const generatedTarget = isExternal ? "_blank" : target;
+  const generatedRel = isExternal ? chunkL5VQZZVR_cjs.cn("noopener noreferrer", rel) : rel;
+  const activeHref = disabled ? void 0 : href;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "a",
+    {
+      ref,
+      href: activeHref,
+      target: generatedTarget,
+      rel: generatedRel,
+      "aria-disabled": disabled ? "true" : void 0,
+      role: disabled && !activeHref ? "link" : void 0,
+      tabIndex: disabled ? -1 : void 0,
+      className: chunkL5VQZZVR_cjs.cn(
+        "inline-flex items-center gap-1.5 transition-colors duration-150",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40 focus-visible:ring-offset-2 focus-visible:ring-offset-surface",
+        sizeClasses[size],
+        variantClasses[variant],
+        // Ghost variant traditionally doesn't mix with text-based underline properties well visually
+        variant === "ghost" ? "no-underline" : underlineClasses[underline],
+        disabled ? disabledClasses : "",
+        className
+      ),
+      ...rest,
+      children: [
+        leftIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-flex shrink-0", children: leftIcon }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { children }),
+        rightIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-flex shrink-0", children: rightIcon })
+      ]
+    }
+  );
+});
+Link.displayName = "Link";
+
+exports.Link = Link;

package/dist/chunk-BVBCAAES.mjs

@@ -0,0 +1,35 @@
+import { Button } from './chunk-RAD5VJHR.mjs';
+import { cn } from './chunk-OCPFOFJ4.mjs';
+import { forwardRef } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+var sizeClasses = {
+  xs: "w-6 h-6",
+  sm: "w-8 h-8",
+  md: "w-10 h-10",
+  lg: "w-11 h-11",
+  xl: "w-12 h-12"
+};
+var IconButton = forwardRef(
+  ({ icon, "aria-label": ariaLabel, isRound, className, size = "md", ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      Button,
+      {
+        ref,
+        size,
+        className: cn(
+          "p-0 flex-shrink-0 min-w-0",
+          sizeClasses[size],
+          isRound && "rounded-full",
+          className
+        ),
+        "aria-label": ariaLabel,
+        ...props,
+        children: icon
+      }
+    );
+  }
+);
+IconButton.displayName = "IconButton";
+
+export { IconButton };

package/dist/chunk-CBA54EY4.mjs

@@ -0,0 +1,508 @@
+import { cn } from './chunk-OCPFOFJ4.mjs';
+import { forwardRef, useId, useState, useRef, useEffect } from 'react';
+import { ChevronDownIcon, XMarkIcon } from '@heroicons/react/20/solid';
+import { jsxs, jsx } from '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 = 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 = useId();
+  const inputId = idProp ?? generatedId;
+  const helperId = `${inputId}-helper`;
+  const stateMessageId = `${inputId}-state`;
+  const [internalError, setInternalError] = useState(null);
+  const [isOpen, setIsOpen] = useState(false);
+  const [searchTerm, setSearchTerm] = useState("");
+  const dropdownRef = useRef(null);
+  const [internalPhone, setInternalPhone] = 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: "" });
+  };
+  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__ */ 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__ */ jsx(
+              "circle",
+              {
+                className: "opacity-25",
+                cx: "12",
+                cy: "12",
+                r: "10",
+                stroke: "currentColor",
+                strokeWidth: "4"
+              }
+            ),
+            /* @__PURE__ */ 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__ */ 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__ */ jsx(XMarkIcon, { className: "w-4 h-4" })
+        }
+      );
+    }
+    return rightElement;
+  };
+  const leftRadiusClass = prefix !== void 0 || variant === "flushed" || variant === "unstyled" ? "" : "rounded-l-md";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex flex-col gap-1",
+        fullWidth ? "w-full" : "w-fit",
+        wrapperClassName,
+        className
+      ),
+      children: [
+        label !== void 0 && /* @__PURE__ */ jsxs(
+          "label",
+          {
+            htmlFor: inputId,
+            className: cn(
+              "font-black leading-none text-text mb-2 uppercase tracking-widest",
+              labelSizeClasses[size],
+              labelClassName
+            ),
+            children: [
+              label,
+              required && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "ml-1 text-error", children: "*" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn("flex items-stretch", fullWidth ? "w-full" : "w-fit", inputGroupClassName),
+            children: [
+              prefix !== void 0 && /* @__PURE__ */ 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__ */ jsxs(
+                "div",
+                {
+                  ref: dropdownRef,
+                  className: 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__ */ jsxs(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: () => {
+                          setIsOpen(!isOpen);
+                        },
+                        disabled: Boolean(disabled) || Boolean(isLoading),
+                        className: 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__ */ jsx("span", { className: "mr-1.5 text-base sm:text-lg opacity-90", children: activeCountry.flag }),
+                          /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: activeCountry?.dialCode ?? defaultCountryCode }),
+                          /* @__PURE__ */ jsx(
+                            ChevronDownIcon,
+                            {
+                              className: cn(
+                                "w-3.5 h-3.5 ml-1.5 text-text-secondary transition-transform",
+                                isOpen && "rotate-180"
+                              )
+                            }
+                          )
+                        ]
+                      }
+                    ),
+                    isOpen && /* @__PURE__ */ 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__ */ jsx("div", { className: "px-2 py-1.5 pb-2 sticky top-0 bg-surface z-10 border-b border-divider", children: /* @__PURE__ */ 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__ */ 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__ */ jsxs(
+                            "li",
+                            {
+                              role: "option",
+                              tabIndex: 0,
+                              "aria-selected": currentPhone.countryCode === c.dialCode,
+                              className: 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__ */ jsx("span", { className: "mr-2 text-base", children: c.flag }),
+                                /* @__PURE__ */ jsx("span", { className: "flex-1 truncate", children: c.name }),
+                                /* @__PURE__ */ jsx(
+                                  "span",
+                                  {
+                                    className: cn(
+                                      "text-xs ml-2",
+                                      currentPhone.countryCode === c.dialCode ? "text-primary/70" : "text-text-muted"
+                                    ),
+                                    children: c.dialCode
+                                  }
+                                )
+                              ]
+                            },
+                            c.id
+                          )) : /* @__PURE__ */ jsx("li", { className: "px-2 py-3 text-center text-sm text-text-muted", children: "No countries found" })
+                        }
+                      )
+                    ] }),
+                    hasLeftElement && /* @__PURE__ */ jsx("div", { className: "flex items-center pl-3", children: /* @__PURE__ */ jsx("span", { className: "text-text-secondary flex items-center justify-center", children: leftElement }) }),
+                    /* @__PURE__ */ 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: 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__ */ jsx("div", { className: "flex items-center pr-3", children: /* @__PURE__ */ jsx("span", { className: "text-text-secondary flex items-center justify-center", children: renderRightIcon() }) })
+                  ]
+                }
+              ),
+              suffix !== void 0 && /* @__PURE__ */ 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__ */ jsx("p", { id: helperId, className: cn("text-xs leading-tight text-text-muted", helperClassName), children: helperText }),
+        stateMessage !== void 0 && /* @__PURE__ */ jsx(
+          "p",
+          {
+            id: stateMessageId,
+            role: mergedState === "error" ? "alert" : void 0,
+            className: cn(
+              "text-xs leading-tight mt-1",
+              stateMessageClasses[mergedState],
+              helperClassName
+            ),
+            children: stateMessage
+          }
+        )
+      ]
+    }
+  );
+});
+Phone.displayName = "Phone";
+
+export { Phone };