@docyrus/shadcn 1.0.0 → 1.2.0

package/dist/radix-vega/mask-input.js

@@ -0,0 +1,1186 @@
+import { Slot } from '@radix-ui/react-slot';
+import * as React2 from 'react';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsx } from 'react/jsx-runtime';
+
+function setRef(ref, value) {
+  if (typeof ref === "function") {
+    return ref(value);
+  }
+  if (ref !== null && ref !== void 0) {
+    ref.current = value;
+  }
+}
+function composeRefs(...refs) {
+  return (node) => {
+    let hasCleanup = false;
+    const cleanups = refs.map((ref) => {
+      const cleanup = setRef(ref, node);
+      if (!hasCleanup && typeof cleanup === "function") {
+        hasCleanup = true;
+      }
+      return cleanup;
+    });
+    if (hasCleanup) {
+      return () => {
+        for (let i = 0; i < cleanups.length; i++) {
+          const cleanup = cleanups[i];
+          if (typeof cleanup === "function") {
+            cleanup();
+          } else {
+            setRef(refs[i], null);
+          }
+        }
+      };
+    }
+  };
+}
+function useComposedRefs(...refs) {
+  return React2.useCallback(composeRefs(...refs), refs);
+}
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var PAST_YEARS_LIMIT = 120;
+var FUTURE_YEARS_LIMIT = 10;
+var DEFAULT_CURRENCY = "USD";
+var DEFAULT_LOCALE = "en-US";
+var NUMERIC_MASK_PATTERNS = /^(phone|zipCode|zipCodeExtended|ssn|ein|time|date|creditCard|creditCardExpiry)$/;
+var CURRENCY_PERCENTAGE_SYMBOLS = /[€$%]/;
+var formattersCache = /* @__PURE__ */ new Map();
+var currencyAtEndCache = /* @__PURE__ */ new Map();
+var currencySymbolsCache = /* @__PURE__ */ new Map();
+var daysInMonthCache = [
+  31,
+  28,
+  31,
+  30,
+  31,
+  30,
+  31,
+  31,
+  30,
+  31,
+  30,
+  31
+];
+var REGEX_CACHE = {
+  digitsOnly: /^\d+$/,
+  nonDigits: /\D/g,
+  nonAlphaNumeric: /[^A-Z0-9]/gi,
+  nonNumericDot: /[^0-9.]/g,
+  nonCurrencyChars: /[^\d.,]/g,
+  hashPattern: /#/g,
+  currencyAtEnd: /\d\s*[^\d\s]+$/,
+  percentageChars: /[^\d.]/g,
+  phone: /^\d{10}$/,
+  ssn: /^\d{9}$/,
+  zipCode: /^\d{5}$/,
+  zipCodeExtended: /^\d{9}$/,
+  isbn: /^\d{13}$/,
+  ein: /^\d{9}$/,
+  time: /^\d{4}$/,
+  creditCard: /^\d{13,19}$/,
+  creditCardExpiry: /^\d{4}$/,
+  licensePlate: /^[A-Z0-9]{6}$/,
+  macAddress: /^[A-F0-9]{12}$/,
+  currencyValidation: /^\d+(\.\d{1,2})?$/,
+  ipv4Segment: /^\d{1,3}$/
+};
+function getCachedFormatter(locale, opts) {
+  const {
+    currency,
+    minimumFractionDigits = 0,
+    maximumFractionDigits = 2
+  } = opts;
+  const key = `${locale}|${currency}|${minimumFractionDigits}|${maximumFractionDigits}`;
+  if (!formattersCache.has(key)) {
+    try {
+      formattersCache.set(
+        key,
+        new Intl.NumberFormat(locale, {
+          style: "currency",
+          currency,
+          ...opts
+        })
+      );
+    } catch {
+      formattersCache.set(
+        key,
+        new Intl.NumberFormat(DEFAULT_LOCALE, {
+          style: "currency",
+          currency: DEFAULT_CURRENCY,
+          ...opts
+        })
+      );
+    }
+  }
+  const formatter = formattersCache.get(key);
+  if (!formatter) {
+    throw new Error(`Failed to create formatter for ${key}`);
+  }
+  return formatter;
+}
+function getCachedCurrencySymbols(opts) {
+  const { locale, currency } = opts;
+  const key = `${locale}|${currency}`;
+  const cached = currencySymbolsCache.get(key);
+  if (cached) {
+    return cached;
+  }
+  let currencySymbol = "$";
+  let decimalSeparator = ".";
+  let groupSeparator = ",";
+  try {
+    const formatter = getCachedFormatter(locale, {
+      currency,
+      minimumFractionDigits: 0,
+      maximumFractionDigits: 2
+    });
+    const parts = formatter.formatToParts(1234.5);
+    const currencyPart = parts.find((part) => part.type === "currency");
+    const decimalPart = parts.find((part) => part.type === "decimal");
+    const groupPart = parts.find((part) => part.type === "group");
+    if (currencyPart) currencySymbol = currencyPart.value;
+    if (decimalPart) decimalSeparator = decimalPart.value;
+    if (groupPart) groupSeparator = groupPart.value;
+  } catch {
+  }
+  const symbols = {
+    currency: currencySymbol,
+    decimal: decimalSeparator,
+    group: groupSeparator
+  };
+  currencySymbolsCache.set(key, symbols);
+  return symbols;
+}
+function isCurrencyAtEnd(opts) {
+  const { locale, currency } = opts;
+  const key = `${locale}|${currency}`;
+  const cached = currencyAtEndCache.get(key);
+  if (cached !== void 0) {
+    return cached;
+  }
+  try {
+    const formatter = getCachedFormatter(locale, {
+      currency,
+      minimumFractionDigits: 0,
+      maximumFractionDigits: 0
+    });
+    const sample = formatter.format(123);
+    const result = REGEX_CACHE.currencyAtEnd.test(sample);
+    currencyAtEndCache.set(key, result);
+    return result;
+  } catch {
+    currencyAtEndCache.set(key, false);
+    return false;
+  }
+}
+function isCurrencyMask(opts) {
+  const { mask, pattern } = opts;
+  return mask === "currency" || Boolean(pattern && (pattern.includes("$") || pattern.includes("\u20AC")));
+}
+var MASK_PATTERNS = {
+  phone: {
+    pattern: "(###) ###-####",
+    transform: (value) => value.replace(REGEX_CACHE.nonDigits, ""),
+    validate: (value) => REGEX_CACHE.phone.test(value.replace(REGEX_CACHE.nonDigits, ""))
+  },
+  ssn: {
+    pattern: "###-##-####",
+    transform: (value) => value.replace(REGEX_CACHE.nonDigits, ""),
+    validate: (value) => REGEX_CACHE.ssn.test(value.replace(REGEX_CACHE.nonDigits, ""))
+  },
+  date: {
+    pattern: "##/##/####",
+    transform: (value) => value.replace(REGEX_CACHE.nonDigits, ""),
+    validate: (value) => {
+      const cleaned = value.replace(REGEX_CACHE.nonDigits, "");
+      if (cleaned.length !== 8) return false;
+      const month = parseInt(cleaned.substring(0, 2), 10);
+      const day = parseInt(cleaned.substring(2, 4), 10);
+      const year = parseInt(cleaned.substring(4, 8), 10);
+      const currentYear = (/* @__PURE__ */ new Date()).getFullYear();
+      const minYear = currentYear - PAST_YEARS_LIMIT;
+      const maxYear = currentYear + FUTURE_YEARS_LIMIT;
+      if (month < 1 || month > 12 || day < 1 || year < minYear || year > maxYear)
+        return false;
+      const maxDays = month === 2 && (year % 4 === 0 && year % 100 !== 0 || year % 400 === 0) ? 29 : daysInMonthCache[month - 1] ?? 31;
+      return day <= maxDays;
+    }
+  },
+  time: {
+    pattern: "##:##",
+    transform: (value) => value.replace(REGEX_CACHE.nonDigits, ""),
+    validate: (value) => {
+      const cleaned = value.replace(REGEX_CACHE.nonDigits, "");
+      if (!REGEX_CACHE.time.test(cleaned)) return false;
+      const hours = parseInt(cleaned.substring(0, 2), 10);
+      const minutes = parseInt(cleaned.substring(2, 4), 10);
+      return hours <= 23 && minutes <= 59;
+    }
+  },
+  creditCard: {
+    pattern: "#### #### #### ####",
+    transform: (value) => value.replace(REGEX_CACHE.nonDigits, ""),
+    validate: (value) => {
+      const cleaned = value.replace(REGEX_CACHE.nonDigits, "");
+      if (!REGEX_CACHE.creditCard.test(cleaned)) return false;
+      let sum = 0;
+      let isEven = false;
+      for (let i = cleaned.length - 1; i >= 0; i--) {
+        const digitChar = cleaned[i];
+        if (!digitChar) continue;
+        let digit = parseInt(digitChar, 10);
+        if (isEven) {
+          digit *= 2;
+          if (digit > 9) {
+            digit -= 9;
+          }
+        }
+        sum += digit;
+        isEven = !isEven;
+      }
+      return sum % 10 === 0;
+    }
+  },
+  creditCardExpiry: {
+    pattern: "##/##",
+    transform: (value) => value.replace(REGEX_CACHE.nonDigits, ""),
+    validate: (value) => {
+      const cleaned = value.replace(REGEX_CACHE.nonDigits, "");
+      if (!REGEX_CACHE.creditCardExpiry.test(cleaned)) return false;
+      const month = parseInt(cleaned.substring(0, 2), 10);
+      const year = parseInt(cleaned.substring(2, 4), 10);
+      if (month < 1 || month > 12) return false;
+      const now = /* @__PURE__ */ new Date();
+      const currentYear = now.getFullYear();
+      const currentMonth = now.getMonth() + 1;
+      const fullYear = year <= 75 ? 2e3 + year : 1900 + year;
+      if (fullYear < currentYear || fullYear === currentYear && month < currentMonth) {
+        return false;
+      }
+      const maxYear = currentYear + 50;
+      if (fullYear > maxYear) {
+        return false;
+      }
+      return true;
+    }
+  },
+  zipCode: {
+    pattern: "#####",
+    transform: (value) => value.replace(REGEX_CACHE.nonDigits, ""),
+    validate: (value) => REGEX_CACHE.zipCode.test(value.replace(REGEX_CACHE.nonDigits, ""))
+  },
+  zipCodeExtended: {
+    pattern: "#####-####",
+    transform: (value) => value.replace(REGEX_CACHE.nonDigits, ""),
+    validate: (value) => REGEX_CACHE.zipCodeExtended.test(
+      value.replace(REGEX_CACHE.nonDigits, "")
+    )
+  },
+  currency: {
+    pattern: "$###,###.##",
+    transform: (value, { currency = DEFAULT_CURRENCY, locale = DEFAULT_LOCALE } = {}) => {
+      let localeDecimalSeparator = ".";
+      try {
+        const formatter = getCachedFormatter(locale, {
+          currency,
+          minimumFractionDigits: 0,
+          maximumFractionDigits: 2
+        });
+        const parts = formatter.formatToParts(1234.5);
+        const decimalPart = parts.find((part) => part.type === "decimal");
+        if (decimalPart) localeDecimalSeparator = decimalPart.value;
+      } catch {
+      }
+      const cleaned = value.replace(REGEX_CACHE.nonCurrencyChars, "");
+      const dotIndex = cleaned.indexOf(".");
+      const commaIndex = cleaned.indexOf(",");
+      let hasDecimalSeparator = false;
+      let decimalIndex = -1;
+      if (localeDecimalSeparator === ",") {
+        const lastCommaIndex = cleaned.lastIndexOf(",");
+        if (lastCommaIndex !== -1) {
+          const afterComma = cleaned.substring(lastCommaIndex + 1);
+          if (afterComma.length <= 2 && /^\d*$/.test(afterComma)) {
+            hasDecimalSeparator = true;
+            decimalIndex = lastCommaIndex;
+          }
+        }
+        if (!hasDecimalSeparator && dotIndex !== -1) {
+          const afterDot = cleaned.substring(dotIndex + 1);
+          if (afterDot.length <= 2 && /^\d*$/.test(afterDot)) {
+            hasDecimalSeparator = true;
+            decimalIndex = dotIndex;
+          }
+        }
+        if (!hasDecimalSeparator && cleaned.length >= 4) {
+          const match = cleaned.match(/^(\d+)\.(\d{3})(\d{1,2})$/);
+          if (match) {
+            const [, beforeDot, thousandsPart, decimalPart] = match;
+            const integerPart = (beforeDot ?? "") + (thousandsPart ?? "");
+            const result = `${integerPart}.${decimalPart}`;
+            return result;
+          }
+        }
+      } else {
+        const lastDotIndex = cleaned.lastIndexOf(".");
+        if (lastDotIndex !== -1) {
+          const afterDot = cleaned.substring(lastDotIndex + 1);
+          if (afterDot.length <= 2 && /^\d*$/.test(afterDot)) {
+            hasDecimalSeparator = true;
+            decimalIndex = lastDotIndex;
+          }
+        }
+        if (!hasDecimalSeparator && commaIndex !== -1) {
+          const afterComma = cleaned.substring(commaIndex + 1);
+          const looksLikeThousands = commaIndex <= 3 && afterComma.length >= 3;
+          if (!looksLikeThousands && afterComma.length <= 2 && /^\d*$/.test(afterComma)) {
+            hasDecimalSeparator = true;
+            decimalIndex = commaIndex;
+          }
+        }
+      }
+      if (hasDecimalSeparator && decimalIndex !== -1) {
+        const beforeDecimal = cleaned.substring(0, decimalIndex).replace(/[.,]/g, "");
+        const afterDecimal = cleaned.substring(decimalIndex + 1).replace(/[.,]/g, "");
+        if (afterDecimal === "") {
+          const result2 = `${beforeDecimal}.`;
+          return result2;
+        }
+        const result = `${beforeDecimal}.${afterDecimal.substring(0, 2)}`;
+        return result;
+      }
+      const digitsOnly = cleaned.replace(/[.,]/g, "");
+      return digitsOnly;
+    },
+    validate: (value) => {
+      if (!REGEX_CACHE.currencyValidation.test(value)) return false;
+      const num = parseFloat(value);
+      return !Number.isNaN(num) && num >= 0;
+    }
+  },
+  percentage: {
+    pattern: "##.##%",
+    transform: (value) => {
+      const cleaned = value.replace(REGEX_CACHE.percentageChars, "");
+      const parts = cleaned.split(".");
+      if (parts.length > 2) {
+        return `${parts[0]}.${parts.slice(1).join("")}`;
+      }
+      if (parts[1] && parts[1].length > 2) {
+        return `${parts[0]}.${parts[1].substring(0, 2)}`;
+      }
+      return cleaned;
+    },
+    validate: (value, opts = {}) => {
+      const num = parseFloat(value);
+      const min = opts.min ?? 0;
+      const max = opts.max ?? 100;
+      return !Number.isNaN(num) && num >= min && num <= max;
+    }
+  },
+  licensePlate: {
+    pattern: "###-###",
+    transform: (value) => value.replace(REGEX_CACHE.nonAlphaNumeric, "").toUpperCase(),
+    validate: (value) => REGEX_CACHE.licensePlate.test(value)
+  },
+  ipv4: {
+    pattern: "###.###.###.###",
+    transform: (value) => value.replace(REGEX_CACHE.nonNumericDot, ""),
+    validate: (value) => {
+      if (value.includes(".")) {
+        const segments = value.split(".");
+        if (segments.length > 4) return false;
+        return segments.every((segment) => {
+          if (segment === "") return true;
+          if (!REGEX_CACHE.ipv4Segment.test(segment)) return false;
+          const num = parseInt(segment, 10);
+          return num <= 255;
+        });
+      } else {
+        if (!REGEX_CACHE.digitsOnly.test(value)) return false;
+        if (value.length > 12) return false;
+        const chunks = [];
+        for (let i = 0; i < value.length; i += 3) {
+          chunks.push(value.substring(i, i + 3));
+        }
+        if (chunks.length > 4) return false;
+        return chunks.every((chunk) => {
+          const num = parseInt(chunk, 10);
+          return num >= 0 && num <= 255;
+        });
+      }
+    }
+  },
+  macAddress: {
+    pattern: "##:##:##:##:##:##",
+    transform: (value) => value.replace(REGEX_CACHE.nonAlphaNumeric, "").toUpperCase(),
+    validate: (value) => REGEX_CACHE.macAddress.test(value)
+  },
+  isbn: {
+    pattern: "###-#-###-#####-#",
+    transform: (value) => value.replace(REGEX_CACHE.nonDigits, ""),
+    validate: (value) => REGEX_CACHE.isbn.test(value.replace(REGEX_CACHE.nonDigits, ""))
+  },
+  ein: {
+    pattern: "##-#######",
+    transform: (value) => value.replace(REGEX_CACHE.nonDigits, ""),
+    validate: (value) => REGEX_CACHE.ein.test(value.replace(REGEX_CACHE.nonDigits, ""))
+  }
+};
+function applyMask(opts) {
+  const { value, pattern, currency, locale, mask } = opts;
+  const cleanValue = value;
+  if (pattern.includes("$") || pattern.includes("\u20AC") || mask === "currency") {
+    return applyCurrencyMask({
+      value: cleanValue,
+      currency: currency ?? DEFAULT_CURRENCY,
+      locale: locale ?? DEFAULT_LOCALE
+    });
+  }
+  if (pattern.includes("%")) {
+    return applyPercentageMask(cleanValue);
+  }
+  if (mask === "ipv4") {
+    return cleanValue;
+  }
+  const maskedChars = [];
+  let valueIndex = 0;
+  for (let i = 0; i < pattern.length && valueIndex < cleanValue.length; i++) {
+    const patternChar = pattern[i];
+    const valueChar = cleanValue[valueIndex];
+    if (patternChar === "#" && valueChar) {
+      maskedChars.push(valueChar);
+      valueIndex++;
+    } else if (patternChar) {
+      maskedChars.push(patternChar);
+    }
+  }
+  return maskedChars.join("");
+}
+function applyCurrencyMask(opts) {
+  const { value, currency = DEFAULT_CURRENCY, locale = DEFAULT_LOCALE } = opts;
+  if (!value) return "";
+  const {
+    currency: currencySymbol,
+    decimal: decimalSeparator,
+    group: groupSeparator
+  } = getCachedCurrencySymbols({ locale, currency });
+  const normalizedValue = value.replace(
+    new RegExp(
+      `\\${groupSeparator.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")}`,
+      "g"
+    ),
+    ""
+  ).replace(decimalSeparator, ".");
+  const parts = normalizedValue.split(".");
+  const integerPart = parts[0] ?? "";
+  const fractionalPart = parts[1] ?? "";
+  if (!integerPart && !fractionalPart) return "";
+  const intValue = integerPart ?? "0";
+  const fracValue = fractionalPart.slice(0, 2);
+  const num = Number(`${intValue}.${fracValue ?? ""}`);
+  if (Number.isNaN(num)) {
+    const cleanedDigits = value.replace(/[^\d]/g, "");
+    if (!cleanedDigits) return "";
+    return `${currencySymbol}${cleanedDigits}`;
+  }
+  const hasExplicitDecimal = value.includes(".") || value.includes(decimalSeparator);
+  try {
+    const formatter = getCachedFormatter(locale, {
+      currency,
+      minimumFractionDigits: fracValue ? fracValue.length : 0,
+      maximumFractionDigits: 2
+    });
+    const result = formatter.format(num);
+    if (hasExplicitDecimal && !fracValue) {
+      if (result.match(/^[^\d\s]+/)) {
+        const finalResult = result.replace(/(\d)$/, `$1${decimalSeparator}`);
+        return finalResult;
+      } else {
+        const finalResult = result.replace(
+          /(\d)(\s*)([^\d\s]+)$/,
+          `$1${decimalSeparator}$2$3`
+        );
+        return finalResult;
+      }
+    }
+    return result;
+  } catch {
+    const formattedInt = intValue.replace(
+      /\B(?=(\d{3})+(?!\d))/g,
+      groupSeparator
+    );
+    let result = `${currencySymbol}${formattedInt}`;
+    if (hasExplicitDecimal) {
+      result += `${decimalSeparator}${fracValue}`;
+    }
+    return result;
+  }
+}
+function applyPercentageMask(value) {
+  if (!value) return "";
+  const parts = value.split(".");
+  let result = parts[0] ?? "0";
+  if (value.includes(".")) {
+    result += `.${(parts[1] ?? "").substring(0, 2)}`;
+  }
+  return `${result}%`;
+}
+function getUnmaskedValue(opts) {
+  const { value, transform, currency, locale } = opts;
+  return transform ? transform(value, { currency, locale }) : value.replace(REGEX_CACHE.nonDigits, "");
+}
+function toUnmaskedIndex(opts) {
+  const { masked, pattern, caret } = opts;
+  let idx = 0;
+  for (let i = 0; i < caret && i < masked.length && i < pattern.length; i++) {
+    if (pattern[i] === "#") {
+      idx++;
+    }
+  }
+  return idx;
+}
+function fromUnmaskedIndex(opts) {
+  const { masked, pattern, unmaskedIndex } = opts;
+  let seen = 0;
+  for (let i = 0; i < masked.length && i < pattern.length; i++) {
+    if (pattern[i] === "#") {
+      seen++;
+      if (seen === unmaskedIndex) {
+        return i + 1;
+      }
+    }
+  }
+  return masked.length;
+}
+function getCurrencyCaretPosition(opts) {
+  const {
+    newValue,
+    mask,
+    transformOpts,
+    oldCursorPosition,
+    oldValue,
+    previousUnmasked
+  } = opts;
+  if (oldCursorPosition !== void 0 && oldValue && previousUnmasked !== void 0) {
+    if (oldCursorPosition < oldValue.length) {
+      const digitsBeforeCursor = oldValue.substring(0, oldCursorPosition).replace(/\D/g, "").length;
+      let digitCount = 0;
+      for (let i = 0; i < newValue.length; i++) {
+        if (/\d/.test(newValue[i] ?? "")) {
+          digitCount++;
+          if (digitCount === digitsBeforeCursor) {
+            return i + 1;
+          }
+        }
+      }
+    }
+  }
+  if (mask === "currency") {
+    const currencyAtEnd = isCurrencyAtEnd(transformOpts);
+    if (currencyAtEnd) {
+      const match = newValue.match(/(\d)\s*([^\d\s]+)$/);
+      if (match?.[1]) {
+        return newValue.lastIndexOf(match[1]) + 1;
+      } else {
+        return newValue.length;
+      }
+    } else {
+      return newValue.length;
+    }
+  } else {
+    return newValue.length;
+  }
+}
+function getPatternCaretPosition(opts) {
+  const {
+    newValue,
+    maskPattern,
+    currentUnmasked,
+    oldCursorPosition,
+    oldValue,
+    previousUnmasked
+  } = opts;
+  let position = 0;
+  let unmaskedCount = 0;
+  if (oldCursorPosition !== void 0 && oldValue && previousUnmasked !== void 0) {
+    const oldUnmaskedIndex = toUnmaskedIndex({
+      masked: oldValue,
+      pattern: maskPattern.pattern,
+      caret: oldCursorPosition
+    });
+    if (oldCursorPosition < oldValue.length) {
+      const targetUnmaskedIndex = Math.min(
+        oldUnmaskedIndex,
+        currentUnmasked.length
+      );
+      for (let i = 0; i < maskPattern.pattern.length && i < newValue.length; i++) {
+        if (maskPattern.pattern[i] === "#") {
+          unmaskedCount++;
+          if (unmaskedCount <= targetUnmaskedIndex) {
+            position = i + 1;
+          }
+        }
+      }
+      return position;
+    }
+  }
+  for (let i = 0; i < maskPattern.pattern.length && i < newValue.length; i++) {
+    if (maskPattern.pattern[i] === "#") {
+      unmaskedCount++;
+      if (unmaskedCount <= currentUnmasked.length) {
+        position = i + 1;
+      }
+    }
+  }
+  return position;
+}
+function MaskInput(props) {
+  const {
+    value: valueProp,
+    defaultValue,
+    onValueChange: onValueChangeProp,
+    onValidate,
+    onBlur: onBlurProp,
+    onFocus: onFocusProp,
+    onKeyDown: onKeyDownProp,
+    onPaste: onPasteProp,
+    onCompositionStart: onCompositionStartProp,
+    onCompositionEnd: onCompositionEndProp,
+    validationMode = "onChange",
+    mask,
+    maskPlaceholder,
+    currency = DEFAULT_CURRENCY,
+    locale = DEFAULT_LOCALE,
+    placeholder,
+    inputMode,
+    min,
+    max,
+    maxLength,
+    asChild = false,
+    disabled = false,
+    invalid = false,
+    readOnly = false,
+    required = false,
+    withoutMask = false,
+    className,
+    ref,
+    ...inputProps
+  } = props;
+  const [internalValue, setInternalValue] = React2.useState(defaultValue ?? "");
+  const [focused, setFocused] = React2.useState(false);
+  const [composing, setComposing] = React2.useState(false);
+  const [touched, setTouched] = React2.useState(false);
+  const inputRef = React2.useRef(null);
+  const composedRef = useComposedRefs(ref, inputRef);
+  const isControlled = valueProp !== void 0;
+  const value = isControlled ? valueProp : internalValue;
+  const maskPattern = React2.useMemo(() => {
+    if (typeof mask === "string") {
+      return MASK_PATTERNS[mask];
+    }
+    return mask;
+  }, [mask]);
+  const transformOpts = React2.useMemo(
+    () => ({
+      currency,
+      locale
+    }),
+    [currency, locale]
+  );
+  const placeholderValue = React2.useMemo(() => {
+    if (withoutMask) return placeholder;
+    if (placeholder && maskPlaceholder) {
+      return focused ? maskPlaceholder : placeholder;
+    }
+    if (maskPlaceholder) {
+      return focused ? maskPlaceholder : void 0;
+    }
+    return placeholder;
+  }, [placeholder, maskPlaceholder, focused, withoutMask]);
+  const displayValue = React2.useMemo(() => {
+    if (withoutMask || !maskPattern || !value) return value ?? "";
+    const unmasked = getUnmaskedValue({
+      value,
+      transform: maskPattern.transform,
+      ...transformOpts
+    });
+    return applyMask({
+      value: unmasked,
+      pattern: maskPattern.pattern,
+      ...transformOpts,
+      mask
+    });
+  }, [value, maskPattern, withoutMask, transformOpts, mask]);
+  const tokenCount = React2.useMemo(() => {
+    if (!maskPattern || CURRENCY_PERCENTAGE_SYMBOLS.test(maskPattern.pattern))
+      return void 0;
+    return maskPattern.pattern.match(REGEX_CACHE.hashPattern)?.length ?? 0;
+  }, [maskPattern]);
+  const calculatedMaxLength = tokenCount ? maskPattern?.pattern.length : maxLength;
+  const calculatedInputMode = React2.useMemo(() => {
+    if (inputMode) return inputMode;
+    if (!maskPattern) return void 0;
+    if (mask === "currency" || mask === "percentage" || mask === "ipv4") {
+      return "decimal";
+    }
+    if (typeof mask === "string" && NUMERIC_MASK_PATTERNS.test(mask)) {
+      return "numeric";
+    }
+    return void 0;
+  }, [maskPattern, mask, inputMode]);
+  const shouldValidate = React2.useCallback(
+    (trigger) => {
+      if (!onValidate || !maskPattern?.validate) return false;
+      switch (validationMode) {
+        case "onChange":
+          return trigger === "change";
+        case "onBlur":
+          return trigger === "blur";
+        case "onSubmit":
+          return false;
+        case "onTouched":
+          return touched ? trigger === "change" : trigger === "blur";
+        case "all":
+          return true;
+        default:
+          return trigger === "change";
+      }
+    },
+    [onValidate, maskPattern, validationMode, touched]
+  );
+  const validationOpts = React2.useMemo(
+    () => ({
+      min: typeof min === "string" ? parseFloat(min) : min,
+      max: typeof max === "string" ? parseFloat(max) : max
+    }),
+    [min, max]
+  );
+  const onInputValidate = React2.useCallback(
+    (unmaskedValue) => {
+      if (onValidate && maskPattern?.validate) {
+        const isValid = maskPattern.validate(unmaskedValue, validationOpts);
+        onValidate(isValid, unmaskedValue);
+      }
+    },
+    [onValidate, maskPattern?.validate, validationOpts]
+  );
+  const onValueChange = React2.useCallback(
+    (event) => {
+      const inputValue = event.target.value;
+      let newValue = inputValue;
+      let unmaskedValue = inputValue;
+      if (composing) {
+        if (!isControlled) setInternalValue(inputValue);
+        return;
+      }
+      if (withoutMask || !maskPattern) {
+        if (!isControlled) setInternalValue(inputValue);
+        if (shouldValidate("change")) onValidate?.(true, inputValue);
+        onValueChangeProp?.(inputValue, inputValue);
+        return;
+      }
+      if (maskPattern) {
+        unmaskedValue = getUnmaskedValue({
+          value: inputValue,
+          transform: maskPattern.transform,
+          ...transformOpts
+        });
+        newValue = applyMask({
+          value: unmaskedValue,
+          pattern: maskPattern.pattern,
+          ...transformOpts,
+          mask
+        });
+        if (inputRef.current && newValue !== inputValue) {
+          const inputElement = inputRef.current;
+          if (!(inputElement instanceof HTMLInputElement)) return;
+          const oldCursorPosition = inputElement.selectionStart ?? 0;
+          inputElement.value = newValue;
+          const currentUnmasked = getUnmaskedValue({
+            value: newValue,
+            transform: maskPattern.transform,
+            ...transformOpts
+          });
+          let newCursorPosition;
+          const previousUnmasked = getUnmaskedValue({
+            value,
+            transform: maskPattern.transform,
+            ...transformOpts
+          });
+          if (CURRENCY_PERCENTAGE_SYMBOLS.test(maskPattern.pattern)) {
+            newCursorPosition = getCurrencyCaretPosition({
+              newValue,
+              mask,
+              transformOpts,
+              oldCursorPosition,
+              oldValue: inputValue,
+              previousUnmasked
+            });
+          } else {
+            newCursorPosition = getPatternCaretPosition({
+              newValue,
+              maskPattern,
+              currentUnmasked,
+              oldCursorPosition,
+              oldValue: inputValue,
+              previousUnmasked
+            });
+          }
+          if (isCurrencyMask({ mask, pattern: maskPattern.pattern })) {
+            if (mask === "currency") {
+              const currencyAtEnd = isCurrencyAtEnd(transformOpts);
+              if (!currencyAtEnd) {
+                newCursorPosition = Math.max(1, newCursorPosition);
+              }
+            } else {
+              newCursorPosition = Math.max(1, newCursorPosition);
+            }
+          } else if (maskPattern.pattern.includes("%")) {
+            newCursorPosition = Math.min(
+              newValue.length - 1,
+              newCursorPosition
+            );
+          }
+          newCursorPosition = Math.min(newCursorPosition, newValue.length);
+          inputElement.setSelectionRange(newCursorPosition, newCursorPosition);
+        }
+      }
+      if (!isControlled) {
+        setInternalValue(newValue);
+      }
+      if (shouldValidate("change")) {
+        onInputValidate(unmaskedValue);
+      }
+      onValueChangeProp?.(newValue, unmaskedValue);
+    },
+    [
+      maskPattern,
+      isControlled,
+      onValueChangeProp,
+      onValidate,
+      onInputValidate,
+      composing,
+      shouldValidate,
+      withoutMask,
+      transformOpts,
+      mask,
+      value
+    ]
+  );
+  const onFocus = React2.useCallback(
+    (event) => {
+      onFocusProp?.(event);
+      if (event.defaultPrevented) return;
+      setFocused(true);
+    },
+    [onFocusProp]
+  );
+  const onBlur = React2.useCallback(
+    (event) => {
+      onBlurProp?.(event);
+      if (event.defaultPrevented) return;
+      setFocused(false);
+      if (!touched) {
+        setTouched(true);
+      }
+      if (shouldValidate("blur")) {
+        const currentValue = event.target.value;
+        const unmaskedValue = maskPattern ? getUnmaskedValue({
+          value: currentValue,
+          transform: maskPattern.transform,
+          ...transformOpts
+        }) : currentValue;
+        onInputValidate(unmaskedValue);
+      }
+    },
+    [
+      onBlurProp,
+      touched,
+      shouldValidate,
+      onInputValidate,
+      maskPattern,
+      transformOpts
+    ]
+  );
+  const onCompositionStart = React2.useCallback(
+    (event) => {
+      onCompositionStartProp?.(event);
+      if (event.defaultPrevented) return;
+      setComposing(true);
+    },
+    [onCompositionStartProp]
+  );
+  const onCompositionEnd = React2.useCallback(
+    (event) => {
+      onCompositionEndProp?.(event);
+      if (event.defaultPrevented) return;
+      setComposing(false);
+      const inputElement = inputRef.current;
+      if (!inputElement) return;
+      if (!(inputElement instanceof HTMLInputElement)) return;
+      const inputValue = inputElement.value;
+      if (!maskPattern || withoutMask) {
+        if (!isControlled) setInternalValue(inputValue);
+        if (shouldValidate("change")) onValidate?.(true, inputValue);
+        onValueChangeProp?.(inputValue, inputValue);
+        return;
+      }
+      const unmasked = getUnmaskedValue({
+        value: inputValue,
+        transform: maskPattern.transform,
+        ...transformOpts
+      });
+      const masked = applyMask({
+        value: unmasked,
+        pattern: maskPattern.pattern,
+        ...transformOpts,
+        mask
+      });
+      if (!isControlled) setInternalValue(masked);
+      if (shouldValidate("change")) onInputValidate(unmasked);
+      onValueChangeProp?.(masked, unmasked);
+    },
+    [
+      onCompositionEndProp,
+      maskPattern,
+      withoutMask,
+      isControlled,
+      shouldValidate,
+      onValidate,
+      onValueChangeProp,
+      transformOpts,
+      mask,
+      onInputValidate
+    ]
+  );
+  const onPaste = React2.useCallback(
+    (event) => {
+      onPasteProp?.(event);
+      if (event.defaultPrevented) return;
+      if (withoutMask || !maskPattern) return;
+      if (mask === "ipv4") return;
+      const target = event.target;
+      if (!(target instanceof HTMLInputElement)) return;
+      const pastedData = event.clipboardData.getData("text");
+      if (!pastedData) return;
+      event.preventDefault();
+      const currentValue = target.value;
+      const selectionStart = target.selectionStart ?? 0;
+      const selectionEnd = target.selectionEnd ?? 0;
+      const beforeSelection = currentValue.slice(0, selectionStart);
+      const afterSelection = currentValue.slice(selectionEnd);
+      const newInputValue = beforeSelection + pastedData + afterSelection;
+      const unmasked = getUnmaskedValue({
+        value: newInputValue,
+        transform: maskPattern.transform,
+        ...transformOpts
+      });
+      const newMaskedValue = applyMask({
+        value: unmasked,
+        pattern: maskPattern.pattern,
+        ...transformOpts,
+        mask
+      });
+      target.value = newMaskedValue;
+      if (isCurrencyMask({ mask, pattern: maskPattern.pattern })) {
+        const currencyAtEnd = isCurrencyAtEnd(transformOpts);
+        const caret = currencyAtEnd ? newMaskedValue.search(/\s*[^\d\s]+$/) : newMaskedValue.length;
+        target.setSelectionRange(caret, caret);
+        return;
+      }
+      if (maskPattern.pattern.includes("%")) {
+        target.setSelectionRange(
+          newMaskedValue.length - 1,
+          newMaskedValue.length - 1
+        );
+        return;
+      }
+      let newCursorPosition = newMaskedValue.length;
+      try {
+        const unmaskedCount = unmasked.length;
+        let position = 0;
+        let count = 0;
+        for (let i = 0; i < maskPattern.pattern.length && i < newMaskedValue.length; i++) {
+          if (maskPattern.pattern[i] === "#") {
+            count++;
+            if (count <= unmaskedCount) {
+              position = i + 1;
+            }
+          }
+        }
+        newCursorPosition = position;
+      } catch {
+      }
+      target.setSelectionRange(newCursorPosition, newCursorPosition);
+      if (!isControlled) setInternalValue(newMaskedValue);
+      if (shouldValidate("change")) onInputValidate(unmasked);
+      onValueChangeProp?.(newMaskedValue, unmasked);
+    },
+    [
+      onPasteProp,
+      withoutMask,
+      maskPattern,
+      mask,
+      transformOpts,
+      isControlled,
+      shouldValidate,
+      onInputValidate,
+      onValueChangeProp
+    ]
+  );
+  const onKeyDown = React2.useCallback(
+    (event) => {
+      onKeyDownProp?.(event);
+      if (event.defaultPrevented) return;
+      if (withoutMask || !maskPattern) return;
+      if (mask === "ipv4") return;
+      if (event.key === "Backspace") {
+        const target = event.target;
+        if (!(target instanceof HTMLInputElement)) return;
+        const cursorPosition = target.selectionStart ?? 0;
+        const selectionEnd = target.selectionEnd ?? 0;
+        const currentValue = target.value;
+        if (mask === "currency" || mask === "percentage" || maskPattern.pattern.includes("$") || maskPattern.pattern.includes("\u20AC") || maskPattern.pattern.includes("%")) {
+          return;
+        }
+        if (cursorPosition !== selectionEnd) {
+          return;
+        }
+        if (cursorPosition > 0) {
+          const charBeforeCursor = currentValue[cursorPosition - 1];
+          if (charBeforeCursor) {
+            event.preventDefault();
+            const unmaskedIndex = toUnmaskedIndex({
+              masked: currentValue,
+              pattern: maskPattern.pattern,
+              caret: cursorPosition
+            });
+            if (unmaskedIndex > 0) {
+              const currentUnmasked = getUnmaskedValue({
+                value: currentValue,
+                transform: maskPattern.transform,
+                ...transformOpts
+              });
+              const nextUnmasked = currentUnmasked.slice(0, unmaskedIndex - 1) + currentUnmasked.slice(unmaskedIndex);
+              const nextMasked = applyMask({
+                value: nextUnmasked,
+                pattern: maskPattern.pattern,
+                ...transformOpts,
+                mask
+              });
+              target.value = nextMasked;
+              const nextCaret = fromUnmaskedIndex({
+                masked: nextMasked,
+                pattern: maskPattern.pattern,
+                unmaskedIndex: unmaskedIndex - 1
+              });
+              target.setSelectionRange(nextCaret, nextCaret);
+              onValueChangeProp?.(nextMasked, nextUnmasked);
+            }
+            return;
+          }
+        }
+      }
+      if (event.key === "Delete") {
+        const target = event.target;
+        if (!(target instanceof HTMLInputElement)) return;
+        const cursorPosition = target.selectionStart ?? 0;
+        const selectionEnd = target.selectionEnd ?? 0;
+        const currentValue = target.value;
+        if (mask === "currency" || mask === "percentage" || maskPattern.pattern.includes("$") || maskPattern.pattern.includes("\u20AC") || maskPattern.pattern.includes("%")) {
+          return;
+        }
+        if (cursorPosition !== selectionEnd) {
+          return;
+        }
+        if (cursorPosition < currentValue.length) {
+          const charAtCursor = currentValue[cursorPosition];
+          if (charAtCursor) {
+            event.preventDefault();
+            const unmaskedIndex = toUnmaskedIndex({
+              masked: currentValue,
+              pattern: maskPattern.pattern,
+              caret: cursorPosition
+            });
+            const currentUnmasked = getUnmaskedValue({
+              value: currentValue,
+              transform: maskPattern.transform,
+              ...transformOpts
+            });
+            if (unmaskedIndex < currentUnmasked.length) {
+              const nextUnmasked = currentUnmasked.slice(0, unmaskedIndex) + currentUnmasked.slice(unmaskedIndex + 1);
+              const nextMasked = applyMask({
+                value: nextUnmasked,
+                pattern: maskPattern.pattern,
+                ...transformOpts,
+                mask
+              });
+              target.value = nextMasked;
+              const nextCaret = fromUnmaskedIndex({
+                masked: nextMasked,
+                pattern: maskPattern.pattern,
+                unmaskedIndex
+              });
+              target.setSelectionRange(nextCaret, nextCaret);
+              onValueChangeProp?.(nextMasked, nextUnmasked);
+            }
+            return;
+          }
+        }
+      }
+    },
+    [
+      maskPattern,
+      onKeyDownProp,
+      onValueChangeProp,
+      transformOpts,
+      mask,
+      withoutMask
+    ]
+  );
+  const InputPrimitive = asChild ? Slot : "input";
+  return /* @__PURE__ */ jsx(
+    InputPrimitive,
+    {
+      "aria-invalid": invalid,
+      "data-disabled": disabled ? "" : void 0,
+      "data-invalid": invalid ? "" : void 0,
+      "data-readonly": readOnly ? "" : void 0,
+      "data-required": required ? "" : void 0,
+      "data-slot": "mask-input",
+      ...inputProps,
+      className: cn(
+        "flex h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-xs outline-none transition-[color,box-shadow] selection:bg-primary selection:text-primary-foreground file:inline-flex file:h-7 file:border-0 file:bg-transparent file:font-medium file:text-foreground file:text-sm placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm dark:bg-input/30",
+        "focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50",
+        "aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40",
+        className
+      ),
+      placeholder: placeholderValue,
+      ref: composedRef,
+      value: displayValue,
+      disabled,
+      maxLength: calculatedMaxLength,
+      readOnly,
+      required,
+      inputMode: calculatedInputMode,
+      min,
+      max,
+      onFocus,
+      onBlur,
+      onKeyDown,
+      onPaste,
+      onChange: onValueChange,
+      onCompositionStart,
+      onCompositionEnd
+    }
+  );
+}
+
+export { MASK_PATTERNS, MaskInput, applyCurrencyMask, applyMask, applyPercentageMask, fromUnmaskedIndex, getUnmaskedValue, toUnmaskedIndex };
+//# sourceMappingURL=mask-input.js.map
+//# sourceMappingURL=mask-input.js.map