@pixpilot/shadcn-ui 3.13.0 → 3.14.0

package/dist/absolute-fill/AbsoluteFill.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import * as react_jsx_runtime2 from "react/jsx-runtime";
+import * as react_jsx_runtime7 from "react/jsx-runtime";
 
 //#region src/absolute-fill/AbsoluteFill.d.ts
 
@@ -10,7 +10,7 @@ import * as react_jsx_runtime2 from "react/jsx-runtime";
  */
 declare function AbsoluteFill(props: React.HTMLAttributes<HTMLDivElement> & {
   ref?: React.Ref<HTMLDivElement>;
-}): react_jsx_runtime2.JSX.Element;
+}): react_jsx_runtime7.JSX.Element;
 declare namespace AbsoluteFill {
   var displayName: string;
 }

package/dist/button/Button.d.ts

@@ -1,6 +1,6 @@
 import { Button, Tooltip, TooltipContent, TooltipTrigger, buttonVariants } from "@pixpilot/shadcn";
 import React from "react";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as react_jsx_runtime9 from "react/jsx-runtime";
 import { VariantProps } from "class-variance-authority";
 
 //#region src/button/Button.d.ts
@@ -27,7 +27,7 @@ interface ButtonProps extends React.ComponentProps<typeof Button>, VariantProps<
 }
 declare function Button$1(props: ButtonProps & {
   ref?: React.Ref<HTMLButtonElement>;
-}): react_jsx_runtime0.JSX.Element;
+}): react_jsx_runtime9.JSX.Element;
 declare namespace Button$1 {
   var displayName: string;
 }

package/dist/button-extended/ButtonExtended.d.ts

@@ -1,6 +1,6 @@
 import { Button, Tooltip, TooltipContent, TooltipTrigger, buttonVariants } from "@pixpilot/shadcn";
 import React from "react";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as react_jsx_runtime10 from "react/jsx-runtime";
 import { VariantProps } from "class-variance-authority";
 
 //#region src/button-extended/ButtonExtended.d.ts
@@ -50,7 +50,7 @@ interface ButtonExtendedProps extends React.ComponentProps<typeof Button>, Varia
 }
 declare function ButtonExtended(props: ButtonExtendedProps & {
   ref?: React.Ref<HTMLButtonElement>;
-}): react_jsx_runtime0.JSX.Element;
+}): react_jsx_runtime10.JSX.Element;
 declare namespace ButtonExtended {
   var displayName: string;
 }

package/dist/card/Card.d.ts

@@ -1,15 +1,15 @@
 import { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@pixpilot/shadcn";
 import React from "react";
-import * as react_jsx_runtime3 from "react/jsx-runtime";
+import * as react_jsx_runtime11 from "react/jsx-runtime";
 
 //#region src/card/Card.d.ts
 declare function CardTitle$1({
   className,
   ...props
-}: React.ComponentProps<typeof CardTitle>): react_jsx_runtime3.JSX.Element;
+}: React.ComponentProps<typeof CardTitle>): react_jsx_runtime11.JSX.Element;
 declare function CardHeader$1({
   className,
   ...props
-}: React.ComponentProps<typeof CardHeader>): react_jsx_runtime3.JSX.Element;
+}: React.ComponentProps<typeof CardHeader>): react_jsx_runtime11.JSX.Element;
 //#endregion
 export { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader$1 as CardHeader, CardTitle$1 as CardTitle };

package/dist/color-select/ColorSelect.d.cts

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

package/dist/color-select/ColorSelect.d.ts

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

package/dist/content-card/ContentCard.d.cts

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

package/dist/content-card/ContentCard.d.ts

@@ -1,7 +1,7 @@
 import { Card } from "../card/Card.js";
 import "../card/index.js";
 import React, { ReactNode } from "react";
-import * as react_jsx_runtime6 from "react/jsx-runtime";
+import * as react_jsx_runtime14 from "react/jsx-runtime";
 
 //#region src/content-card/ContentCard.d.ts
 interface SectionCardProps extends React.ComponentProps<typeof Card> {
@@ -9,7 +9,7 @@ interface SectionCardProps extends React.ComponentProps<typeof Card> {
   children: ReactNode;
   marginBottom?: boolean;
 }
-declare function ContentCard(props: SectionCardProps): react_jsx_runtime6.JSX.Element;
+declare function ContentCard(props: SectionCardProps): react_jsx_runtime14.JSX.Element;
 declare namespace ContentCard {
   var displayName: string;
 }

package/dist/date-picker/DatePicker.d.ts

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

package/dist/dialog/Dialog.cjs

@@ -1,4 +1,5 @@
 const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
+const require_overlay_interaction = require('../overlay-panel/overlay-interaction.cjs');
 const require_OverlayPanel = require('../overlay-panel/OverlayPanel.cjs');
 let __pixpilot_shadcn = require("@pixpilot/shadcn");
 __pixpilot_shadcn = require_rolldown_runtime.__toESM(__pixpilot_shadcn);
@@ -8,11 +9,18 @@ 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, fullscreen = false,...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.DialogContent, {
-	ref,
-	className: (0, __pixpilot_shadcn.cn)("max-h-[calc(100%-2rem)] sm:max-h-[calc(100%-2rem)] w-fit max-w-[calc(100%-2rem)] sm:max-w-[calc(100%-2rem)] flex min-h-0 flex-col gap-4 px-6 py-5", fullscreen && "h-[calc(100%-2rem)] w-[calc(100%-2rem)] max-w-none sm:max-w-none", className),
-	...props
-}));
+const DialogContent = react.forwardRef(({ className, fullscreen = false, onPointerDownOutside,...props }, ref) => {
+	const handleOnPointerDownOutside = react.useCallback((event) => {
+		onPointerDownOutside?.(event);
+		if (require_overlay_interaction.isToastInteractionTarget(event.target)) event.preventDefault();
+	}, [onPointerDownOutside]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.DialogContent, {
+		ref,
+		className: (0, __pixpilot_shadcn.cn)("max-h-[calc(100%-2rem)] sm:max-h-[calc(100%-2rem)] w-fit max-w-[calc(100%-2rem)] sm:max-w-[calc(100%-2rem)] flex min-h-0 flex-col gap-4 px-6 py-5", fullscreen && "h-[calc(100%-2rem)] w-[calc(100%-2rem)] max-w-none sm:max-w-none", className),
+		onPointerDownOutside: handleOnPointerDownOutside,
+		...props
+	});
+});
 DialogContent.displayName = "DialogContent";
 function DialogHeader(props) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_OverlayPanel.OverlayPanelHeader, {

package/dist/dialog/Dialog.d.ts

@@ -1,18 +1,18 @@
 import { DialogClose, DialogContent } from "@pixpilot/shadcn";
 import * as React$1 from "react";
-import * as react_jsx_runtime8 from "react/jsx-runtime";
+import * as react_jsx_runtime16 from "react/jsx-runtime";
 
 //#region src/dialog/Dialog.d.ts
 interface DialogContentProps extends React$1.ComponentPropsWithoutRef<typeof DialogContent> {
   fullscreen?: boolean;
 }
 declare const DialogContent$1: React$1.ForwardRefExoticComponent<DialogContentProps & React$1.RefAttributes<HTMLDivElement>>;
-declare function DialogHeader$1(props: React$1.HTMLAttributes<HTMLDivElement>): react_jsx_runtime8.JSX.Element;
-declare function DialogBody(props: React$1.HTMLAttributes<HTMLDivElement>): react_jsx_runtime8.JSX.Element;
-declare function DialogFooter$1(props: React$1.HTMLAttributes<HTMLDivElement>): react_jsx_runtime8.JSX.Element;
+declare function DialogHeader$1(props: React$1.HTMLAttributes<HTMLDivElement>): react_jsx_runtime16.JSX.Element;
+declare function DialogBody(props: React$1.HTMLAttributes<HTMLDivElement>): react_jsx_runtime16.JSX.Element;
+declare function DialogFooter$1(props: React$1.HTMLAttributes<HTMLDivElement>): react_jsx_runtime16.JSX.Element;
 declare function DialogClose$1({
   className,
   ...props
-}: React$1.ComponentPropsWithoutRef<typeof DialogClose>): react_jsx_runtime8.JSX.Element;
+}: React$1.ComponentPropsWithoutRef<typeof DialogClose>): react_jsx_runtime16.JSX.Element;
 //#endregion
 export { DialogBody, DialogClose$1 as DialogClose, DialogContent$1 as DialogContent, DialogContentProps, DialogFooter$1 as DialogFooter, DialogHeader$1 as DialogHeader };

package/dist/dialog/Dialog.js

@@ -1,14 +1,22 @@
+import { isToastInteractionTarget } from "../overlay-panel/overlay-interaction.js";
 import { OverlayPanelBody, OverlayPanelFooter, OverlayPanelHeader } from "../overlay-panel/OverlayPanel.js";
 import { DialogClose, 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, fullscreen = false,...props }, ref) => /* @__PURE__ */ jsx(DialogContent, {
-	ref,
-	className: cn("max-h-[calc(100%-2rem)] sm:max-h-[calc(100%-2rem)] w-fit max-w-[calc(100%-2rem)] sm:max-w-[calc(100%-2rem)] flex min-h-0 flex-col gap-4 px-6 py-5", fullscreen && "h-[calc(100%-2rem)] w-[calc(100%-2rem)] max-w-none sm:max-w-none", className),
-	...props
-}));
+const DialogContent$1 = React$1.forwardRef(({ className, fullscreen = false, onPointerDownOutside,...props }, ref) => {
+	const handleOnPointerDownOutside = React$1.useCallback((event) => {
+		onPointerDownOutside?.(event);
+		if (isToastInteractionTarget(event.target)) event.preventDefault();
+	}, [onPointerDownOutside]);
+	return /* @__PURE__ */ jsx(DialogContent, {
+		ref,
+		className: cn("max-h-[calc(100%-2rem)] sm:max-h-[calc(100%-2rem)] w-fit max-w-[calc(100%-2rem)] sm:max-w-[calc(100%-2rem)] flex min-h-0 flex-col gap-4 px-6 py-5", fullscreen && "h-[calc(100%-2rem)] w-[calc(100%-2rem)] max-w-none sm:max-w-none", className),
+		onPointerDownOutside: handleOnPointerDownOutside,
+		...props
+	});
+});
 DialogContent$1.displayName = "DialogContent";
 function DialogHeader$1(props) {
 	return /* @__PURE__ */ jsx(OverlayPanelHeader, {

package/dist/drawer/Drawer.cjs

@@ -1,4 +1,5 @@
 const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
+const require_overlay_interaction = require('../overlay-panel/overlay-interaction.cjs');
 const require_OverlayPanel = require('../overlay-panel/OverlayPanel.cjs');
 let __pixpilot_shadcn = require("@pixpilot/shadcn");
 __pixpilot_shadcn = require_rolldown_runtime.__toESM(__pixpilot_shadcn);
@@ -46,20 +47,27 @@ function Drawer({ noDrag = false,...props }) {
 * so they deterministically override the registry's `rounded-t-lg`/`rounded-b-lg`.
 */
 const floatingClass = (0, __pixpilot_shadcn.cn)("overflow-hidden border shadow-lg", "data-[vaul-drawer-direction=bottom]:inset-x-3 data-[vaul-drawer-direction=bottom]:bottom-3 data-[vaul-drawer-direction=bottom]:rounded-t-2xl data-[vaul-drawer-direction=bottom]:rounded-b-2xl", "data-[vaul-drawer-direction=top]:inset-x-3 data-[vaul-drawer-direction=top]:top-3 data-[vaul-drawer-direction=top]:rounded-t-2xl data-[vaul-drawer-direction=top]:rounded-b-2xl", "data-[vaul-drawer-direction=right]:inset-y-3 data-[vaul-drawer-direction=right]:right-3 data-[vaul-drawer-direction=right]:rounded-2xl", "data-[vaul-drawer-direction=left]:inset-y-3 data-[vaul-drawer-direction=left]:left-3 data-[vaul-drawer-direction=left]:rounded-2xl");
-const DrawerContent = react.forwardRef(({ className, floating = true, showCloseButton = true, noDrag,...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.DrawerContent, {
-	ref,
-	className: (0, __pixpilot_shadcn.cn)("min-h-0 gap-4 px-6 pb-6", floating && floatingClass, className),
-	...useNoDragProps(noDrag),
-	...props,
-	children: [props.children, showCloseButton && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.DrawerClose, {
-		"data-slot": "drawer-close",
-		className: "ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.XIcon, {}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-			className: "sr-only",
-			children: "Close"
+const DrawerContent = react.forwardRef(({ className, floating = true, showCloseButton = true, noDrag, onPointerDownOutside,...props }, ref) => {
+	const handleOnPointerDownOutside = react.useCallback((event) => {
+		onPointerDownOutside?.(event);
+		if (require_overlay_interaction.isToastInteractionTarget(event.target)) event.preventDefault();
+	}, [onPointerDownOutside]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.DrawerContent, {
+		ref,
+		className: (0, __pixpilot_shadcn.cn)("min-h-0 gap-4 px-6 pb-6", floating && floatingClass, className),
+		...useNoDragProps(noDrag),
+		onPointerDownOutside: handleOnPointerDownOutside,
+		...props,
+		children: [props.children, showCloseButton && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.DrawerClose, {
+			"data-slot": "drawer-close",
+			className: "ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.XIcon, {}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "sr-only",
+				children: "Close"
+			})]
 		})]
-	})]
-}));
+	});
+});
 DrawerContent.displayName = "DrawerContent";
 function DrawerHeader({ noDrag,...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_OverlayPanel.OverlayPanelHeader, {

package/dist/drawer/Drawer.d.ts

@@ -1,6 +1,6 @@
 import { Drawer, DrawerClose, DrawerContent } from "@pixpilot/shadcn";
 import * as React$1 from "react";
-import * as react_jsx_runtime12 from "react/jsx-runtime";
+import * as react_jsx_runtime20 from "react/jsx-runtime";
 import * as _radix_ui_react_dialog0 from "@radix-ui/react-dialog";
 
 //#region src/drawer/Drawer.d.ts
@@ -22,7 +22,7 @@ type DrawerProps = React$1.ComponentProps<typeof Drawer> & NoDragProps;
 declare function Drawer$1({
   noDrag,
   ...props
-}: DrawerProps): react_jsx_runtime12.JSX.Element;
+}: DrawerProps): react_jsx_runtime20.JSX.Element;
 type DrawerContentProps = React$1.ComponentPropsWithoutRef<typeof DrawerContent> & NoDragProps & {
   /**
    * Detach the drawer from the viewport edges: adds a gap on every side and
@@ -44,19 +44,19 @@ declare const DrawerContent$1: React$1.ForwardRefExoticComponent<Omit<Omit<_radi
 declare function DrawerHeader({
   noDrag,
   ...props
-}: React$1.HTMLAttributes<HTMLDivElement> & NoDragProps): react_jsx_runtime12.JSX.Element;
+}: React$1.HTMLAttributes<HTMLDivElement> & NoDragProps): react_jsx_runtime20.JSX.Element;
 declare function DrawerBody({
   noDrag,
   ...props
-}: React$1.HTMLAttributes<HTMLDivElement> & NoDragProps): react_jsx_runtime12.JSX.Element;
+}: React$1.HTMLAttributes<HTMLDivElement> & NoDragProps): react_jsx_runtime20.JSX.Element;
 declare function DrawerFooter({
   noDrag,
   ...props
-}: React$1.HTMLAttributes<HTMLDivElement> & NoDragProps): react_jsx_runtime12.JSX.Element;
+}: React$1.HTMLAttributes<HTMLDivElement> & NoDragProps): react_jsx_runtime20.JSX.Element;
 declare function DrawerClose$1({
   className,
   noDrag,
   ...props
-}: React$1.ComponentPropsWithoutRef<typeof DrawerClose> & NoDragProps): react_jsx_runtime12.JSX.Element;
+}: React$1.ComponentPropsWithoutRef<typeof DrawerClose> & NoDragProps): react_jsx_runtime20.JSX.Element;
 //#endregion
 export { Drawer$1 as Drawer, DrawerBody, DrawerClose$1 as DrawerClose, DrawerContent$1 as DrawerContent, DrawerContentProps, DrawerFooter, DrawerHeader, DrawerProps };

package/dist/drawer/Drawer.js

@@ -1,3 +1,4 @@
+import { isToastInteractionTarget } from "../overlay-panel/overlay-interaction.js";
 import { OverlayPanelBody, OverlayPanelFooter, OverlayPanelHeader } from "../overlay-panel/OverlayPanel.js";
 import { Drawer, DrawerClose, DrawerContent, cn } from "@pixpilot/shadcn";
 import { XIcon } from "lucide-react";
@@ -41,20 +42,27 @@ function Drawer$1({ noDrag = false,...props }) {
 * so they deterministically override the registry's `rounded-t-lg`/`rounded-b-lg`.
 */
 const floatingClass = cn("overflow-hidden border shadow-lg", "data-[vaul-drawer-direction=bottom]:inset-x-3 data-[vaul-drawer-direction=bottom]:bottom-3 data-[vaul-drawer-direction=bottom]:rounded-t-2xl data-[vaul-drawer-direction=bottom]:rounded-b-2xl", "data-[vaul-drawer-direction=top]:inset-x-3 data-[vaul-drawer-direction=top]:top-3 data-[vaul-drawer-direction=top]:rounded-t-2xl data-[vaul-drawer-direction=top]:rounded-b-2xl", "data-[vaul-drawer-direction=right]:inset-y-3 data-[vaul-drawer-direction=right]:right-3 data-[vaul-drawer-direction=right]:rounded-2xl", "data-[vaul-drawer-direction=left]:inset-y-3 data-[vaul-drawer-direction=left]:left-3 data-[vaul-drawer-direction=left]:rounded-2xl");
-const DrawerContent$1 = React$1.forwardRef(({ className, floating = true, showCloseButton = true, noDrag,...props }, ref) => /* @__PURE__ */ jsxs(DrawerContent, {
-	ref,
-	className: cn("min-h-0 gap-4 px-6 pb-6", floating && floatingClass, className),
-	...useNoDragProps(noDrag),
-	...props,
-	children: [props.children, showCloseButton && /* @__PURE__ */ jsxs(DrawerClose, {
-		"data-slot": "drawer-close",
-		className: "ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-		children: [/* @__PURE__ */ jsx(XIcon, {}), /* @__PURE__ */ jsx("span", {
-			className: "sr-only",
-			children: "Close"
+const DrawerContent$1 = React$1.forwardRef(({ className, floating = true, showCloseButton = true, noDrag, onPointerDownOutside,...props }, ref) => {
+	const handleOnPointerDownOutside = React$1.useCallback((event) => {
+		onPointerDownOutside?.(event);
+		if (isToastInteractionTarget(event.target)) event.preventDefault();
+	}, [onPointerDownOutside]);
+	return /* @__PURE__ */ jsxs(DrawerContent, {
+		ref,
+		className: cn("min-h-0 gap-4 px-6 pb-6", floating && floatingClass, className),
+		...useNoDragProps(noDrag),
+		onPointerDownOutside: handleOnPointerDownOutside,
+		...props,
+		children: [props.children, showCloseButton && /* @__PURE__ */ jsxs(DrawerClose, {
+			"data-slot": "drawer-close",
+			className: "ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+			children: [/* @__PURE__ */ jsx(XIcon, {}), /* @__PURE__ */ jsx("span", {
+				className: "sr-only",
+				children: "Close"
+			})]
 		})]
-	})]
-}));
+	});
+});
 DrawerContent$1.displayName = "DrawerContent";
 function DrawerHeader({ noDrag,...props }) {
 	return /* @__PURE__ */ jsx(OverlayPanelHeader, {

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

@@ -1,7 +1,7 @@
 import { FileUploadProps } from "./types/index.js";
-import * as react_jsx_runtime1 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_runtime1.JSX.Element;
+declare function FileUpload(props: FileUploadProps): react_jsx_runtime8.JSX.Element;
 //#endregion
 export { FileUpload };

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

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

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

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

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

package/dist/overlay-panel/overlay-interaction.cjs

@@ -0,0 +1,8 @@
+
+//#region src/overlay-panel/overlay-interaction.ts
+function isToastInteractionTarget(target) {
+	return target instanceof Element && target.closest("[data-sonner-toast]") !== null;
+}
+
+//#endregion
+exports.isToastInteractionTarget = isToastInteractionTarget;

package/dist/overlay-panel/overlay-interaction.js

@@ -0,0 +1,7 @@
+//#region src/overlay-panel/overlay-interaction.ts
+function isToastInteractionTarget(target) {
+	return target instanceof Element && target.closest("[data-sonner-toast]") !== null;
+}
+
+//#endregion
+export { isToastInteractionTarget };

package/dist/rating/Rating.d.ts

@@ -1,5 +1,5 @@
 import * as React$1 from "react";
-import * as react_jsx_runtime20 from "react/jsx-runtime";
+import * as react_jsx_runtime28 from "react/jsx-runtime";
 import { VariantProps } from "class-variance-authority";
 import * as class_variance_authority_types0 from "class-variance-authority/types";
 
@@ -35,7 +35,7 @@ declare function RatingButton({
   index,
   className,
   ...props
-}: RatingButtonProps): react_jsx_runtime20.JSX.Element;
+}: RatingButtonProps): react_jsx_runtime28.JSX.Element;
 declare function Rating({
   value: valueProp,
   defaultValue,
@@ -53,6 +53,6 @@ declare function Rating({
   children,
   id,
   ...props
-}: React$1.PropsWithChildren<RatingProps>): react_jsx_runtime20.JSX.Element;
+}: React$1.PropsWithChildren<RatingProps>): react_jsx_runtime28.JSX.Element;
 //#endregion
 export { Rating, RatingButton, RatingButtonProps, RatingColor, RatingOption, RatingProps };

package/dist/select/Select.d.ts

@@ -1,6 +1,6 @@
 import { Select, SelectContent, SelectTrigger } from "@pixpilot/shadcn";
 import React, { ComponentProps } from "react";
-import * as react_jsx_runtime22 from "react/jsx-runtime";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/select/Select.d.ts
 interface SelectOption {
@@ -60,6 +60,6 @@ type BaseSelectProps = {
   /** Styles the visible trigger. */
   className?: string;
 } & Omit<ComponentProps<typeof SelectTrigger>, 'onChange' | 'value'>;
-declare function Select$1(props: BaseSelectProps): react_jsx_runtime22.JSX.Element;
+declare function Select$1(props: BaseSelectProps): react_jsx_runtime0.JSX.Element;
 //#endregion
 export { BaseSelectProps, Select$1 as Select, SelectContentProps, SelectOption };

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

@@ -1,6 +1,6 @@
 import { CommandOptionListItem } from "../command-option-list/CommandOptionList.cjs";
 import { TagsInputInline } from "./TagsInputInline.cjs";
-import * as react_jsx_runtime24 from "react/jsx-runtime";
+import * as react_jsx_runtime27 from "react/jsx-runtime";
 import { ComponentProps } from "react";
 
 //#region src/tags-input/TagsInput.d.ts
@@ -32,6 +32,6 @@ interface TagsInputProps extends Omit<ComponentProps<typeof TagsInputInline>, 'o
  * - Options support with dropdown (like Select)
  * - freeSolo mode for custom tags (like MUI Autocomplete)
  */
-declare function TagsInput(props: TagsInputProps): react_jsx_runtime24.JSX.Element;
+declare function TagsInput(props: TagsInputProps): react_jsx_runtime27.JSX.Element;
 //#endregion
 export { TagsInput, TagsInputProps };

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

@@ -1,7 +1,7 @@
 import { CommandOptionListItem } from "../command-option-list/CommandOptionList.js";
 import { TagsInputInline } from "./TagsInputInline.js";
 import { ComponentProps } from "react";
-import * as react_jsx_runtime23 from "react/jsx-runtime";
+import * as react_jsx_runtime1 from "react/jsx-runtime";
 
 //#region src/tags-input/TagsInput.d.ts
 interface TagsInputProps extends Omit<ComponentProps<typeof TagsInputInline>, 'onChange' | 'value' | 'onValueChange' | 'onValidate' | 'items' | 'max' | 'inputRef' | 'inputPlaceholder' | 'inputValue' | 'onInputFocus' | 'onInputChange' | 'onInputKeyDown' | 'onInputMouseDown' | 'onListClick' | 'canAddCurrentValue' | 'onAddCurrentInput' | 'showClear'> {
@@ -32,6 +32,6 @@ interface TagsInputProps extends Omit<ComponentProps<typeof TagsInputInline>, 'o
  * - Options support with dropdown (like Select)
  * - freeSolo mode for custom tags (like MUI Autocomplete)
  */
-declare function TagsInput(props: TagsInputProps): react_jsx_runtime23.JSX.Element;
+declare function TagsInput(props: TagsInputProps): react_jsx_runtime1.JSX.Element;
 //#endregion
 export { TagsInput, TagsInputProps };

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

package/dist/toast/ToastProvider.cjs

@@ -1,9 +1,28 @@
 const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
 let sonner = require("sonner");
 sonner = require_rolldown_runtime.__toESM(sonner);
 
 //#region src/toast/ToastProvider.tsx
-const Toaster = sonner.Toaster;
+function Toaster(props) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(sonner.Toaster, {
+		...props,
+		style: {
+			...props.style,
+			pointerEvents: "auto"
+		},
+		toastOptions: {
+			...props.toastOptions,
+			style: {
+				...props.toastOptions?.style,
+				pointerEvents: "auto"
+			}
+		}
+	});
+}
 
 //#endregion
 exports.Toaster = Toaster;

package/dist/toast/ToastProvider.d.cts

@@ -1,7 +1,8 @@
-import * as react0 from "react";
-import * as sonner0 from "sonner";
+import * as react_jsx_runtime29 from "react/jsx-runtime";
+import * as React$1 from "react";
+import { Toaster } from "sonner";
 
 //#region src/toast/ToastProvider.d.ts
-declare const Toaster: react0.ForwardRefExoticComponent<sonner0.ToasterProps & react0.RefAttributes<HTMLElement>>;
+declare function Toaster$1(props: React$1.ComponentProps<typeof Toaster>): react_jsx_runtime29.JSX.Element;
 //#endregion
-export { Toaster };
+export { Toaster$1 as Toaster };

package/dist/toast/ToastProvider.d.ts

@@ -1,7 +1,8 @@
-import * as react0 from "react";
-import * as sonner0 from "sonner";
+import * as React$1 from "react";
+import * as react_jsx_runtime6 from "react/jsx-runtime";
+import { Toaster } from "sonner";
 
 //#region src/toast/ToastProvider.d.ts
-declare const Toaster$1: react0.ForwardRefExoticComponent<sonner0.ToasterProps & react0.RefAttributes<HTMLElement>>;
+declare function Toaster$1(props: React$1.ComponentProps<typeof Toaster>): react_jsx_runtime6.JSX.Element;
 //#endregion
 export { Toaster$1 as Toaster };

package/dist/toast/ToastProvider.js

@@ -1,7 +1,24 @@
+import "react";
+import { jsx } from "react/jsx-runtime";
 import { Toaster } from "sonner";
 
 //#region src/toast/ToastProvider.tsx
-const Toaster$1 = Toaster;
+function Toaster$1(props) {
+	return /* @__PURE__ */ jsx(Toaster, {
+		...props,
+		style: {
+			...props.style,
+			pointerEvents: "auto"
+		},
+		toastOptions: {
+			...props.toastOptions,
+			style: {
+				...props.toastOptions?.style,
+				pointerEvents: "auto"
+			}
+		}
+	});
+}
 
 //#endregion
 export { Toaster$1 as Toaster };

package/dist/toast/mcp.js

@@ -34,7 +34,8 @@ const meta = {
 	notes: [
 		"Render <ToastProvider /> once near the app root.",
 		"Convenience helpers: toast.success, toast.error, toast.warning, toast.info, toast.custom, toast.dismiss(id), toast.dismissAll().",
-		"toast.custom accepts either a React element or a render function `(toastApi) => element`, where `toastApi` is `{ id, dismiss() }` for the toast being rendered."
+		"toast.custom accepts either a React element or a render function `(toastApi) => element`, where `toastApi` is `{ id, dismiss() }` for the toast being rendered.",
+		"For a custom toast with the built-in alert styling, use the `AlertToast` component from `packages/shadcn-ui/src/toast/AlertToast.tsx` (also exported from `@pixpilot/shadcn-ui`)."
 	],
 	examples: [
 		{
@@ -46,8 +47,8 @@ const meta = {
 			code: "toast({ title: \"Heads up\", description: \"Something happened\", variant: \"warning\", duration: 5000 });"
 		},
 		{
-			title: "Custom toast that dismisses itself",
-			code: "toast.custom((toastApi) => (\n  <div>\n    <span>Saved to drafts</span>\n    <button type=\"button\" onClick={toastApi.dismiss}>Dismiss</button>\n  </div>\n));"
+			title: "Custom AlertToast",
+			code: "toast.custom((toastApi) => (\n  <AlertToast\n    title=\"Saved to drafts\"\n    description=\"Your draft is ready to continue editing.\"\n    variant=\"success\"\n    onClose={toastApi.dismiss}\n  />\n));"
 		}
 	],
 	keywords: [

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pixpilot/shadcn-ui",
   "type": "module",
-  "version": "3.13.0",
+  "version": "3.14.0",
   "description": "Custom UI components and utilities built with shadcn/ui.",
   "author": "m.doaie <m.doaie@hotmail.com>",
   "license": "MIT",
@@ -73,13 +73,13 @@
     "tsdown": "^0.15.12",
     "tsx": "^4.21.0",
     "typescript": "^5.9.3",
-    "@internal/hooks": "0.0.0",
     "@internal/eslint-config": "0.3.0",
+    "@internal/hooks": "0.0.0",
     "@internal/mcp": "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/tsconfig": "0.1.0"
+    "@internal/vitest-config": "0.1.0"
   },
   "prettier": "@internal/prettier-config",
   "scripts": {