@hanzo/commerce 6.2.4 → 6.3.1

package/components/buy/_to_deprecate_select-family-item-card.tsx

@@ -66,7 +66,6 @@ const SelectFamilyItemCard: React.FC<React.HTMLAttributes<HTMLDivElement> & Item
       // TODO disable if nothing selected
     (selItemRef.item && !isLoading) && (
       <AddToCartWidget 
-        size='default' 
         item={selItemRef.item}
         onQuantityChanged={onQuantityChanged} 
         className={cn('lg:min-w-[160px] lg:mx-auto', className)}

package/components/buy/_to_deprecate_select-family-item-panel.tsx

@@ -106,7 +106,7 @@ const SelectFamilyItemPanel: React.FC<
 
   const AddToCartArea: React.FC<{ className?: string }> = observer(({ className = '' }) => (
     (selectedItemRef.item && !isLoading) ? (
-      <AddToCartWidget size='default' item={selectedItemRef.item} className={className}/>
+      <AddToCartWidget item={selectedItemRef.item} className={className}/>
     ) : (
       <div className={cn('h-6 w-12 invisible', className)} />
     )

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

@@ -14,7 +14,6 @@ const AddToCartWidget: React.FC<{
   disabled?: boolean
   className?: string
   buttonClx?: string
-  size?: ButtonSizes
   variant?: 'minimal' | 'primary' | 'outline'
   onQuantityChanged?: (sku: string, oldV: number, newV: number) => void
 }> = observer(({
@@ -23,7 +22,6 @@ const AddToCartWidget: React.FC<{
   disabled=false,
   className='',
   buttonClx='',
-  size='xs',
   onQuantityChanged
 }) => {
 
@@ -100,6 +98,8 @@ const AddToCartWidget: React.FC<{
   return ( item.isInCart ? (
     <div className={cn(
       'flex flex-row items-stretch justify-between ',
+        // should match 'xs' and 'default' button heights
+      (ghost ? 'h-8' : 'h-10'),
       ROUNDED_CLX,
       (primary ? 'bg-primary' : 'bg-transparent'), 
       (outline ? 'border border-muted' : ''),
@@ -107,14 +107,15 @@ const AddToCartWidget: React.FC<{
     )}>
       <Button
         aria-label={'Remove a ' + item.title + ' from the cart'}
-        size={size}
+        size={ghost ? 'xs' : 'default'}
         variant={primary ? 'primary' : 'ghost'}
         rounded={ghost ? 'full' : ROUNDED_VAL}
         className={cn(
           'lg:min-w-0 lg:px-2 grow justify-start group', 
           (ghost ? 'px-1' : 'px-2'), 
           (outline ? 'hover:bg-transparent' : ''),
-          buttonClx
+          buttonClx,
+          'h-auto self-stretch' // must be smaller than normal
         )}
         key='left'
         onClick={dec}
@@ -128,14 +129,15 @@ const AddToCartWidget: React.FC<{
         <div className={'text-sm grow-0 shrink-0 flex items-center cursor-default xs:px-2 ' + digitClx} >{item.quantity}{ghost ? '' : ' in Bag'}</div>
       <Button
         aria-label={'Add another ' + item.title + ' to the cart'}
-        size={size}
+        size={ghost ? 'xs' : 'default'}
         variant={primary ? 'primary' : 'ghost'}
         rounded={ghost ? 'full' : ROUNDED_VAL}
         className={cn(
           'lg:min-w-0 lg:px-2 grow justify-end group', 
           (ghost ? 'px-1' : 'px-2'), 
           (outline ? 'hover:bg-transparent' : ''),
-          buttonClx
+          buttonClx,
+          'h-auto self-stretch' // must be smaller than normal
         )}
         onClick={inc}
         key='right'
@@ -146,7 +148,7 @@ const AddToCartWidget: React.FC<{
   ) : (
     <Button
       aria-label={'Add a ' + item.title + ' to cart'}
-      size={size}
+      size={ghost ? 'xs' : 'default'}
       variant={variant as ButtonVariants}
       rounded={ROUNDED_VAL}
       className={cn(buttonClx, className)}

package/components/buy/buy-card.tsx

@@ -18,7 +18,7 @@ import { useCommerce } from '../../service/context'
 import * as pathUtils from '../../service/path-utils'
 import { getFacetValuesMutator, ObsStringMutator } from '../../util'
 
-import LevelNodesWidget from '../select-family/level-nodes-widget'
+import NodeTabs from '../node-tabs'
 import AddToCartWidget from './add-to-cart-widget'
 
 const BuyCard: React.FC<{
@@ -170,7 +170,7 @@ const BuyCard: React.FC<{
     }
   }
 
-  const famTitle = inst.current?.requestedFamily ? inst.current.requestedFamily.title : cmmc.selectedFamilies?.[0]?.title
+  const famTitle = inst.current?.requestedFamily ? inst.current.requestedFamily.title : cmmc.selectedFamilies[0].title
 
   const itemsToShow = (!cmmc.hasSelection) ? undefined : 
     allVariants ? cmmc.selectedItems : cmmc.selectedFamilies[0].products as LineItem[]
@@ -205,7 +205,7 @@ const BuyCard: React.FC<{
           <h6 className='!text-center font-bold text-muted mt-3'>{inst.current!.requestedNode.subNodesLabel}</h6>
         )}
       </ApplyTypography>
-      <LevelNodesWidget
+      <NodeTabs
         className={cn(
           'grid gap-0 align-stretch justify-normal ' + `grid-cols-${inst.current.requestedNode.subNodes!.length}`, 
           'border-b-2 rounded-lg border-level-3 mb-4 -mr-2 -ml-2 max-w-[460px] h-10', // height is needed for iPhone bug
@@ -247,7 +247,6 @@ const BuyCard: React.FC<{
     )}
     {(cmmc.currentItem) && (
       <AddToCartWidget 
-        size='default' 
         item={cmmc.currentItem}
         onQuantityChanged={onQuantityChanged} 
         className={cn('min-w-[160px] mx-auto mt-4', (scroll ? 'shrink-0' : ''), addWidgetClx)}

package/components/buy/carousel-buy-card.tsx

@@ -1,9 +1,14 @@
 'use client'
-import React, { useRef, useEffect, type ComponentType, useState } from 'react'
+import React, { 
+  useRef, 
+  useEffect, 
+  type ComponentType, 
+  useState 
+} from 'react'
 import { observer } from 'mobx-react-lite'
 
 import { cn } from '@hanzo/ui/util'
-import { ApplyTypography, Button, MediaStack, Skeleton } from '@hanzo/ui/primitives'
+import { Button } from '@hanzo/ui/primitives'
 
 import type { 
   ItemSelectorProps, 
@@ -12,14 +17,17 @@ import type {
   CategoryNode,
   CategoryNodeRole,
   SelectionUISpecifier,
-  ItemSelectorOptions, 
+  ItemSelectorOptions,
+  MultiFamilySelectorProps,
+  MultiFamilySelectorOptions, 
 } from '../../types'
 
 import { useCommerce } from '../../service/context'
 import { getSelectionUISpecifier } from '../../util'
 
 import { CarouselItemSelector, ButtonItemSelector } from '../item-selector'
-import FamilyCarousel from '../select-family/family-carousel'
+import SingleFamilySelector from './single-family-selector'
+import { FamilyCarousel, AllVariantsCarousel } from './multi-family'
 
 import AddToCartWidget from './add-to-cart-widget'
 
@@ -30,13 +38,25 @@ const SCROLL = {
 
 const MEDIA_CONSTRAINT = {w: 200, h: 200}
 
+const sortItems = (items: LineItem[], sort: 'asc' | 'desc' | 'none'): LineItem[] => (
+  ((sort === 'asc') ? 
+    items.sort((a: LineItem, b: LineItem): number => (a.price - b.price))
+    :
+    ((sort === 'desc') ?   
+      items.sort((a: LineItem, b: LineItem): number => (b.price - a.price ))
+      :
+      items
+    )
+  )
+)
+
 const CarouselBuyCard: React.FC<{
   skuPath: string
   clx?: string
   mobile?: boolean
   handleCheckout: () => void
   onQuantityChanged?: (sku: string, oldV: number, newV: number) => void
-}> = observer(({
+}> = ({
   skuPath,
   clx='',
   mobile=false,
@@ -59,7 +79,13 @@ const CarouselBuyCard: React.FC<{
       selOptions: ItemSelectorOptions | undefined
       scrollable: boolean
       showItemMedia: boolean
-    } 
+    }
+    multi?: {
+      Selector: ComponentType<MultiFamilySelectorProps>
+      selectorOptions: MultiFamilySelectorOptions | undefined
+      itemOptions: ItemSelectorOptions | undefined
+      initialFamilyId: string
+    }  
   } | undefined>(undefined)
 
   const [changeMeToRerender, setChangeMeToRerender] = useState<boolean>(false)
@@ -84,124 +110,133 @@ const CarouselBuyCard: React.FC<{
 
     if (peek.role === 'single-family') {
 
+      const sort = (): 'none' | 'asc' | 'desc' => {
+        if (!uiSpec.singleFamily?.options) {
+          return 'none'
+        }
+        const options = uiSpec.singleFamily.options
+        const showSlider = 'showSlider' in options ? options.showSlider! : true
+        return ('sort' in options) ? 
+          options.sort!
+          :
+          (showSlider ? 'asc' : 'none')
+      }
+
       const items = peek.family!.products as LineItem[]
       const Selector: ComponentType<ItemSelectorProps> = 
         (uiSpec.singleFamily?.type === 'buttons') ? ButtonItemSelector : CarouselItemSelector
       const selOptions = uiSpec.singleFamily?.options
 
       r.current.single = {
-        items,
+        items: sortItems(items, sort()),
         Selector,
         selOptions,
         scrollable: !!(items.length > SCROLL.scrollAfter),
         showItemMedia: uiSpec.singleFamily?.type !== 'carousel'
       }
 
-      const currItem = peek.item ?? peek.family!.products[0]
+      const currItem = peek.item ?? r.current.single.items[0]
       cmmc.setCurrentItem(currItem.sku)
     }
     else {
       const initialFamily = peek.family ? peek.family : peek.families![0]
+        // TODO: Does this ever need to be sorted??
       const currItem = peek.item ?? initialFamily.products[0]
+
+          // sets currentFamily as well
       cmmc.setCurrentItem(currItem.sku)
+
+      r.current.multi = {
+        Selector:  (uiSpec.multiFamily?.type === 'family-carousel') ? 
+          FamilyCarousel 
+          : 
+          AllVariantsCarousel,
+        itemOptions: uiSpec.multiFamily?.itemOptions,
+        selectorOptions: uiSpec.multiFamily?.selectorOptions,
+        initialFamilyId: initialFamily.id
+      }
     }
 
       // Must do this since Dialog code takes this comp out of the React shadow DOM
       // (only in prod apparently.)
     setChangeMeToRerender(!changeMeToRerender)
-
   }, [skuPath])
 
-  const TitleArea: React.FC<{
-    title: string
-    byline?: string
+  const MultiFamilyUI: React.FC<{      
+    Selector: ComponentType<MultiFamilySelectorProps>
+    selectorOptions: MultiFamilySelectorOptions | undefined
+    itemOptions: ItemSelectorOptions | undefined
+    families: Family[]
+    parent: CategoryNode
     clx?: string
-    bylineClx?: string
   }> = ({
-    title,
-    byline,
-    clx='',
-    bylineClx='' 
+    Selector,
+    itemOptions,
+    selectorOptions,
+    families,
+    parent,
+    clx=''
   }) => (
-    <ApplyTypography className={clx}>
-      <h3>{title}</h3>
-      {byline && (<h6 className={bylineClx}>{byline}</h6>)}
-    </ApplyTypography>
+    <Selector 
+      families={families}
+      parent={parent}
+      clx={clx}
+      itemOptions={itemOptions}
+      selectorOptions={selectorOptions}
+      mediaConstraint={MEDIA_CONSTRAINT}
+      mobile={mobile}
+    />
   )
 
+  const Buttons: React.FC<{clx?: string}> = observer(({
+    clx=''
+  }) => (cmmc.currentItem ? (
+    <div className={clx}>
+      <AddToCartWidget 
+        item={cmmc.currentItem}
+        onQuantityChanged={onQuantityChanged} 
+        variant={cmmc.cartEmpty ? 'primary' : 'outline'}
+        className='min-w-[160px] w-full sm:max-w-[320px]' 
+      />
+      {!cmmc.cartEmpty && (
+        <Button 
+          onClick={handleCheckout} 
+          variant='primary' 
+          rounded='lg' 
+          className='min-w-[160px] w-full sm:max-w-[320px]'
+        >
+          Checkout
+        </Button>
+      )}
+    </div>
+  ) : null))
+
   return (
     <div className={cn(
-      'px-4 md:px-6 pt-3 pb-4 flex flex-col gap-4 items-center min-h-[40vh]', 
+      'px-4 md:px-6 pt-3 pb-4 flex flex-col gap-1 items-center min-h-[40vh]', 
       clx,
       r.current?.single?.scrollable ? SCROLL.scrollHeightClx : 'h-auto'
     )}>
-    {r.current?.single ? (<>
-      <TitleArea title={r.current?.family?.title ?? ''} clx=''/>
-      {(r.current.single.showItemMedia && cmmc.currentItem ) && (
-        <MediaStack 
-          media={cmmc.currentItem} 
-          constrainTo={MEDIA_CONSTRAINT} 
-          clx={(r.current.single.scrollable ? 'shrink-0' : '')}
-        />
-      )}
-      {(r.current.single.showItemMedia && !cmmc.currentItem ) && (
-        <Skeleton className={'w-[200px] h-[200px] my-4 ' + (r.current.single.scrollable ? 'shrink-0' : '')}/>
-      )}
-      {r.current.single.items && (
-        <r.current.single.Selector 
-          items={r.current.single.items}
-          selectedItemRef={cmmc}
-          selectSku={cmmc.setCurrentItem.bind(cmmc)}
-          scrollable={r.current.single.scrollable}
-          mobile={mobile}
-          options={r.current.single.selOptions}
-        />  
-      )}
-    </>) : (<>
-      {r.current?.uiSpec.multiFamily?.showParentTitle && (
-        <TitleArea 
-          title={r.current?.node.label ?? ''} 
-          byline={r.current?.node.subNodesLabel} 
-          clx={'mb-2 '}
-          bylineClx='!text-center font-bold text-muted mt-3'
-        />
-      )}
-      {r.current?.families && ( // safegaurd for first render etc.
-        <FamilyCarousel 
-          families={r.current?.families}
-          clx='w-full'
-          slideOptions={r.current?.uiSpec.multiFamily?.slide.options}
+      {r.current?.single ? ( 
+        <SingleFamilySelector 
+          {...r.current.single} 
           mediaConstraint={MEDIA_CONSTRAINT}
-          mobile={mobile}
+          mobile={mobile} 
+        /> 
+      ) : (r.current?.multi && r.current.families && /* safegaurd for first render, etc. */ (
+        <MultiFamilyUI 
+          {...r.current.multi} 
+          families={r.current.families} 
+          parent={r.current.node}
+          clx='max-w-[475px]'
         />
-      )}
-    </>)}
-    {(cmmc.currentItem) && (
-      <div className={cn(
-        'self-stretch mt-4 flex flex-col items-center gap-3',
+      ))}
+      <Buttons clx={cn(
+        'self-stretch mt-8 flex flex-col items-center gap-3',
         (r.current?.single?.scrollable ? 'shrink-0' : '')
-      )}>
-        <AddToCartWidget 
-          size='default' 
-          item={cmmc.currentItem}
-          onQuantityChanged={onQuantityChanged} 
-          variant={cmmc.cartEmpty ? 'primary' : 'outline'}
-          className='min-w-[160px] w-full sm:max-w-[320px]' 
-        />
-        {!cmmc.cartEmpty && (
-          <Button 
-            onClick={handleCheckout} 
-            variant='primary' 
-            rounded='lg' 
-            className='min-w-[160px] w-full sm:max-w-[320px]'
-          >
-            Checkout
-          </Button>
-        )}
-      </div>
-    )} 
+      )}/>
     </div >
   )
-})
+}
 
 export default CarouselBuyCard

package/components/buy/multi-family/all-variants-carousel.tsx

@@ -0,0 +1,257 @@
+'use client'
+import React, { useCallback, useEffect, useRef, useState } from 'react'
+import { reaction } from 'mobx'
+import { observer } from 'mobx-react-lite'
+
+import { cn } from '@hanzo/ui/util'
+
+import {
+  ApplyTypography,
+  type CarouselApi,
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselPrevious,
+  CarouselNext,
+  MediaStack,
+} from '@hanzo/ui/primitives'
+
+import type { MultiFamilySelectorProps, LineItem } from '../../../types'
+import { 
+  formatCurrencyValue, 
+  accessItemOptions, 
+  accessMultiSelectorOptions 
+} from '../../../util'
+
+import QuantityIndicator from '../../quantity-indicator'
+import { ButtonItemSelector, useCommerce } from '../../..'
+
+const debugBorder = (c: 'r' | 'g' | 'b', disable: boolean = true): string => {
+
+  if (disable) {
+    return ''
+  }
+  switch (c) {
+    case 'r': return ' border border-[#ffaaaa] '
+    case 'g': return ' border border-[#aaffaa] '
+    case 'b': return ' border border-[#aaaaff] '
+  }
+}
+
+const DEFAULT_CONSTRAINT = {w: 250, h: 250}
+
+const AllVariantsCarousel: React.FC<MultiFamilySelectorProps> = ({ 
+  families,
+  parent,
+  clx='',
+  itemClx='',
+  itemOptions,
+  selectorOptions,
+  mediaConstraint=DEFAULT_CONSTRAINT,
+  mobile=false, // not relavant to any children
+}) => {
+   
+  const cmmc = useCommerce()
+  const r = useRef<{
+    api: CarouselApi | undefined 
+    items: LineItem[] 
+    dontRespond: boolean
+    initialIndex: number 
+  } | undefined>(undefined)
+
+
+  const [changeMeToRerender, setChangeMeToRerender] = useState<boolean>(false)
+    // Safe, since Carousel is only render (and this method passed), once the ref is initialized.
+  const setApi = (api: CarouselApi) => { r.current!.api = api }
+  
+  const onSelect = useCallback((emblaApi: CarouselApi) => {
+    if (r.current?.dontRespond) {
+      r.current.dontRespond = false
+      return
+    }
+    const index = emblaApi.selectedScrollSnap()
+    if (index !== -1) {
+      const item = r.current?.items[index]
+      cmmc.setCurrentItem(item?.sku) // (sets currentFamily as well)
+    }
+    if (r.current) {
+      r.current.dontRespond = false  
+    }
+  }, [])
+
+  useEffect(() => {
+
+    const items = families.map((fam) => (fam.products as LineItem[])).flat()
+    const foundIndex = cmmc.currentItem ? items.findIndex((item) => (cmmc.currentItem!.sku == item.sku)) : -1
+    r.current = {
+      items,
+      initialIndex: foundIndex === -1 ? 0 : foundIndex,
+      dontRespond: false,
+      api: undefined
+    }
+
+    setChangeMeToRerender(!changeMeToRerender)
+
+      // This responds to the swatch clicks
+    return reaction(
+      () => (cmmc.currentItem),
+      (item) => {
+        if (r.current && r.current.api) {
+          const index = r.current.items.findIndex((_item: LineItem) => (_item.sku === item?.sku))  
+          if (index && index !== -1) {
+              // no need to sync family, since ui only allows selecting within a family            
+            r.current.dontRespond = true
+            r.current.api.scrollTo(index) 
+          }
+        }
+      }  
+    )
+  }, [])
+
+  const Header: React.FC<{clx?: string}> = observer(({
+    clx=''
+  }) => {
+
+    const { showParentTitle, parentByline: parentBylineMode  } = accessMultiSelectorOptions(selectorOptions)
+    const { familyTitle, showFamilyByline } = accessItemOptions(itemOptions)
+
+    const parentTitleDisplay = showParentTitle ? parent.label : undefined
+    const parentBylineDisplay = (parentBylineMode === 'own-line') ? parent.subNodesLabel : ''
+
+    const title = (familyTitle === 'none' ? 
+      undefined 
+      : 
+      (familyTitle === 'long' ? 
+        cmmc.currentFamily?.title 
+        : 
+        (cmmc.currentFamily?.titleShort ?? cmmc.currentFamily?.title)
+      ) 
+    )
+
+    let titleLinePrefix = (parentBylineMode === 'none' || parentBylineMode ===  'own-line') ? '' : (parent.subNodesLabel ?? '')
+    if (titleLinePrefix.length > 0 && title && parentBylineMode === 'comma-sep') {
+        titleLinePrefix += ', '
+    }
+    else if (titleLinePrefix.length > 0 && title && parentBylineMode === 'colon-sep') {
+        titleLinePrefix += ': '
+    }
+    const titleDisplay = title ? (titleLinePrefix + title) : undefined
+    const bylineDisplay = (familyTitle !== 'none') && showFamilyByline ? cmmc.currentFamily?.byline :  undefined
+
+    return (
+      <ApplyTypography className={cn('flex flex-col items-center !gap-0 [&>*]:!m-0 ', clx)} >
+        {parentTitleDisplay && <h4>{parentTitleDisplay}</h4>}
+        {parentBylineDisplay && <h4>{parentBylineDisplay}</h4>}
+        {titleDisplay && <h4>{titleDisplay}</h4>}
+        {bylineDisplay && (<h6 >{bylineDisplay}</h6>)}
+      </ApplyTypography>
+    )
+  })
+
+  const ItemInfo: React.FC<{
+    clx?: string
+    labelClx?: string
+  }> = observer(({
+    clx='',
+    labelClx=''
+  }) => {
+
+    const {
+      showPrice, 
+      showQuantity,
+      showFamilyInOption,
+      showByline,
+    } = accessItemOptions(itemOptions)
+    
+    const optionLabel = () => (
+      showFamilyInOption ? 
+        (cmmc.currentItem!.familyTitle + ', ' + cmmc.currentItem!.optionLabel) 
+        : 
+        cmmc.currentItem!.optionLabel 
+    )
+
+    return (cmmc.currentItem && (
+      <ApplyTypography className={cn('flex flex-col items-center [&>*]:!m-0 !gap-1 ', clx)}>
+        <div className={
+          'flex items-center gap-1 [&>*]:!m-0 ' + 
+          debugBorder('g') + 
+          (showFamilyInOption ? 'flex-col' : 'flex-row')
+        }>
+          <h6 className={cn('font-semibold', labelClx)}>
+            {optionLabel() + (showPrice && !showFamilyInOption ? ',' : '')}
+          </h6>
+          <div className={
+            'flex items-center gap-1 [&>*]:!m-0 flex-row ' +  debugBorder('b') +  
+            (showFamilyInOption ? 'w-full justify-between' : '')
+          }>
+            {showPrice && (<p>{formatCurrencyValue(cmmc.currentItem.price)}</p>)}
+            {showQuantity && (
+              <QuantityIndicator 
+                item={cmmc.currentItem} 
+                clx='h-[22px] ml-4' 
+                iconClx='fill-foreground'
+                digitClx='not-typography font-semibold text-primary-fg leading-none font-sans text-xs' 
+              />
+            )}
+          </div>
+        </div>
+        {showByline && cmmc.currentItem.byline && (<p>{cmmc.currentItem.byline}</p>)}
+      </ApplyTypography>
+    ))
+  })
+
+  const Swatches: React.FC<{
+    clx?: string
+  }> = observer(({
+    clx=''
+  }) => {
+    const { showItemSwatches } = accessMultiSelectorOptions(selectorOptions)
+    if (
+      !showItemSwatches || 
+      !cmmc.currentFamily || 
+      cmmc.currentFamily.products.length === 1
+    ) {
+      return null
+    }
+    return <ButtonItemSelector
+      items={cmmc.currentFamily.products as LineItem[]}
+      selectedItemRef={cmmc}
+      selectSku={cmmc.setCurrentItem.bind(cmmc)}
+      clx={clx}
+      options={{
+        buttonType: 'image',
+        horizButtons: true
+      }}      
+    />
+  })
+
+  return ( 
+    <div className={cn('w-full flex flex-col items-center', clx)}>
+      <Header />
+      {r.current && /* Only render once we've set the ref fields, or else bad things! */ (
+        <Carousel 
+          options={{loop: true, startIndex: r.current.initialIndex}} 
+          className={'w-full px-2' + debugBorder('r')} 
+          onCarouselSelect={onSelect} 
+          setApi={setApi}
+        >
+          <CarouselContent>
+          {r.current.items.map((item) => (
+            <CarouselItem key={item.sku} className={cn('p-2 flex flex-col justify-center items-center', itemClx)}>
+              <MediaStack media={item} constrainTo={mediaConstraint} clx='my-4'/>
+            </CarouselItem>
+          ))}
+          </CarouselContent>
+          <CarouselPrevious className='left-1'/>
+          <CarouselNext className='right-1'/>
+        </Carousel>
+      )}
+      <ItemInfo labelClx='!text-base font-medium'/>
+      <Swatches clx='mt-2'/> 
+    </div>
+  )
+}
+
+export {
+  AllVariantsCarousel as default 
+}