@phreshos/react-ui 0.1.29 → 0.1.31

package/dist/table.d.ts

@@ -0,0 +1,78 @@
+import type { CSSProperties, ReactElement, RefAttributes } from "react";
+import type { CellProps as AriaCellProps, ColumnProps as AriaColumnProps, RowProps as AriaRowProps, TableBodyProps as AriaTableBodyProps, TableHeaderProps as AriaTableHeaderProps, TableProps as AriaTableProps } from "react-aria-components";
+import type { ControlColor } from "./control.js";
+import type { RadiusProps } from "./radius.js";
+import type { ScaleLevel } from "./scale.js";
+import { type MultipleStringSelection, type MultipleStringSelectionProps, type SingleStringSelectionProps } from "./selection.js";
+export type TableSortDirection = "ascending" | "descending";
+export interface TableSort {
+    readonly column: string;
+    readonly direction: TableSortDirection;
+}
+type TableRootBaseProps = Omit<AriaTableProps, "className" | "defaultSelectedKeys" | "disabledKeys" | "onRowAction" | "onSelectionChange" | "onSortChange" | "selectedKeys" | "selectionMode" | "sortDescriptor" | "style"> & RadiusProps & Readonly<{
+    className?: string;
+    color?: ControlColor;
+    disabledValues?: readonly string[];
+    onRowAction?: (value: string) => void;
+    onSortChange?: (sort: TableSort) => void;
+    size?: ScaleLevel;
+    sort?: TableSort;
+    style?: CSSProperties;
+}>;
+export type TableNoSelectionProps = Readonly<{
+    selectionMode?: "none";
+    value?: never;
+    defaultValue?: never;
+    onChange?: never;
+}>;
+export type TableSingleSelectionProps = SingleStringSelectionProps & Readonly<{
+    selectionMode: "single";
+}>;
+export type TableMultipleValue = MultipleStringSelection;
+export type TableMultipleSelectionProps = MultipleStringSelectionProps & Readonly<{
+    selectionMode: "multiple";
+}>;
+export type TableRootProps = TableRootBaseProps & (TableNoSelectionProps | TableSingleSelectionProps | TableMultipleSelectionProps);
+export declare const TableRoot: import("react").ForwardRefExoticComponent<TableRootProps & RefAttributes<HTMLDivElement | HTMLTableElement>>;
+export interface TableHeaderProps<T extends object = object> extends Omit<AriaTableHeaderProps<T>, "className" | "style"> {
+    readonly className?: string;
+    readonly color?: ControlColor;
+    readonly style?: CSSProperties;
+}
+export type TableHeaderComponent = <T extends object = object>(properties: TableHeaderProps<T> & RefAttributes<HTMLTableSectionElement | HTMLDivElement>) => ReactElement | null;
+export declare const TableHeader: TableHeaderComponent;
+export interface TableColumnProps extends Omit<AriaColumnProps, "className" | "id" | "style"> {
+    readonly className?: string;
+    readonly id: string;
+    readonly style?: CSSProperties;
+}
+export declare const TableColumn: import("react").ForwardRefExoticComponent<TableColumnProps & RefAttributes<HTMLDivElement | HTMLTableCellElement>>;
+export interface TableBodyProps<T extends object = object> extends Omit<AriaTableBodyProps<T>, "className" | "style"> {
+    readonly className?: string;
+    readonly style?: CSSProperties;
+}
+export type TableBodyComponent = <T extends object = object>(properties: TableBodyProps<T> & RefAttributes<HTMLTableSectionElement | HTMLDivElement>) => ReactElement | null;
+export declare const TableBody: TableBodyComponent;
+export interface TableRowProps<T extends object = object> extends Omit<AriaRowProps<T>, "className" | "id" | "isDisabled" | "style"> {
+    readonly className?: string;
+    readonly disabled?: boolean;
+    readonly id: string;
+    readonly style?: CSSProperties;
+}
+export type TableRowComponent = <T extends object = object>(properties: TableRowProps<T> & RefAttributes<HTMLTableRowElement | HTMLDivElement>) => ReactElement | null;
+export declare const TableRow: TableRowComponent;
+export interface TableCellProps extends Omit<AriaCellProps, "className" | "style"> {
+    readonly className?: string;
+    readonly style?: CSSProperties;
+}
+export declare const TableCell: import("react").ForwardRefExoticComponent<TableCellProps & RefAttributes<HTMLDivElement | HTMLTableCellElement>>;
+/** Structured rows and columns with optional selection and consumer-owned sorting. */
+export declare const Table: import("react").ForwardRefExoticComponent<TableRootProps & RefAttributes<HTMLDivElement | HTMLTableElement>> & {
+    Header: TableHeaderComponent;
+    Column: import("react").ForwardRefExoticComponent<TableColumnProps & RefAttributes<HTMLDivElement | HTMLTableCellElement>>;
+    Body: TableBodyComponent;
+    Row: TableRowComponent;
+    Cell: import("react").ForwardRefExoticComponent<TableCellProps & RefAttributes<HTMLDivElement | HTMLTableCellElement>>;
+};
+export type TableProps = TableRootProps;
+export {};

package/dist/table.js

@@ -0,0 +1,148 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, forwardRef, useContext, useMemo } from "react";
+import { Cell as AriaCell, Column as AriaColumn, Row as AriaRow, Table as AriaTable, TableBody as AriaTableBody, TableHeader as AriaTableHeader } from "react-aria-components";
+import { colorOpacity } from "./color.js";
+import { controlFontWeight, controlOpacity, useControlTheme } from "./control.js";
+import { resolveDirection, useDirection } from "./direction.js";
+import { multipleSelection, singleSelection, stringKey, toAriaSelection } from "./selection.js";
+import { AriaDirectionBoundary } from "./aria-direction.js";
+const TableThemeContext = createContext(null);
+export const TableRoot = forwardRef(function TableRoot(properties, ref) {
+    const { className, color, defaultValue, disabledValues, onChange, onRowAction, onSortChange, radius = "medium", selectionMode = "none", size = "medium", sort, style, value, ...native } = properties;
+    const theme = useControlTheme({ color, radius, size });
+    const context = useMemo(() => ({ color, interactive: selectionMode !== "none" || onRowAction != null, radius, size, theme }), [color, onRowAction, radius, selectionMode, size, theme]);
+    const direction = resolveDirection(native.dir, useDirection());
+    return _jsx(TableThemeContext.Provider, { value: context, children: _jsx(AriaDirectionBoundary, { direction: direction, children: _jsx(AriaTable, { ...native, ...selectionProperties(properties), ...(sort === undefined ? {} : { sortDescriptor: sort }), ref: ref, dir: direction, className: className, disabledKeys: disabledValues, selectionMode: selectionMode, onRowAction: onRowAction == null ? undefined : key => onRowAction(stringKey(key)), onSortChange: onSortChange == null ? undefined : descriptor => onSortChange(tableSort(descriptor)), style: {
+                    width: "100%",
+                    minWidth: "max-content",
+                    borderCollapse: "separate",
+                    borderSpacing: 0,
+                    boxSizing: "border-box",
+                    borderRadius: theme.radius,
+                    // Header and row paints belong to the table, so the table must clip
+                    // them rather than relying on a surrounding surface for its radius.
+                    overflow: "hidden",
+                    fontFamily: "inherit",
+                    fontSize: theme.fontSize,
+                    ...style
+                } }) }) });
+});
+function selectionProperties(properties) {
+    const selectedKeys = toAriaSelection(properties.value);
+    const defaultSelectedKeys = toAriaSelection(properties.defaultValue);
+    const onSelectionChange = properties.onChange == null
+        ? undefined
+        : (selection) => {
+            if (properties.selectionMode === "multiple") {
+                properties.onChange?.(multipleSelection(selection));
+                return;
+            }
+            if (properties.selectionMode === "single")
+                properties.onChange?.(singleSelection(selection));
+        };
+    return {
+        ...(selectedKeys !== undefined ? { selectedKeys } : {}),
+        ...(defaultSelectedKeys !== undefined ? { defaultSelectedKeys } : {}),
+        ...(onSelectionChange !== undefined ? { onSelectionChange } : {})
+    };
+}
+function tableSort(descriptor) {
+    return { column: stringKey(descriptor.column), direction: descriptor.direction };
+}
+const TableHeaderImplementation = forwardRef(function TableHeader({ className, color, style, ...properties }, ref) {
+    const inherited = useTableContext();
+    const resolvedColor = color ?? inherited.color;
+    const theme = useControlTheme({ color: resolvedColor, radius: inherited.radius, size: inherited.size });
+    const context = useMemo(() => ({ ...inherited, color: resolvedColor, theme }), [inherited, resolvedColor, theme]);
+    return _jsx(TableThemeContext.Provider, { value: context, children: _jsx(AriaTableHeader, { ...properties, ref: ref, className: className, style: { ...style } }) });
+});
+export const TableHeader = TableHeaderImplementation;
+export const TableColumn = forwardRef(function TableColumn({ allowsSorting = false, children, className, style, textValue, ...properties }, ref) {
+    const theme = useTableTheme();
+    return _jsx(AriaColumn, { ...properties, ref: ref, allowsSorting: allowsSorting, className: className, textValue: textValue ?? (typeof children === "string" ? children : undefined), style: state => ({
+            ...theme.transition,
+            minWidth: 0,
+            height: theme.height,
+            paddingBlock: theme.gap,
+            paddingInline: Math.max(8, theme.spacing),
+            boxSizing: "border-box",
+            outline: state.isFocusVisible ? `1px solid ${theme.focusColor}` : "none",
+            outlineOffset: -1,
+            ...(state.isHovered && allowsSorting ? theme.paints.palette.hover : theme.paints.palette.rest),
+            cursor: allowsSorting ? "pointer" : "default",
+            fontWeight: controlFontWeight,
+            textAlign: "start",
+            userSelect: "none",
+            ...style
+        }), children: state => _jsxs("span", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", gap: theme.gap, minWidth: 0 }, children: [_jsx("span", { style: { minWidth: 0 }, children: typeof children === "function" ? children(state) : children }), allowsSorting && state.sortDirection != null && _jsx(SortIndicator, { direction: state.sortDirection, theme: theme })] }) });
+});
+function SortIndicator({ direction, theme }) {
+    return _jsx("svg", { "aria-hidden": "true", width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", stroke: "currentColor", strokeWidth: "1.5", style: {
+            ...theme.transition,
+            flexShrink: 0,
+            transitionProperty: "transform",
+            transform: `rotate(${direction === "descending" ? 180 : 0}deg)`
+        }, children: _jsx("path", { d: "m2 8 4-4 4 4" }) });
+}
+const TableBodyImplementation = forwardRef(function TableBody({ className, style, ...properties }, ref) {
+    return _jsx(AriaTableBody, { ...properties, ref: ref, className: className, style: { ...style } });
+});
+export const TableBody = TableBodyImplementation;
+const TableRowImplementation = forwardRef(function TableRow({ className, disabled = false, onAction, style, ...properties }, ref) {
+    const { interactive, theme } = useTableContext();
+    return _jsx(AriaRow, { ...properties, ref: ref, className: className, isDisabled: disabled, onAction: onAction, style: state => ({
+            ...theme.transition,
+            outline: state.isFocusVisible ? `1px solid ${theme.focusColor}` : "none",
+            outlineOffset: -1,
+            cursor: disabled ? "not-allowed" : interactive || onAction != null ? "pointer" : "default",
+            opacity: disabled ? controlOpacity.disabled : 1,
+            ...(state.isSelected
+                ? state.isPressed
+                    ? theme.paints.palette.pressed
+                    : state.isHovered
+                        ? theme.paints.palette.hover
+                        : theme.paints.palette.rest
+                : state.isHovered && (interactive || onAction != null)
+                    ? theme.paints.subtle.hover
+                    : { background: "transparent", color: "inherit" }),
+            ...style
+        }) });
+});
+export const TableRow = TableRowImplementation;
+export const TableCell = forwardRef(function TableCell({ className, style, ...properties }, ref) {
+    const theme = useTableTheme();
+    const separator = colorOpacity(theme.tint, controlOpacity.separator);
+    return _jsx(AriaCell, { ...properties, ref: ref, className: className, style: state => ({
+            minWidth: 0,
+            height: theme.height,
+            paddingBlock: theme.gap,
+            paddingInline: Math.max(8, theme.spacing),
+            boxSizing: "border-box",
+            // Separators belong to the row that follows them. This preserves every
+            // internal boundary while leaving the final row without a bottom edge.
+            borderBlockStart: `1px solid ${separator}`,
+            outline: state.isFocusVisible ? `1px solid ${theme.focusColor}` : "none",
+            outlineOffset: -1,
+            background: "transparent",
+            color: "inherit",
+            textAlign: "start",
+            ...style
+        }) });
+});
+function useTableContext() {
+    const value = useContext(TableThemeContext);
+    if (value == null)
+        throw new Error("Table parts must be used inside Table");
+    return value;
+}
+function useTableTheme() {
+    return useTableContext().theme;
+}
+/** Structured rows and columns with optional selection and consumer-owned sorting. */
+export const Table = Object.assign(TableRoot, {
+    Header: TableHeader,
+    Column: TableColumn,
+    Body: TableBody,
+    Row: TableRow,
+    Cell: TableCell
+});

package/dist/tabs.d.ts

@@ -0,0 +1,45 @@
+import type { CSSProperties, ReactElement, RefAttributes } from "react";
+import type { TabListProps as AriaTabListProps, TabPanelProps as AriaTabPanelProps, TabPanelsProps as AriaTabPanelsProps, TabProps as AriaTabProps, TabsProps as AriaTabsProps } from "react-aria-components";
+import type { ControlColor } from "./control.js";
+import type { RadiusProps } from "./radius.js";
+import type { ScaleLevel } from "./scale.js";
+export interface TabsRootProps extends Omit<AriaTabsProps, "className" | "defaultSelectedKey" | "isDisabled" | "onSelectionChange" | "selectedKey" | "style">, RadiusProps {
+    readonly className?: string;
+    readonly color?: ControlColor;
+    readonly defaultValue?: string;
+    readonly disabled?: boolean;
+    readonly onChange?: (value: string) => void;
+    readonly size?: ScaleLevel;
+    readonly style?: CSSProperties;
+    readonly value?: string;
+}
+export declare const TabsRoot: import("react").ForwardRefExoticComponent<TabsRootProps & RefAttributes<HTMLDivElement>>;
+export interface TabsListProps<T extends object = object> extends Omit<AriaTabListProps<T>, "className" | "style"> {
+    readonly className?: string;
+    readonly style?: CSSProperties;
+}
+export type TabsListComponent = <T extends object = object>(properties: TabsListProps<T> & RefAttributes<HTMLDivElement>) => ReactElement | null;
+export declare const TabsList: TabsListComponent;
+export interface TabsTabProps extends Omit<AriaTabProps, "className" | "id" | "isDisabled" | "style"> {
+    readonly className?: string;
+    readonly disabled?: boolean;
+    readonly id: string;
+    readonly style?: CSSProperties;
+}
+export declare const TabsTab: import("react").ForwardRefExoticComponent<TabsTabProps & RefAttributes<HTMLDivElement>>;
+export type TabsPanelsProps<T extends object = object> = AriaTabPanelsProps<T>;
+export declare const TabsPanels: <T>(props: AriaTabPanelsProps<T> & React.RefAttributes<HTMLDivElement>) => React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | null;
+export interface TabsPanelProps extends Omit<AriaTabPanelProps, "className" | "id" | "style"> {
+    readonly className?: string;
+    readonly id: string;
+    readonly style?: CSSProperties;
+}
+export declare const TabsPanel: import("react").ForwardRefExoticComponent<TabsPanelProps & RefAttributes<HTMLDivElement>>;
+/** Peer views with one selected tab and one corresponding panel. */
+export declare const Tabs: import("react").ForwardRefExoticComponent<TabsRootProps & RefAttributes<HTMLDivElement>> & {
+    List: TabsListComponent;
+    Tab: import("react").ForwardRefExoticComponent<TabsTabProps & RefAttributes<HTMLDivElement>>;
+    Panels: <T>(props: AriaTabPanelsProps<T> & React.RefAttributes<HTMLDivElement>) => React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | null;
+    Panel: import("react").ForwardRefExoticComponent<TabsPanelProps & RefAttributes<HTMLDivElement>>;
+};
+export type TabsProps = TabsRootProps;

package/dist/tabs.js

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

package/dist/time-field.d.ts

@@ -0,0 +1,22 @@
+import type { Time } from "@internationalized/date";
+import type { TimeFieldProps as AriaTimeFieldProps } from "react-aria-components";
+import type { ControlOverrides, ControlProps, FieldProps } from "./control.js";
+import type { MaterialOverrides } from "./material-options.js";
+import type { RadiusProps } from "./radius.js";
+import type { ShadowOverrides } from "./shadow-options.js";
+type TimeFieldOverrides = ControlOverrides | "isReadOnly" | "value" | "defaultValue" | "onChange" | "minValue" | "maxValue" | "placeholderValue" | "granularity" | "hourCycle" | "hideTimeZone" | "shouldForceLeadingZeros";
+export interface TimeFieldProps extends Omit<AriaTimeFieldProps<Time>, TimeFieldOverrides>, ControlProps, FieldProps, RadiusProps, MaterialOverrides, ShadowOverrides {
+    readonly value?: Time | null;
+    readonly defaultValue?: Time | null;
+    readonly onChange?: (value: Time | null) => void;
+    readonly minValue?: Time | null;
+    readonly maxValue?: Time | null;
+    readonly placeholderValue?: Time;
+    readonly granularity?: "hour" | "minute" | "second";
+    readonly hourCycle?: 12 | 24;
+    readonly shouldForceLeadingZeros?: boolean;
+    readonly readOnly?: boolean;
+}
+/** A locale-aware time-only field whose visible clock units are independent editable segments. */
+export declare const TimeField: import("react").ForwardRefExoticComponent<TimeFieldProps & import("react").RefAttributes<HTMLDivElement>>;
+export {};

package/dist/time-field.js

@@ -0,0 +1,13 @@
+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 { DateControl } from "./date-control.js";
+import { resolveDirection, useDirection } from "./direction.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 });
+    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 })] }) }) });
+});

package/dist/toggle-indicator.js

@@ -6,7 +6,7 @@ export function ToggleIndicator({ kind, direction = "ltr", selected, indetermina
     const { animations, motionTransition: transition } = theme;
     const diameter = theme.indicatorSize;
     const active = selected || indeterminate;
-    const paints = invalid ? theme.paints.danger : active ? theme.paints.palette : theme.paints.neutral;
+    const paints = invalid ? theme.paints.danger : active ? theme.paints.palette : theme.paints.subtle;
     const paint = pressed ? paints.pressed : hovered ? paints.hover : paints.rest;
     const radius = kind === "checkbox" ? Math.min(diameter / 4, typeof theme.radius === "number" ? theme.radius : diameter / 4) : diameter;
     const switching = kind === "switch";

package/dist/toolbar.d.ts

@@ -0,0 +1,46 @@
+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";
+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;
+    /** Space between the Toolbar's direct children. */
+    readonly gap?: LayoutGap;
+    /** Axis used both for layout and arrow-key navigation. */
+    readonly orientation?: ToolbarOrientation;
+    /** Native class name applied without replacing the Toolbar contract. */
+    readonly className?: string;
+    /** Native styles applied after Toolbar defaults. */
+    readonly style?: CSSProperties;
+}
+/** 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"> {
+    /** Space between the controls in this group. */
+    readonly gap?: LayoutGap;
+    /** Native class name applied without replacing the group contract. */
+    readonly className?: string;
+    /** Native styles applied after group defaults. */
+    readonly style?: CSSProperties;
+}
+/** A semantic group of related controls within a Toolbar. */
+export declare const ToolbarGroup: import("react").ForwardRefExoticComponent<ToolbarGroupProps & import("react").RefAttributes<HTMLDivElement>>;
+export interface ToolbarSeparatorProps extends Omit<AriaSeparatorProps, "className" | "orientation" | "style"> {
+    /** Native class name applied without replacing the separator contract. */
+    readonly className?: string;
+    /** Native styles applied after separator defaults. */
+    readonly style?: CSSProperties;
+}
+/** A visual boundary whose axis is perpendicular to its Toolbar. */
+export declare const ToolbarSeparator: import("react").ForwardRefExoticComponent<ToolbarSeparatorProps & import("react").RefAttributes<HTMLElement>>;
+interface ToolbarComponent {
+    (properties: ToolbarRootProps): ReactElement | null;
+    readonly Group: typeof ToolbarGroup;
+    readonly Separator: typeof ToolbarSeparator;
+}
+/** A keyboard-navigable layout for related interactive controls. */
+export declare const Toolbar: ToolbarComponent;
+export type ToolbarProps = ToolbarRootProps;
+export {};

package/dist/toolbar.js

@@ -0,0 +1,121 @@
+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";
+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 fallbackDirection = useDirection();
+    const direction = resolveDirection(properties.dir, fallbackDirection);
+    const localRef = useRef(null);
+    const focusManager = useFocusManager();
+    const { toolbarProps } = useToolbar({
+        "aria-label": properties["aria-label"],
+        "aria-labelledby": properties["aria-labelledby"],
+        orientation
+    }, localRef);
+    const { onKeyDownCapture: _localeKeyDown, ...behaviorProperties } = toolbarProps;
+    const foreground = resolveColor(color ?? "foreground:base", colors);
+    const theme = useMemo(() => ({
+        gap: resolveGap(gap, appearance),
+        groupGap: resolveGap("small", appearance),
+        orientation,
+        separator: colorOpacity(foreground, controlOpacity.separator)
+    }), [appearance, 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: {
+                display: "flex",
+                flexDirection: orientation === "horizontal" ? "row" : "column",
+                alignItems: orientation === "horizontal" ? "center" : "flex-start",
+                gap: theme.gap,
+                width: "fit-content",
+                maxWidth: "100%",
+                minWidth: 0,
+                color: foreground,
+                fontFamily: "inherit",
+                ...style
+            } }) });
+});
+function toolbarKeyDown(focusManager, orientation, direction) {
+    return event => {
+        if (focusManager == null || !event.currentTarget.contains(event.target))
+            return;
+        const forward = orientation === "horizontal" ? "ArrowRight" : "ArrowDown";
+        const backward = orientation === "horizontal" ? "ArrowLeft" : "ArrowUp";
+        if (event.key === forward) {
+            if (orientation === "horizontal" && direction === "rtl")
+                focusManager.focusPrevious();
+            else
+                focusManager.focusNext();
+        }
+        else if (event.key === backward) {
+            if (orientation === "horizontal" && direction === "rtl")
+                focusManager.focusNext();
+            else
+                focusManager.focusPrevious();
+        }
+        else if (event.key === "Tab") {
+            if (event.shiftKey)
+                focusManager.focusFirst();
+            else
+                focusManager.focusLast();
+            return;
+        }
+        else {
+            return;
+        }
+        event.stopPropagation();
+        event.preventDefault();
+    };
+}
+/** A semantic group of related controls within a Toolbar. */
+export const ToolbarGroup = forwardRef(function ToolbarGroup({ className, gap, style, ...properties }, ref) {
+    const inherited = useToolbarTheme();
+    const { appearance } = useResolvedAppearance();
+    return _jsx(AriaGroup, { ...properties, 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),
+            minWidth: 0,
+            ...style
+        } });
+});
+/** A visual boundary whose axis is perpendicular to its Toolbar. */
+export const ToolbarSeparator = forwardRef(function ToolbarSeparator({ className, style, ...properties }, ref) {
+    const { orientation, separator } = useToolbarTheme();
+    const separatorOrientation = orientation === "horizontal" ? "vertical" : "horizontal";
+    return _jsx(AriaSeparator, { ...properties, ref: ref, className: className, orientation: separatorOrientation, style: {
+            flexShrink: 0,
+            alignSelf: "center",
+            width: separatorOrientation === "vertical" ? 1 : "50%",
+            minWidth: separatorOrientation === "vertical" ? 1 : undefined,
+            height: separatorOrientation === "vertical" ? "1.5em" : 1,
+            minHeight: separatorOrientation === "vertical" ? 8 : 1,
+            margin: 0,
+            border: 0,
+            background: separator,
+            ...style
+        } });
+});
+function useToolbarTheme() {
+    const context = useContext(ToolbarThemeContext);
+    if (context == null)
+        throw new Error("Toolbar parts must be used inside Toolbar");
+    return context;
+}
+/** A keyboard-navigable layout for related interactive controls. */
+export const Toolbar = Object.assign(ToolbarRoot, {
+    Group: ToolbarGroup,
+    Separator: ToolbarSeparator
+});

package/dist/tooltip.d.ts

@@ -14,7 +14,6 @@ export interface TooltipContentProps extends Omit<AriaTooltipProps, "children" |
 export declare const TooltipContent: import("react").ForwardRefExoticComponent<TooltipContentProps & import("react").RefAttributes<HTMLDivElement>>;
 /** A description shown from the focus and hover state of its trigger. */
 export declare const Tooltip: typeof TooltipRoot & {
-    Root: typeof TooltipRoot;
     Trigger: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
     Content: import("react").ForwardRefExoticComponent<TooltipContentProps & import("react").RefAttributes<HTMLDivElement>>;
 };

package/dist/tooltip.js

@@ -33,7 +33,6 @@ export const TooltipContent = forwardRef(function TooltipContent({ children, cla
 });
 /** A description shown from the focus and hover state of its trigger. */
 export const Tooltip = Object.assign(TooltipRoot, {
-    Root: TooltipRoot,
     Trigger: TooltipTrigger,
     Content: TooltipContent
 });