@arkyn/components 3.0.1-beta.9 → 3.0.1-beta.91

package/dist/components/radio/radioGroup/index.js

@@ -0,0 +1,100 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { FieldError } from "../../../components/fieldError";
+import { FieldLabel } from "../../../components/fieldLabel";
+import { FieldWrapper } from "../../../components/fieldWrapper";
+import { useForm } from "../../../hooks/useForm";
+import { RadioProvider } from "../radioContext";
+import "./styles.css";
+/**
+ * RadioGroup component - used for creating a group of radio button options with shared state management
+ *
+ * @param props - RadioGroup component properties
+ * @param props.name - Required field name for form handling and radio button grouping
+ * @param props.label - Optional label text to display above the radio group
+ * @param props.showAsterisk - Whether to show asterisk on label for required fields
+ * @param props.errorMessage - Error message to display below the radio group
+ * @param props.value - Controlled value for the selected radio option
+ * @param props.defaultValue - Default selected value for uncontrolled usage. Default: ""
+ * @param props.onChange - Callback function called when radio selection changes, receives the selected value
+ * @param props.size - Size variant for all radio buttons in the group. Default: "md"
+ *
+ * **...Other valid HTML properties for div element (except onChange)**
+ *
+ * @returns RadioGroup JSX element wrapped in FieldWrapper with RadioProvider context for child Radio components
+ *
+ * @example
+ * ```tsx
+ * // Basic radio group
+ * <RadioGroup name="gender">
+ *   <Radio value="male" label="Male" />
+ *   <Radio value="female" label="Female" />
+ *   <Radio value="other" label="Other" />
+ * </RadioGroup>
+ *
+ * // Radio group with label and validation
+ * <RadioGroup
+ *   name="subscription"
+ *   label="Choose your plan"
+ *   showAsterisk
+ *   errorMessage="Please select a subscription plan"
+ * >
+ *   <Radio value="basic" label="Basic Plan - $9.99/month" />
+ *   <Radio value="premium" label="Premium Plan - $19.99/month" />
+ *   <Radio value="enterprise" label="Enterprise Plan - $49.99/month" />
+ * </RadioGroup>
+ *
+ * // Controlled radio group with callback
+ * <RadioGroup
+ *   name="theme"
+ *   label="Select Theme"
+ *   value={selectedTheme}
+ *   onChange={(value) => setSelectedTheme(value)}
+ *   size="lg"
+ * >
+ *   <Radio value="light" label="Light Theme" />
+ *   <Radio value="dark" label="Dark Theme" />
+ *   <Radio value="auto" label="Auto (System)" />
+ * </RadioGroup>
+ *
+ * // Radio group with default selection
+ * <RadioGroup
+ *   name="language"
+ *   label="Preferred Language"
+ *   defaultValue="en"
+ *   size="sm"
+ * >
+ *   <Radio value="en" label="English" />
+ *   <Radio value="es" label="Spanish" />
+ *   <Radio value="fr" label="French" />
+ *   <Radio value="pt" label="Portuguese" />
+ * </RadioGroup>
+ *
+ * // Radio group with custom styling and onChange handler
+ * <RadioGroup
+ *   name="difficulty"
+ *   label="Select Difficulty Level"
+ *   className="custom-radio-group"
+ *   onChange={(value) => console.log('Selected difficulty:', value)}
+ * >
+ *   <Radio value="easy" label="Easy" />
+ *   <Radio value="medium" label="Medium" />
+ *   <Radio value="hard" label="Hard" />
+ * </RadioGroup>
+ * ```
+ */
+function RadioGroup(props) {
+    const { defaultValue = "", name, label, showAsterisk, errorMessage: baseErrorMessage, value: forceValue, onChange, size = "md", className: baseClassName = "", disabled = false, ...rest } = props;
+    const [value, setValue] = useState(defaultValue);
+    const { fieldErrors } = useForm();
+    function handleChange(value) {
+        setValue(value);
+        if (onChange)
+            onChange(value);
+    }
+    const errorMessage = baseErrorMessage || fieldErrors?.[name];
+    const isError = !!errorMessage;
+    const className = `arkynRadioGroup ${size} ${baseClassName}`;
+    return (_jsxs(FieldWrapper, { children: [label && _jsx(FieldLabel, { showAsterisk: showAsterisk, children: label }), _jsxs(RadioProvider, { isError: isError, size: size, value: forceValue || value, handleChange: handleChange, disabled: disabled, children: [_jsx("input", { style: { display: "none" }, type: "text", readOnly: true, name: name, value: forceValue || value }), _jsx("div", { className: className.trim(), ...rest })] }), errorMessage && _jsx(FieldError, { children: errorMessage })] }));
+}
+export { RadioGroup };

package/dist/components/richText/blockButton/index.d.ts

@@ -0,0 +1,10 @@
+import { LucideIcon } from "lucide-react";
+import { RichTextAlignFormatType, RichTextElementFormatType } from "../../../types/richTextTypes";
+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/blockButton/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/richText/blockButton/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAO1C,OAAO,EACL,uBAAuB,EACvB,yBAAyB,EAC1B,MAAM,8BAA8B,CAAC;AAEtC,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/blockButton/index.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useSlate } from "slate-react";
+import { isBlockActive } from "../../../services/isBlockActive";
+import { toggleBlock } from "../../../services/toggleBlock";
+import { textAlignTypes } from "../../../templates/richTextTemplates";
+import "./styles.css";
+function BlockButton({ format, icon: Icon }) {
+    const editor = useSlate();
+    const blockType = textAlignTypes.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/element/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/richText/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/index.d.ts

@@ -0,0 +1,66 @@
+import { RichTextProps } from "../../types/richTextTypes";
+import "./styles.css";
+/**
+ * RichText component provides a feature-rich text editor with formatting capabilities
+ * including bold, italic, underline, code, headings, block quotes, alignment, and image insertion.
+ *
+ * Built on top of Slate.js, this component offers a customizable toolbar and supports
+ * character limits, form integration, and error handling.
+ *
+ * @param props - Configuration object for the RichText component
+ * @param props.name - The name attribute for the form field (required)
+ * @param props.hiddenButtons - Array of button keys to hide from the toolbar
+ * @param props.imageConfig - Configuration object for image insertion functionality
+ * @param props.defaultValue - Initial JSON string value for the editor content (default: "[]")
+ * @param props.enforceCharacterLimit - Whether to enforce the character limit strictly (default: false)
+ * @param props.onChangeCharactersCount - Callback function triggered when character count changes
+ * @param props.baseErrorMessage - Custom error message to display
+ * @param props.maxLimit - Maximum number of characters allowed (default: 2000)
+ * @param props.onChange - Callback function triggered when editor content changes
+ * @param props.isError - Whether the component should display in error state
+ * @param props.id - Custom ID for the editor element
+ *
+ * @returns JSX element representing the rich text editor
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <RichText name="content" />
+ *
+ * // With character limit and custom buttons
+ * <RichText
+ *   name="description"
+ *   maxLimit={500}
+ *   enforceCharacterLimit={true}
+ *   hiddenButtons={["image", "code"]}
+ *   onChangeCharactersCount={(count) => console.log(count)}
+ * />
+ *
+ * // With image upload configuration
+ * <RichText
+ *   name="article"
+ *   imageConfig={{
+ *     action: "/api/upload",
+ *     modalTitle: "Insert Image",
+ *     modalInputUrlLabel: "Image URL",
+ *     modalInputImageLabel: "Upload Image"
+ *   }}
+ * />
+ * ```
+ *
+ * @description
+ * The component includes:
+ * - **Formatting**: Bold, italic, underline, code, headings (H1, H2), block quotes
+ * - **Alignment**: Left, center, right, justify
+ * - **Image Support**: Upload and URL insertion (when imageConfig is provided)
+ * - **Character Limits**: Configurable limits with visual feedback
+ * - **Form Integration**: Works with form providers and validation
+ * - **Keyboard Shortcuts**: Standard shortcuts for formatting (Ctrl+B, Ctrl+I, etc.)
+ * - **Error Handling**: Visual error states and validation messages
+ *
+ * The editor outputs JSON data representing the document structure, which can be
+ * converted to HTML using the provided utility functions.
+ */
+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":"AA8BA,OAAO,EAEL,aAAa,EACd,MAAM,2BAA2B,CAAC;AAMnC,OAAO,cAAc,CAAC;AAEtB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4DG;AAEH,iBAAS,QAAQ,CAAC,KAAK,EAAE,aAAa,2CAkMrC;AAED,OAAO,EAAE,QAAQ,EAAE,CAAC"}

package/dist/components/richText/index.js

@@ -0,0 +1,149 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import isHotkey from "is-hotkey";
+import { AlignCenter, AlignJustify, AlignLeft, AlignRight, Bold, Code, Heading1, Heading2, Italic, Quote, Underline, } from "lucide-react";
+import { useCallback, useId, useMemo, useRef, useState } from "react";
+import { createEditor, Transforms } from "slate";
+import { withHistory } from "slate-history";
+import { Editable, Slate, withReact } from "slate-react";
+import { BlockButton } from "./blockButton";
+import { Element } from "./element";
+import { InsertImage } from "./insertImage";
+import { Leaf } from "./leaf";
+import { MarkButton } from "./markButton";
+import { Toolbar } from "./toolbar";
+import { useForm } from "../../hooks/useForm";
+import { extractTextFromNode } from "../../services/extractTextFromNode";
+import { toggleMark } from "../../services/toggleMark";
+import { hotKeys, initialValue } from "../../templates/richTextTemplates";
+import { FieldError } from "../fieldError";
+import { FieldLabel } from "../fieldLabel";
+import { FieldWrapper } from "../fieldWrapper";
+import "./styles.css";
+/**
+ * RichText component provides a feature-rich text editor with formatting capabilities
+ * including bold, italic, underline, code, headings, block quotes, alignment, and image insertion.
+ *
+ * Built on top of Slate.js, this component offers a customizable toolbar and supports
+ * character limits, form integration, and error handling.
+ *
+ * @param props - Configuration object for the RichText component
+ * @param props.name - The name attribute for the form field (required)
+ * @param props.hiddenButtons - Array of button keys to hide from the toolbar
+ * @param props.imageConfig - Configuration object for image insertion functionality
+ * @param props.defaultValue - Initial JSON string value for the editor content (default: "[]")
+ * @param props.enforceCharacterLimit - Whether to enforce the character limit strictly (default: false)
+ * @param props.onChangeCharactersCount - Callback function triggered when character count changes
+ * @param props.baseErrorMessage - Custom error message to display
+ * @param props.maxLimit - Maximum number of characters allowed (default: 2000)
+ * @param props.onChange - Callback function triggered when editor content changes
+ * @param props.isError - Whether the component should display in error state
+ * @param props.id - Custom ID for the editor element
+ *
+ * @returns JSX element representing the rich text editor
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <RichText name="content" />
+ *
+ * // With character limit and custom buttons
+ * <RichText
+ *   name="description"
+ *   maxLimit={500}
+ *   enforceCharacterLimit={true}
+ *   hiddenButtons={["image", "code"]}
+ *   onChangeCharactersCount={(count) => console.log(count)}
+ * />
+ *
+ * // With image upload configuration
+ * <RichText
+ *   name="article"
+ *   imageConfig={{
+ *     action: "/api/upload",
+ *     modalTitle: "Insert Image",
+ *     modalInputUrlLabel: "Image URL",
+ *     modalInputImageLabel: "Upload Image"
+ *   }}
+ * />
+ * ```
+ *
+ * @description
+ * The component includes:
+ * - **Formatting**: Bold, italic, underline, code, headings (H1, H2), block quotes
+ * - **Alignment**: Left, center, right, justify
+ * - **Image Support**: Upload and URL insertion (when imageConfig is provided)
+ * - **Character Limits**: Configurable limits with visual feedback
+ * - **Form Integration**: Works with form providers and validation
+ * - **Keyboard Shortcuts**: Standard shortcuts for formatting (Ctrl+B, Ctrl+I, etc.)
+ * - **Error Handling**: Visual error states and validation messages
+ *
+ * The editor outputs JSON data representing the document structure, which can be
+ * converted to HTML using the provided utility functions.
+ */
+function RichText(props) {
+    const { name, hiddenButtons, imageConfig, defaultValue = "[]", enforceCharacterLimit = false, onChangeCharactersCount, baseErrorMessage, maxLimit = 10, onChange, isError: baseIsError, label, showAsterisk, id, } = props;
+    const editor = useMemo(() => withHistory(withReact(createEditor())), []);
+    const { fieldErrors } = useForm();
+    function getDefaultNodes() {
+        try {
+            const parsedNodes = JSON.parse(defaultValue);
+            if (!Array.isArray(parsedNodes))
+                return initialValue;
+            if (parsedNodes.length <= 0)
+                return initialValue;
+            const isValidNodes = parsedNodes.every((node) => typeof node === "object" &&
+                node !== null &&
+                "type" in node &&
+                "children" in node);
+            return isValidNodes ? parsedNodes : initialValue;
+        }
+        catch (error) {
+            return initialValue;
+        }
+    }
+    const textFromNodes = extractTextFromNode(getDefaultNodes());
+    const [charactersCount, setCharactersCount] = useState(textFromNodes.length);
+    const [inputValue, setInputValue] = useState(JSON.stringify(getDefaultNodes()) || "[]");
+    const [onFocus, setOnFocus] = useState(false);
+    const ref = useRef(null);
+    const inputId = id || useId();
+    const errorMessage = baseErrorMessage || fieldErrors?.[name];
+    const isError = baseIsError || !!errorMessage;
+    const renderLeaf = useCallback(Leaf, []);
+    const renderElement = useCallback(Element, []);
+    function handleChange(value) {
+        const text = extractTextFromNode(value);
+        setCharactersCount(text.length);
+        onChangeCharactersCount && onChangeCharactersCount(text.length);
+        if (enforceCharacterLimit && text.length >= maxLimit) {
+            return;
+        }
+        else {
+            setInputValue(JSON.stringify(value));
+            onChange && onChange(value);
+            editor.children = value;
+            Transforms.setNodes(editor, { children: value });
+        }
+    }
+    const focusClass = onFocus ? "focusTrue" : "focusFalse";
+    const errorClass = isError
+        ? "errorTrue"
+        : maxLimit < charactersCount
+            ? "errorTrue"
+            : "errorFalse";
+    const className = `arkynRichText ${errorClass} ${focusClass}`;
+    const restatesCharacters = maxLimit - charactersCount;
+    function buttonIsNotHidden(format) {
+        return !hiddenButtons?.includes(format);
+    }
+    return (_jsxs(FieldWrapper, { children: [label && (_jsx(FieldLabel, { showAsterisk: showAsterisk, children: label })), _jsxs(Slate, { editor: editor, initialValue: getDefaultNodes(), onChange: handleChange, onValueChange: handleChange, children: [_jsxs("div", { className: className, children: [_jsxs(Toolbar, { children: [buttonIsNotHidden("headingOne") && (_jsx(BlockButton, { format: "headingOne", icon: Heading1 })), buttonIsNotHidden("headingTwo") && (_jsx(BlockButton, { format: "headingTwo", icon: Heading2 })), buttonIsNotHidden("blockQuote") && (_jsx(BlockButton, { format: "blockQuote", icon: Quote })), buttonIsNotHidden("bold") && (_jsx(MarkButton, { format: "bold", icon: Bold })), buttonIsNotHidden("italic") && (_jsx(MarkButton, { format: "italic", icon: Italic })), buttonIsNotHidden("underline") && (_jsx(MarkButton, { format: "underline", icon: Underline })), buttonIsNotHidden("code") && (_jsx(MarkButton, { format: "code", icon: Code })), buttonIsNotHidden("left") && (_jsx(BlockButton, { format: "left", icon: AlignLeft })), buttonIsNotHidden("right") && (_jsx(BlockButton, { format: "right", icon: AlignRight })), buttonIsNotHidden("center") && (_jsx(BlockButton, { format: "center", icon: AlignCenter })), buttonIsNotHidden("justify") && (_jsx(BlockButton, { format: "justify", icon: AlignJustify })), imageConfig && buttonIsNotHidden("image") && (_jsx(InsertImage, { ...imageConfig }))] }), _jsx(Editable, { className: "editorContainer", renderElement: renderElement, renderLeaf: renderLeaf, spellCheck: true, ref: ref, id: inputId, onFocus: () => setOnFocus(true), onBlur: () => setOnFocus(false), onKeyDown: (event) => {
+                                    for (const hotkey in hotKeys) {
+                                        if (isHotkey(hotkey, event)) {
+                                            event.preventDefault();
+                                            const mark = hotKeys[hotkey];
+                                            toggleMark(editor, mark);
+                                        }
+                                    }
+                                } }), restatesCharacters < 0 && (_jsx("div", { className: "restatesCharacters", children: restatesCharacters }))] }), _jsx("input", { type: "hidden", name: name, value: inputValue.slice(0, maxLimit) }), _jsx("input", { type: "hidden", name: `${name}Count`, value: charactersCount })] }), _jsx(FieldError, { children: errorMessage })] }));
+}
+export { RichText };

package/dist/components/richText/insertImage/index.d.ts

@@ -0,0 +1,5 @@
+import { RichTextInsertImageProps } from "../../../types/richTextTypes";
+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/insertImage/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/richText/insertImage/index.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,wBAAwB,EAAE,MAAM,8BAA8B,CAAC;AAWxE,OAAO,cAAc,CAAC;AAEtB,iBAAS,WAAW,CAAC,KAAK,EAAE,wBAAwB,2CAsGnD;AAED,OAAO,EAAE,WAAW,EAAE,CAAC"}

package/dist/components/richText/insertImage/index.js

@@ -0,0 +1,33 @@
+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 { ImageUpload } from "../../imageUpload";
+import { Input } from "../../input";
+import { ModalContainer } from "../../modal/modalContainer";
+import { ModalFooter } from "../../modal/modalFooter";
+import { ModalHeader } from "../../modal/modalHeader";
+import { TabButton } from "../../tab/tabButton";
+import { TabContainer } from "../../tab/tabContainer";
+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 [modalIsVisible, setModalIsVisible] = 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: "" }] },
+        ]);
+        setModalIsVisible(false);
+    }
+    return (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", className: "arkynRichTextInsertImage", onMouseDown: () => setModalIsVisible(true), children: _jsx(Image, {}) }), _jsxs(ModalContainer, { isVisible: modalIsVisible, makeInvisible: () => setModalIsVisible(false), children: [_jsx(ModalHeader, { children: modalTitle }), _jsxs("div", { className: "arkynRichTextInsertImageModalContent", children: [_jsxs(TabContainer, { defaultValue: uploadType, onChange: setUploadType, children: [_jsx(TabButton, { value: "url", children: tabLabels[0] }), _jsx(TabButton, { value: "file", children: tabLabels[1] })] }), uploadType === "url" && (_jsxs(_Fragment, { children: [_jsx(Input, { type: "text", name: "richTextImageURL", label: modalInputUrlLabel, showAsterisk: true, defaultValue: imageURL, onChange: (e) => setImageURL(e.target.value) }), imageURL && (_jsx("img", { className: "arkynRichTextInsertImageModalPreviewImage", src: imageURL, alt: "preview" }))] })), uploadType === "file" && (_jsx(ImageUpload, { name: "richTextImageURL", action: action, label: modalInputImageLabel, showAsterisk: true, defaultValue: imageURL, onChange: (url) => setImageURL(url) }))] }), _jsxs(ModalFooter, { children: [_jsx(Button, { type: "button", scheme: "danger", variant: "outline", onClick: () => setModalIsVisible(false), children: modalCancelButton }), _jsx(Button, { type: "button", onClick: handleMouseDown, children: modalConfirmButton })] })] })] }));
+}
+export { InsertImage };

package/dist/components/richText/leaf/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/richText/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/markButton/index.d.ts

@@ -0,0 +1,10 @@
+import { LucideIcon } from "lucide-react";
+import { RichTextMarkFormatType } from "../../../types/richTextTypes";
+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/markButton/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/richText/markButton/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAM1C,OAAO,EAAE,sBAAsB,EAAE,MAAM,8BAA8B,CAAC;AAEtE,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/markButton/index.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useSlate } from "slate-react";
+import { isMarkActive } from "../../../services/isMarkActive";
+import { toggleMark } from "../../../services/toggleMark";
+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/toolbar/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/richText/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/searchPlaces.d.ts

@@ -0,0 +1,70 @@
+import type { StandaloneSearchBoxProps } from "@react-google-maps/api";
+import { InputProps } from "./input";
+/**
+ * Props for the SearchPlaces component.
+ * @typedef {Object} SearchPlacesProps
+ * @property {StandaloneSearchBoxProps["options"]} [options] - Google Maps StandaloneSearchBox configuration options
+ * @property {(value: string) => void} [onChange] - Callback fired when the input value changes
+ * @property {(place: PlaceData) => void} [onPlaceChanged] - Callback fired when a place is selected from the autocomplete suggestions
+ */
+type SearchPlacesProps = {
+    options?: StandaloneSearchBoxProps["options"];
+    onChange?: (e: string) => void;
+    onPlaceChanged?: (e: {
+        street: string;
+        city: string;
+        state: string;
+        district: string;
+        cep: string;
+        stateShortName: string;
+        streetNumber: string;
+        coordinates: {
+            lat: number;
+            lng: number;
+        };
+    }) => void;
+} & Omit<InputProps, "onLoad" | "onChange" | "type">;
+/**
+ * SearchPlaces component - A Google Places autocomplete input field.
+ *
+ * This component integrates with Google Maps API to provide address autocomplete functionality.
+ * When a user selects a place from the suggestions, it extracts and returns structured address data
+ * including street, city, state, district, postal code, and geographic coordinates.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <SearchPlaces
+ *   placeholder="Digite o endereço"
+ *   onChange={(value) => console.log('Input:', value)}
+ *   onPlaceChanged={(place) => {
+ *     console.log('Selected place:', place);
+ *     // place = {
+ *     //   street: "Rua exemplo",
+ *     //   city: "São Paulo",
+ *     //   state: "São Paulo",
+ *     //   district: "Centro",
+ *     //   cep: "01310-100",
+ *     //   stateShortName: "SP",
+ *     //   streetNumber: "123",
+ *     //   coordinates: { lat: -23.5505, lng: -46.6333 }
+ *     // }
+ *   }}
+ *   options={{
+ *     componentRestrictions: { country: "br" }
+ *   }}
+ * />
+ * ```
+ *
+ * @param {SearchPlacesProps} props - Component props
+ * @param {StandaloneSearchBoxProps["options"]} [props.options] - Google Maps API options for filtering/customizing search results
+ * @param {(value: string) => void} [props.onChange] - Handler called when the input text changes
+ * @param {(place: PlaceData) => void} [props.onPlaceChanged] - Handler called when a place is selected, receives structured address data
+ * @returns {JSX.Element} An input field with Google Places autocomplete functionality
+ *
+ * @requires Google Maps JavaScript API with Places library loaded
+ * @requires @react-google-maps/api package
+ */
+declare function SearchPlaces(props: SearchPlacesProps): import("react/jsx-runtime").JSX.Element;
+export { SearchPlaces };
+//# sourceMappingURL=searchPlaces.d.ts.map

package/dist/components/searchPlaces.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"searchPlaces.d.ts","sourceRoot":"","sources":["../../src/components/searchPlaces.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,wBAAwB,CAAC;AAGvE,OAAO,EAAS,UAAU,EAAE,MAAM,SAAS,CAAC;AAY5C;;;;;;GAMG;AACH,KAAK,iBAAiB,GAAG;IACvB,OAAO,CAAC,EAAE,wBAAwB,CAAC,SAAS,CAAC,CAAC;IAC9C,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B,cAAc,CAAC,EAAE,CAAC,CAAC,EAAE;QACnB,MAAM,EAAE,MAAM,CAAC;QACf,IAAI,EAAE,MAAM,CAAC;QACb,KAAK,EAAE,MAAM,CAAC;QACd,QAAQ,EAAE,MAAM,CAAC;QACjB,GAAG,EAAE,MAAM,CAAC;QACZ,cAAc,EAAE,MAAM,CAAC;QACvB,YAAY,EAAE,MAAM,CAAC;QACrB,WAAW,EAAE;YAAE,GAAG,EAAE,MAAM,CAAC;YAAC,GAAG,EAAE,MAAM,CAAA;SAAE,CAAC;KAC3C,KAAK,IAAI,CAAC;CACZ,GAAG,IAAI,CAAC,UAAU,EAAE,QAAQ,GAAG,UAAU,GAAG,MAAM,CAAC,CAAC;AAErD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AAEH,iBAAS,YAAY,CAAC,KAAK,EAAE,iBAAiB,2CA6D7C;AAED,OAAO,EAAE,YAAY,EAAE,CAAC"}

package/dist/components/searchPlaces.js

@@ -0,0 +1,91 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { StandaloneSearchBox } from "@react-google-maps/api";
+import { useState } from "react";
+import { Input } from "./input";
+/**
+ * SearchPlaces component - A Google Places autocomplete input field.
+ *
+ * This component integrates with Google Maps API to provide address autocomplete functionality.
+ * When a user selects a place from the suggestions, it extracts and returns structured address data
+ * including street, city, state, district, postal code, and geographic coordinates.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <SearchPlaces
+ *   placeholder="Digite o endereço"
+ *   onChange={(value) => console.log('Input:', value)}
+ *   onPlaceChanged={(place) => {
+ *     console.log('Selected place:', place);
+ *     // place = {
+ *     //   street: "Rua exemplo",
+ *     //   city: "São Paulo",
+ *     //   state: "São Paulo",
+ *     //   district: "Centro",
+ *     //   cep: "01310-100",
+ *     //   stateShortName: "SP",
+ *     //   streetNumber: "123",
+ *     //   coordinates: { lat: -23.5505, lng: -46.6333 }
+ *     // }
+ *   }}
+ *   options={{
+ *     componentRestrictions: { country: "br" }
+ *   }}
+ * />
+ * ```
+ *
+ * @param {SearchPlacesProps} props - Component props
+ * @param {StandaloneSearchBoxProps["options"]} [props.options] - Google Maps API options for filtering/customizing search results
+ * @param {(value: string) => void} [props.onChange] - Handler called when the input text changes
+ * @param {(place: PlaceData) => void} [props.onPlaceChanged] - Handler called when a place is selected, receives structured address data
+ * @returns {JSX.Element} An input field with Google Places autocomplete functionality
+ *
+ * @requires Google Maps JavaScript API with Places library loaded
+ * @requires @react-google-maps/api package
+ */
+function SearchPlaces(props) {
+    const { onChange, onPlaceChanged, options, ...rest } = props;
+    const [searchBox, setSearchBox] = useState(null);
+    const handleLoad = (ref) => setSearchBox(ref);
+    const handlePlacesChanged = () => {
+        const places = searchBox.getPlaces();
+        const place = places[0];
+        const address_components = place?.address_components;
+        function findData(key) {
+            const data = address_components.find((item) => item.types[0] === key);
+            if (data)
+                return data.long_name;
+            return "";
+        }
+        function findDataShort(key) {
+            const data = address_components.find((item) => item.types[0] === key);
+            if (data)
+                return data.short_name;
+            return "";
+        }
+        if (place) {
+            const street = findData("route");
+            const streetNumber = findData("street_number");
+            const district = findData("sublocality_level_1");
+            const city = findData("administrative_area_level_2");
+            const state = findData("administrative_area_level_1");
+            const stateShortName = findDataShort("administrative_area_level_1");
+            const cep = findData("postal_code");
+            const lat = place.geometry?.location?.lat();
+            const lng = place.geometry?.location?.lng();
+            const sendPlace = {
+                street,
+                city,
+                state,
+                district,
+                cep,
+                streetNumber,
+                stateShortName,
+                coordinates: { lat, lng },
+            };
+            onPlaceChanged && onPlaceChanged(sendPlace);
+        }
+    };
+    return (_jsx(StandaloneSearchBox, { onLoad: handleLoad, onPlacesChanged: handlePlacesChanged, options: options, children: _jsx(Input, { type: "text", onChange: (e) => onChange(e.target.value), ...rest }) }));
+}
+export { SearchPlaces };