@hanzo/commerce 7.3.6 → 7.3.7

package/dist/components/item/product-card.jsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { Card, CardContent, CardFooter, CardHeader, CardTitle, MediaStack } from '@hanzo/ui/primitives';
+import { cn } from '@hanzo/ui/util';
+import { formatCurrencyValue } from '../../util';
+import AddToCartWidget from '../add-to-cart-widget';
+const ProductCard = ({ item, className, ...props }) => (<Card className={cn('max-h-[360px] lg:min-w-[200px] max-w-[260px] overflow-hidden', className)} {...props}>
+    <CardHeader className='w-full border-b p-6 min-h-[180px] max-h-[240px] relative'>
+      <MediaStack media={item} constrainTo={{ w: 700, h: 700 }} clx='p-6'/>
+    </CardHeader>
+    <CardContent className='grid gap-2.5 p-4'>
+      <CardTitle className='text-sm sm:text-base flex flex-col justify-start items-center line-clap-3'>
+        {item.title.split(', ').map((e, i) => (<p key={i}>{e}</p>))}
+        <p className='mt-1 font-semibold'>{formatCurrencyValue(item.price)}</p>
+      </CardTitle>
+    </CardContent>
+    <CardFooter className='p-4 flex flex-row justify-center'>
+      <AddToCartWidget item={item}/>
+    </CardFooter>
+  </Card>);
+export default ProductCard;
+//# sourceMappingURL=product-card.jsx.map

package/dist/components/item/product-card.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"product-card.jsx","sourceRoot":"","sources":["../../../components/item/product-card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EACL,IAAI,EACJ,WAAW,EACX,UAAU,EACV,UAAU,EACV,SAAS,EACT,UAAU,EACX,MAAM,sBAAsB,CAAA;AAE7B,OAAO,EAAE,EAAE,EAAE,MAAM,gBAAgB,CAAA;AAEnC,OAAO,EAAE,mBAAmB,EAAE,MAAM,YAAY,CAAA;AAGhD,OAAO,eAAe,MAAM,uBAAuB,CAAA;AAMnD,MAAM,WAAW,GAA+B,CAAC,EAC/C,IAAI,EACJ,SAAS,EACT,GAAG,KAAK,EACT,EAAE,EAAE,CAAC,CACJ,CAAC,IAAI,CACH,SAAS,CAAC,CAAC,EAAE,CAAC,8DAA8D,EAAE,SAAS,CAAC,CAAC,CACzF,IAAI,KAAK,CAAC,CAEV;IAAA,CAAC,UAAU,CAAC,SAAS,CAAC,0DAA0D,CAC9E;MAAA,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC,CAAC,EAAC,CAAC,EAAE,GAAG,EAAE,CAAC,EAAC,GAAG,EAAC,CAAC,CAAC,GAAG,CAAC,KAAK,EAClE;IAAA,EAAE,UAAU,CACZ;IAAA,CAAC,WAAW,CAAC,SAAS,CAAC,kBAAkB,CACvC;MAAA,CAAC,SAAS,CAAC,SAAS,CAAC,2EAA2E,CAC9F;QAAA,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAC3D;QAAA,CAAC,CAAC,CAAC,SAAS,CAAC,oBAAoB,CAAC,CAAC,mBAAmB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CACxE;MAAA,EAAE,SAAS,CACb;IAAA,EAAE,WAAW,CACb;IAAA,CAAC,UAAU,CAAC,SAAS,CAAC,kCAAkC,CACtD;MAAA,CAAC,eAAe,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,EAC9B;IAAA,EAAE,UAAU,CACd;EAAA,EAAE,IAAI,CAAC,CACR,CAAA;AAGD,eAAe,WAAW,CAAA"}

package/dist/components/item-selector/button.d.ts

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

package/dist/components/item-selector/button.jsx

@@ -0,0 +1,65 @@
+'use client';
+import React from 'react';
+import { observer } from 'mobx-react-lite';
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
+import { Image, Label, RadioGroup, ScrollArea } from '@hanzo/ui/primitives';
+import { cn } from '@hanzo/ui/util';
+import { accessItemOptions, formatCurrencyValue } from '../../util';
+import QuantityIndicator from './quantity-indicator';
+const DEFAULT_CONSTRAINT = { h: 36, w: 72 }; // // Apple suggest 42px for clickability
+const ImageRadioGroupItem = React.forwardRef(({ item, constrainTo, className, ...props }, ref) => {
+    const img = item.optionImg ? item.optionImg : item.img;
+    return (<RadioGroupPrimitive.Item ref={ref} data-vaul-no-drag className={cn('ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring', 'focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50', className, 'overflow-hidden', img?.rounded ? `rounded-${img.rounded}` : 'rounded-sm')} {...props} id={item.sku} value={item.sku}>
+      {img ? (<Image def={img} constrainTo={constrainTo} preload className=''/>) : ( // placeholder so things align
+        <div style={{ height: constrainTo.h, width: constrainTo.w }}/>)}
+    </RadioGroupPrimitive.Item>);
+});
+ImageRadioGroupItem.displayName = 'ImageRadioGroupItem';
+const ButtonItemSelector = observer(({ items, selectedItemRef: itemRef, selectSku, clx = '', itemClx = '', soleItemClx = '', scrollable = false, mobile = false, options = {} }) => {
+    const { showPrice, showQuantity, showFamilyInOption, buttonType, horizButtons, showButtonIfOnlyOne } = accessItemOptions(options);
+    const showImage = buttonType !== 'text';
+    const showText = buttonType !== 'image';
+    const showBoth = buttonType === 'image-and-text';
+    const labelAndPrice = (item) => ((showFamilyInOption ? (item.familyTitle + ', ' + item.optionLabel) : item.optionLabel) +
+        (showPrice ? ((showFamilyInOption ? ': ' : ', ') + formatCurrencyValue(item.price)) : ''));
+    const Item = observer(({ item, selected }) => {
+        const textClx = (selected) ? 'text-accent' : 'text-muted';
+        const cursorClx = (selected) ? 'hover:cursor-default' : 'hover:cursor-pointer';
+        const justifyClx = (showBoth) ? '' : 'justify-center';
+        // If no image, the Label must fill the entire button since it has to be
+        // clickable all the way to the border
+        const paddingClx = (showImage) ? (scrollable ? 'px-4 py-2' : 'px-2 py-2') : '';
+        let bgClx = '';
+        let borderClx = '';
+        if (scrollable) {
+            borderClx += (selected) ? 'border-foreground border ' : 'border-b border-muted-2 ';
+        }
+        else if (!showImage) {
+            borderClx += 'border rounded-lg ';
+            borderClx += (selected) ? 'border-foreground ' : 'border-muted-2 ';
+            bgClx += 'hover:bg-level-2';
+        }
+        const outerClx = ['h-10 flex items-center', justifyClx, paddingClx, bgClx, borderClx];
+        return (<div className={cn(...outerClx, itemClx)} data-vaul-no-drag>
+        <ImageRadioGroupItem item={item} constrainTo={DEFAULT_CONSTRAINT} className={cn(cursorClx, (scrollable ? '' : 'border-transparent border-2 data-[state=checked]:border-foreground'), showBoth ? 'mr-2' : (showImage ? '' : 'hidden'))}/>
+        <Label htmlFor={item.sku} className={cn(showQuantity ? 'flex items-center' : 'block', textClx, cursorClx, (showImage ? '' : 'self-stretch w-full flex items-center justify-center px-3 py-2'), (showText ? '' : 'hidden'))}>
+          <div className={showQuantity ? 'grow' : ''}>{labelAndPrice(item)}</div>
+          {showQuantity && (<QuantityIndicator item={item} clx='grow-0 shrink-0 h-[20px] ml-2' iconClx={selected ? 'fill-foreground' : 'fill-muted'} digitClx='font-semibold text-primary-fg leading-none font-sans text-xxs'/>)}
+        </Label>
+      </div>);
+    });
+    return showButtonIfOnlyOne || items.length > 1 ? (<RadioGroup className={cn((scrollable ? 'shrink min-h-0 gap-0' : (mobile ? 'gap-3' : 'gap-1')), (horizButtons ? `grid grid-cols-${items.length} gap-1` : 'flex flex-col'), (mobile && showText) ? 'min-w-pr-50' : '', clx)} onValueChange={selectSku} value={itemRef.item ? itemRef.item.sku : ''} data-vaul-no-drag>
+    {scrollable ? (<ScrollArea className='mt-2 w-full h-full py-0 border border-muted-2' data-vaul-no-drag>
+      {items.map((item) => (<Item item={item} selected={itemRef.item?.sku === item.sku} key={item.sku}/>))}
+      </ScrollArea>) : (<>
+      {items.map((item) => (<Item item={item} selected={itemRef.item?.sku === item.sku} key={item.sku}/>))}
+    </>)}
+    </RadioGroup>) : (<div className={cn(showQuantity ? 'flex items-center' : 'block', soleItemClx)}>
+      <div className={showQuantity ? 'grow' : ''}>
+        {labelAndPrice(items[0])}
+      </div>
+        {showQuantity && (<QuantityIndicator item={items[0]} clx='grow-0 shrink-0 font-semibold text-sm leading-none px-2'/>)}
+    </div>);
+});
+export default ButtonItemSelector;
+//# sourceMappingURL=button.jsx.map

package/dist/components/item-selector/button.jsx.map

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

package/dist/components/item-selector/carousel/index.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import type { Dimensions } from '@hanzo/ui/types';
+import { type CarouselOptions } from '@hanzo/ui/primitives';
+import type { ItemSelectorProps } from '../../../types';
+interface CarouselItemSelectorPropsExt {
+    constrainTo: Dimensions;
+    options?: CarouselOptions;
+    /** Do not show Family and / or Item title and Price */
+    imageOnly?: boolean;
+}
+declare const CarouselItemSelector: React.FC<ItemSelectorProps>;
+export { type CarouselItemSelectorPropsExt, CarouselItemSelector as default };

package/dist/components/item-selector/carousel/index.jsx

@@ -0,0 +1,101 @@
+'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 } from '../../../util';
+import QuantityIndicator from '../quantity-indicator';
+import ItemCarouselSlider from './slider';
+const DEFAULT_CONSTRAINT = { w: 250, h: 250 };
+const ItemSlide = ({ item, constrainTo, clx = '' }) => (<CarouselItem className={cn('p-2 flex flex-col justify-center items-center', clx)}>
+    <MediaStack media={item} constrainTo={constrainTo} clx='my-4'/>
+  </CarouselItem>);
+const CarouselItemSelector = observer(({ items, selectSku, selectedItemRef: itemRef, clx = '', itemClx = '', options = {}, ext = {
+    options: { loop: true },
+    constrainTo: DEFAULT_CONSTRAINT,
+    imageOnly: false
+} }) => {
+    const { showPrice, showQuantity, showFamilyInOption, showByline, showSlider, } = accessItemOptions(options);
+    const elbaApiRef = useRef(undefined);
+    const scrollToRef = useRef(undefined);
+    const dontRespondRef = useRef(false);
+    const setApi = (api) => { elbaApiRef.current = api; };
+    const setScrollTo = (scrollTo) => { scrollToRef.current = scrollTo; };
+    const carouselOptions = 'options' in ext ? ext.options : undefined;
+    const constrainTo = 'constrainTo' in ext ? ext.constrainTo : DEFAULT_CONSTRAINT;
+    const imageOnly = 'imageOnly' in ext ? ext.imageOnly : false;
+    const onSelect = useCallback((emblaApi) => {
+        if (dontRespondRef.current) {
+            dontRespondRef.current = false;
+            return;
+        }
+        const index = emblaApi.selectedScrollSnap();
+        if (index !== -1) {
+            selectSku(items[index].sku);
+            if (scrollToRef.current) {
+                scrollToRef.current(index);
+            }
+        }
+        dontRespondRef.current = false;
+    }, [scrollToRef.current]);
+    useEffect(() => {
+        return reaction(() => (itemRef.item), (item) => {
+            if (elbaApiRef.current) {
+                const index = items.findIndex((el) => (el.sku === item?.sku));
+                if (index !== -1) {
+                    dontRespondRef.current = true;
+                    elbaApiRef.current.scrollTo(index);
+                }
+            }
+        });
+    }, []);
+    const optionLabel = () => (showFamilyInOption ?
+        (itemRef.item?.familyTitle + ', ' + itemRef.item?.optionLabel)
+        :
+            itemRef.item?.optionLabel);
+    const debugBorder = (c) => {
+        return '';
+        switch (c) {
+            case 'r': return ' border border-[#ffaaaa] ';
+            case 'g': return ' border border-[#aaffaa] ';
+            case 'b': return ' border border-[#aaaaff] ';
+        }
+    };
+    const onScrollIndexChange = (index) => {
+        dontRespondRef.current = true;
+        selectSku(items[index].sku);
+        elbaApiRef.current?.scrollTo(index);
+    };
+    return (<div className={cn('w-full flex flex-col items-center', clx)}>
+      <Carousel options={showSlider ? { ...carouselOptions, loop: false } : carouselOptions} className={'w-full px-2' + debugBorder('r')} onCarouselSelect={onSelect} setApi={setApi}>
+        <CarouselContent>
+        {items.map((item) => (<ItemSlide key={item.sku} item={item} constrainTo={constrainTo} clx={itemClx}/>))}
+        </CarouselContent>
+        {!showSlider && (<>
+          <CarouselPrevious className='left-1'/>
+          <CarouselNext className='right-1'/>
+        </>)}
+      </Carousel>
+     
+      {(!imageOnly && itemRef.item) && (<>
+        <ApplyTypography className='flex flex-col items-center [&>*]:!m-0 !gap-1 '>
+          <div className={'flex items-center gap-1 [&>*]:!m-0 ' + debugBorder('g') +
+                (showFamilyInOption ? 'flex-col' : 'flex-row')}>
+            <h6 className='font-semibold'>
+              {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(itemRef.item.price)}</p>)}
+              {showQuantity && (<QuantityIndicator item={itemRef.item} 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 && itemRef.item.byline && (<p>{itemRef.item.byline}</p>)}
+        </ApplyTypography>
+        {showSlider && items.length > 1 && (<ItemCarouselSlider clx='mt-5 w-[320px]' numStops={items.length} setScrollTo={setScrollTo} onIndexChange={onScrollIndexChange}/>)}
+      </>)}
+    </div>);
+});
+export { CarouselItemSelector as default };
+//# sourceMappingURL=index.jsx.map

package/dist/components/item-selector/carousel/index.jsx.map

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

package/dist/components/item-selector/carousel/slider.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+declare const ItemCarouselSlider: React.FC<{
+    clx?: string;
+    setScrollTo: (scrollTo: (index: number) => void) => void;
+    onIndexChange: (i: number) => void;
+    numStops: number;
+}>;
+export default ItemCarouselSlider;

package/dist/components/item-selector/carousel/slider.jsx

@@ -0,0 +1,11 @@
+'use client';
+import React, { useEffect, useState } from 'react';
+import { Slider } from '@hanzo/ui/primitives';
+const ItemCarouselSlider = ({ clx = '', setScrollTo, onIndexChange, numStops, }) => {
+    const [index, setIndex] = useState(0);
+    useEffect(() => { setScrollTo(setIndex); }, [setScrollTo]);
+    const onValueChange = (v) => { setIndex(v[0]); onIndexChange(v[0]); };
+    return (<Slider className={clx} thumbClx='w-8 border-muted border-2 bg-level-1 focus-visible:ring-0 focus-visible:ring-offset-0 transition-none' trackBgClx='bg-level-3' rangeBgClx='bg-level-3' thumbSlidingClx='bg-muted-2' defaultValue={[0]} min={0} max={numStops - 1} step={1} value={[index]} onValueChange={onValueChange}/>);
+};
+export default ItemCarouselSlider;
+//# sourceMappingURL=slider.jsx.map

package/dist/components/item-selector/carousel/slider.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"slider.jsx","sourceRoot":"","sources":["../../../../components/item-selector/carousel/slider.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;AACZ,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAElD,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAA;AAE7C,MAAM,kBAAkB,GAKnB,CAAC,EACJ,GAAG,GAAC,EAAE,EACN,WAAW,EACX,aAAa,EACb,QAAQ,GACT,EAAE,EAAE;IAEH,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAS,CAAC,CAAC,CAAA;IAC7C,SAAS,CAAC,GAAG,EAAE,GAAG,WAAW,CAAC,QAAQ,CAAC,CAAA,CAAC,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAA;IAEzD,MAAM,aAAa,GAAG,CAAC,CAAW,EAAE,EAAE,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA,CAAC,CAAC,CAAA;IAE9E,OAAO,CACL,CAAC,MAAM,CACL,SAAS,CAAC,CAAC,GAAG,CAAC,CACf,QAAQ,CAAC,uGAAuG,CAChH,UAAU,CAAC,YAAY,CACvB,UAAU,CAAC,YAAY,CACvB,eAAe,CAAC,YAAY,CAC5B,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAClB,GAAG,CAAC,CAAC,CAAC,CAAC,CACP,GAAG,CAAC,CAAC,QAAQ,GAAG,CAAC,CAAC,CAClB,IAAI,CAAC,CAAC,CAAC,CAAC,CACR,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CACf,aAAa,CAAC,CAAC,aAAa,CAAC,EAC7B,CACH,CAAA;AACH,CAAC,CAAA;AAED,eAAe,kBAAkB,CAAA"}

package/dist/components/item-selector/index.d.ts

@@ -0,0 +1,2 @@
+export { default as ButtonItemSelector } from './button';
+export { default as CarouselItemSelector, type CarouselItemSelectorPropsExt } from './carousel';

package/dist/components/item-selector/index.js

@@ -0,0 +1,3 @@
+export { default as ButtonItemSelector } from './button';
+export { default as CarouselItemSelector } from './carousel';
+//# sourceMappingURL=index.js.map

package/dist/components/item-selector/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../components/item-selector/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,UAAU,CAAA;AACxD,OAAO,EACL,OAAO,IAAI,oBAAoB,EAEhC,MAAM,YAAY,CAAA"}

package/dist/components/item-selector/quantity-indicator.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { LineItem } from '../../types';
+declare const QuantityIndicator: React.FC<{
+    item: LineItem;
+    clx?: string;
+    iconClx?: string;
+    digitClx?: string;
+}>;
+export default QuantityIndicator;

package/dist/components/item-selector/quantity-indicator.jsx

@@ -0,0 +1,23 @@
+'use client';
+import React from 'react';
+import { observer } from 'mobx-react-lite';
+import {} from 'lucide-react';
+import { cn } from '@hanzo/ui/util';
+// Generalize this.
+const BagIcon = (props) => (<svg fill="currentColor" viewBox='0 0 20 23' {...props}>
+    <path fillRule="evenodd" d="M5 5a5 5 0 0 1 10 0v1h-2V5a3 3 0 1 0-6 0v1H5V5Zm0 1v4h2V6h6v4h2V6h3.5a1 1 0 0 1 1 1v15a1 1 0 0 1-1 1h-17a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1H5Z" clipRule="evenodd"/>
+  </svg>);
+const QuantityIndicator = observer(({ item, clx = '', iconClx = '', digitClx = '' }) => {
+    if (!item.isInCart) {
+        return <div />;
+    }
+    return (<div className={cn('relative aspect-square flex items-center justify-center', clx)}>
+      <div className={cn('z-above-content flex flex-col justify-center items-center', 'absolute left-0 right-0 top-0 bottom-0', digitClx)}>
+        <div className='h-[1px] w-full'/>
+        <div style={{ color: 'black' /* tailwind bug */ }}>{item.quantity}</div>
+      </div>
+      <BagIcon className={cn('relative -top-[12%] h-full ', iconClx)} aria-hidden="true"/>
+    </div>);
+}); // -top-[3px] 
+export default QuantityIndicator;
+//# sourceMappingURL=quantity-indicator.jsx.map

package/dist/components/item-selector/quantity-indicator.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"quantity-indicator.jsx","sourceRoot":"","sources":["../../../components/item-selector/quantity-indicator.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;AACZ,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAA;AAE1C,OAAO,EAAoB,MAAM,cAAc,CAAA;AAE/C,OAAO,EAAE,EAAE,EAAE,MAAM,gBAAgB,CAAA;AAGjC,mBAAmB;AACrB,MAAM,OAAO,GAA0B,CAAC,KAAkB,EAAE,EAAE,CAAC,CAC7D,CAAC,GAAG,CAAC,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,WAAW,CAAC,IAAI,KAAK,CAAC,CACrD;IAAA,CAAC,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAC,CAAC,2IAA2I,CAAC,QAAQ,CAAC,SAAS,EAC3L;EAAA,EAAE,GAAG,CAAC,CACP,CAAA;AAED,MAAM,iBAAiB,GAKlB,QAAQ,CAAC,CAAC,EACb,IAAI,EACJ,GAAG,GAAC,EAAE,EACN,OAAO,GAAC,EAAE,EACV,QAAQ,GAAC,EAAE,EACZ,EAAE,EAAE;IAEH,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;QACnB,OAAO,CAAC,GAAG,CAAC,AAAD,EAAG,CAAA;IAChB,CAAC;IAED,OAAO,CACL,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,yDAAyD,EAAE,GAAG,CAAC,CAAC,CACjF;MAAA,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC,EAAE,CAChB,2DAA2D,EAC3D,wCAAwC,EACxC,QAAQ,CACT,CAAC,CACA;QAAA,CAAC,GAAG,CAAC,SAAS,CAAC,gBAAgB,EAC/B;QAAA,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,EAAC,KAAK,EAAE,OAAO,CAAC,kBAAkB,EAAC,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE,GAAG,CACvE;MAAA,EAAE,GAAG,CACL;MAAA,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,6BAA6B,EAAE,OAAO,CAAG,CAAC,CAAC,WAAW,CAAC,MAAM,EACtF;IAAA,EAAE,GAAG,CAAC,CACP,CAAA;AACH,CAAC,CAAC,CAAA,CAAC,cAAc;AAEjB,eAAe,iBAAiB,CAAA"}

package/dist/components/node-tabs/index.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import type { CategoryNode, StringMutator, StringArrayMutator } from '../../types';
+declare const NodeTabs: React.FC<{
+    levelNodes: CategoryNode[];
+    mutator: StringMutator | StringArrayMutator;
+    multiple?: boolean;
+    className?: string;
+    buttonClx?: string;
+    itemClx?: string;
+    mobile?: boolean;
+    tabSize?: string;
+    show?: 'image' | 'label' | 'image-and-label';
+}>;
+export default NodeTabs;

package/dist/components/node-tabs/index.jsx

@@ -0,0 +1,48 @@
+'use client';
+import React, { useState } from 'react';
+import { ToggleGroup, ToggleGroupItem } from "@hanzo/ui/primitives";
+import { cn } from '@hanzo/ui/util';
+import NodeImage from './node-image';
+const NodeTabs = ({ levelNodes, mutator, multiple = false, buttonClx = '', itemClx = '', className = '', mobile = false, tabSize, show = 'image-and-label' }) => {
+    const [last, setLast] = useState(undefined);
+    const handleChangeMultiple = (selected) => {
+        mutator.set(selected);
+        setLast(selected.length === 1 ? selected[0] : undefined);
+    };
+    const handleChangeSingle = (selected) => {
+        mutator.set(selected);
+        if (selected) {
+            setLast(selected);
+        }
+    };
+    const roundedToSpread = {};
+    if (multiple) {
+        roundedToSpread.rounded = 'xl';
+    }
+    const val = multiple ?
+        mutator.get()
+        :
+            mutator.get();
+    return (<ToggleGroup type={multiple ? 'multiple' : 'single'} value={val} variant='default' size={tabSize ? tabSize : (mobile ? 'sm' : 'default')} onValueChange={multiple ? handleChangeMultiple : handleChangeSingle} className={className} {...roundedToSpread}>
+    {levelNodes.map((treeNode, index) => {
+            const roundedToSpread = {};
+            if (!multiple) {
+                roundedToSpread.rounded = 'none';
+                if (index === 0) {
+                    roundedToSpread.rounded = 'llg';
+                }
+                else if (index === levelNodes.length - 1) {
+                    roundedToSpread.rounded = 'rlg';
+                }
+            }
+            return (<ToggleGroupItem key={treeNode.skuToken} value={treeNode.skuToken} disabled={(last && last === treeNode.skuToken || treeNode.skuToken === mutator.get())} aria-label={`Select ${treeNode.label}`} {...roundedToSpread} className={buttonClx}>
+          <span className={cn('flex flex-row justify-center gap-1 h-6 items-center', itemClx)}>
+            {!(show === 'label') && (<NodeImage treeNode={treeNode}/>)}
+            {(!(show === 'image') || !treeNode.img) && (<span className='whitespace-nowrap'>{treeNode.label}</span>)}
+          </span>
+        </ToggleGroupItem>);
+        })}
+    </ToggleGroup>);
+};
+export default NodeTabs;
+//# sourceMappingURL=index.jsx.map

package/dist/components/node-tabs/index.jsx.map

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

package/dist/components/node-tabs/node-image.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import type { CategoryNode } from '../../types';
+declare const NodeImage: React.FC<{
+    treeNode: CategoryNode;
+}>;
+export default NodeImage;

package/dist/components/node-tabs/node-image.jsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import Image from 'next/image';
+const ICON_SIZE = 20;
+const NodeImage = ({ treeNode: { img, imgAR: ar, label } }) => {
+    if (!img) {
+        return null;
+    }
+    // treat as URL
+    return (typeof img === 'string') ? (<Image src={img} alt={`Toggle ${label}`} className={'block mr-1 '} width={ar ? ar * ICON_SIZE : ICON_SIZE} height={ICON_SIZE}/>) : img;
+};
+export default NodeImage;
+//# sourceMappingURL=node-image.jsx.map

package/dist/components/node-tabs/node-image.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"node-image.jsx","sourceRoot":"","sources":["../../../components/node-tabs/node-image.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,KAAK,MAAM,YAAY,CAAA;AAI9B,MAAM,SAAS,GAAG,EAAE,CAAA;AAEpB,MAAM,SAAS,GAEV,CAAC,EACJ,QAAQ,EAAE,EACR,GAAG,EACH,KAAK,EAAE,EAAE,EACT,KAAK,EACN,EACF,EAAE,EAAE;IAEH,IAAI,CAAC,GAAG,EAAE,CAAC;QAAC,OAAO,IAAI,CAAA;IAAC,CAAC;IACvB,eAAe;IACjB,OAAO,CAAC,OAAO,GAAG,KAAK,QAAQ,CAAC,CAAC,CAAC,CAAC,CACjC,CAAC,KAAK,CACJ,GAAG,CAAC,CAAC,GAAa,CAAC,CACnB,GAAG,CAAC,CAAC,UAAU,KAAK,EAAE,CAAC,CACvB,SAAS,CAAC,CAAC,aAAa,CAAC,CACzB,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAE,EAAE,GAAG,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CACxC,MAAM,CAAC,CAAC,SAAS,CAAC,EAClB,CACH,CAAC,CAAC,CAAE,GAAuB,CAAA;AAC9B,CAAC,CAAA;AAED,eAAe,SAAS,CAAA"}

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+export * from './service/context';
+export * from './components';
+export type { StandaloneServiceOptions as ServiceOptions } from './service/impls/standalone';
+export { useSyncSkuParamWithCurrentItem, getFacetValuesMutator, formatCurrencyValue, ProductMediaAccessor, LineItemRef } from './util';
+export * from './util/selection-ui-specifiers';

package/dist/index.js

@@ -0,0 +1,5 @@
+export * from './service/context';
+export * from './components';
+export { useSyncSkuParamWithCurrentItem, getFacetValuesMutator, formatCurrencyValue, ProductMediaAccessor, LineItemRef } from './util';
+export * from './util/selection-ui-specifiers';
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAA;AACjC,cAAc,cAAc,CAAA;AAG5B,OAAO,EACL,8BAA8B,EAC9B,qBAAqB,EACrB,mBAAmB,EACnB,oBAAoB,EACpB,WAAW,EACZ,MAAM,QAAQ,CAAA;AAEf,cAAc,gCAAgC,CAAA"}

package/dist/service/context.d.ts

@@ -0,0 +1,8 @@
+import React, { type PropsWithChildren } from 'react';
+import type CommerceService from '../types/commerce-service';
+import type { CommerceConfig } from '../types';
+declare const useCommerce: () => CommerceService;
+declare const CommerceProvider: React.FC<PropsWithChildren & {
+    config: CommerceConfig;
+}>;
+export { useCommerce, CommerceProvider };

package/dist/service/context.jsx

@@ -0,0 +1,20 @@
+'use client';
+import React, { createContext, useContext, useRef, } from 'react';
+// https://dev.to/ivandotv/mobx-server-side-rendering-with-next-js-4m18
+import { enableStaticRendering } from 'mobx-react-lite';
+enableStaticRendering(typeof window === "undefined");
+import { getInstance } from './impls/standalone';
+const CommerceContext = createContext(undefined);
+const useCommerce = () => {
+    return useContext(CommerceContext);
+};
+const CommerceProvider = ({ children, config }) => {
+    // TODO: Inject Promo fixture here from siteDef
+    const service = getInstance(config);
+    const valueRef = useRef(service);
+    return (<CommerceContext.Provider value={valueRef.current}>
+      {children}
+    </CommerceContext.Provider>);
+};
+export { useCommerce, CommerceProvider };
+//# sourceMappingURL=context.jsx.map

package/dist/service/context.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.jsx","sourceRoot":"","sources":["../../service/context.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;AACZ,OAAO,KAAK,EAAE,EACZ,aAAa,EACb,UAAU,EACV,MAAM,GAEP,MAAM,OAAO,CAAA;AAEd,uEAAuE;AACvE,OAAO,EAAE,qBAAqB,EAAE,MAAM,iBAAiB,CAAA;AACvD,qBAAqB,CAAC,OAAO,MAAM,KAAK,WAAW,CAAC,CAAA;AAIpD,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAA;AAEhD,MAAM,eAAe,GAAG,aAAa,CAA8B,SAAS,CAAC,CAAA;AAE7E,MAAM,WAAW,GAAG,GAAoB,EAAE;IACxC,OAAO,UAAU,CAAC,eAAe,CAAoB,CAAA;AACvD,CAAC,CAAA;AAED,MAAM,gBAAgB,GAEjB,CAAC,EACJ,QAAQ,EACR,MAAM,EACP,EAAE,EAAE;IAED,+CAA+C;IACjD,MAAM,OAAO,GAAG,WAAW,CAAC,MAAM,CAAC,CAAA;IACnC,MAAM,QAAQ,GAAG,MAAM,CAAkB,OAAO,CAAC,CAAA;IAEjD,OAAO,CACL,CAAC,eAAe,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,QAAQ,CAAC,OAAO,CAAC,CAChD;MAAA,CAAC,QAAQ,CACX;IAAA,EAAE,eAAe,CAAC,QAAQ,CAAC,CAC5B,CAAA;AACH,CAAC,CAAA;AAED,OAAO,EACL,WAAW,EACX,gBAAgB,EACjB,CAAA"}

package/dist/service/debug.d.ts

@@ -0,0 +1,10 @@
+import type { CategoryNode, CategoryNodeRole, Family, LineItem } from '../types';
+export declare const categoryNodeDump: (node: CategoryNode, level?: number) => void;
+export declare const selectedFamiliesDump: (result: Family[]) => string;
+export declare const peekDump: (result: {
+    role: CategoryNodeRole;
+    family: Family | undefined;
+    families: Family[] | undefined;
+    node: CategoryNode | undefined;
+    item: LineItem | undefined;
+} | string) => string;

package/dist/service/debug.js

@@ -0,0 +1,30 @@
+// Node recursion
+export const categoryNodeDump = (node, level = 0) => {
+    const spacers = [];
+    for (let i = 0; i < level; i++) {
+        spacers.push('----');
+    }
+    console.log("NODE:" + spacers.join(''), node.skuToken);
+    node.subNodes?.forEach((sn) => { categoryNodeDump(sn, level + 1); });
+};
+export const selectedFamiliesDump = (result) => {
+    const toDisplay = result.map((c) => (c.id));
+    return JSON.stringify(toDisplay, null, 2);
+};
+export const peekDump = (result) => {
+    if (typeof result === 'string') {
+        return result;
+    }
+    const toDisplay = {
+        role: result.role,
+        item: result.item ? result.item.sku : 'UNDEF',
+        family: result.family ? result.family.id : 'UNDEF',
+        families: result.families ? result.families.map((f) => (f.id)) : 'UNDEF',
+        node: result.node ?
+            (result.node.skuToken + (result.node.label ? (': ' + result.node.label) : ''))
+            :
+                'UNDEF'
+    };
+    return JSON.stringify(toDisplay, null, 2);
+};
+//# sourceMappingURL=debug.js.map

package/dist/service/debug.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"debug.js","sourceRoot":"","sources":["../../service/debug.ts"],"names":[],"mappings":"AAEE,iBAAiB;AACnB,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,IAAkB,EAAE,QAAgB,CAAC,EAAQ,EAAE;IAC9E,MAAM,OAAO,GAAa,EAAE,CAAA;IAC5B,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,KAAK,EAAE,CAAC,EAAE,EAAE,CAAC;QAC/B,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,CAAA;IACtB,CAAC;IACD,OAAO,CAAC,GAAG,CAAC,OAAO,GAAG,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAA;IACtD,IAAI,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAC,EAAgB,EAAE,EAAE,GAAE,gBAAgB,CAAC,EAAE,EAAE,KAAK,GAAG,CAAC,CAAC,CAAA,CAAA,CAAC,CAAC,CAAA;AACjF,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,MAAgB,EAAU,EAAE;IAC/D,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAA;IAC3C,OAAO,IAAI,CAAC,SAAS,CAAC,SAAS,EAAE,IAAI,EAAE,CAAC,CAAC,CAAA;AAC3C,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,MAMf,EAAU,EAAE;IAEpB,IAAI,OAAO,MAAM,KAAK,QAAQ,EAAE,CAAC;QAC/B,OAAO,MAAM,CAAA;IACf,CAAC;IAED,MAAM,SAAS,GAAG;QAChB,IAAI,EAAE,MAAM,CAAC,IAAI;QACjB,IAAI,EAAE,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,OAAO;QAC7C,MAAM,EAAE,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC,CAAC,OAAO;QAClD,QAAQ,EAAE,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO;QACxE,IAAI,EAAE,MAAM,CAAC,IAAI,CAAC,CAAC;YACjB,CAAC,MAAM,CAAC,IAAI,CAAC,QAAQ,GAAG,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,GAAG,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;YAC9E,CAAC;gBACD,OAAO;KACV,CAAA;IACD,OAAO,IAAI,CAAC,SAAS,CAAC,SAAS,EAAE,IAAI,EAAE,CAAC,CAAC,CAAA;AAC3C,CAAC,CAAA"}

package/dist/service/impls/standalone/actual-line-item.d.ts

@@ -0,0 +1,40 @@
+import type { ImageDef, MediaTransform, VideoDef } from '@hanzo/ui/types';
+import type { Product, LineItem, CommerceService } from '../../../types';
+interface ActualLineItemSnapshot {
+    sku: string;
+    familyId: string;
+    title: string;
+    price: number;
+    quantity: number;
+    timeAdded: number;
+    timeModified: number;
+}
+declare class ActualLineItem implements LineItem {
+    qu: number;
+    id: string;
+    sku: string;
+    fullTitle?: string;
+    optionLabel: string;
+    optionLabelShort?: string;
+    familyTitle: string;
+    familyId: string;
+    byline?: string;
+    desc?: string;
+    price: number;
+    img?: ImageDef;
+    video?: VideoDef;
+    animation?: string;
+    mediaTransform?: MediaTransform;
+    optionImg?: ImageDef;
+    timeAdded: number;
+    timeModified: number;
+    constructor(prod: Product, snap?: ActualLineItemSnapshot);
+    get title(): string;
+    takeSnapshot: (cmmc: CommerceService) => ActualLineItemSnapshot;
+    get canDecrement(): boolean;
+    get quantity(): number;
+    get isInCart(): boolean;
+    increment(): void;
+    decrement(): void;
+}
+export { type ActualLineItemSnapshot, ActualLineItem as default };