@trackunit/react-form-components 1.6.14 → 1.6.16

package/index.cjs.js

@@ -618,7 +618,7 @@ const cvaCheckbox = cssClassVarianceUtilities.cvaMerge([
     },
 });
 const cvaCheckboxInput = cssClassVarianceUtilities.cvaMerge(["absolute", "opacity-0", "m-0", "pointer-events-none", "hidden"]);
-const cvaCheckboxIcon = cssClassVarianceUtilities.cvaMerge(["w-2.5", "h-2.5", "text-white"]);
+const cvaCheckboxIcon = cssClassVarianceUtilities.cvaMerge(["w-2.5", "h-2.5", "text-primary_contrasted"]);
 
 /**
  * The IndeterminateIcon component is used by the checkbox to display the Indeterminate state.
@@ -714,7 +714,7 @@ const FormGroup = ({ isInvalid, isWarning, helpText, helpAddon, tip, className,
         const color = isInvalid ? "danger" : isWarning ? "warning" : null;
         return color ? jsxRuntime.jsx(reactComponents.Icon, { color: color, name: "ExclamationTriangle", size: "small" }) : null;
     }, [isInvalid, isWarning]);
-    return (jsxRuntime.jsxs("div", { className: cvaFormGroup({ className }), "data-testid": dataTestId, children: [jsxRuntime.jsxs("div", { className: cvaFormGroupContainerBefore(), children: [label ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Label, { className: "component-formGroup-font", dataTestId: dataTestId ? `${dataTestId}-label` : undefined, htmlFor: htmlFor, id: htmlFor + "-label", children: label }), required ? (jsxRuntime.jsx(reactComponents.Tooltip, { "data-testid": "required-asterisk", label: t("field.required.asterisk.tooltip"), children: "*" })) : null] })) : null, tip ? (jsxRuntime.jsx(reactComponents.Tooltip, { className: "ml-1", dataTestId: dataTestId ? `${dataTestId}-tooltip` : undefined, label: tip, placement: "bottom" })) : null] }), children, helpText || helpAddon ? (jsxRuntime.jsxs("div", { className: cvaFormGroupContainerAfter({ invalid: isInvalid, isWarning: isWarning }), children: [helpText ? (jsxRuntime.jsxs("div", { className: "flex gap-1", children: [validationStateIcon, jsxRuntime.jsx("span", { "data-testid": dataTestId ? `${dataTestId}-helpText` : undefined, children: helpText })] })) : undefined, helpAddon ? (jsxRuntime.jsx("span", { className: cvaHelpAddon(), "data-testid": dataTestId ? `${dataTestId}-helpAddon` : null, children: helpAddon })) : null] })) : null] }));
+    return (jsxRuntime.jsxs("div", { className: cvaFormGroup({ className }), "data-testid": dataTestId, children: [label || tip ? (jsxRuntime.jsxs("div", { className: cvaFormGroupContainerBefore(), children: [label ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Label, { className: "component-formGroup-font", dataTestId: dataTestId ? `${dataTestId}-label` : undefined, htmlFor: htmlFor, id: htmlFor + "-label", children: label }), required ? (jsxRuntime.jsx(reactComponents.Tooltip, { "data-testid": "required-asterisk", label: t("field.required.asterisk.tooltip"), children: "*" })) : null] })) : null, tip ? (jsxRuntime.jsx(reactComponents.Tooltip, { className: "ml-1", dataTestId: dataTestId ? `${dataTestId}-tooltip` : undefined, label: tip, placement: "bottom" })) : null] })) : null, children, helpText || helpAddon ? (jsxRuntime.jsxs("div", { className: cvaFormGroupContainerAfter({ invalid: isInvalid, isWarning: isWarning }), children: [helpText ? (jsxRuntime.jsxs("div", { className: "flex gap-1", children: [validationStateIcon, jsxRuntime.jsx("span", { "data-testid": dataTestId ? `${dataTestId}-helpText` : undefined, children: helpText })] })) : undefined, helpAddon ? (jsxRuntime.jsx("span", { className: cvaHelpAddon(), "data-testid": dataTestId ? `${dataTestId}-helpAddon` : null, children: helpAddon })) : null] })) : null] }));
 };
 
 /**
@@ -1564,6 +1564,7 @@ const cvaRadioItem = cssClassVarianceUtilities.cvaMerge([
     "hover:cursor-pointer",
     "hover:bg-slate-100",
     "focus-visible:outline-primary-700",
+    "outline-0",
 ], {
     variants: {
         checked: {
@@ -1571,10 +1572,9 @@ const cvaRadioItem = cssClassVarianceUtilities.cvaMerge([
                 "border-solid",
                 "border-4",
                 "border-primary-600",
-                "bg-white",
+                "bg-primary_contrasted",
                 "hover:bg-slate-100",
                 "hover:cursor-pointer",
-                "outline-0",
                 "active:bg-slate-200",
                 "active:ring-2",
                 "active:ring-inset",
@@ -1606,7 +1606,7 @@ const cvaRadioItem = cssClassVarianceUtilities.cvaMerge([
         {
             checked: true,
             disabled: true,
-            className: ["bg-white"],
+            className: ["bg-primary_contrasted"],
         },
     ],
 });
@@ -2797,7 +2797,7 @@ const cvaToggleSwitchTrack = cssClassVarianceUtilities.cvaMerge(["items-center",
         disabled: false,
     },
 });
-const cvaToggleSwitchThumb = cssClassVarianceUtilities.cvaMerge(["block", "rounded-full", "bg-white", "aspect-square", "translate-x-0", "transition-all"], {
+const cvaToggleSwitchThumb = cssClassVarianceUtilities.cvaMerge(["block", "rounded-full", "bg-primary_contrasted", "aspect-square", "translate-x-0", "transition-all"], {
     variants: {
         toggled: {
             true: "",

package/index.esm.js

@@ -617,7 +617,7 @@ const cvaCheckbox = cvaMerge([
     },
 });
 const cvaCheckboxInput = cvaMerge(["absolute", "opacity-0", "m-0", "pointer-events-none", "hidden"]);
-const cvaCheckboxIcon = cvaMerge(["w-2.5", "h-2.5", "text-white"]);
+const cvaCheckboxIcon = cvaMerge(["w-2.5", "h-2.5", "text-primary_contrasted"]);
 
 /**
  * The IndeterminateIcon component is used by the checkbox to display the Indeterminate state.
@@ -713,7 +713,7 @@ const FormGroup = ({ isInvalid, isWarning, helpText, helpAddon, tip, className,
         const color = isInvalid ? "danger" : isWarning ? "warning" : null;
         return color ? jsx(Icon, { color: color, name: "ExclamationTriangle", size: "small" }) : null;
     }, [isInvalid, isWarning]);
-    return (jsxs("div", { className: cvaFormGroup({ className }), "data-testid": dataTestId, children: [jsxs("div", { className: cvaFormGroupContainerBefore(), children: [label ? (jsxs(Fragment, { children: [jsx(Label, { className: "component-formGroup-font", dataTestId: dataTestId ? `${dataTestId}-label` : undefined, htmlFor: htmlFor, id: htmlFor + "-label", children: label }), required ? (jsx(Tooltip, { "data-testid": "required-asterisk", label: t("field.required.asterisk.tooltip"), children: "*" })) : null] })) : null, tip ? (jsx(Tooltip, { className: "ml-1", dataTestId: dataTestId ? `${dataTestId}-tooltip` : undefined, label: tip, placement: "bottom" })) : null] }), children, helpText || helpAddon ? (jsxs("div", { className: cvaFormGroupContainerAfter({ invalid: isInvalid, isWarning: isWarning }), children: [helpText ? (jsxs("div", { className: "flex gap-1", children: [validationStateIcon, jsx("span", { "data-testid": dataTestId ? `${dataTestId}-helpText` : undefined, children: helpText })] })) : undefined, helpAddon ? (jsx("span", { className: cvaHelpAddon(), "data-testid": dataTestId ? `${dataTestId}-helpAddon` : null, children: helpAddon })) : null] })) : null] }));
+    return (jsxs("div", { className: cvaFormGroup({ className }), "data-testid": dataTestId, children: [label || tip ? (jsxs("div", { className: cvaFormGroupContainerBefore(), children: [label ? (jsxs(Fragment, { children: [jsx(Label, { className: "component-formGroup-font", dataTestId: dataTestId ? `${dataTestId}-label` : undefined, htmlFor: htmlFor, id: htmlFor + "-label", children: label }), required ? (jsx(Tooltip, { "data-testid": "required-asterisk", label: t("field.required.asterisk.tooltip"), children: "*" })) : null] })) : null, tip ? (jsx(Tooltip, { className: "ml-1", dataTestId: dataTestId ? `${dataTestId}-tooltip` : undefined, label: tip, placement: "bottom" })) : null] })) : null, children, helpText || helpAddon ? (jsxs("div", { className: cvaFormGroupContainerAfter({ invalid: isInvalid, isWarning: isWarning }), children: [helpText ? (jsxs("div", { className: "flex gap-1", children: [validationStateIcon, jsx("span", { "data-testid": dataTestId ? `${dataTestId}-helpText` : undefined, children: helpText })] })) : undefined, helpAddon ? (jsx("span", { className: cvaHelpAddon(), "data-testid": dataTestId ? `${dataTestId}-helpAddon` : null, children: helpAddon })) : null] })) : null] }));
 };
 
 /**
@@ -1563,6 +1563,7 @@ const cvaRadioItem = cvaMerge([
     "hover:cursor-pointer",
     "hover:bg-slate-100",
     "focus-visible:outline-primary-700",
+    "outline-0",
 ], {
     variants: {
         checked: {
@@ -1570,10 +1571,9 @@ const cvaRadioItem = cvaMerge([
                 "border-solid",
                 "border-4",
                 "border-primary-600",
-                "bg-white",
+                "bg-primary_contrasted",
                 "hover:bg-slate-100",
                 "hover:cursor-pointer",
-                "outline-0",
                 "active:bg-slate-200",
                 "active:ring-2",
                 "active:ring-inset",
@@ -1605,7 +1605,7 @@ const cvaRadioItem = cvaMerge([
         {
             checked: true,
             disabled: true,
-            className: ["bg-white"],
+            className: ["bg-primary_contrasted"],
         },
     ],
 });
@@ -2796,7 +2796,7 @@ const cvaToggleSwitchTrack = cvaMerge(["items-center", "shrink-0", "rounded-full
         disabled: false,
     },
 });
-const cvaToggleSwitchThumb = cvaMerge(["block", "rounded-full", "bg-white", "aspect-square", "translate-x-0", "transition-all"], {
+const cvaToggleSwitchThumb = cvaMerge(["block", "rounded-full", "bg-primary_contrasted", "aspect-square", "translate-x-0", "transition-all"], {
     variants: {
         toggled: {
             true: "",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-form-components",
-  "version": "1.6.14",
+  "version": "1.6.16",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -17,14 +17,14 @@
     "zod": "^3.23.8",
     "react-hook-form": "7.62.0",
     "tailwind-merge": "^2.0.0",
-    "@trackunit/css-class-variance-utilities": "1.6.11",
-    "@trackunit/react-components": "1.7.13",
-    "@trackunit/ui-icons": "1.6.10",
-    "@trackunit/shared-utils": "1.8.11",
-    "@trackunit/ui-design-tokens": "1.6.11",
-    "@trackunit/i18n-library-translation": "1.6.11",
+    "@trackunit/css-class-variance-utilities": "1.6.12",
+    "@trackunit/react-components": "1.7.15",
+    "@trackunit/ui-icons": "1.6.11",
+    "@trackunit/shared-utils": "1.8.12",
+    "@trackunit/ui-design-tokens": "1.6.13",
+    "@trackunit/i18n-library-translation": "1.6.12",
     "string-ts": "^2.0.0",
-    "@trackunit/react-test-setup": "1.3.11"
+    "@trackunit/react-test-setup": "1.3.12"
   },
   "module": "./index.esm.js",
   "main": "./index.cjs.js",