@phreshos/react-ui 0.1.29 → 0.1.31

package/dist/date-range-picker.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { DateRangePicker as AriaDateRangePicker } from "react-aria-components";
+import { AriaDirectionBoundary } from "./aria-direction.js";
+import { CalendarTrigger } from "./calendar-trigger.js";
+import { controlOpacity, FieldFeedback, FieldLabel, fieldStyle, useControlTheme } from "./control.js";
+import { DateControl, DateSegments } from "./date-control.js";
+import { resolveDirection, useDirection } from "./direction.js";
+import { PopoverContent, PopoverDialog } from "./popover.js";
+import { RangeCalendar } from "./range-calendar.js";
+/** Two date-only segmented fields backed by one inclusive range calendar. */
+export const DateRangePicker = forwardRef(function DateRangePicker({ label, description, errorMessage, disabled, readOnly, required, invalid, size, color, radius, material, shadow, style, className, isDateUnavailable, ...properties }, ref) {
+    const theme = useControlTheme({ size, color, radius });
+    const direction = resolveDirection(properties.dir, useDirection());
+    return _jsx(AriaDirectionBoundary, { direction: direction, children: _jsx(AriaDateRangePicker, { ...properties, ref: ref, dir: direction, className: className, isDisabled: disabled, isReadOnly: readOnly, isRequired: required, isInvalid: invalid, isDateUnavailable: isDateUnavailable == null
+                ? undefined
+                : (date, anchorDate) => isDateUnavailable(date, anchorDate), style: fieldStyle(theme, disabled, style), children: state => _jsxs(_Fragment, { children: [_jsx(FieldLabel, { label: label }), _jsx(DateControl, { active: state.isOpen, disabled: state.isDisabled, endFocusVisible: state.isFocusVisible, endRequiresVisibleFocus: true, group: true, invalid: state.isInvalid, material: material, shadow: shadow, theme: theme, end: _jsx(CalendarTrigger, { theme: theme }), children: _jsxs("div", { style: {
+                                display: "flex",
+                                alignItems: "center",
+                                justifyContent: "flex-start",
+                                flex: "1 1 auto",
+                                minWidth: 0,
+                                gap: Math.max(2, theme.gap / 2)
+                            }, children: [_jsx(DateSegments, { compact: true, slot: "start", theme: theme }), _jsx("span", { "aria-hidden": "true", style: { flex: "0 0 auto", opacity: controlOpacity.secondary }, children: "\u2013" }), _jsx(DateSegments, { compact: true, slot: "end", theme: theme })] }) }), _jsx(FieldFeedback, { theme: theme, description: description, errorMessage: errorMessage }), _jsx(PopoverContent, { placement: "bottom start", children: _jsx(PopoverDialog, { children: _jsx(RangeCalendar, { color: color, size: size, radius: radius }) }) })] }) }) });
+});

package/dist/date-range.d.ts

@@ -0,0 +1,6 @@
+import type { CalendarDate } from "@internationalized/date";
+/** A date-only inclusive range shared by range calendars and range pickers. */
+export interface DateRange {
+    readonly start: CalendarDate;
+    readonly end: CalendarDate;
+}

package/dist/dialog.d.ts

@@ -1,14 +1,17 @@
 import type { ComponentProps, CSSProperties, HTMLAttributes, ReactNode } from "react";
 import type { DialogProps as AriaDialogProps, DialogTriggerProps as AriaDialogTriggerProps, HeadingProps as AriaHeadingProps, ModalOverlayProps as AriaModalOverlayProps, TextProps as AriaTextProps } from "react-aria-components";
+import { type Color } from "./color.js";
 import { type ButtonProps } from "./button.js";
 import { type SurfaceOwnProps } from "./surface.js";
 export type DialogRootProps = AriaDialogTriggerProps;
 export declare function DialogRoot(properties: DialogRootProps): import("react").JSX.Element;
 export type DialogTriggerProps = ButtonProps;
 export declare const DialogTrigger: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
-export interface DialogBackdropProps extends Omit<AriaModalOverlayProps, "children" | "className" | "style"> {
+export interface DialogBackdropProps extends Omit<AriaModalOverlayProps, "children" | "className" | "color" | "style"> {
     readonly children?: ReactNode;
     readonly className?: string;
+    /** Base color rendered with the backdrop's derived opacity. */
+    readonly color?: Color;
     readonly style?: CSSProperties;
 }
 export declare const DialogBackdrop: import("react").ForwardRefExoticComponent<DialogBackdropProps & import("react").RefAttributes<HTMLDivElement>>;
@@ -32,7 +35,6 @@ export type DialogCloseProps = ButtonProps;
 export declare const DialogClose: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
 /** A modal dialog whose behavioral and structural roles remain independently composable. */
 export declare const Dialog: typeof DialogRoot & {
-    Root: typeof DialogRoot;
     Trigger: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
     Backdrop: import("react").ForwardRefExoticComponent<DialogBackdropProps & import("react").RefAttributes<HTMLDivElement>>;
     Content: import("react").ForwardRefExoticComponent<DialogContentProps & import("react").RefAttributes<HTMLElement>>;

package/dist/dialog.js

@@ -3,8 +3,8 @@ import { forwardRef } from "react";
 import { Dialog as AriaDialog, DialogTrigger as AriaDialogTrigger, Heading as AriaHeading, Modal as AriaModal, ModalOverlay as AriaModalOverlay, Text as AriaText } from "react-aria-components";
 import { useAppearance } from "./ui-provider.js";
 import { useResolvedAppearance } from "./appearance-context.js";
-import { colorOpacity, orderColors } from "./color.js";
-import { controlFontWeight, controlOpacity } from "./control.js";
+import { colorOpacity, orderColors, resolveColor } from "./color.js";
+import { controlFontSizes, controlFontWeight, controlOpacity } from "./control.js";
 import { Button } from "./button.js";
 import MotionStyle, { backdropMotionClass, overlayMotionClass, overlayTransition } from "./motion-style.js";
 import { scale } from "./scale.js";
@@ -16,11 +16,14 @@ export function DialogRoot(properties) {
 export const DialogTrigger = forwardRef(function DialogTrigger(properties, ref) {
     return _jsx(Button, { ...properties, ref: ref });
 });
-export const DialogBackdrop = forwardRef(function DialogBackdrop({ className, style, ...properties }, ref) {
+export const DialogBackdrop = forwardRef(function DialogBackdrop({ className, color, style, ...properties }, ref) {
     const resolved = useResolvedAppearance();
     const inset = scale(resolved.appearance.spacing, "medium");
     const colors = resolved.colors;
-    const backdrop = colorOpacity(orderColors(colors.background, colors.foreground).darker, 0.32);
+    const base = color === undefined
+        ? orderColors(colors.background, colors.foreground).darker
+        : resolveColor(color, colors);
+    const backdrop = colorOpacity(base, 0.32);
     const transition = overlayTransition(resolved.transaction, resolved.preferences.animations);
     const direction = resolveDirection(properties.dir, useDirection());
     return _jsxs(_Fragment, { children: [_jsx(MotionStyle, {}), _jsx(AriaModalOverlay, { ...properties, ref: ref, dir: direction, className: [backdropMotionClass, className].filter(Boolean).join(" "), style: {
@@ -68,10 +71,25 @@ export const DialogHeader = forwardRef(function DialogHeader({ style, ...propert
     return _jsx("div", { ...properties, ref: ref, style: { display: "grid", gap, minWidth: 0, ...style } });
 });
 export const DialogTitle = forwardRef(function DialogTitle({ style, ...properties }, ref) {
-    return _jsx(AriaHeading, { ...properties, ref: ref, slot: "title", style: { margin: 0, font: "inherit", fontWeight: controlFontWeight, ...style } });
+    // The modal is portalled: owned text parts set their relative scale directly,
+    // while Dialog.Body remains untouched for consumer-owned content and controls.
+    return _jsx(AriaHeading, { ...properties, ref: ref, slot: "title", style: {
+            margin: 0,
+            fontFamily: "inherit",
+            fontSize: controlFontSizes.medium,
+            fontWeight: controlFontWeight,
+            lineHeight: 1.5,
+            ...style
+        } });
 });
 export const DialogDescription = forwardRef(function DialogDescription({ style, ...properties }, ref) {
-    return _jsx(AriaText, { ...properties, ref: ref, slot: "description", style: { margin: 0, opacity: controlOpacity.secondary, ...style } });
+    return _jsx(AriaText, { ...properties, ref: ref, slot: "description", style: {
+            margin: 0,
+            fontSize: controlFontSizes.medium,
+            lineHeight: 1.5,
+            opacity: controlOpacity.secondary,
+            ...style
+        } });
 });
 export const DialogBody = forwardRef(function DialogBody({ style, ...properties }, ref) {
     return _jsx("div", { ...properties, ref: ref, style: { minWidth: 0, minHeight: 0, ...style } });
@@ -85,7 +103,6 @@ export const DialogClose = forwardRef(function DialogClose(properties, ref) {
 });
 /** A modal dialog whose behavioral and structural roles remain independently composable. */
 export const Dialog = Object.assign(DialogRoot, {
-    Root: DialogRoot,
     Trigger: DialogTrigger,
     Backdrop: DialogBackdrop,
     Content: DialogContent,

package/dist/disclosure.d.ts

@@ -0,0 +1,42 @@
+import type { CSSProperties, ReactElement, ReactNode } from "react";
+import type { ButtonProps as AriaButtonProps, DisclosurePanelProps as AriaDisclosurePanelProps, DisclosureProps as AriaDisclosureProps } from "react-aria-components";
+import type { ControlColor } from "./control.js";
+import type { RadiusProps } from "./radius.js";
+import type { ScaleLevel } from "./scale.js";
+import { type Spacing } from "./spacing.js";
+export interface DisclosureRootProps extends Omit<AriaDisclosureProps, "children" | "className" | "defaultExpanded" | "isDisabled" | "isExpanded" | "onExpandedChange" | "style">, RadiusProps {
+    readonly children?: ReactNode;
+    readonly className?: string;
+    readonly color?: ControlColor;
+    readonly defaultExpanded?: boolean;
+    readonly disabled?: boolean;
+    readonly expanded?: boolean;
+    readonly onChange?: (expanded: boolean) => void;
+    readonly size?: ScaleLevel;
+    readonly style?: CSSProperties;
+}
+/** One independently expandable region. */
+export declare const DisclosureRoot: import("react").ForwardRefExoticComponent<DisclosureRootProps & import("react").RefAttributes<HTMLDivElement>>;
+export interface DisclosureTriggerProps extends Omit<AriaButtonProps, "children" | "className" | "isDisabled" | "onPress" | "style"> {
+    readonly children?: ReactNode;
+    readonly className?: string;
+    readonly style?: CSSProperties;
+}
+/** The control that changes the Disclosure's expansion state. */
+export declare const DisclosureTrigger: import("react").ForwardRefExoticComponent<DisclosureTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+export interface DisclosureContentProps extends Omit<AriaDisclosurePanelProps, "className" | "style"> {
+    /** Space around the revealed content. */
+    readonly padding?: Spacing;
+    readonly className?: string;
+    readonly style?: CSSProperties;
+}
+/** Content revealed by a Disclosure trigger. */
+export declare const DisclosureContent: import("react").ForwardRefExoticComponent<DisclosureContentProps & import("react").RefAttributes<HTMLDivElement>>;
+interface DisclosureComponent {
+    (properties: DisclosureRootProps): ReactElement | null;
+    readonly Trigger: typeof DisclosureTrigger;
+    readonly Content: typeof DisclosureContent;
+}
+export declare const Disclosure: DisclosureComponent;
+export type DisclosureProps = DisclosureRootProps;
+export {};

package/dist/disclosure.js

@@ -0,0 +1,97 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, forwardRef, useContext, useMemo } from "react";
+import { Button as AriaButton, Disclosure as AriaDisclosure, DisclosurePanel as AriaDisclosurePanel, DisclosureStateContext } from "react-aria-components";
+import { useResolvedAppearance } from "./appearance-context.js";
+import { controlOpacity, useControlTheme } from "./control.js";
+import { transitionTiming } from "./motion-style.js";
+import { resolveSpacing } from "./spacing.js";
+const DisclosureThemeContext = createContext(null);
+/** One independently expandable region. */
+export const DisclosureRoot = forwardRef(function DisclosureRoot({ children, className, color, defaultExpanded, disabled = false, expanded, onChange, radius = "medium", size = "medium", style, ...properties }, ref) {
+    const theme = useControlTheme({ color, radius, size });
+    const resolved = useResolvedAppearance();
+    const context = useMemo(() => ({
+        motion: transitionTiming(resolved.transaction, resolved.preferences.animations),
+        theme
+    }), [resolved.preferences.animations, resolved.transaction, theme]);
+    return _jsx(DisclosureThemeContext.Provider, { value: context, children: _jsx(AriaDisclosure, { ...properties, ...(expanded === undefined ? {} : { isExpanded: expanded }), ...(defaultExpanded === undefined ? {} : { defaultExpanded }), ref: ref, className: className, isDisabled: disabled, onExpandedChange: onChange, style: {
+                display: "grid",
+                minWidth: 0,
+                fontFamily: "inherit",
+                fontSize: theme.fontSize,
+                ...style
+            }, children: children }) });
+});
+/** The control that changes the Disclosure's expansion state. */
+export const DisclosureTrigger = forwardRef(function DisclosureTrigger({ children, className, style, ...properties }, ref) {
+    const { motion, theme } = useDisclosureTheme();
+    const disclosure = useDisclosureState();
+    return _jsxs(AriaButton, { ...properties, ref: ref, slot: "trigger", className: className, style: state => ({
+            ...theme.transition,
+            appearance: "none",
+            display: "grid",
+            gridTemplateColumns: "minmax(0, 1fr) auto",
+            alignItems: "center",
+            gap: theme.gap,
+            width: "100%",
+            minWidth: 0,
+            minHeight: theme.height,
+            paddingBlock: theme.gap,
+            paddingInline: Math.max(8, theme.spacing),
+            boxSizing: "border-box",
+            border: 0,
+            borderRadius: theme.radius,
+            outline: state.isFocusVisible ? `1px solid ${theme.focusColor}` : "none",
+            outlineOffset: 1,
+            cursor: state.isDisabled ? "not-allowed" : "pointer",
+            opacity: state.isDisabled ? controlOpacity.disabled : 1,
+            font: "inherit",
+            lineHeight: 1.5,
+            textAlign: "start",
+            userSelect: "none",
+            WebkitTapHighlightColor: "transparent",
+            ...(disclosure.isExpanded
+                ? state.isPressed ? theme.paints.palette.pressed : state.isHovered ? theme.paints.palette.hover : theme.paints.palette.rest
+                : state.isPressed ? theme.paints.subtle.pressed : state.isHovered ? theme.paints.subtle.hover : { background: "transparent", color: "inherit" }),
+            ...style
+        }), children: [_jsx("span", { style: { minWidth: 0 }, children: children }), _jsx("span", { "aria-hidden": "true", style: {
+                    ...motion,
+                    transitionProperty: "transform",
+                    width: "0.5em",
+                    height: "0.5em",
+                    marginInline: "0.25em",
+                    borderInlineEnd: "1px solid currentColor",
+                    borderBlockEnd: "1px solid currentColor",
+                    transform: disclosure.isExpanded ? "rotate(225deg)" : "rotate(45deg)"
+                } })] });
+});
+/** Content revealed by a Disclosure trigger. */
+export const DisclosureContent = forwardRef(function DisclosureContent({ children, className, padding = "small", style, ...properties }, ref) {
+    const { motion } = useDisclosureTheme();
+    const disclosure = useDisclosureState();
+    const { appearance } = useResolvedAppearance();
+    return _jsx(AriaDisclosurePanel, { ...properties, ref: ref, className: className, style: {
+            ...motion,
+            transitionProperty: "height, opacity",
+            height: "var(--disclosure-panel-height)",
+            overflow: "clip",
+            opacity: disclosure.isExpanded ? 1 : 0,
+            ...style
+        }, children: _jsx("div", { style: { minHeight: 0, overflow: "hidden" }, children: _jsx("div", { style: { padding: resolveSpacing(padding, appearance) }, children: children }) }) });
+});
+function useDisclosureState() {
+    const state = useContext(DisclosureStateContext);
+    if (state == null)
+        throw new Error("Disclosure parts must be used inside Disclosure");
+    return state;
+}
+function useDisclosureTheme() {
+    const context = useContext(DisclosureThemeContext);
+    if (context == null)
+        throw new Error("Disclosure parts must be used inside Disclosure");
+    return context;
+}
+export const Disclosure = Object.assign(DisclosureRoot, {
+    Trigger: DisclosureTrigger,
+    Content: DisclosureContent
+});

package/dist/dropdown-menu.d.ts

@@ -7,11 +7,9 @@ export type DropdownMenuTriggerProps = ButtonProps;
 export declare const DropdownMenuTrigger: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
 /** A button-triggered overlay. Its Content owns positioning; Menu owns commands and selection. */
 export declare const DropdownMenu: typeof DropdownMenuRoot & {
-    Root: typeof DropdownMenuRoot;
     Trigger: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
     Content: import("react").ForwardRefExoticComponent<import("./popover.js").PopoverContentProps & import("react").RefAttributes<HTMLElement>>;
     Menu: import("./menu.js").MenuRootComponent & {
-        Root: import("./menu.js").MenuRootComponent;
         Item: import("./menu.js").MenuItemComponent;
         Section: <T>(props: import("react-aria-components").MenuSectionProps<T> & React.RefAttributes<HTMLElement>) => import("react").ReactElement<unknown, string | React.JSXElementConstructor<any>> | null;
         Header: import("react").ForwardRefExoticComponent<import("react-aria-components").HeaderProps & import("react").RefAttributes<HTMLElement>>;

package/dist/dropdown-menu.js

@@ -12,7 +12,6 @@ export const DropdownMenuTrigger = forwardRef(function DropdownMenuTrigger(prope
 });
 /** A button-triggered overlay. Its Content owns positioning; Menu owns commands and selection. */
 export const DropdownMenu = Object.assign(DropdownMenuRoot, {
-    Root: DropdownMenuRoot,
     Trigger: DropdownMenuTrigger,
     Content: PopoverContent,
     Menu

package/dist/list-box.d.ts

@@ -0,0 +1,49 @@
+import type { CSSProperties, ReactElement, RefAttributes } from "react";
+import type { HeaderProps as AriaHeaderProps, ListBoxItemProps as AriaListBoxItemProps, ListBoxProps as AriaListBoxProps, ListBoxSectionProps as AriaListBoxSectionProps } 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 ListBoxRootBaseProps<T extends object> = Omit<AriaListBoxProps<T>, "className" | "defaultSelectedKeys" | "disabledKeys" | "onSelectionChange" | "selectedKeys" | "selectionMode" | "style"> & RadiusProps & Readonly<{
+    className?: string;
+    color?: ControlColor;
+    disabledValues?: readonly string[];
+    size?: ScaleLevel;
+    style?: CSSProperties;
+}>;
+export type ListBoxSingleSelectionProps = SingleStringSelectionProps & Readonly<{
+    selectionMode?: "single";
+}>;
+export type ListBoxMultipleValue = MultipleStringSelection;
+export type ListBoxMultipleSelectionProps = MultipleStringSelectionProps & Readonly<{
+    selectionMode: "multiple";
+}>;
+/** Properties accepted by the selectable collection. Single selection is the default. */
+export type ListBoxRootProps<T extends object = object> = ListBoxRootBaseProps<T> & (ListBoxSingleSelectionProps | ListBoxMultipleSelectionProps);
+export type ListBoxRootComponent = <T extends object = object>(properties: ListBoxRootProps<T> & RefAttributes<HTMLDivElement>) => ReactElement | null;
+export declare const ListBoxRoot: ListBoxRootComponent;
+export interface ListBoxItemProps<T = object> extends Omit<AriaListBoxItemProps<T>, "className" | "id" | "isDisabled" | "style"> {
+    readonly className?: string;
+    readonly color?: ControlColor;
+    readonly disabled?: boolean;
+    readonly id: string;
+    readonly style?: CSSProperties;
+}
+export type ListBoxItemComponent = <T = object>(properties: ListBoxItemProps<T> & RefAttributes<HTMLDivElement>) => ReactElement | null;
+export declare const ListBoxItem: ListBoxItemComponent;
+export interface ListBoxSectionProps<T extends object = object> extends Omit<AriaListBoxSectionProps<T>, "className" | "style"> {
+    readonly className?: string;
+    readonly style?: CSSProperties;
+}
+export type ListBoxSectionComponent = <T extends object = object>(properties: ListBoxSectionProps<T> & RefAttributes<HTMLElement>) => ReactElement | null;
+export declare const ListBoxSection: ListBoxSectionComponent;
+export type ListBoxHeaderProps = AriaHeaderProps;
+export declare const ListBoxHeader: import("react").ForwardRefExoticComponent<AriaHeaderProps & RefAttributes<HTMLElement>>;
+/** A selectable collection whose items and groups remain independently composable. */
+export declare const ListBox: ListBoxRootComponent & {
+    Item: ListBoxItemComponent;
+    Section: ListBoxSectionComponent;
+    Header: import("react").ForwardRefExoticComponent<AriaHeaderProps & RefAttributes<HTMLElement>>;
+};
+export type ListBoxProps<T extends object = object> = ListBoxRootProps<T>;
+export {};

package/dist/list-box.js

@@ -0,0 +1,129 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, forwardRef, useContext, useMemo } from "react";
+import { Header as AriaHeader, ListBox as AriaListBox, ListBoxItem as AriaListBoxItem, ListBoxSection as AriaListBoxSection } from "react-aria-components";
+import { controlFontWeight, controlOpacity, useControlTheme } from "./control.js";
+import { resolveDirection, useDirection } from "./direction.js";
+import { multipleSelection, singleSelection, toAriaSelection } from "./selection.js";
+import { AriaDirectionBoundary } from "./aria-direction.js";
+const ListBoxThemeContext = createContext(null);
+const ListBoxRootImplementation = forwardRef(function ListBoxRoot(properties, ref) {
+    const { className, color, defaultValue, disabledValues, onChange, radius = "medium", selectionMode = "single", shouldFocusOnHover = false, size = "medium", style, value, ...native } = properties;
+    const theme = useControlTheme({ color, radius, size });
+    const context = useMemo(() => ({ color, radius, size, theme }), [color, radius, size, theme]);
+    const direction = resolveDirection(native.dir, useDirection());
+    const selection = selectionProperties(properties);
+    return _jsx(ListBoxThemeContext.Provider, { value: context, children: _jsx(AriaDirectionBoundary, { direction: direction, children: _jsx(AriaListBox, { ...native, ...selection, ref: ref, dir: direction, selectionMode: selectionMode, shouldFocusOnHover: shouldFocusOnHover, className: className, style: {
+                    display: "grid",
+                    gap: theme.gap,
+                    minWidth: 0,
+                    padding: theme.gap,
+                    boxSizing: "border-box",
+                    outline: "none",
+                    fontFamily: "inherit",
+                    fontSize: theme.fontSize,
+                    ...style
+                } }) }) });
+});
+export const ListBoxRoot = ListBoxRootImplementation;
+function selectionProperties(properties) {
+    const selectedKeys = toAriaSelection(properties.value);
+    const defaultSelectedKeys = toAriaSelection(properties.defaultValue);
+    const disabledKeys = properties.disabledValues;
+    const onSelectionChange = properties.onChange == null
+        ? undefined
+        : (selection) => {
+            if (properties.selectionMode === "multiple") {
+                properties.onChange?.(multipleSelection(selection));
+                return;
+            }
+            properties.onChange?.(singleSelection(selection));
+        };
+    return {
+        ...(selectedKeys !== undefined ? { selectedKeys } : {}),
+        ...(defaultSelectedKeys !== undefined ? { defaultSelectedKeys } : {}),
+        ...(disabledKeys !== undefined ? { disabledKeys } : {}),
+        ...(onSelectionChange !== undefined ? { onSelectionChange } : {})
+    };
+}
+const ListBoxItemImplementation = forwardRef(function ListBoxItem({ children, className, color, disabled = false, style, ...properties }, ref) {
+    const inherited = useContext(ListBoxThemeContext);
+    const item = {
+        children,
+        className,
+        disabled,
+        properties: {
+            ...properties,
+            textValue: properties.textValue ?? (typeof children === "string" ? children : undefined)
+        },
+        ref,
+        style
+    };
+    return inherited != null && color === undefined
+        ? _jsx(ListBoxItemView, { ...item, theme: inherited.theme })
+        : _jsx(ResolvedListBoxItem, { ...item, color: color ?? inherited?.color, radius: inherited?.radius, size: inherited?.size });
+});
+function ResolvedListBoxItem({ color, radius, size, ...properties }) {
+    return _jsx(ListBoxItemView, { ...properties, theme: useControlTheme({ color, radius, size }) });
+}
+function ListBoxItemView({ children, className, disabled, properties, ref, style, theme }) {
+    return _jsx(AriaListBoxItem, { ...properties, ref: ref, className: className, isDisabled: disabled, style: state => ({
+            ...theme.transition,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-between",
+            gap: theme.gap,
+            minWidth: 0,
+            minHeight: theme.height,
+            paddingInline: Math.max(8, theme.spacing),
+            boxSizing: "border-box",
+            borderRadius: theme.radius,
+            outline: state.isFocusVisible && !state.isSelected ? `1px solid ${theme.focusColor}` : "none",
+            outlineOffset: 1,
+            cursor: disabled ? "not-allowed" : "pointer",
+            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
+                    ? theme.paints.subtle.hover
+                    : { background: "transparent", color: "inherit" }),
+            ...style
+        }), children: state => _jsxs(_Fragment, { children: [typeof children === "function" ? children(state) : children, _jsx("span", { "aria-hidden": "true", style: { flexShrink: 0, width: "1em", textAlign: "center" }, children: state.isSelected ? "✓" : null })] }) });
+}
+export const ListBoxItem = ListBoxItemImplementation;
+const ListBoxSectionImplementation = forwardRef(function ListBoxSection({ className, style, ...properties }, ref) {
+    const theme = useListBoxTheme();
+    return _jsx(AriaListBoxSection, { ...properties, ref: ref, className: className, style: {
+            display: "grid",
+            gap: theme.gap,
+            minWidth: 0,
+            ...style
+        } });
+});
+export const ListBoxSection = ListBoxSectionImplementation;
+export const ListBoxHeader = forwardRef(function ListBoxHeader({ style, ...properties }, ref) {
+    const theme = useListBoxTheme();
+    return _jsx(AriaHeader, { ...properties, ref: ref, style: {
+            paddingInline: Math.max(8, theme.spacing),
+            paddingBlock: theme.gap,
+            fontWeight: controlFontWeight,
+            opacity: controlOpacity.secondary,
+            ...style
+        } });
+});
+function useListBoxTheme() {
+    const inherited = useContext(ListBoxThemeContext);
+    if (inherited == null)
+        throw new Error("ListBox parts must be used inside ListBox");
+    return inherited.theme;
+}
+/** A selectable collection whose items and groups remain independently composable. */
+export const ListBox = Object.assign(ListBoxRoot, {
+    Item: ListBoxItem,
+    Section: ListBoxSection,
+    Header: ListBoxHeader
+});

package/dist/main.d.ts

@@ -10,26 +10,42 @@ export type { Preferences, Theme } from "./preferences.js";
 export type { Direction } from "./direction.js";
 export { Flex, type FlexProps } from "./flex.js";
 export { Grid, type GridProps } from "./grid.js";
-export { Surface, type MaterialOptions, type ShadowOptions, type SurfaceComponent, type SurfaceHost, type SurfaceHostProps, type SurfaceOwnProps, type SurfaceProps } from "./surface.js";
+export { Surface, type MaterialMode, type MaterialOptions, type ShadowOptions, type SurfaceComponent, type SurfaceHost, type SurfaceHostProps, type SurfaceOwnProps, type SurfaceProps } from "./surface.js";
 export { defaultColor, type Color, type ColorLevel, type ColorScale } from "./color.js";
-export { Panel, PanelRoot, PanelHeader, PanelContent, type PanelProps, type PanelRootProps, type PanelHeaderProps, type PanelContentProps } from "./panel.js";
-export { WindowHeader, WindowHeaderRoot, WindowHeaderIdentity, WindowHeaderCenter, WindowHeaderActions, WindowHeaderAction, WindowHeaderMinimize, WindowHeaderMaximize, WindowHeaderClose, type WindowHeaderProps, type WindowHeaderRootProps, type WindowHeaderIdentityProps, type WindowHeaderCenterProps, type WindowHeaderActionsProps, type WindowHeaderActionProps, type WindowHeaderControlProps, type WindowHeaderMaximizeProps, type WindowHeaderCloseProps } from "./window-header.js";
+export { Panel, type PanelProps, type PanelHeaderProps, type PanelContentProps } from "./panel.js";
+export { Window, type WindowProps, type WindowContentProps, type WindowHeaderProps, type WindowIdentityProps, type WindowCenterProps, type WindowActionsProps, type WindowActionProps, type WindowControlProps, type WindowMaximizeProps, type WindowCloseProps } from "./window.js";
 export { Button, type ButtonColor, type ButtonProps } from "./button.js";
 export { Input, type InputProps } from "./input.js";
 export { Textarea, type TextareaProps } from "./textarea.js";
+export { DateField, type DateFieldProps } from "./date-field.js";
+export { TimeField, type TimeFieldProps } from "./time-field.js";
+export { Calendar, type CalendarProps } from "./calendar.js";
+export { RangeCalendar, type RangeCalendarProps } from "./range-calendar.js";
+export { DatePicker, type DatePickerProps } from "./date-picker.js";
+export { DateRangePicker, type DateRangePickerProps } from "./date-range-picker.js";
+export type { DateRange } from "./date-range.js";
 export { Checkbox, type CheckboxProps } from "./checkbox.js";
-export { Radio, RadioGroup, type RadioProps, type RadioGroupProps } from "./radio.js";
+export { RadioGroup, type RadioGroupProps, type RadioGroupItemProps } from "./radio.js";
 export { Switch, type SwitchProps } from "./switch.js";
 export { Select, type SelectProps, type SelectOption } from "./select.js";
+export { ComboBox, type ComboBoxProps, type ComboBoxOption } from "./combo-box.js";
+export { ListBox, type ListBoxProps, type ListBoxSingleSelectionProps, type ListBoxMultipleSelectionProps, type ListBoxMultipleValue, type ListBoxItemProps, type ListBoxSectionProps, type ListBoxHeaderProps } from "./list-box.js";
+export { Tabs, type TabsProps, type TabsListProps, type TabsTabProps, type TabsPanelsProps, type TabsPanelProps } from "./tabs.js";
+export { Table, type TableProps, type TableNoSelectionProps, type TableSingleSelectionProps, type TableMultipleSelectionProps, type TableMultipleValue, type TableSort, type TableSortDirection, type TableHeaderProps, type TableColumnProps, type TableBodyProps, type TableRowProps, type TableCellProps } from "./table.js";
+export { Tree, type TreeProps, type TreeNoSelectionProps, type TreeSingleSelectionProps, type TreeMultipleSelectionProps, type TreeMultipleValue, type TreeItemProps, type TreeContentProps, type TreeCollectionProps } from "./tree.js";
 export { Slider, type SliderProps } from "./slider.js";
+export { ProgressBar, type ProgressBarProps } from "./progress-bar.js";
 export { ScrollArea, type ScrollAreaAxis, type ScrollAreaProps } from "./scroll-area.js";
-export { Popover, PopoverRoot, PopoverTrigger, PopoverContent, PopoverDialog, PopoverTitle, PopoverClose, type PopoverProps, type PopoverRootProps, type PopoverTriggerProps, type PopoverContentProps, type PopoverDialogProps, type PopoverTitleProps, type PopoverCloseProps } from "./popover.js";
-export { Menu, MenuRoot, MenuItem, MenuSection, MenuHeader, MenuSeparator, type MenuProps, type MenuRootProps, type MenuItemProps, type MenuSectionProps, type MenuHeaderProps, type MenuSeparatorProps } from "./menu.js";
-export { DropdownMenu, DropdownMenuRoot, DropdownMenuTrigger, type DropdownMenuProps, type DropdownMenuRootProps, type DropdownMenuTriggerProps } from "./dropdown-menu.js";
-export { ContextMenu, ContextMenuRoot, ContextMenuTrigger, ContextMenuContent, type ContextMenuProps, type ContextMenuRootProps, type ContextMenuTriggerProps, type ContextMenuContentProps } from "./context-menu.js";
-export { Dialog, DialogRoot, DialogTrigger, DialogBackdrop, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogBody, DialogFooter, DialogClose, type DialogProps, type DialogRootProps, type DialogTriggerProps, type DialogBackdropProps, type DialogContentProps, type DialogHeaderProps, type DialogTitleProps, type DialogDescriptionProps, type DialogBodyProps, type DialogFooterProps, type DialogCloseProps } from "./dialog.js";
-export { AlertDialog, AlertDialogRoot, AlertDialogBackdrop, AlertDialogContent, type AlertDialogProps, type AlertDialogRootProps, type AlertDialogBackdropProps, type AlertDialogContentProps } from "./alert-dialog.js";
-export { Tooltip, TooltipRoot, TooltipTrigger, TooltipContent, type TooltipProps, type TooltipRootProps, type TooltipTriggerProps, type TooltipContentProps } from "./tooltip.js";
+export { Toolbar, type ToolbarProps, type ToolbarGroupProps, type ToolbarSeparatorProps } from "./toolbar.js";
+export { Disclosure, type DisclosureProps, type DisclosureTriggerProps, type DisclosureContentProps } from "./disclosure.js";
+export { Accordion, type AccordionProps, type AccordionSingleExpansionProps, type AccordionMultipleExpansionProps, type AccordionItemProps } from "./accordion.js";
+export { Popover, type PopoverProps, type PopoverTriggerProps, type PopoverContentProps, type PopoverDialogProps, type PopoverTitleProps, type PopoverCloseProps } from "./popover.js";
+export { Menu, type MenuProps, type MenuNoSelectionProps, type MenuSingleSelectionProps, type MenuMultipleSelectionProps, type MenuMultipleValue, type MenuItemProps, type MenuSectionProps, type MenuHeaderProps, type MenuSeparatorProps } from "./menu.js";
+export { DropdownMenu, type DropdownMenuProps, type DropdownMenuTriggerProps } from "./dropdown-menu.js";
+export { ContextMenu, type ContextMenuProps, type ContextMenuTriggerProps, type ContextMenuContentProps } from "./context-menu.js";
+export { Dialog, type DialogProps, type DialogTriggerProps, type DialogBackdropProps, type DialogContentProps, type DialogHeaderProps, type DialogTitleProps, type DialogDescriptionProps, type DialogBodyProps, type DialogFooterProps, type DialogCloseProps } from "./dialog.js";
+export { AlertDialog, type AlertDialogProps, type AlertDialogBackdropProps, type AlertDialogContentProps } from "./alert-dialog.js";
+export { Tooltip, type TooltipProps, type TooltipTriggerProps, type TooltipContentProps } from "./tooltip.js";
 export type { ControlColor } from "./control.js";
 export type { LayoutAlignment, LayoutGap, LayoutJustification } from "./layout.js";
 export { resolveRadius, type Radius, type RadiusProps } from "./radius.js";

package/dist/main.js

@@ -10,24 +10,40 @@ export { Flex } from "./flex.js";
 export { Grid } from "./grid.js";
 export { Surface } from "./surface.js";
 export { defaultColor } from "./color.js";
-export { Panel, PanelRoot, PanelHeader, PanelContent } from "./panel.js";
-export { WindowHeader, WindowHeaderRoot, WindowHeaderIdentity, WindowHeaderCenter, WindowHeaderActions, WindowHeaderAction, WindowHeaderMinimize, WindowHeaderMaximize, WindowHeaderClose } from "./window-header.js";
+// Context-dependent parts are public only through their owning component family.
+export { Panel } from "./panel.js";
+export { Window } from "./window.js";
 export { Button } from "./button.js";
 export { Input } from "./input.js";
 export { Textarea } from "./textarea.js";
+export { DateField } from "./date-field.js";
+export { TimeField } from "./time-field.js";
+export { Calendar } from "./calendar.js";
+export { RangeCalendar } from "./range-calendar.js";
+export { DatePicker } from "./date-picker.js";
+export { DateRangePicker } from "./date-range-picker.js";
 export { Checkbox } from "./checkbox.js";
-export { Radio, RadioGroup } from "./radio.js";
+export { RadioGroup } from "./radio.js";
 export { Switch } from "./switch.js";
 export { Select } from "./select.js";
+export { ComboBox } from "./combo-box.js";
+export { ListBox } from "./list-box.js";
+export { Tabs } from "./tabs.js";
+export { Table } from "./table.js";
+export { Tree } from "./tree.js";
 export { Slider } from "./slider.js";
+export { ProgressBar } from "./progress-bar.js";
 export { ScrollArea } from "./scroll-area.js";
-export { Popover, PopoverRoot, PopoverTrigger, PopoverContent, PopoverDialog, PopoverTitle, PopoverClose } from "./popover.js";
-export { Menu, MenuRoot, MenuItem, MenuSection, MenuHeader, MenuSeparator } from "./menu.js";
-export { DropdownMenu, DropdownMenuRoot, DropdownMenuTrigger } from "./dropdown-menu.js";
-export { ContextMenu, ContextMenuRoot, ContextMenuTrigger, ContextMenuContent } from "./context-menu.js";
-export { Dialog, DialogRoot, DialogTrigger, DialogBackdrop, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogBody, DialogFooter, DialogClose } from "./dialog.js";
-export { AlertDialog, AlertDialogRoot, AlertDialogBackdrop, AlertDialogContent } from "./alert-dialog.js";
-export { Tooltip, TooltipRoot, TooltipTrigger, TooltipContent } from "./tooltip.js";
+export { Toolbar } from "./toolbar.js";
+export { Disclosure } from "./disclosure.js";
+export { Accordion } from "./accordion.js";
+export { Popover } from "./popover.js";
+export { Menu } from "./menu.js";
+export { DropdownMenu } from "./dropdown-menu.js";
+export { ContextMenu } from "./context-menu.js";
+export { Dialog } from "./dialog.js";
+export { AlertDialog } from "./alert-dialog.js";
+export { Tooltip } from "./tooltip.js";
 export { resolveRadius } from "./radius.js";
 export { resolveSpacing } from "./spacing.js";
 export { useColor } from "./color.js";

package/dist/material-options.d.ts

@@ -8,10 +8,12 @@ export interface MaterialOptions {
     readonly distortion?: ScaleLevel | number;
     readonly saturation?: ScaleLevel | number;
 }
+/** React UI's progressively complete browser rendering strategies for a resolved Material. */
+export type MaterialMode = "none" | "basic" | "extended" | "full";
 /** Grouped material customization exposed by components built on Surface. */
 export interface MaterialOverrides {
-    /** Omission or true uses Appearance defaults; false uses the resolved color as a normal background. */
-    readonly material?: boolean | MaterialOptions;
+    /** Omission uses basic rendering. An options object uses full rendering with those overrides. */
+    readonly material?: MaterialMode | MaterialOptions;
 }
 /** Resolves overrides against an already selected material branch. */
 export declare function resolveMaterialOptions(values: MaterialOptions, defaults: Readonly<{