npm - @fanvue/ui - Versions diffs - 2.18.0 → 2.20.0 - Mend

@fanvue/ui 2.18.0 → 2.20.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (38) hide show

package/dist/components/Table/Table.mjs CHANGED Viewed

@@ -2,6 +2,8 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { cn } from "../../utils/cn.mjs";
+import { ArrowDownIcon } from "../Icons/ArrowDownIcon.mjs";
+import { ArrowUpIcon } from "../Icons/ArrowUpIcon.mjs";
 import { Select, SelectContent, SelectItem } from "../Select/Select.mjs";
 const TableSizeContext = React.createContext("md");
 function useTableSize() {
@@ -14,7 +16,7 @@ const TableCard = React.forwardRef(
       {
         ref,
         className: 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
@@ -29,10 +31,7 @@ const TableToolbar = React.forwardRef(
       "div",
       {
         ref,
-        className: cn(
-          "flex flex-wrap items-center gap-4 rounded-t-md bg-bg-primary px-6",
-          className
-        ),
+        className: cn("flex flex-wrap items-center gap-4 px-4 py-3", className),
         ...props
       }
     );
@@ -40,16 +39,12 @@ const TableToolbar = React.forwardRef(
 );
 TableToolbar.displayName = "TableToolbar";
 const TableScrollArea = React.forwardRef(
-  ({ className, roundTop = true, children, ...props }, ref) => {
+  ({ className, children, roundTop: _roundTop, ...props }, ref) => {
     return /* @__PURE__ */ jsx(
       "div",
       {
         ref,
-        className: cn(
-          "relative w-full min-w-0 overflow-hidden",
-          roundTop && "rounded-t-md",
-          className
-        ),
+        className: cn("relative w-full min-w-0 overflow-hidden", className),
         ...props,
         children: /* @__PURE__ */ jsx("div", { className: "overflow-x-auto", children })
       }
@@ -75,23 +70,13 @@ const Table = React.forwardRef(
 Table.displayName = "Table";
 const TableHeader = React.forwardRef(
   ({ className, ...props }, ref) => {
-    return /* @__PURE__ */ jsx(
-      "thead",
-      {
-        ref,
-        className: cn(
-          "[&_tr:first-child_th:first-child]:rounded-tl-md [&_tr:first-child_th:last-child]:rounded-tr-md",
-          className
-        ),
-        ...props
-      }
-    );
+    return /* @__PURE__ */ jsx("thead", { ref, className: cn(className), ...props });
   }
 );
 TableHeader.displayName = "TableHeader";
 const TableBody = React.forwardRef(
   ({ className, ...props }, ref) => {
-    return /* @__PURE__ */ jsx("tbody", { ref, className: cn(className), ...props });
+    return /* @__PURE__ */ jsx("tbody", { ref, className: cn("[&_tr:last-child_td]:border-b-0", className), ...props });
   }
 );
 TableBody.displayName = "TableBody";
@@ -109,7 +94,7 @@ const TableRow = React.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"
 };
@@ -121,7 +106,7 @@ const TableHead = React.forwardRef(
         ref,
         scope,
         className: 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
         ),
@@ -132,17 +117,18 @@ const TableHead = React.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: ""
@@ -150,7 +136,7 @@ const CELL_INTENT_CLASSES = {
 const TableCell = React.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__ */ jsx(
       "td",
       {
@@ -171,14 +157,32 @@ const TableCell = React.forwardRef(
 TableCell.displayName = "TableCell";
 const TableCellGroup = React.forwardRef(
   ({ className, ...props }, ref) => {
-    return /* @__PURE__ */ jsx("div", { ref, className: cn("flex items-center gap-2.5", className), ...props });
+    return /* @__PURE__ */ jsx("div", { ref, className: cn("flex items-center gap-1", className), ...props });
   }
 );
 TableCellGroup.displayName = "TableCellGroup";
+function TableCellContent({
+  primary,
+  secondary,
+  primaryAdornment,
+  secondaryAdornment,
+  className
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-0.5", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+      /* @__PURE__ */ jsx("span", { className: "typography-semibold-body-sm text-content-primary", children: primary }),
+      primaryAdornment
+    ] }),
+    (secondary != null || secondaryAdornment != null) && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+      secondary != null && /* @__PURE__ */ jsx("span", { className: "typography-regular-body-sm text-content-secondary", children: secondary }),
+      secondaryAdornment
+    ] })
+  ] });
+}
+TableCellContent.displayName = "TableCellContent";
 const TableMediaThumbnail = React.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__ */ jsx(
       "div",
       {
@@ -242,26 +246,41 @@ const TablePillProgressLayout = React.forwardRef(({ className, ...props }, ref)
     "div",
     {
       ref,
-      className: cn("flex min-w-[120px] flex-col items-center gap-3", className),
+      className: cn("flex min-w-[120px] flex-col items-start gap-2", className),
       ...props
     }
   );
 });
 TablePillProgressLayout.displayName = "TablePillProgressLayout";
 const TableSortLabel = React.forwardRef(
-  ({ className, children, ...props }, ref) => {
-    return /* @__PURE__ */ jsxs("span", { ref, className: cn("inline-flex items-center gap-2.5", className), ...props, children: [
-      /* @__PURE__ */ jsx("span", { className: "typography-semibold-body-sm", children }),
-      /* @__PURE__ */ jsx("span", { className: "text-content-secondary", "aria-hidden": true, children: "↕" })
-    ] });
+  ({ className, children, direction = null, ...props }, ref) => {
+    const Icon = direction === "desc" ? ArrowDownIcon : ArrowUpIcon;
+    return /* @__PURE__ */ jsxs(
+      "span",
+      {
+        ref,
+        className: cn("inline-flex items-center gap-1 text-content-primary", className),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn(
+                "typography-semibold-body-sm",
+                direction != null && "border-b border-content-primary pb-px"
+              ),
+              children
+            }
+          ),
+          direction != null && /* @__PURE__ */ jsx(Icon, { className: "size-4 shrink-0", "aria-hidden": true })
+        ]
+      }
+    );
   }
 );
 TableSortLabel.displayName = "TableSortLabel";
 function TableStackedText({ title, subtitle }) {
-  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
-    /* @__PURE__ */ jsx("span", { className: "typography-semibold-body-md", children: title }),
-    /* @__PURE__ */ jsx("span", { className: "typography-regular-body-sm text-content-secondary", children: subtitle })
-  ] });
+  return /* @__PURE__ */ jsx(TableCellContent, { primary: title, secondary: subtitle });
 }
 TableStackedText.displayName = "TableStackedText";
 const TableLineClamp = React.forwardRef(
@@ -290,7 +309,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__ */ jsxs(SelectContent, { children: [
         /* @__PURE__ */ jsx(SelectItem, { value: "10", children: "10 rows per page" }),
@@ -305,6 +324,7 @@ export {
   TableBody,
   TableCard,
   TableCell,
+  TableCellContent,
   TableCellGroup,
   TableFooter,
   TableHead,

package/dist/components/Table/Table.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Table.mjs","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":[],"mappings":"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"}
1	+ {"version":3,"file":"Table.mjs","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":[],"mappings":"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"}

package/dist/components/Table/TablePagination.mjs CHANGED Viewed

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

package/dist/components/Table/TablePagination.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TablePagination.mjs","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":[],"mappings":";;;;~~AA8BO~~,MAAM,kBAAkB,MAAM;AAAA,EACnC,CAAC,EAAE,WAAW,SAAS,WAAW,aAAa,gBAAgB,SAAS,GAAG,MAAA,GAAS,QAAQ;AAC1F,QAAI,WAAW,UAAU;AACvB,aACE;AAAA,QAAC;AAAA,QAAA;AAAA,UACC;AAAA,UACA,WAAW,GAAG,~~8CAA8C~~,SAAS;AAAA,~~UACpE~~,GAAG;AAAA,UAEJ,UAAA;AAAA,YAAA,qBAAC,OAAA,EAAI,WAAU,~~oCACZ~~,UAAA;AAAA,cAAA,eAAe,OACd,oBAAC,OAAA,EAAI,WAAU,~~sEACZ~~,~~uBACH~~,~~IACE~~;AAAA,cACJ;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,WAAW;AAAA,oBACT;AAAA,oBACA,eAAe,QAAQ;AAAA,oBACvB,eAAe,QAAQ;AAAA,kBAAA;AAAA,kBAGxB,UAAA;AAAA,gBAAA;AAAA,cAAA;AAAA,YACH,GACF;AAAA,YACC,kBAAkB,OACjB,oBAAC,SAAI,WAAU,uBAAuB,0BAAe,IACnD;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAGV;AAEA,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAW,GAAG,~~iDAAiD~~,SAAS;AAAA,~~QACvE~~,GAAG;AAAA,QAEJ,UAAA;AAAA,UAAA,oBAAC,OAAA,EAAI,WAAU,~~mEACZ~~,UAAA,~~eAAe,OACd,oBAAC,OAAA,EAAI,WAAU,uDAAuD,UAAA,YAAA,CAAY,IAChF,MACN~~;AAAA,~~UACC~~,kBAAkB,OACjB,oBAAC,SAAI,WAAU,6CAA6C,0BAAe,IACzE;AAAA,UACJ,oBAAC,OAAA,EAAI,WAAU,+EACZ,UAAA,QAAA,CACH;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AACF;AACA,gBAAgB,cAAc;"}
1	+ {"version":3,"file":"TablePagination.mjs","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":[],"mappings":";;;;AAmCO,MAAM,kBAAkB,MAAM;AAAA,EACnC,CAAC,EAAE,WAAW,SAAS,WAAW,aAAa,gBAAgB,SAAS,GAAG,MAAA,GAAS,QAAQ;AAC1F,QAAI,WAAW,UAAU;AACvB,aACE;AAAA,QAAC;AAAA,QAAA;AAAA,UACC;AAAA,UACA,WAAW,GAAG,mDAAmD,SAAS;AAAA,UACzE,GAAG;AAAA,UAEJ,UAAA;AAAA,YAAA,qBAAC,OAAA,EAAI,WAAU,kCACZ,UAAA;AAAA,cAAA,eAAe,OACd,oBAAC,OAAA,EAAI,WAAU,sCAAsC,uBAAY,IAC/D;AAAA,cACJ;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,WAAW;AAAA,oBACT;AAAA,oBACA,eAAe,QAAQ;AAAA,oBACvB,eAAe,QAAQ;AAAA,kBAAA;AAAA,kBAGxB,UAAA;AAAA,gBAAA;AAAA,cAAA;AAAA,YACH,GACF;AAAA,YACC,kBAAkB,OACjB,oBAAC,SAAI,WAAU,uBAAuB,0BAAe,IACnD;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAGV;AAEA,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAW,GAAG,sDAAsD,SAAS;AAAA,QAC5E,GAAG;AAAA,QAEJ,UAAA;AAAA,UAAA,oBAAC,OAAA,EAAI,WAAU,4CAA4C,UAAA,aAAY;AAAA,UACtE,kBAAkB,OACjB,oBAAC,SAAI,WAAU,6CAA6C,0BAAe,IACzE;AAAA,UACJ,oBAAC,OAAA,EAAI,WAAU,+EACZ,UAAA,QAAA,CACH;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AACF;AACA,gBAAgB,cAAc;"}