@koine/react 2.0.0-beta.12 → 2.0.0-beta.15

package/Forms/Field/Field.d.ts

@@ -1,28 +1,10 @@
-/// <reference types="react" />
 import type { FieldError as RHF_FieldError, FieldErrors as RHF_FieldErrors } from "react-hook-form";
-import type { Translate } from "../../types";
+import type { Translate } from "../../types.js";
 export declare const field: import("styled-components").FlattenSimpleInterpolation;
 export declare const FieldBase: any;
 export declare const FieldRoot: any;
-/**
- * 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")`.
- */
 type FieldErrorType = "required" | "email" | "plain" | string;
 export type FieldError = {
-    /**
-     * use `type: "plain"` when the error message should not act as a translation
-     * key, that is often the case with server side error messages from external
-     * APIs.
-     */
     type: FieldErrorType;
     message: string;
 };

package/Forms/Field/Field.js

@@ -0,0 +1,25 @@
+import { __assign, __makeTemplateObject, __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled, { css } from "styled-components";
+import { Feedback } from "../Feedback/index.js";
+export var field = css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  padding-bottom: 20px;\n"], ["\n  padding-bottom: 20px;\n"])));
+export var FieldBase = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), field);
+export var FieldRoot = styled(FieldBase)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (p) {
+    return (p.$danger &&
+        "\n    color: var(--danger);\n    \n    textarea,\n    input,\n    select {\n      color: var(--danger);\n    }\n  ");
+});
+export var Field = function (_a) {
+    var name = _a.name, t = _a.t, error = _a.error, errors = _a.errors, children = _a.children, props = __rest(_a, ["name", "t", "error", "errors", "children"]);
+    var err = (errors && name ? errors[name] : error);
+    var msg = "";
+    if (err) {
+        if (name && t && err.type !== "plain") {
+            msg = t("errors.".concat(name, ".").concat(err.type || err.message));
+        }
+        else {
+            msg = err.message;
+        }
+    }
+    return (_jsxs(FieldRoot, __assign({ "$danger": !!err }, props, { children: [children, msg && _jsx(Feedback, { "$danger": true, children: msg })] })));
+};
+var templateObject_1, templateObject_2, templateObject_3;

package/Forms/Field/FieldControl.d.ts

@@ -1,9 +1,7 @@
-/// <reference types="react" />
-import type { Translate } from "../../types";
-import type { FormControl } from "../helpers";
+import type { Translate } from "../../types.js";
+import type { FormControl } from "../helpers.js";
 type FieldControlRenderProps = React.PropsWithChildren<Pick<FormControl, "control" | "register" | "setValue" | "name" | "label" | "placeholder">>;
 export type FieldControlProps = FieldControlRenderProps & {
-    /** Render props pattern */
     children: (props: FieldControlRenderProps) => React.ReactNode;
     t: Translate;
     showError?: boolean;
@@ -12,15 +10,5 @@ export type FieldControlProps = FieldControlRenderProps & {
     className?: string;
     style?: React.CSSProperties;
 };
-/**
- *
- * - 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 declare const FieldControl: ({ control, register, setValue, name: maybeEncodedName, label, placeholder, hint, t, showError, children, encode, ...props }: FieldControlProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/Forms/Field/FieldControl.js

@@ -0,0 +1,35 @@
+import { __assign, __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/decode";
+import { InputHoneypot } from "../styles.js";
+import { Field } from "./Field.js";
+import { FieldHint } from "./FieldHint.js";
+export var FieldControl = function (_a) {
+    var control = _a.control, register = _a.register, setValue = _a.setValue, maybeEncodedName = _a.name, label = _a.label, placeholder = _a.placeholder, hint = _a.hint, t = _a.t, _b = _a.showError, showError = _b === void 0 ? true : _b, children = _a.children, encode = _a.encode, props = __rest(_a, ["control", "register", "setValue", "name", "label", "placeholder", "hint", "t", "showError", "children", "encode"]);
+    var name = encode ? decode(maybeEncodedName) : maybeEncodedName;
+    var errors = useFormState({ name: name, control: control }).errors;
+    var error = showError && errors[name] ? errors[name] : null;
+    var FormFieldContent = useMemo(function () {
+        return children({
+            control: control,
+            register: register,
+            setValue: setValue,
+            name: maybeEncodedName,
+            label: label || t("labels.".concat(name), undefined, { default: "" }),
+            placeholder: placeholder || t("placeholders.".concat(name), undefined, { fallback: "" }),
+        });
+    }, [
+        children,
+        control,
+        register,
+        setValue,
+        name,
+        label,
+        t,
+        maybeEncodedName,
+        placeholder,
+    ]);
+    return (_jsxs(_Fragment, { children: [_jsxs(Field, __assign({ name: maybeEncodedName, t: t, error: error }, props, { children: [FormFieldContent, hint && _jsx(FieldHint, { children: hint })] })), encode && register && _jsx(InputHoneypot, __assign({}, register(name)))] }));
+};

package/Forms/Field/FieldHint.js

@@ -0,0 +1,4 @@
+import { __makeTemplateObject } from "tslib";
+import styled from "styled-components";
+export var FieldHint = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  padding-top: 0.6em;\n  opacity: 0.7;\n  font-size: 75%;\n"], ["\n  padding-top: 0.6em;\n  opacity: 0.7;\n  font-size: 75%;\n"])));
+var templateObject_1;

package/Forms/Field/index.d.ts

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

package/Forms/Field/index.js

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

package/Forms/Input/Input.d.ts

@@ -1,5 +1,4 @@
-/// <reference types="react" />
-import type { FormControl } from "../helpers";
+import type { FormControl } from "../helpers.js";
 export declare const InputWrap: any;
 export declare const InputMain: any;
 export declare const InputPre: any;

package/Forms/Input/Input.js

@@ -0,0 +1,16 @@
+import { __assign, __makeTemplateObject, __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.js";
+import { inputBase, inputFocus } from "../styles.js";
+export var InputWrap = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n"])));
+export var InputMain = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  flex: 1;\n"], ["\n  flex: 1;\n"])));
+export var InputPre = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject([""], [""])));
+export var InputPost = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject([""], [""])));
+export var InputNative = styled.input(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  ", "\n  ", "\n"], ["\n  ", "\n  ", "\n"])), inputBase, inputFocus);
+export var Input = forwardRef(function Input(_a, ref) {
+    var register = _a.register, name = _a.name, label = _a.label, props = __rest(_a, ["register", "name", "label"]);
+    return (_jsxs(_Fragment, { children: [label && _jsx(Label, { children: label }), _jsx(InputNative, __assign({}, (register ? register(name) : { name: name, ref: ref }), props))] }));
+});
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

package/Forms/Input/index.d.ts

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

package/Forms/Input/index.js

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

package/Forms/InputGroup/InputGroup.d.ts

@@ -1,5 +1,4 @@
-/// <reference types="react" />
-import { KoineButton, KoineButtonProps } from "../../Buttons";
+import { KoineButton, KoineButtonProps } from "../../Buttons/index.js";
 export declare const InputGroupRoot: any;
 export declare const InputGroupMain: any;
 export declare const InputGroupButtonPre: any;

package/Forms/InputGroup/InputGroup.js

@@ -0,0 +1,15 @@
+import { __assign, __makeTemplateObject, __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled from "styled-components";
+import { KoineButton } from "../../Buttons/index.js";
+import { max, min } from "../../styles/media.js";
+import { field } from "../Field/index.js";
+export var InputGroupRoot = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n  display: flex;\n  ", " {\n    flex-direction: column;\n  }\n"], ["\n  ", "\n  display: flex;\n  ", " {\n    flex-direction: column;\n  }\n"])), field, max.sm);
+export var InputGroupMain = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  flex: 1;\n"], ["\n  flex: 1;\n"])));
+export var InputGroupButtonPre = styled(KoineButton)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  ", " {\n    border-bottom: 0;\n    border-bottom-left-radius: 0;\n    border-bottom-right-radius: 0;\n  }\n  ", " {\n    border-right: 0;\n    border-top-right-radius: 0;\n    border-bottom-right-radius: 0;\n  }\n"], ["\n  ", " {\n    border-bottom: 0;\n    border-bottom-left-radius: 0;\n    border-bottom-right-radius: 0;\n  }\n  ", " {\n    border-right: 0;\n    border-top-right-radius: 0;\n    border-bottom-right-radius: 0;\n  }\n"])), max.sm, min.sm);
+export var InputGroupButtonPost = styled(KoineButton)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  ", " {\n    border-top: 0;\n    border-top-left-radius: 0;\n    border-top-right-radius: 0;\n  }\n  ", " {\n    border-left: 0;\n    border-top-left-radius: 0;\n    border-bottom-left-radius: 0;\n  }\n"], ["\n  ", " {\n    border-top: 0;\n    border-top-left-radius: 0;\n    border-top-right-radius: 0;\n  }\n  ", " {\n    border-left: 0;\n    border-top-left-radius: 0;\n    border-bottom-left-radius: 0;\n  }\n"])), max.sm, min.sm);
+export var InputGroup = function (_a) {
+    var pre = _a.pre, post = _a.post, _b = _a.Button, Button = _b === void 0 ? KoineButton : _b, _c = _a.btnProps, btnProps = _c === void 0 ? {} : _c, children = _a.children, props = __rest(_a, ["pre", "post", "Button", "btnProps", "children"]);
+    return (_jsxs(InputGroupRoot, __assign({}, props, { children: [pre && _jsx(InputGroupButtonPre, __assign({ as: Button }, btnProps)), _jsx(InputGroupMain, { children: children }), post && _jsx(InputGroupButtonPost, __assign({ as: Button }, btnProps))] })));
+};
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/Forms/InputGroup/index.d.ts

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

package/Forms/InputGroup/index.js

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

package/Forms/Label/Label.js

@@ -0,0 +1,6 @@
+import { __makeTemplateObject } from "tslib";
+import styled from "styled-components";
+export var label = "\n  display: flex;\n  font-size: 13px;\n  cursor: pointer;\n";
+export var labelMaterial = "\n  z-index: 2;\n  position: relative;\n  display: inline-block;\n  padding: 0 5px;\n  font-weight: 100;\n  font-size: 10px;\n  background: var(--bodyBg);\n  transform: translateY(-0.3em) translateX(1em);\n  cursor: pointer;\n\n  + * {\n    margin-top: -1em;\n  }\n";
+export var Label = styled.label(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), labelMaterial);
+var templateObject_1;

package/Forms/Label/index.d.ts

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

package/Forms/Label/index.js

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

package/Forms/Password/Password.d.ts

@@ -1,5 +1,4 @@
-/// <reference types="react" />
-import type { FormControl } from "../helpers";
+import type { FormControl } from "../helpers.js";
 export declare const PasswordInputNative: any;
 export type PasswordProps = FormControl;
 export declare const Password: import("react").ForwardRefExoticComponent<Omit<PasswordProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;

package/Forms/Password/Password.js

@@ -0,0 +1,17 @@
+import { __assign, __makeTemplateObject, __rest } from "tslib";
+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.js";
+import { Label } from "../Label/Label.js";
+var ICON_WIDTH = "2em";
+var PasswordInputWrap = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n"], ["\n  position: relative;\n"])));
+export var PasswordInputNative = styled(InputNative)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: relative;\n  padding-right: ", ";\n"], ["\n  position: relative;\n  padding-right: ", ";\n"])), ICON_WIDTH);
+var PasswordIcon = styled.span(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  width: ", ";\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  opacity: 0.5;\n"], ["\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  width: ", ";\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  opacity: 0.5;\n"])), ICON_WIDTH);
+export var Password = forwardRef(function Password(_a, ref) {
+    var register = _a.register, name = _a.name, label = _a.label, props = __rest(_a, ["register", "name", "label"]);
+    var _b = useState(false), visible = _b[0], setVisible = _b[1];
+    return (_jsxs(_Fragment, { children: [label && _jsx(Label, { children: label }), _jsxs(PasswordInputWrap, { children: [_jsx(PasswordInputNative, __assign({ type: visible ? "text" : "password", autoComplete: "new-password" }, (register ? register(name) : { name: name, ref: ref }), props)), _jsx(PasswordIcon, { onClick: function () { return setVisible(function (prev) { return !prev; }); }, children: visible ? _jsx(IconInvisible, {}) : _jsx(IconVisible, {}) })] })] }));
+});
+var templateObject_1, templateObject_2, templateObject_3;

package/Forms/Password/index.d.ts

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

package/Forms/Password/index.js

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

package/Forms/Radio/Radio.d.ts

@@ -1,5 +1,4 @@
-/// <reference types="react" />
-import type { Option } from "../../types";
+import type { Option } from "../../types.js";
 import { FormControl } from "../helpers";
 type RadioOptionProps = Omit<FormControl, "value"> & Option & {
     $ref: React.ForwardedRef<HTMLInputElement>;

package/Forms/Radio/Radio.js

@@ -0,0 +1,25 @@
+import { __assign, __makeTemplateObject, __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import styled from "styled-components";
+import { label } from "../Label/Label.js";
+import { Toggle, ToggleIndicatorSquared, ToggleLabel } from "../Toggle/index.js";
+import { InputInvisible } from "../styles.js";
+var RadioRoot = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject([""], [""])));
+var RadioLabel = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), label);
+var RadioOptionRoot = styled.label(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  padding: 0.05em;\n  cursor: pointer;\n"], ["\n  display: flex;\n  align-items: center;\n  padding: 0.05em;\n  cursor: pointer;\n"])));
+var RadioToggle = styled(Toggle)(templateObject_4 || (templateObject_4 = __makeTemplateObject([""], [""])));
+var RadioIndicator = styled(ToggleIndicatorSquared)(templateObject_5 || (templateObject_5 = __makeTemplateObject([""], [""])));
+var RadioOptionLabel = styled(ToggleLabel)(templateObject_6 || (templateObject_6 = __makeTemplateObject([""], [""])));
+var RadioOption = forwardRef(function RadioOption(_a, ref) {
+    var register = _a.register, name = _a.name, label = _a.label, $ref = _a.$ref, props = __rest(_a, ["register", "name", "label", "$ref"]);
+    var inputProps = register ? register(name) : { name: name, ref: $ref || ref };
+    return (_jsxs(RadioOptionRoot, { children: [_jsxs(RadioToggle, { children: [_jsx(InputInvisible, __assign({ type: "radio" }, inputProps, props)), _jsx(RadioIndicator, {})] }), _jsx(RadioOptionLabel, { children: label })] }));
+});
+export var Radio = forwardRef(function Radio(_a, ref) {
+    var label = _a.label, options = _a.options, props = __rest(_a, ["label", "options"]);
+    if (!options)
+        return null;
+    return (_jsxs(RadioRoot, { children: [label && _jsx(RadioLabel, { children: label }), options.map(function (option, idx) { return (_jsx(RadioOption, __assign({}, option, props, { "$ref": ref }), idx)); })] }));
+});
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

package/Forms/Radio/index.d.ts

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

package/Forms/Radio/index.js

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

package/Forms/Switch/Switch.d.ts

@@ -1,9 +1,5 @@
-/// <reference types="react" />
-import { UseToggleProps } from "../Toggle/useToggle";
+import { UseToggleProps } from "../Toggle/useToggle.js";
 export declare const SwitchTrack: any;
 export declare const SwitchHandle: any;
 export type SwitchProps = UseToggleProps;
-/**
- * All logic and invisible Inputs come from the `useToggle` hook
- */
 export declare const Switch: import("react").ForwardRefExoticComponent<Omit<UseToggleProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;

package/Forms/Switch/Switch.js

@@ -0,0 +1,17 @@
+import { __assign, __makeTemplateObject } from "tslib";
+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.js";
+import { CheckboxLabel, CheckboxRoot } from "../Checkbox/index.js";
+import { toggleBase } from "../Toggle/index.js";
+import { useToggle } from "../Toggle/useToggle.js";
+var SWITCH_GUTTER = 0.25;
+var SWITCH_HANDLE_SIZE = 1;
+export var SwitchTrack = styled.span(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  width: ", "em;\n  height: ", "em;\n  padding: ", "em;\n  border-radius: ", "em;\n  ", "\n\n  input:focus ~ & {\n    ", "\n  }\n\n  input:disabled ~ & {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n"], ["\n  position: relative;\n  width: ", "em;\n  height: ", "em;\n  padding: ", "em;\n  border-radius: ", "em;\n  ", "\n\n  input:focus ~ & {\n    ", "\n  }\n\n  input:disabled ~ & {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n"])), SWITCH_HANDLE_SIZE * 3, SWITCH_HANDLE_SIZE * 1.5, SWITCH_GUTTER, SWITCH_HANDLE_SIZE, toggleBase, stateFocus);
+export var SwitchHandle = styled.span(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: absolute;\n  width: ", "em;\n  height: ", "em;\n  left: ", "em;\n  margin-top: -1px;\n  /* border: 1px solid currentColor; */\n  background: currentColor;\n  opacity: 0.5;\n  border-radius: 100%;\n  transition: all 0.18s ease-in-out;\n\n  input:checked + ", " & {\n    opacity: 1;\n    left: calc(100% - ", "em - ", "em);\n  }\n"], ["\n  position: absolute;\n  width: ", "em;\n  height: ", "em;\n  left: ", "em;\n  margin-top: -1px;\n  /* border: 1px solid currentColor; */\n  background: currentColor;\n  opacity: 0.5;\n  border-radius: 100%;\n  transition: all 0.18s ease-in-out;\n\n  input:checked + ", " & {\n    opacity: 1;\n    left: calc(100% - ", "em - ", "em);\n  }\n"])), SWITCH_HANDLE_SIZE, SWITCH_HANDLE_SIZE, SWITCH_GUTTER, SwitchTrack, SWITCH_HANDLE_SIZE, SWITCH_GUTTER);
+export var Switch = forwardRef(function Switch(props, ref) {
+    var _a = useToggle(props, ref), rootProps = _a.rootProps, Inputs = _a.Inputs, label = _a.label;
+    return (_jsxs(CheckboxRoot, __assign({}, rootProps, { children: [Inputs, _jsx(SwitchTrack, { children: _jsx(SwitchHandle, {}) }), label && _jsx(CheckboxLabel, { children: label })] })));
+});
+var templateObject_1, templateObject_2;

package/Forms/Switch/index.d.ts

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

package/Forms/Switch/index.js

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

package/Forms/Textarea/Textarea.d.ts

@@ -1,5 +1,4 @@
-/// <reference types="react" />
-import { FormControl } from "../helpers";
+import { FormControl } from "../helpers.js";
 export declare const TextareaNative: any;
 export type TextareaProps = FormControl<"textarea">;
 export declare const Textarea: import("react").ForwardRefExoticComponent<Omit<TextareaProps, "ref"> & import("react").RefAttributes<HTMLTextAreaElement>>;

package/Forms/Textarea/Textarea.js

@@ -0,0 +1,12 @@
+import { __assign, __makeTemplateObject, __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.js";
+import { inputBase, inputFocus } from "../styles.js";
+export var TextareaNative = styled.textarea(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n  ", "\n  resize: vertical;\n"], ["\n  ", "\n  ", "\n  resize: vertical;\n"])), inputBase, inputFocus);
+export var Textarea = forwardRef(function Textarea(_a, ref) {
+    var register = _a.register, name = _a.name, label = _a.label, props = __rest(_a, ["register", "name", "label"]);
+    return (_jsxs(_Fragment, { children: [label && _jsx(Label, { children: label }), _jsx(TextareaNative, __assign({}, (register ? register(name) : { name: name, ref: ref }), props))] }));
+});
+var templateObject_1;

package/Forms/Textarea/TextareaRich.d.ts

@@ -1,5 +1,4 @@
-/// <reference types="react" />
-import { FormControl } from "../helpers";
+import { FormControl } from "../helpers.js";
 export type TextareaRichProps = FormControl<"textarea"> & {
     defaultValue?: string;
 };

package/Forms/Textarea/TextareaRich.js

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

package/Forms/Textarea/index.d.ts

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

package/Forms/Textarea/index.js

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

package/Forms/Toggle/Toggle-tailwind.js

@@ -0,0 +1 @@
+"use strict";

package/Forms/Toggle/Toggle.d.ts

@@ -13,7 +13,6 @@ export type ToggleIndicatorProps = unknown;
 export type ToggleIndicatorSquaredProps = ToggleIndicatorProps;
 export declare const ToggleIndicatorSquared: (props: ToggleIndicatorSquaredProps) => import("react/jsx-runtime").JSX.Element;
 export type ToggleIndicatorRoundedProps = ToggleIndicatorProps & {
-    /** @default 6 */
     r?: number;
 };
 export declare const ToggleIndicatorRounded: ({ r, }: ToggleIndicatorRoundedProps) => import("react/jsx-runtime").JSX.Element;

package/Forms/Toggle/Toggle.js

@@ -0,0 +1,25 @@
+import { __makeTemplateObject } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+import styled from "styled-components";
+import { stateFocus } from "../../styles/styled.js";
+export var toggleBase = "\n  border: 1px solid var(--forms-border-color);\n";
+export var toggleIndicatorBg = "\n  display: inline-block;\n  flex-shrink: 0;\n  width: 100%;\n  height: 100%;\n";
+export var toggleIndicatorBgShape = "\n  ".concat(toggleIndicatorBg, "\n  fill: none;\n  stroke-width: 2px;\n  stroke: var(--forms-border-color);\n");
+export var toggleIndicatorFg = "\n  position: absolute;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  fill: currentcolor;\n";
+export var Toggle = styled.span(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 2em;\n  height: 2em;\n  margin: 0 -0.3em; /* rtl */\n  padding: 0.3em;\n"], ["\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 2em;\n  height: 2em;\n  margin: 0 -0.3em; /* rtl */\n  padding: 0.3em;\n"])));
+export var ToggleLabel = styled.span(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  margin-left: 0.6em; /* rtl */\n"], ["\n  margin-left: 0.6em; /* rtl */\n"])));
+export var ToggleLabelSub = styled.small(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  opacity: 0.7;\n  font-size: 0.7em;\n"], ["\n  opacity: 0.7;\n  font-size: 0.7em;\n"])));
+export var ToggleIndicatorHolder = styled.span(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  position: relative;\n  display: flex;\n\n  input:focus ~ & {\n    ", "\n  }\n"], ["\n  position: relative;\n  display: flex;\n\n  input:focus ~ & {\n    ", "\n  }\n"])), stateFocus);
+export var ToggleIndicatorBgSquare = styled.svg(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), toggleIndicatorBgShape);
+export var ToggleIndicatorBgCircle = styled.svg(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), toggleIndicatorBgShape);
+export var ToggleIndicatorFg = styled.svg(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  ", "\n  transform: scale(0);\n  transition: transform 0.18s ease;\n\n  input:checked + ", " & {\n    transform: scale(1);\n  }\n"], ["\n  ", "\n  transform: scale(0);\n  transition: transform 0.18s ease;\n\n  input:checked + ", " & {\n    transform: scale(1);\n  }\n"])), toggleIndicatorFg, ToggleIndicatorHolder);
+export var ToggleIndicatorSquared = function (props) {
+    return (_jsxs(ToggleIndicatorHolder, { children: [_jsx(ToggleIndicatorBgSquare, { viewBox: "0 0 24 24", children: _jsx("rect", { width: "24", height: "24" }) }), _jsx(ToggleIndicatorFg, { viewBox: "0 0 24 24", children: _jsx("path", { d: "M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" }) })] }));
+};
+export var ToggleIndicatorRounded = function (_a) {
+    var _b = _a.r, r = _b === void 0 ? 6 : _b;
+    var id = useId();
+    return (_jsxs(ToggleIndicatorHolder, { children: [_jsxs(ToggleIndicatorBgCircle, { viewBox: "0 0 24 24", children: [_jsx("circle", { cy: "12", cx: "12", r: "12", id: "r_".concat(id), clipPath: "url(#c_".concat(id, ")") }), _jsx("clipPath", { id: "c_".concat(id), children: _jsx("use", { xlinkHref: "#r_".concat(id) }) })] }), _jsx(ToggleIndicatorFg, { viewBox: "0 0 24 24", children: _jsx("circle", { r: r, cx: "12", cy: "12" }) })] }));
+};
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;

package/Forms/Toggle/index.d.ts

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

package/Forms/Toggle/index.js

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

package/Forms/Toggle/useToggle-tailwind.js

@@ -0,0 +1 @@
+"use strict";

package/Forms/Toggle/useToggle.d.ts

@@ -1,5 +1,4 @@
-/// <reference types="react" />
-import type { Option } from "../../types";
+import type { Option } from "../../types.js";
 import { FormControl } from "../helpers";
 export type UseToggleProps = Omit<FormControl, "value"> & {
     value?: boolean;
@@ -7,35 +6,6 @@ export type UseToggleProps = Omit<FormControl, "value"> & {
     valueFalse?: string;
     options?: Option[];
 };
-/**
- * This hook is meant to power Checkboxes, Switches and checkbox-like Radios
- * components, it works in fact in two modes:
- *
- * 1: behaviour as standard checkbox
- * yup validation would simply look like:
- *
- * ```ts
- * privacy:  boolean().required(),
- * // add `.nullable()` if you do not provide a boolean `defaultValue`
- * ```
- *
- * 2: beahviour as two radio for checkbox with custom true/false values as
- * strings yup validation would look like:
- *
- * ```ts
- * newsletter: string().oneOf(["yes", "no"]).required(),
- * // add `.nullable()` if you do not provide a string `defaultValue`
- *
- * // to do not make it required and avoid triggering an error when the input is
- * // untouched you need to set the default value of the input in the form
- * // initialization's `defaultValues` as such:
- *
- * useForm({ defaultValues: { newsletter: "no" }})
- * ```
- *
- * To enable this mode either pass the props `valueTrue` and `valueFalse` or
- * an array of options with the shape of `Option`
- */
 export declare function useToggle(props: UseToggleProps, ref: React.ForwardedRef<HTMLInputElement>): {
     Inputs: import("react/jsx-runtime").JSX.Element;
     rootProps: {

package/Forms/Toggle/useToggle.js

@@ -0,0 +1,85 @@
+import { __assign, __rest } from "tslib";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useMemo } from "react";
+import { useWatch } from "react-hook-form";
+import { InputInvisible } from "../styles.js";
+export function useToggle(props, ref) {
+    var name = props.name, control = props.control, register = props.register, label = props.label, options = props.options, propValue = props.value, restProps = __rest(props, ["name", "control", "register", "label", "options", "value"]);
+    var id = restProps.id, valueTrue = restProps.valueTrue, valueFalse = restProps.valueFalse, remainingInputProps = __rest(restProps, ["id", "valueTrue", "valueFalse"]);
+    if (options) {
+        valueTrue = options
+            .filter(function (opt) { return opt.value === "true"; })[0]
+            .label.toString();
+        valueFalse = options
+            .filter(function (opt) { return opt.value === "false"; })[0]
+            .label.toString();
+    }
+    id = "switch-".concat(name);
+    var idTrue = "".concat(id, "-true");
+    var idFalse = "".concat(id, "-false");
+    var isRadio = !!(valueTrue && valueFalse);
+    var value = useWatch({
+        name: name,
+        control: control,
+    });
+    if (propValue) {
+        value = propValue;
+    }
+    var inputProps = useMemo(function () {
+        return register
+            ? register(name)
+            : control
+                ? control.register(name)
+                : {
+                    name: name,
+                    ref: ref,
+                };
+    }, [register, control, name, ref]);
+    var handleKeyDown = useCallback(function (event) {
+        if (event.key === " ") {
+            event.preventDefault();
+            event.stopPropagation();
+            var firstInput = event.target;
+            var next = firstInput.nextElementSibling;
+            var prev = firstInput.previousElementSibling;
+            var secondInput = (next === null || next === void 0 ? void 0 : next.tagName) === "INPUT" ? next : prev;
+            var target = firstInput;
+            if (firstInput.checked) {
+                target = secondInput;
+            }
+            else {
+                if (!secondInput.checked) {
+                    target =
+                        firstInput.value === valueTrue ? firstInput : secondInput;
+                }
+            }
+            if (target)
+                target.click();
+        }
+    }, [valueTrue]);
+    var valueDependentProps = useMemo(function () { return ({
+        rootProps: {
+            htmlFor: isRadio
+                ? !value || value === valueFalse
+                    ? idTrue
+                    : idFalse
+                : id,
+        },
+        label: label ? label : value,
+        value: value,
+    }); }, [value, valueFalse, isRadio, id, idTrue, idFalse, label]);
+    var Inputs = useMemo(function () {
+        return isRadio ? (_jsxs(_Fragment, { children: [_jsx(InputInvisible, __assign({ id: idFalse }, inputProps, remainingInputProps, { onKeyDown: handleKeyDown, type: "radio", value: valueFalse })), _jsx(InputInvisible, __assign({ id: idTrue }, inputProps, remainingInputProps, { onKeyDown: handleKeyDown, type: "radio", value: valueTrue }))] })) : (_jsx(InputInvisible, __assign({ id: id, type: "checkbox" }, inputProps, remainingInputProps)));
+    }, [
+        inputProps,
+        remainingInputProps,
+        handleKeyDown,
+        isRadio,
+        idFalse,
+        idTrue,
+        valueFalse,
+        valueTrue,
+        id,
+    ]);
+    return __assign(__assign({}, valueDependentProps), { Inputs: Inputs });
+}