@koine/react 1.0.8 → 1.0.9

package/node/Forms/Field/Field.js

@@ -0,0 +1,64 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Field = exports.FieldRoot = exports.FieldBase = exports.field = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const styled_components_1 = tslib_1.__importStar(require("styled-components"));
+const Feedback_1 = require("../Feedback");
+exports.field = (0, styled_components_1.css) `
+  padding-bottom: 20px;
+`;
+exports.FieldBase = styled_components_1.default.div `
+  ${exports.field}
+`;
+exports.FieldRoot = (0, styled_components_1.default)(exports.FieldBase) `
+  ${(p) => {
+    return (p.$danger &&
+        `
+    color: var(--danger);
+    
+    textarea,
+    input,
+    select {
+      color: var(--danger);
+    }
+  `);
+}}
+`;
+/**
+ * Yup's errors produce by these validations:
+ *
+ * ```
+ * email: string().email().required(),
+ * name: string().required()
+ * ```
+ *
+ * determine the `error.type` of the `FieldError` to be "required" and "email".
+ * We assume these as standard translations keys without needing to pass
+ * a string into the validation, e.g. `required("mySpecialKey")`.
+ */
+const YUP_ERROR_TYPES_AS_KEYS = {
+    required: 1,
+    email: 1,
+};
+const Field = ({ name, t, error, errors, children, ...props }) => {
+    const err = errors && name ? errors[name] : error;
+    let msg = "";
+    if (err) {
+        if (name && t && err.type !== "plain") {
+            const translationKey = err.type && YUP_ERROR_TYPES_AS_KEYS[err.type] ? err.type : "";
+            msg = t(`errors.${name}.${translationKey || err.message}`);
+        }
+        else {
+            msg = err.message;
+        }
+    }
+    // dynamic i18n namespace loading does not seem to work yet
+    // const t = useT("core.Forms");
+    // const { locale } = useRouter();
+    // useEffect(() => {
+    //   i18n.addResourceBundle(locale, "core.Forms", null);
+    // }, []);
+    return ((0, jsx_runtime_1.jsxs)(exports.FieldRoot, { "$danger": !!err, ...props, children: [children, msg && (0, jsx_runtime_1.jsx)(Feedback_1.Feedback, { "$danger": true, children: msg })] }));
+};
+exports.Field = Field;

package/node/Forms/Field/FieldControl.js

@@ -0,0 +1,47 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FieldControl = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_hook_form_1 = require("react-hook-form");
+const utils_1 = require("@koine/utils");
+const Field_1 = require("./Field");
+const FieldHint_1 = require("./FieldHint");
+const styles_1 = require("../styles");
+/**
+ *
+ * - it expects the `field` object from our `useForm` wrapper around react-hook-form
+ * - automatically get translated strings from the given `t` function` for the
+ * field `label`, `placeholder` and `errors`. The .json expected by the `t` function
+ * look like this:
+ *
+ * ```json
+ * ```
+ */
+const FieldControl = ({ control, register, setValue, name: maybeEncodedName, label, placeholder, hint, t, showError = true, children, encode, ...props }) => {
+    const name = encode ? (0, utils_1.decode)(maybeEncodedName) : maybeEncodedName;
+    const { errors } = (0, react_hook_form_1.useFormState)({ name, control });
+    const error = showError && errors[name] ? errors[name] : null;
+    const FormFieldContent = (0, react_1.useMemo)(() => children({
+        control,
+        register,
+        setValue,
+        name: maybeEncodedName,
+        // @see https://github.com/vinissimus/next-translate/pull/461
+        // @see https://github.com/vinissimus/next-translate/issues/429
+        label: label || t(`labels.${name}`, undefined, { default: "" }),
+        placeholder: placeholder || t(`placeholders.${name}`, undefined, { fallback: "" }),
+    }), [
+        children,
+        control,
+        register,
+        setValue,
+        name,
+        label,
+        t,
+        maybeEncodedName,
+        placeholder,
+    ]);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(Field_1.Field, { name: maybeEncodedName, t: t, error: error, ...props, children: [FormFieldContent, hint && (0, jsx_runtime_1.jsx)(FieldHint_1.FieldHint, { children: hint })] }), encode && register && (0, jsx_runtime_1.jsx)(styles_1.InputHoneypot, { ...register(name) })] }));
+};
+exports.FieldControl = FieldControl;

package/node/Forms/Field/FieldHint.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FieldHint = void 0;
+const tslib_1 = require("tslib");
+const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
+exports.FieldHint = styled_components_1.default.div `
+  padding-top: 0.6em;
+  opacity: 0.7;
+  font-size: 75%;
+`;

package/node/Forms/Field/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./Field"), exports);
+tslib_1.__exportStar(require("./FieldControl"), exports);

package/node/Forms/Form/Form.js

@@ -0,0 +1,67 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Form = exports.FormFeedback = exports.FormOverlay = exports.FormRoot = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
+const styled_1 = require("../../styles/styled");
+const Collapsable_1 = require("../../Collapsable");
+const Progress_1 = require("../../Progress");
+const Alert_1 = require("../../Alert");
+exports.FormRoot = styled_components_1.default.form `
+  position: relative;
+`;
+exports.FormOverlay = styled_components_1.default.div `
+  z-index: 4;
+  ${styled_1.overlay}
+  ${styled_1.centered}
+  background: rgba(var(--bodyBg--rgb),.8);
+  pointer-events: none;
+  backdrop-filter: blur(2px);
+`;
+exports.FormFeedback = (0, styled_components_1.default)(Alert_1.Alert) `
+  padding: 2em 0;
+`;
+const Form = ({ ok, fail, loading, Ok = exports.FormFeedback, okProps = {
+    children: "Sent!",
+}, Fail = exports.FormFeedback, failProps = {
+    children: "Failed.",
+}, collapseOnOk, collapseOnFail, okTimeout = 3000, failTimeout = 3000, children, ...props }) => {
+    const [expanded, setExpanded] = (0, react_1.useState)("");
+    const commonProps = {
+        head: null,
+        components: {
+            HeadIcon: null,
+        },
+    };
+    (0, react_1.useEffect)(() => {
+        if (!loading) {
+            if (ok)
+                setExpanded("ok");
+            else if (fail)
+                setExpanded("fail");
+        }
+    }, [ok, fail, loading]);
+    (0, react_1.useEffect)(() => {
+        let timeout;
+        if (expanded === "fail" && failTimeout) {
+            timeout = setTimeout(() => setExpanded(""), failTimeout);
+        }
+        else if (expanded === "ok" && okTimeout) {
+            timeout = setTimeout(() => setExpanded(""), okTimeout);
+        }
+        return () => {
+            if (timeout) {
+                clearTimeout(timeout);
+            }
+        };
+    }, [expanded, failTimeout, okTimeout]);
+    let formExpanded = true;
+    if (collapseOnFail && fail)
+        formExpanded = false;
+    if (collapseOnOk && ok)
+        formExpanded = false;
+    return ((0, jsx_runtime_1.jsxs)(exports.FormRoot, { method: "post", noValidate: true, ...props, children: [(0, jsx_runtime_1.jsx)(Collapsable_1.Collapsable, { ...commonProps, expanded: formExpanded, recalc: loading, body: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [children, loading && ((0, jsx_runtime_1.jsx)(exports.FormOverlay, { children: (0, jsx_runtime_1.jsx)(Progress_1.ProgressCircular, { size: "2em", color: "var(--accent300)" }) }))] }) }), (0, jsx_runtime_1.jsx)(Collapsable_1.Collapsable, { ...commonProps, expanded: expanded === "ok" && !loading, body: (0, jsx_runtime_1.jsx)(Ok, { ...okProps }) }), (0, jsx_runtime_1.jsx)(Collapsable_1.Collapsable, { ...commonProps, expanded: expanded === "fail" && !loading, body: (0, jsx_runtime_1.jsx)(Fail, { ...failProps }) })] }));
+};
+exports.Form = Form;

package/node/Forms/Form/index.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./Form"), exports);

package/node/Forms/Input/Input.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Input = exports.InputNative = exports.InputPost = exports.InputPre = exports.InputMain = exports.InputWrap = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
+const Label_1 = require("../Label/Label");
+const styles_1 = require("../styles");
+exports.InputWrap = styled_components_1.default.div `
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+`;
+exports.InputMain = styled_components_1.default.div `
+  flex: 1;
+`;
+exports.InputPre = styled_components_1.default.div ``;
+exports.InputPost = styled_components_1.default.div ``;
+exports.InputNative = styled_components_1.default.input `
+  ${styles_1.inputBase}
+  ${styles_1.inputFocus}
+`;
+exports.Input = (0, react_1.forwardRef)(function Input({ register, name, label, ...props }, ref) {
+    // console.log("Input: render");
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [label && (0, jsx_runtime_1.jsx)(Label_1.Label, { children: label }), (0, jsx_runtime_1.jsx)(exports.InputNative, { ...(register ? register(name) : { name, ref }), ...props })] }));
+});

package/node/Forms/Input/index.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./Input"), exports);

package/node/Forms/InputGroup/InputGroup.js

@@ -0,0 +1,47 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InputGroup = exports.InputGroupButtonPost = exports.InputGroupButtonPre = exports.InputGroupMain = exports.InputGroupRoot = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
+const Buttons_1 = require("../../Buttons");
+const Field_1 = require("../Field");
+const media_1 = require("../../styles/media");
+exports.InputGroupRoot = styled_components_1.default.div `
+  ${Field_1.field}
+  display: flex;
+  ${media_1.max.sm} {
+    flex-direction: column;
+  }
+`;
+exports.InputGroupMain = styled_components_1.default.div `
+  flex: 1;
+`;
+exports.InputGroupButtonPre = (0, styled_components_1.default)(Buttons_1.KoineButton) `
+  ${media_1.max.sm} {
+    border-bottom: 0;
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+  ${media_1.min.sm} {
+    border-right: 0;
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+`;
+exports.InputGroupButtonPost = (0, styled_components_1.default)(Buttons_1.KoineButton) `
+  ${media_1.max.sm} {
+    border-top: 0;
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+  }
+  ${media_1.min.sm} {
+    border-left: 0;
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+`;
+const InputGroup = ({ pre, post, Button = Buttons_1.KoineButton, btnProps = {}, children, ...props }) => {
+    return ((0, jsx_runtime_1.jsxs)(exports.InputGroupRoot, { ...props, children: [pre && (0, jsx_runtime_1.jsx)(exports.InputGroupButtonPre, { as: Button, ...btnProps }), (0, jsx_runtime_1.jsx)(exports.InputGroupMain, { children: children }), post && (0, jsx_runtime_1.jsx)(exports.InputGroupButtonPost, { as: Button, ...btnProps })] }));
+};
+exports.InputGroup = InputGroup;

package/node/Forms/InputGroup/index.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./InputGroup"), exports);

package/node/Forms/Label/Label.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Label = exports.labelMaterial = exports.label = void 0;
+const tslib_1 = require("tslib");
+const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
+exports.label = `
+  display: flex;
+  font-size: 13px;
+  cursor: pointer;
+`;
+exports.labelMaterial = `
+  z-index: 2;
+  position: relative;
+  display: inline-block;
+  padding: 0 5px;
+  font-weight: 100;
+  font-size: 10px;
+  background: var(--bodyBg);
+  transform: translateY(-0.3em) translateX(1em);
+  cursor: pointer;
+
+  + * {
+    margin-top: -1em;
+  }
+`;
+exports.Label = styled_components_1.default.label `
+  ${exports.labelMaterial}
+`;

package/node/Forms/Label/index.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./Label"), exports);

package/node/Forms/Password/Password.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Password = exports.PasswordInputNative = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
+const im_1 = require("react-icons/im");
+const Label_1 = require("../Label/Label");
+const Input_1 = require("../Input/Input");
+const ICON_WIDTH = "2em";
+const PasswordInputWrap = styled_components_1.default.div `
+  position: relative;
+`;
+exports.PasswordInputNative = (0, styled_components_1.default)(Input_1.InputNative) `
+  position: relative;
+  padding-right: ${ICON_WIDTH};
+`;
+const PasswordIcon = styled_components_1.default.span `
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: ${ICON_WIDTH};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  opacity: 0.5;
+`;
+exports.Password = (0, react_1.forwardRef)(function Password({ register, name, label, ...props }, ref) {
+    const [visible, setVisible] = (0, react_1.useState)(false);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [label && (0, jsx_runtime_1.jsx)(Label_1.Label, { children: label }), (0, jsx_runtime_1.jsxs)(PasswordInputWrap, { children: [(0, jsx_runtime_1.jsx)(exports.PasswordInputNative, { type: visible ? "text" : "password", autoComplete: "new-password", ...(register ? register(name) : { name, ref }), ...props }), (0, jsx_runtime_1.jsx)(PasswordIcon, { onClick: () => setVisible((prev) => !prev), children: visible ? (0, jsx_runtime_1.jsx)(im_1.ImEyeBlocked, {}) : (0, jsx_runtime_1.jsx)(im_1.ImEye, {}) })] })] }));
+});

package/node/Forms/Password/index.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./Password"), exports);

package/node/Forms/Radio/Radio.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Radio = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
+const Label_1 = require("../Label/Label");
+const Toggle_1 = require("../Toggle");
+const styles_1 = require("../styles");
+const RadioRoot = styled_components_1.default.div ``;
+const RadioLabel = styled_components_1.default.div `
+  ${Label_1.label}
+`;
+const RadioOptionRoot = styled_components_1.default.label `
+  display: flex;
+  align-items: center;
+  padding: 0.05em;
+  cursor: pointer;
+`;
+const RadioToggle = (0, styled_components_1.default)(Toggle_1.Toggle) ``;
+const RadioIndicator = (0, styled_components_1.default)(Toggle_1.ToggleIndicatorSquared) ``;
+const RadioOptionLabel = (0, styled_components_1.default)(Toggle_1.ToggleLabel) ``;
+const RadioOption = (0, react_1.forwardRef)(function RadioOption({ register, name, label, $ref, ...props }, ref) {
+    const inputProps = register ? register(name) : { name, ref: $ref || ref };
+    return ((0, jsx_runtime_1.jsxs)(RadioOptionRoot, { children: [(0, jsx_runtime_1.jsxs)(RadioToggle, { children: [(0, jsx_runtime_1.jsx)(styles_1.InputInvisible, { type: "radio", ...inputProps, ...props }), (0, jsx_runtime_1.jsx)(RadioIndicator, {})] }), (0, jsx_runtime_1.jsx)(RadioOptionLabel, { children: label })] }));
+});
+exports.Radio = (0, react_1.forwardRef)(function Radio({ label, options, ...props }, ref) {
+    if (!options)
+        return null;
+    return ((0, jsx_runtime_1.jsxs)(RadioRoot, { children: [label && (0, jsx_runtime_1.jsx)(RadioLabel, { children: label }), options.map((option, idx) => ((0, jsx_runtime_1.jsx)(RadioOption, { ...option, ...props, "$ref": ref }, idx)))] }));
+});

package/node/Forms/Radio/index.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./Radio"), exports);

package/node/Forms/Switch/Switch.js

@@ -0,0 +1,54 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Switch = exports.SwitchHandle = exports.SwitchTrack = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
+const Checkbox_1 = require("../Checkbox");
+const Toggle_1 = require("../Toggle");
+const useToggle_1 = require("../Toggle/useToggle");
+const styled_1 = require("../../styles/styled");
+const SWITCH_GUTTER = 0.25;
+const SWITCH_HANDLE_SIZE = 1;
+exports.SwitchTrack = styled_components_1.default.span `
+  position: relative;
+  width: ${SWITCH_HANDLE_SIZE * 3}em;
+  height: ${SWITCH_HANDLE_SIZE * 1.5}em;
+  padding: ${SWITCH_GUTTER}em;
+  border-radius: ${SWITCH_HANDLE_SIZE}em;
+  ${Toggle_1.toggleBase}
+
+  input:focus ~ & {
+    ${styled_1.stateFocus}
+  }
+
+  input:disabled ~ & {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+`;
+exports.SwitchHandle = styled_components_1.default.span `
+  position: absolute;
+  width: ${SWITCH_HANDLE_SIZE}em;
+  height: ${SWITCH_HANDLE_SIZE}em;
+  left: ${SWITCH_GUTTER}em;
+  margin-top: -1px;
+  /* border: 1px solid currentColor; */
+  background: currentColor;
+  opacity: 0.5;
+  border-radius: 100%;
+  transition: all 0.18s ease-in-out;
+
+  input:checked + ${exports.SwitchTrack} & {
+    opacity: 1;
+    left: calc(100% - ${SWITCH_HANDLE_SIZE}em - ${SWITCH_GUTTER}em);
+  }
+`;
+/**
+ * All logic and invisible Inputs come from the `useToggle` hook
+ */
+exports.Switch = (0, react_1.forwardRef)(function Switch(props, ref) {
+    const { rootProps, Inputs, label } = (0, useToggle_1.useToggle)(props, ref);
+    return ((0, jsx_runtime_1.jsxs)(Checkbox_1.CheckboxRoot, { ...rootProps, children: [Inputs, (0, jsx_runtime_1.jsx)(exports.SwitchTrack, { children: (0, jsx_runtime_1.jsx)(exports.SwitchHandle, {}) }), label && (0, jsx_runtime_1.jsx)(Checkbox_1.CheckboxLabel, { children: label })] }));
+});

package/node/Forms/Switch/index.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./Switch"), exports);

package/node/Forms/Textarea/Textarea.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Textarea = exports.TextareaNative = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
+const Label_1 = require("../Label/Label");
+const styles_1 = require("../styles");
+exports.TextareaNative = styled_components_1.default.textarea `
+  ${styles_1.inputBase}
+  ${styles_1.inputFocus}
+  resize: vertical;
+`;
+exports.Textarea = (0, react_1.forwardRef)(function Textarea({ register, name, label, ...props }, ref) {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [label && (0, jsx_runtime_1.jsx)(Label_1.Label, { children: label }), (0, jsx_runtime_1.jsx)(exports.TextareaNative, { ...(register ? register(name) : { name, ref }), ...props })] }));
+});

package/node/Forms/Textarea/TextareaRich.js

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

package/node/Forms/Textarea/index.js

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

package/node/Forms/Toggle/Toggle.js

@@ -0,0 +1,85 @@
+"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;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * @file
+ *
+ * About accessibility:
+ * - minimum target size of 44px https://www.w3.org/TR/WCAG21/#target-size
+ */
+const react_1 = require("react");
+const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
+const styled_1 = require("../../styles/styled");
+exports.toggleBase = `
+  border: 1px solid var(--forms-border-color);
+`;
+exports.toggleIndicatorBg = `
+  display: inline-block;
+  flex-shrink: 0;
+  width: 100%;
+  height: 100%;
+`;
+exports.toggleIndicatorBgShape = `
+  ${exports.toggleIndicatorBg}
+  fill: none;
+  stroke-width: 2px;
+  stroke: var(--forms-border-color);
+`;
+exports.toggleIndicatorFg = `
+  position: absolute;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  fill: currentcolor;
+`;
+exports.Toggle = styled_components_1.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;
+`;
+exports.ToggleLabel = styled_components_1.default.span `
+  margin-left: 0.6em; /* rtl */
+`;
+exports.ToggleLabelSub = styled_components_1.default.small `
+  opacity: 0.7;
+  font-size: 0.7em; ;
+`;
+exports.ToggleIndicatorHolder = styled_components_1.default.span `
+  position: relative;
+  display: flex;
+
+  input:focus ~ & {
+    ${styled_1.stateFocus}
+  }
+`;
+exports.ToggleIndicatorBgSquare = styled_components_1.default.svg `
+  ${exports.toggleIndicatorBgShape}
+`;
+exports.ToggleIndicatorBgCircle = styled_components_1.default.svg `
+  ${exports.toggleIndicatorBgShape}
+`;
+exports.ToggleIndicatorFg = styled_components_1.default.svg `
+  ${exports.toggleIndicatorFg}
+  transform: scale(0);
+  transition: transform 0.18s ease;
+
+  input:checked + ${exports.ToggleIndicatorHolder} & {
+    transform: scale(1);
+  }
+`;
+const ToggleIndicatorSquared = (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" }) })] }));
+};
+exports.ToggleIndicatorSquared = ToggleIndicatorSquared;
+const ToggleIndicatorRounded = ({ r = 6, }) => {
+    const 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_${id}`, clipPath: `url(#c_${id})` }), (0, jsx_runtime_1.jsx)("clipPath", { id: `c_${id}`, children: (0, jsx_runtime_1.jsx)("use", { xlinkHref: `#r_${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" }) })] }));
+};
+exports.ToggleIndicatorRounded = ToggleIndicatorRounded;

package/node/Forms/Toggle/index.js

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