@trackunit/react-form-components 1.3.14 → 1.3.16

package/index.cjs.js

@@ -41,8 +41,9 @@ var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
 var defaultTranslations = {
 	"baseInput.copyAction.toolTip": "Copy value",
 	"clearIndicator.icon.tooltip.clearAll": "Clear all",
-	"colorField.error.INVALID_HEX_CODE": "Please enter a valid HEX code",
+	"colorField.error.INVALID_HEX_CODE": "Please enter a valid color before continuing.",
 	"colorField.error.REQUIRED": "This field is required",
+	"colorField.tooltip": "Select color",
 	"dropzone.input.title": "Drag-and-drop file input",
 	"dropzone.label.default": "<clickable>Browse</clickable> or drag files here...",
 	"emailField.error.INVALID_EMAIL": "Please enter a valid email address",
@@ -150,7 +151,7 @@ const cvaActionContainer = cssClassVarianceUtilities.cvaMerge(["flex", "items-ce
  * @param {ActionButtonProps} props - The props for the ActionButton component
  * @returns {JSX.Element} ActionButton component
  */
-const ActionButton = ({ type, value, dataTestId, size, disabled, className }) => {
+const ActionButton = ({ type, value, dataTestId, size, disabled, className, onClick }) => {
     const [, copyToClipboard] = usehooksTs.useCopyToClipboard();
     const getIconName = () => {
         switch (type) {
@@ -160,6 +161,8 @@ const ActionButton = ({ type, value, dataTestId, size, disabled, className }) =>
                 return "ArrowTopRightOnSquare";
             case "EMAIL":
                 return "Envelope";
+            case "EDIT":
+                return "Pencil";
             case "COPY":
             default:
                 return "ClipboardDocument";
@@ -176,6 +179,8 @@ const ActionButton = ({ type, value, dataTestId, size, disabled, className }) =>
                 return null;
             case "PHONE_NUMBER":
                 return window.open(`tel:${value}`);
+            case "EDIT":
+                return value?.current?.click();
             case "COPY":
                 // Typescript seems to be unable to detect RefObject
                 // as one of the members of the union RefObject | string | null which gives access to the `current` property
@@ -357,14 +362,12 @@ const AddonRenderer = ({ addon, dataTestId, className, fieldSize, position }) =>
     return (jsxRuntime.jsx("div", { className: cvaInputAddon({ size: fieldSize, position, className }), "data-testid": dataTestId ? `${dataTestId}-addon${stringTs.titleCase(position)}` : null, children: addon }));
 };
 
-// Renders generic actions like "copy" if specified
-const GenericActionsRenderer = ({ genericAction, fieldSize, innerRef, }) => {
+const GenericActionsRenderer = ({ genericAction, disabled, fieldSize, innerRef, tooltipLabel, }) => {
     const [t] = useTranslation();
     if (!genericAction) {
         return null;
     }
-    // Currently only supports copy, can extend if more actions are added
-    return (jsxRuntime.jsx(reactComponents.Tooltip, { label: t("baseInput.copyAction.toolTip"), placement: "top", children: jsxRuntime.jsx(ActionButton, { dataTestId: "copy-value-button", size: fieldSize ?? undefined, type: "COPY", value: innerRef }) }));
+    return (jsxRuntime.jsx(reactComponents.Tooltip, { label: tooltipLabel ?? t("baseInput.copyAction.toolTip"), placement: "top", children: jsxRuntime.jsx(ActionButton, { dataTestId: "copy-value-button", disabled: disabled, size: fieldSize ?? undefined, type: genericAction === "edit" ? "EDIT" : "COPY", value: innerRef }) }));
 };
 
 /**
@@ -777,6 +780,32 @@ const validateColorCode = (colorCode, required) => {
     return "INVALID_HEX_CODE";
 };
 
+const cvaInputColorField = cssClassVarianceUtilities.cvaMerge([
+    "ml-3",
+    "h-4",
+    "w-4",
+    "self-center",
+    "bg-inherit",
+    "disabled:opacity-50",
+    "disabled:pointer-events-none",
+    "rounded-[4px]",
+], {
+    variants: {
+        readOnly: {
+            true: "pointer-events-none",
+            false: "",
+        },
+    },
+    compoundVariants: [
+        {
+            readOnly: true,
+        },
+    ],
+    defaultVariants: {
+        readOnly: false,
+    },
+});
+
 /**
  * Validates if the given value is a valid hex color.
  *
@@ -792,7 +821,9 @@ const isValidHEXColor = (value) => {
  * ColorField validates that user enters a valid color address.
  *
  */
-const ColorField = React.forwardRef(({ label, id, tip, helpText, errorMessage, helpAddon, className, defaultValue, dataTestId, value: propValue, onChange, isInvalid = false, onBlur, ...rest }, ref) => {
+const ColorField = React.forwardRef(({ label, id, tip, helpText, errorMessage, helpAddon, className, defaultValue, dataTestId, value: propValue, onChange, isInvalid = false, onBlur, fieldSize = "medium", ...rest }, ref) => {
+    const renderAsDisabled = Boolean(rest.disabled);
+    const renderAsReadonly = Boolean(rest.readOnly);
     const htmlForId = React.useMemo(() => (id ? id : "colorField-" + sharedUtils.uuidv4()), [id]);
     const innerRef = React.useRef(null);
     React.useImperativeHandle(ref, () => innerRef.current, []);
@@ -815,15 +846,16 @@ const ColorField = React.forwardRef(({ label, id, tip, helpText, errorMessage, h
             onChange(event);
         }
     }, [onChange]);
-    return (jsxRuntime.jsx(FormGroup, { dataTestId: dataTestId ? `${dataTestId}-FormGroup` : undefined, helpAddon: helpAddon, helpText: (renderAsInvalid && error) || helpText, htmlFor: htmlForId, isInvalid: renderAsInvalid, label: label, required: rest.required ? !(rest.disabled || rest.readOnly) : false, tip: tip, children: jsxRuntime.jsxs("div", { className: cvaInput({
-                disabled: false,
-                invalid: false,
+    return (jsxRuntime.jsx(FormGroup, { dataTestId: dataTestId ? `${dataTestId}-FormGroup` : undefined, helpAddon: helpAddon, helpText: (renderAsInvalid && error) || helpText, htmlFor: htmlForId, isInvalid: renderAsInvalid, label: label, required: rest.required ? !(renderAsDisabled || renderAsReadonly) : false, tip: tip, children: jsxRuntime.jsxs("div", { className: cvaInput({
+                size: fieldSize,
+                disabled: renderAsDisabled,
+                invalid: renderAsInvalid,
                 className,
-            }), "data-testid": dataTestId ? `${dataTestId}-container` : undefined, children: [jsxRuntime.jsx("input", { "aria-labelledby": htmlForId + "-label", className: "ml-2 h-[30px] w-[40px] self-center rounded-full bg-inherit", "data-testid": dataTestId, defaultValue: defaultValue, id: htmlForId, onBlur: handleBlur, onChange: handleChange, ref: innerRef, type: "color", value: innerValue }), jsxRuntime.jsx("input", { "aria-labelledby": htmlForId + "-label-text", className: cvaInputField({ disabled: false }), "data-testid": dataTestId ? `${dataTestId}-textField` : undefined, onBlur: handleBlur, onChange: handleChange, type: "text", value: innerValue }), jsxRuntime.jsx(reactComponents.IconButton, { className: "mr-1 self-center", icon: jsxRuntime.jsx(reactComponents.Icon, { name: "Pencil", type: "outline" }), onClick: () => {
-                        if (innerRef.current) {
-                            innerRef.current.click();
-                        }
-                    }, variant: "ghost-neutral" })] }) }));
+            }), "data-testid": dataTestId ? `${dataTestId}-container` : undefined, children: [jsxRuntime.jsx("input", { "aria-labelledby": htmlForId + "-label", className: cvaInputColorField({ readOnly: renderAsReadonly }), "data-testid": dataTestId, defaultValue: defaultValue, disabled: renderAsDisabled, id: htmlForId, onBlur: handleBlur, onChange: handleChange, readOnly: renderAsReadonly, ref: innerRef, type: "color", value: innerValue }), jsxRuntime.jsx("input", { "aria-labelledby": htmlForId + "-label-text", className: cvaInputField({
+                        readOnly: renderAsReadonly,
+                        disabled: renderAsDisabled,
+                        className: "px-1 focus-visible:outline-none",
+                    }), "data-testid": dataTestId ? `${dataTestId}-textField` : undefined, disabled: renderAsDisabled, onBlur: handleBlur, onChange: handleChange, readOnly: renderAsReadonly, type: "text", value: innerValue }), jsxRuntime.jsx(GenericActionsRenderer, { disabled: renderAsDisabled || renderAsReadonly, fieldSize: fieldSize, genericAction: "edit", innerRef: innerRef, tooltipLabel: t("colorField.tooltip") })] }) }));
 });
 ColorField.displayName = "ColorField";
 

package/index.esm.js

@@ -22,8 +22,9 @@ import { z } from 'zod';
 var defaultTranslations = {
 	"baseInput.copyAction.toolTip": "Copy value",
 	"clearIndicator.icon.tooltip.clearAll": "Clear all",
-	"colorField.error.INVALID_HEX_CODE": "Please enter a valid HEX code",
+	"colorField.error.INVALID_HEX_CODE": "Please enter a valid color before continuing.",
 	"colorField.error.REQUIRED": "This field is required",
+	"colorField.tooltip": "Select color",
 	"dropzone.input.title": "Drag-and-drop file input",
 	"dropzone.label.default": "<clickable>Browse</clickable> or drag files here...",
 	"emailField.error.INVALID_EMAIL": "Please enter a valid email address",
@@ -131,7 +132,7 @@ const cvaActionContainer = cvaMerge(["flex", "items-center"], {
  * @param {ActionButtonProps} props - The props for the ActionButton component
  * @returns {JSX.Element} ActionButton component
  */
-const ActionButton = ({ type, value, dataTestId, size, disabled, className }) => {
+const ActionButton = ({ type, value, dataTestId, size, disabled, className, onClick }) => {
     const [, copyToClipboard] = useCopyToClipboard();
     const getIconName = () => {
         switch (type) {
@@ -141,6 +142,8 @@ const ActionButton = ({ type, value, dataTestId, size, disabled, className }) =>
                 return "ArrowTopRightOnSquare";
             case "EMAIL":
                 return "Envelope";
+            case "EDIT":
+                return "Pencil";
             case "COPY":
             default:
                 return "ClipboardDocument";
@@ -157,6 +160,8 @@ const ActionButton = ({ type, value, dataTestId, size, disabled, className }) =>
                 return null;
             case "PHONE_NUMBER":
                 return window.open(`tel:${value}`);
+            case "EDIT":
+                return value?.current?.click();
             case "COPY":
                 // Typescript seems to be unable to detect RefObject
                 // as one of the members of the union RefObject | string | null which gives access to the `current` property
@@ -338,14 +343,12 @@ const AddonRenderer = ({ addon, dataTestId, className, fieldSize, position }) =>
     return (jsx("div", { className: cvaInputAddon({ size: fieldSize, position, className }), "data-testid": dataTestId ? `${dataTestId}-addon${titleCase(position)}` : null, children: addon }));
 };
 
-// Renders generic actions like "copy" if specified
-const GenericActionsRenderer = ({ genericAction, fieldSize, innerRef, }) => {
+const GenericActionsRenderer = ({ genericAction, disabled, fieldSize, innerRef, tooltipLabel, }) => {
     const [t] = useTranslation();
     if (!genericAction) {
         return null;
     }
-    // Currently only supports copy, can extend if more actions are added
-    return (jsx(Tooltip, { label: t("baseInput.copyAction.toolTip"), placement: "top", children: jsx(ActionButton, { dataTestId: "copy-value-button", size: fieldSize ?? undefined, type: "COPY", value: innerRef }) }));
+    return (jsx(Tooltip, { label: tooltipLabel ?? t("baseInput.copyAction.toolTip"), placement: "top", children: jsx(ActionButton, { dataTestId: "copy-value-button", disabled: disabled, size: fieldSize ?? undefined, type: genericAction === "edit" ? "EDIT" : "COPY", value: innerRef }) }));
 };
 
 /**
@@ -758,6 +761,32 @@ const validateColorCode = (colorCode, required) => {
     return "INVALID_HEX_CODE";
 };
 
+const cvaInputColorField = cvaMerge([
+    "ml-3",
+    "h-4",
+    "w-4",
+    "self-center",
+    "bg-inherit",
+    "disabled:opacity-50",
+    "disabled:pointer-events-none",
+    "rounded-[4px]",
+], {
+    variants: {
+        readOnly: {
+            true: "pointer-events-none",
+            false: "",
+        },
+    },
+    compoundVariants: [
+        {
+            readOnly: true,
+        },
+    ],
+    defaultVariants: {
+        readOnly: false,
+    },
+});
+
 /**
  * Validates if the given value is a valid hex color.
  *
@@ -773,7 +802,9 @@ const isValidHEXColor = (value) => {
  * ColorField validates that user enters a valid color address.
  *
  */
-const ColorField = forwardRef(({ label, id, tip, helpText, errorMessage, helpAddon, className, defaultValue, dataTestId, value: propValue, onChange, isInvalid = false, onBlur, ...rest }, ref) => {
+const ColorField = forwardRef(({ label, id, tip, helpText, errorMessage, helpAddon, className, defaultValue, dataTestId, value: propValue, onChange, isInvalid = false, onBlur, fieldSize = "medium", ...rest }, ref) => {
+    const renderAsDisabled = Boolean(rest.disabled);
+    const renderAsReadonly = Boolean(rest.readOnly);
     const htmlForId = useMemo(() => (id ? id : "colorField-" + uuidv4()), [id]);
     const innerRef = React__default.useRef(null);
     React__default.useImperativeHandle(ref, () => innerRef.current, []);
@@ -796,15 +827,16 @@ const ColorField = forwardRef(({ label, id, tip, helpText, errorMessage, helpAdd
             onChange(event);
         }
     }, [onChange]);
-    return (jsx(FormGroup, { dataTestId: dataTestId ? `${dataTestId}-FormGroup` : undefined, helpAddon: helpAddon, helpText: (renderAsInvalid && error) || helpText, htmlFor: htmlForId, isInvalid: renderAsInvalid, label: label, required: rest.required ? !(rest.disabled || rest.readOnly) : false, tip: tip, children: jsxs("div", { className: cvaInput({
-                disabled: false,
-                invalid: false,
+    return (jsx(FormGroup, { dataTestId: dataTestId ? `${dataTestId}-FormGroup` : undefined, helpAddon: helpAddon, helpText: (renderAsInvalid && error) || helpText, htmlFor: htmlForId, isInvalid: renderAsInvalid, label: label, required: rest.required ? !(renderAsDisabled || renderAsReadonly) : false, tip: tip, children: jsxs("div", { className: cvaInput({
+                size: fieldSize,
+                disabled: renderAsDisabled,
+                invalid: renderAsInvalid,
                 className,
-            }), "data-testid": dataTestId ? `${dataTestId}-container` : undefined, children: [jsx("input", { "aria-labelledby": htmlForId + "-label", className: "ml-2 h-[30px] w-[40px] self-center rounded-full bg-inherit", "data-testid": dataTestId, defaultValue: defaultValue, id: htmlForId, onBlur: handleBlur, onChange: handleChange, ref: innerRef, type: "color", value: innerValue }), jsx("input", { "aria-labelledby": htmlForId + "-label-text", className: cvaInputField({ disabled: false }), "data-testid": dataTestId ? `${dataTestId}-textField` : undefined, onBlur: handleBlur, onChange: handleChange, type: "text", value: innerValue }), jsx(IconButton, { className: "mr-1 self-center", icon: jsx(Icon, { name: "Pencil", type: "outline" }), onClick: () => {
-                        if (innerRef.current) {
-                            innerRef.current.click();
-                        }
-                    }, variant: "ghost-neutral" })] }) }));
+            }), "data-testid": dataTestId ? `${dataTestId}-container` : undefined, children: [jsx("input", { "aria-labelledby": htmlForId + "-label", className: cvaInputColorField({ readOnly: renderAsReadonly }), "data-testid": dataTestId, defaultValue: defaultValue, disabled: renderAsDisabled, id: htmlForId, onBlur: handleBlur, onChange: handleChange, readOnly: renderAsReadonly, ref: innerRef, type: "color", value: innerValue }), jsx("input", { "aria-labelledby": htmlForId + "-label-text", className: cvaInputField({
+                        readOnly: renderAsReadonly,
+                        disabled: renderAsDisabled,
+                        className: "px-1 focus-visible:outline-none",
+                    }), "data-testid": dataTestId ? `${dataTestId}-textField` : undefined, disabled: renderAsDisabled, onBlur: handleBlur, onChange: handleChange, readOnly: renderAsReadonly, type: "text", value: innerValue }), jsx(GenericActionsRenderer, { disabled: renderAsDisabled || renderAsReadonly, fieldSize: fieldSize, genericAction: "edit", innerRef: innerRef, tooltipLabel: t("colorField.tooltip") })] }) }));
 });
 ColorField.displayName = "ColorField";
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-form-components",
-  "version": "1.3.14",
+  "version": "1.3.16",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -17,12 +17,12 @@
     "zod": "3.22.4",
     "react-hook-form": "7.53.1",
     "tailwind-merge": "^2.0.0",
-    "@trackunit/css-class-variance-utilities": "1.3.13",
-    "@trackunit/react-components": "1.4.13",
-    "@trackunit/ui-icons": "1.3.13",
-    "@trackunit/shared-utils": "1.5.13",
-    "@trackunit/ui-design-tokens": "1.3.13",
-    "@trackunit/i18n-library-translation": "1.3.14",
+    "@trackunit/css-class-variance-utilities": "1.3.14",
+    "@trackunit/react-components": "1.4.14",
+    "@trackunit/ui-icons": "1.3.14",
+    "@trackunit/shared-utils": "1.5.14",
+    "@trackunit/ui-design-tokens": "1.3.14",
+    "@trackunit/i18n-library-translation": "1.3.15",
     "string-ts": "^2.0.0"
   },
   "module": "./index.esm.js",

package/src/components/ActionButton/ActionButton.d.ts

@@ -1,5 +1,5 @@
 import { ButtonCommonProps, CommonProps } from "@trackunit/react-components";
-type ActionType = "PHONE_NUMBER" | "WEB_ADDRESS" | "EMAIL" | "COPY";
+export type ActionType = "PHONE_NUMBER" | "WEB_ADDRESS" | "EMAIL" | "COPY" | "EDIT";
 interface AbstractActionButtonProps extends ButtonCommonProps, CommonProps {
     /**
      * The type of action performed when clicking the button.
@@ -30,12 +30,22 @@ interface CopyActionButtonProps extends AbstractActionButtonProps {
      */
     value?: React.RefObject<HTMLInputElement>;
 }
-type ActionButtonProps = CopyActionButtonProps | GenericActionButtonProps;
+interface EditActionButtonProps extends AbstractActionButtonProps {
+    /**
+     * The type of action performed when clicking the button.
+     */
+    type: "EDIT";
+    /**
+     * The value to be passed into the button.
+     */
+    value?: React.RefObject<HTMLInputElement>;
+}
+type ActionButtonProps = CopyActionButtonProps | GenericActionButtonProps | EditActionButtonProps;
 /**
  * The ActionButton component is a wrapper over IconButton to perform an action when the onClick event is triggered.
  *
  * @param {ActionButtonProps} props - The props for the ActionButton component
  * @returns {JSX.Element} ActionButton component
  */
-export declare const ActionButton: ({ type, value, dataTestId, size, disabled, className }: ActionButtonProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ActionButton: ({ type, value, dataTestId, size, disabled, className, onClick }: ActionButtonProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/src/components/BaseInput/components/GenericActionsRenderer.d.ts

@@ -1,8 +1,12 @@
 import { RefObject } from "react";
 import { FormComponentSizes } from "../../../types";
-export type BaseInputActionTypes = "copy";
-export declare const GenericActionsRenderer: ({ genericAction, fieldSize, innerRef, }: {
+export type BaseInputActionTypes = "copy" | "edit";
+type GenericActionsRendererProps = {
     genericAction?: BaseInputActionTypes;
+    disabled?: boolean;
     fieldSize?: FormComponentSizes;
     innerRef: RefObject<HTMLInputElement>;
-}) => import("react/jsx-runtime").JSX.Element | null;
+    tooltipLabel?: string;
+};
+export declare const GenericActionsRenderer: ({ genericAction, disabled, fieldSize, innerRef, tooltipLabel, }: GenericActionsRendererProps) => import("react/jsx-runtime").JSX.Element | null;
+export {};

package/src/components/ColorField/ColorField.variants.d.ts

@@ -0,0 +1,3 @@
+export declare const cvaInputColorField: (props?: ({
+    readOnly?: boolean | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;

package/src/translation.d.ts

@@ -14,8 +14,8 @@ export declare const translations: TranslationResource<TranslationKeys>;
 /**
  *  Local useTranslation for this specific library
  */
-export declare const useTranslation: () => [TransForLibs<"baseInput.copyAction.toolTip" | "clearIndicator.icon.tooltip.clearAll" | "colorField.error.INVALID_HEX_CODE" | "colorField.error.REQUIRED" | "dropzone.input.title" | "dropzone.label.default" | "emailField.error.INVALID_EMAIL" | "emailField.error.REQUIRED" | "field.notEditable.tooltip" | "field.required.asterisk.tooltip" | "numberField.error.GREATER_THAN" | "numberField.error.INVALID_NUMBER" | "numberField.error.LESS_THAN" | "numberField.error.NOT_IN_BETWEEN" | "numberField.error.REQUIRED" | "phoneField.error.INVALID_COUNTRY" | "phoneField.error.INVALID_LENGTH" | "phoneField.error.INVALID_NUMBER" | "phoneField.error.NOT_A_NUMBER" | "phoneField.error.REQUIRED" | "phoneField.error.REQUIRED_COUNTRY" | "phoneField.error.TOO_LONG" | "phoneField.error.TOO_SHORT" | "phoneField.error.undefined" | "schedule.label.active" | "schedule.label.allDay" | "schedule.label.day" | "urlField.error.INVALID_URL" | "urlField.error.REQUIRED">, import("i18next").i18n, boolean] & {
-    t: TransForLibs<"baseInput.copyAction.toolTip" | "clearIndicator.icon.tooltip.clearAll" | "colorField.error.INVALID_HEX_CODE" | "colorField.error.REQUIRED" | "dropzone.input.title" | "dropzone.label.default" | "emailField.error.INVALID_EMAIL" | "emailField.error.REQUIRED" | "field.notEditable.tooltip" | "field.required.asterisk.tooltip" | "numberField.error.GREATER_THAN" | "numberField.error.INVALID_NUMBER" | "numberField.error.LESS_THAN" | "numberField.error.NOT_IN_BETWEEN" | "numberField.error.REQUIRED" | "phoneField.error.INVALID_COUNTRY" | "phoneField.error.INVALID_LENGTH" | "phoneField.error.INVALID_NUMBER" | "phoneField.error.NOT_A_NUMBER" | "phoneField.error.REQUIRED" | "phoneField.error.REQUIRED_COUNTRY" | "phoneField.error.TOO_LONG" | "phoneField.error.TOO_SHORT" | "phoneField.error.undefined" | "schedule.label.active" | "schedule.label.allDay" | "schedule.label.day" | "urlField.error.INVALID_URL" | "urlField.error.REQUIRED">;
+export declare const useTranslation: () => [TransForLibs<"baseInput.copyAction.toolTip" | "clearIndicator.icon.tooltip.clearAll" | "colorField.error.INVALID_HEX_CODE" | "colorField.error.REQUIRED" | "colorField.tooltip" | "dropzone.input.title" | "dropzone.label.default" | "emailField.error.INVALID_EMAIL" | "emailField.error.REQUIRED" | "field.notEditable.tooltip" | "field.required.asterisk.tooltip" | "numberField.error.GREATER_THAN" | "numberField.error.INVALID_NUMBER" | "numberField.error.LESS_THAN" | "numberField.error.NOT_IN_BETWEEN" | "numberField.error.REQUIRED" | "phoneField.error.INVALID_COUNTRY" | "phoneField.error.INVALID_LENGTH" | "phoneField.error.INVALID_NUMBER" | "phoneField.error.NOT_A_NUMBER" | "phoneField.error.REQUIRED" | "phoneField.error.REQUIRED_COUNTRY" | "phoneField.error.TOO_LONG" | "phoneField.error.TOO_SHORT" | "phoneField.error.undefined" | "schedule.label.active" | "schedule.label.allDay" | "schedule.label.day" | "urlField.error.INVALID_URL" | "urlField.error.REQUIRED">, import("i18next").i18n, boolean] & {
+    t: TransForLibs<"baseInput.copyAction.toolTip" | "clearIndicator.icon.tooltip.clearAll" | "colorField.error.INVALID_HEX_CODE" | "colorField.error.REQUIRED" | "colorField.tooltip" | "dropzone.input.title" | "dropzone.label.default" | "emailField.error.INVALID_EMAIL" | "emailField.error.REQUIRED" | "field.notEditable.tooltip" | "field.required.asterisk.tooltip" | "numberField.error.GREATER_THAN" | "numberField.error.INVALID_NUMBER" | "numberField.error.LESS_THAN" | "numberField.error.NOT_IN_BETWEEN" | "numberField.error.REQUIRED" | "phoneField.error.INVALID_COUNTRY" | "phoneField.error.INVALID_LENGTH" | "phoneField.error.INVALID_NUMBER" | "phoneField.error.NOT_A_NUMBER" | "phoneField.error.REQUIRED" | "phoneField.error.REQUIRED_COUNTRY" | "phoneField.error.TOO_LONG" | "phoneField.error.TOO_SHORT" | "phoneField.error.undefined" | "schedule.label.active" | "schedule.label.allDay" | "schedule.label.day" | "urlField.error.INVALID_URL" | "urlField.error.REQUIRED">;
     i18n: import("i18next").i18n;
     ready: boolean;
 };