@povio/ui 6.0.0-rc.2 → 6.0.0-rc.4

package/dist/RangeCalendar-CjaTtdUQ.js

@@ -0,0 +1,291 @@
+import { t as ChevronDown } from "./chevron-down-B4Pr8bD3.js";
+import { r as ChevronLeft } from "./Tooltip-CqbyoJhl.js";
+import { t as ChevronRight } from "./chevron-right-3nKJR5Bb.js";
+import { n as ChevronsLeft, t as ChevronsRight } from "./chevrons-right-DJPPn2fD.js";
+import { t as Select } from "./Select-DOrH8Q5O.js";
+import { t as clsx } from "./clsx-CnD0nOiA.js";
+import { IconButton } from "./components/icon-button.js";
+import { BadgeButton } from "./components/badge-button.js";
+import "./i18n-BjNKHh_D.js";
+import { n as CalendarGrid, t as $1697a7ad3db7b79f$re_export$useDateFormatter } from "./import-DflE4Gl2.js";
+import { useMemo, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+import { useRangeCalendar } from "@react-aria/calendar";
+//#region src/components/inputs/DateTime/shared/CalendarSelectHeader.tsx
+const CalendarSelectHeader = ({ state, isPrevMonthDisabled, isPrevYearDisabled, isNextMonthDisabled, isNextYearDisabled, offset = { months: 0 }, onNavigate, maxDate, minDate }) => {
+	const { t } = useTranslation("ui");
+	const displayDate = state.visibleRange.start.add(offset);
+	const currentMonth = displayDate.month - 1;
+	const currentYear = displayDate.year;
+	const formatter = $1697a7ad3db7b79f$re_export$useDateFormatter({
+		month: "long",
+		timeZone: state.timeZone
+	});
+	const numMonths = state.focusedDate.calendar.getMonthsInYear(state.focusedDate);
+	const MONTHS = useMemo(() => {
+		const months = [];
+		for (let i = 1; i <= numMonths; i++) {
+			const date = state.focusedDate.set({ month: i });
+			months.push(formatter.format(date.toDate(state.timeZone)));
+		}
+		return months;
+	}, [
+		formatter,
+		numMonths,
+		state.focusedDate,
+		state.timeZone
+	]);
+	const years = Array.from({ length: 201 }, (_, i) => currentYear - 100 + i);
+	const getAvailableMonths = () => {
+		return MONTHS.map((month, i) => {
+			const monthDate = displayDate.set({ month: i + 1 });
+			let isDisabled = false;
+			if (maxDate) isDisabled = monthDate.year > maxDate.year || monthDate.year === maxDate.year && monthDate.month >= maxDate.month;
+			if (minDate) isDisabled = monthDate.year < minDate.year || monthDate.year === minDate.year && monthDate.month <= minDate.month;
+			return {
+				month,
+				value: i,
+				isDisabled
+			};
+		});
+	};
+	const getAvailableYears = () => {
+		return years.map((year) => {
+			let isDisabled = false;
+			if (maxDate) isDisabled = year > maxDate.year || year === maxDate.year && displayDate.month >= maxDate.month;
+			if (minDate && !isDisabled) isDisabled = year < minDate.year || year === minDate.year && displayDate.month <= minDate.month;
+			return {
+				year,
+				isDisabled
+			};
+		});
+	};
+	const availableMonths = getAvailableMonths();
+	const availableYears = getAvailableYears();
+	const handleMonthChange = (value) => {
+		if (value === null) return;
+		const newDate = displayDate.set({ month: value + 1 });
+		onNavigate?.(newDate);
+	};
+	const handleYearChange = (value) => {
+		if (value === null) return;
+		const newDate = displayDate.set({ year: value });
+		onNavigate?.(newDate);
+	};
+	const handlePrevMonth = (e) => {
+		e.preventDefault();
+		e.stopPropagation();
+		const newDate = displayDate.subtract({ months: 1 });
+		onNavigate?.(newDate);
+	};
+	const handleNextMonth = (e) => {
+		e.preventDefault();
+		e.stopPropagation();
+		const newDate = displayDate.add({ months: 1 });
+		onNavigate?.(newDate);
+	};
+	const handlePrevYear = (e) => {
+		e.preventDefault();
+		e.stopPropagation();
+		const newDate = displayDate.subtract({ years: 1 });
+		onNavigate?.(newDate);
+	};
+	const handleNextYear = (e) => {
+		e.preventDefault();
+		e.stopPropagation();
+		const newDate = displayDate.add({ years: 1 });
+		onNavigate?.(newDate);
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex w-full items-center justify-between gap-3 p-3",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center",
+				children: [/* @__PURE__ */ jsx(IconButton, {
+					color: "secondary",
+					isDisabled: isPrevYearDisabled,
+					onClick: handlePrevYear,
+					icon: ChevronsLeft,
+					label: t(($) => $.ui.datePicker.navigation.previousYear),
+					variant: "text",
+					width: "hug",
+					disableTooltip: true,
+					size: "sm"
+				}), /* @__PURE__ */ jsx(IconButton, {
+					color: "secondary",
+					isDisabled: isPrevMonthDisabled,
+					onClick: handlePrevMonth,
+					icon: ChevronLeft,
+					label: t(($) => $.ui.datePicker.navigation.previousMonth),
+					variant: "text",
+					width: "hug",
+					disableTooltip: true,
+					size: "sm"
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex gap-2",
+				children: [/* @__PURE__ */ jsx(Select, {
+					label: "Month",
+					hideLabel: true,
+					customTrigger: /* @__PURE__ */ jsx(BadgeButton, {
+						color: "secondary",
+						variant: "subtle",
+						iconPosition: "right",
+						icon: ChevronDown,
+						children: MONTHS[currentMonth].slice(0, 3)
+					}),
+					ignoreTriggerWidth: true,
+					items: availableMonths.map(({ month, value, isDisabled }) => ({
+						label: month,
+						id: value,
+						isDisabled
+					})).filter(({ isDisabled }) => !isDisabled),
+					value: currentMonth,
+					onChange: handleMonthChange
+				}), /* @__PURE__ */ jsx(Select, {
+					label: "Year",
+					hideLabel: true,
+					customTrigger: /* @__PURE__ */ jsx(BadgeButton, {
+						color: "secondary",
+						variant: "subtle",
+						iconPosition: "right",
+						icon: ChevronDown,
+						children: currentYear.toString()
+					}),
+					items: availableYears.map(({ year, isDisabled }) => ({
+						label: year.toString(),
+						id: year,
+						isDisabled
+					})).filter(({ isDisabled }) => !isDisabled),
+					value: currentYear,
+					onChange: handleYearChange
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center",
+				children: [/* @__PURE__ */ jsx(IconButton, {
+					color: "secondary",
+					isDisabled: isNextMonthDisabled,
+					onClick: handleNextMonth,
+					icon: ChevronRight,
+					label: t(($) => $.ui.datePicker.navigation.nextMonth),
+					variant: "text",
+					width: "hug",
+					disableTooltip: true,
+					size: "sm"
+				}), /* @__PURE__ */ jsx(IconButton, {
+					color: "secondary",
+					isDisabled: isNextYearDisabled,
+					onClick: handleNextYear,
+					icon: ChevronsRight,
+					label: t(($) => $.ui.datePicker.navigation.nextYear),
+					variant: "text",
+					width: "hug",
+					disableTooltip: true,
+					size: "sm"
+				})]
+			})
+		]
+	});
+};
+//#endregion
+//#region src/components/inputs/DateTime/shared/RangeCalendar.tsx
+const RangeCalendar = ({ showWeekNumbers, className, leftCalendarState, rightCalendarState, calendarProps, onApply, onRangeChange: _onRangeChange, onDateSelection, onDateHover, rangeSelection, hoverDate, onKeyboardNavigation, isRangeSelectionDisabled }) => {
+	const leftRef = useRef(null);
+	const rightRef = useRef(null);
+	const { calendarProps: leftCalendarAriaProps } = useRangeCalendar(calendarProps, leftCalendarState, leftRef);
+	const { calendarProps: rightCalendarAriaProps } = useRangeCalendar(calendarProps, rightCalendarState, rightRef);
+	const leftDate = leftCalendarState.visibleRange.start;
+	const rightDate = rightCalendarState.visibleRange.start;
+	const handleLeftKeyboardNavigation = (event, date) => {
+		return onKeyboardNavigation?.(event, date, "left") ?? false;
+	};
+	const handleRightKeyboardNavigation = (event, date) => {
+		return onKeyboardNavigation?.(event, date, "right") ?? false;
+	};
+	const handleLeftNavigate = (newDate) => {
+		const rightCurrentDate = rightCalendarState.visibleRange.start;
+		if (newDate.year < rightCurrentDate.year || newDate.year === rightCurrentDate.year && newDate.month < rightCurrentDate.month) leftCalendarState.setFocusedDate(newDate);
+		else {
+			const closestValidDate = rightCurrentDate.subtract({ months: 1 });
+			leftCalendarState.setFocusedDate(closestValidDate);
+		}
+	};
+	const handleRightNavigate = (newDate) => {
+		const leftCurrentDate = leftCalendarState.visibleRange.start;
+		if (newDate.year > leftCurrentDate.year || newDate.year === leftCurrentDate.year && newDate.month > leftCurrentDate.month) rightCalendarState.setFocusedDate(newDate);
+		else {
+			const closestValidDate = leftCurrentDate.add({ months: 1 });
+			rightCalendarState.setFocusedDate(closestValidDate);
+		}
+	};
+	const isNextDisabled = useMemo(() => {
+		const leftNextDate = leftDate.add({ months: 1 });
+		return leftNextDate.year > rightDate.year || leftNextDate.year === rightDate.year && leftNextDate.month === rightDate.month;
+	}, [leftDate, rightDate]);
+	const isPrevDisabled = useMemo(() => {
+		const rightPrevDate = rightDate.subtract({ months: 1 });
+		return rightPrevDate.year < leftDate.year || rightPrevDate.year === leftDate.year && rightPrevDate.month === leftDate.month;
+	}, [leftDate, rightDate]);
+	return /* @__PURE__ */ jsx("div", {
+		className: clsx("flex flex-col items-center bg-popover text-popover-foreground", showWeekNumbers ? "w-full max-w-[336px] md:w-fit md:max-w-none" : "w-fit", className),
+		children: /* @__PURE__ */ jsxs("div", {
+			className: clsx("flex", showWeekNumbers && "w-full"),
+			children: [/* @__PURE__ */ jsxs("div", {
+				...leftCalendarAriaProps,
+				ref: leftRef,
+				className: clsx("flex flex-col items-center", showWeekNumbers && "w-full"),
+				children: [/* @__PURE__ */ jsx(CalendarSelectHeader, {
+					state: leftCalendarState,
+					isNextMonthDisabled: isNextDisabled,
+					isNextYearDisabled: isNextDisabled,
+					onNavigate: handleLeftNavigate,
+					maxDate: rightDate
+				}), /* @__PURE__ */ jsx(CalendarGrid, {
+					showWeekNumbers,
+					firstDayOfWeek: calendarProps.firstDayOfWeek,
+					state: leftCalendarState,
+					onApply,
+					shouldCloseOnSelect: false,
+					onDateSelection,
+					rangeSelection,
+					onDateHover,
+					hoverDate,
+					onKeyboardNavigation: handleLeftKeyboardNavigation,
+					className: clsx("h-64", showWeekNumbers ? "w-full md:w-[336px]!" : "w-[304px]!", isRangeSelectionDisabled && "pointer-events-none opacity-50"),
+					calendarSide: "left",
+					isSelectionDisabled: isRangeSelectionDisabled
+				})]
+			}), /* @__PURE__ */ jsxs("div", {
+				...rightCalendarAriaProps,
+				ref: rightRef,
+				className: "hidden flex-col items-center md:flex",
+				children: [/* @__PURE__ */ jsx(CalendarSelectHeader, {
+					state: rightCalendarState,
+					isPrevMonthDisabled: isPrevDisabled,
+					isPrevYearDisabled: isPrevDisabled,
+					onNavigate: handleRightNavigate,
+					minDate: leftDate
+				}), /* @__PURE__ */ jsx(CalendarGrid, {
+					showWeekNumbers,
+					firstDayOfWeek: calendarProps.firstDayOfWeek,
+					state: rightCalendarState,
+					onApply,
+					shouldCloseOnSelect: false,
+					onDateSelection,
+					rangeSelection,
+					onDateHover,
+					hoverDate,
+					onKeyboardNavigation: handleRightKeyboardNavigation,
+					className: clsx("h-64", showWeekNumbers ? "w-full md:w-[336px]!" : "w-[304px]!", isRangeSelectionDisabled && "pointer-events-none opacity-50"),
+					calendarSide: "right",
+					isSelectionDisabled: isRangeSelectionDisabled
+				})]
+			})]
+		})
+	});
+};
+//#endregion
+export { RangeCalendar };

package/dist/{RichTextEditor-qoxzWBFP.js → RichTextEditor-DpIQS8gk.js}

@@ -1,6 +1,6 @@
 import { t as createLucideIcon } from "./createLucideIcon-LcezOE4z.js";
 import { t as ChevronDown } from "./chevron-down-B4Pr8bD3.js";
-import { t as Select } from "./Select-BAlYMh4h.js";
+import { t as Select } from "./Select-DOrH8Q5O.js";
 import { t as clsx } from "./clsx-CnD0nOiA.js";
 import { t as UIOverrides } from "./uiOverrides.context-BTCH9y5a.js";
 import { t as IconSlot } from "./IconSlot-Cuvpj1gd.js";
@@ -19,7 +19,7 @@ import { n as FormFieldLabel, t as FormField } from "./FormField-DyqEbqx3.js";
 import { i as inputSideDefinition, o as useInputCva } from "./input.cva-AHLI_M3K.js";
 import "./i18n-BjNKHh_D.js";
 import { t as popoverDefinition } from "./popover.cva-Ciu9Ro5G.js";
-import { t as Input } from "./Input-BdCci6BF.js";
+import { t as Input } from "./Input-CPPDOg7b.js";
 import { Popover } from "./components/popover.js";
 import $ahdqC$react, { createContext, forwardRef, memo, useContext, useEffect, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -31,8 +31,8 @@ import { parseColor } from "react-stately/Color";
 import { useColorPickerState } from "react-stately/useColorPickerState";
 import { useLocalizedStringFormatter } from "react-aria/useLocalizedStringFormatter";
 import { useLabel } from "@react-aria/label";
-import { useTranslation } from "react-i18next";
 import { useFocusVisible, useFocusWithin, useHover } from "@react-aria/interactions";
+import { useTranslation } from "react-i18next";
 import { Color } from "@tiptap/extension-color";
 import { Highlight } from "@tiptap/extension-highlight";
 import { Link } from "@tiptap/extension-link";