@misoto22/design 0.7.0 → 0.8.0

package/dist/components/Table/Table.d.ts

@@ -45,6 +45,12 @@ interface TableProps extends TableHTMLAttributes<HTMLTableElement> {
  * element to Tab to and therefore no way to press an arrow key at it, so the
  * columns past the fold simply do not exist for anyone not using a mouse.
  *
+ * It is also POSITIONED, which is not decoration. `sr-only` is
+ * `position: absolute`, so a visually-hidden label in a cell resolves against
+ * the nearest positioned ancestor — and with none between it and the document,
+ * it escapes the scroll container and every `overflow-hidden` around it, and
+ * widens the page by however far the table happens to be scrolled.
+ *
  * No zebra striping at any border setting. In a monochrome system a striped row
  * is a second surface competing with the page ground, and the hairline between
  * rows is already enough to track a line across.

package/dist/components/Table/Table.js

@@ -1,6 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { ArrowDown, ArrowUp, ChevronsUpDown } from "lucide-react";
 import { cn } from "../../lib/cn.js";
+import { warnBlankName } from "../../lib/warn.js";
 const ALIGN = {
   start: "text-start",
   center: "text-center",
@@ -27,6 +28,7 @@ function Table({
   children,
   ...rest
 }) {
+  warnBlankName("Table", "caption", caption, "the table is announced with no name and a reader arrives in it with no idea what it lists");
   return /* @__PURE__ */ jsx(
     "div",
     {
@@ -34,7 +36,7 @@ function Table({
       role: "region",
       "aria-label": caption,
       "data-table-density": density,
-      className: cn("w-full overflow-x-auto scroll-slim", BORDERS[borders]),
+      className: cn("relative w-full overflow-x-auto scroll-slim", BORDERS[borders]),
       children: /* @__PURE__ */ jsxs(
         "table",
         {

package/dist/components/Table/Table.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Table/Table.tsx"],"sourcesContent":["import { ArrowDown, ArrowUp, ChevronsUpDown } from 'lucide-react'\nimport type { HTMLAttributes, TableHTMLAttributes, TdHTMLAttributes, ThHTMLAttributes } from 'react'\nimport { cn } from '../../lib/cn'\n\nexport type TableAlign = 'start' | 'center' | 'end'\n\n/**\n * Which rules the table draws.\n *\n * `rows` is the default and the right answer for reading down a column: one\n * hairline between records and nothing else, so the eye tracks a line across\n * without a grid competing for it. `grid` adds the vertical rules a dense\n * numeric table needs to keep columns apart. `bordered` puts an edge around the\n * whole thing, for a table that sits loose on a page rather than inside a card\n * that already has one. `none` is for a table inside something that draws its\n * own structure.\n */\nexport type TableBorders = 'rows' | 'grid' | 'bordered' | 'bordered-grid' | 'none'\n\nconst ALIGN: Record<TableAlign, string> = {\n  start: 'text-start',\n  center: 'text-center',\n  end: 'text-end',\n}\n\n/**\n * Every rule the table draws, expressed from ONE element.\n *\n * Not React context, which was the first attempt: `createContext` makes the\n * module client-only, which turned every table on every page into a hydration\n * boundary and took the static build down with it. Descendant selectors from\n * the wrapper reach the same cells, cost nothing at runtime, and keep the whole\n * component server-renderable.\n *\n * `--table-pad-x` rather than a padding class per mode, because the ruled\n * variants need symmetric padding inside their boxes while the plain one wants\n * a trailing gap and no leading one.\n */\nconst ROWS =\n  '[&_thead]:border-b [&_thead]:border-(--rule-hard) [&_tbody_tr]:border-b [&_tbody_tr]:border-(--rule) [&_tbody_tr:last-child]:border-b-0'\nconst SOFT_HEAD = '[&_thead]:border-(--rule-2)'\nconst COLUMNS =\n  '[&_th]:border-e [&_td]:border-e [&_th]:border-(--rule) [&_td]:border-(--rule) [&_th:last-child]:border-e-0 [&_td:last-child]:border-e-0'\nconst BOXED = 'rounded-(--radius) border border-(--rule-2) [--table-pad-x:0.75rem]'\n\nconst BORDERS: Record<TableBorders, string> = {\n  rows: ROWS,\n  grid: cn(ROWS, COLUMNS, '[--table-pad-x:0.75rem]'),\n  bordered: cn(ROWS, SOFT_HEAD, BOXED),\n  'bordered-grid': cn(ROWS, SOFT_HEAD, COLUMNS, BOXED),\n  none: '',\n}\n\nexport interface TableProps extends TableHTMLAttributes<HTMLTableElement> {\n  /**\n   * Describes the table for a screen reader, which cannot see the heading above\n   * it. Rendered as a visually-hidden `<caption>` — required, because an\n   * unnamed table in a page with three tables is unnavigable.\n   */\n  caption: string\n  /** Prints the caption instead of hiding it. */\n  showCaption?: boolean\n  /**\n   * Pins the header row while the body scrolls. Needs a bounded height on the\n   * container — otherwise the page scrolls, not the table, and nothing sticks.\n   */\n  stickyHeader?: boolean\n  /** Which rules to draw. See {@link TableBorders}. */\n  borders?: TableBorders\n  /** Tightens the row padding, for a table that is mostly numbers. */\n  density?: 'comfortable' | 'compact'\n}\n\n/**\n * A ruled data table.\n *\n * Wrapped in its own horizontally scrolling container, because a table is the\n * one block that legitimately exceeds the measure — and a page that scrolls\n * sideways as a whole is a layout bug, while a table that does is a table.\n *\n * That container is focusable, and it has to be. A scrollable region whose\n * contents are not themselves focusable is unreachable by keyboard: there is no\n * element to Tab to and therefore no way to press an arrow key at it, so the\n * columns past the fold simply do not exist for anyone not using a mouse.\n *\n * No zebra striping at any border setting. In a monochrome system a striped row\n * is a second surface competing with the page ground, and the hairline between\n * rows is already enough to track a line across.\n *\n * @example\n * <Table caption=\"Deploy history\">\n *   <THead><TR><TH>Commit</TH><TH align=\"end\" sortable sortDirection={dir} onSort={sort}>Duration</TH></TR></THead>\n *   <TBody><TR><TD>a1b2c3d</TD><TD align=\"end\">2m 14s</TD></TR></TBody>\n * </Table>\n * @example\n * <Table caption=\"Inventory\" borders=\"bordered-grid\" density=\"compact\">…</Table>\n */\nexport function Table({\n  caption,\n  showCaption = false,\n  stickyHeader = false,\n  borders = 'rows',\n  density = 'comfortable',\n  className,\n  children,\n  ...rest\n}: TableProps) {\n  return (\n    <div\n      tabIndex={0}\n      role=\"region\"\n      aria-label={caption}\n      data-table-density={density}\n      className={cn('w-full overflow-x-auto scroll-slim', BORDERS[borders])}\n    >\n      <table\n        className={cn(\n          'w-full border-collapse text-start text-sm',\n          stickyHeader &&\n            '[&_thead]:sticky [&_thead]:top-0 [&_thead]:z-(--z-rule) [&_thead]:bg-(--paper)',\n          className,\n        )}\n        {...rest}\n      >\n        <caption className={cn(showCaption ? 'pb-3 text-start eyebrow text-(--ink-3-aa)' : 'sr-only')}>\n          {caption}\n        </caption>\n        {children}\n      </table>\n    </div>\n  )\n}\n\n/** Header group. The rule under it is drawn by the table's border setting. */\nexport function THead({ className, ...rest }: HTMLAttributes<HTMLTableSectionElement>) {\n  return <thead className={className} {...rest} />\n}\n\nexport function TBody({ className, ...rest }: HTMLAttributes<HTMLTableSectionElement>) {\n  return <tbody className={className} {...rest} />\n}\n\nexport function TR({ className, ...rest }: HTMLAttributes<HTMLTableRowElement>) {\n  return <tr className={className} {...rest} />\n}\n\nexport type SortDirection = 'ascending' | 'descending' | 'none'\n\nexport interface THProps extends Omit<ThHTMLAttributes<HTMLTableCellElement>, 'align'> {\n  /** Which edge the column's contents sit against. Numbers belong at `end`. */\n  align?: TableAlign\n  /** Makes the label a button and shows the sort marker. */\n  sortable?: boolean\n  /**\n   * Which way this column is sorted. Also set as `aria-sort`, which is the\n   * only way a screen reader learns a table is ordered at all — a caret drawn\n   * in the header tells it nothing.\n   */\n  sortDirection?: SortDirection\n  onSort?: () => void\n}\n\n/**\n * Cell padding, in one string both cells share.\n *\n * `--table-pad-x` is 0 by default and set by the ruled variants, so the plain\n * table keeps its trailing gap and no leading one while a boxed table gets\n * symmetric padding inside its border.\n */\nconst CELL =\n  'px-[var(--table-pad-x,0)] [&:not(:last-child)]:pe-[calc(var(--table-pad-x,0px)+1.5rem)]'\n\nconst SORT_ICON = {\n  ascending: ArrowUp,\n  descending: ArrowDown,\n  none: ChevronsUpDown,\n} as const\n\n/**\n * A column label. Mono and uppercase, so it never reads as data.\n *\n * When sortable, the label becomes a `<button>` INSIDE the `<th>` rather than\n * the `<th>` becoming clickable: a cell with a click handler is not focusable\n * and not announced as a control, so the sort exists only for a mouse.\n *\n * Sorting is per column and opt-in. A table where every header is a button\n * invites the reader to try sorting a column the data cannot be ordered by.\n */\nexport function TH({\n  align = 'start',\n  sortable = false,\n  sortDirection = 'none',\n  onSort,\n  className,\n  children,\n  ...rest\n}: THProps) {\n  const Icon = SORT_ICON[sortDirection]\n\n  return (\n    <th\n      scope=\"col\"\n      aria-sort={sortable ? sortDirection : undefined}\n      className={cn(CELL, 'py-3 align-bottom eyebrow text-(--ink-3-aa)', ALIGN[align], className)}\n      {...rest}\n    >\n      {sortable ? (\n        <button\n          type=\"button\"\n          onClick={onSort}\n          className={cn(\n            'group inline-flex items-center gap-1.5 eyebrow transition-colors duration-(--duration-fast) hover:text-(--ink)',\n            sortDirection === 'none' ? 'text-(--ink-3-aa)' : 'text-(--ink)',\n          )}\n        >\n          {children}\n          <Icon\n            size={12}\n            strokeWidth={2}\n            aria-hidden\n            className={cn(\n              'shrink-0 transition-opacity',\n              sortDirection === 'none' && 'opacity-40 group-hover:opacity-100',\n            )}\n          />\n        </button>\n      ) : (\n        children\n      )}\n    </th>\n  )\n}\n\nexport interface TDProps extends Omit<TdHTMLAttributes<HTMLTableCellElement>, 'align'> {\n  /** Which edge the cell's contents sit against. Match the column's header. */\n  align?: TableAlign\n}\n\nexport function TD({ align = 'start', className, ...rest }: TDProps) {\n  return (\n    <td\n      className={cn(CELL, 'py-[var(--table-pad-y)] align-top text-(--ink-2)', ALIGN[align], className)}\n      {...rest}\n    />\n  )\n}\n\nexport default Table\n"],"mappings":"AAmHM,SASE,KATF;AAnHN,SAAS,WAAW,SAAS,sBAAsB;AAEnD,SAAS,UAAU;AAiBnB,MAAM,QAAoC;AAAA,EACxC,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,KAAK;AACP;AAeA,MAAM,OACJ;AACF,MAAM,YAAY;AAClB,MAAM,UACJ;AACF,MAAM,QAAQ;AAEd,MAAM,UAAwC;AAAA,EAC5C,MAAM;AAAA,EACN,MAAM,GAAG,MAAM,SAAS,yBAAyB;AAAA,EACjD,UAAU,GAAG,MAAM,WAAW,KAAK;AAAA,EACnC,iBAAiB,GAAG,MAAM,WAAW,SAAS,KAAK;AAAA,EACnD,MAAM;AACR;AA8CO,SAAS,MAAM;AAAA,EACpB;AAAA,EACA,cAAc;AAAA,EACd,eAAe;AAAA,EACf,UAAU;AAAA,EACV,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAe;AACb,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAU;AAAA,MACV,MAAK;AAAA,MACL,cAAY;AAAA,MACZ,sBAAoB;AAAA,MACpB,WAAW,GAAG,sCAAsC,QAAQ,OAAO,CAAC;AAAA,MAEpE;AAAA,QAAC;AAAA;AAAA,UACC,WAAW;AAAA,YACT;AAAA,YACA,gBACE;AAAA,YACF;AAAA,UACF;AAAA,UACC,GAAG;AAAA,UAEJ;AAAA,gCAAC,aAAQ,WAAW,GAAG,cAAc,8CAA8C,SAAS,GACzF,mBACH;AAAA,YACC;AAAA;AAAA;AAAA,MACH;AAAA;AAAA,EACF;AAEJ;AAGO,SAAS,MAAM,EAAE,WAAW,GAAG,KAAK,GAA4C;AACrF,SAAO,oBAAC,WAAM,WAAuB,GAAG,MAAM;AAChD;AAEO,SAAS,MAAM,EAAE,WAAW,GAAG,KAAK,GAA4C;AACrF,SAAO,oBAAC,WAAM,WAAuB,GAAG,MAAM;AAChD;AAEO,SAAS,GAAG,EAAE,WAAW,GAAG,KAAK,GAAwC;AAC9E,SAAO,oBAAC,QAAG,WAAuB,GAAG,MAAM;AAC7C;AAyBA,MAAM,OACJ;AAEF,MAAM,YAAY;AAAA,EAChB,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,MAAM;AACR;AAYO,SAAS,GAAG;AAAA,EACjB,QAAQ;AAAA,EACR,WAAW;AAAA,EACX,gBAAgB;AAAA,EAChB;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAY;AACV,QAAM,OAAO,UAAU,aAAa;AAEpC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAM;AAAA,MACN,aAAW,WAAW,gBAAgB;AAAA,MACtC,WAAW,GAAG,MAAM,+CAA+C,MAAM,KAAK,GAAG,SAAS;AAAA,MACzF,GAAG;AAAA,MAEH,qBACC;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,SAAS;AAAA,UACT,WAAW;AAAA,YACT;AAAA,YACA,kBAAkB,SAAS,sBAAsB;AAAA,UACnD;AAAA,UAEC;AAAA;AAAA,YACD;AAAA,cAAC;AAAA;AAAA,gBACC,MAAM;AAAA,gBACN,aAAa;AAAA,gBACb,eAAW;AAAA,gBACX,WAAW;AAAA,kBACT;AAAA,kBACA,kBAAkB,UAAU;AAAA,gBAC9B;AAAA;AAAA,YACF;AAAA;AAAA;AAAA,MACF,IAEA;AAAA;AAAA,EAEJ;AAEJ;AAOO,SAAS,GAAG,EAAE,QAAQ,SAAS,WAAW,GAAG,KAAK,GAAY;AACnE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,GAAG,MAAM,oDAAoD,MAAM,KAAK,GAAG,SAAS;AAAA,MAC9F,GAAG;AAAA;AAAA,EACN;AAEJ;AAEA,IAAO,gBAAQ;","names":[]}
+{"version":3,"sources":["../../../src/components/Table/Table.tsx"],"sourcesContent":["import { ArrowDown, ArrowUp, ChevronsUpDown } from 'lucide-react'\nimport type { HTMLAttributes, TableHTMLAttributes, TdHTMLAttributes, ThHTMLAttributes } from 'react'\nimport { cn } from '../../lib/cn'\nimport { warnBlankName } from '../../lib/warn'\n\nexport type TableAlign = 'start' | 'center' | 'end'\n\n/**\n * Which rules the table draws.\n *\n * `rows` is the default and the right answer for reading down a column: one\n * hairline between records and nothing else, so the eye tracks a line across\n * without a grid competing for it. `grid` adds the vertical rules a dense\n * numeric table needs to keep columns apart. `bordered` puts an edge around the\n * whole thing, for a table that sits loose on a page rather than inside a card\n * that already has one. `none` is for a table inside something that draws its\n * own structure.\n */\nexport type TableBorders = 'rows' | 'grid' | 'bordered' | 'bordered-grid' | 'none'\n\nconst ALIGN: Record<TableAlign, string> = {\n  start: 'text-start',\n  center: 'text-center',\n  end: 'text-end',\n}\n\n/**\n * Every rule the table draws, expressed from ONE element.\n *\n * Not React context, which was the first attempt: `createContext` makes the\n * module client-only, which turned every table on every page into a hydration\n * boundary and took the static build down with it. Descendant selectors from\n * the wrapper reach the same cells, cost nothing at runtime, and keep the whole\n * component server-renderable.\n *\n * `--table-pad-x` rather than a padding class per mode, because the ruled\n * variants need symmetric padding inside their boxes while the plain one wants\n * a trailing gap and no leading one.\n */\nconst ROWS =\n  '[&_thead]:border-b [&_thead]:border-(--rule-hard) [&_tbody_tr]:border-b [&_tbody_tr]:border-(--rule) [&_tbody_tr:last-child]:border-b-0'\nconst SOFT_HEAD = '[&_thead]:border-(--rule-2)'\nconst COLUMNS =\n  '[&_th]:border-e [&_td]:border-e [&_th]:border-(--rule) [&_td]:border-(--rule) [&_th:last-child]:border-e-0 [&_td:last-child]:border-e-0'\nconst BOXED = 'rounded-(--radius) border border-(--rule-2) [--table-pad-x:0.75rem]'\n\nconst BORDERS: Record<TableBorders, string> = {\n  rows: ROWS,\n  grid: cn(ROWS, COLUMNS, '[--table-pad-x:0.75rem]'),\n  bordered: cn(ROWS, SOFT_HEAD, BOXED),\n  'bordered-grid': cn(ROWS, SOFT_HEAD, COLUMNS, BOXED),\n  none: '',\n}\n\nexport interface TableProps extends TableHTMLAttributes<HTMLTableElement> {\n  /**\n   * Describes the table for a screen reader, which cannot see the heading above\n   * it. Rendered as a visually-hidden `<caption>` — required, because an\n   * unnamed table in a page with three tables is unnavigable.\n   */\n  caption: string\n  /** Prints the caption instead of hiding it. */\n  showCaption?: boolean\n  /**\n   * Pins the header row while the body scrolls. Needs a bounded height on the\n   * container — otherwise the page scrolls, not the table, and nothing sticks.\n   */\n  stickyHeader?: boolean\n  /** Which rules to draw. See {@link TableBorders}. */\n  borders?: TableBorders\n  /** Tightens the row padding, for a table that is mostly numbers. */\n  density?: 'comfortable' | 'compact'\n}\n\n/**\n * A ruled data table.\n *\n * Wrapped in its own horizontally scrolling container, because a table is the\n * one block that legitimately exceeds the measure — and a page that scrolls\n * sideways as a whole is a layout bug, while a table that does is a table.\n *\n * That container is focusable, and it has to be. A scrollable region whose\n * contents are not themselves focusable is unreachable by keyboard: there is no\n * element to Tab to and therefore no way to press an arrow key at it, so the\n * columns past the fold simply do not exist for anyone not using a mouse.\n *\n * It is also POSITIONED, which is not decoration. `sr-only` is\n * `position: absolute`, so a visually-hidden label in a cell resolves against\n * the nearest positioned ancestor — and with none between it and the document,\n * it escapes the scroll container and every `overflow-hidden` around it, and\n * widens the page by however far the table happens to be scrolled.\n *\n * No zebra striping at any border setting. In a monochrome system a striped row\n * is a second surface competing with the page ground, and the hairline between\n * rows is already enough to track a line across.\n *\n * @example\n * <Table caption=\"Deploy history\">\n *   <THead><TR><TH>Commit</TH><TH align=\"end\" sortable sortDirection={dir} onSort={sort}>Duration</TH></TR></THead>\n *   <TBody><TR><TD>a1b2c3d</TD><TD align=\"end\">2m 14s</TD></TR></TBody>\n * </Table>\n * @example\n * <Table caption=\"Inventory\" borders=\"bordered-grid\" density=\"compact\">…</Table>\n */\nexport function Table({\n  caption,\n  showCaption = false,\n  stickyHeader = false,\n  borders = 'rows',\n  density = 'comfortable',\n  className,\n  children,\n  ...rest\n}: TableProps) {\n  warnBlankName('Table', 'caption', caption, 'the table is announced with no name and a reader arrives in it with no idea what it lists')\n  return (\n    <div\n      tabIndex={0}\n      role=\"region\"\n      aria-label={caption}\n      data-table-density={density}\n      className={cn('relative w-full overflow-x-auto scroll-slim', BORDERS[borders])}\n    >\n      <table\n        className={cn(\n          'w-full border-collapse text-start text-sm',\n          stickyHeader &&\n            '[&_thead]:sticky [&_thead]:top-0 [&_thead]:z-(--z-rule) [&_thead]:bg-(--paper)',\n          className,\n        )}\n        {...rest}\n      >\n        <caption className={cn(showCaption ? 'pb-3 text-start eyebrow text-(--ink-3-aa)' : 'sr-only')}>\n          {caption}\n        </caption>\n        {children}\n      </table>\n    </div>\n  )\n}\n\n/** Header group. The rule under it is drawn by the table's border setting. */\nexport function THead({ className, ...rest }: HTMLAttributes<HTMLTableSectionElement>) {\n  return <thead className={className} {...rest} />\n}\n\nexport function TBody({ className, ...rest }: HTMLAttributes<HTMLTableSectionElement>) {\n  return <tbody className={className} {...rest} />\n}\n\nexport function TR({ className, ...rest }: HTMLAttributes<HTMLTableRowElement>) {\n  return <tr className={className} {...rest} />\n}\n\nexport type SortDirection = 'ascending' | 'descending' | 'none'\n\nexport interface THProps extends Omit<ThHTMLAttributes<HTMLTableCellElement>, 'align'> {\n  /** Which edge the column's contents sit against. Numbers belong at `end`. */\n  align?: TableAlign\n  /** Makes the label a button and shows the sort marker. */\n  sortable?: boolean\n  /**\n   * Which way this column is sorted. Also set as `aria-sort`, which is the\n   * only way a screen reader learns a table is ordered at all — a caret drawn\n   * in the header tells it nothing.\n   */\n  sortDirection?: SortDirection\n  onSort?: () => void\n}\n\n/**\n * Cell padding, in one string both cells share.\n *\n * `--table-pad-x` is 0 by default and set by the ruled variants, so the plain\n * table keeps its trailing gap and no leading one while a boxed table gets\n * symmetric padding inside its border.\n */\nconst CELL =\n  'px-[var(--table-pad-x,0)] [&:not(:last-child)]:pe-[calc(var(--table-pad-x,0px)+1.5rem)]'\n\nconst SORT_ICON = {\n  ascending: ArrowUp,\n  descending: ArrowDown,\n  none: ChevronsUpDown,\n} as const\n\n/**\n * A column label. Mono and uppercase, so it never reads as data.\n *\n * When sortable, the label becomes a `<button>` INSIDE the `<th>` rather than\n * the `<th>` becoming clickable: a cell with a click handler is not focusable\n * and not announced as a control, so the sort exists only for a mouse.\n *\n * Sorting is per column and opt-in. A table where every header is a button\n * invites the reader to try sorting a column the data cannot be ordered by.\n */\nexport function TH({\n  align = 'start',\n  sortable = false,\n  sortDirection = 'none',\n  onSort,\n  className,\n  children,\n  ...rest\n}: THProps) {\n  const Icon = SORT_ICON[sortDirection]\n\n  return (\n    <th\n      scope=\"col\"\n      aria-sort={sortable ? sortDirection : undefined}\n      className={cn(CELL, 'py-3 align-bottom eyebrow text-(--ink-3-aa)', ALIGN[align], className)}\n      {...rest}\n    >\n      {sortable ? (\n        <button\n          type=\"button\"\n          onClick={onSort}\n          className={cn(\n            'group inline-flex items-center gap-1.5 eyebrow transition-colors duration-(--duration-fast) hover:text-(--ink)',\n            sortDirection === 'none' ? 'text-(--ink-3-aa)' : 'text-(--ink)',\n          )}\n        >\n          {children}\n          <Icon\n            size={12}\n            strokeWidth={2}\n            aria-hidden\n            className={cn(\n              'shrink-0 transition-opacity',\n              sortDirection === 'none' && 'opacity-40 group-hover:opacity-100',\n            )}\n          />\n        </button>\n      ) : (\n        children\n      )}\n    </th>\n  )\n}\n\nexport interface TDProps extends Omit<TdHTMLAttributes<HTMLTableCellElement>, 'align'> {\n  /** Which edge the cell's contents sit against. Match the column's header. */\n  align?: TableAlign\n}\n\nexport function TD({ align = 'start', className, ...rest }: TDProps) {\n  return (\n    <td\n      className={cn(CELL, 'py-[var(--table-pad-y)] align-top text-(--ink-2)', ALIGN[align], className)}\n      {...rest}\n    />\n  )\n}\n\nexport default Table\n"],"mappings":"AA2HM,SASE,KATF;AA3HN,SAAS,WAAW,SAAS,sBAAsB;AAEnD,SAAS,UAAU;AACnB,SAAS,qBAAqB;AAiB9B,MAAM,QAAoC;AAAA,EACxC,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,KAAK;AACP;AAeA,MAAM,OACJ;AACF,MAAM,YAAY;AAClB,MAAM,UACJ;AACF,MAAM,QAAQ;AAEd,MAAM,UAAwC;AAAA,EAC5C,MAAM;AAAA,EACN,MAAM,GAAG,MAAM,SAAS,yBAAyB;AAAA,EACjD,UAAU,GAAG,MAAM,WAAW,KAAK;AAAA,EACnC,iBAAiB,GAAG,MAAM,WAAW,SAAS,KAAK;AAAA,EACnD,MAAM;AACR;AAoDO,SAAS,MAAM;AAAA,EACpB;AAAA,EACA,cAAc;AAAA,EACd,eAAe;AAAA,EACf,UAAU;AAAA,EACV,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAe;AACb,gBAAc,SAAS,WAAW,SAAS,2FAA2F;AACtI,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAU;AAAA,MACV,MAAK;AAAA,MACL,cAAY;AAAA,MACZ,sBAAoB;AAAA,MACpB,WAAW,GAAG,+CAA+C,QAAQ,OAAO,CAAC;AAAA,MAE7E;AAAA,QAAC;AAAA;AAAA,UACC,WAAW;AAAA,YACT;AAAA,YACA,gBACE;AAAA,YACF;AAAA,UACF;AAAA,UACC,GAAG;AAAA,UAEJ;AAAA,gCAAC,aAAQ,WAAW,GAAG,cAAc,8CAA8C,SAAS,GACzF,mBACH;AAAA,YACC;AAAA;AAAA;AAAA,MACH;AAAA;AAAA,EACF;AAEJ;AAGO,SAAS,MAAM,EAAE,WAAW,GAAG,KAAK,GAA4C;AACrF,SAAO,oBAAC,WAAM,WAAuB,GAAG,MAAM;AAChD;AAEO,SAAS,MAAM,EAAE,WAAW,GAAG,KAAK,GAA4C;AACrF,SAAO,oBAAC,WAAM,WAAuB,GAAG,MAAM;AAChD;AAEO,SAAS,GAAG,EAAE,WAAW,GAAG,KAAK,GAAwC;AAC9E,SAAO,oBAAC,QAAG,WAAuB,GAAG,MAAM;AAC7C;AAyBA,MAAM,OACJ;AAEF,MAAM,YAAY;AAAA,EAChB,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,MAAM;AACR;AAYO,SAAS,GAAG;AAAA,EACjB,QAAQ;AAAA,EACR,WAAW;AAAA,EACX,gBAAgB;AAAA,EAChB;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAY;AACV,QAAM,OAAO,UAAU,aAAa;AAEpC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAM;AAAA,MACN,aAAW,WAAW,gBAAgB;AAAA,MACtC,WAAW,GAAG,MAAM,+CAA+C,MAAM,KAAK,GAAG,SAAS;AAAA,MACzF,GAAG;AAAA,MAEH,qBACC;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,SAAS;AAAA,UACT,WAAW;AAAA,YACT;AAAA,YACA,kBAAkB,SAAS,sBAAsB;AAAA,UACnD;AAAA,UAEC;AAAA;AAAA,YACD;AAAA,cAAC;AAAA;AAAA,gBACC,MAAM;AAAA,gBACN,aAAa;AAAA,gBACb,eAAW;AAAA,gBACX,WAAW;AAAA,kBACT;AAAA,kBACA,kBAAkB,UAAU;AAAA,gBAC9B;AAAA;AAAA,YACF;AAAA;AAAA;AAAA,MACF,IAEA;AAAA;AAAA,EAEJ;AAEJ;AAOO,SAAS,GAAG,EAAE,QAAQ,SAAS,WAAW,GAAG,KAAK,GAAY;AACnE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,GAAG,MAAM,oDAAoD,MAAM,KAAK,GAAG,SAAS;AAAA,MAC9F,GAAG;AAAA;AAAA,EACN;AAEJ;AAEA,IAAO,gBAAQ;","names":[]}

package/dist/components/Tag/Tag.d.ts

@@ -1,28 +1,87 @@
 import * as react from 'react';
 import { HTMLAttributes, ReactNode } from 'react';
 
-interface TagProps extends HTMLAttributes<HTMLSpanElement> {
+interface TagBase extends Omit<HTMLAttributes<HTMLElement>, 'onClick'> {
     children: ReactNode;
-    /** Renders the pressed/selected look. Pair with `aria-pressed` on a wrapper button. */
+    /**
+     * Renders the pressed/selected look, and declares the chip a toggle.
+     *
+     * An interactive chip reads `aria-pressed` off this same value, so the accent
+     * fill and the state a screen reader hears cannot drift apart. Leave it off
+     * for a chip whose `onClick` navigates or opens something: a control that is
+     * neither pressed nor unpressed is better announced as neither than as
+     * "not pressed".
+     */
     active?: boolean;
+    /**
+     * Makes the chip ITSELF the filter control.
+     *
+     * This prop exists because the alternative did not survive contact with
+     * `onRemove`. The advice used to be to wrap the tag in a button at the call
+     * site, which is fine on its own and invalid the moment the chip is also
+     * removable: the remove control is a real `<button>`, so the wrapper puts a
+     * button inside a button — markup the parser splits into siblings, leaving a
+     * DOM neither the author nor the accessibility tree expects.
+     *
+     * With this the wrapper is never written. The chip carries the click, the
+     * focus ring and the pressed state on the element that draws them, and a
+     * removable filter chip renders its two controls side by side instead of one
+     * inside the other.
+     */
+    onClick?: () => void;
 }
 /**
- * A subject label — a topic, a technology, a filter facet.
+ * The removable form: a chip for one thing the reader has already chosen.
+ *
+ * `removeLabel` is required alongside `onRemove` and not optional with a
+ * default, because "Remove" repeated down a row of filters is eight controls a
+ * screen reader cannot tell apart. Write the subject into it — "Remove
+ * TypeScript filter".
+ */
+interface TagRemovable {
+    /** Called when the reader dismisses the chip. */
+    onRemove: () => void;
+    /** The remove button's accessible name. Name the subject, not the action. */
+    removeLabel: string;
+}
+interface TagStatic {
+    onRemove?: never;
+    removeLabel?: never;
+}
+type TagProps = TagBase & (TagRemovable | TagStatic);
+/**
+ * A subject label — a topic, a technology, a filter facet — that can filter
+ * with `onClick` and be dismissed with `onRemove`.
  *
  * Distinct from `Badge`, which carries a state or a count. A tag names what
  * something is ABOUT, so several sit together in a row and the reader scans
  * them; a badge is one fact about one record.
  *
- * Presentational on purpose. To make a tag filter a list, wrap it in a button
- * or a link at the call site and pass `active` — that keeps the focus ring,
- * the pressed state and the keyboard handling with the element that actually
- * owns them.
+ * This is where a `Token` component would have gone. It was not built: a token
+ * is a tag with a remove button, and the difference between the two is one
+ * prop, not one component. The system already ships three things that look
+ * alike — `Badge`, `Tag`, `StatusPill` — and a fourth whose whole distinction
+ * is an X on the end would be the one a call site picks by coin toss.
+ *
+ * Presentational until it is given a handler, and the component owns both
+ * interactive cases rather than leaving one to a wrapper at the call site.
+ * That is not a convenience: a wrapping `<button>` around a chip that already
+ * holds the remove `<button>` is a button inside a button, which no parser
+ * keeps and no accessibility tree reports the way it was written. Given both,
+ * the chip renders the label and the X as SIBLING buttons — the label takes
+ * the leading padding with it, so it is the whole of the chip up to the X
+ * rather than the words with dead padding around them.
  *
  * @example
  * <Tag>TypeScript</Tag>
  * @example
- * <button type="button" aria-pressed={on} onClick={toggle}><Tag active={on}>Rust</Tag></button>
+ * <Tag active={on} onClick={toggle}>Rust</Tag>
+ * @example
+ * <Tag onRemove={() => drop('rust')} removeLabel="Remove Rust filter">Rust</Tag>
+ * @example
+ * // Both: a filter the reader can toggle and also take out of the row.
+ * <Tag active={on} onClick={toggle} onRemove={drop} removeLabel="Remove Rust filter">Rust</Tag>
  */
-declare function Tag({ children, active, className, ...rest }: TagProps): react.JSX.Element;
+declare function Tag({ children, active, onClick, onRemove, removeLabel, className, ...rest }: TagProps): react.JSX.Element;
 
 export { Tag, type TagProps, Tag as default };

package/dist/components/Tag/Tag.js

@@ -1,18 +1,58 @@
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { X } from "lucide-react";
 import { cn } from "../../lib/cn.js";
-function Tag({ children, active = false, className, ...rest }) {
-  return /* @__PURE__ */ jsx(
-    "span",
+function Tag({ children, active, onClick, onRemove, removeLabel, className, ...rest }) {
+  const split = Boolean(onClick && onRemove);
+  const chip = cn(
+    "inline-flex items-center rounded-(--radius-sm) font-mono text-xs tracking-wide transition-colors duration-(--duration-fast)",
+    active ? "bg-(--accent) text-(--accent-foreground)" : "bg-(--stone) text-(--ink-3-aa)",
+    onRemove ? "gap-1 pe-1.5" : "pe-2.5",
+    // Handed to the label button in the split form, so the padding is part of
+    // the target rather than a ring of dead space around it.
+    !split && "py-1 ps-2.5",
+    className
+  );
+  const remove = onRemove ? /* @__PURE__ */ jsx(
+    "button",
     {
+      type: "button",
+      onClick: onRemove,
+      "aria-label": removeLabel,
       className: cn(
-        "inline-flex items-center rounded-(--radius-sm) px-2.5 py-1 font-mono text-xs tracking-wide transition-colors duration-(--duration-fast)",
-        active ? "bg-(--accent) text-(--accent-foreground)" : "bg-(--stone) text-(--ink-3-aa)",
-        className
+        // The drawn box is 16px, which is under the 24px minimum a pointer
+        // target has to clear (WCAG 2.5.8). The inset pseudo-element takes
+        // the hit area out to 24 without changing what is drawn or pushing
+        // the chips apart — the 44px floor is for a standalone control, and
+        // a chip is 24 tall to begin with.
+        "relative inline-flex size-4 shrink-0 items-center justify-center rounded-(--radius-xs)",
+        "before:absolute before:inset-[-4px] before:content-['']",
+        "opacity-60 transition-opacity duration-(--duration-fast) hover:opacity-100 focus-visible:opacity-100"
       ),
-      ...rest,
-      children
+      children: /* @__PURE__ */ jsx(X, { size: 12, strokeWidth: 2.5, "aria-hidden": true })
     }
-  );
+  ) : null;
+  if (split) {
+    return /* @__PURE__ */ jsxs("span", { className: chip, ...rest, children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick,
+          "aria-pressed": active,
+          className: "rounded-(--radius-sm) py-1 ps-2.5 font-mono text-xs tracking-wide",
+          children
+        }
+      ),
+      remove
+    ] });
+  }
+  if (onClick) {
+    return /* @__PURE__ */ jsx("button", { type: "button", onClick, "aria-pressed": active, className: chip, ...rest, children });
+  }
+  return /* @__PURE__ */ jsxs("span", { className: chip, ...rest, children: [
+    children,
+    remove
+  ] });
 }
 var Tag_default = Tag;
 export {

package/dist/components/Tag/Tag.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Tag/Tag.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react'\nimport { cn } from '../../lib/cn'\n\nexport interface TagProps extends HTMLAttributes<HTMLSpanElement> {\n  children: ReactNode\n  /** Renders the pressed/selected look. Pair with `aria-pressed` on a wrapper button. */\n  active?: boolean\n}\n\n/**\n * A subject label — a topic, a technology, a filter facet.\n *\n * Distinct from `Badge`, which carries a state or a count. A tag names what\n * something is ABOUT, so several sit together in a row and the reader scans\n * them; a badge is one fact about one record.\n *\n * Presentational on purpose. To make a tag filter a list, wrap it in a button\n * or a link at the call site and pass `active` — that keeps the focus ring,\n * the pressed state and the keyboard handling with the element that actually\n * owns them.\n *\n * @example\n * <Tag>TypeScript</Tag>\n * @example\n * <button type=\"button\" aria-pressed={on} onClick={toggle}><Tag active={on}>Rust</Tag></button>\n */\nexport function Tag({ children, active = false, className, ...rest }: TagProps) {\n  return (\n    <span\n      className={cn(\n        'inline-flex items-center rounded-(--radius-sm) px-2.5 py-1 font-mono text-xs tracking-wide transition-colors duration-(--duration-fast)',\n        active ? 'bg-(--accent) text-(--accent-foreground)' : 'bg-(--stone) text-(--ink-3-aa)',\n        className,\n      )}\n      {...rest}\n    >\n      {children}\n    </span>\n  )\n}\n\nexport default Tag\n"],"mappings":"AA4BI;AA3BJ,SAAS,UAAU;AAyBZ,SAAS,IAAI,EAAE,UAAU,SAAS,OAAO,WAAW,GAAG,KAAK,GAAa;AAC9E,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA,SAAS,6CAA6C;AAAA,QACtD;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEH;AAAA;AAAA,EACH;AAEJ;AAEA,IAAO,cAAQ;","names":[]}
+{"version":3,"sources":["../../../src/components/Tag/Tag.tsx"],"sourcesContent":["import { X } from 'lucide-react'\nimport type { HTMLAttributes, ReactNode } from 'react'\nimport { cn } from '../../lib/cn'\n\ninterface TagBase extends Omit<HTMLAttributes<HTMLElement>, 'onClick'> {\n  children: ReactNode\n  /**\n   * Renders the pressed/selected look, and declares the chip a toggle.\n   *\n   * An interactive chip reads `aria-pressed` off this same value, so the accent\n   * fill and the state a screen reader hears cannot drift apart. Leave it off\n   * for a chip whose `onClick` navigates or opens something: a control that is\n   * neither pressed nor unpressed is better announced as neither than as\n   * \"not pressed\".\n   */\n  active?: boolean\n  /**\n   * Makes the chip ITSELF the filter control.\n   *\n   * This prop exists because the alternative did not survive contact with\n   * `onRemove`. The advice used to be to wrap the tag in a button at the call\n   * site, which is fine on its own and invalid the moment the chip is also\n   * removable: the remove control is a real `<button>`, so the wrapper puts a\n   * button inside a button — markup the parser splits into siblings, leaving a\n   * DOM neither the author nor the accessibility tree expects.\n   *\n   * With this the wrapper is never written. The chip carries the click, the\n   * focus ring and the pressed state on the element that draws them, and a\n   * removable filter chip renders its two controls side by side instead of one\n   * inside the other.\n   */\n  onClick?: () => void\n}\n\n/**\n * The removable form: a chip for one thing the reader has already chosen.\n *\n * `removeLabel` is required alongside `onRemove` and not optional with a\n * default, because \"Remove\" repeated down a row of filters is eight controls a\n * screen reader cannot tell apart. Write the subject into it — \"Remove\n * TypeScript filter\".\n */\ninterface TagRemovable {\n  /** Called when the reader dismisses the chip. */\n  onRemove: () => void\n  /** The remove button's accessible name. Name the subject, not the action. */\n  removeLabel: string\n}\n\ninterface TagStatic {\n  onRemove?: never\n  removeLabel?: never\n}\n\nexport type TagProps = TagBase & (TagRemovable | TagStatic)\n\n/**\n * A subject label — a topic, a technology, a filter facet — that can filter\n * with `onClick` and be dismissed with `onRemove`.\n *\n * Distinct from `Badge`, which carries a state or a count. A tag names what\n * something is ABOUT, so several sit together in a row and the reader scans\n * them; a badge is one fact about one record.\n *\n * This is where a `Token` component would have gone. It was not built: a token\n * is a tag with a remove button, and the difference between the two is one\n * prop, not one component. The system already ships three things that look\n * alike — `Badge`, `Tag`, `StatusPill` — and a fourth whose whole distinction\n * is an X on the end would be the one a call site picks by coin toss.\n *\n * Presentational until it is given a handler, and the component owns both\n * interactive cases rather than leaving one to a wrapper at the call site.\n * That is not a convenience: a wrapping `<button>` around a chip that already\n * holds the remove `<button>` is a button inside a button, which no parser\n * keeps and no accessibility tree reports the way it was written. Given both,\n * the chip renders the label and the X as SIBLING buttons — the label takes\n * the leading padding with it, so it is the whole of the chip up to the X\n * rather than the words with dead padding around them.\n *\n * @example\n * <Tag>TypeScript</Tag>\n * @example\n * <Tag active={on} onClick={toggle}>Rust</Tag>\n * @example\n * <Tag onRemove={() => drop('rust')} removeLabel=\"Remove Rust filter\">Rust</Tag>\n * @example\n * // Both: a filter the reader can toggle and also take out of the row.\n * <Tag active={on} onClick={toggle} onRemove={drop} removeLabel=\"Remove Rust filter\">Rust</Tag>\n */\nexport function Tag({ children, active, onClick, onRemove, removeLabel, className, ...rest }: TagProps) {\n  // Two controls cannot nest, so a chip that is both a filter and a selection\n  // splits its label out into a button of its own beside the remove button.\n  const split = Boolean(onClick && onRemove)\n\n  const chip = cn(\n    'inline-flex items-center rounded-(--radius-sm) font-mono text-xs tracking-wide transition-colors duration-(--duration-fast)',\n    active ? 'bg-(--accent) text-(--accent-foreground)' : 'bg-(--stone) text-(--ink-3-aa)',\n    onRemove ? 'gap-1 pe-1.5' : 'pe-2.5',\n    // Handed to the label button in the split form, so the padding is part of\n    // the target rather than a ring of dead space around it.\n    !split && 'py-1 ps-2.5',\n    className,\n  )\n\n  const remove = onRemove ? (\n    <button\n      type=\"button\"\n      onClick={onRemove}\n      aria-label={removeLabel}\n      className={cn(\n        // The drawn box is 16px, which is under the 24px minimum a pointer\n        // target has to clear (WCAG 2.5.8). The inset pseudo-element takes\n        // the hit area out to 24 without changing what is drawn or pushing\n        // the chips apart — the 44px floor is for a standalone control, and\n        // a chip is 24 tall to begin with.\n        'relative inline-flex size-4 shrink-0 items-center justify-center rounded-(--radius-xs)',\n        \"before:absolute before:inset-[-4px] before:content-['']\",\n        'opacity-60 transition-opacity duration-(--duration-fast) hover:opacity-100 focus-visible:opacity-100',\n      )}\n    >\n      <X size={12} strokeWidth={2.5} aria-hidden />\n    </button>\n  ) : null\n\n  if (split) {\n    return (\n      <span className={chip} {...rest}>\n        <button\n          type=\"button\"\n          onClick={onClick}\n          aria-pressed={active}\n          className=\"rounded-(--radius-sm) py-1 ps-2.5 font-mono text-xs tracking-wide\"\n        >\n          {children}\n        </button>\n        {remove}\n      </span>\n    )\n  }\n\n  if (onClick) {\n    return (\n      <button type=\"button\" onClick={onClick} aria-pressed={active} className={chip} {...rest}>\n        {children}\n      </button>\n    )\n  }\n\n  return (\n    <span className={chip} {...rest}>\n      {children}\n      {remove}\n    </span>\n  )\n}\n\nexport default Tag\n"],"mappings":"AAwHM,cAMA,YANA;AAxHN,SAAS,SAAS;AAElB,SAAS,UAAU;AAuFZ,SAAS,IAAI,EAAE,UAAU,QAAQ,SAAS,UAAU,aAAa,WAAW,GAAG,KAAK,GAAa;AAGtG,QAAM,QAAQ,QAAQ,WAAW,QAAQ;AAEzC,QAAM,OAAO;AAAA,IACX;AAAA,IACA,SAAS,6CAA6C;AAAA,IACtD,WAAW,iBAAiB;AAAA;AAAA;AAAA,IAG5B,CAAC,SAAS;AAAA,IACV;AAAA,EACF;AAEA,QAAM,SAAS,WACb;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,SAAS;AAAA,MACT,cAAY;AAAA,MACZ,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAMT;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,MAEA,8BAAC,KAAE,MAAM,IAAI,aAAa,KAAK,eAAW,MAAC;AAAA;AAAA,EAC7C,IACE;AAEJ,MAAI,OAAO;AACT,WACE,qBAAC,UAAK,WAAW,MAAO,GAAG,MACzB;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL;AAAA,UACA,gBAAc;AAAA,UACd,WAAU;AAAA,UAET;AAAA;AAAA,MACH;AAAA,MACC;AAAA,OACH;AAAA,EAEJ;AAEA,MAAI,SAAS;AACX,WACE,oBAAC,YAAO,MAAK,UAAS,SAAkB,gBAAc,QAAQ,WAAW,MAAO,GAAG,MAChF,UACH;AAAA,EAEJ;AAEA,SACE,qBAAC,UAAK,WAAW,MAAO,GAAG,MACxB;AAAA;AAAA,IACA;AAAA,KACH;AAEJ;AAEA,IAAO,cAAQ;","names":[]}

package/dist/components/Text/Text.d.ts

@@ -0,0 +1,62 @@
+import * as react from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
+
+/**
+ * A rung of the type scale, named for what it is FOR rather than for a pixel
+ * value. `base` is body copy; `lead` is the standfirst that carries a piece and
+ * is the only step here that touches the heading ladder (`--fs-item`, its
+ * bottom rung). Nothing above that: a paragraph larger than a record title is a
+ * heading that forgot to be one.
+ */
+type TextSize = 'xs' | 'sm' | 'base' | 'lead';
+/**
+ * A rung of the ink ladder. Three, because the ladder has three.
+ *
+ * `muted` is `--ink-3-aa` and never `--ink-3`. The two look identical on paper
+ * and are not the same token: `--ink-3` is a translucent tint that inherits
+ * whatever is under it, so it clears AA on the page ground and quietly fails on
+ * a card, a plate, or a code block.
+ */
+type TextTone = 'body' | 'strong' | 'muted';
+type TextElement = 'p' | 'span' | 'div' | 'li' | 'figcaption';
+interface TextProps extends HTMLAttributes<HTMLElement> {
+    children?: ReactNode;
+    /** Which rung of the type scale. See {@link TextSize}. */
+    size?: TextSize;
+    /** Which rung of the ink ladder. See {@link TextTone}. */
+    tone?: TextTone;
+    /**
+     * The element, and ONLY the element.
+     *
+     * Changing it changes what the markup means — a `span` inside a sentence, an
+     * `li` inside a list someone else opened — and changes nothing about the
+     * look. That separation is the whole point: the alternative is a `<p>` nested
+     * inside a `<p>`, which the HTML parser silently splits into two, or a
+     * paragraph faked out of a `<div>` because the real element brought a size
+     * with it.
+     */
+    as?: TextElement;
+}
+/**
+ * A paragraph, or a run of text that wants the system's voice.
+ *
+ * The step between `Article` and raw JSX. `Article` styles a whole reading
+ * column from element selectors and is the right answer for a post; this is for
+ * the single paragraph that is NOT in a column — a card's description, a
+ * dialog's explanation, the line under an empty state.
+ *
+ * The default tone is `body` (`--ink-2`), not `--ink`. A page whose paragraphs
+ * are all full-strength ink has spent the top of the ladder on its body copy
+ * and has nothing left for the headings, which is the single most common way a
+ * monochrome page loses its hierarchy.
+ *
+ * @example
+ * <Text>Twelve releases this quarter, none rolled back.</Text>
+ * @example
+ * <Text size="lead" tone="strong">A monochrome system for software and writing.</Text>
+ * @example
+ * <Text as="span" size="sm" tone="muted">Updated just now</Text>
+ */
+declare function Text({ children, size, tone, as, className, ...rest }: TextProps): react.JSX.Element;
+
+export { Text, type TextElement, type TextProps, type TextSize, type TextTone, Text as default };

package/dist/components/Text/Text.js

@@ -0,0 +1,30 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../lib/cn.js";
+const SIZE = {
+  xs: "text-xs leading-[1.6]",
+  sm: "text-sm leading-[1.65]",
+  base: "text-base font-light leading-[1.75]",
+  lead: "text-[length:var(--fs-item)] font-light leading-[1.6]"
+};
+const TONE = {
+  body: "text-(--ink-2)",
+  strong: "text-(--ink)",
+  muted: "text-(--ink-3-aa)"
+};
+function Text({
+  children,
+  size = "base",
+  tone = "body",
+  as = "p",
+  className,
+  ...rest
+}) {
+  const Comp = as;
+  return /* @__PURE__ */ jsx(Comp, { className: cn("m-0", SIZE[size], TONE[tone], className), ...rest, children });
+}
+var Text_default = Text;
+export {
+  Text,
+  Text_default as default
+};
+//# sourceMappingURL=Text.js.map

package/dist/components/Text/Text.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/Text/Text.tsx"],"sourcesContent":["import type { ElementType, HTMLAttributes, ReactNode } from 'react'\nimport { cn } from '../../lib/cn'\n\n/**\n * A rung of the type scale, named for what it is FOR rather than for a pixel\n * value. `base` is body copy; `lead` is the standfirst that carries a piece and\n * is the only step here that touches the heading ladder (`--fs-item`, its\n * bottom rung). Nothing above that: a paragraph larger than a record title is a\n * heading that forgot to be one.\n */\nexport type TextSize = 'xs' | 'sm' | 'base' | 'lead'\n\n/**\n * A rung of the ink ladder. Three, because the ladder has three.\n *\n * `muted` is `--ink-3-aa` and never `--ink-3`. The two look identical on paper\n * and are not the same token: `--ink-3` is a translucent tint that inherits\n * whatever is under it, so it clears AA on the page ground and quietly fails on\n * a card, a plate, or a code block.\n */\nexport type TextTone = 'body' | 'strong' | 'muted'\n\nexport type TextElement = 'p' | 'span' | 'div' | 'li' | 'figcaption'\n\n/**\n * Weight travels with the size, deliberately.\n *\n * The system sets long-form copy at 300 — it is what gives a page of prose its\n * air. At 12 and 14px that same weight is a hairline: the strokes thin out\n * below the point where a light face is a choice and turn into a legibility\n * bug. So the two small steps step back up to 400, and a caller never has to\n * know that the trade exists.\n */\nconst SIZE: Record<TextSize, string> = {\n  xs: 'text-xs leading-[1.6]',\n  sm: 'text-sm leading-[1.65]',\n  base: 'text-base font-light leading-[1.75]',\n  lead: 'text-[length:var(--fs-item)] font-light leading-[1.6]',\n}\n\nconst TONE: Record<TextTone, string> = {\n  body: 'text-(--ink-2)',\n  strong: 'text-(--ink)',\n  muted: 'text-(--ink-3-aa)',\n}\n\nexport interface TextProps extends HTMLAttributes<HTMLElement> {\n  children?: ReactNode\n  /** Which rung of the type scale. See {@link TextSize}. */\n  size?: TextSize\n  /** Which rung of the ink ladder. See {@link TextTone}. */\n  tone?: TextTone\n  /**\n   * The element, and ONLY the element.\n   *\n   * Changing it changes what the markup means — a `span` inside a sentence, an\n   * `li` inside a list someone else opened — and changes nothing about the\n   * look. That separation is the whole point: the alternative is a `<p>` nested\n   * inside a `<p>`, which the HTML parser silently splits into two, or a\n   * paragraph faked out of a `<div>` because the real element brought a size\n   * with it.\n   */\n  as?: TextElement\n}\n\n/**\n * A paragraph, or a run of text that wants the system's voice.\n *\n * The step between `Article` and raw JSX. `Article` styles a whole reading\n * column from element selectors and is the right answer for a post; this is for\n * the single paragraph that is NOT in a column — a card's description, a\n * dialog's explanation, the line under an empty state.\n *\n * The default tone is `body` (`--ink-2`), not `--ink`. A page whose paragraphs\n * are all full-strength ink has spent the top of the ladder on its body copy\n * and has nothing left for the headings, which is the single most common way a\n * monochrome page loses its hierarchy.\n *\n * @example\n * <Text>Twelve releases this quarter, none rolled back.</Text>\n * @example\n * <Text size=\"lead\" tone=\"strong\">A monochrome system for software and writing.</Text>\n * @example\n * <Text as=\"span\" size=\"sm\" tone=\"muted\">Updated just now</Text>\n */\nexport function Text({\n  children,\n  size = 'base',\n  tone = 'body',\n  as = 'p',\n  className,\n  ...rest\n}: TextProps) {\n  const Comp = as as ElementType\n\n  return (\n    <Comp className={cn('m-0', SIZE[size], TONE[tone], className)} {...rest}>\n      {children}\n    </Comp>\n  )\n}\n\nexport default Text\n"],"mappings":"AAgGI;AA/FJ,SAAS,UAAU;AAgCnB,MAAM,OAAiC;AAAA,EACrC,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,MAAM;AAAA,EACN,MAAM;AACR;AAEA,MAAM,OAAiC;AAAA,EACrC,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,OAAO;AACT;AAyCO,SAAS,KAAK;AAAA,EACnB;AAAA,EACA,OAAO;AAAA,EACP,OAAO;AAAA,EACP,KAAK;AAAA,EACL;AAAA,EACA,GAAG;AACL,GAAc;AACZ,QAAM,OAAO;AAEb,SACE,oBAAC,QAAK,WAAW,GAAG,OAAO,KAAK,IAAI,GAAG,KAAK,IAAI,GAAG,SAAS,GAAI,GAAG,MAChE,UACH;AAEJ;AAEA,IAAO,eAAQ;","names":[]}

package/dist/components/Timestamp/Timestamp.d.ts

@@ -0,0 +1,59 @@
+import * as react from 'react';
+import { TimeHTMLAttributes } from 'react';
+
+/**
+ * How the instant reads.
+ *
+ * `auto` is relative while the gap is small enough to be useful and absolute
+ * once it is not — "3 hours ago" answers the question a reader is actually
+ * asking about a recent record, and "2 years ago" does not.
+ */
+type TimestampFormat = 'auto' | 'relative' | 'absolute';
+interface TimestampProps extends Omit<TimeHTMLAttributes<HTMLTimeElement>, 'dateTime' | 'children'> {
+    /** The instant. A `Date`, an ISO string, or epoch milliseconds. */
+    value: Date | string | number;
+    /** How the instant reads. See {@link TimestampFormat}. */
+    format?: TimestampFormat;
+    /**
+     * How far from now `auto` still prints a relative time, in milliseconds.
+     * Seven days by default — past a week the calendar date is the more useful
+     * fact, and it is also the one that stops changing.
+     */
+    relativeWithin?: number;
+    /** Adds the clock time to the absolute form. */
+    showTime?: boolean;
+}
+/**
+ * A date or a time, rendered the one way the system renders them.
+ *
+ * Every list of records needs this, and `new Date().toLocaleString()` at the
+ * call site is precisely how a product ends up with four date formats on one
+ * screen.
+ *
+ * **On hydration.** Both halves of a formatted date are environment-dependent:
+ * a relative time depends on when it is read, and even an absolute one depends
+ * on the reader's locale and time zone, none of which a static build knows. So
+ * the first paint — the one the server produces and the one the client must
+ * reproduce exactly — is the ISO calendar date in UTC, sliced straight out of
+ * the ISO string with no `Intl` anywhere near it. Both sides compute it from
+ * the same characters, so they cannot disagree. The locale-aware and relative
+ * forms are applied after mount, in an effect, where there is a reader to be
+ * local to. This package statically exports every page, so the alternative is a
+ * hydration mismatch on any page with a date on it.
+ *
+ * The `datetime` attribute is the full ISO instant from the first render
+ * onwards and never changes, so a screen reader, a crawler, or anything else
+ * parsing the markup gets the exact moment whether or not the effect has run.
+ *
+ * It formats once per mount. A hundred rows each holding a ticking interval to
+ * keep "3 minutes ago" honest is a cost nobody asked for; a list that must tick
+ * should re-key or re-render from above.
+ *
+ * @example
+ * <Timestamp value={deploy.finishedAt} />
+ * @example
+ * <Timestamp value="2026-01-14T09:30:00Z" format="absolute" showTime />
+ */
+declare function Timestamp({ value, format, relativeWithin, showTime, className, ...rest }: TimestampProps): react.JSX.Element;
+
+export { Timestamp, type TimestampFormat, type TimestampProps, Timestamp as default };

package/dist/components/Timestamp/Timestamp.js

@@ -0,0 +1,56 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { cn } from "../../lib/cn.js";
+const UNITS = [
+  ["year", 31556952e3],
+  ["month", 2629746e3],
+  ["week", 6048e5],
+  ["day", 864e5],
+  ["hour", 36e5],
+  ["minute", 6e4]
+];
+function relative(deltaMs) {
+  const format = new Intl.RelativeTimeFormat(void 0, { numeric: "auto" });
+  const gap = Math.abs(deltaMs);
+  for (const [unit, size] of UNITS) {
+    if (gap >= size) return format.format(Math.trunc(deltaMs / size), unit);
+  }
+  return format.format(0, "second");
+}
+function absolute(date, showTime) {
+  return new Intl.DateTimeFormat(void 0, {
+    dateStyle: "medium",
+    ...showTime ? { timeStyle: "short" } : {}
+  }).format(date);
+}
+function Timestamp({
+  value,
+  format = "auto",
+  relativeWithin = 6048e5,
+  showTime = false,
+  className,
+  ...rest
+}) {
+  const date = value instanceof Date ? value : new Date(value);
+  const time = date.getTime();
+  const valid = !Number.isNaN(time);
+  const [local, setLocal] = useState(false);
+  useEffect(() => setLocal(true), []);
+  if (!valid) {
+    return /* @__PURE__ */ jsx("span", { className: cn("text-(--ink-3-aa)", className), ...rest, children: "\u2014" });
+  }
+  const iso = date.toISOString();
+  return /* @__PURE__ */ jsx("time", { dateTime: iso, className: cn("tabular-nums", className), ...rest, children: local ? read(date, format, relativeWithin, showTime) : iso.slice(0, 10) });
+}
+function read(date, format, relativeWithin, showTime) {
+  const delta = date.getTime() - Date.now();
+  const asRelative = format === "relative" || format === "auto" && Math.abs(delta) < relativeWithin;
+  return asRelative ? relative(delta) : absolute(date, showTime);
+}
+var Timestamp_default = Timestamp;
+export {
+  Timestamp,
+  Timestamp_default as default
+};
+//# sourceMappingURL=Timestamp.js.map

package/dist/components/Timestamp/Timestamp.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/Timestamp/Timestamp.tsx"],"sourcesContent":["'use client'\n\nimport { useEffect, useState } from 'react'\nimport type { TimeHTMLAttributes } from 'react'\nimport { cn } from '../../lib/cn'\n\n/**\n * How the instant reads.\n *\n * `auto` is relative while the gap is small enough to be useful and absolute\n * once it is not — \"3 hours ago\" answers the question a reader is actually\n * asking about a recent record, and \"2 years ago\" does not.\n */\nexport type TimestampFormat = 'auto' | 'relative' | 'absolute'\n\nexport interface TimestampProps\n  extends Omit<TimeHTMLAttributes<HTMLTimeElement>, 'dateTime' | 'children'> {\n  /** The instant. A `Date`, an ISO string, or epoch milliseconds. */\n  value: Date | string | number\n  /** How the instant reads. See {@link TimestampFormat}. */\n  format?: TimestampFormat\n  /**\n   * How far from now `auto` still prints a relative time, in milliseconds.\n   * Seven days by default — past a week the calendar date is the more useful\n   * fact, and it is also the one that stops changing.\n   */\n  relativeWithin?: number\n  /** Adds the clock time to the absolute form. */\n  showTime?: boolean\n}\n\n/**\n * The units, largest first, with the milliseconds in one of each.\n *\n * The month and year lengths are the average ones — 30.44 and 365.24 days —\n * because a relative time is a rounded statement about a gap, not a calendar\n * calculation, and \"2 months ago\" must not become \"1 month ago\" because\n * February was short.\n */\nconst UNITS = [\n  ['year', 31_556_952_000],\n  ['month', 2_629_746_000],\n  ['week', 604_800_000],\n  ['day', 86_400_000],\n  ['hour', 3_600_000],\n  ['minute', 60_000],\n] as const\n\n/**\n * The gap in words, in the reader's own language.\n *\n * `Intl.RelativeTimeFormat` rather than a table of English strings: it is in\n * every runtime this package targets, costs nothing to ship, and `numeric:\n * 'auto'` is what turns \"1 day ago\" into \"yesterday\".\n *\n * Truncated, not rounded — ninety seconds is \"1 minute ago\", because a reader\n * who has just watched something happen is not helped by being told it was two\n * minutes. Anything under a minute is \"now\": the seconds are noise, and they\n * are also the only part that would be wrong a moment later.\n */\nfunction relative(deltaMs: number): string {\n  const format = new Intl.RelativeTimeFormat(undefined, { numeric: 'auto' })\n  const gap = Math.abs(deltaMs)\n\n  for (const [unit, size] of UNITS) {\n    if (gap >= size) return format.format(Math.trunc(deltaMs / size), unit)\n  }\n  return format.format(0, 'second')\n}\n\n/** The calendar date, in the reader's own locale and time zone. */\nfunction absolute(date: Date, showTime: boolean): string {\n  return new Intl.DateTimeFormat(undefined, {\n    dateStyle: 'medium',\n    ...(showTime ? { timeStyle: 'short' as const } : {}),\n  }).format(date)\n}\n\n/**\n * A date or a time, rendered the one way the system renders them.\n *\n * Every list of records needs this, and `new Date().toLocaleString()` at the\n * call site is precisely how a product ends up with four date formats on one\n * screen.\n *\n * **On hydration.** Both halves of a formatted date are environment-dependent:\n * a relative time depends on when it is read, and even an absolute one depends\n * on the reader's locale and time zone, none of which a static build knows. So\n * the first paint — the one the server produces and the one the client must\n * reproduce exactly — is the ISO calendar date in UTC, sliced straight out of\n * the ISO string with no `Intl` anywhere near it. Both sides compute it from\n * the same characters, so they cannot disagree. The locale-aware and relative\n * forms are applied after mount, in an effect, where there is a reader to be\n * local to. This package statically exports every page, so the alternative is a\n * hydration mismatch on any page with a date on it.\n *\n * The `datetime` attribute is the full ISO instant from the first render\n * onwards and never changes, so a screen reader, a crawler, or anything else\n * parsing the markup gets the exact moment whether or not the effect has run.\n *\n * It formats once per mount. A hundred rows each holding a ticking interval to\n * keep \"3 minutes ago\" honest is a cost nobody asked for; a list that must tick\n * should re-key or re-render from above.\n *\n * @example\n * <Timestamp value={deploy.finishedAt} />\n * @example\n * <Timestamp value=\"2026-01-14T09:30:00Z\" format=\"absolute\" showTime />\n */\nexport function Timestamp({\n  value,\n  format = 'auto',\n  relativeWithin = 604_800_000,\n  showTime = false,\n  className,\n  ...rest\n}: TimestampProps) {\n  const date = value instanceof Date ? value : new Date(value)\n  const time = date.getTime()\n  const valid = !Number.isNaN(time)\n\n  // False through the server render and the hydrating render, true from the\n  // first effect on. That is the whole hydration contract in one flag.\n  const [local, setLocal] = useState(false)\n  useEffect(() => setLocal(true), [])\n\n  if (!valid) {\n    // Not \"Invalid Date\" — that is the browser's internal string and an\n    // engineering artefact in front of a reader. A value nothing can parse is a\n    // missing value, and a record UI already has a glyph for one. There is no\n    // <time> here either: an element whose datetime cannot be written is not a\n    // time.\n    return (\n      <span className={cn('text-(--ink-3-aa)', className)} {...rest}>\n        —\n      </span>\n    )\n  }\n\n  const iso = date.toISOString()\n\n  return (\n    <time dateTime={iso} className={cn('tabular-nums', className)} {...rest}>\n      {local ? read(date, format, relativeWithin, showTime) : iso.slice(0, 10)}\n    </time>\n  )\n}\n\n/**\n * The text a reader who has a clock and a locale gets. Only ever called after\n * mount — everything in here reads `Date.now()` or the ambient locale, which is\n * exactly what the server cannot know.\n */\nfunction read(\n  date: Date,\n  format: TimestampFormat,\n  relativeWithin: number,\n  showTime: boolean,\n): string {\n  const delta = date.getTime() - Date.now()\n  const asRelative = format === 'relative' || (format === 'auto' && Math.abs(delta) < relativeWithin)\n  return asRelative ? relative(delta) : absolute(date, showTime)\n}\n\nexport default Timestamp\n"],"mappings":";AAqIM;AAnIN,SAAS,WAAW,gBAAgB;AAEpC,SAAS,UAAU;AAmCnB,MAAM,QAAQ;AAAA,EACZ,CAAC,QAAQ,UAAc;AAAA,EACvB,CAAC,SAAS,SAAa;AAAA,EACvB,CAAC,QAAQ,MAAW;AAAA,EACpB,CAAC,OAAO,KAAU;AAAA,EAClB,CAAC,QAAQ,IAAS;AAAA,EAClB,CAAC,UAAU,GAAM;AACnB;AAcA,SAAS,SAAS,SAAyB;AACzC,QAAM,SAAS,IAAI,KAAK,mBAAmB,QAAW,EAAE,SAAS,OAAO,CAAC;AACzE,QAAM,MAAM,KAAK,IAAI,OAAO;AAE5B,aAAW,CAAC,MAAM,IAAI,KAAK,OAAO;AAChC,QAAI,OAAO,KAAM,QAAO,OAAO,OAAO,KAAK,MAAM,UAAU,IAAI,GAAG,IAAI;AAAA,EACxE;AACA,SAAO,OAAO,OAAO,GAAG,QAAQ;AAClC;AAGA,SAAS,SAAS,MAAY,UAA2B;AACvD,SAAO,IAAI,KAAK,eAAe,QAAW;AAAA,IACxC,WAAW;AAAA,IACX,GAAI,WAAW,EAAE,WAAW,QAAiB,IAAI,CAAC;AAAA,EACpD,CAAC,EAAE,OAAO,IAAI;AAChB;AAiCO,SAAS,UAAU;AAAA,EACxB;AAAA,EACA,SAAS;AAAA,EACT,iBAAiB;AAAA,EACjB,WAAW;AAAA,EACX;AAAA,EACA,GAAG;AACL,GAAmB;AACjB,QAAM,OAAO,iBAAiB,OAAO,QAAQ,IAAI,KAAK,KAAK;AAC3D,QAAM,OAAO,KAAK,QAAQ;AAC1B,QAAM,QAAQ,CAAC,OAAO,MAAM,IAAI;AAIhC,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,KAAK;AACxC,YAAU,MAAM,SAAS,IAAI,GAAG,CAAC,CAAC;AAElC,MAAI,CAAC,OAAO;AAMV,WACE,oBAAC,UAAK,WAAW,GAAG,qBAAqB,SAAS,GAAI,GAAG,MAAM,oBAE/D;AAAA,EAEJ;AAEA,QAAM,MAAM,KAAK,YAAY;AAE7B,SACE,oBAAC,UAAK,UAAU,KAAK,WAAW,GAAG,gBAAgB,SAAS,GAAI,GAAG,MAChE,kBAAQ,KAAK,MAAM,QAAQ,gBAAgB,QAAQ,IAAI,IAAI,MAAM,GAAG,EAAE,GACzE;AAEJ;AAOA,SAAS,KACP,MACA,QACA,gBACA,UACQ;AACR,QAAM,QAAQ,KAAK,QAAQ,IAAI,KAAK,IAAI;AACxC,QAAM,aAAa,WAAW,cAAe,WAAW,UAAU,KAAK,IAAI,KAAK,IAAI;AACpF,SAAO,aAAa,SAAS,KAAK,IAAI,SAAS,MAAM,QAAQ;AAC/D;AAEA,IAAO,oBAAQ;","names":[]}

package/dist/components/Toast/Toast.d.ts

@@ -9,6 +9,14 @@ export { toast } from 'sonner';
  * reader must act on belongs in the page — a toast is dismissed by time, and
  * time is not an acknowledgement.
  *
+ * `theme` follows `data-mode`. sonner defaults to `light` and hard-codes the
+ * description's colour per theme — `#3f3f3f`, overridden only under
+ * `[data-sonner-theme=dark]` — so a Toaster that never passed `theme` put dark
+ * grey text on this system's `--paper: #0d0d0d` and every
+ * `toast(title, { description })` lost its second half. Pass `theme` yourself
+ * and that wins; sonner's own `system` is the one value not to reach for, since
+ * it reads the OS rather than the attribute the page is actually painted from.
+ *
  * `richColors` stays off by default: sonner's rich palette is not this system's
  * status scale, and turning it on reintroduces chroma the White Reset spends
  * only on state.
@@ -19,6 +27,6 @@ export { toast } from 'sonner';
  * // anywhere
  * toast.success('Saved')
  */
-declare function Toaster({ position, closeButton, richColors, style, ...rest }: ToasterProps): react.JSX.Element;
+declare function Toaster({ position, closeButton, richColors, theme, style, ...rest }: ToasterProps): react.JSX.Element;
 
 export { Toaster, Toaster as default };

package/dist/components/Toast/Toast.js

@@ -1,33 +1,56 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
+import { useSyncExternalStore } from "react";
 import { Toaster as SonnerToaster, toast } from "sonner";
 const TOKEN_STYLE = {
   "--normal-bg": "var(--paper)",
   "--normal-text": "var(--ink)",
   "--normal-border": "var(--rule-2)",
+  "--border-radius": "var(--radius)",
+  fontFamily: "var(--sans)"
+};
+const RICH_STYLE = {
   "--success-bg": "var(--paper)",
   "--success-text": "var(--ok)",
   "--success-border": "var(--rule-2)",
   "--error-bg": "var(--paper)",
   "--error-text": "var(--danger)",
-  "--error-border": "var(--rule-2)",
-  "--border-radius": "var(--radius)",
-  fontFamily: "var(--sans)"
+  "--error-border": "var(--rule-2)"
 };
+function readMode() {
+  if (typeof document === "undefined") return "light";
+  return document.documentElement.dataset.mode === "dark" ? "dark" : "light";
+}
+function readModeOnServer() {
+  return "light";
+}
+function subscribeToMode(onChange) {
+  if (typeof document === "undefined" || typeof MutationObserver === "undefined") return () => {
+  };
+  const observer = new MutationObserver(onChange);
+  observer.observe(document.documentElement, { attributes: true, attributeFilter: ["data-mode"] });
+  return () => observer.disconnect();
+}
+function useMode() {
+  return useSyncExternalStore(subscribeToMode, readMode, readModeOnServer);
+}
 function Toaster({
   position = "bottom-right",
   closeButton = true,
   richColors = false,
+  theme,
   style,
   ...rest
 }) {
+  const mode = useMode();
   return /* @__PURE__ */ jsx(
     SonnerToaster,
     {
       position,
       closeButton,
       richColors,
-      style: { ...TOKEN_STYLE, ...style },
+      theme: theme ?? mode,
+      style: { ...TOKEN_STYLE, ...richColors ? RICH_STYLE : null, ...style },
       ...rest
     }
   );