@openzeppelin/ui-components 3.2.0 → 3.3.0

package/dist/index.cjs

@@ -38,7 +38,7 @@ let sonner = require("sonner");
 let next_themes = require("next-themes");
 
 //#region src/version.ts
-const VERSION = "3.2.0";
+const VERSION = "3.3.0";
 
 //#endregion
 //#region src/components/ui/accordion.tsx
@@ -470,32 +470,55 @@ const variantStyles = {
 		icon: "text-red-600",
 		title: "text-red-900",
 		body: "text-red-800"
+	},
+	neutral: {
+		container: "border-border bg-muted/30",
+		icon: "text-muted-foreground",
+		title: "text-foreground",
+		body: "text-muted-foreground"
+	}
+};
+const sizeStyles = {
+	default: {
+		container: "p-4",
+		gap: "gap-3",
+		title: "mb-2 text-sm font-semibold",
+		body: "text-sm whitespace-pre-line",
+		dismissIcon: "h-5 w-5"
+	},
+	compact: {
+		container: "px-4 py-3",
+		gap: "gap-2",
+		title: "mb-1 text-xs font-medium",
+		body: "text-xs leading-relaxed whitespace-pre-line",
+		dismissIcon: "h-4 w-4"
 	}
 };
 /**
 * Dismissible banner component for notifications and alerts
-* Can be used with various variants (info, success, warning, error)
+* Can be used with various variants (info, success, warning, error, neutral)
 */
-const Banner = react.forwardRef(({ className, variant = "info", title, children, dismissible = true, onDismiss, icon }, ref) => {
-	const styles = variantStyles[variant] || variantStyles.info;
+const Banner = react.forwardRef(({ className, variant = "info", size = "default", title, children, dismissible = true, onDismiss, icon }, ref) => {
+	const styles = variantStyles[variant];
+	const sizing = sizeStyles[size];
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		ref,
 		role: "alert",
-		className: (0, _openzeppelin_ui_utils.cn)("rounded-md border p-4", styles.container, className),
+		className: (0, _openzeppelin_ui_utils.cn)("rounded-md border", sizing.container, styles.container, className),
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: "flex gap-3",
+			className: (0, _openzeppelin_ui_utils.cn)("flex", sizing.gap),
 			children: [
 				icon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 					className: (0, _openzeppelin_ui_utils.cn)("mt-0.5 shrink-0", styles.icon),
 					children: icon
 				}),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: "flex-1",
+					className: "min-w-0 flex-1",
 					children: [title && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("h4", {
-						className: (0, _openzeppelin_ui_utils.cn)("mb-2 font-semibold text-sm", styles.title),
+						className: (0, _openzeppelin_ui_utils.cn)(sizing.title, styles.title),
 						children: title
 					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						className: (0, _openzeppelin_ui_utils.cn)("text-sm whitespace-pre-line", styles.body),
+						className: (0, _openzeppelin_ui_utils.cn)(sizing.body, styles.body),
 						children
 					})]
 				}),
@@ -504,7 +527,7 @@ const Banner = react.forwardRef(({ className, variant = "info", title, children,
 					onClick: onDismiss,
 					className: (0, _openzeppelin_ui_utils.cn)("self-start shrink-0 transition-colors hover:opacity-70", styles.icon),
 					"aria-label": "Dismiss banner",
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.X, { className: "h-5 w-5" })
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.X, { className: sizing.dismissIcon })
 				})
 			]
 		})