@shoplflow/base 0.30.3 → 0.30.5

package/dist/index.cjs

@@ -2383,7 +2383,14 @@ var getStylesByStyleVariant = (styleVariant, isSelected, isHovered) => {
       return "";
   }
 };
-var StyledCheckbox = styled6__default.default.button`
+var StyledCheckHiddenInput = styled6__default.default.input`
+  position: absolute;
+  width: 0;
+  height: 0;
+  opacity: 0;
+  visibility: hidden;
+`;
+var StyledCheckbox = styled6__default.default.label`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -2408,62 +2415,61 @@ var Container3 = styled6__default.default.button`
   background-color: transparent;
 `;
 exports.CHECKBOX_SYMBOL_KEY = Symbol("SHOPLFLOW_CHECKBOX");
-var Checkbox = (_a) => {
-  var _b = _a, {
-    defaultSelected,
-    isSelected,
-    disabled,
-    onClick,
-    onMouseEnter,
-    onMouseLeave,
-    styleVar = "PRIMARY"
-  } = _b, rest = __objRest(_b, [
-    "defaultSelected",
-    "isSelected",
-    "disabled",
-    "onClick",
-    "onMouseEnter",
-    "onMouseLeave",
-    "styleVar"
-  ]);
-  const [selected, toggleSelected] = useOnToggle(isSelected, defaultSelected);
-  const [isHovered, toggleHovered] = React3.useState(false);
-  const handleMouseLeave = (e) => {
-    toggleHovered(false);
-    onMouseLeave && onMouseLeave(e);
-  };
-  const handleMouseEnter = (e) => {
-    toggleHovered(true);
-    onMouseEnter && onMouseEnter(e);
-  };
-  const handleClick = (e) => {
-    if (disabled) {
-      return;
-    }
-    onClick && onClick(e);
-    toggleSelected();
-  };
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    Container3,
-    __spreadProps(__spreadValues({
-      onClick: handleClick,
-      onMouseLeave: handleMouseLeave,
-      onMouseEnter: handleMouseEnter,
-      disabled
-    }, rest), {
-      "data-shoplflow": "Checkbox",
-      children: /* @__PURE__ */ jsxRuntime.jsx(StyledCheckbox, { styleVar, isHovered, isSelected: selected, disabled, children: /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "12", height: "8", viewBox: "0 0 12 8", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
-        "path",
-        {
-          fillRule: "evenodd",
-          clipRule: "evenodd",
-          d: "M9.78822 0.297596C10.1761 -0.0955083 10.8093 -0.0997053 11.2024 0.288222C11.5653 0.646308 11.5968 1.21334 11.2943 1.60765L11.2118 1.7024L5.31714 7.7024C4.95248 8.07193 4.37282 8.09687 3.97909 7.77976L3.88476 7.69335L0.779404 4.42669C0.396475 4.02871 0.408672 3.39567 0.806647 3.01274C1.17401 2.65926 1.74167 2.64247 2.12801 2.95499L2.2206 3.03998L4.614 5.567L9.78822 0.297596Z",
-          fill: "white"
-        }
-      ) }) })
-    })
-  );
-};
+var Checkbox = React3.forwardRef(
+  (_a, ref) => {
+    var _b = _a, { defaultSelected, isSelected, disabled, onMouseEnter, onClick, onMouseLeave, styleVar = "PRIMARY", id } = _b, rest = __objRest(_b, ["defaultSelected", "isSelected", "disabled", "onMouseEnter", "onClick", "onMouseLeave", "styleVar", "id"]);
+    const [selected, toggleSelected] = useOnToggle(isSelected, defaultSelected);
+    const [isHovered, toggleHovered] = React3.useState(false);
+    const handleMouseLeave = (e) => {
+      toggleHovered(false);
+      onMouseLeave && onMouseLeave(e);
+    };
+    const handleMouseEnter = (e) => {
+      toggleHovered(true);
+      onMouseEnter && onMouseEnter(e);
+    };
+    const handleClick = (e) => {
+      if (disabled) {
+        return;
+      }
+      onClick && onClick(e);
+      toggleSelected();
+    };
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      Container3,
+      {
+        onClick: handleClick,
+        onMouseLeave: handleMouseLeave,
+        onMouseEnter: handleMouseEnter,
+        disabled,
+        type: "button",
+        "data-shoplflow": "Checkbox",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(StyledCheckHiddenInput, __spreadProps(__spreadValues({ type: "checkbox", disabled, id }, rest), { ref })),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            StyledCheckbox,
+            {
+              styleVar,
+              htmlFor: "id",
+              isHovered,
+              isSelected: selected,
+              disabled,
+              children: /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "12", height: "8", viewBox: "0 0 12 8", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
+                "path",
+                {
+                  fillRule: "evenodd",
+                  clipRule: "evenodd",
+                  d: "M9.78822 0.297596C10.1761 -0.0955083 10.8093 -0.0997053 11.2024 0.288222C11.5653 0.646308 11.5968 1.21334 11.2943 1.60765L11.2118 1.7024L5.31714 7.7024C4.95248 8.07193 4.37282 8.09687 3.97909 7.77976L3.88476 7.69335L0.779404 4.42669C0.396475 4.02871 0.408672 3.39567 0.806647 3.01274C1.17401 2.65926 1.74167 2.64247 2.12801 2.95499L2.2206 3.03998L4.614 5.567L9.78822 0.297596Z",
+                  fill: "white"
+                }
+              ) })
+            }
+          )
+        ]
+      }
+    );
+  }
+);
 Checkbox[exports.CHECKBOX_SYMBOL_KEY] = true;
 exports.Checkbox = Checkbox;