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

package/dist/lib/calendar/calendar-parts.d.ts

@@ -0,0 +1,143 @@
+import type { CalendarDate } from "@internationalized/date";
+import { useRender } from "@base-ui/react/use-render";
+import { type ComponentProps, type ReactNode, type Ref } from "react";
+import { CalendarCell as AriaCalendarCell, CalendarGrid as AriaCalendarGrid, CalendarGridBody as AriaCalendarGridBody, CalendarGridHeader as AriaCalendarGridHeader, CalendarHeaderCell as AriaCalendarHeaderCell, type CalendarProps as AriaCalendarProps, Heading as AriaHeading, type RangeCalendarProps as AriaRangeCalendarProps } from "react-aria-components";
+import type { TemporalButtonProps } from "./temporal.tsx";
+export type CalendarRootProps = Omit<AriaCalendarProps<CalendarDate>, "className"> & Readonly<{
+    className?: string;
+    ref?: Ref<HTMLDivElement>;
+}>;
+/**
+ * A month of days, selecting one. Without a value, it opens on today in the
+ * `TimeZoneProvider`'s zone.
+ *
+ * @example
+ * <DateInput.Calendar>
+ * 	<DateInput.CalendarHeader>…</DateInput.CalendarHeader>
+ * 	<DateInput.Grid>…</DateInput.Grid>
+ * </DateInput.Calendar>
+ */
+export declare const CalendarRoot: ({ className, ...props }: CalendarRootProps) => ReactNode;
+export type RangeCalendarRootProps = Omit<AriaRangeCalendarProps<CalendarDate>, "className" | "visibleDuration"> & Readonly<{
+    /** Months shown side by side, each a `Grid` offset by its index. @default 1 */
+    visibleMonths?: number;
+    className?: string;
+    ref?: Ref<HTMLDivElement>;
+}>;
+/**
+ * Days of one or more adjacent months, selecting a continuous range. Without a
+ * value, it opens on today in the `TimeZoneProvider`'s zone.
+ *
+ * @example
+ * <DateRangeInput.Calendar visibleMonths={2}>
+ * 	<DateRangeInput.CalendarHeader>…</DateRangeInput.CalendarHeader>
+ * 	<DateRangeInput.Months>…</DateRangeInput.Months>
+ * </DateRangeInput.Calendar>
+ */
+export declare const RangeCalendarRoot: ({ visibleMonths, className, ...props }: RangeCalendarRootProps) => ReactNode;
+export type CalendarHeaderProps = useRender.ComponentProps<"header">;
+/**
+ * The row above the grid holding the month steppers and, between them, the
+ * heading or the month and year pickers.
+ *
+ * @example
+ * <DateInput.CalendarHeader>
+ * 	<DateInput.Previous render={…} />
+ * 	<DateInput.Heading />
+ * 	<DateInput.Next render={…} />
+ * </DateInput.CalendarHeader>
+ */
+export declare const CalendarHeader: ({ render, className, ref, ...props }: CalendarHeaderProps) => ReactNode;
+export type CalendarHeadingProps = ComponentProps<typeof AriaHeading>;
+/**
+ * The month or months the calendar shows, as text.
+ *
+ * @example
+ * <DateInput.Heading />
+ */
+export declare const CalendarHeading: (props: CalendarHeadingProps) => ReactNode;
+/**
+ * The button that shows the previous month. It renders whichever button it is
+ * given.
+ *
+ * @example
+ * <DateInput.Previous
+ * 	render={
+ * 		<IconButton label="Previous month" variant="tertiary" size="md">
+ * 			<ChevronLeftIcon />
+ * 		</IconButton>
+ * 	}
+ * />
+ */
+export declare const CalendarPrevious: ({ render, ref, ...props }: TemporalButtonProps) => ReactNode;
+/**
+ * The button that shows the next month. It renders whichever button it is
+ * given.
+ *
+ * @example
+ * <DateInput.Next
+ * 	render={
+ * 		<IconButton label="Next month" variant="tertiary" size="md">
+ * 			<ChevronRightIcon />
+ * 		</IconButton>
+ * 	}
+ * />
+ */
+export declare const CalendarNext: ({ render, ref, ...props }: TemporalButtonProps) => ReactNode;
+export type CalendarMonthsProps = useRender.ComponentProps<"div">;
+/**
+ * The row of grids a range calendar shows side by side.
+ *
+ * @example
+ * <DateRangeInput.Months>
+ * 	<DateRangeInput.Grid>…</DateRangeInput.Grid>
+ * 	<DateRangeInput.Grid offset={{ months: 1 }}>…</DateRangeInput.Grid>
+ * </DateRangeInput.Months>
+ */
+export declare const CalendarMonths: ({ render, className, ref, ...props }: CalendarMonthsProps) => ReactNode;
+export type CalendarGridProps = ComponentProps<typeof AriaCalendarGrid>;
+/**
+ * One month's table of days. `offset` picks a later month of a calendar that
+ * shows several.
+ *
+ * @example
+ * <DateInput.Grid>
+ * 	<DateInput.GridHeader>{day => <DateInput.HeaderCell>{day}</DateInput.HeaderCell>}</DateInput.GridHeader>
+ * 	<DateInput.GridBody>{date => <DateInput.Cell date={date} />}</DateInput.GridBody>
+ * </DateInput.Grid>
+ */
+export declare const CalendarGrid: ({ className, ...props }: CalendarGridProps) => ReactNode;
+export type CalendarGridHeaderProps = ComponentProps<typeof AriaCalendarGridHeader>;
+/**
+ * The row of weekday names at the top of a grid. Its children render each one.
+ *
+ * @example
+ * <DateInput.GridHeader>{day => <DateInput.HeaderCell>{day}</DateInput.HeaderCell>}</DateInput.GridHeader>
+ */
+export declare const CalendarGridHeader: (props: CalendarGridHeaderProps) => ReactNode;
+export type CalendarHeaderCellProps = ComponentProps<typeof AriaCalendarHeaderCell>;
+/**
+ * One weekday name.
+ *
+ * @example
+ * <DateInput.HeaderCell>{day}</DateInput.HeaderCell>
+ */
+export declare const CalendarHeaderCell: ({ className, ...props }: CalendarHeaderCellProps) => ReactNode;
+export type CalendarGridBodyProps = ComponentProps<typeof AriaCalendarGridBody>;
+/**
+ * The weeks of a grid. Its children render each day.
+ *
+ * @example
+ * <DateInput.GridBody>{date => <DateInput.Cell date={date} />}</DateInput.GridBody>
+ */
+export declare const CalendarGridBody: (props: CalendarGridBodyProps) => ReactNode;
+export type CalendarCellProps = Omit<ComponentProps<typeof AriaCalendarCell>, "className"> & Readonly<{
+    className?: string;
+}>;
+/**
+ * One day, marking today in the `TimeZoneProvider`'s zone.
+ *
+ * @example
+ * <DateInput.Cell date={date} />
+ */
+export declare const CalendarCell: ({ date, className, ...props }: CalendarCellProps) => ReactNode;

package/dist/lib/calendar/calendar-parts.js

@@ -0,0 +1,540 @@
+import { useTimeZone } from "../../components/time-zone-provider/time-zone-provider.js";
+import { todayIn } from "./temporal-value.js";
+import temporal_module_default from "./temporal.module.js";
+import { c } from "react/compiler-runtime";
+import { useRender } from "@base-ui/react/use-render";
+import { clsx } from "clsx";
+import { jsx } from "react/jsx-runtime";
+import { useContext } from "react";
+import { Button, Calendar, CalendarCell, CalendarGrid, CalendarGridBody, CalendarGridHeader, CalendarHeaderCell, DatePickerStateContext, DateRangePickerStateContext, Heading, RangeCalendar } from "react-aria-components";
+// src/lib/calendar/calendar-parts.tsx
+/**
+* A month of days, selecting one. Without a value, it opens on today in the
+* `TimeZoneProvider`'s zone.
+*
+* @example
+* <DateInput.Calendar>
+* 	<DateInput.CalendarHeader>…</DateInput.CalendarHeader>
+* 	<DateInput.Grid>…</DateInput.Grid>
+* </DateInput.Calendar>
+*/
+var CalendarRoot = (t0) => {
+	const $ = c(11);
+	let className;
+	let props;
+	if ($[0] !== t0) {
+		({className, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+	} else {
+		className = $[1];
+		props = $[2];
+	}
+	const t1 = useTimeZone();
+	let t2;
+	if ($[3] !== t1) {
+		t2 = todayIn(t1);
+		$[3] = t1;
+		$[4] = t2;
+	} else t2 = $[4];
+	const today = t2;
+	const picked = useContext(DatePickerStateContext)?.value ?? null;
+	let t3;
+	if ($[5] !== className) {
+		t3 = clsx(temporal_module_default.calendar, className);
+		$[5] = className;
+		$[6] = t3;
+	} else t3 = $[6];
+	const t4 = picked === null ? today : void 0;
+	let t5;
+	if ($[7] !== props || $[8] !== t3 || $[9] !== t4) {
+		t5 = /* @__PURE__ */ jsx(Calendar, {
+			className: t3,
+			defaultFocusedValue: t4,
+			...props
+		});
+		$[7] = props;
+		$[8] = t3;
+		$[9] = t4;
+		$[10] = t5;
+	} else t5 = $[10];
+	return t5;
+};
+/**
+* Days of one or more adjacent months, selecting a continuous range. Without a
+* value, it opens on today in the `TimeZoneProvider`'s zone.
+*
+* @example
+* <DateRangeInput.Calendar visibleMonths={2}>
+* 	<DateRangeInput.CalendarHeader>…</DateRangeInput.CalendarHeader>
+* 	<DateRangeInput.Months>…</DateRangeInput.Months>
+* </DateRangeInput.Calendar>
+*/
+var RangeCalendarRoot = (t0) => {
+	const $ = c(15);
+	let className;
+	let props;
+	let t1;
+	if ($[0] !== t0) {
+		({visibleMonths: t1, className, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+		$[3] = t1;
+	} else {
+		className = $[1];
+		props = $[2];
+		t1 = $[3];
+	}
+	const visibleMonths = t1 === void 0 ? 1 : t1;
+	const t2 = useTimeZone();
+	let t3;
+	if ($[4] !== t2) {
+		t3 = todayIn(t2);
+		$[4] = t2;
+		$[5] = t3;
+	} else t3 = $[5];
+	const today = t3;
+	const picked = useContext(DateRangePickerStateContext)?.value.start ?? null;
+	let t4;
+	if ($[6] !== className) {
+		t4 = clsx(temporal_module_default.calendar, temporal_module_default.rangeCalendar, className);
+		$[6] = className;
+		$[7] = t4;
+	} else t4 = $[7];
+	const t5 = Math.max(1, visibleMonths);
+	let t6;
+	if ($[8] !== t5) {
+		t6 = { months: t5 };
+		$[8] = t5;
+		$[9] = t6;
+	} else t6 = $[9];
+	const t7 = picked === null ? today : void 0;
+	let t8;
+	if ($[10] !== props || $[11] !== t4 || $[12] !== t6 || $[13] !== t7) {
+		t8 = /* @__PURE__ */ jsx(RangeCalendar, {
+			className: t4,
+			visibleDuration: t6,
+			defaultFocusedValue: t7,
+			...props
+		});
+		$[10] = props;
+		$[11] = t4;
+		$[12] = t6;
+		$[13] = t7;
+		$[14] = t8;
+	} else t8 = $[14];
+	return t8;
+};
+/**
+* The row above the grid holding the month steppers and, between them, the
+* heading or the month and year pickers.
+*
+* @example
+* <DateInput.CalendarHeader>
+* 	<DateInput.Previous render={…} />
+* 	<DateInput.Heading />
+* 	<DateInput.Next render={…} />
+* </DateInput.CalendarHeader>
+*/
+var CalendarHeader = (t0) => {
+	const $ = c(14);
+	let className;
+	let props;
+	let ref;
+	let render;
+	if ($[0] !== t0) {
+		({render, className, ref, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+		$[3] = ref;
+		$[4] = render;
+	} else {
+		className = $[1];
+		props = $[2];
+		ref = $[3];
+		render = $[4];
+	}
+	let t1;
+	if ($[5] !== className) {
+		t1 = clsx(temporal_module_default.header, className);
+		$[5] = className;
+		$[6] = t1;
+	} else t1 = $[6];
+	let t2;
+	if ($[7] !== props || $[8] !== t1) {
+		t2 = {
+			...props,
+			className: t1
+		};
+		$[7] = props;
+		$[8] = t1;
+		$[9] = t2;
+	} else t2 = $[9];
+	let t3;
+	if ($[10] !== ref || $[11] !== render || $[12] !== t2) {
+		t3 = {
+			defaultTagName: "header",
+			render,
+			ref,
+			props: t2
+		};
+		$[10] = ref;
+		$[11] = render;
+		$[12] = t2;
+		$[13] = t3;
+	} else t3 = $[13];
+	return useRender(t3);
+};
+/**
+* The month or months the calendar shows, as text.
+*
+* @example
+* <DateInput.Heading />
+*/
+var CalendarHeading = (props) => {
+	const $ = c(2);
+	let t0;
+	if ($[0] !== props) {
+		t0 = /* @__PURE__ */ jsx(Heading, { ...props });
+		$[0] = props;
+		$[1] = t0;
+	} else t0 = $[1];
+	return t0;
+};
+/**
+* The button that shows the previous month. It renders whichever button it is
+* given.
+*
+* @example
+* <DateInput.Previous
+* 	render={
+* 		<IconButton label="Previous month" variant="tertiary" size="md">
+* 			<ChevronLeftIcon />
+* 		</IconButton>
+* 	}
+* />
+*/
+var CalendarPrevious = (t0) => {
+	const $ = c(11);
+	let props;
+	let ref;
+	let render;
+	if ($[0] !== t0) {
+		({render, ref, ...props} = t0);
+		$[0] = t0;
+		$[1] = props;
+		$[2] = ref;
+		$[3] = render;
+	} else {
+		props = $[1];
+		ref = $[2];
+		render = $[3];
+	}
+	let t1;
+	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = /* @__PURE__ */ jsx(Button, { slot: "previous" });
+		$[4] = t1;
+	} else t1 = $[4];
+	let t2;
+	if ($[5] !== props) {
+		t2 = {
+			...props,
+			render: t1
+		};
+		$[5] = props;
+		$[6] = t2;
+	} else t2 = $[6];
+	let t3;
+	if ($[7] !== ref || $[8] !== render || $[9] !== t2) {
+		t3 = {
+			render,
+			ref,
+			props: t2
+		};
+		$[7] = ref;
+		$[8] = render;
+		$[9] = t2;
+		$[10] = t3;
+	} else t3 = $[10];
+	return useRender(t3);
+};
+/**
+* The button that shows the next month. It renders whichever button it is
+* given.
+*
+* @example
+* <DateInput.Next
+* 	render={
+* 		<IconButton label="Next month" variant="tertiary" size="md">
+* 			<ChevronRightIcon />
+* 		</IconButton>
+* 	}
+* />
+*/
+var CalendarNext = (t0) => {
+	const $ = c(11);
+	let props;
+	let ref;
+	let render;
+	if ($[0] !== t0) {
+		({render, ref, ...props} = t0);
+		$[0] = t0;
+		$[1] = props;
+		$[2] = ref;
+		$[3] = render;
+	} else {
+		props = $[1];
+		ref = $[2];
+		render = $[3];
+	}
+	let t1;
+	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = /* @__PURE__ */ jsx(Button, { slot: "next" });
+		$[4] = t1;
+	} else t1 = $[4];
+	let t2;
+	if ($[5] !== props) {
+		t2 = {
+			...props,
+			render: t1
+		};
+		$[5] = props;
+		$[6] = t2;
+	} else t2 = $[6];
+	let t3;
+	if ($[7] !== ref || $[8] !== render || $[9] !== t2) {
+		t3 = {
+			render,
+			ref,
+			props: t2
+		};
+		$[7] = ref;
+		$[8] = render;
+		$[9] = t2;
+		$[10] = t3;
+	} else t3 = $[10];
+	return useRender(t3);
+};
+/**
+* The row of grids a range calendar shows side by side.
+*
+* @example
+* <DateRangeInput.Months>
+* 	<DateRangeInput.Grid>…</DateRangeInput.Grid>
+* 	<DateRangeInput.Grid offset={{ months: 1 }}>…</DateRangeInput.Grid>
+* </DateRangeInput.Months>
+*/
+var CalendarMonths = (t0) => {
+	const $ = c(14);
+	let className;
+	let props;
+	let ref;
+	let render;
+	if ($[0] !== t0) {
+		({render, className, ref, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+		$[3] = ref;
+		$[4] = render;
+	} else {
+		className = $[1];
+		props = $[2];
+		ref = $[3];
+		render = $[4];
+	}
+	let t1;
+	if ($[5] !== className) {
+		t1 = clsx(temporal_module_default.months, className);
+		$[5] = className;
+		$[6] = t1;
+	} else t1 = $[6];
+	let t2;
+	if ($[7] !== props || $[8] !== t1) {
+		t2 = {
+			...props,
+			className: t1
+		};
+		$[7] = props;
+		$[8] = t1;
+		$[9] = t2;
+	} else t2 = $[9];
+	let t3;
+	if ($[10] !== ref || $[11] !== render || $[12] !== t2) {
+		t3 = {
+			render,
+			ref,
+			props: t2
+		};
+		$[10] = ref;
+		$[11] = render;
+		$[12] = t2;
+		$[13] = t3;
+	} else t3 = $[13];
+	return useRender(t3);
+};
+/**
+* One month's table of days. `offset` picks a later month of a calendar that
+* shows several.
+*
+* @example
+* <DateInput.Grid>
+* 	<DateInput.GridHeader>{day => <DateInput.HeaderCell>{day}</DateInput.HeaderCell>}</DateInput.GridHeader>
+* 	<DateInput.GridBody>{date => <DateInput.Cell date={date} />}</DateInput.GridBody>
+* </DateInput.Grid>
+*/
+var CalendarGrid$1 = (t0) => {
+	const $ = c(8);
+	let className;
+	let props;
+	if ($[0] !== t0) {
+		({className, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+	} else {
+		className = $[1];
+		props = $[2];
+	}
+	let t1;
+	if ($[3] !== className) {
+		t1 = clsx(temporal_module_default.grid, className);
+		$[3] = className;
+		$[4] = t1;
+	} else t1 = $[4];
+	let t2;
+	if ($[5] !== props || $[6] !== t1) {
+		t2 = /* @__PURE__ */ jsx(CalendarGrid, {
+			className: t1,
+			...props
+		});
+		$[5] = props;
+		$[6] = t1;
+		$[7] = t2;
+	} else t2 = $[7];
+	return t2;
+};
+/**
+* The row of weekday names at the top of a grid. Its children render each one.
+*
+* @example
+* <DateInput.GridHeader>{day => <DateInput.HeaderCell>{day}</DateInput.HeaderCell>}</DateInput.GridHeader>
+*/
+var CalendarGridHeader$1 = (props) => {
+	const $ = c(2);
+	let t0;
+	if ($[0] !== props) {
+		t0 = /* @__PURE__ */ jsx(CalendarGridHeader, { ...props });
+		$[0] = props;
+		$[1] = t0;
+	} else t0 = $[1];
+	return t0;
+};
+/**
+* One weekday name.
+*
+* @example
+* <DateInput.HeaderCell>{day}</DateInput.HeaderCell>
+*/
+var CalendarHeaderCell$1 = (t0) => {
+	const $ = c(8);
+	let className;
+	let props;
+	if ($[0] !== t0) {
+		({className, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+	} else {
+		className = $[1];
+		props = $[2];
+	}
+	let t1;
+	if ($[3] !== className) {
+		t1 = clsx(temporal_module_default.weekday, className);
+		$[3] = className;
+		$[4] = t1;
+	} else t1 = $[4];
+	let t2;
+	if ($[5] !== props || $[6] !== t1) {
+		t2 = /* @__PURE__ */ jsx(CalendarHeaderCell, {
+			className: t1,
+			...props
+		});
+		$[5] = props;
+		$[6] = t1;
+		$[7] = t2;
+	} else t2 = $[7];
+	return t2;
+};
+/**
+* The weeks of a grid. Its children render each day.
+*
+* @example
+* <DateInput.GridBody>{date => <DateInput.Cell date={date} />}</DateInput.GridBody>
+*/
+var CalendarGridBody$1 = (props) => {
+	const $ = c(2);
+	let t0;
+	if ($[0] !== props) {
+		t0 = /* @__PURE__ */ jsx(CalendarGridBody, { ...props });
+		$[0] = props;
+		$[1] = t0;
+	} else t0 = $[1];
+	return t0;
+};
+/**
+* One day, marking today in the `TimeZoneProvider`'s zone.
+*
+* @example
+* <DateInput.Cell date={date} />
+*/
+var CalendarCell$1 = (t0) => {
+	const $ = c(14);
+	let className;
+	let date;
+	let props;
+	if ($[0] !== t0) {
+		({date, className, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = date;
+		$[3] = props;
+	} else {
+		className = $[1];
+		date = $[2];
+		props = $[3];
+	}
+	const today = todayIn(useTimeZone());
+	const T0 = CalendarCell;
+	const t1 = clsx;
+	const t2 = temporal_module_default;
+	const t3 = date.compare(today) === 0 && temporal_module_default.today;
+	let t4;
+	if ($[4] !== className || $[5] !== t1 || $[6] !== t2.day || $[7] !== t3) {
+		t4 = t1(t2.day, t3, className);
+		$[4] = className;
+		$[5] = t1;
+		$[6] = t2.day;
+		$[7] = t3;
+		$[8] = t4;
+	} else t4 = $[8];
+	let t5;
+	if ($[9] !== T0 || $[10] !== date || $[11] !== props || $[12] !== t4) {
+		t5 = /* @__PURE__ */ jsx(T0, {
+			date,
+			className: t4,
+			...props
+		});
+		$[9] = T0;
+		$[10] = date;
+		$[11] = props;
+		$[12] = t4;
+		$[13] = t5;
+	} else t5 = $[13];
+	return t5;
+};
+export { CalendarCell$1 as CalendarCell, CalendarGrid$1 as CalendarGrid, CalendarGridBody$1 as CalendarGridBody, CalendarGridHeader$1 as CalendarGridHeader, CalendarHeader, CalendarHeaderCell$1 as CalendarHeaderCell, CalendarHeading, CalendarMonths, CalendarNext, CalendarPrevious, CalendarRoot, RangeCalendarRoot };