@humain/ui 2.1.62 → 2.1.65

package/dist/index200.js

@@ -1,282 +1,258 @@
 import { cn } from "./index2.js";
-import { Button } from "./index5.js";
-import { ScrollArea } from "./index50.js";
+import { Progress } from "./index17.js";
 import { Avatar } from "./index70.js";
 import { cva } from "class-variance-authority";
-import { BellRing, Calendar, Clock, Settings, X } from "lucide-react";
-import { useMemo } from "react";
+import { AlertCircle, AlertTriangle, CheckCircle, Info, X } from "lucide-react";
+import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { motion, useReducedMotion } from "motion/react";
-//#region src/components/organisms/content/NotificationPanel/NotificationPanel.tsx
-var notificationDotVariants = cva("rounded-full shrink-0 bg-primary", {
-	variants: { size: {
-		sm: "size-2",
-		md: "size-2.5"
+//#region src/components/organisms/content/NotificationItem/NotificationItem.tsx
+var notificationItemVariants = cva("relative flex gap-4 items-start overflow-hidden p-4 rounded-xl border bg-card shadow-sm", {
+	variants: { variant: {
+		primary: "",
+		success: "",
+		warning: "",
+		error: "",
+		gray: "",
+		avatar: "",
+		image: "",
+		progress: "",
+		none: ""
 	} },
-	defaultVariants: { size: "sm" }
+	defaultVariants: { variant: "primary" }
 });
-function getHighlightedSegmentKey(segments, position) {
-	const offset = segments.slice(0, position).reduce((total, segment) => total + segment.text.length, 0);
-	const segment = segments[position];
-	return `${offset}:${segment.highlighted ? "highlight" : "plain"}:${segment.text}`;
-}
-function getNotificationActionKey(action) {
-	return `${action.primary ? "primary" : "secondary"}:${action.label}`;
-}
-var notificationItemVariants = {
-	hidden: {
-		opacity: 0,
-		y: 8
-	},
-	visible: {
-		opacity: 1,
-		y: 0,
-		transition: {
-			duration: .2,
-			ease: [
-				0,
-				0,
-				.2,
-				1
-			]
-		}
-	}
+var outlineIconVariants = cva("", {
+	variants: { variant: {
+		primary: "border-primary text-primary",
+		success: "border-success text-success",
+		warning: "border-warning text-warning",
+		error: "border-destructive text-destructive"
+	} },
+	defaultVariants: { variant: "primary" }
+});
+/** Featured icon with concentric circle outlines */
+var OutlineIcon = ({ variant }) => {
+	const iconClasses = outlineIconVariants({ variant });
+	const Icon = {
+		primary: Info,
+		success: CheckCircle,
+		warning: AlertTriangle,
+		error: AlertCircle
+	}[variant];
+	return /* @__PURE__ */ jsxs("div", {
+		className: "relative size-5 shrink-0",
+		children: [
+			/* @__PURE__ */ jsx("div", { className: cn("absolute -inset-[45%] rounded-full border-2 opacity-10", iconClasses) }),
+			/* @__PURE__ */ jsx("div", { className: cn("absolute -inset-[20%] rounded-full border-2 opacity-30", iconClasses) }),
+			/* @__PURE__ */ jsx(Icon, { className: cn("size-5", iconClasses) })
+		]
+	});
 };
-function NotificationPanelItem({ avatarSrc, avatarFallback, name, time, title, description, unread = true, showOnlineStatus = true, type = "message", meetingDate, meetingTime, actions, highlightedSegments, onClick, className }) {
-	return /* @__PURE__ */ jsxs(motion.li, {
-		"data-slot": "notification-panel-item",
-		className: cn("relative flex gap-3 items-start w-full rounded-lg list-none", "transition-colors duration-150 ease-out hover:bg-accent/50 motion-reduce:transition-none", className),
-		variants: notificationItemVariants,
-		children: [/* @__PURE__ */ jsx(Avatar, {
-			src: avatarSrc,
-			fallback: avatarFallback || name,
-			size: "lg",
-			indicator: showOnlineStatus ? "online" : void 0,
-			className: "shrink-0"
-		}), /* @__PURE__ */ jsxs("div", {
-			className: "flex-1 min-w-0 flex flex-col gap-3",
-			children: [
-				/* @__PURE__ */ jsxs("div", {
-					className: "flex flex-col gap-1",
-					children: [
-						/* @__PURE__ */ jsxs("div", {
-							className: "flex items-center gap-2 flex-wrap",
-							children: [/* @__PURE__ */ jsx("span", {
-								className: "text-sm font-medium text-secondary-foreground",
-								children: name
-							}), /* @__PURE__ */ jsx("span", {
-								className: "text-xs text-muted-foreground",
-								children: time
-							})]
-						}),
-						/* @__PURE__ */ jsxs("div", {
-							className: "flex items-center gap-2",
-							children: [unread && /* @__PURE__ */ jsx("span", {
-								className: cn(notificationDotVariants(), "animate-pulse motion-reduce:animate-none"),
-								"aria-hidden": "true"
-							}), /* @__PURE__ */ jsx("button", {
-								type: "button",
-								className: cn("text-sm font-bold text-secondary-foreground text-start", "cursor-pointer bg-transparent border-0 p-0", "after:absolute after:inset-0 after:rounded-lg", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:rounded-sm"),
-								onClick,
-								"aria-label": [
-									unread && "Unread",
-									type !== "message" && type,
-									"notification:",
-									title
-								].filter(Boolean).join(" "),
-								children: title
-							})]
-						}),
-						description && !highlightedSegments && /* @__PURE__ */ jsx("p", {
-							className: "text-sm text-muted-foreground line-clamp-2",
-							children: description
-						}),
-						highlightedSegments && /* @__PURE__ */ jsx("p", {
-							className: "text-sm text-muted-foreground line-clamp-2",
-							children: highlightedSegments.map((segment, position) => segment.highlighted ? /* @__PURE__ */ jsx("span", {
-								className: "font-medium text-primary",
-								children: segment.text
-							}, getHighlightedSegmentKey(highlightedSegments, position)) : /* @__PURE__ */ jsx("span", { children: segment.text }, getHighlightedSegmentKey(highlightedSegments, position)))
-						})
-					]
-				}),
-				type === "meeting" && (meetingDate || meetingTime) && /* @__PURE__ */ jsxs("div", {
-					className: "flex items-center gap-1 flex-wrap",
-					children: [meetingDate && /* @__PURE__ */ jsxs("div", {
-						className: "flex items-center gap-2 flex-1 min-w-0",
-						children: [/* @__PURE__ */ jsx(Calendar, { className: "size-5 text-muted-foreground shrink-0" }), /* @__PURE__ */ jsx("span", {
-							className: "text-sm text-muted-foreground truncate",
-							children: meetingDate
-						})]
-					}), meetingTime && /* @__PURE__ */ jsxs("div", {
-						className: "flex items-center gap-2 flex-1 min-w-0",
-						children: [/* @__PURE__ */ jsx(Clock, { className: "size-5 text-muted-foreground shrink-0" }), /* @__PURE__ */ jsx("span", {
-							className: "text-sm text-muted-foreground truncate",
-							children: meetingTime
-						})]
-					})]
-				}),
-				actions && actions.length > 0 && /* @__PURE__ */ jsx("div", {
-					className: "flex items-center gap-3 relative z-10",
-					children: actions.map((action) => /* @__PURE__ */ jsx(Button, {
-						appearance: "link",
-						variant: "primary",
-						size: "sm",
-						className: cn("min-h-11 px-1", action.primary ? "text-primary font-semibold" : "text-secondary-foreground font-semibold"),
-						onClick: action.onClick,
-						children: action.label
-					}, getNotificationActionKey(action)))
-				})
-			]
+/** Modern boxed featured icon */
+var BoxedIcon = ({ children }) => /* @__PURE__ */ jsx("div", {
+	className: "flex size-10 shrink-0 items-center justify-center rounded-lg border border-border bg-card shadow-sm",
+	children: /* @__PURE__ */ jsx("div", {
+		className: "text-secondary-foreground",
+		children
+	})
+});
+/** Close button */
+var CloseButton = ({ onClick }) => /* @__PURE__ */ jsx("button", {
+	type: "button",
+	onClick,
+	className: "absolute end-1 top-1 flex size-11 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:bg-accent hover:text-muted-foreground",
+	"aria-label": "Close notification",
+	children: /* @__PURE__ */ jsx(X, { className: "size-5" })
+});
+/** Action buttons */
+var ActionButtons = ({ primaryAction, secondaryAction, stacked = false }) => {
+	if (!primaryAction && !secondaryAction) return null;
+	if (stacked) return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col gap-2",
+		children: [primaryAction && /* @__PURE__ */ jsx("button", {
+			type: "button",
+			onClick: primaryAction.onClick,
+			className: "w-full rounded-lg bg-primary px-3 py-2 text-sm font-semibold text-primary-foreground hover:bg-primary/90 transition-colors duration-150 ease-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+			children: primaryAction.label
+		}), secondaryAction && /* @__PURE__ */ jsx("button", {
+			type: "button",
+			onClick: secondaryAction.onClick,
+			className: "w-full rounded-lg border border-border bg-card px-3 py-2 text-sm font-semibold text-secondary-foreground hover:bg-surface-2 transition-colors duration-150 ease-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+			children: secondaryAction.label
 		})]
 	});
-}
-NotificationPanelItem.displayName = "NotificationPanelItem";
-function NotificationSection({ title, children, className }) {
-	const prefersReducedMotion = useReducedMotion();
-	const sectionVariants = useMemo(() => ({ visible: { transition: { staggerChildren: prefersReducedMotion ? 0 : .05 } } }), [prefersReducedMotion]);
 	return /* @__PURE__ */ jsxs("div", {
-		"data-slot": "notification-section",
-		className: cn("flex flex-col gap-4", className),
-		children: [/* @__PURE__ */ jsxs("div", {
-			className: "flex flex-col gap-3",
-			children: [/* @__PURE__ */ jsx("h3", {
-				className: "text-sm font-medium text-secondary-foreground",
-				children: title
-			}), /* @__PURE__ */ jsx("div", {
-				className: "h-px bg-surface-2",
-				"aria-hidden": "true"
-			})]
-		}), /* @__PURE__ */ jsx(motion.ul, {
-			className: "flex flex-col gap-6",
-			initial: "hidden",
-			animate: "visible",
-			variants: sectionVariants,
-			children
+		className: "flex items-center gap-3",
+		children: [primaryAction && /* @__PURE__ */ jsx("button", {
+			type: "button",
+			onClick: primaryAction.onClick,
+			className: "min-h-9 py-1.5 text-sm font-semibold text-primary hover:text-primary/80 rounded-sm transition-colors duration-150 ease-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+			children: primaryAction.label
+		}), secondaryAction && /* @__PURE__ */ jsx("button", {
+			type: "button",
+			onClick: secondaryAction.onClick,
+			className: "min-h-9 py-1.5 text-sm font-semibold text-secondary-foreground hover:text-foreground rounded-sm transition-colors duration-150 ease-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+			children: secondaryAction.label
 		})]
 	});
-}
-NotificationSection.displayName = "NotificationSection";
-var headerLinkButtonClass = "min-h-11 px-1 text-primary font-normal";
-var notificationPanelVariants = cva("relative flex flex-col overflow-hidden", {
-	variants: { variant: {
-		desktop: "bg-muted border border-border rounded-3xl shadow-3xl",
-		mobile: "bg-background shadow-xl"
-	} },
-	defaultVariants: { variant: "desktop" }
-});
-function NotificationPanel({ title = "Notifications", variant = "desktop", onSettingsClick, onMarkAllRead, onClearAll, onClose, children, showOverlay = false, width = 573, height = 675, className }) {
-	const prefersReducedMotion = useReducedMotion();
-	const panelContent = /* @__PURE__ */ jsxs("section", {
-		"data-slot": "notification-panel",
-		"aria-label": title,
-		className: cn(notificationPanelVariants({ variant }), className),
-		style: {
-			width: variant === "desktop" ? width : "100%",
-			maxWidth: "100%",
-			height: variant === "desktop" ? height : "100%"
-		},
-		children: [/* @__PURE__ */ jsx("div", {
-			className: "flex flex-col pb-4",
-			children: /* @__PURE__ */ jsxs("div", {
-				className: "flex flex-col gap-6 px-6",
-				children: [
-					/* @__PURE__ */ jsxs("div", {
-						className: "flex gap-4 items-start pt-6",
-						children: [/* @__PURE__ */ jsx("div", {
-							className: "shrink-0 size-10 flex items-center justify-center bg-card/60 border border-border rounded-lg shadow-sm",
-							children: /* @__PURE__ */ jsx(motion.span, {
-								animate: prefersReducedMotion ? void 0 : { rotate: [
-									0,
-									12,
-									-10,
-									6,
-									-3,
-									0
-								] },
-								transition: {
-									duration: .6,
-									delay: .3,
-									ease: "easeOut"
-								},
-								className: "flex",
-								children: /* @__PURE__ */ jsx(BellRing, { className: "size-5 text-secondary-foreground" })
-							})
-						}), /* @__PURE__ */ jsx("div", {
-							className: "flex-1 flex flex-col gap-0.5 justify-center",
-							children: /* @__PURE__ */ jsx("h2", {
-								className: "text-xl font-semibold text-foreground",
-								children: title
-							})
-						})]
-					}),
-					/* @__PURE__ */ jsxs("div", {
-						className: "flex items-start justify-between",
-						children: [/* @__PURE__ */ jsx(Button, {
-							appearance: "link",
-							variant: "primary",
-							size: "sm",
-							className: headerLinkButtonClass,
-							startIcon: /* @__PURE__ */ jsx(Settings, { className: "size-5" }),
-							onClick: onSettingsClick,
-							children: "Settings"
-						}), /* @__PURE__ */ jsxs("div", {
-							className: "flex items-start gap-1",
-							children: [
-								/* @__PURE__ */ jsx(Button, {
-									appearance: "link",
-									variant: "primary",
-									size: "sm",
-									className: headerLinkButtonClass,
-									onClick: onMarkAllRead,
-									children: "Mark all read"
-								}),
-								/* @__PURE__ */ jsx("div", {
-									className: "size-6 flex items-center justify-center self-center",
-									children: /* @__PURE__ */ jsx("div", { className: "w-px h-5 bg-surface-2" })
-								}),
-								/* @__PURE__ */ jsx(Button, {
-									appearance: "link",
-									variant: "primary",
-									size: "sm",
-									className: headerLinkButtonClass,
-									onClick: onClearAll,
-									children: "Clear all"
-								})
-							]
-						})]
-					}),
-					/* @__PURE__ */ jsx(Button, {
-						appearance: "ghost",
-						variant: "secondary",
-						size: "icon",
-						"aria-label": "Close notifications",
-						className: "absolute top-3 end-4 size-10 text-muted-foreground hover:text-foreground transition-colors duration-150 ease-out [&_svg]:transition-transform [&_svg]:duration-200 [&_svg]:ease-out hover:[&_svg]:rotate-90 motion-reduce:[&_svg]:transition-none",
-						onClick: onClose,
-						children: /* @__PURE__ */ jsx(X, { className: "size-5" })
-					})
-				]
+};
+function NotificationLeadingElement({ variant, icon, avatarProps, imageSrc, imageAlt }) {
+	switch (variant) {
+		case "primary":
+		case "success":
+		case "warning":
+		case "error": return /* @__PURE__ */ jsx(OutlineIcon, { variant });
+		case "gray": return icon ? /* @__PURE__ */ jsx(BoxedIcon, { children: icon }) : /* @__PURE__ */ jsx(BoxedIcon, { children: /* @__PURE__ */ jsx(Info, { className: "size-5" }) });
+		case "avatar": return /* @__PURE__ */ jsx("div", {
+			className: "relative",
+			children: /* @__PURE__ */ jsx(Avatar, {
+				size: "md",
+				indicator: "online",
+				...avatarProps
 			})
-		}), /* @__PURE__ */ jsx(ScrollArea, {
-			className: "flex-1 min-h-0",
-			children: /* @__PURE__ */ jsx("div", {
-				className: "flex flex-col gap-4 px-6 pb-6",
-				"aria-live": "polite",
-				children
+		});
+		case "image": return imageSrc ? /* @__PURE__ */ jsx("div", {
+			className: "size-[72px] shrink-0 overflow-hidden rounded-lg",
+			children: /* @__PURE__ */ jsx("img", {
+				src: imageSrc,
+				alt: imageAlt || "Notification image",
+				loading: "lazy",
+				className: "size-full object-cover"
+			})
+		}) : null;
+		case "progress": return icon ? /* @__PURE__ */ jsx(BoxedIcon, { children: icon }) : /* @__PURE__ */ jsx(BoxedIcon, { children: /* @__PURE__ */ jsx(Info, { className: "size-5" }) });
+		default: return null;
+	}
+}
+function NotificationContent({ variant, title, supportingText, timestamp, imageSrc, imageAlt, progressValue, progressLabel, primaryAction, secondaryAction, stackedActions }) {
+	const hasActions = primaryAction || secondaryAction;
+	if (variant === "progress") return /* @__PURE__ */ jsxs("div", {
+		className: "flex min-w-0 flex-1 flex-col gap-4 pe-10",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col gap-1",
+				children: [/* @__PURE__ */ jsx("h3", {
+					className: "text-sm font-semibold text-foreground",
+					children: title
+				}), supportingText && /* @__PURE__ */ jsx("p", {
+					className: "text-sm text-secondary-foreground",
+					children: supportingText
+				})]
+			}),
+			/* @__PURE__ */ jsx(Progress, {
+				value: progressValue,
+				size: "md",
+				showValue: true,
+				labelPosition: "inline",
+				valueFormat: (value) => progressLabel || `${value}%`
+			}),
+			hasActions && /* @__PURE__ */ jsx(ActionButtons, {
+				primaryAction,
+				secondaryAction,
+				stacked: stackedActions
 			})
+		]
+	});
+	if (variant === "avatar") return /* @__PURE__ */ jsxs("div", {
+		className: "flex min-w-0 flex-1 flex-col gap-3 pe-10",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col gap-1",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-2",
+				children: [/* @__PURE__ */ jsx("h3", {
+					className: "text-sm font-semibold text-foreground",
+					children: title
+				}), timestamp && /* @__PURE__ */ jsx("span", {
+					className: "text-sm text-text-quaternary",
+					children: timestamp
+				})]
+			}), supportingText && /* @__PURE__ */ jsx("p", {
+				className: "text-sm text-secondary-foreground",
+				children: supportingText
+			})]
+		}), hasActions && /* @__PURE__ */ jsx(ActionButtons, {
+			primaryAction,
+			secondaryAction,
+			stacked: stackedActions
 		})]
 	});
-	if (variant === "mobile" && showOverlay) return /* @__PURE__ */ jsxs("div", {
-		className: "relative flex items-start ps-6 h-full w-full",
-		children: [/* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-foreground/70 backdrop-blur" }), /* @__PURE__ */ jsx("div", {
-			className: "relative flex-1 h-full",
-			children: panelContent
+	if (variant === "image") return /* @__PURE__ */ jsxs("div", {
+		className: "flex min-w-0 flex-1 flex-col gap-3 pe-10",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col gap-1",
+				children: [/* @__PURE__ */ jsx("h3", {
+					className: "text-sm font-semibold text-foreground",
+					children: title
+				}), supportingText && /* @__PURE__ */ jsx("p", {
+					className: "text-sm text-secondary-foreground",
+					children: supportingText
+				})]
+			}),
+			imageSrc && /* @__PURE__ */ jsx("div", {
+				className: "w-full aspect-video overflow-hidden rounded-lg",
+				children: /* @__PURE__ */ jsx("img", {
+					src: imageSrc,
+					alt: imageAlt || "Notification image",
+					loading: "lazy",
+					className: "size-full object-cover"
+				})
+			}),
+			hasActions && /* @__PURE__ */ jsx(ActionButtons, {
+				primaryAction,
+				secondaryAction,
+				stacked: stackedActions
+			})
+		]
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex min-w-0 flex-1 flex-col gap-3 pe-10 pt-0.5",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col gap-1",
+			children: [/* @__PURE__ */ jsx("h3", {
+				className: "text-sm font-semibold text-foreground",
+				children: title
+			}), supportingText && /* @__PURE__ */ jsx("p", {
+				className: "text-sm text-secondary-foreground",
+				children: supportingText
+			})]
+		}), hasActions && /* @__PURE__ */ jsx(ActionButtons, {
+			primaryAction,
+			secondaryAction
 		})]
 	});
-	return panelContent;
 }
-NotificationPanel.displayName = "NotificationPanel";
+var NotificationItem = React.memo(function NotificationItem({ variant = "primary", title, supportingText, showCloseButton = true, onClose, primaryAction, secondaryAction, icon, avatarProps, timestamp, imageSrc, imageAlt, progressValue = 0, progressLabel, stackedActions = false, className, ...props }) {
+	return /* @__PURE__ */ jsxs("article", {
+		"data-slot": "notification-item",
+		className: cn(notificationItemVariants({ variant }), "transition-shadow duration-200 ease-out hover:shadow-md motion-reduce:transition-none", className),
+		...props,
+		children: [
+			/* @__PURE__ */ jsx(NotificationLeadingElement, {
+				variant,
+				icon,
+				avatarProps,
+				imageSrc,
+				imageAlt
+			}),
+			/* @__PURE__ */ jsx(NotificationContent, {
+				variant,
+				title,
+				supportingText,
+				timestamp,
+				imageSrc,
+				imageAlt,
+				progressValue,
+				progressLabel,
+				primaryAction,
+				secondaryAction,
+				stackedActions
+			}),
+			showCloseButton && /* @__PURE__ */ jsx(CloseButton, { onClick: onClose })
+		]
+	});
+});
+NotificationItem.displayName = "NotificationItem";
 //#endregion
-export { NotificationPanel, NotificationPanelItem, NotificationSection, notificationDotVariants, notificationPanelVariants };
+export { NotificationItem, notificationItemVariants };
 
 //# sourceMappingURL=index200.js.map

package/dist/index200.js.map

@@ -1 +1 @@
-{"version":3,"file":"index200.js","names":[],"sources":["../src/components/organisms/content/NotificationPanel/NotificationPanel.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport { BellRing, Calendar, Clock, Settings, X } from 'lucide-react';\nimport { motion, useReducedMotion } from 'motion/react';\nimport type * as React from 'react';\nimport { useMemo } from 'react';\nimport { Button } from '@/components/atoms/buttons/Button';\nimport { ScrollArea } from '@/components/atoms/layout/ScrollArea';\nimport { Avatar } from '@/components/molecules/data/Avatar';\nimport { cn } from '@/lib/utils';\n\n// Notification dot variant\nconst notificationDotVariants = cva('rounded-full shrink-0 bg-primary', {\n  variants: {\n    size: {\n      sm: 'size-2',\n      md: 'size-2.5',\n    },\n  },\n  defaultVariants: {\n    size: 'sm',\n  },\n});\n\n// Notification item types\nexport type NotificationPanelItemType =\n  | 'message'\n  | 'meeting'\n  | 'task'\n  | 'system';\n\nexport interface NotificationPanelAction {\n  /** Label for the action button */\n  label: string;\n  /** Callback when action is clicked */\n  onClick?: () => void;\n  /** Whether this is the primary action */\n  primary?: boolean;\n}\n\nexport interface NotificationPanelItemProps {\n  /** Unique identifier for the notification */\n  id: string;\n  /** Avatar image source */\n  avatarSrc?: string;\n  /** Avatar fallback text (for initials) */\n  avatarFallback?: string;\n  /** Name of the sender/source */\n  name: string;\n  /** Time since notification was received */\n  time: string;\n  /** Title/heading of the notification */\n  title: string;\n  /** Description/body text */\n  description?: string;\n  /** Whether the notification is unread */\n  unread?: boolean;\n  /** Show online status indicator on avatar */\n  showOnlineStatus?: boolean;\n  /** Type of notification */\n  type?: NotificationPanelItemType;\n  /** Meeting date (for meeting type) */\n  meetingDate?: string;\n  /** Meeting time (for meeting type) */\n  meetingTime?: string;\n  /** Actions available for this notification */\n  actions?: NotificationPanelAction[];\n  /** Highlighted text segments in description */\n  highlightedSegments?: Array<{\n    text: string;\n    highlighted: boolean;\n  }>;\n  /** Callback when notification item is clicked */\n  onClick?: () => void;\n  /** Additional CSS classes */\n  className?: string;\n}\n\ntype NotificationHighlightedSegment = NonNullable<\n  NotificationPanelItemProps['highlightedSegments']\n>[number];\n\nfunction getHighlightedSegmentKey(\n  segments: NotificationHighlightedSegment[],\n  position: number,\n): React.Key {\n  const offset = segments\n    .slice(0, position)\n    .reduce((total, segment) => total + segment.text.length, 0);\n  const segment = segments[position];\n\n  return `${offset}:${segment.highlighted ? 'highlight' : 'plain'}:${segment.text}`;\n}\n\nfunction getNotificationActionKey(action: NotificationPanelAction): React.Key {\n  return `${action.primary ? 'primary' : 'secondary'}:${action.label}`;\n}\n\nconst notificationItemVariants = {\n  hidden: { opacity: 0, y: 8 },\n  visible: {\n    opacity: 1,\n    y: 0,\n    transition: { duration: 0.2, ease: [0, 0, 0.2, 1] as const },\n  },\n};\n\nfunction NotificationPanelItem({\n  avatarSrc,\n  avatarFallback,\n  name,\n  time,\n  title,\n  description,\n  unread = true,\n  showOnlineStatus = true,\n  type = 'message',\n  meetingDate,\n  meetingTime,\n  actions,\n  highlightedSegments,\n  onClick,\n  className,\n}: NotificationPanelItemProps) {\n  return (\n    <motion.li\n      data-slot=\"notification-panel-item\"\n      className={cn(\n        'relative flex gap-3 items-start w-full rounded-lg list-none',\n        'transition-colors duration-150 ease-out hover:bg-accent/50 motion-reduce:transition-none',\n        className,\n      )}\n      variants={notificationItemVariants}\n    >\n      {/* Avatar */}\n      <Avatar\n        src={avatarSrc}\n        fallback={avatarFallback || name}\n        size=\"lg\"\n        indicator={showOnlineStatus ? 'online' : undefined}\n        className=\"shrink-0\"\n      />\n\n      {/* Content */}\n      <div className=\"flex-1 min-w-0 flex flex-col gap-3\">\n        {/* Text content */}\n        <div className=\"flex flex-col gap-1\">\n          {/* Name and time row */}\n          <div className=\"flex items-center gap-2 flex-wrap\">\n            <span className=\"text-sm font-medium text-secondary-foreground\">\n              {name}\n            </span>\n            <span className=\"text-xs text-muted-foreground\">{time}</span>\n          </div>\n\n          {/* Title — card-link pattern: button stretches over item via ::after */}\n          <div className=\"flex items-center gap-2\">\n            {unread && (\n              <span\n                className={cn(\n                  notificationDotVariants(),\n                  'animate-pulse motion-reduce:animate-none',\n                )}\n                aria-hidden=\"true\"\n              />\n            )}\n            <button\n              type=\"button\"\n              className={cn(\n                'text-sm font-bold text-secondary-foreground text-start',\n                'cursor-pointer bg-transparent border-0 p-0',\n                'after:absolute after:inset-0 after:rounded-lg',\n                'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:rounded-sm',\n              )}\n              onClick={onClick}\n              aria-label={[\n                unread && 'Unread',\n                type !== 'message' && type,\n                'notification:',\n                title,\n              ]\n                .filter(Boolean)\n                .join(' ')}\n            >\n              {title}\n            </button>\n          </div>\n\n          {/* Description */}\n          {description && !highlightedSegments && (\n            <p className=\"text-sm text-muted-foreground line-clamp-2\">\n              {description}\n            </p>\n          )}\n\n          {/* Highlighted description */}\n          {highlightedSegments && (\n            <p className=\"text-sm text-muted-foreground line-clamp-2\">\n              {highlightedSegments.map((segment, position) =>\n                segment.highlighted ? (\n                  <span\n                    key={getHighlightedSegmentKey(\n                      highlightedSegments,\n                      position,\n                    )}\n                    className=\"font-medium text-primary\"\n                  >\n                    {segment.text}\n                  </span>\n                ) : (\n                  <span\n                    key={getHighlightedSegmentKey(\n                      highlightedSegments,\n                      position,\n                    )}\n                  >\n                    {segment.text}\n                  </span>\n                ),\n              )}\n            </p>\n          )}\n        </div>\n\n        {/* Meeting details (for meeting type) */}\n        {type === 'meeting' && (meetingDate || meetingTime) && (\n          <div className=\"flex items-center gap-1 flex-wrap\">\n            {meetingDate && (\n              <div className=\"flex items-center gap-2 flex-1 min-w-0\">\n                <Calendar className=\"size-5 text-muted-foreground shrink-0\" />\n                <span className=\"text-sm text-muted-foreground truncate\">\n                  {meetingDate}\n                </span>\n              </div>\n            )}\n            {meetingTime && (\n              <div className=\"flex items-center gap-2 flex-1 min-w-0\">\n                <Clock className=\"size-5 text-muted-foreground shrink-0\" />\n                <span className=\"text-sm text-muted-foreground truncate\">\n                  {meetingTime}\n                </span>\n              </div>\n            )}\n          </div>\n        )}\n\n        {/* Actions — elevated above the card-link overlay */}\n        {actions && actions.length > 0 && (\n          <div className=\"flex items-center gap-3 relative z-10\">\n            {actions.map((action) => (\n              <Button\n                key={getNotificationActionKey(action)}\n                appearance=\"link\"\n                variant=\"primary\"\n                size=\"sm\"\n                className={cn(\n                  'min-h-11 px-1',\n                  action.primary\n                    ? 'text-primary font-semibold'\n                    : 'text-secondary-foreground font-semibold',\n                )}\n                onClick={action.onClick}\n              >\n                {action.label}\n              </Button>\n            ))}\n          </div>\n        )}\n      </div>\n    </motion.li>\n  );\n}\n\nNotificationPanelItem.displayName = 'NotificationPanelItem';\n\n// Notification section for grouping notifications by date\nexport interface NotificationSectionProps {\n  /** Section title (e.g., \"Today\", \"Previous\") */\n  title: string;\n  /** Notifications in this section */\n  children: React.ReactNode;\n  /** Additional CSS classes */\n  className?: string;\n}\n\nfunction NotificationSection({\n  title,\n  children,\n  className,\n}: NotificationSectionProps) {\n  const prefersReducedMotion = useReducedMotion();\n\n  const sectionVariants = useMemo(\n    () => ({\n      visible: {\n        transition: {\n          staggerChildren: prefersReducedMotion ? 0 : 0.05,\n        },\n      },\n    }),\n    [prefersReducedMotion],\n  );\n\n  return (\n    <div\n      data-slot=\"notification-section\"\n      className={cn('flex flex-col gap-4', className)}\n    >\n      <div className=\"flex flex-col gap-3\">\n        <h3 className=\"text-sm font-medium text-secondary-foreground\">\n          {title}\n        </h3>\n        <div className=\"h-px bg-surface-2\" aria-hidden=\"true\" />\n      </div>\n      <motion.ul\n        className=\"flex flex-col gap-6\"\n        initial=\"hidden\"\n        animate=\"visible\"\n        variants={sectionVariants}\n      >\n        {children}\n      </motion.ul>\n    </div>\n  );\n}\n\nNotificationSection.displayName = 'NotificationSection';\n\nconst headerLinkButtonClass = 'min-h-11 px-1 text-primary font-normal';\n\n// Main NotificationPanel component\nconst notificationPanelVariants = cva(\n  'relative flex flex-col overflow-hidden',\n  {\n    variants: {\n      variant: {\n        desktop: 'bg-muted border border-border rounded-3xl shadow-3xl',\n        mobile: 'bg-background shadow-xl',\n      },\n    },\n    defaultVariants: {\n      variant: 'desktop',\n    },\n  },\n);\n\nexport interface NotificationPanelProps\n  extends VariantProps<typeof notificationPanelVariants> {\n  /** Title of the panel */\n  title?: string;\n  /** Callback when settings button is clicked */\n  onSettingsClick?: () => void;\n  /** Callback when \"Mark all read\" is clicked */\n  onMarkAllRead?: () => void;\n  /** Callback when \"Clear all\" is clicked */\n  onClearAll?: () => void;\n  /** Callback when close button is clicked */\n  onClose?: () => void;\n  /** Panel content (NotificationSection or NotificationItem components) */\n  children: React.ReactNode;\n  /** Whether to show overlay background (mobile variant) */\n  showOverlay?: boolean;\n  /** Fixed width for desktop variant */\n  width?: number;\n  /** Fixed height for the panel */\n  height?: number;\n  /** Additional CSS classes */\n  className?: string;\n}\n\nfunction NotificationPanel({\n  title = 'Notifications',\n  variant = 'desktop',\n  onSettingsClick,\n  onMarkAllRead,\n  onClearAll,\n  onClose,\n  children,\n  showOverlay = false,\n  width = 573,\n  height = 675,\n  className,\n}: NotificationPanelProps) {\n  const prefersReducedMotion = useReducedMotion();\n  const panelContent = (\n    <section\n      data-slot=\"notification-panel\"\n      aria-label={title}\n      className={cn(notificationPanelVariants({ variant }), className)}\n      style={{\n        width: variant === 'desktop' ? width : '100%',\n        maxWidth: '100%',\n        height: variant === 'desktop' ? height : '100%',\n      }}\n    >\n      {/* Header */}\n      <div className=\"flex flex-col pb-4\">\n        <div className=\"flex flex-col gap-6 px-6\">\n          {/* Title row */}\n          <div className=\"flex gap-4 items-start pt-6\">\n            {/* Featured icon */}\n            <div className=\"shrink-0 size-10 flex items-center justify-center bg-card/60 border border-border rounded-lg shadow-sm\">\n              <motion.span\n                animate={\n                  prefersReducedMotion\n                    ? undefined\n                    : { rotate: [0, 12, -10, 6, -3, 0] }\n                }\n                transition={{ duration: 0.6, delay: 0.3, ease: 'easeOut' }}\n                className=\"flex\"\n              >\n                <BellRing className=\"size-5 text-secondary-foreground\" />\n              </motion.span>\n            </div>\n            {/* Title */}\n            <div className=\"flex-1 flex flex-col gap-0.5 justify-center\">\n              <h2 className=\"text-xl font-semibold text-foreground\">{title}</h2>\n            </div>\n          </div>\n\n          {/* Actions row */}\n          <div className=\"flex items-start justify-between\">\n            <Button\n              appearance=\"link\"\n              variant=\"primary\"\n              size=\"sm\"\n              className={headerLinkButtonClass}\n              startIcon={<Settings className=\"size-5\" />}\n              onClick={onSettingsClick}\n            >\n              Settings\n            </Button>\n            <div className=\"flex items-start gap-1\">\n              <Button\n                appearance=\"link\"\n                variant=\"primary\"\n                size=\"sm\"\n                className={headerLinkButtonClass}\n                onClick={onMarkAllRead}\n              >\n                Mark all read\n              </Button>\n              <div className=\"size-6 flex items-center justify-center self-center\">\n                <div className=\"w-px h-5 bg-surface-2\" />\n              </div>\n              <Button\n                appearance=\"link\"\n                variant=\"primary\"\n                size=\"sm\"\n                className={headerLinkButtonClass}\n                onClick={onClearAll}\n              >\n                Clear all\n              </Button>\n            </div>\n          </div>\n\n          {/* Close button */}\n          <Button\n            appearance=\"ghost\"\n            variant=\"secondary\"\n            size=\"icon\"\n            aria-label=\"Close notifications\"\n            className=\"absolute top-3 end-4 size-10 text-muted-foreground hover:text-foreground transition-colors duration-150 ease-out [&_svg]:transition-transform [&_svg]:duration-200 [&_svg]:ease-out hover:[&_svg]:rotate-90 motion-reduce:[&_svg]:transition-none\"\n            onClick={onClose}\n          >\n            <X className=\"size-5\" />\n          </Button>\n        </div>\n      </div>\n\n      {/* Content */}\n      <ScrollArea className=\"flex-1 min-h-0\">\n        <div className=\"flex flex-col gap-4 px-6 pb-6\" aria-live=\"polite\">\n          {children}\n        </div>\n      </ScrollArea>\n    </section>\n  );\n\n  // For mobile with overlay\n  if (variant === 'mobile' && showOverlay) {\n    return (\n      <div className=\"relative flex items-start ps-6 h-full w-full\">\n        {/* Backdrop overlay */}\n        <div className=\"absolute inset-0 bg-foreground/70 backdrop-blur\" />\n        {/* Panel */}\n        <div className=\"relative flex-1 h-full\">{panelContent}</div>\n      </div>\n    );\n  }\n\n  return panelContent;\n}\n\nNotificationPanel.displayName = 'NotificationPanel';\n\nexport {\n  NotificationPanel,\n  NotificationPanelItem,\n  NotificationSection,\n  notificationDotVariants,\n  notificationPanelVariants,\n};\n"],"mappings":"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"}
+{"version":3,"file":"index200.js","names":[],"sources":["../src/components/organisms/content/NotificationItem/NotificationItem.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport { AlertCircle, AlertTriangle, CheckCircle, Info, X } from 'lucide-react';\nimport * as React from 'react';\nimport { Progress } from '@/components/atoms/display/Progress';\nimport type { AvatarProps } from '@/components/molecules/data/Avatar';\nimport { Avatar } from '@/components/molecules/data/Avatar';\nimport { cn } from '@/lib/utils';\n\nconst notificationItemVariants = cva(\n  'relative flex gap-4 items-start overflow-hidden p-4 rounded-xl border bg-card shadow-sm',\n  {\n    variants: {\n      variant: {\n        primary: '',\n        success: '',\n        warning: '',\n        error: '',\n        gray: '',\n        avatar: '',\n        image: '',\n        progress: '',\n        none: '',\n      },\n    },\n    defaultVariants: {\n      variant: 'primary',\n    },\n  },\n);\n\n// Featured icon with concentric circle outlines (for primary, success, warning, error)\nconst outlineIconVariants = cva('', {\n  variants: {\n    variant: {\n      primary: 'border-primary text-primary',\n      success: 'border-success text-success',\n      warning: 'border-warning text-warning',\n      error: 'border-destructive text-destructive',\n    },\n  },\n  defaultVariants: {\n    variant: 'primary',\n  },\n});\n\nexport type NotificationVariant = NonNullable<\n  VariantProps<typeof notificationItemVariants>['variant']\n>;\n\nexport interface NotificationAction {\n  /** Button label */\n  label: string;\n  /** Click handler */\n  onClick?: () => void;\n}\n\nexport interface NotificationItemProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {\n  /** Visual style variant */\n  variant?: NotificationVariant;\n  /** Notification title */\n  title: string;\n  /** Supporting description text */\n  supportingText?: string;\n  /** Show the close button */\n  showCloseButton?: boolean;\n  /** Callback when close button is clicked */\n  onClose?: () => void;\n  /** Primary action (displayed first, brand color) */\n  primaryAction?: NotificationAction;\n  /** Secondary action (displayed second, neutral color) */\n  secondaryAction?: NotificationAction;\n  /** Custom icon for gray variant */\n  icon?: React.ReactNode;\n  /** Avatar props for avatar variant */\n  avatarProps?: AvatarProps;\n  /** Timestamp for avatar variant */\n  timestamp?: string;\n  /** Image source for image variant */\n  imageSrc?: string;\n  /** Image alt text */\n  imageAlt?: string;\n  /** Progress value (0-100) for progress variant */\n  progressValue?: number;\n  /** Progress label for progress variant */\n  progressLabel?: string;\n  /** Stack action buttons vertically instead of horizontally */\n  stackedActions?: boolean;\n}\n\n/** Featured icon with concentric circle outlines */\nconst OutlineIcon = ({\n  variant,\n}: {\n  variant: 'primary' | 'success' | 'warning' | 'error';\n}) => {\n  const iconClasses = outlineIconVariants({ variant });\n\n  const Icon = {\n    primary: Info,\n    success: CheckCircle,\n    warning: AlertTriangle,\n    error: AlertCircle,\n  }[variant];\n\n  return (\n    <div className=\"relative size-5 shrink-0\">\n      {/* Outer ring */}\n      <div\n        className={cn(\n          'absolute -inset-[45%] rounded-full border-2 opacity-10',\n          iconClasses,\n        )}\n      />\n      {/* Inner ring */}\n      <div\n        className={cn(\n          'absolute -inset-[20%] rounded-full border-2 opacity-30',\n          iconClasses,\n        )}\n      />\n      {/* Icon */}\n      <Icon className={cn('size-5', iconClasses)} />\n    </div>\n  );\n};\n\n/** Modern boxed featured icon */\nconst BoxedIcon = ({ children }: { children: React.ReactNode }) => (\n  <div className=\"flex size-10 shrink-0 items-center justify-center rounded-lg border border-border bg-card shadow-sm\">\n    <div className=\"text-secondary-foreground\">{children}</div>\n  </div>\n);\n\n/** Close button */\nconst CloseButton = ({ onClick }: { onClick?: () => void }) => (\n  <button\n    type=\"button\"\n    onClick={onClick}\n    className=\"absolute end-1 top-1 flex size-11 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:bg-accent hover:text-muted-foreground\"\n    aria-label=\"Close notification\"\n  >\n    <X className=\"size-5\" />\n  </button>\n);\n\n/** Action buttons */\nconst ActionButtons = ({\n  primaryAction,\n  secondaryAction,\n  stacked = false,\n}: {\n  primaryAction?: NotificationAction;\n  secondaryAction?: NotificationAction;\n  stacked?: boolean;\n}) => {\n  if (!primaryAction && !secondaryAction) return null;\n\n  if (stacked) {\n    return (\n      <div className=\"flex flex-col gap-2\">\n        {primaryAction && (\n          <button\n            type=\"button\"\n            onClick={primaryAction.onClick}\n            className=\"w-full rounded-lg bg-primary px-3 py-2 text-sm font-semibold text-primary-foreground hover:bg-primary/90 transition-colors duration-150 ease-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-background\"\n          >\n            {primaryAction.label}\n          </button>\n        )}\n        {secondaryAction && (\n          <button\n            type=\"button\"\n            onClick={secondaryAction.onClick}\n            className=\"w-full rounded-lg border border-border bg-card px-3 py-2 text-sm font-semibold text-secondary-foreground hover:bg-surface-2 transition-colors duration-150 ease-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-background\"\n          >\n            {secondaryAction.label}\n          </button>\n        )}\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"flex items-center gap-3\">\n      {primaryAction && (\n        <button\n          type=\"button\"\n          onClick={primaryAction.onClick}\n          className=\"min-h-9 py-1.5 text-sm font-semibold text-primary hover:text-primary/80 rounded-sm transition-colors duration-150 ease-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-background\"\n        >\n          {primaryAction.label}\n        </button>\n      )}\n      {secondaryAction && (\n        <button\n          type=\"button\"\n          onClick={secondaryAction.onClick}\n          className=\"min-h-9 py-1.5 text-sm font-semibold text-secondary-foreground hover:text-foreground rounded-sm transition-colors duration-150 ease-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-background\"\n        >\n          {secondaryAction.label}\n        </button>\n      )}\n    </div>\n  );\n};\n\ninterface NotificationLeadingElementProps {\n  variant: NotificationVariant;\n  icon?: React.ReactNode;\n  avatarProps?: AvatarProps;\n  imageSrc?: string;\n  imageAlt?: string;\n}\n\nfunction NotificationLeadingElement({\n  variant,\n  icon,\n  avatarProps,\n  imageSrc,\n  imageAlt,\n}: NotificationLeadingElementProps) {\n  switch (variant) {\n    case 'primary':\n    case 'success':\n    case 'warning':\n    case 'error':\n      return <OutlineIcon variant={variant} />;\n\n    case 'gray':\n      return icon ? (\n        <BoxedIcon>{icon}</BoxedIcon>\n      ) : (\n        <BoxedIcon>\n          <Info className=\"size-5\" />\n        </BoxedIcon>\n      );\n\n    case 'avatar':\n      return (\n        <div className=\"relative\">\n          <Avatar size=\"md\" indicator=\"online\" {...avatarProps} />\n        </div>\n      );\n\n    case 'image':\n      return imageSrc ? (\n        <div className=\"size-[72px] shrink-0 overflow-hidden rounded-lg\">\n          <img\n            src={imageSrc}\n            alt={imageAlt || 'Notification image'}\n            loading=\"lazy\"\n            className=\"size-full object-cover\"\n          />\n        </div>\n      ) : null;\n\n    case 'progress':\n      return icon ? (\n        <BoxedIcon>{icon}</BoxedIcon>\n      ) : (\n        <BoxedIcon>\n          <Info className=\"size-5\" />\n        </BoxedIcon>\n      );\n\n    default:\n      return null;\n  }\n}\n\ninterface NotificationContentProps {\n  variant: NotificationVariant;\n  title: string;\n  supportingText?: string;\n  timestamp?: string;\n  imageSrc?: string;\n  imageAlt?: string;\n  progressValue: number;\n  progressLabel?: string;\n  primaryAction?: NotificationAction;\n  secondaryAction?: NotificationAction;\n  stackedActions: boolean;\n}\n\nfunction NotificationContent({\n  variant,\n  title,\n  supportingText,\n  timestamp,\n  imageSrc,\n  imageAlt,\n  progressValue,\n  progressLabel,\n  primaryAction,\n  secondaryAction,\n  stackedActions,\n}: NotificationContentProps) {\n  const hasActions = primaryAction || secondaryAction;\n\n  if (variant === 'progress') {\n    return (\n      <div className=\"flex min-w-0 flex-1 flex-col gap-4 pe-10\">\n        <div className=\"flex flex-col gap-1\">\n          <h3 className=\"text-sm font-semibold text-foreground\">{title}</h3>\n          {supportingText && (\n            <p className=\"text-sm text-secondary-foreground\">\n              {supportingText}\n            </p>\n          )}\n        </div>\n\n        <Progress\n          value={progressValue}\n          size=\"md\"\n          showValue\n          labelPosition=\"inline\"\n          valueFormat={(value) => progressLabel || `${value}%`}\n        />\n\n        {hasActions && (\n          <ActionButtons\n            primaryAction={primaryAction}\n            secondaryAction={secondaryAction}\n            stacked={stackedActions}\n          />\n        )}\n      </div>\n    );\n  }\n\n  if (variant === 'avatar') {\n    return (\n      <div className=\"flex min-w-0 flex-1 flex-col gap-3 pe-10\">\n        <div className=\"flex flex-col gap-1\">\n          <div className=\"flex items-center gap-2\">\n            <h3 className=\"text-sm font-semibold text-foreground\">{title}</h3>\n            {timestamp && (\n              <span className=\"text-sm text-text-quaternary\">{timestamp}</span>\n            )}\n          </div>\n          {supportingText && (\n            <p className=\"text-sm text-secondary-foreground\">\n              {supportingText}\n            </p>\n          )}\n        </div>\n\n        {hasActions && (\n          <ActionButtons\n            primaryAction={primaryAction}\n            secondaryAction={secondaryAction}\n            stacked={stackedActions}\n          />\n        )}\n      </div>\n    );\n  }\n\n  if (variant === 'image') {\n    return (\n      <div className=\"flex min-w-0 flex-1 flex-col gap-3 pe-10\">\n        <div className=\"flex flex-col gap-1\">\n          <h3 className=\"text-sm font-semibold text-foreground\">{title}</h3>\n          {supportingText && (\n            <p className=\"text-sm text-secondary-foreground\">\n              {supportingText}\n            </p>\n          )}\n        </div>\n\n        {imageSrc && (\n          <div className=\"w-full aspect-video overflow-hidden rounded-lg\">\n            <img\n              src={imageSrc}\n              alt={imageAlt || 'Notification image'}\n              loading=\"lazy\"\n              className=\"size-full object-cover\"\n            />\n          </div>\n        )}\n\n        {hasActions && (\n          <ActionButtons\n            primaryAction={primaryAction}\n            secondaryAction={secondaryAction}\n            stacked={stackedActions}\n          />\n        )}\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"flex min-w-0 flex-1 flex-col gap-3 pe-10 pt-0.5\">\n      <div className=\"flex flex-col gap-1\">\n        <h3 className=\"text-sm font-semibold text-foreground\">{title}</h3>\n        {supportingText && (\n          <p className=\"text-sm text-secondary-foreground\">{supportingText}</p>\n        )}\n      </div>\n\n      {hasActions && (\n        <ActionButtons\n          primaryAction={primaryAction}\n          secondaryAction={secondaryAction}\n        />\n      )}\n    </div>\n  );\n}\n\nconst NotificationItem = React.memo(function NotificationItem({\n  variant = 'primary',\n  title,\n  supportingText,\n  showCloseButton = true,\n  onClose,\n  primaryAction,\n  secondaryAction,\n  icon,\n  avatarProps,\n  timestamp,\n  imageSrc,\n  imageAlt,\n  progressValue = 0,\n  progressLabel,\n  stackedActions = false,\n  className,\n  ...props\n}: NotificationItemProps) {\n  return (\n    <article\n      data-slot=\"notification-item\"\n      className={cn(\n        notificationItemVariants({ variant }),\n        'transition-shadow duration-200 ease-out hover:shadow-md motion-reduce:transition-none',\n        className,\n      )}\n      {...props}\n    >\n      <NotificationLeadingElement\n        variant={variant}\n        icon={icon}\n        avatarProps={avatarProps}\n        imageSrc={imageSrc}\n        imageAlt={imageAlt}\n      />\n      <NotificationContent\n        variant={variant}\n        title={title}\n        supportingText={supportingText}\n        timestamp={timestamp}\n        imageSrc={imageSrc}\n        imageAlt={imageAlt}\n        progressValue={progressValue}\n        progressLabel={progressLabel}\n        primaryAction={primaryAction}\n        secondaryAction={secondaryAction}\n        stackedActions={stackedActions}\n      />\n      {showCloseButton && <CloseButton onClick={onClose} />}\n    </article>\n  );\n});\n\nNotificationItem.displayName = 'NotificationItem';\n\nexport { NotificationItem, notificationItemVariants };\n"],"mappings":"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"}