@koine/react 2.0.0-beta.14 → 2.0.0-beta.16

package/Form/Form.mjs

@@ -1,95 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useEffect, useState } from "react";
-// import type { MotionProps } from "framer-motion";
-import { extendComponent } from "../helpers";
-export const Root = "form";
-export const Overlay = "div";
-export const Progress = "div";
-export const Collapsable = "div";
-export const Ok = null;
-export const Fail = null;
-export 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] = useState("");
-    const commonProps = {
-        head: null,
-        components: {
-            HeadIcon: null
-        }
-    };
-    useEffect(()=>{
-        if (!loading) {
-            if (ok) setOpen("ok");
-            else if (fail) setOpen("fail");
-        }
-    }, [
-        ok,
-        fail,
-        loading
-    ]);
-    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 /*#__PURE__*/ _jsxs(Root, {
-        method: "post",
-        noValidate: true,
-        ...props,
-        children: [
-            /*#__PURE__*/ _jsx(Collapsable, {
-                ...commonProps,
-                $open: formExpanded,
-                recalc: loading,
-                body: /*#__PURE__*/ _jsxs(_Fragment, {
-                    children: [
-                        children,
-                        loading && /*#__PURE__*/ _jsx(Overlay, {
-                            children: /*#__PURE__*/ _jsx(Progress, {})
-                        })
-                    ]
-                })
-            }),
-            /*#__PURE__*/ _jsx(Collapsable, {
-                ...commonProps,
-                $open: open === "ok" && !loading,
-                body: /*#__PURE__*/ _jsx(Ok, {
-                    ...okProps
-                })
-            }),
-            /*#__PURE__*/ _jsx(Collapsable, {
-                ...commonProps,
-                $open: open === "fail" && !loading,
-                body: /*#__PURE__*/ _jsx(Fail, {
-                    ...failProps
-                })
-            })
-        ]
-    });
-};
-export const KoineForm = extendComponent(Form, {
-    Root,
-    Overlay,
-    Progress,
-    Collapsable,
-    Ok,
-    Fail
-}); // export default Form;

package/Form/index.mjs

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

package/Form/sc/bare.mjs

@@ -1,29 +0,0 @@
-import styled from "styled-components";
-import { Alert } from "../../Alert";
-import { Collapsable } from "../../Collapsable";
-import { ProgressCircular } from "../../Progress";
-import { extendComponent } from "../../helpers";
-import { centered, overlay } from "../../styles/styled";
-import * as _ from "../Form";
-export const Root = styled(_.Root)`
-  position: relative;
-`;
-export const Overlay = styled(_.Overlay)`
-  z-index: 4;
-  ${overlay}
-  ${centered}
-  background: rgba(var(--bodyBg--rgb),.8);
-  pointer-events: none;
-  backdrop-filter: blur(2px);
-`;
-export const Feedback = styled(Alert)`
-  padding: 2em 0;
-`;
-export const KoineForm = extendComponent(_.KoineForm, {
-    Root,
-    Overlay,
-    Progress: ProgressCircular,
-    Collapsable,
-    Ok: Feedback,
-    Fail: Feedback
-});

package/Forms/Checkbox/Checkbox.mjs

@@ -1,36 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef } from "react";
-import styled from "styled-components";
-import { Toggle, ToggleIndicatorSquared, ToggleLabel } 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 = /*#__PURE__*/ forwardRef(function Checkbox(props, ref) {
-    const { rootProps, Inputs, label } = useToggle(props, ref);
-    return /*#__PURE__*/ _jsxs(CheckboxRoot, {
-        ...rootProps,
-        children: [
-            /*#__PURE__*/ _jsxs(CheckboxToggle, {
-                children: [
-                    Inputs,
-                    /*#__PURE__*/ _jsx(CheckboxIndicator, {})
-                ]
-            }),
-            label && /*#__PURE__*/ _jsx(CheckboxLabel, {
-                children: label
-            })
-        ]
-    });
-});

package/Forms/Checkbox/index.mjs

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

package/Forms/Feedback/Feedback.mjs

@@ -1,14 +0,0 @@
-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 /*#__PURE__*/ _jsx(Root, {
-        role: "alert",
-        $danger: $danger,
-        children: children
-    });
-};

package/Forms/Feedback/index.mjs

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

package/Forms/Field/Field.mjs

@@ -1,50 +0,0 @@
-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);
-    }
-  `;
-}}
-`;
-export 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") {
-            msg = t(`errors.${name}.${err.type || 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 /*#__PURE__*/ _jsxs(FieldRoot, {
-        $danger: !!err,
-        ...props,
-        children: [
-            children,
-            msg && /*#__PURE__*/ _jsx(Feedback, {
-                $danger: true,
-                children: msg
-            })
-        ]
-    });
-};

package/Forms/Field/FieldControl.mjs

@@ -1,67 +0,0 @@
-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/decode";
-import { InputHoneypot } from "../styles";
-import { Field } from "./Field";
-import { FieldHint } from "./FieldHint";
-/**
- *
- * - 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 = ({ control, register, setValue, name: maybeEncodedName, label, placeholder, hint, t, showError = true, children, encode, ...props })=>{
-    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 /*#__PURE__*/ _jsxs(_Fragment, {
-        children: [
-            /*#__PURE__*/ _jsxs(Field, {
-                name: maybeEncodedName,
-                t: t,
-                error: error,
-                ...props,
-                children: [
-                    FormFieldContent,
-                    hint && /*#__PURE__*/ _jsx(FieldHint, {
-                        children: hint
-                    })
-                ]
-            }),
-            encode && register && /*#__PURE__*/ _jsx(InputHoneypot, {
-                ...register(name)
-            })
-        ]
-    });
-};

package/Forms/Field/FieldHint.mjs

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

package/Forms/Field/index.mjs

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

package/Forms/Input/Input.mjs

@@ -1,36 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } 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 = /*#__PURE__*/ forwardRef(function Input({ register, name, label, ...props }, ref) {
-    // console.log("Input: render");
-    return /*#__PURE__*/ _jsxs(_Fragment, {
-        children: [
-            label && /*#__PURE__*/ _jsx(Label, {
-                children: label
-            }),
-            /*#__PURE__*/ _jsx(InputNative, {
-                ...register ? register(name) : {
-                    name,
-                    ref
-                },
-                ...props
-            })
-        ]
-    });
-});

package/Forms/Input/index.mjs

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

package/Forms/InputGroup/InputGroup.mjs

@@ -1,57 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import styled from "styled-components";
-import { KoineButton } from "../../Buttons";
-import { max, min } from "../../styles/media";
-import { field } from "../Field";
-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, ...props })=>{
-    return /*#__PURE__*/ _jsxs(InputGroupRoot, {
-        ...props,
-        children: [
-            pre && /*#__PURE__*/ _jsx(InputGroupButtonPre, {
-                as: Button,
-                ...btnProps
-            }),
-            /*#__PURE__*/ _jsx(InputGroupMain, {
-                children: children
-            }),
-            post && /*#__PURE__*/ _jsx(InputGroupButtonPost, {
-                as: Button,
-                ...btnProps
-            })
-        ]
-    });
-};

package/Forms/InputGroup/index.mjs

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

package/Forms/Label/Label.mjs

@@ -1,24 +0,0 @@
-import styled from "styled-components";
-export const label = `
-  display: flex;
-  font-size: 13px;
-  cursor: pointer;
-`;
-export const 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;
-  }
-`;
-export const Label = styled.label`
-  ${labelMaterial}
-`;

package/Forms/Label/index.mjs

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

package/Forms/Password/Password.mjs

@@ -1,53 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { forwardRef, useState } from "react";
-import { ImEyeBlocked as IconInvisible, ImEye as IconVisible } from "react-icons/im";
-import styled from "styled-components";
-import { InputNative } from "../Input/Input";
-import { Label } from "../Label/Label";
-const ICON_WIDTH = "2em";
-const PasswordInputWrap = styled.div`
-  position: relative;
-`;
-export const PasswordInputNative = styled(InputNative)`
-  position: relative;
-  padding-right: ${ICON_WIDTH};
-`;
-const PasswordIcon = styled.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;
-`;
-export const Password = /*#__PURE__*/ forwardRef(function Password({ register, name, label, ...props }, ref) {
-    const [visible, setVisible] = useState(false);
-    return /*#__PURE__*/ _jsxs(_Fragment, {
-        children: [
-            label && /*#__PURE__*/ _jsx(Label, {
-                children: label
-            }),
-            /*#__PURE__*/ _jsxs(PasswordInputWrap, {
-                children: [
-                    /*#__PURE__*/ _jsx(PasswordInputNative, {
-                        type: visible ? "text" : "password",
-                        autoComplete: "new-password",
-                        ...register ? register(name) : {
-                            name,
-                            ref
-                        },
-                        ...props
-                    }),
-                    /*#__PURE__*/ _jsx(PasswordIcon, {
-                        onClick: ()=>setVisible((prev)=>!prev),
-                        children: visible ? /*#__PURE__*/ _jsx(IconInvisible, {}) : /*#__PURE__*/ _jsx(IconVisible, {})
-                    })
-                ]
-            })
-        ]
-    });
-});

package/Forms/Password/index.mjs

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

package/Forms/Radio/Radio.mjs

@@ -1,57 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef } from "react";
-import styled from "styled-components";
-import { label } from "../Label/Label";
-import { Toggle, ToggleIndicatorSquared, ToggleLabel } from "../Toggle";
-import { InputInvisible } from "../styles";
-const RadioRoot = styled.div``;
-const RadioLabel = styled.div`
-  ${label}
-`;
-const RadioOptionRoot = styled.label`
-  display: flex;
-  align-items: center;
-  padding: 0.05em;
-  cursor: pointer;
-`;
-const RadioToggle = styled(Toggle)``;
-const RadioIndicator = styled(ToggleIndicatorSquared)``;
-const RadioOptionLabel = styled(ToggleLabel)``;
-const RadioOption = /*#__PURE__*/ forwardRef(function RadioOption({ register, name, label, $ref, ...props }, ref) {
-    const inputProps = register ? register(name) : {
-        name,
-        ref: $ref || ref
-    };
-    return /*#__PURE__*/ _jsxs(RadioOptionRoot, {
-        children: [
-            /*#__PURE__*/ _jsxs(RadioToggle, {
-                children: [
-                    /*#__PURE__*/ _jsx(InputInvisible, {
-                        type: "radio",
-                        ...inputProps,
-                        ...props
-                    }),
-                    /*#__PURE__*/ _jsx(RadioIndicator, {})
-                ]
-            }),
-            /*#__PURE__*/ _jsx(RadioOptionLabel, {
-                children: label
-            })
-        ]
-    });
-});
-export const Radio = /*#__PURE__*/ forwardRef(function Radio({ label, options, ...props }, ref) {
-    if (!options) return null;
-    return /*#__PURE__*/ _jsxs(RadioRoot, {
-        children: [
-            label && /*#__PURE__*/ _jsx(RadioLabel, {
-                children: label
-            }),
-            options.map((option, idx)=>/*#__PURE__*/ _jsx(RadioOption, {
-                    ...option,
-                    ...props,
-                    $ref: ref
-                }, idx))
-        ]
-    });
-});

package/Forms/Radio/index.mjs

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

package/Forms/Switch/Switch.mjs

@@ -1,60 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef } from "react";
-import styled from "styled-components";
-import { stateFocus } from "../../styles/styled";
-import { CheckboxLabel, CheckboxRoot } from "../Checkbox";
-import { toggleBase } from "../Toggle";
-import { useToggle } from "../Toggle/useToggle";
-const SWITCH_GUTTER = 0.25;
-const SWITCH_HANDLE_SIZE = 1;
-export const SwitchTrack = styled.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;
-  ${toggleBase}
-
-  input:focus ~ & {
-    ${stateFocus}
-  }
-
-  input:disabled ~ & {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-`;
-export const SwitchHandle = styled.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 + ${SwitchTrack} & {
-    opacity: 1;
-    left: calc(100% - ${SWITCH_HANDLE_SIZE}em - ${SWITCH_GUTTER}em);
-  }
-`;
-/**
- * All logic and invisible Inputs come from the `useToggle` hook
- */ export const Switch = /*#__PURE__*/ forwardRef(function Switch(props, ref) {
-    const { rootProps, Inputs, label } = useToggle(props, ref);
-    return /*#__PURE__*/ _jsxs(CheckboxRoot, {
-        ...rootProps,
-        children: [
-            Inputs,
-            /*#__PURE__*/ _jsx(SwitchTrack, {
-                children: /*#__PURE__*/ _jsx(SwitchHandle, {})
-            }),
-            label && /*#__PURE__*/ _jsx(CheckboxLabel, {
-                children: label
-            })
-        ]
-    });
-});

package/Forms/Switch/index.mjs

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

package/Forms/Textarea/Textarea.mjs

@@ -1,26 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } 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 TextareaNative = styled.textarea`
-  ${inputBase}
-  ${inputFocus}
-  resize: vertical;
-`;
-export const Textarea = /*#__PURE__*/ forwardRef(function Textarea({ register, name, label, ...props }, ref) {
-    return /*#__PURE__*/ _jsxs(_Fragment, {
-        children: [
-            label && /*#__PURE__*/ _jsx(Label, {
-                children: label
-            }),
-            /*#__PURE__*/ _jsx(TextareaNative, {
-                ...register ? register(name) : {
-                    name,
-                    ref
-                },
-                ...props
-            })
-        ]
-    });
-});