@igne-agency/react-web-ui 0.0.0-stage → 0.2.1

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

@@ -0,0 +1,134 @@
+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;