@povio/ui 2.1.14 → 2.1.16

package/dist/RadioGroup.js

@@ -0,0 +1,81 @@
+import { UIStyle } from "./uiStyle.context.js";
+import { CheckContent } from "./CheckContent.js";
+import { UIConfig } from "./uiConfig.context.js";
+import { FormField } from "./FormField.js";
+import { radio, radioIndicatorClass, radioTypography } from "./radio.cva.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import clsx$1 from "clsx";
+import { Radio, RadioGroup } from "react-aria-components";
+import { mergeRefs } from "@react-aria/utils";
+import { Controller } from "react-hook-form";
+var RadioGroupBase = (props) => {
+	const ui = UIConfig.useConfig();
+	const uiStyle = UIStyle.useConfig();
+	const radioCva = uiStyle?.radio?.cva ?? radio;
+	const radioTypographyMap = uiStyle?.radio?.typography ?? radioTypography;
+	const { label, tooltipText, helperText, isDirty, isRequired, rightContent, isDisabled, headerClassName, errorClassName, labelClassName, inputClassName, isHeaderHidden, error, className, options, variant = ui.radioGroup.variant, hideLabel = ui.radioGroup.hideLabel,...rest } = props;
+	const formFieldProps = {
+		className,
+		error,
+		label,
+		tooltipText,
+		helperText,
+		isRequired,
+		rightContent,
+		isHeaderHidden,
+		hideLabel,
+		isDisabled,
+		headerClassName,
+		errorClassName
+	};
+	return /* @__PURE__ */ jsx(RadioGroup, {
+		...rest,
+		isDisabled,
+		isInvalid: !!error,
+		"data-is-dirty": isDirty || void 0,
+		"data-is-required": isRequired || void 0,
+		children: /* @__PURE__ */ jsx(FormField, {
+			...formFieldProps,
+			children: /* @__PURE__ */ jsx("div", {
+				className: clsx$1("flex flex-col", inputClassName),
+				children: options.map((option) => /* @__PURE__ */ jsxs(Radio, {
+					value: option.value,
+					className: radioIndicatorClass,
+					children: [/* @__PURE__ */ jsx("div", { className: radioCva({
+						variant,
+						...rest
+					}) }), /* @__PURE__ */ jsx(CheckContent, {
+						typography: radioTypographyMap({
+							variant,
+							...rest
+						}),
+						className: labelClassName,
+						children: option.label
+					})]
+				}, option.value))
+			})
+		})
+	});
+};
+const RadioGroup$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(RadioGroupBase, {
+				...innerProps,
+				ref: mergeRefs(ref, field.ref),
+				value: 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(RadioGroupBase, { ...props });
+};
+export { RadioGroup$1 as RadioGroup };

package/dist/RangeCalendar.js

@@ -0,0 +1,96 @@
+import { CalendarGrid } from "./CalendarGrid.js";
+import { CalendarSelectHeader } from "./CalendarSelectHeader.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { useMemo, useRef } from "react";
+import { useRangeCalendar } from "@react-aria/calendar";
+const RangeCalendar = ({ className, leftCalendarState, rightCalendarState, calendarProps, onApply, onRangeChange: _onRangeChange, onDateSelection, onDateHover, rangeSelection, hoverDate, onKeyboardNavigation }) => {
+	const leftRef = useRef(null);
+	const rightRef = useRef(null);
+	const { calendarProps: leftCalendarAriaProps } = useRangeCalendar(calendarProps, leftCalendarState, leftRef);
+	const { calendarProps: rightCalendarAriaProps } = useRangeCalendar(calendarProps, rightCalendarState, rightRef);
+	const leftDate = leftCalendarState.visibleRange.start;
+	const rightDate = rightCalendarState.visibleRange.start;
+	const handleLeftKeyboardNavigation = (event, date) => {
+		return onKeyboardNavigation?.(event, date, "left") ?? false;
+	};
+	const handleRightKeyboardNavigation = (event, date) => {
+		return onKeyboardNavigation?.(event, date, "right") ?? false;
+	};
+	const handleLeftNavigate = (newDate) => {
+		const rightCurrentDate = rightCalendarState.visibleRange.start;
+		if (newDate.year < rightCurrentDate.year || newDate.year === rightCurrentDate.year && newDate.month < rightCurrentDate.month) leftCalendarState.setFocusedDate(newDate);
+		else {
+			const closestValidDate = rightCurrentDate.subtract({ months: 1 });
+			leftCalendarState.setFocusedDate(closestValidDate);
+		}
+	};
+	const handleRightNavigate = (newDate) => {
+		const leftCurrentDate = leftCalendarState.visibleRange.start;
+		if (newDate.year > leftCurrentDate.year || newDate.year === leftCurrentDate.year && newDate.month > leftCurrentDate.month) rightCalendarState.setFocusedDate(newDate);
+		else {
+			const closestValidDate = leftCurrentDate.add({ months: 1 });
+			rightCalendarState.setFocusedDate(closestValidDate);
+		}
+	};
+	const isNextDisabled = useMemo(() => {
+		const leftNextDate = leftDate.add({ months: 1 });
+		return leftNextDate.year > rightDate.year || leftNextDate.year === rightDate.year && leftNextDate.month === rightDate.month;
+	}, [leftDate, rightDate]);
+	const isPrevDisabled = useMemo(() => {
+		const rightPrevDate = rightDate.subtract({ months: 1 });
+		return rightPrevDate.year < leftDate.year || rightPrevDate.year === leftDate.year && rightPrevDate.month === leftDate.month;
+	}, [leftDate, rightDate]);
+	return /* @__PURE__ */ jsx("div", {
+		className: clsx("flex w-fit flex-col items-center bg-elevation-fill-default-1", className),
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "flex",
+			children: [/* @__PURE__ */ jsxs("div", {
+				...leftCalendarAriaProps,
+				ref: leftRef,
+				className: "flex flex-col items-center",
+				children: [/* @__PURE__ */ jsx(CalendarSelectHeader, {
+					state: leftCalendarState,
+					isNextMonthDisabled: isNextDisabled,
+					isNextYearDisabled: isNextDisabled,
+					onNavigate: handleLeftNavigate,
+					maxDate: rightDate
+				}), /* @__PURE__ */ jsx(CalendarGrid, {
+					state: leftCalendarState,
+					onApply,
+					shouldCloseOnSelect: false,
+					onDateSelection,
+					rangeSelection,
+					onDateHover,
+					hoverDate,
+					onKeyboardNavigation: handleLeftKeyboardNavigation,
+					className: "h-64 w-[304px]!",
+					calendarSide: "left"
+				})]
+			}), /* @__PURE__ */ jsxs("div", {
+				...rightCalendarAriaProps,
+				ref: rightRef,
+				className: "hidden flex-col items-center md:flex",
+				children: [/* @__PURE__ */ jsx(CalendarSelectHeader, {
+					state: rightCalendarState,
+					isPrevMonthDisabled: isPrevDisabled,
+					isPrevYearDisabled: isPrevDisabled,
+					onNavigate: handleRightNavigate,
+					minDate: leftDate
+				}), /* @__PURE__ */ jsx(CalendarGrid, {
+					state: rightCalendarState,
+					onApply,
+					shouldCloseOnSelect: false,
+					onDateSelection,
+					rangeSelection,
+					onDateHover,
+					hoverDate,
+					onKeyboardNavigation: handleRightKeyboardNavigation,
+					className: "h-64 w-[304px]!",
+					calendarSide: "right"
+				})]
+			})]
+		})
+	});
+};
+export { RangeCalendar };

package/dist/ResponsivePopover.js

@@ -0,0 +1,41 @@
+import { BottomSheet } from "./BottomSheet.js";
+import { useBreakpoint } from "./useBreakpoint.js";
+import { FormFieldHeader } from "./FormFieldHeader.js";
+import { FormFieldHeaderClose } from "./FormFieldHeaderClose.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { Dialog, DialogTrigger, Popover } from "react-aria-components";
+const ResponsivePopover = ({ trigger, isOpen, onOpenChange, children, popoverClassName, sheetLabel }) => {
+	if (!useBreakpoint("md")) return /* @__PURE__ */ jsx(BottomSheet, {
+		isOpen,
+		onOpenChange,
+		trigger,
+		height: "auto",
+		isDismissable: true,
+		children: (close) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(FormFieldHeader, {
+			label: sheetLabel,
+			rightContent: /* @__PURE__ */ jsx(FormFieldHeaderClose, { onClose: close }),
+			className: "px-4 pt-3"
+		}), /* @__PURE__ */ jsx("div", {
+			className: "p-4",
+			children
+		})] })
+	});
+	return /* @__PURE__ */ jsxs(DialogTrigger, {
+		isOpen,
+		onOpenChange,
+		children: [trigger, /* @__PURE__ */ jsx(Popover, {
+			className: clsx("my-4 outline-none", popoverClassName),
+			offset: 0,
+			placement: "bottom start",
+			children: /* @__PURE__ */ jsx(Dialog, {
+				className: "outline-none",
+				children: /* @__PURE__ */ jsx("div", {
+					className: clsx("overflow-hidden p-2 shadow-5 outline-none", "rounded-s border border-elevation-outline-default-1 bg-elevation-fill-default-1"),
+					children
+				})
+			})
+		})]
+	});
+};
+export { ResponsivePopover };

package/dist/Segment.js

@@ -0,0 +1,82 @@
+import { UIStyle } from "./uiStyle.context.js";
+import { FormField } from "./FormField.js";
+import { segmentCva } from "./segment.cva.js";
+import { SegmentItem } from "./SegmentItem.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { ToggleButtonGroup } from "react-aria-components";
+import { Fragment as Fragment$1, useMemo, useRef } from "react";
+import { useToggleButtonGroup } from "react-aria";
+import { mergeRefs } from "@react-aria/utils";
+import { Controller } from "react-hook-form";
+import { useToggleGroupState } from "react-stately";
+var SegmentBase = ({ className, items, error, onChange, value, defaultValue,...rest }) => {
+	const props = {
+		...rest,
+		defaultSelectedKeys: defaultValue ? Array.isArray(defaultValue) ? defaultValue : [defaultValue] : void 0,
+		selectedKeys: value ? Array.isArray(value) ? value : [value] : void 0
+	};
+	const buttonGroupRef = useRef(null);
+	const uiStyle = UIStyle.useConfig();
+	const state = useToggleGroupState(props);
+	const { groupProps } = useToggleButtonGroup(props, state, buttonGroupRef);
+	const segmentCva$1 = uiStyle?.segment?.cva ?? segmentCva;
+	const formFieldProps = {
+		error,
+		label: "",
+		hideLabel: true,
+		isDisabled: props.isDisabled
+	};
+	const onSelectionChange = (keys) => {
+		if (props.selectionMode === "multiple") onChange?.(Array.from(keys.values()));
+		else onChange?.(Array.from(keys.values())[0]);
+	};
+	const gridTemplateColumns = useMemo(() => {
+		return items.length > 2 ? Array.from({ length: items.length * 2 - 1 }, (_, i) => i % 2 === 0 ? "1fr" : "auto").join(" ") : `repeat(${items.length}, 1fr)`;
+	}, [items.length]);
+	return /* @__PURE__ */ jsx(FormField, {
+		...formFieldProps,
+		className: clsx("relative w-full", className),
+		children: /* @__PURE__ */ jsx(ToggleButtonGroup, {
+			...props,
+			...groupProps,
+			ref: buttonGroupRef,
+			onSelectionChange,
+			className: segmentCva$1({
+				...props,
+				className
+			}),
+			style: { gridTemplateColumns },
+			children: items.map((item, index) => /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(SegmentItem, {
+				...item,
+				isDisabled: item.isDisabled || props.isDisabled,
+				isSelected: state.selectedKeys.has(item.id),
+				onPress: () => {
+					state.toggleKey(item.id);
+				}
+			}), index !== items.length - 1 && items.length > 2 && /* @__PURE__ */ jsx("div", {
+				className: clsx("h-5 w-px rounded-2xl", !state.selectedKeys.has(item.id) && !state.selectedKeys.has(items[index + 1].id) && "bg-elevation-outline-default-1"),
+				children: /* @__PURE__ */ jsx("span", { className: "flex h-full w-px" })
+			})] }, item.id))
+		})
+	});
+};
+const Segment = (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 } }) => /* @__PURE__ */ jsx(SegmentBase, {
+				...innerProps,
+				ref: mergeRefs(ref, field.ref),
+				value: field.value,
+				onChange: field.onChange,
+				isDisabled: field.disabled || props.isDisabled,
+				error: props.error ?? error?.message
+			})
+		});
+	}
+	return /* @__PURE__ */ jsx(SegmentBase, { ...props });
+};
+export { Segment };

package/dist/SegmentItem.js

@@ -0,0 +1,23 @@
+import { UIStyle } from "./uiStyle.context.js";
+import { Typography } from "./Typography.js";
+import { segmentItemCva } from "./segment.cva.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ToggleButton } from "react-aria-components";
+const SegmentItem = ({ label, icon, id, isDisabled,...props }) => {
+	const IconComponent = icon;
+	const iconOnly = !!(icon && !label);
+	const segmentItemCva$1 = UIStyle.useConfig()?.segment?.itemCva ?? segmentItemCva;
+	return /* @__PURE__ */ jsxs(ToggleButton, {
+		...props,
+		id,
+		className: segmentItemCva$1({ iconOnly }),
+		isDisabled,
+		children: [icon && /* @__PURE__ */ jsx(IconComponent, { className: "size-6" }), label && /* @__PURE__ */ jsx(Typography, {
+			size: "label-2",
+			as: "span",
+			className: "overflow-hidden text-ellipsis text-center",
+			children: label
+		})]
+	});
+};
+export { SegmentItem };

package/dist/Select.js

@@ -0,0 +1,24 @@
+import { SelectBase } from "./SelectBase.js";
+import { jsx } from "react/jsx-runtime";
+import { mergeRefs } from "@react-aria/utils";
+import { Controller } from "react-hook-form";
+const Select = (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 } }) => /* @__PURE__ */ jsx(SelectBase, {
+				...innerProps,
+				ref: mergeRefs(ref, field.ref),
+				value: field.value,
+				onChange: field.onChange,
+				onBlur: field.onBlur,
+				isDisabled: field.disabled || props.isDisabled,
+				error: props.error ?? error?.message
+			})
+		});
+	}
+	return /* @__PURE__ */ jsx(SelectBase, { ...props });
+};
+export { Select };

package/dist/SelectBase.js

@@ -0,0 +1,28 @@
+import { useBreakpoint } from "./useBreakpoint.js";
+import { UIConfig } from "./uiConfig.context.js";
+import { SelectContext } from "./select.context.js";
+import { SelectDesktop } from "./SelectDesktop.js";
+import { SelectMobile } from "./SelectMobile.js";
+import { jsx } from "react/jsx-runtime";
+const SelectBase = (dProps) => {
+	const ui = UIConfig.useConfig();
+	const props = {
+		...dProps,
+		selectionMode: dProps.selectionMode ?? ui.select.selectionMode,
+		variant: dProps.variant ?? ui.input.variant,
+		as: dProps.as ?? ui.input.as,
+		size: dProps.size ?? ui.input.size,
+		hideLabel: dProps.hideLabel ?? ui.input.hideLabel,
+		isClearable: dProps.isClearable ?? ui.input.isClearable,
+		isSearchable: dProps.isSearchable ?? ui.select.isSearchable,
+		selectedTagsType: dProps.selectedTagsType ?? ui.select.selectedTagsType,
+		ignoreTriggerWidth: dProps.virtualizerOptions || dProps.items.length > 100 ? false : dProps.ignoreTriggerWidth ?? false,
+		collapseAfter: dProps.collapseAfter ?? ui.select.collapseAfter
+	};
+	const isDesktop = useBreakpoint("md");
+	return /* @__PURE__ */ jsx(SelectContext.Provider, {
+		...props,
+		children: isDesktop ? /* @__PURE__ */ jsx(SelectDesktop, { ...props }) : /* @__PURE__ */ jsx(SelectMobile, { ...props })
+	});
+};
+export { SelectBase };

package/dist/SelectDesktop.js

@@ -0,0 +1,147 @@
+import { FormField } from "./FormField.js";
+import { TooltipWrapper } from "./TooltipWrapper.js";
+import { SelectAllItemId } from "./useSelectItems.js";
+import { SelectContext } from "./select.context.js";
+import { SelectInput } from "./SelectInput.js";
+import { SelectListBox } from "./SelectListBox.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { ComboBox, DialogTrigger, Popover } from "react-aria-components";
+import { Fragment as Fragment$1, useMemo, useRef } from "react";
+import { useLabel } from "react-aria";
+import { mergeRefs } from "@react-aria/utils";
+import useMeasure from "react-use-measure";
+const SelectDesktop = ({ ref, error, ignoreTriggerWidth, showSelectionContent, inputClassName, containerClassName, customTrigger, onBlur,...props }) => {
+	const { label, tooltipText, helperText, isRequired, rightContent, isHeaderHidden, headerClassName, errorClassName, placeholder, variant, isDisabled, className, hideLabel, hideDropdownIcon, isSearchable, isClearable, isLoading, as, size, collapseAfter, selectedTagsType } = props;
+	const formFieldProps = {
+		error,
+		label,
+		tooltipText,
+		helperText,
+		isRequired,
+		rightContent,
+		isHeaderHidden: isHeaderHidden || as === "inline" || as === "filter" || as === "floating",
+		hideLabel,
+		isDisabled,
+		headerClassName,
+		errorClassName
+	};
+	const { labelProps, fieldProps } = useLabel({ label });
+	const triggerRef = useRef(null);
+	const closeComboBoxRef = useRef(null);
+	const [wrapperRef, { width }] = useMeasure();
+	const { fieldState, isOpen, setIsOpen, onInputChange, onChange, onClear, onSelectAll, listItems, selectableListItems, selectedIds, isMultiple } = SelectContext.useSelect();
+	const onSelectionChange = (value) => {
+		if (!value) return;
+		if (value === "all-item-id") {
+			if (selectedIds.length === selectableListItems.length) onClear();
+			else onSelectAll();
+			return;
+		}
+		if (!isMultiple) {
+			onChange(value);
+			return;
+		}
+		if (!Array.isArray(fieldState.value)) {
+			onChange([value]);
+			return;
+		}
+		if (fieldState.value.includes(value)) onChange(fieldState.value.filter((id) => id !== value));
+		else onChange(fieldState.value.concat(value));
+	};
+	const openChangeHandler = (value) => {
+		if (closeComboBoxRef.current && value) {
+			closeComboBoxRef.current.setOpen(false);
+			closeComboBoxRef.current = null;
+		} else setIsOpen(value);
+	};
+	const WrapperComponent = isSearchable ? ComboBox : Fragment$1;
+	const comboBoxProps = {
+		items: listItems,
+		selectedKey: isMultiple ? null : fieldState.value,
+		onSelectionChange,
+		inputValue: fieldState.inputValue,
+		onInputChange,
+		onOpenChange: openChangeHandler,
+		allowsEmptyCollection: true,
+		isDisabled,
+		isInvalid: !!error,
+		menuTrigger: "focus",
+		className: clsx("w-full", containerClassName)
+	};
+	const headerProps = {
+		label,
+		tooltipText,
+		helperText,
+		isRequired,
+		rightContent,
+		isHeaderHidden: hideLabel || isHeaderHidden,
+		isDisabled,
+		className: headerClassName,
+		labelProps
+	};
+	const dialogTriggerProps = {
+		isOpen,
+		onOpenChange: setIsOpen
+	};
+	const showPopover = useMemo(() => listItems.filter((item) => !item.isSelectAllItem).length > 0 || isLoading, [listItems, isLoading]);
+	return /* @__PURE__ */ jsx(TooltipWrapper, {
+		as,
+		error,
+		children: /* @__PURE__ */ jsx(WrapperComponent, {
+			...isSearchable ? comboBoxProps : {},
+			children: /* @__PURE__ */ jsxs(FormField, {
+				...formFieldProps,
+				...!isSearchable && {
+					labelProps,
+					className: clsx("w-full", containerClassName)
+				},
+				as,
+				ref: wrapperRef,
+				children: [customTrigger ? /* @__PURE__ */ jsx(DialogTrigger, {
+					...dialogTriggerProps,
+					children: /* @__PURE__ */ jsx("div", {
+						...fieldProps,
+						ref: mergeRefs(ref, triggerRef),
+						children: customTrigger
+					})
+				}) : /* @__PURE__ */ jsx(SelectInput, {
+					ref: mergeRefs(ref, triggerRef),
+					placeholder,
+					variant,
+					as,
+					size,
+					isDisabled,
+					isInvalid: !!error,
+					className,
+					hideDropdownIcon,
+					isSearchable,
+					isClearable,
+					showSelectionContent,
+					inputClassName,
+					collapseAfter,
+					selectedTagsType,
+					onBlur,
+					onCloseComboBox: (state) => {
+						if (isSearchable) closeComboBoxRef.current = state;
+					},
+					fieldProps,
+					headerProps
+				}), (!isSearchable || showPopover) && /* @__PURE__ */ jsx(Popover, {
+					triggerRef,
+					isOpen,
+					onOpenChange: setIsOpen,
+					className: "my-4 outline-none",
+					style: { width: !ignoreTriggerWidth ? width : void 0 },
+					offset: 0,
+					children: /* @__PURE__ */ jsx(SelectListBox, {
+						...props,
+						className: "max-h-80 rounded-list-rounding-dropdown border border-elevation-outline-default-1 bg-elevation-fill-default-1 shadow-5 [scrollbar-width:thin]",
+						autoFocus: !isSearchable
+					})
+				})]
+			})
+		})
+	});
+};
+export { SelectDesktop };

package/dist/SelectInput.js

@@ -0,0 +1,159 @@
+import { ArrowDropDownIcon } from "./ArrowDropDown.js";
+import { UIStyle } from "./uiStyle.context.js";
+import { Typography } from "./Typography.js";
+import { inputBase, inputSide, inputSize } from "./input.cva.js";
+import { FormFieldLabel } from "./FormFieldLabel.js";
+import { ns } from "./i18n.js";
+import { InputClear } from "./InputClear.js";
+import { SelectInputTags } from "./SelectInputTags.js";
+import { SelectContext } from "./select.context.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { Button, ComboBoxStateContext, Input } from "react-aria-components";
+import { use, useMemo, useState } from "react";
+import { useFocusVisible, useFocusWithin, useHover } from "react-aria";
+import useMeasure from "react-use-measure";
+import { useTranslation } from "react-i18next";
+const SelectInput = ({ ref, placeholder, variant, as, size, isDisabled, isInvalid, className, hideDropdownIcon, isSearchable, isClearable, showSelectionContent, inputClassName, fieldProps, headerProps, selectedTagsType, collapseAfter, onCloseComboBox, onBlur,...props }) => {
+	const uiStyle = UIStyle.useConfig();
+	const inputSizeCva = uiStyle?.input?.sizeCva ?? inputSize;
+	const inputBaseCva = uiStyle?.input?.baseCva ?? inputBase;
+	const inputSideCva = uiStyle?.input?.sideCva ?? inputSide;
+	const { t } = useTranslation("ui");
+	const state = use(ComboBoxStateContext);
+	const { hoverProps, isHovered } = useHover({ isDisabled });
+	const [isFocused, setIsFocused] = useState(false);
+	const { focusWithinProps } = useFocusWithin({ onFocusWithinChange: setIsFocused });
+	const { isFocusVisible } = useFocusVisible();
+	const [labelContentRef, { width: labelWidth }] = useMeasure();
+	const { fieldState, isOpen, setIsOpen, listItems, selectedItems, onChange, onClear, onRemove, isMultiple, isLoading } = SelectContext.useSelect();
+	const isEmpty = selectedItems.length === 0;
+	const showTags = isMultiple && !isEmpty;
+	const showClearButton = isClearable && isHovered && (selectedItems.length > 0 || isSearchable && fieldState.inputValue !== "");
+	const style = useMemo(() => {
+		if (as !== "filter") return {};
+		return { paddingLeft: `calc(${isSearchable || showTags ? "1 * " : "2 * "}var(${inputSideCva({
+			size,
+			type: "var"
+		})}) + ${labelWidth}px)` };
+	}, [
+		labelWidth,
+		as,
+		size,
+		isSearchable,
+		showTags,
+		inputSideCva
+	]);
+	const labelProps = useMemo(() => {
+		const { labelProps: headerLabelProps } = headerProps ?? {};
+		if (!(as && ["filter", "floating"].includes(as)) || isSearchable) return headerLabelProps;
+		return {
+			...headerLabelProps,
+			className: clsx(headerLabelProps?.className, "pointer-events-none")
+		};
+	}, [
+		as,
+		headerProps,
+		isSearchable
+	]);
+	const onKeyDown = (e) => {
+		if (e.key === "Enter" && !isMultiple && !isLoading && listItems.length === 1 && !listItems[0].isDisabled) {
+			e.preventDefault();
+			onChange(listItems[0].id);
+			onCloseComboBox?.(state);
+		}
+		if (e.key === "Backspace" && isMultiple && fieldState.inputValue === "" && Array.isArray(fieldState.value) && fieldState.value.length > 0) onChange(fieldState.value.slice(0, -1));
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		className: inputBaseCva({
+			variant,
+			as,
+			...props,
+			className: clsx("group/select-content relative flex px-0!", isSearchable && "cursor-text", className)
+		}),
+		"data-rac": "",
+		"data-disabled": isDisabled,
+		"data-hovered": isHovered || void 0,
+		"data-focused": isOpen || isFocused || void 0,
+		"data-focus-within": isFocused || void 0,
+		"data-searchable-focus-within": isFocused && isSearchable || void 0,
+		"data-focus-visible": isFocused && isFocusVisible || void 0,
+		"data-has-selection": !isEmpty || void 0,
+		"data-has-search": fieldState.searchValue !== "" || void 0,
+		"data-invalid": isInvalid || void 0,
+		"data-is-empty": isEmpty || void 0,
+		...hoverProps,
+		...focusWithinProps,
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: clsx("relative flex flex-1 items-center truncate", showTags && inputSizeCva({
+					size,
+					...props
+				})),
+				children: [
+					as && ["filter", "floating"].includes(as) && headerProps && /* @__PURE__ */ jsx(FormFieldLabel, {
+						ref: labelContentRef,
+						as,
+						...headerProps,
+						labelProps
+					}),
+					(showTags || isSearchable) && /* @__PURE__ */ jsxs("div", {
+						className: clsx("flex flex-1 flex-wrap gap-2 truncate", !isSearchable && "pointer-events-none z-1"),
+						style,
+						children: [showTags && /* @__PURE__ */ jsx(SelectInputTags, {
+							selectedItems,
+							isDisabled,
+							collapseAfter,
+							selectedTagsType,
+							onRemove
+						}), isSearchable && /* @__PURE__ */ jsx(Input, {
+							placeholder,
+							onBlur,
+							className: clsx("flex-1 bg-transparent outline-none placeholder:text-text-default-3 disabled:text-interactive-text-secondary-disabled", !showTags && inputSizeCva({
+								size,
+								...props,
+								className: "rounded-input-rounding-default"
+							}), inputClassName),
+							onKeyDown,
+							...fieldProps
+						})]
+					}),
+					!isSearchable && /* @__PURE__ */ jsx(Button, {
+						isDisabled,
+						onPress: () => setIsOpen(!isOpen),
+						onBlur,
+						"data-type": "select-trigger",
+						className: inputSizeCva({
+							size,
+							...props,
+							className: clsx("w-full truncate text-start outline-none disabled:text-interactive-text-secondary-disabled", showTags && "absolute inset-0 z-0")
+						}),
+						style,
+						...fieldProps,
+						children: (isEmpty || !isMultiple) && /* @__PURE__ */ jsxs(Typography, {
+							size: "label-1",
+							className: clsx("truncate empty:before:inline-block empty:before:content-['']", isEmpty && "text-text-default-3"),
+							children: [isEmpty && placeholder, !isEmpty && (showSelectionContent ? selectedItems[0].content : selectedItems[0].label)]
+						})
+					})
+				]
+			}),
+			showClearButton && /* @__PURE__ */ jsx(InputClear, { onClear }),
+			!hideDropdownIcon && /* @__PURE__ */ jsx(Button, {
+				excludeFromTabOrder: true,
+				"aria-label": t(($) => isOpen ? $.ui.closeAlt : $.ui.openAlt),
+				className: clsx("self-stretch pl-1-5 outline-none", inputSizeCva({ size })),
+				isDisabled,
+				onPress: () => {
+					if (!isSearchable) setIsOpen(!isOpen);
+				},
+				children: /* @__PURE__ */ jsx(ArrowDropDownIcon, {
+					className: clsx("size-6 shrink-0", isOpen && "rotate-180", isDisabled ? "text-interactive-text-secondary-disabled" : "text-interactive-text-secondary-idle"),
+					"aria-hidden": "true"
+				})
+			})
+		]
+	});
+};
+export { SelectInput };