@superlogic/spree-pay 0.1.7 → 0.1.8

package/build/index.css

@@ -24,6 +24,8 @@
     --color-red-500: oklch(63.7% 0.237 25.331);
     --color-gray-100: oklch(96.7% 0.003 264.542);
     --color-gray-200: oklch(92.8% 0.006 264.531);
+    --color-gray-300: oklch(87.2% 0.01 258.338);
+    --color-gray-900: oklch(21% 0.034 264.665);
     --color-black: #000;
     --color-white: #fff;
     --spacing: 0.25rem;
@@ -42,6 +44,7 @@
     --font-weight-semibold: 600;
     --radius-xs: 0.125rem;
     --radius-2xl: 1rem;
+    --animate-spin: spin 1s linear infinite;
     --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
     --default-transition-duration: 150ms;
     --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -325,6 +328,9 @@
   .sl-spreepay .hidden {
     display: none;
   }
+  .sl-spreepay .inline {
+    display: inline;
+  }
   .sl-spreepay .inline-flex {
     display: inline-flex;
   }
@@ -336,10 +342,26 @@
     width: calc(var(--spacing) * 4);
     height: calc(var(--spacing) * 4);
   }
+  .sl-spreepay .size-6 {
+    width: calc(var(--spacing) * 6);
+    height: calc(var(--spacing) * 6);
+  }
+  .sl-spreepay .size-8 {
+    width: calc(var(--spacing) * 8);
+    height: calc(var(--spacing) * 8);
+  }
   .sl-spreepay .size-9 {
     width: calc(var(--spacing) * 9);
     height: calc(var(--spacing) * 9);
   }
+  .sl-spreepay .size-12 {
+    width: calc(var(--spacing) * 12);
+    height: calc(var(--spacing) * 12);
+  }
+  .sl-spreepay .size-16 {
+    width: calc(var(--spacing) * 16);
+    height: calc(var(--spacing) * 16);
+  }
   .sl-spreepay .h-2\.5 {
     height: calc(var(--spacing) * 2.5);
   }
@@ -367,9 +389,15 @@
   .sl-spreepay .h-15 {
     height: calc(var(--spacing) * 15);
   }
+  .sl-spreepay .h-\[1\.15rem\] {
+    height: 1.15rem;
+  }
   .sl-spreepay .h-\[34px\] {
     height: 34px;
   }
+  .sl-spreepay .h-\[60px\] {
+    height: 60px;
+  }
   .sl-spreepay .h-\[500px\] {
     height: 500px;
   }
@@ -388,9 +416,6 @@
   .sl-spreepay .w-8 {
     width: calc(var(--spacing) * 8);
   }
-  .sl-spreepay .w-9 {
-    width: calc(var(--spacing) * 9);
-  }
   .sl-spreepay .w-11 {
     width: calc(var(--spacing) * 11);
   }
@@ -423,6 +448,12 @@
   .sl-spreepay .animate-pulse {
     animation: var(--animate-pulse);
   }
+  .sl-spreepay .animate-spin {
+    animation: var(--animate-spin);
+  }
+  .sl-spreepay .cursor-not-allowed {
+    cursor: not-allowed;
+  }
   .sl-spreepay .cursor-pointer {
     cursor: pointer;
   }
@@ -612,9 +643,6 @@
   .sl-spreepay .p-0 {
     padding: calc(var(--spacing) * 0);
   }
-  .sl-spreepay .p-0\.5 {
-    padding: calc(var(--spacing) * 0.5);
-  }
   .sl-spreepay .p-1 {
     padding: calc(var(--spacing) * 1);
   }
@@ -734,6 +762,12 @@
   .sl-spreepay .text-destructive {
     color: var(--destructive);
   }
+  .sl-spreepay .text-gray-300 {
+    color: var(--color-gray-300);
+  }
+  .sl-spreepay .text-gray-900 {
+    color: var(--color-gray-900);
+  }
   .sl-spreepay .text-muted-foreground {
     color: var(--muted-foreground);
   }
@@ -782,6 +816,15 @@
       var(--tw-ring-shadow),
       var(--tw-shadow);
   }
+  .sl-spreepay .ring-0 {
+    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+    box-shadow:
+      var(--tw-inset-shadow),
+      var(--tw-inset-ring-shadow),
+      var(--tw-ring-offset-shadow),
+      var(--tw-ring-shadow),
+      var(--tw-shadow);
+  }
   .sl-spreepay .ring-2 {
     --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
     box-shadow:
@@ -804,11 +847,6 @@
     outline-style: var(--tw-outline-style);
     outline-width: 1px;
   }
-  .sl-spreepay .transition-\[background-color\,box-shadow\] {
-    transition-property: background-color, box-shadow;
-    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
-    transition-duration: var(--tw-duration, var(--default-transition-duration));
-  }
   .sl-spreepay .transition-all {
     transition-property: all;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -1000,9 +1038,9 @@
         var(--tw-shadow);
     }
   }
-  .sl-spreepay .focus-visible\:ring-2 {
+  .sl-spreepay .focus-visible\:ring-\[3px\] {
     .sl-spreepay &:focus-visible {
-      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
       box-shadow:
         var(--tw-inset-shadow),
         var(--tw-inset-ring-shadow),
@@ -1097,9 +1135,9 @@
       }
     }
   }
-  .sl-spreepay .data-\[state\=checked\]\:translate-x-4 {
+  .sl-spreepay .data-\[state\=checked\]\:translate-x-\[calc\(100\%-2px\)\] {
     .sl-spreepay &[data-state=checked] {
-      --tw-translate-x: calc(var(--spacing) * 4);
+      --tw-translate-x: calc(100% - 2px);
       translate: var(--tw-translate-x) var(--tw-translate-y);
     }
   }
@@ -1168,12 +1206,9 @@
       translate: var(--tw-translate-x) var(--tw-translate-y);
     }
   }
-  .sl-spreepay .data-\[state\=unchecked\]\:bg-input\/50 {
+  .sl-spreepay .data-\[state\=unchecked\]\:bg-input {
     .sl-spreepay &[data-state=unchecked] {
       background-color: var(--input);
-      @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--input) 50%, transparent);
-      }
     }
   }
   .sl-spreepay .sm\:max-w-lg {
@@ -1273,12 +1308,26 @@
       }
     }
   }
-  .sl-spreepay .dark\:data-\[state\=unchecked\]\:bg-input\/30 {
+  .sl-spreepay .dark\:data-\[state\=checked\]\:bg-primary-foreground {
+    .sl-spreepay &:is(.dark *) {
+      .sl-spreepay &[data-state=checked] {
+        background-color: var(--primary-foreground);
+      }
+    }
+  }
+  .sl-spreepay .dark\:data-\[state\=unchecked\]\:bg-foreground {
+    .sl-spreepay &:is(.dark *) {
+      .sl-spreepay &[data-state=unchecked] {
+        background-color: var(--foreground);
+      }
+    }
+  }
+  .sl-spreepay .dark\:data-\[state\=unchecked\]\:bg-input\/80 {
     .sl-spreepay &:is(.dark *) {
       .sl-spreepay &[data-state=unchecked] {
         background-color: var(--input);
         @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, var(--input) 30%, transparent);
+          background-color: color-mix(in oklab, var(--input) 80%, transparent);
         }
       }
     }
@@ -1430,6 +1479,11 @@
 @property --tw-ring-offset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }
 @property --tw-outline-style { syntax: "*"; inherits: false; initial-value: solid; }
 @property --tw-duration { syntax: "*"; inherits: false; }
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
 @keyframes pulse {
   50% {
     opacity: 0.5;

package/build/index.d.cts

@@ -4,6 +4,7 @@ type SpreePayProps = {
     onProcess?: () => Promise<void>;
     amount?: number;
     className?: string;
+    isProcessing?: boolean;
 };
 
 declare const SpreePay: FC<SpreePayProps>;
@@ -105,6 +106,7 @@ declare const useSpreePay: () => {
     process: (data: {
         hash: string;
     }) => Promise<PaymentMethodResult>;
+    isProcessing: boolean;
     enabled: boolean;
     selectedPaymentMethod: SelectedPaymentMethod;
 };

package/build/index.d.ts

@@ -4,6 +4,7 @@ type SpreePayProps = {
     onProcess?: () => Promise<void>;
     amount?: number;
     className?: string;
+    isProcessing?: boolean;
 };
 
 declare const SpreePay: FC<SpreePayProps>;
@@ -105,6 +106,7 @@ declare const useSpreePay: () => {
     process: (data: {
         hash: string;
     }) => Promise<PaymentMethodResult>;
+    isProcessing: boolean;
     enabled: boolean;
     selectedPaymentMethod: SelectedPaymentMethod;
 };