@phreshos/react-ui 0.1.36 → 0.1.38

package/dist/surface/surface.js

@@ -0,0 +1,239 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createElement, forwardRef, useId, useInsertionEffect } from "react";
+import { canvasDarkness, colorOpacity, contrast, mixColor, readableColor, recessColor, resolveColor } from "../foundation/color.js";
+import { resolveRadius } from "../foundation/radius.js";
+import { useVisual } from "../foundation/visual.js";
+import { grainImage, grainSeed, grainSize } from "./grain.js";
+import { flushPaintRules, paintClass, usePaintClasses } from "./paint-class.js";
+import { resolveMaterialOptions } from "./material-options.js";
+import { resolveShadowOptions, shadowStyle } from "./shadow-options.js";
+/**
+ * The single visual primitive. Components express what they are through
+ * color, depth, and interaction; paint, grain, frost, edge, shadow, focus,
+ * and the text color are all derived here from Appearance.
+ */
+export const SurfaceView = forwardRef(function Surface({ as: Element = "div", color = "background", depth = "raised", material, shadow, radius, interaction, className, children, style, ...properties }, ref) {
+    const visual = useVisual();
+    const identity = useId();
+    const paint = surfacePaint(visual, color, depth, material, shadow, interaction);
+    const borderRadius = radius === undefined && style?.borderRadius !== undefined
+        ? style.borderRadius
+        : resolveRadius(radius ?? "medium", visual.radius);
+    const declarations = [
+        ...Object.entries(paint.variables).map(([name, value]) => `${name}: ${value}`),
+        "transition-property: box-shadow, color, outline-color, opacity",
+        `transition-duration: ${visual.duration}ms`,
+        `transition-timing-function: ${visual.easing}`,
+        `box-shadow: ${paint.shadow}`,
+        `color: ${paint.text}`,
+        `outline: 3px solid ${interaction?.focusVisible ? paint.ring : "transparent"}`,
+        "outline-offset: 1px",
+        `border-radius: ${typeof borderRadius === "number" ? `${borderRadius}px` : borderRadius}`
+    ].join("; ");
+    const painted = usePaintClasses() ? paintClass(declarations) : undefined;
+    useInsertionEffect(flushPaintRules);
+    return createElement(Element, {
+        ...properties,
+        ref,
+        className: [surfaceClass, painted, dimmedClass(interaction?.disabled ?? false), className].filter(Boolean).join(" "),
+        // Without a document (server rendering), the same declarations travel inline.
+        style: painted === undefined ? { ...inlineDeclarations(declarations), ...style } : style
+    }, _jsx(SurfaceStyle, {}), paint.distortion > 0 && _jsx(Refraction, { identity: identity, distortion: paint.distortion }), children);
+});
+function inlineDeclarations(declarations) {
+    const result = {};
+    for (const declaration of declarations.split("; ")) {
+        const separator = declaration.indexOf(": ");
+        const name = declaration.slice(0, separator);
+        result[name.startsWith("--") ? name : name.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase())] = declaration.slice(separator + 2);
+    }
+    return result;
+}
+/** One material- and depth-owning element. The host is a div unless `as` selects another. */
+export const Surface = SurfaceView;
+/**
+ * Marks an element that is disabled. Disabling fades only the outermost
+ * disabled element: parts inside it, such as a field's well or a disabled
+ * calendar's days, are disabled with it and do not fade a second time.
+ */
+export function dimmedClass(disabled, className) {
+    return [disabled ? dimmed : undefined, className].filter(Boolean).join(" ") || undefined;
+}
+const disabledOpacity = 0.46;
+const dimmed = "phreshos-dimmed";
+const surfaceClass = "phreshos-surface";
+const materialLevel = Object.freeze({ none: 0, basic: 1, extended: 2, full: 3 });
+/** How far hover and press move a paint toward the text color. */
+export const interactionShift = Object.freeze({ hovered: 0.05, pressed: 0.1 });
+/** A clear Surface has no paint to move, so it shows the same shift as a slightly stronger veil. */
+export const clearVeil = 1.3;
+/** Resolves every visual value of one Surface. Pure over its inputs. */
+export function surfacePaint(visual, color, depth, options, shadowOptions, interaction) {
+    const { colors } = visual;
+    const base = resolveColor(color, colors);
+    const active = interaction !== undefined && !interaction.disabled;
+    const shift = active ? interaction.pressed ? interactionShift.pressed : interaction.hovered ? interactionShift.hovered : 0 : 0;
+    // Recessed paint sinks slightly below its surroundings; interaction then
+    // moves the same base toward the content color so every state stays related.
+    const darkness = canvasDarkness(colors);
+    // A recess moves away from its surroundings toward whichever extreme has
+    // room, by one constant perceptual difference on any canvas.
+    const rest = depth === "recessed" ? recessColor(base) : base;
+    // A transparent Surface has no substance of its own: it takes the content
+    // color of whatever it sits on and only reveals interaction as a veil.
+    const clear = base === "transparent";
+    const fill = clear
+        ? shift > 0 ? colorOpacity(colors.foreground, shift * clearVeil) : "transparent"
+        : mixColor(rest, colors.foreground, shift);
+    const mode = clear ? "none" : typeof options === "object" ? "full" : options ?? "basic";
+    const level = materialLevel[mode];
+    const material = resolveMaterialOptions(typeof options === "object" ? options : {}, visual.material);
+    const opacity = level >= materialLevel.extended ? material.opacity : 1;
+    const translucent = opacity < 1;
+    const frost = level >= materialLevel.full && translucent
+        ? [material.backdrop > 0 ? `blur(${material.backdrop}px)` : "", material.saturation !== 1 ? `saturate(${material.saturation})` : ""].filter(Boolean).join(" ")
+        : "";
+    const grain = level >= materialLevel.basic && material.grain > 0 && material.grainAmount > 0
+        ? grainImage(grainSeed, material.grainAmount, level === materialLevel.basic ? material.grain * material.opacity : material.grain)
+        : "none";
+    const ringBase = interaction?.invalid
+        ? colors.danger
+        : !clear && (contrast(base, colors.background) ?? 1) >= 1.6 ? base : colors.primary;
+    const edged = level >= materialLevel.basic;
+    const lit = edgeLight(depth, darkness);
+    const light = mixColor(fill, "#ffffff", 0.7);
+    // Light rises from the middle of the top and bottom edges and spreads along
+    // them, fading as it goes, so it leans toward the sides without reaching
+    // them; the same slight spill falls inward from both middles. A hairline
+    // outside separates the Surface from whatever it sits on. Neither edge
+    // dominates, so no Surface reads as a bevel. Depth changes only how much
+    // light the rim receives.
+    const rim = edged
+        ? `linear-gradient(to right, transparent, ${colorOpacity(light, lit.side)} 18%, ${colorOpacity(light, lit.edge)} 50%, ${colorOpacity(light, lit.side)} 82%, transparent)`
+        : "none";
+    // The spill reaches at most a fixed depth, and less on short Surfaces: at a
+    // fixed depth, a small button was lit through nearly half its height and
+    // read as swollen, while a large panel barely changes.
+    const spill = (edge) => edged && lit.spill > 0
+        ? `radial-gradient(50% ${spillDepth} at 50% ${edge === "top" ? "0" : "100%"}, ${colorOpacity(light, lit.spill)}, transparent)`
+        : "none";
+    // A recessed Surface holds a value, so focus and validity also claim its hairline.
+    const claimed = interaction?.invalid || (depth === "recessed" && interaction?.focusVisible);
+    const hairline = !edged
+        ? null
+        : claimed
+            ? `0 0 0 1px ${ringBase}`
+            : `0 0 0 0.5px ${colorOpacity("#000000", lit.hairline)}`;
+    const shadow = visual.shadow;
+    const outer = clear || depth !== "raised" || shadowOptions === false || (active && interaction.pressed)
+        ? null
+        : shadowStyle(resolveShadowOptions(typeof shadowOptions === "object" ? shadowOptions : {}, shadow));
+    return {
+        fill,
+        // The label is chosen once for the resting paint: interaction shades stay
+        // close to it, and re-deciding per state would flip text on near-ties.
+        text: clear ? "inherit" : readableColor(rest, colors),
+        ring: colorOpacity(ringBase, 0.34),
+        shadow: [hairline, outer === "none" ? null : outer].filter(Boolean).join(", ") || "none",
+        distortion: level >= materialLevel.full && translucent ? material.distortion : 0,
+        variables: {
+            "--phreshos-surface-paint": translucent ? colorOpacity(fill, opacity) : fill,
+            "--phreshos-surface-grain": grain,
+            "--phreshos-surface-frost": frost || "none",
+            "--phreshos-surface-rim": rim,
+            "--phreshos-surface-spill-top": spill("top"),
+            "--phreshos-surface-spill-bottom": spill("bottom"),
+            "--phreshos-surface-duration": `${visual.duration}ms`,
+            "--phreshos-surface-easing": visual.easing
+        }
+    };
+}
+/** How far the inward spill reaches: a fixed depth, or a share of a short Surface's height. */
+const spillDepth = "min(6px, 12%)";
+/** How much light each part of the rim receives, interpolated along the canvas darkness. */
+function edgeLight(depth, darkness) {
+    const { light, dark } = edgeLightEnds[depth];
+    return {
+        edge: round(mix(light.edge, dark.edge, darkness)),
+        side: round(mix(light.side, dark.side, darkness)),
+        spill: round(mix(light.spill, dark.spill, darkness)),
+        hairline: round(mix(light.hairline, dark.hairline, darkness))
+    };
+}
+function round(value) {
+    return Math.round(value * 1_000) / 1_000;
+}
+function mix(from, to, amount) {
+    return from + (to - from) * amount;
+}
+const edgeLightEnds = Object.freeze({
+    raised: {
+        light: { edge: 0.55, side: 0.22, spill: 0.15, hairline: 0.16 },
+        dark: { edge: 0.18, side: 0.08, spill: 0.035, hairline: 0.55 }
+    },
+    flat: {
+        light: { edge: 0.3, side: 0.14, spill: 0, hairline: 0.12 },
+        dark: { edge: 0.1, side: 0.05, spill: 0, hairline: 0.45 }
+    },
+    recessed: {
+        light: { edge: 0.45, side: 0.12, spill: 0, hairline: 0.12 },
+        dark: { edge: 0.12, side: 0.04, spill: 0, hairline: 0.45 }
+    }
+});
+/** A separate compositor pass for refraction, present only when it is visible. */
+function Refraction({ identity, distortion }) {
+    const filter = `phreshos-refraction-${identity.replaceAll(":", "")}`;
+    return _jsx("span", { "aria-hidden": "true", "data-surface-refraction": "", style: {
+            position: "absolute",
+            inset: 0,
+            zIndex: -2,
+            borderRadius: "inherit",
+            pointerEvents: "none",
+            backdropFilter: `url("#${filter}")`,
+            WebkitBackdropFilter: `url("#${filter}")`
+        }, children: _jsx("svg", { width: "0", height: "0", focusable: "false", style: { position: "absolute" }, children: _jsxs("filter", { id: filter, x: "-20%", y: "-20%", width: "140%", height: "140%", colorInterpolationFilters: "sRGB", children: [_jsx("feTurbulence", { type: "fractalNoise", baseFrequency: "0.008 0.008", numOctaves: 2, seed: 92, result: "noise" }), _jsx("feGaussianBlur", { in: "noise", stdDeviation: 2, result: "soft" }), _jsx("feDisplacementMap", { in: "SourceGraphic", in2: "soft", scale: distortion, xChannelSelector: "R", yChannelSelector: "G" })] }) }) });
+}
+/*
+ * Paint and edge live on pseudo-elements driven by per-Surface custom
+ * properties, so a Surface is one DOM element regardless of its Material.
+ * Position and isolation use zero specificity so any consumer class or style
+ * can replace them.
+ */
+const stylesheet = `
+:where(.${dimmed}:not(.${dimmed} .${dimmed})) {
+  opacity: ${disabledOpacity};
+}
+:where(.${surfaceClass}) {
+  position: relative;
+  isolation: isolate;
+}
+.${surfaceClass}::before,
+.${surfaceClass}::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  pointer-events: none;
+}
+.${surfaceClass}::before {
+  z-index: -1;
+  background-color: var(--phreshos-surface-paint);
+  background-image: var(--phreshos-surface-spill-top), var(--phreshos-surface-spill-bottom), var(--phreshos-surface-grain);
+  background-size: auto, auto, ${grainSize}px ${grainSize}px;
+  -webkit-backdrop-filter: var(--phreshos-surface-frost);
+  backdrop-filter: var(--phreshos-surface-frost);
+  transition: background-color var(--phreshos-surface-duration) var(--phreshos-surface-easing);
+}
+.${surfaceClass}::after {
+  z-index: 1;
+  padding: 0.5px;
+  background: var(--phreshos-surface-rim);
+  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
+  -webkit-mask-composite: xor;
+  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
+}
+`;
+/** React hoists and deduplicates this stylesheet, including inside portals. */
+function SurfaceStyle() {
+    return _jsx("style", { href: "phreshos-react-ui-surface", precedence: "phreshos", children: stylesheet });
+}

package/dist/switch.d.ts

@@ -1,11 +1,10 @@
 import type { SwitchFieldProps } from "react-aria-components";
-import type { ControlOverrides, ControlProps, FieldProps } from "./control.js";
-import type { MaterialOverrides } from "./material-options.js";
-import type { ShadowOverrides } from "./shadow-options.js";
-export interface SwitchProps extends Omit<SwitchFieldProps, ControlOverrides | "isReadOnly" | "isSelected" | "defaultSelected">, ControlProps, FieldProps, MaterialOverrides, ShadowOverrides {
+import { type ControlOverrides, type ControlProps, type FieldProps } from "./control/control.js";
+import type { MaterialOverrides } from "./surface/material-options.js";
+export interface SwitchProps extends Omit<SwitchFieldProps, ControlOverrides | "isSelected" | "defaultSelected">, ControlProps, FieldProps, MaterialOverrides {
     readonly checked?: boolean;
     readonly defaultChecked?: boolean;
     readonly readOnly?: boolean;
 }
-/** An on/off setting. onChange receives the next boolean value. */
+/** An on/off setting. `onChange` receives the next boolean value. */
 export declare const Switch: import("react").ForwardRefExoticComponent<SwitchProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/switch.js

@@ -1,12 +1,21 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { SwitchField, SwitchButton } from "react-aria-components";
-import { FieldFeedback, fieldStyle, useControlTheme } from "./control.js";
-import { ToggleIndicator, toggleStyle } from "./toggle-indicator.js";
-import { resolveDirection, useDirection } from "./direction.js";
-/** An on/off setting. onChange receives the next boolean value. */
-export const Switch = forwardRef(function Switch({ label, description, errorMessage, disabled, required, invalid, readOnly, checked, defaultChecked, size, color, style, material, shadow, ...properties }, ref) {
-    const theme = useControlTheme({ size, color });
+import { SwitchButton, SwitchField } from "react-aria-components";
+import { useControlMetrics } from "./control/control.js";
+import { FieldFeedback, fieldStyle } from "./control/field.js";
+import { ToggleIndicator, toggleRowStyle } from "./control/toggle.js";
+import { resolveDirection, useDirection } from "./foundation/direction.js";
+import { dimmedClass } from "./surface/surface.js";
+/** An on/off setting. `onChange` receives the next boolean value. */
+export const Switch = forwardRef(function Switch({ label, description, errorMessage, disabled, required, invalid, readOnly, className, checked, defaultChecked, size, color = "primary", style, material, ...properties }, ref) {
+    const metrics = useControlMetrics(size);
     const direction = resolveDirection(properties.dir, useDirection());
-    return _jsxs(SwitchField, { ...properties, ref: ref, isDisabled: disabled, isRequired: required, isInvalid: invalid, isReadOnly: readOnly, isSelected: checked, defaultSelected: defaultChecked, style: state => fieldStyle(theme, state.isDisabled, style), children: [_jsx(SwitchButton, { style: state => toggleStyle(theme, state.isDisabled, state.isReadOnly), children: state => _jsxs(_Fragment, { children: [_jsx(ToggleIndicator, { kind: "switch", direction: direction, material: material, shadow: shadow, theme: theme, selected: state.isSelected, focused: state.isFocusVisible, invalid: state.isInvalid, hovered: !state.isDisabled && !state.isReadOnly && state.isHovered, pressed: !state.isDisabled && !state.isReadOnly && state.isPressed }), label] }) }), _jsx(FieldFeedback, { theme: theme, description: description, errorMessage: errorMessage })] });
+    return _jsxs(SwitchField, { ...properties, ref: ref, isDisabled: disabled, isRequired: required, isInvalid: invalid, isReadOnly: readOnly, isSelected: checked, defaultSelected: defaultChecked, className: state => dimmedClass(state.isDisabled, className ?? state.defaultClassName) ?? "", style: fieldStyle(metrics, style), children: [_jsx(SwitchButton, { style: state => toggleRowStyle(metrics, state.isDisabled, state.isReadOnly), children: state => _jsxs(_Fragment, { children: [_jsx(ToggleIndicator, { kind: "switch", direction: direction, color: color, material: material, metrics: metrics, state: {
+                                selected: state.isSelected,
+                                hovered: !state.isReadOnly && state.isHovered,
+                                pressed: !state.isReadOnly && state.isPressed,
+                                focusVisible: state.isFocusVisible,
+                                invalid: state.isInvalid,
+                                disabled: state.isDisabled
+                            } }), label] }) }), _jsx(FieldFeedback, { metrics: metrics, description: description, errorMessage: errorMessage })] });
 });

package/dist/table.d.ts

@@ -1,71 +1,68 @@
 import type { CSSProperties, ReactElement, RefAttributes } from "react";
 import type { CellProps as AriaCellProps, ColumnProps as AriaColumnProps, RowProps as AriaRowProps, TableBodyProps as AriaTableBodyProps, TableHeaderProps as AriaTableHeaderProps, TableProps as AriaTableProps } from "react-aria-components";
-import type { ControlColor } from "./control.js";
-import type { RadiusProps } from "./radius.js";
-import type { ScaleLevel } from "./scale.js";
-import { type MultipleStringSelection, type MultipleStringSelectionProps, type SingleStringSelectionProps } from "./selection.js";
+import { type MultipleSelectionProps, type MultipleStringSelection, type NoSelectionProps, type SingleSelectionProps } from "./control/selection.js";
+import { type Color } from "./foundation/color.js";
+import type { RadiusProps } from "./foundation/radius.js";
+import type { ScaleLevel } from "./foundation/scale.js";
 export type TableSortDirection = "ascending" | "descending";
 export interface TableSort {
     readonly column: string;
     readonly direction: TableSortDirection;
 }
-type TableRootBaseProps = Omit<AriaTableProps, "className" | "defaultSelectedKeys" | "disabledKeys" | "onRowAction" | "onSelectionChange" | "onSortChange" | "selectedKeys" | "selectionMode" | "sortDescriptor" | "style"> & RadiusProps & Readonly<{
+type TableRootBaseProps = Omit<AriaTableProps, "className" | "defaultSelectedKeys" | "disabledKeys" | "onRowAction" | "onSelectionChange" | "onSortChange" | "selectedKeys" | "selectionMode" | "sortDescriptor" | "style" | "expandedKeys" | "defaultExpandedKeys" | "onExpandedChange" | "treeColumn" | "shouldSelectOnPressUp"> & RadiusProps & Readonly<{
     className?: string;
-    color?: ControlColor;
-    disabledValues?: readonly string[];
-    onRowAction?: (value: string) => void;
+    /** Color laid beneath selected Rows. */
+    color?: Color;
+    /** Runs with the value of the Row that was activated. */
+    onAction?: (value: string) => void;
     onSortChange?: (sort: TableSort) => void;
+    /** Whether a Row is selected when the press ends instead of when it starts. */
+    selectOnPressUp?: boolean;
     size?: ScaleLevel;
     sort?: TableSort;
     style?: CSSProperties;
 }>;
-export type TableNoSelectionProps = Readonly<{
-    selectionMode?: "none";
-    value?: never;
-    defaultValue?: never;
-    onChange?: never;
-}>;
-export type TableSingleSelectionProps = SingleStringSelectionProps & Readonly<{
-    selectionMode: "single";
-}>;
+export type TableNoSelectionProps = NoSelectionProps;
+export type TableSingleSelectionProps = SingleSelectionProps;
 export type TableMultipleValue = MultipleStringSelection;
-export type TableMultipleSelectionProps = MultipleStringSelectionProps & Readonly<{
-    selectionMode: "multiple";
-}>;
+export type TableMultipleSelectionProps = MultipleSelectionProps;
 export type TableRootProps = TableRootBaseProps & (TableNoSelectionProps | TableSingleSelectionProps | TableMultipleSelectionProps);
-export declare const TableRoot: import("react").ForwardRefExoticComponent<TableRootProps & RefAttributes<HTMLDivElement | HTMLTableElement>>;
 export interface TableHeaderProps<T extends object = object> extends Omit<AriaTableHeaderProps<T>, "className" | "style"> {
     readonly className?: string;
-    readonly color?: ControlColor;
     readonly style?: CSSProperties;
 }
 export type TableHeaderComponent = <T extends object = object>(properties: TableHeaderProps<T> & RefAttributes<HTMLTableSectionElement | HTMLDivElement>) => ReactElement | null;
-export declare const TableHeader: TableHeaderComponent;
-export interface TableColumnProps extends Omit<AriaColumnProps, "className" | "id" | "style"> {
-    readonly className?: string;
+export interface TableColumnProps extends Omit<AriaColumnProps, "allowsSorting" | "allowsArrowNavigation" | "className" | "id" | "isRowHeader" | "style"> {
+    /** Whether arrow keys move between cells while focus is inside this one. */
+    readonly arrowNavigation?: boolean;
+    /** Identity of this Column, reported in sort changes. */
     readonly id: string;
+    /** Whether cells in this Column label their Row. */
+    readonly rowHeader?: boolean;
+    /** Whether pressing this Column requests a sort. */
+    readonly sortable?: boolean;
+    readonly className?: string;
     readonly style?: CSSProperties;
 }
-export declare const TableColumn: import("react").ForwardRefExoticComponent<TableColumnProps & RefAttributes<HTMLDivElement | HTMLTableCellElement>>;
 export interface TableBodyProps<T extends object = object> extends Omit<AriaTableBodyProps<T>, "className" | "style"> {
     readonly className?: string;
     readonly style?: CSSProperties;
 }
 export type TableBodyComponent = <T extends object = object>(properties: TableBodyProps<T> & RefAttributes<HTMLTableSectionElement | HTMLDivElement>) => ReactElement | null;
-export declare const TableBody: TableBodyComponent;
-export interface TableRowProps<T extends object = object> extends Omit<AriaRowProps<T>, "className" | "id" | "isDisabled" | "style"> {
+export interface TableRowProps<T extends object = object> extends Omit<AriaRowProps<T>, "className" | "id" | "isDisabled" | "style" | "hasChildItems"> {
+    /** Identity of this Row within its Table. */
+    readonly id: string;
     readonly className?: string;
     readonly disabled?: boolean;
-    readonly id: string;
     readonly style?: CSSProperties;
 }
 export type TableRowComponent = <T extends object = object>(properties: TableRowProps<T> & RefAttributes<HTMLTableRowElement | HTMLDivElement>) => ReactElement | null;
-export declare const TableRow: TableRowComponent;
-export interface TableCellProps extends Omit<AriaCellProps, "className" | "style"> {
+export interface TableCellProps extends Omit<AriaCellProps, "className" | "style" | "allowsArrowNavigation"> {
+    /** Whether arrow keys move between cells while focus is inside this one. */
+    readonly arrowNavigation?: boolean;
     readonly className?: string;
     readonly style?: CSSProperties;
 }
-export declare const TableCell: import("react").ForwardRefExoticComponent<TableCellProps & RefAttributes<HTMLDivElement | HTMLTableCellElement>>;
 /** Structured rows and columns with optional selection and consumer-owned sorting. */
 export declare const Table: import("react").ForwardRefExoticComponent<TableRootProps & RefAttributes<HTMLDivElement | HTMLTableElement>> & {
     Header: TableHeaderComponent;

package/dist/table.js

@@ -1,148 +1,110 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { createContext, forwardRef, useContext, useMemo } from "react";
 import { Cell as AriaCell, Column as AriaColumn, Row as AriaRow, Table as AriaTable, TableBody as AriaTableBody, TableHeader as AriaTableHeader } from "react-aria-components";
-import { colorOpacity } from "./color.js";
-import { controlFontWeight, controlOpacity, useControlTheme } from "./control.js";
-import { resolveDirection, useDirection } from "./direction.js";
-import { multipleSelection, singleSelection, stringKey, toAriaSelection } from "./selection.js";
-import { AriaDirectionBoundary } from "./aria-direction.js";
-const TableThemeContext = createContext(null);
-export const TableRoot = forwardRef(function TableRoot(properties, ref) {
-    const { className, color, defaultValue, disabledValues, onChange, onRowAction, onSortChange, radius = "medium", selectionMode = "none", size = "medium", sort, style, value, ...native } = properties;
-    const theme = useControlTheme({ color, radius, size });
-    const context = useMemo(() => ({ color, interactive: selectionMode !== "none" || onRowAction != null, radius, size, theme }), [color, onRowAction, radius, selectionMode, size, theme]);
+import { controlFontWeight, controlOpacity, transition, useControlMetrics } from "./control/control.js";
+import { separatorColor } from "./control/field.js";
+import { itemPaint } from "./control/item.js";
+import { ariaSelection, stringKey } from "./control/selection.js";
+import { AriaDirectionBoundary } from "./foundation/aria-direction.js";
+import { colorOpacity } from "./foundation/color.js";
+import { resolveDirection, useDirection } from "./foundation/direction.js";
+import { dimmedClass } from "./surface/surface.js";
+import { ChevronUp } from "lucide-react";
+import { iconProps } from "./control/icon.js";
+const TableStyleContext = createContext(null);
+/** Structured rows and columns with optional selection and consumer-owned sorting. */
+const TableRoot = forwardRef(function Table(properties, ref) {
+    const { className, color = "primary", defaultValue: _defaultValue, onAction, onChange: _onChange, onSortChange, radius, selectOnPressUp, selectionMode = "none", size, sort, style, value: _value, ...native } = properties;
+    const metrics = useControlMetrics(size, radius);
+    const context = useMemo(() => ({ color, interactive: selectionMode !== "none" || onAction != null, metrics }), [color, metrics, onAction, selectionMode]);
     const direction = resolveDirection(native.dir, useDirection());
-    return _jsx(TableThemeContext.Provider, { value: context, children: _jsx(AriaDirectionBoundary, { direction: direction, children: _jsx(AriaTable, { ...native, ...selectionProperties(properties), ...(sort === undefined ? {} : { sortDescriptor: sort }), ref: ref, dir: direction, className: className, disabledKeys: disabledValues, selectionMode: selectionMode, onRowAction: onRowAction == null ? undefined : key => onRowAction(stringKey(key)), onSortChange: onSortChange == null ? undefined : descriptor => onSortChange(tableSort(descriptor)), style: {
+    return _jsx(TableStyleContext.Provider, { value: context, children: _jsx(AriaDirectionBoundary, { direction: direction, children: _jsx(AriaTable, { ...native, shouldSelectOnPressUp: selectOnPressUp, ...ariaSelection(properties, "none"), ...(sort === undefined ? {} : { sortDescriptor: sort }), ref: ref, dir: direction, className: className, onRowAction: onAction == null ? undefined : key => onAction(stringKey(key)), onSortChange: onSortChange == null ? undefined : descriptor => onSortChange(tableSort(descriptor)), style: {
                     width: "100%",
                     minWidth: "max-content",
                     borderCollapse: "separate",
                     borderSpacing: 0,
                     boxSizing: "border-box",
-                    borderRadius: theme.radius,
-                    // Header and row paints belong to the table, so the table must clip
-                    // them rather than relying on a surrounding surface for its radius.
+                    // Row paints belong to the table, so the table clips them to its own radius.
+                    borderRadius: metrics.radius,
                     overflow: "hidden",
                     fontFamily: "inherit",
-                    fontSize: theme.fontSize,
+                    fontSize: metrics.fontSize,
                     ...style
                 } }) }) });
 });
-function selectionProperties(properties) {
-    const selectedKeys = toAriaSelection(properties.value);
-    const defaultSelectedKeys = toAriaSelection(properties.defaultValue);
-    const onSelectionChange = properties.onChange == null
-        ? undefined
-        : (selection) => {
-            if (properties.selectionMode === "multiple") {
-                properties.onChange?.(multipleSelection(selection));
-                return;
-            }
-            if (properties.selectionMode === "single")
-                properties.onChange?.(singleSelection(selection));
-        };
-    return {
-        ...(selectedKeys !== undefined ? { selectedKeys } : {}),
-        ...(defaultSelectedKeys !== undefined ? { defaultSelectedKeys } : {}),
-        ...(onSelectionChange !== undefined ? { onSelectionChange } : {})
-    };
-}
 function tableSort(descriptor) {
     return { column: stringKey(descriptor.column), direction: descriptor.direction };
 }
-const TableHeaderImplementation = forwardRef(function TableHeader({ className, color, style, ...properties }, ref) {
-    const inherited = useTableContext();
-    const resolvedColor = color ?? inherited.color;
-    const theme = useControlTheme({ color: resolvedColor, radius: inherited.radius, size: inherited.size });
-    const context = useMemo(() => ({ ...inherited, color: resolvedColor, theme }), [inherited, resolvedColor, theme]);
-    return _jsx(TableThemeContext.Provider, { value: context, children: _jsx(AriaTableHeader, { ...properties, ref: ref, className: className, style: { ...style } }) });
+const TableHeaderImplementation = forwardRef(function TableHeader({ className, style, ...properties }, ref) {
+    useTableStyle();
+    return _jsx(AriaTableHeader, { ...properties, ref: ref, className: className, style: style });
 });
-export const TableHeader = TableHeaderImplementation;
-export const TableColumn = forwardRef(function TableColumn({ allowsSorting = false, children, className, style, textValue, ...properties }, ref) {
-    const theme = useTableTheme();
-    return _jsx(AriaColumn, { ...properties, ref: ref, allowsSorting: allowsSorting, className: className, textValue: textValue ?? (typeof children === "string" ? children : undefined), style: state => ({
-            ...theme.transition,
-            minWidth: 0,
-            height: theme.height,
-            paddingBlock: theme.gap,
-            paddingInline: Math.max(8, theme.spacing),
+const TableColumn = forwardRef(function TableColumn({ sortable = false, rowHeader, arrowNavigation, children, className, style, textValue, ...properties }, ref) {
+    const { metrics } = useTableStyle();
+    const { colors } = metrics.visual;
+    return _jsx(AriaColumn, { ...properties, allowsArrowNavigation: arrowNavigation, ref: ref, isRowHeader: rowHeader, allowsSorting: sortable, className: className, textValue: textValue ?? (typeof children === "string" ? children : undefined), style: state => ({
+            ...transition(metrics.visual, "color, outline-color"),
+            height: metrics.height,
+            paddingInline: metrics.inset,
             boxSizing: "border-box",
-            outline: state.isFocusVisible ? `1px solid ${theme.focusColor}` : "none",
-            outlineOffset: -1,
-            ...(state.isHovered && allowsSorting ? theme.paints.palette.hover : theme.paints.palette.rest),
-            cursor: allowsSorting ? "pointer" : "default",
+            outline: `3px solid ${state.isFocusVisible ? colorOpacity(colors.primary, 0.34) : "transparent"}`,
+            outlineOffset: -3,
+            cursor: sortable ? "pointer" : "default",
+            fontSize: "0.92em",
             fontWeight: controlFontWeight,
             textAlign: "start",
             userSelect: "none",
+            opacity: state.isHovered && sortable ? 1 : controlOpacity.secondary,
             ...style
-        }), children: state => _jsxs("span", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", gap: theme.gap, minWidth: 0 }, children: [_jsx("span", { style: { minWidth: 0 }, children: typeof children === "function" ? children(state) : children }), allowsSorting && state.sortDirection != null && _jsx(SortIndicator, { direction: state.sortDirection, theme: theme })] }) });
+        }), children: state => _jsxs("span", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", gap: metrics.gap, minWidth: 0 }, children: [_jsx("span", { style: { minWidth: 0 }, children: typeof children === "function" ? children(state) : children }), sortable && state.sortDirection != null && _jsx(ChevronUp, { ...iconProps(14), style: { ...transition(metrics.visual, "rotate"), flexShrink: 0, rotate: state.sortDirection === "descending" ? "180deg" : "0deg" } })] }) });
 });
-function SortIndicator({ direction, theme }) {
-    return _jsx("svg", { "aria-hidden": "true", width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", stroke: "currentColor", strokeWidth: "1.5", style: {
-            ...theme.transition,
-            flexShrink: 0,
-            transitionProperty: "transform",
-            transform: `rotate(${direction === "descending" ? 180 : 0}deg)`
-        }, children: _jsx("path", { d: "m2 8 4-4 4 4" }) });
-}
 const TableBodyImplementation = forwardRef(function TableBody({ className, style, ...properties }, ref) {
-    return _jsx(AriaTableBody, { ...properties, ref: ref, className: className, style: { ...style } });
+    return _jsx(AriaTableBody, { ...properties, ref: ref, className: className, style: style });
 });
-export const TableBody = TableBodyImplementation;
+/** Rows use the collection Item treatment as their own paint. */
 const TableRowImplementation = forwardRef(function TableRow({ className, disabled = false, onAction, style, ...properties }, ref) {
-    const { interactive, theme } = useTableContext();
-    return _jsx(AriaRow, { ...properties, ref: ref, className: className, isDisabled: disabled, onAction: onAction, style: state => ({
-            ...theme.transition,
-            outline: state.isFocusVisible ? `1px solid ${theme.focusColor}` : "none",
-            outlineOffset: -1,
-            cursor: disabled ? "not-allowed" : interactive || onAction != null ? "pointer" : "default",
-            opacity: disabled ? controlOpacity.disabled : 1,
-            ...(state.isSelected
-                ? state.isPressed
-                    ? theme.paints.palette.pressed
-                    : state.isHovered
-                        ? theme.paints.palette.hover
-                        : theme.paints.palette.rest
-                : state.isHovered && (interactive || onAction != null)
-                    ? theme.paints.subtle.hover
-                    : { background: "transparent", color: "inherit" }),
+    const { color, interactive, metrics } = useTableStyle();
+    const responds = interactive || onAction != null;
+    return _jsx(AriaRow, { ...properties, ref: ref, className: state => dimmedClass(state.isDisabled, className ?? state.defaultClassName) ?? "", isDisabled: disabled, onAction: onAction, style: state => ({
+            ...transition(metrics.visual, "background-color, color, outline-color"),
+            ...itemPaint(metrics.visual, color, {
+                selected: state.isSelected,
+                hovered: responds && state.isHovered,
+                pressed: responds && state.isPressed,
+                focusVisible: false,
+                disabled: state.isDisabled
+            }),
+            outline: `3px solid ${state.isFocusVisible ? colorOpacity(metrics.visual.colors.primary, 0.34) : "transparent"}`,
+            outlineOffset: -3,
+            cursor: state.isDisabled ? "not-allowed" : responds ? "pointer" : "default",
             ...style
         }) });
 });
-export const TableRow = TableRowImplementation;
-export const TableCell = forwardRef(function TableCell({ className, style, ...properties }, ref) {
-    const theme = useTableTheme();
-    const separator = colorOpacity(theme.tint, controlOpacity.separator);
-    return _jsx(AriaCell, { ...properties, ref: ref, className: className, style: state => ({
-            minWidth: 0,
-            height: theme.height,
-            paddingBlock: theme.gap,
-            paddingInline: Math.max(8, theme.spacing),
+const TableCell = forwardRef(function TableCell({ arrowNavigation, className, style, ...properties }, ref) {
+    const { metrics } = useTableStyle();
+    return _jsx(AriaCell, { ...properties, allowsArrowNavigation: arrowNavigation, ref: ref, className: className, style: state => ({
+            height: metrics.height,
+            paddingInline: metrics.inset,
             boxSizing: "border-box",
-            // Separators belong to the row that follows them. This preserves every
-            // internal boundary while leaving the final row without a bottom edge.
-            borderBlockStart: `1px solid ${separator}`,
-            outline: state.isFocusVisible ? `1px solid ${theme.focusColor}` : "none",
-            outlineOffset: -1,
-            background: "transparent",
-            color: "inherit",
+            // Separators belong to the row that follows them, so the last row has no bottom edge.
+            borderBlockStart: `1px solid ${separatorColor(metrics)}`,
+            outline: `3px solid ${state.isFocusVisible ? colorOpacity(metrics.visual.colors.primary, 0.34) : "transparent"}`,
+            outlineOffset: -3,
             textAlign: "start",
             ...style
         }) });
 });
-function useTableContext() {
-    const value = useContext(TableThemeContext);
-    if (value == null)
+function useTableStyle() {
+    const context = useContext(TableStyleContext);
+    if (context == null)
         throw new Error("Table parts must be used inside Table");
-    return value;
-}
-function useTableTheme() {
-    return useTableContext().theme;
+    return context;
 }
 /** Structured rows and columns with optional selection and consumer-owned sorting. */
 export const Table = Object.assign(TableRoot, {
-    Header: TableHeader,
+    Header: TableHeaderImplementation,
     Column: TableColumn,
-    Body: TableBody,
-    Row: TableRow,
+    Body: TableBodyImplementation,
+    Row: TableRowImplementation,
     Cell: TableCell
 });