@luxfi/ui 5.3.16 → 5.3.17

package/components/commerce/bag-button.tsx

@@ -1,98 +1,98 @@
-'use client'
-import React, { useEffect, useRef } from 'react'
-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 { useCommerce } from '@hanzo/commerce'
-
-import * as Icons from '../icons'
-
-const BagButton: React.FC<{
-  showIfEmpty?: boolean  
-  animateOnHover?: boolean
-  animateOnQuantityChange?: boolean
-  size?: VariantProps<typeof buttonVariants>['size']
-  className?: string
-  iconClx?: string
-  onClick?: () => void
-}> = observer(({
-  showIfEmpty=false,
-  animateOnHover=true,
-  animateOnQuantityChange=true,
-  size='default',
-  className='',
-  iconClx='',
-  onClick
-}) => {
-
-  const c = useCommerce()
-  const wiggleRef = useRef<IObservableValue<'more' | 'less' | 'none'>>(observable.box('none'))
-
-  useEffect(() => (
-      // return IReactionDisposer
-    animateOnQuantityChange ? reaction(
-      () => (c.cartQuantity),
-      (curr, prev) => {
-        if (curr > prev) {
-          runInAction(() => {wiggleRef.current.set('more')})   
-        }
-        else {
-          runInAction(() => {wiggleRef.current.set('less')})   
-        }    
-        setTimeout(() => {
-            // Note that this doesn't actually stop the animation
-            // just resets the styles
-          runInAction(() => {wiggleRef.current.set('none')})    
-        }, 800)
-      }
-    ) : undefined
-  ), [])
-
-    // undefined means context is not installed, ie commerce functions are not in use
-  if (!c || (!showIfEmpty && c.cartEmpty)) {
-    return <div /> // trigger code needs non-null 
-  }
-
-
-  return (
-    <div
-      aria-label="Bag"
-      role='button'
-      onClick={onClick}
-      className={cn(
-        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') ? 
-          'item-added-to-cart-animation' 
-          : 
-          (wiggleRef.current.get() === 'less') ? 'item-removed-from-cart-animation' : ''), 
-        className
-      )}
-    >
-    {!c.cartEmpty && (
-      <div 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>
-    )}
-      <Icons.bag width='24' height='28' className={cn(
-        'relative -top-[3px] fill-primary',
-        iconClx,
-        (animateOnHover ? 
-          'group-hover:fill-primary-hover group-hover:scale-105 transition-scale transition-duration-300'
-          : 
-          ''
-        ) 
-      )} aria-hidden="true" />
-    </div>            
-  )
-})
-
-export default BagButton
+'use client'
+import React, { useEffect, useRef } from 'react'
+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 { useCommerce } from '@hanzo/commerce'
+
+import * as Icons from '../icons'
+
+const BagButton: React.FC<{
+  showIfEmpty?: boolean  
+  animateOnHover?: boolean
+  animateOnQuantityChange?: boolean
+  size?: VariantProps<typeof buttonVariants>['size']
+  className?: string
+  iconClx?: string
+  onClick?: () => void
+}> = observer(({
+  showIfEmpty=false,
+  animateOnHover=true,
+  animateOnQuantityChange=true,
+  size='default',
+  className='',
+  iconClx='',
+  onClick
+}) => {
+
+  const c = useCommerce()
+  const wiggleRef = useRef<IObservableValue<'more' | 'less' | 'none'>>(observable.box('none'))
+
+  useEffect(() => (
+      // return IReactionDisposer
+    animateOnQuantityChange ? reaction(
+      () => (c.cartQuantity),
+      (curr, prev) => {
+        if (curr > prev) {
+          runInAction(() => {wiggleRef.current.set('more')})   
+        }
+        else {
+          runInAction(() => {wiggleRef.current.set('less')})   
+        }    
+        setTimeout(() => {
+            // Note that this doesn't actually stop the animation
+            // just resets the styles
+          runInAction(() => {wiggleRef.current.set('none')})    
+        }, 800)
+      }
+    ) : undefined
+  ), [])
+
+    // undefined means context is not installed, ie commerce functions are not in use
+  if (!c || (!showIfEmpty && c.cartEmpty)) {
+    return <div /> // trigger code needs non-null 
+  }
+
+
+  return (
+    <div
+      aria-label="Bag"
+      role='button'
+      onClick={onClick}
+      className={cn(
+        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') ? 
+          'item-added-to-cart-animation' 
+          : 
+          (wiggleRef.current.get() === 'less') ? 'item-removed-from-cart-animation' : ''), 
+        className
+      )}
+    >
+    {!c.cartEmpty && (
+      <div 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>
+    )}
+      <Icons.bag width='24' height='28' className={cn(
+        'relative -top-[3px] fill-primary',
+        iconClx,
+        (animateOnHover ? 
+          'group-hover:fill-primary-hover group-hover:scale-105 transition-scale transition-duration-300'
+          : 
+          ''
+        ) 
+      )} aria-hidden="true" />
+    </div>            
+  )
+})
+
+export default BagButton

package/components/commerce/buy-button.tsx

@@ -1,34 +1,34 @@
-'use client'
-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 { useSelectAndBuy } from '../../commerce/ui/context'
-
-const BuyButton: React.FC<
-  PropsWithChildren & 
-  VariantProps<typeof buttonVariants> & 
-  {
-    skuPath: string
-    className?: string 
-  }
-> = ({
-  skuPath,
-  children,
-  className='',
-  ...rest
-}) => {
-
-  const buyOptions = useSelectAndBuy()
-  const handleClick = (): void => { buyOptions.showVariants(skuPath) }
-  
-  return (
-    <Button onClick={handleClick} {...rest} className={cn(className, '')}>
-      {children}
-    </Button>
-  )
-}
-
-export default BuyButton
+'use client'
+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 { useSelectAndBuy } from '../../commerce/ui/context'
+
+const BuyButton: React.FC<
+  PropsWithChildren & 
+  VariantProps<typeof buttonVariants> & 
+  {
+    skuPath: string
+    className?: string 
+  }
+> = ({
+  skuPath,
+  children,
+  className='',
+  ...rest
+}) => {
+
+  const buyOptions = useSelectAndBuy()
+  const handleClick = (): void => { buyOptions.showVariants(skuPath) }
+  
+  return (
+    <Button onClick={handleClick} {...rest} className={cn(className, '')}>
+      {children}
+    </Button>
+  )
+}
+
+export default BuyButton

package/components/commerce/checkout-button.tsx

@@ -1,129 +1,129 @@
-'use client'
-import React, { useEffect, useRef } from 'react'
-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 { useCommerce } from '@hanzo/commerce'
-
-import * as Icons from '../icons'
-
-const IconAndQuantity: React.FC<{
-  animateOnQuantityChange?: boolean
-  showArrow?: boolean
-  showQuantity?: boolean
-  clx?: string
-  iconClx?: string
-  digitClx?: string
-}> = observer(({
-  animateOnQuantityChange=false,
-  showArrow=true,
-  showQuantity=true,
-  clx='',
-  iconClx='',
-  digitClx=''
-}) => {
-
-  const cmmc = useCommerce()
-  const wiggleRef = useRef<IObservableValue<'more' | 'less' | 'none'>>(observable.box('none'))
-
-  useEffect(() => (
-      // return IReactionDisposer
-    animateOnQuantityChange ? reaction(
-      () => (cmmc.cartQuantity),
-      (curr, prev) => {
-        if (curr > prev) {
-          runInAction(() => {wiggleRef.current.set('more') })  
-        }
-        else {
-          runInAction(() => {wiggleRef.current.set('less')  })  
-        }    
-        setTimeout(() => {
-            // Note that this doesn't actually stop the animation
-            // just resets the styles
-          runInAction(() => {wiggleRef.current.set('none') })   
-        }, 800)
-      }
-    ) : undefined
-  ), [])
-
-  return (
-    <div className={cn('flex items-center justify-center', clx)}>
-    {showQuantity && (
-      <div className={cn(
-        'relative flex items-center justify-center mr-1', 
-        ((wiggleRef.current.get() === 'more') ? 
-          'item-added-to-cart-animation' 
-          : 
-          (wiggleRef.current.get() === 'less') ? 'item-removed-from-cart-animation' : ''), 
-      )} >
-        {cmmc.cartQuantity > 0 && (
-        <div 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>
-        )}
-        <Icons.bag width='19' height='24' className={cn('relative -top-[3px] opacity-70' , iconClx)} aria-hidden="true" />
-      </div>            
-    )}
-      {showArrow && (<span style={{fontSize: '17px',}}>&rsaquo;</span>)}
-    </div>
-  )
-})  
-
-const CheckoutButton: React.FC<ButtonProps & {
-  handleCheckout: () => void
-  showQuantity?: boolean
-  showArrow?: boolean
-  animateOnQuantityChange?: boolean
-  centerText?: boolean
-}> = ({
-  handleCheckout,
-  variant='primary',
-  rounded='lg',
-  className,
-  showQuantity=true,
-  showArrow=true,
-  animateOnQuantityChange=true,
-  centerText=true,
-  children,
-  ...rest
-}) => {
-
-  return (
-    <Button 
-      {...rest}
-      onClick={handleCheckout} 
-      variant={variant}
-      rounded={rounded}
-      className={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 
-          showArrow={showArrow} 
-          showQuantity={showQuantity}
-          clx='invisible group-hover:scale-105 transition-scale transition-duration-300'
-        />
-      )}
-      {children ?? (<div className='flex justify-center items-center'>Checkout</div>)}
-      <IconAndQuantity 
-        clx='group-hover:scale-105 transition-scale transition-duration-300'
-        animateOnQuantityChange={animateOnQuantityChange}
-        showArrow={showArrow} 
-        showQuantity={showQuantity}
-        iconClx='fill-background'
-        digitClx='text-foreground group-hover:opacity-80 leading-none font-bold font-sans' 
-      />
-    </Button>
-  )
-}
-
-export default CheckoutButton
+'use client'
+import React, { useEffect, useRef } from 'react'
+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 { useCommerce } from '@hanzo/commerce'
+
+import * as Icons from '../icons'
+
+const IconAndQuantity: React.FC<{
+  animateOnQuantityChange?: boolean
+  showArrow?: boolean
+  showQuantity?: boolean
+  clx?: string
+  iconClx?: string
+  digitClx?: string
+}> = observer(({
+  animateOnQuantityChange=false,
+  showArrow=true,
+  showQuantity=true,
+  clx='',
+  iconClx='',
+  digitClx=''
+}) => {
+
+  const cmmc = useCommerce()
+  const wiggleRef = useRef<IObservableValue<'more' | 'less' | 'none'>>(observable.box('none'))
+
+  useEffect(() => (
+      // return IReactionDisposer
+    animateOnQuantityChange ? reaction(
+      () => (cmmc.cartQuantity),
+      (curr, prev) => {
+        if (curr > prev) {
+          runInAction(() => {wiggleRef.current.set('more') })  
+        }
+        else {
+          runInAction(() => {wiggleRef.current.set('less')  })  
+        }    
+        setTimeout(() => {
+            // Note that this doesn't actually stop the animation
+            // just resets the styles
+          runInAction(() => {wiggleRef.current.set('none') })   
+        }, 800)
+      }
+    ) : undefined
+  ), [])
+
+  return (
+    <div className={cn('flex items-center justify-center', clx)}>
+    {showQuantity && (
+      <div className={cn(
+        'relative flex items-center justify-center mr-1', 
+        ((wiggleRef.current.get() === 'more') ? 
+          'item-added-to-cart-animation' 
+          : 
+          (wiggleRef.current.get() === 'less') ? 'item-removed-from-cart-animation' : ''), 
+      )} >
+        {cmmc.cartQuantity > 0 && (
+        <div 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>
+        )}
+        <Icons.bag width='19' height='24' className={cn('relative -top-[3px] opacity-70' , iconClx)} aria-hidden="true" />
+      </div>            
+    )}
+      {showArrow && (<span style={{fontSize: '17px',}}>&rsaquo;</span>)}
+    </div>
+  )
+})  
+
+const CheckoutButton: React.FC<ButtonProps & {
+  handleCheckout: () => void
+  showQuantity?: boolean
+  showArrow?: boolean
+  animateOnQuantityChange?: boolean
+  centerText?: boolean
+}> = ({
+  handleCheckout,
+  variant='primary',
+  rounded='lg',
+  className,
+  showQuantity=true,
+  showArrow=true,
+  animateOnQuantityChange=true,
+  centerText=true,
+  children,
+  ...rest
+}) => {
+
+  return (
+    <Button 
+      {...rest}
+      onClick={handleCheckout} 
+      variant={variant}
+      rounded={rounded}
+      className={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 
+          showArrow={showArrow} 
+          showQuantity={showQuantity}
+          clx='invisible group-hover:scale-105 transition-scale transition-duration-300'
+        />
+      )}
+      {children ?? (<div className='flex justify-center items-center'>Checkout</div>)}
+      <IconAndQuantity 
+        clx='group-hover:scale-105 transition-scale transition-duration-300'
+        animateOnQuantityChange={animateOnQuantityChange}
+        showArrow={showArrow} 
+        showQuantity={showQuantity}
+        iconClx='fill-background'
+        digitClx='text-foreground group-hover:opacity-80 leading-none font-bold font-sans' 
+      />
+    </Button>
+  )
+}
+
+export default CheckoutButton

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

@@ -1,66 +1,66 @@
-'use client'
-import React  from 'react'
-import { observer } from 'mobx-react-lite'
-
-import { ChevronRight } from 'lucide-react'
-
-import {
-  Accordion,
-  AccordionContent,
-  AccordionItem,
-  AccordionTrigger,
-} from '@hanzo/ui/primitives'
-import { cn } from '@hanzo/ui/util'
-
-import { useCommerce, CartPanel, formatCurrencyValue } from '@hanzo/commerce' 
-
-const CartAccordian: React.FC<{
-  icon?: React.ReactNode
-  clx?: string
-  triggerClx?: string
-  panelClx?: string
-  scrollAfter: number
-  scrollHeightClx: string
-}> = observer(({
-  icon,
-  clx='',
-  panelClx='',
-  triggerClx='',
-  scrollAfter,
-  scrollHeightClx
-}) => { 
-  const cmmc = useCommerce()
-  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}>
-          <div className='flex gap-0 items-center'>
-            {icon}
-            <h5 className='text-sm sm:text-xl grow'>
-              <span className='group-data-[state=open]:hidden' >Order Total:</span>
-              <span className='group-data-[state=closed]:hidden' >Your Order</span>
-            </h5>
-          </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" />
-          </div>
-        </AccordionTrigger>
-        <AccordionContent className='data-[state=open]:mb-4'>
-          <CartPanel 
-            className={cn('w-full', panelClx)} 
-            scrollAfter={scrollAfter}
-            scrollHeightClx={scrollHeightClx}
-            listClx='mt-0'
-            itemClx='mt-0.5 mb-0'
-            totalClx='sticky px-1 pr-2 border-t -bottom-[1px] bg-background'
-            showShipping
-            showPromoCode
-          />
-        </AccordionContent>
-      </AccordionItem>
-    </Accordion>
-  )
-})
-
-export default CartAccordian
+'use client'
+import React  from 'react'
+import { observer } from 'mobx-react-lite'
+
+import { ChevronRight } from 'lucide-react'
+
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from '@hanzo/ui/primitives'
+import { cn } from '@hanzo/ui/util'
+
+import { useCommerce, CartPanel, formatCurrencyValue } from '@hanzo/commerce' 
+
+const CartAccordian: React.FC<{
+  icon?: React.ReactNode
+  clx?: string
+  triggerClx?: string
+  panelClx?: string
+  scrollAfter: number
+  scrollHeightClx: string
+}> = observer(({
+  icon,
+  clx='',
+  panelClx='',
+  triggerClx='',
+  scrollAfter,
+  scrollHeightClx
+}) => { 
+  const cmmc = useCommerce()
+  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}>
+          <div className='flex gap-0 items-center'>
+            {icon}
+            <h5 className='text-sm sm:text-xl grow'>
+              <span className='group-data-[state=open]:hidden' >Order Total:</span>
+              <span className='group-data-[state=closed]:hidden' >Your Order</span>
+            </h5>
+          </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" />
+          </div>
+        </AccordionTrigger>
+        <AccordionContent className='data-[state=open]:mb-4'>
+          <CartPanel 
+            className={cn('w-full', panelClx)} 
+            scrollAfter={scrollAfter}
+            scrollHeightClx={scrollHeightClx}
+            listClx='mt-0'
+            itemClx='mt-0.5 mb-0'
+            totalClx='sticky px-1 pr-2 border-t -bottom-[1px] bg-background'
+            showShipping
+            showPromoCode
+          />
+        </AccordionContent>
+      </AccordionItem>
+    </Accordion>
+  )
+})
+
+export default CartAccordian