@maanlamp/react-web-ui 0.0.0-stage → 0.1.0

package/dist/lib/calendar/temporal.css

@@ -0,0 +1,583 @@
+@layer kit.reset, kit.base, kit.components;
+@layer kit.components {
+  ._group_1ultb_3 {
+    --field-fg: var(--sys-color-text);
+    --field-muted-fg: var(--sys-color-text-muted);
+    align-items: center;
+    box-sizing: border-box;
+    min-block-size: calc(1lh + 2 * var(--sys-unit-6) + 2 * 1px);
+    border: 1px solid var(--sys-color-border);
+    border-radius: var(--sys-radius-sm);
+    background: var(--sys-color-surface);
+    padding: var(--sys-unit-6);
+    color: var(--field-fg);
+    font: var(--sys-font-body-medium);
+  }
+  ._group_1ultb_3 {
+    outline: 0 solid var(--sys-color-focus-ring);
+    outline-offset: var(--sys-focus-ring-offset);
+  }
+  ._group_1ultb_3[data-focus-visible] {
+    outline-width: var(--sys-focus-ring-width);
+  }
+  @media not (prefers-reduced-motion) {
+    ._group_1ultb_3 {
+      transition: border-color var(--sys-motion-instant) var(--sys-motion-standard), background var(--sys-motion-instant) var(--sys-motion-standard);
+    }
+  }
+  ._group_1ultb_3:hover:not([data-disabled], [data-readonly]), ._group_1ultb_3[data-focused], ._group_1ultb_3[data-popup-open] {
+    border-color: var(--sys-color-primary);
+  }
+  ._group_1ultb_3[data-readonly] {
+    --field-fg: var(--sys-color-text);
+    border-style: dashed;
+    border-color: var(--sys-color-outline);
+    background: var(--sys-color-surface-high);
+    color: var(--field-fg);
+  }
+  ._group_1ultb_3[data-pending] {
+    cursor: progress;
+    caret-color: var(--sys-color-text-muted);
+  }
+  ._group_1ultb_3[data-invalid] {
+    --field-fg: var(--sys-color-error-fg);
+    --field-muted-fg: var(--sys-color-error-fg);
+    border-color: var(--sys-color-error-fg);
+    background-color: var(--sys-color-error-bg);
+    color: var(--field-fg);
+  }
+  ._group_1ultb_3[data-disabled] {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+  ._group_1ultb_3 {
+    position: relative;
+    display: flex;
+    gap: var(--sys-unit-4);
+  }
+  ._group_1ultb_3 {
+    inline-size: 100%;
+    min-inline-size: 0;
+  }
+  ._input_1ultb_62 {
+    display: flex;
+    flex: 1;
+    align-items: center;
+    min-inline-size: 0;
+    border: none;
+    background: transparent;
+    padding: 0;
+    color: inherit;
+    font: inherit;
+    white-space: nowrap;
+    line-height: normal;
+  }
+  ._rangeInput_1ultb_75 {
+    display: flex;
+    flex: none;
+    align-items: center;
+    border: none;
+    background: transparent;
+    padding: 0;
+    color: inherit;
+    font: inherit;
+    white-space: nowrap;
+    line-height: normal;
+  }
+  ._rangeSeparator_1ultb_87 {
+    flex: none;
+    color: var(--field-muted-fg);
+  }
+  ._rangeSpacer_1ultb_91 {
+    flex: 1;
+    min-inline-size: 0;
+  }
+  ._segment_1ultb_95 {
+    border-radius: var(--temporal-segment-radius, var(--sys-radius-xs));
+    padding-inline: 1px;
+    font-variant-numeric: tabular-nums;
+  }
+  ._segment_1ultb_95[data-placeholder] {
+    color: var(--field-muted-fg);
+  }
+  ._segment_1ultb_95[data-type=literal] {
+    padding-inline: 0;
+    color: var(--field-muted-fg);
+  }
+  ._segment_1ultb_95[data-focused] {
+    background: var(--temporal-segment-focused-bg, var(--sys-color-primary-container));
+    color: var(--temporal-segment-focused-fg, var(--sys-color-on-primary-container));
+  }
+  ._trigger_1ultb_111 {
+    position: relative;
+    flex: none;
+    margin-block: calc(-1 * var(--sys-unit-6));
+    cursor: pointer;
+  }
+  @media (any-pointer: coarse) {
+    ._trigger_1ultb_111::before {
+      content: "";
+      position: absolute;
+      inset: 50%;
+      translate: -50% -50%;
+      inline-size: max(100%, var(--sys-unit-22));
+      block-size: var(--sys-unit-22);
+    }
+  }
+  ._popover_1ultb_127 {
+    box-sizing: border-box;
+    border: none;
+    border-radius: var(--sys-radius-md);
+    background: var(--sys-color-surface-overlay);
+    padding: var(--sys-unit-4);
+    color: var(--sys-color-text);
+    transform-origin: var(--transform-origin);
+    scrollbar-width: thin;
+    scrollbar-color: var(--sys-color-outline) transparent;
+    box-shadow: var(--sys-elevation-1);
+  }
+  @media not (prefers-reduced-motion) {
+    ._popover_1ultb_127 {
+      transition: opacity var(--sys-motion-instant) var(--sys-motion-standard), transform var(--sys-motion-instant) var(--sys-motion-standard);
+    }
+  }
+  ._popover_1ultb_127[data-starting-style], ._popover_1ultb_127[data-ending-style] {
+    opacity: 0;
+    transform: scale(0.96);
+  }
+  ._popover_1ultb_127 {
+    inline-size: max-content;
+  }
+  @media not (prefers-reduced-motion) {
+    ._popover_1ultb_127[data-entering], ._popover_1ultb_127[data-exiting] {
+      opacity: 0;
+      transform: scale(0.96);
+    }
+  }
+  ._dialog_1ultb_157 {
+    outline: none;
+  }
+  ._calendar_1ultb_160 {
+    display: flex;
+    flex-direction: column;
+    gap: var(--calendar-gap, var(--sys-unit-4));
+  }
+  ._header_1ultb_165 {
+    display: flex;
+    align-items: center;
+    gap: var(--sys-unit-2);
+  }
+  ._navigation_1ultb_170 {
+    position: relative;
+    z-index: 1;
+    display: flex;
+    flex: 1;
+    align-items: center;
+    justify-content: center;
+    gap: var(--sys-unit-2);
+    min-inline-size: 0;
+  }
+  ._navField_1ultb_180 {
+    display: contents;
+  }
+  ._navPortal_1ultb_183 {
+    position: absolute;
+    inset-block-start: 0;
+    inset-inline-start: 0;
+  }
+  ._navTrigger_1ultb_188,
+  ._navControl_1ultb_189 {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--sys-unit-2);
+    box-sizing: border-box;
+    min-block-size: var(--sys-unit-22);
+    border: none;
+    border-radius: var(--sys-radius-sm);
+    background: none;
+    padding-inline: var(--sys-unit-4);
+    color: var(--sys-color-text);
+    font: var(--sys-font-label-large);
+    cursor: pointer;
+  }
+  ._navTrigger_1ultb_188,
+  ._navControl_1ultb_189 {
+    position: relative;
+    isolation: isolate;
+  }
+  ._navTrigger_1ultb_188::after,
+  ._navControl_1ultb_189::after {
+    content: "";
+    position: absolute;
+    z-index: -1;
+    inset: 0;
+    border-radius: inherit;
+    background: currentcolor;
+    opacity: 0;
+    pointer-events: none;
+  }
+  @media not (prefers-reduced-motion) {
+    ._navTrigger_1ultb_188::after,
+    ._navControl_1ultb_189::after {
+      transition: opacity var(--sys-motion-instant) var(--sys-motion-standard);
+    }
+  }
+  ._navTrigger_1ultb_188:hover:not(:disabled, [data-disabled])::after,
+  ._navControl_1ultb_189:hover:not(:disabled, [data-disabled])::after {
+    opacity: var(--sys-state-hover);
+  }
+  ._navTrigger_1ultb_188:active:not(:disabled, [data-disabled])::after,
+  ._navControl_1ultb_189:active:not(:disabled, [data-disabled])::after {
+    opacity: var(--sys-state-pressed);
+  }
+  ._navTrigger_1ultb_188,
+  ._navControl_1ultb_189 {
+    outline: 0 solid var(--sys-color-focus-ring);
+    outline-offset: var(--sys-focus-ring-offset);
+  }
+  ._navTrigger_1ultb_188,
+  ._navControl_1ultb_189 {
+    line-height: normal;
+  }
+  ._navTrigger_1ultb_188:focus-visible {
+    outline-width: var(--sys-focus-ring-width);
+  }
+  ._navControl_1ultb_189:has(._navInput_1ultb_245:focus-visible) {
+    outline-width: var(--sys-focus-ring-width);
+  }
+  ._navLabel_1ultb_248 {
+    display: grid;
+    min-inline-size: 0;
+  }
+  ._navSizer_1ultb_252 {
+    display: grid;
+    visibility: hidden;
+    pointer-events: none;
+  }
+  ._navLabel_1ultb_248 > *,
+  ._navSizer_1ultb_252 > * {
+    grid-area: 1/1;
+    white-space: nowrap;
+  }
+  ._navValue_1ultb_262 {
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  ._navInput_1ultb_245 {
+    align-self: stretch;
+    inline-size: 5ch;
+    border: none;
+    background: none;
+    padding: 0;
+    color: inherit;
+    font: inherit;
+    text-align: end;
+    cursor: text;
+    outline: none;
+    line-height: normal;
+  }
+  ._navChevron_1ultb_279 {
+    display: inline-flex;
+    flex-shrink: 0;
+    align-items: center;
+    align-self: stretch;
+    color: var(--sys-color-text-muted);
+    cursor: pointer;
+  }
+  ._navIcon_1ultb_287 {
+    display: inline-flex;
+    flex-shrink: 0;
+    color: var(--sys-color-text-muted);
+  }
+  ._navPositioner_1ultb_292 {
+    --_popup-edge-padding: var(
+    	--popup-edge-padding,
+    	var(--sys-unit-16)
+    );
+  }
+  @property --_popup-edge-padding {
+    syntax: "<length>";
+    inherits: false;
+    initial-value: 0px;
+  }
+  ._navPositioner_1ultb_292 {
+    outline: none;
+  }
+  ._navPopup_1ultb_306 {
+    box-sizing: border-box;
+    border: none;
+    border-radius: var(--sys-radius-md);
+    background: var(--sys-color-surface-overlay);
+    padding: var(--sys-unit-4);
+    color: var(--sys-color-text);
+    transform-origin: var(--transform-origin);
+    scrollbar-width: thin;
+    scrollbar-color: var(--sys-color-outline) transparent;
+    box-shadow: var(--sys-elevation-1);
+  }
+  @media not (prefers-reduced-motion) {
+    ._navPopup_1ultb_306 {
+      transition: opacity var(--sys-motion-instant) var(--sys-motion-standard), transform var(--sys-motion-instant) var(--sys-motion-standard);
+    }
+  }
+  ._navPopup_1ultb_306[data-starting-style], ._navPopup_1ultb_306[data-ending-style] {
+    opacity: 0;
+    transform: scale(0.96);
+  }
+  ._navPopup_1ultb_306 {
+    max-block-size: var(--available-height);
+    overflow-y: auto;
+  }
+  ._yearPopup_1ultb_331 {
+    box-sizing: border-box;
+    border: none;
+    border-radius: var(--sys-radius-md);
+    background: var(--sys-color-surface-overlay);
+    padding: var(--sys-unit-4);
+    color: var(--sys-color-text);
+    transform-origin: var(--transform-origin);
+    scrollbar-width: thin;
+    scrollbar-color: var(--sys-color-outline) transparent;
+    box-shadow: var(--sys-elevation-1);
+  }
+  @media not (prefers-reduced-motion) {
+    ._yearPopup_1ultb_331 {
+      transition: opacity var(--sys-motion-instant) var(--sys-motion-standard), transform var(--sys-motion-instant) var(--sys-motion-standard);
+    }
+  }
+  ._yearPopup_1ultb_331[data-starting-style], ._yearPopup_1ultb_331[data-ending-style] {
+    opacity: 0;
+    transform: scale(0.96);
+  }
+  ._yearPopup_1ultb_331 {
+    display: flex;
+    flex-direction: column;
+    min-inline-size: var(--anchor-width);
+    max-inline-size: var(--available-width);
+    max-block-size: min(var(--available-height, 22rem), 22rem);
+  }
+  ._yearEmpty_1ultb_359 {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    gap: var(--sys-unit-4);
+    contain: inline-size;
+    min-block-size: 1lh;
+    padding: var(--sys-unit-4) var(--sys-unit-6);
+    color: var(--sys-color-text-muted);
+    font: var(--sys-font-body-medium);
+  }
+  ._yearEmpty_1ultb_359:empty {
+    min-block-size: 0;
+    padding: 0;
+  }
+  ._yearList_1ultb_374 {
+    min-block-size: 0;
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    scroll-padding-block: var(--sys-unit-4);
+    scrollbar-width: thin;
+    scrollbar-color: var(--sys-color-outline) transparent;
+  }
+  ._navItem_1ultb_382,
+  ._yearOption_1ultb_383 {
+    display: flex;
+    align-items: center;
+    gap: var(--sys-unit-6);
+    box-sizing: border-box;
+    min-block-size: var(--sys-unit-20);
+    border-radius: var(--sys-radius-sm);
+    padding: var(--sys-unit-4) var(--sys-unit-6);
+    color: var(--sys-color-text);
+    font: var(--sys-font-body-medium);
+    user-select: none;
+  }
+  ._navItem_1ultb_382,
+  ._yearOption_1ultb_383 {
+    position: relative;
+    isolation: isolate;
+  }
+  ._navItem_1ultb_382::after,
+  ._yearOption_1ultb_383::after {
+    content: "";
+    position: absolute;
+    z-index: -1;
+    inset: 0;
+    border-radius: inherit;
+    background: currentcolor;
+    opacity: 0;
+    pointer-events: none;
+  }
+  @media not (prefers-reduced-motion) {
+    ._navItem_1ultb_382::after,
+    ._yearOption_1ultb_383::after {
+      transition: opacity var(--sys-motion-instant) var(--sys-motion-standard);
+    }
+  }
+  ._navItem_1ultb_382:hover:not(:disabled, [data-disabled])::after,
+  ._yearOption_1ultb_383:hover:not(:disabled, [data-disabled])::after {
+    opacity: var(--sys-state-hover);
+  }
+  ._navItem_1ultb_382:active:not(:disabled, [data-disabled])::after,
+  ._yearOption_1ultb_383:active:not(:disabled, [data-disabled])::after {
+    opacity: var(--sys-state-pressed);
+  }
+  ._navItem_1ultb_382,
+  ._yearOption_1ultb_383 {
+    outline: none;
+  }
+  ._navItem_1ultb_382[data-highlighted],
+  ._yearOption_1ultb_383[data-highlighted] {
+    background: var(--sys-color-primary-container);
+    color: var(--sys-color-on-primary-container);
+  }
+  ._navItem_1ultb_382[data-disabled],
+  ._yearOption_1ultb_383[data-disabled] {
+    opacity: 0.38;
+    color: var(--sys-color-text-muted);
+  }
+  ._navItemIndicator_1ultb_439,
+  ._yearIndicator_1ultb_440 {
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+    inline-size: 1lh;
+    color: var(--sys-color-primary);
+  }
+  ._yearValue_1ultb_448 {
+    min-inline-size: 4ch;
+    font-variant-numeric: tabular-nums;
+  }
+  ._months_1ultb_452 {
+    display: grid;
+    grid-auto-flow: column;
+    grid-auto-columns: 1fr;
+    gap: var(--calendar-months-gap, var(--sys-unit-8));
+    align-items: start;
+  }
+  ._grid_1ultb_459 {
+    --_calendar-cell-size: var(
+    	--calendar-cell-size,
+    	var(--sys-unit-20)
+    );
+    border-collapse: collapse;
+    table-layout: fixed;
+    min-inline-size: calc(7 * var(--_calendar-cell-size));
+  }
+  ._grid_1ultb_459 td,
+  ._grid_1ultb_459 th {
+    padding: 0;
+  }
+  ._weekday_1ultb_472 {
+    padding-block: var(--sys-unit-2);
+    color: var(--sys-color-text-muted);
+    font: var(--sys-font-label-small);
+    font-weight: normal;
+    text-align: center;
+  }
+  ._day_1ultb_479 {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    margin-inline: auto;
+    inline-size: var(--_calendar-cell-size);
+    block-size: var(--_calendar-cell-size);
+    border-radius: var(--calendar-day-radius, var(--sys-radius-circle));
+    color: var(--sys-color-text);
+    font: var(--sys-font-body-medium);
+    font-variant-numeric: tabular-nums;
+    user-select: none;
+  }
+  ._day_1ultb_479 {
+    position: relative;
+    isolation: isolate;
+  }
+  ._day_1ultb_479::after {
+    content: "";
+    position: absolute;
+    z-index: -1;
+    inset: 0;
+    border-radius: inherit;
+    background: currentcolor;
+    opacity: 0;
+    pointer-events: none;
+  }
+  @media not (prefers-reduced-motion) {
+    ._day_1ultb_479::after {
+      transition: opacity var(--sys-motion-instant) var(--sys-motion-standard);
+    }
+  }
+  ._day_1ultb_479:hover:not(:disabled, [data-disabled])::after {
+    opacity: var(--sys-state-hover);
+  }
+  ._day_1ultb_479:active:not(:disabled, [data-disabled])::after {
+    opacity: var(--sys-state-pressed);
+  }
+  ._day_1ultb_479 {
+    outline: 0 solid var(--sys-color-focus-ring);
+    outline-offset: var(--sys-focus-ring-offset);
+  }
+  ._day_1ultb_479[data-focus-visible] {
+    outline-width: var(--sys-focus-ring-width);
+  }
+  ._day_1ultb_479[data-outside-month] {
+    color: var(--sys-color-text-muted);
+  }
+  ._day_1ultb_479._today_1ultb_528::before {
+    content: "";
+    position: absolute;
+    inset-block-end: var(--sys-unit-1);
+    inline-size: var(--sys-unit-3);
+    block-size: var(--sys-unit-3);
+    border-radius: var(--sys-radius-circle);
+    background: currentcolor;
+  }
+  ._day_1ultb_479[data-selected] {
+    background: var(--calendar-selected-bg, var(--sys-color-primary));
+    color: var(--calendar-selected-fg, var(--sys-color-on-primary));
+    font-weight: 700;
+  }
+  ._rangeCalendar_1ultb_542 ._day_1ultb_479[data-selected]:not([data-selection-start],
+  [data-selection-end]) {
+    border-radius: var(--sys-radius-none);
+    background: none;
+    color: var(--calendar-range-fg, var(--sys-color-on-primary-container));
+    font-weight: 600;
+  }
+  ._day_1ultb_479[data-unavailable] {
+    color: var(--sys-color-text-muted);
+    text-decoration: line-through;
+  }
+  ._day_1ultb_479[data-disabled] {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+  ._day_1ultb_479[data-invalid] {
+    --field-fg: var(--sys-color-error-fg);
+    --field-muted-fg: var(--sys-color-error-fg);
+    border-color: var(--sys-color-error-fg);
+    background-color: var(--sys-color-error-bg);
+    color: var(--field-fg);
+  }
+  ._rangeCalendar_1ultb_542 ._grid_1ultb_459 td {
+    background-image: linear-gradient(var(--calendar-range-bg, var(--sys-color-primary-container)), var(--calendar-range-bg, var(--sys-color-primary-container)));
+    background-repeat: no-repeat;
+    background-size: 0 100%;
+  }
+  ._rangeCalendar_1ultb_542 ._grid_1ultb_459 td:has(> ._day_1ultb_479[data-selected]) {
+    background-size: 100% 100%;
+  }
+  ._rangeCalendar_1ultb_542 ._grid_1ultb_459 td:has(> ._day_1ultb_479[data-selection-start]) {
+    background-position-x: right;
+    background-size: 50% 100%;
+  }
+  ._rangeCalendar_1ultb_542 ._grid_1ultb_459 td:has(> ._day_1ultb_479[data-selection-end]) {
+    background-position-x: left;
+    background-size: 50% 100%;
+  }
+  ._rangeCalendar_1ultb_542 ._grid_1ultb_459 td:has(> ._day_1ultb_479[data-selection-start][data-selection-end]) {
+    background-size: 0 100%;
+  }
+}

package/dist/lib/calendar/temporal.d.ts

@@ -0,0 +1,135 @@
+import type { CalendarDate } from "@internationalized/date";
+import { type ReactNode, type Ref } from "react";
+import { type DateInputProps as AriaDateInputProps, type CalendarProps as AriaCalendarProps, type DateSegmentProps as AriaDateSegmentProps, type DialogProps as AriaDialogProps, type GroupProps as AriaGroupProps, type PopoverProps as AriaPopoverProps, type RangeCalendarProps as AriaRangeCalendarProps } from "react-aria-components";
+import { type FieldProps, type FieldState } from "../../components/field/index.ts";
+import type { SvgComponent } from "../../components/icon/index.ts";
+import { type CalendarNavigationLabels } from "./calendar-navigation.tsx";
+/** The copy a calendar popup announces: its month steppers and its month and year lists. */
+export type CalendarLabels = CalendarNavigationLabels & Readonly<{
+    /** Accessible name of the button that shows the previous month. */
+    previousMonthLabel: string;
+    /** Accessible name of the button that shows the next month. */
+    nextMonthLabel: string;
+}>;
+export type TemporalStateProps = Readonly<{
+    /** Projected onto the element as presence-style `data-*` attributes. */
+    state?: FieldState;
+}>;
+export type TemporalGroupProps = Omit<AriaGroupProps, "children"> & TemporalStateProps & Readonly<{
+    children?: ReactNode;
+}>;
+/**
+ * The shell carrying the border, the ring and the inlay row.
+ *
+ * @example
+ * <TemporalGroup state={state}><TemporalInput /></TemporalGroup>
+ */
+export declare const TemporalGroup: ({ state, className, children, ...props }: TemporalGroupProps) => ReactNode;
+/**
+ * One editable unit of a date or time.
+ *
+ * @example
+ * {segment => <TemporalSegment segment={segment} />}
+ */
+export declare const TemporalSegment: ({ className, ...props }: AriaDateSegmentProps) => ReactNode;
+export type TemporalInputProps = Omit<AriaDateInputProps, "children">;
+/**
+ * The segments of one date or time, bare inside a `TemporalGroup`.
+ *
+ * @example
+ * <TemporalInput />
+ */
+export declare const TemporalInput: ({ className, ...props }: TemporalInputProps) => ReactNode;
+/**
+ * The segments of one end of a date range, sized to its content.
+ *
+ * @example
+ * <TemporalRangeInput slot="start" />
+ */
+export declare const TemporalRangeInput: ({ className, ...props }: Omit<AriaDateInputProps, "children" | "slot"> & Readonly<{
+    slot: "start" | "end";
+}>) => ReactNode;
+/**
+ * The dash between a range's start and end.
+ *
+ * @example
+ * <TemporalRangeSeparator />
+ */
+export declare const TemporalRangeSeparator: () => ReactNode;
+/**
+ * The space that pushes a range's inlays to the end of its group.
+ *
+ * @example
+ * <TemporalRangeSpacer />
+ */
+export declare const TemporalRangeSpacer: () => ReactNode;
+export type TemporalTriggerProps = Readonly<{
+    /** Accessible name, surfaced as the tooltip hint and the `aria-label`. */
+    label: string;
+    /** Glyph for the trigger. */
+    icon: SvgComponent;
+    /** The button itself, for the popup to align to. */
+    ref?: Ref<HTMLButtonElement>;
+}>;
+/**
+ * The icon-only button that opens the calendar.
+ *
+ * @example
+ * <TemporalTrigger label="Open calendar" icon={CalendarIcon} ref={triggerRef} />
+ */
+export declare const TemporalTrigger: ({ label, icon, ref, }: TemporalTriggerProps) => ReactNode;
+export type TemporalPopupProps = Omit<AriaPopoverProps, "children"> & Readonly<{
+    children: AriaDialogProps["children"];
+}>;
+/**
+ * The floating surface the calendar lands on, aligned to whatever `triggerRef`
+ * names: the calendar button, rather than the whole field.
+ *
+ * @example
+ * <TemporalPopup triggerRef={triggerRef}><TemporalCalendar {...labels} /></TemporalPopup>
+ */
+export declare const TemporalPopup: ({ children, placement, ...props }: TemporalPopupProps) => ReactNode;
+export type TemporalCalendarProps = Omit<AriaCalendarProps<CalendarDate>, "children"> & CalendarLabels;
+/**
+ * A month of days, selecting one. Today, and the month it opens on without a
+ * value, are read in the `TimeZoneProvider`'s zone.
+ *
+ * @example
+ * <TemporalCalendar {...calendarLabels} />
+ */
+export declare const TemporalCalendar: ({ className, previousMonthLabel, nextMonthLabel, monthLabel, yearLabel, noMatchingYearLabel, ...props }: TemporalCalendarProps) => ReactNode;
+export type TemporalRangeCalendarProps = Omit<AriaRangeCalendarProps<CalendarDate>, "children" | "visibleDuration"> & CalendarLabels & Readonly<{
+    /** Months shown side by side. @default 1 */
+    visibleMonths?: number;
+}>;
+/**
+ * Days of one or more adjacent months, selecting a continuous range. Today,
+ * and the month it opens on without a value, are read in the
+ * `TimeZoneProvider`'s zone.
+ *
+ * @example
+ * <TemporalRangeCalendar visibleMonths={2} {...calendarLabels} />
+ */
+export declare const TemporalRangeCalendar: ({ visibleMonths, className, previousMonthLabel, nextMonthLabel, monthLabel, yearLabel, noMatchingYearLabel, ...props }: TemporalRangeCalendarProps) => ReactNode;
+export type TemporalFrameIds = Readonly<{
+    labelId: string;
+    describedBy?: string;
+    /** A stable id and name for the control. */
+    controlId: string;
+}>;
+export type TemporalFrameProps = Omit<FieldProps, "pending"> & Readonly<{
+    className?: string;
+    children: (ids: TemporalFrameIds) => ReactNode;
+}>;
+/**
+ * The label, description and error frame every temporal control shares,
+ * handing the control the ids it wires `aria-labelledby` and
+ * `aria-describedby` to.
+ *
+ * @example
+ * <TemporalFrame label="Period" optionalLabel="optional">
+ * 	{({ labelId }) => <DateInput.Root aria-labelledby={labelId} />}
+ * </TemporalFrame>
+ */
+export declare const TemporalFrame: ({ label, description, errors, requiredness, optionalLabel, dirty, touched, className, children, }: TemporalFrameProps) => ReactNode;
+//# sourceMappingURL=temporal.d.ts.map