@trackunit/react-form-components 1.8.65 → 1.8.67

package/index.cjs.js

@@ -108,10 +108,28 @@ const cvaInputBase = cssClassVarianceUtilities.cvaMerge([
     "hover:bg-neutral-50",
     "transition",
 ]);
-const cvaInputBaseDisabled = cssClassVarianceUtilities.cvaMerge(["bg-neutral-100", "hover:bg-neutral-100", "hover:border-neutral-300"]);
+const cvaInputBaseDisabled = cssClassVarianceUtilities.cvaMerge([
+    "bg-neutral-100",
+    "hover:bg-neutral-100",
+    "hover:border-neutral-300",
+    "text-neutral-400",
+]);
 const cvaInputBaseInvalid = cssClassVarianceUtilities.cvaMerge(["border-danger-600"]);
+const cvaInputBaseReadOnly = cssClassVarianceUtilities.cvaMerge(["text-neutral-500"]);
+const cvaInputBaseSize = cssClassVarianceUtilities.cvaMerge("", {
+    variants: {
+        size: {
+            small: ["h-7", "text-xs"],
+            medium: ["h-8", "text-sm"],
+            large: ["h-10", "text-sm"],
+        },
+        defaultVariants: {
+            size: "medium",
+        },
+    },
+});
 const cvaInput$1 = cssClassVarianceUtilities.cvaMerge([
-    "overflow-hidden",
+    "overflow-clip",
     "grid",
     // ! The layout of the grid is critical to the functioning of the cvaInputItemPlacementManager 👇
     // The min restriction of the middle column (--spacing-20) is
@@ -120,17 +138,22 @@ const cvaInput$1 = cssClassVarianceUtilities.cvaMerge([
     "grid-rows-1",
     cvaInputBase(),
     "focus-within:outline-native",
+    "text-neutral-900",
 ], {
     variants: {
         size: {
-            small: ["h-7"],
-            medium: ["h-8"],
-            large: ["h-10"],
+            small: cvaInputBaseSize({ size: "small" }),
+            medium: cvaInputBaseSize({ size: "medium" }),
+            large: cvaInputBaseSize({ size: "large" }),
         },
         disabled: {
             true: cvaInputBaseDisabled(),
             false: [""],
         },
+        readOnly: {
+            true: cvaInputBaseReadOnly(),
+            false: [""],
+        },
         invalid: {
             true: cvaInputBaseInvalid(),
             false: [""],
@@ -146,6 +169,11 @@ const cvaInput$1 = cssClassVarianceUtilities.cvaMerge([
             isWarning: true,
             className: ["border-danger-600"], // Ensures that 'invalid' takes precedence
         },
+        {
+            disabled: true,
+            readOnly: true,
+            className: "text-neutral-400",
+        },
     ],
     defaultVariants: {
         size: "medium",
@@ -172,42 +200,19 @@ const cvaInputItemPlacementManager = cssClassVarianceUtilities.cvaMerge([], {
     },
 });
 const cvaAccessoriesContainer = cssClassVarianceUtilities.cvaMerge(["grid", "h-full", "w-min", "auto-cols-min", "grid-flow-col"]);
-const cvaInputField = cssClassVarianceUtilities.cvaMerge([
-    "w-full",
-    "px-3",
-    "border-0",
-    "bg-transparent",
-    "text-neutral-900",
-    "placeholder-neutral-400",
-    "text-sm",
-    "truncate",
-], {
+/**
+ * Text size and color is handled by cvaInput
+ */
+const cvaInputElement = cssClassVarianceUtilities.cvaMerge(["w-full", "px-3", "border-0", "bg-transparent", "placeholder-neutral-400", "truncate"], {
     variants: {
         size: {
-            small: ["py-0.5", "text-xs"],
+            small: ["py-0.5"],
             medium: ["py-1"],
             large: ["py-2"],
         },
-        disabled: {
-            true: ["text-neutral-400"],
-            false: [""],
-        },
-        readOnly: {
-            true: ["text-neutral-500"],
-            false: [""],
-        },
     },
-    compoundVariants: [
-        {
-            disabled: true,
-            readOnly: true,
-            className: "text-neutral-400",
-        },
-    ],
     defaultVariants: {
         size: "medium",
-        disabled: false,
-        readOnly: false,
     },
 });
 const cvaInputAddon = cssClassVarianceUtilities.cvaMerge([
@@ -371,7 +376,7 @@ const GenericActionsRenderer = ({ genericAction, disabled, fieldSize, innerRef,
  */
 const InputLockReasonTooltip = ({ reasons, kind }) => {
     const [t] = useTranslation();
-    if (!reasons || reasons.length === 0) {
+    if (reasons === undefined || reasons.length === 0) {
         return (jsxRuntime.jsx(reactComponents.Tooltip, { label: t("field.notEditable.tooltip"), children: jsxRuntime.jsx(reactComponents.Icon, { name: kind === "disabled" ? "QuestionMarkCircle" : "LockClosed", size: "small" }) }));
     }
     return (jsxRuntime.jsx(reactComponents.Tooltip, { label: jsxRuntime.jsx("ul", { className: typeof reasons === "string" ? "list-none !pl-0" : "list-disc", children: typeof reasons === "string" ? jsxRuntime.jsx("li", { children: reasons }) : reasons.map(reason => jsxRuntime.jsx("li", { children: reason }, reason)) }), placement: "top", children: jsxRuntime.jsx(reactComponents.Icon, { name: "LockClosed", size: "small" }) }));
@@ -429,7 +434,7 @@ const SuffixRenderer = ({ suffix, isInvalid, isWarning, dataTestId, disabled, })
  * For specific input types make sure to use the corresponding input component.
  * This is a base used by our other input components such as TextBaseInput, NumberBaseInput, PasswordBaseInput, etc.
  */
-const BaseInput = ({ className, isInvalid, dataTestId, prefix, suffix, addonBefore, addonAfter, actions, fieldSize = "medium", nonInteractive = false, inputClassName, placeholder, isWarning, type, genericAction, style, ref, ...rest }) => {
+const BaseInput = ({ className, isInvalid = false, dataTestId, prefix, suffix, addonBefore, addonAfter, actions, fieldSize = "medium", nonInteractive = false, inputClassName, placeholder, isWarning = false, type, genericAction, style, ref, required = false, ...rest }) => {
     // Derive final flags
     const renderAsDisabled = Boolean(rest.disabled);
     const renderAsReadonly = Boolean(rest.readOnly);
@@ -463,19 +468,18 @@ const BaseInput = ({ className, isInvalid, dataTestId, prefix, suffix, addonBefo
     react.useImperativeHandle(ref, () => innerRef.current, []);
     return (jsxRuntime.jsxs("div", { className: cvaInput$1({
             disabled: renderAsDisabled,
+            readOnly: renderAsReadonly,
             invalid: isInvalid,
             isWarning,
             size: fieldSize,
             className,
-        }), "data-testid": dataTestId ? `${dataTestId}-container` : undefined, style: style, children: [jsxRuntime.jsxs("div", { className: cvaAccessoriesContainer({ className: cvaInputItemPlacementManager({ position: "before" }) }), "data-testid": dataTestId ? `${dataTestId}-before-container` : undefined, ref: beforeContainerRef, children: [jsxRuntime.jsx(AddonRenderer, { addon: addonBefore, dataTestId: dataTestId, fieldSize: fieldSize, position: "before" }), jsxRuntime.jsx(PrefixRenderer, { dataTestId: dataTestId, disabled: renderAsDisabled, prefix: prefix, type: type })] }), jsxRuntime.jsx("input", { "aria-required": rest.required, className: cvaInputField({
-                    readOnly: renderAsReadonly,
+        }), "data-testid": dataTestId ? `${dataTestId}-container` : undefined, style: style, children: [jsxRuntime.jsxs("div", { className: cvaAccessoriesContainer({ className: cvaInputItemPlacementManager({ position: "before" }) }), "data-testid": dataTestId ? `${dataTestId}-before-container` : undefined, ref: beforeContainerRef, children: [jsxRuntime.jsx(AddonRenderer, { addon: addonBefore, dataTestId: dataTestId, fieldSize: fieldSize, position: "before" }), jsxRuntime.jsx(PrefixRenderer, { dataTestId: dataTestId, disabled: renderAsDisabled, prefix: prefix, type: type })] }), jsxRuntime.jsx("input", { "aria-required": required, className: cvaInputElement({
                     size: fieldSize,
-                    disabled: renderAsDisabled,
                     className: cvaInputItemPlacementManager({ position: "span", className: inputClassName }),
-                }), "data-testid": dataTestId, placeholder: renderAsDisabled ? undefined : placeholder, ref: innerRef, style: {
+                }), "data-testid": dataTestId, placeholder: renderAsDisabled ? undefined : placeholder, ref: innerRef, required: required, style: {
                     paddingLeft: `calc(var(--before-width, 0px) + ${uiDesignTokens.themeSpacing[2]})`,
                     paddingRight: `calc(var(--after-width, 0px) + ${uiDesignTokens.themeSpacing[2]})`,
-                }, type: type, ...rest, disabled: renderAsDisabled, readOnly: renderAsReadonly || nonInteractive }), jsxRuntime.jsxs("div", { className: cvaAccessoriesContainer({ className: cvaInputItemPlacementManager({ position: "after" }) }), "data-testid": dataTestId ? `${dataTestId}-after-container` : undefined, ref: afterContainerRef, children: [jsxRuntime.jsx(LockReasonRenderer, { dataTestId: dataTestId + "-disabled", lockReason: rest.disabled }), jsxRuntime.jsx(LockReasonRenderer, { dataTestId: dataTestId + "-readonly", lockReason: rest.readOnly && !rest.disabled ? rest.readOnly : undefined }), jsxRuntime.jsx(GenericActionsRenderer, { fieldSize: fieldSize, genericAction: genericAction, innerRef: innerRef }), jsxRuntime.jsx(SuffixRenderer, { dataTestId: dataTestId, disabled: renderAsDisabled, isInvalid: isInvalid, isWarning: isWarning, suffix: suffix }), actions, jsxRuntime.jsx(AddonRenderer, { addon: addonAfter, dataTestId: dataTestId, fieldSize: fieldSize, position: "after" })] })] }));
+                }, type: type, ...rest, disabled: renderAsDisabled, readOnly: renderAsReadonly || nonInteractive }), jsxRuntime.jsxs("div", { className: cvaAccessoriesContainer({ className: cvaInputItemPlacementManager({ position: "after" }) }), "data-testid": dataTestId ? `${dataTestId}-after-container` : undefined, ref: afterContainerRef, children: [jsxRuntime.jsx(LockReasonRenderer, { dataTestId: dataTestId + "-disabled", lockReason: rest.disabled }), jsxRuntime.jsx(LockReasonRenderer, { dataTestId: dataTestId + "-readonly", lockReason: Boolean(rest.readOnly) && !Boolean(rest.disabled) ? rest.readOnly : undefined }), jsxRuntime.jsx(GenericActionsRenderer, { fieldSize: fieldSize, genericAction: genericAction, innerRef: innerRef }), jsxRuntime.jsx(SuffixRenderer, { dataTestId: dataTestId, disabled: renderAsDisabled, isInvalid: isInvalid, isWarning: isWarning, suffix: suffix }), actions, jsxRuntime.jsx(AddonRenderer, { addon: addonAfter, dataTestId: dataTestId, fieldSize: fieldSize, position: "after" })] })] }));
 };
 BaseInput.displayName = "BaseInput";
 
@@ -1756,10 +1760,9 @@ const ColorField = react.forwardRef(({ label, id, tip, helpText, errorMessage, h
                 size: fieldSize,
                 disabled: renderAsDisabled,
                 invalid: renderAsInvalid,
+                readOnly: renderAsReadonly,
                 className,
-            }), "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: handleInputChange, readOnly: renderAsReadonly, ref: innerRef, type: "color", value: innerValue }), jsxRuntime.jsx("input", { "aria-labelledby": htmlForId + "-label-text", className: cvaInputField({
-                        readOnly: renderAsReadonly,
-                        disabled: renderAsDisabled,
+            }), "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: handleInputChange, readOnly: renderAsReadonly, ref: innerRef, type: "color", value: innerValue }), jsxRuntime.jsx("input", { "aria-labelledby": htmlForId + "-label-text", className: cvaInputElement({
                         className: "px-1 focus-visible:outline-none",
                     }), "data-testid": dataTestId ? `${dataTestId}-textField` : undefined, disabled: renderAsDisabled, onBlur: handleBlur, onChange: handleInputChange, readOnly: renderAsReadonly, type: "text", value: innerValue }), jsxRuntime.jsx(GenericActionsRenderer, { disabled: renderAsDisabled || renderAsReadonly, fieldSize: fieldSize, genericAction: "edit", innerRef: innerRef, tooltipLabel: t("colorField.tooltip") })] }) }));
 });
@@ -3301,7 +3304,9 @@ exports.cvaInputAddon = cvaInputAddon;
 exports.cvaInputBase = cvaInputBase;
 exports.cvaInputBaseDisabled = cvaInputBaseDisabled;
 exports.cvaInputBaseInvalid = cvaInputBaseInvalid;
-exports.cvaInputField = cvaInputField;
+exports.cvaInputBaseReadOnly = cvaInputBaseReadOnly;
+exports.cvaInputBaseSize = cvaInputBaseSize;
+exports.cvaInputElement = cvaInputElement;
 exports.cvaInputItemPlacementManager = cvaInputItemPlacementManager;
 exports.cvaInputPrefix = cvaInputPrefix;
 exports.cvaInputSuffix = cvaInputSuffix;

package/index.esm.js

@@ -107,10 +107,28 @@ const cvaInputBase = cvaMerge([
     "hover:bg-neutral-50",
     "transition",
 ]);
-const cvaInputBaseDisabled = cvaMerge(["bg-neutral-100", "hover:bg-neutral-100", "hover:border-neutral-300"]);
+const cvaInputBaseDisabled = cvaMerge([
+    "bg-neutral-100",
+    "hover:bg-neutral-100",
+    "hover:border-neutral-300",
+    "text-neutral-400",
+]);
 const cvaInputBaseInvalid = cvaMerge(["border-danger-600"]);
+const cvaInputBaseReadOnly = cvaMerge(["text-neutral-500"]);
+const cvaInputBaseSize = cvaMerge("", {
+    variants: {
+        size: {
+            small: ["h-7", "text-xs"],
+            medium: ["h-8", "text-sm"],
+            large: ["h-10", "text-sm"],
+        },
+        defaultVariants: {
+            size: "medium",
+        },
+    },
+});
 const cvaInput$1 = cvaMerge([
-    "overflow-hidden",
+    "overflow-clip",
     "grid",
     // ! The layout of the grid is critical to the functioning of the cvaInputItemPlacementManager 👇
     // The min restriction of the middle column (--spacing-20) is
@@ -119,17 +137,22 @@ const cvaInput$1 = cvaMerge([
     "grid-rows-1",
     cvaInputBase(),
     "focus-within:outline-native",
+    "text-neutral-900",
 ], {
     variants: {
         size: {
-            small: ["h-7"],
-            medium: ["h-8"],
-            large: ["h-10"],
+            small: cvaInputBaseSize({ size: "small" }),
+            medium: cvaInputBaseSize({ size: "medium" }),
+            large: cvaInputBaseSize({ size: "large" }),
         },
         disabled: {
             true: cvaInputBaseDisabled(),
             false: [""],
         },
+        readOnly: {
+            true: cvaInputBaseReadOnly(),
+            false: [""],
+        },
         invalid: {
             true: cvaInputBaseInvalid(),
             false: [""],
@@ -145,6 +168,11 @@ const cvaInput$1 = cvaMerge([
             isWarning: true,
             className: ["border-danger-600"], // Ensures that 'invalid' takes precedence
         },
+        {
+            disabled: true,
+            readOnly: true,
+            className: "text-neutral-400",
+        },
     ],
     defaultVariants: {
         size: "medium",
@@ -171,42 +199,19 @@ const cvaInputItemPlacementManager = cvaMerge([], {
     },
 });
 const cvaAccessoriesContainer = cvaMerge(["grid", "h-full", "w-min", "auto-cols-min", "grid-flow-col"]);
-const cvaInputField = cvaMerge([
-    "w-full",
-    "px-3",
-    "border-0",
-    "bg-transparent",
-    "text-neutral-900",
-    "placeholder-neutral-400",
-    "text-sm",
-    "truncate",
-], {
+/**
+ * Text size and color is handled by cvaInput
+ */
+const cvaInputElement = cvaMerge(["w-full", "px-3", "border-0", "bg-transparent", "placeholder-neutral-400", "truncate"], {
     variants: {
         size: {
-            small: ["py-0.5", "text-xs"],
+            small: ["py-0.5"],
             medium: ["py-1"],
             large: ["py-2"],
         },
-        disabled: {
-            true: ["text-neutral-400"],
-            false: [""],
-        },
-        readOnly: {
-            true: ["text-neutral-500"],
-            false: [""],
-        },
     },
-    compoundVariants: [
-        {
-            disabled: true,
-            readOnly: true,
-            className: "text-neutral-400",
-        },
-    ],
     defaultVariants: {
         size: "medium",
-        disabled: false,
-        readOnly: false,
     },
 });
 const cvaInputAddon = cvaMerge([
@@ -370,7 +375,7 @@ const GenericActionsRenderer = ({ genericAction, disabled, fieldSize, innerRef,
  */
 const InputLockReasonTooltip = ({ reasons, kind }) => {
     const [t] = useTranslation();
-    if (!reasons || reasons.length === 0) {
+    if (reasons === undefined || reasons.length === 0) {
         return (jsx(Tooltip, { label: t("field.notEditable.tooltip"), children: jsx(Icon, { name: kind === "disabled" ? "QuestionMarkCircle" : "LockClosed", size: "small" }) }));
     }
     return (jsx(Tooltip, { label: jsx("ul", { className: typeof reasons === "string" ? "list-none !pl-0" : "list-disc", children: typeof reasons === "string" ? jsx("li", { children: reasons }) : reasons.map(reason => jsx("li", { children: reason }, reason)) }), placement: "top", children: jsx(Icon, { name: "LockClosed", size: "small" }) }));
@@ -428,7 +433,7 @@ const SuffixRenderer = ({ suffix, isInvalid, isWarning, dataTestId, disabled, })
  * For specific input types make sure to use the corresponding input component.
  * This is a base used by our other input components such as TextBaseInput, NumberBaseInput, PasswordBaseInput, etc.
  */
-const BaseInput = ({ className, isInvalid, dataTestId, prefix, suffix, addonBefore, addonAfter, actions, fieldSize = "medium", nonInteractive = false, inputClassName, placeholder, isWarning, type, genericAction, style, ref, ...rest }) => {
+const BaseInput = ({ className, isInvalid = false, dataTestId, prefix, suffix, addonBefore, addonAfter, actions, fieldSize = "medium", nonInteractive = false, inputClassName, placeholder, isWarning = false, type, genericAction, style, ref, required = false, ...rest }) => {
     // Derive final flags
     const renderAsDisabled = Boolean(rest.disabled);
     const renderAsReadonly = Boolean(rest.readOnly);
@@ -462,19 +467,18 @@ const BaseInput = ({ className, isInvalid, dataTestId, prefix, suffix, addonBefo
     useImperativeHandle(ref, () => innerRef.current, []);
     return (jsxs("div", { className: cvaInput$1({
             disabled: renderAsDisabled,
+            readOnly: renderAsReadonly,
             invalid: isInvalid,
             isWarning,
             size: fieldSize,
             className,
-        }), "data-testid": dataTestId ? `${dataTestId}-container` : undefined, style: style, children: [jsxs("div", { className: cvaAccessoriesContainer({ className: cvaInputItemPlacementManager({ position: "before" }) }), "data-testid": dataTestId ? `${dataTestId}-before-container` : undefined, ref: beforeContainerRef, children: [jsx(AddonRenderer, { addon: addonBefore, dataTestId: dataTestId, fieldSize: fieldSize, position: "before" }), jsx(PrefixRenderer, { dataTestId: dataTestId, disabled: renderAsDisabled, prefix: prefix, type: type })] }), jsx("input", { "aria-required": rest.required, className: cvaInputField({
-                    readOnly: renderAsReadonly,
+        }), "data-testid": dataTestId ? `${dataTestId}-container` : undefined, style: style, children: [jsxs("div", { className: cvaAccessoriesContainer({ className: cvaInputItemPlacementManager({ position: "before" }) }), "data-testid": dataTestId ? `${dataTestId}-before-container` : undefined, ref: beforeContainerRef, children: [jsx(AddonRenderer, { addon: addonBefore, dataTestId: dataTestId, fieldSize: fieldSize, position: "before" }), jsx(PrefixRenderer, { dataTestId: dataTestId, disabled: renderAsDisabled, prefix: prefix, type: type })] }), jsx("input", { "aria-required": required, className: cvaInputElement({
                     size: fieldSize,
-                    disabled: renderAsDisabled,
                     className: cvaInputItemPlacementManager({ position: "span", className: inputClassName }),
-                }), "data-testid": dataTestId, placeholder: renderAsDisabled ? undefined : placeholder, ref: innerRef, style: {
+                }), "data-testid": dataTestId, placeholder: renderAsDisabled ? undefined : placeholder, ref: innerRef, required: required, style: {
                     paddingLeft: `calc(var(--before-width, 0px) + ${themeSpacing[2]})`,
                     paddingRight: `calc(var(--after-width, 0px) + ${themeSpacing[2]})`,
-                }, type: type, ...rest, disabled: renderAsDisabled, readOnly: renderAsReadonly || nonInteractive }), jsxs("div", { className: cvaAccessoriesContainer({ className: cvaInputItemPlacementManager({ position: "after" }) }), "data-testid": dataTestId ? `${dataTestId}-after-container` : undefined, ref: afterContainerRef, children: [jsx(LockReasonRenderer, { dataTestId: dataTestId + "-disabled", lockReason: rest.disabled }), jsx(LockReasonRenderer, { dataTestId: dataTestId + "-readonly", lockReason: rest.readOnly && !rest.disabled ? rest.readOnly : undefined }), jsx(GenericActionsRenderer, { fieldSize: fieldSize, genericAction: genericAction, innerRef: innerRef }), jsx(SuffixRenderer, { dataTestId: dataTestId, disabled: renderAsDisabled, isInvalid: isInvalid, isWarning: isWarning, suffix: suffix }), actions, jsx(AddonRenderer, { addon: addonAfter, dataTestId: dataTestId, fieldSize: fieldSize, position: "after" })] })] }));
+                }, type: type, ...rest, disabled: renderAsDisabled, readOnly: renderAsReadonly || nonInteractive }), jsxs("div", { className: cvaAccessoriesContainer({ className: cvaInputItemPlacementManager({ position: "after" }) }), "data-testid": dataTestId ? `${dataTestId}-after-container` : undefined, ref: afterContainerRef, children: [jsx(LockReasonRenderer, { dataTestId: dataTestId + "-disabled", lockReason: rest.disabled }), jsx(LockReasonRenderer, { dataTestId: dataTestId + "-readonly", lockReason: Boolean(rest.readOnly) && !Boolean(rest.disabled) ? rest.readOnly : undefined }), jsx(GenericActionsRenderer, { fieldSize: fieldSize, genericAction: genericAction, innerRef: innerRef }), jsx(SuffixRenderer, { dataTestId: dataTestId, disabled: renderAsDisabled, isInvalid: isInvalid, isWarning: isWarning, suffix: suffix }), actions, jsx(AddonRenderer, { addon: addonAfter, dataTestId: dataTestId, fieldSize: fieldSize, position: "after" })] })] }));
 };
 BaseInput.displayName = "BaseInput";
 
@@ -1755,10 +1759,9 @@ const ColorField = forwardRef(({ label, id, tip, helpText, errorMessage, helpAdd
                 size: fieldSize,
                 disabled: renderAsDisabled,
                 invalid: renderAsInvalid,
+                readOnly: renderAsReadonly,
                 className,
-            }), "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: handleInputChange, readOnly: renderAsReadonly, ref: innerRef, type: "color", value: innerValue }), jsx("input", { "aria-labelledby": htmlForId + "-label-text", className: cvaInputField({
-                        readOnly: renderAsReadonly,
-                        disabled: renderAsDisabled,
+            }), "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: handleInputChange, readOnly: renderAsReadonly, ref: innerRef, type: "color", value: innerValue }), jsx("input", { "aria-labelledby": htmlForId + "-label-text", className: cvaInputElement({
                         className: "px-1 focus-visible:outline-none",
                     }), "data-testid": dataTestId ? `${dataTestId}-textField` : undefined, disabled: renderAsDisabled, onBlur: handleBlur, onChange: handleInputChange, readOnly: renderAsReadonly, type: "text", value: innerValue }), jsx(GenericActionsRenderer, { disabled: renderAsDisabled || renderAsReadonly, fieldSize: fieldSize, genericAction: "edit", innerRef: innerRef, tooltipLabel: t("colorField.tooltip") })] }) }));
 });
@@ -3244,4 +3247,4 @@ const useZodValidators = () => {
  */
 setupLibraryTranslations();
 
-export { ActionButton, BaseInput, BaseSelect, Checkbox, CheckboxField, ColorField, CreatableSelect, CreatableSelectField, DEFAULT_TIME, DateBaseInput, DateField, DropZone, DropZoneDefaultLabel, EMAIL_REGEX, EmailField, FormFieldSelectAdapter, FormGroup, Label, MultiSelectField, MultiSelectMenuItem, NumberBaseInput, NumberField, OptionCard, PasswordBaseInput, PasswordField, PhoneBaseInput, PhoneField, PhoneFieldWithController, RadioGroup, RadioItem, Schedule, ScheduleVariant, Search, SelectField, SingleSelectMenuItem, TextAreaBaseInput, TextAreaField, TextBaseInput, TextField, TimeRange, TimeRangeField, ToggleSwitch, ToggleSwitchOption, UploadField, UploadInput, UrlField, checkIfPhoneNumberHasPlus, countryCodeToFlagEmoji, cvaAccessoriesContainer, cvaActionButton, cvaActionContainer, cvaInput$1 as cvaInput, cvaInputAddon, cvaInputBase, cvaInputBaseDisabled, cvaInputBaseInvalid, cvaInputField, cvaInputItemPlacementManager, cvaInputPrefix, cvaInputSuffix, cvaLabel, cvaSelect, cvaSelectControl, cvaSelectCounter, cvaSelectDynamicTagContainer, cvaSelectIcon, cvaSelectMenu, cvaSelectMenuList, cvaSelectPrefixSuffix, cvaSelectXIcon, getCountryAbbreviation, getPhoneNumberWithPlus, isInvalidCountryCode, isInvalidPhoneNumber, isValidHEXColor, parseSchedule, phoneErrorMessage, serializeSchedule, useCustomComponents, useGetPhoneValidationRules, usePhoneInput, useZodValidators, validateEmailAddress, validatePhoneNumber, weekDay };
+export { ActionButton, BaseInput, BaseSelect, Checkbox, CheckboxField, ColorField, CreatableSelect, CreatableSelectField, DEFAULT_TIME, DateBaseInput, DateField, DropZone, DropZoneDefaultLabel, EMAIL_REGEX, EmailField, FormFieldSelectAdapter, FormGroup, Label, MultiSelectField, MultiSelectMenuItem, NumberBaseInput, NumberField, OptionCard, PasswordBaseInput, PasswordField, PhoneBaseInput, PhoneField, PhoneFieldWithController, RadioGroup, RadioItem, Schedule, ScheduleVariant, Search, SelectField, SingleSelectMenuItem, TextAreaBaseInput, TextAreaField, TextBaseInput, TextField, TimeRange, TimeRangeField, ToggleSwitch, ToggleSwitchOption, UploadField, UploadInput, UrlField, checkIfPhoneNumberHasPlus, countryCodeToFlagEmoji, cvaAccessoriesContainer, cvaActionButton, cvaActionContainer, cvaInput$1 as cvaInput, cvaInputAddon, cvaInputBase, cvaInputBaseDisabled, cvaInputBaseInvalid, cvaInputBaseReadOnly, cvaInputBaseSize, cvaInputElement, cvaInputItemPlacementManager, cvaInputPrefix, cvaInputSuffix, cvaLabel, cvaSelect, cvaSelectControl, cvaSelectCounter, cvaSelectDynamicTagContainer, cvaSelectIcon, cvaSelectMenu, cvaSelectMenuList, cvaSelectPrefixSuffix, cvaSelectXIcon, getCountryAbbreviation, getPhoneNumberWithPlus, isInvalidCountryCode, isInvalidPhoneNumber, isValidHEXColor, parseSchedule, phoneErrorMessage, serializeSchedule, useCustomComponents, useGetPhoneValidationRules, usePhoneInput, useZodValidators, validateEmailAddress, validatePhoneNumber, weekDay };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-form-components",
-  "version": "1.8.65",
+  "version": "1.8.67",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -16,14 +16,14 @@
     "zod": "^3.23.8",
     "react-hook-form": "7.62.0",
     "tailwind-merge": "^2.0.0",
-    "@trackunit/css-class-variance-utilities": "1.7.43",
-    "@trackunit/react-components": "1.10.3",
-    "@trackunit/ui-icons": "1.7.44",
-    "@trackunit/shared-utils": "1.9.43",
-    "@trackunit/ui-design-tokens": "1.7.43",
-    "@trackunit/i18n-library-translation": "1.7.52",
+    "@trackunit/css-class-variance-utilities": "1.7.44",
+    "@trackunit/react-components": "1.10.5",
+    "@trackunit/ui-icons": "1.7.45",
+    "@trackunit/shared-utils": "1.9.44",
+    "@trackunit/ui-design-tokens": "1.7.44",
+    "@trackunit/i18n-library-translation": "1.7.53",
     "string-ts": "^2.0.0",
-    "@trackunit/react-test-setup": "1.4.43",
+    "@trackunit/react-test-setup": "1.4.44",
     "@js-temporal/polyfill": "^0.5.1"
   },
   "module": "./index.esm.js",

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

@@ -1,6 +1,6 @@
 import { CommonProps } from "@trackunit/react-components";
 import { MappedOmit } from "@trackunit/shared-utils";
-import { InputHTMLAttributes, ReactNode, Ref } from "react";
+import { InputHTMLAttributes, ReactElement, ReactNode, Ref } from "react";
 import { FormComponentSizes } from "../../types";
 import { LockedForReasons } from "./InputLockReasonTooltip";
 import { BaseInputActionTypes } from "./components";
@@ -76,7 +76,7 @@ export interface BaseInputProps extends FilteredInputProps, CommonProps {
  * This is a base used by our other input components such as TextBaseInput, NumberBaseInput, PasswordBaseInput, etc.
  */
 export declare const BaseInput: {
-    ({ className, isInvalid, dataTestId, prefix, suffix, addonBefore, addonAfter, actions, fieldSize, nonInteractive, inputClassName, placeholder, isWarning, type, genericAction, style, ref, ...rest }: BaseInputProps): import("react/jsx-runtime").JSX.Element;
+    ({ className, isInvalid, dataTestId, prefix, suffix, addonBefore, addonAfter, actions, fieldSize, nonInteractive, inputClassName, placeholder, isWarning, type, genericAction, style, ref, required, ...rest }: BaseInputProps): ReactElement;
     displayName: string;
 };
 export {};

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

@@ -1,9 +1,15 @@
 export declare const cvaInputBase: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
 export declare const cvaInputBaseDisabled: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
 export declare const cvaInputBaseInvalid: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaInputBaseReadOnly: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaInputBaseSize: (props?: ({
+    size?: "small" | "medium" | "large" | null | undefined;
+    defaultVariants?: "size" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 export declare const cvaInput: (props?: ({
     size?: "small" | "medium" | "large" | null | undefined;
     disabled?: boolean | null | undefined;
+    readOnly?: boolean | null | undefined;
     invalid?: boolean | null | undefined;
     isWarning?: boolean | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
@@ -16,10 +22,11 @@ export declare const cvaInputItemPlacementManager: (props?: ({
     position?: "before" | "after" | "span" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 export declare const cvaAccessoriesContainer: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
-export declare const cvaInputField: (props?: ({
+/**
+ * Text size and color is handled by cvaInput
+ */
+export declare const cvaInputElement: (props?: ({
     size?: "small" | "medium" | "large" | null | undefined;
-    disabled?: boolean | null | undefined;
-    readOnly?: boolean | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 export declare const cvaInputAddon: (props?: ({
     size?: "small" | "medium" | "large" | null | undefined;