@pixpilot/shadcn-ui 0.42.0 → 0.44.0

package/dist/{tags-input.cjs → TagsInput.cjs}

@@ -10,7 +10,7 @@ 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/tags-input.tsx
+//#region src/TagsInput.tsx
 const EMPTY_ARRAY = [];
 const EMPTY_OPTIONS = [];
 /**

package/dist/{tags-input.d.cts → TagsInput.d.cts}

@@ -1,7 +1,7 @@
 import { CommandOptionListItem } from "./CommandOptionList.cjs";
 import * as react_jsx_runtime5 from "react/jsx-runtime";
 
-//#region src/tags-input.d.ts
+//#region src/TagsInput.d.ts
 interface TagsInputProps {
   value?: Array<string | number>;
   onChange?: (value: Array<string | number>) => void;

package/dist/{tags-input.d.ts → TagsInput.d.ts}

@@ -1,7 +1,7 @@
 import { CommandOptionListItem } from "./CommandOptionList.js";
 import * as react_jsx_runtime5 from "react/jsx-runtime";
 
-//#region src/tags-input.d.ts
+//#region src/TagsInput.d.ts
 interface TagsInputProps {
   value?: Array<string | number>;
   onChange?: (value: Array<string | number>) => void;

package/dist/{tags-input.js → TagsInput.js}

@@ -6,7 +6,7 @@ import { Command, Popover, PopoverContent, PopoverTrigger, TagsInputInLineClear,
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 
-//#region src/tags-input.tsx
+//#region src/TagsInput.tsx
 const EMPTY_ARRAY = [];
 const EMPTY_OPTIONS = [];
 /**

package/dist/dialog/Dialog.d.cts

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

package/dist/dialog/Dialog.d.ts

@@ -1,5 +1,5 @@
 import * as React$1 from "react";
-import * as react_jsx_runtime6 from "react/jsx-runtime";
+import * as react_jsx_runtime7 from "react/jsx-runtime";
 import * as _radix_ui_react_dialog0 from "@radix-ui/react-dialog";
 
 //#region src/dialog/Dialog.d.ts
@@ -9,14 +9,14 @@ declare const DialogContent: React$1.ForwardRefExoticComponent<Omit<_radix_ui_re
 declare function DialogHeader({
   className,
   ...props
-}: React$1.HTMLAttributes<HTMLDivElement>): react_jsx_runtime6.JSX.Element;
+}: React$1.HTMLAttributes<HTMLDivElement>): react_jsx_runtime7.JSX.Element;
 declare function DialogBody({
   className,
   ...props
-}: React$1.HTMLAttributes<HTMLDivElement>): react_jsx_runtime6.JSX.Element;
+}: React$1.HTMLAttributes<HTMLDivElement>): react_jsx_runtime7.JSX.Element;
 declare function DialogFooter({
   className,
   ...props
-}: React$1.HTMLAttributes<HTMLDivElement>): react_jsx_runtime6.JSX.Element;
+}: React$1.HTMLAttributes<HTMLDivElement>): react_jsx_runtime7.JSX.Element;
 //#endregion
 export { DialogBody, DialogContent, DialogFooter, DialogHeader };

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

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

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

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

package/dist/index.cjs

@@ -56,7 +56,7 @@ const require_TabsContext = require('./tabs/TabsContext.cjs');
 const require_TabsList = require('./tabs/TabsList.cjs');
 const require_TabsTrigger = require('./tabs/TabsTrigger.cjs');
 require('./tabs/index.cjs');
-const require_tags_input = require('./tags-input.cjs');
+const require_TagsInput = require('./TagsInput.cjs');
 const require_ThemeProvider = require('./theme-provider/ThemeProvider.cjs');
 require('./theme-provider/index.cjs');
 const require_ThemeModeDropdown = require('./theme-toggle/ThemeModeDropdown.cjs');
@@ -122,7 +122,7 @@ exports.TabsContent = __pixpilot_shadcn.TabsContent;
 exports.TabsContext = require_TabsContext.TabsContext;
 exports.TabsList = require_TabsList.TabsList;
 exports.TabsTrigger = require_TabsTrigger.TabsTrigger;
-exports.TagsInput = require_tags_input.TagsInput;
+exports.TagsInput = require_TagsInput.TagsInput;
 exports.ThemeModeDropdown = require_ThemeModeDropdown.ThemeModeDropdown;
 exports.ThemeModeSwitchInside = require_ThemeModeSwitchInside.ThemeModeSwitchInside;
 exports.ThemeModeSwitchOutside = require_ThemeModeSwitchOutside.ThemeModeSwitchOutside;

package/dist/index.d.cts

@@ -60,7 +60,7 @@ import { TabsContext, TabsContextValue, useTabsContext } from "./tabs/TabsContex
 import { TabsList, TabsListProps } from "./tabs/TabsList.cjs";
 import { TabsTrigger, TabsTriggerProps } from "./tabs/TabsTrigger.cjs";
 import "./tabs/index.cjs";
-import { TagsInput, TagsInputProps } from "./tags-input.cjs";
+import { TagsInput, TagsInputProps } from "./TagsInput.cjs";
 import { ThemeProvider, ThemeProviderProps } from "./theme-provider/ThemeProvider.cjs";
 import { useTheme } from "./theme-provider/index.cjs";
 import { ThemeModeDropdown, ThemeModeDropdownProps } from "./theme-toggle/ThemeModeDropdown.cjs";

package/dist/index.d.ts

@@ -62,7 +62,7 @@ import { TabsContext, TabsContextValue, useTabsContext } from "./tabs/TabsContex
 import { TabsList, TabsListProps } from "./tabs/TabsList.js";
 import { TabsTrigger, TabsTriggerProps } from "./tabs/TabsTrigger.js";
 import "./tabs/index.js";
-import { TagsInput, TagsInputProps } from "./tags-input.js";
+import { TagsInput, TagsInputProps } from "./TagsInput.js";
 import { ThemeProvider, ThemeProviderProps } from "./theme-provider/ThemeProvider.js";
 import { useTheme } from "./theme-provider/index.js";
 import { ThemeModeDropdown, ThemeModeDropdownProps } from "./theme-toggle/ThemeModeDropdown.js";

package/dist/index.js

@@ -57,7 +57,7 @@ import { TabsContext, useTabsContext } from "./tabs/TabsContext.js";
 import { TabsList } from "./tabs/TabsList.js";
 import { TabsTrigger } from "./tabs/TabsTrigger.js";
 import "./tabs/index.js";
-import { TagsInput } from "./tags-input.js";
+import { TagsInput } from "./TagsInput.js";
 import { ThemeProvider } from "./theme-provider/ThemeProvider.js";
 import { useTheme } from "./theme-provider/index.js";
 import { ThemeModeDropdown } from "./theme-toggle/ThemeModeDropdown.js";

package/dist/input/Input.d.cts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime11 from "react/jsx-runtime";
+import * as react_jsx_runtime9 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_runtime9.JSX.Element;
 //#endregion
 export { Input, InputProps$1 as InputProps };

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

@@ -8,6 +8,8 @@ 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_placeholder = require("@tiptap/extension-placeholder");
+__tiptap_extension_placeholder = require_rolldown_runtime.__toESM(__tiptap_extension_placeholder);
 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");
@@ -40,7 +42,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", "[&_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]);
+	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,
@@ -51,7 +53,7 @@ function useEditorProps(slots, customEditorProps) {
 		}
 	}), [defaultEditorProps, customEditorProps]);
 }
-const RichTextEditor = ({ value, onChange, extensions = defaultExtensions, editable = true, slots, showToolbar = true, toolbarItems = defaultToolbarItems, editorProps: customEditorProps, immediatelyRender = false, tooltipMode = "native" }) => {
+const RichTextEditor = ({ value, onChange, extensions = defaultExtensions, editable = true, slots, showToolbar = true, toolbarItems = defaultToolbarItems, editorProps: customEditorProps, immediatelyRender = false, tooltipMode = "native", placeholder }) => {
 	const [renderTick, forceRender] = react.default.useReducer((x) => x + 1, 0);
 	const mergedEditorProps = useEditorProps(slots, customEditorProps);
 	const onChangeRef = react.default.useRef(onChange);
@@ -60,11 +62,15 @@ const RichTextEditor = ({ value, onChange, extensions = defaultExtensions, edita
 		onChangeRef.current?.(props.editor.getHTML());
 	}, []);
 	const editorInstance = (0, __tiptap_react.useEditor)({
-		extensions: react.default.useMemo(() => [
-			__tiptap_starter_kit.default,
-			__tiptap_extension_link.default,
-			__tiptap_extension_text_align.default.configure({ types: ["heading", "paragraph"] })
-		].concat(extensions), [extensions]),
+		extensions: react.default.useMemo(() => {
+			const baseExtensions = [
+				__tiptap_starter_kit.default,
+				__tiptap_extension_link.default,
+				__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]),
 		content: value,
 		editable,
 		onUpdate: handleChange,

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

@@ -82,6 +82,10 @@ interface RichTextEditorProps {
    * @default 'native'
    */
   tooltipMode?: ToolbarButtonTooltipMode;
+  /**
+   * Placeholder text to show when the editor is empty
+   */
+  placeholder?: string;
 }
 declare const RichTextEditor: React.FC<RichTextEditorProps>;
 //#endregion

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

@@ -82,6 +82,10 @@ interface RichTextEditorProps {
    * @default 'native'
    */
   tooltipMode?: ToolbarButtonTooltipMode;
+  /**
+   * Placeholder text to show when the editor is empty
+   */
+  placeholder?: string;
 }
 declare const RichTextEditor: React.FC<RichTextEditorProps>;
 //#endregion

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

@@ -3,6 +3,7 @@ import { cn } from "@pixpilot/shadcn";
 import React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import Link from "@tiptap/extension-link";
+import Placeholder from "@tiptap/extension-placeholder";
 import TextAlign from "@tiptap/extension-text-align";
 import { EditorContent, useEditor } from "@tiptap/react";
 import StarterKit from "@tiptap/starter-kit";
@@ -32,7 +33,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", "[&_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]);
+	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,
@@ -43,7 +44,7 @@ function useEditorProps(slots, customEditorProps) {
 		}
 	}), [defaultEditorProps, customEditorProps]);
 }
-const RichTextEditor = ({ value, onChange, extensions = defaultExtensions, editable = true, slots, showToolbar = true, toolbarItems = defaultToolbarItems, editorProps: customEditorProps, immediatelyRender = false, tooltipMode = "native" }) => {
+const RichTextEditor = ({ value, onChange, extensions = defaultExtensions, editable = true, slots, showToolbar = true, toolbarItems = defaultToolbarItems, editorProps: customEditorProps, immediatelyRender = false, tooltipMode = "native", placeholder }) => {
 	const [renderTick, forceRender] = React.useReducer((x) => x + 1, 0);
 	const mergedEditorProps = useEditorProps(slots, customEditorProps);
 	const onChangeRef = React.useRef(onChange);
@@ -52,11 +53,15 @@ const RichTextEditor = ({ value, onChange, extensions = defaultExtensions, edita
 		onChangeRef.current?.(props.editor.getHTML());
 	}, []);
 	const editorInstance = useEditor({
-		extensions: React.useMemo(() => [
-			StarterKit,
-			Link,
-			TextAlign.configure({ types: ["heading", "paragraph"] })
-		].concat(extensions), [extensions]),
+		extensions: React.useMemo(() => {
+			const baseExtensions = [
+				StarterKit,
+				Link,
+				TextAlign.configure({ types: ["heading", "paragraph"] })
+			];
+			if (placeholder != null) baseExtensions.push(Placeholder.configure({ placeholder }));
+			return baseExtensions.concat(extensions);
+		}, [extensions, placeholder]),
 		content: value,
 		editable,
 		onUpdate: handleChange,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pixpilot/shadcn-ui",
   "type": "module",
-  "version": "0.42.0",
+  "version": "0.44.0",
   "description": "Custom UI components and utilities built with shadcn/ui.",
   "author": "m.doaie <m.doaie@hotmail.com>",
   "license": "MIT",
@@ -37,6 +37,7 @@
     "@tanstack/react-virtual": "^3.13.18",
     "@tiptap/core": "^3.16.0",
     "@tiptap/extension-link": "^3.16.0",
+    "@tiptap/extension-placeholder": "^3.17.1",
     "@tiptap/extension-text-align": "^3.16.0",
     "@tiptap/react": "^3.16.0",
     "@tiptap/starter-kit": "^3.16.0",