@povio/ui 3.3.0-rc.4 → 3.4.0-rc.1

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

@@ -1,5 +1,6 @@
 import { UIOverrides } from "../../../config/uiOverrides.context.js";
 import { UIConfig } from "../../../config/uiConfig.context.js";
+import { FieldController } from "../shared/form.binding.js";
 import { FormFieldError } from "../FormField/FormFieldError.js";
 import { CheckContent } from "../shared/CheckContent.js";
 import { toggleContentClassName, toggleDefinition, toggleTypography } from "./toggle.cva.js";
@@ -8,10 +9,9 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { Switch } from "react-aria-components";
 import { mergeRefs } from "@react-aria/utils";
-import { Controller } from "react-hook-form";
 //#region src/components/inputs/Toggle/Toggle.tsx
 var ToggleBase = (props) => {
-	const $ = c(50);
+	const $ = c(48);
 	const ui = UIConfig.useConfig();
 	const toggleCva = UIOverrides.useCva("toggle.cva", toggleDefinition);
 	const toggleTypographyMap = UIOverrides.useMapper("toggle.typography", toggleTypography);
@@ -31,10 +31,9 @@ var ToggleBase = (props) => {
 	let t8;
 	let t9;
 	if ($[0] !== props || $[1] !== toggleContentClassNameMap || $[2] !== toggleCva || $[3] !== toggleTypographyMap || $[4] !== ui) {
-		const { className, children: t10, isDisabled, error, variant: variantProp, fireBlurOnChange: fireBlurOnChangeProp, onChange, onBlur, ...rest } = props;
+		const { className, children: t10, isDisabled, error, variant: variantProp, onChange, onBlur, ...rest } = props;
 		children = t10;
 		const variant = variantProp ?? ui.toggle.variant;
-		const fireBlurOnChange = fireBlurOnChangeProp ?? ui.toggle.fireBlurOnChange;
 		let t11;
 		if ($[19] !== error || $[20] !== isDisabled) {
 			t11 = {
@@ -47,16 +46,13 @@ var ToggleBase = (props) => {
 		} else t11 = $[21];
 		formFieldErrorProps = t11;
 		let t12;
-		if ($[22] !== fireBlurOnChange || $[23] !== onBlur || $[24] !== onChange) {
+		if ($[22] !== onChange) {
 			t12 = (isSelected) => {
 				onChange?.(isSelected);
-				if (fireBlurOnChange) onBlur?.({});
 			};
-			$[22] = fireBlurOnChange;
-			$[23] = onBlur;
-			$[24] = onChange;
-			$[25] = t12;
-		} else t12 = $[25];
+			$[22] = onChange;
+			$[23] = t12;
+		} else t12 = $[23];
 		const handleChange = t12;
 		T1 = Switch;
 		t2 = rest;
@@ -66,12 +62,12 @@ var ToggleBase = (props) => {
 		t6 = handleChange;
 		t7 = onBlur;
 		const t13 = !isDisabled && "cursor-pointer";
-		if ($[26] !== className || $[27] !== t13) {
+		if ($[24] !== className || $[25] !== t13) {
 			t8 = clsx("group flex items-center gap-2", t13, className);
-			$[26] = className;
-			$[27] = t13;
-			$[28] = t8;
-		} else t8 = $[28];
+			$[24] = className;
+			$[25] = t13;
+			$[26] = t8;
+		} else t8 = $[26];
 		t9 = /* @__PURE__ */ jsx("div", { className: toggleCva({
 			variant,
 			...rest
@@ -121,20 +117,20 @@ var ToggleBase = (props) => {
 		t9 = $[18];
 	}
 	let t10;
-	if ($[29] !== T0 || $[30] !== children || $[31] !== t0 || $[32] !== t1) {
+	if ($[27] !== T0 || $[28] !== children || $[29] !== t0 || $[30] !== t1) {
 		t10 = /* @__PURE__ */ jsx(T0, {
 			typography: t0,
 			contentClassName: t1,
 			children
 		});
-		$[29] = T0;
-		$[30] = children;
-		$[31] = t0;
-		$[32] = t1;
-		$[33] = t10;
-	} else t10 = $[33];
+		$[27] = T0;
+		$[28] = children;
+		$[29] = t0;
+		$[30] = t1;
+		$[31] = t10;
+	} else t10 = $[31];
 	let t11;
-	if ($[34] !== T1 || $[35] !== t10 || $[36] !== t2 || $[37] !== t3 || $[38] !== t4 || $[39] !== t5 || $[40] !== t6 || $[41] !== t7 || $[42] !== t8 || $[43] !== t9) {
+	if ($[32] !== T1 || $[33] !== t10 || $[34] !== t2 || $[35] !== t3 || $[36] !== t4 || $[37] !== t5 || $[38] !== t6 || $[39] !== t7 || $[40] !== t8 || $[41] !== t9) {
 		t11 = /* @__PURE__ */ jsxs(T1, {
 			...t2,
 			"data-is-dirty": t3,
@@ -145,64 +141,64 @@ var ToggleBase = (props) => {
 			className: t8,
 			children: [t9, t10]
 		});
-		$[34] = T1;
-		$[35] = t10;
-		$[36] = t2;
-		$[37] = t3;
-		$[38] = t4;
-		$[39] = t5;
-		$[40] = t6;
-		$[41] = t7;
-		$[42] = t8;
-		$[43] = t9;
-		$[44] = t11;
-	} else t11 = $[44];
+		$[32] = T1;
+		$[33] = t10;
+		$[34] = t2;
+		$[35] = t3;
+		$[36] = t4;
+		$[37] = t5;
+		$[38] = t6;
+		$[39] = t7;
+		$[40] = t8;
+		$[41] = t9;
+		$[42] = t11;
+	} else t11 = $[42];
 	let t12;
-	if ($[45] !== formFieldErrorProps) {
+	if ($[43] !== formFieldErrorProps) {
 		t12 = /* @__PURE__ */ jsx(FormFieldError, { ...formFieldErrorProps });
-		$[45] = formFieldErrorProps;
-		$[46] = t12;
-	} else t12 = $[46];
+		$[43] = formFieldErrorProps;
+		$[44] = t12;
+	} else t12 = $[44];
 	let t13;
-	if ($[47] !== t11 || $[48] !== t12) {
+	if ($[45] !== t11 || $[46] !== t12) {
 		t13 = /* @__PURE__ */ jsxs(Fragment, { children: [t11, t12] });
-		$[47] = t11;
-		$[48] = t12;
-		$[49] = t13;
-	} else t13 = $[49];
+		$[45] = t11;
+		$[46] = t12;
+		$[47] = t13;
+	} else t13 = $[47];
 	return t13;
 };
 var Toggle = (props) => {
 	const $ = c(15);
-	if ("formControl" in props && props.formControl) {
-		let formControl;
+	if ("field" in props && props.field) {
+		let field;
 		let innerProps;
 		let ref;
 		if ($[0] !== props) {
-			({formControl, ref, ...innerProps} = props);
+			({field, ref, ...innerProps} = props);
 			$[0] = props;
-			$[1] = formControl;
+			$[1] = field;
 			$[2] = innerProps;
 			$[3] = ref;
 		} else {
-			formControl = $[1];
+			field = $[1];
 			innerProps = $[2];
 			ref = $[3];
 		}
 		let t0;
 		if ($[4] !== innerProps || $[5] !== props.error || $[6] !== props.isDisabled || $[7] !== ref) {
 			t0 = (t1) => {
-				const { field, fieldState: t2 } = t1;
+				const { field: field_0, fieldState: t2 } = t1;
 				const { error, isDirty } = t2;
 				return /* @__PURE__ */ jsx(ToggleBase, {
 					...innerProps,
-					ref: mergeRefs(ref, field.ref),
-					isSelected: field.value,
-					onChange: field.onChange,
-					onBlur: field.onBlur,
-					name: field.name,
+					ref: mergeRefs(ref, field_0.ref),
+					isSelected: field_0.value,
+					onChange: field_0.onChange,
+					onBlur: field_0.onBlur,
+					name: field_0.name,
 					isDirty,
-					isDisabled: field.disabled || props.isDisabled,
+					isDisabled: field_0.disabled || props.isDisabled,
 					error: props.error ?? error?.message
 				});
 			};
@@ -213,14 +209,14 @@ var Toggle = (props) => {
 			$[8] = t0;
 		} else t0 = $[8];
 		let t1;
-		if ($[9] !== formControl.control || $[10] !== formControl.name || $[11] !== t0) {
-			t1 = /* @__PURE__ */ jsx(Controller, {
-				control: formControl.control,
-				name: formControl.name,
+		if ($[9] !== field.form || $[10] !== field.name || $[11] !== t0) {
+			t1 = /* @__PURE__ */ jsx(FieldController, {
+				control: field.form,
+				name: field.name,
 				render: t0
 			});
-			$[9] = formControl.control;
-			$[10] = formControl.name;
+			$[9] = field.form;
+			$[10] = field.name;
 			$[11] = t0;
 			$[12] = t1;
 		} else t1 = $[12];

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

@@ -1,7 +1,5 @@
 import { CloseIcon } from "../../../assets/icons/Close.js";
-import { UIOverrides } from "../../../config/uiOverrides.context.js";
 import { UIConfig } from "../../../config/uiConfig.context.js";
-import { buttonIconSizeDefinition } from "../../buttons/Button/button.cva.js";
 import { InlineIconButton } from "../../buttons/InlineIconButton/InlineIconButton.js";
 import "../../../config/i18n.js";
 import { c } from "react/compiler-runtime";
@@ -10,70 +8,56 @@ import { clsx } from "clsx";
 import { useTranslation } from "react-i18next";
 //#region src/components/inputs/shared/InputClear.tsx
 var InputClear = (t0) => {
-	const $ = c(16);
+	const $ = c(12);
 	const { onClear, className, style, show, renderStatic } = t0;
-	const ui = UIConfig.useConfig();
-	const buttonIconSizeCva = UIOverrides.useCva("button.iconSize", buttonIconSizeDefinition);
-	const alwaysShowClear = ui.input.alwaysShowClear;
+	const alwaysShowClear = UIConfig.useConfig().input.alwaysShowClear;
 	let clearClassName;
 	let t1;
-	if ($[0] !== alwaysShowClear || $[1] !== buttonIconSizeCva || $[2] !== className || $[3] !== renderStatic || $[4] !== show || $[5] !== style) {
+	if ($[0] !== alwaysShowClear || $[1] !== className || $[2] !== renderStatic || $[3] !== show || $[4] !== style) {
 		t1 = Symbol.for("react.early_return_sentinel");
 		bb0: {
 			clearClassName = clsx("relative z-raised flex items-center", !alwaysShowClear && "md:invisible 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);
 			if (renderStatic) {
-				const t2 = clsx("group inline-flex items-center justify-center border border-solid border-support-transparent-outline", "rounded-button-rounding-s p-0 text-interactive-text-secondary-idle", clearClassName);
-				let t3;
-				if ($[8] !== buttonIconSizeCva) {
-					t3 = buttonIconSizeCva({
-						size: "none",
-						className: "shrink-0"
-					});
-					$[8] = buttonIconSizeCva;
-					$[9] = t3;
-				} else t3 = $[9];
-				let t4;
-				if ($[10] !== t3) {
-					t4 = /* @__PURE__ */ jsx(CloseIcon, { className: t3 });
-					$[10] = t3;
-					$[11] = t4;
-				} else t4 = $[11];
+				let t2;
+				if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
+					t2 = /* @__PURE__ */ jsx(CloseIcon, { className: "h-6 w-6 shrink-0" });
+					$[7] = t2;
+				} else t2 = $[7];
 				t1 = /* @__PURE__ */ jsx("button", {
 					type: "button",
 					"aria-hidden": "true",
 					tabIndex: -1,
-					className: t2,
+					className: clsx("group inline-flex items-center justify-center border border-solid border-support-transparent-outline", "rounded-button-rounding-s p-0 text-interactive-text-secondary-idle", clearClassName),
 					style,
-					children: t4
+					children: t2
 				});
 				break bb0;
 			}
 		}
 		$[0] = alwaysShowClear;
-		$[1] = buttonIconSizeCva;
-		$[2] = className;
-		$[3] = renderStatic;
-		$[4] = show;
-		$[5] = style;
-		$[6] = clearClassName;
-		$[7] = t1;
+		$[1] = className;
+		$[2] = renderStatic;
+		$[3] = show;
+		$[4] = style;
+		$[5] = clearClassName;
+		$[6] = t1;
 	} else {
-		clearClassName = $[6];
-		t1 = $[7];
+		clearClassName = $[5];
+		t1 = $[6];
 	}
 	if (t1 !== Symbol.for("react.early_return_sentinel")) return t1;
 	let t2;
-	if ($[12] !== clearClassName || $[13] !== onClear || $[14] !== style) {
+	if ($[8] !== clearClassName || $[9] !== onClear || $[10] !== style) {
 		t2 = /* @__PURE__ */ jsx(InputClearButton, {
 			onClear,
 			className: clearClassName,
 			style
 		});
-		$[12] = clearClassName;
-		$[13] = onClear;
-		$[14] = style;
-		$[15] = t2;
-	} else t2 = $[15];
+		$[8] = clearClassName;
+		$[9] = onClear;
+		$[10] = style;
+		$[11] = t2;
+	} else t2 = $[11];
 	return t2;
 };
 var InputClearButton = (t0) => {

package/dist/components/inputs/shared/form.binding.d.ts

@@ -0,0 +1,27 @@
+import { DeepKeys, DeepValue, UIForm } from '../../../hooks/useForm';
+export type FieldValues = Record<string, any>;
+export type FieldPath<TFieldValues extends FieldValues> = DeepKeys<TFieldValues>;
+export type FieldPathValue<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>> = DeepValue<TFieldValues, TName>;
+export type FormInstance<TFieldValues extends FieldValues> = UIForm<TFieldValues>;
+interface FieldControllerProps<TFieldValues extends FieldValues> {
+    control: UIForm<TFieldValues>;
+    name: DeepKeys<TFieldValues>;
+    render: (props: {
+        field: {
+            disabled: boolean;
+            name: string;
+            onBlur: () => void;
+            onChange: (value: any) => void;
+            ref: () => void;
+            value: any;
+        };
+        fieldState: {
+            error?: {
+                message: string;
+            };
+            isDirty: boolean;
+        };
+    }) => React.ReactNode;
+}
+export declare function FieldController<TFieldValues extends FieldValues>({ control: form, name, render, }: FieldControllerProps<TFieldValues>): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/inputs/shared/form.binding.js

@@ -0,0 +1,57 @@
+import { getFieldError } from "./form.types.js";
+import { c } from "react/compiler-runtime";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/inputs/shared/form.binding.tsx
+function FieldController(t0) {
+	const $ = c(12);
+	const { control: form, name, render } = t0;
+	const T0 = form.Field;
+	let t1;
+	if ($[0] !== form || $[1] !== name) {
+		t1 = form.getFieldValidators(name);
+		$[0] = form;
+		$[1] = name;
+		$[2] = t1;
+	} else t1 = $[2];
+	let t2;
+	if ($[3] !== form || $[4] !== name || $[5] !== render) {
+		t2 = (field) => render({
+			field: {
+				disabled: form.disabled,
+				name: field.name,
+				onBlur: () => {
+					field.handleBlur();
+					form.notifyBlur(name);
+				},
+				onChange: field.handleChange,
+				ref: _temp,
+				value: field.state.value
+			},
+			fieldState: {
+				error: getFieldError(field.state.meta.errors) ? { message: getFieldError(field.state.meta.errors) } : void 0,
+				isDirty: field.state.meta.isDirty
+			}
+		});
+		$[3] = form;
+		$[4] = name;
+		$[5] = render;
+		$[6] = t2;
+	} else t2 = $[6];
+	let t3;
+	if ($[7] !== form.Field || $[8] !== name || $[9] !== t1 || $[10] !== t2) {
+		t3 = /* @__PURE__ */ jsx(T0, {
+			name,
+			validators: t1,
+			children: t2
+		});
+		$[7] = form.Field;
+		$[8] = name;
+		$[9] = t1;
+		$[10] = t2;
+		$[11] = t3;
+	} else t3 = $[11];
+	return t3;
+}
+function _temp() {}
+//#endregion
+export { FieldController };

package/dist/components/inputs/shared/form.types.d.ts

@@ -1,12 +1,13 @@
-import { Control, FieldPath, FieldPathValue, FieldValues } from 'react-hook-form';
+import { DeepKeys, DeepValue, UIForm } from '../../../hooks/useForm';
 export type ControlKeys<TProps, TValueProp extends keyof TProps = "value" extends keyof TProps ? "value" : never> = TValueProp | "onChange" | "onBlur";
-export interface FormControl<TFieldValues extends FieldValues, TType> {
-    control: Control<TFieldValues>;
+export interface FormControl<TFieldValues extends Record<string, unknown>, TType> {
+    form: UIForm<TFieldValues>;
     name: {
-        [K in FieldPath<TFieldValues>]: FieldPathValue<TFieldValues, K> extends TType ? K : never;
-    }[FieldPath<TFieldValues>];
+        [K in DeepKeys<TFieldValues>]: DeepValue<TFieldValues, K> extends TType ? K : never;
+    }[DeepKeys<TFieldValues>];
 }
-export type FormControlProps<TProps, TFieldValues extends FieldValues, TValueProp extends keyof TProps = "value" extends keyof TProps ? "value" : never> = {
-    formControl: FormControl<TFieldValues, TProps[TValueProp] | null>;
+export type FormControlProps<TProps, TFieldValues extends Record<string, unknown>, TValueProp extends keyof TProps = "value" extends keyof TProps ? "value" : never> = {
+    field: FormControl<TFieldValues, TProps[TValueProp] | null>;
 } & Omit<TProps, ControlKeys<TProps, TValueProp>> & Partial<Record<ControlKeys<TProps, TValueProp>, never>>;
-export type ControlProps<TProps, TFieldValues extends FieldValues, TValueProp extends keyof TProps = "value" extends keyof TProps ? "value" : never> = FormControlProps<TProps, TFieldValues, TValueProp> | TProps;
+export type ControlProps<TProps, TFieldValues extends Record<string, unknown>, TValueProp extends keyof TProps = "value" extends keyof TProps ? "value" : never> = FormControlProps<TProps, TFieldValues, TValueProp> | TProps;
+export declare const getFieldError: (errors: unknown[]) => string | undefined;

package/dist/components/inputs/shared/form.types.js

@@ -0,0 +1,8 @@
+//#region src/components/inputs/shared/form.types.ts
+var getFieldError = (errors) => errors.flatMap((error) => {
+	if (typeof error === "string") return [error];
+	if (error && typeof error === "object" && "message" in error) return [String(error.message)];
+	return [];
+}).at(0);
+//#endregion
+export { getFieldError };

package/dist/components/navigation/Accordion/Accordion.js

@@ -1,81 +1,34 @@
 import { UIOverrides } from "../../../config/uiOverrides.context.js";
 import { accordionDefinition } from "./accordion.cva.js";
 import { AccordionItem } from "./AccordionItem.js";
-import { c } from "react/compiler-runtime";
 import { jsx } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { DisclosureGroup } from "react-aria-components";
 //#region src/components/navigation/Accordion/Accordion.tsx
-var Accordion = (t0) => {
-	const $ = c(23);
-	const { items, variant: t1, actionPosition: t2, allowsMultipleExpanded: t3, expandedKeys, defaultExpandedKeys, onExpandedChange, className, disabled } = t0;
-	const variant = t1 === void 0 ? "filled" : t1;
-	const actionPosition = t2 === void 0 ? "right" : t2;
-	const allowsMultipleExpanded = t3 === void 0 ? false : t3;
-	const accordionCva = UIOverrides.useCva("accordion.cva", accordionDefinition);
-	const t4 = items.length === 1;
-	let t5;
-	if ($[0] !== accordionCva || $[1] !== className || $[2] !== t4 || $[3] !== variant) {
-		t5 = clsx(accordionCva({
+var Accordion = ({ items, variant = "filled", actionPosition = "right", allowsMultipleExpanded = false, expandedKeys, defaultExpandedKeys, onExpandedChange, className, disabled }) => {
+	return /* @__PURE__ */ jsx(DisclosureGroup, {
+		allowsMultipleExpanded,
+		expandedKeys,
+		defaultExpandedKeys,
+		onExpandedChange,
+		className: clsx(UIOverrides.useCva("accordion.cva", accordionDefinition)({
 			className,
 			variant,
-			singleItem: t4
-		}));
-		$[0] = accordionCva;
-		$[1] = className;
-		$[2] = t4;
-		$[3] = variant;
-		$[4] = t5;
-	} else t5 = $[4];
-	let t6;
-	if ($[5] !== actionPosition || $[6] !== disabled || $[7] !== items || $[8] !== variant) {
-		let t7;
-		if ($[10] !== actionPosition || $[11] !== disabled || $[12] !== items.length || $[13] !== variant) {
-			t7 = (item) => /* @__PURE__ */ jsx(AccordionItem, {
-				id: item.id,
-				heading: item.heading,
-				subheading: item.subheading,
-				icon: item.icon,
-				variant,
-				actionPosition,
-				disabled: item.disabled || disabled,
-				isSingle: items.length === 1,
-				children: item.children
-			}, item.id);
-			$[10] = actionPosition;
-			$[11] = disabled;
-			$[12] = items.length;
-			$[13] = variant;
-			$[14] = t7;
-		} else t7 = $[14];
-		t6 = items.map(t7);
-		$[5] = actionPosition;
-		$[6] = disabled;
-		$[7] = items;
-		$[8] = variant;
-		$[9] = t6;
-	} else t6 = $[9];
-	let t7;
-	if ($[15] !== allowsMultipleExpanded || $[16] !== defaultExpandedKeys || $[17] !== disabled || $[18] !== expandedKeys || $[19] !== onExpandedChange || $[20] !== t5 || $[21] !== t6) {
-		t7 = /* @__PURE__ */ jsx(DisclosureGroup, {
-			allowsMultipleExpanded,
-			expandedKeys,
-			defaultExpandedKeys,
-			onExpandedChange,
-			className: t5,
-			isDisabled: disabled,
-			children: t6
-		});
-		$[15] = allowsMultipleExpanded;
-		$[16] = defaultExpandedKeys;
-		$[17] = disabled;
-		$[18] = expandedKeys;
-		$[19] = onExpandedChange;
-		$[20] = t5;
-		$[21] = t6;
-		$[22] = t7;
-	} else t7 = $[22];
-	return t7;
+			singleItem: items.length === 1
+		})),
+		isDisabled: disabled,
+		children: items.map((item) => /* @__PURE__ */ jsx(AccordionItem, {
+			id: item.id,
+			heading: item.heading,
+			subheading: item.subheading,
+			icon: item.icon,
+			variant,
+			actionPosition,
+			disabled: item.disabled || disabled,
+			isSingle: items.length === 1,
+			children: item.children
+		}, item.id))
+	});
 };
 //#endregion
 export { Accordion };