@luxfi/ui 5.5.5 → 5.5.6

package/commerce/ui/context.tsx

@@ -12,13 +12,17 @@ import { usePathname } from 'next/navigation'
 import { useDebounceCallback } from 'usehooks-ts'
 
 
-import { preset as twConfig } from '@hanzo/ui/tailwind'
 import { useCommerce } from '@hanzo/commerce'
 
 import type { CommerceDrawer, SelectAndBuy } from './store'
 import { CommerceUIStore } from './store'
 import conf from './conf'
 
+/** The `md` rung: below this the commerce drawer behaves as a mobile sheet.
+ *  It used to be read out of a Tailwind preset's `screens.md`, which is one
+ *  more place for a number that belongs in one. */
+const DESKTOP_MIN = 768
+
 const LOG = false ////////////////////
 const log = (s: string) => {
   if (LOG) {
@@ -48,23 +52,16 @@ const CommerceUIProvider: React.FC<PropsWithChildren> = ({
   const storeRef = useRef<CommerceUIStore>(new CommerceUIStore(cmmc, conf))
   const prevPathRef = useRef<string>('initial')
 
-  const onResize = () => { 
-    const width = window.innerWidth 
-    let desktopMin = 0
-    if (twConfig.theme?.screens) {
-        // expected form: { md: '768px' }
-      if ('md' in twConfig.theme?.screens && typeof twConfig.theme?.screens.md === 'string') {
-        desktopMin = parseInt(twConfig.theme?.screens.md)
-      }
-      if (width < desktopMin) {
-        if (!storeRef.current.isMobile) {
-          storeRef.current.setMobile(true)
-        }
-      }
-      else if (storeRef.current.isMobile) {
-        storeRef.current.setMobile(false)
+  const onResize = () => {
+    const width = window.innerWidth
+    if (width < DESKTOP_MIN) {
+      if (!storeRef.current.isMobile) {
+        storeRef.current.setMobile(true)
       }
     }
+    else if (storeRef.current.isMobile) {
+      storeRef.current.setMobile(false)
+    }
     storeRef.current.setViewportHeight(window.innerHeight)
   }
 

package/components/access-code-input.tsx

@@ -2,8 +2,7 @@
 
 import { useState } from 'react'
 import { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot } from '@hanzo/ui/primitives'
-import { cn } from '@hanzo/ui/util'
-
+import { Box, cn } from '@hanzo/ui'
 const AccessCodeInput: React.FC<{
   onSuccess?: () => void
   onFail?: () => void
@@ -35,7 +34,7 @@ const AccessCodeInput: React.FC<{
   }
 
   return (
-    <div className={cn('flex flex-col gap-2 mx-auto w-full text-center items-center', className)}>
+    <Box className={cn('flex flex-col gap-2 mx-auto w-full text-center items-center', className)}>
       <InputOTP
         className='mx-auto'
         maxLength={6}
@@ -64,7 +63,7 @@ const AccessCodeInput: React.FC<{
           null
         }
       </p>
-    </div>
+    </Box>
   )
 }
 

package/components/analytics.tsx

@@ -1,23 +1,14 @@
 'use client'
 
-import { useEffect } from 'react'
 import { GoogleAnalytics } from '@next/third-parties/google'
-import { FacebookPixel } from '../next/analytics'
-
-const Analytics = () => {
 
-  useEffect(() => {
-    document.body.style.display = 'flex'
-  }, [])
+import { FacebookPixel } from '../next/analytics'
 
-  return (
-    <>
-      <FacebookPixel />
-      <GoogleAnalytics gaId={process.env.NEXT_PUBLIC_GA_MEASUREMENT_ID ?? ''} />
-    </>
-  )
-}
+const Analytics = () => (
+  <>
+    <FacebookPixel />
+    <GoogleAnalytics gaId={process.env.NEXT_PUBLIC_GA_MEASUREMENT_ID ?? ''} />
+  </>
+)
 
-export {
-  Analytics as default
-}
+export { Analytics as default }

package/components/auth/login-panel.tsx

@@ -3,13 +3,12 @@
 import React from 'react'
 import Link from 'next/link'
 
-import { cn } from '@hanzo/ui/util'
+import { Box, cn } from '@hanzo/ui'
 import { Button, Carousel, CarouselContent, CarouselItem } from '@hanzo/ui/primitives'
 
 import Login from './login'
 import { LuxLogo } from '@luxfi/logo'
 import Logo from '../logo'
-import { EmblaAutoplay } from '..'
 import { legal } from '../../site-def/footer'
 
 const LoginPanel: React.FC<{
@@ -23,7 +22,7 @@ const LoginPanel: React.FC<{
 }) => {
 
     return (
-      <div className={cn('grid grid-cols-1 md:grid-cols-2', className)}>
+      <Box className={cn('grid grid-cols-1 md:grid-cols-2', className)}>
         <div className='hidden md:flex w-full h-full bg-[radial-gradient(circle_at_24.1%_68.8%_,_rgba(15,14,14,0)_,_rgba(9,9,9,99.4))] flex-row items-end justify-end overflow-y-auto min-h-screen'>
           <div className='h-full w-full max-w-[750px] px-8 pt-0'>
             <div className='h-full w-full max-w-[550px] mx-auto flex flex-col justify-between min-h-screen py-10'>
@@ -35,9 +34,11 @@ const LoginPanel: React.FC<{
                 <Logo size='md' variant='wordmark' />
               </Button>
               <Carousel
-                options={{ align: 'center', loop: true }}
+                // Autoplay is an option now, not a plugin — and it holds while the
+                  // pointer is over the carousel or focus is inside it, which is
+                  // what `stopOnInteraction` was asking for.
+                  options={{ align: 'center', loop: true, autoplay: 5000 }}
                 className='w-full'
-                plugins={[EmblaAutoplay({ delay: 5000, stopOnInteraction: true })]}
               >
                 <CarouselContent>
                   {reviews.map(({ text, author, href }, index) => (
@@ -75,7 +76,7 @@ const LoginPanel: React.FC<{
             </div>
           </div>
         </div>
-      </div>
+      </Box>
     )
   }
 

package/components/auth/login.tsx

@@ -2,7 +2,7 @@
 
 import React, { useEffect, useState } from 'react'
 
-import { cn } from '@hanzo/ui/util'
+import { cn } from '@hanzo/ui'
 import { Login as IamLogin, useIam } from '@hanzo/iam/react'
 
 import { remember } from './resume'

package/components/auth/widget.tsx

@@ -3,7 +3,7 @@
 import React, { useContext } from 'react'
 
 import { Button, Popover, PopoverContent, PopoverTrigger, Separator } from '@hanzo/ui/primitives'
-import { cn } from '@hanzo/ui/util'
+import { cn } from '@hanzo/ui'
 import { IamContext, useIam, useIamIdentity } from '@hanzo/iam/react'
 
 import { remember } from './resume'

package/components/back-button.tsx

@@ -4,17 +4,14 @@ import { useRouter } from 'next/navigation'
 
 import { ChevronLeft } from 'lucide-react'
 
-
 import { 
   Button, 
   buttonVariants, 
 } from '@hanzo/ui/primitives'
-
-import type { VariantProps } from '@hanzo/ui/util'
-
+import { css, type ButtonSize, type ButtonVariant } from '@hanzo/ui'
 const BackButton: React.FC<{
-  variant?: VariantProps<typeof buttonVariants>['variant']
-  size?: VariantProps<typeof buttonVariants>['size']
+  variant?: { variant?: ButtonVariant | null; size?: ButtonSize | null }['variant']
+  size?: { variant?: ButtonVariant | null; size?: ButtonSize | null }['size']
   onBack?: () => void
   clx?: string
   iconClx?: string
@@ -41,7 +38,7 @@ const BackButton: React.FC<{
       onClick={back}
       className={clx}
     >
-      <ChevronLeft className={iconClx}/>
+      <ChevronLeft style={css(iconClx)}/>
     </Button> 
   )
 }

package/components/chat-widget.tsx

@@ -2,8 +2,7 @@
 import React from 'react'
 
 import { Button, Card } from '@hanzo/ui/primitives'
-import { cn } from '@hanzo/ui/util'
-
+import { Box, cn } from '@hanzo/ui'
 import { LuxLogo } from '@luxfi/logo'
 import type { ChatbotSuggestedQuestion } from '../types'
 
@@ -49,7 +48,7 @@ const ChatWidget: React.FC<{
   const iframeSrc = `${chatbotUrl}?${searchParams.toString()}`
 
   return (<>
-    <div className={
+    <Box className={
       'fixed bottom-0 sm:bottom-16 right-0 w-full h-full ' +
       'sm:max-w-[400px] sm:max-h-[550px] sm:px-4 z-floating ' +
       (showChatbot ? 'flex' : 'hidden')
@@ -63,9 +62,9 @@ const ChatWidget: React.FC<{
         </div>
         <iframe src={iframeSrc} className='h-full' />
       </Card>
-    </div>
+    </Box>
 
-    <span
+    <Box tag="span"
       onClick={onClick}
       className={cn(
           // z-index should be below anything in commerce-iu (buy drawer and checkout widget)
@@ -77,7 +76,7 @@ const ChatWidget: React.FC<{
       )}
     >
       <LuxLogo variant='white' size={28} />
-    </span>
+    </Box>
   </>)
 }
 

package/components/commerce/bag-button.tsx

@@ -4,7 +4,7 @@ import { observable, type IObservableValue, reaction, runInAction } from 'mobx'
 import { observer } from 'mobx-react-lite'
 
 import { buttonVariants } from '@hanzo/ui/primitives'
-import { cn, type VariantProps } from '@hanzo/ui/util'
+import { Box, cn, type ButtonSize, type ButtonVariant } from '@hanzo/ui'
 import { useCommerce } from '@hanzo/commerce'
 
 import { Bag } from '../icons'
@@ -13,7 +13,7 @@ const BagButton: React.FC<{
   showIfEmpty?: boolean  
   animateOnHover?: boolean
   animateOnQuantityChange?: boolean
-  size?: VariantProps<typeof buttonVariants>['size']
+  size?: { variant?: ButtonVariant | null; size?: ButtonSize | null }['size']
   className?: string
   iconClx?: string
   onClick?: () => void
@@ -57,12 +57,13 @@ const BagButton: React.FC<{
 
 
   return (
-    <div
+    <Box
       aria-label="Bag"
       role='button'
       onClick={onClick}
       className={cn(
-        buttonVariants({ variant: 'ghost', size, rounded: 'md' }),
+        buttonVariants({ variant: 'ghost', size }),
+          'rounded-md',
           // Overides the bg change on hover --not a "hover effect" 
         'relative group p-0 aspect-square hover:bg-background', 
         ((wiggleRef.current.get() === 'more') ? 
@@ -73,14 +74,14 @@ const BagButton: React.FC<{
       )}
     >
     {!c.cartEmpty && (
-      <div className={
+      <Box className={
         'z-above-content flex flex-col justify-center items-center  ' +
         'absolute left-0 right-0 top-0 bottom-0 ' + 
         'leading-none font-sans font-bold text-primary-fg text-xs ' 
       }>
         <div className='h-[3px] w-full' />
         <div>{c.cartQuantity}</div>
-      </div>
+      </Box>
     )}
       <Bag width='24' height='28' className={cn(
         'relative -top-[3px] fill-primary',
@@ -91,7 +92,7 @@ const BagButton: React.FC<{
           ''
         ) 
       )} aria-hidden="true" />
-    </div>            
+    </Box>            
   )
 })
 

package/components/commerce/buy-button.tsx

@@ -2,14 +2,13 @@
 import React, {type PropsWithChildren} from 'react'
 
 import { Button, buttonVariants } from '@hanzo/ui/primitives'
-import { type VariantProps } from '@hanzo/ui/util'
 
-import { cn } from '@hanzo/ui/util'
+import { cn, type ButtonSize, type ButtonVariant } from '@hanzo/ui'
 import { useSelectAndBuy } from '../../commerce/ui/context'
 
 const BuyButton: React.FC<
   PropsWithChildren & 
-  VariantProps<typeof buttonVariants> & 
+  { variant?: ButtonVariant | null; size?: ButtonSize | null } & 
   {
     skuPath: string
     className?: string 

package/components/commerce/checkout-button.tsx

@@ -4,7 +4,7 @@ import { observable, type IObservableValue, reaction, runInAction } from 'mobx'
 import { observer } from 'mobx-react-lite'
 
 import { Button, type ButtonProps } from '@hanzo/ui/primitives'
-import { cn } from '@hanzo/ui/util'
+import { Box, cn } from '@hanzo/ui'
 import { useCommerce } from '@hanzo/commerce'
 
 import { Bag } from '../icons'
@@ -49,9 +49,9 @@ const IconAndQuantity: React.FC<{
   ), [])
 
   return (
-    <div className={cn('flex items-center justify-center', clx)}>
+    <Box className={cn('flex items-center justify-center', clx)}>
     {showQuantity && (
-      <div className={cn(
+      <Box className={cn(
         'relative flex items-center justify-center mr-1', 
         ((wiggleRef.current.get() === 'more') ? 
           'item-added-to-cart-animation' 
@@ -59,19 +59,19 @@ const IconAndQuantity: React.FC<{
           (wiggleRef.current.get() === 'less') ? 'item-removed-from-cart-animation' : ''), 
       )} >
         {cmmc.cartQuantity > 0 && (
-        <div className={cn(
+        <Box className={cn(
           'z-above-content flex flex-col justify-center items-center',
           'absolute left-0 right-0 top-0 bottom-0',
           digitClx
         )}>
           <div style={{/* color: 'white'  tailwind bug? ,*/ fontSize: '11px', position: 'relative', top: '1px' }}>{cmmc.cartQuantity}</div>
-        </div>
+        </Box>
         )}
         <Bag width='19' height='24' className={cn('relative -top-[3px] opacity-70' , iconClx)} aria-hidden="true" />
-      </div>            
+      </Box>            
     )}
       {showArrow && (<span style={{fontSize: '17px',}}>&rsaquo;</span>)}
-    </div>
+    </Box>
   )
 })  
 
@@ -81,6 +81,8 @@ const CheckoutButton: React.FC<ButtonProps & {
   showArrow?: boolean
   animateOnQuantityChange?: boolean
   centerText?: boolean
+  /** A corner off the radius scale. It was a Button variant in the 5.x line. */
+  rounded?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full'
 }> = ({
   handleCheckout,
   variant='primary',
@@ -99,12 +101,12 @@ const CheckoutButton: React.FC<ButtonProps & {
       {...rest}
       onClick={handleCheckout} 
       variant={variant}
-      rounded={rounded}
-      className={cn(
+      className={cn(`rounded-${rounded}`, cn(
         'flex justify-between items-stretch group', 
         showQuantity ? (centerText ? 'px-1.5' : 'pl-2.5 pr-1.5') : '',
         className, 
-      )}
+      ))}
+      
     >
       {centerText && ( // must scale this one too, as it effects layout
         <IconAndQuantity 

package/components/commerce/checkout-panel/cart-accordian.tsx

@@ -10,8 +10,7 @@ import {
   AccordionItem,
   AccordionTrigger,
 } from '@hanzo/ui/primitives'
-import { cn } from '@hanzo/ui/util'
-
+import { cn, css } from '@hanzo/ui'
 import { useCommerce, CartPanel, formatCurrencyValue } from '@hanzo/commerce' 
 
 const CartAccordian: React.FC<{
@@ -33,7 +32,7 @@ const CartAccordian: React.FC<{
   return (
     <Accordion type="single" collapsible className={clx}>
       <AccordionItem value="cart" className='w-full border-b-0'>
-        <AccordionTrigger className={'!no-underline group flex justify-between '} headerClx={ triggerClx}>
+        <AccordionTrigger className="!no-underline group flex justify-between ">
           <div className='flex gap-0 items-center'>
             {icon}
             <h5 className='text-sm sm:text-xl grow'>
@@ -43,7 +42,7 @@ const CartAccordian: React.FC<{
           </div>
           <div className='flex gap-1 items-center'>
             <h5 className='text-sm sm:text-xl grow truncate'>{formatCurrencyValue(cmmc.promoAppliedCartTotal)}</h5>
-            <ChevronRight className="h-5 w-5 -mr-2 shrink-0 transition-transform duration-200 group-data-[state=open]:rotate-90" />
+            <ChevronRight style={css('h-5 w-5 -mr-2 shrink-0 transition-transform duration-200 group-data-[state=open]:rotate-90')} />
           </div>
         </AccordionTrigger>
         <AccordionContent className='data-[state=open]:mb-4'>

package/components/commerce/checkout-panel/desktop-cp.tsx

@@ -5,8 +5,7 @@ import { observer } from 'mobx-react-lite'
 import { ScrollArea, StepIndicator } from '@hanzo/ui/primitives'
 import AuthWidget from '../../auth/widget'
 import { CartPanel, useCommerce } from '@hanzo/commerce'
-import { cn } from '@hanzo/ui/util'
-
+import { Box, cn } from '@hanzo/ui'
 import { BackButton, Logo, Tooltip } from '../..'
 import DesktopBagCarousel from './desktop-bag-carousel'
 import LinksRow from './policy-links'
@@ -22,7 +21,7 @@ const DesktopCheckoutPanel: React.FC<PropsWithChildren & CheckoutPanelProps> = o
 
   const cmmc = useCommerce()
   return ( 
-    <div /* id='CHECKOUT_PANEL' */  className={cn('grid grid-cols-2',  clx)}>
+    <Box /* id='CHECKOUT_PANEL' */  className={cn('grid grid-cols-2',  clx)}>
       <div key={1} className='w-full h-full bg-background flex flex-row items-start justify-end'>
         <div className='w-full h-full max-w-[750px] relative flex flex-col items-stretch justify-start px-8 pb-8'>
           <div key={1} className='h-[80px] grow-0 flex flex-row items-center z-10' >
@@ -39,7 +38,7 @@ const DesktopCheckoutPanel: React.FC<PropsWithChildren & CheckoutPanelProps> = o
             onBack={onLeave}
           />
           <Tooltip  select='.back-button-tooltip-class' text='back' position='right' offset={5}/>
-          <div key={2} className={cn(
+          <Box key={2} className={cn(
             'w-full grow min-h-0 max-w-[550px] mx-auto flex flex-col gap-3',
             (cmmc.cartItems.length > 4 ? 'justify-between' : 'justify-start gap-10 pt-10')
           )}>
@@ -55,7 +54,7 @@ const DesktopCheckoutPanel: React.FC<PropsWithChildren & CheckoutPanelProps> = o
               showShipping
               selectItems
             />
-          </div>
+          </Box>
         </div>
       </div>
       <div key={2} className='w-full h-full flex flex-col bg-level-1 min-h-screen justify-between'>
@@ -76,7 +75,7 @@ const DesktopCheckoutPanel: React.FC<PropsWithChildren & CheckoutPanelProps> = o
           </div>
         </div>
       </div>
-    </div>
+    </Box>
   )
 })
 

package/components/commerce/checkout-panel/index.tsx

@@ -1,7 +1,7 @@
 'use client'
 import React, { useLayoutEffect, useRef, useState }  from 'react'
 
-import { capitalize, cn } from '@hanzo/ui/util'
+import { capitalize, cn } from '@hanzo/ui'
 
 import { useCommerce, ShippingStepForm, PaymentStepForm } from '@hanzo/commerce'
 import type { CheckoutStep } from '@hanzo/commerce/types'

package/components/commerce/checkout-panel/mobile-cp.tsx

@@ -2,7 +2,7 @@
 import React, { type PropsWithChildren } from 'react'
 
 import { StepIndicator } from '@hanzo/ui/primitives'
-import { cn } from '@hanzo/ui/util'
+import { Box, cn } from '@hanzo/ui'
 import AuthWidget from '../../auth/widget'
 
 import { BackButton, Logo } from '../..'
@@ -20,7 +20,7 @@ const MobileCheckoutPanel: React.FC<PropsWithChildren & CheckoutPanelProps> = ({
   children
 }) => (
 
-  <div /* id='MOBILE_GRID' */ className={cn('bg-background flex flex-col justify-start px-4 pt-[101px]', clx)}>
+  <Box /* id='MOBILE_GRID' */ className={cn('bg-background flex flex-col justify-start px-4 pt-[101px]', clx)}>
     <div className='fixed z-11 top-0 h-[45px] w-full flex justify-between items-stretch bg-background'>
       <div className='flex items-stretch gap-1 grow-0'>
         <BackButton 
@@ -31,7 +31,7 @@ const MobileCheckoutPanel: React.FC<PropsWithChildren & CheckoutPanelProps> = ({
           }
           onBack={onLeave}
         />
-        <Logo size='xs' variant='wordmark' href='/' onClick={onLeave} outerClx='-ml-2'/>
+        <Logo size='sm' variant='wordmark' href='/' onClick={onLeave} outerClx='-ml-2'/>
       </div>
       <StepIndicator 
         dotSizeRem={1} 
@@ -61,7 +61,7 @@ const MobileCheckoutPanel: React.FC<PropsWithChildren & CheckoutPanelProps> = ({
     />
     {children}
     <PolicyLinks clx='mt-auto mb-3 pt-2' />
-  </div>
+  </Box>
 )
 
 export default MobileCheckoutPanel

package/components/commerce/checkout-panel/policy-links.tsx

@@ -2,28 +2,23 @@ import React from 'react'
 import Link from 'next/link'
 
 import { Separator, buttonVariants } from '@hanzo/ui/primitives'
-import { cn } from '@hanzo/ui/util'
-
-
-const linkClx = buttonVariants({ 
-  variant: 'linkMuted', 
-  size: 'link',
-  rounded: 'none', 
-})
+import { Box, cn, css } from '@hanzo/ui'
+// `link` was a SIZE in the 5.x line and is a variant here; a radius is a class.
+const linkClx = cn(buttonVariants({ variant: 'linkMuted' }), 'rounded-none')
 
 const PolicyLinks: React.FC<{
   clx?: string
 }> = ({
   clx=''
 }) => (
-  <div className={cn('flex flex-col items-center', clx)}>
+  <Box className={cn('flex flex-col items-center', clx)}>
     <Separator/>
     <div className='flex gap-4 py-2 text-sm'>
       {/* TODO: add Refund policy and Privacy policy links */}
-      <Link className={linkClx} href=''>refund policy</Link>
-      <Link className={linkClx} href=''>privacy policy</Link>
+      <Link style={css(linkClx)} href=''>refund policy</Link>
+      <Link style={css(linkClx)} href=''>privacy policy</Link>
     </div>
-  </div>   
+  </Box>   
 )
 
 export default PolicyLinks

package/components/commerce/checkout-panel/steps-indicator.tsx

@@ -5,7 +5,7 @@ import {
   BreadcrumbList,
   BreadcrumbSeparator
 } from '@hanzo/ui/primitives'
-import { cn } from '@hanzo/ui/util'
+import { cn } from '@hanzo/ui'
 
 const StepsIndicator: React.FC<{
   currentStep: number

package/components/commerce/desktop-bag-popup.tsx

@@ -11,7 +11,7 @@ import {
   PopoverClose,
 } from "@hanzo/ui/primitives"
 
-import { cn } from '@hanzo/ui/util'
+import { cn } from '@hanzo/ui'
 import { CartPanel, useCommerce } from '@hanzo/commerce'
 
 import { Bag } from '../icons'