@hanzo/commerce 4.3.2 → 4.4.0

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'
@@ -71,11 +71,11 @@ const AddToCartWidget: React.FC<{
         <Icons.trash className={iconClx} aria-hidden='true'/>
       )}
       </Button>
-        <div className={'text-sm flex items-center cursor-default xs:px-2 ' + digitClx} >{item.quantity}</div>
+        <div className={'text-sm flex items-center cursor-default xs:px-2 text-primary-fg ' + digitClx} >{item.quantity}</div>
       <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-card.tsx

@@ -81,7 +81,7 @@ const BuyItemCard: React.FC<{
         category={cmmc.specifiedCategories[0]}
         selectedItemRef={cmmc /* ...conveniently. :) */ }
         selectSku={cmmc.setCurrentItem.bind(cmmc)}
-        className={!renderFacetTabs && mobile ? 'border-t-2 ' : ''}
+        className=''
         onQuantityChanged={onQuantityChanged}
       />  
     )}

package/components/buy-item/buy-item-mobile-drawer.tsx

@@ -1,8 +1,14 @@
 'use client'
 import React, { useState, type ReactNode } from 'react'
 
-import { X as LucideX} from 'lucide-react'
-import { Sheet, SheetContent, SheetTrigger } from '@hanzo/ui/primitives'
+//import { X as LucideX} from 'lucide-react'
+//import { Sheet, SheetContent, SheetTrigger } from '@hanzo/ui/primitives'
+
+import {
+  Drawer,
+  DrawerTrigger,
+  DrawerContent,
+} from '@hanzo/ui/primitives'
 
 import { cn } from '@hanzo/ui/util'
 
@@ -31,17 +37,17 @@ const BuyItemMobileDrawer: React.FC<{
   }
 
   return (
-    <Sheet open={open} onOpenChange={setOpen} >
-      <SheetTrigger asChild className={triggerClx}>
+    <Drawer open={open} onOpenChange={setOpen} >
+      <DrawerTrigger asChild className={triggerClx}>
         {trigger}
-      </SheetTrigger>
-      <SheetContent 
-        className={cn('rounded-tl-xl rounded-tr-xl p-0 overflow-hidden border-none', drawerClx)}
-        side="bottom" 
+      </DrawerTrigger>
+      <DrawerContent 
+        className={cn('rounded-tl-xl rounded-tr-xl p-0 overflow-hidden', drawerClx)}
+       // side="bottom" 
       >
         <BuyItemCard skuPath={skuPath} mobile onQuantityChanged={onQuantityChanged} className={cn("w-full relative ", cardClx)}/>
-      </SheetContent>
-    </Sheet>
+      </DrawerContent>
+    </Drawer>
   )
 }
 

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/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/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.2",
+  "version": "4.4.0",
   "description": "Library with shopping cart components.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",