@comitor/ui 1.11.0 → 2.1.0

package/dist/components/ui/mask-input.js

@@ -0,0 +1,558 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { Slot } from "@radix-ui/react-slot";
+import * as React from "react";
+import { cn } from "../../lib/cn.js";
+import { useComposedRefs } from "../../lib/compose-refs.js";
+import {
+  applyMask,
+  CURRENCY_PERCENTAGE_SYMBOLS,
+  DEFAULT_CURRENCY,
+  DEFAULT_LOCALE,
+  fromUnmaskedIndex,
+  getCurrencyCaretPosition,
+  getPatternCaretPosition,
+  getUnmaskedValue,
+  isCurrencyAtEnd,
+  isCurrencyMask,
+  MASK_PATTERNS,
+  NUMERIC_MASK_PATTERNS,
+  REGEX_CACHE,
+  toUnmaskedIndex
+} from "./mask-input-constants.js";
+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] = React.useState(defaultValue ?? "");
+  const [focused, setFocused] = React.useState(false);
+  const [composing, setComposing] = React.useState(false);
+  const [touched, setTouched] = React.useState(false);
+  const inputRef = React.useRef(null);
+  const composedRef = useComposedRefs(ref, inputRef);
+  const isControlled = valueProp !== void 0;
+  const value = isControlled ? valueProp : internalValue;
+  const maskPattern = React.useMemo(() => {
+    if (typeof mask === "string") {
+      return MASK_PATTERNS[mask];
+    }
+    return mask;
+  }, [mask]);
+  const transformOpts = React.useMemo(
+    () => ({
+      currency,
+      locale
+    }),
+    [currency, locale]
+  );
+  const placeholderValue = React.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 = React.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 = React.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 = React.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 = React.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 = React.useMemo(
+    () => ({
+      min: typeof min === "string" ? Number.parseFloat(min) : min,
+      max: typeof max === "string" ? Number.parseFloat(max) : max
+    }),
+    [min, max]
+  );
+  const onInputValidate = React.useCallback(
+    (unmaskedValue) => {
+      if (onValidate && maskPattern?.validate) {
+        const isValid = maskPattern.validate(unmaskedValue, validationOpts);
+        onValidate(isValid, unmaskedValue);
+      }
+    },
+    [onValidate, maskPattern?.validate, validationOpts]
+  );
+  const onValueChange = React.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 = React.useCallback(
+    (event) => {
+      onFocusProp?.(event);
+      if (event.defaultPrevented) return;
+      setFocused(true);
+    },
+    [onFocusProp]
+  );
+  const onBlur = React.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 = React.useCallback(
+    (event) => {
+      onCompositionStartProp?.(event);
+      if (event.defaultPrevented) return;
+      setComposing(true);
+    },
+    [onCompositionStartProp]
+  );
+  const onCompositionEnd = React.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 = React.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 = React.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 || void 0,
+      "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(
+        /*
+         * ⚠ Khác thượng nguồn: chuỗi lớp của `Input` Comitor thay cho của shadcn, để ô có mặt nạ
+         * đứng cạnh ô nhập thường trong cùng một form không lệch nhau (cao, nền, viền, cỡ chữ,
+         * focus). Số đo của từng vai trò ở chú thích đầu `input.tsx`:
+         *   viền nghỉ `border-input` · hover `--control-edge-strong` · focus `--primary-ink`;
+         *   lỗi `border-destructive-ink` (không phải `border-destructive` — token TÔ NỀN).
+         * Bỏ `dark:bg-input/30` (viết thẳng thang màu — bảng tương phản cao không đổi được) và
+         * `shadow-xs` (không có trong bộ bóng của gói).
+         */
+        "w-full h-9 px-3 rounded-md border bg-background text-sm text-foreground placeholder:text-muted-foreground",
+        "transition-colors duration-150 ease-out",
+        "focus:outline-none focus:ring-2 focus:ring-ring/50 focus:border-primary-ink",
+        "disabled:opacity-50 disabled:cursor-not-allowed disabled:bg-muted",
+        "border-input hover:border-control-edge-strong",
+        "aria-invalid:border-destructive-ink aria-invalid:hover:border-destructive-ink aria-invalid:focus:border-destructive-ink aria-invalid:focus:ring-destructive/30",
+        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 {
+  MaskInput
+};
+//# sourceMappingURL=mask-input.js.map

package/dist/components/ui/mask-input.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/ui/mask-input.tsx"],"sourcesContent":["\"use client\";\n\n/*\n * Port từ Dice UI (https://diceui.com/docs/components/mask-input) — MIT, © 2024 Sadman Sakib.\n * Giữ nguyên cấu trúc thượng nguồn để còn đối chiếu ngược được; mọi chỗ đổi đều có chú thích.\n */\n\n/*\n * ⚠ Khác thượng nguồn: thượng nguồn là MỘT file. Ở đây nửa trên (bảng `MASK_PATTERNS` + mọi hàm\n * thuần) nằm ở `mask-input-constants.ts` — hằng dữ liệu export ra không được sống trong file\n * `\"use client\"` (Server Component đọc ra `undefined`, không throw). File này chỉ còn component,\n * và chỉ `import` từ đó, KHÔNG `export` lại (re-export vòng qua file client là vô hiệu).\n */\n\nimport { Slot } from \"@radix-ui/react-slot\";\nimport * as React from \"react\";\nimport { cn } from \"../../lib/cn.js\";\nimport { useComposedRefs } from \"../../lib/compose-refs.js\";\nimport {\n  applyMask,\n  CURRENCY_PERCENTAGE_SYMBOLS,\n  DEFAULT_CURRENCY,\n  DEFAULT_LOCALE,\n  fromUnmaskedIndex,\n  getCurrencyCaretPosition,\n  getPatternCaretPosition,\n  getUnmaskedValue,\n  isCurrencyAtEnd,\n  isCurrencyMask,\n  MASK_PATTERNS,\n  type MaskPattern,\n  type MaskPatternKey,\n  NUMERIC_MASK_PATTERNS,\n  REGEX_CACHE,\n  toUnmaskedIndex\n} from \"./mask-input-constants.js\";\n\ntype InputElement = React.ComponentRef<\"input\">;\n\ninterface MaskInputProps extends React.ComponentProps<\"input\"> {\n  value?: string;\n  defaultValue?: string;\n  onValueChange?: (maskedValue: string, unmaskedValue: string) => void;\n  onValidate?: (isValid: boolean, unmaskedValue: string) => void;\n  validationMode?: \"onChange\" | \"onBlur\" | \"onSubmit\" | \"onTouched\" | \"all\";\n  /**\n   * Tên một mẫu dựng sẵn (`\"currency\"`, `\"percentage\"`, `\"time\"`, `\"creditCard\"`…) hoặc một\n   * `MaskPattern` tự viết. ⚠ `\"phone\"`, `\"date\"`, `\"ssn\"`, `\"zipCode\"`, `\"ein\"` là định dạng Hoa Kỳ\n   * — số điện thoại ở app Comitor dùng `PhoneInput`.\n   */\n  mask?: MaskPatternKey | MaskPattern;\n  maskPlaceholder?: string;\n  /**\n   * Mã tiền tệ ISO 4217 cho `mask=\"currency\"`. Mặc định `\"VND\"`.\n   *\n   * ⚠ Khác thượng nguồn: thượng nguồn mặc định `\"USD\"`.\n   */\n  currency?: string;\n  /**\n   * Locale BCP 47 cho `mask=\"currency\"` — quyết định dấu nhóm, dấu thập phân và vị trí ký hiệu.\n   * Mặc định `\"vi-VN\"` (`1.234.567 ₫`).\n   *\n   * ⚠ Khác thượng nguồn: thượng nguồn mặc định `\"en-US\"`.\n   */\n  locale?: string;\n  asChild?: boolean;\n  invalid?: boolean;\n  withoutMask?: boolean;\n}\n\nfunction MaskInput(props: MaskInputProps) {\n  const {\n    value: valueProp,\n    defaultValue,\n    onValueChange: onValueChangeProp,\n    onValidate,\n    onBlur: onBlurProp,\n    onFocus: onFocusProp,\n    onKeyDown: onKeyDownProp,\n    onPaste: onPasteProp,\n    onCompositionStart: onCompositionStartProp,\n    onCompositionEnd: onCompositionEndProp,\n    validationMode = \"onChange\",\n    mask,\n    maskPlaceholder,\n    currency = DEFAULT_CURRENCY,\n    locale = DEFAULT_LOCALE,\n    placeholder,\n    inputMode,\n    min,\n    max,\n    maxLength,\n    asChild = false,\n    disabled = false,\n    invalid = false,\n    readOnly = false,\n    required = false,\n    withoutMask = false,\n    className,\n    ref,\n    ...inputProps\n  } = props;\n\n  const [internalValue, setInternalValue] = React.useState(defaultValue ?? \"\");\n  const [focused, setFocused] = React.useState(false);\n  const [composing, setComposing] = React.useState(false);\n  const [touched, setTouched] = React.useState(false);\n  const inputRef = React.useRef<HTMLInputElement>(null);\n  const composedRef = useComposedRefs(ref, inputRef);\n\n  const isControlled = valueProp !== undefined;\n  const value = isControlled ? valueProp : internalValue;\n\n  const maskPattern = React.useMemo(() => {\n    if (typeof mask === \"string\") {\n      return MASK_PATTERNS[mask];\n    }\n    return mask;\n  }, [mask]);\n\n  const transformOpts = React.useMemo(\n    () => ({\n      currency,\n      locale\n    }),\n    [currency, locale]\n  );\n\n  const placeholderValue = React.useMemo(() => {\n    if (withoutMask) return placeholder;\n\n    if (placeholder && maskPlaceholder) {\n      return focused ? maskPlaceholder : placeholder;\n    }\n\n    if (maskPlaceholder) {\n      return focused ? maskPlaceholder : undefined;\n    }\n\n    return placeholder;\n  }, [placeholder, maskPlaceholder, focused, withoutMask]);\n\n  const displayValue = React.useMemo(() => {\n    if (withoutMask || !maskPattern || !value) return value ?? \"\";\n    const unmasked = getUnmaskedValue({\n      value,\n      transform: maskPattern.transform,\n      ...transformOpts\n    });\n    return applyMask({\n      value: unmasked,\n      pattern: maskPattern.pattern,\n      ...transformOpts,\n      mask\n    });\n  }, [value, maskPattern, withoutMask, transformOpts, mask]);\n\n  const tokenCount = React.useMemo(() => {\n    if (!maskPattern || CURRENCY_PERCENTAGE_SYMBOLS.test(maskPattern.pattern)) return undefined;\n    return maskPattern.pattern.match(REGEX_CACHE.hashPattern)?.length ?? 0;\n  }, [maskPattern]);\n\n  const calculatedMaxLength = tokenCount ? maskPattern?.pattern.length : maxLength;\n\n  const calculatedInputMode = React.useMemo(() => {\n    if (inputMode) return inputMode;\n    if (!maskPattern) return undefined;\n\n    if (mask === \"currency\" || mask === \"percentage\" || mask === \"ipv4\") {\n      return \"decimal\";\n    }\n\n    if (typeof mask === \"string\" && NUMERIC_MASK_PATTERNS.test(mask)) {\n      return \"numeric\";\n    }\n    return undefined;\n  }, [maskPattern, mask, inputMode]);\n\n  const shouldValidate = React.useCallback(\n    (trigger: \"change\" | \"blur\") => {\n      if (!onValidate || !maskPattern?.validate) return false;\n\n      switch (validationMode) {\n        case \"onChange\":\n          return trigger === \"change\";\n        case \"onBlur\":\n          return trigger === \"blur\";\n        case \"onSubmit\":\n          return false;\n        case \"onTouched\":\n          return touched ? trigger === \"change\" : trigger === \"blur\";\n        case \"all\":\n          return true;\n        default:\n          return trigger === \"change\";\n      }\n    },\n    [onValidate, maskPattern, validationMode, touched]\n  );\n\n  const validationOpts = React.useMemo(\n    () => ({\n      min: typeof min === \"string\" ? Number.parseFloat(min) : min,\n      max: typeof max === \"string\" ? Number.parseFloat(max) : max\n    }),\n    [min, max]\n  );\n\n  const onInputValidate = React.useCallback(\n    (unmaskedValue: string) => {\n      if (onValidate && maskPattern?.validate) {\n        const isValid = maskPattern.validate(unmaskedValue, validationOpts);\n        onValidate(isValid, unmaskedValue);\n      }\n    },\n    [onValidate, maskPattern?.validate, validationOpts]\n  );\n\n  const onValueChange = React.useCallback(\n    (event: React.ChangeEvent<InputElement>) => {\n      const inputValue = event.target.value;\n      let newValue = inputValue;\n      let unmaskedValue = inputValue;\n\n      if (composing) {\n        if (!isControlled) setInternalValue(inputValue);\n        return;\n      }\n\n      if (withoutMask || !maskPattern) {\n        if (!isControlled) setInternalValue(inputValue);\n        if (shouldValidate(\"change\")) onValidate?.(true, inputValue);\n        onValueChangeProp?.(inputValue, inputValue);\n        return;\n      }\n\n      if (maskPattern) {\n        unmaskedValue = getUnmaskedValue({\n          value: inputValue,\n          transform: maskPattern.transform,\n          ...transformOpts\n        });\n        newValue = applyMask({\n          value: unmaskedValue,\n          pattern: maskPattern.pattern,\n          ...transformOpts,\n          mask\n        });\n\n        if (inputRef.current && newValue !== inputValue) {\n          const inputElement = inputRef.current;\n          if (!(inputElement instanceof HTMLInputElement)) return;\n\n          const oldCursorPosition = inputElement.selectionStart ?? 0;\n\n          inputElement.value = newValue;\n\n          const currentUnmasked = getUnmaskedValue({\n            value: newValue,\n            transform: maskPattern.transform,\n            ...transformOpts\n          });\n\n          let newCursorPosition: number;\n\n          const previousUnmasked = getUnmaskedValue({\n            value,\n            transform: maskPattern.transform,\n            ...transformOpts\n          });\n\n          if (CURRENCY_PERCENTAGE_SYMBOLS.test(maskPattern.pattern)) {\n            newCursorPosition = getCurrencyCaretPosition({\n              newValue,\n              mask,\n              transformOpts,\n              oldCursorPosition,\n              oldValue: inputValue,\n              previousUnmasked\n            });\n          } else {\n            newCursorPosition = getPatternCaretPosition({\n              newValue,\n              maskPattern,\n              currentUnmasked,\n              oldCursorPosition,\n              oldValue: inputValue,\n              previousUnmasked\n            });\n          }\n\n          if (isCurrencyMask({ mask, pattern: maskPattern.pattern })) {\n            if (mask === \"currency\") {\n              const currencyAtEnd = isCurrencyAtEnd(transformOpts);\n              if (!currencyAtEnd) {\n                newCursorPosition = Math.max(1, newCursorPosition);\n              }\n            } else {\n              newCursorPosition = Math.max(1, newCursorPosition);\n            }\n          } else if (maskPattern.pattern.includes(\"%\")) {\n            newCursorPosition = Math.min(newValue.length - 1, newCursorPosition);\n          }\n\n          newCursorPosition = Math.min(newCursorPosition, newValue.length);\n\n          inputElement.setSelectionRange(newCursorPosition, newCursorPosition);\n        }\n      }\n\n      if (!isControlled) {\n        setInternalValue(newValue);\n      }\n\n      if (shouldValidate(\"change\")) {\n        onInputValidate(unmaskedValue);\n      }\n\n      onValueChangeProp?.(newValue, unmaskedValue);\n    },\n    [\n      maskPattern,\n      isControlled,\n      onValueChangeProp,\n      onValidate,\n      onInputValidate,\n      composing,\n      shouldValidate,\n      withoutMask,\n      transformOpts,\n      mask,\n      value\n    ]\n  );\n\n  const onFocus = React.useCallback(\n    (event: React.FocusEvent<InputElement>) => {\n      onFocusProp?.(event);\n      if (event.defaultPrevented) return;\n\n      setFocused(true);\n    },\n    [onFocusProp]\n  );\n\n  const onBlur = React.useCallback(\n    (event: React.FocusEvent<InputElement>) => {\n      onBlurProp?.(event);\n      if (event.defaultPrevented) return;\n\n      setFocused(false);\n\n      if (!touched) {\n        setTouched(true);\n      }\n\n      if (shouldValidate(\"blur\")) {\n        const currentValue = event.target.value;\n        const unmaskedValue = maskPattern\n          ? getUnmaskedValue({\n              value: currentValue,\n              transform: maskPattern.transform,\n              ...transformOpts\n            })\n          : currentValue;\n        onInputValidate(unmaskedValue);\n      }\n    },\n    [onBlurProp, touched, shouldValidate, onInputValidate, maskPattern, transformOpts]\n  );\n\n  const onCompositionStart = React.useCallback(\n    (event: React.CompositionEvent<InputElement>) => {\n      onCompositionStartProp?.(event);\n      if (event.defaultPrevented) return;\n\n      setComposing(true);\n    },\n    [onCompositionStartProp]\n  );\n\n  const onCompositionEnd = React.useCallback(\n    (event: React.CompositionEvent<InputElement>) => {\n      onCompositionEndProp?.(event);\n      if (event.defaultPrevented) return;\n\n      setComposing(false);\n\n      const inputElement = inputRef.current;\n      if (!inputElement) return;\n      if (!(inputElement instanceof HTMLInputElement)) return;\n      const inputValue = inputElement.value;\n\n      if (!maskPattern || withoutMask) {\n        if (!isControlled) setInternalValue(inputValue);\n        if (shouldValidate(\"change\")) onValidate?.(true, inputValue);\n        onValueChangeProp?.(inputValue, inputValue);\n        return;\n      }\n\n      const unmasked = getUnmaskedValue({\n        value: inputValue,\n        transform: maskPattern.transform,\n        ...transformOpts\n      });\n      const masked = applyMask({\n        value: unmasked,\n        pattern: maskPattern.pattern,\n        ...transformOpts,\n        mask\n      });\n\n      if (!isControlled) setInternalValue(masked);\n      if (shouldValidate(\"change\")) onInputValidate(unmasked);\n      onValueChangeProp?.(masked, unmasked);\n    },\n    [\n      onCompositionEndProp,\n      maskPattern,\n      withoutMask,\n      isControlled,\n      shouldValidate,\n      onValidate,\n      onValueChangeProp,\n      transformOpts,\n      mask,\n      onInputValidate\n    ]\n  );\n\n  const onPaste = React.useCallback(\n    (event: React.ClipboardEvent<InputElement>) => {\n      onPasteProp?.(event);\n      if (event.defaultPrevented) return;\n\n      if (withoutMask || !maskPattern) return;\n\n      if (mask === \"ipv4\") return;\n\n      const target = event.target as InputElement;\n      if (!(target instanceof HTMLInputElement)) return;\n\n      const pastedData = event.clipboardData.getData(\"text\");\n      if (!pastedData) return;\n\n      event.preventDefault();\n\n      const currentValue = target.value;\n      const selectionStart = target.selectionStart ?? 0;\n      const selectionEnd = target.selectionEnd ?? 0;\n\n      const beforeSelection = currentValue.slice(0, selectionStart);\n      const afterSelection = currentValue.slice(selectionEnd);\n      const newInputValue = beforeSelection + pastedData + afterSelection;\n\n      const unmasked = getUnmaskedValue({\n        value: newInputValue,\n        transform: maskPattern.transform,\n        ...transformOpts\n      });\n      const newMaskedValue = applyMask({\n        value: unmasked,\n        pattern: maskPattern.pattern,\n        ...transformOpts,\n        mask\n      });\n\n      target.value = newMaskedValue;\n\n      if (isCurrencyMask({ mask, pattern: maskPattern.pattern })) {\n        const currencyAtEnd = isCurrencyAtEnd(transformOpts);\n        const caret = currencyAtEnd ? newMaskedValue.search(/\\s*[^\\d\\s]+$/) : newMaskedValue.length;\n        target.setSelectionRange(caret, caret);\n        return;\n      }\n\n      if (maskPattern.pattern.includes(\"%\")) {\n        target.setSelectionRange(newMaskedValue.length - 1, newMaskedValue.length - 1);\n        return;\n      }\n\n      let newCursorPosition = newMaskedValue.length;\n      try {\n        const unmaskedCount = unmasked.length;\n        let position = 0;\n        let count = 0;\n\n        for (let i = 0; i < maskPattern.pattern.length && i < newMaskedValue.length; i++) {\n          if (maskPattern.pattern[i] === \"#\") {\n            count++;\n            if (count <= unmaskedCount) {\n              position = i + 1;\n            }\n          }\n        }\n        newCursorPosition = position;\n      } catch {\n        // Lỗi thì để con trỏ ở cuối.\n      }\n\n      target.setSelectionRange(newCursorPosition, newCursorPosition);\n\n      if (!isControlled) setInternalValue(newMaskedValue);\n      if (shouldValidate(\"change\")) onInputValidate(unmasked);\n      onValueChangeProp?.(newMaskedValue, unmasked);\n    },\n    [\n      onPasteProp,\n      withoutMask,\n      maskPattern,\n      mask,\n      transformOpts,\n      isControlled,\n      shouldValidate,\n      onInputValidate,\n      onValueChangeProp\n    ]\n  );\n\n  const onKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<InputElement>) => {\n      onKeyDownProp?.(event);\n      if (event.defaultPrevented) return;\n\n      if (withoutMask || !maskPattern) return;\n\n      if (mask === \"ipv4\") return;\n\n      if (event.key === \"Backspace\") {\n        const target = event.target as InputElement;\n        if (!(target instanceof HTMLInputElement)) return;\n        const cursorPosition = target.selectionStart ?? 0;\n        const selectionEnd = target.selectionEnd ?? 0;\n        const currentValue = target.value;\n\n        if (\n          mask === \"currency\" ||\n          mask === \"percentage\" ||\n          maskPattern.pattern.includes(\"$\") ||\n          maskPattern.pattern.includes(\"€\") ||\n          maskPattern.pattern.includes(\"%\")\n        ) {\n          return;\n        }\n\n        if (cursorPosition !== selectionEnd) {\n          return;\n        }\n\n        if (cursorPosition > 0) {\n          const charBeforeCursor = currentValue[cursorPosition - 1];\n\n          if (charBeforeCursor) {\n            event.preventDefault();\n\n            const unmaskedIndex = toUnmaskedIndex({\n              masked: currentValue,\n              pattern: maskPattern.pattern,\n              caret: cursorPosition\n            });\n\n            if (unmaskedIndex > 0) {\n              const currentUnmasked = getUnmaskedValue({\n                value: currentValue,\n                transform: maskPattern.transform,\n                ...transformOpts\n              });\n              const nextUnmasked = currentUnmasked.slice(0, unmaskedIndex - 1) + currentUnmasked.slice(unmaskedIndex);\n              const nextMasked = applyMask({\n                value: nextUnmasked,\n                pattern: maskPattern.pattern,\n                ...transformOpts,\n                mask\n              });\n\n              target.value = nextMasked;\n              const nextCaret = fromUnmaskedIndex({\n                masked: nextMasked,\n                pattern: maskPattern.pattern,\n                unmaskedIndex: unmaskedIndex - 1\n              });\n\n              target.setSelectionRange(nextCaret, nextCaret);\n\n              onValueChangeProp?.(nextMasked, nextUnmasked);\n            }\n            return;\n          }\n        }\n      }\n\n      if (event.key === \"Delete\") {\n        const target = event.target as InputElement;\n        if (!(target instanceof HTMLInputElement)) return;\n        const cursorPosition = target.selectionStart ?? 0;\n        const selectionEnd = target.selectionEnd ?? 0;\n        const currentValue = target.value;\n\n        if (\n          mask === \"currency\" ||\n          mask === \"percentage\" ||\n          maskPattern.pattern.includes(\"$\") ||\n          maskPattern.pattern.includes(\"€\") ||\n          maskPattern.pattern.includes(\"%\")\n        ) {\n          return;\n        }\n\n        if (cursorPosition !== selectionEnd) {\n          return;\n        }\n\n        if (cursorPosition < currentValue.length) {\n          const charAtCursor = currentValue[cursorPosition];\n\n          if (charAtCursor) {\n            event.preventDefault();\n\n            const unmaskedIndex = toUnmaskedIndex({\n              masked: currentValue,\n              pattern: maskPattern.pattern,\n              caret: cursorPosition\n            });\n\n            const currentUnmasked = getUnmaskedValue({\n              value: currentValue,\n              transform: maskPattern.transform,\n              ...transformOpts\n            });\n\n            if (unmaskedIndex < currentUnmasked.length) {\n              const nextUnmasked = currentUnmasked.slice(0, unmaskedIndex) + currentUnmasked.slice(unmaskedIndex + 1);\n              const nextMasked = applyMask({\n                value: nextUnmasked,\n                pattern: maskPattern.pattern,\n                ...transformOpts,\n                mask\n              });\n\n              target.value = nextMasked;\n              const nextCaret = fromUnmaskedIndex({\n                masked: nextMasked,\n                pattern: maskPattern.pattern,\n                unmaskedIndex: unmaskedIndex\n              });\n\n              target.setSelectionRange(nextCaret, nextCaret);\n\n              onValueChangeProp?.(nextMasked, nextUnmasked);\n            }\n            return;\n          }\n        }\n      }\n    },\n    [maskPattern, onKeyDownProp, onValueChangeProp, transformOpts, mask, withoutMask]\n  );\n\n  const InputPrimitive = asChild ? Slot : \"input\";\n\n  return (\n    <InputPrimitive\n      // ⚠ Khác thượng nguồn: chỉ phát thuộc tính khi THẬT SỰ lỗi — `aria-invalid=\"false\"` hợp lệ\n      // nhưng thừa, và cùng quy ước với `Input`/`Combobox` của gói. Đặt TRƯỚC spread để\n      // `aria-invalid` do `<FormControl>` dán vào vẫn thắng.\n      aria-invalid={invalid || undefined}\n      data-disabled={disabled ? \"\" : undefined}\n      data-invalid={invalid ? \"\" : undefined}\n      data-readonly={readOnly ? \"\" : undefined}\n      data-required={required ? \"\" : undefined}\n      data-slot=\"mask-input\"\n      {...inputProps}\n      className={cn(\n        /*\n         * ⚠ Khác thượng nguồn: chuỗi lớp của `Input` Comitor thay cho của shadcn, để ô có mặt nạ\n         * đứng cạnh ô nhập thường trong cùng một form không lệch nhau (cao, nền, viền, cỡ chữ,\n         * focus). Số đo của từng vai trò ở chú thích đầu `input.tsx`:\n         *   viền nghỉ `border-input` · hover `--control-edge-strong` · focus `--primary-ink`;\n         *   lỗi `border-destructive-ink` (không phải `border-destructive` — token TÔ NỀN).\n         * Bỏ `dark:bg-input/30` (viết thẳng thang màu — bảng tương phản cao không đổi được) và\n         * `shadow-xs` (không có trong bộ bóng của gói).\n         */\n        \"w-full h-9 px-3 rounded-md border bg-background text-sm text-foreground placeholder:text-muted-foreground\",\n        \"transition-colors duration-150 ease-out\",\n        \"focus:outline-none focus:ring-2 focus:ring-ring/50 focus:border-primary-ink\",\n        \"disabled:opacity-50 disabled:cursor-not-allowed disabled:bg-muted\",\n        \"border-input hover:border-control-edge-strong\",\n        \"aria-invalid:border-destructive-ink aria-invalid:hover:border-destructive-ink aria-invalid:focus:border-destructive-ink aria-invalid:focus:ring-destructive/30\",\n        className\n      )}\n      placeholder={placeholderValue}\n      ref={composedRef}\n      value={displayValue}\n      disabled={disabled}\n      maxLength={calculatedMaxLength}\n      readOnly={readOnly}\n      required={required}\n      inputMode={calculatedInputMode}\n      min={min}\n      max={max}\n      onFocus={onFocus}\n      onBlur={onBlur}\n      onKeyDown={onKeyDown}\n      onPaste={onPaste}\n      onChange={onValueChange}\n      onCompositionStart={onCompositionStart}\n      onCompositionEnd={onCompositionEnd}\n    />\n  );\n}\n\nexport { MaskInput, type MaskInputProps };\n"],"mappings":"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","names":[]}

package/dist/components/ui/mention.d.ts

@@ -0,0 +1,31 @@
+import * as MentionPrimitive from '@diceui/mention';
+import * as React from 'react';
+
+/**
+ * Mention — ô nhập có gợi ý `@nhắc tên`: gõ ký tự kích hoạt (mặc định `@`) là mở danh sách, chọn
+ * một mục thì chèn `@Tên` vào ô và đánh dấu nó thành một khối (xoá là xoá cả khối).
+ * Dùng cho ô soạn tin của Chat và bình luận trong task.
+ *
+ * Phần lõi (dò ký tự kích hoạt, lọc, điều hướng bàn phím, định vị danh sách theo con trỏ) là gói
+ * headless `@diceui/mention`; file này chỉ phủ style theo token của Comitor.
+ */
+type MentionProps = React.ComponentProps<typeof MentionPrimitive.Root>;
+declare function Mention({ className, dir: dirProp, ...props }: MentionProps): React.JSX.Element;
+type MentionLabelProps = React.ComponentProps<typeof MentionPrimitive.Label>;
+declare function MentionLabel({ className, ...props }: MentionLabelProps): React.JSX.Element;
+type MentionInputProps = React.ComponentProps<typeof MentionPrimitive.Input>;
+/**
+ * Ô nhập của `Mention`. Muốn nhiều dòng (ô soạn tin) thì `asChild` với một `<textarea />`.
+ * Không có `MentionLabel` thì PHẢI truyền `aria-label`.
+ */
+declare function MentionInput({ className, ...props }: MentionInputProps): React.JSX.Element;
+type MentionContentProps = React.ComponentProps<typeof MentionPrimitive.Content>;
+/**
+ * Danh sách gợi ý (`role="listbox"`), render qua portal.
+ * Tên cho trình đọc màn hình mặc định "Danh sách gợi ý" — đổi bằng `aria-label`.
+ */
+declare function MentionContent({ className, children, "aria-label": ariaLabel, ...props }: MentionContentProps): React.JSX.Element;
+type MentionItemProps = React.ComponentProps<typeof MentionPrimitive.Item>;
+declare function MentionItem({ className, children, ...props }: MentionItemProps): React.JSX.Element;
+
+export { Mention, MentionContent, type MentionContentProps, MentionInput, type MentionInputProps, MentionItem, type MentionItemProps, MentionLabel, type MentionLabelProps, type MentionProps };