@timmbr/ui 1.14.0 → 1.15.0

package/dist/components/RichTextEditor/subcomponents/RteEmojiPicker.js

@@ -0,0 +1,274 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import * as React from 'react';
+import { SmilePlus } from '@timmbr/icons';
+import { cn } from '@timmbr/utils';
+import { useRteContext } from '../RichTextEditor.context.js';
+import { Popover, PopoverTrigger, PopoverContent } from '../../Popover/Popover.js';
+import { Tooltip } from '../../Tooltip/Tooltip.js';
+import { Button } from '../../Button/Button.js';
+import { Input } from '../../Input/Input.js';
+
+const CATEGORIES = [
+  {
+    id: "smileys",
+    label: "Smileys",
+    entries: [
+      { e: "😊", k: "smile happy" },
+      { e: "😂", k: "laugh funny joy" },
+      { e: "🥰", k: "love adore hearts" },
+      { e: "😍", k: "love eyes star" },
+      { e: "🤩", k: "star struck amazing" },
+      { e: "😎", k: "cool sunglasses" },
+      { e: "🥳", k: "party celebrate" },
+      { e: "🤔", k: "thinking hmm" },
+      { e: "😅", k: "sweat nervous" },
+      { e: "😆", k: "grin laugh" },
+      { e: "🙂", k: "slight smile" },
+      { e: "😉", k: "wink" },
+      { e: "🤣", k: "rolling laugh floor" },
+      { e: "😇", k: "angel innocent" },
+      { e: "🥹", k: "tearful touched" },
+      { e: "🤗", k: "hug hugging" },
+      { e: "😋", k: "yum delicious" },
+      { e: "🙃", k: "upside down silly" },
+      { e: "😤", k: "triumph steam" },
+      { e: "🥺", k: "pleading eyes cute" }
+    ]
+  },
+  {
+    id: "hands",
+    label: "Hands",
+    entries: [
+      { e: "👍", k: "thumbs up good like" },
+      { e: "👌", k: "ok perfect" },
+      { e: "🙌", k: "raising hands celebrate" },
+      { e: "💪", k: "muscle strong flex" },
+      { e: "🤝", k: "handshake deal" },
+      { e: "👏", k: "clap applause" },
+      { e: "🙏", k: "pray thanks please" },
+      { e: "✌️", k: "peace victory two" },
+      { e: "🤞", k: "fingers crossed luck" },
+      { e: "🫶", k: "heart hands love" },
+      { e: "👋", k: "wave hello hi" },
+      { e: "☝️", k: "point one up" },
+      { e: "🤙", k: "call shaka hang loose" },
+      { e: "👆", k: "point up" },
+      { e: "✋", k: "raised hand stop" },
+      { e: "🖐️", k: "five fingers" }
+    ]
+  },
+  {
+    id: "hearts",
+    label: "Hearts",
+    entries: [
+      { e: "❤️", k: "red heart love" },
+      { e: "🧡", k: "orange heart" },
+      { e: "💛", k: "yellow heart" },
+      { e: "💚", k: "green heart" },
+      { e: "💙", k: "blue heart" },
+      { e: "💜", k: "purple heart" },
+      { e: "🖤", k: "black heart" },
+      { e: "🤍", k: "white heart" },
+      { e: "💕", k: "two hearts" },
+      { e: "💖", k: "sparkling heart" },
+      { e: "💗", k: "growing heart" },
+      { e: "💓", k: "beating heart" },
+      { e: "💝", k: "heart ribbon" },
+      { e: "❤️‍🔥", k: "heart fire passion" },
+      { e: "💞", k: "revolving hearts" },
+      { e: "💘", k: "heart arrow cupid" }
+    ]
+  },
+  {
+    id: "stars",
+    label: "Stars",
+    entries: [
+      { e: "⭐", k: "star gold" },
+      { e: "🌟", k: "glowing star" },
+      { e: "✨", k: "sparkles magic" },
+      { e: "💫", k: "dizzy star spin" },
+      { e: "🏆", k: "trophy winner award" },
+      { e: "🥇", k: "gold medal first" },
+      { e: "🎯", k: "bullseye target" },
+      { e: "🔥", k: "fire hot trending" },
+      { e: "💥", k: "boom explosion" },
+      { e: "🌈", k: "rainbow colors" },
+      { e: "🎉", k: "party popper celebration" },
+      { e: "🎊", k: "confetti ball party" },
+      { e: "🚀", k: "rocket launch" },
+      { e: "💡", k: "lightbulb idea" }
+    ]
+  },
+  {
+    id: "nature",
+    label: "Nature",
+    entries: [
+      { e: "🌸", k: "cherry blossom flower pink" },
+      { e: "🌺", k: "hibiscus flower" },
+      { e: "🌻", k: "sunflower yellow" },
+      { e: "🌹", k: "rose red flower" },
+      { e: "🌷", k: "tulip flower" },
+      { e: "🌿", k: "herb leaf green" },
+      { e: "🌱", k: "seedling sprout grow" },
+      { e: "🌲", k: "tree pine evergreen" },
+      { e: "🍃", k: "leaves wind" },
+      { e: "🌊", k: "wave ocean sea" },
+      { e: "💧", k: "droplet water" },
+      { e: "🍀", k: "four leaf clover luck" },
+      { e: "🪴", k: "potted plant" },
+      { e: "🌙", k: "moon night" },
+      { e: "☀️", k: "sun sunny bright" },
+      { e: "🌤️", k: "sun behind cloud" }
+    ]
+  },
+  {
+    id: "objects",
+    label: "Objects",
+    entries: [
+      { e: "🎁", k: "gift present wrapped" },
+      { e: "🛍️", k: "shopping bag store" },
+      { e: "💎", k: "diamond gem jewel" },
+      { e: "🏷️", k: "label tag price" },
+      { e: "🔑", k: "key unlock" },
+      { e: "🪄", k: "magic wand" },
+      { e: "🎨", k: "art paint palette" },
+      { e: "📦", k: "box package delivery" },
+      { e: "🧿", k: "eye protection amulet" },
+      { e: "👗", k: "dress fashion clothing" },
+      { e: "👟", k: "sneaker shoe running" },
+      { e: "👒", k: "hat fashion" },
+      { e: "💍", k: "ring engagement jewel" },
+      { e: "👜", k: "handbag purse" },
+      { e: "🕶️", k: "sunglasses cool" },
+      { e: "🧴", k: "lotion cream bottle" }
+    ]
+  },
+  {
+    id: "symbols",
+    label: "Symbols",
+    entries: [
+      { e: "✅", k: "check done complete" },
+      { e: "❌", k: "cross no wrong" },
+      { e: "💯", k: "hundred percent perfect" },
+      { e: "♻️", k: "recycle eco sustainable" },
+      { e: "➡️", k: "right arrow" },
+      { e: "⬆️", k: "up arrow" },
+      { e: "⬇️", k: "down arrow" },
+      { e: "⬅️", k: "left arrow" },
+      { e: "🔝", k: "top up above" },
+      { e: "🆕", k: "new" },
+      { e: "🆓", k: "free" },
+      { e: "🔴", k: "red circle dot" },
+      { e: "🟡", k: "yellow circle dot" },
+      { e: "🟢", k: "green circle dot" },
+      { e: "🔵", k: "blue circle dot" },
+      { e: "⚡", k: "lightning bolt fast energy" }
+    ]
+  }
+];
+const ALL_ENTRIES = CATEGORIES.flatMap((c) => c.entries);
+function RteEmojiPicker() {
+  const { editor, disabled, readOnly } = useRteContext();
+  const [open, setOpen] = React.useState(false);
+  const [search, setSearch] = React.useState("");
+  const [activeCategory, setActiveCategory] = React.useState("all");
+  const searchRef = React.useRef(null);
+  const isDisabled = disabled || readOnly || !editor;
+  const displayEmojis = React.useMemo(() => {
+    const pool = activeCategory === "all" ? ALL_ENTRIES : CATEGORIES.find((c) => c.id === activeCategory)?.entries ?? [];
+    if (!search.trim()) return pool.map((e) => e.e);
+    const q = search.toLowerCase();
+    return pool.filter((e) => e.k.includes(q) || e.e.includes(q)).map((e) => e.e);
+  }, [activeCategory, search]);
+  function handleSelect(emoji) {
+    editor?.chain().focus().insertContent(emoji).run();
+    setOpen(false);
+  }
+  function handleOpenChange(next) {
+    setOpen(next);
+    if (!next) {
+      setSearch("");
+      setActiveCategory("all");
+    }
+  }
+  return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: handleOpenChange, children: [
+    /* @__PURE__ */ jsx(Tooltip, { content: "Insert emoji", side: "bottom", delayDuration: 400, children: /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "ghost",
+        size: "icon-sm",
+        "aria-label": "Insert emoji",
+        disabled: isDisabled,
+        className: "h-7 w-7 rounded-[2px] data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
+        children: /* @__PURE__ */ jsx(SmilePlus, { size: 14 })
+      }
+    ) }) }),
+    /* @__PURE__ */ jsx(
+      PopoverContent,
+      {
+        className: "w-72 max-w-[calc(100vw-1.5rem)] p-3",
+        side: "bottom",
+        align: "start",
+        onOpenAutoFocus: (e) => {
+          e.preventDefault();
+          searchRef.current?.focus();
+        },
+        children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              ref: searchRef,
+              placeholder: "Search emoji…",
+              value: search,
+              onChange: (e) => setSearch(e.target.value),
+              size: "sm"
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-1", children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => setActiveCategory("all"),
+                className: cn(
+                  "rounded px-2 py-0.5 text-caption transition-colors outline-none",
+                  "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1",
+                  activeCategory === "all" ? "bg-primary text-primary-foreground" : "text-muted-foreground hover:bg-accent hover:text-accent-foreground"
+                ),
+                children: "All"
+              }
+            ),
+            CATEGORIES.map((cat) => /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => setActiveCategory(cat.id),
+                className: cn(
+                  "rounded px-2 py-0.5 text-caption transition-colors outline-none",
+                  "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1",
+                  activeCategory === cat.id ? "bg-primary text-primary-foreground" : "text-muted-foreground hover:bg-accent hover:text-accent-foreground"
+                ),
+                children: cat.label
+              },
+              cat.id
+            ))
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "grid grid-cols-[repeat(auto-fill,minmax(2rem,1fr))] gap-0.5 max-h-44 overflow-y-auto", children: displayEmojis.length > 0 ? displayEmojis.map((emoji) => /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => handleSelect(emoji),
+              "aria-label": emoji,
+              className: "flex h-8 w-full items-center justify-center rounded hover:bg-accent transition-colors select-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 outline-none",
+              children: emoji
+            },
+            emoji
+          )) : /* @__PURE__ */ jsx("p", { className: "col-span-full text-center text-caption text-muted-foreground py-4", children: "No results" }) })
+        ] })
+      }
+    )
+  ] });
+}
+
+export { RteEmojiPicker };

package/dist/components/RichTextEditor/subcomponents/RteLinkPopover.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+export declare function RteLinkPopover(): React.JSX.Element;
+//# sourceMappingURL=RteLinkPopover.d.ts.map

package/dist/components/RichTextEditor/subcomponents/RteLinkPopover.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RteLinkPopover.d.ts","sourceRoot":"","sources":["../../../../src/components/RichTextEditor/subcomponents/RteLinkPopover.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAS/B,wBAAgB,cAAc,sBAwF7B"}

package/dist/components/RichTextEditor/subcomponents/RteLinkPopover.js

@@ -0,0 +1,93 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import * as React from 'react';
+import { Link2, Unlink2 } from '@timmbr/icons';
+import { useRteContext } from '../RichTextEditor.context.js';
+import { normalizeUrl } from '../RichTextEditor.helpers.js';
+import { Popover, PopoverTrigger, PopoverContent } from '../../Popover/Popover.js';
+import { Tooltip } from '../../Tooltip/Tooltip.js';
+import { Button } from '../../Button/Button.js';
+import { Input } from '../../Input/Input.js';
+
+function RteLinkPopover() {
+  const { editor, disabled, readOnly } = useRteContext();
+  const [open, setOpen] = React.useState(false);
+  const [urlInput, setUrlInput] = React.useState("");
+  const isActive = editor?.isActive("link") ?? false;
+  const isDisabled = disabled || readOnly || !editor;
+  function handleOpenChange(nextOpen) {
+    if (nextOpen && editor) {
+      const existing = editor.getAttributes("link").href ?? "";
+      setUrlInput(existing);
+    } else {
+      setUrlInput("");
+    }
+    setOpen(nextOpen);
+  }
+  function handleSubmit(e) {
+    e.preventDefault();
+    if (!editor || !urlInput.trim()) return;
+    const href = normalizeUrl(urlInput);
+    editor.chain().focus().extendMarkRange("link").setLink({ href }).run();
+    setOpen(false);
+  }
+  function handleUnlink() {
+    editor?.chain().focus().extendMarkRange("link").unsetLink().run();
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-0.5", children: [
+    /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: handleOpenChange, children: [
+      /* @__PURE__ */ jsx(Tooltip, { content: "Insert link", side: "bottom", delayDuration: 400, children: /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "ghost",
+          size: "icon-sm",
+          "aria-label": "Insert link",
+          "aria-pressed": isActive,
+          disabled: isDisabled,
+          className: "h-7 w-7 rounded-[2px] data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
+          children: /* @__PURE__ */ jsx(Link2, { size: 14 })
+        }
+      ) }) }),
+      /* @__PURE__ */ jsx(PopoverContent, { className: "w-80 max-w-[calc(100vw-1.5rem)] p-3", side: "bottom", align: "start", children: /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, className: "flex flex-col gap-2", children: [
+        /* @__PURE__ */ jsx("p", { className: "text-body-2-semibold text-foreground mb-1", children: "Insert link" }),
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            placeholder: "https://example.com",
+            value: urlInput,
+            onChange: (e) => setUrlInput(e.target.value),
+            autoFocus: true,
+            size: "sm"
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "flex gap-2 justify-end", children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              type: "button",
+              variant: "ghost",
+              size: "sm",
+              onClick: () => setOpen(false),
+              children: "Cancel"
+            }
+          ),
+          /* @__PURE__ */ jsx(Button, { type: "submit", size: "sm", disabled: !urlInput.trim(), children: "Apply" })
+        ] })
+      ] }) })
+    ] }),
+    /* @__PURE__ */ jsx(Tooltip, { content: "Remove link", side: "bottom", delayDuration: 400, children: /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "ghost",
+        size: "icon-sm",
+        "aria-label": "Remove link",
+        disabled: isDisabled || !isActive,
+        onClick: handleUnlink,
+        className: "h-7 w-7 rounded-[2px]",
+        children: /* @__PURE__ */ jsx(Unlink2, { size: 14 })
+      }
+    ) })
+  ] });
+}
+
+export { RteLinkPopover };

package/dist/components/RichTextEditor/subcomponents/RteToolbar.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+interface RteToolbarProps {
+    className?: string;
+}
+export declare function RteToolbar({ className }: RteToolbarProps): React.JSX.Element | null;
+export {};
+//# sourceMappingURL=RteToolbar.d.ts.map

package/dist/components/RichTextEditor/subcomponents/RteToolbar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RteToolbar.d.ts","sourceRoot":"","sources":["../../../../src/components/RichTextEditor/subcomponents/RteToolbar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AA+B/B,UAAU,eAAe;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAoBD,wBAAgB,UAAU,CAAC,EAAE,SAAS,EAAE,EAAE,eAAe,4BAwKxD"}

package/dist/components/RichTextEditor/subcomponents/RteToolbar.js

@@ -0,0 +1,234 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { cn } from '@timmbr/utils';
+import { Undo2, Redo2, Pilcrow, Heading2, Heading3, Bold, Italic, Underline, Strikethrough, List, ListOrdered, Quote, AlignLeft, AlignCenter, AlignRight, AlignJustify, Minus, RemoveFormatting } from '@timmbr/icons';
+import { useRteContext } from '../RichTextEditor.context.js';
+import { toolbarVariants } from '../RichTextEditor.styles.js';
+import { RteToolbarButton } from './RteToolbarButton.js';
+import { RteToolbarGroup } from './RteToolbarGroup.js';
+import { RteLinkPopover } from './RteLinkPopover.js';
+import { RteEmojiPicker } from './RteEmojiPicker.js';
+
+const ICON_SIZE = 14;
+function handleToolbarKeyDown(e) {
+  if (!["ArrowRight", "ArrowLeft", "Home", "End"].includes(e.key)) return;
+  const toolbar = e.currentTarget;
+  const focusable = Array.from(
+    toolbar.querySelectorAll("button:not([disabled])")
+  );
+  const idx = focusable.indexOf(document.activeElement);
+  if (idx === -1) return;
+  e.preventDefault();
+  const len = focusable.length;
+  const next = e.key === "ArrowRight" ? focusable[(idx + 1) % len] : e.key === "ArrowLeft" ? focusable[(idx - 1 + len) % len] : e.key === "Home" ? focusable[0] : focusable[len - 1];
+  next?.focus();
+}
+function RteToolbar({ className }) {
+  const { editor, disabled, readOnly } = useRteContext();
+  if (!editor) return null;
+  const isDisabled = disabled || readOnly;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "rte-toolbar",
+      role: "toolbar",
+      "aria-label": "Text formatting",
+      onKeyDown: handleToolbarKeyDown,
+      className: cn(toolbarVariants(), className),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-0.5", children: [
+          /* @__PURE__ */ jsx(
+            RteToolbarButton,
+            {
+              label: "Undo",
+              icon: /* @__PURE__ */ jsx(Undo2, { size: ICON_SIZE }),
+              onClick: () => editor.chain().focus().undo().run(),
+              disabled: isDisabled || !editor.can().undo()
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            RteToolbarButton,
+            {
+              label: "Redo",
+              icon: /* @__PURE__ */ jsx(Redo2, { size: ICON_SIZE }),
+              onClick: () => editor.chain().focus().redo().run(),
+              disabled: isDisabled || !editor.can().redo()
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs(RteToolbarGroup, { children: [
+          /* @__PURE__ */ jsx(
+            RteToolbarButton,
+            {
+              label: "Paragraph",
+              icon: /* @__PURE__ */ jsx(Pilcrow, { size: ICON_SIZE }),
+              onClick: () => editor.chain().focus().setParagraph().run(),
+              isActive: editor.isActive("paragraph") && !editor.isActive("heading"),
+              disabled: isDisabled
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            RteToolbarButton,
+            {
+              label: "Heading 2",
+              icon: /* @__PURE__ */ jsx(Heading2, { size: ICON_SIZE }),
+              onClick: () => editor.chain().focus().toggleHeading({ level: 2 }).run(),
+              isActive: editor.isActive("heading", { level: 2 }),
+              disabled: isDisabled
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            RteToolbarButton,
+            {
+              label: "Heading 3",
+              icon: /* @__PURE__ */ jsx(Heading3, { size: ICON_SIZE }),
+              onClick: () => editor.chain().focus().toggleHeading({ level: 3 }).run(),
+              isActive: editor.isActive("heading", { level: 3 }),
+              disabled: isDisabled
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs(RteToolbarGroup, { children: [
+          /* @__PURE__ */ jsx(
+            RteToolbarButton,
+            {
+              label: "Bold",
+              icon: /* @__PURE__ */ jsx(Bold, { size: ICON_SIZE }),
+              onClick: () => editor.chain().focus().toggleBold().run(),
+              isActive: editor.isActive("bold"),
+              disabled: isDisabled
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            RteToolbarButton,
+            {
+              label: "Italic",
+              icon: /* @__PURE__ */ jsx(Italic, { size: ICON_SIZE }),
+              onClick: () => editor.chain().focus().toggleItalic().run(),
+              isActive: editor.isActive("italic"),
+              disabled: isDisabled
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            RteToolbarButton,
+            {
+              label: "Underline",
+              icon: /* @__PURE__ */ jsx(Underline, { size: ICON_SIZE }),
+              onClick: () => editor.chain().focus().toggleUnderline().run(),
+              isActive: editor.isActive("underline"),
+              disabled: isDisabled
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            RteToolbarButton,
+            {
+              label: "Strikethrough",
+              icon: /* @__PURE__ */ jsx(Strikethrough, { size: ICON_SIZE }),
+              onClick: () => editor.chain().focus().toggleStrike().run(),
+              isActive: editor.isActive("strike"),
+              disabled: isDisabled
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs(RteToolbarGroup, { children: [
+          /* @__PURE__ */ jsx(
+            RteToolbarButton,
+            {
+              label: "Bullet list",
+              icon: /* @__PURE__ */ jsx(List, { size: ICON_SIZE }),
+              onClick: () => editor.chain().focus().toggleBulletList().run(),
+              isActive: editor.isActive("bulletList"),
+              disabled: isDisabled
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            RteToolbarButton,
+            {
+              label: "Ordered list",
+              icon: /* @__PURE__ */ jsx(ListOrdered, { size: ICON_SIZE }),
+              onClick: () => editor.chain().focus().toggleOrderedList().run(),
+              isActive: editor.isActive("orderedList"),
+              disabled: isDisabled
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            RteToolbarButton,
+            {
+              label: "Blockquote",
+              icon: /* @__PURE__ */ jsx(Quote, { size: ICON_SIZE }),
+              onClick: () => editor.chain().focus().toggleBlockquote().run(),
+              isActive: editor.isActive("blockquote"),
+              disabled: isDisabled
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs(RteToolbarGroup, { children: [
+          /* @__PURE__ */ jsx(
+            RteToolbarButton,
+            {
+              label: "Align left",
+              icon: /* @__PURE__ */ jsx(AlignLeft, { size: ICON_SIZE }),
+              onClick: () => editor.chain().focus().setTextAlign("left").run(),
+              isActive: editor.isActive({ textAlign: "left" }),
+              disabled: isDisabled
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            RteToolbarButton,
+            {
+              label: "Align center",
+              icon: /* @__PURE__ */ jsx(AlignCenter, { size: ICON_SIZE }),
+              onClick: () => editor.chain().focus().setTextAlign("center").run(),
+              isActive: editor.isActive({ textAlign: "center" }),
+              disabled: isDisabled
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            RteToolbarButton,
+            {
+              label: "Align right",
+              icon: /* @__PURE__ */ jsx(AlignRight, { size: ICON_SIZE }),
+              onClick: () => editor.chain().focus().setTextAlign("right").run(),
+              isActive: editor.isActive({ textAlign: "right" }),
+              disabled: isDisabled
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            RteToolbarButton,
+            {
+              label: "Justify",
+              icon: /* @__PURE__ */ jsx(AlignJustify, { size: ICON_SIZE }),
+              onClick: () => editor.chain().focus().setTextAlign("justify").run(),
+              isActive: editor.isActive({ textAlign: "justify" }),
+              disabled: isDisabled
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs(RteToolbarGroup, { children: [
+          /* @__PURE__ */ jsx(RteLinkPopover, {}),
+          /* @__PURE__ */ jsx(RteEmojiPicker, {}),
+          /* @__PURE__ */ jsx(
+            RteToolbarButton,
+            {
+              label: "Horizontal rule",
+              icon: /* @__PURE__ */ jsx(Minus, { size: ICON_SIZE }),
+              onClick: () => editor.chain().focus().setHorizontalRule().run(),
+              disabled: isDisabled
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(RteToolbarGroup, { children: /* @__PURE__ */ jsx(
+          RteToolbarButton,
+          {
+            label: "Clear formatting",
+            icon: /* @__PURE__ */ jsx(RemoveFormatting, { size: ICON_SIZE }),
+            onClick: () => editor.chain().focus().clearNodes().unsetAllMarks().run(),
+            disabled: isDisabled
+          }
+        ) })
+      ]
+    }
+  );
+}
+
+export { RteToolbar };

package/dist/components/RichTextEditor/subcomponents/RteToolbarButton.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import type { RteToolbarButtonProps } from '../RichTextEditor.types';
+export declare function RteToolbarButton({ label, icon, onClick, isActive, disabled, className, }: RteToolbarButtonProps): React.JSX.Element;
+//# sourceMappingURL=RteToolbarButton.d.ts.map

package/dist/components/RichTextEditor/subcomponents/RteToolbarButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RteToolbarButton.d.ts","sourceRoot":"","sources":["../../../../src/components/RichTextEditor/subcomponents/RteToolbarButton.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAErE,wBAAgB,gBAAgB,CAAC,EAC/B,KAAK,EACL,IAAI,EACJ,OAAO,EACP,QAAQ,EACR,QAAgB,EAChB,SAAS,GACV,EAAE,qBAAqB,qBAuBvB"}

package/dist/components/RichTextEditor/subcomponents/RteToolbarButton.js

@@ -0,0 +1,37 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { cn } from '@timmbr/utils';
+import { useRteContext } from '../RichTextEditor.context.js';
+import { Tooltip } from '../../Tooltip/Tooltip.js';
+import { Button } from '../../Button/Button.js';
+
+function RteToolbarButton({
+  label,
+  icon,
+  onClick,
+  isActive,
+  disabled = false,
+  className
+}) {
+  const { shouldAnimate } = useRteContext();
+  return /* @__PURE__ */ jsx(Tooltip, { content: label, side: "bottom", delayDuration: 400, children: /* @__PURE__ */ jsx(
+    Button,
+    {
+      variant: "ghost",
+      size: "icon-sm",
+      "aria-label": label,
+      "aria-pressed": isActive !== void 0 ? isActive : void 0,
+      disabled,
+      onClick,
+      className: cn(
+        "h-7 w-7 rounded-[2px]",
+        isActive === true && "bg-accent text-accent-foreground",
+        shouldAnimate ? "active:scale-[0.92]" : "active:scale-100",
+        className
+      ),
+      children: icon
+    }
+  ) });
+}
+
+export { RteToolbarButton };

package/dist/components/RichTextEditor/subcomponents/RteToolbarGroup.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import type { RteToolbarGroupProps } from '../RichTextEditor.types';
+export declare function RteToolbarGroup({ children, showLeadingDivider }: RteToolbarGroupProps): React.JSX.Element;
+//# sourceMappingURL=RteToolbarGroup.d.ts.map