@luxfi/ui 5.5.2 → 5.6.0

package/style/drawer-handle-overrides.css

@@ -1,160 +0,0 @@
-[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] {
-  /* opacity: 0.8; */
-  touch-action: pan-y;
-  cursor: grab;
-}
-
-
-
-/* [vaul-handle]:hover, */
-[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); /* 44px */
-  height: max(100%, 2.75rem); /* 44px */
-  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;
-}
-
-/* This will allow us to not animate via animation, but still benefit from delaying unmount via Radix. */
-@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;
-  }
-}
-

package/style/lux-colors.css

@@ -1,85 +0,0 @@
-@tailwind base;
-/* see https://stackoverflow.com/questions/69746121/using-nextjs-how-can-you-import-in-css-using-tailwind-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);
-
-  }
-
-}
-

package/style/lux-fonts.css

@@ -1,30 +0,0 @@
-@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

@@ -1,52 +0,0 @@
-/* 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;
-}

package/style/lux-global.css

@@ -1,51 +0,0 @@
-/* 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 "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;
-}

package/tailwind/fontFamily.tailwind.lux.ts

@@ -1,18 +0,0 @@
-import type { TwFontDesc } from '@hanzo/ui/tailwind'
-
-import luxTwFonts  from './lux-tw-fonts'
-
-export const fontFamily = (ignoreTheme: any): {
-  [key: string]: string[] 
-} => {
-
-  let result: any = {}
-  luxTwFonts.forEach((font: TwFontDesc) => {
-    result[font.twName] = font.fontFamily
-    // eg: heading: ['var(--font-druk-text-wide)']
-  })
-
-  return result as {
-    [key: string]: string[] 
-  }
-}

package/tailwind/index.ts

@@ -1,2 +0,0 @@
- 
-export {default as preset} from './tailwind.config.lux-preset'

package/tailwind/lux-tw-fonts.ts

@@ -1,40 +0,0 @@
-import type { TwFontDesc } from '@hanzo/ui/tailwind'
-
-
-/* NOTE: /next/load-and-return....ts depends on this file! */
-
-export default [
-  {
-    fontFamily: ['var(--font-inter)'], // do not provide fall-backs due to next bug
-    cssVar: '--font-inter',
-    twName: 'sans'
-  },
-  {
-    fontFamily: ['var(--font-druk-text-wide)'], // do not provide fall-backs due to next bug
-    cssVar: '--font-druk-text-wide',
-    twName: 'nav'
-  },
-  {
-    fontFamily: ['var(--font-druk-wide)'], // do not provide fall-backs due to next bug
-    cssVar: '--font-druk-wide',
-    twName: 'heading'
-  },
-  {
-    twName: 'serif',
-    fontFamily: ['ui-serif', 'Georgia', 'Cambria', '"Times New Roman"', 'Times']
-  },
-  {
-    twName: 'mono',
-    fontFamily: [
-      'ui-monospace',
-      'SFMono-Regular',
-      'Menlo',
-      'Monaco',
-      'Consolas',
-      '"Liberation Mono"',
-      '"Courier New"',
-      'monospace',
-    ] 
-  }
-
-] as TwFontDesc[]

package/tailwind/tailwind.config.lux-preset.ts

@@ -1,10 +0,0 @@
-import type { Config } from 'tailwindcss'
-import { preset } from '@hanzo/ui/tailwind'
-import { fontFamily } from './fontFamily.tailwind.lux'
-
-export default {
-  presets: [preset],
-  content: [],
-  theme: { fontFamily }
-} satisfies Config
-

package/tsconfig.json

@@ -1,15 +0,0 @@
-{
-  "extends": "../tsconfig.modules.base.json",
-  "include": [
-    "**/*.ts",
-    "**/*.tsx", "components/commerce/_to_deprecate_checkout-widget/index.tsx_",
-  ],
-  "exclude": [
-    "node_modules",
-  ],
-  "compilerOptions": {
-    "paths": {
-      "react": [ "./node_modules/@types/react" ],
-    }
-  }
-}

package/types/chatbot-config.ts

@@ -1,7 +0,0 @@
-import type ChatbotSuggestQuestion from './chatbot-suggested-question'
-
-interface ChatbotConfig {
-  suggestedQuestions?: ChatbotSuggestQuestion[] 
-}
-
-export { type ChatbotConfig as default } 

package/types/chatbot-suggested-question.ts

@@ -1,7 +0,0 @@
-interface ChatbotSuggestedQuestion {
-  heading: string 
-  message: string 
-  icon?: string
-}
-
-export { type ChatbotSuggestedQuestion as default }

package/types/contact-info.ts

@@ -1,11 +0,0 @@
-interface ContactInfo {
-  email: string
-  phone?: string
-}
-
-type ContactInfoFields = keyof ContactInfo
-
-export {
-  type ContactInfo,
-  type ContactInfoFields
-}

package/types/index.ts

@@ -1,4 +0,0 @@
-export type { ContactInfo, ContactInfoFields } from './contact-info'
-export type { default as SiteDef } from './site-def'
-export type { default as ChatbotSuggestedQuestion } from './chatbot-suggested-question'
-export type { default as ChatbotConfig } from './chatbot-config'

package/types/site-def.ts

@@ -1,46 +0,0 @@
-import React from 'react'
-
-import type { LinkDef } from '@hanzo/ui/types'
-import type { CommerceConfig }  from '@hanzo/commerce/types'
-
-import type ChatbotConfig from './chatbot-config'
-
-interface SiteDef {
-
-    /** url of this site.  All nav links in the system will show it in 'current' state */
-  currentAs?: string
-
-  nav: {
-      /** common elements (will auto-select currentAs if it's provide) */
-      /** optional feature element. right-most after 'elements' (any min-w is ignored) */
-    common: LinkDef[]       
-    featured?: LinkDef[]
-  }
-
-    /** 
-     * Array of columns, each of which itself is an array of links 
-     * (or "title defs" where href='' and variant='linkFG')  
-     * Common use case: To render a site-specific first column: 
-     * {
-     *    footer[myColumn, ...commonColumnsFromUi]
-     * }
-     * see: @hanzo/ui/siteDef/footer (default export)
-     * or @hanzo/ui/siteDef/footer/common
-     */
-  footer: LinkDef[][]  
-
-    /** 
-     * optional override of default 'above copyright' horizantal links 
-      default (undefined / absent): links in side-def/footer/legal are rendered 
-      [] renders nothing above the copyright 
-    */
-  aboveCopyright?: LinkDef[] 
-
-  commerce?: CommerceConfig
-  chatbot?: ChatbotConfig
-
-    // Do not render login / avatar widget
-  noAuth?: boolean
-}
-
-export { type SiteDef as default }