@phreshos/react-ui 0.1.30 → 0.1.31

package/README.md

@@ -74,14 +74,20 @@ function Example() {
 }
 ```
 
-`Button`, `Input`, `Textarea`, `Select`, `Checkbox`, `Switch`, and `Radio`
+`Button`, `Input`, `Textarea`, `Select`, `Checkbox`, `Switch`, and `RadioGroup.Item`
 use the shared Surface implementation while retaining their native behavior. Color and material
 are independent inputs. `color` accepts an Appearance color and resting level such
 as `background:base` or `primary:soft`, or a direct CSS color. Surface defaults
 to `background:base`; solid controls default to `default:base`.
-Hover and press derive shades of that fill. Surface and solid controls choose
-the higher-contrast text from Appearance's background and foreground whenever
-their fill can be evaluated; interaction shades keep that choice.
+Every independently owned base paint is exposed through its component's
+`color` prop. Hover, press, focus, selection, and inactive treatments derive
+from that base rather than introducing separate color inputs. Surface and solid controls compare
+the fill with an adaptive perceptual boundary biased toward lighter text, then
+use the Appearance candidate on the opposite side; interaction shades keep that
+choice.
+The omitted value follows the component's meaning: neutral controls use
+`default:base`, while a role with inherent visual meaning may choose another
+Appearance color. Every semantic default remains overridable through `color`.
 `size` accepts `xsmall`, `small`, `medium` (default), `large`, or `xlarge`;
 spacing and radius follow Appearance, while typography remains inherited and
 component sizes are relative to the surrounding text. `disabled` prevents activation and focus;
@@ -135,8 +141,8 @@ branch, while `false` removes the shadow. Each option accepts a scale level or
 direct number. The shadow is a neutral black
 outer shadow. Surface-based controls expose the same `shadow` prop.
 For text fields and Select, `material` targets the field or trigger; for Checkbox,
-Switch, and Radio, it targets the indicator. RadioGroup supplies material defaults
-to its options, and a Radio can override them. Shadow follows the same targets and
+Switch, and RadioGroup.Item, it targets the indicator. RadioGroup supplies material defaults
+to its options, and an Item can override them. Shadow follows the same targets and
 inheritance path.
 
 ```tsx
@@ -149,6 +155,11 @@ inheritance path.
 `Surface`. Both materials retain Surface defaults; the content inset follows
 Appearance spacing. Positioning, modality, and lifecycle belong to the caller.
 
+Component families use one public path: the family name is the root and parts
+that depend on it are properties of that family. For example, use
+`Panel.Header` and `Dialog.Title`; those parts are not separate top-level
+components. Components with independent contracts remain top-level exports.
+
 ```tsx
 import { Panel } from "@phreshos/react-ui"
 
@@ -207,6 +218,9 @@ semantic content remains explicit.
 
 `Popover` presents anchored non-modal content. `DropdownMenu` and
 `ContextMenu` open the same `Menu` contract through different interactions.
+Menu is selection-free by default. Selectable menus use string identities
+through `value`, `defaultValue`, `onChange`, and `disabledValues`, matching the
+other selectable collections; root-level command dispatch uses `onItemAction`.
 `Dialog` blocks interaction behind it and may be dismissable, while
 `AlertDialog` requires an explicit decision by default. `Tooltip` supplies a
 short description on focus or hover. Portal cleanup, focus restoration,
@@ -219,8 +233,8 @@ Every input uses Appearance colors and the same five `size` levels as Button.
 `color` selects the fill independently from material. Input, Textarea, Select,
 and Button use `default:base` when it is omitted. Invalid
 fields use danger instead. Text fields share Surface's glass edge. Interaction shades
-derive from the base color's lightness, and text or selection marks use whichever
-Appearance background or foreground has higher contrast against the base fill.
+derive from the base color's lightness, and text or selection marks use the Appearance
+background or foreground that is perceptually opposite the base fill.
 That text or mark color stays unchanged across interaction shades.
 These are component-owned derivations, not additional Appearance settings.
 Theme names never imply particular colors. No component requires a Client or
@@ -245,10 +259,19 @@ behavior are never delayed by visual animation.
 | --- | --- | --- |
 | `Input` | `value`, `defaultValue`, `onChange(string)` | Single-line text; supports text, email, password, search, URL, and telephone types |
 | `Textarea` | `value`, `defaultValue`, `onChange(string)` | Multiline text; four rows by default, vertically resizable |
+| `DateField` | `CalendarDate \| null` through `value`, `defaultValue`, and `onChange` | A locale-aware date whose year, month, and day are edited as independent segments |
+| `TimeField` | `Time \| null` through `value`, `defaultValue`, and `onChange` | A locale-aware clock time whose visible units are edited as independent segments |
+| `Calendar` | `CalendarDate \| null` selection | A keyboard-navigable month view for choosing one date |
+| `RangeCalendar` | `DateRange \| null` selection | A month view for choosing an inclusive start and end date |
+| `DatePicker` | The same `CalendarDate \| null` contract as DateField | Segmented date entry with a calendar selection popover |
+| `DateRangePicker` | The same `DateRange \| null` contract as RangeCalendar | Two segmented date fields with a shared range calendar popover |
 | `Checkbox` | `checked`, `defaultChecked`, `onChange(boolean)` | Independent selection; `indeterminate` represents a mixed state |
 | `Switch` | `checked`, `defaultChecked`, `onChange(boolean)` | An on/off setting |
-| `RadioGroup` / `Radio` | Group `value`, `defaultValue`, `onChange(string)`; Radio `value` | One exclusive choice; vertical by default, optionally horizontal |
+| `RadioGroup` / `RadioGroup.Item` | Group `value`, `defaultValue`, `onChange(string)`; Item `value` | One exclusive choice; vertical by default, optionally horizontal |
 | `Select` | `value: string \| null`, `defaultValue`, `onChange(string \| null)` | One choice from `options: { value, label, disabled? }[]` |
+| `ComboBox` | Selected `value: string \| null` and query `inputValue: string` | One searchable choice from `options: { value, label, disabled? }[]` |
+| `ListBox` | Single string or multiple string-array `value`, `defaultValue`, and `onChange` | A visible selectable collection with composable items and sections |
+| `Tree` | Optional selection plus controlled or uncontrolled string-array expansion | Nested hierarchical navigation with arbitrary branch depth |
 | `Slider` | `value`, `defaultValue`, `onChange(number)` | One numeric value; `minValue`, `maxValue`, `step`, and `onChangeEnd`; horizontal by default |
 
 Use `label` for visible labels, or `aria-label` / `aria-labelledby` for an
@@ -257,44 +280,165 @@ accessible name without visible text. `description` provides associated help.
 `name` participates in native form submission. Controlled values remain owned
 by the caller; omit them and use defaults for internal state and form reset.
 
-Text fields, Checkbox, Switch, and RadioGroup also support `readOnly`: the
+Text fields, ComboBox, Checkbox, Switch, and RadioGroup also support `readOnly`: the
 value cannot change, but the control remains focusable. These fields and
 Select support `required`, `invalid`, `errorMessage`, and React Aria's native
-or ARIA validation behavior. A Radio's selection and validation belong to its
+or ARIA validation behavior. A RadioGroup Item's selection and validation belong to its
 group. Slider represents a bounded number rather than a required text or
 choice field, and has no read-only or validation-error mode. Select has no
 read-only mode; disable it when selection must be unavailable.
 
-`Input`, `Textarea`, and `Select` accept `radius`. Other inputs retain their
-intrinsic indicator shapes. `className` and `style` address the field's root;
+`Input`, `Textarea`, `DateField`, `TimeField`, `DatePicker`, `DateRangePicker`,
+`Calendar`, `RangeCalendar`, `Select`, and `ComboBox` accept `radius`. Other inputs
+retain their intrinsic indicator shapes. `className` and `style` address the field's root;
 default visual properties remain component-owned. Input and Textarea refs
 target their native text controls; other refs target the root div. Checkbox,
-Switch, and Radio additionally accept `inputRef` for their native input.
+Switch, and RadioGroup.Item additionally accept `inputRef` for their native input.
 
 ```tsx
-import { Input, Textarea, Checkbox, Radio, RadioGroup, Switch, Select, Slider } from "@phreshos/react-ui"
+import { Input, Textarea, DateField, TimeField, Calendar, RangeCalendar, DatePicker, DateRangePicker, Checkbox, RadioGroup, Switch, Select, ComboBox, ListBox, Tree, Slider } from "@phreshos/react-ui"
+import { parseDate, parseTime } from "@internationalized/date"
 
 <Input label="Name" name="name" required />
 <Textarea label="Description" name="description" />
+<DateField label="Due date" name="dueDate" defaultValue={parseDate("2026-09-21")} />
+<TimeField label="Start time" name="startTime" defaultValue={parseTime("09:30")} />
+<DatePicker label="Appointment" name="appointment" defaultValue={parseDate("2026-09-21")} />
+<Calendar aria-label="Release date" defaultValue={parseDate("2026-09-21")} />
+<RangeCalendar aria-label="Trip dates" defaultValue={{ start: parseDate("2026-09-21"), end: parseDate("2026-09-24") }} />
+<DateRangePicker label="Trip dates" defaultValue={{ start: parseDate("2026-09-21"), end: parseDate("2026-09-24") }} />
 <Checkbox label="Remember this choice" name="remember" />
 <Switch label="Notifications" name="notifications" defaultChecked />
 <RadioGroup label="Layout" name="layout" defaultValue="grid">
-  <Radio label="Grid" value="grid" />
-  <Radio label="List" value="list" />
+  <RadioGroup.Item label="Grid" value="grid" />
+  <RadioGroup.Item label="List" value="list" />
 </RadioGroup>
 <Select label="Sort" name="sort" options={[
   { value: "name", label: "Name" },
   { value: "date", label: "Date" }
 ]} />
+<ComboBox label="Region" name="region" options={[
+  { value: "eu", label: "Europe" },
+  { value: "us", label: "United States" }
+]} />
+<ListBox aria-label="Programs" defaultValue="editor">
+  <ListBox.Section id="productivity">
+    <ListBox.Header>Productivity</ListBox.Header>
+    <ListBox.Item id="editor">Editor</ListBox.Item>
+    <ListBox.Item id="terminal">Terminal</ListBox.Item>
+  </ListBox.Section>
+</ListBox>
+<Tree aria-label="Project files" defaultExpanded={["source"]}>
+  <Tree.Item id="source" textValue="Source">
+    <Tree.Content>Source</Tree.Content>
+    <Tree.Item id="main" textValue="main.ts">
+      <Tree.Content>main.ts</Tree.Content>
+    </Tree.Item>
+  </Tree.Item>
+</Tree>
 <Slider label="Volume" name="volume" defaultValue={50} minValue={0} maxValue={100} step={1} />
 ```
 
+`ComboBox` filters option labels as the user types. Selection uses `value` and
+`onChange`; its query is independently controllable through `inputValue` and
+`onInputChange`. Use `defaultValue` and `defaultInputValue` for uncontrolled
+state.
+
+`ListBox` uses single selection by default and accepts `selectionMode="multiple"`
+for a string array or `"all"`. Its Items require stable string identities.
+Sections group options under Headers; they do not introduce expandable hierarchy.
+ListBox owns collection layout, selection, focus, keyboard behavior, and item
+presentation. An enclosing Surface or ScrollArea remains an explicit consumer
+composition.
+
+`Tree` represents hierarchy rather than grouping. Branches may contain other
+branches to any depth. Expansion uses `expanded`, `defaultExpanded`, and
+`onExpandedChange`, all expressed as string identities. Selection is disabled
+by default and uses the same explicit single- or multiple-selection contract as
+Table when enabled. `Tree.Content` supplies each row's visible content and its
+accessible disclosure control; `Tree.Collection` recursively renders
+data-backed child collections.
+
 Each control delegates focus, keyboard, form, and selection behavior to its
 accessible behavioral primitive rather than recreating those systems. Select's
-popup uses Surface defaults. Toggle indicators use Motion internally and respect
+popup and ComboBox's searchable popup use Surface defaults. Toggle indicators use Motion internally and respect
 animation preferences. The preview Program demonstrates each input's
 sizes, colors, state, and interaction without overriding its visual defaults.
 
+## Tabs
+
+`Tabs` organizes related peer views under one selected string identity. Its
+horizontal list divides the available width equally, while its active indicator
+moves continuously between selections.
+
+```tsx
+<Tabs defaultValue="overview">
+  <Tabs.List aria-label="Project views">
+    <Tabs.Tab id="overview">Overview</Tabs.Tab>
+    <Tabs.Tab id="activity">Activity</Tabs.Tab>
+  </Tabs.List>
+  <Tabs.Panel id="overview">Project overview</Tabs.Panel>
+  <Tabs.Panel id="activity">Recent activity</Tabs.Panel>
+</Tabs>
+```
+
+Each `Tabs.Tab` identity must match one `Tabs.Panel`. Use `Tabs.Panels` when
+the panels come from a dynamic collection; static panels may remain direct
+children of `Tabs`.
+
+## Table
+
+`Table` presents structured rows and columns with accessible navigation. Row
+selection uses the same string-value contract as ListBox, while sorting reports
+the requested column and direction without taking ownership of the data order.
+
+```tsx
+<Table
+  aria-label="Processes"
+  selectionMode="multiple"
+  value={selectedProcesses}
+  onChange={setSelectedProcesses}
+  sort={sort}
+  onSortChange={setSort}
+>
+  <Table.Header>
+    <Table.Column id="name" isRowHeader allowsSorting>Name</Table.Column>
+    <Table.Column id="state" allowsSorting>State</Table.Column>
+  </Table.Header>
+  <Table.Body>
+    <Table.Row id="editor">
+      <Table.Cell>Editor</Table.Cell>
+      <Table.Cell>Running</Table.Cell>
+    </Table.Row>
+  </Table.Body>
+</Table>
+```
+
+Selection is disabled by default. Set `selectionMode` to `"single"` or
+`"multiple"` to enable it. Sortable columns emit `{ column, direction }`
+through `onSortChange`; reorder the rows in application state and pass the
+descriptor back through `sort`. `Table.Body` supports static rows, dynamic
+`items`, and `renderEmptyState`.
+
+Table owns tabular behavior and row presentation without adding a material
+container or scrolling boundary. Compose Surface and ScrollArea around it when
+the surrounding interface needs either one.
+
+## ProgressBar
+
+`ProgressBar` communicates the progress of an operation without becoming an
+input. Determinate progress exposes its current value and percentage;
+indeterminate progress omits the current value and presents ongoing activity.
+
+```tsx
+<ProgressBar label="Uploading" value={64} />
+<ProgressBar aria-label="Connecting" indeterminate />
+```
+
+The default range is `0` through `100`. `formatOptions` controls the generated
+value text, while `valueLabel` supplies an explicit visible and accessible
+value. Color, size, typography, and motion follow the active React UI contracts.
+
 ## Development
 
 ```sh

package/dist/accordion.d.ts

@@ -0,0 +1,45 @@
+import type { CSSProperties, ReactElement, ReactNode } from "react";
+import type { DisclosureGroupProps as AriaDisclosureGroupProps } from "react-aria-components";
+import type { ControlColor } from "./control.js";
+import { DisclosureContent, DisclosureTrigger, type DisclosureRootProps } from "./disclosure.js";
+import { type LayoutGap } from "./layout.js";
+import type { RadiusProps } from "./radius.js";
+import type { ScaleLevel } from "./scale.js";
+type AccordionRootBaseProps = Omit<AriaDisclosureGroupProps, "allowsMultipleExpanded" | "className" | "defaultExpandedKeys" | "expandedKeys" | "isDisabled" | "onExpandedChange" | "style"> & RadiusProps & Readonly<{
+    children?: ReactNode;
+    className?: string;
+    color?: ControlColor;
+    disabled?: boolean;
+    gap?: LayoutGap;
+    size?: ScaleLevel;
+    style?: CSSProperties;
+}>;
+export type AccordionSingleExpansionProps = Readonly<{
+    multiple?: false;
+    value?: string | null;
+    defaultValue?: string | null;
+    onChange?: (value: string | null) => void;
+}>;
+export type AccordionMultipleExpansionProps = Readonly<{
+    multiple: true;
+    value?: readonly string[];
+    defaultValue?: readonly string[];
+    onChange?: (value: readonly string[]) => void;
+}>;
+export type AccordionRootProps = AccordionRootBaseProps & (AccordionSingleExpansionProps | AccordionMultipleExpansionProps);
+/** A coordinated group of identified Disclosure items. */
+export declare const AccordionRoot: import("react").ForwardRefExoticComponent<AccordionRootProps & import("react").RefAttributes<HTMLDivElement>>;
+export interface AccordionItemProps extends Omit<DisclosureRootProps, "defaultExpanded" | "expanded" | "onChange"> {
+    readonly id: string;
+}
+/** One identified Disclosure governed by its nearest Accordion. */
+export declare const AccordionItem: import("react").ForwardRefExoticComponent<AccordionItemProps & import("react").RefAttributes<HTMLDivElement>>;
+interface AccordionComponent {
+    (properties: AccordionRootProps): ReactElement | null;
+    readonly Item: typeof AccordionItem;
+    readonly Trigger: typeof DisclosureTrigger;
+    readonly Content: typeof DisclosureContent;
+}
+export declare const Accordion: AccordionComponent;
+export type AccordionProps = AccordionRootProps;
+export {};

package/dist/accordion.js

@@ -0,0 +1,62 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, forwardRef, useContext, useMemo } from "react";
+import { DisclosureGroup as AriaDisclosureGroup } from "react-aria-components";
+import { DisclosureContent, DisclosureRoot, DisclosureTrigger } from "./disclosure.js";
+import { resolveGap } from "./layout.js";
+import { stringKeys } from "./selection.js";
+import { useAppearance } from "./ui-provider.js";
+const AccordionThemeContext = createContext(null);
+/** A coordinated group of identified Disclosure items. */
+export const AccordionRoot = forwardRef(function AccordionRoot(properties, ref) {
+    const { children, className, color, defaultValue, disabled = false, gap = "xsmall", multiple = false, onChange, radius = "medium", size = "medium", style, value, ...native } = properties;
+    const appearance = useAppearance();
+    const context = useMemo(() => ({ color, radius, size }), [color, radius, size]);
+    return _jsx(AccordionThemeContext.Provider, { value: context, children: _jsx(AriaDisclosureGroup, { ...native, ...expansionProperties(properties), ref: ref, allowsMultipleExpanded: multiple, className: className, isDisabled: disabled, style: {
+                display: "grid",
+                gap: resolveGap(gap, appearance),
+                width: "100%",
+                minWidth: 0,
+                ...style
+            }, children: children }) });
+});
+function expansionProperties(properties) {
+    const expandedKeys = expansionKeys(properties.value);
+    const defaultExpandedKeys = expansionKeys(properties.defaultValue);
+    const onExpandedChange = properties.onChange == null
+        ? undefined
+        : (keys) => {
+            const values = stringKeys(keys);
+            if (properties.multiple)
+                properties.onChange?.(values);
+            else
+                properties.onChange?.(values[0] ?? null);
+        };
+    return {
+        ...(expandedKeys === undefined ? {} : { expandedKeys }),
+        ...(defaultExpandedKeys === undefined ? {} : { defaultExpandedKeys }),
+        ...(onExpandedChange === undefined ? {} : { onExpandedChange })
+    };
+}
+function expansionKeys(value) {
+    if (value === undefined)
+        return undefined;
+    if (value === null)
+        return new Set();
+    return new Set(typeof value === "string" ? [value] : value);
+}
+/** One identified Disclosure governed by its nearest Accordion. */
+export const AccordionItem = forwardRef(function AccordionItem({ color, radius, size, ...properties }, ref) {
+    const inherited = useAccordionTheme();
+    return _jsx(DisclosureRoot, { ...properties, ref: ref, color: color ?? inherited.color, radius: radius ?? inherited.radius, size: size ?? inherited.size });
+});
+function useAccordionTheme() {
+    const context = useContext(AccordionThemeContext);
+    if (context == null)
+        throw new Error("Accordion.Item must be used inside Accordion");
+    return context;
+}
+export const Accordion = Object.assign(AccordionRoot, {
+    Item: AccordionItem,
+    Trigger: DisclosureTrigger,
+    Content: DisclosureContent
+});

package/dist/alert-dialog.d.ts

@@ -9,7 +9,6 @@ export type AlertDialogContentProps = Omit<DialogContentProps, "role">;
 export declare const AlertDialogContent: import("react").ForwardRefExoticComponent<AlertDialogContentProps & import("react").RefAttributes<HTMLElement>>;
 /** A dialog requiring an explicit decision rather than ambient dismissal. */
 export declare const AlertDialog: typeof AlertDialogRoot & {
-    Root: typeof AlertDialogRoot;
     Trigger: import("react").ForwardRefExoticComponent<import("./button.js").ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
     Backdrop: import("react").ForwardRefExoticComponent<DialogBackdropProps & import("react").RefAttributes<HTMLDivElement>>;
     Content: import("react").ForwardRefExoticComponent<AlertDialogContentProps & import("react").RefAttributes<HTMLElement>>;

package/dist/alert-dialog.js

@@ -12,7 +12,6 @@ export const AlertDialogContent = forwardRef(function AlertDialogContent(propert
 });
 /** A dialog requiring an explicit decision rather than ambient dismissal. */
 export const AlertDialog = Object.assign(AlertDialogRoot, {
-    Root: AlertDialogRoot,
     Trigger: DialogTrigger,
     Backdrop: AlertDialogBackdrop,
     Content: AlertDialogContent,

package/dist/aria-direction.d.ts

@@ -0,0 +1,9 @@
+import type { KeyboardEventHandler, ReactNode } from "react";
+import type { Direction } from "./direction.js";
+/** Aligns React Aria's directional keyboard behavior with the React UI direction contract. */
+export declare function useAriaDirectionBridge(direction: Direction): KeyboardEventHandler<HTMLElement> | undefined;
+/** Owns the non-layout DOM boundary needed to intercept React Aria keyboard behavior. */
+export declare function AriaDirectionBoundary({ children, direction }: Readonly<{
+    children: ReactNode;
+    direction: Direction;
+}>): import("react").JSX.Element;

package/dist/aria-direction.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { useLocale } from "react-aria/I18nProvider";
+const ariaDirectionBoundary = "data-phreshos-ui-aria-direction";
+const redirectedEvents = new WeakSet();
+/** Aligns React Aria's directional keyboard behavior with the React UI direction contract. */
+export function useAriaDirectionBridge(direction) {
+    const { direction: ariaDirection } = useLocale();
+    return useMemo(() => {
+        if (direction === ariaDirection)
+            return undefined;
+        return event => {
+            if (redirectedEvents.has(event.nativeEvent))
+                return;
+            if (event.defaultPrevented || (event.key !== "ArrowLeft" && event.key !== "ArrowRight"))
+                return;
+            const target = event.target;
+            if (!(target instanceof Element) || target.closest(`[${ariaDirectionBoundary}]`) !== event.currentTarget)
+                return;
+            const editable = target.closest("[contenteditable=true]");
+            if (target instanceof HTMLInputElement || target instanceof HTMLTextAreaElement || target instanceof HTMLSelectElement || (editable && editable.getAttribute("role") !== "spinbutton"))
+                return;
+            event.preventDefault();
+            event.stopPropagation();
+            // React Aria currently derives keyboard direction from locale. Redirect only
+            // the directional key so language and every other locale behavior stay intact.
+            const redirected = new KeyboardEvent(event.nativeEvent.type, {
+                key: event.key === "ArrowLeft" ? "ArrowRight" : "ArrowLeft",
+                code: event.code,
+                location: event.location,
+                ctrlKey: event.ctrlKey,
+                shiftKey: event.shiftKey,
+                altKey: event.altKey,
+                metaKey: event.metaKey,
+                repeat: event.repeat,
+                bubbles: true,
+                cancelable: true,
+                composed: true
+            });
+            redirectedEvents.add(redirected);
+            target.dispatchEvent(redirected);
+        };
+    }, [ariaDirection, direction]);
+}
+/** Owns the non-layout DOM boundary needed to intercept React Aria keyboard behavior. */
+export function AriaDirectionBoundary({ children, direction }) {
+    const onKeyDownCapture = useAriaDirectionBridge(direction);
+    return _jsx("div", { dir: direction, "data-phreshos-ui-aria-direction": "", onKeyDownCapture: onKeyDownCapture, style: { display: "contents" }, children: children });
+}

package/dist/calendar-layout.d.ts

@@ -0,0 +1,8 @@
+import type { CSSProperties } from "react";
+import { type ControlProps, type ControlTheme } from "./control.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<{
+    range?: boolean;
+    theme: ControlTheme;
+}>): import("react").JSX.Element;
+export declare function calendarRootStyle(theme: ControlTheme, disabled?: boolean, style?: CSSProperties): CSSProperties;

package/dist/calendar-layout.js

@@ -0,0 +1,103 @@
+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 { Button } from "./button.js";
+import { resolveColorLevel, solidColors } from "./color.js";
+import { controlFontWeight, controlOpacity } from "./control.js";
+import { useDirection } from "./direction.js";
+/** Shared month layout used by both single-date and range calendar roots. */
+export function CalendarLayout({ color, range = false, size, theme }) {
+    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) }) })] })] });
+}
+export function calendarRootStyle(theme, disabled = false, style) {
+    return {
+        ...style,
+        display: "grid",
+        width: "max-content",
+        maxWidth: "100%",
+        gap: theme.gap,
+        padding: theme.spacing,
+        fontFamily: "inherit",
+        fontSize: theme.fontSize,
+        lineHeight: 1.5,
+        opacity: disabled ? controlOpacity.disabled : 1
+    };
+}
+function navigationStyle(theme) {
+    return {
+        width: theme.height,
+        paddingInline: 0
+    };
+}
+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;
+    return {
+        ...theme.transition,
+        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,
+        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" }) });
+}

package/dist/calendar-trigger.d.ts

@@ -0,0 +1,5 @@
+import type { ControlTheme } from "./control.js";
+/** Calendar trigger shared by date picker fields. */
+export declare function CalendarTrigger({ theme }: Readonly<{
+    theme: ControlTheme;
+}>): import("react").JSX.Element;

package/dist/calendar-trigger.js

@@ -0,0 +1,30 @@
+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" })] });
+}

package/dist/calendar.d.ts

@@ -0,0 +1,18 @@
+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";
+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;
+    readonly defaultValue?: CalendarDate | null;
+    readonly onChange?: (value: CalendarDate) => void;
+    readonly minValue?: CalendarDate | null;
+    readonly maxValue?: CalendarDate | null;
+    readonly isDateUnavailable?: (date: CalendarDate) => boolean;
+    readonly readOnly?: boolean;
+    readonly invalid?: boolean;
+}
+/** A locale-aware, keyboard-navigable month view for selecting one date. */
+export declare const Calendar: import("react").ForwardRefExoticComponent<CalendarProps & import("react").RefAttributes<HTMLDivElement>>;
+export {};

package/dist/calendar.js

@@ -0,0 +1,13 @@
+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 { CalendarLayout, calendarRootStyle } from "./calendar-layout.js";
+import { useControlTheme } from "./control.js";
+import { resolveDirection, useDirection } from "./direction.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 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 }) }) });
+});