@povio/ui 2.1.14 → 2.1.16

package/dist/MenuMobile.js

@@ -0,0 +1,64 @@
+import { ArrowLeftIcon } from "./ArrowLeft.js";
+import { UIStyle } from "./uiStyle.context.js";
+import { menuCva, menuItemCva } from "./menu.cva.js";
+import { MenuItem as MenuItem$1 } from "./MenuItem.js";
+import { BottomSheet } from "./BottomSheet.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { Button, Menu } from "react-aria-components";
+import { useRef, useState } from "react";
+const MenuMobile = ({ trigger, items,...props }) => {
+	const uiStyle = UIStyle.useConfig();
+	const menuItemCva$1 = uiStyle?.menu?.itemCva ?? menuItemCva;
+	const menuCva$1 = uiStyle?.menu?.cva ?? menuCva;
+	const activeItemRef = useRef(null);
+	const activeItemParentsRef = useRef([]);
+	const [isOpen, setIsOpen] = useState(false);
+	const [activeItem, setActiveItem] = useState(null);
+	const onAction = (item) => {
+		if (!item.children) {
+			activeItemRef.current = null;
+			activeItemParentsRef.current = [];
+			setActiveItem(null);
+			setIsOpen(false);
+			return;
+		}
+		if (activeItemRef.current) activeItemParentsRef.current.push(activeItemRef.current);
+		activeItemRef.current = item;
+		setActiveItem(activeItemRef.current);
+	};
+	const onClose = () => {
+		if (activeItemRef.current) return;
+		setIsOpen(false);
+	};
+	const onBack = () => {
+		activeItemRef.current = activeItemParentsRef.current.pop() ?? null;
+		setActiveItem(activeItemRef.current);
+	};
+	return /* @__PURE__ */ jsx(BottomSheet, {
+		isOpen,
+		onOpenChange: setIsOpen,
+		trigger,
+		isDismissable: true,
+		children: () => /* @__PURE__ */ jsxs(Fragment, { children: [activeItem && /* @__PURE__ */ jsxs(Button, {
+			className: clsx(menuItemCva$1({
+				...props,
+				isMobile: true
+			})),
+			onPress: onBack,
+			children: [/* @__PURE__ */ jsx(ArrowLeftIcon, { className: "size-6" }), activeItem.label]
+		}), /* @__PURE__ */ jsx(Menu, {
+			autoFocus: true,
+			onClose,
+			className: menuCva$1({
+				...props,
+				isMobile: true
+			}),
+			children: (activeItem?.children ?? items).map((item, index) => /* @__PURE__ */ jsx(MenuItem$1, {
+				...item,
+				onAction: () => onAction(item)
+			}, index))
+		})] })
+	});
+};
+export { MenuMobile };

package/dist/MenuPopover.js

@@ -0,0 +1,30 @@
+import { UIStyle } from "./uiStyle.context.js";
+import { menuCva, menuPopoverCva, menuPopoverWrapperCva } from "./menu.cva.js";
+import { MenuItem as MenuItem$1 } from "./MenuItem.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { Menu, Popover, SubmenuTrigger } from "react-aria-components";
+const MenuPopover = ({ items, className,...props }) => {
+	const uiStyle = UIStyle.useConfig();
+	const menuPopoverCva$1 = uiStyle?.menu?.popoverCva ?? menuPopoverCva;
+	const menuPopoverWrapperCva$1 = uiStyle?.menu?.popoverWrapperCva ?? menuPopoverWrapperCva;
+	const menuCva$1 = uiStyle?.menu?.cva ?? menuCva;
+	return /* @__PURE__ */ jsx(Popover, {
+		...props,
+		className: clsx(menuPopoverCva$1({ ...props }), className),
+		children: /* @__PURE__ */ jsx("div", {
+			className: menuPopoverWrapperCva$1({ ...props }),
+			children: /* @__PURE__ */ jsx(Menu, {
+				className: menuCva$1({
+					...props,
+					isMobile: false
+				}),
+				children: items.map((item, index) => !item.children || item.children.length === 0 ? /* @__PURE__ */ jsx(MenuItem$1, { ...item }, index) : /* @__PURE__ */ jsxs(SubmenuTrigger, { children: [/* @__PURE__ */ jsx(MenuItem$1, { ...item }), /* @__PURE__ */ jsx(MenuPopover, {
+					offset: 0,
+					items: item.children
+				})] }, index))
+			})
+		})
+	});
+};
+export { MenuPopover };

package/dist/Modal.js

@@ -0,0 +1,49 @@
+import { CloseIcon } from "./Close.js";
+import { UIStyle } from "./uiStyle.context.js";
+import { InlineIconButton } from "./InlineIconButton.js";
+import { ns } from "./i18n.js";
+import { modalContent, modalMain, modalOverlay } from "./modal.cva.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { Dialog, Modal, ModalOverlay } from "react-aria-components";
+import { useTranslation } from "react-i18next";
+const Modal$1 = ({ isOpen, portalContainerRef, onClose, aside, children, modalClassName, closeIconClassName, overlayClassName, showCloseIcon, isDismissable = true }) => {
+	const { t } = useTranslation("ui");
+	const uiStyle = UIStyle.useConfig();
+	const modalMainCva = uiStyle?.modal?.mainCva ?? modalMain;
+	const modalContentCva = uiStyle?.modal?.contentCva ?? modalContent;
+	const modalOverlayCva = uiStyle?.modal?.overlayCva ?? modalOverlay;
+	return /* @__PURE__ */ jsx(ModalOverlay, {
+		UNSTABLE_portalContainer: portalContainerRef?.current,
+		className: modalOverlayCva({
+			aside,
+			className: overlayClassName
+		}),
+		isDismissable,
+		isOpen,
+		shouldCloseOnInteractOutside: () => {
+			return !portalContainerRef?.current;
+		},
+		onOpenChange: (open) => {
+			if (!open) onClose();
+		},
+		children: /* @__PURE__ */ jsx(Modal, {
+			className: modalMainCva({ aside }),
+			children: /* @__PURE__ */ jsxs(Dialog, {
+				className: modalContentCva({
+					aside,
+					className: modalClassName
+				}),
+				children: [showCloseIcon && /* @__PURE__ */ jsx(InlineIconButton, {
+					color: "secondary",
+					onPress: onClose,
+					icon: CloseIcon,
+					className: clsx("absolute top-0 right-0 p-modal-gap-desktop-modal-close-icon-top-right", closeIconClassName),
+					label: t(($) => $.ui.modal.closeBtn),
+					disableTooltip: true
+				}), children]
+			})
+		})
+	});
+};
+export { Modal$1 as Modal };

package/dist/MonthPicker.js

@@ -0,0 +1,56 @@
+import { Typography } from "./Typography.js";
+import { jsx } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { ListBox, ListBoxItem } from "react-aria-components";
+import { useDateFormatter } from "@react-aria/i18n";
+const MonthPicker = ({ state, onSelectionChange }) => {
+	const formatter = useDateFormatter({
+		month: "long",
+		timeZone: state.timeZone
+	});
+	const numMonths = state.focusedDate.calendar.getMonthsInYear(state.focusedDate);
+	const getMonths = () => {
+		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;
+	};
+	const isMonthDisabled = (month) => {
+		if (state.minValue && state.focusedDate.set({ month }) < state.minValue) return true;
+		if (state.maxValue && state.focusedDate.set({ month }) > state.maxValue) return true;
+		return false;
+	};
+	return /* @__PURE__ */ jsx(ListBox, {
+		autoFocus: true,
+		"aria-label": "Month",
+		selectionMode: "single",
+		layout: "grid",
+		selectedKeys: [state.focusedDate.month],
+		onSelectionChange: (key) => {
+			if (key === "all") return;
+			if (typeof [...key][0] === "number") {
+				const date = state.focusedDate.set({ month: [...key][0] });
+				state.setFocusedDate(date);
+			}
+			onSelectionChange(key);
+		},
+		className: "grid size-full min-h-72 grid-cols-3 grid-rows-4 gap-2 p-3 md:w-80",
+		children: getMonths().map((month, index) => {
+			const isDisabled = isMonthDisabled(index + 1);
+			return /* @__PURE__ */ jsx(ListBoxItem, {
+				id: index + 1,
+				textValue: month,
+				isDisabled,
+				className: clsx("flex items-center justify-center text-interactive-text-secondary-idle", "rounded-button-rounding-m border border-elevation-outline-default-1 border-solid bg-elevation-fill-default-1", "hover:text-interactive-text-secondary-hover", "selected:border-interactive-contained-primary-idle selected:bg-interactive-contained-primary-idle selected:text-interactive-text-secondary-idle-inverted", "focus:outline-none focus-visible:outline-1 focus-visible:outline-interactive-contained-primary-focus focus-visible:outline-offset-1", isDisabled ? "cursor-default opacity-50" : "cursor-pointer"),
+				children: /* @__PURE__ */ jsx(Typography, {
+					as: "span",
+					size: "label-2",
+					children: month
+				})
+			}, month);
+		})
+	});
+};
+export { MonthPicker };

package/dist/NumberInput.js

@@ -0,0 +1,132 @@
+import { UIConfig } from "./uiConfig.context.js";
+import { useInputCva } from "./input.cva.js";
+import { FormField } from "./FormField.js";
+import { TooltipWrapper } from "./TooltipWrapper.js";
+import { InputContent } from "./InputContent.js";
+import { jsx } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { Input, useLocale } from "react-aria-components";
+import { useCallback, useRef } from "react";
+import { useFocusVisible, useNumberField } from "react-aria";
+import { mergeRefs } from "@react-aria/utils";
+import { Controller } from "react-hook-form";
+import { useNumberFieldState } from "react-stately";
+var NumberInputBase = (props) => {
+	const ui = UIConfig.useConfig();
+	const inputCva = useInputCva();
+	const { ref, inputClassName, label, tooltipText, helperText, isRequired, rightContent, isDisabled, isDirty, headerClassName, errorClassName, isHeaderHidden, error, className, unit, isLoading, action, leadingIcon, trailingIcon, value, onChange, onBlur, formatOptions = ui.numberInput.formatOptions, variant = ui.input.variant, as = ui.input.as, size = ui.input.size, hideLabel = ui.input.hideLabel, isClearable = ui.input.isClearable,...rest } = props;
+	const numberFieldRef = useRef(null);
+	const { isFocusVisible } = useFocusVisible();
+	const { locale } = useLocale();
+	const numberProps = {
+		...rest,
+		value: value ?? void 0,
+		label,
+		isDisabled,
+		isInvalid: !!error,
+		isRequired,
+		onChange,
+		onBlur: (e) => onBlur?.({ target: e.target }),
+		locale,
+		formatOptions
+	};
+	const { labelProps, inputProps } = useNumberField(numberProps, useNumberFieldState(numberProps), numberFieldRef);
+	const formFieldProps = {
+		error,
+		label,
+		tooltipText,
+		helperText,
+		isRequired,
+		rightContent,
+		isHeaderHidden: isHeaderHidden || as === "inline" || as === "filter" || as === "floating",
+		hideLabel,
+		isDisabled,
+		headerClassName,
+		errorClassName
+	};
+	const inputContentProps = {
+		unit,
+		isLoading,
+		isDisabled,
+		action,
+		leadingIcon,
+		trailingIcon,
+		isClearable,
+		value,
+		onChange: (val) => onChange?.(val === "" ? null : Number(val)),
+		onBlur: useCallback((e) => {
+			const target = numberFieldRef.current ?? e?.target;
+			onBlur?.({ target });
+		}, [onBlur])
+	};
+	const headerProps = {
+		label,
+		tooltipText,
+		helperText,
+		isRequired,
+		rightContent,
+		isHeaderHidden: hideLabel || isHeaderHidden,
+		isDisabled,
+		className: headerClassName,
+		labelProps
+	};
+	return /* @__PURE__ */ jsx(TooltipWrapper, {
+		as,
+		error,
+		triggerTabIndex: as === "inline" ? -1 : void 0,
+		children: /* @__PURE__ */ jsx(FormField, {
+			...formFieldProps,
+			as,
+			labelProps,
+			className: clsx("group w-full", className),
+			tabIndex: as === "inline" ? -1 : void 0,
+			children: /* @__PURE__ */ jsx(InputContent, {
+				...inputContentProps,
+				headerProps,
+				as,
+				size,
+				children: (style) => /* @__PURE__ */ jsx(Input, {
+					...inputProps,
+					ref,
+					"data-is-dirty": isDirty || void 0,
+					"data-is-required": isRequired || void 0,
+					"data-is-empty": value === null || value === void 0 || void 0,
+					placeholder: as === "floating" ? "" : inputProps.placeholder,
+					className: inputCva({
+						variant,
+						as,
+						size,
+						...rest,
+						className: inputClassName
+					}),
+					style,
+					onFocus: (e) => {
+						inputProps.onFocus?.(e);
+						if (isFocusVisible) e.target.select();
+					}
+				})
+			})
+		})
+	});
+};
+const NumberInput = (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(NumberInputBase, {
+				...innerProps,
+				ref: mergeRefs(ref, field.ref),
+				value: field.value,
+				onChange: field.onChange,
+				onBlur: field.onBlur,
+				isDirty,
+				isDisabled: field.disabled || props.isDisabled,
+				error: props.error ?? error?.message
+			}, field.value === null || field.value === void 0 ? "empty" : "filled")
+		});
+	}
+	return /* @__PURE__ */ jsx(NumberInputBase, { ...props }, props.value === null || props.value === void 0 ? "empty" : "filled");
+};
+export { NumberInput };

package/dist/NumberedList.js

@@ -0,0 +1,13 @@
+import { jsx } from "react/jsx-runtime";
+const NumberedListIcon = (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",
+		d: "M4.432 21.5a.58.58 0 0 1-.596-.596.58.58 0 0 1 .596-.596h1.904V19.25h-.904a.58.58 0 0 1-.596-.596.58.58 0 0 1 .596-.596h.904V17H4.432a.58.58 0 0 1-.596-.596.58.58 0 0 1 .596-.596h2.25q.36 0 .603.243a.82.82 0 0 1 .243.603v1.192q0 .36-.243.603a.82.82 0 0 1-.603.243q.36 0 .603.244a.82.82 0 0 1 .243.602v1.116q0 .36-.243.603a.82.82 0 0 1-.603.243zm.087-6.654a.66.66 0 0 1-.485-.198.66.66 0 0 1-.198-.484V12.25q0-.36.243-.603a.82.82 0 0 1 .603-.243h1.654v-1.058H4.432a.58.58 0 0 1-.596-.595.58.58 0 0 1 .596-.597h2.25q.36 0 .603.243a.82.82 0 0 1 .243.603v1.75a.82.82 0 0 1-.243.603.82.82 0 0 1-.603.243H5.028v1.058h1.904a.58.58 0 0 1 .596.595.58.58 0 0 1-.596.597zm1.414-6.654a.58.58 0 0 1-.597-.596V3.692h-.904a.58.58 0 0 1-.596-.595.58.58 0 0 1 .596-.597h1.423q.286 0 .48.193a.65.65 0 0 1 .193.48v4.423a.58.58 0 0 1-.595.596m4.46 10.558a.73.73 0 0 1-.534-.216.73.73 0 0 1-.215-.534q0-.32.215-.535a.73.73 0 0 1 .535-.215h9.692q.318 0 .534.216a.73.73 0 0 1 .216.534q0 .32-.216.535a.73.73 0 0 1-.534.215zm0-6a.73.73 0 0 1-.534-.216.73.73 0 0 1-.215-.534q0-.32.215-.534a.73.73 0 0 1 .535-.216h9.692q.318 0 .534.216a.73.73 0 0 1 .216.534q0 .32-.216.534a.73.73 0 0 1-.534.216zm0-6a.73.73 0 0 1-.534-.216A.73.73 0 0 1 9.644 6q0-.32.215-.535a.73.73 0 0 1 .535-.215h9.692q.318 0 .534.216a.73.73 0 0 1 .216.534q0 .32-.216.535a.73.73 0 0 1-.534.215z"
+	})
+});
+export { NumberedListIcon };

package/dist/PaginatedTable.js

@@ -0,0 +1,26 @@
+import { Pagination } from "./Pagination.js";
+import { Table } from "./Table.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+const PaginatedTable = ({ pagination, setPagination, items, totalItems,...rest }) => {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col gap-4",
+		children: [/* @__PURE__ */ jsx(Table, {
+			...rest,
+			items: items ?? []
+		}), /* @__PURE__ */ jsx(Pagination, {
+			page: pagination.pageIndex,
+			pageSize: pagination.pageSize,
+			totalItems: totalItems ?? 0,
+			onPageChange: (page) => setPagination({
+				...pagination,
+				pageIndex: page
+			}),
+			onPageSizeChange: (pageSize) => setPagination({
+				...pagination,
+				pageSize,
+				pageIndex: 1
+			})
+		})]
+	});
+};
+export { PaginatedTable };

package/dist/Pagination.js

@@ -0,0 +1,43 @@
+import { Typography } from "./Typography.js";
+import { ns } from "./i18n.js";
+import { NumberInput } from "./NumberInput.js";
+import { PaginationList } from "./PaginationList.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { useTranslation } from "react-i18next";
+const Pagination = ({ size = "s", variant = "subtle", color = "secondary", page, totalItems, totalPages, pageSize, hideText = true, hideFirstLast = true, hidePrevNext = false, hideNumbers = false, className, onPageChange, onPageSizeChange }) => {
+	const { t } = useTranslation("ui");
+	return /* @__PURE__ */ jsxs("nav", {
+		id: "pagination",
+		className: clsx("flex items-center gap-2", className),
+		children: [totalItems > pageSize && /* @__PURE__ */ jsx(PaginationList, {
+			page,
+			size,
+			color,
+			variant,
+			hideText,
+			hideFirstLast,
+			hidePrevNext,
+			hideNumbers,
+			totalPages: totalPages ?? Math.ceil(totalItems / pageSize),
+			onPageChange
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-2",
+			children: [/* @__PURE__ */ jsx(Typography, {
+				variant: "default",
+				size: "label-2",
+				as: "span",
+				className: "whitespace-nowrap text-text-default-1",
+				children: t(($) => $.ui.pagination.resultsPerPage)
+			}), /* @__PURE__ */ jsx(NumberInput, {
+				value: pageSize,
+				onChange: (value) => onPageSizeChange?.(Number(value)),
+				label: t(($) => $.ui.pagination.resultsPerPage),
+				hideLabel: true,
+				className: "w-min",
+				inputClassName: "min-w-12 !px-3 !py-0-5"
+			})]
+		})]
+	});
+};
+export { Pagination };

package/dist/PaginationList.js

@@ -0,0 +1,105 @@
+import { ChevronLeftIcon } from "./ChevronLeft.js";
+import { ChevronRightIcon } from "./ChevronRight.js";
+import { ChevronsLeftIcon } from "./ChevronsLeft.js";
+import { ChevronsRightIcon } from "./ChevronsRight.js";
+import { Button } from "./Button.js";
+import { ns } from "./i18n.js";
+import { minWidth } from "./minWidth.cva.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { useMemo } from "react";
+import { useTranslation } from "react-i18next";
+const PaginationList = ({ page, totalPages, size, color, variant, hideText, hideFirstLast, hidePrevNext, hideNumbers, className, onPageChange }) => {
+	const { t } = useTranslation("ui");
+	const isPrevDisabled = page <= 1;
+	const isNextDisabled = page >= totalPages;
+	const renderPageNumbers = useMemo(() => {
+		const pagesToShow = [];
+		pagesToShow.push(1);
+		if (page > 3) pagesToShow.push("ellipsis");
+		for (let i = Math.max(2, page - 1); i <= Math.min(totalPages - 1, page + 1); i++) pagesToShow.push(i);
+		if (page < totalPages - 2) pagesToShow.push("ellipsis");
+		if (totalPages > 1 && !pagesToShow.includes(totalPages)) pagesToShow.push(totalPages);
+		return pagesToShow.map((p, index) => {
+			if (p === "ellipsis") return /* @__PURE__ */ jsx(Button, {
+				variant,
+				color,
+				size,
+				width: "fill",
+				className: clsx(minWidth({ size })),
+				children: "..."
+			}, `ellipsis-${index}`);
+			return /* @__PURE__ */ jsx(Button, {
+				width: "hug",
+				size,
+				variant,
+				color,
+				"data-selected": p === page ? true : void 0,
+				className: clsx(p.toString().length <= 2 && minWidth({ size })),
+				onPress: () => onPageChange?.(p),
+				children: p.toString()
+			}, `page-${p}`);
+		});
+	}, [
+		page,
+		color,
+		size,
+		variant,
+		totalPages,
+		onPageChange
+	]);
+	if (totalPages <= 1) return null;
+	const onNext = () => {
+		if (!isNextDisabled) onPageChange?.(page + 1);
+	};
+	const onPrevious = () => {
+		if (!isPrevDisabled) onPageChange?.(page - 1);
+	};
+	return /* @__PURE__ */ jsxs("nav", {
+		className: clsx("flex items-center gap-pagination-button-to-button", className),
+		children: [
+			!hideFirstLast && /* @__PURE__ */ jsx(Button, {
+				onClick: () => onPageChange?.(1),
+				isDisabled: isPrevDisabled,
+				size,
+				color,
+				variant,
+				iconOnly: hideText,
+				icon: ChevronsLeftIcon,
+				children: t(($) => $.ui.pagination.firstBtn)
+			}),
+			!hidePrevNext && /* @__PURE__ */ jsx(Button, {
+				onClick: onPrevious,
+				isDisabled: isPrevDisabled,
+				size,
+				color,
+				variant,
+				iconOnly: hideText,
+				icon: ChevronLeftIcon,
+				children: t(($) => $.ui.pagination.backBtn)
+			}),
+			!hideNumbers && renderPageNumbers,
+			!hidePrevNext && /* @__PURE__ */ jsx(Button, {
+				onClick: onNext,
+				isDisabled: isNextDisabled,
+				size,
+				color,
+				variant,
+				iconOnly: hideText,
+				icon: ChevronRightIcon,
+				children: t(($) => $.ui.pagination.nextBtn)
+			}),
+			!hideFirstLast && /* @__PURE__ */ jsx(Button, {
+				onClick: () => onPageChange?.(totalPages),
+				isDisabled: isNextDisabled,
+				size,
+				color,
+				variant,
+				iconOnly: hideText,
+				icon: ChevronsRightIcon,
+				children: t(($) => $.ui.pagination.lastBtn)
+			})
+		]
+	});
+};
+export { PaginationList };

package/dist/PasswordInput.js

@@ -0,0 +1,21 @@
+import { ViewIcon } from "./View.js";
+import { ViewOffIcon } from "./ViewOff.js";
+import { ns } from "./i18n.js";
+import { TextInput } from "./TextInput.js";
+import { jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+const PasswordInput = (props) => {
+	const { t } = useTranslation("ui");
+	const [isRevealed, setIsRevealed] = useState(false);
+	return /* @__PURE__ */ jsx(TextInput, {
+		...props,
+		type: isRevealed ? "text" : "password",
+		action: {
+			icon: isRevealed ? ViewIcon : ViewOffIcon,
+			altText: t(($) => isRevealed ? $.ui.password.hide : $.ui.password.reveal),
+			onClick: () => setIsRevealed(!isRevealed)
+		}
+	});
+};
+export { PasswordInput };

package/dist/PillButton.js

@@ -0,0 +1,37 @@
+import { CloseIcon } from "./Close.js";
+import { UIStyle } from "./uiStyle.context.js";
+import { ButtonContent } from "./ButtonContent.js";
+import { TooltipEllipsis } from "./TooltipEllipsis.js";
+import { pillButton, pillButtonContent, pillButtonIconSize, pillButtonTypography } from "./pillButton.cva.js";
+import { jsx } from "react/jsx-runtime";
+import { Button, ToggleButton } from "react-aria-components";
+const PillButton = ({ children, dismissable, toggle, icon, iconPosition,...props }) => {
+	const uiStyle = UIStyle.useConfig();
+	const pillButtonCva = uiStyle?.pillButton?.cva ?? pillButton;
+	const pillButtonTypographyMap = uiStyle?.pillButton?.typography ?? pillButtonTypography;
+	const Component = toggle ? ToggleButton : Button;
+	const getIconPosition = () => {
+		if (dismissable) return "right";
+		return icon ? iconPosition : "none";
+	};
+	return /* @__PURE__ */ jsx(TooltipEllipsis, {
+		text: children,
+		children: (onContentRef) => /* @__PURE__ */ jsx(Component, {
+			...props,
+			className: pillButtonCva({
+				...props,
+				className: props.className
+			}),
+			children: /* @__PURE__ */ jsx(ButtonContent, {
+				text: children,
+				ref: onContentRef,
+				icon: dismissable ? CloseIcon : icon,
+				iconPosition: dismissable ? "right" : iconPosition,
+				className: pillButtonContent({ iconPosition: getIconPosition() }),
+				iconClassName: pillButtonIconSize,
+				typography: pillButtonTypographyMap({ ...props })
+			})
+		})
+	});
+};
+export { PillButton };

package/dist/PointerHorizontal.js

@@ -0,0 +1,13 @@
+import { jsx } from "react/jsx-runtime";
+const PointerHorizontalIcon = (props) => /* @__PURE__ */ jsx("svg", {
+	xmlns: "http://www.w3.org/2000/svg",
+	fill: "none",
+	viewBox: "0 0 20 10",
+	className: "fill-current",
+	...props,
+	children: /* @__PURE__ */ jsx("path", {
+		fill: "currentColor",
+		d: "M8.586 1.414a2 2 0 0 1 2.828 0L20 10H0z"
+	})
+});
+export { PointerHorizontalIcon };

package/dist/PointerVertical.js

@@ -0,0 +1,13 @@
+import { jsx } from "react/jsx-runtime";
+const PointerVerticalIcon = (props) => /* @__PURE__ */ jsx("svg", {
+	xmlns: "http://www.w3.org/2000/svg",
+	fill: "none",
+	viewBox: "0 0 10 20",
+	className: "fill-current",
+	...props,
+	children: /* @__PURE__ */ jsx("path", {
+		fill: "currentColor",
+		d: "M1.414 11.414a2 2 0 0 1 0-2.828L10 0v20z"
+	})
+});
+export { PointerVerticalIcon };

package/dist/ProgressBar.js

@@ -0,0 +1,25 @@
+import { Typography } from "./Typography.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import clsx$1 from "clsx";
+const ProgressBar = ({ progress = 0, valueLabel = "trailing" }) => {
+	return /* @__PURE__ */ jsxs("div", {
+		className: clsx$1("flex w-full items-center justify-center gap-file-upload-content-gap-progress-actions", valueLabel === "leading" && "flex-row-reverse"),
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "flex flex-fill flex-col items-start gap-2 py-progress-height-height",
+			children: /* @__PURE__ */ jsxs("div", {
+				className: "relative h-1 w-full",
+				children: [/* @__PURE__ */ jsx("div", { className: "h-1 w-full shrink-0 rounded-xs bg-input-filled-idle" }), /* @__PURE__ */ jsx("div", {
+					className: "absolute top-0 left-0 h-1 shrink-0 rounded-xs bg-interactive-contained-primary-idle transition-all duration-300",
+					style: { width: `${progress}%` }
+				})]
+			})
+		}), valueLabel !== "none" && /* @__PURE__ */ jsxs(Typography, {
+			variant: "default",
+			size: "label-2",
+			as: "span",
+			className: "text-center text-text-default-3",
+			children: [progress, "%"]
+		})]
+	});
+};
+export { ProgressBar };

package/dist/QueryAutocomplete.js

@@ -0,0 +1,18 @@
+import { Autocomplete } from "./Autocomplete.js";
+import { jsx } from "react/jsx-runtime";
+import { useState } from "react";
+const QueryAutocomplete = ({ query, queryParams, queryOptions,...props }) => {
+	const [search, setSearch] = useState("");
+	const { data: items, isLoading } = query({
+		search,
+		...queryParams
+	}, queryOptions);
+	return /* @__PURE__ */ jsx(Autocomplete, {
+		...props,
+		items: items ?? [],
+		onSearchChange: setSearch,
+		isClientSearchDisabled: true,
+		isLoading
+	});
+};
+export { QueryAutocomplete };