@phreshos/react-ui 0.1.36 → 0.1.38

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. */

package/dist/time-field.js

@@ -1,13 +1,15 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { TimeField as AriaTimeField } from "react-aria-components";
-import { AriaDirectionBoundary } from "./aria-direction.js";
-import { FieldFeedback, FieldLabel, fieldStyle, useControlTheme } from "./control.js";
+import { AriaDirectionBoundary } from "./foundation/aria-direction.js";
+import { useControlMetrics } from "./control/control.js";
+import { FieldFeedback, FieldLabel, fieldStyle } from "./control/field.js";
 import { DateControl } from "./date-control.js";
-import { resolveDirection, useDirection } from "./direction.js";
+import { resolveDirection, useDirection } from "./foundation/direction.js";
+import { dimmedClass } from "./surface/surface.js";
 /** A locale-aware time-only field whose visible clock units are independent editable segments. */
-export const TimeField = forwardRef(function TimeField({ label, description, errorMessage, disabled, readOnly, required, invalid, size, color, radius, material, shadow, style, className, ...properties }, ref) {
-    const theme = useControlTheme({ size, color, radius });
+export const TimeField = forwardRef(function TimeField({ label, description, errorMessage, disabled, readOnly, required, invalid, size, color, radius, material, style, className, leadingZeros, ...properties }, ref) {
+    const metrics = useControlMetrics(size, radius);
     const direction = resolveDirection(properties.dir, useDirection());
-    return _jsx(AriaDirectionBoundary, { direction: direction, children: _jsx(AriaTimeField, { ...properties, ref: ref, dir: direction, className: className, isDisabled: disabled, isReadOnly: readOnly, isRequired: required, isInvalid: invalid, style: fieldStyle(theme, disabled, style), children: state => _jsxs(_Fragment, { children: [_jsx(FieldLabel, { label: label }), _jsx(DateControl, { disabled: state.isDisabled, invalid: state.isInvalid, material: material, shadow: shadow, theme: theme }), _jsx(FieldFeedback, { theme: theme, description: description, errorMessage: errorMessage })] }) }) });
+    return _jsx(AriaDirectionBoundary, { direction: direction, children: _jsx(AriaTimeField, { ...properties, ref: ref, dir: direction, className: dimmedClass(disabled ?? false, className), isDisabled: disabled, isReadOnly: readOnly, shouldForceLeadingZeros: leadingZeros, isRequired: required, isInvalid: invalid, style: fieldStyle(metrics, style), children: state => _jsxs(_Fragment, { children: [_jsx(FieldLabel, { label: label }), _jsx(DateControl, { disabled: state.isDisabled, invalid: state.isInvalid, material: material, color: color ?? "background", metrics: metrics }), _jsx(FieldFeedback, { metrics: metrics, description: description, errorMessage: errorMessage })] }) }) });
 });

package/dist/toolbar.d.ts

@@ -1,11 +1,11 @@
 import type { ComponentPropsWithoutRef, CSSProperties, ReactElement } from "react";
 import type { GroupProps as AriaGroupProps, SeparatorProps as AriaSeparatorProps } from "react-aria-components";
-import { type ControlColor } from "./control.js";
-import { type LayoutGap } from "./layout.js";
+import { type Color } from "./foundation/color.js";
+import type { LayoutGap } from "./foundation/layout.js";
 type ToolbarOrientation = "horizontal" | "vertical";
 export interface ToolbarRootProps extends Omit<ComponentPropsWithoutRef<"div">, "className" | "color" | "role" | "style"> {
     /** Base color inherited by toolbar-owned text and separators. */
-    readonly color?: ControlColor;
+    readonly color?: Color;
     /** Space between the Toolbar's direct children. */
     readonly gap?: LayoutGap;
     /** Axis used both for layout and arrow-key navigation. */
@@ -17,7 +17,9 @@ export interface ToolbarRootProps extends Omit<ComponentPropsWithoutRef<"div">,
 }
 /** A labelled group of controls with orientation-aware arrow-key navigation. */
 export declare const ToolbarRoot: import("react").ForwardRefExoticComponent<ToolbarRootProps & import("react").RefAttributes<HTMLDivElement>>;
-export interface ToolbarGroupProps extends Omit<AriaGroupProps, "className" | "style"> {
+export interface ToolbarGroupProps extends Omit<AriaGroupProps, "className" | "style" | "isDisabled" | "isInvalid" | "isReadOnly"> {
+    /** Whether every control in this group is disabled. */
+    readonly disabled?: boolean;
     /** Space between the controls in this group. */
     readonly gap?: LayoutGap;
     /** Native class name applied without replacing the group contract. */

package/dist/toolbar.js

@@ -2,18 +2,18 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { createContext, forwardRef, useContext, useMemo, useRef } from "react";
 import { FocusScope, mergeProps, mergeRefs, useFocusManager, useToolbar } from "react-aria";
 import { Group as AriaGroup, Separator as AriaSeparator } from "react-aria-components";
-import { useResolvedAppearance } from "./appearance-context.js";
-import { colorOpacity, resolveColor } from "./color.js";
-import { controlOpacity } from "./control.js";
-import { resolveDirection, useDirection } from "./direction.js";
-import { resolveGap } from "./layout.js";
+import { separatorOpacity } from "./control/field.js";
+import { colorOpacity, resolveColor } from "./foundation/color.js";
+import { resolveDirection, useDirection } from "./foundation/direction.js";
+import { resolveSpacing } from "./foundation/spacing.js";
+import { useVisual } from "./foundation/visual.js";
 const ToolbarThemeContext = createContext(null);
 /** A labelled group of controls with orientation-aware arrow-key navigation. */
 export const ToolbarRoot = forwardRef(function ToolbarRoot(properties, ref) {
     return _jsx(FocusScope, { children: _jsx(ToolbarLayout, { ...properties, ref: ref }) });
 });
 const ToolbarLayout = forwardRef(function ToolbarLayout({ className, color, gap = "medium", orientation = "horizontal", style, ...properties }, ref) {
-    const { appearance, colors } = useResolvedAppearance();
+    const { spacing, colors } = useVisual();
     const fallbackDirection = useDirection();
     const direction = resolveDirection(properties.dir, fallbackDirection);
     const localRef = useRef(null);
@@ -24,13 +24,14 @@ const ToolbarLayout = forwardRef(function ToolbarLayout({ className, color, gap
         orientation
     }, localRef);
     const { onKeyDownCapture: _localeKeyDown, ...behaviorProperties } = toolbarProps;
-    const foreground = resolveColor(color ?? "foreground:base", colors);
+    const foreground = resolveColor(color ?? "foreground", colors);
     const theme = useMemo(() => ({
-        gap: resolveGap(gap, appearance),
-        groupGap: resolveGap("small", appearance),
+        gap: resolveSpacing(gap, spacing),
+        groupGap: resolveSpacing("small", spacing),
         orientation,
-        separator: colorOpacity(foreground, controlOpacity.separator)
-    }), [appearance, foreground, gap, orientation]);
+        // A Toolbar may carry its own text color; its separator shows it like every separator.
+        separator: colorOpacity(foreground, separatorOpacity)
+    }), [spacing, foreground, gap, orientation]);
     return _jsx(ToolbarThemeContext.Provider, { value: theme, children: _jsx("div", { ...mergeProps(properties, behaviorProperties, {
                 onKeyDownCapture: toolbarKeyDown(focusManager, orientation, direction)
             }), ref: mergeRefs(localRef, ref), className: className, style: {
@@ -79,14 +80,14 @@ function toolbarKeyDown(focusManager, orientation, direction) {
     };
 }
 /** A semantic group of related controls within a Toolbar. */
-export const ToolbarGroup = forwardRef(function ToolbarGroup({ className, gap, style, ...properties }, ref) {
+export const ToolbarGroup = forwardRef(function ToolbarGroup({ className, disabled, gap, style, ...properties }, ref) {
     const inherited = useToolbarTheme();
-    const { appearance } = useResolvedAppearance();
-    return _jsx(AriaGroup, { ...properties, ref: ref, className: className, style: {
+    const { spacing } = useVisual();
+    return _jsx(AriaGroup, { ...properties, isDisabled: disabled, ref: ref, className: className, style: {
             display: "flex",
             flexDirection: inherited.orientation === "horizontal" ? "row" : "column",
             alignItems: inherited.orientation === "horizontal" ? "center" : "flex-start",
-            gap: gap === undefined ? inherited.groupGap : resolveGap(gap, appearance),
+            gap: gap === undefined ? inherited.groupGap : resolveSpacing(gap, spacing),
             minWidth: 0,
             ...style
         } });

package/dist/tooltip.d.ts

@@ -1,20 +1,29 @@
 import type { ComponentProps, CSSProperties, ReactNode } from "react";
 import type { TooltipProps as AriaTooltipProps, TooltipTriggerComponentProps as AriaTooltipTriggerProps } from "react-aria-components";
-import { type ButtonProps } from "./button.js";
-import { type SurfaceOwnProps } from "./surface.js";
-export type TooltipRootProps = AriaTooltipTriggerProps;
-export declare function TooltipRoot(properties: TooltipRootProps): import("react").JSX.Element;
-export type TooltipTriggerProps = ButtonProps;
-export declare const TooltipTrigger: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
-export interface TooltipContentProps extends Omit<AriaTooltipProps, "children" | "className" | "color" | "style">, SurfaceOwnProps {
+import { type ButtonActionProps } from "./button.js";
+import { type AriaOverlayInternals, type OverlayRootProps } from "./control/open-state.js";
+import { type Direction } from "./foundation/direction.js";
+import { type SurfaceOwnProps } from "./surface/surface.js";
+export type TooltipRootProps = OverlayRootProps & Readonly<Pick<AriaTooltipTriggerProps, "delay" | "closeDelay" | "trigger">> & Readonly<{
+    /** Whether the Tooltip is prevented from opening. */
+    disabled?: boolean;
+    /** Whether pressing the trigger closes the Tooltip. Defaults to `true`. */
+    closeOnPress?: boolean;
+}>;
+export declare function TooltipRoot({ children, delay, closeDelay, trigger, disabled, closeOnPress, ...state }: TooltipRootProps): import("react").JSX.Element;
+export type TooltipTriggerProps = ButtonActionProps;
+export declare const TooltipTrigger: import("react").ForwardRefExoticComponent<ButtonActionProps & import("react").RefAttributes<HTMLButtonElement>>;
+/** The floating Surface of a Tooltip: its placement, its own Surface, and element attributes. */
+export interface TooltipContentProps extends Omit<AriaTooltipProps, AriaOverlayInternals | "children" | "className" | "color" | "style" | "dir">, SurfaceOwnProps {
     readonly children?: ReactNode;
     readonly className?: string;
+    readonly dir?: Direction;
     readonly style?: CSSProperties;
 }
 export declare const TooltipContent: import("react").ForwardRefExoticComponent<TooltipContentProps & import("react").RefAttributes<HTMLDivElement>>;
 /** A description shown from the focus and hover state of its trigger. */
 export declare const Tooltip: typeof TooltipRoot & {
-    Trigger: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+    Trigger: import("react").ForwardRefExoticComponent<ButtonActionProps & import("react").RefAttributes<HTMLButtonElement>>;
     Content: import("react").ForwardRefExoticComponent<TooltipContentProps & import("react").RefAttributes<HTMLDivElement>>;
 };
 export type TooltipProps = ComponentProps<typeof TooltipRoot>;

package/dist/tooltip.js

@@ -1,26 +1,28 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { Tooltip as AriaTooltip, TooltipTrigger as AriaTooltipTrigger } from "react-aria-components";
-import { useResolvedAppearance } from "./appearance-context.js";
 import { Button } from "./button.js";
-import { controlFontSizes } from "./control.js";
-import MotionStyle, { overlayMotionClass, overlayTransition } from "./motion-style.js";
-import { scale } from "./scale.js";
-import { Surface } from "./surface.js";
-import { resolveDirection, useDirection } from "./direction.js";
-import { resolveDirectionalPlacement } from "./overlay-placement.js";
-export function TooltipRoot(properties) {
-    return _jsx(AriaTooltipTrigger, { ...properties });
+import { controlFontSizes } from "./control/control.js";
+import { ariaOpenState } from "./control/open-state.js";
+import { resolveDirection, useDirection } from "./foundation/direction.js";
+import MotionStyle, { overlayMotionClass, overlayTransition } from "./foundation/motion-style.js";
+import { resolveDirectionalPlacement } from "./foundation/overlay-placement.js";
+import { scale } from "./foundation/scale.js";
+import { useVisual } from "./foundation/visual.js";
+import { floatingShadow } from "./surface/shadow-options.js";
+import { Surface } from "./surface/surface.js";
+export function TooltipRoot({ children, delay, closeDelay, trigger, disabled, closeOnPress, ...state }) {
+    return _jsx(AriaTooltipTrigger, { ...ariaOpenState(state), delay: delay, closeDelay: closeDelay, trigger: trigger, isDisabled: disabled, shouldCloseOnPress: closeOnPress, children: children });
 }
 export const TooltipTrigger = forwardRef(function TooltipTrigger(properties, ref) {
     return _jsx(Button, { ...properties, ref: ref });
 });
-export const TooltipContent = forwardRef(function TooltipContent({ children, className, color, material, radius, shadow, style, offset, placement = "top", ...properties }, ref) {
-    const resolved = useResolvedAppearance();
-    const inset = scale(resolved.appearance.spacing, "small");
-    const transition = overlayTransition(resolved.transaction, resolved.preferences.animations);
-    const direction = resolveDirection(properties.dir, useDirection());
-    return _jsxs(_Fragment, { children: [_jsx(MotionStyle, {}), _jsx(AriaTooltip, { ...properties, ref: ref, dir: direction, offset: offset ?? inset, placement: resolveDirectionalPlacement(placement, direction), className: overlayMotionClass, style: transition, children: _jsx(Surface, { dir: direction, className: className, color: color, material: material, radius: radius, shadow: shadow, style: {
+export const TooltipContent = forwardRef(function TooltipContent({ children, className, color, material, radius, shadow, style, offset, placement = "top", dir, ...attributes }, ref) {
+    const visual = useVisual();
+    const inset = scale(visual.spacing, "small");
+    const transition = overlayTransition(visual);
+    const direction = resolveDirection(dir, useDirection());
+    return _jsxs(_Fragment, { children: [_jsx(MotionStyle, {}), _jsx(AriaTooltip, { ...attributes, ref: ref, dir: direction, offset: offset ?? inset, placement: resolveDirectionalPlacement(placement, direction), className: overlayMotionClass, style: transition, children: _jsx(Surface, { dir: direction, className: className, color: color ?? "foreground", material: material, radius: radius, shadow: shadow ?? floatingShadow(visual.shadow), style: {
                         boxSizing: "border-box",
                         maxWidth: "28em",
                         paddingBlock: inset,

package/dist/tree.d.ts

@@ -1,52 +1,47 @@
 import type { CSSProperties, ReactElement, RefAttributes } from "react";
 import { Collection as AriaCollection } from "react-aria-components";
 import type { CollectionProps as AriaCollectionProps, TreeItemContentProps as AriaTreeItemContentProps, TreeItemProps as AriaTreeItemProps, TreeProps as AriaTreeProps } 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";
-type TreeRootBaseProps<T extends object> = Omit<AriaTreeProps<T>, "className" | "defaultExpandedKeys" | "defaultSelectedKeys" | "disabledKeys" | "expandedKeys" | "onAction" | "onExpandedChange" | "onSelectionChange" | "selectedKeys" | "selectionMode" | "style"> & RadiusProps & Readonly<{
+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";
+type TreeRootBaseProps<T extends object> = Omit<AriaTreeProps<T>, "className" | "defaultExpandedKeys" | "defaultSelectedKeys" | "disabledKeys" | "expandedKeys" | "onAction" | "onExpandedChange" | "onSelectionChange" | "selectedKeys" | "selectionMode" | "style" | "shouldSelectOnPressUp"> & RadiusProps & Readonly<{
     className?: string;
-    color?: ControlColor;
+    /** Color laid beneath selected Items. */
+    color?: Color;
     defaultExpanded?: readonly string[];
-    disabledValues?: readonly string[];
     expanded?: readonly string[];
     onExpandedChange?: (values: readonly string[]) => void;
-    onItemAction?: (value: string) => void;
+    /** Runs with the value of the Item that was activated. */
+    onAction?: (value: string) => void;
+    /** Whether an Item is selected when the press ends instead of when it starts. */
+    selectOnPressUp?: boolean;
     size?: ScaleLevel;
     style?: CSSProperties;
 }>;
-export type TreeNoSelectionProps = Readonly<{
-    selectionMode?: "none";
-    value?: never;
-    defaultValue?: never;
-    onChange?: never;
-}>;
-export type TreeSingleSelectionProps = SingleStringSelectionProps & Readonly<{
-    selectionMode: "single";
-}>;
+export type TreeNoSelectionProps = NoSelectionProps;
+export type TreeSingleSelectionProps = SingleSelectionProps;
 export type TreeMultipleValue = MultipleStringSelection;
-export type TreeMultipleSelectionProps = MultipleStringSelectionProps & Readonly<{
-    selectionMode: "multiple";
-}>;
+export type TreeMultipleSelectionProps = MultipleSelectionProps;
 export type TreeRootProps<T extends object = object> = TreeRootBaseProps<T> & (TreeNoSelectionProps | TreeSingleSelectionProps | TreeMultipleSelectionProps);
 export type TreeRootComponent = <T extends object = object>(properties: TreeRootProps<T> & RefAttributes<HTMLDivElement>) => ReactElement | null;
-export declare const TreeRoot: TreeRootComponent;
-export interface TreeItemProps<T = object> extends Omit<AriaTreeItemProps<T>, "className" | "id" | "isDisabled" | "style"> {
+export interface TreeItemProps<T = object> extends Omit<AriaTreeItemProps<T>, "className" | "id" | "isDisabled" | "style" | "hasChildItems" | "allowsArrowNavigation"> {
+    /** Identity of this Item within its Tree. */
+    readonly id: string;
+    /** Whether arrow keys move between cells while focus is inside this one. */
+    readonly arrowNavigation?: boolean;
+    /** Whether this Item can expand before its children have loaded. */
+    readonly expandable?: boolean;
     readonly className?: string;
     readonly disabled?: boolean;
-    readonly id: string;
     readonly style?: CSSProperties;
 }
 export type TreeItemComponent = <T = object>(properties: TreeItemProps<T> & RefAttributes<HTMLDivElement>) => ReactElement | null;
-export declare const TreeItem: TreeItemComponent;
 export interface TreeContentProps extends AriaTreeItemContentProps {
     readonly children: AriaTreeItemContentProps["children"];
 }
-export declare const TreeContent: import("react").ForwardRefExoticComponent<TreeContentProps & RefAttributes<Element>>;
 export type TreeCollectionProps<T extends object = object> = AriaCollectionProps<T>;
-export declare const TreeCollection: typeof AriaCollection;
-/** Hierarchical navigation with independently controlled expansion, selection, and item actions. */
+/** Hierarchical navigation with independently controlled expansion, selection, and actions. */
 export declare const Tree: TreeRootComponent & {
     Item: TreeItemComponent;
     Content: import("react").ForwardRefExoticComponent<TreeContentProps & RefAttributes<Element>>;