@povio/ui 2.2.0 → 2.2.2

package/dist/{TextInput.js → components/inputs/Input/TextInput/TextInput.js}

@@ -1,8 +1,9 @@
-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 { UIStyle } from "../../../../config/uiStyle.context.js";
+import { UIConfig } from "../../../../config/uiConfig.context.js";
+import { inputBase } from "../../shared/input.cva.js";
+import { FormField } from "../../FormField/FormField.js";
+import { TooltipWrapper } from "../../shared/TooltipWrapper.js";
+import { InputContent } from "../shared/InputContent.js";
 import { jsx } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { useRef } from "react";
@@ -12,8 +13,9 @@ import { mergeRefs } from "@react-aria/utils";
 import { Controller } from "react-hook-form";
 var TextInputBase = (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, as = ui.input.as, hideLabel = ui.input.hideLabel, variant = ui.input.variant, size = ui.input.size, isClearable = ui.input.isClearable,...rest } = props;
+	const inputBaseCva = UIStyle.useCva("input.baseCva", inputBase);
+	const inputRef = useRef(null);
+	const { ref, inputClassName, label, tooltipText, helperText, isRequired, rightContent, isDisabled, isDirty, headerClassName, errorClassName, isHeaderHidden, error, className, unit, isLoading, action, leadingIcon, trailingIcon, value, onChange, onBlur, as = ui.input.as, hideLabel = ui.input.hideLabel, variant = ui.input.variant, size = ui.input.size, isClearable = ui.input.isClearable, ...rest } = props;
 	const textFieldRef = useRef(null);
 	const { isFocusVisible } = useFocusVisible();
 	const { labelProps, inputProps } = useTextField({
@@ -72,31 +74,32 @@ var TextInputBase = (props) => {
 			labelProps,
 			className: clsx("group w-full", as === "inline" && "h-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-empty": value === "" || value === null || value === void 0 || void 0,
-					"data-is-dirty": isDirty || void 0,
-					"data-is-required": isRequired || void 0,
-					"data-is-disabled": isDisabled || 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();
-					}
+			children: /* @__PURE__ */ jsx("div", {
+				className: clsx("relative flex cursor-text has-disabled:cursor-default", inputBaseCva({
+					variant,
+					as,
+					...rest
+				}), inputClassName),
+				onClick: () => inputRef.current?.focus(),
+				children: /* @__PURE__ */ jsx(InputContent, {
+					...inputContentProps,
+					headerProps,
+					as,
+					size,
+					children: /* @__PURE__ */ jsx(Input, {
+						...inputProps,
+						ref: mergeRefs(ref, inputRef),
+						"data-is-empty": value === "" || value === null || value === void 0 || void 0,
+						"data-is-dirty": isDirty || void 0,
+						"data-is-required": isRequired || void 0,
+						"data-is-disabled": isDisabled || void 0,
+						placeholder: as === "floating" ? "" : inputProps.placeholder,
+						className: "w-full outline-none",
+						onFocus: (e) => {
+							inputProps.onFocus?.(e);
+							if (isFocusVisible) e.target.select();
+						}
+					})
 				})
 			})
 		})
@@ -104,7 +107,7 @@ var TextInputBase = (props) => {
 };
 const TextInput = (props) => {
 	if ("formControl" in props && props.formControl) {
-		const { formControl, ref,...innerProps } = props;
+		const { formControl, ref, ...innerProps } = props;
 		return /* @__PURE__ */ jsx(Controller, {
 			control: formControl.control,
 			name: formControl.name,

package/dist/components/inputs/Input/shared/InputContent.d.ts

@@ -1,4 +1,4 @@
-import { CSSProperties, FC, FocusEvent, ReactElement, ReactNode, SVGProps } from 'react';
+import { FC, FocusEvent, ReactElement, ReactNode, SVGProps } from 'react';
 import { InlineIconButtonProps } from '../../../buttons/InlineIconButton/InlineIconButton';
 import { FormFieldHeaderProps } from '../../FormField/FormFieldHeader';
 import { InputVariantProps } from '../../shared/input.cva';
@@ -22,7 +22,7 @@ export interface InputContentProps {
     headerProps?: FormFieldHeaderProps;
 }
 interface InputContentComponentProps extends InputContentProps, InputVariantProps {
-    children: (style: CSSProperties) => ReactNode;
+    children: ReactNode;
 }
 export declare const InputContent: ({ leadingIcon: LeadingIcon, trailingIcon: TrailingIcon, unit, isLoading, isDisabled, action, isClearable, value, onChange, onBlur, children, headerProps, as, size, }: InputContentComponentProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/inputs/Input/shared/InputContent.js

@@ -0,0 +1,74 @@
+import { UIStyle } from "../../../../config/uiStyle.context.js";
+import { typography } from "../../../text/Typography/typography.cva.js";
+import { Loader } from "../../../status/Loader/Loader.js";
+import { InlineIconButton } from "../../../buttons/InlineIconButton/InlineIconButton.js";
+import { FormFieldLabel } from "../../FormField/FormFieldLabel.js";
+import { InputClear } from "../../shared/InputClear.js";
+import { inputSize } from "../../shared/input.cva.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { isValidElement } from "react";
+const InputContent = ({ leadingIcon: LeadingIcon, trailingIcon: TrailingIcon, unit, isLoading, isDisabled, action, isClearable, value, onChange, onBlur, children, headerProps, as, size }) => {
+	const typographyCva = UIStyle.useCva("typography.cva", typography);
+	const inputSizeCva = UIStyle.useCva("input.sizeCva", inputSize);
+	const isLeadingIconElement = LeadingIcon && isValidElement(LeadingIcon);
+	const isTrailingIconElement = TrailingIcon && isValidElement(TrailingIcon);
+	const showClear = value != null && value !== "" && !isDisabled;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex w-full items-center gap-input-gap-input-text-to-elements",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: clsx(inputSizeCva({
+				size,
+				as
+			}), "group/input-content flex w-full items-center gap-input-gap-input-text-to-elements pr-0!", as === "inline" && "h-full"),
+			children: [LeadingIcon && /* @__PURE__ */ jsx("div", {
+				className: clsx(!isLeadingIconElement && "pointer-events-none"),
+				children: isLeadingIconElement ? LeadingIcon : /* @__PURE__ */ jsx(LeadingIcon, { className: "size-6 text-interactive-text-secondary-idle" })
+			}), /* @__PURE__ */ jsxs("div", {
+				className: clsx("flex w-full", as === "floating" && "flex-col", as === "filter" && "gap-input-gap-input-text-to-elements"),
+				children: [as && ["filter", "floating"].includes(as) && headerProps && /* @__PURE__ */ jsx(FormFieldLabel, {
+					as,
+					size,
+					...headerProps
+				}), children]
+			})]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: clsx(inputSizeCva({
+				size,
+				as
+			}), "flex items-center gap-input-gap-trailing-elements py-0! pl-0!", !isTrailingIconElement && !action && !(isClearable && showClear) && "pointer-events-none"),
+			children: [
+				isClearable && /* @__PURE__ */ jsx(InputClear, {
+					onClear: () => {
+						onChange?.("");
+						onBlur?.({ target: { value: "" } });
+					},
+					show: showClear
+				}),
+				unit && /* @__PURE__ */ jsx("span", {
+					className: typographyCva({
+						size: "label-2",
+						variant: "prominent-1",
+						className: "text-text-default-3"
+					}),
+					children: unit
+				}),
+				isLoading && /* @__PURE__ */ jsx("div", {
+					className: "inline-flex",
+					children: /* @__PURE__ */ jsx(Loader, {})
+				}),
+				!isLoading && action && /* @__PURE__ */ jsx(InlineIconButton, {
+					color: "secondary",
+					icon: action.icon,
+					isDisabled,
+					onPress: action.onClick,
+					excludeFromTabOrder: true,
+					label: action.altText,
+					className: clsx("border-0!", action.className)
+				}),
+				!isLoading && !action && TrailingIcon && (isTrailingIconElement ? TrailingIcon : /* @__PURE__ */ jsx(TrailingIcon, { className: "size-6 text-interactive-text-secondary-idle" }))
+			]
+		})]
+	});
+};
+export { InputContent };

package/dist/{Form.js → components/inputs/Inputs/Form.js}

@@ -1,12 +1,12 @@
 import { InputItem } from "./InputItem.js";
-import { StringUtils } from "./string.utils.js";
-import { ZodUtils } from "./zod.utils.js";
-import { getDefaultInputComponentType } from "./dynamicInputs.js";
+import { StringUtils } from "../../../utils/string.utils.js";
+import { ZodUtils } from "../../../utils/zod.utils.js";
+import { getDefaultInputComponentType } from "../../../helpers/dynamicInputs.js";
 import { jsx } from "react/jsx-runtime";
 import { useMemo } from "react";
 import { z } from "zod";
 var createFieldComponent = (field, schemaKeyType, form) => {
-	return function FieldComponent({ inputType, label, placeholder,...inputProps }) {
+	return function FieldComponent({ inputType, label, placeholder, ...inputProps }) {
 		return /* @__PURE__ */ jsx(InputItem, {
 			form,
 			inputDef: {

package/dist/{InputItem.js → components/inputs/Inputs/InputItem.js}

@@ -1,18 +1,18 @@
-import { Checkbox } from "./Checkbox.js";
-import { DatePicker } from "./DatePicker.js";
-import { TextInput } from "./TextInput.js";
-import { Select } from "./Select.js";
-import { DateRangePicker } from "./DateRangePicker.js";
-import { DateTimePicker } from "./DateTimePicker.js";
-import { TimePicker } from "./TimePicker.js";
-import { NumberInput } from "./NumberInput.js";
-import { PasswordInput } from "./PasswordInput.js";
-import { TextArea } from "./TextArea.js";
-import { Autocomplete } from "./Autocomplete.js";
-import { QueryAutocomplete } from "./QueryAutocomplete.js";
-import { Slider } from "./Slider.js";
-import { Toggle } from "./Toggle.js";
-import { Segment } from "./Segment.js";
+import { Checkbox } from "../Checkbox/Checkbox.js";
+import { DatePicker } from "../DateTime/DatePicker/DatePicker.js";
+import { TextInput } from "../Input/TextInput/TextInput.js";
+import { Select } from "../Selection/Select/Select.js";
+import { DateRangePicker } from "../DateTime/DateRangePicker/DateRangePicker.js";
+import { DateTimePicker } from "../DateTime/DateTimePicker/DateTimePicker.js";
+import { TimePicker } from "../DateTime/TimePicker/TimePicker.js";
+import { NumberInput } from "../Input/NumberInput/NumberInput.js";
+import { PasswordInput } from "../Input/PasswordInput/PasswordInput.js";
+import { TextArea } from "../Input/TextArea/TextArea.js";
+import { Autocomplete } from "../Selection/Autocomplete/Autocomplete.js";
+import { QueryAutocomplete } from "../Selection/Autocomplete/QueryAutocomplete.js";
+import { Slider } from "../Slider/Slider.js";
+import { Toggle } from "../Toggle/Toggle.js";
+import { Segment } from "../../segment/Segment.js";
 import { jsx } from "react/jsx-runtime";
 var componentRegistry = {
 	toggle: Toggle,

package/dist/{RadioGroup.js → components/inputs/RadioGroup/RadioGroup.js}

@@ -1,7 +1,7 @@
-import { UIStyle } from "./uiStyle.context.js";
-import { CheckContent } from "./CheckContent.js";
-import { UIConfig } from "./uiConfig.context.js";
-import { FormField } from "./FormField.js";
+import { UIStyle } from "../../../config/uiStyle.context.js";
+import { UIConfig } from "../../../config/uiConfig.context.js";
+import { CheckContent } from "../shared/CheckContent.js";
+import { FormField } from "../FormField/FormField.js";
 import { radio, radioIndicatorClass, radioTypography } from "./radio.cva.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import clsx$1 from "clsx";
@@ -10,10 +10,9 @@ 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 radioCva = UIStyle.useCva("radio.cva", radio);
+	const radioTypographyMap = UIStyle.useMapper("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,
@@ -59,7 +58,7 @@ var RadioGroupBase = (props) => {
 };
 const RadioGroup$1 = (props) => {
 	if ("formControl" in props && props.formControl) {
-		const { formControl, ref,...innerProps } = props;
+		const { formControl, ref, ...innerProps } = props;
 		return /* @__PURE__ */ jsx(Controller, {
 			control: formControl.control,
 			name: formControl.name,

package/dist/{radio.cva.js → components/inputs/RadioGroup/radio.cva.js}

@@ -1,5 +1,5 @@
-import { uiGroupOutlineClass } from "./outline.clsx.js";
-import { compoundMapper } from "./compoundMapper.js";
+import { uiGroupOutlineClass } from "../../outline.clsx.js";
+import { compoundMapper } from "../../../utils/compoundMapper.js";
 import { cva } from "class-variance-authority";
 const radio = cva([
 	"flex items-center justify-center border-2",

package/dist/{Autocomplete.js → components/inputs/Selection/Autocomplete/Autocomplete.js}

@@ -1,10 +1,10 @@
-import { SelectBase } from "./SelectBase.js";
+import { SelectBase } from "../shared/SelectBase.js";
 import { jsx } from "react/jsx-runtime";
 import { mergeRefs } from "@react-aria/utils";
 import { Controller } from "react-hook-form";
 const Autocomplete = (props) => {
 	if ("formControl" in props && props.formControl) {
-		const { formControl, ref,...innerProps } = props;
+		const { formControl, ref, ...innerProps } = props;
 		return /* @__PURE__ */ jsx(Controller, {
 			control: formControl.control,
 			name: formControl.name,

package/dist/{QueryAutocomplete.js → components/inputs/Selection/Autocomplete/QueryAutocomplete.js}

@@ -1,7 +1,7 @@
 import { Autocomplete } from "./Autocomplete.js";
 import { jsx } from "react/jsx-runtime";
 import { useState } from "react";
-const QueryAutocomplete = ({ query, queryParams, queryOptions,...props }) => {
+const QueryAutocomplete = ({ query, queryParams, queryOptions, ...props }) => {
 	const [search, setSearch] = useState("");
 	const { data: items, isLoading } = query({
 		search,

package/dist/{Select.js → components/inputs/Selection/Select/Select.js}

@@ -1,10 +1,10 @@
-import { SelectBase } from "./SelectBase.js";
+import { SelectBase } from "../shared/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;
+		const { formControl, ref, ...innerProps } = props;
 		return /* @__PURE__ */ jsx(Controller, {
 			control: formControl.control,
 			name: formControl.name,

package/dist/{SelectBase.js → components/inputs/Selection/shared/SelectBase.js}

@@ -1,5 +1,5 @@
-import { useBreakpoint } from "./useBreakpoint.js";
-import { UIConfig } from "./uiConfig.context.js";
+import { UIConfig } from "../../../../config/uiConfig.context.js";
+import { useBreakpoint } from "../../../../hooks/useBreakpoint.js";
 import { SelectContext } from "./select.context.js";
 import { SelectDesktop } from "./SelectDesktop.js";
 import { SelectMobile } from "./SelectMobile.js";

package/dist/{SelectDesktop.js → components/inputs/Selection/shared/SelectDesktop.js}

@@ -1,17 +1,16 @@
-import { FormField } from "./FormField.js";
-import { TooltipWrapper } from "./TooltipWrapper.js";
+import { FormField } from "../../FormField/FormField.js";
+import { TooltipWrapper } from "../../shared/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 { Fragment as Fragment$1, useMemo, useRef } from "react";
+import { Fragment as Fragment$1, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { ComboBox, DialogTrigger, Popover } from "react-aria-components";
-import { useLabel } from "react-aria";
+import { useLabel, usePreventScroll } 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 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,
@@ -29,8 +28,21 @@ const SelectDesktop = ({ ref, error, ignoreTriggerWidth, showSelectionContent, i
 	const { labelProps, fieldProps } = useLabel({ label });
 	const triggerRef = useRef(null);
 	const closeComboBoxRef = useRef(null);
-	const [wrapperRef, { width }] = useMeasure();
+	const wrapperRef = useRef(null);
+	const [popoverWidth, setPopoverWidth] = useState(void 0);
 	const { fieldState, isOpen, setIsOpen, onInputChange, onChange, onClear, onSelectAll, listItems, selectableListItems, selectedIds, isMultiple } = SelectContext.useSelect();
+	usePreventScroll({ isDisabled: !isOpen });
+	useLayoutEffect(() => {
+		if (!isOpen || !wrapperRef.current) return;
+		setPopoverWidth(wrapperRef.current.getBoundingClientRect().width);
+		const observer = new ResizeObserver((entries) => {
+			setPopoverWidth(entries[0].contentRect.width);
+		});
+		observer.observe(wrapperRef.current);
+		return () => {
+			observer.disconnect();
+		};
+	}, [isOpen]);
 	const onSelectionChange = (value) => {
 		if (!value) return;
 		if (value === "all-item-id") {
@@ -132,11 +144,11 @@ const SelectDesktop = ({ ref, error, ignoreTriggerWidth, showSelectionContent, i
 					isOpen,
 					onOpenChange: setIsOpen,
 					className: "my-4 outline-none",
-					style: { width: !ignoreTriggerWidth ? width : void 0 },
+					style: { width: !ignoreTriggerWidth ? popoverWidth : 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]",
+						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
 					})
 				})]

package/dist/{SelectInput.js → components/inputs/Selection/shared/SelectInput.js}

@@ -1,49 +1,32 @@
-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 { ArrowDropDownIcon } from "../../../../assets/icons/ArrowDropDown.js";
+import { UIStyle } from "../../../../config/uiStyle.context.js";
+import { Typography } from "../../../text/Typography/Typography.js";
+import { FormFieldLabel } from "../../FormField/FormFieldLabel.js";
+import { ns } from "../../../../config/i18n.js";
+import { InputClear } from "../../shared/InputClear.js";
+import { inputBase, inputSize } from "../../shared/input.cva.js";
 import { SelectInputTags } from "./SelectInputTags.js";
 import { SelectContext } from "./select.context.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
-import { use, useMemo, useState } from "react";
+import { use, useMemo, useRef, useState } from "react";
 import { Button, ComboBoxStateContext, Input } from "react-aria-components";
 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 SelectInput = ({ ref, placeholder, variant, as, size, isDisabled, isInvalid, className, hideDropdownIcon, isSearchable, isClearable, showSelectionContent, inputClassName, fieldProps, headerProps, selectedTagsType, collapseAfter, onCloseComboBox, onBlur, ...props }) => {
+	const inputSizeCva = UIStyle.useCva("input.sizeCva", inputSize);
+	const inputBaseCva = UIStyle.useCva("input.baseCva", inputBase);
 	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 inputRef = useRef(null);
 	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;
@@ -64,13 +47,21 @@ const SelectInput = ({ ref, placeholder, variant, as, size, isDisabled, isInvali
 		}
 		if (e.key === "Backspace" && isMultiple && fieldState.inputValue === "" && Array.isArray(fieldState.value) && fieldState.value.length > 0) onChange(fieldState.value.slice(0, -1));
 	};
+	const onClick = () => {
+		if (isDisabled) return;
+		if (!isSearchable) {
+			setIsOpen(!isOpen);
+			return;
+		}
+		inputRef.current?.focus();
+	};
 	return /* @__PURE__ */ jsxs("div", {
 		ref,
 		className: inputBaseCva({
 			variant,
 			as,
 			...props,
-			className: clsx("group/select-content relative flex px-0!", isSearchable && "cursor-text", className)
+			className: clsx("group/select-content relative flex px-0!", !isDisabled && isSearchable && "cursor-text", className)
 		}),
 		"data-rac": "",
 		"data-disabled": isDisabled || void 0,
@@ -88,21 +79,20 @@ const SelectInput = ({ ref, placeholder, variant, as, size, isDisabled, isInvali
 		...focusWithinProps,
 		children: [
 			/* @__PURE__ */ jsxs("div", {
-				className: clsx("relative flex flex-1 items-center truncate", showTags && inputSizeCva({
+				className: clsx("relative flex flex-1 items-center gap-input-gap-input-text-to-elements truncate", !isDisabled && isSearchable && "cursor-text", !isDisabled && !isSearchable && "cursor-pointer", inputSizeCva({
 					as,
 					size,
 					...props
 				})),
+				onClick,
 				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,
+						className: clsx("flex flex-1 flex-wrap gap-input-gap-input-text-to-elements truncate", !isSearchable && "pointer-events-none z-1"),
 						children: [showTags && /* @__PURE__ */ jsx(SelectInputTags, {
 							selectedItems,
 							isDisabled,
@@ -110,14 +100,10 @@ const SelectInput = ({ ref, placeholder, variant, as, size, isDisabled, isInvali
 							selectedTagsType,
 							onRemove
 						}), isSearchable && /* @__PURE__ */ jsx(Input, {
+							ref: inputRef,
 							placeholder: as === "floating" ? void 0 : placeholder,
 							onBlur,
-							className: clsx("w-full flex-1 bg-transparent outline-none placeholder:text-text-default-3 disabled:text-interactive-text-secondary-disabled", !showTags && inputSizeCva({
-								as,
-								size,
-								...props,
-								className: "rounded-input-rounding-default"
-							}), inputClassName),
+							className: clsx("w-full flex-1 bg-transparent outline-none placeholder:text-text-default-3 disabled:text-interactive-text-secondary-disabled", inputClassName),
 							onKeyDown,
 							...fieldProps
 						})]
@@ -127,13 +113,7 @@ const SelectInput = ({ ref, placeholder, variant, as, size, isDisabled, isInvali
 						onPress: () => setIsOpen(!isOpen),
 						onBlur,
 						"data-type": "select-trigger",
-						className: inputSizeCva({
-							size,
-							as,
-							...props,
-							className: clsx("w-full truncate text-start outline-none disabled:text-interactive-text-secondary-disabled", showTags && "absolute inset-0 z-0")
-						}),
-						style,
+						className: clsx("w-full truncate text-start outline-none disabled:text-interactive-text-secondary-disabled", showTags && "absolute inset-0 z-0"),
 						...fieldProps,
 						children: [(as === "floating" && isEmpty || isMultiple && !isEmpty) && /* @__PURE__ */ jsx(Fragment, { children: "\xA0" }), (isEmpty || !isMultiple) && (as !== "floating" || !isEmpty) && /* @__PURE__ */ jsxs(Typography, {
 							size: "label-1",
@@ -143,7 +123,10 @@ const SelectInput = ({ ref, placeholder, variant, as, size, isDisabled, isInvali
 					})
 				]
 			}),
-			showClearButton && /* @__PURE__ */ jsx(InputClear, { onClear }),
+			isClearable && /* @__PURE__ */ jsx(InputClear, {
+				onClear,
+				show: showClearButton
+			}),
 			!hideDropdownIcon && /* @__PURE__ */ jsx(Button, {
 				excludeFromTabOrder: true,
 				"aria-label": t(($) => isOpen ? $.ui.closeAlt : $.ui.openAlt),

package/dist/{SelectInputTags.js → components/inputs/Selection/shared/SelectInputTags.js}

@@ -1,4 +1,4 @@
-import { Tag } from "./Tag.js";
+import { Tag } from "../../../text/Tag/Tag.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useMemo } from "react";
 const SelectInputTags = ({ selectedItems, isDisabled, selectedTagsType, collapseAfter, onRemove }) => {

package/dist/{SelectListBox.js → components/inputs/Selection/shared/SelectListBox.js}

@@ -6,7 +6,7 @@ import { SelectListBoxLoadingItem } from "./SelectListBoxLoadingItem.js";
 import { jsx } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { ListBox, ListLayout, Virtualizer } from "react-aria-components";
-const SelectListBox = ({ label, selectionMode, isSearchable, isScrollable = true, virtualizerOptions, newItemRender, onLoadMore, className, onClose,...props }) => {
+const SelectListBox = ({ label, selectionMode, isSearchable, isScrollable = true, virtualizerOptions, newItemRender, onLoadMore, className, onClose, ...props }) => {
 	const { fieldState, onChange, listItems, selectableListItems, selectedIds, isMultiple, onClear, onSelectAll } = SelectContext.useSelect();
 	const onSelectionChange = (value) => {
 		const ids = Array.from(value);

package/dist/{SelectListBoxItem.js → components/inputs/Selection/shared/SelectListBoxItem.js}

@@ -1,5 +1,5 @@
-import { CheckboxCheckmark } from "./CheckboxCheckmark2.js";
-import { ns } from "./i18n.js";
+import { CheckboxCheckmark } from "../../Checkbox/CheckboxCheckmark.js";
+import { ns } from "../../../../config/i18n.js";
 import { SelectContext } from "./select.context.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";

package/dist/{SelectListBoxItemSelectAll.js → components/inputs/Selection/shared/SelectListBoxItemSelectAll.js}

@@ -1,5 +1,5 @@
-import { CheckboxCheckmark } from "./CheckboxCheckmark2.js";
-import { ns } from "./i18n.js";
+import { CheckboxCheckmark } from "../../Checkbox/CheckboxCheckmark.js";
+import { ns } from "../../../../config/i18n.js";
 import { SelectContext } from "./select.context.js";
 import { selectListBoxItemClass } from "./SelectListBoxItem.js";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/{SelectListBoxLoadingItem.js → components/inputs/Selection/shared/SelectListBoxLoadingItem.js}

@@ -1,8 +1,8 @@
-import { Loader } from "./Loader.js";
-import { ns } from "./i18n.js";
+import { Loader } from "../../../status/Loader/Loader.js";
+import { ns } from "../../../../config/i18n.js";
 import { SelectContext } from "./select.context.js";
 import { selectListBoxItemClass } from "./SelectListBoxItem.js";
-import { useIntersectionObserver } from "./useIntersectionObserver.js";
+import { useIntersectionObserver } from "../../../../hooks/useIntersectionObserver.js";
 import { jsx } from "react/jsx-runtime";
 import { useCallback } from "react";
 import { ListBoxItem } from "react-aria-components";

package/dist/{SelectListBoxSelectionBar.js → components/inputs/Selection/shared/SelectListBoxSelectionBar.js}

@@ -1,5 +1,5 @@
-import { TextButton } from "./TextButton.js";
-import { ns } from "./i18n.js";
+import { TextButton } from "../../../buttons/TextButton/TextButton.js";
+import { ns } from "../../../../config/i18n.js";
 import { SelectContext } from "./select.context.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";

package/dist/{SelectMobile.js → components/inputs/Selection/shared/SelectMobile.js}

@@ -1,18 +1,18 @@
-import { BottomSheet } from "./BottomSheet.js";
-import { FormFieldHeader } from "./FormFieldHeader.js";
-import { FormFieldHeaderClose } from "./FormFieldHeaderClose.js";
-import { FormField } from "./FormField.js";
+import { BottomSheet } from "../../../overlays/BottomSheet/BottomSheet.js";
+import { FormFieldHeader } from "../../FormField/FormFieldHeader.js";
+import { FormFieldHeaderClose } from "../../FormField/FormFieldHeaderClose.js";
+import { FormField } from "../../FormField/FormField.js";
 import { SelectContext } from "./select.context.js";
 import { SelectInput } from "./SelectInput.js";
 import { SelectListBox } from "./SelectListBox.js";
-import { TextInput } from "./TextInput.js";
+import { TextInput } from "../../Input/TextInput/TextInput.js";
 import { SelectListBoxSelectionBar } from "./SelectListBoxSelectionBar.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { useRef } from "react";
 import { DialogTrigger } from "react-aria-components";
 import { useLabel } from "react-aria";
-const SelectMobile = ({ ref, error, showSelectionContent, inputClassName, containerClassName, customTrigger, onBlur,...props }) => {
+const SelectMobile = ({ ref, error, showSelectionContent, inputClassName, containerClassName, customTrigger, onBlur, ...props }) => {
 	const { label, tooltipText, helperText, isRequired, rightContent, isHeaderHidden, headerClassName, errorClassName, placeholder, variant, isDisabled, className, hideLabel, hideDropdownIcon, isSearchable, isClearable, as, collapseAfter, selectedTagsType } = props;
 	const formFieldProps = {
 		error,