@etus/ui 0.4.0-beta.2 → 0.4.0-beta.4

package/dist/chunk-6XY7QYVR.js

@@ -0,0 +1,812 @@
+import { Toggle } from './chunk-3WOGOTOV.js';
+import { Divider } from './chunk-3L5G7VI2.js';
+import { cn } from './chunk-HRNDJU7D.js';
+import Highlight from '@tiptap/extension-highlight';
+import Image from '@tiptap/extension-image';
+import Link from '@tiptap/extension-link';
+import Placeholder from '@tiptap/extension-placeholder';
+import { Table } from '@tiptap/extension-table';
+import { TableCell } from '@tiptap/extension-table-cell';
+import { TableHeader } from '@tiptap/extension-table-header';
+import { TableRow } from '@tiptap/extension-table-row';
+import TaskItem from '@tiptap/extension-task-item';
+import TaskList from '@tiptap/extension-task-list';
+import TextAlign from '@tiptap/extension-text-align';
+import Underline from '@tiptap/extension-underline';
+import { useEditor, EditorContent } from '@tiptap/react';
+import { BubbleMenu, FloatingMenu } from '@tiptap/react/menus';
+import StarterKit from '@tiptap/starter-kit';
+import { UndoIcon, RedoIcon, BoldIcon, ItalicIcon, UnderlineIcon, StrikethroughIcon, CodeIcon, HighlighterIcon, Heading1Icon, Heading2Icon, Heading3Icon, ListIcon, ListOrderedIcon, ListTodoIcon, AlignLeftIcon, AlignCenterIcon, AlignRightIcon, QuoteIcon, MinusIcon, LinkIcon, ImageIcon, TableIcon } from 'lucide-react';
+import * as React from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { cva } from 'class-variance-authority';
+
+function requestPromptValue(promptMessage, promptForValue, currentValue) {
+  if (promptForValue) {
+    return promptForValue(currentValue);
+  }
+  if (typeof window === "undefined") {
+    return null;
+  }
+  return window.prompt(promptMessage, currentValue);
+}
+function RichTextToolbar({
+  className,
+  editor,
+  promptForImage,
+  promptForLink
+}) {
+  const addLink = React.useCallback(() => {
+    if (!editor) return;
+    const previousUrl = editor.getAttributes("link")["href"];
+    const url = requestPromptValue("URL", promptForLink, previousUrl);
+    if (url === null) return;
+    if (url === "") {
+      editor.chain().focus().extendMarkRange("link").unsetLink().run();
+      return;
+    }
+    editor.chain().focus().extendMarkRange("link").setLink({ href: url }).run();
+  }, [editor, promptForLink]);
+  const addImage = React.useCallback(() => {
+    if (!editor) return;
+    const url = requestPromptValue("Image URL", promptForImage);
+    if (url) {
+      editor.chain().focus().setImage({ src: url }).run();
+    }
+  }, [editor, promptForImage]);
+  const insertTable = React.useCallback(() => {
+    if (!editor) return;
+    editor.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run();
+  }, [editor]);
+  if (!editor) return null;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "bg-muted flex flex-wrap items-center gap-1 rounded-t-md border-b p-1 overflow-x-auto sm:overflow-visible",
+        className
+      ),
+      "aria-label": "Text formatting",
+      "data-slot": "rich-text-toolbar",
+      role: "toolbar",
+      children: [
+        /* @__PURE__ */ jsx(
+          Toggle,
+          {
+            "aria-label": "Undo",
+            disabled: !editor.can().undo(),
+            pressed: false,
+            size: "sm",
+            onPressedChange: () => editor.chain().focus().undo().run(),
+            children: /* @__PURE__ */ jsx(UndoIcon, { className: "size-4" })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Toggle,
+          {
+            "aria-label": "Redo",
+            disabled: !editor.can().redo(),
+            pressed: false,
+            size: "sm",
+            onPressedChange: () => editor.chain().focus().redo().run(),
+            children: /* @__PURE__ */ jsx(RedoIcon, { className: "size-4" })
+          }
+        ),
+        /* @__PURE__ */ jsx(Divider, { className: "mx-1 h-6", orientation: "vertical" }),
+        /* @__PURE__ */ jsx(
+          Toggle,
+          {
+            "aria-label": "Bold",
+            pressed: editor.isActive("bold"),
+            size: "sm",
+            onPressedChange: () => editor.chain().focus().toggleBold().run(),
+            children: /* @__PURE__ */ jsx(BoldIcon, { className: "size-4" })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Toggle,
+          {
+            "aria-label": "Italic",
+            pressed: editor.isActive("italic"),
+            size: "sm",
+            onPressedChange: () => editor.chain().focus().toggleItalic().run(),
+            children: /* @__PURE__ */ jsx(ItalicIcon, { className: "size-4" })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Toggle,
+          {
+            "aria-label": "Underline",
+            pressed: editor.isActive("underline"),
+            size: "sm",
+            onPressedChange: () => editor.chain().focus().toggleUnderline().run(),
+            children: /* @__PURE__ */ jsx(UnderlineIcon, { className: "size-4" })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Toggle,
+          {
+            "aria-label": "Strikethrough",
+            pressed: editor.isActive("strike"),
+            size: "sm",
+            onPressedChange: () => editor.chain().focus().toggleStrike().run(),
+            children: /* @__PURE__ */ jsx(StrikethroughIcon, { className: "size-4" })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Toggle,
+          {
+            "aria-label": "Inline code",
+            pressed: editor.isActive("code"),
+            size: "sm",
+            onPressedChange: () => editor.chain().focus().toggleCode().run(),
+            children: /* @__PURE__ */ jsx(CodeIcon, { className: "size-4" })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Toggle,
+          {
+            "aria-label": "Highlight",
+            pressed: editor.isActive("highlight"),
+            size: "sm",
+            onPressedChange: () => editor.chain().focus().toggleHighlight().run(),
+            children: /* @__PURE__ */ jsx(HighlighterIcon, { className: "size-4" })
+          }
+        ),
+        /* @__PURE__ */ jsx(Divider, { className: "mx-1 h-6", orientation: "vertical" }),
+        /* @__PURE__ */ jsx(
+          Toggle,
+          {
+            "aria-label": "Heading 1",
+            pressed: editor.isActive("heading", { level: 1 }),
+            size: "sm",
+            onPressedChange: () => editor.chain().focus().toggleHeading({ level: 1 }).run(),
+            children: /* @__PURE__ */ jsx(Heading1Icon, { className: "size-4" })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Toggle,
+          {
+            "aria-label": "Heading 2",
+            pressed: editor.isActive("heading", { level: 2 }),
+            size: "sm",
+            onPressedChange: () => editor.chain().focus().toggleHeading({ level: 2 }).run(),
+            children: /* @__PURE__ */ jsx(Heading2Icon, { className: "size-4" })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Toggle,
+          {
+            "aria-label": "Heading 3",
+            pressed: editor.isActive("heading", { level: 3 }),
+            size: "sm",
+            onPressedChange: () => editor.chain().focus().toggleHeading({ level: 3 }).run(),
+            children: /* @__PURE__ */ jsx(Heading3Icon, { className: "size-4" })
+          }
+        ),
+        /* @__PURE__ */ jsx(Divider, { className: "mx-1 h-6", orientation: "vertical" }),
+        /* @__PURE__ */ jsx(
+          Toggle,
+          {
+            "aria-label": "Bullet list",
+            pressed: editor.isActive("bulletList"),
+            size: "sm",
+            onPressedChange: () => editor.chain().focus().toggleBulletList().run(),
+            children: /* @__PURE__ */ jsx(ListIcon, { className: "size-4" })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Toggle,
+          {
+            "aria-label": "Ordered list",
+            pressed: editor.isActive("orderedList"),
+            size: "sm",
+            onPressedChange: () => editor.chain().focus().toggleOrderedList().run(),
+            children: /* @__PURE__ */ jsx(ListOrderedIcon, { className: "size-4" })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Toggle,
+          {
+            "aria-label": "Task list",
+            pressed: editor.isActive("taskList"),
+            size: "sm",
+            onPressedChange: () => editor.chain().focus().toggleTaskList().run(),
+            children: /* @__PURE__ */ jsx(ListTodoIcon, { className: "size-4" })
+          }
+        ),
+        /* @__PURE__ */ jsx(Divider, { className: "mx-1 h-6", orientation: "vertical" }),
+        /* @__PURE__ */ jsx(
+          Toggle,
+          {
+            "aria-label": "Align left",
+            pressed: editor.isActive({ textAlign: "left" }),
+            size: "sm",
+            onPressedChange: () => editor.chain().focus().setTextAlign("left").run(),
+            children: /* @__PURE__ */ jsx(AlignLeftIcon, { className: "size-4" })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Toggle,
+          {
+            "aria-label": "Align center",
+            pressed: editor.isActive({ textAlign: "center" }),
+            size: "sm",
+            onPressedChange: () => editor.chain().focus().setTextAlign("center").run(),
+            children: /* @__PURE__ */ jsx(AlignCenterIcon, { className: "size-4" })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Toggle,
+          {
+            "aria-label": "Align right",
+            pressed: editor.isActive({ textAlign: "right" }),
+            size: "sm",
+            onPressedChange: () => editor.chain().focus().setTextAlign("right").run(),
+            children: /* @__PURE__ */ jsx(AlignRightIcon, { className: "size-4" })
+          }
+        ),
+        /* @__PURE__ */ jsx(Divider, { className: "mx-1 h-6", orientation: "vertical" }),
+        /* @__PURE__ */ jsx(
+          Toggle,
+          {
+            "aria-label": "Blockquote",
+            pressed: editor.isActive("blockquote"),
+            size: "sm",
+            onPressedChange: () => editor.chain().focus().toggleBlockquote().run(),
+            children: /* @__PURE__ */ jsx(QuoteIcon, { className: "size-4" })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Toggle,
+          {
+            "aria-label": "Horizontal rule",
+            pressed: false,
+            size: "sm",
+            onPressedChange: () => editor.chain().focus().setHorizontalRule().run(),
+            children: /* @__PURE__ */ jsx(MinusIcon, { className: "size-4" })
+          }
+        ),
+        /* @__PURE__ */ jsx(Divider, { className: "mx-1 h-6", orientation: "vertical" }),
+        /* @__PURE__ */ jsx(
+          Toggle,
+          {
+            "aria-label": "Insert link",
+            pressed: editor.isActive("link"),
+            size: "sm",
+            onPressedChange: addLink,
+            children: /* @__PURE__ */ jsx(LinkIcon, { className: "size-4" })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Toggle,
+          {
+            "aria-label": "Insert image",
+            pressed: false,
+            size: "sm",
+            onPressedChange: addImage,
+            children: /* @__PURE__ */ jsx(ImageIcon, { className: "size-4" })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Toggle,
+          {
+            "aria-label": "Insert table",
+            pressed: false,
+            size: "sm",
+            onPressedChange: insertTable,
+            children: /* @__PURE__ */ jsx(TableIcon, { className: "size-4" })
+          }
+        )
+      ]
+    }
+  );
+}
+function RichTextBubbleMenuContent({
+  className,
+  editor,
+  promptForLink
+}) {
+  const addLink = React.useCallback(() => {
+    if (!editor) return;
+    const previousUrl = editor.getAttributes("link")["href"];
+    const url = requestPromptValue("URL", promptForLink, previousUrl);
+    if (url === null) return;
+    if (url === "") {
+      editor.chain().focus().extendMarkRange("link").unsetLink().run();
+      return;
+    }
+    editor.chain().focus().extendMarkRange("link").setLink({ href: url }).run();
+  }, [editor, promptForLink]);
+  if (!editor) return null;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "bg-popover text-popover-foreground flex items-center gap-0.5 rounded-md border p-1 shadow-md",
+        className
+      ),
+      "aria-label": "Selection formatting",
+      "data-slot": "rich-text-bubble-menu",
+      role: "toolbar",
+      children: [
+        /* @__PURE__ */ jsx(
+          Toggle,
+          {
+            "aria-label": "Bold",
+            pressed: editor.isActive("bold"),
+            size: "sm",
+            onPressedChange: () => editor.chain().focus().toggleBold().run(),
+            children: /* @__PURE__ */ jsx(BoldIcon, { className: "size-4" })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Toggle,
+          {
+            "aria-label": "Italic",
+            pressed: editor.isActive("italic"),
+            size: "sm",
+            onPressedChange: () => editor.chain().focus().toggleItalic().run(),
+            children: /* @__PURE__ */ jsx(ItalicIcon, { className: "size-4" })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Toggle,
+          {
+            "aria-label": "Underline",
+            pressed: editor.isActive("underline"),
+            size: "sm",
+            onPressedChange: () => editor.chain().focus().toggleUnderline().run(),
+            children: /* @__PURE__ */ jsx(UnderlineIcon, { className: "size-4" })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Toggle,
+          {
+            "aria-label": "Strikethrough",
+            pressed: editor.isActive("strike"),
+            size: "sm",
+            onPressedChange: () => editor.chain().focus().toggleStrike().run(),
+            children: /* @__PURE__ */ jsx(StrikethroughIcon, { className: "size-4" })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Toggle,
+          {
+            "aria-label": "Inline code",
+            pressed: editor.isActive("code"),
+            size: "sm",
+            onPressedChange: () => editor.chain().focus().toggleCode().run(),
+            children: /* @__PURE__ */ jsx(CodeIcon, { className: "size-4" })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Toggle,
+          {
+            "aria-label": "Highlight",
+            pressed: editor.isActive("highlight"),
+            size: "sm",
+            onPressedChange: () => editor.chain().focus().toggleHighlight().run(),
+            children: /* @__PURE__ */ jsx(HighlighterIcon, { className: "size-4" })
+          }
+        ),
+        /* @__PURE__ */ jsx(Divider, { className: "mx-1 h-4", orientation: "vertical" }),
+        /* @__PURE__ */ jsx(
+          Toggle,
+          {
+            "aria-label": "Insert link",
+            pressed: editor.isActive("link"),
+            size: "sm",
+            onPressedChange: addLink,
+            children: /* @__PURE__ */ jsx(LinkIcon, { className: "size-4" })
+          }
+        )
+      ]
+    }
+  );
+}
+function RichTextFloatingMenuContent({ className, editor }) {
+  if (!editor) return null;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "bg-popover text-popover-foreground flex items-center gap-0.5 rounded-md border p-1 shadow-md",
+        className
+      ),
+      "aria-label": "Block formatting",
+      "data-slot": "rich-text-floating-menu",
+      role: "toolbar",
+      children: [
+        /* @__PURE__ */ jsx(
+          Toggle,
+          {
+            "aria-label": "Heading 1",
+            pressed: editor.isActive("heading", { level: 1 }),
+            size: "sm",
+            onPressedChange: () => editor.chain().focus().toggleHeading({ level: 1 }).run(),
+            children: /* @__PURE__ */ jsx(Heading1Icon, { className: "size-4" })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Toggle,
+          {
+            "aria-label": "Heading 2",
+            pressed: editor.isActive("heading", { level: 2 }),
+            size: "sm",
+            onPressedChange: () => editor.chain().focus().toggleHeading({ level: 2 }).run(),
+            children: /* @__PURE__ */ jsx(Heading2Icon, { className: "size-4" })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Toggle,
+          {
+            "aria-label": "Bullet list",
+            pressed: editor.isActive("bulletList"),
+            size: "sm",
+            onPressedChange: () => editor.chain().focus().toggleBulletList().run(),
+            children: /* @__PURE__ */ jsx(ListIcon, { className: "size-4" })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Toggle,
+          {
+            "aria-label": "Ordered list",
+            pressed: editor.isActive("orderedList"),
+            size: "sm",
+            onPressedChange: () => editor.chain().focus().toggleOrderedList().run(),
+            children: /* @__PURE__ */ jsx(ListOrderedIcon, { className: "size-4" })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Toggle,
+          {
+            "aria-label": "Task list",
+            pressed: editor.isActive("taskList"),
+            size: "sm",
+            onPressedChange: () => editor.chain().focus().toggleTaskList().run(),
+            children: /* @__PURE__ */ jsx(ListTodoIcon, { className: "size-4" })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Toggle,
+          {
+            "aria-label": "Blockquote",
+            pressed: editor.isActive("blockquote"),
+            size: "sm",
+            onPressedChange: () => editor.chain().focus().toggleBlockquote().run(),
+            children: /* @__PURE__ */ jsx(QuoteIcon, { className: "size-4" })
+          }
+        )
+      ]
+    }
+  );
+}
+function RichTextEditor({
+  "aria-label": ariaLabel = "Rich text editor",
+  autofocus = false,
+  className,
+  content,
+  defaultContent,
+  editable = true,
+  extensions = [],
+  onBlur,
+  onChange,
+  onFocus,
+  onUpdate,
+  placeholder = "Start writing...",
+  promptForImage,
+  promptForLink,
+  ref,
+  showBubbleMenu = true,
+  showFloatingMenu = false,
+  showToolbar = true,
+  toolbarPosition = "top",
+  ...props
+}) {
+  const editor = useEditor({
+    autofocus,
+    content: content ?? defaultContent ?? "",
+    editable,
+    editorProps: {
+      attributes: {
+        "aria-label": ariaLabel,
+        role: "textbox"
+      }
+    },
+    extensions: [
+      StarterKit.configure({
+        heading: {
+          levels: [1, 2, 3, 4, 5, 6]
+        },
+        link: false,
+        underline: false
+      }),
+      Placeholder.configure({
+        placeholder
+      }),
+      Link.configure({
+        HTMLAttributes: {
+          class: "text-primary underline underline-offset-4 cursor-pointer"
+        },
+        openOnClick: false
+      }),
+      Image.configure({
+        HTMLAttributes: {
+          class: "max-w-full h-auto rounded-md"
+        }
+      }),
+      Underline,
+      TextAlign.configure({
+        types: ["heading", "paragraph"]
+      }),
+      Highlight.configure({
+        HTMLAttributes: {
+          class: "bg-yellow-200 dark:bg-yellow-800"
+        },
+        multicolor: false
+      }),
+      TaskList,
+      TaskItem.configure({
+        nested: true
+      }),
+      Table.configure({
+        HTMLAttributes: {
+          class: "border-collapse table-auto w-full"
+        },
+        resizable: true
+      }),
+      TableRow,
+      TableCell.configure({
+        HTMLAttributes: {
+          class: "border border-border p-2"
+        }
+      }),
+      TableHeader.configure({
+        HTMLAttributes: {
+          class: "border border-border p-2 bg-muted font-semibold"
+        }
+      }),
+      ...extensions
+    ],
+    onBlur: ({ editor: currentEditor }) => {
+      onBlur?.({ editor: currentEditor });
+    },
+    onFocus: ({ editor: currentEditor }) => {
+      onFocus?.({ editor: currentEditor });
+    },
+    onUpdate: ({ editor: currentEditor }) => {
+      onChange?.(currentEditor.getJSON());
+      onUpdate?.({ editor: currentEditor });
+    }
+  });
+  React.useEffect(() => {
+    if (editor && content !== void 0) {
+      const currentContent = editor.getJSON();
+      const newContent = typeof content === "string" ? content : JSON.stringify(content);
+      const currentContentStr = JSON.stringify(currentContent);
+      if (newContent !== currentContentStr) {
+        editor.commands.setContent(content);
+      }
+    }
+  }, [editor, content]);
+  React.useEffect(() => {
+    if (editor) {
+      editor.setEditable(editable);
+    }
+  }, [editor, editable]);
+  React.useImperativeHandle(ref, () => ({
+    blur: () => {
+      editor?.commands.blur();
+    },
+    editor,
+    focus: () => {
+      editor?.commands.focus();
+    },
+    getHTML: () => editor?.getHTML() ?? "",
+    getJSON: () => editor?.getJSON() ?? { type: "doc", content: [] },
+    getText: () => editor?.getText() ?? "",
+    setContent: (newContent) => {
+      editor?.commands.setContent(newContent);
+    }
+  }));
+  const showTopToolbar = showToolbar && toolbarPosition === "top";
+  const showBottomToolbar = showToolbar && toolbarPosition === "bottom";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "bg-background text-foreground border rounded-md w-full",
+        className
+      ),
+      "data-slot": "rich-text-editor",
+      style: { width: "100%", ...props.style },
+      ...props,
+      children: [
+        showTopToolbar && /* @__PURE__ */ jsx(
+          RichTextToolbar,
+          {
+            editor,
+            promptForImage,
+            promptForLink
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "relative w-full", children: [
+          showBubbleMenu && editor && /* @__PURE__ */ jsx(
+            BubbleMenu,
+            {
+              className: "rich-text-bubble-menu",
+              editor,
+              children: /* @__PURE__ */ jsx(
+                RichTextBubbleMenuContent,
+                {
+                  editor,
+                  promptForLink
+                }
+              )
+            }
+          ),
+          showFloatingMenu && editor && /* @__PURE__ */ jsx(
+            FloatingMenu,
+            {
+              className: "rich-text-floating-menu",
+              editor,
+              children: /* @__PURE__ */ jsx(RichTextFloatingMenuContent, { editor })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            EditorContent,
+            {
+              className: cn(
+                "prose prose-sm dark:prose-invert max-w-none w-full",
+                "focus-within:outline-none",
+                "[&_.ProseMirror]:min-h-36 [&_.ProseMirror]:p-4 [&_.ProseMirror]:focus:outline-none",
+                "[&_.ProseMirror_p.is-editor-empty:first-child::before]:text-muted-foreground [&_.ProseMirror_p.is-editor-empty:first-child::before]:content-[attr(data-placeholder)] [&_.ProseMirror_p.is-editor-empty:first-child::before]:float-left [&_.ProseMirror_p.is-editor-empty:first-child::before]:h-0 [&_.ProseMirror_p.is-editor-empty:first-child::before]:pointer-events-none",
+                "[&_.ProseMirror_ul[data-type='taskList']]:list-none [&_.ProseMirror_ul[data-type='taskList']]:pl-0",
+                "[&_.ProseMirror_ul[data-type='taskList']_li]:flex [&_.ProseMirror_ul[data-type='taskList']_li]:items-start [&_.ProseMirror_ul[data-type='taskList']_li]:gap-2",
+                "[&_.ProseMirror_ul[data-type='taskList']_li_input]:mt-1"
+              ),
+              editor,
+              style: { width: "100%", minWidth: "100%", maxWidth: "none" }
+            }
+          )
+        ] }),
+        showBottomToolbar && /* @__PURE__ */ jsx(
+          RichTextToolbar,
+          {
+            className: "rounded-t-none rounded-b-md border-t border-b-0",
+            editor,
+            promptForImage,
+            promptForLink
+          }
+        )
+      ]
+    }
+  );
+}
+var richTextEditorVariants = cva(
+  "relative flex flex-col rounded-lg border border-border bg-background overflow-hidden",
+  {
+    variants: {
+      size: {
+        sm: "min-h-52",
+        md: "min-h-72",
+        lg: "min-h-96",
+        full: "h-full min-h-72"
+      },
+      disabled: {
+        true: "opacity-50 cursor-not-allowed",
+        false: ""
+      },
+      focused: {
+        true: "ring-2 ring-ring ring-offset-2",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      size: "md",
+      disabled: false,
+      focused: false
+    }
+  }
+);
+var richTextEditorToolbarVariants = cva(
+  "flex items-center gap-1 flex-wrap border-b border-border bg-muted/30 p-2",
+  {
+    variants: {
+      position: {
+        top: "order-first",
+        bottom: "order-last border-b-0 border-t",
+        floating: "absolute top-2 left-2 right-2 z-10 rounded-md shadow-md border bg-background"
+      },
+      compact: {
+        true: "p-1 gap-0.5",
+        false: "p-2 gap-1"
+      }
+    },
+    defaultVariants: {
+      position: "top",
+      compact: false
+    }
+  }
+);
+var richTextEditorToolbarButtonVariants = cva(
+  "inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        default: "hover:bg-accent hover:text-accent-foreground",
+        active: "bg-accent text-accent-foreground"
+      },
+      size: {
+        sm: "h-7 w-7",
+        md: "h-8 w-8",
+        lg: "h-9 w-9"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "md"
+    }
+  }
+);
+var richTextEditorContentVariants = cva(
+  "flex-1 overflow-auto p-4 prose prose-sm dark:prose-invert max-w-none focus:outline-none",
+  {
+    variants: {
+      editable: {
+        true: "",
+        false: "pointer-events-none"
+      }
+    },
+    defaultVariants: {
+      editable: true
+    }
+  }
+);
+var richTextEditorBubbleMenuVariants = cva(
+  "flex items-center gap-0.5 rounded-md border border-border bg-background p-1 shadow-md",
+  {
+    variants: {
+      visible: {
+        true: "opacity-100",
+        false: "opacity-0 pointer-events-none"
+      }
+    },
+    defaultVariants: {
+      visible: true
+    }
+  }
+);
+var richTextEditorFloatingMenuVariants = cva(
+  "flex items-center gap-1 rounded-md border border-border bg-background p-1 shadow-md",
+  {
+    variants: {
+      visible: {
+        true: "opacity-100",
+        false: "opacity-0 pointer-events-none"
+      }
+    },
+    defaultVariants: {
+      visible: true
+    }
+  }
+);
+var richTextEditorPlaceholderVariants = cva(
+  "absolute top-4 left-4 text-muted-foreground pointer-events-none select-none",
+  {
+    variants: {
+      visible: {
+        true: "opacity-100",
+        false: "opacity-0"
+      }
+    },
+    defaultVariants: {
+      visible: true
+    }
+  }
+);
+
+export { RichTextBubbleMenuContent, RichTextEditor, RichTextFloatingMenuContent, RichTextToolbar, richTextEditorBubbleMenuVariants, richTextEditorContentVariants, richTextEditorFloatingMenuVariants, richTextEditorPlaceholderVariants, richTextEditorToolbarButtonVariants, richTextEditorToolbarVariants, richTextEditorVariants };
+//# sourceMappingURL=chunk-6XY7QYVR.js.map
+//# sourceMappingURL=chunk-6XY7QYVR.js.map