@planningcenter/sweetest-alert 0.2.3 → 0.3.1

package/dist/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),v=require("react-dom"),h=require("@planningcenter/tapestry");var o={},_;function C(){if(_)return o;_=1;var c=v;if(process.env.NODE_ENV==="production")o.createRoot=c.createRoot,o.hydrateRoot=c.hydrateRoot;else{var r=c.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;o.createRoot=function(l,n){r.usingClientEntryPoint=!0;try{return c.createRoot(l,n)}finally{r.usingClientEntryPoint=!1}},o.hydrateRoot=function(l,n,s){r.usingClientEntryPoint=!0;try{return c.hydrateRoot(l,n,s)}finally{r.usingClientEntryPoint=!1}}}return o}var f=C();const p="M8,0c2.1217,0 4.1566,0.84286 5.6569,2.34315c1.5002,1.50029 2.3431,3.53512 2.3431,5.65685c0,1.58225 -0.4692,3.129 -1.3482,4.4446c-0.8791,1.3156 -2.1285,2.3409 -3.5903,2.9464c-1.46184,0.6055 -3.07037,0.764 -4.62222,0.4553c-1.55185,-0.3087 -2.97731,-1.0706 -4.09613,-2.1894c-1.11882,-1.1189 -1.88075,-2.5443 -2.18943,-4.09618c-0.30868,-1.55185 -0.15025,-3.16038 0.45525,-4.62219c0.6055,-1.46181 1.63088,-2.71124 2.94647,-3.59029c1.31559,-0.87905 2.86231,-1.34824 4.44456,-1.34824zM12.57,6.07l-1.14,-1.14l-4.43,4.44l-2.43,-2.44l-1.14,1.14l3.57,3.56z",w="M15.7713,14.0548c0.0002,0.133 -0.0347,0.2638 -0.1011,0.3791c-0.0664,0.1153 -0.162,0.211 -0.2772,0.2776c-0.1152,0.0665 -0.246,0.1015 -0.379,0.1015h-14.02801c-0.13305,0 -0.26377,-0.035 -0.37898,-0.1015c-0.11521,-0.0666 -0.21084,-0.1623 -0.27725,-0.2776c-0.06642,-0.1153 -0.10127,-0.2461 -0.10106,-0.3791c0.00022,-0.1331 0.0355,-0.2637 0.10229,-0.3788l7.014,-12.11501c0.06631,-0.11506 0.16176,-0.21062 0.27675,-0.27707c0.11498,-0.06644 0.24544,-0.10142 0.37825,-0.10142c0.1328,0 0.26326,0.03498 0.37824,0.10142c0.11499,0.06645 0.21044,0.16201 0.27676,0.27707l7.01401,12.11501c0.0668,0.1151 0.1021,0.2457 0.1023,0.3788zM8.75699,11.028h-1.514v1.514h1.514zM8.75699,6.48499h-1.514v3.029h1.514z",E="M8.8,4h-1.6v1.6h1.6zM8.8,7.2h-1.6v4.8h1.6zM8,0c2.1217,0 4.1566,0.84286 5.6569,2.34315c1.5002,1.50029 2.3431,3.53512 2.3431,5.65685c0,1.58225 -0.4692,3.129 -1.3482,4.4446c-0.8791,1.3156 -2.1285,2.3409 -3.5903,2.9464c-1.46184,0.6055 -3.07037,0.764 -4.62222,0.4553c-1.55185,-0.3087 -2.97731,-1.0706 -4.09613,-2.1894c-1.11882,-1.1189 -1.88075,-2.5443 -2.18943,-4.09618c-0.30868,-1.55185 -0.15025,-3.16038 0.45525,-4.62219c0.6055,-1.46181 1.63088,-2.71124 2.94647,-3.59029c1.31559,-0.87905 2.86231,-1.34824 4.44456,-1.34824z",R="M11.3951,10.2621l-2.26245,-2.2621l2.26245,-2.26215l-1.1317,-1.1316l-2.2625,2.26215l-2.26246,-2.26215l-1.13175,1.1316l2.26246,2.26215l-2.26246,2.2621l1.13175,1.1316l2.26246,-2.2621l2.2625,2.2621zM16,8c0,2.1214 -0.8421,4.156 -2.3414,5.6569c-1.119,1.1188 -2.5446,1.8807 -4.09668,2.1894c-1.55205,0.3087 -3.16079,0.1502 -4.62278,-0.4553c-1.46199,-0.6055 -2.71157,-1.6309 -3.59073,-2.9465c-0.87916,-1.3156 -1.34841,-2.86226 -1.34841,-4.4445c0,-1.58224 0.46925,-3.12895 1.34841,-4.44453c0.87916,-1.31559 2.12874,-2.34097 3.59073,-2.94648c1.46199,-0.60551 3.07073,-0.76395 4.62278,-0.45529c1.55208,0.30866 2.97768,1.07056 4.09668,2.18935c1.4993,1.50098 2.3414,3.5356 2.3414,5.65695z";function x({onCancel:c,onConfirm:r,confirmButton:l="Okay",content:n,hideCancel:s=!1,title:y,type:a="warning"}){const t=document.createElement("dialog");t.className="pco-sweetest-alert",document.body.appendChild(t);const d=f.createRoot(t),i=()=>{d.unmount(),document.body.removeChild(t)},g=()=>{i(),r?.()},u=()=>{i(),c?.()},m=()=>{switch(a){case"success":return p;case"error":return R;case"info":return E;case"danger":case"warning":return w}};return d.render(e.jsxs(e.Fragment,{children:[e.jsx("svg",{className:`pco-sweetest-alert__icon pco-sweetest-alert--${a}`,width:"48",height:"48",viewBox:"0 0 16 16","aria-hidden":"true",children:e.jsx("path",{d:m()})}),e.jsx("h2",{className:"pco-sweetest-alert__title",children:y}),e.jsx("div",{className:"pco-sweetest-alert__body",children:typeof n=="string"?e.jsx("p",{children:n}):n}),e.jsxs("div",{className:"pco-sweetest-alert__actions",children:[!s&&e.jsx(h.Button,{label:"Cancel",kind:"ghost",onClick:u}),e.jsx(h.Button,{label:l,kind:a==="danger"?"delete":"primary",onClick:g})]})]})),t.showModal(),t.addEventListener("close",u),{show:()=>t.showModal(),close:()=>t.close(),cleanup:i}}exports.SweetestAlert=x;

package/dist/index.d.ts

@@ -0,0 +1 @@
+export { SweetestAlert } from "./sweetest_alert.tsx";

package/dist/index.js

@@ -0,0 +1,108 @@
+import { jsxs as u, Fragment as g, jsx as r } from "react/jsx-runtime";
+import v from "react-dom";
+import { Button as m } from "@planningcenter/tapestry";
+var o = {}, _;
+function y() {
+  if (_) return o;
+  _ = 1;
+  var c = v;
+  if (process.env.NODE_ENV === "production")
+    o.createRoot = c.createRoot, o.hydrateRoot = c.hydrateRoot;
+  else {
+    var n = c.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
+    o.createRoot = function(l, t) {
+      n.usingClientEntryPoint = !0;
+      try {
+        return c.createRoot(l, t);
+      } finally {
+        n.usingClientEntryPoint = !1;
+      }
+    }, o.hydrateRoot = function(l, t, a) {
+      n.usingClientEntryPoint = !0;
+      try {
+        return c.hydrateRoot(l, t, a);
+      } finally {
+        n.usingClientEntryPoint = !1;
+      }
+    };
+  }
+  return o;
+}
+var w = y();
+const E = "M8,0c2.1217,0 4.1566,0.84286 5.6569,2.34315c1.5002,1.50029 2.3431,3.53512 2.3431,5.65685c0,1.58225 -0.4692,3.129 -1.3482,4.4446c-0.8791,1.3156 -2.1285,2.3409 -3.5903,2.9464c-1.46184,0.6055 -3.07037,0.764 -4.62222,0.4553c-1.55185,-0.3087 -2.97731,-1.0706 -4.09613,-2.1894c-1.11882,-1.1189 -1.88075,-2.5443 -2.18943,-4.09618c-0.30868,-1.55185 -0.15025,-3.16038 0.45525,-4.62219c0.6055,-1.46181 1.63088,-2.71124 2.94647,-3.59029c1.31559,-0.87905 2.86231,-1.34824 4.44456,-1.34824zM12.57,6.07l-1.14,-1.14l-4.43,4.44l-2.43,-2.44l-1.14,1.14l3.57,3.56z", R = "M15.7713,14.0548c0.0002,0.133 -0.0347,0.2638 -0.1011,0.3791c-0.0664,0.1153 -0.162,0.211 -0.2772,0.2776c-0.1152,0.0665 -0.246,0.1015 -0.379,0.1015h-14.02801c-0.13305,0 -0.26377,-0.035 -0.37898,-0.1015c-0.11521,-0.0666 -0.21084,-0.1623 -0.27725,-0.2776c-0.06642,-0.1153 -0.10127,-0.2461 -0.10106,-0.3791c0.00022,-0.1331 0.0355,-0.2637 0.10229,-0.3788l7.014,-12.11501c0.06631,-0.11506 0.16176,-0.21062 0.27675,-0.27707c0.11498,-0.06644 0.24544,-0.10142 0.37825,-0.10142c0.1328,0 0.26326,0.03498 0.37824,0.10142c0.11499,0.06645 0.21044,0.16201 0.27676,0.27707l7.01401,12.11501c0.0668,0.1151 0.1021,0.2457 0.1023,0.3788zM8.75699,11.028h-1.514v1.514h1.514zM8.75699,6.48499h-1.514v3.029h1.514z", M = "M8.8,4h-1.6v1.6h1.6zM8.8,7.2h-1.6v4.8h1.6zM8,0c2.1217,0 4.1566,0.84286 5.6569,2.34315c1.5002,1.50029 2.3431,3.53512 2.3431,5.65685c0,1.58225 -0.4692,3.129 -1.3482,4.4446c-0.8791,1.3156 -2.1285,2.3409 -3.5903,2.9464c-1.46184,0.6055 -3.07037,0.764 -4.62222,0.4553c-1.55185,-0.3087 -2.97731,-1.0706 -4.09613,-2.1894c-1.11882,-1.1189 -1.88075,-2.5443 -2.18943,-4.09618c-0.30868,-1.55185 -0.15025,-3.16038 0.45525,-4.62219c0.6055,-1.46181 1.63088,-2.71124 2.94647,-3.59029c1.31559,-0.87905 2.86231,-1.34824 4.44456,-1.34824z", z = "M11.3951,10.2621l-2.26245,-2.2621l2.26245,-2.26215l-1.1317,-1.1316l-2.2625,2.26215l-2.26246,-2.26215l-1.13175,1.1316l2.26246,2.26215l-2.26246,2.2621l1.13175,1.1316l2.26246,-2.2621l2.2625,2.2621zM16,8c0,2.1214 -0.8421,4.156 -2.3414,5.6569c-1.119,1.1188 -2.5446,1.8807 -4.09668,2.1894c-1.55205,0.3087 -3.16079,0.1502 -4.62278,-0.4553c-1.46199,-0.6055 -2.71157,-1.6309 -3.59073,-2.9465c-0.87916,-1.3156 -1.34841,-2.86226 -1.34841,-4.4445c0,-1.58224 0.46925,-3.12895 1.34841,-4.44453c0.87916,-1.31559 2.12874,-2.34097 3.59073,-2.94648c1.46199,-0.60551 3.07073,-0.76395 4.62278,-0.45529c1.55208,0.30866 2.97768,1.07056 4.09668,2.18935c1.4993,1.50098 2.3414,3.5356 2.3414,5.65695z";
+function O({
+  // Optional: Callback function executed when cancel button is clicked
+  onCancel: c,
+  // Optional: Callback function executed when confirm button is clicked
+  onConfirm: n,
+  // Optional: Text for the confirm button. Defaults to "Okay".
+  confirmButton: l = "Okay",
+  // Required: The body content explaining the alert.
+  // Accepts a React fragment or a string of text.
+  content: t,
+  // Optional: When true, hides the cancel button for simple notifications.
+  // Defaults to "false".
+  hideCancel: a = !1,
+  // Required: The main heading text displayed at the top of the modal
+  title: f,
+  // Optional: The visual type of alert, affects icon and styling.
+  // Values can be "info", "success", "error", "danger", or "warning" (default).
+  type: s = "warning"
+}) {
+  const e = document.createElement("dialog");
+  e.className = "pco-sweetest-alert", document.body.appendChild(e);
+  const d = w.createRoot(e), i = () => {
+    d.unmount(), document.body.removeChild(e);
+  }, p = () => {
+    i(), n?.();
+  }, h = () => {
+    i(), c?.();
+  }, C = () => {
+    switch (s) {
+      case "success":
+        return E;
+      case "error":
+        return z;
+      case "info":
+        return M;
+      case "danger":
+      case "warning":
+        return R;
+    }
+  };
+  return d.render(
+    /* @__PURE__ */ u(g, { children: [
+      /* @__PURE__ */ r(
+        "svg",
+        {
+          className: `pco-sweetest-alert__icon pco-sweetest-alert--${s}`,
+          width: "48",
+          height: "48",
+          viewBox: "0 0 16 16",
+          "aria-hidden": "true",
+          children: /* @__PURE__ */ r("path", { d: C() })
+        }
+      ),
+      /* @__PURE__ */ r("h2", { className: "pco-sweetest-alert__title", children: f }),
+      /* @__PURE__ */ r("div", { className: "pco-sweetest-alert__body", children: typeof t == "string" ? /* @__PURE__ */ r("p", { children: t }) : t }),
+      /* @__PURE__ */ u("div", { className: "pco-sweetest-alert__actions", children: [
+        !a && /* @__PURE__ */ r(m, { label: "Cancel", kind: "ghost", onClick: h }),
+        /* @__PURE__ */ r(
+          m,
+          {
+            label: l,
+            kind: s === "danger" ? "delete" : "primary",
+            onClick: p
+          }
+        )
+      ] })
+    ] })
+  ), e.showModal(), e.addEventListener("close", h), {
+    show: () => e.showModal(),
+    close: () => e.close(),
+    cleanup: i
+  };
+}
+export {
+  O as SweetestAlert
+};

package/dist/style.css

@@ -0,0 +1,62 @@
+.pco-sweetest-alert {
+  background: var(--t-surface-color-card);
+  border: 0;
+  border-radius: var(--t-border-radius-lg);
+  box-shadow: 0 0 var(--t-spacing-3) var(--t-fill-color-transparency-dark-020);
+  font-size: var(--t-font-size-md);
+  margin: auto;
+  max-width: 600px;
+  padding: var(--t-spacing-4) var(--t-spacing-4) 0;
+  text-align: center;
+
+  &::backdrop {
+    background: var(--t-fill-color-transparency-dark-040);
+  }
+}
+
+.pco-sweetest-alert__icon {
+  height: var(--t-element-size-3xl);
+  margin-block: var(--t-spacing-1);
+  width: var(--t-element-size-3xl);
+
+  &.pco-sweetest-alert--info {
+    fill: var(--t-icon-color-status-info-primary);
+  }
+
+  &.pco-sweetest-alert--success {
+    fill: var(--t-icon-color-status-success-primary);
+  }
+
+  &.pco-sweetest-alert--warning {
+    fill: var(--t-icon-color-status-warning-primary);
+  }
+
+  &:is(.pco-sweetest-alert--danger, .pco-sweetest-alert--error) {
+    fill: var(--t-icon-color-status-error-primary);
+  }
+}
+
+.pco-sweetest-alert__title {
+  color: var(--t-text-color-default-headline);
+  font-size: var(--t-font-size-2xl);
+  font-weight: var(--t-font-weight-semibold);
+  margin-block: var(--t-spacing-2);
+}
+
+.pco-sweetest-alert__body {
+  color: var(--t-text-color-default-primary);
+  font-weight: var(--t-font-weight-normal);
+  line-height: 1.4;
+  margin-bottom: var(--t-spacing-4);
+}
+
+.pco-sweetest-alert__actions {
+  align-items: center;
+  border-top: var(--t-border-width-default) solid var(--t-border-color-default-base);
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--t-spacing-1);
+  justify-content: center;
+  margin-inline: calc(-1 * var(--t-spacing-4));
+  padding: var(--t-spacing-3) var(--t-spacing-4);
+}

package/dist/sweetest_alert.d.ts

@@ -0,0 +1,16 @@
+import React from "react";
+type AlertTypes = "info" | "success" | "error" | "danger" | "warning";
+export declare function SweetestAlert({ onCancel, onConfirm, confirmButton, content, hideCancel, title, type, }: {
+    onCancel?: () => void;
+    onConfirm?: () => void;
+    confirmButton?: string;
+    content: string | React.ReactNode;
+    hideCancel?: boolean;
+    title: string;
+    type?: AlertTypes;
+}): {
+    show: () => void;
+    close: () => void;
+    cleanup: () => void;
+};
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@planningcenter/sweetest-alert",
-  "version": "0.2.3",
+  "version": "0.3.1",
   "description": "The sweetest alert ever",
   "type": "module",
   "packageManager": "yarn@1.22.22",
@@ -36,7 +36,8 @@
     "preview": "vite preview --config vite.config.docs.ts",
     "test": "vitest",
     "lint:js": "eslint .",
-    "lint:css": "stylelint \"**/*.css\""
+    "lint:css": "stylelint \"**/*.css\"",
+    "prepublishOnly": "yarn build:lib"
   },
   "peerDependencies": {
     "@planningcenter/icons": "^15.26.0",
@@ -60,8 +61,10 @@
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^7.0.0",
     "jsdom": "^27.0.0",
+    "prismjs": "^1.30.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-simple-code-editor": "^0.14.1",
     "stylelint": "^16.25.0",
     "typescript": "^5.9.3",
     "typescript-eslint": "^8.46.1",
@@ -71,9 +74,5 @@
   "volta": {
     "node": "22.20.0",
     "yarn": "1.22.22"
-  },
-  "dependencies": {
-    "prismjs": "^1.30.0",
-    "react-simple-code-editor": "^0.14.1"
   }
 }