@phreshos/react-ui 0.1.29 → 0.1.31

package/dist/tree.d.ts

@@ -0,0 +1,56 @@
+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<{
+    className?: string;
+    color?: ControlColor;
+    defaultExpanded?: readonly string[];
+    disabledValues?: readonly string[];
+    expanded?: readonly string[];
+    onExpandedChange?: (values: readonly string[]) => void;
+    onItemAction?: (value: string) => void;
+    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 TreeMultipleValue = MultipleStringSelection;
+export type TreeMultipleSelectionProps = MultipleStringSelectionProps & Readonly<{
+    selectionMode: "multiple";
+}>;
+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"> {
+    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. */
+export declare const Tree: TreeRootComponent & {
+    Item: TreeItemComponent;
+    Content: import("react").ForwardRefExoticComponent<TreeContentProps & RefAttributes<Element>>;
+    Collection: typeof AriaCollection;
+};
+export type TreeProps<T extends object = object> = TreeRootProps<T>;
+export {};

package/dist/tree.js

@@ -0,0 +1,134 @@
+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 });
+    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: {
+                    display: "grid",
+                    alignContent: "start",
+                    gap: theme.gap,
+                    minWidth: 0,
+                    padding: theme.gap,
+                    boxSizing: "border-box",
+                    outline: "none",
+                    fontFamily: "inherit",
+                    fontSize: theme.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 => {
+            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",
+                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" }),
+                ...style
+            };
+        } });
+});
+export const TreeItem = TreeItemImplementation;
+export const TreeContent = forwardRef(function TreeContent({ children }, ref) {
+    const { direction, theme } = useTreeTheme();
+    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,
+                            padding: 0,
+                            border: 0,
+                            borderRadius: theme.radius,
+                            outline: isFocusVisible ? `1px solid ${theme.focusColor}` : "none",
+                            outlineOffset: 1,
+                            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 })] }) });
+});
+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" }) });
+}
+export const TreeCollection = AriaCollection;
+/** Hierarchical navigation with independently controlled expansion, selection, and item actions. */
+export const Tree = Object.assign(TreeRoot, {
+    Item: TreeItem,
+    Content: TreeContent,
+    Collection: TreeCollection
+});
+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

@@ -0,0 +1,39 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import { type ButtonProps } from "./button.js";
+import { type Color } from "./color.js";
+import { type SurfaceProps } from "./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. */
+export type WindowContentProps = HTMLAttributes<HTMLDivElement>;
+export interface WindowHeaderProps extends Omit<HTMLAttributes<HTMLDivElement>, "color"> {
+    /** Attenuates the identity when this header is not active. */
+    readonly active?: boolean;
+    /** Base color inherited by header-owned text and icons. */
+    readonly color?: Color;
+}
+export interface WindowIdentityProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+    readonly icon?: string;
+    readonly title?: ReactNode;
+}
+export type WindowCenterProps = HTMLAttributes<HTMLDivElement>;
+export type WindowActionsProps = HTMLAttributes<HTMLDivElement>;
+export type WindowActionProps = Omit<ButtonProps, "size">;
+export type WindowControlProps = Omit<WindowActionProps, "children">;
+export interface WindowMaximizeProps extends WindowControlProps {
+    readonly maximized?: boolean;
+}
+export type WindowCloseProps = WindowControlProps;
+/** One Surface with a ready-to-use header-and-content composition. */
+export declare const Window: import("react").ForwardRefExoticComponent<Omit<WindowProps, "ref"> & import("react").RefAttributes<HTMLDivElement>> & {
+    Header: import("react").ForwardRefExoticComponent<WindowHeaderProps & import("react").RefAttributes<HTMLDivElement>> & {
+        Identity: import("react").ForwardRefExoticComponent<WindowIdentityProps & import("react").RefAttributes<HTMLDivElement>>;
+        Center: import("react").ForwardRefExoticComponent<WindowCenterProps & import("react").RefAttributes<HTMLDivElement>>;
+        Actions: import("react").ForwardRefExoticComponent<WindowActionsProps & import("react").RefAttributes<HTMLDivElement>>;
+        Action: import("react").ForwardRefExoticComponent<WindowActionProps & import("react").RefAttributes<HTMLButtonElement>>;
+        Minimize: import("react").ForwardRefExoticComponent<WindowControlProps & import("react").RefAttributes<HTMLButtonElement>>;
+        Maximize: import("react").ForwardRefExoticComponent<WindowMaximizeProps & import("react").RefAttributes<HTMLButtonElement>>;
+        Close: import("react").ForwardRefExoticComponent<WindowControlProps & import("react").RefAttributes<HTMLButtonElement>>;
+    };
+    Content: import("react").ForwardRefExoticComponent<WindowContentProps & import("react").RefAttributes<HTMLDivElement>>;
+};

package/dist/{window-header.js → window.js}

@@ -2,27 +2,48 @@ 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";
-const WindowHeaderContext = createContext(null);
-function useWindowHeader() {
-    const value = useContext(WindowHeaderContext);
+import { Surface } from "./surface.js";
+const HeaderContext = createContext(null);
+function useHeader() {
+    const value = useContext(HeaderContext);
     if (value === null)
-        throw new Error("WindowHeader parts require WindowHeader.Root");
+        throw new Error("Window.Header parts require Window.Header");
     return value;
 }
+const WindowRoot = forwardRef(function WindowRoot({ children, style, ...properties }, ref) {
+    return _jsx(Surface, { ...properties, ref: ref, style: {
+            display: "flex",
+            flexDirection: "column",
+            minWidth: 0,
+            minHeight: 0,
+            ...style
+        }, children: children });
+});
+const WindowContent = forwardRef(function WindowContent({ style, ...properties }, ref) {
+    return _jsx("div", { ...properties, ref: ref, style: {
+            position: "relative",
+            flex: "1 1 auto",
+            minWidth: 0,
+            minHeight: 0,
+            ...style
+        } });
+});
 /** The composable top region of a window; its enclosing Surface owns the material. */
-export const WindowHeaderRoot = forwardRef(function WindowHeaderRoot({ active = true, children, onPointerDown, style, ...properties }, ref) {
+const HeaderRoot = forwardRef(function HeaderRoot({ active = true, children, color, onPointerDown, style, ...properties }, ref) {
     const resolved = useResolvedAppearance();
     const spacing = resolved.appearance.spacing;
+    const foreground = style?.color ?? resolveColor(color ?? "foreground:base", resolved.colors);
     const state = {
         active,
-        foreground: resolved.colors.foreground,
+        foreground,
         iconRadius: scale(resolved.appearance.radius, "xsmall"),
         spacing,
         transition: transitionTiming(resolved.transaction, resolved.preferences.animations)
     };
-    return _jsx(WindowHeaderContext.Provider, { value: state, children: _jsx("div", { ...properties, ref: ref, onPointerDown: onPointerDown, style: {
+    return _jsx(HeaderContext.Provider, { value: state, children: _jsx("div", { ...properties, ref: ref, onPointerDown: onPointerDown, style: {
                 boxSizing: "border-box",
                 display: "flex",
                 alignItems: "center",
@@ -34,12 +55,13 @@ export const WindowHeaderRoot = forwardRef(function WindowHeaderRoot({ active =
                 userSelect: "none",
                 touchAction: onPointerDown ? "none" : undefined,
                 cursor: onPointerDown ? "grab" : undefined,
+                color: foreground,
                 ...style
             }, children: children }) });
 });
 /** The icon and truncating title share the window's active treatment. */
-export const WindowHeaderIdentity = forwardRef(function WindowHeaderIdentity({ icon, title, style, ...properties }, ref) {
-    const { active, iconRadius, spacing, transition } = useWindowHeader();
+const WindowIdentity = forwardRef(function WindowIdentity({ icon, title, style, ...properties }, ref) {
+    const { active, iconRadius, spacing, transition } = useHeader();
     return _jsxs("div", { ...properties, ref: ref, style: {
             ...transition,
             transitionProperty: "opacity",
@@ -66,13 +88,13 @@ export const WindowHeaderIdentity = forwardRef(function WindowHeaderIdentity({ i
                 }, children: title })] });
 });
 /** Optional flexible space for application-owned content. */
-export const WindowHeaderCenter = forwardRef(function WindowHeaderCenter({ onDoubleClick, onPointerDown, style, ...properties }, ref) {
-    useWindowHeader();
+const WindowCenter = forwardRef(function WindowCenter({ onDoubleClick, onPointerDown, style, ...properties }, ref) {
+    useHeader();
     return _jsx("div", { ...properties, ref: ref, onDoubleClick: event => { event.stopPropagation(); onDoubleClick?.(event); }, onPointerDown: event => { event.stopPropagation(); onPointerDown?.(event); }, style: { display: "flex", alignItems: "center", flex: "1 1 auto", minWidth: 0, ...style } });
 });
 /** End-aligned controls that do not begin a header drag or double-click action. */
-export const WindowHeaderActions = forwardRef(function WindowHeaderActions({ onDoubleClick, onPointerDown, style, ...properties }, ref) {
-    const { spacing } = useWindowHeader();
+const WindowActions = forwardRef(function WindowActions({ onDoubleClick, onPointerDown, style, ...properties }, ref) {
+    const { spacing } = useHeader();
     return _jsx("div", { ...properties, ref: ref, onDoubleClick: event => { event.stopPropagation(); onDoubleClick?.(event); }, onPointerDown: event => { event.stopPropagation(); onPointerDown?.(event); }, style: {
             display: "flex",
             alignItems: "center",
@@ -83,31 +105,35 @@ export const WindowHeaderActions = forwardRef(function WindowHeaderActions({ onD
         } });
 });
 /** A compact header action; extra actions use the same treatment as the standard controls. */
-export const WindowHeaderAction = forwardRef(function WindowHeaderAction({ style, ...properties }, ref) {
-    const { foreground } = useWindowHeader();
-    return _jsx(Button, { ...properties, ref: ref, size: "xsmall", style: { color: foreground, ...style } });
+const WindowAction = forwardRef(function WindowAction({ ...properties }, ref) {
+    useHeader();
+    return _jsx(Button, { ...properties, ref: ref, size: "xsmall" });
 });
-export const WindowHeaderMinimize = forwardRef(function WindowHeaderMinimize({ "aria-label": label = "Minimize", preventFocusOnPress = true, ...properties }, ref) {
-    return _jsx(WindowHeaderAction, { ...properties, ref: ref, "aria-label": label, preventFocusOnPress: preventFocusOnPress, children: _jsx(ControlIcon, { children: _jsx("path", { d: "M1.5 7.5h7" }) }) });
+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" }) }) });
 });
-export const WindowHeaderMaximize = forwardRef(function WindowHeaderMaximize({ "aria-label": label, maximized = false, ...properties }, ref) {
-    return _jsx(WindowHeaderAction, { ...properties, ref: ref, "aria-label": label ?? (maximized ? "Restore" : "Maximize"), children: _jsx(ControlIcon, { children: maximized
+const WindowMaximize = forwardRef(function WindowMaximize({ "aria-label": label, maximized = false, ...properties }, ref) {
+    return _jsx(WindowAction, { ...properties, ref: ref, "aria-label": label ?? (maximized ? "Restore" : "Maximize"), children: _jsx(ControlIcon, { children: maximized
                 ? _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" }) }) });
 });
-export const WindowHeaderClose = forwardRef(function WindowHeaderClose({ "aria-label": label = "Close", preventFocusOnPress = true, ...properties }, ref) {
-    return _jsx(WindowHeaderAction, { ...properties, ref: ref, "aria-label": label, color: "danger:base", 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: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" }) }) });
 });
 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 });
 }
-export const WindowHeader = Object.assign(WindowHeaderRoot, {
-    Root: WindowHeaderRoot,
-    Identity: WindowHeaderIdentity,
-    Center: WindowHeaderCenter,
-    Actions: WindowHeaderActions,
-    Action: WindowHeaderAction,
-    Minimize: WindowHeaderMinimize,
-    Maximize: WindowHeaderMaximize,
-    Close: WindowHeaderClose
+const Header = Object.assign(HeaderRoot, {
+    Identity: WindowIdentity,
+    Center: WindowCenter,
+    Actions: WindowActions,
+    Action: WindowAction,
+    Minimize: WindowMinimize,
+    Maximize: WindowMaximize,
+    Close: WindowClose
+});
+/** One Surface with a ready-to-use header-and-content composition. */
+export const Window = Object.assign(WindowRoot, {
+    Header,
+    Content: WindowContent
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@phreshos/react-ui",
-  "version": "0.1.29",
+  "version": "0.1.31",
   "description": "React components for coherent PhreshOS Program interfaces.",
   "type": "module",
   "sideEffects": false,
@@ -56,9 +56,11 @@
   },
   "dependencies": {
     "@base-ui/react": "^1.7.0",
-    "@phreshos/core": "^0.1.54",
+    "@internationalized/date": "^3.12.3",
+    "@phreshos/core": "^0.1.55",
     "colorjs.io": "^0.7.1",
     "motion": "^13.2.0",
+    "react-aria": "^3.51.0",
     "react-aria-components": "^1.20.0"
   },
   "devDependencies": {

package/dist/window-header.d.ts

@@ -1,42 +0,0 @@
-import type { ComponentProps, HTMLAttributes, ReactNode } from "react";
-import { type ButtonProps } from "./button.js";
-export interface WindowHeaderRootProps extends HTMLAttributes<HTMLDivElement> {
-    /** Attenuates the identity when this header is not active. */
-    readonly active?: boolean;
-}
-/** The composable top region of a window; its enclosing Surface owns the material. */
-export declare const WindowHeaderRoot: import("react").ForwardRefExoticComponent<WindowHeaderRootProps & import("react").RefAttributes<HTMLDivElement>>;
-export interface WindowHeaderIdentityProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
-    readonly icon?: string;
-    readonly title?: ReactNode;
-}
-/** The icon and truncating title share the window's active treatment. */
-export declare const WindowHeaderIdentity: import("react").ForwardRefExoticComponent<WindowHeaderIdentityProps & import("react").RefAttributes<HTMLDivElement>>;
-export type WindowHeaderCenterProps = HTMLAttributes<HTMLDivElement>;
-/** Optional flexible space for application-owned content. */
-export declare const WindowHeaderCenter: import("react").ForwardRefExoticComponent<WindowHeaderCenterProps & import("react").RefAttributes<HTMLDivElement>>;
-export type WindowHeaderActionsProps = HTMLAttributes<HTMLDivElement>;
-/** End-aligned controls that do not begin a header drag or double-click action. */
-export declare const WindowHeaderActions: import("react").ForwardRefExoticComponent<WindowHeaderActionsProps & import("react").RefAttributes<HTMLDivElement>>;
-export type WindowHeaderActionProps = Omit<ButtonProps, "size">;
-/** A compact header action; extra actions use the same treatment as the standard controls. */
-export declare const WindowHeaderAction: import("react").ForwardRefExoticComponent<WindowHeaderActionProps & import("react").RefAttributes<HTMLButtonElement>>;
-export type WindowHeaderControlProps = Omit<WindowHeaderActionProps, "children">;
-export declare const WindowHeaderMinimize: import("react").ForwardRefExoticComponent<WindowHeaderControlProps & import("react").RefAttributes<HTMLButtonElement>>;
-export interface WindowHeaderMaximizeProps extends WindowHeaderControlProps {
-    readonly maximized?: boolean;
-}
-export declare const WindowHeaderMaximize: import("react").ForwardRefExoticComponent<WindowHeaderMaximizeProps & import("react").RefAttributes<HTMLButtonElement>>;
-export type WindowHeaderCloseProps = Omit<WindowHeaderControlProps, "color">;
-export declare const WindowHeaderClose: import("react").ForwardRefExoticComponent<WindowHeaderCloseProps & import("react").RefAttributes<HTMLButtonElement>>;
-export declare const WindowHeader: import("react").ForwardRefExoticComponent<WindowHeaderRootProps & import("react").RefAttributes<HTMLDivElement>> & {
-    Root: import("react").ForwardRefExoticComponent<WindowHeaderRootProps & import("react").RefAttributes<HTMLDivElement>>;
-    Identity: import("react").ForwardRefExoticComponent<WindowHeaderIdentityProps & import("react").RefAttributes<HTMLDivElement>>;
-    Center: import("react").ForwardRefExoticComponent<WindowHeaderCenterProps & import("react").RefAttributes<HTMLDivElement>>;
-    Actions: import("react").ForwardRefExoticComponent<WindowHeaderActionsProps & import("react").RefAttributes<HTMLDivElement>>;
-    Action: import("react").ForwardRefExoticComponent<WindowHeaderActionProps & import("react").RefAttributes<HTMLButtonElement>>;
-    Minimize: import("react").ForwardRefExoticComponent<WindowHeaderControlProps & import("react").RefAttributes<HTMLButtonElement>>;
-    Maximize: import("react").ForwardRefExoticComponent<WindowHeaderMaximizeProps & import("react").RefAttributes<HTMLButtonElement>>;
-    Close: import("react").ForwardRefExoticComponent<WindowHeaderCloseProps & import("react").RefAttributes<HTMLButtonElement>>;
-};
-export type WindowHeaderProps = ComponentProps<typeof WindowHeaderRoot>;