@koine/react 2.0.0-beta.2 → 2.0.0-beta.5

package/Dialog/tw/framerMaterial.d.ts

@@ -3,11 +3,11 @@
 export declare const KoineDialog: ((props: Omit<{
     key?: import("react").Key | null | undefined;
     id?: string | undefined;
-    title?: string | undefined;
-    color?: string | undefined;
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
     slot?: string | undefined;
     style?: import("react").CSSProperties | undefined;
-    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+    title?: string | undefined;
+    color?: string | undefined;
     defaultChecked?: boolean | undefined;
     defaultValue?: string | number | readonly string[] | undefined;
     suppressContentEditableWarning?: boolean | undefined;
@@ -50,7 +50,7 @@ export declare const KoineDialog: ((props: Omit<{
     results?: number | undefined;
     security?: string | undefined;
     unselectable?: "on" | "off" | undefined;
-    inputMode?: "text" | "search" | "none" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
+    inputMode?: "search" | "text" | "none" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
     is?: string | undefined;
     'aria-activedescendant'?: string | undefined;
     'aria-atomic'?: (boolean | "true" | "false") | undefined;
@@ -64,12 +64,12 @@ export declare const KoineDialog: ((props: Omit<{
     'aria-colindextext'?: string | undefined;
     'aria-colspan'?: number | undefined;
     'aria-controls'?: string | undefined;
-    'aria-current'?: boolean | "location" | "time" | "true" | "false" | "page" | "step" | "date" | undefined;
+    'aria-current'?: boolean | "time" | "location" | "true" | "false" | "page" | "step" | "date" | undefined;
     'aria-describedby'?: string | undefined;
     'aria-description'?: string | undefined;
     'aria-details'?: string | undefined;
     'aria-disabled'?: (boolean | "true" | "false") | undefined;
-    'aria-dropeffect'?: "link" | "none" | "copy" | "execute" | "move" | "popup" | undefined;
+    'aria-dropeffect'?: "link" | "copy" | "none" | "execute" | "move" | "popup" | undefined;
     'aria-errormessage'?: string | undefined;
     'aria-expanded'?: (boolean | "true" | "false") | undefined;
     'aria-flowto'?: string | undefined;

package/Dialog/tw/framerMaterial.js

@@ -1,19 +1,26 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.KoineDialog = void 0;
-var framer_motion_1 = require("framer-motion");
-var helpers_1 = require("../../helpers");
-var basic_1 = require("../m/basic");
-var bare_1 = require("../m/bare");
-var material_1 = require("./material");
-exports.KoineDialog = (0, helpers_1.extendComponent)(bare_1.KoineDialog, {
-    Root: material_1.Root,
-    Backdrop: (0, framer_motion_1.m)(material_1.Backdrop),
-    Container: material_1.Container,
-    Paper: (0, framer_motion_1.m)(material_1.Paper),
-    Close: material_1.Close,
-    Header: material_1.Header,
-    Body: material_1.Body,
-    mBackdrop: basic_1.dialogBackdropMotion,
-    mPaper: basic_1.dialogPaperMotion,
+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/framerMaterial.mjs

@@ -1,16 +1,16 @@
 import { m } from "framer-motion";
 import { extendComponent } from "../../helpers";
-import { dialogBackdropMotion, dialogPaperMotion } from "../m/basic";
 import { KoineDialog as _ } from "../m/bare";
-import { Root, Backdrop, Container, Paper, Close, Header, Body, } from "./material";
-export var KoineDialog = extendComponent(_, {
-    Root: Root,
+import { dialogBackdropMotion, dialogPaperMotion } from "../m/basic";
+import { Backdrop, Body, Close, Container, Header, Paper, Root } from "./material";
+export const KoineDialog = extendComponent(_, {
+    Root,
     Backdrop: m(Backdrop),
-    Container: Container,
+    Container,
     Paper: m(Paper),
-    Close: Close,
-    Header: Header,
-    Body: Body,
+    Close,
+    Header,
+    Body,
     mBackdrop: dialogBackdropMotion,
-    mPaper: dialogPaperMotion,
+    mPaper: dialogPaperMotion
 });

package/Dialog/tw/index.stories.js

@@ -0,0 +1,112 @@
+"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 _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__*/ React.createElement(_stories.StoryDialog, {
+        ...args,
+        Dialog: _bare.KoineDialog
+    });
+};
+const bare = bareTemplate.bind({});
+bare.args = _stories.storyDialogArgs;
+const materialTemplate = (args)=>{
+    return /*#__PURE__*/ React.createElement(_stories.StoryDialog, {
+        ...args,
+        Dialog: _material.KoineDialog
+    });
+};
+const material = materialTemplate.bind({});
+material.args = _stories.storyDialogArgs;
+const framerTemplate = (args)=>{
+    return /*#__PURE__*/ React.createElement(_stories.StoryDialog, {
+        ...args,
+        Dialog: _framer.KoineDialog
+    });
+};
+const framer = framerTemplate.bind({});
+framer.decorators = [
+    _stories.decoratorFramer
+];
+framer.args = _stories.storyDialogArgs;
+const framerMaterialTemplate = (args)=>{
+    return /*#__PURE__*/ React.createElement(_stories.StoryDialog, {
+        ...args,
+        Dialog: _framerMaterial.KoineDialog
+    });
+};
+const framerMaterial = framerMaterialTemplate.bind({});
+framerMaterial.decorators = [
+    _stories.decoratorFramer
+];
+framerMaterial.args = _stories.storyDialogArgs;
+const customisedTemplate = (args)=>{
+    return /*#__PURE__*/ React.createElement(_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/index.stories.mjs

@@ -0,0 +1,82 @@
+import { StoryDialog, decoratorFramer, storyDialogArgs, storyDialogMeta } from "@koine/stories";
+import { classed } from "../../helpers";
+import { KoineDialog as bareComp } from "./bare";
+import { KoineDialog as framerComp } from "./framer";
+import { KoineDialog as framerMaterialComp } from "./framerMaterial";
+import { KoineDialog as materialComp } from "./material";
+// import { KoineDialog as elegantComp } from "./elegant";
+export default {
+    title: "Base/Dialog/Tailwind",
+    ...storyDialogMeta
+};
+const bareTemplate = (args)=>{
+    return /*#__PURE__*/ React.createElement(StoryDialog, {
+        ...args,
+        Dialog: bareComp
+    });
+};
+export const bare = bareTemplate.bind({});
+bare.args = storyDialogArgs;
+const materialTemplate = (args)=>{
+    return /*#__PURE__*/ React.createElement(StoryDialog, {
+        ...args,
+        Dialog: materialComp
+    });
+};
+export const material = materialTemplate.bind({});
+material.args = storyDialogArgs;
+const framerTemplate = (args)=>{
+    return /*#__PURE__*/ React.createElement(StoryDialog, {
+        ...args,
+        Dialog: framerComp
+    });
+};
+export const framer = framerTemplate.bind({});
+framer.decorators = [
+    decoratorFramer
+];
+framer.args = storyDialogArgs;
+const framerMaterialTemplate = (args)=>{
+    return /*#__PURE__*/ React.createElement(StoryDialog, {
+        ...args,
+        Dialog: framerMaterialComp
+    });
+};
+export const framerMaterial = framerMaterialTemplate.bind({});
+framerMaterial.decorators = [
+    decoratorFramer
+];
+framerMaterial.args = storyDialogArgs;
+const customisedTemplate = (args)=>{
+    return /*#__PURE__*/ React.createElement(StoryDialog, {
+        ...args,
+        Dialog: framerComp
+    });
+};
+export const customised = customisedTemplate.bind({});
+customised.decorators = [
+    decoratorFramer
+];
+customised.args = {
+    ...storyDialogArgs,
+    $scrollPaper: true,
+    Backdrop: classed(framerComp.Backdrop)`< class="bg-sky-100/[.5]"`,
+    Paper: classed(framerComp.Paper)`< class="shadow-2xl m-8 max-w-screen-sm bg-blue-500 text-white rounded-3xl"`,
+    Close: classed(framerComp.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: classed(framerComp.Header)`< class="font-mono font-bold text-3xl p-12 pb-6`,
+    Body: classed(framerComp.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.d.ts

@@ -81,11 +81,11 @@ export declare const Body: import("react").ForwardRefExoticComponent<Omit<{
 export declare const KoineDialog: ((props: Omit<{
     key?: import("react").Key | null | undefined;
     id?: string | undefined;
-    title?: string | undefined;
-    color?: string | undefined;
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
     slot?: string | undefined;
     style?: import("react").CSSProperties | undefined;
-    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+    title?: string | undefined;
+    color?: string | undefined;
     defaultChecked?: boolean | undefined;
     defaultValue?: string | number | readonly string[] | undefined;
     suppressContentEditableWarning?: boolean | undefined;
@@ -128,7 +128,7 @@ export declare const KoineDialog: ((props: Omit<{
     results?: number | undefined;
     security?: string | undefined;
     unselectable?: "on" | "off" | undefined;
-    inputMode?: "text" | "search" | "none" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
+    inputMode?: "search" | "text" | "none" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
     is?: string | undefined;
     'aria-activedescendant'?: string | undefined;
     'aria-atomic'?: (boolean | "true" | "false") | undefined;
@@ -142,12 +142,12 @@ export declare const KoineDialog: ((props: Omit<{
     'aria-colindextext'?: string | undefined;
     'aria-colspan'?: number | undefined;
     'aria-controls'?: string | undefined;
-    'aria-current'?: boolean | "location" | "time" | "true" | "false" | "page" | "step" | "date" | undefined;
+    'aria-current'?: boolean | "time" | "location" | "true" | "false" | "page" | "step" | "date" | undefined;
     'aria-describedby'?: string | undefined;
     'aria-description'?: string | undefined;
     'aria-details'?: string | undefined;
     'aria-disabled'?: (boolean | "true" | "false") | undefined;
-    'aria-dropeffect'?: "link" | "none" | "copy" | "execute" | "move" | "popup" | undefined;
+    'aria-dropeffect'?: "link" | "copy" | "none" | "execute" | "move" | "popup" | undefined;
     'aria-errormessage'?: string | undefined;
     'aria-expanded'?: (boolean | "true" | "false") | undefined;
     'aria-flowto'?: string | undefined;

package/Dialog/tw/material.js

@@ -1,23 +1,54 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.KoineDialog = exports.Body = exports.Header = exports.Close = exports.Paper = exports.Container = exports.Backdrop = exports.Root = void 0;
-var tslib_1 = require("tslib");
-var helpers_1 = require("../../helpers");
-var bare_1 = require("./bare");
-exports.Root = (0, helpers_1.classed)(bare_1.KoineDialog.Root)(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject([""], [""])));
-exports.Backdrop = (0, helpers_1.classed)(bare_1.KoineDialog.Backdrop)(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject(["< class=\"bg-black/[.5] backdrop-blur-sm"], ["< class=\"bg-black/[.5] backdrop-blur-sm"])));
-exports.Container = (0, helpers_1.classed)(bare_1.KoineDialog.Container)(templateObject_3 || (templateObject_3 = tslib_1.__makeTemplateObject([""], [""])));
-exports.Paper = (0, helpers_1.classed)(bare_1.KoineDialog.Paper)(templateObject_4 || (templateObject_4 = tslib_1.__makeTemplateObject(["< class=\"rounded bg-white shadow-xl m-8 max-w-screen-sm"], ["< class=\"rounded bg-white shadow-xl m-8 max-w-screen-sm"])));
-exports.Close = (0, helpers_1.classed)(bare_1.KoineDialog.Close)(templateObject_5 || (templateObject_5 = tslib_1.__makeTemplateObject(["< class=\"absolute top-0 right-0 p-4 text-2xl opacity-50"], ["< class=\"absolute top-0 right-0 p-4 text-2xl opacity-50"])));
-exports.Header = (0, helpers_1.classed)(bare_1.KoineDialog.Header)(templateObject_6 || (templateObject_6 = tslib_1.__makeTemplateObject(["< class=\"p-4 text-xl"], ["< class=\"p-4 text-xl"])));
-exports.Body = (0, helpers_1.classed)(bare_1.KoineDialog.Body)(templateObject_7 || (templateObject_7 = tslib_1.__makeTemplateObject(["< class=\"p-4 border-t border-gray-200"], ["< class=\"p-4 border-t border-gray-200"])));
-exports.KoineDialog = (0, helpers_1.extendComponent)(bare_1.KoineDialog, {
-    Root: exports.Root,
-    Backdrop: exports.Backdrop,
-    Container: exports.Container,
-    Paper: exports.Paper,
-    Close: exports.Close,
-    Header: exports.Header,
-    Body: exports.Body,
+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
 });
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;

package/Dialog/tw/material.mjs

@@ -1,20 +1,18 @@
-import { __makeTemplateObject } from "tslib";
 import { classed, extendComponent } from "../../helpers";
 import { KoineDialog as _ } from "./bare";
-export var Root = classed(_.Root)(templateObject_1 || (templateObject_1 = __makeTemplateObject([""], [""])));
-export var Backdrop = classed(_.Backdrop)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["< class=\"bg-black/[.5] backdrop-blur-sm"], ["< class=\"bg-black/[.5] backdrop-blur-sm"])));
-export var Container = classed(_.Container)(templateObject_3 || (templateObject_3 = __makeTemplateObject([""], [""])));
-export var Paper = classed(_.Paper)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["< class=\"rounded bg-white shadow-xl m-8 max-w-screen-sm"], ["< class=\"rounded bg-white shadow-xl m-8 max-w-screen-sm"])));
-export var Close = classed(_.Close)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["< class=\"absolute top-0 right-0 p-4 text-2xl opacity-50"], ["< class=\"absolute top-0 right-0 p-4 text-2xl opacity-50"])));
-export var Header = classed(_.Header)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["< class=\"p-4 text-xl"], ["< class=\"p-4 text-xl"])));
-export var Body = classed(_.Body)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["< class=\"p-4 border-t border-gray-200"], ["< class=\"p-4 border-t border-gray-200"])));
-export var KoineDialog = extendComponent(_, {
-    Root: Root,
-    Backdrop: Backdrop,
-    Container: Container,
-    Paper: Paper,
-    Close: Close,
-    Header: Header,
-    Body: Body,
+export const Root = classed(_.Root)``;
+export const Backdrop = classed(_.Backdrop)`< class="bg-black/[.5] backdrop-blur-sm`;
+export const Container = classed(_.Container)``;
+export const Paper = classed(_.Paper)`< class="rounded bg-white shadow-xl m-8 max-w-screen-sm`;
+export const Close = classed(_.Close)`< class="absolute top-0 right-0 p-4 text-2xl opacity-50`;
+export const Header = classed(_.Header)`< class="p-4 text-xl`;
+export const Body = classed(_.Body)`< class="p-4 border-t border-gray-200`;
+export const KoineDialog = extendComponent(_, {
+    Root,
+    Backdrop,
+    Container,
+    Paper,
+    Close,
+    Header,
+    Body
 });
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;

package/Editor/Editor--tiptap.d.ts

@@ -1,4 +1,4 @@
-import type { Editor as EditorType, EditorOptions } from "@tiptap/react";
+import type { EditorOptions, Editor as EditorType } from "@tiptap/react";
 export type EditorBarProps = {
     editor: null | EditorType;
 };

package/Editor/Editor--tiptap.js

@@ -1,31 +1,57 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Editor = exports.EditorBar = void 0;
-var tslib_1 = require("tslib");
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("react");
-var react_2 = require("@tiptap/react");
-var starter_kit_1 = tslib_1.__importDefault(require("@tiptap/starter-kit"));
-var components_1 = require("./components");
-var EditorBar = function (_a) {
-    var editor = _a.editor;
-    var handleClick = (0, react_1.useCallback)(function (e, type) {
+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 _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();
-        editor === null || editor === void 0 ? void 0 : editor.chain().focus()["toggle".concat(type)]().run();
-    }, [editor]);
+        editor?.chain().focus()[`toggle${type}`]().run();
+    }, [
+        editor
+    ]);
     if (!editor) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsxs)(components_1.EditorBarRoot, { children: [(0, jsx_runtime_1.jsx)(components_1.EditorBarBtn, { onClick: function (e) {
-                    return handleClick(e, "Bold");
-                }, className: editor.isActive("bold") ? "is-active" : "", children: (0, jsx_runtime_1.jsx)(components_1.EditorIconBold, {}) }), (0, jsx_runtime_1.jsx)(components_1.EditorBarBtn, { onClick: function (e) {
-                    return handleClick(e, "Italic");
-                }, className: editor.isActive("bold") ? "is-active" : "", children: (0, jsx_runtime_1.jsx)(components_1.EditorIconItalic, {}) })] }));
+    return /*#__PURE__*/ React.createElement(_components.EditorBarRoot, null, /*#__PURE__*/ React.createElement(_components.EditorBarBtn, {
+        onClick: (e)=>handleClick(e, "Bold"),
+        className: editor.isActive("bold") ? "is-active" : ""
+    }, /*#__PURE__*/ React.createElement(_components.EditorIconBold, null)), /*#__PURE__*/ React.createElement(_components.EditorBarBtn, {
+        onClick: (e)=>handleClick(e, "Italic"),
+        className: editor.isActive("bold") ? "is-active" : ""
+    }, /*#__PURE__*/ React.createElement(_components.EditorIconItalic, null)));
 };
-exports.EditorBar = EditorBar;
-var Editor = function (_a) {
-    var options = _a.options, props = tslib_1.__rest(_a, ["options"]);
-    var editor = (0, react_2.useEditor)(tslib_1.__assign({ extensions: [starter_kit_1.default], content: "" }, (options || {})));
-    return ((0, jsx_runtime_1.jsxs)(components_1.EditorRoot, { children: [(0, jsx_runtime_1.jsx)(components_1.EditorGlobalStyles, {}), (0, jsx_runtime_1.jsx)(exports.EditorBar, { editor: editor }), (0, jsx_runtime_1.jsx)(react_2.EditorContent, tslib_1.__assign({ className: "EditorContent", editor: editor }, props))] }));
+const Editor = ({ options, ...props })=>{
+    const editor = (0, _react.useEditor)({
+        extensions: [
+            _starterkit.default
+        ],
+        content: "",
+        ...options || {}
+    });
+    return /*#__PURE__*/ React.createElement(_components.EditorRoot, null, /*#__PURE__*/ React.createElement(_components.EditorGlobalStyles, null), /*#__PURE__*/ React.createElement(EditorBar, {
+        editor: editor
+    }), /*#__PURE__*/ React.createElement(_react.EditorContent, {
+        className: "EditorContent",
+        editor: editor,
+        ...props
+    }));
 };
-exports.Editor = Editor;

package/Editor/Editor--tiptap.mjs

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