@pixpilot/shadcn-ui 0.35.0 → 0.36.0

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

@@ -1,10 +1,10 @@
 import { FileUploadInlineProps } from "./types.cjs";
-import * as react_jsx_runtime7 from "react/jsx-runtime";
+import * as react_jsx_runtime8 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_runtime7.JSX.Element;
+declare function FileUploadInline(props: FileUploadInlineProps): react_jsx_runtime8.JSX.Element;
 //#endregion
 export { FileUploadInline };

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

@@ -1,10 +1,10 @@
 import { FileUploadInlineProps } from "./types.js";
-import * as react_jsx_runtime7 from "react/jsx-runtime";
+import * as react_jsx_runtime8 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_runtime7.JSX.Element;
+declare function FileUploadInline(props: FileUploadInlineProps): react_jsx_runtime8.JSX.Element;
 //#endregion
 export { FileUploadInline };

package/dist/input/Input.d.cts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime8 from "react/jsx-runtime";
+import * as react_jsx_runtime7 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_runtime8.JSX.Element;
+declare function Input(props: InputProps$1): react_jsx_runtime7.JSX.Element;
 //#endregion
 export { Input, InputProps$1 as InputProps };

package/dist/input/Input.d.ts

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

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

@@ -6,6 +6,10 @@ 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_extension_link = require("@tiptap/extension-link");
+__tiptap_extension_link = require_rolldown_runtime.__toESM(__tiptap_extension_link);
+let __tiptap_extension_text_align = require("@tiptap/extension-text-align");
+__tiptap_extension_text_align = require_rolldown_runtime.__toESM(__tiptap_extension_text_align);
 let __tiptap_react = require("@tiptap/react");
 __tiptap_react = require_rolldown_runtime.__toESM(__tiptap_react);
 let __tiptap_starter_kit = require("@tiptap/starter-kit");
@@ -17,9 +21,14 @@ const defaultToolbarItems = [
 	"bold",
 	"italic",
 	"underline",
+	"link",
 	"strike",
 	"code",
 	"|",
+	"alignLeft",
+	"alignCenter",
+	"alignRight",
+	"|",
 	"heading1",
 	"heading2",
 	"heading3",
@@ -31,7 +40,7 @@ const defaultToolbarItems = [
 	"codeBlock"
 ];
 function useEditorProps(slots, customEditorProps) {
-	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", "[&_*:last-child]:mb-0", slots?.content?.className) } }), [slots]);
+	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", slots?.content?.className) } }), [slots]);
 	return react.default.useMemo(() => ({
 		...defaultEditorProps,
 		...customEditorProps,
@@ -51,7 +60,11 @@ const RichTextEditor = ({ value, onChange, extensions = defaultExtensions, edita
 		onChangeRef.current?.(props.editor.getHTML());
 	}, []);
 	const editorInstance = (0, __tiptap_react.useEditor)({
-		extensions: [__tiptap_starter_kit.default].concat(extensions),
+		extensions: react.default.useMemo(() => [
+			__tiptap_starter_kit.default,
+			__tiptap_extension_link.default,
+			__tiptap_extension_text_align.default.configure({ types: ["heading", "paragraph"] })
+		].concat(extensions), [extensions]),
 		content: value,
 		editable,
 		onUpdate: handleChange,

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

@@ -2,6 +2,8 @@ import { RichTextEditorToolbar } from "./RichTextEditorToolbar.js";
 import { cn } from "@pixpilot/shadcn";
 import React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import Link from "@tiptap/extension-link";
+import TextAlign from "@tiptap/extension-text-align";
 import { EditorContent, useEditor } from "@tiptap/react";
 import StarterKit from "@tiptap/starter-kit";
 
@@ -11,9 +13,14 @@ const defaultToolbarItems = [
 	"bold",
 	"italic",
 	"underline",
+	"link",
 	"strike",
 	"code",
 	"|",
+	"alignLeft",
+	"alignCenter",
+	"alignRight",
+	"|",
 	"heading1",
 	"heading2",
 	"heading3",
@@ -25,7 +32,7 @@ const defaultToolbarItems = [
 	"codeBlock"
 ];
 function useEditorProps(slots, customEditorProps) {
-	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", "[&_*:last-child]:mb-0", slots?.content?.className) } }), [slots]);
+	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", slots?.content?.className) } }), [slots]);
 	return React.useMemo(() => ({
 		...defaultEditorProps,
 		...customEditorProps,
@@ -45,7 +52,11 @@ const RichTextEditor = ({ value, onChange, extensions = defaultExtensions, edita
 		onChangeRef.current?.(props.editor.getHTML());
 	}, []);
 	const editorInstance = useEditor({
-		extensions: [StarterKit].concat(extensions),
+		extensions: React.useMemo(() => [
+			StarterKit,
+			Link,
+			TextAlign.configure({ types: ["heading", "paragraph"] })
+		].concat(extensions), [extensions]),
 		content: value,
 		editable,
 		onUpdate: handleChange,

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

@@ -24,6 +24,12 @@ const predefinedToolbarItems = {
 		onClick: (editor) => editor.chain().focus().toggleUnderline().run(),
 		isActive: (editor) => editor.isActive("underline")
 	},
+	link: {
+		icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Link, { className: "h-4 w-4" }),
+		tooltip: "Link",
+		onClick: (editor) => editor.chain().focus().toggleLink().run(),
+		isActive: (editor) => editor.isActive("link")
+	},
 	strike: {
 		icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Strikethrough, { className: "h-4 w-4" }),
 		tooltip: "Strikethrough",
@@ -77,6 +83,24 @@ const predefinedToolbarItems = {
 		tooltip: "Code Block",
 		onClick: (editor) => editor.chain().focus().toggleCodeBlock().run(),
 		isActive: (editor) => editor.isActive("codeBlock")
+	},
+	alignLeft: {
+		icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.AlignLeft, { className: "h-4 w-4" }),
+		tooltip: "Align Left",
+		onClick: (editor) => editor.chain().focus().setTextAlign("left").run(),
+		isActive: (editor) => editor.isActive({ textAlign: "left" })
+	},
+	alignCenter: {
+		icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.AlignCenter, { className: "h-4 w-4" }),
+		tooltip: "Align Center",
+		onClick: (editor) => editor.chain().focus().setTextAlign("center").run(),
+		isActive: (editor) => editor.isActive({ textAlign: "center" })
+	},
+	alignRight: {
+		icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.AlignRight, { className: "h-4 w-4" }),
+		tooltip: "Align Right",
+		onClick: (editor) => editor.chain().focus().setTextAlign("right").run(),
+		isActive: (editor) => editor.isActive({ textAlign: "right" })
 	}
 };
 

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

@@ -1,4 +1,4 @@
-import { Bold, Code, Code2, Heading1, Heading2, Heading3, Italic, List, ListOrdered, Quote, Strikethrough, Underline } from "lucide-react";
+import { AlignCenter, AlignLeft, AlignRight, Bold, Code, Code2, Heading1, Heading2, Heading3, Italic, Link, List, ListOrdered, Quote, Strikethrough, Underline } from "lucide-react";
 import { jsx } from "react/jsx-runtime";
 
 //#region src/rich-text-editor/predefined-toolbar-items.tsx
@@ -21,6 +21,12 @@ const predefinedToolbarItems = {
 		onClick: (editor) => editor.chain().focus().toggleUnderline().run(),
 		isActive: (editor) => editor.isActive("underline")
 	},
+	link: {
+		icon: /* @__PURE__ */ jsx(Link, { className: "h-4 w-4" }),
+		tooltip: "Link",
+		onClick: (editor) => editor.chain().focus().toggleLink().run(),
+		isActive: (editor) => editor.isActive("link")
+	},
 	strike: {
 		icon: /* @__PURE__ */ jsx(Strikethrough, { className: "h-4 w-4" }),
 		tooltip: "Strikethrough",
@@ -74,6 +80,24 @@ const predefinedToolbarItems = {
 		tooltip: "Code Block",
 		onClick: (editor) => editor.chain().focus().toggleCodeBlock().run(),
 		isActive: (editor) => editor.isActive("codeBlock")
+	},
+	alignLeft: {
+		icon: /* @__PURE__ */ jsx(AlignLeft, { className: "h-4 w-4" }),
+		tooltip: "Align Left",
+		onClick: (editor) => editor.chain().focus().setTextAlign("left").run(),
+		isActive: (editor) => editor.isActive({ textAlign: "left" })
+	},
+	alignCenter: {
+		icon: /* @__PURE__ */ jsx(AlignCenter, { className: "h-4 w-4" }),
+		tooltip: "Align Center",
+		onClick: (editor) => editor.chain().focus().setTextAlign("center").run(),
+		isActive: (editor) => editor.isActive({ textAlign: "center" })
+	},
+	alignRight: {
+		icon: /* @__PURE__ */ jsx(AlignRight, { className: "h-4 w-4" }),
+		tooltip: "Align Right",
+		onClick: (editor) => editor.chain().focus().setTextAlign("right").run(),
+		isActive: (editor) => editor.isActive({ textAlign: "right" })
 	}
 };
 

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

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

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

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

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

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime11 from "react/jsx-runtime";
+import * as react_jsx_runtime12 from "react/jsx-runtime";
 
 //#region src/theme-toggle/ThemeModeSwitchOutside.d.ts
 interface ThemeModeSwitchOutsideProps {
@@ -22,7 +22,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_runtime11.JSX.Element;
+declare function ThemeModeSwitchOutside(props: ThemeModeSwitchOutsideProps): react_jsx_runtime12.JSX.Element;
 declare namespace ThemeModeSwitchOutside {
   var displayName: string;
 }

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

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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pixpilot/shadcn-ui",
   "type": "module",
-  "version": "0.35.0",
+  "version": "0.36.0",
   "description": "Custom UI components and utilities built with shadcn/ui.",
   "author": "m.doaie <m.doaie@hotmail.com>",
   "license": "MIT",
@@ -34,10 +34,12 @@
     "@iconify/react": "^6.0.2",
     "@pixpilot/hash": "^0.0.0",
     "@tailwindcss/typography": "^0.5.19",
-    "@tanstack/react-virtual": "^3.13.13",
-    "@tiptap/core": "^3.13.0",
-    "@tiptap/react": "^3.13.0",
-    "@tiptap/starter-kit": "^3.13.0",
+    "@tanstack/react-virtual": "^3.13.18",
+    "@tiptap/core": "^3.16.0",
+    "@tiptap/extension-link": "^3.16.0",
+    "@tiptap/extension-text-align": "^3.16.0",
+    "@tiptap/react": "^3.16.0",
+    "@tiptap/starter-kit": "^3.16.0",
     "class-variance-authority": "^0.7.1",
     "lucide-react": "0.553.0",
     "next-themes": "0.4.6",
@@ -57,9 +59,9 @@
     "react-dom": "19.2.0",
     "tsdown": "^0.15.12",
     "typescript": "^5.9.3",
+    "@internal/eslint-config": "0.3.0",
     "@internal/hooks": "0.0.0",
     "@internal/prettier-config": "0.0.1",
-    "@internal/eslint-config": "0.3.0",
     "@internal/tsconfig": "0.1.0",
     "@internal/tsdown-config": "0.1.0",
     "@internal/vitest-config": "0.1.0"