@pixpilot/shadcn-ui 0.38.0 → 0.39.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/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_runtime9 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_runtime9.JSX.Element;
+declare function DialogBody({
+  className,
+  ...props
+}: React$1.HTMLAttributes<HTMLDivElement>): react_jsx_runtime9.JSX.Element;
+declare function DialogFooter({
+  className,
+  ...props
+}: React$1.HTMLAttributes<HTMLDivElement>): react_jsx_runtime9.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_runtime8 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_runtime8.JSX.Element;
+declare function DialogBody({
+  className,
+  ...props
+}: React$1.HTMLAttributes<HTMLDivElement>): react_jsx_runtime8.JSX.Element;
+declare function DialogFooter({
+  className,
+  ...props
+}: React$1.HTMLAttributes<HTMLDivElement>): react_jsx_runtime8.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/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_runtime8 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_runtime8.JSX.Element;
 //#endregion
 export { FileUpload };

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_runtime6 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_runtime6.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_runtime11 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_runtime11.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');
@@ -82,7 +84,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;

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";
@@ -69,4 +71,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, 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 };

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";
@@ -71,4 +73,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, 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 };

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";
@@ -66,4 +68,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, 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_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

@@ -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.0",
+  "version": "0.39.0",
   "description": "Custom UI components and utilities built with shadcn/ui.",
   "author": "m.doaie <m.doaie@hotmail.com>",
   "license": "MIT",
@@ -46,7 +46,7 @@
     "pretty-bytes": "^7.1.0",
     "react-responsive": "^10.0.1",
     "sonner": "2.0.7",
-    "@pixpilot/shadcn": "0.7.0"
+    "@pixpilot/shadcn": "0.7.1"
   },
   "devDependencies": {
     "@storybook/react": "^8.6.14",