art-bd-ui 1.0.39 → 1.0.41

package/dist/esm/components/ui/rich-editor/toolbar/color-swatch.js

@@ -2,19 +2,16 @@ import { jsx } from 'react/jsx-runtime';
 import { cva } from '../../../../node_modules/class-variance-authority/dist/index.js';
 import { cn } from '../../../../lib/utils.js';
 
-/**
- * ColorSwatch variants using CVA
- */
-const colorSwatchVariants = cva("rounded-full border-2 transition-all hover:scale-110 cursor-pointer focus:outline-none focus:ring-2 focus:ring-offset-2", {
+const colorSwatchVariants = cva("rounded-md border border-border/90 transition-all hover:-translate-y-0.5 cursor-pointer focus:outline-none focus:ring-2 focus:ring-primary/35 focus:ring-offset-1", {
     variants: {
         size: {
-            sm: "h-6 w-6",
-            md: "h-8 w-8",
+            sm: "h-7 w-7",
+            md: "h-9 w-9",
             lg: "h-10 w-10",
         },
         selected: {
-            true: "border-primary ring-2 ring-primary ring-offset-2",
-            false: "border-border",
+            true: "ring-2 ring-primary/35",
+            false: "",
         },
     },
     defaultVariants: {
@@ -22,39 +19,23 @@ const colorSwatchVariants = cva("rounded-full border-2 transition-all hover:scal
         selected: false,
     },
 });
-/**
- * A single color swatch that can be clicked to select a color.
- */
 function ColorSwatch({ color, isSelected = false, onClick, size }) {
     return (jsx("button", { type: "button", className: cn(colorSwatchVariants({ size, selected: isSelected }), color.className), style: !color.className ? { backgroundColor: color.value } : undefined, onClick: () => onClick(color.value), "aria-label": `Select ${color.label}`, title: color.label }));
 }
-/**
- * ColorGrid variants using CVA
- */
 const colorGridVariants = cva("grid gap-1.5", {
     variants: {
         size: {
-            sm: "gap-1",
-            md: "gap-1.5",
-            lg: "gap-2",
-        },
-        layout: {
-            fixed: "", // columns will be set via inline style
-            auto: "grid-flow-col auto-cols-max",
+            sm: "gap-0.5",
+            md: "gap-1",
+            lg: "gap-1.5",
         },
     },
     defaultVariants: {
         size: "sm",
-        layout: "auto",
     },
 });
-/**
- * A grid of color swatches.
- * When columns is not provided, it auto-sizes based on the color swatch size.
- */
 function ColorGrid({ colors, currentColor, onColorSelect, columns, size = "sm", className }) {
-    const layout = columns ? "fixed" : "auto";
-    return (jsx("div", { className: cn(colorGridVariants({ size, layout }), className), style: columns ? { gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))` } : undefined, children: colors.map((color) => (jsx(ColorSwatch, { color: color, size: size, isSelected: currentColor === color.value, onClick: onColorSelect }, color.value))) }));
+    return (jsx("div", { className: cn(colorGridVariants({ size }), className), style: columns ? { gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))` } : undefined, children: colors.map((color) => (jsx(ColorSwatch, { color: color, size: size, isSelected: currentColor === color.value, onClick: onColorSelect }, color.value))) }));
 }
 
 export { ColorGrid, ColorSwatch };

package/dist/esm/components/ui/rich-editor/toolbar/constants.js

@@ -9,10 +9,10 @@ import Strikethrough from '../../../../node_modules/lucide-react/dist/esm/icons/
 import Underline from '../../../../node_modules/lucide-react/dist/esm/icons/underline.js';
 import Italic from '../../../../node_modules/lucide-react/dist/esm/icons/italic.js';
 import Bold from '../../../../node_modules/lucide-react/dist/esm/icons/bold.js';
-import AlignJustify from '../../../../node_modules/lucide-react/dist/esm/icons/align-justify.js';
-import AlignRight from '../../../../node_modules/lucide-react/dist/esm/icons/align-right.js';
-import AlignCenter from '../../../../node_modules/lucide-react/dist/esm/icons/align-center.js';
-import AlignLeft from '../../../../node_modules/lucide-react/dist/esm/icons/align-left.js';
+import TextAlignJustify from '../../../../node_modules/lucide-react/dist/esm/icons/text-align-justify.js';
+import TextAlignEnd from '../../../../node_modules/lucide-react/dist/esm/icons/text-align-end.js';
+import TextAlignCenter from '../../../../node_modules/lucide-react/dist/esm/icons/text-align-center.js';
+import TextAlignStart from '../../../../node_modules/lucide-react/dist/esm/icons/text-align-start.js';
 
 /**
  * Configuration for all marks and nodes that can be toggled in the editor.
@@ -85,22 +85,22 @@ const MARK_CONFIG = {
  */
 const ALIGNMENT_CONFIG = {
     left: {
-        icon: jsx(AlignLeft, { className: "size-4" }),
+        icon: jsx(TextAlignStart, { className: "size-4" }),
         tooltip: "Align left",
         ariaLabel: "Align left",
     },
     center: {
-        icon: jsx(AlignCenter, { className: "size-4" }),
+        icon: jsx(TextAlignCenter, { className: "size-4" }),
         tooltip: "Align center",
         ariaLabel: "Align center",
     },
     right: {
-        icon: jsx(AlignRight, { className: "size-4" }),
+        icon: jsx(TextAlignEnd, { className: "size-4" }),
         tooltip: "Align right",
         ariaLabel: "Align right",
     },
     justify: {
-        icon: jsx(AlignJustify, { className: "size-4" }),
+        icon: jsx(TextAlignJustify, { className: "size-4" }),
         tooltip: "Justify",
         ariaLabel: "Justify text",
     },

package/dist/esm/components/ui/rich-editor/toolbar/dropdowns.js

@@ -2,14 +2,20 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import { useEditorState } from '../../../../node_modules/@tiptap/react/dist/index.js';
 import { ToolbarDropdown } from './toolbar-dropdown.js';
 import { ToolbarButton } from './toolbar-button.js';
+import { Button } from '../../../buttons/button/button.js';
+import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem } from '../../dropdown-menu/dropdown-menu.js';
 import Pilcrow from '../../../../node_modules/lucide-react/dist/esm/icons/pilcrow.js';
 import Heading1 from '../../../../node_modules/lucide-react/dist/esm/icons/heading-1.js';
 import Heading2 from '../../../../node_modules/lucide-react/dist/esm/icons/heading-2.js';
 import Heading3 from '../../../../node_modules/lucide-react/dist/esm/icons/heading-3.js';
 import Type from '../../../../node_modules/lucide-react/dist/esm/icons/type.js';
+import CaseSensitive from '../../../../node_modules/lucide-react/dist/esm/icons/case-sensitive.js';
+import TextQuote from '../../../../node_modules/lucide-react/dist/esm/icons/text-quote.js';
+import CodeXml from '../../../../node_modules/lucide-react/dist/esm/icons/code-xml.js';
+import ChevronDown from '../../../../node_modules/lucide-react/dist/esm/icons/chevron-down.js';
 import Minus from '../../../../node_modules/lucide-react/dist/esm/icons/minus.js';
 import Plus from '../../../../node_modules/lucide-react/dist/esm/icons/plus.js';
-import ChevronsDownUp from '../../../../node_modules/lucide-react/dist/esm/icons/chevrons-down-up.js';
+import TextInitial from '../../../../node_modules/lucide-react/dist/esm/icons/text-initial.js';
 
 // Heading dropdown options
 const HEADING_OPTIONS = [
@@ -43,37 +49,59 @@ const HEADING_OPTIONS = [
     },
 ];
 function HeadingDropdown({ editor }) {
-    return (jsxs("div", { className: "flex items-center", children: [jsx(Type, { className: "size-4 mr-1.5 text-muted-foreground" }), jsx(ToolbarDropdown, { editor: editor, options: HEADING_OPTIONS, defaultLabel: "Paragraph" })] }));
+    const activeOption = useEditorState({
+        editor,
+        selector: (ctx) => {
+            if (!ctx.editor)
+                return HEADING_OPTIONS[0];
+            return HEADING_OPTIONS.find((option) => option.isActive(ctx.editor)) || HEADING_OPTIONS[0];
+        },
+    });
+    const triggerIcon = activeOption.value === "h1" ? (jsx(Heading1, { className: "size-4 text-muted-foreground" })) : activeOption.value === "h2" ? (jsx(Heading2, { className: "size-4 text-muted-foreground" })) : activeOption.value === "h3" ? (jsx(Heading3, { className: "size-4 text-muted-foreground" })) : (jsx(Pilcrow, { className: "size-4 text-muted-foreground" }));
+    return (jsxs(DropdownMenu, { children: [jsx(DropdownMenuTrigger, { asChild: true, children: jsxs(Button, { variant: "ghost", size: "sm", className: "h-8 gap-1 px-2", "aria-label": `Text type: ${activeOption.label}`, title: activeOption.label, children: [triggerIcon, jsx(ChevronDown, { className: "size-3" })] }) }), jsx(DropdownMenuContent, { align: "start", children: HEADING_OPTIONS.map((option) => (jsxs(DropdownMenuItem, { onClick: () => option.command(editor), className: activeOption.value === option.value ? "bg-muted" : "", children: [option.icon, option.label] }, option.value))) })] }));
 }
 // Font family dropdown options
 const FONT_FAMILY_OPTIONS = [
     {
         label: "Default",
         value: "default",
+        icon: jsx(Type, { className: "mr-2 size-4" }),
         command: (editor) => editor.chain().focus().unsetFontFamily().run(),
-        isActive: (editor) => !editor.isActive("textStyle"),
+        isActive: (editor) => !editor.getAttributes("textStyle").fontFamily,
     },
     {
         label: "Inter",
         value: "Inter",
+        icon: jsx(CaseSensitive, { className: "mr-2 size-4" }),
         command: (editor) => editor.chain().focus().setFontFamily("Inter").run(),
-        isActive: (editor) => editor.isActive("textStyle", { fontFamily: "Inter" }),
+        isActive: (editor) => editor.getAttributes("textStyle").fontFamily === "Inter",
     },
     {
         label: "Serif",
         value: "serif",
+        icon: jsx(TextQuote, { className: "mr-2 size-4" }),
         command: (editor) => editor.chain().focus().setFontFamily("serif").run(),
-        isActive: (editor) => editor.isActive("textStyle", { fontFamily: "serif" }),
+        isActive: (editor) => editor.getAttributes("textStyle").fontFamily === "serif",
     },
     {
         label: "Monospace",
         value: "monospace",
+        icon: jsx(CodeXml, { className: "mr-2 size-4" }),
         command: (editor) => editor.chain().focus().setFontFamily("monospace").run(),
-        isActive: (editor) => editor.isActive("textStyle", { fontFamily: "monospace" }),
+        isActive: (editor) => editor.getAttributes("textStyle").fontFamily === "monospace",
     },
 ];
 function FontFamilyDropdown({ editor }) {
-    return jsx(ToolbarDropdown, { editor: editor, options: FONT_FAMILY_OPTIONS, defaultLabel: "Font" });
+    const activeOption = useEditorState({
+        editor,
+        selector: (ctx) => {
+            if (!ctx.editor)
+                return FONT_FAMILY_OPTIONS[0];
+            return FONT_FAMILY_OPTIONS.find((option) => option.isActive(ctx.editor)) || FONT_FAMILY_OPTIONS[0];
+        },
+    });
+    const activeIcon = activeOption.value === "Inter" ? (jsx(CaseSensitive, { className: "size-4 text-muted-foreground" })) : activeOption.value === "serif" ? (jsx(TextQuote, { className: "size-4 text-muted-foreground" })) : activeOption.value === "monospace" ? (jsx(CodeXml, { className: "size-4 text-muted-foreground" })) : (jsx(Type, { className: "size-4 text-muted-foreground" }));
+    return (jsxs(DropdownMenu, { children: [jsx(DropdownMenuTrigger, { asChild: true, children: jsxs(Button, { variant: "ghost", size: "sm", className: "h-8 gap-1 px-2", "aria-label": `Font family: ${activeOption.label}`, title: activeOption.label, children: [activeIcon, jsx(ChevronDown, { className: "size-3" })] }) }), jsx(DropdownMenuContent, { align: "start", children: FONT_FAMILY_OPTIONS.map((option) => (jsxs(DropdownMenuItem, { onClick: () => option.command(editor), className: activeOption.value === option.value ? "bg-muted" : "", style: option.value !== "default" ? { fontFamily: option.value } : undefined, children: [option.icon, option.label] }, option.value))) })] }));
 }
 // Font size options
 const FONT_SIZE_OPTIONS = [
@@ -107,24 +135,30 @@ const FONT_SIZE_OPTIONS = [
         command: (editor) => editor.chain().focus().setFontSize("20px").run(),
         isActive: (editor) => editor.getAttributes("textStyle").fontSize === "20px",
     },
+    {
+        label: "22px",
+        value: "22",
+        command: (editor) => editor.chain().focus().setFontSize("22px").run(),
+        isActive: (editor) => editor.getAttributes("textStyle").fontSize === "22px",
+    },
     {
         label: "24px",
         value: "24",
         command: (editor) => editor.chain().focus().setFontSize("24px").run(),
         isActive: (editor) => editor.getAttributes("textStyle").fontSize === "24px",
     },
+    {
+        label: "26px",
+        value: "26",
+        command: (editor) => editor.chain().focus().setFontSize("26px").run(),
+        isActive: (editor) => editor.getAttributes("textStyle").fontSize === "26px",
+    },
     {
         label: "28px",
         value: "28",
         command: (editor) => editor.chain().focus().setFontSize("28px").run(),
         isActive: (editor) => editor.getAttributes("textStyle").fontSize === "28px",
     },
-    {
-        label: "32px",
-        value: "32",
-        command: (editor) => editor.chain().focus().setFontSize("32px").run(),
-        isActive: (editor) => editor.getAttributes("textStyle").fontSize === "32px",
-    },
     {
         label: "36px",
         value: "36",
@@ -137,6 +171,12 @@ const FONT_SIZE_OPTIONS = [
         command: (editor) => editor.chain().focus().setFontSize("48px").run(),
         isActive: (editor) => editor.getAttributes("textStyle").fontSize === "48px",
     },
+    {
+        label: "72px",
+        value: "72",
+        command: (editor) => editor.chain().focus().setFontSize("72px").run(),
+        isActive: (editor) => editor.getAttributes("textStyle").fontSize === "72px",
+    },
 ];
 /**
  * Font size dropdown with increment/decrement buttons
@@ -167,23 +207,11 @@ function FontSizeDropdown({ editor }) {
 // Line height dropdown options
 const LINE_HEIGHT_OPTIONS = [
     {
-        label: "Default",
+        label: "Auto",
         value: "default",
         command: (editor) => editor.chain().focus().unsetLineHeight().run(),
         isActive: (editor) => !editor.getAttributes("textStyle").lineHeight,
     },
-    {
-        label: "1.0",
-        value: "1",
-        command: (editor) => editor.chain().focus().setLineHeight("1").run(),
-        isActive: (editor) => editor.getAttributes("textStyle").lineHeight === "1",
-    },
-    {
-        label: "1.15",
-        value: "1.15",
-        command: (editor) => editor.chain().focus().setLineHeight("1.15").run(),
-        isActive: (editor) => editor.getAttributes("textStyle").lineHeight === "1.15",
-    },
     {
         label: "1.5",
         value: "1.5",
@@ -191,14 +219,38 @@ const LINE_HEIGHT_OPTIONS = [
         isActive: (editor) => editor.getAttributes("textStyle").lineHeight === "1.5",
     },
     {
-        label: "2.0",
+        label: "2",
         value: "2",
         command: (editor) => editor.chain().focus().setLineHeight("2").run(),
         isActive: (editor) => editor.getAttributes("textStyle").lineHeight === "2",
     },
+    {
+        label: "2.5",
+        value: "2.5",
+        command: (editor) => editor.chain().focus().setLineHeight("2.5").run(),
+        isActive: (editor) => editor.getAttributes("textStyle").lineHeight === "2.5",
+    },
+    {
+        label: "3",
+        value: "3",
+        command: (editor) => editor.chain().focus().setLineHeight("3").run(),
+        isActive: (editor) => editor.getAttributes("textStyle").lineHeight === "3",
+    },
+    {
+        label: "3.5",
+        value: "3.5",
+        command: (editor) => editor.chain().focus().setLineHeight("3.5").run(),
+        isActive: (editor) => editor.getAttributes("textStyle").lineHeight === "3.5",
+    },
+    {
+        label: "4",
+        value: "4",
+        command: (editor) => editor.chain().focus().setLineHeight("4").run(),
+        isActive: (editor) => editor.getAttributes("textStyle").lineHeight === "4",
+    },
 ];
 function LineHeightDropdown({ editor }) {
-    return (jsxs("div", { className: "flex items-center", children: [jsx(ChevronsDownUp, { className: "size-4 mr-1.5 text-muted-foreground" }), jsx(ToolbarDropdown, { editor: editor, options: LINE_HEIGHT_OPTIONS, defaultLabel: "Line Height" })] }));
+    return (jsx(ToolbarDropdown, { editor: editor, options: LINE_HEIGHT_OPTIONS, icon: jsx(TextInitial, { className: "size-4 mr-1 text-muted-foreground" }) }));
 }
 
 export { FONT_FAMILY_OPTIONS, FONT_SIZE_OPTIONS, FontFamilyDropdown, FontSizeDropdown, HEADING_OPTIONS, HeadingDropdown, LINE_HEIGHT_OPTIONS, LineHeightDropdown };

package/dist/esm/components/ui/rich-editor/toolbar/list-dropdown.js

@@ -0,0 +1,51 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useEditorState } from '../../../../node_modules/@tiptap/react/dist/index.js';
+import { Button } from '../../../buttons/button/button.js';
+import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem } from '../../dropdown-menu/dropdown-menu.js';
+import { cn } from '../../../../lib/utils.js';
+import ListOrdered from '../../../../node_modules/lucide-react/dist/esm/icons/list-ordered.js';
+import List from '../../../../node_modules/lucide-react/dist/esm/icons/list.js';
+import ChevronDown from '../../../../node_modules/lucide-react/dist/esm/icons/chevron-down.js';
+
+const LIST_OPTIONS = {
+    bullet: {
+        icon: jsx(List, { className: "size-4" }),
+        label: "Bulleted list",
+        isActive: (editor) => editor.isActive("bulletList"),
+        command: (editor) => editor.chain().focus().toggleBulletList().run(),
+    },
+    ordered: {
+        icon: jsx(ListOrdered, { className: "size-4" }),
+        label: "Numbered list",
+        isActive: (editor) => editor.isActive("orderedList"),
+        command: (editor) => editor.chain().focus().toggleOrderedList().run(),
+    },
+};
+function ListDropdown({ editor, showBullet = true, showOrdered = true }) {
+    const availableTypes = [showBullet ? "bullet" : null, showOrdered ? "ordered" : null].filter(Boolean);
+    if (availableTypes.length === 0) {
+        return null;
+    }
+    const activeType = useEditorState({
+        editor,
+        selector: (ctx) => {
+            if (!ctx.editor) {
+                return availableTypes[0];
+            }
+            const explicitActive = availableTypes.find((type) => LIST_OPTIONS[type].isActive(ctx.editor));
+            return explicitActive || availableTypes[0];
+        },
+    });
+    const hasActiveList = useEditorState({
+        editor,
+        selector: (ctx) => (ctx.editor ? ctx.editor.isActive("bulletList") || ctx.editor.isActive("orderedList") : false),
+    });
+    const trigger = LIST_OPTIONS[activeType];
+    return (jsxs(DropdownMenu, { children: [jsx(DropdownMenuTrigger, { asChild: true, children: jsxs(Button, { variant: "ghost", size: "sm", className: cn("h-8 gap-1 px-2", hasActiveList && "bg-accent text-accent-foreground"), "aria-label": "List type", title: trigger.label, children: [trigger.icon, jsx(ChevronDown, { className: "size-3 text-muted-foreground" })] }) }), jsx(DropdownMenuContent, { align: "start", className: "w-44", children: availableTypes.map((type) => {
+                    const option = LIST_OPTIONS[type];
+                    const isActive = type === activeType;
+                    return (jsxs(DropdownMenuItem, { onClick: () => option.command(editor), className: isActive ? "bg-muted" : "", children: [option.icon, option.label] }, type));
+                }) })] }));
+}
+
+export { ListDropdown };

package/dist/esm/components/ui/rich-editor/toolbar/mark-button.js

@@ -1,8 +1,19 @@
-import { jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { useEditorState } from '../../../../node_modules/@tiptap/react/dist/index.js';
 import { MARK_CONFIG } from './constants.js';
 import { ToolbarToggle } from './toolbar-toggle.js';
+import { Button } from '../../../buttons/button/button.js';
+import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem } from '../../dropdown-menu/dropdown-menu.js';
+import { cn } from '../../../../lib/utils.js';
+import ChevronDown from '../../../../node_modules/lucide-react/dist/esm/icons/chevron-down.js';
 
+function toggleMark(editor, mark) {
+    const commandName = `toggle${mark.charAt(0).toUpperCase() + mark.slice(1)}`;
+    const chain = editor.chain().focus();
+    if (chain[commandName]) {
+        chain[commandName]().run();
+    }
+}
 /**
  * A button that toggles a mark (like bold, italic, etc.) in the editor.
  * Uses useEditorState to properly track the active state.
@@ -14,14 +25,31 @@ function MarkButton({ editor, mark }) {
         editor,
         selector: (ctx) => (ctx.editor ? ctx.editor.isActive(mark) : false),
     });
-    const handleToggle = () => {
-        const commandName = `toggle${mark.charAt(0).toUpperCase() + mark.slice(1)}`;
-        const chain = editor.chain().focus();
-        if (chain[commandName]) {
-            chain[commandName]().run();
-        }
-    };
+    const handleToggle = () => toggleMark(editor, mark);
     return (jsx(ToolbarToggle, { icon: config.icon, pressed: isActive, onPressedChange: handleToggle, tooltip: config.tooltip, ariaLabel: config.ariaLabel }));
 }
+function MarkDropdown({ editor, marks }) {
+    if (marks.length === 0) {
+        return null;
+    }
+    const markState = useEditorState({
+        editor,
+        selector: (ctx) => {
+            const next = {};
+            for (const mark of marks) {
+                next[mark] = ctx.editor ? ctx.editor.isActive(mark) : false;
+            }
+            return next;
+        },
+    });
+    const defaultMark = marks.includes("strike") ? "strike" : marks[0];
+    const activeMark = marks.find((mark) => markState[mark]) || defaultMark;
+    const triggerConfig = MARK_CONFIG[activeMark];
+    const hasActiveMark = marks.some((mark) => markState[mark]);
+    return (jsxs(DropdownMenu, { children: [jsx(DropdownMenuTrigger, { asChild: true, children: jsxs(Button, { variant: "ghost", size: "sm", className: cn("h-8 gap-1 px-2", hasActiveMark && "bg-accent text-accent-foreground"), "aria-label": "Additional text marks", title: "Additional text marks", children: [triggerConfig.icon, jsx(ChevronDown, { className: "size-3 text-muted-foreground" })] }) }), jsx(DropdownMenuContent, { align: "start", className: "w-44", children: marks.map((mark) => {
+                    const config = MARK_CONFIG[mark];
+                    return (jsxs(DropdownMenuItem, { onClick: () => toggleMark(editor, mark), className: markState[mark] ? "bg-muted" : "", children: [config.icon, config.tooltip] }, mark));
+                }) })] }));
+}
 
-export { MarkButton };
+export { MarkButton, MarkDropdown };

package/dist/esm/components/ui/rich-editor/toolbar/text-color-picker.js

@@ -2,18 +2,16 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { useState } from 'react';
 import { useEditorState } from '../../../../node_modules/@tiptap/react/dist/index.js';
 import { ColorGrid } from './color-swatch.js';
-import { GRAYSCALE_COLORS, TAILWIND_COLORS, THEME_COLORS } from './color-constants.js';
+import { TEXT_GRAYSCALE_COLORS, TEXT_COLORS } from './color-constants.js';
 import { Button } from '../../../buttons/button/button.js';
-import { Label } from '../../../forms/label/label.js';
 import { Popover, PopoverTrigger, PopoverContent } from '../../../popovers/popover/popover.js';
 import { Separator } from '../../../utility/separator/separator.js';
 import { Tooltip, TooltipTrigger, TooltipContent } from '../../../popovers/tooltip/tooltip.js';
 import { cn } from '../../../../lib/utils.js';
-import Palette from '../../../../node_modules/lucide-react/dist/esm/icons/palette.js';
+import ChevronDown from '../../../../node_modules/lucide-react/dist/esm/icons/chevron-down.js';
 
 function TextColorPicker({ editor }) {
     const [open, setOpen] = useState(false);
-    // Get current text color
     const currentColor = useEditorState({
         editor,
         selector: (ctx) => {
@@ -30,14 +28,13 @@ function TextColorPicker({ editor }) {
         editor.chain().focus().unsetColor().run();
         setOpen(false);
     };
-    // Check if extension is available
     const hasColorExtension = editor.extensionManager.extensions.some((ext) => ext.name === "textStyle");
     if (!hasColorExtension) {
         return null;
     }
-    return (jsxs(Popover, { open: open, onOpenChange: setOpen, children: [jsxs(Tooltip, { delayDuration: 300, children: [jsx(TooltipTrigger, { asChild: true, children: jsx(PopoverTrigger, { asChild: true, children: jsx(Button, { variant: "ghost", size: "icon", className: cn("h-8 w-8 rounded-md", {
+    return (jsxs(Popover, { open: open, onOpenChange: setOpen, children: [jsxs(Tooltip, { delayDuration: 300, children: [jsx(TooltipTrigger, { asChild: true, children: jsx(PopoverTrigger, { asChild: true, children: jsxs(Button, { variant: "ghost", size: "sm", className: cn("h-8 gap-1 rounded-md px-2", {
                                     "bg-muted": currentColor,
-                                }), "aria-label": "Text color", children: jsx(Palette, { className: "size-4", style: { color: currentColor || "currentColor" } }) }) }) }), jsx(TooltipContent, { children: "Text color" })] }), jsx(PopoverContent, { className: "w-120 p-4", align: "start", children: jsxs("div", { className: "space-y-4", children: [jsxs("div", { children: [jsx(Label, { className: "text-xs text-muted-foreground mb-2", children: "Grayscale" }), jsx(ColorGrid, { colors: GRAYSCALE_COLORS, currentColor: currentColor, onColorSelect: applyColor, size: "sm" })] }), jsx(Separator, {}), jsxs("div", { children: [jsx(Label, { className: "text-xs text-muted-foreground mb-2", children: "Colors" }), jsx(ColorGrid, { colors: TAILWIND_COLORS, currentColor: currentColor, onColorSelect: applyColor, columns: 16, size: "sm" })] }), jsx(Separator, {}), jsxs("div", { children: [jsx(Label, { className: "text-xs text-muted-foreground mb-2", children: "Theme Colors" }), jsxs("div", { className: "flex items-center justify-between gap-4", children: [jsx(ColorGrid, { colors: THEME_COLORS, currentColor: currentColor, onColorSelect: applyColor, size: "sm" }), jsx(Button, { variant: "outline", size: "sm", onClick: removeColor, children: "Remove Color" })] })] })] }) })] }));
+                                }), "aria-label": "Text color", children: [jsxs("span", { className: "relative inline-flex h-4 w-3 items-end justify-center text-sm font-semibold leading-none", children: [jsx("span", { style: { color: currentColor || "currentColor" }, children: "A" }), jsx("span", { className: "absolute bottom-0 left-0 right-0 h-[1.5px] rounded-full", style: { backgroundColor: currentColor || "currentColor" } })] }), jsx(ChevronDown, { className: "size-3.5 text-muted-foreground" })] }) }) }), jsx(TooltipContent, { children: "Text color" })] }), jsx(PopoverContent, { className: "w-[216px] p-2.5", align: "start", children: jsxs("div", { className: "space-y-2.5", children: [jsxs("div", { className: "space-y-1.5", children: [jsx("p", { className: "text-xs font-medium text-muted-foreground", children: "Neutrals" }), jsx(ColorGrid, { colors: TEXT_GRAYSCALE_COLORS, currentColor: currentColor, onColorSelect: applyColor, columns: 6, size: "sm" })] }), jsx(Separator, {}), jsxs("div", { className: "space-y-1.5", children: [jsx("p", { className: "text-xs font-medium text-muted-foreground", children: "Colors" }), jsx(ColorGrid, { colors: TEXT_COLORS, currentColor: currentColor, onColorSelect: applyColor, columns: 6, size: "sm" })] }), jsx(Separator, {}), jsx(Button, { variant: "outline", size: "sm", onClick: removeColor, className: "h-9 w-full", children: "Reset text color" })] }) })] }));
 }
 
 export { TextColorPicker };

package/dist/esm/components/ui/rich-editor/toolbar/toolbar-button.js

@@ -1,9 +1,10 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { Button } from '../../../buttons/button/button.js';
 import { Tooltip, TooltipTrigger, TooltipContent } from '../../../popovers/tooltip/tooltip.js';
+import { cn } from '../../../../lib/utils.js';
 
-function ToolbarButton({ icon, onClick, tooltip, ariaLabel, disabled }) {
-    return (jsxs(Tooltip, { delayDuration: 300, children: [jsx(TooltipTrigger, { asChild: true, children: jsx(Button, { variant: "ghost", size: "sm", className: "h-8 w-8 p-0", onClick: onClick, "aria-label": ariaLabel, disabled: disabled, children: icon }) }), tooltip ? jsx(TooltipContent, { children: tooltip }) : null] }));
+function ToolbarButton({ icon, onClick, tooltip, ariaLabel, disabled, active = false }) {
+    return (jsxs(Tooltip, { delayDuration: 300, children: [jsx(TooltipTrigger, { asChild: true, children: jsx(Button, { variant: "ghost", size: "sm", className: cn("h-8 w-8 p-0", active && "bg-accent text-accent-foreground"), onClick: onClick, "aria-label": ariaLabel, disabled: disabled, children: icon }) }), tooltip ? jsx(TooltipContent, { children: tooltip }) : null] }));
 }
 
 export { ToolbarButton };

package/dist/esm/components/ui/rich-editor/toolbar/toolbar-dropdown.js

@@ -8,7 +8,7 @@ import ChevronDown from '../../../../node_modules/lucide-react/dist/esm/icons/ch
  * A dropdown menu for the toolbar that tracks which option is currently active.
  * Used for headings, font family, font size, etc.
  */
-function ToolbarDropdown({ editor, options, defaultLabel = "Select", className }) {
+function ToolbarDropdown({ editor, options, icon, defaultLabel = "Select", className }) {
     const activeOption = useEditorState({
         editor,
         selector: (ctx) => {
@@ -17,7 +17,7 @@ function ToolbarDropdown({ editor, options, defaultLabel = "Select", className }
             return options.find((option) => option.isActive(ctx.editor)) || null;
         },
     });
-    return (jsxs(DropdownMenu, { children: [jsx(DropdownMenuTrigger, { asChild: true, children: jsxs(Button, { variant: "ghost", size: "sm", className: "h-8 gap-1 px-2", children: [jsx("span", { className: "text-xs", children: (activeOption === null || activeOption === void 0 ? void 0 : activeOption.label) || defaultLabel }), jsx(ChevronDown, { className: "size-3" })] }) }), jsx(DropdownMenuContent, { align: "start", className: className, children: options.map((option) => (jsxs(DropdownMenuItem, { onClick: () => option.command(editor), className: (activeOption === null || activeOption === void 0 ? void 0 : activeOption.value) === option.value ? "bg-muted" : "", children: [option.icon, option.label] }, option.value))) })] }));
+    return (jsxs(DropdownMenu, { children: [jsx(DropdownMenuTrigger, { asChild: true, children: jsxs(Button, { variant: "ghost", size: "sm", className: "h-8 gap-1 px-2", children: [icon, jsx("span", { className: "text-xs", children: (activeOption === null || activeOption === void 0 ? void 0 : activeOption.label) || defaultLabel }), jsx(ChevronDown, { className: "size-3" })] }) }), jsx(DropdownMenuContent, { align: "start", className: className, children: options.map((option) => (jsxs(DropdownMenuItem, { onClick: () => option.command(editor), className: (activeOption === null || activeOption === void 0 ? void 0 : activeOption.value) === option.value ? "bg-muted" : "", children: [option.icon, option.label] }, option.value))) })] }));
 }
 
 export { ToolbarDropdown };