notra-editor 0.3.0 → 0.4.0

package/dist/components/list-dropdown-menu/list-dropdown-menu.mjs

@@ -0,0 +1,57 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronDown } from "lucide-react";
+import { forwardRef } from "react";
+import { ListMenuItem } from "./list-menu-item";
+import {
+  getListTriggerIcon,
+  useActiveListType
+} from "./use-list";
+import { Button } from "../ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuGroup
+} from "../ui/dropdown-menu";
+const ListDropdownMenu = forwardRef(
+  ({
+    editor,
+    types = ["bulletList", "orderedList", "taskList"],
+    ...buttonProps
+  }, ref) => {
+    const activeType = useActiveListType(editor, types);
+    const TriggerIcon = getListTriggerIcon(activeType);
+    return /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+      /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+        Button,
+        {
+          ref,
+          "aria-label": "List",
+          className: "nt:gap-1 nt:px-2",
+          "data-active-state": activeType !== null ? "on" : "off",
+          size: "default",
+          tabIndex: -1,
+          type: "button",
+          variant: "ghost",
+          ...buttonProps,
+          children: [
+            /* @__PURE__ */ jsx(
+              TriggerIcon,
+              {
+                className: activeType !== null ? "nt:text-[var(--tt-brand-color-500)]" : void 0
+              }
+            ),
+            /* @__PURE__ */ jsx(ChevronDown, { className: "nt:size-3" })
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsx(DropdownMenuContent, { align: "start", children: /* @__PURE__ */ jsx(DropdownMenuGroup, { children: types.map((type) => /* @__PURE__ */ jsx(ListMenuItem, { editor, listType: type }, type)) }) })
+    ] });
+  }
+);
+ListDropdownMenu.displayName = "ListDropdownMenu";
+export {
+  ListDropdownMenu
+};
+//# sourceMappingURL=list-dropdown-menu.mjs.map

package/dist/components/list-dropdown-menu/list-dropdown-menu.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/list-dropdown-menu/list-dropdown-menu.tsx"],"sourcesContent":["'use client';\n\nimport { ChevronDown } from 'lucide-react';\nimport { forwardRef } from 'react';\n\nimport { ListMenuItem } from './list-menu-item';\nimport {\n\tgetListTriggerIcon,\n\tuseActiveListType,\n\ttype ListType\n} from './use-list';\nimport { Button } from '../ui/button';\nimport {\n\tDropdownMenu,\n\tDropdownMenuTrigger,\n\tDropdownMenuContent,\n\tDropdownMenuGroup\n} from '../ui/dropdown-menu';\n\nimport type { Editor } from '@tiptap/core';\nimport type { ComponentProps } from 'react';\n\nexport interface ListDropdownMenuProps extends Omit<\n\tComponentProps<typeof Button>,\n\t'type'\n> {\n\teditor: Editor | null;\n\ttypes?: ListType[];\n}\n\nexport const ListDropdownMenu = forwardRef<\n\tHTMLButtonElement,\n\tListDropdownMenuProps\n>(\n\t(\n\t\t{\n\t\t\teditor,\n\t\t\ttypes = ['bulletList', 'orderedList', 'taskList'],\n\t\t\t...buttonProps\n\t\t},\n\t\tref\n\t) => {\n\t\tconst activeType = useActiveListType(editor, types);\n\t\tconst TriggerIcon = getListTriggerIcon(activeType);\n\n\t\treturn (\n\t\t\t<DropdownMenu>\n\t\t\t\t<DropdownMenuTrigger asChild>\n\t\t\t\t\t<Button\n\t\t\t\t\t\tref={ref}\n\t\t\t\t\t\taria-label=\"List\"\n\t\t\t\t\t\tclassName=\"nt:gap-1 nt:px-2\"\n\t\t\t\t\t\tdata-active-state={activeType !== null ? 'on' : 'off'}\n\t\t\t\t\t\tsize=\"default\"\n\t\t\t\t\t\ttabIndex={-1}\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\tvariant=\"ghost\"\n\t\t\t\t\t\t{...buttonProps}\n\t\t\t\t\t>\n\t\t\t\t\t\t<TriggerIcon\n\t\t\t\t\t\t\tclassName={\n\t\t\t\t\t\t\t\tactiveType !== null\n\t\t\t\t\t\t\t\t\t? 'nt:text-[var(--tt-brand-color-500)]'\n\t\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<ChevronDown className=\"nt:size-3\" />\n\t\t\t\t\t</Button>\n\t\t\t\t</DropdownMenuTrigger>\n\t\t\t\t<DropdownMenuContent align=\"start\">\n\t\t\t\t\t<DropdownMenuGroup>\n\t\t\t\t\t\t{types.map((type) => (\n\t\t\t\t\t\t\t<ListMenuItem key={type} editor={editor} listType={type} />\n\t\t\t\t\t\t))}\n\t\t\t\t\t</DropdownMenuGroup>\n\t\t\t\t</DropdownMenuContent>\n\t\t\t</DropdownMenu>\n\t\t);\n\t}\n);\n\nListDropdownMenu.displayName = 'ListDropdownMenu';\n"],"mappings":";AAgDK,SAWC,KAXD;AA9CL,SAAS,mBAAmB;AAC5B,SAAS,kBAAkB;AAE3B,SAAS,oBAAoB;AAC7B;AAAA,EACC;AAAA,EACA;AAAA,OAEM;AACP,SAAS,cAAc;AACvB;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACM;AAaA,MAAM,mBAAmB;AAAA,EAI/B,CACC;AAAA,IACC;AAAA,IACA,QAAQ,CAAC,cAAc,eAAe,UAAU;AAAA,IAChD,GAAG;AAAA,EACJ,GACA,QACI;AACJ,UAAM,aAAa,kBAAkB,QAAQ,KAAK;AAClD,UAAM,cAAc,mBAAmB,UAAU;AAEjD,WACC,qBAAC,gBACA;AAAA,0BAAC,uBAAoB,SAAO,MAC3B;AAAA,QAAC;AAAA;AAAA,UACA;AAAA,UACA,cAAW;AAAA,UACX,WAAU;AAAA,UACV,qBAAmB,eAAe,OAAO,OAAO;AAAA,UAChD,MAAK;AAAA,UACL,UAAU;AAAA,UACV,MAAK;AAAA,UACL,SAAQ;AAAA,UACP,GAAG;AAAA,UAEJ;AAAA;AAAA,cAAC;AAAA;AAAA,gBACA,WACC,eAAe,OACZ,wCACA;AAAA;AAAA,YAEL;AAAA,YACA,oBAAC,eAAY,WAAU,aAAY;AAAA;AAAA;AAAA,MACpC,GACD;AAAA,MACA,oBAAC,uBAAoB,OAAM,SAC1B,8BAAC,qBACC,gBAAM,IAAI,CAAC,SACX,oBAAC,gBAAwB,QAAgB,UAAU,QAAhC,IAAsC,CACzD,GACF,GACD;AAAA,OACD;AAAA,EAEF;AACD;AAEA,iBAAiB,cAAc;","names":[]}

package/dist/components/list-dropdown-menu/list-menu-item.cjs

@@ -0,0 +1,56 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var list_menu_item_exports = {};
+__export(list_menu_item_exports, {
+  ListMenuItem: () => ListMenuItem
+});
+module.exports = __toCommonJS(list_menu_item_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_use_list = require("./use-list");
+var import_dropdown_menu = require("../ui/dropdown-menu");
+const ListMenuItem = (0, import_react.forwardRef)(
+  ({ editor, listType }, ref) => {
+    const { isActive, canToggle, handleToggle, label, Icon } = (0, import_use_list.useList)({
+      editor,
+      type: listType
+    });
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      import_dropdown_menu.DropdownMenuItem,
+      {
+        ref,
+        "aria-label": label,
+        className: "nt:data-[active-state=on]:bg-accent nt:data-[active-state=on]:text-[var(--tt-brand-color-500)]",
+        "data-active-state": isActive ? "on" : "off",
+        disabled: !canToggle,
+        onSelect: handleToggle,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: label })
+        ]
+      }
+    );
+  }
+);
+ListMenuItem.displayName = "ListMenuItem";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ListMenuItem
+});
+//# sourceMappingURL=list-menu-item.cjs.map

package/dist/components/list-dropdown-menu/list-menu-item.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/list-dropdown-menu/list-menu-item.tsx"],"sourcesContent":["import { forwardRef } from 'react';\n\nimport { useList, type ListType } from './use-list';\nimport { DropdownMenuItem } from '../ui/dropdown-menu';\n\nimport type { Editor } from '@tiptap/core';\n\nexport interface ListMenuItemProps {\n\teditor: Editor | null;\n\tlistType: ListType;\n}\n\nexport const ListMenuItem = forwardRef<HTMLDivElement, ListMenuItemProps>(\n\t({ editor, listType }, ref) => {\n\t\tconst { isActive, canToggle, handleToggle, label, Icon } = useList({\n\t\t\teditor,\n\t\t\ttype: listType\n\t\t});\n\n\t\treturn (\n\t\t\t<DropdownMenuItem\n\t\t\t\tref={ref}\n\t\t\t\taria-label={label}\n\t\t\t\tclassName=\"nt:data-[active-state=on]:bg-accent nt:data-[active-state=on]:text-[var(--tt-brand-color-500)]\"\n\t\t\t\tdata-active-state={isActive ? 'on' : 'off'}\n\t\t\t\tdisabled={!canToggle}\n\t\t\t\tonSelect={handleToggle}\n\t\t\t>\n\t\t\t\t<Icon />\n\t\t\t\t<span>{label}</span>\n\t\t\t</DropdownMenuItem>\n\t\t);\n\t}\n);\n\nListMenuItem.displayName = 'ListMenuItem';\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAoBG;AApBH,mBAA2B;AAE3B,sBAAuC;AACvC,2BAAiC;AAS1B,MAAM,mBAAe;AAAA,EAC3B,CAAC,EAAE,QAAQ,SAAS,GAAG,QAAQ;AAC9B,UAAM,EAAE,UAAU,WAAW,cAAc,OAAO,KAAK,QAAI,yBAAQ;AAAA,MAClE;AAAA,MACA,MAAM;AAAA,IACP,CAAC;AAED,WACC;AAAA,MAAC;AAAA;AAAA,QACA;AAAA,QACA,cAAY;AAAA,QACZ,WAAU;AAAA,QACV,qBAAmB,WAAW,OAAO;AAAA,QACrC,UAAU,CAAC;AAAA,QACX,UAAU;AAAA,QAEV;AAAA,sDAAC,QAAK;AAAA,UACN,4CAAC,UAAM,iBAAM;AAAA;AAAA;AAAA,IACd;AAAA,EAEF;AACD;AAEA,aAAa,cAAc;","names":[]}

package/dist/components/list-dropdown-menu/list-menu-item.d.cts

@@ -0,0 +1,12 @@
+import * as react from 'react';
+import { ListType } from './use-list.cjs';
+import { Editor } from '@tiptap/core';
+import 'lucide-react';
+
+interface ListMenuItemProps {
+    editor: Editor | null;
+    listType: ListType;
+}
+declare const ListMenuItem: react.ForwardRefExoticComponent<ListMenuItemProps & react.RefAttributes<HTMLDivElement>>;
+
+export { ListMenuItem, type ListMenuItemProps };

package/dist/components/list-dropdown-menu/list-menu-item.d.ts

@@ -0,0 +1,12 @@
+import * as react from 'react';
+import { ListType } from './use-list.js';
+import { Editor } from '@tiptap/core';
+import 'lucide-react';
+
+interface ListMenuItemProps {
+    editor: Editor | null;
+    listType: ListType;
+}
+declare const ListMenuItem: react.ForwardRefExoticComponent<ListMenuItemProps & react.RefAttributes<HTMLDivElement>>;
+
+export { ListMenuItem, type ListMenuItemProps };

package/dist/components/list-dropdown-menu/list-menu-item.mjs

@@ -0,0 +1,32 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { useList } from "./use-list";
+import { DropdownMenuItem } from "../ui/dropdown-menu";
+const ListMenuItem = forwardRef(
+  ({ editor, listType }, ref) => {
+    const { isActive, canToggle, handleToggle, label, Icon } = useList({
+      editor,
+      type: listType
+    });
+    return /* @__PURE__ */ jsxs(
+      DropdownMenuItem,
+      {
+        ref,
+        "aria-label": label,
+        className: "nt:data-[active-state=on]:bg-accent nt:data-[active-state=on]:text-[var(--tt-brand-color-500)]",
+        "data-active-state": isActive ? "on" : "off",
+        disabled: !canToggle,
+        onSelect: handleToggle,
+        children: [
+          /* @__PURE__ */ jsx(Icon, {}),
+          /* @__PURE__ */ jsx("span", { children: label })
+        ]
+      }
+    );
+  }
+);
+ListMenuItem.displayName = "ListMenuItem";
+export {
+  ListMenuItem
+};
+//# sourceMappingURL=list-menu-item.mjs.map

package/dist/components/list-dropdown-menu/list-menu-item.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/list-dropdown-menu/list-menu-item.tsx"],"sourcesContent":["import { forwardRef } from 'react';\n\nimport { useList, type ListType } from './use-list';\nimport { DropdownMenuItem } from '../ui/dropdown-menu';\n\nimport type { Editor } from '@tiptap/core';\n\nexport interface ListMenuItemProps {\n\teditor: Editor | null;\n\tlistType: ListType;\n}\n\nexport const ListMenuItem = forwardRef<HTMLDivElement, ListMenuItemProps>(\n\t({ editor, listType }, ref) => {\n\t\tconst { isActive, canToggle, handleToggle, label, Icon } = useList({\n\t\t\teditor,\n\t\t\ttype: listType\n\t\t});\n\n\t\treturn (\n\t\t\t<DropdownMenuItem\n\t\t\t\tref={ref}\n\t\t\t\taria-label={label}\n\t\t\t\tclassName=\"nt:data-[active-state=on]:bg-accent nt:data-[active-state=on]:text-[var(--tt-brand-color-500)]\"\n\t\t\t\tdata-active-state={isActive ? 'on' : 'off'}\n\t\t\t\tdisabled={!canToggle}\n\t\t\t\tonSelect={handleToggle}\n\t\t\t>\n\t\t\t\t<Icon />\n\t\t\t\t<span>{label}</span>\n\t\t\t</DropdownMenuItem>\n\t\t);\n\t}\n);\n\nListMenuItem.displayName = 'ListMenuItem';\n"],"mappings":"AAoBG,SAQC,KARD;AApBH,SAAS,kBAAkB;AAE3B,SAAS,eAA8B;AACvC,SAAS,wBAAwB;AAS1B,MAAM,eAAe;AAAA,EAC3B,CAAC,EAAE,QAAQ,SAAS,GAAG,QAAQ;AAC9B,UAAM,EAAE,UAAU,WAAW,cAAc,OAAO,KAAK,IAAI,QAAQ;AAAA,MAClE;AAAA,MACA,MAAM;AAAA,IACP,CAAC;AAED,WACC;AAAA,MAAC;AAAA;AAAA,QACA;AAAA,QACA,cAAY;AAAA,QACZ,WAAU;AAAA,QACV,qBAAmB,WAAW,OAAO;AAAA,QACrC,UAAU,CAAC;AAAA,QACX,UAAU;AAAA,QAEV;AAAA,8BAAC,QAAK;AAAA,UACN,oBAAC,UAAM,iBAAM;AAAA;AAAA;AAAA,IACd;AAAA,EAEF;AACD;AAEA,aAAa,cAAc;","names":[]}

package/dist/components/list-dropdown-menu/use-list.cjs

@@ -0,0 +1,111 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var use_list_exports = {};
+__export(use_list_exports, {
+  getListTriggerIcon: () => getListTriggerIcon,
+  useActiveListType: () => useActiveListType,
+  useList: () => useList
+});
+module.exports = __toCommonJS(use_list_exports);
+var import_lucide_react = require("lucide-react");
+var import_react = require("react");
+const listIcons = {
+  bulletList: import_lucide_react.List,
+  orderedList: import_lucide_react.ListOrdered,
+  taskList: import_lucide_react.ListTodo
+};
+const listLabels = {
+  bulletList: "Bullet List",
+  orderedList: "Ordered List",
+  taskList: "Task List"
+};
+const listItemTypes = {
+  bulletList: "listItem",
+  orderedList: "listItem",
+  taskList: "taskItem"
+};
+function canToggleList(editor) {
+  if (!editor || !editor.isEditable) return false;
+  return editor.can().toggleList("bulletList", "listItem") || editor.can().clearNodes();
+}
+function useList({
+  editor,
+  type
+}) {
+  const [isActive, setIsActive] = (0, import_react.useState)(false);
+  const [canToggle, setCanToggle] = (0, import_react.useState)(false);
+  (0, import_react.useEffect)(() => {
+    if (!editor) return;
+    const handleUpdate = () => {
+      setIsActive(editor.isActive(type));
+      setCanToggle(canToggleList(editor));
+    };
+    handleUpdate();
+    editor.on("selectionUpdate", handleUpdate);
+    editor.on("transaction", handleUpdate);
+    return () => {
+      editor.off("selectionUpdate", handleUpdate);
+      editor.off("transaction", handleUpdate);
+    };
+  }, [editor, type]);
+  const handleToggle = (0, import_react.useCallback)(() => {
+    if (!editor || !editor.isEditable) return false;
+    const itemType = listItemTypes[type];
+    if (editor.isActive(type)) {
+      return editor.chain().focus().clearNodes().run();
+    }
+    return editor.chain().focus().clearNodes().toggleList(type, itemType).run();
+  }, [editor, type]);
+  return {
+    isActive,
+    canToggle,
+    handleToggle,
+    label: listLabels[type],
+    Icon: listIcons[type]
+  };
+}
+function useActiveListType(editor, types) {
+  const [activeType, setActiveType] = (0, import_react.useState)(null);
+  (0, import_react.useEffect)(() => {
+    if (!editor) return;
+    const handleUpdate = () => {
+      const found = types.find((type) => editor.isActive(type));
+      setActiveType(found ?? null);
+    };
+    handleUpdate();
+    editor.on("selectionUpdate", handleUpdate);
+    editor.on("transaction", handleUpdate);
+    return () => {
+      editor.off("selectionUpdate", handleUpdate);
+      editor.off("transaction", handleUpdate);
+    };
+  }, [editor, types]);
+  return activeType;
+}
+function getListTriggerIcon(activeType) {
+  if (activeType === null) return import_lucide_react.List;
+  return listIcons[activeType];
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  getListTriggerIcon,
+  useActiveListType,
+  useList
+});
+//# sourceMappingURL=use-list.cjs.map

package/dist/components/list-dropdown-menu/use-list.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/list-dropdown-menu/use-list.ts"],"sourcesContent":["import { List, ListOrdered, ListTodo } from 'lucide-react';\nimport { useCallback, useEffect, useState } from 'react';\n\nimport type { Editor } from '@tiptap/core';\nimport type { LucideIcon } from 'lucide-react';\n\nexport type ListType = 'bulletList' | 'orderedList' | 'taskList';\n\ntype IconComponent = LucideIcon;\n\nconst listIcons: Record<ListType, IconComponent> = {\n\tbulletList: List,\n\torderedList: ListOrdered,\n\ttaskList: ListTodo\n};\n\nconst listLabels: Record<ListType, string> = {\n\tbulletList: 'Bullet List',\n\torderedList: 'Ordered List',\n\ttaskList: 'Task List'\n};\n\nconst listItemTypes: Record<ListType, string> = {\n\tbulletList: 'listItem',\n\torderedList: 'listItem',\n\ttaskList: 'taskItem'\n};\n\nfunction canToggleList(editor: Editor | null): boolean {\n\tif (!editor || !editor.isEditable) return false;\n\n\treturn (\n\t\teditor.can().toggleList('bulletList', 'listItem') ||\n\t\teditor.can().clearNodes()\n\t);\n}\n\nexport function useList({\n\teditor,\n\ttype\n}: {\n\teditor: Editor | null;\n\ttype: ListType;\n}) {\n\tconst [isActive, setIsActive] = useState(false);\n\tconst [canToggle, setCanToggle] = useState(false);\n\n\tuseEffect(() => {\n\t\tif (!editor) return;\n\n\t\tconst handleUpdate = () => {\n\t\t\tsetIsActive(editor.isActive(type));\n\t\t\tsetCanToggle(canToggleList(editor));\n\t\t};\n\n\t\thandleUpdate();\n\n\t\teditor.on('selectionUpdate', handleUpdate);\n\t\teditor.on('transaction', handleUpdate);\n\n\t\treturn () => {\n\t\t\teditor.off('selectionUpdate', handleUpdate);\n\t\t\teditor.off('transaction', handleUpdate);\n\t\t};\n\t}, [editor, type]);\n\n\tconst handleToggle = useCallback(() => {\n\t\tif (!editor || !editor.isEditable) return false;\n\n\t\tconst itemType = listItemTypes[type];\n\n\t\tif (editor.isActive(type)) {\n\t\t\t// Currently this list type → convert back to paragraph\n\t\t\treturn editor.chain().focus().clearNodes().run();\n\t\t}\n\n\t\t// clearNodes first to convert any block type to paragraph,\n\t\t// then toggle list\n\t\treturn editor.chain().focus().clearNodes().toggleList(type, itemType).run();\n\t}, [editor, type]);\n\n\treturn {\n\t\tisActive,\n\t\tcanToggle,\n\t\thandleToggle,\n\t\tlabel: listLabels[type],\n\t\tIcon: listIcons[type]\n\t};\n}\n\nexport function useActiveListType(\n\teditor: Editor | null,\n\ttypes: ListType[]\n): ListType | null {\n\tconst [activeType, setActiveType] = useState<ListType | null>(null);\n\n\tuseEffect(() => {\n\t\tif (!editor) return;\n\n\t\tconst handleUpdate = () => {\n\t\t\tconst found = types.find((type) => editor.isActive(type));\n\n\t\t\tsetActiveType(found ?? null);\n\t\t};\n\n\t\thandleUpdate();\n\n\t\teditor.on('selectionUpdate', handleUpdate);\n\t\teditor.on('transaction', handleUpdate);\n\n\t\treturn () => {\n\t\t\teditor.off('selectionUpdate', handleUpdate);\n\t\t\teditor.off('transaction', handleUpdate);\n\t\t};\n\t}, [editor, types]);\n\n\treturn activeType;\n}\n\nexport function getListTriggerIcon(activeType: ListType | null): IconComponent {\n\tif (activeType === null) return List;\n\n\treturn listIcons[activeType];\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAA4C;AAC5C,mBAAiD;AASjD,MAAM,YAA6C;AAAA,EAClD,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,UAAU;AACX;AAEA,MAAM,aAAuC;AAAA,EAC5C,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,UAAU;AACX;AAEA,MAAM,gBAA0C;AAAA,EAC/C,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,UAAU;AACX;AAEA,SAAS,cAAc,QAAgC;AACtD,MAAI,CAAC,UAAU,CAAC,OAAO,WAAY,QAAO;AAE1C,SACC,OAAO,IAAI,EAAE,WAAW,cAAc,UAAU,KAChD,OAAO,IAAI,EAAE,WAAW;AAE1B;AAEO,SAAS,QAAQ;AAAA,EACvB;AAAA,EACA;AACD,GAGG;AACF,QAAM,CAAC,UAAU,WAAW,QAAI,uBAAS,KAAK;AAC9C,QAAM,CAAC,WAAW,YAAY,QAAI,uBAAS,KAAK;AAEhD,8BAAU,MAAM;AACf,QAAI,CAAC,OAAQ;AAEb,UAAM,eAAe,MAAM;AAC1B,kBAAY,OAAO,SAAS,IAAI,CAAC;AACjC,mBAAa,cAAc,MAAM,CAAC;AAAA,IACnC;AAEA,iBAAa;AAEb,WAAO,GAAG,mBAAmB,YAAY;AACzC,WAAO,GAAG,eAAe,YAAY;AAErC,WAAO,MAAM;AACZ,aAAO,IAAI,mBAAmB,YAAY;AAC1C,aAAO,IAAI,eAAe,YAAY;AAAA,IACvC;AAAA,EACD,GAAG,CAAC,QAAQ,IAAI,CAAC;AAEjB,QAAM,mBAAe,0BAAY,MAAM;AACtC,QAAI,CAAC,UAAU,CAAC,OAAO,WAAY,QAAO;AAE1C,UAAM,WAAW,cAAc,IAAI;AAEnC,QAAI,OAAO,SAAS,IAAI,GAAG;AAE1B,aAAO,OAAO,MAAM,EAAE,MAAM,EAAE,WAAW,EAAE,IAAI;AAAA,IAChD;AAIA,WAAO,OAAO,MAAM,EAAE,MAAM,EAAE,WAAW,EAAE,WAAW,MAAM,QAAQ,EAAE,IAAI;AAAA,EAC3E,GAAG,CAAC,QAAQ,IAAI,CAAC;AAEjB,SAAO;AAAA,IACN;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,WAAW,IAAI;AAAA,IACtB,MAAM,UAAU,IAAI;AAAA,EACrB;AACD;AAEO,SAAS,kBACf,QACA,OACkB;AAClB,QAAM,CAAC,YAAY,aAAa,QAAI,uBAA0B,IAAI;AAElE,8BAAU,MAAM;AACf,QAAI,CAAC,OAAQ;AAEb,UAAM,eAAe,MAAM;AAC1B,YAAM,QAAQ,MAAM,KAAK,CAAC,SAAS,OAAO,SAAS,IAAI,CAAC;AAExD,oBAAc,SAAS,IAAI;AAAA,IAC5B;AAEA,iBAAa;AAEb,WAAO,GAAG,mBAAmB,YAAY;AACzC,WAAO,GAAG,eAAe,YAAY;AAErC,WAAO,MAAM;AACZ,aAAO,IAAI,mBAAmB,YAAY;AAC1C,aAAO,IAAI,eAAe,YAAY;AAAA,IACvC;AAAA,EACD,GAAG,CAAC,QAAQ,KAAK,CAAC;AAElB,SAAO;AACR;AAEO,SAAS,mBAAmB,YAA4C;AAC9E,MAAI,eAAe,KAAM,QAAO;AAEhC,SAAO,UAAU,UAAU;AAC5B;","names":[]}

package/dist/components/list-dropdown-menu/use-list.d.cts

@@ -0,0 +1,19 @@
+import { Editor } from '@tiptap/core';
+import { LucideIcon } from 'lucide-react';
+
+type ListType = 'bulletList' | 'orderedList' | 'taskList';
+type IconComponent = LucideIcon;
+declare function useList({ editor, type }: {
+    editor: Editor | null;
+    type: ListType;
+}): {
+    isActive: boolean;
+    canToggle: boolean;
+    handleToggle: () => boolean;
+    label: string;
+    Icon: LucideIcon;
+};
+declare function useActiveListType(editor: Editor | null, types: ListType[]): ListType | null;
+declare function getListTriggerIcon(activeType: ListType | null): IconComponent;
+
+export { type ListType, getListTriggerIcon, useActiveListType, useList };

package/dist/components/list-dropdown-menu/use-list.d.ts

@@ -0,0 +1,19 @@
+import { Editor } from '@tiptap/core';
+import { LucideIcon } from 'lucide-react';
+
+type ListType = 'bulletList' | 'orderedList' | 'taskList';
+type IconComponent = LucideIcon;
+declare function useList({ editor, type }: {
+    editor: Editor | null;
+    type: ListType;
+}): {
+    isActive: boolean;
+    canToggle: boolean;
+    handleToggle: () => boolean;
+    label: string;
+    Icon: LucideIcon;
+};
+declare function useActiveListType(editor: Editor | null, types: ListType[]): ListType | null;
+declare function getListTriggerIcon(activeType: ListType | null): IconComponent;
+
+export { type ListType, getListTriggerIcon, useActiveListType, useList };

package/dist/components/list-dropdown-menu/use-list.mjs

@@ -0,0 +1,85 @@
+import { List, ListOrdered, ListTodo } from "lucide-react";
+import { useCallback, useEffect, useState } from "react";
+const listIcons = {
+  bulletList: List,
+  orderedList: ListOrdered,
+  taskList: ListTodo
+};
+const listLabels = {
+  bulletList: "Bullet List",
+  orderedList: "Ordered List",
+  taskList: "Task List"
+};
+const listItemTypes = {
+  bulletList: "listItem",
+  orderedList: "listItem",
+  taskList: "taskItem"
+};
+function canToggleList(editor) {
+  if (!editor || !editor.isEditable) return false;
+  return editor.can().toggleList("bulletList", "listItem") || editor.can().clearNodes();
+}
+function useList({
+  editor,
+  type
+}) {
+  const [isActive, setIsActive] = useState(false);
+  const [canToggle, setCanToggle] = useState(false);
+  useEffect(() => {
+    if (!editor) return;
+    const handleUpdate = () => {
+      setIsActive(editor.isActive(type));
+      setCanToggle(canToggleList(editor));
+    };
+    handleUpdate();
+    editor.on("selectionUpdate", handleUpdate);
+    editor.on("transaction", handleUpdate);
+    return () => {
+      editor.off("selectionUpdate", handleUpdate);
+      editor.off("transaction", handleUpdate);
+    };
+  }, [editor, type]);
+  const handleToggle = useCallback(() => {
+    if (!editor || !editor.isEditable) return false;
+    const itemType = listItemTypes[type];
+    if (editor.isActive(type)) {
+      return editor.chain().focus().clearNodes().run();
+    }
+    return editor.chain().focus().clearNodes().toggleList(type, itemType).run();
+  }, [editor, type]);
+  return {
+    isActive,
+    canToggle,
+    handleToggle,
+    label: listLabels[type],
+    Icon: listIcons[type]
+  };
+}
+function useActiveListType(editor, types) {
+  const [activeType, setActiveType] = useState(null);
+  useEffect(() => {
+    if (!editor) return;
+    const handleUpdate = () => {
+      const found = types.find((type) => editor.isActive(type));
+      setActiveType(found ?? null);
+    };
+    handleUpdate();
+    editor.on("selectionUpdate", handleUpdate);
+    editor.on("transaction", handleUpdate);
+    return () => {
+      editor.off("selectionUpdate", handleUpdate);
+      editor.off("transaction", handleUpdate);
+    };
+  }, [editor, types]);
+  return activeType;
+}
+function getListTriggerIcon(activeType) {
+  if (activeType === null) return List;
+  return listIcons[activeType];
+}
+export {
+  getListTriggerIcon,
+  useActiveListType,
+  useList
+};
+//# sourceMappingURL=use-list.mjs.map

package/dist/components/list-dropdown-menu/use-list.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/list-dropdown-menu/use-list.ts"],"sourcesContent":["import { List, ListOrdered, ListTodo } from 'lucide-react';\nimport { useCallback, useEffect, useState } from 'react';\n\nimport type { Editor } from '@tiptap/core';\nimport type { LucideIcon } from 'lucide-react';\n\nexport type ListType = 'bulletList' | 'orderedList' | 'taskList';\n\ntype IconComponent = LucideIcon;\n\nconst listIcons: Record<ListType, IconComponent> = {\n\tbulletList: List,\n\torderedList: ListOrdered,\n\ttaskList: ListTodo\n};\n\nconst listLabels: Record<ListType, string> = {\n\tbulletList: 'Bullet List',\n\torderedList: 'Ordered List',\n\ttaskList: 'Task List'\n};\n\nconst listItemTypes: Record<ListType, string> = {\n\tbulletList: 'listItem',\n\torderedList: 'listItem',\n\ttaskList: 'taskItem'\n};\n\nfunction canToggleList(editor: Editor | null): boolean {\n\tif (!editor || !editor.isEditable) return false;\n\n\treturn (\n\t\teditor.can().toggleList('bulletList', 'listItem') ||\n\t\teditor.can().clearNodes()\n\t);\n}\n\nexport function useList({\n\teditor,\n\ttype\n}: {\n\teditor: Editor | null;\n\ttype: ListType;\n}) {\n\tconst [isActive, setIsActive] = useState(false);\n\tconst [canToggle, setCanToggle] = useState(false);\n\n\tuseEffect(() => {\n\t\tif (!editor) return;\n\n\t\tconst handleUpdate = () => {\n\t\t\tsetIsActive(editor.isActive(type));\n\t\t\tsetCanToggle(canToggleList(editor));\n\t\t};\n\n\t\thandleUpdate();\n\n\t\teditor.on('selectionUpdate', handleUpdate);\n\t\teditor.on('transaction', handleUpdate);\n\n\t\treturn () => {\n\t\t\teditor.off('selectionUpdate', handleUpdate);\n\t\t\teditor.off('transaction', handleUpdate);\n\t\t};\n\t}, [editor, type]);\n\n\tconst handleToggle = useCallback(() => {\n\t\tif (!editor || !editor.isEditable) return false;\n\n\t\tconst itemType = listItemTypes[type];\n\n\t\tif (editor.isActive(type)) {\n\t\t\t// Currently this list type → convert back to paragraph\n\t\t\treturn editor.chain().focus().clearNodes().run();\n\t\t}\n\n\t\t// clearNodes first to convert any block type to paragraph,\n\t\t// then toggle list\n\t\treturn editor.chain().focus().clearNodes().toggleList(type, itemType).run();\n\t}, [editor, type]);\n\n\treturn {\n\t\tisActive,\n\t\tcanToggle,\n\t\thandleToggle,\n\t\tlabel: listLabels[type],\n\t\tIcon: listIcons[type]\n\t};\n}\n\nexport function useActiveListType(\n\teditor: Editor | null,\n\ttypes: ListType[]\n): ListType | null {\n\tconst [activeType, setActiveType] = useState<ListType | null>(null);\n\n\tuseEffect(() => {\n\t\tif (!editor) return;\n\n\t\tconst handleUpdate = () => {\n\t\t\tconst found = types.find((type) => editor.isActive(type));\n\n\t\t\tsetActiveType(found ?? null);\n\t\t};\n\n\t\thandleUpdate();\n\n\t\teditor.on('selectionUpdate', handleUpdate);\n\t\teditor.on('transaction', handleUpdate);\n\n\t\treturn () => {\n\t\t\teditor.off('selectionUpdate', handleUpdate);\n\t\t\teditor.off('transaction', handleUpdate);\n\t\t};\n\t}, [editor, types]);\n\n\treturn activeType;\n}\n\nexport function getListTriggerIcon(activeType: ListType | null): IconComponent {\n\tif (activeType === null) return List;\n\n\treturn listIcons[activeType];\n}\n"],"mappings":"AAAA,SAAS,MAAM,aAAa,gBAAgB;AAC5C,SAAS,aAAa,WAAW,gBAAgB;AASjD,MAAM,YAA6C;AAAA,EAClD,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,UAAU;AACX;AAEA,MAAM,aAAuC;AAAA,EAC5C,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,UAAU;AACX;AAEA,MAAM,gBAA0C;AAAA,EAC/C,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,UAAU;AACX;AAEA,SAAS,cAAc,QAAgC;AACtD,MAAI,CAAC,UAAU,CAAC,OAAO,WAAY,QAAO;AAE1C,SACC,OAAO,IAAI,EAAE,WAAW,cAAc,UAAU,KAChD,OAAO,IAAI,EAAE,WAAW;AAE1B;AAEO,SAAS,QAAQ;AAAA,EACvB;AAAA,EACA;AACD,GAGG;AACF,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,KAAK;AAC9C,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAEhD,YAAU,MAAM;AACf,QAAI,CAAC,OAAQ;AAEb,UAAM,eAAe,MAAM;AAC1B,kBAAY,OAAO,SAAS,IAAI,CAAC;AACjC,mBAAa,cAAc,MAAM,CAAC;AAAA,IACnC;AAEA,iBAAa;AAEb,WAAO,GAAG,mBAAmB,YAAY;AACzC,WAAO,GAAG,eAAe,YAAY;AAErC,WAAO,MAAM;AACZ,aAAO,IAAI,mBAAmB,YAAY;AAC1C,aAAO,IAAI,eAAe,YAAY;AAAA,IACvC;AAAA,EACD,GAAG,CAAC,QAAQ,IAAI,CAAC;AAEjB,QAAM,eAAe,YAAY,MAAM;AACtC,QAAI,CAAC,UAAU,CAAC,OAAO,WAAY,QAAO;AAE1C,UAAM,WAAW,cAAc,IAAI;AAEnC,QAAI,OAAO,SAAS,IAAI,GAAG;AAE1B,aAAO,OAAO,MAAM,EAAE,MAAM,EAAE,WAAW,EAAE,IAAI;AAAA,IAChD;AAIA,WAAO,OAAO,MAAM,EAAE,MAAM,EAAE,WAAW,EAAE,WAAW,MAAM,QAAQ,EAAE,IAAI;AAAA,EAC3E,GAAG,CAAC,QAAQ,IAAI,CAAC;AAEjB,SAAO;AAAA,IACN;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,WAAW,IAAI;AAAA,IACtB,MAAM,UAAU,IAAI;AAAA,EACrB;AACD;AAEO,SAAS,kBACf,QACA,OACkB;AAClB,QAAM,CAAC,YAAY,aAAa,IAAI,SAA0B,IAAI;AAElE,YAAU,MAAM;AACf,QAAI,CAAC,OAAQ;AAEb,UAAM,eAAe,MAAM;AAC1B,YAAM,QAAQ,MAAM,KAAK,CAAC,SAAS,OAAO,SAAS,IAAI,CAAC;AAExD,oBAAc,SAAS,IAAI;AAAA,IAC5B;AAEA,iBAAa;AAEb,WAAO,GAAG,mBAAmB,YAAY;AACzC,WAAO,GAAG,eAAe,YAAY;AAErC,WAAO,MAAM;AACZ,aAAO,IAAI,mBAAmB,YAAY;AAC1C,aAAO,IAAI,eAAe,YAAY;AAAA,IACvC;AAAA,EACD,GAAG,CAAC,QAAQ,KAAK,CAAC;AAElB,SAAO;AACR;AAEO,SAAS,mBAAmB,YAA4C;AAC9E,MAAI,eAAe,KAAM,QAAO;AAEhC,SAAO,UAAU,UAAU;AAC5B;","names":[]}

package/dist/components/mark-button/mark-button.cjs

@@ -0,0 +1,72 @@
+"use strict";
+"use client";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var mark_button_exports = {};
+__export(mark_button_exports, {
+  MarkButton: () => MarkButton
+});
+module.exports = __toCommonJS(mark_button_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_use_mark = require("./use-mark");
+var import_button = require("../ui/button");
+const MarkButton = (0, import_react.forwardRef)(
+  ({ editor, type, onClick, ...buttonProps }, ref) => {
+    const { isActive, canToggle, handleToggle, label, Icon } = (0, import_use_mark.useMark)({
+      editor,
+      type
+    });
+    const handleClick = (0, import_react.useCallback)(
+      (event) => {
+        onClick?.(event);
+        if (event.defaultPrevented) return;
+        handleToggle();
+      },
+      [handleToggle, onClick]
+    );
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_button.Button,
+      {
+        ref,
+        "aria-label": label,
+        "aria-pressed": isActive,
+        "data-active-state": isActive ? "on" : "off",
+        disabled: !canToggle,
+        size: "icon",
+        tabIndex: -1,
+        type: "button",
+        variant: "ghost",
+        onClick: handleClick,
+        ...buttonProps,
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          Icon,
+          {
+            className: isActive ? "nt:text-[var(--tt-brand-color-500)]" : void 0
+          }
+        )
+      }
+    );
+  }
+);
+MarkButton.displayName = "MarkButton";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  MarkButton
+});
+//# sourceMappingURL=mark-button.cjs.map

package/dist/components/mark-button/mark-button.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/mark-button/mark-button.tsx"],"sourcesContent":["'use client';\n\nimport { forwardRef, useCallback } from 'react';\n\nimport { useMark } from './use-mark';\nimport { Button } from '../ui/button';\n\nimport type { MarkType } from './use-mark';\nimport type { Editor } from '@tiptap/core';\n\nexport interface MarkButtonProps extends Omit<\n\tReact.ButtonHTMLAttributes<HTMLButtonElement>,\n\t'type'\n> {\n\teditor: Editor | null;\n\ttype: MarkType;\n}\n\nexport const MarkButton = forwardRef<HTMLButtonElement, MarkButtonProps>(\n\t({ editor, type, onClick, ...buttonProps }, ref) => {\n\t\tconst { isActive, canToggle, handleToggle, label, Icon } = useMark({\n\t\t\teditor,\n\t\t\ttype\n\t\t});\n\n\t\tconst handleClick = useCallback(\n\t\t\t(event: React.MouseEvent<HTMLButtonElement>) => {\n\t\t\t\tonClick?.(event);\n\n\t\t\t\tif (event.defaultPrevented) return;\n\n\t\t\t\thandleToggle();\n\t\t\t},\n\t\t\t[handleToggle, onClick]\n\t\t);\n\n\t\treturn (\n\t\t\t<Button\n\t\t\t\tref={ref}\n\t\t\t\taria-label={label}\n\t\t\t\taria-pressed={isActive}\n\t\t\t\tdata-active-state={isActive ? 'on' : 'off'}\n\t\t\t\tdisabled={!canToggle}\n\t\t\t\tsize=\"icon\"\n\t\t\t\ttabIndex={-1}\n\t\t\t\ttype=\"button\"\n\t\t\t\tvariant=\"ghost\"\n\t\t\t\tonClick={handleClick}\n\t\t\t\t{...buttonProps}\n\t\t\t>\n\t\t\t\t<Icon\n\t\t\t\t\tclassName={\n\t\t\t\t\t\tisActive ? 'nt:text-[var(--tt-brand-color-500)]' : undefined\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t</Button>\n\t\t);\n\t}\n);\n\nMarkButton.displayName = 'MarkButton';\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAkDI;AAhDJ,mBAAwC;AAExC,sBAAwB;AACxB,oBAAuB;AAahB,MAAM,iBAAa;AAAA,EACzB,CAAC,EAAE,QAAQ,MAAM,SAAS,GAAG,YAAY,GAAG,QAAQ;AACnD,UAAM,EAAE,UAAU,WAAW,cAAc,OAAO,KAAK,QAAI,yBAAQ;AAAA,MAClE;AAAA,MACA;AAAA,IACD,CAAC;AAED,UAAM,kBAAc;AAAA,MACnB,CAAC,UAA+C;AAC/C,kBAAU,KAAK;AAEf,YAAI,MAAM,iBAAkB;AAE5B,qBAAa;AAAA,MACd;AAAA,MACA,CAAC,cAAc,OAAO;AAAA,IACvB;AAEA,WACC;AAAA,MAAC;AAAA;AAAA,QACA;AAAA,QACA,cAAY;AAAA,QACZ,gBAAc;AAAA,QACd,qBAAmB,WAAW,OAAO;AAAA,QACrC,UAAU,CAAC;AAAA,QACX,MAAK;AAAA,QACL,UAAU;AAAA,QACV,MAAK;AAAA,QACL,SAAQ;AAAA,QACR,SAAS;AAAA,QACR,GAAG;AAAA,QAEJ;AAAA,UAAC;AAAA;AAAA,YACA,WACC,WAAW,wCAAwC;AAAA;AAAA,QAErD;AAAA;AAAA,IACD;AAAA,EAEF;AACD;AAEA,WAAW,cAAc;","names":[]}

package/dist/components/mark-button/mark-button.d.cts

@@ -0,0 +1,12 @@
+import * as react from 'react';
+import { MarkType } from './use-mark.cjs';
+import { Editor } from '@tiptap/core';
+import 'lucide-react';
+
+interface MarkButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'type'> {
+    editor: Editor | null;
+    type: MarkType;
+}
+declare const MarkButton: react.ForwardRefExoticComponent<MarkButtonProps & react.RefAttributes<HTMLButtonElement>>;
+
+export { MarkButton, type MarkButtonProps };

package/dist/components/mark-button/mark-button.d.ts

@@ -0,0 +1,12 @@
+import * as react from 'react';
+import { MarkType } from './use-mark.js';
+import { Editor } from '@tiptap/core';
+import 'lucide-react';
+
+interface MarkButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'type'> {
+    editor: Editor | null;
+    type: MarkType;
+}
+declare const MarkButton: react.ForwardRefExoticComponent<MarkButtonProps & react.RefAttributes<HTMLButtonElement>>;
+
+export { MarkButton, type MarkButtonProps };

package/dist/components/mark-button/mark-button.mjs

@@ -0,0 +1,48 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { forwardRef, useCallback } from "react";
+import { useMark } from "./use-mark";
+import { Button } from "../ui/button";
+const MarkButton = forwardRef(
+  ({ editor, type, onClick, ...buttonProps }, ref) => {
+    const { isActive, canToggle, handleToggle, label, Icon } = useMark({
+      editor,
+      type
+    });
+    const handleClick = useCallback(
+      (event) => {
+        onClick?.(event);
+        if (event.defaultPrevented) return;
+        handleToggle();
+      },
+      [handleToggle, onClick]
+    );
+    return /* @__PURE__ */ jsx(
+      Button,
+      {
+        ref,
+        "aria-label": label,
+        "aria-pressed": isActive,
+        "data-active-state": isActive ? "on" : "off",
+        disabled: !canToggle,
+        size: "icon",
+        tabIndex: -1,
+        type: "button",
+        variant: "ghost",
+        onClick: handleClick,
+        ...buttonProps,
+        children: /* @__PURE__ */ jsx(
+          Icon,
+          {
+            className: isActive ? "nt:text-[var(--tt-brand-color-500)]" : void 0
+          }
+        )
+      }
+    );
+  }
+);
+MarkButton.displayName = "MarkButton";
+export {
+  MarkButton
+};
+//# sourceMappingURL=mark-button.mjs.map

package/dist/components/mark-button/mark-button.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/mark-button/mark-button.tsx"],"sourcesContent":["'use client';\n\nimport { forwardRef, useCallback } from 'react';\n\nimport { useMark } from './use-mark';\nimport { Button } from '../ui/button';\n\nimport type { MarkType } from './use-mark';\nimport type { Editor } from '@tiptap/core';\n\nexport interface MarkButtonProps extends Omit<\n\tReact.ButtonHTMLAttributes<HTMLButtonElement>,\n\t'type'\n> {\n\teditor: Editor | null;\n\ttype: MarkType;\n}\n\nexport const MarkButton = forwardRef<HTMLButtonElement, MarkButtonProps>(\n\t({ editor, type, onClick, ...buttonProps }, ref) => {\n\t\tconst { isActive, canToggle, handleToggle, label, Icon } = useMark({\n\t\t\teditor,\n\t\t\ttype\n\t\t});\n\n\t\tconst handleClick = useCallback(\n\t\t\t(event: React.MouseEvent<HTMLButtonElement>) => {\n\t\t\t\tonClick?.(event);\n\n\t\t\t\tif (event.defaultPrevented) return;\n\n\t\t\t\thandleToggle();\n\t\t\t},\n\t\t\t[handleToggle, onClick]\n\t\t);\n\n\t\treturn (\n\t\t\t<Button\n\t\t\t\tref={ref}\n\t\t\t\taria-label={label}\n\t\t\t\taria-pressed={isActive}\n\t\t\t\tdata-active-state={isActive ? 'on' : 'off'}\n\t\t\t\tdisabled={!canToggle}\n\t\t\t\tsize=\"icon\"\n\t\t\t\ttabIndex={-1}\n\t\t\t\ttype=\"button\"\n\t\t\t\tvariant=\"ghost\"\n\t\t\t\tonClick={handleClick}\n\t\t\t\t{...buttonProps}\n\t\t\t>\n\t\t\t\t<Icon\n\t\t\t\t\tclassName={\n\t\t\t\t\t\tisActive ? 'nt:text-[var(--tt-brand-color-500)]' : undefined\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t</Button>\n\t\t);\n\t}\n);\n\nMarkButton.displayName = 'MarkButton';\n"],"mappings":";AAkDI;AAhDJ,SAAS,YAAY,mBAAmB;AAExC,SAAS,eAAe;AACxB,SAAS,cAAc;AAahB,MAAM,aAAa;AAAA,EACzB,CAAC,EAAE,QAAQ,MAAM,SAAS,GAAG,YAAY,GAAG,QAAQ;AACnD,UAAM,EAAE,UAAU,WAAW,cAAc,OAAO,KAAK,IAAI,QAAQ;AAAA,MAClE;AAAA,MACA;AAAA,IACD,CAAC;AAED,UAAM,cAAc;AAAA,MACnB,CAAC,UAA+C;AAC/C,kBAAU,KAAK;AAEf,YAAI,MAAM,iBAAkB;AAE5B,qBAAa;AAAA,MACd;AAAA,MACA,CAAC,cAAc,OAAO;AAAA,IACvB;AAEA,WACC;AAAA,MAAC;AAAA;AAAA,QACA;AAAA,QACA,cAAY;AAAA,QACZ,gBAAc;AAAA,QACd,qBAAmB,WAAW,OAAO;AAAA,QACrC,UAAU,CAAC;AAAA,QACX,MAAK;AAAA,QACL,UAAU;AAAA,QACV,MAAK;AAAA,QACL,SAAQ;AAAA,QACR,SAAS;AAAA,QACR,GAAG;AAAA,QAEJ;AAAA,UAAC;AAAA;AAAA,YACA,WACC,WAAW,wCAAwC;AAAA;AAAA,QAErD;AAAA;AAAA,IACD;AAAA,EAEF;AACD;AAEA,WAAW,cAAc;","names":[]}