@luxfi/ui 8.1.0 → 8.2.1

package/dist/site/root-layout/index.css

@@ -0,0 +1,374 @@
+/* src/site/components/icons/social-svg.css */
+.social-icon svg {
+  transform: scale(1.25);
+}
+
+/* src/site/style/drawer-handle-overrides.css */
+[vaul-drawer] {
+  touch-action: none;
+  transition: transform 0.5s cubic-bezier(0.32, 0.72, 0, 1);
+}
+[vaul-drawer][vaul-drawer-direction=bottom] {
+  transform: translate3d(0, 100%, 0);
+}
+[vaul-drawer][vaul-drawer-direction=top] {
+  transform: translate3d(0, -100%, 0);
+}
+[vaul-drawer][vaul-drawer-direction=left] {
+  transform: translate3d(-100%, 0, 0);
+}
+[vaul-drawer][vaul-drawer-direction=right] {
+  transform: translate3d(100%, 0, 0);
+}
+.vaul-dragging .vaul-scrollable [vault-drawer-direction=top] {
+  overflow-y: hidden !important;
+}
+.vaul-dragging .vaul-scrollable [vault-drawer-direction=bottom] {
+  overflow-y: hidden !important;
+}
+.vaul-dragging .vaul-scrollable [vault-drawer-direction=left] {
+  overflow-x: hidden !important;
+}
+.vaul-dragging .vaul-scrollable [vault-drawer-direction=right] {
+  overflow-x: hidden !important;
+}
+[vaul-drawer][vaul-drawer-visible=true][vaul-drawer-direction=top] {
+  transform: translate3d(0, var(--snap-point-height, 0), 0);
+}
+[vaul-drawer][vaul-drawer-visible=true][vaul-drawer-direction=bottom] {
+  transform: translate3d(0, var(--snap-point-height, 0), 0);
+}
+[vaul-drawer][vaul-drawer-visible=true][vaul-drawer-direction=left] {
+  transform: translate3d(var(--snap-point-height, 0), 0, 0);
+}
+[vaul-drawer][vaul-drawer-visible=true][vaul-drawer-direction=right] {
+  transform: translate3d(var(--snap-point-height, 0), 0, 0);
+}
+[vaul-overlay] {
+  opacity: 0;
+  transition: opacity 0.5s cubic-bezier(0.32, 0.72, 0, 1);
+}
+[vaul-overlay][vaul-drawer-visible=true] {
+  opacity: 1;
+}
+[vaul-drawer]::after {
+  content: "";
+  position: absolute;
+  background: inherit;
+  background-color: inherit;
+}
+[vaul-drawer][vaul-drawer-direction=top]::after {
+  top: initial;
+  bottom: 100%;
+  left: 0;
+  right: 0;
+  height: 200%;
+}
+[vaul-drawer][vaul-drawer-direction=bottom]::after {
+  top: 100%;
+  bottom: initial;
+  left: 0;
+  right: 0;
+  height: 200%;
+}
+[vaul-drawer][vaul-drawer-direction=left]::after {
+  left: initial;
+  right: 100%;
+  top: 0;
+  bottom: 0;
+  width: 200%;
+}
+[vaul-drawer][vaul-drawer-direction=right]::after {
+  left: 100%;
+  right: initial;
+  top: 0;
+  bottom: 0;
+  width: 200%;
+}
+[vaul-handle] {
+  touch-action: pan-y;
+  cursor: grab;
+}
+[vaul-handle]:active {
+  opacity: 1;
+}
+[vaul-handle]:active {
+  cursor: grabbing;
+}
+[vaul-handle]:focus-visible {
+  outline: none;
+}
+[vaul-handle-hitarea] {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  width: max(100%, 2.75rem);
+  height: max(100%, 2.75rem);
+  touch-action: inherit;
+}
+[vaul-overlay][vaul-snap-points=true]:not([vaul-snap-points-overlay=true]):not([data-state=closed]) {
+  opacity: 0;
+}
+[vaul-overlay][vaul-snap-points-overlay=true]:not([vaul-drawer-visible=false]) {
+  opacity: 1;
+}
+@keyframes fake-animation {
+  from {
+  }
+  to {
+  }
+}
+@media (pointer: fine) {
+  [vaul-handle-hitarea] {
+    width: 100%;
+    height: 100%;
+  }
+}
+@media (hover: hover) and (pointer: fine) {
+  [vaul-drawer] {
+    user-select: none;
+  }
+}
+
+/* src/site/style/lux-colors.css */
+@layer base {
+  :root,
+  .hanzo-ui-light-theme {
+    --hz-ui-fg-0: hsl(0 0% 0%);
+    --hz-ui-fg-body: hsl(0 0% 10%);
+    --hz-ui-fg-1: hsl(0 0% 20%);
+    --hz-ui-fg-2: hsl(0 0% 35%);
+    --hz-ui-fg-3: hsl(0 0% 50%);
+    --hz-ui-fg-4: hsl(0 0% 70%);
+    --hz-ui-fg-5: hsl(0 0% 90%);
+    --hz-ui-bg-0: hsl(0 0% 100%);
+    --hz-ui-bg-1: hsl(0 0% 90%);
+    --hz-ui-bg-2: hsl(0 0% 75%);
+    --hz-ui-bg-3: hsl(0 0% 55%);
+    --hz-ui-bg-overlay: hsla(0 0% 100% 0.60);
+    --hz-ui-bg-inverted: var(--hz-ui-fg-0);
+    --hz-ui-bg-inverted-hover: hsla(0, 0%, 0%, 0.85);
+    --hz-ui-fg-inverted: var(--hz-ui-bg-0);
+    --hz-ui-secondary-0: hsl(262, 7%, 82%);
+    --hz-ui-secondary-1: hsl(258, 7%, 72%);
+    --hz-ui-secondary-2: hsl(254, 7%, 62%);
+    --hz-ui-secondary-3: hsl(250, 5%, 53%);
+    --hz-ui-primary: var(--hz-ui-bg-inverted);
+    --hz-ui-primary-hover: var(--hz-ui-bg-inverted-hover);
+    --hz-ui-primary-fg: var(--hz-ui-fg-inverted);
+    --hz-ui-secondary: var(--hz-ui-secondary-0);
+    --hz-ui-secondary-hover: var(--hz-ui-secondary-2);
+    --hz-ui-secondary-fg: var(--hz-ui-bg-0);
+    --hz-ui-nav: var(--hz-ui-fg-4);
+    --hz-ui-nav-current: var(--hz-ui-fg-0);
+    --hz-ui-nav-hover: var(--hz-ui-fg-0);
+    --hz-ui-destructive: hsl(0 62.8% 45%);
+    --hz-ui-destructive-hover: hsl(0 62.8% 25%);
+    --hz-ui-destructive-fg: hsl(0 0% 100%);
+    --hz-ui-ring: var(--hz-ui-fg-1);
+    --hz-ui-radius: 0.5rem;
+  }
+  .hanzo-ui-dark-theme {
+    --hz-ui-fg-0: hsl(0 0% 100%);
+    --hz-ui-fg-body: hsl(0, 0%, 97%);
+    --hz-ui-fg-1: hsl(0 0% 85%);
+    --hz-ui-fg-2: hsl(0 0% 70%);
+    --hz-ui-fg-3: hsl(0 0% 55%);
+    --hz-ui-fg-4: hsl(0 0% 40%);
+    --hz-ui-fg-5: hsl(0 0% 25%);
+    --hz-ui-bg-inverted: var(--hz-ui-fg-0);
+    --hz-ui-bg-inverted-hover: hsla(0, 0%, 100%, 0.85);
+    --hz-ui-bg-3: hsl(0 0% 25%);
+    --hz-ui-bg-2: hsl(0 0% 18%);
+    --hz-ui-bg-1: hsl(0 0% 12%);
+    --hz-ui-bg-0: hsl(0 0% 0%);
+    --hz-ui-bg-overlay: hsla(0 0% 0% 0.60);
+    --hz-ui-fg-inverted: var(--hz-ui-bg-0);
+    --hz-ui-secondary-0: hsl(250, 5%, 53%);
+    --hz-ui-secondary-1: hsl(254, 7%, 62%);
+    --hz-ui-secondary-2: hsl(258, 7%, 72%);
+    --hz-ui-secondary-3: hsl(262, 7%, 82%);
+    --hz-ui-secondary-fg: var(--hz-ui-fg-0);
+  }
+}
+
+/* src/site/style/lux-global.css */
+body {
+  background: var(--background);
+  color: var(--foreground);
+  min-height: 100%;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  grid-template-rows: 1fr;
+  font-family:
+    var(--font-inter),
+    ui-sans-serif,
+    system-ui,
+    sans-serif;
+}
+div.nextjs-toast-errors-parent[data-nextjs-toast=true] {
+  display: none;
+}
+.font-heading {
+  font-family:
+    var(--font-zen-sans),
+    var(--font-inter),
+    sans-serif;
+  text-transform: uppercase;
+  font-variation-settings: "wght" 845;
+  letter-spacing: -0.04em;
+}
+.hanzo-iam-card,
+.hanzo-iam-form {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  gap: 0.75rem;
+  width: 100%;
+}
+.hanzo-iam-form input {
+  width: 100%;
+  border-radius: var(--radius-sm, 0.375rem);
+  padding: 0.5rem 0.75rem;
+  font-size: var(--text-base);
+  background-color: var(--hz-ui-bg-1);
+  color: var(--hz-ui-fg-body);
+  border: 1px solid var(--hz-ui-bg-2);
+}
+.hanzo-iam-form input::placeholder {
+  color: var(--hz-ui-fg-3);
+}
+.hanzo-iam-form input:focus {
+  outline: none;
+  border-color: var(--hz-ui-fg-body);
+}
+.hanzo-iam-btn {
+  width: 100%;
+  border-radius: var(--radius-sm, 0.375rem);
+  padding: 0.5rem 0.75rem;
+  font-size: var(--text-base);
+  font-weight: 600;
+  cursor: pointer;
+  background-color: var(--hz-ui-bg-inverted);
+  color: var(--hz-ui-fg-inverted);
+}
+.hanzo-iam-btn:hover {
+  background-color: var(--hz-ui-bg-inverted-hover);
+}
+.hanzo-iam-btn:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+.hanzo-iam-divider {
+  font-size: var(--text-sm);
+  text-transform: uppercase;
+  color: var(--hz-ui-fg-3);
+}
+.hanzo-iam-error {
+  font-size: var(--text-sm);
+  color: hsl(0 70% 60%);
+}
+#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;
+}
+
+/* src/site/style/cart-animation.css */
+@keyframes wiggle-larger {
+  0% {
+    transform: rotate(0deg);
+  }
+  18% {
+    transform: rotate(10deg) scale(0.9);
+  }
+  32% {
+    transform: rotate(0deg) scale(1.05);
+  }
+  50% {
+    transform: rotate(-10deg) scale(1.05);
+  }
+  68% {
+    transform: rotate(0deg) scale(1.1);
+  }
+  84% {
+    transform: rotate(10deg) scale(1);
+  }
+  100% {
+    transform: rotate(0deg) scale(1);
+  }
+}
+@keyframes wiggle-smaller {
+  0% {
+    transform: rotate(0deg);
+  }
+  18% {
+    transform: rotate(10deg) scale(1.05);
+  }
+  32% {
+    transform: rotate(0deg) scale(0.9);
+  }
+  50% {
+    transform: rotate(-10deg) scale(0.9);
+  }
+  68% {
+    transform: rotate(0deg) scale(0.85);
+  }
+  84% {
+    transform: rotate(10deg) scale(1);
+  }
+  100% {
+    transform: rotate(0deg) scale(1);
+  }
+}
+.wiggle-larger-animation,
+.item-added-to-cart-animation {
+  animation: wiggle-larger 350ms;
+}
+.wiggle-smaller-animation,
+.item-removed-from-cart-animation {
+  animation: wiggle-smaller 300ms;
+}
+
+/* src/site/style/checkout-animation.css */
+@keyframes checkout-widget-fade-in {
+  0% {
+    transform: scale(0.5);
+    opacity: 0;
+  }
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+.checkout-widget-appears {
+  animation-name: checkout-widget-fade-in;
+  animation-duration: 200ms;
+}
+.checkout-widget-disappears {
+  animation-name: checkout-widget-fade-in;
+  animation-duration: 200ms;
+  animation-direction: reverse;
+  animation-fill-mode: forwards;
+}
+.checkout-widget-appears-after-buy-drawer-closes {
+  animation-fill-mode: backwards;
+  animation-delay: 400ms;
+}

package/dist/site/root-layout/index.d.ts

@@ -0,0 +1,20 @@
+import React, { type PropsWithChildren } from 'react';
+import type SiteDef from '../types/site-def';
+import '@hanzo/ui/theme.css';
+import '@hanzo/ui/styles.css';
+import '../style/lux-global.css';
+import '../style/cart-animation.css';
+import '../style/checkout-animation.css';
+declare const viewport: {
+    themeColor: {
+        media: string;
+        color: string;
+    }[];
+};
+declare function RootLayout({ showHeader, chatbot, siteDef, children, }: {
+    siteDef: SiteDef;
+    showHeader?: boolean;
+    chatbot?: boolean;
+} & PropsWithChildren): React.JSX.Element;
+export { RootLayout, viewport };
+//# sourceMappingURL=index.d.ts.map

package/dist/site/root-layout/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/site/root-layout/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAA;AAerD,OAAO,KAAK,OAAO,MAAM,mBAAmB,CAAA;AAM5C,OAAO,qBAAqB,CAAA;AAC5B,OAAO,sBAAsB,CAAA;AAE7B,OAAO,yBAAyB,CAAA;AAChC,OAAO,6BAA6B,CAAA;AACpC,OAAO,iCAAiC,CAAA;AAIxC,QAAA,MAAM,QAAQ;;;;;CAKM,CAAA;AAkBpB,iBAAS,UAAU,CAAC,EAClB,UAAkB,EAClB,OAAe,EACf,OAAO,EACP,QAAQ,GACT,EAAG;IACF,OAAO,EAAE,OAAO,CAAA;IAChB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB,GAAG,iBAAiB,qBAyDpB;AAED,OAAO,EACL,UAAU,EACV,QAAQ,EACT,CAAA"}