@comitor/ui 2.1.0 → 3.0.1

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

@@ -4,10 +4,14 @@ import 'class-variance-authority/types';
 import 'class-variance-authority';
 
 /**
- * Pagination — primitive tĩnh (không "use client", dùng được trong RSC).
- * Đây là bộ khung thẻ `<a>`; bản "biết đếm trang" là composite `TablePagination`.
+ * Pagination — bộ khung thẻ `<a>`; bản "biết đếm trang" là composite `TablePagination`.
  *
- * Chuỗi hiển thị mặc định tiếng Việt, override qua prop `label` / `srLabel`.
+ * Chuỗi hiển thị theo `ComitorLocaleProvider` (namespace `pagination`, mặc định tiếng Anh);
+ * override từng chỗ qua prop `label` / `srLabel` / `aria-label`.
+ *
+ * `"use client"` từ `3.0.0`: chữ và tên cho trình đọc màn hình đọc từ provider, mà context chỉ
+ * đọc được ở client. Trước đó file này tĩnh và ghim cứng tiếng Việt. Không prop nào là
+ * hàm/component nên Server Component vẫn render được nó.
  * Muốn dùng `next/link`: `<PaginationLink asChild>` chưa có ở primitive này —
  * truyền `href` trực tiếp hoặc bọc bằng composite ở tầng app.
  */
@@ -18,23 +22,23 @@ type PaginationLinkProps = {
     isActive?: boolean;
 } & Pick<ButtonProps, "size"> & React.ComponentProps<"a">;
 type PaginationPreviousProps = PaginationLinkProps & {
-    /** Nhãn hiển thị (ẩn ở màn hình nhỏ). Mặc định "Trước". */
+    /** Nhãn hiển thị (ẩn ở màn hình nhỏ). Mặc định: khoá `previousLabel` của namespace `pagination`. */
     label?: React.ReactNode;
 };
 type PaginationNextProps = PaginationLinkProps & {
-    /** Nhãn hiển thị (ẩn ở màn hình nhỏ). Mặc định "Sau". */
+    /** Nhãn hiển thị (ẩn ở màn hình nhỏ). Mặc định: khoá `nextLabel` của namespace `pagination`. */
     label?: React.ReactNode;
 };
 type PaginationEllipsisProps = React.ComponentProps<"span"> & {
-    /** Nhãn chỉ dành cho trình đọc màn hình. */
+    /** Nhãn chỉ dành cho trình đọc màn hình. Mặc định: khoá `ellipsisLabel` của namespace `pagination`. */
     srLabel?: string;
 };
 declare function Pagination({ className, ...props }: PaginationProps): React.JSX.Element;
 declare function PaginationContent({ className, ...props }: PaginationContentProps): React.JSX.Element;
 declare function PaginationItem({ ...props }: PaginationItemProps): React.JSX.Element;
 declare function PaginationLink({ className, isActive, size, ...props }: PaginationLinkProps): React.JSX.Element;
-declare function PaginationPrevious({ className, label, ...props }: PaginationPreviousProps): React.JSX.Element;
-declare function PaginationNext({ className, label, ...props }: PaginationNextProps): React.JSX.Element;
-declare function PaginationEllipsis({ className, srLabel, ...props }: PaginationEllipsisProps): React.JSX.Element;
+declare function PaginationPrevious({ className, label: labelProp, ...props }: PaginationPreviousProps): React.JSX.Element;
+declare function PaginationNext({ className, label: labelProp, ...props }: PaginationNextProps): React.JSX.Element;
+declare function PaginationEllipsis({ className, srLabel: srLabelProp, ...props }: PaginationEllipsisProps): React.JSX.Element;
 
 export { Pagination, PaginationContent, type PaginationContentProps, PaginationEllipsis, type PaginationEllipsisProps, PaginationItem, type PaginationItemProps, PaginationLink, type PaginationLinkProps, PaginationNext, type PaginationNextProps, PaginationPrevious, type PaginationPreviousProps, type PaginationProps };

package/dist/components/ui/pagination.js

@@ -1,14 +1,17 @@
+"use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { ChevronLeftIcon, ChevronRightIcon, MoreHorizontalIcon } from "lucide-react";
+import { useComitorMessages } from "../../i18n/locale-provider.js";
 import { cn } from "../../lib/cn.js";
 import { buttonVariants } from "./button.js";
 function Pagination({ className, ...props }) {
+  const t = useComitorMessages("pagination");
   return (
     // Thẻ <nav> đã ngầm mang role="navigation" — bản comitor-ds khai lại là thừa, bỏ đi.
     /* @__PURE__ */ jsx(
       "nav",
       {
-        "aria-label": "Ph\xE2n trang",
+        "aria-label": t.navLabel,
         "data-slot": "pagination",
         className: cn("mx-auto flex w-full justify-center", className),
         ...props
@@ -38,11 +41,13 @@ function PaginationLink({ className, isActive, size = "icon", ...props }) {
     }
   );
 }
-function PaginationPrevious({ className, label = "Tr\u01B0\u1EDBc", ...props }) {
+function PaginationPrevious({ className, label: labelProp, ...props }) {
+  const t = useComitorMessages("pagination");
+  const label = labelProp === void 0 ? t.previousLabel : labelProp;
   return /* @__PURE__ */ jsxs(
     PaginationLink,
     {
-      "aria-label": "V\u1EC1 trang tr\u01B0\u1EDBc",
+      "aria-label": t.previousAriaLabel,
       size: "default",
       className: cn("gap-1 px-2.5 sm:pl-2.5", className),
       ...props,
@@ -53,11 +58,13 @@ function PaginationPrevious({ className, label = "Tr\u01B0\u1EDBc", ...props })
     }
   );
 }
-function PaginationNext({ className, label = "Sau", ...props }) {
+function PaginationNext({ className, label: labelProp, ...props }) {
+  const t = useComitorMessages("pagination");
+  const label = labelProp === void 0 ? t.nextLabel : labelProp;
   return /* @__PURE__ */ jsxs(
     PaginationLink,
     {
-      "aria-label": "T\u1EDBi trang sau",
+      "aria-label": t.nextAriaLabel,
       size: "default",
       className: cn("gap-1 px-2.5 sm:pr-2.5", className),
       ...props,
@@ -68,7 +75,9 @@ function PaginationNext({ className, label = "Sau", ...props }) {
     }
   );
 }
-function PaginationEllipsis({ className, srLabel = "Th\xEAm trang", ...props }) {
+function PaginationEllipsis({ className, srLabel: srLabelProp, ...props }) {
+  const t = useComitorMessages("pagination");
+  const srLabel = srLabelProp ?? t.ellipsisLabel;
   return /* @__PURE__ */ jsxs(
     "span",
     {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/ui/pagination.tsx"],"sourcesContent":["import { ChevronLeftIcon, ChevronRightIcon, MoreHorizontalIcon } from \"lucide-react\";\nimport type * as React from \"react\";\nimport { cn } from \"../../lib/cn.js\";\nimport { type ButtonProps, buttonVariants } from \"./button.js\";\n\n/**\n * Pagination — primitive tĩnh (không \"use client\", dùng được trong RSC).\n * Đây là bộ khung thẻ `<a>`; bản \"biết đếm trang\" là composite `TablePagination`.\n *\n * Chuỗi hiển thị mặc định tiếng Việt, override qua prop `label` / `srLabel`.\n * Muốn dùng `next/link`: `<PaginationLink asChild>` chưa có ở primitive này —\n * truyền `href` trực tiếp hoặc bọc bằng composite ở tầng app.\n */\n\nexport type PaginationProps = React.ComponentProps<\"nav\">;\nexport type PaginationContentProps = React.ComponentProps<\"ul\">;\nexport type PaginationItemProps = React.ComponentProps<\"li\">;\nexport type PaginationLinkProps = {\n  isActive?: boolean;\n} & Pick<ButtonProps, \"size\"> &\n  React.ComponentProps<\"a\">;\nexport type PaginationPreviousProps = PaginationLinkProps & {\n  /** Nhãn hiển thị (ẩn ở màn hình nhỏ). Mặc định \"Trước\". */\n  label?: React.ReactNode;\n};\nexport type PaginationNextProps = PaginationLinkProps & {\n  /** Nhãn hiển thị (ẩn ở màn hình nhỏ). Mặc định \"Sau\". */\n  label?: React.ReactNode;\n};\nexport type PaginationEllipsisProps = React.ComponentProps<\"span\"> & {\n  /** Nhãn chỉ dành cho trình đọc màn hình. */\n  srLabel?: string;\n};\n\nfunction Pagination({ className, ...props }: PaginationProps) {\n  return (\n    // Thẻ <nav> đã ngầm mang role=\"navigation\" — bản comitor-ds khai lại là thừa, bỏ đi.\n    <nav\n      aria-label=\"Phân trang\"\n      data-slot=\"pagination\"\n      className={cn(\"mx-auto flex w-full justify-center\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction PaginationContent({ className, ...props }: PaginationContentProps) {\n  return <ul data-slot=\"pagination-content\" className={cn(\"flex flex-row items-center gap-1\", className)} {...props} />;\n}\n\nfunction PaginationItem({ ...props }: PaginationItemProps) {\n  return <li data-slot=\"pagination-item\" {...props} />;\n}\n\n/*\n * Trang ĐANG XEM: viền là `border-primary-ink`, không phải `border-gold-300`. Nền `bg-gold-50`\n * chỉ 1,09:1 so với nền trang, nên VIỀN mới là thứ mang tín hiệu \"đang ở trang này\" — ngưỡng\n * 3:1. gold-300 #E8B824 trên nền trắng chỉ **1,86:1** ✗ (dark 10,19:1 nên chỉ light hỏng).\n * `--primary-ink`: 6,51:1 với nền trang · 5,96:1 với chính nền `gold-50` (light); 12,67:1 ·\n * 11,91:1 (dark) ✓. `aria-current=\"page\"` vẫn giữ nguyên cho phần trợ năng phi thị giác.\n */\nfunction PaginationLink({ className, isActive, size = \"icon\", ...props }: PaginationLinkProps) {\n  return (\n    <a\n      aria-current={isActive ? \"page\" : undefined}\n      data-slot=\"pagination-link\"\n      data-active={isActive}\n      className={cn(\n        buttonVariants({ variant: \"ghost\", size }),\n        isActive &&\n          \"border-primary-ink bg-gold-50 font-semibold text-foreground hover:bg-gold-50 dark:bg-gold-500/10 dark:hover:bg-gold-500/10\",\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction PaginationPrevious({ className, label = \"Trước\", ...props }: PaginationPreviousProps) {\n  return (\n    <PaginationLink\n      aria-label=\"Về trang trước\"\n      size=\"default\"\n      className={cn(\"gap-1 px-2.5 sm:pl-2.5\", className)}\n      {...props}\n    >\n      <ChevronLeftIcon />\n      <span className=\"hidden sm:block\">{label}</span>\n    </PaginationLink>\n  );\n}\n\nfunction PaginationNext({ className, label = \"Sau\", ...props }: PaginationNextProps) {\n  return (\n    <PaginationLink\n      aria-label=\"Tới trang sau\"\n      size=\"default\"\n      className={cn(\"gap-1 px-2.5 sm:pr-2.5\", className)}\n      {...props}\n    >\n      <span className=\"hidden sm:block\">{label}</span>\n      <ChevronRightIcon />\n    </PaginationLink>\n  );\n}\n\nfunction PaginationEllipsis({ className, srLabel = \"Thêm trang\", ...props }: PaginationEllipsisProps) {\n  return (\n    <span\n      aria-hidden\n      data-slot=\"pagination-ellipsis\"\n      className={cn(\"flex size-9 items-center justify-center\", className)}\n      {...props}\n    >\n      <MoreHorizontalIcon className=\"size-4\" />\n      <span className=\"sr-only\">{srLabel}</span>\n    </span>\n  );\n}\n\nexport {\n  Pagination,\n  PaginationContent,\n  PaginationEllipsis,\n  PaginationItem,\n  PaginationLink,\n  PaginationNext,\n  PaginationPrevious\n};\n"],"mappings":"AAqCI,cA2CA,YA3CA;AArCJ,SAAS,iBAAiB,kBAAkB,0BAA0B;AAEtE,SAAS,UAAU;AACnB,SAA2B,sBAAsB;AA+BjD,SAAS,WAAW,EAAE,WAAW,GAAG,MAAM,GAAoB;AAC5D;AAAA;AAAA,IAEE;AAAA,MAAC;AAAA;AAAA,QACC,cAAW;AAAA,QACX,aAAU;AAAA,QACV,WAAW,GAAG,sCAAsC,SAAS;AAAA,QAC5D,GAAG;AAAA;AAAA,IACN;AAAA;AAEJ;AAEA,SAAS,kBAAkB,EAAE,WAAW,GAAG,MAAM,GAA2B;AAC1E,SAAO,oBAAC,QAAG,aAAU,sBAAqB,WAAW,GAAG,oCAAoC,SAAS,GAAI,GAAG,OAAO;AACrH;AAEA,SAAS,eAAe,EAAE,GAAG,MAAM,GAAwB;AACzD,SAAO,oBAAC,QAAG,aAAU,mBAAmB,GAAG,OAAO;AACpD;AASA,SAAS,eAAe,EAAE,WAAW,UAAU,OAAO,QAAQ,GAAG,MAAM,GAAwB;AAC7F,SACE;AAAA,IAAC;AAAA;AAAA,MACC,gBAAc,WAAW,SAAS;AAAA,MAClC,aAAU;AAAA,MACV,eAAa;AAAA,MACb,WAAW;AAAA,QACT,eAAe,EAAE,SAAS,SAAS,KAAK,CAAC;AAAA,QACzC,YACE;AAAA,QACF;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ;AAEA,SAAS,mBAAmB,EAAE,WAAW,QAAQ,mBAAS,GAAG,MAAM,GAA4B;AAC7F,SACE;AAAA,IAAC;AAAA;AAAA,MACC,cAAW;AAAA,MACX,MAAK;AAAA,MACL,WAAW,GAAG,0BAA0B,SAAS;AAAA,MAChD,GAAG;AAAA,MAEJ;AAAA,4BAAC,mBAAgB;AAAA,QACjB,oBAAC,UAAK,WAAU,mBAAmB,iBAAM;AAAA;AAAA;AAAA,EAC3C;AAEJ;AAEA,SAAS,eAAe,EAAE,WAAW,QAAQ,OAAO,GAAG,MAAM,GAAwB;AACnF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,cAAW;AAAA,MACX,MAAK;AAAA,MACL,WAAW,GAAG,0BAA0B,SAAS;AAAA,MAChD,GAAG;AAAA,MAEJ;AAAA,4BAAC,UAAK,WAAU,mBAAmB,iBAAM;AAAA,QACzC,oBAAC,oBAAiB;AAAA;AAAA;AAAA,EACpB;AAEJ;AAEA,SAAS,mBAAmB,EAAE,WAAW,UAAU,iBAAc,GAAG,MAAM,GAA4B;AACpG,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAW;AAAA,MACX,aAAU;AAAA,MACV,WAAW,GAAG,2CAA2C,SAAS;AAAA,MACjE,GAAG;AAAA,MAEJ;AAAA,4BAAC,sBAAmB,WAAU,UAAS;AAAA,QACvC,oBAAC,UAAK,WAAU,WAAW,mBAAQ;AAAA;AAAA;AAAA,EACrC;AAEJ;","names":[]}
+{"version":3,"sources":["../../../src/components/ui/pagination.tsx"],"sourcesContent":["\"use client\";\n\nimport { ChevronLeftIcon, ChevronRightIcon, MoreHorizontalIcon } from \"lucide-react\";\nimport type * as React from \"react\";\nimport { useComitorMessages } from \"../../i18n/locale-provider.js\";\nimport { cn } from \"../../lib/cn.js\";\nimport { type ButtonProps, buttonVariants } from \"./button.js\";\n\n/**\n * Pagination — bộ khung thẻ `<a>`; bản \"biết đếm trang\" là composite `TablePagination`.\n *\n * Chuỗi hiển thị theo `ComitorLocaleProvider` (namespace `pagination`, mặc định tiếng Anh);\n * override từng chỗ qua prop `label` / `srLabel` / `aria-label`.\n *\n * `\"use client\"` từ `3.0.0`: chữ và tên cho trình đọc màn hình đọc từ provider, mà context chỉ\n * đọc được ở client. Trước đó file này tĩnh và ghim cứng tiếng Việt. Không prop nào là\n * hàm/component nên Server Component vẫn render được nó.\n * Muốn dùng `next/link`: `<PaginationLink asChild>` chưa có ở primitive này —\n * truyền `href` trực tiếp hoặc bọc bằng composite ở tầng app.\n */\n\nexport type PaginationProps = React.ComponentProps<\"nav\">;\nexport type PaginationContentProps = React.ComponentProps<\"ul\">;\nexport type PaginationItemProps = React.ComponentProps<\"li\">;\nexport type PaginationLinkProps = {\n  isActive?: boolean;\n} & Pick<ButtonProps, \"size\"> &\n  React.ComponentProps<\"a\">;\nexport type PaginationPreviousProps = PaginationLinkProps & {\n  /** Nhãn hiển thị (ẩn ở màn hình nhỏ). Mặc định: khoá `previousLabel` của namespace `pagination`. */\n  label?: React.ReactNode;\n};\nexport type PaginationNextProps = PaginationLinkProps & {\n  /** Nhãn hiển thị (ẩn ở màn hình nhỏ). Mặc định: khoá `nextLabel` của namespace `pagination`. */\n  label?: React.ReactNode;\n};\nexport type PaginationEllipsisProps = React.ComponentProps<\"span\"> & {\n  /** Nhãn chỉ dành cho trình đọc màn hình. Mặc định: khoá `ellipsisLabel` của namespace `pagination`. */\n  srLabel?: string;\n};\n\nfunction Pagination({ className, ...props }: PaginationProps) {\n  const t = useComitorMessages(\"pagination\");\n  return (\n    // Thẻ <nav> đã ngầm mang role=\"navigation\" — bản comitor-ds khai lại là thừa, bỏ đi.\n    <nav\n      aria-label={t.navLabel}\n      data-slot=\"pagination\"\n      className={cn(\"mx-auto flex w-full justify-center\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction PaginationContent({ className, ...props }: PaginationContentProps) {\n  return <ul data-slot=\"pagination-content\" className={cn(\"flex flex-row items-center gap-1\", className)} {...props} />;\n}\n\nfunction PaginationItem({ ...props }: PaginationItemProps) {\n  return <li data-slot=\"pagination-item\" {...props} />;\n}\n\n/*\n * Trang ĐANG XEM: viền là `border-primary-ink`, không phải `border-gold-300`. Nền `bg-gold-50`\n * chỉ 1,09:1 so với nền trang, nên VIỀN mới là thứ mang tín hiệu \"đang ở trang này\" — ngưỡng\n * 3:1. gold-300 #E8B824 trên nền trắng chỉ **1,86:1** ✗ (dark 10,19:1 nên chỉ light hỏng).\n * `--primary-ink`: 6,51:1 với nền trang · 5,96:1 với chính nền `gold-50` (light); 12,67:1 ·\n * 11,91:1 (dark) ✓. `aria-current=\"page\"` vẫn giữ nguyên cho phần trợ năng phi thị giác.\n */\nfunction PaginationLink({ className, isActive, size = \"icon\", ...props }: PaginationLinkProps) {\n  return (\n    <a\n      aria-current={isActive ? \"page\" : undefined}\n      data-slot=\"pagination-link\"\n      data-active={isActive}\n      className={cn(\n        buttonVariants({ variant: \"ghost\", size }),\n        isActive &&\n          \"border-primary-ink bg-gold-50 font-semibold text-foreground hover:bg-gold-50 dark:bg-gold-500/10 dark:hover:bg-gold-500/10\",\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction PaginationPrevious({ className, label: labelProp, ...props }: PaginationPreviousProps) {\n  const t = useComitorMessages(\"pagination\");\n  // `=== undefined` chứ không `??`: `label` là ReactNode, `null` vẫn nghĩa là \"không hiện chữ\".\n  const label = labelProp === undefined ? t.previousLabel : labelProp;\n  return (\n    <PaginationLink\n      aria-label={t.previousAriaLabel}\n      size=\"default\"\n      className={cn(\"gap-1 px-2.5 sm:pl-2.5\", className)}\n      {...props}\n    >\n      <ChevronLeftIcon />\n      <span className=\"hidden sm:block\">{label}</span>\n    </PaginationLink>\n  );\n}\n\nfunction PaginationNext({ className, label: labelProp, ...props }: PaginationNextProps) {\n  const t = useComitorMessages(\"pagination\");\n  const label = labelProp === undefined ? t.nextLabel : labelProp;\n  return (\n    <PaginationLink\n      aria-label={t.nextAriaLabel}\n      size=\"default\"\n      className={cn(\"gap-1 px-2.5 sm:pr-2.5\", className)}\n      {...props}\n    >\n      <span className=\"hidden sm:block\">{label}</span>\n      <ChevronRightIcon />\n    </PaginationLink>\n  );\n}\n\nfunction PaginationEllipsis({ className, srLabel: srLabelProp, ...props }: PaginationEllipsisProps) {\n  const t = useComitorMessages(\"pagination\");\n  const srLabel = srLabelProp ?? t.ellipsisLabel;\n  return (\n    <span\n      aria-hidden\n      data-slot=\"pagination-ellipsis\"\n      className={cn(\"flex size-9 items-center justify-center\", className)}\n      {...props}\n    >\n      <MoreHorizontalIcon className=\"size-4\" />\n      <span className=\"sr-only\">{srLabel}</span>\n    </span>\n  );\n}\n\nexport {\n  Pagination,\n  PaginationContent,\n  PaginationEllipsis,\n  PaginationItem,\n  PaginationLink,\n  PaginationNext,\n  PaginationPrevious\n};\n"],"mappings":";AA6CI,cA8CA,YA9CA;AA3CJ,SAAS,iBAAiB,kBAAkB,0BAA0B;AAEtE,SAAS,0BAA0B;AACnC,SAAS,UAAU;AACnB,SAA2B,sBAAsB;AAmCjD,SAAS,WAAW,EAAE,WAAW,GAAG,MAAM,GAAoB;AAC5D,QAAM,IAAI,mBAAmB,YAAY;AACzC;AAAA;AAAA,IAEE;AAAA,MAAC;AAAA;AAAA,QACC,cAAY,EAAE;AAAA,QACd,aAAU;AAAA,QACV,WAAW,GAAG,sCAAsC,SAAS;AAAA,QAC5D,GAAG;AAAA;AAAA,IACN;AAAA;AAEJ;AAEA,SAAS,kBAAkB,EAAE,WAAW,GAAG,MAAM,GAA2B;AAC1E,SAAO,oBAAC,QAAG,aAAU,sBAAqB,WAAW,GAAG,oCAAoC,SAAS,GAAI,GAAG,OAAO;AACrH;AAEA,SAAS,eAAe,EAAE,GAAG,MAAM,GAAwB;AACzD,SAAO,oBAAC,QAAG,aAAU,mBAAmB,GAAG,OAAO;AACpD;AASA,SAAS,eAAe,EAAE,WAAW,UAAU,OAAO,QAAQ,GAAG,MAAM,GAAwB;AAC7F,SACE;AAAA,IAAC;AAAA;AAAA,MACC,gBAAc,WAAW,SAAS;AAAA,MAClC,aAAU;AAAA,MACV,eAAa;AAAA,MACb,WAAW;AAAA,QACT,eAAe,EAAE,SAAS,SAAS,KAAK,CAAC;AAAA,QACzC,YACE;AAAA,QACF;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ;AAEA,SAAS,mBAAmB,EAAE,WAAW,OAAO,WAAW,GAAG,MAAM,GAA4B;AAC9F,QAAM,IAAI,mBAAmB,YAAY;AAEzC,QAAM,QAAQ,cAAc,SAAY,EAAE,gBAAgB;AAC1D,SACE;AAAA,IAAC;AAAA;AAAA,MACC,cAAY,EAAE;AAAA,MACd,MAAK;AAAA,MACL,WAAW,GAAG,0BAA0B,SAAS;AAAA,MAChD,GAAG;AAAA,MAEJ;AAAA,4BAAC,mBAAgB;AAAA,QACjB,oBAAC,UAAK,WAAU,mBAAmB,iBAAM;AAAA;AAAA;AAAA,EAC3C;AAEJ;AAEA,SAAS,eAAe,EAAE,WAAW,OAAO,WAAW,GAAG,MAAM,GAAwB;AACtF,QAAM,IAAI,mBAAmB,YAAY;AACzC,QAAM,QAAQ,cAAc,SAAY,EAAE,YAAY;AACtD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,cAAY,EAAE;AAAA,MACd,MAAK;AAAA,MACL,WAAW,GAAG,0BAA0B,SAAS;AAAA,MAChD,GAAG;AAAA,MAEJ;AAAA,4BAAC,UAAK,WAAU,mBAAmB,iBAAM;AAAA,QACzC,oBAAC,oBAAiB;AAAA;AAAA;AAAA,EACpB;AAEJ;AAEA,SAAS,mBAAmB,EAAE,WAAW,SAAS,aAAa,GAAG,MAAM,GAA4B;AAClG,QAAM,IAAI,mBAAmB,YAAY;AACzC,QAAM,UAAU,eAAe,EAAE;AACjC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAW;AAAA,MACX,aAAU;AAAA,MACV,WAAW,GAAG,2CAA2C,SAAS;AAAA,MACjE,GAAG;AAAA,MAEJ;AAAA,4BAAC,sBAAmB,WAAU,UAAS;AAAA,QACvC,oBAAC,UAAK,WAAU,WAAW,mBAAQ;AAAA;AAAA;AAAA,EACrC;AAEJ;","names":[]}

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

@@ -20,7 +20,7 @@
 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"`. */
+    /** Tên hiển thị trong danh sách và trong nhãn của nút chọn — `"Vietnam"` (theo `locale`). */
     name: string;
     /** Mã quay số quốc tế, có dấu `+` — `"+84"`. */
     dialCode: string;
@@ -28,11 +28,12 @@ interface PhoneInputCountry {
     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.
+ * Chuỗi hiển thị của `PhoneInput` (kể cả chuỗi chỉ dành cho trình đọc màn hình). Theo
+ * `ComitorLocaleProvider` (mặc định tiếng Anh, bảng tiếng Việt dựng sẵn); override từng khoá qua
+ * prop `labels`.
  *
- * ⚠ 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`).
+ * Tên quốc gia KHÔNG nằm ở đây — `Intl.DisplayNames` gọi theo `locale` (prop `locale` của
+ * `PhoneInput`, không truyền thì `locale` của provider).
  */
 interface PhoneInputLabels {
     /**
@@ -47,8 +48,18 @@ interface PhoneInputLabels {
     searchPlaceholder: string;
     /** Dòng báo khi không quốc gia nào khớp từ khoá. */
     empty: string;
+    /**
+     * Placeholder của ô nhập số. Prop `placeholder` rời (tên của thượng nguồn — trên `PhoneInput`,
+     * hoặc trên chính `PhoneInputField`) thắng khoá này nếu có. Thêm ở `3.0.0`: trước đó placeholder
+     * chỉ là mặc định viết thẳng trong component.
+     */
+    placeholder: string;
 }
-/** Nhãn tiếng Việt mặc định — mọi khoá đều override được qua prop `labels`. */
+/**
+ * Nhãn TIẾNG ANH mặc định (từ `3.0.0`; trước đó là tiếng Việt). Bảng tiếng Việt:
+ * `comitorMessagesVi.phoneInput`. Component không đọc thẳng hằng này — nó đọc bảng của
+ * `ComitorLocaleProvider`; hằng ở đây để app trải ra khi tự dựng nhãn.
+ */
 declare const DEFAULT_PHONE_INPUT_LABELS: PhoneInputLabels;
 
 export { DEFAULT_PHONE_INPUT_LABELS, type PhoneInputCountry, type PhoneInputLabels };

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

@@ -1,8 +1,5 @@
-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."
-};
+import { phoneInputEn } from "../../i18n/namespaces/phone-input.js";
+const DEFAULT_PHONE_INPUT_LABELS = { ...phoneInputEn };
 export {
   DEFAULT_PHONE_INPUT_LABELS
 };

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

@@ -1 +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":[]}
+{"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\nimport { phoneInputEn } from \"../../i18n/namespaces/phone-input.js\";\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 — `\"Vietnam\"` (theo `locale`). */\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). Theo\n * `ComitorLocaleProvider` (mặc định tiếng Anh, bảng tiếng Việt dựng sẵn); override từng khoá qua\n * prop `labels`.\n *\n * Tên quốc gia KHÔNG nằm ở đây — `Intl.DisplayNames` gọi theo `locale` (prop `locale` của\n * `PhoneInput`, không truyền thì `locale` của provider).\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   * Placeholder của ô nhập số. Prop `placeholder` rời (tên của thượng nguồn — trên `PhoneInput`,\n   * hoặc trên chính `PhoneInputField`) thắng khoá này nếu có. Thêm ở `3.0.0`: trước đó placeholder\n   * chỉ là mặc định viết thẳng trong component.\n   */\n  placeholder: string;\n}\n\n/**\n * Nhãn TIẾNG ANH mặc định (từ `3.0.0`; trước đó là tiếng Việt). Bảng tiếng Việt:\n * `comitorMessagesVi.phoneInput`. Component không đọc thẳng hằng này — nó đọc bảng của\n * `ComitorLocaleProvider`; hằng ở đây để app trải ra khi tự dựng nhãn.\n */\nexport const DEFAULT_PHONE_INPUT_LABELS: PhoneInputLabels = { ...phoneInputEn };\n"],"mappings":"AAYA,SAAS,oBAAoB;AAuDtB,MAAM,6BAA+C,EAAE,GAAG,aAAa;","names":[]}

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

@@ -26,11 +26,11 @@ declare function useStore<T>(selector: (state: StoreState) => T, ogStore?: Store
  * (`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õ
+ * - **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.
- *   Gõ `0912 345 678` → ô hiện `0912 345 678`, `onValueChange("+84912345678")`.
+ *   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 …`).
  * - **Số quốc tế** — chuỗi bắt đầu bằng `+` (như thượng nguồn): ô hiện tách nhóm
@@ -38,9 +38,10 @@ declare function useStore<T>(selector: (state: StoreState) => T, ogStore?: Store
  *   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.
+ * đượ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ốc là `role="group"` chưa có tên: đặt `aria-label` (vd "Số điện thoại") hoặc `aria-labelledby`
+ * Gốc là `role="group"` chưa có tên: đặt `aria-label` (vd "Phone number") hoặc `aria-labelledby`
  * cho chính `PhoneInput`.
  */
 interface PhoneInputProps extends React.ComponentProps<"div"> {
@@ -48,25 +49,31 @@ interface PhoneInputProps extends React.ComponentProps<"div"> {
     value?: string;
     onValueChange?: (value: string) => void;
     /**
-     * Quốc gia ban đầu (mã ISO alpha-2, viết HOA). Mặc định `"VN"`.
+     * Quốc gia ban đầu (mã ISO alpha-2, viết HOA). Mặc định: KHÔNG CÓ, như thượng nguồn — nước là
+     * thiết lập VÙNG, không suy từ ngôn ngữ; app Comitor truyền từ cài đặt workspace.
      *
-     * ⚠ Khác thượng nguồn: thượng nguồn để trống. Truyền `""` để quay về hành vi đó.
+     * ⚠ Không có quốc gia thì chế độ số NỘI ĐỊA tắt (xem JSDoc của `PhoneInput`). Trước `3.0.0`
+     * mặc định cứng là `"VN"`.
      */
     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 ô nhập số — thắng khoá `labels.placeholder` (namespace `phoneInput`). */
     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ừ đó).
+     * Locale BCP 47 để gọi tên quốc gia (`Intl.DisplayNames`) và sắp xếp danh sách. Không truyền thì
+     * theo `locale` của `ComitorLocaleProvider` (không có provider → `"en"`; trước `3.0.0` mặc định
+     * cứng là `"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á. */
+    /**
+     * Chuỗi hiển thị/đọc màn hình (phần chọn quốc gia + placeholder ô số) — override từng khoá. Không
+     * truyền thì theo namespace `phoneInput` của `ComitorLocaleProvider` (mặc định tiếng Anh).
+     */
     labels?: Partial<PhoneInputLabels>;
     asChild?: boolean;
     disabled?: boolean;

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

@@ -4,6 +4,7 @@ import { Slot } from "@radix-ui/react-slot";
 import { defaultFilter } from "cmdk";
 import { Check, ChevronDown, Globe } from "lucide-react";
 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 { useAsRef } from "../../lib/use-as-ref.js";
@@ -12,15 +13,10 @@ import { useLazyRef } from "../../lib/use-lazy-ref.js";
 import { VisuallyHiddenInput } from "../../lib/visually-hidden-input.js";
 import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "./command.js";
 import { Input } from "./input.js";
-import {
-  DEFAULT_PHONE_INPUT_LABELS
-} from "./phone-input-constants.js";
 import { Popover, PopoverContent, PopoverTrigger } from "./popover.js";
 const ROOT_NAME = "PhoneInput";
 const COUNTRY_SELECT_NAME = "PhoneInputCountrySelect";
 const FIELD_NAME = "PhoneInputField";
-const DEFAULT_COUNTRY = "VN";
-const DEFAULT_DISPLAY_LOCALE = "vi";
 const COUNTRY_DATA = [
   ["af", "93"],
   ["ax", "358"],
@@ -273,7 +269,7 @@ function getFlagEmoji(countryCode) {
   const codePoints = countryCode.toUpperCase().split("").map((char) => 127397 + char.charCodeAt(0));
   return String.fromCodePoint(...codePoints);
 }
-function getCountries(locale = DEFAULT_DISPLAY_LOCALE) {
+function getCountries(locale) {
   let regionNames;
   let collator;
   try {
@@ -396,14 +392,14 @@ function PhoneInput(props) {
   const {
     value: valueProp,
     defaultValue,
-    defaultCountry = DEFAULT_COUNTRY,
+    defaultCountry,
     country: countryProp,
     onValueChange,
     onCountryChange,
     countries: countriesProp,
     name,
-    placeholder = "Nh\u1EADp s\u1ED1 \u0111i\u1EC7n tho\u1EA1i",
-    locale = DEFAULT_DISPLAY_LOCALE,
+    placeholder: placeholderProp,
+    locale: localeProp,
     labels: labelsProp,
     asChild,
     disabled,
@@ -416,11 +412,14 @@ function PhoneInput(props) {
     ref,
     ...rootProps
   } = props;
+  const { locale: providerLocale } = useComitorLocale();
+  const locale = localeProp ?? providerLocale;
+  const labels = useComitorLabels("phoneInput", labelsProp);
+  const placeholder = placeholderProp ?? labels.placeholder;
   const instanceId = React.useId();
   const rootId = id ?? instanceId;
   const inputRef = React.useRef(null);
   const countries = React.useMemo(() => countriesProp ?? getCountries(locale), [countriesProp, locale]);
-  const labels = React.useMemo(() => ({ ...DEFAULT_PHONE_INPUT_LABELS, ...labelsProp }), [labelsProp]);
   const [formTrigger, setFormTrigger] = React.useState(null);
   const composedRef = useComposedRefs(ref, (node) => setFormTrigger(node));
   const isFormControl = formTrigger ? !!formTrigger.closest("form") : true;
@@ -578,7 +577,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);
@@ -587,10 +586,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(
@@ -598,6 +598,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(
           /*