@idds/react 1.5.11 → 1.5.14

package/dist/index.es.js

@@ -10470,69 +10470,26 @@ function Toggle({
   "aria-describedby": ariaDescribedBy,
   id,
   name,
-  value
+  value,
+  color,
+  ...rest
 }) {
   const isControlled = controlledChecked !== void 0;
   const [internalChecked, setInternalChecked] = useState(defaultChecked);
   const checked = isControlled ? controlledChecked : internalChecked;
   const handleChange = useCallback(
     (event) => {
-      console.log("handleChange called", {
-        disabled,
-        checked: event.target.checked,
-        isControlled
-      });
       if (disabled) return;
       const newChecked = event.target.checked;
       if (!isControlled) {
         setInternalChecked(newChecked);
       }
       if (onChange) {
-        console.log("Calling onChange from handleChange with", newChecked);
         onChange(newChecked);
       }
     },
     [disabled, onChange, isControlled]
   );
-  const handleKeyDown = useCallback(
-    (event) => {
-      if (disabled) return;
-      if (event.key === "Enter" || event.key === " ") {
-        event.preventDefault();
-        const newChecked = !checked;
-        if (!isControlled) {
-          setInternalChecked(newChecked);
-        }
-        if (onChange) {
-          onChange(newChecked);
-        }
-      }
-    },
-    [disabled, checked, onChange, isControlled]
-  );
-  const handleClick = useCallback(
-    (event) => {
-      console.log("handleClick called", { disabled, checked, isControlled });
-      if (disabled) return;
-      if (event.target.tagName === "INPUT") {
-        return;
-      }
-      event.preventDefault();
-      event.stopPropagation();
-      const newChecked = !checked;
-      console.log("Toggle changing from", checked, "to", newChecked);
-      if (!isControlled) {
-        setInternalChecked(newChecked);
-      }
-      if (onChange) {
-        console.log("Calling onChange with", newChecked);
-        onChange(newChecked);
-      } else {
-        console.log("onChange is not provided");
-      }
-    },
-    [disabled, checked, onChange, isControlled]
-  );
   const toggleClasses = clsx(
     "ina-toggle",
     `ina-toggle--size-${size}`,
@@ -10558,38 +10515,33 @@ function Toggle({
       "ina-toggle__thumb--disabled": disabled
     }
   );
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: toggleClasses,
-      onClick: handleClick,
-      role: "switch",
-      "aria-checked": checked,
-      "aria-label": ariaLabel,
-      "aria-describedby": ariaDescribedBy,
-      children: [
-        /* @__PURE__ */ jsx(
-          "input",
-          {
-            type: "checkbox",
-            id,
-            name,
-            value,
-            checked,
-            disabled,
-            onChange: handleChange,
-            onKeyDown: handleKeyDown,
-            "aria-label": ariaLabel,
-            "aria-describedby": ariaDescribedBy,
-            className: "ina-toggle__input",
-            tabIndex: -1,
-            readOnly: true
-          }
-        ),
-        /* @__PURE__ */ jsx("div", { className: trackClasses, style: { pointerEvents: "none" }, children: /* @__PURE__ */ jsx("div", { className: thumbClasses }) })
-      ]
-    }
-  );
+  const trackStyle = checked && color && !disabled ? { backgroundColor: color, borderColor: color } : {};
+  return /* @__PURE__ */ jsxs("div", { className: toggleClasses, children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        ...rest,
+        type: "checkbox",
+        id,
+        name,
+        value,
+        checked,
+        disabled,
+        onChange: handleChange,
+        "aria-label": ariaLabel,
+        "aria-describedby": ariaDescribedBy,
+        className: "ina-toggle__input"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: trackClasses,
+        style: { pointerEvents: "none", ...trackStyle },
+        children: /* @__PURE__ */ jsx("div", { className: thumbClasses })
+      }
+    )
+  ] });
 }
 function TabHorizontal({
   items,