@trackunit/react-form-components 1.10.11 → 1.10.14

package/index.cjs.js

@@ -821,7 +821,7 @@ const CounterTag = ({ fieldSize, hiddenCount, totalCount, ref, className, "data-
     if (hiddenCount === 0) {
         return null;
     }
-    return (jsxRuntime.jsx(reactComponents.Tag, { className: tailwindMerge.twMerge("inline-flex shrink-0", className), color: "neutral", "data-testid": dataTestId ?? "select-counter", ref: ref, size: fieldSize === "small" ? "small" : "medium", children: totalCount > hiddenCount ? `+${hiddenCount}` : hiddenCount }));
+    return (jsxRuntime.jsx(reactComponents.Tag, { className: className, color: "neutral", "data-testid": dataTestId ?? "select-counter", ref: ref, size: fieldSize === "small" ? "small" : "medium", children: totalCount > hiddenCount ? `+${hiddenCount}` : hiddenCount }));
 };
 
 /**
@@ -837,7 +837,7 @@ const MultiValue = ({ data, children, onClose, className, disabled, fieldSize, g
         e.stopPropagation();
         onClose?.(e);
     };
-    return (jsxRuntime.jsx(reactComponents.Tag, { className: tailwindMerge.twMerge(className, "shrink-0", "inline-flex"), color: disabled ? "neutral" : "white", "data-testid": dataTestId, icon: optionPrefix, onClose: disabled ? undefined : handleOnClose, ref: ref, size: fieldSize === "small" ? "small" : "medium", children: jsxRuntime.jsx("span", { className: "flex items-center gap-1", children: children }) }));
+    return (jsxRuntime.jsx(reactComponents.Tag, { className: tailwindMerge.twMerge(className), color: disabled ? "neutral" : "white", "data-testid": dataTestId, icon: optionPrefix, onClose: disabled ? undefined : handleOnClose, ref: ref, size: fieldSize === "small" ? "small" : "medium", children: jsxRuntime.jsx("span", { className: "flex items-center gap-1", children: children }) }));
 };
 
 /**
@@ -911,31 +911,33 @@ const CheckIcon = ({ className, "data-testid": dataTestId }) => {
     return (jsxRuntime.jsx("svg", { className: className, "data-testid": dataTestId, fill: "none", stroke: "currentColor", strokeWidth: "2", viewBox: "0 0 10 10", xmlns: "http://www.w3.org/2000/svg", children: jsxRuntime.jsx("path", { d: "m2 5.5 2 2L8.5 3", strokeLinecap: "round", strokeLinejoin: "round" }) }));
 };
 
+/**
+ * Checkbox input styling - directly styles the input element (no wrapper span needed).
+ * Uses appearance-none to remove native styling, similar to RadioItem.
+ */
 const cvaCheckbox = cssClassVarianceUtilities.cvaMerge([
+    "appearance-none",
     "w-4",
     "h-4",
     "border-solid",
     "border",
     "shrink-0",
     "border-neutral-300",
-    "flex",
     "rounded",
     "hover:bg-neutral-100",
     "bg-white",
-    "items-center",
     "shadow-sm",
-    "justify-center",
     "box-border",
     "transition",
-    "outline-0",
+    "cursor-pointer",
     "active:bg-neutral-200",
     "active:ring-2",
     "active:ring-inset",
     "active:ring-primary-700",
-    "cursor-pointer",
     "group-active:ring-2",
     "group-active:ring-inset",
     "group-active:ring-primary-700",
+    "focus:outline-native",
 ], {
     variants: {
         invalid: {
@@ -1008,7 +1010,17 @@ const cvaCheckbox = cssClassVarianceUtilities.cvaMerge([
         state: "deselected",
     },
 });
-const cvaCheckboxInput = cssClassVarianceUtilities.cvaMerge(["absolute", "opacity-0", "m-0", "pointer-events-none", "hidden"]);
+/**
+ * Icon overlay container - positioned on top of the input, receives no pointer events
+ */
+const cvaCheckboxIconOverlay = cssClassVarianceUtilities.cvaMerge([
+    "flex",
+    "items-center",
+    "justify-center",
+    "w-4",
+    "h-4",
+    "pointer-events-none",
+]);
 const cvaCheckboxIcon = cssClassVarianceUtilities.cvaMerge(["w-2.5", "h-2.5", "text-white"]);
 
 /**
@@ -1032,36 +1044,21 @@ const IndeterminateIcon = ({ className }) => (jsxRuntime.jsx("svg", { className:
  * @augments props from [React.InputHTMLAttributes](https://reactjs.org/docs/dom-elements.html#input)
  * @param {CheckboxProps} props - The props for the Checkbox component
  */
-const Checkbox = ({ className, "data-testid": dataTestId = "checkbox", onChange, checked = false, disabled = false, isInvalid = false, readOnly, indeterminate = false, suffix, label, tabIndex = 0, stopPropagation, ref, ...rest }) => {
-    const icon = indeterminate ? (jsxRuntime.jsx(IndeterminateIcon, { className: cvaCheckboxIcon() })) : (checked && jsxRuntime.jsx(CheckIcon, { className: cvaCheckboxIcon() }));
-    const internalRef = react.useRef(null);
+const Checkbox = ({ className, "data-testid": dataTestId = "checkbox", onChange, checked = false, disabled = false, isInvalid = false, readOnly = false, indeterminate = false, suffix, label, tabIndex = 0, stopPropagation = false, ref, ...rest }) => {
     const { isTextTruncated: isLabelCutOff, ref: labelRef } = reactComponents.useIsTextTruncated();
     const isReadonly = disabled || readOnly;
     const hasLabel = label !== undefined && label !== null && label !== "";
-    const onKeyPress = e => {
-        if (isReadonly) {
-            e.preventDefault();
-            return;
-        }
-        if ("Space" === e.code) {
-            e.preventDefault();
-            internalRef.current?.click();
-        }
-        if ("Enter" === e.code) {
-            internalRef.current?.click();
-        }
-    };
-    const uuid = rest.id;
+    const state = indeterminate ? "indeterminate" : checked ? "selected" : "deselected";
     return (jsxRuntime.jsxs("label", { className: hasLabel
             ? cvaBinaryControlWrapper({ className })
-            : `inline-flex w-fit items-center gap-2${isReadonly ? " pointer-events-none" : ""}${className ? ` ${className}` : ""}`, "data-testid": dataTestId ? `${dataTestId}-container` : null, htmlFor: uuid, onClick: e => stopPropagation && e.stopPropagation(), onKeyDown: onKeyPress, ref: internalRef, children: [jsxRuntime.jsxs("div", { className: "self-center", children: [jsxRuntime.jsx("input", { "aria-checked": !indeterminate && checked, checked: !indeterminate && checked, className: cvaCheckboxInput(), "data-testid": dataTestId, disabled: disabled, id: uuid, onChange: onChange, readOnly: readOnly, ref: ref, type: "checkbox", ...rest }), jsxRuntime.jsx("span", { className: cvaCheckbox({
+            : `inline-flex w-fit items-center gap-2${isReadonly ? " pointer-events-none" : ""}${className ? ` ${className}` : ""}`, "data-testid": dataTestId ? `${dataTestId}-container` : null, onClick: e => stopPropagation && e.stopPropagation(), children: [jsxRuntime.jsxs(reactComponents.ZStack, { className: "h-4 w-4 self-center", children: [jsxRuntime.jsx("input", { "aria-checked": indeterminate ? "mixed" : checked, checked: !indeterminate && checked, className: cvaCheckbox({
                             disabled: isReadonly,
                             invalid: isReadonly ? false : isInvalid,
-                            state: indeterminate ? "indeterminate" : checked ? "selected" : "deselected",
-                        }), id: uuid, tabIndex: isReadonly ? -1 : tabIndex, children: icon })] }), hasLabel ? (jsxRuntime.jsx(reactComponents.Tooltip, { className: cvaBinaryControlLabelTooltip(), disabled: !isLabelCutOff, label: label, placement: "top", children: jsxRuntime.jsx("span", { className: cvaLabel({
+                            state,
+                        }), "data-testid": dataTestId, disabled: disabled, onChange: onChange, readOnly: readOnly, ref: ref, tabIndex: isReadonly ? -1 : tabIndex, type: "checkbox", ...rest }), checked || indeterminate ? (jsxRuntime.jsx("div", { className: cvaCheckboxIconOverlay(), children: indeterminate ? (jsxRuntime.jsx(IndeterminateIcon, { className: cvaCheckboxIcon() })) : (jsxRuntime.jsx(CheckIcon, { className: cvaCheckboxIcon() })) })) : null] }), hasLabel ? (jsxRuntime.jsx(reactComponents.Tooltip, { className: cvaBinaryControlLabelTooltip(), disabled: !isLabelCutOff, label: label, placement: "top", children: jsxRuntime.jsx("span", { className: cvaLabel({
                         invalid: isReadonly ? false : isInvalid,
                         disabled: isReadonly,
-                    }), id: `checkbox-label-${label}`, ref: labelRef, children: label }) }, "tooltip-" + rest.name)) : null, suffix ? (jsxRuntime.jsx("div", { className: cvaBinaryControlSuffixContainer(), "data-testid": dataTestId ? `${dataTestId}-suffix-container` : undefined, children: suffix })) : null] }));
+                    }), id: `checkbox-label-${label}`, ref: labelRef, children: label }) }, "tooltip-" + rest.name)) : null, suffix !== undefined && suffix !== null && suffix !== "" ? (jsxRuntime.jsx("div", { className: cvaBinaryControlSuffixContainer(), "data-testid": dataTestId ? `${dataTestId}-suffix-container` : undefined, children: suffix })) : null] }));
 };
 Checkbox.displayName = "Checkbox";
 
@@ -2797,7 +2794,7 @@ const PhoneFieldWithController = ({ control, controllerProps, name, value, ref,
 };
 PhoneFieldWithController.displayName = "PhoneFieldWithController";
 
-const cvaRadioGroup = cssClassVarianceUtilities.cvaMerge(["flex", "gap-2", "flex-col", "items-start"], {
+const cvaInputGroup = cssClassVarianceUtilities.cvaMerge(["flex", "gap-2", "flex-col", "items-start"], {
     variants: {
         layout: {
             inline: ["flex", "gap-3", "flex-row", "items-center"],
@@ -2820,7 +2817,7 @@ const cvaRadioItem = cssClassVarianceUtilities.cvaMerge([
     "box-border",
     "hover:cursor-pointer",
     "hover:bg-neutral-100",
-    "focus-visible:outline-primary-700",
+    "focus:outline-native",
 ], {
     variants: {
         checked: {
@@ -2831,19 +2828,12 @@ const cvaRadioItem = cssClassVarianceUtilities.cvaMerge([
                 "bg-white",
                 "hover:bg-neutral-100",
                 "hover:cursor-pointer",
-                "outline-0",
                 "active:bg-neutral-200",
-                "active:ring-2",
-                "active:ring-inset",
-                "active:ring-primary-700",
-                "group-active:ring-2",
-                "group-active:ring-inset",
-                "group-active:ring-primary-700",
             ],
             false: "",
         },
         invalid: {
-            true: ["border-red-600", "active:ring-red-700"],
+            true: ["border-red-600"],
             false: "",
         },
         disabled: {
@@ -2853,8 +2843,6 @@ const cvaRadioItem = cssClassVarianceUtilities.cvaMerge([
                 "cursor-not-allowed",
                 "hover:bg-neutral-400",
                 "active:bg-neutral-400",
-                "group-active:ring-0",
-                "group-active:ring-inset",
             ],
             false: "",
         },
@@ -2882,8 +2870,8 @@ const RadioGroupContext = react.createContext(null);
  * @param {RadioGroupProps} props - The props for the RadioGroup component
  * @returns {ReactElement} RadioGroup component
  */
-const RadioGroup = ({ children, id, name, value, disabled, onChange, label, inline, className, "data-testid": dataTestId, isInvalid, }) => {
-    return (jsxRuntime.jsx(FormGroup, { "data-testid": dataTestId ? `${dataTestId}-FormGroup` : undefined, label: label, children: jsxRuntime.jsx("div", { className: cvaRadioGroup({ layout: inline ? "inline" : null, className }), "data-testid": dataTestId, children: jsxRuntime.jsx(RadioGroupContext.Provider, { value: {
+const RadioGroup = ({ children, id, name, value, disabled, onChange, label, inline = false, className, "data-testid": dataTestId, isInvalid, }) => {
+    return (jsxRuntime.jsx(FormGroup, { "data-testid": dataTestId ? `${dataTestId}-FormGroup` : undefined, label: label, children: jsxRuntime.jsx("div", { className: cvaInputGroup({ layout: inline ? "inline" : null, className }), "data-testid": dataTestId, role: "radiogroup", children: jsxRuntime.jsx(RadioGroupContext.Provider, { value: {
                     id,
                     value,
                     name: name || id,
@@ -2900,24 +2888,35 @@ RadioGroup.displayName = "RadioGroup";
  * @param {RadioItemProps} props - The props for the RadioItem component
  * @returns {ReactElement} RadioItem component
  */
-const RadioItem = ({ label, value, "data-testid": dataTestId, className, description, suffix, ...rest }) => {
+const RadioItem = ({ label, value, "data-testid": dataTestId, className, description, suffix, tabIndex, ...rest }) => {
     const groupCtx = react.useContext(RadioGroupContext);
     const isChecked = groupCtx?.value === value;
+    // Empty string is treated as "no selection" to allow tabbing into the group when no radio is checked
+    const hasGroupValue = groupCtx?.value !== undefined && groupCtx.value !== "";
+    const inputRef = react.useRef(null);
+    const wasCheckedRef = react.useRef(isChecked);
     const { ref: labelRef, isTextTruncated: isLabelTruncated } = reactComponents.useIsTextTruncated();
     const { ref: descriptionRef, isTextTruncated: isDescriptionTruncated } = reactComponents.useIsTextTruncated();
     const descriptionId = description ? `${groupCtx?.id}-${value}-description` : undefined;
     const inputId = `${groupCtx?.id}-${value}`;
     const hasLabel = label !== undefined && label !== null && label !== "";
+    // Restore focus after React re-render when this radio becomes checked via arrow keys
+    react.useEffect(() => {
+        if (isChecked && !wasCheckedRef.current) {
+            inputRef.current?.focus();
+        }
+        wasCheckedRef.current = isChecked;
+    }, [isChecked]);
     return (jsxRuntime.jsxs("label", { className: hasLabel
             ? cvaBinaryControlWrapper({ className })
-            : `inline-flex w-fit items-center gap-2 ${className || ""}`.trim(), "data-testid": dataTestId ? `${dataTestId}-Wrapper` : undefined, htmlFor: inputId, children: [jsxRuntime.jsx("input", { "aria-describedby": descriptionId, checked: isChecked, className: cvaRadioItem({
+            : `inline-flex w-fit items-center gap-2 ${className || ""}`.trim(), "data-testid": dataTestId ? `${dataTestId}-Wrapper` : undefined, children: [jsxRuntime.jsx("input", { "aria-describedby": descriptionId, checked: isChecked, className: cvaRadioItem({
                     checked: isChecked,
                     disabled: groupCtx?.disabled,
                     invalid: groupCtx?.isInvalid,
-                }), "data-testid": dataTestId, id: inputId, onChange: groupCtx?.onChange, type: "radio", value: value, ...rest }), hasLabel ? (jsxRuntime.jsx(reactComponents.Tooltip, { className: cvaBinaryControlLabelTooltip(), "data-testid": dataTestId ? `${dataTestId}-Label-Tooltip` : undefined, disabled: !isLabelTruncated, label: label, placement: "top", children: jsxRuntime.jsx("span", { className: cvaLabel({
+                }), "data-testid": dataTestId, id: inputId, name: groupCtx?.name, onChange: groupCtx?.onChange, ref: inputRef, tabIndex: tabIndex ?? (groupCtx?.disabled ? -1 : isChecked ? 0 : hasGroupValue ? -1 : 0), type: "radio", value: value, ...rest }), hasLabel ? (jsxRuntime.jsx(reactComponents.Tooltip, { className: cvaBinaryControlLabelTooltip(), "data-testid": dataTestId ? `${dataTestId}-Label-Tooltip` : undefined, disabled: !isLabelTruncated, label: label, placement: "top", children: jsxRuntime.jsx("span", { className: cvaLabel({
                         invalid: groupCtx?.isInvalid,
                         disabled: groupCtx?.disabled,
-                    }), "data-testid": dataTestId ? `${dataTestId}-Label` : undefined, ref: labelRef, children: label }) }, "tooltip-" + rest.name)) : null, suffix ? (jsxRuntime.jsx("div", { className: cvaBinaryControlSuffixContainer(), "data-testid": dataTestId ? `${dataTestId}-suffix-container` : undefined, children: suffix })) : null, description ? (jsxRuntime.jsx(reactComponents.Tooltip, { className: cvaBinaryControlDescriptionTooltip(), "data-testid": dataTestId ? `${dataTestId}-Description-Tooltip` : undefined, disabled: !isDescriptionTruncated, label: description, placement: "top", children: jsxRuntime.jsx("span", { className: cvaBinaryControlDescription({ disabled: groupCtx?.disabled }), "data-testid": dataTestId ? `${dataTestId}-Description` : undefined, id: descriptionId, ref: descriptionRef, children: description }) }, "description-tooltip-" + rest.name)) : null] }));
+                    }), "data-testid": dataTestId ? `${dataTestId}-Label` : undefined, ref: labelRef, children: label }) }, "tooltip-" + rest.name)) : null, suffix !== undefined && suffix !== null && suffix !== "" ? (jsxRuntime.jsx("div", { className: cvaBinaryControlSuffixContainer(), "data-testid": dataTestId ? `${dataTestId}-suffix-container` : undefined, children: suffix })) : null, description ? (jsxRuntime.jsx(reactComponents.Tooltip, { className: cvaBinaryControlDescriptionTooltip(), "data-testid": dataTestId ? `${dataTestId}-Description-Tooltip` : undefined, disabled: !isDescriptionTruncated, label: description, placement: "top", children: jsxRuntime.jsx("span", { className: cvaBinaryControlDescription({ disabled: groupCtx?.disabled }), "data-testid": dataTestId ? `${dataTestId}-Description` : undefined, id: descriptionId, ref: descriptionRef, children: description }) }, "description-tooltip-" + rest.name)) : null] }));
 };
 
 const cvaTimeRange = cssClassVarianceUtilities.cvaMerge([
@@ -3275,7 +3274,14 @@ const TextLengthIndicator = ({ length, maxLength }) => {
 };
 
 /**
+ * Use a text area when you need to allow users to enter a large amount of text, such as a comment or a description.
+ *
+ * _**Do use** Text areas for larger text inputs, such as comments or descriptions._
+ *
+ * _**Do not use** Text areas for small text inputs, such as single-line inputs._
  *
+ * @param {TextAreaFieldProps} props - The props for the TextAreaField component
+ * @returns {ReactElement} TextAreaField component
  */
 const TextAreaField = ({ id, label, tip, helpText, helpAddon, errorMessage, isInvalid, maxLength, onChange, className, value, "data-testid": dataTestId, ref, ...rest }) => {
     const [valueLength, setValueLength] = react.useState(value ? `${value}`.length : 0);

package/index.esm.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useNamespaceTranslation, registerTranslations, NamespaceTrans } from '@trackunit/i18n-library-translation';
 import { Temporal } from '@js-temporal/polyfill';
-import { IconButton, Icon, Tooltip, cvaMenu, cvaMenuList, Tag, useIsTextTruncated, MenuItem, useMeasure, useDebounce, Spinner, useMergeRefs, useScrollBlock, Text, Heading, useIsFirstRender } from '@trackunit/react-components';
+import { IconButton, Icon, Tooltip, cvaMenu, cvaMenuList, Tag, useIsTextTruncated, ZStack, MenuItem, useMeasure, useDebounce, Spinner, useMergeRefs, useScrollBlock, Text, Heading, useIsFirstRender } from '@trackunit/react-components';
 import { themeSpacing } from '@trackunit/ui-design-tokens';
 import { forwardRef, useRef, useEffect, useImperativeHandle, useCallback, useState, isValidElement, cloneElement, useLayoutEffect, useReducer, useMemo, createContext, useContext } from 'react';
 import { cvaMerge } from '@trackunit/css-class-variance-utilities';
@@ -820,7 +820,7 @@ const CounterTag = ({ fieldSize, hiddenCount, totalCount, ref, className, "data-
     if (hiddenCount === 0) {
         return null;
     }
-    return (jsx(Tag, { className: twMerge("inline-flex shrink-0", className), color: "neutral", "data-testid": dataTestId ?? "select-counter", ref: ref, size: fieldSize === "small" ? "small" : "medium", children: totalCount > hiddenCount ? `+${hiddenCount}` : hiddenCount }));
+    return (jsx(Tag, { className: className, color: "neutral", "data-testid": dataTestId ?? "select-counter", ref: ref, size: fieldSize === "small" ? "small" : "medium", children: totalCount > hiddenCount ? `+${hiddenCount}` : hiddenCount }));
 };
 
 /**
@@ -836,7 +836,7 @@ const MultiValue = ({ data, children, onClose, className, disabled, fieldSize, g
         e.stopPropagation();
         onClose?.(e);
     };
-    return (jsx(Tag, { className: twMerge(className, "shrink-0", "inline-flex"), color: disabled ? "neutral" : "white", "data-testid": dataTestId, icon: optionPrefix, onClose: disabled ? undefined : handleOnClose, ref: ref, size: fieldSize === "small" ? "small" : "medium", children: jsx("span", { className: "flex items-center gap-1", children: children }) }));
+    return (jsx(Tag, { className: twMerge(className), color: disabled ? "neutral" : "white", "data-testid": dataTestId, icon: optionPrefix, onClose: disabled ? undefined : handleOnClose, ref: ref, size: fieldSize === "small" ? "small" : "medium", children: jsx("span", { className: "flex items-center gap-1", children: children }) }));
 };
 
 /**
@@ -910,31 +910,33 @@ const CheckIcon = ({ className, "data-testid": dataTestId }) => {
     return (jsx("svg", { className: className, "data-testid": dataTestId, fill: "none", stroke: "currentColor", strokeWidth: "2", viewBox: "0 0 10 10", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { d: "m2 5.5 2 2L8.5 3", strokeLinecap: "round", strokeLinejoin: "round" }) }));
 };
 
+/**
+ * Checkbox input styling - directly styles the input element (no wrapper span needed).
+ * Uses appearance-none to remove native styling, similar to RadioItem.
+ */
 const cvaCheckbox = cvaMerge([
+    "appearance-none",
     "w-4",
     "h-4",
     "border-solid",
     "border",
     "shrink-0",
     "border-neutral-300",
-    "flex",
     "rounded",
     "hover:bg-neutral-100",
     "bg-white",
-    "items-center",
     "shadow-sm",
-    "justify-center",
     "box-border",
     "transition",
-    "outline-0",
+    "cursor-pointer",
     "active:bg-neutral-200",
     "active:ring-2",
     "active:ring-inset",
     "active:ring-primary-700",
-    "cursor-pointer",
     "group-active:ring-2",
     "group-active:ring-inset",
     "group-active:ring-primary-700",
+    "focus:outline-native",
 ], {
     variants: {
         invalid: {
@@ -1007,7 +1009,17 @@ const cvaCheckbox = cvaMerge([
         state: "deselected",
     },
 });
-const cvaCheckboxInput = cvaMerge(["absolute", "opacity-0", "m-0", "pointer-events-none", "hidden"]);
+/**
+ * Icon overlay container - positioned on top of the input, receives no pointer events
+ */
+const cvaCheckboxIconOverlay = cvaMerge([
+    "flex",
+    "items-center",
+    "justify-center",
+    "w-4",
+    "h-4",
+    "pointer-events-none",
+]);
 const cvaCheckboxIcon = cvaMerge(["w-2.5", "h-2.5", "text-white"]);
 
 /**
@@ -1031,36 +1043,21 @@ const IndeterminateIcon = ({ className }) => (jsx("svg", { className: className,
  * @augments props from [React.InputHTMLAttributes](https://reactjs.org/docs/dom-elements.html#input)
  * @param {CheckboxProps} props - The props for the Checkbox component
  */
-const Checkbox = ({ className, "data-testid": dataTestId = "checkbox", onChange, checked = false, disabled = false, isInvalid = false, readOnly, indeterminate = false, suffix, label, tabIndex = 0, stopPropagation, ref, ...rest }) => {
-    const icon = indeterminate ? (jsx(IndeterminateIcon, { className: cvaCheckboxIcon() })) : (checked && jsx(CheckIcon, { className: cvaCheckboxIcon() }));
-    const internalRef = useRef(null);
+const Checkbox = ({ className, "data-testid": dataTestId = "checkbox", onChange, checked = false, disabled = false, isInvalid = false, readOnly = false, indeterminate = false, suffix, label, tabIndex = 0, stopPropagation = false, ref, ...rest }) => {
     const { isTextTruncated: isLabelCutOff, ref: labelRef } = useIsTextTruncated();
     const isReadonly = disabled || readOnly;
     const hasLabel = label !== undefined && label !== null && label !== "";
-    const onKeyPress = e => {
-        if (isReadonly) {
-            e.preventDefault();
-            return;
-        }
-        if ("Space" === e.code) {
-            e.preventDefault();
-            internalRef.current?.click();
-        }
-        if ("Enter" === e.code) {
-            internalRef.current?.click();
-        }
-    };
-    const uuid = rest.id;
+    const state = indeterminate ? "indeterminate" : checked ? "selected" : "deselected";
     return (jsxs("label", { className: hasLabel
             ? cvaBinaryControlWrapper({ className })
-            : `inline-flex w-fit items-center gap-2${isReadonly ? " pointer-events-none" : ""}${className ? ` ${className}` : ""}`, "data-testid": dataTestId ? `${dataTestId}-container` : null, htmlFor: uuid, onClick: e => stopPropagation && e.stopPropagation(), onKeyDown: onKeyPress, ref: internalRef, children: [jsxs("div", { className: "self-center", children: [jsx("input", { "aria-checked": !indeterminate && checked, checked: !indeterminate && checked, className: cvaCheckboxInput(), "data-testid": dataTestId, disabled: disabled, id: uuid, onChange: onChange, readOnly: readOnly, ref: ref, type: "checkbox", ...rest }), jsx("span", { className: cvaCheckbox({
+            : `inline-flex w-fit items-center gap-2${isReadonly ? " pointer-events-none" : ""}${className ? ` ${className}` : ""}`, "data-testid": dataTestId ? `${dataTestId}-container` : null, onClick: e => stopPropagation && e.stopPropagation(), children: [jsxs(ZStack, { className: "h-4 w-4 self-center", children: [jsx("input", { "aria-checked": indeterminate ? "mixed" : checked, checked: !indeterminate && checked, className: cvaCheckbox({
                             disabled: isReadonly,
                             invalid: isReadonly ? false : isInvalid,
-                            state: indeterminate ? "indeterminate" : checked ? "selected" : "deselected",
-                        }), id: uuid, tabIndex: isReadonly ? -1 : tabIndex, children: icon })] }), hasLabel ? (jsx(Tooltip, { className: cvaBinaryControlLabelTooltip(), disabled: !isLabelCutOff, label: label, placement: "top", children: jsx("span", { className: cvaLabel({
+                            state,
+                        }), "data-testid": dataTestId, disabled: disabled, onChange: onChange, readOnly: readOnly, ref: ref, tabIndex: isReadonly ? -1 : tabIndex, type: "checkbox", ...rest }), checked || indeterminate ? (jsx("div", { className: cvaCheckboxIconOverlay(), children: indeterminate ? (jsx(IndeterminateIcon, { className: cvaCheckboxIcon() })) : (jsx(CheckIcon, { className: cvaCheckboxIcon() })) })) : null] }), hasLabel ? (jsx(Tooltip, { className: cvaBinaryControlLabelTooltip(), disabled: !isLabelCutOff, label: label, placement: "top", children: jsx("span", { className: cvaLabel({
                         invalid: isReadonly ? false : isInvalid,
                         disabled: isReadonly,
-                    }), id: `checkbox-label-${label}`, ref: labelRef, children: label }) }, "tooltip-" + rest.name)) : null, suffix ? (jsx("div", { className: cvaBinaryControlSuffixContainer(), "data-testid": dataTestId ? `${dataTestId}-suffix-container` : undefined, children: suffix })) : null] }));
+                    }), id: `checkbox-label-${label}`, ref: labelRef, children: label }) }, "tooltip-" + rest.name)) : null, suffix !== undefined && suffix !== null && suffix !== "" ? (jsx("div", { className: cvaBinaryControlSuffixContainer(), "data-testid": dataTestId ? `${dataTestId}-suffix-container` : undefined, children: suffix })) : null] }));
 };
 Checkbox.displayName = "Checkbox";
 
@@ -2796,7 +2793,7 @@ const PhoneFieldWithController = ({ control, controllerProps, name, value, ref,
 };
 PhoneFieldWithController.displayName = "PhoneFieldWithController";
 
-const cvaRadioGroup = cvaMerge(["flex", "gap-2", "flex-col", "items-start"], {
+const cvaInputGroup = cvaMerge(["flex", "gap-2", "flex-col", "items-start"], {
     variants: {
         layout: {
             inline: ["flex", "gap-3", "flex-row", "items-center"],
@@ -2819,7 +2816,7 @@ const cvaRadioItem = cvaMerge([
     "box-border",
     "hover:cursor-pointer",
     "hover:bg-neutral-100",
-    "focus-visible:outline-primary-700",
+    "focus:outline-native",
 ], {
     variants: {
         checked: {
@@ -2830,19 +2827,12 @@ const cvaRadioItem = cvaMerge([
                 "bg-white",
                 "hover:bg-neutral-100",
                 "hover:cursor-pointer",
-                "outline-0",
                 "active:bg-neutral-200",
-                "active:ring-2",
-                "active:ring-inset",
-                "active:ring-primary-700",
-                "group-active:ring-2",
-                "group-active:ring-inset",
-                "group-active:ring-primary-700",
             ],
             false: "",
         },
         invalid: {
-            true: ["border-red-600", "active:ring-red-700"],
+            true: ["border-red-600"],
             false: "",
         },
         disabled: {
@@ -2852,8 +2842,6 @@ const cvaRadioItem = cvaMerge([
                 "cursor-not-allowed",
                 "hover:bg-neutral-400",
                 "active:bg-neutral-400",
-                "group-active:ring-0",
-                "group-active:ring-inset",
             ],
             false: "",
         },
@@ -2881,8 +2869,8 @@ const RadioGroupContext = createContext(null);
  * @param {RadioGroupProps} props - The props for the RadioGroup component
  * @returns {ReactElement} RadioGroup component
  */
-const RadioGroup = ({ children, id, name, value, disabled, onChange, label, inline, className, "data-testid": dataTestId, isInvalid, }) => {
-    return (jsx(FormGroup, { "data-testid": dataTestId ? `${dataTestId}-FormGroup` : undefined, label: label, children: jsx("div", { className: cvaRadioGroup({ layout: inline ? "inline" : null, className }), "data-testid": dataTestId, children: jsx(RadioGroupContext.Provider, { value: {
+const RadioGroup = ({ children, id, name, value, disabled, onChange, label, inline = false, className, "data-testid": dataTestId, isInvalid, }) => {
+    return (jsx(FormGroup, { "data-testid": dataTestId ? `${dataTestId}-FormGroup` : undefined, label: label, children: jsx("div", { className: cvaInputGroup({ layout: inline ? "inline" : null, className }), "data-testid": dataTestId, role: "radiogroup", children: jsx(RadioGroupContext.Provider, { value: {
                     id,
                     value,
                     name: name || id,
@@ -2899,24 +2887,35 @@ RadioGroup.displayName = "RadioGroup";
  * @param {RadioItemProps} props - The props for the RadioItem component
  * @returns {ReactElement} RadioItem component
  */
-const RadioItem = ({ label, value, "data-testid": dataTestId, className, description, suffix, ...rest }) => {
+const RadioItem = ({ label, value, "data-testid": dataTestId, className, description, suffix, tabIndex, ...rest }) => {
     const groupCtx = useContext(RadioGroupContext);
     const isChecked = groupCtx?.value === value;
+    // Empty string is treated as "no selection" to allow tabbing into the group when no radio is checked
+    const hasGroupValue = groupCtx?.value !== undefined && groupCtx.value !== "";
+    const inputRef = useRef(null);
+    const wasCheckedRef = useRef(isChecked);
     const { ref: labelRef, isTextTruncated: isLabelTruncated } = useIsTextTruncated();
     const { ref: descriptionRef, isTextTruncated: isDescriptionTruncated } = useIsTextTruncated();
     const descriptionId = description ? `${groupCtx?.id}-${value}-description` : undefined;
     const inputId = `${groupCtx?.id}-${value}`;
     const hasLabel = label !== undefined && label !== null && label !== "";
+    // Restore focus after React re-render when this radio becomes checked via arrow keys
+    useEffect(() => {
+        if (isChecked && !wasCheckedRef.current) {
+            inputRef.current?.focus();
+        }
+        wasCheckedRef.current = isChecked;
+    }, [isChecked]);
     return (jsxs("label", { className: hasLabel
             ? cvaBinaryControlWrapper({ className })
-            : `inline-flex w-fit items-center gap-2 ${className || ""}`.trim(), "data-testid": dataTestId ? `${dataTestId}-Wrapper` : undefined, htmlFor: inputId, children: [jsx("input", { "aria-describedby": descriptionId, checked: isChecked, className: cvaRadioItem({
+            : `inline-flex w-fit items-center gap-2 ${className || ""}`.trim(), "data-testid": dataTestId ? `${dataTestId}-Wrapper` : undefined, children: [jsx("input", { "aria-describedby": descriptionId, checked: isChecked, className: cvaRadioItem({
                     checked: isChecked,
                     disabled: groupCtx?.disabled,
                     invalid: groupCtx?.isInvalid,
-                }), "data-testid": dataTestId, id: inputId, onChange: groupCtx?.onChange, type: "radio", value: value, ...rest }), hasLabel ? (jsx(Tooltip, { className: cvaBinaryControlLabelTooltip(), "data-testid": dataTestId ? `${dataTestId}-Label-Tooltip` : undefined, disabled: !isLabelTruncated, label: label, placement: "top", children: jsx("span", { className: cvaLabel({
+                }), "data-testid": dataTestId, id: inputId, name: groupCtx?.name, onChange: groupCtx?.onChange, ref: inputRef, tabIndex: tabIndex ?? (groupCtx?.disabled ? -1 : isChecked ? 0 : hasGroupValue ? -1 : 0), type: "radio", value: value, ...rest }), hasLabel ? (jsx(Tooltip, { className: cvaBinaryControlLabelTooltip(), "data-testid": dataTestId ? `${dataTestId}-Label-Tooltip` : undefined, disabled: !isLabelTruncated, label: label, placement: "top", children: jsx("span", { className: cvaLabel({
                         invalid: groupCtx?.isInvalid,
                         disabled: groupCtx?.disabled,
-                    }), "data-testid": dataTestId ? `${dataTestId}-Label` : undefined, ref: labelRef, children: label }) }, "tooltip-" + rest.name)) : null, suffix ? (jsx("div", { className: cvaBinaryControlSuffixContainer(), "data-testid": dataTestId ? `${dataTestId}-suffix-container` : undefined, children: suffix })) : null, description ? (jsx(Tooltip, { className: cvaBinaryControlDescriptionTooltip(), "data-testid": dataTestId ? `${dataTestId}-Description-Tooltip` : undefined, disabled: !isDescriptionTruncated, label: description, placement: "top", children: jsx("span", { className: cvaBinaryControlDescription({ disabled: groupCtx?.disabled }), "data-testid": dataTestId ? `${dataTestId}-Description` : undefined, id: descriptionId, ref: descriptionRef, children: description }) }, "description-tooltip-" + rest.name)) : null] }));
+                    }), "data-testid": dataTestId ? `${dataTestId}-Label` : undefined, ref: labelRef, children: label }) }, "tooltip-" + rest.name)) : null, suffix !== undefined && suffix !== null && suffix !== "" ? (jsx("div", { className: cvaBinaryControlSuffixContainer(), "data-testid": dataTestId ? `${dataTestId}-suffix-container` : undefined, children: suffix })) : null, description ? (jsx(Tooltip, { className: cvaBinaryControlDescriptionTooltip(), "data-testid": dataTestId ? `${dataTestId}-Description-Tooltip` : undefined, disabled: !isDescriptionTruncated, label: description, placement: "top", children: jsx("span", { className: cvaBinaryControlDescription({ disabled: groupCtx?.disabled }), "data-testid": dataTestId ? `${dataTestId}-Description` : undefined, id: descriptionId, ref: descriptionRef, children: description }) }, "description-tooltip-" + rest.name)) : null] }));
 };
 
 const cvaTimeRange = cvaMerge([
@@ -3274,7 +3273,14 @@ const TextLengthIndicator = ({ length, maxLength }) => {
 };
 
 /**
+ * Use a text area when you need to allow users to enter a large amount of text, such as a comment or a description.
+ *
+ * _**Do use** Text areas for larger text inputs, such as comments or descriptions._
+ *
+ * _**Do not use** Text areas for small text inputs, such as single-line inputs._
  *
+ * @param {TextAreaFieldProps} props - The props for the TextAreaField component
+ * @returns {ReactElement} TextAreaField component
  */
 const TextAreaField = ({ id, label, tip, helpText, helpAddon, errorMessage, isInvalid, maxLength, onChange, className, value, "data-testid": dataTestId, ref, ...rest }) => {
     const [valueLength, setValueLength] = useState(value ? `${value}`.length : 0);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-form-components",
-  "version": "1.10.11",
+  "version": "1.10.14",
   "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.9.7",
-    "@trackunit/react-components": "1.12.11",
-    "@trackunit/ui-icons": "1.9.7",
-    "@trackunit/shared-utils": "1.11.7",
-    "@trackunit/ui-design-tokens": "1.9.7",
-    "@trackunit/i18n-library-translation": "1.9.10",
+    "@trackunit/css-class-variance-utilities": "1.9.10",
+    "@trackunit/react-components": "1.13.0",
+    "@trackunit/ui-icons": "1.9.10",
+    "@trackunit/shared-utils": "1.11.10",
+    "@trackunit/ui-design-tokens": "1.9.10",
+    "@trackunit/i18n-library-translation": "1.9.13",
     "string-ts": "^2.0.0",
     "@js-temporal/polyfill": "^0.5.1",
     "es-toolkit": "^1.39.10",

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

@@ -54,6 +54,6 @@ export interface CheckboxProps extends CommonProps, MappedOmit<InputHTMLAttribut
  * @param {CheckboxProps} props - The props for the Checkbox component
  */
 export declare const Checkbox: {
-    ({ className, "data-testid": dataTestId, onChange, checked, disabled, isInvalid, readOnly, indeterminate, suffix, label, tabIndex, stopPropagation, ref, ...rest }: CheckboxProps): import("react/jsx-runtime").JSX.Element;
+    ({ className, "data-testid": dataTestId, onChange, checked, disabled, isInvalid, readOnly, indeterminate, suffix, label, tabIndex, stopPropagation, ref, ...rest }: CheckboxProps): ReactNode;
     displayName: string;
 };

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

@@ -1,7 +1,14 @@
+/**
+ * Checkbox input styling - directly styles the input element (no wrapper span needed).
+ * Uses appearance-none to remove native styling, similar to RadioItem.
+ */
 export declare const cvaCheckbox: (props?: ({
     invalid?: boolean | null | undefined;
     state?: "selected" | "deselected" | "indeterminate" | null | undefined;
     disabled?: boolean | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
-export declare const cvaCheckboxInput: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+/**
+ * Icon overlay container - positioned on top of the input, receives no pointer events
+ */
+export declare const cvaCheckboxIconOverlay: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
 export declare const cvaCheckboxIcon: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;

package/src/components/RadioGroup/RadioGroup.d.ts

@@ -1,6 +1,6 @@
 import { CommonProps } from "@trackunit/react-components";
 import { ChangeEvent, InputHTMLAttributes, ReactElement, ReactNode } from "react";
-export interface RadioGroupProps<V extends string | number> extends CommonProps, InputHTMLAttributes<HTMLInputElement> {
+export interface RadioGroupProps<TValue extends string | number> extends CommonProps, InputHTMLAttributes<HTMLInputElement> {
     /**
      */
     children: ReactNode;
@@ -15,7 +15,7 @@ export interface RadioGroupProps<V extends string | number> extends CommonProps,
     /**
      * The value of the radio group.
      */
-    value: V;
+    value: TValue;
     /**
      * The name of the radio group.
      */
@@ -51,6 +51,6 @@ export interface RadioGroupProps<V extends string | number> extends CommonProps,
  * @returns {ReactElement} RadioGroup component
  */
 export declare const RadioGroup: {
-    <V extends string | number = string>({ children, id, name, value, disabled, onChange, label, inline, className, "data-testid": dataTestId, isInvalid, }: RadioGroupProps<V>): ReactElement;
+    <TValue extends string | number = string>({ children, id, name, value, disabled, onChange, label, inline, className, "data-testid": dataTestId, isInvalid, }: RadioGroupProps<TValue>): ReactElement;
     displayName: string;
 };

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

@@ -1,4 +1,4 @@
-export declare const cvaRadioGroup: (props?: ({
+export declare const cvaInputGroup: (props?: ({
     layout?: "inline" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 export declare const cvaRadioItem: (props?: ({

package/src/components/RadioGroup/RadioItem.d.ts

@@ -1,7 +1,7 @@
 import { CommonProps } from "@trackunit/react-components";
 import { MappedOmit } from "@trackunit/shared-utils";
 import { InputHTMLAttributes, ReactElement, ReactNode } from "react";
-export interface RadioItemProps<V extends string | number = string> extends CommonProps, MappedOmit<InputHTMLAttributes<HTMLInputElement>, "prefix"> {
+export interface RadioItemProps<TValue extends string | number = string> extends CommonProps, MappedOmit<InputHTMLAttributes<HTMLInputElement>, "prefix"> {
     /**
      * The label of the radio item.
      */
@@ -9,7 +9,7 @@ export interface RadioItemProps<V extends string | number = string> extends Comm
     /**
      * The value of the radio item.
      */
-    value: V;
+    value: TValue;
     /**
      * The description of the radio item.
      */
@@ -25,4 +25,4 @@ export interface RadioItemProps<V extends string | number = string> extends Comm
  * @param {RadioItemProps} props - The props for the RadioItem component
  * @returns {ReactElement} RadioItem component
  */
-export declare const RadioItem: <V extends string | number>({ label, value, "data-testid": dataTestId, className, description, suffix, ...rest }: RadioItemProps<V>) => ReactElement;
+export declare const RadioItem: <TValue extends string | number>({ label, value, "data-testid": dataTestId, className, description, suffix, tabIndex, ...rest }: RadioItemProps<TValue>) => ReactElement;

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

@@ -19,7 +19,14 @@ export interface TextAreaFieldProps extends TextAreaBaseInputProps, FormGroupExp
     ref?: Ref<HTMLTextAreaElement>;
 }
 /**
+ * Use a text area when you need to allow users to enter a large amount of text, such as a comment or a description.
  *
+ * _**Do use** Text areas for larger text inputs, such as comments or descriptions._
+ *
+ * _**Do not use** Text areas for small text inputs, such as single-line inputs._
+ *
+ * @param {TextAreaFieldProps} props - The props for the TextAreaField component
+ * @returns {ReactElement} TextAreaField component
  */
 export declare const TextAreaField: {
     ({ id, label, tip, helpText, helpAddon, errorMessage, isInvalid, maxLength, onChange, className, value, "data-testid": dataTestId, ref, ...rest }: TextAreaFieldProps): import("react/jsx-runtime").JSX.Element;