@pixpilot/shadcn-ui 0.38.1 → 0.40.0

package/dist/Button.cjs

@@ -22,16 +22,16 @@ function getLoaderSize(size) {
 	return LOADER_SIZE_DEFAULT;
 }
 function Button(props) {
-	const { children, disabled, onClick, disabledTooltip, loading, LoaderProps, onDisabledClick, tooltip, title, TooltipProps, className, variant, size, ref,...rest } = props;
-	const { placement: loaderPlacement = "end" } = LoaderProps || {};
+	const { children, disabled, onClick, disabledTooltip, loading, loaderProps, onDisabledClick, tooltip, title, tooltipProps, className, variant, size, ref,...rest } = props;
+	const { placement: loaderPlacement = "end" } = loaderProps || {};
 	const handleClick = (0, react.useCallback)((e) => {
 		if (onClick && !disabled) onClick(e);
 	}, [disabled, onClick]);
 	const isDisabled = disabled || loading;
-	const hasTooltip = Boolean(tooltip) || Boolean(title);
+	const hasTooltip = Boolean(tooltip);
 	const hasDisabledTooltip = Boolean(disabledTooltip) && isDisabled;
 	const showTooltip = hasTooltip || hasDisabledTooltip;
-	const tooltipContent = hasDisabledTooltip ? disabledTooltip ?? "" : tooltip ?? title ?? "";
+	const tooltipContent = hasDisabledTooltip ? disabledTooltip ?? "" : tooltip ?? "";
 	const Loader = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		"data-slot": "button-loader",
 		className: (0, __pixpilot_shadcn.cn)("flex items-center justify-center", loaderPlacement === "center" && "rounded-0 absolute inset-0", loaderPlacement === "start" && "mr-1", loaderPlacement === "end" && "ml-1"),
@@ -51,9 +51,10 @@ function Button(props) {
 		className: (0, __pixpilot_shadcn.cn)("relative", className),
 		variant,
 		size,
+		title,
 		children: [
 			Boolean(disabledTooltip) && isDisabled && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.Tooltip, {
-				...TooltipProps,
+				...tooltipProps,
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.TooltipTrigger, {
 					asChild: true,
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_AbsoluteFill.AbsoluteFill, {
@@ -71,7 +72,7 @@ function Button(props) {
 		]
 	});
 	if (showTooltip && !(Boolean(disabledTooltip) && isDisabled)) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.Tooltip, {
-		...TooltipProps,
+		...tooltipProps,
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.TooltipTrigger, {
 			asChild: true,
 			children: buttonContent

package/dist/Button.d.cts

@@ -27,7 +27,7 @@ interface ButtonProps extends React.ComponentProps<typeof Button>, VariantProps<
   /**
    * Loader configuration
    */
-  LoaderProps?: ButtonLoaderProps;
+  loaderProps?: ButtonLoaderProps;
   /**
    * Click handler for when disabled button is clicked
    */
@@ -35,7 +35,7 @@ interface ButtonProps extends React.ComponentProps<typeof Button>, VariantProps<
   /**
    * Props to pass to the tooltip component
    */
-  TooltipProps?: Omit<React.ComponentProps<typeof Tooltip>, 'children' | 'delayDuration'>;
+  tooltipProps?: Omit<React.ComponentProps<typeof Tooltip>, 'children' | 'delayDuration'>;
 }
 declare function Button$1(props: ButtonProps & {
   ref?: React.Ref<HTMLButtonElement>;

package/dist/Button.d.ts

@@ -27,7 +27,7 @@ interface ButtonProps extends React.ComponentProps<typeof Button>, VariantProps<
   /**
    * Loader configuration
    */
-  LoaderProps?: ButtonLoaderProps;
+  loaderProps?: ButtonLoaderProps;
   /**
    * Click handler for when disabled button is clicked
    */
@@ -35,7 +35,7 @@ interface ButtonProps extends React.ComponentProps<typeof Button>, VariantProps<
   /**
    * Props to pass to the tooltip component
    */
-  TooltipProps?: Omit<React.ComponentProps<typeof Tooltip>, 'children' | 'delayDuration'>;
+  tooltipProps?: Omit<React.ComponentProps<typeof Tooltip>, 'children' | 'delayDuration'>;
 }
 declare function Button$1(props: ButtonProps & {
   ref?: React.Ref<HTMLButtonElement>;

package/dist/Button.js

@@ -17,16 +17,16 @@ function getLoaderSize(size) {
 	return LOADER_SIZE_DEFAULT;
 }
 function Button$1(props) {
-	const { children, disabled, onClick, disabledTooltip, loading, LoaderProps, onDisabledClick, tooltip, title, TooltipProps, className, variant, size, ref,...rest } = props;
-	const { placement: loaderPlacement = "end" } = LoaderProps || {};
+	const { children, disabled, onClick, disabledTooltip, loading, loaderProps, onDisabledClick, tooltip, title, tooltipProps, className, variant, size, ref,...rest } = props;
+	const { placement: loaderPlacement = "end" } = loaderProps || {};
 	const handleClick = useCallback((e) => {
 		if (onClick && !disabled) onClick(e);
 	}, [disabled, onClick]);
 	const isDisabled = disabled || loading;
-	const hasTooltip = Boolean(tooltip) || Boolean(title);
+	const hasTooltip = Boolean(tooltip);
 	const hasDisabledTooltip = Boolean(disabledTooltip) && isDisabled;
 	const showTooltip = hasTooltip || hasDisabledTooltip;
-	const tooltipContent = hasDisabledTooltip ? disabledTooltip ?? "" : tooltip ?? title ?? "";
+	const tooltipContent = hasDisabledTooltip ? disabledTooltip ?? "" : tooltip ?? "";
 	const Loader = /* @__PURE__ */ jsx("div", {
 		"data-slot": "button-loader",
 		className: cn("flex items-center justify-center", loaderPlacement === "center" && "rounded-0 absolute inset-0", loaderPlacement === "start" && "mr-1", loaderPlacement === "end" && "ml-1"),
@@ -46,9 +46,10 @@ function Button$1(props) {
 		className: cn("relative", className),
 		variant,
 		size,
+		title,
 		children: [
 			Boolean(disabledTooltip) && isDisabled && /* @__PURE__ */ jsxs(Tooltip, {
-				...TooltipProps,
+				...tooltipProps,
 				children: [/* @__PURE__ */ jsx(TooltipTrigger, {
 					asChild: true,
 					children: /* @__PURE__ */ jsx(AbsoluteFill, {
@@ -66,7 +67,7 @@ function Button$1(props) {
 		]
 	});
 	if (showTooltip && !(Boolean(disabledTooltip) && isDisabled)) return /* @__PURE__ */ jsxs(Tooltip, {
-		...TooltipProps,
+		...tooltipProps,
 		children: [/* @__PURE__ */ jsx(TooltipTrigger, {
 			asChild: true,
 			children: buttonContent

package/dist/ColorSelect.d.ts

@@ -1,6 +1,6 @@
 import { Select, SelectContent } from "@pixpilot/shadcn";
 import React, { ComponentProps } from "react";
-import * as react_jsx_runtime3 from "react/jsx-runtime";
+import * as react_jsx_runtime1 from "react/jsx-runtime";
 
 //#region src/ColorSelect.d.ts
 interface ColorSelectOption {
@@ -15,6 +15,6 @@ type BaseColorSelectProps = {
   placeholder?: string;
   keyboardMode?: 'cycle' | 'dropdown';
 } & Omit<ComponentProps<typeof Select>, 'value' | 'onValueChange' | 'children'>;
-declare function ColorSelect(props: BaseColorSelectProps): react_jsx_runtime3.JSX.Element;
+declare function ColorSelect(props: BaseColorSelectProps): react_jsx_runtime1.JSX.Element;
 //#endregion
 export { BaseColorSelectProps, ColorSelect, ColorSelectOption };

package/dist/ContentCard.d.ts

@@ -1,6 +1,6 @@
 import { Card } from "@pixpilot/shadcn";
 import React, { ReactNode } from "react";
-import * as react_jsx_runtime1 from "react/jsx-runtime";
+import * as react_jsx_runtime2 from "react/jsx-runtime";
 
 //#region src/ContentCard.d.ts
 interface SectionCardProps extends React.ComponentProps<typeof Card> {
@@ -8,7 +8,7 @@ interface SectionCardProps extends React.ComponentProps<typeof Card> {
   children: ReactNode;
   marginBottom?: boolean;
 }
-declare function ContentCard(props: SectionCardProps): react_jsx_runtime1.JSX.Element;
+declare function ContentCard(props: SectionCardProps): react_jsx_runtime2.JSX.Element;
 declare namespace ContentCard {
   var displayName: string;
 }

package/dist/DatePicker.d.ts

@@ -1,6 +1,6 @@
 import { Calendar } from "@pixpilot/shadcn";
 import { ComponentProps } from "react";
-import * as react_jsx_runtime2 from "react/jsx-runtime";
+import * as react_jsx_runtime3 from "react/jsx-runtime";
 
 //#region src/DatePicker.d.ts
 type DatePickerProps = {
@@ -8,7 +8,7 @@ type DatePickerProps = {
   onChange?: (date: Date | undefined) => void;
   placeholder?: string;
 } & Omit<ComponentProps<typeof Calendar>, 'selected' | 'onSelect' | 'mode'>;
-declare function DatePicker(props: DatePickerProps): react_jsx_runtime2.JSX.Element;
+declare function DatePicker(props: DatePickerProps): react_jsx_runtime3.JSX.Element;
 declare namespace DatePicker {
   var displayName: string;
 }

package/dist/IconToggle.cjs

@@ -66,20 +66,20 @@ const IconToggle = react.default.forwardRef(({ checked: controlledChecked, defau
 		ghost: "hover:bg-accent hover:text-accent-foreground data-[state=checked]:bg-primary/10 data-[state=checked]:text-primary"
 	};
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-		ref,
 		type: "button",
 		role: "switch",
-		"aria-checked": checked,
-		"data-state": checked ? "checked" : "unchecked",
 		"data-slot": "icon-toggle",
+		...props,
 		disabled,
+		ref,
+		"aria-checked": checked,
+		onClick: handleClick,
+		"data-state": checked ? "checked" : "unchecked",
 		className: (0, __pixpilot_shadcn.cn)("inline-flex items-center justify-center rounded-md text-sm font-medium transition-all outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50", "[&_svg]:pointer-events-none [&_svg:not([class*=\"size-\"])]:size-[var(--icon-toggle-icon-size)] [&_svg]:shrink-0", sizeClasses[size], variantClasses[variant], className),
 		style: {
 			...styleProp ?? {},
 			["--icon-toggle-icon-size"]: resolvedIconSize
 		},
-		onClick: handleClick,
-		...props,
 		children: checked ? renderIcon(checkedIcon) : renderIcon(uncheckedIcon)
 	});
 });

package/dist/IconToggle.js

@@ -62,20 +62,20 @@ const IconToggle = React.forwardRef(({ checked: controlledChecked, defaultChecke
 		ghost: "hover:bg-accent hover:text-accent-foreground data-[state=checked]:bg-primary/10 data-[state=checked]:text-primary"
 	};
 	return /* @__PURE__ */ jsx("button", {
-		ref,
 		type: "button",
 		role: "switch",
-		"aria-checked": checked,
-		"data-state": checked ? "checked" : "unchecked",
 		"data-slot": "icon-toggle",
+		...props,
 		disabled,
+		ref,
+		"aria-checked": checked,
+		onClick: handleClick,
+		"data-state": checked ? "checked" : "unchecked",
 		className: cn("inline-flex items-center justify-center rounded-md text-sm font-medium transition-all outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50", "[&_svg]:pointer-events-none [&_svg:not([class*=\"size-\"])]:size-[var(--icon-toggle-icon-size)] [&_svg]:shrink-0", sizeClasses[size], variantClasses[variant], className),
 		style: {
 			...styleProp ?? {},
 			["--icon-toggle-icon-size"]: resolvedIconSize
 		},
-		onClick: handleClick,
-		...props,
 		children: checked ? renderIcon(checkedIcon) : renderIcon(uncheckedIcon)
 	});
 });

package/dist/dialog/Dialog.cjs

@@ -0,0 +1,42 @@
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.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);
+
+//#region src/dialog/Dialog.tsx
+const DialogContent = react.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.DialogContent, {
+	ref,
+	className: (0, __pixpilot_shadcn.cn)("max-h-[85vh] sm:max-h-[90vh] flex flex-col p-0 gap-0", className),
+	...props
+}));
+DialogContent.displayName = "DialogContent";
+function DialogHeader({ className,...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		"data-slot": "header",
+		className: (0, __pixpilot_shadcn.cn)("flex flex-col space-y-1.5 px-6 py-4", className),
+		...props
+	});
+}
+function DialogBody({ className,...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		"data-slot": "body",
+		className: (0, __pixpilot_shadcn.cn)("flex-1 overflow-y-auto px-6 py-2", className),
+		...props
+	});
+}
+function DialogFooter({ className,...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		"data-slot": "footer",
+		className: (0, __pixpilot_shadcn.cn)("flex justify-end space-x-2 px-6 py-4", className),
+		...props
+	});
+}
+
+//#endregion
+exports.DialogBody = DialogBody;
+exports.DialogContent = DialogContent;
+exports.DialogFooter = DialogFooter;
+exports.DialogHeader = DialogHeader;

package/dist/dialog/Dialog.d.cts

@@ -0,0 +1,22 @@
+import * as react_jsx_runtime7 from "react/jsx-runtime";
+import * as React$1 from "react";
+import * as _radix_ui_react_dialog0 from "@radix-ui/react-dialog";
+
+//#region src/dialog/Dialog.d.ts
+declare const DialogContent: React$1.ForwardRefExoticComponent<Omit<_radix_ui_react_dialog0.DialogContentProps & React$1.RefAttributes<HTMLDivElement> & {
+  showCloseButton?: boolean;
+}, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare function DialogHeader({
+  className,
+  ...props
+}: React$1.HTMLAttributes<HTMLDivElement>): react_jsx_runtime7.JSX.Element;
+declare function DialogBody({
+  className,
+  ...props
+}: React$1.HTMLAttributes<HTMLDivElement>): react_jsx_runtime7.JSX.Element;
+declare function DialogFooter({
+  className,
+  ...props
+}: React$1.HTMLAttributes<HTMLDivElement>): react_jsx_runtime7.JSX.Element;
+//#endregion
+export { DialogBody, DialogContent, DialogFooter, DialogHeader };

package/dist/dialog/Dialog.d.ts

@@ -0,0 +1,22 @@
+import * as React$1 from "react";
+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
+declare const DialogContent: React$1.ForwardRefExoticComponent<Omit<_radix_ui_react_dialog0.DialogContentProps & React$1.RefAttributes<HTMLDivElement> & {
+  showCloseButton?: boolean;
+}, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare function DialogHeader({
+  className,
+  ...props
+}: React$1.HTMLAttributes<HTMLDivElement>): react_jsx_runtime7.JSX.Element;
+declare function DialogBody({
+  className,
+  ...props
+}: React$1.HTMLAttributes<HTMLDivElement>): react_jsx_runtime7.JSX.Element;
+declare function DialogFooter({
+  className,
+  ...props
+}: React$1.HTMLAttributes<HTMLDivElement>): react_jsx_runtime7.JSX.Element;
+//#endregion
+export { DialogBody, DialogContent, DialogFooter, DialogHeader };

package/dist/dialog/Dialog.js

@@ -0,0 +1,35 @@
+import { DialogContent, cn } from "@pixpilot/shadcn";
+import * as React$1 from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/dialog/Dialog.tsx
+const DialogContent$1 = React$1.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(DialogContent, {
+	ref,
+	className: cn("max-h-[85vh] sm:max-h-[90vh] flex flex-col p-0 gap-0", className),
+	...props
+}));
+DialogContent$1.displayName = "DialogContent";
+function DialogHeader$1({ className,...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "header",
+		className: cn("flex flex-col space-y-1.5 px-6 py-4", className),
+		...props
+	});
+}
+function DialogBody({ className,...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "body",
+		className: cn("flex-1 overflow-y-auto px-6 py-2", className),
+		...props
+	});
+}
+function DialogFooter$1({ className,...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "footer",
+		className: cn("flex justify-end space-x-2 px-6 py-4", className),
+		...props
+	});
+}
+
+//#endregion
+export { DialogBody, DialogContent$1 as DialogContent, DialogFooter$1 as DialogFooter, DialogHeader$1 as DialogHeader };

package/dist/dialog/index.cjs

@@ -0,0 +1,4 @@
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
+const require_Dialog = require('./Dialog.cjs');
+let __pixpilot_shadcn = require("@pixpilot/shadcn");
+__pixpilot_shadcn = require_rolldown_runtime.__toESM(__pixpilot_shadcn);

package/dist/dialog/index.d.cts

@@ -0,0 +1,3 @@
+import { DialogBody, DialogContent, DialogFooter, DialogHeader } from "./Dialog.cjs";
+import { Dialog, DialogClose, DialogDescription, DialogTitle, DialogTrigger } from "@pixpilot/shadcn";
+export { Dialog, DialogClose, DialogDescription, DialogTitle, DialogTrigger };

package/dist/dialog/index.d.ts

@@ -0,0 +1,3 @@
+import { DialogBody, DialogContent as DialogContent$1, DialogFooter as DialogFooter$1, DialogHeader as DialogHeader$1 } from "./Dialog.js";
+import { Dialog as Dialog$1, DialogClose as DialogClose$1, DialogDescription as DialogDescription$1, DialogTitle as DialogTitle$1, DialogTrigger as DialogTrigger$1 } from "@pixpilot/shadcn";
+export { Dialog$1 as Dialog, DialogClose$1 as DialogClose, DialogDescription$1 as DialogDescription, DialogTitle$1 as DialogTitle, DialogTrigger$1 as DialogTrigger };

package/dist/dialog/index.js

@@ -0,0 +1,4 @@
+import { DialogBody, DialogContent as DialogContent$1, DialogFooter as DialogFooter$1, DialogHeader as DialogHeader$1 } from "./Dialog.js";
+import { Dialog as Dialog$1, DialogClose as DialogClose$1, DialogDescription as DialogDescription$1, DialogTitle as DialogTitle$1, DialogTrigger as DialogTrigger$1 } from "@pixpilot/shadcn";
+
+export { Dialog$1 as Dialog, DialogClose$1 as DialogClose, DialogDescription$1 as DialogDescription, DialogTitle$1 as DialogTitle, DialogTrigger$1 as DialogTrigger };

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_runtime10 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_runtime10.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_runtime10 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_runtime10.JSX.Element;
 //#endregion
 export { FileUploadInline };

package/dist/index.cjs

@@ -22,6 +22,8 @@ const require_DialogProvider = require('./confirmation-dialog/DialogProvider.cjs
 require('./confirmation-dialog/index.cjs');
 const require_ContentCard = require('./ContentCard.cjs');
 const require_DatePicker = require('./DatePicker.cjs');
+const require_Dialog = require('./dialog/Dialog.cjs');
+require('./dialog/index.cjs');
 const require_FileUploadInline = require('./file-upload-inline/FileUploadInline.cjs');
 require('./file-upload-inline/index.cjs');
 const require_use_media_query = require('./hooks/use-media-query.cjs');
@@ -40,6 +42,8 @@ const require_LayoutMain = require('./layout/LayoutMain.cjs');
 require('./layout/index.cjs');
 const require_Pagination = require('./pagination/Pagination.cjs');
 require('./pagination/index.cjs');
+const require_Popover = require('./popover/Popover.cjs');
+require('./popover/index.cjs');
 const require_RichTextEditor = require('./rich-text-editor/RichTextEditor.cjs');
 require('./rich-text-editor/index.cjs');
 const require_ScaledPreview = require('./ScaledPreview.cjs');
@@ -82,7 +86,16 @@ exports.Combobox = require_Combobox.Combobox;
 exports.ContentCard = require_ContentCard.ContentCard;
 exports.DEFAULT_ALERT_DURATION = require_toast.DEFAULT_ALERT_DURATION;
 exports.DatePicker = require_DatePicker.DatePicker;
+exports.Dialog = __pixpilot_shadcn.Dialog;
+exports.DialogBody = require_Dialog.DialogBody;
+exports.DialogClose = __pixpilot_shadcn.DialogClose;
+exports.DialogContent = require_Dialog.DialogContent;
+exports.DialogDescription = __pixpilot_shadcn.DialogDescription;
+exports.DialogFooter = require_Dialog.DialogFooter;
+exports.DialogHeader = require_Dialog.DialogHeader;
 exports.DialogProvider = require_DialogProvider.DialogProvider;
+exports.DialogTitle = __pixpilot_shadcn.DialogTitle;
+exports.DialogTrigger = __pixpilot_shadcn.DialogTrigger;
 exports.FileUpload = require_FileUpload.FileUpload;
 exports.FileUploadInline = require_FileUploadInline.FileUploadInline;
 exports.IconPicker = require_IconPicker.IconPicker;
@@ -94,6 +107,10 @@ exports.LayoutHeader = require_LayoutHeader.LayoutHeader;
 exports.LayoutMain = require_LayoutMain.LayoutMain;
 exports.LoadingOverlay = require_LoadingOverlay.LoadingOverlay;
 exports.Pagination = require_Pagination.Pagination;
+exports.Popover = __pixpilot_shadcn.Popover;
+exports.PopoverAnchor = __pixpilot_shadcn.PopoverAnchor;
+exports.PopoverContent = require_Popover.PopoverContent;
+exports.PopoverTrigger = __pixpilot_shadcn.PopoverTrigger;
 exports.RichTextEditor = require_RichTextEditor.RichTextEditor;
 exports.ScaledPreview = require_ScaledPreview.ScaledPreview;
 exports.Select = require_Select.Select;

package/dist/index.d.cts

@@ -21,6 +21,8 @@ import { DialogProvider, DialogProviderProps } from "./confirmation-dialog/Dialo
 import "./confirmation-dialog/index.cjs";
 import { ContentCard } from "./ContentCard.cjs";
 import { DatePicker, DatePickerProps } from "./DatePicker.cjs";
+import { DialogBody, DialogContent, DialogFooter, DialogHeader } from "./dialog/Dialog.cjs";
+import { Dialog, DialogClose, DialogDescription, DialogTitle, DialogTrigger } from "./dialog/index.cjs";
 import { FileUploadInlineBaseProps, FileUploadInlineProps } from "./file-upload-inline/types.cjs";
 import { FileUploadInline } from "./file-upload-inline/FileUploadInline.cjs";
 import "./file-upload-inline/index.cjs";
@@ -41,6 +43,8 @@ import "./layout/index.cjs";
 import { LoaderProps, LoadingOverlay } from "./LoadingOverlay.cjs";
 import { Pagination, PaginationProps } from "./pagination/Pagination.cjs";
 import "./pagination/index.cjs";
+import { Popover, PopoverAnchor, PopoverContent, PopoverContentProps, PopoverTrigger } from "./popover/Popover.cjs";
+import "./popover/index.cjs";
 import { RichTextEditor, RichTextEditorProps, RichTextEditorSlots, ToolbarItems } from "./rich-text-editor/RichTextEditor.cjs";
 import "./rich-text-editor/index.cjs";
 import { ScaledPreview, ScaledPreviewProps, ScaledPreviewSize } from "./ScaledPreview.cjs";
@@ -69,4 +73,4 @@ import { Toaster } from "./toast/ToastProvider.cjs";
 import "./toast/index.cjs";
 import { isSvgMarkupString, svgMarkupToMaskUrl } from "./utils/svg.cjs";
 import { cn } from "@pixpilot/shadcn";
-export { AbsoluteFill, Alert, AlertBaseProps, AlertProps, AlertVariant, AvatarUpload, AvatarUploadProps, BaseTabsTriggerProps, Button, ButtonLoaderProps, ButtonProps, CircleLoader, CircleLoaderProps, CloseButtonAbsolute, CloseButtonRounded, CloseButtonRoundedProps, ColorPicker, ColorPickerBase, ColorPickerBaseProps, ColorPickerBaseSection, ColorPickerProps, ColorSelect, ColorSelectOption, BaseColorSelectProps as ColorSelectProps, Combobox, ConfirmationDialogProps, ContentCard, DEFAULT_ALERT_DURATION, DatePicker, DatePickerProps, DialogProvider, DialogProviderProps, type FileMetadata, FileUpload, FileUploadBaseProps, FileUploadInline, FileUploadInlineBaseProps, FileUploadInlineProps, type FileUploadProgressCallBacks, type FileUploadProps, IconPicker, IconPickerProps, IconPickerVariant, IconProvider, IconProviderLoader, IconProviderProps, IconToggle, IconToggleProps, Input, InputProps, Layout, LayoutFooter, LayoutFooterProps, LayoutHeader, LayoutHeaderProps, LayoutMain, LayoutMainProps, LayoutProps, LoaderProps, LoadingOverlay, MultiFileUploadProps, OnChangeMultipleFiles, OnChangeSingleFile, Pagination, PaginationProps, PopoverCloseButtonProps, PresetColor, RichTextEditor, RichTextEditorProps, RichTextEditorSlots, ScaledPreview, ScaledPreviewProps, ScaledPreviewSize, Select, SelectOption, SingleFileUploadProps, Slider, SliderInput, SliderInputProps, SliderProps, SliderSelect, SliderSelectOption, SliderSelectProps, SliderSelectValue, Tabs, TabsContent, TabsContext, TabsContextValue, TabsList, TabsListProps, TabsTrigger, TabsTriggerProps, TabsVariant, TagsInput, TagsInputProps, ThemeModeDropdown, ThemeModeDropdownProps, ThemeModeSwitchInside, ThemeModeSwitchInsideProps, ThemeModeSwitchInsideSize, ThemeModeSwitchOutside, ThemeModeSwitchOutsideProps, ThemeModeToggleButton, ThemeModeToggleButtonProps, ThemeProvider, ThemeProviderProps, ToastMessage, Toaster, ToolbarItems, cn, isSvgMarkupString, showConfirmDialog, svgMarkupToMaskUrl, toast, toastError, toastInfo, toastSuccess, toastWarning, useMediaQuery, useSelectKeyboard, useTabsContext, useTheme };
+export { AbsoluteFill, Alert, AlertBaseProps, AlertProps, AlertVariant, AvatarUpload, AvatarUploadProps, BaseTabsTriggerProps, Button, ButtonLoaderProps, ButtonProps, CircleLoader, CircleLoaderProps, CloseButtonAbsolute, CloseButtonRounded, CloseButtonRoundedProps, ColorPicker, ColorPickerBase, ColorPickerBaseProps, ColorPickerBaseSection, ColorPickerProps, ColorSelect, ColorSelectOption, BaseColorSelectProps as ColorSelectProps, Combobox, ConfirmationDialogProps, ContentCard, DEFAULT_ALERT_DURATION, DatePicker, DatePickerProps, Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogProvider, DialogProviderProps, DialogTitle, DialogTrigger, type FileMetadata, FileUpload, FileUploadBaseProps, FileUploadInline, FileUploadInlineBaseProps, FileUploadInlineProps, type FileUploadProgressCallBacks, type FileUploadProps, IconPicker, IconPickerProps, IconPickerVariant, IconProvider, IconProviderLoader, IconProviderProps, IconToggle, IconToggleProps, Input, InputProps, Layout, LayoutFooter, LayoutFooterProps, LayoutHeader, LayoutHeaderProps, LayoutMain, LayoutMainProps, LayoutProps, LoaderProps, LoadingOverlay, MultiFileUploadProps, OnChangeMultipleFiles, OnChangeSingleFile, Pagination, PaginationProps, Popover, PopoverAnchor, PopoverCloseButtonProps, PopoverContent, PopoverContentProps, PopoverTrigger, PresetColor, RichTextEditor, RichTextEditorProps, RichTextEditorSlots, ScaledPreview, ScaledPreviewProps, ScaledPreviewSize, Select, SelectOption, SingleFileUploadProps, Slider, SliderInput, SliderInputProps, SliderProps, SliderSelect, SliderSelectOption, SliderSelectProps, SliderSelectValue, Tabs, TabsContent, TabsContext, TabsContextValue, TabsList, TabsListProps, TabsTrigger, TabsTriggerProps, TabsVariant, TagsInput, TagsInputProps, ThemeModeDropdown, ThemeModeDropdownProps, ThemeModeSwitchInside, ThemeModeSwitchInsideProps, ThemeModeSwitchInsideSize, ThemeModeSwitchOutside, ThemeModeSwitchOutsideProps, ThemeModeToggleButton, ThemeModeToggleButtonProps, ThemeProvider, ThemeProviderProps, ToastMessage, Toaster, ToolbarItems, cn, isSvgMarkupString, showConfirmDialog, svgMarkupToMaskUrl, toast, toastError, toastInfo, toastSuccess, toastWarning, useMediaQuery, useSelectKeyboard, useTabsContext, useTheme };

package/dist/index.d.ts

@@ -23,6 +23,8 @@ import { DialogProvider, DialogProviderProps } from "./confirmation-dialog/Dialo
 import "./confirmation-dialog/index.js";
 import { ContentCard } from "./ContentCard.js";
 import { DatePicker, DatePickerProps } from "./DatePicker.js";
+import { DialogBody, DialogContent, DialogFooter, DialogHeader } from "./dialog/Dialog.js";
+import { Dialog, DialogClose, DialogDescription, DialogTitle, DialogTrigger } from "./dialog/index.js";
 import { FileUploadInlineBaseProps, FileUploadInlineProps } from "./file-upload-inline/types.js";
 import { FileUploadInline } from "./file-upload-inline/FileUploadInline.js";
 import "./file-upload-inline/index.js";
@@ -43,6 +45,8 @@ import "./layout/index.js";
 import { LoaderProps, LoadingOverlay } from "./LoadingOverlay.js";
 import { Pagination, PaginationProps } from "./pagination/Pagination.js";
 import "./pagination/index.js";
+import { Popover, PopoverAnchor, PopoverContent, PopoverContentProps, PopoverTrigger } from "./popover/Popover.js";
+import "./popover/index.js";
 import { RichTextEditor, RichTextEditorProps, RichTextEditorSlots, ToolbarItems } from "./rich-text-editor/RichTextEditor.js";
 import "./rich-text-editor/index.js";
 import { ScaledPreview, ScaledPreviewProps, ScaledPreviewSize } from "./ScaledPreview.js";
@@ -71,4 +75,4 @@ import { Toaster } from "./toast/ToastProvider.js";
 import "./toast/index.js";
 import { isSvgMarkupString, svgMarkupToMaskUrl } from "./utils/svg.js";
 import { cn } from "@pixpilot/shadcn";
-export { AbsoluteFill, Alert, AlertBaseProps, AlertProps, AlertVariant, AvatarUpload, AvatarUploadProps, BaseTabsTriggerProps, Button, ButtonLoaderProps, ButtonProps, CircleLoader, CircleLoaderProps, CloseButtonAbsolute, CloseButtonRounded, CloseButtonRoundedProps, ColorPicker, ColorPickerBase, ColorPickerBaseProps, ColorPickerBaseSection, ColorPickerProps, ColorSelect, ColorSelectOption, BaseColorSelectProps as ColorSelectProps, Combobox, ConfirmationDialogProps, ContentCard, DEFAULT_ALERT_DURATION, DatePicker, DatePickerProps, DialogProvider, DialogProviderProps, type FileMetadata, FileUpload, FileUploadBaseProps, FileUploadInline, FileUploadInlineBaseProps, FileUploadInlineProps, type FileUploadProgressCallBacks, type FileUploadProps, IconPicker, IconPickerProps, IconPickerVariant, IconProvider, IconProviderLoader, IconProviderProps, IconToggle, IconToggleProps, Input, InputProps, Layout, LayoutFooter, LayoutFooterProps, LayoutHeader, LayoutHeaderProps, LayoutMain, LayoutMainProps, LayoutProps, LoaderProps, LoadingOverlay, MultiFileUploadProps, OnChangeMultipleFiles, OnChangeSingleFile, Pagination, PaginationProps, PopoverCloseButtonProps, PresetColor, RichTextEditor, RichTextEditorProps, RichTextEditorSlots, ScaledPreview, ScaledPreviewProps, ScaledPreviewSize, Select, SelectOption, SingleFileUploadProps, Slider, SliderInput, SliderInputProps, SliderProps, SliderSelect, SliderSelectOption, SliderSelectProps, SliderSelectValue, Tabs, TabsContent, TabsContext, TabsContextValue, TabsList, TabsListProps, TabsTrigger, TabsTriggerProps, TabsVariant, TagsInput, TagsInputProps, ThemeModeDropdown, ThemeModeDropdownProps, ThemeModeSwitchInside, ThemeModeSwitchInsideProps, ThemeModeSwitchInsideSize, ThemeModeSwitchOutside, ThemeModeSwitchOutsideProps, ThemeModeToggleButton, ThemeModeToggleButtonProps, ThemeProvider, ThemeProviderProps, ToastMessage, Toaster, ToolbarItems, cn, isSvgMarkupString, showConfirmDialog, svgMarkupToMaskUrl, toast, toastError, toastInfo, toastSuccess, toastWarning, useMediaQuery, useSelectKeyboard, useTabsContext, useTheme };
+export { AbsoluteFill, Alert, AlertBaseProps, AlertProps, AlertVariant, AvatarUpload, AvatarUploadProps, BaseTabsTriggerProps, Button, ButtonLoaderProps, ButtonProps, CircleLoader, CircleLoaderProps, CloseButtonAbsolute, CloseButtonRounded, CloseButtonRoundedProps, ColorPicker, ColorPickerBase, ColorPickerBaseProps, ColorPickerBaseSection, ColorPickerProps, ColorSelect, ColorSelectOption, BaseColorSelectProps as ColorSelectProps, Combobox, ConfirmationDialogProps, ContentCard, DEFAULT_ALERT_DURATION, DatePicker, DatePickerProps, Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogProvider, DialogProviderProps, DialogTitle, DialogTrigger, type FileMetadata, FileUpload, FileUploadBaseProps, FileUploadInline, FileUploadInlineBaseProps, FileUploadInlineProps, type FileUploadProgressCallBacks, type FileUploadProps, IconPicker, IconPickerProps, IconPickerVariant, IconProvider, IconProviderLoader, IconProviderProps, IconToggle, IconToggleProps, Input, InputProps, Layout, LayoutFooter, LayoutFooterProps, LayoutHeader, LayoutHeaderProps, LayoutMain, LayoutMainProps, LayoutProps, LoaderProps, LoadingOverlay, MultiFileUploadProps, OnChangeMultipleFiles, OnChangeSingleFile, Pagination, PaginationProps, Popover, PopoverAnchor, PopoverCloseButtonProps, PopoverContent, PopoverContentProps, PopoverTrigger, PresetColor, RichTextEditor, RichTextEditorProps, RichTextEditorSlots, ScaledPreview, ScaledPreviewProps, ScaledPreviewSize, Select, SelectOption, SingleFileUploadProps, Slider, SliderInput, SliderInputProps, SliderProps, SliderSelect, SliderSelectOption, SliderSelectProps, SliderSelectValue, Tabs, TabsContent, TabsContext, TabsContextValue, TabsList, TabsListProps, TabsTrigger, TabsTriggerProps, TabsVariant, TagsInput, TagsInputProps, ThemeModeDropdown, ThemeModeDropdownProps, ThemeModeSwitchInside, ThemeModeSwitchInsideProps, ThemeModeSwitchInsideSize, ThemeModeSwitchOutside, ThemeModeSwitchOutsideProps, ThemeModeToggleButton, ThemeModeToggleButtonProps, ThemeProvider, ThemeProviderProps, ToastMessage, Toaster, ToolbarItems, cn, isSvgMarkupString, showConfirmDialog, svgMarkupToMaskUrl, toast, toastError, toastInfo, toastSuccess, toastWarning, useMediaQuery, useSelectKeyboard, useTabsContext, useTheme };

package/dist/index.js

@@ -21,6 +21,8 @@ import { DialogProvider } from "./confirmation-dialog/DialogProvider.js";
 import "./confirmation-dialog/index.js";
 import { ContentCard } from "./ContentCard.js";
 import { DatePicker } from "./DatePicker.js";
+import { DialogBody, DialogContent, DialogFooter, DialogHeader } from "./dialog/Dialog.js";
+import { Dialog, DialogClose, DialogDescription, DialogTitle, DialogTrigger } from "./dialog/index.js";
 import { FileUploadInline } from "./file-upload-inline/FileUploadInline.js";
 import "./file-upload-inline/index.js";
 import { useMediaQuery } from "./hooks/use-media-query.js";
@@ -39,6 +41,8 @@ import { LayoutMain } from "./layout/LayoutMain.js";
 import "./layout/index.js";
 import { Pagination } from "./pagination/Pagination.js";
 import "./pagination/index.js";
+import { Popover, PopoverAnchor, PopoverContent, PopoverTrigger } from "./popover/Popover.js";
+import "./popover/index.js";
 import { RichTextEditor } from "./rich-text-editor/RichTextEditor.js";
 import "./rich-text-editor/index.js";
 import { ScaledPreview } from "./ScaledPreview.js";
@@ -66,4 +70,4 @@ import { Toaster } from "./toast/ToastProvider.js";
 import "./toast/index.js";
 import { cn } from "@pixpilot/shadcn";
 
-export { AbsoluteFill, Alert, AvatarUpload, Button, CircleLoader, CloseButtonAbsolute, CloseButtonRounded, ColorPicker, ColorPickerBase, ColorSelect, Combobox, ContentCard, DEFAULT_ALERT_DURATION, DatePicker, DialogProvider, FileUpload, FileUploadInline, IconPicker, IconToggle, Input, Layout, LayoutFooter, LayoutHeader, LayoutMain, LoadingOverlay, Pagination, RichTextEditor, ScaledPreview, Select, Slider, SliderInput, SliderSelect, Tabs, TabsContent, TabsContext, TabsList, TabsTrigger, TagsInput, ThemeModeDropdown, ThemeModeSwitchInside, ThemeModeSwitchOutside, ThemeModeToggleButton, ThemeProvider, Toaster, cn, isSvgMarkupString, showConfirmDialog, svgMarkupToMaskUrl, toast, toastError, toastInfo, toastSuccess, toastWarning, useMediaQuery, useSelectKeyboard, useTabsContext, useTheme };
+export { AbsoluteFill, Alert, AvatarUpload, Button, CircleLoader, CloseButtonAbsolute, CloseButtonRounded, ColorPicker, ColorPickerBase, ColorSelect, Combobox, ContentCard, DEFAULT_ALERT_DURATION, DatePicker, Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogProvider, DialogTitle, DialogTrigger, FileUpload, FileUploadInline, IconPicker, IconToggle, Input, Layout, LayoutFooter, LayoutHeader, LayoutMain, LoadingOverlay, Pagination, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, RichTextEditor, ScaledPreview, Select, Slider, SliderInput, SliderSelect, Tabs, TabsContent, TabsContext, TabsList, TabsTrigger, TagsInput, ThemeModeDropdown, ThemeModeSwitchInside, ThemeModeSwitchOutside, ThemeModeToggleButton, ThemeProvider, Toaster, cn, isSvgMarkupString, showConfirmDialog, svgMarkupToMaskUrl, toast, toastError, toastInfo, toastSuccess, toastWarning, useMediaQuery, useSelectKeyboard, useTabsContext, useTheme };

package/dist/input/Input.d.cts

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

package/dist/popover/Popover.cjs

@@ -0,0 +1,19 @@
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.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);
+
+//#region src/popover/Popover.tsx
+const PopoverContent = (props) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.PopoverContent, {
+		...props,
+		className: (0, __pixpilot_shadcn.cn)("w-auto max-w-[var(--radix-popover-content-available-width)]", "max-h-[var(--radix-popover-content-available-height)]", "overflow-auto", "border-0 bg-transparent p-0", props.className)
+	});
+};
+PopoverContent.displayName = "PopoverContent";
+
+//#endregion
+exports.PopoverContent = PopoverContent;

package/dist/popover/Popover.d.cts

@@ -0,0 +1,8 @@
+import { Popover, PopoverAnchor, PopoverContent, PopoverTrigger } from "@pixpilot/shadcn";
+import React from "react";
+
+//#region src/popover/Popover.d.ts
+interface PopoverContentProps extends React.ComponentProps<typeof PopoverContent> {}
+declare const PopoverContent$1: React.FC<PopoverContentProps>;
+//#endregion
+export { Popover, PopoverAnchor, PopoverContent$1 as PopoverContent, PopoverContentProps, PopoverTrigger };

package/dist/popover/Popover.d.ts

@@ -0,0 +1,8 @@
+import { Popover as Popover$1, PopoverAnchor, PopoverContent, PopoverTrigger as PopoverTrigger$1 } from "@pixpilot/shadcn";
+import React from "react";
+
+//#region src/popover/Popover.d.ts
+interface PopoverContentProps extends React.ComponentProps<typeof PopoverContent> {}
+declare const PopoverContent$1: React.FC<PopoverContentProps>;
+//#endregion
+export { Popover$1 as Popover, PopoverAnchor, PopoverContent$1 as PopoverContent, PopoverContentProps, PopoverTrigger$1 as PopoverTrigger };

package/dist/popover/Popover.js

@@ -0,0 +1,15 @@
+import { Popover as Popover$1, PopoverAnchor, PopoverContent, PopoverTrigger as PopoverTrigger$1, cn } from "@pixpilot/shadcn";
+import React from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/popover/Popover.tsx
+const PopoverContent$1 = (props) => {
+	return /* @__PURE__ */ jsx(PopoverContent, {
+		...props,
+		className: cn("w-auto max-w-[var(--radix-popover-content-available-width)]", "max-h-[var(--radix-popover-content-available-height)]", "overflow-auto", "border-0 bg-transparent p-0", props.className)
+	});
+};
+PopoverContent$1.displayName = "PopoverContent";
+
+//#endregion
+export { Popover$1 as Popover, PopoverAnchor, PopoverContent$1 as PopoverContent, PopoverTrigger$1 as PopoverTrigger };

package/dist/popover/index.cjs

@@ -0,0 +1,4 @@
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
+const require_Popover = require('./Popover.cjs');
+let __pixpilot_shadcn = require("@pixpilot/shadcn");
+__pixpilot_shadcn = require_rolldown_runtime.__toESM(__pixpilot_shadcn);

package/dist/popover/index.d.cts

@@ -0,0 +1 @@
+import { Popover, PopoverAnchor, PopoverContent, PopoverContentProps, PopoverTrigger } from "./Popover.cjs";

package/dist/popover/index.d.ts

@@ -0,0 +1 @@
+import { Popover, PopoverAnchor, PopoverContent, PopoverContentProps, PopoverTrigger } from "./Popover.js";

package/dist/popover/index.js

@@ -0,0 +1 @@
+import { Popover, PopoverAnchor, PopoverContent, PopoverTrigger } from "./Popover.js";

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

@@ -51,7 +51,7 @@ function useEditorProps(slots, customEditorProps) {
 		}
 	}), [defaultEditorProps, customEditorProps]);
 }
-const RichTextEditor = ({ value, onChange, extensions = defaultExtensions, editable = true, slots, showToolbar = true, toolbarItems = defaultToolbarItems, editorProps: customEditorProps, immediatelyRender = false }) => {
+const RichTextEditor = ({ value, onChange, extensions = defaultExtensions, editable = true, slots, showToolbar = true, toolbarItems = defaultToolbarItems, editorProps: customEditorProps, immediatelyRender = false, tooltipMode = "native" }) => {
 	const [renderTick, forceRender] = react.default.useReducer((x) => x + 1, 0);
 	const mergedEditorProps = useEditorProps(slots, customEditorProps);
 	const onChangeRef = react.default.useRef(onChange);
@@ -101,7 +101,8 @@ const RichTextEditor = ({ value, onChange, extensions = defaultExtensions, edita
 			toolbarItems,
 			slots,
 			showToolbar,
-			renderTick
+			renderTick,
+			tooltipMode
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__tiptap_react.EditorContent, { editor: editorInstance })]
 	});
 };

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

@@ -1,3 +1,4 @@
+import { ToolbarButtonTooltipMode } from "./ToolbarButton.cjs";
 import React from "react";
 import { Editor, Extension } from "@tiptap/core";
 import { UseEditorOptions } from "@tiptap/react";
@@ -76,6 +77,11 @@ interface RichTextEditorProps {
    * @default false
    */
   immediatelyRender?: UseEditorOptions['immediatelyRender'];
+  /**
+   * Tooltip mode for toolbar buttons
+   * @default 'native'
+   */
+  tooltipMode?: ToolbarButtonTooltipMode;
 }
 declare const RichTextEditor: React.FC<RichTextEditorProps>;
 //#endregion

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

@@ -1,3 +1,4 @@
+import { ToolbarButtonTooltipMode } from "./ToolbarButton.js";
 import React from "react";
 import { UseEditorOptions } from "@tiptap/react";
 import { Editor, Extension } from "@tiptap/core";
@@ -76,6 +77,11 @@ interface RichTextEditorProps {
    * @default false
    */
   immediatelyRender?: UseEditorOptions['immediatelyRender'];
+  /**
+   * Tooltip mode for toolbar buttons
+   * @default 'native'
+   */
+  tooltipMode?: ToolbarButtonTooltipMode;
 }
 declare const RichTextEditor: React.FC<RichTextEditorProps>;
 //#endregion

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

@@ -43,7 +43,7 @@ function useEditorProps(slots, customEditorProps) {
 		}
 	}), [defaultEditorProps, customEditorProps]);
 }
-const RichTextEditor = ({ value, onChange, extensions = defaultExtensions, editable = true, slots, showToolbar = true, toolbarItems = defaultToolbarItems, editorProps: customEditorProps, immediatelyRender = false }) => {
+const RichTextEditor = ({ value, onChange, extensions = defaultExtensions, editable = true, slots, showToolbar = true, toolbarItems = defaultToolbarItems, editorProps: customEditorProps, immediatelyRender = false, tooltipMode = "native" }) => {
 	const [renderTick, forceRender] = React.useReducer((x) => x + 1, 0);
 	const mergedEditorProps = useEditorProps(slots, customEditorProps);
 	const onChangeRef = React.useRef(onChange);
@@ -93,7 +93,8 @@ const RichTextEditor = ({ value, onChange, extensions = defaultExtensions, edita
 			toolbarItems,
 			slots,
 			showToolbar,
-			renderTick
+			renderTick,
+			tooltipMode
 		}), /* @__PURE__ */ jsx(EditorContent, { editor: editorInstance })]
 	});
 };

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

@@ -9,7 +9,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 }) => {
+const RichTextEditorToolbarComponent = ({ editor, toolbarItems, slots, showToolbar, renderTick, tooltipMode }) => {
 	if (!showToolbar) return null;
 	const handleCommand = (commandFn) => {
 		try {
@@ -35,6 +35,7 @@ const RichTextEditorToolbarComponent = ({ editor, toolbarItems, slots, showToolb
 					isActive: isEditorFocused && (predefinedOption.isActive?.(editor) ?? false),
 					tooltip: predefinedOption.tooltip,
 					className: slots?.toolbar?.button?.className,
+					tooltipMode,
 					children: predefinedOption.icon
 				}, option);
 			}
@@ -45,6 +46,7 @@ const RichTextEditorToolbarComponent = ({ editor, toolbarItems, slots, showToolb
 				isActive: isEditorFocused && (customOption.isActive?.(editor) ?? false),
 				tooltip: customOption.tooltip,
 				className: slots?.toolbar?.button?.className,
+				tooltipMode,
 				children: customOption.icon
 			}, `custom-${customCount}-${customOption.tooltip}`);
 		})

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

@@ -5,7 +5,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 }) => {
+const RichTextEditorToolbarComponent = ({ editor, toolbarItems, slots, showToolbar, renderTick, tooltipMode }) => {
 	if (!showToolbar) return null;
 	const handleCommand = (commandFn) => {
 		try {
@@ -31,6 +31,7 @@ const RichTextEditorToolbarComponent = ({ editor, toolbarItems, slots, showToolb
 					isActive: isEditorFocused && (predefinedOption.isActive?.(editor) ?? false),
 					tooltip: predefinedOption.tooltip,
 					className: slots?.toolbar?.button?.className,
+					tooltipMode,
 					children: predefinedOption.icon
 				}, option);
 			}
@@ -41,6 +42,7 @@ const RichTextEditorToolbarComponent = ({ editor, toolbarItems, slots, showToolb
 				isActive: isEditorFocused && (customOption.isActive?.(editor) ?? false),
 				tooltip: customOption.tooltip,
 				className: slots?.toolbar?.button?.className,
+				tooltipMode,
 				children: customOption.icon
 			}, `custom-${customCount}-${customOption.tooltip}`);
 		})

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

@@ -1,4 +1,5 @@
 const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
+const require_Button = require('../Button.cjs');
 const require_svg = require('../utils/svg.cjs');
 let __pixpilot_shadcn = require("@pixpilot/shadcn");
 __pixpilot_shadcn = require_rolldown_runtime.__toESM(__pixpilot_shadcn);
@@ -8,9 +9,9 @@ let react_jsx_runtime = require("react/jsx-runtime");
 react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
 
 //#region src/rich-text-editor/ToolbarButton.tsx
-const ToolbarButton = ({ onClick, isActive, disabled, className, 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, {
+const ToolbarButton = ({ onClick, isActive, disabled, className, children, tooltip, tooltipMode }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Button.Button, {
+		...tooltipMode === "native" ? { title: tooltip } : { tooltip },
 		type: "button",
 		variant: isActive ? "default" : "ghost",
 		size: "sm",
@@ -36,8 +37,8 @@ const ToolbarButton = ({ onClick, isActive, disabled, className, children, toolt
 				maskSize: "contain"
 			}
 		}) : children
-	})
-}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.TooltipContent, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", { children: tooltip }) })] });
+	});
+};
 
 //#endregion
 exports.ToolbarButton = ToolbarButton;

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

@@ -0,0 +1,6 @@
+import React from "react";
+
+//#region src/rich-text-editor/ToolbarButton.d.ts
+type ToolbarButtonTooltipMode = 'native' | 'custom';
+//#endregion
+export { ToolbarButtonTooltipMode };

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

@@ -0,0 +1,6 @@
+import React from "react";
+
+//#region src/rich-text-editor/ToolbarButton.d.ts
+type ToolbarButtonTooltipMode = 'native' | 'custom';
+//#endregion
+export { ToolbarButtonTooltipMode };

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

@@ -1,12 +1,13 @@
+import { Button as Button$1 } from "../Button.js";
 import { isSvgMarkupString, svgMarkupToMaskUrl } from "../utils/svg.js";
-import { Button, Tooltip, TooltipContent, TooltipTrigger, cn } from "@pixpilot/shadcn";
+import { cn } from "@pixpilot/shadcn";
 import React from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 
 //#region src/rich-text-editor/ToolbarButton.tsx
-const ToolbarButton = ({ onClick, isActive, disabled, className, children, tooltip }) => /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
-	asChild: true,
-	children: /* @__PURE__ */ jsx(Button, {
+const ToolbarButton = ({ onClick, isActive, disabled, className, children, tooltip, tooltipMode }) => {
+	return /* @__PURE__ */ jsx(Button$1, {
+		...tooltipMode === "native" ? { title: tooltip } : { tooltip },
 		type: "button",
 		variant: isActive ? "default" : "ghost",
 		size: "sm",
@@ -32,8 +33,8 @@ const ToolbarButton = ({ onClick, isActive, disabled, className, children, toolt
 				maskSize: "contain"
 			}
 		}) : children
-	})
-}), /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsx("p", { children: tooltip }) })] });
+	});
+};
 
 //#endregion
 export { ToolbarButton };

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

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime10 from "react/jsx-runtime";
+import * as react_jsx_runtime13 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_runtime10.JSX.Element;
+declare function ThemeModeDropdown(props: ThemeModeDropdownProps): react_jsx_runtime13.JSX.Element;
 declare namespace ThemeModeDropdown {
   var displayName: string;
 }

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

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime10 from "react/jsx-runtime";
+import * as react_jsx_runtime13 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_runtime10.JSX.Element;
+declare function ThemeModeDropdown(props: ThemeModeDropdownProps): react_jsx_runtime13.JSX.Element;
 declare namespace ThemeModeDropdown {
   var displayName: string;
 }

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

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime11 from "react/jsx-runtime";
+import * as react_jsx_runtime14 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_runtime11.JSX.Element;
+declare function ThemeModeSwitchInside(props: ThemeModeSwitchInsideProps): react_jsx_runtime14.JSX.Element;
 declare namespace ThemeModeSwitchInside {
   var displayName: string;
 }

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

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime11 from "react/jsx-runtime";
+import * as react_jsx_runtime14 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_runtime11.JSX.Element;
+declare function ThemeModeSwitchInside(props: ThemeModeSwitchInsideProps): react_jsx_runtime14.JSX.Element;
 declare namespace ThemeModeSwitchInside {
   var displayName: string;
 }

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

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime12 from "react/jsx-runtime";
+import * as react_jsx_runtime15 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_runtime12.JSX.Element;
+declare function ThemeModeSwitchOutside(props: ThemeModeSwitchOutsideProps): react_jsx_runtime15.JSX.Element;
 declare namespace ThemeModeSwitchOutside {
   var displayName: string;
 }

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

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime12 from "react/jsx-runtime";
+import * as react_jsx_runtime15 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_runtime12.JSX.Element;
+declare function ThemeModeSwitchOutside(props: ThemeModeSwitchOutsideProps): react_jsx_runtime15.JSX.Element;
 declare namespace ThemeModeSwitchOutside {
   var displayName: string;
 }

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

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime9 from "react/jsx-runtime";
+import * as react_jsx_runtime12 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_runtime9.JSX.Element;
+declare function ThemeModeToggleButton(props: ThemeModeToggleButtonProps): react_jsx_runtime12.JSX.Element;
 declare namespace ThemeModeToggleButton {
   var displayName: string;
 }

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

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime9 from "react/jsx-runtime";
+import * as react_jsx_runtime12 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_runtime9.JSX.Element;
+declare function ThemeModeToggleButton(props: ThemeModeToggleButtonProps): react_jsx_runtime12.JSX.Element;
 declare namespace ThemeModeToggleButton {
   var displayName: string;
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pixpilot/shadcn-ui",
   "type": "module",
-  "version": "0.38.1",
+  "version": "0.40.0",
   "description": "Custom UI components and utilities built with shadcn/ui.",
   "author": "m.doaie <m.doaie@hotmail.com>",
   "license": "MIT",
@@ -60,11 +60,11 @@
     "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/tsconfig": "0.1.0",
     "@internal/tsdown-config": "0.1.0",
-    "@internal/vitest-config": "0.1.0"
+    "@internal/vitest-config": "0.1.0",
+    "@internal/hooks": "0.0.0"
   },
   "prettier": "@internal/prettier-config",
   "scripts": {