@q2devel/q2-storybook 1.0.143 → 1.0.145

package/dist/components/MIKS/ScheduleDetail/ScheduleDetail.d.ts

@@ -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/MIKS/ScheduleDetail/ScheduleDetail.js

@@ -0,0 +1,18 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from '../../../index';
+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 xl:gap-16.25 lg:border-b lg:border-primary-black', className), children: [_jsxs("div", { className: 'flex flex-col md:flex-row gap-2.5 md:gap-8 xl:gap-16.25 md:items-center', children: [_jsxs("div", { className: "flex flex-col gap-2.5 md:gap-6 md:min-w-[140px] xl:min-w-56", 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: "w-full md:w-auto flex justify-center md:justify-end xl:justify-center", children: _jsx("img", { src: imageUrl, alt: imageAlt, className: "h-44 w-full max-w-[560px] object-cover md:h-39.5 md:w-65.25 rounded" }) })), _jsxs("div", { className: "flex-1 w-full lg:w-66 xl:w-75 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-2.5 md: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-1.25 md: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 w-full lg:w-auto", 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/MIKS/date-carousel/DateCarousel.d.ts

@@ -0,0 +1,19 @@
+export type DateCarouselProps = {
+    /** Array of dates to display */
+    dates: Date[];
+    /** Currently selected date */
+    selectedDate?: Date | null;
+    /** Callback when date selection changes */
+    onChange?: (date: Date) => void;
+    /** Additional CSS classes */
+    className?: string;
+    /**
+     * Formatters allow full control over displayed labels.
+     * Defaults follow the Czech format: day abbreviation and D/M.
+     */
+    formatDayLabel?: (date: Date) => string;
+    formatDateLabel?: (date: Date) => string;
+    /** Amount of items to advance on prev/next. Defaults to 1. */
+    pageSize?: number;
+};
+export default function DateCarousel(props: DateCarouselProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/MIKS/date-carousel/DateCarousel.js

@@ -0,0 +1,264 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useCallback, useEffect, useMemo, useRef, useState, } from "react";
+function defaultFormatDayLabel(date) {
+    // Czech abbreviations: po, út, st, čt, pá, so, ne
+    const map = ["ne", "po", "út", "st", "čt", "pá", "so"]; // JS: 0=Sun
+    return map[date.getDay()];
+}
+function defaultFormatDateLabel(date) {
+    return `${date.getDate()}/${date.getMonth() + 1}`;
+}
+function isSameDay(a, b) {
+    if (!a || !b)
+        return false;
+    return (a.getFullYear() === b.getFullYear() &&
+        a.getMonth() === b.getMonth() &&
+        a.getDate() === b.getDate());
+}
+export default function DateCarousel(props) {
+    const { dates, selectedDate: selectedDateProp = null, onChange, className, formatDayLabel = defaultFormatDayLabel, formatDateLabel = defaultFormatDateLabel, pageSize = 1, } = props;
+    const [selectedDate, setSelectedDate] = useState(selectedDateProp);
+    const [visibleItems, setVisibleItems] = useState(new Set());
+    const [isDragging, setIsDragging] = useState(false);
+    // Initialize all items as visible when dates change
+    useEffect(() => {
+        setVisibleItems(new Set(dates.map((_, index) => index)));
+    }, [dates]);
+    useEffect(() => {
+        setSelectedDate(selectedDateProp ?? null);
+    }, [selectedDateProp]);
+    const containerRef = useRef(null);
+    const itemRefs = useRef([]);
+    // Intersection Observer to track which items are fully visible
+    useEffect(() => {
+        const container = containerRef.current;
+        if (!container)
+            return;
+        const observer = new IntersectionObserver((entries) => {
+            setVisibleItems((prev) => {
+                const newSet = new Set(prev);
+                entries.forEach((entry) => {
+                    const index = parseInt(entry.target.getAttribute("data-index") || "0");
+                    if (entry.intersectionRatio === 1) {
+                        newSet.add(index);
+                    }
+                    else {
+                        newSet.delete(index);
+                    }
+                });
+                return newSet;
+            });
+        }, {
+            root: container,
+            threshold: [0, 0.1, 0.5, 0.9, 1.0],
+            rootMargin: "0px",
+        });
+        const observeItems = () => {
+            itemRefs.current.forEach((item, index) => {
+                if (item) {
+                    item.setAttribute("data-index", index.toString());
+                    observer.observe(item);
+                }
+            });
+        };
+        const timeoutId = setTimeout(observeItems, 100);
+        return () => {
+            clearTimeout(timeoutId);
+            observer.disconnect();
+        };
+    }, [dates]);
+    const isPointerDownRef = useRef(false);
+    const pointerStartXRef = useRef(0);
+    const scrollStartLeftRef = useRef(0);
+    const didDragRef = useRef(false);
+    const handleSelect = useCallback((date, index) => {
+        setSelectedDate(date);
+        onChange?.(date);
+        setIsDragging(true);
+        setVisibleItems(new Set(dates.map((_, index) => index)));
+        itemRefs.current[index]?.scrollIntoView({
+            inline: "center",
+            block: "nearest",
+            behavior: "smooth",
+        });
+        setTimeout(() => {
+            setIsDragging(false);
+            setTimeout(() => {
+                if (containerRef.current) {
+                    const container = containerRef.current;
+                    const observer = new IntersectionObserver((entries) => {
+                        setVisibleItems((prev) => {
+                            const newSet = new Set(prev);
+                            entries.forEach((entry) => {
+                                const index = parseInt(entry.target.getAttribute("data-index") || "0");
+                                if (entry.intersectionRatio === 1) {
+                                    newSet.add(index);
+                                }
+                                else {
+                                    newSet.delete(index);
+                                }
+                            });
+                            return newSet;
+                        });
+                    }, {
+                        root: container,
+                        threshold: [0, 0.1, 0.5, 0.9, 1.0],
+                        rootMargin: "0px",
+                    });
+                    itemRefs.current.forEach((item, index) => {
+                        if (item) {
+                            item.setAttribute("data-index", index.toString());
+                            observer.observe(item);
+                        }
+                    });
+                    setTimeout(() => observer.disconnect(), 1000);
+                }
+            }, 300);
+        }, 100);
+    }, [onChange, dates]);
+    const selectedIndex = useMemo(() => {
+        if (!selectedDate)
+            return -1;
+        return dates.findIndex((d) => isSameDay(d, selectedDate));
+    }, [dates, selectedDate]);
+    const pageBy = useCallback((direction) => {
+        const base = selectedIndex >= 0 ? selectedIndex : 0;
+        const nextIndex = Math.min(Math.max(base + direction * pageSize, 0), dates.length - 1);
+        const next = dates[nextIndex];
+        if (next) {
+            handleSelect(next, nextIndex);
+        }
+    }, [dates, selectedIndex, pageSize, handleSelect]);
+    const onKeyDown = useCallback((e) => {
+        if (dates.length === 0)
+            return;
+        const current = selectedIndex >= 0 ? selectedIndex : 0;
+        if (e.key === "ArrowRight") {
+            e.preventDefault();
+            const nextIndex = Math.min(current + 1, dates.length - 1);
+            handleSelect(dates[nextIndex], nextIndex);
+        }
+        else if (e.key === "ArrowLeft") {
+            e.preventDefault();
+            const nextIndex = Math.max(current - 1, 0);
+            handleSelect(dates[nextIndex], nextIndex);
+        }
+        else if (e.key === "Home") {
+            e.preventDefault();
+            handleSelect(dates[0], 0);
+        }
+        else if (e.key === "End") {
+            e.preventDefault();
+            handleSelect(dates[dates.length - 1], dates.length - 1);
+        }
+        else if (e.key === "PageUp") {
+            e.preventDefault();
+            pageBy(-1);
+        }
+        else if (e.key === "PageDown") {
+            e.preventDefault();
+            pageBy(1);
+        }
+    }, [dates, selectedIndex, handleSelect, pageBy]);
+    const onPointerDown = useCallback((e) => {
+        const el = containerRef.current;
+        if (!el)
+            return;
+        isPointerDownRef.current = true;
+        pointerStartXRef.current = e.clientX;
+        scrollStartLeftRef.current = el.scrollLeft;
+        didDragRef.current = false;
+        setIsDragging(true);
+        setVisibleItems(new Set(dates.map((_, index) => index)));
+    }, [dates]);
+    const onPointerMove = useCallback((e) => {
+        if (!isPointerDownRef.current)
+            return;
+        const el = containerRef.current;
+        if (!el)
+            return;
+        const dx = e.clientX - pointerStartXRef.current;
+        if (Math.abs(dx) > 3 && !didDragRef.current) {
+            didDragRef.current = true;
+            el.style.scrollBehavior = "auto";
+            el.setPointerCapture?.(e.pointerId);
+        }
+        if (didDragRef.current) {
+            el.scrollLeft = scrollStartLeftRef.current - dx;
+            e.preventDefault();
+        }
+    }, []);
+    const endDrag = useCallback((e) => {
+        if (!isPointerDownRef.current)
+            return;
+        isPointerDownRef.current = false;
+        const el = containerRef.current;
+        if (!el)
+            return;
+        if (didDragRef.current) {
+            el.releasePointerCapture?.(e.pointerId);
+        }
+        el.style.scrollBehavior = "";
+        setIsDragging(false);
+        setTimeout(() => {
+            if (containerRef.current) {
+                const container = containerRef.current;
+                const observer = new IntersectionObserver((entries) => {
+                    setVisibleItems((prev) => {
+                        const newSet = new Set(prev);
+                        entries.forEach((entry) => {
+                            const index = parseInt(entry.target.getAttribute("data-index") || "0");
+                            if (entry.intersectionRatio === 1) {
+                                newSet.add(index);
+                            }
+                            else {
+                                newSet.delete(index);
+                            }
+                        });
+                        return newSet;
+                    });
+                }, {
+                    root: container,
+                    threshold: [0, 0.1, 0.5, 0.9, 1.0],
+                    rootMargin: "0px",
+                });
+                itemRefs.current.forEach((item, index) => {
+                    if (item) {
+                        item.setAttribute("data-index", index.toString());
+                        observer.observe(item);
+                    }
+                });
+                setTimeout(() => observer.disconnect(), 1000);
+            }
+        }, 100);
+    }, []);
+    return (_jsxs("div", { className: `bg-[var(--color-secondary-grey-300)] flex items-center justify-between px-4 lg:px-18.75 py-2.5 ${className ?? ""}`, role: "group", "aria-label": "Date carousel", children: [_jsx("button", { type: "button", onClick: () => pageBy(-1), "aria-label": "Previous dates", className: "select-none text-2xl font-semibold leading-7.5 text-[var(--color-primary-black)] mr-3 md:mr-6.25 cursor-pointer", children: "<" }), _jsx("div", { ref: containerRef, className: "flex gap-0 md:gap-4 items-center overflow-x-auto scroll-px-4 snap-x snap-mandatory no-scrollbar select-none cursor-grab active:cursor-grabbing min-w-0", style: {
+                    scrollbarWidth: "none",
+                    msOverflowStyle: "none",
+                    WebkitOverflowScrolling: "touch",
+                }, onKeyDown: onKeyDown, onPointerDown: onPointerDown, onPointerMove: onPointerMove, onPointerUp: endDrag, onPointerCancel: endDrag, onPointerLeave: endDrag, role: "listbox", "aria-orientation": "horizontal", tabIndex: 0, children: dates.map((date, index) => {
+                    const isSelected = isSameDay(date, selectedDate);
+                    const dayOfWeek = date.getDay();
+                    const isSunday = dayOfWeek === 0;
+                    return (_jsxs(React.Fragment, { children: [isSunday &&
+                                index < dates.length - 1 &&
+                                typeof window !== "undefined" &&
+                                window.innerWidth >= 768 && (_jsx("div", { className: "w-4.5 flex-shrink-0" })), _jsxs("button", { ref: (el) => {
+                                    itemRefs.current[index] = el;
+                                }, type: "button", role: "option", "aria-selected": isSelected, onClick: () => {
+                                    if (didDragRef.current)
+                                        return;
+                                    handleSelect(date, index);
+                                }, className: `snap-center px-[5px] py-0 lg:p-[10px] text-center flex flex-col items-center justify-center transition-colors duration-150 min-w-[44px] lg:min-w-[52px] flex-shrink-0 ` +
+                                    (isSelected
+                                        ? "bg-primary-grey shadow-sm text-primary-black"
+                                        : "bg-transparent hover:bg-primary-grey group cursor-pointer"), "data-index": index, children: [_jsx("span", { className: `text-[14px] leading-[26px] lg:text-[18px] lg:leading-[28px] transition-colors duration-150 font-semibold ` +
+                                            (isSelected
+                                                ? "text-white"
+                                                : "text-primary-grey group-hover:text-white"), children: formatDayLabel(date) }), _jsx("span", { className: `text-[16px] leading-[28px] lg:text-[24px] lg:leading-[30px] transition-colors duration-150 font-semibold ` +
+                                            (isSelected
+                                                ? "text-white"
+                                                : "text-primary-black group-hover:text-white"), children: formatDateLabel(date) })] })] }, date.toISOString()));
+                }) }), _jsx("button", { type: "button", onClick: () => pageBy(1), "aria-label": "Next dates", className: "select-none text-2xl font-semibold leading-7.5 text-[var(--color-primary-black)] ml-3 md:ml-6.25 cursor-pointer", children: ">" })] }));
+}

package/dist/components/MIKS/event-card/EventCard.d.ts

@@ -0,0 +1,32 @@
+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 category icon */
+    icon?: 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, icon, }: EventCardProps) => import("react/jsx-runtime").JSX.Element;
+export default EventCard;

package/dist/components/MIKS/event-card/EventCard.js

@@ -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 "../../../index";
+// 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, icon, }) => (_jsx("div", { className: "flex bg-primary-grey h-10.5 min-h-10.5 overflow-hidden w-77.5 group-hover:-mt-0.25 group-hover:w-77.75 transition-all duration-300", children: _jsxs("div", { className: "w-full relative px-5.75 py-1.75", children: [_jsx("div", { className: "flex flex-col font-semibold justify-center leading-0 not-italic text-lg text-white", children: _jsx("p", { className: "leading-7", children: category }) }), icon && (_jsx(Image, { src: icon, alt: "", width: 69, height: 42, className: "absolute bottom-0 -right-0.25 w-17.25 h-10.5" }))] }) }));
+export const EventCard = ({ imageUrl = "http://localhost:3845/assets/f60ef9ffaad11fe658d28ae57cd6e9548d7462de.png", imageAlt = "Event image", category, title, description, date, time, location, className, onClick, buttonText, onButtonClick, buttonClassName, icon, }) => {
+    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 group",
+        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 ${category ? "md:h-58.5 md:max-h-58.5" : "md:h-77.5 md:max-h-77.5"}`, width: 310, height: category ? 234 : 310 }), category && _jsx(CategoryBadge, { category: category, icon: icon }), _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 md:h-15", children: _jsx("p", { className: "text-lg md:text-2xl overflow-hidden line-clamp-1 md:line-clamp-2 leading-tight", 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: "text-sm md:text-base leading-7 truncate", children: description }) }), _jsxs("div", { className: "content-stretch flex flex-col gap-2.5 items-start relative shrink-0", children: [date && (_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: "text-sm leading-6.5 whitespace-pre truncate", children: date }) })] })), 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(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: "text-sm leading-6.5 whitespace-pre truncate", children: time }) })] })), location && (_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: "text-sm 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/MIKS/filters/FilterContainer.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+export type FilterContainerProps = {
+    /** Child components */
+    children: React.ReactNode;
+    /** Additional CSS classes */
+    className?: string;
+};
+/**
+ * Container component that ensures filters maintain consistent layout
+ * and don't affect each other when expanding/collapsing
+ */
+export default function FilterContainer({ children, className }: FilterContainerProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/MIKS/filters/FilterContainer.js

@@ -0,0 +1,9 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Container component that ensures filters maintain consistent layout
+ * and don't affect each other when expanding/collapsing
+ */
+export default function FilterContainer({ children, className = "" }) {
+    return (_jsx("div", { className: `filter-container relative ${className}`, children: children }));
+}

package/dist/components/MIKS/filters/FilterGrid.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+export type FilterGridProps = {
+    /** Child components */
+    children: React.ReactNode;
+    /** Additional CSS classes */
+    className?: string;
+    /** Number of columns on desktop */
+    columns?: 1 | 2 | 3 | 4;
+};
+/**
+ * Grid container for filters that ensures each filter maintains
+ * its own space and doesn't affect others when expanding/collapsing
+ */
+export default function FilterGrid({ children, className, columns }: FilterGridProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/MIKS/filters/FilterGrid.js

@@ -0,0 +1,16 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from "react";
+/**
+ * Grid container for filters that ensures each filter maintains
+ * its own space and doesn't affect others when expanding/collapsing
+ */
+export default function FilterGrid({ children, className = "", columns = 3 }) {
+    const gridColsClass = {
+        1: 'md:grid-cols-1',
+        2: 'md:grid-cols-2',
+        3: 'md:grid-cols-3',
+        4: 'md:grid-cols-4',
+    }[columns];
+    return (_jsx("div", { className: `filter-grid grid grid-cols-1 ${gridColsClass} gap-4 items-start ${className}`, children: React.Children.map(children, (child, index) => (_jsx("div", { className: "filter-grid-item", children: child }, index))) }));
+}

package/dist/components/MIKS/filters/FilterType.d.ts

@@ -0,0 +1,19 @@
+export type FilterTypeProps = {
+    /** Initial expanded state */
+    isExpanded?: boolean;
+    /** Mobile variant */
+    isMobile?: boolean;
+    /** Selected options */
+    selectedOptions?: string[];
+    /** Callback when options change */
+    onChange?: (options: string[]) => void;
+    /** Custom CSS classes */
+    className?: string;
+    /** Custom type options */
+    options?: string[];
+    /** Filter title */
+    title?: string;
+    /** Border color */
+    borderColor?: string;
+};
+export default function FilterType({ isExpanded: initialExpanded, isMobile, selectedOptions, onChange, className, options, title, borderColor, }: FilterTypeProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/MIKS/filters/FilterType.js

@@ -0,0 +1,42 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+const DEFAULT_TYPE_OPTIONS = [
+    "Vše",
+    "Promítání",
+    "Výstava",
+    "Koncert",
+    "Přednáška",
+    "Prohlídka",
+    "Pro děti",
+    "Expozice",
+    "Ostatní akce",
+];
+export default function FilterType({ isExpanded: initialExpanded = false, isMobile = false, selectedOptions = [], onChange, className = "", options = DEFAULT_TYPE_OPTIONS, title = "Typ?", borderColor = "#eda1a2", }) {
+    const [isExpanded, setIsExpanded] = useState(initialExpanded);
+    const [selected, setSelected] = useState(new Set(selectedOptions));
+    const handleToggle = () => {
+        setIsExpanded(!isExpanded);
+    };
+    const handleOptionToggle = (option) => {
+        const newSelected = new Set(selected);
+        if (newSelected.has(option)) {
+            newSelected.delete(option);
+        }
+        else {
+            newSelected.add(option);
+        }
+        setSelected(newSelected);
+        onChange?.(Array.from(newSelected));
+    };
+    // Responsive classes
+    const headerClass = isMobile
+        ? "text-[26px] leading-[40px] px-[5px] py-[10px]"
+        : "text-[36px] leading-[54px] px-[10px] py-[20px]";
+    if (!isExpanded) {
+        // Collapsed state
+        return (_jsx("div", { className: `border-[0px_0px_5px] border-solid box-border relative w-full ${className}`, style: { borderColor }, children: _jsxs("button", { className: `content-stretch cursor-pointer flex font-bold items-center justify-between not-italic relative w-full text-[#3f4a4d] text-center text-nowrap ${headerClass}`, onClick: handleToggle, children: [_jsx("div", { className: "flex flex-col justify-center relative shrink-0", children: _jsx("p", { className: isMobile ? "leading-[40px]" : "leading-[54px]", children: title }) }), _jsx("div", { className: "flex flex-col justify-center relative shrink-0", children: _jsx("p", { className: isMobile ? "leading-[40px]" : "leading-[54px]", children: "+" }) })] }) }));
+    }
+    // Expanded state
+    return (_jsxs("div", { className: `border-[0px_0px_5px] border-solid box-border flex flex-col w-full ${className}`, style: { borderColor }, children: [_jsxs("button", { className: `content-stretch flex font-bold items-center justify-between not-italic text-[#3f4a4d] text-center text-nowrap w-full ${headerClass}`, onClick: handleToggle, children: [_jsx("div", { className: "flex flex-col justify-center relative shrink-0", children: _jsx("p", { className: isMobile ? "leading-[40px]" : "leading-[54px]", children: title }) }), _jsx("div", { className: "flex flex-col justify-center relative shrink-0", children: _jsx("p", { className: isMobile ? "leading-[40px]" : "leading-[54px]", children: "-" }) })] }), _jsx("div", { className: `box-border flex flex-col gap-[20px] items-start ${isMobile ? "px-[5px] py-[10px]" : "px-[10px] py-[20px]"}`, children: options.map((option) => (_jsxs("div", { className: "flex gap-[13px] items-center cursor-pointer", onClick: () => handleOptionToggle(option), children: [_jsx("div", { className: "border border-[#3f4a4d] border-solid shrink-0 size-[20px] flex items-center justify-center", children: selected.has(option) && (_jsx("div", { className: "bg-[#3f4a4d] size-[12px]" })) }), _jsx("div", { className: "flex flex-col justify-center text-[#3f4a4d] text-[16px] leading-[28px]", children: _jsx("p", { children: option }) })] }, option))) })] }));
+}

package/dist/components/MIKS/filters/FilterWhen.d.ts

@@ -0,0 +1,23 @@
+export type FilterWhenProps = {
+    /** Initial expanded state */
+    isExpanded?: boolean;
+    /** Mobile variant */
+    isMobile?: boolean;
+    /** Selected options */
+    selectedOptions?: string[];
+    /** Callback when options change */
+    onChange?: (options: string[]) => void;
+    /** Custom CSS classes */
+    className?: string;
+    /** Quick filter options */
+    quickOptions?: string[];
+    /** Filter title */
+    title?: string;
+    /** Border color */
+    borderColor?: string;
+    /** Month names (localization) */
+    monthNames?: string[];
+    /** Day names (localization) */
+    dayNames?: string[];
+};
+export default function FilterWhen({ isExpanded: initialExpanded, isMobile, selectedOptions, onChange, className, quickOptions, title, borderColor, monthNames, dayNames, }: FilterWhenProps): import("react/jsx-runtime").JSX.Element;