@seekalfred/primitives 0.5.1 → 0.7.1

package/dist/table/table.js.map

@@ -1 +1 @@
-{"version":3,"file":"table.js","names":["Table","AriaTable","AriaTableHeader","AriaColumn","AriaTableBody","AriaRow","AriaCell","AriaTableFooter","Button","Select"],"sources":["../../src/table/table.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport {\n  forwardRef,\n  useMemo,\n  useState,\n  type CSSProperties,\n  type ForwardedRef,\n  type ReactElement,\n  type ReactNode,\n  type RefAttributes,\n} from \"react\";\nimport {\n  Cell as AriaCell,\n  Column as AriaColumn,\n  Row as AriaRow,\n  Table as AriaTable,\n  TableBody as AriaTableBody,\n  TableFooter as AriaTableFooter,\n  TableHeader as AriaTableHeader,\n  type SortDescriptor,\n} from \"react-aria-components\";\n\nimport { Button } from \"../button/button.js\";\nimport { cn, cnAll } from \"../lib/cn.js\";\nimport { Select, SelectItem } from \"../select/select.js\";\n\n/**\n * Table, ported from the legacy shadcn table onto React Aria's Table.\n *\n * The legacy component in the product app rendered NOTHING -- its body was\n * `return <>{children(renderProps)}</>` -- so all six of its consumers\n * hand-built `<table>`, `tableLayout: fixed`, a `<colgroup>` and a min-width,\n * and its config object was opt-OUT, so they wrote paragraphs of\n * `enabled: false`. Six consumers produced six different tables. This one\n * renders from `data` + `columns` + `getRowId`; everything else is opt-in.\n *\n * WIDTHS ARE CSS, and that is not a stylistic choice. React Aria's own `width`\n * on a `<Column>` is ignored outside a `ResizableTableContainer`, and its\n * dev-warning is dead code in 1.21.1 -- `for (let prop in ['width', ...])`\n * iterates the INDICES, so the guard tests `'0' in props` and never fires. A\n * width handed to React Aria disappears with no error and no console output:\n * `width={120}` measured 42.675px in a browser. So `Column.width` is emitted\n * as a style on the header cell, and any width puts the table into\n * `table-layout: fixed` -- without which a declared width is only a hint.\n *\n * THE ROW HIGHLIGHT IS PAINTED FROM `:hover` AS WELL AS `data-[hovered]`, and\n * that is a departure from the rule that state comes from React Aria data\n * attributes rather than bare pseudo-classes. React Aria stamps `data-hovered`\n * on a row ONLY when the row is interactive -- `onRowAction` or a selection\n * mode -- exactly as it gates `Column` hover on `allowsSorting`. Four of the\n * six legacy consumers are read-only tables that painted a hover fill, so\n * `data-[hovered]` alone would drop their pointer affordance in silence. The\n * rule exists because `:focus` fires on click where `data-[focus-visible]`\n * does not; `:hover` has no such twin, and on an interactive row the two\n * selectors match the same element with the same colour. The keyboard needs no\n * workaround: `data-focused` IS emitted on read-only rows.\n *\n * `leading-*` sits on the table rather than on the cell. tailwind-merge treats\n * a later `text-*` as owning line-height and silently strips a `leading-*`\n * that precedes it, and the cells carry `text-start`/`text-center`/`text-end`.\n * Line-height inherits, so putting it one level up removes the hazard instead\n * of policing it.\n */\n\n/**\n * The card. Every table in the product sits in one.\n *\n * The edge uses `separator`, NOT `border`, and that reverses what an earlier\n * revision of this file claimed. Measured against the running product, its card\n * is `border border-border` resolving to #e6e6e6 -- the same hairline as the row\n * dividers. The earlier argument was that the card edge is where WCAG 1.4.11\n * lands; on reflection it does not. 1.4.11 covers what is needed to identify\n * user interface COMPONENTS and their states, and a static table is not one:\n * the interactive parts inside it -- sortable headers, pagination buttons --\n * carry their own focus indicators and borders, which are still held to 3:1.\n *\n * overflow-hidden is load-bearing: the header fill runs to the table's edge and\n * would square off the rounded corners without it.\n */\nexport const tableCardVariants = cva([\"w-full box-border overflow-hidden\"], {\n  variants: {\n    frame: {\n      card: \"rounded-md border-(length:--border-width) border-separator bg-background\",\n      /*\n       * No frame. Eleven of the product's tables either sit inside a card\n       * already -- gaining a second nested border and radius from an\n       * unconditional one -- or are deliberately bare on the page.\n       */\n      none: \"\",\n    },\n  },\n  defaultVariants: { frame: \"card\" },\n});\n\n/**\n * An absent value is an em-dash, not the word \"null\".\n *\n * The default renderer was `String(value)`, which paints the literal text\n * `null` into the cell -- a defect rather than a gap, and six of the product's\n * tables print a dash there. Zero and empty string are values and are left\n * alone; only null and undefined are absent.\n */\nfunction renderValue<T>(column: Column<T, unknown>, value: unknown, row: T): ReactNode {\n  if (value === null || value === undefined) return \"—\";\n\n  const formatted = column.format?.(value, row);\n  if (formatted !== undefined) return formatted;\n\n  /*\n   * Only primitives have a sensible default rendering. String(someObject) is\n   * \"[object Object]\", which is the same class of silent nonsense as the\n   * literal \"null\" this function exists to stop -- so an object-valued column\n   * renders nothing until it is given `format` or `cell`, which is loud enough\n   * to notice and quiet enough not to lie.\n   */\n  if (typeof value === \"string\" || typeof value === \"number\") return value;\n  if (typeof value === \"boolean\") return String(value);\n  return null;\n}\n\n/** Reserved id for the chevron column, so it cannot collide with a real one. */\nconst CHEVRON_COLUMN_ID = \"__table_row_action\";\n\n/*\n * The chevron column is sized to its glyph, not to a share of the table.\n * Given a percentage AND the usual --density-row-pad-x on both sides it pushed\n * the total past 100% under table-layout: fixed, and a table that fits grew a\n * horizontal scrollbar. w-10 is the spacing scale rather than a bracket value,\n * which check:hardcoding would reject.\n */\nconst CHEVRON_CELL = \"w-10 px-0 text-center\";\n\n/** The horizontal scroll container. The table owns it; 5 of 6 consumers built one by hand. */\nexport const tableScrollVariants = cva([\"w-full overflow-x-auto box-border\"]);\n\nexport const tableVariants = cva([\n  \"w-full border-collapse box-border\",\n  // font-sans and the explicit colours are not boilerplate: the reset in\n  // @seekalfred/styles is OPT-IN, so a consumer may load none and an unstyled\n  // table would inherit the host's serif on a transparent ground.\n  \"font-sans text-base leading-(--leading-normal)\",\n  \"bg-background text-foreground\",\n]);\n\n/**\n * The header is near-white, not a grey band.\n *\n * The product fills it with its `--neutral-200`, #fffcfc: white carrying three\n * counts of warmth in green and blue. An earlier revision of this file called\n * that \"not worth a token of its own\" and used `background`, which made the\n * header exactly the colour of the rows -- so the band vanished and the only\n * thing separating the header was the divider under it. The difference is\n * small on purpose; absent is not the same as small. It is `--color-header-fill`\n * now, and it inverts properly in dark rather than being pinned to white.\n */\nexport const tableHeaderVariants = cva([\"text-muted-foreground\"], {\n  variants: { headerFill: { subtle: \"bg-header-fill\", none: \"bg-transparent\" } },\n  defaultVariants: { headerFill: \"subtle\" },\n});\n\n/** The pagination bar. A sibling of the table, never a row inside it. */\nexport const tablePaginationVariants = cva([\n  \"flex items-center justify-between gap-(--density-control-gap) box-border\",\n  \"px-(--density-row-pad-x) py-(--density-row-pad-y)\",\n  \"font-sans text-sm leading-(--leading-normal) text-muted-foreground\",\n]);\n\n/** The footer band. Heavier than a row rule, because it closes the table. */\nexport const tableFooterVariants = cva([\n  \"bg-background font-semibold text-foreground\",\n  \"border-t-(length:--border-width) border-t-border\",\n]);\n\n/** Shared focus treatment. Authored once; both the column header and the row take it. */\nconst FOCUS_RING = [\n  // outline-solid is load-bearing: outline-none sets --tw-outline-style to\n  // none, and the width utility resolves its style from that same variable, so\n  // a focus rule can apply a width and a colour and paint nothing.\n  \"outline-none\",\n  \"data-[focus-visible]:outline-solid\",\n  \"data-[focus-visible]:outline-(length:--focus-ring-width)\",\n  \"data-[focus-visible]:outline-offset-(--focus-ring-offset)\",\n  \"data-[focus-visible]:outline-(--color-ring)\",\n];\n\nexport const tableColumnVariants = cva(\n  [\n    \"px-(--density-row-pad-x) py-(--density-row-pad-y)\",\n    \"box-border align-middle text-sm font-semibold select-none\",\n    ...FOCUS_RING,\n    // The whole cell is the hit target, not just the label. At compact density\n    // --density-row-pad-y is 7px, so a control wrapping only its text lands\n    // under the 24x24 floor of WCAG 2.2 target size (2.5.8) -- which the story\n    // harness enables explicitly on top of axe's defaults.\n    \"data-[allows-sorting]:cursor-pointer\",\n  ],\n  {\n    variants: {\n      align: { start: \"text-start\", center: \"text-center\", end: \"text-end\" },\n      /*\n       * Eleven tables -- a plurality of the app -- label columns in uppercase\n       * with tracking, and not one was reachable: the label was hardcoded\n       * `text-sm font-semibold`, and `className` lands on the <table>.\n       */\n      headerType: {\n        sentence: \"text-sm leading-none\",\n        caps: \"text-xs uppercase tracking-wide leading-none\",\n      },\n    },\n    defaultVariants: { align: \"start\", headerType: \"sentence\" },\n  },\n);\n\nexport const tableRowVariants = cva(\n  [\n    \"box-border\",\n    \"motion-safe:transition-colors motion-safe:duration-(--duration-fast) motion-safe:ease-standard\",\n    // See the header comment: :hover is what covers a read-only row.\n    \"hover:bg-muted data-[hovered]:bg-muted data-[focused]:bg-muted\",\n    // After the state fills, so the marked row keeps its identity while hovered.\n    \"data-[highlighted]:bg-primary-subtle\",\n    ...FOCUS_RING,\n  ],\n  {\n    variants: {\n      /*\n       * `grid` is gone. Across 25 real tables in the product not one drew\n       * vertical rules between cells -- a variant nobody asked for, shipped\n       * while the caps header eleven tables need was unreachable.\n       */\n      variant: {\n        lined: \"border-t-(length:--border-width) border-t-separator\",\n        plain: \"\",\n      },\n      /* rowClassName could not fake this: it gets the row but not its index. */\n      striped: { true: \"[&:nth-child(even)]:bg-row-stripe\", false: \"\" },\n    },\n    defaultVariants: { variant: \"lined\", striped: false },\n  },\n);\n\nexport const tableCellVariants = cva(\n  [\"px-(--density-row-pad-x) py-(--density-row-pad-y)\", \"box-border align-middle\", ...FOCUS_RING],\n  {\n    variants: {\n      align: { start: \"text-start\", center: \"text-center\", end: \"text-end\" },\n      /* Ten tables set tabular figures -- the app's most consistent convention. */\n      numeric: { true: \"tabular-nums\", false: \"\" },\n    },\n    defaultVariants: { align: \"start\", numeric: false },\n  },\n);\n\n/**\n * Identity for a row.\n *\n * Declared here rather than imported: React's own `Key` includes `bigint`,\n * which React Aria's collections do not accept, and importing React Aria's\n * would leak its types through the public API for no gain. This IS the set\n * React Aria takes.\n */\nexport type RowKey = string | number;\n\n/**\n * Both glyphs are aria-hidden and neither is focusable.\n *\n * The chevron says \"this row does something\"; the ROW is what React Aria makes\n * pressable and announces, so a second target would be a keyboard trap for no\n * gain. The caret says which way a column is sorted -- `aria-sort` already\n * tells assistive tech, but without a glyph the direction is carried by tint\n * alone, which is WCAG 1.4.1 use-of-colour.\n *\n * Drawn inline rather than taken as props: this package ships no icon set, and\n * Checkbox and Select already inline their single glyphs this way.\n */\n/**\n * Which page numbers to show, with gaps collapsed to an ellipsis.\n *\n * One sibling either side of the current page, plus the first and last, which\n * is what the product's own pager renders at its call sites: page 1 of 18 gives\n * `1 2 ... 18`. It is not a prop, because no consumer has asked for a second\n * width and a number nobody tunes is a number better inlined.\n */\nfunction pageWindow(current: number, total: number): (number | \"ellipsis\")[] {\n  const pages: (number | \"ellipsis\")[] = [];\n  const start = Math.max(1, current - 1);\n  const end = Math.min(total, current + 1);\n\n  if (start > 1) {\n    pages.push(1);\n    if (start > 2) pages.push(\"ellipsis\");\n  }\n  for (let page = start; page <= end; page++) pages.push(page);\n  if (end < total) {\n    if (end < total - 1) pages.push(\"ellipsis\");\n    pages.push(total);\n  }\n  return pages;\n}\n\nfunction PageChevronGlyph({ direction }: { direction: \"previous\" | \"next\" }) {\n  return (\n    <svg\n      data-slot=\"table-pagination-chevron\"\n      aria-hidden=\"true\"\n      viewBox=\"0 0 16 16\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"1.5\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      className=\"size-(--icon-sm) rtl:-scale-x-100\"\n    >\n      <path d={direction === \"next\" ? \"m6 3 5 5-5 5\" : \"m10 3-5 5 5 5\"} />\n    </svg>\n  );\n}\n\nfunction RowChevronGlyph() {\n  return (\n    <svg\n      data-slot=\"table-row-chevron\"\n      aria-hidden=\"true\"\n      viewBox=\"0 0 16 16\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"1.5\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      className=\"size-(--icon-sm) text-muted-foreground\"\n    >\n      {/* Logical, so it mirrors in RTL with the rest of the table. */}\n      <path d=\"m6 3 5 5-5 5\" className=\"rtl:-scale-x-100\" />\n    </svg>\n  );\n}\n\nfunction SortCaretGlyph({ direction }: { direction: \"ascending\" | \"descending\" | \"none\" }) {\n  return (\n    <svg\n      data-slot=\"table-sort-caret\"\n      data-direction={direction}\n      aria-hidden=\"true\"\n      viewBox=\"0 0 16 16\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"1.5\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      className=\"size-(--icon-sm) ms-1 inline-block align-middle\"\n    >\n      {direction === \"none\" ? (\n        <>\n          <path d=\"m4 7 4-4 4 4\" />\n          <path d=\"m4 9 4 4 4-4\" />\n        </>\n      ) : (\n        <path d={direction === \"ascending\" ? \"m4 10 4-4 4 4\" : \"m4 6 4 4 4-4\"} />\n      )}\n    </svg>\n  );\n}\n\n/** One column of a `Table`. */\nexport type Column<T, V = unknown> = {\n  /** Stable key. Becomes the column's id and the sort descriptor's `column`. */\n  id: string;\n  /** Header content. */\n  header: ReactNode;\n  /** Pulls this column's value out of a row. */\n  accessor: (row: T) => V;\n  /**\n   * Renders the cell. Defaults to `format?.(value, row) ?? String(value)`.\n   *\n   * Method syntax, not an arrow property, and that is load-bearing. A table\n   * holds columns of DIFFERENT value types in one array, so the array element\n   * has to be `Column<T, unknown>` -- and under `strictFunctionTypes` an arrow\n   * property is contravariant in its parameters, which would make\n   * `Column<T, string>` unassignable to it. Method members are checked\n   * bivariantly, which is precisely the semantics a heterogeneous collection\n   * needs. The alternative is `Column<T, any>`, and this package has no\n   * eslint-disable in it anywhere.\n   */\n  cell?(ctx: { value: V; row: T; index: number }): ReactNode;\n  /**\n   * Value to string. Deliberately separate from `cell`: this is what CSV\n   * export and sort comparators consume, and a ReactNode is no use to either.\n   */\n  format?(value: V, row: T): string;\n  /**\n   * Logical alignment, applied to BOTH the column header and its cells --\n   * React Aria keeps no link between the two, so the component owns it.\n   */\n  align?: \"start\" | \"center\" | \"end\";\n  /**\n   * Column width. Any width on any column puts the table into\n   * `table-layout: fixed`.\n   *\n   * Emitted as CSS, NEVER forwarded to React Aria's own `width` prop. React\n   * Aria ignores that one outside a `ResizableTableContainer`, and its\n   * dev-warning is dead code in 1.21.1 (`for...in` over an array literal, so\n   * the guard tests `'0' in props`). A width handed to it disappears with no\n   * error and no console output.\n   */\n  width?: number | `${number}%`;\n  /**\n   * A column of figures: tabular numerals, end-aligned unless `align` says\n   * otherwise. Ten of the product's tables set tabular figures -- the most\n   * consistently applied convention in the app. Without it, proportional\n   * digits leave a column of numbers ragged.\n   */\n  numeric?: boolean;\n  /** Opts this column into sorting. Off by default. */\n  sortable?: boolean;\n};\n\nexport interface TableProps<T> extends VariantProps<typeof tableRowVariants> {\n  /** The rows to render. */\n  data: readonly T[];\n  /** The columns, in display order. */\n  columns: readonly Column<T, unknown>[];\n  /** Stable identity for a row. Used as its key and to resolve `onRowAction`. */\n  getRowId: (row: T) => RowKey;\n  /**\n   * Required. React Aria's Table renders no `<caption>`, so this is the\n   * accessible name and there is no other source for it.\n   */\n  \"aria-label\": string;\n  /**\n   * The sorted column and direction, CONTROLLED.\n   *\n   * Pass this and the table stops sorting: you own the row order, which is\n   * what server-side sorting needs. Leave it off and the table sorts `data`\n   * itself from `defaultSortDescriptor` and header clicks.\n   */\n  sortDescriptor?: SortDescriptor;\n  /** The initial sort when uncontrolled. */\n  defaultSortDescriptor?: SortDescriptor;\n  /** Fires when a sortable column header is activated, controlled or not. */\n  onSortChange?: (descriptor: SortDescriptor) => void;\n  /**\n   * Fires on click or Enter. Receives the ROW, where React Aria's own handler\n   * receives a key -- every legacy consumer looked the row up again anyway.\n   *\n   * Setting it also makes rows interactive, which is what switches React\n   * Aria's `data-hovered` on.\n   */\n  onRowAction?: (row: T) => void;\n  /**\n   * Marks a row as the viewer's own -- the product tints \"Alfred AI (You)\".\n   *\n   * The tint is not the message. A fill alone is WCAG 1.4.1 use-of-colour, so\n   * the highlighted row is expected to say so in its own content, the way the\n   * product's does. This tints and sets `data-highlighted`; it does not invent\n   * meaning the row does not already carry.\n   */\n  isRowHighlighted?: (row: T) => boolean;\n  /** Extra classes per row, for styling that depends on row DATA. */\n  rowClassName?: (row: T) => string;\n  /**\n   * Rendered in place of the rows when `data` is empty.\n   *\n   * There is no default string on purpose: user-visible copy belongs in\n   * `useMessages()`, a mechanism this package does not have yet, and it is the\n   * one rule ARCHITECTURE says cannot be retrofitted.\n   */\n  empty?: ReactNode;\n  /** Minimum table width in px. Below it the wrapper scrolls horizontally. */\n  minWidth?: number;\n  /**\n   * Rows per page. Omit it and every row renders with no pagination UI.\n   *\n   * The table holds the page itself and slices AFTER sorting, so a sort\n   * reorders the whole set rather than shuffling the current page, and lands\n   * you back on page 1.\n   *\n   * With `pageSizeOptions` this is the STARTING size and the table owns it\n   * from then on; a later change to the prop does not move a reader who has\n   * chosen their own. Without them it is simply the size.\n   */\n  pageSize?: number;\n  /**\n   * Rows-per-page choices. Given them, the bar grows a select on its trailing\n   * side, which is the arrangement every paged table in the product uses:\n   * page numbers leading, rows-per-page trailing.\n   */\n  pageSizeOptions?: readonly number[];\n  /** Notified after the reader picks a new size. The table has already applied it. */\n  onPageSizeChange?: (pageSize: number) => void;\n  /**\n   * Copy for the pagination controls.\n   *\n   * These carry English defaults, which is a known debt: ARCHITECTURE section\n   * 7 rule 9 routes user-visible copy through a `useMessages()` hook that does\n   * not exist in this package yet. They are props so a consumer is not stuck\n   * waiting for it, and so the eventual mechanism has somewhere to land. The\n   * navigation landmark takes its name from `aria-label` instead, which avoids\n   * inventing a fourth string.\n   */\n  pageLabels?: {\n    previous?: string;\n    next?: string;\n    /**\n     * Accessible name for a page button.\n     *\n     * `isCurrent` exists because `aria-current` cannot reach the button.\n     * React Aria's Button runs its props through `filterDOMProps`, whose\n     * allowlist covers `id` and the labelling attributes and nothing else, so\n     * an `aria-current` handed to it is dropped with no error -- the same\n     * class of silent loss as `Column.width`. The current page therefore says\n     * so in its name, which every screen reader announces.\n     */\n    page?: (page: number, isCurrent: boolean) => string;\n    /** Option text in the rows-per-page select. */\n    perPage?: (pageSize: number) => string;\n    /** Accessible name for the rows-per-page select itself. */\n    rowsPerPage?: string;\n  };\n  /**\n   * Whether the table draws its own card. `none` for one that already sits\n   * inside a card, or is meant to be bare on the page.\n   */\n  frame?: \"card\" | \"none\";\n  /** Column label treatment: sentence case, or uppercase with tracking. */\n  headerType?: \"sentence\" | \"caps\";\n  /** Header background. `none` for report tables that carry no band. */\n  headerFill?: \"subtle\" | \"none\";\n  /** Zebra-stripe alternate rows. */\n  striped?: boolean;\n  /**\n   * A footer row, in a real `<tfoot>`.\n   *\n   * Called once per column; return the cell content, or null for a blank. A\n   * real footer rather than one more row of data, so it is announced as one.\n   */\n  totalRow?: (column: Column<T, unknown>) => ReactNode;\n  /** Extra classes for the table. Merged last, so they win conflicts with ours. */\n  className?: string;\n}\n\n/** Builds columns that keep each column's own value type. */\nexport function createColumns<T>() {\n  return {\n    column: <V,>(definition: Column<T, V>): Column<T, V> => definition,\n  };\n}\n\n/**\n * A data table.\n *\n * Maturity: **beta**. Selection, row expansion, filtering, grouping, the total\n * row and pagination are deliberately absent -- each had one consumer or none\n * across the six legacy tables, and the stateful ones belong to DataGrid.\n *\n * @example\n * const { column } = createColumns<Channel>();\n * const columns = useMemo(() => [\n *   column({ id: \"name\", header: \"Channel\", accessor: (r) => r.name }),\n *   column({ id: \"cost\", header: \"Cost\", accessor: (r) => r.cost,\n *            format: (v) => currency(v), align: \"end\", sortable: true }),\n * ], []);\n *\n * <Table aria-label=\"Channels\" data={rows} columns={columns} getRowId={(r) => r.id} />\n */\n/**\n * The orderable value behind a cell.\n *\n * Objects are NOT stringified. `String(someObject)` is \"[object Object]\", so a\n * column of objects would sort every row equal while looking like it worked --\n * and a column's own `format` already exists to turn its value into a string,\n * so that is what gets used instead of a blind cast.\n *\n * Numbers stay numbers even when the column formats them: sorting \"$1,220\"\n * against \"$12,480\" lexically puts the larger first.\n */\nfunction sortKey<T>(column: Column<T, unknown>, row: T): string | number {\n  const value = column.accessor(row);\n  if (typeof value === \"number\" || typeof value === \"string\") return value;\n  if (typeof value === \"boolean\") return value ? 1 : 0;\n  if (value instanceof Date) return value.getTime();\n  if (value == null) return \"\";\n  return column.format?.(value, row) ?? \"\";\n}\n\n/** Orders two cell keys. Numbers numerically, strings by locale. */\nfunction compareKeys(a: string | number, b: string | number): number {\n  if (typeof a === \"number\" && typeof b === \"number\") return a - b;\n  // localeCompare so \"Item 10\" sorts after \"Item 9\", not before it.\n  return String(a).localeCompare(String(b));\n}\n\nexport const Table = forwardRef(function Table<T>(\n  {\n    data,\n    columns,\n    getRowId,\n    variant,\n    sortDescriptor,\n    defaultSortDescriptor,\n    onSortChange,\n    onRowAction,\n    isRowHighlighted,\n    rowClassName,\n    frame,\n    headerType,\n    headerFill,\n    striped,\n    totalRow,\n    empty,\n    minWidth,\n    pageSize,\n    pageSizeOptions,\n    onPageSizeChange,\n    pageLabels,\n    className,\n    ...props\n  }: TableProps<T>,\n  ref: ForwardedRef<HTMLTableElement>,\n) {\n  /*\n   * Uncontrolled sorting is the component's job, not the call site's.\n   *\n   * React Aria holds no sort state and never reorders rows -- it reports the\n   * descriptor and stops. Leaving it there would mean `sortable: true` renders\n   * a header that highlights, announces itself via aria-sort, and sorts\n   * nothing until the consumer writes the state and the comparator by hand.\n   * That is a demo that only works in a story.\n   *\n   * So: uncontrolled, the table holds the descriptor and sorts `data`.\n   * Controlled (a `sortDescriptor` prop), it sorts nothing and the consumer\n   * owns the order, which is what server-side sorting requires.\n   */\n  const isControlled = sortDescriptor !== undefined;\n  const [uncontrolledSort, setUncontrolledSort] = useState(defaultSortDescriptor);\n  const activeSort = isControlled ? sortDescriptor : uncontrolledSort;\n\n  const rows = useMemo(() => {\n    if (isControlled || !activeSort) return data;\n    const sorted = columns.find((column) => column.id === activeSort.column);\n    if (!sorted) return data;\n\n    const direction = activeSort.direction === \"descending\" ? -1 : 1;\n    return [...data].sort(\n      (a, b) => direction * compareKeys(sortKey(sorted, a), sortKey(sorted, b)),\n    );\n  }, [data, columns, activeSort, isControlled]);\n\n  /*\n   * Paging happens AFTER sorting, which is the whole reason it lives in the\n   * component. Slice first and a sort would only reshuffle the ten rows you\n   * can see, so \"sort by cost ascending\" would not find the cheapest row in\n   * the set -- the single most common way a hand-rolled table gets this wrong.\n   */\n  // A size the reader picked outranks the prop, and is held here rather than\n  // synced from it by an effect -- an effect would snap them back to the\n  // consumer's default on every unrelated re-render.\n  const [chosenSize, setChosenSize] = useState<number>();\n  const rowsPerPage = chosenSize ?? pageSize;\n\n  const pageCount = rowsPerPage ? Math.max(1, Math.ceil(rows.length / rowsPerPage)) : 1;\n  const [page, setPage] = useState(1);\n  // Clamped rather than reset by an effect, so a shrinking `data` cannot strand\n  // the view on a page that no longer exists.\n  const currentPage = Math.min(page, pageCount);\n  const pageStart = rowsPerPage ? (currentPage - 1) * rowsPerPage : 0;\n  const visibleRows = rowsPerPage ? rows.slice(pageStart, pageStart + rowsPerPage) : rows;\n\n  const labels = {\n    previous: pageLabels?.previous ?? \"Go to previous page\",\n    next: pageLabels?.next ?? \"Go to next page\",\n    page:\n      pageLabels?.page ??\n      ((target: number, isCurrent: boolean) =>\n        isCurrent ? `Page ${target}, current page` : `Go to page ${target}`),\n    perPage: pageLabels?.perPage ?? ((size: number) => `${size} per page`),\n    rowsPerPage: pageLabels?.rowsPerPage ?? \"Rows per page\",\n  };\n\n  const rowsByKey = new Map<RowKey, T>(data.map((row) => [getRowId(row), row]));\n  const hasWidths = columns.some((column) => column.width !== undefined);\n\n  const tableStyle: CSSProperties = {};\n  if (minWidth !== undefined) tableStyle.minWidth = minWidth;\n  // Declared widths only hold under a fixed layout; otherwise the browser\n  // treats them as hints and the columns drift, which is why 5 of the 6 legacy\n  // consumers set this by hand.\n  if (hasWidths) tableStyle.tableLayout = \"fixed\";\n\n  return (\n    <div data-slot=\"table-card\" className={cnAll(tableCardVariants({ frame }))}>\n      <div data-slot=\"table-scroll\" className={cnAll(tableScrollVariants())}>\n        <AriaTable\n          // The ref goes on the table itself, never on the table-card or\n          // table-scroll divs this component wraps it in -- callers need the\n          // real HTMLTableElement (to measure it, scroll it into view, etc.),\n          // not one of the two divs this component renders around it.\n          ref={ref}\n          {...props}\n          data-slot=\"table\"\n          className={cn(tableVariants(), className)}\n          style={tableStyle}\n          sortDescriptor={activeSort}\n          onSortChange={(descriptor) => {\n            if (!isControlled) setUncontrolledSort(descriptor);\n            // Back to the first page: the order changed under you, so staying on\n            // page 3 shows rows you did not ask to see.\n            setPage(1);\n            onSortChange?.(descriptor);\n          }}\n          onRowAction={\n            onRowAction\n              ? (key) => {\n                  const row = rowsByKey.get(key);\n                  if (row !== undefined) onRowAction(row);\n                }\n              : undefined\n          }\n        >\n          <AriaTableHeader\n            data-slot=\"table-header\"\n            className={cnAll(tableHeaderVariants({ headerFill }))}\n          >\n            {columns.map((column) => (\n              <AriaColumn\n                key={column.id}\n                id={column.id}\n                isRowHeader={column === columns[0]}\n                allowsSorting={column.sortable}\n                data-slot=\"table-column\"\n                className={cnAll(\n                  tableColumnVariants({\n                    align: column.align ?? (column.numeric ? \"end\" : undefined),\n                    headerType,\n                  }),\n                )}\n                style={column.width === undefined ? undefined : { width: column.width }}\n              >\n                {column.header}\n                {/*\n                 * A sortable column says so BEFORE it is sorted. Rendering the\n                 * caret only once sorted left a sortable header looking exactly\n                 * like a fixed one, so the only way to discover sorting was to\n                 * click a header and see whether anything moved -- the same gap\n                 * the product closed in its own header, and the reason the\n                 * paired chevron exists rather than an arrow.\n                 */}\n                {column.sortable ? (\n                  <SortCaretGlyph\n                    direction={activeSort?.column === column.id ? activeSort.direction : \"none\"}\n                  />\n                ) : null}\n              </AriaColumn>\n            ))}\n            {onRowAction ? (\n              /*\n               * The chevron's own column. Its header is intentionally EMPTY: a\n               * visually-hidden label would be user-visible copy, and section 7\n               * rule 9 has nowhere to put it until useMessages() exists.\n               */\n              <AriaColumn\n                id={CHEVRON_COLUMN_ID}\n                data-slot=\"table-column\"\n                className={cnAll(tableColumnVariants({ headerType }), CHEVRON_CELL)}\n              >\n                {\"\"}\n              </AriaColumn>\n            ) : null}\n          </AriaTableHeader>\n          <AriaTableBody\n            data-slot=\"table-body\"\n            renderEmptyState={empty === undefined ? undefined : () => empty}\n          >\n            {visibleRows.map((row, index) => (\n              <AriaRow\n                key={String(getRowId(row))}\n                id={getRowId(row)}\n                data-slot=\"table-row\"\n                data-highlighted={isRowHighlighted?.(row) || undefined}\n                className={cn(\n                  cnAll(\n                    tableRowVariants({ variant, striped }),\n                    onRowAction && \"cursor-pointer\",\n                  ),\n                  rowClassName?.(row),\n                )}\n              >\n                {columns.map((column) => {\n                  const value: unknown = column.accessor(row);\n                  return (\n                    <AriaCell\n                      key={column.id}\n                      data-slot=\"table-cell\"\n                      className={cnAll(\n                        tableCellVariants({\n                          align: column.align ?? (column.numeric ? \"end\" : undefined),\n                          numeric: column.numeric,\n                        }),\n                      )}\n                    >\n                      {column.cell\n                        ? column.cell({ value, row, index })\n                        : renderValue(column, value, row)}\n                    </AriaCell>\n                  );\n                })}\n                {onRowAction ? (\n                  <AriaCell\n                    data-slot=\"table-cell\"\n                    className={cnAll(tableCellVariants(), CHEVRON_CELL)}\n                  >\n                    <RowChevronGlyph />\n                  </AriaCell>\n                ) : null}\n              </AriaRow>\n            ))}\n          </AriaTableBody>\n          {totalRow ? (\n            <AriaTableFooter data-slot=\"table-footer\" className={cnAll(tableFooterVariants())}>\n              <AriaRow id=\"__table_total\">\n                {columns.map((col) => (\n                  <AriaCell\n                    key={col.id}\n                    data-slot=\"table-cell\"\n                    className={cnAll(\n                      tableCellVariants({\n                        align: col.align ?? (col.numeric ? \"end\" : undefined),\n                        numeric: col.numeric,\n                      }),\n                    )}\n                  >\n                    {totalRow(col)}\n                  </AriaCell>\n                ))}\n                {onRowAction ? (\n                  <AriaCell\n                    data-slot=\"table-cell\"\n                    className={cnAll(tableCellVariants(), CHEVRON_CELL)}\n                  >\n                    {\"\"}\n                  </AriaCell>\n                ) : null}\n              </AriaRow>\n            </AriaTableFooter>\n          ) : null}\n        </AriaTable>\n      </div>\n      {rowsPerPage === undefined || (pageCount <= 1 && !pageSizeOptions) ? null : (\n        <nav\n          data-slot=\"table-pagination\"\n          aria-label={`${props[\"aria-label\"]} pagination`}\n          className={cnAll(tablePaginationVariants())}\n        >\n          {/* Present even when empty, so the select stays on the trailing edge. */}\n          <div data-slot=\"table-pagination-pages\" className=\"flex items-center gap-1\">\n            {pageCount <= 1 ? null : (\n              <>\n                <Button\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  className=\"w-(--density-control-h-sm) px-0\"\n                  aria-label={labels.previous}\n                  isDisabled={currentPage <= 1}\n                  onPress={() => setPage(currentPage - 1)}\n                >\n                  <PageChevronGlyph direction=\"previous\" />\n                </Button>\n                {pageWindow(currentPage, pageCount).map((entry, index) =>\n                  entry === \"ellipsis\" ? (\n                    <span\n                      // The gap is decoration; the pages either side of it are\n                      // what a reader navigates by, so this is not announced.\n                      key={`ellipsis-${String(index)}`}\n                      data-slot=\"table-pagination-ellipsis\"\n                      aria-hidden=\"true\"\n                      className=\"px-2 text-sm text-muted-foreground\"\n                    >\n                      &hellip;\n                    </span>\n                  ) : (\n                    <Button\n                      key={entry}\n                      variant={entry === currentPage ? \"primary\" : \"ghost\"}\n                      size=\"sm\"\n                      className=\"min-w-(--density-control-h-sm) px-2\"\n                      aria-label={labels.page(entry, entry === currentPage)}\n                      onPress={() => setPage(entry)}\n                    >\n                      {entry}\n                    </Button>\n                  ),\n                )}\n                <Button\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  className=\"w-(--density-control-h-sm) px-0\"\n                  aria-label={labels.next}\n                  isDisabled={currentPage >= pageCount}\n                  onPress={() => setPage(currentPage + 1)}\n                >\n                  <PageChevronGlyph direction=\"next\" />\n                </Button>\n              </>\n            )}\n          </div>\n          {pageSizeOptions === undefined ? null : (\n            <Select\n              // Select is w-full by default, which in this flex row stretches\n              // it across the whole bar and drags it back to the leading edge\n              // the moment the page numbers retire.\n              className=\"w-auto\"\n              label={labels.rowsPerPage}\n              labelHidden\n              selectedKey={String(rowsPerPage)}\n              onSelectionChange={(key) => {\n                const size = Number(key);\n                setChosenSize(size);\n                // Page 4 of 18 is page 1 of 2 at a larger size; keeping the\n                // number would land the reader past the end of the data.\n                setPage(1);\n                onPageSizeChange?.(size);\n              }}\n            >\n              {pageSizeOptions.map((option) => (\n                <SelectItem key={option} id={String(option)}>\n                  {labels.perPage(option)}\n                </SelectItem>\n              ))}\n            </Select>\n          )}\n        </nav>\n      )}\n    </div>\n  );\n}\n// forwardRef cannot carry a type parameter through a .tsx call expression, so\n// Table<T>'s generic signature is restored here with a type-only cast on the\n// export; it costs nothing at runtime and the inner function is still named\n// \"Table\" for DevTools.\n) as <T>(props: TableProps<T> & RefAttributes<HTMLTableElement>) => ReactElement | null;\n"],"mappings":"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"}
+{"version":3,"file":"table.js","names":["Button","Table","AriaTable","AriaTableHeader","AriaColumn","Checkbox","AriaTableBody","AriaRow","AriaCell","AriaTableFooter","Select"],"sources":["../../src/table/table.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport {\n  forwardRef,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n  type CSSProperties,\n  type ForwardedRef,\n  type ReactElement,\n  type ReactNode,\n  type RefAttributes,\n  type RefObject,\n} from \"react\";\nimport {\n  Cell as AriaCell,\n  Column as AriaColumn,\n  Row as AriaRow,\n  Table as AriaTable,\n  TableBody as AriaTableBody,\n  TableFooter as AriaTableFooter,\n  TableHeader as AriaTableHeader,\n  type Selection,\n  type SortDescriptor,\n} from \"react-aria-components\";\nimport { flushSync } from \"react-dom\";\n\nimport { Button } from \"../button/button.js\";\nimport { Checkbox } from \"../checkbox/checkbox.js\";\nimport { cn, cnAll } from \"../lib/cn.js\";\nimport { useFlip } from \"../lib/flip.js\";\nimport { SwapText } from \"../lib/swap-text.js\";\nimport { Select, SelectItem } from \"../select/select.js\";\n\n/**\n * Table, ported from the legacy shadcn table onto React Aria's Table.\n *\n * The legacy component in the product app rendered NOTHING -- its body was\n * `return <>{children(renderProps)}</>` -- so all six of its consumers\n * hand-built `<table>`, `tableLayout: fixed`, a `<colgroup>` and a min-width,\n * and its config object was opt-OUT, so they wrote paragraphs of\n * `enabled: false`. Six consumers produced six different tables. This one\n * renders from `data` + `columns` + `getRowId`; everything else is opt-in.\n *\n * WIDTHS ARE CSS, and that is not a stylistic choice. React Aria's own `width`\n * on a `<Column>` is ignored outside a `ResizableTableContainer`, and its\n * dev-warning is dead code in 1.21.1 -- `for (let prop in ['width', ...])`\n * iterates the INDICES, so the guard tests `'0' in props` and never fires. A\n * width handed to React Aria disappears with no error and no console output:\n * `width={120}` measured 42.675px in a browser. So `Column.width` is emitted\n * as a style on the header cell, and any width puts the table into\n * `table-layout: fixed` -- without which a declared width is only a hint.\n *\n * THE ROW HIGHLIGHT IS PAINTED FROM `:hover` AS WELL AS `data-[hovered]`, and\n * that is a departure from the rule that state comes from React Aria data\n * attributes rather than bare pseudo-classes. React Aria stamps `data-hovered`\n * on a row ONLY when the row is interactive -- `onRowAction` or a selection\n * mode -- exactly as it gates `Column` hover on `allowsSorting`. Four of the\n * six legacy consumers are read-only tables that painted a hover fill, so\n * `data-[hovered]` alone would drop their pointer affordance in silence. The\n * rule exists because `:focus` fires on click where `data-[focus-visible]`\n * does not; `:hover` has no such twin, and on an interactive row the two\n * selectors match the same element with the same colour. The keyboard needs no\n * workaround: `data-focused` IS emitted on read-only rows.\n *\n * `leading-*` sits on the table rather than on the cell. tailwind-merge treats\n * a later `text-*` as owning line-height and silently strips a `leading-*`\n * that precedes it, and the cells carry `text-start`/`text-center`/`text-end`.\n * Line-height inherits, so putting it one level up removes the hazard instead\n * of policing it.\n */\n\n/**\n * The card. Every table in the product sits in one.\n *\n * The edge uses `separator`, NOT `border`, and that reverses what an earlier\n * revision of this file claimed. Measured against the running product, its card\n * is `border border-border` resolving to #e6e6e6 -- the same hairline as the row\n * dividers. The earlier argument was that the card edge is where WCAG 1.4.11\n * lands; on reflection it does not. 1.4.11 covers what is needed to identify\n * user interface COMPONENTS and their states, and a static table is not one:\n * the interactive parts inside it -- sortable headers, pagination buttons --\n * carry their own focus indicators and borders, which are still held to 3:1.\n *\n * overflow-hidden is load-bearing: the header fill runs to the table's edge and\n * would square off the rounded corners without it.\n *\n * THE EDGE SHADOWS. A table wider than its card scrolls inside it, and on a\n * trackpad the scrollbar only shows while scrolling, so a cut-off column looks\n * like the table's last one. The card carries `data-overflow-start` and\n * `data-overflow-end` while columns are hidden on that side (the Table sets\n * them from its scroll position), and each draws a shadow on that edge: the\n * text colour fading to nothing at 15%, so it follows the theme. With a sticky\n * first column the start is never hidden behind the card's edge, so the start\n * shadow stays off and the sticky column's own divider does that job.\n */\nexport const tableCardVariants = cva(\n  [\n    \"w-full box-border overflow-hidden relative isolate\",\n    \"before:pointer-events-none before:absolute before:inset-y-0 before:start-0 before:z-2 before:w-6\",\n    \"before:bg-linear-to-r rtl:before:bg-linear-to-l before:from-foreground before:to-transparent\",\n    \"before:opacity-0 motion-safe:before:transition-opacity\",\n    \"data-[overflow-start]:not-data-[sticky-first]:before:opacity-15\",\n    \"after:pointer-events-none after:absolute after:inset-y-0 after:end-0 after:z-2 after:w-6\",\n    \"after:bg-linear-to-l rtl:after:bg-linear-to-r after:from-foreground after:to-transparent\",\n    \"after:opacity-0 motion-safe:after:transition-opacity\",\n    \"data-[overflow-end]:after:opacity-15\",\n  ],\n  {\n    variants: {\n      frame: {\n        card: \"rounded-panel border-(length:--border-width) border-separator bg-surface\",\n        /*\n         * No frame. Eleven of the product's tables either sit inside a card\n         * already -- gaining a second nested border and radius from an\n         * unconditional one -- or are deliberately bare on the page.\n         */\n        none: \"\",\n      },\n    },\n    defaultVariants: { frame: \"card\" },\n  },\n);\n\n/**\n * An absent value is an em-dash, not the word \"null\".\n *\n * The default renderer was `String(value)`, which paints the literal text\n * `null` into the cell -- a defect rather than a gap, and six of the product's\n * tables print a dash there. Zero and empty string are values and are left\n * alone; only null and undefined are absent.\n */\nfunction renderValue<T>(column: Column<T, unknown>, value: unknown, row: T): ReactNode {\n  if (value === null || value === undefined) return \"—\";\n\n  const formatted = column.format?.(value, row);\n  if (formatted !== undefined) return formatted;\n\n  /*\n   * Only primitives have a sensible default rendering. String(someObject) is\n   * \"[object Object]\", which is the same class of silent nonsense as the\n   * literal \"null\" this function exists to stop -- so an object-valued column\n   * renders nothing until it is given `format` or `cell`, which is loud enough\n   * to notice and quiet enough not to lie.\n   */\n  if (typeof value === \"string\" || typeof value === \"number\") return value;\n  if (typeof value === \"boolean\") return String(value);\n  return null;\n}\n\n/** Reserved id for the chevron column, so it cannot collide with a real one. */\nconst CHEVRON_COLUMN_ID = \"__table_row_action\";\n\n/*\n * The chevron column is sized to its glyph, not to a share of the table.\n * Given a percentage AND the usual --density-row-pad-x on both sides it pushed\n * the total past 100% under table-layout: fixed, and a table that fits grew a\n * horizontal scrollbar. w-10 is the spacing scale rather than a bracket value,\n * which check:hardcoding would reject.\n */\nconst CHEVRON_CELL = \"w-10 px-0 text-center\";\n\n/** Reserved id for the checkbox column of a selectable table. */\nconst SELECT_COLUMN_ID = \"__table_row_select\";\n\n/** The checkbox column is as wide as its box needs, with the table's usual inset on its leading side. */\nconst SELECT_CELL = \"w-11 px-0 ps-(--density-row-pad-x)\";\n\n/** The horizontal scroll container. The table owns it; 5 of 6 consumers built one by hand. */\nexport const tableScrollVariants = cva([\"w-full overflow-x-auto box-border\"]);\n\nexport const tableVariants = cva([\n  \"w-full border-collapse box-border\",\n  // font-sans and the explicit colours are not boilerplate: the reset in\n  // @seekalfred/styles is OPT-IN, so a consumer may load none and an unstyled\n  // table would inherit the host's serif on a transparent ground.\n  \"font-sans text-base leading-(--leading-normal)\",\n  \"bg-surface text-foreground\",\n]);\n\n/**\n * The header is near-white, not a grey band.\n *\n * The product fills it with its `--neutral-200`, #fffcfc: white carrying three\n * counts of warmth in green and blue. An earlier revision of this file called\n * that \"not worth a token of its own\" and used `background`, which made the\n * header exactly the colour of the rows -- so the band vanished and the only\n * thing separating the header was the divider under it. The difference is\n * small on purpose; absent is not the same as small. It is `--color-header-fill`\n * now, and it inverts properly in dark rather than being pinned to white.\n */\nexport const tableHeaderVariants = cva([\"text-muted-foreground\"], {\n  variants: { headerFill: { subtle: \"bg-header-fill\", none: \"bg-transparent\" } },\n  defaultVariants: { headerFill: \"subtle\" },\n});\n\n/** The pagination bar. A sibling of the table, never a row inside it. */\nexport const tablePaginationVariants = cva([\n  \"flex items-center justify-between gap-(--density-control-gap) box-border\",\n  \"px-(--density-row-pad-x) py-(--density-row-pad-y)\",\n  \"font-sans text-sm leading-(--leading-normal) text-muted-foreground\",\n]);\n\n/**\n * The bar under a selectable table: how many rows, or how many are selected,\n * and the action that clears them. A sibling of the table, like the pagination.\n */\nexport const tableSelectionBarVariants = cva([\n  \"flex min-h-11 items-center justify-between gap-(--density-control-gap) box-border\",\n  \"border-t-(length:--border-width) border-t-separator\",\n  \"ps-(--density-row-pad-x) pe-2 font-sans text-sm leading-(--leading-normal)\",\n  \"text-muted-foreground data-[active]:text-foreground\",\n  \"motion-safe:transition-colors motion-safe:duration-(--duration-standard) motion-safe:ease-settle\",\n]);\n\n/**\n * What stands in for the rows when there are none: centred, muted, and tall\n * enough to read as a state rather than as a squashed row.\n */\nexport const tableEmptyVariants = cva([\n  \"flex min-h-30 items-center justify-center px-(--density-row-pad-x) py-6\",\n  \"box-border text-center text-sm text-muted-foreground wrap-anywhere\",\n]);\n\n/** The footer band. Heavier than a row rule, because it closes the table. */\nexport const tableFooterVariants = cva([\n  \"bg-surface font-semibold text-foreground\",\n  \"border-t-(length:--border-width) border-t-border\",\n]);\n\n/** Shared focus treatment. Authored once; both the column header and the row take it. */\nconst FOCUS_RING = [\n  // outline-solid is load-bearing: outline-none sets --tw-outline-style to\n  // none, and the width utility resolves its style from that same variable, so\n  // a focus rule can apply a width and a colour and paint nothing.\n  \"outline-none\",\n  \"data-[focus-visible]:outline-solid\",\n  \"data-[focus-visible]:outline-(length:--focus-ring-width)\",\n  \"data-[focus-visible]:outline-offset-(--focus-ring-offset)\",\n  \"data-[focus-visible]:outline-(--color-ring)\",\n];\n\nexport const tableColumnVariants = cva(\n  [\n    \"px-(--density-row-pad-x) py-(--density-row-pad-y)\",\n    \"box-border align-middle text-sm font-semibold select-none\",\n    \"data-[sorted]:bg-foreground/3 data-[sorted]:text-foreground\",\n    ...FOCUS_RING,\n    // The whole cell is the hit target, not just the label. At compact density\n    // --density-row-pad-y is 7px, so a control wrapping only its text lands\n    // under the 24x24 floor of WCAG 2.2 target size (2.5.8) -- which the story\n    // harness enables explicitly on top of axe's defaults.\n    \"data-[allows-sorting]:cursor-pointer\",\n  ],\n  {\n    variants: {\n      align: { start: \"text-start\", center: \"text-center\", end: \"text-end\" },\n      /*\n       * Eleven tables -- a plurality of the app -- label columns in uppercase\n       * with tracking, and not one was reachable: the label was hardcoded\n       * `text-sm font-semibold`, and `className` lands on the <table>.\n       */\n      headerType: {\n        sentence: \"text-sm leading-none\",\n        caps: \"text-xs uppercase tracking-wide leading-none\",\n      },\n    },\n    defaultVariants: { align: \"start\", headerType: \"sentence\" },\n  },\n);\n\nexport const tableRowVariants = cva(\n  [\n    // The group a sticky first cell reads the row's state from (tableStickyCellVariants).\n    // bg-surface: opaque, so rows passing each other while a sort glides them\n    // cover one another cleanly instead of blending their text.\n    \"group/row box-border bg-surface\",\n    \"motion-safe:transition-colors motion-safe:duration-(--duration-fast) motion-safe:ease-standard\",\n    // See the header comment: :hover is what covers a read-only row.\n    \"hover:bg-muted data-[hovered]:bg-muted data-[focused]:bg-muted\",\n    // A chosen row: the muted fill, a step darker under the pointer.\n    \"data-[selected]:bg-muted data-[selected]:hover:bg-separator data-[selected]:data-[hovered]:bg-separator\",\n    // After the state fills, so the marked row keeps its identity while hovered.\n    \"data-[highlighted]:bg-primary-subtle\",\n    ...FOCUS_RING,\n  ],\n  {\n    variants: {\n      /*\n       * `grid` is gone. Across 25 real tables in the product not one drew\n       * vertical rules between cells -- a variant nobody asked for, shipped\n       * while the caps header eleven tables need was unreachable.\n       */\n      variant: {\n        lined: \"border-t-(length:--border-width) border-t-separator\",\n        plain: \"\",\n      },\n      /* rowClassName could not fake this: it gets the row but not its index. */\n      striped: { true: \"[&:nth-child(even)]:bg-row-stripe\", false: \"\" },\n    },\n    defaultVariants: { variant: \"lined\", striped: false },\n  },\n);\n\nexport const tableCellVariants = cva(\n  [\n    \"px-(--density-row-pad-x) py-(--density-row-pad-y)\",\n    // wrap-anywhere: a long word or URL breaks inside its cell rather than\n    // pushing the column wider than the card.\n    \"box-border align-middle wrap-anywhere\",\n    // The sorted column wears a still tint, which fills the gaps that open\n    // while rows pass each other.\n    \"data-[sorted]:bg-foreground/3\",\n    ...FOCUS_RING,\n  ],\n  {\n    variants: {\n      align: { start: \"text-start\", center: \"text-center\", end: \"text-end\" },\n      /* Ten tables set tabular figures -- the app's most consistent convention. */\n      numeric: { true: \"tabular-nums whitespace-nowrap\", false: \"\" },\n    },\n    defaultVariants: { align: \"start\", numeric: false },\n  },\n);\n\n/**\n * The first cell of every row, held in place while the rest scroll under it\n * (`stickyFirstColumn`).\n *\n * A sticky cell is opaque -- otherwise the scrolled cells show through it -- so\n * it repaints whatever fill its row has: the row's hover, focus and highlight\n * through `group/row`, the stripe when striped. A divider on its trailing edge\n * marks where the frozen column ends.\n */\nexport const tableStickyCellVariants = cva(\n  [\n    \"sticky start-0 z-1\",\n    \"border-e-(length:--border-width) border-e-separator\",\n  ],\n  {\n    variants: {\n      part: {\n        header: \"bg-header-fill\",\n        bare: \"bg-surface\",\n        body: [\n          \"bg-surface\",\n          \"group-hover/row:bg-muted group-data-[hovered]/row:bg-muted group-data-[focused]/row:bg-muted\",\n          \"group-data-[highlighted]/row:bg-primary-subtle\",\n        ],\n      },\n      striped: { true: \"\", false: \"\" },\n    },\n    compoundVariants: [\n      { part: \"body\", striped: true, class: \"group-even/row:bg-row-stripe\" },\n    ],\n    defaultVariants: { part: \"body\", striped: false },\n  },\n);\n\n/**\n * Which sides of a scroll container hide content right now.\n *\n * Read from the container on scroll and whenever it or the table resizes, so\n * a window resize or rows arriving later update it too. scrollLeft runs\n * negative in a right-to-left layout; the distance travelled is what counts.\n */\nfunction useScrollEdges(scroller: RefObject<HTMLDivElement | null>) {\n  const [edges, setEdges] = useState({ start: false, end: false });\n  useEffect(() => {\n    const el = scroller.current;\n    if (!el) return;\n    const update = () => {\n      const hidden = el.scrollWidth - el.clientWidth;\n      const travelled = Math.abs(el.scrollLeft);\n      const start = hidden > 1 && travelled > 1;\n      const end = hidden > 1 && travelled < hidden - 1;\n      setEdges((prev) => (prev.start === start && prev.end === end ? prev : { start, end }));\n    };\n    update();\n    el.addEventListener(\"scroll\", update, { passive: true });\n    const resize = typeof ResizeObserver === \"undefined\" ? undefined : new ResizeObserver(update);\n    resize?.observe(el);\n    if (el.firstElementChild) resize?.observe(el.firstElementChild);\n    return () => {\n      el.removeEventListener(\"scroll\", update);\n      resize?.disconnect();\n    };\n  }, [scroller]);\n  return edges;\n}\n\n/**\n * Identity for a row.\n *\n * Declared here rather than imported: React's own `Key` includes `bigint`,\n * which React Aria's collections do not accept, and importing React Aria's\n * would leak its types through the public API for no gain. This IS the set\n * React Aria takes.\n */\nexport type RowKey = string | number;\n\n/**\n * Both glyphs are aria-hidden and neither is focusable.\n *\n * The chevron says \"this row does something\"; the ROW is what React Aria makes\n * pressable and announces, so a second target would be a keyboard trap for no\n * gain. The caret says which way a column is sorted -- `aria-sort` already\n * tells assistive tech, but without a glyph the direction is carried by tint\n * alone, which is WCAG 1.4.1 use-of-colour.\n *\n * Drawn inline rather than taken as props: this package ships no icon set, and\n * Checkbox and Select already inline their single glyphs this way.\n */\n/**\n * Which page numbers to show, with gaps collapsed to an ellipsis.\n *\n * One sibling either side of the current page, plus the first and last, which\n * is what the product's own pager renders at its call sites: page 1 of 18 gives\n * `1 2 ... 18`. It is not a prop, because no consumer has asked for a second\n * width and a number nobody tunes is a number better inlined.\n */\nfunction pageWindow(current: number, total: number): (number | \"ellipsis\")[] {\n  const pages: (number | \"ellipsis\")[] = [];\n  const start = Math.max(1, current - 1);\n  const end = Math.min(total, current + 1);\n\n  if (start > 1) {\n    pages.push(1);\n    if (start > 2) pages.push(\"ellipsis\");\n  }\n  for (let page = start; page <= end; page++) pages.push(page);\n  if (end < total) {\n    if (end < total - 1) pages.push(\"ellipsis\");\n    pages.push(total);\n  }\n  return pages;\n}\n\nfunction PageChevronGlyph({ direction }: { direction: \"previous\" | \"next\" }) {\n  return (\n    <svg\n      data-slot=\"table-pagination-chevron\"\n      aria-hidden=\"true\"\n      viewBox=\"0 0 16 16\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"1.5\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      className=\"size-(--icon-sm) rtl:-scale-x-100\"\n    >\n      <path d={direction === \"next\" ? \"m6 3 5 5-5 5\" : \"m10 3-5 5 5 5\"} />\n    </svg>\n  );\n}\n\nfunction RowChevronGlyph() {\n  return (\n    <svg\n      data-slot=\"table-row-chevron\"\n      aria-hidden=\"true\"\n      viewBox=\"0 0 16 16\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"1.5\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      className=\"size-(--icon-sm) text-muted-foreground\"\n    >\n      {/* Logical, so it mirrors in RTL with the rest of the table. */}\n      <path d=\"m6 3 5 5-5 5\" className=\"rtl:-scale-x-100\" />\n    </svg>\n  );\n}\n\nfunction SortCaretGlyph({ direction }: { direction: \"ascending\" | \"descending\" | \"none\" }) {\n  return (\n    <svg\n      data-slot=\"table-sort-caret\"\n      data-direction={direction}\n      aria-hidden=\"true\"\n      viewBox=\"0 0 16 16\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"1.5\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      className=\"table-sort-caret size-(--icon-sm) ms-1 inline-block align-middle\"\n    >\n      {/*\n        Both glyphs are always drawn and the direction decides which shows: the\n        up-down pair says \"this sorts\" while the column is idle, and where the\n        column becomes sorted it gives way to a single arrow that fades in and\n        turns over when the direction flips (table-sort-caret, in styles.css).\n      */}\n      <g className=\"table-sort-idle\">\n        <path d=\"m4 7 4-4 4 4\" />\n        <path d=\"m4 9 4 4 4-4\" />\n      </g>\n      <g className=\"table-sort-arrow\">\n        <path d=\"M8 13V3\" />\n        <path d=\"m4.5 6.5 3.5-3.5 3.5 3.5\" />\n      </g>\n    </svg>\n  );\n}\n\n/** One column of a `Table`. */\nexport type Column<T, V = unknown> = {\n  /** Stable key. Becomes the column's id and the sort descriptor's `column`. */\n  id: string;\n  /** Header content. */\n  header: ReactNode;\n  /** Pulls this column's value out of a row. */\n  accessor: (row: T) => V;\n  /**\n   * Renders the cell. Defaults to `format?.(value, row) ?? String(value)`.\n   *\n   * Method syntax, not an arrow property, and that is load-bearing. A table\n   * holds columns of DIFFERENT value types in one array, so the array element\n   * has to be `Column<T, unknown>` -- and under `strictFunctionTypes` an arrow\n   * property is contravariant in its parameters, which would make\n   * `Column<T, string>` unassignable to it. Method members are checked\n   * bivariantly, which is precisely the semantics a heterogeneous collection\n   * needs. The alternative is `Column<T, any>`, and this package has no\n   * eslint-disable in it anywhere.\n   */\n  cell?(ctx: { value: V; row: T; index: number }): ReactNode;\n  /**\n   * Value to string. Deliberately separate from `cell`: this is what CSV\n   * export and sort comparators consume, and a ReactNode is no use to either.\n   */\n  format?(value: V, row: T): string;\n  /**\n   * Logical alignment, applied to BOTH the column header and its cells --\n   * React Aria keeps no link between the two, so the component owns it.\n   */\n  align?: \"start\" | \"center\" | \"end\";\n  /**\n   * Column width. Any width on any column puts the table into\n   * `table-layout: fixed`.\n   *\n   * Emitted as CSS, NEVER forwarded to React Aria's own `width` prop. React\n   * Aria ignores that one outside a `ResizableTableContainer`, and its\n   * dev-warning is dead code in 1.21.1 (`for...in` over an array literal, so\n   * the guard tests `'0' in props`). A width handed to it disappears with no\n   * error and no console output.\n   */\n  width?: number | `${number}%`;\n  /**\n   * A column of figures: tabular numerals, end-aligned unless `align` says\n   * otherwise. Ten of the product's tables set tabular figures -- the most\n   * consistently applied convention in the app. Without it, proportional\n   * digits leave a column of numbers ragged.\n   */\n  numeric?: boolean;\n  /** Opts this column into sorting. Off by default. */\n  sortable?: boolean;\n};\n\nexport interface TableProps<T> extends VariantProps<typeof tableRowVariants> {\n  /** The rows to render. */\n  data: readonly T[];\n  /** The columns, in display order. */\n  columns: readonly Column<T, unknown>[];\n  /** Stable identity for a row. Used as its key and to resolve `onRowAction`. */\n  getRowId: (row: T) => RowKey;\n  /**\n   * Required. React Aria's Table renders no `<caption>`, so this is the\n   * accessible name and there is no other source for it.\n   */\n  \"aria-label\": string;\n  /**\n   * The sorted column and direction, CONTROLLED.\n   *\n   * Pass this and the table stops sorting: you own the row order, which is\n   * what server-side sorting needs. Leave it off and the table sorts `data`\n   * itself from `defaultSortDescriptor` and header clicks.\n   */\n  sortDescriptor?: SortDescriptor;\n  /** The initial sort when uncontrolled. */\n  defaultSortDescriptor?: SortDescriptor;\n  /** Fires when a sortable column header is activated, controlled or not. */\n  onSortChange?: (descriptor: SortDescriptor) => void;\n  /**\n   * Fires on click or Enter. Receives the ROW, where React Aria's own handler\n   * receives a key -- every legacy consumer looked the row up again anyway.\n   *\n   * Setting it also makes rows interactive, which is what switches React\n   * Aria's `data-hovered` on.\n   */\n  onRowAction?: (row: T) => void;\n  /**\n   * Marks a row as the viewer's own -- the product tints \"Alfred AI (You)\".\n   *\n   * The tint is not the message. A fill alone is WCAG 1.4.1 use-of-colour, so\n   * the highlighted row is expected to say so in its own content, the way the\n   * product's does. This tints and sets `data-highlighted`; it does not invent\n   * meaning the row does not already carry.\n   */\n  isRowHighlighted?: (row: T) => boolean;\n  /** Extra classes per row, for styling that depends on row DATA. */\n  rowClassName?: (row: T) => string;\n  /**\n   * Rendered in place of the rows when `data` is empty.\n   *\n   * There is no default string on purpose: user-visible copy belongs in\n   * `useMessages()`, a mechanism this package does not have yet, and it is the\n   * one rule ARCHITECTURE says cannot be retrofitted.\n   */\n  empty?: ReactNode;\n  /**\n   * Minimum table width in px. Below it the wrapper scrolls horizontally, and\n   * the card shows a shadow on each edge that hides columns.\n   */\n  minWidth?: number;\n  /**\n   * Keeps the first column in place while the rest scroll sideways. For a\n   * register wider than its card whose first column says which row is which\n   * (an invoice number, a person's name).\n   */\n  stickyFirstColumn?: boolean;\n  /**\n   * Rows per page. Omit it and every row renders with no pagination UI.\n   *\n   * The table holds the page itself and slices AFTER sorting, so a sort\n   * reorders the whole set rather than shuffling the current page, and lands\n   * you back on page 1.\n   *\n   * With `pageSizeOptions` this is the STARTING size and the table owns it\n   * from then on; a later change to the prop does not move a reader who has\n   * chosen their own. Without them it is simply the size.\n   */\n  pageSize?: number;\n  /**\n   * Rows-per-page choices. Given them, the bar grows a select on its trailing\n   * side, which is the arrangement every paged table in the product uses:\n   * page numbers leading, rows-per-page trailing.\n   */\n  pageSizeOptions?: readonly number[];\n  /** Notified after the reader picks a new size. The table has already applied it. */\n  onPageSizeChange?: (pageSize: number) => void;\n  /**\n   * Copy for the pagination controls.\n   *\n   * These carry English defaults, which is a known debt: ARCHITECTURE section\n   * 7 rule 9 routes user-visible copy through a `useMessages()` hook that does\n   * not exist in this package yet. They are props so a consumer is not stuck\n   * waiting for it, and so the eventual mechanism has somewhere to land. The\n   * navigation landmark takes its name from `aria-label` instead, which avoids\n   * inventing a fourth string.\n   */\n  pageLabels?: {\n    previous?: string;\n    next?: string;\n    /**\n     * Accessible name for a page button.\n     *\n     * `isCurrent` exists because `aria-current` cannot reach the button.\n     * React Aria's Button runs its props through `filterDOMProps`, whose\n     * allowlist covers `id` and the labelling attributes and nothing else, so\n     * an `aria-current` handed to it is dropped with no error -- the same\n     * class of silent loss as `Column.width`. The current page therefore says\n     * so in its name, which every screen reader announces.\n     */\n    page?: (page: number, isCurrent: boolean) => string;\n    /** Option text in the rows-per-page select. */\n    perPage?: (pageSize: number) => string;\n    /** Accessible name for the rows-per-page select itself. */\n    rowsPerPage?: string;\n  };\n  /**\n   * Row selection. `multiple` adds a checkbox column (the library's Checkbox,\n   * on React Aria's table selection) with a select-all box in the header that\n   * shows a dash while only some rows are chosen, and a bar under the table\n   * that counts the rows and clears the choice. Clicking a row's checkbox, or\n   * the row itself, toggles it; Escape clears. `none` (the default) adds\n   * nothing.\n   */\n  selectionMode?: \"none\" | \"multiple\";\n  /**\n   * The chosen rows, CONTROLLED: a set of `getRowId` values, or `\"all\"`.\n   * Pass this and the table stops keeping the selection itself.\n   */\n  selectedKeys?: Selection;\n  /** The rows chosen at the start, when uncontrolled. */\n  defaultSelectedKeys?: Selection;\n  /** Fires with the new selection (a set of ids, or `\"all\"`), controlled or not. */\n  onSelectionChange?: (keys: Selection) => void;\n  /**\n   * Copy for the selection controls, with English defaults for the same reason\n   * as `pageLabels`: a `useMessages()` mechanism does not exist in this package\n   * yet.\n   */\n  selectionLabels?: {\n    /** Accessible name of the header checkbox. React Aria's own, localized (\"Select All\"), when omitted. */\n    selectAll?: string;\n    /**\n     * The word before a row's name in its checkbox's accessible name. React\n     * Aria appends the text of the row's first column itself, so \"Select\"\n     * becomes \"Select Meta\"; its own localized word is used when omitted.\n     */\n    selectRow?: string;\n    /** What a row is called in the count: \"1 row\", \"5 rows\". */\n    item?: { one: string; other: string };\n    /** The word after the count while some rows are chosen: \"3 selected\". */\n    selected?: string;\n    /** The clear button's text. */\n    clear?: string;\n  };\n  /**\n   * Whether the table draws its own card. `none` for one that already sits\n   * inside a card, or is meant to be bare on the page.\n   */\n  frame?: \"card\" | \"none\";\n  /** Column label treatment: sentence case, or uppercase with tracking. */\n  headerType?: \"sentence\" | \"caps\";\n  /** Header background. `none` for report tables that carry no band. */\n  headerFill?: \"subtle\" | \"none\";\n  /** Zebra-stripe alternate rows. */\n  striped?: boolean;\n  /**\n   * A footer row, in a real `<tfoot>`.\n   *\n   * Called once per column; return the cell content, or null for a blank. A\n   * real footer rather than one more row of data, so it is announced as one.\n   */\n  totalRow?: (column: Column<T, unknown>) => ReactNode;\n  /** Extra classes for the table. Merged last, so they win conflicts with ours. */\n  className?: string;\n}\n\n/** 1 when the value grew, -1 when it shrank: the way a changed number swaps. Updated during render. */\nfunction useChangeDirection(value: number) {\n  const [seen, setSeen] = useState({ value, dir: 1 });\n  if (seen.value !== value) setSeen({ value, dir: value < seen.value ? -1 : 1 });\n  return seen.dir;\n}\n\n/**\n * The bar under a selectable table. With nothing chosen it counts the rows\n * (\"12 rows\"); with some chosen it counts them (\"3 selected\") and offers the\n * way back. The number and the word swap in place as they change.\n */\nfunction SelectionBar({\n  count,\n  total,\n  labels,\n  onClear,\n}: {\n  count: number;\n  total: number;\n  labels: {\n    item: { one: string; other: string };\n    selected: string;\n    clear: string;\n  };\n  onClear: () => void;\n}) {\n  const shown = count || total;\n  const noun = count ? labels.selected : shown === 1 ? labels.item.one : labels.item.other;\n  const direction = useChangeDirection(shown);\n  return (\n    <div\n      data-slot=\"table-selection-bar\"\n      data-active={count > 0 || undefined}\n      className={cnAll(tableSelectionBarVariants())}\n    >\n      <span data-slot=\"table-selection-count\" className=\"inline-flex items-baseline gap-1\">\n        <SwapText swapKey={String(shown)} dir={direction} className=\"inline-block tabular-nums\">\n          {shown}\n        </SwapText>{\" \"}\n        <SwapText swapKey={noun} dir={count ? 1 : -1} className=\"inline-block\">\n          {noun}\n        </SwapText>\n      </span>\n      {count > 0 ? (\n        <Button\n          variant=\"ghost\"\n          size=\"sm\"\n          data-slot=\"table-selection-clear\"\n          className=\"motion-safe:animate-fade-in\"\n          onPress={onClear}\n        >\n          {labels.clear}\n        </Button>\n      ) : null}\n    </div>\n  );\n}\n\n/** Builds columns that keep each column's own value type. */\nexport function createColumns<T>() {\n  return {\n    column: <V,>(definition: Column<T, V>): Column<T, V> => definition,\n  };\n}\n\n/**\n * A data table.\n *\n * Maturity: **beta**. Row expansion, filtering and grouping are deliberately\n * absent -- each had one consumer or none across the six legacy tables, and the\n * stateful ones belong to DataGrid. Sorting glides: when a sort reorders the\n * rows, each slides to its new place instead of jumping (the lib/flip helper).\n * Selection is opt-in with `selectionMode=\"multiple\"`.\n *\n * @example\n * const { column } = createColumns<Channel>();\n * const columns = useMemo(() => [\n *   column({ id: \"name\", header: \"Channel\", accessor: (r) => r.name }),\n *   column({ id: \"cost\", header: \"Cost\", accessor: (r) => r.cost,\n *            format: (v) => currency(v), align: \"end\", sortable: true }),\n * ], []);\n *\n * <Table aria-label=\"Channels\" data={rows} columns={columns} getRowId={(r) => r.id} />\n */\n/**\n * The orderable value behind a cell.\n *\n * Objects are NOT stringified. `String(someObject)` is \"[object Object]\", so a\n * column of objects would sort every row equal while looking like it worked --\n * and a column's own `format` already exists to turn its value into a string,\n * so that is what gets used instead of a blind cast.\n *\n * Numbers stay numbers even when the column formats them: sorting \"$1,220\"\n * against \"$12,480\" lexically puts the larger first.\n */\nfunction sortKey<T>(column: Column<T, unknown>, row: T): string | number {\n  const value = column.accessor(row);\n  if (typeof value === \"number\" || typeof value === \"string\") return value;\n  if (typeof value === \"boolean\") return value ? 1 : 0;\n  if (value instanceof Date) return value.getTime();\n  if (value == null) return \"\";\n  return column.format?.(value, row) ?? \"\";\n}\n\n/** Orders two cell keys. Numbers numerically, strings by locale. */\nfunction compareKeys(a: string | number, b: string | number): number {\n  if (typeof a === \"number\" && typeof b === \"number\") return a - b;\n  // localeCompare so \"Item 10\" sorts after \"Item 9\", not before it.\n  return String(a).localeCompare(String(b));\n}\n\nexport const Table = forwardRef(function Table<T>(\n  {\n    data,\n    columns,\n    getRowId,\n    variant,\n    sortDescriptor,\n    defaultSortDescriptor,\n    onSortChange,\n    onRowAction,\n    isRowHighlighted,\n    rowClassName,\n    selectionMode,\n    selectedKeys,\n    defaultSelectedKeys,\n    onSelectionChange,\n    selectionLabels,\n    frame,\n    headerType,\n    headerFill,\n    striped,\n    totalRow,\n    empty,\n    minWidth,\n    stickyFirstColumn,\n    pageSize,\n    pageSizeOptions,\n    onPageSizeChange,\n    pageLabels,\n    className,\n    ...props\n  }: TableProps<T>,\n  ref: ForwardedRef<HTMLTableElement>,\n) {\n  /*\n   * Uncontrolled sorting is the component's job, not the call site's.\n   *\n   * React Aria holds no sort state and never reorders rows -- it reports the\n   * descriptor and stops. Leaving it there would mean `sortable: true` renders\n   * a header that highlights, announces itself via aria-sort, and sorts\n   * nothing until the consumer writes the state and the comparator by hand.\n   * That is a demo that only works in a story.\n   *\n   * So: uncontrolled, the table holds the descriptor and sorts `data`.\n   * Controlled (a `sortDescriptor` prop), it sorts nothing and the consumer\n   * owns the order, which is what server-side sorting requires.\n   */\n  const isControlled = sortDescriptor !== undefined;\n  const [uncontrolledSort, setUncontrolledSort] = useState(defaultSortDescriptor);\n  const activeSort = isControlled ? sortDescriptor : uncontrolledSort;\n\n  const rows = useMemo(() => {\n    if (isControlled || !activeSort) return data;\n    const sorted = columns.find((column) => column.id === activeSort.column);\n    if (!sorted) return data;\n\n    const direction = activeSort.direction === \"descending\" ? -1 : 1;\n    return [...data].sort(\n      (a, b) => direction * compareKeys(sortKey(sorted, a), sortKey(sorted, b)),\n    );\n  }, [data, columns, activeSort, isControlled]);\n\n  /*\n   * Paging happens AFTER sorting, which is the whole reason it lives in the\n   * component. Slice first and a sort would only reshuffle the ten rows you\n   * can see, so \"sort by cost ascending\" would not find the cheapest row in\n   * the set -- the single most common way a hand-rolled table gets this wrong.\n   */\n  // A size the reader picked outranks the prop, and is held here rather than\n  // synced from it by an effect -- an effect would snap them back to the\n  // consumer's default on every unrelated re-render.\n  const [chosenSize, setChosenSize] = useState<number>();\n  const rowsPerPage = chosenSize ?? pageSize;\n\n  const pageCount = rowsPerPage ? Math.max(1, Math.ceil(rows.length / rowsPerPage)) : 1;\n  const [page, setPage] = useState(1);\n  // Clamped rather than reset by an effect, so a shrinking `data` cannot strand\n  // the view on a page that no longer exists.\n  const currentPage = Math.min(page, pageCount);\n  const pageStart = rowsPerPage ? (currentPage - 1) * rowsPerPage : 0;\n  const visibleRows = rowsPerPage ? rows.slice(pageStart, pageStart + rowsPerPage) : rows;\n\n  const labels = {\n    previous: pageLabels?.previous ?? \"Go to previous page\",\n    next: pageLabels?.next ?? \"Go to next page\",\n    page:\n      pageLabels?.page ??\n      ((target: number, isCurrent: boolean) =>\n        isCurrent ? `Page ${target}, current page` : `Go to page ${target}`),\n    perPage: pageLabels?.perPage ?? ((size: number) => `${size} per page`),\n    rowsPerPage: pageLabels?.rowsPerPage ?? \"Rows per page\",\n  };\n\n  const rowsByKey = new Map<RowKey, T>(data.map((row) => [getRowId(row), row]));\n\n  /*\n   * Selection is React Aria's: it owns the keyboard, the modifier clicks and the\n   * announcements. The table only holds the set when uncontrolled, so the bar\n   * below can count it, and renders the checkbox column.\n   */\n  const selectable = selectionMode === \"multiple\";\n  const [uncontrolledSelection, setUncontrolledSelection] = useState<Selection>(\n    defaultSelectedKeys ?? new Set(),\n  );\n  const selection = selectedKeys ?? uncontrolledSelection;\n  const commitSelection = (keys: Selection) => {\n    if (selectedKeys === undefined) setUncontrolledSelection(keys);\n    onSelectionChange?.(keys);\n  };\n  const selectedCount =\n    selection === \"all\"\n      ? visibleRows.length\n      : [...selection].filter((key) => rowsByKey.has(key)).length;\n  const selectLabels = {\n    item: selectionLabels?.item ?? { one: \"row\", other: \"rows\" },\n    selected: selectionLabels?.selected ?? \"selected\",\n    clear: selectionLabels?.clear ?? \"Clear selection\",\n  };\n  // A cell is \"sorted\" while its column is the one the rows are ordered by.\n  const sortedColumn = activeSort?.column;\n  const hasWidths = columns.some((column) => column.width !== undefined);\n\n  const tableStyle: CSSProperties = {};\n  if (minWidth !== undefined) tableStyle.minWidth = minWidth;\n  // Declared widths only hold under a fixed layout; otherwise the browser\n  // treats them as hints and the columns drift, which is why 5 of the 6 legacy\n  // consumers set this by hand.\n  if (hasWidths) tableStyle.tableLayout = \"fixed\";\n\n  const scrollRef = useRef<HTMLDivElement>(null);\n  const edges = useScrollEdges(scrollRef);\n  /*\n   * Rows glide to their new places when the order changes.\n   *\n   * The key is the order the rows have in the DOM, not the order of `data`.\n   * React Aria builds its collection in a pass of its own, so when a sort\n   * reorders `data` the rows are still in their old places for this render and\n   * only move in a later one; looking at the data order would measure nothing\n   * moving. A mutation observer sees the move the moment it happens and\n   * re-renders synchronously, before the browser paints, so the rows are held\n   * where they were and released on the transition with no flash of the new\n   * order. Positions are read from the card's own corner, so scrolling the page\n   * between two sorts is not mistaken for the rows moving.\n   */\n  const [rowOrder, setRowOrder] = useState(\"\");\n  useEffect(() => {\n    const root = scrollRef.current;\n    if (!root) return;\n    let last = \"\";\n    const look = () => {\n      const next = Array.from(root.querySelectorAll<HTMLElement>(\"tbody > [data-flip]\"))\n        .map((row) => row.dataset.flip)\n        .join(\"\\u0000\");\n      if (next === last) return;\n      last = next;\n      flushSync(() => setRowOrder(next));\n    };\n    look();\n    const observer = new MutationObserver(look);\n    observer.observe(root, { childList: true, subtree: true });\n    return () => observer.disconnect();\n  }, []);\n  useFlip(scrollRef, rowOrder, \"var(--duration-smooth)\", \"var(--ease-smooth)\", true);\n  const stickyCell = (part: \"header\" | \"bare\" | \"body\") =>\n    tableStickyCellVariants({ part, striped: part === \"body\" && !!striped });\n\n  return (\n    <div\n      data-slot=\"table-card\"\n      data-overflow-start={edges.start || undefined}\n      data-overflow-end={edges.end || undefined}\n      data-sticky-first={stickyFirstColumn || undefined}\n      className={cnAll(tableCardVariants({ frame }))}\n    >\n      <div ref={scrollRef} data-slot=\"table-scroll\" className={cnAll(tableScrollVariants())}>\n        <AriaTable\n          // The ref goes on the table itself, never on the table-card or\n          // table-scroll divs this component wraps it in -- callers need the\n          // real HTMLTableElement (to measure it, scroll it into view, etc.),\n          // not one of the two divs this component renders around it.\n          ref={ref}\n          {...props}\n          data-slot=\"table\"\n          className={cn(tableVariants(), className)}\n          style={tableStyle}\n          selectionMode={selectable ? \"multiple\" : undefined}\n          selectedKeys={selectable ? selection : undefined}\n          onSelectionChange={selectable ? commitSelection : undefined}\n          sortDescriptor={activeSort}\n          onSortChange={(descriptor) => {\n            if (!isControlled) setUncontrolledSort(descriptor);\n            // Back to the first page: the order changed under you, so staying on\n            // page 3 shows rows you did not ask to see.\n            setPage(1);\n            onSortChange?.(descriptor);\n          }}\n          onRowAction={\n            onRowAction\n              ? (key) => {\n                  const row = rowsByKey.get(key);\n                  if (row !== undefined) onRowAction(row);\n                }\n              : undefined\n          }\n        >\n          <AriaTableHeader\n            data-slot=\"table-header\"\n            className={cnAll(tableHeaderVariants({ headerFill }))}\n          >\n            {selectable ? (\n              <AriaColumn\n                id={SELECT_COLUMN_ID}\n                data-slot=\"table-column\"\n                className={cnAll(\n                  tableColumnVariants({ headerType }),\n                  SELECT_CELL,\n                  stickyFirstColumn && stickyCell(headerFill === \"none\" ? \"bare\" : \"header\"),\n                  stickyFirstColumn && \"border-e-0\",\n                )}\n              >\n                {/* The header box selects every row, and shows a dash while only some are chosen. */}\n                <Checkbox slot=\"selection\" aria-label={selectionLabels?.selectAll} />\n              </AriaColumn>\n            ) : null}\n            {columns.map((column) => (\n              <AriaColumn\n                key={column.id}\n                id={column.id}\n                isRowHeader={column === columns[0]}\n                allowsSorting={column.sortable}\n                data-slot=\"table-column\"\n                data-sorted={sortedColumn === column.id || undefined}\n                className={cnAll(\n                  tableColumnVariants({\n                    align: column.align ?? (column.numeric ? \"end\" : undefined),\n                    headerType,\n                  }),\n                  stickyFirstColumn &&\n                    column === columns[0] &&\n                    stickyCell(headerFill === \"none\" ? \"bare\" : \"header\"),\n                  stickyFirstColumn && selectable && column === columns[0] && \"start-11\",\n                )}\n                style={column.width === undefined ? undefined : { width: column.width }}\n              >\n                {column.header}\n                {/*\n                 * A sortable column says so BEFORE it is sorted. Rendering the\n                 * caret only once sorted left a sortable header looking exactly\n                 * like a fixed one, so the only way to discover sorting was to\n                 * click a header and see whether anything moved -- the same gap\n                 * the product closed in its own header, and the reason the\n                 * paired chevron exists rather than an arrow.\n                 */}\n                {column.sortable ? (\n                  <SortCaretGlyph\n                    direction={activeSort?.column === column.id ? activeSort.direction : \"none\"}\n                  />\n                ) : null}\n              </AriaColumn>\n            ))}\n            {onRowAction ? (\n              /*\n               * The chevron's own column. Its header is intentionally EMPTY: a\n               * visually-hidden label would be user-visible copy, and section 7\n               * rule 9 has nowhere to put it until useMessages() exists.\n               */\n              <AriaColumn\n                id={CHEVRON_COLUMN_ID}\n                data-slot=\"table-column\"\n                className={cnAll(tableColumnVariants({ headerType }), CHEVRON_CELL)}\n              >\n                {\"\"}\n              </AriaColumn>\n            ) : null}\n          </AriaTableHeader>\n          <AriaTableBody\n            data-slot=\"table-body\"\n            renderEmptyState={\n              empty === undefined\n                ? undefined\n                : () => (\n                    <div data-slot=\"table-empty\" className={cnAll(tableEmptyVariants())}>\n                      {empty}\n                    </div>\n                  )\n            }\n          >\n            {visibleRows.map((row, index) => (\n              <AriaRow\n                key={String(getRowId(row))}\n                id={getRowId(row)}\n                data-slot=\"table-row\"\n                // The rows useFlip glides when a sort reorders them (the value is the key the order is read from).\n                data-flip={String(getRowId(row))}\n                data-highlighted={isRowHighlighted?.(row) || undefined}\n                className={cn(\n                  cnAll(\n                    tableRowVariants({ variant, striped }),\n                    onRowAction && \"cursor-pointer\",\n                  ),\n                  rowClassName?.(row),\n                )}\n              >\n                {selectable ? (\n                  <AriaCell\n                    data-slot=\"table-cell\"\n                    className={cnAll(\n                      tableCellVariants(),\n                      SELECT_CELL,\n                      stickyFirstColumn && stickyCell(\"body\"),\n                      stickyFirstColumn && \"border-e-0\",\n                    )}\n                  >\n                    <Checkbox slot=\"selection\" aria-label={selectionLabels?.selectRow} />\n                  </AriaCell>\n                ) : null}\n                {columns.map((column) => {\n                  const value: unknown = column.accessor(row);\n                  return (\n                    <AriaCell\n                      key={column.id}\n                      data-slot=\"table-cell\"\n                      data-sorted={sortedColumn === column.id || undefined}\n                      className={cnAll(\n                        tableCellVariants({\n                          align: column.align ?? (column.numeric ? \"end\" : undefined),\n                          numeric: column.numeric,\n                        }),\n                        stickyFirstColumn && column === columns[0] && stickyCell(\"body\"),\n                        stickyFirstColumn && selectable && column === columns[0] && \"start-11\",\n                      )}\n                    >\n                      {column.cell\n                        ? column.cell({ value, row, index })\n                        : renderValue(column, value, row)}\n                    </AriaCell>\n                  );\n                })}\n                {onRowAction ? (\n                  <AriaCell\n                    data-slot=\"table-cell\"\n                    className={cnAll(tableCellVariants(), CHEVRON_CELL)}\n                  >\n                    <RowChevronGlyph />\n                  </AriaCell>\n                ) : null}\n              </AriaRow>\n            ))}\n          </AriaTableBody>\n          {totalRow ? (\n            <AriaTableFooter data-slot=\"table-footer\" className={cnAll(tableFooterVariants())}>\n              <AriaRow id=\"__table_total\">\n                {selectable ? (\n                  <AriaCell\n                    data-slot=\"table-cell\"\n                    className={cnAll(\n                      tableCellVariants(),\n                      SELECT_CELL,\n                      stickyFirstColumn && stickyCell(\"bare\"),\n                      stickyFirstColumn && \"border-e-0\",\n                    )}\n                  >\n                    {\"\"}\n                  </AriaCell>\n                ) : null}\n                {columns.map((col) => (\n                  <AriaCell\n                    key={col.id}\n                    data-slot=\"table-cell\"\n                    className={cnAll(\n                      tableCellVariants({\n                        align: col.align ?? (col.numeric ? \"end\" : undefined),\n                        numeric: col.numeric,\n                      }),\n                      stickyFirstColumn && col === columns[0] && stickyCell(\"bare\"),\n                      stickyFirstColumn && selectable && col === columns[0] && \"start-11\",\n                    )}\n                  >\n                    {totalRow(col)}\n                  </AriaCell>\n                ))}\n                {onRowAction ? (\n                  <AriaCell\n                    data-slot=\"table-cell\"\n                    className={cnAll(tableCellVariants(), CHEVRON_CELL)}\n                  >\n                    {\"\"}\n                  </AriaCell>\n                ) : null}\n              </AriaRow>\n            </AriaTableFooter>\n          ) : null}\n        </AriaTable>\n      </div>\n      {selectable ? (\n        <SelectionBar\n          count={selectedCount}\n          total={data.length}\n          labels={selectLabels}\n          onClear={() => commitSelection(new Set())}\n        />\n      ) : null}\n      {rowsPerPage === undefined || (pageCount <= 1 && !pageSizeOptions) ? null : (\n        <nav\n          data-slot=\"table-pagination\"\n          aria-label={`${props[\"aria-label\"]} pagination`}\n          className={cnAll(tablePaginationVariants())}\n        >\n          {/* Present even when empty, so the select stays on the trailing edge. */}\n          <div data-slot=\"table-pagination-pages\" className=\"flex items-center gap-1\">\n            {pageCount <= 1 ? null : (\n              <>\n                <Button\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  className=\"w-(--density-control-h-sm) px-0\"\n                  aria-label={labels.previous}\n                  isDisabled={currentPage <= 1}\n                  onPress={() => setPage(currentPage - 1)}\n                >\n                  <PageChevronGlyph direction=\"previous\" />\n                </Button>\n                {pageWindow(currentPage, pageCount).map((entry, index) =>\n                  entry === \"ellipsis\" ? (\n                    <span\n                      // The gap is decoration; the pages either side of it are\n                      // what a reader navigates by, so this is not announced.\n                      key={`ellipsis-${String(index)}`}\n                      data-slot=\"table-pagination-ellipsis\"\n                      aria-hidden=\"true\"\n                      className=\"px-2 text-sm text-muted-foreground\"\n                    >\n                      &hellip;\n                    </span>\n                  ) : (\n                    <Button\n                      key={entry}\n                      variant={entry === currentPage ? \"primary\" : \"ghost\"}\n                      size=\"sm\"\n                      className=\"min-w-(--density-control-h-sm) px-2\"\n                      aria-label={labels.page(entry, entry === currentPage)}\n                      onPress={() => setPage(entry)}\n                    >\n                      {entry}\n                    </Button>\n                  ),\n                )}\n                <Button\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  className=\"w-(--density-control-h-sm) px-0\"\n                  aria-label={labels.next}\n                  isDisabled={currentPage >= pageCount}\n                  onPress={() => setPage(currentPage + 1)}\n                >\n                  <PageChevronGlyph direction=\"next\" />\n                </Button>\n              </>\n            )}\n          </div>\n          {pageSizeOptions === undefined ? null : (\n            <Select\n              // Select is w-full by default, which in this flex row stretches\n              // it across the whole bar and drags it back to the leading edge\n              // the moment the page numbers retire.\n              className=\"w-auto\"\n              label={labels.rowsPerPage}\n              labelHidden\n              selectedKey={String(rowsPerPage)}\n              onSelectionChange={(key) => {\n                const size = Number(key);\n                setChosenSize(size);\n                // Page 4 of 18 is page 1 of 2 at a larger size; keeping the\n                // number would land the reader past the end of the data.\n                setPage(1);\n                onPageSizeChange?.(size);\n              }}\n            >\n              {pageSizeOptions.map((option) => (\n                <SelectItem key={option} id={String(option)}>\n                  {labels.perPage(option)}\n                </SelectItem>\n              ))}\n            </Select>\n          )}\n        </nav>\n      )}\n    </div>\n  );\n}\n// forwardRef cannot carry a type parameter through a .tsx call expression, so\n// Table<T>'s generic signature is restored here with a type-only cast on the\n// export; it costs nothing at runtime and the inner function is still named\n// \"Table\" for DevTools.\n) as <T>(props: TableProps<T> & RefAttributes<HTMLTableElement>) => ReactElement | null;\n"],"mappings":"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"}

package/dist/tabs/tabs.js

@@ -1,7 +1,8 @@
 "use client";
 import { cn } from "../lib/cn.js";
+import { mergeRefs } from "../lib/merge-refs.js";
 import { cva } from "class-variance-authority";
-import { forwardRef } from "react";
+import { forwardRef, useEffect, useMemo, useState } from "react";
 import { Tab, TabList, TabPanel, Tabs } from "react-aria-components";
 import { jsx } from "react/jsx-runtime";
 //#region src/tabs/tabs.tsx
@@ -37,13 +38,140 @@ import { jsx } from "react/jsx-runtime";
 * Aria's `shouldForceMount` on TabPanel restores the old behaviour where
 * a call site needs it.
 */
-const tabsVariants = cva(["flex flex-col gap-2 box-border font-sans"]);
+const tabsVariants = cva(["flex flex-col gap-2 box-border font-sans", "min-w-0 max-w-full"]);
 const tabListVariants = cva([
 	"inline-flex w-fit items-center justify-center gap-1",
-	"rounded-lg p-1",
+	"rounded-control p-1",
 	"bg-muted text-muted-foreground",
-	"box-border"
+	"tab-highlight",
+	"box-border",
+	"max-w-full",
+	"[--fade-tabs:--spacing(6)] [--fade-tabs-from:calc(100%-var(--fade-tabs))]",
+	"data-[overflowing]:overflow-x-auto data-[overflowing]:overscroll-x-contain",
+	"data-[overflowing]:justify-start",
+	"ltr:data-[fade-start]:mask-l-from-(--fade-tabs-from) rtl:data-[fade-start]:mask-r-from-(--fade-tabs-from)",
+	"ltr:data-[fade-end]:mask-r-from-(--fade-tabs-from) rtl:data-[fade-end]:mask-l-from-(--fade-tabs-from)"
 ]);
+/**
+* Sets data-overflowing, data-fade-start and data-fade-end on a tab row
+* while its tabs are wider than its box, and on the first measurement that
+* finds it too wide, scrolls the selected tab into view INSIDE the row
+* (never the page, so a row below the fold does not drag the page to it).
+*
+* The attributes are written straight onto the element, so a scroll or a
+* resize re-renders nothing. Arrow keys need no help: React Aria keeps the
+* focused tab in view in the row that scrolls.
+*/
+const FADE_PX = 24;
+function useScrollWhenTooWide() {
+	const [row, setRow] = useState(null);
+	useEffect(() => {
+		if (!row || typeof ResizeObserver === "undefined") return;
+		let revealed = false;
+		const measure = () => {
+			const overflowing = row.scrollWidth > row.clientWidth + 1;
+			const scrolled = Math.abs(row.scrollLeft);
+			row.toggleAttribute("data-overflowing", overflowing);
+			row.toggleAttribute("data-fade-start", overflowing && scrolled > 1);
+			row.toggleAttribute("data-fade-end", overflowing && scrolled + row.clientWidth < row.scrollWidth - 1);
+			if (!overflowing || revealed) return;
+			revealed = true;
+			const selected = row.querySelector("[data-selected]");
+			if (!selected) return;
+			const fade = FADE_PX;
+			const box = row.getBoundingClientRect();
+			const tab = selected.getBoundingClientRect();
+			if (tab.left < box.left + fade) row.scrollLeft -= box.left + fade - tab.left;
+			else if (tab.right > box.right - fade) row.scrollLeft += tab.right - (box.right - fade);
+			measure();
+		};
+		const resized = new ResizeObserver(measure);
+		const watch = () => {
+			resized.disconnect();
+			resized.observe(row);
+			for (const tab of Array.from(row.children)) resized.observe(tab);
+		};
+		const added = new MutationObserver(() => {
+			watch();
+			measure();
+		});
+		watch();
+		added.observe(row, { childList: true });
+		row.addEventListener("scroll", measure, { passive: true });
+		measure();
+		return () => {
+			resized.disconnect();
+			added.disconnect();
+			row.removeEventListener("scroll", measure);
+		};
+	}, [row]);
+	return setRow;
+}
+/**
+* Places the selection highlight (see tab-highlight in styles.css) on the selected
+* tab and keeps it there as tabs resize, and tells the tabs root which way the
+* selection moved (`--tab-dir`) so the next panel arrives from that side. All of it
+* is written straight onto the elements, so no render happens. The first placement
+* has no transition; `data-hl-ready` turns it on two frames later.
+*/
+function useTabHighlight() {
+	const [row, setRow] = useState(null);
+	useEffect(() => {
+		if (!row || typeof ResizeObserver === "undefined") return;
+		let previous = null;
+		let frames = [0, 0];
+		const place = () => {
+			const selected = row.querySelector("[role=\"tab\"][data-selected]");
+			if (!selected) {
+				row.removeAttribute("data-hl");
+				previous = null;
+				return;
+			}
+			row.style.setProperty("--hl-x", `${selected.offsetLeft}px`);
+			row.style.setProperty("--hl-y", `${selected.offsetTop}px`);
+			row.style.setProperty("--hl-w", `${selected.offsetWidth}px`);
+			row.style.setProperty("--hl-h", `${selected.offsetHeight}px`);
+			row.setAttribute("data-hl", "");
+			if (previous && previous !== selected && previous.isConnected) {
+				const all = Array.from(row.querySelectorAll("[role=\"tab\"]"));
+				const forward = all.indexOf(selected) > all.indexOf(previous);
+				const flip = getComputedStyle(row).direction === "rtl";
+				const root = row.closest("[data-slot=\"tabs\"]");
+				root?.style.setProperty("--tab-dir", String(forward !== flip ? 1 : -1));
+				root?.setAttribute("data-tab-changed", "");
+			}
+			previous = selected;
+		};
+		const resized = new ResizeObserver(place);
+		const watch = () => {
+			resized.disconnect();
+			resized.observe(row);
+			for (const tab of Array.from(row.children)) resized.observe(tab);
+		};
+		const changed = new MutationObserver((records) => {
+			if (records.some((record) => record.type === "childList")) watch();
+			place();
+		});
+		watch();
+		changed.observe(row, {
+			attributes: true,
+			attributeFilter: ["data-selected"],
+			childList: true,
+			subtree: true
+		});
+		place();
+		frames[0] = requestAnimationFrame(() => {
+			frames[1] = requestAnimationFrame(() => row.setAttribute("data-hl-ready", ""));
+		});
+		return () => {
+			resized.disconnect();
+			changed.disconnect();
+			frames.forEach(cancelAnimationFrame);
+			frames = [0, 0];
+		};
+	}, [row]);
+	return setRow;
+}
 const tabVariants = cva([
 	"inline-flex flex-1 items-center justify-center gap-1.5 whitespace-nowrap",
 	"rounded-md px-2 py-1",
@@ -51,8 +179,8 @@ const tabVariants = cva([
 	"cursor-pointer select-none box-border",
 	"border-(length:--border-width) border-transparent",
 	"motion-safe:transition-colors motion-safe:duration-(--duration-fast) motion-safe:ease-standard",
-	"data-[selected]:bg-background data-[selected]:border-border",
-	"data-[selected]:shadow-surface",
+	"not-in-data-[hl]:data-[selected]:bg-surface not-in-data-[hl]:data-[selected]:border-border",
+	"not-in-data-[hl]:data-[selected]:shadow-surface",
 	"outline-none",
 	"data-[focus-visible]:outline-solid",
 	"data-[focus-visible]:outline-(length:--focus-ring-width)",
@@ -64,6 +192,7 @@ const tabVariants = cva([
 ]);
 const tabPanelVariants = cva([
 	"flex-1 box-border font-sans text-foreground",
+	"tab-panel-motion",
 	"outline-none",
 	"data-[focus-visible]:outline-solid",
 	"data-[focus-visible]:outline-(length:--focus-ring-width)",
@@ -79,8 +208,15 @@ const Tabs$1 = forwardRef(function Tabs$2({ className, ...props }, ref) {
 	});
 });
 const TabList$1 = forwardRef(function TabList$2({ className, ...props }, ref) {
-	return /* @__PURE__ */ jsx(TabList, {
+	const watch = useScrollWhenTooWide();
+	const glide = useTabHighlight();
+	const merged = useMemo(() => mergeRefs(ref, watch, glide), [
 		ref,
+		watch,
+		glide
+	]);
+	return /* @__PURE__ */ jsx(TabList, {
+		ref: merged,
 		...props,
 		"data-slot": "tab-list",
 		className: cn(tabListVariants(), className)

package/dist/tabs/tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.js","names":["Tabs","AriaTabs","TabList","AriaTabList","Tab","AriaTab","TabPanel","AriaTabPanel"],"sources":["../../src/tabs/tabs.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva } from \"class-variance-authority\";\nimport { forwardRef } from \"react\";\nimport {\n  Tab as AriaTab,\n  TabList as AriaTabList,\n  TabPanel as AriaTabPanel,\n  Tabs as AriaTabs,\n  type TabListProps as AriaTabListProps,\n  type TabPanelProps as AriaTabPanelProps,\n  type TabProps as AriaTabProps,\n  type TabsProps as AriaTabsProps,\n} from \"react-aria-components\";\n\nimport { cn } from \"../lib/cn.js\";\n\n/**\n * Tabs, ported from the legacy shadcn/Radix component.\n *\n * The largest legacy surface in this migration: 18 files, `TabsTrigger`\n * 51, `TabsContent` 31, `Tabs` 17, `TabsList` 17. Props: `value` 88,\n * `className` 76, `defaultValue` 12, `onValueChange` 10, `disabled` 6.\n *\n * The rename is mechanical but it touches every one of those:\n * `value` -> `selectedKey`, `defaultValue` -> `defaultSelectedKey`,\n * `onValueChange` -> `onSelectionChange`, and the `value` on each trigger\n * and panel becomes `id`. React Aria pairs a Tab to its TabPanel by that\n * id, exactly as Radix paired them by value.\n *\n * THE SELECTED TAB GAINS A BORDER, and that is a contrast fix rather than\n * a decoration. The legacy marks the selected tab with `bg-background` on\n * a `bg-muted` list -- 1.13:1, which is not a boundary anybody can see --\n * and leans on `shadow-sm` to carry the rest. Under WCAG 1.4.11 the thing\n * telling you which tab is active has to clear 3:1. `border-border` on\n * `muted` is 4.65:1 and is already in the contrast contract.\n *\n * Two bracket values are gone because check:hardcoding rejects them:\n * `p-[3px]` on the list and `h-[calc(100%-1px)]` on the trigger. The list\n * is `p-1` and the trigger sizes to the list rather than to a value one\n * pixel short of it.\n *\n * ONE BEHAVIOUR DIFFERS AND IS WORTH KNOWING. Radix keeps every mounted\n * TabsContent in the DOM and hides the inactive ones; React Aria renders\n * ONLY the selected panel. A panel that holds uncommitted form state, a\n * running video or a scroll position will lose it on tab change. React\n * Aria's `shouldForceMount` on TabPanel restores the old behaviour where\n * a call site needs it.\n */\nexport const tabsVariants = cva([\"flex flex-col gap-2 box-border font-sans\"]);\n\nexport const tabListVariants = cva([\n  \"inline-flex w-fit items-center justify-center gap-1\",\n  // p-1, not the legacy p-[3px]: a bracket value check:hardcoding rejects.\n  \"rounded-lg p-1\",\n  \"bg-muted text-muted-foreground\",\n  \"box-border\",\n]);\n\nexport const tabVariants = cva([\n  \"inline-flex flex-1 items-center justify-center gap-1.5 whitespace-nowrap\",\n  \"rounded-md px-2 py-1\",\n  \"text-sm leading-(--leading-normal) font-medium text-foreground\",\n  \"cursor-pointer select-none box-border\",\n  // A transparent border at rest so selecting one does not move the text.\n  \"border-(length:--border-width) border-transparent\",\n  \"motion-safe:transition-colors motion-safe:duration-(--duration-fast) motion-safe:ease-standard\",\n\n  // The selected tab. bg-background on a muted list is 1.13:1 -- invisible\n  // as a boundary -- so the border is what satisfies WCAG 1.4.11 at\n  // 4.65:1. The fill and the shadow are the polish on top of it.\n  \"data-[selected]:bg-background data-[selected]:border-border\",\n  \"data-[selected]:shadow-surface\",\n\n  // outline-solid is load-bearing: outline-none sets --tw-outline-style to\n  // none and the width utility resolves its style from that same variable,\n  // so a focus rule can apply a width and a colour and paint nothing.\n  \"outline-none\",\n  \"data-[focus-visible]:outline-solid\",\n  \"data-[focus-visible]:outline-(length:--focus-ring-width)\",\n  \"data-[focus-visible]:outline-offset-(--focus-ring-offset)\",\n  \"data-[focus-visible]:outline-(--color-ring)\",\n\n  \"data-[disabled]:cursor-not-allowed data-[disabled]:opacity-(--opacity-disabled)\",\n  \"[&_svg]:pointer-events-none [&_svg]:shrink-0\",\n  \"[&_svg:not([class*='size-'])]:size-(--icon-sm)\",\n]);\n\nexport const tabPanelVariants = cva([\n  \"flex-1 box-border font-sans text-foreground\",\n  // React Aria gives the panel tabindex=0 when it holds no focusable\n  // child, so it can take a ring it does not want at rest.\n  \"outline-none\",\n  \"data-[focus-visible]:outline-solid\",\n  \"data-[focus-visible]:outline-(length:--focus-ring-width)\",\n  \"data-[focus-visible]:outline-offset-(--focus-ring-offset)\",\n  \"data-[focus-visible]:outline-(--color-ring)\",\n]);\n\n/**\n * A set of panels, one visible at a time.\n *\n * @example\n * <Tabs defaultSelectedKey=\"overview\">\n *   <TabList aria-label=\"Sections\">\n *     <Tab id=\"overview\">Overview</Tab>\n *     <Tab id=\"activity\">Activity</Tab>\n *   </TabList>\n *   <TabPanel id=\"overview\">...</TabPanel>\n *   <TabPanel id=\"activity\">...</TabPanel>\n * </Tabs>\n */\nexport interface TabsProps extends Omit<AriaTabsProps, \"className\" | \"style\"> {\n  /** Extra classes. Merged last, so they win conflicts with ours. */\n  className?: string;\n}\n\nexport const Tabs = forwardRef<HTMLDivElement, TabsProps>(function Tabs(\n  { className, ...props },\n  ref,\n) {\n  return (\n    <AriaTabs ref={ref} {...props} data-slot=\"tabs\" className={cn(tabsVariants(), className)} />\n  );\n});\n\n/**\n * The row of tabs.\n *\n * `aria-label` is worth passing: a tablist is a landmark-ish grouping and\n * a page with two of them is ambiguous without one.\n */\nexport interface TabListProps extends Omit<AriaTabListProps<object>, \"className\" | \"style\"> {\n  className?: string;\n}\n\nexport const TabList = forwardRef<HTMLDivElement, TabListProps>(function TabList(\n  { className, ...props },\n  ref,\n) {\n  return (\n    <AriaTabList\n      ref={ref}\n      {...props}\n      data-slot=\"tab-list\"\n      className={cn(tabListVariants(), className)}\n    />\n  );\n});\n\n/** One tab. Its `id` pairs it with the panel of the same `id`. */\nexport interface TabProps extends Omit<AriaTabProps, \"className\" | \"style\"> {\n  className?: string;\n}\n\nexport const Tab = forwardRef<HTMLDivElement, TabProps>(function Tab(\n  { className, ...props },\n  ref,\n) {\n  return (\n    <AriaTab ref={ref} {...props} data-slot=\"tab\" className={cn(tabVariants(), className)} />\n  );\n});\n\n/** One panel. Its `id` pairs it with the tab of the same `id`. */\nexport interface TabPanelProps extends Omit<AriaTabPanelProps, \"className\" | \"style\"> {\n  className?: string;\n}\n\nexport const TabPanel = forwardRef<HTMLDivElement, TabPanelProps>(function TabPanel(\n  { className, ...props },\n  ref,\n) {\n  return (\n    <AriaTabPanel\n      ref={ref}\n      {...props}\n      data-slot=\"tab-panel\"\n      className={cn(tabPanelVariants(), className)}\n    />\n  );\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiDA,MAAa,eAAe,IAAI,CAAC,0CAA0C,CAAC;AAE5E,MAAa,kBAAkB,IAAI;CACjC;CAEA;CACA;CACA;AACF,CAAC;AAED,MAAa,cAAc,IAAI;CAC7B;CACA;CACA;CACA;CAEA;CACA;CAKA;CACA;CAKA;CACA;CACA;CACA;CACA;CAEA;CACA;CACA;AACF,CAAC;AAED,MAAa,mBAAmB,IAAI;CAClC;CAGA;CACA;CACA;CACA;CACA;AACF,CAAC;AAoBD,MAAaA,SAAO,WAAsC,SAASA,OACjE,EAAE,WAAW,GAAG,SAChB,KACA;CACA,OACE,oBAACC,MAAD;EAAe;EAAK,GAAI;EAAO,aAAU;EAAO,WAAW,GAAG,aAAa,GAAG,SAAS;CAAI,CAAA;AAE/F,CAAC;AAYD,MAAaC,YAAU,WAAyC,SAASA,UACvE,EAAE,WAAW,GAAG,SAChB,KACA;CACA,OACE,oBAACC,SAAD;EACO;EACL,GAAI;EACJ,aAAU;EACV,WAAW,GAAG,gBAAgB,GAAG,SAAS;CAC3C,CAAA;AAEL,CAAC;AAOD,MAAaC,QAAM,WAAqC,SAASA,MAC/D,EAAE,WAAW,GAAG,SAChB,KACA;CACA,OACE,oBAACC,KAAD;EAAc;EAAK,GAAI;EAAO,aAAU;EAAM,WAAW,GAAG,YAAY,GAAG,SAAS;CAAI,CAAA;AAE5F,CAAC;AAOD,MAAaC,aAAW,WAA0C,SAASA,WACzE,EAAE,WAAW,GAAG,SAChB,KACA;CACA,OACE,oBAACC,UAAD;EACO;EACL,GAAI;EACJ,aAAU;EACV,WAAW,GAAG,iBAAiB,GAAG,SAAS;CAC5C,CAAA;AAEL,CAAC"}
+{"version":3,"file":"tabs.js","names":["Tabs","AriaTabs","TabList","AriaTabList","Tab","AriaTab","TabPanel","AriaTabPanel"],"sources":["../../src/tabs/tabs.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva } from \"class-variance-authority\";\nimport { forwardRef, useEffect, useMemo, useState } from \"react\";\nimport {\n  Tab as AriaTab,\n  TabList as AriaTabList,\n  TabPanel as AriaTabPanel,\n  Tabs as AriaTabs,\n  type TabListProps as AriaTabListProps,\n  type TabPanelProps as AriaTabPanelProps,\n  type TabProps as AriaTabProps,\n  type TabsProps as AriaTabsProps,\n} from \"react-aria-components\";\n\nimport { cn } from \"../lib/cn.js\";\nimport { mergeRefs } from \"../lib/merge-refs.js\";\n\n/**\n * Tabs, ported from the legacy shadcn/Radix component.\n *\n * The largest legacy surface in this migration: 18 files, `TabsTrigger`\n * 51, `TabsContent` 31, `Tabs` 17, `TabsList` 17. Props: `value` 88,\n * `className` 76, `defaultValue` 12, `onValueChange` 10, `disabled` 6.\n *\n * The rename is mechanical but it touches every one of those:\n * `value` -> `selectedKey`, `defaultValue` -> `defaultSelectedKey`,\n * `onValueChange` -> `onSelectionChange`, and the `value` on each trigger\n * and panel becomes `id`. React Aria pairs a Tab to its TabPanel by that\n * id, exactly as Radix paired them by value.\n *\n * THE SELECTED TAB GAINS A BORDER, and that is a contrast fix rather than\n * a decoration. The legacy marks the selected tab with `bg-background` on\n * a `bg-muted` list -- 1.13:1, which is not a boundary anybody can see --\n * and leans on `shadow-sm` to carry the rest. Under WCAG 1.4.11 the thing\n * telling you which tab is active has to clear 3:1. `border-border` on\n * `muted` is 4.65:1 and is already in the contrast contract.\n *\n * Two bracket values are gone because check:hardcoding rejects them:\n * `p-[3px]` on the list and `h-[calc(100%-1px)]` on the trigger. The list\n * is `p-1` and the trigger sizes to the list rather than to a value one\n * pixel short of it.\n *\n * ONE BEHAVIOUR DIFFERS AND IS WORTH KNOWING. Radix keeps every mounted\n * TabsContent in the DOM and hides the inactive ones; React Aria renders\n * ONLY the selected panel. A panel that holds uncommitted form state, a\n * running video or a scroll position will lose it on tab change. React\n * Aria's `shouldForceMount` on TabPanel restores the old behaviour where\n * a call site needs it.\n */\nexport const tabsVariants = cva([\n  \"flex flex-col gap-2 box-border font-sans\",\n  // May be narrower than its tabs: in a flex row (a toolbar beside a search\n  // field) it shrinks to the space it has instead of pushing the page wider.\n  \"min-w-0 max-w-full\",\n]);\n\nexport const tabListVariants = cva([\n  \"inline-flex w-fit items-center justify-center gap-1\",\n  // p-1, not the legacy p-[3px]: a bracket value check:hardcoding rejects.\n  \"rounded-control p-1\",\n  \"bg-muted text-muted-foreground\",\n  // The selection highlight that glides between tabs (styles.css).\n  \"tab-highlight\",\n  \"box-border\",\n\n  // A ROW WIDER THAN ITS BOX SCROLLS INSIDE IT. Capped at the parent's\n  // width; while its tabs are wider than that, TabList sets\n  // data-overflowing and the row scrolls sideways on its own. A row that\n  // fits never carries the attribute, so nothing about it changes.\n  \"max-w-full\",\n  // How wide the fade is, and where it starts measured from the far edge.\n  \"[--fade-tabs:--spacing(6)] [--fade-tabs-from:calc(100%-var(--fade-tabs))]\",\n  \"data-[overflowing]:overflow-x-auto data-[overflowing]:overscroll-x-contain\",\n  // justify-center spills centred overflow out of BOTH sides, and a scroll\n  // box cannot reach the spill on its start side: the first tab would be\n  // cut off for good. Scrolling rows start at the start edge.\n  \"data-[overflowing]:justify-start\",\n  // The cue that there is more: the side with tabs out of view fades out.\n  // Masks are physical, so the start and end swap sides in RTL.\n  \"ltr:data-[fade-start]:mask-l-from-(--fade-tabs-from) rtl:data-[fade-start]:mask-r-from-(--fade-tabs-from)\",\n  \"ltr:data-[fade-end]:mask-r-from-(--fade-tabs-from) rtl:data-[fade-end]:mask-l-from-(--fade-tabs-from)\",\n]);\n\n/**\n * Sets data-overflowing, data-fade-start and data-fade-end on a tab row\n * while its tabs are wider than its box, and on the first measurement that\n * finds it too wide, scrolls the selected tab into view INSIDE the row\n * (never the page, so a row below the fold does not drag the page to it).\n *\n * The attributes are written straight onto the element, so a scroll or a\n * resize re-renders nothing. Arrow keys need no help: React Aria keeps the\n * focused tab in view in the row that scrolls.\n */\nconst FADE_PX = 24;\n\nfunction useScrollWhenTooWide() {\n  const [row, setRow] = useState<HTMLDivElement | null>(null);\n  useEffect(() => {\n    if (!row || typeof ResizeObserver === \"undefined\") return;\n    let revealed = false;\n    const measure = () => {\n      const overflowing = row.scrollWidth > row.clientWidth + 1;\n      // Distance from the start edge; scrollLeft runs negative in RTL.\n      const scrolled = Math.abs(row.scrollLeft);\n      row.toggleAttribute(\"data-overflowing\", overflowing);\n      row.toggleAttribute(\"data-fade-start\", overflowing && scrolled > 1);\n      row.toggleAttribute(\n        \"data-fade-end\",\n        overflowing && scrolled + row.clientWidth < row.scrollWidth - 1,\n      );\n      if (!overflowing || revealed) return;\n      revealed = true;\n      const selected = row.querySelector<HTMLElement>(\"[data-selected]\");\n      if (!selected) return;\n      // Clear of the fade: --spacing(6), the width the mask draws.\n      const fade = FADE_PX;\n      const box = row.getBoundingClientRect();\n      const tab = selected.getBoundingClientRect();\n      if (tab.left < box.left + fade) row.scrollLeft -= box.left + fade - tab.left;\n      else if (tab.right > box.right - fade) row.scrollLeft += tab.right - (box.right - fade);\n      // The scroll event lands a frame later; the fades are right on first paint.\n      measure();\n    };\n    // The row's box changes with its parent; a tab's width changes when its\n    // label does (a count that loads).\n    const resized = new ResizeObserver(measure);\n    const watch = () => {\n      resized.disconnect();\n      resized.observe(row);\n      for (const tab of Array.from(row.children)) resized.observe(tab);\n    };\n    const added = new MutationObserver(() => {\n      watch();\n      measure();\n    });\n    watch();\n    added.observe(row, { childList: true });\n    row.addEventListener(\"scroll\", measure, { passive: true });\n    measure();\n    return () => {\n      resized.disconnect();\n      added.disconnect();\n      row.removeEventListener(\"scroll\", measure);\n    };\n  }, [row]);\n  return setRow;\n}\n\n/**\n * Places the selection highlight (see tab-highlight in styles.css) on the selected\n * tab and keeps it there as tabs resize, and tells the tabs root which way the\n * selection moved (`--tab-dir`) so the next panel arrives from that side. All of it\n * is written straight onto the elements, so no render happens. The first placement\n * has no transition; `data-hl-ready` turns it on two frames later.\n */\nfunction useTabHighlight() {\n  const [row, setRow] = useState<HTMLDivElement | null>(null);\n  useEffect(() => {\n    if (!row || typeof ResizeObserver === \"undefined\") return;\n    let previous: HTMLElement | null = null;\n    let frames = [0, 0];\n    const place = () => {\n      const selected = row.querySelector<HTMLElement>('[role=\"tab\"][data-selected]');\n      if (!selected) {\n        row.removeAttribute(\"data-hl\");\n        previous = null;\n        return;\n      }\n      row.style.setProperty(\"--hl-x\", `${selected.offsetLeft}px`);\n      row.style.setProperty(\"--hl-y\", `${selected.offsetTop}px`);\n      row.style.setProperty(\"--hl-w\", `${selected.offsetWidth}px`);\n      row.style.setProperty(\"--hl-h\", `${selected.offsetHeight}px`);\n      row.setAttribute(\"data-hl\", \"\");\n      if (previous && previous !== selected && previous.isConnected) {\n        const all = Array.from(row.querySelectorAll('[role=\"tab\"]'));\n        const forward = all.indexOf(selected) > all.indexOf(previous);\n        // The row reads right to left in RTL, so the same order change is the other way.\n        const flip = getComputedStyle(row).direction === \"rtl\";\n        const root = row.closest<HTMLElement>('[data-slot=\"tabs\"]');\n        root?.style.setProperty(\"--tab-dir\", String(forward !== flip ? 1 : -1));\n        root?.setAttribute(\"data-tab-changed\", \"\");\n      }\n      previous = selected;\n    };\n    const resized = new ResizeObserver(place);\n    const watch = () => {\n      resized.disconnect();\n      resized.observe(row);\n      for (const tab of Array.from(row.children)) resized.observe(tab);\n    };\n    const changed = new MutationObserver((records) => {\n      if (records.some((record) => record.type === \"childList\")) watch();\n      place();\n    });\n    watch();\n    changed.observe(row, { attributes: true, attributeFilter: [\"data-selected\"], childList: true, subtree: true });\n    place();\n    frames[0] = requestAnimationFrame(() => {\n      frames[1] = requestAnimationFrame(() => row.setAttribute(\"data-hl-ready\", \"\"));\n    });\n    return () => {\n      resized.disconnect();\n      changed.disconnect();\n      frames.forEach(cancelAnimationFrame);\n      frames = [0, 0];\n    };\n  }, [row]);\n  return setRow;\n}\n\nexport const tabVariants = cva([\n  \"inline-flex flex-1 items-center justify-center gap-1.5 whitespace-nowrap\",\n  \"rounded-md px-2 py-1\",\n  \"text-sm leading-(--leading-normal) font-medium text-foreground\",\n  \"cursor-pointer select-none box-border\",\n  // A transparent border at rest so selecting one does not move the text.\n  \"border-(length:--border-width) border-transparent\",\n  \"motion-safe:transition-colors motion-safe:duration-(--duration-fast) motion-safe:ease-standard\",\n\n  // The selected tab. bg-background on a muted list is 1.13:1 -- invisible\n  // as a boundary -- so the border is what satisfies WCAG 1.4.11 at\n  // 4.65:1. The fill and the shadow are the polish on top of it.\n  // Until the row has placed its gliding highlight (data-hl), the tab paints\n  // its own fill so there is never a frame without a boundary.\n  \"not-in-data-[hl]:data-[selected]:bg-surface not-in-data-[hl]:data-[selected]:border-border\",\n  \"not-in-data-[hl]:data-[selected]:shadow-surface\",\n\n  // outline-solid is load-bearing: outline-none sets --tw-outline-style to\n  // none and the width utility resolves its style from that same variable,\n  // so a focus rule can apply a width and a colour and paint nothing.\n  \"outline-none\",\n  \"data-[focus-visible]:outline-solid\",\n  \"data-[focus-visible]:outline-(length:--focus-ring-width)\",\n  \"data-[focus-visible]:outline-offset-(--focus-ring-offset)\",\n  \"data-[focus-visible]:outline-(--color-ring)\",\n\n  \"data-[disabled]:cursor-not-allowed data-[disabled]:opacity-(--opacity-disabled)\",\n  \"[&_svg]:pointer-events-none [&_svg]:shrink-0\",\n  \"[&_svg:not([class*='size-'])]:size-(--icon-sm)\",\n]);\n\nexport const tabPanelVariants = cva([\n  \"flex-1 box-border font-sans text-foreground\",\n  // Arrives from the side the new tab sits on, once the selection has changed.\n  \"tab-panel-motion\",\n  // React Aria gives the panel tabindex=0 when it holds no focusable\n  // child, so it can take a ring it does not want at rest.\n  \"outline-none\",\n  \"data-[focus-visible]:outline-solid\",\n  \"data-[focus-visible]:outline-(length:--focus-ring-width)\",\n  \"data-[focus-visible]:outline-offset-(--focus-ring-offset)\",\n  \"data-[focus-visible]:outline-(--color-ring)\",\n]);\n\n/**\n * A set of panels, one visible at a time.\n *\n * @example\n * <Tabs defaultSelectedKey=\"overview\">\n *   <TabList aria-label=\"Sections\">\n *     <Tab id=\"overview\">Overview</Tab>\n *     <Tab id=\"activity\">Activity</Tab>\n *   </TabList>\n *   <TabPanel id=\"overview\">...</TabPanel>\n *   <TabPanel id=\"activity\">...</TabPanel>\n * </Tabs>\n */\nexport interface TabsProps extends Omit<AriaTabsProps, \"className\" | \"style\"> {\n  /** Extra classes. Merged last, so they win conflicts with ours. */\n  className?: string;\n}\n\nexport const Tabs = forwardRef<HTMLDivElement, TabsProps>(function Tabs(\n  { className, ...props },\n  ref,\n) {\n  return (\n    <AriaTabs ref={ref} {...props} data-slot=\"tabs\" className={cn(tabsVariants(), className)} />\n  );\n});\n\n/**\n * The row of tabs.\n *\n * `aria-label` is worth passing: a tablist is a landmark-ish grouping and\n * a page with two of them is ambiguous without one.\n */\nexport interface TabListProps extends Omit<AriaTabListProps<object>, \"className\" | \"style\"> {\n  className?: string;\n}\n\nexport const TabList = forwardRef<HTMLDivElement, TabListProps>(function TabList(\n  { className, ...props },\n  ref,\n) {\n  const watch = useScrollWhenTooWide();\n  const glide = useTabHighlight();\n  // Memoised: a new callback every render would detach and reattach the row.\n  const merged = useMemo(() => mergeRefs(ref, watch, glide), [ref, watch, glide]);\n  return (\n    <AriaTabList\n      ref={merged}\n      {...props}\n      data-slot=\"tab-list\"\n      className={cn(tabListVariants(), className)}\n    />\n  );\n});\n\n/** One tab. Its `id` pairs it with the panel of the same `id`. */\nexport interface TabProps extends Omit<AriaTabProps, \"className\" | \"style\"> {\n  className?: string;\n}\n\nexport const Tab = forwardRef<HTMLDivElement, TabProps>(function Tab({ className, ...props }, ref) {\n  return <AriaTab ref={ref} {...props} data-slot=\"tab\" className={cn(tabVariants(), className)} />;\n});\n\n/** One panel. Its `id` pairs it with the tab of the same `id`. */\nexport interface TabPanelProps extends Omit<AriaTabPanelProps, \"className\" | \"style\"> {\n  className?: string;\n}\n\nexport const TabPanel = forwardRef<HTMLDivElement, TabPanelProps>(function TabPanel(\n  { className, ...props },\n  ref,\n) {\n  return (\n    <AriaTabPanel\n      ref={ref}\n      {...props}\n      data-slot=\"tab-panel\"\n      className={cn(tabPanelVariants(), className)}\n    />\n  );\n});\n"],"mappings":"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"}

package/dist/tag-input/index.d.ts

@@ -0,0 +1,2 @@
+import { TagInput, TagInputProps } from "./tag-input.js";
+export { TagInput, type TagInputProps };

package/dist/tag-input/index.js

@@ -0,0 +1,2 @@
+import { TagInput } from "./tag-input.js";
+export { TagInput };

package/dist/tag-input/tag-input.d.ts

@@ -0,0 +1,40 @@
+//#region src/tag-input/tag-input.d.ts
+/**
+ * TagInput: type a word and press Enter or comma to turn it into a tag. A free-text
+ * field on React Aria's `TagGroup`, so the tags are a grid: the arrow keys move
+ * between them, Backspace or Delete removes the focused one, and each has its own
+ * remove button.
+ *
+ * Tags keep the field still: a new tag grows in where its text was typed (it fades
+ * up from a blur and scales in while its slot opens, so the caret glides aside),
+ * a removed tag shrinks away and the rest glide over, and the field follows its
+ * wrapped rows on a spring. Backspace at the start of an empty field moves to the
+ * last tag, and the next Backspace removes it. Adding a tag that is already there
+ * swells the existing one. Nothing animates on first render.
+ *
+ * Pasting "a, b, c" adds three tags. A tag you are typing is added when the field
+ * loses focus.
+ */
+export interface TagInputProps {
+  /** What the tags are, and the field's accessible name. */
+  label: string;
+  /** The tags. Controlled when given. */
+  value?: string[];
+  defaultValue?: string[];
+  onValueChange?: (value: string[]) => void;
+  /** Shown while there are no tags and nothing is typed. @default "Add a tag" */
+  placeholder?: string;
+  /** Helper text under the field. A string, because the copy is animated word by word. */
+  description?: string;
+  /** Error text under the field. Sets `aria-invalid` and is announced as an alert. */
+  error?: string;
+  disabled?: boolean;
+  /** Adds one hidden input per tag, so a native form submits them all under this name. */
+  name?: string;
+  id?: string;
+  /** Extra classes for the wrapper. Merged last. */
+  className?: string;
+}
+export declare const TagInput: import("react").ForwardRefExoticComponent<TagInputProps & import("react").RefAttributes<HTMLInputElement>>;
+//#endregion
+//# sourceMappingURL=tag-input.d.ts.map