@mediaradar/design-components 0.16.2 → 0.18.0

package/dist/index.cjs

@@ -65,6 +65,7 @@ __export(index_exports, {
   Tooltip: () => Tooltip,
   WorkspaceAvatar: () => WorkspaceAvatar,
   WorkspaceSelectedCard: () => WorkspaceSelectedCard,
+  ariaSortFor: () => ariaSortFor,
   buttonVariants: () => buttonVariants,
   chipTriggerClass: () => chipTriggerClass,
   cycleSort: () => cycleSort,
@@ -1561,7 +1562,7 @@ function SelectFilter({
 // src/Card.tsx
 var import_react8 = require("react");
 var import_jsx_runtime12 = require("react/jsx-runtime");
-var Card = (0, import_react8.forwardRef)(function Card2({ staticCard, title, subtitle, action, className, children, ...rest }, ref) {
+var Card = (0, import_react8.forwardRef)(function Card2({ staticCard, title, titleAs: TitleTag = "h3", subtitle, action, className, children, ...rest }, ref) {
   return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
     "article",
     {
@@ -1576,8 +1577,8 @@ var Card = (0, import_react8.forwardRef)(function Card2({ staticCard, title, sub
       children: title ? /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex flex-1 flex-col p-card-padding", children: [
         /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex items-start justify-between gap-2", children: [
           /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("h3", { className: "text-[15px] font-semibold leading-snug text-text-primary", children: title }),
-            subtitle && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "mt-0.5 text-[12px] leading-snug text-text-tertiary", children: subtitle })
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(TitleTag, { className: "text-style-card-title", children: title }),
+            subtitle && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "mt-0.5 text-xs leading-snug text-text-tertiary", children: subtitle })
           ] }),
           action && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "shrink-0 text-text-tertiary", children: action })
         ] }),
@@ -3099,7 +3100,22 @@ function Chip({
 // src/SortButton.tsx
 var import_lucide_react18 = require("lucide-react");
 var import_jsx_runtime31 = require("react/jsx-runtime");
-function SortButton({ label, sortKey, sort, onSort, disabled = false }) {
+var ALIGN = {
+  left: "justify-start text-left",
+  center: "justify-center text-center",
+  right: "justify-end text-right"
+};
+function SortButton({
+  label,
+  sortKey,
+  sort,
+  onSort,
+  disabled = false,
+  sortable = true,
+  align = "left",
+  testIdPrefix
+}) {
+  if (!sortable) return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: cn("inline-flex", ALIGN[align]), children: label });
   const active = !disabled && sort.key === sortKey;
   return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
     "button",
@@ -3107,9 +3123,9 @@ function SortButton({ label, sortKey, sort, onSort, disabled = false }) {
       type: "button",
       disabled,
       onClick: () => onSort(sortKey),
-      "aria-sort": active ? sort.dir === "asc" ? "ascending" : "descending" : "none",
+      "data-testid": testIdPrefix && `${testIdPrefix}-sort-${sortKey}`,
       className: cn(
-        // text-left overrides the UA default on <button>, which would centre a
+        // ALIGN's text-* overrides the UA default on <button>, which would centre a
         // label that wraps onto two lines, out of step with the column under it.
         // `uppercase` is NOT this control imposing a treatment -- it is
         // restoring one. Every table header row sets uppercase on the <tr>,
@@ -3124,15 +3140,17 @@ function SortButton({ label, sortKey, sort, onSort, disabled = false }) {
         // subtly tighter than the fixed headers next to them. A control
         // should carry exactly the properties that do not inherit, and
         // nothing more.
-        "group inline-flex items-center gap-1 text-left uppercase transition-colors",
+        "group inline-flex items-center gap-1 uppercase transition-colors",
+        ALIGN[align],
         !disabled && "hover:text-text-primary"
       ),
       children: [
         label,
-        !disabled && (active ? sort.dir === "asc" ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_lucide_react18.ArrowUp, { size: 12, className: "shrink-0 text-brand-primaryAction" }) : /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_lucide_react18.ArrowDown, { size: 12, className: "shrink-0 text-brand-primaryAction" }) : /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+        !disabled && (active ? sort.dir === "asc" ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_lucide_react18.ArrowUp, { size: 12, "aria-hidden": "true", className: "shrink-0 text-brand-primaryAction" }) : /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_lucide_react18.ArrowDown, { size: 12, "aria-hidden": "true", className: "shrink-0 text-brand-primaryAction" }) : /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
           import_lucide_react18.ArrowUpDown,
           {
             size: 12,
+            "aria-hidden": "true",
             className: "shrink-0 text-text-tertiary opacity-50 transition-opacity group-hover:opacity-100"
           }
         ))
@@ -3150,6 +3168,10 @@ function cycleSort(current, key, firstDir = "desc") {
 function sortProp(sort) {
   return sort ?? { key: null, dir: "desc" };
 }
+function ariaSortFor(sort, key) {
+  if (!sort || sort.key !== key) return void 0;
+  return sort.dir === "asc" ? "ascending" : "descending";
+}
 
 // src/Pager.tsx
 var import_lucide_react19 = require("lucide-react");
@@ -3273,7 +3295,8 @@ function TablePagination({
   onPerPageChange,
   perPageOptions = [25, 50, 100],
   itemLabel = "results",
-  className
+  className,
+  testIdPrefix
 }) {
   const totalPages = Math.max(1, Math.ceil(totalItems / perPage));
   const current = Math.min(page, totalPages);
@@ -3284,7 +3307,7 @@ function TablePagination({
     btn,
     "text-text-secondary hover:bg-subtle hover:text-text-primary disabled:pointer-events-none disabled:opacity-30"
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: cn("flex flex-wrap items-center justify-between gap-x-4 gap-y-2", className), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: cn("flex flex-wrap items-center justify-between gap-x-4 gap-y-2", className), "data-testid": testIdPrefix, children: [
     /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("label", { className: "flex items-center gap-2 text-[13px] text-text-secondary", children: [
       /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("span", { className: "relative", children: [
         /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
@@ -3293,6 +3316,7 @@ function TablePagination({
             value: perPage,
             onChange: (e) => onPerPageChange(Number(e.target.value)),
             "aria-label": "Items per page",
+            "data-testid": testIdPrefix && `${testIdPrefix}-per-page`,
             className: "appearance-none rounded-control border border-border-default bg-input py-1 pl-2.5 pr-7 text-[13px] font-medium text-text-primary focus:outline focus:outline-2 focus:outline-border-focus",
             children: perPageOptions.map((n) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("option", { value: n, children: n }, n))
           }
@@ -3316,6 +3340,7 @@ function TablePagination({
           onClick: () => onPageChange(1),
           disabled: current === 1,
           "aria-label": "First page",
+          "data-testid": testIdPrefix && `${testIdPrefix}-first`,
           className: stepBtn,
           children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_lucide_react20.ChevronFirst, { size: 16, "aria-hidden": "true" })
         }
@@ -3327,6 +3352,7 @@ function TablePagination({
           onClick: () => onPageChange(current - 1),
           disabled: current === 1,
           "aria-label": "Previous page",
+          "data-testid": testIdPrefix && `${testIdPrefix}-prev`,
           className: stepBtn,
           children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_lucide_react20.ChevronLeft, { size: 16, "aria-hidden": "true" })
         }
@@ -3336,6 +3362,7 @@ function TablePagination({
           "button",
           {
             type: "button",
+            "data-testid": testIdPrefix && `${testIdPrefix}-page-${p}`,
             onClick: () => onPageChange(p),
             "aria-current": p === current ? "page" : void 0,
             className: cn(
@@ -3354,6 +3381,7 @@ function TablePagination({
           onClick: () => onPageChange(current + 1),
           disabled: current === totalPages,
           "aria-label": "Next page",
+          "data-testid": testIdPrefix && `${testIdPrefix}-next`,
           className: stepBtn,
           children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_lucide_react20.ChevronRight, { size: 16, "aria-hidden": "true" })
         }
@@ -3365,6 +3393,7 @@ function TablePagination({
           onClick: () => onPageChange(totalPages),
           disabled: current === totalPages,
           "aria-label": "Last page",
+          "data-testid": testIdPrefix && `${testIdPrefix}-last`,
           className: stepBtn,
           children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_lucide_react20.ChevronLast, { size: 16, "aria-hidden": "true" })
         }
@@ -3806,7 +3835,7 @@ var SIZES2 = {
   sm: { track: "h-5 w-9", knob: "h-4 w-4", on: "translate-x-[18px]" },
   md: { track: "h-6 w-11", knob: "h-5 w-5", on: "translate-x-[22px]" }
 };
-function Toggle({ checked, onChange, label, size = "md", disabled, className }) {
+function Toggle({ checked, onChange, label, size = "md", disabled, className, testIdPrefix }) {
   const s = SIZES2[size];
   return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
     "button",
@@ -3816,6 +3845,7 @@ function Toggle({ checked, onChange, label, size = "md", disabled, className })
       "aria-checked": checked,
       "aria-label": label,
       disabled,
+      "data-testid": testIdPrefix && `${testIdPrefix}-toggle`,
       onClick: () => onChange(!checked),
       className: cn(
         "relative inline-flex shrink-0 items-center rounded-full transition-colors focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-border-focus",
@@ -3922,6 +3952,7 @@ function Freshness({ level }) {
   Tooltip,
   WorkspaceAvatar,
   WorkspaceSelectedCard,
+  ariaSortFor,
   buttonVariants,
   chipTriggerClass,
   cycleSort,