@q2devel/q2-storybook 1.0.66 → 1.0.68

package/dist/components/Base/badge/Badge.d.ts

@@ -1,4 +1,4 @@
-import { MouseEvent, ReactNode } from 'react';
+import { MouseEvent, ReactNode } from "react";
 interface BadgeProps {
     children: ReactNode;
     onClick?: (e: MouseEvent) => void;

package/dist/components/Base/badge/Badge.js

@@ -1,4 +1,4 @@
-'use client';
+"use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const Badge = ({ children, onClick, color = 'bg-blue-100 text-blue-800', className = '', labelClassName = '', rightIcon, }) => (_jsxs("span", { className: `inline-flex items-center rounded px-2.5 py-0.5 text-xs font-medium ${color} ${className}`, onClick: onClick, children: [_jsx("span", { className: labelClassName, children: children }), rightIcon && _jsx("span", { className: "ml-1", children: rightIcon })] }));
+const Badge = ({ children, onClick, color = "bg-blue-100 text-blue-800", className = "", labelClassName = "", rightIcon, }) => (_jsxs("span", { className: `inline-flex items-center rounded px-2.5 py-0.5 text-xs font-medium ${color} ${className}`, onClick: onClick, children: [_jsx("span", { className: labelClassName, children: children }), rightIcon && _jsx("span", { className: "ml-1", children: rightIcon })] }));
 export default Badge;

package/dist/components/Base/image-gallery-modal/ImageGalleryModal.d.ts

@@ -0,0 +1,11 @@
+export type ImageGalleryProps = {
+    images: Array<{
+        href: string;
+        alt: string;
+    }>;
+    isOpen: boolean;
+    initialIndex?: number;
+    onClose: () => void;
+    onImageChange?: (index: number) => void;
+};
+export declare const ImageGalleryModal: ({ images, isOpen, initialIndex, onClose, onImageChange, }: ImageGalleryProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/components/Base/image-gallery-modal/ImageGalleryModal.js

@@ -0,0 +1,49 @@
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Dialog, DialogBackdrop, DialogPanel } from '@headlessui/react';
+import { ChevronLeftIcon, ChevronRightIcon, XMarkIcon } from '@heroicons/react/24/outline';
+import { useEffect, useState } from 'react';
+export const ImageGalleryModal = ({ images, isOpen, initialIndex = 0, onClose, onImageChange, }) => {
+    const [currentImageIndex, setCurrentImageIndex] = useState(initialIndex);
+    useEffect(() => {
+        setCurrentImageIndex(initialIndex);
+    }, [initialIndex]);
+    useEffect(() => {
+        const handleKeyDown = (event) => {
+            if (!isOpen)
+                return;
+            switch (event.key) {
+                case 'ArrowLeft':
+                    goToPrevImage();
+                    break;
+                case 'ArrowRight':
+                    goToNextImage();
+                    break;
+                case 'Escape':
+                    onClose();
+                    break;
+            }
+        };
+        document.addEventListener('keydown', handleKeyDown);
+        return () => document.removeEventListener('keydown', handleKeyDown);
+    }, [isOpen]);
+    const goToNextImage = () => {
+        const newIndex = currentImageIndex === images.length - 1 ? 0 : currentImageIndex + 1;
+        setCurrentImageIndex(newIndex);
+        onImageChange?.(newIndex);
+    };
+    const goToPrevImage = () => {
+        const newIndex = currentImageIndex === 0 ? images.length - 1 : currentImageIndex - 1;
+        setCurrentImageIndex(newIndex);
+        onImageChange?.(newIndex);
+    };
+    const goToImage = (index) => {
+        setCurrentImageIndex(index);
+        onImageChange?.(index);
+    };
+    if (!isOpen || images.length === 0)
+        return null;
+    return (_jsxs(Dialog, { open: isOpen, onClose: onClose, className: "relative z-50", children: [_jsx(DialogBackdrop, { className: "fixed inset-0 bg-black/75" }), _jsx("div", { className: "fixed inset-0 flex items-center justify-center p-4", children: _jsxs(DialogPanel, { className: "relative w-full max-w-7xl max-h-full", children: [_jsx("button", { onClick: onClose, className: "absolute top-4 right-4 z-10 bg-black/50 text-white p-2 rounded-full hover:bg-black/70 transition-colors", "aria-label": "Close gallery", children: _jsx(XMarkIcon, { className: "h-6 w-6" }) }), _jsxs("div", { className: "relative bg-white rounded-lg overflow-hidden", children: [_jsx("img", { src: images[currentImageIndex]?.href, alt: images[currentImageIndex]?.alt, className: "w-full h-auto max-h-[80vh] object-contain" }), images.length > 1 && (_jsxs(_Fragment, { children: [_jsx("button", { onClick: goToPrevImage, className: "absolute left-4 top-1/2 -translate-y-1/2 bg-black/50 text-white p-3 rounded-full hover:bg-black/70 transition-colors", "aria-label": "Previous image", children: _jsx(ChevronLeftIcon, { className: "h-6 w-6" }) }), _jsx("button", { onClick: goToNextImage, className: "absolute right-4 top-1/2 -translate-y-1/2 bg-black/50 text-white p-3 rounded-full hover:bg-black/70 transition-colors", "aria-label": "Next image", children: _jsx(ChevronRightIcon, { className: "h-6 w-6" }) })] }))] }), images.length > 1 && (_jsx("div", { className: "mt-4 flex justify-center gap-2 flex-wrap max-h-24 overflow-y-auto", children: images.map((image, index) => (_jsx("button", { onClick: () => goToImage(index), className: `flex-shrink-0 w-16 h-16 border-2 rounded overflow-hidden transition-colors ${index === currentImageIndex
+                                    ? 'border-[var(--primary)]'
+                                    : 'border-gray-300 hover:border-gray-400'}`, "aria-label": `View image ${index + 1}`, children: _jsx("img", { src: image.href, alt: image.alt, className: "w-full h-full object-contain" }) }, index))) })), _jsxs("div", { className: "absolute bottom-4 left-1/2 -translate-x-1/2 bg-black/50 text-white px-3 py-1 rounded-full text-sm", children: [currentImageIndex + 1, " / ", images.length] })] }) })] }));
+};

package/dist/components/Base/modal/Modal.js

@@ -7,6 +7,6 @@ export const Modal = ({ title, description, descriptionClassName, buttonText, sh
     const handleClose = (value) => {
         onClose?.();
     };
-    return (_jsxs(Dialog, { open: isOpen, onClose: handleClose, className: buildClassesByJoining('relative z-10', className), children: [_jsx(DialogBackdrop, { transition: true, className: buildClassesByJoining('fixed inset-0 bg-gray-500/75 transition-opacity data-closed:opacity-0 data-enter:duration-300 data-enter:ease-out data-leave:duration-200 data-leave:ease-in', backdropClassName) }), _jsx("div", { className: "fixed inset-0 z-10 w-screen overflow-y-auto", children: _jsx("div", { className: "flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0", children: _jsxs(DialogPanel, { transition: true, className: buildClassesByJoining('relative transform overflow-hidden rounded-lg bg-white px-4 pt-5 pb-4 text-left shadow-xl transition-all data-closed:translate-y-4 data-closed:opacity-0 data-enter:duration-300 data-enter:ease-out data-leave:duration-200 data-leave:ease-in sm:my-8 sm:w-full sm:max-w-sm sm:p-6 data-closed:sm:translate-y-0 data-closed:sm:scale-95', panelClassName), children: [showCloseButton && (_jsxs("button", { type: "button", className: buildClassesByJoining('absolute top-4 right-4 text-gray-400 hover:text-gray-500 focus:outline-none', closeButtonClassName), onClick: () => onClose?.(), children: [_jsx("span", { className: "sr-only", children: "Close" }), _jsx(XMarkIcon, { className: "h-6 w-6", "aria-hidden": "true" })] })), _jsxs("div", { children: [showIcon && (_jsx("div", { className: buildClassesByJoining('mx-auto flex size-12 items-center justify-center rounded-full', iconBackgroundColor), children: _jsx("div", { className: iconColor, children: icon }) })), _jsxs("div", { className: "mt-3 text-center sm:mt-5", children: [title && (_jsx(DialogTitle, { as: "h3", className: "text-base font-semibold text-gray-900", children: title })), _jsx("div", { className: buildClassesByJoining('mt-2', descriptionClassName), children: description })] })] }), buttonText && (_jsx("div", { className: "mt-5 sm:mt-6", children: _jsx("button", { type: "button", onClick: () => onClose?.(), className: buildClassesByJoining('inline-flex w-full justify-center rounded-md bg-green-600 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-green-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-green-600', buttonClassName), children: buttonText }) }))] }) }) })] }));
+    return (_jsxs(Dialog, { open: isOpen, onClose: handleClose, className: buildClassesByJoining('relative z-10', className), children: [_jsx(DialogBackdrop, { transition: true, className: buildClassesByJoining('fixed inset-0 bg-gray-500/75 transition-opacity data-closed:opacity-0 data-enter:duration-300 data-enter:ease-out data-leave:duration-200 data-leave:ease-in', backdropClassName) }), _jsx("div", { className: "fixed inset-0 z-10 w-screen overflow-y-auto", children: _jsx("div", { className: "flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0", children: _jsxs(DialogPanel, { transition: true, className: buildClassesByJoining('relative transform overflow-hidden rounded-lg bg-white px-4 pt-5 pb-4 text-left shadow-xl transition-all data-closed:translate-y-4 data-closed:opacity-0 data-enter:duration-300 data-enter:ease-out data-leave:duration-200 data-leave:ease-in sm:my-8 sm:w-full sm:max-w-sm sm:p-6 data-closed:sm:translate-y-0 data-closed:sm:scale-95', panelClassName), children: [showCloseButton && (_jsxs("button", { type: "button", className: buildClassesByJoining('absolute top-4 right-4 text-gray-400 hover:text-gray-500 focus:outline-none', closeButtonClassName), onClick: () => onClose?.(), children: [_jsx("span", { className: "sr-only", children: "Close" }), _jsx(XMarkIcon, { className: "h-6 w-6", "aria-hidden": "true" })] })), _jsxs("div", { children: [showIcon && (_jsx("div", { className: buildClassesByJoining('mx-auto flex size-12 items-center justify-center rounded-full', iconBackgroundColor), children: _jsx("div", { className: iconColor, children: icon }) })), _jsxs("div", { className: "mt-3 text-center sm:mt-5", children: [title && (_jsx(DialogTitle, { as: "h3", className: "text-base font-semibold text-gray-900", children: title })), _jsx("div", { className: buildClassesByJoining('mt-2', descriptionClassName), children: description })] })] }), buttonText && (_jsx("div", { className: "mt-5 sm:mt-6", children: _jsx("button", { type: "button", onClick: () => onClose?.(), className: buildClassesByJoining('inline-flex w-full justify-center rounded-md bg-green-600 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-green-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-green-600', buttonClassName), children: buttonText }) })), buttonText && (_jsx("div", { className: "mt-5 sm:mt-6", children: _jsx("button", { type: "button", onClick: () => onClose?.(), className: buildClassesByJoining('inline-flex w-full justify-center rounded-md bg-green-600 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-green-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-green-600', buttonClassName), children: buttonText }) }))] }) }) })] }));
 };
 export default Modal;

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React from "react";
 export type BasketProduct = {
     id: string;
     name: string;
@@ -12,8 +12,8 @@ export type BasketProduct = {
     color?: string;
     [key: string]: any;
 };
-export type BasketDialogVariant = 'default' | 'compact' | 'full';
-export type BasketDialogPosition = 'right' | 'left';
+export type BasketDialogVariant = "default" | "compact" | "full";
+export type BasketDialogPosition = "right" | "left";
 export type BasketDialogProps = {
     isOpen: boolean;
     onClose: () => void;

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

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

package/dist/components/Ecommerce/category-tree/CategoryTree.js

@@ -1,4 +1,4 @@
-'use client';
+"use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { MinusIcon, PlusIcon } from '@heroicons/react/20/solid';
 import { useEffect, useState } from 'react';

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

@@ -1,5 +1,6 @@
 import { Product } from '@q2devel/q2-core';
 import React from 'react';
+import { PriceFormatOptions } from '../../../utils/generalHelperFunction';
 export type Wishlist = {
     id: string;
     name: string;
@@ -34,6 +35,10 @@ export type ProductCardProps = {
     actionButton?: React.ReactNode;
     showAddButton?: boolean;
     showAddButtonOnHover?: boolean;
+    addButtonPosition?: 'overlay' | 'bottom';
+    addButtonAlignment?: 'left' | 'center' | 'right';
+    addButtonText?: string;
+    addButtonBottomClassName?: string;
     borderOnHoverClassName?: string;
     currentQuantity: number;
     onQuantityChange?: (product: Product, quantity: number) => void;
@@ -65,5 +70,7 @@ export type ProductCardProps = {
     isDeletePending?: boolean;
     deleteButtonSize?: 'sm' | 'md' | 'lg';
     deleteButtonPosition?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
+    priceFormatOptions?: PriceFormatOptions;
+    quantUnit?: string;
 };
-export declare const ProductCard: ({ product, href, className, imageClassName, contentClassName, titleClassName, colorClassName, priceClassName, descriptionClassName, badgeClassName, aspectRatio, imagePosition, imageObjectFit, layout, hoverEffect, renderBadges, renderColor, renderDescription, elevationLevel, rounded, titleLines, onCardClick, onImageClick, renderFooter, renderHeader, renderVariationName, actionButton, showAddButton, showAddButtonOnHover, borderOnHoverClassName, currentQuantity, onQuantityChange, addButtonIcon, maxQuantity, controlsClassName, buttonClassName, quantityClassName, customAddButton, disabled, locale, cartMode, showSpinnerInAdd, showWishlistButton, isInWishlist, onWishlistToggle, wishlistButtonClassName, isWishlistPending, enableMultipleWishlists, wishlists, onAddToWishlist, onRemoveFromWishlist, onCreateWishlist, wishlistDropdownClassName, productWishlistIds, showDeleteButton, onDelete, deleteButtonClassName, isDeletePending, deleteButtonSize, deleteButtonPosition, }: ProductCardProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ProductCard: ({ product, href, className, imageClassName, contentClassName, titleClassName, priceClassName, descriptionClassName, badgeClassName, aspectRatio, imagePosition, imageObjectFit, layout, hoverEffect, renderBadges, renderColor, renderDescription, elevationLevel, rounded, titleLines, onCardClick, onImageClick, renderFooter, renderHeader, renderVariationName, actionButton, showAddButton, showAddButtonOnHover, addButtonPosition, addButtonAlignment, addButtonText, addButtonBottomClassName, borderOnHoverClassName, currentQuantity, onQuantityChange, addButtonIcon, maxQuantity, controlsClassName, buttonClassName, quantityClassName, customAddButton, disabled, locale, cartMode, showSpinnerInAdd, showWishlistButton, isInWishlist, onWishlistToggle, wishlistButtonClassName, isWishlistPending, enableMultipleWishlists, wishlists, onAddToWishlist, onRemoveFromWishlist, onCreateWishlist, wishlistDropdownClassName, productWishlistIds, showDeleteButton, onDelete, deleteButtonClassName, isDeletePending, deleteButtonSize, deleteButtonPosition, priceFormatOptions, quantUnit, }: ProductCardProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Ecommerce/product-card/ProductCard.js

@@ -1,30 +1,39 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { formatPrice } from '../../../utils/generalHelperFunction';
-import { buildClassesByJoining } from '../../../utils/StyleHelper';
 import { ShoppingBagIcon } from '@heroicons/react/24/solid';
-import { useCallback, useRef, useState } from 'react';
+import parseHTML from 'html-react-parser';
+import { useCallback, useState } from 'react';
+import { formatPriceForHTML, formatPriceString, } from '../../../utils/generalHelperFunction';
+import { buildClassesByJoining } from '../../../utils/StyleHelper';
+import Badge from '../../Base/badge/Badge';
 import AddToCart from '../../Base/button/AddToCart';
-import Heading from '../../Base/heading/Heading';
 import Button from '../../Base/button/Button';
+import Heading from '../../Base/heading/Heading';
 import Spinner from '../../Base/spinner/Spinner';
-import Badge from '../../Base/badge/Badge';
-import LikeButton from '../wishlist/LikeButton';
 import DeleteButton from '../wishlist/DeleteButton';
-export const ProductCard = ({ product, href, className, imageClassName, contentClassName, titleClassName, colorClassName, priceClassName, descriptionClassName, badgeClassName, aspectRatio = 'square', imagePosition = 'center', imageObjectFit = 'cover', layout = 'default', hoverEffect = 'opacity', renderBadges = true, renderColor = true, renderDescription = false, elevationLevel = 0, rounded = 'md', titleLines = 1, onCardClick, onImageClick, renderFooter, renderHeader, renderVariationName = false, actionButton, 
+import LikeButton from '../wishlist/LikeButton';
+export const ProductCard = ({ product, href, className, imageClassName, contentClassName, titleClassName, priceClassName, descriptionClassName, badgeClassName, aspectRatio = 'square', imagePosition = 'center', imageObjectFit = 'cover', layout = 'default', hoverEffect = 'opacity', renderBadges = true, renderColor = true, renderDescription = false, elevationLevel = 0, rounded = 'md', titleLines = 1, onCardClick, onImageClick, renderFooter, renderHeader, renderVariationName = false, actionButton, 
 // Add to cart functionality
-showAddButton = false, showAddButtonOnHover = false, borderOnHoverClassName = '', currentQuantity = 0, onQuantityChange, addButtonIcon = _jsx(ShoppingBagIcon, { className: "h-4 w-4" }), maxQuantity = 99, controlsClassName = '', buttonClassName = '', quantityClassName = '', customAddButton, disabled = false, locale, cartMode = 'full', showSpinnerInAdd = false, 
+showAddButton = false, showAddButtonOnHover = false, addButtonPosition = 'overlay', addButtonAlignment = 'center', addButtonText = 'Pridať do košíka', addButtonBottomClassName = '', borderOnHoverClassName = '', currentQuantity = 0, onQuantityChange, addButtonIcon = _jsx(ShoppingBagIcon, { className: "h-4 w-4" }), maxQuantity = 99, controlsClassName = '', buttonClassName = '', quantityClassName = '', customAddButton, disabled = false, locale, cartMode = 'full', showSpinnerInAdd = false, 
 // Wishlist functionality
 showWishlistButton = false, isInWishlist = false, onWishlistToggle, wishlistButtonClassName = '', isWishlistPending = false, 
 // Multiple wishlists support
 enableMultipleWishlists = false, wishlists = [], onAddToWishlist, onRemoveFromWishlist, onCreateWishlist, wishlistDropdownClassName = '', productWishlistIds = [], 
 // Delete functionality
-showDeleteButton = false, onDelete, deleteButtonClassName = '', isDeletePending = false, deleteButtonSize = 'md', deleteButtonPosition = 'top-right', }) => {
+showDeleteButton = false, onDelete, deleteButtonClassName = '', isDeletePending = false, deleteButtonSize = 'md', deleteButtonPosition = 'top-right', 
+// Price formatting - NOVÉ JEDNODUCHÉ API
+priceFormatOptions, quantUnit = '', }) => {
     const [showWishlistDropdown, setShowWishlistDropdown] = useState(false);
     const [showNewWishlistInput, setShowNewWishlistInput] = useState(false);
     const [newWishlistName, setNewWishlistName] = useState('');
-    const inputRef = useRef(null);
-    const showQuantityControls = currentQuantity > 0 || (disabled && currentQuantity === 0);
+    const getBottomButtonAlignment = () => {
+        const alignmentClasses = {
+            left: 'justify-start',
+            center: 'justify-center',
+            right: 'justify-end',
+        };
+        return alignmentClasses[addButtonAlignment];
+    };
     const shouldShowQuantityControls = () => {
         if (cartMode === 'add-only') {
             return false;
@@ -35,7 +44,7 @@ showDeleteButton = false, onDelete, deleteButtonClassName = '', isDeletePending
         if (cartMode === 'add-only') {
             return true;
         }
-        return showAddButton;
+        return showAddButton && currentQuantity === 0;
     };
     // Determine which icon to show
     const getButtonIcon = () => {
@@ -152,6 +161,18 @@ showDeleteButton = false, onDelete, deleteButtonClassName = '', isDeletePending
             onDelete(product);
         }
     }, [onDelete, product]);
-    return (_jsxs("div", { className: buildClassesByJoining('group relative h-full', layoutClass, elevationClass, onCardClick ? 'cursor-pointer' : '', borderOnHoverClassName, className), onClick: handleCardClick, children: [renderHeader && renderHeader(product), _jsxs("div", { className: buildClassesByJoining(imageLayoutClass, 'relative'), children: [product.badges && renderBadges && (_jsx("div", { className: "absolute top-2 left-2 z-10 flex flex-wrap gap-1", children: product.badges.map((badge, index) => (_jsx(Badge, { color: badge.color, children: badge.text }, index))) })), showDeleteButton ? (_jsx(DeleteButton, { show: showDeleteButton, onDelete: handleDelete, deleteButtonClassName: deleteButtonClassName, isDeletePending: isDeletePending, size: deleteButtonSize, position: deleteButtonPosition })) : (_jsx(LikeButton, { show: showWishlistButton, enableMultiple: enableMultipleWishlists, isInWishlist: isInWishlist, wishlists: wishlists, productWishlistIds: productWishlistIds, wishlistButtonClassName: wishlistButtonClassName, wishlistDropdownClassName: wishlistDropdownClassName, isWishlistPending: isWishlistPending, handleAddToWishlist: handleAddToWishlist, handleRemoveFromWishlist: handleRemoveFromWishlist, handleCreateNewWishlist: handleCreateNewWishlist, handleWishlistToggle: handleWishlistToggle })), _jsx("img", { alt: product.variation_images[0]?.alt, src: product.variation_images[0]?.href, className: buildClassesByJoining(aspectRatioClass, objectFitClass, objectPositionClass, hoverEffect !== 'none' ? hoverClass : '', roundedClass, 'bg-gray-200', onImageClick ? 'cursor-pointer' : '', imageClassName), onClick: handleImageClick }), _jsx("div", { className: showAddButtonOnHover === true ? 'opacity-0 group-hover:opacity-100 transition-opacity duration-300' : '', children: _jsx(AddToCart, { buttonClassName: buttonClassName, addButtonIcon: _jsx(ShoppingBagIcon, { className: "h-4 w-4" }), handleAddToCart: handleAddToCart, showAddButton: true, disabled: disabled }) })] }), _jsxs("div", { className: buildClassesByJoining('mt-4 h-full flex flex-col justify-between grow', contentLayoutClass, compactClass, contentClassName), children: [_jsxs("div", { className: "flex flex-col h-full justify-between", children: [_jsxs("div", { children: [_jsx(Heading, { level: 3, className: buildClassesByJoining('text-lg text-gray-700', titleLineClampClass, titleClassName), children: _jsxs(Button, { asLink: true, unstyled: true, href: href, children: [!onCardClick && (_jsx("span", { "aria-hidden": "true", className: "absolute inset-0" })), product.product_name] }) }), renderVariationName && product.variation_name && (_jsx(Heading, { className: 'text-md', level: 4, children: product.variation_name })), renderDescription && product.description && (_jsx("p", { className: buildClassesByJoining('mt-1 text-sm text-gray-500 line-clamp-2', descriptionClassName), children: product.description }))] }), _jsxs("div", { className: 'flex flex-col justify-between', children: [_jsx("p", { className: buildClassesByJoining('text-md font-bold text-gray-900', priceClassName), children: formatPrice(product.price, locale) }), _jsx("p", { className: buildClassesByJoining('text-sm font-normal text-gray-900 line-through', priceClassName), children: product?.discountPercent != null && product.discountPercent > 0 &&
-                                            formatPrice(product.price / (1 - product.discountPercent / 100), locale) })] })] }), actionButton && _jsx("div", { className: "mt-2", children: actionButton }), renderFooter && renderFooter(product)] })] }));
+    // Rozhodnutie či použiť HTML alebo string formát
+    const shouldUseHtml = priceFormatOptions?.numberFormat === 'decimal-index' ||
+        priceFormatOptions?.numberClassName ||
+        priceFormatOptions?.currencyClassName ||
+        priceFormatOptions?.containerClassName;
+    return (_jsxs("div", { className: buildClassesByJoining('group relative h-full', layoutClass, elevationClass, onCardClick ? 'cursor-pointer' : '', borderOnHoverClassName, className), onClick: handleCardClick, children: [renderHeader && renderHeader(product), _jsxs("div", { className: buildClassesByJoining(imageLayoutClass, 'relative'), children: [product.badges && renderBadges && (_jsx("div", { className: "absolute top-2 left-2 z-10 flex flex-wrap gap-1", children: product.badges.map((badge, index) => (_jsx(Badge, { color: badge.color, children: badge.text }, index))) })), showDeleteButton ? (_jsx(DeleteButton, { show: showDeleteButton, onDelete: handleDelete, deleteButtonClassName: deleteButtonClassName, isDeletePending: isDeletePending, size: deleteButtonSize, position: deleteButtonPosition })) : (_jsx(LikeButton, { show: showWishlistButton, enableMultiple: enableMultipleWishlists, isInWishlist: isInWishlist, wishlists: wishlists, productWishlistIds: productWishlistIds, wishlistButtonClassName: wishlistButtonClassName, wishlistDropdownClassName: wishlistDropdownClassName, isWishlistPending: isWishlistPending, handleAddToWishlist: handleAddToWishlist, handleRemoveFromWishlist: handleRemoveFromWishlist, handleCreateNewWishlist: handleCreateNewWishlist, handleWishlistToggle: handleWishlistToggle })), _jsx("img", { alt: product.variation_images[0]?.alt, src: product.variation_images[0]?.href, className: buildClassesByJoining(aspectRatioClass, objectFitClass, objectPositionClass, hoverEffect !== 'none' ? hoverClass : '', roundedClass, 'bg-gray-200', onImageClick ? 'cursor-pointer' : '', imageClassName), onClick: handleImageClick }), addButtonPosition === 'overlay' && (_jsx("div", { className: showAddButtonOnHover === true
+                            ? 'opacity-0 group-hover:opacity-100 transition-opacity duration-300'
+                            : '', children: _jsx(AddToCart, { buttonClassName: buttonClassName, addButtonIcon: getButtonIcon(), handleAddToCart: handleAddToCart, showAddButton: shouldShowAddButton(), disabled: disabled, customAddButton: customAddButton }) }))] }), _jsxs("div", { className: buildClassesByJoining('mt-4 h-full flex flex-col justify-between grow', contentLayoutClass, compactClass, contentClassName), children: [_jsxs("div", { className: "flex flex-col h-full justify-between", children: [_jsxs("div", { children: [_jsx(Heading, { level: 3, className: buildClassesByJoining('text-lg text-gray-700', titleLineClampClass, titleClassName), children: _jsxs(Button, { asLink: true, unstyled: true, href: href, children: [!onCardClick && (_jsx("span", { "aria-hidden": "true", className: "absolute inset-0" })), product.product_name] }) }), renderVariationName && product.variation_name && (_jsx(Heading, { className: "text-md", level: 4, children: product.variation_name })), renderDescription && product.description && (_jsx("span", { className: buildClassesByJoining('mt-1 text-sm text-gray-500 line-clamp-2', descriptionClassName), children: parseHTML(product.description) }))] }), _jsxs("div", { className: "flex flex-col justify-between", children: [shouldUseHtml ? (_jsxs("span", { className: "flex items-baseline gap-1", children: [_jsx("div", { className: buildClassesByJoining('text-md font-bold text-gray-900', priceClassName), dangerouslySetInnerHTML: formatPriceForHTML(product.price, locale, priceFormatOptions) }), quantUnit && (_jsx("p", { className: "text-md font-bold text-black", children: quantUnit }))] })) : (_jsxs("span", { className: "flex items-baseline gap-1", children: [_jsx("p", { className: buildClassesByJoining('text-md font-bold text-gray-900', priceClassName), children: formatPriceString(product.price, locale, priceFormatOptions) }), quantUnit && (_jsx("p", { className: "text-md font-bold text-black", children: quantUnit }))] })), product?.discountPercent != null &&
+                                        product.discountPercent > 0 &&
+                                        (shouldUseHtml ? (_jsxs("span", { className: "flex items-baseline gap-1", children: [_jsx("div", { className: buildClassesByJoining('text-sm font-normal text-gray-900 line-through', priceClassName), dangerouslySetInnerHTML: formatPriceForHTML(product.price / (1 - product.discountPercent / 100), locale, priceFormatOptions) }), quantUnit && (_jsx("p", { className: "text-sm font-normal text-black line-through", children: quantUnit }))] })) : (_jsxs("span", { className: "flex items-baseline gap-1", children: [_jsx("p", { className: buildClassesByJoining('text-sm font-normal text-gray-900 line-through', priceClassName), children: formatPriceString(product.price / (1 - product.discountPercent / 100), locale, priceFormatOptions) }), quantUnit && (_jsx("p", { className: "text-sm font-normal text-black line-through", children: quantUnit }))] }))), addButtonPosition === 'bottom' && (_jsx("div", { className: buildClassesByJoining('mt-3 flex w-full', getBottomButtonAlignment()), children: shouldShowQuantityControls() ? (
+                                        // Quantity controls
+                                        _jsxs("div", { className: buildClassesByJoining('flex items-center gap-2', controlsClassName), children: [_jsx(Button, { onClick: handleDecrement, className: buildClassesByJoining('w-8 h-8 flex items-center justify-center rounded border', addButtonBottomClassName), disabled: disabled || currentQuantity <= 0, children: "\u2212" }), _jsx("span", { className: buildClassesByJoining('mx-2 font-medium', quantityClassName), children: currentQuantity }), _jsx(Button, { onClick: handleIncrement, className: buildClassesByJoining('w-8 h-8 flex items-center justify-center rounded border', addButtonBottomClassName), disabled: disabled || currentQuantity >= maxQuantity, children: "+" })] })) : shouldShowAddButton() ? (
+                                        // Add button
+                                        customAddButton || (_jsxs(Button, { onClick: handleAddToCart, className: buildClassesByJoining('flex items-center gap-2 px-4 py-2 rounded-md transition-colors', disabled ? 'opacity-50 cursor-not-allowed' : '', addButtonBottomClassName), disabled: disabled, children: [getButtonIcon(), _jsx("span", { children: addButtonText })] }))) : null }))] })] }), actionButton && _jsx("div", { className: "mt-2", children: actionButton }), renderFooter && renderFooter(product)] })] }));
 };

package/dist/components/Ecommerce/product-detail/ProductDetail.d.ts

@@ -0,0 +1,76 @@
+import { HorizontalTabProps } from '@/components/Web/tabs/HorizontalTab';
+import { PriceFormatOptions } from '@/utils/generalHelperFunction';
+import { Product, ProductVariation } from '@q2devel/q2-core';
+export type ProductDetail = {
+    name: string;
+    items: string[];
+};
+export type ProductCardWishlist = {
+    id: string;
+    name: string;
+};
+export type ProductProps = {
+    name: string;
+    price: number;
+    href: string;
+    discountPercent?: number;
+    rating?: number;
+    images: {
+        href: string;
+        alt: string;
+    }[];
+    description: string;
+    detail?: HorizontalTabProps;
+    showColors?: boolean;
+    buttonText?: string;
+    className?: string;
+    product?: Product;
+    showAddButton?: boolean;
+    currentQuantity: number;
+    onQuantityChange?: (product: Product, quantity: number) => void;
+    maxQuantity?: number;
+    disabled?: boolean;
+    badges?: {
+        text: string;
+        color: string;
+    }[];
+    showVariations?: boolean;
+    variations: ProductVariation[];
+    currentVariationId: string;
+    cartMode?: 'full' | 'add-only';
+    onOpenBasket?: () => void;
+    showWishlistButton?: boolean;
+    isInWishlist?: boolean;
+    onWishlistToggle?: (product: Product) => void;
+    enableMultipleWishlists?: boolean;
+    wishlists?: ProductCardWishlist[];
+    onAddToWishlist?: (product: Product, wishlistId: string) => void;
+    onRemoveFromWishlist?: (product: Product, wishlistId: string) => void;
+    onCreateWishlist?: (name: string, product: Product) => void;
+    productWishlistIds?: string[];
+    isWishlistPending?: boolean;
+    isLogged?: boolean;
+    onWishlistTextClick?: () => void;
+    showWishlistDropdown?: boolean;
+    onCloseWishlistDropdown?: () => void;
+    onAddToSpecificWishlist?: (wishlistId: string) => void;
+    onRemoveFromSpecificWishlist?: (wishlistId: string) => void;
+    onCreateNewWishlistFromDropdown?: (name: string) => void;
+    onShippingOptionsClick?: () => void;
+    isWatchdogEnabled?: boolean;
+    onWatchdogClick?: () => void;
+    onDemandClick?: () => void;
+    translations: {
+        recommendedPrice: string;
+        shippingDetailFree: string;
+        shippingDetailFee: string;
+        watchDog: string;
+        question: string;
+        optionOfShipping: string;
+        addToWishlist: string;
+    };
+    locale: string;
+    quantUnit?: string;
+    priceFormatOptions?: PriceFormatOptions;
+};
+export declare const ProductDetail: ({ name, price, href, discountPercent, description, detail, buttonText, className, product, currentQuantity, onQuantityChange, maxQuantity, disabled, badges, showVariations, variations, currentVariationId, cartMode, onOpenBasket, showWishlistButton, isInWishlist, onWishlistToggle, enableMultipleWishlists, wishlists, onAddToWishlist, onRemoveFromWishlist, onCreateWishlist, productWishlistIds, isWishlistPending, isLogged, onWishlistTextClick, showWishlistDropdown, onCloseWishlistDropdown, onAddToSpecificWishlist, onRemoveFromSpecificWishlist, onCreateNewWishlistFromDropdown, onShippingOptionsClick, isWatchdogEnabled, onWatchdogClick, onDemandClick, translations, locale, quantUnit, priceFormatOptions, }: ProductProps) => import("react/jsx-runtime").JSX.Element | null;