@comitor/ui 1.11.0 → 2.1.0

package/dist/components/ui/mention.js

@@ -0,0 +1,128 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import * as MentionPrimitive from "@diceui/mention";
+import { useDirection } from "@radix-ui/react-direction";
+import * as React from "react";
+import { cn } from "../../lib/cn.js";
+const MentionListIdContext = React.createContext(void 0);
+function Mention({ className, dir: dirProp, ...props }) {
+  const dir = useDirection(dirProp);
+  const listId = React.useId();
+  return /* @__PURE__ */ jsx(MentionListIdContext.Provider, { value: listId, children: /* @__PURE__ */ jsx(
+    MentionPrimitive.Root,
+    {
+      "data-slot": "mention",
+      dir,
+      className: cn(
+        /*
+         * Khối `@Tên` đã chèn. Gói vẽ nó bằng một lớp phủ (`MentionHighlighter`) định vị TUYỆT
+         * ĐỐ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,
+         * chỉ đoạn `[data-tag]` là có nền.
+         *
+         * ⚠ Khác thượng nguồn: bản gốc tô `bg-blue-200 text-blue-950` / `dark:bg-blue-800
+         * dark:text-blue-50` (bảng màu mặc định của Tailwind). Đổi sang cặp tonal của gói
+         * (`info` = teal — bậc "xanh" của Comitor), và CHỮ là `text-foreground` chứ không phải
+         * `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,
+         * 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
+         * 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.)
+         * Khối không chỉ nói bằng màu: nó luôn mang ký tự kích hoạt `@` ở đầu.
+         *     chữ ⇄ khối: 15,69:1 (light, trên nền trắng) · 15,15:1 (dark) · tệ nhất 13,44:1
+         *     (dark tương phản cao, `--teal` #2DD4BF). Khối ⇄ nền trang 1,21:1 — cố ý nhạt.
+         */
+        "**:data-tag:rounded **:data-tag:bg-info/15 **:data-tag:py-px **:data-tag:text-foreground",
+        className
+      ),
+      ...props
+    }
+  ) });
+}
+function MentionLabel({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    MentionPrimitive.Label,
+    {
+      "data-slot": "mention-label",
+      className: cn("px-0.5 py-1.5 text-sm font-semibold", className),
+      ...props
+    }
+  );
+}
+function MentionInput({ className, ...props }) {
+  const listId = React.useContext(MentionListIdContext);
+  return /* @__PURE__ */ jsx(
+    MentionPrimitive.Input,
+    {
+      "data-slot": "mention-input",
+      "aria-controls": listId,
+      className: cn(
+        /*
+         * Khuôn viền/focus của `Input`: `border-input` lúc nghỉ, `--control-edge-strong` khi rê,
+         * `--primary-ink` + `ring-2 ring/50` khi focus. Nền theo `Textarea` (ô soạn tin thường là
+         * `asChild` + `<textarea>`): trong suốt, ở dark tô `--input-fill` — không `bg-input/30`,
+         * xem chú thích đầu textarea.tsx.
+         * ⚠ Khác thượng nguồn: `focus-visible:ring-1 ring-ring` → khuôn focus của `Input`; bỏ
+         * `shadow-xs` (bóng của gói chỉ đi qua `--elevation-*`, `Input` không có bóng).
+         */
+        "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",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function MentionContent({
+  className,
+  children,
+  "aria-label": ariaLabel = "Danh s\xE1ch g\u1EE3i \xFD",
+  ...props
+}) {
+  const listId = React.useContext(MentionListIdContext);
+  return /* @__PURE__ */ jsx(MentionPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+    MentionPrimitive.Content,
+    {
+      "data-slot": "mention-content",
+      id: listId,
+      "aria-label": ariaLabel,
+      className: cn(
+        /*
+         * Mặt nổi cùng bộ với `PopoverContent`/`Command`: `bg-popover text-popover-foreground`,
+         * bóng `shadow-overlay` (đổi theo theme qua `--elevation-*`).
+         * ⚠ Khác thượng nguồn: `shadow-md` → `shadow-overlay`; thêm `origin-(--dice-transform-origin)`
+         * — 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
+         * trỏ như `PopoverContent` (bản gốc nở từ tâm).
+         */
+        "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",
+        className
+      ),
+      ...props,
+      children
+    }
+  ) });
+}
+function MentionItem({ className, children, ...props }) {
+  return /* @__PURE__ */ jsx(
+    MentionPrimitive.Item,
+    {
+      "data-slot": "mention-item",
+      className: cn(
+        /*
+         * ⚠ Khác thượng nguồn: bộ lớp của `CommandItem` (mục đang sáng `bg-accent`/`text-accent-
+         * foreground`, khoảng đệm theo trục mật độ `--menu-item-py`, icon con mặc định
+         * `text-muted-foreground` cỡ 4) — chỉ đổi thuộc tính trạng thái sang dạng của gói headless
+         * (`data-highlighted` / `data-disabled` là thuộc tính CÓ MẶT, không phải `="true"`).
+         */
+        "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",
+        className
+      ),
+      ...props,
+      children
+    }
+  );
+}
+export {
+  Mention,
+  MentionContent,
+  MentionInput,
+  MentionItem,
+  MentionLabel
+};
+//# sourceMappingURL=mention.js.map

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

@@ -0,0 +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 { 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 \"Danh sách gợi ý\" — đổi bằng `aria-label`.\n */\nfunction MentionContent({\n  className,\n  children,\n  \"aria-label\": ariaLabel = \"Danh sách gợi ý\",\n  ...props\n}: MentionContentProps) {\n  const listId = React.useContext(MentionListIdContext);\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":";AAsCM;AA/BN,YAAY,sBAAsB;AAClC,SAAS,oBAAoB;AAC7B,YAAY,WAAW;AACvB,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;AAQA,SAAS,eAAe;AAAA,EACtB;AAAA,EACA;AAAA,EACA,cAAc,YAAY;AAAA,EAC1B,GAAG;AACL,GAAwB;AACtB,QAAM,SAAS,MAAM,WAAW,oBAAoB;AAEpD,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":[]}

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

@@ -0,0 +1,54 @@
+/**
+ * Kiểu quốc gia và nhãn mặc định của `PhoneInput`.
+ *
+ * Module **CỐ Ý không có `"use client"`** — xem `src/chart/chart-colors.ts` để biết lý do đầy
+ * đủ: mọi export của một file `"use client"` đến tay Server Component dưới dạng
+ * client-reference proxy, đọc ra `undefined` mà KHÔNG throw, KHÔNG warning. Hằng dữ liệu thuần
+ * (nhãn mặc định) phải sống ngoài ranh giới client để app spread/override được ở cả hai phía.
+ *
+ * ⚠ Barrel `src/index.ts` xuất module này TRỰC TIẾP. `phone-input.tsx` chỉ được `import`,
+ * KHÔNG được `export` lại (re-export qua file client là vô hiệu, và đụng tên với `export *`).
+ */
+/**
+ * Một quốc gia trong danh sách chọn của `PhoneInput` — cũng là hình dạng của prop `countries`
+ * khi app muốn tự giới hạn danh sách.
+ *
+ * ⚠ Khác thượng nguồn: thượng nguồn khai kiểu này dưới tên `Country` và KHÔNG export (app phải
+ * viết `PhoneInputProps["countries"]`). Ở đây export dưới tên có tiền tố — `Country` trần là tên
+ * quá chung cho entry chính.
+ */
+interface PhoneInputCountry {
+    /** Mã ISO 3166-1 alpha-2, viết HOA — `"VN"`. */
+    code: string;
+    /** Tên hiển thị trong danh sách và trong nhãn của nút chọn — `"Việt Nam"`. */
+    name: string;
+    /** Mã quay số quốc tế, có dấu `+` — `"+84"`. */
+    dialCode: string;
+    /** Cờ emoji — `"🇻🇳"`. Bỏ trống thì không vẽ cờ. */
+    flag?: string;
+}
+/**
+ * Chuỗi hiển thị của `PhoneInput` (kể cả chuỗi chỉ dành cho trình đọc màn hình) — override từng
+ * khoá qua prop `labels`. Mặc định tiếng Việt.
+ *
+ * ⚠ Placeholder của ô nhập số KHÔNG nằm ở đây: nó vẫn là prop `placeholder` rời như thượng nguồn
+ * (trên `PhoneInput`, hoặc trên chính `PhoneInputField`).
+ */
+interface PhoneInputLabels {
+    /**
+     * Tên cho trình đọc màn hình của nút chọn quốc gia. Nhận quốc gia đang chọn (`undefined` khi
+     * chưa chọn) vì tên phải nói được GIÁ TRỊ hiện tại — nút chỉ chứa một lá cờ emoji.
+     *
+     * ⚠ Thêm so với thượng nguồn: ở bản gốc nút này KHÔNG có tên (lá cờ + mũi tên, hoặc một ô xám
+     * trống khi chưa chọn). Là HÀM chứ không phải chuỗi mẫu vì có giá trị chèn vào giữa câu.
+     */
+    countrySelect: (country: PhoneInputCountry | undefined) => string;
+    /** Placeholder ô tìm kiếm trong danh sách quốc gia. */
+    searchPlaceholder: string;
+    /** Dòng báo khi không quốc gia nào khớp từ khoá. */
+    empty: string;
+}
+/** Nhãn tiếng Việt mặc định — mọi khoá đều override được qua prop `labels`. */
+declare const DEFAULT_PHONE_INPUT_LABELS: PhoneInputLabels;
+
+export { DEFAULT_PHONE_INPUT_LABELS, type PhoneInputCountry, type PhoneInputLabels };

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

@@ -0,0 +1,9 @@
+const DEFAULT_PHONE_INPUT_LABELS = {
+  countrySelect: (country) => country ? `Qu\u1ED1c gia: ${country.name} (${country.dialCode})` : "Ch\u1ECDn qu\u1ED1c gia",
+  searchPlaceholder: "T\xECm qu\u1ED1c gia\u2026",
+  empty: "Kh\xF4ng t\xECm th\u1EA5y qu\u1ED1c gia."
+};
+export {
+  DEFAULT_PHONE_INPUT_LABELS
+};
+//# sourceMappingURL=phone-input-constants.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/ui/phone-input-constants.ts"],"sourcesContent":["/**\n * Kiểu quốc gia và nhãn mặc định của `PhoneInput`.\n *\n * Module **CỐ Ý không có `\"use client\"`** — xem `src/chart/chart-colors.ts` để biết lý do đầy\n * đủ: mọi export của một file `\"use client\"` đến tay Server Component dưới dạng\n * client-reference proxy, đọc ra `undefined` mà KHÔNG throw, KHÔNG warning. Hằng dữ liệu thuần\n * (nhãn mặc định) phải sống ngoài ranh giới client để app spread/override được ở cả hai phía.\n *\n * ⚠ Barrel `src/index.ts` xuất module này TRỰC TIẾP. `phone-input.tsx` chỉ được `import`,\n * KHÔNG được `export` lại (re-export qua file client là vô hiệu, và đụng tên với `export *`).\n */\n\n/**\n * Một quốc gia trong danh sách chọn của `PhoneInput` — cũng là hình dạng của prop `countries`\n * khi app muốn tự giới hạn danh sách.\n *\n * ⚠ Khác thượng nguồn: thượng nguồn khai kiểu này dưới tên `Country` và KHÔNG export (app phải\n * viết `PhoneInputProps[\"countries\"]`). Ở đây export dưới tên có tiền tố — `Country` trần là tên\n * quá chung cho entry chính.\n */\nexport interface PhoneInputCountry {\n  /** Mã ISO 3166-1 alpha-2, viết HOA — `\"VN\"`. */\n  code: string;\n  /** Tên hiển thị trong danh sách và trong nhãn của nút chọn — `\"Việt Nam\"`. */\n  name: string;\n  /** Mã quay số quốc tế, có dấu `+` — `\"+84\"`. */\n  dialCode: string;\n  /** Cờ emoji — `\"🇻🇳\"`. Bỏ trống thì không vẽ cờ. */\n  flag?: string;\n}\n\n/**\n * Chuỗi hiển thị của `PhoneInput` (kể cả chuỗi chỉ dành cho trình đọc màn hình) — override từng\n * khoá qua prop `labels`. Mặc định tiếng Việt.\n *\n * ⚠ Placeholder của ô nhập số KHÔNG nằm ở đây: nó vẫn là prop `placeholder` rời như thượng nguồn\n * (trên `PhoneInput`, hoặc trên chính `PhoneInputField`).\n */\nexport interface PhoneInputLabels {\n  /**\n   * Tên cho trình đọc màn hình của nút chọn quốc gia. Nhận quốc gia đang chọn (`undefined` khi\n   * chưa chọn) vì tên phải nói được GIÁ TRỊ hiện tại — nút chỉ chứa một lá cờ emoji.\n   *\n   * ⚠ Thêm so với thượng nguồn: ở bản gốc nút này KHÔNG có tên (lá cờ + mũi tên, hoặc một ô xám\n   * trống khi chưa chọn). Là HÀM chứ không phải chuỗi mẫu vì có giá trị chèn vào giữa câu.\n   */\n  countrySelect: (country: PhoneInputCountry | undefined) => string;\n  /** Placeholder ô tìm kiếm trong danh sách quốc gia. */\n  searchPlaceholder: string;\n  /** Dòng báo khi không quốc gia nào khớp từ khoá. */\n  empty: string;\n}\n\n/** Nhãn tiếng Việt mặc định — mọi khoá đều override được qua prop `labels`. */\nexport const DEFAULT_PHONE_INPUT_LABELS: PhoneInputLabels = {\n  countrySelect: (country) => (country ? `Quốc gia: ${country.name} (${country.dialCode})` : \"Chọn quốc gia\"),\n  searchPlaceholder: \"Tìm quốc gia…\",\n  empty: \"Không tìm thấy quốc gia.\"\n};\n"],"mappings":"AAsDO,MAAM,6BAA+C;AAAA,EAC1D,eAAe,CAAC,YAAa,UAAU,kBAAa,QAAQ,IAAI,KAAK,QAAQ,QAAQ,MAAM;AAAA,EAC3F,mBAAmB;AAAA,EACnB,OAAO;AACT;","names":[]}

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

@@ -0,0 +1,85 @@
+import * as React from 'react';
+import { PhoneInputCountry, PhoneInputLabels } from './phone-input-constants.js';
+import { Popover, PopoverTrigger } from './popover.js';
+import '@radix-ui/react-popover';
+
+interface StoreState {
+    value: string;
+    country: string;
+    open: boolean;
+    startsWithPlus: boolean;
+    /**
+     * ⚠ Thêm so với thượng nguồn: chữ người dùng gõ ở chế độ số nội địa, đúng như gõ (đã gạt ký tự
+     * lạ), để ô hiện lại nguyên văn thay vì dạng `+84 …`. `null` = chế độ quốc tế của thượng nguồn.
+     */
+    nationalInput: string | null;
+}
+interface Store {
+    subscribe: (callback: () => void) => () => void;
+    getState: () => StoreState;
+    setState: <K extends keyof StoreState>(key: K, value: StoreState[K]) => void;
+    notify: () => void;
+}
+declare function useStore<T>(selector: (state: StoreState) => T, ogStore?: Store | null): T;
+/**
+ * Ô nhập số điện thoại quốc tế: nút chọn quốc gia (`PhoneInputCountrySelect`) + ô số
+ * (`PhoneInputField`). Giá trị (`value` / `onValueChange` / input ẩn khi submit form) luôn là E.164
+ * 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 (mặc định Việt
+ *   Nam): 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.
+ *   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 …`).
+ * - **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.
+ *
+ * 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 (`defaultCountry=""`) thì mọi chữ số đầu bị coi là mã quốc gia, như thượng nguồn.
+ *
+ * Gốc là `role="group"` chưa có tên: đặt `aria-label` (vd "Số điện thoại") hoặc `aria-labelledby`
+ * cho chính `PhoneInput`.
+ */
+interface PhoneInputProps extends React.ComponentProps<"div"> {
+    defaultValue?: string;
+    value?: string;
+    onValueChange?: (value: string) => void;
+    /**
+     * Quốc gia ban đầu (mã ISO alpha-2, viết HOA). Mặc định `"VN"`.
+     *
+     * ⚠ Khác thượng nguồn: thượng nguồn để trống. Truyền `""` để quay về hành vi đó.
+     */
+    defaultCountry?: string;
+    country?: string;
+    onCountryChange?: (country: string) => void;
+    countries?: PhoneInputCountry[];
+    name?: string;
+    /** Placeholder ô nhập số. Mặc định "Nhập số điện thoại". */
+    placeholder?: string;
+    /**
+     * Locale BCP 47 để gọi tên quốc gia (`Intl.DisplayNames`) và sắp xếp danh sách. Mặc định `"vi"`.
+     * Bỏ qua khi app truyền `countries` riêng (tên lấy nguyên từ đó).
+     *
+     * ⚠ Thêm so với thượng nguồn — bản gốc ghim tên tiếng Anh.
+     */
+    locale?: string;
+    /** Chuỗi hiển thị/đọc màn hình của phần chọn quốc gia — override từng khoá. */
+    labels?: Partial<PhoneInputLabels>;
+    asChild?: boolean;
+    disabled?: boolean;
+    readOnly?: boolean;
+    required?: boolean;
+    invalid?: boolean;
+    showFlag?: boolean;
+}
+declare function PhoneInput(props: PhoneInputProps): React.JSX.Element;
+interface PhoneInputCountrySelectProps extends React.ComponentProps<typeof Popover>, Pick<React.ComponentProps<typeof PopoverTrigger>, "disabled" | "className"> {
+}
+declare function PhoneInputCountrySelect(props: PhoneInputCountrySelectProps): React.JSX.Element;
+type PhoneInputFieldProps = React.ComponentProps<"input">;
+declare function PhoneInputField(props: PhoneInputFieldProps): React.JSX.Element;
+
+export { PhoneInput, PhoneInputCountrySelect, type PhoneInputCountrySelectProps, PhoneInputField, type PhoneInputFieldProps, type PhoneInputProps, useStore as usePhoneInput };