@koine/react 1.1.10 → 1.1.12

package/Forms/Textarea/TextareaRich.d.ts

@@ -3,4 +3,4 @@ import { FormControl } from "../helpers";
 export type TextareaRichProps = FormControl<"textarea"> & {
     defaultValue?: string;
 };
-export declare const TextareaRich: import("react").ForwardRefExoticComponent<Pick<TextareaRichProps, "key" | "value" | "id" | "title" | "color" | "form" | "slot" | "style" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "lang" | "nonce" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "disabled" | "autoFocus" | "autoComplete" | "maxLength" | "minLength" | "readOnly" | "required" | "cols" | "dirName" | "rows" | "wrap" | keyof import("../helpers").FormControlProps<any>> & import("react").RefAttributes<HTMLTextAreaElement>>;
+export declare const TextareaRich: import("react").ForwardRefExoticComponent<Omit<TextareaRichProps, "ref"> & import("react").RefAttributes<HTMLTextAreaElement>>;

package/Forms/Textarea/TextareaRich.js

@@ -1,17 +1,20 @@
-import { __assign, __makeTemplateObject, __rest } from "tslib";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef } from "react";
-import styled from "styled-components";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TextareaRich = void 0;
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var styled_components_1 = tslib_1.__importDefault(require("styled-components"));
 // import TextareaAutosize from "@mui/base/TextareaAutosize";
-import { Label } from "../Label/Label";
-import { Editor } from "../../Editor";
-import { triggerOnChange } from "../helpers";
-var Root = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  .ProseMirror {\n    max-height: 160px;\n    overflow: auto;\n  }\n  .EditorContent {\n    position: relative;\n    &:after {\n      position: absolute;\n      content: \"\";\n      bottom: 0;\n      left: 0;\n      right: 16px; /* scrollbar width? */\n      height: 3em;\n      background: linear-gradient(0deg, white, white 33%, transparent);\n      pointer-events: none;\n    }\n  }\n"], ["\n  .ProseMirror {\n    max-height: 160px;\n    overflow: auto;\n  }\n  .EditorContent {\n    position: relative;\n    &:after {\n      position: absolute;\n      content: \"\";\n      bottom: 0;\n      left: 0;\n      right: 16px; /* scrollbar width? */\n      height: 3em;\n      background: linear-gradient(0deg, white, white 33%, transparent);\n      pointer-events: none;\n    }\n  }\n"])));
-export var TextareaRich = forwardRef(function TextareaRich(_a, ref) {
-    var register = _a.register, setValue = _a.setValue, name = _a.name, label = _a.label, _b = _a.defaultValue, defaultValue = _b === void 0 ? "" : _b, onChange = _a.onChange, props = __rest(_a, ["register", "setValue", "name", "label", "defaultValue", "onChange"]);
+var Label_1 = require("../Label/Label");
+var Editor_1 = require("../../Editor");
+var helpers_1 = require("../helpers");
+var Root = styled_components_1.default.div(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  .ProseMirror {\n    max-height: 160px;\n    overflow: auto;\n  }\n  .EditorContent {\n    position: relative;\n    &:after {\n      position: absolute;\n      content: \"\";\n      bottom: 0;\n      left: 0;\n      right: 16px; /* scrollbar width? */\n      height: 3em;\n      background: linear-gradient(0deg, white, white 33%, transparent);\n      pointer-events: none;\n    }\n  }\n"], ["\n  .ProseMirror {\n    max-height: 160px;\n    overflow: auto;\n  }\n  .EditorContent {\n    position: relative;\n    &:after {\n      position: absolute;\n      content: \"\";\n      bottom: 0;\n      left: 0;\n      right: 16px; /* scrollbar width? */\n      height: 3em;\n      background: linear-gradient(0deg, white, white 33%, transparent);\n      pointer-events: none;\n    }\n  }\n"])));
+exports.TextareaRich = (0, react_1.forwardRef)(function TextareaRich(_a, ref) {
+    var register = _a.register, setValue = _a.setValue, name = _a.name, label = _a.label, _b = _a.defaultValue, defaultValue = _b === void 0 ? "" : _b, onChange = _a.onChange, props = tslib_1.__rest(_a, ["register", "setValue", "name", "label", "defaultValue", "onChange"]);
     if (register)
         register(name);
-    return (_jsxs(Root, { children: [label && _jsx(Label, { children: label }), _jsx(Editor, __assign({ options: {
+    return ((0, jsx_runtime_1.jsxs)(Root, { children: [label && (0, jsx_runtime_1.jsx)(Label_1.Label, { children: label }), (0, jsx_runtime_1.jsx)(Editor_1.Editor, tslib_1.__assign({ options: {
                     // element: <TextareaAutosize />,
                     content: defaultValue,
                     onUpdate: (onChange || setValue) && name
@@ -20,7 +23,7 @@ export var TextareaRich = forwardRef(function TextareaRich(_a, ref) {
                             var value = editor.getHTML();
                             if (setValue)
                                 setValue(name, value);
-                            triggerOnChange(onChange, name, value);
+                            (0, helpers_1.triggerOnChange)(onChange, name, value);
                         }
                         : undefined,
                 } }, props))] }));

package/Forms/Textarea/TextareaRich.mjs

@@ -0,0 +1,28 @@
+import { __assign, __makeTemplateObject, __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import styled from "styled-components";
+// import TextareaAutosize from "@mui/base/TextareaAutosize";
+import { Label } from "../Label/Label";
+import { Editor } from "../../Editor";
+import { triggerOnChange } from "../helpers";
+var Root = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  .ProseMirror {\n    max-height: 160px;\n    overflow: auto;\n  }\n  .EditorContent {\n    position: relative;\n    &:after {\n      position: absolute;\n      content: \"\";\n      bottom: 0;\n      left: 0;\n      right: 16px; /* scrollbar width? */\n      height: 3em;\n      background: linear-gradient(0deg, white, white 33%, transparent);\n      pointer-events: none;\n    }\n  }\n"], ["\n  .ProseMirror {\n    max-height: 160px;\n    overflow: auto;\n  }\n  .EditorContent {\n    position: relative;\n    &:after {\n      position: absolute;\n      content: \"\";\n      bottom: 0;\n      left: 0;\n      right: 16px; /* scrollbar width? */\n      height: 3em;\n      background: linear-gradient(0deg, white, white 33%, transparent);\n      pointer-events: none;\n    }\n  }\n"])));
+export var TextareaRich = forwardRef(function TextareaRich(_a, ref) {
+    var register = _a.register, setValue = _a.setValue, name = _a.name, label = _a.label, _b = _a.defaultValue, defaultValue = _b === void 0 ? "" : _b, onChange = _a.onChange, props = __rest(_a, ["register", "setValue", "name", "label", "defaultValue", "onChange"]);
+    if (register)
+        register(name);
+    return (_jsxs(Root, { children: [label && _jsx(Label, { children: label }), _jsx(Editor, __assign({ options: {
+                    // element: <TextareaAutosize />,
+                    content: defaultValue,
+                    onUpdate: (onChange || setValue) && name
+                        ? function (_a) {
+                            var editor = _a.editor;
+                            var value = editor.getHTML();
+                            if (setValue)
+                                setValue(name, value);
+                            triggerOnChange(onChange, name, value);
+                        }
+                        : undefined,
+                } }, props))] }));
+});
+var templateObject_1;

package/Forms/Textarea/index.js

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

package/Forms/Textarea/index.mjs

@@ -0,0 +1,2 @@
+export * from "./Textarea";
+export * from "./TextareaRich";

package/Forms/Textarea/package.json

@@ -1,6 +1,6 @@
 {
   "sideEffects": false,
-  "module": "./index.js",
-  "main": "../../node/Forms/Textarea/index.js",
+  "module": "./index.mjs",
+  "main": "./index.js",
   "types": "./index.d.ts"
 }

package/Forms/Toggle/Toggle.js

@@ -1,31 +1,36 @@
-import { __assign, __makeTemplateObject } from "tslib";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+"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
  */
-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, __assign({ viewBox: "0 0 24 24" }, { children: _jsx("rect", { width: "24", height: "24" }) })), _jsx(ToggleIndicatorFg, __assign({ 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" }) }))] }));
+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, tslib_1.__assign({ viewBox: "0 0 24 24" }, { children: (0, jsx_runtime_1.jsx)("rect", { width: "24", height: "24" }) })), (0, jsx_runtime_1.jsx)(exports.ToggleIndicatorFg, tslib_1.__assign({ 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" }) }))] }));
 };
-export var ToggleIndicatorRounded = function (_a) {
+exports.ToggleIndicatorSquared = ToggleIndicatorSquared;
+var ToggleIndicatorRounded = function (_a) {
     var _b = _a.r, r = _b === void 0 ? 6 : _b;
-    var id = useId();
-    return (_jsxs(ToggleIndicatorHolder, { children: [_jsxs(ToggleIndicatorBgCircle, __assign({ 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", __assign({ id: "c_".concat(id) }, { children: _jsx("use", { xlinkHref: "#r_".concat(id) }) }))] })), _jsx(ToggleIndicatorFg, __assign({ viewBox: "0 0 24 24" }, { children: _jsx("circle", { r: r, cx: "12", cy: "12" }) }))] }));
+    var id = (0, react_1.useId)();
+    return ((0, jsx_runtime_1.jsxs)(exports.ToggleIndicatorHolder, { children: [(0, jsx_runtime_1.jsxs)(exports.ToggleIndicatorBgCircle, tslib_1.__assign({ 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", tslib_1.__assign({ id: "c_".concat(id) }, { children: (0, jsx_runtime_1.jsx)("use", { xlinkHref: "#r_".concat(id) }) }))] })), (0, jsx_runtime_1.jsx)(exports.ToggleIndicatorFg, tslib_1.__assign({ viewBox: "0 0 24 24" }, { children: (0, jsx_runtime_1.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

@@ -0,0 +1,31 @@
+import { __assign, __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 { 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, __assign({ viewBox: "0 0 24 24" }, { children: _jsx("rect", { width: "24", height: "24" }) })), _jsx(ToggleIndicatorFg, __assign({ 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 var ToggleIndicatorRounded = function (_a) {
+    var _b = _a.r, r = _b === void 0 ? 6 : _b;
+    var id = useId();
+    return (_jsxs(ToggleIndicatorHolder, { children: [_jsxs(ToggleIndicatorBgCircle, __assign({ 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", __assign({ id: "c_".concat(id) }, { children: _jsx("use", { xlinkHref: "#r_".concat(id) }) }))] })), _jsx(ToggleIndicatorFg, __assign({ viewBox: "0 0 24 24" }, { children: _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 +1,4 @@
-export * from "./Toggle";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./Toggle"), exports);

package/Forms/Toggle/index.mjs

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

package/Forms/Toggle/package.json

@@ -1,6 +1,6 @@
 {
   "sideEffects": false,
-  "module": "./index.js",
-  "main": "../../node/Forms/Toggle/index.js",
+  "module": "./index.mjs",
+  "main": "./index.js",
   "types": "./index.d.ts"
 }

package/Forms/Toggle/useToggle.js

@@ -1,8 +1,11 @@
-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";
+"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:
@@ -32,13 +35,13 @@ import { InputInvisible } from "../styles";
  * 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, 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"]);
+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 = __rest(restProps, ["id", "valueTrue", "valueFalse"]);
+    remainingInputProps = tslib_1.__rest(restProps, ["id", "valueTrue", "valueFalse"]);
     // use options data convention to pass on the true/false values
     if (options) {
         valueTrue = options
@@ -62,7 +65,7 @@ export 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 = useWatch({
+    var value = (0, react_hook_form_1.useWatch)({
         name: name,
         control: control,
         // defaultValue: isRadio ? defaultValue : defaultChecked,
@@ -74,7 +77,7 @@ export 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 = useMemo(function () {
+    var inputProps = (0, react_1.useMemo)(function () {
         return register
             ? register(name)
             : control
@@ -90,7 +93,7 @@ export function useToggle(props, ref) {
      * 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 = useCallback(function (event) {
+    var handleKeyDown = (0, react_1.useCallback)(function (event) {
         if (event.key === " ") {
             event.preventDefault();
             event.stopPropagation();
@@ -114,7 +117,7 @@ export function useToggle(props, ref) {
     }, [valueTrue]);
     // collect all the return values that are dependent on the current value
     // of the input
-    var valueDependentProps = useMemo(function () { return ({
+    var valueDependentProps = (0, react_1.useMemo)(function () { return ({
         rootProps: {
             htmlFor: isRadio
                 ? !value || value === valueFalse
@@ -125,8 +128,8 @@ export function useToggle(props, ref) {
         label: label ? label : value,
         value: value,
     }); }, [value, valueFalse, isRadio, id, idTrue, idFalse, label]);
-    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)));
+    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)));
     }, [
         inputProps,
         remainingInputProps,
@@ -141,5 +144,6 @@ export function useToggle(props, ref) {
         // defaultValue,
     ]);
     // console.log("useToggle: render", value);
-    return __assign(__assign({}, valueDependentProps), { Inputs: Inputs });
+    return tslib_1.__assign(tslib_1.__assign({}, valueDependentProps), { Inputs: Inputs });
 }
+exports.useToggle = useToggle;

package/{node/Forms/Toggle/useToggle.js → Forms/Toggle/useToggle.mjs}

@@ -1,11 +1,8 @@
-"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");
+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";
 /**
  * This hook is meant to power Checkboxes, Switches and checkbox-like Radios
  * components, it works in fact in two modes:
@@ -35,13 +32,13 @@ var styles_1 = require("../styles");
  * 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"]);
+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, 
     // defaultChecked,
     // defaultValue,
     // eslint-disable-next-line prefer-const
-    remainingInputProps = tslib_1.__rest(restProps, ["id", "valueTrue", "valueFalse"]);
+    remainingInputProps = __rest(restProps, ["id", "valueTrue", "valueFalse"]);
     // use options data convention to pass on the true/false values
     if (options) {
         valueTrue = options
@@ -65,7 +62,7 @@ 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)({
+    var value = useWatch({
         name: name,
         control: control,
         // defaultValue: isRadio ? defaultValue : defaultChecked,
@@ -77,7 +74,7 @@ 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 () {
+    var inputProps = useMemo(function () {
         return register
             ? register(name)
             : control
@@ -93,7 +90,7 @@ function useToggle(props, ref) {
      * 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();
@@ -117,7 +114,7 @@ function useToggle(props, ref) {
     }, [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 +125,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,
@@ -144,6 +141,5 @@ function useToggle(props, ref) {
         // 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.js

@@ -1,7 +1,11 @@
-import { object } from "@kuus/yup";
-import encode from "@koine/utils/encode";
-import decode from "@koine/utils/decode";
-import isUndefined from "@koine/utils/isUndefined";
+"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
  *
@@ -13,21 +17,22 @@ import isUndefined from "@koine/utils/isUndefined";
  *
  * FIXME: types https://github.com/jquense/yup/issues/1700
  */
-export function encodeForm(validationRules) {
+function encodeForm(validationRules) {
     var encoded = {};
     var encodedNames = {};
     for (var name_1 in validationRules) {
         if (!name_1.startsWith("_")) {
-            var encodedName = encode(name_1);
+            var encodedName = (0, encode_1.default)(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 = object(encoded).required();
+    var encodedSchema = (0, yup_1.object)(encoded).required();
     return { encodedSchema: encodedSchema, encodedNames: encodedNames };
 }
+exports.encodeForm = encodeForm;
 /**
  * Decode form data
  *
@@ -37,10 +42,10 @@ export function encodeForm(validationRules) {
  * 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 function decodeForm(formData) {
+function decodeForm(formData) {
     var json = {};
     for (var encodedName in formData) {
-        var decodedName = decode(encodedName);
+        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
@@ -49,7 +54,7 @@ export function decodeForm(formData) {
             json[encodedName.substring(1)] = formData[encodedName];
         }
         // if the decoded `name` is empty and the encoded `name` is defined honeypot passed
-        else if (!isUndefined(formData[encodedName]) &&
+        else if (!(0, isUndefined_1.default)(formData[encodedName]) &&
             formData[decodedName] === "") {
             // @ts-expect-error nevermind
             json[decodedName] = formData[encodedName];
@@ -58,3 +63,4 @@ export function decodeForm(formData) {
     // console.log(formData, decoded, json);
     return json;
 }
+exports.decodeForm = decodeForm;

package/{node/Forms/antispam.js → Forms/antispam.mjs}

@@ -1,11 +1,7 @@
-"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"));
+import { object } from "@kuus/yup";
+import encode from "@koine/utils/encode";
+import decode from "@koine/utils/decode";
+import isUndefined from "@koine/utils/isUndefined";
 /**
  * Encode form
  *
@@ -17,22 +13,21 @@ var isUndefined_1 = tslib_1.__importDefault(require("@koine/utils/isUndefined"))
  *
  * FIXME: types https://github.com/jquense/yup/issues/1700
  */
-function encodeForm(validationRules) {
+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
  *
@@ -42,10 +37,10 @@ exports.encodeForm = encodeForm;
  * 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);
+        var decodedName = decode(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
@@ -54,7 +49,7 @@ function decodeForm(formData) {
             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];
@@ -63,4 +58,3 @@ function decodeForm(formData) {
     // console.log(formData, decoded, json);
     return json;
 }
-exports.decodeForm = decodeForm;