@koine/react 2.0.0-beta.10 → 2.0.0-beta.11

package/Dialog/tw/elegant.js

@@ -1,54 +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, {
-    Root: function() {
-        return Root;
-    },
-    Backdrop: function() {
-        return Backdrop;
-    },
-    Container: function() {
-        return Container;
-    },
-    Paper: function() {
-        return Paper;
-    },
-    Close: function() {
-        return Close;
-    },
-    Header: function() {
-        return Header;
-    },
-    Body: function() {
-        return Body;
-    },
-    KoineDialog: function() {
-        return KoineDialog;
-    }
-});
-const _helpers = require("../../helpers");
-const _bare = require("./bare");
-const Root = (0, _helpers.classed)(_bare.KoineDialog.Root)``;
-const Backdrop = (0, _helpers.classed)(_bare.KoineDialog.Backdrop)`< class="bg-white/[.5] backdrop-blur-sm`;
-const Container = (0, _helpers.classed)(_bare.KoineDialog.Container)``;
-const Paper = (0, _helpers.classed)(_bare.KoineDialog.Paper)`< class="bg-white shadow-xl m-8 max-w-screen-sm border border-gray-400`;
-const Close = (0, _helpers.classed)(_bare.KoineDialog.Close)`< class="absolute top-0 right-0 p-8 text-2xl opacity-20 hover:opacity-100 focus:opacity-100`;
-const Header = (0, _helpers.classed)(_bare.KoineDialog.Header)`< class="p-8 text-2xl bold italic`;
-const Body = (0, _helpers.classed)(_bare.KoineDialog.Body)`< class="p-8 pt-4`;
-const KoineDialog = (0, _helpers.extendComponent)(_bare.KoineDialog, {
-    Root,
-    Backdrop,
-    Container,
-    Paper,
-    Close,
-    Header,
-    Body
-});

package/Dialog/tw/framer.js

@@ -1,26 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-Object.defineProperty(exports, "KoineDialog", {
-    enumerable: true,
-    get: function() {
-        return KoineDialog;
-    }
-});
-const _framermotion = require("framer-motion");
-const _helpers = require("../../helpers");
-const _bare = require("../m/bare");
-const _basic = require("../m/basic");
-const _bare1 = require("./bare");
-const KoineDialog = (0, _helpers.extendComponent)(_bare.KoineDialog, {
-    Root: _bare1.Root,
-    Backdrop: (0, _framermotion.m)(_bare1.Backdrop),
-    Container: _bare1.Container,
-    Paper: (0, _framermotion.m)(_bare1.Paper),
-    Close: _bare1.Close,
-    Header: _bare1.Header,
-    Body: _bare1.Body,
-    mBackdrop: _basic.dialogBackdropMotion,
-    mPaper: _basic.dialogPaperMotion
-});

package/Dialog/tw/framerMaterial.js

@@ -1,26 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-Object.defineProperty(exports, "KoineDialog", {
-    enumerable: true,
-    get: function() {
-        return KoineDialog;
-    }
-});
-const _framermotion = require("framer-motion");
-const _helpers = require("../../helpers");
-const _bare = require("../m/bare");
-const _basic = require("../m/basic");
-const _material = require("./material");
-const KoineDialog = (0, _helpers.extendComponent)(_bare.KoineDialog, {
-    Root: _material.Root,
-    Backdrop: (0, _framermotion.m)(_material.Backdrop),
-    Container: _material.Container,
-    Paper: (0, _framermotion.m)(_material.Paper),
-    Close: _material.Close,
-    Header: _material.Header,
-    Body: _material.Body,
-    mBackdrop: _basic.dialogBackdropMotion,
-    mPaper: _basic.dialogPaperMotion
-});

package/Dialog/tw/index.stories.js

@@ -1,113 +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, {
-    // import { KoineDialog as elegantComp } from "./elegant";
-    default: function() {
-        return _default;
-    },
-    bare: function() {
-        return bare;
-    },
-    material: function() {
-        return material;
-    },
-    framer: function() {
-        return framer;
-    },
-    framerMaterial: function() {
-        return framerMaterial;
-    },
-    customised: function() {
-        return customised;
-    }
-});
-const _jsxruntime = require("react/jsx-runtime");
-const _stories = require("@koine/stories");
-const _helpers = require("../../helpers");
-const _bare = require("./bare");
-const _framer = require("./framer");
-const _framerMaterial = require("./framerMaterial");
-const _material = require("./material");
-const _default = {
-    title: "Base/Dialog/Tailwind",
-    ..._stories.storyDialogMeta
-};
-const bareTemplate = (args)=>{
-    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_stories.StoryDialog, {
-        ...args,
-        Dialog: _bare.KoineDialog
-    });
-};
-const bare = bareTemplate.bind({});
-bare.args = _stories.storyDialogArgs;
-const materialTemplate = (args)=>{
-    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_stories.StoryDialog, {
-        ...args,
-        Dialog: _material.KoineDialog
-    });
-};
-const material = materialTemplate.bind({});
-material.args = _stories.storyDialogArgs;
-const framerTemplate = (args)=>{
-    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_stories.StoryDialog, {
-        ...args,
-        Dialog: _framer.KoineDialog
-    });
-};
-const framer = framerTemplate.bind({});
-framer.decorators = [
-    _stories.decoratorFramer
-];
-framer.args = _stories.storyDialogArgs;
-const framerMaterialTemplate = (args)=>{
-    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_stories.StoryDialog, {
-        ...args,
-        Dialog: _framerMaterial.KoineDialog
-    });
-};
-const framerMaterial = framerMaterialTemplate.bind({});
-framerMaterial.decorators = [
-    _stories.decoratorFramer
-];
-framerMaterial.args = _stories.storyDialogArgs;
-const customisedTemplate = (args)=>{
-    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_stories.StoryDialog, {
-        ...args,
-        Dialog: _framer.KoineDialog
-    });
-};
-const customised = customisedTemplate.bind({});
-customised.decorators = [
-    _stories.decoratorFramer
-];
-customised.args = {
-    ..._stories.storyDialogArgs,
-    $scrollPaper: true,
-    Backdrop: (0, _helpers.classed)(_framer.KoineDialog.Backdrop)`< class="bg-sky-100/[.5]"`,
-    Paper: (0, _helpers.classed)(_framer.KoineDialog.Paper)`< class="shadow-2xl m-8 max-w-screen-sm bg-blue-500 text-white rounded-3xl"`,
-    Close: (0, _helpers.classed)(_framer.KoineDialog.Close)`< class="absolute lg:-right-8 lg:-top-8 p-4 text-4xl rounded-full bg-blue-300 hover:bg-blue-700 text-blue-800 hover:text-white"`,
-    Header: (0, _helpers.classed)(_framer.KoineDialog.Header)`< class="font-mono font-bold text-3xl p-12 pb-6`,
-    Body: (0, _helpers.classed)(_framer.KoineDialog.Body)`< class="px-12 pb-12 border-none"`,
-    mPaper: {
-        initial: {
-            scale: 0.9,
-            scaleX: 0
-        },
-        animate: {
-            scale: 1,
-            scaleX: 1
-        },
-        exit: {
-            scale: 0.9,
-            scaleX: 0
-        }
-    }
-};

package/Dialog/tw/material.js

@@ -1,54 +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, {
-    Root: function() {
-        return Root;
-    },
-    Backdrop: function() {
-        return Backdrop;
-    },
-    Container: function() {
-        return Container;
-    },
-    Paper: function() {
-        return Paper;
-    },
-    Close: function() {
-        return Close;
-    },
-    Header: function() {
-        return Header;
-    },
-    Body: function() {
-        return Body;
-    },
-    KoineDialog: function() {
-        return KoineDialog;
-    }
-});
-const _helpers = require("../../helpers");
-const _bare = require("./bare");
-const Root = (0, _helpers.classed)(_bare.KoineDialog.Root)``;
-const Backdrop = (0, _helpers.classed)(_bare.KoineDialog.Backdrop)`< class="bg-black/[.5] backdrop-blur-sm`;
-const Container = (0, _helpers.classed)(_bare.KoineDialog.Container)``;
-const Paper = (0, _helpers.classed)(_bare.KoineDialog.Paper)`< class="rounded bg-white shadow-xl m-8 max-w-screen-sm`;
-const Close = (0, _helpers.classed)(_bare.KoineDialog.Close)`< class="absolute top-0 right-0 p-4 text-2xl opacity-50`;
-const Header = (0, _helpers.classed)(_bare.KoineDialog.Header)`< class="p-4 text-xl`;
-const Body = (0, _helpers.classed)(_bare.KoineDialog.Body)`< class="p-4 border-t border-gray-200`;
-const KoineDialog = (0, _helpers.extendComponent)(_bare.KoineDialog, {
-    Root,
-    Backdrop,
-    Container,
-    Paper,
-    Close,
-    Header,
-    Body
-});

package/Editor/Editor--tiptap.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, {
-    EditorBar: function() {
-        return EditorBar;
-    },
-    Editor: function() {
-        return Editor;
-    }
-});
-const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
-const _jsxruntime = require("react/jsx-runtime");
-const _react = require("@tiptap/react");
-const _starterkit = /*#__PURE__*/ _interop_require_default._(require("@tiptap/starter-kit"));
-const _react1 = require("react");
-const _components = require("./components");
-const EditorBar = ({ editor })=>{
-    const handleClick = (0, _react1.useCallback)((e, type)=>{
-        e.preventDefault();
-        // @ts-expect-error FIXME: cannot build this
-        editor?.chain().focus()[`toggle${type}`]().run();
-    }, [
-        editor
-    ]);
-    if (!editor) {
-        return null;
-    }
-    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_components.EditorBarRoot, {
-        children: [
-            /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.EditorBarBtn, {
-                onClick: (e)=>handleClick(e, "Bold"),
-                className: editor.isActive("bold") ? "is-active" : "",
-                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.EditorIconBold, {})
-            }),
-            /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.EditorBarBtn, {
-                onClick: (e)=>handleClick(e, "Italic"),
-                className: editor.isActive("bold") ? "is-active" : "",
-                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.EditorIconItalic, {})
-            })
-        ]
-    });
-};
-const Editor = ({ options, ...props })=>{
-    const editor = (0, _react.useEditor)({
-        extensions: [
-            _starterkit.default
-        ],
-        content: "",
-        ...options || {}
-    });
-    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_components.EditorRoot, {
-        children: [
-            /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.EditorGlobalStyles, {}),
-            /*#__PURE__*/ (0, _jsxruntime.jsx)(EditorBar, {
-                editor: editor
-            }),
-            /*#__PURE__*/ (0, _jsxruntime.jsx)(_react.EditorContent, {
-                className: "EditorContent",
-                editor: editor,
-                ...props
-            })
-        ]
-    });
-};

package/Editor/components.js

@@ -1,59 +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, {
-    EditorIconBold: function() {
-        return _md.MdFormatBold;
-    },
-    EditorIconItalic: function() {
-        return _md.MdFormatItalic;
-    },
-    EditorRoot: function() {
-        return EditorRoot;
-    },
-    EditorBarRoot: function() {
-        return EditorBarRoot;
-    },
-    EditorBarBtn: function() {
-        return EditorBarBtn;
-    },
-    EditorGlobalStyles: function() {
-        return EditorGlobalStyles;
-    }
-});
-const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
-const _styledcomponents = /*#__PURE__*/ _interop_require_wildcard._(require("styled-components"));
-const _IconButton = require("../Buttons/IconButton");
-const _styles = require("../Forms/styles");
-const _md = require("react-icons/md");
-const EditorRoot = _styledcomponents.default.div`
-  ${_styles.inputBorder}
-  ${_styles.inputFocus}
-`;
-const EditorBarRoot = _styledcomponents.default.div`
-  display: flex;
-  justify-content: flex-end;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-  /* background: var(--grey900); */
-`;
-const EditorBarBtn = (0, _styledcomponents.default)(_IconButton.IconButton)``;
-const EditorGlobalStyles = (0, _styledcomponents.createGlobalStyle)`
-  .ProseMirror {
-    ${_styles.inputPadding}
-    
-    &:focus {
-      outline:none;
-    }
-
-    > *:first-child {
-      margin-top: 0;
-    }
-  }
-`;

package/Editor/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("./Editor--tiptap"), exports);

package/FaviconTags.js

@@ -1,73 +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, {
-    FaviconTags: function() {
-        return FaviconTags;
-    },
-    default: function() {
-        return _default;
-    }
-});
-const _jsxruntime = require("react/jsx-runtime");
-const FaviconTags = ({ name, color, safariTabColor, tileColor, themeColor })=>{
-    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
-        children: [
-            /*#__PURE__*/ (0, _jsxruntime.jsx)("link", {
-                rel: "shortcut icon",
-                href: "/favicon.ico",
-                type: "image/x-icon"
-            }),
-            /*#__PURE__*/ (0, _jsxruntime.jsx)("link", {
-                rel: "apple-touch-icon",
-                sizes: "180x180",
-                href: "/apple-touch-icon.png"
-            }),
-            /*#__PURE__*/ (0, _jsxruntime.jsx)("link", {
-                rel: "icon",
-                type: "image/png",
-                sizes: "32x32",
-                href: "/favicon-32x32.png"
-            }),
-            /*#__PURE__*/ (0, _jsxruntime.jsx)("link", {
-                rel: "icon",
-                type: "image/png",
-                sizes: "16x16",
-                href: "/favicon-16x16.png"
-            }),
-            /*#__PURE__*/ (0, _jsxruntime.jsx)("link", {
-                rel: "manifest",
-                href: "/site.webmanifest"
-            }),
-            /*#__PURE__*/ (0, _jsxruntime.jsx)("link", {
-                rel: "mask-icon",
-                href: "/safari-pinned-tab.svg",
-                color: safariTabColor || color
-            }),
-            /*#__PURE__*/ (0, _jsxruntime.jsx)("meta", {
-                name: "apple-mobile-web-app-title",
-                content: name
-            }),
-            /*#__PURE__*/ (0, _jsxruntime.jsx)("meta", {
-                name: "application-name",
-                content: name
-            }),
-            /*#__PURE__*/ (0, _jsxruntime.jsx)("meta", {
-                name: "msapplication-TileColor",
-                content: tileColor || color
-            }),
-            /*#__PURE__*/ (0, _jsxruntime.jsx)("meta", {
-                name: "theme-color",
-                content: themeColor || color
-            })
-        ]
-    });
-};
-const _default = FaviconTags;

package/Form/Form.js

@@ -1,130 +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, {
-    Root: function() {
-        return Root;
-    },
-    Overlay: function() {
-        return Overlay;
-    },
-    Progress: function() {
-        return Progress;
-    },
-    Collapsable: function() {
-        return Collapsable;
-    },
-    Ok: function() {
-        return Ok;
-    },
-    Fail: function() {
-        return Fail;
-    },
-    Form: function() {
-        return Form;
-    },
-    KoineForm: function() {
-        return KoineForm;
-    }
-});
-const _jsxruntime = require("react/jsx-runtime");
-const _react = require("react");
-const _helpers = require("../helpers");
-const Root = "form";
-const Overlay = "div";
-const Progress = "div";
-const Collapsable = "div";
-const Ok = null;
-const Fail = null;
-const Form = ({ Root: _Root, Overlay: _Overlay, Progress: _Progress, Collapsable: _Collapsable, ok, fail, loading, Ok: _Ok, okProps = {
-    children: "Sent!"
-}, Fail: _Fail, failProps = {
-    children: "Failed."
-}, collapseOnOk, collapseOnFail, okTimeout = 3000, failTimeout = 3000, children, ...props })=>{
-    const [open, setOpen] = (0, _react.useState)("");
-    const commonProps = {
-        head: null,
-        components: {
-            HeadIcon: null
-        }
-    };
-    (0, _react.useEffect)(()=>{
-        if (!loading) {
-            if (ok) setOpen("ok");
-            else if (fail) setOpen("fail");
-        }
-    }, [
-        ok,
-        fail,
-        loading
-    ]);
-    (0, _react.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__*/ (0, _jsxruntime.jsxs)(Root, {
-        method: "post",
-        noValidate: true,
-        ...props,
-        children: [
-            /*#__PURE__*/ (0, _jsxruntime.jsx)(Collapsable, {
-                ...commonProps,
-                $open: formExpanded,
-                recalc: loading,
-                body: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
-                    children: [
-                        children,
-                        loading && /*#__PURE__*/ (0, _jsxruntime.jsx)(Overlay, {
-                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(Progress, {})
-                        })
-                    ]
-                })
-            }),
-            /*#__PURE__*/ (0, _jsxruntime.jsx)(Collapsable, {
-                ...commonProps,
-                $open: open === "ok" && !loading,
-                body: /*#__PURE__*/ (0, _jsxruntime.jsx)(Ok, {
-                    ...okProps
-                })
-            }),
-            /*#__PURE__*/ (0, _jsxruntime.jsx)(Collapsable, {
-                ...commonProps,
-                $open: open === "fail" && !loading,
-                body: /*#__PURE__*/ (0, _jsxruntime.jsx)(Fail, {
-                    ...failProps
-                })
-            })
-        ]
-    });
-};
-const KoineForm = (0, _helpers.extendComponent)(Form, {
-    Root,
-    Overlay,
-    Progress,
-    Collapsable,
-    Ok,
-    Fail
-}); // export default Form;

package/Form/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("./Form"), exports);

package/Form/sc/bare.js

@@ -1,55 +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, {
-    Root: function() {
-        return Root;
-    },
-    Overlay: function() {
-        return Overlay;
-    },
-    Feedback: function() {
-        return Feedback;
-    },
-    KoineForm: function() {
-        return KoineForm;
-    }
-});
-const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
-const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
-const _styledcomponents = /*#__PURE__*/ _interop_require_default._(require("styled-components"));
-const _Alert = require("../../Alert");
-const _Collapsable = require("../../Collapsable");
-const _Progress = require("../../Progress");
-const _helpers = require("../../helpers");
-const _styled = require("../../styles/styled");
-const _Form = /*#__PURE__*/ _interop_require_wildcard._(require("../Form"));
-const Root = (0, _styledcomponents.default)(_Form.Root)`
-  position: relative;
-`;
-const Overlay = (0, _styledcomponents.default)(_Form.Overlay)`
-  z-index: 4;
-  ${_styled.overlay}
-  ${_styled.centered}
-  background: rgba(var(--bodyBg--rgb),.8);
-  pointer-events: none;
-  backdrop-filter: blur(2px);
-`;
-const Feedback = (0, _styledcomponents.default)(_Alert.Alert)`
-  padding: 2em 0;
-`;
-const KoineForm = (0, _helpers.extendComponent)(_Form.KoineForm, {
-    Root,
-    Overlay,
-    Progress: _Progress.ProgressCircular,
-    Collapsable: _Collapsable.Collapsable,
-    Ok: Feedback,
-    Fail: Feedback
-});