@q2devel/q2-storybook 1.0.49 → 1.0.51

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

@@ -1,8 +1,8 @@
 import { ReactNode } from 'react';
 interface ModalProps {
-    title: string;
-    description: string;
-    buttonText: string;
+    title: ReactNode;
+    description: ReactNode;
+    buttonText: ReactNode;
     icon?: ReactNode;
     iconBackgroundColor?: string;
     iconColor?: string;

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

@@ -1,12 +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';
+import { buildClassesByJoining } from '../../../utils/StyleHelper';
 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 }) })] }) }) })] }));
+    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 }) })] })] }), 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/Base/select/Select.d.ts

@@ -0,0 +1,17 @@
+import React from "react";
+export interface SelectProps {
+    label?: string;
+    onClick?: (data: {
+        toggled: boolean;
+        event: any;
+    }) => void;
+    disabled?: boolean;
+    rounded?: "none" | "sm" | "md" | "lg" | "xl" | "full";
+    className?: string;
+    unstyled?: boolean;
+    isToggled?: boolean;
+    scaleOnHover?: boolean;
+    smoothSelect?: boolean;
+}
+declare const Select: React.FC<SelectProps>;
+export default Select;

package/dist/components/Base/select/Select.js

@@ -0,0 +1,45 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+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: "text-white transform transition-transform duration-200 hover:scale-105",
+    smoothOnly: "transition-all duration-200 ease-in-out",
+};
+const Select = ({ label, onClick, disabled = false, rounded = "md", className = "", unstyled = false, isToggled, scaleOnHover = false, smoothSelect = false, }) => {
+    const isControlled = typeof isToggled === "boolean";
+    const [internalToggled, setInternalToggled] = useState(isToggled ?? false);
+    useEffect(() => {
+        if (isControlled) {
+            setInternalToggled(isToggled);
+        }
+    }, [isToggled]);
+    const toggled = isControlled ? isToggled : internalToggled;
+    const handleToggleClick = (event) => {
+        if (disabled)
+            return;
+        const newState = !toggled;
+        if (!isControlled) {
+            setInternalToggled(newState);
+        }
+        onClick?.({ toggled: newState, event });
+    };
+    const baseClasses = unstyled
+        ? className
+        : buildClassesByJoining("inline-block px-4 py-2 font-medium transition-colors duration-200", scaleOnHover && smoothSelect && `${variantClasses.primary} ${variantClasses.smoothOnly}`, scaleOnHover && !smoothSelect && variantClasses.primary, !scaleOnHover && smoothSelect && variantClasses.smoothOnly, roundedClasses[rounded], {
+            "opacity-50 cursor-not-allowed pointer-events-none": disabled,
+            "cursor-pointer": !disabled,
+        }, toggled
+            ? "brightness-110 ring-2 ring-white"
+            : "brightness-80 text-white", className);
+    return (_jsx("button", { className: baseClasses, onClick: handleToggleClick, disabled: disabled, children: label }));
+};
+export default Select;

package/dist/components/Base/switch/Switch.d.ts

@@ -0,0 +1,12 @@
+export interface SwitchProps {
+    description: string;
+    color?: string;
+    bgColor?: string;
+    ringColor?: string;
+    selected?: boolean;
+    simpleToggle?: boolean;
+    shortToggle?: boolean;
+    toggleIcon?: boolean;
+}
+declare const SwitchToggle: ({ description, color, bgColor, ringColor, selected, simpleToggle, shortToggle, toggleIcon, }: SwitchProps) => import("react/jsx-runtime").JSX.Element | null;
+export default SwitchToggle;

package/dist/components/Base/switch/Switch.js

@@ -0,0 +1,35 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Switch } from "@headlessui/react";
+const SwitchToggle = ({ description, color = "#3b82f6", // default blue
+bgColor = "#e5e7eb", // default gray-200
+ringColor = "#2563eb", // default blue-600
+selected = false, simpleToggle, shortToggle, toggleIcon, }) => {
+    const [enabled, setEnabled] = useState(selected);
+    if (simpleToggle) {
+        return (_jsxs(Switch, { checked: enabled, onChange: setEnabled, style: {
+                backgroundColor: enabled ? color : bgColor,
+                boxShadow: enabled ? `0 0 0 2px ${ringColor}` : "none",
+            }, className: "group relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-offset-2", children: [_jsx("span", { className: "sr-only", children: description || "Use setting" }), _jsx("span", { "aria-hidden": "true", className: "pointer-events-none inline-block size-5 transform rounded-full bg-white shadow-sm ring-0 transition duration-200 ease-in-out", style: {
+                        transform: enabled ? "translateX(1.25rem)" : "translateX(0)",
+                    } })] }));
+    }
+    if (shortToggle) {
+        return (_jsxs(Switch, { checked: enabled, onChange: setEnabled, className: "group relative inline-flex h-5 w-10 shrink-0 cursor-pointer items-center justify-center rounded-full focus:outline-none", children: [_jsx("span", { className: "sr-only", children: description || "Use setting" }), _jsx("span", { "aria-hidden": "true", className: "pointer-events-none absolute size-full rounded-md bg-white" }), _jsx("span", { "aria-hidden": "true", className: "pointer-events-none absolute mx-auto h-4 w-9 rounded-full transition-colors duration-200 ease-in-out", style: {
+                        backgroundColor: enabled ? color : bgColor,
+                    } }), _jsx("span", { "aria-hidden": "true", className: "pointer-events-none absolute left-0 inline-block size-5 transform rounded-full border border-gray-200 bg-white shadow-sm ring-0 transition-transform duration-200 ease-in-out", style: {
+                        transform: enabled ? "translateX(1.25rem)" : "translateX(0)",
+                    } })] }));
+    }
+    if (toggleIcon) {
+        return (_jsxs(Switch, { checked: enabled, onChange: setEnabled, style: {
+                backgroundColor: enabled ? color : bgColor,
+                boxShadow: enabled ? `0 0 0 2px ${ringColor}` : "none",
+            }, className: "group relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-offset-2", children: [_jsx("span", { className: "sr-only", children: description || "Use setting" }), _jsxs("span", { className: "pointer-events-none relative inline-block size-5 transform rounded-full bg-white shadow-sm ring-0 transition duration-200 ease-in-out", style: {
+                        transform: enabled ? "translateX(1.25rem)" : "translateX(0)",
+                    }, children: [_jsx("span", { "aria-hidden": "true", className: "absolute inset-0 flex size-full items-center justify-center transition-opacity duration-200 ease-in group-data-checked:opacity-0 group-data-checked:duration-100 group-data-checked:ease-out", style: { opacity: enabled ? 0 : 1 }, children: _jsx("svg", { fill: "none", viewBox: "0 0 12 12", className: "size-3 text-gray-400", children: _jsx("path", { d: "M4 8l2-2m0 0l2-2M6 6L4 4m2 2l2 2", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }) }) }), _jsx("span", { "aria-hidden": "true", className: "absolute inset-0 flex size-full items-center justify-center transition-opacity duration-100 ease-out group-data-checked:opacity-100 group-data-checked:duration-200 group-data-checked:ease-in", style: { opacity: enabled ? 1 : 0, color: color }, children: _jsx("svg", { fill: "currentColor", viewBox: "0 0 12 12", className: "size-3", children: _jsx("path", { d: "M3.707 5.293a1 1 0 00-1.414 1.414l1.414-1.414zM5 8l-.707.707a1 1 0 001.414 0L5 8zm4.707-3.293a1 1 0 00-1.414-1.414l1.414 1.414zm-7.414 2l2 2 1.414-1.414-2-2-1.414 1.414zm3.414 2l4-4-1.414-1.414-4 4 1.414 1.414z" }) }) })] })] }));
+    }
+    return null;
+};
+export default SwitchToggle;

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

@@ -36,11 +36,11 @@ function CategoryNode({ term, allTerms, level, activeTerm, parentIds, onTermClic
     }, [term.id, parentIds, activeTerm.id]);
     const isActive = term.id === activeTerm.id;
     const isParent = parentIds?.includes(term.id) && !isActive;
-    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
-          transition-colors duration-200 cursor-pointer select-none
-          ${isActive ? `font-semibold underline border-l-2 ${colorClassName}` : ''}
-          ${isParent ? `font-medium ` : 'text-gray-900'}
+    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
+          transition-colors duration-200 cursor-pointer select-none
+          ${isActive ? `font-semibold underline border-l-2 ${colorClassName}` : ''}
+          ${isParent ? `font-medium ` : 'text-gray-900'}
         `, style: { paddingLeft: `${level * 16}px` }, onClick: () => {
                     if (hasChildren)
                         setIsOpen((prev) => !prev);

package/dist/components/Ecommerce/instructions-list/Instruction.d.ts

@@ -0,0 +1,11 @@
+interface InstructionProps {
+    id?: number;
+    title?: string;
+    hasContactIcons?: boolean;
+    description?: string;
+    phoneNumber?: string;
+    email?: string;
+    fontClass?: string;
+}
+export declare const Instruction: ({ id, title, hasContactIcons, description, phoneNumber, email, fontClass, }: InstructionProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Ecommerce/instructions-list/Instruction.js

@@ -0,0 +1,5 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { EnvelopeIcon, PhoneIcon } from "@heroicons/react/24/outline";
+export const Instruction = ({ id, title, hasContactIcons, description, phoneNumber = "+420 000 000 000", email = "info@rezidencevavrineckaka.cz", fontClass = "", }) => {
+    return (_jsx("div", { className: `flex flex-col gap-4 py-6 border-b border-gray-200 ${fontClass}`, children: _jsx("div", { className: "flex items-start gap-4", children: _jsxs("div", { className: `flex flex-col gap-4 w-full ${fontClass}`, children: [_jsxs("h2", { className: `text-xl font-bold text-gray-800 ${fontClass}`, children: [_jsxs("span", { className: "mr-4", children: [id, "."] }), title] }), hasContactIcons ? (_jsxs("div", { className: "flex flex-col sm:flex-row sm:gap-6", children: [_jsxs("div", { className: `flex flex-col gap-4 border-l-2 border-[#C9A96E] pl-8 min-w-[220px] text-gray-800 ${fontClass}`, children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(PhoneIcon, { className: "w-5 h-5" }), _jsx("span", { children: phoneNumber })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(EnvelopeIcon, { className: "w-5 h-5" }), _jsx("span", { children: email })] })] }), _jsx("p", { className: `text-gray-600 max-w-3xl ${fontClass}`, children: description })] })) : (_jsx("p", { className: `text-gray-600 max-w-3xl ${fontClass}`, children: description }))] }) }) }));
+};

package/dist/components/Ecommerce/instructions-list/InstructionsList.d.ts

@@ -0,0 +1,13 @@
+interface InstructionData {
+    id: number;
+    title: string;
+    hasContactIcons?: boolean;
+    phoneNumber?: string;
+    email?: string;
+    description?: string;
+}
+interface InstructionsListProps {
+    instructions: InstructionData[];
+}
+export declare const InstructionsList: ({ instructions }: InstructionsListProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Ecommerce/instructions-list/InstructionsList.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Instruction } from "./Instruction";
+export const InstructionsList = ({ instructions }) => {
+    return (_jsx("div", { className: "space-y-6", children: instructions.map((item) => (_jsx(Instruction, { id: item.id, title: item.title, hasContactIcons: item.hasContactIcons, phoneNumber: item.phoneNumber, email: item.email, description: item.description }, item.id))) }));
+};

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

@@ -33,6 +33,8 @@ export type ProductCardProps = {
     renderHeader?: (product: Product) => React.ReactNode;
     actionButton?: React.ReactNode;
     showAddButton?: boolean;
+    showAddButtonOnHover?: boolean;
+    borderOnHoverClassName?: string;
     currentQuantity: number;
     onQuantityChange?: (product: Product, quantity: number) => void;
     addButtonIcon?: React.ReactNode;
@@ -64,4 +66,4 @@ export type ProductCardProps = {
     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, renderVariationName, 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;
+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;

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

@@ -13,7 +13,7 @@ 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, 
 // Add to cart functionality
-showAddButton = false, 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, 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
@@ -94,7 +94,7 @@ showDeleteButton = false, onDelete, deleteButtonClassName = '', isDeletePending
         3: 'line-clamp-3',
     }[titleLines];
     // Create layout class
-    const layoutClass = layout === 'horizontal' ? 'flex gap-4' : '';
+    const layoutClass = layout === 'horizontal' ? 'flex gap-4' : 'flex flex-col';
     const imageLayoutClass = layout === 'horizontal' ? 'w-1/3' : 'w-full';
     const contentLayoutClass = layout === 'horizontal' ? 'w-2/3' : 'w-full';
     const compactClass = layout === 'compact' ? 'space-y-1' : 'space-y-2';
@@ -152,6 +152,6 @@ showDeleteButton = false, onDelete, deleteButtonClassName = '', isDeletePending
             onDelete(product);
         }
     }, [onDelete, product]);
-    return (_jsxs("div", { className: buildClassesByJoining('group relative', layoutClass, elevationClass, onCardClick ? 'cursor-pointer' : '', 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", { 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', contentLayoutClass, compactClass, contentClassName), children: [_jsxs("div", { className: "flex flex-col justify-between gap-3", 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 &&
+    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)] })] }));
 };

package/dist/components/Forms/contact-form/ContactForm.d.ts

@@ -0,0 +1,5 @@
+export type ContactFormProps = {
+    title?: string;
+    color?: "white" | "gray";
+};
+export default function ContactForm({ title, color, }: ContactFormProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Forms/contact-form/ContactForm.js

@@ -0,0 +1,29 @@
+"use client";
+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";
+export default function ContactForm({ title, color = "gray", }) {
+    const [agreed, setAgreed] = useState(false);
+    const colorMap = {
+        white: {
+            background: "bg-white",
+            text: "text-gray-800",
+            border: "border-gray-400",
+            icon: "text-gray-500",
+            checkbox: "accent-gray-700",
+            button: "border border-white bg-[#2c2f36] text-white",
+            titleStyle: "text-3xl font-sans uppercase text-center",
+        },
+        gray: {
+            background: "bg-[#2c2f36]",
+            text: "text-white",
+            border: "border-gray-400",
+            icon: "text-gray-400",
+            checkbox: "accent-white",
+            button: "border border-white bg-[#2c2f36] text-white",
+            titleStyle: "text-3xl font-sans uppercase text-center",
+        },
+    };
+    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" })] }));
+}

package/dist/components/Web/footer/Footer.d.ts

@@ -0,0 +1,2 @@
+import { FooterProps } from "./FooterProps";
+export declare const Footer: ({ navigation, simpleCentered, simpleSocialLinks, fourColumnVariant, fourColumnVariantMap, logoSrc, mapPath, mapWidth, mapHeight, }: FooterProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/components/Web/footer/Footer.js

@@ -0,0 +1,17 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const Footer = ({ navigation, simpleCentered, simpleSocialLinks, fourColumnVariant, fourColumnVariantMap, logoSrc, mapPath, mapWidth, mapHeight, }) => {
+    if (simpleCentered && navigation) {
+        return (_jsx("footer", { className: "bg-white", children: _jsxs("div", { className: "mx-auto max-w-7xl overflow-hidden px-6 py-20 sm:py-24 lg:px-8", children: [_jsx("nav", { "aria-label": "Footer", className: "-mb-6 flex flex-wrap justify-center gap-x-12 gap-y-3 text-sm/6", children: navigation.main.map((item) => (_jsx("a", { href: item.href, className: "text-gray-600 hover:text-gray-900", children: item.name }, item.name))) }), _jsx("div", { className: "mt-16 flex justify-center gap-x-10", children: navigation.social.map((item) => (_jsxs("a", { href: item.href, className: "text-gray-600 hover:text-gray-800", children: [_jsx("span", { className: "sr-only", children: item.name }), _jsx(item.icon, { "aria-hidden": "true", className: "size-6" })] }, item.name))) }), _jsx("p", { className: "mt-10 text-center text-sm/6 text-gray-600", children: "\u00A9 2024 Your Company, Inc. All rights reserved." })] }) }));
+    }
+    if (simpleSocialLinks && navigation) {
+        return (_jsx("footer", { className: "bg-white", children: _jsxs("div", { className: "mx-auto max-w-7xl px-6 py-12 md:flex md:items-center md:justify-between lg:px-8", children: [_jsx("div", { className: "flex justify-center gap-x-6 md:order-2", children: navigation.social.map((item) => (_jsxs("a", { href: item.href, className: "text-gray-600 hover:text-gray-800", children: [_jsx("span", { className: "sr-only", children: item.name }), _jsx(item.icon, { "aria-hidden": "true", className: "size-6" })] }, item.name))) }), _jsx("p", { className: "mt-8 text-center text-sm/6 text-gray-600 md:order-1 md:mt-0", children: "\u00A9 2024 Your Company, Inc. All rights reserved." })] }) }));
+    }
+    if (fourColumnVariant && navigation) {
+        return (_jsx("footer", { className: "bg-white", children: _jsx("div", { className: "mx-auto max-w-7xl px-6 pt-16 pb-8 sm:pt-24 lg:px-8 lg:pt-32", children: _jsxs("div", { className: "xl:grid xl:grid-cols-3 xl:gap-8", children: [_jsx("img", { alt: "Company name", src: logoSrc, className: "h-9" }), _jsxs("div", { className: "mt-16 grid grid-cols-2 gap-8 xl:col-span-2 xl:mt-0", children: [_jsxs("div", { className: "md:grid md:grid-cols-2 md:gap-8", children: [_jsxs("div", { children: [_jsx("h3", { className: "text-sm/6 font-semibold text-gray-900", children: "Solutions" }), _jsx("ul", { role: "list", className: "mt-6 space-y-4", children: navigation.solutions.map((item) => (_jsx("li", { children: _jsx("a", { href: item.href, className: "text-sm/6 text-gray-600 hover:text-gray-900", children: item.name }) }, item.name))) })] }), _jsxs("div", { className: "mt-10 md:mt-0", children: [_jsx("h3", { className: "text-sm/6 font-semibold text-gray-900", children: "Support" }), _jsx("ul", { role: "list", className: "mt-6 space-y-4", children: navigation.support.map((item) => (_jsx("li", { children: _jsx("a", { href: item.href, className: "text-sm/6 text-gray-600 hover:text-gray-900", children: item.name }) }, item.name))) })] })] }), _jsxs("div", { className: "md:grid md:grid-cols-2 md:gap-8", children: [_jsxs("div", { children: [_jsx("h3", { className: "text-sm/6 font-semibold text-gray-900", children: "Company" }), _jsx("ul", { role: "list", className: "mt-6 space-y-4", children: navigation.company.map((item) => (_jsx("li", { children: _jsx("a", { href: item.href, className: "text-sm/6 text-gray-600 hover:text-gray-900", children: item.name }) }, item.name))) })] }), _jsxs("div", { className: "mt-10 md:mt-0", children: [_jsx("h3", { className: "text-sm/6 font-semibold text-gray-900", children: "Legal" }), _jsx("ul", { role: "list", className: "mt-6 space-y-4", children: navigation.legal.map((item) => (_jsx("li", { children: _jsx("a", { href: item.href, className: "text-sm/6 text-gray-600 hover:text-gray-900", children: item.name }) }, item.name))) })] })] })] })] }) }) }));
+    }
+    if (fourColumnVariantMap && navigation) {
+        return (_jsx("footer", { className: "bg-white", children: _jsx("div", { className: "mx-auto max-w-7xl px-6 pt-16 pb-8 sm:pt-24 lg:px-8 lg:pt-32", children: _jsxs("div", { className: "flex flex-col lg:flex-row lg:justify-between lg:items-start gap-12", children: [_jsx("div", { className: "flex-shrink-0", children: _jsx("img", { alt: "Company name", src: logoSrc, className: "h-9" }) }), _jsxs("div", { className: "grid grid-cols-2 md:grid-cols-4 gap-8 flex-grow", children: [_jsxs("div", { children: [_jsx("h3", { className: "text-sm/6 font-semibold text-gray-900", children: "Solutions" }), _jsx("ul", { role: "list", className: "mt-6 space-y-4", children: navigation.solutions.map((item) => (_jsx("li", { children: _jsx("a", { href: item.href, className: "text-sm/6 text-gray-600 hover:text-gray-900", children: item.name }) }, item.name))) })] }), _jsxs("div", { children: [_jsx("h3", { className: "text-sm/6 font-semibold text-gray-900", children: "Support" }), _jsx("ul", { role: "list", className: "mt-6 space-y-4", children: navigation.support.map((item) => (_jsx("li", { children: _jsx("a", { href: item.href, className: "text-sm/6 text-gray-600 hover:text-gray-900", children: item.name }) }, item.name))) })] }), _jsxs("div", { children: [_jsx("h3", { className: "text-sm/6 font-semibold text-gray-900", children: "Company" }), _jsx("ul", { role: "list", className: "mt-6 space-y-4", children: navigation.company.map((item) => (_jsx("li", { children: _jsx("a", { href: item.href, className: "text-sm/6 text-gray-600 hover:text-gray-900", children: item.name }) }, item.name))) })] }), _jsxs("div", { children: [_jsx("h3", { className: "text-sm/6 font-semibold text-gray-900", children: "Legal" }), _jsx("ul", { role: "list", className: "mt-6 space-y-4", children: navigation.legal.map((item) => (_jsx("li", { children: _jsx("a", { href: item.href, className: "text-sm/6 text-gray-600 hover:text-gray-900", children: item.name }) }, item.name))) })] })] }), _jsx("div", { className: "flex-shrink-0", children: _jsx("iframe", { src: mapPath, width: mapWidth, height: mapHeight, style: { border: 0 }, allowFullScreen: true, loading: "lazy", referrerPolicy: "no-referrer-when-downgrade" }) })] }) }) }));
+    }
+    return null;
+};

package/dist/components/Web/footer/FooterProps.d.ts

@@ -0,0 +1,38 @@
+import { SVGProps, JSX } from "react";
+export interface FooterLinkItem {
+    name: string;
+    href: string;
+}
+export interface FooterSocialItem {
+    name: string;
+    href: string;
+    icon: (props: SVGProps<SVGSVGElement>) => JSX.Element;
+}
+export interface FooterFourColumnItem {
+    title: string;
+    links: FooterLinkItem[];
+}
+export interface FooterFourColumnMapItem {
+    [key: string]: FooterLinkItem[];
+}
+export interface FooterNavigation {
+    main: FooterLinkItem[];
+    social: FooterSocialItem[];
+    fourclmn: FooterFourColumnItem[];
+    solutions: FooterLinkItem[];
+    support: FooterLinkItem[];
+    company: FooterLinkItem[];
+    legal: FooterLinkItem[];
+    fourclmnmap: FooterFourColumnMapItem[];
+}
+export interface FooterProps {
+    navigation?: FooterNavigation;
+    simpleCentered?: boolean;
+    simpleSocialLinks?: boolean;
+    fourColumnVariant?: boolean;
+    fourColumnVariantMap?: boolean;
+    logoSrc?: string;
+    mapPath?: string;
+    mapWidth?: number;
+    mapHeight?: number;
+}

package/dist/components/Web/footer/FooterProps.js

@@ -0,0 +1 @@
+export {};

package/dist/components/Web/web-section/WebSection.d.ts

@@ -0,0 +1,10 @@
+type WebSectionProps = {
+    imagePosition?: "left" | "right";
+    imagePath?: string;
+    title?: string;
+    subtitle?: string;
+    paragraphs?: string[];
+    fontFamilyClass?: string;
+};
+declare function WebSection({ imagePosition, imagePath, title, subtitle, paragraphs, fontFamilyClass, }: WebSectionProps): import("react/jsx-runtime").JSX.Element;
+export default WebSection;

package/dist/components/Web/web-section/WebSection.js

@@ -0,0 +1,9 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Image from "next/image";
+import clsx from "clsx";
+function WebSection({ imagePosition, imagePath, title, subtitle, paragraphs = [], fontFamilyClass, }) {
+    const isImageLeft = imagePosition === "left";
+    return (_jsxs("div", { className: "flex flex-col md:flex-row bg-white w-full", children: [_jsx("div", { className: clsx("w-full md:w-1/2", isImageLeft ? "order-1" : "order-2"), children: _jsx(Image, { src: imagePath || "/placeholder.jpg", alt: "Stylov\u00E9 bydlen\u00ED", width: 1000, height: 600, className: "object-cover w-full h-full" }) }), _jsxs("div", { className: clsx(fontFamilyClass, "w-full md:w-1/2 p-10 flex flex-col justify-center", isImageLeft ? "order-2" : "order-1"), children: [_jsx("h2", { className: "text-4xl font-bold mb-2", children: title }), _jsx("h3", { className: "text-3xl font-bold text-[#9B5726] mb-4", children: subtitle }), paragraphs.map((text, index) => (_jsx("p", { className: clsx("text-gray-700", index !== paragraphs.length - 1 && "mb-4"), children: text }, index)))] })] }));
+}
+export default WebSection;

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

@@ -1,37 +1,37 @@
-import { ReactNode } from 'react';
-import { BannerItem } from '@q2devel/q2-core';
-export type ControlsType = 'arrows' | 'dots' | 'both' | 'none';
-export type BannerProps = {
-    items: BannerItem[];
-    height?: 'sm' | 'md' | 'lg' | 'xl' | 'full' | 'auto';
-    autoplay?: boolean;
-    autoplayInterval?: number;
-    controls?: ControlsType;
-    overlayStyle?: 'dark' | 'light' | 'gradient' | 'none';
-    textAlignment?: 'left' | 'center' | 'right';
-    textPosition?: 'top' | 'center' | 'bottom';
-    className?: string;
-    imageClassName?: string;
-    titleClassName?: string;
-    subtitleClassName?: string;
-    buttonClassName?: string;
-    indicatorsClassName?: string;
-    controlsClassName?: string;
-    contentClassName?: string;
-    rounded?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
-    buttonRounded?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
-    arrowBackgroundless?: boolean;
-    animation?: 'slide' | 'fade' | 'zoom' | 'none';
-    animationDuration?: number;
-    pauseOnHover?: boolean;
-    infiniteLoop?: boolean;
-    objectFit?: 'cover' | 'contain' | 'fill' | 'none';
-    objectPosition?: 'center' | 'top' | 'bottom' | 'left' | 'right';
-    renderItem?: (item: BannerItem, index: number) => ReactNode;
-    renderControls?: (goToNext: () => void, goToPrev: () => void) => ReactNode;
-    renderIndicators?: (current: number, total: number, goToSlide: (index: number) => void) => ReactNode;
-    onSlideChange?: (currentIndex: number, previousIndex: number) => void;
-    withOverlay?: boolean;
-    overlayOpacity?: number;
-};
-export declare const Banner: ({ items, height, autoplay, autoplayInterval, controls, overlayStyle, textAlignment, textPosition, className, imageClassName, titleClassName, subtitleClassName, buttonClassName, indicatorsClassName, controlsClassName, contentClassName, rounded, buttonRounded, arrowBackgroundless, animation, animationDuration, pauseOnHover, infiniteLoop, objectFit, objectPosition, renderItem, renderControls, renderIndicators, onSlideChange, withOverlay, overlayOpacity, }: BannerProps) => import("react/jsx-runtime").JSX.Element | null;
+import { ReactNode } from 'react';
+import { BannerItem } from '@q2devel/q2-core';
+export type ControlsType = 'arrows' | 'dots' | 'both' | 'none';
+export type BannerProps = {
+    items: BannerItem[];
+    height?: 'sm' | 'md' | 'lg' | 'xl' | 'full' | 'auto';
+    autoplay?: boolean;
+    autoplayInterval?: number;
+    controls?: ControlsType;
+    overlayStyle?: 'dark' | 'light' | 'gradient' | 'none';
+    textAlignment?: 'left' | 'center' | 'right';
+    textPosition?: 'top' | 'center' | 'bottom';
+    className?: string;
+    imageClassName?: string;
+    titleClassName?: string;
+    subtitleClassName?: string;
+    buttonClassName?: string;
+    indicatorsClassName?: string;
+    controlsClassName?: string;
+    contentClassName?: string;
+    rounded?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
+    buttonRounded?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
+    arrowBackgroundless?: boolean;
+    animation?: 'slide' | 'fade' | 'zoom' | 'none';
+    animationDuration?: number;
+    pauseOnHover?: boolean;
+    infiniteLoop?: boolean;
+    objectFit?: 'cover' | 'contain' | 'fill' | 'none';
+    objectPosition?: 'center' | 'top' | 'bottom' | 'left' | 'right';
+    renderItem?: (item: BannerItem, index: number) => ReactNode;
+    renderControls?: (goToNext: () => void, goToPrev: () => void) => ReactNode;
+    renderIndicators?: (current: number, total: number, goToSlide: (index: number) => void) => ReactNode;
+    onSlideChange?: (currentIndex: number, previousIndex: number) => void;
+    withOverlay?: boolean;
+    overlayOpacity?: number;
+};
+export declare const Banner: ({ items, height, autoplay, autoplayInterval, controls, overlayStyle, textAlignment, textPosition, className, imageClassName, titleClassName, subtitleClassName, buttonClassName, indicatorsClassName, controlsClassName, contentClassName, rounded, buttonRounded, arrowBackgroundless, animation, animationDuration, pauseOnHover, infiniteLoop, objectFit, objectPosition, renderItem, renderControls, renderIndicators, onSlideChange, withOverlay, overlayOpacity, }: BannerProps) => import("react/jsx-runtime").JSX.Element | null;