@igne-agency/react-web-ui 0.5.0 → 0.6.0

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

@@ -1,26 +1,20 @@
-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 CalendarNavigationIcons, 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;
-}>;
-/** The icons a calendar popup shows: its month steppers and its month and year lists. */
-export type CalendarIcons = CalendarNavigationIcons & Readonly<{
-    /** The icon of the button that shows the previous month. */
-    previousIcon: ReactNode;
-    /** The icon of the button that shows the next month. */
-    nextIcon: ReactNode;
-}>;
+import { useRender } from "@base-ui/react/use-render";
+import type { ComponentProps, ComponentPropsWithRef, ReactNode } from "react";
+import { DateInput as AriaDateInput, DateSegment as AriaDateSegment, Dialog as AriaDialog, type GroupProps as AriaGroupProps, Popover as AriaPopover } from "react-aria-components";
+import { type FieldLabelProps, type FieldState } from "../../components/field/index.ts";
 export type TemporalStateProps = Readonly<{
     /** Projected onto the element as presence-style `data-*` attributes. */
     state?: FieldState;
 }>;
+export type TemporalLabelProps = FieldLabelProps;
+/**
+ * The visible label of a date or time control: a `span` its `Root` names
+ * itself by through `aria-labelledby`. Renders nothing without children.
+ *
+ * @example
+ * <DateInput.Label id={labelId}>Service date <Field.Requiredness optionalLabel="optional" /></DateInput.Label>
+ */
+export declare const TemporalLabel: (props: TemporalLabelProps) => ReactNode;
 export type TemporalGroupProps = Omit<AriaGroupProps, "children"> & TemporalStateProps & Readonly<{
     children?: ReactNode;
 }>;
@@ -28,113 +22,104 @@ export type TemporalGroupProps = Omit<AriaGroupProps, "children"> & TemporalStat
  * The shell carrying the border, the ring and the inlay row.
  *
  * @example
- * <TemporalGroup state={state}><TemporalInput /></TemporalGroup>
+ * <DateInput.Group state={state}><DateInput.Input>…</DateInput.Input></DateInput.Group>
  */
 export declare const TemporalGroup: ({ state, className, children, ...props }: TemporalGroupProps) => ReactNode;
+export type TemporalSegmentProps = Omit<ComponentProps<typeof AriaDateSegment>, "className"> & Readonly<{
+    className?: string;
+}>;
 /**
- * One editable unit of a date or time.
+ * One editable unit of a date or time, which an `Input` renders per segment.
  *
  * @example
- * {segment => <TemporalSegment segment={segment} />}
+ * <DateInput.Input>{segment => <DateInput.Segment segment={segment} />}</DateInput.Input>
  */
-export declare const TemporalSegment: ({ className, ...props }: AriaDateSegmentProps) => ReactNode;
-export type TemporalInputProps = Omit<AriaDateInputProps, "children">;
+export declare const TemporalSegment: ({ className, ...props }: TemporalSegmentProps) => ReactNode;
+export type TemporalInputProps = Omit<ComponentProps<typeof AriaDateInput>, "className"> & Readonly<{
+    className?: string;
+}>;
 /**
- * The segments of one date or time, bare inside a `TemporalGroup`.
+ * The segments of one date or time, bare inside a `Group`. Its children render
+ * each segment.
  *
  * @example
- * <TemporalInput />
+ * <DateInput.Input>{segment => <DateInput.Segment segment={segment} />}</DateInput.Input>
  */
 export declare const TemporalInput: ({ className, ...props }: TemporalInputProps) => ReactNode;
+export type TemporalRangeInputProps = Omit<TemporalInputProps, "slot"> & Readonly<{
+    /** The end of the range the segments edit. */
+    slot: "start" | "end";
+}>;
 /**
  * The segments of one end of a date range, sized to its content.
  *
  * @example
- * <TemporalRangeInput slot="start" />
+ * <DateRangeInput.Input slot="start">{segment => <DateRangeInput.Segment segment={segment} />}</DateRangeInput.Input>
  */
-export declare const TemporalRangeInput: ({ className, ...props }: Omit<AriaDateInputProps, "children" | "slot"> & Readonly<{
-    slot: "start" | "end";
-}>) => ReactNode;
+export declare const TemporalRangeInput: ({ className, ...props }: TemporalRangeInputProps) => ReactNode;
+export type TemporalRangeSeparatorProps = useRender.ComponentProps<"span">;
 /**
- * The dash between a range's start and end.
+ * The mark between a range's start and end, such as a dash. Decoration only.
  *
  * @example
- * <TemporalRangeSeparator />
+ * <DateRangeInput.Separator>–</DateRangeInput.Separator>
  */
-export declare const TemporalRangeSeparator: () => ReactNode;
+export declare const TemporalRangeSeparator: ({ render, className, ref, ...props }: TemporalRangeSeparatorProps) => ReactNode;
+export type TemporalRangeSpacerProps = useRender.ComponentProps<"span">;
 /**
  * The space that pushes a range's inlays to the end of its group.
  *
  * @example
- * <TemporalRangeSpacer />
+ * <DateRangeInput.Spacer />
  */
-export declare const TemporalRangeSpacer: () => ReactNode;
-export type TemporalTriggerProps = Readonly<{
-    /** Accessible name, surfaced as the tooltip hint and the `aria-label`. */
-    label: string;
-    /** The button itself, for the popup to align to. */
-    ref?: Ref<HTMLButtonElement>;
-    /** The icon the button shows. */
-    children: ReactNode;
+export declare const TemporalRangeSpacer: ({ render, className, ref, ...props }: TemporalRangeSpacerProps) => ReactNode;
+export type TemporalButtonProps = Omit<ComponentPropsWithRef<"button">, "type" | "children"> & Readonly<{
+    /** The button to render, a kit `Button` or `IconButton`, which renders react-aria's button underneath. */
+    render: useRender.RenderProp;
 }>;
 /**
- * The icon-only button that opens the calendar.
+ * The button that opens the calendar. It renders whichever button it is given.
  *
  * @example
- * <TemporalTrigger label="Open calendar" ref={triggerRef}><CalendarIcon /></TemporalTrigger>
+ * <DateInput.Trigger
+ * 	ref={triggerRef}
+ * 	render={
+ * 		<IconButton label="Open calendar" variant="tertiary" size="sm">
+ * 			<CalendarTodayIcon />
+ * 		</IconButton>
+ * 	}
+ * />
  */
-export declare const TemporalTrigger: ({ label, ref, children, }: TemporalTriggerProps) => ReactNode;
-export type TemporalPopupProps = Omit<AriaPopoverProps, "children"> & Readonly<{
-    children: AriaDialogProps["children"];
+export declare const TemporalTrigger: ({ render, className, ref, ...props }: TemporalButtonProps) => ReactNode;
+export type TemporalPopoverProps = Omit<ComponentProps<typeof AriaPopover>, "className"> & Readonly<{
+    className?: string;
 }>;
 /**
  * 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 & CalendarIcons;
-/**
- * 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} {...calendarIcons} />
+ * <DateInput.Popover triggerRef={triggerRef}><DateInput.Dialog>…</DateInput.Dialog></DateInput.Popover>
  */
-export declare const TemporalCalendar: ({ className, previousMonthLabel, nextMonthLabel, monthLabel, yearLabel, noMatchingYearLabel, previousIcon, nextIcon, checkIcon, expandIcon, ...props }: TemporalCalendarProps) => ReactNode;
-export type TemporalRangeCalendarProps = Omit<AriaRangeCalendarProps<CalendarDate>, "children" | "visibleDuration"> & CalendarLabels & CalendarIcons & Readonly<{
-    /** Months shown side by side. @default 1 */
-    visibleMonths?: number;
+export declare const TemporalPopover: ({ className, placement, ...props }: TemporalPopoverProps) => ReactNode;
+export type TemporalDialogProps = Omit<ComponentProps<typeof AriaDialog>, "className"> & Readonly<{
+    className?: string;
 }>;
 /**
- * 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.
+ * The dialog inside the popover, which holds the calendar and its focus.
  *
  * @example
- * <TemporalRangeCalendar visibleMonths={2} {...calendarLabels} {...calendarIcons} />
+ * <DateInput.Dialog><DateInput.Calendar>…</DateInput.Calendar></DateInput.Dialog>
  */
-export declare const TemporalRangeCalendar: ({ visibleMonths, className, previousMonthLabel, nextMonthLabel, monthLabel, yearLabel, noMatchingYearLabel, previousIcon, nextIcon, checkIcon, expandIcon, ...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;
+export declare const TemporalDialog: ({ className, ...props }: TemporalDialogProps) => ReactNode;
+export type TemporalPopupProps = Omit<TemporalPopoverProps, "children"> & Readonly<{
+    /** The calendar the dialog holds. */
+    children: TemporalDialogProps["children"];
 }>;
 /**
- * The label, description and error frame every temporal control shares,
- * handing the control the ids it wires `aria-labelledby` and
- * `aria-describedby` to.
+ * The `Popover` with its `Dialog`, in one part.
  *
  * @example
- * <TemporalFrame label="Period" optionalLabel="optional">
- * 	{({ labelId }) => <DateInput.Root aria-labelledby={labelId} />}
- * </TemporalFrame>
+ * <DateInput.Popup triggerRef={triggerRef}><DateInput.Calendar>…</DateInput.Calendar></DateInput.Popup>
  */
-export declare const TemporalFrame: ({ label, description, errors, requiredness, optionalLabel, dirty, touched, className, children, }: TemporalFrameProps) => ReactNode;
+export declare const TemporalPopup: ({ children, ...props }: TemporalPopupProps) => ReactNode;