@puzzle-ui/ui 0.0.0-stage → 0.1.0

package/dist/components/overlays/notification/index.cjs

@@ -0,0 +1,142 @@
+"use client";
+;/* empty css                   */
+const require_notification_provider = require("./notification-provider.cjs");
+const require_use_notification = require("./use-notification.cjs");
+let _puzzle_ui_core = require("@puzzle-ui/core");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+// src/components/overlays/notification/index.tsx
+const NotificationIcon = ({ severity }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+		"aria-hidden": "true",
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: {
+			success: "M5 12l4 4L19 6",
+			info: "M12 8h.01M11 12h1v4h1M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20",
+			warning: "M12 9v4m0 4h.01M10.3 3.9L1.8 18.5A2 2 0 0 0 3.5 21h17a2 2 0 0 0 1.7-2.5L13.7 3.9a2 2 0 0 0-3.4 0Z",
+			error: "M18 6 6 18M6 6l12 12"
+		}[severity] })
+	});
+};
+const Notification = ({ notification, onDismiss }) => {
+	const { id, severity, title, description, duration, action, closable } = notification;
+	const [paused, setPaused] = (0, react.useState)(false);
+	const remainingRef = (0, react.useRef)(duration ?? 0);
+	const startedAtRef = (0, react.useRef)(0);
+	const dismiss = (0, react.useCallback)(() => {
+		onDismiss(id);
+	}, [id, onDismiss]);
+	(0, react.useEffect)(() => {
+		if (!duration || duration <= 0 || paused) return;
+		startedAtRef.current = Date.now();
+		const timer = window.setTimeout(dismiss, remainingRef.current);
+		return () => {
+			window.clearTimeout(timer);
+			remainingRef.current = Math.max(0, remainingRef.current - (Date.now() - startedAtRef.current));
+		};
+	}, [
+		duration,
+		paused,
+		dismiss
+	]);
+	(0, react.useEffect)(() => {
+		const handleWindowBlur = () => setPaused(true);
+		const handleWindowFocus = () => setPaused(false);
+		window.addEventListener("blur", handleWindowBlur);
+		window.addEventListener("focus", handleWindowFocus);
+		return () => {
+			window.removeEventListener("blur", handleWindowBlur);
+			window.removeEventListener("focus", handleWindowFocus);
+		};
+	}, []);
+	(0, react.useEffect)(() => {
+		const handleVisibilityChange = () => {
+			setPaused(document.visibilityState !== "visible");
+		};
+		document.addEventListener("visibilitychange", handleVisibilityChange);
+		return () => {
+			document.removeEventListener("visibilitychange", handleVisibilityChange);
+		};
+	}, []);
+	const handleAction = () => {
+		try {
+			action?.onClick();
+		} finally {
+			dismiss();
+		}
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: (0, _puzzle_ui_core.cn)("puzzle-notification", `puzzle-notification--${severity}`),
+		"data-severity": severity,
+		role: severity === "error" ? "alert" : "status",
+		"aria-live": severity === "error" ? "assertive" : "polite",
+		"aria-atomic": "true",
+		onMouseEnter: () => setPaused(true),
+		onMouseLeave: () => setPaused(false),
+		onFocus: () => setPaused(true),
+		onBlur: (event) => {
+			if (!event.currentTarget.contains(event.relatedTarget)) setPaused(false);
+		},
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "puzzle-notification__icon",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(NotificationIcon, { severity })
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "puzzle-notification__content",
+				children: [
+					title != null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "puzzle-notification__title",
+						children: title
+					}),
+					description != null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "puzzle-notification__description",
+						children: description
+					}),
+					action && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						type: "button",
+						className: "puzzle-notification__action",
+						onClick: handleAction,
+						children: action.label
+					})
+				]
+			}),
+			closable && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+				type: "button",
+				className: "puzzle-notification__close",
+				"aria-label": "Dismiss notification",
+				onClick: dismiss,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+					"aria-hidden": "true",
+					viewBox: "0 0 24 24",
+					fill: "none",
+					stroke: "currentColor",
+					strokeWidth: "2",
+					strokeLinecap: "round",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M18 6 6 18M6 6l12 12" })
+				})
+			})
+		]
+	});
+};
+const NotificationViewport = ({ notifications, position, label, onDismiss }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+	className: (0, _puzzle_ui_core.cn)("puzzle-notification-viewport", `puzzle-notification-viewport--${position}`),
+	role: "region",
+	"aria-label": label,
+	style: { "--puzzle-notification-count": notifications.length },
+	children: notifications.map((notification) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Notification, {
+		notification,
+		onDismiss
+	}, notification.id))
+});
+exports.Notification = Notification;
+exports.NotificationProvider = require_notification_provider.NotificationProvider;
+exports.NotificationViewport = NotificationViewport;
+exports.useNotification = require_use_notification.useNotification;
+
+//# sourceMappingURL=index.cjs.map

package/dist/components/overlays/notification/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":["useState","useRef","useCallback","cn"],"sources":["../../../../src/components/overlays/notification/index.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n  type CSSProperties,\n} from \"react\";\n\nimport { cn } from \"@puzzle-ui/core\";\n\nimport type {\n  NotificationItem,\n  NotificationPosition,\n  NotificationSeverity,\n  NotificationAction,\n  NotificationOptions,\n  NotificationInput,\n  NotificationProviderProps,\n} from \"./notification.types\";\n\nimport \"./notification.css\";\n\ntype NotificationProps = {\n  notification: NotificationItem;\n  onDismiss: (id: string) => void;\n};\n\ntype NotificationViewportProps = {\n  notifications: NotificationItem[];\n  position: NotificationPosition;\n  label: string;\n  onDismiss: (id: string) => void;\n};\n\nconst NotificationIcon = ({\n  severity,\n}: {\n  severity: NotificationItem[\"severity\"];\n}) => {\n  const paths: Record<NotificationItem[\"severity\"], string> = {\n    success: \"M5 12l4 4L19 6\",\n    info: \"M12 8h.01M11 12h1v4h1M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20\",\n    warning:\n      \"M12 9v4m0 4h.01M10.3 3.9L1.8 18.5A2 2 0 0 0 3.5 21h17a2 2 0 0 0 1.7-2.5L13.7 3.9a2 2 0 0 0-3.4 0Z\",\n    error: \"M18 6 6 18M6 6l12 12\",\n  };\n\n  return (\n    <svg\n      aria-hidden=\"true\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n    >\n      <path d={paths[severity]} />\n    </svg>\n  );\n};\n\nconst Notification = ({ notification, onDismiss }: NotificationProps) => {\n  const { id, severity, title, description, duration, action, closable } =\n    notification;\n\n  const [paused, setPaused] = useState(false);\n  const remainingRef = useRef(duration ?? 0);\n  const startedAtRef = useRef(0);\n\n  const dismiss = useCallback(() => {\n    onDismiss(id);\n  }, [id, onDismiss]);\n\n  useEffect(() => {\n    if (!duration || duration <= 0 || paused) return;\n\n    startedAtRef.current = Date.now();\n\n    const timer = window.setTimeout(dismiss, remainingRef.current);\n\n    return () => {\n      window.clearTimeout(timer);\n\n      remainingRef.current = Math.max(\n        0,\n        remainingRef.current - (Date.now() - startedAtRef.current),\n      );\n    };\n  }, [duration, paused, dismiss]);\n\n  useEffect(() => {\n    const handleWindowBlur = () => setPaused(true);\n    const handleWindowFocus = () => setPaused(false);\n\n    window.addEventListener(\"blur\", handleWindowBlur);\n    window.addEventListener(\"focus\", handleWindowFocus);\n\n    return () => {\n      window.removeEventListener(\"blur\", handleWindowBlur);\n      window.removeEventListener(\"focus\", handleWindowFocus);\n    };\n  }, []);\n\n  useEffect(() => {\n    const handleVisibilityChange = () => {\n      setPaused(document.visibilityState !== \"visible\");\n    };\n\n    document.addEventListener(\"visibilitychange\", handleVisibilityChange);\n\n    return () => {\n      document.removeEventListener(\"visibilitychange\", handleVisibilityChange);\n    };\n  }, []);\n\n  const handleAction = () => {\n    try {\n      action?.onClick();\n    } finally {\n      dismiss();\n    }\n  };\n\n  return (\n    <div\n      className={cn(\"puzzle-notification\", `puzzle-notification--${severity}`)}\n      data-severity={severity}\n      role={severity === \"error\" ? \"alert\" : \"status\"}\n      aria-live={severity === \"error\" ? \"assertive\" : \"polite\"}\n      aria-atomic=\"true\"\n      onMouseEnter={() => setPaused(true)}\n      onMouseLeave={() => setPaused(false)}\n      onFocus={() => setPaused(true)}\n      onBlur={(event) => {\n        if (!event.currentTarget.contains(event.relatedTarget)) {\n          setPaused(false);\n        }\n      }}\n    >\n      <span className=\"puzzle-notification__icon\">\n        <NotificationIcon severity={severity} />\n      </span>\n\n      <div className=\"puzzle-notification__content\">\n        {title != null && (\n          <div className=\"puzzle-notification__title\">{title}</div>\n        )}\n\n        {description != null && (\n          <div className=\"puzzle-notification__description\">{description}</div>\n        )}\n\n        {action && (\n          <button\n            type=\"button\"\n            className=\"puzzle-notification__action\"\n            onClick={handleAction}\n          >\n            {action.label}\n          </button>\n        )}\n      </div>\n\n      {closable && (\n        <button\n          type=\"button\"\n          className=\"puzzle-notification__close\"\n          aria-label=\"Dismiss notification\"\n          onClick={dismiss}\n        >\n          <svg\n            aria-hidden=\"true\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            strokeWidth=\"2\"\n            strokeLinecap=\"round\"\n          >\n            <path d=\"M18 6 6 18M6 6l12 12\" />\n          </svg>\n        </button>\n      )}\n    </div>\n  );\n};\n\nconst NotificationViewport = ({\n  notifications,\n  position,\n  label,\n  onDismiss,\n}: NotificationViewportProps) => (\n  <div\n    className={cn(\n      \"puzzle-notification-viewport\",\n      `puzzle-notification-viewport--${position}`,\n    )}\n    role=\"region\"\n    aria-label={label}\n    style={\n      { \"--puzzle-notification-count\": notifications.length } as CSSProperties\n    }\n  >\n    {notifications.map((notification) => (\n      <Notification\n        key={notification.id}\n        notification={notification}\n        onDismiss={onDismiss}\n      />\n    ))}\n  </div>\n);\n\nexport type {\n  NotificationSeverity,\n  NotificationPosition,\n  NotificationAction,\n  NotificationOptions,\n  NotificationInput,\n  NotificationItem,\n  NotificationProviderProps,\n};\nexport {\n  Notification,\n  NotificationViewport,\n  type NotificationProps,\n  type NotificationViewportProps,\n};\nexport { NotificationProvider } from \"./notification-provider\";\n\nexport { useNotification } from \"./use-notification\";\n"],"mappings":"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"}

package/dist/components/overlays/notification/index.d.cts

@@ -0,0 +1,16 @@
+import { NotificationAction, NotificationInput, NotificationItem, NotificationOptions, NotificationPosition, NotificationProviderProps, NotificationSeverity } from "./notification.types.cjs";
+import { NotificationProvider } from "./notification-provider.cjs";
+import { useNotification } from "./use-notification.cjs";
+type NotificationProps = {
+  notification: NotificationItem;
+  onDismiss: (id: string) => void;
+};
+type NotificationViewportProps = {
+  notifications: NotificationItem[];
+  position: NotificationPosition;
+  label: string;
+  onDismiss: (id: string) => void;
+};
+declare const Notification: ({ notification, onDismiss }: NotificationProps) => import("react").JSX.Element;
+declare const NotificationViewport: ({ notifications, position, label, onDismiss }: NotificationViewportProps) => import("react").JSX.Element;
+export { Notification, type NotificationAction, type NotificationInput, type NotificationItem, type NotificationOptions, type NotificationPosition, type NotificationProps, NotificationProvider, type NotificationProviderProps, type NotificationSeverity, NotificationViewport, type NotificationViewportProps, useNotification };

package/dist/components/overlays/notification/index.d.ts

@@ -0,0 +1,16 @@
+import { NotificationAction, NotificationInput, NotificationItem, NotificationOptions, NotificationPosition, NotificationProviderProps, NotificationSeverity } from "./notification.types.js";
+import { NotificationProvider } from "./notification-provider.js";
+import { useNotification } from "./use-notification.js";
+type NotificationProps = {
+  notification: NotificationItem;
+  onDismiss: (id: string) => void;
+};
+type NotificationViewportProps = {
+  notifications: NotificationItem[];
+  position: NotificationPosition;
+  label: string;
+  onDismiss: (id: string) => void;
+};
+declare const Notification: ({ notification, onDismiss }: NotificationProps) => import("react").JSX.Element;
+declare const NotificationViewport: ({ notifications, position, label, onDismiss }: NotificationViewportProps) => import("react").JSX.Element;
+export { Notification, type NotificationAction, type NotificationInput, type NotificationItem, type NotificationOptions, type NotificationPosition, type NotificationProps, NotificationProvider, type NotificationProviderProps, type NotificationSeverity, NotificationViewport, type NotificationViewportProps, useNotification };

package/dist/components/overlays/notification/index.js

@@ -0,0 +1,139 @@
+"use client";
+import "./notification.css";
+import { NotificationProvider } from "./notification-provider.js";
+import { useNotification } from "./use-notification.js";
+import { cn } from "@puzzle-ui/core";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/overlays/notification/index.tsx
+const NotificationIcon = ({ severity }) => {
+	return /* @__PURE__ */ jsx("svg", {
+		"aria-hidden": "true",
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		children: /* @__PURE__ */ jsx("path", { d: {
+			success: "M5 12l4 4L19 6",
+			info: "M12 8h.01M11 12h1v4h1M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20",
+			warning: "M12 9v4m0 4h.01M10.3 3.9L1.8 18.5A2 2 0 0 0 3.5 21h17a2 2 0 0 0 1.7-2.5L13.7 3.9a2 2 0 0 0-3.4 0Z",
+			error: "M18 6 6 18M6 6l12 12"
+		}[severity] })
+	});
+};
+const Notification = ({ notification, onDismiss }) => {
+	const { id, severity, title, description, duration, action, closable } = notification;
+	const [paused, setPaused] = useState(false);
+	const remainingRef = useRef(duration ?? 0);
+	const startedAtRef = useRef(0);
+	const dismiss = useCallback(() => {
+		onDismiss(id);
+	}, [id, onDismiss]);
+	useEffect(() => {
+		if (!duration || duration <= 0 || paused) return;
+		startedAtRef.current = Date.now();
+		const timer = window.setTimeout(dismiss, remainingRef.current);
+		return () => {
+			window.clearTimeout(timer);
+			remainingRef.current = Math.max(0, remainingRef.current - (Date.now() - startedAtRef.current));
+		};
+	}, [
+		duration,
+		paused,
+		dismiss
+	]);
+	useEffect(() => {
+		const handleWindowBlur = () => setPaused(true);
+		const handleWindowFocus = () => setPaused(false);
+		window.addEventListener("blur", handleWindowBlur);
+		window.addEventListener("focus", handleWindowFocus);
+		return () => {
+			window.removeEventListener("blur", handleWindowBlur);
+			window.removeEventListener("focus", handleWindowFocus);
+		};
+	}, []);
+	useEffect(() => {
+		const handleVisibilityChange = () => {
+			setPaused(document.visibilityState !== "visible");
+		};
+		document.addEventListener("visibilitychange", handleVisibilityChange);
+		return () => {
+			document.removeEventListener("visibilitychange", handleVisibilityChange);
+		};
+	}, []);
+	const handleAction = () => {
+		try {
+			action?.onClick();
+		} finally {
+			dismiss();
+		}
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("puzzle-notification", `puzzle-notification--${severity}`),
+		"data-severity": severity,
+		role: severity === "error" ? "alert" : "status",
+		"aria-live": severity === "error" ? "assertive" : "polite",
+		"aria-atomic": "true",
+		onMouseEnter: () => setPaused(true),
+		onMouseLeave: () => setPaused(false),
+		onFocus: () => setPaused(true),
+		onBlur: (event) => {
+			if (!event.currentTarget.contains(event.relatedTarget)) setPaused(false);
+		},
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				className: "puzzle-notification__icon",
+				children: /* @__PURE__ */ jsx(NotificationIcon, { severity })
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "puzzle-notification__content",
+				children: [
+					title != null && /* @__PURE__ */ jsx("div", {
+						className: "puzzle-notification__title",
+						children: title
+					}),
+					description != null && /* @__PURE__ */ jsx("div", {
+						className: "puzzle-notification__description",
+						children: description
+					}),
+					action && /* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: "puzzle-notification__action",
+						onClick: handleAction,
+						children: action.label
+					})
+				]
+			}),
+			closable && /* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: "puzzle-notification__close",
+				"aria-label": "Dismiss notification",
+				onClick: dismiss,
+				children: /* @__PURE__ */ jsx("svg", {
+					"aria-hidden": "true",
+					viewBox: "0 0 24 24",
+					fill: "none",
+					stroke: "currentColor",
+					strokeWidth: "2",
+					strokeLinecap: "round",
+					children: /* @__PURE__ */ jsx("path", { d: "M18 6 6 18M6 6l12 12" })
+				})
+			})
+		]
+	});
+};
+const NotificationViewport = ({ notifications, position, label, onDismiss }) => /* @__PURE__ */ jsx("div", {
+	className: cn("puzzle-notification-viewport", `puzzle-notification-viewport--${position}`),
+	role: "region",
+	"aria-label": label,
+	style: { "--puzzle-notification-count": notifications.length },
+	children: notifications.map((notification) => /* @__PURE__ */ jsx(Notification, {
+		notification,
+		onDismiss
+	}, notification.id))
+});
+export { Notification, NotificationProvider, NotificationViewport, useNotification };
+
+//# sourceMappingURL=index.js.map

package/dist/components/overlays/notification/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/overlays/notification/index.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n  type CSSProperties,\n} from \"react\";\n\nimport { cn } from \"@puzzle-ui/core\";\n\nimport type {\n  NotificationItem,\n  NotificationPosition,\n  NotificationSeverity,\n  NotificationAction,\n  NotificationOptions,\n  NotificationInput,\n  NotificationProviderProps,\n} from \"./notification.types\";\n\nimport \"./notification.css\";\n\ntype NotificationProps = {\n  notification: NotificationItem;\n  onDismiss: (id: string) => void;\n};\n\ntype NotificationViewportProps = {\n  notifications: NotificationItem[];\n  position: NotificationPosition;\n  label: string;\n  onDismiss: (id: string) => void;\n};\n\nconst NotificationIcon = ({\n  severity,\n}: {\n  severity: NotificationItem[\"severity\"];\n}) => {\n  const paths: Record<NotificationItem[\"severity\"], string> = {\n    success: \"M5 12l4 4L19 6\",\n    info: \"M12 8h.01M11 12h1v4h1M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20\",\n    warning:\n      \"M12 9v4m0 4h.01M10.3 3.9L1.8 18.5A2 2 0 0 0 3.5 21h17a2 2 0 0 0 1.7-2.5L13.7 3.9a2 2 0 0 0-3.4 0Z\",\n    error: \"M18 6 6 18M6 6l12 12\",\n  };\n\n  return (\n    <svg\n      aria-hidden=\"true\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n    >\n      <path d={paths[severity]} />\n    </svg>\n  );\n};\n\nconst Notification = ({ notification, onDismiss }: NotificationProps) => {\n  const { id, severity, title, description, duration, action, closable } =\n    notification;\n\n  const [paused, setPaused] = useState(false);\n  const remainingRef = useRef(duration ?? 0);\n  const startedAtRef = useRef(0);\n\n  const dismiss = useCallback(() => {\n    onDismiss(id);\n  }, [id, onDismiss]);\n\n  useEffect(() => {\n    if (!duration || duration <= 0 || paused) return;\n\n    startedAtRef.current = Date.now();\n\n    const timer = window.setTimeout(dismiss, remainingRef.current);\n\n    return () => {\n      window.clearTimeout(timer);\n\n      remainingRef.current = Math.max(\n        0,\n        remainingRef.current - (Date.now() - startedAtRef.current),\n      );\n    };\n  }, [duration, paused, dismiss]);\n\n  useEffect(() => {\n    const handleWindowBlur = () => setPaused(true);\n    const handleWindowFocus = () => setPaused(false);\n\n    window.addEventListener(\"blur\", handleWindowBlur);\n    window.addEventListener(\"focus\", handleWindowFocus);\n\n    return () => {\n      window.removeEventListener(\"blur\", handleWindowBlur);\n      window.removeEventListener(\"focus\", handleWindowFocus);\n    };\n  }, []);\n\n  useEffect(() => {\n    const handleVisibilityChange = () => {\n      setPaused(document.visibilityState !== \"visible\");\n    };\n\n    document.addEventListener(\"visibilitychange\", handleVisibilityChange);\n\n    return () => {\n      document.removeEventListener(\"visibilitychange\", handleVisibilityChange);\n    };\n  }, []);\n\n  const handleAction = () => {\n    try {\n      action?.onClick();\n    } finally {\n      dismiss();\n    }\n  };\n\n  return (\n    <div\n      className={cn(\"puzzle-notification\", `puzzle-notification--${severity}`)}\n      data-severity={severity}\n      role={severity === \"error\" ? \"alert\" : \"status\"}\n      aria-live={severity === \"error\" ? \"assertive\" : \"polite\"}\n      aria-atomic=\"true\"\n      onMouseEnter={() => setPaused(true)}\n      onMouseLeave={() => setPaused(false)}\n      onFocus={() => setPaused(true)}\n      onBlur={(event) => {\n        if (!event.currentTarget.contains(event.relatedTarget)) {\n          setPaused(false);\n        }\n      }}\n    >\n      <span className=\"puzzle-notification__icon\">\n        <NotificationIcon severity={severity} />\n      </span>\n\n      <div className=\"puzzle-notification__content\">\n        {title != null && (\n          <div className=\"puzzle-notification__title\">{title}</div>\n        )}\n\n        {description != null && (\n          <div className=\"puzzle-notification__description\">{description}</div>\n        )}\n\n        {action && (\n          <button\n            type=\"button\"\n            className=\"puzzle-notification__action\"\n            onClick={handleAction}\n          >\n            {action.label}\n          </button>\n        )}\n      </div>\n\n      {closable && (\n        <button\n          type=\"button\"\n          className=\"puzzle-notification__close\"\n          aria-label=\"Dismiss notification\"\n          onClick={dismiss}\n        >\n          <svg\n            aria-hidden=\"true\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            strokeWidth=\"2\"\n            strokeLinecap=\"round\"\n          >\n            <path d=\"M18 6 6 18M6 6l12 12\" />\n          </svg>\n        </button>\n      )}\n    </div>\n  );\n};\n\nconst NotificationViewport = ({\n  notifications,\n  position,\n  label,\n  onDismiss,\n}: NotificationViewportProps) => (\n  <div\n    className={cn(\n      \"puzzle-notification-viewport\",\n      `puzzle-notification-viewport--${position}`,\n    )}\n    role=\"region\"\n    aria-label={label}\n    style={\n      { \"--puzzle-notification-count\": notifications.length } as CSSProperties\n    }\n  >\n    {notifications.map((notification) => (\n      <Notification\n        key={notification.id}\n        notification={notification}\n        onDismiss={onDismiss}\n      />\n    ))}\n  </div>\n);\n\nexport type {\n  NotificationSeverity,\n  NotificationPosition,\n  NotificationAction,\n  NotificationOptions,\n  NotificationInput,\n  NotificationItem,\n  NotificationProviderProps,\n};\nexport {\n  Notification,\n  NotificationViewport,\n  type NotificationProps,\n  type NotificationViewportProps,\n};\nexport { NotificationProvider } from \"./notification-provider\";\n\nexport { useNotification } from \"./use-notification\";\n"],"mappings":"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"}

package/dist/components/overlays/notification/notification-provider.cjs

@@ -0,0 +1,69 @@
+"use client";
+const require_index = require("../portal/index.cjs");
+const require_index$1 = require("./index.cjs");
+const require_notification_utils = require("./notification.utils.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+// src/components/overlays/notification/notification-provider.tsx
+const NotificationContext = (0, react.createContext)(null);
+const NotificationProvider = ({ children, position = "bottom-right", maxNotifications = 5, defaultDuration = 5e3, label = "Notifications" }) => {
+	const [notifications, setNotifications] = (0, react.useState)([]);
+	const dismiss = (0, react.useCallback)((id) => {
+		setNotifications((current) => current.filter((item) => item.id !== id));
+	}, []);
+	const dismissAll = (0, react.useCallback)(() => {
+		setNotifications([]);
+	}, []);
+	const showWithSeverity = (0, react.useCallback)((severity, message, options) => {
+		const item = require_notification_utils.normalizeNotification({
+			...options,
+			title: message,
+			severity
+		}, severity, { duration: defaultDuration });
+		setNotifications((current) => {
+			return [...current.filter((notification) => notification.id !== item.id), item].slice(-Math.max(1, maxNotifications));
+		});
+		return item.id;
+	}, [defaultDuration, maxNotifications]);
+	const show = (0, react.useCallback)((input) => {
+		const item = require_notification_utils.normalizeNotification(input, "info", { duration: defaultDuration });
+		setNotifications((current) => {
+			return [...current.filter((notification) => notification.id !== item.id), item].slice(-Math.max(1, maxNotifications));
+		});
+		return item.id;
+	}, [defaultDuration, maxNotifications]);
+	const success = (0, react.useCallback)((message, options) => showWithSeverity("success", message, options), [showWithSeverity]);
+	const info = (0, react.useCallback)((message, options) => showWithSeverity("info", message, options), [showWithSeverity]);
+	const warning = (0, react.useCallback)((message, options) => showWithSeverity("warning", message, options), [showWithSeverity]);
+	const error = (0, react.useCallback)((message, options) => showWithSeverity("error", message, options), [showWithSeverity]);
+	const value = (0, react.useMemo)(() => ({
+		show,
+		success,
+		info,
+		warning,
+		error,
+		dismiss,
+		dismissAll
+	}), [
+		show,
+		success,
+		info,
+		warning,
+		error,
+		dismiss,
+		dismissAll
+	]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(NotificationContext.Provider, {
+		value,
+		children: [children, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.Portal, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index$1.NotificationViewport, {
+			notifications,
+			position,
+			label,
+			onDismiss: dismiss
+		}) })]
+	});
+};
+exports.NotificationContext = NotificationContext;
+exports.NotificationProvider = NotificationProvider;
+
+//# sourceMappingURL=notification-provider.cjs.map

package/dist/components/overlays/notification/notification-provider.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"notification-provider.cjs","names":["createContext","useState","useCallback","normalizeNotification","useMemo","Portal","NotificationViewport"],"sources":["../../../../src/components/overlays/notification/notification-provider.tsx"],"sourcesContent":["\"use client\";\n\nimport { createContext, useCallback, useMemo, useState } from \"react\";\n\nimport { Portal } from \"../portal\";\nimport { NotificationViewport } from \".\";\nimport { normalizeNotification } from \"./notification.utils\";\n\nimport type {\n  NotificationContextValue,\n  NotificationItem,\n  NotificationOptions,\n  NotificationProviderProps,\n  NotificationSeverity,\n} from \"./notification.types\";\n\nconst NotificationContext = createContext<NotificationContextValue | null>(\n  null,\n);\n\nconst NotificationProvider = ({\n  children,\n  position = \"bottom-right\",\n  maxNotifications = 5,\n  defaultDuration = 5000,\n  label = \"Notifications\",\n}: NotificationProviderProps) => {\n  const [notifications, setNotifications] = useState<NotificationItem[]>([]);\n\n  const dismiss = useCallback((id: string) => {\n    setNotifications((current) => current.filter((item) => item.id !== id));\n  }, []);\n\n  const dismissAll = useCallback(() => {\n    setNotifications([]);\n  }, []);\n\n  const showWithSeverity = useCallback(\n    (\n      severity: NotificationSeverity,\n      message: string,\n      options?: NotificationOptions,\n    ) => {\n      const item = normalizeNotification(\n        {\n          ...options,\n          title: message,\n          severity,\n        },\n        severity,\n        { duration: defaultDuration },\n      );\n\n      setNotifications((current) => {\n        const existing = current.filter(\n          (notification) => notification.id !== item.id,\n        );\n\n        return [...existing, item].slice(-Math.max(1, maxNotifications));\n      });\n\n      return item.id;\n    },\n    [defaultDuration, maxNotifications],\n  );\n\n  const show = useCallback(\n    (input: string | NotificationOptions) => {\n      const item = normalizeNotification(input, \"info\", {\n        duration: defaultDuration,\n      });\n\n      setNotifications((current) => {\n        const existing = current.filter(\n          (notification) => notification.id !== item.id,\n        );\n\n        return [...existing, item].slice(-Math.max(1, maxNotifications));\n      });\n\n      return item.id;\n    },\n    [defaultDuration, maxNotifications],\n  );\n\n  const success = useCallback(\n    (message: string, options?: NotificationOptions) =>\n      showWithSeverity(\"success\", message, options),\n    [showWithSeverity],\n  );\n\n  const info = useCallback(\n    (message: string, options?: NotificationOptions) =>\n      showWithSeverity(\"info\", message, options),\n    [showWithSeverity],\n  );\n\n  const warning = useCallback(\n    (message: string, options?: NotificationOptions) =>\n      showWithSeverity(\"warning\", message, options),\n    [showWithSeverity],\n  );\n\n  const error = useCallback(\n    (message: string, options?: NotificationOptions) =>\n      showWithSeverity(\"error\", message, options),\n    [showWithSeverity],\n  );\n\n  const value = useMemo<NotificationContextValue>(\n    () => ({\n      show,\n      success,\n      info,\n      warning,\n      error,\n      dismiss,\n      dismissAll,\n    }),\n    [show, success, info, warning, error, dismiss, dismissAll],\n  );\n\n  return (\n    <NotificationContext.Provider value={value}>\n      {children}\n\n      <Portal>\n        <NotificationViewport\n          notifications={notifications}\n          position={position}\n          label={label}\n          onDismiss={dismiss}\n        />\n      </Portal>\n    </NotificationContext.Provider>\n  );\n};\n\nexport { NotificationProvider, NotificationContext };\n"],"mappings":";;;;;;;AAgBA,MAAM,uBAAA,GAAsBA,MAAAA,cAAAA,CAC1B,IACF;AAEA,MAAM,wBAAwB,EAC5B,UACA,WAAW,gBACX,mBAAmB,GACnB,kBAAkB,KAClB,QAAQ,sBACuB;CAC/B,MAAM,CAAC,eAAe,qBAAA,GAAoBC,MAAAA,SAAAA,CAA6B,CAAC,CAAC;CAEzE,MAAM,WAAA,GAAUC,MAAAA,YAAAA,EAAa,OAAe;EAC1C,kBAAkB,YAAY,QAAQ,QAAQ,SAAS,KAAK,OAAO,EAAE,CAAC;CACxE,GAAG,CAAC,CAAC;CAEL,MAAM,cAAA,GAAaA,MAAAA,YAAAA,OAAkB;EACnC,iBAAiB,CAAC,CAAC;CACrB,GAAG,CAAC,CAAC;CAEL,MAAM,oBAAA,GAAmBA,MAAAA,YAAAA,EAErB,UACA,SACA,YACG;EACH,MAAM,OAAOC,2BAAAA,sBACX;GACE,GAAG;GACH,OAAO;GACP;EACF,GACA,UACA,EAAE,UAAU,gBAAgB,CAC9B;EAEA,kBAAkB,YAAY;GAK5B,OAAO,CAAC,GAJS,QAAQ,QACtB,iBAAiB,aAAa,OAAO,KAAK,EAG3B,GAAG,IAAI,CAAC,CAAC,MAAM,CAAC,KAAK,IAAI,GAAG,gBAAgB,CAAC;EACjE,CAAC;EAED,OAAO,KAAK;CACd,GACA,CAAC,iBAAiB,gBAAgB,CACpC;CAEA,MAAM,QAAA,GAAOD,MAAAA,YAAAA,EACV,UAAwC;EACvC,MAAM,OAAOC,2BAAAA,sBAAsB,OAAO,QAAQ,EAChD,UAAU,gBACZ,CAAC;EAED,kBAAkB,YAAY;GAK5B,OAAO,CAAC,GAJS,QAAQ,QACtB,iBAAiB,aAAa,OAAO,KAAK,EAG3B,GAAG,IAAI,CAAC,CAAC,MAAM,CAAC,KAAK,IAAI,GAAG,gBAAgB,CAAC;EACjE,CAAC;EAED,OAAO,KAAK;CACd,GACA,CAAC,iBAAiB,gBAAgB,CACpC;CAEA,MAAM,WAAA,GAAUD,MAAAA,YAAAA,EACb,SAAiB,YAChB,iBAAiB,WAAW,SAAS,OAAO,GAC9C,CAAC,gBAAgB,CACnB;CAEA,MAAM,QAAA,GAAOA,MAAAA,YAAAA,EACV,SAAiB,YAChB,iBAAiB,QAAQ,SAAS,OAAO,GAC3C,CAAC,gBAAgB,CACnB;CAEA,MAAM,WAAA,GAAUA,MAAAA,YAAAA,EACb,SAAiB,YAChB,iBAAiB,WAAW,SAAS,OAAO,GAC9C,CAAC,gBAAgB,CACnB;CAEA,MAAM,SAAA,GAAQA,MAAAA,YAAAA,EACX,SAAiB,YAChB,iBAAiB,SAAS,SAAS,OAAO,GAC5C,CAAC,gBAAgB,CACnB;CAEA,MAAM,SAAA,GAAQE,MAAAA,QAAAA,QACL;EACL;EACA;EACA;EACA;EACA;EACA;EACA;CACF,IACA;EAAC;EAAM;EAAS;EAAM;EAAS;EAAO;EAAS;CAAU,CAC3D;CAEA,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,oBAAoB,UAArB;EAAqC;EAArC,UAAA,CACG,UAED,iBAAA,GAAA,kBAAA,IAAA,CAACC,cAAAA,QAAD,EAAA,UACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,gBAAAA,sBAAD;GACiB;GACL;GACH;GACP,WAAW;EACZ,CAAA,EACK,CAAA,CACoB;;AAElC"}

package/dist/components/overlays/notification/notification-provider.d.cts

@@ -0,0 +1,3 @@
+import { NotificationProviderProps } from "./notification.types.cjs";
+declare const NotificationProvider: ({ children, position, maxNotifications, defaultDuration, label }: NotificationProviderProps) => import("react").JSX.Element;
+export { NotificationProvider };

package/dist/components/overlays/notification/notification-provider.d.ts

@@ -0,0 +1,3 @@
+import { NotificationProviderProps } from "./notification.types.js";
+declare const NotificationProvider: ({ children, position, maxNotifications, defaultDuration, label }: NotificationProviderProps) => import("react").JSX.Element;
+export { NotificationProvider };

package/dist/components/overlays/notification/notification-provider.js

@@ -0,0 +1,68 @@
+"use client";
+import { Portal } from "../portal/index.js";
+import { NotificationViewport } from "./index.js";
+import { normalizeNotification } from "./notification.utils.js";
+import { createContext, useCallback, useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/overlays/notification/notification-provider.tsx
+const NotificationContext = createContext(null);
+const NotificationProvider = ({ children, position = "bottom-right", maxNotifications = 5, defaultDuration = 5e3, label = "Notifications" }) => {
+	const [notifications, setNotifications] = useState([]);
+	const dismiss = useCallback((id) => {
+		setNotifications((current) => current.filter((item) => item.id !== id));
+	}, []);
+	const dismissAll = useCallback(() => {
+		setNotifications([]);
+	}, []);
+	const showWithSeverity = useCallback((severity, message, options) => {
+		const item = normalizeNotification({
+			...options,
+			title: message,
+			severity
+		}, severity, { duration: defaultDuration });
+		setNotifications((current) => {
+			return [...current.filter((notification) => notification.id !== item.id), item].slice(-Math.max(1, maxNotifications));
+		});
+		return item.id;
+	}, [defaultDuration, maxNotifications]);
+	const show = useCallback((input) => {
+		const item = normalizeNotification(input, "info", { duration: defaultDuration });
+		setNotifications((current) => {
+			return [...current.filter((notification) => notification.id !== item.id), item].slice(-Math.max(1, maxNotifications));
+		});
+		return item.id;
+	}, [defaultDuration, maxNotifications]);
+	const success = useCallback((message, options) => showWithSeverity("success", message, options), [showWithSeverity]);
+	const info = useCallback((message, options) => showWithSeverity("info", message, options), [showWithSeverity]);
+	const warning = useCallback((message, options) => showWithSeverity("warning", message, options), [showWithSeverity]);
+	const error = useCallback((message, options) => showWithSeverity("error", message, options), [showWithSeverity]);
+	const value = useMemo(() => ({
+		show,
+		success,
+		info,
+		warning,
+		error,
+		dismiss,
+		dismissAll
+	}), [
+		show,
+		success,
+		info,
+		warning,
+		error,
+		dismiss,
+		dismissAll
+	]);
+	return /* @__PURE__ */ jsxs(NotificationContext.Provider, {
+		value,
+		children: [children, /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(NotificationViewport, {
+			notifications,
+			position,
+			label,
+			onDismiss: dismiss
+		}) })]
+	});
+};
+export { NotificationContext, NotificationProvider };
+
+//# sourceMappingURL=notification-provider.js.map

package/dist/components/overlays/notification/notification-provider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"notification-provider.js","names":[],"sources":["../../../../src/components/overlays/notification/notification-provider.tsx"],"sourcesContent":["\"use client\";\n\nimport { createContext, useCallback, useMemo, useState } from \"react\";\n\nimport { Portal } from \"../portal\";\nimport { NotificationViewport } from \".\";\nimport { normalizeNotification } from \"./notification.utils\";\n\nimport type {\n  NotificationContextValue,\n  NotificationItem,\n  NotificationOptions,\n  NotificationProviderProps,\n  NotificationSeverity,\n} from \"./notification.types\";\n\nconst NotificationContext = createContext<NotificationContextValue | null>(\n  null,\n);\n\nconst NotificationProvider = ({\n  children,\n  position = \"bottom-right\",\n  maxNotifications = 5,\n  defaultDuration = 5000,\n  label = \"Notifications\",\n}: NotificationProviderProps) => {\n  const [notifications, setNotifications] = useState<NotificationItem[]>([]);\n\n  const dismiss = useCallback((id: string) => {\n    setNotifications((current) => current.filter((item) => item.id !== id));\n  }, []);\n\n  const dismissAll = useCallback(() => {\n    setNotifications([]);\n  }, []);\n\n  const showWithSeverity = useCallback(\n    (\n      severity: NotificationSeverity,\n      message: string,\n      options?: NotificationOptions,\n    ) => {\n      const item = normalizeNotification(\n        {\n          ...options,\n          title: message,\n          severity,\n        },\n        severity,\n        { duration: defaultDuration },\n      );\n\n      setNotifications((current) => {\n        const existing = current.filter(\n          (notification) => notification.id !== item.id,\n        );\n\n        return [...existing, item].slice(-Math.max(1, maxNotifications));\n      });\n\n      return item.id;\n    },\n    [defaultDuration, maxNotifications],\n  );\n\n  const show = useCallback(\n    (input: string | NotificationOptions) => {\n      const item = normalizeNotification(input, \"info\", {\n        duration: defaultDuration,\n      });\n\n      setNotifications((current) => {\n        const existing = current.filter(\n          (notification) => notification.id !== item.id,\n        );\n\n        return [...existing, item].slice(-Math.max(1, maxNotifications));\n      });\n\n      return item.id;\n    },\n    [defaultDuration, maxNotifications],\n  );\n\n  const success = useCallback(\n    (message: string, options?: NotificationOptions) =>\n      showWithSeverity(\"success\", message, options),\n    [showWithSeverity],\n  );\n\n  const info = useCallback(\n    (message: string, options?: NotificationOptions) =>\n      showWithSeverity(\"info\", message, options),\n    [showWithSeverity],\n  );\n\n  const warning = useCallback(\n    (message: string, options?: NotificationOptions) =>\n      showWithSeverity(\"warning\", message, options),\n    [showWithSeverity],\n  );\n\n  const error = useCallback(\n    (message: string, options?: NotificationOptions) =>\n      showWithSeverity(\"error\", message, options),\n    [showWithSeverity],\n  );\n\n  const value = useMemo<NotificationContextValue>(\n    () => ({\n      show,\n      success,\n      info,\n      warning,\n      error,\n      dismiss,\n      dismissAll,\n    }),\n    [show, success, info, warning, error, dismiss, dismissAll],\n  );\n\n  return (\n    <NotificationContext.Provider value={value}>\n      {children}\n\n      <Portal>\n        <NotificationViewport\n          notifications={notifications}\n          position={position}\n          label={label}\n          onDismiss={dismiss}\n        />\n      </Portal>\n    </NotificationContext.Provider>\n  );\n};\n\nexport { NotificationProvider, NotificationContext };\n"],"mappings":";;;;;;;AAgBA,MAAM,sBAAsB,cAC1B,IACF;AAEA,MAAM,wBAAwB,EAC5B,UACA,WAAW,gBACX,mBAAmB,GACnB,kBAAkB,KAClB,QAAQ,sBACuB;CAC/B,MAAM,CAAC,eAAe,oBAAoB,SAA6B,CAAC,CAAC;CAEzE,MAAM,UAAU,aAAa,OAAe;EAC1C,kBAAkB,YAAY,QAAQ,QAAQ,SAAS,KAAK,OAAO,EAAE,CAAC;CACxE,GAAG,CAAC,CAAC;CAEL,MAAM,aAAa,kBAAkB;EACnC,iBAAiB,CAAC,CAAC;CACrB,GAAG,CAAC,CAAC;CAEL,MAAM,mBAAmB,aAErB,UACA,SACA,YACG;EACH,MAAM,OAAO,sBACX;GACE,GAAG;GACH,OAAO;GACP;EACF,GACA,UACA,EAAE,UAAU,gBAAgB,CAC9B;EAEA,kBAAkB,YAAY;GAK5B,OAAO,CAAC,GAJS,QAAQ,QACtB,iBAAiB,aAAa,OAAO,KAAK,EAG3B,GAAG,IAAI,CAAC,CAAC,MAAM,CAAC,KAAK,IAAI,GAAG,gBAAgB,CAAC;EACjE,CAAC;EAED,OAAO,KAAK;CACd,GACA,CAAC,iBAAiB,gBAAgB,CACpC;CAEA,MAAM,OAAO,aACV,UAAwC;EACvC,MAAM,OAAO,sBAAsB,OAAO,QAAQ,EAChD,UAAU,gBACZ,CAAC;EAED,kBAAkB,YAAY;GAK5B,OAAO,CAAC,GAJS,QAAQ,QACtB,iBAAiB,aAAa,OAAO,KAAK,EAG3B,GAAG,IAAI,CAAC,CAAC,MAAM,CAAC,KAAK,IAAI,GAAG,gBAAgB,CAAC;EACjE,CAAC;EAED,OAAO,KAAK;CACd,GACA,CAAC,iBAAiB,gBAAgB,CACpC;CAEA,MAAM,UAAU,aACb,SAAiB,YAChB,iBAAiB,WAAW,SAAS,OAAO,GAC9C,CAAC,gBAAgB,CACnB;CAEA,MAAM,OAAO,aACV,SAAiB,YAChB,iBAAiB,QAAQ,SAAS,OAAO,GAC3C,CAAC,gBAAgB,CACnB;CAEA,MAAM,UAAU,aACb,SAAiB,YAChB,iBAAiB,WAAW,SAAS,OAAO,GAC9C,CAAC,gBAAgB,CACnB;CAEA,MAAM,QAAQ,aACX,SAAiB,YAChB,iBAAiB,SAAS,SAAS,OAAO,GAC5C,CAAC,gBAAgB,CACnB;CAEA,MAAM,QAAQ,eACL;EACL;EACA;EACA;EACA;EACA;EACA;EACA;CACF,IACA;EAAC;EAAM;EAAS;EAAM;EAAS;EAAO;EAAS;CAAU,CAC3D;CAEA,OACE,qBAAC,oBAAoB,UAArB;EAAqC;EAArC,UAAA,CACG,UAED,oBAAC,QAAD,EAAA,UACE,oBAAC,sBAAD;GACiB;GACL;GACH;GACP,WAAW;EACZ,CAAA,EACK,CAAA,CACoB;;AAElC"}