@arkyn/components 2.0.1-beta.0 → 2.0.1-beta.1

package/dist/components/PhoneInput/services/getDefaultFormatPhoneNumber.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"getDefaultFormatPhoneNumber.d.ts","sourceRoot":"","sources":["../../../../src/components/PhoneInput/services/getDefaultFormatPhoneNumber.ts"],"names":[],"mappings":"AAuDA,iBAAS,2BAA2B,CAAC,YAAY,EAAE,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2BxD;AAED,OAAO,EAAE,2BAA2B,EAAE,CAAC"}

package/dist/components/PhoneInput/services/getDefaultFormatPhoneNumber.js

@@ -0,0 +1,65 @@
+import { countries } from "@arkyn/templates";
+import { applyMask, clear, getMask, MAX_LENGTH, TYPES } from "./utils";
+function formatPhoneNumber(phoneNumber, country) {
+    if (country.code === "+55") {
+        let value = clear(phoneNumber);
+        const mask = getMask(value);
+        let nextLength = value.length;
+        if (nextLength > MAX_LENGTH)
+            return;
+        value = applyMask(value, TYPES[mask]);
+        return value;
+    }
+    const mask = country.mask;
+    let formattedNumber = mask;
+    if (country.prefix) {
+        const prefixRegex = /\$+/g;
+        formattedNumber = formattedNumber.replace(prefixRegex, country.prefix);
+    }
+    for (let i = 0, j = 0; i < formattedNumber.length && j < phoneNumber.length; i++) {
+        if (formattedNumber[i] === "_") {
+            formattedNumber =
+                formattedNumber.substring(0, i) +
+                    phoneNumber[j] +
+                    formattedNumber.substring(i + 1);
+            j++;
+        }
+    }
+    return formattedNumber;
+}
+function getCountryWithPrefixCode(countryCode, prefix) {
+    const country = countries.find((country) => country.code === countryCode && country.prefix === prefix);
+    if (!country)
+        return null;
+    return country;
+}
+function getCountryWithoutPrefixCode(countryCode) {
+    const country = countries.find((country) => country.code === countryCode);
+    if (!country)
+        return null;
+    return country;
+}
+function getDefaultFormatPhoneNumber(defaultValue) {
+    // default value format is +COUNTRY_CODE-PREFIX_PHONE_NUMBER_OPTIONAL PHONE_NUMBER
+    const countryCode = defaultValue.split(" ")[0].split("-")[0];
+    const prefixCode = defaultValue.split(" ")[0].split("-")[1];
+    const phoneNumber = defaultValue.split(" ")[1];
+    if (!countryCode || !phoneNumber) {
+        return { country: null, formattedNumber: "" };
+    }
+    if (prefixCode) {
+        const country = getCountryWithPrefixCode(countryCode, prefixCode);
+        if (!country)
+            return { country: null, formattedNumber: "" };
+        const formattedNumber = formatPhoneNumber(phoneNumber, country);
+        const response = { country, formattedNumber };
+        return response;
+    }
+    const country = getCountryWithoutPrefixCode(countryCode);
+    if (!country)
+        return { country: null, formattedNumber: "" };
+    const formattedNumber = formatPhoneNumber(phoneNumber, country);
+    const response = { country, formattedNumber };
+    return response;
+}
+export { getDefaultFormatPhoneNumber };

package/dist/components/PhoneInput/services/utils.d.ts

@@ -0,0 +1,10 @@
+declare function clear(value: string): string;
+declare const TYPES: {
+    EIGTH: string;
+    NINE: string;
+};
+declare function applyMask(value: string, maskPattern: string): string;
+declare function getMask(value: string): "NINE" | "EIGTH";
+declare const MAX_LENGTH: number;
+export { applyMask, clear, getMask, MAX_LENGTH, TYPES };
+//# sourceMappingURL=utils.d.ts.map

package/dist/components/PhoneInput/services/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../src/components/PhoneInput/services/utils.ts"],"names":[],"mappings":"AAAA,iBAAS,KAAK,CAAC,KAAK,EAAE,MAAM,UAE3B;AAED,QAAA,MAAM,KAAK;;;CAGV,CAAC;AAEF,iBAAS,SAAS,CAAC,KAAK,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,UAsBpD;AAED,iBAAS,OAAO,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,CAGhD;AAED,QAAA,MAAM,UAAU,QAA2B,CAAC;AAE5C,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,OAAO,EAAE,UAAU,EAAE,KAAK,EAAE,CAAC"}

package/dist/components/PhoneInput/services/utils.js

@@ -0,0 +1,37 @@
+function clear(value) {
+    return value && value.replace(/[^0-9]/g, "");
+}
+const TYPES = {
+    EIGTH: "(99) 9999-9999",
+    NINE: "(99) 99999-9999",
+};
+function applyMask(value, maskPattern) {
+    let result = "";
+    let digitIndex = 0;
+    for (let i = 0; i < maskPattern.length; i++) {
+        if (maskPattern[i] === "9") {
+            if (digitIndex < value.length) {
+                result += value[digitIndex];
+                digitIndex++;
+            }
+            else {
+                break;
+            }
+        }
+        else {
+            if (digitIndex < value.length) {
+                result += maskPattern[i];
+            }
+            else {
+                break;
+            }
+        }
+    }
+    return result;
+}
+function getMask(value) {
+    const mask = value.length > 10 ? "NINE" : "EIGTH";
+    return mask;
+}
+const MAX_LENGTH = clear(TYPES.NINE).length;
+export { applyMask, clear, getMask, MAX_LENGTH, TYPES };

package/dist/components/Popover/index.d.ts

@@ -0,0 +1,5 @@
+import { PopoverProps } from "@arkyn/types";
+import "./styles.css";
+declare function Popover(props: PopoverProps): import("react/jsx-runtime").JSX.Element;
+export { Popover };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Popover/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Popover/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAI5C,OAAO,cAAc,CAAC;AAEtB,iBAAS,OAAO,CAAC,KAAK,EAAE,YAAY,2CAsCnC;AAED,OAAO,EAAE,OAAO,EAAE,CAAC"}

package/dist/components/Popover/index.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { motion } from "framer-motion";
+import { useState } from "react";
+import "./styles.css";
+function Popover(props) {
+    const { children, button, closeOnClick, className: baseClassName = "", orientation = "bottomLeft", } = props;
+    const [isOpen, setIsOpen] = useState(false);
+    const visible = isOpen ? "visibleTrue" : "visibleFalse";
+    const className = `arkynPopover ${orientation} ${visible} ${baseClassName}`;
+    function handleOpenPopover() {
+        if (!isOpen)
+            setIsOpen(true);
+    }
+    return (_jsxs("div", { className: className, onClick: handleOpenPopover, children: [button, _jsx(motion.div, { style: { visibility: isOpen ? "visible" : "hidden" }, transition: { ease: "easeOut", duration: 0 }, initial: { opacity: 0 }, animate: { opacity: isOpen ? 1 : 0 }, exit: { opacity: 0 }, onClick: () => closeOnClick && setIsOpen(false), className: "arkynPopoverContent", children: children }), isOpen && (_jsx("div", { onClick: () => setIsOpen(false), className: "arkynPopoverOverlay" }))] }));
+}
+export { Popover };

package/dist/components/Radio/RadioBox/index.d.ts

@@ -0,0 +1,5 @@
+import { RadioBoxProps } from "@arkyn/types";
+import "./styles.css";
+declare function RadioBox(props: RadioBoxProps): import("react/jsx-runtime").JSX.Element;
+export { RadioBox };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Radio/RadioBox/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Radio/RadioBox/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAK7C,OAAO,cAAc,CAAC;AAEtB,iBAAS,QAAQ,CAAC,KAAK,EAAE,aAAa,2CAkCrC;AAED,OAAO,EAAE,QAAQ,EAAE,CAAC"}

package/dist/components/Radio/RadioBox/index.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useFormController } from "../../Form/FormController";
+import { useRadioGroup } from "../RadioGroup";
+import "./styles.css";
+function RadioBox(props) {
+    const { value: componentValue, size: componentSize, disabled, children, className: baseClassName = "", ...rest } = props;
+    const { onChange, size: groupSize, value: selectedValue } = useRadioGroup();
+    const { error } = useFormController();
+    const size = componentSize || groupSize;
+    const checkedClass = selectedValue === componentValue ? "checkedTrue" : "checkedFalse";
+    const errorClass = !!error ? "errorTrue" : "errorFalse";
+    const disabledClass = disabled ? "disabledTrue" : "disabledFalse";
+    const className = `arkynRadioBox ${size} ${checkedClass} ${errorClass} ${disabledClass} ${baseClassName}`;
+    return (_jsxs("label", { className: className.trim(), children: [_jsx("button", { type: "button", disabled: disabled, onClick: () => onChange(componentValue), onFocus: () => onChange(componentValue), ...rest }), children] }));
+}
+export { RadioBox };

package/dist/components/Radio/RadioGroup/index.d.ts

@@ -0,0 +1,6 @@
+import { RadioGroupContextType, RadioGroupProps } from "@arkyn/types";
+import "./styles.css";
+declare function useRadioGroup(): RadioGroupContextType;
+declare function RadioGroup(props: RadioGroupProps): import("react/jsx-runtime").JSX.Element;
+export { RadioGroup, useRadioGroup };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Radio/RadioGroup/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Radio/RadioGroup/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAKtE,OAAO,cAAc,CAAC;AAItB,iBAAS,aAAa,0BAErB;AAED,iBAAS,UAAU,CAAC,KAAK,EAAE,eAAe,2CAsCzC;AAED,OAAO,EAAE,UAAU,EAAE,aAAa,EAAE,CAAC"}

package/dist/components/Radio/RadioGroup/index.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, useContext, useState } from "react";
+import { useFormController } from "../../Form/FormController";
+import "./styles.css";
+const RadioContext = createContext({});
+function useRadioGroup() {
+    return useContext(RadioContext);
+}
+function RadioGroup(props) {
+    const { defaultValue, name, value: forceValue, onChange, size = "md", className: baseClassName = "", ...rest } = props;
+    const [value, setValue] = useState(defaultValue || "");
+    const { inputRef, id } = useFormController();
+    function handleChange(value) {
+        setValue(value);
+        onChange && onChange(value);
+    }
+    const className = `arkynRadioGroup ${size} ${baseClassName}`;
+    return (_jsxs(RadioContext.Provider, { value: { onChange: handleChange, value: forceValue || value, size }, children: [_jsx("input", { style: { display: "none" }, type: "text", id: id, readOnly: true, name: name, ref: inputRef, value: forceValue || value }), _jsx("div", { className: className.trim(), ...rest })] }));
+}
+export { RadioGroup, useRadioGroup };

package/dist/components/Radio/index.d.ts

@@ -0,0 +1,4 @@
+import { RadioBox } from "./RadioBox";
+import { RadioGroup } from "./RadioGroup";
+export { RadioBox, RadioGroup };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Radio/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Radio/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE1C,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,CAAC"}

package/dist/components/Radio/index.js

@@ -0,0 +1,3 @@
+import { RadioBox } from "./RadioBox";
+import { RadioGroup } from "./RadioGroup";
+export { RadioBox, RadioGroup };

package/dist/components/RichText/components/BlockButton/index.d.ts

@@ -0,0 +1,10 @@
+import { RichTextAlignFormatType, RichTextElementFormatType } from "@arkyn/types";
+import { LucideIcon } from "lucide-react";
+import "./styles.css";
+type BlockButtonProps = {
+    format: RichTextElementFormatType | RichTextAlignFormatType;
+    icon: LucideIcon;
+};
+declare function BlockButton({ format, icon: Icon }: BlockButtonProps): import("react/jsx-runtime").JSX.Element;
+export { BlockButton };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/RichText/components/BlockButton/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/RichText/components/BlockButton/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,uBAAuB,EACvB,yBAAyB,EAC1B,MAAM,cAAc,CAAC;AACtB,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAQ1C,OAAO,cAAc,CAAC;AAEtB,KAAK,gBAAgB,GAAG;IACtB,MAAM,EAAE,yBAAyB,GAAG,uBAAuB,CAAC;IAC5D,IAAI,EAAE,UAAU,CAAC;CAClB,CAAC;AAEF,iBAAS,WAAW,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE,gBAAgB,2CAsB5D;AAED,OAAO,EAAE,WAAW,EAAE,CAAC"}

package/dist/components/RichText/components/BlockButton/index.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useSlate } from "slate-react";
+import { toggleBlock } from "../../functions/toggleBlock";
+import { isBlockActive } from "../../helpers/isBlockActive";
+import { TEXT_ALIGN_TYPES } from "../../template/TEXT_ALIGN_TYPES";
+import "./styles.css";
+function BlockButton({ format, icon: Icon }) {
+    const editor = useSlate();
+    const blockType = TEXT_ALIGN_TYPES.includes(format) ? "align" : "type";
+    const isActive = isBlockActive(editor, format, blockType);
+    const activeClass = isActive ? "activeTrue" : "activeFalse";
+    function handleMouseDown(event) {
+        event.preventDefault();
+        toggleBlock(editor, format);
+    }
+    return (_jsx("button", { type: "button", className: "arkynRichTextBlockButton " + activeClass, onMouseDown: handleMouseDown, children: _jsx(Icon, {}) }));
+}
+export { BlockButton };

package/dist/components/RichText/components/Element/index.d.ts

@@ -0,0 +1,5 @@
+import { RenderElementProps } from "slate-react";
+import "./styles.css";
+declare function Element({ attributes, children, element }: RenderElementProps): import("react/jsx-runtime").JSX.Element;
+export { Element };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/RichText/components/Element/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/RichText/components/Element/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AACjD,OAAO,cAAc,CAAC;AAEtB,iBAAS,OAAO,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAE,kBAAkB,2CAgErE;AAED,OAAO,EAAE,OAAO,EAAE,CAAC"}

package/dist/components/RichText/components/Element/index.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import "./styles.css";
+function Element({ attributes, children, element }) {
+    const style = { textAlign: element.align };
+    switch (element.type) {
+        case "blockQuote":
+            return (_jsx("blockquote", { className: "arkynElementBlockquote", style: style, ...attributes, children: children }));
+        case "bulletedList":
+            return (_jsx("ul", { className: "arkynElementBulletList", style: style, ...attributes, children: children }));
+        case "headingOne":
+            return (_jsx("h1", { className: "arkynElementHeadingOne", style: style, ...attributes, children: children }));
+        case "headingTwo":
+            return (_jsx("h2", { className: "arkynElementHeadingTwo", style: style, ...attributes, children: children }));
+        case "listItem":
+            return (_jsx("li", { className: "arkynElementListItem", style: style, ...attributes, children: children }));
+        case "numberedList":
+            return (_jsx("ol", { className: "arkynElementNumberedList", style: style, ...attributes, children: children }));
+        case "image":
+            return (_jsxs("div", { style: style, ...attributes, children: [_jsx("img", { className: "arkynElementImage", alt: "arkynElementImage", src: element?.src || "" }), children] }));
+        default:
+            return (_jsx("p", { className: "arkynElementParagraph", style: style, ...attributes, children: children }));
+    }
+}
+export { Element };

package/dist/components/RichText/components/InsertImage/index.d.ts

@@ -0,0 +1,5 @@
+import { RichTextInsertImageProps } from "@arkyn/types";
+import "./styles.css";
+declare function InsertImage(props: RichTextInsertImageProps): import("react/jsx-runtime").JSX.Element;
+export { InsertImage };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/RichText/components/InsertImage/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/RichText/components/InsertImage/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,wBAAwB,EAAE,MAAM,cAAc,CAAC;AAYxD,OAAO,cAAc,CAAC;AAEtB,iBAAS,WAAW,CAAC,KAAK,EAAE,wBAAwB,2CAwGnD;AAED,OAAO,EAAE,WAAW,EAAE,CAAC"}

package/dist/components/RichText/components/InsertImage/index.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Image } from "lucide-react";
+import { useState } from "react";
+import { useSlate } from "slate-react";
+import { Button } from "../../../Button";
+import { FormController, FormLabel } from "../../../Form";
+import { ImageUpload } from "../../../ImageUpload";
+import { Input } from "../../../Input";
+import { ModalContainer, ModalFooter, ModalHeader } from "../../../Modal";
+import { TabButton, TabContainer } from "../../../Tabs";
+import "./styles.css";
+function InsertImage(props) {
+    const { action, tabLabels = ["Adicionar URL", "Upload de arquivo"], modalCancelButton = "Cancelar", modalConfirmButton = "Confirmar", modalInputImageLabel = "Imagem:", modalInputUrlLabel = "URL da imagem:", modalTitle = "Inserir imagem", } = props;
+    const editor = useSlate();
+    const [modalIsVisibled, setModalIsVisibled] = useState(false);
+    const [imageURL, setImageURL] = useState("");
+    const [uploadType, setUploadType] = useState("url");
+    function handleMouseDown(event) {
+        event.preventDefault();
+        if (!imageURL || imageURL === "")
+            return;
+        editor.insertNodes([
+            { type: "paragraph", children: [{ text: "" }] },
+            { type: "image", src: imageURL, children: [{ text: "" }] },
+            { type: "paragraph", children: [{ text: "" }] },
+        ]);
+        setModalIsVisibled(false);
+    }
+    return (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", className: "arkynRichTextInsertImage", onMouseDown: () => setModalIsVisibled(true), children: _jsx(Image, {}) }), _jsxs(ModalContainer, { isVisibled: modalIsVisibled, makeInvisible: () => setModalIsVisibled(false), children: [_jsx(ModalHeader, { children: modalTitle }), _jsxs("div", { className: "arkynRichTextInsertImageModalContent", children: [_jsxs(TabContainer, { defaultActive: uploadType, onClick: setUploadType, children: [_jsx(TabButton, { value: "url", children: tabLabels[0] }), _jsx(TabButton, { value: "file", children: tabLabels[1] })] }), uploadType === "url" && (_jsxs(_Fragment, { children: [_jsxs(FormController, { children: [_jsx(FormLabel, { children: modalInputUrlLabel }), _jsx(Input, { type: "text", name: "richTextimageURL", defaultValue: imageURL, onChange: (e) => setImageURL(e.target.value) })] }), imageURL && (_jsx("img", { className: "arkynRichTextInsertImageModalPreviewImage", src: imageURL, alt: "preview" }))] })), uploadType === "file" && (_jsxs(FormController, { children: [_jsx(FormLabel, { children: modalInputImageLabel }), _jsx(ImageUpload, { name: "richTextimageURL", action: action, defaultValue: imageURL, onUpload: (url) => setImageURL(url || "") })] }))] }), _jsxs(ModalFooter, { children: [_jsx(Button, { type: "button", scheme: "danger", variant: "outline", onClick: () => setModalIsVisibled(false), children: modalCancelButton }), _jsx(Button, { type: "button", onClick: handleMouseDown, children: modalConfirmButton })] })] })] }));
+}
+export { InsertImage };

package/dist/components/RichText/components/Leaf/index.d.ts

@@ -0,0 +1,4 @@
+import { RenderLeafProps } from "slate-react";
+declare function Leaf({ attributes, children, leaf }: RenderLeafProps): import("react/jsx-runtime").JSX.Element;
+export { Leaf };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/RichText/components/Leaf/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/RichText/components/Leaf/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAE9C,iBAAS,IAAI,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,IAAI,EAAE,EAAE,eAAe,2CAO5D;AAED,OAAO,EAAE,IAAI,EAAE,CAAC"}

package/dist/components/RichText/components/Leaf/index.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+function Leaf({ attributes, children, leaf }) {
+    if (leaf.bold)
+        children = _jsx("strong", { children: children });
+    if (leaf.code)
+        children = _jsx("code", { children: children });
+    if (leaf.italic)
+        children = _jsx("em", { children: children });
+    if (leaf.underline)
+        children = _jsx("u", { children: children });
+    return _jsx("span", { ...attributes, children: children });
+}
+export { Leaf };

package/dist/components/RichText/components/MarkButton/index.d.ts

@@ -0,0 +1,10 @@
+import { RichTextMarkFormatType } from "@arkyn/types";
+import { LucideIcon } from "lucide-react";
+import "./styles.css";
+type MarkButtonProps = {
+    format: RichTextMarkFormatType;
+    icon: LucideIcon;
+};
+declare function MarkButton({ format, icon: Icon }: MarkButtonProps): import("react/jsx-runtime").JSX.Element;
+export { MarkButton };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/RichText/components/MarkButton/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/RichText/components/MarkButton/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,sBAAsB,EAAE,MAAM,cAAc,CAAC;AACtD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAO1C,OAAO,cAAc,CAAC;AAEtB,KAAK,eAAe,GAAG;IACrB,MAAM,EAAE,sBAAsB,CAAC;IAC/B,IAAI,EAAE,UAAU,CAAC;CAClB,CAAC;AAEF,iBAAS,UAAU,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE,eAAe,2CAoB1D;AAED,OAAO,EAAE,UAAU,EAAE,CAAC"}

package/dist/components/RichText/components/MarkButton/index.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useSlate } from "slate-react";
+import { toggleMark } from "../../functions/toggleMark";
+import { isMarkActive } from "../../helpers/isMarkActive";
+import "./styles.css";
+function MarkButton({ format, icon: Icon }) {
+    const editor = useSlate();
+    const isActive = isMarkActive(editor, format);
+    const activeClass = isActive ? "activeTrue" : "activeFalse";
+    function handleMouseDown(event) {
+        event.preventDefault();
+        toggleMark(editor, format);
+    }
+    return (_jsx("button", { type: "button", className: "arkynRichTextMarkButton " + activeClass, onMouseDown: handleMouseDown, children: _jsx(Icon, {}) }));
+}
+export { MarkButton };

package/dist/components/RichText/components/Toolbar/index.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from "react";
+import "./styles.css";
+type ToolbarProps = {
+    children: ReactNode;
+};
+declare function Toolbar({ children }: ToolbarProps): import("react/jsx-runtime").JSX.Element;
+export { Toolbar };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/RichText/components/Toolbar/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/RichText/components/Toolbar/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,cAAc,CAAC;AAEtB,KAAK,YAAY,GAAG;IAClB,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF,iBAAS,OAAO,CAAC,EAAE,QAAQ,EAAE,EAAE,YAAY,2CAE1C;AAED,OAAO,EAAE,OAAO,EAAE,CAAC"}

package/dist/components/RichText/components/Toolbar/index.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import "./styles.css";
+function Toolbar({ children }) {
+    return _jsx("div", { className: "arkynRichTextToolbar", children: children });
+}
+export { Toolbar };

package/dist/components/RichText/functions/extractText.d.ts

@@ -0,0 +1,4 @@
+import { Descendant } from "slate";
+declare function extractText(nodes: Descendant[]): string;
+export { extractText };
+//# sourceMappingURL=extractText.d.ts.map

package/dist/components/RichText/functions/extractText.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"extractText.d.ts","sourceRoot":"","sources":["../../../../src/components/RichText/functions/extractText.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,OAAO,CAAC;AAEzC,iBAAS,WAAW,CAAC,KAAK,EAAE,UAAU,EAAE,UAEvC;AAED,OAAO,EAAE,WAAW,EAAE,CAAC"}

package/dist/components/RichText/functions/extractText.js

@@ -0,0 +1,5 @@
+import { Node } from "slate";
+function extractText(nodes) {
+    return nodes.map((n) => Node.string(n)).join("");
+}
+export { extractText };

package/dist/components/RichText/functions/toggleBlock.d.ts

@@ -0,0 +1,5 @@
+import { RichTextAlignFormatType, RichTextElementFormatType } from "@arkyn/types";
+import { Editor } from "slate";
+declare function toggleBlock(editor: Editor, format: RichTextElementFormatType | RichTextAlignFormatType): void;
+export { toggleBlock };
+//# sourceMappingURL=toggleBlock.d.ts.map

package/dist/components/RichText/functions/toggleBlock.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toggleBlock.d.ts","sourceRoot":"","sources":["../../../../src/components/RichText/functions/toggleBlock.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,uBAAuB,EACvB,yBAAyB,EAC1B,MAAM,cAAc,CAAC;AACtB,OAAO,EAAE,MAAM,EAAuC,MAAM,OAAO,CAAC;AAMpE,iBAAS,WAAW,CAClB,MAAM,EAAE,MAAM,EACd,MAAM,EAAE,yBAAyB,GAAG,uBAAuB,QAkC5D;AAED,OAAO,EAAE,WAAW,EAAE,CAAC"}

package/dist/components/RichText/functions/toggleBlock.js

@@ -0,0 +1,33 @@
+import { Editor, Element as SlateElement, Transforms } from "slate";
+import { isBlockActive } from "../helpers/isBlockActive";
+import { LIST_TYPES } from "../template/LIST_TYPES";
+import { TEXT_ALIGN_TYPES } from "../template/TEXT_ALIGN_TYPES";
+function toggleBlock(editor, format) {
+    const blockType = TEXT_ALIGN_TYPES.includes(format) ? "align" : "type";
+    const isActive = isBlockActive(editor, format, blockType);
+    const isList = LIST_TYPES.includes(format);
+    Transforms.unwrapNodes(editor, {
+        match: (n) => !Editor.isEditor(n) &&
+            SlateElement.isElement(n) &&
+            LIST_TYPES.includes(n.type) &&
+            !TEXT_ALIGN_TYPES.includes(format),
+        split: true,
+    });
+    let newProperties;
+    if (TEXT_ALIGN_TYPES.includes(format)) {
+        const formatType = format;
+        newProperties = { align: isActive ? undefined : formatType };
+    }
+    else {
+        const formatType = format;
+        newProperties = {
+            type: isActive ? "paragraph" : isList ? "listItem" : formatType,
+        };
+    }
+    Transforms.setNodes(editor, newProperties);
+    if (!isActive && isList) {
+        const block = { type: format, children: [] };
+        Transforms.wrapNodes(editor, block);
+    }
+}
+export { toggleBlock };

package/dist/components/RichText/functions/toggleMark.d.ts

@@ -0,0 +1,5 @@
+import { RichTextMarkFormatType } from "@arkyn/types";
+import { Editor } from "slate";
+declare function toggleMark(editor: Editor, format: RichTextMarkFormatType): void;
+export { toggleMark };
+//# sourceMappingURL=toggleMark.d.ts.map

package/dist/components/RichText/functions/toggleMark.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toggleMark.d.ts","sourceRoot":"","sources":["../../../../src/components/RichText/functions/toggleMark.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,sBAAsB,EAAE,MAAM,cAAc,CAAC;AACtD,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAI/B,iBAAS,UAAU,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,sBAAsB,QAKjE;AAED,OAAO,EAAE,UAAU,EAAE,CAAC"}

package/dist/components/RichText/functions/toggleMark.js

@@ -0,0 +1,10 @@
+import { Editor } from "slate";
+import { isMarkActive } from "../helpers/isMarkActive";
+function toggleMark(editor, format) {
+    const isActive = isMarkActive(editor, format);
+    if (isActive)
+        Editor.removeMark(editor, format);
+    else
+        Editor.addMark(editor, format, true);
+}
+export { toggleMark };

package/dist/components/RichText/helpers/isBlockActive.d.ts

@@ -0,0 +1,5 @@
+import { RichTextAlignFormatType, RichTextElementFormatType } from "@arkyn/types";
+import { Editor } from "slate";
+declare function isBlockActive(editor: Editor, format: RichTextElementFormatType | RichTextAlignFormatType, blockType?: "type" | "align"): boolean;
+export { isBlockActive };
+//# sourceMappingURL=isBlockActive.d.ts.map

package/dist/components/RichText/helpers/isBlockActive.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"isBlockActive.d.ts","sourceRoot":"","sources":["../../../../src/components/RichText/helpers/isBlockActive.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,uBAAuB,EACvB,yBAAyB,EAC1B,MAAM,cAAc,CAAC;AACtB,OAAO,EAAE,MAAM,EAA2B,MAAM,OAAO,CAAC;AAExD,iBAAS,aAAa,CACpB,MAAM,EAAE,MAAM,EACd,MAAM,EAAE,yBAAyB,GAAG,uBAAuB,EAC3D,SAAS,GAAE,MAAM,GAAG,OAAgB,WAgBrC;AAED,OAAO,EAAE,aAAa,EAAE,CAAC"}

package/dist/components/RichText/helpers/isBlockActive.js

@@ -0,0 +1,14 @@
+import { Editor, Element as SlateElement } from "slate";
+function isBlockActive(editor, format, blockType = "type") {
+    const { selection } = editor;
+    if (!selection)
+        return false;
+    const [match] = Array.from(Editor.nodes(editor, {
+        at: Editor.unhangRange(editor, selection),
+        match: (n) => !Editor.isEditor(n) &&
+            SlateElement.isElement(n) &&
+            n[blockType] === format,
+    }));
+    return !!match;
+}
+export { isBlockActive };

package/dist/components/RichText/helpers/isMarkActive.d.ts

@@ -0,0 +1,5 @@
+import { RichTextMarkFormatType } from "@arkyn/types";
+import { Editor } from "slate";
+declare function isMarkActive(editor: Editor, format: RichTextMarkFormatType): boolean;
+export { isMarkActive };
+//# sourceMappingURL=isMarkActive.d.ts.map

package/dist/components/RichText/helpers/isMarkActive.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"isMarkActive.d.ts","sourceRoot":"","sources":["../../../../src/components/RichText/helpers/isMarkActive.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,sBAAsB,EAAE,MAAM,cAAc,CAAC;AACtD,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAE/B,iBAAS,YAAY,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,sBAAsB,WAGnE;AAED,OAAO,EAAE,YAAY,EAAE,CAAC"}

package/dist/components/RichText/helpers/isMarkActive.js

@@ -0,0 +1,6 @@
+import { Editor } from "slate";
+function isMarkActive(editor, format) {
+    const marks = Editor.marks(editor);
+    return marks ? marks[format] === true : false;
+}
+export { isMarkActive };

package/dist/components/RichText/index.d.ts

@@ -0,0 +1,5 @@
+import { RichTextProps } from "@arkyn/types";
+import "./styles.css";
+declare function RichText(props: RichTextProps): import("react/jsx-runtime").JSX.Element;
+export { RichText };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/RichText/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/RichText/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA2B,aAAa,EAAE,MAAM,cAAc,CAAC;AAmCtE,OAAO,cAAc,CAAC;AAEtB,iBAAS,QAAQ,CAAC,KAAK,EAAE,aAAa,2CA2KrC;AAED,OAAO,EAAE,QAAQ,EAAE,CAAC"}