@fanvue/ui 2.0.0 → 2.1.1

package/dist/components/Table/Table.mjs

@@ -0,0 +1,324 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../utils/cn.mjs";
+import { Select, SelectContent, SelectItem } from "../Select/Select.mjs";
+const TableSizeContext = React.createContext("md");
+function useTableSize() {
+  return React.useContext(TableSizeContext);
+}
+const TableCard = React.forwardRef(
+  ({ className, size = "md", ...props }, ref) => {
+    return /* @__PURE__ */ jsx(TableSizeContext.Provider, { value: size, children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn(
+          "isolate flex flex-col gap-4 overflow-hidden rounded-md bg-bg-primary pb-4",
+          className
+        ),
+        ...props
+      }
+    ) });
+  }
+);
+TableCard.displayName = "TableCard";
+const TableToolbar = React.forwardRef(
+  ({ className, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn(
+          "flex flex-wrap items-center gap-4 rounded-t-md bg-bg-primary px-6",
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+TableToolbar.displayName = "TableToolbar";
+const TableScrollArea = React.forwardRef(
+  ({ className, roundTop = true, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn(
+          "relative w-full min-w-0 overflow-hidden",
+          roundTop && "rounded-t-md",
+          className
+        ),
+        ...props,
+        children: /* @__PURE__ */ jsx("div", { className: "overflow-x-auto", children })
+      }
+    );
+  }
+);
+TableScrollArea.displayName = "TableScrollArea";
+const Table = React.forwardRef(
+  ({ className, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "table",
+      {
+        ref,
+        className: cn(
+          "w-full caption-bottom border-separate border-spacing-0 text-left",
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+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
+      }
+    );
+  }
+);
+TableHeader.displayName = "TableHeader";
+const TableBody = React.forwardRef(
+  ({ className, ...props }, ref) => {
+    return /* @__PURE__ */ jsx("tbody", { ref, className: cn(className), ...props });
+  }
+);
+TableBody.displayName = "TableBody";
+const TableFooter = React.forwardRef(
+  ({ className, ...props }, ref) => {
+    return /* @__PURE__ */ jsx("tfoot", { ref, className: cn(className), ...props });
+  }
+);
+TableFooter.displayName = "TableFooter";
+const TableRow = React.forwardRef(
+  ({ className, ...props }, ref) => {
+    return /* @__PURE__ */ jsx("tr", { ref, className: cn(className), ...props });
+  }
+);
+TableRow.displayName = "TableRow";
+const HEAD_INTENT_CLASSES = {
+  default: "text-left",
+  checkbox: "w-8 min-w-8 max-w-8 text-center",
+  sort: "text-right",
+  leading: "min-w-0 w-2/5 text-left"
+};
+const TableHead = React.forwardRef(
+  ({ className, intent = "default", scope = "col", ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "th",
+      {
+        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",
+          HEAD_INTENT_CLASSES[intent],
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+TableHead.displayName = "TableHead";
+const CELL_MIN_HEIGHT = {
+  md: "min-h-[60px]",
+  lg: "min-h-[80px]"
+};
+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"
+};
+const CELL_INTENT_CLASSES = {
+  default: "",
+  checkbox: "text-center",
+  stacked: "align-top",
+  multiline: "max-w-[240px]",
+  sideLabel: ""
+};
+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";
+    return /* @__PURE__ */ jsx(
+      "td",
+      {
+        ref,
+        className: cn(
+          typo,
+          "align-middle text-content-primary",
+          CELL_VARIANT_CLASSES[cellVariant],
+          CELL_MIN_HEIGHT[size],
+          CELL_INTENT_CLASSES[intent],
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+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 });
+  }
+);
+TableCellGroup.displayName = "TableCellGroup";
+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";
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn(
+          align === "center" && "flex w-16 shrink-0 justify-center",
+          align === "start" && "inline-flex shrink-0"
+        ),
+        children: /* @__PURE__ */ jsx("div", { className: cn(frame, blurred && "blur-[2px]", className), ...props, children: /* @__PURE__ */ jsx("img", { alt, className: "size-full object-cover", src }) })
+      }
+    );
+  }
+);
+TableMediaThumbnail.displayName = "TableMediaThumbnail";
+const TableStatusDot = React.forwardRef(
+  ({ className, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn("size-2 shrink-0 rounded-full bg-info-content", className),
+        ...props
+      }
+    );
+  }
+);
+TableStatusDot.displayName = "TableStatusDot";
+const TableProgressTrack = React.forwardRef(
+  ({ className, value = 0, "aria-label": ariaLabel = "Progress", ...props }, ref) => {
+    const width = Math.min(100, Math.max(0, value));
+    const rounded = Math.round(width);
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        role: "progressbar",
+        "aria-valuenow": rounded,
+        "aria-valuemin": 0,
+        "aria-valuemax": 100,
+        "aria-label": ariaLabel,
+        className: cn(
+          "relative h-1 w-full overflow-hidden rounded-full bg-neutral-alphas-200",
+          className
+        ),
+        ...props,
+        children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "absolute top-0 left-0 h-1 rounded-full bg-buttons-primary",
+            style: { width: `${width}%` },
+            "aria-hidden": true
+          }
+        )
+      }
+    );
+  }
+);
+TableProgressTrack.displayName = "TableProgressTrack";
+const TablePillProgressLayout = React.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn("flex min-w-[120px] flex-col items-center gap-3", 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: "↕" })
+    ] });
+  }
+);
+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 })
+  ] });
+}
+TableStackedText.displayName = "TableStackedText";
+const TableLineClamp = React.forwardRef(
+  ({ className, lines = 2, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn(
+          lines === 1 && "line-clamp-1",
+          lines === 2 && "line-clamp-2",
+          lines === 3 && "line-clamp-3",
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+TableLineClamp.displayName = "TableLineClamp";
+function TableRowsPerPageSelect(props) {
+  const { id, "aria-label": ariaLabel = "Rows per page" } = props;
+  return /* @__PURE__ */ jsx(
+    Select,
+    {
+      defaultValue: "10",
+      size: "32",
+      "aria-label": ariaLabel,
+      className: "w-[154px] [&_button]:rounded-xs [&_button]:border-transparent [&_button]:bg-transparent",
+      id,
+      children: /* @__PURE__ */ jsxs(SelectContent, { children: [
+        /* @__PURE__ */ jsx(SelectItem, { value: "10", children: "10 rows per page" }),
+        /* @__PURE__ */ jsx(SelectItem, { value: "25", children: "25 rows per page" }),
+        /* @__PURE__ */ jsx(SelectItem, { value: "50", children: "50 rows per page" })
+      ] })
+    }
+  );
+}
+export {
+  Table,
+  TableBody,
+  TableCard,
+  TableCell,
+  TableCellGroup,
+  TableFooter,
+  TableHead,
+  TableHeader,
+  TableLineClamp,
+  TableMediaThumbnail,
+  TablePillProgressLayout,
+  TableProgressTrack,
+  TableRow,
+  TableRowsPerPageSelect,
+  TableScrollArea,
+  TableSortLabel,
+  TableStackedText,
+  TableStatusDot,
+  TableToolbar
+};
+//# sourceMappingURL=Table.mjs.map

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

@@ -0,0 +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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"}

package/dist/components/Table/TablePagination.mjs

@@ -0,0 +1,53 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../utils/cn.mjs";
+const TablePagination = React.forwardRef(
+  ({ className, layout = "desktop", leadingSlot, paginationSlot, summary, ...props }, ref) => {
+    if (layout === "mobile") {
+      return /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref,
+          className: cn("flex w-full max-w-full flex-col gap-3 px-4", 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__ */ jsx(
+                "div",
+                {
+                  className: cn(
+                    "typography-regular-body-md min-w-0 flex-1 text-content-secondary",
+                    leadingSlot == null && "text-left",
+                    leadingSlot != null && "text-right"
+                  ),
+                  children: summary
+                }
+              )
+            ] }),
+            paginationSlot != null ? /* @__PURE__ */ jsx("div", { className: "flex justify-center", children: paginationSlot }) : null
+          ]
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cn("flex w-full flex-wrap items-center gap-3 px-4", 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 }),
+          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 })
+        ]
+      }
+    );
+  }
+);
+TablePagination.displayName = "TablePagination";
+export {
+  TablePagination
+};
+//# sourceMappingURL=TablePagination.mjs.map

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

@@ -0,0 +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;"}