@koine/react 1.0.5 → 1.0.8

package/Collapsable/Collapsable.js

@@ -0,0 +1,132 @@
+import { __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * @file
+ *
+ * Maybe do a simplified version following this example:
+ * https://codesandbox.io/s/framer-motion-accordion-qx958?file=/src/Example.tsx
+ */
+import { forwardRef, useCallback, useEffect, useRef, useState } from "react";
+import styled from "styled-components";
+import { m } from "framer-motion";
+import { Disclosure, DisclosureButton, DisclosurePanel, } from "@reach/disclosure";
+import { BsBoxArrowInDown as IconCollapse } from "react-icons/bs";
+// FIXME: ssr likely problem
+import { uid } from "@koine/utils";
+import { btnStyleReset } from "../Buttons";
+import { useWindowSize } from "../hooks/useWindowSize";
+import { InputInvisible } from "../Forms/styles";
+export const CollapsableHeadRoot = styled(m.label).attrs((props) => ({
+    htmlFor: `${props.id}-input`,
+})) `
+  ${btnStyleReset}
+  width: 100%;
+  padding: 0;
+  text-align: left;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  cursor: pointer;
+`;
+export const CollapsableHeadSpace = styled.div `
+  flex: 1;
+  padding-left: 20px;
+`;
+export const CollapsableHeadAction = styled.div `
+  padding-left: 20px;
+`;
+export const CollaspableHeadLine = styled(m.div) `
+  width: 0%;
+  height: 1px;
+  background: #bbb;
+`;
+export const collapsableHeadLineMotion = {
+    hover: {
+        width: "100%",
+        transition: {
+            duration: 0.4,
+        },
+    },
+};
+export const CollapsableHeadText = styled.div ``;
+export const CollapsableHeadIcon = styled(m.div) ``;
+export const CollapsableHead = ({ $expanded, id, onClick, HeadRoot = CollapsableHeadRoot, HeadAction = CollapsableHeadAction, HeadIcon = CollapsableHeadIcon, children, }) => {
+    return (_jsxs(DisclosureButton, Object.assign({ onClick: onClick, 
+        // tabIndex={0}
+        // role="tab"
+        initial: "rest", whileHover: "hover", "$expanded": $expanded, as: HeadRoot, id: id }, { children: [_jsx(CollapsableHeadText, { children: children }), _jsx(CollapsableHeadSpace, { children: _jsx(CollaspableHeadLine, { variants: collapsableHeadLineMotion, animate: $expanded ? "hover" : "" }) }), HeadAction && (_jsx(HeadAction, { children: HeadIcon && (_jsx(HeadIcon, Object.assign({ animate: { rotate: $expanded ? 180 : 0 } }, { children: _jsx(IconCollapse, {}) }))) }))] })));
+};
+export const CollapsableInput = styled(InputInvisible).attrs({
+    type: "checkbox",
+}) ``;
+export const CollasableBodyWrap = styled(DisclosurePanel) `
+  /* this is because @reach adds the "hidden" attribute */
+
+  &[hidden] {
+    display: block;
+  }
+`;
+export const CollapsableBodyRoot = styled(m.div) `
+  .no-js & {
+    transition: margin-top 0.2s ease;
+  }
+  .no-js ${CollapsableInput}:checked + ${CollasableBodyWrap} & {
+    margin-top: 0 !important;
+    opacity: 1 !important;
+  }
+`;
+export const CollapsableBody = forwardRef(function CollapsableBody(props, ref) {
+    return _jsx(CollapsableBodyRoot, Object.assign({ ref: ref }, props));
+});
+export const Collapsable = (_a) => {
+    var { expanded: propExpanded, recalc, onChange, id, head, body, 
+    // autoCollapse,
+    components = {}, ariaExpand = "Expand", ariaCollapse = "Collapse" } = _a, props = __rest(_a, ["expanded", "recalc", "onChange", "id", "head", "body", "components", "ariaExpand", "ariaCollapse"]);
+    const isControlled = typeof propExpanded !== "undefined";
+    const [stateExpanded, setStateExpanded] = useState(propExpanded);
+    const [height, setHeight] = useState(0);
+    const hash = id ? `#${id}` : "";
+    const winSize = useWindowSize();
+    const expanded = isControlled ? propExpanded : stateExpanded;
+    const [overflow, setOverflow] = useState(expanded ? "unset" : "hidden");
+    const content = useRef(null);
+    // FIXME: ssr likely problem
+    id = id || uid();
+    const handleClick = useCallback(() => {
+        if (hash) {
+            window.history.replaceState(null, "", expanded ? window.location.pathname + window.location.search : hash);
+        }
+        if (onChange) {
+            onChange();
+        }
+        if (!isControlled) {
+            setStateExpanded((prevExpanded) => !prevExpanded);
+        }
+    }, [expanded, hash, onChange, isControlled]);
+    const handleAnimationStart = useCallback(() => {
+        setOverflow("hidden");
+    }, []);
+    const handleAnimationComplete = useCallback(() => {
+        setOverflow(expanded ? "unset" : "hidden");
+    }, [expanded]);
+    useEffect(() => {
+        if (content.current) {
+            setHeight(Math.ceil(content.current.offsetHeight));
+        }
+    }, [winSize, recalc]);
+    // deeplink on mount
+    useEffect(() => {
+        if (!isControlled && hash && window.location.hash === hash) {
+            setStateExpanded(true);
+        }
+    }, [hash, isControlled]);
+    return (_jsxs(Disclosure, Object.assign({ id: id }, props, { open: expanded || false }, { children: [head !== null && (_jsx(CollapsableHead, Object.assign({ id: id, "$expanded": expanded, onClick: handleClick }, components, { children: head }))), _jsx(CollapsableInput, { id: `${id}-input` }), _jsx(CollasableBodyWrap, Object.assign({ "$expanded": expanded, style: { overflow } }, { children: _jsx(CollapsableBody, Object.assign({ ref: content, "$expanded": expanded, 
+                    // aria-expanded={expanded}
+                    // aria-label={expanded ? ariaCollapse : ariaExpand}
+                    style: {
+                        pointerEvents: expanded ? "all" : "none",
+                    }, onAnimationStart: handleAnimationStart, onAnimationComplete: handleAnimationComplete, animate: {
+                        marginTop: expanded ? 0 : height ? `-${height}px` : "-100vh",
+                        opacity: expanded ? 1 : 0.4,
+                    } }, { children: body })) }))] })));
+};

package/Collapsable/index.js

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

package/Debug/Debug.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import styled from "styled-components";
+const Root = styled.div `
+  background: #f4f4f4;
+  border: 1px solid #ddd;
+  border-left: 3px solid #f36d33;
+  color: #666;
+  page-break-inside: avoid;
+  font-family: monospace;
+  font-size: small;
+  line-height: 1.6;
+  margin-bottom: 1.6em;
+  max-width: 100%;
+  overflow: auto;
+  padding: 1em 1.5em;
+  display: block;
+  word-wrap: break-word;
+`;
+export const Debug = ({ data }) => {
+    return _jsx(Root, { children: JSON.stringify(data, undefined, 2) });
+};

package/Debug/index.js

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

package/Dialog/Dialog.js

@@ -0,0 +1,93 @@
+import { __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled, { css } from "styled-components";
+import { AnimatePresence, m } from "framer-motion";
+import { MdClear as IconClose } from "react-icons/md";
+import { DialogOverlay as BaseDialogOverlay, DialogContent as BaseDialogContent, } from "@reach/dialog";
+import { min } from "../styles/media";
+import { inset0 } from "../styles/styled";
+import { IconButton } from "../Buttons";
+export const koineDialogBg = css `
+  z-index: 1;
+  position: relative;
+  background: var(--bodyBg);
+  box-shadow: var(--shadow);
+`;
+export const koineDialogBackdropMotion = {
+    animate: {
+        backdropFilter: "blur(10px)",
+        background: "rgba(255,255,255,0.33)",
+    },
+    exit: {
+        backdropFilter: "blur(0px)",
+        background: "rgba(255,255,255,0)",
+        transition: { delay: 0.2 },
+    },
+};
+export const koineDialogInnerMotion = {
+    initial: {
+        // scale: .7,
+        opacity: 0,
+    },
+    animate: {
+        scale: 1,
+        opacity: 1,
+        // transition: { delay: 0.2 },
+    },
+    exit: {
+        scale: 0.9,
+        opacity: 0,
+    },
+};
+export const KoineDialogOverlay = styled(BaseDialogOverlay) `
+  z-index: 100;
+  position: fixed;
+  ${inset0}
+`;
+export const KoineDialogBackdrop = styled(m.div) `
+  z-index: 2;
+  position: fixed;
+  ${inset0}
+  backdrop-filter: blur(0px);
+`;
+export const KoineDialogInner = styled(m.div) `
+  z-index: 3;
+  position: absolute;
+  ${inset0}
+  overflow: hidden scroll;
+  ${(p) => p.$centered &&
+    `${min.sm} {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }`};
+`;
+// export const KoineDialogContent = styled(m(BaseDialogContent))<
+export const KoineDialogContent = styled(BaseDialogContent) `
+  position: relative;
+  outline: 0px;
+  width: 100%;
+  margin: 0 auto;
+`;
+export const KoineDialogCloseButton = styled(IconButton) `
+  position: absolute;
+  padding: 0;
+`;
+export const KoineDialogHeader = styled.div `
+  z-index: 2;
+  position: relative;
+`;
+export const KoineDialogBody = styled.div `
+  position: relative;
+
+  &:hover ${KoineDialogCloseButton} {
+  }
+`;
+export const KoineDialogBodyChildren = styled.div `
+  position: relative;
+  overflow: auto;
+`;
+export const KoineDialog = (_a) => {
+    var { children, title, onDismiss, isOpen, $centered = true } = _a, props = __rest(_a, ["children", "title", "onDismiss", "isOpen", "$centered"]);
+    return (_jsx(AnimatePresence, { children: isOpen && (_jsxs(KoineDialogOverlay, Object.assign({}, props, { onDismiss: onDismiss, isOpen: isOpen }, { children: [_jsx(KoineDialogBackdrop, Object.assign({}, koineDialogBackdropMotion)), _jsx(KoineDialogInner, Object.assign({}, koineDialogInnerMotion, { "$centered": $centered }, { children: _jsxs(KoineDialogContent, Object.assign({ "aria-label": title || "", "$centered": $centered }, { children: [title && _jsx(KoineDialogHeader, { children: title }), _jsxs(KoineDialogBody, { children: [_jsx(KoineDialogCloseButton, Object.assign({ onClick: onDismiss }, { children: _jsx(IconClose, {}) })), _jsx(KoineDialogBodyChildren, { children: children })] })] })) }))] }), "DialogOverlay")) }));
+};

package/Dialog/index.js

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

package/Editor/Editor--tiptap.js

@@ -0,0 +1,21 @@
+import { __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback } from "react";
+import { useEditor, EditorContent } from "@tiptap/react";
+import StarterKit from "@tiptap/starter-kit";
+import { EditorGlobalStyles, EditorRoot, EditorBarRoot, EditorBarBtn, EditorIconBold, EditorIconItalic, } from "./components";
+export const EditorBar = ({ editor }) => {
+    const handleClick = useCallback((e, type) => {
+        e.preventDefault();
+        editor === null || editor === void 0 ? void 0 : editor.chain().focus()[`toggle${type}`]().run();
+    }, [editor]);
+    if (!editor) {
+        return null;
+    }
+    return (_jsxs(EditorBarRoot, { children: [_jsx(EditorBarBtn, Object.assign({ onClick: (e) => handleClick(e, "Bold"), className: editor.isActive("bold") ? "is-active" : "" }, { children: _jsx(EditorIconBold, {}) })), _jsx(EditorBarBtn, Object.assign({ onClick: (e) => handleClick(e, "Italic"), className: editor.isActive("bold") ? "is-active" : "" }, { children: _jsx(EditorIconItalic, {}) }))] }));
+};
+export const Editor = (_a) => {
+    var { options } = _a, props = __rest(_a, ["options"]);
+    const editor = useEditor(Object.assign({ extensions: [StarterKit], content: "" }, (options || {})));
+    return (_jsxs(EditorRoot, { children: [_jsx(EditorGlobalStyles, {}), _jsx(EditorBar, { editor: editor }), _jsx(EditorContent, Object.assign({ className: "EditorContent", editor: editor }, props))] }));
+};

package/Editor/components.d.ts

@@ -1,5 +1,4 @@
-export { MdFormatBold as EditorIconBold } from "@react-icons/all-files/md/MdFormatBold";
-export { MdFormatItalic as EditorIconItalic } from "@react-icons/all-files/md/MdFormatItalic";
+export { MdFormatBold as EditorIconBold, MdFormatItalic as EditorIconItalic, } from "react-icons/md";
 export declare const EditorRoot: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const EditorBarRoot: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const EditorBarBtn: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, import("..").KoineButtonUiProps & {

package/Editor/components.js

@@ -0,0 +1,28 @@
+import styled, { createGlobalStyle } from "styled-components";
+import { IconButton } from "../Buttons/IconButton";
+import { inputPadding, inputBorder, inputFocus } from "../Forms/styles";
+export { MdFormatBold as EditorIconBold, MdFormatItalic as EditorIconItalic, } from "react-icons/md";
+export const EditorRoot = styled.div `
+  ${inputBorder}
+  ${inputFocus}
+`;
+export const EditorBarRoot = styled.div `
+  display: flex;
+  justify-content: flex-end;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+  /* background: var(--grey900); */
+`;
+export const EditorBarBtn = styled(IconButton) ``;
+export const EditorGlobalStyles = createGlobalStyle `
+  .ProseMirror {
+    ${inputPadding}
+    
+    &:focus {
+      outline:none;
+    }
+
+    > *:first-child {
+      margin-top: 0;
+    }
+  }
+`;

package/Editor/index.js

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

package/Favicon/FaviconTags.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "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/
+ */
+export const FaviconTags = ({ name, color, safariTabColor, tileColor, themeColor, }) => {
+    return (_jsxs(_Fragment, { children: [_jsx("link", { rel: "apple-touch-icon", sizes: "180x180", href: "/apple-touch-icon.png" }), _jsx("link", { rel: "icon", type: "image/png", sizes: "32x32", href: "/favicon-32x32.png" }), _jsx("link", { rel: "icon", type: "image/png", sizes: "16x16", href: "/favicon-16x16.png" }), _jsx("link", { rel: "manifest", href: "/site.webmanifest" }), _jsx("link", { rel: "mask-icon", href: "/safari-pinned-tab.svg", color: safariTabColor || color }), _jsx("meta", { name: "apple-mobile-web-app-title", content: name }), _jsx("meta", { name: "application-name", content: name }), _jsx("meta", { name: "msapplication-TileColor", content: tileColor || color }), _jsx("meta", { name: "theme-color", content: themeColor || color })] }));
+};

package/Favicon/index.js

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

package/Forms/Checkbox/Checkbox.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import styled from "styled-components";
+import { Toggle, ToggleLabel, ToggleIndicatorSquared } from "../Toggle";
+import { useToggle } from "../Toggle/useToggle";
+export const CheckboxRoot = styled.label `
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+`;
+export const CheckboxToggle = styled(Toggle) `
+  pointer-events: none;
+`;
+export const CheckboxIndicator = styled(ToggleIndicatorSquared) ``;
+export const CheckboxLabel = styled(ToggleLabel) `
+  font-size: 0.8em;
+`;
+/**
+ * All logic and invisible Inputs come from the `useToggle` hook
+ */
+export const Checkbox = forwardRef(function Checkbox(props, ref) {
+    const { rootProps, Inputs, label } = useToggle(props, ref);
+    return (_jsxs(CheckboxRoot, Object.assign({}, rootProps, { children: [_jsxs(CheckboxToggle, { children: [Inputs, _jsx(CheckboxIndicator, {})] }), label && _jsx(CheckboxLabel, { children: label })] })));
+});

package/Forms/Checkbox/index.js

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

package/Forms/Feedback/Feedback.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import styled from "styled-components";
+const Root = styled.div `
+  margin-top: 0.2em;
+  font-size: 12px;
+  ${(p) => (p.$danger ? `color: var(--danger);` : "")}
+`;
+export const Feedback = ({ $danger, children }) => {
+    return (_jsx(Root, Object.assign({ role: "alert", "$danger": $danger }, { children: children })));
+};

package/Forms/Feedback/index.js

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

package/Forms/Field/Field.js

@@ -0,0 +1,61 @@
+import { __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled, { css } from "styled-components";
+import { Feedback } from "../Feedback";
+export const field = css `
+  padding-bottom: 20px;
+`;
+export const FieldBase = styled.div `
+  ${field}
+`;
+export const FieldRoot = styled(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,
+};
+export const Field = (_a) => {
+    var { name, t, error, errors, children } = _a, props = __rest(_a, ["name", "t", "error", "errors", "children"]);
+    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 (_jsxs(FieldRoot, Object.assign({ "$danger": !!err }, props, { children: [children, msg && _jsx(Feedback, Object.assign({ "$danger": true }, { children: msg }))] })));
+};

package/Forms/Field/FieldControl.js

@@ -0,0 +1,45 @@
+import { __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { useFormState } from "react-hook-form";
+import { decode } from "@koine/utils";
+import { Field } from "./Field";
+import { FieldHint } from "./FieldHint";
+import { InputHoneypot } from "../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
+ * ```
+ */
+export const FieldControl = (_a) => {
+    var { control, register, setValue, name: maybeEncodedName, label, placeholder, hint, t, showError = true, children, encode } = _a, props = __rest(_a, ["control", "register", "setValue", "name", "label", "placeholder", "hint", "t", "showError", "children", "encode"]);
+    const name = encode ? decode(maybeEncodedName) : maybeEncodedName;
+    const { errors } = useFormState({ name, control });
+    const error = showError && errors[name] ? errors[name] : null;
+    const FormFieldContent = 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 (_jsxs(_Fragment, { children: [_jsxs(Field, Object.assign({ name: maybeEncodedName, t: t, error: error }, props, { children: [FormFieldContent, hint && _jsx(FieldHint, { children: hint })] })), encode && register && _jsx(InputHoneypot, Object.assign({}, register(name)))] }));
+};

package/Forms/Field/FieldHint.js

@@ -0,0 +1,6 @@
+import styled from "styled-components";
+export const FieldHint = styled.div `
+  padding-top: 0.6em;
+  opacity: 0.7;
+  font-size: 75%;
+`;

package/Forms/Field/index.js

@@ -0,0 +1,2 @@
+export * from "./Field";
+export * from "./FieldControl";

package/Forms/Form/Form.js

@@ -0,0 +1,64 @@
+import { __rest } from "tslib";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import styled from "styled-components";
+import { overlay, centered } from "../../styles/styled";
+import { Collapsable } from "../../Collapsable";
+import { ProgressCircular } from "../../Progress";
+import { Alert } from "../../Alert";
+export const FormRoot = styled.form `
+  position: relative;
+`;
+export const FormOverlay = styled.div `
+  z-index: 4;
+  ${overlay}
+  ${centered}
+  background: rgba(var(--bodyBg--rgb),.8);
+  pointer-events: none;
+  backdrop-filter: blur(2px);
+`;
+export const FormFeedback = styled(Alert) `
+  padding: 2em 0;
+`;
+export const Form = (_a) => {
+    var { ok, fail, loading, Ok = FormFeedback, okProps = {
+        children: "Sent!",
+    }, Fail = FormFeedback, failProps = {
+        children: "Failed.",
+    }, collapseOnOk, collapseOnFail, okTimeout = 3000, failTimeout = 3000, children } = _a, props = __rest(_a, ["ok", "fail", "loading", "Ok", "okProps", "Fail", "failProps", "collapseOnOk", "collapseOnFail", "okTimeout", "failTimeout", "children"]);
+    const [expanded, setExpanded] = useState("");
+    const commonProps = {
+        head: null,
+        components: {
+            HeadIcon: null,
+        },
+    };
+    useEffect(() => {
+        if (!loading) {
+            if (ok)
+                setExpanded("ok");
+            else if (fail)
+                setExpanded("fail");
+        }
+    }, [ok, fail, loading]);
+    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 (_jsxs(FormRoot, Object.assign({ method: "post", noValidate: true }, props, { children: [_jsx(Collapsable, Object.assign({}, commonProps, { expanded: formExpanded, recalc: loading, body: _jsxs(_Fragment, { children: [children, loading && (_jsx(FormOverlay, { children: _jsx(ProgressCircular, { size: "2em", color: "var(--accent300)" }) }))] }) })), _jsx(Collapsable, Object.assign({}, commonProps, { expanded: expanded === "ok" && !loading, body: _jsx(Ok, Object.assign({}, okProps)) })), _jsx(Collapsable, Object.assign({}, commonProps, { expanded: expanded === "fail" && !loading, body: _jsx(Fail, Object.assign({}, failProps)) }))] })));
+};

package/Forms/Form/index.js

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

package/Forms/Input/Input.js

@@ -0,0 +1,25 @@
+import { __rest } from "tslib";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import styled from "styled-components";
+import { Label } from "../Label/Label";
+import { inputBase, inputFocus } from "../styles";
+export const InputWrap = styled.div `
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+`;
+export const InputMain = styled.div `
+  flex: 1;
+`;
+export const InputPre = styled.div ``;
+export const InputPost = styled.div ``;
+export const InputNative = styled.input `
+  ${inputBase}
+  ${inputFocus}
+`;
+export const Input = forwardRef(function Input(_a, ref) {
+    var { register, name, label } = _a, props = __rest(_a, ["register", "name", "label"]);
+    // console.log("Input: render");
+    return (_jsxs(_Fragment, { children: [label && _jsx(Label, { children: label }), _jsx(InputNative, Object.assign({}, (register ? register(name) : { name, ref }), props))] }));
+});

package/Forms/Input/index.js

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

package/Forms/InputGroup/InputGroup.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled from "styled-components";
+import { KoineButton } from "../../Buttons";
+import { field } from "../Field";
+import { max, min } from "../../styles/media";
+export const InputGroupRoot = styled.div `
+  ${field}
+  display: flex;
+  ${max.sm} {
+    flex-direction: column;
+  }
+`;
+export const InputGroupMain = styled.div `
+  flex: 1;
+`;
+export const InputGroupButtonPre = styled(KoineButton) `
+  ${max.sm} {
+    border-bottom: 0;
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+  ${min.sm} {
+    border-right: 0;
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+`;
+export const InputGroupButtonPost = styled(KoineButton) `
+  ${max.sm} {
+    border-top: 0;
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+  }
+  ${min.sm} {
+    border-left: 0;
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+`;
+export const InputGroup = ({ pre, post, Button = KoineButton, btnProps = {}, children, }) => {
+    return (_jsxs(InputGroupRoot, { children: [pre && _jsx(InputGroupButtonPre, Object.assign({ as: Button }, btnProps)), _jsx(InputGroupMain, { children: children }), post && _jsx(InputGroupButtonPost, Object.assign({ as: Button }, btnProps))] }));
+};

package/Forms/InputGroup/index.js

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