@trackunit/react-form-components 1.14.51 → 1.14.54

package/index.cjs.js

@@ -319,7 +319,7 @@ const cvaActionContainer = cssClassVarianceUtilities.cvaMerge(["flex", "items-ce
  * @param {ActionButtonProps} props - The props for the ActionButton component
  * @returns {ReactElement} ActionButton component
  */
-const ActionButton = ({ type, value, "data-testid": dataTestId, size, disabled, className, onClick, }) => {
+const ActionButton = ({ type, value, "data-testid": dataTestId, size, disabled, className, onClick, ref, }) => {
     const [, copyToClipboard] = usehooksTs.useCopyToClipboard();
     const getIconName = () => {
         switch (type) {
@@ -358,7 +358,7 @@ const ActionButton = ({ type, value, "data-testid": dataTestId, size, disabled,
         }
     };
     const adjustedIconSize = size === "large" ? "medium" : size;
-    return (jsxRuntime.jsx("div", { className: cvaActionContainer({ className, size }), children: jsxRuntime.jsx(reactComponents.IconButton, { className: cvaActionButton({ size: adjustedIconSize }), "data-testid": dataTestId || "testIconButtonId", disabled: disabled, icon: jsxRuntime.jsx(reactComponents.Icon, { name: getIconName(), size: adjustedIconSize }), onClick: buttonAction, size: "small", variant: "ghost-neutral" }) }));
+    return (jsxRuntime.jsx("div", { className: cvaActionContainer({ className, size }), ref: ref, children: jsxRuntime.jsx(reactComponents.IconButton, { className: cvaActionButton({ size: adjustedIconSize }), "data-testid": dataTestId || "testIconButtonId", disabled: disabled, icon: jsxRuntime.jsx(reactComponents.Icon, { name: getIconName(), size: adjustedIconSize }), onClick: buttonAction, size: "small", variant: "ghost-neutral" }) }));
 };
 
 const GenericActionsRenderer = ({ genericAction, disabled, fieldSize, innerRef, tooltipLabel, }) => {
@@ -396,8 +396,10 @@ const LockReasonRenderer = ({ lockReason, "data-testid": dataTestId, }) => {
     return (jsxRuntime.jsx("div", { className: cvaInputSuffix({ disabled: false }), "data-testid": dataTestId ? `${dataTestId}-locked` : undefined, children: jsxRuntime.jsx(InputLockReasonTooltip, { ...lockReason }) }));
 };
 
-// Renders the prefix element or falls back to a default prefix for certain types
-const PrefixRenderer = react.forwardRef(({ prefix, type, "data-testid": dataTestId, disabled }, ref) => {
+/**
+ * Renders the prefix element or falls back to a default prefix for certain types.
+ */
+const PrefixRenderer = ({ prefix, type, "data-testid": dataTestId, disabled, ref }) => {
     // Default icons for specific input types
     const defaultPrefixMap = {
         email: jsxRuntime.jsx(reactComponents.Icon, { name: "AtSymbol", size: "small" }),
@@ -410,7 +412,7 @@ const PrefixRenderer = react.forwardRef(({ prefix, type, "data-testid": dataTest
         return null;
     }
     return (jsxRuntime.jsx("div", { className: cvaInputPrefix({ disabled }), "data-testid": dataTestId ? `${dataTestId}-prefix` : null, ref: ref, children: resolvedPrefix }));
-});
+};
 
 // Renders the suffix element or shows an icon if invalid/warning
 const SuffixRenderer = ({ suffix, isInvalid, isWarning, "data-testid": dataTestId, disabled, }) => {
@@ -2230,12 +2232,12 @@ const isValidHEXColor = (value) => {
  * />
  * ```
  */
-const ColorField = react.forwardRef(({ label, id, tip, helpText, errorMessage, helpAddon, className, defaultValue, "data-testid": dataTestId, value: propValue, onChange, isInvalid, onBlur, fieldSize = "medium", style, disabled, readOnly, isWarning, inputClassName, ...inputProps }, ref) => {
+const ColorField = ({ label, id, tip, helpText, errorMessage, helpAddon, className, defaultValue, "data-testid": dataTestId, value: propValue, onChange, isInvalid, onBlur, fieldSize = "medium", style, disabled, readOnly, isWarning, inputClassName, ref, ...inputProps }) => {
     const renderAsDisabled = Boolean(disabled);
     const renderAsReadonly = Boolean(readOnly);
     const htmlForId = react.useMemo(() => (id ? id : "colorField-" + sharedUtils.uuidv4()), [id]);
     const innerRef = react.useRef(null);
-    react.useImperativeHandle(ref, () => innerRef.current, []);
+    const mergedRef = reactComponents.useMergeRefs([ref, innerRef]);
     const [t] = useTranslation();
     // Internal state for color value
     const [innerValue, setInnerValue] = react.useState(propValue ?? defaultValue ?? "");
@@ -2280,10 +2282,10 @@ const ColorField = react.forwardRef(({ label, id, tip, helpText, errorMessage, h
                 readOnly: renderAsReadonly,
                 isWarning,
                 className,
-            }), "data-testid": dataTestId ? `${dataTestId}-container` : undefined, style: style, children: [jsxRuntime.jsx("input", { "aria-labelledby": htmlForId + "-label", className: cvaInputColorField({ readOnly: renderAsReadonly }), "data-testid": dataTestId, defaultValue: defaultValue, disabled: renderAsDisabled, id: htmlForId, onBlur: handleBlur, onChange: handleInputChange, readOnly: renderAsReadonly, ref: innerRef, type: "color", value: innerValue }), jsxRuntime.jsx("input", { "aria-labelledby": htmlForId + "-label-text", className: cvaInputElement({
+            }), "data-testid": dataTestId ? `${dataTestId}-container` : undefined, style: style, children: [jsxRuntime.jsx("input", { "aria-labelledby": htmlForId + "-label", className: cvaInputColorField({ readOnly: renderAsReadonly }), "data-testid": dataTestId, defaultValue: defaultValue, disabled: renderAsDisabled, id: htmlForId, onBlur: handleBlur, onChange: handleInputChange, readOnly: renderAsReadonly, ref: mergedRef, type: "color", value: innerValue }), jsxRuntime.jsx("input", { "aria-labelledby": htmlForId + "-label-text", className: cvaInputElement({
                         className: tailwindMerge.twMerge("focus-visible:outline-hidden px-1", inputClassName),
                     }), "data-testid": dataTestId ? `${dataTestId}-textField` : undefined, disabled: renderAsDisabled, onBlur: handleBlur, onChange: handleInputChange, readOnly: renderAsReadonly, type: "text", value: innerValue, ...inputProps }), jsxRuntime.jsx(GenericActionsRenderer, { disabled: renderAsDisabled || renderAsReadonly, fieldSize: fieldSize, genericAction: "edit", innerRef: innerRef, tooltipLabel: t("colorField.tooltip") })] }) }));
-});
+};
 ColorField.displayName = "ColorField";
 
 /**
@@ -4245,9 +4247,9 @@ const cvaToggleSwitchThumb = cssClassVarianceUtilities.cvaMerge(["block", "round
  * @param {ToggleSwitchProps} props - The props for the ToggleSwitch component
  * @returns {ReactElement} ToggleSwitch component
  */
-const ToggleSwitch = react.forwardRef(({ onChange, onClick, preventDefaultOnClick, className, "data-testid": dataTestId = "toggle-switch", showInputFocus, toggled, size = "medium", tabIndex = 0, readOnly, disabled, ...rest }, ref) => {
+const ToggleSwitch = ({ onChange, onClick, preventDefaultOnClick, className, "data-testid": dataTestId = "toggle-switch", showInputFocus, toggled, size = "medium", tabIndex = 0, readOnly, disabled, ref, ...rest }) => {
     const localInputRef = react.useRef(null);
-    const inputRef = typeof ref === "function" ? localInputRef : ref || localInputRef;
+    const mergedRef = reactComponents.useMergeRefs([ref, localInputRef]);
     // Extract data attributes to apply to wrapper
     const dataAttributes = react.useMemo(() => Object.keys(rest).reduce((acc, key) => {
         if (key.startsWith("data-")) {
@@ -4260,7 +4262,7 @@ const ToggleSwitch = react.forwardRef(({ onChange, onClick, preventDefaultOnClic
         // Prevents double-toggling when wrapped in a label or if preventDefaultOnClick is true
         const isFromLabel = e.target instanceof Element && e.target.closest("label");
         if (!isFromLabel && !preventDefaultOnClick && !disabled && !readOnly) {
-            inputRef.current?.click();
+            localInputRef.current?.click();
         }
         onClick?.(e);
     };
@@ -4268,7 +4270,7 @@ const ToggleSwitch = react.forwardRef(({ onChange, onClick, preventDefaultOnClic
         if (e.code === "Enter") {
             e.preventDefault();
             if (!readOnly) {
-                inputRef.current?.click();
+                localInputRef.current?.click();
             }
         }
         // Space key is already supported natively by the input element
@@ -4285,8 +4287,8 @@ const ToggleSwitch = react.forwardRef(({ onChange, onClick, preventDefaultOnClic
                 disabled: disabled || readOnly,
                 size,
                 focused: showInputFocus,
-            }), "data-testid": `${dataTestId}-track`, children: [jsxRuntime.jsx("span", { className: cvaToggleSwitchThumb({ toggled, size }), "data-testid": `${dataTestId}-thumb` }), jsxRuntime.jsx("input", { "aria-disabled": disabled || readOnly, checked: toggled, className: cvaToggleSwitchInput(), "data-testid": `${dataTestId}-input`, disabled: disabled, onChange: handleInputChange, onClick: e => e.stopPropagation(), ref: inputRef, role: "switch", tabIndex: tabIndex, type: "checkbox", ...rest })] }) }));
-});
+            }), "data-testid": `${dataTestId}-track`, children: [jsxRuntime.jsx("span", { className: cvaToggleSwitchThumb({ toggled, size }), "data-testid": `${dataTestId}-thumb` }), jsxRuntime.jsx("input", { "aria-disabled": disabled || readOnly, checked: toggled, className: cvaToggleSwitchInput(), "data-testid": `${dataTestId}-input`, disabled: disabled, onChange: handleInputChange, onClick: e => e.stopPropagation(), ref: mergedRef, role: "switch", tabIndex: tabIndex, type: "checkbox", ...rest })] }) }));
+};
 ToggleSwitch.displayName = "ToggleSwitch";
 
 /**

package/index.esm.js

@@ -1,9 +1,9 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { useNamespaceTranslation, registerTranslations, NamespaceTrans } from '@trackunit/i18n-library-translation';
+import { registerTranslations, useNamespaceTranslation, NamespaceTrans } from '@trackunit/i18n-library-translation';
 import { Temporal } from '@js-temporal/polyfill';
 import { IconButton, Icon, Tooltip, cvaMenu, cvaMenuList, Tag, useIsTextTruncated, ZStack, MenuItem, useMeasure, useDebounce, useMergeRefs, Spinner, useScrollBlock, Text, Heading, useIsFirstRender } from '@trackunit/react-components';
 import { themeSpacing } from '@trackunit/ui-design-tokens';
-import { forwardRef, useRef, useEffect, useImperativeHandle, useCallback, useState, cloneElement, isValidElement, useLayoutEffect, useReducer, useMemo, createContext, useContext, useId } from 'react';
+import { useRef, useEffect, useImperativeHandle, useCallback, useState, cloneElement, isValidElement, useLayoutEffect, useReducer, useMemo, createContext, useContext, useId } from 'react';
 import { cvaMerge } from '@trackunit/css-class-variance-utilities';
 import { titleCase } from 'string-ts';
 import { useCopyToClipboard } from 'usehooks-ts';
@@ -318,7 +318,7 @@ const cvaActionContainer = cvaMerge(["flex", "items-center"], {
  * @param {ActionButtonProps} props - The props for the ActionButton component
  * @returns {ReactElement} ActionButton component
  */
-const ActionButton = ({ type, value, "data-testid": dataTestId, size, disabled, className, onClick, }) => {
+const ActionButton = ({ type, value, "data-testid": dataTestId, size, disabled, className, onClick, ref, }) => {
     const [, copyToClipboard] = useCopyToClipboard();
     const getIconName = () => {
         switch (type) {
@@ -357,7 +357,7 @@ const ActionButton = ({ type, value, "data-testid": dataTestId, size, disabled,
         }
     };
     const adjustedIconSize = size === "large" ? "medium" : size;
-    return (jsx("div", { className: cvaActionContainer({ className, size }), children: jsx(IconButton, { className: cvaActionButton({ size: adjustedIconSize }), "data-testid": dataTestId || "testIconButtonId", disabled: disabled, icon: jsx(Icon, { name: getIconName(), size: adjustedIconSize }), onClick: buttonAction, size: "small", variant: "ghost-neutral" }) }));
+    return (jsx("div", { className: cvaActionContainer({ className, size }), ref: ref, children: jsx(IconButton, { className: cvaActionButton({ size: adjustedIconSize }), "data-testid": dataTestId || "testIconButtonId", disabled: disabled, icon: jsx(Icon, { name: getIconName(), size: adjustedIconSize }), onClick: buttonAction, size: "small", variant: "ghost-neutral" }) }));
 };
 
 const GenericActionsRenderer = ({ genericAction, disabled, fieldSize, innerRef, tooltipLabel, }) => {
@@ -395,8 +395,10 @@ const LockReasonRenderer = ({ lockReason, "data-testid": dataTestId, }) => {
     return (jsx("div", { className: cvaInputSuffix({ disabled: false }), "data-testid": dataTestId ? `${dataTestId}-locked` : undefined, children: jsx(InputLockReasonTooltip, { ...lockReason }) }));
 };
 
-// Renders the prefix element or falls back to a default prefix for certain types
-const PrefixRenderer = forwardRef(({ prefix, type, "data-testid": dataTestId, disabled }, ref) => {
+/**
+ * Renders the prefix element or falls back to a default prefix for certain types.
+ */
+const PrefixRenderer = ({ prefix, type, "data-testid": dataTestId, disabled, ref }) => {
     // Default icons for specific input types
     const defaultPrefixMap = {
         email: jsx(Icon, { name: "AtSymbol", size: "small" }),
@@ -409,7 +411,7 @@ const PrefixRenderer = forwardRef(({ prefix, type, "data-testid": dataTestId, di
         return null;
     }
     return (jsx("div", { className: cvaInputPrefix({ disabled }), "data-testid": dataTestId ? `${dataTestId}-prefix` : null, ref: ref, children: resolvedPrefix }));
-});
+};
 
 // Renders the suffix element or shows an icon if invalid/warning
 const SuffixRenderer = ({ suffix, isInvalid, isWarning, "data-testid": dataTestId, disabled, }) => {
@@ -2229,12 +2231,12 @@ const isValidHEXColor = (value) => {
  * />
  * ```
  */
-const ColorField = forwardRef(({ label, id, tip, helpText, errorMessage, helpAddon, className, defaultValue, "data-testid": dataTestId, value: propValue, onChange, isInvalid, onBlur, fieldSize = "medium", style, disabled, readOnly, isWarning, inputClassName, ...inputProps }, ref) => {
+const ColorField = ({ label, id, tip, helpText, errorMessage, helpAddon, className, defaultValue, "data-testid": dataTestId, value: propValue, onChange, isInvalid, onBlur, fieldSize = "medium", style, disabled, readOnly, isWarning, inputClassName, ref, ...inputProps }) => {
     const renderAsDisabled = Boolean(disabled);
     const renderAsReadonly = Boolean(readOnly);
     const htmlForId = useMemo(() => (id ? id : "colorField-" + uuidv4()), [id]);
     const innerRef = useRef(null);
-    useImperativeHandle(ref, () => innerRef.current, []);
+    const mergedRef = useMergeRefs([ref, innerRef]);
     const [t] = useTranslation();
     // Internal state for color value
     const [innerValue, setInnerValue] = useState(propValue ?? defaultValue ?? "");
@@ -2279,10 +2281,10 @@ const ColorField = forwardRef(({ label, id, tip, helpText, errorMessage, helpAdd
                 readOnly: renderAsReadonly,
                 isWarning,
                 className,
-            }), "data-testid": dataTestId ? `${dataTestId}-container` : undefined, style: style, children: [jsx("input", { "aria-labelledby": htmlForId + "-label", className: cvaInputColorField({ readOnly: renderAsReadonly }), "data-testid": dataTestId, defaultValue: defaultValue, disabled: renderAsDisabled, id: htmlForId, onBlur: handleBlur, onChange: handleInputChange, readOnly: renderAsReadonly, ref: innerRef, type: "color", value: innerValue }), jsx("input", { "aria-labelledby": htmlForId + "-label-text", className: cvaInputElement({
+            }), "data-testid": dataTestId ? `${dataTestId}-container` : undefined, style: style, children: [jsx("input", { "aria-labelledby": htmlForId + "-label", className: cvaInputColorField({ readOnly: renderAsReadonly }), "data-testid": dataTestId, defaultValue: defaultValue, disabled: renderAsDisabled, id: htmlForId, onBlur: handleBlur, onChange: handleInputChange, readOnly: renderAsReadonly, ref: mergedRef, type: "color", value: innerValue }), jsx("input", { "aria-labelledby": htmlForId + "-label-text", className: cvaInputElement({
                         className: twMerge("focus-visible:outline-hidden px-1", inputClassName),
                     }), "data-testid": dataTestId ? `${dataTestId}-textField` : undefined, disabled: renderAsDisabled, onBlur: handleBlur, onChange: handleInputChange, readOnly: renderAsReadonly, type: "text", value: innerValue, ...inputProps }), jsx(GenericActionsRenderer, { disabled: renderAsDisabled || renderAsReadonly, fieldSize: fieldSize, genericAction: "edit", innerRef: innerRef, tooltipLabel: t("colorField.tooltip") })] }) }));
-});
+};
 ColorField.displayName = "ColorField";
 
 /**
@@ -4244,9 +4246,9 @@ const cvaToggleSwitchThumb = cvaMerge(["block", "rounded-full", "bg-white", "asp
  * @param {ToggleSwitchProps} props - The props for the ToggleSwitch component
  * @returns {ReactElement} ToggleSwitch component
  */
-const ToggleSwitch = forwardRef(({ onChange, onClick, preventDefaultOnClick, className, "data-testid": dataTestId = "toggle-switch", showInputFocus, toggled, size = "medium", tabIndex = 0, readOnly, disabled, ...rest }, ref) => {
+const ToggleSwitch = ({ onChange, onClick, preventDefaultOnClick, className, "data-testid": dataTestId = "toggle-switch", showInputFocus, toggled, size = "medium", tabIndex = 0, readOnly, disabled, ref, ...rest }) => {
     const localInputRef = useRef(null);
-    const inputRef = typeof ref === "function" ? localInputRef : ref || localInputRef;
+    const mergedRef = useMergeRefs([ref, localInputRef]);
     // Extract data attributes to apply to wrapper
     const dataAttributes = useMemo(() => Object.keys(rest).reduce((acc, key) => {
         if (key.startsWith("data-")) {
@@ -4259,7 +4261,7 @@ const ToggleSwitch = forwardRef(({ onChange, onClick, preventDefaultOnClick, cla
         // Prevents double-toggling when wrapped in a label or if preventDefaultOnClick is true
         const isFromLabel = e.target instanceof Element && e.target.closest("label");
         if (!isFromLabel && !preventDefaultOnClick && !disabled && !readOnly) {
-            inputRef.current?.click();
+            localInputRef.current?.click();
         }
         onClick?.(e);
     };
@@ -4267,7 +4269,7 @@ const ToggleSwitch = forwardRef(({ onChange, onClick, preventDefaultOnClick, cla
         if (e.code === "Enter") {
             e.preventDefault();
             if (!readOnly) {
-                inputRef.current?.click();
+                localInputRef.current?.click();
             }
         }
         // Space key is already supported natively by the input element
@@ -4284,8 +4286,8 @@ const ToggleSwitch = forwardRef(({ onChange, onClick, preventDefaultOnClick, cla
                 disabled: disabled || readOnly,
                 size,
                 focused: showInputFocus,
-            }), "data-testid": `${dataTestId}-track`, children: [jsx("span", { className: cvaToggleSwitchThumb({ toggled, size }), "data-testid": `${dataTestId}-thumb` }), jsx("input", { "aria-disabled": disabled || readOnly, checked: toggled, className: cvaToggleSwitchInput(), "data-testid": `${dataTestId}-input`, disabled: disabled, onChange: handleInputChange, onClick: e => e.stopPropagation(), ref: inputRef, role: "switch", tabIndex: tabIndex, type: "checkbox", ...rest })] }) }));
-});
+            }), "data-testid": `${dataTestId}-track`, children: [jsx("span", { className: cvaToggleSwitchThumb({ toggled, size }), "data-testid": `${dataTestId}-thumb` }), jsx("input", { "aria-disabled": disabled || readOnly, checked: toggled, className: cvaToggleSwitchInput(), "data-testid": `${dataTestId}-input`, disabled: disabled, onChange: handleInputChange, onClick: e => e.stopPropagation(), ref: mergedRef, role: "switch", tabIndex: tabIndex, type: "checkbox", ...rest })] }) }));
+};
 ToggleSwitch.displayName = "ToggleSwitch";
 
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-form-components",
-  "version": "1.14.51",
+  "version": "1.14.54",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -14,12 +14,12 @@
     "zod": "^3.23.8",
     "react-hook-form": "7.62.0",
     "tailwind-merge": "^2.0.0",
-    "@trackunit/css-class-variance-utilities": "1.11.57",
-    "@trackunit/react-components": "1.17.45",
-    "@trackunit/ui-icons": "1.11.55",
-    "@trackunit/shared-utils": "1.13.57",
-    "@trackunit/ui-design-tokens": "1.11.56",
-    "@trackunit/i18n-library-translation": "1.12.48",
+    "@trackunit/css-class-variance-utilities": "1.11.60",
+    "@trackunit/react-components": "1.17.48",
+    "@trackunit/ui-icons": "1.11.58",
+    "@trackunit/shared-utils": "1.13.60",
+    "@trackunit/ui-design-tokens": "1.11.59",
+    "@trackunit/i18n-library-translation": "1.12.51",
     "string-ts": "^2.0.0",
     "@js-temporal/polyfill": "^0.5.1",
     "es-toolkit": "^1.39.10"

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

@@ -1,7 +1,7 @@
-import { ButtonCommonProps, CommonProps } from "@trackunit/react-components";
+import { ButtonCommonProps, CommonProps, Refable } from "@trackunit/react-components";
 import { RefObject } from "react";
 export type ActionType = "PHONE_NUMBER" | "WEB_ADDRESS" | "EMAIL" | "COPY" | "EDIT";
-interface AbstractActionButtonProps extends ButtonCommonProps, CommonProps {
+interface AbstractActionButtonProps extends ButtonCommonProps, CommonProps, Refable<HTMLDivElement> {
     /**
      * The type of action performed when clicking the button.
      */
@@ -48,5 +48,5 @@ type ActionButtonProps = CopyActionButtonProps | GenericActionButtonProps | Edit
  * @param {ActionButtonProps} props - The props for the ActionButton component
  * @returns {ReactElement} ActionButton component
  */
-export declare const ActionButton: ({ type, value, "data-testid": dataTestId, size, disabled, className, onClick, }: ActionButtonProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ActionButton: ({ type, value, "data-testid": dataTestId, size, disabled, className, onClick, ref, }: ActionButtonProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,11 +1,11 @@
-import { CommonProps } from "@trackunit/react-components";
+import { CommonProps, Refable } from "@trackunit/react-components";
 import { MappedOmit } from "@trackunit/shared-utils";
-import { InputHTMLAttributes, ReactElement, ReactNode, Ref } from "react";
+import { InputHTMLAttributes, ReactElement, ReactNode } from "react";
 import { FormComponentSizes } from "../../types";
 import { LockedForReasons } from "./InputLockReasonTooltip";
 import { BaseInputActionTypes } from "./components/GenericActionsRenderer";
 type FilteredInputProps = MappedOmit<InputHTMLAttributes<HTMLInputElement>, "prefix" | "disabled" | "readOnly">;
-export interface BaseInputProps extends FilteredInputProps, CommonProps {
+export interface BaseInputProps extends FilteredInputProps, CommonProps, Refable<HTMLInputElement> {
     /**
      * A React element to render before the text in the input.
      */
@@ -58,10 +58,6 @@ export interface BaseInputProps extends FilteredInputProps, CommonProps {
      * Flag or object to set the input as readOnly. If an object, shows a tooltip with the reason.
      */
     readOnly?: boolean | LockedForReasons;
-    /**
-     * A ref for the component
-     */
-    ref?: Ref<HTMLInputElement>;
 }
 /**
  * A base input component that can be used for text inputs, password inputs, etc.

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

@@ -1,9 +1,13 @@
+import { Refable } from "@trackunit/react-components";
 import { HTMLInputTypeAttribute, ReactNode } from "react";
-type PrefixRendererProps = {
+type PrefixRendererProps = Refable<HTMLDivElement> & {
     prefix?: ReactNode;
     type?: HTMLInputTypeAttribute;
     "data-testid"?: string;
     disabled: boolean;
 };
-export declare const PrefixRenderer: import("react").ForwardRefExoticComponent<PrefixRendererProps & import("react").RefAttributes<HTMLDivElement>>;
+/**
+ * Renders the prefix element or falls back to a default prefix for certain types.
+ */
+export declare const PrefixRenderer: ({ prefix, type, "data-testid": dataTestId, disabled, ref }: PrefixRendererProps) => import("react/jsx-runtime").JSX.Element | null;
 export {};

package/src/components/Checkbox/Checkbox.d.ts

@@ -1,7 +1,7 @@
-import { CommonProps } from "@trackunit/react-components";
+import { CommonProps, Refable } from "@trackunit/react-components";
 import { MappedOmit } from "@trackunit/shared-utils";
-import { InputHTMLAttributes, ReactNode, Ref } from "react";
-export interface CheckboxProps extends CommonProps, MappedOmit<InputHTMLAttributes<HTMLInputElement>, "prefix"> {
+import { InputHTMLAttributes, ReactNode } from "react";
+export interface CheckboxProps extends CommonProps, MappedOmit<InputHTMLAttributes<HTMLInputElement>, "prefix">, Refable<HTMLInputElement> {
     /**
      * A string element to be displayed as a label
      */
@@ -35,10 +35,6 @@ export interface CheckboxProps extends CommonProps, MappedOmit<InputHTMLAttribut
      * An boolean flag to stop propagation of the click event
      */
     stopPropagation?: boolean;
-    /**
-     * A ref for the component
-     */
-    ref?: Ref<HTMLInputElement>;
 }
 /**
  * Checkboxes are used when there are multiple items to select in a list. Users can select zero, one, or any number of items.

package/src/components/CheckboxField/CheckboxField.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode, Ref } from "react";
+import { ReactNode } from "react";
 import { CheckboxProps } from "../Checkbox/Checkbox";
 import { FormGroupProps } from "../FormGroup/FormGroup";
 type FormGroupExposedProps = Pick<FormGroupProps, "tip" | "helpText" | "helpAddon">;
@@ -8,10 +8,6 @@ export interface CheckboxFieldProps extends CheckboxProps, FormGroupExposedProps
      * (distinct from the `label` prop which labels the overall form group).
      */
     checkboxLabel?: string | ReactNode;
-    /**
-     * A ref for the component.
-     */
-    ref?: Ref<HTMLInputElement>;
 }
 /**
  * CheckboxField is a form-ready checkbox that wraps a `Checkbox` inside a `FormGroup`.

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

@@ -53,5 +53,8 @@ export interface ColorFieldProps extends FormGroupExposedProps, ColorFieldBaseIn
  * />
  * ```
  */
-export declare const ColorField: import("react").ForwardRefExoticComponent<Omit<ColorFieldProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
+export declare const ColorField: {
+    ({ label, id, tip, helpText, errorMessage, helpAddon, className, defaultValue, "data-testid": dataTestId, value: propValue, onChange, isInvalid, onBlur, fieldSize, style, disabled, readOnly, isWarning, inputClassName, ref, ...inputProps }: ColorFieldProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 export {};

package/src/components/DateField/DateField.d.ts

@@ -1,4 +1,3 @@
-import { Ref } from "react";
 import { FormGroupProps } from "../FormGroup/FormGroup";
 import { DateBaseInputProps } from "./DateBaseInput/DateBaseInput";
 type FormGroupExposedProps = Pick<FormGroupProps, "label" | "tip" | "helpText" | "helpAddon">;
@@ -7,10 +6,6 @@ export interface DateFieldProps extends DateBaseInputProps, FormGroupExposedProp
      * If a value is set, the field is rendered in its invalid state.
      */
     errorMessage?: string;
-    /**
-     * A ref for the component
-     */
-    ref?: Ref<HTMLInputElement>;
 }
 /**
  * The date field component is used for entering date values with a native date picker.

package/src/components/MultiSelectField/FormFieldSelectAdapterMulti.d.ts

@@ -1,6 +1,6 @@
-import { CommonProps } from "@trackunit/react-components";
+import { CommonProps, Refable } from "@trackunit/react-components";
 import { MappedOmit } from "@trackunit/shared-utils";
-import { FocusEvent, ReactElement, ReactNode, Ref } from "react";
+import { FocusEvent, ReactElement, ReactNode } from "react";
 import { GroupBase, InputActionMeta, MultiValue } from "react-select";
 import { SelectProps } from "../BaseSelect/useSelect";
 import { FormGroupProps } from "../FormGroup/FormGroup";
@@ -19,7 +19,7 @@ import { BaseOptionType } from "../SelectField/FormFieldSelectAdapter";
 type FormGroupExposedProps = Pick<FormGroupProps, "label" | "tip" | "helpText" | "helpAddon" | "isInvalid">;
 /** Allow all BaseSelect props except those we adapt/wrap here */
 type SelectExposedProps<TOption extends BaseOptionType = BaseOptionType, TIsAsync extends boolean = false, TGroup extends GroupBase<TOption> = GroupBase<TOption>> = MappedOmit<SelectProps<TOption, TIsAsync, true, TGroup>, "label" | "hasError" | "onBlur" | "options" | "value" | "defaultValue" | "onChange" | "isMulti" | "id">;
-export type MultiSelectFieldProps<TOption extends BaseOptionType = BaseOptionType, TIsAsync extends boolean = false, TGroup extends GroupBase<TOption> = GroupBase<TOption>> = CommonProps & FormGroupExposedProps & SelectExposedProps<TOption, TIsAsync, TGroup> & {
+export interface MultiSelectFieldProps<TOption extends BaseOptionType = BaseOptionType, TIsAsync extends boolean = false, TGroup extends GroupBase<TOption> = GroupBase<TOption>> extends CommonProps, FormGroupExposedProps, SelectExposedProps<TOption, TIsAsync, TGroup>, Refable<HTMLSelectElement> {
     /** RHF/native-friendly blur signature */
     onBlur?: (event: FocusEvent<HTMLInputElement>) => void;
     /** Options to render (same shape as BaseSelect) */
@@ -34,15 +34,13 @@ export type MultiSelectFieldProps<TOption extends BaseOptionType = BaseOptionTyp
     errorMessage?: string;
     /** The htmlFor attribute for the label. If not provided, falls back to id or generates a unique value. */
     htmlFor?: string;
-    /** External ref target (points to the hidden <select /> below) */
-    ref?: Ref<HTMLSelectElement>;
     /** Name used for optional hidden inputs when `getOptionValue` is provided */
     name?: string;
     /** Field id; also propagated to BaseSelect via child props */
     id?: string;
     /** Optional passthrough onInputChange (will be called in addition to internal logic) */
     onInputChange?: (value: string, meta: InputActionMeta) => void;
-};
+}
 interface FormFieldSelectAdapterMultiProps<TOption extends BaseOptionType = BaseOptionType, TIsAsync extends boolean = false, TGroup extends GroupBase<TOption> = GroupBase<TOption>> extends MultiSelectFieldProps<TOption, TIsAsync, TGroup> {
     /**
      * Child render-prop receives exact BaseSelect props specialized for multi.

package/src/components/NumberField/NumberBaseInput/NumberBaseInput.d.ts

@@ -1,10 +1,8 @@
 import { BaseInputProps } from "../../BaseInput/BaseInput";
-type BaseInputExposedProps = Omit<BaseInputProps, "type">;
-export type NumberBaseInputProps = BaseInputExposedProps;
+export type NumberBaseInputProps = Omit<BaseInputProps, "type">;
 /**
  * A thin wrapper around the `BaseInput` component for number input fields.
  *
  * NOTE: If shown with a label, please use the `NumberField` component instead.
  */
 export declare const NumberBaseInput: ({ ref, ...rest }: NumberBaseInputProps) => import("react/jsx-runtime").JSX.Element;
-export {};

package/src/components/NumberField/NumberField.d.ts

@@ -1,4 +1,3 @@
-import { Ref } from "react";
 import { FormGroupProps } from "../FormGroup/FormGroup";
 import { NumberBaseInputProps } from "./NumberBaseInput/NumberBaseInput";
 type FormGroupExposedProps = Pick<FormGroupProps, "label" | "tip" | "helpText" | "helpAddon">;
@@ -7,10 +6,6 @@ export interface NumberFieldProps extends NumberBaseInputProps, FormGroupExposed
      * If a value is set, the field is rendered in its invalid state.
      */
     errorMessage?: string;
-    /**
-     * A ref for the component
-     */
-    ref?: Ref<HTMLInputElement>;
 }
 /**
  * The number field component is used for entering numeric values and includes controls for incrementally increasing or decreasing the value.

package/src/components/OptionCard/OptionCard.d.ts

@@ -1,6 +1,6 @@
-import { CommonProps, IconProps, TagProps } from "@trackunit/react-components";
-import { InputHTMLAttributes, ReactElement, ReactNode, Ref } from "react";
-export interface OptionCardProps extends InputHTMLAttributes<HTMLInputElement>, CommonProps {
+import { CommonProps, IconProps, Refable, TagProps } from "@trackunit/react-components";
+import { InputHTMLAttributes, ReactElement, ReactNode } from "react";
+export interface OptionCardProps extends InputHTMLAttributes<HTMLInputElement>, CommonProps, Refable<HTMLInputElement> {
     /**
      * Icon displayed at the top inside the OptionCard.
      */
@@ -25,10 +25,6 @@ export interface OptionCardProps extends InputHTMLAttributes<HTMLInputElement>,
      * Styles for the OptionCard content.
      */
     contentClassName?: string;
-    /**
-     * A ref for the component
-     */
-    ref?: Ref<HTMLInputElement>;
     /**
      * The layout of the component.
      */

package/src/components/PasswordField/PasswordField.d.ts

@@ -1,4 +1,3 @@
-import { Ref } from "react";
 import { FormGroupProps } from "../FormGroup/FormGroup";
 import { PasswordBaseInputProps } from "./PasswordBaseInput/PasswordBaseInput";
 type FormGroupExposedProps = Pick<FormGroupProps, "label" | "tip" | "helpText" | "helpAddon">;
@@ -7,10 +6,6 @@ export interface PasswordFieldProps extends Omit<PasswordBaseInputProps, "obfusc
      * If a value is set, the field is rendered in its invalid state.
      */
     errorMessage?: string;
-    /**
-     * A ref for the component
-     */
-    ref?: Ref<HTMLInputElement>;
 }
 /**
  * The `<PasswordField>` component is used to enter passwords or other confidential information.

package/src/components/PhoneField/PhoneField.d.ts

@@ -1,4 +1,3 @@
-import { Ref } from "react";
 import { FormGroupProps } from "../FormGroup/FormGroup";
 import { PhoneBaseInputProps } from "./PhoneBaseInput/PhoneBaseInput";
 type FormGroupExposedProps = Pick<FormGroupProps, "label" | "tip" | "helpText" | "helpAddon" | "name">;
@@ -7,10 +6,6 @@ export interface PhoneFieldProps extends FormGroupExposedProps, PhoneBaseInputPr
      * If a value is set, the field is rendered in its invalid state.
      */
     errorMessage?: string;
-    /**
-     * A ref for the component
-     */
-    ref?: Ref<HTMLInputElement>;
 }
 /**
  * The `<PhoneField>` component is used to enter and validate phone numbers.

package/src/components/PhoneFieldWithController/PhoneFieldWithController.d.ts

@@ -1,4 +1,3 @@
-import { Ref } from "react";
 import { Control, ControllerProps } from "react-hook-form";
 import { PhoneFieldProps } from "../PhoneField/PhoneField";
 export interface PhoneFieldWithControllerProps extends PhoneFieldProps {
@@ -14,10 +13,6 @@ export interface PhoneFieldWithControllerProps extends PhoneFieldProps {
      * Used to overwrite controller props.
      */
     controllerProps?: Partial<Omit<ControllerProps<any>, "render">>;
-    /**
-     * A ref for the component
-     */
-    ref?: Ref<HTMLInputElement>;
 }
 /**
  * PhoneFieldWithController wraps `PhoneField` with a `react-hook-form` `Controller`,

package/src/components/Search/Search.d.ts

@@ -1,6 +1,6 @@
 import { CommonProps } from "@trackunit/react-components";
 import { IconName } from "@trackunit/ui-icons";
-import { CSSProperties, ChangeEvent, FocusEvent, KeyboardEvent, ReactElement, Ref } from "react";
+import { CSSProperties, ChangeEvent, FocusEvent, KeyboardEvent, ReactElement } from "react";
 import { TextBaseInputProps } from "../TextField/TextBaseInput/TextBaseInput";
 export interface SearchProps extends CommonProps, TextBaseInputProps {
     /**
@@ -60,10 +60,6 @@ export interface SearchProps extends CommonProps, TextBaseInputProps {
      * Indicates whether a loading spinner should be displayed in the search box.
      */
     loading?: boolean;
-    /**
-     * A ref for the component
-     */
-    ref?: Ref<HTMLInputElement>;
     /**
      * A custom icon to be displayed in the search box.
      */

package/src/components/SelectField/FormFieldSelectAdapter.d.ts

@@ -1,6 +1,6 @@
-import { CommonProps } from "@trackunit/react-components";
+import { CommonProps, Refable } from "@trackunit/react-components";
 import { MappedOmit } from "@trackunit/shared-utils";
-import { FocusEvent, ReactElement, ReactNode, Ref } from "react";
+import { FocusEvent, ReactElement, ReactNode } from "react";
 import { GroupBase } from "react-select";
 import { SelectProps } from "../BaseSelect/useSelect";
 import { FormGroupProps } from "../FormGroup/FormGroup";
@@ -10,7 +10,7 @@ export type BaseOptionType = {
 };
 type SelectExposedProps<TOption extends BaseOptionType = BaseOptionType, TIsAsync extends boolean = false> = MappedOmit<SelectProps<TOption, TIsAsync, false, GroupBase<TOption>>, "value" | "label" | "onChange" | "defaultValue" | "onBlur" | "options">;
 type FormGroupExposedProps = Pick<FormGroupProps, "label" | "tip" | "helpText" | "helpAddon" | "isInvalid">;
-export type SelectFieldProps<TOption extends BaseOptionType = BaseOptionType, TIsAsync extends boolean = false> = CommonProps & FormGroupExposedProps & SelectExposedProps<TOption, TIsAsync> & {
+export interface SelectFieldProps<TOption extends BaseOptionType = BaseOptionType, TIsAsync extends boolean = false> extends CommonProps, FormGroupExposedProps, SelectExposedProps<TOption, TIsAsync>, Refable<HTMLSelectElement> {
     onBlur?: (event: FocusEvent<HTMLInputElement>) => void;
     /**
      * The options available for the SelectField.
@@ -40,11 +40,7 @@ export type SelectFieldProps<TOption extends BaseOptionType = BaseOptionType, TI
      * The htmlFor attribute for the label. If not provided, falls back to id or generates a unique value.
      */
     htmlFor?: string;
-    /**
-     * A ref for the component
-     */
-    ref?: Ref<HTMLSelectElement>;
-};
+}
 interface FormFieldSelectAdapterProps<TOption extends BaseOptionType = BaseOptionType, TIsAsync extends boolean = false> extends SelectFieldProps<TOption, TIsAsync> {
     children: (props: SelectProps<TOption, TIsAsync, false, GroupBase<TOption>>) => ReactNode;
 }

package/src/components/TextAreaField/TextArea/TextAreaBaseInput.d.ts

@@ -1,8 +1,8 @@
-import { CommonProps } from "@trackunit/react-components";
-import { InputHTMLAttributes, Ref } from "react";
+import { CommonProps, Refable } from "@trackunit/react-components";
+import { InputHTMLAttributes } from "react";
 export type TextAreaResize = "none" | "vertical" | "horizontal" | "both";
 type FilteredInputProps = Omit<InputHTMLAttributes<HTMLTextAreaElement>, "prefix" | "suffix">;
-export interface TextAreaBaseInputProps extends FilteredInputProps, CommonProps {
+export interface TextAreaBaseInputProps extends FilteredInputProps, CommonProps, Refable<HTMLTextAreaElement> {
     /**
      * Number of rows in the text area.
      */
@@ -21,10 +21,6 @@ export interface TextAreaBaseInputProps extends FilteredInputProps, CommonProps
      * If true the field is rendered in its invalid state.
      */
     isInvalid?: boolean;
-    /**
-     * A ref for the component
-     */
-    ref?: Ref<HTMLTextAreaElement>;
 }
 /**
  * The TextArea is a base component, and should not be used very often.

package/src/components/TextAreaField/TextAreaField.d.ts

@@ -1,5 +1,4 @@
 import { CommonProps } from "@trackunit/react-components";
-import { Ref } from "react";
 import { FormGroupProps } from "../FormGroup/FormGroup";
 import { TextAreaBaseInputProps } from "./TextArea/TextAreaBaseInput";
 type FormGroupExposedProps = Pick<FormGroupProps, "label" | "tip" | "helpText" | "helpAddon">;
@@ -13,10 +12,6 @@ export interface TextAreaFieldProps extends TextAreaBaseInputProps, FormGroupExp
      * If a value is set, the field is rendered in its invalid state.
      */
     errorMessage?: string;
-    /**
-     * A ref for the component
-     */
-    ref?: Ref<HTMLTextAreaElement>;
 }
 /**
  * The `<TextAreaField>` component is used for multi-line text input.

package/src/components/TextField/TextBaseInput/TextBaseInput.d.ts

@@ -1,10 +1,8 @@
 import { BaseInputProps } from "../../BaseInput/BaseInput";
-type BaseInputExposedProps = Omit<BaseInputProps, "type">;
-export type TextBaseInputProps = BaseInputExposedProps;
+export type TextBaseInputProps = Omit<BaseInputProps, "type">;
 /**
  * A thin wrapper around the `BaseInput` component for text input fields.
  *
  * NOTE: If shown with a label, please use the `TextField` component instead.
  */
 export declare const TextBaseInput: ({ ref, ...rest }: TextBaseInputProps) => import("react/jsx-runtime").JSX.Element;
-export {};

package/src/components/ToggleSwitch/ToggleSwitch.d.ts

@@ -1,7 +1,7 @@
-import { CommonProps } from "@trackunit/react-components";
+import { CommonProps, Refable } from "@trackunit/react-components";
 import { MappedOmit, Size } from "@trackunit/shared-utils";
-import { ChangeEvent, InputHTMLAttributes, MouseEventHandler } from "react";
-export interface ToggleSwitchProps extends CommonProps, MappedOmit<InputHTMLAttributes<HTMLInputElement>, "prefix" | "onChange" | "size" | "children"> {
+import { ChangeEvent, InputHTMLAttributes, MouseEventHandler, ReactElement } from "react";
+export interface ToggleSwitchProps extends CommonProps, MappedOmit<InputHTMLAttributes<HTMLInputElement>, "prefix" | "onChange" | "size" | "children">, Refable<HTMLInputElement> {
     /**
      * custom onChange event handler.
      */
@@ -92,4 +92,7 @@ export interface ToggleSwitchProps extends CommonProps, MappedOmit<InputHTMLAttr
  * @param {ToggleSwitchProps} props - The props for the ToggleSwitch component
  * @returns {ReactElement} ToggleSwitch component
  */
-export declare const ToggleSwitch: import("react").ForwardRefExoticComponent<ToggleSwitchProps & import("react").RefAttributes<HTMLInputElement>>;
+export declare const ToggleSwitch: {
+    ({ onChange, onClick, preventDefaultOnClick, className, "data-testid": dataTestId, showInputFocus, toggled, size, tabIndex, readOnly, disabled, ref, ...rest }: ToggleSwitchProps): ReactElement;
+    displayName: string;
+};

package/src/components/ToggleSwitchOption/ToggleSwitchOption.d.ts

@@ -1,7 +1,7 @@
 import { Refable } from "@trackunit/react-components";
 import { ReactElement } from "react";
 import { ToggleSwitchProps } from "../ToggleSwitch/ToggleSwitch";
-export interface ToggleSwitchOptionProps extends ToggleSwitchProps, Refable<HTMLLabelElement> {
+export interface ToggleSwitchOptionProps extends Omit<ToggleSwitchProps, "ref">, Refable<HTMLLabelElement> {
     /**
      * The label of the toggle.
      */