@lockerverse/react 0.2.58 → 0.2.59

package/dist/payment.d.ts

@@ -1,2 +1,3 @@
-import { a as LockerversePaymentSelectionItem, c as LockerversePaymentUncertain, i as LockerversePaymentRecovery, l as LockerverseStripeLoader, n as LockerversePaymentBranding, o as LockerversePaymentStyle, r as LockerversePaymentProps, s as LockerversePaymentTheme, t as LockerversePayment } from "./lockerverse-payment.js";
+import { a as LockerversePaymentRecovery, c as LockerversePaymentTheme, i as LockerversePaymentProps, l as LockerversePaymentUncertain, o as LockerversePaymentSelectionItem, r as LockerversePaymentBranding, s as LockerversePaymentStyle, u as LockerverseStripeLoader } from "./types.js";
+import { t as LockerversePayment } from "./lockerverse-payment.js";
 export { LockerversePayment, type LockerversePaymentBranding, type LockerversePaymentProps, type LockerversePaymentRecovery, type LockerversePaymentSelectionItem, type LockerversePaymentStyle, type LockerversePaymentTheme, type LockerversePaymentUncertain, type LockerverseStripeLoader };

package/dist/styles.css

@@ -1035,3 +1035,249 @@
     transition-duration: 0.01ms !important;
   }
 }
+
+.lockerverse-launcher,
+.lockerverse-launcher__dialog {
+  --lockerverse-accent: #38d77a;
+  --lockerverse-accent-contrast: #000;
+  --lockerverse-bg: #080808;
+  --lockerverse-border: rgb(255 255 255 / 12%);
+  --lockerverse-control: #121212;
+  --lockerverse-danger: #f08a98;
+  --lockerverse-font-family:
+    ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
+    sans-serif;
+  --lockerverse-muted: rgb(255 255 255 / 64%);
+  --lockerverse-radius: 10px;
+  --lockerverse-subtle: rgb(255 255 255 / 8%);
+  --lockerverse-text: #fff;
+  box-sizing: border-box;
+  font-family: var(--lockerverse-font-family);
+}
+
+.lockerverse-launcher[data-lockerverse-theme="light"],
+.lockerverse-launcher__dialog[data-lockerverse-theme="light"] {
+  --lockerverse-bg: #fff;
+  --lockerverse-border: rgb(18 20 22 / 14%);
+  --lockerverse-control: #f5f6f7;
+  --lockerverse-danger: #c52b3e;
+  --lockerverse-muted: rgb(18 20 22 / 64%);
+  --lockerverse-subtle: rgb(18 20 22 / 8%);
+  --lockerverse-text: #121416;
+}
+
+.lockerverse-launcher {
+  z-index: 1000;
+  min-height: 48px;
+  padding: 12px 20px;
+  font: inherit;
+  font-weight: 700;
+  color: var(--lockerverse-accent-contrast);
+  cursor: pointer;
+  background: var(--lockerverse-accent);
+  border: 0;
+  border-radius: 999px;
+  box-shadow: 0 14px 34px rgb(0 0 0 / 28%);
+}
+
+.lockerverse-launcher--bottom-left,
+.lockerverse-launcher--bottom-right {
+  position: fixed;
+  bottom: 24px;
+}
+
+.lockerverse-launcher--bottom-left {
+  left: 24px;
+}
+
+.lockerverse-launcher--bottom-right {
+  right: 24px;
+}
+
+.lockerverse-launcher:focus-visible,
+.lockerverse-launcher__dialog button:focus-visible,
+.lockerverse-launcher__dialog input:focus-visible {
+  outline: 2px solid var(--lockerverse-accent);
+  outline-offset: 3px;
+}
+
+.lockerverse-launcher__backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+  background: rgb(0 0 0 / 68%);
+  backdrop-filter: blur(4px);
+}
+
+.lockerverse-launcher__viewport {
+  position: fixed;
+  inset: 0;
+  z-index: 1001;
+  display: grid;
+  place-items: center;
+  padding: 24px;
+}
+
+.lockerverse-launcher__dialog {
+  position: relative;
+  width: min(100%, 520px);
+  max-height: calc(100dvh - 48px);
+  padding: 24px;
+  overflow-y: auto;
+  color: var(--lockerverse-text);
+  background: var(--lockerverse-bg);
+  border: 1px solid var(--lockerverse-border);
+  border-radius: calc(var(--lockerverse-radius) + 6px);
+  box-shadow: 0 30px 90px rgb(0 0 0 / 48%);
+}
+
+.lockerverse-launcher__dialog *,
+.lockerverse-launcher__dialog *::before,
+.lockerverse-launcher__dialog *::after {
+  box-sizing: border-box;
+}
+
+.lockerverse-launcher__title {
+  padding-right: 72px;
+  margin: 0;
+  font-size: 24px;
+  line-height: 1.25;
+}
+
+.lockerverse-launcher__description {
+  margin: 10px 0 0;
+  color: var(--lockerverse-muted);
+}
+
+.lockerverse-launcher__close {
+  position: absolute;
+  top: 18px;
+  right: 18px;
+  min-height: 36px;
+  padding: 7px 10px;
+  font: inherit;
+  color: var(--lockerverse-muted);
+  cursor: pointer;
+  background: var(--lockerverse-subtle);
+  border: 1px solid var(--lockerverse-border);
+  border-radius: var(--lockerverse-radius);
+}
+
+.lockerverse-launcher__products,
+.lockerverse-launcher__amount-form,
+.lockerverse-launcher__checkout {
+  display: grid;
+  gap: 12px;
+  margin-top: 24px;
+}
+
+.lockerverse-launcher__back {
+  justify-self: start;
+  padding: 7px 10px;
+  font: inherit;
+  color: var(--lockerverse-muted);
+  cursor: pointer;
+  background: transparent;
+  border: 1px solid var(--lockerverse-border);
+  border-radius: var(--lockerverse-radius);
+}
+
+.lockerverse-launcher__checkout > .lockerverse-payment {
+  max-width: none;
+  padding: 0;
+}
+
+.lockerverse-launcher__product {
+  display: flex;
+  gap: 16px;
+  align-items: center;
+  justify-content: space-between;
+  min-height: 58px;
+  padding: 14px 16px;
+  font: inherit;
+  color: var(--lockerverse-text);
+  text-align: left;
+  cursor: pointer;
+  background: var(--lockerverse-control);
+  border: 1px solid var(--lockerverse-border);
+  border-radius: var(--lockerverse-radius);
+}
+
+.lockerverse-launcher__product:hover {
+  border-color: color-mix(in srgb, var(--lockerverse-accent) 58%, transparent);
+}
+
+.lockerverse-launcher__product-copy {
+  display: grid;
+  gap: 3px;
+}
+
+.lockerverse-launcher__product-copy small {
+  font-size: 13px;
+  color: var(--lockerverse-muted);
+}
+
+.lockerverse-launcher__amount-form label {
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.lockerverse-launcher__amount-form input {
+  width: 100%;
+  min-height: 48px;
+  padding: 11px 13px;
+  font: inherit;
+  font-size: 18px;
+  color: var(--lockerverse-text);
+  background: var(--lockerverse-control);
+  border: 1px solid var(--lockerverse-border);
+  border-radius: var(--lockerverse-radius);
+}
+
+.lockerverse-launcher__amount-form button[type="submit"] {
+  min-height: 48px;
+  padding: 12px;
+  font: inherit;
+  font-weight: 700;
+  color: var(--lockerverse-accent-contrast);
+  cursor: pointer;
+  background: var(--lockerverse-accent);
+  border: 0;
+  border-radius: var(--lockerverse-radius);
+}
+
+.lockerverse-launcher__dialog > [role="alert"] {
+  display: grid;
+  gap: 12px;
+  margin-top: 24px;
+  color: var(--lockerverse-danger);
+}
+
+@media (max-width: 640px) {
+  .lockerverse-launcher--bottom-left,
+  .lockerverse-launcher--bottom-right {
+    right: 16px;
+    bottom: 16px;
+    left: auto;
+  }
+
+  .lockerverse-launcher__viewport {
+    align-items: end;
+    padding: 0;
+  }
+
+  .lockerverse-launcher__dialog {
+    width: 100%;
+    max-height: calc(100dvh - 16px);
+    padding: 22px 18px max(22px, env(safe-area-inset-bottom));
+    border-radius: 18px 18px 0 0;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .lockerverse-launcher,
+  .lockerverse-launcher__dialog,
+  .lockerverse-launcher__dialog * {
+    transition-duration: 0.01ms !important;
+  }
+}

package/dist/types.d.ts

@@ -0,0 +1,63 @@
+import { CreateLockerverseWidgetOptions, LockerversePaymentResult } from "@lockerverse/sdk/checkout";
+import { CSSProperties, ComponentPropsWithoutRef } from "react";
+import { loadStripe } from "@stripe/stripe-js";
+//#region src/types.d.ts
+type LockerversePaymentSelectionItem = {
+  amountCents: number;
+  productSlug: string;
+} | {
+  productSlug: string;
+  quantity: number;
+} | {
+  productSlug: string;
+};
+type LockerversePaymentTheme = "dark" | "light";
+type LockerversePaymentBranding = {
+  accentColor?: string;
+  imageUrl?: string | null;
+  name: string;
+};
+type LockerversePaymentStyle = CSSProperties & {
+  "--lockerverse-accent"?: string;
+  "--lockerverse-accent-contrast"?: string;
+  "--lockerverse-bg"?: string;
+  "--lockerverse-border"?: string;
+  "--lockerverse-control"?: string;
+  "--lockerverse-danger"?: string;
+  "--lockerverse-danger-border"?: string;
+  "--lockerverse-font-family"?: string;
+  "--lockerverse-muted"?: string;
+  "--lockerverse-placeholder"?: string;
+  "--lockerverse-radius"?: string;
+  "--lockerverse-subtle"?: string;
+  "--lockerverse-text"?: string;
+};
+type LockerversePaymentUncertain = {
+  paymentReference: string;
+  reason: "action_required" | "pending" | "recovery_failed";
+};
+type LockerversePaymentRecovery = {
+  connectedAccountId: string | null;
+  paymentReference: string;
+};
+type LockerverseStripeLoader = (...args: Parameters<typeof loadStripe>) => ReturnType<typeof loadStripe>;
+type LockerversePaymentProps = CreateLockerverseWidgetOptions & Omit<ComponentPropsWithoutRef<"section">, "children" | "onError"> & {
+  branding?: LockerversePaymentBranding;
+  metadata?: Record<string, string>;
+  onPaymentComplete?: (payment: LockerversePaymentResult) => void;
+  onPaymentRecoveryChange?: (recovery: LockerversePaymentRecovery | null) => void;
+  onPaymentUncertain?: (payment: LockerversePaymentUncertain) => void;
+  resumePayment?: LockerversePaymentRecovery | null;
+  selection: LockerversePaymentSelectionItem[];
+  stripeLoader?: LockerverseStripeLoader;
+  style?: LockerversePaymentStyle;
+  theme?: LockerversePaymentTheme;
+};
+type LockerverseDonateLauncherPosition = "bottom-left" | "bottom-right" | "inline";
+type LockerverseDonateLauncherProps = Omit<LockerversePaymentProps, "selection"> & {
+  buttonLabel?: string;
+  position?: LockerverseDonateLauncherPosition;
+};
+//#endregion
+export { LockerversePaymentRecovery as a, LockerversePaymentTheme as c, LockerversePaymentProps as i, LockerversePaymentUncertain as l, LockerverseDonateLauncherProps as n, LockerversePaymentSelectionItem as o, LockerversePaymentBranding as r, LockerversePaymentStyle as s, LockerverseDonateLauncherPosition as t, LockerverseStripeLoader as u };
+//# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","names":[],"sources":["../src/types.ts"],"mappings":";;;;KAOY;EACN;EAAqB;;EACrB;EAAqB;;EACrB;;KAEM;KAEA;EACV;EACA;EACA;;KAGU,0BAA0B;EACpC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;KAGU;EACV;EACA;;KAGU;EACV;EACA;;KAGU,8BACP,MAAM,kBAAkB,gBACxB,kBAAkB;KAEX,0BAA0B,iCACpC,KAAK;EACH,WAAW;EACX,WAAW;EACX,qBAAqB,SAAS;EAC9B,2BACE,UAAU;EAEZ,sBAAsB,SAAS;EAC/B,gBAAgB;EAChB,WAAW;EACX,eAAe;EACf,QAAQ;EACR,QAAQ;;KAGA;KAKA,iCAAiC,KAC3C;EAGA;EACA,WAAW"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lockerverse/react",
-  "version": "0.2.58",
+  "version": "0.2.59",
   "description": "Tree-shakable React payment and signup UI for Lockerverse",
   "repository": {
     "type": "git",
@@ -23,6 +23,11 @@
       "import": "./dist/payment.js",
       "default": "./dist/payment.js"
     },
+    "./donate-launcher": {
+      "types": "./dist/donate-launcher.d.ts",
+      "import": "./dist/donate-launcher.js",
+      "default": "./dist/donate-launcher.js"
+    },
     "./signup": {
       "types": "./dist/signup.d.ts",
       "import": "./dist/signup.js",
@@ -50,7 +55,7 @@
   "dependencies": {
     "@base-ui/react": "1.6.0",
     "valibot": "1.4.2",
-    "@lockerverse/sdk": "0.2.57"
+    "@lockerverse/sdk": "0.2.59"
   },
   "devDependencies": {
     "@size-limit/file": "13.0.3",
@@ -102,6 +107,16 @@
       "limit": "5 kB",
       "path": "dist/styles.css"
     },
+    {
+      "name": "React donate launcher",
+      "limit": "16 kB",
+      "path": [
+        "dist/donate-launcher.js",
+        "dist/lockerverse-donate-launcher.js",
+        "dist/lockerverse-payment.js",
+        "dist/contact-validation.js"
+      ]
+    },
     {
       "name": "React signup UI",
       "limit": "9 kB",