@q2devel/q2-storybook 1.0.65 → 1.0.67

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/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,8 +1,8 @@
-'use client';
+"use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { buildClassesByJoining } from '@/utils/StyleHelper';
 import { MinusIcon, PlusIcon } from '@heroicons/react/20/solid';
 import { useEffect, useState } from 'react';
+import { buildClassesByJoining } from '../../../utils/StyleHelper';
 import Button from '../../Base/button/Button';
 export const findChildren = (term, terms) => {
     const children = terms

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,6 @@ export type ProductCardProps = {
     isDeletePending?: boolean;
     deleteButtonSize?: 'sm' | 'md' | 'lg';
     deleteButtonPosition?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
+    priceFormatOptions?: PriceFormatOptions;
 };
-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, }: 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, }) => {
     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("p", { 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 ? (_jsx("div", { className: buildClassesByJoining('text-md font-bold text-gray-900', priceClassName), dangerouslySetInnerHTML: formatPriceForHTML(product.price, locale, priceFormatOptions) })) : (_jsx("p", { className: buildClassesByJoining('text-md font-bold text-gray-900', priceClassName), children: formatPriceString(product.price, locale, priceFormatOptions) })), product?.discountPercent != null &&
+                                        product.discountPercent > 0 &&
+                                        (shouldUseHtml ? (_jsx("div", { className: buildClassesByJoining('text-sm font-normal text-gray-900 line-through', priceClassName), dangerouslySetInnerHTML: formatPriceForHTML(product.price / (1 - product.discountPercent / 100), locale, priceFormatOptions) })) : (_jsx("p", { className: buildClassesByJoining('text-sm font-normal text-gray-900 line-through', priceClassName), children: formatPriceString(product.price / (1 - product.discountPercent / 100), locale, priceFormatOptions) }))), 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/Forms/contact-form/ContactForm.js

@@ -2,6 +2,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 import { EnvelopeIcon, PhoneIcon, UserIcon, ChatBubbleLeftIcon, BuildingOffice2Icon, } from "@heroicons/react/24/outline";
+import TextField from "../text-field/TextField";
+import TextArea from "../text-area/TextArea";
 export default function ContactForm({ title, color = "gray", }) {
     const [agreed, setAgreed] = useState(false);
     const colorMap = {
@@ -13,6 +15,8 @@ export default function ContactForm({ title, color = "gray", }) {
             checkbox: "accent-gray-700",
             button: "border border-white bg-[#2c2f36] text-white",
             titleStyle: "text-3xl font-sans uppercase text-center",
+            placeholder: "placeholder-gray-400",
+            colorMode: "light",
         },
         gray: {
             background: "bg-[#2c2f36]",
@@ -22,8 +26,10 @@ export default function ContactForm({ title, color = "gray", }) {
             checkbox: "accent-white",
             button: "border border-white bg-[#2c2f36] text-white",
             titleStyle: "text-3xl font-sans uppercase text-center",
+            placeholder: "placeholder-gray-400",
+            colorMode: "dark",
         },
     };
     const styles = colorMap[color] ?? colorMap.gray;
-    return (_jsxs("form", { className: `${styles.background} ${styles.text} p-6 md:p-10 rounded-md w-[400px] md:w-[500px] mx-auto space-y-6`, children: [title && (_jsxs("h2", { className: styles.titleStyle, children: [title.split(" ").slice(0, -1).join(" "), " ", _jsx("span", { className: "text-[#c26b38]", children: title.split(" ").slice(-1) })] })), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [_jsxs("div", { className: "relative", children: [_jsx(UserIcon, { className: `absolute left-2 top-1/2 transform -translate-y-1/2 h-5 w-5 ${styles.icon}` }), _jsx("input", { type: "text", className: `bg-transparent border-b ${styles.border} focus:outline-none pl-8 py-2 w-full placeholder-gray-400`, placeholder: "Jm\u00E9no", required: true })] }), _jsxs("div", { className: "relative", children: [_jsx(BuildingOffice2Icon, { className: `absolute left-2 top-1/2 transform -translate-y-1/2 h-5 w-5 ${styles.icon}` }), _jsx("input", { type: "text", className: `bg-transparent border-b ${styles.border} focus:outline-none pl-8 py-2 w-full placeholder-gray-400`, placeholder: "Firma" })] }), _jsxs("div", { className: "relative", children: [_jsx(EnvelopeIcon, { className: `absolute left-2 top-1/2 transform -translate-y-1/2 h-5 w-5 ${styles.icon}` }), _jsx("input", { type: "email", className: `bg-transparent border-b ${styles.border} focus:outline-none pl-8 py-2 w-full placeholder-gray-400`, placeholder: "Email", required: true })] }), _jsxs("div", { className: "relative", children: [_jsx(PhoneIcon, { className: `absolute left-2 top-1/2 transform -translate-y-1/2 h-5 w-5 ${styles.icon}` }), _jsx("input", { type: "tel", className: `bg-transparent border-b ${styles.border} focus:outline-none pl-8 py-2 w-full placeholder-gray-400`, placeholder: "Telefon", required: true })] }), _jsxs("div", { className: "md:col-span-2 relative", children: [_jsx(ChatBubbleLeftIcon, { className: `absolute left-2 top-3 h-5 w-5 ${styles.icon}` }), _jsx("textarea", { className: `bg-transparent border-b ${styles.border} focus:outline-none pl-8 py-2 w-full placeholder-gray-400`, placeholder: "Zpr\u00E1va..." })] })] }), _jsxs("div", { className: "flex items-center space-x-3", children: [_jsx("input", { id: "agree", type: "checkbox", checked: agreed, onChange: () => setAgreed(!agreed), className: `bg-transparent border ${styles.border} rounded-sm ${styles.checkbox}` }), _jsx("label", { htmlFor: "agree", className: "text-sm", children: "Souhlas s pou\u017Eit\u00EDm osobn\u00EDch \u00FAdaj\u016F" })] }), _jsx("button", { type: "submit", className: `px-6 py-2 uppercase text-sm ${styles.button}`, children: "ODESLAT" })] }));
+    return (_jsxs("form", { className: `${styles.background} ${styles.text} p-6 md:p-10 rounded-md w-[400px] md:w-[500px] mx-auto space-y-6`, children: [title && (_jsxs("h2", { className: styles.titleStyle, children: [title.split(" ").slice(0, -1).join(" "), " ", _jsx("span", { className: "text-[#c26b38]", children: title.split(" ").slice(-1) })] })), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [_jsx(TextField, { type: "text", placeholder: "Jm\u00E9no", required: true, variant: "flat", color: styles.colorMode, leftIcon: _jsx(UserIcon, { className: `h-5 w-5 ${styles.icon}` }), className: `${styles.border} bg-transparent ${styles.placeholder}` }), _jsx(TextField, { type: "text", placeholder: "Firma", variant: "flat", color: styles.colorMode, leftIcon: _jsx(BuildingOffice2Icon, { className: `h-5 w-5 ${styles.icon}` }), className: `${styles.border} bg-transparent ${styles.placeholder}` }), _jsx(TextField, { type: "email", placeholder: "Email", required: true, variant: "flat", color: styles.colorMode, leftIcon: _jsx(EnvelopeIcon, { className: `h-5 w-5 ${styles.icon}` }), className: `${styles.border} bg-transparent ${styles.placeholder}` }), _jsx(TextField, { type: "text", placeholder: "Telefon", required: true, variant: "flat", color: styles.colorMode, leftIcon: _jsx(PhoneIcon, { className: `h-5 w-5 ${styles.icon}` }), className: `${styles.border} bg-transparent ${styles.placeholder}` }), _jsxs("div", { className: "md:col-span-2 relative", children: [_jsx(ChatBubbleLeftIcon, { className: `absolute left-2 top-3 h-5 w-5 ${styles.icon}` }), _jsx(TextArea, { id: "message", placeholder: "Zpr\u00E1va...", variant: "flat", color: styles.colorMode, className: `pl-8 pt-2 w-full ${styles.placeholder}` })] })] }), _jsxs("div", { className: "flex items-center space-x-3", children: [_jsx("input", { id: "agree", type: "checkbox", checked: agreed, onChange: () => setAgreed(!agreed), className: `bg-transparent border ${styles.border} rounded-sm ${styles.checkbox}` }), _jsx("label", { htmlFor: "agree", className: "text-sm", children: "Souhlas s pou\u017Eit\u00EDm osobn\u00EDch \u00FAdaj\u016F" })] }), _jsx("button", { type: "submit", className: `px-6 py-2 uppercase text-sm ${styles.button}`, children: "ODESLAT" })] }));
 }

package/dist/components/Forms/text-area/TextArea.d.ts

@@ -1,8 +1,10 @@
-import { TextareaHTMLAttributes } from 'react';
+import { TextareaHTMLAttributes } from "react";
 export interface TextAreaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
     label?: string;
     valid?: boolean;
     message?: string;
+    variant?: "flat" | "rounded";
+    color?: "light" | "dark";
 }
-export declare const TextArea: ({ className, label, valid, message, ...props }: TextAreaProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TextArea: ({ className, label, valid, message, variant, color, ...props }: TextAreaProps) => import("react/jsx-runtime").JSX.Element;
 export default TextArea;

package/dist/components/Forms/text-area/TextArea.js

@@ -1,7 +1,19 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export const TextArea = ({ className, label, valid = true, message, ...props }) => {
-    return (_jsxs("div", { className: "flex flex-col gap-1 min-h-[80px]", role: "group", "aria-labelledby": label ? `${props.id}-label` : undefined, children: [label && (_jsx("label", { id: `${props.id}-label`, htmlFor: props.id, className: `text-sm font-medium ${!valid ? 'text-red-500' : 'text-gray-700'}`, children: label })), _jsx("textarea", { "aria-invalid": !valid ? 'true' : 'false', "aria-describedby": message ? `${props.id}-message` : undefined, "aria-required": props.required, className: `block w-full min-h-[200px] rounded-md border p-4 text-gray-900 text-sm lg:text-md shadow-md bg-white focus:ring-1 ${!valid
-                    ? 'border-red-500 focus:ring-red-500 focus:border-red-500'
-                    : 'border-gray-300 focus:ring-primary-500 focus:border-primary-500'} ${className || ''}`, ...props }), message && (_jsx("p", { id: `${props.id}-message`, className: `mt-1.5 text-sm ${!valid ? 'text-red-500' : 'text-gray-500'}`, role: !valid ? 'alert' : 'status', children: message }))] }));
+export const TextArea = ({ className, label, valid = true, message, variant = "rounded", color = "light", ...props }) => {
+    const baseClasses = `block w-full text-sm lg:text-md resize-none ${color === "dark" ? "text-white" : "text-gray-900"}`;
+    const variantClasses = variant === "flat"
+        ? `min-h-[120px] border-b bg-transparent rounded-none focus:rounded-none focus:outline-none focus:ring-0 focus:border-b-2 shadow-none ${valid
+            ? "border-gray-400 focus:border-primary-500"
+            : "border-red-500 focus:border-red-500"}`
+        : `min-h-[200px] rounded-md border p-4 shadow-md bg-white ${valid
+            ? "border-gray-300 focus:ring-primary-500 focus:border-primary-500"
+            : "border-red-500 focus:ring-red-500 focus:border-red-500"}`;
+    const labelColor = !valid
+        ? "text-red-500"
+        : color === "dark"
+            ? "text-white"
+            : "text-gray-700";
+    const messageColor = !valid ? "text-red-500" : "text-gray-500";
+    return (_jsxs("div", { className: "flex flex-col gap-1 min-h-[80px]", role: "group", "aria-labelledby": label ? `${props.id}-label` : undefined, children: [label && (_jsx("label", { id: `${props.id}-label`, htmlFor: props.id, className: `text-sm font-medium ${labelColor}`, children: label })), _jsx("textarea", { "aria-invalid": !valid ? "true" : "false", "aria-describedby": message ? `${props.id}-message` : undefined, "aria-required": props.required, className: `${baseClasses} ${variantClasses} ${className || ""}`, ...props }), message && (_jsx("p", { id: `${props.id}-message`, className: `mt-1.5 text-sm ${messageColor}`, role: !valid ? "alert" : "status", children: message }))] }));
 };
 export default TextArea;

package/dist/components/Forms/text-field/TextField.d.ts

@@ -1,5 +1,5 @@
-import { MouseEvent } from 'react';
-import { TextFieldType } from './TextField.types';
+import { MouseEvent } from "react";
+import { TextFieldType } from "./TextField.types";
 declare const _default: import("react").ForwardRefExoticComponent<Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "children" | "type" | "size"> & {
     label?: string | import("react").ReactNode;
     labelColor?: string;
@@ -18,5 +18,7 @@ declare const _default: import("react").ForwardRefExoticComponent<Omit<import("r
     showPasswordEyeIcon?: boolean;
     connected?: boolean;
     connectPosition?: "left" | "right" | "middle" | "none";
+    white?: boolean;
+    gray?: boolean;
 } & import("react").RefAttributes<HTMLInputElement>>;
 export default _default;

package/dist/components/Forms/text-field/TextField.js

@@ -1,80 +1,82 @@
-'use client';
+"use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { buildClassesByJoining } from '../../../utils/StyleHelper';
-import { EyeIcon, EyeSlashIcon } from '@heroicons/react/24/outline';
-import { forwardRef, useCallback, useId, useMemo, useState } from 'react';
-const TextField = ({ id: idProp, type: typeProp = 'text', label, labelColor = 'text-gray-700', labelType = 'outside', variant = 'rounded', size = 'md', color = 'primary', background = 'bg-white', autoComplete = 'off', valid = true, message, messageColor = 'text-gray-500', leftIcon, rightIcon, onLeftIconClick, onRightIconClick, showPasswordEyeIcon = true, connected = false, connectPosition = 'none', className, ...props }, ref) => {
+import { EyeIcon, EyeSlashIcon, } from "@heroicons/react/24/outline";
+import { forwardRef, useCallback, useId, useMemo, useState, } from "react";
+import { buildClassesByJoining } from "../../../utils/StyleHelper";
+const TextField = ({ id: idProp, type: typeProp = "text", label, labelColor = "text-gray-700", labelType = "outside", variant = "rounded", size = "md", color = "light", // NEW
+background = "bg-white", autoComplete = "off", valid = true, message, messageColor = "text-gray-500", leftIcon, rightIcon, onLeftIconClick, onRightIconClick, showPasswordEyeIcon = true, connected = false, connectPosition = "none", className, ...props }, ref) => {
     const id = useId();
-    const errorColor = 'text-red-500';
     const [showPassword, setShowPassword] = useState(false);
-    const type = useMemo(() => (typeProp === 'password' && showPassword ? 'text' : typeProp), [typeProp, showPassword]);
+    const type = useMemo(() => (typeProp === "password" && showPassword ? "text" : typeProp), [typeProp, showPassword]);
     const toggleShowPassword = useCallback((event) => {
         setShowPassword((prev) => !prev);
         if (onRightIconClick)
             onRightIconClick(event);
     }, [onRightIconClick]);
-    // Rozšírené variantné triedy pre spojené polia
     const variantClasses = {
-        normal: 'border',
-        rounded: 'border rounded-md',
-        flat: 'border-b focus-within:border-b-2 focus-within:ring-0 shadow-none',
+        normal: "border",
+        rounded: "border rounded-md",
+        flat: "border-b focus-within:border-b-2 focus-within:ring-0 shadow-none",
     };
-    // Upravené variantné triedy pre spojené polia
     const connectedVariantClasses = useMemo(() => {
         if (!connected)
             return variantClasses[variant];
-        if (variant === 'rounded') {
-            if (connectPosition === 'left')
-                return 'border rounded-r-md rounded-l-none border-l-0';
-            if (connectPosition === 'right')
-                return 'border rounded-l-md rounded-r-none border-r-0';
-            if (connectPosition === 'middle')
-                return 'border border-l-0 border-r-0 rounded-none';
+        if (variant === "rounded") {
+            if (connectPosition === "left")
+                return "border rounded-r-md rounded-l-none border-l-0";
+            if (connectPosition === "right")
+                return "border rounded-l-md rounded-r-none border-r-0";
+            if (connectPosition === "middle")
+                return "border border-l-0 border-r-0 rounded-none";
         }
-        if (connectPosition === 'left')
-            return 'border border-l-0';
-        if (connectPosition === 'right')
-            return 'border border-r-0';
-        if (connectPosition === 'middle')
-            return 'border border-l-0 border-r-0';
+        if (connectPosition === "left")
+            return "border border-l-0";
+        if (connectPosition === "right")
+            return "border border-r-0";
+        if (connectPosition === "middle")
+            return "border border-l-0 border-r-0";
         return variantClasses[variant];
     }, [connected, connectPosition, variant]);
     const sizeClasses = {
-        sm: 'py-0.5 px-3',
-        md: 'py-2 px-3',
+        sm: "py-0.5 px-3",
+        md: "py-2 px-3",
     };
     const labelTypeClasses = {
-        outside: 'block text-sm font-medium',
-        inside: 'block text-xs font-medium text-gray-900',
-        overlapping: 'absolute -top-2 left-2 -mt-px inline-block px-1 bg-white text-xs font-medium text-gray-900',
-        hidden: 'sr-only',
-    };
-    const containerClasses = buildClassesByJoining('relative border-gray-300 shadow-sm focus-within:ring-1', !valid
-        ? 'border-red-500 focus-within:ring-red-500'
-        : `focus-within:ring-${color}-500 focus-within:border-${color}-500`, connected ? connectedVariantClasses : variantClasses[variant], sizeClasses[size], background, labelType === 'outside' && 'mt-1', className);
-    const renderLeftIcon = () => {
-        if (!leftIcon)
-            return null;
-        return (_jsx("span", { className: buildClassesByJoining('absolute inset-y-0 left-0 pl-3 flex items-center', labelType === 'inside' && 'mt-4'), onClick: onLeftIconClick ? onLeftIconClick : undefined, children: leftIcon }));
+        outside: "block text-sm font-medium",
+        inside: "block text-xs font-medium text-gray-900",
+        overlapping: "absolute -top-2 left-2 -mt-px inline-block px-1 bg-white text-xs font-medium text-gray-900",
+        hidden: "sr-only",
     };
+    const containerClasses = buildClassesByJoining("relative border-gray-300 shadow-sm focus-within:ring-1", !valid
+        ? "border-red-500 focus-within:ring-red-500"
+        : `focus-within:ring-primary-500 focus-within:border-primary-500`, connected ? connectedVariantClasses : variantClasses[variant], sizeClasses[size], background, labelType === "outside" && "mt-1", className);
+    const errorColor = "text-red-500";
+    const textColor = color === "dark" ? "text-white" : "text-gray-900";
+    const labelTextColor = !valid
+        ? errorColor
+        : color === "dark"
+            ? "text-white"
+            : labelColor;
+    const effectiveMessageColor = !valid
+        ? errorColor
+        : color === "dark"
+            ? "text-gray-400"
+            : messageColor;
+    const renderLeftIcon = () => leftIcon ? (_jsx("span", { className: buildClassesByJoining("absolute inset-y-0 left-0 pl-3 flex items-center", labelType === "inside" && "mt-4"), onClick: onLeftIconClick, children: leftIcon })) : null;
     const renderRightIcon = () => {
-        if (!rightIcon && !(typeProp === 'password' && showPasswordEyeIcon))
+        if (!rightIcon && !(typeProp === "password" && showPasswordEyeIcon))
             return null;
         let icon = rightIcon;
-        if (typeProp === 'password' && showPasswordEyeIcon) {
+        if (typeProp === "password" && showPasswordEyeIcon) {
             const IconComponent = showPassword ? EyeIcon : EyeSlashIcon;
-            icon = (_jsx(IconComponent, { className: buildClassesByJoining('h-5 w-5', !valid ? 'text-red-500' : 'text-gray-400') }));
+            icon = (_jsx(IconComponent, { className: buildClassesByJoining("h-5 w-5", !valid ? "text-red-500" : "text-gray-400") }));
         }
         return (_jsx("span", { className: "absolute inset-y-0 right-0 pr-3 flex items-center cursor-pointer", onClick: toggleShowPassword, children: icon }));
     };
-    const renderLabel = () => {
-        if (!label)
-            return null;
-        return (_jsx("label", { htmlFor: id, className: buildClassesByJoining(labelTypeClasses[labelType], !valid ? errorColor : labelColor), children: label }));
-    };
-    return (_jsxs("div", { className: "min-h-[80px]", children: [labelType === 'outside' && renderLabel(), _jsxs("div", { className: containerClasses, children: [(labelType === 'overlapping' ||
-                        labelType === 'inside' ||
-                        labelType === 'hidden') &&
-                        renderLabel(), renderLeftIcon(), renderRightIcon(), _jsx("input", { ...props, ref: ref, id: id, autoComplete: autoComplete, type: type, className: buildClassesByJoining('block w-full border-0 p-0 text-gray-900 placeholder-gray-500 focus:ring-0 sm:text-sm bg-transparent outline-none', !!leftIcon && 'pl-6', !!rightIcon && 'pr-6') })] }), message && (_jsx("p", { className: buildClassesByJoining('mt-1.5 text-sm', !valid ? errorColor : messageColor), children: message }))] }));
+    const renderLabel = () => label ? (_jsx("label", { htmlFor: id, className: buildClassesByJoining(labelTypeClasses[labelType], labelTextColor), children: label })) : null;
+    return (_jsxs("div", { className: "min-h-[80px]", children: [labelType === "outside" && renderLabel(), _jsxs("div", { className: containerClasses, children: [(labelType === "overlapping" ||
+                        labelType === "inside" ||
+                        labelType === "hidden") &&
+                        renderLabel(), renderLeftIcon(), renderRightIcon(), _jsx("input", { ...props, ref: ref, id: id, autoComplete: autoComplete, type: type, className: buildClassesByJoining("block w-full border-0 p-0 placeholder-gray-500 focus:ring-0 sm:text-sm bg-transparent outline-none", !!leftIcon && "pl-6", !!rightIcon && "pr-6", textColor) })] }), message && (_jsx("p", { className: buildClassesByJoining("mt-1.5 text-sm", effectiveMessageColor), children: message }))] }));
 };
 export default forwardRef(TextField);

package/dist/components/Forms/text-field/TextField.types.d.ts

@@ -21,4 +21,6 @@ export type TextFieldProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'childr
     showPasswordEyeIcon?: boolean;
     connected?: boolean;
     connectPosition?: 'left' | 'right' | 'middle' | 'none';
+    white?: boolean;
+    gray?: boolean;
 };

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

@@ -1,5 +1,5 @@
-import { ReactNode } from 'react';
 import { BannerItem } from '@q2devel/q2-core';
+import { ReactNode } from 'react';
 export type ControlsType = 'arrows' | 'dots' | 'both' | 'none';
 export type BannerProps = {
     items: BannerItem[];

package/dist/components/Web/dynamic-grid/DynamicLayout.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+type DynamicLayoutProps = {
+    x: number;
+    y: number;
+    gap?: number;
+};
+export declare const DynamicLayout: React.FC<DynamicLayoutProps>;
+export {};