@phreshos/react-ui 0.1.36 → 0.1.37

package/dist/app-layout.js

@@ -0,0 +1,84 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, forwardRef, useContext } from "react";
+import { useControlMetrics } from "./control/control.js";
+import { separatorColor } from "./control/field.js";
+import { headerHeight } from "./foundation/layout.js";
+import { scale } from "./foundation/scale.js";
+import { ScrollArea } from "./scroll-area.js";
+const AppLayoutContext = createContext(null);
+/**
+ * The frame of a program's interface: a sidebar beside a header, the content,
+ * and an optional footer. It owns only the regions, their scrolling, and the
+ * hairlines between them; the program places its own components inside.
+ */
+const AppLayoutRoot = forwardRef(function AppLayout({ children, sidebarWidth, style, ...properties }, ref) {
+    const metrics = useControlMetrics();
+    const { spacing } = metrics.visual;
+    return _jsx(AppLayoutContext.Provider, { value: { separator: separatorColor(metrics), spacing }, children: _jsx("div", { ...properties, ref: ref, style: {
+                display: "grid",
+                gridTemplateColumns: `${typeof sidebarWidth === "number" ? `${sidebarWidth}px` : sidebarWidth ?? `${spacing * 18}px`} minmax(0, 1fr)`,
+                gridTemplateRows: "auto minmax(0, 1fr) auto",
+                gridTemplateAreas: `"sidebar header" "sidebar content" "sidebar footer"`,
+                width: "100%",
+                height: "100%",
+                minWidth: 0,
+                minHeight: 0,
+                // The frame of a program: its text takes the Appearance text color.
+                color: metrics.visual.colors.foreground,
+                fontFamily: "inherit",
+                ...style
+            }, children: children }) });
+});
+/** The sidebar, such as a program's navigation. It scrolls on its own. */
+const AppLayoutSidebar = forwardRef(function AppLayoutSidebar({ children, style, ...properties }, ref) {
+    const { separator, spacing } = useLayout();
+    return _jsx("aside", { ...properties, ref: ref, style: { gridArea: "sidebar", minHeight: 0, boxSizing: "border-box", borderInlineEnd: `1px solid ${separator}`, ...style }, children: _jsx(ScrollArea, { style: { height: "100%" }, children: _jsx("div", { style: { padding: scale(spacing, "small") }, children: children }) }) });
+});
+/** The header row above the content, as tall as a Window or Panel header. */
+const AppLayoutHeader = forwardRef(function AppLayoutHeader({ style, ...properties }, ref) {
+    const { separator, spacing } = useLayout();
+    return _jsx("header", { ...properties, ref: ref, style: {
+            gridArea: "header",
+            display: "flex",
+            alignItems: "center",
+            gap: scale(spacing, "small"),
+            minWidth: 0,
+            minHeight: headerHeight(spacing),
+            paddingInline: spacing,
+            boxSizing: "border-box",
+            borderBlockEnd: `1px solid ${separator}`,
+            ...style
+        } });
+});
+/** The content. It scrolls on its own, padded by the Appearance spacing. */
+const AppLayoutContent = forwardRef(function AppLayoutContent({ children, style, ...properties }, ref) {
+    const { spacing } = useLayout();
+    return _jsx("main", { ...properties, ref: ref, style: { gridArea: "content", minWidth: 0, minHeight: 0, ...style }, children: _jsx(ScrollArea, { style: { height: "100%" }, children: _jsx("div", { style: { padding: spacing }, children: children }) }) });
+});
+/** An optional row below the content, such as the actions that apply to it. */
+const AppLayoutFooter = forwardRef(function AppLayoutFooter({ style, ...properties }, ref) {
+    const { separator, spacing } = useLayout();
+    return _jsx("footer", { ...properties, ref: ref, style: {
+            gridArea: "footer",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "flex-end",
+            gap: scale(spacing, "small"),
+            minWidth: 0,
+            padding: `${scale(spacing, "small")}px ${spacing}px`,
+            borderBlockStart: `1px solid ${separator}`,
+            ...style
+        } });
+});
+function useLayout() {
+    const context = useContext(AppLayoutContext);
+    if (context == null)
+        throw new Error("AppLayout parts must be used inside AppLayout");
+    return context;
+}
+export const AppLayout = Object.assign(AppLayoutRoot, {
+    Sidebar: AppLayoutSidebar,
+    Header: AppLayoutHeader,
+    Content: AppLayoutContent,
+    Footer: AppLayoutFooter
+});

package/dist/button.d.ts

@@ -1,32 +1,20 @@
-import type { CSSProperties, ReactNode } from "react";
-import type { ButtonProps as AriaButtonProps } from "react-aria-components";
-import type { ScaleLevel } from "./scale.js";
-import type { RadiusProps } from "./radius.js";
-import { type ControlColor } from "./control.js";
-import type { MaterialOverrides } from "./material-options.js";
-import type { ShadowOverrides } from "./shadow-options.js";
-type NativeButtonProps = Omit<AriaButtonProps, "children" | "className" | "color" | "isDisabled" | "isPending" | "onClick" | "onPress" | "style">;
-/** A semantic color from Appearance; omission uses `default:base`. */
-export type ButtonColor = ControlColor;
-/** Properties accepted by the shared interactive button. */
-export interface ButtonProps extends NativeButtonProps, RadiusProps, MaterialOverrides, ShadowOverrides {
-    /** Visible Button content. */
+import type { ReactNode } from "react";
+import { type ButtonProps as AriaButtonProps } from "react-aria-components";
+import { type ControlProps } from "./control/control.js";
+import type { Color } from "./foundation/color.js";
+import type { RadiusProps } from "./foundation/radius.js";
+import type { MaterialOverrides } from "./surface/material-options.js";
+import type { ShadowOverrides } from "./surface/shadow-options.js";
+type NativeButtonProps = Omit<AriaButtonProps, "children" | "className" | "color" | "isDisabled" | "isPending" | "onClick" | "render" | "style">;
+/** A color from Appearance or CSS; omission keeps the Button neutral. */
+export type ButtonColor = Color;
+export interface ButtonProps extends NativeButtonProps, ControlProps, RadiusProps, MaterialOverrides, ShadowOverrides {
     readonly children?: ReactNode;
-    /** Base color for the material. Omission keeps the Button neutral. */
-    readonly color?: ButtonColor;
-    /** Native class name applied without replacing the component contract. */
-    readonly className?: string;
-    /** Prevents focus and activation. */
-    readonly disabled?: boolean;
     /** Prevents activation while keeping the Button focusable. */
     readonly pending?: boolean;
     /** Runs once for a normalized pointer, Enter, or Space activation. */
     readonly onPress?: () => void;
-    /** Derives the Button's spacing from Appearance's concrete default. */
-    readonly size?: ScaleLevel;
-    /** Native styles applied after Button defaults. */
-    readonly style?: CSSProperties;
 }
-/** An Appearance-aware action with normalized pointer and keyboard behavior. */
+/** A raised Surface you act on. */
 export declare const Button: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
 export {};

package/dist/button.js

@@ -1,58 +1,53 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { Button as AriaButton } from "react-aria-components";
-import { controlOpacity, useControlTheme } from "./control.js";
-import { SurfaceButton } from "./control-surface.js";
-/** An Appearance-aware action with normalized pointer and keyboard behavior. */
-export const Button = forwardRef(function Button({ children, color, disabled = false, pending = false, onPress, radius = "medium", size = "medium", style, material, shadow, type = "button", ...properties }, ref) {
-    const theme = useControlTheme({ color, radius, size });
-    return _jsx(AriaButton, { ...properties, ref: ref, type: type, isDisabled: disabled, isPending: pending, onPress: onPress, render: (native, state) => _jsx(SurfaceButton, { native: native, material: material, shadow: shadow, paint: buttonPaint(theme, !disabled && !pending, state.isHovered, state.isPressed) }), style: ({ isFocusVisible, isHovered, isPressed }) => buttonStyle({
-            theme,
-            disabled,
-            isFocusVisible,
-            isHovered,
-            isPressed,
-            pending,
-            style
-        }), children: children });
+import { controlOpacity, transition, useControlMetrics } from "./control/control.js";
+import { surfaceRender } from "./control/surface-render.js";
+/** A raised Surface you act on. */
+export const Button = forwardRef(function Button({ children, color = "default", disabled, pending = false, radius, size, style, className, material, shadow, type = "button", ...properties }, ref) {
+    const metrics = useControlMetrics(size, radius);
+    // Disabled state is read from React Aria, so a Button placed in a slot, such
+    // as a calendar's month buttons, follows the owner that disables it.
+    return _jsx(AriaButton, { ...properties, ref: ref, type: type, className: className, isDisabled: disabled, isPending: pending, render: surfaceRender("button", state => ({
+            color,
+            material,
+            shadow,
+            radius: metrics.radius,
+            interaction: {
+                hovered: !state.isDisabled && !pending && state.isHovered,
+                pressed: !state.isDisabled && !pending && state.isPressed,
+                focusVisible: state.isFocusVisible,
+                disabled: state.isDisabled
+            }
+        })), style: state => buttonStyle(metrics, !state.isDisabled && !pending && state.isPressed, state.isDisabled, pending, style), children: children });
 });
-function buttonStyle({ theme, disabled, isFocusVisible, isHovered, isPressed, pending, style }) {
-    const { spacing, focusColor } = theme;
-    const interactive = !disabled && !pending;
-    const paint = buttonPaint(theme, interactive, isHovered, isPressed);
+function buttonStyle(metrics, pressed, disabled, pending, style) {
     return {
-        ...theme.transition,
+        ...transition(metrics.visual, "box-shadow, color, outline-color, opacity, scale"),
         appearance: "none",
         boxSizing: "border-box",
-        display: "inline-grid",
-        gridAutoFlow: "column",
-        gridAutoColumns: "max-content",
-        placeItems: "center",
+        display: "inline-flex",
+        alignItems: "center",
         justifyContent: "center",
+        gap: metrics.gap,
         flexShrink: 0,
         minWidth: 0,
-        height: theme.height,
+        height: metrics.height,
         paddingBlock: 0,
-        paddingInline: Math.max(8, spacing),
-        gap: theme.gap,
-        border: "none",
-        borderRadius: theme.radius,
-        outline: isFocusVisible ? `1px solid ${focusColor}` : "none",
-        outlineOffset: 1,
-        ...paint,
-        opacity: disabled ? controlOpacity.disabled : pending ? controlOpacity.pending : 1,
-        cursor: disabled ? "not-allowed" : pending ? "progress" : "pointer",
+        paddingInline: metrics.inset,
+        border: 0,
+        background: "none",
         font: "inherit",
-        fontSize: theme.fontSize,
+        fontSize: metrics.fontSize,
+        fontWeight: 500,
         lineHeight: 1,
-        textAlign: "center",
+        whiteSpace: "nowrap",
         textDecoration: "none",
         userSelect: "none",
         WebkitTapHighlightColor: "transparent",
+        cursor: disabled ? "not-allowed" : pending ? "progress" : "pointer",
+        scale: pressed ? "0.97" : "1",
+        ...(pending ? { opacity: controlOpacity.pending } : {}),
         ...style
     };
 }
-function buttonPaint(theme, interactive, hovered, pressed) {
-    const paints = theme.paints.palette;
-    return interactive && pressed ? paints.pressed : interactive && hovered ? paints.hover : paints.rest;
-}

package/dist/calendar-layout.d.ts

@@ -1,8 +1,12 @@
-import type { CSSProperties } from "react";
-import { type ControlProps, type ControlTheme } from "./control.js";
+import { type CSSProperties } from "react";
+import { type ControlMetrics } from "./control/control.js";
+import { type Color } from "./foundation/color.js";
+import type { ScaleLevel } from "./foundation/scale.js";
 /** Shared month layout used by both single-date and range calendar roots. */
-export declare function CalendarLayout({ color, range, size, theme }: Pick<ControlProps, "color" | "size"> & Readonly<{
+export declare function CalendarLayout({ color, metrics, range, size }: Readonly<{
+    color: Color;
+    metrics: ControlMetrics;
     range?: boolean;
-    theme: ControlTheme;
+    size?: ScaleLevel;
 }>): import("react").JSX.Element;
-export declare function calendarRootStyle(theme: ControlTheme, disabled?: boolean, style?: CSSProperties): CSSProperties;
+export declare function calendarRootStyle(metrics: ControlMetrics, style?: CSSProperties): CSSProperties;

package/dist/calendar-layout.js

@@ -1,103 +1,92 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { CalendarCell, CalendarGrid, CalendarGridBody, CalendarGridHeader, CalendarHeaderCell, CalendarHeading } from "react-aria-components";
+import { useContext } from "react";
+import { isSameDay } from "@internationalized/date";
+import { CalendarCell, CalendarGrid, CalendarGridBody, CalendarGridHeader, CalendarHeaderCell, CalendarHeading, CalendarStateContext, RangeCalendarStateContext } from "react-aria-components";
 import { Button } from "./button.js";
-import { resolveColorLevel, solidColors } from "./color.js";
-import { controlFontWeight, controlOpacity } from "./control.js";
-import { useDirection } from "./direction.js";
+import { controlFontWeight, controlOpacity, transition } from "./control/control.js";
+import { selectionLevel } from "./control/item.js";
+import { colorLevel, colorOpacity, readableColor, resolveColor } from "./foundation/color.js";
+import { useDirection } from "./foundation/direction.js";
+import { dimmedClass, surfacePaint } from "./surface/surface.js";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { iconProps } from "./control/icon.js";
 /** Shared month layout used by both single-date and range calendar roots. */
-export function CalendarLayout({ color, range = false, size, theme }) {
+export function CalendarLayout({ color, metrics, range = false, size }) {
     const direction = useDirection();
-    return _jsxs(_Fragment, { children: [_jsxs("header", { style: { display: "grid", gridTemplateColumns: "auto 1fr auto", alignItems: "center", gap: theme.gap }, children: [_jsx(Button, { slot: "previous", color: color, size: size, "aria-label": "Previous month", style: navigationStyle(theme), children: _jsx(Chevron, { direction: direction === "rtl" ? "next" : "previous" }) }), _jsx(CalendarHeading, { style: {
-                            margin: 0,
-                            textAlign: "center",
-                            fontFamily: "inherit",
-                            fontSize: "inherit",
-                            fontStyle: "inherit",
-                            lineHeight: "inherit",
-                            fontWeight: controlFontWeight
-                        } }), _jsx(Button, { slot: "next", color: color, size: size, "aria-label": "Next month", style: navigationStyle(theme), children: _jsx(Chevron, { direction: direction === "rtl" ? "previous" : "next" }) })] }), _jsxs(CalendarGrid, { style: {
-                    width: "max-content",
-                    margin: 0,
-                    tableLayout: "fixed",
-                    border: 0,
-                    borderRadius: 0,
-                    borderCollapse: "separate",
-                    borderSpacing: Math.max(1, theme.gap / 4),
-                    background: "transparent"
-                }, children: [_jsx(CalendarGridHeader, { children: day => _jsx(CalendarHeaderCell, { style: {
-                                height: theme.height * 0.72,
-                                padding: 0,
-                                border: 0,
-                                background: "transparent",
-                                textAlign: "center",
-                                fontFamily: "inherit",
-                                fontSize: "inherit",
-                                fontStyle: "inherit",
-                                lineHeight: "inherit",
-                                fontWeight: controlFontWeight,
-                                opacity: controlOpacity.secondary
-                            }, children: day }) }), _jsx(CalendarGridBody, { children: date => _jsx(CalendarCell, { date: date, style: state => calendarCellStyle(theme, state, range) }) })] })] });
+    const cell = metrics.height;
+    const single = useContext(CalendarStateContext);
+    const ranged = useContext(RangeCalendarStateContext);
+    return _jsxs(_Fragment, { children: [_jsxs("header", { style: { display: "grid", gridTemplateColumns: "auto 1fr auto", alignItems: "center", gap: metrics.gap }, children: [_jsx(Button, { slot: "previous", size: size, "aria-label": "Previous month", style: { width: metrics.height, paddingInline: 0 }, children: _jsx(Chevron, { direction: direction === "rtl" ? "next" : "previous" }) }), _jsx(CalendarHeading, { style: { margin: 0, textAlign: "center", fontFamily: "inherit", fontSize: "inherit", fontStyle: "inherit", lineHeight: "inherit", fontWeight: controlFontWeight } }), _jsx(Button, { slot: "next", size: size, "aria-label": "Next month", style: { width: metrics.height, paddingInline: 0 }, children: _jsx(Chevron, { direction: direction === "rtl" ? "previous" : "next" }) })] }), _jsxs(CalendarGrid, { style: { width: "max-content", margin: 0, borderCollapse: "separate", borderSpacing: 2, background: "transparent" }, children: [_jsx(CalendarGridHeader, { children: day => _jsx(CalendarHeaderCell, { style: { height: cell * 0.72, padding: 0, textAlign: "center", fontFamily: "inherit", fontSize: "inherit", fontStyle: "inherit", lineHeight: "inherit", fontWeight: controlFontWeight, opacity: controlOpacity.secondary }, children: day }) }), _jsx(CalendarGridBody, { children: date => _jsx(CalendarCell, { date: date, className: state => dimmedClass(state.isDisabled || state.isUnavailable, state.defaultClassName) ?? "", style: state => cellStyle(metrics, color, state, daySelection(state, ranged ?? single), range) }) })] })] });
 }
-export function calendarRootStyle(theme, disabled = false, style) {
+export function calendarRootStyle(metrics, style) {
     return {
         ...style,
         display: "grid",
         width: "max-content",
         maxWidth: "100%",
-        gap: theme.gap,
-        padding: theme.spacing,
+        gap: metrics.gap,
+        padding: metrics.spacing,
         fontFamily: "inherit",
-        fontSize: theme.fontSize,
-        lineHeight: 1.5,
-        opacity: disabled ? controlOpacity.disabled : 1
+        fontSize: metrics.fontSize,
+        lineHeight: 1.45
     };
 }
-function navigationStyle(theme) {
-    return {
-        width: theme.height,
-        paddingInline: 0
-    };
+/**
+ * Whether a day shows as chosen. React Aria reports no chosen day while the
+ * whole calendar is disabled, but a disabled calendar still holds its value,
+ * so the value is shown from the calendar state itself.
+ */
+function daySelection(state, calendar) {
+    if (calendar == null || !calendar.isDisabled)
+        return { selected: state.isSelected, start: state.isSelectionStart, end: state.isSelectionEnd };
+    const shown = !state.isUnavailable && !calendar.isInvalid(state.date);
+    if ("highlightedRange" in calendar) {
+        const range = calendar.highlightedRange;
+        const selected = shown && range != null && state.date.compare(range.start) >= 0 && state.date.compare(range.end) <= 0;
+        return { selected, start: selected && isSameDay(state.date, range.start), end: selected && isSameDay(state.date, range.end) };
+    }
+    const values = [calendar.value].flat();
+    const selected = shown && values.some(value => value != null && isSameDay(state.date, value));
+    return { selected, start: selected, end: selected };
 }
-function calendarCellStyle(theme, state, range) {
-    const rangeInterior = range && state.isSelected && !state.isSelectionStart && !state.isSelectionEnd
-        ? rangeInteriorPaint(theme)
-        : null;
-    const paint = state.isSelected
-        ? rangeInterior ?? theme.paints.palette.pressed
-        : state.isPressed
-            ? theme.paints.subtle.pressed
-            : state.isHovered || state.isFocused
-                ? theme.paints.subtle.hover
-                : null;
+/**
+ * A chosen day is the calendar's one decision, so it takes the full color;
+ * the days inside a range take the selection level; every other day only veils.
+ */
+function cellStyle(metrics, color, state, selection, range) {
+    const { visual } = metrics;
+    const { colors } = visual;
+    const base = resolveColor(color, colors);
+    const endpoint = selection.selected && (!range || selection.start || selection.end);
+    const fill = endpoint
+        ? base
+        : selection.selected
+            ? colorLevel(base, selectionLevel, colors)
+            : "transparent";
+    const paint = surfacePaint(visual, fill, "flat", "none", false, {
+        hovered: state.isHovered || state.isFocused,
+        pressed: state.isPressed,
+        disabled: state.isDisabled || state.isUnavailable
+    });
     return {
-        ...theme.transition,
+        ...transition(visual, "background-color, color, outline-color"),
         display: "grid",
         placeItems: "center",
         boxSizing: "border-box",
-        width: theme.height,
-        height: theme.height,
-        borderRadius: theme.radius,
-        outline: state.isFocusVisible ? `1px solid ${theme.focusColor}` : "none",
-        outlineOffset: -1,
-        background: paint?.background ?? "transparent",
-        color: paint?.color ?? "inherit",
-        opacity: state.isDisabled || state.isUnavailable
-            ? controlOpacity.disabled
-            : state.isOutsideMonth ? controlOpacity.secondary : 1,
+        width: metrics.height,
+        height: metrics.height,
+        borderRadius: metrics.radius,
+        outline: `3px solid ${state.isFocusVisible ? colorOpacity(colors.primary, 0.34) : "transparent"}`,
+        outlineOffset: 1,
+        background: paint.fill,
+        color: endpoint ? readableColor(base, colors) : "inherit",
+        fontWeight: state.isToday ? controlFontWeight : undefined,
+        opacity: state.isOutsideMonth ? controlOpacity.secondary : undefined,
         textDecoration: state.isUnavailable ? "line-through" : "none",
         cursor: state.isDisabled || state.isUnavailable ? "not-allowed" : "pointer",
         fontVariantNumeric: "tabular-nums"
     };
 }
-function rangeInteriorPaint(theme) {
-    // Range interiors are the same Appearance color at its defined lighter
-    // treatment; endpoints retain the stronger selected control paint.
-    const background = resolveColorLevel(theme.tint, "soft");
-    return {
-        background,
-        color: solidColors(background, theme.background, theme.foreground).rest.color
-    };
-}
 function Chevron({ direction }) {
-    return _jsx("svg", { "aria-hidden": "true", width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: _jsx("path", { d: direction === "previous" ? "m7.5 2-4 4 4 4" : "m4.5 2 4 4-4 4" }) });
+    return direction === "previous" ? _jsx(ChevronLeft, { ...iconProps(14) }) : _jsx(ChevronRight, { ...iconProps(14) });
 }

package/dist/calendar-trigger.d.ts

@@ -1,5 +1,5 @@
-import type { ControlTheme } from "./control.js";
-/** Calendar trigger shared by date picker fields. */
-export declare function CalendarTrigger({ theme }: Readonly<{
-    theme: ControlTheme;
+import type { ControlMetrics } from "./control/control.js";
+/** The calendar button at the end of a date picker well. */
+export declare function CalendarTrigger({ metrics }: Readonly<{
+    metrics: ControlMetrics;
 }>): import("react").JSX.Element;

package/dist/calendar-trigger.js

@@ -1,30 +1,8 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button as AriaButton } from "react-aria-components";
-/** Calendar trigger shared by date picker fields. */
-export function CalendarTrigger({ theme }) {
-    const inset = Math.max(8, theme.spacing) - Math.max(4, theme.spacing / 2);
-    return _jsx(AriaButton, { "data-date-control-end": "", style: state => ({
-            ...theme.transition,
-            appearance: "none",
-            display: "grid",
-            placeItems: "center",
-            alignSelf: "stretch",
-            flex: "0 0 auto",
-            width: theme.height - Math.max(4, theme.spacing / 2),
-            height: "auto",
-            marginBlock: inset,
-            marginInlineEnd: -Math.max(4, theme.spacing / 2),
-            padding: 0,
-            border: 0,
-            borderRadius: Math.max(2, theme.spacing / 3),
-            outline: state.isFocusVisible ? `1px solid ${theme.focusColor}` : "none",
-            background: state.isPressed
-                ? theme.paints.subtle.pressed.background
-                : state.isHovered ? theme.paints.subtle.hover.background : "transparent",
-            color: "inherit",
-            cursor: state.isDisabled ? "not-allowed" : "pointer"
-        }), children: _jsx(CalendarIcon, {}) });
-}
-function CalendarIcon() {
-    return _jsxs("svg", { "aria-hidden": "true", width: "15", height: "15", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.35", children: [_jsx("rect", { x: "2.25", y: "3.25", width: "11.5", height: "10.5", rx: "2" }), _jsx("path", { d: "M5 1.75v3M11 1.75v3M2.5 6.5h11" })] });
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Calendar as CalendarIcon } from "lucide-react";
+import { FieldButton } from "./control/field-button.js";
+import { iconProps } from "./control/icon.js";
+/** The calendar button at the end of a date picker well. */
+export function CalendarTrigger({ metrics }) {
+    return _jsx(FieldButton, { "data-date-control-end": "", metrics: metrics, style: { marginInlineEnd: -Math.max(4, metrics.inset - 4) }, children: _jsx(CalendarIcon, { ...iconProps(16) }) });
 }

package/dist/calendar.d.ts

@@ -1,7 +1,7 @@
 import type { CalendarDate } from "@internationalized/date";
 import type { CalendarProps as AriaCalendarProps } from "react-aria-components";
-import { type ControlOverrides, type ControlProps } from "./control.js";
-import type { RadiusProps } from "./radius.js";
+import { type ControlOverrides, type ControlProps } from "./control/control.js";
+import type { RadiusProps } from "./foundation/radius.js";
 type CalendarOverrides = ControlOverrides | "children" | "isReadOnly" | "isInvalid" | "value" | "defaultValue" | "onChange" | "minValue" | "maxValue" | "isDateUnavailable" | "selectionMode" | "visibleDuration" | "createCalendar" | "errorMessage" | "validationState";
 export interface CalendarProps extends Omit<AriaCalendarProps<CalendarDate>, CalendarOverrides>, ControlProps, RadiusProps {
     readonly value?: CalendarDate | null;

package/dist/calendar.js

@@ -1,13 +1,14 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { Calendar as AriaCalendar } from "react-aria-components";
-import { AriaDirectionBoundary } from "./aria-direction.js";
+import { AriaDirectionBoundary } from "./foundation/aria-direction.js";
 import { CalendarLayout, calendarRootStyle } from "./calendar-layout.js";
-import { useControlTheme } from "./control.js";
-import { resolveDirection, useDirection } from "./direction.js";
+import { useControlMetrics } from "./control/control.js";
+import { resolveDirection, useDirection } from "./foundation/direction.js";
+import { dimmedClass } from "./surface/surface.js";
 /** A locale-aware, keyboard-navigable month view for selecting one date. */
 export const Calendar = forwardRef(function Calendar({ disabled, readOnly, invalid, size, color, radius, style, className, isDateUnavailable, ...properties }, ref) {
-    const theme = useControlTheme({ size, color, radius });
+    const metrics = useControlMetrics(size, radius);
     const direction = resolveDirection(properties.dir, useDirection());
-    return _jsx(AriaDirectionBoundary, { direction: direction, children: _jsx(AriaCalendar, { ...properties, ref: ref, dir: direction, className: className, isDisabled: disabled, isReadOnly: readOnly, isInvalid: invalid, isDateUnavailable: isDateUnavailable == null ? undefined : date => isDateUnavailable(date), style: calendarRootStyle(theme, disabled, style), children: _jsx(CalendarLayout, { color: color, size: size, theme: theme }) }) });
+    return _jsx(AriaDirectionBoundary, { direction: direction, children: _jsx(AriaCalendar, { ...properties, ref: ref, dir: direction, className: dimmedClass(disabled ?? false, className), isDisabled: disabled, isReadOnly: readOnly, isInvalid: invalid, isDateUnavailable: isDateUnavailable == null ? undefined : date => isDateUnavailable(date), style: calendarRootStyle(metrics, style), children: _jsx(CalendarLayout, { color: color ?? "primary", size: size, metrics: metrics }) }) });
 });

package/dist/checkbox.d.ts

@@ -1,8 +1,8 @@
 import type { CheckboxFieldProps } from "react-aria-components";
-import type { ControlOverrides, ControlProps, FieldProps } from "./control.js";
-import type { MaterialOverrides } from "./material-options.js";
-import type { ShadowOverrides } from "./shadow-options.js";
-export interface CheckboxProps extends Omit<CheckboxFieldProps, ControlOverrides | "isReadOnly" | "isSelected" | "defaultSelected" | "isIndeterminate">, ControlProps, FieldProps, MaterialOverrides, ShadowOverrides {
+import { type ControlOverrides, type ControlProps, type FieldProps } from "./control/control.js";
+import type { RadiusProps } from "./foundation/radius.js";
+import type { MaterialOverrides } from "./surface/material-options.js";
+export interface CheckboxProps extends Omit<CheckboxFieldProps, ControlOverrides | "isSelected" | "defaultSelected" | "isIndeterminate">, ControlProps, FieldProps, MaterialOverrides, RadiusProps {
     readonly checked?: boolean;
     readonly defaultChecked?: boolean;
     readonly indeterminate?: boolean;

package/dist/checkbox.js

@@ -1,10 +1,20 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { CheckboxField, CheckboxButton } from "react-aria-components";
-import { FieldFeedback, fieldStyle, useControlTheme } from "./control.js";
-import { ToggleIndicator, toggleStyle } from "./toggle-indicator.js";
+import { CheckboxButton, CheckboxField } from "react-aria-components";
+import { useControlMetrics } from "./control/control.js";
+import { FieldFeedback, fieldStyle } from "./control/field.js";
+import { ToggleIndicator, toggleRowStyle } from "./control/toggle.js";
+import { dimmedClass } from "./surface/surface.js";
 /** An independent boolean field with optional mixed-state presentation. */
-export const Checkbox = forwardRef(function Checkbox({ label, description, errorMessage, disabled, required, invalid, readOnly, checked, defaultChecked, indeterminate, size, color, style, material, shadow, ...properties }, ref) {
-    const theme = useControlTheme({ size, color });
-    return _jsxs(CheckboxField, { ...properties, ref: ref, isDisabled: disabled, isRequired: required, isInvalid: invalid, isReadOnly: readOnly, isSelected: checked, defaultSelected: defaultChecked, isIndeterminate: indeterminate, style: state => fieldStyle(theme, state.isDisabled, style), children: [_jsx(CheckboxButton, { style: state => toggleStyle(theme, state.isDisabled, state.isReadOnly), children: state => _jsxs(_Fragment, { children: [_jsx(ToggleIndicator, { kind: "checkbox", material: material, shadow: shadow, theme: theme, selected: state.isSelected, indeterminate: state.isIndeterminate, focused: state.isFocusVisible, invalid: state.isInvalid, hovered: !state.isDisabled && !state.isReadOnly && state.isHovered, pressed: !state.isDisabled && !state.isReadOnly && state.isPressed }), label] }) }), _jsx(FieldFeedback, { theme: theme, description: description, errorMessage: errorMessage })] });
+export const Checkbox = forwardRef(function Checkbox({ label, description, errorMessage, disabled, required, invalid, readOnly, className, checked, defaultChecked, indeterminate, size, color = "primary", style, material, radius, ...properties }, ref) {
+    const metrics = useControlMetrics(size);
+    return _jsxs(CheckboxField, { ...properties, ref: ref, isDisabled: disabled, isRequired: required, isInvalid: invalid, isReadOnly: readOnly, isSelected: checked, defaultSelected: defaultChecked, isIndeterminate: indeterminate, className: state => dimmedClass(state.isDisabled, className ?? state.defaultClassName) ?? "", style: fieldStyle(metrics, style), children: [_jsx(CheckboxButton, { style: state => toggleRowStyle(metrics, state.isDisabled, state.isReadOnly), children: state => _jsxs(_Fragment, { children: [_jsx(ToggleIndicator, { kind: "checkbox", color: color, material: material, metrics: metrics, radius: radius, state: {
+                                selected: state.isSelected,
+                                indeterminate: state.isIndeterminate,
+                                hovered: !state.isReadOnly && state.isHovered,
+                                pressed: !state.isReadOnly && state.isPressed,
+                                focusVisible: state.isFocusVisible,
+                                invalid: state.isInvalid,
+                                disabled: state.isDisabled
+                            } }), label] }) }), _jsx(FieldFeedback, { metrics: metrics, description: description, errorMessage: errorMessage })] });
 });

package/dist/color-area.d.ts

@@ -0,0 +1,20 @@
+import type { CSSProperties } from "react";
+import type { ColorAreaProps as AriaColorAreaProps } from "react-aria-components";
+import { type RadiusProps } from "./foundation/radius.js";
+import type { ScaleLevel } from "./foundation/scale.js";
+export interface ColorAreaProps extends Omit<AriaColorAreaProps, "value" | "defaultValue" | "onChange" | "onChangeEnd" | "isDisabled" | "className" | "style" | "children">, RadiusProps {
+    readonly value?: string;
+    readonly defaultValue?: string;
+    readonly onChange?: (value: string) => void;
+    readonly onChangeEnd?: (value: string) => void;
+    readonly disabled?: boolean;
+    /** Sets the thumb and the default extent of the area. */
+    readonly size?: ScaleLevel;
+    readonly className?: string;
+    readonly style?: CSSProperties;
+}
+/**
+ * Two channels of a color, such as saturation and brightness, on a square
+ * painted with both ranges. Inside a ColorPicker it edits the picker's color.
+ */
+export declare const ColorArea: import("react").ForwardRefExoticComponent<ColorAreaProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/color-area.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { ColorArea as AriaColorArea } from "react-aria-components";
+import { colorEdge, ColorThumb } from "./control/color-thumb.js";
+import { colorValue } from "./control/color-value.js";
+import { useControlMetrics } from "./control/control.js";
+import { AriaDirectionBoundary } from "./foundation/aria-direction.js";
+import { resolveDirection, useDirection } from "./foundation/direction.js";
+import { resolveRadius } from "./foundation/radius.js";
+import { dimmedClass } from "./surface/surface.js";
+/**
+ * Two channels of a color, such as saturation and brightness, on a square
+ * painted with both ranges. Inside a ColorPicker it edits the picker's color.
+ */
+export const ColorArea = forwardRef(function ColorArea({ value, defaultValue, onChange, onChangeEnd, disabled, size, radius, className, style, ...properties }, ref) {
+    const metrics = useControlMetrics(size);
+    const direction = resolveDirection(properties.dir, useDirection());
+    return _jsx(AriaDirectionBoundary, { direction: direction, children: _jsx(AriaColorArea, { ...properties, ref: ref, dir: direction, ...(value !== undefined ? { value } : {}), ...(defaultValue !== undefined ? { defaultValue } : {}), ...(onChange !== undefined ? { onChange: (color) => onChange(colorValue(color)) } : {}), ...(onChangeEnd !== undefined ? { onChangeEnd: (color) => onChangeEnd(colorValue(color)) } : {}), isDisabled: disabled, className: dimmedClass(disabled ?? false, className), style: ({ defaultStyle }) => ({
+                ...defaultStyle,
+                position: "relative",
+                boxSizing: "border-box",
+                flexShrink: 0,
+                width: metrics.height * 6,
+                aspectRatio: "1",
+                // An area is a region, not a control: it keeps the Appearance radius.
+                borderRadius: resolveRadius(radius ?? "medium", metrics.visual.radius),
+                boxShadow: colorEdge(metrics),
+                ...style
+            }), children: _jsx(ColorThumb, { metrics: metrics }) }) });
+});

package/dist/color-field.d.ts

@@ -0,0 +1,17 @@
+import type { ColorFieldProps as AriaColorFieldProps } from "react-aria-components";
+import { type ControlOverrides, type ControlProps, type FieldProps } from "./control/control.js";
+import type { RadiusProps } from "./foundation/radius.js";
+import type { MaterialOverrides } from "./surface/material-options.js";
+export interface ColorFieldProps extends Omit<AriaColorFieldProps, ControlOverrides | "value" | "defaultValue" | "onChange" | "className" | "style">, ControlProps, FieldProps, RadiusProps, MaterialOverrides {
+    /** A hex color, or `null` while the field is empty. */
+    readonly value?: string | null;
+    readonly defaultValue?: string | null;
+    readonly onChange?: (value: string | null) => void;
+    readonly placeholder?: string;
+    readonly readOnly?: boolean;
+}
+/**
+ * A color typed as text: a hex value, or one channel when `channel` is set.
+ * Inside a ColorPicker it edits the picker's color.
+ */
+export declare const ColorField: import("react").ForwardRefExoticComponent<ColorFieldProps & import("react").RefAttributes<HTMLInputElement>>;