@povio/ui 2.3.2 → 3.0.0-rc.1

package/dist/config/theme.context.js

@@ -1,6 +1,7 @@
 import { useLocalStorage } from "../hooks/useLocalStorage.js";
+import { c } from "react/compiler-runtime";
 import { jsx } from "react/jsx-runtime";
-import { createContext, use, useCallback, useEffect, useMemo, useState } from "react";
+import { createContext, use, useEffect, useState } from "react";
 import { z } from "zod";
 //#region src/config/theme.context.tsx
 var ThemeContext;
@@ -12,56 +13,108 @@ var ThemeContext;
 		"system"
 	]);
 	const ThemeContext = createContext(null);
-	_ThemeContext.ThemeContextProvider = ({ children, storageKey = DEFAULT_STORAGE_KEY }) => {
-		const [systemTheme, setSystemTheme] = useState(() => {
-			if (typeof window === "undefined") return;
-			return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
-		});
-		const { value: theme, set } = useLocalStorage({
-			key: storageKey,
-			schema: ThemeSchema
-		});
-		const updateTheme = useCallback((theme) => {
-			set(theme);
-		}, [set]);
-		useEffect(() => {
-			if (typeof window === "undefined") return;
-			const onChange = (event) => {
-				setSystemTheme(event.matches ? "dark" : "light");
+	_ThemeContext.ThemeContextProvider = (t0) => {
+		const $ = c(17);
+		const { children, storageKey: t1 } = t0;
+		const storageKey = t1 === void 0 ? DEFAULT_STORAGE_KEY : t1;
+		const [systemTheme, setSystemTheme] = useState(_temp);
+		let t2;
+		if ($[0] !== storageKey) {
+			t2 = {
+				key: storageKey,
+				schema: ThemeSchema
 			};
-			const media = window.matchMedia("(prefers-color-scheme: dark)");
-			media.addEventListener("change", onChange);
-			return () => {
-				media.removeEventListener("change", onChange);
+			$[0] = storageKey;
+			$[1] = t2;
+		} else t2 = $[1];
+		const { value: theme, set } = useLocalStorage(t2);
+		let t3;
+		if ($[2] !== set) {
+			t3 = (theme_0) => {
+				set(theme_0);
 			};
-		}, []);
-		useEffect(() => {
-			document.documentElement.classList.remove("dark");
-			if ((!theme || theme === "system") && systemTheme === "dark" || theme === "dark") {
-				document.documentElement.classList.add("dark");
-				document.documentElement.style.colorScheme = "dark";
-			} else if (theme === "light") {
-				document.documentElement.classList.add("light");
-				document.documentElement.style.colorScheme = "light";
-			} else document.documentElement.style.colorScheme = "light";
-		}, [theme, systemTheme]);
-		const contextValue = useMemo(() => ({
-			theme: theme ?? "system",
-			systemTheme,
-			updateTheme
-		}), [
-			theme,
-			systemTheme,
-			updateTheme
-		]);
-		return /* @__PURE__ */ jsx(ThemeContext.Provider, {
-			value: contextValue,
-			children
-		});
+			$[2] = set;
+			$[3] = t3;
+		} else t3 = $[3];
+		const updateTheme = t3;
+		let t4;
+		let t5;
+		if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+			t4 = () => {
+				if (typeof window === "undefined") return;
+				const onChange = (event) => {
+					setSystemTheme(event.matches ? "dark" : "light");
+				};
+				const media_0 = window.matchMedia("(prefers-color-scheme: dark)");
+				media_0.addEventListener("change", onChange);
+				return () => {
+					media_0.removeEventListener("change", onChange);
+				};
+			};
+			t5 = [];
+			$[4] = t4;
+			$[5] = t5;
+		} else {
+			t4 = $[4];
+			t5 = $[5];
+		}
+		useEffect(t4, t5);
+		let t6;
+		let t7;
+		if ($[6] !== systemTheme || $[7] !== theme) {
+			t6 = () => {
+				document.documentElement.classList.remove("dark");
+				if ((!theme || theme === "system") && systemTheme === "dark" || theme === "dark") {
+					document.documentElement.classList.add("dark");
+					document.documentElement.style.colorScheme = "dark";
+				} else if (theme === "light") {
+					document.documentElement.classList.add("light");
+					document.documentElement.style.colorScheme = "light";
+				} else document.documentElement.style.colorScheme = "light";
+			};
+			t7 = [theme, systemTheme];
+			$[6] = systemTheme;
+			$[7] = theme;
+			$[8] = t6;
+			$[9] = t7;
+		} else {
+			t6 = $[8];
+			t7 = $[9];
+		}
+		useEffect(t6, t7);
+		const t8 = theme ?? "system";
+		let t9;
+		if ($[10] !== systemTheme || $[11] !== t8 || $[12] !== updateTheme) {
+			t9 = {
+				theme: t8,
+				systemTheme,
+				updateTheme
+			};
+			$[10] = systemTheme;
+			$[11] = t8;
+			$[12] = updateTheme;
+			$[13] = t9;
+		} else t9 = $[13];
+		const contextValue = t9;
+		let t10;
+		if ($[14] !== children || $[15] !== contextValue) {
+			t10 = /* @__PURE__ */ jsx(ThemeContext.Provider, {
+				value: contextValue,
+				children
+			});
+			$[14] = children;
+			$[15] = contextValue;
+			$[16] = t10;
+		} else t10 = $[16];
+		return t10;
 	};
 	_ThemeContext.useTheme = () => {
 		return use(ThemeContext);
 	};
 })(ThemeContext || (ThemeContext = {}));
+function _temp() {
+	if (typeof window === "undefined") return;
+	return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+}
 //#endregion
 export { ThemeContext };

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,17 +19,31 @@ 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"> & {
             alwaysShowClear?: boolean;
         };
         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">;
-        toggle: Pick<ToggleProps, "variant">;
+        radioGroup: Pick<RadioGroupProps, "variant" | "hideLabel" | "fireBlurOnChange">;
+        checkbox: Pick<CheckboxProps, "variant" | "fireBlurOnChange">;
+        select: Pick<SelectBaseProps, "selectionMode" | "isSearchable" | "collapseAfter" | "selectedTagsType" | "hideSearchIcon" | "fireBlurOnChange">;
+        queryAutocomplete: {
+            isInitialQueryDisabled?: boolean;
+        };
+        querySelect: {
+            isInitialQueryDisabled?: boolean;
+        };
+        toggle: Pick<ToggleProps, "variant" | "fireBlurOnChange">;
         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" | "fireBlurOnChange"> & {
+            calendarIcon?: ReactElement;
+            dateTimeIcon?: ReactElement;
+            timeIcon?: ReactElement;
+            setDateValueOnDateSelection?: boolean;
+            timeZone: string;
+            todayIconButtonComponent?: DatePickerProps["todayIconButtonComponent"];
+        };
         actionModal: Pick<ActionModalProps, "titleTypography" | "descriptionTypography">;
         bottomSheet: Pick<BottomSheetProps, "closeDragThreshold" | "closeVelocityThreshold" | "hideThumb" | "headerTypography">;
         tableHeaderText: Pick<HeaderTextProps, "variant" | "size">;

package/dist/config/uiConfig.context.js

@@ -1,11 +1,16 @@
+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 { c } from "react/compiler-runtime";
 import { jsx } from "react/jsx-runtime";
 import { createContext, use } from "react";
 //#region src/config/uiConfig.context.tsx
 var UIConfig;
 (function(_UIConfig) {
 	const DEFAULT_CONFIG = {
+		renderStaticInput: true,
 		input: {
 			variant: "outlined",
 			as: "default",
@@ -24,28 +29,47 @@ var UIConfig;
 		} },
 		radioGroup: {
 			variant: "default",
-			hideLabel: false
+			hideLabel: false,
+			fireBlurOnChange: false
+		},
+		checkbox: {
+			variant: "default",
+			fireBlurOnChange: false
 		},
-		checkbox: { variant: "default" },
 		select: {
 			selectionMode: "single",
 			isSearchable: false,
 			selectedTagsType: "list",
 			collapseAfter: 3,
-			hideSearchIcon: false
+			hideSearchIcon: false,
+			fireBlurOnChange: false
+		},
+		queryAutocomplete: { isInitialQueryDisabled: false },
+		querySelect: { isInitialQueryDisabled: false },
+		toggle: {
+			variant: "default",
+			fireBlurOnChange: false
 		},
-		toggle: { variant: "default" },
 		slider: {
 			minValue: 0,
 			maxValue: 100
 		},
 		dateInput: {
 			todayIcon: false,
+			todayIconButtonSize: "none",
+			todayIconButtonComponent: "iconButton",
+			todayIconPlacement: "content",
 			shouldForceLeadingZeros: false,
 			disableManualEntry: false,
-			shouldUpdateDateOnMonthYearChange: false,
+			autoFixYear: false,
+			fireBlurOnChange: 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,
+			timeZone: "clientLocal",
 			granularity: "day",
-			autoFixYear: false
+			shouldUpdateDateOnMonthYearChange: false
 		},
 		actionModal: {
 			titleTypography: {
@@ -78,15 +102,42 @@ var UIConfig;
 		toast: { variant: "outlined" }
 	};
 	const Context = createContext(DEFAULT_CONFIG);
-	_UIConfig.Provider = ({ config = {}, children }) => {
+	_UIConfig.Provider = (t0) => {
+		const $ = c(9);
+		const { config: t1, children } = t0;
+		let t2;
+		if ($[0] !== t1) {
+			t2 = t1 === void 0 ? {} : t1;
+			$[0] = t1;
+			$[1] = t2;
+		} else t2 = $[1];
+		const config = t2;
 		const parentConfig = use(Context) || DEFAULT_CONFIG;
-		const value = useDeepCompareMemo(() => {
-			return ObjectUtils.deepConditionalMerge(parentConfig, config, (val) => val !== null && val !== void 0);
-		}, [config, parentConfig]);
-		return /* @__PURE__ */ jsx(Context.Provider, {
-			value,
-			children
-		});
+		let t3;
+		let t4;
+		if ($[2] !== config || $[3] !== parentConfig) {
+			t3 = () => ObjectUtils.deepConditionalMerge(parentConfig, config, _temp);
+			t4 = [config, parentConfig];
+			$[2] = config;
+			$[3] = parentConfig;
+			$[4] = t3;
+			$[5] = t4;
+		} else {
+			t3 = $[4];
+			t4 = $[5];
+		}
+		const value = useDeepCompareMemo(t3, t4);
+		let t5;
+		if ($[6] !== children || $[7] !== value) {
+			t5 = /* @__PURE__ */ jsx(Context.Provider, {
+				value,
+				children
+			});
+			$[6] = children;
+			$[7] = value;
+			$[8] = t5;
+		} else t5 = $[8];
+		return t5;
 	};
 	_UIConfig.useConfig = () => {
 		const context = use(Context);
@@ -94,5 +145,8 @@ var UIConfig;
 		return context;
 	};
 })(UIConfig || (UIConfig = {}));
+function _temp(val) {
+	return val !== null && val !== void 0;
+}
 //#endregion
 export { UIConfig };

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

@@ -0,0 +1,192 @@
+import { ClassProp } from 'class-variance-authority/types';
+import { PropsWithChildren } from 'react';
+import { ButtonConfig, ButtonContentConfig, ButtonIconSizeConfig, ButtonSizeConfig } from '../components/buttons/Button/button.cva';
+import { StatusIconConfig, StatusSeparatorConfig, ToastConfig } from '../components/status/Toast/toast.cva';
+import { CompoundMapper, ConfigSchema } from '../utils/compoundMapper';
+import { StyleMergeUtils } from '../utils/style-merge.util';
+export declare namespace UIOverrides {
+    export type Cva<T> = (props?: (T & ClassProp) | ClassProp) => string;
+    type GenericCva = Cva<unknown>;
+    type Mapper = CompoundMapper<unknown, ConfigSchema>;
+    type CvaOption<TConfig extends StyleMergeUtils.CvaConfigShape> = StyleMergeUtils.CvaConfigOverride<TConfig> | GenericCva;
+    type GenericCvaOption = StyleMergeUtils.CvaConfigOverride | GenericCva;
+    type OptionKey = {
+        [K in keyof Options]: Options[K] extends object ? `${K & string}.${keyof Options[K] & string}` : never;
+    }[keyof Options];
+    type OptionValue<K extends OptionKey> = K extends `${infer TSection}.${infer TSlot}` ? TSection extends keyof Options ? TSlot extends keyof Options[TSection] ? Options[TSection][TSlot] : never : never : never;
+    type ConfigFromOverride<TValue> = TValue extends StyleMergeUtils.CvaConfigOverride<infer TConfig> ? TConfig : never;
+    type OverrideConfig<TValue> = [ConfigFromOverride<TValue>] extends [never] ? never : ConfigFromOverride<TValue>;
+    type ExtractConfig<TValue> = [OverrideConfig<TValue>] extends [never] ? TValue extends {
+        config?: infer TConfig;
+    } ? NonNullable<TConfig> : TValue : OverrideConfig<TValue>;
+    type EmptyObject = {};
+    type VariantSchema<TConfig> = [TConfig] extends [never] ? EmptyObject : TConfig extends {
+        variants?: infer TVariants;
+    } ? [NonNullable<TVariants>] extends [never] ? EmptyObject : NonNullable<TVariants> : EmptyObject;
+    export type VariantProps<TConfig> = [keyof VariantSchema<ExtractConfig<TConfig>>] extends [never] ? EmptyObject : StyleMergeUtils.ConfigVariants<Extract<VariantSchema<ExtractConfig<TConfig>>, StyleMergeUtils.ConfigSchema>>;
+    export type OverrideVariantProps<TOverride> = VariantProps<ExtractConfig<TOverride>>;
+    export interface Options {
+        button: {
+            cva?: CvaOption<ButtonConfig>;
+            sizeCva?: CvaOption<ButtonSizeConfig>;
+            contentCva?: CvaOption<ButtonContentConfig>;
+            iconSize?: CvaOption<ButtonIconSizeConfig>;
+            typography?: Mapper;
+        };
+        pillButton: {
+            cva?: GenericCvaOption;
+            typography?: Mapper;
+        };
+        checkbox: {
+            cva?: GenericCvaOption;
+            iconCva?: GenericCvaOption;
+            typography?: Mapper;
+            contentClassName?: Mapper;
+        };
+        radio: {
+            cva?: GenericCvaOption;
+            contentWrapperCva?: GenericCvaOption;
+            contentRowCva?: GenericCvaOption;
+            typography?: Mapper;
+            contentClassName?: Mapper;
+        };
+        status: {
+            iconCva?: CvaOption<StatusIconConfig>;
+            separatorCva?: CvaOption<StatusSeparatorConfig>;
+        };
+        toast: {
+            cva?: CvaOption<ToastConfig>;
+            buttonColor?: Mapper;
+        };
+        alert: {
+            cva?: GenericCvaOption;
+        };
+        input: {
+            baseCva?: GenericCvaOption;
+            clearClassCva?: GenericCvaOption;
+            contentWrapperCva?: GenericCvaOption;
+            sizeCva?: GenericCvaOption;
+            sideCva?: GenericCvaOption;
+        };
+        textArea: {
+            wrapperCva?: GenericCvaOption;
+        };
+        tooltipWrapper: {
+            triggerCva?: GenericCvaOption;
+        };
+        datePickerInput: {
+            contentRowCva?: GenericCvaOption;
+        };
+        label: {
+            cva?: GenericCvaOption;
+            typography?: Mapper;
+        };
+        toggle: {
+            cva?: GenericCvaOption;
+            typography?: Mapper;
+            contentClassName?: Mapper;
+        };
+        typography: {
+            cva?: GenericCvaOption;
+        };
+        link: {
+            cva?: GenericCvaOption;
+        };
+        tag: {
+            cva?: GenericCvaOption;
+        };
+        table: {
+            headRowCva?: GenericCvaOption;
+            headDataCva?: GenericCvaOption;
+            rowCva?: GenericCvaOption;
+            dataCva?: GenericCvaOption;
+            headerTextCva?: GenericCvaOption;
+            cellTextCva?: GenericCvaOption;
+        };
+        tooltip: {
+            cva?: GenericCvaOption;
+            pointerHorizontalCva?: GenericCvaOption;
+            pointerVerticalCva?: GenericCvaOption;
+            textCva?: GenericCvaOption;
+        };
+        modal: {
+            contentCva?: GenericCvaOption;
+            overlayCva?: GenericCvaOption;
+            mainCva?: GenericCvaOption;
+        };
+        menu: {
+            cva?: GenericCvaOption;
+            itemCva?: GenericCvaOption;
+            popoverCva?: GenericCvaOption;
+            popoverWrapperCva?: GenericCvaOption;
+        };
+        segment: {
+            cva?: GenericCvaOption;
+            itemCva?: GenericCvaOption;
+        };
+        stepper: {
+            cva?: GenericCvaOption;
+            itemCva?: GenericCvaOption;
+            iconCva?: GenericCvaOption;
+            numberCva?: GenericCvaOption;
+            titleCva?: GenericCvaOption;
+            subtextCva?: GenericCvaOption;
+            separatorCva?: GenericCvaOption;
+        };
+        accordion: {
+            cva?: GenericCvaOption;
+            itemCva?: GenericCvaOption;
+            triggerCva?: GenericCvaOption;
+            headingCva?: GenericCvaOption;
+            headingTitleCva?: GenericCvaOption;
+            headingSubtitleCva?: GenericCvaOption;
+            chevronCva?: GenericCvaOption;
+            iconCva?: GenericCvaOption;
+            panelCva?: GenericCvaOption;
+            panelContentCva?: GenericCvaOption;
+        };
+        breadcrumbs: {
+            cva?: GenericCvaOption;
+            itemCva?: GenericCvaOption;
+            segmentCva?: GenericCvaOption;
+            chevronCva?: GenericCvaOption;
+            iconCva?: GenericCvaOption;
+        };
+        popover: {
+            cva?: GenericCvaOption;
+        };
+        formField: {
+            headerCva?: GenericCvaOption;
+            errorLabelCva?: GenericCvaOption;
+            helperLabelCva?: GenericCvaOption;
+        };
+        select: {
+            listBoxItemCva?: GenericCvaOption;
+            popoverCva?: GenericCvaOption;
+        };
+    }
+    export type Config = Partial<Options>;
+    interface ProviderProps {
+        config?: Config;
+    }
+    export const Provider: ({ children, config }: PropsWithChildren<ProviderProps>) => import("react/jsx-runtime").JSX.Element;
+    export const useCvaOverride: <K extends OptionKey>(key: K) => undefined;
+    export function defineConfig(definition: {
+        base: string[];
+    }): {
+        base: string[];
+        config?: StyleMergeUtils.Config<Record<never, never>>;
+    };
+    export function defineConfig<const TSchema extends StyleMergeUtils.ConfigSchema>(definition: {
+        base: string[];
+        config: StyleMergeUtils.Config<TSchema>;
+    }): {
+        base: string[];
+        config: StyleMergeUtils.Config<TSchema>;
+    };
+    export const defineOverride: <K extends OptionKey, const TOverride extends NonNullable<OptionValue<K>>>(_key: K, override: TOverride) => TOverride;
+    export function useCva<K extends OptionKey>(key: K, fallback: StyleMergeUtils.CvaDefinition<ConfigFromOverride<NonNullable<OptionValue<K>>> & StyleMergeUtils.CvaConfigShape>): Cva<any>;
+    export function useCva<K extends OptionKey, TProps>(key: K, fallback: Cva<TProps>): Cva<TProps>;
+    export const useMapper: <T, K extends ConfigSchema>(key: OptionKey, fallback: CompoundMapper<T, K>) => CompoundMapper<T, K>;
+    export {};
+}

package/dist/config/uiOverrides.context.js

@@ -0,0 +1,113 @@
+import { StyleMergeUtils } from "../utils/style-merge.util.js";
+import { c } from "react/compiler-runtime";
+import { jsx } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { createContext, use } from "react";
+import { cva } from "class-variance-authority";
+//#region src/config/uiOverrides.context.tsx
+var UIOverrides;
+(function(_UIOverrides) {
+	const Context = createContext(null);
+	_UIOverrides.Provider = (t0) => {
+		const $ = c(3);
+		const { children, config } = t0;
+		let t1;
+		if ($[0] !== children || $[1] !== config) {
+			t1 = /* @__PURE__ */ jsx(Context.Provider, {
+				value: config,
+				children
+			});
+			$[0] = children;
+			$[1] = config;
+			$[2] = t1;
+		} else t1 = $[2];
+		return t1;
+	};
+	const useConfig = () => {
+		return use(Context);
+	};
+	const useCvaOverride = _UIOverrides.useCvaOverride = (key) => {
+		const uiOverrides = useConfig();
+		if (!uiOverrides) return;
+		const [k1, k2] = key.split(".");
+		const item = uiOverrides[k1]?.[k2];
+		if (!item) return;
+		return item;
+	};
+	function defineConfig(definition) {
+		return definition;
+	}
+	_UIOverrides.defineConfig = defineConfig;
+	_UIOverrides.defineOverride = (_key, override) => {
+		return override;
+	};
+	const isCvaFunction = (item) => {
+		return typeof item === "function";
+	};
+	const isCvaOverrideConfig = (item) => {
+		if (typeof item !== "object") return false;
+		if (item == null) return false;
+		return "mode" in item;
+	};
+	const isDefinition = (item) => {
+		if (typeof item !== "object") return false;
+		if (item == null) return false;
+		return "base" in item;
+	};
+	function useCva(key, fallback) {
+		const $ = c(6);
+		const override = useCvaOverride(key);
+		let t0;
+		bb0: {
+			if (isCvaFunction(override)) {
+				t0 = override;
+				break bb0;
+			}
+			if (isCvaFunction(fallback)) {
+				t0 = fallback;
+				break bb0;
+			}
+			if (!isDefinition(fallback)) {
+				t0 = _temp;
+				break bb0;
+			}
+			const definition = fallback;
+			const typedOverride = override;
+			if (isCvaOverrideConfig(typedOverride)) {
+				let t1;
+				if ($[0] !== definition || $[1] !== typedOverride) {
+					const mergedDefinition = StyleMergeUtils.mergeCvaDefinition(definition, typedOverride);
+					t1 = cva(clsx(mergedDefinition.base), mergedDefinition.config);
+					$[0] = definition;
+					$[1] = typedOverride;
+					$[2] = t1;
+				} else t1 = $[2];
+				t0 = t1;
+				break bb0;
+			}
+			let t1;
+			if ($[3] !== definition.base || $[4] !== definition.config) {
+				t1 = cva(clsx(definition.base), definition.config);
+				$[3] = definition.base;
+				$[4] = definition.config;
+				$[5] = t1;
+			} else t1 = $[5];
+			t0 = t1;
+		}
+		return t0;
+	}
+	_UIOverrides.useCva = useCva;
+	function _temp() {
+		return "";
+	}
+	_UIOverrides.useMapper = (key, fallback) => {
+		const uiOverrides = useConfig();
+		if (!uiOverrides) return fallback;
+		const [k1, k2] = key.split(".");
+		const item = uiOverrides[k1]?.[k2];
+		if (typeof item !== "function") return fallback;
+		return item;
+	};
+})(UIOverrides || (UIOverrides = {}));
+//#endregion
+export { UIOverrides };

package/dist/helpers/dynamicInputs.d.ts

@@ -21,14 +21,14 @@ export type AllowedComponentType<TZodType extends z.ZodType> = ZodUtils.ZodTypeS
     datetime: "datePicker" | "dateTimePicker" | "timePicker";
     dateRange: "dateRangePicker";
     boolean: "toggle" | "checkbox";
-    number: "numberInput" | "slider" | "select" | "autocomplete" | "queryAutocomplete" | "segment";
-    enum: "select" | "autocomplete" | "segment";
-    string: "textInput" | "passwordInput" | "textArea" | "select" | "autocomplete" | "queryAutocomplete" | "segment";
+    number: "numberInput" | "slider" | "select" | "querySelect" | "autocomplete" | "queryAutocomplete" | "segment";
+    enum: "select" | "querySelect" | "autocomplete" | "segment";
+    string: "textInput" | "passwordInput" | "textArea" | "select" | "querySelect" | "autocomplete" | "queryAutocomplete" | "segment";
     email: "textInput";
-    array: "select" | "autocomplete" | "queryAutocomplete" | "segment";
+    array: "select" | "querySelect" | "autocomplete" | "queryAutocomplete" | "segment";
     object: InputComponentType;
     unknown: InputComponentType;
-    uuid: "select" | "autocomplete" | "queryAutocomplete" | "segment";
+    uuid: "select" | "querySelect" | "autocomplete" | "queryAutocomplete" | "segment";
 }>;
 interface DynamicInputDefBase<TProps> {
     label?: string;

package/dist/helpers/dynamicInputs.js

@@ -81,6 +81,7 @@ var getDefaultProps = (componentType, keyType) => {
 	].includes(componentType)) props.items = getDefaultSelectionItems(unwrappedType);
 	if ([
 		"select",
+		"querySelect",
 		"autocomplete",
 		"queryAutocomplete",
 		"segment"
@@ -146,6 +147,8 @@ var populateInputDef = (schema, schemaKey, value, options) => {
 	const inputWrapper = value.inputWrapper ?? options.globalInputWrapper;
 	if ("render" in value) return {
 		name,
+		label,
+		placeholder,
 		render: value.render
 	};
 	const schemaKeyType = schema.shape[schemaKey];