@fanvue/ui 2.18.0 → 2.19.0

package/dist/cjs/components/Table/Table.cjs

@@ -4,6 +4,8 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const cn = require("../../utils/cn.cjs");
+const ArrowDownIcon = require("../Icons/ArrowDownIcon.cjs");
+const ArrowUpIcon = require("../Icons/ArrowUpIcon.cjs");
 const Select = require("../Select/Select.cjs");
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
@@ -33,7 +35,7 @@ const TableCard = React__namespace.forwardRef(
       {
         ref,
         className: cn.cn(
-          "isolate flex flex-col gap-4 overflow-hidden rounded-md bg-bg-primary pb-4",
+          "isolate flex flex-col gap-2 overflow-hidden rounded-3xl border border-border-strong px-3 py-1",
           className
         ),
         ...props
@@ -48,10 +50,7 @@ const TableToolbar = React__namespace.forwardRef(
       "div",
       {
         ref,
-        className: cn.cn(
-          "flex flex-wrap items-center gap-4 rounded-t-md bg-bg-primary px-6",
-          className
-        ),
+        className: cn.cn("flex flex-wrap items-center gap-4 px-4 py-3", className),
         ...props
       }
     );
@@ -59,16 +58,12 @@ const TableToolbar = React__namespace.forwardRef(
 );
 TableToolbar.displayName = "TableToolbar";
 const TableScrollArea = React__namespace.forwardRef(
-  ({ className, roundTop = true, children, ...props }, ref) => {
+  ({ className, children, roundTop: _roundTop, ...props }, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
         ref,
-        className: cn.cn(
-          "relative w-full min-w-0 overflow-hidden",
-          roundTop && "rounded-t-md",
-          className
-        ),
+        className: cn.cn("relative w-full min-w-0 overflow-hidden", className),
         ...props,
         children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-x-auto", children })
       }
@@ -94,23 +89,13 @@ const Table = React__namespace.forwardRef(
 Table.displayName = "Table";
 const TableHeader = React__namespace.forwardRef(
   ({ className, ...props }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      "thead",
-      {
-        ref,
-        className: cn.cn(
-          "[&_tr:first-child_th:first-child]:rounded-tl-md [&_tr:first-child_th:last-child]:rounded-tr-md",
-          className
-        ),
-        ...props
-      }
-    );
+    return /* @__PURE__ */ jsxRuntime.jsx("thead", { ref, className: cn.cn(className), ...props });
   }
 );
 TableHeader.displayName = "TableHeader";
 const TableBody = React__namespace.forwardRef(
   ({ className, ...props }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx("tbody", { ref, className: cn.cn(className), ...props });
+    return /* @__PURE__ */ jsxRuntime.jsx("tbody", { ref, className: cn.cn("[&_tr:last-child_td]:border-b-0", className), ...props });
   }
 );
 TableBody.displayName = "TableBody";
@@ -128,7 +113,7 @@ const TableRow = React__namespace.forwardRef(
 TableRow.displayName = "TableRow";
 const HEAD_INTENT_CLASSES = {
   default: "text-left",
-  checkbox: "w-8 min-w-8 max-w-8 text-center",
+  checkbox: "w-12 min-w-12 max-w-12 text-center",
   sort: "text-right",
   leading: "min-w-0 w-2/5 text-left"
 };
@@ -140,7 +125,7 @@ const TableHead = React__namespace.forwardRef(
         ref,
         scope,
         className: cn.cn(
-          "typography-semibold-body-sm box-border h-8 min-h-8 bg-surface-secondary px-2 py-2 align-middle text-content-primary",
+          "typography-semibold-body-sm box-border min-h-12 border-b border-border-primary px-4 py-3 align-middle text-content-tertiary",
           HEAD_INTENT_CLASSES[intent],
           className
         ),
@@ -151,17 +136,18 @@ const TableHead = React__namespace.forwardRef(
 );
 TableHead.displayName = "TableHead";
 const CELL_MIN_HEIGHT = {
-  md: "min-h-[60px]",
-  lg: "min-h-[80px]"
+  md: "h-16 min-h-16",
+  default: "h-16 min-h-16",
+  lg: "h-20 min-h-20"
 };
 const CELL_VARIANT_CLASSES = {
-  default: "border-border-primary border-b px-2 py-2",
-  chip: "border-border-primary border-b px-2 py-2",
-  pillProgress: "border-border-primary border-b px-4 py-2"
+  default: "border-b border-border-primary px-4 py-3",
+  chip: "border-b border-border-primary px-4 py-3",
+  pillProgress: "border-b border-border-primary px-4 py-3"
 };
 const CELL_INTENT_CLASSES = {
   default: "",
-  checkbox: "text-center",
+  checkbox: "w-12 min-w-12 max-w-12 text-center",
   stacked: "align-top",
   multiline: "max-w-[240px]",
   sideLabel: ""
@@ -169,7 +155,7 @@ const CELL_INTENT_CLASSES = {
 const TableCell = React__namespace.forwardRef(
   ({ className, cellVariant = "default", intent = "default", ...props }, ref) => {
     const size = useTableSize();
-    const typo = intent === "sideLabel" ? "typography-semibold-body-md" : "typography-regular-body-md";
+    const typo = intent === "sideLabel" ? "typography-semibold-body-sm" : "typography-regular-body-sm";
     return /* @__PURE__ */ jsxRuntime.jsx(
       "td",
       {
@@ -190,14 +176,32 @@ const TableCell = React__namespace.forwardRef(
 TableCell.displayName = "TableCell";
 const TableCellGroup = React__namespace.forwardRef(
   ({ className, ...props }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn.cn("flex items-center gap-2.5", className), ...props });
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn.cn("flex items-center gap-1", className), ...props });
   }
 );
 TableCellGroup.displayName = "TableCellGroup";
+function TableCellContent({
+  primary,
+  secondary,
+  primaryAdornment,
+  secondaryAdornment,
+  className
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn.cn("flex flex-col gap-0.5", className), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "typography-semibold-body-sm text-content-primary", children: primary }),
+      primaryAdornment
+    ] }),
+    (secondary != null || secondaryAdornment != null) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
+      secondary != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "typography-regular-body-sm text-content-secondary", children: secondary }),
+      secondaryAdornment
+    ] })
+  ] });
+}
+TableCellContent.displayName = "TableCellContent";
 const TableMediaThumbnail = React__namespace.forwardRef(
   ({ className, src, alt = "", blurred, align = "start", ...props }, ref) => {
-    const tableSize = useTableSize();
-    const frame = tableSize === "lg" ? "h-[62px] w-11 overflow-hidden rounded-xs bg-neutral-alphas-200" : "h-10 w-[29px] overflow-hidden rounded-xs bg-neutral-alphas-200";
+    const frame = "size-12 overflow-hidden rounded-sm bg-neutral-alphas-200";
     return /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
@@ -261,26 +265,41 @@ const TablePillProgressLayout = React__namespace.forwardRef(({ className, ...pro
     "div",
     {
       ref,
-      className: cn.cn("flex min-w-[120px] flex-col items-center gap-3", className),
+      className: cn.cn("flex min-w-[120px] flex-col items-start gap-2", className),
       ...props
     }
   );
 });
 TablePillProgressLayout.displayName = "TablePillProgressLayout";
 const TableSortLabel = React__namespace.forwardRef(
-  ({ className, children, ...props }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsxs("span", { ref, className: cn.cn("inline-flex items-center gap-2.5", className), ...props, children: [
-      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "typography-semibold-body-sm", children }),
-      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-content-secondary", "aria-hidden": true, children: "↕" })
-    ] });
+  ({ className, children, direction = null, ...props }, ref) => {
+    const Icon = direction === "desc" ? ArrowDownIcon.ArrowDownIcon : ArrowUpIcon.ArrowUpIcon;
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "span",
+      {
+        ref,
+        className: cn.cn("inline-flex items-center gap-1 text-content-primary", className),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              className: cn.cn(
+                "typography-semibold-body-sm",
+                direction != null && "border-b border-content-primary pb-px"
+              ),
+              children
+            }
+          ),
+          direction != null && /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "size-4 shrink-0", "aria-hidden": true })
+        ]
+      }
+    );
   }
 );
 TableSortLabel.displayName = "TableSortLabel";
 function TableStackedText({ title, subtitle }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "typography-semibold-body-md", children: title }),
-    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "typography-regular-body-sm text-content-secondary", children: subtitle })
-  ] });
+  return /* @__PURE__ */ jsxRuntime.jsx(TableCellContent, { primary: title, secondary: subtitle });
 }
 TableStackedText.displayName = "TableStackedText";
 const TableLineClamp = React__namespace.forwardRef(
@@ -309,7 +328,7 @@ function TableRowsPerPageSelect(props) {
       defaultValue: "10",
       size: "32",
       "aria-label": ariaLabel,
-      className: "w-[154px] [&_button]:rounded-xs [&_button]:border-transparent [&_button]:bg-transparent",
+      className: "w-[154px] [&_button]:rounded-sm [&_button]:border-transparent [&_button]:bg-surface-inputs",
       id,
       children: /* @__PURE__ */ jsxRuntime.jsxs(Select.SelectContent, { children: [
         /* @__PURE__ */ jsxRuntime.jsx(Select.SelectItem, { value: "10", children: "10 rows per page" }),
@@ -323,6 +342,7 @@ exports.Table = Table;
 exports.TableBody = TableBody;
 exports.TableCard = TableCard;
 exports.TableCell = TableCell;
+exports.TableCellContent = TableCellContent;
 exports.TableCellGroup = TableCellGroup;
 exports.TableFooter = TableFooter;
 exports.TableHead = TableHead;

package/dist/cjs/components/Table/Table.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Table.cjs","sources":["../../../../src/components/Table/Table.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport { Select, SelectContent, SelectItem } from \"../Select/Select\";\n\n/** Row density for body cells — `md` (60px min height) or `lg` (80px). */\nexport type TableSize = \"md\" | \"lg\";\n\nexport interface TableCardProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Row density applied to {@link TableCell} descendants. @default \"md\" */\n  size?: TableSize;\n}\n\nconst TableSizeContext = React.createContext<TableSize>(\"md\");\n\nfunction useTableSize(): TableSize {\n  return React.useContext(TableSizeContext);\n}\n\n/**\n * Surface wrapper for data tables: rounded container, spacing, and size\n * context for {@link TableCell} descendants. Compose with {@link TableScrollArea},\n * {@link Table}, {@link TableHeader}, {@link TableBody}, {@link TableRow},\n * {@link TableHead}, and {@link TableCell}.\n *\n * @example\n * ```tsx\n * <TableCard size=\"md\">\n *   <TableScrollArea>\n *     <Table>\n *       <TableHeader>\n *         <TableRow>\n *           <TableHead>Name</TableHead>\n *         </TableRow>\n *       </TableHeader>\n *       <TableBody>\n *         <TableRow>\n *           <TableCell>Jane Doe</TableCell>\n *         </TableRow>\n *       </TableBody>\n *     </Table>\n *   </TableScrollArea>\n * </TableCard>\n * ```\n */\nexport const TableCard = React.forwardRef<HTMLDivElement, TableCardProps>(\n  ({ className, size = \"md\", ...props }, ref) => {\n    return (\n      <TableSizeContext.Provider value={size}>\n        <div\n          ref={ref}\n          className={cn(\n            \"isolate flex flex-col gap-4 overflow-hidden rounded-md bg-bg-primary pb-4\",\n            className,\n          )}\n          {...props}\n        />\n      </TableSizeContext.Provider>\n    );\n  },\n);\nTableCard.displayName = \"TableCard\";\n\nexport interface TableToolbarProps extends React.HTMLAttributes<HTMLDivElement> {}\n\n/**\n * Optional toolbar row above the table (e.g. bulk selection actions).\n */\nexport const TableToolbar = React.forwardRef<HTMLDivElement, TableToolbarProps>(\n  ({ className, ...props }, ref) => {\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          \"flex flex-wrap items-center gap-4 rounded-t-md bg-bg-primary px-6\",\n          className,\n        )}\n        {...props}\n      />\n    );\n  },\n);\nTableToolbar.displayName = \"TableToolbar\";\n\nexport interface TableScrollAreaProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Rounds the top of the table block to match {@link TableCard}. Set `false` when {@link TableToolbar} is above this scroll area. @default true */\n  roundTop?: boolean;\n}\n\n/**\n * Horizontal scroll container for wide tables. Uses an inner scrollport so the\n * table respects the card radius (plain `overflow-x-auto` on the table\n * wrapper often loses rounded corners with `border-collapse`).\n */\nexport const TableScrollArea = React.forwardRef<HTMLDivElement, TableScrollAreaProps>(\n  ({ className, roundTop = true, children, ...props }, ref) => {\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          \"relative w-full min-w-0 overflow-hidden\",\n          roundTop && \"rounded-t-md\",\n          className,\n        )}\n        {...props}\n      >\n        <div className=\"overflow-x-auto\">{children}</div>\n      </div>\n    );\n  },\n);\nTableScrollArea.displayName = \"TableScrollArea\";\n\nexport interface TableProps extends React.TableHTMLAttributes<HTMLTableElement> {}\n\n/**\n * Semantic `<table>` element. Place inside {@link TableScrollArea}.\n */\nexport const Table = React.forwardRef<HTMLTableElement, TableProps>(\n  ({ className, ...props }, ref) => {\n    return (\n      <table\n        ref={ref}\n        className={cn(\n          \"w-full caption-bottom border-separate border-spacing-0 text-left\",\n          className,\n        )}\n        {...props}\n      />\n    );\n  },\n);\nTable.displayName = \"Table\";\n\nexport interface TableHeaderProps extends React.HTMLAttributes<HTMLTableSectionElement> {}\n\nexport const TableHeader = React.forwardRef<HTMLTableSectionElement, TableHeaderProps>(\n  ({ className, ...props }, ref) => {\n    return (\n      <thead\n        ref={ref}\n        className={cn(\n          \"[&_tr:first-child_th:first-child]:rounded-tl-md [&_tr:first-child_th:last-child]:rounded-tr-md\",\n          className,\n        )}\n        {...props}\n      />\n    );\n  },\n);\nTableHeader.displayName = \"TableHeader\";\n\nexport interface TableBodyProps extends React.HTMLAttributes<HTMLTableSectionElement> {}\n\nexport const TableBody = React.forwardRef<HTMLTableSectionElement, TableBodyProps>(\n  ({ className, ...props }, ref) => {\n    return <tbody ref={ref} className={cn(className)} {...props} />;\n  },\n);\nTableBody.displayName = \"TableBody\";\n\nexport interface TableFooterProps extends React.HTMLAttributes<HTMLTableSectionElement> {}\n\nexport const TableFooter = React.forwardRef<HTMLTableSectionElement, TableFooterProps>(\n  ({ className, ...props }, ref) => {\n    return <tfoot ref={ref} className={cn(className)} {...props} />;\n  },\n);\nTableFooter.displayName = \"TableFooter\";\n\nexport interface TableRowProps extends React.HTMLAttributes<HTMLTableRowElement> {}\n\nexport const TableRow = React.forwardRef<HTMLTableRowElement, TableRowProps>(\n  ({ className, ...props }, ref) => {\n    return <tr ref={ref} className={cn(className)} {...props} />;\n  },\n);\nTableRow.displayName = \"TableRow\";\n\n/** Column layout preset for {@link TableHead}. */\nexport type TableHeadIntent = \"default\" | \"checkbox\" | \"sort\" | \"leading\";\n\nconst HEAD_INTENT_CLASSES: Record<TableHeadIntent, string> = {\n  default: \"text-left\",\n  checkbox: \"w-8 min-w-8 max-w-8 text-center\",\n  sort: \"text-right\",\n  leading: \"min-w-0 w-2/5 text-left\",\n};\n\nexport interface TableHeadProps extends React.ThHTMLAttributes<HTMLTableCellElement> {\n  /** Layout preset for common column types. @default \"default\" */\n  intent?: TableHeadIntent;\n}\n\nexport const TableHead = React.forwardRef<HTMLTableCellElement, TableHeadProps>(\n  ({ className, intent = \"default\", scope = \"col\", ...props }, ref) => {\n    return (\n      <th\n        ref={ref}\n        scope={scope}\n        className={cn(\n          \"typography-semibold-body-sm box-border h-8 min-h-8 bg-surface-secondary px-2 py-2 align-middle text-content-primary\",\n          HEAD_INTENT_CLASSES[intent],\n          className,\n        )}\n        {...props}\n      />\n    );\n  },\n);\nTableHead.displayName = \"TableHead\";\n\nconst CELL_MIN_HEIGHT: Record<TableSize, string> = {\n  md: \"min-h-[60px]\",\n  lg: \"min-h-[80px]\",\n};\n\n/** Bottom border and padding preset for body cells (Figma table cell component). */\nexport type TableCellVariant = \"default\" | \"chip\" | \"pillProgress\";\n\nconst CELL_VARIANT_CLASSES: Record<TableCellVariant, string> = {\n  default: \"border-border-primary border-b px-2 py-2\",\n  chip: \"border-border-primary border-b px-2 py-2\",\n  pillProgress: \"border-border-primary border-b px-4 py-2\",\n};\n\n/** Layout / typography preset for {@link TableCell} (orthogonal to {@link TableCellVariant}). */\nexport type TableCellIntent = \"default\" | \"checkbox\" | \"stacked\" | \"multiline\" | \"sideLabel\";\n\nconst CELL_INTENT_CLASSES: Record<TableCellIntent, string> = {\n  default: \"\",\n  checkbox: \"text-center\",\n  stacked: \"align-top\",\n  multiline: \"max-w-[240px]\",\n  sideLabel: \"\",\n};\n\nexport interface TableCellProps extends React.TdHTMLAttributes<HTMLTableCellElement> {\n  /** `pillProgress` uses wider horizontal padding; row dividers match the default weight for visibility. @default \"default\" */\n  cellVariant?: TableCellVariant;\n  /** Alignment and typography preset for common cell types. @default \"default\" */\n  intent?: TableCellIntent;\n}\n\nexport const TableCell = React.forwardRef<HTMLTableCellElement, TableCellProps>(\n  ({ className, cellVariant = \"default\", intent = \"default\", ...props }, ref) => {\n    const size = useTableSize();\n    const typo =\n      intent === \"sideLabel\" ? \"typography-semibold-body-md\" : \"typography-regular-body-md\";\n    return (\n      <td\n        ref={ref}\n        className={cn(\n          typo,\n          \"align-middle text-content-primary\",\n          CELL_VARIANT_CLASSES[cellVariant],\n          CELL_MIN_HEIGHT[size],\n          CELL_INTENT_CLASSES[intent],\n          className,\n        )}\n        {...props}\n      />\n    );\n  },\n);\nTableCell.displayName = \"TableCell\";\n\nexport interface TableCellGroupProps extends React.HTMLAttributes<HTMLDivElement> {}\n\n/**\n * Horizontal group for icons, chips, and metadata inside a {@link TableCell} (Figma `gap-[10px]`).\n */\nexport const TableCellGroup = React.forwardRef<HTMLDivElement, TableCellGroupProps>(\n  ({ className, ...props }, ref) => {\n    return <div ref={ref} className={cn(\"flex items-center gap-2.5\", className)} {...props} />;\n  },\n);\nTableCellGroup.displayName = \"TableCellGroup\";\n\nexport interface TableMediaThumbnailProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, \"children\"> {\n  /** Image URL. */\n  src: string;\n  /** Alt text for the image. @default \"\" */\n  alt?: string;\n  /** Applies the table’s blurred-media treatment. @default false */\n  blurred?: boolean;\n  /** `center` uses the fixed media column width from the lg spec. @default \"start\" */\n  align?: \"start\" | \"center\";\n}\n\n/**\n * Rounded thumbnail sized from {@link TableCard} `size` (`md` vs `lg`).\n */\nexport const TableMediaThumbnail = React.forwardRef<HTMLDivElement, TableMediaThumbnailProps>(\n  ({ className, src, alt = \"\", blurred, align = \"start\", ...props }, ref) => {\n    const tableSize = useTableSize();\n    const frame =\n      tableSize === \"lg\"\n        ? \"h-[62px] w-11 overflow-hidden rounded-xs bg-neutral-alphas-200\"\n        : \"h-10 w-[29px] overflow-hidden rounded-xs bg-neutral-alphas-200\";\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          align === \"center\" && \"flex w-16 shrink-0 justify-center\",\n          align === \"start\" && \"inline-flex shrink-0\",\n        )}\n      >\n        <div className={cn(frame, blurred && \"blur-[2px]\", className)} {...props}>\n          <img alt={alt} className=\"size-full object-cover\" src={src} />\n        </div>\n      </div>\n    );\n  },\n);\nTableMediaThumbnail.displayName = \"TableMediaThumbnail\";\n\nexport interface TableStatusDotProps extends React.HTMLAttributes<HTMLDivElement> {}\n\n/**\n * Small status indicator dot for table cells (Figma status column).\n */\nexport const TableStatusDot = React.forwardRef<HTMLDivElement, TableStatusDotProps>(\n  ({ className, ...props }, ref) => {\n    return (\n      <div\n        ref={ref}\n        className={cn(\"size-2 shrink-0 rounded-full bg-info-content\", className)}\n        {...props}\n      />\n    );\n  },\n);\nTableStatusDot.displayName = \"TableStatusDot\";\n\nexport interface TableProgressTrackProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Fill width from 0–100. @default 0 */\n  value?: number;\n}\n\n/**\n * Thin progress track used with badges in table cells (Figma pill + progress).\n * Renders with `role=\"progressbar\"` and a default `aria-label` of `\"Progress\"`.\n */\nexport const TableProgressTrack = React.forwardRef<HTMLDivElement, TableProgressTrackProps>(\n  ({ className, value = 0, \"aria-label\": ariaLabel = \"Progress\", ...props }, ref) => {\n    const width = Math.min(100, Math.max(0, value));\n    const rounded = Math.round(width);\n    return (\n      <div\n        ref={ref}\n        role=\"progressbar\"\n        aria-valuenow={rounded}\n        aria-valuemin={0}\n        aria-valuemax={100}\n        aria-label={ariaLabel}\n        className={cn(\n          \"relative h-1 w-full overflow-hidden rounded-full bg-neutral-alphas-200\",\n          className,\n        )}\n        {...props}\n      >\n        <div\n          className=\"absolute top-0 left-0 h-1 rounded-full bg-buttons-primary\"\n          style={{ width: `${width}%` }}\n          aria-hidden\n        />\n      </div>\n    );\n  },\n);\nTableProgressTrack.displayName = \"TableProgressTrack\";\n\nexport interface TablePillProgressLayoutProps extends React.HTMLAttributes<HTMLDivElement> {}\n\n/**\n * Vertical layout for pill label + {@link TableProgressTrack} in a cell.\n */\nexport const TablePillProgressLayout = React.forwardRef<\n  HTMLDivElement,\n  TablePillProgressLayoutProps\n>(({ className, ...props }, ref) => {\n  return (\n    <div\n      ref={ref}\n      className={cn(\"flex min-w-[120px] flex-col items-center gap-3\", className)}\n      {...props}\n    />\n  );\n});\nTablePillProgressLayout.displayName = \"TablePillProgressLayout\";\n\nexport interface TableSortLabelProps extends React.HTMLAttributes<HTMLSpanElement> {\n  children: React.ReactNode;\n}\n\n/**\n * Sortable column label with caption typography and a sort affordance.\n */\nexport const TableSortLabel = React.forwardRef<HTMLSpanElement, TableSortLabelProps>(\n  ({ className, children, ...props }, ref) => {\n    return (\n      <span ref={ref} className={cn(\"inline-flex items-center gap-2.5\", className)} {...props}>\n        <span className=\"typography-semibold-body-sm\">{children}</span>\n        <span className=\"text-content-secondary\" aria-hidden>\n          ↕\n        </span>\n      </span>\n    );\n  },\n);\nTableSortLabel.displayName = \"TableSortLabel\";\n\nexport interface TableStackedTextProps {\n  /** Primary line (semibold body). */\n  title: React.ReactNode;\n  /** Secondary line (caption, muted). */\n  subtitle: React.ReactNode;\n}\n\n/**\n * Two-line primary + secondary text block for “cell + info” patterns.\n */\nexport function TableStackedText({ title, subtitle }: TableStackedTextProps) {\n  return (\n    <div className=\"flex flex-col gap-1\">\n      <span className=\"typography-semibold-body-md\">{title}</span>\n      <span className=\"typography-regular-body-sm text-content-secondary\">{subtitle}</span>\n    </div>\n  );\n}\n\nTableStackedText.displayName = \"TableStackedText\";\n\nexport interface TableLineClampProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Number of lines before ellipsis. @default 2 */\n  lines?: 1 | 2 | 3;\n}\n\n/**\n * Clamps child text to a fixed number of lines inside a {@link TableCell}.\n */\nexport const TableLineClamp = React.forwardRef<HTMLDivElement, TableLineClampProps>(\n  ({ className, lines = 2, ...props }, ref) => {\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          lines === 1 && \"line-clamp-1\",\n          lines === 2 && \"line-clamp-2\",\n          lines === 3 && \"line-clamp-3\",\n          className,\n        )}\n        {...props}\n      />\n    );\n  },\n);\nTableLineClamp.displayName = \"TableLineClamp\";\n\nexport interface TableRowsPerPageSelectProps {\n  /** Passed to the trigger for forms and labels. */\n  id?: string;\n  /** Accessible name for the trigger when no visible label. @default \"Rows per page\" */\n  \"aria-label\"?: string;\n}\n\n/**\n * Rows-per-page {@link Select} styled for {@link TablePagination} (Figma field).\n */\nexport function TableRowsPerPageSelect(props: TableRowsPerPageSelectProps) {\n  const { id, \"aria-label\": ariaLabel = \"Rows per page\" } = props;\n  return (\n    <Select\n      defaultValue=\"10\"\n      size=\"32\"\n      aria-label={ariaLabel}\n      className=\"w-[154px] [&_button]:rounded-xs [&_button]:border-transparent [&_button]:bg-transparent\"\n      id={id}\n    >\n      <SelectContent>\n        <SelectItem value=\"10\">10 rows per page</SelectItem>\n        <SelectItem value=\"25\">25 rows per page</SelectItem>\n        <SelectItem value=\"50\">50 rows per page</SelectItem>\n      </SelectContent>\n    </Select>\n  );\n}\n"],"names":["React","jsx","cn","jsxs","Select","SelectContent","SelectItem"],"mappings":"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"}
+{"version":3,"file":"Table.cjs","sources":["../../../../src/components/Table/Table.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport { ArrowDownIcon } from \"../Icons/ArrowDownIcon\";\nimport { ArrowUpIcon } from \"../Icons/ArrowUpIcon\";\nimport { Select, SelectContent, SelectItem } from \"../Select/Select\";\n\n/**\n * Row density for body cells.\n *\n * - `\"md\"` (default) → 64px Figma `V2 Table Cell` Small.\n * - `\"lg\"` → 80px Figma `V2 Table Cell` Large.\n *\n * `\"default\"` is the v2 numeric-token equivalent of `\"md\"` and is preferred\n * for new code.\n */\nexport type TableSize = \"md\" | \"lg\" | \"default\";\n\nexport interface TableCardProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Row density applied to {@link TableCell} descendants. @default \"md\" */\n  size?: TableSize;\n}\n\nconst TableSizeContext = React.createContext<TableSize>(\"md\");\n\nfunction useTableSize(): TableSize {\n  return React.useContext(TableSizeContext);\n}\n\n/**\n * Surface wrapper for data tables: rounded 24px container with a strong\n * outer border, inner spacing, and size context for {@link TableCell}\n * descendants. Compose with {@link TableScrollArea}, {@link Table},\n * {@link TableHeader}, {@link TableBody}, {@link TableRow},\n * {@link TableHead}, and {@link TableCell}.\n *\n * @example\n * ```tsx\n * <TableCard>\n *   <TableScrollArea>\n *     <Table>\n *       <TableHeader>\n *         <TableRow>\n *           <TableHead>Name</TableHead>\n *         </TableRow>\n *       </TableHeader>\n *       <TableBody>\n *         <TableRow>\n *           <TableCell>Jane Doe</TableCell>\n *         </TableRow>\n *       </TableBody>\n *     </Table>\n *   </TableScrollArea>\n * </TableCard>\n * ```\n */\nexport const TableCard = React.forwardRef<HTMLDivElement, TableCardProps>(\n  ({ className, size = \"md\", ...props }, ref) => {\n    return (\n      <TableSizeContext.Provider value={size}>\n        <div\n          ref={ref}\n          className={cn(\n            \"isolate flex flex-col gap-2 overflow-hidden rounded-3xl border border-border-strong px-3 py-1\",\n            className,\n          )}\n          {...props}\n        />\n      </TableSizeContext.Provider>\n    );\n  },\n);\nTableCard.displayName = \"TableCard\";\n\nexport interface TableToolbarProps extends React.HTMLAttributes<HTMLDivElement> {}\n\n/**\n * Optional toolbar row above the table (e.g. bulk selection actions).\n */\nexport const TableToolbar = React.forwardRef<HTMLDivElement, TableToolbarProps>(\n  ({ className, ...props }, ref) => {\n    return (\n      <div\n        ref={ref}\n        className={cn(\"flex flex-wrap items-center gap-4 px-4 py-3\", className)}\n        {...props}\n      />\n    );\n  },\n);\nTableToolbar.displayName = \"TableToolbar\";\n\nexport interface TableScrollAreaProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * No longer needed in v2 — {@link TableCard} handles corner rounding via\n   * its own `overflow-hidden rounded-3xl`. Accepted for back-compat.\n   *\n   * @deprecated v2 ignores this prop; safe to remove.\n   */\n  roundTop?: boolean;\n}\n\n/**\n * Horizontal scroll container for wide tables. The inner scrollport keeps\n * `border-collapse` styles intact when the table wraps.\n */\nexport const TableScrollArea = React.forwardRef<HTMLDivElement, TableScrollAreaProps>(\n  ({ className, children, roundTop: _roundTop, ...props }, ref) => {\n    return (\n      <div\n        ref={ref}\n        className={cn(\"relative w-full min-w-0 overflow-hidden\", className)}\n        {...props}\n      >\n        <div className=\"overflow-x-auto\">{children}</div>\n      </div>\n    );\n  },\n);\nTableScrollArea.displayName = \"TableScrollArea\";\n\nexport interface TableProps extends React.TableHTMLAttributes<HTMLTableElement> {}\n\n/**\n * Semantic `<table>` element. Place inside {@link TableScrollArea}.\n */\nexport const Table = React.forwardRef<HTMLTableElement, TableProps>(\n  ({ className, ...props }, ref) => {\n    return (\n      <table\n        ref={ref}\n        className={cn(\n          \"w-full caption-bottom border-separate border-spacing-0 text-left\",\n          className,\n        )}\n        {...props}\n      />\n    );\n  },\n);\nTable.displayName = \"Table\";\n\nexport interface TableHeaderProps extends React.HTMLAttributes<HTMLTableSectionElement> {}\n\nexport const TableHeader = React.forwardRef<HTMLTableSectionElement, TableHeaderProps>(\n  ({ className, ...props }, ref) => {\n    return <thead ref={ref} className={cn(className)} {...props} />;\n  },\n);\nTableHeader.displayName = \"TableHeader\";\n\nexport interface TableBodyProps extends React.HTMLAttributes<HTMLTableSectionElement> {}\n\n/**\n * `<tbody>` wrapper. Removes the bottom border on cells in the final row to\n * match the Figma `V2 Table Final Row` treatment.\n */\nexport const TableBody = React.forwardRef<HTMLTableSectionElement, TableBodyProps>(\n  ({ className, ...props }, ref) => {\n    return (\n      <tbody ref={ref} className={cn(\"[&_tr:last-child_td]:border-b-0\", className)} {...props} />\n    );\n  },\n);\nTableBody.displayName = \"TableBody\";\n\nexport interface TableFooterProps extends React.HTMLAttributes<HTMLTableSectionElement> {}\n\nexport const TableFooter = React.forwardRef<HTMLTableSectionElement, TableFooterProps>(\n  ({ className, ...props }, ref) => {\n    return <tfoot ref={ref} className={cn(className)} {...props} />;\n  },\n);\nTableFooter.displayName = \"TableFooter\";\n\nexport interface TableRowProps extends React.HTMLAttributes<HTMLTableRowElement> {}\n\nexport const TableRow = React.forwardRef<HTMLTableRowElement, TableRowProps>(\n  ({ className, ...props }, ref) => {\n    return <tr ref={ref} className={cn(className)} {...props} />;\n  },\n);\nTableRow.displayName = \"TableRow\";\n\n/** Column layout preset for {@link TableHead}. */\nexport type TableHeadIntent = \"default\" | \"checkbox\" | \"sort\" | \"leading\";\n\nconst HEAD_INTENT_CLASSES: Record<TableHeadIntent, string> = {\n  default: \"text-left\",\n  checkbox: \"w-12 min-w-12 max-w-12 text-center\",\n  sort: \"text-right\",\n  leading: \"min-w-0 w-2/5 text-left\",\n};\n\nexport interface TableHeadProps extends React.ThHTMLAttributes<HTMLTableCellElement> {\n  /** Layout preset for common column types. @default \"default\" */\n  intent?: TableHeadIntent;\n}\n\n/**\n * Header cell. v2: transparent background, 48px min height, tertiary text,\n * `border-border-primary` bottom rule.\n */\nexport const TableHead = React.forwardRef<HTMLTableCellElement, TableHeadProps>(\n  ({ className, intent = \"default\", scope = \"col\", ...props }, ref) => {\n    return (\n      <th\n        ref={ref}\n        scope={scope}\n        className={cn(\n          \"typography-semibold-body-sm box-border min-h-12 border-b border-border-primary px-4 py-3 align-middle text-content-tertiary\",\n          HEAD_INTENT_CLASSES[intent],\n          className,\n        )}\n        {...props}\n      />\n    );\n  },\n);\nTableHead.displayName = \"TableHead\";\n\nconst CELL_MIN_HEIGHT: Record<TableSize, string> = {\n  md: \"h-16 min-h-16\",\n  default: \"h-16 min-h-16\",\n  lg: \"h-20 min-h-20\",\n};\n\n/** Bottom border and padding preset for body cells (Figma table cell component). */\nexport type TableCellVariant = \"default\" | \"chip\" | \"pillProgress\";\n\nconst CELL_VARIANT_CLASSES: Record<TableCellVariant, string> = {\n  default: \"border-b border-border-primary px-4 py-3\",\n  chip: \"border-b border-border-primary px-4 py-3\",\n  pillProgress: \"border-b border-border-primary px-4 py-3\",\n};\n\n/** Layout / typography preset for {@link TableCell} (orthogonal to {@link TableCellVariant}). */\nexport type TableCellIntent = \"default\" | \"checkbox\" | \"stacked\" | \"multiline\" | \"sideLabel\";\n\nconst CELL_INTENT_CLASSES: Record<TableCellIntent, string> = {\n  default: \"\",\n  checkbox: \"w-12 min-w-12 max-w-12 text-center\",\n  stacked: \"align-top\",\n  multiline: \"max-w-[240px]\",\n  sideLabel: \"\",\n};\n\nexport interface TableCellProps extends React.TdHTMLAttributes<HTMLTableCellElement> {\n  /** Padding preset for the cell. v2 uses identical padding across variants; values are kept for back-compat. @default \"default\" */\n  cellVariant?: TableCellVariant;\n  /** Alignment and typography preset for common cell types. @default \"default\" */\n  intent?: TableCellIntent;\n}\n\n/**\n * Body cell. v2: `h-16` (or `h-20` when the parent {@link TableCard} uses\n * `size=\"lg\"`), `px-4 py-3` padding, body-sm typography, and a single\n * `border-border-primary` rule that is zeroed by {@link TableBody} for the\n * final row.\n */\nexport const TableCell = React.forwardRef<HTMLTableCellElement, TableCellProps>(\n  ({ className, cellVariant = \"default\", intent = \"default\", ...props }, ref) => {\n    const size = useTableSize();\n    const typo =\n      intent === \"sideLabel\" ? \"typography-semibold-body-sm\" : \"typography-regular-body-sm\";\n    return (\n      <td\n        ref={ref}\n        className={cn(\n          typo,\n          \"align-middle text-content-primary\",\n          CELL_VARIANT_CLASSES[cellVariant],\n          CELL_MIN_HEIGHT[size],\n          CELL_INTENT_CLASSES[intent],\n          className,\n        )}\n        {...props}\n      />\n    );\n  },\n);\nTableCell.displayName = \"TableCell\";\n\nexport interface TableCellGroupProps extends React.HTMLAttributes<HTMLDivElement> {}\n\n/**\n * Horizontal group for icons, chips, and metadata inside a {@link TableCell}\n * (Figma `gap-[4px]`).\n */\nexport const TableCellGroup = React.forwardRef<HTMLDivElement, TableCellGroupProps>(\n  ({ className, ...props }, ref) => {\n    return <div ref={ref} className={cn(\"flex items-center gap-1\", className)} {...props} />;\n  },\n);\nTableCellGroup.displayName = \"TableCellGroup\";\n\nexport interface TableCellContentProps {\n  /** Primary line (semibold body-sm). */\n  primary: React.ReactNode;\n  /** Optional secondary line (regular body-sm, secondary color). */\n  secondary?: React.ReactNode;\n  /** Inline node rendered next to the primary line (icon, chip). */\n  primaryAdornment?: React.ReactNode;\n  /** Inline node rendered next to the secondary line. */\n  secondaryAdornment?: React.ReactNode;\n  /** Class for the outer wrapper. */\n  className?: string;\n}\n\n/**\n * Two-line content slot matching Figma `V2 Table Content` — primary line\n * (semibold) over an optional secondary line (regular, muted) with a 2px\n * gap. Use inside {@link TableCell} for the common stacked-text pattern.\n */\nexport function TableCellContent({\n  primary,\n  secondary,\n  primaryAdornment,\n  secondaryAdornment,\n  className,\n}: TableCellContentProps) {\n  return (\n    <div className={cn(\"flex flex-col gap-0.5\", className)}>\n      <div className=\"flex items-center gap-1\">\n        <span className=\"typography-semibold-body-sm text-content-primary\">{primary}</span>\n        {primaryAdornment}\n      </div>\n      {(secondary != null || secondaryAdornment != null) && (\n        <div className=\"flex items-center gap-1\">\n          {secondary != null && (\n            <span className=\"typography-regular-body-sm text-content-secondary\">{secondary}</span>\n          )}\n          {secondaryAdornment}\n        </div>\n      )}\n    </div>\n  );\n}\nTableCellContent.displayName = \"TableCellContent\";\n\nexport interface TableMediaThumbnailProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, \"children\"> {\n  /** Image URL. */\n  src: string;\n  /** Alt text for the image. @default \"\" */\n  alt?: string;\n  /** Applies the table's blurred-media treatment. @default false */\n  blurred?: boolean;\n  /** `center` uses the fixed media column width from the lg spec. @default \"start\" */\n  align?: \"start\" | \"center\";\n}\n\n/**\n * Square 48px thumbnail used inside {@link TableCell} for media columns\n * (Figma `V2 Media Thumbnail Item`).\n */\nexport const TableMediaThumbnail = React.forwardRef<HTMLDivElement, TableMediaThumbnailProps>(\n  ({ className, src, alt = \"\", blurred, align = \"start\", ...props }, ref) => {\n    const frame = \"size-12 overflow-hidden rounded-sm bg-neutral-alphas-200\";\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          align === \"center\" && \"flex w-16 shrink-0 justify-center\",\n          align === \"start\" && \"inline-flex shrink-0\",\n        )}\n      >\n        <div className={cn(frame, blurred && \"blur-[2px]\", className)} {...props}>\n          <img alt={alt} className=\"size-full object-cover\" src={src} />\n        </div>\n      </div>\n    );\n  },\n);\nTableMediaThumbnail.displayName = \"TableMediaThumbnail\";\n\nexport interface TableStatusDotProps extends React.HTMLAttributes<HTMLDivElement> {}\n\n/**\n * Small status indicator dot for table cells (Figma status column).\n */\nexport const TableStatusDot = React.forwardRef<HTMLDivElement, TableStatusDotProps>(\n  ({ className, ...props }, ref) => {\n    return (\n      <div\n        ref={ref}\n        className={cn(\"size-2 shrink-0 rounded-full bg-info-content\", className)}\n        {...props}\n      />\n    );\n  },\n);\nTableStatusDot.displayName = \"TableStatusDot\";\n\nexport interface TableProgressTrackProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Fill width from 0–100. @default 0 */\n  value?: number;\n}\n\n/**\n * Thin progress track used with badges in table cells (Figma pill + progress).\n * Renders with `role=\"progressbar\"` and a default `aria-label` of `\"Progress\"`.\n */\nexport const TableProgressTrack = React.forwardRef<HTMLDivElement, TableProgressTrackProps>(\n  ({ className, value = 0, \"aria-label\": ariaLabel = \"Progress\", ...props }, ref) => {\n    const width = Math.min(100, Math.max(0, value));\n    const rounded = Math.round(width);\n    return (\n      <div\n        ref={ref}\n        role=\"progressbar\"\n        aria-valuenow={rounded}\n        aria-valuemin={0}\n        aria-valuemax={100}\n        aria-label={ariaLabel}\n        className={cn(\n          \"relative h-1 w-full overflow-hidden rounded-full bg-neutral-alphas-200\",\n          className,\n        )}\n        {...props}\n      >\n        <div\n          className=\"absolute top-0 left-0 h-1 rounded-full bg-buttons-primary\"\n          style={{ width: `${width}%` }}\n          aria-hidden\n        />\n      </div>\n    );\n  },\n);\nTableProgressTrack.displayName = \"TableProgressTrack\";\n\nexport interface TablePillProgressLayoutProps extends React.HTMLAttributes<HTMLDivElement> {}\n\n/**\n * Vertical layout for pill label + {@link TableProgressTrack} in a cell.\n */\nexport const TablePillProgressLayout = React.forwardRef<\n  HTMLDivElement,\n  TablePillProgressLayoutProps\n>(({ className, ...props }, ref) => {\n  return (\n    <div\n      ref={ref}\n      className={cn(\"flex min-w-[120px] flex-col items-start gap-2\", className)}\n      {...props}\n    />\n  );\n});\nTablePillProgressLayout.displayName = \"TablePillProgressLayout\";\n\n/** Current sort direction of a {@link TableSortLabel}. `null` means unsorted. */\nexport type TableSortDirection = \"asc\" | \"desc\" | null;\n\nexport interface TableSortLabelProps extends React.HTMLAttributes<HTMLSpanElement> {\n  children: React.ReactNode;\n  /**\n   * Visual indicator of the column's sort state. When set to `\"asc\"` or\n   * `\"desc\"`, a 1px underline accent appears beneath the label and a small\n   * directional arrow is shown next to it. @default null\n   */\n  direction?: TableSortDirection;\n}\n\n/**\n * Sortable column label. v2 expresses the sort state with a 1px underline\n * beneath the label plus a directional arrow when sorted.\n */\nexport const TableSortLabel = React.forwardRef<HTMLSpanElement, TableSortLabelProps>(\n  ({ className, children, direction = null, ...props }, ref) => {\n    const Icon = direction === \"desc\" ? ArrowDownIcon : ArrowUpIcon;\n    return (\n      <span\n        ref={ref}\n        className={cn(\"inline-flex items-center gap-1 text-content-primary\", className)}\n        {...props}\n      >\n        <span\n          className={cn(\n            \"typography-semibold-body-sm\",\n            direction != null && \"border-b border-content-primary pb-px\",\n          )}\n        >\n          {children}\n        </span>\n        {direction != null && <Icon className=\"size-4 shrink-0\" aria-hidden />}\n      </span>\n    );\n  },\n);\nTableSortLabel.displayName = \"TableSortLabel\";\n\nexport interface TableStackedTextProps {\n  /** Primary line (semibold body). */\n  title: React.ReactNode;\n  /** Secondary line (caption, muted). */\n  subtitle: React.ReactNode;\n}\n\n/**\n * Two-line primary + secondary text block for \"cell + info\" patterns.\n *\n * @deprecated Prefer {@link TableCellContent} which supports adornments and\n * matches the Figma `V2 Table Content` slot.\n */\nexport function TableStackedText({ title, subtitle }: TableStackedTextProps) {\n  return <TableCellContent primary={title} secondary={subtitle} />;\n}\n\nTableStackedText.displayName = \"TableStackedText\";\n\nexport interface TableLineClampProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Number of lines before ellipsis. @default 2 */\n  lines?: 1 | 2 | 3;\n}\n\n/**\n * Clamps child text to a fixed number of lines inside a {@link TableCell}.\n */\nexport const TableLineClamp = React.forwardRef<HTMLDivElement, TableLineClampProps>(\n  ({ className, lines = 2, ...props }, ref) => {\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          lines === 1 && \"line-clamp-1\",\n          lines === 2 && \"line-clamp-2\",\n          lines === 3 && \"line-clamp-3\",\n          className,\n        )}\n        {...props}\n      />\n    );\n  },\n);\nTableLineClamp.displayName = \"TableLineClamp\";\n\nexport interface TableRowsPerPageSelectProps {\n  /** Passed to the trigger for forms and labels. */\n  id?: string;\n  /** Accessible name for the trigger when no visible label. @default \"Rows per page\" */\n  \"aria-label\"?: string;\n}\n\n/**\n * Rows-per-page {@link Select} styled for {@link TablePagination}. v2 uses a\n * subtle pill trigger with the table's secondary-surface background.\n */\nexport function TableRowsPerPageSelect(props: TableRowsPerPageSelectProps) {\n  const { id, \"aria-label\": ariaLabel = \"Rows per page\" } = props;\n  return (\n    <Select\n      defaultValue=\"10\"\n      size=\"32\"\n      aria-label={ariaLabel}\n      className=\"w-[154px] [&_button]:rounded-sm [&_button]:border-transparent [&_button]:bg-surface-inputs\"\n      id={id}\n    >\n      <SelectContent>\n        <SelectItem value=\"10\">10 rows per page</SelectItem>\n        <SelectItem value=\"25\">25 rows per page</SelectItem>\n        <SelectItem value=\"50\">50 rows per page</SelectItem>\n      </SelectContent>\n    </Select>\n  );\n}\n"],"names":["React","jsx","cn","jsxs","ArrowDownIcon","ArrowUpIcon","Select","SelectContent","SelectItem"],"mappings":"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"}

package/dist/cjs/components/Table/TablePagination.cjs

@@ -28,16 +28,16 @@ const TablePagination = React__namespace.forwardRef(
         "div",
         {
           ref,
-          className: cn.cn("flex w-full max-w-full flex-col gap-3 px-4", className),
+          className: cn.cn("flex w-full max-w-full flex-col gap-4 px-3 py-3", className),
           ...props,
           children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full items-center gap-2.5", children: [
-              leadingSlot != null ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex min-w-0 shrink-0 items-center rounded-xs bg-surface-secondary", children: leadingSlot }) : null,
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full items-center gap-2", children: [
+              leadingSlot != null ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex min-w-0 shrink-0 items-center", children: leadingSlot }) : null,
               /* @__PURE__ */ jsxRuntime.jsx(
                 "div",
                 {
                   className: cn.cn(
-                    "typography-regular-body-md min-w-0 flex-1 text-content-secondary",
+                    "typography-regular-body-sm min-w-0 flex-1 text-content-secondary",
                     leadingSlot == null && "text-left",
                     leadingSlot != null && "text-right"
                   ),
@@ -54,12 +54,12 @@ const TablePagination = React__namespace.forwardRef(
       "div",
       {
         ref,
-        className: cn.cn("flex w-full flex-wrap items-center gap-3 px-4", className),
+        className: cn.cn("flex w-full flex-wrap items-center gap-3 px-3 py-3", className),
         ...props,
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex min-h-0 min-w-0 flex-1 flex-col items-start justify-center", children: leadingSlot != null ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "inline-flex min-w-0 rounded-xs bg-surface-secondary", children: leadingSlot }) : null }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex min-h-0 min-w-0 flex-1 items-center", children: leadingSlot }),
           paginationSlot != null ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex shrink-0 items-center justify-center", children: paginationSlot }) : null,
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "typography-regular-body-md min-w-0 flex-1 text-right text-content-secondary", children: summary })
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "typography-regular-body-sm min-w-0 flex-1 text-right text-content-secondary", children: summary })
         ]
       }
     );

package/dist/cjs/components/Table/TablePagination.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TablePagination.cjs","sources":["../../../../src/components/Table/TablePagination.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"@/utils/cn\";\n\n/** Layout preset for the pagination bar — desktop (range on the right) or stacked mobile. */\nexport type TablePaginationLayout = \"desktop\" | \"mobile\";\n\nexport interface TablePaginationProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Layout preset. @default \"desktop\" */\n  layout?: TablePaginationLayout;\n  /** Left (desktop) or top row (mobile) content, e.g. rows-per-page {@link Select}. */\n  leadingSlot?: React.ReactNode;\n  /** Center (desktop) or bottom row (mobile) content, e.g. {@link Pagination}. */\n  paginationSlot?: React.ReactNode;\n  /** Summary text or node (e.g. current range and total). */\n  summary: React.ReactNode;\n}\n\n/**\n * Footer bar for data tables: rows-per-page control, page navigation, and range\n * summary. Pair `paginationSlot` with {@link Pagination} for numbered controls.\n *\n * @example\n * ```tsx\n * <TablePagination\n *   leadingSlot={<Select size=\"32\" aria-label=\"Rows per page\">…</Select>}\n *   paginationSlot={<Pagination totalPages={5} currentPage={2} onPageChange={setPage} />}\n *   summary=\"20–30 of 100 rows\"\n * />\n * ```\n */\nexport const TablePagination = React.forwardRef<HTMLDivElement, TablePaginationProps>(\n  ({ className, layout = \"desktop\", leadingSlot, paginationSlot, summary, ...props }, ref) => {\n    if (layout === \"mobile\") {\n      return (\n        <div\n          ref={ref}\n          className={cn(\"flex w-full max-w-full flex-col gap-3 px-4\", className)}\n          {...props}\n        >\n          <div className=\"flex w-full items-center gap-2.5\">\n            {leadingSlot != null ? (\n              <div className=\"flex min-w-0 shrink-0 items-center rounded-xs bg-surface-secondary\">\n                {leadingSlot}\n              </div>\n            ) : null}\n            <div\n              className={cn(\n                \"typography-regular-body-md min-w-0 flex-1 text-content-secondary\",\n                leadingSlot == null && \"text-left\",\n                leadingSlot != null && \"text-right\",\n              )}\n            >\n              {summary}\n            </div>\n          </div>\n          {paginationSlot != null ? (\n            <div className=\"flex justify-center\">{paginationSlot}</div>\n          ) : null}\n        </div>\n      );\n    }\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\"flex w-full flex-wrap items-center gap-3 px-4\", className)}\n        {...props}\n      >\n        <div className=\"flex min-h-0 min-w-0 flex-1 flex-col items-start justify-center\">\n          {leadingSlot != null ? (\n            <div className=\"inline-flex min-w-0 rounded-xs bg-surface-secondary\">{leadingSlot}</div>\n          ) : null}\n        </div>\n        {paginationSlot != null ? (\n          <div className=\"flex shrink-0 items-center justify-center\">{paginationSlot}</div>\n        ) : null}\n        <div className=\"typography-regular-body-md min-w-0 flex-1 text-right text-content-secondary\">\n          {summary}\n        </div>\n      </div>\n    );\n  },\n);\nTablePagination.displayName = \"TablePagination\";\n"],"names":["React","jsxs","cn","jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AA8BO,MAAM,kBAAkBA,iBAAM;AAAA,EACnC,CAAC,EAAE,WAAW,SAAS,WAAW,aAAa,gBAAgB,SAAS,GAAG,MAAA,GAAS,QAAQ;AAC1F,QAAI,WAAW,UAAU;AACvB,aACEC,2BAAAA;AAAAA,QAAC;AAAA,QAAA;AAAA,UACC;AAAA,UACA,WAAWC,GAAAA,GAAG,8CAA8C,SAAS;AAAA,UACpE,GAAG;AAAA,UAEJ,UAAA;AAAA,YAAAD,2BAAAA,KAAC,OAAA,EAAI,WAAU,oCACZ,UAAA;AAAA,cAAA,eAAe,OACdE,2BAAAA,IAAC,OAAA,EAAI,WAAU,sEACZ,uBACH,IACE;AAAA,cACJA,2BAAAA;AAAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,WAAWD,GAAAA;AAAAA,oBACT;AAAA,oBACA,eAAe,QAAQ;AAAA,oBACvB,eAAe,QAAQ;AAAA,kBAAA;AAAA,kBAGxB,UAAA;AAAA,gBAAA;AAAA,cAAA;AAAA,YACH,GACF;AAAA,YACC,kBAAkB,OACjBC,2BAAAA,IAAC,SAAI,WAAU,uBAAuB,0BAAe,IACnD;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAGV;AAEA,WACEF,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAWC,GAAAA,GAAG,iDAAiD,SAAS;AAAA,QACvE,GAAG;AAAA,QAEJ,UAAA;AAAA,UAAAC,2BAAAA,IAAC,OAAA,EAAI,WAAU,mEACZ,UAAA,eAAe,OACdA,2BAAAA,IAAC,OAAA,EAAI,WAAU,uDAAuD,UAAA,YAAA,CAAY,IAChF,MACN;AAAA,UACC,kBAAkB,OACjBA,2BAAAA,IAAC,SAAI,WAAU,6CAA6C,0BAAe,IACzE;AAAA,UACJA,2BAAAA,IAAC,OAAA,EAAI,WAAU,+EACZ,UAAA,QAAA,CACH;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AACF;AACA,gBAAgB,cAAc;;"}
+{"version":3,"file":"TablePagination.cjs","sources":["../../../../src/components/Table/TablePagination.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"@/utils/cn\";\n\n/** Layout preset for the pagination bar — desktop (range on the right) or stacked mobile. */\nexport type TablePaginationLayout = \"desktop\" | \"mobile\";\n\nexport interface TablePaginationProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Layout preset. @default \"desktop\" */\n  layout?: TablePaginationLayout;\n  /** Left (desktop) or top row (mobile) content, e.g. rows-per-page {@link Select}. */\n  leadingSlot?: React.ReactNode;\n  /** Center (desktop) or bottom row (mobile) content, e.g. {@link Pagination}. */\n  paginationSlot?: React.ReactNode;\n  /** Summary text or node (e.g. current range and total). */\n  summary: React.ReactNode;\n}\n\n/**\n * Footer bar for data tables: rows-per-page control, page navigation, and\n * range summary. Pair `paginationSlot` with {@link Pagination} for numbered\n * controls.\n *\n * v2 sits flush inside {@link TableCard} (`px-3` matches the card's inner\n * gutter); the chip styling now lives on the {@link TableRowsPerPageSelect}\n * trigger itself.\n *\n * @example\n * ```tsx\n * <TablePagination\n *   leadingSlot={<TableRowsPerPageSelect />}\n *   paginationSlot={<Pagination totalPages={5} currentPage={2} onPageChange={setPage} />}\n *   summary=\"20–30 of 100 rows\"\n * />\n * ```\n */\nexport const TablePagination = React.forwardRef<HTMLDivElement, TablePaginationProps>(\n  ({ className, layout = \"desktop\", leadingSlot, paginationSlot, summary, ...props }, ref) => {\n    if (layout === \"mobile\") {\n      return (\n        <div\n          ref={ref}\n          className={cn(\"flex w-full max-w-full flex-col gap-4 px-3 py-3\", className)}\n          {...props}\n        >\n          <div className=\"flex w-full items-center gap-2\">\n            {leadingSlot != null ? (\n              <div className=\"flex min-w-0 shrink-0 items-center\">{leadingSlot}</div>\n            ) : null}\n            <div\n              className={cn(\n                \"typography-regular-body-sm min-w-0 flex-1 text-content-secondary\",\n                leadingSlot == null && \"text-left\",\n                leadingSlot != null && \"text-right\",\n              )}\n            >\n              {summary}\n            </div>\n          </div>\n          {paginationSlot != null ? (\n            <div className=\"flex justify-center\">{paginationSlot}</div>\n          ) : null}\n        </div>\n      );\n    }\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\"flex w-full flex-wrap items-center gap-3 px-3 py-3\", className)}\n        {...props}\n      >\n        <div className=\"flex min-h-0 min-w-0 flex-1 items-center\">{leadingSlot}</div>\n        {paginationSlot != null ? (\n          <div className=\"flex shrink-0 items-center justify-center\">{paginationSlot}</div>\n        ) : null}\n        <div className=\"typography-regular-body-sm min-w-0 flex-1 text-right text-content-secondary\">\n          {summary}\n        </div>\n      </div>\n    );\n  },\n);\nTablePagination.displayName = \"TablePagination\";\n"],"names":["React","jsxs","cn","jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAmCO,MAAM,kBAAkBA,iBAAM;AAAA,EACnC,CAAC,EAAE,WAAW,SAAS,WAAW,aAAa,gBAAgB,SAAS,GAAG,MAAA,GAAS,QAAQ;AAC1F,QAAI,WAAW,UAAU;AACvB,aACEC,2BAAAA;AAAAA,QAAC;AAAA,QAAA;AAAA,UACC;AAAA,UACA,WAAWC,GAAAA,GAAG,mDAAmD,SAAS;AAAA,UACzE,GAAG;AAAA,UAEJ,UAAA;AAAA,YAAAD,2BAAAA,KAAC,OAAA,EAAI,WAAU,kCACZ,UAAA;AAAA,cAAA,eAAe,OACdE,2BAAAA,IAAC,OAAA,EAAI,WAAU,sCAAsC,uBAAY,IAC/D;AAAA,cACJA,2BAAAA;AAAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,WAAWD,GAAAA;AAAAA,oBACT;AAAA,oBACA,eAAe,QAAQ;AAAA,oBACvB,eAAe,QAAQ;AAAA,kBAAA;AAAA,kBAGxB,UAAA;AAAA,gBAAA;AAAA,cAAA;AAAA,YACH,GACF;AAAA,YACC,kBAAkB,OACjBC,2BAAAA,IAAC,SAAI,WAAU,uBAAuB,0BAAe,IACnD;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAGV;AAEA,WACEF,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAWC,GAAAA,GAAG,sDAAsD,SAAS;AAAA,QAC5E,GAAG;AAAA,QAEJ,UAAA;AAAA,UAAAC,2BAAAA,IAAC,OAAA,EAAI,WAAU,4CAA4C,UAAA,aAAY;AAAA,UACtE,kBAAkB,OACjBA,2BAAAA,IAAC,SAAI,WAAU,6CAA6C,0BAAe,IACzE;AAAA,UACJA,2BAAAA,IAAC,OAAA,EAAI,WAAU,+EACZ,UAAA,QAAA,CACH;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AACF;AACA,gBAAgB,cAAc;;"}

package/dist/cjs/index.cjs

@@ -294,8 +294,11 @@ exports.DrawerTrigger = Drawer.DrawerTrigger;
 exports.DropdownMenu = DropdownMenu.DropdownMenu;
 exports.DropdownMenuContent = DropdownMenu.DropdownMenuContent;
 exports.DropdownMenuGroup = DropdownMenu.DropdownMenuGroup;
+exports.DropdownMenuHeader = DropdownMenu.DropdownMenuHeader;
 exports.DropdownMenuItem = DropdownMenu.DropdownMenuItem;
 exports.DropdownMenuLabel = DropdownMenu.DropdownMenuLabel;
+exports.DropdownMenuRadioGroup = DropdownMenu.DropdownMenuRadioGroup;
+exports.DropdownMenuRadioItem = DropdownMenu.DropdownMenuRadioItem;
 exports.DropdownMenuSeparator = DropdownMenu.DropdownMenuSeparator;
 exports.DropdownMenuTrigger = DropdownMenu.DropdownMenuTrigger;
 exports.EmptyState = EmptyState.EmptyState;
@@ -493,6 +496,7 @@ exports.Table = Table.Table;
 exports.TableBody = Table.TableBody;
 exports.TableCard = Table.TableCard;
 exports.TableCell = Table.TableCell;
+exports.TableCellContent = Table.TableCellContent;
 exports.TableCellGroup = Table.TableCellGroup;
 exports.TableFooter = Table.TableFooter;
 exports.TableHead = Table.TableHead;

package/dist/cjs/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/Checkbox/Checkbox.mjs

@@ -5,11 +5,21 @@ import * as React from "react";
 import { cn } from "../../utils/cn.mjs";
 import { CheckIcon } from "../Icons/CheckIcon.mjs";
 import { MinusIcon } from "../Icons/MinusIcon.mjs";
+const BOX_SIZE_CLASS = {
+  "20": "size-5",
+  "16": "size-4"
+};
+const INDICATOR_SIZE_CLASS = {
+  "20": "size-3",
+  "16": "size-2.5"
+};
 const Checkbox = React.forwardRef(
-  ({ className, size = "default", label, helperText, disabled, name, ...props }, ref) => {
+  ({ className, size = "20", label, helperText, disabled, name, ...props }, ref) => {
     const id = React.useId();
     const helperTextId = helperText ? `${id}-helper` : void 0;
     const hasLabel = Boolean(label || helperText);
+    const boxSize = size === "16" ? "16" : "20";
+    const useSmallLabelTypography = size === "small";
     if (process.env.NODE_ENV !== "production" && !label && !props["aria-label"] && !props["aria-labelledby"]) {
       console.warn(
         "Checkbox: No accessible name provided. Add a `label`, `aria-label`, or `aria-labelledby` prop so screen readers can announce this checkbox."
@@ -29,7 +39,8 @@ const Checkbox = React.forwardRef(
       "span",
       {
         className: cn(
-          "relative inline-flex size-5 shrink-0",
+          "relative inline-flex shrink-0",
+          BOX_SIZE_CLASS[boxSize],
           // Alignment when used with label
           label && (helperText ? "mt-1" : "mt-0.5")
         ),
@@ -60,7 +71,8 @@ const Checkbox = React.forwardRef(
               onCheckedChange: handleCheckedChange,
               className: cn(
                 // Base styles
-                "flex size-5 items-center justify-center rounded border-2",
+                "flex items-center justify-center rounded border-2",
+                BOX_SIZE_CLASS[boxSize],
                 "transition-[border-color,background-color,color,box-shadow] duration-150",
                 // Default state
                 "border-content-primary bg-transparent text-transparent",
@@ -83,7 +95,8 @@ const Checkbox = React.forwardRef(
                 {
                   forceMount: true,
                   className: cn(
-                    "flex size-3 items-center justify-center text-content-primary-inverted",
+                    "flex items-center justify-center text-content-primary-inverted",
+                    INDICATOR_SIZE_CLASS[boxSize],
                     "data-[state=unchecked]:invisible"
                   ),
                   children: props.checked === "indeterminate" ? /* @__PURE__ */ jsx(MinusIcon, {}) : /* @__PURE__ */ jsx(CheckIcon, {})
@@ -115,7 +128,7 @@ const Checkbox = React.forwardRef(
                 className: cn(
                   "cursor-pointer select-none text-content-primary",
                   "group-has-disabled:cursor-not-allowed group-has-disabled:text-content-tertiary",
-                  size === "small" ? "typography-semibold-body-md" : "typography-semibold-body-lg"
+                  useSmallLabelTypography ? "typography-semibold-body-md" : "typography-semibold-body-lg"
                 ),
                 children: label
               }
@@ -128,7 +141,7 @@ const Checkbox = React.forwardRef(
               className: cn(
                 "ml-7 text-content-secondary",
                 "in-[.is-disabled]:cursor-not-allowed in-[.is-disabled]:text-content-tertiary",
-                size === "small" ? "typography-regular-body-sm" : "typography-regular-body-md"
+                useSmallLabelTypography ? "typography-regular-body-sm" : "typography-regular-body-md"
               ),
               children: helperText
             }

package/dist/components/Checkbox/Checkbox.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.mjs","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import * as CheckboxPrimitive from \"@radix-ui/react-checkbox\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { CheckIcon } from \"../Icons/CheckIcon\";\nimport { MinusIcon } from \"../Icons/MinusIcon\";\n\n/** Size variant controlling label and helper text typography. */\nexport type CheckboxSize = \"default\" | \"small\";\n\nexport interface CheckboxProps\n  extends Omit<React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>, \"asChild\"> {\n  /** Size variant that controls label and helper text typography. @default \"default\" */\n  size?: CheckboxSize;\n  /** Label text displayed next to the checkbox. */\n  label?: string;\n  /** Descriptive text displayed below the label. */\n  helperText?: string;\n}\n\n/**\n * A checkbox input with optional label and helper text. Supports checked,\n * unchecked, and indeterminate states.\n *\n * The ref type is intentionally `HTMLInputElement` (not `HTMLButtonElement`) for\n * form-library compatibility — libraries like react-hook-form call `register()`\n * which expects an `HTMLInputElement` ref. A hidden `<input>` is synced to the\n * Radix checkbox state via `useImperativeHandle`.\n *\n * @example\n * ```tsx\n * <Checkbox label=\"Accept terms\" helperText=\"Required to continue\" />\n * ```\n */\nexport const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(\n  ({ className, size = \"default\", label, helperText, disabled, name, ...props }, ref) => {\n    const id = React.useId();\n    const helperTextId = helperText ? `${id}-helper` : undefined;\n    const hasLabel = Boolean(label || helperText);\n\n    if (\n      process.env.NODE_ENV !== \"production\" &&\n      !label &&\n      !props[\"aria-label\"] &&\n      !props[\"aria-labelledby\"]\n    ) {\n      console.warn(\n        \"Checkbox: No accessible name provided. Add a `label`, `aria-label`, or `aria-labelledby` prop so screen readers can announce this checkbox.\",\n      );\n    }\n\n    // Hidden input for form library compatibility (e.g. react-hook-form register)\n    const inputRef = React.useRef<HTMLInputElement>(null);\n    React.useImperativeHandle(ref, () => inputRef.current as HTMLInputElement);\n\n    const handleCheckedChange = (value: boolean | \"indeterminate\") => {\n      const checked = value === true;\n      if (inputRef.current) {\n        inputRef.current.checked = checked;\n        inputRef.current.dispatchEvent(new Event(\"change\", { bubbles: true }));\n      }\n      props.onCheckedChange?.(value);\n    };\n\n    const checkboxElement = (\n      <span\n        className={cn(\n          \"relative inline-flex size-5 shrink-0\",\n          // Alignment when used with label\n          label && (helperText ? \"mt-1\" : \"mt-0.5\"),\n        )}\n      >\n        <input\n          ref={inputRef}\n          type=\"checkbox\"\n          name={name}\n          disabled={disabled}\n          aria-hidden\n          tabIndex={-1}\n          onChange={() => {}}\n          className=\"pointer-events-none absolute size-px overflow-hidden opacity-0\"\n          style={{ clip: \"rect(0,0,0,0)\" }}\n        />\n        <CheckboxPrimitive.Root\n          id={id}\n          disabled={disabled}\n          aria-describedby={helperTextId}\n          data-testid=\"checkbox\"\n          {...props}\n          onCheckedChange={handleCheckedChange}\n          className={cn(\n            // Base styles\n            \"flex size-5 items-center justify-center rounded border-2\",\n            \"transition-[border-color,background-color,color,box-shadow] duration-150\",\n            // Default state\n            \"border-content-primary bg-transparent text-transparent\",\n            // Checked state\n            \"data-[state=checked]:border-content-primary data-[state=checked]:bg-content-primary data-[state=checked]:text-content-primary-inverted\",\n            // Indeterminate state\n            \"data-[state=indeterminate]:border-content-primary data-[state=indeterminate]:bg-content-primary data-[state=indeterminate]:text-content-primary-inverted\",\n            // Hover & active state\n            \"hover:ring-2 hover:ring-brand-primary-default group-hover:ring-2 group-hover:ring-brand-primary-default\",\n            \"not-disabled:active:ring-2 not-disabled:active:ring-brand-primary-default\",\n            // Focus state\n            \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-interaction-focus focus-visible:ring-offset-2 focus-visible:ring-offset-bg-primary\",\n            // Disabled state\n            \"disabled:cursor-not-allowed disabled:border-neutral-alphas-600 disabled:ring-0 disabled:group-hover:ring-0\",\n            \"disabled:data-[state=checked]:border-neutral-alphas-600 disabled:data-[state=checked]:bg-neutral-alphas-600 disabled:data-[state=checked]:text-content-tertiary\",\n            !hasLabel && className,\n          )}\n        >\n          <CheckboxPrimitive.Indicator\n            forceMount\n            className={cn(\n              \"flex size-3 items-center justify-center text-content-primary-inverted\",\n              \"data-[state=unchecked]:invisible\",\n            )}\n          >\n            {props.checked === \"indeterminate\" ? <MinusIcon /> : <CheckIcon />}\n          </CheckboxPrimitive.Indicator>\n        </CheckboxPrimitive.Root>\n      </span>\n    );\n\n    if (!hasLabel) {\n      return checkboxElement;\n    }\n\n    return (\n      <div\n        className={cn(\n          \"inline-flex flex-col gap-0.5\",\n          disabled && \"is-disabled cursor-not-allowed\",\n          className,\n        )}\n      >\n        <div className=\"group inline-flex items-start gap-2\">\n          {checkboxElement}\n          {label && (\n            <label\n              htmlFor={id}\n              className={cn(\n                \"cursor-pointer select-none text-content-primary\",\n                \"group-has-disabled:cursor-not-allowed group-has-disabled:text-content-tertiary\",\n                size === \"small\" ? \"typography-semibold-body-md\" : \"typography-semibold-body-lg\",\n              )}\n            >\n              {label}\n            </label>\n          )}\n        </div>\n        {helperText && (\n          <span\n            id={helperTextId}\n            className={cn(\n              \"ml-7 text-content-secondary\",\n              \"in-[.is-disabled]:cursor-not-allowed in-[.is-disabled]:text-content-tertiary\",\n              size === \"small\" ? \"typography-regular-body-sm\" : \"typography-regular-body-md\",\n            )}\n          >\n            {helperText}\n          </span>\n        )}\n      </div>\n    );\n  },\n);\n\nCheckbox.displayName = \"Checkbox\";\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"Checkbox.mjs","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import * as CheckboxPrimitive from \"@radix-ui/react-checkbox\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { CheckIcon } from \"../Icons/CheckIcon\";\nimport { MinusIcon } from \"../Icons/MinusIcon\";\n\n/**\n * Size variant for the checkbox.\n *\n * - `\"20\"` (default) — 20px box, body-lg label.\n * - `\"16\"` — 16px box, body-md label, used in compact contexts like data tables.\n * - `\"default\"` and `\"small\"` are legacy aliases retained for back-compat\n *   (`\"default\"` → `\"20\"`, `\"small\"` → `\"20\"` with smaller label typography).\n */\nexport type CheckboxSize =\n  | \"20\"\n  | \"16\"\n  /** @deprecated Use `\"20\"` instead. */\n  | \"default\"\n  /** @deprecated Use `\"20\"` (the smaller-typography variant remains via `\"small\"`). */\n  | \"small\";\n\nconst BOX_SIZE_CLASS: Record<\"20\" | \"16\", string> = {\n  \"20\": \"size-5\",\n  \"16\": \"size-4\",\n};\n\nconst INDICATOR_SIZE_CLASS: Record<\"20\" | \"16\", string> = {\n  \"20\": \"size-3\",\n  \"16\": \"size-2.5\",\n};\n\nexport interface CheckboxProps\n  extends Omit<React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>, \"asChild\"> {\n  /** Size variant. @default \"20\" */\n  size?: CheckboxSize;\n  /** Label text displayed next to the checkbox. */\n  label?: string;\n  /** Descriptive text displayed below the label. */\n  helperText?: string;\n}\n\n/**\n * A checkbox input with optional label and helper text. Supports checked,\n * unchecked, and indeterminate states.\n *\n * The ref type is intentionally `HTMLInputElement` (not `HTMLButtonElement`) for\n * form-library compatibility — libraries like react-hook-form call `register()`\n * which expects an `HTMLInputElement` ref. A hidden `<input>` is synced to the\n * Radix checkbox state via `useImperativeHandle`.\n *\n * @example\n * ```tsx\n * <Checkbox label=\"Accept terms\" helperText=\"Required to continue\" />\n * ```\n */\nexport const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(\n  ({ className, size = \"20\", label, helperText, disabled, name, ...props }, ref) => {\n    const id = React.useId();\n    const helperTextId = helperText ? `${id}-helper` : undefined;\n    const hasLabel = Boolean(label || helperText);\n    const boxSize: \"20\" | \"16\" = size === \"16\" ? \"16\" : \"20\";\n    const useSmallLabelTypography = size === \"small\";\n\n    if (\n      process.env.NODE_ENV !== \"production\" &&\n      !label &&\n      !props[\"aria-label\"] &&\n      !props[\"aria-labelledby\"]\n    ) {\n      console.warn(\n        \"Checkbox: No accessible name provided. Add a `label`, `aria-label`, or `aria-labelledby` prop so screen readers can announce this checkbox.\",\n      );\n    }\n\n    // Hidden input for form library compatibility (e.g. react-hook-form register)\n    const inputRef = React.useRef<HTMLInputElement>(null);\n    React.useImperativeHandle(ref, () => inputRef.current as HTMLInputElement);\n\n    const handleCheckedChange = (value: boolean | \"indeterminate\") => {\n      const checked = value === true;\n      if (inputRef.current) {\n        inputRef.current.checked = checked;\n        inputRef.current.dispatchEvent(new Event(\"change\", { bubbles: true }));\n      }\n      props.onCheckedChange?.(value);\n    };\n\n    const checkboxElement = (\n      <span\n        className={cn(\n          \"relative inline-flex shrink-0\",\n          BOX_SIZE_CLASS[boxSize],\n          // Alignment when used with label\n          label && (helperText ? \"mt-1\" : \"mt-0.5\"),\n        )}\n      >\n        <input\n          ref={inputRef}\n          type=\"checkbox\"\n          name={name}\n          disabled={disabled}\n          aria-hidden\n          tabIndex={-1}\n          onChange={() => {}}\n          className=\"pointer-events-none absolute size-px overflow-hidden opacity-0\"\n          style={{ clip: \"rect(0,0,0,0)\" }}\n        />\n        <CheckboxPrimitive.Root\n          id={id}\n          disabled={disabled}\n          aria-describedby={helperTextId}\n          data-testid=\"checkbox\"\n          {...props}\n          onCheckedChange={handleCheckedChange}\n          className={cn(\n            // Base styles\n            \"flex items-center justify-center rounded border-2\",\n            BOX_SIZE_CLASS[boxSize],\n            \"transition-[border-color,background-color,color,box-shadow] duration-150\",\n            // Default state\n            \"border-content-primary bg-transparent text-transparent\",\n            // Checked state\n            \"data-[state=checked]:border-content-primary data-[state=checked]:bg-content-primary data-[state=checked]:text-content-primary-inverted\",\n            // Indeterminate state\n            \"data-[state=indeterminate]:border-content-primary data-[state=indeterminate]:bg-content-primary data-[state=indeterminate]:text-content-primary-inverted\",\n            // Hover & active state\n            \"hover:ring-2 hover:ring-brand-primary-default group-hover:ring-2 group-hover:ring-brand-primary-default\",\n            \"not-disabled:active:ring-2 not-disabled:active:ring-brand-primary-default\",\n            // Focus state\n            \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-interaction-focus focus-visible:ring-offset-2 focus-visible:ring-offset-bg-primary\",\n            // Disabled state\n            \"disabled:cursor-not-allowed disabled:border-neutral-alphas-600 disabled:ring-0 disabled:group-hover:ring-0\",\n            \"disabled:data-[state=checked]:border-neutral-alphas-600 disabled:data-[state=checked]:bg-neutral-alphas-600 disabled:data-[state=checked]:text-content-tertiary\",\n            !hasLabel && className,\n          )}\n        >\n          <CheckboxPrimitive.Indicator\n            forceMount\n            className={cn(\n              \"flex items-center justify-center text-content-primary-inverted\",\n              INDICATOR_SIZE_CLASS[boxSize],\n              \"data-[state=unchecked]:invisible\",\n            )}\n          >\n            {props.checked === \"indeterminate\" ? <MinusIcon /> : <CheckIcon />}\n          </CheckboxPrimitive.Indicator>\n        </CheckboxPrimitive.Root>\n      </span>\n    );\n\n    if (!hasLabel) {\n      return checkboxElement;\n    }\n\n    return (\n      <div\n        className={cn(\n          \"inline-flex flex-col gap-0.5\",\n          disabled && \"is-disabled cursor-not-allowed\",\n          className,\n        )}\n      >\n        <div className=\"group inline-flex items-start gap-2\">\n          {checkboxElement}\n          {label && (\n            <label\n              htmlFor={id}\n              className={cn(\n                \"cursor-pointer select-none text-content-primary\",\n                \"group-has-disabled:cursor-not-allowed group-has-disabled:text-content-tertiary\",\n                useSmallLabelTypography\n                  ? \"typography-semibold-body-md\"\n                  : \"typography-semibold-body-lg\",\n              )}\n            >\n              {label}\n            </label>\n          )}\n        </div>\n        {helperText && (\n          <span\n            id={helperTextId}\n            className={cn(\n              \"ml-7 text-content-secondary\",\n              \"in-[.is-disabled]:cursor-not-allowed in-[.is-disabled]:text-content-tertiary\",\n              useSmallLabelTypography ? \"typography-regular-body-sm\" : \"typography-regular-body-md\",\n            )}\n          >\n            {helperText}\n          </span>\n        )}\n      </div>\n    );\n  },\n);\n\nCheckbox.displayName = \"Checkbox\";\n"],"names":[],"mappings":"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"}