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

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

@@ -0,0 +1,52 @@
+import type { ReactNode } from "react";
+import { type CalendarNavigationIcons, type CalendarNavigationLabels } from "./calendar-navigation.tsx";
+import { type CalendarRootProps, type RangeCalendarRootProps } from "./calendar-parts.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;
+}>;
+/**
+ * A calendar's header: the month steppers around the month and year pickers.
+ *
+ * @example
+ * <StandardCalendarHeader {...calendarLabels} {...calendarIcons} />
+ */
+export declare const StandardCalendarHeader: ({ previousMonthLabel, nextMonthLabel, monthLabel, yearLabel, noMatchingYearLabel, previousIcon, nextIcon, checkIcon, expandIcon, }: CalendarLabels & CalendarIcons) => ReactNode;
+/**
+ * One month's grid: the weekday names over the days.
+ *
+ * @example
+ * <StandardCalendarGrid monthOffset={1} />
+ */
+export declare const StandardCalendarGrid: ({ monthOffset, }: Readonly<{
+    /** Months after the first visible one this grid shows. */
+    monthOffset?: number;
+}>) => ReactNode;
+export type TemporalCalendarProps = Omit<CalendarRootProps, "children"> & CalendarLabels & CalendarIcons;
+/**
+ * A calendar with its month steppers, month and year pickers and grid, built
+ * from the calendar parts.
+ *
+ * @example
+ * <TemporalCalendar {...calendarLabels} {...calendarIcons} />
+ */
+export declare const TemporalCalendar: ({ previousMonthLabel, nextMonthLabel, monthLabel, yearLabel, noMatchingYearLabel, previousIcon, nextIcon, checkIcon, expandIcon, ...props }: TemporalCalendarProps) => ReactNode;
+export type TemporalRangeCalendarProps = Omit<RangeCalendarRootProps, "children"> & CalendarLabels & CalendarIcons;
+/**
+ * A range calendar with its month steppers, month and year pickers and a grid
+ * per visible month, built from the calendar parts.
+ *
+ * @example
+ * <TemporalRangeCalendar visibleMonths={2} {...calendarLabels} {...calendarIcons} />
+ */
+export declare const TemporalRangeCalendar: ({ visibleMonths, previousMonthLabel, nextMonthLabel, monthLabel, yearLabel, noMatchingYearLabel, previousIcon, nextIcon, checkIcon, expandIcon, ...props }: TemporalRangeCalendarProps) => ReactNode;

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

@@ -0,0 +1,311 @@
+import { IconButton } from "../../components/button/button.js";
+import { CalendarMonthPicker, CalendarPickers, CalendarYearPicker } from "./calendar-navigation.js";
+import { CalendarCell, CalendarGrid, CalendarGridBody, CalendarGridHeader, CalendarHeader, CalendarHeaderCell, CalendarMonths, CalendarNext, CalendarPrevious, CalendarRoot, RangeCalendarRoot } from "./calendar-parts.js";
+import { c } from "react/compiler-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/lib/calendar/calendar-prefab.tsx
+/**
+* A calendar's header: the month steppers around the month and year pickers.
+*
+* @example
+* <StandardCalendarHeader {...calendarLabels} {...calendarIcons} />
+*/
+var StandardCalendarHeader = (t0) => {
+	const $ = c(22);
+	const { previousMonthLabel, nextMonthLabel, monthLabel, yearLabel, noMatchingYearLabel, previousIcon, nextIcon, checkIcon, expandIcon } = t0;
+	let t1;
+	if ($[0] !== previousIcon || $[1] !== previousMonthLabel) {
+		t1 = /* @__PURE__ */ jsx(CalendarPrevious, { render: /* @__PURE__ */ jsx(IconButton, {
+			label: previousMonthLabel,
+			variant: "tertiary",
+			size: "md",
+			children: previousIcon
+		}) });
+		$[0] = previousIcon;
+		$[1] = previousMonthLabel;
+		$[2] = t1;
+	} else t1 = $[2];
+	let t2;
+	if ($[3] !== checkIcon || $[4] !== expandIcon || $[5] !== monthLabel) {
+		t2 = /* @__PURE__ */ jsx(CalendarMonthPicker, {
+			label: monthLabel,
+			checkIcon,
+			expandIcon
+		});
+		$[3] = checkIcon;
+		$[4] = expandIcon;
+		$[5] = monthLabel;
+		$[6] = t2;
+	} else t2 = $[6];
+	let t3;
+	if ($[7] !== checkIcon || $[8] !== expandIcon || $[9] !== noMatchingYearLabel || $[10] !== yearLabel) {
+		t3 = /* @__PURE__ */ jsx(CalendarYearPicker, {
+			label: yearLabel,
+			noMatchingYearLabel,
+			checkIcon,
+			expandIcon
+		});
+		$[7] = checkIcon;
+		$[8] = expandIcon;
+		$[9] = noMatchingYearLabel;
+		$[10] = yearLabel;
+		$[11] = t3;
+	} else t3 = $[11];
+	let t4;
+	if ($[12] !== t2 || $[13] !== t3) {
+		t4 = /* @__PURE__ */ jsxs(CalendarPickers, { children: [t2, t3] });
+		$[12] = t2;
+		$[13] = t3;
+		$[14] = t4;
+	} else t4 = $[14];
+	let t5;
+	if ($[15] !== nextIcon || $[16] !== nextMonthLabel) {
+		t5 = /* @__PURE__ */ jsx(CalendarNext, { render: /* @__PURE__ */ jsx(IconButton, {
+			label: nextMonthLabel,
+			variant: "tertiary",
+			size: "md",
+			children: nextIcon
+		}) });
+		$[15] = nextIcon;
+		$[16] = nextMonthLabel;
+		$[17] = t5;
+	} else t5 = $[17];
+	let t6;
+	if ($[18] !== t1 || $[19] !== t4 || $[20] !== t5) {
+		t6 = /* @__PURE__ */ jsxs(CalendarHeader, { children: [
+			t1,
+			t4,
+			t5
+		] });
+		$[18] = t1;
+		$[19] = t4;
+		$[20] = t5;
+		$[21] = t6;
+	} else t6 = $[21];
+	return t6;
+};
+/**
+* One month's grid: the weekday names over the days.
+*
+* @example
+* <StandardCalendarGrid monthOffset={1} />
+*/
+var StandardCalendarGrid = (t0) => {
+	const $ = c(6);
+	const { monthOffset } = t0;
+	let t1;
+	if ($[0] !== monthOffset) {
+		t1 = monthOffset === void 0 ? void 0 : { months: monthOffset };
+		$[0] = monthOffset;
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	let t3;
+	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = /* @__PURE__ */ jsx(CalendarGridHeader, { children: _temp });
+		t3 = /* @__PURE__ */ jsx(CalendarGridBody, { children: _temp2 });
+		$[2] = t2;
+		$[3] = t3;
+	} else {
+		t2 = $[2];
+		t3 = $[3];
+	}
+	let t4;
+	if ($[4] !== t1) {
+		t4 = /* @__PURE__ */ jsxs(CalendarGrid, {
+			offset: t1,
+			children: [t2, t3]
+		});
+		$[4] = t1;
+		$[5] = t4;
+	} else t4 = $[5];
+	return t4;
+};
+/**
+* A calendar with its month steppers, month and year pickers and grid, built
+* from the calendar parts.
+*
+* @example
+* <TemporalCalendar {...calendarLabels} {...calendarIcons} />
+*/
+var TemporalCalendar = (t0) => {
+	const $ = c(25);
+	let checkIcon;
+	let expandIcon;
+	let monthLabel;
+	let nextIcon;
+	let nextMonthLabel;
+	let noMatchingYearLabel;
+	let previousIcon;
+	let previousMonthLabel;
+	let props;
+	let yearLabel;
+	if ($[0] !== t0) {
+		({previousMonthLabel, nextMonthLabel, monthLabel, yearLabel, noMatchingYearLabel, previousIcon, nextIcon, checkIcon, expandIcon, ...props} = t0);
+		$[0] = t0;
+		$[1] = checkIcon;
+		$[2] = expandIcon;
+		$[3] = monthLabel;
+		$[4] = nextIcon;
+		$[5] = nextMonthLabel;
+		$[6] = noMatchingYearLabel;
+		$[7] = previousIcon;
+		$[8] = previousMonthLabel;
+		$[9] = props;
+		$[10] = yearLabel;
+	} else {
+		checkIcon = $[1];
+		expandIcon = $[2];
+		monthLabel = $[3];
+		nextIcon = $[4];
+		nextMonthLabel = $[5];
+		noMatchingYearLabel = $[6];
+		previousIcon = $[7];
+		previousMonthLabel = $[8];
+		props = $[9];
+		yearLabel = $[10];
+	}
+	let t1;
+	if ($[11] !== checkIcon || $[12] !== expandIcon || $[13] !== monthLabel || $[14] !== nextIcon || $[15] !== nextMonthLabel || $[16] !== noMatchingYearLabel || $[17] !== previousIcon || $[18] !== previousMonthLabel || $[19] !== yearLabel) {
+		t1 = /* @__PURE__ */ jsx(StandardCalendarHeader, {
+			previousMonthLabel,
+			nextMonthLabel,
+			monthLabel,
+			yearLabel,
+			noMatchingYearLabel,
+			previousIcon,
+			nextIcon,
+			checkIcon,
+			expandIcon
+		});
+		$[11] = checkIcon;
+		$[12] = expandIcon;
+		$[13] = monthLabel;
+		$[14] = nextIcon;
+		$[15] = nextMonthLabel;
+		$[16] = noMatchingYearLabel;
+		$[17] = previousIcon;
+		$[18] = previousMonthLabel;
+		$[19] = yearLabel;
+		$[20] = t1;
+	} else t1 = $[20];
+	let t2;
+	if ($[21] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = /* @__PURE__ */ jsx(StandardCalendarGrid, {});
+		$[21] = t2;
+	} else t2 = $[21];
+	let t3;
+	if ($[22] !== props || $[23] !== t1) {
+		t3 = /* @__PURE__ */ jsxs(CalendarRoot, {
+			...props,
+			children: [t1, t2]
+		});
+		$[22] = props;
+		$[23] = t1;
+		$[24] = t3;
+	} else t3 = $[24];
+	return t3;
+};
+/**
+* A range calendar with its month steppers, month and year pickers and a grid
+* per visible month, built from the calendar parts.
+*
+* @example
+* <TemporalRangeCalendar visibleMonths={2} {...calendarLabels} {...calendarIcons} />
+*/
+var TemporalRangeCalendar = (t0) => {
+	const $ = c(29);
+	let checkIcon;
+	let expandIcon;
+	let monthLabel;
+	let nextIcon;
+	let nextMonthLabel;
+	let noMatchingYearLabel;
+	let previousIcon;
+	let previousMonthLabel;
+	let props;
+	let t1;
+	let yearLabel;
+	if ($[0] !== t0) {
+		({visibleMonths: t1, previousMonthLabel, nextMonthLabel, monthLabel, yearLabel, noMatchingYearLabel, previousIcon, nextIcon, checkIcon, expandIcon, ...props} = t0);
+		$[0] = t0;
+		$[1] = checkIcon;
+		$[2] = expandIcon;
+		$[3] = monthLabel;
+		$[4] = nextIcon;
+		$[5] = nextMonthLabel;
+		$[6] = noMatchingYearLabel;
+		$[7] = previousIcon;
+		$[8] = previousMonthLabel;
+		$[9] = props;
+		$[10] = t1;
+		$[11] = yearLabel;
+	} else {
+		checkIcon = $[1];
+		expandIcon = $[2];
+		monthLabel = $[3];
+		nextIcon = $[4];
+		nextMonthLabel = $[5];
+		noMatchingYearLabel = $[6];
+		previousIcon = $[7];
+		previousMonthLabel = $[8];
+		props = $[9];
+		t1 = $[10];
+		yearLabel = $[11];
+	}
+	const visibleMonths = t1 === void 0 ? 1 : t1;
+	let t2;
+	if ($[12] !== checkIcon || $[13] !== expandIcon || $[14] !== monthLabel || $[15] !== nextIcon || $[16] !== nextMonthLabel || $[17] !== noMatchingYearLabel || $[18] !== previousIcon || $[19] !== previousMonthLabel || $[20] !== yearLabel) {
+		t2 = /* @__PURE__ */ jsx(StandardCalendarHeader, {
+			previousMonthLabel,
+			nextMonthLabel,
+			monthLabel,
+			yearLabel,
+			noMatchingYearLabel,
+			previousIcon,
+			nextIcon,
+			checkIcon,
+			expandIcon
+		});
+		$[12] = checkIcon;
+		$[13] = expandIcon;
+		$[14] = monthLabel;
+		$[15] = nextIcon;
+		$[16] = nextMonthLabel;
+		$[17] = noMatchingYearLabel;
+		$[18] = previousIcon;
+		$[19] = previousMonthLabel;
+		$[20] = yearLabel;
+		$[21] = t2;
+	} else t2 = $[21];
+	let t3;
+	if ($[22] !== visibleMonths) {
+		t3 = /* @__PURE__ */ jsx(CalendarMonths, { children: Array.from({ length: Math.max(1, visibleMonths) }, _temp3) });
+		$[22] = visibleMonths;
+		$[23] = t3;
+	} else t3 = $[23];
+	let t4;
+	if ($[24] !== props || $[25] !== t2 || $[26] !== t3 || $[27] !== visibleMonths) {
+		t4 = /* @__PURE__ */ jsxs(RangeCalendarRoot, {
+			visibleMonths,
+			...props,
+			children: [t2, t3]
+		});
+		$[24] = props;
+		$[25] = t2;
+		$[26] = t3;
+		$[27] = visibleMonths;
+		$[28] = t4;
+	} else t4 = $[28];
+	return t4;
+};
+function _temp(day) {
+	return /* @__PURE__ */ jsx(CalendarHeaderCell, { children: day });
+}
+function _temp2(date) {
+	return /* @__PURE__ */ jsx(CalendarCell, { date });
+}
+function _temp3(_, month) {
+	return /* @__PURE__ */ jsx(StandardCalendarGrid, { monthOffset: month }, month);
+}
+export { StandardCalendarGrid, StandardCalendarHeader, TemporalCalendar, TemporalRangeCalendar };

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

@@ -9,6 +9,8 @@ export type CalendarYearProps = CalendarNavigationIcons & Readonly<{
     label: string;
     /** What the list says when no year matches the typed text. */
     noMatchLabel: string;
+    /** Applied to the year control. */
+    className?: string;
 }>;
 /**
  * The year control in a calendar header: every year in the focused date's era,
@@ -18,4 +20,4 @@ export type CalendarYearProps = CalendarNavigationIcons & Readonly<{
  * @example
  * <CalendarYear state={state} container={containerRef} label="Year" noMatchLabel="No matching year." checkIcon={<CheckIcon />} />
  */
-export declare const CalendarYear: ({ state, container, label, noMatchLabel, checkIcon, expandIcon, }: CalendarYearProps) => ReactNode;
+export declare const CalendarYear: ({ state, container, label, noMatchLabel, checkIcon, expandIcon, className, }: CalendarYearProps) => ReactNode;