@koine/react 2.0.0-beta.2 → 2.0.0-beta.20

package/Forms/Toggle/Toggle.js

@@ -1,36 +1,25 @@
-"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" }) })] }));
+import { __makeTemplateObject } from "tslib";
+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.js";
+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" }) })] }));
 };
-exports.ToggleIndicatorSquared = ToggleIndicatorSquared;
-var ToggleIndicatorRounded = function (_a) {
+export 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" }) })] }));
+    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" }) })] }));
 };
-exports.ToggleIndicatorRounded = ToggleIndicatorRounded;
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;

package/Forms/Toggle/index.d.ts

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

package/Forms/Toggle/index.js

@@ -1,4 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var tslib_1 = require("tslib");
-tslib_1.__exportStar(require("./Toggle"), exports);
+export * from "./Toggle.js";

package/Forms/Toggle/useToggle-tailwind.js

@@ -1,202 +1 @@
 "use strict";
-// import React, { useCallback, useId, useMemo } from "react";
-// import type { Option } from "@koine/react";
-// import type { FormControlElementProps } from "../FormControl";
-// export type UseToggleProps = FormControlElementProps<React.FC> & {
-//   // defaultChecked?: boolean;
-//   value?: boolean;
-//   valueTrue?: string;
-//   valueFalse?: string;
-//   options?: Option[];
-// };
-// /**
-//  * 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(),
-//  * ```
-//  *
-//  * 1b: to make the checkbox required (either with `true` or `false`):
-//  * ```
-//  * privacy: boolean().oneOf([true]).required()
-//  * ```
-//  *
-//  * 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`
-//  */
-// export function useToggle(
-//   props: UseToggleProps,
-//   ref: React.ForwardedRef<HTMLInputElement>
-// ) {
-//   const {
-//     actions,
-//     form: { watch, register },
-//     name,
-//     state,
-//     strings: { label },
-//     options,
-//     value: propValue,
-//     ...restProps
-//   } = props;
-//   let {
-//     valueTrue,
-//     valueFalse,
-//     // defaultChecked,
-//     // defaultValue,
-//     // eslint-disable-next-line prefer-const
-//     // ...remainingInputProps
-//   } = restProps;
-//   // use options data convention to pass on the true/false values
-//   if (options) {
-//     valueTrue = options
-//       .filter((opt) => opt.value === "true")[0]
-//       .label.toString();
-//     valueFalse = options
-//       .filter((opt) => opt.value === "false")[0]
-//       .label.toString();
-//   }
-//   const id = useId();
-//   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
-//   // // a valid value
-//   // defaultValue =
-//   //   defaultValue === valueTrue || defaultValue === valueFalse
-//   //     ? defaultValue
-//   //     : valueFalse;
-//   // get the value either from the uncontrolled watched input or from the given
-//   // prop to control the component
-//   let value = watch(name);
-//   if (propValue) {
-//     value = propValue;
-//   }
-//   /**
-//    * 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: React.KeyboardEventHandler<HTMLInputElement> =
-//     useCallback(
-//       (event) => {
-//         if (event.key === " ") {
-//           event.preventDefault();
-//           event.stopPropagation();
-//           const firstInput = event.target as HTMLInputElement;
-//           const next = firstInput.nextElementSibling as HTMLInputElement;
-//           const prev = firstInput.previousElementSibling as HTMLInputElement;
-//           const secondInput = next?.tagName === "INPUT" ? next : prev;
-//           let target = firstInput;
-//           if (firstInput.checked) {
-//             target = secondInput;
-//           } else {
-//             if (!secondInput.checked) {
-//               target =
-//                 firstInput.value === valueTrue ? firstInput : secondInput;
-//             }
-//           }
-//           if (target) target.click();
-//         }
-//       },
-//       [valueTrue]
-//     );
-//   // collect all the return values that are dependent on the current value
-//   // of the input
-//   const valueDependentProps = useMemo(
-//     () => ({
-//       rootProps: {
-//         htmlFor: isRadio
-//           ? !value || value === valueFalse
-//             ? idTrue
-//             : idFalse
-//           : id,
-//       },
-//       label: label ? label : value,
-//       value,
-//     }),
-//     [value, valueFalse, isRadio, id, idTrue, idFalse, label]
-//   );
-//   const Inputs = useMemo(
-//     () =>
-//       isRadio ? (
-//         <>
-//           <input
-//             className="peer sr-only"
-//             id={idFalse}
-//             {...register(name, {
-//               onBlur: () => actions.setFocused(false),
-//             })}
-//             onFocus={() => actions.setFocused(true)}
-//             // {...remainingInputProps}
-//             onKeyDown={handleKeyDown}
-//             type="radio"
-//             value={valueFalse}
-//             // defaultChecked={defaultValue === valueFalse}
-//           />
-//           <input
-//             className="peer sr-only"
-//             id={idTrue}
-//             {...register(name, {
-//               onBlur: () => actions.setFocused(false),
-//             })}
-//             onFocus={() => actions.setFocused(true)}
-//             // {...remainingInputProps}
-//             onKeyDown={handleKeyDown}
-//             type="radio"
-//             value={valueTrue}
-//             // defaultChecked={defaultValue === valueTrue}
-//           />
-//         </>
-//       ) : (
-//         <input
-//           className="peer sr-only"
-//           id={id}
-//           type="checkbox"
-//           {...register(name, { onBlur: () => actions.setFocused(false) })}
-//           onFocus={() => actions.setFocused(true)}
-//           // {...remainingInputProps}
-//           // defaultChecked={defaultChecked}
-//         />
-//       ),
-//     [
-//       name,
-//       actions,
-//       // remainingInputProps,
-//       handleKeyDown,
-//       isRadio,
-//       idFalse,
-//       idTrue,
-//       valueFalse,
-//       valueTrue,
-//       id,
-//       // defaultChecked,
-//       // defaultValue,
-//     ]
-//   );
-//   // console.log("useToggle: render", value);
-//   return {
-//     ...valueDependentProps,
-//     Inputs,
-//   };
-// }

package/Forms/Toggle/useToggle.d.ts

@@ -1,5 +1,4 @@
-/// <reference types="react" />
-import type { Option } from "../../types";
+import type { Option } from "../../types.js";
 import { FormControl } from "../helpers";
 export type UseToggleProps = Omit<FormControl, "value"> & {
     value?: boolean;
@@ -7,35 +6,6 @@ export type UseToggleProps = Omit<FormControl, "value"> & {
     valueFalse?: string;
     options?: Option[];
 };
-/**
- * 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`
- */
 export declare function useToggle(props: UseToggleProps, ref: React.ForwardedRef<HTMLInputElement>): {
     Inputs: import("react/jsx-runtime").JSX.Element;
     rootProps: {

package/Forms/Toggle/useToggle.js

@@ -1,48 +1,11 @@
-"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`
- */
-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,
-    // defaultValue,
-    // eslint-disable-next-line prefer-const
-    remainingInputProps = tslib_1.__rest(restProps, ["id", "valueTrue", "valueFalse"]);
-    // use options data convention to pass on the true/false values
+import { __assign, __rest } from "tslib";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useMemo } from "react";
+import { useWatch } from "react-hook-form";
+import { InputInvisible } from "../styles.js";
+export function useToggle(props, ref) {
+    var name = props.name, control = props.control, register = props.register, label = props.label, options = props.options, propValue = props.value, restProps = __rest(props, ["name", "control", "register", "label", "options", "value"]);
+    var id = restProps.id, valueTrue = restProps.valueTrue, valueFalse = restProps.valueFalse, remainingInputProps = __rest(restProps, ["id", "valueTrue", "valueFalse"]);
     if (options) {
         valueTrue = options
             .filter(function (opt) { return opt.value === "true"; })[0]
@@ -55,29 +18,14 @@ function useToggle(props, ref) {
     var idTrue = "".concat(id, "-true");
     var idFalse = "".concat(id, "-false");
     var 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
-    // // a valid value
-    // defaultValue =
-    //   defaultValue === valueTrue || defaultValue === valueFalse
-    //     ? defaultValue
-    //     : 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)({
+    var value = useWatch({
         name: name,
         control: control,
-        // defaultValue: isRadio ? defaultValue : defaultChecked,
     });
     if (propValue) {
         value = propValue;
     }
-    // get the input props needed by react-hook-form, first check if we have
-    // 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 () {
+    var inputProps = useMemo(function () {
         return register
             ? register(name)
             : control
@@ -87,13 +35,7 @@ function useToggle(props, ref) {
                     ref: 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) {
+    var handleKeyDown = useCallback(function (event) {
         if (event.key === " ") {
             event.preventDefault();
             event.stopPropagation();
@@ -115,9 +57,7 @@ function useToggle(props, ref) {
                 target.click();
         }
     }, [valueTrue]);
-    // collect all the return values that are dependent on the current value
-    // of the input
-    var valueDependentProps = (0, react_1.useMemo)(function () { return ({
+    var valueDependentProps = useMemo(function () { return ({
         rootProps: {
             htmlFor: isRadio
                 ? !value || value === valueFalse
@@ -128,8 +68,8 @@ function useToggle(props, ref) {
         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)));
+    var Inputs = useMemo(function () {
+        return isRadio ? (_jsxs(_Fragment, { children: [_jsx(InputInvisible, __assign({ id: idFalse }, inputProps, remainingInputProps, { onKeyDown: handleKeyDown, type: "radio", value: valueFalse })), _jsx(InputInvisible, __assign({ id: idTrue }, inputProps, remainingInputProps, { onKeyDown: handleKeyDown, type: "radio", value: valueTrue }))] })) : (_jsx(InputInvisible, __assign({ id: id, type: "checkbox" }, inputProps, remainingInputProps)));
     }, [
         inputProps,
         remainingInputProps,
@@ -140,10 +80,6 @@ function useToggle(props, ref) {
         valueFalse,
         valueTrue,
         id,
-        // defaultChecked,
-        // defaultValue,
     ]);
-    // console.log("useToggle: render", value);
-    return tslib_1.__assign(tslib_1.__assign({}, valueDependentProps), { Inputs: Inputs });
+    return __assign(__assign({}, valueDependentProps), { Inputs: Inputs });
 }
-exports.useToggle = useToggle;

package/Forms/antispam.d.ts

@@ -1,15 +1,4 @@
 import { type ObjectShape } from "@kuus/yup";
-/**
- * Encode form
- *
- * Takes a record of yup validations and outputs a `yup` schema with encoded
- * names (antispam technique) and a record of the encoded/decoded input `name`s.
- *
- * We skip the names prefixed wth an underscore which are considered programmatic
- * form data not created by user input.
- *
- * FIXME: types https://github.com/jquense/yup/issues/1700
- */
 export declare function encodeForm<T extends ObjectShape = {}>(validationRules: T): {
     encodedSchema: import("@kuus/yup").ObjectSchema<{
         [x: string]: T[keyof T] extends import("@kuus/yup").ISchema<any, any, any, any> ? T[keyof T]["__outputType"] : T[keyof T] extends {
@@ -35,13 +24,4 @@ export declare function encodeForm<T extends ObjectShape = {}>(validationRules:
     }, "">;
     encodedNames: Record<keyof T, string>;
 };
-/**
- * Decode form data
- *
- * This function is meant to be used inside an api endpoint to gather an encoded
- * form submit data and transform it to the decoded desired json data.
- *
- * Here too we skip encoding/decoding process for names prefixed wth an underscore
- * which are considered programmatic form data not created by user input.
- */
 export declare function decodeForm<ReturnAs extends Record<string, unknown> = {}, FormData extends Record<string, unknown> = {}>(formData: FormData): ReturnAs;

package/Forms/antispam.js

@@ -1,66 +1,29 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.decodeForm = exports.encodeForm = void 0;
-var tslib_1 = require("tslib");
-var yup_1 = require("@kuus/yup");
-var encode_1 = tslib_1.__importDefault(require("@koine/utils/encode"));
-var decode_1 = tslib_1.__importDefault(require("@koine/utils/decode"));
-var isUndefined_1 = tslib_1.__importDefault(require("@koine/utils/isUndefined"));
-/**
- * Encode form
- *
- * Takes a record of yup validations and outputs a `yup` schema with encoded
- * names (antispam technique) and a record of the encoded/decoded input `name`s.
- *
- * We skip the names prefixed wth an underscore which are considered programmatic
- * form data not created by user input.
- *
- * FIXME: types https://github.com/jquense/yup/issues/1700
- */
-function encodeForm(validationRules) {
+import { object } from "@kuus/yup";
+import { decode, encode, isUndefined } from "@koine/utils";
+export function encodeForm(validationRules) {
     var encoded = {};
     var encodedNames = {};
     for (var name_1 in validationRules) {
         if (!name_1.startsWith("_")) {
-            var encodedName = (0, encode_1.default)(name_1);
+            var encodedName = encode(name_1);
             encoded[encodedName] = validationRules[name_1];
             encodedNames[name_1] = encodedName;
         }
     }
-    // we need `.required()` to correctly infer the type @see
-    // https://github.com/jquense/yup/issues/946
-    var encodedSchema = (0, yup_1.object)(encoded).required();
+    var encodedSchema = object(encoded).required();
     return { encodedSchema: encodedSchema, encodedNames: encodedNames };
 }
-exports.encodeForm = encodeForm;
-/**
- * Decode form data
- *
- * This function is meant to be used inside an api endpoint to gather an encoded
- * form submit data and transform it to the decoded desired json data.
- *
- * Here too we skip encoding/decoding process for names prefixed wth an underscore
- * which are considered programmatic form data not created by user input.
- */
-function decodeForm(formData) {
+export function decodeForm(formData) {
     var json = {};
     for (var encodedName in formData) {
-        var decodedName = (0, decode_1.default)(encodedName);
-        // always add underscore prefixed names as they are treated as internal
-        // private inputs outside of the honeypot system, normalise them here removing
-        // the underscore prefix
+        var decodedName = decode(encodedName);
         if (encodedName.startsWith("_")) {
-            // @ts-expect-error nevermind
             json[encodedName.substring(1)] = formData[encodedName];
         }
-        // if the decoded `name` is empty and the encoded `name` is defined honeypot passed
-        else if (!(0, isUndefined_1.default)(formData[encodedName]) &&
+        else if (!isUndefined(formData[encodedName]) &&
             formData[decodedName] === "") {
-            // @ts-expect-error nevermind
             json[decodedName] = formData[encodedName];
         }
     }
-    // console.log(formData, decoded, json);
     return json;
 }
-exports.decodeForm = decodeForm;

package/Forms/helpers.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { Control, UseFormRegister, UseFormSetValue } from "react-hook-form";
 import type { Option } from "../types";
 type FormControlNativeType = "input" | "select" | "textarea";
@@ -14,13 +13,6 @@ export type FormControlProps<T extends FormControlFieldValues = any> = {
 export type FormControl<TControlType extends FormControlNativeType = "input", TFieldValues extends FormControlFieldValues = any> = FormControlNative<TControlType> & FormControlProps<TFieldValues>;
 export declare const normaliseOptions: (options?: (string | Option)[]) => Option[];
 export declare function defaultOptionsFilterFn(options: Option[], inputValue?: string): Option[];
-/**
- * We are faking the native input `onChange` event
- */
 export declare function triggerOnChange<T extends HTMLElement = HTMLInputElement>(onChange?: React.ChangeEventHandler<T>, name?: string, value?: any): void;
-/**
- * @see https://hustle.bizongo.in/simulate-react-on-change-on-controlled-components-baa336920e04
- * @deprecated
- */
 export declare function triggerChange(input: HTMLInputElement, value?: string): void;
 export {};

package/Forms/helpers.js

@@ -1,13 +1,8 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.triggerChange = exports.triggerOnChange = exports.defaultOptionsFilterFn = exports.normaliseOptions = void 0;
-var tslib_1 = require("tslib");
-var isString_1 = tslib_1.__importDefault(require("@koine/utils/isString"));
-var matchSorter_1 = tslib_1.__importDefault(require("@koine/utils/matchSorter"));
-var normaliseOptions = function (options) {
+import { isString, matchSorter } from "@koine/utils";
+export var normaliseOptions = function (options) {
     if (options === void 0) { options = []; }
     return options.map(function (option) {
-        return (0, isString_1.default)(option)
+        return isString(option)
             ? {
                 label: option,
                 value: option,
@@ -15,28 +10,17 @@ var normaliseOptions = function (options) {
             : option;
     });
 };
-exports.normaliseOptions = normaliseOptions;
-function defaultOptionsFilterFn(options, inputValue) {
+export function defaultOptionsFilterFn(options, inputValue) {
     if (!inputValue) {
         return options;
     }
-    return (0, matchSorter_1.default)(options, inputValue, { keys: ["value", "label"] });
+    return matchSorter(options, inputValue, { keys: ["value", "label"] });
 }
-exports.defaultOptionsFilterFn = defaultOptionsFilterFn;
-/**
- * We are faking the native input `onChange` event
- */
-function triggerOnChange(onChange, name, value) {
-    // @ts-expect-error nevermind
+export function triggerOnChange(onChange, name, value) {
     if (onChange)
         onChange({ target: { name: name, value: value } });
 }
-exports.triggerOnChange = triggerOnChange;
-/**
- * @see https://hustle.bizongo.in/simulate-react-on-change-on-controlled-components-baa336920e04
- * @deprecated
- */
-function triggerChange(input, value) {
+export function triggerChange(input, value) {
     var obj = window.Object;
     if (!obj) {
         if (process.env["NODE_ENV"] !== "production") {
@@ -44,11 +28,8 @@ function triggerChange(input, value) {
         }
         return;
     }
-    // @ts-expect-error nevermind
     var nativeInputValueSetter = obj.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, "value").set;
-    // @ts-expect-error nevermind
     nativeInputValueSetter.call(input, value);
     var inputEvent = new Event("input", { bubbles: true });
     input.dispatchEvent(inputEvent);
 }
-exports.triggerChange = triggerChange;