@fanvue/ui 2.18.0 → 2.19.0

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

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

@@ -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

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

package/dist/index.d.ts

@@ -1078,7 +1078,7 @@ export declare const CheckBoxOnIcon: React_2.ForwardRefExoticComponent<BaseIconP
 export declare type CheckBoxOnIconProps = BaseIconProps;
 
 export declare interface CheckboxProps extends Omit<React_2.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>, "asChild"> {
-    /** Size variant that controls label and helper text typography. @default "default" */
+    /** Size variant. @default "20" */
     size?: CheckboxSize;
     /** Label text displayed next to the checkbox. */
     label?: string;
@@ -1086,8 +1086,19 @@ export declare interface CheckboxProps extends Omit<React_2.ComponentPropsWithou
     helperText?: string;
 }
 
-/** Size variant controlling label and helper text typography. */
-export declare type CheckboxSize = "default" | "small";
+/**
+ * Size variant for the checkbox.
+ *
+ * - `"20"` (default) — 20px box, body-lg label.
+ * - `"16"` — 16px box, body-md label, used in compact contexts like data tables.
+ * - `"default"` and `"small"` are legacy aliases retained for back-compat
+ *   (`"default"` → `"20"`, `"small"` → `"20"` with smaller label typography).
+ */
+export declare type CheckboxSize = "20" | "16"
+/** @deprecated Use `"20"` instead. */
+| "default"
+/** @deprecated Use `"20"` (the smaller-typography variant remains via `"small"`). */
+| "small";
 
 /** A checkmark inside a filled circle icon (20 × 20). */
 export declare const CheckCircleIcon: React_2.ForwardRefExoticComponent<React_2.SVGAttributes<SVGSVGElement> & {
@@ -1964,6 +1975,62 @@ export declare const DropdownMenuGroup: React_2.ForwardRefExoticComponent<Dropdo
 /** Props for the {@link DropdownMenuGroup} component. */
 export declare type DropdownMenuGroupProps = React_2.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Group>;
 
+/**
+ * Optional header rendered at the top of a {@link DropdownMenuContent}. Use
+ * `type="default"` to title the menu, or `type="search"` to embed a search
+ * input for filtering long lists.
+ *
+ * Renders an inset separator beneath the row so it slots cleanly above the
+ * first group of items.
+ *
+ * @example
+ * ```tsx
+ * <DropdownMenuContent>
+ *   <DropdownMenuHeader title="Sort by" onClose={() => setOpen(false)} />
+ *   <DropdownMenuItem>Newest</DropdownMenuItem>
+ *   <DropdownMenuItem>Oldest</DropdownMenuItem>
+ * </DropdownMenuContent>
+ * ```
+ */
+export declare const DropdownMenuHeader: React_2.ForwardRefExoticComponent<DropdownMenuHeaderProps & React_2.RefAttributes<HTMLDivElement>>;
+
+export declare interface DropdownMenuHeaderProps extends React_2.HTMLAttributes<HTMLDivElement> {
+    /** Visual type. `"default"` shows a title; `"search"` shows a search input. @default "default" */
+    type?: DropdownMenuHeaderType;
+    /** Height preset for the header row. @default "40" */
+    size?: DropdownMenuHeaderSize;
+    /** Title text shown when `type="default"`. Ignored if `children` is provided. */
+    title?: string;
+    /** Configuration for the embedded search input when `type="search"`. */
+    searchProps?: DropdownMenuHeaderSearchProps;
+    /** Whether to render the close icon button on the right. @default true */
+    showClose?: boolean;
+    /** Fires when the close icon button is activated. */
+    onClose?: () => void;
+    /** Accessible label for the close button. @default "Close menu" */
+    closeLabel?: string;
+}
+
+/** Search-input configuration for {@link DropdownMenuHeader} when `type="search"`. */
+export declare interface DropdownMenuHeaderSearchProps {
+    /** Controlled value of the search input. */
+    value?: string;
+    /** Uncontrolled default value. */
+    defaultValue?: string;
+    /** Fires when the input value changes. */
+    onChange?: (value: string) => void;
+    /** Placeholder text shown when the input is empty. @default "Search…" */
+    placeholder?: string;
+    /** Accessible label for the search input. @default "Search" */
+    "aria-label"?: string;
+}
+
+/** Header height preset. Matches the menu item sizing scale. */
+export declare type DropdownMenuHeaderSize = "40" | "32";
+
+/** Header type. `"default"` shows a title; `"search"` shows a search input. */
+export declare type DropdownMenuHeaderType = "default" | "search";
+
 /**
  * An individual item within a {@link DropdownMenuContent}.
  *
@@ -1982,32 +2049,86 @@ export declare type DropdownMenuGroupProps = React_2.ComponentPropsWithoutRef<ty
 export declare const DropdownMenuItem: React_2.ForwardRefExoticComponent<DropdownMenuItemProps & React_2.RefAttributes<HTMLDivElement>>;
 
 export declare interface DropdownMenuItemProps extends React_2.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> {
-    /** Height of the menu item row. @default "sm" */
+    /** Height of the menu item row. @default "40" */
     size?: DropdownMenuItemSize;
-    /** Whether the item uses destructive (error) styling. */
+    /** Applies the destructive (error) treatment. Use for irreversible actions. @default false */
     destructive?: boolean;
-    /** Icon rendered before the label. */
+    /** Icon (or other node) rendered before the label. */
     leadingIcon?: React_2.ReactNode;
-    /** Icon rendered after the label. */
+    /** Icon (or other node) rendered after the label. */
     trailingIcon?: React_2.ReactNode;
-    /** Whether the item is in a selected state. */
+    /** Marks the item as the current selection in a single-select menu. @default false */
     selected?: boolean;
 }
 
-/** Available sizes for a dropdown menu item. */
-export declare type DropdownMenuItemSize = "sm" | "md";
+/**
+ * Height preset for a dropdown menu item.
+ *
+ * `"40"` (default) and `"32"` are the v2 numeric tokens that mirror the Figma
+ * design system. `"sm"` and `"md"` are deprecated aliases retained for
+ * backwards compatibility — `"sm"` maps to `"32"`, `"md"` maps to `"40"`.
+ */
+export declare type DropdownMenuItemSize = "40" | "32"
+/** @deprecated Use `"32"` instead. */
+| "sm"
+/** @deprecated Use `"40"` instead. */
+| "md";
 
-/** A label for a group of items. Not focusable or selectable. */
+/** A non-interactive label that groups related items within a menu. */
 export declare const DropdownMenuLabel: React_2.ForwardRefExoticComponent<DropdownMenuLabelProps & React_2.RefAttributes<HTMLDivElement>>;
 
+/** Vertical placement of a {@link DropdownMenuLabel} within its group. */
+export declare type DropdownMenuLabelPosition = "default" | "top";
+
 /** Props for the {@link DropdownMenuLabel} component. */
 export declare interface DropdownMenuLabelProps extends React_2.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> {
+    /**
+     * Vertical placement within the surrounding group. `"top"` is used for the
+     * first label directly under a header; `"default"` adds extra top padding to
+     * separate it from preceding items. @default "default"
+     */
+    position?: DropdownMenuLabelPosition;
 }
 
 /** Props for the {@link DropdownMenu} root component. */
 export declare interface DropdownMenuProps extends React_2.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Root> {
 }
 
+/**
+ * Groups {@link DropdownMenuRadioItem} children so they behave as a
+ * single-select set. Controlled via `value`/`onValueChange`.
+ *
+ * @example
+ * ```tsx
+ * <DropdownMenuRadioGroup value={sort} onValueChange={setSort}>
+ *   <DropdownMenuRadioItem value="newest">Newest first</DropdownMenuRadioItem>
+ *   <DropdownMenuRadioItem value="oldest">Oldest first</DropdownMenuRadioItem>
+ * </DropdownMenuRadioGroup>
+ * ```
+ */
+export declare const DropdownMenuRadioGroup: React_2.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuRadioGroupProps & React_2.RefAttributes<HTMLDivElement>>;
+
+/** Props for the {@link DropdownMenuRadioGroup} component. */
+export declare interface DropdownMenuRadioGroupProps extends React_2.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioGroup> {
+}
+
+/**
+ * A single radio-style choice within a {@link DropdownMenuRadioGroup}. Shows
+ * a circular indicator that fills when selected, plus an optional helper line
+ * underneath the title.
+ */
+export declare const DropdownMenuRadioItem: React_2.ForwardRefExoticComponent<DropdownMenuRadioItemProps & React_2.RefAttributes<HTMLDivElement>>;
+
+export declare interface DropdownMenuRadioItemProps extends React_2.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem> {
+    /** Optional secondary text shown below the title. */
+    helper?: string;
+    /** Height of the item row. @default "40" */
+    size?: DropdownMenuRadioItemSize;
+}
+
+/** Height preset for a {@link DropdownMenuRadioItem}. */
+export declare type DropdownMenuRadioItemSize = "40";
+
 /** Visual separator between groups of items. */
 export declare const DropdownMenuSeparator: React_2.ForwardRefExoticComponent<DropdownMenuSeparatorProps & React_2.RefAttributes<HTMLDivElement>>;
 
@@ -3863,20 +3984,25 @@ export declare type SwitchToggleSize = "24" | "32" | "40";
  */
 export declare const Table: React_2.ForwardRefExoticComponent<TableProps & React_2.RefAttributes<HTMLTableElement>>;
 
+/**
+ * `<tbody>` wrapper. Removes the bottom border on cells in the final row to
+ * match the Figma `V2 Table Final Row` treatment.
+ */
 export declare const TableBody: React_2.ForwardRefExoticComponent<TableBodyProps & React_2.RefAttributes<HTMLTableSectionElement>>;
 
 export declare interface TableBodyProps extends React_2.HTMLAttributes<HTMLTableSectionElement> {
 }
 
 /**
- * Surface wrapper for data tables: rounded container, spacing, and size
- * context for {@link TableCell} descendants. Compose with {@link TableScrollArea},
- * {@link Table}, {@link TableHeader}, {@link TableBody}, {@link TableRow},
+ * Surface wrapper for data tables: rounded 24px container with a strong
+ * outer border, inner spacing, and size context for {@link TableCell}
+ * descendants. Compose with {@link TableScrollArea}, {@link Table},
+ * {@link TableHeader}, {@link TableBody}, {@link TableRow},
  * {@link TableHead}, and {@link TableCell}.
  *
  * @example
  * ```tsx
- * <TableCard size="md">
+ * <TableCard>
  *   <TableScrollArea>
  *     <Table>
  *       <TableHeader>
@@ -3901,10 +4027,41 @@ export declare interface TableCardProps extends React_2.HTMLAttributes<HTMLDivEl
     size?: TableSize;
 }
 
+/**
+ * Body cell. v2: `h-16` (or `h-20` when the parent {@link TableCard} uses
+ * `size="lg"`), `px-4 py-3` padding, body-sm typography, and a single
+ * `border-border-primary` rule that is zeroed by {@link TableBody} for the
+ * final row.
+ */
 export declare const TableCell: React_2.ForwardRefExoticComponent<TableCellProps & React_2.RefAttributes<HTMLTableCellElement>>;
 
 /**
- * Horizontal group for icons, chips, and metadata inside a {@link TableCell} (Figma `gap-[10px]`).
+ * Two-line content slot matching Figma `V2 Table Content` — primary line
+ * (semibold) over an optional secondary line (regular, muted) with a 2px
+ * gap. Use inside {@link TableCell} for the common stacked-text pattern.
+ */
+export declare function TableCellContent({ primary, secondary, primaryAdornment, secondaryAdornment, className, }: TableCellContentProps): JSX.Element;
+
+export declare namespace TableCellContent {
+    var displayName: string;
+}
+
+export declare interface TableCellContentProps {
+    /** Primary line (semibold body-sm). */
+    primary: React_2.ReactNode;
+    /** Optional secondary line (regular body-sm, secondary color). */
+    secondary?: React_2.ReactNode;
+    /** Inline node rendered next to the primary line (icon, chip). */
+    primaryAdornment?: React_2.ReactNode;
+    /** Inline node rendered next to the secondary line. */
+    secondaryAdornment?: React_2.ReactNode;
+    /** Class for the outer wrapper. */
+    className?: string;
+}
+
+/**
+ * Horizontal group for icons, chips, and metadata inside a {@link TableCell}
+ * (Figma `gap-[4px]`).
  */
 export declare const TableCellGroup: React_2.ForwardRefExoticComponent<TableCellGroupProps & React_2.RefAttributes<HTMLDivElement>>;
 
@@ -3915,7 +4072,7 @@ export declare interface TableCellGroupProps extends React_2.HTMLAttributes<HTML
 export declare type TableCellIntent = "default" | "checkbox" | "stacked" | "multiline" | "sideLabel";
 
 export declare interface TableCellProps extends React_2.TdHTMLAttributes<HTMLTableCellElement> {
-    /** `pillProgress` uses wider horizontal padding; row dividers match the default weight for visibility. @default "default" */
+    /** Padding preset for the cell. v2 uses identical padding across variants; values are kept for back-compat. @default "default" */
     cellVariant?: TableCellVariant;
     /** Alignment and typography preset for common cell types. @default "default" */
     intent?: TableCellIntent;
@@ -3929,6 +4086,10 @@ export declare const TableFooter: React_2.ForwardRefExoticComponent<TableFooterP
 export declare interface TableFooterProps extends React_2.HTMLAttributes<HTMLTableSectionElement> {
 }
 
+/**
+ * Header cell. v2: transparent background, 48px min height, tertiary text,
+ * `border-border-primary` bottom rule.
+ */
 export declare const TableHead: React_2.ForwardRefExoticComponent<TableHeadProps & React_2.RefAttributes<HTMLTableCellElement>>;
 
 export declare const TableHeader: React_2.ForwardRefExoticComponent<TableHeaderProps & React_2.RefAttributes<HTMLTableSectionElement>>;
@@ -3955,7 +4116,8 @@ export declare interface TableLineClampProps extends React_2.HTMLAttributes<HTML
 }
 
 /**
- * Rounded thumbnail sized from {@link TableCard} `size` (`md` vs `lg`).
+ * Square 48px thumbnail used inside {@link TableCell} for media columns
+ * (Figma `V2 Media Thumbnail Item`).
  */
 export declare const TableMediaThumbnail: React_2.ForwardRefExoticComponent<TableMediaThumbnailProps & React_2.RefAttributes<HTMLDivElement>>;
 
@@ -3964,20 +4126,25 @@ export declare interface TableMediaThumbnailProps extends Omit<React_2.HTMLAttri
     src: string;
     /** Alt text for the image. @default "" */
     alt?: string;
-    /** Applies the table’s blurred-media treatment. @default false */
+    /** Applies the table's blurred-media treatment. @default false */
     blurred?: boolean;
     /** `center` uses the fixed media column width from the lg spec. @default "start" */
     align?: "start" | "center";
 }
 
 /**
- * Footer bar for data tables: rows-per-page control, page navigation, and range
- * summary. Pair `paginationSlot` with {@link Pagination} for numbered controls.
+ * Footer bar for data tables: rows-per-page control, page navigation, and
+ * range summary. Pair `paginationSlot` with {@link Pagination} for numbered
+ * controls.
+ *
+ * v2 sits flush inside {@link TableCard} (`px-3` matches the card's inner
+ * gutter); the chip styling now lives on the {@link TableRowsPerPageSelect}
+ * trigger itself.
  *
  * @example
  * ```tsx
  * <TablePagination
- *   leadingSlot={<Select size="32" aria-label="Rows per page">…</Select>}
+ *   leadingSlot={<TableRowsPerPageSelect />}
  *   paginationSlot={<Pagination totalPages={5} currentPage={2} onPageChange={setPage} />}
  *   summary="20–30 of 100 rows"
  * />
@@ -4027,7 +4194,8 @@ export declare interface TableRowProps extends React_2.HTMLAttributes<HTMLTableR
 }
 
 /**
- * Rows-per-page {@link Select} styled for {@link TablePagination} (Figma field).
+ * Rows-per-page {@link Select} styled for {@link TablePagination}. v2 uses a
+ * subtle pill trigger with the table's secondary-surface background.
  */
 export declare function TableRowsPerPageSelect(props: TableRowsPerPageSelectProps): JSX.Element;
 
@@ -4039,31 +4207,56 @@ export declare interface TableRowsPerPageSelectProps {
 }
 
 /**
- * Horizontal scroll container for wide tables. Uses an inner scrollport so the
- * table respects the card radius (plain `overflow-x-auto` on the table
- * wrapper often loses rounded corners with `border-collapse`).
+ * Horizontal scroll container for wide tables. The inner scrollport keeps
+ * `border-collapse` styles intact when the table wraps.
  */
 export declare const TableScrollArea: React_2.ForwardRefExoticComponent<TableScrollAreaProps & React_2.RefAttributes<HTMLDivElement>>;
 
 export declare interface TableScrollAreaProps extends React_2.HTMLAttributes<HTMLDivElement> {
-    /** Rounds the top of the table block to match {@link TableCard}. Set `false` when {@link TableToolbar} is above this scroll area. @default true */
+    /**
+     * No longer needed in v2 — {@link TableCard} handles corner rounding via
+     * its own `overflow-hidden rounded-3xl`. Accepted for back-compat.
+     *
+     * @deprecated v2 ignores this prop; safe to remove.
+     */
     roundTop?: boolean;
 }
 
-/** Row density for body cells — `md` (60px min height) or `lg` (80px). */
-export declare type TableSize = "md" | "lg";
+/**
+ * Row density for body cells.
+ *
+ * - `"md"` (default) → 64px Figma `V2 Table Cell` Small.
+ * - `"lg"` → 80px Figma `V2 Table Cell` Large.
+ *
+ * `"default"` is the v2 numeric-token equivalent of `"md"` and is preferred
+ * for new code.
+ */
+export declare type TableSize = "md" | "lg" | "default";
+
+/** Current sort direction of a {@link TableSortLabel}. `null` means unsorted. */
+export declare type TableSortDirection = "asc" | "desc" | null;
 
 /**
- * Sortable column label with caption typography and a sort affordance.
+ * Sortable column label. v2 expresses the sort state with a 1px underline
+ * beneath the label plus a directional arrow when sorted.
  */
 export declare const TableSortLabel: React_2.ForwardRefExoticComponent<TableSortLabelProps & React_2.RefAttributes<HTMLSpanElement>>;
 
 export declare interface TableSortLabelProps extends React_2.HTMLAttributes<HTMLSpanElement> {
     children: React_2.ReactNode;
+    /**
+     * Visual indicator of the column's sort state. When set to `"asc"` or
+     * `"desc"`, a 1px underline accent appears beneath the label and a small
+     * directional arrow is shown next to it. @default null
+     */
+    direction?: TableSortDirection;
 }
 
 /**
- * Two-line primary + secondary text block for “cell + info” patterns.
+ * Two-line primary + secondary text block for "cell + info" patterns.
+ *
+ * @deprecated Prefer {@link TableCellContent} which supports adornments and
+ * matches the Figma `V2 Table Content` slot.
  */
 export declare function TableStackedText({ title, subtitle }: TableStackedTextProps): JSX.Element;
 

package/dist/index.mjs

@@ -27,7 +27,7 @@ import { CyclingText } from "./components/CyclingText/CyclingText.mjs";
 import { Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogTitle, DialogTrigger } from "./components/Dialog/Dialog.mjs";
 import { Divider } from "./components/Divider/Divider.mjs";
 import { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerTitle, DrawerTrigger } from "./components/Drawer/Drawer.mjs";
-import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from "./components/DropdownMenu/DropdownMenu.mjs";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuHeader, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuTrigger } from "./components/DropdownMenu/DropdownMenu.mjs";
 import { EmptyState } from "./components/EmptyState/EmptyState.mjs";
 import { IconButton } from "./components/IconButton/IconButton.mjs";
 import { AddIcon } from "./components/Icons/AddIcon.mjs";
@@ -212,7 +212,7 @@ import { StepperStep } from "./components/Stepper/StepperStep.mjs";
 import { Switch } from "./components/Switch/Switch.mjs";
 import { SwitchField } from "./components/SwitchField/SwitchField.mjs";
 import { SwitchToggle } from "./components/SwitchToggle/SwitchToggle.mjs";
-import { Table, TableBody, TableCard, TableCell, TableCellGroup, TableFooter, TableHead, TableHeader, TableLineClamp, TableMediaThumbnail, TablePillProgressLayout, TableProgressTrack, TableRow, TableRowsPerPageSelect, TableScrollArea, TableSortLabel, TableStackedText, TableStatusDot, TableToolbar } from "./components/Table/Table.mjs";
+import { Table, TableBody, TableCard, TableCell, TableCellContent, TableCellGroup, TableFooter, TableHead, TableHeader, TableLineClamp, TableMediaThumbnail, TablePillProgressLayout, TableProgressTrack, TableRow, TableRowsPerPageSelect, TableScrollArea, TableSortLabel, TableStackedText, TableStatusDot, TableToolbar } from "./components/Table/Table.mjs";
 import { TablePagination } from "./components/Table/TablePagination.mjs";
 import { Tabs } from "./components/Tabs/Tabs.mjs";
 import { TabsContent } from "./components/Tabs/TabsContent.mjs";
@@ -332,8 +332,11 @@ export {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuGroup,
+  DropdownMenuHeader,
   DropdownMenuItem,
   DropdownMenuLabel,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
   EditIcon,
@@ -451,6 +454,7 @@ export {
   TableBody,
   TableCard,
   TableCell,
+  TableCellContent,
   TableCellGroup,
   TableFooter,
   TableHead,

package/dist/styles/base.css

@@ -131,8 +131,10 @@
 
 :root {
   --color-special-bottom-nav-highlight: var(--primitives-color-green-500);
+  --color-content-disabled: var(--primitives-color-gray-450);
 }
 
 .dark {
   --color-special-bottom-nav-highlight: var(--primitives-color-gray-white);
+  --color-content-disabled: var(--primitives-color-gray-450);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fanvue/ui",
-  "version": "2.18.0",
+  "version": "2.19.0",
   "description": "React component library built with Tailwind CSS for Fanvue ecosystem",
   "publishConfig": {
     "registry": "https://registry.npmjs.org",