@pixpilot/shadcn-ui 0.1.0 → 0.4.1

package/dist/pagination/Pagination.cjs

@@ -0,0 +1,156 @@
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
+let __pixpilot_shadcn = require("@pixpilot/shadcn");
+__pixpilot_shadcn = require_rolldown_runtime.__toESM(__pixpilot_shadcn);
+let lucide_react = require("lucide-react");
+lucide_react = require_rolldown_runtime.__toESM(lucide_react);
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
+
+//#region src/pagination/Pagination.tsx
+/**
+* Reusable pagination component with configurable page number display.
+*
+* @example
+* // Full variant - default with page numbers
+* <Pagination
+*   page={currentPage}
+*   totalPages={totalPages}
+*   onPageChange={handlePageChange}
+*   variant="full"
+* />
+*
+* @example
+* // Compact variant - page indicator with first/prev/next/last buttons
+* <Pagination
+*   page={currentPage}
+*   totalPages={totalPages}
+*   onPageChange={handlePageChange}
+*   variant="compact"
+* />
+*
+* @example
+* // Simple variant - only prev/next buttons
+* <Pagination
+*   page={currentPage}
+*   totalPages={totalPages}
+*   onPageChange={handlePageChange}
+*   variant="simple"
+*   showPageInfo={true}
+* />
+*/
+const Pagination = ({ page, totalPages, onPageChange, maxVisiblePages = 6, variant = "full", showPageInfo = false, className }) => {
+	if (totalPages <= 1) return null;
+	const handlePageClick = (newPage) => (e) => {
+		e.preventDefault();
+		onPageChange(e, newPage);
+	};
+	/**
+	* Generate page numbers to show.
+	* Always shows exactly maxVisiblePages numbers (or less if totalPages is smaller).
+	* Examples with maxVisiblePages=4:
+	* - Total 10, Page 1: [1, 2, 3, ellipsis, 10]
+	* - Total 10, Page 5: [1, ellipsis, 5, ellipsis, 10]
+	* - Total 10, Page 10: [1, ellipsis, 8, 9, 10]
+	*/
+	const getPageNumbers = () => {
+		const pages$1 = [];
+		if (totalPages <= maxVisiblePages) {
+			for (let i = 1; i <= totalPages; i++) pages$1.push(i);
+			return pages$1;
+		}
+		const firstPage = 1;
+		const lastPage = totalPages;
+		const reservedSlots = 2;
+		const canFitAtStart = page <= maxVisiblePages - 1;
+		const canFitAtEnd = page >= totalPages - (maxVisiblePages - reservedSlots);
+		if (canFitAtStart) {
+			for (let i = 1; i < maxVisiblePages; i++) pages$1.push(i);
+			pages$1.push("ellipsis-end");
+			pages$1.push(lastPage);
+		} else if (canFitAtEnd) {
+			pages$1.push(firstPage);
+			pages$1.push("ellipsis-start");
+			for (let i = totalPages - (maxVisiblePages - reservedSlots); i <= totalPages; i++) pages$1.push(i);
+		} else {
+			const middleSlots = maxVisiblePages - reservedSlots;
+			const halfSlots = 2;
+			pages$1.push(firstPage);
+			pages$1.push("ellipsis-start");
+			let start = page - Math.floor(middleSlots / halfSlots);
+			let end = start + middleSlots - 1;
+			start = Math.max(firstPage + 1, start);
+			end = Math.min(lastPage - 1, end);
+			if (end - start + 1 < middleSlots) if (start === firstPage + 1) end = start + middleSlots - 1;
+			else start = end - middleSlots + 1;
+			for (let i = start; i <= end; i++) pages$1.push(i);
+			pages$1.push("ellipsis-end");
+			pages$1.push(lastPage);
+		}
+		return pages$1;
+	};
+	const pages = getPageNumbers();
+	if (variant === "compact") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.Pagination, {
+		className,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.PaginationContent, { children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.PaginationItem, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.PaginationLink, {
+				onClick: handlePageClick(1),
+				"aria-label": "Go to first page",
+				className: "gap-1 px-2",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronsLeft, { className: "h-4 w-4" })
+			}) }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.PaginationItem, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.PaginationPrevious, { onClick: handlePageClick(Math.max(1, page - 1)) }) }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.PaginationItem, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+				className: "flex h-9 items-center justify-center px-4 text-sm font-medium",
+				children: [
+					page,
+					"/",
+					totalPages
+				]
+			}) }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.PaginationItem, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.PaginationNext, { onClick: handlePageClick(Math.min(totalPages, page + 1)) }) }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.PaginationItem, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.PaginationLink, {
+				onClick: handlePageClick(totalPages),
+				"aria-label": "Go to last page",
+				className: "gap-1 px-2",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronsRight, { className: "h-4 w-4" })
+			}) })
+		] })
+	});
+	if (variant === "simple") return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: `flex items-center justify-center gap-4 ${className ?? ""}`,
+		children: [showPageInfo && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+			className: "text-sm whitespace-nowrap",
+			children: [
+				"Page ",
+				page,
+				" of ",
+				totalPages
+			]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.Pagination, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.PaginationContent, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.PaginationItem, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.PaginationPrevious, { onClick: handlePageClick(Math.max(1, page - 1)) }) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.PaginationItem, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.PaginationNext, { onClick: handlePageClick(Math.min(totalPages, page + 1)) }) })] }) })]
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: `flex items-center justify-center gap-4 ${className ?? ""}`,
+		children: [showPageInfo && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+			className: "text-sm whitespace-nowrap",
+			children: [
+				"Page ",
+				page,
+				" of ",
+				totalPages
+			]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.Pagination, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.PaginationContent, { children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.PaginationItem, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.PaginationPrevious, { onClick: handlePageClick(Math.max(1, page - 1)) }) }),
+			pages.map((p) => typeof p === "string" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.PaginationItem, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.PaginationEllipsis, {}) }, p) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.PaginationItem, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.PaginationLink, {
+				onClick: handlePageClick(p),
+				isActive: p === page,
+				children: p
+			}) }, p)),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.PaginationItem, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.PaginationNext, { onClick: handlePageClick(Math.min(totalPages, page + 1)) }) })
+		] }) })]
+	});
+};
+
+//#endregion
+exports.Pagination = Pagination;

package/dist/{Pagination → pagination}/Pagination.d.cts

@@ -1,6 +1,6 @@
 import React from "react";
 
-//#region src/Pagination/Pagination.d.ts
+//#region src/pagination/Pagination.d.ts
 interface PaginationProps {
   /**
    * Current page number (1-indexed)

package/dist/{Pagination → pagination}/Pagination.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 
-//#region src/Pagination/Pagination.d.ts
+//#region src/pagination/Pagination.d.ts
 interface PaginationProps {
   /**
    * Current page number (1-indexed)

package/dist/pagination/Pagination.js

@@ -0,0 +1,151 @@
+import { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious } from "@pixpilot/shadcn";
+import { ChevronsLeft, ChevronsRight } from "lucide-react";
+import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/pagination/Pagination.tsx
+/**
+* Reusable pagination component with configurable page number display.
+*
+* @example
+* // Full variant - default with page numbers
+* <Pagination
+*   page={currentPage}
+*   totalPages={totalPages}
+*   onPageChange={handlePageChange}
+*   variant="full"
+* />
+*
+* @example
+* // Compact variant - page indicator with first/prev/next/last buttons
+* <Pagination
+*   page={currentPage}
+*   totalPages={totalPages}
+*   onPageChange={handlePageChange}
+*   variant="compact"
+* />
+*
+* @example
+* // Simple variant - only prev/next buttons
+* <Pagination
+*   page={currentPage}
+*   totalPages={totalPages}
+*   onPageChange={handlePageChange}
+*   variant="simple"
+*   showPageInfo={true}
+* />
+*/
+const Pagination$1 = ({ page, totalPages, onPageChange, maxVisiblePages = 6, variant = "full", showPageInfo = false, className }) => {
+	if (totalPages <= 1) return null;
+	const handlePageClick = (newPage) => (e) => {
+		e.preventDefault();
+		onPageChange(e, newPage);
+	};
+	/**
+	* Generate page numbers to show.
+	* Always shows exactly maxVisiblePages numbers (or less if totalPages is smaller).
+	* Examples with maxVisiblePages=4:
+	* - Total 10, Page 1: [1, 2, 3, ellipsis, 10]
+	* - Total 10, Page 5: [1, ellipsis, 5, ellipsis, 10]
+	* - Total 10, Page 10: [1, ellipsis, 8, 9, 10]
+	*/
+	const getPageNumbers = () => {
+		const pages$1 = [];
+		if (totalPages <= maxVisiblePages) {
+			for (let i = 1; i <= totalPages; i++) pages$1.push(i);
+			return pages$1;
+		}
+		const firstPage = 1;
+		const lastPage = totalPages;
+		const reservedSlots = 2;
+		const canFitAtStart = page <= maxVisiblePages - 1;
+		const canFitAtEnd = page >= totalPages - (maxVisiblePages - reservedSlots);
+		if (canFitAtStart) {
+			for (let i = 1; i < maxVisiblePages; i++) pages$1.push(i);
+			pages$1.push("ellipsis-end");
+			pages$1.push(lastPage);
+		} else if (canFitAtEnd) {
+			pages$1.push(firstPage);
+			pages$1.push("ellipsis-start");
+			for (let i = totalPages - (maxVisiblePages - reservedSlots); i <= totalPages; i++) pages$1.push(i);
+		} else {
+			const middleSlots = maxVisiblePages - reservedSlots;
+			const halfSlots = 2;
+			pages$1.push(firstPage);
+			pages$1.push("ellipsis-start");
+			let start = page - Math.floor(middleSlots / halfSlots);
+			let end = start + middleSlots - 1;
+			start = Math.max(firstPage + 1, start);
+			end = Math.min(lastPage - 1, end);
+			if (end - start + 1 < middleSlots) if (start === firstPage + 1) end = start + middleSlots - 1;
+			else start = end - middleSlots + 1;
+			for (let i = start; i <= end; i++) pages$1.push(i);
+			pages$1.push("ellipsis-end");
+			pages$1.push(lastPage);
+		}
+		return pages$1;
+	};
+	const pages = getPageNumbers();
+	if (variant === "compact") return /* @__PURE__ */ jsx(Pagination, {
+		className,
+		children: /* @__PURE__ */ jsxs(PaginationContent, { children: [
+			/* @__PURE__ */ jsx(PaginationItem, { children: /* @__PURE__ */ jsx(PaginationLink, {
+				onClick: handlePageClick(1),
+				"aria-label": "Go to first page",
+				className: "gap-1 px-2",
+				children: /* @__PURE__ */ jsx(ChevronsLeft, { className: "h-4 w-4" })
+			}) }),
+			/* @__PURE__ */ jsx(PaginationItem, { children: /* @__PURE__ */ jsx(PaginationPrevious, { onClick: handlePageClick(Math.max(1, page - 1)) }) }),
+			/* @__PURE__ */ jsx(PaginationItem, { children: /* @__PURE__ */ jsxs("span", {
+				className: "flex h-9 items-center justify-center px-4 text-sm font-medium",
+				children: [
+					page,
+					"/",
+					totalPages
+				]
+			}) }),
+			/* @__PURE__ */ jsx(PaginationItem, { children: /* @__PURE__ */ jsx(PaginationNext, { onClick: handlePageClick(Math.min(totalPages, page + 1)) }) }),
+			/* @__PURE__ */ jsx(PaginationItem, { children: /* @__PURE__ */ jsx(PaginationLink, {
+				onClick: handlePageClick(totalPages),
+				"aria-label": "Go to last page",
+				className: "gap-1 px-2",
+				children: /* @__PURE__ */ jsx(ChevronsRight, { className: "h-4 w-4" })
+			}) })
+		] })
+	});
+	if (variant === "simple") return /* @__PURE__ */ jsxs("div", {
+		className: `flex items-center justify-center gap-4 ${className ?? ""}`,
+		children: [showPageInfo && /* @__PURE__ */ jsxs("span", {
+			className: "text-sm whitespace-nowrap",
+			children: [
+				"Page ",
+				page,
+				" of ",
+				totalPages
+			]
+		}), /* @__PURE__ */ jsx(Pagination, { children: /* @__PURE__ */ jsxs(PaginationContent, { children: [/* @__PURE__ */ jsx(PaginationItem, { children: /* @__PURE__ */ jsx(PaginationPrevious, { onClick: handlePageClick(Math.max(1, page - 1)) }) }), /* @__PURE__ */ jsx(PaginationItem, { children: /* @__PURE__ */ jsx(PaginationNext, { onClick: handlePageClick(Math.min(totalPages, page + 1)) }) })] }) })]
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: `flex items-center justify-center gap-4 ${className ?? ""}`,
+		children: [showPageInfo && /* @__PURE__ */ jsxs("span", {
+			className: "text-sm whitespace-nowrap",
+			children: [
+				"Page ",
+				page,
+				" of ",
+				totalPages
+			]
+		}), /* @__PURE__ */ jsx(Pagination, { children: /* @__PURE__ */ jsxs(PaginationContent, { children: [
+			/* @__PURE__ */ jsx(PaginationItem, { children: /* @__PURE__ */ jsx(PaginationPrevious, { onClick: handlePageClick(Math.max(1, page - 1)) }) }),
+			pages.map((p) => typeof p === "string" ? /* @__PURE__ */ jsx(PaginationItem, { children: /* @__PURE__ */ jsx(PaginationEllipsis, {}) }, p) : /* @__PURE__ */ jsx(PaginationItem, { children: /* @__PURE__ */ jsx(PaginationLink, {
+				onClick: handlePageClick(p),
+				isActive: p === page,
+				children: p
+			}) }, p)),
+			/* @__PURE__ */ jsx(PaginationItem, { children: /* @__PURE__ */ jsx(PaginationNext, { onClick: handlePageClick(Math.min(totalPages, page + 1)) }) })
+		] }) })]
+	});
+};
+
+//#endregion
+export { Pagination$1 as Pagination };

package/dist/pagination/index.cjs

@@ -0,0 +1,2 @@
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
+const require_Pagination = require('./Pagination.cjs');

package/dist/pagination/index.js

@@ -0,0 +1 @@
+import { Pagination } from "./Pagination.js";

package/dist/rich-text-editor/RichTextEditor.cjs

@@ -0,0 +1,132 @@
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
+const require_predefined_toolbar_options = require('./predefined-toolbar-options.cjs');
+let __pixpilot_shadcn = require("@pixpilot/shadcn");
+__pixpilot_shadcn = require_rolldown_runtime.__toESM(__pixpilot_shadcn);
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
+let __tiptap_react = require("@tiptap/react");
+__tiptap_react = require_rolldown_runtime.__toESM(__tiptap_react);
+let __tiptap_starter_kit = require("@tiptap/starter-kit");
+__tiptap_starter_kit = require_rolldown_runtime.__toESM(__tiptap_starter_kit);
+
+//#region src/rich-text-editor/RichTextEditor.tsx
+const ToolbarButton = ({ onClick, isActive, disabled, children, tooltip }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.Tooltip, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.TooltipTrigger, {
+	asChild: true,
+	children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.Button, {
+		type: "button",
+		variant: isActive ? "default" : "ghost",
+		size: "sm",
+		onMouseDown: (event) => {
+			event.preventDefault();
+		},
+		onClick,
+		disabled,
+		className: "h-8 w-8 p-0",
+		children
+	})
+}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.TooltipContent, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", { children: tooltip }) })] });
+const defaultExtensions = [];
+const defaultToolbarOptions = [
+	"bold",
+	"italic",
+	"underline",
+	"strike",
+	"code",
+	"|",
+	"heading1",
+	"heading2",
+	"heading3",
+	"|",
+	"bulletList",
+	"orderedList",
+	"|",
+	"blockquote",
+	"codeBlock"
+];
+const RichTextEditor = ({ content, onChange, extensions = defaultExtensions, editable = true, className, contentClassName, showToolbar = true, toolbarOptions = defaultToolbarOptions, editorProps: customEditorProps }) => {
+	const [, forceRender] = react.default.useReducer((x) => x + 1, 0);
+	const defaultEditorProps = { attributes: { class: (0, __pixpilot_shadcn.cn)("min-h-[200px] p-4 text-sm leading-relaxed focus:outline-none", "[&_h1]:text-3xl [&_h1]:font-bold [&_h1]:leading-tight [&_h1]:my-2", "[&_h2]:text-2xl [&_h2]:font-bold [&_h2]:leading-tight [&_h2]:my-2", "[&_h3]:text-xl [&_h3]:font-bold [&_h3]:leading-tight [&_h3]:my-2", "[&_p]:my-2", "[&_ul]:list-disc [&_ul]:pl-6 [&_ul]:my-2", "[&_ol]:list-decimal [&_ol]:pl-6 [&_ol]:my-2", "[&_blockquote]:border-l-4 [&_blockquote]:border-border [&_blockquote]:pl-4 [&_blockquote]:my-2 [&_blockquote]:italic", "[&_code]:bg-muted [&_code]:px-1 [&_code]:py-0.5 [&_code]:rounded [&_code]:text-[0.875em] [&_code]:font-mono", "[&_pre]:bg-muted [&_pre]:p-4 [&_pre]:rounded [&_pre]:overflow-x-auto [&_pre]:font-mono", contentClassName) } };
+	const mergedEditorProps = {
+		...defaultEditorProps,
+		...customEditorProps,
+		attributes: {
+			...defaultEditorProps.attributes,
+			...customEditorProps?.attributes,
+			class: (0, __pixpilot_shadcn.cn)(defaultEditorProps.attributes.class, (customEditorProps?.attributes)?.class)
+		}
+	};
+	const editorInstance = (0, __tiptap_react.useEditor)({
+		extensions: [__tiptap_starter_kit.default].concat(extensions),
+		content,
+		editable,
+		onUpdate: ({ editor: updatedEditor }) => {
+			onChange?.(updatedEditor.getHTML());
+		},
+		editorProps: mergedEditorProps
+	});
+	react.default.useEffect(() => {
+		if (editorInstance == null) return () => {};
+		const rerender = () => {
+			forceRender();
+		};
+		editorInstance.on("selectionUpdate", rerender);
+		editorInstance.on("transaction", rerender);
+		editorInstance.on("focus", rerender);
+		editorInstance.on("blur", rerender);
+		return () => {
+			editorInstance.off("selectionUpdate", rerender);
+			editorInstance.off("transaction", rerender);
+			editorInstance.off("focus", rerender);
+			editorInstance.off("blur", rerender);
+		};
+	}, [editorInstance]);
+	if (editorInstance == null) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: (0, __pixpilot_shadcn.cn)("border rounded-md bg-background", className),
+		children: [showToolbar && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "flex flex-wrap items-center gap-1 border-b p-2 h-10" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "min-h-[200px] p-4 text-sm leading-relaxed",
+			children: "Loading editor..."
+		})]
+	});
+	const handleCommand = (commandFn) => {
+		try {
+			commandFn();
+		} catch {}
+	};
+	const renderToolbar = () => {
+		if (!showToolbar) return null;
+		const isEditorFocused = editorInstance.isFocused;
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "flex flex-wrap items-center gap-1 border-b p-2",
+			children: toolbarOptions.map((option, index) => {
+				if (option === "|") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "mx-1 h-6 w-px bg-border" }, `separator-${index}`);
+				if (typeof option === "string") {
+					const predefinedOption = require_predefined_toolbar_options.predefinedToolbarOptions[option];
+					if (!predefinedOption) return null;
+					return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToolbarButton, {
+						onClick: () => handleCommand(() => predefinedOption.onClick(editorInstance)),
+						isActive: isEditorFocused && (predefinedOption.isActive?.(editorInstance) ?? false),
+						tooltip: predefinedOption.tooltip,
+						children: predefinedOption.icon
+					}, option);
+				}
+				const customOption = option;
+				return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToolbarButton, {
+					onClick: () => handleCommand(() => customOption.onClick(editorInstance)),
+					isActive: isEditorFocused && (customOption.isActive?.(editorInstance) ?? false),
+					tooltip: customOption.tooltip,
+					children: customOption.icon
+				}, `custom-${index}-${customOption.tooltip}`);
+			})
+		});
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: (0, __pixpilot_shadcn.cn)("border rounded-md bg-background", className),
+		children: [renderToolbar(), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__tiptap_react.EditorContent, { editor: editorInstance })]
+	});
+};
+RichTextEditor.displayName = "RichTextEditor";
+
+//#endregion
+exports.RichTextEditor = RichTextEditor;

package/dist/rich-text-editor/RichTextEditor.d.cts

@@ -0,0 +1,55 @@
+import React from "react";
+import { Editor, Extension } from "@tiptap/core";
+
+//#region src/rich-text-editor/RichTextEditor.d.ts
+type EditorProps = Editor['options']['editorProps'];
+type ToolbarOption = string | '|' | {
+  icon: React.ReactNode;
+  tooltip: string;
+  onClick: (editor: any) => void;
+  isActive?: (editor: any) => boolean;
+};
+interface RichTextEditorProps {
+  /**
+   * The initial content of the editor
+   */
+  content?: string;
+  /**
+   * Callback when the content changes
+   */
+  onChange?: (content: string) => void;
+  /**
+   * Additional extensions to add to the editor
+   */
+  extensions?: Extension[];
+  /**
+   * Whether the editor is editable
+   * @default true
+   */
+  editable?: boolean;
+  /**
+   * Custom class name for the editor container
+   */
+  className?: string;
+  /**
+   * Custom class name for the editor content
+   */
+  contentClassName?: string;
+  /**
+   * Whether to show the toolbar
+   * @default true
+   */
+  showToolbar?: boolean;
+  /**
+   * Array of toolbar options to display. If provided, only these options will be shown.
+   * Can be strings for predefined commands or objects for custom buttons.
+   */
+  toolbarOptions?: ToolbarOption[];
+  /**
+   * Custom editor props to pass to the editor
+   */
+  editorProps?: EditorProps;
+}
+declare const RichTextEditor: React.FC<RichTextEditorProps>;
+//#endregion
+export { RichTextEditor, RichTextEditorProps, ToolbarOption };

package/dist/rich-text-editor/RichTextEditor.d.ts

@@ -0,0 +1,55 @@
+import React from "react";
+import { Editor, Extension } from "@tiptap/core";
+
+//#region src/rich-text-editor/RichTextEditor.d.ts
+type EditorProps = Editor['options']['editorProps'];
+type ToolbarOption = string | '|' | {
+  icon: React.ReactNode;
+  tooltip: string;
+  onClick: (editor: any) => void;
+  isActive?: (editor: any) => boolean;
+};
+interface RichTextEditorProps {
+  /**
+   * The initial content of the editor
+   */
+  content?: string;
+  /**
+   * Callback when the content changes
+   */
+  onChange?: (content: string) => void;
+  /**
+   * Additional extensions to add to the editor
+   */
+  extensions?: Extension[];
+  /**
+   * Whether the editor is editable
+   * @default true
+   */
+  editable?: boolean;
+  /**
+   * Custom class name for the editor container
+   */
+  className?: string;
+  /**
+   * Custom class name for the editor content
+   */
+  contentClassName?: string;
+  /**
+   * Whether to show the toolbar
+   * @default true
+   */
+  showToolbar?: boolean;
+  /**
+   * Array of toolbar options to display. If provided, only these options will be shown.
+   * Can be strings for predefined commands or objects for custom buttons.
+   */
+  toolbarOptions?: ToolbarOption[];
+  /**
+   * Custom editor props to pass to the editor
+   */
+  editorProps?: EditorProps;
+}
+declare const RichTextEditor: React.FC<RichTextEditorProps>;
+//#endregion
+export { RichTextEditor, RichTextEditorProps, ToolbarOption };