@povio/ui 3.4.0-rc.15 → 3.4.0-rc.17

package/dist/components/inputs/Input/TextArea/TextArea.cva.d.ts

@@ -1,8 +1,9 @@
-import { UIOverrides } from '../../../../config/uiOverrides.context';
-export declare const textAreaWrapperDefinition: {
-    base: string[];
-    config?: import("../../../../utils/style-merge.util").StyleMergeUtils.Config<Record<never, never>>;
+import { StyleMergeUtils } from "../../../../utils/style-merge.util.js";
+import "../../../../config/uiOverrides.context.js";
+//#region src/components/inputs/Input/TextArea/TextArea.cva.d.ts
+declare const textAreaWrapperDefinition: {
+  base: string[];
+  config?: StyleMergeUtils.Config<Record<never, never>>;
 };
-export type TextAreaWrapperConfig = NonNullable<typeof textAreaWrapperDefinition.config>;
-export interface TextAreaWrapperVariantProps extends UIOverrides.VariantProps<TextAreaWrapperConfig> {
-}
+//#endregion
+export { textAreaWrapperDefinition };

package/dist/components/inputs/Input/TextArea/TextArea.cva.js

@@ -1,5 +1,5 @@
 import { UIOverrides } from "../../../../config/uiOverrides.context.js";
 //#region src/components/inputs/Input/TextArea/TextArea.cva.ts
-var textAreaWrapperDefinition = UIOverrides.defineConfig({ base: ["group/text-area relative h-full"] });
+const textAreaWrapperDefinition = UIOverrides.defineConfig({ base: ["group/text-area relative h-full"] });
 //#endregion
 export { textAreaWrapperDefinition };

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

@@ -1,29 +1,27 @@
-import { FC, FocusEvent, ReactElement, ReactNode, SVGProps } from 'react';
-import { InlineIconButtonProps } from '../../../buttons/InlineIconButton/InlineIconButton';
-import { FormFieldHeaderProps } from '../../FormField/FormFieldHeader';
-import { InputVariantProps } from '../../shared/input.cva';
-export interface InputContentProps {
+import { InlineIconButtonProps } from "../../../inline-icon-button.js";
+import { FormFieldHeaderProps } from "../../FormField/FormFieldHeader.js";
+import "../../shared/input.cva.js";
+import { FC, FocusEvent, ReactElement, ReactNode, SVGProps } from "react";
+//#region src/components/inputs/Input/shared/InputContent.d.ts
+interface InputContentProps {
+  className?: string;
+  unit?: string;
+  isLoading?: boolean;
+  isDisabled?: boolean;
+  action?: {
+    icon: InlineIconButtonProps["icon"];
+    onClick: () => void;
+    altText: string;
     className?: string;
-    unit?: string;
-    isLoading?: boolean;
-    isDisabled?: boolean;
-    action?: {
-        icon: InlineIconButtonProps["icon"];
-        onClick: () => void;
-        altText: string;
-        className?: string;
-    };
-    leadingIcon?: FC<SVGProps<SVGSVGElement>> | ReactElement;
-    trailingIcon?: FC<SVGProps<SVGSVGElement>> | ReactElement;
-    isClearable?: boolean;
-    isClearableIfDisabled?: boolean;
-    value?: string | number | null;
-    onChange?: (value: string) => void;
-    onBlur?: (e: FocusEvent<HTMLInputElement>) => void;
-    headerProps?: FormFieldHeaderProps;
+  };
+  leadingIcon?: FC<SVGProps<SVGSVGElement>> | ReactElement;
+  trailingIcon?: FC<SVGProps<SVGSVGElement>> | ReactElement;
+  isClearable?: boolean;
+  isClearableIfDisabled?: boolean;
+  value?: string | number | null;
+  onChange?: (value: string) => void;
+  onBlur?: (e: FocusEvent<HTMLInputElement>) => void;
+  headerProps?: FormFieldHeaderProps;
 }
-interface InputContentComponentProps extends InputContentProps, InputVariantProps {
-    children: ReactNode;
-}
-export declare const InputContent: ({ leadingIcon: LeadingIcon, trailingIcon: TrailingIcon, unit, isLoading, isDisabled, action, isClearable, isClearableIfDisabled, value, onChange, onBlur, children, headerProps, as, size, }: InputContentComponentProps) => import("react/jsx-runtime").JSX.Element;
-export {};
+//#endregion
+export { InputContentProps };

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

@@ -1,213 +1,79 @@
 import { UIOverrides } from "../../../../config/uiOverrides.context.js";
 import { typographyDefinition } from "../../../text/Typography/typography.cva.js";
-import { Loader } from "../../../status/Loader/Loader.js";
-import { InlineIconButton } from "../../../buttons/InlineIconButton/InlineIconButton.js";
+import { Loader } from "../../../loader.js";
+import { InlineIconButton } from "../../../inline-icon-button.js";
 import { FormFieldLabel } from "../../FormField/FormFieldLabel.js";
 import { inputContentWrapperDefinition, inputSizeDefinition } from "../../shared/input.cva.js";
 import { InputClear } from "../../shared/InputClear.js";
 import { clsx } from "clsx";
 import { isValidElement } from "react";
-import { c } from "react/compiler-runtime";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/inputs/Input/shared/InputContent.tsx
-var InputContent = (t0) => {
-	const $ = c(66);
-	const { leadingIcon: LeadingIcon, trailingIcon: TrailingIcon, unit, isLoading, isDisabled, action, isClearable, isClearableIfDisabled, value, onChange, onBlur, children, headerProps, as, size } = t0;
+const InputContent = ({ leadingIcon: LeadingIcon, trailingIcon: TrailingIcon, unit, isLoading, isDisabled, action, isClearable, isClearableIfDisabled, value, onChange, onBlur, children, headerProps, as, size }) => {
 	const typographyCva = UIOverrides.useCva("typography.cva", typographyDefinition);
 	const inputSizeCva = UIOverrides.useCva("input.sizeCva", inputSizeDefinition);
 	const inputContentWrapperCva = UIOverrides.useCva("input.contentWrapperCva", inputContentWrapperDefinition);
-	let t1;
-	if ($[0] !== LeadingIcon) {
-		t1 = LeadingIcon && isValidElement(LeadingIcon);
-		$[0] = LeadingIcon;
-		$[1] = t1;
-	} else t1 = $[1];
-	const isLeadingIconElement = t1;
-	let t2;
-	if ($[2] !== TrailingIcon) {
-		t2 = TrailingIcon && isValidElement(TrailingIcon);
-		$[2] = TrailingIcon;
-		$[3] = t2;
-	} else t2 = $[3];
-	const isTrailingIconElement = t2;
+	const isLeadingIconElement = LeadingIcon && isValidElement(LeadingIcon);
+	const isTrailingIconElement = TrailingIcon && isValidElement(TrailingIcon);
 	const showClear = value != null && value !== "" && (!isDisabled || isClearableIfDisabled === true);
-	const t3 = as === "inline" && "h-full";
-	let t4;
-	if ($[4] !== as || $[5] !== inputSizeCva || $[6] !== size || $[7] !== t3) {
-		t4 = clsx("group/input-content flex w-full items-center gap-input-gap-input-text-to-elements pr-0!", t3, inputSizeCva({
-			size,
-			as
-		}));
-		$[4] = as;
-		$[5] = inputSizeCva;
-		$[6] = size;
-		$[7] = t3;
-		$[8] = t4;
-	} else t4 = $[8];
-	let t5;
-	if ($[9] !== LeadingIcon || $[10] !== isLeadingIconElement) {
-		t5 = LeadingIcon && /* @__PURE__ */ jsx("div", {
-			className: clsx(!isLeadingIconElement && "pointer-events-none"),
-			children: isLeadingIconElement ? LeadingIcon : /* @__PURE__ */ jsx(LeadingIcon, { className: "size-6 text-interactive-text-secondary-idle" })
-		});
-		$[9] = LeadingIcon;
-		$[10] = isLeadingIconElement;
-		$[11] = t5;
-	} else t5 = $[11];
-	let t6;
-	if ($[12] !== as || $[13] !== inputContentWrapperCva) {
-		t6 = inputContentWrapperCva({ as });
-		$[12] = as;
-		$[13] = inputContentWrapperCva;
-		$[14] = t6;
-	} else t6 = $[14];
-	let t7;
-	if ($[15] !== as || $[16] !== headerProps || $[17] !== size) {
-		t7 = as && ["filter", "floating"].includes(as) && headerProps && /* @__PURE__ */ jsx(FormFieldLabel, {
-			as,
-			size,
-			...headerProps
-		});
-		$[15] = as;
-		$[16] = headerProps;
-		$[17] = size;
-		$[18] = t7;
-	} else t7 = $[18];
-	let t8;
-	if ($[19] !== children || $[20] !== t6 || $[21] !== t7) {
-		t8 = /* @__PURE__ */ jsxs("div", {
-			className: t6,
-			children: [t7, children]
-		});
-		$[19] = children;
-		$[20] = t6;
-		$[21] = t7;
-		$[22] = t8;
-	} else t8 = $[22];
-	let t9;
-	if ($[23] !== t4 || $[24] !== t5 || $[25] !== t8) {
-		t9 = /* @__PURE__ */ jsxs("div", {
-			className: t4,
-			children: [t5, t8]
-		});
-		$[23] = t4;
-		$[24] = t5;
-		$[25] = t8;
-		$[26] = t9;
-	} else t9 = $[26];
-	let t10;
-	if ($[27] !== action || $[28] !== as || $[29] !== inputSizeCva || $[30] !== isClearable || $[31] !== isTrailingIconElement || $[32] !== showClear || $[33] !== size) {
-		t10 = clsx("flex items-center gap-input-gap-trailing-elements py-0! pl-0!", inputSizeCva({
-			size,
-			as
-		}), !isTrailingIconElement && !action && !(isClearable && showClear) && "pointer-events-none");
-		$[27] = action;
-		$[28] = as;
-		$[29] = inputSizeCva;
-		$[30] = isClearable;
-		$[31] = isTrailingIconElement;
-		$[32] = showClear;
-		$[33] = size;
-		$[34] = t10;
-	} else t10 = $[34];
-	let t11;
-	if ($[35] !== isClearable || $[36] !== isClearableIfDisabled || $[37] !== isDisabled || $[38] !== onBlur || $[39] !== onChange || $[40] !== showClear) {
-		t11 = isClearable && (!isDisabled || isClearableIfDisabled === true) && /* @__PURE__ */ jsx(InputClear, {
-			onClear: () => {
-				onChange?.("");
-				onBlur?.({ target: { value: "" } });
-			},
-			show: showClear
-		});
-		$[35] = isClearable;
-		$[36] = isClearableIfDisabled;
-		$[37] = isDisabled;
-		$[38] = onBlur;
-		$[39] = onChange;
-		$[40] = showClear;
-		$[41] = t11;
-	} else t11 = $[41];
-	let t12;
-	if ($[42] !== typographyCva || $[43] !== unit) {
-		t12 = unit && /* @__PURE__ */ jsx("span", {
-			className: typographyCva({
-				size: "label-2",
-				sizeMobile: "label-2",
-				variant: "prominent-1",
-				className: "text-text-default-3"
-			}),
-			children: unit
-		});
-		$[42] = typographyCva;
-		$[43] = unit;
-		$[44] = t12;
-	} else t12 = $[44];
-	let t13;
-	if ($[45] !== isLoading) {
-		t13 = isLoading && /* @__PURE__ */ jsx("div", {
-			className: "inline-flex",
-			children: /* @__PURE__ */ jsx(Loader, {})
-		});
-		$[45] = isLoading;
-		$[46] = t13;
-	} else t13 = $[46];
-	let t14;
-	if ($[47] !== action || $[48] !== isDisabled || $[49] !== isLoading) {
-		t14 = !isLoading && action && /* @__PURE__ */ jsx(InlineIconButton, {
-			color: "secondary",
-			icon: action.icon,
-			isDisabled,
-			onPress: action.onClick,
-			excludeFromTabOrder: true,
-			label: action.altText,
-			className: clsx("border-0!", action.className),
-			"data-static-press-action": ""
-		});
-		$[47] = action;
-		$[48] = isDisabled;
-		$[49] = isLoading;
-		$[50] = t14;
-	} else t14 = $[50];
-	let t15;
-	if ($[51] !== TrailingIcon || $[52] !== action || $[53] !== isLoading || $[54] !== isTrailingIconElement) {
-		t15 = !isLoading && !action && TrailingIcon && (isTrailingIconElement ? TrailingIcon : /* @__PURE__ */ jsx(TrailingIcon, { className: "size-6 text-interactive-text-secondary-idle" }));
-		$[51] = TrailingIcon;
-		$[52] = action;
-		$[53] = isLoading;
-		$[54] = isTrailingIconElement;
-		$[55] = t15;
-	} else t15 = $[55];
-	let t16;
-	if ($[56] !== t10 || $[57] !== t11 || $[58] !== t12 || $[59] !== t13 || $[60] !== t14 || $[61] !== t15) {
-		t16 = /* @__PURE__ */ jsxs("div", {
-			className: t10,
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex w-full items-center gap-input-gap-input-text-to-elements",
+		children: [/* @__PURE__ */ jsxs("div", {
+			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
+			})),
+			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: inputContentWrapperCva({ as }),
+				children: [as && ["filter", "floating"].includes(as) && headerProps && /* @__PURE__ */ jsx(FormFieldLabel, {
+					as,
+					size,
+					...headerProps
+				}), children]
+			})]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: clsx("flex items-center gap-input-gap-trailing-elements py-0! pl-0!", inputSizeCva({
+				size,
+				as
+			}), !isTrailingIconElement && !action && !(isClearable && showClear) && "pointer-events-none"),
 			children: [
-				t11,
-				t12,
-				t13,
-				t14,
-				t15
+				isClearable && (!isDisabled || isClearableIfDisabled === true) && /* @__PURE__ */ jsx(InputClear, {
+					onClear: () => {
+						onChange?.("");
+						onBlur?.({ target: { value: "" } });
+					},
+					show: showClear
+				}),
+				unit && /* @__PURE__ */ jsx("span", {
+					className: typographyCva({
+						size: "label-2",
+						sizeMobile: "label-2",
+						variant: "prominent-1",
+						className: "text-text-default-3"
+					}),
+					children: unit
+				}),
+				isLoading && /* @__PURE__ */ jsx("div", {
+					className: "inline-flex",
+					children: /* @__PURE__ */ jsx(Loader, {})
+				}),
+				!isLoading && action && /* @__PURE__ */ jsx(InlineIconButton, {
+					color: "secondary",
+					icon: action.icon,
+					isDisabled,
+					onPress: action.onClick,
+					excludeFromTabOrder: true,
+					label: action.altText,
+					className: clsx("border-0!", action.className),
+					"data-static-press-action": ""
+				}),
+				!isLoading && !action && TrailingIcon && (isTrailingIconElement ? TrailingIcon : /* @__PURE__ */ jsx(TrailingIcon, { className: "size-6 text-interactive-text-secondary-idle" }))
 			]
-		});
-		$[56] = t10;
-		$[57] = t11;
-		$[58] = t12;
-		$[59] = t13;
-		$[60] = t14;
-		$[61] = t15;
-		$[62] = t16;
-	} else t16 = $[62];
-	let t17;
-	if ($[63] !== t16 || $[64] !== t9) {
-		t17 = /* @__PURE__ */ jsxs("div", {
-			className: "flex w-full items-center gap-input-gap-input-text-to-elements",
-			children: [t9, t16]
-		});
-		$[63] = t16;
-		$[64] = t9;
-		$[65] = t17;
-	} else t17 = $[65];
-	return t17;
+		})]
+	});
 };
 //#endregion
 export { InputContent };

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

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

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

@@ -1,26 +1,26 @@
-import { ReactNode } from 'react';
-import { z } from 'zod';
-import { InputComponentProps, InputDefBaseProps } from './InputItem';
-import { AllowedComponentType, DefaultComponentType } from '../../../helpers/dynamicInputs';
-import { FormSubmitErrorHandler, FormSubmitHandler, UIForm } from '../../../hooks/useForm';
+import { FormSubmitErrorHandler, FormSubmitHandler, UIForm } from "../../../hooks/useForm.js";
+import { InputComponentProps, InputDefBaseProps } from "./InputItem.js";
+import { AllowedComponentType, DefaultComponentType } from "../../../helpers/dynamicInputs.js";
+import { ReactNode } from "react";
+import { z } from "zod";
+//#region src/components/inputs/Inputs/Form.d.ts
 type Capitalize<T extends string> = T extends `${infer First}${infer Rest}` ? `${Uppercase<First>}${Rest}` : T;
 type FieldProps<TProps = {}> = {
-    label: string;
-    placeholder?: string;
+  label: string;
+  placeholder?: string;
 } & TProps;
 type FieldComponentProps<TSchema extends z.ZodObject<any>, K extends keyof z.infer<TSchema>, T extends AllowedComponentType<TSchema["shape"][K]> | undefined = undefined> = FieldProps<InputDefBaseProps<InputComponentProps<T extends AllowedComponentType<TSchema["shape"][K]> ? T : DefaultComponentType<TSchema["shape"][K]>>>> & {
-    inputType?: T extends AllowedComponentType<TSchema["shape"][K]> ? T : never;
-};
-type FieldComponents<TSchema extends z.ZodObject<any>> = {
-    [K in keyof Required<z.infer<TSchema>> as Capitalize<K & string>]: <T extends AllowedComponentType<TSchema["shape"][K]> | undefined = undefined>(props: FieldComponentProps<TSchema, K, T>) => ReactNode;
+  inputType?: T extends AllowedComponentType<TSchema["shape"][K]> ? T : never;
 };
+type FieldComponents<TSchema extends z.ZodObject<any>> = { [K in keyof Required<z.infer<TSchema>> as Capitalize<K & string>]: <T extends AllowedComponentType<TSchema["shape"][K]> | undefined = undefined>(props: FieldComponentProps<TSchema, K, T>) => ReactNode; };
 interface FormProps<TSchema extends z.ZodObject<any>, TSchemaType extends Record<string, any> = z.infer<TSchema>> {
-    form: UIForm<TSchemaType>;
-    schema: TSchema;
-    onSubmit: FormSubmitHandler<TSchemaType>;
-    onError?: FormSubmitErrorHandler<TSchemaType>;
-    className?: string;
-    children: (components: FieldComponents<TSchema>) => ReactNode;
+  form: UIForm<TSchemaType>;
+  schema: TSchema;
+  onSubmit: FormSubmitHandler<TSchemaType>;
+  onError?: FormSubmitErrorHandler<TSchemaType>;
+  className?: string;
+  children: (components: FieldComponents<TSchema>) => ReactNode;
 }
-export declare function Form<TSchema extends z.ZodObject<any>>({ form, schema, onSubmit, onError, className, children, }: FormProps<TSchema>): import("react/jsx-runtime").JSX.Element;
-export {};
+declare function Form<TSchema extends z.ZodObject<any>>({ form, schema, onSubmit, onError, className, children }: FormProps<TSchema>): import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { Form };

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

@@ -2,72 +2,44 @@ import { StringUtils } from "../../../utils/string.utils.js";
 import { ZodUtils } from "../../../utils/zod.utils.js";
 import { getDefaultInputComponentType } from "../../../helpers/dynamicInputs.js";
 import { InputItem } from "./InputItem.js";
-import { c } from "react/compiler-runtime";
+import { useMemo } from "react";
 import { jsx } from "react/jsx-runtime";
 import { z } from "zod";
 //#region src/components/inputs/Inputs/Form.tsx
-var createFieldComponent = (field, schemaKeyType, form) => {
+const createFieldComponent = (field, schemaKeyType, form) => {
 	return function FieldComponent({ inputType, label, placeholder, ...inputProps }) {
+		const inputDef = {
+			name: field,
+			type: inputType ?? getDefaultInputComponentType(schemaKeyType),
+			label,
+			placeholder,
+			props: {
+				...ZodUtils.unwrapZodType(schemaKeyType) instanceof z.ZodArray ? { selectionMode: "multiple" } : {},
+				...inputProps
+			}
+		};
 		return /* @__PURE__ */ jsx(InputItem, {
 			form,
-			inputDef: {
-				name: field,
-				type: inputType ?? getDefaultInputComponentType(schemaKeyType),
-				label,
-				placeholder,
-				props: {
-					...ZodUtils.unwrapZodType(schemaKeyType) instanceof z.ZodArray ? { selectionMode: "multiple" } : {},
-					...inputProps
-				}
-			}
+			inputDef
 		});
 	};
 };
-function Form(t0) {
-	const $ = c(14);
-	const { form, schema, onSubmit, onError, className, children } = t0;
-	let fieldComponents;
-	if ($[0] !== form || $[1] !== schema.shape) {
-		fieldComponents = {};
+function Form({ form, schema, onSubmit, onError, className, children }) {
+	const components = useMemo(() => {
+		const fieldComponents = {};
 		const fields = Object.keys(schema.shape);
 		for (const field of fields) {
 			const componentName = StringUtils.capitalize(String(field));
 			const schemaKeyType = schema.shape[field];
 			fieldComponents[componentName] = createFieldComponent(field, schemaKeyType, form);
 		}
-		$[0] = form;
-		$[1] = schema.shape;
-		$[2] = fieldComponents;
-	} else fieldComponents = $[2];
-	const components = fieldComponents;
-	let t1;
-	if ($[3] !== form || $[4] !== onError || $[5] !== onSubmit) {
-		t1 = form.handleSubmit(onSubmit, onError);
-		$[3] = form;
-		$[4] = onError;
-		$[5] = onSubmit;
-		$[6] = t1;
-	} else t1 = $[6];
-	let t2;
-	if ($[7] !== children || $[8] !== components) {
-		t2 = children(components);
-		$[7] = children;
-		$[8] = components;
-		$[9] = t2;
-	} else t2 = $[9];
-	let t3;
-	if ($[10] !== className || $[11] !== t1 || $[12] !== t2) {
-		t3 = /* @__PURE__ */ jsx("form", {
-			onSubmit: t1,
-			className,
-			children: t2
-		});
-		$[10] = className;
-		$[11] = t1;
-		$[12] = t2;
-		$[13] = t3;
-	} else t3 = $[13];
-	return t3;
+		return fieldComponents;
+	}, [schema.shape, form]);
+	return /* @__PURE__ */ jsx("form", {
+		onSubmit: form.handleSubmit(onSubmit, onError),
+		className,
+		children: children(components)
+	});
 }
 //#endregion
 export { Form };