@phreshos/react-ui 0.1.36 → 0.1.37

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
 });

package/dist/tabs.d.ts

@@ -1,11 +1,13 @@
 import type { CSSProperties, ReactElement, RefAttributes } from "react";
 import type { TabListProps as AriaTabListProps, TabPanelProps as AriaTabPanelProps, TabPanelsProps as AriaTabPanelsProps, TabProps as AriaTabProps, TabsProps as AriaTabsProps } from "react-aria-components";
-import type { ControlColor } from "./control.js";
-import type { RadiusProps } from "./radius.js";
-import type { ScaleLevel } from "./scale.js";
-export interface TabsRootProps extends Omit<AriaTabsProps, "className" | "defaultSelectedKey" | "isDisabled" | "onSelectionChange" | "selectedKey" | "style">, RadiusProps {
+import { type Color } from "./foundation/color.js";
+import type { RadiusProps } from "./foundation/radius.js";
+import type { ScaleLevel } from "./foundation/scale.js";
+import type { MaterialOverrides } from "./surface/material-options.js";
+export interface TabsRootProps extends Omit<AriaTabsProps, "className" | "defaultSelectedKey" | "disabledKeys" | "isDisabled" | "onSelectionChange" | "selectedKey" | "style">, RadiusProps, MaterialOverrides {
     readonly className?: string;
-    readonly color?: ControlColor;
+    /** Paint of the raised selection. */
+    readonly color?: Color;
     readonly defaultValue?: string;
     readonly disabled?: boolean;
     readonly onChange?: (value: string) => void;
@@ -13,29 +15,28 @@ export interface TabsRootProps extends Omit<AriaTabsProps, "className" | "defaul
     readonly style?: CSSProperties;
     readonly value?: string;
 }
-export declare const TabsRoot: import("react").ForwardRefExoticComponent<TabsRootProps & RefAttributes<HTMLDivElement>>;
 export interface TabsListProps<T extends object = object> extends Omit<AriaTabListProps<T>, "className" | "style"> {
     readonly className?: string;
     readonly style?: CSSProperties;
 }
 export type TabsListComponent = <T extends object = object>(properties: TabsListProps<T> & RefAttributes<HTMLDivElement>) => ReactElement | null;
-export declare const TabsList: TabsListComponent;
-export interface TabsTabProps extends Omit<AriaTabProps, "className" | "id" | "isDisabled" | "style"> {
+export interface TabsTabProps extends Omit<AriaTabProps, "className" | "id" | "isDisabled" | "render" | "style"> {
+    /** Identity shared with the corresponding Panel. */
+    readonly id: string;
     readonly className?: string;
     readonly disabled?: boolean;
-    readonly id: string;
     readonly style?: CSSProperties;
 }
-export declare const TabsTab: import("react").ForwardRefExoticComponent<TabsTabProps & RefAttributes<HTMLDivElement>>;
 export type TabsPanelsProps<T extends object = object> = AriaTabPanelsProps<T>;
-export declare const TabsPanels: <T>(props: AriaTabPanelsProps<T> & React.RefAttributes<HTMLDivElement>) => React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | null;
-export interface TabsPanelProps extends Omit<AriaTabPanelProps, "className" | "id" | "style"> {
-    readonly className?: string;
+export interface TabsPanelProps extends Omit<AriaTabPanelProps, "className" | "id" | "style" | "shouldForceMount"> {
+    /** Identity shared with the corresponding Tab. */
     readonly id: string;
+    readonly className?: string;
+    /** Whether the Panel stays mounted while another Tab is selected. */
+    readonly forceMount?: boolean;
     readonly style?: CSSProperties;
 }
-export declare const TabsPanel: import("react").ForwardRefExoticComponent<TabsPanelProps & RefAttributes<HTMLDivElement>>;
-/** Peer views with one selected tab and one corresponding panel. */
+/** Peer views with one selected Tab and one corresponding Panel. */
 export declare const Tabs: import("react").ForwardRefExoticComponent<TabsRootProps & RefAttributes<HTMLDivElement>> & {
     List: TabsListComponent;
     Tab: import("react").ForwardRefExoticComponent<TabsTabProps & RefAttributes<HTMLDivElement>>;

package/dist/tabs.js

@@ -1,103 +1,61 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { createContext, forwardRef, useContext, useId, useMemo } from "react";
-import { Tab as AriaTab, TabList as AriaTabList, TabPanel as AriaTabPanel, TabPanels as AriaTabPanels, Tabs as AriaTabs } from "react-aria-components";
-import { LayoutGroup, motion } from "motion/react";
-import { AriaDirectionBoundary } from "./aria-direction.js";
-import { controlOpacity, useControlTheme } from "./control.js";
-import { resolveDirection, useDirection } from "./direction.js";
-import { stringKey } from "./selection.js";
-import { Surface } from "./surface.js";
-const TabsThemeContext = createContext(null);
-export const TabsRoot = forwardRef(function TabsRoot({ className, color, defaultValue, disabled = false, onChange, orientation = "horizontal", radius = "medium", size = "medium", style, value, ...properties }, ref) {
-    const theme = useControlTheme({ color, radius, size });
-    const context = useMemo(() => ({ orientation, theme }), [orientation, theme]);
-    const layoutGroup = useId();
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, forwardRef, useContext, useMemo } from "react";
+import { Tab as AriaTab, TabList as AriaTabList, TabPanel as AriaTabPanel, TabPanels as AriaTabPanels, Tabs as AriaTabs, TabListStateContext } from "react-aria-components";
+import { useControlMetrics } from "./control/control.js";
+import { SelectionItemLabel, selectionItemStyle, selectionListStyle, SelectionTrack } from "./control/selection-track.js";
+import { 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";
+const TabsStyleContext = createContext(null);
+/** Peer views with one selected Tab and its corresponding Panel. */
+const TabsRoot = forwardRef(function Tabs({ className, color = "default", defaultValue, disabled = false, onChange, orientation = "horizontal", material, radius, size, style, value, ...properties }, ref) {
+    const metrics = useControlMetrics(size, radius);
+    const context = useMemo(() => ({ color, material, metrics, orientation }), [color, material, metrics, orientation]);
     const direction = resolveDirection(properties.dir, useDirection());
-    return _jsx(TabsThemeContext.Provider, { value: context, children: _jsx(LayoutGroup, { id: layoutGroup, children: _jsx(AriaDirectionBoundary, { direction: direction, children: _jsx(AriaTabs, { ...properties, ...(value !== undefined ? { selectedKey: value } : {}), ...(defaultValue !== undefined ? { defaultSelectedKey: defaultValue } : {}), ref: ref, dir: direction, className: className, isDisabled: disabled, orientation: orientation, onSelectionChange: key => onChange?.(stringKey(key)), style: {
-                        display: "flex",
-                        flexDirection: orientation === "horizontal" ? "column" : "row",
-                        alignItems: "stretch",
-                        gap: theme.gap,
-                        minWidth: 0,
-                        fontFamily: "inherit",
-                        fontSize: theme.fontSize,
-                        ...style
-                    } }) }) }) });
+    return _jsx(TabsStyleContext.Provider, { value: context, children: _jsx(AriaDirectionBoundary, { direction: direction, children: _jsx(AriaTabs, { ...properties, ...(value !== undefined ? { selectedKey: value } : {}), ...(defaultValue !== undefined ? { defaultSelectedKey: defaultValue } : {}), ref: ref, dir: direction, className: className, isDisabled: disabled, orientation: orientation, onSelectionChange: key => onChange?.(stringKey(key)), style: {
+                    display: "flex",
+                    flexDirection: orientation === "horizontal" ? "column" : "row",
+                    alignItems: "stretch",
+                    gap: metrics.gap,
+                    minWidth: 0,
+                    fontFamily: "inherit",
+                    fontSize: metrics.fontSize,
+                    ...style
+                } }) }) });
 });
+/** The Tabs sit in a SelectionTrack; the selection slides to the selected Tab. */
 const TabsListImplementation = forwardRef(function TabsList({ className, style, ...properties }, ref) {
-    const { orientation, theme } = useTabsTheme();
-    return _jsx(AriaTabList, { ...properties, ref: ref, className: className, style: {
-            display: "grid",
-            gridAutoFlow: orientation === "horizontal" ? "column" : "row",
-            gridAutoColumns: orientation === "horizontal" ? "minmax(0, 1fr)" : undefined,
-            alignContent: "start",
-            alignItems: "stretch",
-            gap: Math.max(2, theme.gap / 2),
-            minWidth: 0,
-            width: orientation === "horizontal" ? "100%" : undefined,
-            boxSizing: "border-box",
-            padding: Math.max(2, theme.gap / 2),
-            borderRadius: theme.radius,
-            background: theme.paints.palette.rest.background,
-            ...style
-        } });
+    const { color, material, metrics, orientation } = useTabsStyle();
+    const selectedKey = useContext(TabListStateContext)?.selectedKey;
+    return _jsx(SelectionTrack, { metrics: metrics, color: color, material: material, orientation: orientation, selectedKey: selectedKey, className: className, style: style, children: _jsx(AriaTabList, { ...properties, ref: ref, "data-selection-list": "", style: selectionListStyle(orientation) }) });
 });
-export const TabsList = TabsListImplementation;
-export const TabsTab = forwardRef(function TabsTab({ children, className, disabled = false, style, ...properties }, ref) {
-    const { orientation, theme } = useTabsTheme();
-    return _jsx(AriaTab, { ...properties, ref: ref, className: className, isDisabled: disabled, style: state => ({
-            ...theme.transition,
-            position: "relative",
-            zIndex: 0,
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
-            width: "100%",
-            minWidth: 0,
-            minHeight: theme.height,
-            paddingBlock: 0,
-            paddingInline: Math.max(8, theme.spacing),
-            boxSizing: "border-box",
-            borderRadius: theme.radius,
-            outline: state.isFocusVisible ? `1px solid ${theme.focusColor}` : "none",
-            outlineOffset: 1,
-            cursor: disabled ? "not-allowed" : "pointer",
-            opacity: disabled ? controlOpacity.disabled : 1,
-            userSelect: "none",
-            background: "transparent",
-            color: theme.paints.palette.rest.color,
-            ...(orientation === "vertical" ? { justifyContent: "start" } : {}),
-            ...style
-        }), children: state => _jsxs(_Fragment, { children: [state.isSelected && _jsx(Surface, { as: motion.span, "data-tabs-indicator": "", "aria-hidden": "true", initial: false, layoutId: "selection", color: theme.paints.palette.hover.background, transition: theme.motionTransition, style: {
-                        position: "absolute",
-                        zIndex: -1,
-                        inset: 0,
-                        boxSizing: "border-box",
-                        borderRadius: theme.radius,
-                        pointerEvents: "none"
-                    } }), _jsx("span", { style: { minWidth: 0, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: typeof children === "function" ? children(state) : children })] }) });
+const TabsTab = forwardRef(function TabsTab({ children, className, disabled = false, style, ...properties }, ref) {
+    const { color, metrics, orientation } = useTabsStyle();
+    return _jsx(AriaTab, { ...properties, ref: ref, className: state => dimmedClass(state.isDisabled, className ?? state.defaultClassName) ?? "", isDisabled: disabled, style: state => ({ ...selectionItemStyle(metrics, color, orientation, state), ...style }), children: state => _jsx(SelectionItemLabel, { metrics: metrics, emphasized: state.isSelected || state.isHovered, children: typeof children === "function" ? children(state) : children }) });
 });
-export const TabsPanels = AriaTabPanels;
-export const TabsPanel = forwardRef(function TabsPanel({ className, style, ...properties }, ref) {
-    const { orientation, theme } = useTabsTheme();
-    return _jsx(AriaTabPanel, { ...properties, ref: ref, className: className, style: state => ({
+const TabsPanel = forwardRef(function TabsPanel({ className, forceMount, style, ...properties }, ref) {
+    const { metrics, orientation } = useTabsStyle();
+    return _jsx(AriaTabPanel, { ...properties, shouldForceMount: forceMount, ref: ref, className: className, style: state => ({
             flex: orientation === "vertical" ? "1 1 auto" : undefined,
             minWidth: 0,
-            outline: state.isFocusVisible ? `1px solid ${theme.focusColor}` : "none",
+            borderRadius: metrics.radius,
+            outline: `3px solid ${state.isFocusVisible ? colorOpacity(metrics.visual.colors.primary, 0.34) : "transparent"}`,
             outlineOffset: 1,
             ...style
         }) });
 });
-function useTabsTheme() {
-    const value = useContext(TabsThemeContext);
-    if (value == null)
+function useTabsStyle() {
+    const context = useContext(TabsStyleContext);
+    if (context == null)
         throw new Error("Tabs parts must be used inside Tabs");
-    return value;
+    return context;
 }
-/** Peer views with one selected tab and one corresponding panel. */
+/** Peer views with one selected Tab and one corresponding Panel. */
 export const Tabs = Object.assign(TabsRoot, {
-    List: TabsList,
+    List: TabsListImplementation,
     Tab: TabsTab,
-    Panels: TabsPanels,
+    Panels: AriaTabPanels,
     Panel: TabsPanel
 });

package/dist/textarea.d.ts

@@ -1,6 +1,6 @@
-import type { TextControlProps } from "./text-control.js";
+import { type TextControlProps } from "./control/text-control.js";
 export interface TextareaProps extends Omit<TextControlProps, "type" | "pattern"> {
     readonly rows?: number;
 }
-/** A labeled multiline text control, vertically resizable without escaping its width. */
+/** A labeled multiline text field, vertically resizable without escaping its width. */
 export declare const Textarea: import("react").ForwardRefExoticComponent<TextareaProps & import("react").RefAttributes<HTMLTextAreaElement>>;

package/dist/textarea.js

@@ -1,17 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { TextArea as AriaTextarea, TextField } from "react-aria-components";
-import { controlPaint, controlStyle, FieldFeedback, FieldLabel, fieldStyle, useControlTheme } from "./control.js";
-import { SurfaceField } from "./control-surface.js";
-import FieldStyle, { textControlClass } from "./field-style.js";
-/** A labeled multiline text control, vertically resizable without escaping its width. */
-export const Textarea = forwardRef(function Textarea({ label, description, errorMessage, disabled, readOnly, required, invalid, size, color, radius, style, className, placeholder, rows = 4, material, shadow, ...properties }, ref) {
-    const theme = useControlTheme({ size, color, radius });
-    return _jsxs(TextField, { ...properties, className: className, isDisabled: disabled, isReadOnly: readOnly, isRequired: required, isInvalid: invalid, style: fieldStyle(theme, disabled, style), children: [_jsx(FieldStyle, {}), _jsx(FieldLabel, { label: label }), _jsx(AriaTextarea, { ref: ref, placeholder: placeholder, rows: rows, className: textControlClass, render: (native, state) => _jsx(SurfaceField, { material: material, shadow: shadow, radius: theme.radius, paint: controlPaint(theme, state.isFocused, state.isInvalid, state.isHovered), children: _jsx("textarea", { ...native, style: { ...native.style, borderRadius: "inherit", background: "transparent" } }) }), style: state => ({
-                    ...controlStyle(theme, state.isFocused, state.isInvalid, state.isHovered, state.isFocusVisible),
-                    height: "auto",
-                    minHeight: theme.height,
-                    paddingBlock: Math.max(6, theme.spacing / 2),
-                    resize: "vertical"
-                }) }), _jsx(FieldFeedback, { theme: theme, description: description, errorMessage: errorMessage })] });
+import { TextArea as AriaTextArea, TextField } from "react-aria-components";
+import { useControlMetrics } from "./control/control.js";
+import { FieldFeedback, FieldLabel, fieldStyle } from "./control/field.js";
+import { nativeTextStyle, TextWell } from "./control/text-control.js";
+import MotionStyle, { textControlClass } from "./foundation/motion-style.js";
+import { dimmedClass } from "./surface/surface.js";
+/** A labeled multiline text field, vertically resizable without escaping its width. */
+export const Textarea = forwardRef(function Textarea({ label, description, errorMessage, disabled, readOnly, required, invalid, size, color = "background", radius, style, className, placeholder, rows = 4, material, ...properties }, ref) {
+    const metrics = useControlMetrics(size, radius);
+    return _jsxs(TextField, { ...properties, className: dimmedClass(disabled ?? false, className), isDisabled: disabled, isReadOnly: readOnly, isRequired: required, isInvalid: invalid, style: fieldStyle(metrics, style), children: [_jsx(MotionStyle, {}), _jsx(FieldLabel, { label: label }), _jsx(AriaTextArea, { ref: ref, placeholder: placeholder, rows: rows, className: textControlClass, render: (native, state) => _jsx(TextWell, { color: color, material: material, metrics: metrics, state: state, children: _jsx("textarea", { ...native }) }), style: nativeTextStyle(metrics, true) }), _jsx(FieldFeedback, { metrics: metrics, description: description, errorMessage: errorMessage })] });
 });

package/dist/time-field.d.ts

@@ -1,11 +1,10 @@
 import type { Time } from "@internationalized/date";
 import type { TimeFieldProps as AriaTimeFieldProps } from "react-aria-components";
-import type { ControlOverrides, ControlProps, FieldProps } from "./control.js";
-import type { MaterialOverrides } from "./material-options.js";
-import type { RadiusProps } from "./radius.js";
-import type { ShadowOverrides } from "./shadow-options.js";
+import { type ControlOverrides, type ControlProps, type FieldProps } from "./control/control.js";
+import type { MaterialOverrides } from "./surface/material-options.js";
+import type { RadiusProps } from "./foundation/radius.js";
 type TimeFieldOverrides = ControlOverrides | "isReadOnly" | "value" | "defaultValue" | "onChange" | "minValue" | "maxValue" | "placeholderValue" | "granularity" | "hourCycle" | "hideTimeZone" | "shouldForceLeadingZeros";
-export interface TimeFieldProps extends Omit<AriaTimeFieldProps<Time>, TimeFieldOverrides>, ControlProps, FieldProps, RadiusProps, MaterialOverrides, ShadowOverrides {
+export interface TimeFieldProps extends Omit<AriaTimeFieldProps<Time>, TimeFieldOverrides>, ControlProps, FieldProps, RadiusProps, MaterialOverrides {
     readonly value?: Time | null;
     readonly defaultValue?: Time | null;
     readonly onChange?: (value: Time | null) => void;
@@ -14,7 +13,8 @@ export interface TimeFieldProps extends Omit<AriaTimeFieldProps<Time>, TimeField
     readonly placeholderValue?: Time;
     readonly granularity?: "hour" | "minute" | "second";
     readonly hourCycle?: 12 | 24;
-    readonly shouldForceLeadingZeros?: boolean;
+    /** Whether hours, days, and months always show two digits. */
+    readonly leadingZeros?: boolean;
     readonly readOnly?: boolean;
 }
 /** A locale-aware time-only field whose visible clock units are independent editable segments. */