@povio/ui 2.1.14 → 2.1.16

package/dist/TimePickerInput.js

@@ -0,0 +1,92 @@
+import { ClockIcon } from "./Clock.js";
+import { UIStyle } from "./uiStyle.context.js";
+import { Typography } from "./Typography.js";
+import { InlineIconButton } from "./InlineIconButton.js";
+import { inputSide, useInputCva } from "./input.cva.js";
+import { FormFieldLabel } from "./FormFieldLabel.js";
+import { InputClear } from "./InputClear.js";
+import { TimeField } from "./TimeField.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { Button } from "react-aria-components";
+import { useMemo, useState } from "react";
+import { useFocusVisible, useFocusWithin, useHover } from "react-aria";
+import useMeasure from "react-use-measure";
+const TimePickerInput = ({ ref, as, fieldProps, state, isDisabled, isDirty, isInvalid, disableDropdown, variant, size, isClearable, headerProps, disableManualEntry, placeholder, onPress,...props }) => {
+	const inputCva = useInputCva();
+	const inputSideCva = UIStyle.useConfig()?.input?.sideCva ?? inputSide;
+	const { hoverProps, isHovered } = useHover({ isDisabled });
+	const [isFocused, setIsFocused] = useState(false);
+	const { focusWithinProps } = useFocusWithin({ onFocusWithinChange: setIsFocused });
+	const { isFocusVisible } = useFocusVisible();
+	const [labelContentRef, { width: labelWidth }] = useMeasure();
+	const hidePlaceholder = as === "floating" && !state.value && !isFocused;
+	const style = useMemo(() => {
+		return { paddingLeft: as === "filter" ? `calc(var(${inputSideCva({
+			size,
+			type: "var"
+		})}) + ${labelWidth}px)` : "0px" };
+	}, [
+		labelWidth,
+		as,
+		size,
+		inputSideCva
+	]);
+	const canClear = state.segments.some((segment) => segment.type !== "literal" && segment.isPlaceholder === false);
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		className: inputCva({
+			variant,
+			as,
+			size,
+			...props,
+			className: clsx("group/date-picker-content relative flex min-w-input-width-min-width items-center justify-between gap-2")
+		}),
+		"data-rac": "",
+		"data-hovered": isHovered || void 0,
+		"data-disabled": isDisabled || void 0,
+		"data-invalid": isInvalid || void 0,
+		"data-is-empty": state.value === null || void 0,
+		"data-focus-within": isFocused || void 0,
+		"data-focus-visible": isFocused && isFocusVisible || void 0,
+		"data-has-selection": state.value !== null || void 0,
+		"data-is-dirty": isDirty || void 0,
+		...fieldProps,
+		...focusWithinProps,
+		...hoverProps,
+		children: [/* @__PURE__ */ jsxs("div", { children: [
+			disableManualEntry && /* @__PURE__ */ jsx(Button, {
+				onPress,
+				className: "absolute inset-0 z-0"
+			}),
+			as && ["filter", "floating"].includes(as) && headerProps && /* @__PURE__ */ jsx(FormFieldLabel, {
+				ref: labelContentRef,
+				as,
+				...headerProps
+			}),
+			/* @__PURE__ */ jsx("div", {
+				style,
+				children: disableManualEntry && placeholder && !state.value ? /* @__PURE__ */ jsx(Typography, {
+					size: "label-1",
+					className: "text-text-default-3",
+					children: placeholder
+				}) : /* @__PURE__ */ jsx(TimeField, {
+					fieldProps,
+					state,
+					isDisabled,
+					hidePlaceholder
+				})
+			})
+		] }), /* @__PURE__ */ jsxs("div", {
+			className: clsx("relative z-1 flex items-center gap-2", as === "floating" && "-mt-4"),
+			children: [isClearable && canClear && /* @__PURE__ */ jsx(InputClear, { onClear: () => state.setValue(null) }), (!disableDropdown || disableManualEntry) && /* @__PURE__ */ jsx(InlineIconButton, {
+				label: "",
+				color: "secondary",
+				onPress,
+				icon: ClockIcon,
+				isDisabled
+			})]
+		})]
+	});
+};
+export { TimePickerInput };

package/dist/Toast.js

@@ -0,0 +1,58 @@
+import { Loader } from "./Loader.js";
+import { UIStyle } from "./uiStyle.context.js";
+import { Typography } from "./Typography.js";
+import { Button } from "./Button.js";
+import { statusIcon, statusSeparator } from "./status.cva.js";
+import { buttonColorVariant, toast as toast$1, toastContainer, toastWrapper } from "./toast.cva.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { ToastContainer } from "react-toastify";
+const Toast = ({ text, isLoading = false, actions = [], icon: Icon,...props }) => {
+	const uiStyle = UIStyle.useConfig();
+	const toastCva = uiStyle?.toast?.cva ?? toast$1;
+	const buttonColor = uiStyle?.toast?.buttonColor ?? buttonColorVariant;
+	const iconCva = uiStyle?.status?.iconCva ?? statusIcon;
+	const separatorCva = uiStyle?.status?.separatorCva ?? statusSeparator;
+	return /* @__PURE__ */ jsxs("div", {
+		className: toastCva({ ...props }),
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex items-start gap-toast-gap-icon-to-text px-toast-side-default py-toast-height-content",
+			children: [
+				isLoading && /* @__PURE__ */ jsx(Loader, {
+					size: "default",
+					className: "shrink-0"
+				}),
+				!isLoading && Icon && /* @__PURE__ */ jsx(Icon, { className: iconCva({ ...props }) }),
+				/* @__PURE__ */ jsx(Typography, {
+					size: "label-2",
+					children: text
+				})
+			]
+		}), actions.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", { className: separatorCva({ ...props }) }), /* @__PURE__ */ jsx("div", {
+			className: "flex w-full shrink-0 flex-wrap items-center justify-end gap-toast-gap-action px-toast-side-default py-toast-height-actions-mobile md:w-auto md:justify-center md:py-toast-height-actions-desktop",
+			children: actions.map(({ text: buttonText, onPress }) => /* @__PURE__ */ jsx(Button, {
+				onPress,
+				...buttonColor({ ...props }),
+				variant: "text",
+				size: "none",
+				width: "hug",
+				children: buttonText
+			}, buttonText))
+		})] })]
+	});
+};
+const ToastContainer$1 = () => {
+	return /* @__PURE__ */ jsx(ToastContainer, {
+		className: (params) => {
+			return toastContainer({
+				position: params?.position,
+				className: params?.defaultClassName
+			});
+		},
+		toastClassName: toastWrapper,
+		autoClose: 2500,
+		icon: false,
+		closeButton: false,
+		hideProgressBar: true
+	});
+};
+export { Toast, ToastContainer$1 as ToastContainer };

package/dist/Today.js

@@ -0,0 +1,13 @@
+import { jsx } from "react/jsx-runtime";
+const TodayIcon = (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: "M9.184 9.672v-.945h5.628v.945h-2.27V16H11.45V9.672z"
+	})
+});
+export { TodayIcon };

package/dist/Toggle.js

@@ -0,0 +1,60 @@
+import { UIStyle } from "./uiStyle.context.js";
+import { FormFieldError } from "./FormFieldError.js";
+import { CheckContent } from "./CheckContent.js";
+import { UIConfig } from "./uiConfig.context.js";
+import { toggle, toggleTypography } from "./toggle.cva.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { Switch } from "react-aria-components";
+import { mergeRefs } from "@react-aria/utils";
+import { Controller } from "react-hook-form";
+var ToggleBase = (props) => {
+	const ui = UIConfig.useConfig();
+	const uiStyle = UIStyle.useConfig();
+	const toggleCva = uiStyle?.toggle?.cva ?? toggle;
+	const toggleTypographyMap = uiStyle?.toggle?.typography ?? toggleTypography;
+	const { className, children, isDisabled, error, variant = ui.toggle.variant,...rest } = props;
+	const formFieldErrorProps = {
+		error,
+		isDisabled
+	};
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs(Switch, {
+		...rest,
+		"data-is-dirty": props.isDirty || void 0,
+		"data-is-required": props.isRequired || void 0,
+		isDisabled,
+		className: clsx("group flex items-center gap-2", !isDisabled && "cursor-pointer", className),
+		children: [/* @__PURE__ */ jsx("div", { className: toggleCva({
+			variant,
+			...rest
+		}) }), /* @__PURE__ */ jsx(CheckContent, {
+			typography: toggleTypographyMap({
+				variant,
+				...rest
+			}),
+			children
+		})]
+	}), /* @__PURE__ */ jsx(FormFieldError, { ...formFieldErrorProps })] });
+};
+const Toggle = (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(ToggleBase, {
+				...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(ToggleBase, { ...props });
+};
+export { Toggle };

package/dist/ToggleButton.js

@@ -0,0 +1,13 @@
+import { Button } from "./Button.js";
+import { jsx } from "react/jsx-runtime";
+const ToggleButton = ({ children,...props }) => {
+	return /* @__PURE__ */ jsx(Button, {
+		...props,
+		toggle: true,
+		variant: "outlined",
+		color: "primary",
+		disableTooltip: props.disableTooltip,
+		children
+	});
+};
+export { ToggleButton };

package/dist/Tooltip.js

@@ -0,0 +1,49 @@
+import { PointerHorizontalIcon } from "./PointerHorizontal.js";
+import { PointerVerticalIcon } from "./PointerVertical.js";
+import { UIStyle } from "./uiStyle.context.js";
+import { Typography } from "./Typography.js";
+import { tooltipCva, tooltipPointerHorizontalCva, tooltipPointerVerticalCva, tooltipTextCva } from "./tooltip.cva.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { OverlayArrow, Tooltip, TooltipTrigger } from "react-aria-components";
+import { Fragment as Fragment$1, useRef } from "react";
+import { useFocusable } from "react-aria";
+var CustomTrigger = ({ children, className, tabIndex }) => {
+	const ref = useRef(null);
+	const { focusableProps } = useFocusable({}, ref);
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		...focusableProps,
+		tabIndex: tabIndex ?? 0,
+		className,
+		children
+	});
+};
+const Tooltip$1 = ({ children, text, isDisabled, delay, closeDelay, color, isNonInteractiveTrigger, triggerClassName, triggerTabIndex,...tooltipProps }) => {
+	const uiStyle = UIStyle.useConfig();
+	const tooltipCva$1 = uiStyle?.tooltip?.cva ?? tooltipCva;
+	const tooltipPointerHorizontalCva$1 = uiStyle?.tooltip?.pointerHorizontalCva ?? tooltipPointerHorizontalCva;
+	const tooltipPointerVerticalCva$1 = uiStyle?.tooltip?.pointerVerticalCva ?? tooltipPointerVerticalCva;
+	const tooltipTextCva$1 = uiStyle?.tooltip?.textCva ?? tooltipTextCva;
+	const Trigger = isNonInteractiveTrigger ? CustomTrigger : Fragment$1;
+	return /* @__PURE__ */ jsxs(TooltipTrigger, {
+		delay: delay ?? 0,
+		closeDelay: closeDelay ?? 0,
+		isDisabled,
+		children: [isNonInteractiveTrigger ? /* @__PURE__ */ jsx(Trigger, {
+			...isNonInteractiveTrigger && { className: triggerClassName },
+			tabIndex: triggerTabIndex,
+			children
+		}) : /* @__PURE__ */ jsx(Trigger, { children }), /* @__PURE__ */ jsxs(Tooltip, {
+			className: tooltipCva$1({ color }),
+			...tooltipProps,
+			offset: 13,
+			children: [/* @__PURE__ */ jsxs(OverlayArrow, { children: [/* @__PURE__ */ jsx(PointerHorizontalIcon, { className: tooltipPointerHorizontalCva$1({ color }) }), /* @__PURE__ */ jsx(PointerVerticalIcon, { className: tooltipPointerVerticalCva$1({ color }) })] }), /* @__PURE__ */ jsx(Typography, {
+				size: "body-4",
+				variant: "prominent-1",
+				className: tooltipTextCva$1({ color }),
+				children: text
+			})]
+		})]
+	});
+};
+export { Tooltip$1 as Tooltip };

package/dist/TooltipEllipsis.js

@@ -0,0 +1,18 @@
+import { Tooltip } from "./Tooltip.js";
+import { jsx } from "react/jsx-runtime";
+import { useState } from "react";
+const TooltipEllipsis = ({ text, children, isDisabled }) => {
+	const [isEllipsisActive, setIsEllipsisActive] = useState(false);
+	const onContentRef = (ref) => {
+		if (ref) setIsEllipsisActive(ref.offsetWidth < ref.scrollWidth);
+	};
+	const content = children(onContentRef);
+	if (isEllipsisActive && !isDisabled) return /* @__PURE__ */ jsx(Tooltip, {
+		text,
+		placement: "bottom",
+		isDisabled,
+		children: content
+	});
+	return content;
+};
+export { TooltipEllipsis };

package/dist/TooltipWrapper.js

@@ -0,0 +1,19 @@
+import { Tooltip } from "./Tooltip.js";
+import { jsx } from "react/jsx-runtime";
+const TooltipWrapper = (props) => {
+	if (props.as !== "inline") return props.children;
+	return /* @__PURE__ */ jsx(Tooltip, {
+		text: props.error || void 0,
+		placement: "bottom",
+		color: "error",
+		hidden: !props.error,
+		isNonInteractiveTrigger: true,
+		triggerClassName: props.triggerClassName,
+		triggerTabIndex: props.triggerTabIndex,
+		children: /* @__PURE__ */ jsx("div", {
+			tabIndex: -1,
+			children: props.children
+		})
+	});
+};
+export { TooltipWrapper };

package/dist/Typography.js

@@ -0,0 +1,14 @@
+import { typography } from "./typography.cva.js";
+import { UIStyle } from "./uiStyle.context.js";
+import { jsx } from "react/jsx-runtime";
+const Typography = ({ as = "p", className,...props }) => {
+	return /* @__PURE__ */ jsx(as, {
+		className: (UIStyle.useConfig()?.typography?.cva ?? typography)({
+			...props,
+			sizeMobile: props.sizeMobile ?? props.size,
+			className
+		}),
+		...props
+	});
+};
+export { Typography };

package/dist/Underlined.js

@@ -0,0 +1,15 @@
+import { jsx } from "react/jsx-runtime";
+const UnderlinedIcon = (props) => /* @__PURE__ */ jsx("svg", {
+	xmlns: "http://www.w3.org/2000/svg",
+	fill: "none",
+	viewBox: "0 0 25 24",
+	className: "fill-current",
+	...props,
+	children: /* @__PURE__ */ jsx("path", {
+		fill: "currentColor",
+		stroke: "currentColor",
+		strokeWidth: .2,
+		d: "M6.872 18.89q.212.21.518.21h9.892q.306 0 .518-.21.21-.212.21-.518a.7.7 0 0 0-.21-.518.7.7 0 0 0-.518-.21H7.39a.7.7 0 0 0-.518.209.7.7 0 0 0-.21.518q0 .308.21.519ZM8.353 5.155a.83.83 0 0 0-.264.615v5.851c0 1.348.371 2.434 1.123 3.248.754.815 1.8 1.218 3.124 1.218s2.37-.403 3.124-1.218c.752-.814 1.123-1.9 1.123-3.248v-5.85a.84.84 0 0 0-.255-.615.84.84 0 0 0-.613-.256.87.87 0 0 0-.62.255.83.83 0 0 0-.265.615V11.7c0 .828-.22 1.48-.65 1.968-.427.484-1.037.732-1.844.732s-1.417-.248-1.844-.732c-.43-.487-.65-1.14-.65-1.968V5.77a.84.84 0 0 0-.255-.614.84.84 0 0 0-.613-.256.87.87 0 0 0-.62.255Z"
+	})
+});
+export { UnderlinedIcon };

package/dist/Upload.js

@@ -0,0 +1,16 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+const UploadIcon = (props) => /* @__PURE__ */ jsxs("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: "M19.5 13.6a.9.9 0 0 1 .9.9v3.333a2.57 2.57 0 0 1-2.567 2.567H6.167a2.57 2.57 0 0 1-2.555-2.313l-.012-.254V14.5a.9.9 0 0 1 1.796-.092l.004.092v3.333l.015.15a.766.766 0 0 0 .752.617h11.666a.766.766 0 0 0 .767-.767V14.5a.9.9 0 0 1 .9-.9"
+	}), /* @__PURE__ */ jsx("path", {
+		fill: "currentColor",
+		d: "M12.04 3.602h.007q.078.003.151.02.006 0 .011.003c.168.04.319.127.436.247l4.158 4.158.061.069A.9.9 0 0 1 15.6 9.365l-.069-.062-2.63-2.63V14.5a.9.9 0 0 1-1.8 0V6.672l-2.63 2.63-.069.063A.901.901 0 0 1 7.196 8.03l4.167-4.167.069-.061a.9.9 0 0 1 .432-.192l.027-.004A1 1 0 0 1 12 3.6z"
+	})]
+});
+export { UploadIcon };

package/dist/View.js

@@ -0,0 +1,13 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+const ViewIcon = (props) => /* @__PURE__ */ jsx("svg", {
+	xmlns: "http://www.w3.org/2000/svg",
+	fill: "none",
+	viewBox: "0 0 24 24",
+	className: "fill-current",
+	...props,
+	children: /* @__PURE__ */ jsxs("g", {
+		fill: "currentColor",
+		children: [/* @__PURE__ */ jsx("path", { d: "M21.338 11.788A10.43 10.43 0 0 0 12 5.124a10.43 10.43 0 0 0-9.337 6.663.63.63 0 0 0 0 .425A10.43 10.43 0 0 0 12 18.875a10.43 10.43 0 0 0 9.337-6.662.62.62 0 0 0 0-.425M12 17.624c-3.312 0-6.812-2.456-8.081-5.625C5.188 8.831 8.688 6.375 12 6.375c3.313 0 6.813 2.456 8.081 5.625-1.268 3.169-4.768 5.625-8.081 5.625" }), /* @__PURE__ */ jsx("path", { d: "M12 8.25a3.75 3.75 0 1 0 0 7.5 3.75 3.75 0 0 0 0-7.5m0 6.25a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5" })]
+	})
+});
+export { ViewIcon };

package/dist/ViewOff.js

@@ -0,0 +1,13 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+const ViewOffIcon = (props) => /* @__PURE__ */ jsx("svg", {
+	xmlns: "http://www.w3.org/2000/svg",
+	fill: "none",
+	viewBox: "0 0 24 24",
+	className: "fill-current",
+	...props,
+	children: /* @__PURE__ */ jsxs("g", {
+		fill: "currentColor",
+		children: [/* @__PURE__ */ jsx("path", { d: "m5.275 16.069.894-.888A8.8 8.8 0 0 1 3.919 12C5.188 8.831 8.688 6.375 12 6.375a7.7 7.7 0 0 1 2.5.45l.969-.975A9.2 9.2 0 0 0 12 5.125a10.43 10.43 0 0 0-9.337 6.663.63.63 0 0 0 0 .425 10 10 0 0 0 2.612 3.856" }), /* @__PURE__ */ jsx("path", { d: "M9.5 11.831a2.5 2.5 0 0 1 2.313-2.312l1.13-1.138a3.75 3.75 0 0 0-4.58 4.582zM21.338 11.788a10.25 10.25 0 0 0-3.588-4.65l3-3.007-.881-.881L3.25 19.869l.881.881 3.188-3.187A9.56 9.56 0 0 0 12 18.875a10.43 10.43 0 0 0 9.337-6.662.62.62 0 0 0 0-.425M14.5 12a2.5 2.5 0 0 1-3.75 2.15l3.4-3.4A2.5 2.5 0 0 1 14.5 12M12 17.625a8.16 8.16 0 0 1-3.75-.988l1.588-1.587a3.75 3.75 0 0 0 5.218-5.219l1.794-1.793A9.1 9.1 0 0 1 20.081 12c-1.268 3.169-4.768 5.625-8.081 5.625" })]
+	})
+});
+export { ViewOffIcon };

package/dist/WarningFilled.js

@@ -0,0 +1,15 @@
+import { jsx } from "react/jsx-runtime";
+const WarningFilledIcon = (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: "M12.165 3.52a2.57 2.57 0 0 1 1.94 1.091l.09.139.001.004 7.059 11.783.008.013.079.147a2.568 2.568 0 0 1-2.274 3.702H4.932a2.568 2.568 0 0 1-2.195-3.85l.007-.012L9.803 4.754l.002-.004.09-.139A2.57 2.57 0 0 1 12 3.514zM12 15.267a.9.9 0 0 0 0 1.8h.008l.092-.005a.9.9 0 0 0 0-1.79l-.092-.005zM12 8.6a.9.9 0 0 0-.9.9v3.333l.005.093a.9.9 0 0 0 1.79 0l.005-.093V9.5l-.005-.092A.9.9 0 0 0 12 8.6",
+		clipRule: "evenodd"
+	})
+});
+export { WarningFilledIcon };

package/dist/YearPicker.js

@@ -0,0 +1,64 @@
+import { Typography } from "./Typography.js";
+import { useScrollableListBox } from "./useScrollableListBox.js";
+import { jsx } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { ListBox, ListBoxItem } from "react-aria-components";
+import { useMemo } from "react";
+import { today } from "@internationalized/date";
+import { useDateFormatter } from "@react-aria/i18n";
+const YearPicker = ({ state, onSelectionChange }) => {
+	const formatter = useDateFormatter({
+		year: "numeric",
+		timeZone: state.timeZone
+	});
+	const years = useMemo(() => {
+		const arr = [];
+		for (let i = -100; i <= 100; i++) {
+			const date = today(state.timeZone).add({ years: i });
+			arr.push({
+				value: date.year,
+				formatted: formatter.format(date.toDate(state.timeZone))
+			});
+		}
+		return arr;
+	}, [state.timeZone, formatter]);
+	const isYearDisabled = (year) => {
+		if (state.minValue && year < state.minValue.year) return true;
+		if (state.maxValue && year > state.maxValue.year) return true;
+		return false;
+	};
+	const selectedYear = years.findIndex((year) => year.value === state.focusedDate.year);
+	const { ref } = useScrollableListBox();
+	return /* @__PURE__ */ jsx(ListBox, {
+		ref,
+		autoFocus: true,
+		"aria-label": "Year",
+		selectionMode: "single",
+		selectedKeys: [selectedYear],
+		onSelectionChange: (key) => {
+			if (key === "all") return;
+			const index = [...key][0];
+			if (typeof index === "number") {
+				const date = state.focusedDate.set({ year: years[index].value });
+				state.setFocusedDate(date);
+			}
+			onSelectionChange(key);
+		},
+		className: "h-80 max-h-full min-h-0 w-full shrink-0 overflow-y-auto md:h-72 md:w-80",
+		children: years.map((year, index) => {
+			const isDisabled = isYearDisabled(year.value);
+			return /* @__PURE__ */ jsx(ListBoxItem, {
+				id: index,
+				textValue: year.formatted,
+				isDisabled,
+				className: clsx("flex px-4 py-2 text-interactive-text-secondary-idle outline-none", "border-elevation-outline-default-1 border-b border-solid bg-elevation-fill-default-1 last:border-b-0", "hover:text-interactive-text-secondary-hover", "selected:bg-interactive-contained-primary-idle selected:text-interactive-text-secondary-idle-inverted", "focus-visible:bg-interactive-contained-primary-focus focus-visible:text-interactive-text-secondary-idle-inverted", isDisabled ? "cursor-default opacity-50" : "cursor-pointer"),
+				children: /* @__PURE__ */ jsx(Typography, {
+					as: "span",
+					size: "label-2",
+					children: year.formatted
+				})
+			}, index);
+		})
+	});
+};
+export { YearPicker };

package/dist/ability.context.js

@@ -0,0 +1,35 @@
+import { AuthContext } from "./auth.context.js";
+import { jsx } from "react/jsx-runtime";
+import { createContext, useEffect, useState } from "react";
+import { AbilityBuilder, createMongoAbility } from "@casl/ability";
+import { unpackRules } from "@casl/ability/extra";
+import { useAbility } from "@casl/react";
+let AbilityContext;
+(function(_AbilityContext) {
+	const createAppAbilityBuilder = () => new AbilityBuilder(createMongoAbility);
+	const initialAppAbility = createAppAbilityBuilder().build();
+	const Context = createContext({});
+	const { Consumer } = Context;
+	_AbilityContext.Consumer = Consumer;
+	_AbilityContext.Provider = ({ children }) => {
+		const [ability, setAbility] = useState(initialAppAbility);
+		const { user } = AuthContext.useAuth();
+		useEffect(() => {
+			if (!user || !("aclRules" in user)) return;
+			const { can, build } = createAppAbilityBuilder();
+			const packedRules = user.aclRules;
+			unpackRules(packedRules).forEach(({ action, subject, conditions }) => {
+				can(action, subject, conditions);
+			});
+			setAbility(build());
+		}, [user]);
+		return /* @__PURE__ */ jsx(Context.Provider, {
+			value: ability,
+			children
+		});
+	};
+	_AbilityContext.useAbility = () => {
+		return useAbility(Context);
+	};
+})(AbilityContext || (AbilityContext = {}));
+export { AbilityContext };

package/dist/alert.cva.js

@@ -0,0 +1,62 @@
+import { cva } from "class-variance-authority";
+const alert = cva("min-h-0 overflow-hidden rounded-alert-rounding-default p-0", {
+	variants: {
+		variant: {
+			outlined: "border bg-elevation-fill-default-1 text-text-default-1",
+			contained: "text-text-inverted-1"
+		},
+		color: {
+			neutral: "",
+			success: "",
+			warning: "",
+			error: ""
+		}
+	},
+	compoundVariants: [
+		{
+			variant: "outlined",
+			color: "neutral",
+			className: "border-elevation-outline-default-1"
+		},
+		{
+			variant: "outlined",
+			color: "success",
+			className: "border-elevation-outline-success-1"
+		},
+		{
+			variant: "outlined",
+			color: "warning",
+			className: "border-elevation-outline-warning-1"
+		},
+		{
+			variant: "outlined",
+			color: "error",
+			className: "border-elevation-outline-error-1"
+		},
+		{
+			variant: "contained",
+			color: "neutral",
+			className: "bg-elevation-fill-inverted-1"
+		},
+		{
+			variant: "contained",
+			color: "success",
+			className: "bg-elevation-fill-success-1"
+		},
+		{
+			variant: "contained",
+			color: "warning",
+			className: "bg-elevation-fill-warning-1"
+		},
+		{
+			variant: "contained",
+			color: "error",
+			className: "bg-elevation-fill-error-1"
+		}
+	],
+	defaultVariants: {
+		variant: "outlined",
+		color: "neutral"
+	}
+});
+export { alert };

package/dist/array.utils.js

@@ -0,0 +1,8 @@
+let ArrayUtils;
+(function(_ArrayUtils) {
+	_ArrayUtils.fromCommaSeparatedStr = (str) => {
+		if (!str) return [];
+		return str.split(",").map((item) => item.trim());
+	};
+})(ArrayUtils || (ArrayUtils = {}));
+export { ArrayUtils };

package/dist/auth.context.js

@@ -0,0 +1,37 @@
+import { jsx } from "react/jsx-runtime";
+import { createContext, use, useMemo } from "react";
+let AuthContext;
+(function(_AuthContext) {
+	const Context = createContext({});
+	_AuthContext.Provider = ({ isAuthenticated, isInitializing, logout, updateTokens, accessToken, user, userPromise, routes, loadingState, children }) => {
+		const value = useMemo(() => ({
+			isAuthenticated,
+			isInitializing,
+			logout,
+			updateTokens,
+			accessToken,
+			user,
+			userPromise,
+			routes,
+			loadingState
+		}), [
+			isAuthenticated,
+			isInitializing,
+			logout,
+			updateTokens,
+			accessToken,
+			user,
+			userPromise,
+			routes,
+			loadingState
+		]);
+		return /* @__PURE__ */ jsx(Context.Provider, {
+			value,
+			children
+		});
+	};
+	_AuthContext.useAuth = () => {
+		return use(Context);
+	};
+})(AuthContext || (AuthContext = {}));
+export { AuthContext };

package/dist/auth.js

@@ -1,12 +1,6 @@
-import { createAclGuard } from "./utils/vendor/acl/AclGuard.js";
-import { AbilityContext } from "./utils/vendor/acl/ability.context.js";
-import { Can } from "./utils/vendor/acl/Can.js";
-import { AuthGuard } from "./utils/vendor/auth/AuthGuard.js";
-import { AuthContext } from "./utils/vendor/auth/auth.context.js";
-export {
-  AbilityContext,
-  AuthContext,
-  AuthGuard,
-  Can,
-  createAclGuard
-};
+import { AuthContext } from "./auth.context.js";
+import { AbilityContext } from "./ability.context.js";
+import { createAclGuard } from "./AclGuard.js";
+import { Can } from "./Can.js";
+import { AuthGuard } from "./AuthGuard.js";
+export { AbilityContext, AuthContext, AuthGuard, Can, createAclGuard };