@superlogic/spree-pay 0.1.16 → 0.1.17

package/build/index.css

@@ -34,6 +34,8 @@
     --text-xs--line-height: calc(1 / 0.75);
     --text-sm: 0.875rem;
     --text-sm--line-height: calc(1.25 / 0.875);
+    --text-base: 1rem;
+    --text-base--line-height: calc(1.5 / 1);
     --text-lg: 1.125rem;
     --text-lg--line-height: calc(1.75 / 1.125);
     --text-xl: 1.25rem;
@@ -258,6 +260,9 @@
 .sl-spreepay .fixed {
   position: fixed;
 }
+.sl-spreepay .relative {
+  position: relative;
+}
 .sl-spreepay .inset-0 {
   inset: calc(var(--spacing) * 0);
 }
@@ -303,9 +308,6 @@
 .sl-spreepay .mt-4 {
   margin-top: calc(var(--spacing) * 4);
 }
-.sl-spreepay .-mr-2 {
-  margin-right: calc(var(--spacing) * -2);
-}
 .sl-spreepay .mr-1 {
   margin-right: calc(var(--spacing) * 1);
 }
@@ -433,12 +435,18 @@
 .sl-spreepay .w-full {
   width: 100%;
 }
+.sl-spreepay .max-w-\[100px\] {
+  max-width: 100px;
+}
 .sl-spreepay .max-w-\[680px\] {
   max-width: 680px;
 }
 .sl-spreepay .max-w-\[calc\(100\%-2rem\)\] {
   max-width: calc(100% - 2rem);
 }
+.sl-spreepay .min-w-0 {
+  min-width: calc(var(--spacing) * 0);
+}
 .sl-spreepay .flex-1 {
   flex: 1;
 }
@@ -448,6 +456,9 @@
 .sl-spreepay .shrink-0 {
   flex-shrink: 0;
 }
+.sl-spreepay .grow {
+  flex-grow: 1;
+}
 .sl-spreepay .translate-x-\[-50\%\] {
   --tw-translate-x: -50%;
   translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -468,6 +479,9 @@
 .sl-spreepay .cursor-pointer {
   cursor: pointer;
 }
+.sl-spreepay .touch-none {
+  touch-action: none;
+}
 .sl-spreepay .flex-col {
   flex-direction: column;
 }
@@ -633,6 +647,9 @@
 .sl-spreepay .bg-gray-200 {
   background-color: var(--color-gray-200);
 }
+.sl-spreepay .bg-muted {
+  background-color: var(--muted);
+}
 .sl-spreepay .bg-primary {
   background-color: var(--primary);
 }
@@ -651,6 +668,9 @@
 .sl-spreepay .bg-secondary {
   background-color: var(--secondary);
 }
+.sl-spreepay .bg-transparent {
+  background-color: transparent;
+}
 .sl-spreepay .bg-white {
   background-color: var(--color-white);
 }
@@ -684,6 +704,9 @@
 .sl-spreepay .px-8 {
   padding-inline: calc(var(--spacing) * 8);
 }
+.sl-spreepay .py-1 {
+  padding-block: calc(var(--spacing) * 1);
+}
 .sl-spreepay .py-1\.5 {
   padding-block: calc(var(--spacing) * 1.5);
 }
@@ -696,15 +719,27 @@
 .sl-spreepay .py-5 {
   padding-block: calc(var(--spacing) * 5);
 }
+.sl-spreepay .pt-5 {
+  padding-top: calc(var(--spacing) * 5);
+}
 .sl-spreepay .pt-6 {
   padding-top: calc(var(--spacing) * 6);
 }
 .sl-spreepay .pb-2 {
   padding-bottom: calc(var(--spacing) * 2);
 }
+.sl-spreepay .pb-5 {
+  padding-bottom: calc(var(--spacing) * 5);
+}
+.sl-spreepay .pb-6 {
+  padding-bottom: calc(var(--spacing) * 6);
+}
 .sl-spreepay .text-center {
   text-align: center;
 }
+.sl-spreepay .text-left {
+  text-align: left;
+}
 .sl-spreepay .text-right {
   text-align: right;
 }
@@ -712,6 +747,10 @@
   font-size: var(--text-2xl);
   line-height: var(--tw-leading, var(--text-2xl--line-height));
 }
+.sl-spreepay .text-base {
+  font-size: var(--text-base);
+  line-height: var(--tw-leading, var(--text-base--line-height));
+}
 .sl-spreepay .text-lg {
   font-size: var(--text-lg);
   line-height: var(--tw-leading, var(--text-lg--line-height));
@@ -736,6 +775,10 @@
   --tw-leading: 1.7;
   line-height: 1.7;
 }
+.sl-spreepay .leading-\[20px\] {
+  --tw-leading: 20px;
+  line-height: 20px;
+}
 .sl-spreepay .leading-\[34px\] {
   --tw-leading: 34px;
   line-height: 34px;
@@ -758,6 +801,12 @@
 .sl-spreepay .text-black {
   color: var(--color-black);
 }
+.sl-spreepay .text-black\/45 {
+  color: color-mix(in srgb, #000 45%, transparent);
+  @supports (color: color-mix(in lab, red, red)) {
+    color: color-mix(in oklab, var(--color-black) 45%, transparent);
+  }
+}
 .sl-spreepay .text-black\/50 {
   color: color-mix(in srgb, #000 50%, transparent);
   @supports (color: color-mix(in lab, red, red)) {
@@ -815,6 +864,15 @@
     var(--tw-ring-shadow),
     var(--tw-shadow);
 }
+.sl-spreepay .shadow-sm {
+  --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
+  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 .shadow-xs {
   --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
   box-shadow:
@@ -855,6 +913,11 @@
   outline-style: var(--tw-outline-style);
   outline-width: 1px;
 }
+.sl-spreepay .transition-\[color\,box-shadow\] {
+  transition-property: 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));
@@ -914,6 +977,60 @@
     opacity: 50%;
   }
 }
+.sl-spreepay .selection\:bg-primary {
+  .sl-spreepay & *::selection {
+    background-color: var(--primary);
+  }
+  .sl-spreepay &::selection {
+    background-color: var(--primary);
+  }
+}
+.sl-spreepay .selection\:text-primary-foreground {
+  .sl-spreepay & *::selection {
+    color: var(--primary-foreground);
+  }
+  .sl-spreepay &::selection {
+    color: var(--primary-foreground);
+  }
+}
+.sl-spreepay .file\:inline-flex {
+  .sl-spreepay &::file-selector-button {
+    display: inline-flex;
+  }
+}
+.sl-spreepay .file\:h-7 {
+  .sl-spreepay &::file-selector-button {
+    height: calc(var(--spacing) * 7);
+  }
+}
+.sl-spreepay .file\:border-0 {
+  .sl-spreepay &::file-selector-button {
+    border-style: var(--tw-border-style);
+    border-width: 0px;
+  }
+}
+.sl-spreepay .file\:bg-transparent {
+  .sl-spreepay &::file-selector-button {
+    background-color: transparent;
+  }
+}
+.sl-spreepay .file\:text-sm {
+  .sl-spreepay &::file-selector-button {
+    font-size: var(--text-sm);
+    line-height: var(--tw-leading, var(--text-sm--line-height));
+  }
+}
+.sl-spreepay .file\:font-medium {
+  .sl-spreepay &::file-selector-button {
+    --tw-font-weight: var(--font-weight-medium);
+    font-weight: var(--font-weight-medium);
+  }
+}
+.sl-spreepay .file\:text-foreground {
+  .sl-spreepay &::file-selector-button {
+    color: var(--foreground);
+  }
+}
 .sl-spreepay .placeholder\:text-muted-foreground {
   .sl-spreepay &::placeholder {
     color: var(--muted-foreground);
@@ -950,13 +1067,6 @@
     }
   }
 }
-.sl-spreepay .hover\:bg-primary {
-  .sl-spreepay &:hover {
-    @media (hover: hover) {
-      background-color: var(--primary);
-    }
-  }
-}
 .sl-spreepay .hover\:bg-primary\/90 {
   .sl-spreepay &:hover {
     @media (hover: hover) {
@@ -984,24 +1094,30 @@
     }
   }
 }
-.sl-spreepay .hover\:text-white {
+.sl-spreepay .hover\:underline {
   .sl-spreepay &:hover {
     @media (hover: hover) {
-      color: var(--color-white);
+      text-decoration-line: underline;
     }
   }
 }
-.sl-spreepay .hover\:underline {
+.sl-spreepay .hover\:opacity-100 {
   .sl-spreepay &:hover {
     @media (hover: hover) {
-      text-decoration-line: underline;
+      opacity: 100%;
     }
   }
 }
-.sl-spreepay .hover\:opacity-100 {
+.sl-spreepay .hover\:ring-4 {
   .sl-spreepay &:hover {
     @media (hover: hover) {
-      opacity: 100%;
+      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(4px + 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);
     }
   }
 }
@@ -1053,6 +1169,17 @@
       var(--tw-shadow);
   }
 }
+.sl-spreepay .focus-visible\:ring-4 {
+  .sl-spreepay &:focus-visible {
+    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(4px + 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 .focus-visible\:ring-\[3px\] {
   .sl-spreepay &:focus-visible {
     --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
@@ -1096,6 +1223,16 @@
     --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   }
 }
+.sl-spreepay .focus-visible\:outline-hidden {
+  .sl-spreepay &:focus-visible {
+    --tw-outline-style: none;
+    outline-style: none;
+    @media (forced-colors: active) {
+      outline: 2px solid transparent;
+      outline-offset: 2px;
+    }
+  }
+}
 .sl-spreepay .focus-visible\:outline-none {
   .sl-spreepay &:focus-visible {
     --tw-outline-style: none;
@@ -1150,6 +1287,56 @@
     }
   }
 }
+.sl-spreepay .data-\[disabled\]\:opacity-50 {
+  .sl-spreepay &[data-disabled] {
+    opacity: 50%;
+  }
+}
+.sl-spreepay .data-\[orientation\=horizontal\]\:h-1\.5 {
+  .sl-spreepay &[data-orientation=horizontal] {
+    height: calc(var(--spacing) * 1.5);
+  }
+}
+.sl-spreepay .data-\[orientation\=horizontal\]\:h-full {
+  .sl-spreepay &[data-orientation=horizontal] {
+    height: 100%;
+  }
+}
+.sl-spreepay .data-\[orientation\=horizontal\]\:w-full {
+  .sl-spreepay &[data-orientation=horizontal] {
+    width: 100%;
+  }
+}
+.sl-spreepay .data-\[orientation\=vertical\]\:h-full {
+  .sl-spreepay &[data-orientation=vertical] {
+    height: 100%;
+  }
+}
+.sl-spreepay .data-\[orientation\=vertical\]\:min-h-44 {
+  .sl-spreepay &[data-orientation=vertical] {
+    min-height: calc(var(--spacing) * 44);
+  }
+}
+.sl-spreepay .data-\[orientation\=vertical\]\:w-1\.5 {
+  .sl-spreepay &[data-orientation=vertical] {
+    width: calc(var(--spacing) * 1.5);
+  }
+}
+.sl-spreepay .data-\[orientation\=vertical\]\:w-auto {
+  .sl-spreepay &[data-orientation=vertical] {
+    width: auto;
+  }
+}
+.sl-spreepay .data-\[orientation\=vertical\]\:w-full {
+  .sl-spreepay &[data-orientation=vertical] {
+    width: 100%;
+  }
+}
+.sl-spreepay .data-\[orientation\=vertical\]\:flex-col {
+  .sl-spreepay &[data-orientation=vertical] {
+    flex-direction: column;
+  }
+}
 .sl-spreepay .data-\[state\=checked\]\:translate-x-\[calc\(100\%-2px\)\] {
   .sl-spreepay &[data-state=checked] {
     --tw-translate-x: calc(100% - 2px);
@@ -1251,6 +1438,11 @@
     display: block;
   }
 }
+.sl-spreepay .md\:px-4 {
+  @media (width >= 48rem) {
+    padding-inline: calc(var(--spacing) * 4);
+  }
+}
 .sl-spreepay .md\:px-7 {
   @media (width >= 48rem) {
     padding-inline: calc(var(--spacing) * 7);
@@ -1266,6 +1458,22 @@
     padding-block: calc(var(--spacing) * 6);
   }
 }
+.sl-spreepay .md\:pt-6 {
+  @media (width >= 48rem) {
+    padding-top: calc(var(--spacing) * 6);
+  }
+}
+.sl-spreepay .md\:pb-7 {
+  @media (width >= 48rem) {
+    padding-bottom: calc(var(--spacing) * 7);
+  }
+}
+.sl-spreepay .md\:text-sm {
+  @media (width >= 48rem) {
+    font-size: var(--text-sm);
+    line-height: var(--tw-leading, var(--text-sm--line-height));
+  }
+}
 .sl-spreepay .md\:text-xl {
   @media (width >= 48rem) {
     font-size: var(--text-xl);

package/build/index.d.cts

@@ -5,6 +5,7 @@ type SpreePayProps = {
     amount?: number;
     className?: string;
     isProcessing?: boolean;
+    transactionFeePercentage?: number;
 };
 
 declare const SpreePay: FC<SpreePayProps>;
@@ -71,16 +72,19 @@ type NewCard = Pick<Card, 'expireMonth' | 'expireYear' | 'lastFourNumbers' | 'sc
 };
 type CardPaymentMethod = {
     method: NewCard | Card | null;
-    type: PaymentType.CREDIT_CARD;
+    type: PaymentType.CREDIT_CARD | PaymentType.SPLIT;
+    splitAmount?: number;
 };
 type CryptoPaymentMethod = {
     method: Coin | NativeCoin | null;
     type: PaymentType.CRYPTO;
+    splitAmount?: number;
 };
 type SelectedPaymentMethod = CardPaymentMethod | CryptoPaymentMethod;
 declare enum PaymentType {
     CREDIT_CARD = "CREDIT_CARD",
-    CRYPTO = "CRYPTO"
+    CRYPTO = "CRYPTO",
+    SPLIT = "SPLIT"
 }
 declare const enum SlapiPaymentStatus {
     NOT_INITIALIZED = "NOT_INITIALIZED",// back-end only
@@ -102,7 +106,6 @@ type ProcessFnParams = {
     hash: string;
     capture?: boolean;
     metadata?: Record<string, unknown>;
-    transactionFee?: number;
 };
 type ProcessFn = (data: ProcessFnParams) => Promise<PaymentMethodResult>;
 

package/build/index.d.ts

@@ -5,6 +5,7 @@ type SpreePayProps = {
     amount?: number;
     className?: string;
     isProcessing?: boolean;
+    transactionFeePercentage?: number;
 };
 
 declare const SpreePay: FC<SpreePayProps>;
@@ -71,16 +72,19 @@ type NewCard = Pick<Card, 'expireMonth' | 'expireYear' | 'lastFourNumbers' | 'sc
 };
 type CardPaymentMethod = {
     method: NewCard | Card | null;
-    type: PaymentType.CREDIT_CARD;
+    type: PaymentType.CREDIT_CARD | PaymentType.SPLIT;
+    splitAmount?: number;
 };
 type CryptoPaymentMethod = {
     method: Coin | NativeCoin | null;
     type: PaymentType.CRYPTO;
+    splitAmount?: number;
 };
 type SelectedPaymentMethod = CardPaymentMethod | CryptoPaymentMethod;
 declare enum PaymentType {
     CREDIT_CARD = "CREDIT_CARD",
-    CRYPTO = "CRYPTO"
+    CRYPTO = "CRYPTO",
+    SPLIT = "SPLIT"
 }
 declare const enum SlapiPaymentStatus {
     NOT_INITIALIZED = "NOT_INITIALIZED",// back-end only
@@ -102,7 +106,6 @@ type ProcessFnParams = {
     hash: string;
     capture?: boolean;
     metadata?: Record<string, unknown>;
-    transactionFee?: number;
 };
 type ProcessFn = (data: ProcessFnParams) => Promise<PaymentMethodResult>;