@solvapay/react 1.0.8-preview.9 → 1.0.9

package/dist/primitives/index.js

@@ -9,12 +9,46 @@ import {
   ActivationFlowRetrying,
   ActivationFlowRoot,
   ActivationFlowSummary,
+  CreditGate,
+  CreditGateError,
+  CreditGateHeading,
+  CreditGateLoading,
+  CreditGateRoot,
+  CreditGateSubheading,
+  CreditGateTopup,
+  PlanBadge,
+  ProductBadge,
+  PurchaseGate,
+  PurchaseGateAllowed,
+  PurchaseGateBlocked,
+  PurchaseGateError,
+  PurchaseGateLoading,
+  PurchaseGateRoot,
+  useActivationFlow,
+  useCreditGate,
+  usePurchaseGate
+} from "../chunk-R2ZPZ7VM.js";
+import {
+  Balance,
+  EmbeddedCheckout,
+  Heading,
+  HostedCheckoutLink,
+  Message,
+  PaywallNotice,
+  Plans,
+  ProductContext,
+  Retry,
+  Root as Root2,
+  usePaywallNotice
+} from "../chunk-ZAV7CQ4G.js";
+import {
   AmountPicker,
   AmountPickerConfirm,
   AmountPickerCustom,
   AmountPickerOption,
   AmountPickerRoot,
   BalanceBadge,
+  Bar,
   CancelPlanButton,
   CancelledPlanNotice,
   CancelledPlanNoticeAccessUntil,
@@ -32,13 +66,9 @@ import {
   CheckoutSummaryRoot,
   CheckoutSummaryTaxNote,
   CheckoutSummaryTrial,
-  CreditGate,
-  CreditGateError,
-  CreditGateHeading,
-  CreditGateLoading,
-  CreditGateRoot,
-  CreditGateSubheading,
-  CreditGateTopup,
+  Empty,
+  Label,
+  Loading,
   MandateText,
   PaymentForm,
   PaymentFormCardElement,
@@ -51,7 +81,7 @@ import {
   PaymentFormSubmitButton,
   PaymentFormSummary,
   PaymentFormTermsCheckbox,
-  PlanBadge,
+  Percentage,
   PlanSelector,
   PlanSelectorCard,
   PlanSelectorCardBadge,
@@ -63,13 +93,8 @@ import {
   PlanSelectorHeading,
   PlanSelectorLoading,
   PlanSelectorRoot,
-  ProductBadge,
-  PurchaseGate,
-  PurchaseGateAllowed,
-  PurchaseGateBlocked,
-  PurchaseGateError,
-  PurchaseGateLoading,
-  PurchaseGateRoot,
+  ResetsIn,
+  Root,
   Slot,
   Slottable,
   TopupForm,
@@ -78,20 +103,20 @@ import {
   TopupFormPaymentElement,
   TopupFormRoot,
   TopupFormSubmitButton,
+  UsageMeter,
   composeEventHandlers,
   composeRefs,
   setRef,
-  useActivationFlow,
   useAmountPicker,
   useAmountPickerCopy,
   useCancelledPlanNotice,
   useCheckoutSummary,
-  useCreditGate,
   usePlanSelector,
-  usePurchaseGate,
-  useTopupForm
-} from "../chunk-MOP3ZBGC.js";
+  useTopupForm,
+  useUsageMeter
+} from "../chunk-37R5NZGF.js";
 import "../chunk-OUSEQRCT.js";
+import "../chunk-MLKGABMK.js";
 export {
   ActivationFlow,
   ActivationFlowActivateButton,
@@ -145,6 +170,16 @@ export {
   PaymentFormSubmitButton,
   PaymentFormSummary,
   PaymentFormTermsCheckbox,
+  PaywallNotice,
+  Balance as PaywallNoticeBalance,
+  EmbeddedCheckout as PaywallNoticeEmbeddedCheckout,
+  Heading as PaywallNoticeHeading,
+  HostedCheckoutLink as PaywallNoticeHostedCheckoutLink,
+  Message as PaywallNoticeMessage,
+  Plans as PaywallNoticePlans,
+  ProductContext as PaywallNoticeProductContext,
+  Retry as PaywallNoticeRetry,
+  Root2 as PaywallNoticeRoot,
   PlanBadge,
   PlanSelector,
   PlanSelectorCard,
@@ -172,6 +207,14 @@ export {
   TopupFormPaymentElement,
   TopupFormRoot,
   TopupFormSubmitButton,
+  UsageMeter,
+  Bar as UsageMeterBar,
+  Empty as UsageMeterEmpty,
+  Label as UsageMeterLabel,
+  Loading as UsageMeterLoading,
+  Percentage as UsageMeterPercentage,
+  ResetsIn as UsageMeterResetsIn,
+  Root as UsageMeterRoot,
   composeEventHandlers,
   composeRefs,
   setRef,
@@ -181,7 +224,9 @@ export {
   useCancelledPlanNotice,
   useCheckoutSummary,
   useCreditGate,
+  usePaywallNotice,
   usePlanSelector,
   usePurchaseGate,
-  useTopupForm
+  useTopupForm,
+  useUsageMeter
 };

package/dist/styles.css

@@ -22,6 +22,28 @@
   --solvapay-font: inherit;
 }
 
+/* -----------------------------------------------------------------------------
+ * Spinner (shared across PaymentForm, TopupForm, StripePaymentFormWrapper)
+ * -------------------------------------------------------------------------- */
+
+@keyframes solvapay-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+[data-solvapay-spinner] {
+  animation: solvapay-spin 0.8s linear infinite;
+  flex-shrink: 0;
+  vertical-align: middle;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [data-solvapay-spinner] {
+    animation: none;
+  }
+}
+
 /* -----------------------------------------------------------------------------
  * Checkout layout shell (drop-in)
  * -------------------------------------------------------------------------- */
@@ -327,6 +349,10 @@
 }
 
 [data-solvapay-payment-form-submit] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
   background: var(--solvapay-accent);
   color: var(--solvapay-accent-foreground);
   border: none;
@@ -796,6 +822,10 @@
 
 [data-solvapay-topup-form-submit],
 .solvapay-topup-form-submit {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
   align-self: stretch;
   background: var(--solvapay-accent);
   color: var(--solvapay-accent-foreground);
@@ -867,3 +897,219 @@
   font-weight: 500;
   padding: 0.25rem 0.625rem;
 }
+
+/* -----------------------------------------------------------------------------
+ * CurrentPlanCard
+ * -------------------------------------------------------------------------- */
+
+[data-solvapay-current-plan-card],
+.solvapay-current-plan-card {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  background: var(--solvapay-surface);
+  border: 1px solid var(--solvapay-border);
+  border-radius: var(--solvapay-radius);
+  padding: 1rem;
+}
+
+[data-solvapay-current-plan-heading],
+.solvapay-current-plan-heading {
+  font-size: 1rem;
+  font-weight: 600;
+  margin: 0;
+  color: var(--solvapay-accent);
+}
+
+[data-solvapay-current-plan-name],
+.solvapay-current-plan-name {
+  font-weight: 600;
+  color: var(--solvapay-accent);
+}
+
+[data-solvapay-current-plan-price],
+.solvapay-current-plan-price {
+  font-size: 1.125rem;
+  font-weight: 600;
+  color: var(--solvapay-accent);
+  font-variant-numeric: tabular-nums;
+}
+
+[data-solvapay-current-plan-next-billing],
+[data-solvapay-current-plan-expires],
+.solvapay-current-plan-date-line {
+  display: block;
+  color: var(--solvapay-muted-foreground);
+  font-size: 0.8125rem;
+}
+
+[data-solvapay-current-plan-balance-line],
+.solvapay-current-plan-balance-line {
+  display: flex;
+  align-items: baseline;
+  gap: 0.375rem;
+  font-size: 0.875rem;
+}
+
+[data-solvapay-current-plan-payment-method],
+.solvapay-current-plan-payment-method {
+  display: block;
+  color: var(--solvapay-muted-foreground);
+  font-size: 0.8125rem;
+}
+
+[data-solvapay-current-plan-actions],
+.solvapay-current-plan-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  margin-top: 0.25rem;
+}
+
+/* -----------------------------------------------------------------------------
+ * LaunchCustomerPortalButton (also applies to UpdatePaymentMethodButton, which
+ * forwards `data-solvapay-update-payment-method` onto the same element).
+ *
+ * Ready state renders as <a target="_blank">; loading/error render as
+ * <button disabled>. The <a> rules explicitly reset `text-decoration` and
+ * align the label so the link doesn't fall back to the browser's default
+ * underlined styling inside the CurrentPlanCard actions row.
+ * -------------------------------------------------------------------------- */
+
+[data-solvapay-launch-customer-portal] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--solvapay-accent);
+  color: var(--solvapay-accent-foreground);
+  border: none;
+  border-radius: var(--solvapay-radius);
+  cursor: pointer;
+  font: inherit;
+  font-weight: 500;
+  padding: 0.5rem 0.875rem;
+  text-decoration: none;
+  transition:
+    background-color 120ms ease,
+    opacity 120ms ease;
+}
+
+[data-solvapay-launch-customer-portal][data-state='ready']:hover {
+  background: var(--solvapay-accent-hover);
+}
+
+[data-solvapay-launch-customer-portal]:focus-visible {
+  outline: 2px solid var(--solvapay-accent);
+  outline-offset: 2px;
+}
+
+[data-solvapay-launch-customer-portal][data-state='loading'] {
+  opacity: 0.75;
+  cursor: wait;
+}
+
+[data-solvapay-launch-customer-portal][data-state='error'] {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* -----------------------------------------------------------------------------
+ * UsageMeter (Phase 2.2)
+ *
+ * Horizontal progress bar with `data-state="safe|warning|critical|loading"`
+ * on both the root and the bar itself. The fill width is driven by a CSS
+ * custom property so the bar never needs inline styles.
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --solvapay-usage-safe: var(--solvapay-accent);
+  --solvapay-usage-warning: var(--solvapay-warning);
+  --solvapay-usage-critical: var(--solvapay-destructive);
+  --solvapay-usage-meter-fill: 0%;
+}
+
+[data-solvapay-usage-meter] {
+  display: flex;
+  flex-direction: column;
+  gap: 0.375rem;
+  font-size: 0.875rem;
+  color: var(--solvapay-muted-foreground);
+}
+
+[data-solvapay-usage-meter-bar] {
+  position: relative;
+  width: 100%;
+  height: 0.5rem;
+  background: var(--solvapay-muted);
+  border-radius: 999px;
+  overflow: hidden;
+}
+
+[data-solvapay-usage-meter-bar]::after {
+  content: '';
+  display: block;
+  height: 100%;
+  width: var(--solvapay-usage-meter-fill, 0%);
+  background: var(--solvapay-usage-safe);
+  border-radius: inherit;
+  transition: width 200ms ease;
+}
+
+[data-solvapay-usage-meter-bar][data-state='warning']::after {
+  background: var(--solvapay-usage-warning);
+}
+
+[data-solvapay-usage-meter-bar][data-state='critical']::after {
+  background: var(--solvapay-usage-critical);
+}
+
+[data-solvapay-usage-meter-label] {
+  color: var(--solvapay-accent);
+  font-weight: 500;
+}
+
+[data-solvapay-usage-meter-percentage],
+[data-solvapay-usage-meter-resets-in] {
+  color: var(--solvapay-muted-foreground);
+}
+
+[data-solvapay-usage-meter-empty] {
+  color: var(--solvapay-muted-foreground);
+  font-style: italic;
+}
+
+/* -----------------------------------------------------------------------------
+ * PaywallNotice (Phase 2.1)
+ * -------------------------------------------------------------------------- */
+
+[data-solvapay-paywall-notice] {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  padding: 1rem;
+  border: 1px solid var(--solvapay-border);
+  border-radius: var(--solvapay-radius);
+  background: var(--solvapay-surface);
+}
+
+[data-solvapay-paywall-heading] {
+  margin: 0;
+  font-size: 1.125rem;
+  font-weight: 600;
+  color: var(--solvapay-accent);
+}
+
+[data-solvapay-paywall-message] {
+  margin: 0;
+  color: var(--solvapay-muted-foreground);
+}
+
+[data-solvapay-paywall-balance] {
+  font-weight: 500;
+  color: var(--solvapay-accent);
+}
+
+[data-solvapay-paywall-retry][data-state='waiting'] {
+  opacity: 0.5;
+  cursor: wait;
+}