@diwauhris/ui 1.7.22 → 1.7.23

package/lib/index.cjs

@@ -2100,12 +2100,42 @@ var STYLES = {
 	warning: "border-amber-200  bg-amber-50  text-amber-800",
 	info: "border-sky-200    bg-sky-50    text-sky-800"
 };
-function ErrorBanner({ message, tone = "error", className = "" }) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+function ErrorBanner({ message, title, tone = "error", className = "", icon, action, onDismiss, dismissLabel = "Dismiss" }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		role: tone === "error" ? "alert" : void 0,
 		"aria-live": tone !== "error" ? "polite" : void 0,
-		className: cn("rounded-2xl border px-5 py-4 text-sm font-bold", STYLES[tone], className),
-		children: message
+		className: cn("flex items-start gap-3 rounded-2xl border px-5 py-4 text-sm font-bold", STYLES[tone], className),
+		children: [
+			icon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "mt-0.5 shrink-0",
+				"aria-hidden": "true",
+				children: icon
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "min-w-0 flex-1",
+				children: [title && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "mb-0.5",
+					children: title
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: cn(title && "font-medium"),
+					children: message
+				})]
+			}),
+			action && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "shrink-0",
+				children: action
+			}),
+			onDismiss && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+				type: "button",
+				onClick: onDismiss,
+				className: "shrink-0 rounded-lg p-1 transition-colors hover:bg-black/5",
+				"aria-label": dismissLabel,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.X, {
+					size: 16,
+					"aria-hidden": "true"
+				})
+			})
+		]
 	});
 }
 //#endregion

package/lib/index.mjs

@@ -2076,12 +2076,42 @@ var STYLES = {
 	warning: "border-amber-200  bg-amber-50  text-amber-800",
 	info: "border-sky-200    bg-sky-50    text-sky-800"
 };
-function ErrorBanner({ message, tone = "error", className = "" }) {
-	return /* @__PURE__ */ jsx("div", {
+function ErrorBanner({ message, title, tone = "error", className = "", icon, action, onDismiss, dismissLabel = "Dismiss" }) {
+	return /* @__PURE__ */ jsxs("div", {
 		role: tone === "error" ? "alert" : void 0,
 		"aria-live": tone !== "error" ? "polite" : void 0,
-		className: cn("rounded-2xl border px-5 py-4 text-sm font-bold", STYLES[tone], className),
-		children: message
+		className: cn("flex items-start gap-3 rounded-2xl border px-5 py-4 text-sm font-bold", STYLES[tone], className),
+		children: [
+			icon && /* @__PURE__ */ jsx("span", {
+				className: "mt-0.5 shrink-0",
+				"aria-hidden": "true",
+				children: icon
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "min-w-0 flex-1",
+				children: [title && /* @__PURE__ */ jsx("div", {
+					className: "mb-0.5",
+					children: title
+				}), /* @__PURE__ */ jsx("span", {
+					className: cn(title && "font-medium"),
+					children: message
+				})]
+			}),
+			action && /* @__PURE__ */ jsx("div", {
+				className: "shrink-0",
+				children: action
+			}),
+			onDismiss && /* @__PURE__ */ jsx("button", {
+				type: "button",
+				onClick: onDismiss,
+				className: "shrink-0 rounded-lg p-1 transition-colors hover:bg-black/5",
+				"aria-label": dismissLabel,
+				children: /* @__PURE__ */ jsx(X, {
+					size: 16,
+					"aria-hidden": "true"
+				})
+			})
+		]
 	});
 }
 //#endregion

package/lib/types/ui-library/gallery/error-banner/ErrorBanner.d.ts

@@ -16,13 +16,25 @@
  *   <ErrorBanner message="Failed to save changes." />
  *   <ErrorBanner message="Draft saved." tone="info" />
  *   <ErrorBanner message="This action cannot be undone." tone="warning" />
+ *   <ErrorBanner message="Failed to save." onDismiss={clearError} />
+ *   <ErrorBanner title="Upload failed" message="The file was too large." icon={<AlertTriangle size={18} />} action={<Button onClick={retry}>Retry</Button>} />
  */
 import type { ReactNode } from 'react';
 export type ErrorBannerTone = 'error' | 'warning' | 'info';
 export interface ErrorBannerProps {
     /** Primary message text */
     message: ReactNode;
+    /** Optional bold heading rendered above the message. */
+    title?: ReactNode;
     tone?: ErrorBannerTone;
     className?: string;
+    /** Optional leading icon rendered before the text. */
+    icon?: ReactNode;
+    /** Optional trailing action (e.g. a Retry button) rendered before the close button. */
+    action?: ReactNode;
+    /** When provided, renders a close button that invokes this handler. */
+    onDismiss?: () => void;
+    /** Accessible label for the close button. Defaults to "Dismiss". */
+    dismissLabel?: string;
 }
-export declare function ErrorBanner({ message, tone, className }: ErrorBannerProps): import("react").JSX.Element;
+export declare function ErrorBanner({ message, title, tone, className, icon, action, onDismiss, dismissLabel, }: ErrorBannerProps): import("react").JSX.Element;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@diwauhris/ui",
   "private": false,
-  "version": "1.7.22",
+  "version": "1.7.23",
   "type": "module",
   "description": "DIWA UHRIS UI component library — React + Tailwind CSS",
   "keywords": [