@lutra-ui-system/react 0.1.0

package/dist/components/table/table.d.ts

@@ -0,0 +1,251 @@
+import type { HTMLAttributes, ReactNode, TableHTMLAttributes, TdHTMLAttributes, ThHTMLAttributes } from 'react';
+/** Horizontal alignment of a cell's content. Maps to the `align` axis of the Figma component sets. */
+export type TableAlign = 'left' | 'right';
+/**
+ * A column header's sort state.
+ *
+ * **Mind the vocabulary — two of these read like their opposite.**
+ *
+ * - `'not-sortable'` is a plain header with no sort control and **no `aria-sort` at all**.
+ * - `'unsorted'` is sortable but not currently sorted, which is what ARIA calls `aria-sort="none"`.
+ *
+ * The Figma values were renamed in August 2026 for exactly this reason: the old `sort=none` read as
+ * the ARIA value and meant the opposite of it. Do not map `not-sortable` onto `aria-sort="none"`.
+ */
+export type TableSortState = 'not-sortable' | 'unsorted' | 'ascending' | 'descending';
+type TableBaseProps = Omit<TableHTMLAttributes<HTMLTableElement>, 'children'> & {
+    /** `thead` and `tbody`. Write them yourself — the column count is yours, not this component's. */
+    children: ReactNode;
+    /**
+     * Text announced when the horizontal scroll region is reachable. Defaults to the caption when the
+     * caption is a plain string.
+     *
+     * A focusable region with no name announces nothing, so this matters only when the table
+     * overflows — which is exactly when the region becomes focusable.
+     */
+    scrollRegionLabel?: string;
+    /**
+     * A polite live region above the table, for the new result count after sorting, filtering or
+     * paginating.
+     *
+     * Each of those replaces the contents underneath someone who may not be looking at them, and the
+     * visual change alone is silent. It is rendered visibly as well as announced, because a result
+     * count is useful to everyone.
+     */
+    status?: ReactNode;
+    /** Extra class on the table element. */
+    className?: string;
+};
+/**
+ * Content that actually renders.
+ *
+ * `ReactNode` admits `null`, `undefined`, `false` and `true`, all of which render nothing. A caption
+ * typed as `ReactNode` would let `caption={undefined}` satisfy the naming requirement while naming
+ * the table with nothing, which is the failure this type exists to prevent.
+ */
+type RenderableNode = Exclude<ReactNode, boolean | null | undefined>;
+/**
+ * A table is named, or it is unnavigable. Two unnamed tables on one page are indistinguishable in a
+ * screen reader's table list, so the type insists on exactly one of the two ways of naming it — and
+ * on the caption branch carrying something that renders.
+ */
+type TableNaming = {
+    /** A real `<caption>`. */
+    caption: RenderableNode;
+    labelledBy?: never;
+} | {
+    caption?: never;
+    /** The id of the heading that names this table. */
+    labelledBy: string;
+};
+export type TableProps = TableBaseProps & TableNaming;
+/**
+ * A table of records compared across the same set of attributes.
+ *
+ * **Native `table`, `thead`, `tbody`, `tr`, `th` and `td` throughout.** Those give row and column
+ * navigation for free; a grid of divs with roles bolted on does not survive contact with reality.
+ * This component supplies the wrapper, the name, the scroll region and the live region — the rows and
+ * columns are yours to write, because the column count differs on every screen.
+ *
+ * When the columns no longer fit, the table scrolls sideways inside a region that becomes focusable
+ * so it can be reached without a pointer. Rows are never collapsed into stacked cards: that destroys
+ * the comparison the table exists to support, and the semantics with it.
+ */
+export declare function Table({ children, caption, labelledBy, scrollRegionLabel, status, className, ...forwarded }: TableProps): import("react").JSX.Element;
+export interface TableRowProps extends HTMLAttributes<HTMLTableRowElement> {
+    /**
+     * Tints the row to show it is selected.
+     *
+     * **The tint is the secondary cue.** The checked box in the selection cell is the primary one, so
+     * selection survives greyscale, high-contrast modes and a printed page.
+     *
+     * @default false
+     */
+    selected?: boolean;
+    children: ReactNode;
+}
+/**
+ * One row. Renders a native `<tr>`.
+ *
+ * It exists because the row carries styling — the divider, the hover tint and the selected tint —
+ * and the library's stylesheet rules forbid reaching for a bare element selector to apply it. It adds
+ * nothing to the semantics a `<tr>` already has.
+ *
+ * **The row itself stays inert.** There is no row-level click handler and no row-level selection:
+ * clicking the row background does nothing, because a row that responds to clicks competes with the
+ * controls inside it and is invisible to the keyboard.
+ */
+export declare function TableRow({ selected, children, className, ...nativeProps }: TableRowProps): import("react").JSX.Element;
+/**
+ * Native `<th>` attributes, minus the three this component owns.
+ *
+ * `aria-sort` is excluded deliberately: it is derived from `sort` and nothing else, so a consumer
+ * cannot set it to something the rendered glyph contradicts. The whole point of the single `sort`
+ * value is that the attribute and the indicator cannot disagree, and a passthrough would have handed
+ * that back. `scope` is always `col` here, and `children` is typed per variant below.
+ */
+type HeaderCellBase = Omit<ThHTMLAttributes<HTMLTableCellElement>, 'scope' | 'children' | 'aria-sort'> & {
+    /** @default 'left' */
+    align?: TableAlign;
+    className?: string;
+};
+type NotSortableHeaderCell = HeaderCellBase & {
+    /** @default 'not-sortable' */
+    sort?: 'not-sortable';
+    onSort?: never;
+    sortActionLabel?: never;
+    children: ReactNode;
+};
+type SortableHeaderCell = HeaderCellBase & {
+    sort: Exclude<TableSortState, 'not-sortable'>;
+    /** Called when the sort button is activated. */
+    onSort: () => void;
+    /**
+     * Overrides the sort button's accessible name. The default says what activating it will do,
+     * including the column: `"Applicant, sort ascending"`.
+     */
+    sortActionLabel?: string;
+    /**
+     * The column label. A plain string when the column is sortable, because it is also read into the
+     * sort button's accessible name.
+     */
+    children: string;
+};
+export type TableHeaderCellProps = NotSortableHeaderCell | SortableHeaderCell;
+/**
+ * A column header. Renders `<th scope="col">`.
+ *
+ * **A sortable header contains a button; the `th` is not itself clickable.** A clickable `th` is not
+ * an interactive element to anything but a mouse.
+ *
+ * `sort` drives the `aria-sort` attribute and the visible glyph together, from one value, so the two
+ * cannot drift apart — the pair is a single state, not two props to keep in step. `not-sortable`
+ * renders no button and no `aria-sort` at all.
+ *
+ * The button's accessible name says what activating it will do, including the column name:
+ * `"Applicant, sort ascending"`. A column heading is not automatically part of a button's name, so
+ * "sort" on its own would leave a screen-reader user with a list of identical buttons.
+ *
+ * Sort one column at a time. Multi-column sort needs a control outside the table.
+ */
+export declare function TableHeaderCell(props: TableHeaderCellProps): import("react").JSX.Element;
+export interface TableCellProps extends TdHTMLAttributes<HTMLTableCellElement> {
+    /** @default 'left' */
+    align?: TableAlign;
+    /**
+     * `'strong'` marks the cell that identifies the row, and **renders a `<th scope="row">` rather than
+     * a `<td>`**. That is what lets a screen reader announce the applicant's name as someone moves
+     * across the row. One per row.
+     *
+     * `'muted'` is for secondary attributes that should not compete with the identifying cell.
+     *
+     * @default 'default'
+     */
+    emphasis?: 'default' | 'strong' | 'muted';
+    children?: ReactNode;
+}
+/**
+ * One value in a row. Renders a `<td>`, or a `<th scope="row">` when `emphasis="strong"`.
+ *
+ * `align="right"` sets the cell in tabular figures with `font-variant-numeric: tabular-nums`, so
+ * digits align column-wise. Figma cannot express the OpenType feature, so the design silently depends
+ * on this — which is why it is bound to the alignment rather than left to be remembered.
+ */
+export declare function TableCell({ align, emphasis, children, className, ...nativeProps }: TableCellProps): import("react").JSX.Element;
+export interface TableSelectionCellProps extends Omit<TdHTMLAttributes<HTMLTableCellElement>, 'onChange'> {
+    /**
+     * The checkbox's accessible name, identifying the record: `"Select Amara Osei"`. Rendered
+     * visually hidden, because the column has no visible header text to borrow.
+     *
+     * "Select" alone leaves a screen-reader user with a column of identical checkboxes.
+     */
+    label: string;
+    checked: boolean;
+    /**
+     * The header's select-all shows mixed when the selection is partial. Uses the DOM `indeterminate`
+     * property, which is the only place that state exists.
+     *
+     * @default false
+     */
+    indeterminate?: boolean;
+    onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    disabled?: boolean;
+    /** Renders `<th scope="col">` for the select-all cell in the header row. @default false */
+    header?: boolean;
+}
+/**
+ * The cell holding a row's selection checkbox, or the select-all in the header row.
+ *
+ * Add selection only when the table has a bulk action to apply to it.
+ *
+ * The checkbox communicates selection; the row tint on `TableRow` is supplemental and must never be
+ * the only cue. The label is visually hidden rather than absent, and native — a `<label>` wrapping
+ * the control, not an `aria-label` — because the column has no visible header text to borrow.
+ */
+export declare function TableSelectionCell({ label, checked, indeterminate, onChange, disabled, header, className, ...nativeProps }: TableSelectionCellProps): import("react").JSX.Element;
+export interface TableRowActionsProps extends TdHTMLAttributes<HTMLTableCellElement> {
+    /**
+     * The controls. One visible action plus an overflow menu is the budget — each control is its own
+     * tab stop, so ten rows with two controls each costs twenty of them.
+     *
+     * An icon-only control needs a name identifying the record: `"More actions for Amara Osei"`, not
+     * `"More"`. A screen reader does not read the column heading as part of a button's name.
+     */
+    children: ReactNode;
+}
+/**
+ * The last cell in a row, holding that row's actions. Renders a `<td>`.
+ *
+ * **The controls stay visually compact, and their pointer targets do not.** Each control gets an
+ * invisible 44 × 44px target that expands into the cell's padding rather than adding to the row
+ * height, so a dense table keeps its 52px rows while every target still meets the minimum.
+ *
+ * **Never reveal row actions on hover only.** Keyboard and touch users have no hover, so a
+ * hover-revealed action does not exist for them.
+ */
+export declare function TableRowActions({ children, className, ...nativeProps }: TableRowActionsProps): import("react").JSX.Element;
+export interface TableEmptyStateProps {
+    /** How many columns to span. Every column, so the message is not squeezed into the first one. */
+    colSpan: number;
+    /** The headline: why the table is empty. */
+    title: ReactNode;
+    /** What to do about it. */
+    children?: ReactNode;
+    /** The way back — usually a Button that clears the filters. */
+    action?: ReactNode;
+    className?: string;
+}
+/**
+ * The message shown when a table has no rows. Renders a `<tr>` holding one `<td>` that spans every
+ * column, and belongs inside the `tbody`.
+ *
+ * **The table, the `thead` and the column headers stay on the page.** That structure is what someone
+ * has already learned by exploring it; removing it makes an empty result feel like a broken page and
+ * discards the work they have done.
+ *
+ * When a filter is what emptied the table, announce the new result count too — `Table`'s `status`
+ * prop is the polite live region for it. The visual change alone is silent.
+ */
+export declare function TableEmptyState({ colSpan, title, children, action, className, }: TableEmptyStateProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=table.d.ts.map

package/dist/components/table/table.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"table.d.ts","sourceRoot":"","sources":["../../../src/components/table/table.tsx"],"names":[],"mappings":"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"}

package/dist/components/table/table.js

@@ -0,0 +1,209 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { isDevelopment } from '../../internal/development.js';
+import { useIsomorphicLayoutEffect } from '../../internal/isomorphic-layout-effect.js';
+import { Checkbox } from '../checkbox/index.js';
+/** The `aria-sort` value each state carries. `not-sortable` carries none. */
+const ARIA_SORT = {
+    unsorted: 'none',
+    ascending: 'ascending',
+    descending: 'descending',
+};
+/** What activating the button will do next, which is what its accessible name has to say. */
+const NEXT_DIRECTION = {
+    unsorted: 'ascending',
+    ascending: 'descending',
+    descending: 'ascending',
+};
+/**
+ * A table of records compared across the same set of attributes.
+ *
+ * **Native `table`, `thead`, `tbody`, `tr`, `th` and `td` throughout.** Those give row and column
+ * navigation for free; a grid of divs with roles bolted on does not survive contact with reality.
+ * This component supplies the wrapper, the name, the scroll region and the live region — the rows and
+ * columns are yours to write, because the column count differs on every screen.
+ *
+ * When the columns no longer fit, the table scrolls sideways inside a region that becomes focusable
+ * so it can be reached without a pointer. Rows are never collapsed into stacked cards: that destroys
+ * the comparison the table exists to support, and the semantics with it.
+ */
+export function Table({ children, caption, labelledBy, scrollRegionLabel, status, className, ...forwarded }) {
+    // Naming is exactly one of `caption` or `labelledBy`, and the type says so — but `aria-labelledby`
+    // is hyphenated, and TypeScript exempts hyphenated JSX attributes from excess-property checking,
+    // so one can still be passed. It is dropped here so a table cannot end up with two names, one of
+    // which the type believed it had ruled out. Same reasoning as `aria-sort` on TableHeaderCell.
+    const { 'aria-labelledby': _consumerLabelledBy, ...nativeProps } = forwarded;
+    const scrollRef = useRef(null);
+    const [overflowing, setOverflowing] = useState(false);
+    const measure = useCallback(() => {
+        const element = scrollRef.current;
+        if (!element)
+            return;
+        setOverflowing(element.scrollWidth > element.clientWidth);
+    }, []);
+    // The region is focusable only while there is something to scroll. A permanent tab stop in front
+    // of a table that fits is a tab stop that does nothing, and the annotation's reason for making it
+    // focusable — reaching the scroll without a pointer — does not apply when it cannot scroll.
+    useIsomorphicLayoutEffect(measure);
+    useEffect(() => {
+        const element = scrollRef.current;
+        if (!element)
+            return;
+        if (typeof ResizeObserver === 'undefined') {
+            // No ResizeObserver: the window is the only resize signal available, which catches the common
+            // case and misses a container that resizes on its own.
+            window.addEventListener('resize', measure);
+            return () => {
+                window.removeEventListener('resize', measure);
+            };
+        }
+        const observer = new ResizeObserver(measure);
+        observer.observe(element);
+        for (const child of Array.from(element.children))
+            observer.observe(child);
+        return () => {
+            observer.disconnect();
+        };
+    }, [measure]);
+    const regionLabel = scrollRegionLabel ?? (typeof caption === 'string' ? caption : undefined) ?? undefined;
+    if (isDevelopment && overflowing && regionLabel === undefined) {
+        console.warn('Table: the table overflows its container, so its scroll region is focusable — but it has no ' +
+            'accessible name. Pass `scrollRegionLabel`, or a string `caption`. A focusable region with ' +
+            'no name announces nothing.');
+    }
+    return (_jsxs("div", { className: "lutra-table-wrapper", children: [_jsx("div", { className: "lutra-table__status", role: "status", children: status }), _jsx("div", { ref: scrollRef, className: "lutra-table__scroll", "data-overflowing": overflowing ? 'true' : 'false', ...(overflowing
+                    ? {
+                        role: 'region',
+                        tabIndex: 0,
+                        ...(regionLabel === undefined ? {} : { 'aria-label': regionLabel }),
+                    }
+                    : {}), children: _jsxs("table", { ...nativeProps, ...(labelledBy === undefined ? {} : { 'aria-labelledby': labelledBy }), className: className === undefined ? 'lutra-table' : `lutra-table ${className}`, children: [caption !== undefined && _jsx("caption", { className: "lutra-table__caption", children: caption }), children] }) })] }));
+}
+/**
+ * One row. Renders a native `<tr>`.
+ *
+ * It exists because the row carries styling — the divider, the hover tint and the selected tint —
+ * and the library's stylesheet rules forbid reaching for a bare element selector to apply it. It adds
+ * nothing to the semantics a `<tr>` already has.
+ *
+ * **The row itself stays inert.** There is no row-level click handler and no row-level selection:
+ * clicking the row background does nothing, because a row that responds to clicks competes with the
+ * controls inside it and is invisible to the keyboard.
+ */
+export function TableRow({ selected = false, children, className, ...nativeProps }) {
+    return (_jsx("tr", { ...nativeProps, className: className === undefined ? 'lutra-table-row' : `lutra-table-row ${className}`, ...(selected ? { 'data-selected': 'true' } : {}), children: children }));
+}
+function SortIcon({ state }) {
+    // A distinct glyph per state, so direction never depends on colour or on remembering which way the
+    // arrow pointed last time.
+    return (_jsxs("svg", { className: "lutra-table-header-cell__sort-icon", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "2", "aria-hidden": "true", focusable: "false", "data-state": state, children: [state === 'unsorted' && (_jsxs(_Fragment, { children: [_jsx("path", { d: "M5 6.5L8 3.5l3 3", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M5 9.5l3 3 3-3", strokeLinecap: "round", strokeLinejoin: "round" })] })), state === 'ascending' && (_jsx("path", { d: "M4 10l4-4 4 4", strokeLinecap: "round", strokeLinejoin: "round" })), state === 'descending' && (_jsx("path", { d: "M4 6l4 4 4-4", strokeLinecap: "round", strokeLinejoin: "round" }))] }));
+}
+/**
+ * A column header. Renders `<th scope="col">`.
+ *
+ * **A sortable header contains a button; the `th` is not itself clickable.** A clickable `th` is not
+ * an interactive element to anything but a mouse.
+ *
+ * `sort` drives the `aria-sort` attribute and the visible glyph together, from one value, so the two
+ * cannot drift apart — the pair is a single state, not two props to keep in step. `not-sortable`
+ * renders no button and no `aria-sort` at all.
+ *
+ * The button's accessible name says what activating it will do, including the column name:
+ * `"Applicant, sort ascending"`. A column heading is not automatically part of a button's name, so
+ * "sort" on its own would leave a screen-reader user with a list of identical buttons.
+ *
+ * Sort one column at a time. Multi-column sort needs a control outside the table.
+ */
+export function TableHeaderCell(props) {
+    const { align = 'left', sort = 'not-sortable', className, children, ...forwarded } = props;
+    // `aria-sort` is dropped before anything is forwarded, and the type alone cannot do this job.
+    // TypeScript exempts **hyphenated** JSX attributes from excess-property checking, so
+    // `<TableHeaderCell aria-sort="…">` type-checks even though the props type omits it — the omission
+    // only bites when props are built as an object first. Since the attribute is derived from `sort`,
+    // a forwarded one would land on a plain header and contradict the glyph on a sorted one.
+    const { 'aria-sort': _consumerAriaSort, ...rest } = forwarded;
+    const shared = {
+        className: className === undefined ? 'lutra-table-header-cell' : `lutra-table-header-cell ${className}`,
+        'data-align': align,
+        scope: 'col',
+    };
+    if (sort === 'not-sortable') {
+        const { onSort: _onSort, sortActionLabel: _sortActionLabel, ...nativeProps } = rest;
+        return (_jsx("th", { ...nativeProps, ...shared, "data-sort": "not-sortable", children: children }));
+    }
+    const { onSort, sortActionLabel, ...nativeProps } = rest;
+    const label = children;
+    return (_jsx("th", { ...nativeProps, ...shared, "data-sort": sort, "aria-sort": ARIA_SORT[sort], children: _jsxs("button", { type: "button", className: "lutra-table-header-cell__button", onClick: onSort, ...(sortActionLabel === undefined ? {} : { 'aria-label': sortActionLabel }), children: [_jsx("span", { className: "lutra-table-header-cell__label", children: label }), _jsx(SortIcon, { state: sort }), _jsx("span", { className: "lutra-table__visually-hidden", children: `, sort ${NEXT_DIRECTION[sort]}` })] }) }));
+}
+/**
+ * One value in a row. Renders a `<td>`, or a `<th scope="row">` when `emphasis="strong"`.
+ *
+ * `align="right"` sets the cell in tabular figures with `font-variant-numeric: tabular-nums`, so
+ * digits align column-wise. Figma cannot express the OpenType feature, so the design silently depends
+ * on this — which is why it is bound to the alignment rather than left to be remembered.
+ */
+export function TableCell({ align = 'left', emphasis = 'default', children, className, ...nativeProps }) {
+    const shared = {
+        className: className === undefined ? 'lutra-table-cell' : `lutra-table-cell ${className}`,
+        'data-align': align,
+        'data-emphasis': emphasis,
+    };
+    if (emphasis === 'strong') {
+        return (_jsx("th", { ...nativeProps, ...shared, scope: "row", children: children }));
+    }
+    return (_jsx("td", { ...nativeProps, ...shared, children: children }));
+}
+/**
+ * The cell holding a row's selection checkbox, or the select-all in the header row.
+ *
+ * Add selection only when the table has a bulk action to apply to it.
+ *
+ * The checkbox communicates selection; the row tint on `TableRow` is supplemental and must never be
+ * the only cue. The label is visually hidden rather than absent, and native — a `<label>` wrapping
+ * the control, not an `aria-label` — because the column has no visible header text to borrow.
+ */
+export function TableSelectionCell({ label, checked, indeterminate = false, onChange, disabled = false, header = false, className, ...nativeProps }) {
+    const shared = {
+        className: className === undefined
+            ? 'lutra-table-selection-cell'
+            : `lutra-table-selection-cell ${className}`,
+    };
+    const control = (_jsxs("label", { className: "lutra-table-selection-cell__label", children: [_jsx(Checkbox, { checked: checked, indeterminate: indeterminate, disabled: disabled, onChange: onChange }), _jsx("span", { className: "lutra-table__visually-hidden", children: label })] }));
+    if (header) {
+        return (_jsx("th", { ...nativeProps, ...shared, scope: "col", children: control }));
+    }
+    return (_jsx("td", { ...nativeProps, ...shared, children: control }));
+}
+/**
+ * The last cell in a row, holding that row's actions. Renders a `<td>`.
+ *
+ * **The controls stay visually compact, and their pointer targets do not.** Each control gets an
+ * invisible 44 × 44px target that expands into the cell's padding rather than adding to the row
+ * height, so a dense table keeps its 52px rows while every target still meets the minimum.
+ *
+ * **Never reveal row actions on hover only.** Keyboard and touch users have no hover, so a
+ * hover-revealed action does not exist for them.
+ */
+export function TableRowActions({ children, className, ...nativeProps }) {
+    return (_jsx("td", { ...nativeProps, className: className === undefined ? 'lutra-table-row-actions' : `lutra-table-row-actions ${className}`, children: _jsx("div", { className: "lutra-table-row-actions__row", children: children }) }));
+}
+function ListIcon() {
+    return (_jsxs("svg", { className: "lutra-table-empty-state__icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", "aria-hidden": "true", focusable: "false", children: [_jsx("path", { d: "M9 6h11M9 12h11M9 18h11", strokeLinecap: "round" }), _jsx("path", { d: "M4 6h.01M4 12h.01M4 18h.01", strokeLinecap: "round" })] }));
+}
+/**
+ * The message shown when a table has no rows. Renders a `<tr>` holding one `<td>` that spans every
+ * column, and belongs inside the `tbody`.
+ *
+ * **The table, the `thead` and the column headers stay on the page.** That structure is what someone
+ * has already learned by exploring it; removing it makes an empty result feel like a broken page and
+ * discards the work they have done.
+ *
+ * When a filter is what emptied the table, announce the new result count too — `Table`'s `status`
+ * prop is the polite live region for it. The visual change alone is silent.
+ */
+export function TableEmptyState({ colSpan, title, children, action, className, }) {
+    return (_jsx("tr", { className: "lutra-table-empty-state", children: _jsx("td", { className: className === undefined
+                ? 'lutra-table-empty-state__cell'
+                : `lutra-table-empty-state__cell ${className}`, colSpan: colSpan, children: _jsxs("div", { className: "lutra-table-empty-state__content", children: [_jsx(ListIcon, {}), _jsx("p", { className: "lutra-table-empty-state__title", children: title }), children !== undefined && children !== null && children !== false && (_jsx("p", { className: "lutra-table-empty-state__body", children: children })), action !== undefined && action !== null && action !== false && (_jsx("div", { className: "lutra-table-empty-state__action", children: action }))] }) }) }));
+}
+//# sourceMappingURL=table.js.map

package/dist/components/table/table.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"table.js","sourceRoot":"","sources":["../../../src/components/table/table.tsx"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,3 @@
+export { Toggle, ToggleItem } from './toggle.js';
+export type { ToggleProps, ToggleItemProps } from './toggle.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/toggle/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/toggle/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AACjD,YAAY,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC"}

package/dist/components/toggle/index.js

@@ -0,0 +1,2 @@
+export { Toggle, ToggleItem } from './toggle.js';
+//# sourceMappingURL=index.js.map

package/dist/components/toggle/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/toggle/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC"}

package/dist/components/toggle/toggle.d.ts

@@ -0,0 +1,66 @@
+import type { InputHTMLAttributes, ReactNode } from 'react';
+/** Native checkbox attributes, minus what this component owns. */
+type NativeToggleProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'role' | 'children' | 'size'>;
+export interface ToggleProps extends NativeToggleProps {
+    /**
+     * Draws the control in its error treatment.
+     *
+     * Visual only. A switch applies immediately, so there is nothing to validate on submit; the state
+     * exists for the rare case where a setting could not be applied and the surrounding field needs to
+     * say so.
+     *
+     * @default false
+     */
+    invalid?: boolean;
+}
+/**
+ * A switch for a setting that applies immediately.
+ *
+ * Renders `<input type="checkbox" role="switch">`. The element is a checkbox because that is the
+ * platform control with the right mechanics — Space toggles it, the label is a click target, it
+ * participates in a form, `checked` works controlled or uncontrolled. `role="switch"` is what
+ * changes how it is announced: "on" and "off" rather than "checked" and "not checked".
+ *
+ * **That distinction is the design contract, not a styling choice.** The accessibility annotation
+ * concluded this component represents an immediate binary setting rather than a checkbox submitted
+ * later with a form, so the semantics follow the behaviour and not the appearance. A checkbox drawn
+ * to look like a switch would announce the wrong thing; a switch used for something that is only
+ * saved on submit would promise the wrong thing.
+ *
+ * **Changes apply immediately.** If applying one can fail — a request that is rejected, a setting
+ * the server refuses — that failure has to be announced by whatever owns the request, because this
+ * component does not model it. There is no pending or error state here, and inventing one would be
+ * inventing a design decision the library has not made.
+ *
+ * **State is never conveyed by colour alone**: the thumb moves, and `role="switch"` puts on/off in
+ * the accessibility tree.
+ *
+ * **Every rendered Toggle must have an accessible name.** Use `ToggleItem` for the ordinary labelled
+ * composition.
+ */
+export declare const Toggle: import("react").ForwardRefExoticComponent<ToggleProps & import("react").RefAttributes<HTMLInputElement>>;
+export interface ToggleItemProps extends ToggleProps {
+    /**
+     * The visible label. It names **the setting**, not its current state — "Email notifications",
+     * never "Notifications are on". The state is already announced by the switch, and a label that
+     * moved with it would contradict itself as soon as it was toggled.
+     */
+    label: ReactNode;
+    /** Supporting text below the label, connected with `aria-describedby`. */
+    description?: ReactNode;
+    /** Extra class on the item wrapper, not on the control. */
+    className?: string;
+}
+/**
+ * A switch with its visible label, and optionally a description.
+ *
+ * The composition the Figma `Toggle Item` component draws: the label leads and the control sits at
+ * the end of the row, which is the opposite of Checkbox Item and Radio Item. That is a settings-list
+ * convention — the name of the setting reads first, and the switches line up down the right edge.
+ *
+ * The label comes before the control in the DOM as well as visually, so reading order, Tab order and
+ * visual order all agree.
+ */
+export declare const ToggleItem: import("react").ForwardRefExoticComponent<ToggleItemProps & import("react").RefAttributes<HTMLInputElement>>;
+export {};
+//# sourceMappingURL=toggle.d.ts.map

package/dist/components/toggle/toggle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toggle.d.ts","sourceRoot":"","sources":["../../../src/components/toggle/toggle.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,mBAAmB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAI5D,kEAAkE;AAClE,KAAK,iBAAiB,GAAG,IAAI,CAC3B,mBAAmB,CAAC,gBAAgB,CAAC,EACrC,MAAM,GAAG,MAAM,GAAG,UAAU,GAAG,MAAM,CACtC,CAAC;AAEF,MAAM,WAAW,WAAY,SAAQ,iBAAiB;IACpD;;;;;;;;OAQG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,eAAO,MAAM,MAAM,0GAgBjB,CAAC;AAEH,MAAM,WAAW,eAAgB,SAAQ,WAAW;IAClD;;;;OAIG;IACH,KAAK,EAAE,SAAS,CAAC;IACjB,0EAA0E;IAC1E,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,2DAA2D;IAC3D,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;GASG;AACH,eAAO,MAAM,UAAU,8GA2CrB,CAAC"}

package/dist/components/toggle/toggle.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { useFieldIds } from '../../internal/field-support.js';
+/**
+ * A switch for a setting that applies immediately.
+ *
+ * Renders `<input type="checkbox" role="switch">`. The element is a checkbox because that is the
+ * platform control with the right mechanics — Space toggles it, the label is a click target, it
+ * participates in a form, `checked` works controlled or uncontrolled. `role="switch"` is what
+ * changes how it is announced: "on" and "off" rather than "checked" and "not checked".
+ *
+ * **That distinction is the design contract, not a styling choice.** The accessibility annotation
+ * concluded this component represents an immediate binary setting rather than a checkbox submitted
+ * later with a form, so the semantics follow the behaviour and not the appearance. A checkbox drawn
+ * to look like a switch would announce the wrong thing; a switch used for something that is only
+ * saved on submit would promise the wrong thing.
+ *
+ * **Changes apply immediately.** If applying one can fail — a request that is rejected, a setting
+ * the server refuses — that failure has to be announced by whatever owns the request, because this
+ * component does not model it. There is no pending or error state here, and inventing one would be
+ * inventing a design decision the library has not made.
+ *
+ * **State is never conveyed by colour alone**: the thumb moves, and `role="switch"` puts on/off in
+ * the accessibility tree.
+ *
+ * **Every rendered Toggle must have an accessible name.** Use `ToggleItem` for the ordinary labelled
+ * composition.
+ */
+export const Toggle = forwardRef(function Toggle({ invalid = false, className, ...nativeProps }, ref) {
+    return (_jsx("input", { ...nativeProps, ref: ref, type: "checkbox", role: "switch", className: className === undefined ? 'lutra-toggle' : `lutra-toggle ${className}`, "data-invalid": invalid ? 'true' : undefined }));
+});
+/**
+ * A switch with its visible label, and optionally a description.
+ *
+ * The composition the Figma `Toggle Item` component draws: the label leads and the control sits at
+ * the end of the row, which is the opposite of Checkbox Item and Radio Item. That is a settings-list
+ * convention — the name of the setting reads first, and the switches line up down the right edge.
+ *
+ * The label comes before the control in the DOM as well as visually, so reading order, Tab order and
+ * visual order all agree.
+ */
+export const ToggleItem = forwardRef(function ToggleItem({ label, description, className, id, disabled = false, 'aria-describedby': describedBy, ...toggleProps }, ref) {
+    const hasDescription = description !== undefined && description !== null && description !== false;
+    const ids = useFieldIds({ id, hasHint: hasDescription, hasError: false, describedBy });
+    return (_jsxs("div", { className: className === undefined
+            ? 'lutra-choice lutra-choice--trailing'
+            : `lutra-choice lutra-choice--trailing ${className}`, "data-disabled": disabled ? 'true' : undefined, children: [_jsxs("div", { className: "lutra-choice__content", children: [_jsx("label", { className: "lutra-choice__label", htmlFor: ids.controlId, children: label }), hasDescription && (_jsx("p", { className: "lutra-choice__description", id: ids.hintId, children: description }))] }), _jsx(Toggle, { ...toggleProps, ref: ref, id: ids.controlId, disabled: disabled, "aria-describedby": ids.describedBy })] }));
+});
+//# sourceMappingURL=toggle.js.map

package/dist/components/toggle/toggle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toggle.js","sourceRoot":"","sources":["../../../src/components/toggle/toggle.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAGnC,OAAO,EAAE,WAAW,EAAE,MAAM,iCAAiC,CAAC;AAqB9D;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,UAAU,CAAgC,SAAS,MAAM,CAC7E,EAAE,OAAO,GAAG,KAAK,EAAE,SAAS,EAAE,GAAG,WAAW,EAAE,EAC9C,GAAG;IAEH,OAAO,CACL,mBACM,WAAW,EACf,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,UAAU,EACf,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,SAAS,KAAK,SAAS,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,gBAAgB,SAAS,EAAE,kBAGnE,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,GAC1C,CACH,CAAC;AACJ,CAAC,CAAC,CAAC;AAeH;;;;;;;;;GASG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,UAAU,CAAoC,SAAS,UAAU,CACzF,EACE,KAAK,EACL,WAAW,EACX,SAAS,EACT,EAAE,EACF,QAAQ,GAAG,KAAK,EAChB,kBAAkB,EAAE,WAAW,EAC/B,GAAG,WAAW,EACf,EACD,GAAG;IAEH,MAAM,cAAc,GAAG,WAAW,KAAK,SAAS,IAAI,WAAW,KAAK,IAAI,IAAI,WAAW,KAAK,KAAK,CAAC;IAClG,MAAM,GAAG,GAAG,WAAW,CAAC,EAAE,EAAE,EAAE,OAAO,EAAE,cAAc,EAAE,QAAQ,EAAE,KAAK,EAAE,WAAW,EAAE,CAAC,CAAC;IAEvF,OAAO,CACL,eACE,SAAS,EACP,SAAS,KAAK,SAAS;YACrB,CAAC,CAAC,qCAAqC;YACvC,CAAC,CAAC,uCAAuC,SAAS,EAAE,mBAEzC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,aAE5C,eAAK,SAAS,EAAC,uBAAuB,aACpC,gBAAO,SAAS,EAAC,qBAAqB,EAAC,OAAO,EAAE,GAAG,CAAC,SAAS,YAC1D,KAAK,GACA,EACP,cAAc,IAAI,CACjB,YAAG,SAAS,EAAC,2BAA2B,EAAC,EAAE,EAAE,GAAG,CAAC,MAAM,YACpD,WAAW,GACV,CACL,IACG,EACN,KAAC,MAAM,OACD,WAAW,EACf,GAAG,EAAE,GAAG,EACR,EAAE,EAAE,GAAG,CAAC,SAAS,EACjB,QAAQ,EAAE,QAAQ,sBACA,GAAG,CAAC,WAAW,GACjC,IACE,CACP,CAAC;AACJ,CAAC,CAAC,CAAC"}

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

@@ -0,0 +1,3 @@
+export { Tooltip } from './tooltip.js';
+export type { TooltipProps, TooltipPlacement, TooltipAlign } from './tooltip.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/tooltip/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/tooltip/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AACvC,YAAY,EAAE,YAAY,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC"}