@phreshos/react-ui 0.1.36 → 0.1.37

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,14 +1,23 @@
 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;
+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 = ButtonProps;
 export declare const TooltipTrigger: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
-export interface TooltipContentProps extends Omit<AriaTooltipProps, "children" | "className" | "color" | "style">, SurfaceOwnProps {
+/** 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>>;

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

package/dist/tree.js

@@ -1,134 +1,89 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { createContext, forwardRef, useContext, useMemo } from "react";
 import { Button as AriaButton, Collection as AriaCollection, Tree as AriaTree, TreeItem as AriaTreeItem, TreeItemContent as AriaTreeItemContent } from "react-aria-components";
-import { controlOpacity, useControlTheme } from "./control.js";
-import { resolveDirection, useDirection } from "./direction.js";
-import { multipleSelection, singleSelection, stringKey, stringKeys, toAriaSelection } from "./selection.js";
-import { AriaDirectionBoundary } from "./aria-direction.js";
-const TreeThemeContext = createContext(null);
-const TreeRootImplementation = forwardRef(function TreeRoot(properties, ref) {
-    const { className, color, defaultExpanded, defaultValue, disabledValues, expanded, onChange, onExpandedChange, onItemAction, radius = "medium", selectionMode = "none", size = "medium", style, value, ...native } = properties;
-    const theme = useControlTheme({ color, radius, size });
+import { proportionalRadius, transition, useControlMetrics } from "./control/control.js";
+import { itemPaint, itemStyle } from "./control/item.js";
+import { ariaSelection, stringKey, stringKeys } 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 { ChevronRight } from "lucide-react";
+import { iconProps } from "./control/icon.js";
+const TreeStyleContext = createContext(null);
+const TreeRootImplementation = forwardRef(function Tree(properties, ref) {
+    const { className, color = "primary", defaultExpanded, defaultValue: _defaultValue, expanded, onAction, onChange: _onChange, onExpandedChange, radius, selectOnPressUp, selectionMode = "none", size, style, value: _value, ...native } = properties;
+    const metrics = useControlMetrics(size, radius);
+    // Items are controls: they take the control radius at their size.
+    const itemRadius = metrics.radius;
     const direction = resolveDirection(native.dir, useDirection());
-    const context = useMemo(() => ({ direction, interactive: selectionMode !== "none" || onItemAction != null, theme }), [direction, onItemAction, selectionMode, theme]);
-    return _jsx(TreeThemeContext.Provider, { value: context, children: _jsx(AriaDirectionBoundary, { direction: direction, children: _jsx(AriaTree, { ...native, ...selectionProperties(properties), ...expansionProperties({ defaultExpanded, expanded, onExpandedChange }), ref: ref, dir: direction, className: className, disabledKeys: disabledValues, selectionMode: selectionMode, onAction: onItemAction == null ? undefined : key => onItemAction(stringKey(key)), style: {
+    const context = useMemo(() => ({ color, direction, interactive: selectionMode !== "none" || onAction != null, metrics, itemRadius }), [color, direction, metrics, itemRadius, onAction, selectionMode]);
+    return _jsx(TreeStyleContext.Provider, { value: context, children: _jsx(AriaDirectionBoundary, { direction: direction, children: _jsx(AriaTree, { ...native, shouldSelectOnPressUp: selectOnPressUp, ...ariaSelection(properties, "none"), ...(expanded !== undefined ? { expandedKeys: new Set(expanded) } : {}), ...(defaultExpanded !== undefined ? { defaultExpandedKeys: new Set(defaultExpanded) } : {}), ...(onExpandedChange !== undefined ? { onExpandedChange: (keys) => onExpandedChange(stringKeys(keys)) } : {}), ref: ref, dir: direction, className: className, onAction: onAction == null ? undefined : key => onAction(stringKey(key)), style: {
                     display: "grid",
                     alignContent: "start",
-                    gap: theme.gap,
+                    gap: 2,
                     minWidth: 0,
-                    padding: theme.gap,
+                    padding: metrics.listInset,
                     boxSizing: "border-box",
                     outline: "none",
                     fontFamily: "inherit",
-                    fontSize: theme.fontSize,
+                    fontSize: metrics.fontSize,
                     ...style
                 } }) }) });
 });
-export const TreeRoot = TreeRootImplementation;
-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 expansionProperties({ defaultExpanded, expanded, onExpandedChange }) {
-    return {
-        ...(expanded !== undefined ? { expandedKeys: new Set(expanded) } : {}),
-        ...(defaultExpanded !== undefined ? { defaultExpandedKeys: new Set(defaultExpanded) } : {}),
-        ...(onExpandedChange !== undefined
-            ? { onExpandedChange: (keys) => onExpandedChange(stringKeys(keys)) }
-            : {})
-    };
-}
-const TreeItemImplementation = forwardRef(function TreeItem({ className, disabled = false, onAction, style, ...properties }, ref) {
-    const { interactive, theme } = useTreeTheme();
-    return _jsx(AriaTreeItem, { ...properties, ref: ref, className: className, isDisabled: disabled, onAction: onAction, style: state => {
+/** Tree entries use the collection Item treatment as their own paint. */
+const TreeItemImplementation = forwardRef(function TreeItem({ arrowNavigation, className, disabled = false, expandable, onAction, style, ...properties }, ref) {
+    const { color, interactive, itemRadius, metrics } = useTreeStyle();
+    return _jsx(AriaTreeItem, { ...properties, allowsArrowNavigation: arrowNavigation, hasChildItems: expandable, ref: ref, className: state => dimmedClass(state.isDisabled, className ?? state.defaultClassName) ?? "", isDisabled: disabled, onAction: onAction, style: state => {
             const responds = interactive || onAction != null || state.hasChildItems;
             return {
-                ...theme.transition,
-                display: "flex",
-                alignItems: "center",
-                gap: theme.gap,
-                minWidth: 0,
-                minHeight: theme.height,
-                paddingBlock: 0,
-                paddingInlineEnd: Math.max(8, theme.spacing),
-                paddingInlineStart: Math.max(8, theme.spacing) + Math.max(0, state.level - 1) * theme.spacing,
-                boxSizing: "border-box",
-                borderRadius: theme.radius,
-                outline: state.isFocusVisible ? `1px solid ${theme.focusColor}` : "none",
+                ...itemStyle(metrics, state.isDisabled),
+                ...itemPaint(metrics.visual, color, {
+                    selected: state.isSelected,
+                    hovered: responds && state.isHovered,
+                    pressed: responds && state.isPressed,
+                    focusVisible: false,
+                    disabled: state.isDisabled
+                }),
+                paddingInlineStart: metrics.inset / 2 + Math.max(0, state.level - 1) * metrics.spacing,
+                borderRadius: itemRadius,
+                outline: `3px solid ${state.isFocusVisible ? colorOpacity(metrics.visual.colors.primary, 0.34) : "transparent"}`,
                 outlineOffset: 1,
-                cursor: disabled ? "not-allowed" : responds ? "pointer" : "default",
-                opacity: disabled ? controlOpacity.disabled : 1,
-                userSelect: "none",
-                ...(state.isSelected
-                    ? state.isPressed
-                        ? theme.paints.palette.pressed
-                        : state.isHovered
-                            ? theme.paints.palette.hover
-                            : theme.paints.palette.rest
-                    : state.isHovered && responds
-                        ? theme.paints.subtle.hover
-                        : { background: "transparent", color: "inherit" }),
+                cursor: state.isDisabled ? "not-allowed" : responds ? "pointer" : "default",
                 ...style
             };
         } });
 });
-export const TreeItem = TreeItemImplementation;
-export const TreeContent = forwardRef(function TreeContent({ children }, ref) {
-    const { direction, theme } = useTreeTheme();
+const TreeContent = forwardRef(function TreeContent({ children }, ref) {
+    const { direction, metrics } = useTreeStyle();
+    const box = Math.round(metrics.indicator);
     return _jsx(AriaTreeItemContent, { ref: ref, children: state => _jsxs(_Fragment, { children: [state.hasChildItems
                     ? _jsx(AriaButton, { slot: "chevron", style: ({ isFocusVisible }) => ({
-                            ...theme.transition,
-                            appearance: "none",
                             display: "inline-grid",
                             flex: "0 0 auto",
                             placeItems: "center",
-                            width: theme.indicatorSize,
-                            height: theme.indicatorSize,
+                            width: box,
+                            height: box,
                             padding: 0,
                             border: 0,
-                            borderRadius: theme.radius,
-                            outline: isFocusVisible ? `1px solid ${theme.focusColor}` : "none",
-                            outlineOffset: 1,
+                            borderRadius: proportionalRadius(metrics.visual, box),
+                            outline: `3px solid ${isFocusVisible ? colorOpacity(metrics.visual.colors.primary, 0.34) : "transparent"}`,
                             background: "transparent",
                             color: "inherit",
                             cursor: state.isDisabled ? "not-allowed" : "pointer",
                             font: "inherit"
-                        }), children: _jsx(Chevron, { direction: direction, expanded: state.isExpanded, theme: theme }) })
-                    : _jsx("span", { "aria-hidden": "true", style: { flex: `0 0 ${theme.indicatorSize}px`, width: theme.indicatorSize } }), _jsx("span", { style: { flex: "1 1 auto", minWidth: 0 }, children: typeof children === "function" ? children(state) : children })] }) });
+                        }), children: _jsx(ChevronRight, { ...iconProps(14), style: { ...transition(metrics.visual, "rotate"), rotate: state.isExpanded ? "90deg" : direction === "rtl" ? "180deg" : "0deg" } }) })
+                    : _jsx("span", { "aria-hidden": "true", style: { flex: `0 0 ${box}px` } }), _jsx("span", { style: { flex: "1 1 auto", minWidth: 0, display: "flex", alignItems: "center", gap: metrics.gap }, children: typeof children === "function" ? children(state) : children })] }) });
 });
-function Chevron({ direction, expanded, theme }) {
-    const collapsedRotation = direction === "rtl" ? 180 : 0;
-    return _jsx("svg", { "aria-hidden": "true", width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", style: {
-            ...theme.transition,
-            transitionProperty: "transform",
-            transform: `rotate(${expanded ? 90 : collapsedRotation}deg)`
-        }, children: _jsx("path", { d: "m4 2 4 4-4 4" }) });
+function useTreeStyle() {
+    const context = useContext(TreeStyleContext);
+    if (context == null)
+        throw new Error("Tree parts must be used inside Tree");
+    return context;
 }
-export const TreeCollection = AriaCollection;
-/** Hierarchical navigation with independently controlled expansion, selection, and item actions. */
-export const Tree = Object.assign(TreeRoot, {
-    Item: TreeItem,
+/** Hierarchical navigation with independently controlled expansion, selection, and actions. */
+export const Tree = Object.assign(TreeRootImplementation, {
+    Item: TreeItemImplementation,
     Content: TreeContent,
-    Collection: TreeCollection
+    Collection: AriaCollection
 });
-function useTreeTheme() {
-    const value = useContext(TreeThemeContext);
-    if (value == null)
-        throw new Error("Tree parts must be used inside Tree");
-    return value;
-}

package/dist/window.d.ts

@@ -1,8 +1,8 @@
 import type { HTMLAttributes, ReactNode } from "react";
 import type { BeginWindowMoveGesture } from "@phreshos/core";
 import { type ButtonProps } from "./button.js";
-import { type Color } from "./color.js";
-import { type SurfaceProps } from "./surface.js";
+import { type Color } from "./foundation/color.js";
+import { type SurfaceProps } from "./surface/surface.js";
 /** The material shell that establishes the complete header-and-content layout. */
 export type WindowProps = SurfaceProps;
 /** The remaining window area. Its consumer owns content behavior, including overflow. */

package/dist/window.js

@@ -1,12 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { createContext, forwardRef, useContext } from "react";
-import { useResolvedAppearance } from "./appearance-context.js";
 import { Button } from "./button.js";
-import { resolveColor } from "./color.js";
-import { transitionTiming } from "./motion-style.js";
-import { scale } from "./scale.js";
-import { Surface } from "./surface.js";
+import { transition } from "./control/control.js";
+import { resolveColor } from "./foundation/color.js";
+import { headerHeight } from "./foundation/layout.js";
+import { scale } from "./foundation/scale.js";
+import { useVisual } from "./foundation/visual.js";
+import { Surface } from "./surface/surface.js";
 import useWindowMoveHandle from "./use-window-move-handle.js";
+import { ArrowDownLeft, Maximize2, Minimize2, X } from "lucide-react";
+import { iconProps } from "./control/icon.js";
 const HeaderContext = createContext(null);
 function useHeader() {
     const value = useContext(HeaderContext);
@@ -34,17 +37,17 @@ const WindowContent = forwardRef(function WindowContent({ style, ...properties }
 });
 /** The composable top region of a window; its enclosing Surface owns the material. */
 const HeaderRoot = forwardRef(function HeaderRoot({ active = true, beginMoveGesture, children, color, maximized = false, onDoubleClick, onLostPointerCapture, onMaximize, onMoveError, onPointerCancel, onPointerDown, onPointerMove, onPointerUp, style, ...properties }, ref) {
-    const resolved = useResolvedAppearance();
-    const spacing = resolved.appearance.spacing;
-    const foreground = style?.color ?? resolveColor(color ?? "foreground:base", resolved.colors);
+    const visual = useVisual();
+    const spacing = visual.spacing;
+    const foreground = style?.color ?? resolveColor(color ?? "foreground", visual.colors);
     const state = {
         active,
         foreground,
-        iconRadius: scale(resolved.appearance.radius, "xsmall"),
+        iconRadius: scale(visual.radius, "xsmall"),
         maximized,
         onMaximize,
         spacing,
-        transition: transitionTiming(resolved.transaction, resolved.preferences.animations)
+        transition: transition(visual, "opacity")
     };
     const move = useWindowMoveHandle(beginMoveGesture, onMoveError);
     return _jsx(HeaderContext.Provider, { value: state, children: _jsx("div", { ...properties, ref: ref, onPointerDown: event => {
@@ -61,7 +64,7 @@ const HeaderRoot = forwardRef(function HeaderRoot({ active = true, beginMoveGest
                 alignItems: "center",
                 gap: spacing,
                 minWidth: 0,
-                height: 16 + spacing * 2,
+                height: headerHeight(spacing),
                 paddingInline: spacing,
                 flexShrink: 0,
                 userSelect: "none",
@@ -122,21 +125,16 @@ const WindowAction = forwardRef(function WindowAction({ ...properties }, ref) {
     return _jsx(Button, { ...properties, ref: ref, size: "xsmall" });
 });
 const WindowMinimize = forwardRef(function WindowMinimize({ "aria-label": label = "Minimize", preventFocusOnPress = true, ...properties }, ref) {
-    return _jsx(WindowAction, { ...properties, ref: ref, "aria-label": label, preventFocusOnPress: preventFocusOnPress, children: _jsx(ControlIcon, { children: _jsx("path", { d: "M1.5 7.5h7" }) }) });
+    return _jsx(WindowAction, { ...properties, ref: ref, "aria-label": label, preventFocusOnPress: preventFocusOnPress, children: _jsx(ArrowDownLeft, { ...iconProps(14) }) });
 });
 const WindowMaximize = forwardRef(function WindowMaximize({ "aria-label": label, maximized, onPress, ...properties }, ref) {
     const header = useHeader();
     const selected = maximized ?? header.maximized;
-    return _jsx(WindowAction, { ...properties, ref: ref, onPress: onPress ?? header.onMaximize, "aria-label": label ?? (selected ? "Restore" : "Maximize"), children: _jsx(ControlIcon, { children: selected
-                ? _jsx("path", { d: "M1 4h5v5H1zM4 1h5v5H6.5", strokeWidth: "1.3", strokeLinejoin: "round" })
-                : _jsx("path", { d: "M1.5 1.5h7v7h-7z", strokeWidth: "1.3", strokeLinejoin: "round" }) }) });
+    return _jsx(WindowAction, { ...properties, ref: ref, onPress: onPress ?? header.onMaximize, "aria-label": label ?? (selected ? "Restore" : "Maximize"), children: selected ? _jsx(Minimize2, { ...iconProps(14) }) : _jsx(Maximize2, { ...iconProps(14) }) });
 });
-const WindowClose = forwardRef(function WindowClose({ "aria-label": label = "Close", color = "danger:base", preventFocusOnPress = true, ...properties }, ref) {
-    return _jsx(WindowAction, { ...properties, ref: ref, "aria-label": label, color: color, preventFocusOnPress: preventFocusOnPress, children: _jsx(ControlIcon, { children: _jsx("path", { d: "M1.5 1.5 8.5 8.5M8.5 1.5 1.5 8.5" }) }) });
+const WindowClose = forwardRef(function WindowClose({ "aria-label": label = "Close", color = "danger", preventFocusOnPress = true, ...properties }, ref) {
+    return _jsx(WindowAction, { ...properties, ref: ref, "aria-label": label, color: color, preventFocusOnPress: preventFocusOnPress, children: _jsx(X, { ...iconProps(14) }) });
 });
-function ControlIcon({ children }) {
-    return _jsx("svg", { "aria-hidden": "true", width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", children: children });
-}
 const Header = Object.assign(HeaderRoot, {
     Identity: WindowIdentity,
     Center: WindowCenter,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@phreshos/react-ui",
-  "version": "0.1.36",
+  "version": "0.1.37",
   "description": "React components for coherent PhreshOS Program interfaces.",
   "type": "module",
   "sideEffects": false,
@@ -57,9 +57,9 @@
   "dependencies": {
     "@base-ui/react": "^1.7.0",
     "@internationalized/date": "^3.12.3",
-    "@phreshos/core": "^0.1.60",
+    "@phreshos/core": "^0.1.61",
     "colorjs.io": "^0.7.1",
-    "motion": "^13.2.0",
+    "lucide-react": "^1.48.0",
     "react-aria": "^3.51.0",
     "react-aria-components": "^1.20.0"
   },