@libreapps/commerce 7.5.1

package/dist/components/buy/buy-card.js

@@ -0,0 +1,109 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { useRef, useEffect } from 'react';
+import { reaction } from 'mobx';
+import { observer } from 'mobx-react-lite';
+import { cn } from '@libreapps/ui/util';
+import { ApplyTypography, MediaStack } from '@libreapps/ui/primitives';
+import { useCommerce } from '../../service/context';
+import * as pathUtils from '../../service/path-utils';
+import { getFacetValuesMutator, ObsStringMutator } from '../../util';
+import NodeTabs from '../node-tabs';
+import AddToCartWidget from '../add-to-cart-widget';
+const BuyCard = observer(({ skuPath, scrollAfter = 5, scrollHeightClx = 'h-[80vh]', clx = '', famWidgetClx = '', addWidgetClx = '', selector: Selector, selectorProps = {
+    clx: '',
+    soleItemClx: '',
+    itemClx: '',
+    ext: {}
+}, familyTabAs = 'image-and-label', showItemMedia = true, allVariants = false, mobile = false, onQuantityChanged, }) => {
+    const cmmc = useCommerce();
+    const inst = useRef(undefined);
+    useEffect(() => {
+        let requestedFamily = cmmc.getFamilyById(skuPath);
+        let requestedNode = requestedFamily ? undefined : cmmc.getNodeAtPath(skuPath);
+        let initialFamily = undefined;
+        const { paths, level } = pathUtils.getSelectedPaths(skuPath);
+        if (level === 0) {
+            throw new Error('BuyCard.useEffect(): must specify at least at least one Level in skuPath!');
+        }
+        if (requestedFamily) {
+            if (allVariants && level >= 2) {
+                // select all siblings of requestedFamily.
+                // ie, go one level back
+                delete paths[level];
+                initialFamily = requestedFamily;
+                requestedFamily = undefined;
+                requestedNode = cmmc.getNodeAtPath(pathUtils.getParentPath(skuPath));
+            }
+        }
+        else {
+            // select siblings paths
+            if (allVariants) {
+                paths[level + 1] = [...requestedNode.subNodes.map((node) => (node.skuToken))];
+            }
+            // Actually select the the first fam at the fam level, 
+            else {
+                paths[level + 1] = [requestedNode.subNodes[0].skuToken];
+            }
+        }
+        const selectedFams = cmmc.selectPaths(paths);
+        initialFamily = initialFamily ? initialFamily : (requestedFamily ? requestedFamily : selectedFams[0]);
+        cmmc.setCurrentItem(initialFamily.products[0].sku);
+        const currentFamTokenMutator = new ObsStringMutator(pathUtils.lastToken(initialFamily.id));
+        inst.current = {
+            level,
+            requestedFamily,
+            requestedNode,
+            currentFamTokenMutator,
+            disposers: []
+        };
+        if (!allVariants) {
+            inst.current?.disposers.push(reaction(() => {
+                const fams = cmmc.selectedFamilies;
+                return (fams.length > 0) ? fams[0].id : undefined;
+            }, (famId) => {
+                if (famId && famId !== cmmc.currentItem?.familyId) {
+                    const fam = cmmc.getFamilyById(famId);
+                    if (fam) {
+                        cmmc.setCurrentItem(fam.products[0].sku);
+                    }
+                }
+            }));
+        }
+        return () => {
+            inst.current?.disposers.forEach((d) => { d(); });
+        };
+    }, []);
+    const setFamilyPath = (pathValue) => {
+        if (inst.current?.currentFamTokenMutator.get() !== pathValue) {
+            inst.current?.currentFamTokenMutator.set(pathValue);
+        }
+        const found = cmmc.selectedItems.find((item) => (item.familyId.endsWith(pathValue)));
+        if (found) {
+            cmmc.setCurrentItem(found.sku);
+        }
+    };
+    const selectSku = (sku) => {
+        cmmc.setCurrentItem(sku);
+        const pathValue = pathUtils.lastToken(cmmc.currentItem.familyId);
+        if (pathValue !== inst.current?.currentFamTokenMutator.get()) {
+            inst.current?.currentFamTokenMutator.set(pathValue);
+        }
+    };
+    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;
+    const TitleArea = ({ title, byline, clx = '' }) => (_jsxs(ApplyTypography, { className: clx, children: [_jsx("h3", { children: title }), byline && (_jsx("h6", { children: byline }))] }));
+    const scroll = !!(itemsToShow && itemsToShow.length > scrollAfter);
+    return (_jsxs("div", { className: cn('px-4 md:px-6 pt-3 pb-4 flex flex-col items-center min-h-[60vh]', clx, scroll ? scrollHeightClx : 'h-auto'), children: [inst.current?.requestedNode && (_jsxs(_Fragment, { children: [_jsxs(ApplyTypography, { className: 'mb-2 ' + (scroll ? 'shrink-0' : ''), children: [_jsx("h3", { children: inst.current.requestedNode.label }), inst.current.requestedNode.subNodesLabel && (_jsx("h6", { className: '!text-center font-bold text-muted mt-3', children: inst.current.requestedNode.subNodesLabel }))] }), _jsx(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
+                        (scroll ? 'shrink-0' : ''), famWidgetClx), mobile: mobile, mutator: allVariants ?
+                            {
+                                get: () => (inst.current.currentFamTokenMutator.get()),
+                                set: setFamilyPath
+                            }
+                            :
+                                getFacetValuesMutator(inst.current.level + 1, cmmc), itemClx: 'flex-col h-auto gap-0 py-1 px-3', buttonClx: 'h-full ' +
+                            '!border-level-3', levelNodes: inst.current.requestedNode.subNodes, show: familyTabAs })] })), !inst.current?.requestedNode && famTitle && (_jsx(TitleArea, { title: famTitle, clx: '' })), (cmmc.currentItem && showItemMedia) && (_jsx(MediaStack, { media: cmmc.currentItem, constrainTo: { w: 200, h: 200 }, clx: (scroll ? 'shrink-0' : '') })), itemsToShow && (_jsx(Selector, { items: itemsToShow, selectedItemRef: cmmc, selectSku: selectSku, ...selectorProps, scrollable: scroll })), (cmmc.currentItem) && (_jsx(AddToCartWidget, { item: cmmc.currentItem, onQuantityChanged: onQuantityChanged, className: cn('min-w-[160px] mx-auto mt-4', (scroll ? 'shrink-0' : ''), addWidgetClx) }))] }));
+});
+export default BuyCard;
+//# sourceMappingURL=buy-card.js.map

package/dist/components/buy/buy-card.js.map

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

package/dist/components/buy/carousel-buy-card.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+declare const CarouselBuyCard: React.FC<{
+    skuPath: string;
+    checkoutButton: React.ReactNode;
+    clx?: string;
+    selectorClx?: string;
+    addBtnClx?: string;
+    buttonsAreaClx?: string;
+    mobile?: boolean;
+    onQuantityChanged?: (sku: string, oldV: number, newV: number) => void;
+}>;
+export default CarouselBuyCard;

package/dist/components/buy/carousel-buy-card.js

@@ -0,0 +1,94 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useRef, useEffect, useState } from 'react';
+import { observer } from 'mobx-react-lite';
+import { cn } from '@libreapps/ui/util';
+import { useCommerce } from '../../service/context';
+import { getSelectionUISpecifier } from '../../util';
+import { CarouselItemSelector, ButtonItemSelector } from '../item-selector';
+import SingleFamilySelector from './single-family-selector';
+import { FamilyCarousel, AllVariantsCarousel } from './multi-family';
+import AddToCartWidget from '../add-to-cart-widget';
+const SCROLL = {
+    scrollAfter: 5,
+    scrollHeightClx: 'h-[65vh]'
+};
+const MEDIA_CONSTRAINT = { w: 200, h: 200 };
+const sortItems = (items, sort) => (((sort === 'asc') ?
+    items.sort((a, b) => (a.price - b.price))
+    :
+        ((sort === 'desc') ?
+            items.sort((a, b) => (b.price - a.price))
+            :
+                items)));
+const CarouselBuyCard = ({ skuPath, checkoutButton, clx = '', selectorClx = '', addBtnClx = '', buttonsAreaClx = '', mobile = false, onQuantityChanged, }) => {
+    const cmmc = useCommerce();
+    const r = useRef(undefined);
+    const [changeMeToRerender, setChangeMeToRerender] = useState(false);
+    useEffect(() => {
+        if (!skuPath || skuPath.length === 0) {
+            // The component is being hidden (w an amination)
+            // keep things the same so no layout jump
+            return;
+        }
+        const peek = cmmc.peek(skuPath);
+        if (typeof peek === 'string') {
+            throw new Error(peek);
+        }
+        if (peek.role === 'non-outermost') {
+            throw new Error(`BuyCard: skuPath ${skuPath} isn't an outermost tree node or product family!`);
+        }
+        const uiSpec = getSelectionUISpecifier(skuPath);
+        r.current = {
+            ...peek,
+            node: peek.node, // else exception was thrown.
+            uiSpec,
+        };
+        if (peek.role === 'single-family') {
+            const sort = () => {
+                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;
+            const Selector = (uiSpec.singleFamily?.type === 'buttons') ? ButtonItemSelector : CarouselItemSelector;
+            const selOptions = uiSpec.singleFamily?.options;
+            r.current.single = {
+                items: sortItems(items, sort()),
+                Selector,
+                selOptions,
+                scrollable: !!(items.length > SCROLL.scrollAfter),
+                showItemMedia: uiSpec.singleFamily?.type !== 'carousel'
+            };
+            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 MultiFamilyUI = ({ Selector, itemOptions, selectorOptions, families, parent, clx = '' }) => (_jsx(Selector, { families: families, parent: parent, clx: clx, itemOptions: itemOptions, selectorOptions: selectorOptions, mediaConstraint: MEDIA_CONSTRAINT, mobile: mobile }));
+    const Buttons = observer(({ clx = '' }) => (cmmc.currentItem ? (_jsxs("div", { className: clx, children: [_jsx(AddToCartWidget, { item: cmmc.currentItem, onQuantityChanged: onQuantityChanged, variant: cmmc.cartEmpty ? 'primary' : 'outline', className: addBtnClx }), !cmmc.cartEmpty && checkoutButton] })) : null));
+    return (_jsxs("div", { className: cn('px-4 md:px-6 pt-3 pb-4 flex flex-col gap-1 items-center', r.current?.single?.scrollable ? SCROLL.scrollHeightClx : 'h-auto', clx), children: [r.current?.single ? (_jsx(SingleFamilySelector, { ...r.current.single, mediaConstraint: MEDIA_CONSTRAINT, mobile: mobile, clx: selectorClx })) : (r.current?.multi && r.current.families && /* safegaurd for first render, etc. */ (_jsx(MultiFamilyUI, { ...r.current.multi, families: r.current.families, parent: r.current.node, clx: selectorClx }))), _jsx(Buttons, { clx: cn('self-stretch mt-8 flex flex-col items-center gap-3 shrink-0 grow-0', buttonsAreaClx) })] }));
+};
+export default CarouselBuyCard;
+//# sourceMappingURL=carousel-buy-card.js.map

package/dist/components/buy/carousel-buy-card.js.map

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

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

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

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

@@ -0,0 +1,115 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { reaction } from 'mobx';
+import { observer } from 'mobx-react-lite';
+import { cn } from '@libreapps/ui/util';
+import { ApplyTypography, Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext, MediaStack, } from '@libreapps/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 (_jsxs(ApplyTypography, { className: cn('flex flex-col items-center !gap-0 [&>*]:!m-0 ', clx), children: [parentTitleDisplay && _jsx("h4", { children: parentTitleDisplay }), parentBylineDisplay && _jsx("h4", { children: parentBylineDisplay }), titleDisplay && _jsx("h4", { children: titleDisplay }), bylineDisplay && (_jsx("h6", { children: bylineDisplay }))] }));
+    });
+    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 && (_jsxs(ApplyTypography, { className: cn('flex flex-col items-center [&>*]:!m-0 !gap-1 ', clx), children: [_jsxs("div", { className: 'flex items-center gap-1 [&>*]:!m-0 ' +
+                        debugBorder('g') +
+                        (showFamilyInOption ? 'flex-col' : 'flex-row'), children: [_jsx("h6", { className: cn('font-semibold', labelClx), children: optionLabel() + (showPrice && !showFamilyInOption ? ',' : '') }), _jsxs("div", { className: 'flex items-center gap-1 [&>*]:!m-0 flex-row ' + debugBorder('b') +
+                                (showFamilyInOption ? 'w-full justify-between' : ''), children: [showPrice && (_jsx("p", { children: formatCurrencyValue(cmmc.currentItem.price) })), showQuantity && (_jsx(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' }))] })] }), showByline && cmmc.currentItem.byline && (_jsx("p", { children: cmmc.currentItem.byline }))] })));
+    });
+    const Swatches = observer(({ clx = '' }) => {
+        const { showItemSwatches } = accessMultiSelectorOptions(selectorOptions);
+        if (!showItemSwatches ||
+            !cmmc.currentFamily
+        //|| cmmc.currentFamily.products.length === 1
+        ) {
+            return null;
+        }
+        return _jsx(ButtonItemSelector, { items: cmmc.currentFamily.products, selectedItemRef: cmmc, selectSku: cmmc.setCurrentItem.bind(cmmc), clx: clx, options: {
+                buttonType: 'image',
+                horizButtons: true
+            } });
+    });
+    return (_jsxs("div", { className: cn('w-full flex flex-col items-center', clx), children: [_jsx(Header, {}), r.current && /* Only render once we've set the ref fields, or else bad things! */ (_jsxs(Carousel, { options: { loop: true, startIndex: r.current.initialIndex }, className: 'w-full px-2' + debugBorder('r'), onCarouselSelect: onSelect, setApi: setApi, children: [_jsx(CarouselContent, { children: r.current.items.map((item) => (_jsx(CarouselItem, { className: cn('p-2 flex flex-col justify-center items-center', itemClx), children: _jsx(MediaStack, { media: item, constrainTo: mediaConstraint, clx: 'my-4' }) }, item.sku))) }), r.current.items.length > 1 && (_jsxs(_Fragment, { children: [_jsx(CarouselPrevious, { className: 'left-1' }), _jsx(CarouselNext, { className: 'right-1' })] }))] })), _jsxs("div", { className: 'flex flex-col items-center justify-start', children: [_jsx(ItemInfo, { labelClx: '!text-base font-medium' }), _jsx(Swatches, { clx: 'mt-2' })] })] }));
+};
+export { AllVariantsCarousel as default };
+//# sourceMappingURL=all-variants-carousel.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"all-variants-carousel.js","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.js

@@ -0,0 +1,27 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useCallback, useRef } from 'react';
+import { cn } from '@libreapps/ui/util';
+import { Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext, } from '@libreapps/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 (_jsxs(Carousel, { className: cn('px-2', clx), options: { loop: false }, onCarouselSelect: onSelect, children: [_jsx(CarouselContent, { children: families.map((family) => {
+                    const slideState = stateRef.current.getSlideState(family.id);
+                    if (!slideState) {
+                        throw new Error(`FamilyCarousel: no SlideState for family '${family.id}'!`);
+                    }
+                    return (_jsx(CarouselItem, { className: 'p-2 flex flex-col justify-center items-center', children: _jsx(FamilySlide, { family: family, selectedItemRef: slideState, selectSku: slideState.selectSku.bind(slideState), mediaConstraint: mediaConstraint, options: itemOptions, mobile: mobile, clx: itemClx }) }, family.id));
+                }) }), _jsx(CarouselPrevious, { className: 'left-1' }), _jsx(CarouselNext, { className: 'right-1' })] }));
+};
+export default FamilyCarousel;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","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,oBAAoB,CAAA;AAEvC,OAAO,EAEL,QAAQ,EACR,eAAe,EACf,YAAY,EACZ,gBAAgB,EAChB,YAAY,GACb,MAAM,0BAA0B,CAAA;AAIjC,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,MAAC,QAAQ,IACP,SAAS,EAAE,EAAE,CAAC,MAAM,EAAE,GAAG,CAAC,EAC1B,OAAO,EAAE,EAAC,IAAI,EAAE,KAAK,EAAC,EACtB,gBAAgB,EAAE,QAAQ,aAE1B,KAAC,eAAe,cACf,QAAQ,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE;oBACvB,MAAM,UAAU,GAAG,QAAQ,CAAC,OAAO,CAAC,aAAa,CAAC,MAAM,CAAC,EAAE,CAAC,CAAA;oBAC5D,IAAI,CAAC,UAAU,EAAE,CAAC;wBAChB,MAAM,IAAI,KAAK,CAAC,6CAA6C,MAAM,CAAC,EAAE,IAAI,CAAC,CAAA;oBAC7E,CAAC;oBACD,OAAO,CACL,KAAC,YAAY,IAAiB,SAAS,EAAC,+CAA+C,YACrF,KAAC,WAAW,IACV,MAAM,EAAE,MAAM,EACd,eAAe,EAAE,UAAU,EAC3B,SAAS,EAAE,UAAU,CAAC,SAAS,CAAC,IAAI,CAAC,UAAU,CAAC,EAChD,eAAe,EAAE,eAAe,EAChC,OAAO,EAAE,WAAW,EACpB,MAAM,EAAE,MAAM,EACd,GAAG,EAAE,OAAO,GACZ,IATe,MAAM,CAAC,EAAE,CAUb,CAChB,CAAA;gBAAA,CAAC,CACH,GACiB,EAClB,KAAC,gBAAgB,IAAC,SAAS,EAAC,QAAQ,GAAE,EACtC,KAAC,YAAY,IAAC,SAAS,EAAC,SAAS,GAAE,IAC1B,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 '@libreapps/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.js

@@ -0,0 +1,35 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { ApplyTypography, MediaStack } from '@libreapps/ui/primitives';
+import { ButtonItemSelector } from '../../..';
+import { cn } from '@libreapps/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 (_jsxs("div", { className: cn('flex flex-col items-center gap-4', clx), "data-vaul-no-drag": true, children: [title && (_jsxs(ApplyTypography, { className: 'flex flex-col items-center !gap-1 [&>*]:!m-0', "data-vaul-no-drag": true, children: [_jsx("h6", { className: 'font-bold text-lg', children: title }), byline && (_jsx("p", { className: '', children: byline }))] })), _jsx(MediaStack, { media: selectedItemRef.item, constrainTo: cnst }), _jsx(ButtonItemSelector, { items: family.products, selectedItemRef: selectedItemRef, selectSku: selectSku, scrollable: false, mobile: mobile, options: options, itemClx: 'text-sm' })] }));
+};
+export default FamilySlide;
+//# sourceMappingURL=slide.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"slide.js","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,0BAA0B,CAAA;AAIjC,OAAO,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAA;AAC7C,OAAO,EAAE,EAAE,EAAE,MAAM,oBAAoB,CAAA;AAEvC,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,eAAK,SAAS,EAAE,EAAE,CAAC,kCAAkC,EAAE,GAAG,CAAC,wCACxD,KAAK,IAAI,CACR,MAAC,eAAe,IAAC,SAAS,EAAC,8CAA8C,wCACvE,aAAI,SAAS,EAAC,mBAAmB,YAAE,KAAK,GAAM,EAC7C,MAAM,IAAI,CAAC,YAAG,SAAS,EAAE,EAAE,YAAG,MAAM,GAAK,CAAC,IAC3B,CACnB,EACD,KAAC,UAAU,IACT,KAAK,EAAE,eAAe,CAAC,IAAK,EAC5B,WAAW,EAAE,IAAI,GACjB,EACF,KAAC,kBAAkB,IACjB,KAAK,EAAE,MAAM,CAAC,QAAsB,EACpC,eAAe,EAAE,eAAe,EAChC,SAAS,EAAE,SAAS,EACpB,UAAU,EAAE,KAAK,EACjB,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,OAAO,EAChB,OAAO,EAAC,SAAS,GACjB,IACE,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 '@libreapps/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;