@superlogic/spree-pay 0.1.1 → 0.1.2

package/build/index.css

@@ -21,6 +21,8 @@
       "Liberation Mono",
       "Courier New",
       monospace;
+    --color-red-500: oklch(63.7% 0.237 25.331);
+    --color-gray-100: oklch(96.7% 0.003 264.542);
     --color-gray-300: oklch(87.2% 0.01 258.338);
     --color-gray-900: oklch(21% 0.034 264.665);
     --color-black: #000;
@@ -352,9 +354,15 @@
   .mt-auto {
     margin-top: auto;
   }
+  .mr-1 {
+    margin-right: calc(var(--spacing) * 1);
+  }
   .mb-4 {
     margin-bottom: calc(var(--spacing) * 4);
   }
+  .-ml-2\.5 {
+    margin-left: calc(var(--spacing) * -2.5);
+  }
   .ml-1 {
     margin-left: calc(var(--spacing) * 1);
   }
@@ -441,6 +449,9 @@
   .h-5 {
     height: calc(var(--spacing) * 5);
   }
+  .h-6 {
+    height: calc(var(--spacing) * 6);
+  }
   .h-8 {
     height: calc(var(--spacing) * 8);
   }
@@ -456,6 +467,12 @@
   .h-15 {
     height: calc(var(--spacing) * 15);
   }
+  .h-\[1\.15rem\] {
+    height: 1.15rem;
+  }
+  .h-\[34px\] {
+    height: 34px;
+  }
   .h-\[calc\(100\%-1px\)\] {
     height: calc(100% - 1px);
   }
@@ -492,6 +509,12 @@
   .w-5 {
     width: calc(var(--spacing) * 5);
   }
+  .w-6 {
+    width: calc(var(--spacing) * 6);
+  }
+  .w-8 {
+    width: calc(var(--spacing) * 8);
+  }
   .w-11 {
     width: calc(var(--spacing) * 11);
   }
@@ -513,9 +536,6 @@
   .w-max {
     width: max-content;
   }
-  .max-w-\[540px\] {
-    max-width: 540px;
-  }
   .max-w-\[calc\(100\%-2rem\)\] {
     max-width: calc(100% - 2rem);
   }
@@ -621,6 +641,9 @@
   .justify-center {
     justify-content: center;
   }
+  .gap-0 {
+    gap: calc(var(--spacing) * 0);
+  }
   .gap-0\.5 {
     gap: calc(var(--spacing) * 0.5);
   }
@@ -633,6 +656,9 @@
   .gap-2 {
     gap: calc(var(--spacing) * 2);
   }
+  .gap-3 {
+    gap: calc(var(--spacing) * 3);
+  }
   .gap-4 {
     gap: calc(var(--spacing) * 4);
   }
@@ -715,6 +741,9 @@
     border-left-style: var(--tw-border-style) !important;
     border-left-width: 0px !important;
   }
+  .border-\[\#F5F7FA\] {
+    border-color: #F5F7FA;
+  }
   .border-\[orange\] {
     border-color: orange;
   }
@@ -748,6 +777,9 @@
   .border-transparent {
     border-color: transparent;
   }
+  .bg-\[\#F5F7FA\] {
+    background-color: #F5F7FA;
+  }
   .bg-accent {
     background-color: var(--accent);
   }
@@ -775,6 +807,9 @@
   .bg-destructive {
     background-color: var(--destructive);
   }
+  .bg-gray-100 {
+    background-color: var(--color-gray-100);
+  }
   .bg-muted {
     background-color: var(--muted);
   }
@@ -832,6 +867,9 @@
   .px-\(--cell-size\) {
     padding-inline: var(--cell-size);
   }
+  .px-1\.5 {
+    padding-inline: calc(var(--spacing) * 1.5);
+  }
   .px-2 {
     padding-inline: calc(var(--spacing) * 2);
   }
@@ -934,6 +972,14 @@
   .text-\[0\.8rem\] {
     font-size: 0.8rem;
   }
+  .leading-\[1\.7\] {
+    --tw-leading: 1.7;
+    line-height: 1.7;
+  }
+  .leading-\[34px\] {
+    --tw-leading: 34px;
+    line-height: 34px;
+  }
   .leading-none {
     --tw-leading: 1;
     line-height: 1;
@@ -957,6 +1003,9 @@
   .whitespace-nowrap {
     white-space: nowrap;
   }
+  .text-\[\#798B95\] {
+    color: #798B95;
+  }
   .text-\[orange\] {
     color: orange;
   }
@@ -966,6 +1015,12 @@
   .text-black {
     color: var(--color-black);
   }
+  .text-black\/50 {
+    color: color-mix(in srgb, #000 50%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      color: color-mix(in oklab, var(--color-black) 50%, transparent);
+    }
+  }
   .text-card-foreground {
     color: var(--card-foreground);
   }
@@ -996,8 +1051,8 @@
   .text-primary-foreground {
     color: var(--primary-foreground);
   }
-  .text-secondary {
-    color: var(--secondary);
+  .text-red-500 {
+    color: var(--color-red-500);
   }
   .text-secondary-foreground {
     color: var(--secondary-foreground);
@@ -1065,6 +1120,15 @@
       var(--tw-ring-shadow),
       var(--tw-shadow);
   }
+  .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);
+  }
   .ring-\[3px\] {
     --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
     box-shadow:
@@ -1384,6 +1448,13 @@
       }
     }
   }
+  .hover\:bg-gray-100 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-gray-100);
+      }
+    }
+  }
   .hover\:bg-primary\/90 {
     &:hover {
       @media (hover: hover) {
@@ -2006,6 +2077,12 @@
         var(--tw-shadow);
     }
   }
+  .data-\[state\=checked\]\:translate-x-\[calc\(100\%-2px\)\] {
+    &[data-state=checked] {
+      --tw-translate-x: calc(100% - 2px);
+      translate: var(--tw-translate-x) var(--tw-translate-y);
+    }
+  }
   .data-\[state\=checked\]\:border-primary {
     &[data-state=checked] {
       border-color: var(--primary);
@@ -2176,6 +2253,17 @@
       }
     }
   }
+  .data-\[state\=unchecked\]\:translate-x-0 {
+    &[data-state=unchecked] {
+      --tw-translate-x: calc(var(--spacing) * 0);
+      translate: var(--tw-translate-x) var(--tw-translate-y);
+    }
+  }
+  .data-\[state\=unchecked\]\:bg-input {
+    &[data-state=unchecked] {
+      background-color: var(--input);
+    }
+  }
   .data-\[state\=visible\]\:animate-in {
     &[data-state=visible] {
       animation: enter var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none);
@@ -2351,6 +2439,11 @@
       position: absolute;
     }
   }
+  .md\:block {
+    @media (width >= 48rem) {
+      display: block;
+    }
+  }
   .md\:w-\[var\(--radix-navigation-menu-viewport-width\)\] {
     @media (width >= 48rem) {
       width: var(--radix-navigation-menu-viewport-width);
@@ -2492,6 +2585,30 @@
       }
     }
   }
+  .dark\:data-\[state\=checked\]\:bg-primary-foreground {
+    &:is(.dark *) {
+      &[data-state=checked] {
+        background-color: var(--primary-foreground);
+      }
+    }
+  }
+  .dark\:data-\[state\=unchecked\]\:bg-foreground {
+    &:is(.dark *) {
+      &[data-state=unchecked] {
+        background-color: var(--foreground);
+      }
+    }
+  }
+  .dark\:data-\[state\=unchecked\]\:bg-input\/80 {
+    &:is(.dark *) {
+      &[data-state=unchecked] {
+        background-color: var(--input);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--input) 80%, transparent);
+        }
+      }
+    }
+  }
   .dark\:data-\[variant\=destructive\]\:focus\:bg-destructive\/20 {
     &:is(.dark *) {
       &[data-variant=destructive] {
@@ -2809,7 +2926,6 @@
 }
 .sl-spreepay {
   --primary: #022664;
-  --secondary: rgba(0, 0, 0, 0.5);
 }
 @property --tw-translate-x { syntax: "*"; inherits: false; initial-value: 0; }
 @property --tw-translate-y { syntax: "*"; inherits: false; initial-value: 0; }

package/build/index.d.cts

@@ -2,7 +2,7 @@ import { FC, ReactNode } from 'react';
 
 type SpreePayProps = {
     onProcess?: () => Promise<void>;
-    amount?: string;
+    amount?: number;
     className?: string;
 };
 
@@ -13,6 +13,24 @@ type ENV = {
     accessToken: string;
 };
 
+type Coin = {
+    address: `0x${string}`;
+    chainId: number;
+    decimals: number;
+    formatted?: string;
+    logoURI?: string;
+    name: string;
+    raw?: bigint;
+    symbol: string;
+};
+type NativeCoin = {
+    decimals: number;
+    formatted: string;
+    logoURI: string;
+    symbol: string;
+    value: bigint;
+};
+
 type Card = {
     active: boolean;
     addressZipCheck: string;
@@ -33,22 +51,6 @@ type Card = {
     userId: string;
     zipCode: string;
 };
-declare const enum COIN {
-    SOL = "SOL",
-    TRUMP = "TRUMP",
-    BONK = "BONK",
-    USDC = "USDC"
-}
-type Coin = {
-    address: string;
-    name: string;
-    symbol: COIN;
-    decimals: number;
-    logoURI: string;
-};
-type CoinWithBallance = Coin & {
-    balance?: number;
-};
 type NewCard = Pick<Card, 'expireMonth' | 'expireYear' | 'lastFourNumbers' | 'schema' | 'active'> & {
     token: string;
     id: string;
@@ -58,7 +60,7 @@ type CardPaymentMethod = {
     type: PaymentType.CREDIT_CARD;
 };
 type CryptoPaymentMethod = {
-    method: CoinWithBallance | null;
+    method: Coin | NativeCoin | null;
     type: PaymentType.CRYPTO;
 };
 type SelectedPaymentMethod = CardPaymentMethod | CryptoPaymentMethod;
@@ -75,7 +77,9 @@ declare const SpreePayProvider: FC<SpreePayProviderProps>;
 declare const useSpreePay: () => {
     process: (data: {
         hash: string;
-    }) => Promise<unknown>;
+    }) => Promise<{
+        status: string;
+    }>;
     enabled: boolean;
     selectedPaymentMethod: SelectedPaymentMethod;
 };

package/build/index.d.ts

@@ -2,7 +2,7 @@ import { FC, ReactNode } from 'react';
 
 type SpreePayProps = {
     onProcess?: () => Promise<void>;
-    amount?: string;
+    amount?: number;
     className?: string;
 };
 
@@ -13,6 +13,24 @@ type ENV = {
     accessToken: string;
 };
 
+type Coin = {
+    address: `0x${string}`;
+    chainId: number;
+    decimals: number;
+    formatted?: string;
+    logoURI?: string;
+    name: string;
+    raw?: bigint;
+    symbol: string;
+};
+type NativeCoin = {
+    decimals: number;
+    formatted: string;
+    logoURI: string;
+    symbol: string;
+    value: bigint;
+};
+
 type Card = {
     active: boolean;
     addressZipCheck: string;
@@ -33,22 +51,6 @@ type Card = {
     userId: string;
     zipCode: string;
 };
-declare const enum COIN {
-    SOL = "SOL",
-    TRUMP = "TRUMP",
-    BONK = "BONK",
-    USDC = "USDC"
-}
-type Coin = {
-    address: string;
-    name: string;
-    symbol: COIN;
-    decimals: number;
-    logoURI: string;
-};
-type CoinWithBallance = Coin & {
-    balance?: number;
-};
 type NewCard = Pick<Card, 'expireMonth' | 'expireYear' | 'lastFourNumbers' | 'schema' | 'active'> & {
     token: string;
     id: string;
@@ -58,7 +60,7 @@ type CardPaymentMethod = {
     type: PaymentType.CREDIT_CARD;
 };
 type CryptoPaymentMethod = {
-    method: CoinWithBallance | null;
+    method: Coin | NativeCoin | null;
     type: PaymentType.CRYPTO;
 };
 type SelectedPaymentMethod = CardPaymentMethod | CryptoPaymentMethod;
@@ -75,7 +77,9 @@ declare const SpreePayProvider: FC<SpreePayProviderProps>;
 declare const useSpreePay: () => {
     process: (data: {
         hash: string;
-    }) => Promise<unknown>;
+    }) => Promise<{
+        status: string;
+    }>;
     enabled: boolean;
     selectedPaymentMethod: SelectedPaymentMethod;
 };