@luxfi/ui 5.5.5 → 5.5.6

package/components/header/mobile.tsx

@@ -3,8 +3,7 @@ import React, { useState, useEffect } from 'react'
 import { useRouter } from 'next/navigation'
 
 import type { LinkDef } from '@hanzo/ui/types'
-import { cn } from '@hanzo/ui/util'
-
+import { Box, cn } from '@hanzo/ui'
 import { CartPanel, useCommerce } from '@hanzo/commerce'
 import Login from '../auth/login'
 import sendGAEvent from '../../next/analytics/google-analytics'
@@ -89,7 +88,7 @@ const MobileHeader: React.FC<{
     }
     // header element MUST be fixed, and NOT sticky.  Or else drawer breaks on mobile browsers
     return (<>
-      <header id='MOBILE_HEADER' className={cn(
+      <Box tag="header" id='MOBILE_HEADER' className={cn(
         `bg-background fixed z-header top-0 left-0 w-full ${menuOpen() ? 'hidden' : 'block'}`,
         className
       )}>
@@ -99,12 +98,12 @@ const MobileHeader: React.FC<{
           {/* Not that key to the cross-fade effect 
             is that this is **on top of** the logo. */}
           {menuOpen() && (
-            <div className={'absolute left-0 top-0 bottom-0 right-0 pl-8 ' +
+            <Box className={'absolute left-0 top-0 bottom-0 right-0 pl-8 ' +
             'flex flex-row ' +
             'bg-background animate-mobile-menu-open'
           }>
               <Avatar className='self-center ' />
-            </div>
+            </Box>
           )}
           <div className='flex gap-0 flex-row'>
             <BagButton className='text-primary -mr-[3px]' onClick={openBag} />
@@ -112,7 +111,7 @@ const MobileHeader: React.FC<{
           </div>
 
         </div>
-      </header>
+      </Box>
       {!noCommerce && (
         <MobileBagDrawer
           className=''
@@ -123,7 +122,7 @@ const MobileHeader: React.FC<{
       )}
 
       {menuOpen() && (
-        <div className={
+        <Box className={
           'fixed top-0 left-0 w-full h-full ' +
           // z must below header itself
           'flex flex-column bg-background z-below-header animate-mobile-menu-open'
@@ -162,7 +161,7 @@ const MobileHeader: React.FC<{
               />
             )
           )}
-        </div>
+        </Box>
       ) /* menuOpen */}
     </>)
   }

package/components/icons/social-icon.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 
 import { SocialIcon as BaseSocialIcon } from 'react-social-icons'
 
-import { cn } from '@hanzo/ui/util'
+import { cn } from '@hanzo/ui'
 import './social-svg.css'
 
 interface SocialIconProps {

package/components/logo.tsx

@@ -1,4 +1,5 @@
 import React from 'react'
+import { Box, css } from '@hanzo/ui'
 import Link from 'next/link'
 
 import { type TShirtSize } from '@hanzo/ui/types'
@@ -52,9 +53,9 @@ const Logo: React.FC<{
   </>)
 
   return href ? (
-    <Link href={href} className={clx} onClick={onClick}>{art}</Link>
+    <Link href={href} style={css(clx)} onClick={onClick}>{art}</Link>
   ) : (
-    <span className={clx} onClick={onClick}>{art}</span>
+    <Box tag="span" className={clx} onClick={onClick}>{art}</Box>
   )
 }
 

package/components/main.tsx

@@ -1,6 +1,5 @@
 import React, { type PropsWithChildren } from 'react'
-import { cn } from '@hanzo/ui/util'
-
+import { Box, cn } from '@hanzo/ui'
 const Main: React.FC<PropsWithChildren & { 
   id?: string
   className?: string 
@@ -13,7 +12,7 @@ const Main: React.FC<PropsWithChildren & {
   standardWidth=true,
   id
 }) => (
-  <main id={id ?? 'LUX_UI_MAIN'} className={cn(
+  <Box tag="main" id={id ?? 'LUX_UI_MAIN'} className={cn(
     'flex flex-col justify-start items-center',
     'px-4 md:px-6 lg:px-8',
     standardWidth ? 'max-w-screen-2xl w-full lg:mx-auto' : '',
@@ -21,7 +20,7 @@ const Main: React.FC<PropsWithChildren & {
     className
   )}>
     {children}
-  </main>
+  </Box>
 )
 
 export default Main

package/components/mini-chart/mini-chart.tsx

@@ -1,6 +1,7 @@
 'use client'
 
 import React, { useEffect, useRef } from 'react'
+import { Box } from '@hanzo/ui'
 import { type MiniChartProps } from './mini-chart-props'
 
 const MiniChart: React.FC<MiniChartProps> = ({ 
@@ -77,7 +78,7 @@ const MiniChart: React.FC<MiniChartProps> = ({
 		<div style={containerStyles} className='tradingview-widget-container h-[150px]' ref={containerRef} />
     <div className='tradingview-widget-copyright border-t w-full invisible'>
       <a href={`https://www.tradingview.com/symbols/${symbol}${exchange ? `/?exchange=${exchange}` : '' }`} rel="noopener" target="_blank">
-        <span className="text-[--hz-ui-primary]">{symbol} quotes</span></a>&nbsp;by TradingView
+        <Box tag="span" className="text-[--hz-ui-primary]">{symbol} quotes</Box></a>&nbsp;by TradingView
     </div>
   </>)
 }

package/next/font/font-desc.ts

@@ -0,0 +1,18 @@
+/**
+ * A font in this site's vocabulary.
+ *
+ * `name` is the ROLE the font plays — `sans`, `nav`, `heading`, `serif`, `mono`
+ * — not a file and not a family. The stack is what the browser resolves, and
+ * `cssVar` is the custom property the next/font loader publishes the loaded
+ * face under, so the stack can point at it.
+ *
+ * It lived in a Tailwind preset and was called `TwFontDesc`, which named the
+ * engine that happened to read it rather than what it is. The engine is gone;
+ * the fonts are not.
+ */
+export type FontDesc = {
+  /** The role: `sans`, `nav`, `heading`, `serif`, `mono`. */
+  name: string
+  fontFamily: string[]
+  cssVar?: string
+}

package/next/font/fonts.ts

@@ -0,0 +1,40 @@
+import type { FontDesc } from './font-desc'
+
+
+/* Read by ./load-and-return-lux-next-fonts-on-import.ts */
+
+export default [
+  {
+    fontFamily: ['var(--font-inter)'], // do not provide fall-backs due to next bug
+    cssVar: '--font-inter',
+    name: 'sans'
+  },
+  {
+    fontFamily: ['var(--font-inter)'], // do not provide fall-backs due to next bug
+    cssVar: '--font-inter',
+    name: 'nav'
+  },
+  {
+    fontFamily: ['var(--font-zen-sans)'], // do not provide fall-backs due to next bug
+    cssVar: '--font-zen-sans',
+    name: 'heading'
+  },
+  {
+    name: 'serif',
+    fontFamily: ['ui-serif', 'Georgia', 'Cambria', '"Times New Roman"', 'Times']
+  },
+  {
+    name: 'mono',
+    fontFamily: [
+      'ui-monospace',
+      'SFMono-Regular',
+      'Menlo',
+      'Monaco',
+      'Consolas',
+      '"Liberation Mono"',
+      '"Courier New"',
+      'monospace',
+    ] 
+  }
+
+] as FontDesc[]

package/next/font/get-app-router-font-classes.ts

@@ -1,17 +1,19 @@
 import nextFonts from './load-and-return-lux-next-fonts-on-import'
 import type NextFontDesc from './next-font-desc'
 
-  // These will be injected for <body> in app router app that uses our RootLayout
-
-  // First is assumed to be mapped to the default font and is injected into <body>
-  // as a normal tw font family class.
+/**
+ * next/font's own generated class names, for <body> in an app-router app using
+ * our RootLayout.
+ *
+ * Each one DEFINES a custom property holding the face it loaded, so they have
+ * to land on an element before anything can name `var(--font-inter)`.
+ *
+ * It used to append `font-<role>` for the default face as well. That was a
+ * utility class, and with no engine generating it the body had a name no sheet
+ * served — the family is set on `body` in lux-global.css instead, where it can
+ * point at the property these classes define.
+ */
 export default () => {
-  let nf = nextFonts.map((desc: NextFontDesc) => (desc.nextFont!.variable))
-    // dedupe
-  nf = nf.filter(
-    (str, i, arr) => (
-      arr.indexOf(str) === i
-    )  
-  )
-  return nf.join(' ') + ` font-${nextFonts[0].twName}`
+  const named = nextFonts.map((desc: NextFontDesc) => desc.nextFont!.variable)
+  return [...new Set(named)].join(' ')
 }

package/next/font/load-and-return-lux-next-fonts-on-import.ts

@@ -1,13 +1,13 @@
 // import { Inter } from 'next/font/google'
 import localFont from 'next/font/local'
 
-import type { TwFontDesc } from '@hanzo/ui/tailwind' // TODO
+import type { FontDesc } from './font-desc'
 import type NextFontDesc from './next-font-desc'
 
-import twFonts from '../../tailwind/lux-tw-fonts'
+import fonts from './fonts'
 
 /*
-  Creating NextFontDesc's and TwFontDesc's has to be seperated because they are needed
+  Creating NextFontDesc's and FontDesc's has to be seperated because they are needed
   at different times during the next compile / build.  Otherwise a nasty
   race condition happens!
 
@@ -15,21 +15,11 @@ import twFonts from '../../tailwind/lux-tw-fonts'
 
 */
 
-const drukWide = localFont({
-  src: [
-    {
-      path: './local/Druk-Wide-Bold.ttf',
-      weight: '700',
-      style: 'normal'
-    },
-    {
-      path: './local/Druk-Wide-Medium.ttf',
-      weight: '500',
-      style: 'normal',
-    },
-  ],
+const zen = localFont({
+  src: './local/Zen-Variable.woff2',
+  weight: '100 900',
   display: 'swap',
-  variable: '--font-druk-wide',
+  variable: '--font-zen-sans',
 })
 
 const inter = localFont({
@@ -41,25 +31,27 @@ const inter = localFont({
 export default [
   {
     font: inter,
-    twName: 'sans'
+    name: 'sans'
   },
   {
     font: inter,
-    twName: 'nav'
+    name: 'nav'
   },
   {
-    font: drukWide,
-    twName: 'heading'
+    // Zen is one variable face over 100-900, so the display cut is weight and
+    // tracking in CSS rather than a second file: '.font-heading' in style/lux-global.css.
+    font: zen,
+    name: 'heading'
   }
 ].map (
   (el) => {
-    const twFont: TwFontDesc | undefined = twFonts.find((twf: TwFontDesc) => (el.twName === twf.twName))
-    if (!twFont) {
+    const font: FontDesc | undefined = fonts.find((f: FontDesc) => (el.name === f.name))
+    if (!font) {
       throw new Error('lux-next-fonts: Next font is not paired to a TW font!')
     }
 
     return ({
-      ...twFont,
+      ...font,
       nextFont: el.font,
     })
   }

package/next/font/next-font-desc.ts

@@ -1,28 +1,29 @@
-import type { TwFontDesc } from '@hanzo/ui/tailwind' 
+import type localFont from 'next/font/local'
 
-// from next repo
-type NextFont = {
-  className: string
-  style: { fontFamily: string; fontWeight?: number; fontStyle?: string }
-}
-
-// from next repo
-type NextFontWithVariable = NextFont & {
-  variable: string
-}
+import type { FontDesc } from './font-desc'
 
+/**
+ * What a next/font loader hands back, DERIVED from the loader.
+ *
+ * These were two hand-copied declarations marked "from next repo" — a copy of a
+ * type that keeps moving, which is how the OpenGraph types in ../head-metadata
+ * went stale and failed as "two different types with this name exist, but they
+ * are unrelated". `ReturnType` names the position and lets Next say what lives
+ * there. The loader answers with a union — a font is only given a variable
+ * when it was asked for one — so `Extract` picks the half that has it.
+ */
+export type NextFontWithVariable = Extract<ReturnType<typeof localFont>, { variable: string }>
 
 /*
-  NextFontDesc and TwFontDesc have to be seperate because they are needed 
-  at different times during the next compile / build.  Otherwise a nasty 
+  NextFontDesc and FontDesc have to be seperate because they are needed
+  at different times during the next compile / build.  Otherwise a nasty
   race condition happens! That's why they are in different files.
 */
 
-interface NextFontDesc extends TwFontDesc {
-  nextFont: NextFontWithVariable 
+interface NextFontDesc extends FontDesc {
+  nextFont: NextFontWithVariable
 }
 
 export {
   type NextFontDesc as default,
-  type NextFontWithVariable,
-}
+}

package/next/head-metadata/index.tsx

@@ -4,14 +4,15 @@ import type { Metadata } from 'next'
 import Head from "next/head"
 
 import type {
+  Author,
   IconDescriptor,
+  OGImage,
+  OpenGraph,
   TemplateString,
-  Author,
-  ThemeColorDescriptor
-} from './from-next/metadata-types'
-
-import type { OpenGraph, OGImage } from './from-next/opengraph-types'
-import type { Twitter, TwitterImage } from './from-next/twitter-types'
+  ThemeColorDescriptor,
+  Twitter,
+  TwitterImage,
+} from './next-metadata'
 
 /*
   NOTE: This is ONLY for sites that use the pages router in next.  

package/next/head-metadata/next-metadata.ts

@@ -0,0 +1,49 @@
+/**
+ * Next's metadata vocabulary, DERIVED from Next's own `Metadata` type.
+ *
+ * These were three files of hand-copied declarations under `from-next/`, which
+ * is a copy of a type that keeps moving: Next 16 changed `OpenGraph` and the
+ * copy stayed where it was, so passing `metadata.openGraph` into a component
+ * typed against the copy failed with
+ *
+ *     Two different types with this name exist, but they are unrelated.
+ *
+ * — a message that reads like a duplicate package rather than a stale copy.
+ *
+ * Derivation cannot drift. Nothing here restates a shape; each line names a
+ * position inside `Metadata` and lets Next say what lives there.
+ */
+import type { Metadata } from 'next'
+
+/** The element type of an array, or the type itself when it is not one. */
+type Item<T> = T extends readonly (infer E)[] ? E : T
+
+/** Metadata fields are nullable by convention; this is the value half. */
+type Set<T> = Exclude<T, null | undefined>
+
+export type OpenGraph = Set<Metadata['openGraph']>
+export type OGImage = Item<Set<OpenGraph['images']>>
+
+export type Twitter = Set<Metadata['twitter']>
+export type TwitterImage = Item<Set<Twitter['images']>>
+
+export type Author = Item<Set<Metadata['authors']>>
+/**
+ * A theme colour with its media query. `Metadata['themeColor']` also admits a
+ * bare colour string; this is the form with fields, picked out by the one it
+ * always has.
+ */
+export type ThemeColorDescriptor = Extract<Item<Set<Metadata['themeColor']>>, { color: unknown }>
+
+/**
+ * The title's object form. `Metadata['title']` is that OR a plain string, and
+ * the string is the case with nothing to read.
+ */
+export type TemplateString = Exclude<Set<Metadata['title']>, string>
+
+/**
+ * One icon, in its descriptor form. `Metadata['icons']` also admits a bare url
+ * and a grouping object (`{ icon, shortcut, apple }`); this is the one that
+ * describes a single icon, picked out by the field only it has.
+ */
+export type IconDescriptor = Extract<Item<Set<Metadata['icons']>>, { url: unknown }>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@luxfi/ui",
-  "version": "5.5.5",
+  "version": "5.5.6",
   "description": "Library that contains shared UI primitives, support for a common design system, and other boilerplate support.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
@@ -27,7 +27,6 @@
     "./next": "./next/index.ts",
     "./style/": "./style/",
     "./site-def": "./site-def/index.ts",
-    "./tailwind": "./tailwind/index.ts",
     "./util": "./util/index.ts"
   },
   "dependencies": {
@@ -41,21 +40,22 @@
     "react-social-icons": "^6.4.0",
     "react-tooltip": "^5.26.4",
     "request": "^2.88.2",
-    "usehooks-ts": "^3.1.0"
+    "usehooks-ts": "^3.1.0",
+    "react-native-web": "^0.21.2"
   },
   "peerDependencies": {
     "@hanzo/iam": "0.21.9",
-    "@hanzo/commerce": "7.6.4",
-    "@hanzo/ui": "5.3.34",
+    "@hanzo/commerce": "7.7.0",
+    "@hanzo/ui": "8.23.2",
     "@luxfi/menu-icons": "^1.0.2",
     "@hookform/resolvers": "^3.3.2",
     "lucide-react": "0.470.0",
     "mobx": "^6.12.3",
     "mobx-react-lite": "^4.0.7",
-    "next": "16.1.0",
+    "next": "16.3.3",
     "next-themes": "^0.4.0",
-    "react": "19.2.0",
-    "react-dom": "19.2.0",
+    "react": "19.2.8",
+    "react-dom": "19.2.8",
     "react-hook-form": "7.54.2",
     "validator": "^13.11.0",
     "zod": "3.23.8"
@@ -71,8 +71,7 @@
     "@types/react": "19.0.2",
     "@types/react-dom": "19.0.2",
     "@types/validator": "^13.12.1",
-    "tailwindcss": "3.4.17",
-    "typescript": "5.7.3"
+    "typescript": "7.0.2"
   },
   "scripts": {
     "lat": "npm show @luxfi/ui version",

package/root-layout/index.tsx

@@ -2,6 +2,7 @@ import React, { type PropsWithChildren } from 'react'
 import type { Viewport } from 'next'
 
 import { Toaster } from '@hanzo/ui/primitives'
+import { Hanzo } from '@hanzo/ui'
 import { CommerceProvider } from '@hanzo/commerce'
 
 import getAppRouterBodyFontClasses from '../next/font/get-app-router-font-classes'
@@ -14,6 +15,13 @@ import CommerceDrawer from '../components/commerce/drawer'
 
 import type SiteDef from '../types/site-def'
 
+// BY NAME, and before the Lux sheets so those can override. Next does not
+// follow a CSS import out of node_modules on a consumer's behalf, so naming
+// these here is what actually puts the reset and the token scale on the page —
+// a site that omits them renders with browser defaults and no palette.
+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'
@@ -28,21 +36,20 @@ const viewport = {
 } satisfies Viewport
 
 /*
-  These '.variable' fields are actually autogenerate css classnames that *define* the actual
-  css variables ('--<ugly-name>') that one asks for in the tailwind classes.
-  They are what make them available in the global scope. So this MUST
-  be done like this for the tailwind font classes to work.
-
-  (...not to be confused with the css var itself.  This field should be named something else!)
-*/
-
-/*
-  re body: overflow-y-hidden overflow-x-hidden, h-full
-  We cannot have these on body tag for scroll-snap to work on iOS!
+  The only classes left on <body> are next/font's own generated ones. Each
+  DEFINES a custom property (`--font-inter`, `--font-zen-sans`) holding the face
+  it loaded, and they have to be on an element for the rest of the sheet to
+  resolve those names — which is why they are classes and not a stylesheet.
+
+  The ground, the ink and the family that used to sit here as utility classes
+  are in lux-global.css, on `body` itself. They were `bg-background
+  text-foreground flex flex-col min-h-full`, and with no engine generating them
+  they were four names no sheet served.
+
+  re body: not overflow-hidden and not h-full — scroll-snap does not work on iOS
+  with those on the body tag.
 */
-const bodyClasses =
-  'bg-background text-foreground flex flex-col min-h-full ' +
-  getAppRouterBodyFontClasses()
+const bodyClasses = getAppRouterBodyFontClasses()
 
 function RootLayout({
   showHeader = false,
@@ -75,11 +82,23 @@ function RootLayout({
         <FacebookPixelHead/>
       </head>
 
-      <body suppressHydrationWarning className={bodyClasses} style={{
-
-        // As noted above: 'overflow: hidden' on the <body> tag breaks scroll snap!
-        display: 'none', // see analytics.tsx
-      }}>
+      {/* No inline style. The body's layout is stated once, in lux-global.css,
+          where it applies whether or not any script runs.
+
+          It used to render `display: none` here and a mount effect in
+          analytics.tsx set it back — hiding the page until React had hydrated.
+          That trades a flash for a site that is blank to anything without
+          JavaScript, and it silently outranked the sheet: the effect wrote
+          `flex`, so the `display: grid` the sheet asks for never once applied
+          on any of these sites.
+
+          Note the other half of that comment, still true: `overflow: hidden` on
+          <body> breaks scroll-snap on iOS, so it does not go here either. */}
+      <body suppressHydrationWarning className={bodyClasses}>
+        {/* The root every @hanzo/ui component reads its config from. Without it
+            a prerender throws `Err0` from inside gui — a message that names
+            neither the component nor the missing provider. */}
+        <Hanzo theme='dark'>
         <Analytics/>
         <Auth app={siteDef.app}>
         {siteDef?.commerce ? (
@@ -94,6 +113,7 @@ function RootLayout({
         )}
         </Auth>
         <Toaster position='top-center' duration={3000}/>
+        </Hanzo>
       </body>
     </html>
   )

package/style/lux-colors.css

@@ -1,4 +1,3 @@
-@tailwind base;
 /* see https://stackoverflow.com/questions/69746121/using-nextjs-how-can-you-import-in-css-using-tailwind-css */
 
 @layer base {

package/style/lux-fonts.css

@@ -1,16 +1,10 @@
-@tailwind base;
-
+/* Both faces are served from the app's own /fonts. The Next path (../next/font)
+   emits the same two through next/font instead. */
 @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-family: "Zen";
+    src: url("/fonts/Zen-Variable.woff2") format("woff2");
+    font-weight: 100 900;
     font-style: normal;
   }
   @font-face {

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

@@ -1,22 +1,22 @@
 /* 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";
-
+@import "./lux-colors.css";
+@import "./lux-fonts.css";
 div.nextjs-toast-errors-parent[data-nextjs-toast="true"] {
   display: none;
 }
 
+/* Headings are Zen cut wide: the '.zen-wide' preset from @hanzo/font, fitted
+   against Druk Wide Bold. The preset's scaleX(1.56) is left out on purpose -- a
+   transform does not reflow, and these land on block h1-h4 that would overrun
+   their container. Use the class itself where a word has room to be monumental. */
 .font-heading {
-  @apply uppercase;
+  text-transform: uppercase;
+  font-variation-settings: 'wght' 845;
+  letter-spacing: -0.04em;
 }
 
 /* Specific style fixes for react-square-web-payments-sdk -