@skalfa/skalfa-component 1.0.25 → 1.0.27

package/dist/index.d.ts

@@ -25,6 +25,8 @@ export * from "./input/InputTime.component";
 export * from "./input/InputValues.component";
 export * from "./input/Radio.component";
 export * from "./input/Select.component";
+export * from "./input/Textarea.component";
+export * from "./input/InputContent.component";
 export * from "./modal/BottomSheet.component";
 export * from "./modal/FloatingPage.component";
 export * from "./modal/Modal.component";
@@ -47,6 +49,7 @@ export * from "./typography/TypographyArticle.component";
 export * from "./typography/TypographyColumn.component";
 export * from "./typography/TypographyContent.component";
 export * from "./typography/TypographyTips.component";
+export * from "./wrap/ContentWrapper.component";
 export * from "./wrap/Draggable.component";
 export * from "./wrap/Image.component";
 export * from "./wrap/OutsideClick.component";

package/dist/index.js

@@ -99,6 +99,13 @@ exports.RadioComponent = require("./input/Radio.component").RadioComponent;
 // Static export for ./input/Select.component
 exports.SelectComponent = require("./input/Select.component").SelectComponent;
 
+// Static export for ./input/Textarea.component
+exports.TextareaComponent = require("./input/Textarea.component").TextareaComponent;
+
+// Static export for ./input/InputContent.component
+exports.DEFAULT_TOOLBAR_CONTROLS = require("./input/InputContent.component").DEFAULT_TOOLBAR_CONTROLS;
+exports.InputContentComponent = require("./input/InputContent.component").InputContentComponent;
+
 // Static export for ./modal/BottomSheet.component
 exports.BottomSheetComponent = require("./modal/BottomSheet.component").BottomSheetComponent;
 
@@ -167,6 +174,13 @@ exports.TypographyContentComponent = require("./typography/TypographyContent.com
 // Static export for ./typography/TypographyTips.component
 exports.TypographyTipsComponent = require("./typography/TypographyTips.component").TypographyTipsComponent;
 
+// Static export for ./wrap/ContentWrapper.component
+exports.COLOR_MAP = require("./wrap/ContentWrapper.component").COLOR_MAP;
+exports.parseInlineFormats = require("./wrap/ContentWrapper.component").parseInlineFormats;
+exports.parseContentToHtml = require("./wrap/ContentWrapper.component").parseContentToHtml;
+exports.parseHtmlToContent = require("./wrap/ContentWrapper.component").parseHtmlToContent;
+exports.ContentWrapperComponent = require("./wrap/ContentWrapper.component").ContentWrapperComponent;
+
 // Static export for ./wrap/Draggable.component
 exports.DraggableComponent = require("./wrap/Draggable.component").DraggableComponent;
 

package/dist/input/InputContent.component.d.ts

@@ -0,0 +1,22 @@
+import { ReactNode, Ref } from "react";
+import { ValidationRules } from "@utils";
+export type ToolbarControlName = "HEADER" | "BOLD" | "ITALIC" | "UNDERLINE" | "STRIKETHROUGH" | "TEXT_SIZE" | "FONT_SIZE" | "ALIGN_LEFT" | "ALIGN_CENTER" | "ALIGN_RIGHT" | "ALIGN_JUSTIFY" | "LINK" | "COLOR" | "LIST_BULLET" | "BULLET_LIST" | "LIST_NUMBER" | "NUMBER_LIST" | "DIVIDER" | "SEP";
+export type ToolbarControlItem = ToolbarControlName | ReactNode;
+export declare const DEFAULT_TOOLBAR_CONTROLS: ToolbarControlItem[];
+export interface InputContentProps {
+    label?: string;
+    tip?: string | ReactNode;
+    name?: string;
+    placeholder?: string;
+    disabled?: boolean;
+    value?: string;
+    invalid?: string;
+    validations?: ValidationRules;
+    toolbarControl?: Array<ToolbarControlItem>;
+    onChange?: (value: string) => any;
+    register?: (name: string, validations?: ValidationRules) => void;
+    unregister?: (name: string) => void;
+    ref?: Ref<HTMLDivElement>;
+    className?: string;
+}
+export declare function InputContentComponent({ label, tip, className, value, invalid, validations, toolbarControl, register, unregister, onChange, ref, ...props }: InputContentProps): import("@types/react").JSX.Element;

package/dist/input/InputContent.component.js

@@ -0,0 +1,514 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DEFAULT_TOOLBAR_CONTROLS = void 0;
+exports.InputContentComponent = InputContentComponent;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const _utils_1 = require("@utils");
+const ContentWrapper_component_1 = require("../wrap/ContentWrapper.component");
+const Button_component_1 = require("../button/Button.component");
+exports.DEFAULT_TOOLBAR_CONTROLS = [
+    "HEADER",
+    "TEXT_SIZE",
+    "BOLD",
+    "ITALIC",
+    "UNDERLINE",
+    "STRIKETHROUGH",
+    "ALIGN_LEFT",
+    "ALIGN_CENTER",
+    "ALIGN_RIGHT",
+    "ALIGN_JUSTIFY",
+    "LINK",
+    "COLOR",
+    "LIST_BULLET",
+    "LIST_NUMBER",
+    "DIVIDER",
+];
+function InputContentComponent({ label, tip, className = "", value, invalid, validations, toolbarControl, register, unregister, onChange, ref, ...props }) {
+    const inputHandler = (0, _utils_1.useInputHandler)(props.name, value, validations, register, false, unregister);
+    const randomId = (0, _utils_1.useInputRandomId)();
+    const [invalidMessage] = (0, _utils_1.useValidation)(inputHandler.value, validations, invalid, inputHandler.idle);
+    const editorRef = (0, react_1.useRef)(null);
+    const isInternalChange = (0, react_1.useRef)(false);
+    const [showColorPicker, setShowColorPicker] = (0, react_1.useState)(false);
+    const [showLinkInput, setShowLinkInput] = (0, react_1.useState)(false);
+    const [linkUrl, setLinkUrl] = (0, react_1.useState)("");
+    const savedSelectionRef = (0, react_1.useRef)(null);
+    const [textSize, setTextSize] = (0, react_1.useState)(14);
+    const [activeColor, setActiveColor] = (0, react_1.useState)("normal");
+    const [activeStates, setActiveStates] = (0, react_1.useState)({
+        header: false,
+        bold: false,
+        italic: false,
+        underline: false,
+        strikeThrough: false,
+        justifyLeft: false,
+        justifyCenter: false,
+        justifyRight: false,
+        justifyFull: false,
+        insertUnorderedList: false,
+        insertOrderedList: false,
+    });
+    (0, react_1.useEffect)(() => {
+        if (isInternalChange.current) {
+            isInternalChange.current = false;
+            return;
+        }
+        if (editorRef.current) {
+            const html = (0, ContentWrapper_component_1.parseContentToHtml)(inputHandler.value || "");
+            if (editorRef.current.innerHTML !== html) {
+                editorRef.current.innerHTML = html;
+            }
+        }
+    }, [inputHandler.value]);
+    const saveSelection = (0, react_1.useCallback)(() => {
+        const sel = window.getSelection();
+        if (sel && sel.rangeCount > 0) {
+            savedSelectionRef.current = sel.getRangeAt(0).cloneRange();
+        }
+    }, []);
+    const restoreSelection = (0, react_1.useCallback)(() => {
+        const sel = window.getSelection();
+        if (sel && savedSelectionRef.current) {
+            sel.removeAllRanges();
+            sel.addRange(savedSelectionRef.current);
+        }
+    }, []);
+    const handleEditorChange = (0, react_1.useCallback)(() => {
+        if (!editorRef.current)
+            return;
+        const html = editorRef.current.innerHTML;
+        const customFormat = (0, ContentWrapper_component_1.parseHtmlToContent)(html);
+        isInternalChange.current = true;
+        inputHandler.setValue(customFormat);
+        inputHandler.setIdle(false);
+        if (onChange)
+            onChange(customFormat);
+    }, [onChange, inputHandler]);
+    const execCommand = (0, react_1.useCallback)((command, value) => {
+        editorRef.current?.focus();
+        restoreSelection();
+        document.execCommand(command, false, value);
+        saveSelection();
+        handleEditorChange();
+    }, [restoreSelection, saveSelection, handleEditorChange]);
+    const isCommandActive = (0, react_1.useCallback)((command) => {
+        try {
+            return document.queryCommandState(command);
+        }
+        catch {
+            return false;
+        }
+    }, []);
+    const handleBold = (0, react_1.useCallback)(() => execCommand("bold"), [execCommand]);
+    const handleItalic = (0, react_1.useCallback)(() => execCommand("italic"), [execCommand]);
+    const handleUnderline = (0, react_1.useCallback)(() => execCommand("underline"), [execCommand]);
+    const handleStrikethrough = (0, react_1.useCallback)(() => execCommand("strikeThrough"), [execCommand]);
+    const handleHeader = (0, react_1.useCallback)(() => {
+        editorRef.current?.focus();
+        restoreSelection();
+        const sel = window.getSelection();
+        if (!sel || sel.rangeCount === 0)
+            return;
+        let node = sel.anchorNode;
+        let isInHeader = false;
+        while (node && node !== editorRef.current) {
+            if (node.nodeType === Node.ELEMENT_NODE && node.tagName === "H2") {
+                isInHeader = true;
+                break;
+            }
+            node = node.parentNode;
+        }
+        if (isInHeader) {
+            document.execCommand("formatBlock", false, "p");
+        }
+        else {
+            document.execCommand("formatBlock", false, "h2");
+        }
+        saveSelection();
+        handleEditorChange();
+    }, [restoreSelection, saveSelection, handleEditorChange]);
+    const handleFontSizeChange = (0, react_1.useCallback)((newSize) => {
+        const clampedSize = Math.max(8, Math.min(72, newSize));
+        setTextSize(clampedSize);
+        editorRef.current?.focus();
+        restoreSelection();
+        const sel = window.getSelection();
+        if (!sel || sel.rangeCount === 0)
+            return;
+        const range = sel.getRangeAt(0);
+        if (sel.isCollapsed) {
+            let containerNode = range.commonAncestorContainer;
+            if (containerNode.nodeType === Node.TEXT_NODE)
+                containerNode = containerNode.parentNode;
+            if (containerNode && containerNode.dataset?.size) {
+                containerNode.style.fontSize = `${clampedSize}px`;
+                containerNode.dataset.size = clampedSize.toString();
+            }
+            else {
+                const span = document.createElement("span");
+                span.style.fontSize = `${clampedSize}px`;
+                span.dataset.size = clampedSize.toString();
+                span.appendChild(document.createTextNode("\u200B"));
+                range.insertNode(span);
+                const newRange = document.createRange();
+                newRange.setStart(span.firstChild, 1);
+                newRange.collapse(true);
+                sel.removeAllRanges();
+                sel.addRange(newRange);
+            }
+        }
+        else {
+            const span = document.createElement("span");
+            span.style.fontSize = `${clampedSize}px`;
+            span.dataset.size = clampedSize.toString();
+            try {
+                range.surroundContents(span);
+            }
+            catch {
+                const fragment = range.extractContents();
+                span.appendChild(fragment);
+                range.insertNode(span);
+            }
+            sel.removeAllRanges();
+            const newRange = document.createRange();
+            newRange.selectNodeContents(span);
+            sel.addRange(newRange);
+        }
+        saveSelection();
+        handleEditorChange();
+    }, [restoreSelection, saveSelection, handleEditorChange]);
+    const handleAlign = (0, react_1.useCallback)((align) => {
+        const commandMap = {
+            left: "justifyLeft",
+            center: "justifyCenter",
+            right: "justifyRight",
+            justify: "justifyFull",
+        };
+        const targetCmd = commandMap[align] || "justifyLeft";
+        if (isCommandActive(targetCmd)) {
+            execCommand("justifyLeft");
+        }
+        else {
+            execCommand(targetCmd);
+        }
+    }, [execCommand, isCommandActive]);
+    const handleColor = (0, react_1.useCallback)((colorKey) => {
+        const targetColor = activeColor === colorKey ? "normal" : colorKey;
+        const colorInfo = ContentWrapper_component_1.COLOR_MAP[targetColor];
+        if (!colorInfo)
+            return;
+        editorRef.current?.focus();
+        restoreSelection();
+        const sel = window.getSelection();
+        if (!sel || sel.rangeCount === 0 || sel.isCollapsed) {
+            setShowColorPicker(false);
+            return;
+        }
+        const range = sel.getRangeAt(0);
+        if (targetColor === "normal") {
+            let containerNode = range.commonAncestorContainer;
+            if (containerNode.nodeType === Node.TEXT_NODE)
+                containerNode = containerNode.parentNode;
+            if (containerNode && containerNode.dataset?.color) {
+                const parent = containerNode.parentNode;
+                while (containerNode.firstChild) {
+                    parent?.insertBefore(containerNode.firstChild, containerNode);
+                }
+                parent?.removeChild(containerNode);
+            }
+        }
+        else {
+            const span = document.createElement("span");
+            span.className = colorInfo.tw;
+            span.style.color = colorInfo.css;
+            span.dataset.color = targetColor;
+            try {
+                range.surroundContents(span);
+            }
+            catch {
+                const fragment = range.extractContents();
+                span.appendChild(fragment);
+                range.insertNode(span);
+            }
+            sel.removeAllRanges();
+            const newRange = document.createRange();
+            newRange.selectNodeContents(span);
+            sel.addRange(newRange);
+        }
+        setActiveColor(targetColor);
+        saveSelection();
+        setShowColorPicker(false);
+        handleEditorChange();
+    }, [activeColor, restoreSelection, saveSelection, handleEditorChange]);
+    const handleBulletList = (0, react_1.useCallback)(() => execCommand("insertUnorderedList"), [execCommand]);
+    const handleNumberList = (0, react_1.useCallback)(() => execCommand("insertOrderedList"), [execCommand]);
+    const handleLink = (0, react_1.useCallback)(() => {
+        saveSelection();
+        setShowLinkInput(true);
+        setLinkUrl("");
+    }, [saveSelection]);
+    const handleLinkSubmit = (0, react_1.useCallback)(() => {
+        if (!linkUrl) {
+            setShowLinkInput(false);
+            return;
+        }
+        editorRef.current?.focus();
+        restoreSelection();
+        const sel = window.getSelection();
+        if (!sel || sel.rangeCount === 0) {
+            setShowLinkInput(false);
+            return;
+        }
+        const range = sel.getRangeAt(0);
+        const linkText = sel.isCollapsed ? linkUrl : range.toString();
+        const a = document.createElement("a");
+        a.href = linkUrl;
+        a.className = "text-primary underline";
+        a.dataset.link = linkUrl;
+        a.target = "_blank";
+        a.rel = "noopener";
+        a.textContent = linkText;
+        if (!sel.isCollapsed) {
+            range.deleteContents();
+        }
+        range.insertNode(a);
+        const newRange = document.createRange();
+        newRange.setStartAfter(a);
+        newRange.collapse(true);
+        sel.removeAllRanges();
+        sel.addRange(newRange);
+        saveSelection();
+        setShowLinkInput(false);
+        setLinkUrl("");
+        handleEditorChange();
+    }, [linkUrl, restoreSelection, saveSelection, handleEditorChange]);
+    const handleDivider = (0, react_1.useCallback)(() => {
+        editorRef.current?.focus();
+        restoreSelection();
+        const sel = window.getSelection();
+        if (!sel || sel.rangeCount === 0)
+            return;
+        const range = sel.getRangeAt(0);
+        const dividerWrapper = document.createElement("div");
+        dividerWrapper.className = "skcontent-divider";
+        const hr = document.createElement("hr");
+        dividerWrapper.appendChild(hr);
+        const newP = document.createElement("p");
+        newP.innerHTML = "<br>";
+        range.deleteContents();
+        range.insertNode(newP);
+        range.insertNode(dividerWrapper);
+        const newRange = document.createRange();
+        newRange.setStart(newP, 0);
+        newRange.collapse(true);
+        sel.removeAllRanges();
+        sel.addRange(newRange);
+        saveSelection();
+        handleEditorChange();
+    }, [restoreSelection, saveSelection, handleEditorChange]);
+    const handleKeyDown = (0, react_1.useCallback)((e) => {
+        if (e.key === "Backspace") {
+            const sel = window.getSelection();
+            if (sel && sel.rangeCount > 0 && sel.isCollapsed) {
+                const range = sel.getRangeAt(0);
+                if (range.startOffset === 0) {
+                    let node = range.startContainer;
+                    let currentBlock = null;
+                    while (node && node !== editorRef.current) {
+                        if (node.nodeType === Node.ELEMENT_NODE && node.parentNode === editorRef.current) {
+                            currentBlock = node;
+                            break;
+                        }
+                        node = node.parentNode;
+                    }
+                    if (currentBlock) {
+                        const prev = currentBlock.previousElementSibling;
+                        if (prev && (prev.classList.contains("skcontent-divider") || prev.tagName === "HR")) {
+                            e.preventDefault();
+                            prev.remove();
+                            handleEditorChange();
+                            return;
+                        }
+                    }
+                }
+            }
+        }
+        if (e.key === "Delete") {
+            const sel = window.getSelection();
+            if (sel && sel.rangeCount > 0 && sel.isCollapsed) {
+                const range = sel.getRangeAt(0);
+                let node = range.startContainer;
+                const textLen = node.textContent?.length || 0;
+                if (range.startOffset >= textLen) {
+                    let currentBlock = null;
+                    while (node && node !== editorRef.current) {
+                        if (node.nodeType === Node.ELEMENT_NODE && node.parentNode === editorRef.current) {
+                            currentBlock = node;
+                            break;
+                        }
+                        node = node.parentNode;
+                    }
+                    if (currentBlock) {
+                        const next = currentBlock.nextElementSibling;
+                        if (next && (next.classList.contains("skcontent-divider") || next.tagName === "HR")) {
+                            e.preventDefault();
+                            next.remove();
+                            handleEditorChange();
+                            return;
+                        }
+                    }
+                }
+            }
+        }
+    }, [handleEditorChange]);
+    const updateActiveStates = (0, react_1.useCallback)(() => {
+        const sel = window.getSelection();
+        let inH2 = false;
+        if (sel && sel.rangeCount > 0) {
+            let node = sel.anchorNode;
+            while (node && node !== editorRef.current) {
+                if (node.nodeType === Node.ELEMENT_NODE && node.tagName === "H2") {
+                    inH2 = true;
+                    break;
+                }
+                node = node.parentNode;
+            }
+        }
+        setActiveStates({
+            header: inH2,
+            bold: isCommandActive("bold"),
+            italic: isCommandActive("italic"),
+            underline: isCommandActive("underline"),
+            strikeThrough: isCommandActive("strikeThrough"),
+            justifyLeft: isCommandActive("justifyLeft"),
+            justifyCenter: isCommandActive("justifyCenter"),
+            justifyRight: isCommandActive("justifyRight"),
+            justifyFull: isCommandActive("justifyFull"),
+            insertUnorderedList: isCommandActive("insertUnorderedList"),
+            insertOrderedList: isCommandActive("insertOrderedList"),
+        });
+        if (sel && sel.rangeCount > 0) {
+            let node = sel.anchorNode;
+            let detectedColor = "normal";
+            let detectedSize = null;
+            while (node && node !== editorRef.current) {
+                if (node.nodeType === Node.ELEMENT_NODE) {
+                    const el = node;
+                    if (el.dataset.color && detectedColor === "normal") {
+                        detectedColor = el.dataset.color;
+                    }
+                    if (el.dataset.size && detectedSize === null) {
+                        const parsed = parseInt(el.dataset.size);
+                        if (!isNaN(parsed))
+                            detectedSize = parsed;
+                    }
+                }
+                node = node.parentNode;
+            }
+            setActiveColor(detectedColor);
+            if (detectedSize !== null) {
+                setTextSize(detectedSize);
+            }
+        }
+    }, [isCommandActive]);
+    const renderControlItem = (0, react_1.useCallback)((item, index) => {
+        if (typeof item !== "string") {
+            return (0, jsx_runtime_1.jsx)("div", { children: item }, index);
+        }
+        switch (item) {
+            case "HEADER":
+                return ((0, jsx_runtime_1.jsx)(Button_component_1.ButtonComponent, { variant: activeStates.header ? "light" : "simple", paint: "primary", size: "sm", icon: "solid/text-h", tips: "Header", className: (0, _utils_1.cn)("toolbar-btn", activeStates.header && "toolbar-btn-active"), onClick: (e) => { e?.preventDefault?.(); handleHeader(); } }, index));
+            case "TEXT_SIZE":
+            case "FONT_SIZE":
+                return ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-0.5", children: [(0, jsx_runtime_1.jsx)(Button_component_1.ButtonComponent, { variant: "simple", paint: "primary", size: "sm", icon: "solid/minus", tips: "Decrease Font Size", className: "toolbar-btn", onClick: (e) => { e?.preventDefault?.(); handleFontSizeChange(textSize - 1); } }), (0, jsx_runtime_1.jsx)("input", { type: "number", value: textSize, onChange: (e) => handleFontSizeChange(parseInt(e.target.value) || 14), onFocus: () => saveSelection(), className: "w-10 h-7 text-xs text-center border border-stroke rounded focus:outline-none focus:border-primary bg-background text-foreground select-none" }), (0, jsx_runtime_1.jsx)(Button_component_1.ButtonComponent, { variant: "simple", paint: "primary", size: "sm", icon: "solid/plus", tips: "Increase Font Size", className: "toolbar-btn", onClick: (e) => { e?.preventDefault?.(); handleFontSizeChange(textSize + 1); } })] }, index));
+            case "BOLD":
+                return ((0, jsx_runtime_1.jsx)(Button_component_1.ButtonComponent, { variant: activeStates.bold ? "light" : "simple", paint: "primary", size: "sm", icon: "solid/text-b", tips: "Bold", className: (0, _utils_1.cn)("toolbar-btn", activeStates.bold && "toolbar-btn-active"), onClick: (e) => { e?.preventDefault?.(); handleBold(); } }, index));
+            case "ITALIC":
+                return ((0, jsx_runtime_1.jsx)(Button_component_1.ButtonComponent, { variant: activeStates.italic ? "light" : "simple", paint: "primary", size: "sm", icon: "solid/text-italic", tips: "Italic", className: (0, _utils_1.cn)("toolbar-btn", activeStates.italic && "toolbar-btn-active"), onClick: (e) => { e?.preventDefault?.(); handleItalic(); } }, index));
+            case "UNDERLINE":
+                return ((0, jsx_runtime_1.jsx)(Button_component_1.ButtonComponent, { variant: activeStates.underline ? "light" : "simple", paint: "primary", size: "sm", icon: "solid/text-underline", tips: "Underline", className: (0, _utils_1.cn)("toolbar-btn", activeStates.underline && "toolbar-btn-active"), onClick: (e) => { e?.preventDefault?.(); handleUnderline(); } }, index));
+            case "STRIKETHROUGH":
+                return ((0, jsx_runtime_1.jsx)(Button_component_1.ButtonComponent, { variant: activeStates.strikeThrough ? "light" : "simple", paint: "primary", size: "sm", icon: "solid/text-slash", tips: "Strikethrough", className: (0, _utils_1.cn)("toolbar-btn", activeStates.strikeThrough && "toolbar-btn-active"), onClick: (e) => { e?.preventDefault?.(); handleStrikethrough(); } }, index));
+            case "ALIGN_LEFT":
+                return ((0, jsx_runtime_1.jsx)(Button_component_1.ButtonComponent, { variant: activeStates.justifyLeft ? "light" : "simple", paint: "primary", size: "sm", icon: "solid/text-left", tips: "Align Left", className: (0, _utils_1.cn)("toolbar-btn", activeStates.justifyLeft && "toolbar-btn-active"), onClick: (e) => { e?.preventDefault?.(); handleAlign("left"); } }, index));
+            case "ALIGN_CENTER":
+                return ((0, jsx_runtime_1.jsx)(Button_component_1.ButtonComponent, { variant: activeStates.justifyCenter ? "light" : "simple", paint: "primary", size: "sm", icon: "solid/text-center", tips: "Align Center", className: (0, _utils_1.cn)("toolbar-btn", activeStates.justifyCenter && "toolbar-btn-active"), onClick: (e) => { e?.preventDefault?.(); handleAlign("center"); } }, index));
+            case "ALIGN_RIGHT":
+                return ((0, jsx_runtime_1.jsx)(Button_component_1.ButtonComponent, { variant: activeStates.justifyRight ? "light" : "simple", paint: "primary", size: "sm", icon: "solid/text-right", tips: "Align Right", className: (0, _utils_1.cn)("toolbar-btn", activeStates.justifyRight && "toolbar-btn-active"), onClick: (e) => { e?.preventDefault?.(); handleAlign("right"); } }, index));
+            case "ALIGN_JUSTIFY":
+                return ((0, jsx_runtime_1.jsx)(Button_component_1.ButtonComponent, { variant: activeStates.justifyFull ? "light" : "simple", paint: "primary", size: "sm", icon: "solid/text-justify", tips: "Align Justify", className: (0, _utils_1.cn)("toolbar-btn", activeStates.justifyFull && "toolbar-btn-active"), onClick: (e) => { e?.preventDefault?.(); handleAlign("justify"); } }, index));
+            case "LINK":
+                return ((0, jsx_runtime_1.jsxs)("div", { className: "relative", children: [(0, jsx_runtime_1.jsx)(Button_component_1.ButtonComponent, { variant: showLinkInput ? "light" : "simple", paint: "primary", size: "sm", icon: "solid/link", tips: "Link", className: (0, _utils_1.cn)("toolbar-btn", showLinkInput && "toolbar-btn-active"), onClick: (e) => { e?.preventDefault?.(); handleLink(); } }), showLinkInput && ((0, jsx_runtime_1.jsxs)("div", { className: "skcontent-dropdown skcontent-link-input", children: [(0, jsx_runtime_1.jsx)("input", { type: "url", placeholder: "https://...", value: linkUrl, onChange: (e) => setLinkUrl(e.target.value), onKeyDown: (e) => {
+                                        if (e.key === "Enter") {
+                                            e.preventDefault();
+                                            handleLinkSubmit();
+                                        }
+                                        if (e.key === "Escape") {
+                                            setShowLinkInput(false);
+                                        }
+                                    }, className: "skcontent-link-url-input", autoFocus: true }), (0, jsx_runtime_1.jsx)(Button_component_1.ButtonComponent, { variant: "solid", paint: "primary", size: "xs", icon: "solid/check", onClick: (e) => { e?.preventDefault?.(); handleLinkSubmit(); } })] }))] }, index));
+            case "COLOR":
+                return ((0, jsx_runtime_1.jsxs)("div", { className: "relative", children: [(0, jsx_runtime_1.jsx)(Button_component_1.ButtonComponent, { variant: activeColor !== "normal" ? "light" : "simple", paint: "primary", size: "sm", label: (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("div", { className: "skcontent-color-dot", style: { backgroundColor: ContentWrapper_component_1.COLOR_MAP[activeColor]?.css || ContentWrapper_component_1.COLOR_MAP.normal.css } }) }), tips: `Text Color (${ContentWrapper_component_1.COLOR_MAP[activeColor]?.label || "Normal"})`, className: (0, _utils_1.cn)("toolbar-btn", (activeColor !== "normal" || showColorPicker) && "toolbar-btn-active"), onClick: (e) => { e?.preventDefault?.(); setShowColorPicker(!showColorPicker); } }), showColorPicker && ((0, jsx_runtime_1.jsx)("div", { className: "skcontent-dropdown skcontent-color-picker", children: Object.entries(ContentWrapper_component_1.COLOR_MAP).map(([key, info]) => ((0, jsx_runtime_1.jsx)("button", { type: "button", title: info.label, className: (0, _utils_1.cn)("skcontent-color-dot", activeColor === key && "scale-125 border-2 border-primary"), style: { backgroundColor: info.css }, onMouseDown: (e) => {
+                                    e.preventDefault();
+                                    handleColor(key);
+                                } }, key))) }))] }, index));
+            case "LIST_BULLET":
+            case "BULLET_LIST":
+                return ((0, jsx_runtime_1.jsx)(Button_component_1.ButtonComponent, { variant: activeStates.insertUnorderedList ? "light" : "simple", paint: "primary", size: "sm", icon: "solid/list-bullet", tips: "Bullet List", className: (0, _utils_1.cn)("toolbar-btn", activeStates.insertUnorderedList && "toolbar-btn-active"), onClick: (e) => { e?.preventDefault?.(); handleBulletList(); } }, index));
+            case "LIST_NUMBER":
+            case "NUMBER_LIST":
+                return ((0, jsx_runtime_1.jsx)(Button_component_1.ButtonComponent, { variant: activeStates.insertOrderedList ? "light" : "simple", paint: "primary", size: "sm", icon: "solid/list-number", tips: "Numbered List", className: (0, _utils_1.cn)("toolbar-btn", activeStates.insertOrderedList && "toolbar-btn-active"), onClick: (e) => { e?.preventDefault?.(); handleNumberList(); } }, index));
+            case "DIVIDER":
+                return ((0, jsx_runtime_1.jsx)(Button_component_1.ButtonComponent, { variant: "simple", paint: "primary", size: "sm", icon: "solid/minus", tips: "Divider", className: "toolbar-btn", onClick: (e) => { e?.preventDefault?.(); handleDivider(); } }, index));
+            case "SEP":
+                return (0, jsx_runtime_1.jsx)("div", { className: "skcontent-toolbar-sep" }, index);
+            default:
+                return null;
+        }
+    }, [
+        activeStates,
+        showLinkInput,
+        linkUrl,
+        activeColor,
+        showColorPicker,
+        textSize,
+        handleHeader,
+        handleFontSizeChange,
+        handleBold,
+        handleItalic,
+        handleUnderline,
+        handleStrikethrough,
+        handleAlign,
+        handleLink,
+        handleLinkSubmit,
+        handleColor,
+        handleBulletList,
+        handleNumberList,
+        handleDivider,
+        saveSelection,
+    ]);
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "relative flex flex-col gap-y-0.5 w-full", children: [label && ((0, jsx_runtime_1.jsxs)("label", { htmlFor: randomId, className: (0, _utils_1.cn)("input-label", props.disabled && "input-label-disabled", !!invalidMessage && "input-label-error", (0, _utils_1.pcn)(className, "label"), props.disabled && (0, _utils_1.pcn)(className, "label", "disabled"), !!invalidMessage && (0, _utils_1.pcn)(className, "label", "error")), children: [label, validations && validations?.required && (0, jsx_runtime_1.jsx)("span", { className: "text-danger ml-1", children: "*" })] })), tip && ((0, jsx_runtime_1.jsx)("small", { className: (0, _utils_1.cn)("input-tip", props.disabled && "input-tip-disabled", (0, _utils_1.pcn)(className, "tip"), props.disabled && (0, _utils_1.pcn)(className, "tip", "disabled")), children: tip })), (0, jsx_runtime_1.jsxs)("div", { className: (0, _utils_1.cn)("skcontent-container", props.disabled && "skcontent-container-disabled", !!invalidMessage && "skcontent-container-error", (0, _utils_1.pcn)(className, "base"), !!invalidMessage && (0, _utils_1.pcn)(className, "base", "error")), children: [(0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)("skcontent-toolbar", (0, _utils_1.pcn)(className, "toolbar")), children: (toolbarControl || exports.DEFAULT_TOOLBAR_CONTROLS).map(renderControlItem) }), (0, jsx_runtime_1.jsx)("div", { ref: (node) => {
+                            editorRef.current = node;
+                            if (typeof ref === "function")
+                                ref(node);
+                            else if (ref && "current" in ref)
+                                ref.current = node;
+                        }, id: randomId, contentEditable: !props.disabled, suppressContentEditableWarning: true, className: (0, _utils_1.cn)("skcontent-editor", props.disabled && "skcontent-editor-disabled", (0, _utils_1.pcn)(className, "editor")), onInput: () => {
+                            saveSelection();
+                            handleEditorChange();
+                            updateActiveStates();
+                        }, onKeyDown: handleKeyDown, onMouseUp: () => {
+                            saveSelection();
+                            updateActiveStates();
+                        }, onKeyUp: () => {
+                            saveSelection();
+                            updateActiveStates();
+                        }, onFocus: () => {
+                            inputHandler.setFocus(true);
+                            setShowColorPicker(false);
+                        }, onBlur: () => {
+                            setTimeout(() => inputHandler.setFocus(false), 150);
+                        }, "data-placeholder": props.placeholder || "Write content..." })] }), invalidMessage && ((0, jsx_runtime_1.jsx)("small", { className: (0, _utils_1.cn)("input-error-message", (0, _utils_1.pcn)(className, "error")), children: invalidMessage }))] }));
+}

package/dist/input/Textarea.component.d.ts

@@ -0,0 +1,22 @@
+import { TextareaHTMLAttributes, ReactNode, Ref } from "react";
+import { type IconName } from "@skalfa/skalfa-icon";
+import { ValidationRules } from "@utils";
+export interface TextareaProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, "onChange"> {
+    label?: string;
+    tip?: string | ReactNode;
+    leftIcon?: IconName | any;
+    rightIcon?: IconName | any;
+    value?: any;
+    invalid?: string;
+    validations?: ValidationRules;
+    onlyAlphabet?: boolean;
+    uppercase?: boolean;
+    lowercase?: boolean;
+    onChange?: (value: any) => any;
+    register?: (name: string, validations?: ValidationRules) => void;
+    unregister?: (name: string) => void;
+    ref?: Ref<HTMLTextAreaElement>;
+    /** Use custom class with: "label::", "tip::", "error::", "base::", "icon::". */
+    className?: string;
+}
+export declare function TextareaComponent({ label, tip, leftIcon, rightIcon, className, value, invalid, validations, onlyAlphabet, uppercase, lowercase, register, unregister, onChange, ref, ...props }: TextareaProps): import("@types/react").JSX.Element;