@q2devel/q2-storybook 1.0.12 → 1.0.13

package/dist/components/badge/Badge.js

@@ -1,3 +1,4 @@
+'use client';
 import React from 'react';
 var Badge = function (_a) {
     var children = _a.children, onClick = _a.onClick, _b = _a.color, color = _b === void 0 ? 'bg-blue-100 text-blue-800' : _b, _c = _a.className, className = _c === void 0 ? '' : _c, _d = _a.labelClassName, labelClassName = _d === void 0 ? '' : _d, rightIcon = _a.rightIcon;

package/dist/components/banner/Banner.d.ts

@@ -0,0 +1,48 @@
+import React, { ReactNode } from 'react';
+export type BannerItem = {
+    id: string;
+    imageSrc: string;
+    imageAlt?: string;
+    title: string;
+    subtitle: string;
+    buttonText?: string;
+    buttonLink?: string;
+    customContent?: ReactNode;
+    overlayOpacity?: number;
+    buttonVariant?: 'primary' | 'secondary' | 'ghost' | 'outline';
+    buttonSize?: 'sm' | 'md' | 'lg';
+};
+export type ControlsType = 'arrows' | 'dots' | 'both' | 'none';
+export type BannerProps = {
+    items: BannerItem[];
+    height?: 'sm' | 'md' | 'lg' | 'xl' | 'full' | 'auto';
+    autoplay?: boolean;
+    autoplayInterval?: number;
+    controls?: ControlsType;
+    overlayStyle?: 'dark' | 'light' | 'gradient' | 'none';
+    textAlignment?: 'left' | 'center' | 'right';
+    textPosition?: 'top' | 'center' | 'bottom';
+    className?: string;
+    imageClassName?: string;
+    titleClassName?: string;
+    subtitleClassName?: string;
+    buttonClassName?: string;
+    indicatorsClassName?: string;
+    controlsClassName?: string;
+    contentClassName?: string;
+    rounded?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
+    buttonRounded?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
+    animation?: 'slide' | 'fade' | 'zoom' | 'none';
+    animationDuration?: number;
+    pauseOnHover?: boolean;
+    infiniteLoop?: boolean;
+    objectFit?: 'cover' | 'contain' | 'fill' | 'none';
+    objectPosition?: 'center' | 'top' | 'bottom' | 'left' | 'right';
+    renderItem?: (item: BannerItem, index: number) => ReactNode;
+    renderControls?: (goToNext: () => void, goToPrev: () => void) => ReactNode;
+    renderIndicators?: (current: number, total: number, goToSlide: (index: number) => void) => ReactNode;
+    onSlideChange?: (currentIndex: number, previousIndex: number) => void;
+    withOverlay?: boolean;
+    overlayOpacity?: number;
+};
+export declare const Banner: ({ items, height, autoplay, autoplayInterval, controls, overlayStyle, textAlignment, textPosition, className, imageClassName, titleClassName, subtitleClassName, buttonClassName, indicatorsClassName, controlsClassName, contentClassName, rounded, buttonRounded, animation, animationDuration, pauseOnHover, infiniteLoop, objectFit, objectPosition, renderItem, renderControls, renderIndicators, onSlideChange, withOverlay, overlayOpacity, }: BannerProps) => React.JSX.Element | null;

package/dist/components/banner/Banner.js

@@ -0,0 +1,137 @@
+'use client';
+import { ChevronLeftIcon, ChevronRightIcon } from '@heroicons/react/24/outline';
+import React, { useEffect, useState } from 'react';
+import buildClassesByJoining from '../../utils/StyleHelper';
+export var Banner = function (_a) {
+    var items = _a.items, _b = _a.height, height = _b === void 0 ? 'md' : _b, _c = _a.autoplay, autoplay = _c === void 0 ? false : _c, _d = _a.autoplayInterval, autoplayInterval = _d === void 0 ? 5000 : _d, _e = _a.controls, controls = _e === void 0 ? 'both' : _e, _f = _a.overlayStyle, overlayStyle = _f === void 0 ? 'gradient' : _f, _g = _a.textAlignment, textAlignment = _g === void 0 ? 'center' : _g, _h = _a.textPosition, textPosition = _h === void 0 ? 'center' : _h, _j = _a.className, className = _j === void 0 ? '' : _j, _k = _a.imageClassName, imageClassName = _k === void 0 ? '' : _k, _l = _a.titleClassName, titleClassName = _l === void 0 ? '' : _l, _m = _a.subtitleClassName, subtitleClassName = _m === void 0 ? '' : _m, _o = _a.buttonClassName, buttonClassName = _o === void 0 ? '' : _o, _p = _a.indicatorsClassName, indicatorsClassName = _p === void 0 ? '' : _p, _q = _a.controlsClassName, controlsClassName = _q === void 0 ? '' : _q, _r = _a.contentClassName, contentClassName = _r === void 0 ? '' : _r, _s = _a.rounded, rounded = _s === void 0 ? 'none' : _s, _t = _a.buttonRounded, buttonRounded = _t === void 0 ? 'md' : _t, _u = _a.animation, animation = _u === void 0 ? 'slide' : _u, _v = _a.animationDuration, animationDuration = _v === void 0 ? 500 : _v, _w = _a.pauseOnHover, pauseOnHover = _w === void 0 ? true : _w, _x = _a.infiniteLoop, infiniteLoop = _x === void 0 ? true : _x, _y = _a.objectFit, objectFit = _y === void 0 ? 'cover' : _y, _z = _a.objectPosition, objectPosition = _z === void 0 ? 'center' : _z, renderItem = _a.renderItem, renderControls = _a.renderControls, renderIndicators = _a.renderIndicators, onSlideChange = _a.onSlideChange, _0 = _a.withOverlay, withOverlay = _0 === void 0 ? true : _0, _1 = _a.overlayOpacity, overlayOpacity = _1 === void 0 ? 0.5 : _1;
+    var _2 = useState(0), currentIndex = _2[0], setCurrentIndex = _2[1];
+    var _3 = useState(0), prevIndex = _3[0], setPrevIndex = _3[1];
+    var _4 = useState(false), isHovered = _4[0], setIsHovered = _4[1];
+    var showArrows = controls === 'arrows' || controls === 'both';
+    var showDots = controls === 'dots' || controls === 'both';
+    var heightClasses = {
+        sm: 'h-48 sm:h-64',
+        md: 'h-64 sm:h-96',
+        lg: 'h-80 sm:h-[32rem]',
+        xl: 'h-96 sm:h-[40rem]',
+        full: 'h-screen',
+        auto: 'h-auto',
+    };
+    var overlayClasses = {
+        dark: "bg-black/".concat(Math.round(overlayOpacity * 100)),
+        light: "bg-white/".concat(Math.round(overlayOpacity * 100)),
+        gradient: 'bg-gradient-to-t from-black/70 via-black/30 to-transparent',
+        none: '',
+    };
+    var textAlignmentClasses = {
+        left: 'text-left items-start',
+        center: 'text-center items-center',
+        right: 'text-right items-end',
+    };
+    var textPositionClasses = {
+        top: 'justify-start pt-10',
+        center: 'justify-center',
+        bottom: 'justify-end pb-10',
+    };
+    var roundedClasses = {
+        none: 'rounded-none',
+        sm: 'rounded-sm',
+        md: 'rounded-md',
+        lg: 'rounded-lg',
+        xl: 'rounded-xl',
+        full: 'rounded-full',
+    };
+    var buttonRoundedClasses = {
+        none: 'rounded-none',
+        sm: 'rounded-sm',
+        md: 'rounded-md',
+        lg: 'rounded-lg',
+        xl: 'rounded-xl',
+        full: 'rounded-full',
+    };
+    var objectFitClasses = {
+        cover: 'object-cover',
+        contain: 'object-contain',
+        fill: 'object-fill',
+        none: 'object-none',
+    };
+    var objectPositionClasses = {
+        center: 'object-center',
+        top: 'object-top',
+        bottom: 'object-bottom',
+        left: 'object-left',
+        right: 'object-right',
+    };
+    var animationClasses = {
+        slide: "transition-transform duration-".concat(animationDuration),
+        fade: "transition-opacity duration-".concat(animationDuration),
+        zoom: "transform transition-transform duration-".concat(animationDuration),
+        none: '',
+    };
+    var goToNext = function () {
+        setPrevIndex(currentIndex);
+        setCurrentIndex(function (prev) {
+            var newIndex = prev === items.length - 1 ? (infiniteLoop ? 0 : prev) : prev + 1;
+            onSlideChange && onSlideChange(newIndex, prev);
+            return newIndex;
+        });
+    };
+    var goToPrev = function () {
+        setPrevIndex(currentIndex);
+        setCurrentIndex(function (prev) {
+            var newIndex = prev === 0 ? (infiniteLoop ? items.length - 1 : prev) : prev - 1;
+            onSlideChange && onSlideChange(newIndex, prev);
+            return newIndex;
+        });
+    };
+    var goToSlide = function (index) {
+        if (index === currentIndex)
+            return;
+        setPrevIndex(currentIndex);
+        setCurrentIndex(index);
+        onSlideChange && onSlideChange(index, currentIndex);
+    };
+    // Autoplay effet
+    useEffect(function () {
+        if (!autoplay || (pauseOnHover && isHovered) || items.length <= 1)
+            return;
+        var interval = setInterval(goToNext, autoplayInterval);
+        return function () { return clearInterval(interval); };
+    }, [autoplay, autoplayInterval, isHovered, items.length, pauseOnHover]);
+    if (!items || items.length === 0) {
+        return null;
+    }
+    // Renderovanie individuálneho slide
+    var renderDefaultItem = function (item, index) { return (React.createElement("div", { key: item.id, className: "min-w-full h-full relative ".concat(animation === 'fade' ? (index === currentIndex ? 'opacity-100' : 'opacity-0') : '') },
+        React.createElement("div", { className: "absolute inset-0 w-full h-full" },
+            React.createElement("img", { src: item.imageSrc, alt: item.imageAlt || item.title, className: buildClassesByJoining('w-full h-full', roundedClasses[rounded], objectFitClasses[objectFit], objectPositionClasses[objectPosition], imageClassName), style: { objectFit: objectFit } }),
+            withOverlay && (React.createElement("div", { className: buildClassesByJoining('absolute inset-0', overlayClasses[overlayStyle], roundedClasses[rounded]), style: item.overlayOpacity ? { opacity: item.overlayOpacity } : {} }))),
+        item.customContent || (React.createElement("div", { className: buildClassesByJoining('relative h-full w-full flex flex-col px-6', textPositionClasses[textPosition], textAlignmentClasses[textAlignment], contentClassName) },
+            React.createElement("h2", { className: buildClassesByJoining('text-3xl sm:text-4xl md:text-5xl font-bold text-white mb-2', titleClassName) }, item.title),
+            React.createElement("p", { className: buildClassesByJoining('text-xl text-white/80 max-w-2xl', subtitleClassName) }, item.subtitle),
+            item.buttonText && item.buttonLink && (React.createElement("a", { href: item.buttonLink, className: buildClassesByJoining('mt-4 px-6 py-2 bg-white text-black font-medium hover:bg-opacity-90 transition-colors inline-block', buttonRoundedClasses[buttonRounded], buttonClassName) }, item.buttonText)))))); };
+    // Pre jeden slide použijeme zjednodušený výstup
+    if (items.length === 1) {
+        var item = items[0];
+        return (React.createElement("div", { className: buildClassesByJoining('relative overflow-hidden w-full', heightClasses[height], roundedClasses[rounded], className) }, renderItem ? renderItem(item, 0) : renderDefaultItem(item, 0)));
+    }
+    // Pre viac slideov vytvoríme karusel
+    return (React.createElement("div", { className: buildClassesByJoining('relative overflow-hidden w-full', heightClasses[height], roundedClasses[rounded], className), onMouseEnter: function () { return pauseOnHover && setIsHovered(true); }, onMouseLeave: function () { return pauseOnHover && setIsHovered(false); } },
+        React.createElement("div", { className: buildClassesByJoining('flex h-full', animationClasses[animation]), style: animation === 'slide'
+                ? { transform: "translateX(-".concat(currentIndex * 100, "%)") }
+                : {} }, items.map(function (item, index) {
+            return renderItem ? renderItem(item, index) : renderDefaultItem(item, index);
+        })),
+        showArrows &&
+            items.length > 1 &&
+            (renderControls ? (renderControls(goToNext, goToPrev)) : (React.createElement(React.Fragment, null,
+                React.createElement("button", { onClick: goToPrev, className: buildClassesByJoining('absolute left-4 top-1/2 -translate-y-1/2 w-10 h-10 flex items-center justify-center rounded-full bg-black/30 hover:bg-black/50 text-white transition-colors', controlsClassName), "aria-label": "P\u0159edchoz\u00ED" },
+                    React.createElement(ChevronLeftIcon, { className: "h-6 w-6" })),
+                React.createElement("button", { onClick: goToNext, className: buildClassesByJoining('absolute right-4 top-1/2 -translate-y-1/2 w-10 h-10 flex items-center justify-center rounded-full bg-black/30 hover:bg-black/50 text-white transition-colors', controlsClassName), "aria-label": "Dal\u0161\u00ED" },
+                    React.createElement(ChevronRightIcon, { className: "h-6 w-6" }))))),
+        showDots &&
+            items.length > 1 &&
+            (renderIndicators ? (renderIndicators(currentIndex, items.length, goToSlide)) : (React.createElement("div", { className: buildClassesByJoining('absolute bottom-4 left-1/2 -translate-x-1/2 flex gap-2', indicatorsClassName) }, items.map(function (_, index) { return (React.createElement("button", { key: index, onClick: function () { return goToSlide(index); }, className: buildClassesByJoining('w-3 h-3 rounded-full transition-colors', index === currentIndex
+                    ? 'bg-white'
+                    : 'bg-white/40 hover:bg-white/60'), "aria-label": "P\u0159ej\u00EDt na slide ".concat(index + 1) })); }))))));
+};

package/dist/components/basket-dialog/BasketDialog.d.ts

@@ -0,0 +1,55 @@
+import React from 'react';
+export type BasketProduct = {
+    id: string;
+    name: string;
+    price: number;
+    quantity: number;
+    image?: {
+        src: string;
+        alt: string;
+    };
+    href?: string;
+    color?: string;
+    [key: string]: any;
+};
+export type BasketDialogVariant = 'default' | 'compact' | 'full';
+export type BasketDialogPosition = 'right' | 'left';
+export type BasketDialogProps = {
+    isOpen: boolean;
+    onClose: () => void;
+    products: BasketProduct[];
+    subtotal: string | number;
+    onQuantityChange?: (productId: string, quantity: number) => void;
+    onRemoveProduct?: (productId: string) => void;
+    onCheckout?: () => void;
+    onContinueShopping?: () => void;
+    onProductClick?: (product: BasketProduct) => void;
+    title?: string;
+    checkoutText?: string;
+    continueShoppingText?: string;
+    emptyCartText?: string;
+    quantityLabel?: string;
+    removeButtonText?: string;
+    totalLabel?: string;
+    shippingNoteText?: string;
+    variant?: BasketDialogVariant;
+    position?: BasketDialogPosition;
+    showProductImages?: boolean;
+    showProductColors?: boolean;
+    showProductLinks?: boolean;
+    showRemoveButton?: boolean;
+    showSubtotal?: boolean;
+    showCheckoutButton?: boolean;
+    showContinueShoppingButton?: boolean;
+    showShippingNote?: boolean;
+    showQuantityControls?: boolean;
+    customClassName?: string;
+    maxHeight?: string;
+    animationDuration?: number;
+    backdropOpacity?: number;
+    renderCustomProduct?: (product: BasketProduct) => React.ReactNode;
+    renderCustomFooter?: () => React.ReactNode;
+    pendingUpdates?: Record<string, number>;
+    processingItems?: Record<string, boolean>;
+};
+export declare const BasketDialog: ({ isOpen, onClose, products, subtotal, onQuantityChange, onRemoveProduct, onCheckout, onContinueShopping, onProductClick, title, checkoutText, continueShoppingText, emptyCartText, quantityLabel, removeButtonText, totalLabel, shippingNoteText, variant, position, showProductImages, showProductColors, showProductLinks, showRemoveButton, showSubtotal, showCheckoutButton, showContinueShoppingButton, showShippingNote, showQuantityControls, customClassName, maxHeight, animationDuration, backdropOpacity, renderCustomProduct, renderCustomFooter, pendingUpdates, processingItems, }: BasketDialogProps) => React.JSX.Element;

package/dist/components/basket-dialog/BasketDialog.js

@@ -0,0 +1,167 @@
+'use client';
+import { Dialog, DialogBackdrop, DialogPanel, DialogTitle } from '@headlessui/react';
+import { MinusIcon, PlusIcon, XMarkIcon } from '@heroicons/react/24/outline';
+import React from 'react';
+// Helper funkcia pre formátovanie ceny
+var formatPrice = function (price) {
+    return new Intl.NumberFormat('cs-CZ', {
+        style: 'currency',
+        currency: 'CZK',
+    }).format(price);
+};
+export var BasketDialog = function (_a) {
+    var 
+    // Základné props
+    isOpen = _a.isOpen, onClose = _a.onClose, products = _a.products, subtotal = _a.subtotal, 
+    // Callback funkcie
+    onQuantityChange = _a.onQuantityChange, onRemoveProduct = _a.onRemoveProduct, onCheckout = _a.onCheckout, onContinueShopping = _a.onContinueShopping, onProductClick = _a.onProductClick, 
+    // Texty s predvolenými hodnotami
+    _b = _a.title, 
+    // Texty s predvolenými hodnotami
+    title = _b === void 0 ? 'Váš košík' : _b, _c = _a.checkoutText, checkoutText = _c === void 0 ? 'Pokračovat k objednávce' : _c, _d = _a.continueShoppingText, continueShoppingText = _d === void 0 ? 'Pokračovat v nákupu' : _d, _e = _a.emptyCartText, emptyCartText = _e === void 0 ? 'Váš košík je prázdný' : _e, _f = _a.quantityLabel, quantityLabel = _f === void 0 ? 'Množství:' : _f, _g = _a.removeButtonText, removeButtonText = _g === void 0 ? 'Odstranit' : _g, _h = _a.totalLabel, totalLabel = _h === void 0 ? 'Celkem' : _h, _j = _a.shippingNoteText, shippingNoteText = _j === void 0 ? 'Doprava a daně budou vypočítány při dokončení objednávky.' : _j, 
+    // Zobrazenie/konfigurácia s predvolenými hodnotami
+    _k = _a.variant, 
+    // Zobrazenie/konfigurácia s predvolenými hodnotami
+    variant = _k === void 0 ? 'default' : _k, _l = _a.position, position = _l === void 0 ? 'right' : _l, _m = _a.showProductImages, showProductImages = _m === void 0 ? true : _m, _o = _a.showProductColors, showProductColors = _o === void 0 ? true : _o, _p = _a.showProductLinks, showProductLinks = _p === void 0 ? true : _p, _q = _a.showRemoveButton, showRemoveButton = _q === void 0 ? true : _q, _r = _a.showSubtotal, showSubtotal = _r === void 0 ? true : _r, _s = _a.showCheckoutButton, showCheckoutButton = _s === void 0 ? true : _s, _t = _a.showContinueShoppingButton, showContinueShoppingButton = _t === void 0 ? true : _t, _u = _a.showShippingNote, showShippingNote = _u === void 0 ? true : _u, _v = _a.showQuantityControls, showQuantityControls = _v === void 0 ? true : _v, 
+    // Štýlovanie s predvolenými hodnotami
+    _w = _a.customClassName, 
+    // Štýlovanie s predvolenými hodnotami
+    customClassName = _w === void 0 ? '' : _w, _x = _a.maxHeight, maxHeight = _x === void 0 ? '100vh' : _x, _y = _a.animationDuration, animationDuration = _y === void 0 ? 500 : _y, _z = _a.backdropOpacity, backdropOpacity = _z === void 0 ? 0.75 : _z, 
+    // Vlastné renderovanie
+    renderCustomProduct = _a.renderCustomProduct, renderCustomFooter = _a.renderCustomFooter, 
+    // Stav
+    _0 = _a.pendingUpdates, 
+    // Stav
+    pendingUpdates = _0 === void 0 ? {} : _0, _1 = _a.processingItems, processingItems = _1 === void 0 ? {} : _1;
+    var handleCheckout = function () {
+        if (onCheckout) {
+            onCheckout();
+        }
+    };
+    var handleContinueShopping = function () {
+        if (onContinueShopping) {
+            onContinueShopping();
+        }
+        else {
+            onClose();
+        }
+    };
+    var handleIncrement = function (productId, quantity) {
+        if (onQuantityChange) {
+            onQuantityChange(productId, quantity + 1);
+        }
+    };
+    var handleDecrement = function (productId, quantity) {
+        if (onQuantityChange) {
+            if (quantity > 1) {
+                onQuantityChange(productId, quantity - 1);
+            }
+            else {
+                onQuantityChange(productId, 0);
+            }
+        }
+    };
+    var getVariantClasses = function () {
+        switch (variant) {
+            case 'compact':
+                return 'max-w-sm';
+            case 'full':
+                return 'max-w-2xl';
+            default:
+                return 'max-w-md';
+        }
+    };
+    var getPositionClasses = function () {
+        return position === 'left' ? 'left-0' : 'right-0';
+    };
+    return (React.createElement(Dialog, { open: isOpen, onClose: onClose, className: "relative z-60" },
+        React.createElement(DialogBackdrop, { transition: true, className: "fixed inset-0 bg-gray-500/75 transition-opacity duration-".concat(animationDuration, " ease-in-out data-closed:opacity-0"), style: { opacity: backdropOpacity } }),
+        React.createElement("div", { className: "fixed inset-0 overflow-hidden" },
+            React.createElement("div", { className: "absolute inset-0 overflow-hidden" },
+                React.createElement("div", { className: "pointer-events-none fixed inset-y-0 ".concat(getPositionClasses(), " flex max-w-full pl-10") },
+                    React.createElement(DialogPanel, { transition: true, className: "pointer-events-auto w-screen ".concat(getVariantClasses(), " transform transition duration-").concat(animationDuration, " ease-in-out data-closed:translate-x-full sm:duration-700 ").concat(customClassName) },
+                        React.createElement("div", { className: "flex h-full flex-col overflow-y-scroll bg-white shadow-xl", style: { maxHeight: maxHeight } },
+                            React.createElement("div", { className: "flex-1 overflow-y-auto px-4 py-6 sm:px-6" },
+                                React.createElement("div", { className: "flex items-start justify-between" },
+                                    React.createElement(DialogTitle, { className: "text-lg font-medium text-gray-900" }, title),
+                                    React.createElement("div", { className: "ml-3 flex h-7 items-center" },
+                                        React.createElement("button", { type: "button", onClick: onClose, className: "relative -m-2 p-2 text-gray-400 hover:text-gray-500" },
+                                            React.createElement("span", { className: "absolute -inset-0.5" }),
+                                            React.createElement("span", { className: "sr-only" }, "Close panel"),
+                                            React.createElement(XMarkIcon, { "aria-hidden": "true", className: "size-6" })))),
+                                React.createElement("div", { className: "mt-8" },
+                                    React.createElement("div", { className: "flow-root" }, products.length === 0 ? (React.createElement("div", { className: "py-6 text-center text-gray-500" }, emptyCartText)) : (React.createElement("ul", { role: "list", className: "-my-6 divide-y divide-gray-200" }, products.map(function (product) {
+                                        if (renderCustomProduct) {
+                                            return renderCustomProduct(product);
+                                        }
+                                        var displayQuantity = product.id in pendingUpdates
+                                            ? pendingUpdates[product.id]
+                                            : product.quantity;
+                                        var isProcessing = processingItems[product.id] === true;
+                                        return (React.createElement("li", { key: product.id, className: "flex py-6" },
+                                            showProductImages &&
+                                                product.image && (React.createElement("div", { className: "size-24 shrink-0 overflow-hidden rounded-md border border-gray-200" },
+                                                React.createElement("img", { alt: product.image
+                                                        .alt, src: product.image
+                                                        .src, className: "size-full object-cover" }))),
+                                            React.createElement("div", { className: "ml-4 flex flex-1 flex-col" },
+                                                React.createElement("div", null,
+                                                    React.createElement("div", { className: "flex justify-between text-base font-medium text-gray-900" },
+                                                        React.createElement("h3", null, showProductLinks &&
+                                                            product.href ? (React.createElement("a", { href: product.href, onClick: function (e) {
+                                                                if (onProductClick) {
+                                                                    e.preventDefault();
+                                                                    onProductClick(product);
+                                                                }
+                                                            } }, product.name)) : (product.name)),
+                                                        React.createElement("p", { className: "ml-4" }, formatPrice(product.price))),
+                                                    showProductColors &&
+                                                        product.color && (React.createElement("p", { className: "mt-1 text-sm text-gray-500" }, product.color))),
+                                                React.createElement("div", { className: "flex flex-1 items-end justify-between text-sm" },
+                                                    showQuantityControls &&
+                                                        onQuantityChange ? (React.createElement("div", { className: "flex items-center gap-2" },
+                                                        React.createElement("p", { className: "text-gray-500 mr-2" }, quantityLabel),
+                                                        React.createElement("div", { className: "flex items-center" },
+                                                            React.createElement("button", { type: "button", onClick: function () {
+                                                                    return !isProcessing &&
+                                                                        handleDecrement(product.id, displayQuantity);
+                                                                }, disabled: isProcessing, className: "rounded-full p-1 text-gray-600 ".concat(isProcessing
+                                                                    ? 'bg-gray-100 cursor-not-allowed opacity-50'
+                                                                    : 'bg-gray-200 hover:bg-gray-300') },
+                                                                React.createElement(MinusIcon, { className: "h-4 w-4" })),
+                                                            React.createElement("span", { className: "mx-2 min-w-[20px] text-center text-black" }, displayQuantity),
+                                                            React.createElement("button", { type: "button", onClick: function () {
+                                                                    return !isProcessing &&
+                                                                        handleIncrement(product.id, displayQuantity);
+                                                                }, disabled: isProcessing, className: "rounded-full p-1 text-gray-600 ".concat(isProcessing
+                                                                    ? 'bg-gray-100 cursor-not-allowed opacity-50'
+                                                                    : 'bg-gray-200 hover:bg-gray-300') },
+                                                                React.createElement(PlusIcon, { className: "h-4 w-4" }))))) : (React.createElement("p", { className: "text-gray-500" },
+                                                        quantityLabel,
+                                                        ' ',
+                                                        displayQuantity)),
+                                                    showRemoveButton &&
+                                                        onRemoveProduct && (React.createElement("div", { className: "flex" },
+                                                        React.createElement("button", { type: "button", className: "font-medium ".concat(isProcessing
+                                                                ? 'text-gray-400 cursor-not-allowed'
+                                                                : 'text-green-600 hover:text-green-500'), onClick: function () {
+                                                                return !isProcessing &&
+                                                                    onRemoveProduct(product.id);
+                                                            }, disabled: isProcessing }, removeButtonText)))))));
+                                    })))))),
+                            React.createElement("div", { className: "border-t border-gray-200 px-4 py-6 sm:px-6" },
+                                showSubtotal && (React.createElement("div", { className: "flex justify-between text-base font-medium text-gray-900" },
+                                    React.createElement("p", null, totalLabel),
+                                    React.createElement("p", null, typeof subtotal === 'number'
+                                        ? formatPrice(subtotal)
+                                        : subtotal))),
+                                showShippingNote && (React.createElement("p", { className: "mt-0.5 text-sm text-gray-500" }, shippingNoteText)),
+                                products.length > 0 && showCheckoutButton && onCheckout && (React.createElement("div", { className: "mt-6" },
+                                    React.createElement("button", { onClick: handleCheckout, className: "flex w-full items-center justify-center rounded-md border border-transparent bg-green-600 px-6 py-3 text-base font-medium text-white shadow-xs hover:bg-green-700" }, checkoutText))),
+                                showContinueShoppingButton && (React.createElement("div", { className: "mt-6 flex justify-center text-center text-sm text-gray-500" },
+                                    React.createElement("p", null,
+                                        React.createElement("button", { type: "button", onClick: handleContinueShopping, className: "font-medium text-green-600 hover:text-green-500" },
+                                            continueShoppingText,
+                                            React.createElement("span", { "aria-hidden": "true" }, " \u2192"))))),
+                                renderCustomFooter && renderCustomFooter()))))))));
+};

package/dist/components/icon/CloseIcon.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { SVGProps } from 'react';
+export declare const CloseIcon: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;

package/dist/components/icon/CloseIcon.js

@@ -0,0 +1,14 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import React from 'react';
+export var CloseIcon = function (props) { return (React.createElement("svg", __assign({ width: 16, height: 16, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", className: props.className, onClick: props.onClick, onMouseDown: props.onMouseDown }, props),
+    React.createElement("path", { d: "M6 18L18 6M6 6l12 12", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }))); };

package/dist/components/icon/InfoIcon.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { SVGProps } from 'react';
+export declare const InfoIcon: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;

package/dist/components/icon/InfoIcon.js

@@ -0,0 +1,15 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import React from 'react';
+export var InfoIcon = function (props) { return (React.createElement("svg", __assign({ className: "w-4 h-4 text-blue-600 ".concat(props.className || ''), fill: "none", stroke: "currentColor", strokeWidth: "2", viewBox: "0 0 24 24" }, props),
+    React.createElement("circle", { cx: "12", cy: "12", r: "10", stroke: "currentColor" }),
+    React.createElement("path", { d: "M12 8v4m0 4h.01", stroke: "currentColor" }))); };

package/dist/components/label/Label.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+interface LabelProps {
+    text?: string;
+    i18nKey?: string;
+    isRequired?: boolean;
+    htmlFor?: string;
+    subtitle?: string;
+    srOnly?: boolean;
+    className?: string;
+}
+declare const Label: ({ text, i18nKey, isRequired, htmlFor, subtitle, srOnly, className, }: LabelProps) => React.JSX.Element | null;
+export default Label;

package/dist/components/label/Label.js

@@ -0,0 +1,11 @@
+import React from "react";
+var Label = function (_a) {
+    var text = _a.text, i18nKey = _a.i18nKey, isRequired = _a.isRequired, htmlFor = _a.htmlFor, subtitle = _a.subtitle, srOnly = _a.srOnly, _b = _a.className, className = _b === void 0 ? '' : _b;
+    if (!text && !i18nKey)
+        return null;
+    return (React.createElement("label", { htmlFor: htmlFor, className: "text-sm font-medium text-gray-700 flex flex-col ".concat(srOnly ? 'sr-only' : '', " ").concat(className) },
+        React.createElement("span", null, text || i18nKey),
+        isRequired && React.createElement("span", { className: "ml-1 text-red-500" }, "*"),
+        subtitle && React.createElement("span", { className: "text-xs text-gray-500" }, subtitle)));
+};
+export default Label;

package/dist/components/nav-bar/NavBar.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+export type NavItem = {
+    name: string;
+    href: string;
+};
+export type NavBarProps = {
+    items?: NavItem[];
+    logo?: React.ReactNode;
+    rightContent?: React.ReactNode;
+    backgroundColor?: string;
+    textColor?: string;
+    activeColor?: string;
+    mobileMenuBgColor?: string;
+    containerClassName?: string;
+    navClassName?: string;
+    itemClassName?: string;
+    mobileItemClassName?: string;
+};
+export declare const NavBar: ({ items, logo, rightContent, backgroundColor, textColor, activeColor, mobileMenuBgColor, containerClassName, navClassName, itemClassName, mobileItemClassName, }: NavBarProps) => React.JSX.Element;

package/dist/components/nav-bar/NavBar.js

@@ -0,0 +1,36 @@
+'use client';
+import { Bars3Icon, XMarkIcon } from '@heroicons/react/24/outline';
+import React, { useState } from 'react';
+import buildClassesByJoining from '../../utils/StyleHelper';
+export var NavBar = function (_a) {
+    var 
+    // Structure
+    _b = _a.items, 
+    // Structure
+    items = _b === void 0 ? [] : _b, 
+    // Logo
+    _c = _a.logo, 
+    // Logo
+    logo = _c === void 0 ? React.createElement("div", { className: "h-8 w-8 bg-indigo-600 rounded-md" }) : _c, 
+    // Right side elements
+    rightContent = _a.rightContent, 
+    // Styling
+    _d = _a.backgroundColor, 
+    // Styling
+    backgroundColor = _d === void 0 ? 'bg-white' : _d, _e = _a.textColor, textColor = _e === void 0 ? 'text-gray-600' : _e, _f = _a.activeColor, activeColor = _f === void 0 ? 'text-indigo-600' : _f, _g = _a.mobileMenuBgColor, mobileMenuBgColor = _g === void 0 ? 'bg-white' : _g, _h = _a.containerClassName, containerClassName = _h === void 0 ? '' : _h, _j = _a.navClassName, navClassName = _j === void 0 ? '' : _j, _k = _a.itemClassName, itemClassName = _k === void 0 ? '' : _k, _l = _a.mobileItemClassName, mobileItemClassName = _l === void 0 ? '' : _l;
+    var _m = useState(false), mobileMenuOpen = _m[0], setMobileMenuOpen = _m[1];
+    return (React.createElement("header", { className: buildClassesByJoining(backgroundColor, containerClassName) },
+        React.createElement("nav", { className: buildClassesByJoining('mx-auto max-w-7xl px-4 sm:px-6 lg:px-8', navClassName) },
+            React.createElement("div", { className: "flex h-16 items-center justify-between" },
+                React.createElement("div", { className: "flex-shrink-0" }, logo),
+                React.createElement("div", { className: "flex md:hidden" },
+                    React.createElement("button", { type: "button", className: buildClassesByJoining('inline-flex items-center justify-center rounded-md p-2', textColor, "hover:".concat(activeColor, " hover:bg-gray-100")), onClick: function () { return setMobileMenuOpen(!mobileMenuOpen); } },
+                        React.createElement("span", { className: "sr-only" }, "Open main menu"),
+                        mobileMenuOpen ? (React.createElement(XMarkIcon, { className: "block h-6 w-6", "aria-hidden": "true" })) : (React.createElement(Bars3Icon, { className: "block h-6 w-6", "aria-hidden": "true" })))),
+                React.createElement("div", { className: "hidden md:flex md:flex-1 md:items-center md:justify-center md:space-x-8" }, items.map(function (item) { return (React.createElement("a", { key: item.name, href: item.href, className: buildClassesByJoining('text-sm font-medium', textColor, "hover:".concat(activeColor), itemClassName) }, item.name)); })),
+                rightContent && (React.createElement("div", { className: "hidden md:flex md:items-center" }, rightContent)))),
+        mobileMenuOpen && (React.createElement("div", { className: buildClassesByJoining('md:hidden', mobileMenuBgColor) },
+            React.createElement("div", { className: "space-y-1 px-2 pb-3 pt-2" }, items.map(function (item) { return (React.createElement("a", { key: item.name, href: item.href, className: buildClassesByJoining('block rounded-md px-3 py-2 text-base font-medium', textColor, "hover:".concat(activeColor, " hover:bg-gray-100"), mobileItemClassName) }, item.name)); })),
+            rightContent && (React.createElement("div", { className: "border-t border-gray-200 pb-3 pt-4" },
+                React.createElement("div", { className: "flex items-center px-5" }, rightContent)))))));
+};

package/dist/components/product-card/ProductCard.d.ts

@@ -0,0 +1,61 @@
+import React from 'react';
+export type Product = {
+    id: string;
+    imageSrc: string;
+    imageAlt: string;
+    href: string;
+    name: string;
+    color?: string;
+    price: string;
+    description?: string;
+    badges?: Array<{
+        text: string;
+        color: string;
+    }>;
+};
+export type QuantityControlProps = {
+    quantity: number;
+    onIncrement: (e: React.MouseEvent) => void;
+    onDecrement: (e: React.MouseEvent) => void;
+    minQuantity?: number;
+    maxQuantity?: number;
+    controlsClassName?: string;
+    buttonClassName?: string;
+    quantityClassName?: string;
+};
+export type ProductCardProps = {
+    product: Product;
+    className?: string;
+    imageClassName?: string;
+    contentClassName?: string;
+    titleClassName?: string;
+    colorClassName?: string;
+    priceClassName?: string;
+    descriptionClassName?: string;
+    badgeClassName?: string;
+    aspectRatio?: 'square' | 'auto' | 'video' | 'wide';
+    imagePosition?: 'top' | 'bottom' | 'center';
+    imageObjectFit?: 'cover' | 'contain' | 'fill' | 'none';
+    layout?: 'default' | 'compact' | 'horizontal';
+    hoverEffect?: 'opacity' | 'scale' | 'shadow' | 'border' | 'none';
+    renderBadges?: boolean;
+    renderColor?: boolean;
+    renderDescription?: boolean;
+    elevationLevel?: 0 | 1 | 2 | 3;
+    rounded?: 'none' | 'sm' | 'md' | 'lg' | 'full';
+    titleLines?: 1 | 2 | 3;
+    onCardClick?: (product: Product) => void;
+    onImageClick?: (product: Product) => void;
+    renderFooter?: (product: Product) => React.ReactNode;
+    renderHeader?: (product: Product) => React.ReactNode;
+    actionButton?: React.ReactNode;
+    showAddButton?: boolean;
+    initialQuantity?: number;
+    onQuantityChange?: (product: Product, quantity: number) => void;
+    addButtonIcon?: React.ReactNode;
+    maxQuantity?: number;
+    quantityControlProps?: Partial<QuantityControlProps>;
+    customAddButton?: React.ReactNode;
+    customQuantityControl?: React.ReactNode;
+};
+export declare const ProductCard: ({ product, className, imageClassName, contentClassName, titleClassName, colorClassName, priceClassName, descriptionClassName, badgeClassName, aspectRatio, imagePosition, imageObjectFit, layout, hoverEffect, renderBadges, renderColor, renderDescription, elevationLevel, rounded, titleLines, onCardClick, onImageClick, renderFooter, renderHeader, actionButton, showAddButton, initialQuantity, onQuantityChange, addButtonIcon, maxQuantity, quantityControlProps, customAddButton, customQuantityControl, }: ProductCardProps) => React.JSX.Element;