@pitchfork-ui/react 0.2.0 → 0.6.0

package/dist/components/GaugeChart/GaugeChart2.js

@@ -7,8 +7,7 @@ var GaugeChart = forwardRef(function GaugeChart({ className, value, max = 100, c
 	const progress = max > 0 ? Math.min(Math.max(value, 0), max) / max : 0;
 	const radius = (size - strokeWidth) / 2;
 	const circumference = 2 * Math.PI * radius;
-	const filled = progress * circumference;
-	const gap = circumference - filled;
+	const offset = circumference - progress * circumference;
 	const center = size / 2;
 	const pct = Math.round(progress * 100);
 	const defaultLabel = `${pct}%`;
@@ -48,10 +47,12 @@ var GaugeChart = forwardRef(function GaugeChart({ className, value, max = 100, c
 				stroke: colorVar,
 				strokeWidth,
 				strokeLinecap: "round",
-				strokeDasharray: `${filled} ${gap}`,
+				strokeDasharray: circumference,
 				style: {
 					transform: "rotate(-90deg)",
-					transformOrigin: `${center}px ${center}px`
+					transformOrigin: `${center}px ${center}px`,
+					"--pf-gauge-circumference": circumference,
+					"--pf-gauge-offset": offset
 				},
 				className: "pf-gauge__fill"
 			})]

package/dist/components/Heatmap/Heatmap.css

@@ -0,0 +1,100 @@
+.pf-heatmap {
+  display: inline-block;
+  font-family: var(--font-family-sans);
+}
+
+.pf-heatmap__empty {
+  color: var(--color-semantic-text-muted);
+  font-size: var(--font-size-sm);
+  padding: var(--space-4);
+  text-align: center;
+}
+
+.pf-heatmap__body {
+  display: flex;
+  gap: var(--pf-heatmap-cell-gap);
+}
+
+.pf-heatmap__weekdays {
+  display: flex;
+  flex-direction: column;
+}
+
+.pf-heatmap__weekday-spacer {
+  display: block;
+  height: calc(var(--font-size-xs) + var(--space-1));
+}
+
+.pf-heatmap__weekday-grid {
+  display: grid;
+  grid-template-rows: repeat(7, var(--pf-heatmap-cell-size));
+  gap: var(--pf-heatmap-cell-gap);
+}
+
+.pf-heatmap__weekday {
+  align-items: center;
+  color: var(--pf-heatmap-label-color);
+  display: flex;
+  font-size: var(--font-size-xs);
+  line-height: 1;
+  padding-inline-end: var(--space-1);
+}
+
+.pf-heatmap__main {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+}
+
+.pf-heatmap__months {
+  display: grid;
+  gap: var(--pf-heatmap-cell-gap);
+  height: var(--font-size-xs);
+}
+
+.pf-heatmap__month {
+  color: var(--pf-heatmap-label-color);
+  font-size: var(--font-size-xs);
+  line-height: 1;
+}
+
+.pf-heatmap__grid {
+  display: grid;
+  grid-template-rows: repeat(7, var(--pf-heatmap-cell-size));
+  grid-auto-flow: column;
+  grid-auto-columns: var(--pf-heatmap-cell-size);
+  gap: var(--pf-heatmap-cell-gap);
+}
+
+.pf-heatmap__cell {
+  border-radius: var(--pf-heatmap-cell-radius);
+  height: var(--pf-heatmap-cell-size);
+  width: var(--pf-heatmap-cell-size);
+}
+
+.pf-heatmap__cell--empty {
+  background: transparent;
+}
+
+/* Staggered fade-in on mount — per-column animation-delay is set inline so
+   the grid wipes in left-to-right (oldest week → newest). */
+.pf-heatmap__cell {
+  animation: pf-heatmap-cell-in var(--duration-moderate) var(--easing-decelerate) both;
+}
+
+@keyframes pf-heatmap-cell-in {
+  from {
+    opacity: 0;
+    transform: scale(0.6);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .pf-heatmap__cell {
+    animation: none;
+  }
+}

package/dist/components/Heatmap/Heatmap2.js

@@ -0,0 +1,160 @@
+import { cx } from "../../utils/cx.js";
+import './Heatmap.css';/* empty css        */
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/Heatmap/Heatmap.tsx
+var MONTHS = [
+	"Jan",
+	"Feb",
+	"Mar",
+	"Apr",
+	"May",
+	"Jun",
+	"Jul",
+	"Aug",
+	"Sep",
+	"Oct",
+	"Nov",
+	"Dec"
+];
+var WEEKDAYS = [
+	"Sun",
+	"Mon",
+	"Tue",
+	"Wed",
+	"Thu",
+	"Fri",
+	"Sat"
+];
+function parseISO(s) {
+	const [y, m, d] = s.split("-").map(Number);
+	return new Date(y, m - 1, d);
+}
+function toISO(d) {
+	return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`;
+}
+function addDays(d, n) {
+	const r = new Date(d);
+	r.setDate(r.getDate() + n);
+	return r;
+}
+var Heatmap = forwardRef(function Heatmap({ className, data, startDate, endDate, levels = 5, weekStartsOn = 0, cellSize = 12, cellGap = 3, showWeekdayLabels = true, showMonthLabels = true, valueFormatter, label, emptyLabel = "No data", style, ...props }, ref) {
+	const sortedDates = data.map((d) => d.date).sort();
+	if (!Boolean(startDate || endDate || data.length)) return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: cx("pf-heatmap", className),
+		...props,
+		children: /* @__PURE__ */ jsx("div", {
+			className: "pf-heatmap__empty",
+			children: emptyLabel
+		})
+	});
+	const valueByDate = new Map(data.map((d) => [d.date, d.value]));
+	const maxValue = data.reduce((max, d) => Math.max(max, d.value), 0);
+	const total = data.reduce((sum, d) => sum + d.value, 0);
+	const levelCount = Math.max(2, levels);
+	const start = parseISO(startDate ?? sortedDates[0]);
+	const end = parseISO(endDate ?? sortedDates[sortedDates.length - 1]);
+	const gridStart = addDays(start, -((start.getDay() - weekStartsOn + 7) % 7));
+	const weeks = [];
+	let cursor = gridStart;
+	while (cursor <= end) {
+		const week = [];
+		for (let i = 0; i < 7; i++) {
+			week.push({
+				iso: toISO(cursor),
+				date: new Date(cursor),
+				inRange: cursor >= start && cursor <= end
+			});
+			cursor = addDays(cursor, 1);
+		}
+		weeks.push(week);
+	}
+	function levelFor(value) {
+		if (value <= 0 || maxValue <= 0) return 0;
+		return Math.min(levelCount - 1, Math.max(1, Math.ceil(value / maxValue * (levelCount - 1))));
+	}
+	function cellColor(level) {
+		if (level === 0) return "var(--pf-heatmap-empty)";
+		return `color-mix(in srgb, var(--pf-heatmap-color) ${Math.round(level / (levelCount - 1) * 100)}%, var(--pf-heatmap-empty))`;
+	}
+	const monthLabels = [];
+	let lastMonth = -1;
+	weeks.forEach((week, col) => {
+		const firstInRange = week.find((c) => c.inRange);
+		if (!firstInRange) return;
+		const month = firstInRange.date.getMonth();
+		if (month !== lastMonth) {
+			monthLabels.push({
+				col: col + 1,
+				label: MONTHS[month]
+			});
+			lastMonth = month;
+		}
+	});
+	const styleVars = {
+		"--pf-heatmap-cell-size": `${cellSize}px`,
+		"--pf-heatmap-cell-gap": `${cellGap}px`,
+		...style
+	};
+	const ariaLabel = label ?? `Activity heatmap from ${toISO(start)} to ${toISO(end)}, ${total} total`;
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: cx("pf-heatmap", className),
+		style: styleVars,
+		role: "img",
+		"aria-label": ariaLabel,
+		...props,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "pf-heatmap__body",
+			children: [showWeekdayLabels ? /* @__PURE__ */ jsxs("div", {
+				className: "pf-heatmap__weekdays",
+				children: [showMonthLabels ? /* @__PURE__ */ jsx("span", {
+					className: "pf-heatmap__weekday-spacer",
+					"aria-hidden": "true"
+				}) : null, /* @__PURE__ */ jsx("div", {
+					className: "pf-heatmap__weekday-grid",
+					children: Array.from({ length: 7 }, (_, i) => {
+						const dow = (weekStartsOn + i) % 7;
+						return /* @__PURE__ */ jsx("span", {
+							className: "pf-heatmap__weekday",
+							children: i % 2 === 1 ? WEEKDAYS[dow] : ""
+						}, i);
+					})
+				})]
+			}) : null, /* @__PURE__ */ jsxs("div", {
+				className: "pf-heatmap__main",
+				children: [showMonthLabels ? /* @__PURE__ */ jsx("div", {
+					className: "pf-heatmap__months",
+					style: { gridTemplateColumns: `repeat(${weeks.length}, var(--pf-heatmap-cell-size))` },
+					"aria-hidden": "true",
+					children: monthLabels.map((m) => /* @__PURE__ */ jsx("span", {
+						className: "pf-heatmap__month",
+						style: { gridColumnStart: m.col },
+						children: m.label
+					}, `${m.label}-${m.col}`))
+				}) : null, /* @__PURE__ */ jsx("div", {
+					className: "pf-heatmap__grid",
+					children: weeks.flatMap((week, wi) => week.map((cell, di) => {
+						if (!cell.inRange) return /* @__PURE__ */ jsx("span", { className: "pf-heatmap__cell pf-heatmap__cell--empty" }, `${wi}-${di}`);
+						const value = valueByDate.get(cell.iso) ?? 0;
+						const level = levelFor(value);
+						const title = valueFormatter ? valueFormatter(value, cell.iso) : `${cell.iso}: ${value}`;
+						return /* @__PURE__ */ jsx("span", {
+							className: "pf-heatmap__cell",
+							style: {
+								background: cellColor(level),
+								animationDelay: `${wi * 8}ms`
+							},
+							title,
+							"data-level": level
+						}, `${wi}-${di}`);
+					}))
+				})]
+			})]
+		})
+	});
+});
+Heatmap.displayName = "Heatmap";
+//#endregion
+export { Heatmap };

package/dist/components/InlineCTA/InlineCTA.css

@@ -7,6 +7,64 @@
   gap: var(--space-3);
   grid-template-columns: auto 1fr;
   padding: var(--space-3);
+  position: relative;
+}
+
+/* Leave room for the centered dismiss button so content/action don't crowd it */
+.pf-inline-cta--dismissible {
+  padding-inline-end: var(--space-12);
+}
+
+.pf-inline-cta__dismiss {
+  align-items: center;
+  background: transparent;
+  border: 0;
+  border-radius: var(--radius-sm);
+  color: var(--color-semantic-text-muted);
+  cursor: pointer;
+  display: inline-flex;
+  height: 28px;
+  justify-content: center;
+  position: absolute;
+  inset-inline-end: var(--space-3);
+  top: 50%;
+  transform: translateY(-50%);
+  width: 28px;
+}
+
+.pf-inline-cta__dismiss:hover,
+.pf-inline-cta__dismiss:focus-visible {
+  background: var(--color-semantic-background-subtle);
+  color: var(--color-semantic-text-default);
+  outline: none;
+}
+
+/* Exit: fade and collapse so surrounding content reflows when dismissed. */
+.pf-inline-cta--exiting {
+  animation: pf-inline-cta-out var(--duration-moderate) var(--easing-accelerate) forwards;
+  overflow: hidden;
+  pointer-events: none;
+}
+
+@keyframes pf-inline-cta-out {
+  from {
+    opacity: 1;
+    max-height: 480px;
+  }
+  to {
+    opacity: 0;
+    max-height: 0;
+    margin-top: 0;
+    margin-bottom: 0;
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .pf-inline-cta--exiting {
+    animation: none;
+  }
 }
 
 @media (min-width: 768px) {

package/dist/components/InlineCTA/InlineCTA2.js

@@ -1,17 +1,19 @@
+import { useExitAnimation } from "../../hooks/useExitAnimation.js";
 import { cx } from "../../utils/cx.js";
 import { Icon } from "../Icon/Icon2.js";
 import './InlineCTA.css';/* empty css          */
 import { forwardRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/InlineCTA/InlineCTA.tsx
-var InlineCTA = forwardRef(function InlineCTA({ className, heading, description, action, icon, iconName = "circle-question", tone = "default", children, ...props }, ref) {
+var InlineCTA = forwardRef(function InlineCTA({ className, heading, description, action, icon, iconName = "circle-question", tone = "default", dismissible = false, onDismiss, children, ...props }, ref) {
 	const resolvedIcon = icon ?? /* @__PURE__ */ jsx(Icon, {
 		name: iconName,
 		"aria-hidden": true
 	});
+	const { isExiting, startExit } = useExitAnimation({ onExited: onDismiss });
 	return /* @__PURE__ */ jsxs("div", {
 		ref,
-		className: cx("pf-inline-cta", `pf-inline-cta--${tone}`, className),
+		className: cx("pf-inline-cta", `pf-inline-cta--${tone}`, dismissible && "pf-inline-cta--dismissible", isExiting && "pf-inline-cta--exiting", className),
 		...props,
 		children: [
 			/* @__PURE__ */ jsx("span", {
@@ -36,6 +38,16 @@ var InlineCTA = forwardRef(function InlineCTA({ className, heading, description,
 			action ? /* @__PURE__ */ jsx("div", {
 				className: "pf-inline-cta__action",
 				children: action
+			}) : null,
+			dismissible ? /* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: "pf-inline-cta__dismiss",
+				"aria-label": "Dismiss",
+				onClick: startExit,
+				children: /* @__PURE__ */ jsx(Icon, {
+					name: "circle-xmark",
+					"aria-hidden": true
+				})
 			}) : null
 		]
 	});

package/dist/components/Modal/Modal.css

@@ -89,6 +89,8 @@
 }
 
 .pf-modal__body {
+  display: grid;
+  gap: var(--space-4);
   overflow-y: auto;
   padding: var(--space-3);
 }
@@ -134,3 +136,63 @@
   color: var(--pf-modal-text);
   outline: none;
 }
+
+/* Entrance animation — uses motion tokens via theme aliases */
+@keyframes pf-modal-overlay-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes pf-modal-in {
+  from {
+    opacity: 0;
+    transform: translateY(8px) scale(0.98);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+.pf-modal__overlay {
+  animation: pf-modal-overlay-in var(--pf-transition-fast);
+}
+
+.pf-modal {
+  animation: pf-modal-in var(--pf-transition-enter);
+}
+
+/* Exit animation — plays while the dialog is being dismissed (presence handling) */
+@keyframes pf-modal-overlay-out {
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes pf-modal-out {
+  to {
+    opacity: 0;
+    transform: translateY(8px) scale(0.98);
+  }
+}
+
+.pf-modal__overlay--exiting {
+  animation: pf-modal-overlay-out var(--pf-transition-fast) forwards;
+}
+
+.pf-modal--exiting {
+  animation: pf-modal-out var(--pf-transition-fast) forwards;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .pf-modal__overlay,
+  .pf-modal,
+  .pf-modal__overlay--exiting,
+  .pf-modal--exiting {
+    animation: none;
+  }
+}

package/dist/components/Modal/Modal2.js

@@ -1,6 +1,7 @@
+import { useFocusTrap } from "../../hooks/useFocusTrap.js";
+import { usePresence } from "../../hooks/usePresence.js";
 import { cx } from "../../utils/cx.js";
 import { Icon } from "../Icon/Icon2.js";
-import { useFocusTrap } from "../../hooks/useFocusTrap.js";
 import './Modal.css';/* empty css      */
 import { forwardRef, useEffect, useId, useImperativeHandle, useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -28,25 +29,26 @@ var Modal = forwardRef(function Modal({ className, open, onOpenChange, title, de
 	const titleId = useId();
 	const descriptionId = useId();
 	const dialogRef = useRef(null);
+	const { isMounted, isExiting } = usePresence(open);
 	useImperativeHandle(ref, () => dialogRef.current, []);
 	useEffect(() => {
-		if (!open || typeof document === "undefined") return;
+		if (!isMounted || typeof document === "undefined") return;
 		const originalOverflow = document.body.style.overflow;
 		document.body.style.overflow = "hidden";
 		return () => {
 			document.body.style.overflow = originalOverflow;
 		};
-	}, [open]);
+	}, [isMounted]);
 	useFocusTrap({
 		containerRef: dialogRef,
 		enabled: open,
 		onEscape: () => onOpenChange?.(false)
 	});
-	if (!open || typeof document === "undefined") return null;
+	if (!isMounted || typeof document === "undefined") return null;
 	return createPortal(/* @__PURE__ */ jsxs("div", {
 		className: "pf-modal__portal",
 		children: [/* @__PURE__ */ jsx("div", {
-			className: "pf-modal__overlay",
+			className: cx("pf-modal__overlay", isExiting && "pf-modal__overlay--exiting"),
 			onClick: () => {
 				if (closeOnOverlayClick) onOpenChange?.(false);
 			}
@@ -54,7 +56,7 @@ var Modal = forwardRef(function Modal({ className, open, onOpenChange, title, de
 			className: "pf-modal__viewport",
 			children: /* @__PURE__ */ jsxs("div", {
 				ref: dialogRef,
-				className: cx("pf-modal", `pf-modal--${size}`, className),
+				className: cx("pf-modal", `pf-modal--${size}`, isExiting && "pf-modal--exiting", className),
 				role: "dialog",
 				"aria-modal": "true",
 				"aria-labelledby": title ? titleId : void 0,

package/dist/components/MultiSelect/MultiSelect.css

@@ -15,7 +15,7 @@
   justify-content: space-between;
   min-height: 40px;
   padding: var(--space-1) var(--space-2) var(--space-1) var(--space-2);
-  text-align: left;
+  text-align: start;
   width: 100%;
   transition:
     background 0.2s,
@@ -78,7 +78,7 @@
   justify-content: center;
   width: 20px;
   transform-origin: center;
-  transition: transform 140ms ease;
+  transition: transform var(--pf-transition-fast);
 }
 
 .pf-multi-select__icon svg {
@@ -103,6 +103,19 @@
   padding: var(--space-1);
   position: fixed;
   z-index: 1000;
+  transform-origin: top center;
+  animation: pf-multi-select-menu-in var(--duration-fast) var(--easing-decelerate);
+}
+
+@keyframes pf-multi-select-menu-in {
+  from {
+    opacity: 0;
+    transform: translateY(-4px) scaleY(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scaleY(1);
+  }
 }
 
 .pf-multi-select__option {
@@ -154,4 +167,8 @@
   .pf-multi-select__icon {
     transition: none;
   }
+
+  .pf-multi-select__menu {
+    animation: none;
+  }
 }

package/dist/components/MultiSelect/MultiSelect2.js

@@ -1,13 +1,13 @@
 import { Keys, composeDescribedBy, isActivationKey } from "../../a11y/index.js";
-import { cx } from "../../utils/cx.js";
-import { Icon } from "../Icon/Icon2.js";
-import { FieldWrapper } from "../../utils/FieldWrapper.js";
 import { useAnchoredPosition } from "../../hooks/useAnchoredPosition.js";
 import { useComposedRefs } from "../../hooks/useComposedRefs.js";
 import { useControllableState } from "../../hooks/useControllableState.js";
 import { useDisclosure } from "../../hooks/useDisclosure.js";
 import { useListNavigation } from "../../hooks/useListNavigation.js";
 import { useOutsideInteraction } from "../../hooks/useOutsideInteraction.js";
+import { cx } from "../../utils/cx.js";
+import { Icon } from "../Icon/Icon2.js";
+import { FieldWrapper } from "../../utils/FieldWrapper.js";
 import './MultiSelect.css';/* empty css            */
 import { forwardRef, useEffect, useId, useMemo, useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -125,7 +125,6 @@ var MultiSelect = forwardRef(({ id, options, value, defaultValue, onValueChange,
 					"aria-haspopup": "listbox",
 					"aria-expanded": isOpen,
 					"aria-required": required || void 0,
-					"aria-controls": isOpen ? listboxId : void 0,
 					"aria-describedby": describedBy,
 					onClick: () => {
 						disclosure.toggle();

package/dist/components/Notification/Notification.css

@@ -59,6 +59,45 @@
   max-width: none;
   padding: var(--space-3);
   width: 100%;
+  animation: pf-notification-in var(--duration-moderate) var(--easing-decelerate);
+}
+
+@keyframes pf-notification-in {
+  from {
+    opacity: 0;
+    transform: translateX(12px);
+  }
+}
+
+/* Exit: slide off to the right and collapse so stacked siblings reflow. */
+.pf-notification--exiting {
+  animation: pf-notification-out var(--duration-moderate) var(--easing-accelerate) forwards;
+  overflow: hidden;
+  pointer-events: none;
+}
+
+@keyframes pf-notification-out {
+  from {
+    opacity: 1;
+    transform: translateX(0);
+    max-height: 480px;
+  }
+  to {
+    opacity: 0;
+    transform: translateX(100%);
+    max-height: 0;
+    margin-top: 0;
+    margin-bottom: 0;
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .pf-notification,
+  .pf-notification--exiting {
+    animation: none;
+  }
 }
 
 @media (min-width: 768px) {
@@ -69,22 +108,38 @@
 }
 
 .pf-notification--info {
-  background: color-mix(in srgb, var(--pf-notification-info-bg) 45%, var(--color-base-white));
+  background: color-mix(
+    in srgb,
+    var(--pf-notification-info-bg) 45%,
+    var(--pf-notification-mix-base)
+  );
   border-color: var(--pf-notification-info-border);
 }
 
 .pf-notification--success {
-  background: color-mix(in srgb, var(--pf-notification-success-bg) 45%, var(--color-base-white));
+  background: color-mix(
+    in srgb,
+    var(--pf-notification-success-bg) 45%,
+    var(--pf-notification-mix-base)
+  );
   border-color: var(--pf-notification-success-border);
 }
 
 .pf-notification--warning {
-  background: color-mix(in srgb, var(--pf-notification-warning-bg) 45%, var(--color-base-white));
+  background: color-mix(
+    in srgb,
+    var(--pf-notification-warning-bg) 45%,
+    var(--pf-notification-mix-base)
+  );
   border-color: var(--pf-notification-warning-border);
 }
 
 .pf-notification--danger {
-  background: color-mix(in srgb, var(--pf-notification-danger-bg) 45%, var(--color-base-white));
+  background: color-mix(
+    in srgb,
+    var(--pf-notification-danger-bg) 45%,
+    var(--pf-notification-mix-base)
+  );
   border-color: var(--pf-notification-danger-border);
 }
 

package/dist/components/Notification/Notification2.js

@@ -1,3 +1,4 @@
+import { useExitAnimation } from "../../hooks/useExitAnimation.js";
 import { cx } from "../../utils/cx.js";
 import { Icon } from "../Icon/Icon2.js";
 import './Notification.css';/* empty css             */
@@ -22,9 +23,10 @@ var Notification = forwardRef(({ className, variant = "info", heading, descripti
 		"aria-hidden": true
 	});
 	const body = children ?? description;
+	const { isExiting, startExit } = useExitAnimation({ onExited: onDismiss });
 	return /* @__PURE__ */ jsxs("div", {
 		ref,
-		className: cx("pf-notification", `pf-notification--${variant}`, className),
+		className: cx("pf-notification", `pf-notification--${variant}`, isExiting && "pf-notification--exiting", className),
 		role: "status",
 		...props,
 		children: [
@@ -54,7 +56,7 @@ var Notification = forwardRef(({ className, variant = "info", heading, descripti
 				type: "button",
 				className: "pf-notification__dismiss",
 				"aria-label": "Dismiss notification",
-				onClick: () => onDismiss?.(),
+				onClick: startExit,
 				children: /* @__PURE__ */ jsx(Icon, {
 					name: "circle-xmark",
 					"aria-hidden": true