@burdenoff/microfe-subscriberbot 2026.629.1 → 2026.706.2

package/dist/subscriberbot/components/Modal.js

@@ -0,0 +1,51 @@
+import { useEffect as e, useId as t, useRef as n } from "react";
+import { X as r } from "lucide-react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/subscriberbot/components/Modal.tsx
+var o = ({ title: o, description: s, onClose: c, children: l, maxWidthClassName: u = "max-w-lg" }) => {
+	let d = t(), f = n(null);
+	return e(() => {
+		let e = (e) => {
+			e.key === "Escape" && c();
+		};
+		document.addEventListener("keydown", e);
+		let t = f.current;
+		return (t?.querySelector("input:not([type=\"hidden\"]), select, textarea") ?? t?.querySelector("button, [href], [tabindex]:not([tabindex=\"-1\"])"))?.focus(), () => document.removeEventListener("keydown", e);
+	}, [c]), /* @__PURE__ */ i("div", {
+		className: "fixed inset-0 z-50 flex items-center justify-center bg-bg-overlay p-4 backdrop-blur-sm",
+		onMouseDown: (e) => {
+			e.target === e.currentTarget && c();
+		},
+		children: /* @__PURE__ */ a("div", {
+			ref: f,
+			role: "dialog",
+			"aria-modal": "true",
+			"aria-labelledby": d,
+			className: `max-h-[90vh] w-full ${u} overflow-y-auto rounded-lg border border-border-subtle bg-bg-surface p-5 shadow-lg`,
+			children: [/* @__PURE__ */ a("div", {
+				className: "mb-4 flex items-start justify-between gap-3",
+				children: [/* @__PURE__ */ a("div", {
+					className: "min-w-0",
+					children: [/* @__PURE__ */ i("h3", {
+						id: d,
+						className: "text-lg font-semibold text-text-primary",
+						children: o
+					}), s && /* @__PURE__ */ i("p", {
+						className: "mt-0.5 text-xs text-text-secondary",
+						children: s
+					})]
+				}), /* @__PURE__ */ i("button", {
+					type: "button",
+					onClick: c,
+					"aria-label": "Close dialog",
+					className: "shrink-0 rounded-md p-1 text-text-secondary hover:text-text-primary",
+					children: /* @__PURE__ */ i(r, { className: "h-5 w-5" })
+				})]
+			}), l]
+		})
+	});
+};
+//#endregion
+export { o as Modal };
+
+//# sourceMappingURL=Modal.js.map

package/dist/subscriberbot/components/Modal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.js","names":[],"sources":["../../../src/subscriberbot/components/Modal.tsx"],"sourcesContent":["/**\n * Accessible modal dialog\n * @module subscriberbot/components\n *\n * A small, dependency-light dialog used for the MFE's create/edit forms.\n * Handles the a11y contract every modal here must meet:\n *  - `role=\"dialog\"` + `aria-modal=\"true\"` + `aria-labelledby` (wired to the\n *    heading id),\n *  - Escape-to-close,\n *  - initial focus moved to the first form field,\n *  - a semantic overlay scrim (`bg-bg-overlay`, never raw black),\n *  - responsive layout (full-width on mobile, scrolls when the form is long).\n */\n\nimport { useEffect, useId, useRef, type FC, type ReactNode } from 'react';\nimport { X } from 'lucide-react';\n\ninterface ModalProps {\n  title: string;\n  description?: string;\n  onClose: () => void;\n  children: ReactNode;\n  /** Constrain width. Defaults to a comfortable single-column form width. */\n  maxWidthClassName?: string;\n}\n\nexport const Modal: FC<ModalProps> = ({\n  title,\n  description,\n  onClose,\n  children,\n  maxWidthClassName = 'max-w-lg',\n}) => {\n  const titleId = useId();\n  const panelRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    const onKeyDown = (e: KeyboardEvent) => {\n      if (e.key === 'Escape') onClose();\n    };\n    document.addEventListener('keydown', onKeyDown);\n\n    // Move initial focus to the first interactive form field (falling back to\n    // any focusable control) so keyboard users land inside the dialog.\n    const panel = panelRef.current;\n    const firstField = panel?.querySelector<HTMLElement>(\n      'input:not([type=\"hidden\"]), select, textarea'\n    );\n    (\n      firstField ??\n      panel?.querySelector<HTMLElement>('button, [href], [tabindex]:not([tabindex=\"-1\"])')\n    )?.focus();\n\n    return () => document.removeEventListener('keydown', onKeyDown);\n  }, [onClose]);\n\n  return (\n    <div\n      className=\"fixed inset-0 z-50 flex items-center justify-center bg-bg-overlay p-4 backdrop-blur-sm\"\n      onMouseDown={(e) => {\n        if (e.target === e.currentTarget) onClose();\n      }}\n    >\n      <div\n        ref={panelRef}\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-labelledby={titleId}\n        className={`max-h-[90vh] w-full ${maxWidthClassName} overflow-y-auto rounded-lg border border-border-subtle bg-bg-surface p-5 shadow-lg`}\n      >\n        <div className=\"mb-4 flex items-start justify-between gap-3\">\n          <div className=\"min-w-0\">\n            <h3 id={titleId} className=\"text-lg font-semibold text-text-primary\">\n              {title}\n            </h3>\n            {description && <p className=\"mt-0.5 text-xs text-text-secondary\">{description}</p>}\n          </div>\n          <button\n            type=\"button\"\n            onClick={onClose}\n            aria-label=\"Close dialog\"\n            className=\"shrink-0 rounded-md p-1 text-text-secondary hover:text-text-primary\"\n          >\n            <X className=\"h-5 w-5\" />\n          </button>\n        </div>\n        {children}\n      </div>\n    </div>\n  );\n};\n"],"mappings":";;;;AA0BA,IAAa,KAAyB,EACpC,UACA,gBACA,YACA,aACA,uBAAoB,iBAChB;CACJ,IAAM,IAAU,GAAO,EACjB,IAAW,EAAuB,KAAK;AAsB7C,QApBA,QAAgB;EACd,IAAM,KAAa,MAAqB;AACtC,GAAI,EAAE,QAAQ,YAAU,GAAS;;AAEnC,WAAS,iBAAiB,WAAW,EAAU;EAI/C,IAAM,IAAQ,EAAS;AASvB,UARmB,GAAO,cACxB,iDACD,IAGC,GAAO,cAA2B,oDAAkD,GACnF,OAAO,QAEG,SAAS,oBAAoB,WAAW,EAAU;IAC9D,CAAC,EAAQ,CAAC,EAGX,kBAAC,OAAD;EACE,WAAU;EACV,cAAc,MAAM;AAClB,GAAI,EAAE,WAAW,EAAE,iBAAe,GAAS;;YAG7C,kBAAC,OAAD;GACE,KAAK;GACL,MAAK;GACL,cAAW;GACX,mBAAiB;GACjB,WAAW,uBAAuB,EAAkB;aALtD,CAOE,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,MAAD;MAAI,IAAI;MAAS,WAAU;gBACxB;MACE,CAAA,EACJ,KAAe,kBAAC,KAAD;MAAG,WAAU;gBAAsC;MAAgB,CAAA,CAC/E;QACN,kBAAC,UAAD;KACE,MAAK;KACL,SAAS;KACT,cAAW;KACX,WAAU;eAEV,kBAAC,GAAD,EAAG,WAAU,WAAY,CAAA;KAClB,CAAA,CACL;OACL,EACG;;EACF,CAAA"}