@povio/ui 3.1.0 → 3.2.0

package/dist/components/inputs/FormField/FormFieldHeader.d.ts

@@ -1,5 +1,5 @@
 import { DOMAttributes } from '@react-types/shared';
-import { ReactNode } from 'react';
+import { LabelHTMLAttributes, ReactNode } from 'react';
 export interface FormFieldHeaderProps {
     label: string;
     tooltipText?: string;
@@ -9,6 +9,6 @@ export interface FormFieldHeaderProps {
     isHeaderHidden?: boolean;
     isDisabled?: boolean;
     className?: string;
-    labelProps?: DOMAttributes<HTMLLabelElement>;
+    labelProps?: DOMAttributes<HTMLLabelElement> & LabelHTMLAttributes<HTMLLabelElement>;
 }
 export declare const FormFieldHeader: ({ label, tooltipText, helperText, isRequired, rightContent, isHeaderHidden, isDisabled, className, labelProps, }: FormFieldHeaderProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/inputs/FormField/FormFieldHeader.js

@@ -1,38 +1,97 @@
 import { InfoIcon } from "../../../assets/icons/Info.js";
+import { UIOverrides } from "../../../config/uiOverrides.context.js";
 import { Typography } from "../../text/Typography/Typography.js";
 import { Tooltip as Tooltip$1 } from "../../overlays/Tooltip/Tooltip.js";
 import { FormFieldLabel } from "./FormFieldLabel.js";
+import { formFieldHeaderDefinition } from "./formFieldHeader.cva.js";
+import { c } from "react/compiler-runtime";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { Focusable } from "react-aria-components";
 //#region src/components/inputs/FormField/FormFieldHeader.tsx
-var FormFieldHeader = ({ label, tooltipText, helperText, isRequired, rightContent, isHeaderHidden, isDisabled, className, labelProps }) => {
-	return /* @__PURE__ */ jsxs("div", {
-		className: clsx(isHeaderHidden ? "sr-only" : "mb-1", className),
-		children: [/* @__PURE__ */ jsxs("div", {
+var FormFieldHeader = (t0) => {
+	const $ = c(24);
+	const { label, tooltipText, helperText, isRequired, rightContent, isHeaderHidden, isDisabled, className, labelProps } = t0;
+	const formFieldHeaderCva = UIOverrides.useCva("formField.headerCva", formFieldHeaderDefinition);
+	const t1 = !isHeaderHidden;
+	let t2;
+	if ($[0] !== className || $[1] !== formFieldHeaderCva || $[2] !== t1) {
+		t2 = clsx(formFieldHeaderCva({ visible: t1 }), className);
+		$[0] = className;
+		$[1] = formFieldHeaderCva;
+		$[2] = t1;
+		$[3] = t2;
+	} else t2 = $[3];
+	let t3;
+	if ($[4] !== isDisabled || $[5] !== isRequired || $[6] !== label || $[7] !== labelProps) {
+		t3 = /* @__PURE__ */ jsx(FormFieldLabel, {
+			label,
+			isRequired,
+			isDisabled,
+			labelProps
+		});
+		$[4] = isDisabled;
+		$[5] = isRequired;
+		$[6] = label;
+		$[7] = labelProps;
+		$[8] = t3;
+	} else t3 = $[8];
+	let t4;
+	if ($[9] !== isDisabled || $[10] !== tooltipText) {
+		t4 = tooltipText && /* @__PURE__ */ jsx(Tooltip$1, {
+			text: tooltipText,
+			children: /* @__PURE__ */ jsx(Focusable, { children: /* @__PURE__ */ jsx(InfoIcon, {
+				className: clsx("size-6", isDisabled ? "text-interactive-text-secondary-disabled" : "text-interactive-text-secondary-idle hover:text-interactive-text-secondary-hover"),
+				tabIndex: 0
+			}) })
+		});
+		$[9] = isDisabled;
+		$[10] = tooltipText;
+		$[11] = t4;
+	} else t4 = $[11];
+	let t5;
+	if ($[12] !== t3 || $[13] !== t4) {
+		t5 = /* @__PURE__ */ jsxs("div", {
+			className: "flex items-start gap-1",
+			children: [t3, t4]
+		});
+		$[12] = t3;
+		$[13] = t4;
+		$[14] = t5;
+	} else t5 = $[14];
+	let t6;
+	if ($[15] !== rightContent || $[16] !== t5) {
+		t6 = /* @__PURE__ */ jsxs("div", {
 			className: "flex items-start justify-between",
-			children: [/* @__PURE__ */ jsxs("div", {
-				className: "flex items-start gap-1",
-				children: [/* @__PURE__ */ jsx(FormFieldLabel, {
-					label,
-					isRequired,
-					isDisabled,
-					labelProps
-				}), tooltipText && /* @__PURE__ */ jsx(Tooltip$1, {
-					text: tooltipText,
-					children: /* @__PURE__ */ jsx(Focusable, { children: /* @__PURE__ */ jsx(InfoIcon, {
-						className: clsx("size-6", isDisabled ? "text-interactive-text-secondary-disabled" : "text-interactive-text-secondary-idle hover:text-interactive-text-secondary-hover"),
-						tabIndex: 0
-					}) })
-				})]
-			}), rightContent]
-		}), helperText && /* @__PURE__ */ jsx(Typography, {
+			children: [t5, rightContent]
+		});
+		$[15] = rightContent;
+		$[16] = t5;
+		$[17] = t6;
+	} else t6 = $[17];
+	let t7;
+	if ($[18] !== helperText) {
+		t7 = helperText && /* @__PURE__ */ jsx(Typography, {
 			slot: "description",
 			size: "label-2",
 			className: "text-text-default-2",
 			children: helperText
-		})]
-	});
+		});
+		$[18] = helperText;
+		$[19] = t7;
+	} else t7 = $[19];
+	let t8;
+	if ($[20] !== t2 || $[21] !== t6 || $[22] !== t7) {
+		t8 = /* @__PURE__ */ jsxs("div", {
+			className: t2,
+			children: [t6, t7]
+		});
+		$[20] = t2;
+		$[21] = t6;
+		$[22] = t7;
+		$[23] = t8;
+	} else t8 = $[23];
+	return t8;
 };
 //#endregion
 export { FormFieldHeader };

package/dist/components/inputs/FormField/FormFieldHeaderClose.js

@@ -1,17 +1,41 @@
 import { CloseIcon } from "../../../assets/icons/Close.js";
 import "../../../config/i18n.js";
+import { c } from "react/compiler-runtime";
 import { jsx } from "react/jsx-runtime";
 import { Button } from "react-aria-components";
 import { useTranslation } from "react-i18next";
 //#region src/components/inputs/FormField/FormFieldHeaderClose.tsx
-var FormFieldHeaderClose = ({ onClose }) => {
+var FormFieldHeaderClose = (t0) => {
+	const $ = c(6);
+	const { onClose } = t0;
 	const { t } = useTranslation("ui");
-	return /* @__PURE__ */ jsx(Button, {
-		onPress: onClose,
-		"aria-label": t(($) => $.ui.closeAlt),
-		className: "shrink-0 focus-visible:outline-interactive-text-secondary-focus",
-		children: /* @__PURE__ */ jsx(CloseIcon, { className: "size-6 text-interactive-text-secondary-idle" })
-	});
+	let t1;
+	if ($[0] !== t) {
+		t1 = t(_temp);
+		$[0] = t;
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = /* @__PURE__ */ jsx(CloseIcon, { className: "size-6 text-interactive-text-secondary-idle" });
+		$[2] = t2;
+	} else t2 = $[2];
+	let t3;
+	if ($[3] !== onClose || $[4] !== t1) {
+		t3 = /* @__PURE__ */ jsx(Button, {
+			onPress: onClose,
+			"aria-label": t1,
+			className: "shrink-0 focus-visible:outline-interactive-text-secondary-focus",
+			children: t2
+		});
+		$[3] = onClose;
+		$[4] = t1;
+		$[5] = t3;
+	} else t3 = $[5];
+	return t3;
 };
+function _temp($) {
+	return $.ui.closeAlt;
+}
 //#endregion
 export { FormFieldHeaderClose };

package/dist/components/inputs/FormField/FormFieldHelper.js

@@ -1,14 +1,34 @@
 import { UIOverrides } from "../../../config/uiOverrides.context.js";
 import { formFieldHelperDefinition } from "./formFieldHelper.cva.js";
+import { c } from "react/compiler-runtime";
 import { jsx } from "react/jsx-runtime";
 import { clsx } from "clsx";
 //#region src/components/inputs/FormField/FormFieldHelper.tsx
-var FormFieldHelper = ({ helperText, isDisabled, isHidden, hasError, className }) => {
-	return /* @__PURE__ */ jsx("p", {
-		className: clsx(UIOverrides.useCva("formField.helperLabelCva", formFieldHelperDefinition)({ visible: !!helperText && !isDisabled && !isHidden && !hasError }), className),
-		slot: "description",
-		children: helperText
-	});
+var FormFieldHelper = (t0) => {
+	const $ = c(7);
+	const { helperText, isDisabled, isHidden, hasError, className } = t0;
+	const formFieldHelperCva = UIOverrides.useCva("formField.helperLabelCva", formFieldHelperDefinition);
+	const visible = !!helperText && !isDisabled && !isHidden && !hasError;
+	let t1;
+	if ($[0] !== className || $[1] !== formFieldHelperCva || $[2] !== visible) {
+		t1 = clsx(formFieldHelperCva({ visible }), className);
+		$[0] = className;
+		$[1] = formFieldHelperCva;
+		$[2] = visible;
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] !== helperText || $[5] !== t1) {
+		t2 = /* @__PURE__ */ jsx("p", {
+			className: t1,
+			slot: "description",
+			children: helperText
+		});
+		$[4] = helperText;
+		$[5] = t1;
+		$[6] = t2;
+	} else t2 = $[6];
+	return t2;
 };
 //#endregion
 export { FormFieldHelper };

package/dist/components/inputs/FormField/FormFieldLabel.d.ts

@@ -1,5 +1,5 @@
 import { DOMAttributes } from '@react-types/shared';
-import { RefCallback } from 'react';
+import { LabelHTMLAttributes, RefCallback } from 'react';
 import { InputSizeProps } from '../shared/input.cva';
 import { LabelBaseProps } from '../shared/label.cva';
 export interface FormFieldLabelProps extends LabelBaseProps, InputSizeProps {
@@ -7,7 +7,7 @@ export interface FormFieldLabelProps extends LabelBaseProps, InputSizeProps {
     isRequired?: boolean;
     isDisabled?: boolean;
     ref?: RefCallback<HTMLOrSVGElement>;
-    labelProps?: DOMAttributes<HTMLLabelElement>;
+    labelProps?: DOMAttributes<HTMLLabelElement> & LabelHTMLAttributes<HTMLLabelElement>;
     className?: string;
 }
 export declare const FormFieldLabel: ({ ref, as, label, isRequired, isDisabled, labelProps, className, }: FormFieldLabelProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/inputs/FormField/FormFieldLabel.js

@@ -1,28 +1,59 @@
 import { UIOverrides } from "../../../config/uiOverrides.context.js";
 import { typographyDefinition } from "../../text/Typography/typography.cva.js";
 import { labelDefinition, labelTypography } from "../shared/label.cva.js";
+import { c } from "react/compiler-runtime";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { Label } from "react-aria-components";
 //#region src/components/inputs/FormField/FormFieldLabel.tsx
-var FormFieldLabel = ({ ref, as, label, isRequired, isDisabled, labelProps, className }) => {
+var FormFieldLabel = (t0) => {
+	const $ = c(16);
+	const { ref, as, label, isRequired, isDisabled, labelProps, className } = t0;
 	const typographyCva = UIOverrides.useCva("typography.cva", typographyDefinition);
 	const labelTypographyMap = UIOverrides.useMapper("label.typography", labelTypography);
 	const labelBaseCva = UIOverrides.useCva("label.cva", labelDefinition);
-	return /* @__PURE__ */ jsxs(Label, {
-		...labelProps,
-		ref,
-		className: clsx(typographyCva({
+	let t1;
+	if ($[0] !== as || $[1] !== className || $[2] !== labelBaseCva || $[3] !== labelProps?.className || $[4] !== labelTypographyMap || $[5] !== typographyCva) {
+		t1 = clsx(typographyCva({
 			size: "label-2",
 			sizeMobile: "label-2",
 			variant: "prominent-1",
 			...labelTypographyMap({ as })
-		}), labelBaseCva({ as }), className, labelProps?.className),
-		children: [label, isRequired && /* @__PURE__ */ jsx("span", {
+		}), labelBaseCva({ as }), className, labelProps?.className);
+		$[0] = as;
+		$[1] = className;
+		$[2] = labelBaseCva;
+		$[3] = labelProps?.className;
+		$[4] = labelTypographyMap;
+		$[5] = typographyCva;
+		$[6] = t1;
+	} else t1 = $[6];
+	let t2;
+	if ($[7] !== isDisabled || $[8] !== isRequired) {
+		t2 = isRequired && /* @__PURE__ */ jsx("span", {
 			className: clsx(!isDisabled && "text-text-error-1"),
 			children: "*"
-		})]
-	});
+		});
+		$[7] = isDisabled;
+		$[8] = isRequired;
+		$[9] = t2;
+	} else t2 = $[9];
+	let t3;
+	if ($[10] !== label || $[11] !== labelProps || $[12] !== ref || $[13] !== t1 || $[14] !== t2) {
+		t3 = /* @__PURE__ */ jsxs(Label, {
+			...labelProps,
+			ref,
+			className: t1,
+			children: [label, t2]
+		});
+		$[10] = label;
+		$[11] = labelProps;
+		$[12] = ref;
+		$[13] = t1;
+		$[14] = t2;
+		$[15] = t3;
+	} else t3 = $[15];
+	return t3;
 };
 //#endregion
 export { FormFieldLabel };

package/dist/components/inputs/FormField/formFieldHeader.cva.d.ts

@@ -0,0 +1,13 @@
+import { UIOverrides } from '../../../config/uiOverrides.context';
+export declare const formFieldHeaderDefinition: {
+    base: string[];
+    config: import("../../../utils/style-merge.util").StyleMergeUtils.Config<{
+        readonly visible: {
+            readonly true: "mb-1";
+            readonly false: "sr-only";
+        };
+    }>;
+};
+export type FormFieldHeaderConfig = NonNullable<typeof formFieldHeaderDefinition.config>;
+export interface FormFieldHeaderVariantProps extends UIOverrides.VariantProps<FormFieldHeaderConfig> {
+}

package/dist/components/inputs/FormField/formFieldHeader.cva.js

@@ -0,0 +1,14 @@
+import { UIOverrides } from "../../../config/uiOverrides.context.js";
+//#region src/components/inputs/FormField/formFieldHeader.cva.ts
+var formFieldHeaderDefinition = UIOverrides.defineConfig({
+	base: [""],
+	config: {
+		variants: { visible: {
+			true: "mb-1",
+			false: "sr-only"
+		} },
+		defaultVariants: { visible: true }
+	}
+});
+//#endregion
+export { formFieldHeaderDefinition };

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

@@ -13,8 +13,11 @@ interface NumberInputBaseProps extends FormFieldProps, InputVariantProps, Omit<I
     value?: number | null;
     onChange?: (value: number | null) => void;
     onBlur?: (e: FocusEvent<HTMLInputElement>) => void;
+    autoFocusOnMount?: boolean;
 }
-export type NumberInputProps = NumberInputBaseProps;
+export type NumberInputProps = NumberInputBaseProps & {
+    renderStaticInput?: boolean;
+};
 export type ControlledNumberInputProps<TFieldValues extends FieldValues> = ControlProps<NumberInputProps, TFieldValues>;
-export declare const NumberInput: <TFieldValues extends FieldValues>(props: ControlledNumberInputProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
+export declare const NumberInput: <TFieldValues extends FieldValues>({ renderStaticInput, ...props }: ControlledNumberInputProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
 export {};