@arkyn/components 3.0.1-beta.99 → 3.0.2

package/dist/components/popover/index.js

@@ -1,151 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { motion } from "framer-motion";
-import { useState } from "react";
-import { useScrollLock } from "../../hooks/useScrollLock";
-import "./styles.css";
-/**
- * Popover component - used for displaying contextual content in a floating container that appears relative to a trigger button
- *
- * @param props - Popover component properties
- * @param props.children - Required content to display inside the popover when opened
- * @param props.button - Required trigger element that opens the popover when clicked
- * @param props.closeOnClick - Whether the popover should close when clicking on its content. Default: undefined (remains open)
- * @param props.orientation - Position where the popover appears relative to the trigger button. Default: "bottomLeft"
- * @param props.className - Additional CSS classes for styling the popover container
- *
- * @returns Popover JSX element with trigger button, animated content, and overlay for outside click handling
- *
- * @example
- * ```tsx
- * // Basic popover with default orientation
- * <Popover
- *   button={<button>Click me</button>}
- * >
- *   <div>Popover content here</div>
- * </Popover>
- *
- * // Popover with custom orientation
- * <Popover
- *   button={<IconButton icon="menu" />}
- *   orientation="topRight"
- * >
- *   <nav>
- *     <a href="/profile">Profile</a>
- *     <a href="/settings">Settings</a>
- *     <a href="/logout">Logout</a>
- *   </nav>
- * </Popover>
- *
- * // Popover that closes when content is clicked
- * <Popover
- *   button={<Button>Select Option</Button>}
- *   closeOnClick
- *   orientation="bottom"
- * >
- *   <ul>
- *     <li onClick={() => selectOption('option1')}>Option 1</li>
- *     <li onClick={() => selectOption('option2')}>Option 2</li>
- *     <li onClick={() => selectOption('option3')}>Option 3</li>
- *   </ul>
- * </Popover>
- *
- * // Popover with custom styling and left orientation
- * <Popover
- *   button={<Button variant="outline">Info</Button>}
- *   orientation="left"
- *   className="custom-popover"
- * >
- *   <div className="info-panel">
- *     <h3>Additional Information</h3>
- *     <p>This is some helpful information that appears in a popover.</p>
- *     <Button size="sm">Learn More</Button>
- *   </div>
- * </Popover>
- *
- * // Popover with form content and top-right positioning
- * <Popover
- *   button={<Badge>Filter</Badge>}
- *   orientation="topRight"
- * >
- *   <form className="filter-form">
- *     <Input name="search" placeholder="Search..." />
- *     <Select name="category" options={categories} />
- *     <Button type="submit">Apply Filters</Button>
- *   </form>
- * </Popover>
- *
- * // Popover with complex content and bottom-right positioning
- * <Popover
- *   button={<Avatar src="/user.jpg" />}
- *   orientation="bottomRight"
- *   closeOnClick
- * >
- *   <div className="user-menu">
- *     <div className="user-info">
- *       <img src="/user.jpg" alt="User" />
- *       <div>
- *         <h4>John Doe</h4>
- *         <p>john@example.com</p>
- *       </div>
- *     </div>
- *     <Divider />
- *     <MenuItem icon="user">Profile</MenuItem>
- *     <MenuItem icon="settings">Settings</MenuItem>
- *     <MenuItem icon="logout">Sign Out</MenuItem>
- *   </div>
- * </Popover>
- *
- * // Popover for context menu with right orientation
- * <Popover
- *   button={<Button variant="ghost" size="sm">⋮</Button>}
- *   orientation="right"
- *   closeOnClick
- * >
- *   <div className="context-menu">
- *     <button onClick={() => editItem()}>Edit</button>
- *     <button onClick={() => duplicateItem()}>Duplicate</button>
- *     <button onClick={() => deleteItem()}>Delete</button>
- *   </div>
- * </Popover>
- *
- * // Popover with notification content and top positioning
- * <Popover
- *   button={<Badge count={3}>🔔</Badge>}
- *   orientation="top"
- * >
- *   <div className="notifications">
- *     <h3>Recent Notifications</h3>
- *     <div className="notification-item">New message received</div>
- *     <div className="notification-item">Task completed</div>
- *     <div className="notification-item">Meeting reminder</div>
- *     <Button variant="ghost" size="sm">View All</Button>
- *   </div>
- * </Popover>
- * ```
- *
- * @remarks
- * This component provides:
- * - 8 different orientation options for flexible positioning (bottomLeft, bottomRight, topLeft, topRight, top, left, bottom, right)
- * - Smooth fade animation using Framer Motion for opening and closing
- * - Automatic scroll lock when popover is open to prevent background scrolling
- * - Click-outside-to-close functionality via overlay
- * - Optional click-on-content-to-close behavior
- * - Full accessibility support for keyboard navigation and screen readers
- *
- * The popover automatically handles positioning, animations, and user interactions.
- * It uses CSS classes for styling and can be customized through the className prop.
- * The component is ideal for dropdowns, context menus, tooltips, and any contextual UI elements.
- */
-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);
-    }
-    useScrollLock(isOpen);
-    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.js

@@ -1,99 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useRadioGroup } from "../radioContext";
-import "./styles.css";
-/**
- * RadioBox component - individual radio button option that must be used within a RadioGroup
- *
- * @param props - RadioBox component properties
- * @param props.value - Required unique value for this radio option within the group
- * @param props.isError - Optional error state indicator for styling
- * @param props.size - Size variant for the radio box, inherits from RadioGroup if not specified
- * @param props.children - Content to display next to the radio button (label text, icons, etc.)
- *
- * **...Other valid HTML properties for button element**
- *
- * @returns RadioBox JSX element wrapped in a label for accessibility
- *
- * @example
- * ```tsx
- * // Basic radio boxes within a group
- * <RadioGroup name="gender">
- *   <RadioBox value="male">Male</RadioBox>
- *   <RadioBox value="female">Female</RadioBox>
- *   <RadioBox value="other">Other</RadioBox>
- * </RadioGroup>
- *
- * // Radio boxes with rich content
- * <RadioGroup name="plan" label="Choose your plan">
- *   <RadioBox value="basic">
- *     <div>
- *       <h4>Basic Plan</h4>
- *       <p>$9.99/month - Perfect for individuals</p>
- *     </div>
- *   </RadioBox>
- *   <RadioBox value="premium">
- *     <div>
- *       <h4>Premium Plan</h4>
- *       <p>$19.99/month - Great for small teams</p>
- *     </div>
- *   </RadioBox>
- * </RadioGroup>
- *
- * // Radio boxes with custom size override
- * <RadioGroup name="priority" size="md">
- *   <RadioBox value="low" size="sm">Low Priority</RadioBox>
- *   <RadioBox value="medium">Medium Priority</RadioBox>
- *   <RadioBox value="high" size="lg">High Priority</RadioBox>
- * </RadioGroup>
- *
- * // Radio boxes with disabled state
- * <RadioGroup name="options">
- *   <RadioBox value="option1">Available Option</RadioBox>
- *   <RadioBox value="option2" disabled>Disabled Option</RadioBox>
- *   <RadioBox value="option3">Another Available Option</RadioBox>
- * </RadioGroup>
- *
- * // Radio boxes with custom styling
- * <RadioGroup name="theme">
- *   <RadioBox value="light" className="theme-option">
- *     🌞 Light Theme
- *   </RadioBox>
- *   <RadioBox value="dark" className="theme-option">
- *     🌙 Dark Theme
- *   </RadioBox>
- *   <RadioBox value="auto" className="theme-option">
- *     🔄 Auto Theme
- *   </RadioBox>
- * </RadioGroup>
- * ```
- *
- * @remarks
- * This component must be used as a child of RadioGroup. It automatically inherits:
- * - Group name for form handling
- * - Size from parent RadioGroup (unless overridden)
- * - Change handlers and state management
- * - Error states from form validation
- *
- * The component handles both click and focus events for accessibility.
- */
-function RadioBox(props) {
-    const { value: componentValue, size: componentSize, disabled, children, className: baseClassName = "", onClick, onFocus, ...rest } = props;
-    const { handleChange, size: groupSize, value, isError, disabled: groupDisabled, } = useRadioGroup();
-    const isChecked = value === componentValue;
-    const size = componentSize || groupSize;
-    const isDisabled = disabled || groupDisabled;
-    const checkedClass = isChecked ? "checkedTrue" : "checkedFalse";
-    const errorClass = !!isError ? "errorTrue" : "errorFalse";
-    const disabledClass = isDisabled ? "disabledTrue" : "disabledFalse";
-    const className = `arkynRadioBox ${size} ${checkedClass} ${errorClass} ${disabledClass} ${baseClassName}`;
-    function handleClick(event) {
-        onClick && onClick(event);
-        handleChange(componentValue);
-    }
-    function handleFocus(event) {
-        onFocus && onFocus(event);
-        handleChange(componentValue);
-    }
-    return (_jsxs("label", { className: className.trim(), children: [_jsx("button", { type: "button", disabled: isDisabled, onClick: handleClick, onFocus: handleFocus, ...rest }), children] }));
-}
-export { RadioBox };

package/dist/components/radio/radioContext.js

@@ -1,11 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { createContext, useContext } from "react";
-const radioContext = createContext({});
-function RadioProvider(props) {
-    const { children, size, isError, handleChange, value, disabled } = props;
-    return (_jsx(radioContext.Provider, { value: { handleChange, value, size, isError, disabled }, children: children }));
-}
-function useRadioGroup() {
-    return useContext(radioContext);
-}
-export { RadioProvider, useRadioGroup };

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

@@ -1,100 +0,0 @@
-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: wrapperClassName = "", 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}`;
-    return (_jsxs(FieldWrapper, { className: wrapperClassName, 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.js

@@ -1,18 +0,0 @@
-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.js

@@ -1,24 +0,0 @@
-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/index.js

@@ -1,149 +0,0 @@
-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: 10000)
- * @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 = 10000, 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.js

@@ -1,33 +0,0 @@
-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.js

@@ -1,13 +0,0 @@
-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/markButton/index.js

@@ -1,16 +0,0 @@
-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.js

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