@povio/ui 2.1.14 → 2.1.16

package/dist/Calendar.js

@@ -0,0 +1,15 @@
+import { jsx } from "react/jsx-runtime";
+const CalendarIcon = (props) => /* @__PURE__ */ jsx("svg", {
+	xmlns: "http://www.w3.org/2000/svg",
+	fill: "none",
+	viewBox: "0 0 24 24",
+	className: "fill-current",
+	...props,
+	children: /* @__PURE__ */ jsx("path", {
+		fill: "currentColor",
+		fillRule: "evenodd",
+		d: "M16.5 2.91a.905.905 0 0 0-.9-.91c-.497 0-.9.407-.9.91v.908H9.3V2.91A.905.905 0 0 0 8.4 2c-.497 0-.9.407-.9.91v.908H5.7C4.209 3.818 3 5.04 3 6.545v12.728C3 20.779 4.209 22 5.7 22h12.6c1.491 0 2.7-1.221 2.7-2.727V6.545c0-1.506-1.209-2.727-2.7-2.727h-1.8zm2.7 6.363V6.545a.905.905 0 0 0-.9-.909h-1.8v.91c0 .502-.403.909-.9.909a.905.905 0 0 1-.9-.91v-.909H9.3v.91c0 .502-.403.909-.9.909a.905.905 0 0 1-.9-.91v-.909H5.7c-.497 0-.9.407-.9.91v2.727zM4.8 11.09h14.4v8.182c0 .502-.403.909-.9.909H5.7a.905.905 0 0 1-.9-.91z",
+		clipRule: "evenodd"
+	})
+});
+export { CalendarIcon };

package/dist/Calendar2.js

@@ -0,0 +1,54 @@
+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 { jsx, jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { useState } from "react";
+import { useCalendar } from "@react-aria/calendar";
+const Calendar = ({ className, includesTime, datePickerState, hourCycle, onApply,...props }) => {
+	const [toggleState, setToggleState] = useState(null);
+	const { calendarProps, prevButtonProps, nextButtonProps } = useCalendar(props.calendarProps, props.state);
+	const handleDateChange = () => {
+		if (includesTime && !datePickerState.value) setToggleState("time");
+		else onApply();
+	};
+	const getContent = () => {
+		if (!toggleState) return /* @__PURE__ */ jsx(CalendarGrid, {
+			state: props.state,
+			onApply: handleDateChange
+		});
+		if (toggleState === "month") return /* @__PURE__ */ jsx(MonthPicker, {
+			state: props.state,
+			onSelectionChange: () => setToggleState(null)
+		});
+		if (toggleState === "year") return /* @__PURE__ */ jsx(YearPicker, {
+			state: props.state,
+			onSelectionChange: () => setToggleState(null)
+		});
+		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,
+			nextButtonProps,
+			includesTime,
+			hourCycle,
+			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()
+		})]
+	});
+};
+export { Calendar };

package/dist/CalendarCell.js

@@ -0,0 +1,130 @@
+import { Typography } from "./Typography.js";
+import { jsx } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { useCallback, useMemo, useRef } from "react";
+import { mergeProps } from "@react-aria/utils";
+import { isSameDay } from "@internationalized/date";
+import { useCalendarCell } from "@react-aria/calendar";
+import { useFocusRing } from "@react-aria/focus";
+var isRange = (state) => {
+	return "highlightedRange" in state;
+};
+const CalendarCell = ({ state, onApply, shouldCloseOnSelect = true, onDateSelection, onDateHover, rangeSelection, hoverDate, onKeyboardNavigation,...props }) => {
+	const ref = useRef(null);
+	const { cellProps, buttonProps, formattedDate, isSelected, isDisabled, isOutsideVisibleRange } = useCalendarCell(props, state, ref);
+	const { focusProps } = useFocusRing();
+	const onClick = useCallback((event) => {
+		buttonProps.onClick?.(event);
+		if (onDateSelection) onDateSelection(props.date);
+		if (isSelected && shouldCloseOnSelect) onApply?.();
+	}, [
+		buttonProps,
+		onDateSelection,
+		props.date,
+		isSelected,
+		shouldCloseOnSelect,
+		onApply
+	]);
+	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?.();
+	};
+	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");
+	}, [
+		selectionState,
+		isOutsideVisibleRange,
+		rangeSelection,
+		isDisabled
+	]);
+	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),
+			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
+			})
+		})
+	});
+};
+export { CalendarCell };

package/dist/CalendarGrid.js

@@ -0,0 +1,50 @@
+import { Typography } from "./Typography.js";
+import { CalendarCell } from "./CalendarCell.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { useCalendarGrid } from "@react-aria/calendar";
+var WEEK_INDICES = [
+	0,
+	1,
+	2,
+	3,
+	4,
+	5
+];
+const CalendarGrid = ({ state, onApply, shouldCloseOnSelect, 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,
+				shouldCloseOnSelect,
+				onDateSelection: handleDateSelection,
+				onDateHover,
+				rangeSelection,
+				hoverDate,
+				onKeyboardNavigation
+			}, i) : /* @__PURE__ */ jsx("td", {}, i)) }, weekIndex)) })]
+		})
+	});
+};
+export { CalendarGrid };

package/dist/CalendarHeader.js

@@ -0,0 +1,75 @@
+import { ChevronLeftIcon } from "./ChevronLeft.js";
+import { ChevronRightIcon } from "./ChevronRight.js";
+import { PillButton } from "./PillButton.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Button, ToggleButtonGroup } from "react-aria-components";
+import { Time } from "@internationalized/date";
+import { useDateFormatter } from "@react-aria/i18n";
+var HourCycle = {
+	12: "h12",
+	24: "h23"
+};
+const CalendarHeader = ({ calendarState, datePickerState, prevButtonProps, nextButtonProps, includesTime, hourCycle, 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 timeValue = datePickerState?.timeValue || new Time();
+	const date = /* @__PURE__ */ new Date();
+	date.setHours(timeValue.hour, timeValue.minute);
+	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: !toggleState && /* @__PURE__ */ jsx(Button, {
+					...prevButtonProps,
+					className: "shrink-0 focus-visible:outline-interactive-contained-secondary-focus",
+					children: /* @__PURE__ */ jsx(ChevronLeftIcon, { className: "size-6 text-interactive-text-secondary-idle" })
+				})
+			}),
+			/* @__PURE__ */ jsxs(ToggleButtonGroup, {
+				className: "flex gap-2",
+				children: [
+					/* @__PURE__ */ jsx(PillButton, {
+						color: "secondary",
+						toggle: true,
+						isSelected: toggleState === "month",
+						onChange: (isSelected) => setToggleState(isSelected ? "month" : null),
+						children: month
+					}),
+					/* @__PURE__ */ jsx(PillButton, {
+						color: "secondary",
+						toggle: true,
+						isSelected: toggleState === "year",
+						onChange: (isSelected) => setToggleState(isSelected ? "year" : null),
+						children: year
+					}),
+					includesTime && /* @__PURE__ */ jsx(PillButton, {
+						color: "secondary",
+						toggle: true,
+						isSelected: toggleState === "time",
+						onChange: (isSelected) => setToggleState(isSelected ? "time" : null),
+						children: timeFormatter.format(date)
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "inline-flex h-12 items-center p-3",
+				children: !toggleState && /* @__PURE__ */ jsx(Button, {
+					...nextButtonProps,
+					className: "shrink-0 focus-visible:outline-interactive-contained-secondary-focus",
+					children: /* @__PURE__ */ jsx(ChevronRightIcon, { className: "size-6 text-interactive-text-secondary-idle" })
+				})
+			})
+		]
+	});
+};
+export { CalendarHeader };

package/dist/CalendarSelectHeader.js

@@ -0,0 +1,170 @@
+import { ArrowDropDownIcon } from "./ArrowDropDown.js";
+import { ChevronLeftIcon } from "./ChevronLeft.js";
+import { ChevronRightIcon } from "./ChevronRight.js";
+import { ChevronsLeftIcon } from "./ChevronsLeft.js";
+import { ChevronsRightIcon } from "./ChevronsRight.js";
+import { InlineIconButton } from "./InlineIconButton.js";
+import { PillButton } from "./PillButton.js";
+import { Select } from "./Select.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { useDateFormatter } from "@react-aria/i18n";
+const CalendarSelectHeader = ({ state, isPrevMonthDisabled, isPrevYearDisabled, isNextMonthDisabled, isNextYearDisabled, offset = { months: 0 }, onNavigate, maxDate, minDate }) => {
+	const displayDate = state.visibleRange.start.add(offset);
+	const currentMonth = displayDate.month - 1;
+	const currentYear = displayDate.year;
+	const formatter = 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 border-elevation-outline-default-1 border-b border-solid px-3 py-2-5",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center",
+				children: [/* @__PURE__ */ jsx(InlineIconButton, {
+					color: "secondary",
+					isDisabled: isPrevYearDisabled,
+					onClick: handlePrevYear,
+					icon: ChevronsLeftIcon,
+					label: "Previous year"
+				}), /* @__PURE__ */ jsx(InlineIconButton, {
+					color: "secondary",
+					isDisabled: isPrevMonthDisabled,
+					onClick: handlePrevMonth,
+					icon: ChevronLeftIcon,
+					label: "Previous month"
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex gap-2",
+				children: [/* @__PURE__ */ jsx(Select, {
+					label: "Month",
+					hideLabel: true,
+					customTrigger: /* @__PURE__ */ jsx(PillButton, {
+						color: "secondary",
+						iconPosition: "right",
+						icon: ArrowDropDownIcon,
+						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(PillButton, {
+						color: "secondary",
+						iconPosition: "right",
+						icon: ArrowDropDownIcon,
+						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(InlineIconButton, {
+					color: "secondary",
+					isDisabled: isNextMonthDisabled,
+					onClick: handleNextMonth,
+					icon: ChevronRightIcon,
+					label: "Next month"
+				}), /* @__PURE__ */ jsx(InlineIconButton, {
+					color: "secondary",
+					isDisabled: isNextYearDisabled,
+					onClick: handleNextYear,
+					icon: ChevronsRightIcon,
+					label: "Next year"
+				})]
+			})
+		]
+	});
+};
+export { CalendarSelectHeader };

package/dist/Can.js

@@ -0,0 +1,13 @@
+import { AbilityContext } from "./ability.context.js";
+import { jsx } from "react/jsx-runtime";
+import { createContextualCan } from "@casl/react";
+var ContextualCan = createContextualCan(AbilityContext.Consumer);
+const Can = ({ use,...props }) => {
+	const [action, subject] = use;
+	return /* @__PURE__ */ jsx(ContextualCan, {
+		...props,
+		do: action,
+		on: subject
+	});
+};
+export { Can };

package/dist/CellText.js

@@ -0,0 +1,13 @@
+import { Typography } from "./Typography.js";
+import { jsx } from "react/jsx-runtime";
+import { clsx } from "clsx";
+const CellText = ({ children, style, className }) => /* @__PURE__ */ jsx(Typography, {
+	variant: "default",
+	size: "label-1",
+	as: "span",
+	className: clsx("block overflow-hidden text-ellipsis text-text-default-2", className),
+	style,
+	"data-rac": true,
+	children
+});
+export { CellText };

package/dist/Check.js

@@ -0,0 +1,15 @@
+import { jsx } from "react/jsx-runtime";
+const CheckIcon = (props) => /* @__PURE__ */ jsx("svg", {
+	xmlns: "http://www.w3.org/2000/svg",
+	fill: "none",
+	viewBox: "0 0 24 24",
+	className: "fill-current",
+	...props,
+	children: /* @__PURE__ */ jsx("path", {
+		fill: "currentColor",
+		fillRule: "evenodd",
+		d: "M20.707 5.293a1 1 0 0 1 0 1.414l-11 11a1 1 0 0 1-1.414 0l-5-5a1 1 0 1 1 1.414-1.414L9 15.586 19.293 5.293a1 1 0 0 1 1.414 0",
+		clipRule: "evenodd"
+	})
+});
+export { CheckIcon };

package/dist/CheckCircle.js

@@ -0,0 +1,13 @@
+import { jsx } from "react/jsx-runtime";
+const CheckCircleIcon = (props) => /* @__PURE__ */ jsx("svg", {
+	xmlns: "http://www.w3.org/2000/svg",
+	fill: "none",
+	viewBox: "0 0 24 24",
+	className: "fill-current",
+	...props,
+	children: /* @__PURE__ */ jsx("path", {
+		fill: "currentColor",
+		d: "m10.58 14.146-2.322-2.323a.73.73 0 0 0-.522-.213.7.7 0 0 0-.532.213.72.72 0 0 0-.217.527q0 .31.217.527l2.744 2.744q.27.27.633.271.36 0 .633-.27l5.563-5.564a.73.73 0 0 0 .212-.522.7.7 0 0 0-.212-.532.72.72 0 0 0-.527-.217.72.72 0 0 0-.527.217zm1.422 7.354a9.3 9.3 0 0 1-3.706-.748 9.6 9.6 0 0 1-3.016-2.03 9.6 9.6 0 0 1-2.032-3.016 9.25 9.25 0 0 1-.748-3.704q0-1.972.748-3.706a9.6 9.6 0 0 1 2.03-3.016 9.6 9.6 0 0 1 3.016-2.032 9.25 9.25 0 0 1 3.704-.748q1.972 0 3.706.748a9.6 9.6 0 0 1 3.017 2.03 9.6 9.6 0 0 1 2.03 3.016 9.25 9.25 0 0 1 .749 3.704q0 1.972-.748 3.706a9.6 9.6 0 0 1-2.03 3.017 9.6 9.6 0 0 1-3.016 2.03 9.25 9.25 0 0 1-3.704.749"
+	})
+});
+export { CheckCircleIcon };

package/dist/CheckContent.js

@@ -0,0 +1,16 @@
+import { typography } from "./typography.cva.js";
+import { UIStyle } from "./uiStyle.context.js";
+import { jsx } from "react/jsx-runtime";
+import clsx$1 from "clsx";
+const CheckContent = ({ children, className,...props }) => {
+	return /* @__PURE__ */ jsx("div", {
+		className: clsx$1((UIStyle.useConfig()?.typography?.cva ?? typography)({
+			size: "label-1",
+			variant: "default",
+			...props.typography,
+			className: "text-text-default-2"
+		}), className),
+		children
+	});
+};
+export { CheckContent };

package/dist/Checkbox.js

@@ -0,0 +1,61 @@
+import { UIStyle } from "./uiStyle.context.js";
+import { checkboxIndicatorClass, checkboxTypography } from "./checkbox.cva.js";
+import { FormFieldError } from "./FormFieldError.js";
+import { CheckContent } from "./CheckContent.js";
+import { UIConfig } from "./uiConfig.context.js";
+import { CheckboxCheckmark } from "./CheckboxCheckmark2.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { Checkbox } from "react-aria-components";
+import { mergeRefs } from "@react-aria/utils";
+import { Controller } from "react-hook-form";
+var CheckboxBase = (props) => {
+	const ui = UIConfig.useConfig();
+	const checkboxTypographyMap = UIStyle.useConfig()?.checkbox?.typography ?? checkboxTypography;
+	const { className, children, isDisabled, error, variant = ui.checkbox.variant, hideLabel = ui.input.hideLabel,...rest } = props;
+	const formFieldErrorProps = {
+		error,
+		isDisabled
+	};
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs(Checkbox, {
+		...rest,
+		isDisabled,
+		isInvalid: !!error,
+		"aria-errormessage": error || void 0,
+		"data-is-dirty": props.isDirty || void 0,
+		"data-is-required": props.isRequired || void 0,
+		className: clsx(checkboxIndicatorClass, className),
+		children: [/* @__PURE__ */ jsx(CheckboxCheckmark, {
+			variant,
+			...rest
+		}), !hideLabel && /* @__PURE__ */ jsx(CheckContent, {
+			typography: checkboxTypographyMap({
+				variant,
+				...rest
+			}),
+			children
+		})]
+	}), /* @__PURE__ */ jsx(FormFieldError, { ...formFieldErrorProps })] });
+};
+const Checkbox$1 = (props) => {
+	if ("formControl" in props && props.formControl) {
+		const { formControl, ref,...innerProps } = props;
+		return /* @__PURE__ */ jsx(Controller, {
+			control: formControl.control,
+			name: formControl.name,
+			render: ({ field, fieldState: { error, isDirty } }) => /* @__PURE__ */ jsx(CheckboxBase, {
+				...innerProps,
+				ref: mergeRefs(ref, field.ref),
+				isSelected: field.value,
+				onChange: field.onChange,
+				onBlur: field.onBlur,
+				name: field.name,
+				isDirty,
+				isDisabled: field.disabled || props.isDisabled,
+				error: props.error ?? error?.message
+			})
+		});
+	}
+	return /* @__PURE__ */ jsx(CheckboxBase, { ...props });
+};
+export { Checkbox$1 as Checkbox };

package/dist/CheckboxCheckmark.js

@@ -0,0 +1,16 @@
+import { jsx } from "react/jsx-runtime";
+const CheckboxCheckmarkIcon = (props) => /* @__PURE__ */ jsx("svg", {
+	xmlns: "http://www.w3.org/2000/svg",
+	fill: "none",
+	viewBox: "0 0 12 9",
+	className: "fill-current",
+	...props,
+	children: /* @__PURE__ */ jsx("path", {
+		stroke: "currentColor",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		strokeWidth: 2,
+		d: "M11 1 4.125 8 1 4.818"
+	})
+});
+export { CheckboxCheckmarkIcon };