npm - @q2devel/q2-storybook - Versions diffs - 1.0.189 → 1.0.192 - Mend

@q2devel/q2-storybook 1.0.189 → 1.0.192

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (9) hide show

package/dist/components/Ecommerce/product-detail/ProductDetail.js CHANGED Viewed

@@ -195,11 +195,11 @@ mainPriceFormatOptions, discountPriceFormatOptions, variationPriceFormatOptions,
                                                                     variation.id && (_jsx("div", { className: buildClassesByJoining('absolute inset-0 pointer-events-none', classNames
                                                                     ?.variations
                                                                     ?.variationActiveButton), style: {
-                                                                    background: `
-                                                                radial-gradient(circle at top left, var(--primary) 0%, transparent 20%),
-                                                                radial-gradient(circle at top right, var(--primary) 0%, transparent 20%),
-                                                                radial-gradient(circle at bottom left, var(--primary) 0%, transparent 20%),
-                                                                radial-gradient(circle at bottom right, var(--primary) 0%, transparent 20%)
+                                                                    background: `
+                                                                radial-gradient(circle at top left, var(--primary) 0%, transparent 20%),
+                                                                radial-gradient(circle at top right, var(--primary) 0%, transparent 20%),
+                                                                radial-gradient(circle at bottom left, var(--primary) 0%, transparent 20%),
+                                                                radial-gradient(circle at bottom right, var(--primary) 0%, transparent 20%)
                                                             `,
                                                                     opacity: 0.2,
                                                                 } })), _jsxs("div", { className: buildClassesByJoining('flex flex-col justify-between gap-1 relative z-10 flex-1 min-w-0 pr-2', classNames?.variations

package/dist/components/MIKS/movie-detail/MovieDetail.js CHANGED Viewed

@@ -11,19 +11,66 @@ import { useState } from 'react';
  */
 export default function MovieDetail({ title, originalTitle, year, duration, language, ageRating, posterUrl, trailerUrl, description, director, cast, csfdRating, linksToMovieDatabase, specialTag, showtimes, className = '', onTicketClick, onTrailerClick, }) {
     const [isExpanded, setIsExpanded] = useState(false);
+    const [showTrailerDesktop, setShowTrailerDesktop] = useState(false);
+    const [showTrailerMobile, setShowTrailerMobile] = useState(false);
     const castString = Array.isArray(cast) ? cast.join(', ') : cast;
     const handleTicket = (showtime) => {
         if (onTicketClick) {
             onTicketClick(showtime);
         }
     };
-    const handleTrailer = () => {
+    const handleTrailerDesktop = () => {
         if (onTrailerClick) {
             onTrailerClick();
         }
         else if (trailerUrl) {
-            window.open(trailerUrl, '_blank', 'noopener,noreferrer');
+            setShowTrailerDesktop(true);
         }
     };
-    return (_jsxs("div", { className: `${className}`, children: [_jsxs("div", { className: "hidden lg:flex lg:gap-12.5 lg:justify-between", children: [_jsxs("div", { className: "flex flex-col gap-[41px] w-[614px] shrink-0", children: [_jsxs("div", { className: "relative h-[371px] w-full", children: [_jsx("div", { className: "relative h-full w-full overflow-hidden", children: _jsx("img", { src: posterUrl, alt: title, className: "w-full h-full object-cover" }) }), trailerUrl && (_jsx(Button, { onClick: handleTrailer, rounded: "none", className: "absolute left-[32px] bottom-[20px] bg-primary-cyan text-white px-6.5 py-1.25 uppercase text-[13px] cursor-pointer border-primary-cyan border-1 hover:bg-white hover:text-primary-cyan", children: "UK\u00C1ZKA" }))] }), _jsx("div", { className: "flex flex-col gap-[27px]", children: showtimes.map((showtime, index) => (_jsxs("div", { className: "bg-white border-b border-[#cbdce0] flex items-start justify-between py-[10px]", children: [_jsxs("div", { className: "flex gap-[22px] items-start", children: [_jsx("div", { className: "flex items-center p-[10px] w-[100px]", children: _jsx("p", { className: "font-semibold text-[24px] leading-[30px] text-primary-black flex-1", children: showtime.date }) }), _jsx("div", { className: "flex items-center justify-center p-[10px]", children: _jsx("p", { className: "font-semibold text-[24px] leading-[30px] text-primary-black whitespace-nowrap", children: showtime.time }) }), _jsxs("div", { className: "flex items-center", children: [_jsx("div", { className: "flex items-center justify-center p-[10px]", children: _jsx("p", { className: "text-[16px] leading-[28px] text-primary-black whitespace-nowrap", children: showtime.hall }) }), showtime.subtitles && (_jsx("div", { className: "flex items-center justify-center p-[10px]", children: _jsx("p", { className: "text-[16px] leading-[28px] text-primary-black whitespace-nowrap", children: showtime.subtitles }) })), showtime.format && (_jsx("div", { className: "flex items-center justify-center p-[10px]", children: _jsx("p", { className: "text-[16px] leading-[28px] text-primary-black whitespace-nowrap", children: showtime.format }) }))] })] }), _jsx("div", { className: "flex items-center", children: _jsx(Button, { onClick: () => handleTicket(showtime), rounded: "none", className: "bg-primary-pink text-white px-11 py-2.5 uppercase text-lg cursor-pointer border-primary-pink border-1 hover:bg-white hover:text-primary-pink", children: "VSTUPENKY" }) })] }, index))) })] }), _jsxs("div", { className: "flex flex-col gap-[10px] w-[778px]", children: [_jsxs("h1", { className: "font-bold text-[36px] leading-[54px] text-primary-pink", children: [title, " (", year, ")"] }), _jsxs("p", { className: "text-[16px] leading-[28px] text-primary-black", children: [originalTitle, " (", year, ")"] }), specialTag && (_jsx("div", { className: "border border-primary-grey inline-flex items-center justify-center p-[10px] self-start", children: _jsx("p", { className: "text-[16px] leading-[28px] text-primary-grey whitespace-nowrap", children: specialTag }) })), _jsxs("div", { className: "flex gap-[10px] items-start", children: [_jsxs("p", { className: "text-[16px] leading-[28px] text-primary-black", children: [_jsx("span", { className: "font-bold", children: "D\u00E9lka: " }), duration, " minut"] }), _jsxs("p", { className: "text-[16px] leading-[28px] text-primary-black whitespace-nowrap", children: [_jsx("span", { className: "font-bold", children: "Zn\u011Bn\u00ED: " }), language] }), _jsxs("p", { className: "text-[16px] leading-[28px] text-primary-black whitespace-nowrap", children: [_jsx("span", { className: "font-bold", children: "P\u0159\u00EDstupnost: " }), ageRating] })] }), _jsx("div", { className: "text-[16px] leading-[28px] text-primary-black whitespace-pre-line event-content", children: parse(description) }), _jsxs("p", { className: "text-[16px] leading-[28px] text-primary-black", children: [_jsx("span", { className: "font-bold", children: "Re\u017Eie: " }), parse(director)] }), _jsxs("p", { className: "text-[16px] leading-[28px] text-primary-black", children: [_jsx("span", { className: "font-bold", children: "\u00DA\u010Dinkuj\u00EDc\u00ED: " }), parse(castString)] }), csfdRating && (_jsxs("p", { className: "text-[16px] leading-[28px] text-primary-black", children: [_jsx("span", { className: "font-bold", children: "\u010CSFD: " }), parse(csfdRating)] })), linksToMovieDatabase.length > 0 && (_jsx("div", { className: "flex gap-[10px] items-start mt-2", children: linksToMovieDatabase.map((link) => (_jsx(Button, { onClick: () => window.open(link.field_link_to_movie_database, '_blank', 'noopener,noreferrer'), rounded: "none", className: "bg-primary-grey text-white px-11 py-2.5 uppercase text-lg cursor-pointer border-primary-grey border-1 hover:bg-white hover:text-primary-grey", children: link.title }, link.field_link_to_movie_database))) }))] })] }), _jsxs("div", { className: "lg:hidden flex flex-col gap-[10px] w-full", children: [_jsxs("h1", { className: "font-bold text-[26px] leading-[40px] text-primary-pink", children: [parse(title), " (", year, ")"] }), _jsxs("p", { className: "text-[16px] leading-[28px] text-primary-black", children: [parse(originalTitle), " (", year, ")"] }), specialTag && (_jsx("div", { className: "border border-primary-grey inline-flex items-center justify-center px-[10px] py-[5px] self-start", children: _jsx("p", { className: "text-[16px] leading-[28px] text-primary-grey whitespace-nowrap", children: parse(specialTag) }) })), _jsxs("div", { className: "flex flex-wrap gap-[10px] items-start w-full", children: [_jsxs("p", { className: "text-[16px] leading-[28px] text-primary-black whitespace-nowrap", children: [_jsx("span", { className: "font-bold", children: "D\u00E9lka: " }), duration, " minut"] }), _jsxs("p", { className: "text-[16px] leading-[28px] text-primary-black whitespace-nowrap", children: [_jsx("span", { className: "font-bold", children: "Zn\u011Bn\u00ED: " }), language] }), _jsxs("p", { className: "text-[16px] leading-[28px] text-primary-black whitespace-nowrap", children: [_jsx("span", { className: "font-bold", children: "P\u0159\u00EDstupnost: " }), ageRating] })] }), _jsxs("div", { className: "relative h-[187px] w-full", children: [_jsx("div", { className: "relative h-full w-full overflow-hidden", children: _jsx("img", { src: posterUrl, alt: title, className: "w-full h-full object-cover" }) }), trailerUrl && (_jsx(Button, { onClick: handleTrailer, rounded: "none", className: "absolute left-[10px] bottom-[15px] bg-primary-cyan text-white px-6.5 py-1.25 uppercase text-[13px] cursor-pointer border-primary-cyan border-1 hover:bg-white hover:text-primary-cyan", children: "UK\u00C1ZKA" }))] }), showtimes.length > 0 && (_jsxs("div", { className: "flex flex-col gap-[10px] w-full", children: [_jsxs("div", { className: "flex items-start justify-between w-full", children: [_jsx("div", { className: "flex items-center pl-0 pr-[10px] py-[5px] w-[100px]", children: _jsx("p", { className: "font-bold text-[20px] leading-[30px] text-primary-black flex-1", children: showtimes[0].date }) }), _jsx("div", { className: "flex items-center justify-center px-[10px] py-[5px]", children: _jsx("p", { className: "font-bold text-[20px] leading-[30px] text-primary-black whitespace-nowrap", children: showtimes[0].time }) }), _jsxs("div", { className: "flex items-center", children: [_jsx("div", { className: "flex items-center justify-center pl-[10px] pr-0 py-[5px]", children: _jsx("p", { className: "text-[16px] leading-[28px] text-primary-black whitespace-nowrap", children: showtimes[0].hall }) }), showtimes[0].subtitles && (_jsx("div", { className: "flex items-center justify-center px-[10px] py-[5px]", children: _jsx("p", { className: "text-[16px] leading-[28px] text-primary-black whitespace-nowrap", children: showtimes[0].subtitles }) })), showtimes[0].format && (_jsx("div", { className: "flex items-center justify-center px-[10px] py-[5px]", children: _jsx("p", { className: "text-[16px] leading-[28px] text-primary-black whitespace-nowrap", children: showtimes[0].format }) }))] })] }), _jsx(Button, { onClick: () => handleTicket(showtimes[0]), rounded: "none", className: "bg-primary-pink text-white px-11 py-2.5 uppercase text-lg cursor-pointer border-primary-pink border-1 hover:bg-white hover:text-primary-pink w-full", children: "VSTUPENKY" })] })), _jsxs("div", { className: "flex flex-col gap-[10px] w-full", children: [_jsxs("div", { className: `relative ${!isExpanded ? 'h-71 overflow-hidden' : ''}`, children: [!isExpanded && (_jsx("div", { className: "absolute bottom-0 left-0 right-0 h-[84px] bg-gradient-to-b from-transparent to-white pointer-events-none blur-[2px]" })), _jsx("div", { className: "text-[16px] leading-[28px] text-primary-blac k mb-4", children: parse(description) }), _jsxs("div", { className: "text-[16px] leading-[28px] text-primary-black mb-2", children: [_jsx("span", { className: "font-bold", children: "Re\u017Eie: " }), parse(director)] }), _jsxs("div", { className: "text-[16px] leading-[28px] text-primary-black mb-2", children: [_jsx("span", { className: "font-bold", children: "\u00DA\u010Dinkuj\u00EDc\u00ED: " }), parse(castString)] }), csfdRating && (_jsxs("div", { className: "text-[16px] leading-[28px] text-primary-black mb-2", children: [_jsx("span", { className: "font-bold", children: "\u010CSFD: " }), parse(csfdRating)] }))] }), !isExpanded ? (_jsxs("button", { onClick: () => setIsExpanded(true), className: "flex items-center gap-[12px] font-semibold text-[16px] leading-[28px] text-primary-pink", children: [_jsx("span", { children: "+" }), _jsx("span", { children: "Zobrazit v\u00EDc" })] })) : (_jsx(_Fragment, { children: linksToMovieDatabase.length > 0 && (_jsx("div", { className: "flex flex-col gap-[10px] w-full", children: linksToMovieDatabase.map((link) => (_jsx(Button, { onClick: () => window.open(link.field_link_to_movie_database, '_blank', 'noopener,noreferrer'), rounded: "none", className: "bg-primary-grey text-white px-[26px] py-[5px] uppercase text-[13px] cursor-pointer border-primary-grey border-1 hover:bg-white hover:text-primary-grey w-full", children: "IMDB" }, link.field_link_to_movie_database))) })) }))] }), showtimes.slice(1).map((showtime, index) => (_jsxs("div", { className: "flex flex-col gap-[10px] w-full", children: [_jsxs("div", { className: "flex items-start justify-between w-full", children: [_jsx("div", { className: "flex items-center pl-0 pr-[10px] py-[5px]", children: _jsx("p", { className: "font-bold text-[20px] leading-[30px] text-primary-black whitespace-nowrap", children: showtime.date }) }), _jsx("div", { className: "flex items-center justify-center px-[10px] py-[5px]", children: _jsx("p", { className: "font-bold text-[20px] leading-[30px] text-primary-black whitespace-nowrap", children: showtime.time }) }), _jsxs("div", { className: "flex items-center", children: [_jsx("div", { className: "flex items-center justify-center pl-[10px] pr-0 py-[5px]", children: _jsx("p", { className: "text-[16px] leading-[28px] text-primary-black whitespace-nowrap", children: showtime.hall }) }), showtime.subtitles && (_jsx("div", { className: "flex items-center justify-center px-[10px] py-[5px]", children: _jsx("p", { className: "text-[16px] leading-[28px] text-primary-black whitespace-nowrap", children: showtime.subtitles }) })), showtime.format && (_jsx("div", { className: "flex items-center justify-center px-[10px] py-[5px]", children: _jsx("p", { className: "text-[16px] leading-[28px] text-primary-black whitespace-nowrap", children: showtime.format }) }))] })] }), _jsx(Button, { onClick: () => handleTicket(showtime), rounded: "none", className: "bg-primary-pink text-white px-11 py-2.5 uppercase text-lg cursor-pointer border-primary-pink border-1 hover:bg-white hover:text-primary-pink w-full", children: "VSTUPENKY" })] }, index + 1)))] })] }));
+    const handleTrailerMobile = () => {
+        if (onTrailerClick) {
+            onTrailerClick();
+        }
+        else if (trailerUrl) {
+            setShowTrailerMobile(true);
+        }
+    };
+    const getEmbedUrl = (url) => {
+        // Handle YouTube URLs
+        if (url.includes('youtube.com/watch')) {
+            const videoId = url.split('v=')[1]?.split('&')[0];
+            return videoId
+                ? `https://www.youtube.com/embed/${videoId}?autoplay=1`
+                : url;
+        }
+        if (url.includes('youtu.be/')) {
+            const videoId = url.split('youtu.be/')[1]?.split('?')[0];
+            return videoId
+                ? `https://www.youtube.com/embed/${videoId}?autoplay=1`
+                : url;
+        }
+        // Handle YouTube embed URLs (already in embed format)
+        if (url.includes('youtube.com/embed/')) {
+            const separator = url.includes('?') ? '&' : '?';
+            return `${url}${separator}autoplay=1`;
+        }
+        // Handle Vimeo URLs
+        if (url.includes('vimeo.com/')) {
+            const videoId = url.split('vimeo.com/')[1]?.split('?')[0];
+            return videoId
+                ? `https://player.vimeo.com/video/${videoId}?autoplay=1`
+                : url;
+        }
+        // Handle Vimeo embed URLs (already in embed format)
+        if (url.includes('player.vimeo.com/video/')) {
+            const separator = url.includes('?') ? '&' : '?';
+            return `${url}${separator}autoplay=1`;
+        }
+        // If already an embed URL or other format, try to add autoplay
+        const separator = url.includes('?') ? '&' : '?';
+        return `${url}${separator}autoplay=1`;
+    };
+    return (_jsxs("div", { className: `${className}`, children: [_jsxs("div", { className: "hidden lg:flex lg:gap-12.5 lg:justify-between", children: [_jsxs("div", { className: "flex flex-col gap-[41px] w-[614px] shrink-0", children: [_jsxs("div", { className: "relative h-[371px] w-full", children: [_jsx("div", { className: "relative h-full w-full overflow-hidden", children: showTrailerDesktop && trailerUrl ? (_jsx("iframe", { src: getEmbedUrl(trailerUrl), className: "w-full h-full", allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture", allowFullScreen: true, title: `${title} trailer` })) : (_jsx("img", { src: posterUrl, alt: title, className: `w-full h-full object-cover ${trailerUrl ? 'cursor-pointer' : ''}`, onClick: trailerUrl
+                                                ? handleTrailerDesktop
+                                                : undefined })) }), trailerUrl && !showTrailerDesktop && (_jsx(Button, { onClick: handleTrailerDesktop, rounded: "none", className: "absolute left-[32px] bottom-[20px] bg-primary-cyan text-white px-6.5 py-1.25 uppercase text-[13px] cursor-pointer border-primary-cyan border-1 hover:bg-white hover:text-primary-cyan", children: "UK\u00C1ZKA" }))] }), _jsx("div", { className: "flex flex-col gap-[27px]", children: showtimes.map((showtime, index) => (_jsxs("div", { className: "bg-white border-b border-[#cbdce0] flex items-start justify-between py-[10px]", children: [_jsxs("div", { className: "flex gap-[22px] items-start", children: [_jsx("div", { className: "flex items-center p-[10px] w-[100px]", children: _jsx("p", { className: "font-semibold text-[24px] leading-[30px] text-primary-black flex-1", children: showtime.date }) }), _jsx("div", { className: "flex items-center justify-center p-[10px]", children: _jsx("p", { className: "font-semibold text-[24px] leading-[30px] text-primary-black whitespace-nowrap", children: showtime.time }) }), _jsxs("div", { className: "flex items-center", children: [_jsx("div", { className: "flex items-center justify-center p-[10px]", children: _jsx("p", { className: "text-[16px] leading-[28px] text-primary-black whitespace-nowrap", children: showtime.hall }) }), showtime.subtitles && (_jsx("div", { className: "flex items-center justify-center p-[10px]", children: _jsx("p", { className: "text-[16px] leading-[28px] text-primary-black whitespace-nowrap", children: showtime.subtitles }) })), showtime.format && (_jsx("div", { className: "flex items-center justify-center p-[10px]", children: _jsx("p", { className: "text-[16px] leading-[28px] text-primary-black whitespace-nowrap", children: showtime.format }) }))] })] }), _jsx("div", { className: "flex items-center", children: _jsx(Button, { onClick: () => handleTicket(showtime), rounded: "none", className: "bg-primary-pink text-white px-11 py-2.5 uppercase text-lg cursor-pointer border-primary-pink border-1 hover:bg-white hover:text-primary-pink", children: "VSTUPENKY" }) })] }, index))) })] }), _jsxs("div", { className: "flex flex-col gap-[10px] w-[778px]", children: [_jsxs("h1", { className: "font-bold text-[36px] leading-[54px] text-primary-pink", children: [title, " (", year, ")"] }), _jsxs("p", { className: "text-[16px] leading-[28px] text-primary-black", children: [originalTitle, " (", year, ")"] }), specialTag && (_jsx("div", { className: "border border-primary-grey inline-flex items-center justify-center p-[10px] self-start", children: _jsx("p", { className: "text-[16px] leading-[28px] text-primary-grey whitespace-nowrap", children: specialTag }) })), _jsxs("div", { className: "flex gap-[10px] items-start", children: [_jsxs("p", { className: "text-[16px] leading-[28px] text-primary-black", children: [_jsx("span", { className: "font-bold", children: "D\u00E9lka: " }), duration, " minut"] }), _jsxs("p", { className: "text-[16px] leading-[28px] text-primary-black whitespace-nowrap", children: [_jsx("span", { className: "font-bold", children: "Zn\u011Bn\u00ED: " }), language] }), _jsxs("p", { className: "text-[16px] leading-[28px] text-primary-black whitespace-nowrap", children: [_jsx("span", { className: "font-bold", children: "P\u0159\u00EDstupnost: " }), ageRating] })] }), _jsx("div", { className: "text-[16px] leading-[28px] text-primary-black whitespace-pre-line event-content", children: parse(description) }), _jsxs("p", { className: "text-[16px] leading-[28px] text-primary-black", children: [_jsx("span", { className: "font-bold", children: "Re\u017Eie: " }), parse(director)] }), _jsxs("p", { className: "text-[16px] leading-[28px] text-primary-black", children: [_jsx("span", { className: "font-bold", children: "\u00DA\u010Dinkuj\u00EDc\u00ED: " }), parse(castString)] }), csfdRating && (_jsxs("p", { className: "text-[16px] leading-[28px] text-primary-black", children: [_jsx("span", { className: "font-bold", children: "\u010CSFD: " }), parse(csfdRating)] })), linksToMovieDatabase.length > 0 && (_jsx("div", { className: "flex gap-[10px] items-start mt-2", children: linksToMovieDatabase.map((link) => (_jsx(Button, { onClick: () => window.open(link.field_link_to_movie_database, '_blank', 'noopener,noreferrer'), rounded: "none", className: "bg-primary-grey text-white px-11 py-2.5 uppercase text-lg cursor-pointer border-primary-grey border-1 hover:bg-white hover:text-primary-grey", children: link.title }, link.field_link_to_movie_database))) }))] })] }), _jsxs("div", { className: "lg:hidden flex flex-col gap-[10px] w-full", children: [_jsxs("h1", { className: "font-bold text-[26px] leading-[40px] text-primary-pink", children: [parse(title), " (", year, ")"] }), _jsxs("p", { className: "text-[16px] leading-[28px] text-primary-black", children: [parse(originalTitle), " (", year, ")"] }), specialTag && (_jsx("div", { className: "border border-primary-grey inline-flex items-center justify-center px-[10px] py-[5px] self-start", children: _jsx("p", { className: "text-[16px] leading-[28px] text-primary-grey whitespace-nowrap", children: parse(specialTag) }) })), _jsxs("div", { className: "flex flex-wrap gap-[10px] items-start w-full", children: [_jsxs("p", { className: "text-[16px] leading-[28px] text-primary-black whitespace-nowrap", children: [_jsx("span", { className: "font-bold", children: "D\u00E9lka: " }), duration, " minut"] }), _jsxs("p", { className: "text-[16px] leading-[28px] text-primary-black whitespace-nowrap", children: [_jsx("span", { className: "font-bold", children: "Zn\u011Bn\u00ED: " }), language] }), _jsxs("p", { className: "text-[16px] leading-[28px] text-primary-black whitespace-nowrap", children: [_jsx("span", { className: "font-bold", children: "P\u0159\u00EDstupnost: " }), ageRating] })] }), _jsxs("div", { className: "relative h-[187px] w-full", children: [_jsx("div", { className: "relative h-full w-full overflow-hidden", children: showTrailerMobile && trailerUrl ? (_jsx("iframe", { src: getEmbedUrl(trailerUrl), className: "w-full h-full", allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture", allowFullScreen: true, title: `${title} trailer` })) : (_jsx("img", { src: posterUrl, alt: title, className: `w-full h-full object-cover ${trailerUrl ? 'cursor-pointer' : ''}`, onClick: trailerUrl ? handleTrailerMobile : undefined })) }), trailerUrl && !showTrailerMobile && (_jsx(Button, { onClick: handleTrailerMobile, rounded: "none", className: "absolute left-[10px] bottom-[15px] bg-primary-cyan text-white px-6.5 py-1.25 uppercase text-[13px] cursor-pointer border-primary-cyan border-1 hover:bg-white hover:text-primary-cyan", children: "UK\u00C1ZKA" }))] }), showtimes.length > 0 && (_jsxs("div", { className: "flex flex-col gap-[10px] w-full", children: [_jsxs("div", { className: "flex items-start justify-between w-full", children: [_jsx("div", { className: "flex items-center pl-0 pr-[10px] py-[5px] w-[100px]", children: _jsx("p", { className: "font-bold text-[20px] leading-[30px] text-primary-black flex-1", children: showtimes[0].date }) }), _jsx("div", { className: "flex items-center justify-center px-[10px] py-[5px]", children: _jsx("p", { className: "font-bold text-[20px] leading-[30px] text-primary-black whitespace-nowrap", children: showtimes[0].time }) }), _jsxs("div", { className: "flex items-center", children: [_jsx("div", { className: "flex items-center justify-center pl-[10px] pr-0 py-[5px]", children: _jsx("p", { className: "text-[16px] leading-[28px] text-primary-black whitespace-nowrap", children: showtimes[0].hall }) }), showtimes[0].subtitles && (_jsx("div", { className: "flex items-center justify-center px-[10px] py-[5px]", children: _jsx("p", { className: "text-[16px] leading-[28px] text-primary-black whitespace-nowrap", children: showtimes[0].subtitles }) })), showtimes[0].format && (_jsx("div", { className: "flex items-center justify-center px-[10px] py-[5px]", children: _jsx("p", { className: "text-[16px] leading-[28px] text-primary-black whitespace-nowrap", children: showtimes[0].format }) }))] })] }), _jsx(Button, { onClick: () => handleTicket(showtimes[0]), rounded: "none", className: "bg-primary-pink text-white px-11 py-2.5 uppercase text-lg cursor-pointer border-primary-pink border-1 hover:bg-white hover:text-primary-pink w-full", children: "VSTUPENKY" })] })), _jsxs("div", { className: "flex flex-col gap-[10px] w-full", children: [_jsxs("div", { className: `relative ${!isExpanded ? 'h-71 overflow-hidden' : ''}`, children: [!isExpanded && (_jsx("div", { className: "absolute bottom-0 left-0 right-0 h-[84px] bg-gradient-to-b from-transparent to-white pointer-events-none blur-[2px]" })), _jsx("div", { className: "text-[16px] leading-[28px] text-primary-blac k mb-4", children: parse(description) }), _jsxs("div", { className: "text-[16px] leading-[28px] text-primary-black mb-2", children: [_jsx("span", { className: "font-bold", children: "Re\u017Eie: " }), parse(director)] }), _jsxs("div", { className: "text-[16px] leading-[28px] text-primary-black mb-2", children: [_jsx("span", { className: "font-bold", children: "\u00DA\u010Dinkuj\u00EDc\u00ED: " }), parse(castString)] }), csfdRating && (_jsxs("div", { className: "text-[16px] leading-[28px] text-primary-black mb-2", children: [_jsx("span", { className: "font-bold", children: "\u010CSFD: " }), parse(csfdRating)] }))] }), !isExpanded ? (_jsxs("button", { onClick: () => setIsExpanded(true), className: "flex items-center gap-[12px] font-semibold text-[16px] leading-[28px] text-primary-pink", children: [_jsx("span", { children: "+" }), _jsx("span", { children: "Zobrazit v\u00EDc" })] })) : (_jsx(_Fragment, { children: linksToMovieDatabase.length > 0 && (_jsx("div", { className: "flex flex-col gap-[10px] w-full", children: linksToMovieDatabase.map((link) => (_jsx(Button, { onClick: () => window.open(link.field_link_to_movie_database, '_blank', 'noopener,noreferrer'), rounded: "none", className: "bg-primary-grey text-white px-[26px] py-[5px] uppercase text-[13px] cursor-pointer border-primary-grey border-1 hover:bg-white hover:text-primary-grey w-full", children: "IMDB" }, link.field_link_to_movie_database))) })) }))] }), showtimes.slice(1).map((showtime, index) => (_jsxs("div", { className: "flex flex-col gap-[10px] w-full", children: [_jsxs("div", { className: "flex items-start justify-between w-full", children: [_jsx("div", { className: "flex items-center pl-0 pr-[10px] py-[5px]", children: _jsx("p", { className: "font-bold text-[20px] leading-[30px] text-primary-black whitespace-nowrap", children: showtime.date }) }), _jsx("div", { className: "flex items-center justify-center px-[10px] py-[5px]", children: _jsx("p", { className: "font-bold text-[20px] leading-[30px] text-primary-black whitespace-nowrap", children: showtime.time }) }), _jsxs("div", { className: "flex items-center", children: [_jsx("div", { className: "flex items-center justify-center pl-[10px] pr-0 py-[5px]", children: _jsx("p", { className: "text-[16px] leading-[28px] text-primary-black whitespace-nowrap", children: showtime.hall }) }), showtime.subtitles && (_jsx("div", { className: "flex items-center justify-center px-[10px] py-[5px]", children: _jsx("p", { className: "text-[16px] leading-[28px] text-primary-black whitespace-nowrap", children: showtime.subtitles }) })), showtime.format && (_jsx("div", { className: "flex items-center justify-center px-[10px] py-[5px]", children: _jsx("p", { className: "text-[16px] leading-[28px] text-primary-black whitespace-nowrap", children: showtime.format }) }))] })] }), _jsx(Button, { onClick: () => handleTicket(showtime), rounded: "none", className: "bg-primary-pink text-white px-11 py-2.5 uppercase text-lg cursor-pointer border-primary-pink border-1 hover:bg-white hover:text-primary-pink w-full", children: "VSTUPENKY" })] }, index + 1)))] })] }));
 }

package/dist/components/Web/ScheduleDetail/ScheduleDetail.d.ts ADDED Viewed

@@ -0,0 +1,28 @@
+export type ScheduleDetailProps = {
+    /** Main title */
+    title: string;
+    /** Short description under the title */
+    description?: string;
+    /** Formatted weekday+date, e.g. "pá 16/5" */
+    weekdayDate?: string;
+    /** Time string */
+    time?: string;
+    /** Location string */
+    location?: string;
+    /** Optional header image URL */
+    imageUrl?: string;
+    /** Alt text for the image */
+    imageAlt?: string;
+    /** Additional CSS classes */
+    className?: string;
+    /** Optional tags like "české titulky", "2D" */
+    tags?: string[];
+    /** Primary action button text (e.g., VSTUPENKY) */
+    buttonText?: string;
+    /** Primary action handler */
+    onButtonClick?: () => void;
+    /** Primary action button classes */
+    buttonClassName?: string;
+};
+export declare const ScheduleDetail: ({ title, description, weekdayDate, time, location, imageUrl, imageAlt, className, tags, buttonText, onButtonClick, buttonClassName, }: ScheduleDetailProps) => import("react/jsx-runtime").JSX.Element;
+export default ScheduleDetail;

package/dist/components/Web/ScheduleDetail/ScheduleDetail.js ADDED Viewed

@@ -0,0 +1,18 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Button from '../../Base/button/Button';
+import { buildClassesByJoining } from '../../../utils/StyleHelper';
+export const ScheduleDetail = ({ title, description, weekdayDate, time, location, imageUrl, imageAlt = 'Schedule image', className, tags, buttonText, onButtonClick, buttonClassName, }) => {
+    return (_jsxs("section", { className: buildClassesByJoining('w-full flex flex-col md:flex-row  md:flex-wrap xl:flex-nowrap md:items-center md:justify-between',
+        // spacing tuned to Figma feel
+        'px-5.5 py-2.5 xl:px-6.25 md:py-10 gap-2.5 md:gap-8 xl:gap-16.25', className), children: [_jsxs("div", { className: "order-1 md:order-1 flex flex-col gap-6 md:min-w-[140px] xl:min-w-[240px]", children: [weekdayDate && (_jsx("div", { className: "text-primary-black text-lg md:text-2xl font-semibold leading-none", children: weekdayDate })), time && (_jsx("div", { className: "text-primary-black text-lg md:text-2xl font-semibold leading-none", children: time })), location && (_jsx("div", { className: "text-primary-black text-lg md:text-2xl font-semibold leading-none", children: location }))] }), imageUrl && (_jsx("div", { className: "order-2 md:order-2 w-full md:w-auto md:min-w-65 md:flex-1 flex justify-center", children: _jsx("img", { src: imageUrl, alt: imageAlt, className: "h-44 w-full max-w-[560px] object-cover md:h-48 md:w-[560px] rounded" }) })), _jsxs("div", { className: "order-3 md:order-3 w-full md:w-auto flex flex-col md:flex-row md:items-center md:justify-between gap-6 md:gap-8 md:min-w-[460px]", children: [_jsxs("div", { className: "flex-1 md:max-w-[520px]", children: [_jsx("h2", { className: "text-primary-black text-lg md:text-2xl font-semibold leading-tight", children: title }), tags && tags.length > 0 && (_jsx("div", { className: "mt-6 flex flex-wrap gap-8 text-primary-grey", children: tags.map((t) => (_jsx("span", { className: "pb-1 border-b-2 border-primary-grey/40 leading-none text-sm md:text-base", children: t }, t))) })), description && (_jsx("p", { className: "mt-6 text-primary-grey text-sm md:text-base leading-7 md:leading-8 max-w-[50ch]", children: description }))] }), buttonText && (_jsx("div", { className: "order-last md:order-none shrink-0 md:ml-8", children: _jsx(Button, { onClick: () => onButtonClick?.(), rounded: "none", className: buttonClassName, children: buttonText }) }))] })] }));
+};
+export default ScheduleDetail;
+// Local SVG icons for metadata display
+const CalendarIcon = () => (_jsx("svg", { width: "20", height: "20", viewBox: "0 0 25 25", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M20.8333 3.125H18.75V1.04167C18.75 0.466667 18.2833 0 17.7083 0H16.6667C16.0917 0 15.625 0.466667 15.625 1.04167V3.125H9.375V1.04167C9.375 0.466667 8.90833 0 8.33333 0H7.29167C6.71667 0 6.25 0.466667 6.25 1.04167V3.125H4.16667C2.325 3.125 0.833333 4.61667 0.833333 6.45833V20.8333C0.833333 22.675 2.325 24.1667 4.16667 24.1667H20.8333C22.675 24.1667 24.1667 22.675 24.1667 20.8333V6.45833C24.1667 4.61667 22.675 3.125 20.8333 3.125ZM22.9167 20.8333C22.9167 21.6917 22.1917 22.4167 21.3333 22.4167H4.16667C3.30833 22.4167 2.58333 21.6917 2.58333 20.8333V10.4167H22.9167V20.8333ZM22.9167 8.33333H2.58333V6.45833C2.58333 5.6 3.30833 4.875 4.16667 4.875H6.25V6.45833C6.25 7.03333 6.71667 7.5 7.29167 7.5H8.33333C8.90833 7.5 9.375 7.03333 9.375 6.45833V4.875H15.625V6.45833C15.625 7.03333 16.0917 7.5 16.6667 7.5H17.7083C18.2833 7.5 18.75 7.03333 18.75 6.45833V4.875H20.8333C21.6917 4.875 22.4167 5.6 22.4167 6.45833V8.33333H22.9167Z", fill: "white" }) }));
+const ClockIcon = () => (_jsx("svg", { width: "20", height: "20", viewBox: "0 0 25 25", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M12.5 0C5.6 0 0 5.6 0 12.5C0 19.4 5.6 25 12.5 25C19.4 25 25 19.4 25 12.5C25 5.6 19.4 0 12.5 0ZM12.5 22.9167C6.975 22.9167 2.08333 18.025 2.08333 12.5C2.08333 6.975 6.975 2.08333 12.5 2.08333C18.025 2.08333 22.9167 6.975 22.9167 12.5C22.9167 18.025 18.025 22.9167 12.5 22.9167ZM13.5417 6.25H11.4583V13.5417L17.7083 16.6667L18.75 14.7917L13.5417 12.5V6.25Z", fill: "white" }) }));
+const LocationIcon = () => (_jsx("svg", { width: "20", height: "20", viewBox: "0 0 25 25", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M12.5 0C7.80833 0 4.16667 3.64167 4.16667 8.33333C4.16667 14.5833 12.5 25 12.5 25S20.8333 14.5833 20.8333 8.33333C20.8333 3.64167 17.1917 0 12.5 0ZM12.5 11.4583C11.1417 11.4583 10.0417 10.3583 10.0417 8.33333C10.0417 6.30833 11.1417 5.20833 12.5 5.20833C13.8583 5.20833 14.9583 6.30833 14.9583 8.33333C14.9583 10.3583 13.8583 11.4583 12.5 11.4583Z", fill: "white" }) }));
+// Local button to mirror "VSTUPENKY" style
+const ActionButton = ({ label, onClick }) => (_jsx("button", { type: "button", onClick: onClick, className: buildClassesByJoining(
+    // mobile: full-width, desktop: auto width; flat corners to match visual
+    'w-full md:w-auto px-8 py-3 md:px-10 md:py-3.5', 'bg-[#E9A8A8] text-white font-semibold tracking-wide hover:opacity-90 transition', 'rounded-none md:rounded'), children: label }));

package/dist/components/Web/event-card/EventCard.d.ts ADDED Viewed

@@ -0,0 +1,30 @@
+export interface EventCardProps {
+    /** Event image URL */
+    imageUrl?: string;
+    /** Event image alt text */
+    imageAlt?: string;
+    /** Event category/type (e.g., "Výstava", "Kino", "Divadlo") */
+    category: string;
+    /** Event title */
+    title: string;
+    /** Event description */
+    description: string;
+    /** Event date */
+    date: string;
+    /** Event time */
+    time: string;
+    /** Event location */
+    location: string;
+    /** Additional CSS classes */
+    className?: string;
+    /** Click handler for the card */
+    onClick?: () => void;
+    /** Button text */
+    buttonText?: string;
+    /** Button click handler */
+    onButtonClick?: () => void;
+    /** Button classes */
+    buttonClassName?: string;
+}
+export declare const EventCard: ({ imageUrl, imageAlt, category, title, description, date, time, location, className, onClick, buttonText, onButtonClick, buttonClassName, }: EventCardProps) => import("react/jsx-runtime").JSX.Element;
+export default EventCard;

package/dist/components/Web/event-card/EventCard.js ADDED Viewed

@@ -0,0 +1,18 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Image from 'next/image';
+import buildClassesByJoining from '../../../utils/StyleHelper';
+import Button from '../../Base/button/Button';
+// Icons as SVG components for better performance and customization
+const CalendarIcon = () => (_jsx("svg", { width: "25", height: "25", viewBox: "0 0 25 25", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M20.8333 3.125H18.75V1.04167C18.75 0.466667 18.2833 0 17.7083 0H16.6667C16.0917 0 15.625 0.466667 15.625 1.04167V3.125H9.375V1.04167C9.375 0.466667 8.90833 0 8.33333 0H7.29167C6.71667 0 6.25 0.466667 6.25 1.04167V3.125H4.16667C2.325 3.125 0.833333 4.61667 0.833333 6.45833V20.8333C0.833333 22.675 2.325 24.1667 4.16667 24.1667H20.8333C22.675 24.1667 24.1667 22.675 24.1667 20.8333V6.45833C24.1667 4.61667 22.675 3.125 20.8333 3.125ZM22.9167 20.8333C22.9167 21.6917 22.1917 22.4167 21.3333 22.4167H4.16667C3.30833 22.4167 2.58333 21.6917 2.58333 20.8333V10.4167H22.9167V20.8333ZM22.9167 8.33333H2.58333V6.45833C2.58333 5.6 3.30833 4.875 4.16667 4.875H6.25V6.45833C6.25 7.03333 6.71667 7.5 7.29167 7.5H8.33333C8.90833 7.5 9.375 7.03333 9.375 6.45833V4.875H15.625V6.45833C15.625 7.03333 16.0917 7.5 16.6667 7.5H17.7083C18.2833 7.5 18.75 7.03333 18.75 6.45833V4.875H20.8333C21.6917 4.875 22.4167 5.6 22.4167 6.45833V8.33333H22.9167Z", fill: "white" }) }));
+const ClockIcon = () => (_jsx("svg", { width: "25", height: "25", viewBox: "0 0 25 25", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M12.5 0C5.6 0 0 5.6 0 12.5C0 19.4 5.6 25 12.5 25C19.4 25 25 19.4 25 12.5C25 5.6 19.4 0 12.5 0ZM12.5 22.9167C6.975 22.9167 2.08333 18.025 2.08333 12.5C2.08333 6.975 6.975 2.08333 12.5 2.08333C18.025 2.08333 22.9167 6.975 22.9167 12.5C22.9167 18.025 18.025 22.9167 12.5 22.9167ZM13.5417 6.25H11.4583V13.5417L17.7083 16.6667L18.75 14.7917L13.5417 12.5V6.25Z", fill: "white" }) }));
+const LocationIcon = () => (_jsx("svg", { width: "25", height: "25", viewBox: "0 0 25 25", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M12.5 0C7.80833 0 4.16667 3.64167 4.16667 8.33333C4.16667 14.5833 12.5 25 12.5 25S20.8333 14.5833 20.8333 8.33333C20.8333 3.64167 17.1917 0 12.5 0ZM12.5 11.4583C11.1417 11.4583 10.0417 10.3583 10.0417 8.33333C10.0417 6.30833 11.1417 5.20833 12.5 5.20833C13.8583 5.20833 14.9583 6.30833 14.9583 8.33333C14.9583 10.3583 13.8583 11.4583 12.5 11.4583Z", fill: "white" }) }));
+const CategoryBadge = ({ category }) => (_jsxs("div", { className: "flex bg-white h-10.5 min-h-10.5 overflow-hidden w-77.5", children: [_jsx("div", { className: "w-63.5 bg-primary-grey px-5.75 py-1.75", children: _jsx("div", { className: "flex flex-col font-semibold justify-center leading-0 not-italic text-4.5 text-white", children: _jsx("p", { className: "leading-7", children: category }) }) }), _jsx("div", { className: "overflow-hidden w-14 bg-primary-grey", children: _jsx("div", { className: "bottom-0 left-0 right-[0.02%] top-0" }) })] }));
+export const EventCard = ({ imageUrl = "http://localhost:3845/assets/f60ef9ffaad11fe658d28ae57cd6e9548d7462de.png", imageAlt = "Event image", category, title, description, date, time, location, className, onClick, buttonText, onButtonClick, buttonClassName, }) => {
+    const containerClasses = buildClassesByJoining([
+        "content-stretch flex flex-col items-start relative size-full cursor-pointer transition-all duration-300 hover:transform hover:scale-[1.03] hover:shadow-lg w-77.5",
+        className
+    ]);
+    return (_jsx("div", { className: containerClasses, onClick: onClick, "data-name": "Event Card", children: _jsxs("div", { className: "flex flex-col relative shrink-0 w-77.5", children: [_jsx(Image, { src: imageUrl, alt: imageAlt, className: "object-cover max-h-43 md:max-h-60.5", width: 310, height: 234 }), _jsx(CategoryBadge, { category: category }), _jsxs("div", { className: "bg-white box-border content-stretch flex flex-col gap-4.5 items-start px-5.5 py-4.5 w-77.5", children: [_jsx("div", { className: "flex flex-col font-semibold justify-center min-w-full max-w-full not-italic text-primary-black text-6", children: _jsx("p", { className: "truncate", children: title }) }), _jsx("div", { className: "flex flex-col font-normal justify-center leading-0 min-w-full max-w-full not-italic relative shrink-0 text-primary-grey text-4", children: _jsx("p", { className: "leading-7 truncate", children: description }) }), _jsxs("div", { className: "content-stretch flex flex-col gap-2.5 items-start relative shrink-0", children: [_jsxs("div", { className: "content-stretch flex gap-4 items-center relative shrink-0 w-full", children: [_jsx("div", { className: "bg-primary-grey box-border content-stretch flex gap-2.5 items-center p-1.25 relative rounded-[39px] shrink-0", children: _jsx("div", { className: "relative shrink-0 size-6.25 flex items-center justify-center", children: _jsx(CalendarIcon, {}) }) }), _jsx("div", { className: "flex flex-col font-semibold justify-center leading-0 not-italic relative shrink-0 text-primary-black text-1.75", children: _jsx("p", { className: "leading-6.5 whitespace-pre truncate", children: date }) })] }), _jsxs("div", { className: "content-stretch flex gap-4 items-center relative shrink-0 w-full", children: [_jsx("div", { className: "bg-primary-grey content-stretch flex gap-2.5 items-center justify-center relative rounded-[39px] shrink-0 size-8.75", children: _jsx("div", { className: "overflow-hidden relative shrink-0 size-6.25 flex items-center justify-center", children: _jsx(ClockIcon, {}) }) }), _jsx("div", { className: "flex flex-col font-semibold justify-center leading-0 not-italic relative shrink-0 text-primary-black text-1.75", children: _jsx("p", { className: "leading-6.5 whitespace-pre truncate", children: time }) })] }), _jsxs("div", { className: "content-stretch flex gap-4 items-center relative shrink-0 w-full", children: [_jsx("div", { className: "bg-primary-grey content-stretch flex gap-2.5 items-center justify-center relative rounded-[39px] shrink-0 size-8.75", children: _jsx("div", { className: "overflow-hidden relative shrink-0 size-6.25 flex items-center justify-center", children: _jsx(LocationIcon, {}) }) }), _jsx("div", { className: "flex flex-col font-semibold justify-center leading-0 not-italic relative shrink-0 text-primary-black text-1.75", children: _jsx("p", { className: "leading-6.5 whitespace-pre truncate", children: location }) })] })] })] }), buttonText && (_jsx(Button, { onClick: () => onButtonClick?.(), rounded: "none", className: buttonClassName, children: buttonText }))] }) }));
+};
+export default EventCard;

package/dist/components/Web/event-card-horizontal/EventCardHorizontal.d.ts ADDED Viewed

@@ -0,0 +1,30 @@
+export interface EventCardHorizontalProps {
+    /** Event image URL */
+    imageUrl?: string;
+    /** Event image alt text */
+    imageAlt?: string;
+    /** Event category/type (e.g., "Výstava", "Kino", "Divadlo") */
+    category: string;
+    /** Event title */
+    title: string;
+    /** Event description */
+    description: string;
+    /** Event date */
+    date: string;
+    /** Event time */
+    time: string;
+    /** Event location */
+    location: string;
+    /** Additional CSS classes */
+    className?: string;
+    /** Click handler for the card */
+    onClick?: () => void;
+    /** Button text */
+    buttonText?: string;
+    /** Button click handler */
+    onButtonClick?: () => void;
+    /** Button classes */
+    buttonClassName?: string;
+}
+export declare const EventCardHorizontal: ({ imageUrl, imageAlt, category, title, description, date, time, location, className, onClick, buttonText, onButtonClick, buttonClassName, }: EventCardHorizontalProps) => import("react/jsx-runtime").JSX.Element;
+export default EventCardHorizontal;

package/dist/components/Web/event-card-horizontal/EventCardHorizontal.js ADDED Viewed

@@ -0,0 +1,24 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Image from 'next/image';
+import buildClassesByJoining from '../../../utils/StyleHelper';
+import Button from '../../Base/button/Button';
+// Icons as SVG components for better performance and customization
+const CalendarIcon = () => (_jsx("svg", { width: "20", height: "20", viewBox: "0 0 25 25", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M20.8333 3.125H18.75V1.04167C18.75 0.466667 18.2833 0 17.7083 0H16.6667C16.0917 0 15.625 0.466667 15.625 1.04167V3.125H9.375V1.04167C9.375 0.466667 8.90833 0 8.33333 0H7.29167C6.71667 0 6.25 0.466667 6.25 1.04167V3.125H4.16667C2.325 3.125 0.833333 4.61667 0.833333 6.45833V20.8333C0.833333 22.675 2.325 24.1667 4.16667 24.1667H20.8333C22.675 24.1667 24.1667 22.675 24.1667 20.8333V6.45833C24.1667 4.61667 22.675 3.125 20.8333 3.125ZM22.9167 20.8333C22.9167 21.6917 22.1917 22.4167 21.3333 22.4167H4.16667C3.30833 22.4167 2.58333 21.6917 2.58333 20.8333V10.4167H22.9167V20.8333ZM22.9167 8.33333H2.58333V6.45833C2.58333 5.6 3.30833 4.875 4.16667 4.875H6.25V6.45833C6.25 7.03333 6.71667 7.5 7.29167 7.5H8.33333C8.90833 7.5 9.375 7.03333 9.375 6.45833V4.875H15.625V6.45833C15.625 7.03333 16.0917 7.5 16.6667 7.5H17.7083C18.2833 7.5 18.75 7.03333 18.75 6.45833V4.875H20.8333C21.6917 4.875 22.4167 5.6 22.4167 6.45833V8.33333H22.9167Z", fill: "white" }) }));
+const ClockIcon = () => (_jsx("svg", { width: "20", height: "20", viewBox: "0 0 25 25", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M12.5 0C5.6 0 0 5.6 0 12.5C0 19.4 5.6 25 12.5 25C19.4 25 25 19.4 25 12.5C25 5.6 19.4 0 12.5 0ZM12.5 22.9167C6.975 22.9167 2.08333 18.025 2.08333 12.5C2.08333 6.975 6.975 2.08333 12.5 2.08333C18.025 2.08333 22.9167 6.975 22.9167 12.5C22.9167 18.025 18.025 22.9167 12.5 22.9167ZM13.5417 6.25H11.4583V13.5417L17.7083 16.6667L18.75 14.7917L13.5417 12.5V6.25Z", fill: "white" }) }));
+const LocationIcon = () => (_jsx("svg", { width: "20", height: "20", viewBox: "0 0 25 25", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M12.5 0C7.80833 0 4.16667 3.64167 4.16667 8.33333C4.16667 14.5833 12.5 25 12.5 25S20.8333 14.5833 20.8333 8.33333C20.8333 3.64167 17.1917 0 12.5 0ZM12.5 11.4583C11.1417 11.4583 10.0417 10.3583 10.0417 8.33333C10.0417 6.30833 11.1417 5.20833 12.5 5.20833C13.8583 5.20833 14.9583 6.30833 14.9583 8.33333C14.9583 10.3583 13.8583 11.4583 12.5 11.4583Z", fill: "white" }) }));
+const CategoryBadge = ({ category }) => (_jsx("div", { className: "inline-flex items-center bg-primary-grey px-3 py-1 rounded-full", children: _jsx("span", { className: "text-white text-sm font-semibold", children: category }) }));
+export const EventCardHorizontal = ({ imageUrl = "http://localhost:3845/assets/f60ef9ffaad11fe658d28ae57cd6e9548d7462de.png", imageAlt = "Event image", category, title, description, date, time, location, className, onClick, buttonText, onButtonClick, buttonClassName, }) => {
+    const containerClasses = buildClassesByJoining([
+        "flex flex-col md:flex-row bg-white rounded-lg shadow-sm hover:shadow-md transition-all duration-300 cursor-pointer overflow-hidden",
+        className
+    ]);
+    return (_jsxs("div", { className: containerClasses, onClick: onClick, "data-name": "Event Card Horizontal", children: [_jsx("div", { className: "relative w-full md:w-48 h-48 md:h-auto flex-shrink-0", children: _jsx(Image, { src: imageUrl, alt: imageAlt, fill: true, className: "object-cover", sizes: "(max-width: 768px) 100vw, 192px" }) }), _jsxs("div", { className: "flex-1 p-4 flex flex-col justify-between", children: [_jsxs("div", { className: "space-y-3", children: [_jsx(CategoryBadge, { category: category }), _jsx("h3", { className: "text-lg font-semibold text-primary-black leading-tight", children: title }), _jsx("p", { className: "text-sm text-primary-grey leading-relaxed line-clamp-2", children: description }), _jsxs("div", { className: "space-y-2", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "bg-primary-grey rounded-full p-1.5 flex items-center justify-center", children: _jsx(CalendarIcon, {}) }), _jsx("span", { className: "text-sm font-semibold text-primary-black", children: date })] }), _jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "bg-primary-grey rounded-full p-1.5 flex items-center justify-center", children: _jsx(ClockIcon, {}) }), _jsx("span", { className: "text-sm font-semibold text-primary-black", children: time })] }), _jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "bg-primary-grey rounded-full p-1.5 flex items-center justify-center", children: _jsx(LocationIcon, {}) }), _jsx("span", { className: "text-sm font-semibold text-primary-black", children: location })] })] })] }), buttonText && (_jsx("div", { className: "mt-4", children: _jsx(Button, { onClick: (e) => {
+                                e.stopPropagation();
+                                onButtonClick?.();
+                            }, rounded: "none", className: buildClassesByJoining([
+                                "w-full md:w-auto bg-primary-pink text-white px-6 py-2 text-sm font-semibold hover:bg-primary-pink/90 transition-colors",
+                                buttonClassName
+                            ]), children: buttonText }) }))] })] }));
+};
+export default EventCardHorizontal;

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
     "name": "@q2devel/q2-storybook",
-    "version": "1.0.189",
+    "version": "1.0.192",
     "main": "dist/index.js",
     "module": "dist/index.js",
     "types": "dist/index.d.ts",