@koine/react 1.0.8 → 1.0.11

package/node/Dialog/sc/framerMaterial.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.KoineDialog = void 0;
+const framer_motion_1 = require("framer-motion");
+const helpers_1 = require("../../helpers");
+const basic_1 = require("../m/basic");
+const bare_1 = require("../m/bare");
+const material_1 = require("./material");
+exports.KoineDialog = (0, helpers_1.extendComponent)(bare_1.KoineDialog, {
+    Root: material_1.Root,
+    Backdrop: (0, framer_motion_1.m)(material_1.Backdrop),
+    Container: material_1.Container,
+    Paper: (0, framer_motion_1.m)(material_1.Paper),
+    Close: material_1.Close,
+    Header: material_1.Header,
+    Body: material_1.Body,
+    mBackdrop: basic_1.dialogBackdropMotion,
+    mPaper: basic_1.dialogPaperMotion,
+});

package/node/Dialog/sc/material.js

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.KoineDialog = exports.Body = exports.Header = exports.Close = exports.Paper = exports.Container = exports.Backdrop = exports.Root = void 0;
+const tslib_1 = require("tslib");
+const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
+const helpers_1 = require("../../helpers");
+const bare_1 = require("./bare");
+exports.Root = (0, styled_components_1.default)(bare_1.KoineDialog.Root) ``;
+exports.Backdrop = (0, styled_components_1.default)(bare_1.KoineDialog.Backdrop) `
+  background: rgba(0, 0, 0, 0.5);
+  filter: backdrop-blur(4px);
+`;
+exports.Container = (0, styled_components_1.default)(bare_1.KoineDialog.Container) ``;
+exports.Paper = (0, styled_components_1.default)(bare_1.KoineDialog.Paper) `
+  max-width: 640px;
+  margin: 64px;
+  border-radius: 4px;
+  background: white;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
+`;
+exports.Close = (0, styled_components_1.default)(bare_1.KoineDialog.Close) `
+  position: absolute;
+  top: 0;
+  right: 0;
+  padding: 8px;
+  font-size: 2rem;
+  opacity: 0.5;
+`;
+exports.Header = (0, styled_components_1.default)(bare_1.KoineDialog.Header) `
+  padding: 16px;
+  font-size: 1.25rem;
+`;
+exports.Body = (0, styled_components_1.default)(bare_1.KoineDialog.Body) `
+  padding: 16px;
+  border-top: 1px solid rgba(0, 0, 0, 0.08);
+`;
+exports.KoineDialog = (0, helpers_1.extendComponent)(bare_1.KoineDialog, {
+    Root: exports.Root,
+    Backdrop: exports.Backdrop,
+    Container: exports.Container,
+    Paper: exports.Paper,
+    Close: exports.Close,
+    Header: exports.Header,
+    Body: exports.Body,
+});

package/node/Dialog/tw/bare.js

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.KoineDialog = exports.Body = exports.Header = exports.Close = exports.Paper = exports.Container = exports.Backdrop = exports.Root = void 0;
+const tslib_1 = require("tslib");
+const helpers_1 = require("../../helpers");
+const _ = tslib_1.__importStar(require("../DialogMui"));
+exports.Root = (0, helpers_1.classed)(_.Root) `< class="dialog fixed z-[1300] inset-0`;
+exports.Backdrop = (0, helpers_1.classed)(_.Backdrop) `< class="dialogBackdrop fixed -z-[1] inset-0 [-webkit-tap-highlight-color:transparent]`;
+/**
+ * @see https://github.com/mui/material-ui/blob/master/packages/mui-material/src/Dialog/Dialog.js#L64-L85
+ */
+exports.Container = (0, helpers_1.classed)(_.Container) `< class="dialogContainer h-full outline-0 ${(p) => p.$scrollPaper
+    ? "flex justify-center items-center"
+    : "overflow-y-auto overflow-x-hidden text-center [after:content:''] after:inline-block after:align-middle after:h-full after:w-0"}`;
+/**
+ * @see https://github.com/mui/material-ui/blob/master/packages/mui-material/src/Dialog/Dialog.js#L104-L157
+ */
+exports.Paper = (0, helpers_1.classed)(_.Paper) `< class="dialogPaper relative ${(p) => p.$scrollPaper
+    ? "flex flex-col max-h-[calc(100%-64px)]"
+    : "inline-block align-middle [text-align:initial]"}`;
+exports.Close = (0, helpers_1.classed)(_.Close) `< class="dialogClose`;
+exports.Header = (0, helpers_1.classed)(_.Header) `< class="dialogHeader`;
+/**
+ * @see https://github.com/mui/material-ui/blob/master/packages/mui-material/src/DialogContent/DialogContent.js#L29-L44
+ * The arbitrary rule webkit-overflow-scrolling is to add iOS momentum scrolling for iOS < 13.0,
+ * this was removed from tailiwnd 2.0 on
+ *
+ * @see https://github.com/tailwindlabs/tailwindcss.com/issues/483
+ * @see https://v2.tailwindcss.com/docs/upgrading-to-v2#the-scrolling-touch-and-scrolling-auto-utilities-have-been-removed
+ */
+exports.Body = (0, helpers_1.classed)(_.Body) `< class="dialogBody flex-1 basis-auto overflow-y-auto [-webkit-overflow-scrolling:touch]`;
+exports.KoineDialog = (0, helpers_1.extendComponent)(_.KoineDialog, {
+    Root: exports.Root,
+    Backdrop: exports.Backdrop,
+    Container: exports.Container,
+    Paper: exports.Paper,
+    Close: exports.Close,
+    Header: exports.Header,
+    Body: exports.Body,
+});

package/node/Dialog/tw/elegant.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.KoineDialog = exports.Body = exports.Header = exports.Close = exports.Paper = exports.Container = exports.Backdrop = exports.Root = void 0;
+const helpers_1 = require("../../helpers");
+const bare_1 = require("./bare");
+exports.Root = (0, helpers_1.classed)(bare_1.KoineDialog.Root) ``;
+exports.Backdrop = (0, helpers_1.classed)(bare_1.KoineDialog.Backdrop) `< class="bg-white/[.5] backdrop-blur-sm`;
+exports.Container = (0, helpers_1.classed)(bare_1.KoineDialog.Container) ``;
+exports.Paper = (0, helpers_1.classed)(bare_1.KoineDialog.Paper) `< class="bg-white shadow-xl m-8 max-w-screen-sm border border-gray-400`;
+exports.Close = (0, helpers_1.classed)(bare_1.KoineDialog.Close) `< class="absolute top-0 right-0 p-8 text-2xl opacity-20 hover:opacity-100 focus:opacity-100`;
+exports.Header = (0, helpers_1.classed)(bare_1.KoineDialog.Header) `< class="p-8 text-2xl bold italic`;
+exports.Body = (0, helpers_1.classed)(bare_1.KoineDialog.Body) `< class="p-8 pt-4`;
+exports.KoineDialog = (0, helpers_1.extendComponent)(bare_1.KoineDialog, {
+    Root: exports.Root,
+    Backdrop: exports.Backdrop,
+    Container: exports.Container,
+    Paper: exports.Paper,
+    Close: exports.Close,
+    Header: exports.Header,
+    Body: exports.Body,
+});

package/node/Dialog/tw/framer.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.KoineDialog = void 0;
+const framer_motion_1 = require("framer-motion");
+const helpers_1 = require("../../helpers");
+const basic_1 = require("../m/basic");
+const bare_1 = require("../m/bare");
+const bare_2 = require("./bare");
+exports.KoineDialog = (0, helpers_1.extendComponent)(bare_1.KoineDialog, {
+    Root: bare_2.Root,
+    Backdrop: (0, framer_motion_1.m)(bare_2.Backdrop),
+    Container: bare_2.Container,
+    Paper: (0, framer_motion_1.m)(bare_2.Paper),
+    Close: bare_2.Close,
+    Header: bare_2.Header,
+    Body: bare_2.Body,
+    mBackdrop: basic_1.dialogBackdropMotion,
+    mPaper: basic_1.dialogPaperMotion,
+});

package/node/Dialog/tw/framerMaterial.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.KoineDialog = void 0;
+const framer_motion_1 = require("framer-motion");
+const helpers_1 = require("../../helpers");
+const basic_1 = require("../m/basic");
+const bare_1 = require("../m/bare");
+const material_1 = require("./material");
+exports.KoineDialog = (0, helpers_1.extendComponent)(bare_1.KoineDialog, {
+    Root: material_1.Root,
+    Backdrop: (0, framer_motion_1.m)(material_1.Backdrop),
+    Container: material_1.Container,
+    Paper: (0, framer_motion_1.m)(material_1.Paper),
+    Close: material_1.Close,
+    Header: material_1.Header,
+    Body: material_1.Body,
+    mBackdrop: basic_1.dialogBackdropMotion,
+    mPaper: basic_1.dialogPaperMotion,
+});

package/node/Dialog/tw/material.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.KoineDialog = exports.Body = exports.Header = exports.Close = exports.Paper = exports.Container = exports.Backdrop = exports.Root = void 0;
+const helpers_1 = require("../../helpers");
+const bare_1 = require("./bare");
+exports.Root = (0, helpers_1.classed)(bare_1.KoineDialog.Root) ``;
+exports.Backdrop = (0, helpers_1.classed)(bare_1.KoineDialog.Backdrop) `< class="bg-black/[.5] backdrop-blur-sm`;
+exports.Container = (0, helpers_1.classed)(bare_1.KoineDialog.Container) ``;
+exports.Paper = (0, helpers_1.classed)(bare_1.KoineDialog.Paper) `< class="rounded bg-white shadow-xl m-8 max-w-screen-sm`;
+exports.Close = (0, helpers_1.classed)(bare_1.KoineDialog.Close) `< class="absolute top-0 right-0 p-4 text-2xl opacity-50`;
+exports.Header = (0, helpers_1.classed)(bare_1.KoineDialog.Header) `< class="p-4 text-xl`;
+exports.Body = (0, helpers_1.classed)(bare_1.KoineDialog.Body) `< class="p-4 border-t border-gray-200`;
+exports.KoineDialog = (0, helpers_1.extendComponent)(bare_1.KoineDialog, {
+    Root: exports.Root,
+    Backdrop: exports.Backdrop,
+    Container: exports.Container,
+    Paper: exports.Paper,
+    Close: exports.Close,
+    Header: exports.Header,
+    Body: exports.Body,
+});

package/node/Editor/Editor--tiptap.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Editor = exports.EditorBar = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_2 = require("@tiptap/react");
+const starter_kit_1 = tslib_1.__importDefault(require("@tiptap/starter-kit"));
+const components_1 = require("./components");
+const EditorBar = ({ editor }) => {
+    const handleClick = (0, react_1.useCallback)((e, type) => {
+        e.preventDefault();
+        editor?.chain().focus()[`toggle${type}`]().run();
+    }, [editor]);
+    if (!editor) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsxs)(components_1.EditorBarRoot, { children: [(0, jsx_runtime_1.jsx)(components_1.EditorBarBtn, { onClick: (e) => handleClick(e, "Bold"), className: editor.isActive("bold") ? "is-active" : "", children: (0, jsx_runtime_1.jsx)(components_1.EditorIconBold, {}) }), (0, jsx_runtime_1.jsx)(components_1.EditorBarBtn, { onClick: (e) => handleClick(e, "Italic"), className: editor.isActive("bold") ? "is-active" : "", children: (0, jsx_runtime_1.jsx)(components_1.EditorIconItalic, {}) })] }));
+};
+exports.EditorBar = EditorBar;
+const Editor = ({ options, ...props }) => {
+    const editor = (0, react_2.useEditor)({
+        extensions: [starter_kit_1.default],
+        content: "",
+        ...(options || {}),
+    });
+    return ((0, jsx_runtime_1.jsxs)(components_1.EditorRoot, { children: [(0, jsx_runtime_1.jsx)(components_1.EditorGlobalStyles, {}), (0, jsx_runtime_1.jsx)(exports.EditorBar, { editor: editor }), (0, jsx_runtime_1.jsx)(react_2.EditorContent, { className: "EditorContent", editor: editor, ...props })] }));
+};
+exports.Editor = Editor;

package/node/Editor/components.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EditorGlobalStyles = exports.EditorBarBtn = exports.EditorBarRoot = exports.EditorRoot = exports.EditorIconItalic = exports.EditorIconBold = void 0;
+const tslib_1 = require("tslib");
+const styled_components_1 = tslib_1.__importStar(require("styled-components"));
+const IconButton_1 = require("../Buttons/IconButton");
+const styles_1 = require("../Forms/styles");
+var md_1 = require("react-icons/md");
+Object.defineProperty(exports, "EditorIconBold", { enumerable: true, get: function () { return md_1.MdFormatBold; } });
+Object.defineProperty(exports, "EditorIconItalic", { enumerable: true, get: function () { return md_1.MdFormatItalic; } });
+exports.EditorRoot = styled_components_1.default.div `
+  ${styles_1.inputBorder}
+  ${styles_1.inputFocus}
+`;
+exports.EditorBarRoot = styled_components_1.default.div `
+  display: flex;
+  justify-content: flex-end;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+  /* background: var(--grey900); */
+`;
+exports.EditorBarBtn = (0, styled_components_1.default)(IconButton_1.IconButton) ``;
+exports.EditorGlobalStyles = (0, styled_components_1.createGlobalStyle) `
+  .ProseMirror {
+    ${styles_1.inputPadding}
+    
+    &:focus {
+      outline:none;
+    }
+
+    > *:first-child {
+      margin-top: 0;
+    }
+  }
+`;

package/node/Editor/index.js

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

package/node/Favicon/FaviconTags.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FaviconTags = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * Favicon tags.
+ *
+ * This component is meant to be wrapped in a `<head>` manager component.
+ *
+ * These tags have been produced by [realfavicongenerator.net](https://realfavicongenerator.net/)
+ * on _**16 Feb 2022**_.
+ *
+ * @see https://realfavicongenerator.net/
+ */
+const FaviconTags = ({ name, color, safariTabColor, tileColor, themeColor, }) => {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("link", { rel: "apple-touch-icon", sizes: "180x180", href: "/apple-touch-icon.png" }), (0, jsx_runtime_1.jsx)("link", { rel: "icon", type: "image/png", sizes: "32x32", href: "/favicon-32x32.png" }), (0, jsx_runtime_1.jsx)("link", { rel: "icon", type: "image/png", sizes: "16x16", href: "/favicon-16x16.png" }), (0, jsx_runtime_1.jsx)("link", { rel: "manifest", href: "/site.webmanifest" }), (0, jsx_runtime_1.jsx)("link", { rel: "mask-icon", href: "/safari-pinned-tab.svg", color: safariTabColor || color }), (0, jsx_runtime_1.jsx)("meta", { name: "apple-mobile-web-app-title", content: name }), (0, jsx_runtime_1.jsx)("meta", { name: "application-name", content: name }), (0, jsx_runtime_1.jsx)("meta", { name: "msapplication-TileColor", content: tileColor || color }), (0, jsx_runtime_1.jsx)("meta", { name: "theme-color", content: themeColor || color })] }));
+};
+exports.FaviconTags = FaviconTags;

package/node/Favicon/index.js

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

package/node/Form/Form.js

@@ -0,0 +1,63 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.KoineForm = exports.Form = exports.Fail = exports.Ok = exports.Collapsable = exports.Progress = exports.Overlay = exports.Root = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+// import { type MotionProps } from "framer-motion";
+const helpers_1 = require("../helpers");
+exports.Root = "form";
+exports.Overlay = "div";
+exports.Progress = "div";
+exports.Collapsable = "div";
+exports.Ok = null;
+exports.Fail = null;
+const Form = ({ Root: _Root, Overlay: _Overlay, Progress: _Progress, Collapsable: _Collapsable, ok, fail, loading, Ok: _Ok, okProps = {
+    children: "Sent!",
+}, Fail: _Fail, failProps = {
+    children: "Failed.",
+}, collapseOnOk, collapseOnFail, okTimeout = 3000, failTimeout = 3000, children, ...props }) => {
+    const [open, setOpen] = (0, react_1.useState)("");
+    const commonProps = {
+        head: null,
+        components: {
+            HeadIcon: null,
+        },
+    };
+    (0, react_1.useEffect)(() => {
+        if (!loading) {
+            if (ok)
+                setOpen("ok");
+            else if (fail)
+                setOpen("fail");
+        }
+    }, [ok, fail, loading]);
+    (0, react_1.useEffect)(() => {
+        let timeout;
+        if (open === "fail" && failTimeout) {
+            timeout = setTimeout(() => setOpen(""), failTimeout);
+        }
+        else if (open === "ok" && okTimeout) {
+            timeout = setTimeout(() => setOpen(""), okTimeout);
+        }
+        return () => {
+            if (timeout) {
+                clearTimeout(timeout);
+            }
+        };
+    }, [open, failTimeout, okTimeout]);
+    let formExpanded = true;
+    if (collapseOnFail && fail)
+        formExpanded = false;
+    if (collapseOnOk && ok)
+        formExpanded = false;
+    return ((0, jsx_runtime_1.jsxs)(exports.Root, { method: "post", noValidate: true, ...props, children: [(0, jsx_runtime_1.jsx)(exports.Collapsable, { ...commonProps, "$open": formExpanded, recalc: loading, body: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [children, loading && ((0, jsx_runtime_1.jsx)(exports.Overlay, { children: (0, jsx_runtime_1.jsx)(exports.Progress, {}) }))] }) }), (0, jsx_runtime_1.jsx)(exports.Collapsable, { ...commonProps, "$open": open === "ok" && !loading, body: (0, jsx_runtime_1.jsx)(exports.Ok, { ...okProps }) }), (0, jsx_runtime_1.jsx)(exports.Collapsable, { ...commonProps, "$open": open === "fail" && !loading, body: (0, jsx_runtime_1.jsx)(exports.Fail, { ...failProps }) })] }));
+};
+exports.Form = Form;
+exports.KoineForm = (0, helpers_1.extendComponent)(exports.Form, {
+    Root: exports.Root,
+    Overlay: exports.Overlay,
+    Progress: exports.Progress,
+    Collapsable: exports.Collapsable,
+    Ok: exports.Ok,
+    Fail: exports.Fail,
+});

package/node/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/Form/sc/bare.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.KoineForm = exports.Feedback = exports.Overlay = exports.Root = void 0;
+const tslib_1 = require("tslib");
+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");
+const helpers_1 = require("../../helpers");
+const _ = tslib_1.__importStar(require("../Form"));
+exports.Root = (0, styled_components_1.default)(_.Root) `
+  position: relative;
+`;
+exports.Overlay = (0, styled_components_1.default)(_.Overlay) `
+  z-index: 4;
+  ${styled_1.overlay}
+  ${styled_1.centered}
+  background: rgba(var(--bodyBg--rgb),.8);
+  pointer-events: none;
+  backdrop-filter: blur(2px);
+`;
+exports.Feedback = (0, styled_components_1.default)(Alert_1.Alert) `
+  padding: 2em 0;
+`;
+exports.KoineForm = (0, helpers_1.extendComponent)(_.KoineForm, {
+    Root: exports.Root,
+    Overlay: exports.Overlay,
+    Progress: Progress_1.ProgressCircular,
+    Collapsable: Collapsable_1.Collapsable,
+    Ok: exports.Feedback,
+    Fail: exports.Feedback,
+});

package/node/Forms/Checkbox/Checkbox.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Checkbox = exports.CheckboxLabel = exports.CheckboxIndicator = exports.CheckboxToggle = exports.CheckboxRoot = 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 Toggle_1 = require("../Toggle");
+const useToggle_1 = require("../Toggle/useToggle");
+exports.CheckboxRoot = styled_components_1.default.label `
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+`;
+exports.CheckboxToggle = (0, styled_components_1.default)(Toggle_1.Toggle) `
+  pointer-events: none;
+`;
+exports.CheckboxIndicator = (0, styled_components_1.default)(Toggle_1.ToggleIndicatorSquared) ``;
+exports.CheckboxLabel = (0, styled_components_1.default)(Toggle_1.ToggleLabel) `
+  font-size: 0.8em;
+`;
+/**
+ * All logic and invisible Inputs come from the `useToggle` hook
+ */
+exports.Checkbox = (0, react_1.forwardRef)(function Checkbox(props, ref) {
+    const { rootProps, Inputs, label } = (0, useToggle_1.useToggle)(props, ref);
+    return ((0, jsx_runtime_1.jsxs)(exports.CheckboxRoot, { ...rootProps, children: [(0, jsx_runtime_1.jsxs)(exports.CheckboxToggle, { children: [Inputs, (0, jsx_runtime_1.jsx)(exports.CheckboxIndicator, {})] }), label && (0, jsx_runtime_1.jsx)(exports.CheckboxLabel, { children: label })] }));
+});

package/node/Forms/Checkbox/index.js

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

package/node/Forms/Feedback/Feedback.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Feedback = 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 Root = styled_components_1.default.div `
+  margin-top: 0.2em;
+  font-size: 12px;
+  ${(p) => (p.$danger ? `color: var(--danger);` : "")}
+`;
+const Feedback = ({ $danger, children }) => {
+    return ((0, jsx_runtime_1.jsx)(Root, { role: "alert", "$danger": $danger, children: children }));
+};
+exports.Feedback = Feedback;

package/node/Forms/Feedback/index.js

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

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/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);