@humain/ui 2.1.63 → 2.1.65

package/dist/index201.js

@@ -1,232 +1,282 @@
-import { cn, extractText } from "./index2.js";
-import { createSafeContext } from "./index21.js";
+import { cn } from "./index2.js";
+import { Button } from "./index5.js";
+import { ScrollArea } from "./index50.js";
+import { Avatar } from "./index70.js";
 import { cva } from "class-variance-authority";
-import { Check } from "lucide-react";
-import * as React from "react";
+import { BellRing, Calendar, Clock, Settings, X } from "lucide-react";
+import { useMemo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-//#region src/components/organisms/content/Steps/Steps.tsx
-var stepIndicatorVariants = cva("flex items-center justify-center shrink-0 size-[38px] font-medium text-lg transition-all duration-200 ease-out motion-reduce:transition-none", {
-	variants: {
-		shape: {
-			rounded: "rounded-lg",
-			round: "rounded-full"
-		},
-		status: {
-			complete: "bg-primary text-primary-foreground shadow-sm",
-			active: "bg-primary-foreground border-2 border-primary text-primary shadow-sm",
-			incomplete: "bg-accent text-muted-foreground"
-		}
-	},
-	defaultVariants: {
-		shape: "rounded",
-		status: "incomplete"
-	}
-});
-var stepConnectorVariants = cva("shrink-0 transition-colors duration-200 ease-out motion-reduce:transition-none", {
-	variants: {
-		orientation: {
-			horizontal: "h-0.5 flex-1 min-w-4 mx-2 mt-[18px]",
-			vertical: "w-0.5 h-[30px] my-1 ml-[18px]"
-		},
-		status: {
-			complete: "bg-primary",
-			incomplete: "bg-border"
-		}
-	},
-	defaultVariants: {
-		orientation: "horizontal",
-		status: "incomplete"
-	}
-});
-var stepLabelVariants = cva("text-base leading-6", {
-	variants: { status: {
-		complete: "text-card-foreground",
-		active: "text-card-foreground",
-		incomplete: "text-muted-foreground"
+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"
 	} },
-	defaultVariants: { status: "incomplete" }
+	defaultVariants: { size: "sm" }
 });
-var stepSubtextVariants = cva("text-sm leading-5 text-muted-foreground");
-var [StepsContext, useStepsContext] = createSafeContext("Steps");
-/** Per-item index context — injected by Steps parent via Children.map or flat API */
-var StepIndexContext = React.createContext(0);
-function StepIndicatorContent({ index, status, shape, bulletType }) {
-	if (bulletType === "icon") {
-		if (status === "complete") return /* @__PURE__ */ jsx(Check, { className: "size-[22px] delight-check-draw" });
-		if (status === "active") return /* @__PURE__ */ jsx("div", { className: cn("size-5 bg-primary", shape === "rounded" ? "rounded-sm" : "rounded-full") });
-		return /* @__PURE__ */ jsx("div", { className: "size-1.5 rounded-full bg-current" });
-	}
-	return index + 1;
-}
-function StepIndicator({ index, status, shape, bulletType }) {
-	return /* @__PURE__ */ jsx("div", {
-		"data-slot": "steps-indicator",
-		"aria-hidden": "true",
-		className: cn(stepIndicatorVariants({
-			shape,
-			status
-		}), status === "complete" && "delight-check-bounce", status === "active" && "delight-pulse-once"),
-		children: /* @__PURE__ */ jsx(StepIndicatorContent, {
-			index,
-			status,
-			shape,
-			bulletType
-		})
-	});
+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}`;
 }
-StepIndicator.displayName = "StepIndicator";
-function StepConnector({ orientation, isComplete }) {
-	return /* @__PURE__ */ jsx("div", {
-		"data-slot": "steps-connector",
-		"aria-hidden": "true",
-		className: cn(stepConnectorVariants({
-			orientation,
-			status: isComplete ? "complete" : "incomplete"
-		}), isComplete && "delight-connector-fill")
-	});
+function getNotificationActionKey(action) {
+	return `${action.primary ? "primary" : "secondary"}:${action.label}`;
 }
-StepConnector.displayName = "StepConnector";
-function StepsSubtext({ children, className }) {
-	return /* @__PURE__ */ jsx("span", {
-		"data-slot": "steps-subtext",
-		className: cn(stepSubtextVariants(), className),
-		children
+var notificationItemVariants = {
+	hidden: {
+		opacity: 0,
+		y: 8
+	},
+	visible: {
+		opacity: 1,
+		y: 0,
+		transition: {
+			duration: .2,
+			ease: [
+				0,
+				0,
+				.2,
+				1
+			]
+		}
+	}
+};
+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)))
+				})
+			]
+		})]
 	});
 }
-StepsSubtext.displayName = "Steps.Subtext";
-function StepsItem({ status: statusOverride, onClick, children, className }) {
-	const ctx = useStepsContext();
-	const index = React.useContext(StepIndexContext);
-	const status = statusOverride ?? ctx.getStepStatus(index);
-	const isFirst = index === 0;
-	const handleClick = onClick ?? (ctx.onStepClick ? () => ctx.onStepClick?.(index) : void 0);
-	let label = null;
-	let subtext = null;
-	React.Children.forEach(children, (child) => {
-		if (React.isValidElement(child) && child.type === StepsSubtext) subtext = child;
-		else if (child != null && child !== false) label = child;
-	});
-	const prevStepStatus = !isFirst ? ctx.getStepStatus(index - 1) : void 0;
-	const connector = !isFirst && /* @__PURE__ */ jsx(StepConnector, {
-		orientation: ctx.orientation,
-		isComplete: prevStepStatus === "complete"
-	});
-	const isHorizontal = ctx.orientation === "horizontal";
-	const indicator = /* @__PURE__ */ jsx(StepIndicator, {
-		index,
-		status,
-		shape: ctx.shape,
-		bulletType: ctx.bulletType
-	});
-	const labelElement = /* @__PURE__ */ jsxs("div", {
-		"data-slot": "steps-label",
-		className: cn("flex flex-col", isHorizontal ? "items-center gap-0.5 text-center w-0 whitespace-nowrap" : "items-start gap-0.5 ml-2.5"),
-		children: [/* @__PURE__ */ jsx("span", {
-			className: stepLabelVariants({ status }),
-			children: label
-		}), subtext]
-	});
-	const content = isHorizontal ? /* @__PURE__ */ jsxs("div", {
-		className: "flex w-full items-start",
-		children: [connector, /* @__PURE__ */ jsxs("div", {
-			className: "flex flex-col items-center",
-			children: [indicator, labelElement]
+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
 		})]
-	}) : /* @__PURE__ */ jsxs("div", {
-		className: "flex flex-col items-start",
-		children: [connector, /* @__PURE__ */ jsxs("div", {
-			className: "flex items-center",
-			children: [indicator, labelElement]
-		})]
-	});
-	const labelText = React.useMemo(() => extractText(label), [label]);
-	const statusSuffix = status === "complete" ? ", completed" : status === "active" ? ", current" : "";
-	return /* @__PURE__ */ jsx("li", {
-		"data-slot": "steps-item",
-		"aria-current": status === "active" ? "step" : void 0,
-		"aria-label": !handleClick && labelText ? `Step ${index + 1}: ${labelText}${statusSuffix}` : void 0,
-		className: cn(isHorizontal && !isFirst && "flex-1", !handleClick && className),
-		children: handleClick ? /* @__PURE__ */ jsx("button", {
-			type: "button",
-			onClick: handleClick,
-			"aria-label": `Step ${index + 1}: ${labelText || ""}${statusSuffix}`,
-			className: cn("cursor-pointer", isHorizontal && "w-full", className, "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-background rounded-sm"),
-			children: content
-		}) : content
 	});
 }
-StepsItem.displayName = "Steps.Item";
-/**
-* Steps displays a multi-step progress indicator for wizards and workflows.
-* Supports horizontal/vertical orientation, numbered or icon bullets, and clickable steps.
-*
-* @llms Wizard/workflow progress with horizontal/vertical layout, numbered or icon steps
-* @example
-* ```tsx
-* <Steps
-*   steps={[{ label: 'Details' }, { label: 'Payment' }, { label: 'Confirm' }]}
-*   currentStep={1}
-*   orientation="horizontal"
-* />
-* ```
-*/
-function Steps({ steps, currentStep = 0, orientation = "horizontal", shape = "rounded", bulletType = "text", onStepClick, children, className }) {
-	const getStepStatus = React.useCallback((index) => {
-		if (index < currentStep) return "complete";
-		if (index === currentStep) return "active";
-		return "incomplete";
-	}, [currentStep]);
-	const contextValue = React.useMemo(() => ({
-		orientation,
-		shape,
-		bulletType,
-		onStepClick,
-		getStepStatus
-	}), [
-		orientation,
-		shape,
-		bulletType,
-		onStepClick,
-		getStepStatus
-	]);
-	const useCompoundAPI = !steps && React.Children.count(children) > 0;
-	const renderFlatAPI = () => {
-		if (!steps || steps.length === 0) return null;
-		return steps.map((step, index) => /* @__PURE__ */ jsx(StepIndexContext.Provider, {
-			value: index,
-			children: /* @__PURE__ */ jsxs(StepsItem, { children: [step.label, step.subtext && /* @__PURE__ */ jsx(StepsSubtext, { children: step.subtext })] })
-		}, `${index}-${step.label}`));
-	};
-	const renderCompoundAPI = () => {
-		return React.Children.map(children, (child, index) => /* @__PURE__ */ jsx(StepIndexContext.Provider, {
-			value: index,
-			children: child
-		}));
-	};
-	return /* @__PURE__ */ jsx(StepsContext.Provider, {
-		value: contextValue,
-		children: /* @__PURE__ */ jsx("nav", {
-			"aria-label": "Progress steps",
-			"data-slot": "steps",
-			tabIndex: 0,
-			className: cn("overflow-x-auto focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring", className),
-			children: /* @__PURE__ */ jsx("ol", {
-				"data-slot": "steps-list",
-				className: cn("flex", orientation === "horizontal" ? "flex-row items-start" : "flex-col items-start"),
-				children: useCompoundAPI ? renderCompoundAPI() : renderFlatAPI()
+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" })
+					})
+				]
+			})
+		}), /* @__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
 			})
-		})
+		})]
+	});
+	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
+		})]
 	});
+	return panelContent;
 }
-Steps.displayName = "Steps";
-/**
-* @llms Wizard/workflow progress with horizontal/vertical layout, numbered or icon steps
-*/
-var StepsCompound = Object.assign(Steps, {
-	Item: StepsItem,
-	Subtext: StepsSubtext
-});
+NotificationPanel.displayName = "NotificationPanel";
 //#endregion
-export { StepsCompound as Steps, StepsCompound, StepsItem, StepsSubtext, stepConnectorVariants, stepIndicatorVariants, stepLabelVariants, stepSubtextVariants };
+export { NotificationPanel, NotificationPanelItem, NotificationSection, notificationDotVariants, notificationPanelVariants };
 
 //# sourceMappingURL=index201.js.map

package/dist/index201.js.map

@@ -1 +1 @@
-{"version":3,"file":"index201.js","names":[],"sources":["../src/components/organisms/content/Steps/Steps.tsx"],"sourcesContent":["import { cva } from 'class-variance-authority';\nimport { Check } from 'lucide-react';\nimport * as React from 'react';\nimport { createSafeContext } from '@/lib/create-safe-context';\nimport { cn, extractText } from '@/lib/utils';\n\n/* -----------------------------------------------------------------------------\n * Types\n * -------------------------------------------------------------------------- */\n\nexport type StepStatus = 'complete' | 'active' | 'incomplete';\n\nexport interface StepData {\n  label: string;\n  subtext?: string;\n}\n\nexport interface StepsProps {\n  /** Steps data for flat API */\n  steps?: StepData[];\n  /** Current step index (0-based) for flat API */\n  currentStep?: number;\n  /** Orientation of the steps */\n  orientation?: 'horizontal' | 'vertical';\n  /** Shape of step indicators */\n  shape?: 'rounded' | 'round';\n  /** Type of bullet content */\n  bulletType?: 'text' | 'icon';\n  /** Callback when a step is clicked */\n  onStepClick?: (index: number) => void;\n  /** Children for compound API */\n  children?: React.ReactNode;\n  /** Additional className */\n  className?: string;\n}\n\nexport interface StepsItemProps {\n  /** Override auto-calculated status */\n  status?: StepStatus;\n  /** Click handler for this step */\n  onClick?: () => void;\n  /** Step label content */\n  children: React.ReactNode;\n  /** Additional className */\n  className?: string;\n}\n\nexport interface StepsSubtextProps {\n  children: React.ReactNode;\n  className?: string;\n}\n\n/* -----------------------------------------------------------------------------\n * Variants\n * -------------------------------------------------------------------------- */\n\nconst stepIndicatorVariants = cva(\n  'flex items-center justify-center shrink-0 size-[38px] font-medium text-lg transition-all duration-200 ease-out motion-reduce:transition-none',\n  {\n    variants: {\n      shape: {\n        rounded: 'rounded-lg',\n        round: 'rounded-full',\n      },\n      status: {\n        complete: 'bg-primary text-primary-foreground shadow-sm',\n        active:\n          'bg-primary-foreground border-2 border-primary text-primary shadow-sm',\n        incomplete: 'bg-accent text-muted-foreground',\n      },\n    },\n    defaultVariants: {\n      shape: 'rounded',\n      status: 'incomplete',\n    },\n  },\n);\n\nconst stepConnectorVariants = cva(\n  'shrink-0 transition-colors duration-200 ease-out motion-reduce:transition-none',\n  {\n    variants: {\n      orientation: {\n        // Horizontal: fluid width fills available space; mt-[18px] centers 2px line with 38px indicator\n        horizontal: 'h-0.5 flex-1 min-w-4 mx-2 mt-[18px]',\n        // Vertical: fixed size, centered under 38px indicator\n        vertical: 'w-0.5 h-[30px] my-1 ml-[18px]',\n      },\n      status: {\n        complete: 'bg-primary',\n        incomplete: 'bg-border',\n      },\n    },\n    defaultVariants: {\n      orientation: 'horizontal',\n      status: 'incomplete',\n    },\n  },\n);\n\nconst stepLabelVariants = cva('text-base leading-6', {\n  variants: {\n    status: {\n      complete: 'text-card-foreground',\n      active: 'text-card-foreground',\n      incomplete: 'text-muted-foreground',\n    },\n  },\n  defaultVariants: {\n    status: 'incomplete',\n  },\n});\n\nconst stepSubtextVariants = cva('text-sm leading-5 text-muted-foreground');\n\n/* -----------------------------------------------------------------------------\n * Context\n * -------------------------------------------------------------------------- */\n\ninterface StepsContextValue {\n  orientation: 'horizontal' | 'vertical';\n  shape: 'rounded' | 'round';\n  bulletType: 'text' | 'icon';\n  onStepClick?: (index: number) => void;\n  getStepStatus: (index: number) => StepStatus;\n}\n\nconst [StepsContext, useStepsContext] =\n  createSafeContext<StepsContextValue>('Steps');\n\n/** Per-item index context — injected by Steps parent via Children.map or flat API */\nconst StepIndexContext = React.createContext<number>(0);\n\n/* -----------------------------------------------------------------------------\n * Sub-components\n * -------------------------------------------------------------------------- */\n\ninterface StepIndicatorProps {\n  index: number;\n  status: StepStatus;\n  shape: 'rounded' | 'round';\n  bulletType: 'text' | 'icon';\n}\n\nfunction StepIndicatorContent({\n  index,\n  status,\n  shape,\n  bulletType,\n}: StepIndicatorProps) {\n  if (bulletType === 'icon') {\n    if (status === 'complete') {\n      return <Check className=\"size-[22px] delight-check-draw\" />;\n    }\n    if (status === 'active') {\n      return (\n        <div\n          className={cn(\n            'size-5 bg-primary',\n            shape === 'rounded' ? 'rounded-sm' : 'rounded-full',\n          )}\n        />\n      );\n    }\n\n    return <div className=\"size-1.5 rounded-full bg-current\" />;\n  }\n\n  return index + 1;\n}\n\nfunction StepIndicator({\n  index,\n  status,\n  shape,\n  bulletType,\n}: StepIndicatorProps) {\n  return (\n    <div\n      data-slot=\"steps-indicator\"\n      aria-hidden=\"true\"\n      className={cn(\n        stepIndicatorVariants({ shape, status }),\n        status === 'complete' && 'delight-check-bounce',\n        status === 'active' && 'delight-pulse-once',\n      )}\n    >\n      <StepIndicatorContent\n        index={index}\n        status={status}\n        shape={shape}\n        bulletType={bulletType}\n      />\n    </div>\n  );\n}\n\nStepIndicator.displayName = 'StepIndicator';\n\ninterface StepConnectorProps {\n  orientation: 'horizontal' | 'vertical';\n  isComplete: boolean;\n}\n\nfunction StepConnector({ orientation, isComplete }: StepConnectorProps) {\n  return (\n    <div\n      data-slot=\"steps-connector\"\n      aria-hidden=\"true\"\n      className={cn(\n        stepConnectorVariants({\n          orientation,\n          status: isComplete ? 'complete' : 'incomplete',\n        }),\n        isComplete && 'delight-connector-fill',\n      )}\n    />\n  );\n}\n\nStepConnector.displayName = 'StepConnector';\n\nfunction StepsSubtext({ children, className }: StepsSubtextProps) {\n  return (\n    <span\n      data-slot=\"steps-subtext\"\n      className={cn(stepSubtextVariants(), className)}\n    >\n      {children}\n    </span>\n  );\n}\n\nStepsSubtext.displayName = 'Steps.Subtext';\n\nfunction StepsItem({\n  status: statusOverride,\n  onClick,\n  children,\n  className,\n}: StepsItemProps) {\n  const ctx = useStepsContext();\n  const index = React.useContext(StepIndexContext);\n  const status = statusOverride ?? ctx.getStepStatus(index);\n  const isFirst = index === 0;\n  const handleClick =\n    onClick ?? (ctx.onStepClick ? () => ctx.onStepClick?.(index) : undefined);\n\n  // Extract subtext from children\n  let label: React.ReactNode = null;\n  let subtext: React.ReactNode = null;\n\n  React.Children.forEach(children, (child) => {\n    if (React.isValidElement(child) && child.type === StepsSubtext) {\n      subtext = child;\n    } else if (child != null && child !== false) {\n      label = child;\n    }\n  });\n\n  // Connector colored based on previous step's completion (source step, not destination)\n  const prevStepStatus = !isFirst ? ctx.getStepStatus(index - 1) : undefined;\n  const connector = !isFirst && (\n    <StepConnector\n      orientation={ctx.orientation}\n      isComplete={prevStepStatus === 'complete'}\n    />\n  );\n\n  const isHorizontal = ctx.orientation === 'horizontal';\n\n  // Build indicator element\n  const indicator = (\n    <StepIndicator\n      index={index}\n      status={status}\n      shape={ctx.shape}\n      bulletType={ctx.bulletType}\n    />\n  );\n\n  // Build label element\n  // In horizontal mode, w-0 ensures the label doesn't affect the indicator column width.\n  // The text overflows visually (centered under the 38px indicator) but the layout\n  // width stays fixed, keeping all connectors equally spaced (matching Figma spec).\n  const labelElement = (\n    <div\n      data-slot=\"steps-label\"\n      className={cn(\n        'flex flex-col',\n        isHorizontal\n          ? 'items-center gap-0.5 text-center w-0 whitespace-nowrap'\n          : 'items-start gap-0.5 ml-2.5',\n      )}\n    >\n      <span className={stepLabelVariants({ status })}>{label}</span>\n      {subtext}\n    </div>\n  );\n\n  // Layout differs by orientation:\n  // - Horizontal: connector + (indicator column), items-start so indicators align at top\n  // - Vertical: connector above, indicator + label in row\n  const content = isHorizontal ? (\n    <div className=\"flex w-full items-start\">\n      {connector}\n      <div className=\"flex flex-col items-center\">\n        {indicator}\n        {labelElement}\n      </div>\n    </div>\n  ) : (\n    <div className=\"flex flex-col items-start\">\n      {connector}\n      <div className=\"flex items-center\">\n        {indicator}\n        {labelElement}\n      </div>\n    </div>\n  );\n\n  const labelText = React.useMemo(() => extractText(label), [label]);\n  const statusSuffix =\n    status === 'complete'\n      ? ', completed'\n      : status === 'active'\n        ? ', current'\n        : '';\n\n  return (\n    <li\n      data-slot=\"steps-item\"\n      aria-current={status === 'active' ? 'step' : undefined}\n      aria-label={\n        !handleClick && labelText\n          ? `Step ${index + 1}: ${labelText}${statusSuffix}`\n          : undefined\n      }\n      className={cn(\n        isHorizontal && !isFirst && 'flex-1',\n        !handleClick && className,\n      )}\n    >\n      {handleClick ? (\n        <button\n          type=\"button\"\n          onClick={handleClick}\n          aria-label={`Step ${index + 1}: ${labelText || ''}${statusSuffix}`}\n          className={cn(\n            'cursor-pointer',\n            isHorizontal && 'w-full',\n            className,\n            'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-background rounded-sm',\n          )}\n        >\n          {content}\n        </button>\n      ) : (\n        content\n      )}\n    </li>\n  );\n}\n\nStepsItem.displayName = 'Steps.Item';\n\n/* -----------------------------------------------------------------------------\n * Main Component\n * -------------------------------------------------------------------------- */\n\n/**\n * Steps displays a multi-step progress indicator for wizards and workflows.\n * Supports horizontal/vertical orientation, numbered or icon bullets, and clickable steps.\n *\n * @llms Wizard/workflow progress with horizontal/vertical layout, numbered or icon steps\n * @example\n * ```tsx\n * <Steps\n *   steps={[{ label: 'Details' }, { label: 'Payment' }, { label: 'Confirm' }]}\n *   currentStep={1}\n *   orientation=\"horizontal\"\n * />\n * ```\n */\nfunction Steps({\n  steps,\n  currentStep = 0,\n  orientation = 'horizontal',\n  shape = 'rounded',\n  bulletType = 'text',\n  onStepClick,\n  children,\n  className,\n}: StepsProps) {\n  const getStepStatus = React.useCallback(\n    (index: number): StepStatus => {\n      if (index < currentStep) return 'complete';\n      if (index === currentStep) return 'active';\n      return 'incomplete';\n    },\n    [currentStep],\n  );\n\n  const contextValue = React.useMemo<StepsContextValue>(\n    () => ({\n      orientation,\n      shape,\n      bulletType,\n      onStepClick,\n      getStepStatus,\n    }),\n    [orientation, shape, bulletType, onStepClick, getStepStatus],\n  );\n\n  // Determine if using flat API or compound API\n  const useCompoundAPI = !steps && React.Children.count(children) > 0;\n\n  const renderFlatAPI = () => {\n    if (!steps || steps.length === 0) return null;\n\n    return steps.map((step, index) => (\n      <StepIndexContext.Provider key={`${index}-${step.label}`} value={index}>\n        <StepsItem>\n          {step.label}\n          {step.subtext && <StepsSubtext>{step.subtext}</StepsSubtext>}\n        </StepsItem>\n      </StepIndexContext.Provider>\n    ));\n  };\n\n  const renderCompoundAPI = () => {\n    return React.Children.map(children, (child, index) => (\n      <StepIndexContext.Provider value={index}>\n        {child}\n      </StepIndexContext.Provider>\n    ));\n  };\n\n  return (\n    <StepsContext.Provider value={contextValue}>\n      <nav\n        aria-label=\"Progress steps\"\n        data-slot=\"steps\"\n        // biome-ignore lint/a11y/noNoninteractiveTabindex: Focusable scroll region satisfies axe scrollable-region-focusable.\n        tabIndex={0}\n        className={cn(\n          'overflow-x-auto focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring',\n          className,\n        )}\n      >\n        <ol\n          data-slot=\"steps-list\"\n          className={cn(\n            'flex',\n            orientation === 'horizontal'\n              ? 'flex-row items-start'\n              : 'flex-col items-start',\n          )}\n        >\n          {useCompoundAPI ? renderCompoundAPI() : renderFlatAPI()}\n        </ol>\n      </nav>\n    </StepsContext.Provider>\n  );\n}\n\nSteps.displayName = 'Steps';\n\n/* -----------------------------------------------------------------------------\n * Compound Export\n * -------------------------------------------------------------------------- */\n\n/**\n * @llms Wizard/workflow progress with horizontal/vertical layout, numbered or icon steps\n */\nexport const StepsCompound = Object.assign(Steps, {\n  Item: StepsItem,\n  Subtext: StepsSubtext,\n});\n\nexport {\n  StepsCompound as Steps,\n  StepsItem,\n  StepsSubtext,\n  stepConnectorVariants,\n  stepIndicatorVariants,\n  stepLabelVariants,\n  stepSubtextVariants,\n};\n"],"mappings":"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"}
+{"version":3,"file":"index201.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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"}