@trackunit/react-form-components 1.1.1 → 1.2.0

package/index.cjs.js

@@ -464,10 +464,41 @@ const BaseInput = React.forwardRef(({ className, isInvalid, dataTestId, prefix,
 });
 BaseInput.displayName = "BaseInput";
 
+/**
+ * Shared CVA for binary control items: Checkbox, RadioItem, ToggleSwitchOption
+ */
+const cvaBinaryControlWrapper = cssClassVarianceUtilities.cvaMerge([
+    "grid-rows-subgrid", //* Children align to this parent grid
+    "grid-cols-min-fr", //* explicit horizontal placement for input and label/description
+    "auto-rows-auto", //* optional extra rows (suffix) will be auto-sized
+    "group",
+    "grid",
+    "gap-x-2",
+]);
+const cvaBinaryControlLabelTooltip = cssClassVarianceUtilities.cvaMerge(["col-start-2", "w-full", "self-center"]);
+const cvaBinaryControlDescriptionTooltip = cssClassVarianceUtilities.cvaMerge(["col-span-2", "col-start-2", "row-start-2", "w-full"]);
+const cvaBinaryControlDescription = cssClassVarianceUtilities.cvaMerge([
+    "text-sm",
+    "font-normal",
+    "text-slate-500",
+    "text-left",
+    "whitespace-nowrap",
+    "select-none",
+    "text-ellipsis",
+    "overflow-hidden",
+], {
+    variants: {
+        disabled: {
+            true: ["text-slate-400", "hover:text-slate-400", "group-hover:text-slate-400"],
+            false: "",
+        },
+    },
+});
+const cvaBinaryControlSuffixContainer = cssClassVarianceUtilities.cvaMerge(["flex", "col-start-3", "items-center"]);
+
 const cvaLabel = cssClassVarianceUtilities.cvaMerge([
     "text-sm",
     "text-slate-700",
-    "truncate",
     "hover:text-slate-800",
     "group-hover:text-slate-800",
     "active:text-slate-800",
@@ -479,13 +510,18 @@ const cvaLabel = cssClassVarianceUtilities.cvaMerge([
             false: "",
         },
         disabled: {
-            true: "text-slate-400 hover:text-slate-400 group-hover:text-slate-400",
+            true: "text-slate-400 hover:text-slate-400 active:text-slate-400 group-hover:text-slate-400 group-active:text-slate-400",
+            false: "",
+        },
+        truncate: {
+            true: "truncate",
             false: "",
         },
     },
     defaultVariants: {
         invalid: false,
         disabled: false,
+        truncate: true,
     },
 });
 
@@ -596,14 +632,6 @@ const cvaCheckbox = cssClassVarianceUtilities.cvaMerge([
         state: "deselected",
     },
 });
-const cvaCheckboxContainer = cssClassVarianceUtilities.cvaMerge([
-    "items-center",
-    "gap-2",
-    "group",
-    "grid",
-    "grid-cols-min-fr",
-    "has-[:nth-child(3)]:grid-cols-min-fr-min", //if there's 3 children
-]);
 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"]);
 
@@ -629,9 +657,9 @@ const IndeterminateIcon = ({ className }) => (jsxRuntime.jsx("svg", { className:
  * @param {CheckboxProps} props - The props for the Checkbox component
  * @returns {JSX.Element} Checkbox component
  */
-const Checkbox = React__namespace.forwardRef(({ className, dataTestId = "checkbox", onChange, checked = false, disabled = false, isInvalid = false, readOnly, indeterminate = false, suffix, label, tabIndex = 0, stopPropagation, ...rest }, ref) => {
+const Checkbox = React.forwardRef(({ className, dataTestId = "checkbox", onChange, checked = false, disabled = false, isInvalid = false, readOnly, indeterminate = false, suffix, label, tabIndex = 0, stopPropagation, ...rest }, ref) => {
     const icon = indeterminate ? (jsxRuntime.jsx(IndeterminateIcon, { className: cvaCheckboxIcon() })) : (checked && jsxRuntime.jsx(CheckIcon, { className: cvaCheckboxIcon() }));
-    const internalRef = React__namespace.useRef(null);
+    const internalRef = React.useRef(null);
     const { isTextTruncated: isLabelCutOff, ref: labelRef } = reactComponents.useIsTextTruncated();
     const isReadonly = disabled || readOnly;
     const onKeyPress = e => {
@@ -644,14 +672,14 @@ const Checkbox = React__namespace.forwardRef(({ className, dataTestId = "checkbo
         }
     };
     const uuid = rest.id;
-    return (jsxRuntime.jsxs("label", { className: cvaCheckboxContainer({ className }), "data-testid": dataTestId ? `${dataTestId}-container` : null, htmlFor: uuid, onClick: e => stopPropagation && e.stopPropagation(), onKeyDown: onKeyPress, ref: internalRef, children: [jsxRuntime.jsx("input", { "aria-checked": !indeterminate && checked, checked: !indeterminate && checked, className: cvaCheckboxInput(), "data-testid": dataTestId, disabled: disabled, id: uuid, onChange: onChange, readOnly: readOnly, type: "checkbox", ...rest, ref: ref }), jsxRuntime.jsx("span", { className: cvaCheckbox({
-                    disabled: isReadonly,
-                    invalid: isReadonly ? false : isInvalid,
-                    state: indeterminate ? "indeterminate" : checked ? "selected" : "deselected",
-                }), id: uuid, tabIndex: isReadonly ? -1 : tabIndex, children: icon }), jsxRuntime.jsx(reactComponents.Tooltip, { className: "w-full", disabled: !isLabelCutOff, label: label, placement: "top", children: jsxRuntime.jsx("span", { className: cvaLabel({
+    return (jsxRuntime.jsxs("label", { className: cvaBinaryControlWrapper({ className }), "data-testid": dataTestId ? `${dataTestId}-container` : null, htmlFor: uuid, onClick: e => stopPropagation && e.stopPropagation(), onKeyDown: onKeyPress, ref: internalRef, children: [jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("input", { "aria-checked": !indeterminate && checked, checked: !indeterminate && checked, className: cvaCheckboxInput(), "data-testid": dataTestId, disabled: disabled, id: uuid, onChange: onChange, readOnly: readOnly, type: "checkbox", ...rest, ref: ref }), jsxRuntime.jsx("span", { className: cvaCheckbox({
+                            disabled: isReadonly,
+                            invalid: isReadonly ? false : isInvalid,
+                            state: indeterminate ? "indeterminate" : checked ? "selected" : "deselected",
+                        }), id: uuid, tabIndex: isReadonly ? -1 : tabIndex, children: icon })] }), 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), suffix] }));
+                    }), id: `checkbox-label-${label}`, ref: labelRef, children: label }) }, "tooltip-" + rest.name), suffix ? (jsxRuntime.jsx("div", { className: cvaBinaryControlSuffixContainer(), "data-testid": dataTestId ? `${dataTestId}-suffix-container` : undefined, children: suffix })) : null] }));
 });
 Checkbox.displayName = "Checkbox";
 
@@ -1495,25 +1523,6 @@ const cvaRadioItem = cssClassVarianceUtilities.cvaMerge([
         },
     ],
 });
-const cvaRadioItemWrapper = cssClassVarianceUtilities.cvaMerge([
-    "grid-rows-subgrid", //* Children align to this parent grid
-    "grid-cols-min-fr", //* explicit horizontal placement for input and label/description
-    "auto-rows-auto", //* optional extra rows (suffix) will be auto-sized
-    "group",
-    "grid",
-    "gap-x-2",
-]);
-const cvaRadioItemDescription = cssClassVarianceUtilities.cvaMerge(["text-sm", "font-normal", "text-slate-500", "text-left", "whitespace-nowrap", "text-ellipsis", "overflow-hidden"], {
-    variants: {
-        disabled: {
-            true: ["text-slate-400", "hover:text-slate-400", "group-hover:text-slate-400"],
-            false: "",
-        },
-    },
-});
-const cvaLabelTooltip = cssClassVarianceUtilities.cvaMerge(["col-start-2", "w-full", "self-center"]);
-const cvaDescriptionTooltip = cssClassVarianceUtilities.cvaMerge(["col-span-2", "col-start-2", "row-start-2", "w-full"]);
-const cvaSuffixContainer = cssClassVarianceUtilities.cvaMerge(["flex", "col-start-3", "items-center"]);
 
 const RadioGroupContext = React__namespace.createContext(null);
 
@@ -1554,14 +1563,14 @@ const RadioItem = ({ label, value, dataTestId, className, description, suffix, .
     const { ref: descriptionRef, isTextTruncated: isDescriptionTruncated } = reactComponents.useIsTextTruncated();
     const descriptionId = description ? `${groupCtx?.id}-${value}-description` : undefined;
     const inputId = `${groupCtx?.id}-${value}`;
-    return (jsxRuntime.jsxs("label", { className: cvaRadioItemWrapper({ className }), "data-testid": dataTestId ? `${dataTestId}-Wrapper` : undefined, htmlFor: inputId, children: [jsxRuntime.jsx("input", { "aria-describedby": descriptionId, checked: isChecked, className: cvaRadioItem({
+    return (jsxRuntime.jsxs("label", { className: cvaBinaryControlWrapper({ className }), "data-testid": dataTestId ? `${dataTestId}-Wrapper` : undefined, htmlFor: inputId, 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 }), jsxRuntime.jsx(reactComponents.Tooltip, { className: cvaLabelTooltip(), dataTestId: dataTestId ? `${dataTestId}-Label-Tooltip` : undefined, disabled: !isLabelTruncated, label: label, placement: "top", children: jsxRuntime.jsx("span", { className: cvaLabel({
+                }), "data-testid": dataTestId, id: inputId, onChange: groupCtx?.onChange, type: "radio", value: value, ...rest }), jsxRuntime.jsx(reactComponents.Tooltip, { className: cvaBinaryControlLabelTooltip(), dataTestId: 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), suffix ? (jsxRuntime.jsx("div", { className: cvaSuffixContainer(), "data-testid": dataTestId ? `${dataTestId}-suffix-container` : undefined, children: suffix })) : null, description ? (jsxRuntime.jsx(reactComponents.Tooltip, { className: cvaDescriptionTooltip(), dataTestId: dataTestId ? `${dataTestId}-Description-Tooltip` : undefined, disabled: !isDescriptionTruncated, label: description, placement: "top", children: jsxRuntime.jsx("span", { className: cvaRadioItemDescription({ 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), suffix ? (jsxRuntime.jsx("div", { className: cvaBinaryControlSuffixContainer(), "data-testid": dataTestId ? `${dataTestId}-suffix-container` : undefined, children: suffix })) : null, description ? (jsxRuntime.jsx(reactComponents.Tooltip, { className: cvaBinaryControlDescriptionTooltip(), dataTestId: 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([
@@ -2615,9 +2624,9 @@ const TimeRangeField = ({ className, dataTestId, onChange, isInvalid, errorMessa
     return (jsxRuntime.jsx(FormGroup, { dataTestId: dataTestId ? `${dataTestId}-FormGroup` : undefined, helpText: (renderAsInvalid && errorMessage) || helpText, htmlFor: htmlFor, isInvalid: renderAsInvalid, label: label, tip: tip, children: jsxRuntime.jsx(TimeRange, { className: className, dataTestId: dataTestId, isInvalid: renderAsInvalid, onChange: onChange, ...rest, children: children }) }));
 };
 
-const cvaToggleWrapper = cssClassVarianceUtilities.cvaMerge(["flex", "gap-2", "items-center"]);
-cssClassVarianceUtilities.cvaMerge(["relative"]);
-const cvaToggleTrack = cssClassVarianceUtilities.cvaMerge(["shrink-0", "cursor-pointer", "rounded-full", "bg-slate-300", "hover:bg-slate-400", "active:bg-slate-500"], {
+const cvaToggleSwitchWrapper = cssClassVarianceUtilities.cvaMerge(["grid", "grid-cols-[auto]", "items-center"]);
+const cvaToggleSwitchInput = cssClassVarianceUtilities.cvaMerge(["absolute", "pointer-events-none", "w-0", "h-0", "opacity-0"]);
+const cvaToggleSwitchTrack = cssClassVarianceUtilities.cvaMerge(["items-center", "shrink-0", "rounded-full"], {
     variants: {
         size: {
             small: ["w-5", "p-0.5"],
@@ -2625,13 +2634,18 @@ const cvaToggleTrack = cssClassVarianceUtilities.cvaMerge(["shrink-0", "cursor-p
             large: ["w-[38px]", "p-[3px]"],
         },
         disabled: {
-            true: ["cursor-not-allowed", "pointer-events-none", "bg-slate-200"],
-            false: "",
+            true: ["cursor-not-allowed", "bg-slate-200"],
+            false: ["cursor-pointer", "bg-slate-300", "hover:bg-slate-400", "active:bg-slate-500"],
         },
         toggled: {
-            true: ["bg-primary-600", "hover:bg-primary-700", "active:bg-primary-800"],
+            true: "", // classes moved to compoundVariants to avoid conflicts with the disabled variant
             false: "",
         },
+        focused: {
+            true: "outline-native",
+            false: "outline-0",
+            auto: "[&:has(:focus-visible)]:outline-native",
+        },
     },
     compoundVariants: [
         {
@@ -2639,12 +2653,19 @@ const cvaToggleTrack = cssClassVarianceUtilities.cvaMerge(["shrink-0", "cursor-p
             toggled: true,
             className: ["bg-slate-400"],
         },
+        {
+            disabled: false,
+            toggled: true,
+            className: ["hover:bg-primary-700", "active:bg-primary-800", "bg-primary-600"],
+        },
     ],
     defaultVariants: {
         size: "medium",
+        focused: "auto",
+        disabled: false,
     },
 });
-const cvaToggleThumb = cssClassVarianceUtilities.cvaMerge(["block", "rounded-full", "bg-white", "aspect-square", "translate-x-0", "transition-all"], {
+const cvaToggleSwitchThumb = cssClassVarianceUtilities.cvaMerge(["block", "rounded-full", "bg-white", "aspect-square", "translate-x-0", "transition-all"], {
     variants: {
         toggled: {
             true: "",
@@ -2675,38 +2696,70 @@ const cvaToggleThumb = cssClassVarianceUtilities.cvaMerge(["block", "rounded-ful
     ],
     defaultVariants: {},
 });
-const cvaToggleInput = cssClassVarianceUtilities.cvaMerge(["absolute", "opacity-0", "-z-10"]);
-const cvaToggleLabelContainer = cssClassVarianceUtilities.cvaMerge(["grid", "gap-1"]);
-const cvaToggleLabel = cssClassVarianceUtilities.cvaMerge([]);
-const cvaToggleDescription = cssClassVarianceUtilities.cvaMerge(["text-sm", "font-normal", "text-slate-500", "text-left", "whitespace-nowrap", "text-ellipsis", "overflow-hidden"], {
-    variants: {
-        disabled: {
-            true: "text-slate-400 hover:text-slate-400 group-hover:text-slate-400",
-            false: "",
-        },
-    },
+
+/**
+ * A checkbox input wrapper with role="switch". Used as an input element for **ToggleSwitchOption**
+ * or custom components.
+ *
+ * Not intended for standalone use.
+ *
+ * @param {ToggleSwitchProps} props - The props for the ToggleSwitch component
+ * @returns {ReactElement} ToggleSwitch component
+ */
+const ToggleSwitch = React.forwardRef(({ onChange, onClick, preventDefaultOnClick, className, dataTestId = "toggle-switch", showInputFocus, toggled, size = "medium", tabIndex = 0, readOnly, disabled, ...rest }, ref) => {
+    const localInputRef = React.useRef(null);
+    const inputRef = typeof ref === "function" ? localInputRef : ref || localInputRef;
+    const handleWrapperClick = (e) => {
+        // 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();
+        }
+        onClick?.(e);
+    };
+    const handleKeyPress = e => {
+        if (e.code === "Enter") {
+            e.preventDefault();
+            !readOnly && inputRef.current?.click();
+        }
+        // Space key is already supported natively by the input element
+    };
+    const handleInputChange = (e) => {
+        if (readOnly || disabled) {
+            return;
+        }
+        e.stopPropagation();
+        onChange?.(!toggled, e);
+    };
+    return (jsxRuntime.jsx("span", { className: cvaToggleSwitchWrapper({ className }), "data-testid": `${dataTestId}`, onClick: handleWrapperClick, onKeyDown: handleKeyPress, children: jsxRuntime.jsxs("span", { className: cvaToggleSwitchTrack({
+                toggled,
+                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", type: "checkbox", ...rest })] }) }));
 });
+ToggleSwitch.displayName = "ToggleSwitch";
 
 /**
- * Use Toggle when you have to only enable/disable a feature.
+ * Use ToggleSwitchOption when you have to only enable/disable a feature.
+ * Wrapper component for ToggleSwitch.
  *
- * _**Do use** Toggle in forms or settings._
+ * _**Do use** ToggleSwitchOption in forms or settings._
  *
- * _**Do not use** Toggle if a user can select many option from a list, use checkboxes instead of toggle._
+ * _**Do not use** ToggleSwitchOption if a user can select multiple options from a list, use checkboxes instead of toggle._
  *
- * @param {ToggleProps} props - The props for the Toggle component
- * @returns {JSX.Element} Toggle component
+ * @param {ToggleSwitchOptionProps} props - The props for the ToggleSwitchOption component
+ * @returns {ReactElement} ToggleSwitchOption component
  */
-const Toggle = React__namespace.forwardRef(({ toggled = false, onChange, onClick, disabled, size = "medium", id, tabIndex, required, className, dataTestId = "toggle", onBlur, name, description = "", }, ref) => {
-    const showLabelContainer = Boolean(name || description);
-    const showDescription = Boolean(description);
-    const getTestId = (suffix) => `${dataTestId}-${suffix}`;
-    return (jsxRuntime.jsx("span", { className: className, "data-testid": getTestId("outer-wrapper"), onClick: onClick, children: jsxRuntime.jsxs("label", { className: cvaToggleWrapper(), "data-testid": getTestId("wrapper"), htmlFor: id, children: [jsxRuntime.jsx("span", { className: cvaToggleTrack({ disabled, size, toggled }), "data-testid": getTestId("track"), children: jsxRuntime.jsx("span", { className: cvaToggleThumb({ toggled, size }), "data-testid": getTestId("thumb") }) }), showLabelContainer ? (jsxRuntime.jsxs("span", { className: cvaToggleLabelContainer(), "data-testid": getTestId("label-container"), children: [jsxRuntime.jsx(Label, { className: cvaToggleLabel(), "data-testid": getTestId("label"), disabled: disabled, children: name }), showDescription ? (jsxRuntime.jsx("span", { className: cvaToggleDescription({ disabled }), "data-testid": getTestId("description"), children: description })) : null] })) : null, jsxRuntime.jsx("input", { "aria-checked": toggled, checked: toggled, className: cvaToggleInput(), "data-testid": getTestId("input"), disabled: disabled, id: id, name: name, onBlur: onBlur, onChange: e => {
-                        e.stopPropagation();
-                        onChange(!toggled, e);
-                    }, ref: ref, required: required, tabIndex: tabIndex, type: "checkbox" })] }) }));
-});
-Toggle.displayName = "Toggle";
+const ToggleSwitchOption = ({ label, className, description, suffix, id, dataTestId = "toggle-switch-option", ...rest }) => {
+    const { ref: labelRef, isTextTruncated: isLabelTruncated } = reactComponents.useIsTextTruncated();
+    const { ref: descriptionRef, isTextTruncated: isDescriptionTruncated } = reactComponents.useIsTextTruncated();
+    return (jsxRuntime.jsxs("label", { className: cvaBinaryControlWrapper({ className }), "data-testid": dataTestId, htmlFor: `${id}-toggle-switch`, tabIndex: -1, children: [jsxRuntime.jsx(ToggleSwitch, { dataTestId: `${dataTestId}-switcher`, id: `${id}-toggle-switch`, ...rest }), jsxRuntime.jsx(reactComponents.Tooltip, { className: cvaBinaryControlLabelTooltip(), dataTestId: `${dataTestId}-label-tooltip`, disabled: !isLabelTruncated, label: label, placement: "top", children: jsxRuntime.jsx("span", { className: cvaLabel({
+                        disabled: rest.disabled || rest.readOnly,
+                        className: "select-none",
+                    }), "data-testid": `${dataTestId}-label`, ref: labelRef, children: label }) }, `${id}-label-tooltip`), suffix ? (jsxRuntime.jsx("div", { className: cvaBinaryControlSuffixContainer(), "data-testid": `${dataTestId}-suffix-container`, children: suffix })) : null, description ? (jsxRuntime.jsx(reactComponents.Tooltip, { className: cvaBinaryControlDescriptionTooltip(), dataTestId: `${dataTestId}-description-tooltip`, disabled: !isDescriptionTruncated, label: description, placement: "top", children: jsxRuntime.jsx("span", { className: cvaBinaryControlDescription({ disabled: rest.disabled || rest.readOnly }), "data-testid": `${dataTestId}-description`, id: `${id}-description`, ref: descriptionRef, children: description }) }, `${id}-description-tooltip`)) : null] }));
+};
+ToggleSwitchOption.displayName = "ToggleSwitchOption";
 
 const cvaUploadInputField = cssClassVarianceUtilities.cvaMerge([
     "px-0",
@@ -2962,7 +3015,8 @@ exports.TextField = TextField;
 exports.TextInput = TextInput;
 exports.TimeRange = TimeRange;
 exports.TimeRangeField = TimeRangeField;
-exports.Toggle = Toggle;
+exports.ToggleSwitch = ToggleSwitch;
+exports.ToggleSwitchOption = ToggleSwitchOption;
 exports.UploadField = UploadField;
 exports.UploadInput = UploadInput;
 exports.UrlField = UrlField;
@@ -2981,6 +3035,7 @@ exports.cvaInputField = cvaInputField;
 exports.cvaInputItemPlacementManager = cvaInputItemPlacementManager;
 exports.cvaInputPrefix = cvaInputPrefix;
 exports.cvaInputSuffix = cvaInputSuffix;
+exports.cvaLabel = cvaLabel;
 exports.cvaSelect = cvaSelect;
 exports.cvaSelectControl = cvaSelectControl;
 exports.cvaSelectCounter = cvaSelectCounter;

package/index.esm.js

@@ -445,10 +445,41 @@ const BaseInput = forwardRef(({ className, isInvalid, dataTestId, prefix, suffix
 });
 BaseInput.displayName = "BaseInput";
 
+/**
+ * Shared CVA for binary control items: Checkbox, RadioItem, ToggleSwitchOption
+ */
+const cvaBinaryControlWrapper = cvaMerge([
+    "grid-rows-subgrid", //* Children align to this parent grid
+    "grid-cols-min-fr", //* explicit horizontal placement for input and label/description
+    "auto-rows-auto", //* optional extra rows (suffix) will be auto-sized
+    "group",
+    "grid",
+    "gap-x-2",
+]);
+const cvaBinaryControlLabelTooltip = cvaMerge(["col-start-2", "w-full", "self-center"]);
+const cvaBinaryControlDescriptionTooltip = cvaMerge(["col-span-2", "col-start-2", "row-start-2", "w-full"]);
+const cvaBinaryControlDescription = cvaMerge([
+    "text-sm",
+    "font-normal",
+    "text-slate-500",
+    "text-left",
+    "whitespace-nowrap",
+    "select-none",
+    "text-ellipsis",
+    "overflow-hidden",
+], {
+    variants: {
+        disabled: {
+            true: ["text-slate-400", "hover:text-slate-400", "group-hover:text-slate-400"],
+            false: "",
+        },
+    },
+});
+const cvaBinaryControlSuffixContainer = cvaMerge(["flex", "col-start-3", "items-center"]);
+
 const cvaLabel = cvaMerge([
     "text-sm",
     "text-slate-700",
-    "truncate",
     "hover:text-slate-800",
     "group-hover:text-slate-800",
     "active:text-slate-800",
@@ -460,13 +491,18 @@ const cvaLabel = cvaMerge([
             false: "",
         },
         disabled: {
-            true: "text-slate-400 hover:text-slate-400 group-hover:text-slate-400",
+            true: "text-slate-400 hover:text-slate-400 active:text-slate-400 group-hover:text-slate-400 group-active:text-slate-400",
+            false: "",
+        },
+        truncate: {
+            true: "truncate",
             false: "",
         },
     },
     defaultVariants: {
         invalid: false,
         disabled: false,
+        truncate: true,
     },
 });
 
@@ -577,14 +613,6 @@ const cvaCheckbox = cvaMerge([
         state: "deselected",
     },
 });
-const cvaCheckboxContainer = cvaMerge([
-    "items-center",
-    "gap-2",
-    "group",
-    "grid",
-    "grid-cols-min-fr",
-    "has-[:nth-child(3)]:grid-cols-min-fr-min", //if there's 3 children
-]);
 const cvaCheckboxInput = cvaMerge(["absolute", "opacity-0", "m-0", "pointer-events-none", "hidden"]);
 const cvaCheckboxIcon = cvaMerge(["w-2.5", "h-2.5", "text-white"]);
 
@@ -610,9 +638,9 @@ const IndeterminateIcon = ({ className }) => (jsx("svg", { className: className,
  * @param {CheckboxProps} props - The props for the Checkbox component
  * @returns {JSX.Element} Checkbox component
  */
-const Checkbox = React.forwardRef(({ className, dataTestId = "checkbox", onChange, checked = false, disabled = false, isInvalid = false, readOnly, indeterminate = false, suffix, label, tabIndex = 0, stopPropagation, ...rest }, ref) => {
+const Checkbox = forwardRef(({ className, dataTestId = "checkbox", onChange, checked = false, disabled = false, isInvalid = false, readOnly, indeterminate = false, suffix, label, tabIndex = 0, stopPropagation, ...rest }, ref) => {
     const icon = indeterminate ? (jsx(IndeterminateIcon, { className: cvaCheckboxIcon() })) : (checked && jsx(CheckIcon, { className: cvaCheckboxIcon() }));
-    const internalRef = React.useRef(null);
+    const internalRef = useRef(null);
     const { isTextTruncated: isLabelCutOff, ref: labelRef } = useIsTextTruncated();
     const isReadonly = disabled || readOnly;
     const onKeyPress = e => {
@@ -625,14 +653,14 @@ const Checkbox = React.forwardRef(({ className, dataTestId = "checkbox", onChang
         }
     };
     const uuid = rest.id;
-    return (jsxs("label", { className: cvaCheckboxContainer({ className }), "data-testid": dataTestId ? `${dataTestId}-container` : null, htmlFor: uuid, onClick: e => stopPropagation && e.stopPropagation(), onKeyDown: onKeyPress, ref: internalRef, children: [jsx("input", { "aria-checked": !indeterminate && checked, checked: !indeterminate && checked, className: cvaCheckboxInput(), "data-testid": dataTestId, disabled: disabled, id: uuid, onChange: onChange, readOnly: readOnly, type: "checkbox", ...rest, ref: ref }), jsx("span", { className: cvaCheckbox({
-                    disabled: isReadonly,
-                    invalid: isReadonly ? false : isInvalid,
-                    state: indeterminate ? "indeterminate" : checked ? "selected" : "deselected",
-                }), id: uuid, tabIndex: isReadonly ? -1 : tabIndex, children: icon }), jsx(Tooltip, { className: "w-full", disabled: !isLabelCutOff, label: label, placement: "top", children: jsx("span", { className: cvaLabel({
+    return (jsxs("label", { className: cvaBinaryControlWrapper({ className }), "data-testid": dataTestId ? `${dataTestId}-container` : null, htmlFor: uuid, onClick: e => stopPropagation && e.stopPropagation(), onKeyDown: onKeyPress, ref: internalRef, children: [jsxs("div", { children: [jsx("input", { "aria-checked": !indeterminate && checked, checked: !indeterminate && checked, className: cvaCheckboxInput(), "data-testid": dataTestId, disabled: disabled, id: uuid, onChange: onChange, readOnly: readOnly, type: "checkbox", ...rest, ref: ref }), jsx("span", { className: cvaCheckbox({
+                            disabled: isReadonly,
+                            invalid: isReadonly ? false : isInvalid,
+                            state: indeterminate ? "indeterminate" : checked ? "selected" : "deselected",
+                        }), id: uuid, tabIndex: isReadonly ? -1 : tabIndex, children: icon })] }), 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), suffix] }));
+                    }), id: `checkbox-label-${label}`, ref: labelRef, children: label }) }, "tooltip-" + rest.name), suffix ? (jsx("div", { className: cvaBinaryControlSuffixContainer(), "data-testid": dataTestId ? `${dataTestId}-suffix-container` : undefined, children: suffix })) : null] }));
 });
 Checkbox.displayName = "Checkbox";
 
@@ -1476,25 +1504,6 @@ const cvaRadioItem = cvaMerge([
         },
     ],
 });
-const cvaRadioItemWrapper = cvaMerge([
-    "grid-rows-subgrid", //* Children align to this parent grid
-    "grid-cols-min-fr", //* explicit horizontal placement for input and label/description
-    "auto-rows-auto", //* optional extra rows (suffix) will be auto-sized
-    "group",
-    "grid",
-    "gap-x-2",
-]);
-const cvaRadioItemDescription = cvaMerge(["text-sm", "font-normal", "text-slate-500", "text-left", "whitespace-nowrap", "text-ellipsis", "overflow-hidden"], {
-    variants: {
-        disabled: {
-            true: ["text-slate-400", "hover:text-slate-400", "group-hover:text-slate-400"],
-            false: "",
-        },
-    },
-});
-const cvaLabelTooltip = cvaMerge(["col-start-2", "w-full", "self-center"]);
-const cvaDescriptionTooltip = cvaMerge(["col-span-2", "col-start-2", "row-start-2", "w-full"]);
-const cvaSuffixContainer = cvaMerge(["flex", "col-start-3", "items-center"]);
 
 const RadioGroupContext = React.createContext(null);
 
@@ -1535,14 +1544,14 @@ const RadioItem = ({ label, value, dataTestId, className, description, suffix, .
     const { ref: descriptionRef, isTextTruncated: isDescriptionTruncated } = useIsTextTruncated();
     const descriptionId = description ? `${groupCtx?.id}-${value}-description` : undefined;
     const inputId = `${groupCtx?.id}-${value}`;
-    return (jsxs("label", { className: cvaRadioItemWrapper({ className }), "data-testid": dataTestId ? `${dataTestId}-Wrapper` : undefined, htmlFor: inputId, children: [jsx("input", { "aria-describedby": descriptionId, checked: isChecked, className: cvaRadioItem({
+    return (jsxs("label", { className: cvaBinaryControlWrapper({ className }), "data-testid": dataTestId ? `${dataTestId}-Wrapper` : undefined, htmlFor: inputId, 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 }), jsx(Tooltip, { className: cvaLabelTooltip(), dataTestId: dataTestId ? `${dataTestId}-Label-Tooltip` : undefined, disabled: !isLabelTruncated, label: label, placement: "top", children: jsx("span", { className: cvaLabel({
+                }), "data-testid": dataTestId, id: inputId, onChange: groupCtx?.onChange, type: "radio", value: value, ...rest }), jsx(Tooltip, { className: cvaBinaryControlLabelTooltip(), dataTestId: 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), suffix ? (jsx("div", { className: cvaSuffixContainer(), "data-testid": dataTestId ? `${dataTestId}-suffix-container` : undefined, children: suffix })) : null, description ? (jsx(Tooltip, { className: cvaDescriptionTooltip(), dataTestId: dataTestId ? `${dataTestId}-Description-Tooltip` : undefined, disabled: !isDescriptionTruncated, label: description, placement: "top", children: jsx("span", { className: cvaRadioItemDescription({ 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), suffix ? (jsx("div", { className: cvaBinaryControlSuffixContainer(), "data-testid": dataTestId ? `${dataTestId}-suffix-container` : undefined, children: suffix })) : null, description ? (jsx(Tooltip, { className: cvaBinaryControlDescriptionTooltip(), dataTestId: 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([
@@ -2596,9 +2605,9 @@ const TimeRangeField = ({ className, dataTestId, onChange, isInvalid, errorMessa
     return (jsx(FormGroup, { dataTestId: dataTestId ? `${dataTestId}-FormGroup` : undefined, helpText: (renderAsInvalid && errorMessage) || helpText, htmlFor: htmlFor, isInvalid: renderAsInvalid, label: label, tip: tip, children: jsx(TimeRange, { className: className, dataTestId: dataTestId, isInvalid: renderAsInvalid, onChange: onChange, ...rest, children: children }) }));
 };
 
-const cvaToggleWrapper = cvaMerge(["flex", "gap-2", "items-center"]);
-cvaMerge(["relative"]);
-const cvaToggleTrack = cvaMerge(["shrink-0", "cursor-pointer", "rounded-full", "bg-slate-300", "hover:bg-slate-400", "active:bg-slate-500"], {
+const cvaToggleSwitchWrapper = cvaMerge(["grid", "grid-cols-[auto]", "items-center"]);
+const cvaToggleSwitchInput = cvaMerge(["absolute", "pointer-events-none", "w-0", "h-0", "opacity-0"]);
+const cvaToggleSwitchTrack = cvaMerge(["items-center", "shrink-0", "rounded-full"], {
     variants: {
         size: {
             small: ["w-5", "p-0.5"],
@@ -2606,13 +2615,18 @@ const cvaToggleTrack = cvaMerge(["shrink-0", "cursor-pointer", "rounded-full", "
             large: ["w-[38px]", "p-[3px]"],
         },
         disabled: {
-            true: ["cursor-not-allowed", "pointer-events-none", "bg-slate-200"],
-            false: "",
+            true: ["cursor-not-allowed", "bg-slate-200"],
+            false: ["cursor-pointer", "bg-slate-300", "hover:bg-slate-400", "active:bg-slate-500"],
         },
         toggled: {
-            true: ["bg-primary-600", "hover:bg-primary-700", "active:bg-primary-800"],
+            true: "", // classes moved to compoundVariants to avoid conflicts with the disabled variant
             false: "",
         },
+        focused: {
+            true: "outline-native",
+            false: "outline-0",
+            auto: "[&:has(:focus-visible)]:outline-native",
+        },
     },
     compoundVariants: [
         {
@@ -2620,12 +2634,19 @@ const cvaToggleTrack = cvaMerge(["shrink-0", "cursor-pointer", "rounded-full", "
             toggled: true,
             className: ["bg-slate-400"],
         },
+        {
+            disabled: false,
+            toggled: true,
+            className: ["hover:bg-primary-700", "active:bg-primary-800", "bg-primary-600"],
+        },
     ],
     defaultVariants: {
         size: "medium",
+        focused: "auto",
+        disabled: false,
     },
 });
-const cvaToggleThumb = cvaMerge(["block", "rounded-full", "bg-white", "aspect-square", "translate-x-0", "transition-all"], {
+const cvaToggleSwitchThumb = cvaMerge(["block", "rounded-full", "bg-white", "aspect-square", "translate-x-0", "transition-all"], {
     variants: {
         toggled: {
             true: "",
@@ -2656,38 +2677,70 @@ const cvaToggleThumb = cvaMerge(["block", "rounded-full", "bg-white", "aspect-sq
     ],
     defaultVariants: {},
 });
-const cvaToggleInput = cvaMerge(["absolute", "opacity-0", "-z-10"]);
-const cvaToggleLabelContainer = cvaMerge(["grid", "gap-1"]);
-const cvaToggleLabel = cvaMerge([]);
-const cvaToggleDescription = cvaMerge(["text-sm", "font-normal", "text-slate-500", "text-left", "whitespace-nowrap", "text-ellipsis", "overflow-hidden"], {
-    variants: {
-        disabled: {
-            true: "text-slate-400 hover:text-slate-400 group-hover:text-slate-400",
-            false: "",
-        },
-    },
+
+/**
+ * A checkbox input wrapper with role="switch". Used as an input element for **ToggleSwitchOption**
+ * or custom components.
+ *
+ * Not intended for standalone use.
+ *
+ * @param {ToggleSwitchProps} props - The props for the ToggleSwitch component
+ * @returns {ReactElement} ToggleSwitch component
+ */
+const ToggleSwitch = forwardRef(({ onChange, onClick, preventDefaultOnClick, className, dataTestId = "toggle-switch", showInputFocus, toggled, size = "medium", tabIndex = 0, readOnly, disabled, ...rest }, ref) => {
+    const localInputRef = useRef(null);
+    const inputRef = typeof ref === "function" ? localInputRef : ref || localInputRef;
+    const handleWrapperClick = (e) => {
+        // 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();
+        }
+        onClick?.(e);
+    };
+    const handleKeyPress = e => {
+        if (e.code === "Enter") {
+            e.preventDefault();
+            !readOnly && inputRef.current?.click();
+        }
+        // Space key is already supported natively by the input element
+    };
+    const handleInputChange = (e) => {
+        if (readOnly || disabled) {
+            return;
+        }
+        e.stopPropagation();
+        onChange?.(!toggled, e);
+    };
+    return (jsx("span", { className: cvaToggleSwitchWrapper({ className }), "data-testid": `${dataTestId}`, onClick: handleWrapperClick, onKeyDown: handleKeyPress, children: jsxs("span", { className: cvaToggleSwitchTrack({
+                toggled,
+                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", type: "checkbox", ...rest })] }) }));
 });
+ToggleSwitch.displayName = "ToggleSwitch";
 
 /**
- * Use Toggle when you have to only enable/disable a feature.
+ * Use ToggleSwitchOption when you have to only enable/disable a feature.
+ * Wrapper component for ToggleSwitch.
  *
- * _**Do use** Toggle in forms or settings._
+ * _**Do use** ToggleSwitchOption in forms or settings._
  *
- * _**Do not use** Toggle if a user can select many option from a list, use checkboxes instead of toggle._
+ * _**Do not use** ToggleSwitchOption if a user can select multiple options from a list, use checkboxes instead of toggle._
  *
- * @param {ToggleProps} props - The props for the Toggle component
- * @returns {JSX.Element} Toggle component
+ * @param {ToggleSwitchOptionProps} props - The props for the ToggleSwitchOption component
+ * @returns {ReactElement} ToggleSwitchOption component
  */
-const Toggle = React.forwardRef(({ toggled = false, onChange, onClick, disabled, size = "medium", id, tabIndex, required, className, dataTestId = "toggle", onBlur, name, description = "", }, ref) => {
-    const showLabelContainer = Boolean(name || description);
-    const showDescription = Boolean(description);
-    const getTestId = (suffix) => `${dataTestId}-${suffix}`;
-    return (jsx("span", { className: className, "data-testid": getTestId("outer-wrapper"), onClick: onClick, children: jsxs("label", { className: cvaToggleWrapper(), "data-testid": getTestId("wrapper"), htmlFor: id, children: [jsx("span", { className: cvaToggleTrack({ disabled, size, toggled }), "data-testid": getTestId("track"), children: jsx("span", { className: cvaToggleThumb({ toggled, size }), "data-testid": getTestId("thumb") }) }), showLabelContainer ? (jsxs("span", { className: cvaToggleLabelContainer(), "data-testid": getTestId("label-container"), children: [jsx(Label, { className: cvaToggleLabel(), "data-testid": getTestId("label"), disabled: disabled, children: name }), showDescription ? (jsx("span", { className: cvaToggleDescription({ disabled }), "data-testid": getTestId("description"), children: description })) : null] })) : null, jsx("input", { "aria-checked": toggled, checked: toggled, className: cvaToggleInput(), "data-testid": getTestId("input"), disabled: disabled, id: id, name: name, onBlur: onBlur, onChange: e => {
-                        e.stopPropagation();
-                        onChange(!toggled, e);
-                    }, ref: ref, required: required, tabIndex: tabIndex, type: "checkbox" })] }) }));
-});
-Toggle.displayName = "Toggle";
+const ToggleSwitchOption = ({ label, className, description, suffix, id, dataTestId = "toggle-switch-option", ...rest }) => {
+    const { ref: labelRef, isTextTruncated: isLabelTruncated } = useIsTextTruncated();
+    const { ref: descriptionRef, isTextTruncated: isDescriptionTruncated } = useIsTextTruncated();
+    return (jsxs("label", { className: cvaBinaryControlWrapper({ className }), "data-testid": dataTestId, htmlFor: `${id}-toggle-switch`, tabIndex: -1, children: [jsx(ToggleSwitch, { dataTestId: `${dataTestId}-switcher`, id: `${id}-toggle-switch`, ...rest }), jsx(Tooltip, { className: cvaBinaryControlLabelTooltip(), dataTestId: `${dataTestId}-label-tooltip`, disabled: !isLabelTruncated, label: label, placement: "top", children: jsx("span", { className: cvaLabel({
+                        disabled: rest.disabled || rest.readOnly,
+                        className: "select-none",
+                    }), "data-testid": `${dataTestId}-label`, ref: labelRef, children: label }) }, `${id}-label-tooltip`), suffix ? (jsx("div", { className: cvaBinaryControlSuffixContainer(), "data-testid": `${dataTestId}-suffix-container`, children: suffix })) : null, description ? (jsx(Tooltip, { className: cvaBinaryControlDescriptionTooltip(), dataTestId: `${dataTestId}-description-tooltip`, disabled: !isDescriptionTruncated, label: description, placement: "top", children: jsx("span", { className: cvaBinaryControlDescription({ disabled: rest.disabled || rest.readOnly }), "data-testid": `${dataTestId}-description`, id: `${id}-description`, ref: descriptionRef, children: description }) }, `${id}-description-tooltip`)) : null] }));
+};
+ToggleSwitchOption.displayName = "ToggleSwitchOption";
 
 const cvaUploadInputField = cvaMerge([
     "px-0",
@@ -2903,4 +2956,4 @@ const useZodValidators = () => {
  */
 setupLibraryTranslations();
 
-export { ActionButton, BaseInput, Checkbox, CheckboxField, ColorField, CreatableSelect, CreatableSelectField, DateField, DateInput, DropZone, DropZoneDefaultLabel, EMAIL_REGEX, EmailField, EmailInput, FormFieldSelectAdapter, FormGroup, Label, MultiSelectMenuItem, NumberField, NumberInput, OptionCard, PasswordField, PasswordInput, PhoneField, PhoneFieldWithController, PhoneInput, RadioGroup, RadioItem, Schedule, ScheduleVariant, Search, Select, SelectField, SingleSelectMenuItem, TextArea, TextAreaField, TextField, TextInput, TimeRange, TimeRangeField, Toggle, UploadField, UploadInput, UrlField, UrlInput, checkIfPhoneNumberHasPlus, countryCodeToFlagEmoji, cvaAccessoriesContainer, cvaActionButton, cvaActionContainer, cvaInput, cvaInputAddon, cvaInputBase, cvaInputBaseDisabled, cvaInputBaseInvalid, cvaInputField, cvaInputItemPlacementManager, cvaInputPrefix, cvaInputSuffix, 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, Checkbox, CheckboxField, ColorField, CreatableSelect, CreatableSelectField, DateField, DateInput, DropZone, DropZoneDefaultLabel, EMAIL_REGEX, EmailField, EmailInput, FormFieldSelectAdapter, FormGroup, Label, MultiSelectMenuItem, NumberField, NumberInput, OptionCard, PasswordField, PasswordInput, PhoneField, PhoneFieldWithController, PhoneInput, RadioGroup, RadioItem, Schedule, ScheduleVariant, Search, Select, SelectField, SingleSelectMenuItem, TextArea, TextAreaField, TextField, TextInput, TimeRange, TimeRangeField, ToggleSwitch, ToggleSwitchOption, UploadField, UploadInput, UrlField, UrlInput, checkIfPhoneNumberHasPlus, countryCodeToFlagEmoji, cvaAccessoriesContainer, cvaActionButton, cvaActionContainer, 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 };

package/package.json

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

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

@@ -1,15 +1,15 @@
 import { CommonProps } from "@trackunit/react-components";
 import { MappedOmit } from "@trackunit/shared-utils";
-import * as React from "react";
-export interface CheckboxProps extends CommonProps, MappedOmit<React.InputHTMLAttributes<HTMLInputElement>, "prefix"> {
+import { InputHTMLAttributes, ReactNode } from "react";
+export interface CheckboxProps extends CommonProps, MappedOmit<InputHTMLAttributes<HTMLInputElement>, "prefix"> {
     /**
      * A string element to be displayed as a label
      */
-    label?: string | React.ReactNode;
+    label?: string | ReactNode;
     /**
      * An element to display after the label
      */
-    suffix?: React.ReactNode;
+    suffix?: ReactNode;
     /**
      * An boolean flag to set checkbox to checked state
      */
@@ -50,4 +50,4 @@ export interface CheckboxProps extends CommonProps, MappedOmit<React.InputHTMLAt
  * @param {CheckboxProps} props - The props for the Checkbox component
  * @returns {JSX.Element} Checkbox component
  */
-export declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>;
+export declare const Checkbox: import("react").ForwardRefExoticComponent<CheckboxProps & import("react").RefAttributes<HTMLInputElement>>;

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

@@ -3,6 +3,5 @@ export declare const cvaCheckbox: (props?: ({
     state?: "selected" | "deselected" | "indeterminate" | null | undefined;
     disabled?: boolean | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
-export declare const cvaCheckboxContainer: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
 export declare const cvaCheckboxInput: (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/Label/Label.variants.d.ts

@@ -1,4 +1,5 @@
 export declare const cvaLabel: (props?: ({
     invalid?: boolean | null | undefined;
     disabled?: boolean | null | undefined;
+    truncate?: boolean | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;

package/src/components/Label/index.d.ts

@@ -1 +1,2 @@
 export * from "./Label";
+export * from "./Label.variants";

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

@@ -6,10 +6,3 @@ export declare const cvaRadioItem: (props?: ({
     invalid?: boolean | null | undefined;
     disabled?: boolean | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
-export declare const cvaRadioItemWrapper: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
-export declare const cvaRadioItemDescription: (props?: ({
-    disabled?: boolean | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
-export declare const cvaLabelTooltip: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
-export declare const cvaDescriptionTooltip: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
-export declare const cvaSuffixContainer: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;

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

@@ -0,0 +1,51 @@
+import { CommonProps } from "@trackunit/react-components";
+import { MappedOmit, Size } from "@trackunit/shared-utils";
+import { InputHTMLAttributes } from "react";
+export interface ToggleSwitchProps extends CommonProps, MappedOmit<InputHTMLAttributes<HTMLInputElement>, "prefix" | "onChange" | "size" | "children"> {
+    /**
+     * custom onChange event handler.
+     */
+    onChange?: (toggled: boolean, event?: React.ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * onClick event handler.
+     *
+     * _**Do not**_ pass onClick handlers to trigger the toggle behavior. Use the onChange handler instead.
+     */
+    onClick?: (e: React.MouseEvent<HTMLSpanElement>) => void;
+    /**
+     * Whether the ToggleSwitch is toggled(active) or not.
+     */
+    toggled: boolean;
+    /**
+     * Size of the toggle.
+     */
+    size?: Size;
+    /**
+     * Whether the track should have a focus outline.
+     *
+     * Set it to false when wrapped by a component that receives focus styles instead (for example in a filter/menu item)
+     *
+     * @default true
+     */
+    showInputFocus?: boolean;
+    /**
+     * Tab index for the track element
+     *
+     * @default 0
+     */
+    tabIndex?: number;
+    /**
+     * Prevents the native checkbox toggle behavior of the toggle switch.
+     */
+    preventDefaultOnClick?: boolean;
+}
+/**
+ * A checkbox input wrapper with role="switch". Used as an input element for **ToggleSwitchOption**
+ * or custom components.
+ *
+ * Not intended for standalone use.
+ *
+ * @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>>;

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

@@ -0,0 +1,12 @@
+export declare const cvaToggleSwitchWrapper: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaToggleSwitchInput: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaToggleSwitchTrack: (props?: ({
+    size?: "small" | "medium" | "large" | null | undefined;
+    disabled?: boolean | null | undefined;
+    toggled?: boolean | null | undefined;
+    focused?: boolean | "auto" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export declare const cvaToggleSwitchThumb: (props?: ({
+    toggled?: boolean | null | undefined;
+    size?: "small" | "medium" | "large" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;

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

@@ -0,0 +1 @@
+export * from "./ToggleSwitch";

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

@@ -0,0 +1,31 @@
+import { ReactElement } from "react";
+import { ToggleSwitchProps } from "../ToggleSwitch";
+export interface ToggleSwitchOptionProps extends ToggleSwitchProps {
+    /**
+     * The label of the toggle.
+     */
+    label: ReactElement | string;
+    /**
+     * The description of the toggle.
+     */
+    description?: ReactElement | string;
+    /**
+     * An element to display after the label
+     */
+    suffix?: ReactElement;
+}
+/**
+ * Use ToggleSwitchOption when you have to only enable/disable a feature.
+ * Wrapper component for ToggleSwitch.
+ *
+ * _**Do use** ToggleSwitchOption in forms or settings._
+ *
+ * _**Do not use** ToggleSwitchOption if a user can select multiple options from a list, use checkboxes instead of toggle._
+ *
+ * @param {ToggleSwitchOptionProps} props - The props for the ToggleSwitchOption component
+ * @returns {ReactElement} ToggleSwitchOption component
+ */
+export declare const ToggleSwitchOption: {
+    ({ label, className, description, suffix, id, dataTestId, ...rest }: ToggleSwitchOptionProps): ReactElement;
+    displayName: string;
+};

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

@@ -0,0 +1 @@
+export * from "./ToggleSwitchOption";

package/src/index.d.ts

@@ -10,7 +10,7 @@ export * from "./components/DropZone/DropZoneDefaultLabel";
 export * from "./components/EmailField/EmailField";
 export * from "./components/EmailInput";
 export * from "./components/FormGroup/FormGroup";
-export * from "./components/Label/Label";
+export * from "./components/Label";
 export * from "./components/NumberField/NumberField";
 export * from "./components/NumberInput/NumberInput";
 export * from "./components/OptionCard/OptionCard";
@@ -35,7 +35,8 @@ export * from "./components/TextField";
 export * from "./components/TextInput/TextInput";
 export * from "./components/TimeRange";
 export * from "./components/TimeRangeField/TimeRangeField";
-export * from "./components/Toggle";
+export * from "./components/ToggleSwitch";
+export * from "./components/ToggleSwitchOption";
 export * from "./components/UploadField/UploadField";
 export * from "./components/UploadInput/UploadInput";
 export * from "./components/UrlField/UrlField";

package/src/shared-cva/BinaryControlItem.variants.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Shared CVA for binary control items: Checkbox, RadioItem, ToggleSwitchOption
+ */
+export declare const cvaBinaryControlWrapper: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaBinaryControlLabelTooltip: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaBinaryControlDescriptionTooltip: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaBinaryControlDescription: (props?: ({
+    disabled?: boolean | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export declare const cvaBinaryControlSuffixContainer: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;

package/src/components/Toggle/Toggle.d.ts

@@ -1,60 +0,0 @@
-import { CommonProps } from "@trackunit/react-components";
-import { Size } from "@trackunit/shared-utils";
-import * as React from "react";
-export interface ToggleProps extends CommonProps {
-    /**
-     * id of the toggle.
-     */
-    id: string;
-    /**
-     * Whether the toggle is toggled(active) or not.
-     */
-    toggled: boolean;
-    /**
-     * onChange event handler.
-     */
-    onChange: (toggled: boolean, event?: React.ChangeEvent<HTMLInputElement>) => void;
-    /**
-     * onClick event handler it is thrown on root element of the component tree.
-     */
-    onClick?: React.MouseEventHandler<HTMLDivElement>;
-    /**
-     * Whether the toggle is disabled or not.
-     */
-    disabled?: boolean;
-    /**
-     * Size of the toggle.
-     */
-    size?: Size;
-    /**
-     * Tab index specifies the keyboard tab order of the toggle relative to the other controls on the page.
-     */
-    tabIndex?: number;
-    /**
-     * Whether the toggle is required or not.
-     */
-    required?: boolean;
-    /**
-     * Name of the toggle.
-     */
-    name?: string;
-    /**
-     * The description of the toggle.
-     */
-    description?: string;
-    /**
-     * onBlur event handler.
-     */
-    onBlur?: React.FocusEventHandler<HTMLInputElement>;
-}
-/**
- * Use Toggle when you have to only enable/disable a feature.
- *
- * _**Do use** Toggle in forms or settings._
- *
- * _**Do not use** Toggle if a user can select many option from a list, use checkboxes instead of toggle._
- *
- * @param {ToggleProps} props - The props for the Toggle component
- * @returns {JSX.Element} Toggle component
- */
-export declare const Toggle: React.ForwardRefExoticComponent<ToggleProps & React.RefAttributes<HTMLInputElement>>;

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

@@ -1,17 +0,0 @@
-export declare const cvaToggleWrapper: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
-export declare const cvaToggleInputContainer: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
-export declare const cvaToggleTrack: (props?: ({
-    size?: "small" | "medium" | "large" | null | undefined;
-    disabled?: boolean | null | undefined;
-    toggled?: boolean | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
-export declare const cvaToggleThumb: (props?: ({
-    toggled?: boolean | null | undefined;
-    size?: "small" | "medium" | "large" | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
-export declare const cvaToggleInput: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
-export declare const cvaToggleLabelContainer: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
-export declare const cvaToggleLabel: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
-export declare const cvaToggleDescription: (props?: ({
-    disabled?: boolean | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;

package/src/components/Toggle/index.d.ts

@@ -1 +0,0 @@
-export * from "./Toggle";