@povio/ui 2.2.11 → 2.3.0-rc.1

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

@@ -15,6 +15,7 @@ export interface TextEditorBaseProps extends FormFieldProps {
     onBlur?: () => void;
     as?: "default" | "filter" | "floating" | "inline" | null;
     editorClassName?: string;
+    isDirty?: boolean;
 }
 export type TextEditorProps = TextEditorBaseProps;
 export type ControlledTextEditorProps<TFieldValues extends FieldValues> = ControlProps<TextEditorProps, TFieldValues>;

package/dist/components/inputs/TextEditor/TextEditor.js

@@ -37,7 +37,7 @@ var extensions = [
 		defaultProtocol: "https"
 	})
 ];
-var TextEditorBase = ({ ref, as = "default", placeholder, label, hideLabel, tooltipText, helperText, isRequired, rightContent, isDisabled, headerClassName, errorClassName, isHeaderHidden, error, value, className, editorClassName, onChange, onBlur }) => {
+var TextEditorBase = ({ ref, as = "default", placeholder, label, hideLabel, tooltipText, helperText, isRequired, rightContent, isDisabled, headerClassName, errorClassName, isHeaderHidden, error, value, className, editorClassName, isDirty, onChange, onBlur }) => {
 	const contentRef = useRef(null);
 	const { hoverProps, isHovered } = useHover({ isDisabled });
 	const [isFocused, setIsFocused] = useState(false);
@@ -106,9 +106,12 @@ var TextEditorBase = ({ ref, as = "default", placeholder, label, hideLabel, tool
 			"data-rac": "",
 			"data-hovered": isHovered || void 0,
 			"data-disabled": isDisabled || void 0,
+			"data-is-disabled": isDisabled || void 0,
 			"data-focus-within": isFocused || void 0,
 			"data-focus-visible": isFocused && isFocusVisible || void 0,
 			"data-is-filled": !editor?.isEmpty,
+			"data-is-required": isRequired || void 0,
+			"data-is-dirty": isDirty || void 0,
 			...hoverProps,
 			...focusWithinProps,
 			...fieldProps,
@@ -136,13 +139,15 @@ var TextEditor = (props) => {
 		return /* @__PURE__ */ jsx(Controller, {
 			control: formControl.control,
 			name: formControl.name,
-			render: ({ field }) => /* @__PURE__ */ jsx(TextEditorBase, {
+			render: ({ field, fieldState: { error, isDirty } }) => /* @__PURE__ */ jsx(TextEditorBase, {
 				...innerProps,
 				ref: mergeRefs(ref, field.ref),
 				value: field.value,
 				onChange: field.onChange,
 				onBlur: field.onBlur,
-				isDisabled: field.disabled || props.isDisabled
+				isDirty,
+				isDisabled: field.disabled || props.isDisabled,
+				error: props.error ?? error?.message
 			})
 		});
 	}

package/dist/components/inputs/Toggle/Toggle.js

@@ -2,7 +2,7 @@ import { UIStyle } from "../../../config/uiStyle.context.js";
 import { UIConfig } from "../../../config/uiConfig.context.js";
 import { FormFieldError } from "../FormField/FormFieldError.js";
 import { CheckContent } from "../shared/CheckContent.js";
-import { toggle, toggleTypography } from "./toggle.cva.js";
+import { toggle, toggleContentClassName, toggleTypography } from "./toggle.cva.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { Switch } from "react-aria-components";
@@ -13,6 +13,7 @@ var ToggleBase = (props) => {
 	const ui = UIConfig.useConfig();
 	const toggleCva = UIStyle.useCva("toggle.cva", toggle);
 	const toggleTypographyMap = UIStyle.useMapper("toggle.typography", toggleTypography);
+	const toggleContentClassNameMap = UIStyle.useMapper("toggle.contentClassName", toggleContentClassName);
 	const { className, children, isDisabled, error, variant = ui.toggle.variant, ...rest } = props;
 	const formFieldErrorProps = {
 		error,
@@ -32,6 +33,10 @@ var ToggleBase = (props) => {
 				variant,
 				...rest
 			}),
+			contentClassName: toggleContentClassNameMap({
+				variant,
+				...rest
+			}),
 			children
 		})]
 	}), /* @__PURE__ */ jsx(FormFieldError, { ...formFieldErrorProps })] });

package/dist/components/inputs/Toggle/toggle.cva.d.ts

@@ -8,3 +8,6 @@ export interface ToggleVariantProps extends VariantProps<typeof toggle> {
 export declare const toggleTypography: (props: {
     variant?: "default" | null | undefined;
 }) => TypographyVariantProps | undefined;
+export declare const toggleContentClassName: (props: {
+    variant?: "default" | null | undefined;
+}) => string | undefined;

package/dist/components/inputs/Toggle/toggle.cva.js

@@ -26,5 +26,6 @@ var toggleTypography = compoundMapper({ default: {
 	sizeMobile: "label-1",
 	variant: "default"
 } });
+var toggleContentClassName = compoundMapper({ default: "text-text-default-2" });
 //#endregion
-export { toggle, toggleTypography };
+export { toggle, toggleContentClassName, toggleTypography };

package/dist/components/inputs/shared/CheckContent.d.ts

@@ -3,6 +3,7 @@ import { TypographyVariantProps } from '../../text/Typography/typography.cva';
 interface CheckContentProps {
     typography?: TypographyVariantProps;
     className?: string;
+    contentClassName?: string;
 }
-export declare const CheckContent: ({ children, className, ...props }: PropsWithChildren<CheckContentProps>) => import("react/jsx-runtime").JSX.Element;
+export declare const CheckContent: ({ children, className, contentClassName, ...props }: PropsWithChildren<CheckContentProps>) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/inputs/shared/CheckContent.js

@@ -3,15 +3,14 @@ import { typography } from "../../text/Typography/typography.cva.js";
 import { jsx } from "react/jsx-runtime";
 import clsx$1 from "clsx";
 //#region src/components/inputs/shared/CheckContent.tsx
-var CheckContent = ({ children, className, ...props }) => {
+var CheckContent = ({ children, className, contentClassName, ...props }) => {
 	return /* @__PURE__ */ jsx("div", {
 		className: clsx$1(UIStyle.useCva("typography.cva", typography)({
 			size: "label-1",
 			sizeMobile: "label-1",
 			variant: "default",
-			...props.typography,
-			className: "text-text-default-2"
-		}), className),
+			...props.typography
+		}), contentClassName, className),
 		children
 	});
 };

package/dist/components/inputs/shared/InputClear.d.ts

@@ -2,8 +2,9 @@ import { CSSProperties } from 'react';
 interface InputClearProps {
     onClear: () => void;
     show?: boolean;
+    renderStatic?: boolean;
     className?: string;
     style?: CSSProperties;
 }
-export declare const InputClear: ({ onClear, className, style, show }: InputClearProps) => import("react/jsx-runtime").JSX.Element;
+export declare const InputClear: ({ onClear, className, style, show, renderStatic }: InputClearProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/inputs/shared/InputClear.js

@@ -5,7 +5,19 @@ import { jsx } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { useTranslation } from "react-i18next";
 //#region src/components/inputs/shared/InputClear.tsx
-var InputClear = ({ onClear, className, style, show }) => {
+var InputClear = ({ onClear, className, style, show, renderStatic }) => {
+	if (renderStatic) return /* @__PURE__ */ jsx("button", {
+		className: clsx("invisible relative z-1 flex items-center size-6 shrink-0", "group-focus-within:visible group-hover/date-picker-content:visible group-hover/select-content:visible group-hover/text-area:visible group-hover:visible", "border-0!", !show && "invisible!", className),
+		style
+	});
+	return /* @__PURE__ */ jsx(InputClearButton, {
+		onClear,
+		className,
+		style,
+		show
+	});
+};
+var InputClearButton = ({ onClear, className, style, show }) => {
 	const { t } = useTranslation("ui");
 	return /* @__PURE__ */ jsx(InlineIconButton, {
 		color: "secondary",

package/dist/components/inputs/shared/StaticInput.d.ts

@@ -0,0 +1,38 @@
+import { ReactNode } from 'react';
+import { FormFieldProps } from '../FormField/FormField';
+import { TextInputProps } from '../Input/TextInput/TextInput';
+import { InputSizeProps, InputVariantProps } from './input.cva';
+import { TypographyVariantProps } from '../../text/Typography/typography.cva';
+type StaticInputDataAttributes = {
+    dataDisabled?: boolean;
+    dataHasSearch?: boolean;
+    dataHasSelection?: boolean;
+    dataInvalid?: boolean;
+    dataIsDirty?: boolean;
+    dataIsDisabled?: boolean;
+    dataIsEmpty?: boolean;
+    dataIsFilled?: boolean;
+    dataIsRequired?: boolean;
+};
+interface StaticInputProps extends FormFieldProps {
+    onInteract: (shouldFocus: boolean) => void;
+    as?: TextInputProps["as"];
+    typographySize?: TypographyVariantProps["size"];
+    size?: InputSizeProps["size"];
+    variant?: InputVariantProps["variant"];
+    applyMinInputWidth?: boolean;
+    placeholder?: ReactNode;
+    showPlacholderIfFilled?: boolean;
+    displayValue?: ReactNode;
+    isEmpty?: boolean;
+    leadingVisual?: ReactNode;
+    leadingContent?: ReactNode;
+    leadingContentClassName?: string;
+    hasClearIcon?: boolean;
+    trailingContent?: ReactNode;
+    contentRowClassName?: string;
+    inputClassName?: string;
+    dataAttributes?: StaticInputDataAttributes;
+}
+export declare const StaticInput: ({ onInteract, as, typographySize, size, variant, applyMinInputWidth, placeholder, showPlacholderIfFilled, displayValue, isEmpty, leadingVisual, leadingContent, leadingContentClassName, hasClearIcon, trailingContent, contentRowClassName, inputClassName, dataAttributes, className, ...formFieldProps }: StaticInputProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/inputs/shared/TooltipWrapper.js

@@ -1,7 +1,10 @@
+import { UIStyle } from "../../../config/uiStyle.context.js";
 import { Tooltip } from "../../overlays/Tooltip/Tooltip.js";
+import { tooltipWrapperTrigger } from "./tooltipWrapper.cva.js";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/inputs/shared/TooltipWrapper.tsx
 var TooltipWrapper = (props) => {
+	const tooltipWrapperTriggerCva = UIStyle.useCva("tooltipWrapper.triggerCva", tooltipWrapperTrigger);
 	if (props.as !== "inline") return props.children;
 	return /* @__PURE__ */ jsx(Tooltip, {
 		text: props.error || void 0,
@@ -9,10 +12,11 @@ var TooltipWrapper = (props) => {
 		color: "error",
 		hidden: !props.error,
 		isNonInteractiveTrigger: true,
-		triggerClassName: props.triggerClassName,
+		triggerClassName: tooltipWrapperTriggerCva({ className: props.triggerClassName }),
 		triggerTabIndex: props.triggerTabIndex,
 		children: /* @__PURE__ */ jsx("div", {
 			tabIndex: -1,
+			className: tooltipWrapperTriggerCva({}),
 			children: props.children
 		})
 	});

package/dist/components/inputs/shared/input.cva.d.ts

@@ -12,6 +12,16 @@ export declare const inputSize: (props?: ({
 } & ClassProp) | undefined) => string;
 export interface InputSizeProps extends VariantProps<typeof inputSize> {
 }
+export declare const inputContentWrapper: (props?: ({
+    as?: "filter" | "default" | "floating" | "inline" | null | undefined;
+} & ClassProp) | undefined) => string;
+export interface InputContentWrapperProps extends VariantProps<typeof inputContentWrapper> {
+}
+export declare const inputClearClass: (props?: ({
+    as?: "filter" | "default" | "floating" | "inline" | null | undefined;
+} & ClassProp) | undefined) => string;
+export interface InputClearClassProps extends VariantProps<typeof inputClearClass> {
+}
 export declare const inputSide: (props?: ({
     size?: "small" | "default" | "extra-small" | "large" | null | undefined;
     type?: "left" | "right" | "var" | null | undefined;

package/dist/components/inputs/shared/input.cva.js

@@ -191,6 +191,24 @@ var inputSize = cva("", {
 		as: "default"
 	}
 });
+var inputContentWrapper = cva("flex w-full", {
+	variants: { as: {
+		default: "",
+		floating: "flex-col",
+		filter: "gap-input-gap-input-text-to-elements",
+		inline: ""
+	} },
+	defaultVariants: { as: "default" }
+});
+var inputClearClass = cva("", {
+	variants: { as: {
+		default: "",
+		floating: "",
+		filter: "",
+		inline: ""
+	} },
+	defaultVariants: { as: "default" }
+});
 var inputSide = cva("", {
 	variants: {
 		size: {
@@ -277,4 +295,4 @@ var useInputCva = () => {
 	};
 };
 //#endregion
-export { inputBase, inputSide, inputSize, useInputCva };
+export { inputBase, inputClearClass, inputContentWrapper, inputSide, inputSize, useInputCva };

package/dist/components/inputs/shared/tooltipWrapper.cva.d.ts

@@ -0,0 +1,4 @@
+import { VariantProps } from 'class-variance-authority';
+export declare const tooltipWrapperTrigger: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export interface TooltipWrapperTriggerVariantProps extends VariantProps<typeof tooltipWrapperTrigger> {
+}

package/dist/components/inputs/shared/tooltipWrapper.cva.js

@@ -0,0 +1,5 @@
+import { cva } from "class-variance-authority";
+//#region src/components/inputs/shared/tooltipWrapper.cva.ts
+var tooltipWrapperTrigger = cva("inline-flex");
+//#endregion
+export { tooltipWrapperTrigger };

package/dist/components/inputs/shared/useStaticInputHandoff.d.ts

@@ -0,0 +1,13 @@
+import { Dispatch, RefObject, SetStateAction } from 'react';
+interface StaticInputHandoffOptions<TElement extends HTMLElement> {
+    inputRef: RefObject<TElement | null>;
+    renderInput: boolean;
+    setRenderInput: Dispatch<SetStateAction<boolean>>;
+    getFocusTarget?: (element: TElement) => HTMLElement | null | undefined;
+}
+export declare const useStaticInputHandoff: <TElement extends HTMLElement = HTMLInputElement>({ inputRef, renderInput, setRenderInput, getFocusTarget, }: StaticInputHandoffOptions<TElement>) => {
+    shouldFocus: boolean;
+    renderRealInput: (focus: boolean) => void;
+    replayStaticInputChange: (value: string) => void;
+};
+export {};

package/dist/components/inputs/shared/useStaticInputHandoff.js

@@ -0,0 +1,47 @@
+import { useLayoutEffect, useRef, useState } from "react";
+//#region src/components/inputs/shared/useStaticInputHandoff.ts
+var useStaticInputHandoff = ({ inputRef, renderInput, setRenderInput, getFocusTarget }) => {
+	const [shouldFocus, setShouldFocus] = useState(false);
+	const pendingStaticChangeRef = useRef(null);
+	useLayoutEffect(() => {
+		if (!renderInput || !shouldFocus) return;
+		const focusRealInput = (replayPendingChange) => {
+			const input = inputRef.current;
+			const pendingValue = pendingStaticChangeRef.current;
+			const focusTarget = input ? getFocusTarget?.(input) ?? input : null;
+			if (replayPendingChange && focusTarget instanceof HTMLInputElement && pendingValue != null) {
+				(Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, "value")?.set)?.call(focusTarget, pendingValue);
+				focusTarget.dispatchEvent(new Event("input", { bubbles: true }));
+				pendingStaticChangeRef.current = null;
+			}
+			focusTarget?.focus();
+		};
+		focusRealInput(true);
+		const frame = requestAnimationFrame(() => {
+			focusRealInput(false);
+			setShouldFocus(false);
+		});
+		return () => {
+			cancelAnimationFrame(frame);
+		};
+	}, [
+		getFocusTarget,
+		inputRef,
+		renderInput,
+		shouldFocus
+	]);
+	return {
+		shouldFocus,
+		renderRealInput: (focus) => {
+			setShouldFocus(focus);
+			setRenderInput(true);
+		},
+		replayStaticInputChange: (value) => {
+			pendingStaticChangeRef.current = value;
+			setShouldFocus(true);
+			setRenderInput(true);
+		}
+	};
+};
+//#endregion
+export { useStaticInputHandoff };

package/dist/components/overlays/BottomSheet/BottomSheet.js

@@ -188,7 +188,7 @@ var BottomSheetBase = ({ isOpen, onOpenChange, onStateChange, isDismissable = tr
 						initial: { opacity: 0 },
 						exit: { opacity: 0 },
 						ref: setFooterElement,
-						className: clsx("pointer-events-auto absolute z-50 w-full bg-elevation-fill-default-2", "top-(--visual-viewport-height) left-0 translate-y-[calc(-100%-var(--scroll-position,0px))]"),
+						className: clsx("pointer-events-auto absolute z-50 w-full bg-elevation-fill-default-2", "top-[100dvh] left-0 translate-y-[calc(-100%-var(--scroll-position,0px))]"),
 						children: footer
 					})
 				] })

package/dist/components/segment/Segment.js

@@ -11,7 +11,7 @@ import { mergeRefs } from "@react-aria/utils";
 import { Controller } from "react-hook-form";
 import { useToggleGroupState } from "react-stately";
 //#region src/components/segment/Segment.tsx
-var SegmentBase = ({ className, items, error, onChange, value, defaultValue, ...rest }) => {
+var SegmentBase = ({ className, items, error, onChange, value, defaultValue, segmentItemClassName, ...rest }) => {
 	const props = {
 		...rest,
 		defaultSelectedKeys: defaultValue ? Array.isArray(defaultValue) ? defaultValue : [defaultValue] : void 0,
@@ -49,6 +49,7 @@ var SegmentBase = ({ className, items, error, onChange, value, defaultValue, ...
 			style: { gridTemplateColumns },
 			children: items.map((item, index) => /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(SegmentItem, {
 				...item,
+				className: clsx(item.className, segmentItemClassName),
 				isDisabled: item.isDisabled || props.isDisabled,
 				isSelected: state.selectedKeys.has(item.id),
 				onPress: () => {

package/dist/components/segment/SegmentItem.d.ts

@@ -1,2 +1,2 @@
 import { SegmentItem as SegmentItemProps } from './segment.types';
-export declare const SegmentItem: ({ label, icon, id, isDisabled, ...props }: SegmentItemProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SegmentItem: ({ label, icon, id, isDisabled, className, ...props }: SegmentItemProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/segment/SegmentItem.js

@@ -4,14 +4,17 @@ import { segmentItemCva } from "./segment.cva.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { ToggleButton } from "react-aria-components";
 //#region src/components/segment/SegmentItem.tsx
-var SegmentItem = ({ label, icon, id, isDisabled, ...props }) => {
+var SegmentItem = ({ label, icon, id, isDisabled, className, ...props }) => {
 	const IconComponent = icon;
 	const iconOnly = !!(icon && !label);
 	const segmentItemCva$1 = UIStyle.useCva("segment.itemCva", segmentItemCva);
 	return /* @__PURE__ */ jsxs(ToggleButton, {
 		...props,
 		id,
-		className: segmentItemCva$1({ iconOnly }),
+		className: segmentItemCva$1({
+			iconOnly,
+			className
+		}),
 		isDisabled,
 		children: [icon && /* @__PURE__ */ jsx(IconComponent, { className: "size-6" }), label && /* @__PURE__ */ jsx(Typography, {
 			size: "label-2",

package/dist/components/segment/segment.types.d.ts

@@ -30,6 +30,7 @@ export type SegmentProps<TKey extends Key = Key> = Omit<ToggleButtonGroupProps &
     ref?: Ref<HTMLElement>;
     items: SegmentItem<TKey>[];
     className?: string;
+    segmentItemClassName?: string;
     error?: string;
 } & GroupedSegmentProps<TKey>;
 export type ControlledSegmentProps<TFieldValues extends FieldValues, TKey extends Key = Key> = SegmentProps<TKey> & GroupedSegmentControlProps<TFieldValues, TKey>;

package/dist/config/router.context.d.ts

@@ -1,15 +1,14 @@
 import { PropsWithChildren } from 'react';
 interface UIRouterProviderProps {
-    push: (url: string) => Promise<boolean>;
-    replace: (url: string) => Promise<boolean>;
-    pathname: string;
+    push: (path: string, params?: Record<string, unknown>) => Promise<boolean>;
+    replace: (path: string, params?: Record<string, unknown>) => Promise<boolean>;
     searchString: string;
 }
 interface UIRouterContextValue extends UIRouterProviderProps {
     searchParams: URLSearchParams;
 }
 export declare namespace UIRouter {
-    const UIRouterProvider: ({ children, pathname, push, replace, searchString, }: PropsWithChildren<UIRouterProviderProps>) => import("react/jsx-runtime").JSX.Element;
+    const UIRouterProvider: ({ children, push, replace, searchString, }: PropsWithChildren<UIRouterProviderProps>) => import("react/jsx-runtime").JSX.Element;
     const useUIRouter: () => UIRouterContextValue;
 }
 export {};

package/dist/config/router.context.js

@@ -5,20 +5,18 @@ import { RouterProvider } from "react-aria";
 var UIRouter;
 (function(_UIRouter) {
 	const UIRouterContext = createContext(null);
-	_UIRouter.UIRouterProvider = ({ children, pathname, push, replace, searchString }) => {
+	_UIRouter.UIRouterProvider = ({ children, push, replace, searchString }) => {
 		const searchParams = useMemo(() => {
 			return new URLSearchParams(searchString);
 		}, [searchString]);
 		return /* @__PURE__ */ jsx(UIRouterContext, {
 			value: useMemo(() => ({
 				searchParams,
-				pathname,
 				push,
 				searchString,
 				replace
 			}), [
 				searchParams,
-				pathname,
 				push,
 				searchString,
 				replace

package/dist/config/uiConfig.context.d.ts

@@ -1,4 +1,4 @@
-import { PropsWithChildren } from 'react';
+import { PropsWithChildren, ReactElement } from 'react';
 import { ButtonProps } from '../components/buttons/Button/Button';
 import { CheckboxProps } from '../components/inputs/Checkbox/Checkbox';
 import { DatePickerProps } from '../components/inputs/DateTime/DatePicker/DatePicker';
@@ -19,15 +19,27 @@ export declare namespace UIConfig {
         [P in keyof T]-?: T[P] extends object ? DeepRequired<T[P]> : Exclude<T[P], null | undefined>;
     };
     export interface Options {
+        renderStaticInput: boolean;
         input: Pick<TextInputProps, "variant" | "isClearable" | "hideLabel" | "as" | "size">;
         button: Pick<ButtonProps, "variant" | "size">;
         numberInput: Pick<NumberInputProps, "formatOptions">;
         radioGroup: Pick<RadioGroupProps, "variant" | "hideLabel">;
         checkbox: Pick<CheckboxProps, "variant">;
-        select: Pick<SelectBaseProps, "selectionMode" | "isSearchable" | "collapseAfter" | "selectedTagsType" | "hideSearchIcon">;
+        select: Pick<SelectBaseProps, "selectionMode" | "isSearchable" | "collapseAfter" | "selectedTagsType" | "hideSearchIcon" | "fireBlurOnChange">;
+        queryAutocomplete: {
+            isInitialQueryDisabled?: boolean;
+        };
+        querySelect: {
+            isInitialQueryDisabled?: boolean;
+        };
         toggle: Pick<ToggleProps, "variant">;
         slider: Pick<SliderProps, "minValue" | "maxValue">;
-        dateInput: Pick<DatePickerProps, "todayIcon" | "shouldForceLeadingZeros" | "disableManualEntry" | "shouldUpdateDateOnMonthYearChange" | "granularity" | "autoFixYear">;
+        dateInput: Pick<DatePickerProps, "todayIcon" | "todayIconButtonSize" | "todayIconPlacement" | "shouldForceLeadingZeros" | "disableManualEntry" | "shouldUpdateDateOnMonthYearChange" | "granularity" | "autoFixYear"> & {
+            calendarIcon?: ReactElement;
+            dateTimeIcon?: ReactElement;
+            timeIcon?: ReactElement;
+            setDateValueOnDateSelection?: boolean;
+        };
         actionModal: Pick<ActionModalProps, "titleTypography" | "descriptionTypography">;
         bottomSheet: Pick<BottomSheetProps, "closeDragThreshold" | "closeVelocityThreshold" | "hideThumb" | "headerTypography">;
         tableHeaderText: Pick<HeaderTextProps, "variant" | "size">;

package/dist/config/uiConfig.context.js

@@ -1,3 +1,6 @@
+import { CalendarIcon } from "../assets/icons/Calendar.js";
+import { ClockIcon } from "../assets/icons/Clock.js";
+import { DateTimeIcon } from "../assets/icons/DateTime.js";
 import { ObjectUtils } from "../utils/object.utils.js";
 import { useDeepCompareMemo } from "../hooks/useDeepCompare.js";
 import { jsx } from "react/jsx-runtime";
@@ -6,6 +9,7 @@ import { createContext, use } from "react";
 var UIConfig;
 (function(_UIConfig) {
 	const DEFAULT_CONFIG = {
+		renderStaticInput: true,
 		input: {
 			variant: "outlined",
 			as: "default",
@@ -31,8 +35,11 @@ var UIConfig;
 			isSearchable: false,
 			selectedTagsType: "list",
 			collapseAfter: 3,
-			hideSearchIcon: false
+			hideSearchIcon: false,
+			fireBlurOnChange: false
 		},
+		queryAutocomplete: { isInitialQueryDisabled: false },
+		querySelect: { isInitialQueryDisabled: false },
 		toggle: { variant: "default" },
 		slider: {
 			minValue: 0,
@@ -40,11 +47,17 @@ var UIConfig;
 		},
 		dateInput: {
 			todayIcon: false,
+			todayIconButtonSize: "none",
+			todayIconPlacement: "content",
 			shouldForceLeadingZeros: false,
 			disableManualEntry: false,
-			shouldUpdateDateOnMonthYearChange: false,
+			autoFixYear: false,
+			calendarIcon: /* @__PURE__ */ jsx(CalendarIcon, { className: "size-5" }),
+			dateTimeIcon: /* @__PURE__ */ jsx(DateTimeIcon, { className: "size-5" }),
+			timeIcon: /* @__PURE__ */ jsx(ClockIcon, { className: "size-6 text-interactive-text-secondary-idle" }),
+			setDateValueOnDateSelection: false,
 			granularity: "day",
-			autoFixYear: false
+			shouldUpdateDateOnMonthYearChange: false
 		},
 		actionModal: {
 			titleTypography: {

package/dist/config/uiStyle.context.d.ts

@@ -4,11 +4,17 @@ import { BreadcrumbChevronVariantProps, BreadcrumbIconVariantProps, BreadcrumbIt
 import { ButtonVariantProps } from '../components/buttons/Button/button.cva';
 import { PillButtonVariants } from '../components/buttons/PillButton/pillButton.cva';
 import { CheckboxIconVariantProps, CheckboxVariantProps } from '../components/inputs/Checkbox/checkbox.cva';
+import { DatePickerInputContentRowProps } from '../components/inputs/DateTime/shared/datePickerInput.cva';
 import { FormFieldErrorVariantProps } from '../components/inputs/FormField/formFieldError.cva';
+import { FormFieldHeaderVariantProps } from '../components/inputs/FormField/formFieldHeader.cva';
 import { FormFieldHelperVariantProps } from '../components/inputs/FormField/formFieldHelper.cva';
-import { RadioVariantProps } from '../components/inputs/RadioGroup/radio.cva';
-import { InputBaseProps, InputSideProps, InputSizeProps } from '../components/inputs/shared/input.cva';
+import { TextAreaWrapperVariantProps } from '../components/inputs/Input/TextArea/TextArea.cva';
+import { RadioContentRowVariantProps, RadioContentWrapperVariantProps, RadioVariantProps } from '../components/inputs/RadioGroup/radio.cva';
+import { SelectPopoverCva } from '../components/inputs/Selection/shared/selectDesktop.cva';
+import { SelectListBoxItemCva } from '../components/inputs/Selection/shared/selectItem.cva';
+import { InputBaseProps, InputClearClassProps, InputContentWrapperProps, InputSideProps, InputSizeProps } from '../components/inputs/shared/input.cva';
 import { LabelBaseProps } from '../components/inputs/shared/label.cva';
+import { TooltipWrapperTriggerVariantProps } from '../components/inputs/shared/tooltipWrapper.cva';
 import { ToggleVariantProps } from '../components/inputs/Toggle/toggle.cva';
 import { MenuCvaVariantProps, MenuItemVariantProps, MenuPopoverVariantProps, MenuPopoverWrapperVariantProps } from '../components/Menu/menu.cva';
 import { AccordionChevronVariantProps, AccordionHeadingSubtitleVariantProps, AccordionHeadingTitleVariantProps, AccordionHeadingVariantProps, AccordionIconVariantProps, AccordionItemVariantProps, AccordionPanelContentVariantProps, AccordionPanelVariantProps, AccordionTriggerVariantProps, AccordionVariantProps } from '../components/navigation/Accordion/accordion.cva';
@@ -24,13 +30,12 @@ import { LinkVariantProps } from '../components/text/Link/link.cva';
 import { TagVariantProps } from '../components/text/Tag/tag.cva';
 import { TypographyVariantProps } from '../components/text/Typography/typography.cva';
 import { CompoundMapper, ConfigSchema } from '../utils/compoundMapper';
-import { SelectListBoxItemCva } from '../components/inputs/Selection/shared/selectItem.cva';
 export declare namespace UIStyle {
     export type Cva<T> = (props: (T & ClassProp) | ClassProp) => string;
     type OptionKey = {
         [K in keyof Options]: Options[K] extends object ? `${K & string}.${keyof Options[K] & string}` : never;
     }[keyof Options];
-    interface Options {
+    export interface Options {
         button: {
             cva?: Cva<ButtonVariantProps>;
             sizeCva?: Cva<ButtonVariantProps>;
@@ -46,10 +51,14 @@ export declare namespace UIStyle {
             cva?: Cva<CheckboxVariantProps>;
             iconCva?: Cva<CheckboxIconVariantProps>;
             typography?: CompoundMapper<TypographyVariantProps, CheckboxVariantProps>;
+            contentClassName?: CompoundMapper<string, CheckboxVariantProps>;
         };
         radio: {
             cva?: Cva<RadioVariantProps>;
+            contentWrapperCva?: Cva<RadioContentWrapperVariantProps>;
+            contentRowCva?: Cva<RadioContentRowVariantProps>;
             typography?: CompoundMapper<TypographyVariantProps, RadioVariantProps>;
+            contentClassName?: CompoundMapper<string, RadioVariantProps>;
         };
         status: {
             iconCva?: Cva<ToastVariantProps>;
@@ -64,9 +73,20 @@ export declare namespace UIStyle {
         };
         input: {
             baseCva?: Cva<InputBaseProps>;
+            clearClassCva?: Cva<InputClearClassProps>;
+            contentWrapperCva?: Cva<InputContentWrapperProps>;
             sizeCva?: Cva<InputSizeProps>;
             sideCva?: Cva<InputSideProps>;
         };
+        textArea: {
+            wrapperCva?: Cva<TextAreaWrapperVariantProps>;
+        };
+        tooltipWrapper: {
+            triggerCva?: Cva<TooltipWrapperTriggerVariantProps>;
+        };
+        datePickerInput: {
+            contentRowCva?: Cva<DatePickerInputContentRowProps>;
+        };
         label: {
             cva?: Cva<LabelBaseProps>;
             typography?: CompoundMapper<TypographyVariantProps, LabelBaseProps>;
@@ -74,6 +94,7 @@ export declare namespace UIStyle {
         toggle: {
             cva?: Cva<ToggleVariantProps>;
             typography?: CompoundMapper<TypographyVariantProps, ToggleVariantProps>;
+            contentClassName?: CompoundMapper<string, ToggleVariantProps>;
         };
         typography: {
             cva?: Cva<TypographyVariantProps>;
@@ -145,11 +166,13 @@ export declare namespace UIStyle {
             cva?: Cva<PopoverVariantProps>;
         };
         formField: {
+            headerCva?: Cva<FormFieldHeaderVariantProps>;
             errorLabelCva?: Cva<FormFieldErrorVariantProps>;
             helperLabelCva?: Cva<FormFieldHelperVariantProps>;
         };
         select: {
             listBoxItemCva?: Cva<SelectListBoxItemCva>;
+            popoverCva?: Cva<SelectPopoverCva>;
         };
     }
     interface ProviderProps {