@q2devel/q2-storybook 1.0.40 → 1.0.41

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

@@ -0,0 +1,11 @@
+import { MouseEvent, ReactNode } from 'react';
+interface BadgeProps {
+    children: ReactNode;
+    onClick?: (e: MouseEvent) => void;
+    color?: string;
+    className?: string;
+    labelClassName?: string;
+    rightIcon?: ReactNode;
+}
+declare const Badge: ({ children, onClick, color, className, labelClassName, rightIcon, }: BadgeProps) => import("react/jsx-runtime").JSX.Element;
+export default Badge;

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

@@ -0,0 +1,4 @@
+'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 })] }));
+export default Badge;

package/dist/components/Base/button/AddToCart.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+interface AddToCartProps {
+    showAddButton: boolean;
+    disabled?: boolean;
+    customAddButton?: ReactNode;
+    addButtonIcon: ReactNode;
+    handleAddToCart: () => void;
+}
+declare const AddToCart: ({ showAddButton, disabled, customAddButton, addButtonIcon, handleAddToCart, }: AddToCartProps) => import("react/jsx-runtime").JSX.Element | null;
+export default AddToCart;

package/dist/components/Base/button/AddToCart.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const AddToCart = ({ showAddButton, disabled = false, customAddButton, addButtonIcon, handleAddToCart, }) => {
+    if (!showAddButton)
+        return null;
+    return (_jsx("div", { className: "absolute bottom-2 right-2 z-10", onClick: (e) => e.stopPropagation(), children: _jsx("div", { className: "relative", children: customAddButton || (_jsx("button", { onClick: handleAddToCart, className: `p-2 w-10 h-10 flex items-center justify-center rounded-full bg-green-500 text-white shadow-md hover:bg-green-600 transition-colors duration-200 ${disabled ? 'opacity-50 cursor-not-allowed' : ''}`, "aria-label": "Add to cart", disabled: disabled, children: addButtonIcon })) }) }));
+};
+export default AddToCart;

package/dist/components/Base/button/Button.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+export interface ButtonProps {
+    children?: React.ReactNode;
+    label?: string;
+    variant?: 'primary' | 'secondary';
+    disabled?: boolean;
+    asLink?: boolean;
+    openInNewTab?: boolean;
+    href?: string;
+    onClick?: (event: any) => void;
+    rounded?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
+    className?: string;
+    target?: string;
+    rel?: string;
+    unstyled?: boolean;
+}
+declare const Button: React.FC<ButtonProps>;
+export default Button;

package/dist/components/Base/button/Button.js

@@ -0,0 +1,38 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import Link from 'next/link';
+import buildClassesByJoining from '../../../utils/StyleHelper';
+const roundedClasses = {
+    none: 'rounded-none',
+    sm: 'rounded-sm',
+    md: 'rounded-md',
+    lg: 'rounded-lg',
+    xl: 'rounded-xl',
+    full: 'rounded-full',
+};
+const variantClasses = {
+    primary: 'bg-blue-500 hover:bg-blue-600 text-white',
+    secondary: 'bg-gray-500 hover:bg-gray-600 text-white',
+};
+const Button = ({ children, label, variant, disabled = false, asLink = false, openInNewTab = false, href, onClick, rounded = 'md', className = '', target, rel, unstyled = false, }) => {
+    const baseClasses = unstyled
+        ? className
+        : buildClassesByJoining('inline-block px-4 py-2 font-medium transition-colors duration-200', variantClasses[variant ?? 'primary'], roundedClasses[rounded], {
+            'opacity-50 cursor-not-allowed pointer-events-none': disabled,
+            'cursor-pointer': !disabled,
+        }, className);
+    const content = children ?? label;
+    if (asLink) {
+        if (!href) {
+            console.warn('Button is rendered as a link but "href" is not provided.');
+            return null;
+        }
+        // Pokud disabled, použij <span> místo <Link>, aby nešel kliknout
+        if (disabled) {
+            return (_jsx("span", { className: baseClasses, "aria-disabled": "true", children: content }));
+        }
+        return (_jsx(Link, { href: href, className: baseClasses, onClick: onClick, target: openInNewTab ? '_blank' : target, rel: openInNewTab ? 'noopener noreferrer' : rel, children: content }));
+    }
+    return (_jsx("button", { onClick: onClick, className: baseClasses, disabled: disabled, children: content }));
+};
+export default Button;

package/dist/components/Base/heading/Heading.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+interface HeadingProps {
+    level?: 1 | 2 | 3 | 4 | 5 | 6;
+    children: ReactNode;
+    className?: string;
+    id?: string;
+}
+declare const Heading: ({ level, children, className, id, }: HeadingProps) => import("react/jsx-runtime").JSX.Element;
+export default Heading;

package/dist/components/Base/heading/Heading.js

@@ -0,0 +1,16 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { buildClassesByJoining } from '../../../utils/StyleHelper';
+const Heading = ({ level = 1, children, className = '', id, }) => {
+    const Tag = `h${level}`;
+    const baseStyles = {
+        1: 'text-4xl font-bold mt-12 mb-8 text-gray-900',
+        2: 'text-3xl font-semibold text-gray-900',
+        3: 'text-2xl font-semibold text-gray-900',
+        4: 'text-xl font-medium text-gray-900',
+        5: 'text-lg font-medium text-gray-900',
+        6: 'text-base font-medium text-gray-900',
+    };
+    return (_jsx(Tag, { id: id, className: buildClassesByJoining(baseStyles[level], className), children: children }));
+};
+export default Heading;

package/dist/components/Base/modal/Modal.d.ts

@@ -0,0 +1,18 @@
+import { ReactNode } from 'react';
+interface ModalProps {
+    title: string;
+    description: string;
+    buttonText: string;
+    icon?: ReactNode;
+    iconBackgroundColor?: string;
+    iconColor?: string;
+    buttonClassName?: string;
+    panelClassName?: string;
+    backdropClassName?: string;
+    onClose?: () => void;
+    isOpen: boolean;
+    showCloseButton?: boolean;
+    closeButtonClassName?: string;
+}
+export declare const Modal: ({ title, description, buttonText, icon, iconBackgroundColor, iconColor, buttonClassName, panelClassName, backdropClassName, onClose, isOpen, showCloseButton, closeButtonClassName, }: ModalProps) => import("react/jsx-runtime").JSX.Element;
+export default Modal;

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

@@ -0,0 +1,12 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { buildClassesByJoining } from '../../../utils/StyleHelper';
+import { Dialog, DialogBackdrop, DialogPanel, DialogTitle } from '@headlessui/react';
+import { CheckIcon, XMarkIcon } from '@heroicons/react/24/outline';
+export const Modal = ({ title, description, buttonText, icon = _jsx(CheckIcon, { "aria-hidden": "true", className: "size-6" }), iconBackgroundColor = 'bg-green-100', iconColor = 'text-green-600', buttonClassName, panelClassName, backdropClassName, onClose, isOpen, showCloseButton = false, closeButtonClassName, }) => {
+    const handleClose = (value) => {
+        onClose?.();
+    };
+    return (_jsxs(Dialog, { open: isOpen, onClose: handleClose, className: "relative z-10", 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: [_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: [_jsx(DialogTitle, { as: "h3", className: "text-base font-semibold text-gray-900", children: title }), _jsx("div", { className: "mt-2", children: _jsx("p", { className: "text-sm text-gray-500", children: description }) })] })] }), _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/Base/spinner/Spinner.d.ts

@@ -0,0 +1,10 @@
+import { FC } from "react";
+type SpinnerSize = "sm" | "md" | "lg" | number;
+export interface SpinnerProps {
+    size?: SpinnerSize;
+    color?: string;
+    className?: string;
+    "aria-label"?: string;
+}
+export declare const Spinner: FC<SpinnerProps>;
+export default Spinner;

package/dist/components/Base/spinner/Spinner.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+const sizeMap = {
+    sm: "h-4 w-4",
+    md: "h-6 w-6",
+    lg: "h-10 w-10",
+};
+export const Spinner = ({ size = "md", color = "text-gray-500", className, "aria-label": ariaLabel = "Loading...", }) => {
+    const dimensionClass = typeof size === "number" ? `h-[${size}px] w-[${size}px]` : sizeMap[size];
+    return (_jsxs("svg", { className: clsx("animate-spin", dimensionClass, color, className), fill: "none", viewBox: "0 0 24 24", role: "status", "aria-label": ariaLabel, children: [_jsx("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }), _jsx("path", { className: "opacity-75", fill: "currentColor", d: "m4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" })] }));
+};
+export default Spinner;

package/dist/components/Base/tooltip/Tooltip.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import { ReactNode } from 'react';
+export interface TooltipRef {
+    show: () => void;
+    hide: () => void;
+}
+interface TooltipProps {
+    content?: ReactNode;
+    children: ReactNode;
+    backgroundColor?: string;
+    textColor?: string;
+    placement?: 'top' | 'bottom' | 'left' | 'right';
+    contentClassName?: string;
+    disabled?: boolean;
+    lazy?: boolean;
+}
+declare const Tooltip: React.ForwardRefExoticComponent<TooltipProps & React.RefAttributes<TooltipRef>>;
+export default Tooltip;

package/dist/components/Base/tooltip/Tooltip.js

@@ -0,0 +1,18 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+const Tooltip = forwardRef(({ content, children, backgroundColor = 'bg-black', textColor = 'text-white', placement = 'bottom', contentClassName = '', disabled = false, lazy = true, }, ref) => {
+    if (disabled)
+        return _jsx(_Fragment, { children: children });
+    return (_jsxs("span", { className: "relative group cursor-pointer", children: [children, content && (_jsx("span", { className: `absolute z-10 hidden group-hover:block
+                    ${placement === 'top'
+                    ? 'bottom-full mb-2'
+                    : placement === 'bottom'
+                        ? 'top-full mt-2'
+                        : placement === 'left'
+                            ? 'right-full mr-2'
+                            : 'left-full ml-2'}
+                    left-1/2 -translate-x-1/2 px-3 py-2 rounded ${backgroundColor} ${textColor}
+                    text-xs whitespace-pre-wrap ${contentClassName}`, children: content }))] }));
+});
+Tooltip.displayName = 'Tooltip';
+export default Tooltip;

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

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

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

@@ -0,0 +1,101 @@
+'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';
+// Helper funkcia pre formátovanie ceny
+const formatPrice = (price) => {
+    return new Intl.NumberFormat('cs-CZ', {
+        style: 'currency',
+        currency: 'CZK',
+    }).format(price);
+};
+export const BasketDialog = ({ 
+// Základné props
+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.', 
+// 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, 
+// Štýlovanie s predvolenými hodnotami
+customClassName = '', maxHeight = '100vh', animationDuration = 500, backdropOpacity = 0.75, 
+// Vlastné renderovanie
+renderCustomProduct, renderCustomFooter, 
+// Stav
+pendingUpdates = {}, processingItems = {}, }) => {
+    const handleCheckout = () => {
+        if (onCheckout) {
+            onCheckout();
+        }
+    };
+    const handleContinueShopping = () => {
+        if (onContinueShopping) {
+            onContinueShopping();
+        }
+        else {
+            onClose();
+        }
+    };
+    const handleIncrement = (productId, quantity) => {
+        if (onQuantityChange) {
+            onQuantityChange(productId, quantity + 1);
+        }
+    };
+    const handleDecrement = (productId, quantity) => {
+        if (onQuantityChange) {
+            if (quantity > 1) {
+                onQuantityChange(productId, quantity - 1);
+            }
+            else {
+                onQuantityChange(productId, 0);
+            }
+        }
+    };
+    const getVariantClasses = () => {
+        switch (variant) {
+            case 'compact':
+                return 'max-w-sm';
+            case 'full':
+                return 'max-w-2xl';
+            default:
+                return 'max-w-md';
+        }
+    };
+    const getPositionClasses = () => {
+        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) {
+                                                                return renderCustomProduct(product);
+                                                            }
+                                                            const displayQuantity = product.id in pendingUpdates
+                                                                ? pendingUpdates[product.id]
+                                                                : product.quantity;
+                                                            const isProcessing = processingItems[product.id] === true;
+                                                            return (_jsxs("li", { className: "flex py-6", children: [showProductImages &&
+                                                                        product.image && (_jsx("div", { className: "size-24 shrink-0 overflow-hidden rounded-md border border-gray-200", children: _jsx("img", { alt: product.image
+                                                                                .alt, src: product.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 &&
+                                                                                        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 &&
+                                                                                                            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 &&
+                                                                                                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'
+                                                            ? 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.d.ts

@@ -0,0 +1,14 @@
+import { Term } from '@q2devel/q2-core';
+type CategoryTreeProps = {
+    terms: Term[];
+    activeTerm: Term;
+    labels: {
+        category: string;
+    };
+    onTermClick?: (term: Term) => void;
+};
+export declare const findChildren: (term: Term, terms: Term[]) => Term[];
+export declare const flattenTermIds: (terms: Term[]) => string[];
+export declare const findParentTerm: (term: Term, terms: Term[]) => Term[];
+export default function CategoryTree({ terms, activeTerm, labels, onTermClick }: CategoryTreeProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,55 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PlusIcon, MinusIcon } from '@heroicons/react/20/solid';
+import { useState, useEffect } from 'react';
+import Button from '../../Base/button/Button';
+export const findChildren = (term, terms) => {
+    const children = terms
+        .filter((t) => t.parent?.drupal_internal__tid === term.id)
+        .map((child) => ({
+        ...child,
+        children: findChildren(child, terms),
+    }));
+    return children.sort((a, b) => a.name?.localeCompare(b.name || '') || 0);
+};
+export const flattenTermIds = (terms) => {
+    return terms.flatMap((term) => [
+        term.id,
+        ...(term.children ? flattenTermIds(term.children) : []),
+    ]);
+};
+export const findParentTerm = (term, terms) => {
+    let parent = terms.find((item) => item.id === term?.parent?.drupal_internal__tid);
+    if (parent !== undefined) {
+        return [term, ...findParentTerm(parent, terms)];
+    }
+    return [term];
+};
+function CategoryNode({ term, allTerms, level, activeTerm, parentIds, onTermClick, }) {
+    const children = findChildren(term, allTerms);
+    const hasChildren = children.length > 0;
+    const [isOpen, setIsOpen] = useState(false);
+    useEffect(() => {
+        if (parentIds?.includes(term.id) && term.id !== activeTerm.id) {
+            setIsOpen(true);
+        }
+    }, [term.id, parentIds, activeTerm.id]);
+    return (_jsxs("div", { className: "py-1", children: [_jsxs("div", { className: `
+          flex w-full items-center justify-between text-left text-sm
+          border-l-2 border-transparent
+          hover:border-green-500 transition-colors duration-200 cursor-pointer
+          ${term.id === activeTerm.id ? 'font-semibold text-green-700 underline border-green-700' : ''}
+          ${parentIds?.includes(term.id) && term.id !== activeTerm.id ? 'font-medium text-green-600' : 'text-gray-900'}
+          hover:text-green-600 select-none
+        `, style: { paddingLeft: `${level * 16}px` }, onClick: () => {
+                    if (hasChildren)
+                        setIsOpen((prev) => !prev);
+                    onTermClick?.(term);
+                }, children: [_jsx(Button, { asLink: true, unstyled: true, href: term.href, className: "flex-1", children: term.name }), hasChildren && (_jsxs("span", { className: "ml-2 flex items-center", children: [_jsx(PlusIcon, { className: `w-5 h-5 text-gray-400 ${isOpen ? 'hidden' : 'block'}` }), _jsx(MinusIcon, { className: `w-5 h-5 text-gray-400 ${isOpen ? 'block' : 'hidden'}` })] }))] }), hasChildren && isOpen && (_jsx("div", { className: "mt-1 space-y-0.5", children: children.map((child) => (_jsx(CategoryNode, { term: child, allTerms: allTerms, level: level + 1, activeTerm: activeTerm, parentIds: parentIds, onTermClick: onTermClick }, child.id))) }))] }));
+}
+export default function CategoryTree({ terms, activeTerm, labels, onTermClick }) {
+    const parentIds = findParentTerm(activeTerm, terms).map((term) => term.id);
+    const firstLevelTerms = terms.filter((term) => !term.parent);
+    const [isOpen, setIsOpen] = useState(true);
+    return (_jsxs("div", { className: "border-b border-gray-300 py-6", children: [_jsxs("div", { className: "flex w-full items-center justify-between text-left text-sm font-medium text-gray-900 hover:text-green-600 transition-colors duration-300 cursor-pointer select-none", onClick: () => setIsOpen((prev) => !prev), children: [_jsx("span", { children: labels.category }), _jsxs("span", { className: "ml-2 flex items-center", children: [_jsx(PlusIcon, { className: `w-5 h-5 text-gray-400 ${isOpen ? 'hidden' : 'block'}` }), _jsx(MinusIcon, { className: `w-5 h-5 text-gray-400 ${isOpen ? 'block' : 'hidden'}` })] })] }), isOpen && (_jsx("div", { className: "mt-4 space-y-1", children: firstLevelTerms.map((term) => (_jsx(CategoryNode, { term: term, allTerms: terms, level: 1, activeTerm: activeTerm, parentIds: parentIds, onTermClick: onTermClick }, term.id))) }))] }));
+}

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

@@ -0,0 +1,66 @@
+import { Product } from '@q2devel/q2-core';
+import React from 'react';
+export type Wishlist = {
+    id: string;
+    name: string;
+};
+export type ProductCardProps = {
+    product: Product;
+    href: string;
+    className?: string;
+    imageClassName?: string;
+    contentClassName?: string;
+    titleClassName?: string;
+    colorClassName?: string;
+    priceClassName?: string;
+    descriptionClassName?: string;
+    badgeClassName?: string;
+    aspectRatio?: 'square' | 'auto' | 'video' | 'wide';
+    imagePosition?: 'top' | 'bottom' | 'center';
+    imageObjectFit?: 'cover' | 'contain' | 'fill' | 'none';
+    layout?: 'default' | 'compact' | 'horizontal';
+    hoverEffect?: 'opacity' | 'scale' | 'shadow' | 'border' | 'none';
+    renderBadges?: boolean;
+    renderColor?: boolean;
+    renderDescription?: boolean;
+    elevationLevel?: 0 | 1 | 2 | 3;
+    rounded?: 'none' | 'sm' | 'md' | 'lg' | 'full';
+    titleLines?: 1 | 2 | 3;
+    onCardClick?: (product: Product) => void;
+    onImageClick?: (product: Product) => void;
+    renderFooter?: (product: Product) => React.ReactNode;
+    renderHeader?: (product: Product) => React.ReactNode;
+    actionButton?: React.ReactNode;
+    showAddButton?: boolean;
+    currentQuantity: number;
+    onQuantityChange?: (product: Product, quantity: number) => void;
+    addButtonIcon?: React.ReactNode;
+    maxQuantity?: number;
+    controlsClassName?: string;
+    buttonClassName?: string;
+    quantityClassName?: string;
+    customAddButton?: React.ReactNode;
+    disabled?: boolean;
+    locale: string;
+    cartMode?: 'full' | 'add-only';
+    showSpinnerInAdd?: boolean;
+    showWishlistButton?: boolean;
+    isInWishlist?: boolean;
+    onWishlistToggle?: (product: Product) => void;
+    wishlistButtonClassName?: string;
+    isWishlistPending?: boolean;
+    enableMultipleWishlists?: boolean;
+    wishlists?: Wishlist[];
+    onAddToWishlist?: (product: Product, wishlistId: string) => void;
+    onRemoveFromWishlist?: (product: Product, wishlistId: string) => void;
+    onCreateWishlist?: (name: string, product: Product) => void;
+    wishlistDropdownClassName?: string;
+    productWishlistIds?: string[];
+    showDeleteButton?: boolean;
+    onDelete?: (product: Product) => void;
+    deleteButtonClassName?: string;
+    isDeletePending?: boolean;
+    deleteButtonSize?: 'sm' | 'md' | 'lg';
+    deleteButtonPosition?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
+};
+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, actionButton, showAddButton, 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;