@hanzo/commerce 7.3.6 → 7.3.7

package/dist/components/buy/multi-family/all-variants-carousel.jsx

@@ -0,0 +1,147 @@
+'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, Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext, MediaStack, } from '@hanzo/ui/primitives';
+import { formatCurrencyValue, accessItemOptions, accessMultiSelectorOptions } from '../../../util';
+import QuantityIndicator from '../../item-selector/quantity-indicator';
+import { ButtonItemSelector, useCommerce } from '../../..';
+const debugBorder = (c, disable = true) => {
+    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 = ({ families, parent, clx = '', itemClx = '', itemOptions, selectorOptions, mediaConstraint = DEFAULT_CONSTRAINT, mobile = false, // not relavant to any children
+ }) => {
+    const cmmc = useCommerce();
+    const r = useRef(undefined);
+    const [changeMeToRerender, setChangeMeToRerender] = useState(false);
+    // Safe, since Carousel is only render (and this method passed), once the ref is initialized.
+    const setApi = (api) => { r.current.api = api; };
+    const onSelect = useCallback((emblaApi) => {
+        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).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) => (_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 = 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 = 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 = observer(({ clx = '' }) => {
+        const { showItemSwatches } = accessMultiSelectorOptions(selectorOptions);
+        if (!showItemSwatches ||
+            !cmmc.currentFamily
+        //|| cmmc.currentFamily.products.length === 1
+        ) {
+            return null;
+        }
+        return <ButtonItemSelector items={cmmc.currentFamily.products} 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>
+          {r.current.items.length > 1 && (<>
+            <CarouselPrevious className='left-1'/>
+            <CarouselNext className='right-1'/>
+          </>)}
+        </Carousel>)}
+      <div className='flex flex-col items-center justify-start'>
+        <ItemInfo labelClx='!text-base font-medium'/>
+        <Swatches clx='mt-2'/> 
+      </div>
+    </div>);
+};
+export { AllVariantsCarousel as default };
+//# sourceMappingURL=all-variants-carousel.jsx.map

package/dist/components/buy/multi-family/all-variants-carousel.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"all-variants-carousel.jsx","sourceRoot":"","sources":["../../../../components/buy/multi-family/all-variants-carousel.tsx"],"names":[],"mappings":"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"}

package/dist/components/buy/multi-family/family-carousel/index.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { MultiFamilySelectorProps } from '../../../../types';
+declare const FamilyCarousel: React.FC<MultiFamilySelectorProps>;
+export default FamilyCarousel;

package/dist/components/buy/multi-family/family-carousel/index.jsx

@@ -0,0 +1,34 @@
+'use client';
+import React, { useCallback, useRef } from 'react';
+import { cn } from '@hanzo/ui/util';
+import { Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext, } from '@hanzo/ui/primitives';
+import FamilySlide from './slide';
+import { FamilyCarouselState } from './state';
+import { useCommerce } from '../../../..';
+const FamilyCarousel = ({ families, clx = '', itemClx = '', itemOptions, selectorOptions, mediaConstraint = { w: 250, h: 250 }, mobile = false, }) => {
+    const cmmc = useCommerce();
+    const stateRef = useRef(new FamilyCarouselState(families, cmmc.setCurrentItem.bind(cmmc)));
+    const onSelect = useCallback((emblaApi) => {
+        const index = emblaApi.selectedScrollSnap();
+        if (index !== -1) {
+            stateRef.current.setCurrentFamily(families[index].id);
+        }
+    }, [stateRef.current]);
+    return (<Carousel className={cn('px-2', clx)} options={{ loop: false }} onCarouselSelect={onSelect}>
+      <CarouselContent>
+      {families.map((family) => {
+            const slideState = stateRef.current.getSlideState(family.id);
+            if (!slideState) {
+                throw new Error(`FamilyCarousel: no SlideState for family '${family.id}'!`);
+            }
+            return (<CarouselItem key={family.id} className='p-2 flex flex-col justify-center items-center'>
+            <FamilySlide family={family} selectedItemRef={slideState} selectSku={slideState.selectSku.bind(slideState)} mediaConstraint={mediaConstraint} options={itemOptions} mobile={mobile} clx={itemClx}/>
+          </CarouselItem>);
+        })}
+      </CarouselContent>
+      <CarouselPrevious className='left-1'/>
+      <CarouselNext className='right-1'/>
+    </Carousel>);
+};
+export default FamilyCarousel;
+//# sourceMappingURL=index.jsx.map

package/dist/components/buy/multi-family/family-carousel/index.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.jsx","sourceRoot":"","sources":["../../../../../components/buy/multi-family/family-carousel/index.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;AACZ,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,OAAO,CAAA;AAElD,OAAO,EAAE,EAAE,EAAE,MAAM,gBAAgB,CAAA;AAEnC,OAAO,EAEL,QAAQ,EACR,eAAe,EACf,YAAY,EACZ,gBAAgB,EAChB,YAAY,GACb,MAAM,sBAAsB,CAAA;AAI7B,OAAO,WAAW,MAAM,SAAS,CAAA;AACjC,OAAO,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAA;AAE7C,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAA;AAEzC,MAAM,cAAc,GAAuC,CAAC,EAC1D,QAAQ,EACR,GAAG,GAAC,EAAE,EACN,OAAO,GAAC,EAAE,EACV,WAAW,EACX,eAAe,EACf,eAAe,GAAC,EAAC,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAC,EAChC,MAAM,GAAC,KAAK,GACb,EAAE,EAAE;IAEH,MAAM,IAAI,GAAG,WAAW,EAAE,CAAA;IAC1B,MAAM,QAAQ,GAAG,MAAM,CACrB,IAAI,mBAAmB,CAAC,QAAQ,EAAE,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAClE,CAAA;IAED,MAAM,QAAQ,GAAG,WAAW,CAAC,CAAC,QAAqB,EAAE,EAAE;QACrD,MAAM,KAAK,GAAG,QAAQ,CAAC,kBAAkB,EAAE,CAAA;QAC3C,IAAI,KAAK,KAAK,CAAC,CAAC,EAAE,CAAC;YACjB,QAAQ,CAAC,OAAO,CAAC,gBAAgB,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAA;QACvD,CAAC;IACH,CAAC,EAAE,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAA;IAEtB,OAAO,CACL,CAAC,QAAQ,CACP,SAAS,CAAC,CAAC,EAAE,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC,CAC3B,OAAO,CAAC,CAAC,EAAC,IAAI,EAAE,KAAK,EAAC,CAAC,CACvB,gBAAgB,CAAC,CAAC,QAAQ,CAAC,CAE3B;MAAA,CAAC,eAAe,CAChB;MAAA,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE;YACvB,MAAM,UAAU,GAAG,QAAQ,CAAC,OAAO,CAAC,aAAa,CAAC,MAAM,CAAC,EAAE,CAAC,CAAA;YAC5D,IAAI,CAAC,UAAU,EAAE,CAAC;gBAChB,MAAM,IAAI,KAAK,CAAC,6CAA6C,MAAM,CAAC,EAAE,IAAI,CAAC,CAAA;YAC7E,CAAC;YACD,OAAO,CACL,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC,SAAS,CAAC,+CAA+C,CACrF;YAAA,CAAC,WAAW,CACV,MAAM,CAAC,CAAC,MAAM,CAAC,CACf,eAAe,CAAC,CAAC,UAAU,CAAC,CAC5B,SAAS,CAAC,CAAC,UAAU,CAAC,SAAS,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,CACjD,eAAe,CAAC,CAAC,eAAe,CAAC,CACjC,OAAO,CAAC,CAAC,WAAW,CAAC,CACrB,MAAM,CAAC,CAAC,MAAM,CAAC,CACf,GAAG,CAAC,CAAC,OAAO,CAAC,EAEjB;UAAA,EAAE,YAAY,CAAC,CAChB,CAAA;QAAA,CAAC,CACH,CACD;MAAA,EAAE,eAAe,CACjB;MAAA,CAAC,gBAAgB,CAAC,SAAS,CAAC,QAAQ,EACpC;MAAA,CAAC,YAAY,CAAC,SAAS,CAAC,SAAS,EACnC;IAAA,EAAE,QAAQ,CAAC,CACZ,CAAA;AACH,CAAC,CAAA;AAED,eAAe,cAAc,CAAA"}

package/dist/components/buy/multi-family/family-carousel/slide.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { Dimensions } from '@hanzo/ui/types';
+import type { ItemSelectorOptions, Family, ItemSelector } from '../../../../types';
+declare const FamilySlide: React.FC<Omit<ItemSelector, 'items'> & {
+    family: Family;
+    mediaConstraint: Dimensions;
+    clx?: string;
+    mobile?: boolean;
+    options?: ItemSelectorOptions;
+}>;
+export default FamilySlide;

package/dist/components/buy/multi-family/family-carousel/slide.jsx

@@ -0,0 +1,41 @@
+'use client';
+import React from 'react';
+import { ApplyTypography, MediaStack } from '@hanzo/ui/primitives';
+import { ButtonItemSelector } from '../../..';
+import { cn } from '@hanzo/ui/util';
+const FamilySlide = ({ family, selectedItemRef, selectSku, mediaConstraint: cnst = { w: 200, h: 200 }, clx = '', mobile = false, options = {} }) => {
+    const titleSpec = 'title' in options ? options.title : 'short';
+    const showByline = 'showByline' in options ? options.showByline : true;
+    const title = titleSpec === 'long' ?
+        family.title
+        :
+            (titleSpec === 'short' ?
+                (family.titleShort ? family.titleShort : family.title)
+                :
+                    undefined);
+    const byline = (showByline && family.byline) ? family.byline : undefined;
+    /*
+    let byline: string | undefined = undefined
+    if (showByline) {
+      if (family.byline) {
+          // if byline names another field thats a function, call it
+        if (family.byline in family && typeof (family as any)[family.byline] === 'function') {
+          byline = (family as any)[family.byline]() as string
+        }
+        else {
+          byline = family.byline
+        }
+      }
+    }
+    */
+    return (<div className={cn('flex flex-col items-center gap-4', clx)} data-vaul-no-drag>
+      {title && (<ApplyTypography className='flex flex-col items-center !gap-1 [&>*]:!m-0' data-vaul-no-drag>
+          <h6 className='font-bold text-lg'>{title}</h6>
+          {byline && (<p className={''}>{byline}</p>)}
+        </ApplyTypography>)}
+      <MediaStack media={selectedItemRef.item} constrainTo={cnst}/>
+      <ButtonItemSelector items={family.products} selectedItemRef={selectedItemRef} selectSku={selectSku} scrollable={false} mobile={mobile} options={options} itemClx='text-sm'/>
+    </div>);
+};
+export default FamilySlide;
+//# sourceMappingURL=slide.jsx.map

package/dist/components/buy/multi-family/family-carousel/slide.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"slide.jsx","sourceRoot":"","sources":["../../../../../components/buy/multi-family/family-carousel/slide.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;AACZ,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EACL,eAAe,EACf,UAAU,EACX,MAAM,sBAAsB,CAAA;AAI7B,OAAO,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAA;AAC7C,OAAO,EAAE,EAAE,EAAE,MAAM,gBAAgB,CAAA;AAEnC,MAAM,WAAW,GAMZ,CAAC,EACJ,MAAM,EACN,eAAe,EACf,SAAS,EACT,eAAe,EAAE,IAAI,GAAG,EAAC,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAC,EACxC,GAAG,GAAC,EAAE,EACN,MAAM,GAAC,KAAK,EACZ,OAAO,GAAC,EAAE,EACX,EAAE,EAAE;IAEH,MAAM,SAAS,GAAG,OAAO,IAAI,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO,CAAA;IAC9D,MAAM,UAAU,GAAG,YAAY,IAAI,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAA;IACtE,MAAM,KAAK,GAAG,SAAS,KAAK,MAAM,CAAC,CAAC;QAClC,MAAM,CAAC,KAAK;QACZ,CAAC;YACD,CACE,SAAS,KAAK,OAAO,CAAC,CAAC;gBACrB,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAE;gBACvD,CAAC;oBACD,SAAS,CACZ,CAAA;IAEH,MAAM,MAAM,GAAG,CAAC,UAAU,IAAI,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,CAAA;IACxE;;;;;;;;;;;;;MAaE;IAEF,OAAO,CACL,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,kCAAkC,EAAE,GAAG,CAAC,CAAC,CAAE,iBAAiB,CAC7E;MAAA,CAAC,KAAK,IAAI,CACR,CAAC,eAAe,CAAC,SAAS,CAAC,8CAA8C,CAAC,iBAAiB,CACzF;UAAA,CAAC,EAAE,CAAC,SAAS,CAAC,mBAAmB,CAAC,CAAC,KAAK,CAAC,EAAE,EAAE,CAC7C;UAAA,CAAC,MAAM,IAAI,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC,CAAC,CAC7C;QAAA,EAAE,eAAe,CAAC,CACnB,CACD;MAAA,CAAC,UAAU,CACT,KAAK,CAAC,CAAC,eAAe,CAAC,IAAK,CAAC,CAC7B,WAAW,CAAC,CAAC,IAAI,CAAC,EAEpB;MAAA,CAAC,kBAAkB,CACjB,KAAK,CAAC,CAAC,MAAM,CAAC,QAAsB,CAAC,CACrC,eAAe,CAAC,CAAC,eAAe,CAAC,CACjC,SAAS,CAAC,CAAC,SAAS,CAAC,CACrB,UAAU,CAAC,CAAC,KAAK,CAAC,CAClB,MAAM,CAAC,CAAC,MAAM,CAAC,CACf,OAAO,CAAC,CAAC,OAAO,CAAC,CACjB,OAAO,CAAC,SAAS,EAErB;IAAA,EAAE,GAAG,CAAC,CACP,CAAA;AACH,CAAC,CAAA;AAED,eAAe,WAAW,CAAA"}

package/dist/components/buy/multi-family/family-carousel/state.d.ts

@@ -0,0 +1,20 @@
+import type { Family, LineItem, ObsLineItemRef, Product } from '../../../../types';
+declare class SlideState implements ObsLineItemRef {
+    _fam: Family;
+    _item: Product;
+    _syncSku: (sku: string) => void;
+    _selected: boolean;
+    constructor(fam: Family, initiallySelected: boolean, sync: (sku: string) => void);
+    selectSku: (sku: string) => void;
+    setSelected: (b: boolean) => void;
+    get id(): string;
+    get item(): LineItem | undefined;
+}
+declare class FamilyCarouselState {
+    _map: Map<string, SlideState>;
+    _syncSku: (sku: string) => void;
+    constructor(fams: Family[], syncSkuToCurrentSlide: (sku: string) => void);
+    setCurrentFamily: (id: string) => void;
+    getSlideState: (familyId: string) => SlideState | undefined;
+}
+export { SlideState, FamilyCarouselState };

package/dist/components/buy/multi-family/family-carousel/state.js

@@ -0,0 +1,59 @@
+import { observable, action, computed, makeObservable } from 'mobx';
+class SlideState {
+    constructor(fam, initiallySelected, sync) {
+        this.selectSku = (sku) => {
+            if (this._item.sku === sku)
+                return;
+            const found = this._fam.products.find((i) => (i.sku === sku));
+            if (found) {
+                this._item = found;
+                if (this._selected) {
+                    this._syncSku(sku);
+                }
+            }
+            else {
+                throw new Error('SlideState.selectSku(): no item found!');
+            }
+        };
+        this.setSelected = (b) => { this._selected = b; };
+        this._fam = fam;
+        this._item = fam.products[0];
+        this._selected = initiallySelected;
+        this._syncSku = sync;
+        makeObservable(this, {
+            _item: observable,
+            item: computed,
+            selectSku: action
+        });
+    }
+    get id() { return (this._fam.id); }
+    get item() {
+        return this._item;
+    }
+}
+class FamilyCarouselState {
+    constructor(fams, 
+    //    initialFamilyId: string,
+    syncSkuToCurrentSlide) {
+        this._map = new Map();
+        this.setCurrentFamily = (id) => {
+            this._map.forEach((s) => {
+                s.setSelected(s.id === id);
+            });
+            const slideState = this._map.get(id);
+            if (slideState) {
+                this._syncSku(slideState.item.sku);
+            }
+            else {
+                throw new Error(`FamilyCarouselState.setCurrentFamily: no state object for id '${id}'!`);
+            }
+        };
+        this.getSlideState = (familyId) => (this._map.get(familyId));
+        fams.forEach((f, index) => {
+            this._map.set(f.id, new SlideState(f, (index === 0), syncSkuToCurrentSlide));
+        });
+        this._syncSku = syncSkuToCurrentSlide;
+    }
+}
+export { SlideState, FamilyCarouselState };
+//# sourceMappingURL=state.js.map

package/dist/components/buy/multi-family/family-carousel/state.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"state.js","sourceRoot":"","sources":["../../../../../components/buy/multi-family/family-carousel/state.ts"],"names":[],"mappings":"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"}

package/dist/components/buy/multi-family/index.d.ts

@@ -0,0 +1,2 @@
+export { default as FamilyCarousel } from './family-carousel';
+export { default as AllVariantsCarousel } from './all-variants-carousel';

package/dist/components/buy/multi-family/index.js

@@ -0,0 +1,3 @@
+export { default as FamilyCarousel } from './family-carousel';
+export { default as AllVariantsCarousel } from './all-variants-carousel';
+//# sourceMappingURL=index.js.map

package/dist/components/buy/multi-family/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../components/buy/multi-family/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,mBAAmB,CAAA;AAC7D,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,yBAAyB,CAAA"}

package/dist/components/buy/single-family-selector.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import type { Dimensions } from '@hanzo/ui/types';
+import type { ItemSelectorOptions, ItemSelectorProps, LineItem } from '../../types';
+declare const SingleFamilySelector: React.FC<{
+    items: LineItem[];
+    Selector: React.ComponentType<ItemSelectorProps>;
+    selOptions: ItemSelectorOptions | undefined;
+    scrollable?: boolean;
+    showItemMedia?: boolean;
+    mediaConstraint?: Dimensions;
+    mobile?: boolean;
+    clx?: string;
+    titleAreaClx?: string;
+}>;
+export default SingleFamilySelector;

package/dist/components/buy/single-family-selector.jsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { observer } from 'mobx-react-lite';
+import { MediaStack, Skeleton } from '@hanzo/ui/primitives';
+import { useCommerce } from '../..';
+import TitleAndByline from './title-and-byline';
+import { accessItemOptions } from '../../util';
+import { cn } from '@hanzo/ui/util';
+const DEF_MEDIA_CONSTRAINT = { w: 200, h: 200 };
+const SingleFamilySelector = ({ items, Selector, selOptions, scrollable = false, showItemMedia = true, mediaConstraint = DEF_MEDIA_CONSTRAINT, mobile = false, clx = '', titleAreaClx = '' }) => {
+    const cmmc = useCommerce();
+    const MyTitleAndByline = observer(({ clx = '' }) => {
+        const { familyTitle, showFamilyByline } = accessItemOptions(selOptions);
+        const title = (familyTitle === 'none' ?
+            undefined
+            :
+                (familyTitle === 'long' ?
+                    cmmc.currentFamily?.title
+                    :
+                        (cmmc.currentFamily?.titleShort ?? cmmc.currentFamily?.title)));
+        const byline = (familyTitle !== 'none') && showFamilyByline ? cmmc.currentFamily?.byline : undefined;
+        return (<TitleAndByline clx={clx} title={title} byline={byline}/>);
+    });
+    const ItemMedia = observer(() => (cmmc.currentItem ? (<MediaStack media={cmmc.currentItem} constrainTo={mediaConstraint} clx={'mb-2 ' + (scrollable ? 'shrink-0' : '')}/>) : (<Skeleton className={'w-[200px] h-[200px] my-2 ' + (scrollable ? 'shrink-0' : '')}/>)));
+    return (<div className={cn(clx, 'flex flex-col items-center', (scrollable ? 'shrink' : ''))}>
+      <MyTitleAndByline clx={cn(titleAreaClx, (scrollable ? 'shrink-0' : ''))}/>
+      {showItemMedia && (<ItemMedia />)}
+      {items && (<Selector items={items} selectedItemRef={cmmc} selectSku={cmmc.setCurrentItem.bind(cmmc)} scrollable={scrollable} mobile={mobile} options={selOptions} clx={(scrollable ? 'shrink' : '')}/>)}
+    </div>);
+};
+export default SingleFamilySelector;
+//# sourceMappingURL=single-family-selector.jsx.map

package/dist/components/buy/single-family-selector.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"single-family-selector.jsx","sourceRoot":"","sources":["../../../components/buy/single-family-selector.tsx"],"names":[],"mappings":"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"}

package/dist/components/buy/title-and-byline.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+declare const TitleAndByline: React.FC<{
+    title: string | undefined;
+    byline?: string | undefined;
+    clx?: string;
+    bylineClx?: string;
+}>;
+export default TitleAndByline;

package/dist/components/buy/title-and-byline.jsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import { ApplyTypography } from '@hanzo/ui/primitives';
+import { cn } from '@hanzo/ui/util';
+const TitleAndByline = ({ title, byline, clx = '', bylineClx = '' }) => ((title || byline) ? (<ApplyTypography className={cn('flex flex-col items-center !gap-0 [&>*]:!m-0 ', clx)}>
+      <h4>{title}</h4>
+      {byline && (<h6 className={bylineClx}>{byline}</h6>)}
+    </ApplyTypography>) : (null));
+export default TitleAndByline;
+//# sourceMappingURL=title-and-byline.jsx.map

package/dist/components/buy/title-and-byline.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"title-and-byline.jsx","sourceRoot":"","sources":["../../../components/buy/title-and-byline.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAA;AACtD,OAAO,EAAE,EAAE,EAAE,MAAM,gBAAgB,CAAA;AAEnC,MAAM,cAAc,GAKf,CAAC,EACJ,KAAK,EACL,MAAM,EACN,GAAG,GAAC,EAAE,EACN,SAAS,GAAC,EAAE,EACb,EAAE,EAAE,CAAC,CAAE,CAAC,KAAK,IAAI,MAAM,CAAC,CAAC,CAAC,CAAC,CACxB,CAAC,eAAe,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,+CAA+C,EAAE,GAAG,CAAC,CAAC,CACnF;MAAA,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,EAAE,EAAE,CACf;MAAA,CAAC,MAAM,IAAI,CAAC,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,EAAE,EAAE,CAAC,CAAC,CACtD;IAAA,EAAE,eAAe,CAAC,CACnB,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CACX,CAAA;AAED,eAAe,cAAc,CAAA"}

package/dist/components/cart/cart-panel/cart-line-item.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { LineItem } from '../../../types';
+declare const CartLineItem: React.FC<{
+    item: LineItem;
+    className?: string;
+    imgSizePx?: number;
+    showPromoCode?: boolean;
+    itemClicked?: (item: LineItem) => void;
+    selected?: boolean;
+}>;
+export default CartLineItem;

package/dist/components/cart/cart-panel/cart-line-item.jsx

@@ -0,0 +1,39 @@
+'use client';
+import React from 'react';
+import { observer } from 'mobx-react-lite';
+import { cn } from '@hanzo/ui/util';
+import { Image } from '@hanzo/ui/primitives';
+import { formatCurrencyValue } from '../../../util';
+import AddToCartWidget from '../../add-to-cart-widget';
+import { useCommerce } from '../../../service/context';
+const DEF_IMG_SIZE = 40;
+const renderTitle = (t) => {
+    const toks = t.split(', ');
+    if (toks.length === 2) {
+        return <><p>{toks[0]},</p><p className=''>{toks[1]}</p></>;
+    }
+    return <p>{t}</p>;
+};
+const CartLineItem = observer(({ item, className = '', imgSizePx = DEF_IMG_SIZE, showPromoCode = false, itemClicked, selected = false }) => {
+    const cmmc = useCommerce();
+    const promoPrice = showPromoCode ? cmmc.itemPromoPrice(item) : undefined;
+    return (<div className={cn('flex flex-col justify-start items-start text-sm font-sans', 'border border-background rounded-sm p-1', selected ? 'border-foreground' : '', (itemClicked && !selected ? 'cursor-pointer hover:!border-muted-4' : 'cursor-default '), className)} onClick={() => { itemClicked && itemClicked(item); }}>
+      <div className='flex flex-row justify-between items-center gap-1'>
+        {item.img ? (<Image def={item.img} constrainTo={{ w: imgSizePx, h: imgSizePx }}/>) : ( // placeholder so things align
+        <div style={{ height: imgSizePx, width: imgSizePx }} className='bg-level-3'/>)}
+        <div className='grow leading-tight ml-1'>{renderTitle(item.title)}</div>
+      </div>
+      <div className='flex flex-row items-center justify-between w-full'>
+        <div className='flex flex-row items-center'>
+          <AddToCartWidget variant='minimal' item={item}/>
+          {item.quantity > 1 && (<span className='pl-2.5'>{'@' + formatCurrencyValue(item.price)}</span>)}
+        </div>
+        <div className='flex flex-row gap-1 items-center justify-end'>
+          <span className={promoPrice ? 'line-through	text-muted-2' : ''}>{formatCurrencyValue(item.price * item.quantity)}</span>
+          {promoPrice && <span>{formatCurrencyValue(promoPrice * item.quantity)}</span>}
+        </div>
+      </div>
+    </div>);
+});
+export default CartLineItem;
+//# sourceMappingURL=cart-line-item.jsx.map

package/dist/components/cart/cart-panel/cart-line-item.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"cart-line-item.jsx","sourceRoot":"","sources":["../../../../components/cart/cart-panel/cart-line-item.tsx"],"names":[],"mappings":"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"}

package/dist/components/cart/cart-panel/index.d.ts

@@ -0,0 +1,19 @@
+import React, { type PropsWithChildren } from 'react';
+declare const CartPanel: React.FC<PropsWithChildren & {
+    /** fix size and scroll after 'scrollAfter items in teh cart. */
+    scrollAfter?: number;
+    scrollHeightClx?: string;
+    imgSizePx?: number;
+    className?: string;
+    itemClx?: string;
+    listClx?: string;
+    noItemsClx?: string;
+    totalClx?: string;
+    buttonClx?: string;
+    showPromoCode?: boolean;
+    showShipping?: boolean;
+    selectItems?: boolean;
+    /** if not provided, 'checkout' button will be rendered */
+    handleCheckout?: () => void;
+}>;
+export default CartPanel;

package/dist/components/cart/cart-panel/index.jsx

@@ -0,0 +1,79 @@
+'use client';
+import React, { useLayoutEffect } from 'react';
+import { reaction } from 'mobx';
+import { observer } from 'mobx-react-lite';
+import { Button, ScrollArea } from '@hanzo/ui/primitives';
+import { cn } from '@hanzo/ui/util';
+import { useCommerce } from '../../../service/context';
+import { sendFBEvent, sendGAEvent } from '../../../util/analytics';
+import CartLineItem from './cart-line-item';
+import TotalArea from './total-area';
+const CartPanel = observer(({ 
+/** If provided, 'children' is rendered above the items. eg, a heading. */
+children, scrollAfter = 5, scrollHeightClx = 'h-[70vh]', imgSizePx = 40, className = '', itemClx = '', listClx = '', noItemsClx = '', totalClx = '', buttonClx = '', showPromoCode = false, showShipping = false, selectItems = false, handleCheckout, }) => {
+    const cmmc = useCommerce();
+    useLayoutEffect(() => {
+        if (!cmmc) {
+            return;
+        }
+        if (!cmmc.cartEmpty && !cmmc.currentItem) {
+            cmmc.setCurrentItem(cmmc.cartItems[0].sku);
+        }
+        // return mobx disposer
+        return reaction(() => (cmmc.cartItems.length), (itemCount) => {
+            if (itemCount > 0) {
+                cmmc.setCurrentItem(cmmc.cartItems[0].sku);
+            }
+        });
+    }, []);
+    if (!cmmc) {
+        return <div />;
+    }
+    const _handleCheckout = () => {
+        sendGAEvent('begin_checkout', {
+            currency: 'USD',
+            value: cmmc.cartTotal,
+            items: cmmc.cartItems.map((item) => ({
+                item_id: item.sku,
+                item_name: item.title,
+                item_category: item.familyId,
+                price: item.price,
+                quantity: item.quantity
+            })),
+        });
+        sendFBEvent('InitiateCheckout', {
+            content_ids: cmmc.cartItems.map((item) => item.sku),
+            contents: cmmc.cartItems.map(item => ({
+                id: item.sku,
+                quantity: item.quantity
+            })),
+            num_items: cmmc.cartItems.length,
+            value: cmmc.cartTotal,
+            currency: 'USD',
+        });
+        handleCheckout && handleCheckout();
+    };
+    const itemClicked = (item) => {
+        cmmc.setCurrentItem(item.sku);
+    };
+    const MainStuff = observer(() => (<>
+    {cmmc.cartEmpty ? (<p className={cn('text-center my-3', noItemsClx)}>No items</p>) : (<>
+    {cmmc.cartItems.map((item) => (<CartLineItem key={`mobile-${item.sku}`} imgSizePx={imgSizePx} item={item} className={cn('mb-2', itemClx)} showPromoCode={showPromoCode} itemClicked={selectItems ? itemClicked : undefined} selected={selectItems ? cmmc.currentItem?.sku === item.sku : false}/>))}
+    </>)}
+    <TotalArea clx={totalClx} showPromoCode={showPromoCode} showShipping={showShipping}/>
+  </>));
+    const scrolling = (cmmc.cartItems.length > scrollAfter);
+    return (<div className={cn('border p-4 rounded-lg flex flex-col', className, scrolling ? scrollHeightClx : 'h-auto')}>
+      {children}
+      {scrolling ? (<ScrollArea className={cn('mt-2 w-full shrink py-0', listClx)}>
+          <MainStuff />
+        </ScrollArea>) : (<div className={cn('mt-2 w-full', listClx)}>
+          <MainStuff />
+        </div>)}
+      {handleCheckout && !cmmc.cartEmpty && (<Button onClick={_handleCheckout} variant='primary' rounded='lg' className={cn('mt-12 mx-auto w-full sm:max-w-[220px]', buttonClx)}>
+          Checkout
+        </Button>)}
+    </div>);
+});
+export default CartPanel;
+//# sourceMappingURL=index.jsx.map

package/dist/components/cart/cart-panel/index.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.jsx","sourceRoot":"","sources":["../../../../components/cart/cart-panel/index.tsx"],"names":[],"mappings":"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"}