@mmailaender/convex-creem 0.1.0

package/src/library.css

@@ -0,0 +1,20 @@
+/* @mmailaender/convex-creem — importable design-system + component CSS.
+   Consumers import this alongside Tailwind to get full design-system support:
+
+     @import "tailwindcss";
+     @import "@mmailaender/convex-creem/styles";
+
+   This file bundles:
+   1. Design-system tokens, base styles, and @utility definitions
+   2. @source directives so Tailwind scans the library's own component files
+
+   The @source globs below resolve relative to THIS file (src/), keeping them
+   inside the same directory tree as the components. This is the Tailwind v4
+   recommended pattern for libraries — it works in both dev (HMR) and
+   production builds, unlike @source paths that traverse above the consumer's
+   project root with ../../.                                                 */
+
+@import "./design-system/index.css";
+
+@source "./svelte/**/*.{svelte,ts}";
+@source "./react/**/*.{tsx,ts}";

package/src/react/hooks/useCheckoutSuccessParams.ts

@@ -0,0 +1,7 @@
+import { parseCheckoutSuccessParams } from "../../core/payments.js";
+
+export const useCheckoutSuccessParams = (
+  search: string = typeof window === "undefined" ? "" : window.location.search,
+) => {
+  return parseCheckoutSuccessParams(search);
+};

package/src/react/index.tsx

@@ -0,0 +1,47 @@
+/* eslint-disable react-refresh/only-export-components */
+export {
+  parseCheckoutSuccessParams,
+  hasCheckoutSuccessParams,
+} from "../core/payments.js";
+export { pendingCheckout } from "../core/pendingCheckout.js";
+export { useCheckoutSuccessParams } from "./hooks/useCheckoutSuccessParams.js";
+export { BillingToggle } from "./primitives/BillingToggle.js";
+export { SegmentGroup } from "./primitives/SegmentGroup.js";
+export type { SegmentGroupItem } from "./primitives/SegmentGroup.js";
+export { SegmentControl } from "./primitives/SegmentControl.js";
+export type { SegmentControlItem } from "./primitives/SegmentControl.js";
+export { NumberInput } from "./primitives/NumberInput.js";
+export { CheckoutButton } from "./primitives/CheckoutButton.js";
+export { CustomerPortalButton } from "./primitives/CustomerPortalButton.js";
+export { PricingCard } from "./primitives/PricingCard.js";
+export { PricingSection } from "./primitives/PricingSection.js";
+export { BillingGate } from "./primitives/BillingGate.js";
+export { ScheduledChangeBanner } from "./primitives/ScheduledChangeBanner.js";
+export { PaymentWarningBanner } from "./primitives/PaymentWarningBanner.js";
+export { TrialLimitBanner } from "./primitives/TrialLimitBanner.js";
+export { OneTimeCheckoutButton } from "./primitives/OneTimeCheckoutButton.js";
+export { OneTimePaymentStatusBadge } from "./primitives/OneTimePaymentStatusBadge.js";
+export { CheckoutSuccessSummary } from "./primitives/CheckoutSuccessSummary.js";
+export { Subscription, Product, BillingPortal } from "./widgets/index.js";
+export type {
+  BillingSnapshot,
+  CheckoutSuccessParams,
+  OneTimePaymentStatus,
+  RecurringCycle,
+} from "../core/types.js";
+export {
+  hasBillingAction,
+  isEnterpriseBilling,
+  isOneTimeBilling,
+  isTerminalPaymentStatus,
+  shouldShowBillingCycleToggle,
+} from "../core/selectors.js";
+export type {
+  BillingPermissions,
+  CheckoutIntent,
+  ConnectedBillingApi,
+  ConnectedBillingModel,
+  ProductType,
+  SubscriptionPlanType,
+  Transition,
+} from "./widgets/types.js";

package/src/react/primitives/BillingGate.tsx

@@ -0,0 +1,26 @@
+import type { PropsWithChildren, ReactNode } from "react";
+import type { AvailableAction, BillingSnapshot } from "../../core/types.js";
+import { hasBillingActionLocal } from "../shared.js";
+
+export const BillingGate = ({
+  snapshot,
+  requiredActions,
+  fallback = null,
+  children,
+}: PropsWithChildren<{
+  snapshot?: BillingSnapshot | null;
+  requiredActions: AvailableAction | AvailableAction[];
+  fallback?: ReactNode;
+}>) => {
+  if (!snapshot) {
+    return <>{fallback}</>;
+  }
+
+  const actions = Array.isArray(requiredActions)
+    ? requiredActions
+    : [requiredActions];
+  const canRender = actions.every((action) =>
+    hasBillingActionLocal(snapshot, action),
+  );
+  return <>{canRender ? children : fallback}</>;
+};

package/src/react/primitives/BillingToggle.tsx

@@ -0,0 +1,29 @@
+import type { RecurringCycle } from "../../core/types.js";
+import { formatRecurringCycle } from "../shared.js";
+import { SegmentGroup } from "./SegmentGroup.js";
+
+export const BillingToggle = ({
+  cycles = [],
+  value,
+  onValueChange,
+  className = "",
+}: {
+  cycles?: RecurringCycle[];
+  value?: RecurringCycle;
+  onValueChange?: (cycle: RecurringCycle) => void;
+  className?: string;
+}) => {
+  if (cycles.length < 2) return null;
+
+  return (
+    <SegmentGroup
+      items={cycles.map((cycle) => ({
+        value: cycle,
+        label: formatRecurringCycle(cycle),
+      }))}
+      value={value}
+      onValueChange={(segment) => onValueChange?.(segment as RecurringCycle)}
+      className={className}
+    />
+  );
+};

package/src/react/primitives/CheckoutButton.tsx

@@ -0,0 +1,47 @@
+import { useState, type PropsWithChildren } from "react";
+
+export const CheckoutButton = ({
+  productId,
+  href,
+  disabled = false,
+  className = "",
+  onCheckout,
+  children,
+}: PropsWithChildren<{
+  productId: string;
+  href?: string;
+  disabled?: boolean;
+  className?: string;
+  onCheckout?: (payload: { productId: string }) => Promise<void> | void;
+}>) => {
+  const [isLoading, setIsLoading] = useState(false);
+
+  const handleClick = async () => {
+    if (disabled || isLoading || !onCheckout) return;
+    setIsLoading(true);
+    try {
+      await onCheckout({ productId });
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  if (onCheckout) {
+    return (
+      <button
+        type="button"
+        className={`button-filled disabled:cursor-not-allowed disabled:opacity-60 ${className}`}
+        disabled={disabled}
+        onClick={handleClick}
+      >
+        {children ?? (isLoading ? "Loading..." : "Checkout")}
+      </button>
+    );
+  }
+
+  return (
+    <a href={href} className={`button-filled ${className}`}>
+      {children ?? "Checkout"}
+    </a>
+  );
+};

package/src/react/primitives/CheckoutSuccessSummary.tsx

@@ -0,0 +1,36 @@
+import {
+  hasCheckoutSuccessParams,
+  parseCheckoutSuccessParams,
+} from "../../core/payments.js";
+import type { CheckoutSuccessParams } from "../../core/types.js";
+
+export const CheckoutSuccessSummary = ({
+  params,
+  search = "",
+  className = "",
+}: {
+  params?: CheckoutSuccessParams;
+  search?: string;
+  className?: string;
+}) => {
+  const fromSearch = parseCheckoutSuccessParams(search);
+  const parsed = params ?? fromSearch;
+  if (!hasCheckoutSuccessParams(parsed)) {
+    return null;
+  }
+
+  return (
+    <div
+      className={`rounded-lg border border-emerald-300 bg-emerald-50 px-4 py-3 text-sm text-emerald-900 dark:border-emerald-800 dark:bg-emerald-950/40 dark:text-emerald-200 ${className}`}
+    >
+      <p className="font-medium">Checkout completed successfully.</p>
+      <ul className="mt-2 space-y-1">
+        {parsed.checkoutId && <li>Checkout: {parsed.checkoutId}</li>}
+        {parsed.orderId && <li>Order: {parsed.orderId}</li>}
+        {parsed.customerId && <li>Customer: {parsed.customerId}</li>}
+        {parsed.productId && <li>Product: {parsed.productId}</li>}
+        {parsed.requestId && <li>Request: {parsed.requestId}</li>}
+      </ul>
+    </div>
+  );
+};

package/src/react/primitives/CustomerPortalButton.tsx

@@ -0,0 +1,50 @@
+import { useState, type PropsWithChildren } from "react";
+
+export const CustomerPortalButton = ({
+  href,
+  disabled = false,
+  className = "",
+  onOpenPortal,
+  children,
+}: PropsWithChildren<{
+  href?: string;
+  disabled?: boolean;
+  className?: string;
+  onOpenPortal?: () => Promise<void> | void;
+}>) => {
+  const [isLoading, setIsLoading] = useState(false);
+
+  const handleClick = async () => {
+    if (disabled || isLoading || !onOpenPortal) return;
+    setIsLoading(true);
+    try {
+      await onOpenPortal();
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  if (onOpenPortal) {
+    return (
+      <button
+        type="button"
+        className={`${className || "button-outline"} disabled:cursor-not-allowed disabled:opacity-60 cursor-pointer`}
+        disabled={disabled}
+        onClick={handleClick}
+      >
+        {children ?? (isLoading ? "Loading..." : "Manage billing")}
+      </button>
+    );
+  }
+
+  return (
+    <a
+      href={href}
+      target="_blank"
+      rel="noopener noreferrer"
+      className={className || "button-outline"}
+    >
+      {children ?? "Manage billing"}
+    </a>
+  );
+};

package/src/react/primitives/NumberInput.tsx

@@ -0,0 +1,83 @@
+import type { ChangeEvent } from "react";
+
+export const NumberInput = ({
+  value = 1,
+  min = Number.NEGATIVE_INFINITY,
+  max = Number.POSITIVE_INFINITY,
+  step = 1,
+  compact = false,
+  disabled = false,
+  className = "",
+  onValueChange,
+}: {
+  value?: number;
+  min?: number;
+  max?: number;
+  step?: number;
+  compact?: boolean;
+  disabled?: boolean;
+  className?: string;
+  onValueChange?: (value: number) => void;
+}) => {
+  const clamp = (candidate: number) => Math.min(max, Math.max(min, candidate));
+
+  const setValue = (candidate: number) => {
+    const next = clamp(candidate);
+    onValueChange?.(next);
+  };
+
+  const decrement = () => setValue((value ?? 0) - step);
+  const increment = () => setValue((value ?? 0) + step);
+
+  const handleInput = (e: ChangeEvent<HTMLInputElement>) => {
+    const parsed = Number(e.currentTarget.value);
+    if (!Number.isFinite(parsed)) return;
+    setValue(parsed);
+  };
+
+  return (
+    <div className={`number-input ${className}`}>
+      <button
+        type="button"
+        aria-label="Decrease value"
+        disabled={disabled}
+        className="icon-button-sm"
+        onClick={decrement}
+      >
+        <svg
+          aria-hidden="true"
+          viewBox="0 0 256 256"
+          fill="currentColor"
+          className="h-4 w-4 text-foreground-on-tonal"
+        >
+          <path d="M216,128a12,12,0,0,1-12,12H52a12,12,0,0,1,0-24H204A12,12,0,0,1,216,128Z" />
+        </svg>
+      </button>
+
+      <input
+        type="number"
+        className={`input-ghost ${compact ? "number-input-value-compact" : "number-input-value"} max-w-12 input-no-spinner`}
+        value={value}
+        disabled={disabled}
+        onChange={handleInput}
+      />
+
+      <button
+        type="button"
+        aria-label="Increase value"
+        disabled={disabled}
+        className="icon-button-sm"
+        onClick={increment}
+      >
+        <svg
+          aria-hidden="true"
+          viewBox="0 0 256 256"
+          fill="currentColor"
+          className="h-4 w-4 text-foreground-on-tonal"
+        >
+          <path d="M216,128a12,12,0,0,1-12,12H140v64a12,12,0,0,1-24,0V140H52a12,12,0,0,1,0-24h64V52a12,12,0,0,1,24,0v64h64A12,12,0,0,1,216,128Z" />
+        </svg>
+      </button>
+    </div>
+  );
+};

package/src/react/primitives/OneTimeCheckoutButton.tsx

@@ -0,0 +1,27 @@
+import type { PropsWithChildren } from "react";
+import { CheckoutButton } from "./CheckoutButton.js";
+
+export const OneTimeCheckoutButton = ({
+  productId,
+  href,
+  disabled = false,
+  className = "",
+  onCheckout,
+  children,
+}: PropsWithChildren<{
+  productId: string;
+  href?: string;
+  disabled?: boolean;
+  className?: string;
+  onCheckout?: (payload: { productId: string }) => Promise<void> | void;
+}>) => (
+  <CheckoutButton
+    productId={productId}
+    href={href}
+    disabled={disabled}
+    className={className}
+    onCheckout={onCheckout}
+  >
+    {children ?? "Buy now"}
+  </CheckoutButton>
+);

package/src/react/primitives/OneTimePaymentStatusBadge.tsx

@@ -0,0 +1,18 @@
+import type { OneTimePaymentStatus } from "../../core/types.js";
+
+const labels: Record<OneTimePaymentStatus, string> = {
+  pending: "Pending",
+  paid: "Paid",
+  refunded: "Refunded",
+  partially_refunded: "Partially refunded",
+};
+
+export const OneTimePaymentStatusBadge = ({
+  status,
+  className = "",
+}: {
+  status: OneTimePaymentStatus;
+  className?: string;
+}) => {
+  return <span className={className}>{labels[status]}</span>;
+};

package/src/react/primitives/PaymentWarningBanner.tsx

@@ -0,0 +1,33 @@
+import { useMemo } from "react";
+import type { BillingSnapshot, PaymentSnapshot } from "../../core/types.js";
+
+export const PaymentWarningBanner = ({
+  snapshot,
+  payment,
+  className = "",
+}: {
+  snapshot?: BillingSnapshot | null;
+  payment?: PaymentSnapshot | null;
+  className?: string;
+}) => {
+  const activePayment = payment ?? snapshot?.payment ?? null;
+
+  const message = useMemo(() => {
+    if (!activePayment || activePayment.status === "paid") return null;
+    if (activePayment.status === "pending")
+      return "Your payment is pending confirmation. Wait for webhook confirmation before granting permanent access.";
+    if (activePayment.status === "partially_refunded")
+      return "This payment was partially refunded. Review entitlements that depend on purchase amount.";
+    return "This payment was refunded. Access should generally be revoked or downgraded.";
+  }, [activePayment]);
+
+  if (!message) return null;
+
+  return (
+    <div
+      className={`rounded-lg border border-rose-300 bg-rose-50 px-4 py-3 text-sm text-rose-900 dark:border-rose-800 dark:bg-rose-950/40 dark:text-rose-200 ${className}`}
+    >
+      {message}
+    </div>
+  );
+};