@milktop/react-ui 0.0.0-stage → 0.1.1

package/dist/stat/Stat.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import 'iconify-icon';
+import { formatNumber } from '../format/format.js';
+import { useLocale, useMessages } from '../format/LocaleProvider.js';
+import { RollingNumber } from '../rolling-number/RollingNumber.js';
+import { cx, partsOf } from '../utils.js';
+import '../theme.css';
+import './stat.css';
+export function Stat({ label = null, value = null, format, animate = false, unit = null, change = null, changeUnit = '%', changeLabel = null, invert = false, help = null, icon = null, variant = 'plain', size = 'md', className, classes, children, ...rest }) {
+    const t = useMessages();
+    const part = partsOf('stat', classes);
+    const direction = change == null || change === 0 ? 'flat' : change > 0 ? 'up' : 'down';
+    const good = direction === 'flat' ? null : (direction === 'up') !== invert;
+    const locale = useLocale();
+    const changeText = `${change != null && change > 0 ? '+' : ''}${change == null ? '' : formatNumber(change, { locale, maximumFractionDigits: 2 })}${changeUnit}`;
+    // A number: formatted, or rolling.
+    const shown = typeof value === 'number'
+        ? animate ? _jsx(RollingNumber, { value: value, format: format, locale: locale }) : formatNumber(value, { ...format, locale })
+        : value;
+    return (_jsxs("div", { ...rest, ...part('root'), className: cx(className, classes?.root), "data-variant": variant, "data-size": size, children: [_jsxs("div", { ...part('header'), children: [_jsx("div", { ...part('label'), children: label }), icon && _jsx("span", { ...part('icon'), "aria-hidden": "true", children: _jsx("iconify-icon", { icon: icon }) })] }), _jsxs("div", { ...part('value'), children: [_jsx("span", { children: shown }), unit && _jsx("span", { ...part('unit'), children: unit })] }), (change != null || changeLabel) && (_jsxs("div", { ...part('footer'), children: [change != null && (_jsxs("span", { ...part('change'), "data-good": good === true || undefined, "data-bad": good === false || undefined, "aria-label": `${direction === 'up' ? t.stat.up : direction === 'down' ? t.stat.down : t.stat.same} ${changeText}`, children: [direction !== 'flat' && _jsx("iconify-icon", { icon: direction === 'down' ? 'lucide:trending-down' : 'lucide:trending-up' }), changeText] })), changeLabel && _jsx("span", { ...part('change-label'), children: changeLabel })] })), help && _jsx("div", { ...part('help'), children: help }), children] }));
+}

package/dist/stat/Stats.d.ts

@@ -0,0 +1,23 @@
+/**
+ * A responsive grid of stats: one column, then two, then `columns`, as its
+ * own width (not the screen's) allows.
+ *
+ *   <Stats variant="cards">
+ *     <Stat label="Students" value={24} />
+ *     <Stat label="Lessons" value={52} />
+ *   </Stats>
+ *
+ * - `columns`: the most per row (4)
+ * - `variant`: 'plain' (default), 'cards' (each stat a card) or 'divided'
+ *   (one card split into cells)
+ */
+import type { HTMLAttributes } from 'react';
+import { type Classes } from '../utils.js';
+import '../theme.css';
+import './stat.css';
+export type StatsProps = HTMLAttributes<HTMLDivElement> & {
+    columns?: number;
+    variant?: 'plain' | 'cards' | 'divided';
+    classes?: Classes<'root' | 'grid'>;
+};
+export declare function Stats({ columns, variant, className, classes, style, children, ...rest }: StatsProps): import("react").JSX.Element;

package/dist/stat/Stats.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cx, partsOf } from '../utils.js';
+import '../theme.css';
+import './stat.css';
+export function Stats({ columns = 4, variant = 'plain', className, classes, style, children, ...rest }) {
+    const part = partsOf('stats', classes);
+    return (_jsx("div", { ...rest, ...part('root'), className: cx(className, classes?.root), "data-variant": variant, style: { ...style, '--columns': columns }, children: _jsx("div", { ...part('grid'), children: children }) }));
+}

package/dist/stat/stat.css

@@ -0,0 +1,34 @@
+@layer ui {
+  [data-scope=stat][data-part=root] {
+    display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; color: var(--ui-text); font-family: var(--ui-font); font-size: 14px;
+    &[data-variant=card] { padding: 1.25rem; border: 1px solid var(--ui-border); border-radius: calc(var(--ui-radius) + 4px);
+      background: var(--ui-surface); box-shadow: var(--ui-card-shadow); }
+  }
+  [data-scope=stat][data-part=header] { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; min-height: 1.5rem; }
+  [data-scope=stat][data-part=label] { color: var(--ui-muted); font-weight: 500; min-width: 0; overflow-wrap: anywhere; }
+  /* Small enough to sit in the label's row without making it taller. */
+  [data-scope=stat][data-part=icon] { display: grid; place-items: center; width: 2rem; height: 2rem; margin: -0.25rem 0; flex-shrink: 0;
+    border-radius: var(--ui-radius); background: var(--ui-accent-soft); color: var(--ui-accent-soft-text); font-size: 16px; }
+  [data-scope=stat][data-part=value] { display: flex; align-items: baseline; gap: 0.25rem; font-size: 24px; font-weight: 700; line-height: 1.2; letter-spacing: -0.01em;
+    [data-size=sm] > & { font-size: 20px; }
+    [data-size=lg] > & { font-size: 30px; } }
+  [data-scope=stat][data-part=unit] { font-size: 14px; font-weight: 500; line-height: 1; color: var(--ui-muted); letter-spacing: 0; }
+  [data-scope=stat][data-part=footer] { display: flex; align-items: center; gap: 0.375rem; flex-wrap: wrap; font-size: 12px; margin-top: 0.125rem; }
+  [data-scope=stat][data-part=change] { display: inline-flex; align-items: center; gap: 0.25rem; font-weight: 600; color: var(--ui-muted);
+    &[data-good] { color: var(--ui-success); }
+    &[data-bad] { color: var(--ui-danger); } }
+  [data-scope=stat][data-part=change-label], [data-scope=stat][data-part=help] { color: var(--ui-muted); }
+  [data-scope=stat][data-part=help] { font-size: 12px; }
+
+  /* Stats respond to their own width: one column, then two, then --columns. */
+  [data-scope=stats][data-part=root] { display: block; width: 100%; container-type: inline-size; }
+  [data-scope=stats][data-part=grid] { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr);
+    [data-variant=cards] > & > [data-scope=stat] { padding: 1.25rem; border: 1px solid var(--ui-border); border-radius: calc(var(--ui-radius) + 4px);
+      background: var(--ui-surface); box-shadow: var(--ui-card-shadow); }
+    /* One card split into cells by 1px gaps over the border colour. */
+    [data-variant=divided] > & { gap: 1px; background: var(--ui-border); border: 1px solid var(--ui-border);
+      border-radius: calc(var(--ui-radius) + 4px); box-shadow: var(--ui-card-shadow); overflow: hidden; }
+    [data-variant=divided] > & > [data-scope=stat] { padding: 1.25rem; background: var(--ui-surface); } }
+  @container (min-width: 26rem) { [data-scope=stats][data-part=grid] { grid-template-columns: repeat(min(2, var(--columns)), minmax(0, 1fr)); } }
+  @container (min-width: 46rem) { [data-scope=stats][data-part=grid] { grid-template-columns: repeat(var(--columns), minmax(0, 1fr)); } }
+}

package/dist/swatch-picker/SwatchPicker.d.ts

@@ -0,0 +1,45 @@
+/**
+ * A choice of colour from a few swatches, e.g. a vet's colour on the
+ * calendar. The swatches are Tailwind's colours by default; their values are
+ * the names ('teal'), or give your own.
+ *
+ *   <SwatchPicker label="Colour" value={color} onValueChange={setColor} />
+ *   <SwatchPicker items={[{ value: 'brand', color: '#e11d48', label: 'Brand' }]} … />
+ *
+ * Arrow keys move between them, like radio buttons (which they are).
+ *
+ * - `items`: colour names from `swatches`, or `{ value, color, label }`
+ *   (the default: every colour in `swatches`)
+ * - `value`, `defaultValue`; `onValueChange`: called with the chosen value
+ * - `label`: a label above it (skipped inside a Field); `size`: 'sm', 'md' or 'lg'
+ * - `variant`: 'inline' (default: the swatches in the page) or 'popover': a
+ *   field showing the chosen colour and its name, opening the swatches
+ *   (closed once one's chosen); `placeholder` shows while none is
+ *
+ * `swatches` is the palette by name (Tailwind's 500s), e.g. for the
+ * CSS colour of a chosen name: `swatches.teal`.
+ */
+import { type ReactNode } from 'react';
+import { RadioGroup as Ark } from '@ark-ui/react/radio-group';
+import 'iconify-icon';
+import { type Classes } from '../utils.js';
+import '../theme.css';
+import './swatch-picker.css';
+export declare const swatches: Record<string, string>;
+export type Swatch = {
+    value: string;
+    color: string;
+    label?: string;
+};
+export type SwatchPickerProps = Omit<Ark.RootProps, 'value' | 'defaultValue' | 'onValueChange' | 'label'> & {
+    items?: (string | Swatch)[];
+    value?: string | null;
+    defaultValue?: string | null;
+    onValueChange?: (value: string | null) => void;
+    label?: ReactNode;
+    size?: 'sm' | 'md' | 'lg';
+    variant?: 'inline' | 'popover';
+    placeholder?: string;
+    classes?: Classes<'root' | 'label' | 'items' | 'item' | 'swatch' | 'trigger' | 'value' | 'indicator' | 'field' | 'chip'>;
+};
+export declare function SwatchPicker({ items, value, defaultValue, onValueChange, label, size, variant, placeholder: placeholderProp, className, classes, ...rest }: SwatchPickerProps): import("react").JSX.Element;

package/dist/swatch-picker/SwatchPicker.js

@@ -0,0 +1,54 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * A choice of colour from a few swatches, e.g. a vet's colour on the
+ * calendar. The swatches are Tailwind's colours by default; their values are
+ * the names ('teal'), or give your own.
+ *
+ *   <SwatchPicker label="Colour" value={color} onValueChange={setColor} />
+ *   <SwatchPicker items={[{ value: 'brand', color: '#e11d48', label: 'Brand' }]} … />
+ *
+ * Arrow keys move between them, like radio buttons (which they are).
+ *
+ * - `items`: colour names from `swatches`, or `{ value, color, label }`
+ *   (the default: every colour in `swatches`)
+ * - `value`, `defaultValue`; `onValueChange`: called with the chosen value
+ * - `label`: a label above it (skipped inside a Field); `size`: 'sm', 'md' or 'lg'
+ * - `variant`: 'inline' (default: the swatches in the page) or 'popover': a
+ *   field showing the chosen colour and its name, opening the swatches
+ *   (closed once one's chosen); `placeholder` shows while none is
+ *
+ * `swatches` is the palette by name (Tailwind's 500s), e.g. for the
+ * CSS colour of a chosen name: `swatches.teal`.
+ */
+import { useId, useState } from 'react';
+import { Popover } from '../popover/Popover.js';
+import { RadioGroup as Ark } from '@ark-ui/react/radio-group';
+import { useFieldContext } from '@ark-ui/react/field';
+import 'iconify-icon';
+import { cx, partsOf, useControllable } from '../utils.js';
+import { useMessages } from '../format/LocaleProvider.js';
+import '../theme.css';
+import './swatch-picker.css';
+export const swatches = {
+    slate: '#64748b', red: '#ef4444', orange: '#f97316', amber: '#f59e0b', yellow: '#eab308', lime: '#84cc16', green: '#22c55e',
+    emerald: '#10b981', teal: '#14b8a6', cyan: '#06b6d4', sky: '#0ea5e9', blue: '#3b82f6', indigo: '#6366f1', violet: '#8b5cf6',
+    purple: '#a855f7', fuchsia: '#d946ef', pink: '#ec4899', rose: '#f43f5e',
+};
+const capital = (name) => name.charAt(0).toUpperCase() + name.slice(1);
+export function SwatchPicker({ items = Object.keys(swatches), value, defaultValue = null, onValueChange, label = null, size = 'md', variant = 'inline', placeholder: placeholderProp, className, classes, ...rest }) {
+    const t = useMessages();
+    const placeholder = placeholderProp ?? t.swatchPicker.placeholder;
+    const id = useId();
+    const [open, setOpen] = useState(false);
+    const field = useFieldContext();
+    const part = partsOf('swatch-picker', classes);
+    const [current, setCurrent] = useControllable(value, defaultValue, onValueChange);
+    const list = items.map((item) => (typeof item === 'string' ? { value: item, color: swatches[item] ?? item, label: t.swatchPicker.colors[item] ?? capital(item) } : item));
+    const chosen = list.find((swatch) => swatch.value === current);
+    const popover = variant === 'popover';
+    const grid = (_jsxs(Ark.Root, { ...(!popover && rest), ...part('root'), className: popover ? classes?.root : cx(className, classes?.root), orientation: "horizontal", "data-size": size, "data-variant": variant, value: current, onValueChange: (d) => { setCurrent(d.value); setOpen(false); }, "aria-describedby": field?.ariaDescribedby, ...(popover && { 'aria-labelledby': field ? field.ids.label : label ? `${id}-label` : undefined }), ...(field && { ids: { label: field.ids.label }, invalid: field.invalid, disabled: field.disabled }), children: [label && !field && !popover && _jsx(Ark.Label, { ...part('label'), children: label }), _jsx("div", { ...part('items'), children: list.map((swatch) => (_jsxs(Ark.Item, { value: swatch.value, ...part('item'), title: swatch.label ?? swatch.value, style: { '--swatch': swatch.color }, children: [_jsx(Ark.ItemControl, { ...part('swatch'), children: _jsx("iconify-icon", { icon: "lucide:check", "aria-hidden": "true" }) }), _jsx(Ark.ItemText, { ...part('item-text'), children: swatch.label ?? swatch.value }), _jsx(Ark.ItemHiddenInput, {})] }, swatch.value))) })] }));
+    if (!popover)
+        return grid;
+    // A field (like an input) showing the colour, opening the swatches.
+    return (_jsxs("div", { ...rest, ...part('field'), className: cx(className, classes?.field), "data-size": size, children: [label && !field && _jsx("span", { ...part('label'), id: `${id}-label`, children: label }), _jsx(Popover, { placement: "bottom-start", open: open, onOpenChange: setOpen, "data-swatches": "", trigger: _jsxs("button", { type: "button", ...part('trigger'), "aria-haspopup": "dialog", "aria-labelledby": field || label ? `${field ? field.ids.label : `${id}-label`} ${id}-value` : undefined, "aria-invalid": field?.invalid || undefined, disabled: field?.disabled, children: [_jsx("span", { ...part('chip'), style: { '--swatch': chosen?.color ?? 'transparent' }, "data-empty": !chosen || undefined }), _jsx("span", { ...part('value'), id: `${id}-value`, "data-placeholder": !chosen || undefined, children: chosen ? chosen.label ?? chosen.value : placeholder }), _jsx("iconify-icon", { ...part('indicator'), icon: "lucide:chevron-down", "aria-hidden": "true" })] }), children: grid })] }));
+}

package/dist/swatch-picker/swatch-picker.css

@@ -0,0 +1,38 @@
+@layer ui {
+  [data-scope=swatch-picker][data-part=root] { display: block; color: var(--ui-text); font-family: var(--ui-font); --size: 1.75rem;
+    &[data-size=sm] { --size: 1.375rem; }
+    &[data-size=lg] { --size: 2.25rem; } }
+  [data-scope=swatch-picker][data-part=label] { display: block; margin-bottom: 0.375rem; font-size: 14px; font-weight: 500; }
+  [data-scope=swatch-picker][data-part=items] { display: flex; flex-wrap: wrap; gap: 0.375rem; }
+  [data-scope=swatch-picker][data-part=item] { display: inline-flex; cursor: pointer;
+    &[data-disabled] { opacity: 0.4; cursor: not-allowed; } }
+  /* A round swatch; chosen: a ring round it and a tick in it. */
+  [data-scope=swatch-picker][data-part=swatch] { display: grid; place-items: center; width: var(--size); height: var(--size); box-sizing: border-box;
+    border-radius: 9999px; background: var(--swatch); color: white; font-size: calc(var(--size) * 0.5);
+    box-shadow: inset 0 0 0 1px color-mix(in srgb, black 12%, transparent); transition: transform 100ms;
+    & iconify-icon { opacity: 0; }
+    [data-part=item]:hover > & { transform: scale(1.08); }
+    &[data-state=checked] { box-shadow: 0 0 0 2px var(--ui-surface), 0 0 0 4px var(--swatch);
+      & iconify-icon { opacity: 1; } }
+    &[data-focus-visible] { outline: 2px solid var(--ui-ring); outline-offset: 3px; } }
+  /* The colour's name, for assistive tech (and the title on hover). */
+  [data-scope=swatch-picker][data-part=item-text] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+  /* The popover variant: a field showing the colour, like our inputs. */
+  [data-scope=swatch-picker][data-part=field] { display: block; min-width: 0; color: var(--ui-text); font-family: var(--ui-font); }
+  [data-scope=swatch-picker][data-part=trigger] { display: flex; align-items: center; gap: 0.5rem; width: 100%; min-width: 0; box-sizing: border-box;
+    height: var(--ui-control-height); padding: 0 0.625rem; border: 1px solid var(--ui-border); border-radius: var(--ui-radius);
+    background: var(--ui-surface); color: var(--ui-text); font: inherit; font-size: 14px; text-align: left; cursor: pointer;
+    &:focus-visible, &[aria-expanded=true] { border-color: var(--ui-ring); outline: 2px solid var(--ui-ring-soft); }
+    &[aria-invalid=true] { border-color: var(--ui-danger); }
+    &:disabled { opacity: 0.5; cursor: not-allowed; }
+    [data-size=sm] > & { height: var(--ui-control-height-sm); font-size: 13px; } }
+  [data-scope=swatch-picker][data-part=chip] { flex-shrink: 0; width: 1.125rem; height: 1.125rem; border-radius: 9999px; background: var(--swatch);
+    box-shadow: inset 0 0 0 1px color-mix(in srgb, black 12%, transparent);
+    &[data-empty] { background: repeating-linear-gradient(-45deg, var(--ui-border) 0 2px, transparent 2px 5px); } }
+  [data-scope=swatch-picker][data-part=value] { flex-grow: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+    &[data-placeholder] { color: var(--ui-muted); } }
+  [data-scope=swatch-picker][data-part=indicator] { flex-shrink: 0; color: var(--ui-muted); font-size: 16px; }
+  /* In the popover: as wide as its swatches, a few to a row, room around the rings. */
+  [data-scope=popover][data-part=content][data-swatches] { width: auto; padding: 0.75rem; }
+  [data-scope=swatch-picker][data-part=root][data-variant=popover] > [data-part=items] { max-width: 16rem; padding: 0.25rem; }
+}

package/dist/switch/Switch.d.ts

@@ -0,0 +1,39 @@
+/**
+ * An on/off switch with its label.
+ *
+ *   <Switch checked={reminders} onCheckedChange={setReminders}>Email reminders</Switch>
+ *
+ * - `checked`, `defaultChecked`
+ * - `onCheckedChange`: called with the new checked state
+ * - `label`: its text (or children)
+ * - `name`, `value`: for plain form posts
+ * - `disabled`, `invalid`, `required`
+ *
+ * By hand, with Ark's parts:
+ *
+ *   <Switch.Root>
+ *     <Switch.Control><Switch.Thumb /></Switch.Control>
+ *     <Switch.Label>Reminders</Switch.Label>
+ *     <Switch.HiddenInput />
+ *   </Switch.Root>
+ */
+import type { ReactNode } from 'react';
+import { Switch as Ark, type SwitchCheckedChangeDetails } from '@ark-ui/react/switch';
+import { type Classes } from '../utils.js';
+import '../theme.css';
+import './switch.css';
+export type SwitchProps = Omit<Ark.RootProps, 'onCheckedChange' | 'label'> & {
+    onCheckedChange?: (checked: boolean, details: SwitchCheckedChangeDetails) => void;
+    label?: ReactNode;
+    classes?: Classes<'root' | 'control' | 'thumb' | 'label'>;
+};
+declare function SwitchShortcut({ onCheckedChange, label, className, classes, children, ...rest }: SwitchProps): import("react").JSX.Element;
+export declare const Switch: typeof SwitchShortcut & {
+    Root: import("react").ForwardRefExoticComponent<Ark.RootProps & import("react").RefAttributes<HTMLLabelElement>>;
+    Control: import("react").ForwardRefExoticComponent<Ark.ControlProps & import("react").RefAttributes<HTMLSpanElement>>;
+    Thumb: import("react").ForwardRefExoticComponent<Ark.ThumbProps & import("react").RefAttributes<HTMLSpanElement>>;
+    Label: import("react").ForwardRefExoticComponent<Ark.LabelProps & import("react").RefAttributes<HTMLSpanElement>>;
+    HiddenInput: import("react").ForwardRefExoticComponent<Ark.HiddenInputProps & import("react").RefAttributes<HTMLInputElement>>;
+    Context: (props: Ark.ContextProps) => ReactNode;
+};
+export {};

package/dist/switch/Switch.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Switch as Ark } from '@ark-ui/react/switch';
+import { cx, on, partsOf, withParts } from '../utils.js';
+import '../theme.css';
+import './switch.css';
+function SwitchShortcut({ onCheckedChange, label = null, className, classes, children, ...rest }) {
+    const part = partsOf('switch', classes);
+    return (_jsxs(Ark.Root, { ...rest, ...part('root'), className: cx(className, classes?.root), ...on('onCheckedChange', onCheckedChange, (details) => details.checked), children: [_jsx(Ark.Control, { ...part('control'), children: _jsx(Ark.Thumb, { ...part('thumb') }) }), (label || children) && _jsx(Ark.Label, { ...part('label'), children: children ?? label }), _jsx(Ark.HiddenInput, {})] }));
+}
+export const Switch = withParts(SwitchShortcut, {
+    Root: Ark.Root,
+    Control: Ark.Control,
+    Thumb: Ark.Thumb,
+    Label: Ark.Label,
+    HiddenInput: Ark.HiddenInput,
+    Context: Ark.Context,
+});

package/dist/switch/switch.css

@@ -0,0 +1,13 @@
+@layer ui {
+  [data-scope=switch][data-part=root] { display: inline-flex; align-items: center; gap: 0.5rem; vertical-align: top; cursor: pointer;
+    color: var(--ui-text); font-family: var(--ui-font); font-size: 14px;
+    &[data-disabled] { opacity: 0.5; cursor: not-allowed; } }
+  [data-scope=switch][data-part=control] { display: inline-flex; align-items: center; flex-shrink: 0; width: 2.25rem; height: 1.25rem;
+    padding: 0.125rem; box-sizing: border-box; background: var(--ui-border); border-radius: 9999px; transition: background-color 150ms;
+    &[data-state=checked] { background: var(--ui-accent); }
+    &[data-focus-visible] { outline: 2px solid var(--ui-ring-soft); outline-offset: 1px; }
+    &[data-invalid] { outline: 1px solid var(--ui-danger); } }
+  [data-scope=switch][data-part=thumb] { width: 1rem; height: 1rem; background: white; border-radius: 9999px;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); transition: translate 150ms;
+    &[data-state=checked] { translate: 1rem 0; } }
+}

package/dist/table/Table.d.ts

@@ -0,0 +1,90 @@
+/**
+ * A data table: rows of objects, laid out by `columns`.
+ *
+ *   <Table columns={columns} rows={students} selectable selected={picked} onSelectedChange={setPicked} />
+ *
+ *   const columns: TableColumn<Student>[] = [
+ *     { key: 'name', label: 'Name', sortable: true, cell: ({ row }) => <strong>{row.name}</strong> },
+ *     { key: 'year', label: 'Year', align: 'end', sortable: true },
+ *     { key: 'fee', label: 'Fee', format: (v) => `£${v}` },
+ *   ]
+ *
+ * - `rows`: plain objects, one per row
+ * - `columns`: what each column shows. `key`: the row property shown (and
+ *   sorted by); `label`: the heading; `sortable`; `align`: 'start', 'center'
+ *   or 'end'; `width`: any CSS width; `format(value, row)`: turns the value
+ *   into text; `value(row)`: computes it instead of `row[key]`; `cell`:
+ *   renders the cell, given `{ row, column, value }`
+ * - `rowKey`: the property that identifies a row ('id')
+ * - `sort`, `defaultSort`: `{ key, dir }` or null; `onSortChange`. Sortable
+ *   columns sort when their heading is clicked: ascending, descending, then
+ *   off. With `manualSort` rows aren't sorted here: sort them yourself
+ *   (`sortRows(list, columns, sort)` before paging, or on a server)
+ * - `selectable`: a checkbox per row and a select-all; `selected`,
+ *   `defaultSelected`: the selected rows' keys; `onSelectedChange`. Shift-click
+ *   a row's checkbox to tick (or clear) the rows between it and the last one
+ *   clicked
+ * - `loading`: skeleton rows while there are none yet (`loadingRows`, 5),
+ *   else dims the rows
+ * - `emptyText`, or `empty` (markup), for no rows
+ * - `maxHeight`: scrolls the rows under a sticky header
+ * - `label`: a caption for assistive tech
+ * - `size`: 'sm', 'md' (default) or 'lg' (roomier rows)
+ * - `flush`: no border or rounding, to sit edge to edge in a card
+ * - `onRowClick`: called with the row when a row is clicked (outside its controls)
+ *
+ * Or write the <table> yourself as its content, for the look alone (no
+ * sorting, selection or loading states); `data-align` on cells works too.
+ */
+import { type HTMLAttributes, type ReactNode } from 'react';
+import 'iconify-icon';
+import { type Classes } from '../utils.js';
+import '../theme.css';
+import './table.css';
+type Row = Record<string, unknown>;
+type Key = string | number;
+export type TableColumn<T extends object = Row> = {
+    key: string;
+    label?: ReactNode;
+    sortable?: boolean;
+    align?: 'start' | 'center' | 'end';
+    width?: string;
+    format?: (value: unknown, row: T) => ReactNode;
+    value?: (row: T) => unknown;
+    cell?: (cell: {
+        row: T;
+        column: TableColumn<T>;
+        value: unknown;
+    }) => ReactNode;
+};
+export type TableSort = {
+    key: string;
+    dir: 'asc' | 'desc';
+} | null;
+export type TableProps<T extends object = Row> = Omit<HTMLAttributes<HTMLDivElement>, 'onSelect'> & {
+    columns?: TableColumn<T>[];
+    rows?: T[];
+    rowKey?: string;
+    selectable?: boolean;
+    selected?: Key[];
+    defaultSelected?: Key[];
+    onSelectedChange?: (keys: Key[]) => void;
+    sort?: TableSort;
+    defaultSort?: TableSort;
+    onSortChange?: (sort: TableSort) => void;
+    manualSort?: boolean;
+    loading?: boolean;
+    loadingRows?: number;
+    emptyText?: ReactNode;
+    empty?: ReactNode;
+    maxHeight?: string | null;
+    label?: string | null;
+    size?: 'sm' | 'md' | 'lg';
+    flush?: boolean;
+    onRowClick?: (row: T) => void;
+    classes?: Classes<'root' | 'scroll' | 'table' | 'caption' | 'sort' | 'sortIcon' | 'row' | 'selectCell' | 'empty'>;
+};
+export declare const cellValue: <T extends object>(row: T, column: TableColumn<T>) => unknown;
+export declare function sortRows<T extends object>(list: T[] | null | undefined, columns: TableColumn<T>[], sort: TableSort): T[];
+export declare function Table<T extends object = Row>({ columns, rows, rowKey, selectable, selected: selectedProp, defaultSelected, onSelectedChange, sort: sortProp, defaultSort, onSortChange, manualSort, loading, loadingRows, emptyText: emptyTextProp, empty, maxHeight, label, size, flush, onRowClick, className, classes, children, ...rest }: TableProps<T>): import("react").JSX.Element;
+export {};

package/dist/table/Table.js

@@ -0,0 +1,145 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * A data table: rows of objects, laid out by `columns`.
+ *
+ *   <Table columns={columns} rows={students} selectable selected={picked} onSelectedChange={setPicked} />
+ *
+ *   const columns: TableColumn<Student>[] = [
+ *     { key: 'name', label: 'Name', sortable: true, cell: ({ row }) => <strong>{row.name}</strong> },
+ *     { key: 'year', label: 'Year', align: 'end', sortable: true },
+ *     { key: 'fee', label: 'Fee', format: (v) => `£${v}` },
+ *   ]
+ *
+ * - `rows`: plain objects, one per row
+ * - `columns`: what each column shows. `key`: the row property shown (and
+ *   sorted by); `label`: the heading; `sortable`; `align`: 'start', 'center'
+ *   or 'end'; `width`: any CSS width; `format(value, row)`: turns the value
+ *   into text; `value(row)`: computes it instead of `row[key]`; `cell`:
+ *   renders the cell, given `{ row, column, value }`
+ * - `rowKey`: the property that identifies a row ('id')
+ * - `sort`, `defaultSort`: `{ key, dir }` or null; `onSortChange`. Sortable
+ *   columns sort when their heading is clicked: ascending, descending, then
+ *   off. With `manualSort` rows aren't sorted here: sort them yourself
+ *   (`sortRows(list, columns, sort)` before paging, or on a server)
+ * - `selectable`: a checkbox per row and a select-all; `selected`,
+ *   `defaultSelected`: the selected rows' keys; `onSelectedChange`. Shift-click
+ *   a row's checkbox to tick (or clear) the rows between it and the last one
+ *   clicked
+ * - `loading`: skeleton rows while there are none yet (`loadingRows`, 5),
+ *   else dims the rows
+ * - `emptyText`, or `empty` (markup), for no rows
+ * - `maxHeight`: scrolls the rows under a sticky header
+ * - `label`: a caption for assistive tech
+ * - `size`: 'sm', 'md' (default) or 'lg' (roomier rows)
+ * - `flush`: no border or rounding, to sit edge to edge in a card
+ * - `onRowClick`: called with the row when a row is clicked (outside its controls)
+ *
+ * Or write the <table> yourself as its content, for the look alone (no
+ * sorting, selection or loading states); `data-align` on cells works too.
+ */
+import { useEffect, useRef } from 'react';
+import 'iconify-icon';
+import { Checkbox } from '../checkbox/Checkbox.js';
+import { Skeleton } from '../skeleton/Skeleton.js';
+import { cx, partsOf, useControllable } from '../utils.js';
+import { useMessages } from '../format/LocaleProvider.js';
+import '../theme.css';
+import './table.css';
+// Numbers by value, everything else as text with numbers in order
+// ("Year 2" before "Year 10"); empty values last.
+function compare(a, b) {
+    if (a == b)
+        return 0;
+    if (a == null || a === '')
+        return 1;
+    if (b == null || b === '')
+        return -1;
+    if (typeof a === 'number' && typeof b === 'number')
+        return a - b;
+    return String(a).localeCompare(String(b), undefined, { numeric: true, sensitivity: 'base' });
+}
+export const cellValue = (row, column) => column.value ? column.value(row) : row[column.key];
+// A copy of `list` in `sort`'s order. With paging, sort the whole list with
+// this (and set `manualSort`), then hand the table one page.
+export function sortRows(list, columns, sort) {
+    const column = sort && columns.find((c) => c.key === sort.key);
+    if (!column)
+        return list ?? [];
+    const dir = sort.dir === 'desc' ? -1 : 1;
+    return [...(list ?? [])].sort((a, b) => compare(cellValue(a, column), cellValue(b, column)) * dir);
+}
+export function Table({ columns = [], rows = [], rowKey = 'id', selectable = false, selected: selectedProp, defaultSelected = [], onSelectedChange, sort: sortProp, defaultSort = null, onSortChange, manualSort = false, loading = false, loadingRows = 5, emptyText: emptyTextProp, empty = null, maxHeight = null, label = null, size = 'md', flush = false, onRowClick, className, classes, children, ...rest }) {
+    const t = useMessages();
+    const emptyText = emptyTextProp ?? t.table.empty;
+    const part = partsOf('table', classes);
+    const [sort, setSort] = useControllable(sortProp, defaultSort, onSortChange);
+    const [selected, setSelected] = useControllable(selectedProp, defaultSelected, onSelectedChange);
+    // The latest selection, so two changes before a render stack.
+    const latest = useRef(selected);
+    useEffect(() => { latest.current = selected; });
+    const keyOf = (row) => row[rowKey];
+    const display = (row, column) => {
+        const value = cellValue(row, column);
+        return column.format ? column.format(value, row) : (value ?? '');
+    };
+    const sortedRows = manualSort ? rows : sortRows(rows, columns, sort);
+    const sortDir = (column) => (sort && sort.key === column.key ? sort.dir : null);
+    function toggleSort(column) {
+        const current = sortDir(column);
+        setSort(current == null ? { key: column.key, dir: 'asc' } : current === 'asc' ? { key: column.key, dir: 'desc' } : null);
+    }
+    const ariaSort = (column) => {
+        if (!column.sortable)
+            return undefined;
+        const dir = sortDir(column);
+        return dir === 'asc' ? 'ascending' : dir === 'desc' ? 'descending' : 'none';
+    };
+    const isSelected = (row) => selected.includes(keyOf(row));
+    const selectedCount = rows.filter(isSelected).length;
+    const allState = selectedCount === 0 ? false : selectedCount === rows.length ? true : 'indeterminate';
+    // Change events don't carry the Shift key, so it's noted on the way in;
+    // Shift+mousedown would also select the text between.
+    const shift = useRef(false);
+    const anchorKey = useRef(null);
+    function noteShift(e) {
+        const event = e.nativeEvent;
+        shift.current = event.shiftKey;
+        if (event.shiftKey && e.type === 'mousedown' && e.target.closest('[data-part=select-cell]'))
+            e.preventDefault();
+    }
+    function toggleRow(row, on) {
+        const index = sortedRows.indexOf(row);
+        const anchor = sortedRows.findIndex((r) => keyOf(r) === anchorKey.current);
+        anchorKey.current = keyOf(row);
+        // With Shift, every row from the last one clicked to this one.
+        const range = shift.current && anchor >= 0 && anchor !== index
+            ? sortedRows.slice(Math.min(anchor, index), Math.max(anchor, index) + 1) : [row];
+        const keys = range.map(keyOf);
+        const others = latest.current.filter((key) => !keys.includes(key));
+        latest.current = on ? [...others, ...keys] : others;
+        setSelected(latest.current);
+    }
+    function toggleAll(on) {
+        const keys = rows.map(keyOf);
+        const others = latest.current.filter((key) => !keys.includes(key));
+        latest.current = on ? [...others, ...keys] : others;
+        setSelected(latest.current);
+    }
+    // Not when the click was on a control in the row (a link, a menu…); only
+    // the row's own contents count, not what the table sits in (a Card).
+    function rowClicked(e, row) {
+        const control = e.target.closest('a, button, input, label, select, textarea, [data-scope]:not([data-scope=table])');
+        if (control && e.currentTarget.contains(control))
+            return;
+        onRowClick?.(row);
+    }
+    const columnCount = columns.length + (selectable ? 1 : 0);
+    return (_jsx("div", { ...rest, ...part('root'), className: cx(className, classes?.root), "data-size": size, "data-flush": flush || undefined, "data-loading": (loading && rows.length > 0) || undefined, children: _jsx("div", { ...part('scroll'), "data-sticky": maxHeight ? '' : undefined, style: maxHeight ? { maxHeight } : undefined, children: !columns.length ? children : (_jsxs("table", { ...part('table'), "aria-busy": loading, children: [label && _jsx("caption", { ...part('caption'), children: label }), _jsx("thead", { children: _jsxs("tr", { children: [selectable && (_jsx("th", { ...part('select-cell'), scope: "col", children: _jsx(Checkbox, { label: t.table.selectAll, labelHidden: true, disabled: !rows.length, checked: allState, onCheckedChange: (on) => toggleAll(on) }) })), columns.map((column) => (_jsx("th", { scope: "col", "data-align": column.align ?? 'start', "aria-sort": ariaSort(column), style: column.width ? { width: column.width } : undefined, children: column.sortable
+                                        ? _jsxs("button", { ...part('sort'), type: "button", "data-dir": sortDir(column) ?? undefined, onClick: () => toggleSort(column), children: [_jsx("span", { children: column.label }), _jsx("span", { ...part('sort-icon'), children: _jsx("iconify-icon", { icon: sortDir(column) === 'asc' ? 'lucide:chevron-up'
+                                                            : sortDir(column) === 'desc' ? 'lucide:chevron-down' : 'lucide:chevrons-up-down' }) })] })
+                                        : column.label }, column.key)))] }) }), _jsx("tbody", { onPointerDownCapture: noteShift, onMouseDownCapture: noteShift, onKeyDownCapture: noteShift, children: loading && !rows.length
+                            ? Array.from({ length: loadingRows }, (_, i) => (_jsxs("tr", { children: [selectable && _jsx("td", { ...part('select-cell') }), columns.map((column) => _jsx("td", { children: _jsx(Skeleton, { height: "0.75rem", width: "60%" }) }, column.key))] }, i)))
+                            : !rows.length
+                                ? _jsx("tr", { children: _jsx("td", { ...part('empty'), colSpan: columnCount, children: empty ?? emptyText }) })
+                                : sortedRows.map((row) => (_jsxs("tr", { ...part('row'), "data-selected": isSelected(row) || undefined, "aria-selected": selectable ? isSelected(row) : undefined, onClick: (e) => rowClicked(e, row), children: [selectable && (_jsx("td", { ...part('select-cell'), children: _jsx(Checkbox, { label: _jsxs(_Fragment, { children: [t.table.selectRow, " ", display(row, columns[0])] }), labelHidden: true, checked: isSelected(row), onCheckedChange: (on) => toggleRow(row, on) }) })), columns.map((column) => (_jsx("td", { "data-align": column.align ?? 'start', children: column.cell ? column.cell({ row, column, value: cellValue(row, column) }) : display(row, column) }, column.key)))] }, keyOf(row)))) })] })) }) }));
+}

package/dist/table/table.css

@@ -0,0 +1,44 @@
+/* The table's cells are styled by element, so a <table> written inside
+   (without columns) looks the same as the generated one. */
+@layer ui {
+  [data-scope=table][data-part=root] { display: block; width: 100%; min-width: 0; color: var(--ui-text); font-family: var(--ui-font); font-size: 14px;
+    --cell-x: 0.75rem; --cell-y: 0.75rem; --cell-h: 3rem; --head-h: 2.25rem;
+    &[data-size=sm] { --cell-x: 0.625rem; --cell-y: 0.375rem; --cell-h: 2.25rem; --head-h: 2rem; }
+    &[data-size=lg] { --cell-x: 1rem; --cell-y: 1rem; --cell-h: 3.5rem; --head-h: 2.5rem; } }
+  /* Scrolls sideways on narrow screens; with maxHeight, down too, under a sticky header. */
+  [data-scope=table][data-part=scroll] { width: 100%; overflow-x: auto; box-sizing: border-box;
+    background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: calc(var(--ui-radius) + 2px); box-shadow: var(--ui-card-shadow);
+    &[data-sticky] { overflow-y: auto; }
+    [data-flush] > & { border: none; border-radius: 0; background: transparent; box-shadow: none; }
+    & table { width: 100%; border-collapse: separate; border-spacing: 0; }
+    & caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+    /* Rows get room from padding (so two-line cells breathe too), with a minimum height for one-line ones. */
+    & :is(th, td) { padding: var(--cell-y) var(--cell-x); height: var(--cell-h); text-align: left; vertical-align: middle; border-bottom: 1px solid var(--ui-border); }
+    /* A slim, quiet header: small muted labels on a faint band. */
+    & th { height: var(--head-h); padding-block: 0; font-weight: 500; font-size: 12px; color: var(--ui-muted);
+      background: color-mix(in srgb, var(--ui-hover) 60%, var(--ui-surface)); }
+    &[data-sticky] th { position: sticky; top: 0; z-index: 1; }
+    & :is(th, td)[data-align=center] { text-align: center; }
+    & :is(th, td)[data-align=end] { text-align: right; }
+    & tbody tr:last-child td { border-bottom: none; }
+    & tbody tr:hover { background: color-mix(in srgb, var(--ui-hover) 60%, transparent); }
+    & tbody tr[data-selected] { background: color-mix(in srgb, var(--ui-accent-soft) 45%, transparent); }
+    /* Outer cells line up with a card's padding. */
+    [data-flush] > & :is(th, td):first-child { padding-left: 1.25rem; }
+    [data-flush] > & :is(th, td):last-child { padding-right: 1.25rem; } }
+  /* Generated cells stay on one line (the table scrolls sideways instead). */
+  [data-scope=table][data-part=table] :is(th, td) { white-space: nowrap; }
+  /* Inside the scroll part, so they outrank its cell rule. */
+  [data-scope=table][data-part=scroll] [data-part=select-cell] { width: 2.25rem; padding-right: 0; }
+  [data-scope=table][data-part=scroll] [data-part=empty] { height: auto; padding: 2.5rem 0.75rem; text-align: center; color: var(--ui-muted); white-space: normal; }
+  [data-scope=table][data-part=sort] { display: inline-flex; align-items: center; gap: 0.25rem; margin: 0 -0.375rem; padding: 0 0.375rem; height: 1.5rem;
+    border: none; border-radius: 4px; background: transparent; color: inherit; font: inherit; cursor: pointer;
+    &:hover, &[data-dir] { color: var(--ui-text); }
+    &:focus-visible { outline: 2px solid var(--ui-ring-soft); }
+    th[data-align=end] > & { flex-direction: row-reverse; } }
+  /* Sort icons show on hover or focus, and on the sorted column; their space is kept, so labels don't shift. */
+  [data-scope=table][data-part=sort-icon] { display: inline-flex; font-size: 14px; opacity: 0; transition: opacity 120ms;
+    [data-part=sort]:is(:hover, :focus-visible) > & { opacity: 0.5; }
+    [data-part=sort][data-dir] > & { opacity: 1; } }
+  [data-scope=table][data-part=root][data-loading] tbody { opacity: 0.5; transition: opacity 150ms; }
+}