@hanzo/commerce 4.3.1 → 4.3.3

package/components/add-to-cart-widget.tsx

@@ -32,7 +32,7 @@ const AddToCartWidget: React.FC<{
 
   if (disabled) {
     return (
-      <div className={cn('flex flex-row items-stretch ' + (ghost ? 'bg-transparent  rounded-xl' : 'bg-secondary rounded-xl'), className)}>
+      <div className={cn('flex flex-row items-stretch ' + (ghost ? 'bg-transparent  rounded-xl' : 'bg-primary rounded-xl'), className)}>
         <div className={'text-sm flex items-center cursor-default ' + digitClx} >{item.quantity}</div>
       </div>
     )
@@ -55,11 +55,11 @@ const AddToCartWidget: React.FC<{
   }
 
   return ( item.isInCart ? (
-    <div className={cn('flex flex-row items-stretch justify-center ' + (ghost ? 'bg-transparent  rounded-xl' : 'bg-secondary rounded-xl'), className)}>
+    <div className={cn('flex flex-row items-stretch justify-center ' + (ghost ? 'bg-transparent  rounded-xl' : 'bg-primary rounded-xl'), className)}>
       <Button
         aria-label={'Remove a ' + item.title + ' from the cart'}
         size={size}
-        variant={ghost ? 'ghost' : 'secondary'}
+        variant={ghost ? 'ghost' : 'primary'}
         rounded={ghost ? 'full' : 'xl'}
         className={cn('px-1 lg:min-w-0 lg:px-2  xs:justify-end', buttonClx)}
         key='left'
@@ -75,7 +75,7 @@ const AddToCartWidget: React.FC<{
       <Button
         aria-label={'Add another ' + item.title + ' to the cart'}
         size={size}
-        variant={ghost ? 'ghost' : 'secondary'}
+        variant={ghost ? 'ghost' : 'primary'}
         rounded={ghost ? 'full' : 'xl'}
         className={cn('px-1 lg:min-w-0 lg:px-2 xs:justify-start', buttonClx)}
         onClick={inc}
@@ -88,7 +88,7 @@ const AddToCartWidget: React.FC<{
     <Button
       aria-label={'Add a ' + item.title + ' to cart'}
       size={size}
-      variant='secondary'
+      variant='primary'
       rounded='xl'
       className={cn(buttonClx, className)}
       onClick={inc}

package/components/buy-item/buy-item-button-wrapper.tsx

@@ -0,0 +1,27 @@
+'use client'
+import React, {type PropsWithChildren} from 'react'
+
+import BuyItemPopup from './buy-item-popup'
+import BuyItemMobileDrawer from './buy-item-mobile-drawer'
+
+const BuyItemButtonWrapper: React.FC<{
+  skuPath: string
+  desktopTrigger: React.ReactNode
+  mobileTrigger: React.ReactNode
+  popupClx?: string
+}> = ({
+  skuPath,
+  desktopTrigger,
+  mobileTrigger,
+  popupClx=''
+}) => (<>
+  <BuyItemPopup skuPath={skuPath} popupClx={popupClx}>
+    {desktopTrigger}
+  </BuyItemPopup>
+  <BuyItemMobileDrawer skuPath={skuPath} trigger={mobileTrigger} />
+</>
+)
+
+
+
+export default BuyItemButtonWrapper

package/components/buy-item/select-category-item-card.tsx

@@ -40,7 +40,7 @@ const SelectCategoryItemCard: React.FC<React.HTMLAttributes<HTMLDivElement> & It
       const item = category.products[0] as LineItem
       return (
         <div className={cn('flex flex-col justify-center items-center ' + (mobilePicker ? 'h-[180px] ' : 'h-auto min-h-24'), className)}>
-          <p className='text-lg font-semibold'>{item.titleAsOption + ', ' + formatPrice(item.price)}</p>
+          <p className='text-lg text-center font-semibold'>{item.titleAsOption + ', ' + formatPrice(item.price)}</p>
         </div>
       )
     }

package/components/cart-panel/index.tsx

@@ -45,7 +45,7 @@ const CartPanel: React.FC<PropsWithChildren & {
       {!noCheckout && (<>
         {!cmmc.cartEmpty && (
           <Button 
-            variant='secondary' 
+            variant='primary' 
             rounded='lg' 
             className='mt-12 mx-auto w-full' 
             onClick={() => setCheckoutOpen(true)}

package/components/checkout-panel/close-button.tsx

@@ -15,9 +15,9 @@ const CloseButton: React.FC<{
       variant='ghost'
       size='icon'
       onClick={onClose}
-      className={className}
+      className={'group ' + className}
     >
-      <ChevronLeft className='w-5 h-5'/>
+      <ChevronLeft className='w-5 h-5 group-hover:scale-110 transition-scale transition-duration-300'/>
     </Button>    
 )
 

package/components/checkout-panel/index.tsx

@@ -78,7 +78,7 @@ const CheckoutPanel: React.FC<{
       <DialogPortal>
         <div id='PORTAL_OUTER'
           className={cn(
-            'fixed top-0 pt-[44px] md:pt-[80px] shadow-lg ',
+            'fixed top-0 shadow-lg ',
             'animate-in data-[state=open]:fade-in-90 data-[state=open]:slide-in-from-bottom-10',
             'sm:zoom-in-90 data-[state=open]:sm:slide-in-from-bottom-0',
             '!max-w-none w-full h-full min-h-screen bg-transparent backdrop-blur-sm z-50'

package/components/index.ts

@@ -1,4 +1,5 @@
 export { default as AddToCartWidget } from './add-to-cart-widget'
+export { default as BuyItemButtonWrapper } from './buy-item/buy-item-button-wrapper'
 export { default as BuyItemButton } from './buy-item/buy-item-button'
 export { default as BuyItemCard } from './buy-item/buy-item-card'
 export { default as BuyItemPopup } from './buy-item/buy-item-popup'

package/components/product-card.tsx

@@ -57,7 +57,7 @@ const ProductCard: React.FC<ProductCardProps> = ({
             aria-label='Placeholder'
             role='img'
             aria-roledescription='placeholder'
-            className='flex h-full items-center justify-center bg-secondary'
+            className='flex h-full items-center justify-center bg-background'
           >
             <Icons.barcode className='h-9 w-9 text-muted' aria-hidden='true' />
           </div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hanzo/commerce",
-  "version": "4.3.1",
+  "version": "4.3.3",
   "description": "Library with shopping cart components.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",