@comitor/ui 3.0.0 → 3.1.0

package/dist/components/ui/mention.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/ui/mention.tsx"],"sourcesContent":["\"use client\";\n\n/*\n * Port từ Dice UI (https://diceui.com/docs/components/mention) — 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\nimport * as MentionPrimitive from \"@diceui/mention\";\nimport { useDirection } from \"@radix-ui/react-direction\";\nimport * as React from \"react\";\nimport { useComitorMessages } from \"../../i18n/locale-provider.js\";\nimport { cn } from \"../../lib/cn.js\";\n\n/*\n * ⚠ Khác thượng nguồn: context RIÊNG của lớp bọc, chỉ mang một id — xem chú thích ở `MentionInput`.\n */\nconst MentionListIdContext = React.createContext<string | undefined>(undefined);\n\n/**\n * 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\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).\n * Dùng cho ô soạn tin của Chat và bình luận trong task.\n *\n * 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\n * headless `@diceui/mention`; file này chỉ phủ style theo token của Comitor.\n */\ntype MentionProps = React.ComponentProps<typeof MentionPrimitive.Root>;\n\nfunction Mention({ className, dir: dirProp, ...props }: MentionProps) {\n  /*\n   * ⚠ Khác thượng nguồn: `@diceui/shared` có `useDirection` RIÊNG, đọc một `DirectionContext` mà\n   * gói không xuất ra — nên `DirectionProvider` của Radix (nguồn hướng chữ của mọi component khác\n   * trong gói) không tới được nó. Đọc hướng từ Radix rồi truyền xuống bằng prop `dir`.\n   */\n  const dir = useDirection(dirProp);\n  const listId = React.useId();\n\n  return (\n    <MentionListIdContext.Provider value={listId}>\n      <MentionPrimitive.Root\n        data-slot=\"mention\"\n        dir={dir}\n        className={cn(\n          /*\n           * Khối `@Tên` đã chèn. Gói vẽ nó bằng một lớp phủ (`MentionHighlighter`) định vị TUYỆT\n           * ĐỐI nằm ĐÈ LÊN ô nhập: chữ thường của lớp phủ trong suốt để lộ chữ của ô bên dưới,\n           * chỉ đoạn `[data-tag]` là có nền.\n           *\n           * ⚠ Khác thượng nguồn: bản gốc tô `bg-blue-200 text-blue-950` / `dark:bg-blue-800\n           * dark:text-blue-50` (bảng màu mặc định của Tailwind). Đổi sang cặp tonal của gói\n           * (`info` = teal — bậc \"xanh\" của Comitor), và CHỮ là `text-foreground` chứ không phải\n           * `text-info-ink`: nền tint `/15` trong suốt nên chữ của ô nhập vẫn lộ ra dưới khối,\n           * chữ khối vẽ đè đúng chỗ đó — hai lớp chữ phải CÙNG MÀU, lệch màu là thành viền răng\n           * cưa quanh từng nét. (Bản gốc cũng chọn chữ gần như trùng màu chữ thường ở cả hai theme.)\n           * Khối không chỉ nói bằng màu: nó luôn mang ký tự kích hoạt `@` ở đầu.\n           *     chữ ⇄ khối: 15,69:1 (light, trên nền trắng) · 15,15:1 (dark) · tệ nhất 13,44:1\n           *     (dark tương phản cao, `--teal` #2DD4BF). Khối ⇄ nền trang 1,21:1 — cố ý nhạt.\n           */\n          \"**:data-tag:rounded **:data-tag:bg-info/15 **:data-tag:py-px **:data-tag:text-foreground\",\n          className\n        )}\n        {...props}\n      />\n    </MentionListIdContext.Provider>\n  );\n}\n\ntype MentionLabelProps = React.ComponentProps<typeof MentionPrimitive.Label>;\n\nfunction MentionLabel({ className, ...props }: MentionLabelProps) {\n  return (\n    <MentionPrimitive.Label\n      data-slot=\"mention-label\"\n      className={cn(\"px-0.5 py-1.5 text-sm font-semibold\", className)}\n      {...props}\n    />\n  );\n}\n\ntype MentionInputProps = React.ComponentProps<typeof MentionPrimitive.Input>;\n\n/**\n * Ô nhập của `Mention`. Muốn nhiều dòng (ô soạn tin) thì `asChild` với một `<textarea />`.\n * Không có `MentionLabel` thì PHẢI truyền `aria-label`.\n */\nfunction MentionInput({ className, ...props }: MentionInputProps) {\n  const listId = React.useContext(MentionListIdContext);\n\n  return (\n    <MentionPrimitive.Input\n      data-slot=\"mention-input\"\n      /*\n       * ⚠ Khác thượng nguồn (a11y): ô nhập là `role=\"combobox\"` và gói đặt `aria-controls` trỏ tới\n       * một id sinh trong gốc — nhưng `MentionContent` của gói KHÔNG gắn id đó lên `role=\"listbox\"`,\n       * nên quan hệ combobox → listbox trỏ vào hư không. Lớp bọc tự sinh một id, gắn ở CẢ HAI đầu\n       * (props của ta được trải SAU props của gói nên thắng).\n       */\n      aria-controls={listId}\n      className={cn(\n        /*\n         * Khuôn viền/focus của `Input`: `border-input` lúc nghỉ, `--control-edge-strong` khi rê,\n         * `--primary-ink` + `ring-2 ring/50` khi focus. Nền theo `Textarea` (ô soạn tin thường là\n         * `asChild` + `<textarea>`): trong suốt, ở dark tô `--input-fill` — không `bg-input/30`,\n         * xem chú thích đầu textarea.tsx.\n         * ⚠ Khác thượng nguồn: `focus-visible:ring-1 ring-ring` → khuôn focus của `Input`; bỏ\n         * `shadow-xs` (bóng của gói chỉ đi qua `--elevation-*`, `Input` không có bóng).\n         */\n        \"flex w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm text-foreground transition-colors duration-150 ease-out placeholder:text-muted-foreground hover:border-control-edge-strong focus:border-primary-ink focus:outline-none focus:ring-2 focus:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-input-fill\",\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\ntype MentionContentProps = React.ComponentProps<typeof MentionPrimitive.Content>;\n\n/**\n * Danh sách gợi ý (`role=\"listbox\"`), render qua portal.\n * Tên cho trình đọc màn hình mặc định là khoá `listLabel` của namespace `mention`\n * (`ComitorLocaleProvider`) — đổi bằng `aria-label`.\n */\nfunction MentionContent({ className, children, \"aria-label\": ariaLabelProp, ...props }: MentionContentProps) {\n  const listId = React.useContext(MentionListIdContext);\n  const t = useComitorMessages(\"mention\");\n  const ariaLabel = ariaLabelProp ?? t.listLabel;\n\n  return (\n    <MentionPrimitive.Portal>\n      <MentionPrimitive.Content\n        data-slot=\"mention-content\"\n        // ⚠ Khác thượng nguồn (a11y): id để `aria-controls` của ô nhập trỏ tới được — xem\n        // `MentionInput`. Và `role=\"listbox\"` BẮT BUỘC có tên (ARIA 1.2); bản gốc không đặt.\n        id={listId}\n        aria-label={ariaLabel}\n        className={cn(\n          /*\n           * Mặt nổi cùng bộ với `PopoverContent`/`Command`: `bg-popover text-popover-foreground`,\n           * bóng `shadow-overlay` (đổi theo theme qua `--elevation-*`).\n           * ⚠ Khác thượng nguồn: `shadow-md` → `shadow-overlay`; thêm `origin-(--dice-transform-origin)`\n           * — biến gói headless tính sẵn theo cạnh bám, để hiệu ứng `zoom-in-95` nở ra TỪ phía con\n           * trỏ như `PopoverContent` (bản gốc nở từ tâm).\n           */\n          \"relative z-50 min-w-32 origin-(--dice-transform-origin) overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-overlay data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </MentionPrimitive.Content>\n    </MentionPrimitive.Portal>\n  );\n}\n\ntype MentionItemProps = React.ComponentProps<typeof MentionPrimitive.Item>;\n\nfunction MentionItem({ className, children, ...props }: MentionItemProps) {\n  return (\n    <MentionPrimitive.Item\n      data-slot=\"mention-item\"\n      className={cn(\n        /*\n         * ⚠ Khác thượng nguồn: bộ lớp của `CommandItem` (mục đang sáng `bg-accent`/`text-accent-\n         * foreground`, khoảng đệm theo trục mật độ `--menu-item-py`, icon con mặc định\n         * `text-muted-foreground` cỡ 4) — chỉ đổi thuộc tính trạng thái sang dạng của gói headless\n         * (`data-highlighted` / `data-disabled` là thuộc tính CÓ MẶT, không phải `=\"true\"`).\n         */\n        \"relative mt-1 flex w-full cursor-default items-center gap-2 rounded-sm px-2 py-(--menu-item-py) text-sm outline-hidden select-none first:mt-0 data-disabled:pointer-events-none data-disabled:opacity-50 data-highlighted:bg-accent data-highlighted:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </MentionPrimitive.Item>\n  );\n}\n\nexport {\n  Mention,\n  MentionContent,\n  type MentionContentProps,\n  MentionInput,\n  type MentionInputProps,\n  MentionItem,\n  type MentionItemProps,\n  MentionLabel,\n  type MentionLabelProps,\n  type MentionProps\n};\n"],"mappings":";AAuCM;AAhCN,YAAY,sBAAsB;AAClC,SAAS,oBAAoB;AAC7B,YAAY,WAAW;AACvB,SAAS,0BAA0B;AACnC,SAAS,UAAU;AAKnB,MAAM,uBAAuB,MAAM,cAAkC,MAAS;AAY9E,SAAS,QAAQ,EAAE,WAAW,KAAK,SAAS,GAAG,MAAM,GAAiB;AAMpE,QAAM,MAAM,aAAa,OAAO;AAChC,QAAM,SAAS,MAAM,MAAM;AAE3B,SACE,oBAAC,qBAAqB,UAArB,EAA8B,OAAO,QACpC;AAAA,IAAC,iBAAiB;AAAA,IAAjB;AAAA,MACC,aAAU;AAAA,MACV;AAAA,MACA,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAgBT;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,EACN,GACF;AAEJ;AAIA,SAAS,aAAa,EAAE,WAAW,GAAG,MAAM,GAAsB;AAChE,SACE;AAAA,IAAC,iBAAiB;AAAA,IAAjB;AAAA,MACC,aAAU;AAAA,MACV,WAAW,GAAG,uCAAuC,SAAS;AAAA,MAC7D,GAAG;AAAA;AAAA,EACN;AAEJ;AAQA,SAAS,aAAa,EAAE,WAAW,GAAG,MAAM,GAAsB;AAChE,QAAM,SAAS,MAAM,WAAW,oBAAoB;AAEpD,SACE;AAAA,IAAC,iBAAiB;AAAA,IAAjB;AAAA,MACC,aAAU;AAAA,MAOV,iBAAe;AAAA,MACf,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAST;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ;AASA,SAAS,eAAe,EAAE,WAAW,UAAU,cAAc,eAAe,GAAG,MAAM,GAAwB;AAC3G,QAAM,SAAS,MAAM,WAAW,oBAAoB;AACpD,QAAM,IAAI,mBAAmB,SAAS;AACtC,QAAM,YAAY,iBAAiB,EAAE;AAErC,SACE,oBAAC,iBAAiB,QAAjB,EACC;AAAA,IAAC,iBAAiB;AAAA,IAAjB;AAAA,MACC,aAAU;AAAA,MAGV,IAAI;AAAA,MACJ,cAAY;AAAA,MACZ,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAQT;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEH;AAAA;AAAA,EACH,GACF;AAEJ;AAIA,SAAS,YAAY,EAAE,WAAW,UAAU,GAAG,MAAM,GAAqB;AACxE,SACE;AAAA,IAAC,iBAAiB;AAAA,IAAjB;AAAA,MACC,aAAU;AAAA,MACV,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAOT;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEH;AAAA;AAAA,EACH;AAEJ;","names":[]}
+{"version":3,"sources":["../../../src/components/ui/mention.tsx"],"sourcesContent":["\"use client\";\n\n/*\n * Port từ Dice UI (https://diceui.com/docs/components/mention) — 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\nimport * as MentionPrimitive from \"@diceui/mention\";\nimport { useDirection } from \"@radix-ui/react-direction\";\nimport * as React from \"react\";\nimport { useComitorMessages } from \"../../i18n/locale-provider.js\";\nimport { cn } from \"../../lib/cn.js\";\n/*\n * Bộ lọc mặc định của `Mention` phải cho ĐÚNG kết quả của `Combobox` / `SearchFilterBar`, nên nó dùng\n * CHÍNH `matchesSearch` — phép chuẩn hoá duy nhất của gói — từ `lib/text-search.ts` (chuyển xuống đó ở\n * `3.1.0` để Tier 1 khỏi nhập ngược lên Tier 2; `composite/text-utils.ts` xuất lại nguyên tên).\n */\nimport { matchesSearch } from \"../../lib/text-search.js\";\nimport { useIsomorphicLayoutEffect } from \"../../lib/use-isomorphic-layout-effect.js\";\nimport { useLazyRef } from \"../../lib/use-lazy-ref.js\";\n\n/*\n * ⚠ Khác thượng nguồn: context RIÊNG của lớp bọc (lõi headless không xuất context của nó):\n *   · `listId` — xem chú thích ở `MentionInput`;\n *   · `itemLabels` (3.1.0) — bảng `value → label` của các `MentionItem` đang mount, cho bộ lọc mặc\n *     định — xem `Mention`.\n */\ninterface MentionWrapperContextValue {\n  listId: string;\n  itemLabels: Map<string, string>;\n}\n\nconst MentionWrapperContext = React.createContext<MentionWrapperContextValue | null>(null);\n\n/**\n * Bộ lọc mặc định: chữ gõ sau ký tự kích hoạt nằm trong NHÃN của mục — không dấu, không phân biệt\n * hoa thường, đúng luật `matchesSearch` của `Combobox` / `SearchFilterBar` (\"@nguyen\" ra \"Nguyễn\",\n * \"@duc\" ra \"Đức\"). Thêm một vế so với nhãn đã BỎ khoảng trắng: lõi đóng danh sách ở dấu cách đầu\n * tiên (xem `Mention`), nên đây là cách duy nhất để đi QUA từ đầu của tên — \"@nguyenvana\" vẫn còn\n * \"Nguyễn Văn An\" mà đã loại \"Nguyễn Văn Bình\".\n */\nfunction matchesMentionLabel(label: string, term: string): boolean {\n  return matchesSearch(label, term) || matchesSearch(label.replace(/\\s+/g, \"\"), term);\n}\n\n/**\n * 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\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).\n * Dùng cho ô soạn tin của Chat và bình luận trong task.\n *\n * 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\n * headless `@diceui/mention`; file này chỉ phủ style theo token của Comitor.\n *\n * Lọc: không truyền `onFilter` thì so với NHÃN của mục (`label`, thiếu thì `value` — đúng chữ được\n * chèn sau `@`), không dấu, không phân biệt hoa thường. `onFilter` của app vẫn thắng. `exactMatch`\n * không còn tác dụng: lõi bỏ qua nó khi có `onFilter`, mà nay luôn có.\n *\n * Chữ gõ dừng ở dấu cách ĐẦU TIÊN — luật cứng trong `MentionInput` của lõi (chuỗi sau ký tự kích\n * hoạt có dấu cách thì không còn là mention, danh sách đóng), không prop nào mở được. Tên nhiều chữ\n * vì thế gõ LIỀN: \"@nguyenvana\" tới \"Nguyễn Văn An\" (bộ lọc mặc định so cả nhãn đã bỏ khoảng trắng).\n */\ntype MentionProps = React.ComponentProps<typeof MentionPrimitive.Root>;\n\nfunction Mention({ className, dir: dirProp, onFilter: onFilterProp, ...props }: MentionProps) {\n  /*\n   * ⚠ Khác thượng nguồn: `@diceui/shared` có `useDirection` RIÊNG, đọc một `DirectionContext` mà\n   * gói không xuất ra — nên `DirectionProvider` của Radix (nguồn hướng chữ của mọi component khác\n   * trong gói) không tới được nó. Đọc hướng từ Radix rồi truyền xuống bằng prop `dir`.\n   */\n  const dir = useDirection(dirProp);\n  const listId = React.useId();\n  const itemLabels = useLazyRef(() => new Map<string, string>()).current;\n\n  /*\n   * ⚠ Khác thượng nguồn (3.1.0): bộ lọc MẶC ĐỊNH đi theo nhãn, không dấu. Bộ lọc của lõi so với\n   * `value` — thường là id (\"u-anna\"), nên gõ tên chỉ trúng khi id tình cờ chứa chữ đó — và giữ dấu\n   * (bỏ khoảng trắng/dấu câu rồi so KHỚP MỜ, hạ chữ thường nhưng chuẩn hoá NFC: \"nguyen\" không tới\n   * \"Nguyễn\"). Lõi chỉ đưa `value` cho `onFilter` (gọi từng mục một: `onFilter([value], term)`), nên\n   * nhãn lấy từ bảng `itemLabels` mà `MentionItem` ghi vào.\n   * Lõi còn một bước CHẠY TRƯỚC `onFilter` mà lớp bọc không chạm được: mục có `value` bằng hoặc bắt\n   * đầu bằng chữ gõ (so thô, phân biệt hoa thường) luôn được giữ — \"@u\" giữ mọi id \"u-…\".\n   */\n  const defaultOnFilter = React.useCallback(\n    (values: string[], term: string) =>\n      values.filter((value) => matchesMentionLabel(itemLabels.get(value) ?? value, term)),\n    [itemLabels]\n  );\n\n  const wrapperContext = React.useMemo<MentionWrapperContextValue>(\n    () => ({ listId, itemLabels }),\n    [listId, itemLabels]\n  );\n\n  return (\n    <MentionWrapperContext.Provider value={wrapperContext}>\n      <MentionPrimitive.Root\n        data-slot=\"mention\"\n        dir={dir}\n        onFilter={onFilterProp ?? defaultOnFilter}\n        className={cn(\n          /*\n           * Khối `@Tên` đã chèn. Gói vẽ nó bằng một lớp phủ (`MentionHighlighter`) định vị TUYỆT\n           * ĐỐI nằm ĐÈ LÊN ô nhập: chữ thường của lớp phủ trong suốt để lộ chữ của ô bên dưới,\n           * chỉ đoạn `[data-tag]` là có nền.\n           *\n           * ⚠ Khác thượng nguồn: bản gốc tô `bg-blue-200 text-blue-950` / `dark:bg-blue-800\n           * dark:text-blue-50` (bảng màu mặc định của Tailwind). Đổi sang cặp tonal của gói\n           * (`info` = teal — bậc \"xanh\" của Comitor), và CHỮ là `text-foreground` chứ không phải\n           * `text-info-ink`: nền tint `/15` trong suốt nên chữ của ô nhập vẫn lộ ra dưới khối,\n           * chữ khối vẽ đè đúng chỗ đó — hai lớp chữ phải CÙNG MÀU, lệch màu là thành viền răng\n           * cưa quanh từng nét. (Bản gốc cũng chọn chữ gần như trùng màu chữ thường ở cả hai theme.)\n           * Khối không chỉ nói bằng màu: nó luôn mang ký tự kích hoạt `@` ở đầu.\n           *     chữ ⇄ khối: 15,69:1 (light, trên nền trắng) · 15,15:1 (dark) · tệ nhất 13,44:1\n           *     (dark tương phản cao, `--teal` #2DD4BF). Khối ⇄ nền trang 1,21:1 — cố ý nhạt.\n           */\n          \"**:data-tag:rounded **:data-tag:bg-info/15 **:data-tag:py-px **:data-tag:text-foreground\",\n          className\n        )}\n        {...props}\n      />\n    </MentionWrapperContext.Provider>\n  );\n}\n\ntype MentionLabelProps = React.ComponentProps<typeof MentionPrimitive.Label>;\n\nfunction MentionLabel({ className, ...props }: MentionLabelProps) {\n  return (\n    <MentionPrimitive.Label\n      data-slot=\"mention-label\"\n      className={cn(\"px-0.5 py-1.5 text-sm font-semibold\", className)}\n      {...props}\n    />\n  );\n}\n\ntype MentionInputProps = React.ComponentProps<typeof MentionPrimitive.Input>;\n\n/**\n * Ô nhập của `Mention`. Muốn nhiều dòng (ô soạn tin) thì `asChild` với một `<textarea />`.\n * Không có `MentionLabel` thì PHẢI truyền `aria-label`.\n */\nfunction MentionInput({ className, ...props }: MentionInputProps) {\n  const listId = React.useContext(MentionWrapperContext)?.listId;\n\n  return (\n    <MentionPrimitive.Input\n      data-slot=\"mention-input\"\n      /*\n       * ⚠ Khác thượng nguồn (a11y): ô nhập là `role=\"combobox\"` và gói đặt `aria-controls` trỏ tới\n       * một id sinh trong gốc — nhưng `MentionContent` của gói KHÔNG gắn id đó lên `role=\"listbox\"`,\n       * nên quan hệ combobox → listbox trỏ vào hư không. Lớp bọc tự sinh một id, gắn ở CẢ HAI đầu\n       * (props của ta được trải SAU props của gói nên thắng).\n       */\n      aria-controls={listId}\n      className={cn(\n        /*\n         * Khuôn viền/focus của `Input`: `border-input` lúc nghỉ, `--control-edge-strong` khi rê,\n         * `--primary-ink` + `ring-2 ring/50` khi focus. Nền theo `Textarea` (ô soạn tin thường là\n         * `asChild` + `<textarea>`): trong suốt, ở dark tô `--input-fill` — không `bg-input/30`,\n         * xem chú thích đầu textarea.tsx.\n         * ⚠ Khác thượng nguồn: `focus-visible:ring-1 ring-ring` → khuôn focus của `Input`; bỏ\n         * `shadow-xs` (bóng của gói chỉ đi qua `--elevation-*`, `Input` không có bóng).\n         */\n        \"flex w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm text-foreground transition-colors duration-150 ease-out placeholder:text-muted-foreground hover:border-control-edge-strong focus:border-primary-ink focus:outline-none focus:ring-2 focus:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-input-fill\",\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\ntype MentionContentProps = React.ComponentProps<typeof MentionPrimitive.Content>;\n\n/**\n * Danh sách gợi ý (`role=\"listbox\"`), render qua portal.\n * Tên cho trình đọc màn hình mặc định là khoá `listLabel` của namespace `mention`\n * (`ComitorLocaleProvider`) — đổi bằng `aria-label`.\n */\nfunction MentionContent({ className, children, \"aria-label\": ariaLabelProp, ...props }: MentionContentProps) {\n  const listId = React.useContext(MentionWrapperContext)?.listId;\n  const t = useComitorMessages(\"mention\");\n  const ariaLabel = ariaLabelProp ?? t.listLabel;\n\n  return (\n    <MentionPrimitive.Portal>\n      <MentionPrimitive.Content\n        data-slot=\"mention-content\"\n        // ⚠ Khác thượng nguồn (a11y): id để `aria-controls` của ô nhập trỏ tới được — xem\n        // `MentionInput`. Và `role=\"listbox\"` BẮT BUỘC có tên (ARIA 1.2); bản gốc không đặt.\n        id={listId}\n        aria-label={ariaLabel}\n        className={cn(\n          /*\n           * Mặt nổi cùng bộ với `PopoverContent`/`Command`: `bg-popover text-popover-foreground`,\n           * bóng `shadow-overlay` (đổi theo theme qua `--elevation-*`).\n           * ⚠ Khác thượng nguồn: `shadow-md` → `shadow-overlay`; thêm `origin-(--dice-transform-origin)`\n           * — biến gói headless tính sẵn theo cạnh bám, để hiệu ứng `zoom-in-95` nở ra TỪ phía con\n           * trỏ như `PopoverContent` (bản gốc nở từ tâm).\n           */\n          \"relative z-50 min-w-32 origin-(--dice-transform-origin) overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-overlay data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </MentionPrimitive.Content>\n    </MentionPrimitive.Portal>\n  );\n}\n\ntype MentionItemProps = React.ComponentProps<typeof MentionPrimitive.Item>;\n\n/**\n * Một gợi ý. `value` là thứ app nhận lại (id), `label` là chữ chèn sau `@` — và là chữ bộ lọc mặc\n * định của `Mention` so với chữ gõ (thiếu `label` thì dùng `value`).\n */\nfunction MentionItem({ className, children, value, label, ...props }: MentionItemProps) {\n  const itemLabels = React.useContext(MentionWrapperContext)?.itemLabels;\n  const text = label ?? value;\n\n  /*\n   * ⚠ Khác thượng nguồn (3.1.0): ghi `value → label` cho bộ lọc mặc định của `Mention` — lõi chỉ\n   * đưa `value` cho `onFilter`. Ghi trong layout effect, CÙNG NHỊP lõi tự đăng ký mục (danh sách\n   * đóng thì mục bị gỡ, mở ra thì mount lại), nên bảng luôn khớp đúng những mục lõi đang lọc; lõi\n   * chỉ lọc trong handler sự kiện của ô nhập (gõ, bấm, focus, đổi vùng chọn), tức sau khi commit đã\n   * xong. Gỡ có điều kiện — chỉ khi bảng còn giữ đúng nhãn của mục này — để hai mục trùng `value`\n   * không gỡ nhãn của nhau.\n   */\n  useIsomorphicLayoutEffect(() => {\n    if (!itemLabels) return;\n    itemLabels.set(value, text);\n    return () => {\n      if (itemLabels.get(value) === text) itemLabels.delete(value);\n    };\n  }, [itemLabels, value, text]);\n\n  return (\n    <MentionPrimitive.Item\n      data-slot=\"mention-item\"\n      value={value}\n      label={label}\n      className={cn(\n        /*\n         * ⚠ Khác thượng nguồn: bộ lớp của `CommandItem` (mục đang sáng `bg-accent`/`text-accent-\n         * foreground`, khoảng đệm theo trục mật độ `--menu-item-py`, icon con mặc định\n         * `text-muted-foreground` cỡ 4) — chỉ đổi thuộc tính trạng thái sang dạng của gói headless\n         * (`data-highlighted` / `data-disabled` là thuộc tính CÓ MẶT, không phải `=\"true\"`).\n         */\n        \"relative mt-1 flex w-full cursor-default items-center gap-2 rounded-sm px-2 py-(--menu-item-py) text-sm outline-hidden select-none first:mt-0 data-disabled:pointer-events-none data-disabled:opacity-50 data-highlighted:bg-accent data-highlighted:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </MentionPrimitive.Item>\n  );\n}\n\nexport {\n  Mention,\n  MentionContent,\n  type MentionContentProps,\n  MentionInput,\n  type MentionInputProps,\n  MentionItem,\n  type MentionItemProps,\n  MentionLabel,\n  type MentionLabelProps,\n  type MentionProps\n};\n"],"mappings":"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","names":[]}

package/dist/components/ui/phone-input.d.ts

@@ -27,19 +27,29 @@ declare function useStore<T>(selector: (state: StoreState) => T, ogStore?: Store
  * chỉ gồm chữ số: `"+84912345678"`. Người dùng gõ được theo HAI cách:
  *
  * - **Số nội địa** — chuỗi KHÔNG bắt đầu bằng `+`, và đang có quốc gia được chọn (`defaultCountry`
- *   / `country`, hoặc người dùng chọn): bỏ một số 0 đầu rồi ghép mã quay số của nước đang chọn. Ô hiện NGUYÊN VĂN chữ đã gõ
- *   (chỉ gạt ký tự không phải số hay `space ( ) . -`), con trỏ không nhảy; đổi quốc gia thì giá trị
- *   ghép lại theo mã mới, còn chữ trên ô giữ nguyên.
+ *   / `country`, hoặc người dùng chọn): bỏ tiền tố trung kế của nước đó rồi ghép mã quay số của nước
+ *   đang chọn. Ô hiện NGUYÊN VĂN chữ đã gõ (chỉ gạt ký tự không phải số hay `space ( ) . -`), con trỏ
+ *   không nhảy; đổi quốc gia thì giá trị ghép lại theo mã mới, còn chữ trên ô giữ nguyên.
  *   Nước là Việt Nam, gõ `0912 345 678` → ô hiện `0912 345 678`, `onValueChange("+84912345678")`.
- *   ⚠ Khác thượng nguồn — bản gốc ra `+0912345678`. Ý, San Marino, Vatican giữ số 0 đầu (máy bàn
- *   `06 …` → `+39 06 …`).
+ *   ⚠ Khác thượng nguồn — bản gốc ra `+0912345678`. Tiền tố trung kế là `0` ở phần lớn các nước;
+ *   từ `3.1.0`: Nga/Kazakhstan `8` (`8 912 345 67 89` → `+79123456789`), Hungary `06`, Bắc Mỹ `1`
+ *   (`1 212 555 0123` → `+12125550123`). Ý, San Marino, Vatican, Bờ Biển Ngà, Bénin giữ số 0 đầu
+ *   (máy bàn Ý `06 …` → `+39 06 …`).
+ *   Mở đầu bằng tiền tố gọi quốc tế (`00`; Bắc Mỹ cả `011`; Úc `0011`; Nhật `010`) thì là số quốc
+ *   tế, như gõ `+` (`3.1.0`): `0044 20 7946 0958` → `+442079460958`, cờ chuyển sang Anh.
  * - **Số quốc tế** — chuỗi bắt đầu bằng `+` (như thượng nguồn): ô hiện tách nhóm
  *   (`+84 912 345 678`), quốc gia tự nhận theo mã quay số.
  *   Gõ `+84 912 345 678` → `onValueChange("+84912345678")`, cờ chuyển sang Việt Nam.
+ *   ⚠ Khác thượng nguồn (3.1.0): tiền tố trung kế gõ thừa ngay sau mã bị bỏ — `+84 0912 345 678`
+ *   cũng ra `+84912345678` (nước giữ số 0 thì giữ: `+39 06 …`).
  *
- * Giá trị nạp từ ngoài (`value`/`defaultValue`) luôn hiện ở dạng quốc tế. Không có quốc gia nào
- * được chọn — MẶC ĐỊNH từ `3.0.0` — thì mọi chữ số đầu bị coi là mã quốc gia, như thượng nguồn:
- * gõ `0912 345 678` ra `+0912345678`, gõ `84 912 345 678` ra `+84912345678` và cờ tự nhận Việt Nam.
+ * Mọi cách gõ: tối đa 15 chữ số — trần của E.164 (`3.1.0`). Giá trị nạp từ ngoài
+ * (`value`/`defaultValue`) luôn hiện ở dạng quốc tế và không bị sửa. Không có quốc gia nào được
+ * chọn — MẶC ĐỊNH từ `3.0.0` — thì mọi chữ số đầu bị coi là mã quốc gia, như thượng nguồn: gõ
+ * `0912 345 678` ra `+0912345678`, gõ `84 912 345 678` ra `+84912345678` và cờ tự nhận Việt Nam.
+ *
+ * ⚠ Gói KHÔNG kiểm số. Mã quốc gia gõ THIẾU `+` sau khi đã chọn nước vẫn là số nội địa (`84 912 345
+ * 678` với Việt Nam ra `+8484912345678`), độ dài không được xét. Kiểm ở server (vd libphonenumber).
  *
  * Gốc là `role="group"` chưa có tên: đặt `aria-label` (vd "Phone number") hoặc `aria-labelledby`
  * cho chính `PhoneInput`.

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

@@ -7,6 +7,7 @@ import * as React from "react";
 import { useComitorLabels, useComitorLocale } from "../../i18n/locale-provider.js";
 import { cn } from "../../lib/cn.js";
 import { useComposedRefs } from "../../lib/compose-refs.js";
+import { removeVietnameseTones } from "../../lib/text-search.js";
 import { useAsRef } from "../../lib/use-as-ref.js";
 import { useIsomorphicLayoutEffect } from "../../lib/use-isomorphic-layout-effect.js";
 import { useLazyRef } from "../../lib/use-lazy-ref.js";
@@ -287,11 +288,12 @@ function getCountries(locale) {
     };
   }).sort((a, b) => collator ? collator.compare(a.name, b.name) : a.name.localeCompare(b.name));
 }
-function removeDiacritics(text) {
-  return text.normalize("NFD").replace(/\p{Diacritic}/gu, "").replace(/đ/g, "d").replace(/Đ/g, "D");
-}
 function filterCountries(value, search, keywords) {
-  return defaultFilter(removeDiacritics(value), removeDiacritics(search), keywords?.map(removeDiacritics));
+  return defaultFilter(
+    removeVietnameseTones(value),
+    removeVietnameseTones(search),
+    keywords?.map(removeVietnameseTones)
+  );
 }
 const PRIMARY_COUNTRY_BY_DIAL_CODE = {
   "+1": "US",
@@ -347,14 +349,101 @@ function formatPhoneNumber(value, countries) {
   }
   return formatted;
 }
-const NO_TRUNK_PREFIX_COUNTRIES = /* @__PURE__ */ new Set(["IT", "SM", "VA"]);
+const E164_MAX_DIGITS = 15;
+const DEFAULT_TRUNK_PREFIX = "0";
+const TRUNK_PREFIX_BY_COUNTRY = {
+  IT: "",
+  SM: "",
+  VA: "",
+  CI: "",
+  BJ: "",
+  RU: "8",
+  KZ: "8",
+  HU: "06"
+};
+const AMBIGUOUS_TRUNK_NATIONAL_LENGTH = {
+  RU: 10,
+  KZ: 10
+};
+const NANP_TRUNK_PREFIX = "1";
+const NANP_NATIONAL_LENGTH = 10;
+function isNanp(country) {
+  return country.dialCode.startsWith("+1");
+}
+function getTrunkPrefix(country) {
+  if (isNanp(country)) return NANP_TRUNK_PREFIX;
+  return TRUNK_PREFIX_BY_COUNTRY[country.code] ?? DEFAULT_TRUNK_PREFIX;
+}
+function stripTrunkPrefix(nationalDigits, country) {
+  const prefix = getTrunkPrefix(country);
+  if (!prefix || !nationalDigits.startsWith(prefix)) return nationalDigits;
+  const fixedLength = AMBIGUOUS_TRUNK_NATIONAL_LENGTH[country.code];
+  if (fixedLength !== void 0 && nationalDigits.length <= fixedLength) return nationalDigits;
+  return nationalDigits.slice(prefix.length);
+}
+const DEFAULT_EXIT_PREFIXES = ["00"];
+const NANP_EXIT_PREFIXES = ["011", "00"];
+const EXIT_PREFIXES_BY_COUNTRY = {
+  AU: ["0011"],
+  JP: ["010"]
+};
+function stripExitPrefix(digits, country) {
+  const prefixes = !country ? DEFAULT_EXIT_PREFIXES : isNanp(country) ? NANP_EXIT_PREFIXES : EXIT_PREFIXES_BY_COUNTRY[country.code] ?? DEFAULT_EXIT_PREFIXES;
+  const prefix = prefixes.find((candidate) => digits.startsWith(candidate));
+  return prefix === void 0 ? null : digits.slice(prefix.length);
+}
+function findCallingCode(digits) {
+  const entry = COUNTRY_DATA.find(([, dialCode]) => digits.startsWith(dialCode));
+  return entry ? { code: entry[0].toUpperCase(), dialCode: `+${entry[1]}` } : void 0;
+}
+function normalizeInternationalDigits(digits) {
+  let normalized = digits;
+  if (digits.startsWith("1")) {
+    if (digits.startsWith(NANP_TRUNK_PREFIX, 1)) normalized = `1${digits.slice(2)}`;
+  } else {
+    const callingCode = findCallingCode(digits);
+    if (callingCode) {
+      const countryCode = callingCode.dialCode.slice(1);
+      normalized = `${countryCode}${stripTrunkPrefix(digits.slice(countryCode.length), callingCode)}`;
+    }
+  }
+  return normalized.slice(0, E164_MAX_DIGITS);
+}
 const NATIONAL_INPUT_DISALLOWED = /[^\d\s().-]/g;
+function nationalToE164Digits(nationalInput, country) {
+  const national = stripTrunkPrefix(nationalInput.replace(/\D/g, ""), country);
+  if (!national) return "";
+  const countryCode = isNanp(country) && national.length === NANP_NATIONAL_LENGTH ? "1" : country.dialCode.slice(1);
+  return `${countryCode}${national}`;
+}
 function nationalToE164(nationalInput, country) {
-  let digits = nationalInput.replace(/\D/g, "");
-  if (digits.startsWith("0") && !NO_TRUNK_PREFIX_COUNTRIES.has(country.code)) {
-    digits = digits.slice(1);
+  const digits = nationalToE164Digits(nationalInput, country);
+  return digits ? `+${digits.slice(0, E164_MAX_DIGITS)}` : "";
+}
+function limitNationalInput(nationalInput, country) {
+  for (let i = 0; i < nationalInput.length; i++) {
+    if (!/\d/.test(nationalInput.charAt(i))) continue;
+    if (nationalToE164Digits(nationalInput.slice(0, i + 1), country).length > E164_MAX_DIGITS) {
+      return nationalInput.slice(0, i);
+    }
   }
-  return digits ? `${country.dialCode}${digits}` : "";
+  return nationalInput;
+}
+function parseTypedNumber(inputValue, country) {
+  const startsWithPlus = inputValue.trimStart().startsWith("+");
+  const digits = inputValue.replace(/\D/g, "");
+  const afterExitPrefix = stripExitPrefix(digits, country);
+  if (!startsWithPlus && country && afterExitPrefix === null) {
+    const nationalInput = limitNationalInput(inputValue.replace(NATIONAL_INPUT_DISALLOWED, ""), country);
+    return { value: nationalToE164(nationalInput, country), nationalInput, startsWithPlus: false };
+  }
+  const international = startsWithPlus || afterExitPrefix !== null;
+  const e164Digits = normalizeInternationalDigits(afterExitPrefix ?? digits);
+  return {
+    value: e164Digits ? `+${e164Digits}` : international ? "+" : "",
+    nationalInput: null,
+    startsWithPlus: international
+  };
 }
 function getNationalInput(state, countries) {
   const { nationalInput, country, value } = state;
@@ -459,10 +548,12 @@ function PhoneInput(props) {
           if (nationalInput2 !== null) {
             const selected = propsRef.current.countries.find((c) => c.code === value2);
             if (selected) {
-              const nextValue = nationalToE164(nationalInput2, selected);
-              if (nextValue !== stateRef.current.value) {
-                stateRef.current.value = nextValue;
-                propsRef.current.onValueChange?.(nextValue);
+              const next = parseTypedNumber(nationalInput2, selected);
+              stateRef.current.nationalInput = next.nationalInput;
+              stateRef.current.startsWithPlus = next.startsWithPlus;
+              if (next.value !== stateRef.current.value) {
+                stateRef.current.value = next.value;
+                propsRef.current.onValueChange?.(next.value);
               }
             } else {
               stateRef.current.nationalInput = null;
@@ -577,7 +668,7 @@ function PhoneInput(props) {
 }
 function PhoneInputCountrySelect(props) {
   const { disabled: disabledProp, className, children, onOpenChange: onOpenChangeProp, ...popoverProps } = props;
-  const { countries, inputRef, disabled, showFlag, labels } = usePhoneInputContext(COUNTRY_SELECT_NAME);
+  const { countries, inputRef, disabled, readOnly, showFlag, labels } = usePhoneInputContext(COUNTRY_SELECT_NAME);
   const store = useStoreContext(COUNTRY_SELECT_NAME);
   const country = useStore((state) => state.country);
   const open = useStore((state) => state.open);
@@ -586,10 +677,11 @@ function PhoneInputCountrySelect(props) {
   const countryContext = countries.find((c) => c.code === country);
   const onOpenChange = React.useCallback(
     (open2) => {
+      if (open2 && readOnly) return;
       store.setState("open", open2);
       onOpenChangeRef.current?.(open2);
     },
-    [store, onOpenChangeRef]
+    [store, onOpenChangeRef, readOnly]
   );
   return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange, ...popoverProps, children: [
     /* @__PURE__ */ jsxs(
@@ -597,6 +689,8 @@ function PhoneInputCountrySelect(props) {
       {
         "data-slot": "phone-input-country-select",
         "aria-label": labels.countrySelect(countryContext),
+        "aria-disabled": readOnly && !isDisabled ? true : void 0,
+        "data-readonly": readOnly ? "" : void 0,
         disabled: isDisabled,
         className: cn(
           /*
@@ -681,27 +775,23 @@ function PhoneInputField(props) {
       onChangeRef.current?.(event);
       if (event.defaultPrevented) return;
       const inputValue = event.target.value;
-      const startsWithPlus = inputValue.trimStart().startsWith("+");
-      const selectedCountry = startsWithPlus ? void 0 : countries.find((c) => c.code === store.getState().country);
-      if (selectedCountry) {
-        const nextNationalInput = inputValue.replace(NATIONAL_INPUT_DISALLOWED, "");
-        if (nextNationalInput !== inputValue) {
-          const target = event.target;
-          const caret = target.selectionStart ?? inputValue.length;
-          const nextCaret = inputValue.slice(0, caret).replace(NATIONAL_INPUT_DISALLOWED, "").length;
-          target.value = nextNationalInput;
-          target.setSelectionRange(nextCaret, nextCaret);
-        }
-        store.setState("startsWithPlus", false);
-        store.setState("nationalInput", nextNationalInput);
-        store.setState("value", nationalToE164(nextNationalInput, selectedCountry));
-        return;
+      const next = parseTypedNumber(
+        inputValue,
+        countries.find((c) => c.code === store.getState().country)
+      );
+      if (next.nationalInput !== null && next.nationalInput !== inputValue) {
+        const target = event.target;
+        const caret = target.selectionStart ?? inputValue.length;
+        const nextCaret = Math.min(
+          inputValue.slice(0, caret).replace(NATIONAL_INPUT_DISALLOWED, "").length,
+          next.nationalInput.length
+        );
+        target.value = next.nationalInput;
+        target.setSelectionRange(nextCaret, nextCaret);
       }
-      const digits = inputValue.replace(/\D/g, "");
-      const newValue = digits ? `+${digits}` : startsWithPlus ? "+" : "";
-      store.setState("startsWithPlus", startsWithPlus);
-      store.setState("nationalInput", null);
-      store.setState("value", newValue);
+      store.setState("startsWithPlus", next.startsWithPlus);
+      store.setState("nationalInput", next.nationalInput);
+      store.setState("value", next.value);
     },
     [store, countries, onChangeRef, isDisabled, isReadOnly]
   );