@trackunit/react-form-components 0.1.74 → 0.1.76

package/index.cjs.js

@@ -2587,11 +2587,12 @@ const TimeRangeField = ({ className, dataTestId, onChange, isInvalid, errorMessa
 
 const cvaToggleWrapper = cssClassVarianceUtilities.cvaMerge(["flex", "gap-2", "items-center"]);
 cssClassVarianceUtilities.cvaMerge(["relative"]);
-const cvaToggleTrack = cssClassVarianceUtilities.cvaMerge(["shrink-0", "p-1", "cursor-pointer", "rounded-full", "bg-slate-300", "hover:bg-slate-400", "active:bg-slate-500"], {
+const cvaToggleTrack = cssClassVarianceUtilities.cvaMerge(["shrink-0", "cursor-pointer", "rounded-full", "bg-slate-300", "hover:bg-slate-400", "active:bg-slate-500"], {
     variants: {
         size: {
-            small: ["w-8", "h-4"],
-            medium: ["w-9", "h-5"],
+            small: ["w-5", "p-0.5"],
+            medium: ["w-7", "p-0.5"],
+            large: ["w-[38px]", "p-[3px]"],
         },
         disabled: {
             true: ["cursor-not-allowed", "pointer-events-none", "bg-slate-200"],
@@ -2613,13 +2614,35 @@ const cvaToggleTrack = cssClassVarianceUtilities.cvaMerge(["shrink-0", "p-1", "c
         size: "medium",
     },
 });
-const cvaToggleThumb = cssClassVarianceUtilities.cvaMerge(["block", "rounded-full", "bg-white", "h-full", "aspect-square", "translate-x-0", "transition-all"], {
+const cvaToggleThumb = cssClassVarianceUtilities.cvaMerge(["block", "rounded-full", "bg-white", "aspect-square", "translate-x-0", "transition-all"], {
     variants: {
         toggled: {
-            true: ["translate-x-4"],
+            true: "",
             false: "",
         },
+        size: {
+            small: ["h-2"],
+            medium: ["h-3"],
+            large: ["h-4"],
+        },
     },
+    compoundVariants: [
+        {
+            toggled: true,
+            size: "small",
+            className: "translate-x-2",
+        },
+        {
+            toggled: true,
+            size: "medium",
+            className: "translate-x-3",
+        },
+        {
+            toggled: true,
+            size: "large",
+            className: "translate-x-4",
+        },
+    ],
     defaultVariants: {},
 });
 const cvaToggleInput = cssClassVarianceUtilities.cvaMerge(["absolute", "opacity-0", "-z-10"]);
@@ -2648,7 +2671,7 @@ const Toggle = React__namespace.forwardRef(({ toggled = false, onChange, onClick
     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 }), "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 => {
+    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" })] }) }));

package/index.esm.js

@@ -2568,11 +2568,12 @@ const TimeRangeField = ({ className, dataTestId, onChange, isInvalid, errorMessa
 
 const cvaToggleWrapper = cvaMerge(["flex", "gap-2", "items-center"]);
 cvaMerge(["relative"]);
-const cvaToggleTrack = cvaMerge(["shrink-0", "p-1", "cursor-pointer", "rounded-full", "bg-slate-300", "hover:bg-slate-400", "active:bg-slate-500"], {
+const cvaToggleTrack = cvaMerge(["shrink-0", "cursor-pointer", "rounded-full", "bg-slate-300", "hover:bg-slate-400", "active:bg-slate-500"], {
     variants: {
         size: {
-            small: ["w-8", "h-4"],
-            medium: ["w-9", "h-5"],
+            small: ["w-5", "p-0.5"],
+            medium: ["w-7", "p-0.5"],
+            large: ["w-[38px]", "p-[3px]"],
         },
         disabled: {
             true: ["cursor-not-allowed", "pointer-events-none", "bg-slate-200"],
@@ -2594,13 +2595,35 @@ const cvaToggleTrack = cvaMerge(["shrink-0", "p-1", "cursor-pointer", "rounded-f
         size: "medium",
     },
 });
-const cvaToggleThumb = cvaMerge(["block", "rounded-full", "bg-white", "h-full", "aspect-square", "translate-x-0", "transition-all"], {
+const cvaToggleThumb = cvaMerge(["block", "rounded-full", "bg-white", "aspect-square", "translate-x-0", "transition-all"], {
     variants: {
         toggled: {
-            true: ["translate-x-4"],
+            true: "",
             false: "",
         },
+        size: {
+            small: ["h-2"],
+            medium: ["h-3"],
+            large: ["h-4"],
+        },
     },
+    compoundVariants: [
+        {
+            toggled: true,
+            size: "small",
+            className: "translate-x-2",
+        },
+        {
+            toggled: true,
+            size: "medium",
+            className: "translate-x-3",
+        },
+        {
+            toggled: true,
+            size: "large",
+            className: "translate-x-4",
+        },
+    ],
     defaultVariants: {},
 });
 const cvaToggleInput = cvaMerge(["absolute", "opacity-0", "-z-10"]);
@@ -2629,7 +2652,7 @@ const Toggle = React.forwardRef(({ toggled = false, onChange, onClick, disabled,
     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 }), "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 => {
+    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" })] }) }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-form-components",
-  "version": "0.1.74",
+  "version": "0.1.76",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {

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

@@ -1,7 +1,6 @@
 import { CommonProps } from "@trackunit/react-components";
 import { Size } from "@trackunit/shared-utils";
 import * as React from "react";
-export type ToggleSize = Extract<Size, "small" | "medium">;
 export interface ToggleProps extends CommonProps {
     /**
      * id of the toggle.
@@ -26,7 +25,7 @@ export interface ToggleProps extends CommonProps {
     /**
      * Size of the toggle.
      */
-    size?: ToggleSize;
+    size?: Size;
     /**
      * Tab index specifies the keyboard tab order of the toggle relative to the other controls on the page.
      */

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

@@ -1,12 +1,13 @@
 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" | null | undefined;
+    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;