@intlayer/design-system 9.0.0-canary.0 → 9.0.0-canary.2

package/dist/esm/components/MarkdownEditor/selectors/NodeSelector.mjs

@@ -0,0 +1,139 @@
+'use client';
+
+import { cn } from "../../../utils/cn.mjs";
+import { useEditor } from "../novel/components/index.mjs";
+import { useEffect, useRef, useState } from "react";
+import { Check, CheckSquare, ChevronDown, Code, Heading1, Heading2, Heading3, ListOrdered, TextIcon, TextQuote } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useIntlayer } from "react-intlayer";
+
+//#region src/components/MarkdownEditor/selectors/NodeSelector.tsx
+const items = [
+	{
+		name: "Text",
+		icon: TextIcon,
+		command: (editor) => editor.chain().focus().clearNodes().run(),
+		isActive: (editor) => editor.isActive("paragraph") && !editor.isActive("bulletList") && !editor.isActive("orderedList")
+	},
+	{
+		name: "Heading 1",
+		icon: Heading1,
+		command: (editor) => editor.chain().focus().clearNodes().toggleHeading({ level: 1 }).run(),
+		isActive: (editor) => editor.isActive("heading", { level: 1 })
+	},
+	{
+		name: "Heading 2",
+		icon: Heading2,
+		command: (editor) => editor.chain().focus().clearNodes().toggleHeading({ level: 2 }).run(),
+		isActive: (editor) => editor.isActive("heading", { level: 2 })
+	},
+	{
+		name: "Heading 3",
+		icon: Heading3,
+		command: (editor) => editor.chain().focus().clearNodes().toggleHeading({ level: 3 }).run(),
+		isActive: (editor) => editor.isActive("heading", { level: 3 })
+	},
+	{
+		name: "To-do List",
+		icon: CheckSquare,
+		command: (editor) => editor.chain().focus().clearNodes().toggleTaskList().run(),
+		isActive: (editor) => editor.isActive("taskItem")
+	},
+	{
+		name: "Bullet List",
+		icon: ListOrdered,
+		command: (editor) => editor.chain().focus().clearNodes().toggleBulletList().run(),
+		isActive: (editor) => editor.isActive("bulletList")
+	},
+	{
+		name: "Numbered List",
+		icon: ListOrdered,
+		command: (editor) => editor.chain().focus().clearNodes().toggleOrderedList().run(),
+		isActive: (editor) => editor.isActive("orderedList")
+	},
+	{
+		name: "Quote",
+		icon: TextQuote,
+		command: (editor) => editor.chain().focus().clearNodes().toggleBlockquote().run(),
+		isActive: (editor) => editor.isActive("blockquote")
+	},
+	{
+		name: "Code",
+		icon: Code,
+		command: (editor) => editor.chain().focus().clearNodes().toggleCodeBlock().run(),
+		isActive: (editor) => editor.isActive("codeBlock")
+	}
+];
+/**
+* Bubble-menu selector that converts the current block between paragraph,
+* headings, lists, quote and code.
+*
+* Uses `onMouseDown` + `preventDefault` on every interactive element so the
+* editor's selection is never cleared while the panel is open.
+*/
+const NodeSelector = () => {
+	const { editor } = useEditor();
+	const [isOpen, setIsOpen] = useState(false);
+	const containerRef = useRef(null);
+	const content = useIntlayer("markdown-editor");
+	useEffect(() => {
+		if (!isOpen) return;
+		const handleOutsideMouseDown = (event) => {
+			if (!containerRef.current?.contains(event.target)) setIsOpen(false);
+		};
+		document.addEventListener("mousedown", handleOutsideMouseDown);
+		return () => document.removeEventListener("mousedown", handleOutsideMouseDown);
+	}, [isOpen]);
+	if (!editor) return null;
+	const activeItem = items.filter((item) => item.isActive(editor)).pop() ?? { name: "Multiple" };
+	const getItemName = (name) => {
+		switch (name) {
+			case "Text": return content.text.value;
+			case "Heading 1": return content.heading1.value;
+			case "Heading 2": return content.heading2.value;
+			case "Heading 3": return content.heading3.value;
+			case "To-do List": return content.todoList.value;
+			case "Bullet List": return content.bulletList.value;
+			case "Numbered List": return content.numberedList.value;
+			case "Quote": return content.quote.value;
+			case "Code": return content.code.value;
+			case "Multiple": return content.multiple.value;
+			default: return name;
+		}
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		ref: containerRef,
+		className: "relative",
+		children: [/* @__PURE__ */ jsxs("button", {
+			type: "button",
+			onMouseDown: (e) => {
+				e.preventDefault();
+				setIsOpen((prev) => !prev);
+			},
+			className: "flex items-center gap-1 whitespace-nowrap rounded-none px-3 py-1.5 text-sm hover:bg-accent",
+			children: [/* @__PURE__ */ jsx("span", { children: getItemName(activeItem.name) }), /* @__PURE__ */ jsx(ChevronDown, { className: cn("size-3 transition-transform", isOpen && "rotate-180") })]
+		}), isOpen && /* @__PURE__ */ jsx("div", {
+			className: "absolute top-[calc(100%+0.5rem)] left-0 z-50 w-48 rounded-md border bg-popover p-1 shadow-md",
+			children: items.map((item) => /* @__PURE__ */ jsxs("button", {
+				type: "button",
+				onMouseDown: (e) => {
+					e.preventDefault();
+					item.command(editor);
+					setIsOpen(false);
+				},
+				className: "flex w-full cursor-pointer items-center justify-between rounded-sm px-2 py-1 text-sm hover:bg-accent",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "flex items-center space-x-2",
+					children: [/* @__PURE__ */ jsx("div", {
+						className: "rounded-sm border p-1",
+						children: /* @__PURE__ */ jsx(item.icon, { className: "size-3" })
+					}), /* @__PURE__ */ jsx("span", { children: getItemName(item.name) })]
+				}), activeItem.name === item.name && /* @__PURE__ */ jsx(Check, { className: "size-4" })]
+			}, item.name))
+		})]
+	});
+};
+
+//#endregion
+export { NodeSelector };
+//# sourceMappingURL=NodeSelector.mjs.map

package/dist/esm/components/MarkdownEditor/selectors/NodeSelector.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NodeSelector.mjs","names":[],"sources":["../../../../../src/components/MarkdownEditor/selectors/NodeSelector.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@utils/cn';\nimport {\n  Check,\n  CheckSquare,\n  ChevronDown,\n  Code,\n  Heading1,\n  Heading2,\n  Heading3,\n  ListOrdered,\n  type LucideIcon,\n  TextIcon,\n  TextQuote,\n} from 'lucide-react';\nimport { type FC, useEffect, useRef, useState } from 'react';\nimport { useIntlayer } from 'react-intlayer';\nimport { type EditorInstance, useEditor } from '../novel';\n\nexport type SelectorItem = {\n  name: string;\n  icon: LucideIcon;\n  command: (editor: NonNullable<EditorInstance>) => void;\n  isActive: (editor: NonNullable<EditorInstance>) => boolean;\n};\n\nconst items: SelectorItem[] = [\n  {\n    name: 'Text',\n    icon: TextIcon,\n    command: (editor) => editor.chain().focus().clearNodes().run(),\n    isActive: (editor) =>\n      editor.isActive('paragraph') &&\n      !editor.isActive('bulletList') &&\n      !editor.isActive('orderedList'),\n  },\n  {\n    name: 'Heading 1',\n    icon: Heading1,\n    command: (editor) =>\n      editor.chain().focus().clearNodes().toggleHeading({ level: 1 }).run(),\n    isActive: (editor) => editor.isActive('heading', { level: 1 }),\n  },\n  {\n    name: 'Heading 2',\n    icon: Heading2,\n    command: (editor) =>\n      editor.chain().focus().clearNodes().toggleHeading({ level: 2 }).run(),\n    isActive: (editor) => editor.isActive('heading', { level: 2 }),\n  },\n  {\n    name: 'Heading 3',\n    icon: Heading3,\n    command: (editor) =>\n      editor.chain().focus().clearNodes().toggleHeading({ level: 3 }).run(),\n    isActive: (editor) => editor.isActive('heading', { level: 3 }),\n  },\n  {\n    name: 'To-do List',\n    icon: CheckSquare,\n    command: (editor) =>\n      editor.chain().focus().clearNodes().toggleTaskList().run(),\n    isActive: (editor) => editor.isActive('taskItem'),\n  },\n  {\n    name: 'Bullet List',\n    icon: ListOrdered,\n    command: (editor) =>\n      editor.chain().focus().clearNodes().toggleBulletList().run(),\n    isActive: (editor) => editor.isActive('bulletList'),\n  },\n  {\n    name: 'Numbered List',\n    icon: ListOrdered,\n    command: (editor) =>\n      editor.chain().focus().clearNodes().toggleOrderedList().run(),\n    isActive: (editor) => editor.isActive('orderedList'),\n  },\n  {\n    name: 'Quote',\n    icon: TextQuote,\n    command: (editor) =>\n      editor.chain().focus().clearNodes().toggleBlockquote().run(),\n    isActive: (editor) => editor.isActive('blockquote'),\n  },\n  {\n    name: 'Code',\n    icon: Code,\n    command: (editor) =>\n      editor.chain().focus().clearNodes().toggleCodeBlock().run(),\n    isActive: (editor) => editor.isActive('codeBlock'),\n  },\n];\n\n/**\n * Bubble-menu selector that converts the current block between paragraph,\n * headings, lists, quote and code.\n *\n * Uses `onMouseDown` + `preventDefault` on every interactive element so the\n * editor's selection is never cleared while the panel is open.\n */\nexport const NodeSelector: FC = () => {\n  const { editor } = useEditor();\n  const [isOpen, setIsOpen] = useState(false);\n  const containerRef = useRef<HTMLDivElement>(null);\n  const content = useIntlayer('markdown-editor');\n\n  useEffect(() => {\n    if (!isOpen) return;\n    const handleOutsideMouseDown = (event: MouseEvent) => {\n      if (!containerRef.current?.contains(event.target as Node)) {\n        setIsOpen(false);\n      }\n    };\n    document.addEventListener('mousedown', handleOutsideMouseDown);\n    return () =>\n      document.removeEventListener('mousedown', handleOutsideMouseDown);\n  }, [isOpen]);\n\n  if (!editor) return null;\n\n  const activeItem = items.filter((item) => item.isActive(editor)).pop() ?? {\n    name: 'Multiple',\n  };\n\n  const getItemName = (name: string) => {\n    switch (name) {\n      case 'Text':\n        return content.text.value;\n      case 'Heading 1':\n        return content.heading1.value;\n      case 'Heading 2':\n        return content.heading2.value;\n      case 'Heading 3':\n        return content.heading3.value;\n      case 'To-do List':\n        return content.todoList.value;\n      case 'Bullet List':\n        return content.bulletList.value;\n      case 'Numbered List':\n        return content.numberedList.value;\n      case 'Quote':\n        return content.quote.value;\n      case 'Code':\n        return content.code.value;\n      case 'Multiple':\n        return content.multiple.value;\n      default:\n        return name;\n    }\n  };\n\n  return (\n    <div ref={containerRef} className=\"relative\">\n      <button\n        type=\"button\"\n        onMouseDown={(e) => {\n          e.preventDefault();\n          setIsOpen((prev) => !prev);\n        }}\n        className=\"flex items-center gap-1 whitespace-nowrap rounded-none px-3 py-1.5 text-sm hover:bg-accent\"\n      >\n        <span>{getItemName(activeItem.name)}</span>\n        <ChevronDown\n          className={cn('size-3 transition-transform', isOpen && 'rotate-180')}\n        />\n      </button>\n\n      {isOpen && (\n        <div className=\"absolute top-[calc(100%+0.5rem)] left-0 z-50 w-48 rounded-md border bg-popover p-1 shadow-md\">\n          {items.map((item) => (\n            <button\n              type=\"button\"\n              key={item.name}\n              onMouseDown={(e) => {\n                e.preventDefault();\n                item.command(editor);\n                setIsOpen(false);\n              }}\n              className=\"flex w-full cursor-pointer items-center justify-between rounded-sm px-2 py-1 text-sm hover:bg-accent\"\n            >\n              <div className=\"flex items-center space-x-2\">\n                <div className=\"rounded-sm border p-1\">\n                  <item.icon className=\"size-3\" />\n                </div>\n                <span>{getItemName(item.name)}</span>\n              </div>\n              {activeItem.name === item.name && <Check className=\"size-4\" />}\n            </button>\n          ))}\n        </div>\n      )}\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;AA2BA,MAAM,QAAwB;CAC5B;EACE,MAAM;EACN,MAAM;EACN,UAAU,WAAW,OAAO,OAAO,CAAC,OAAO,CAAC,YAAY,CAAC,KAAK;EAC9D,WAAW,WACT,OAAO,SAAS,YAAY,IAC5B,CAAC,OAAO,SAAS,aAAa,IAC9B,CAAC,OAAO,SAAS,cAAc;EAClC;CACD;EACE,MAAM;EACN,MAAM;EACN,UAAU,WACR,OAAO,OAAO,CAAC,OAAO,CAAC,YAAY,CAAC,cAAc,EAAE,OAAO,GAAG,CAAC,CAAC,KAAK;EACvE,WAAW,WAAW,OAAO,SAAS,WAAW,EAAE,OAAO,GAAG,CAAC;EAC/D;CACD;EACE,MAAM;EACN,MAAM;EACN,UAAU,WACR,OAAO,OAAO,CAAC,OAAO,CAAC,YAAY,CAAC,cAAc,EAAE,OAAO,GAAG,CAAC,CAAC,KAAK;EACvE,WAAW,WAAW,OAAO,SAAS,WAAW,EAAE,OAAO,GAAG,CAAC;EAC/D;CACD;EACE,MAAM;EACN,MAAM;EACN,UAAU,WACR,OAAO,OAAO,CAAC,OAAO,CAAC,YAAY,CAAC,cAAc,EAAE,OAAO,GAAG,CAAC,CAAC,KAAK;EACvE,WAAW,WAAW,OAAO,SAAS,WAAW,EAAE,OAAO,GAAG,CAAC;EAC/D;CACD;EACE,MAAM;EACN,MAAM;EACN,UAAU,WACR,OAAO,OAAO,CAAC,OAAO,CAAC,YAAY,CAAC,gBAAgB,CAAC,KAAK;EAC5D,WAAW,WAAW,OAAO,SAAS,WAAW;EAClD;CACD;EACE,MAAM;EACN,MAAM;EACN,UAAU,WACR,OAAO,OAAO,CAAC,OAAO,CAAC,YAAY,CAAC,kBAAkB,CAAC,KAAK;EAC9D,WAAW,WAAW,OAAO,SAAS,aAAa;EACpD;CACD;EACE,MAAM;EACN,MAAM;EACN,UAAU,WACR,OAAO,OAAO,CAAC,OAAO,CAAC,YAAY,CAAC,mBAAmB,CAAC,KAAK;EAC/D,WAAW,WAAW,OAAO,SAAS,cAAc;EACrD;CACD;EACE,MAAM;EACN,MAAM;EACN,UAAU,WACR,OAAO,OAAO,CAAC,OAAO,CAAC,YAAY,CAAC,kBAAkB,CAAC,KAAK;EAC9D,WAAW,WAAW,OAAO,SAAS,aAAa;EACpD;CACD;EACE,MAAM;EACN,MAAM;EACN,UAAU,WACR,OAAO,OAAO,CAAC,OAAO,CAAC,YAAY,CAAC,iBAAiB,CAAC,KAAK;EAC7D,WAAW,WAAW,OAAO,SAAS,YAAY;EACnD;CACF;;;;;;;;AASD,MAAa,qBAAyB;CACpC,MAAM,EAAE,WAAW,WAAW;CAC9B,MAAM,CAAC,QAAQ,aAAa,SAAS,MAAM;CAC3C,MAAM,eAAe,OAAuB,KAAK;CACjD,MAAM,UAAU,YAAY,kBAAkB;AAE9C,iBAAgB;AACd,MAAI,CAAC,OAAQ;EACb,MAAM,0BAA0B,UAAsB;AACpD,OAAI,CAAC,aAAa,SAAS,SAAS,MAAM,OAAe,CACvD,WAAU,MAAM;;AAGpB,WAAS,iBAAiB,aAAa,uBAAuB;AAC9D,eACE,SAAS,oBAAoB,aAAa,uBAAuB;IAClE,CAAC,OAAO,CAAC;AAEZ,KAAI,CAAC,OAAQ,QAAO;CAEpB,MAAM,aAAa,MAAM,QAAQ,SAAS,KAAK,SAAS,OAAO,CAAC,CAAC,KAAK,IAAI,EACxE,MAAM,YACP;CAED,MAAM,eAAe,SAAiB;AACpC,UAAQ,MAAR;GACE,KAAK,OACH,QAAO,QAAQ,KAAK;GACtB,KAAK,YACH,QAAO,QAAQ,SAAS;GAC1B,KAAK,YACH,QAAO,QAAQ,SAAS;GAC1B,KAAK,YACH,QAAO,QAAQ,SAAS;GAC1B,KAAK,aACH,QAAO,QAAQ,SAAS;GAC1B,KAAK,cACH,QAAO,QAAQ,WAAW;GAC5B,KAAK,gBACH,QAAO,QAAQ,aAAa;GAC9B,KAAK,QACH,QAAO,QAAQ,MAAM;GACvB,KAAK,OACH,QAAO,QAAQ,KAAK;GACtB,KAAK,WACH,QAAO,QAAQ,SAAS;GAC1B,QACE,QAAO;;;AAIb,QACE,qBAAC,OAAD;EAAK,KAAK;EAAc,WAAU;YAAlC,CACE,qBAAC,UAAD;GACE,MAAK;GACL,cAAc,MAAM;AAClB,MAAE,gBAAgB;AAClB,eAAW,SAAS,CAAC,KAAK;;GAE5B,WAAU;aANZ,CAQE,oBAAC,QAAD,YAAO,YAAY,WAAW,KAAK,EAAQ,GAC3C,oBAAC,aAAD,EACE,WAAW,GAAG,+BAA+B,UAAU,aAAa,EACpE,EACK;MAER,UACC,oBAAC,OAAD;GAAK,WAAU;aACZ,MAAM,KAAK,SACV,qBAAC,UAAD;IACE,MAAK;IAEL,cAAc,MAAM;AAClB,OAAE,gBAAgB;AAClB,UAAK,QAAQ,OAAO;AACpB,eAAU,MAAM;;IAElB,WAAU;cARZ,CAUE,qBAAC,OAAD;KAAK,WAAU;eAAf,CACE,oBAAC,OAAD;MAAK,WAAU;gBACb,oBAAC,KAAK,MAAN,EAAW,WAAU,UAAW;MAC5B,GACN,oBAAC,QAAD,YAAO,YAAY,KAAK,KAAK,EAAQ,EACjC;QACL,WAAW,SAAS,KAAK,QAAQ,oBAAC,OAAD,EAAO,WAAU,UAAW,EACvD;MAfF,KAAK,KAeH,CACT;GACE,EAEJ"}

package/dist/esm/components/MarkdownEditor/selectors/TextButtons.mjs

@@ -0,0 +1,81 @@
+'use client';
+
+import { cn } from "../../../utils/cn.mjs";
+import { Button } from "../../Button/Button.mjs";
+import { EditorBubbleItem } from "../novel/components/editor-bubble-item.mjs";
+import { useEditor } from "../novel/components/index.mjs";
+import { BoldIcon, CodeIcon, ItalicIcon, StrikethroughIcon, UnderlineIcon } from "lucide-react";
+import { jsx } from "react/jsx-runtime";
+import { useIntlayer } from "react-intlayer";
+
+//#region src/components/MarkdownEditor/selectors/TextButtons.tsx
+/**
+* Inline mark toggles (bold / italic / underline / strike / code) shown in the
+* bubble menu.
+*/
+const TextButtons = () => {
+	const { editor } = useEditor();
+	const content = useIntlayer("markdown-editor");
+	if (!editor) return null;
+	const items = [
+		{
+			name: "bold",
+			isActive: (currentEditor) => currentEditor.isActive("bold"),
+			command: (currentEditor) => currentEditor.chain().focus().toggleBold().run(),
+			icon: BoldIcon
+		},
+		{
+			name: "italic",
+			isActive: (currentEditor) => currentEditor.isActive("italic"),
+			command: (currentEditor) => currentEditor.chain().focus().toggleItalic().run(),
+			icon: ItalicIcon
+		},
+		{
+			name: "underline",
+			isActive: (currentEditor) => currentEditor.isActive("underline"),
+			command: (currentEditor) => currentEditor.chain().focus().toggleUnderline().run(),
+			icon: UnderlineIcon
+		},
+		{
+			name: "strike",
+			isActive: (currentEditor) => currentEditor.isActive("strike"),
+			command: (currentEditor) => currentEditor.chain().focus().toggleStrike().run(),
+			icon: StrikethroughIcon
+		},
+		{
+			name: "code",
+			isActive: (currentEditor) => currentEditor.isActive("code"),
+			command: (currentEditor) => currentEditor.chain().focus().toggleCode().run(),
+			icon: CodeIcon
+		}
+	];
+	const getButtonLabel = (name) => {
+		switch (name) {
+			case "bold": return content.bold.value;
+			case "italic": return content.italic.value;
+			case "underline": return content.underline.value;
+			case "strike": return content.strike.value;
+			case "code": return content.code.value;
+			default: return name;
+		}
+	};
+	return /* @__PURE__ */ jsx("div", {
+		className: "flex",
+		children: items.map((item) => /* @__PURE__ */ jsx(EditorBubbleItem, {
+			onSelect: (selectedEditor) => item.command(selectedEditor),
+			children: /* @__PURE__ */ jsx(Button, {
+				label: getButtonLabel(item.name),
+				size: "icon-sm",
+				variant: "hoverable",
+				color: "text",
+				roundedSize: "none",
+				Icon: item.icon,
+				iconClassName: cn(item.isActive(editor) && "text-blue-500")
+			})
+		}, item.name))
+	});
+};
+
+//#endregion
+export { TextButtons };
+//# sourceMappingURL=TextButtons.mjs.map

package/dist/esm/components/MarkdownEditor/selectors/TextButtons.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextButtons.mjs","names":[],"sources":["../../../../../src/components/MarkdownEditor/selectors/TextButtons.tsx"],"sourcesContent":["'use client';\n\nimport { Button } from '@components/Button';\nimport { cn } from '@utils/cn';\nimport {\n  BoldIcon,\n  CodeIcon,\n  ItalicIcon,\n  StrikethroughIcon,\n  UnderlineIcon,\n} from 'lucide-react';\nimport { useIntlayer } from 'react-intlayer';\nimport { EditorBubbleItem, useEditor } from '../novel';\nimport type { SelectorItem } from './NodeSelector';\n\n/**\n * Inline mark toggles (bold / italic / underline / strike / code) shown in the\n * bubble menu.\n */\nexport const TextButtons = () => {\n  const { editor } = useEditor();\n  const content = useIntlayer('markdown-editor');\n\n  if (!editor) return null;\n\n  const items: SelectorItem[] = [\n    {\n      name: 'bold',\n      isActive: (currentEditor) => currentEditor.isActive('bold'),\n      command: (currentEditor) =>\n        currentEditor.chain().focus().toggleBold().run(),\n      icon: BoldIcon,\n    },\n    {\n      name: 'italic',\n      isActive: (currentEditor) => currentEditor.isActive('italic'),\n      command: (currentEditor) =>\n        currentEditor.chain().focus().toggleItalic().run(),\n      icon: ItalicIcon,\n    },\n    {\n      name: 'underline',\n      isActive: (currentEditor) => currentEditor.isActive('underline'),\n      command: (currentEditor) =>\n        currentEditor.chain().focus().toggleUnderline().run(),\n      icon: UnderlineIcon,\n    },\n    {\n      name: 'strike',\n      isActive: (currentEditor) => currentEditor.isActive('strike'),\n      command: (currentEditor) =>\n        currentEditor.chain().focus().toggleStrike().run(),\n      icon: StrikethroughIcon,\n    },\n    {\n      name: 'code',\n      isActive: (currentEditor) => currentEditor.isActive('code'),\n      command: (currentEditor) =>\n        currentEditor.chain().focus().toggleCode().run(),\n      icon: CodeIcon,\n    },\n  ];\n\n  const getButtonLabel = (name: string) => {\n    switch (name) {\n      case 'bold':\n        return content.bold.value;\n      case 'italic':\n        return content.italic.value;\n      case 'underline':\n        return content.underline.value;\n      case 'strike':\n        return content.strike.value;\n      case 'code':\n        return content.code.value;\n      default:\n        return name;\n    }\n  };\n\n  return (\n    <div className=\"flex\">\n      {items.map((item) => (\n        <EditorBubbleItem\n          key={item.name}\n          onSelect={(selectedEditor) => item.command(selectedEditor)}\n        >\n          <Button\n            label={getButtonLabel(item.name)}\n            size=\"icon-sm\"\n            variant=\"hoverable\"\n            color=\"text\"\n            roundedSize=\"none\"\n            Icon={item.icon}\n            iconClassName={cn(item.isActive(editor) && 'text-blue-500')}\n          />\n        </EditorBubbleItem>\n      ))}\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;AAmBA,MAAa,oBAAoB;CAC/B,MAAM,EAAE,WAAW,WAAW;CAC9B,MAAM,UAAU,YAAY,kBAAkB;AAE9C,KAAI,CAAC,OAAQ,QAAO;CAEpB,MAAM,QAAwB;EAC5B;GACE,MAAM;GACN,WAAW,kBAAkB,cAAc,SAAS,OAAO;GAC3D,UAAU,kBACR,cAAc,OAAO,CAAC,OAAO,CAAC,YAAY,CAAC,KAAK;GAClD,MAAM;GACP;EACD;GACE,MAAM;GACN,WAAW,kBAAkB,cAAc,SAAS,SAAS;GAC7D,UAAU,kBACR,cAAc,OAAO,CAAC,OAAO,CAAC,cAAc,CAAC,KAAK;GACpD,MAAM;GACP;EACD;GACE,MAAM;GACN,WAAW,kBAAkB,cAAc,SAAS,YAAY;GAChE,UAAU,kBACR,cAAc,OAAO,CAAC,OAAO,CAAC,iBAAiB,CAAC,KAAK;GACvD,MAAM;GACP;EACD;GACE,MAAM;GACN,WAAW,kBAAkB,cAAc,SAAS,SAAS;GAC7D,UAAU,kBACR,cAAc,OAAO,CAAC,OAAO,CAAC,cAAc,CAAC,KAAK;GACpD,MAAM;GACP;EACD;GACE,MAAM;GACN,WAAW,kBAAkB,cAAc,SAAS,OAAO;GAC3D,UAAU,kBACR,cAAc,OAAO,CAAC,OAAO,CAAC,YAAY,CAAC,KAAK;GAClD,MAAM;GACP;EACF;CAED,MAAM,kBAAkB,SAAiB;AACvC,UAAQ,MAAR;GACE,KAAK,OACH,QAAO,QAAQ,KAAK;GACtB,KAAK,SACH,QAAO,QAAQ,OAAO;GACxB,KAAK,YACH,QAAO,QAAQ,UAAU;GAC3B,KAAK,SACH,QAAO,QAAQ,OAAO;GACxB,KAAK,OACH,QAAO,QAAQ,KAAK;GACtB,QACE,QAAO;;;AAIb,QACE,oBAAC,OAAD;EAAK,WAAU;YACZ,MAAM,KAAK,SACV,oBAAC,kBAAD;GAEE,WAAW,mBAAmB,KAAK,QAAQ,eAAe;aAE1D,oBAAC,QAAD;IACE,OAAO,eAAe,KAAK,KAAK;IAChC,MAAK;IACL,SAAQ;IACR,OAAM;IACN,aAAY;IACZ,MAAM,KAAK;IACX,eAAe,GAAG,KAAK,SAAS,OAAO,IAAI,gBAAgB;IAC3D;GACe,EAZZ,KAAK,KAYO,CACnB;EACE"}

package/dist/esm/components/MarkdownEditor/slashCommand.mjs

@@ -0,0 +1,161 @@
+import { YoutubeLogo } from "../SocialNetworks/YoutubeLogo.mjs";
+import { Command, createSuggestionItems, renderItems } from "./novel/extensions/slash-command.mjs";
+import { CheckSquare, Code, Heading1, Heading2, Heading3, ImageIcon, List, ListOrdered, Text, TextQuote } from "lucide-react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/MarkdownEditor/slashCommand.tsx
+/**
+* Builds the list of slash-command suggestions. The image command needs the
+* runtime `uploadFn`, hence the factory.
+*
+* @param uploadFn - Novel upload handler used by the "Image" command.
+* @param content - The internationalized content object from useIntlayer.
+*/
+const getSuggestionItems = (uploadFn, content) => createSuggestionItems([
+	{
+		title: content.text.value,
+		description: content.textDesc.value,
+		searchTerms: ["p", "paragraph"],
+		icon: /* @__PURE__ */ jsx(Text, { className: "size-10" }),
+		command: ({ editor, range }) => {
+			editor.chain().focus().deleteRange(range).toggleNode("paragraph", "paragraph").run();
+		}
+	},
+	{
+		title: content.todoList.value,
+		description: content.todoListDesc.value,
+		searchTerms: [
+			"todo",
+			"task",
+			"list",
+			"check",
+			"checkbox"
+		],
+		icon: /* @__PURE__ */ jsx(CheckSquare, { className: "size-10" }),
+		command: ({ editor, range }) => {
+			editor.chain().focus().deleteRange(range).toggleTaskList().run();
+		}
+	},
+	{
+		title: content.heading1.value,
+		description: content.heading1Desc.value,
+		searchTerms: [
+			"title",
+			"big",
+			"large"
+		],
+		icon: /* @__PURE__ */ jsx(Heading1, { className: "size-10" }),
+		command: ({ editor, range }) => {
+			editor.chain().focus().deleteRange(range).setNode("heading", { level: 1 }).run();
+		}
+	},
+	{
+		title: content.heading2.value,
+		description: content.heading2Desc.value,
+		searchTerms: ["subtitle", "medium"],
+		icon: /* @__PURE__ */ jsx(Heading2, { className: "size-10" }),
+		command: ({ editor, range }) => {
+			editor.chain().focus().deleteRange(range).setNode("heading", { level: 2 }).run();
+		}
+	},
+	{
+		title: content.heading3.value,
+		description: content.heading3Desc.value,
+		searchTerms: ["subtitle", "small"],
+		icon: /* @__PURE__ */ jsx(Heading3, { className: "size-10" }),
+		command: ({ editor, range }) => {
+			editor.chain().focus().deleteRange(range).setNode("heading", { level: 3 }).run();
+		}
+	},
+	{
+		title: content.bulletList.value,
+		description: content.bulletListDesc.value,
+		searchTerms: ["unordered", "point"],
+		icon: /* @__PURE__ */ jsx(List, { className: "size-10" }),
+		command: ({ editor, range }) => {
+			editor.chain().focus().deleteRange(range).toggleBulletList().run();
+		}
+	},
+	{
+		title: content.numberedList.value,
+		description: content.numberedListDesc.value,
+		searchTerms: ["ordered"],
+		icon: /* @__PURE__ */ jsx(ListOrdered, { className: "size-10" }),
+		command: ({ editor, range }) => {
+			editor.chain().focus().deleteRange(range).toggleOrderedList().run();
+		}
+	},
+	{
+		title: content.quote.value,
+		description: content.quoteDesc.value,
+		searchTerms: ["blockquote"],
+		icon: /* @__PURE__ */ jsx(TextQuote, { className: "size-10" }),
+		command: ({ editor, range }) => editor.chain().focus().deleteRange(range).toggleNode("paragraph", "paragraph").toggleBlockquote().run()
+	},
+	{
+		title: content.code.value,
+		description: content.codeDesc.value,
+		searchTerms: ["codeblock"],
+		icon: /* @__PURE__ */ jsx(Code, { className: "size-10" }),
+		command: ({ editor, range }) => editor.chain().focus().deleteRange(range).toggleCodeBlock().run()
+	},
+	{
+		title: content.image.value,
+		description: content.imageDesc.value,
+		searchTerms: [
+			"photo",
+			"picture",
+			"media"
+		],
+		icon: /* @__PURE__ */ jsx(ImageIcon, { className: "size-10" }),
+		command: ({ editor, range }) => {
+			editor.chain().focus().deleteRange(range).run();
+			const input = document.createElement("input");
+			input.type = "file";
+			input.accept = "image/*";
+			input.onchange = () => {
+				if (input.files?.length) {
+					const file = input.files[0];
+					const pos = editor.view.state.selection.from;
+					uploadFn(file, editor.view, pos);
+				}
+			};
+			input.click();
+		}
+	},
+	{
+		title: content.youtube.value,
+		description: content.youtubeDesc.value,
+		searchTerms: [
+			"video",
+			"youtube",
+			"embed"
+		],
+		icon: /* @__PURE__ */ jsx(YoutubeLogo, { className: "size-10" }),
+		command: ({ editor, range }) => {
+			const videoLink = prompt(content.youtubePrompt.value);
+			if (videoLink && /^((?:https?:)?\/\/)?((?:www|m)\.)?((?:youtube\.com|youtu.be))(\/(?:[\w-]+\?v=|embed\/|v\/)?)([\w-]+)(\S+)?$/.test(videoLink)) editor.chain().focus().deleteRange(range).setYoutubeVideo({ src: videoLink }).run();
+			else if (videoLink !== null) alert(content.youtubeError.value);
+		}
+	}
+]);
+/**
+* Builds the slash-command extension wired to the given upload handler.
+*
+* @param uploadFn - Novel upload handler used by the "Image" command.
+* @param content - The internationalized content object from useIntlayer.
+*/
+const createSlashCommand = (uploadFn, content) => {
+	const suggestionItems = getSuggestionItems(uploadFn, content);
+	return {
+		slashCommand: Command.configure({ suggestion: {
+			items: () => suggestionItems,
+			render: renderItems
+		} }),
+		suggestionItems
+	};
+};
+
+//#endregion
+export { createSlashCommand, getSuggestionItems };
+//# sourceMappingURL=slashCommand.mjs.map

package/dist/esm/components/MarkdownEditor/slashCommand.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"slashCommand.mjs","names":[],"sources":["../../../../src/components/MarkdownEditor/slashCommand.tsx"],"sourcesContent":["import { YoutubeLogo } from '@components/SocialNetworks';\nimport {\n  CheckSquare,\n  Code,\n  Heading1,\n  Heading2,\n  Heading3,\n  ImageIcon,\n  List,\n  ListOrdered,\n  Text,\n  TextQuote,\n} from 'lucide-react';\nimport {\n  Command,\n  createSuggestionItems,\n  renderItems,\n  type SuggestionItem,\n  type UploadFn,\n} from './novel';\n\n/**\n * Builds the list of slash-command suggestions. The image command needs the\n * runtime `uploadFn`, hence the factory.\n *\n * @param uploadFn - Novel upload handler used by the \"Image\" command.\n * @param content - The internationalized content object from useIntlayer.\n */\nexport const getSuggestionItems = (\n  uploadFn: UploadFn,\n  content: any\n): SuggestionItem[] =>\n  createSuggestionItems([\n    {\n      title: content.text.value,\n      description: content.textDesc.value,\n      searchTerms: ['p', 'paragraph'],\n      icon: <Text className=\"size-10\" />,\n      command: ({ editor, range }) => {\n        editor\n          .chain()\n          .focus()\n          .deleteRange(range)\n          .toggleNode('paragraph', 'paragraph')\n          .run();\n      },\n    },\n    {\n      title: content.todoList.value,\n      description: content.todoListDesc.value,\n      searchTerms: ['todo', 'task', 'list', 'check', 'checkbox'],\n      icon: <CheckSquare className=\"size-10\" />,\n      command: ({ editor, range }) => {\n        editor.chain().focus().deleteRange(range).toggleTaskList().run();\n      },\n    },\n    {\n      title: content.heading1.value,\n      description: content.heading1Desc.value,\n      searchTerms: ['title', 'big', 'large'],\n      icon: <Heading1 className=\"size-10\" />,\n      command: ({ editor, range }) => {\n        editor\n          .chain()\n          .focus()\n          .deleteRange(range)\n          .setNode('heading', { level: 1 })\n          .run();\n      },\n    },\n    {\n      title: content.heading2.value,\n      description: content.heading2Desc.value,\n      searchTerms: ['subtitle', 'medium'],\n      icon: <Heading2 className=\"size-10\" />,\n      command: ({ editor, range }) => {\n        editor\n          .chain()\n          .focus()\n          .deleteRange(range)\n          .setNode('heading', { level: 2 })\n          .run();\n      },\n    },\n    {\n      title: content.heading3.value,\n      description: content.heading3Desc.value,\n      searchTerms: ['subtitle', 'small'],\n      icon: <Heading3 className=\"size-10\" />,\n      command: ({ editor, range }) => {\n        editor\n          .chain()\n          .focus()\n          .deleteRange(range)\n          .setNode('heading', { level: 3 })\n          .run();\n      },\n    },\n    {\n      title: content.bulletList.value,\n      description: content.bulletListDesc.value,\n      searchTerms: ['unordered', 'point'],\n      icon: <List className=\"size-10\" />,\n      command: ({ editor, range }) => {\n        editor.chain().focus().deleteRange(range).toggleBulletList().run();\n      },\n    },\n    {\n      title: content.numberedList.value,\n      description: content.numberedListDesc.value,\n      searchTerms: ['ordered'],\n      icon: <ListOrdered className=\"size-10\" />,\n      command: ({ editor, range }) => {\n        editor.chain().focus().deleteRange(range).toggleOrderedList().run();\n      },\n    },\n    {\n      title: content.quote.value,\n      description: content.quoteDesc.value,\n      searchTerms: ['blockquote'],\n      icon: <TextQuote className=\"size-10\" />,\n      command: ({ editor, range }) =>\n        editor\n          .chain()\n          .focus()\n          .deleteRange(range)\n          .toggleNode('paragraph', 'paragraph')\n          .toggleBlockquote()\n          .run(),\n    },\n    {\n      title: content.code.value,\n      description: content.codeDesc.value,\n      searchTerms: ['codeblock'],\n      icon: <Code className=\"size-10\" />,\n      command: ({ editor, range }) =>\n        editor.chain().focus().deleteRange(range).toggleCodeBlock().run(),\n    },\n    {\n      title: content.image.value,\n      description: content.imageDesc.value,\n      searchTerms: ['photo', 'picture', 'media'],\n      icon: <ImageIcon className=\"size-10\" />,\n      command: ({ editor, range }) => {\n        editor.chain().focus().deleteRange(range).run();\n        const input = document.createElement('input');\n        input.type = 'file';\n        input.accept = 'image/*';\n        input.onchange = () => {\n          if (input.files?.length) {\n            const file = input.files[0];\n            const pos = editor.view.state.selection.from;\n            uploadFn(file, editor.view, pos);\n          }\n        };\n        input.click();\n      },\n    },\n    {\n      title: content.youtube.value,\n      description: content.youtubeDesc.value,\n      searchTerms: ['video', 'youtube', 'embed'],\n      icon: <YoutubeLogo className=\"size-10\" />,\n      command: ({ editor, range }) => {\n        const videoLink = prompt(content.youtubePrompt.value);\n        // From https://regexr.com/3dj5t\n        const ytRegex =\n          /^((?:https?:)?\\/\\/)?((?:www|m)\\.)?((?:youtube\\.com|youtu.be))(\\/(?:[\\w-]+\\?v=|embed\\/|v\\/)?)([\\w-]+)(\\S+)?$/;\n\n        if (videoLink && ytRegex.test(videoLink)) {\n          editor\n            .chain()\n            .focus()\n            .deleteRange(range)\n            .setYoutubeVideo({ src: videoLink })\n            .run();\n        } else if (videoLink !== null) {\n          alert(content.youtubeError.value);\n        }\n      },\n    },\n  ]);\n\n/**\n * Builds the slash-command extension wired to the given upload handler.\n *\n * @param uploadFn - Novel upload handler used by the \"Image\" command.\n * @param content - The internationalized content object from useIntlayer.\n */\nexport const createSlashCommand = (uploadFn: UploadFn, content: any) => {\n  const suggestionItems = getSuggestionItems(uploadFn, content);\n\n  const slashCommand = Command.configure({\n    suggestion: {\n      items: () => suggestionItems,\n      render: renderItems,\n    },\n  });\n\n  return { slashCommand, suggestionItems };\n};\n"],"mappings":";;;;;;;;;;;;;AA4BA,MAAa,sBACX,UACA,YAEA,sBAAsB;CACpB;EACE,OAAO,QAAQ,KAAK;EACpB,aAAa,QAAQ,SAAS;EAC9B,aAAa,CAAC,KAAK,YAAY;EAC/B,MAAM,oBAAC,MAAD,EAAM,WAAU,WAAY;EAClC,UAAU,EAAE,QAAQ,YAAY;AAC9B,UACG,OAAO,CACP,OAAO,CACP,YAAY,MAAM,CAClB,WAAW,aAAa,YAAY,CACpC,KAAK;;EAEX;CACD;EACE,OAAO,QAAQ,SAAS;EACxB,aAAa,QAAQ,aAAa;EAClC,aAAa;GAAC;GAAQ;GAAQ;GAAQ;GAAS;GAAW;EAC1D,MAAM,oBAAC,aAAD,EAAa,WAAU,WAAY;EACzC,UAAU,EAAE,QAAQ,YAAY;AAC9B,UAAO,OAAO,CAAC,OAAO,CAAC,YAAY,MAAM,CAAC,gBAAgB,CAAC,KAAK;;EAEnE;CACD;EACE,OAAO,QAAQ,SAAS;EACxB,aAAa,QAAQ,aAAa;EAClC,aAAa;GAAC;GAAS;GAAO;GAAQ;EACtC,MAAM,oBAAC,UAAD,EAAU,WAAU,WAAY;EACtC,UAAU,EAAE,QAAQ,YAAY;AAC9B,UACG,OAAO,CACP,OAAO,CACP,YAAY,MAAM,CAClB,QAAQ,WAAW,EAAE,OAAO,GAAG,CAAC,CAChC,KAAK;;EAEX;CACD;EACE,OAAO,QAAQ,SAAS;EACxB,aAAa,QAAQ,aAAa;EAClC,aAAa,CAAC,YAAY,SAAS;EACnC,MAAM,oBAAC,UAAD,EAAU,WAAU,WAAY;EACtC,UAAU,EAAE,QAAQ,YAAY;AAC9B,UACG,OAAO,CACP,OAAO,CACP,YAAY,MAAM,CAClB,QAAQ,WAAW,EAAE,OAAO,GAAG,CAAC,CAChC,KAAK;;EAEX;CACD;EACE,OAAO,QAAQ,SAAS;EACxB,aAAa,QAAQ,aAAa;EAClC,aAAa,CAAC,YAAY,QAAQ;EAClC,MAAM,oBAAC,UAAD,EAAU,WAAU,WAAY;EACtC,UAAU,EAAE,QAAQ,YAAY;AAC9B,UACG,OAAO,CACP,OAAO,CACP,YAAY,MAAM,CAClB,QAAQ,WAAW,EAAE,OAAO,GAAG,CAAC,CAChC,KAAK;;EAEX;CACD;EACE,OAAO,QAAQ,WAAW;EAC1B,aAAa,QAAQ,eAAe;EACpC,aAAa,CAAC,aAAa,QAAQ;EACnC,MAAM,oBAAC,MAAD,EAAM,WAAU,WAAY;EAClC,UAAU,EAAE,QAAQ,YAAY;AAC9B,UAAO,OAAO,CAAC,OAAO,CAAC,YAAY,MAAM,CAAC,kBAAkB,CAAC,KAAK;;EAErE;CACD;EACE,OAAO,QAAQ,aAAa;EAC5B,aAAa,QAAQ,iBAAiB;EACtC,aAAa,CAAC,UAAU;EACxB,MAAM,oBAAC,aAAD,EAAa,WAAU,WAAY;EACzC,UAAU,EAAE,QAAQ,YAAY;AAC9B,UAAO,OAAO,CAAC,OAAO,CAAC,YAAY,MAAM,CAAC,mBAAmB,CAAC,KAAK;;EAEtE;CACD;EACE,OAAO,QAAQ,MAAM;EACrB,aAAa,QAAQ,UAAU;EAC/B,aAAa,CAAC,aAAa;EAC3B,MAAM,oBAAC,WAAD,EAAW,WAAU,WAAY;EACvC,UAAU,EAAE,QAAQ,YAClB,OACG,OAAO,CACP,OAAO,CACP,YAAY,MAAM,CAClB,WAAW,aAAa,YAAY,CACpC,kBAAkB,CAClB,KAAK;EACX;CACD;EACE,OAAO,QAAQ,KAAK;EACpB,aAAa,QAAQ,SAAS;EAC9B,aAAa,CAAC,YAAY;EAC1B,MAAM,oBAAC,MAAD,EAAM,WAAU,WAAY;EAClC,UAAU,EAAE,QAAQ,YAClB,OAAO,OAAO,CAAC,OAAO,CAAC,YAAY,MAAM,CAAC,iBAAiB,CAAC,KAAK;EACpE;CACD;EACE,OAAO,QAAQ,MAAM;EACrB,aAAa,QAAQ,UAAU;EAC/B,aAAa;GAAC;GAAS;GAAW;GAAQ;EAC1C,MAAM,oBAAC,WAAD,EAAW,WAAU,WAAY;EACvC,UAAU,EAAE,QAAQ,YAAY;AAC9B,UAAO,OAAO,CAAC,OAAO,CAAC,YAAY,MAAM,CAAC,KAAK;GAC/C,MAAM,QAAQ,SAAS,cAAc,QAAQ;AAC7C,SAAM,OAAO;AACb,SAAM,SAAS;AACf,SAAM,iBAAiB;AACrB,QAAI,MAAM,OAAO,QAAQ;KACvB,MAAM,OAAO,MAAM,MAAM;KACzB,MAAM,MAAM,OAAO,KAAK,MAAM,UAAU;AACxC,cAAS,MAAM,OAAO,MAAM,IAAI;;;AAGpC,SAAM,OAAO;;EAEhB;CACD;EACE,OAAO,QAAQ,QAAQ;EACvB,aAAa,QAAQ,YAAY;EACjC,aAAa;GAAC;GAAS;GAAW;GAAQ;EAC1C,MAAM,oBAAC,aAAD,EAAa,WAAU,WAAY;EACzC,UAAU,EAAE,QAAQ,YAAY;GAC9B,MAAM,YAAY,OAAO,QAAQ,cAAc,MAAM;AAKrD,OAAI,aAAa,8GAAQ,KAAK,UAAU,CACtC,QACG,OAAO,CACP,OAAO,CACP,YAAY,MAAM,CAClB,gBAAgB,EAAE,KAAK,WAAW,CAAC,CACnC,KAAK;YACC,cAAc,KACvB,OAAM,QAAQ,aAAa,MAAM;;EAGtC;CACF,CAAC;;;;;;;AAQJ,MAAa,sBAAsB,UAAoB,YAAiB;CACtE,MAAM,kBAAkB,mBAAmB,UAAU,QAAQ;AAS7D,QAAO;EAAE,cAPY,QAAQ,UAAU,EACrC,YAAY;GACV,aAAa;GACb,QAAQ;GACT,EACF,CAEoB;EAAE;EAAiB"}

package/dist/esm/components/Modal/Modal.mjs

@@ -1,10 +1,10 @@
 'use client';
 
 import { cn } from "../../utils/cn.mjs";
-import { useGetElementOrWindow } from "../../hooks/useGetElementOrWindow.mjs";
-import { useScrollBlockage } from "../../hooks/useScrollBlockage/index.mjs";
 import { Button } from "../Button/Button.mjs";
 import { Container } from "../Container/index.mjs";
+import { useGetElementOrWindow } from "../../hooks/useGetElementOrWindow.mjs";
+import { useScrollBlockage } from "../../hooks/useScrollBlockage/index.mjs";
 import { H3 } from "../Headers/index.mjs";
 import { useEffect } from "react";
 import { cva } from "class-variance-authority";

package/dist/esm/components/Navbar/MobileNavbar.mjs

@@ -1,9 +1,9 @@
 'use client';
 
 import { cn } from "../../utils/cn.mjs";
+import { MaxHeightSmoother } from "../MaxHeightSmoother/index.mjs";
 import { useScrollBlockage } from "../../hooks/useScrollBlockage/index.mjs";
 import { useScrollDetection } from "../../hooks/useScrollDetection.mjs";
-import { MaxHeightSmoother } from "../MaxHeightSmoother/index.mjs";
 import { Burger } from "./Burger.mjs";
 import { useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/esm/components/Pagination/Pagination.mjs

@@ -1,8 +1,8 @@
 'use client';
 
 import { cn } from "../../utils/cn.mjs";
-import { useItemSelector } from "../../hooks/useItemSelector.mjs";
 import { Button } from "../Button/Button.mjs";
+import { useItemSelector } from "../../hooks/useItemSelector.mjs";
 import { useEffect, useRef } from "react";
 import { cva } from "class-variance-authority";
 import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react";