@koine/react 2.0.0-alpha.4 → 2.0.0-beta.10

package/Forms/Toggle/Toggle.js

@@ -1,36 +1,175 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ToggleIndicatorRounded = exports.ToggleIndicatorSquared = exports.ToggleIndicatorFg = exports.ToggleIndicatorBgCircle = exports.ToggleIndicatorBgSquare = exports.ToggleIndicatorHolder = exports.ToggleLabelSub = exports.ToggleLabel = exports.Toggle = exports.toggleIndicatorFg = exports.toggleIndicatorBgShape = exports.toggleIndicatorBg = exports.toggleBase = void 0;
-var tslib_1 = require("tslib");
-var jsx_runtime_1 = require("react/jsx-runtime");
 /**
  * @file
  *
  * About accessibility:
  * - minimum target size of 44px https://www.w3.org/TR/WCAG21/#target-size
- */
-var react_1 = require("react");
-var styled_components_1 = tslib_1.__importDefault(require("styled-components"));
-var styled_1 = require("../../styles/styled");
-exports.toggleBase = "\n  border: 1px solid var(--forms-border-color);\n";
-exports.toggleIndicatorBg = "\n  display: inline-block;\n  flex-shrink: 0;\n  width: 100%;\n  height: 100%;\n";
-exports.toggleIndicatorBgShape = "\n  ".concat(exports.toggleIndicatorBg, "\n  fill: none;\n  stroke-width: 2px;\n  stroke: var(--forms-border-color);\n");
-exports.toggleIndicatorFg = "\n  position: absolute;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  fill: currentcolor;\n";
-exports.Toggle = styled_components_1.default.span(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 2em;\n  height: 2em;\n  margin: 0 -0.3em; /* rtl */\n  padding: 0.3em;\n"], ["\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 2em;\n  height: 2em;\n  margin: 0 -0.3em; /* rtl */\n  padding: 0.3em;\n"])));
-exports.ToggleLabel = styled_components_1.default.span(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject(["\n  margin-left: 0.6em; /* rtl */\n"], ["\n  margin-left: 0.6em; /* rtl */\n"])));
-exports.ToggleLabelSub = styled_components_1.default.small(templateObject_3 || (templateObject_3 = tslib_1.__makeTemplateObject(["\n  opacity: 0.7;\n  font-size: 0.7em; ;\n"], ["\n  opacity: 0.7;\n  font-size: 0.7em; ;\n"])));
-exports.ToggleIndicatorHolder = styled_components_1.default.span(templateObject_4 || (templateObject_4 = tslib_1.__makeTemplateObject(["\n  position: relative;\n  display: flex;\n\n  input:focus ~ & {\n    ", "\n  }\n"], ["\n  position: relative;\n  display: flex;\n\n  input:focus ~ & {\n    ", "\n  }\n"])), styled_1.stateFocus);
-exports.ToggleIndicatorBgSquare = styled_components_1.default.svg(templateObject_5 || (templateObject_5 = tslib_1.__makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), exports.toggleIndicatorBgShape);
-exports.ToggleIndicatorBgCircle = styled_components_1.default.svg(templateObject_6 || (templateObject_6 = tslib_1.__makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), exports.toggleIndicatorBgShape);
-exports.ToggleIndicatorFg = styled_components_1.default.svg(templateObject_7 || (templateObject_7 = tslib_1.__makeTemplateObject(["\n  ", "\n  transform: scale(0);\n  transition: transform 0.18s ease;\n\n  input:checked + ", " & {\n    transform: scale(1);\n  }\n"], ["\n  ", "\n  transform: scale(0);\n  transition: transform 0.18s ease;\n\n  input:checked + ", " & {\n    transform: scale(1);\n  }\n"])), exports.toggleIndicatorFg, exports.ToggleIndicatorHolder);
-var ToggleIndicatorSquared = function (props) {
-    return ((0, jsx_runtime_1.jsxs)(exports.ToggleIndicatorHolder, { children: [(0, jsx_runtime_1.jsx)(exports.ToggleIndicatorBgSquare, { viewBox: "0 0 24 24", children: (0, jsx_runtime_1.jsx)("rect", { width: "24", height: "24" }) }), (0, jsx_runtime_1.jsx)(exports.ToggleIndicatorFg, { viewBox: "0 0 24 24", children: (0, jsx_runtime_1.jsx)("path", { d: "M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" }) })] }));
+ */ "use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    toggleBase: function() {
+        return toggleBase;
+    },
+    toggleIndicatorBg: function() {
+        return toggleIndicatorBg;
+    },
+    toggleIndicatorBgShape: function() {
+        return toggleIndicatorBgShape;
+    },
+    toggleIndicatorFg: function() {
+        return toggleIndicatorFg;
+    },
+    Toggle: function() {
+        return Toggle;
+    },
+    ToggleLabel: function() {
+        return ToggleLabel;
+    },
+    ToggleLabelSub: function() {
+        return ToggleLabelSub;
+    },
+    ToggleIndicatorHolder: function() {
+        return ToggleIndicatorHolder;
+    },
+    ToggleIndicatorBgSquare: function() {
+        return ToggleIndicatorBgSquare;
+    },
+    ToggleIndicatorBgCircle: function() {
+        return ToggleIndicatorBgCircle;
+    },
+    ToggleIndicatorFg: function() {
+        return ToggleIndicatorFg;
+    },
+    ToggleIndicatorSquared: function() {
+        return ToggleIndicatorSquared;
+    },
+    ToggleIndicatorRounded: function() {
+        return ToggleIndicatorRounded;
+    }
+});
+const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
+const _jsxruntime = require("react/jsx-runtime");
+const _react = require("react");
+const _styledcomponents = /*#__PURE__*/ _interop_require_default._(require("styled-components"));
+const _styled = require("../../styles/styled");
+const toggleBase = `
+  border: 1px solid var(--forms-border-color);
+`;
+const toggleIndicatorBg = `
+  display: inline-block;
+  flex-shrink: 0;
+  width: 100%;
+  height: 100%;
+`;
+const toggleIndicatorBgShape = `
+  ${toggleIndicatorBg}
+  fill: none;
+  stroke-width: 2px;
+  stroke: var(--forms-border-color);
+`;
+const toggleIndicatorFg = `
+  position: absolute;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  fill: currentcolor;
+`;
+const Toggle = _styledcomponents.default.span`
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2em;
+  height: 2em;
+  margin: 0 -0.3em; /* rtl */
+  padding: 0.3em;
+`;
+const ToggleLabel = _styledcomponents.default.span`
+  margin-left: 0.6em; /* rtl */
+`;
+const ToggleLabelSub = _styledcomponents.default.small`
+  opacity: 0.7;
+  font-size: 0.7em;
+`;
+const ToggleIndicatorHolder = _styledcomponents.default.span`
+  position: relative;
+  display: flex;
+
+  input:focus ~ & {
+    ${_styled.stateFocus}
+  }
+`;
+const ToggleIndicatorBgSquare = _styledcomponents.default.svg`
+  ${toggleIndicatorBgShape}
+`;
+const ToggleIndicatorBgCircle = _styledcomponents.default.svg`
+  ${toggleIndicatorBgShape}
+`;
+const ToggleIndicatorFg = _styledcomponents.default.svg`
+  ${toggleIndicatorFg}
+  transform: scale(0);
+  transition: transform 0.18s ease;
+
+  input:checked + ${ToggleIndicatorHolder} & {
+    transform: scale(1);
+  }
+`;
+const ToggleIndicatorSquared = (props)=>{
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(ToggleIndicatorHolder, {
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(ToggleIndicatorBgSquare, {
+                viewBox: "0 0 24 24",
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)("rect", {
+                    width: "24",
+                    height: "24"
+                })
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(ToggleIndicatorFg, {
+                viewBox: "0 0 24 24",
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)("path", {
+                    d: "M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"
+                })
+            })
+        ]
+    });
 };
-exports.ToggleIndicatorSquared = ToggleIndicatorSquared;
-var ToggleIndicatorRounded = function (_a) {
-    var _b = _a.r, r = _b === void 0 ? 6 : _b;
-    var id = (0, react_1.useId)();
-    return ((0, jsx_runtime_1.jsxs)(exports.ToggleIndicatorHolder, { children: [(0, jsx_runtime_1.jsxs)(exports.ToggleIndicatorBgCircle, { viewBox: "0 0 24 24", children: [(0, jsx_runtime_1.jsx)("circle", { cy: "12", cx: "12", r: "12", id: "r_".concat(id), clipPath: "url(#c_".concat(id, ")") }), (0, jsx_runtime_1.jsx)("clipPath", { id: "c_".concat(id), children: (0, jsx_runtime_1.jsx)("use", { xlinkHref: "#r_".concat(id) }) })] }), (0, jsx_runtime_1.jsx)(exports.ToggleIndicatorFg, { viewBox: "0 0 24 24", children: (0, jsx_runtime_1.jsx)("circle", { r: r, cx: "12", cy: "12" }) })] }));
+const ToggleIndicatorRounded = ({ r = 6 })=>{
+    const id = (0, _react.useId)();
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(ToggleIndicatorHolder, {
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsxs)(ToggleIndicatorBgCircle, {
+                viewBox: "0 0 24 24",
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)("circle", {
+                        cy: "12",
+                        cx: "12",
+                        r: "12",
+                        id: `r_${id}`,
+                        clipPath: `url(#c_${id})`
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)("clipPath", {
+                        id: `c_${id}`,
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)("use", {
+                            xlinkHref: `#r_${id}`
+                        })
+                    })
+                ]
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(ToggleIndicatorFg, {
+                viewBox: "0 0 24 24",
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)("circle", {
+                    r: r,
+                    cx: "12",
+                    cy: "12"
+                })
+            })
+        ]
+    });
 };
-exports.ToggleIndicatorRounded = ToggleIndicatorRounded;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;

package/Forms/Toggle/Toggle.mjs

@@ -1,31 +1,123 @@
-import { __makeTemplateObject } from "tslib";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * @file
  *
  * About accessibility:
  * - minimum target size of 44px https://www.w3.org/TR/WCAG21/#target-size
- */
+ */ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useId } from "react";
 import styled from "styled-components";
 import { stateFocus } from "../../styles/styled";
-export var toggleBase = "\n  border: 1px solid var(--forms-border-color);\n";
-export var toggleIndicatorBg = "\n  display: inline-block;\n  flex-shrink: 0;\n  width: 100%;\n  height: 100%;\n";
-export var toggleIndicatorBgShape = "\n  ".concat(toggleIndicatorBg, "\n  fill: none;\n  stroke-width: 2px;\n  stroke: var(--forms-border-color);\n");
-export var toggleIndicatorFg = "\n  position: absolute;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  fill: currentcolor;\n";
-export var Toggle = styled.span(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 2em;\n  height: 2em;\n  margin: 0 -0.3em; /* rtl */\n  padding: 0.3em;\n"], ["\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 2em;\n  height: 2em;\n  margin: 0 -0.3em; /* rtl */\n  padding: 0.3em;\n"])));
-export var ToggleLabel = styled.span(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  margin-left: 0.6em; /* rtl */\n"], ["\n  margin-left: 0.6em; /* rtl */\n"])));
-export var ToggleLabelSub = styled.small(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  opacity: 0.7;\n  font-size: 0.7em; ;\n"], ["\n  opacity: 0.7;\n  font-size: 0.7em; ;\n"])));
-export var ToggleIndicatorHolder = styled.span(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  position: relative;\n  display: flex;\n\n  input:focus ~ & {\n    ", "\n  }\n"], ["\n  position: relative;\n  display: flex;\n\n  input:focus ~ & {\n    ", "\n  }\n"])), stateFocus);
-export var ToggleIndicatorBgSquare = styled.svg(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), toggleIndicatorBgShape);
-export var ToggleIndicatorBgCircle = styled.svg(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), toggleIndicatorBgShape);
-export var ToggleIndicatorFg = styled.svg(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  ", "\n  transform: scale(0);\n  transition: transform 0.18s ease;\n\n  input:checked + ", " & {\n    transform: scale(1);\n  }\n"], ["\n  ", "\n  transform: scale(0);\n  transition: transform 0.18s ease;\n\n  input:checked + ", " & {\n    transform: scale(1);\n  }\n"])), toggleIndicatorFg, ToggleIndicatorHolder);
-export var ToggleIndicatorSquared = function (props) {
-    return (_jsxs(ToggleIndicatorHolder, { children: [_jsx(ToggleIndicatorBgSquare, { viewBox: "0 0 24 24", children: _jsx("rect", { width: "24", height: "24" }) }), _jsx(ToggleIndicatorFg, { viewBox: "0 0 24 24", children: _jsx("path", { d: "M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" }) })] }));
+export const toggleBase = `
+  border: 1px solid var(--forms-border-color);
+`;
+export const toggleIndicatorBg = `
+  display: inline-block;
+  flex-shrink: 0;
+  width: 100%;
+  height: 100%;
+`;
+export const toggleIndicatorBgShape = `
+  ${toggleIndicatorBg}
+  fill: none;
+  stroke-width: 2px;
+  stroke: var(--forms-border-color);
+`;
+export const toggleIndicatorFg = `
+  position: absolute;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  fill: currentcolor;
+`;
+export const Toggle = styled.span`
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2em;
+  height: 2em;
+  margin: 0 -0.3em; /* rtl */
+  padding: 0.3em;
+`;
+export const ToggleLabel = styled.span`
+  margin-left: 0.6em; /* rtl */
+`;
+export const ToggleLabelSub = styled.small`
+  opacity: 0.7;
+  font-size: 0.7em;
+`;
+export const ToggleIndicatorHolder = styled.span`
+  position: relative;
+  display: flex;
+
+  input:focus ~ & {
+    ${stateFocus}
+  }
+`;
+export const ToggleIndicatorBgSquare = styled.svg`
+  ${toggleIndicatorBgShape}
+`;
+export const ToggleIndicatorBgCircle = styled.svg`
+  ${toggleIndicatorBgShape}
+`;
+export const ToggleIndicatorFg = styled.svg`
+  ${toggleIndicatorFg}
+  transform: scale(0);
+  transition: transform 0.18s ease;
+
+  input:checked + ${ToggleIndicatorHolder} & {
+    transform: scale(1);
+  }
+`;
+export const ToggleIndicatorSquared = (props)=>{
+    return /*#__PURE__*/ _jsxs(ToggleIndicatorHolder, {
+        children: [
+            /*#__PURE__*/ _jsx(ToggleIndicatorBgSquare, {
+                viewBox: "0 0 24 24",
+                children: /*#__PURE__*/ _jsx("rect", {
+                    width: "24",
+                    height: "24"
+                })
+            }),
+            /*#__PURE__*/ _jsx(ToggleIndicatorFg, {
+                viewBox: "0 0 24 24",
+                children: /*#__PURE__*/ _jsx("path", {
+                    d: "M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"
+                })
+            })
+        ]
+    });
 };
-export var ToggleIndicatorRounded = function (_a) {
-    var _b = _a.r, r = _b === void 0 ? 6 : _b;
-    var id = useId();
-    return (_jsxs(ToggleIndicatorHolder, { children: [_jsxs(ToggleIndicatorBgCircle, { viewBox: "0 0 24 24", children: [_jsx("circle", { cy: "12", cx: "12", r: "12", id: "r_".concat(id), clipPath: "url(#c_".concat(id, ")") }), _jsx("clipPath", { id: "c_".concat(id), children: _jsx("use", { xlinkHref: "#r_".concat(id) }) })] }), _jsx(ToggleIndicatorFg, { viewBox: "0 0 24 24", children: _jsx("circle", { r: r, cx: "12", cy: "12" }) })] }));
+export const ToggleIndicatorRounded = ({ r = 6 })=>{
+    const id = useId();
+    return /*#__PURE__*/ _jsxs(ToggleIndicatorHolder, {
+        children: [
+            /*#__PURE__*/ _jsxs(ToggleIndicatorBgCircle, {
+                viewBox: "0 0 24 24",
+                children: [
+                    /*#__PURE__*/ _jsx("circle", {
+                        cy: "12",
+                        cx: "12",
+                        r: "12",
+                        id: `r_${id}`,
+                        clipPath: `url(#c_${id})`
+                    }),
+                    /*#__PURE__*/ _jsx("clipPath", {
+                        id: `c_${id}`,
+                        children: /*#__PURE__*/ _jsx("use", {
+                            xlinkHref: `#r_${id}`
+                        })
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsx(ToggleIndicatorFg, {
+                viewBox: "0 0 24 24",
+                children: /*#__PURE__*/ _jsx("circle", {
+                    r: r,
+                    cx: "12",
+                    cy: "12"
+                })
+            })
+        ]
+    });
 };
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;

package/Forms/Toggle/index.js

@@ -1,4 +1,6 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var tslib_1 = require("tslib");
-tslib_1.__exportStar(require("./Toggle"), exports);
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+const _export_star = require("@swc/helpers/_/_export_star");
+_export_star._(require("./Toggle"), exports);

package/Forms/Toggle/useToggle-tailwind.js

@@ -1,4 +1,3 @@
-"use strict";
 // import React, { useCallback, useId, useMemo } from "react";
 // import type { Option } from "@koine/react";
 // import type { FormControlElementProps } from "../FormControl";
@@ -200,3 +199,4 @@
 //     Inputs,
 //   };
 // }
+"use strict";

package/Forms/Toggle/useToggle-tailwind.mjs

@@ -1,4 +1,3 @@
-"use strict";
 // import React, { useCallback, useId, useMemo } from "react";
 // import type { Option } from "@koine/react";
 // import type { FormControlElementProps } from "../FormControl";

package/Forms/Toggle/useToggle.js

@@ -1,60 +1,32 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useToggle = void 0;
-var tslib_1 = require("tslib");
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("react");
-var react_hook_form_1 = require("react-hook-form");
-var styles_1 = require("../styles");
-/**
- * This hook is meant to power Checkboxes, Switches and checkbox-like Radios
- * components, it works in fact in two modes:
- *
- * 1: behaviour as standard checkbox
- * yup validation would simply look like:
- *
- * ```ts
- * privacy:  boolean().required(),
- * // add `.nullable()` if you do not provide a boolean `defaultValue`
- * ```
- *
- * 2: beahviour as two radio for checkbox with custom true/false values as
- * strings yup validation would look like:
- *
- * ```ts
- * newsletter: string().oneOf(["yes", "no"]).required(),
- * // add `.nullable()` if you do not provide a string `defaultValue`
- *
- * // to do not make it required and avoid triggering an error when the input is
- * // untouched you need to set the default value of the input in the form
- * // initialization's `defaultValues` as such:
- *
- * useForm({ defaultValues: { newsletter: "no" }})
- * ```
- *
- * To enable this mode either pass the props `valueTrue` and `valueFalse` or
- * an array of options with the shape of `Option`
- */
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useToggle", {
+    enumerable: true,
+    get: function() {
+        return useToggle;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = require("react");
+const _reacthookform = require("react-hook-form");
+const _styles = require("../styles");
 function useToggle(props, ref) {
-    var name = props.name, control = props.control, register = props.register, label = props.label, options = props.options, propValue = props.value, restProps = tslib_1.__rest(props, ["name", "control", "register", "label", "options", "value"]);
-    var id = restProps.id, valueTrue = restProps.valueTrue, valueFalse = restProps.valueFalse, 
-    // defaultChecked,
+    const { name, control, register, label, options, value: propValue, ...restProps } = props;
+    let { id, valueTrue, valueFalse, // defaultChecked,
     // defaultValue,
     // eslint-disable-next-line prefer-const
-    remainingInputProps = tslib_1.__rest(restProps, ["id", "valueTrue", "valueFalse"]);
+    ...remainingInputProps } = restProps;
     // use options data convention to pass on the true/false values
     if (options) {
-        valueTrue = options
-            .filter(function (opt) { return opt.value === "true"; })[0]
-            .label.toString();
-        valueFalse = options
-            .filter(function (opt) { return opt.value === "false"; })[0]
-            .label.toString();
+        valueTrue = options.filter((opt)=>opt.value === "true")[0].label.toString();
+        valueFalse = options.filter((opt)=>opt.value === "false")[0].label.toString();
     }
-    id = "switch-".concat(name);
-    var idTrue = "".concat(id, "-true");
-    var idFalse = "".concat(id, "-false");
-    var isRadio = !!(valueTrue && valueFalse);
+    id = `switch-${name}`;
+    const idTrue = `${id}-true`;
+    const idFalse = `${id}-false`;
+    const isRadio = !!(valueTrue && valueFalse);
     // // manage default values for both toggle modes
     // defaultChecked = isUndefined(defaultChecked) ? false : defaultChecked;
     // // TODO: maybe throw an error if the defaultValue that arrives here is not
@@ -65,10 +37,9 @@ function useToggle(props, ref) {
     //     : valueFalse;
     // get the value either from the uncontrolled watched input or from the given
     // prop to control the component
-    var value = (0, react_hook_form_1.useWatch)({
-        name: name,
-        control: control,
-        // defaultValue: isRadio ? defaultValue : defaultChecked,
+    let value = (0, _reacthookform.useWatch)({
+        name,
+        control
     });
     if (propValue) {
         value = propValue;
@@ -77,60 +48,85 @@ function useToggle(props, ref) {
     // a `register` function, then check if we have a `control` object or just
     // rely on the `name` prop and `ref`, they probably would be passed alongside
     // an `onChange` prop that is spreaded on the inputs
-    var inputProps = (0, react_1.useMemo)(function () {
-        return register
-            ? register(name)
-            : control
-                ? control.register(name)
-                : {
-                    name: name,
-                    ref: ref,
-                };
-    }, [register, control, name, ref]);
+    const inputProps = (0, _react.useMemo)(()=>{
+        return register ? register(name) : control ? control.register(name) : {
+            name,
+            ref
+        };
+    }, [
+        register,
+        control,
+        name,
+        ref
+    ]);
     /**
-     * Accessibility.
-     *
-     * Fake the spacebar keyboard behaviour on the radio mode of the checkbox.
-     * Without this *only* the arrow keys would change the checkbox state
-     */
-    var handleKeyDown = (0, react_1.useCallback)(function (event) {
+   * Accessibility.
+   *
+   * Fake the spacebar keyboard behaviour on the radio mode of the checkbox.
+   * Without this *only* the arrow keys would change the checkbox state
+   */ const handleKeyDown = (0, _react.useCallback)((event)=>{
         if (event.key === " ") {
             event.preventDefault();
             event.stopPropagation();
-            var firstInput = event.target;
-            var next = firstInput.nextElementSibling;
-            var prev = firstInput.previousElementSibling;
-            var secondInput = (next === null || next === void 0 ? void 0 : next.tagName) === "INPUT" ? next : prev;
-            var target = firstInput;
+            const firstInput = event.target;
+            const next = firstInput.nextElementSibling;
+            const prev = firstInput.previousElementSibling;
+            const secondInput = next?.tagName === "INPUT" ? next : prev;
+            let target = firstInput;
             if (firstInput.checked) {
                 target = secondInput;
-            }
-            else {
+            } else {
                 if (!secondInput.checked) {
-                    target =
-                        firstInput.value === valueTrue ? firstInput : secondInput;
+                    target = firstInput.value === valueTrue ? firstInput : secondInput;
                 }
             }
-            if (target)
-                target.click();
+            if (target) target.click();
         }
-    }, [valueTrue]);
+    }, [
+        valueTrue
+    ]);
     // collect all the return values that are dependent on the current value
     // of the input
-    var valueDependentProps = (0, react_1.useMemo)(function () { return ({
-        rootProps: {
-            htmlFor: isRadio
-                ? !value || value === valueFalse
-                    ? idTrue
-                    : idFalse
-                : id,
-        },
-        label: label ? label : value,
-        value: value,
-    }); }, [value, valueFalse, isRadio, id, idTrue, idFalse, label]);
-    var Inputs = (0, react_1.useMemo)(function () {
-        return isRadio ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(styles_1.InputInvisible, tslib_1.__assign({ id: idFalse }, inputProps, remainingInputProps, { onKeyDown: handleKeyDown, type: "radio", value: valueFalse })), (0, jsx_runtime_1.jsx)(styles_1.InputInvisible, tslib_1.__assign({ id: idTrue }, inputProps, remainingInputProps, { onKeyDown: handleKeyDown, type: "radio", value: valueTrue }))] })) : ((0, jsx_runtime_1.jsx)(styles_1.InputInvisible, tslib_1.__assign({ id: id, type: "checkbox" }, inputProps, remainingInputProps)));
-    }, [
+    const valueDependentProps = (0, _react.useMemo)(()=>({
+            rootProps: {
+                htmlFor: isRadio ? !value || value === valueFalse ? idTrue : idFalse : id
+            },
+            label: label ? label : value,
+            value
+        }), [
+        value,
+        valueFalse,
+        isRadio,
+        id,
+        idTrue,
+        idFalse,
+        label
+    ]);
+    const Inputs = (0, _react.useMemo)(()=>isRadio ? /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+            children: [
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_styles.InputInvisible, {
+                    id: idFalse,
+                    ...inputProps,
+                    ...remainingInputProps,
+                    onKeyDown: handleKeyDown,
+                    type: "radio",
+                    value: valueFalse
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_styles.InputInvisible, {
+                    id: idTrue,
+                    ...inputProps,
+                    ...remainingInputProps,
+                    onKeyDown: handleKeyDown,
+                    type: "radio",
+                    value: valueTrue
+                })
+            ]
+        }) : /*#__PURE__*/ (0, _jsxruntime.jsx)(_styles.InputInvisible, {
+            id: id,
+            type: "checkbox",
+            ...inputProps,
+            ...remainingInputProps
+        }), [
         inputProps,
         remainingInputProps,
         handleKeyDown,
@@ -139,11 +135,11 @@ function useToggle(props, ref) {
         idTrue,
         valueFalse,
         valueTrue,
-        id,
-        // defaultChecked,
-        // defaultValue,
+        id
     ]);
     // console.log("useToggle: render", value);
-    return tslib_1.__assign(tslib_1.__assign({}, valueDependentProps), { Inputs: Inputs });
+    return {
+        ...valueDependentProps,
+        Inputs
+    };
 }
-exports.useToggle = useToggle;