@pixpilot/shadcn-ui 1.11.0 → 1.12.0

package/dist/Alert.cjs

@@ -1,51 +1,20 @@
 const require_rolldown_runtime = require('./_virtual/rolldown_runtime.cjs');
 const require_utils = require('./shadcn/src/lib/utils.cjs');
+const require_variant_config = require('./variant-config.cjs');
 let __pixpilot_shadcn = require("@pixpilot/shadcn");
 __pixpilot_shadcn = require_rolldown_runtime.__toESM(__pixpilot_shadcn);
-let lucide_react = require("lucide-react");
-lucide_react = require_rolldown_runtime.__toESM(lucide_react);
 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/Alert.tsx
-const iconClass = require_utils.cn("t-0 size-4");
-const colors = {
-	error: {
-		descClass: "text-destructive",
-		textClass: "text-destructive",
-		class: require_utils.cn("border-current/80!"),
-		icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.OctagonAlertIcon, { className: iconClass })
-	},
-	warning: {
-		descClass: "text-amber-600/80 dark:text-amber-400/80",
-		textClass: "text-amber-600 dark:border-amber-400 dark:text-amber-400",
-		class: require_utils.cn("border-current/80!"),
-		icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.CircleAlertIcon, { className: iconClass })
-	},
-	info: {
-		descClass: "text-sky-600/80 dark:text-sky-400/80",
-		textClass: "text-sky-600 dark:border-sky-400 dark:text-sky-400",
-		class: require_utils.cn("border-current/80!"),
-		icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.CircleAlertIcon, { className: iconClass })
-	},
-	success: {
-		descClass: "text-green-600/80 dark:text-green-400/80",
-		textClass: "text-green-600 dark:border-green-400 dark:text-green-400",
-		class: require_utils.cn("border-current/80!"),
-		icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.CircleCheckBigIcon, { className: iconClass })
-	},
-	default: {
-		descClass: "text-foreground/80",
-		textClass: "text-foreground",
-		class: require_utils.cn("border-current/60!"),
-		icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.CircleAlertIcon, { className: iconClass })
-	}
-};
 function getIcon(icon, variant) {
 	if (icon === false) return null;
-	if (icon === void 0 || icon === true) return colors[variant ?? "default"].icon;
+	if (icon === void 0 || icon === true) {
+		const { IconComponent } = require_variant_config.variantConfig[variant ?? "default"];
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconComponent, { className: "t-0 size-4" });
+	}
 	return icon;
 }
 const Alert = (props) => {
@@ -53,11 +22,11 @@ const Alert = (props) => {
 	const msgIcon = getIcon(icon, variant);
 	const hasTitle = title != null && title.trim() !== "";
 	const hasContent = hasTitle || description != null;
-	const variantConfig = colors[variant] ?? colors.default;
+	const config = require_variant_config.variantConfig[variant] ?? require_variant_config.variantConfig.default;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.Alert, {
 		...rest,
 		variant: "destructive",
-		className: require_utils.cn("bg-card border-accent! flex justify-between rounded-sm border-0 border-l-4", msgIcon ? "flex-row" : "flex-col", variantConfig.class, variantConfig.textClass, className),
+		className: require_utils.cn("bg-card border-accent! flex justify-between rounded-sm border-0 border-l-4", msgIcon ? "flex-row" : "flex-col", config.borderClass, config.textClass, className),
 		children: [
 			msgIcon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				className: require_utils.cn("mr-3 flex items-start pt-0.5"),
@@ -66,10 +35,10 @@ const Alert = (props) => {
 			hasContent && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: "flex flex-1 flex-col gap-1",
 				children: [hasTitle && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.AlertTitle, {
-					className: require_utils.cn(variantConfig.textClass, { "block!": !hasTitle }),
+					className: require_utils.cn(config.textClass, { "block!": !hasTitle }),
 					children: title
 				}), description != null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.AlertDescription, {
-					className: require_utils.cn(variantConfig.descClass, !hasTitle && variantConfig.textClass, "whitespace-pre-wrap"),
+					className: require_utils.cn(config.descClass, !hasTitle && config.textClass, "whitespace-pre-wrap"),
 					children: description
 				})]
 			}),

package/dist/Alert.d.cts

@@ -1,7 +1,7 @@
+import { AlertVariant } from "./variant-config.cjs";
 import React from "react";
 
 //#region src/Alert.d.ts
-type AlertVariant = 'error' | 'info' | 'warning' | 'success' | 'default';
 interface AlertBaseProps {
   variant?: AlertVariant;
   description?: React.ReactNode;
@@ -13,4 +13,4 @@ interface AlertBaseProps {
 interface AlertProps extends React.HTMLAttributes<HTMLDivElement>, AlertBaseProps {}
 declare const Alert: React.FC<AlertProps>;
 //#endregion
-export { Alert, AlertBaseProps, AlertProps, AlertVariant };
+export { Alert, AlertBaseProps, AlertProps };

package/dist/Alert.d.ts

@@ -1,7 +1,7 @@
+import { AlertVariant } from "./variant-config.js";
 import React from "react";
 
 //#region src/Alert.d.ts
-type AlertVariant = 'error' | 'info' | 'warning' | 'success' | 'default';
 interface AlertBaseProps {
   variant?: AlertVariant;
   description?: React.ReactNode;
@@ -13,4 +13,4 @@ interface AlertBaseProps {
 interface AlertProps extends React.HTMLAttributes<HTMLDivElement>, AlertBaseProps {}
 declare const Alert: React.FC<AlertProps>;
 //#endregion
-export { Alert, AlertBaseProps, AlertProps, AlertVariant };
+export { Alert, AlertBaseProps, AlertProps };

package/dist/Alert.js

@@ -1,46 +1,16 @@
 import { cn as cn$1 } from "./shadcn/src/lib/utils.js";
+import { variantConfig } from "./variant-config.js";
 import { Alert, AlertDescription, AlertTitle } from "@pixpilot/shadcn";
-import { CircleAlertIcon, CircleCheckBigIcon, OctagonAlertIcon } from "lucide-react";
 import React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/Alert.tsx
-const iconClass = cn$1("t-0 size-4");
-const colors = {
-	error: {
-		descClass: "text-destructive",
-		textClass: "text-destructive",
-		class: cn$1("border-current/80!"),
-		icon: /* @__PURE__ */ jsx(OctagonAlertIcon, { className: iconClass })
-	},
-	warning: {
-		descClass: "text-amber-600/80 dark:text-amber-400/80",
-		textClass: "text-amber-600 dark:border-amber-400 dark:text-amber-400",
-		class: cn$1("border-current/80!"),
-		icon: /* @__PURE__ */ jsx(CircleAlertIcon, { className: iconClass })
-	},
-	info: {
-		descClass: "text-sky-600/80 dark:text-sky-400/80",
-		textClass: "text-sky-600 dark:border-sky-400 dark:text-sky-400",
-		class: cn$1("border-current/80!"),
-		icon: /* @__PURE__ */ jsx(CircleAlertIcon, { className: iconClass })
-	},
-	success: {
-		descClass: "text-green-600/80 dark:text-green-400/80",
-		textClass: "text-green-600 dark:border-green-400 dark:text-green-400",
-		class: cn$1("border-current/80!"),
-		icon: /* @__PURE__ */ jsx(CircleCheckBigIcon, { className: iconClass })
-	},
-	default: {
-		descClass: "text-foreground/80",
-		textClass: "text-foreground",
-		class: cn$1("border-current/60!"),
-		icon: /* @__PURE__ */ jsx(CircleAlertIcon, { className: iconClass })
-	}
-};
 function getIcon(icon, variant) {
 	if (icon === false) return null;
-	if (icon === void 0 || icon === true) return colors[variant ?? "default"].icon;
+	if (icon === void 0 || icon === true) {
+		const { IconComponent } = variantConfig[variant ?? "default"];
+		return /* @__PURE__ */ jsx(IconComponent, { className: "t-0 size-4" });
+	}
 	return icon;
 }
 const Alert$1 = (props) => {
@@ -48,11 +18,11 @@ const Alert$1 = (props) => {
 	const msgIcon = getIcon(icon, variant);
 	const hasTitle = title != null && title.trim() !== "";
 	const hasContent = hasTitle || description != null;
-	const variantConfig = colors[variant] ?? colors.default;
+	const config = variantConfig[variant] ?? variantConfig.default;
 	return /* @__PURE__ */ jsxs(Alert, {
 		...rest,
 		variant: "destructive",
-		className: cn$1("bg-card border-accent! flex justify-between rounded-sm border-0 border-l-4", msgIcon ? "flex-row" : "flex-col", variantConfig.class, variantConfig.textClass, className),
+		className: cn$1("bg-card border-accent! flex justify-between rounded-sm border-0 border-l-4", msgIcon ? "flex-row" : "flex-col", config.borderClass, config.textClass, className),
 		children: [
 			msgIcon && /* @__PURE__ */ jsx("div", {
 				className: cn$1("mr-3 flex items-start pt-0.5"),
@@ -61,10 +31,10 @@ const Alert$1 = (props) => {
 			hasContent && /* @__PURE__ */ jsxs("div", {
 				className: "flex flex-1 flex-col gap-1",
 				children: [hasTitle && /* @__PURE__ */ jsx(AlertTitle, {
-					className: cn$1(variantConfig.textClass, { "block!": !hasTitle }),
+					className: cn$1(config.textClass, { "block!": !hasTitle }),
 					children: title
 				}), description != null && /* @__PURE__ */ jsx(AlertDescription, {
-					className: cn$1(variantConfig.descClass, !hasTitle && variantConfig.textClass, "whitespace-pre-wrap"),
+					className: cn$1(config.descClass, !hasTitle && config.textClass, "whitespace-pre-wrap"),
 					children: description
 				})]
 			}),

package/dist/confirmation-dialog/ConfirmationDialog.cjs

@@ -1,4 +1,5 @@
 const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
+const require_variant_config = require('../variant-config.cjs');
 let __pixpilot_shadcn = require("@pixpilot/shadcn");
 __pixpilot_shadcn = require_rolldown_runtime.__toESM(__pixpilot_shadcn);
 let react_jsx_runtime = require("react/jsx-runtime");
@@ -8,7 +9,7 @@ __ebay_nice_modal_react = require_rolldown_runtime.__toESM(__ebay_nice_modal_rea
 
 //#region src/confirmation-dialog/ConfirmationDialog.tsx
 const ConfirmationDialog = __ebay_nice_modal_react.default.create((props) => {
-	const { title = "Confirmation Dialog" } = props;
+	const { title = "Confirmation Dialog", variant, showIcon = true } = props;
 	const modal = (0, __ebay_nice_modal_react.useModal)();
 	const handleConfirm = () => {
 		props.onConfirm?.();
@@ -23,10 +24,22 @@ const ConfirmationDialog = __ebay_nice_modal_react.default.create((props) => {
 	const onOpenChange = (isOpen) => {
 		if (!isOpen) handleCancel();
 	};
+	const config = variant != null ? require_variant_config.variantConfig[variant] : null;
+	const shouldShowIcon = showIcon && variant != null && variant !== "default";
+	const confirmButtonVariant = variant === "error" ? "destructive" : "default";
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.Dialog, {
 		open: modal.visible,
 		onOpenChange,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.DialogContent, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.DialogHeader, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.DialogTitle, { children: title }), props.description != null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.DialogDescription, { children: props.description })] }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.DialogFooter, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.DialogClose, {
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.DialogContent, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.DialogHeader, {
+			className: "mb-3",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.DialogTitle, {
+				className: (0, __pixpilot_shadcn.cn)("flex items-center gap-2", config?.textClass),
+				children: [shouldShowIcon && config != null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(config.IconComponent, { className: "size-5 shrink-0" }), title]
+			}), props.description != null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.DialogDescription, {
+				className: "mt-3",
+				children: props.description
+			})]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.DialogFooter, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.DialogClose, {
 			asChild: true,
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.Button, {
 				variant: "outline",
@@ -34,6 +47,7 @@ const ConfirmationDialog = __ebay_nice_modal_react.default.create((props) => {
 				children: props.cancelText ?? "Cancel"
 			})
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.Button, {
+			variant: confirmButtonVariant,
 			onClick: handleConfirm,
 			children: props.confirmText ?? "Confirm"
 		})] })] })

package/dist/confirmation-dialog/ConfirmationDialog.d.cts

@@ -1,13 +1,16 @@
+import { AlertVariant } from "../variant-config.cjs";
 import "react";
 
 //#region src/confirmation-dialog/ConfirmationDialog.d.ts
 interface ConfirmationDialogProps {
   title: string;
-  description?: string;
+  description?: string | React.ReactNode;
   confirmText?: string;
   cancelText?: string;
   onConfirm?: () => void;
   onCancel?: () => void;
+  variant?: AlertVariant;
+  showIcon?: boolean;
 }
 //#endregion
 export { ConfirmationDialogProps };

package/dist/confirmation-dialog/ConfirmationDialog.d.ts

@@ -1,14 +1,17 @@
+import { AlertVariant } from "../variant-config.js";
 import "react";
 import "@ebay/nice-modal-react";
 
 //#region src/confirmation-dialog/ConfirmationDialog.d.ts
 interface ConfirmationDialogProps {
   title: string;
-  description?: string;
+  description?: string | React.ReactNode;
   confirmText?: string;
   cancelText?: string;
   onConfirm?: () => void;
   onCancel?: () => void;
+  variant?: AlertVariant;
+  showIcon?: boolean;
 }
 //#endregion
 export { ConfirmationDialogProps };

package/dist/confirmation-dialog/ConfirmationDialog.js

@@ -1,10 +1,11 @@
-import { Button, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@pixpilot/shadcn";
+import { variantConfig } from "../variant-config.js";
+import { Button, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, cn } from "@pixpilot/shadcn";
 import { jsx, jsxs } from "react/jsx-runtime";
 import NiceModal, { useModal } from "@ebay/nice-modal-react";
 
 //#region src/confirmation-dialog/ConfirmationDialog.tsx
 const ConfirmationDialog = NiceModal.create((props) => {
-	const { title = "Confirmation Dialog" } = props;
+	const { title = "Confirmation Dialog", variant, showIcon = true } = props;
 	const modal = useModal();
 	const handleConfirm = () => {
 		props.onConfirm?.();
@@ -19,10 +20,22 @@ const ConfirmationDialog = NiceModal.create((props) => {
 	const onOpenChange = (isOpen) => {
 		if (!isOpen) handleCancel();
 	};
+	const config = variant != null ? variantConfig[variant] : null;
+	const shouldShowIcon = showIcon && variant != null && variant !== "default";
+	const confirmButtonVariant = variant === "error" ? "destructive" : "default";
 	return /* @__PURE__ */ jsx(Dialog, {
 		open: modal.visible,
 		onOpenChange,
-		children: /* @__PURE__ */ jsxs(DialogContent, { children: [/* @__PURE__ */ jsxs(DialogHeader, { children: [/* @__PURE__ */ jsx(DialogTitle, { children: title }), props.description != null && /* @__PURE__ */ jsx(DialogDescription, { children: props.description })] }), /* @__PURE__ */ jsxs(DialogFooter, { children: [/* @__PURE__ */ jsx(DialogClose, {
+		children: /* @__PURE__ */ jsxs(DialogContent, { children: [/* @__PURE__ */ jsxs(DialogHeader, {
+			className: "mb-3",
+			children: [/* @__PURE__ */ jsxs(DialogTitle, {
+				className: cn("flex items-center gap-2", config?.textClass),
+				children: [shouldShowIcon && config != null && /* @__PURE__ */ jsx(config.IconComponent, { className: "size-5 shrink-0" }), title]
+			}), props.description != null && /* @__PURE__ */ jsx(DialogDescription, {
+				className: "mt-3",
+				children: props.description
+			})]
+		}), /* @__PURE__ */ jsxs(DialogFooter, { children: [/* @__PURE__ */ jsx(DialogClose, {
 			asChild: true,
 			children: /* @__PURE__ */ jsx(Button, {
 				variant: "outline",
@@ -30,6 +43,7 @@ const ConfirmationDialog = NiceModal.create((props) => {
 				children: props.cancelText ?? "Cancel"
 			})
 		}), /* @__PURE__ */ jsx(Button, {
+			variant: confirmButtonVariant,
 			onClick: handleConfirm,
 			children: props.confirmText ?? "Confirm"
 		})] })] })

package/dist/dialog/Dialog.d.cts

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

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

@@ -1,7 +1,7 @@
 import { FileUploadProps } from "./types/index.cjs";
-import * as react_jsx_runtime20 from "react/jsx-runtime";
+import * as react_jsx_runtime13 from "react/jsx-runtime";
 
 //#region src/file-upload/FileUpload.d.ts
-declare function FileUpload(props: FileUploadProps): react_jsx_runtime20.JSX.Element;
+declare function FileUpload(props: FileUploadProps): react_jsx_runtime13.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_runtime8 from "react/jsx-runtime";
+import * as react_jsx_runtime12 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_runtime8.JSX.Element;
+declare function FileUploadInline(props: FileUploadInlineProps): react_jsx_runtime12.JSX.Element;
 //#endregion
 export { FileUploadInline };

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

@@ -1,11 +1,11 @@
 import { FileUploadRootProps } from "./types.cjs";
-import * as react_jsx_runtime13 from "react/jsx-runtime";
+import * as react_jsx_runtime14 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_runtime13.JSX.Element;
+declare function FileUploadRoot(props: FileUploadRootProps): react_jsx_runtime14.JSX.Element;
 declare namespace FileUploadRoot {
   var displayName: string;
 }

package/dist/index.d.cts

@@ -2,7 +2,8 @@ import { FileMetadata, FileUploadBaseProps, FileUploadCallbacks, FileUploadProgr
 import { FileUpload } from "./file-upload/FileUpload.cjs";
 import "./file-upload/index.cjs";
 import { AbsoluteFill } from "./AbsoluteFill.cjs";
-import { Alert, AlertBaseProps, AlertProps, AlertVariant } from "./Alert.cjs";
+import { AlertVariant } from "./variant-config.cjs";
+import { Alert, AlertBaseProps, AlertProps } from "./Alert.cjs";
 import { AvatarUpload, AvatarUploadProps } from "./avatar-upload/AvatarUpload.cjs";
 import "./avatar-upload/index.cjs";
 import { Button, ButtonProps } from "./Button.cjs";

package/dist/index.d.ts

@@ -2,7 +2,8 @@ import { FileMetadata, FileUploadBaseProps, FileUploadCallbacks, FileUploadProgr
 import { FileUpload } from "./file-upload/FileUpload.js";
 import "./file-upload/index.js";
 import { AbsoluteFill } from "./AbsoluteFill.js";
-import { Alert, AlertBaseProps, AlertProps, AlertVariant } from "./Alert.js";
+import { AlertVariant } from "./variant-config.js";
+import { Alert, AlertBaseProps, AlertProps } from "./Alert.js";
 import { AvatarUpload, AvatarUploadProps } from "./avatar-upload/AvatarUpload.js";
 import "./avatar-upload/index.js";
 import { Button, ButtonProps } from "./Button.js";

package/dist/input/Input.d.cts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime12 from "react/jsx-runtime";
+import * as react_jsx_runtime11 from "react/jsx-runtime";
 import { InputProps } from "@pixpilot/shadcn";
 import * as React$1 from "react";
 
@@ -10,6 +10,6 @@ type InputProps$1 = InputProps & {
   prefixClassName?: string;
   suffixClassName?: string;
 };
-declare function Input(props: InputProps$1): react_jsx_runtime12.JSX.Element;
+declare function Input(props: InputProps$1): react_jsx_runtime11.JSX.Element;
 //#endregion
 export { Input, InputProps$1 as InputProps };

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

@@ -1,5 +1,5 @@
 import { CommandOptionListItem } from "../CommandOptionList.cjs";
-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 {
@@ -57,6 +57,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/TagsInput.d.ts

@@ -1,5 +1,5 @@
 import { CommandOptionListItem } from "../CommandOptionList.js";
-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 {
@@ -57,6 +57,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/TagsInputInline.d.cts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime14 from "react/jsx-runtime";
+import * as react_jsx_runtime15 from "react/jsx-runtime";
 import { ChangeEventHandler, FocusEventHandler, KeyboardEventHandler, MouseEventHandler, Ref } from "react";
 
 //#region src/tags-input/TagsInputInline.d.ts
@@ -75,6 +75,6 @@ declare function TagsInputInline({
   canAddCurrentValue,
   onAddCurrentInput,
   showClear
-}: TagsInputInlineProps): react_jsx_runtime14.JSX.Element;
+}: TagsInputInlineProps): react_jsx_runtime15.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_runtime15 from "react/jsx-runtime";
+import * as react_jsx_runtime16 from "react/jsx-runtime";
 
 //#region src/tags-input/TagsInputInline.d.ts
 interface TagsInputInlineItem {
@@ -75,6 +75,6 @@ declare function TagsInputInline({
   canAddCurrentValue,
   onAddCurrentInput,
   showClear
-}: TagsInputInlineProps): react_jsx_runtime15.JSX.Element;
+}: TagsInputInlineProps): react_jsx_runtime16.JSX.Element;
 //#endregion
 export { TagsInputInline, TagsInputInlineItem, TagsInputInlineProps };

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

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

package/dist/theme-toggle/ThemeModeDropdown.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/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_runtime18.JSX.Element;
+declare function ThemeModeDropdown(props: ThemeModeDropdownProps): react_jsx_runtime17.JSX.Element;
 declare namespace ThemeModeDropdown {
   var displayName: string;
 }

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

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

package/dist/theme-toggle/ThemeModeSwitchInside.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/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_runtime19.JSX.Element;
+declare function ThemeModeSwitchInside(props: ThemeModeSwitchInsideProps): react_jsx_runtime18.JSX.Element;
 declare namespace ThemeModeSwitchInside {
   var displayName: string;
 }

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

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

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

@@ -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 {
@@ -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_runtime20.JSX.Element;
+declare function ThemeModeSwitchOutside(props: ThemeModeSwitchOutsideProps): react_jsx_runtime19.JSX.Element;
 declare namespace ThemeModeSwitchOutside {
   var displayName: string;
 }

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

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

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

@@ -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 {
@@ -13,7 +13,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/variant-config.cjs

@@ -0,0 +1,40 @@
+const require_rolldown_runtime = require('./_virtual/rolldown_runtime.cjs');
+let lucide_react = require("lucide-react");
+lucide_react = require_rolldown_runtime.__toESM(lucide_react);
+
+//#region src/variant-config.tsx
+const variantConfig = {
+	error: {
+		textClass: "text-destructive",
+		descClass: "text-destructive",
+		borderClass: "border-current/80!",
+		IconComponent: lucide_react.OctagonAlertIcon
+	},
+	warning: {
+		textClass: "text-amber-600 dark:border-amber-400 dark:text-amber-400",
+		descClass: "text-amber-600/80 dark:text-amber-400/80",
+		borderClass: "border-current/80!",
+		IconComponent: lucide_react.CircleAlertIcon
+	},
+	info: {
+		textClass: "text-sky-600 dark:border-sky-400 dark:text-sky-400",
+		descClass: "text-sky-600/80 dark:text-sky-400/80",
+		borderClass: "border-current/80!",
+		IconComponent: lucide_react.CircleAlertIcon
+	},
+	success: {
+		textClass: "text-green-600 dark:border-green-400 dark:text-green-400",
+		descClass: "text-green-600/80 dark:text-green-400/80",
+		borderClass: "border-current/80!",
+		IconComponent: lucide_react.CircleCheckBigIcon
+	},
+	default: {
+		textClass: "text-foreground",
+		descClass: "text-foreground/80",
+		borderClass: "border-current/60!",
+		IconComponent: lucide_react.CircleAlertIcon
+	}
+};
+
+//#endregion
+exports.variantConfig = variantConfig;

package/dist/variant-config.d.cts

@@ -0,0 +1,6 @@
+import React from "react";
+
+//#region src/variant-config.d.ts
+type AlertVariant = 'error' | 'info' | 'warning' | 'success' | 'default';
+//#endregion
+export { AlertVariant };

package/dist/variant-config.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+
+//#region src/variant-config.d.ts
+type AlertVariant = 'error' | 'info' | 'warning' | 'success' | 'default';
+//#endregion
+export { AlertVariant };

package/dist/variant-config.js

@@ -0,0 +1,38 @@
+import { CircleAlertIcon, CircleCheckBigIcon, OctagonAlertIcon } from "lucide-react";
+
+//#region src/variant-config.tsx
+const variantConfig = {
+	error: {
+		textClass: "text-destructive",
+		descClass: "text-destructive",
+		borderClass: "border-current/80!",
+		IconComponent: OctagonAlertIcon
+	},
+	warning: {
+		textClass: "text-amber-600 dark:border-amber-400 dark:text-amber-400",
+		descClass: "text-amber-600/80 dark:text-amber-400/80",
+		borderClass: "border-current/80!",
+		IconComponent: CircleAlertIcon
+	},
+	info: {
+		textClass: "text-sky-600 dark:border-sky-400 dark:text-sky-400",
+		descClass: "text-sky-600/80 dark:text-sky-400/80",
+		borderClass: "border-current/80!",
+		IconComponent: CircleAlertIcon
+	},
+	success: {
+		textClass: "text-green-600 dark:border-green-400 dark:text-green-400",
+		descClass: "text-green-600/80 dark:text-green-400/80",
+		borderClass: "border-current/80!",
+		IconComponent: CircleCheckBigIcon
+	},
+	default: {
+		textClass: "text-foreground",
+		descClass: "text-foreground/80",
+		borderClass: "border-current/60!",
+		IconComponent: CircleAlertIcon
+	}
+};
+
+//#endregion
+export { variantConfig };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pixpilot/shadcn-ui",
   "type": "module",
-  "version": "1.11.0",
+  "version": "1.12.0",
   "description": "Custom UI components and utilities built with shadcn/ui.",
   "author": "m.doaie <m.doaie@hotmail.com>",
   "license": "MIT",
@@ -47,7 +47,7 @@
     "pretty-bytes": "^7.1.0",
     "react-responsive": "^10.0.1",
     "sonner": "2.0.7",
-    "@pixpilot/shadcn": "1.2.1"
+    "@pixpilot/shadcn": "1.2.2"
   },
   "devDependencies": {
     "@storybook/react": "^8.6.14",