@koine/react 2.0.0-beta.7 → 2.0.0-beta.71

package/Forms/Input/index.js

@@ -1,6 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-const _export_star = require("@swc/helpers/_/_export_star");
-_export_star._(require("./Input"), exports);

package/Forms/Input/index.mjs

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

package/Forms/InputGroup/InputGroup.d.ts

@@ -1,13 +0,0 @@
-/// <reference types="react" />
-import { KoineButton, KoineButtonProps } from "../../Buttons";
-export declare const InputGroupRoot: any;
-export declare const InputGroupMain: any;
-export declare const InputGroupButtonPre: any;
-export declare const InputGroupButtonPost: any;
-export type InputGroupProps = React.ComponentPropsWithoutRef<"div"> & {
-    pre?: boolean;
-    post?: boolean;
-    Button?: typeof KoineButton;
-    btnProps?: KoineButtonProps;
-};
-export declare const InputGroup: ({ pre, post, Button, btnProps, children, ...props }: InputGroupProps) => import("react/jsx-runtime").JSX.Element;

package/Forms/InputGroup/InputGroup.js

@@ -1,85 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-function _export(target, all) {
-    for(var name in all)Object.defineProperty(target, name, {
-        enumerable: true,
-        get: all[name]
-    });
-}
-_export(exports, {
-    InputGroupRoot: function() {
-        return InputGroupRoot;
-    },
-    InputGroupMain: function() {
-        return InputGroupMain;
-    },
-    InputGroupButtonPre: function() {
-        return InputGroupButtonPre;
-    },
-    InputGroupButtonPost: function() {
-        return InputGroupButtonPost;
-    },
-    InputGroup: function() {
-        return InputGroup;
-    }
-});
-const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
-const _jsxruntime = require("react/jsx-runtime");
-const _styledcomponents = /*#__PURE__*/ _interop_require_default._(require("styled-components"));
-const _Buttons = require("../../Buttons");
-const _media = require("../../styles/media");
-const _Field = require("../Field");
-const InputGroupRoot = _styledcomponents.default.div`
-  ${_Field.field}
-  display: flex;
-  ${_media.max.sm} {
-    flex-direction: column;
-  }
-`;
-const InputGroupMain = _styledcomponents.default.div`
-  flex: 1;
-`;
-const InputGroupButtonPre = (0, _styledcomponents.default)(_Buttons.KoineButton)`
-  ${_media.max.sm} {
-    border-bottom: 0;
-    border-bottom-left-radius: 0;
-    border-bottom-right-radius: 0;
-  }
-  ${_media.min.sm} {
-    border-right: 0;
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
-  }
-`;
-const InputGroupButtonPost = (0, _styledcomponents.default)(_Buttons.KoineButton)`
-  ${_media.max.sm} {
-    border-top: 0;
-    border-top-left-radius: 0;
-    border-top-right-radius: 0;
-  }
-  ${_media.min.sm} {
-    border-left: 0;
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0;
-  }
-`;
-const InputGroup = ({ pre, post, Button = _Buttons.KoineButton, btnProps = {}, children, ...props })=>{
-    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(InputGroupRoot, {
-        ...props,
-        children: [
-            pre && /*#__PURE__*/ (0, _jsxruntime.jsx)(InputGroupButtonPre, {
-                as: Button,
-                ...btnProps
-            }),
-            /*#__PURE__*/ (0, _jsxruntime.jsx)(InputGroupMain, {
-                children: children
-            }),
-            post && /*#__PURE__*/ (0, _jsxruntime.jsx)(InputGroupButtonPost, {
-                as: Button,
-                ...btnProps
-            })
-        ]
-    });
-};

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.d.ts

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

package/Forms/InputGroup/index.js

@@ -1,6 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-const _export_star = require("@swc/helpers/_/_export_star");
-_export_star._(require("./InputGroup"), exports);

package/Forms/InputGroup/index.mjs

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

package/Forms/Label/Label.d.ts

@@ -1,3 +0,0 @@
-export declare const label = "\n  display: flex;\n  font-size: 13px;\n  cursor: pointer;\n";
-export declare const 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 declare const Label: any;

package/Forms/Label/Label.js

@@ -1,46 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-function _export(target, all) {
-    for(var name in all)Object.defineProperty(target, name, {
-        enumerable: true,
-        get: all[name]
-    });
-}
-_export(exports, {
-    label: function() {
-        return label;
-    },
-    labelMaterial: function() {
-        return labelMaterial;
-    },
-    Label: function() {
-        return Label;
-    }
-});
-const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
-const _styledcomponents = /*#__PURE__*/ _interop_require_default._(require("styled-components"));
-const label = `
-  display: flex;
-  font-size: 13px;
-  cursor: pointer;
-`;
-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;
-  }
-`;
-const Label = _styledcomponents.default.label`
-  ${labelMaterial}
-`;

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.d.ts

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

package/Forms/Label/index.js

@@ -1,6 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-const _export_star = require("@swc/helpers/_/_export_star");
-_export_star._(require("./Label"), exports);

package/Forms/Label/index.mjs

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

package/Forms/Password/Password.d.ts

@@ -1,5 +0,0 @@
-/// <reference types="react" />
-import type { FormControl } from "../helpers";
-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

@@ -1,72 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-function _export(target, all) {
-    for(var name in all)Object.defineProperty(target, name, {
-        enumerable: true,
-        get: all[name]
-    });
-}
-_export(exports, {
-    PasswordInputNative: function() {
-        return PasswordInputNative;
-    },
-    Password: function() {
-        return Password;
-    }
-});
-const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
-const _jsxruntime = require("react/jsx-runtime");
-const _react = require("react");
-const _im = require("react-icons/im");
-const _styledcomponents = /*#__PURE__*/ _interop_require_default._(require("styled-components"));
-const _Input = require("../Input/Input");
-const _Label = require("../Label/Label");
-const ICON_WIDTH = "2em";
-const PasswordInputWrap = _styledcomponents.default.div`
-  position: relative;
-`;
-const PasswordInputNative = (0, _styledcomponents.default)(_Input.InputNative)`
-  position: relative;
-  padding-right: ${ICON_WIDTH};
-`;
-const PasswordIcon = _styledcomponents.default.span`
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  width: ${ICON_WIDTH};
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  opacity: 0.5;
-`;
-const Password = /*#__PURE__*/ (0, _react.forwardRef)(function Password({ register, name, label, ...props }, ref) {
-    const [visible, setVisible] = (0, _react.useState)(false);
-    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
-        children: [
-            label && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Label.Label, {
-                children: label
-            }),
-            /*#__PURE__*/ (0, _jsxruntime.jsxs)(PasswordInputWrap, {
-                children: [
-                    /*#__PURE__*/ (0, _jsxruntime.jsx)(PasswordInputNative, {
-                        type: visible ? "text" : "password",
-                        autoComplete: "new-password",
-                        ...register ? register(name) : {
-                            name,
-                            ref
-                        },
-                        ...props
-                    }),
-                    /*#__PURE__*/ (0, _jsxruntime.jsx)(PasswordIcon, {
-                        onClick: ()=>setVisible((prev)=>!prev),
-                        children: visible ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_im.ImEyeBlocked, {}) : /*#__PURE__*/ (0, _jsxruntime.jsx)(_im.ImEye, {})
-                    })
-                ]
-            })
-        ]
-    });
-});

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.d.ts

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

package/Forms/Password/index.js

@@ -1,6 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-const _export_star = require("@swc/helpers/_/_export_star");
-_export_star._(require("./Password"), exports);

package/Forms/Password/index.mjs

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

package/Forms/Radio/Radio.d.ts

@@ -1,12 +0,0 @@
-/// <reference types="react" />
-import type { Option } from "../../types";
-import { FormControl } from "../helpers";
-type RadioOptionProps = Omit<FormControl, "value"> & Option & {
-    $ref: React.ForwardedRef<HTMLInputElement>;
-};
-export type RadioProps = Omit<FormControl, "value"> & {
-    value?: string;
-    options?: Pick<RadioOptionProps, "label" | "value">[];
-};
-export declare const Radio: import("react").ForwardRefExoticComponent<Omit<RadioProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
-export {};

package/Forms/Radio/Radio.js

@@ -1,68 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-Object.defineProperty(exports, "Radio", {
-    enumerable: true,
-    get: function() {
-        return Radio;
-    }
-});
-const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
-const _jsxruntime = require("react/jsx-runtime");
-const _react = require("react");
-const _styledcomponents = /*#__PURE__*/ _interop_require_default._(require("styled-components"));
-const _Label = require("../Label/Label");
-const _Toggle = require("../Toggle");
-const _styles = require("../styles");
-const RadioRoot = _styledcomponents.default.div``;
-const RadioLabel = _styledcomponents.default.div`
-  ${_Label.label}
-`;
-const RadioOptionRoot = _styledcomponents.default.label`
-  display: flex;
-  align-items: center;
-  padding: 0.05em;
-  cursor: pointer;
-`;
-const RadioToggle = (0, _styledcomponents.default)(_Toggle.Toggle)``;
-const RadioIndicator = (0, _styledcomponents.default)(_Toggle.ToggleIndicatorSquared)``;
-const RadioOptionLabel = (0, _styledcomponents.default)(_Toggle.ToggleLabel)``;
-const RadioOption = /*#__PURE__*/ (0, _react.forwardRef)(function RadioOption({ register, name, label, $ref, ...props }, ref) {
-    const inputProps = register ? register(name) : {
-        name,
-        ref: $ref || ref
-    };
-    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(RadioOptionRoot, {
-        children: [
-            /*#__PURE__*/ (0, _jsxruntime.jsxs)(RadioToggle, {
-                children: [
-                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_styles.InputInvisible, {
-                        type: "radio",
-                        ...inputProps,
-                        ...props
-                    }),
-                    /*#__PURE__*/ (0, _jsxruntime.jsx)(RadioIndicator, {})
-                ]
-            }),
-            /*#__PURE__*/ (0, _jsxruntime.jsx)(RadioOptionLabel, {
-                children: label
-            })
-        ]
-    });
-});
-const Radio = /*#__PURE__*/ (0, _react.forwardRef)(function Radio({ label, options, ...props }, ref) {
-    if (!options) return null;
-    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(RadioRoot, {
-        children: [
-            label && /*#__PURE__*/ (0, _jsxruntime.jsx)(RadioLabel, {
-                children: label
-            }),
-            options.map((option, idx)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(RadioOption, {
-                    ...option,
-                    ...props,
-                    $ref: ref
-                }, idx))
-        ]
-    });
-});

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.d.ts

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

package/Forms/Radio/index.js

@@ -1,6 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-const _export_star = require("@swc/helpers/_/_export_star");
-_export_star._(require("./Radio"), exports);

package/Forms/Radio/index.mjs

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

package/Forms/Switch/Switch.d.ts

@@ -1,9 +0,0 @@
-/// <reference types="react" />
-import { UseToggleProps } from "../Toggle/useToggle";
-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

@@ -1,80 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-function _export(target, all) {
-    for(var name in all)Object.defineProperty(target, name, {
-        enumerable: true,
-        get: all[name]
-    });
-}
-_export(exports, {
-    SwitchTrack: function() {
-        return SwitchTrack;
-    },
-    SwitchHandle: function() {
-        return SwitchHandle;
-    },
-    Switch: function() {
-        return Switch;
-    }
-});
-const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
-const _jsxruntime = require("react/jsx-runtime");
-const _react = require("react");
-const _styledcomponents = /*#__PURE__*/ _interop_require_default._(require("styled-components"));
-const _styled = require("../../styles/styled");
-const _Checkbox = require("../Checkbox");
-const _Toggle = require("../Toggle");
-const _useToggle = require("../Toggle/useToggle");
-const SWITCH_GUTTER = 0.25;
-const SWITCH_HANDLE_SIZE = 1;
-const SwitchTrack = _styledcomponents.default.span`
-  position: relative;
-  width: ${SWITCH_HANDLE_SIZE * 3}em;
-  height: ${SWITCH_HANDLE_SIZE * 1.5}em;
-  padding: ${SWITCH_GUTTER}em;
-  border-radius: ${SWITCH_HANDLE_SIZE}em;
-  ${_Toggle.toggleBase}
-
-  input:focus ~ & {
-    ${_styled.stateFocus}
-  }
-
-  input:disabled ~ & {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-`;
-const SwitchHandle = _styledcomponents.default.span`
-  position: absolute;
-  width: ${SWITCH_HANDLE_SIZE}em;
-  height: ${SWITCH_HANDLE_SIZE}em;
-  left: ${SWITCH_GUTTER}em;
-  margin-top: -1px;
-  /* border: 1px solid currentColor; */
-  background: currentColor;
-  opacity: 0.5;
-  border-radius: 100%;
-  transition: all 0.18s ease-in-out;
-
-  input:checked + ${SwitchTrack} & {
-    opacity: 1;
-    left: calc(100% - ${SWITCH_HANDLE_SIZE}em - ${SWITCH_GUTTER}em);
-  }
-`;
-const Switch = /*#__PURE__*/ (0, _react.forwardRef)(function Switch(props, ref) {
-    const { rootProps, Inputs, label } = (0, _useToggle.useToggle)(props, ref);
-    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Checkbox.CheckboxRoot, {
-        ...rootProps,
-        children: [
-            Inputs,
-            /*#__PURE__*/ (0, _jsxruntime.jsx)(SwitchTrack, {
-                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(SwitchHandle, {})
-            }),
-            label && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Checkbox.CheckboxLabel, {
-                children: label
-            })
-        ]
-    });
-});