@povio/ui 2.2.11 → 2.3.0-rc.1

package/dist/components/inputs/Input/TextInput/TextInput.d.ts

@@ -13,9 +13,11 @@ interface TextInputBaseProps extends FormFieldProps, InputVariantProps, Omit<Inp
     type?: AllowedHTMLInputTypeAttribute;
     todayIcon?: boolean;
     isDirty?: boolean;
+    autoFocusOnMount?: boolean;
 }
 export interface TextInputProps extends TextInputBaseProps {
+    renderStaticInput?: boolean;
 }
 export type ControlledTextInputProps<TFieldValues extends FieldValues> = ControlProps<TextInputProps, TFieldValues>;
-export declare const TextInput: <TFieldValues extends FieldValues>(props: ControlledTextInputProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
+export declare const TextInput: <TFieldValues extends FieldValues>({ renderStaticInput, ...props }: ControlledTextInputProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/inputs/Input/TextInput/TextInput.js

@@ -3,20 +3,22 @@ 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 { InputFrame } from "../../Skeleton/InputFrame.js";
+import { useStaticInputHandoff } from "../../shared/useStaticInputHandoff.js";
 import { InputContent } from "../shared/InputContent.js";
 import { jsx } from "react/jsx-runtime";
 import { clsx } from "clsx";
-import { useRef } from "react";
+import { useEffect, useRef, useState } from "react";
 import { Input } from "react-aria-components";
 import { useFocusVisible, useTextField } from "react-aria";
 import { mergeRefs } from "@react-aria/utils";
-import { Controller } from "react-hook-form";
+import { Controller, useWatch } from "react-hook-form";
 //#region src/components/inputs/Input/TextInput/TextInput.tsx
 var TextInputBase = (props) => {
 	const ui = UIConfig.useConfig();
 	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 { 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, autoFocusOnMount, ...rest } = props;
 	const textFieldRef = useRef(null);
 	const { isFocusVisible } = useFocusVisible();
 	const { labelProps, inputProps } = useTextField({
@@ -29,6 +31,10 @@ var TextInputBase = (props) => {
 		onChange,
 		onBlur
 	}, textFieldRef);
+	useEffect(() => {
+		if (!autoFocusOnMount || isDisabled) return;
+		requestAnimationFrame(() => inputRef.current?.focus());
+	}, [autoFocusOnMount, isDisabled]);
 	const formFieldProps = {
 		error,
 		label,
@@ -75,6 +81,8 @@ var TextInputBase = (props) => {
 			labelProps,
 			className: clsx("group w-full", as === "inline" && "h-full", className),
 			tabIndex: as === "inline" ? -1 : void 0,
+			"data-is-empty": value === "" || value === null || value === void 0 || void 0,
+			"data-is-required": isRequired || void 0,
 			children: /* @__PURE__ */ jsx("div", {
 				className: clsx("relative flex cursor-text has-disabled:cursor-default", inputBaseCva({
 					variant,
@@ -82,6 +90,8 @@ var TextInputBase = (props) => {
 					...rest
 				}), inputClassName),
 				onClick: () => inputRef.current?.focus(),
+				"data-is-empty": value === "" || value === null || value === void 0 || void 0,
+				"data-is-required": isRequired || void 0,
 				children: /* @__PURE__ */ jsx(InputContent, {
 					...inputContentProps,
 					headerProps,
@@ -91,6 +101,7 @@ var TextInputBase = (props) => {
 						...inputProps,
 						ref: mergeRefs(ref, inputRef),
 						"data-is-empty": value === "" || value === null || value === void 0 || void 0,
+						"data-is-filled": !(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,
@@ -106,7 +117,66 @@ var TextInputBase = (props) => {
 		})
 	});
 };
-var TextInput = (props) => {
+var TextInput = ({ renderStaticInput, ...props }) => {
+	const ui = UIConfig.useConfig();
+	const [renderInput, setRenderInput] = useState(!(renderStaticInput ?? ui.renderStaticInput));
+	const inputRef = useRef(null);
+	const { shouldFocus, renderRealInput, replayStaticInputChange } = useStaticInputHandoff({
+		inputRef,
+		renderInput,
+		setRenderInput
+	});
+	const watchedValue = "formControl" in props && props.formControl ? useWatch({
+		control: props.formControl.control,
+		name: props.formControl.name
+	}) : props.value;
+	let isFormControlDisabled = false;
+	if ("formControl" in props && props.formControl) isFormControlDisabled = !!props.formControl.control._options?.disabled;
+	const staticValue = watchedValue ?? props.value ?? props.defaultValue ?? "";
+	const inputType = props.type;
+	if (!renderInput && inputType === "password" && `${staticValue}`.length > 0) setRenderInput(true);
+	if (!renderInput) {
+		const as = props.as ?? ui.input.as;
+		let isDisabled = !!props.isDisabled;
+		if (isFormControlDisabled) isDisabled = true;
+		const maskedPasswordValue = inputType === "password" && `${staticValue}`.length > 0 ? "•".repeat(`${staticValue}`.length) : staticValue;
+		const displayValue = maskedPasswordValue == null ? "" : `${maskedPasswordValue}`;
+		const hasValue = displayValue !== "";
+		const dataAttributes = {
+			dataIsEmpty: !hasValue,
+			dataIsFilled: hasValue,
+			dataIsDirty: props.isDirty,
+			dataIsRequired: props.isRequired,
+			dataIsDisabled: isDisabled,
+			dataDisabled: isDisabled,
+			dataInvalid: !!props.error,
+			dataHasSelection: hasValue
+		};
+		return /* @__PURE__ */ jsx(InputFrame, {
+			...props,
+			isDisabled,
+			className: clsx("group w-full", as === "inline" && "h-full", props.className),
+			dataAttributes,
+			renderStatic: true,
+			onStaticInteract: renderRealInput,
+			inputClassName: props.inputClassName,
+			contentClassName: "pr-0!",
+			trailingClassName: "py-0! pl-0!",
+			wrapContentAndTrailing: true,
+			children: (dataAttributeProps) => /* @__PURE__ */ jsx("input", {
+				ref: inputRef,
+				type: inputType === "hidden" ? "password" : inputType,
+				disabled: isDisabled,
+				tabIndex: -1,
+				value: displayValue,
+				placeholder: as === "floating" ? "" : props.placeholder,
+				className: "w-full bg-transparent outline-none placeholder:text-text-default-3 disabled:text-interactive-text-secondary-disabled",
+				onChange: (event) => replayStaticInputChange(event.target.value),
+				...dataAttributeProps,
+				"data-rac": true
+			})
+		});
+	}
 	if ("formControl" in props && props.formControl) {
 		const { formControl, ref, ...innerProps } = props;
 		return /* @__PURE__ */ jsx(Controller, {
@@ -114,17 +184,22 @@ var TextInput = (props) => {
 			name: formControl.name,
 			render: ({ field, fieldState: { error, isDirty } }) => /* @__PURE__ */ jsx(TextInputBase, {
 				...innerProps,
-				ref: mergeRefs(ref, field.ref),
+				ref: mergeRefs(ref, field.ref, inputRef),
 				value: field.value,
 				onChange: field.onChange,
 				onBlur: field.onBlur,
 				isDirty,
 				isDisabled: field.disabled || props.isDisabled,
-				error: props.error ?? error?.message
+				error: props.error ?? error?.message,
+				autoFocusOnMount: shouldFocus
 			})
 		});
 	}
-	return /* @__PURE__ */ jsx(TextInputBase, { ...props });
+	return /* @__PURE__ */ jsx(TextInputBase, {
+		...props,
+		ref: mergeRefs(props.ref, inputRef),
+		autoFocusOnMount: shouldFocus
+	});
 };
 //#endregion
 export { TextInput };

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

@@ -4,7 +4,7 @@ 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 { inputContentWrapper, inputSize } from "../../shared/input.cva.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { isValidElement } from "react";
@@ -12,21 +12,22 @@ import { isValidElement } from "react";
 var 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 inputContentWrapperCva = UIStyle.useCva("input.contentWrapperCva", inputContentWrapper);
 	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({
+			className: clsx("group/input-content flex w-full items-center gap-input-gap-input-text-to-elements pr-0!", as === "inline" && "h-full", 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"),
+				className: inputContentWrapperCva({ as }),
 				children: [as && ["filter", "floating"].includes(as) && headerProps && /* @__PURE__ */ jsx(FormFieldLabel, {
 					as,
 					size,
@@ -34,10 +35,10 @@ var InputContent = ({ leadingIcon: LeadingIcon, trailingIcon: TrailingIcon, unit
 				}), children]
 			})]
 		}), /* @__PURE__ */ jsxs("div", {
-			className: clsx(inputSizeCva({
+			className: clsx("flex items-center gap-input-gap-trailing-elements py-0! pl-0!", inputSizeCva({
 				size,
 				as
-			}), "flex items-center gap-input-gap-trailing-elements py-0! pl-0!", !isTrailingIconElement && !action && !(isClearable && showClear) && "pointer-events-none"),
+			}), !isTrailingIconElement && !action && !(isClearable && showClear) && "pointer-events-none"),
 			children: [
 				isClearable && /* @__PURE__ */ jsx(InputClear, {
 					onClear: () => {

package/dist/components/inputs/Input/shared/numberStatic.utils.d.ts

@@ -0,0 +1 @@
+export declare const getStaticNumberDisplayValue: (value: unknown, formatter: Intl.NumberFormat) => string | null;

package/dist/components/inputs/Input/shared/numberStatic.utils.js

@@ -0,0 +1,7 @@
+//#region src/components/inputs/Input/shared/numberStatic.utils.ts
+var getStaticNumberDisplayValue = (value, formatter) => {
+	if (typeof value !== "number" || !Number.isFinite(value)) return null;
+	return formatter.format(value);
+};
+//#endregion
+export { getStaticNumberDisplayValue };

package/dist/components/inputs/Inputs/InputItem.d.ts

@@ -1,33 +1,28 @@
 import { ComponentProps, JSXElementConstructor, ReactElement, ReactNode } from 'react';
 import { Control, UseFormReturn } from 'react-hook-form';
 import { z } from 'zod';
+import { Autocomplete } from '../Selection/Autocomplete/Autocomplete';
+import { Select } from '../Selection/Select/Select';
 import { HasRequiredProperty } from '../../../types/common';
 declare const componentRegistry: {
     readonly toggle: <TFieldValues extends import('react-hook-form').FieldValues>(props: import('../Toggle/Toggle').ControlledToggleProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
     readonly checkbox: <TFieldValues extends import('react-hook-form').FieldValues>(props: import('../Checkbox/Checkbox').ControlledCheckboxProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
-    readonly numberInput: <TFieldValues extends import('react-hook-form').FieldValues>(props: import('../Input/NumberInput/NumberInput').ControlledNumberInputProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
+    readonly numberInput: <TFieldValues extends import('react-hook-form').FieldValues>({ renderStaticInput, ...props }: import('../Input/NumberInput/NumberInput').ControlledNumberInputProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
+    readonly numberRangeInput: <TFieldValues extends import('react-hook-form').FieldValues>({ renderStaticInput, ...props }: import('../Input/NumberRangeInput/NumberRangeInput').ControlledNumberRangeInputProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
     readonly slider: <TFieldValues extends import('react-hook-form').FieldValues, IsRange extends boolean = false>(props: import('../Slider/Slider').ControlledSliderProps<TFieldValues, IsRange>) => import("react/jsx-runtime").JSX.Element;
-    readonly textInput: <TFieldValues extends import('react-hook-form').FieldValues>(props: import('../Input/TextInput/TextInput').ControlledTextInputProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
+    readonly textInput: <TFieldValues extends import('react-hook-form').FieldValues>({ renderStaticInput, ...props }: import('../Input/TextInput/TextInput').ControlledTextInputProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
     readonly passwordInput: <TFieldValues extends import('react-hook-form').FieldValues>(props: import('../Input/PasswordInput/PasswordInput').ControlledPasswordInputProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
     readonly textArea: <TFieldValues extends import('react-hook-form').FieldValues>(props: import('../Input/TextArea/TextArea').ControlledTextAreaProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
-    readonly select: <TFieldValues extends import('react-hook-form').FieldValues, TKey extends import('react-aria').Key = import('react-aria').Key, TInitialSelectItem = import('../Selection/shared/select.types').DefaultInitialSelectItem<TKey>>(props: import('../Selection/Select/Select').ControlledSelectProps<TFieldValues, TKey, TInitialSelectItem>) => import("react/jsx-runtime").JSX.Element;
-    readonly autocomplete: <TFieldValues extends import('react-hook-form').FieldValues, TKey extends import('react-aria').Key = import('react-aria').Key, TInitialSelectItem = import('../Selection/shared/select.types').DefaultInitialSelectItem<TKey>>(props: import('../Selection/Autocomplete/Autocomplete').ControlledAutocompleteProps<TFieldValues, TKey, TInitialSelectItem>) => import("react/jsx-runtime").JSX.Element;
-    readonly queryAutocomplete: <TFieldValues extends import('react-hook-form').FieldValues, TSelectItem extends import('../Selection/shared/select.types').SelectItem<any>, TQueryFn extends (...args: any) => import('@tanstack/react-query').UseQueryResult<TSelectItem[]>>({ query, queryParams, queryOptions, ...props }: import('../../../types/common').OmitDiscriminatedUnion<import('../Selection/Autocomplete/Autocomplete').AutocompleteProps<Exclude<ReturnType<TQueryFn>["data"], undefined>[0] extends {
-        id: infer InferredKey extends import('react-aria').Key;
-    } ? InferredKey : never>, "onChange" | "value" | "items" | "selectionMode" | "isLoading" | "showSelectionBar" | "showSelectAllOption" | "initialSelection" | "showSelectionContent" | "onSearchChange"> & (import('../Selection/shared/select.types').GroupedSelectControlProps<TFieldValues, Exclude<ReturnType<TQueryFn>["data"], undefined>[0] extends {
-        id: infer InferredKey extends import('react-aria').Key;
-    } ? InferredKey : never> & {
-        query: Parameters<TQueryFn>[0] extends {
-            search?: string;
-        } ? TQueryFn : never;
-        queryParams?: Omit<Parameters<TQueryFn>[0], "search"> | undefined;
-        queryOptions?: Parameters<TQueryFn>[1] | undefined;
-    })) => import("react/jsx-runtime").JSX.Element;
+    readonly select: typeof Select;
+    readonly querySelect: <TFieldValues extends import('react-hook-form').FieldValues, TQueryFn extends import('../Selection/shared/querySelect.utils').QueryFn, TKey extends import('react-aria').Key = import('react-aria').Key>({ query, queryParams, queryOptions, queryMap, ...props }: import('../Selection/Select/QuerySelect.js').QuerySelectProps<TFieldValues, TQueryFn, TKey>) => import("react/jsx-runtime").JSX.Element;
+    readonly autocomplete: typeof Autocomplete;
+    readonly queryAutocomplete: <TFieldValues extends import('react-hook-form').FieldValues, TSelectItem extends import('../../..').SelectItem<any>, TQueryFn extends import('../Selection/Autocomplete/queryAutocomplete.types').QueryFn>({ query, queryParams, queryOptions, queryMap, leadingContent, ...props }: import('../Selection/Autocomplete/queryAutocomplete.types').QueryAutocompleteProps<TFieldValues, TSelectItem, TQueryFn>) => import("react/jsx-runtime").JSX.Element;
     readonly segment: <TFieldValues extends import('react-hook-form').FieldValues, TKey extends import('react-aria').Key = import('react-aria').Key>(props: import('../../..').ControlledSegmentProps<TFieldValues, TKey>) => import("react/jsx-runtime").JSX.Element;
-    readonly datePicker: <TFieldValues extends import('react-hook-form').FieldValues>({ fullIso, granularity, minValue, maxValue, ...props }: import('../DateTime/DatePicker/DatePicker').ControlledDatePickerProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
-    readonly dateTimePicker: <TFieldValues extends import('react-hook-form').FieldValues>({ fullIso, ...props }: import('../DateTime/DateTimePicker/DateTimePicker').ControlledDateTimePickerProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
-    readonly timePicker: <TFieldValues extends import('react-hook-form').FieldValues>(props: import('../DateTime/TimePicker/TimePicker').ControlledTimePickerProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
-    readonly dateRangePicker: <TFieldValues extends import('react-hook-form').FieldValues>({ fullIso, minValue, maxValue, ...props }: import('../DateTime/DateRangePicker/DateRangePicker').ControlledDateRangePickerProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
+    readonly datePicker: <TFieldValues extends import('react-hook-form').FieldValues>({ fullIso, granularity, minValue, maxValue, renderStaticInput, ...props }: import('../DateTime/DatePicker/DatePicker').ControlledDatePickerProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
+    readonly dateTimePicker: <TFieldValues extends import('react-hook-form').FieldValues>({ fullIso, renderStaticInput, ...props }: import('../DateTime/DateTimePicker/DateTimePicker').ControlledDateTimePickerProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
+    readonly timePicker: <TFieldValues extends import('react-hook-form').FieldValues>({ renderStaticInput, ...props }: import('../DateTime/TimePicker/TimePicker').ControlledTimePickerProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
+    readonly dateRangePicker: <TFieldValues extends import('react-hook-form').FieldValues>({ fullIso, minValue, maxValue, renderStaticInput, ...props }: import('../DateTime/DateRangePicker/DateRangePicker').ControlledDateRangePickerProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
+    readonly textEditor: <TFieldValues extends import('react-hook-form').FieldValues>(props: import('../../../text-editor.js').ControlledTextEditorProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
     readonly unknown: null;
 };
 export type InputComponentRegistry = typeof componentRegistry;
@@ -56,8 +51,8 @@ type TypeBasedInputDef<TSchemaType extends Record<string, any>, T extends InputC
 interface RenderBasedInputDef<TSchemaType extends Record<string, any>, K extends keyof TSchemaType> {
     type?: never;
     name: K;
-    label?: never;
-    placeholder?: never;
+    label?: string;
+    placeholder?: string;
     props?: never;
     inputWrapper?: never;
     render: (formControl: {

package/dist/components/inputs/Inputs/InputItem.js

@@ -6,6 +6,7 @@ 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 { NumberRangeInput } from "../Input/NumberRangeInput/NumberRangeInput.js";
 import { PasswordInput } from "../Input/PasswordInput/PasswordInput.js";
 import { TextArea } from "../Input/TextArea/TextArea.js";
 import { Autocomplete } from "../Selection/Autocomplete/Autocomplete.js";
@@ -13,17 +14,21 @@ import { QueryAutocomplete } from "../Selection/Autocomplete/QueryAutocomplete.j
 import { Slider } from "../Slider/Slider.js";
 import { Toggle } from "../Toggle/Toggle.js";
 import { Segment } from "../../segment/Segment.js";
+import { QuerySelect } from "../Selection/Select/QuerySelect.js";
+import { TextEditor } from "../TextEditor/TextEditor.js";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/inputs/Inputs/InputItem.tsx
 var componentRegistry = {
 	toggle: Toggle,
 	checkbox: Checkbox,
 	numberInput: NumberInput,
+	numberRangeInput: NumberRangeInput,
 	slider: Slider,
 	textInput: TextInput,
 	passwordInput: PasswordInput,
 	textArea: TextArea,
 	select: Select,
+	querySelect: QuerySelect,
 	autocomplete: Autocomplete,
 	queryAutocomplete: QueryAutocomplete,
 	segment: Segment,
@@ -31,6 +36,7 @@ var componentRegistry = {
 	dateTimePicker: DateTimePicker,
 	timePicker: TimePicker,
 	dateRangePicker: DateRangePicker,
+	textEditor: TextEditor,
 	unknown: null
 };
 function InputItem({ form, inputDef }) {

package/dist/components/inputs/RadioGroup/RadioGroup.d.ts

@@ -4,7 +4,8 @@ import { FieldValues } from 'react-hook-form';
 import { FormFieldProps } from '../FormField/FormField';
 import { RadioVariantProps } from './radio.cva';
 import { ControlProps } from '../shared/form.types';
-interface RadioGroupBaseProps extends Omit<FormFieldProps, "variant">, RadioVariantProps, Omit<AriaRadioGroupProps, "className"> {
+import { InputVariantProps } from '../shared/input.cva';
+interface RadioGroupBaseProps extends Omit<FormFieldProps, "variant">, RadioVariantProps, Omit<InputVariantProps, "variant">, Omit<AriaRadioGroupProps, "className"> {
     ref?: Ref<HTMLDivElement>;
     options: {
         label: string | ReactElement;

package/dist/components/inputs/RadioGroup/RadioGroup.js

@@ -1,19 +1,44 @@
 import { UIStyle } from "../../../config/uiStyle.context.js";
 import { UIConfig } from "../../../config/uiConfig.context.js";
 import { CheckContent } from "../shared/CheckContent.js";
+import { FormFieldLabel } from "../FormField/FormFieldLabel.js";
+import { inputBase, inputSize } from "../shared/input.cva.js";
 import { FormField } from "../FormField/FormField.js";
-import { radio, radioIndicatorClass, radioTypography } from "./radio.cva.js";
+import { TooltipWrapper } from "../shared/TooltipWrapper.js";
+import { radio, radioContentClassName, radioContentRow, radioContentWrapper, radioIndicatorClass, radioTypography } from "./radio.cva.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { Radio, RadioGroup } from "react-aria-components";
+import { useLabel } from "react-aria";
 import { mergeRefs } from "@react-aria/utils";
 import { Controller } from "react-hook-form";
 //#region src/components/inputs/RadioGroup/RadioGroup.tsx
 var RadioGroupBase = (props) => {
 	const ui = UIConfig.useConfig();
 	const radioCva = UIStyle.useCva("radio.cva", radio);
+	const radioContentWrapperCva = UIStyle.useCva("radio.contentWrapperCva", radioContentWrapper);
+	const radioContentRowCva = UIStyle.useCva("radio.contentRowCva", radioContentRow);
+	const inputBaseCva = UIStyle.useCva("input.baseCva", inputBase);
+	const inputSizeCva = UIStyle.useCva("input.sizeCva", inputSize);
 	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 radioContentClassNameMap = UIStyle.useMapper("radio.contentClassName", radioContentClassName);
+	const { ref, label, tooltipText, helperText, isDirty, isRequired, rightContent, isDisabled, headerClassName, errorClassName, labelClassName, inputClassName, isHeaderHidden, error, className, options, value, defaultValue, as: asProp, size: sizeProp, variant: variantProp, hideLabel: hideLabelProp, ...rest } = props;
+	const as = asProp ?? ui.input.as;
+	const size = sizeProp ?? ui.input.size;
+	const variant = variantProp ?? ui.radioGroup.variant;
+	const hideLabel = hideLabelProp ?? ui.radioGroup.hideLabel;
+	const radioClassName = radioCva({
+		variant,
+		...rest
+	});
+	const radioTypographyProps = radioTypographyMap({
+		variant,
+		...rest
+	});
+	const radioContentClassNameValue = radioContentClassNameMap({
+		variant,
+		...rest
+	});
 	const formFieldProps = {
 		className,
 		error,
@@ -22,37 +47,93 @@ var RadioGroupBase = (props) => {
 		helperText,
 		isRequired,
 		rightContent,
-		isHeaderHidden,
+		isHeaderHidden: isHeaderHidden || as === "inline" || as === "filter" || as === "floating",
 		hideLabel,
 		isDisabled,
 		headerClassName,
 		errorClassName
 	};
-	return /* @__PURE__ */ jsx(RadioGroup, {
-		...rest,
+	const { labelProps, fieldProps } = useLabel({ label });
+	const headerProps = {
+		label,
+		tooltipText,
+		helperText,
+		isRequired,
+		rightContent,
+		isHeaderHidden: hideLabel || isHeaderHidden,
 		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("flex flex-col", inputClassName),
-				children: options.map((option) => /* @__PURE__ */ jsxs(Radio, {
-					value: option.value,
-					className: clsx("relative", radioIndicatorClass),
-					children: [/* @__PURE__ */ jsx("div", { className: radioCva({
-						variant,
-						...rest
-					}) }), /* @__PURE__ */ jsx(CheckContent, {
-						typography: radioTypographyMap({
+		className: headerClassName,
+		labelProps
+	};
+	const selectedValue = value ?? defaultValue;
+	const shouldRenderInputFrame = as !== "default";
+	return /* @__PURE__ */ jsx(TooltipWrapper, {
+		as,
+		error,
+		triggerTabIndex: as === "inline" ? -1 : void 0,
+		children: /* @__PURE__ */ jsx(RadioGroup, {
+			...rest,
+			...fieldProps,
+			ref,
+			value,
+			defaultValue,
+			isDisabled,
+			isInvalid: !!error,
+			"data-is-dirty": isDirty || void 0,
+			"data-is-required": isRequired || void 0,
+			children: /* @__PURE__ */ jsx(FormField, {
+				...formFieldProps,
+				as,
+				labelProps,
+				className: clsx("w-full", as === "inline" && "h-full", className),
+				tabIndex: as === "inline" ? -1 : void 0,
+				children: /* @__PURE__ */ jsx("div", {
+					className: clsx("group/radio-group-content relative", shouldRenderInputFrame && inputBaseCva({
+						variant: ui.input.variant,
+						as
+					}), inputClassName),
+					"data-rac": "",
+					"data-disabled": isDisabled || void 0,
+					"data-is-disabled": isDisabled || void 0,
+					"data-invalid": !!error || void 0,
+					"data-has-selection": selectedValue != null && selectedValue !== "" ? true : void 0,
+					"data-radio-group-content": "",
+					children: /* @__PURE__ */ jsxs("div", {
+						className: clsx(radioContentWrapperCva({
 							variant,
+							as,
+							hasInputFrame: shouldRenderInputFrame,
 							...rest
-						}),
-						className: labelClassName,
-						children: option.label
-					})]
-				}, option.value))
+						}), shouldRenderInputFrame && inputSizeCva({
+							as,
+							size
+						})),
+						"data-is-dirty": isDirty || void 0,
+						"data-is-required": isRequired || void 0,
+						children: [as && ["filter", "floating"].includes(as) && /* @__PURE__ */ jsx(FormFieldLabel, {
+							as,
+							size,
+							...headerProps
+						}), /* @__PURE__ */ jsx("div", {
+							className: radioContentRowCva({
+								variant,
+								as,
+								hasInputFrame: shouldRenderInputFrame,
+								...rest
+							}),
+							children: options.map((option) => /* @__PURE__ */ jsxs(Radio, {
+								value: option.value,
+								className: clsx("relative", radioIndicatorClass),
+								children: [/* @__PURE__ */ jsx("div", { className: radioClassName }), /* @__PURE__ */ jsx(CheckContent, {
+									typography: radioTypographyProps,
+									contentClassName: radioContentClassNameValue,
+									className: labelClassName,
+									children: option.label
+								})]
+							}, option.value))
+						})]
+					})
+				})
 			})
 		})
 	});

package/dist/components/inputs/RadioGroup/radio.cva.d.ts

@@ -5,7 +5,24 @@ export declare const radio: (props?: ({
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export interface RadioVariantProps extends VariantProps<typeof radio> {
 }
+export declare const radioContentWrapper: (props?: ({
+    variant?: "default" | null | undefined;
+    as?: "filter" | "default" | "floating" | "inline" | null | undefined;
+    hasInputFrame?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface RadioContentWrapperVariantProps extends VariantProps<typeof radioContentWrapper> {
+}
+export declare const radioContentRow: (props?: ({
+    variant?: "default" | null | undefined;
+    as?: "filter" | "default" | "floating" | "inline" | null | undefined;
+    hasInputFrame?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface RadioContentRowVariantProps extends VariantProps<typeof radioContentRow> {
+}
 export declare const radioIndicatorClass = "group flex items-center gap-2";
 export declare const radioTypography: (props: {
     variant?: "default" | null | undefined;
 }) => TypographyVariantProps | undefined;
+export declare const radioContentClassName: (props: {
+    variant?: "default" | null | undefined;
+}) => string | undefined;

package/dist/components/inputs/RadioGroup/radio.cva.js

@@ -25,11 +25,52 @@ var radio = cva([
 	] } },
 	defaultVariants: { variant: "default" }
 });
+var radioContentWrapper = cva("relative flex", {
+	variants: {
+		variant: { default: "" },
+		as: {
+			default: "flex-col",
+			floating: "flex-col",
+			filter: "flex-row flex-wrap items-center gap-2",
+			inline: "flex-row flex-wrap items-center gap-2"
+		},
+		hasInputFrame: {
+			true: "gap-2",
+			false: ""
+		}
+	},
+	defaultVariants: {
+		variant: "default",
+		as: "default",
+		hasInputFrame: false
+	}
+});
+var radioContentRow = cva("flex", {
+	variants: {
+		variant: { default: "" },
+		as: {
+			default: "flex-col",
+			floating: "flex-col",
+			filter: "flex-row flex-wrap items-center gap-2",
+			inline: "flex-row flex-wrap items-center gap-2"
+		},
+		hasInputFrame: {
+			true: "gap-2",
+			false: ""
+		}
+	},
+	defaultVariants: {
+		variant: "default",
+		as: "default",
+		hasInputFrame: false
+	}
+});
 var radioIndicatorClass = "group flex items-center gap-2";
 var radioTypography = compoundMapper({ default: {
 	size: "label-1",
 	sizeMobile: "label-1",
 	variant: "default"
 } });
+var radioContentClassName = compoundMapper({ default: "text-text-default-2" });
 //#endregion
-export { radio, radioIndicatorClass, radioTypography };
+export { radio, radioContentClassName, radioContentRow, radioContentWrapper, radioIndicatorClass, radioTypography };

package/dist/components/inputs/Selection/Autocomplete/Autocomplete.d.ts

@@ -1,8 +1,12 @@
+import { ReactElement } from 'react';
 import { Key } from 'react-aria-components';
 import { FieldValues } from 'react-hook-form';
 import { SelectBaseProps } from '../shared/SelectBase';
 import { DefaultInitialSelectItem, GroupedSelectControlProps, GroupedSelectProps } from '../shared/select.types';
 import { OmitDiscriminatedUnion } from '../../../../types/common';
-export type AutocompleteProps<TKey extends Key = Key, TInitialSelectItem = DefaultInitialSelectItem<TKey>> = OmitDiscriminatedUnion<SelectBaseProps<TKey, TInitialSelectItem>, "isSearchable">;
+export type AutocompleteProps<TKey extends Key = Key, TInitialSelectItem = DefaultInitialSelectItem<TKey>> = OmitDiscriminatedUnion<SelectBaseProps<TKey, TInitialSelectItem>, "isSearchable"> & {
+    renderStaticInput?: boolean;
+};
 export type ControlledAutocompleteProps<TFieldValues extends FieldValues, TKey extends Key = Key, TInitialSelectItem = DefaultInitialSelectItem<TKey>> = Omit<AutocompleteProps<TKey, TInitialSelectItem>, keyof GroupedSelectProps> & GroupedSelectControlProps<TFieldValues, TKey, TInitialSelectItem>;
-export declare const Autocomplete: <TFieldValues extends FieldValues, TKey extends Key = Key, TInitialSelectItem = DefaultInitialSelectItem<TKey>>(props: ControlledAutocompleteProps<TFieldValues, TKey, TInitialSelectItem>) => import("react/jsx-runtime").JSX.Element;
+export declare function Autocomplete<TKey extends Key = Key, TInitialSelectItem = DefaultInitialSelectItem<TKey>>(props: AutocompleteProps<TKey, TInitialSelectItem>): ReactElement;
+export declare function Autocomplete<TFieldValues extends FieldValues, TKey extends Key = Key, TInitialSelectItem = DefaultInitialSelectItem<TKey>>(props: ControlledAutocompleteProps<TFieldValues, TKey, TInitialSelectItem>): ReactElement;