@diwauhris/ui 1.7.21 → 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
@@ -3976,16 +4006,21 @@ function Menu({ trigger, items, ariaLabel = "Menu", align = "right", open: contr
 			const panelHeight = panelRef.current?.offsetHeight ?? items.length * ROW_HEIGHT + HEADER_HEIGHT;
 			const spaceBelow = window.innerHeight - rect.bottom;
 			const flipUp = spaceBelow < panelHeight + GAP + MARGIN && rect.top > spaceBelow;
-			const panelWidth = Math.max(panelRef.current?.offsetWidth ?? 0, rect.width, PANEL_MIN_WIDTH);
-			const desiredLeft = align === "left" ? rect.left : rect.right - panelWidth;
-			const maxLeft = window.innerWidth - panelWidth - MARGIN;
-			const left = Math.min(Math.max(MARGIN, desiredLeft), Math.max(MARGIN, maxLeft));
+			const available = window.innerWidth - 16;
+			const horizontal = align === "left" ? {
+				left: Math.max(MARGIN, Math.min(rect.left, window.innerWidth - MARGIN)),
+				right: "auto"
+			} : {
+				right: Math.max(MARGIN, window.innerWidth - rect.right),
+				left: "auto"
+			};
 			setPanelStyle({
 				position: "fixed",
 				...flipUp ? { bottom: Math.max(MARGIN, window.innerHeight - rect.top + GAP) } : { top: rect.bottom + GAP },
-				left,
+				...horizontal,
 				zIndex: 9999,
-				minWidth: Math.max(rect.width, PANEL_MIN_WIDTH)
+				minWidth: PANEL_MIN_WIDTH,
+				maxWidth: available
 			});
 		};
 		reposition();

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
@@ -3952,16 +3982,21 @@ function Menu({ trigger, items, ariaLabel = "Menu", align = "right", open: contr
 			const panelHeight = panelRef.current?.offsetHeight ?? items.length * ROW_HEIGHT + HEADER_HEIGHT;
 			const spaceBelow = window.innerHeight - rect.bottom;
 			const flipUp = spaceBelow < panelHeight + GAP + MARGIN && rect.top > spaceBelow;
-			const panelWidth = Math.max(panelRef.current?.offsetWidth ?? 0, rect.width, PANEL_MIN_WIDTH);
-			const desiredLeft = align === "left" ? rect.left : rect.right - panelWidth;
-			const maxLeft = window.innerWidth - panelWidth - MARGIN;
-			const left = Math.min(Math.max(MARGIN, desiredLeft), Math.max(MARGIN, maxLeft));
+			const available = window.innerWidth - 16;
+			const horizontal = align === "left" ? {
+				left: Math.max(MARGIN, Math.min(rect.left, window.innerWidth - MARGIN)),
+				right: "auto"
+			} : {
+				right: Math.max(MARGIN, window.innerWidth - rect.right),
+				left: "auto"
+			};
 			setPanelStyle({
 				position: "fixed",
 				...flipUp ? { bottom: Math.max(MARGIN, window.innerHeight - rect.top + GAP) } : { top: rect.bottom + GAP },
-				left,
+				...horizontal,
 				zIndex: 9999,
-				minWidth: Math.max(rect.width, PANEL_MIN_WIDTH)
+				minWidth: PANEL_MIN_WIDTH,
+				maxWidth: available
 			});
 		};
 		reposition();

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.21",
+  "version": "1.7.23",
   "type": "module",
   "description": "DIWA UHRIS UI component library — React + Tailwind CSS",
   "keywords": [