@pixpilot/shadcn-ui 1.25.0 → 1.27.0

package/dist/LoadingOverlay.cjs

@@ -2,6 +2,8 @@
 
 
 const require_rolldown_runtime = require('./_virtual/rolldown_runtime.cjs');
+const require_use_delayed_visibility = require('./hooks/use-delayed-visibility.cjs');
+require('./hooks/index.cjs');
 let __pixpilot_shadcn = require("@pixpilot/shadcn");
 __pixpilot_shadcn = require_rolldown_runtime.__toESM(__pixpilot_shadcn);
 let lucide_react = require("lucide-react");
@@ -15,35 +17,14 @@ react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
 const DEFAULT_DELAY = 0;
 const FADE_DURATION = 300;
 const LoadingOverlay = (props) => {
-	const { backdrop = true, placement = "center", loading, delay = DEFAULT_DELAY, message, scope = "container ", size = "default", className, slots } = props;
+	const { backdrop = true, placement = "center", show, inDelay = DEFAULT_DELAY, outDelay = DEFAULT_DELAY, message, scope = "container", size = "default", className, slots } = props;
 	const contentProps = slots?.content || {};
-	const hasDelay = delay > 0;
-	const [mounted, setMounted] = (0, react.useState)(() => !hasDelay && loading);
-	const [visible, setVisible] = (0, react.useState)(() => !hasDelay && loading);
-	(0, react.useEffect)(() => {
-		let timeoutId;
-		if (loading) timeoutId = setTimeout(() => {
-			setMounted(true);
-			requestAnimationFrame(() => {
-				requestAnimationFrame(() => {
-					setVisible(true);
-				});
-			});
-		}, delay);
-		else {
-			setVisible(false);
-			timeoutId = setTimeout(() => {
-				setMounted(false);
-			}, mounted ? FADE_DURATION : 0);
-		}
-		return () => {
-			clearTimeout(timeoutId);
-		};
-	}, [
-		loading,
-		delay,
-		mounted
-	]);
+	const { mounted, visible } = require_use_delayed_visibility.useDelayedVisibility({
+		show,
+		inDelay,
+		outDelay,
+		fadeDuration: FADE_DURATION
+	});
 	const positionClass = {
 		top: "items-start pt-[50px]",
 		center: "items-center",
@@ -66,7 +47,7 @@ const LoadingOverlay = (props) => {
 		style: { transitionDuration: `${FADE_DURATION}ms` },
 		role: "status",
 		"aria-live": "polite",
-		"aria-busy": loading,
+		"aria-busy": show,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			"data-slot": "loading-overlay-content",
 			...contentProps,

package/dist/LoadingOverlay.d.cts

@@ -16,7 +16,7 @@ interface LoadingOverlayProps {
   /**
    * Whether to show the loader
    */
-  loading: boolean;
+  show: boolean;
   /**
    * Optional loading message to display below spinner
    */
@@ -25,7 +25,12 @@ interface LoadingOverlayProps {
    * Delay in milliseconds before showing the loader
    * @default 0
    */
-  delay?: number;
+  inDelay?: number;
+  /**
+   * Delay in milliseconds before hiding the loader after loading becomes false
+   * @default 0
+   */
+  outDelay?: number;
   /**
    * Scope of the loader overlay
    * - 'container': Fills parent container (requires parent with position: relative)

package/dist/LoadingOverlay.d.ts

@@ -16,7 +16,7 @@ interface LoadingOverlayProps {
   /**
    * Whether to show the loader
    */
-  loading: boolean;
+  show: boolean;
   /**
    * Optional loading message to display below spinner
    */
@@ -25,7 +25,12 @@ interface LoadingOverlayProps {
    * Delay in milliseconds before showing the loader
    * @default 0
    */
-  delay?: number;
+  inDelay?: number;
+  /**
+   * Delay in milliseconds before hiding the loader after loading becomes false
+   * @default 0
+   */
+  outDelay?: number;
   /**
    * Scope of the loader overlay
    * - 'container': Fills parent container (requires parent with position: relative)

package/dist/LoadingOverlay.js

@@ -1,44 +1,25 @@
 'use client';
 
 
+import { useDelayedVisibility } from "./hooks/use-delayed-visibility.js";
+import "./hooks/index.js";
 import { cn } from "@pixpilot/shadcn";
 import { Loader2 } from "lucide-react";
-import React, { useEffect, useState } from "react";
+import React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/LoadingOverlay.tsx
 const DEFAULT_DELAY = 0;
 const FADE_DURATION = 300;
 const LoadingOverlay = (props) => {
-	const { backdrop = true, placement = "center", loading, delay = DEFAULT_DELAY, message, scope = "container ", size = "default", className, slots } = props;
+	const { backdrop = true, placement = "center", show, inDelay = DEFAULT_DELAY, outDelay = DEFAULT_DELAY, message, scope = "container", size = "default", className, slots } = props;
 	const contentProps = slots?.content || {};
-	const hasDelay = delay > 0;
-	const [mounted, setMounted] = useState(() => !hasDelay && loading);
-	const [visible, setVisible] = useState(() => !hasDelay && loading);
-	useEffect(() => {
-		let timeoutId;
-		if (loading) timeoutId = setTimeout(() => {
-			setMounted(true);
-			requestAnimationFrame(() => {
-				requestAnimationFrame(() => {
-					setVisible(true);
-				});
-			});
-		}, delay);
-		else {
-			setVisible(false);
-			timeoutId = setTimeout(() => {
-				setMounted(false);
-			}, mounted ? FADE_DURATION : 0);
-		}
-		return () => {
-			clearTimeout(timeoutId);
-		};
-	}, [
-		loading,
-		delay,
-		mounted
-	]);
+	const { mounted, visible } = useDelayedVisibility({
+		show,
+		inDelay,
+		outDelay,
+		fadeDuration: FADE_DURATION
+	});
 	const positionClass = {
 		top: "items-start pt-[50px]",
 		center: "items-center",
@@ -61,7 +42,7 @@ const LoadingOverlay = (props) => {
 		style: { transitionDuration: `${FADE_DURATION}ms` },
 		role: "status",
 		"aria-live": "polite",
-		"aria-busy": loading,
+		"aria-busy": show,
 		children: /* @__PURE__ */ jsxs("div", {
 			"data-slot": "loading-overlay-content",
 			...contentProps,

package/dist/Rating.d.cts

@@ -10,7 +10,7 @@ interface RatingOption {
   value: number;
 }
 declare const ratingVariants: (props?: ({
-  size?: "sm" | "default" | "lg" | "xl" | null | undefined;
+  size?: "default" | "sm" | "lg" | "xl" | null | undefined;
 } & class_variance_authority_types0.ClassProp) | undefined) => string;
 type RatingSize = VariantProps<typeof ratingVariants>['size'];
 type IconType = 'star' | 'circle';

package/dist/Rating.d.ts

@@ -10,7 +10,7 @@ interface RatingOption {
   value: number;
 }
 declare const ratingVariants: (props?: ({
-  size?: "sm" | "default" | "lg" | "xl" | null | undefined;
+  size?: "default" | "sm" | "lg" | "xl" | null | undefined;
 } & class_variance_authority_types0.ClassProp) | undefined) => string;
 type RatingSize = VariantProps<typeof ratingVariants>['size'];
 type IconType = 'star' | 'circle';

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

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

package/dist/hooks/index.cjs

@@ -1,2 +1,3 @@
 const require_use_select_keyboard = require('./use-select-keyboard.cjs');
+const require_use_delayed_visibility = require('./use-delayed-visibility.cjs');
 const require_use_media_query = require('./use-media-query.cjs');

package/dist/hooks/index.d.cts

@@ -1,2 +1,3 @@
+import { UseDelayedVisibilityOptions, UseDelayedVisibilityResult, useDelayedVisibility } from "./use-delayed-visibility.cjs";
 import { useMediaQuery } from "./use-media-query.cjs";
 import { useSelectKeyboard } from "./use-select-keyboard.cjs";

package/dist/hooks/index.d.ts

@@ -1,2 +1,3 @@
+import { UseDelayedVisibilityOptions, UseDelayedVisibilityResult, useDelayedVisibility } from "./use-delayed-visibility.js";
 import { useMediaQuery } from "./use-media-query.js";
 import { useSelectKeyboard } from "./use-select-keyboard.js";

package/dist/hooks/index.js

@@ -1,2 +1,3 @@
 import { useSelectKeyboard } from "./use-select-keyboard.js";
+import { useDelayedVisibility } from "./use-delayed-visibility.js";
 import { useMediaQuery } from "./use-media-query.js";

package/dist/hooks/use-delayed-visibility.cjs

@@ -0,0 +1,57 @@
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react);
+
+//#region src/hooks/use-delayed-visibility.ts
+const DEFAULT_DELAY = 0;
+function useDelayedVisibility(options) {
+	const { show, inDelay = DEFAULT_DELAY, outDelay = DEFAULT_DELAY, fadeDuration = DEFAULT_DELAY } = options;
+	const hasInDelay = inDelay > 0;
+	const [mounted, setMounted] = (0, react.useState)(() => !hasInDelay && show);
+	const [visible, setVisible] = (0, react.useState)(() => !hasInDelay && show);
+	(0, react.useEffect)(() => {
+		const timeoutIds = [];
+		const animationFrameIds = [];
+		const scheduleTimeout = (callback, timeout) => {
+			const timeoutId = setTimeout(callback, timeout);
+			timeoutIds.push(timeoutId);
+		};
+		const scheduleAnimationFrame = (callback) => {
+			const animationFrameId = requestAnimationFrame(callback);
+			animationFrameIds.push(animationFrameId);
+		};
+		if (show) scheduleTimeout(() => {
+			setMounted(true);
+			scheduleAnimationFrame(() => {
+				scheduleAnimationFrame(() => {
+					setVisible(true);
+				});
+			});
+		}, inDelay);
+		else scheduleTimeout(() => {
+			setVisible(false);
+			scheduleTimeout(() => {
+				setMounted(false);
+			}, mounted ? fadeDuration : DEFAULT_DELAY);
+		}, mounted ? outDelay : DEFAULT_DELAY);
+		return () => {
+			timeoutIds.forEach((timeoutId) => clearTimeout(timeoutId));
+			animationFrameIds.forEach((animationFrameId) => {
+				cancelAnimationFrame(animationFrameId);
+			});
+		};
+	}, [
+		show,
+		inDelay,
+		outDelay,
+		fadeDuration,
+		mounted
+	]);
+	return {
+		mounted,
+		visible
+	};
+}
+
+//#endregion
+exports.useDelayedVisibility = useDelayedVisibility;

package/dist/hooks/use-delayed-visibility.d.cts

@@ -0,0 +1,35 @@
+//#region src/hooks/use-delayed-visibility.d.ts
+interface UseDelayedVisibilityOptions {
+  /**
+   * Whether the target should be shown.
+   */
+  show: boolean;
+  /**
+   * Delay in milliseconds before showing.
+   * @default 0
+   */
+  inDelay?: number;
+  /**
+   * Delay in milliseconds before hiding.
+   * @default 0
+   */
+  outDelay?: number;
+  /**
+   * Time in milliseconds to keep mounted after hiding starts.
+   * @default 0
+   */
+  fadeDuration?: number;
+}
+interface UseDelayedVisibilityResult {
+  /**
+   * Whether the target should be rendered.
+   */
+  mounted: boolean;
+  /**
+   * Whether the target should be visually visible.
+   */
+  visible: boolean;
+}
+declare function useDelayedVisibility(options: UseDelayedVisibilityOptions): UseDelayedVisibilityResult;
+//#endregion
+export { UseDelayedVisibilityOptions, UseDelayedVisibilityResult, useDelayedVisibility };

package/dist/hooks/use-delayed-visibility.d.ts

@@ -0,0 +1,35 @@
+//#region src/hooks/use-delayed-visibility.d.ts
+interface UseDelayedVisibilityOptions {
+  /**
+   * Whether the target should be shown.
+   */
+  show: boolean;
+  /**
+   * Delay in milliseconds before showing.
+   * @default 0
+   */
+  inDelay?: number;
+  /**
+   * Delay in milliseconds before hiding.
+   * @default 0
+   */
+  outDelay?: number;
+  /**
+   * Time in milliseconds to keep mounted after hiding starts.
+   * @default 0
+   */
+  fadeDuration?: number;
+}
+interface UseDelayedVisibilityResult {
+  /**
+   * Whether the target should be rendered.
+   */
+  mounted: boolean;
+  /**
+   * Whether the target should be visually visible.
+   */
+  visible: boolean;
+}
+declare function useDelayedVisibility(options: UseDelayedVisibilityOptions): UseDelayedVisibilityResult;
+//#endregion
+export { UseDelayedVisibilityOptions, UseDelayedVisibilityResult, useDelayedVisibility };

package/dist/hooks/use-delayed-visibility.js

@@ -0,0 +1,55 @@
+import { useEffect, useState } from "react";
+
+//#region src/hooks/use-delayed-visibility.ts
+const DEFAULT_DELAY = 0;
+function useDelayedVisibility(options) {
+	const { show, inDelay = DEFAULT_DELAY, outDelay = DEFAULT_DELAY, fadeDuration = DEFAULT_DELAY } = options;
+	const hasInDelay = inDelay > 0;
+	const [mounted, setMounted] = useState(() => !hasInDelay && show);
+	const [visible, setVisible] = useState(() => !hasInDelay && show);
+	useEffect(() => {
+		const timeoutIds = [];
+		const animationFrameIds = [];
+		const scheduleTimeout = (callback, timeout) => {
+			const timeoutId = setTimeout(callback, timeout);
+			timeoutIds.push(timeoutId);
+		};
+		const scheduleAnimationFrame = (callback) => {
+			const animationFrameId = requestAnimationFrame(callback);
+			animationFrameIds.push(animationFrameId);
+		};
+		if (show) scheduleTimeout(() => {
+			setMounted(true);
+			scheduleAnimationFrame(() => {
+				scheduleAnimationFrame(() => {
+					setVisible(true);
+				});
+			});
+		}, inDelay);
+		else scheduleTimeout(() => {
+			setVisible(false);
+			scheduleTimeout(() => {
+				setMounted(false);
+			}, mounted ? fadeDuration : DEFAULT_DELAY);
+		}, mounted ? outDelay : DEFAULT_DELAY);
+		return () => {
+			timeoutIds.forEach((timeoutId) => clearTimeout(timeoutId));
+			animationFrameIds.forEach((animationFrameId) => {
+				cancelAnimationFrame(animationFrameId);
+			});
+		};
+	}, [
+		show,
+		inDelay,
+		outDelay,
+		fadeDuration,
+		mounted
+	]);
+	return {
+		mounted,
+		visible
+	};
+}
+
+//#endregion
+export { useDelayedVisibility };

package/dist/icon-selector/icon-picker-content.cjs

@@ -132,7 +132,7 @@ const IconPickerContent = ({ id, providers: providersProp, onChange, onSelect, m
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_LoadingOverlay.LoadingOverlay, {
 				message: "Loading icons...",
-				loading: isLoading
+				show: isLoading
 			}),
 			isSearching && providers.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_virtualized_icon_grid.default, {
 				icons: filteredData,

package/dist/icon-selector/icon-picker-content.js

@@ -127,7 +127,7 @@ const IconPickerContent = ({ id, providers: providersProp, onChange, onSelect, m
 			}),
 			/* @__PURE__ */ jsx(LoadingOverlay, {
 				message: "Loading icons...",
-				loading: isLoading
+				show: isLoading
 			}),
 			isSearching && providers.length > 0 && /* @__PURE__ */ jsx(virtualized_icon_grid_default, {
 				icons: filteredData,

package/dist/index.cjs

@@ -46,6 +46,7 @@ const require_FileUploadRoot = require('./file-upload-root/FileUploadRoot.cjs');
 require('./file-upload-root/index.cjs');
 const require_FileUploadInline = require('./file-upload-inline/FileUploadInline.cjs');
 require('./file-upload-inline/index.cjs');
+const require_use_delayed_visibility = require('./hooks/use-delayed-visibility.cjs');
 const require_use_media_query = require('./hooks/use-media-query.cjs');
 require('./hooks/index.cjs');
 const require_Input = require('./input/Input.cjs');
@@ -205,6 +206,7 @@ exports.showConfirmDialog = require_confirmation_dialogs.showConfirmDialog;
 exports.svgMarkupToMaskUrl = require_svg.svgMarkupToMaskUrl;
 exports.toast = require_toast.toast;
 exports.useColorPickerContext = require_color_picker_context.useColorPickerContext;
+exports.useDelayedVisibility = require_use_delayed_visibility.useDelayedVisibility;
 exports.useMediaQuery = require_use_media_query.useMediaQuery;
 exports.useSelectKeyboard = require_use_select_keyboard.useSelectKeyboard;
 exports.useTabsContext = require_TabsContext.useTabsContext;

package/dist/index.d.cts

@@ -48,6 +48,7 @@ import "./file-upload-root/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";
+import { UseDelayedVisibilityOptions, UseDelayedVisibilityResult, useDelayedVisibility } from "./hooks/use-delayed-visibility.cjs";
 import { useMediaQuery } from "./hooks/use-media-query.cjs";
 import { useSelectKeyboard } from "./hooks/use-select-keyboard.cjs";
 import "./hooks/index.cjs";
@@ -102,4 +103,4 @@ import { ToggleGroup, ToggleGroupItem, ToggleGroupItemProps, ToggleGroupProps, T
 import { getId } from "./utils/get-id.cjs";
 import { isSvgMarkupString, svgMarkupToMaskUrl } from "./utils/svg.cjs";
 import { cn } from "@pixpilot/shadcn";
-export { AbsoluteFill, Alert, AlertBaseProps, AlertProps, AlertToastProps, AlertVariant, AvatarUpload, AvatarUploadProps, BaseTabsTriggerProps, Button, ButtonExtended, ButtonExtendedLoaderProps, ButtonExtendedProps, ButtonGroup, ButtonGroupProps, ButtonGroupSeparator, ButtonGroupText, ButtonProps, COLOR_PICKER_PALETTE_BUTTON_CLASSES, COMMON_COLORS, CircleLoader, CircleLoaderProps, CloseButtonAbsolute, CloseButtonRounded, CloseButtonRoundedProps, ColorPicker, ColorPickerAlphaSlider, ColorPickerArea, ColorPickerBase, ColorPickerBaseProps, ColorPickerBaseSection, ColorPickerButton, ColorPickerButtonProps, ColorPickerColorPalette, ColorPickerColorPaletteProps, ColorPickerCompactControls, ColorPickerCompactControlsProps, ColorPickerContent, ColorPickerContentProps, ColorPickerContext, Consumer as ColorPickerContextContextConsumer, Provider as ColorPickerContextContextProvider, ColorPickerContextStates, ColorPickerControls, ColorPickerControlsProps, ColorPickerEyeDropper, ColorPickerFormatControls, ColorPickerFormatControlsProps, ColorPickerFormatInput, ColorPickerFormatInputProps, ColorPickerFormatSelect, ColorPickerFullControls, ColorPickerFullControlsProps, ColorPickerHueSlider, ColorPickerInput, ColorPickerInputProps, ColorPickerPaletteButton, ColorPickerPaletteButtonProps, ColorPickerPaletteSwatch, ColorPickerProps, ColorPickerResetOptions, ColorPickerRoot, ColorPickerRootProps, ColorSelect, ColorSelectOption, BaseColorSelectProps as ColorSelectProps, Combobox, ConfirmationDialogProps, ConfirmationDialogVariant, ContentCard, DEFAULT_ALERT_DURATION, DatePicker, DatePickerProps, Dialog, DialogBody, DialogClose, DialogContent, DialogContentProps, DialogDescription, DialogFooter, DialogHeader, DialogProvider, DialogProviderProps, DialogTitle, DialogTrigger, type FileMetadata, FileUpload, FileUploadBaseProps, FileUploadCallbacks, FileUploadInline, FileUploadInlineBaseProps, FileUploadInlineProps, type FileUploadProgressCallBacks, type FileUploadProps, FileUploadRoot, FileUploadRootItem, FileUploadRootItemProps, FileUploadRootProps, FileUploadRootPropsBaseProps, IconPicker, IconPickerProps, IconPickerVariant, IconProvider, IconProviderLoader, IconProviderProps, IconToggle, IconToggleProps, Input, InputProps, Layout, LayoutFooter, LayoutFooterProps, LayoutHeader, LayoutHeaderProps, LayoutMain, LayoutMainProps, LayoutProps, LoadingOverlay, LoadingOverlayProps, MultiFileUploadProps, OnChangeMultipleFiles, OnChangeSingleFile, Pagination, PaginationProps, Popover, PopoverAnchor, PopoverCloseButtonProps, PopoverContent, PopoverContentProps, PopoverContentUnstyled, PopoverTrigger, PresetColor, Rating, RatingButton, RatingButtonProps, RatingColor, RatingOption, RatingProps, RichTextEditor, RichTextEditorProps, RichTextEditorSlots, ScaledPreview, ScaledPreviewProps, ScaledPreviewSize, Select, SelectContentProps, SelectOption, SingleFileUploadProps, Slider, SliderInput, SliderInputProps, SliderProps, SliderSelect, SliderSelectOption, SliderSelectProps, SliderSelectValue, Tabs, TabsContent, TabsContext, TabsContextValue, TabsList, TabsListProps, TabsTrigger, TabsTriggerProps, TabsVariant, TagsInput, TagsInputInline, TagsInputInlineItem, TagsInputInlineProps, TagsInputProps, ThemeModeDropdown, ThemeModeDropdownProps, ThemeModeSwitchInside, ThemeModeSwitchInsideProps, ThemeModeSwitchInsideSize, ThemeModeSwitchOutside, ThemeModeSwitchOutsideProps, ThemeModeToggleButton, ThemeModeToggleButtonProps, ThemeProvider, ThemeProviderProps, ToastFunction, ToastMessage, Toaster, ToggleButton, ToggleButtonProps, ToggleGroup, ToggleGroupItem, ToggleGroupItemProps, ToggleGroupProps, ToggleGroupValue, ToolbarItems, cn, getId, isSvgMarkupString, showConfirmDialog, svgMarkupToMaskUrl, toast, useColorPickerContext, useMediaQuery, useSelectKeyboard, useTabsContext, useTheme };
+export { AbsoluteFill, Alert, AlertBaseProps, AlertProps, AlertToastProps, AlertVariant, AvatarUpload, AvatarUploadProps, BaseTabsTriggerProps, Button, ButtonExtended, ButtonExtendedLoaderProps, ButtonExtendedProps, ButtonGroup, ButtonGroupProps, ButtonGroupSeparator, ButtonGroupText, ButtonProps, COLOR_PICKER_PALETTE_BUTTON_CLASSES, COMMON_COLORS, CircleLoader, CircleLoaderProps, CloseButtonAbsolute, CloseButtonRounded, CloseButtonRoundedProps, ColorPicker, ColorPickerAlphaSlider, ColorPickerArea, ColorPickerBase, ColorPickerBaseProps, ColorPickerBaseSection, ColorPickerButton, ColorPickerButtonProps, ColorPickerColorPalette, ColorPickerColorPaletteProps, ColorPickerCompactControls, ColorPickerCompactControlsProps, ColorPickerContent, ColorPickerContentProps, ColorPickerContext, Consumer as ColorPickerContextContextConsumer, Provider as ColorPickerContextContextProvider, ColorPickerContextStates, ColorPickerControls, ColorPickerControlsProps, ColorPickerEyeDropper, ColorPickerFormatControls, ColorPickerFormatControlsProps, ColorPickerFormatInput, ColorPickerFormatInputProps, ColorPickerFormatSelect, ColorPickerFullControls, ColorPickerFullControlsProps, ColorPickerHueSlider, ColorPickerInput, ColorPickerInputProps, ColorPickerPaletteButton, ColorPickerPaletteButtonProps, ColorPickerPaletteSwatch, ColorPickerProps, ColorPickerResetOptions, ColorPickerRoot, ColorPickerRootProps, ColorSelect, ColorSelectOption, BaseColorSelectProps as ColorSelectProps, Combobox, ConfirmationDialogProps, ConfirmationDialogVariant, ContentCard, DEFAULT_ALERT_DURATION, DatePicker, DatePickerProps, Dialog, DialogBody, DialogClose, DialogContent, DialogContentProps, DialogDescription, DialogFooter, DialogHeader, DialogProvider, DialogProviderProps, DialogTitle, DialogTrigger, type FileMetadata, FileUpload, FileUploadBaseProps, FileUploadCallbacks, FileUploadInline, FileUploadInlineBaseProps, FileUploadInlineProps, type FileUploadProgressCallBacks, type FileUploadProps, FileUploadRoot, FileUploadRootItem, FileUploadRootItemProps, FileUploadRootProps, FileUploadRootPropsBaseProps, IconPicker, IconPickerProps, IconPickerVariant, IconProvider, IconProviderLoader, IconProviderProps, IconToggle, IconToggleProps, Input, InputProps, Layout, LayoutFooter, LayoutFooterProps, LayoutHeader, LayoutHeaderProps, LayoutMain, LayoutMainProps, LayoutProps, LoadingOverlay, LoadingOverlayProps, MultiFileUploadProps, OnChangeMultipleFiles, OnChangeSingleFile, Pagination, PaginationProps, Popover, PopoverAnchor, PopoverCloseButtonProps, PopoverContent, PopoverContentProps, PopoverContentUnstyled, PopoverTrigger, PresetColor, Rating, RatingButton, RatingButtonProps, RatingColor, RatingOption, RatingProps, RichTextEditor, RichTextEditorProps, RichTextEditorSlots, ScaledPreview, ScaledPreviewProps, ScaledPreviewSize, Select, SelectContentProps, SelectOption, SingleFileUploadProps, Slider, SliderInput, SliderInputProps, SliderProps, SliderSelect, SliderSelectOption, SliderSelectProps, SliderSelectValue, Tabs, TabsContent, TabsContext, TabsContextValue, TabsList, TabsListProps, TabsTrigger, TabsTriggerProps, TabsVariant, TagsInput, TagsInputInline, TagsInputInlineItem, TagsInputInlineProps, TagsInputProps, ThemeModeDropdown, ThemeModeDropdownProps, ThemeModeSwitchInside, ThemeModeSwitchInsideProps, ThemeModeSwitchInsideSize, ThemeModeSwitchOutside, ThemeModeSwitchOutsideProps, ThemeModeToggleButton, ThemeModeToggleButtonProps, ThemeProvider, ThemeProviderProps, ToastFunction, ToastMessage, Toaster, ToggleButton, ToggleButtonProps, ToggleGroup, ToggleGroupItem, ToggleGroupItemProps, ToggleGroupProps, ToggleGroupValue, ToolbarItems, UseDelayedVisibilityOptions, UseDelayedVisibilityResult, cn, getId, isSvgMarkupString, showConfirmDialog, svgMarkupToMaskUrl, toast, useColorPickerContext, useDelayedVisibility, useMediaQuery, useSelectKeyboard, useTabsContext, useTheme };

package/dist/index.d.ts

@@ -48,6 +48,7 @@ import "./file-upload-root/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";
+import { UseDelayedVisibilityOptions, UseDelayedVisibilityResult, useDelayedVisibility } from "./hooks/use-delayed-visibility.js";
 import { useMediaQuery } from "./hooks/use-media-query.js";
 import { useSelectKeyboard } from "./hooks/use-select-keyboard.js";
 import "./hooks/index.js";
@@ -102,4 +103,4 @@ import { ToggleGroup, ToggleGroupItem, ToggleGroupItemProps, ToggleGroupProps, T
 import { getId } from "./utils/get-id.js";
 import { isSvgMarkupString, svgMarkupToMaskUrl } from "./utils/svg.js";
 import { cn } from "@pixpilot/shadcn";
-export { AbsoluteFill, Alert, AlertBaseProps, AlertProps, AlertToastProps, AlertVariant, AvatarUpload, AvatarUploadProps, BaseTabsTriggerProps, Button, ButtonExtended, ButtonExtendedLoaderProps, ButtonExtendedProps, ButtonGroup, ButtonGroupProps, ButtonGroupSeparator, ButtonGroupText, ButtonProps, COLOR_PICKER_PALETTE_BUTTON_CLASSES, COMMON_COLORS, CircleLoader, CircleLoaderProps, CloseButtonAbsolute, CloseButtonRounded, CloseButtonRoundedProps, ColorPicker, ColorPickerAlphaSlider, ColorPickerArea, ColorPickerBase, ColorPickerBaseProps, ColorPickerBaseSection, ColorPickerButton, ColorPickerButtonProps, ColorPickerColorPalette, ColorPickerColorPaletteProps, ColorPickerCompactControls, ColorPickerCompactControlsProps, ColorPickerContent, ColorPickerContentProps, ColorPickerContext, Consumer as ColorPickerContextContextConsumer, Provider as ColorPickerContextContextProvider, ColorPickerContextStates, ColorPickerControls, ColorPickerControlsProps, ColorPickerEyeDropper, ColorPickerFormatControls, ColorPickerFormatControlsProps, ColorPickerFormatInput, ColorPickerFormatInputProps, ColorPickerFormatSelect, ColorPickerFullControls, ColorPickerFullControlsProps, ColorPickerHueSlider, ColorPickerInput, ColorPickerInputProps, ColorPickerPaletteButton, ColorPickerPaletteButtonProps, ColorPickerPaletteSwatch, ColorPickerProps, ColorPickerResetOptions, ColorPickerRoot, ColorPickerRootProps, ColorSelect, ColorSelectOption, BaseColorSelectProps as ColorSelectProps, Combobox, ConfirmationDialogProps, ConfirmationDialogVariant, ContentCard, DEFAULT_ALERT_DURATION, DatePicker, DatePickerProps, Dialog, DialogBody, DialogClose, DialogContent, DialogContentProps, DialogDescription, DialogFooter, DialogHeader, DialogProvider, DialogProviderProps, DialogTitle, DialogTrigger, type FileMetadata, FileUpload, FileUploadBaseProps, FileUploadCallbacks, FileUploadInline, FileUploadInlineBaseProps, FileUploadInlineProps, type FileUploadProgressCallBacks, type FileUploadProps, FileUploadRoot, FileUploadRootItem, FileUploadRootItemProps, FileUploadRootProps, FileUploadRootPropsBaseProps, IconPicker, IconPickerProps, IconPickerVariant, IconProvider, IconProviderLoader, IconProviderProps, IconToggle, IconToggleProps, Input, InputProps, Layout, LayoutFooter, LayoutFooterProps, LayoutHeader, LayoutHeaderProps, LayoutMain, LayoutMainProps, LayoutProps, LoadingOverlay, LoadingOverlayProps, MultiFileUploadProps, OnChangeMultipleFiles, OnChangeSingleFile, Pagination, PaginationProps, Popover, PopoverAnchor, PopoverCloseButtonProps, PopoverContent, PopoverContentProps, PopoverContentUnstyled, PopoverTrigger, PresetColor, Rating, RatingButton, RatingButtonProps, RatingColor, RatingOption, RatingProps, RichTextEditor, RichTextEditorProps, RichTextEditorSlots, ScaledPreview, ScaledPreviewProps, ScaledPreviewSize, Select, SelectContentProps, SelectOption, SingleFileUploadProps, Slider, SliderInput, SliderInputProps, SliderProps, SliderSelect, SliderSelectOption, SliderSelectProps, SliderSelectValue, Tabs, TabsContent, TabsContext, TabsContextValue, TabsList, TabsListProps, TabsTrigger, TabsTriggerProps, TabsVariant, TagsInput, TagsInputInline, TagsInputInlineItem, TagsInputInlineProps, TagsInputProps, ThemeModeDropdown, ThemeModeDropdownProps, ThemeModeSwitchInside, ThemeModeSwitchInsideProps, ThemeModeSwitchInsideSize, ThemeModeSwitchOutside, ThemeModeSwitchOutsideProps, ThemeModeToggleButton, ThemeModeToggleButtonProps, ThemeProvider, ThemeProviderProps, ToastFunction, ToastMessage, Toaster, ToggleButton, ToggleButtonProps, ToggleGroup, ToggleGroupItem, ToggleGroupItemProps, ToggleGroupProps, ToggleGroupValue, ToolbarItems, cn, getId, isSvgMarkupString, showConfirmDialog, svgMarkupToMaskUrl, toast, useColorPickerContext, useMediaQuery, useSelectKeyboard, useTabsContext, useTheme };
+export { AbsoluteFill, Alert, AlertBaseProps, AlertProps, AlertToastProps, AlertVariant, AvatarUpload, AvatarUploadProps, BaseTabsTriggerProps, Button, ButtonExtended, ButtonExtendedLoaderProps, ButtonExtendedProps, ButtonGroup, ButtonGroupProps, ButtonGroupSeparator, ButtonGroupText, ButtonProps, COLOR_PICKER_PALETTE_BUTTON_CLASSES, COMMON_COLORS, CircleLoader, CircleLoaderProps, CloseButtonAbsolute, CloseButtonRounded, CloseButtonRoundedProps, ColorPicker, ColorPickerAlphaSlider, ColorPickerArea, ColorPickerBase, ColorPickerBaseProps, ColorPickerBaseSection, ColorPickerButton, ColorPickerButtonProps, ColorPickerColorPalette, ColorPickerColorPaletteProps, ColorPickerCompactControls, ColorPickerCompactControlsProps, ColorPickerContent, ColorPickerContentProps, ColorPickerContext, Consumer as ColorPickerContextContextConsumer, Provider as ColorPickerContextContextProvider, ColorPickerContextStates, ColorPickerControls, ColorPickerControlsProps, ColorPickerEyeDropper, ColorPickerFormatControls, ColorPickerFormatControlsProps, ColorPickerFormatInput, ColorPickerFormatInputProps, ColorPickerFormatSelect, ColorPickerFullControls, ColorPickerFullControlsProps, ColorPickerHueSlider, ColorPickerInput, ColorPickerInputProps, ColorPickerPaletteButton, ColorPickerPaletteButtonProps, ColorPickerPaletteSwatch, ColorPickerProps, ColorPickerResetOptions, ColorPickerRoot, ColorPickerRootProps, ColorSelect, ColorSelectOption, BaseColorSelectProps as ColorSelectProps, Combobox, ConfirmationDialogProps, ConfirmationDialogVariant, ContentCard, DEFAULT_ALERT_DURATION, DatePicker, DatePickerProps, Dialog, DialogBody, DialogClose, DialogContent, DialogContentProps, DialogDescription, DialogFooter, DialogHeader, DialogProvider, DialogProviderProps, DialogTitle, DialogTrigger, type FileMetadata, FileUpload, FileUploadBaseProps, FileUploadCallbacks, FileUploadInline, FileUploadInlineBaseProps, FileUploadInlineProps, type FileUploadProgressCallBacks, type FileUploadProps, FileUploadRoot, FileUploadRootItem, FileUploadRootItemProps, FileUploadRootProps, FileUploadRootPropsBaseProps, IconPicker, IconPickerProps, IconPickerVariant, IconProvider, IconProviderLoader, IconProviderProps, IconToggle, IconToggleProps, Input, InputProps, Layout, LayoutFooter, LayoutFooterProps, LayoutHeader, LayoutHeaderProps, LayoutMain, LayoutMainProps, LayoutProps, LoadingOverlay, LoadingOverlayProps, MultiFileUploadProps, OnChangeMultipleFiles, OnChangeSingleFile, Pagination, PaginationProps, Popover, PopoverAnchor, PopoverCloseButtonProps, PopoverContent, PopoverContentProps, PopoverContentUnstyled, PopoverTrigger, PresetColor, Rating, RatingButton, RatingButtonProps, RatingColor, RatingOption, RatingProps, RichTextEditor, RichTextEditorProps, RichTextEditorSlots, ScaledPreview, ScaledPreviewProps, ScaledPreviewSize, Select, SelectContentProps, SelectOption, SingleFileUploadProps, Slider, SliderInput, SliderInputProps, SliderProps, SliderSelect, SliderSelectOption, SliderSelectProps, SliderSelectValue, Tabs, TabsContent, TabsContext, TabsContextValue, TabsList, TabsListProps, TabsTrigger, TabsTriggerProps, TabsVariant, TagsInput, TagsInputInline, TagsInputInlineItem, TagsInputInlineProps, TagsInputProps, ThemeModeDropdown, ThemeModeDropdownProps, ThemeModeSwitchInside, ThemeModeSwitchInsideProps, ThemeModeSwitchInsideSize, ThemeModeSwitchOutside, ThemeModeSwitchOutsideProps, ThemeModeToggleButton, ThemeModeToggleButtonProps, ThemeProvider, ThemeProviderProps, ToastFunction, ToastMessage, Toaster, ToggleButton, ToggleButtonProps, ToggleGroup, ToggleGroupItem, ToggleGroupItemProps, ToggleGroupProps, ToggleGroupValue, ToolbarItems, UseDelayedVisibilityOptions, UseDelayedVisibilityResult, cn, getId, isSvgMarkupString, showConfirmDialog, svgMarkupToMaskUrl, toast, useColorPickerContext, useDelayedVisibility, useMediaQuery, useSelectKeyboard, useTabsContext, useTheme };

package/dist/index.js

@@ -45,6 +45,7 @@ import { FileUploadRoot } from "./file-upload-root/FileUploadRoot.js";
 import "./file-upload-root/index.js";
 import { FileUploadInline } from "./file-upload-inline/FileUploadInline.js";
 import "./file-upload-inline/index.js";
+import { useDelayedVisibility } from "./hooks/use-delayed-visibility.js";
 import { useMediaQuery } from "./hooks/use-media-query.js";
 import "./hooks/index.js";
 import { Input } from "./input/Input.js";
@@ -94,4 +95,4 @@ import "./toast/index.js";
 import { ToggleGroup, ToggleGroupItem } from "./ToggleGroup.js";
 import { cn } from "@pixpilot/shadcn";
 
-export { AbsoluteFill, Alert, AvatarUpload, Button, ButtonExtended, ButtonGroup, ButtonGroupSeparator, ButtonGroupText, COLOR_PICKER_PALETTE_BUTTON_CLASSES, COMMON_COLORS, CircleLoader, CloseButtonAbsolute, CloseButtonRounded, ColorPicker, ColorPickerAlphaSlider, ColorPickerArea, ColorPickerBase, ColorPickerButton, ColorPickerColorPalette, ColorPickerCompactControls, ColorPickerContent, ColorPickerContext, Consumer as ColorPickerContextContextConsumer, Provider as ColorPickerContextContextProvider, ColorPickerControls, ColorPickerEyeDropper, ColorPickerFormatControls, ColorPickerFormatInput, ColorPickerFormatSelect, ColorPickerFullControls, ColorPickerHueSlider, ColorPickerInput, ColorPickerPaletteButton, ColorPickerPaletteSwatch, ColorPickerRoot, ColorSelect, Combobox, ContentCard, DEFAULT_ALERT_DURATION, DatePicker, Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogProvider, DialogTitle, DialogTrigger, FileUpload, FileUploadInline, FileUploadRoot, FileUploadRootItem, IconPicker, IconToggle, Input, Layout, LayoutFooter, LayoutHeader, LayoutMain, LoadingOverlay, Pagination, Popover, PopoverAnchor, PopoverContent, PopoverContentUnstyled, PopoverTrigger, Rating, RatingButton, RichTextEditor, ScaledPreview, Select, Slider, SliderInput, SliderSelect, Tabs, TabsContent, TabsContext, TabsList, TabsTrigger, TagsInput, TagsInputInline, ThemeModeDropdown, ThemeModeSwitchInside, ThemeModeSwitchOutside, ThemeModeToggleButton, ThemeProvider, Toaster, ToggleButton, ToggleGroup, ToggleGroupItem, cn, getId, isSvgMarkupString, showConfirmDialog, svgMarkupToMaskUrl, toast, useColorPickerContext, useMediaQuery, useSelectKeyboard, useTabsContext, useTheme };
+export { AbsoluteFill, Alert, AvatarUpload, Button, ButtonExtended, ButtonGroup, ButtonGroupSeparator, ButtonGroupText, COLOR_PICKER_PALETTE_BUTTON_CLASSES, COMMON_COLORS, CircleLoader, CloseButtonAbsolute, CloseButtonRounded, ColorPicker, ColorPickerAlphaSlider, ColorPickerArea, ColorPickerBase, ColorPickerButton, ColorPickerColorPalette, ColorPickerCompactControls, ColorPickerContent, ColorPickerContext, Consumer as ColorPickerContextContextConsumer, Provider as ColorPickerContextContextProvider, ColorPickerControls, ColorPickerEyeDropper, ColorPickerFormatControls, ColorPickerFormatInput, ColorPickerFormatSelect, ColorPickerFullControls, ColorPickerHueSlider, ColorPickerInput, ColorPickerPaletteButton, ColorPickerPaletteSwatch, ColorPickerRoot, ColorSelect, Combobox, ContentCard, DEFAULT_ALERT_DURATION, DatePicker, Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogProvider, DialogTitle, DialogTrigger, FileUpload, FileUploadInline, FileUploadRoot, FileUploadRootItem, IconPicker, IconToggle, Input, Layout, LayoutFooter, LayoutHeader, LayoutMain, LoadingOverlay, Pagination, Popover, PopoverAnchor, PopoverContent, PopoverContentUnstyled, PopoverTrigger, Rating, RatingButton, RichTextEditor, ScaledPreview, Select, Slider, SliderInput, SliderSelect, Tabs, TabsContent, TabsContext, TabsList, TabsTrigger, TagsInput, TagsInputInline, ThemeModeDropdown, ThemeModeSwitchInside, ThemeModeSwitchOutside, ThemeModeToggleButton, ThemeProvider, Toaster, ToggleButton, ToggleGroup, ToggleGroupItem, cn, getId, isSvgMarkupString, showConfirmDialog, svgMarkupToMaskUrl, toast, useColorPickerContext, useDelayedVisibility, useMediaQuery, useSelectKeyboard, useTabsContext, useTheme };

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

@@ -1,5 +1,5 @@
 import { CommandOptionListItem } from "../CommandOptionList.cjs";
-import * as react_jsx_runtime16 from "react/jsx-runtime";
+import * as react_jsx_runtime15 from "react/jsx-runtime";
 
 //#region src/tags-input/TagsInput.d.ts
 interface TagsInputProps {
@@ -59,6 +59,6 @@ declare function TagsInput({
   addOnTab,
   onValidate,
   addButtonVisibility
-}: TagsInputProps): react_jsx_runtime16.JSX.Element;
+}: TagsInputProps): react_jsx_runtime15.JSX.Element;
 //#endregion
 export { TagsInput, TagsInputProps };

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

@@ -1,5 +1,5 @@
 import { CommandOptionListItem } from "../CommandOptionList.js";
-import * as react_jsx_runtime15 from "react/jsx-runtime";
+import * as react_jsx_runtime16 from "react/jsx-runtime";
 
 //#region src/tags-input/TagsInput.d.ts
 interface TagsInputProps {
@@ -59,6 +59,6 @@ declare function TagsInput({
   addOnTab,
   onValidate,
   addButtonVisibility
-}: TagsInputProps): react_jsx_runtime15.JSX.Element;
+}: TagsInputProps): react_jsx_runtime16.JSX.Element;
 //#endregion
 export { TagsInput, TagsInputProps };

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

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime15 from "react/jsx-runtime";
+import * as react_jsx_runtime14 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_runtime15.JSX.Element;
+}: TagsInputInlineProps): react_jsx_runtime14.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_runtime16 from "react/jsx-runtime";
+import * as react_jsx_runtime15 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_runtime16.JSX.Element;
+}: TagsInputInlineProps): react_jsx_runtime15.JSX.Element;
 //#endregion
 export { TagsInputInline, TagsInputInlineItem, TagsInputInlineProps };

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

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

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

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

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

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

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

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

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

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

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

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

package/dist/toast/AlertToast.cjs

@@ -1,4 +1,5 @@
 const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
+const require_variant_config = require('../variant-config.cjs');
 const require_Alert = require('../Alert.cjs');
 let __pixpilot_shadcn = require("@pixpilot/shadcn");
 __pixpilot_shadcn = require_rolldown_runtime.__toESM(__pixpilot_shadcn);
@@ -11,25 +12,56 @@ react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
 
 //#region src/toast/AlertToast.tsx
 const AlertToast = (props) => {
-	const { duration, onClose, id,...rest } = props;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Alert.Alert, {
-		icon: true,
+	const { children, className, description, duration, icon = true, id, onClose, title, variant = "default",...rest } = props;
+	const config = require_variant_config.variantConfig[variant] ?? require_variant_config.variantConfig.default;
+	const hasTitle = title != null && title.trim() !== "";
+	const closeButton = onClose && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "flex shrink-0 items-start pt-0.5 ",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+			id,
+			type: "button",
+			className: "cursor-pointer opacity-80 transition-opacity hover:opacity-100",
+			onClick: onClose,
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.XIcon, { className: "size-4.5" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "sr-only",
+				children: "Close"
+			})]
+		})
+	});
+	if (onClose) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Alert.Alert, {
+		icon,
 		...rest,
-		className: (0, __pixpilot_shadcn.cn)("shadow-md", props.className, { "pr-3": onClose }),
-		children: onClose && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: "flex items-start pt-0.5 pl-1",
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
-				id,
-				type: "button",
-				className: "cursor-pointer opacity-80 transition-opacity hover:opacity-100",
-				onClick: onClose,
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.XIcon, { className: "size-4.5" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-					className: "sr-only",
-					children: "Close"
-				})]
-			})
+		variant,
+		className: (0, __pixpilot_shadcn.cn)("shadow-md pr-3", className),
+		description: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "flex w-full min-w-0 items-start gap-3",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex min-w-0 flex-1 flex-col gap-1",
+				children: [
+					hasTitle && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						"data-slot": "toast-title",
+						className: (0, __pixpilot_shadcn.cn)("line-clamp-1 min-h-4 font-medium tracking-tight", config.textClass),
+						children: title
+					}),
+					description != null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						"data-slot": "toast-description",
+						className: (0, __pixpilot_shadcn.cn)(config.descClass, !hasTitle && config.textClass, "whitespace-pre-wrap"),
+						children: description
+					}),
+					children
+				]
+			}), closeButton]
 		})
 	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Alert.Alert, {
+		icon,
+		...rest,
+		variant,
+		title,
+		description,
+		className: (0, __pixpilot_shadcn.cn)("shadow-md", className),
+		children
+	});
 };
 AlertToast.displayName = "AlertToast";
 

package/dist/toast/AlertToast.js

@@ -1,3 +1,4 @@
+import { variantConfig } from "../variant-config.js";
 import { Alert as Alert$1 } from "../Alert.js";
 import { cn } from "@pixpilot/shadcn";
 import { XIcon } from "lucide-react";
@@ -6,25 +7,56 @@ import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/toast/AlertToast.tsx
 const AlertToast = (props) => {
-	const { duration, onClose, id,...rest } = props;
-	return /* @__PURE__ */ jsx(Alert$1, {
-		icon: true,
+	const { children, className, description, duration, icon = true, id, onClose, title, variant = "default",...rest } = props;
+	const config = variantConfig[variant] ?? variantConfig.default;
+	const hasTitle = title != null && title.trim() !== "";
+	const closeButton = onClose && /* @__PURE__ */ jsx("div", {
+		className: "flex shrink-0 items-start pt-0.5 ",
+		children: /* @__PURE__ */ jsxs("button", {
+			id,
+			type: "button",
+			className: "cursor-pointer opacity-80 transition-opacity hover:opacity-100",
+			onClick: onClose,
+			children: [/* @__PURE__ */ jsx(XIcon, { className: "size-4.5" }), /* @__PURE__ */ jsx("span", {
+				className: "sr-only",
+				children: "Close"
+			})]
+		})
+	});
+	if (onClose) return /* @__PURE__ */ jsx(Alert$1, {
+		icon,
 		...rest,
-		className: cn("shadow-md", props.className, { "pr-3": onClose }),
-		children: onClose && /* @__PURE__ */ jsx("div", {
-			className: "flex items-start pt-0.5 pl-1",
-			children: /* @__PURE__ */ jsxs("button", {
-				id,
-				type: "button",
-				className: "cursor-pointer opacity-80 transition-opacity hover:opacity-100",
-				onClick: onClose,
-				children: [/* @__PURE__ */ jsx(XIcon, { className: "size-4.5" }), /* @__PURE__ */ jsx("span", {
-					className: "sr-only",
-					children: "Close"
-				})]
-			})
+		variant,
+		className: cn("shadow-md pr-3", className),
+		description: /* @__PURE__ */ jsxs("div", {
+			className: "flex w-full min-w-0 items-start gap-3",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "flex min-w-0 flex-1 flex-col gap-1",
+				children: [
+					hasTitle && /* @__PURE__ */ jsx("div", {
+						"data-slot": "toast-title",
+						className: cn("line-clamp-1 min-h-4 font-medium tracking-tight", config.textClass),
+						children: title
+					}),
+					description != null && /* @__PURE__ */ jsx("div", {
+						"data-slot": "toast-description",
+						className: cn(config.descClass, !hasTitle && config.textClass, "whitespace-pre-wrap"),
+						children: description
+					}),
+					children
+				]
+			}), closeButton]
 		})
 	});
+	return /* @__PURE__ */ jsx(Alert$1, {
+		icon,
+		...rest,
+		variant,
+		title,
+		description,
+		className: cn("shadow-md", className),
+		children
+	});
 };
 AlertToast.displayName = "AlertToast";
 

package/package.json

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