@luxfi/ui 5.3.23 → 5.4.0

package/commerce/ui/conf.ts

@@ -2,12 +2,12 @@ import type { SnapPointsConfig } from './store'
 
 export default {
   mb: {
-    micro: '62px',
-    full: '550px' 
+    micro: '72px',
+    full: '600px' 
   },
 
   dt: {
-    micro: '74px',
-    full: '575px' 
+    micro: '90px',
+    full: '620px' 
   }
 } satisfies SnapPointsConfig

package/commerce/ui/store.ts

@@ -10,7 +10,7 @@ import {
 
 import type { CommerceService } from '@hanzo/commerce/types'
 
-const LOG = false ////////////////////
+const LOG = true ////////////////////
 const log = (s: string) => {
   if (LOG) {
     console.log('COMMERCE_UI ' + s)
@@ -157,10 +157,12 @@ class CommerceUIStore implements
   onActivePointChanged = (newPoint: SnapPoint | null): void => { 
     log("ON onActivePointChanged: " +  newPoint) // ===========
     if (newPoint === this._points.micro && this.activePoint === this._points.full) {
+      log("ON onActivePointChanged: to MICRO") // ===========
       this.setIgnoreStateChange(true)
       this.hideVariants()  
     }
     else if (newPoint === this._points.full && this.activePoint === this._points.micro) {
+      log("ON onActivePointChanged: to FULL") // ===========
       this.setIgnoreStateChange(true)
       this.showRecentVariants()
     }
@@ -210,6 +212,9 @@ class CommerceUIStore implements
     }
     else if (s === 'full') {
       this.setActivePoint(this.points[this.points.length - 1])
+    }
+    else {
+      this.setActivePoint(null)
     } 
   }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@luxfi/ui",
-  "version": "5.3.23",
+  "version": "5.4.0",
   "description": "Library that contains shared UI primitives, support for a common design system, and other boilerplate support.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",

package/style/lux-fonts.css

@@ -0,0 +1,30 @@
+@tailwind base;
+
+@layer base {
+  @font-face {
+    font-family: "DrukWide";
+    src: url("/fonts/Druk-Wide-Medium.ttf");
+    font-weight: 500;
+    font-style: normal;
+  }
+  @font-face {
+    font-family: "DrukWide";
+    src: url("/fonts/Druk-Wide-Bold.ttf");
+    font-weight: 700;
+    font-style: normal;
+  }
+  @font-face {
+    font-family: "inter";
+    src: url("/fonts/InterVariable.woff2") format("woff2"),
+      url("/fonts/InterVariable.ttf") format("ttf");
+    font-weight: 500;
+    font-style: normal;
+  }
+  @font-face {
+    font-family: "inter";
+    src: url("/fonts/InterVariable-Italic.woff2") format("woff2"),
+      url("/fonts/InterVariable-Italic.ttf") format("ttf");
+    font-weight: 500;
+    font-style: italic;
+  }
+}

package/style/lux-global-non-next.css

@@ -0,0 +1,52 @@
+/* Note, preflight is applied first:
+  https://unpkg.com/tailwindcss@3.3.5/src/css/preflight.css
+*/
+@import "tailwindcss/base";
+
+/* see https://stackoverflow.com/questions/69746121/using-nextjs-how-can-you-import-in-css-using-tailwind-css */
+/* @import "@hanzo/ui/style/hanzo-common"; */
+@import "lux-colors";
+@import "lux-fonts";
+
+@import "tailwindcss/components";
+@import "tailwindcss/utilities";
+
+div.nextjs-toast-errors-parent[data-nextjs-toast="true"] {
+  display: none;
+}
+
+.font-heading {
+  @apply uppercase;
+}
+
+/* Specific style fixes for react-square-web-payments-sdk -
+ * reduce gap between card input and pay button
+ */
+#rswps-card-container {
+  min-height: unset !important;
+}
+
+.sq-card-wrapper .sq-card-message {
+  margin-top: 0 !important;
+  margin-bottom: 0 !important;
+}
+
+
+.element-container:hover .icon-container-nor {
+  display: none;
+}
+
+.icon-container-hov {
+  display: none;
+}
+
+.element-container:hover .icon-container-hov {
+  display: block !important;
+}
+
+.element-container:hover .text-container {
+  background: transparent;
+}
+.overflow-scroll::-webkit-scrollbar{
+  display:none;
+}