@povio/ui 3.4.0-rc.19 → 3.4.0-rc.20

package/dist/components/buttons/Button/Button.d.ts

@@ -1,30 +0,0 @@
-import { LinkNavigationProps } from "../../link.js";
-import { ButtonVariantProps } from "./button.cva.js";
-import { ButtonContentVariantProps } from "../shared/buttonContent.cva.js";
-import { FC, ReactElement, ReactNode, Ref, SVGProps } from "react";
-import { ButtonProps, ToggleButtonProps } from "react-aria-components";
-//#region src/components/buttons/Button/Button.d.ts
-type ButtonIconProps<IconOnly extends boolean = false> = {
-  iconOnly?: IconOnly;
-} & (IconOnly extends true ? {
-  icon: FC<SVGProps<SVGSVGElement>> | ReactElement;
-} : {
-  icon?: FC<SVGProps<SVGSVGElement>> | ReactElement;
-});
-type ToggleButtonProps$1 = {
-  toggle?: false;
-} | ({
-  toggle: true;
-  isSelected?: boolean;
-} & ToggleButtonProps);
-type ButtonProps$1<IconOnly extends boolean = false> = ButtonVariantProps & ButtonContentVariantProps & ButtonProps & ButtonIconProps<IconOnly> & ToggleButtonProps$1 & {
-  children: ReactNode;
-  isLoading?: boolean;
-  link?: LinkNavigationProps;
-  noDisableWhenLoading?: boolean;
-  iconClassName?: string;
-  contentRef?: Ref<HTMLElement>;
-};
-declare const Button$1: <IconOnly extends boolean = false>({ icon: Icon, iconPosition, children, isLoading, className, link, iconClassName, noDisableWhenLoading, contentRef, ...props }: ButtonProps$1<IconOnly>) => import("react/jsx-runtime").JSX.Element;
-//#endregion
-export { Button$1 as Button, ButtonIconProps, ButtonProps$1 as ButtonProps };

package/dist/components/buttons/Button/Button.js

@@ -1,66 +0,0 @@
-import { UIOverrides } from "../../../config/uiOverrides.context.js";
-import { LinkContext } from "../../../config/link.context.js";
-import { ButtonContent } from "../shared/ButtonContent.js";
-import { UIConfig } from "../../../config/uiConfig.context.js";
-import { buttonContentDefinition, buttonDefinition, buttonIconSizeDefinition, buttonSizeDefinition, buttonTypography } from "./button.cva.js";
-import { clsx } from "clsx";
-import { Button, Link, ToggleButton } from "react-aria-components";
-import { jsx } from "react/jsx-runtime";
-//#region src/components/buttons/Button/Button.tsx
-const Button$1 = ({ icon: Icon, iconPosition, children, isLoading, className, link, iconClassName, noDisableWhenLoading, contentRef, ...props }) => {
-	const linkContext = LinkContext.useLinkContext();
-	const uiConfig = UIConfig.useConfig();
-	const { variant = uiConfig.button.variant, size = uiConfig.button.size } = props;
-	const buttonCva = UIOverrides.useCva("button.cva", buttonDefinition);
-	const buttonSizeCva = UIOverrides.useCva("button.sizeCva", buttonSizeDefinition);
-	const buttonContentCva = UIOverrides.useCva("button.contentCva", buttonContentDefinition);
-	const buttonIconSizeCva = UIOverrides.useCva("button.iconSize", buttonIconSizeDefinition);
-	const typographyMap = UIOverrides.useMapper("button.typography", buttonTypography);
-	const Component = (() => {
-		if (link) return linkContext?.LinkComponent ?? Link;
-		if (props.toggle != null) return ToggleButton;
-		return Button;
-	})();
-	if (link && !link.to && link.href) link.to = link.href;
-	return /* @__PURE__ */ jsx(Component, {
-		...props,
-		...link,
-		isDisabled: isLoading && !noDisableWhenLoading ? true : props.isDisabled,
-		className: clsx(buttonCva({
-			...props,
-			variant,
-			size,
-			className
-		}), buttonSizeCva({
-			...props,
-			variant,
-			size
-		}), buttonContentCva({
-			...props,
-			variant,
-			size,
-			iconPosition: !Icon ? "none" : iconPosition
-		})),
-		children: /* @__PURE__ */ jsx(ButtonContent, {
-			ref: contentRef,
-			isLoading,
-			icon: Icon,
-			content: children,
-			hideText: props.iconOnly,
-			iconPosition,
-			iconClassName: buttonIconSizeCva({
-				...props,
-				variant,
-				size,
-				className: iconClassName
-			}),
-			typography: typographyMap({
-				...props,
-				variant,
-				size
-			})
-		})
-	});
-};
-//#endregion
-export { Button$1 as Button };

package/dist/components/buttons/shared/buttonContent.cva.js

@@ -1,30 +0,0 @@
-import { cva } from "class-variance-authority";
-//#region src/components/buttons/shared/buttonContent.cva.ts
-const buttonContentLabel = cva("hyphens-auto md:truncate", {
-	variants: {
-		iconPosition: {
-			left: "",
-			right: "",
-			none: ""
-		},
-		hideText: {
-			true: "sr-only",
-			false: ""
-		}
-	},
-	compoundVariants: [{
-		iconPosition: "left",
-		hideText: false,
-		className: "mr-button-side-button-content"
-	}, {
-		iconPosition: "right",
-		hideText: false,
-		className: "ml-button-side-button-content"
-	}],
-	defaultVariants: {
-		iconPosition: "none",
-		hideText: false
-	}
-});
-//#endregion
-export { buttonContentLabel };

package/dist/components/inputs/Checkbox/CheckboxCheckmark.js

@@ -1,25 +0,0 @@
-import { UIOverrides } from "../../../config/uiOverrides.context.js";
-import { checkboxDefinition, checkboxIconDefinition } from "./checkbox.cva.js";
-import { Check, Minus } from "lucide-react";
-import { jsx, jsxs } from "react/jsx-runtime";
-//#region src/components/inputs/Checkbox/CheckboxCheckmark.tsx
-const CheckboxCheckmark = ({ variant, className, selectedIcon: SelectedIcon = Check, indeterminateIcon: IndeterminateIcon = Minus, ...props }) => {
-	const checkboxCva = UIOverrides.useCva("checkbox.cva", checkboxDefinition);
-	const checkboxIconCva = UIOverrides.useCva("checkbox.iconCva", checkboxIconDefinition);
-	return /* @__PURE__ */ jsxs("div", {
-		className: checkboxCva({
-			variant,
-			...props,
-			className
-		}),
-		children: [/* @__PURE__ */ jsx(SelectedIcon, { className: checkboxIconCva({
-			...props,
-			iconVariant: "selected"
-		}) }), /* @__PURE__ */ jsx(IndeterminateIcon, { className: checkboxIconCva({
-			...props,
-			iconVariant: "indeterminate"
-		}) })]
-	});
-};
-//#endregion
-export { CheckboxCheckmark };

package/dist/components/inputs/DateTime/shared/Calendar.js

@@ -1,180 +0,0 @@
-import { CalendarGrid } from "./CalendarGrid.js";
-import { CalendarHeader } from "./CalendarHeader.js";
-import { MonthPicker } from "./MonthPicker.js";
-import { TimePickerForm } from "./TimePickerForm.js";
-import { YearPicker } from "./YearPicker.js";
-import { clsx } from "clsx";
-import { useCallback, useEffect, useMemo, useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useCalendar } from "@react-aria/calendar";
-//#region src/components/inputs/DateTime/shared/Calendar.tsx
-const Calendar = ({ className, includesTime, datePickerState, hourCycle, isTimeOptional, onApply, onMonthYearChange, onMonthYearCommit, selectedDate, granularity = "day", setDateValueOnDateSelection = false, onDateSelectionChange, ...props }) => {
-	const [toggleState, setToggleState] = useState(() => {
-		if (granularity === "year") return "year";
-		if (granularity === "month") return "month";
-		return null;
-	});
-	const { calendarProps, prevButtonProps, nextButtonProps } = useCalendar(props.calendarProps, props.state);
-	useEffect(() => {
-		if (granularity === "year" && toggleState !== "year") {
-			setToggleState("year");
-			return;
-		}
-		if (granularity === "month" && toggleState === null) {
-			setToggleState("month");
-			return;
-		}
-		if (granularity === "month" && toggleState === "time") {
-			setToggleState("month");
-			return;
-		}
-		if (granularity === "day" && toggleState === "time" && !includesTime) setToggleState(null);
-	}, [
-		granularity,
-		toggleState,
-		includesTime
-	]);
-	const onMonthSelectionChange = () => {
-		if (granularity === "day") {
-			setToggleState(null);
-			return;
-		}
-		setToggleState("month");
-	};
-	const onYearSelectionChange = () => {
-		if (granularity === "day") {
-			setToggleState(null);
-			return;
-		}
-		if (granularity === "month") {
-			setToggleState("month");
-			return;
-		}
-		setToggleState("year");
-	};
-	const handleHeaderMonthNavigation = useCallback((months) => {
-		if (toggleState || !onMonthYearChange) return;
-		const focusedDate = props.state.focusedDate;
-		if (months === -1) {
-			onMonthYearChange(focusedDate.subtract({ months: 1 }));
-			return;
-		}
-		onMonthYearChange(focusedDate.add({ months: 1 }));
-	}, [
-		toggleState,
-		onMonthYearChange,
-		props.state.focusedDate
-	]);
-	const headerPrevButtonProps = useMemo(() => ({
-		...prevButtonProps,
-		onPress: (event) => {
-			prevButtonProps.onPress?.(event);
-			handleHeaderMonthNavigation(-1);
-		}
-	}), [prevButtonProps, handleHeaderMonthNavigation]);
-	const headerNextButtonProps = useMemo(() => ({
-		...nextButtonProps,
-		onPress: (event) => {
-			nextButtonProps.onPress?.(event);
-			handleHeaderMonthNavigation(1);
-		}
-	}), [nextButtonProps, handleHeaderMonthNavigation]);
-	const onDateSelection = useCallback((date) => {
-		if (!includesTime || !setDateValueOnDateSelection) return;
-		datePickerState.setDateValue(date);
-	}, [
-		includesTime,
-		datePickerState,
-		setDateValueOnDateSelection
-	]);
-	const handleDateChange = (selectedDate) => {
-		const resolvedDate = selectedDate ?? props.state.focusedDate;
-		if (includesTime && resolvedDate && setDateValueOnDateSelection) {
-			datePickerState.setDateValue(resolvedDate);
-			onDateSelectionChange?.(resolvedDate);
-		}
-		if (includesTime && toggleState !== "time") {
-			if (!setDateValueOnDateSelection && resolvedDate) {
-				datePickerState.setDateValue(resolvedDate);
-				onDateSelectionChange?.(resolvedDate);
-			}
-			setToggleState("time");
-			return;
-		}
-		if (datePickerState?.value && !setDateValueOnDateSelection) onApply(resolvedDate);
-	};
-	const getContent = () => {
-		if (!toggleState) {
-			if (granularity === "month") return /* @__PURE__ */ jsx(MonthPicker, {
-				state: props.state,
-				onSelectionChange: onMonthSelectionChange,
-				onDateChange: onMonthYearChange,
-				onCommit: onMonthYearCommit,
-				selectedDate
-			});
-			if (granularity === "year") return /* @__PURE__ */ jsx(YearPicker, {
-				state: props.state,
-				onSelectionChange: onYearSelectionChange,
-				onDateChange: onMonthYearChange,
-				onCommit: onMonthYearCommit,
-				selectedDate
-			});
-			return /* @__PURE__ */ jsx(CalendarGrid, {
-				state: props.state,
-				onApply: handleDateChange,
-				onDoubleClickApply: !includesTime ? onApply : void 0,
-				onDateSelection,
-				shouldApplyOnDateSelection: !includesTime || setDateValueOnDateSelection
-			});
-		}
-		if (toggleState === "month") {
-			if (granularity === "year") return /* @__PURE__ */ jsx(YearPicker, {
-				state: props.state,
-				onSelectionChange: onYearSelectionChange,
-				onDateChange: onMonthYearChange,
-				onCommit: onMonthYearCommit,
-				selectedDate
-			});
-			return /* @__PURE__ */ jsx(MonthPicker, {
-				state: props.state,
-				onSelectionChange: onMonthSelectionChange,
-				onDateChange: onMonthYearChange,
-				onCommit: onMonthYearCommit,
-				selectedDate
-			});
-		}
-		if (toggleState === "year") return /* @__PURE__ */ jsx(YearPicker, {
-			state: props.state,
-			onSelectionChange: onYearSelectionChange,
-			onDateChange: onMonthYearChange,
-			onCommit: onMonthYearCommit,
-			selectedDate
-		});
-		if (toggleState === "time" && includesTime) return /* @__PURE__ */ jsx("div", {
-			className: "flex h-72 w-80 items-center justify-center",
-			children: /* @__PURE__ */ jsx(TimePickerForm, { datePickerState })
-		});
-		return null;
-	};
-	return /* @__PURE__ */ jsxs("div", {
-		...calendarProps,
-		className: clsx("flex min-h-0 w-full flex-col items-center", className),
-		children: [/* @__PURE__ */ jsx(CalendarHeader, {
-			calendarState: props.state,
-			datePickerState,
-			prevButtonProps: headerPrevButtonProps,
-			nextButtonProps: headerNextButtonProps,
-			includesTime,
-			isTimeOptional,
-			hourCycle,
-			granularity,
-			toggleState,
-			setToggleState
-		}), /* @__PURE__ */ jsx("div", {
-			className: clsx("flex min-h-0 w-full flex-1 flex-col items-center", toggleState !== "year" && "pb-8 md:pb-0"),
-			children: getContent()
-		})]
-	});
-};
-//#endregion
-export { Calendar };

package/dist/components/inputs/DateTime/shared/CalendarCell.js

@@ -1,145 +0,0 @@
-import { Typography } from "../../../text/Typography/Typography.js";
-import { clsx } from "clsx";
-import { useCallback, useMemo, useRef } from "react";
-import { jsx } from "react/jsx-runtime";
-import { mergeProps } from "@react-aria/utils";
-import { isSameDay } from "@internationalized/date";
-import { useCalendarCell } from "@react-aria/calendar";
-import { useFocusRing } from "@react-aria/focus";
-//#region src/components/inputs/DateTime/shared/CalendarCell.tsx
-const isRange = (state) => {
-	return "highlightedRange" in state;
-};
-const CalendarCell = ({ state, onApply, onDoubleClickApply, shouldApplyOnDateSelection = true, shouldCloseOnSelect = true, onDateSelection, onDateHover, rangeSelection, hoverDate, onKeyboardNavigation, ...props }) => {
-	const ref = useRef(null);
-	const { cellProps, buttonProps, formattedDate, isSelected, isDisabled, isOutsideVisibleRange, isFocused } = useCalendarCell(props, state, ref);
-	const { focusProps } = useFocusRing();
-	const onClick = useCallback((event) => {
-		buttonProps.onClick?.(event);
-		if (onDateSelection) onDateSelection(props.date);
-		if (shouldCloseOnSelect && !isDisabled && (shouldApplyOnDateSelection || isSelected)) onApply?.(props.date);
-	}, [
-		buttonProps,
-		onDateSelection,
-		props.date,
-		isDisabled,
-		shouldApplyOnDateSelection,
-		isSelected,
-		shouldCloseOnSelect,
-		onApply
-	]);
-	const onDoubleClick = useCallback((event) => {
-		if (isDisabled) return;
-		event.preventDefault();
-		onDoubleClickApply?.(props.date);
-	}, [
-		isDisabled,
-		onDoubleClickApply,
-		props.date
-	]);
-	const selectionState = useMemo(() => {
-		let isSelectionStart = false;
-		let isSelectionEnd = false;
-		let isSelectedCell = false;
-		let isInRange = false;
-		let isHoverRange = false;
-		let isSelectingMode = false;
-		if (rangeSelection?.start) {
-			isSelectionStart = isSameDay(props.date, rangeSelection.start);
-			isSelectionEnd = rangeSelection.end ? isSameDay(props.date, rangeSelection.end) : false;
-			isSelectedCell = isSelectionStart || isSelectionEnd;
-			isSelectingMode = rangeSelection.isSelecting && !rangeSelection.end;
-			if (rangeSelection.start && rangeSelection.end) {
-				const dateValue = props.date;
-				const isAfterStart = dateValue.compare(rangeSelection.start) > 0;
-				const isBeforeEnd = dateValue.compare(rangeSelection.end) < 0;
-				isInRange = isAfterStart && isBeforeEnd;
-			}
-			if (rangeSelection.isSelecting && rangeSelection.start && hoverDate && !rangeSelection.end) {
-				const dateValue = props.date;
-				const { start } = rangeSelection;
-				const end = hoverDate;
-				const earlierDate = start.compare(end) <= 0 ? start : end;
-				const laterDate = start.compare(end) <= 0 ? end : start;
-				const isAfterStart = dateValue.compare(earlierDate) > 0;
-				const isBeforeEnd = dateValue.compare(laterDate) < 0;
-				isHoverRange = isAfterStart && isBeforeEnd;
-			}
-		} else {
-			isSelectionStart = isRange(state) && state.highlightedRange ? isSameDay(props.date, state.highlightedRange.start) : isSelected;
-			isSelectionEnd = isRange(state) && state.highlightedRange ? isSameDay(props.date, state.highlightedRange.end) : isSelected;
-			isSelectedCell = isSelectionStart || isSelectionEnd || !isRange(state) && isSelected;
-			isInRange = isRange(state) && isSelected && !isSelectionStart && !isSelectionEnd;
-			if (isRange(state) && state.highlightedRange && !isSelected) {
-				const dateValue = props.date;
-				const isAfterStart = dateValue.compare(state.highlightedRange.start) > 0;
-				const isBeforeEnd = dateValue.compare(state.highlightedRange.end) < 0;
-				isHoverRange = isAfterStart && isBeforeEnd;
-			}
-		}
-		return {
-			isSelectionStart,
-			isSelectionEnd,
-			isSelectedCell,
-			isInRange,
-			isHoverRange,
-			isSelectingMode
-		};
-	}, [
-		props.date,
-		rangeSelection,
-		state,
-		isSelected,
-		hoverDate
-	]);
-	const handleEvent = (event, eventHandler) => {
-		if (isOutsideVisibleRange) {
-			state.selectDate(props.date);
-			state.setFocusedDate(props.date);
-		}
-		eventHandler?.(event);
-		if (isSelected && shouldCloseOnSelect) onApply?.(props.date);
-	};
-	const onMouseEnter = useCallback(() => {
-		if (onDateHover && selectionState.isSelectingMode) onDateHover(props.date);
-	}, [
-		onDateHover,
-		selectionState.isSelectingMode,
-		props.date
-	]);
-	const onMouseLeave = useCallback(() => {
-		if (onDateHover && selectionState.isSelectingMode) onDateHover(null);
-	}, [onDateHover, selectionState.isSelectingMode]);
-	const cellClassName = useMemo(() => {
-		const { isSelectedCell, isInRange, isHoverRange, isSelectingMode, isSelectionStart, isSelectionEnd } = selectionState;
-		return clsx("mx-auto flex h-10 w-full max-w-10 items-center justify-center rounded-button-rounding-m p-2", "focus:outline-none focus-visible:outline-1 focus-visible:outline-interactive-contained-primary-focus focus-visible:outline-offset-1", "border border-transparent border-solid", !isSelectedCell && !isOutsideVisibleRange && "bg-elevation-fill-default-1 text-interactive-text-secondary-idle", !isSelectedCell && isOutsideVisibleRange && "bg-elevation-fill-default-1 text-interactive-text-secondary-disabled", isSelectedCell && !isOutsideVisibleRange && "bg-interactive-contained-primary-idle text-interactive-contained-primary-on-idle", isSelectedCell && !isOutsideVisibleRange && rangeSelection && !rangeSelection.isSelecting && isSelectionStart && !isSelectionEnd && "rounded-r-none", isSelectedCell && !isOutsideVisibleRange && rangeSelection && !rangeSelection.isSelecting && isSelectionEnd && !isSelectionStart && "rounded-l-none", isDisabled && !isOutsideVisibleRange && "cursor-default", isDisabled && "opacity-20", !isSelectedCell && !isInRange && !isHoverRange && !isSelectingMode && !isDisabled && !isOutsideVisibleRange && "[@media(pointer:fine)]:hover:border-elevation-outline-default-1 [@media(pointer:fine)]:hover:text-interactive-text-secondary-hover", isInRange && !isOutsideVisibleRange && "!rounded-none !bg-elevation-fill-default-2 text-interactive-text-secondary-hover", isHoverRange && !isOutsideVisibleRange && "!rounded-none !bg-elevation-fill-default-2 text-interactive-text-secondary-hover", !isInRange && !isSelectedCell && isSelectingMode && "hover:bg-interactive-contained-primary-idle hover:text-interactive-text-primary-idle-inverted", isSelectingMode && !isSelectedCell && !isInRange && !isHoverRange && !isDisabled && !isOutsideVisibleRange && "transition-all duration-75 hover:border-elevation-outline-default-1", isFocused && !isSelectedCell && !isDisabled && !isOutsideVisibleRange && "ring-2 ring-inset ring-interactive-contained-primary-focus");
-	}, [
-		selectionState,
-		isOutsideVisibleRange,
-		rangeSelection,
-		isDisabled,
-		isFocused
-	]);
-	return /* @__PURE__ */ jsx("td", {
-		...cellProps,
-		children: /* @__PURE__ */ jsx("div", {
-			ref,
-			...mergeProps(buttonProps, focusProps),
-			"aria-disabled": void 0,
-			onMouseEnter,
-			onMouseLeave,
-			className: cellClassName,
-			onClick: (e) => handleEvent(e, onClick),
-			onDoubleClick,
-			onKeyDown: (e) => handleEvent(e, () => onKeyboardNavigation?.(e, props.date)),
-			children: /* @__PURE__ */ jsx(Typography, {
-				as: "span",
-				size: "label-2",
-				className: "block w-6 overflow-hidden text-ellipsis text-center",
-				children: formattedDate
-			})
-		})
-	});
-};
-//#endregion
-export { CalendarCell };

package/dist/components/inputs/DateTime/shared/CalendarGrid.js

@@ -1,55 +0,0 @@
-import { Typography } from "../../../text/Typography/Typography.js";
-import { CalendarCell } from "./CalendarCell.js";
-import { clsx } from "clsx";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useCalendarGrid } from "@react-aria/calendar";
-//#region src/components/inputs/DateTime/shared/CalendarGrid.tsx
-const WEEK_INDICES = [
-	0,
-	1,
-	2,
-	3,
-	4,
-	5
-];
-const NO_CALENDAR_OFFSET = {};
-const CalendarGrid = ({ state, onApply, onDoubleClickApply, shouldApplyOnDateSelection, shouldCloseOnSelect, offset = NO_CALENDAR_OFFSET, onDateSelection, onDateHover, rangeSelection, hoverDate, onKeyboardNavigation, className, calendarSide, ...props }) => {
-	const { gridProps, headerProps, weekDays } = useCalendarGrid({
-		...props,
-		weekdayStyle: "short"
-	}, state);
-	const startDate = state.visibleRange.start.add(offset);
-	const handleDateSelection = (date) => {
-		onDateSelection?.(date, calendarSide);
-	};
-	return /* @__PURE__ */ jsx("div", {
-		className: clsx("h-72 w-full px-3 py-1 md:w-80", className),
-		children: /* @__PURE__ */ jsxs("table", {
-			...gridProps,
-			cellPadding: "0",
-			className: "w-full",
-			children: [/* @__PURE__ */ jsx("thead", {
-				...headerProps,
-				children: /* @__PURE__ */ jsx("tr", { children: weekDays.map((day) => /* @__PURE__ */ jsx("th", { children: /* @__PURE__ */ jsx(Typography, {
-					size: "label-2",
-					className: "bg-elevation-fill-default-1 py-2 text-interactive-text-secondary-idle",
-					children: day.substring(0, 2)
-				}) }, day)) })
-			}), /* @__PURE__ */ jsx("tbody", { children: WEEK_INDICES.map((weekIndex) => /* @__PURE__ */ jsx("tr", { children: state.getDatesInWeek(weekIndex, startDate).map((date, i) => date ? /* @__PURE__ */ jsx(CalendarCell, {
-				state,
-				date,
-				onApply,
-				onDoubleClickApply,
-				shouldApplyOnDateSelection,
-				shouldCloseOnSelect,
-				onDateSelection: handleDateSelection,
-				onDateHover,
-				rangeSelection,
-				hoverDate,
-				onKeyboardNavigation
-			}, i) : /* @__PURE__ */ jsx("td", {}, i)) }, weekIndex)) })]
-		})
-	});
-};
-//#endregion
-export { CalendarGrid };

package/dist/components/inputs/DateTime/shared/CalendarHeader.js

@@ -1,119 +0,0 @@
-import { PillButton } from "../../../pill-button.js";
-import { ChevronDown, ChevronLeft, ChevronRight, ChevronUp } from "lucide-react";
-import { clsx } from "clsx";
-import { Button, ToggleButtonGroup } from "react-aria-components";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { CalendarDateTime, Time } from "@internationalized/date";
-import { useDateFormatter } from "@react-aria/i18n";
-//#region src/components/inputs/DateTime/shared/CalendarHeader.tsx
-const HourCycle = {
-	12: "h12",
-	24: "h23"
-};
-const getTimeFormatterDate = (timeValue, timeZone) => {
-	return new CalendarDateTime(2e3, 1, 1, timeValue.hour, timeValue.minute).toDate(timeZone);
-};
-const CalendarHeader = ({ calendarState, datePickerState, prevButtonProps, nextButtonProps, includesTime, isTimeOptional, hourCycle, granularity = "day", toggleState, setToggleState }) => {
-	const formatter = useDateFormatter({
-		month: "long",
-		timeZone: calendarState.timeZone
-	});
-	const timeFormatter = useDateFormatter({
-		timeStyle: "short",
-		timeZone: calendarState.timeZone,
-		hourCycle: hourCycle ? HourCycle[hourCycle] : void 0
-	});
-	const year = calendarState.focusedDate.year.toString();
-	const month = formatter.format(calendarState.focusedDate.toDate(calendarState.timeZone));
-	const hasTimeValue = !!datePickerState?.timeValue;
-	let timeLabel = "--:--";
-	if (isTimeOptional || hasTimeValue) {
-		const timeValue = datePickerState?.timeValue || new Time(0, 0);
-		const date = getTimeFormatterDate(timeValue, calendarState.timeZone);
-		timeLabel = timeFormatter.format(date);
-	}
-	return /* @__PURE__ */ jsxs("div", {
-		className: "inline-flex w-full items-center justify-between border-elevation-outline-default-1 border-b border-solid px-1",
-		children: [
-			/* @__PURE__ */ jsx("div", {
-				className: "inline-flex h-12 items-center p-3",
-				children: /* @__PURE__ */ jsx(Button, {
-					...prevButtonProps,
-					isDisabled: !!toggleState,
-					className: clsx("shrink-0 focus-visible:outline-interactive-contained-secondary-focus", !!toggleState && "opacity-0"),
-					children: /* @__PURE__ */ jsx(ChevronLeft, { className: "size-6 text-interactive-text-secondary-idle" })
-				})
-			}),
-			/* @__PURE__ */ jsxs(ToggleButtonGroup, {
-				className: "flex gap-2",
-				children: [
-					granularity !== "year" && /* @__PURE__ */ jsx(PillButton, {
-						color: "secondary",
-						variant: "subtle",
-						iconPosition: "right",
-						icon: toggleState === "month" ? ChevronUp : ChevronDown,
-						toggle: true,
-						isSelected: toggleState === "month",
-						onChange: (isSelected) => {
-							if (!isSelected) {
-								if (granularity === "day") {
-									setToggleState(null);
-									return;
-								}
-								setToggleState("month");
-								return;
-							}
-							setToggleState("month");
-						},
-						children: month
-					}),
-					/* @__PURE__ */ jsx(PillButton, {
-						color: "secondary",
-						variant: "subtle",
-						iconPosition: "right",
-						icon: toggleState === "year" ? ChevronUp : ChevronDown,
-						toggle: true,
-						isSelected: toggleState === "year",
-						onChange: (isSelected) => {
-							if (isSelected) {
-								setToggleState("year");
-								return;
-							}
-							if (granularity === "day") {
-								setToggleState(null);
-								return;
-							}
-							if (granularity === "month") {
-								setToggleState("month");
-								return;
-							}
-							setToggleState("year");
-						},
-						children: year
-					}),
-					includesTime && /* @__PURE__ */ jsx(PillButton, {
-						color: "secondary",
-						variant: "subtle",
-						iconPosition: "right",
-						icon: toggleState === "time" ? ChevronUp : ChevronDown,
-						toggle: true,
-						isSelected: toggleState === "time",
-						onChange: (isSelected) => setToggleState(isSelected ? "time" : null),
-						children: timeLabel
-					})
-				]
-			}),
-			/* @__PURE__ */ jsx("div", {
-				className: "inline-flex h-12 items-center p-3",
-				children: /* @__PURE__ */ jsx(Button, {
-					...nextButtonProps,
-					isDisabled: !!toggleState,
-					className: clsx("shrink-0 focus-visible:outline-interactive-contained-secondary-focus", !!toggleState && "opacity-0"),
-					children: /* @__PURE__ */ jsx(ChevronRight, { className: "size-6 text-interactive-text-secondary-idle" })
-				})
-			})
-		]
-	});
-};
-//#endregion
-export { CalendarHeader };