@arkyn/components 3.0.1-beta.154 → 3.0.1-beta.156

package/dist/components/phoneInput/index.js

@@ -1,127 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { findCountryMask, formatToPhone, removeNonNumeric, } from "@arkyn/shared";
-import { countries } from "@arkyn/templates";
-import { useId, useRef, useState } from "react";
-import { useForm } from "../../hooks/useForm";
-import { FieldTemplate } from "../../services/fieldTemplate";
-import { PhoneInputContainer } from "./phoneInputContainer";
-import { PhoneInputCountriesOverlay } from "./phoneInputCountriesOverlay";
-import { PhoneInputCountryOption } from "./phoneInputCountryOption";
-import { PhoneInputCountryOptionsContainer } from "./phoneInputCountryOptionsContainer";
-import { PhoneInputCountrySelector } from "./phoneInputCountrySelector";
-import { PhoneInputMask } from "./phoneInputMask";
-/**
- * PhoneInput — phone number field with an integrated country selector and automatic mask formatting.
- *
- * The visible input is masked according to the selected country's phone format.
- * The hidden `<input>` stores a numeric string prefixed with the country dial code for form submission.
- * Integrates with `useForm` to display validation errors by field name.
- *
- * @param props.name - Field name for form submission. Required.
- * @param props.label - Label text displayed above the input.
- * @param props.showAsterisk - Appends `*` to the label.
- * @param props.errorMessage - Validation error message.
- * @param props.size - Input size (`md` | `lg`). Default: "md"
- * @param props.variant - Visual style variant. Default: "solid"
- * @param props.disabled - Disables all interactions. Default: false
- * @param props.readOnly - Prevents editing. Default: false
- * @param props.isLoading - Shows loading state and disables interactions. Default: false
- * @param props.defaultValue - Uncontrolled default phone value.
- * @param props.value - Controlled phone value (without country code).
- * @param props.onChange - Callback fired on change — receives numeric string with country code.
- * @param props.defaultCountryIso - ISO code of the initially selected country. Default: "BR"
- * @param props.searchCountryPlaceholder - Placeholder for country search. Default: "Pesquisar país"
- * @param props.notFoundCountryText - Text shown when no country matches. Default: "Nenhum país encontrado"
- * @param props.orientation - Layout direction. Default: "vertical"
- * @param props.unShowFieldTemplate - Skips wrapper, label, and error rendering. Default: false
- *
- * @returns PhoneInput JSX element wrapped in `FieldTemplate`.
- *
- * @example
- * ```tsx
- * // Basic
- * <PhoneInput name="phone" label="Phone" />
- *
- * // Controlled with outline variant
- * <PhoneInput
- *   name="contactPhone"
- *   label="Contact Phone"
- *   value={phone}
- *   onChange={(v) => setPhone(v)}
- *   variant="outline"
- *   size="lg"
- * />
- *
- * // Pre-selected country (US)
- * <PhoneInput
- *   name="phone"
- *   label="Phone"
- *   defaultCountryIso="US"
- *   showAsterisk
- * />
- * ```
- */
-function PhoneInput(props) {
-    const { defaultCountryIso, value: rawValue, label, className: wrapperClassName = "", disabled = false, errorMessage: baseErrorMessage, isLoading = false, readOnly = false, size = "md", defaultValue = "", variant = "solid", showAsterisk, name, onChange, searchCountryPlaceholder = "Pesquisar país", notFoundCountryText = "Nenhum país encontrado", id, unShowFieldTemplate = false, orientation = "vertical", } = props;
-    const brasilCountry = countries.find((country) => country.iso === "BR");
-    const defaultData = defaultValue ? formatToPhone(defaultValue) : "";
-    const defaultCountry = defaultValue
-        ? findCountryMask(defaultValue)[1]
-        : brasilCountry;
-    const [isFocused, setIsFocused] = useState(false);
-    const [search, setSearch] = useState("");
-    const [showCountryOptions, setShowCountryOptions] = useState(false);
-    const [internalValue, setValue] = useState(defaultData);
-    const value = rawValue !== undefined ? rawValue : internalValue;
-    const [currentCountry, setCurrentCountry] = useState(defaultCountry);
-    const { fieldErrors } = useForm();
-    const phoneInputRef = useRef(null);
-    const phoneInputId = id || useId();
-    const errorMessage = baseErrorMessage || fieldErrors?.[name];
-    const isError = !!errorMessage;
-    const isDisabled = disabled || isLoading;
-    const inputPhoneMaskRef = useRef(null);
-    function handleContainerFocus() {
-        if (isDisabled)
-            return;
-        if (isFocused || showCountryOptions)
-            return;
-        setIsFocused(true);
-        if (inputPhoneMaskRef.current)
-            inputPhoneMaskRef.current.focus();
-    }
-    function handleOpenCountryOptions() {
-        setShowCountryOptions(true);
-        setIsFocused(true);
-    }
-    function handleCloseCountryOptions() {
-        setShowCountryOptions(false);
-        setIsFocused(false);
-    }
-    function handleInputFocus() {
-        setIsFocused(true);
-    }
-    function handleInputBlur() {
-        setIsFocused(false);
-    }
-    function filterCountryFunction(country) {
-        return country.name.toLowerCase().includes(search.toLowerCase());
-    }
-    function inputValue(props) {
-        let returnValue = currentCountry.code;
-        returnValue += removeNonNumeric(props || value);
-        return returnValue;
-    }
-    return (_jsx(FieldTemplate, { name: name, label: label, showAsterisk: showAsterisk, className: wrapperClassName, errorMessage: errorMessage, unShowFieldTemplate: unShowFieldTemplate, orientation: orientation, children: _jsxs(PhoneInputContainer, { disabled: isDisabled, isError: isError, isLoading: isLoading, isFocused: isFocused, readOnly: readOnly, size: size, variant: variant, onFocus: handleContainerFocus, children: [_jsx(PhoneInputCountrySelector, { currentCountry: currentCountry, onClick: handleOpenCountryOptions, size: size }), _jsxs(PhoneInputCountryOptionsContainer, { isOpen: isDisabled ? false : readOnly ? false : showCountryOptions, search: search, placeholder: searchCountryPlaceholder, onSearch: setSearch, children: [countries
-                            .filter((country) => filterCountryFunction(country))
-                            .map((country) => (_jsx(PhoneInputCountryOption, { country: country, handleChangeValue: () => {
-                                setCurrentCountry(country);
-                                setShowCountryOptions(false);
-                                setValue("");
-                            }, isActive: country.iso === currentCountry.iso, size: size }, country.iso))), countries.filter((country) => filterCountryFunction(country))
-                            .length === 0 && _jsx("p", { children: notFoundCountryText })] }), _jsx(PhoneInputCountriesOverlay, { isOpen: isDisabled ? false : readOnly ? false : showCountryOptions, onClick: handleCloseCountryOptions }), _jsx(PhoneInputMask, { id: phoneInputId, ref: inputPhoneMaskRef, readonly: readOnly, currentCountry: currentCountry, value: value, disabled: isDisabled, onBlur: handleInputBlur, onFocus: handleInputFocus, size: size, onChange: (e) => {
-                        setValue(e);
-                        onChange && onChange(inputValue(e));
-                    } }), _jsx("input", { ref: phoneInputRef, type: "hidden", name: name, value: inputValue() })] }) }));
-}
-export { PhoneInput };

package/dist/components/phoneInput/phoneInputContainer/index.js

@@ -1,11 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import "./styles.css";
-function PhoneInputContainer(props) {
-    const { children, onFocus, disabled, isError, isLoading, isFocused, className: baseClassName = "", readOnly, variant, size, } = props;
-    const errored = isError ? "errored" : "";
-    const opacity = disabled || readOnly || isLoading ? "opacity" : "";
-    const focused = isFocused ? "focused" : "";
-    const className = `arkynPhoneInputContainer ${variant} ${size} ${opacity} ${errored} ${focused} ${baseClassName}`;
-    return (_jsx("section", { className: className.trim(), onClick: onFocus, children: children }));
-}
-export { PhoneInputContainer };

package/dist/components/phoneInput/phoneInputCountriesOverlay/index.js

@@ -1,9 +0,0 @@
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
-import "./styles.css";
-function PhoneInputCountriesOverlay(props) {
-    const { isOpen, onClick } = props;
-    if (!isOpen)
-        return _jsx(_Fragment, {});
-    return (_jsx("aside", { className: "arkynPhoneInputCountriesOverlay", onClick: onClick }));
-}
-export { PhoneInputCountriesOverlay };

package/dist/components/phoneInput/phoneInputCountryOption/index.js

@@ -1,10 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Check } from "lucide-react";
-import "./styles.css";
-function PhoneInputCountryOption(props) {
-    const { country, isActive, handleChangeValue, size } = props;
-    const hasActive = isActive ? "active" : "";
-    const className = `arkynPhoneInputCountryOption ${size} ${hasActive}`;
-    return (_jsxs("div", { onClick: () => handleChangeValue(country), className: className, children: [_jsx("img", { src: country.flag, alt: country.name, className: "flag" }), country.name, " ", _jsx("span", { children: country.code }), _jsx(Check, { className: "check" })] }));
-}
-export { PhoneInputCountryOption };

package/dist/components/phoneInput/phoneInputCountryOptionsContainer/index.js

@@ -1,40 +0,0 @@
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from "react";
-import { useScrollLock } from "../../../hooks/useScrollLock";
-import "./styles.css";
-function PhoneInputCountryOptionsContainer(props) {
-    const { children, isOpen, onSearch, search, placeholder } = props;
-    const containerRef = useRef(null);
-    const [position, setPosition] = useState("bottom");
-    function handleSearch(e) {
-        onSearch(e.target.value);
-    }
-    useScrollLock(isOpen);
-    useEffect(() => {
-        if (!isOpen)
-            return;
-        const checkContainerPosition = () => {
-            if (!containerRef.current)
-                return;
-            const parentElement = containerRef.current.parentElement;
-            if (!parentElement)
-                return;
-            const parentRect = parentElement.getBoundingClientRect();
-            const viewportHeight = window.innerHeight;
-            const estimatedContainerHeight = 300;
-            const spaceBelow = viewportHeight - parentRect.bottom;
-            if (spaceBelow < estimatedContainerHeight &&
-                parentRect.top > estimatedContainerHeight) {
-                setPosition("top");
-            }
-            else {
-                setPosition("bottom");
-            }
-        };
-        checkContainerPosition();
-    }, [isOpen]);
-    if (!isOpen)
-        return _jsx(_Fragment, {});
-    return (_jsxs("div", { className: `arkynPhoneInputCountryOptionsContainer ${position}`, ref: containerRef, children: [_jsx("input", { type: "search", name: "search-select", className: "arkynPhoneInputCountryOptionsContainerSearchSelect", value: search, id: "input-search", placeholder: placeholder, onChange: handleSearch }), children] }));
-}
-export { PhoneInputCountryOptionsContainer };

package/dist/components/phoneInput/phoneInputCountrySelector/index.js

@@ -1,9 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ChevronDown } from "lucide-react";
-import { Divider } from "../../divider";
-import "./styles.css";
-function PhoneInputCountrySelector(props) {
-    const { currentCountry, onClick } = props;
-    return (_jsxs("div", { className: "phoneInputSelectCountry", onClick: onClick, children: [_jsx("img", { className: "flag", src: currentCountry.flag, alt: currentCountry.name }), _jsx(ChevronDown, { className: "chevronDown", strokeWidth: 2.5 }), _jsx(Divider, { orientation: "vertical" })] }));
-}
-export { PhoneInputCountrySelector };

package/dist/components/phoneInput/phoneInputMask/index.js

@@ -1,37 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { InputMask } from "@react-input/mask";
-import { forwardRef, useEffect, useState, } from "react";
-import { applyMask, clear, getMask, MAX_LENGTH, TYPES, } from "../../../utils/phoneInputUtilities";
-import "./style.css";
-const BaseInput = forwardRef((props, ref) => {
-    return _jsx("input", { ref: ref, ...props });
-});
-const PhoneInputMask = forwardRef((props, ref) => {
-    const { onFocus, readonly, onBlur, size, onChange, value, currentCountry, disabled, id, } = props;
-    const [isMounted, setIsMounted] = useState(false);
-    const mask = typeof currentCountry.mask === "string"
-        ? currentCountry.mask
-        : currentCountry.mask[0];
-    useEffect(() => {
-        if (isMounted)
-            onChange(mask);
-        else
-            setIsMounted(true);
-    }, [currentCountry]);
-    const className = `phoneInputMask ${size}`;
-    function handleChange(event) {
-        let value = clear(event.target.value);
-        const mask = getMask(value);
-        let nextLength = value.length;
-        if (nextLength > MAX_LENGTH)
-            return;
-        value = applyMask(value, TYPES[mask]);
-        event.target.value = value;
-        onChange(value);
-    }
-    if (currentCountry.code === "+55") {
-        return (_jsx("input", { id: id, value: value, onChange: handleChange, className: className, onFocus: onFocus, onBlur: onBlur, disabled: disabled, ref: ref }));
-    }
-    return (_jsx(InputMask, { id: id, value: value, readOnly: readonly, onChange: (e) => onChange(e.target.value), className: className, component: BaseInput, onFocus: onFocus, onBlur: onBlur, disabled: disabled, mask: mask, showMask: true, replacement: { _: /\d/ }, ref: ref }));
-});
-export { PhoneInputMask };

package/dist/components/popover/index.js

@@ -1,62 +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 — floating panel that appears relative to a trigger element.
- *
- * Clicking outside the popover (or clicking the content when `closeOnClick` is set)
- * dismisses it. Locks body scroll while open.
- *
- * @param props.children - Content to display inside the panel. Required.
- * @param props.button - Trigger element that opens the popover. Required.
- * @param props.closeOnClick - Clicking the content also closes the popover. Default: false
- * @param props.orientation - Panel position relative to the trigger. Default: "bottomLeft"
- * @param props.className - Additional CSS class for the root element.
- *
- * @returns Popover JSX element with trigger, animated panel, and outside-click overlay.
- *
- * @example
- * ```tsx
- * // Basic dropdown menu
- * <Popover button={<Button>Options</Button>} closeOnClick>
- *   <ul>
- *     <li onClick={handleEdit}>Edit</li>
- *     <li onClick={handleDelete}>Delete</li>
- *   </ul>
- * </Popover>
- *
- * // User profile menu (bottom-right)
- * <Popover
- *   button={<IconButton icon={User} aria-label="Account" />}
- *   orientation="bottomRight"
- *   closeOnClick
- * >
- *   <nav>
- *     <a href="/profile">Profile</a>
- *     <a href="/settings">Settings</a>
- *     <a href="/logout">Sign out</a>
- *   </nav>
- * </Popover>
- *
- * // Filter panel (top-left)
- * <Popover button={<Badge>Filters</Badge>} orientation="topLeft">
- *   <Input name="search" placeholder="Search..." />
- *   <Select name="status" options={statusOptions} />
- * </Popover>
- * ```
- */
-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,48 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useRadioGroup } from "../radioContext";
-import "./styles.css";
-/**
- * RadioBox — individual option inside a `RadioGroup`. Renders as a `<label>` + hidden `<button>` pair.
- *
- * Reads active value, size, error state, and disabled state from `RadioGroup` context.
- * Must be used as a direct child of `RadioGroup`.
- *
- * @param props.value - Option value. Required.
- * @param props.children - Option label content (text, icons, or rich markup).
- * @param props.disabled - Disables this option (group can also disable all options).
- * @param props.size - Size override. Inherits from group by default.
- *
- * **...Other valid HTML `<button>` properties**
- *
- * @returns RadioBox JSX element.
- *
- * @example
- * ```tsx
- * <RadioGroup name="plan" label="Choose a plan" onChange={setPlan}>
- *   <RadioBox value="basic">Basic — $9/mo</RadioBox>
- *   <RadioBox value="pro">Pro — $29/mo</RadioBox>
- *   <RadioBox value="enterprise" disabled>Enterprise — contact us</RadioBox>
- * </RadioGroup>
- * ```
- */
-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,58 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from "react";
-import { useForm } from "../../../hooks/useForm";
-import { FieldTemplate } from "../../../services/fieldTemplate";
-import { RadioProvider } from "../radioContext";
-import "./styles.css";
-/**
- * RadioGroup — managed group of `RadioBox` options with form integration.
- *
- * Renders a hidden `<input>` for native form submission. Reads `fieldErrors[name]` from
- * the nearest `FormProvider` when no `errorMessage` is explicitly provided.
- *
- * @param props.name - Form field name. Required.
- * @param props.label - Label displayed above the group.
- * @param props.showAsterisk - Appends `*` to the label. Default: false
- * @param props.value - Controlled selection.
- * @param props.defaultValue - Initial selection (uncontrolled). Default: `""`
- * @param props.onChange - Called with the newly selected value.
- * @param props.size - Size for all child `RadioBox` elements. Default: `"md"`
- * @param props.disabled - Disables all options. Default: false
- * @param props.errorMessage - Validation error message.
- * @param props.unShowFieldTemplate - Omit label/error wrapper. Default: false
- *
- * **...Other valid HTML `<div>` properties**
- *
- * @returns RadioGroup JSX element.
- *
- * @example
- * ```tsx
- * // Uncontrolled with label
- * <RadioGroup name="gender" label="Gender" showAsterisk defaultValue="male">
- *   <RadioBox value="male">Male</RadioBox>
- *   <RadioBox value="female">Female</RadioBox>
- *   <RadioBox value="other">Other</RadioBox>
- * </RadioGroup>
- *
- * // Controlled with change handler
- * <RadioGroup name="plan" label="Subscription plan" value={plan} onChange={setPlan}>
- *   <RadioBox value="basic">Basic — $9/mo</RadioBox>
- *   <RadioBox value="pro">Pro — $29/mo</RadioBox>
- * </RadioGroup>
- * ```
- */
-function RadioGroup(props) {
-    const { defaultValue = "", name, label, showAsterisk, errorMessage: baseErrorMessage, value: forceValue, onChange, size = "md", className: wrapperClassName = "", disabled = false, unShowFieldTemplate = false, orientation = "vertical", ...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 (_jsx(FieldTemplate, { name: name, label: label, showAsterisk: showAsterisk, className: wrapperClassName, errorMessage: errorMessage, unShowFieldTemplate: unShowFieldTemplate, orientation: orientation, children: _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 })] }) }));
-}
-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,26 +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] }));
-        case "video":
-            return (_jsxs("div", { style: style, ...attributes, children: [_jsx("iframe", { className: "arkynElementVideo", src: element?.src || "", title: "YouTube video player", allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share", referrerPolicy: "strict-origin-when-cross-origin", allowFullScreen: true }), children] }));
-        default:
-            return (_jsx("p", { className: "arkynElementParagraph", style: style, ...attributes, children: children }));
-    }
-}
-export { Element };

package/dist/components/richText/index.js

@@ -1,136 +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 { InsertVideo } from "./insertVideo";
-import { Leaf } from "./leaf";
-import { MarkButton } from "./markButton";
-import { Toolbar } from "./toolbar";
-import { useForm } from "../../hooks/useForm";
-import { extractTextFromNode } from "../../services/extractTextFromNode";
-import { FieldTemplate } from "../../services/fieldTemplate";
-import { toggleMark } from "../../services/toggleMark";
-import { hotKeys, initialValue } from "../../templates/richTextTemplates";
-import "./styles.css";
-/**
- * RichText — WYSIWYG rich-text editor built on Slate.js with a configurable toolbar.
- *
- * **Toolbar features:** bold, italic, underline, code, H1/H2, block quote, alignment (left/center/right/justify), image and video insertion.
- *
- * Editor content is stored as a Slate JSON string in a hidden `<input>` for form submission.
- * Integrates with `useForm` to display validation errors by field name.
- *
- * @param props.name - Field name for form submission. Required.
- * @param props.label - Label text displayed above the editor.
- * @param props.hiddenButtons - Toolbar button keys to hide (e.g. `["image", "code"]`).
- * @param props.imageConfig - Enables image insertion; contains the upload endpoint and modal labels.
- * @param props.defaultValue - Initial editor content as a Slate JSON string. Default: "[]"
- * @param props.maxLimit - Maximum character count. Default: 10000
- * @param props.enforceCharacterLimit - Prevents typing past `maxLimit`. Default: false
- * @param props.onChangeCharactersCount - Callback fired on every keystroke — receives the current character count.
- * @param props.onChange - Callback fired when editor content changes — receives the Slate `Descendant[]`.
- * @param props.baseErrorMessage - Custom error message (overrides `useForm` context error).
- * @param props.isError - Forces the error visual state.
- * @param props.id - Custom id for the editable area element.
- * @param props.showAsterisk - Appends `*` to the label.
- * @param props.orientation - Layout direction. Default: "horizontal"
- * @param props.unShowFieldTemplate - Skips wrapper, label, and error rendering. Default: false
- *
- * @returns RichText JSX element wrapped in `FieldTemplate`.
- *
- * @example
- * ```tsx
- * // Basic
- * <RichText name="content" />
- *
- * // With character limit and hidden toolbar buttons
- * <RichText
- *   name="description"
- *   label="Description"
- *   maxLimit={500}
- *   enforceCharacterLimit
- *   hiddenButtons={["image", "video", "code"]}
- *   onChangeCharactersCount={(n) => setCharCount(n)}
- * />
- *
- * // With image upload support
- * <RichText
- *   name="article"
- *   label="Article Body"
- *   imageConfig={{ action: "/api/upload" }}
- * />
- * ```
- */
-function RichText(props) {
-    const { name, hiddenButtons, imageConfig, videoConfig, className: wrapperClassName = "", defaultValue = "[]", enforceCharacterLimit = false, onChangeCharactersCount, baseErrorMessage, maxLimit = 10000, onChange, isError: baseIsError, label, showAsterisk, id, orientation = "vertical", unShowFieldTemplate = false, } = 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 (_jsx(FieldTemplate, { name: name, label: label, showAsterisk: showAsterisk, className: wrapperClassName, errorMessage: errorMessage, unShowFieldTemplate: unShowFieldTemplate, orientation: orientation, children: _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 })), buttonIsNotHidden("video") && _jsx(InsertVideo, { ...videoConfig })] }), _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 })] }) }));
-}
-export { RichText };