@eocrm/design-system 0.6.24 → 0.8.0

package/dist/components/Switch/Switch.js

@@ -0,0 +1,86 @@
+'use client';
+import { useTranslation } from "../../i18n/useTranslation.js";
+import Switch_module_default from "./Switch.module.js";
+import { forwardRef, useEffect, useState } from "react";
+import clsx from "clsx";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { Loader2 } from "lucide-react";
+// src/components/Switch/Switch.tsx
+var SIZE_CLASS = {
+	sm: Switch_module_default.sizeSm,
+	md: Switch_module_default.sizeMd,
+	lg: Switch_module_default.sizeLg
+};
+var LABEL_CLASS = {
+	sm: Switch_module_default.labelSm,
+	md: Switch_module_default.labelMd,
+	lg: Switch_module_default.labelLg
+};
+var SPIN_SIZE = {
+	sm: 8,
+	md: 10,
+	lg: 12
+};
+/**
+* Binary on/off toggle on a native `<input type="checkbox" role="switch">`.
+* @see docs/components/Switch.md
+*/
+var Switch = forwardRef(function Switch({ size = "md", tone = "accent", checked, defaultChecked, onChange, invalid, loading, disabled, children, className, ...props }, ref) {
+	const t = useTranslation();
+	const [busyText, setBusyText] = useState("");
+	useEffect(() => {
+		setBusyText(loading ? t("switch.busy") : "");
+	}, [loading, t]);
+	const [internalChecked, setInternalChecked] = useState(defaultChecked ?? false);
+	const isControlled = checked !== void 0;
+	const currentChecked = isControlled ? checked : internalChecked;
+	const isVisuallyUnavailable = disabled || loading;
+	const handleChange = (e) => {
+		if (loading) return;
+		if (!isControlled) setInternalChecked(e.target.checked);
+		onChange?.(e.target.checked, e);
+	};
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("label", {
+		className: clsx(Switch_module_default.wrapper, className),
+		"data-disabled": isVisuallyUnavailable || void 0,
+		children: [
+			/* @__PURE__ */ jsx("input", {
+				...props,
+				ref,
+				type: "checkbox",
+				role: "switch",
+				checked: currentChecked,
+				disabled,
+				"aria-invalid": invalid || void 0,
+				"aria-busy": loading || void 0,
+				onChange: handleChange,
+				className: Switch_module_default.input
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: clsx(Switch_module_default.track, SIZE_CLASS[size]),
+				"data-checked": currentChecked ? "true" : "false",
+				"data-tone": tone,
+				"data-invalid": invalid ? "true" : void 0,
+				"aria-hidden": "true",
+				children: /* @__PURE__ */ jsx("span", {
+					className: Switch_module_default.thumb,
+					children: loading && /* @__PURE__ */ jsx(Loader2, {
+						size: SPIN_SIZE[size],
+						className: Switch_module_default.spin,
+						"aria-hidden": "true"
+					})
+				})
+			}),
+			children && /* @__PURE__ */ jsx("span", {
+				className: clsx(Switch_module_default.label, LABEL_CLASS[size]),
+				children
+			})
+		]
+	}), /* @__PURE__ */ jsx("span", {
+		role: "status",
+		"aria-live": "polite",
+		className: Switch_module_default.srOnly,
+		children: busyText
+	})] });
+});
+export { Switch };

package/dist/components/Switch/Switch.module.js

@@ -0,0 +1,31 @@
+import "./Switch.css";
+// src/components/Switch/Switch.module.scss
+var wrapper = "Switch__wrapper__gNIox";
+var input = "Switch__input__yjPoY";
+var track = "Switch__track__5Judy";
+var thumb = "Switch__thumb__Bs7bV";
+var sizeSm = "Switch__sizeSm__3i7xK";
+var sizeMd = "Switch__sizeMd__zlier";
+var sizeLg = "Switch__sizeLg__3E6pU";
+var label = "Switch__label__zPn4p";
+var labelSm = "Switch__labelSm__KDmDC";
+var labelMd = "Switch__labelMd__o7Yq9";
+var labelLg = "Switch__labelLg__1sBPw";
+var spin = "Switch__spin__-Edi6";
+var srOnly = "Switch__srOnly__rkrAo";
+var Switch_module_default = {
+	wrapper,
+	input,
+	track,
+	thumb,
+	sizeSm,
+	sizeMd,
+	sizeLg,
+	label,
+	labelSm,
+	labelMd,
+	labelLg,
+	spin,
+	srOnly
+};
+export { Switch_module_default as default, input, label, labelLg, labelMd, labelSm, sizeLg, sizeMd, sizeSm, spin, srOnly, thumb, track, wrapper };

package/dist/components/Switch/index.d.ts

@@ -0,0 +1,2 @@
+export { Switch } from './Switch.js';
+export type { SwitchProps, SwitchSize, SwitchTone } from './Switch.js';

package/dist/components/Table/Table.css

@@ -0,0 +1,245 @@
+:root {
+  --table-fg: var(--color-table-fg);
+  --table-bg: var(--color-table-bg);
+  --table-border-color: var(--color-table-border);
+  --table-header-bg: var(--color-table-header-bg);
+  --table-header-bg-hover: var(--color-table-header-bg-hover);
+  --table-header-fg: var(--color-table-header-fg);
+  --table-header-fg-hover: var(--color-fg);
+  --table-header-font-weight: var(--font-weight-semibold);
+  --table-footer-bg: var(--color-table-header-bg);
+  --table-row-bg-striped: var(--color-table-row-bg-striped);
+  --table-row-bg-hover: var(--color-table-row-bg-hover);
+  --table-row-bg-selected: var(--color-table-row-bg-selected);
+  --table-row-fg-selected: var(--color-table-row-fg-selected);
+  --table-caption-fg: var(--color-table-caption-fg);
+  --table-caption-font-size: var(--font-size-sm);
+  --table-caption-padding-y: var(--space-2);
+  --table-caption-padding-x: var(--space-3);
+  --table-density-comfortable-padding-y: var(--space-2);
+  --table-density-comfortable-padding-x: var(--space-3);
+  --table-density-comfortable-font-size: var(--font-size-md);
+  --table-density-dense-padding-y: var(--space-1);
+  --table-density-dense-padding-x: var(--space-2);
+  --table-density-dense-font-size: var(--font-size-sm);
+  --table-th-inner-gap: var(--space-1);
+  --table-sort-icon-fg: var(--color-table-header-fg);
+  --table-sort-icon-fg-active: var(--color-table-fg);
+  --table-sortable-ring: var(--ring-accent);
+  --table-cell-bg-danger: var(--color-danger-bg-subtle);
+  --table-cell-fg-danger: var(--color-danger);
+  --table-cell-bg-accent: var(--color-accent-bg-subtle);
+  --table-cell-fg-accent: var(--color-accent);
+  --table-cell-tone-header-radius: var(--radius-md);
+  --table-cell-link-bg-hover: color-mix(in srgb, var(--color-bg-overlay) 25%, transparent);
+  --table-cell-fg-danger-hover: var(--color-danger-hover);
+  --table-cell-fg-accent-hover: var(--color-accent-hover);
+  --table-cell-link-ring: var(--ring-accent);
+  --table-cell-link-font-weight: var(--font-weight-semibold);
+}
+
+.Table__scrollWrap__Qh9vw {
+  width: 100%;
+  overflow-x: auto;
+}
+
+.Table__table___hVNP {
+  min-width: 100%;
+  border-collapse: collapse;
+  font-family: inherit;
+  color: var(--table-fg);
+  background: var(--table-bg);
+}
+
+.Table__layoutFixed__Uwcdz {
+  table-layout: fixed;
+  width: 100%;
+}
+
+.Table__density-comfortable__O7Iq8 .Table__td__5ehjm,
+.Table__density-comfortable__O7Iq8 .Table__th__CetKc {
+  padding: var(--table-density-comfortable-padding-y) var(--table-density-comfortable-padding-x);
+  font-size: var(--table-density-comfortable-font-size);
+}
+
+.Table__density-dense__Vvl8F .Table__td__5ehjm,
+.Table__density-dense__Vvl8F .Table__th__CetKc {
+  padding: var(--table-density-dense-padding-y) var(--table-density-dense-padding-x);
+  font-size: var(--table-density-dense-font-size);
+}
+
+.Table__td__5ehjm:has(> .Table__cellLink__L39oq) {
+  padding: 0;
+}
+
+.Table__density-comfortable__O7Iq8 .Table__cellLink__L39oq {
+  padding: var(--table-density-comfortable-padding-y) var(--table-density-comfortable-padding-x);
+}
+
+.Table__density-dense__Vvl8F .Table__cellLink__L39oq {
+  padding: var(--table-density-dense-padding-y) var(--table-density-dense-padding-x);
+}
+
+.Table__caption__VFUzT {
+  padding: var(--table-caption-padding-y) var(--table-caption-padding-x);
+  color: var(--table-caption-fg);
+  font-size: var(--table-caption-font-size);
+  text-align: start;
+}
+
+.Table__thead__cqF1f .Table__tr__jXQaL {
+  background: var(--table-header-bg);
+}
+
+.Table__tbody__76-ES .Table__tr__jXQaL {
+  background: var(--table-bg);
+  border-bottom: var(--border-width) solid var(--table-border-color);
+}
+
+.Table__tfoot__O8r1M .Table__tr__jXQaL {
+  background: var(--table-footer-bg);
+}
+
+.Table__thead__cqF1f .Table__th__CetKc {
+  border-bottom: var(--border-width) solid var(--table-border-color);
+}
+
+.Table__striped__KNAT7 .Table__tbody__76-ES .Table__tr__jXQaL:nth-of-type(even) {
+  background: var(--table-row-bg-striped);
+}
+
+.Table__hover__sq0b_ .Table__tbody__76-ES .Table__tr__jXQaL:hover {
+  background: var(--table-row-bg-hover);
+}
+
+.Table__bordered__YZtzU .Table__th__CetKc,
+.Table__bordered__YZtzU .Table__td__5ehjm {
+  border: var(--border-width) solid var(--table-border-color);
+}
+
+.Table__tbody__76-ES .Table__tr__jXQaL.Table__selected__-Lspk,
+.Table__striped__KNAT7 .Table__tbody__76-ES .Table__tr__jXQaL.Table__selected__-Lspk,
+.Table__hover__sq0b_ .Table__tbody__76-ES .Table__tr__jXQaL.Table__selected__-Lspk:hover {
+  background: var(--table-row-bg-selected);
+  color: var(--table-row-fg-selected);
+}
+
+.Table__th__CetKc {
+  color: var(--table-header-fg);
+  font-weight: var(--table-header-font-weight);
+  text-transform: none;
+  vertical-align: middle;
+}
+
+.Table__td__5ehjm {
+  vertical-align: middle;
+}
+
+.Table__thInner__6bcmR {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--table-th-inner-gap);
+}
+
+.Table__align-start__UXny9 {
+  text-align: start;
+}
+
+.Table__align-center__1z65S {
+  text-align: center;
+}
+
+.Table__align-end__a0CpV {
+  text-align: end;
+}
+
+.Table__align-end__a0CpV .Table__thInner__6bcmR {
+  flex-direction: row-reverse;
+}
+
+.Table__sortable__feJsS {
+  cursor: pointer;
+  user-select: none;
+}
+.Table__sortable__feJsS:hover {
+  background: var(--table-header-bg-hover);
+  color: var(--table-header-fg-hover);
+}
+.Table__sortable__feJsS:focus-visible {
+  outline: var(--ring-width) solid var(--table-sortable-ring);
+  outline-offset: calc(-1 * var(--ring-offset));
+}
+
+.Table__sortIcon__OdSDO {
+  flex-shrink: 0;
+  color: var(--table-sort-icon-fg);
+}
+
+.Table__sortable__feJsS:not(.Table__sortableInactive__a1M1e) .Table__sortIcon__OdSDO {
+  color: var(--table-sort-icon-fg-active);
+}
+
+.Table__td__5ehjm[data-tone=danger],
+.Table__th__CetKc[data-tone=danger] {
+  background: var(--table-cell-bg-danger);
+  color: var(--table-cell-fg-danger);
+}
+
+.Table__td__5ehjm[data-tone=accent],
+.Table__th__CetKc[data-tone=accent] {
+  background: var(--table-cell-bg-accent);
+  color: var(--table-cell-fg-accent);
+}
+
+.Table__th__CetKc[data-tone] {
+  border-start-start-radius: var(--table-cell-tone-header-radius);
+  border-start-end-radius: var(--table-cell-tone-header-radius);
+}
+
+.Table__bordered__YZtzU .Table__th__CetKc[data-tone] {
+  border-radius: 0;
+}
+
+.Table__cellLink__L39oq {
+  display: block;
+  color: inherit;
+  font-weight: var(--table-cell-link-font-weight);
+  text-decoration: none;
+}
+.Table__cellLink__L39oq:hover {
+  --text-fg-muted: currentColor;
+  --text-fg-subtle: currentColor;
+  background: var(--table-cell-link-bg-hover);
+}
+.Table__cellLink__L39oq:focus-visible {
+  outline: var(--ring-width) solid var(--table-cell-link-ring);
+  outline-offset: calc(-1 * var(--ring-offset));
+}
+
+[data-tone=danger] > .Table__cellLink__L39oq:hover {
+  color: var(--table-cell-fg-danger-hover);
+}
+
+[data-tone=accent] > .Table__cellLink__L39oq:hover {
+  color: var(--table-cell-fg-accent-hover);
+}
+
+:where(.Table__stickyHeader__kwveZ .Table__thead__cqF1f) .Table__th__CetKc {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  background: var(--table-header-bg);
+}
+
+.Table__truncate__WHroM {
+  max-width: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.Table__truncate__WHroM > .Table__cellLink__L39oq {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}

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

@@ -0,0 +1,149 @@
+import { type ComponentPropsWithoutRef, type ComponentPropsWithRef, type ElementType, type HTMLAttributes, type ReactElement, type ReactNode, type TdHTMLAttributes, type ThHTMLAttributes } from 'react';
+/** Row height + cell padding scale. */
+export type TableDensity = 'comfortable' | 'dense';
+/** Header-cell text alignment. */
+export type TableCellAlign = 'start' | 'center' | 'end';
+/** Sort state for a header cell. */
+export type TableSortDirection = 'asc' | 'desc' | 'none';
+/** Column-layout algorithm for the `<table>`. */
+export type TableLayout = 'auto' | 'fixed';
+/** Background tint + text colour for a cell or header cell. */
+export type TableCellTone = 'danger' | 'accent';
+export interface TableProps extends Omit<HTMLAttributes<HTMLTableElement>, 'children'> {
+    /**
+     * Row height + cell padding scale. Defaults to `'comfortable'`.
+     * - `'comfortable'` — 32px row, 12px horiz padding, font-size-md.
+     * - `'dense'`       — 24px row, 8px horiz padding, font-size-sm.
+     */
+    density?: TableDensity;
+    /** Zebra-striped body rows (even rows tinted). Defaults to `false`. */
+    striped?: boolean;
+    /**
+     * Full-grid borders — outer border + vertical borders between every cell
+     * on top of the existing horizontal row dividers. Defaults to `false`
+     * (Atlassian-style minimal: header underline + row dividers only).
+     */
+    bordered?: boolean;
+    /**
+     * Hover highlight on body rows. Defaults to `false` — turn on when the
+     * table represents a list of clickable / selectable items (a row a user
+     * is likely to act on). Leave off for read-only data displays where the
+     * hover affordance would suggest interactivity that isn't there.
+     */
+    hover?: boolean;
+    /**
+     * `position: sticky` on the header so it stays visible while body
+     * scrolls. Requires a scrollable ancestor — the default `scroll`
+     * wrapper provides one. Defaults to `false`.
+     */
+    stickyHeader?: boolean;
+    /**
+     * When `true` (default), the `<table>` is wrapped in a `<div>` with
+     * `overflow-x: auto` so wide tables scroll horizontally inside their
+     * container. Set to `false` to render a bare `<table>` — the consumer
+     * manages their own scroll context.
+     */
+    scroll?: boolean;
+    /**
+     * Column-layout algorithm. Defaults to `'auto'`.
+     * - `'auto'`  — columns size to their content (native default).
+     * - `'fixed'` — `table-layout: fixed`: widths come from a native
+     *   `<colgroup><col style={{ width }} /></colgroup>` (or the first row), and
+     *   unsized columns split the rest equally. Use for grids of equal-width
+     *   number columns.
+     */
+    layout?: TableLayout;
+    /** Compound-subcomponent children. */
+    children?: ReactNode;
+}
+export interface TableCaptionProps extends HTMLAttributes<HTMLTableCaptionElement> {
+    children: ReactNode;
+}
+export interface TableSectionProps extends HTMLAttributes<HTMLTableSectionElement> {
+    children: ReactNode;
+}
+export interface TableRowProps extends HTMLAttributes<HTMLTableRowElement> {
+    /**
+     * Visual selected state. Pair with the consumer's own selection logic.
+     * Adds `aria-selected="true"` and a subtle accent tint that wins over
+     * hover/striped.
+     */
+    selected?: boolean;
+    children: ReactNode;
+}
+export interface TableHeaderCellProps extends Omit<ThHTMLAttributes<HTMLTableCellElement>, 'align' | 'scope'> {
+    /** Text alignment. Defaults to `'start'`. */
+    align?: TableCellAlign;
+    /**
+     * Native HTML `<th scope>` attribute. Defaults to `'col'` (the cell labels
+     * its column). Use `'row'` for the leftmost cell that labels its row when
+     * rendering row-headers inside `<Table.Body>`. `'colgroup'` / `'rowgroup'`
+     * are valid HTML but rarely needed in practice.
+     */
+    scope?: 'col' | 'row' | 'colgroup' | 'rowgroup';
+    /**
+     * When set, the cell renders a sort indicator (up/down/unsorted chevron)
+     * and sets `aria-sort`. The consumer drives interactivity via `onClick`;
+     * this primitive only paints the indicator. Sortable headers also become
+     * keyboard-reachable (`tabIndex={0}` + Enter/Space → `onClick`).
+     * - `'asc'`  → up chevron + `aria-sort="ascending"`.
+     * - `'desc'` → down chevron + `aria-sort="descending"`.
+     * - `'none'` → muted up/down chevron + `aria-sort="none"`.
+     * Omit to render a non-sortable header (no chevron, no `aria-sort`).
+     */
+    sortDirection?: TableSortDirection;
+    /**
+     * Tints the header cell (top corners rounded, square under `bordered`) so a toned column reads as one
+     * band with its toned body cells. Exposed as `data-tone`. Default: none.
+     * - `'danger'` — overdue / at-risk column.
+     * - `'accent'` — the current / highlighted column (e.g. "Today").
+     */
+    tone?: TableCellTone;
+    children?: ReactNode;
+}
+export interface TableCellProps extends Omit<TdHTMLAttributes<HTMLTableCellElement>, 'align'> {
+    /** Text alignment. Defaults to `'start'`. */
+    align?: TableCellAlign;
+    /**
+     * Suppress wrapping and ellipsize on overflow. Requires a constrained
+     * cell width (column-level CSS or `style={{ maxWidth: … }}`).
+     */
+    truncate?: boolean;
+    /**
+     * Tints the cell background and colours its text. Exposed as `data-tone`.
+     * Default: none. Set it on every cell of the column (header included).
+     * - `'danger'` — overdue / at-risk column.
+     * - `'accent'` — the current / highlighted column (e.g. "Today").
+     */
+    tone?: TableCellTone;
+    children?: ReactNode;
+}
+interface TableCellLinkOwnProps {
+    children?: ReactNode;
+}
+/**
+ * Public `Table.CellLink` prop type. Generic `C` defaults to `'a'`; pass
+ * `as={RouterLink}` to get that component's props (`to`, …) with inference.
+ */
+export type TableCellLinkProps<C extends ElementType = 'a'> = TableCellLinkOwnProps & {
+    /** Element or component to render. Defaults to `'a'`; use for router links. */
+    as?: C;
+} & Omit<ComponentPropsWithoutRef<C>, keyof TableCellLinkOwnProps | 'as'>;
+type TableCellLinkComponent = <C extends ElementType = 'a'>(props: TableCellLinkProps<C> & {
+    ref?: ComponentPropsWithRef<C>['ref'];
+}) => ReactElement | null;
+/**
+ * Compound `<Table>` family; subcomponents are attached as `Table.Body` etc.
+ * @see docs/components/Table.md
+ */
+export declare const Table: import("react").ForwardRefExoticComponent<TableProps & import("react").RefAttributes<HTMLTableElement>> & {
+    Caption: import("react").ForwardRefExoticComponent<TableCaptionProps & import("react").RefAttributes<HTMLTableCaptionElement>>;
+    Header: import("react").ForwardRefExoticComponent<TableSectionProps & import("react").RefAttributes<HTMLTableSectionElement>>;
+    Body: import("react").ForwardRefExoticComponent<TableSectionProps & import("react").RefAttributes<HTMLTableSectionElement>>;
+    Footer: import("react").ForwardRefExoticComponent<TableSectionProps & import("react").RefAttributes<HTMLTableSectionElement>>;
+    Row: import("react").ForwardRefExoticComponent<TableRowProps & import("react").RefAttributes<HTMLTableRowElement>>;
+    HeaderCell: import("react").ForwardRefExoticComponent<TableHeaderCellProps & import("react").RefAttributes<HTMLTableCellElement>>;
+    Cell: import("react").ForwardRefExoticComponent<TableCellProps & import("react").RefAttributes<HTMLTableCellElement>>;
+    CellLink: TableCellLinkComponent;
+};
+export {};

package/dist/components/Table/Table.js

@@ -0,0 +1,136 @@
+'use client';
+import Table_module_default from "./Table.module.js";
+import { forwardRef } from "react";
+import clsx from "clsx";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronDown, ChevronUp, ChevronsUpDown } from "lucide-react";
+// src/components/Table/Table.tsx
+var sortAriaFor = {
+	asc: "ascending",
+	desc: "descending",
+	none: "none"
+};
+/**
+* Tabular data primitive with a compound API (`Table.Header`, `Table.Body`, `Table.Row`, `Table.Cell`, ...) over native table elements.
+* @see docs/components/Table.md
+*/
+var TableRoot = forwardRef(function TableRoot({ density = "comfortable", striped, bordered, hover = false, stickyHeader, scroll = true, layout = "auto", className, children, ...props }, ref) {
+	const table = /* @__PURE__ */ jsx("table", {
+		ref,
+		className: clsx(Table_module_default.table, Table_module_default[`density-${density}`], striped && Table_module_default.striped, bordered && Table_module_default.bordered, hover && Table_module_default.hover, stickyHeader && Table_module_default.stickyHeader, layout === "fixed" && Table_module_default.layoutFixed, className),
+		...props,
+		children
+	});
+	if (!scroll) return table;
+	return /* @__PURE__ */ jsx("div", {
+		className: Table_module_default.scrollWrap,
+		children: table
+	});
+});
+var TableCaption = forwardRef(function TableCaption({ className, children, ...props }, ref) {
+	return /* @__PURE__ */ jsx("caption", {
+		ref,
+		className: clsx(Table_module_default.caption, className),
+		...props,
+		children
+	});
+});
+var TableHeader = forwardRef(function TableHeader({ className, children, ...props }, ref) {
+	return /* @__PURE__ */ jsx("thead", {
+		ref,
+		className: clsx(Table_module_default.thead, className),
+		...props,
+		children
+	});
+});
+var TableBody = forwardRef(function TableBody({ className, children, ...props }, ref) {
+	return /* @__PURE__ */ jsx("tbody", {
+		ref,
+		className: clsx(Table_module_default.tbody, className),
+		...props,
+		children
+	});
+});
+var TableFooter = forwardRef(function TableFooter({ className, children, ...props }, ref) {
+	return /* @__PURE__ */ jsx("tfoot", {
+		ref,
+		className: clsx(Table_module_default.tfoot, className),
+		...props,
+		children
+	});
+});
+var TableRow = forwardRef(function TableRow({ selected, className, children, ...props }, ref) {
+	return /* @__PURE__ */ jsx("tr", {
+		ref,
+		"aria-selected": selected || void 0,
+		className: clsx(Table_module_default.tr, selected && Table_module_default.selected, className),
+		...props,
+		children
+	});
+});
+var TableHeaderCell = forwardRef(function TableHeaderCell({ align = "start", sortDirection, tone, scope = "col", className, children, onKeyDown, tabIndex, ...props }, ref) {
+	const sortable = sortDirection != null;
+	const SortIcon = sortDirection === "asc" ? ChevronUp : sortDirection === "desc" ? ChevronDown : ChevronsUpDown;
+	const handleKeyDown = (e) => {
+		onKeyDown?.(e);
+		if (!sortable || e.defaultPrevented) return;
+		if (e.key === "Enter" || e.key === " ") {
+			e.preventDefault();
+			e.currentTarget.click();
+		}
+	};
+	return /* @__PURE__ */ jsx("th", {
+		ref,
+		scope,
+		"data-tone": tone,
+		"aria-sort": sortable ? sortAriaFor[sortDirection] : void 0,
+		tabIndex: sortable ? tabIndex ?? 0 : tabIndex,
+		onKeyDown: sortable ? handleKeyDown : onKeyDown,
+		className: clsx(Table_module_default.th, Table_module_default[`align-${align}`], sortable && Table_module_default.sortable, sortable && sortDirection === "none" && Table_module_default.sortableInactive, className),
+		...props,
+		children: /* @__PURE__ */ jsxs("span", {
+			className: Table_module_default.thInner,
+			children: [children != null && /* @__PURE__ */ jsx("span", { children }), sortable && /* @__PURE__ */ jsx(SortIcon, {
+				size: 12,
+				"aria-hidden": "true",
+				className: Table_module_default.sortIcon
+			})]
+		})
+	});
+});
+var TableCell = forwardRef(function TableCell({ align = "start", truncate, tone, className, children, ...props }, ref) {
+	return /* @__PURE__ */ jsx("td", {
+		ref,
+		"data-tone": tone,
+		className: clsx(Table_module_default.td, Table_module_default[`align-${align}`], truncate && Table_module_default.truncate, className),
+		...props,
+		children
+	});
+});
+/**
+* Full-cell link inside `Table.Cell`: takes over the cell's padding so the whole cell is the hit area.
+* @see docs/components/Table.md
+*/
+var TableCellLink = forwardRef(function TableCellLink({ as, className, children, ...props }, ref) {
+	return /* @__PURE__ */ jsx(as || "a", {
+		ref,
+		...props,
+		className: clsx(Table_module_default.cellLink, className),
+		children
+	});
+});
+/**
+* Compound `<Table>` family; subcomponents are attached as `Table.Body` etc.
+* @see docs/components/Table.md
+*/
+var Table = Object.assign(TableRoot, {
+	Caption: TableCaption,
+	Header: TableHeader,
+	Body: TableBody,
+	Footer: TableFooter,
+	Row: TableRow,
+	HeaderCell: TableHeaderCell,
+	Cell: TableCell,
+	CellLink: TableCellLink
+});
+export { Table };