@pixpilot/shadcn-ui 1.27.0 → 1.28.0

package/dist/dialog/Dialog.d.cts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime8 from "react/jsx-runtime";
+import * as react_jsx_runtime9 from "react/jsx-runtime";
 import { DialogContent } from "@pixpilot/shadcn";
 import * as React$1 from "react";
 import * as _radix_ui_react_dialog0 from "@radix-ui/react-dialog";
@@ -13,14 +13,14 @@ declare const DialogContent$1: React$1.ForwardRefExoticComponent<Omit<_radix_ui_
 declare function DialogHeader({
   className,
   ...props
-}: React$1.HTMLAttributes<HTMLDivElement>): react_jsx_runtime8.JSX.Element;
+}: React$1.HTMLAttributes<HTMLDivElement>): react_jsx_runtime9.JSX.Element;
 declare function DialogBody({
   className,
   ...props
-}: React$1.HTMLAttributes<HTMLDivElement>): react_jsx_runtime8.JSX.Element;
+}: React$1.HTMLAttributes<HTMLDivElement>): react_jsx_runtime9.JSX.Element;
 declare function DialogFooter({
   className,
   ...props
-}: React$1.HTMLAttributes<HTMLDivElement>): react_jsx_runtime8.JSX.Element;
+}: React$1.HTMLAttributes<HTMLDivElement>): react_jsx_runtime9.JSX.Element;
 //#endregion
 export { DialogBody, DialogContent$1 as DialogContent, DialogContentProps, DialogFooter, DialogHeader };

package/dist/file-upload/FileUpload.d.cts

@@ -1,7 +1,7 @@
 import { FileUploadProps } from "./types/index.cjs";
-import * as react_jsx_runtime16 from "react/jsx-runtime";
+import * as react_jsx_runtime8 from "react/jsx-runtime";
 
 //#region src/file-upload/FileUpload.d.ts
-declare function FileUpload(props: FileUploadProps): react_jsx_runtime16.JSX.Element;
+declare function FileUpload(props: FileUploadProps): react_jsx_runtime8.JSX.Element;
 //#endregion
 export { FileUpload };

package/dist/file-upload-inline/FileUploadInline.d.ts

@@ -1,10 +1,10 @@
 import { FileUploadInlineProps } from "./types.js";
-import * as react_jsx_runtime12 from "react/jsx-runtime";
+import * as react_jsx_runtime13 from "react/jsx-runtime";
 
 //#region src/file-upload-inline/FileUploadInline.d.ts
 /**
  * FileUploadInline - An inline file upload component using FileUpload primitives
  */
-declare function FileUploadInline(props: FileUploadInlineProps): react_jsx_runtime12.JSX.Element;
+declare function FileUploadInline(props: FileUploadInlineProps): react_jsx_runtime13.JSX.Element;
 //#endregion
 export { FileUploadInline };

package/dist/file-upload-root/FileUploadRoot.d.ts

@@ -1,11 +1,11 @@
 import { FileUploadRootProps } from "./types.js";
-import * as react_jsx_runtime13 from "react/jsx-runtime";
+import * as react_jsx_runtime12 from "react/jsx-runtime";
 
 //#region src/file-upload-root/FileUploadRoot.d.ts
 /**
  * FileUploadInline - An inline file upload component using FileUpload primitives
  */
-declare function FileUploadRoot(props: FileUploadRootProps): react_jsx_runtime13.JSX.Element;
+declare function FileUploadRoot(props: FileUploadRootProps): react_jsx_runtime12.JSX.Element;
 declare namespace FileUploadRoot {
   var displayName: string;
 }

package/dist/input/Input.d.cts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime11 from "react/jsx-runtime";
+import * as react_jsx_runtime14 from "react/jsx-runtime";
 import { InputProps } from "@pixpilot/shadcn";
 import * as React$1 from "react";
 
@@ -10,6 +10,6 @@ type InputProps$1 = InputProps & {
   prefixClassName?: string;
   suffixClassName?: string;
 };
-declare function Input(props: InputProps$1): react_jsx_runtime11.JSX.Element;
+declare function Input(props: InputProps$1): react_jsx_runtime14.JSX.Element;
 //#endregion
 export { Input, InputProps$1 as InputProps };

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

@@ -0,0 +1,185 @@
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
+const require_Button = require('../Button.cjs');
+const require_Input = require('../input/Input.cjs');
+require('../input/index.cjs');
+const require_Popover = require('../popover/Popover.cjs');
+require('../popover/index.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/rich-text-editor/LinkPopoverToolbarButton.tsx
+function getLinkTargetOption(target) {
+	return target === "_blank" ? "blank" : "current";
+}
+function getLinkAttributes(openTarget) {
+	if (openTarget === "blank") return {
+		target: "_blank",
+		rel: "noopener noreferrer"
+	};
+	return {
+		target: null,
+		rel: null
+	};
+}
+const LinkPopoverToolbarButton = ({ editor, isActive, className, tooltipMode, allowLinkTarget = false }) => {
+	const [open, setOpen] = react.default.useState(false);
+	const [href, setHref] = react.default.useState("");
+	const [openTarget, setOpenTarget] = react.default.useState("current");
+	const inputRef = react.default.useRef(null);
+	const syncFormFromSelection = react.default.useCallback(() => {
+		const attributes = editor.getAttributes("link");
+		setHref(typeof attributes.href === "string" ? attributes.href : "");
+		setOpenTarget(getLinkTargetOption(attributes.target));
+	}, [editor]);
+	const handleOpenChange = (nextOpen) => {
+		if (nextOpen) syncFormFromSelection();
+		setOpen(nextOpen);
+	};
+	react.default.useEffect(() => {
+		if (!open) return;
+		window.requestAnimationFrame(() => {
+			inputRef.current?.focus();
+			inputRef.current?.select();
+		});
+	}, [open]);
+	const applyLink = () => {
+		const trimmedHref = href.trim();
+		if (!trimmedHref) {
+			editor.chain().focus().extendMarkRange("link").unsetLink().run();
+			setOpen(false);
+			return;
+		}
+		editor.chain().focus().extendMarkRange("link").setLink({
+			href: trimmedHref,
+			...getLinkAttributes(allowLinkTarget ? openTarget : "current")
+		}).run();
+		setOpen(false);
+	};
+	const removeLink = () => {
+		editor.chain().focus().extendMarkRange("link").unsetLink().run();
+		setOpen(false);
+	};
+	const tooltip = "Edit Link";
+	const inputId = `link-input-${react.default.useId()}`;
+	const radioCurrentId = `link-target-current-${react.default.useId()}`;
+	const radioBlankId = `link-target-blank-${react.default.useId()}`;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.Popover, {
+		open,
+		onOpenChange: handleOpenChange,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.PopoverTrigger, {
+			asChild: true,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Button.Button, {
+				...tooltipMode === "native" ? { title: tooltip } : { tooltip },
+				"data-slot": "link-button",
+				type: "button",
+				variant: isActive ? "default" : "ghost",
+				size: "sm",
+				onMouseDown: (event) => {
+					event.preventDefault();
+				},
+				className: (0, __pixpilot_shadcn.cn)("h-8 w-8 p-0", className),
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Link, { className: "h-4 w-4" })
+			})
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Popover.PopoverContent, {
+			align: "start",
+			className: "w-80 space-y-3 p-3",
+			onEscapeKeyDown: () => {
+				setOpen(false);
+			},
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("form", {
+				className: "space-y-3",
+				"data-slot": "link-form",
+				onSubmit: (event) => {
+					event.preventDefault();
+					event.stopPropagation();
+					applyLink();
+				},
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "space-y-1.5",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.Label, {
+							htmlFor: inputId,
+							children: "URL"
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Input.Input, {
+							ref: inputRef,
+							id: inputId,
+							type: "url",
+							value: href,
+							placeholder: "https://example.com",
+							"data-slot": "link-input",
+							onKeyDown: (event) => {
+								if (event.key === "Escape") setOpen(false);
+							},
+							onChange: (event) => {
+								setHref(event.target.value);
+							}
+						})]
+					}),
+					allowLinkTarget && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.RadioGroup, {
+						value: openTarget,
+						onKeyDown: (event) => {
+							if (event.key === "Escape") setOpen(false);
+							if (event.key === "Enter") {
+								event.preventDefault();
+								applyLink();
+							}
+						},
+						onValueChange: (value) => {
+							setOpenTarget(value);
+						},
+						className: "gap-2",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "flex items-center gap-2",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.RadioGroupItem, {
+								id: radioCurrentId,
+								"data-slot": "link-target-current",
+								value: "current"
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.Label, {
+								htmlFor: radioCurrentId,
+								children: "Open in this window"
+							})]
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "flex items-center gap-2",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.RadioGroupItem, {
+								id: radioBlankId,
+								"data-slot": "link-target-blank",
+								value: "blank"
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.Label, {
+								htmlFor: radioBlankId,
+								children: "Open in new window"
+							})]
+						})]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "flex items-center justify-between gap-2",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Button.Button, {
+							type: "button",
+							variant: "ghost",
+							size: "sm",
+							onClick: removeLink,
+							"data-slot": "link-remove-button",
+							disabled: !editor.isActive("link"),
+							children: "Remove"
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Button.Button, {
+							type: "submit",
+							size: "sm",
+							disabled: !href.trim(),
+							"data-slot": "link-apply-button",
+							children: "Apply"
+						})]
+					})
+				]
+			})
+		})]
+	});
+};
+LinkPopoverToolbarButton.displayName = "LinkPopoverToolbarButton";
+
+//#endregion
+exports.LinkPopoverToolbarButton = LinkPopoverToolbarButton;

package/dist/rich-text-editor/LinkPopoverToolbarButton.js

@@ -0,0 +1,180 @@
+import { Button as Button$1 } from "../Button.js";
+import { Input as Input$1 } from "../input/Input.js";
+import "../input/index.js";
+import { Popover as Popover$1, PopoverContent as PopoverContent$1, PopoverTrigger as PopoverTrigger$1 } from "../popover/Popover.js";
+import "../popover/index.js";
+import { Label, RadioGroup, RadioGroupItem, cn } from "@pixpilot/shadcn";
+import { Link } from "lucide-react";
+import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/rich-text-editor/LinkPopoverToolbarButton.tsx
+function getLinkTargetOption(target) {
+	return target === "_blank" ? "blank" : "current";
+}
+function getLinkAttributes(openTarget) {
+	if (openTarget === "blank") return {
+		target: "_blank",
+		rel: "noopener noreferrer"
+	};
+	return {
+		target: null,
+		rel: null
+	};
+}
+const LinkPopoverToolbarButton = ({ editor, isActive, className, tooltipMode, allowLinkTarget = false }) => {
+	const [open, setOpen] = React.useState(false);
+	const [href, setHref] = React.useState("");
+	const [openTarget, setOpenTarget] = React.useState("current");
+	const inputRef = React.useRef(null);
+	const syncFormFromSelection = React.useCallback(() => {
+		const attributes = editor.getAttributes("link");
+		setHref(typeof attributes.href === "string" ? attributes.href : "");
+		setOpenTarget(getLinkTargetOption(attributes.target));
+	}, [editor]);
+	const handleOpenChange = (nextOpen) => {
+		if (nextOpen) syncFormFromSelection();
+		setOpen(nextOpen);
+	};
+	React.useEffect(() => {
+		if (!open) return;
+		window.requestAnimationFrame(() => {
+			inputRef.current?.focus();
+			inputRef.current?.select();
+		});
+	}, [open]);
+	const applyLink = () => {
+		const trimmedHref = href.trim();
+		if (!trimmedHref) {
+			editor.chain().focus().extendMarkRange("link").unsetLink().run();
+			setOpen(false);
+			return;
+		}
+		editor.chain().focus().extendMarkRange("link").setLink({
+			href: trimmedHref,
+			...getLinkAttributes(allowLinkTarget ? openTarget : "current")
+		}).run();
+		setOpen(false);
+	};
+	const removeLink = () => {
+		editor.chain().focus().extendMarkRange("link").unsetLink().run();
+		setOpen(false);
+	};
+	const tooltip = "Edit Link";
+	const inputId = `link-input-${React.useId()}`;
+	const radioCurrentId = `link-target-current-${React.useId()}`;
+	const radioBlankId = `link-target-blank-${React.useId()}`;
+	return /* @__PURE__ */ jsxs(Popover$1, {
+		open,
+		onOpenChange: handleOpenChange,
+		children: [/* @__PURE__ */ jsx(PopoverTrigger$1, {
+			asChild: true,
+			children: /* @__PURE__ */ jsx(Button$1, {
+				...tooltipMode === "native" ? { title: tooltip } : { tooltip },
+				"data-slot": "link-button",
+				type: "button",
+				variant: isActive ? "default" : "ghost",
+				size: "sm",
+				onMouseDown: (event) => {
+					event.preventDefault();
+				},
+				className: cn("h-8 w-8 p-0", className),
+				children: /* @__PURE__ */ jsx(Link, { className: "h-4 w-4" })
+			})
+		}), /* @__PURE__ */ jsx(PopoverContent$1, {
+			align: "start",
+			className: "w-80 space-y-3 p-3",
+			onEscapeKeyDown: () => {
+				setOpen(false);
+			},
+			children: /* @__PURE__ */ jsxs("form", {
+				className: "space-y-3",
+				"data-slot": "link-form",
+				onSubmit: (event) => {
+					event.preventDefault();
+					event.stopPropagation();
+					applyLink();
+				},
+				children: [
+					/* @__PURE__ */ jsxs("div", {
+						className: "space-y-1.5",
+						children: [/* @__PURE__ */ jsx(Label, {
+							htmlFor: inputId,
+							children: "URL"
+						}), /* @__PURE__ */ jsx(Input$1, {
+							ref: inputRef,
+							id: inputId,
+							type: "url",
+							value: href,
+							placeholder: "https://example.com",
+							"data-slot": "link-input",
+							onKeyDown: (event) => {
+								if (event.key === "Escape") setOpen(false);
+							},
+							onChange: (event) => {
+								setHref(event.target.value);
+							}
+						})]
+					}),
+					allowLinkTarget && /* @__PURE__ */ jsxs(RadioGroup, {
+						value: openTarget,
+						onKeyDown: (event) => {
+							if (event.key === "Escape") setOpen(false);
+							if (event.key === "Enter") {
+								event.preventDefault();
+								applyLink();
+							}
+						},
+						onValueChange: (value) => {
+							setOpenTarget(value);
+						},
+						className: "gap-2",
+						children: [/* @__PURE__ */ jsxs("div", {
+							className: "flex items-center gap-2",
+							children: [/* @__PURE__ */ jsx(RadioGroupItem, {
+								id: radioCurrentId,
+								"data-slot": "link-target-current",
+								value: "current"
+							}), /* @__PURE__ */ jsx(Label, {
+								htmlFor: radioCurrentId,
+								children: "Open in this window"
+							})]
+						}), /* @__PURE__ */ jsxs("div", {
+							className: "flex items-center gap-2",
+							children: [/* @__PURE__ */ jsx(RadioGroupItem, {
+								id: radioBlankId,
+								"data-slot": "link-target-blank",
+								value: "blank"
+							}), /* @__PURE__ */ jsx(Label, {
+								htmlFor: radioBlankId,
+								children: "Open in new window"
+							})]
+						})]
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "flex items-center justify-between gap-2",
+						children: [/* @__PURE__ */ jsx(Button$1, {
+							type: "button",
+							variant: "ghost",
+							size: "sm",
+							onClick: removeLink,
+							"data-slot": "link-remove-button",
+							disabled: !editor.isActive("link"),
+							children: "Remove"
+						}), /* @__PURE__ */ jsx(Button$1, {
+							type: "submit",
+							size: "sm",
+							disabled: !href.trim(),
+							"data-slot": "link-apply-button",
+							children: "Apply"
+						})]
+					})
+				]
+			})
+		})]
+	});
+};
+LinkPopoverToolbarButton.displayName = "LinkPopoverToolbarButton";
+
+//#endregion
+export { LinkPopoverToolbarButton };

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

@@ -41,21 +41,34 @@ const defaultToolbarItems = [
 	"blockquote",
 	"codeBlock"
 ];
-function useEditorProps(slots, customEditorProps) {
+function useEditorProps(slots, customEditorProps, openOnClick = false) {
 	const defaultEditorProps = react.default.useMemo(() => ({ 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]:mt-8 [&_h1]:mb-4 [&_h1:first-child]:mt-0", "[&_h2]:text-2xl [&_h2]:font-bold [&_h2]:leading-tight [&_h2]:mt-6 [&_h2]:mb-3 [&_h2:first-child]:mt-0", "[&_h3]:text-xl [&_h3]:font-bold [&_h3]:leading-tight [&_h3]:mt-4 [&_h3]:mb-2 [&_h3:first-child]:mt-0", "[&_p]:mb-3", "[&_ul]:list-disc [&_ul]:pl-6 [&_ul]:mb-3", "[&_ol]:list-decimal [&_ol]:pl-6 [&_ol]:mb-3", "[&_blockquote]:border-l-4 [&_blockquote]:border-border [&_blockquote]:pl-4 [&_blockquote]:mb-4 [&_blockquote]:italic [&_blockquote:first-child]:mt-0", "[&_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 [&_pre]:mb-4", "[&_a]:text-blue-500 [&_a]:hover:text-blue-600 [&_a]:cursor-pointer [&_a]:underline [&_a]:underline-offset-2 ", "[&_*:last-child]:mb-0", "[&_.is-editor-empty:first-child::before]:content-[attr(data-placeholder)] [&_.is-editor-empty:first-child::before]:float-left [&_.is-editor-empty:first-child::before]:text-muted-foreground [&_.is-editor-empty:first-child::before]:pointer-events-none [&_.is-editor-empty:first-child::before]:h-0", slots?.content?.className) } }), [slots]);
 	return react.default.useMemo(() => ({
 		...defaultEditorProps,
 		...customEditorProps,
+		handleClickOn: (view, pos, node, nodePos, event, direct) => {
+			const { target } = event;
+			const linkElement = target instanceof Element ? target.closest("a[href]") : null;
+			if (!openOnClick && linkElement != null) {
+				event.preventDefault();
+				return true;
+			}
+			return customEditorProps?.handleClickOn?.(view, pos, node, nodePos, event, direct);
+		},
 		attributes: {
 			...defaultEditorProps.attributes,
 			...customEditorProps?.attributes,
 			class: (0, __pixpilot_shadcn.cn)(defaultEditorProps.attributes.class, (customEditorProps?.attributes)?.class)
 		}
-	}), [defaultEditorProps, customEditorProps]);
+	}), [
+		defaultEditorProps,
+		customEditorProps,
+		openOnClick
+	]);
 }
-const RichTextEditor = ({ value, onChange, extensions = defaultExtensions, editable = true, slots, showToolbar = true, toolbarItems = defaultToolbarItems, editorProps: customEditorProps, immediatelyRender = false, tooltipMode = "native", placeholder }) => {
+const RichTextEditor = ({ value, onChange, extensions = defaultExtensions, editable = true, slots, showToolbar = true, toolbarItems = defaultToolbarItems, editorProps: customEditorProps, immediatelyRender = false, tooltipMode = "native", placeholder, allowLinkTarget = false, openOnClick = false }) => {
 	const [renderTick, forceRender] = react.default.useReducer((x) => x + 1, 0);
-	const mergedEditorProps = useEditorProps(slots, customEditorProps);
+	const mergedEditorProps = useEditorProps(slots, customEditorProps, openOnClick);
 	const onChangeRef = react.default.useRef(onChange);
 	onChangeRef.current = onChange;
 	const handleChange = react.default.useCallback((props) => {
@@ -65,12 +78,22 @@ const RichTextEditor = ({ value, onChange, extensions = defaultExtensions, edita
 		extensions: react.default.useMemo(() => {
 			const baseExtensions = [
 				__tiptap_starter_kit.default,
-				__tiptap_extension_link.default,
+				__tiptap_extension_link.default.configure({
+					openOnClick,
+					HTMLAttributes: {
+						target: null,
+						rel: null
+					}
+				}),
 				__tiptap_extension_text_align.default.configure({ types: ["heading", "paragraph"] })
 			];
 			if (placeholder != null) baseExtensions.push(__tiptap_extension_placeholder.default.configure({ placeholder }));
 			return baseExtensions.concat(extensions);
-		}, [extensions, placeholder]),
+		}, [
+			extensions,
+			placeholder,
+			openOnClick
+		]),
 		content: value,
 		editable,
 		onUpdate: handleChange,
@@ -108,7 +131,8 @@ const RichTextEditor = ({ value, onChange, extensions = defaultExtensions, edita
 			slots,
 			showToolbar,
 			renderTick,
-			tooltipMode
+			tooltipMode,
+			allowLinkTarget
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__tiptap_react.EditorContent, { editor: editorInstance })]
 	});
 };

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

@@ -86,6 +86,18 @@ interface RichTextEditorProps {
    * Placeholder text to show when the editor is empty
    */
   placeholder?: string;
+  /**
+   * Whether the link popover should expose target controls.
+   * When false, links are always written without `target` and `rel`.
+   * @default false
+   */
+  allowLinkTarget?: boolean;
+  /**
+   * Whether link clicks should open links inside the editor.
+   * When false, link clicks are prevented so linked text can be selected.
+   * @default false
+   */
+  openOnClick?: boolean;
 }
 declare const RichTextEditor: React.FC<RichTextEditorProps>;
 //#endregion

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

@@ -86,6 +86,18 @@ interface RichTextEditorProps {
    * Placeholder text to show when the editor is empty
    */
   placeholder?: string;
+  /**
+   * Whether the link popover should expose target controls.
+   * When false, links are always written without `target` and `rel`.
+   * @default false
+   */
+  allowLinkTarget?: boolean;
+  /**
+   * Whether link clicks should open links inside the editor.
+   * When false, link clicks are prevented so linked text can be selected.
+   * @default false
+   */
+  openOnClick?: boolean;
 }
 declare const RichTextEditor: React.FC<RichTextEditorProps>;
 //#endregion

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

@@ -32,21 +32,34 @@ const defaultToolbarItems = [
 	"blockquote",
 	"codeBlock"
 ];
-function useEditorProps(slots, customEditorProps) {
+function useEditorProps(slots, customEditorProps, openOnClick = false) {
 	const defaultEditorProps = React.useMemo(() => ({ attributes: { class: cn("min-h-[200px] p-4 text-sm leading-relaxed focus:outline-none", "[&_h1]:text-3xl [&_h1]:font-bold [&_h1]:leading-tight [&_h1]:mt-8 [&_h1]:mb-4 [&_h1:first-child]:mt-0", "[&_h2]:text-2xl [&_h2]:font-bold [&_h2]:leading-tight [&_h2]:mt-6 [&_h2]:mb-3 [&_h2:first-child]:mt-0", "[&_h3]:text-xl [&_h3]:font-bold [&_h3]:leading-tight [&_h3]:mt-4 [&_h3]:mb-2 [&_h3:first-child]:mt-0", "[&_p]:mb-3", "[&_ul]:list-disc [&_ul]:pl-6 [&_ul]:mb-3", "[&_ol]:list-decimal [&_ol]:pl-6 [&_ol]:mb-3", "[&_blockquote]:border-l-4 [&_blockquote]:border-border [&_blockquote]:pl-4 [&_blockquote]:mb-4 [&_blockquote]:italic [&_blockquote:first-child]:mt-0", "[&_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 [&_pre]:mb-4", "[&_a]:text-blue-500 [&_a]:hover:text-blue-600 [&_a]:cursor-pointer [&_a]:underline [&_a]:underline-offset-2 ", "[&_*:last-child]:mb-0", "[&_.is-editor-empty:first-child::before]:content-[attr(data-placeholder)] [&_.is-editor-empty:first-child::before]:float-left [&_.is-editor-empty:first-child::before]:text-muted-foreground [&_.is-editor-empty:first-child::before]:pointer-events-none [&_.is-editor-empty:first-child::before]:h-0", slots?.content?.className) } }), [slots]);
 	return React.useMemo(() => ({
 		...defaultEditorProps,
 		...customEditorProps,
+		handleClickOn: (view, pos, node, nodePos, event, direct) => {
+			const { target } = event;
+			const linkElement = target instanceof Element ? target.closest("a[href]") : null;
+			if (!openOnClick && linkElement != null) {
+				event.preventDefault();
+				return true;
+			}
+			return customEditorProps?.handleClickOn?.(view, pos, node, nodePos, event, direct);
+		},
 		attributes: {
 			...defaultEditorProps.attributes,
 			...customEditorProps?.attributes,
 			class: cn(defaultEditorProps.attributes.class, (customEditorProps?.attributes)?.class)
 		}
-	}), [defaultEditorProps, customEditorProps]);
+	}), [
+		defaultEditorProps,
+		customEditorProps,
+		openOnClick
+	]);
 }
-const RichTextEditor = ({ value, onChange, extensions = defaultExtensions, editable = true, slots, showToolbar = true, toolbarItems = defaultToolbarItems, editorProps: customEditorProps, immediatelyRender = false, tooltipMode = "native", placeholder }) => {
+const RichTextEditor = ({ value, onChange, extensions = defaultExtensions, editable = true, slots, showToolbar = true, toolbarItems = defaultToolbarItems, editorProps: customEditorProps, immediatelyRender = false, tooltipMode = "native", placeholder, allowLinkTarget = false, openOnClick = false }) => {
 	const [renderTick, forceRender] = React.useReducer((x) => x + 1, 0);
-	const mergedEditorProps = useEditorProps(slots, customEditorProps);
+	const mergedEditorProps = useEditorProps(slots, customEditorProps, openOnClick);
 	const onChangeRef = React.useRef(onChange);
 	onChangeRef.current = onChange;
 	const handleChange = React.useCallback((props) => {
@@ -56,12 +69,22 @@ const RichTextEditor = ({ value, onChange, extensions = defaultExtensions, edita
 		extensions: React.useMemo(() => {
 			const baseExtensions = [
 				StarterKit,
-				Link,
+				Link.configure({
+					openOnClick,
+					HTMLAttributes: {
+						target: null,
+						rel: null
+					}
+				}),
 				TextAlign.configure({ types: ["heading", "paragraph"] })
 			];
 			if (placeholder != null) baseExtensions.push(Placeholder.configure({ placeholder }));
 			return baseExtensions.concat(extensions);
-		}, [extensions, placeholder]),
+		}, [
+			extensions,
+			placeholder,
+			openOnClick
+		]),
 		content: value,
 		editable,
 		onUpdate: handleChange,
@@ -99,7 +122,8 @@ const RichTextEditor = ({ value, onChange, extensions = defaultExtensions, edita
 			slots,
 			showToolbar,
 			renderTick,
-			tooltipMode
+			tooltipMode,
+			allowLinkTarget
 		}), /* @__PURE__ */ jsx(EditorContent, { editor: editorInstance })]
 	});
 };

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

@@ -1,4 +1,5 @@
 const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
+const require_LinkPopoverToolbarButton = require('./LinkPopoverToolbarButton.cjs');
 const require_predefined_toolbar_items = require('./predefined-toolbar-items.cjs');
 const require_ToolbarButton = require('./ToolbarButton.cjs');
 let __pixpilot_shadcn = require("@pixpilot/shadcn");
@@ -9,7 +10,7 @@ let react_jsx_runtime = require("react/jsx-runtime");
 react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
 
 //#region src/rich-text-editor/RichTextEditorToolbar.tsx
-const RichTextEditorToolbarComponent = ({ editor, toolbarItems, slots, showToolbar, renderTick, tooltipMode }) => {
+const RichTextEditorToolbarComponent = ({ editor, toolbarItems, slots, showToolbar, renderTick, tooltipMode, allowLinkTarget }) => {
 	if (!showToolbar) return null;
 	const handleCommand = (commandFn) => {
 		try {
@@ -28,6 +29,13 @@ const RichTextEditorToolbarComponent = ({ editor, toolbarItems, slots, showToolb
 				return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: (0, __pixpilot_shadcn.cn)("mx-1 h-6 w-px bg-border", slots?.toolbar?.separator?.className) }, `separator-${separatorCount}`);
 			}
 			if (typeof option === "string") {
+				if (option === "link" || option === "linkPopover") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_LinkPopoverToolbarButton.LinkPopoverToolbarButton, {
+					editor,
+					isActive: isEditorFocused && editor.isActive("link"),
+					className: slots?.toolbar?.button?.className,
+					tooltipMode,
+					allowLinkTarget
+				}, option);
 				const predefinedOption = require_predefined_toolbar_items.predefinedToolbarItems[option];
 				if (!predefinedOption) return null;
 				return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ToolbarButton.ToolbarButton, {

package/dist/rich-text-editor/RichTextEditorToolbar.js

@@ -1,3 +1,4 @@
+import { LinkPopoverToolbarButton } from "./LinkPopoverToolbarButton.js";
 import { predefinedToolbarItems } from "./predefined-toolbar-items.js";
 import { ToolbarButton } from "./ToolbarButton.js";
 import { cn } from "@pixpilot/shadcn";
@@ -5,7 +6,7 @@ import React from "react";
 import { jsx } from "react/jsx-runtime";
 
 //#region src/rich-text-editor/RichTextEditorToolbar.tsx
-const RichTextEditorToolbarComponent = ({ editor, toolbarItems, slots, showToolbar, renderTick, tooltipMode }) => {
+const RichTextEditorToolbarComponent = ({ editor, toolbarItems, slots, showToolbar, renderTick, tooltipMode, allowLinkTarget }) => {
 	if (!showToolbar) return null;
 	const handleCommand = (commandFn) => {
 		try {
@@ -24,6 +25,13 @@ const RichTextEditorToolbarComponent = ({ editor, toolbarItems, slots, showToolb
 				return /* @__PURE__ */ jsx("div", { className: cn("mx-1 h-6 w-px bg-border", slots?.toolbar?.separator?.className) }, `separator-${separatorCount}`);
 			}
 			if (typeof option === "string") {
+				if (option === "link" || option === "linkPopover") return /* @__PURE__ */ jsx(LinkPopoverToolbarButton, {
+					editor,
+					isActive: isEditorFocused && editor.isActive("link"),
+					className: slots?.toolbar?.button?.className,
+					tooltipMode,
+					allowLinkTarget
+				}, option);
 				const predefinedOption = predefinedToolbarItems[option];
 				if (!predefinedOption) return null;
 				return /* @__PURE__ */ jsx(ToolbarButton, {

package/dist/rich-text-editor/predefined-toolbar-items.cjs

@@ -24,9 +24,9 @@ const predefinedToolbarItems = {
 		onClick: (editor) => editor.chain().focus().toggleUnderline().run(),
 		isActive: (editor) => editor.isActive("underline")
 	},
-	link: {
+	toggleLink: {
 		icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Link, { className: "h-4 w-4" }),
-		tooltip: "Link",
+		tooltip: "Toggle Link",
 		onClick: (editor) => editor.chain().focus().toggleLink().run(),
 		isActive: (editor) => editor.isActive("link")
 	},

package/dist/rich-text-editor/predefined-toolbar-items.js

@@ -21,9 +21,9 @@ const predefinedToolbarItems = {
 		onClick: (editor) => editor.chain().focus().toggleUnderline().run(),
 		isActive: (editor) => editor.isActive("underline")
 	},
-	link: {
+	toggleLink: {
 		icon: /* @__PURE__ */ jsx(Link, { className: "h-4 w-4" }),
-		tooltip: "Link",
+		tooltip: "Toggle Link",
 		onClick: (editor) => editor.chain().focus().toggleLink().run(),
 		isActive: (editor) => editor.isActive("link")
 	},

package/dist/tags-input/TagsInput.d.cts

@@ -1,5 +1,5 @@
 import { CommandOptionListItem } from "../CommandOptionList.cjs";
-import * as react_jsx_runtime15 from "react/jsx-runtime";
+import * as react_jsx_runtime17 from "react/jsx-runtime";
 
 //#region src/tags-input/TagsInput.d.ts
 interface TagsInputProps {
@@ -59,6 +59,6 @@ declare function TagsInput({
   addOnTab,
   onValidate,
   addButtonVisibility
-}: TagsInputProps): react_jsx_runtime15.JSX.Element;
+}: TagsInputProps): react_jsx_runtime17.JSX.Element;
 //#endregion
 export { TagsInput, TagsInputProps };

package/dist/tags-input/TagsInput.d.ts

@@ -1,5 +1,5 @@
 import { CommandOptionListItem } from "../CommandOptionList.js";
-import * as react_jsx_runtime16 from "react/jsx-runtime";
+import * as react_jsx_runtime17 from "react/jsx-runtime";
 
 //#region src/tags-input/TagsInput.d.ts
 interface TagsInputProps {
@@ -59,6 +59,6 @@ declare function TagsInput({
   addOnTab,
   onValidate,
   addButtonVisibility
-}: TagsInputProps): react_jsx_runtime16.JSX.Element;
+}: TagsInputProps): react_jsx_runtime17.JSX.Element;
 //#endregion
 export { TagsInput, TagsInputProps };

package/dist/tags-input/TagsInputInline.d.cts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime14 from "react/jsx-runtime";
+import * as react_jsx_runtime15 from "react/jsx-runtime";
 import { ChangeEventHandler, FocusEventHandler, KeyboardEventHandler, MouseEventHandler, Ref } from "react";
 
 //#region src/tags-input/TagsInputInline.d.ts
@@ -77,6 +77,6 @@ declare function TagsInputInline({
   canAddCurrentValue,
   onAddCurrentInput,
   showClear
-}: TagsInputInlineProps): react_jsx_runtime14.JSX.Element;
+}: TagsInputInlineProps): react_jsx_runtime15.JSX.Element;
 //#endregion
 export { TagsInputInline, TagsInputInlineItem, TagsInputInlineProps };

package/dist/theme-toggle/ThemeModeDropdown.d.ts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime19 from "react/jsx-runtime";
+import * as react_jsx_runtime18 from "react/jsx-runtime";
 
 //#region src/theme-toggle/ThemeModeDropdown.d.ts
 interface ThemeModeDropdownProps {
@@ -18,7 +18,7 @@ interface ThemeModeDropdownProps {
  * Provides Light / Dark / System options.
  * Pure component - requires themeValue and onChange props.
  */
-declare function ThemeModeDropdown(props: ThemeModeDropdownProps): react_jsx_runtime19.JSX.Element;
+declare function ThemeModeDropdown(props: ThemeModeDropdownProps): react_jsx_runtime18.JSX.Element;
 declare namespace ThemeModeDropdown {
   var displayName: string;
 }

package/dist/theme-toggle/ThemeModeSwitchInside.d.cts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime17 from "react/jsx-runtime";
+import * as react_jsx_runtime19 from "react/jsx-runtime";
 
 //#region src/theme-toggle/ThemeModeSwitchInside.d.ts
 type ThemeModeSwitchInsideSize = 'sm' | 'md' | 'lg';
@@ -26,7 +26,7 @@ interface ThemeModeSwitchInsideProps {
  * Icons are embedded within the switch control.
  * Pure component - requires value and onChange props.
  */
-declare function ThemeModeSwitchInside(props: ThemeModeSwitchInsideProps): react_jsx_runtime17.JSX.Element;
+declare function ThemeModeSwitchInside(props: ThemeModeSwitchInsideProps): react_jsx_runtime19.JSX.Element;
 declare namespace ThemeModeSwitchInside {
   var displayName: string;
 }

package/dist/theme-toggle/ThemeModeSwitchInside.d.ts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime20 from "react/jsx-runtime";
+import * as react_jsx_runtime19 from "react/jsx-runtime";
 
 //#region src/theme-toggle/ThemeModeSwitchInside.d.ts
 type ThemeModeSwitchInsideSize = 'sm' | 'md' | 'lg';
@@ -26,7 +26,7 @@ interface ThemeModeSwitchInsideProps {
  * Icons are embedded within the switch control.
  * Pure component - requires value and onChange props.
  */
-declare function ThemeModeSwitchInside(props: ThemeModeSwitchInsideProps): react_jsx_runtime20.JSX.Element;
+declare function ThemeModeSwitchInside(props: ThemeModeSwitchInsideProps): react_jsx_runtime19.JSX.Element;
 declare namespace ThemeModeSwitchInside {
   var displayName: string;
 }

package/dist/theme-toggle/ThemeModeSwitchOutside.d.cts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime19 from "react/jsx-runtime";
+import * as react_jsx_runtime20 from "react/jsx-runtime";
 
 //#region src/theme-toggle/ThemeModeSwitchOutside.d.ts
 interface ThemeModeSwitchOutsideProps {
@@ -23,7 +23,7 @@ interface ThemeModeSwitchOutsideProps {
  * Icons flank the switch control on either side.
  * Pure component - requires value and onChange props.
  */
-declare function ThemeModeSwitchOutside(props: ThemeModeSwitchOutsideProps): react_jsx_runtime19.JSX.Element;
+declare function ThemeModeSwitchOutside(props: ThemeModeSwitchOutsideProps): react_jsx_runtime20.JSX.Element;
 declare namespace ThemeModeSwitchOutside {
   var displayName: string;
 }

package/dist/theme-toggle/ThemeModeSwitchOutside.d.ts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime18 from "react/jsx-runtime";
+import * as react_jsx_runtime20 from "react/jsx-runtime";
 
 //#region src/theme-toggle/ThemeModeSwitchOutside.d.ts
 interface ThemeModeSwitchOutsideProps {
@@ -23,7 +23,7 @@ interface ThemeModeSwitchOutsideProps {
  * Icons flank the switch control on either side.
  * Pure component - requires value and onChange props.
  */
-declare function ThemeModeSwitchOutside(props: ThemeModeSwitchOutsideProps): react_jsx_runtime18.JSX.Element;
+declare function ThemeModeSwitchOutside(props: ThemeModeSwitchOutsideProps): react_jsx_runtime20.JSX.Element;
 declare namespace ThemeModeSwitchOutside {
   var displayName: string;
 }

package/dist/theme-toggle/ThemeModeToggleButton.d.cts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime20 from "react/jsx-runtime";
+import * as react_jsx_runtime16 from "react/jsx-runtime";
 
 //#region src/theme-toggle/ThemeModeToggleButton.d.ts
 interface ThemeModeToggleButtonProps {
@@ -14,7 +14,7 @@ interface ThemeModeToggleButtonProps {
  * Light/Dark toggle button.
  * Pure component - toggles between light and dark.
  */
-declare function ThemeModeToggleButton(props: ThemeModeToggleButtonProps): react_jsx_runtime20.JSX.Element;
+declare function ThemeModeToggleButton(props: ThemeModeToggleButtonProps): react_jsx_runtime16.JSX.Element;
 declare namespace ThemeModeToggleButton {
   var displayName: string;
 }

package/dist/theme-toggle/ThemeModeToggleButton.d.ts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime17 from "react/jsx-runtime";
+import * as react_jsx_runtime16 from "react/jsx-runtime";
 
 //#region src/theme-toggle/ThemeModeToggleButton.d.ts
 interface ThemeModeToggleButtonProps {
@@ -14,7 +14,7 @@ interface ThemeModeToggleButtonProps {
  * Light/Dark toggle button.
  * Pure component - toggles between light and dark.
  */
-declare function ThemeModeToggleButton(props: ThemeModeToggleButtonProps): react_jsx_runtime17.JSX.Element;
+declare function ThemeModeToggleButton(props: ThemeModeToggleButtonProps): react_jsx_runtime16.JSX.Element;
 declare namespace ThemeModeToggleButton {
   var displayName: string;
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pixpilot/shadcn-ui",
   "type": "module",
-  "version": "1.27.0",
+  "version": "1.28.0",
   "description": "Custom UI components and utilities built with shadcn/ui.",
   "author": "m.doaie <m.doaie@hotmail.com>",
   "license": "MIT",
@@ -64,9 +64,9 @@
     "tsdown": "^0.15.12",
     "typescript": "^5.9.3",
     "@internal/eslint-config": "0.3.0",
-    "@internal/prettier-config": "0.0.1",
     "@internal/hooks": "0.0.0",
     "@internal/tsconfig": "0.1.0",
+    "@internal/prettier-config": "0.0.1",
     "@internal/tsdown-config": "0.1.0",
     "@internal/vitest-config": "0.1.0"
   },