@seedgrid/fe-components 0.2.4

package/dist/inputs/SgInputTextArea.js

@@ -0,0 +1,216 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { X } from "lucide-react";
+import { Controller } from "react-hook-form";
+import { t, useComponentsI18n } from "../i18n";
+function ErrorText(props) {
+    if (!props.message)
+        return null;
+    return _jsx("p", { className: "text-xs text-red-600", children: props.message });
+}
+function mergeTextareaPropsWithField(textareaProps, field) {
+    const resolvedValue = typeof field.value === "string" ? field.value : field.value == null ? "" : String(field.value);
+    return {
+        ...textareaProps,
+        value: resolvedValue,
+        onChange: (event) => {
+            field.onChange(event);
+            textareaProps?.onChange?.(event);
+        },
+        onBlur: (event) => {
+            field.onBlur();
+            textareaProps?.onBlur?.(event);
+        },
+        ref: (node) => {
+            field.ref(node);
+            const ref = textareaProps?.ref;
+            if (!ref)
+                return;
+            if (typeof ref === "function") {
+                ref(node);
+            }
+            else if (ref && typeof ref === "object" && "current" in ref) {
+                ref.current = node;
+            }
+        }
+    };
+}
+function SgInputTextAreaBase(props) {
+    const i18n = useComponentsI18n();
+    const textareaProps = props.textareaProps ?? {};
+    const labelText = props.labelText ?? props.label ?? "";
+    const placeholder = props.hintText ?? labelText;
+    const textareaRef = React.useRef(null);
+    const [internalError, setInternalError] = React.useState(null);
+    const [hasInteracted, setHasInteracted] = React.useState(false);
+    const [isFilled, setIsFilled] = React.useState(() => {
+        const value = textareaProps.value ?? textareaProps.defaultValue ?? "";
+        return String(value).length > 0;
+    });
+    const [valueLength, setValueLength] = React.useState(() => {
+        const value = textareaProps.value ?? textareaProps.defaultValue ?? "";
+        return String(value).length;
+    });
+    React.useEffect(() => {
+        const next = (textareaRef.current?.value ?? "").length > 0;
+        if (next !== isFilled)
+            setIsFilled(next);
+        setValueLength((textareaRef.current?.value ?? "").length);
+    });
+    React.useEffect(() => {
+        if (textareaProps.value === undefined)
+            return;
+        setIsFilled(String(textareaProps.value ?? "").length > 0);
+        setValueLength(String(textareaProps.value ?? "").length);
+    }, [textareaProps.value]);
+    const setRefs = React.useCallback((node) => {
+        textareaRef.current = node;
+        const ref = textareaProps.ref;
+        if (!ref)
+            return;
+        if (typeof ref === "function") {
+            ref(node);
+        }
+        else if (typeof ref === "object") {
+            ref.current = node;
+        }
+    }, [textareaProps]);
+    const runValidation = React.useCallback((value) => {
+        const required = props.required ?? false;
+        if (!value && required) {
+            const message = props.requiredMessage ?? t(i18n, "components.inputs.textarea.required");
+            setInternalError(message);
+            props.onValidation?.(message);
+            return;
+        }
+        if (props.maxLength && value.length > props.maxLength) {
+            const message = props.maxLengthMessage ??
+                t(i18n, "components.inputs.textarea.maxLength", { max: props.maxLength });
+            setInternalError(message);
+            props.onValidation?.(message);
+            return;
+        }
+        if (props.minLength && value.length < props.minLength) {
+            const message = props.minLengthMessage ??
+                t(i18n, "components.inputs.textarea.minLength", { min: props.minLength });
+            setInternalError(message);
+            props.onValidation?.(message);
+            return;
+        }
+        if (props.minNumberOfWords && wordCount(value) < props.minNumberOfWords) {
+            const message = props.minNumberOfWordsMessage ??
+                t(i18n, "components.inputs.textarea.minWords", { min: props.minNumberOfWords });
+            setInternalError(message);
+            props.onValidation?.(message);
+            return;
+        }
+        if (props.minLines && lineCount(value) < props.minLines) {
+            const message = props.minLinesMessage ?? t(i18n, "components.inputs.textarea.minLines", { min: props.minLines });
+            setInternalError(message);
+            props.onValidation?.(message);
+            return;
+        }
+        if (props.validation) {
+            const message = props.validation(value);
+            setInternalError(message);
+            props.onValidation?.(message ?? null);
+            return;
+        }
+        setInternalError(null);
+        props.onValidation?.(null);
+    }, [i18n, props]);
+    const handleChange = (event) => {
+        setIsFilled(event.currentTarget.value.length > 0);
+        setValueLength(event.currentTarget.value.length);
+        setHasInteracted(true);
+        runValidation(event.currentTarget.value);
+        textareaProps.onChange?.(event);
+        props.onChange?.(event.currentTarget.value);
+    };
+    const handleBlur = (event) => {
+        setIsFilled(event.currentTarget.value.length > 0);
+        if ((props.validateOnBlur ?? true) || hasInteracted) {
+            runValidation(event.currentTarget.value);
+        }
+        textareaProps.onBlur?.(event);
+        props.onExit?.();
+    };
+    const handleFocus = () => {
+        props.onEnter?.();
+    };
+    const handleClear = () => {
+        if (!textareaRef.current)
+            return;
+        textareaRef.current.value = "";
+        setIsFilled(false);
+        setValueLength(0);
+        const event = {
+            target: textareaRef.current,
+            currentTarget: textareaRef.current
+        };
+        textareaProps.onChange?.(event);
+        props.onChange?.("");
+        props.onClear?.();
+    };
+    const isDisabled = props.enabled === false || textareaProps.readOnly;
+    const canShowClear = (props.clearButton ?? true) && !isDisabled;
+    const hasSuffix = canShowClear;
+    const paddingLeft = props.prefixIcon ? "pl-10" : "px-3";
+    const paddingRight = hasSuffix ? "pr-10" : "pr-3";
+    const baseClass = "peer w-full rounded-md text-sm placeholder-transparent focus:outline-none";
+    const hasError = Boolean(props.error ?? internalError);
+    const borderClass = (props.withBorder ?? true) || hasError
+        ? hasError
+            ? "border border-[hsl(var(--destructive))] shadow-sm focus:border-[hsl(var(--destructive))] focus:ring-2 focus:ring-[hsl(var(--destructive)/0.25)]"
+            : "border border-border shadow-sm focus:border-[hsl(var(--primary))] focus:ring-2 focus:ring-[hsl(var(--primary)/0.25)]"
+        : "border border-transparent";
+    const bgClass = props.filled ? "bg-muted/40" : "bg-white";
+    const finalClass = [
+        baseClass,
+        borderClass,
+        bgClass,
+        paddingLeft,
+        paddingRight,
+        "pt-4",
+        "pb-3"
+    ].join(" ");
+    let resolvedBorderRadius;
+    if (props.borderRadius !== undefined) {
+        resolvedBorderRadius =
+            typeof props.borderRadius === "number"
+                ? `${props.borderRadius}px`
+                : props.borderRadius;
+    }
+    const resolvedHeight = props.height;
+    const textareaStyle = {
+        borderRadius: resolvedBorderRadius,
+        ...(textareaProps.style ?? {})
+    };
+    if (resolvedHeight !== undefined) {
+        textareaStyle.height =
+            typeof resolvedHeight === "number" ? `${resolvedHeight}px` : resolvedHeight;
+    }
+    return (_jsxs("div", { style: { width: props.width ?? "100%" }, children: [_jsxs("div", { className: "relative", children: [props.prefixIcon ? (_jsx("span", { className: "pointer-events-none absolute left-3 top-3 text-foreground/60", children: props.prefixIcon })) : null, _jsx("textarea", { id: props.id, placeholder: placeholder, className: props.className ?? finalClass, style: textareaStyle, maxLength: props.maxLength, rows: props.maxLines ?? 2, readOnly: props.enabled === false ? true : textareaProps.readOnly, disabled: props.enabled === false, ...textareaProps, ref: setRefs, onChange: handleChange, onBlur: handleBlur, onFocus: handleFocus }), _jsx("label", { htmlFor: props.id, className: [
+                            "absolute left-3 bg-white px-1 transition-all",
+                            isFilled ? "-top-2 text-xs" : "top-3 text-sm",
+                            hasError ? "text-[hsl(var(--destructive))]" : isFilled ? "text-[hsl(var(--primary))]" : "text-foreground/60",
+                            hasError
+                                ? "peer-focus:-top-2 peer-focus:text-xs peer-focus:text-[hsl(var(--destructive))]"
+                                : "peer-focus:-top-2 peer-focus:text-xs peer-focus:text-[hsl(var(--primary))]",
+                            props.labelClassName ?? ""
+                        ].join(" "), children: labelText }), canShowClear ? (_jsx("button", { type: "button", onClick: handleClear, className: "absolute right-2 top-3 rounded px-1 text-xs text-foreground/60 hover:text-foreground", "aria-label": t(i18n, "components.actions.clear"), children: _jsx(X, { size: 16 }) })) : null] }), _jsxs("div", { className: "mt-0 flex items-center justify-between gap-2", children: [_jsx(ErrorText, { message: props.error ?? internalError ?? undefined }), props.showCharCounter ? (_jsxs("span", { className: "text-[11px] text-foreground/50", children: [valueLength, props.maxLength ? `/${props.maxLength}` : ""] })) : null] })] }));
+}
+export function SgInputTextArea(props) {
+    const { control, name, ...rest } = props;
+    if (control && name) {
+        return (_jsx(Controller, { name: name, control: control, render: ({ field, fieldState }) => (_jsx(SgInputTextAreaBase, { ...rest, error: rest.error ?? fieldState.error?.message, textareaProps: mergeTextareaPropsWithField(rest.textareaProps, field) })) }));
+    }
+    return _jsx(SgInputTextAreaBase, { ...rest });
+}
+function wordCount(value) {
+    return value.trim().split(/\s+/).filter(Boolean).length;
+}
+function lineCount(value) {
+    return value.split("\n").length;
+}

package/dist/inputs/SgTextEditor.d.ts

@@ -0,0 +1,27 @@
+export type SgTextEditorSaveMeta = {
+    htmlDocument: string;
+    contentHtml: string;
+    cssText: string;
+};
+export type SgTextEditorProps = {
+    id: string;
+    valueHtml?: string;
+    defaultValueHtml?: string;
+    onChangeHtml?: (htmlBody: string) => void;
+    cssText?: string;
+    onCssTextChange?: (cssText: string) => void;
+    fileName?: string;
+    onSave?: (file: File, meta: SgTextEditorSaveMeta) => void;
+    onLoad?: (meta: SgTextEditorSaveMeta) => void;
+    height?: number;
+    placeholder?: string;
+    disabled?: boolean;
+    showCssEditor?: boolean;
+    cssEditorLabel?: string;
+    className?: string;
+};
+export declare function SgTextEditor(props: Readonly<SgTextEditorProps>): import("react/jsx-runtime").JSX.Element;
+export declare namespace SgTextEditor {
+    var displayName: string;
+}
+//# sourceMappingURL=SgTextEditor.d.ts.map

package/dist/inputs/SgTextEditor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SgTextEditor.d.ts","sourceRoot":"","sources":["../../src/inputs/SgTextEditor.tsx"],"names":[],"mappings":"AAgBA,MAAM,MAAM,oBAAoB,GAAG;IACjC,YAAY,EAAE,MAAM,CAAC;IACrB,WAAW,EAAE,MAAM,CAAC;IACpB,OAAO,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,EAAE,EAAE,MAAM,CAAC;IACX,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,YAAY,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAE1C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAE5C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,oBAAoB,KAAK,IAAI,CAAC;IAC1D,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,oBAAoB,KAAK,IAAI,CAAC;IAE9C,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AA2DF,wBAAgB,YAAY,CAAC,KAAK,EAAE,QAAQ,CAAC,iBAAiB,CAAC,2CAgY9D;yBAhYe,YAAY"}

package/dist/inputs/SgTextEditor.js

@@ -0,0 +1,201 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { EditorContent, useEditor } from "@tiptap/react";
+import StarterKit from "@tiptap/starter-kit";
+import Underline from "@tiptap/extension-underline";
+import Link from "@tiptap/extension-link";
+import Image from "@tiptap/extension-image";
+import TextAlign from "@tiptap/extension-text-align";
+import TextStyle from "@tiptap/extension-text-style";
+import Color from "@tiptap/extension-color";
+import Highlight from "@tiptap/extension-highlight";
+import Subscript from "@tiptap/extension-subscript";
+import Superscript from "@tiptap/extension-superscript";
+import FontFamily from "@tiptap/extension-font-family";
+function cn(...parts) {
+    return parts.filter(Boolean).join(" ");
+}
+const TextStyleWithSize = TextStyle.extend({
+    addAttributes() {
+        return {
+            fontSize: {
+                default: null,
+                parseHTML: (element) => element.style.fontSize?.replace(/["']/g, "") ?? null,
+                renderHTML: (attrs) => {
+                    if (!attrs.fontSize)
+                        return {};
+                    return { style: `font-size:${attrs.fontSize}` };
+                }
+            }
+        };
+    }
+});
+function parseHtmlDocument(html) {
+    const doc = new DOMParser().parseFromString(html, "text/html");
+    const cssText = Array.from(doc.querySelectorAll("head style"))
+        .map((s) => s.textContent ?? "")
+        .join("\n")
+        .trim();
+    const bodyHtml = (doc.body?.innerHTML ?? "").trim();
+    return { cssText, bodyHtml };
+}
+function buildFullHtmlDocument(bodyHtml, cssText) {
+    const safeCss = (cssText ?? "").trim();
+    return `<!doctype html>
+<html lang="pt-BR">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width,initial-scale=1" />
+  ${safeCss ? `<style>\n${safeCss}\n</style>` : ""}
+</head>
+<body>
+${bodyHtml ?? ""}
+</body>
+</html>`;
+}
+function toFile(fullHtml, fileName) {
+    return new File([fullHtml], fileName, { type: "text/html;charset=utf-8" });
+}
+function canRun(editor, fn) {
+    if (!editor)
+        return false;
+    try {
+        return fn(editor);
+    }
+    catch {
+        return false;
+    }
+}
+export function SgTextEditor(props) {
+    const { id, valueHtml, defaultValueHtml, onChangeHtml, cssText = "", onCssTextChange, fileName, onSave, onLoad, height = 320, placeholder = "Type here...", disabled, showCssEditor = false, cssEditorLabel = "Embedded CSS", className } = props;
+    const isControlled = typeof valueHtml === "string";
+    const editor = useEditor({
+        editable: !disabled,
+        extensions: [
+            StarterKit.configure({ codeBlock: {} }),
+            Underline,
+            Link.configure({ openOnClick: false, autolink: true, linkOnPaste: true }),
+            Image.configure({ inline: false }),
+            TextStyleWithSize,
+            FontFamily,
+            Color,
+            Highlight.configure({ multicolor: true }),
+            Subscript,
+            Superscript,
+            TextAlign.configure({ types: ["heading", "paragraph"] })
+        ],
+        content: isControlled ? valueHtml : (defaultValueHtml ?? ""),
+        editorProps: {
+            attributes: {
+                id,
+                "aria-label": id,
+                class: cn("prose max-w-none focus:outline-none min-h-[120px]", disabled ? "opacity-60" : ""),
+                "data-placeholder": placeholder
+            }
+        },
+        onUpdate: ({ editor }) => {
+            onChangeHtml?.(editor.getHTML());
+        }
+    });
+    React.useEffect(() => {
+        if (!editor)
+            return;
+        if (!isControlled)
+            return;
+        const current = editor.getHTML();
+        if (current !== valueHtml)
+            editor.commands.setContent(valueHtml ?? "", false);
+    }, [editor, isControlled, valueHtml]);
+    const doSave = React.useCallback(() => {
+        if (!editor)
+            return;
+        const contentHtml = editor.getHTML();
+        const htmlDocument = buildFullHtmlDocument(contentHtml, cssText);
+        const f = toFile(htmlDocument, fileName ?? `${id}.html`);
+        onSave?.(f, { htmlDocument, contentHtml, cssText });
+    }, [editor, cssText, fileName, id, onSave]);
+    const loadFromHtmlString = React.useCallback((htmlDoc) => {
+        if (!editor)
+            return;
+        const parsed = parseHtmlDocument(htmlDoc);
+        if (parsed.cssText && parsed.cssText !== cssText) {
+            onCssTextChange?.(parsed.cssText);
+        }
+        editor.commands.setContent(parsed.bodyHtml || "", false);
+        onLoad?.({ htmlDocument: htmlDoc, contentHtml: parsed.bodyHtml, cssText: parsed.cssText });
+    }, [editor, cssText, onCssTextChange, onLoad]);
+    const loadFromHtmlFile = React.useCallback(async (file) => {
+        const text = await file.text();
+        loadFromHtmlString(text);
+    }, [loadFromHtmlString]);
+    const exec = (fn) => {
+        if (!editor)
+            return;
+        editor.chain().focus();
+        fn();
+    };
+    const active = (name, attrs) => !!editor?.isActive(name, attrs);
+    return (_jsxs("div", { className: cn("w-full", className), children: [_jsxs("div", { className: "flex flex-wrap items-center gap-2 rounded-t-lg border border-b-0 bg-background p-2", children: [_jsxs("select", { className: "h-9 rounded-md border px-2 text-sm bg-background", disabled: !editor || disabled, value: active("heading", { level: 1 })
+                            ? "h1"
+                            : active("heading", { level: 2 })
+                                ? "h2"
+                                : active("heading", { level: 3 })
+                                    ? "h3"
+                                    : "p", onChange: (e) => {
+                            const v = e.target.value;
+                            if (!editor)
+                                return;
+                            editor.chain().focus();
+                            if (v === "p")
+                                editor.commands.setParagraph();
+                            if (v === "h1")
+                                editor.commands.toggleHeading({ level: 1 });
+                            if (v === "h2")
+                                editor.commands.toggleHeading({ level: 2 });
+                            if (v === "h3")
+                                editor.commands.toggleHeading({ level: 3 });
+                        }, children: [_jsx("option", { value: "h1", children: "Heading" }), _jsx("option", { value: "h2", children: "Subheading" }), _jsx("option", { value: "p", children: "Normal" }), _jsx("option", { value: "h3", children: "Heading 3" })] }), _jsxs("select", { className: "h-9 rounded-md border px-2 text-sm bg-background", disabled: !editor || disabled, onChange: (e) => {
+                            const v = e.target.value;
+                            if (!editor)
+                                return;
+                            editor.chain().focus().setFontFamily(v).run();
+                        }, defaultValue: "inherit", children: [_jsx("option", { value: "inherit", children: "Default" }), _jsx("option", { value: "Arial", children: "Arial" }), _jsx("option", { value: "Georgia", children: "Georgia" }), _jsx("option", { value: "Times New Roman", children: "Times" }), _jsx("option", { value: "Courier New", children: "Courier" })] }), _jsxs("select", { className: "h-9 rounded-md border px-2 text-sm bg-background", disabled: !editor || disabled, defaultValue: "16px", onChange: (e) => {
+                            const size = e.target.value;
+                            if (!editor)
+                                return;
+                            editor.chain().focus().setMark("textStyle", { fontSize: size }).run();
+                        }, children: [_jsx("option", { value: "12px", children: "12" }), _jsx("option", { value: "14px", children: "14" }), _jsx("option", { value: "16px", children: "16" }), _jsx("option", { value: "18px", children: "18" }), _jsx("option", { value: "24px", children: "24" }), _jsx("option", { value: "32px", children: "32" })] }), _jsx("div", { className: "mx-1 h-6 w-px bg-border" }), _jsx(ToolbarButton, { label: "Bold", text: "B", active: active("bold"), disabled: !canRun(editor, (ed) => ed.can().chain().focus().toggleBold().run()) || !!disabled, onClick: () => exec(() => editor.chain().toggleBold().run()) }), _jsx(ToolbarButton, { label: "Italic", text: "I", active: active("italic"), disabled: !canRun(editor, (ed) => ed.can().chain().focus().toggleItalic().run()) || !!disabled, onClick: () => exec(() => editor.chain().toggleItalic().run()) }), _jsx(ToolbarButton, { label: "Underline", text: "U", active: active("underline"), disabled: !canRun(editor, (ed) => ed.can().chain().focus().toggleUnderline().run()) || !!disabled, onClick: () => exec(() => editor.chain().toggleUnderline().run()) }), _jsx(ToolbarButton, { label: "Strike", text: "S", active: active("strike"), disabled: !canRun(editor, (ed) => ed.can().chain().focus().toggleStrike().run()) || !!disabled, onClick: () => exec(() => editor.chain().toggleStrike().run()) }), _jsx("div", { className: "mx-1 h-6 w-px bg-border" }), _jsxs("label", { className: "flex items-center gap-2 text-sm", children: [_jsx("span", { className: "text-muted-foreground", children: "A" }), _jsx("input", { type: "color", disabled: !editor || disabled, onChange: (e) => editor?.chain().focus().setColor(e.target.value).run(), className: "h-8 w-10 cursor-pointer", "aria-label": "Text color" })] }), _jsxs("label", { className: "flex items-center gap-2 text-sm", children: [_jsx("span", { className: "text-muted-foreground", children: "H" }), _jsx("input", { type: "color", disabled: !editor || disabled, onChange: (e) => editor?.chain().focus().toggleHighlight({ color: e.target.value }).run(), className: "h-8 w-10 cursor-pointer", "aria-label": "Highlight color" })] }), _jsx("div", { className: "mx-1 h-6 w-px bg-border" }), _jsx(ToolbarButton, { label: "Subscript", text: "x2", active: active("subscript"), disabled: !editor || !!disabled, onClick: () => exec(() => editor.chain().toggleSubscript().run()) }), _jsx(ToolbarButton, { label: "Superscript", text: "x^", active: active("superscript"), disabled: !editor || !!disabled, onClick: () => exec(() => editor.chain().toggleSuperscript().run()) }), _jsx("div", { className: "mx-1 h-6 w-px bg-border" }), _jsx(ToolbarButton, { label: "Bullets", text: "\u2022", active: active("bulletList"), disabled: !editor || !!disabled, onClick: () => exec(() => editor.chain().toggleBulletList().run()) }), _jsx(ToolbarButton, { label: "Numbered", text: "1.", active: active("orderedList"), disabled: !editor || !!disabled, onClick: () => exec(() => editor.chain().toggleOrderedList().run()) }), _jsx(ToolbarButton, { label: "Outdent", text: "<", active: false, disabled: !editor || !!disabled, onClick: () => exec(() => editor.chain().liftListItem("listItem").run()) }), _jsx(ToolbarButton, { label: "Indent", text: ">", active: false, disabled: !editor || !!disabled, onClick: () => exec(() => editor.chain().sinkListItem("listItem").run()) }), _jsx("div", { className: "mx-1 h-6 w-px bg-border" }), _jsx(ToolbarButton, { label: "Align left", text: "L", active: active("paragraph", { textAlign: "left" }) || active("heading", { textAlign: "left" }), disabled: !editor || !!disabled, onClick: () => exec(() => editor.chain().setTextAlign("left").run()) }), _jsx(ToolbarButton, { label: "Align center", text: "C", active: active("paragraph", { textAlign: "center" }) || active("heading", { textAlign: "center" }), disabled: !editor || !!disabled, onClick: () => exec(() => editor.chain().setTextAlign("center").run()) }), _jsx(ToolbarButton, { label: "Align right", text: "R", active: active("paragraph", { textAlign: "right" }) || active("heading", { textAlign: "right" }), disabled: !editor || !!disabled, onClick: () => exec(() => editor.chain().setTextAlign("right").run()) }), _jsx(ToolbarButton, { label: "Justify", text: "J", active: active("paragraph", { textAlign: "justify" }) || active("heading", { textAlign: "justify" }), disabled: !editor || !!disabled, onClick: () => exec(() => editor.chain().setTextAlign("justify").run()) }), _jsx("div", { className: "mx-1 h-6 w-px bg-border" }), _jsx(ToolbarButton, { label: "Link", text: "Link", active: active("link"), disabled: !editor || !!disabled, onClick: () => {
+                            if (!editor)
+                                return;
+                            const prev = editor.getAttributes("link").href;
+                            const url = window.prompt("URL", prev ?? "https://");
+                            if (!url) {
+                                editor.chain().focus().unsetLink().run();
+                                return;
+                            }
+                            editor.chain().focus().setLink({ href: url }).run();
+                        } }), _jsx(ToolbarButton, { label: "Image", text: "Img", active: false, disabled: !editor || !!disabled, onClick: () => {
+                            if (!editor)
+                                return;
+                            const src = window.prompt("Image URL");
+                            if (!src)
+                                return;
+                            editor.chain().focus().setImage({ src }).run();
+                        } }), _jsx("div", { className: "mx-1 h-6 w-px bg-border" }), _jsx(ToolbarButton, { label: "Clear", text: "X", active: false, disabled: !editor || !!disabled, onClick: () => {
+                            if (!editor)
+                                return;
+                            editor.chain().focus().unsetAllMarks().clearNodes().run();
+                        } }), _jsxs("div", { className: "ml-auto flex items-center gap-2", children: [_jsx("button", { type: "button", className: "h-9 rounded-md border bg-muted px-3 text-sm hover:bg-muted/80 disabled:opacity-50", disabled: !editor || !!disabled, onClick: doSave, children: "Save" }), _jsxs("label", { className: "h-9 cursor-pointer rounded-md border bg-muted px-3 text-sm leading-9 hover:bg-muted/80", children: ["Load HTML", _jsx("input", { type: "file", accept: "text/html,.html", className: "hidden", onChange: (e) => {
+                                            const f = e.target.files?.[0];
+                                            if (!f)
+                                                return;
+                                            void loadFromHtmlFile(f);
+                                            e.currentTarget.value = "";
+                                        } })] })] })] }), _jsx("div", { className: "rounded-b-lg border bg-background", style: { height }, children: _jsx("div", { className: "h-full overflow-auto p-3", children: _jsx(EditorContent, { editor: editor }) }) }), showCssEditor ? (_jsxs("div", { className: "mt-3", children: [_jsx("label", { className: "mb-1 block text-sm font-medium text-foreground", children: cssEditorLabel }), _jsx("textarea", { value: cssText, onChange: (e) => onCssTextChange?.(e.target.value), className: "min-h-[160px] w-full rounded-lg border p-2 font-mono text-xs" }), _jsx("p", { className: "mt-1 text-xs text-muted-foreground", children: "CSS is embedded inside the saved HTML document." })] })) : null] }));
+}
+function ToolbarButton(props) {
+    const { label, text, active, disabled, onClick } = props;
+    return (_jsx("button", { type: "button", title: label, "aria-label": label, disabled: disabled, onClick: onClick, className: cn("h-9 min-w-9 rounded-md border px-2 text-sm", "hover:bg-muted/80 disabled:opacity-50", active ? "bg-muted" : "bg-background"), children: text }));
+}
+SgTextEditor.displayName = "SgTextEditor";

package/dist/integration/module.d.ts

@@ -0,0 +1,39 @@
+import type React from "react";
+export type SeedGridModuleId = string;
+export type SeedGridProvider = React.ComponentType<{
+    children: React.ReactNode;
+}>;
+export type SeedGridNavItem = {
+    id: string;
+    labelKey: string;
+    href: string;
+    icon?: string;
+    requiresAuth?: boolean;
+    order?: number;
+};
+export type SeedGridRoute = {
+    id: string;
+    path: string;
+    requiresAuth?: boolean;
+};
+export type SeedGridI18nBundle = {
+    namespace: string;
+    resources: Record<string, string>;
+    distPath?: string;
+};
+export type SeedGridRegistry = {
+    addProvider: (provider: SeedGridProvider) => void;
+    addNavItem: (item: SeedGridNavItem) => void;
+    addRoute: (route: SeedGridRoute) => void;
+};
+export type SeedGridModuleManifest = {
+    id: SeedGridModuleId;
+    name: string;
+    version: string;
+    i18n?: {
+        defaultLocale: "pt-BR";
+        bundles: SeedGridI18nBundle[];
+    };
+    register: (registry: SeedGridRegistry) => void;
+};
+//# sourceMappingURL=module.d.ts.map

package/dist/integration/module.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"module.d.ts","sourceRoot":"","sources":["../../src/integration/module.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,MAAM,gBAAgB,GAAG,MAAM,CAAC;AAEtC,MAAM,MAAM,gBAAgB,GAAG,KAAK,CAAC,aAAa,CAAC;IACjD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC,CAAC;AAEH,MAAM,MAAM,eAAe,GAAG;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG;IAC1B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAClC,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,WAAW,EAAE,CAAC,QAAQ,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAClD,UAAU,EAAE,CAAC,IAAI,EAAE,eAAe,KAAK,IAAI,CAAC;IAC5C,QAAQ,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;CAC1C,CAAC;AAEF,MAAM,MAAM,sBAAsB,GAAG;IACnC,EAAE,EAAE,gBAAgB,CAAC;IACrB,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE;QACL,aAAa,EAAE,OAAO,CAAC;QACvB,OAAO,EAAE,kBAAkB,EAAE,CAAC;KAC/B,CAAC;IACF,QAAQ,EAAE,CAAC,QAAQ,EAAE,gBAAgB,KAAK,IAAI,CAAC;CAChD,CAAC"}

package/dist/integration/module.js

@@ -0,0 +1 @@
+export {};

package/dist/layout/GroupBox.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+export type SgGroupBoxProps = {
+    title: string;
+    height?: number | string;
+    width?: number | string;
+    children: React.ReactNode;
+    className?: string;
+};
+export declare function SgGroupBox(props: SgGroupBoxProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=GroupBox.d.ts.map

package/dist/layout/GroupBox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GroupBox.d.ts","sourceRoot":"","sources":["../../src/layout/GroupBox.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,MAAM,eAAe,GAAG;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAOF,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,2CAmBhD"}

package/dist/layout/GroupBox.js

@@ -0,0 +1,14 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+function toCssSize(value) {
+    if (value === undefined || value === null)
+        return undefined;
+    return typeof value === "number" ? `${value}px` : value;
+}
+export function SgGroupBox(props) {
+    const { title, height, width, children, className } = props;
+    return (_jsx("div", { className: className, style: {
+            width: toCssSize(width) ?? "100%",
+            height: toCssSize(height)
+        }, children: _jsxs("fieldset", { className: "relative rounded-lg border border-border bg-white px-4 pb-4 pt-5", children: [_jsx("legend", { className: "px-2 text-xs font-semibold uppercase tracking-wider text-foreground/70", children: title }), _jsx("div", { children: children })] }) }));
+}

package/dist/layout/SgCard.d.ts

@@ -0,0 +1,35 @@
+import * as React from "react";
+export type SgCardVariant = "default" | "outlined" | "flat" | "elevated";
+export type SgCardSize = "sm" | "md" | "lg";
+export type SgCardProps = Omit<React.HTMLAttributes<HTMLElement>, "title" | "onClick"> & {
+    className?: string;
+    headerClassName?: string;
+    bodyClassName?: string;
+    footerClassName?: string;
+    variant?: SgCardVariant;
+    size?: SgCardSize;
+    leading?: React.ReactNode;
+    trailing?: React.ReactNode;
+    trailer?: React.ReactNode;
+    title?: React.ReactNode;
+    description?: React.ReactNode;
+    actions?: React.ReactNode;
+    header?: React.ReactNode;
+    footer?: React.ReactNode;
+    clickable?: boolean;
+    disabled?: boolean;
+    collapsible?: boolean;
+    defaultOpen?: boolean;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    collapseIcon?: React.ReactNode;
+    collapseToggleAlign?: "left" | "right";
+    toggleOnHeaderClick?: boolean;
+    onClick?: React.MouseEventHandler<HTMLElement>;
+    children?: React.ReactNode;
+};
+export declare function SgCard(props: Readonly<SgCardProps>): import("react/jsx-runtime").JSX.Element;
+export declare namespace SgCard {
+    var displayName: string;
+}
+//# sourceMappingURL=SgCard.d.ts.map

package/dist/layout/SgCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SgCard.d.ts","sourceRoot":"","sources":["../../src/layout/SgCard.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,UAAU,GAAG,MAAM,GAAG,UAAU,CAAC;AACzE,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE5C,MAAM,MAAM,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC,GAAG;IACvF,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,IAAI,CAAC,EAAE,UAAU,CAAC;IAElB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE1B,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEzB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,mBAAmB,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACvC,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAE9B,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,WAAW,CAAC,CAAC;IAC/C,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;AA0BF,wBAAgB,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,WAAW,CAAC,2CA4OlD;yBA5Oe,MAAM"}