@carlonicora/nextjs-jsonapi 2.2.2 → 2.2.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carlonicora/nextjs-jsonapi",
-  "version": "2.2.2",
+  "version": "2.2.3",
   "description": "Next.js JSON:API client with server/client support and caching",
   "author": "Carlo Nicora",
   "license": "GPL-3.0-or-later",

package/src/features/billing/stripe-price/components/forms/PriceEditor.tsx

@@ -246,9 +246,9 @@ export function PriceEditor({ productId, price, open, onOpenChange, onSuccess }:
         </DialogHeader>
 
         {isEditMode && (
-          <div className="bg-blue-50 border border-blue-200 rounded-lg p-4 flex gap-x-3">
-            <AlertCircle className="h-5 w-5 text-blue-600 flex-shrink-0 mt-0.5" />
-            <div className="text-sm text-blue-800">
+          <div className="bg-primary/10 border-primary/30 flex gap-x-3 rounded-lg border p-4">
+            <AlertCircle className="text-primary mt-0.5 h-5 w-5 flex-shrink-0" />
+            <div className="text-foreground text-sm">
               <p className="font-semibold mb-1">Stripe Price Immutability</p>
               <p>
                 Due to Stripe's architecture, only the nickname and active status can be modified after creation. To

package/src/features/billing/stripe-promotion-code/components/PromoCodeInput.tsx

@@ -66,7 +66,7 @@ export function PromoCodeInput({
   if (appliedCode?.valid) {
     return (
       <div className="space-y-2">
-        <div className="flex items-center justify-between p-3 bg-green-50 border border-green-200 rounded-lg">
+        <div className="bg-success/15 border-success/30 flex items-center justify-between rounded-lg border p-3">
           <div className="flex items-center gap-2">
             <Check className="text-success h-4 w-4" />
             <span className="text-success font-medium">{appliedCode.code}</span>
@@ -77,7 +77,7 @@ export function PromoCodeInput({
             size="sm"
             onClick={onRemove}
             disabled={disabled}
-            className="text-success hover:bg-green-100 hover:text-success"
+            className="text-success hover:bg-success/25 hover:text-success"
           >
             <X className="h-4 w-4" />
           </Button>

package/src/features/billing/stripe-subscription/components/details/SubscriptionDetails.tsx

@@ -156,7 +156,7 @@ export function SubscriptionDetails({
 
             {/* Cancellation Warning */}
             {subscription.cancelAtPeriodEnd && (
-              <div className="bg-yellow-50 border border-yellow-200 rounded-lg p-3">
+              <div className="bg-warning/15 border-warning/30 rounded-lg border p-3">
                 <p className="text-warning text-xs/relaxed">
                   This subscription will be canceled at the end of the current period on{" "}
                   {formatDate(subscription.currentPeriodEnd)}.

package/src/features/billing/stripe-subscription/components/forms/CancelSubscriptionDialog.tsx

@@ -75,7 +75,7 @@ export function CancelSubscriptionDialog({
 
         <Form {...form}>
           <form onSubmit={form.handleSubmit(onSubmit)} className="flex flex-col gap-y-4">
-            <div className="bg-blue-50 border border-blue-200 rounded-lg p-3 text-sm text-blue-800">
+            <div className="bg-primary/10 border-primary/30 text-foreground rounded-lg border p-3 text-sm">
               Your subscription will remain active until {periodEndDate}. You can continue using the service until then.
             </div>
 

package/src/features/billing/stripe-subscription/components/widgets/ProrationPreview.tsx

@@ -9,28 +9,28 @@ type ProrationPreviewProps = {
 
 export function ProrationPreview({ preview }: ProrationPreviewProps) {
   return (
-    <div className="bg-blue-50 border border-blue-200 rounded-lg p-4">
-      <h4 className="font-semibold text-blue-900 mb-3">Proration Breakdown</h4>
+    <div className="bg-primary/10 border-primary/30 rounded-lg border p-4">
+      <h4 className="text-primary mb-3 font-semibold">Proration Breakdown</h4>
 
       <div className="space-y-2">
         {preview.lineItems.map((item, index) => (
           <div key={index} className="flex justify-between text-sm">
-            <span className="text-blue-800">{item.description}</span>
-            <span className={`font-medium ${item.amount < 0 ? "text-success" : "text-blue-900"}`}>
+            <span className="text-muted-foreground">{item.description}</span>
+            <span className={`font-medium ${item.amount < 0 ? "text-success" : "text-foreground"}`}>
               {formatCurrency(item.amount, preview.currency)}
             </span>
           </div>
         ))}
 
-        <div className="border-t border-blue-200 pt-2 mt-2">
+        <div className="border-primary/30 mt-2 border-t pt-2">
           <div className="flex justify-between font-semibold">
-            <span className="text-blue-900">Net Due Today</span>
-            <span className="text-blue-900">{formatCurrency(preview.immediateCharge, preview.currency)}</span>
+            <span className="text-foreground">Net Due Today</span>
+            <span className="text-foreground">{formatCurrency(preview.immediateCharge, preview.currency)}</span>
           </div>
         </div>
 
         {preview.lineItems.length > 0 && preview.lineItems[0].period && (
-          <div className="text-xs text-blue-700 mt-2">
+          <div className="text-muted-foreground mt-2 text-xs">
             Next invoice on {formatDate(preview.lineItems[0].period.end)} for{" "}
             {formatCurrency(preview.amountDue, preview.currency)}
           </div>

package/src/features/billing/stripe-subscription/components/wizards/WizardStepReview.tsx

@@ -151,21 +151,21 @@ export function WizardStepReview({
       {/* Proration Preview (for plan changes) */}
       {isChangingPlan && prorationPreview && (
         <div
-          className={`${isTrialUpgrade ? "bg-amber-50 border-amber-200" : "bg-blue-50 border-blue-200"} border rounded-lg p-4 space-y-2`}
+          className={`${isTrialUpgrade ? "bg-warning/15 border-warning/30" : "bg-primary/10 border-primary/30"} space-y-2 rounded-lg border p-4`}
         >
-          <h4 className={`font-medium ${isTrialUpgrade ? "text-warning" : "text-blue-800"}`}>
+          <h4 className={`font-medium ${isTrialUpgrade ? "text-warning" : "text-primary"}`}>
             {isTrialUpgrade ? "Trial Upgrade" : "Proration Summary"}
           </h4>
-          <p className={`text-sm ${isTrialUpgrade ? "text-warning" : "text-blue-700"}`}>
+          <p className={`text-sm ${isTrialUpgrade ? "text-warning" : "text-foreground"}`}>
             {isTrialUpgrade
               ? "Your trial will end immediately and you will be charged the full price."
               : "Your next charge will be adjusted to account for the plan change."}
           </p>
           <div className="flex justify-between text-sm">
-            <span className={`${isTrialUpgrade ? "text-warning" : "text-blue-600"}`}>
+            <span className={`${isTrialUpgrade ? "text-warning" : "text-muted-foreground"}`}>
               {isTrialUpgrade ? "Amount to charge now:" : "Amount due now:"}
             </span>
-            <span className={`font-medium ${isTrialUpgrade ? "text-warning" : "text-blue-800"}`}>
+            <span className={`font-medium ${isTrialUpgrade ? "text-warning" : "text-foreground"}`}>
               {discountedImmediateCharge !== null ? (
                 <>
                   <span className="line-through text-muted-foreground mr-2">