@mohasinac/appkit 2.3.1 → 2.3.2

package/dist/features/events/components/AdminEventEditorView.js

@@ -0,0 +1,203 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { useMutation, useQuery } from "@tanstack/react-query";
+import { Alert, Button, Form, FormActions, Input, Select, StackedViewShell, Text, Toggle, } from "../../../ui";
+import { apiClient } from "../../../http";
+import { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints";
+function toLocalDatetime(iso) {
+    if (!iso)
+        return "";
+    try {
+        const d = new Date(iso);
+        const offset = d.getTimezoneOffset();
+        const local = new Date(d.getTime() - offset * 60000);
+        return local.toISOString().slice(0, 16);
+    }
+    catch {
+        return "";
+    }
+}
+function toISOString(local) {
+    if (!local)
+        return "";
+    try {
+        return new Date(local).toISOString();
+    }
+    catch {
+        return "";
+    }
+}
+const EVENT_TYPE_OPTIONS = [
+    { label: "Sale", value: "sale" },
+    { label: "Offer / Coupon", value: "offer" },
+    { label: "Poll", value: "poll" },
+    { label: "Survey", value: "survey" },
+    { label: "Feedback", value: "feedback" },
+];
+const EVENT_STATUS_OPTIONS = [
+    { label: "Draft", value: "draft" },
+    { label: "Active", value: "active" },
+    { label: "Paused", value: "paused" },
+    { label: "Ended", value: "ended" },
+];
+const POLL_VISIBILITY_OPTIONS = [
+    { label: "Always visible", value: "always" },
+    { label: "After voting", value: "after_vote" },
+    { label: "After event ends", value: "after_end" },
+];
+export function AdminEventEditorView({ eventId, onSaved, ...rest }) {
+    const [type, setType] = React.useState("sale");
+    const [title, setTitle] = React.useState("");
+    const [description, setDescription] = React.useState("");
+    const [startsAt, setStartsAt] = React.useState("");
+    const [endsAt, setEndsAt] = React.useState("");
+    const [coverImageUrl, setCoverImageUrl] = React.useState("");
+    const [status, setStatus] = React.useState("draft");
+    const [discountPercent, setDiscountPercent] = React.useState("10");
+    const [saleBannerText, setSaleBannerText] = React.useState("");
+    const [couponId, setCouponId] = React.useState("");
+    const [displayCode, setDisplayCode] = React.useState("");
+    const [offerBannerText, setOfferBannerText] = React.useState("");
+    const [pollOptions, setPollOptions] = React.useState([
+        { id: "opt1", label: "" },
+        { id: "opt2", label: "" },
+    ]);
+    const [allowMultiSelect, setAllowMultiSelect] = React.useState(false);
+    const [allowComment, setAllowComment] = React.useState(false);
+    const [resultsVisibility, setResultsVisibility] = React.useState("always");
+    const [requireLogin, setRequireLogin] = React.useState(true);
+    const [maxEntriesPerUser, setMaxEntriesPerUser] = React.useState("1");
+    const [hasLeaderboard, setHasLeaderboard] = React.useState(false);
+    const [anonymous, setAnonymous] = React.useState(false);
+    const [saveMessage, setSaveMessage] = React.useState(null);
+    const eventQuery = useQuery({
+        queryKey: ["admin-event-by-id", eventId],
+        queryFn: () => apiClient.get(`${ADMIN_ENDPOINTS.EVENTS}/${eventId}`),
+        enabled: Boolean(eventId),
+        staleTime: 15000,
+    });
+    React.useEffect(() => {
+        const event = eventQuery.data?.data ?? eventQuery.data;
+        if (!event?.id)
+            return;
+        setType(event.type || "sale");
+        setTitle(event.title || "");
+        setDescription(event.description || "");
+        setStartsAt(toLocalDatetime(event.startsAt));
+        setEndsAt(toLocalDatetime(event.endsAt));
+        setCoverImageUrl(event.coverImageUrl || event.coverImage?.url || "");
+        setStatus(event.status || "draft");
+        if (event.saleConfig) {
+            setDiscountPercent(String(event.saleConfig.discountPercent ?? 10));
+            setSaleBannerText(event.saleConfig.bannerText || "");
+        }
+        if (event.offerConfig) {
+            setCouponId(event.offerConfig.couponId || "");
+            setDisplayCode(event.offerConfig.displayCode || "");
+            setOfferBannerText(event.offerConfig.bannerText || "");
+        }
+        if (event.pollConfig) {
+            if (event.pollConfig.options?.length)
+                setPollOptions(event.pollConfig.options);
+            setAllowMultiSelect(Boolean(event.pollConfig.allowMultiSelect));
+            setAllowComment(Boolean(event.pollConfig.allowComment));
+            setResultsVisibility(event.pollConfig.resultsVisibility || "always");
+        }
+        if (event.surveyConfig) {
+            setRequireLogin(event.surveyConfig.requireLogin !== false);
+            setMaxEntriesPerUser(String(event.surveyConfig.maxEntriesPerUser ?? 1));
+            setHasLeaderboard(Boolean(event.surveyConfig.hasLeaderboard));
+        }
+        if (event.feedbackConfig) {
+            setAnonymous(Boolean(event.feedbackConfig.anonymous));
+        }
+    }, [eventQuery.data]);
+    const saveMutation = useMutation({
+        mutationFn: async () => {
+            const buildTypeConfig = () => {
+                if (type === "sale")
+                    return {
+                        saleConfig: {
+                            discountPercent: Number(discountPercent) || 10,
+                            bannerText: saleBannerText || undefined,
+                        },
+                    };
+                if (type === "offer")
+                    return {
+                        offerConfig: { couponId, displayCode, bannerText: offerBannerText || undefined },
+                    };
+                if (type === "poll")
+                    return {
+                        pollConfig: {
+                            options: pollOptions.filter((o) => o.label.trim()),
+                            allowMultiSelect,
+                            allowComment,
+                            resultsVisibility,
+                        },
+                    };
+                if (type === "survey")
+                    return {
+                        surveyConfig: {
+                            requireLogin,
+                            maxEntriesPerUser: Number(maxEntriesPerUser) || 1,
+                            hasLeaderboard,
+                            hasPointSystem: false,
+                            entryReviewRequired: false,
+                            formFields: [],
+                        },
+                    };
+                if (type === "feedback")
+                    return {
+                        feedbackConfig: { anonymous, formFields: [] },
+                    };
+                return {};
+            };
+            const payload = {
+                type,
+                title,
+                description,
+                startsAt: toISOString(startsAt),
+                endsAt: toISOString(endsAt),
+                coverImageUrl: coverImageUrl || undefined,
+                ...buildTypeConfig(),
+            };
+            if (eventId) {
+                payload.status = status;
+                await apiClient.patch(`${ADMIN_ENDPOINTS.EVENTS}/${eventId}`, payload);
+                return eventId;
+            }
+            const created = await apiClient.post(ADMIN_ENDPOINTS.EVENTS, payload);
+            return created.data?.id ?? created.id ?? "";
+        },
+        onSuccess: (savedId) => {
+            setSaveMessage("Saved successfully.");
+            if (savedId)
+                onSaved?.(savedId);
+        },
+        onError: (error) => {
+            setSaveMessage(error instanceof Error ? error.message : "Save failed");
+        },
+    });
+    const addPollOption = () => {
+        setPollOptions((prev) => [...prev, { id: `opt${Date.now()}`, label: "" }]);
+    };
+    const removePollOption = (id) => {
+        setPollOptions((prev) => prev.filter((o) => o.id !== id));
+    };
+    const updatePollOption = (id, label) => {
+        setPollOptions((prev) => prev.map((o) => (o.id === id ? { ...o, label } : o)));
+    };
+    const isValid = !!title.trim() &&
+        !!startsAt &&
+        !!endsAt &&
+        (type !== "poll" || pollOptions.filter((o) => o.label.trim()).length >= 2) &&
+        (type !== "offer" || (!!couponId.trim() && !!displayCode.trim()));
+    return (_jsx(StackedViewShell, { portal: "admin", ...rest, title: eventId ? "Edit Event" : "Create Event", sections: [
+            eventQuery.error ? (_jsx(Alert, { variant: "error", title: "Could not load event", children: eventQuery.error instanceof Error ? eventQuery.error.message : "Unknown error" })) : null,
+            _jsxs(Form, { onSubmit: (e) => {
+                    e.preventDefault();
+                    saveMutation.mutate();
+                }, className: "space-y-6", children: [!eventId && (_jsx(Select, { label: "Event type", value: type, options: EVENT_TYPE_OPTIONS, onChange: (e) => setType(e.target.value) })), _jsx(Input, { label: "Title", value: title, onChange: (e) => setTitle(e.target.value), placeholder: "Charizard Flash Sale 2026", required: true }), _jsxs("div", { children: [_jsx("label", { className: "block text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-1", children: "Description" }), _jsx("textarea", { value: description, onChange: (e) => setDescription(e.target.value), rows: 3, className: "w-full rounded-lg border border-zinc-300 dark:border-slate-600 bg-white dark:bg-slate-900 px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-primary/30", placeholder: "Describe this event\u2026" })] }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-3", children: [_jsx(Input, { label: "Starts at", type: "datetime-local", value: startsAt, onChange: (e) => setStartsAt(e.target.value), required: true }), _jsx(Input, { label: "Ends at", type: "datetime-local", value: endsAt, onChange: (e) => setEndsAt(e.target.value), required: true })] }), _jsx(Input, { label: "Cover image URL (optional)", value: coverImageUrl, onChange: (e) => setCoverImageUrl(e.target.value), placeholder: "https://\u2026" }), eventId && (_jsx(Select, { label: "Status", value: status, options: EVENT_STATUS_OPTIONS, onChange: (e) => setStatus(e.target.value) })), type === "sale" && (_jsxs("div", { className: "rounded-xl border border-zinc-200 dark:border-slate-700 p-4 space-y-3", children: [_jsx(Text, { className: "text-sm font-semibold text-zinc-700 dark:text-zinc-300", children: "Sale configuration" }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-3", children: [_jsx(Input, { label: "Discount %", type: "number", value: discountPercent, onChange: (e) => setDiscountPercent(e.target.value), placeholder: "10" }), _jsx(Input, { label: "Banner text (optional)", value: saleBannerText, onChange: (e) => setSaleBannerText(e.target.value), placeholder: "Limited time \u2014 ends Sunday!" })] })] })), type === "offer" && (_jsxs("div", { className: "rounded-xl border border-zinc-200 dark:border-slate-700 p-4 space-y-3", children: [_jsx(Text, { className: "text-sm font-semibold text-zinc-700 dark:text-zinc-300", children: "Offer configuration" }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-3", children: [_jsx(Input, { label: "Coupon ID", value: couponId, onChange: (e) => setCouponId(e.target.value), placeholder: "Firestore coupon document ID", required: true }), _jsx(Input, { label: "Display code", value: displayCode, onChange: (e) => setDisplayCode(e.target.value), placeholder: "CHARIZARD25", required: true })] }), _jsx(Input, { label: "Banner text (optional)", value: offerBannerText, onChange: (e) => setOfferBannerText(e.target.value), placeholder: "Use CHARIZARD25 at checkout" })] })), type === "poll" && (_jsxs("div", { className: "rounded-xl border border-zinc-200 dark:border-slate-700 p-4 space-y-4", children: [_jsx(Text, { className: "text-sm font-semibold text-zinc-700 dark:text-zinc-300", children: "Poll configuration" }), _jsxs("div", { className: "space-y-2", children: [_jsx(Text, { className: "text-xs text-zinc-500 dark:text-zinc-400", children: "Options (minimum 2)" }), pollOptions.map((opt, idx) => (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex-1", children: _jsx(Input, { value: opt.label, onChange: (e) => updatePollOption(opt.id, e.target.value), placeholder: `Option ${idx + 1}` }) }), pollOptions.length > 2 && (_jsx("button", { type: "button", onClick: () => removePollOption(opt.id), className: "text-zinc-400 hover:text-red-500 transition-colors px-2 py-1 text-lg leading-none", "aria-label": "Remove option", children: "\u00D7" }))] }, opt.id))), _jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: addPollOption, children: "+ Add option" })] }), _jsx(Select, { label: "Results visibility", value: resultsVisibility, options: POLL_VISIBILITY_OPTIONS, onChange: (e) => setResultsVisibility(e.target.value) }), _jsxs("div", { className: "space-y-3", children: [_jsx(Toggle, { checked: allowMultiSelect, onChange: setAllowMultiSelect, label: "Allow multi-select" }), _jsx(Toggle, { checked: allowComment, onChange: setAllowComment, label: "Allow comment with vote" })] })] })), type === "survey" && (_jsxs("div", { className: "rounded-xl border border-zinc-200 dark:border-slate-700 p-4 space-y-3", children: [_jsx(Text, { className: "text-sm font-semibold text-zinc-700 dark:text-zinc-300", children: "Survey configuration" }), _jsx(Input, { label: "Max entries per user", type: "number", value: maxEntriesPerUser, onChange: (e) => setMaxEntriesPerUser(e.target.value), placeholder: "1" }), _jsx(Toggle, { checked: requireLogin, onChange: setRequireLogin, label: "Require login to participate" }), _jsx(Toggle, { checked: hasLeaderboard, onChange: setHasLeaderboard, label: "Show leaderboard" }), _jsx(Text, { className: "text-xs text-zinc-500 dark:text-zinc-400", children: "Form fields can be configured from the event detail page after saving." })] })), type === "feedback" && (_jsxs("div", { className: "rounded-xl border border-zinc-200 dark:border-slate-700 p-4 space-y-3", children: [_jsx(Text, { className: "text-sm font-semibold text-zinc-700 dark:text-zinc-300", children: "Feedback configuration" }), _jsx(Toggle, { checked: anonymous, onChange: setAnonymous, label: "Allow anonymous submissions" }), _jsx(Text, { className: "text-xs text-zinc-500 dark:text-zinc-400", children: "Form fields can be configured from the event detail page after saving." })] })), _jsxs(FormActions, { align: "right", children: [_jsx(Button, { type: "button", variant: "outline", onClick: () => { window.location.href = "/admin/events"; }, children: "Cancel" }), _jsx(Button, { type: "submit", disabled: saveMutation.isPending || !isValid, children: saveMutation.isPending ? "Saving…" : eventId ? "Save changes" : "Create event" })] }), saveMessage && (_jsx(Alert, { variant: saveMessage.toLowerCase().includes("fail") ? "error" : "success", title: "Save status", children: saveMessage }))] }),
+        ] }));
+}

package/dist/features/events/components/AdminEventsView.js

@@ -7,9 +7,22 @@ import { toRecordArray, toRelativeDate, toStringValue, useAdminListingData, } fr
 import { AdminListingScaffold } from "../../admin/components/AdminListingScaffold";
 export function AdminEventsView({ children, ...props }) {
     const hasChildren = React.Children.count(children) > 0;
+    const [q, setQ] = React.useState("");
+    const [statusFilter, setStatusFilter] = React.useState("");
+    const [typeFilter, setTypeFilter] = React.useState("");
+    const filterParts = [];
+    if (statusFilter && statusFilter !== "All") {
+        filterParts.push(`status==${statusFilter}`);
+    }
+    if (typeFilter && typeFilter !== "All") {
+        filterParts.push(`type==${typeFilter}`);
+    }
+    const filters = filterParts.join(",") || undefined;
     const { rows, total, isLoading, errorMessage } = useAdminListingData({
-        queryKey: ["admin", "events", "listing"],
+        queryKey: ["admin", "events", "listing", q, filters ?? ""],
         endpoint: ADMIN_ENDPOINTS.EVENTS,
+        filters,
+        q: q || undefined,
         mapRows: (response) => toRecordArray(response.items).map((item, index) => ({
             id: toStringValue(item.id, `event-${index}`),
             primary: toStringValue(item.title, "Untitled event"),
@@ -31,5 +44,18 @@ export function AdminEventsView({ children, ...props }) {
     if (hasChildren) {
         return _jsx(ListingViewShell, { portal: "admin", ...props, children: children });
     }
-    return (_jsx(AdminListingScaffold, { portal: "admin", ...props, title: "Events", subtitle: "Manage sales events, offers, polls, surveys, and feedback campaigns.", actionLabel: "New event", searchPlaceholder: "Search events by title or type", rows: rows, isLoading: isLoading, errorMessage: errorMessage, emptyLabel: "No events found", resultSummary: `Showing ${rows.length} of ${total} events` }));
+    return (_jsx(AdminListingScaffold, { portal: "admin", ...props, title: "Events", subtitle: "Manage sales events, offers, polls, surveys, and feedback campaigns.", actionLabel: "New event", actionHref: "/admin/events/new", getRowHref: (row) => `/admin/events/${row.id}/edit`, searchPlaceholder: "Search events by title or type", rows: rows, isLoading: isLoading, errorMessage: errorMessage, emptyLabel: "No events found", resultSummary: `Showing ${rows.length} of ${total} events`, onSearch: setQ, searchValue: q, filterGroups: [
+            {
+                title: "Status",
+                options: ["All", "published", "draft", "active", "ended"],
+                active: statusFilter || "All",
+                onSelect: (opt) => setStatusFilter(opt === "All" ? "" : opt),
+            },
+            {
+                title: "Type",
+                options: ["All", "contest", "giveaway", "sale", "poll", "survey", "flash-sale"],
+                active: typeFilter || "All",
+                onSelect: (opt) => setTypeFilter(opt === "All" ? "" : opt),
+            },
+        ] }));
 }

package/dist/features/events/components/EventCard.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Link from "next/link";
 import { Article, Button, Div, Heading, RichText, Span, TextLink } from "../../../ui";
 import { THEME_CONSTANTS, LAYOUT } from "../../../tokens";
 import { normalizeRichTextHtml } from "../../../utils/string.formatter";
@@ -18,6 +19,7 @@ export function EventCard({ event, labels = {}, onParticipate, className = "", }
     const endsAt = new Date(event.endsAt);
     const msLeft = endsAt.getTime() - now.getTime();
     const daysLeft = Math.max(0, Math.ceil(msLeft / (1000 * 60 * 60 * 24)));
-    return (_jsxs(Article, { className: `flex h-full ${LAYOUT.cardHeight.event} flex-col overflow-hidden rounded-xl border border-zinc-200 bg-white shadow-sm transition-shadow hover:shadow-md dark:border-slate-700 dark:bg-slate-900 ${className}`, children: [event.coverImageUrl ? (_jsx(Div, { className: "aspect-video overflow-hidden", children: _jsx(Div, { role: "img", "aria-label": safeTitle, className: "h-full w-full bg-cover bg-center", style: { backgroundImage: `url(${event.coverImageUrl})` } }) })) : (_jsx(Div, { className: "aspect-video bg-gradient-to-br from-zinc-100 to-zinc-200 dark:from-slate-800 dark:to-slate-700" })), _jsxs(Div, { className: "flex flex-1 flex-col p-4", children: [_jsxs(Div, { className: "flex items-start justify-between gap-2 mb-2", children: [_jsx(Span, { className: "text-lg", "aria-hidden": "true", children: TYPE_ICONS[event.type] }), _jsx(EventStatusBadge, { status: event.status })] }), _jsx(Heading, { level: 3, className: "font-semibold text-gray-900 dark:text-zinc-100 text-base leading-snug mb-1", children: safeTitle }), _jsx(RichText, { html: normalizeRichTextHtml(event.description ?? ""), proseClass: "prose prose-sm max-w-none dark:prose-invert prose-p:my-0", className: `mb-3 ${THEME_CONSTANTS.utilities.textClamp3} text-sm text-zinc-600 dark:text-zinc-400` }), _jsxs(Div, { className: "mb-3 mt-auto flex items-center justify-between text-xs text-zinc-500 dark:text-zinc-500", children: [event.status === EVENT_FIELDS.STATUS_VALUES.ACTIVE &&
-                                daysLeft > 0 && _jsxs(Span, { children: [daysLeft, "d remaining"] }), _jsxs(Span, { children: [event.stats.totalEntries, " ", labels.entries ?? "entries"] })] }), event.status === EVENT_FIELDS.STATUS_VALUES.ACTIVE && onParticipate ? (_jsx(Button, { type: "button", onClick: () => onParticipate(event), className: "w-full rounded-lg bg-primary py-2 text-sm font-medium text-white transition-colors hover:bg-primary-600", children: labels.participate ?? "Participate" })) : (_jsx(TextLink, { href: ROUTES.PUBLIC.EVENT_DETAIL(event.id), className: "inline-flex w-full items-center justify-center rounded-lg border border-zinc-300 px-3 py-2 text-sm font-medium text-zinc-700 transition-colors hover:bg-zinc-100 dark:border-slate-600 dark:text-zinc-200 dark:hover:bg-slate-800", children: labels.viewDetails ?? "View details" }))] })] }));
+    const detailHref = String(ROUTES.PUBLIC.EVENT_DETAIL(event.id));
+    return (_jsxs(Article, { className: `group flex h-full ${LAYOUT.cardHeight.event} flex-col overflow-hidden rounded-xl border border-zinc-200 bg-white shadow-sm transition-shadow hover:shadow-md dark:border-slate-700 dark:bg-slate-900 ${className}`, children: [_jsx(Link, { href: detailHref, className: "block flex-shrink-0", children: event.coverImageUrl ? (_jsx(Div, { className: "aspect-video overflow-hidden", children: _jsx(Div, { role: "img", "aria-label": safeTitle, className: "h-full w-full bg-cover bg-center transition-transform duration-300 group-hover:scale-105", style: { backgroundImage: `url(${event.coverImageUrl})` } }) })) : (_jsx(Div, { className: "aspect-video bg-gradient-to-br from-zinc-100 to-zinc-200 dark:from-slate-800 dark:to-slate-700 flex items-center justify-center", children: _jsx("span", { className: "text-5xl opacity-40", "aria-hidden": "true", children: TYPE_ICONS[event.type] }) })) }), _jsxs(Div, { className: "flex flex-1 flex-col p-4", children: [_jsxs(Div, { className: "flex items-start justify-between gap-2 mb-2", children: [_jsx(Span, { className: "text-lg", "aria-hidden": "true", children: TYPE_ICONS[event.type] }), _jsx(EventStatusBadge, { status: event.status })] }), _jsx(Link, { href: detailHref, className: "block", children: _jsx(Heading, { level: 3, className: "font-semibold text-gray-900 dark:text-zinc-100 text-base leading-snug mb-1 group-hover:text-primary transition-colors", children: safeTitle }) }), _jsx(RichText, { html: normalizeRichTextHtml(event.description ?? ""), proseClass: "prose prose-sm max-w-none dark:prose-invert prose-p:my-0", className: `mb-3 ${THEME_CONSTANTS.utilities.textClamp3} text-sm text-zinc-600 dark:text-zinc-400` }), _jsxs(Div, { className: "mb-3 mt-auto flex items-center justify-between text-xs text-zinc-500 dark:text-zinc-500", children: [event.status === EVENT_FIELDS.STATUS_VALUES.ACTIVE &&
+                                daysLeft > 0 && _jsxs(Span, { children: ["\u23F1 ", daysLeft, "d remaining"] }), _jsxs(Span, { children: ["\uD83D\uDC65 ", event.stats.totalEntries, " ", labels.entries ?? "entries"] })] }), event.status === EVENT_FIELDS.STATUS_VALUES.ACTIVE && onParticipate ? (_jsx(Button, { type: "button", onClick: () => onParticipate(event), className: "w-full rounded-lg bg-primary py-2 text-sm font-medium text-white transition-colors hover:bg-primary-600", children: labels.participate ?? "Participate" })) : (_jsxs(TextLink, { href: detailHref, className: "inline-flex w-full items-center justify-center gap-1.5 rounded-lg border border-zinc-300 px-3 py-2 text-sm font-medium text-zinc-700 transition-colors hover:bg-zinc-100 dark:border-slate-600 dark:text-zinc-200 dark:hover:bg-slate-800", children: [labels.viewDetails ?? "View details", " \u2192"] }))] })] }));
 }

package/dist/features/events/components/EventFilters.js

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useTranslations } from "next-intl";
 import { FilterFacetSection } from "../../filters/FilterFacetSection";
 import { RangeFilter } from "../../filters/RangeFilter";
+import { SwitchFilter } from "../../filters/SwitchFilter";
 import { Div } from "../../../ui";
 export const EVENT_FILTER_KEYS = {
     admin: ["type", "status", "dateFrom", "dateTo"],
@@ -68,5 +69,5 @@ export function EventFilters({ table, variant = "admin" }) {
     const selectedStatus = table.get("status")
         ? table.get("status").split("|").filter(Boolean)
         : [];
-    return (_jsxs(Div, { children: [_jsx(FilterFacetSection, { title: t("type"), options: typeOptions, selected: selectedType, onChange: (vals) => table.set("type", vals.join("|")), searchable: false, defaultCollapsed: false }), _jsx(FilterFacetSection, { title: t("status"), options: statusOptions, selected: selectedStatus, onChange: (vals) => table.set("status", vals.join("|")), searchable: false, defaultCollapsed: false }), _jsx(RangeFilter, { title: t("dateRange"), type: "date", minValue: table.get("dateFrom"), maxValue: table.get("dateTo"), onMinChange: (v) => table.set("dateFrom", v), onMaxChange: (v) => table.set("dateTo", v), minPlaceholder: t("minDate"), maxPlaceholder: t("maxDate"), defaultCollapsed: true })] }));
+    return (_jsxs(Div, { children: [_jsx(FilterFacetSection, { title: t("type"), options: typeOptions, selected: selectedType, onChange: (vals) => table.set("type", vals.join("|")), searchable: false, defaultCollapsed: false }), _jsx(FilterFacetSection, { title: t("status"), options: statusOptions, selected: selectedStatus, onChange: (vals) => table.set("status", vals.join("|")), searchable: false, defaultCollapsed: false }), _jsx(RangeFilter, { title: t("dateRange"), type: "date", minValue: table.get("dateFrom"), maxValue: table.get("dateTo"), onMinChange: (v) => table.set("dateFrom", v), onMaxChange: (v) => table.set("dateTo", v), minPlaceholder: t("minDate"), maxPlaceholder: t("maxDate"), defaultCollapsed: true }), _jsx(SwitchFilter, { title: t("expired"), label: t("showExpiredOnly"), checked: table.get("showExpired") === "true", onChange: (v) => table.set("showExpired", v ? "true" : ""), defaultCollapsed: true })] }));
 }

package/dist/features/events/components/EventsIndexListing.js

@@ -1,24 +1,54 @@
 "use client";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useCallback } from "react";
+import { Search, SlidersHorizontal, X } from "lucide-react";
 import { useUrlTable } from "../../../react/hooks/useUrlTable";
 import { useEvents } from "../hooks/useEvents";
-import { Div, Input, Pagination, SlottedListingView, SortDropdown, Stack, Text, } from "../../../ui";
+import { Pagination, SortDropdown } from "../../../ui";
 import { EventCard } from "./EventCard";
-import { EventFilters, EVENT_PUBLIC_SORT_OPTIONS, } from "./EventFilters";
+import { EventFilters, EVENT_PUBLIC_SORT_OPTIONS } from "./EventFilters";
 const PAGE_SIZE = 24;
 export function EventsIndexListing({ initialData }) {
     const table = useUrlTable({ defaults: { pageSize: String(PAGE_SIZE), sort: "startsAt" } });
+    const [searchInput, setSearchInput] = useState(table.get("q") || "");
+    const [filterOpen, setFilterOpen] = useState(false);
+    // Build client-side filter string from URL params
+    const typeRaw = table.get("type");
+    const statusRaw = table.get("status");
+    const dateFrom = table.get("dateFrom");
+    const dateTo = table.get("dateTo");
+    const filterParts = [];
+    if (typeRaw) {
+        const types = typeRaw.split("|").filter(Boolean);
+        if (types.length === 1)
+            filterParts.push(`type==${types[0]}`);
+        else if (types.length > 1)
+            filterParts.push(`type==${types.join("|")}`);
+    }
+    if (statusRaw) {
+        const statuses = statusRaw.split("|").filter(Boolean);
+        if (statuses.length === 1)
+            filterParts.push(`status==${statuses[0]}`);
+        else if (statuses.length > 1)
+            filterParts.push(`status==${statuses.join("|")}`);
+    }
+    if (dateFrom)
+        filterParts.push(`startsAt>=${dateFrom}`);
+    if (dateTo)
+        filterParts.push(`endsAt<=${dateTo}`);
     const params = {
+        q: table.get("q") || undefined,
         page: table.getNumber("page", 1),
         pageSize: table.getNumber("pageSize", PAGE_SIZE),
         sort: table.get("sort") || "startsAt",
-        type: table.get("type") || undefined,
-        status: table.get("status") || "published",
-        filters: table.get("filters") || undefined,
+        filters: filterParts.length > 0 ? filterParts.join(",") : undefined,
     };
-    const { events, total, totalPages, isLoading } = useEvents(params, {
-        initialData,
-    });
+    const { events, total, totalPages, isLoading } = useEvents(params, { initialData });
     const currentPage = table.getNumber("page", 1);
-    return (_jsx(Div, { className: "min-h-screen", children: _jsx(SlottedListingView, { portal: "public", manageSearch: true, manageSort: true, inlineToolbar: true, renderSearch: (search, setSearch) => (_jsx(Input, { value: search, onChange: (e) => setSearch(e.target.value), placeholder: "Search events...", className: "max-w-sm" })), renderSort: (value, onChange) => (_jsx(SortDropdown, { value: value, onChange: onChange, options: EVENT_PUBLIC_SORT_OPTIONS })), renderFilters: () => (_jsx(EventFilters, { table: table, variant: "public" })), renderTable: () => events.length === 0 && !isLoading ? (_jsx(Stack, { align: "center", gap: "3", className: "justify-center py-24 text-center", children: _jsx(Text, { className: "text-xl font-medium text-zinc-900 dark:text-zinc-50", children: "No events found" }) })) : (_jsx(Div, { className: "grid gap-6 sm:grid-cols-2 lg:grid-cols-3", children: events.map((event) => (_jsx(EventCard, { event: event }, event.id))) })), renderPagination: () => totalPages > 1 ? (_jsx(Pagination, { currentPage: currentPage, totalPages: totalPages, onPageChange: (p) => table.setPage(p) })) : null, total: total, isLoading: isLoading }) }));
+    const commitSearch = useCallback(() => {
+        table.set("q", searchInput.trim());
+        table.setPage(1);
+    }, [searchInput, table]);
+    const closeFilters = () => setFilterOpen(false);
+    return (_jsxs("div", { className: "min-h-screen", children: [_jsx("div", { className: "sticky top-0 z-20 border-b border-zinc-200 dark:border-slate-700 bg-white/95 dark:bg-slate-900/95 backdrop-blur-sm py-2.5 px-4", children: _jsxs("div", { className: "flex items-center gap-2.5 max-w-full", children: [_jsxs("button", { type: "button", onClick: () => setFilterOpen(true), className: "flex shrink-0 items-center gap-2 rounded-lg border border-zinc-300 dark:border-slate-600 px-3.5 py-2 text-sm font-medium text-zinc-700 dark:text-zinc-200 hover:bg-zinc-50 dark:hover:bg-slate-800 transition-colors", children: [_jsx(SlidersHorizontal, { className: "h-4 w-4" }), _jsx("span", { className: "hidden sm:inline", children: "Filters" })] }), _jsxs("div", { className: "flex flex-1 items-center overflow-hidden rounded-lg border border-zinc-300 dark:border-slate-600 bg-white dark:bg-slate-900", children: [_jsx("input", { type: "text", value: searchInput, onChange: (e) => setSearchInput(e.target.value), onKeyDown: (e) => e.key === "Enter" && commitSearch(), placeholder: "Search events...", className: "min-w-0 flex-1 bg-transparent px-3 py-2 text-sm text-zinc-900 dark:text-zinc-100 placeholder-zinc-400 outline-none" }), searchInput && (_jsx("button", { type: "button", onClick: () => { setSearchInput(""); table.set("q", ""); }, className: "px-2 text-zinc-400 hover:text-zinc-600 transition-colors", "aria-label": "Clear search", children: _jsx(X, { className: "h-3.5 w-3.5" }) })), _jsx("button", { type: "button", onClick: commitSearch, className: "flex shrink-0 items-center justify-center px-3 py-2 text-zinc-400 hover:text-primary dark:hover:text-primary-400 transition-colors", "aria-label": "Search", children: _jsx(Search, { className: "h-4 w-4" }) })] }), _jsxs("div", { className: "flex shrink-0 items-center gap-1.5 text-sm text-zinc-500 dark:text-zinc-400", children: [_jsx("span", { className: "hidden md:inline whitespace-nowrap", children: "Sort by" }), _jsx(SortDropdown, { value: table.get("sort") || "startsAt", onChange: (v) => { table.set("sort", v); table.setPage(1); }, options: EVENT_PUBLIC_SORT_OPTIONS })] })] }) }), _jsxs("div", { className: "py-6", children: [isLoading ? (_jsx("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6", children: Array.from({ length: 6 }).map((_, i) => (_jsxs("div", { className: "rounded-xl border border-zinc-100 dark:border-slate-700 overflow-hidden animate-pulse", children: [_jsx("div", { className: "aspect-video bg-zinc-200 dark:bg-slate-700" }), _jsxs("div", { className: "p-4 space-y-2", children: [_jsx("div", { className: "h-4 bg-zinc-200 dark:bg-slate-700 rounded w-3/4" }), _jsx("div", { className: "h-3 bg-zinc-200 dark:bg-slate-700 rounded w-full" }), _jsx("div", { className: "h-3 bg-zinc-200 dark:bg-slate-700 rounded w-2/3" }), _jsx("div", { className: "h-8 bg-zinc-200 dark:bg-slate-700 rounded mt-2" })] })] }, i))) })) : events.length === 0 ? (_jsx("p", { className: "py-12 text-center text-sm text-zinc-500 dark:text-zinc-400", children: "No events found." })) : (_jsx("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6", children: events.map((event) => (_jsx(EventCard, { event: event }, event.id))) })), totalPages > 1 && (_jsx("div", { className: "mt-8 flex justify-center", children: _jsx(Pagination, { currentPage: currentPage, totalPages: totalPages, onPageChange: (p) => table.setPage(p) }) }))] }), filterOpen && (_jsxs(_Fragment, { children: [_jsx("div", { className: "fixed inset-0 z-40 bg-black/40", "aria-hidden": "true", onClick: closeFilters }), _jsxs("div", { className: "fixed inset-y-0 left-0 z-50 flex w-80 flex-col bg-white dark:bg-slate-900 shadow-2xl", children: [_jsxs("div", { className: "flex items-center justify-between border-b border-zinc-200 dark:border-slate-700 px-4 py-3.5", children: [_jsxs("span", { className: "flex items-center gap-2 text-base font-semibold text-zinc-900 dark:text-zinc-100", children: [_jsx(SlidersHorizontal, { className: "h-4 w-4" }), "Filters"] }), _jsx("button", { type: "button", onClick: closeFilters, "aria-label": "Close filters", className: "rounded-lg p-1.5 text-zinc-500 hover:bg-zinc-100 dark:hover:bg-slate-800 transition-colors", children: _jsx(X, { className: "h-5 w-5" }) })] }), _jsx("div", { className: "flex-1 overflow-y-auto px-4 py-4", children: _jsx(EventFilters, { table: table, variant: "public" }) }), _jsx("div", { className: "border-t border-zinc-200 dark:border-slate-700 px-4 py-3.5", children: _jsx("button", { type: "button", onClick: closeFilters, className: "w-full rounded-lg bg-primary py-2.5 text-sm font-semibold text-white hover:bg-primary-600 transition-colors", children: "Apply filters" }) })] })] }))] }));
 }

package/dist/features/events/components/EventsListPageView.d.ts

@@ -1 +1,6 @@
-export declare function EventsListPageView(): Promise<import("react/jsx-runtime").JSX.Element>;
+type SearchParams = Record<string, string | string[]>;
+export interface EventsListPageViewProps {
+    searchParams?: SearchParams;
+}
+export declare function EventsListPageView({ searchParams }: EventsListPageViewProps): Promise<import("react/jsx-runtime").JSX.Element>;
+export {};

package/dist/features/events/components/EventsListPageView.js

@@ -3,14 +3,47 @@ import { eventRepository } from "../../../repositories";
 import { AdSlot } from "../../homepage/components/AdSlot";
 import { Container, Heading, Main, Section } from "../../../ui";
 import { EventsIndexListing } from "./EventsIndexListing";
-export async function EventsListPageView() {
+function sp(params, key) {
+    const v = params[key];
+    return Array.isArray(v) ? v[0] ?? "" : v ?? "";
+}
+function buildEventFilters(params) {
+    // Public page defaults to published status; allow overriding to active/ended
+    const statusRaw = sp(params, "status");
+    const parts = [];
+    if (statusRaw) {
+        const values = statusRaw.split("|").filter(Boolean);
+        if (values.length === 1)
+            parts.push(`status==${values[0]}`);
+        else if (values.length > 1)
+            parts.push(`status==${values.join("|")}`);
+    }
+    else {
+        parts.push("status==published");
+    }
+    const type = sp(params, "type");
+    if (type) {
+        const values = type.split("|").filter(Boolean);
+        if (values.length === 1)
+            parts.push(`type==${values[0]}`);
+        else if (values.length > 1)
+            parts.push(`type==${values.join("|")}`);
+    }
+    const dateFrom = sp(params, "dateFrom");
+    const dateTo = sp(params, "dateTo");
+    if (dateFrom)
+        parts.push(`startsAt>=${dateFrom}`);
+    if (dateTo)
+        parts.push(`endsAt<=${dateTo}`);
+    return parts.join(",");
+}
+export async function EventsListPageView({ searchParams = {} }) {
+    const sort = sp(searchParams, "sort") || "startsAt";
+    const page = Number(sp(searchParams, "page")) || 1;
+    const pageSize = Number(sp(searchParams, "pageSize")) || 24;
+    const filters = buildEventFilters(searchParams);
     const result = await eventRepository
-        .list({
-        filters: "status==published",
-        sorts: "startsAt",
-        page: 1,
-        pageSize: 24,
-    })
+        .list({ filters, sorts: sort, page, pageSize })
         .catch(() => null);
     return (_jsx(Main, { children: _jsx(Section, { className: "py-10", children: _jsxs(Container, { size: "xl", children: [_jsx(Heading, { level: 1, className: "mb-8 text-3xl font-semibold text-zinc-900 dark:text-zinc-50", children: "Events" }), _jsx(AdSlot, { id: "listing-sidebar-top", className: "mb-6" }), _jsx(EventsIndexListing, { initialData: result }), _jsx(AdSlot, { id: "listing-sidebar-bottom", className: "mt-8" })] }) }) }));
 }

package/dist/features/events/components/index.d.ts

@@ -13,6 +13,8 @@ export { EventLeaderboard } from "./EventLeaderboard";
 export type { EventLeaderboardProps } from "./EventLeaderboard";
 export { AdminEventsView } from "./AdminEventsView";
 export type { AdminEventsViewProps } from "./AdminEventsView";
+export { AdminEventEditorView } from "./AdminEventEditorView";
+export type { AdminEventEditorViewProps } from "./AdminEventEditorView";
 export { AdminEventEntriesView } from "./AdminEventEntriesView";
 export type { AdminEventEntriesViewProps } from "./AdminEventEntriesView";
 export { EventFormDrawer } from "./EventFormDrawer";

package/dist/features/events/components/index.js

@@ -7,6 +7,7 @@ export { EventDetailView } from "./EventDetailView";
 export { EventParticipateView } from "./EventParticipateView";
 export { EventLeaderboard } from "./EventLeaderboard";
 export { AdminEventsView } from "./AdminEventsView";
+export { AdminEventEditorView } from "./AdminEventEditorView";
 export { AdminEventEntriesView } from "./AdminEventEntriesView";
 export { EventFormDrawer } from "./EventFormDrawer";
 export { EventBanner } from "./EventBanner";

package/dist/features/events/hooks/useEvents.js

@@ -3,6 +3,8 @@ import { apiClient } from "../../../http";
 import { EVENT_ENDPOINTS } from "../../../constants/api-endpoints";
 export function useEvents(params = {}, opts) {
     const sp = new URLSearchParams();
+    if (params.q)
+        sp.set("q", params.q);
     if (params.status)
         sp.set("status", params.status);
     if (params.type)

package/dist/features/events/types/index.d.ts

@@ -124,6 +124,7 @@ export interface CreateEventEntryInput {
     formResponses?: Record<string, unknown>;
 }
 export interface EventListParams {
+    q?: string;
     status?: EventStatus;
     type?: EventType;
     page?: number;

package/dist/features/homepage/components/BlogArticlesSection.js

@@ -8,5 +8,5 @@ import { ROUTES } from "../../../next";
 export function BlogArticlesSection({ title = "From Our Blog", description, viewMoreHref, viewMoreLabel = "View all posts →", className = "", }) {
     const { data, isLoading } = useBlogArticles();
     const items = data?.posts ?? [];
-    return (_jsx(SectionCarousel, { title: title, description: description, viewMoreHref: viewMoreHref, viewMoreLabel: viewMoreLabel, items: items, isLoading: isLoading, skeletonCount: 4, perView: THEME_CONSTANTS.carousel.perView.cards, gap: 16, keyExtractor: (post) => post.id, renderItem: (post) => (_jsx(BlogFeaturedCard, { post: post, href: ROUTES.BLOG.ARTICLE(post.slug) })), className: className }));
+    return (_jsx(SectionCarousel, { title: title, description: description, pillLabel: "From Our Blog", headingVariant: "editorial", viewMoreHref: viewMoreHref, viewMoreLabel: viewMoreLabel, items: items, isLoading: isLoading, skeletonCount: 4, perView: THEME_CONSTANTS.carousel.perView.standard, gap: 16, keyExtractor: (post) => post.id, renderItem: (post) => (_jsx(BlogFeaturedCard, { post: post, href: ROUTES.BLOG.ARTICLE(post.slug) })), className: className }));
 }

package/dist/features/homepage/components/EventsSection.js

@@ -6,5 +6,5 @@ import { useHomepageEvents } from "../hooks/useHomepageEvents";
 import { EventCard } from "../../events/components/EventCard";
 export function EventsSection({ title = "Events & Offers", description, viewMoreHref, viewMoreLabel = "View all events →", limit = 6, className = "", }) {
     const { data: items = [], isLoading } = useHomepageEvents(limit);
-    return (_jsx(SectionCarousel, { title: title, description: description, viewMoreHref: viewMoreHref, viewMoreLabel: viewMoreLabel, items: items, isLoading: isLoading, skeletonCount: 3, perView: THEME_CONSTANTS.carousel.perView.events, gap: 16, keyExtractor: (event) => event.id, renderItem: (event) => (_jsx(EventCard, { event: event })), className: className }));
+    return (_jsx(SectionCarousel, { title: title, description: description, pillLabel: "Events & Offers", headingVariant: "editorial", viewMoreHref: viewMoreHref, viewMoreLabel: viewMoreLabel, items: items, isLoading: isLoading, skeletonCount: 3, perView: THEME_CONSTANTS.carousel.perView.events, gap: 16, keyExtractor: (event) => event.id, renderItem: (event) => (_jsx(EventCard, { event: event })), className: className }));
 }

package/dist/features/homepage/components/FeaturedAuctionsSection.js

@@ -6,5 +6,5 @@ import { useFeaturedAuctions } from "../hooks/useFeaturedAuctions";
 import { MarketplaceAuctionCard } from "../../auctions/components/MarketplaceAuctionCard";
 export function FeaturedAuctionsSection({ title = "Live Auctions", description, viewMoreHref, viewMoreLabel = "View all auctions →", className = "", }) {
     const { data: items = [], isLoading } = useFeaturedAuctions();
-    return (_jsx(SectionCarousel, { title: title, description: description, viewMoreHref: viewMoreHref, viewMoreLabel: viewMoreLabel, items: items, isLoading: isLoading, skeletonCount: 4, perView: THEME_CONSTANTS.carousel.perView.compact, gap: 16, keyExtractor: (product) => product.id, renderItem: (product) => (_jsx(MarketplaceAuctionCard, { product: product })), className: className }));
+    return (_jsx(SectionCarousel, { title: title, description: description, pillLabel: "Live Auctions", headingVariant: "editorial", viewMoreHref: viewMoreHref, viewMoreLabel: viewMoreLabel, items: items, isLoading: isLoading, skeletonCount: 4, perView: THEME_CONSTANTS.carousel.perView.standard, gap: 16, keyExtractor: (product) => product.id, renderItem: (product) => (_jsx(MarketplaceAuctionCard, { product: product })), className: className }));
 }

package/dist/features/homepage/components/FeaturedPreOrdersSection.js

@@ -6,5 +6,5 @@ import { useFeaturedPreOrders } from "../hooks/useFeaturedPreOrders";
 import { MarketplacePreorderCard } from "../../pre-orders/components/MarketplacePreorderCard";
 export function FeaturedPreOrdersSection({ title = "Reserve Before It Ships", description, viewMoreHref, viewMoreLabel = "View all pre-orders →", className = "", }) {
     const { data: items = [], isLoading } = useFeaturedPreOrders();
-    return (_jsx(SectionCarousel, { title: title, description: description, viewMoreHref: viewMoreHref, viewMoreLabel: viewMoreLabel, items: items, isLoading: isLoading, skeletonCount: 4, perView: THEME_CONSTANTS.carousel.perView.compact, gap: 16, keyExtractor: (product) => product.id, renderItem: (product) => (_jsx(MarketplacePreorderCard, { product: product })), className: className }));
+    return (_jsx(SectionCarousel, { title: title, description: description, pillLabel: "Pre-Order Incoming", headingVariant: "editorial", viewMoreHref: viewMoreHref, viewMoreLabel: viewMoreLabel, items: items, isLoading: isLoading, skeletonCount: 4, perView: THEME_CONSTANTS.carousel.perView.standard, gap: 16, keyExtractor: (product) => product.id, renderItem: (product) => (_jsx(MarketplacePreorderCard, { product: product })), className: className }));
 }

package/dist/features/homepage/components/FeaturedProductsSection.js

@@ -7,5 +7,5 @@ import { ROUTES } from "../../../next";
 export function FeaturedProductsSection({ title = "Featured Products", description, viewMoreHref, viewMoreLabel = "View all products →", className = "", }) {
     const { data, isLoading } = useFeaturedProducts();
     const items = data?.items ?? [];
-    return (_jsx(SectionCarousel, { title: title, description: description, viewMoreHref: viewMoreHref, viewMoreLabel: viewMoreLabel, items: items, isLoading: isLoading, skeletonCount: 4, perView: { base: 1 }, gap: 16, rows: 2, keyExtractor: (product) => product.id, renderItem: (product) => (_jsx(InteractiveProductCard, { product: product, href: ROUTES.PUBLIC.PRODUCT_DETAIL(product.slug ?? product.id) })), className: className }));
+    return (_jsx(SectionCarousel, { title: title, description: description, pillLabel: "Featured Products", headingVariant: "editorial", viewMoreHref: viewMoreHref, viewMoreLabel: viewMoreLabel, items: items, isLoading: isLoading, skeletonCount: 4, gap: 16, keyExtractor: (product) => product.id, renderItem: (product) => (_jsx(InteractiveProductCard, { product: product, href: ROUTES.PUBLIC.PRODUCT_DETAIL(product.slug ?? product.id) })), className: className }));
 }

package/dist/features/homepage/components/FeaturedStoresSection.js

@@ -7,5 +7,5 @@ import { InteractiveStoreCard } from "../../stores/components/InteractiveStoreCa
 import { ROUTES } from "../../../next";
 export function FeaturedStoresSection({ title = "Featured Stores", description, viewMoreHref, viewMoreLabel = "View all stores →", limit = 8, className = "", }) {
     const { data: items = [], isLoading } = useFeaturedStores(limit);
-    return (_jsx(SectionCarousel, { title: title, description: description, viewMoreHref: viewMoreHref, viewMoreLabel: viewMoreLabel, items: items, isLoading: isLoading, skeletonCount: 4, perView: THEME_CONSTANTS.carousel.perView.cards, gap: 16, keyExtractor: (store) => store.id, renderItem: (store) => (_jsx(InteractiveStoreCard, { store: store, href: ROUTES.PUBLIC.STORE_DETAIL(store.storeSlug) })), className: className }));
+    return (_jsx(SectionCarousel, { title: title, description: description, pillLabel: "Top Stores", headingVariant: "editorial", viewMoreHref: viewMoreHref, viewMoreLabel: viewMoreLabel, items: items, isLoading: isLoading, skeletonCount: 4, perView: THEME_CONSTANTS.carousel.perView.standard, gap: 16, keyExtractor: (store) => store.id, renderItem: (store) => (_jsx(InteractiveStoreCard, { store: store, href: ROUTES.PUBLIC.STORE_DETAIL(store.storeSlug) })), className: className }));
 }

package/dist/features/homepage/components/HeroCarousel.js

@@ -146,5 +146,5 @@ export function HeroCarousel({ initialSlides, push } = {}) {
                                                 }
                                             }, children: _jsx(Span, { className: "text-lg md:text-2xl", children: card.buttons[0].text }) }))] }, card.id))) }))] }, slide.id))) }) }), slides.length > 1 && (_jsx(Div, { className: "absolute bottom-4 left-1/2 -translate-x-1/2 flex gap-2 z-10", children: slides.map((_, index) => (_jsx(Button, { variant: "ghost", className: `relative overflow-hidden rounded-full transition-all duration-500 p-0 !min-h-0 ${index === currentSlide
                         ? THEME_CONSTANTS.carousel.dotActive
-                        : `${THEME_CONSTANTS.carousel.dotInactive} hover:bg-white/75`}`, onClick: () => goToSlide(index), "aria-label": `Go to slide ${index + 1}`, children: index === currentSlide && (_jsx(Span, { className: "absolute inset-y-0 left-0 bg-black/20 rounded-full animate-[progress-fill_4s_linear_forwards]", "aria-hidden": "true" })) }, index))) })), _jsx(Div, { className: "absolute bottom-0 left-0 right-0 h-32 bg-gradient-to-t from-white dark:from-slate-950 to-transparent pointer-events-none z-[5]", "aria-hidden": "true" }), slides.length > 1 && (_jsxs(Div, { className: "absolute bottom-4 right-4 z-20 flex gap-2", children: [_jsx(Button, { variant: "ghost", className: `p-0 ${THEME_CONSTANTS.carousel.arrow}`, onClick: goPrev, "aria-label": "Previous slide", children: _jsx("svg", { className: "w-7 h-7", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2.5, d: "M15 19l-7-7 7-7" }) }) }), _jsx(Button, { variant: "ghost", className: `p-0 ${THEME_CONSTANTS.carousel.arrow}`, onClick: goNext, "aria-label": "Next slide", children: _jsx("svg", { className: "w-7 h-7", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2.5, d: "M9 5l7 7-7 7" }) }) })] }))] }));
+                        : `${THEME_CONSTANTS.carousel.dotInactive} hover:bg-white/75`}`, onClick: () => goToSlide(index), "aria-label": `Go to slide ${index + 1}`, children: index === currentSlide && (_jsx(Span, { className: "absolute inset-y-0 left-0 bg-black/20 rounded-full animate-[progress-fill_4s_linear_forwards]", "aria-hidden": "true" })) }, index))) })), slides.length > 1 && (_jsxs(Div, { className: "absolute bottom-4 right-4 z-20 flex gap-2", children: [_jsx(Button, { variant: "ghost", className: `p-0 ${THEME_CONSTANTS.carousel.arrow}`, onClick: goPrev, "aria-label": "Previous slide", children: _jsx("svg", { className: "w-7 h-7", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2.5, d: "M15 19l-7-7 7-7" }) }) }), _jsx(Button, { variant: "ghost", className: `p-0 ${THEME_CONSTANTS.carousel.arrow}`, onClick: goNext, "aria-label": "Next slide", children: _jsx("svg", { className: "w-7 h-7", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2.5, d: "M9 5l7 7-7 7" }) }) })] }))] }));
 }