@mohasinac/appkit 2.2.0 → 2.3.0

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

@@ -1,157 +0,0 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import "client-only";
-import { useState, useEffect, useRef, useCallback } from "react";
-import { useTranslations } from "next-intl";
-import { useMediaQuery } from "../../../react";
-import { THEME_CONSTANTS } from "../../../tokens";
-import { Button, Div, Heading, Row, Section, Span, Text } from "../../../ui";
-import { MediaImage } from "../../media/MediaImage";
-import { MediaVideo } from "../../media/MediaVideo";
-import { useHeroCarousel } from "../hooks/useHeroCarousel";
-const { flex, position, homepage } = THEME_CONSTANTS;
-function navigate(href, push) {
-    if (push) {
-        push(href);
-    }
-    else {
-        window.location.href = href;
-    }
-}
-export function HeroCarousel({ initialSlides, push } = {}) {
-    const tLoading = useTranslations("loading");
-    const tA11y = useTranslations("accessibility");
-    const [currentSlide, setCurrentSlide] = useState(0);
-    const [isPaused, setIsPaused] = useState(false);
-    const sectionRef = useRef(null);
-    const slidesRef = useRef(null);
-    const isScrollingRef = useRef(false);
-    const isMobile = useMediaQuery("(max-width: 767px)");
-    const prefersReducedMotion = useMediaQuery("(prefers-reduced-motion: reduce)");
-    const { data, isLoading } = useHeroCarousel({ initialData: initialSlides });
-    const slides = data
-        ?.filter((s) => s.active)
-        ?.sort((a, b) => a.order - b.order)
-        ?.slice(0, 5) || [];
-    const goToSlide = useCallback((index) => {
-        const el = slidesRef.current;
-        if (!el)
-            return;
-        setCurrentSlide(index);
-        isScrollingRef.current = true;
-        el.scrollTo({ left: index * el.offsetWidth, behavior: "smooth" });
-        setTimeout(() => {
-            isScrollingRef.current = false;
-        }, 600);
-    }, []);
-    const goNext = useCallback(() => goToSlide((currentSlide + 1) % slides.length), [currentSlide, slides.length, goToSlide]);
-    const goPrev = useCallback(() => goToSlide((currentSlide - 1 + slides.length) % slides.length), [currentSlide, slides.length, goToSlide]);
-    const handleSlidesScroll = useCallback(() => {
-        if (isScrollingRef.current)
-            return;
-        const el = slidesRef.current;
-        if (!el || el.offsetWidth === 0)
-            return;
-        const idx = Math.round(el.scrollLeft / el.offsetWidth);
-        if (idx >= 0 && idx < slides.length)
-            setCurrentSlide(idx);
-    }, [slides.length]);
-    useEffect(() => {
-        if (slides.length <= 1 || isPaused || prefersReducedMotion)
-            return;
-        const interval = setInterval(goNext, 4000);
-        return () => clearInterval(interval);
-    }, [slides.length, isPaused, prefersReducedMotion, goNext]);
-    if (isLoading) {
-        return (_jsx(Div, { className: `relative w-full ${homepage.heroMinH} ${THEME_CONSTANTS.themed.bgTertiary} animate-pulse`, children: _jsx(Div, { className: `${position.fill} ${flex.center}`, children: _jsx(Text, { variant: "secondary", children: tLoading("default") }) }) }));
-    }
-    if (!slides || slides.length === 0) {
-        return null;
-    }
-    const getBackgroundStyle = (card) => {
-        const { type, value } = card.background;
-        if (type === "transparent")
-            return { background: "transparent" };
-        if (type === "color")
-            return { backgroundColor: value };
-        if (type === "gradient")
-            return { background: value };
-        return {};
-    };
-    const getGridPosition = (card) => ({
-        gridRow: String(card.gridRow),
-        gridColumn: isMobile ? "1" : String(card.gridCol),
-    });
-    const handleKeyDown = (e) => {
-        if (e.key === "ArrowRight")
-            goNext();
-        if (e.key === "ArrowLeft")
-            goPrev();
-        if (e.key === " ") {
-            e.preventDefault();
-            setIsPaused((p) => !p);
-        }
-    };
-    return (_jsxs(Section, { ref: sectionRef, className: `relative w-full ${homepage.heroMinH} overflow-hidden`, "aria-roledescription": "carousel", "aria-label": tA11y("heroCarouselAriaLabel"), onKeyDown: handleKeyDown, onMouseEnter: () => setIsPaused(true), onMouseLeave: () => setIsPaused(false), onFocus: () => setIsPaused(true), onBlur: () => setIsPaused(false), tabIndex: 0, children: [_jsx(Div, { "aria-live": "polite", "aria-atomic": "true", className: "sr-only", children: tA11y("heroCarouselSlideOf", {
-                    current: currentSlide + 1,
-                    total: slides.length,
-                }) }), _jsx(Div, { className: position.fill, children: _jsx(Div, { ref: slidesRef, onScroll: handleSlidesScroll, className: "flex h-full overflow-x-auto scroll-smooth snap-x snap-mandatory [scrollbar-width:none] [&::-webkit-scrollbar]:hidden", style: { gap: 0 }, children: slides.map((slide, slideIndex) => (_jsxs(Div, { className: "snap-start flex-none w-full relative self-stretch bg-zinc-900", children: [_jsxs(Div, { className: position.fill, children: [slide.media.type === "image" ? (_jsx(MediaImage, { src: isMobile && slide.mobileMedia
-                                            ? slide.mobileMedia.url
-                                            : slide.media.url, alt: slide.media.alt, size: "hero", priority: slideIndex === 0 })) : (_jsx(MediaVideo, { src: isMobile && slide.mobileMedia
-                                            ? slide.mobileMedia.url
-                                            : slide.media.url, thumbnailUrl: slide.media.thumbnail, alt: slide.media.alt, autoPlayMuted: true, loop: true, controls: false })), _jsx(Div, { className: `${position.fill} bg-black/10` })] }), slide.overlay ? (_jsxs(Div, { className: `${position.fill} ${flex.center} flex-col text-center px-6 md:px-16 lg:px-32`, children: [slide.overlay.subtitle && (_jsx(Text, { className: "stagger-1 text-xs md:text-sm !text-white/80 mb-1 md:mb-2 drop-shadow-sm uppercase tracking-widest", children: slide.overlay.subtitle })), slide.overlay.title && (_jsx(Heading, { level: 1, className: "stagger-2 font-display text-4xl md:text-6xl lg:text-8xl !text-white drop-shadow-2xl mb-2 md:mb-4", children: slide.overlay.title })), slide.overlay.description && (_jsx(Text, { className: "stagger-3 text-sm md:text-lg lg:text-xl !text-white/90 mb-4 md:mb-8 drop-shadow-sm max-w-2xl mx-auto", children: slide.overlay.description })), slide.overlay.button && (_jsx(Div, { className: "stagger-4", children: _jsx(Button, { variant: slide.overlay.button.variant, size: "sm", onClick: () => {
-                                                const btn = slide.overlay.button;
-                                                if (btn.openInNewTab) {
-                                                    window.open(btn.link, "_blank", "noopener,noreferrer");
-                                                }
-                                                else {
-                                                    navigate(btn.link, push);
-                                                }
-                                            }, children: slide.overlay.button.text }) }))] })) : (
-                            /* Grid Overlay with Cards */
-                            _jsx(Div, { className: `${position.fill} grid gap-2 md:gap-4 p-4 md:p-8`, style: {
-                                    gridTemplateRows: "repeat(2, 1fr)",
-                                    gridTemplateColumns: isMobile ? "1fr" : "repeat(3, 1fr)",
-                                    justifyItems: isMobile ? "center" : undefined,
-                                    alignItems: isMobile ? "center" : undefined,
-                                }, children: slide.cards.map((card) => (_jsxs(Div, { className: "relative rounded-lg overflow-hidden shadow-lg transition-transform hover:scale-105", style: {
-                                        ...getGridPosition(card),
-                                        ...getBackgroundStyle(card),
-                                        width: card.sizing?.widthPct
-                                            ? `${isMobile ? Math.min(card.sizing.widthPct, 65) : card.sizing.widthPct}%`
-                                            : isMobile
-                                                ? "65%"
-                                                : "100%",
-                                        height: card.sizing?.heightPct
-                                            ? `${isMobile ? Math.min(card.sizing.heightPct, 55) : card.sizing.heightPct}%`
-                                            : isMobile
-                                                ? "55%"
-                                                : "100%",
-                                        justifySelf: "center",
-                                        alignSelf: "center",
-                                    }, children: [card.background.type === "image" &&
-                                            card.background.value && (_jsx(MediaImage, { src: card.background.value, alt: "", size: "card" })), !card.isButtonOnly && (_jsxs(Div, { className: `${position.fill} flex flex-col justify-end bg-gradient-to-t from-black/80 via-black/30 to-transparent ${card.sizing?.padding === "none"
-                                                ? "p-0"
-                                                : card.sizing?.padding === "sm"
-                                                    ? "p-1.5 md:p-3"
-                                                    : card.sizing?.padding === "lg"
-                                                        ? "p-3 md:p-8"
-                                                        : "p-2 md:p-6"}`, children: [card.content?.subtitle && (_jsx(Text, { className: "hidden md:block text-xs md:text-sm !text-white/90 mb-0.5 md:mb-2 drop-shadow-sm", children: card.content.subtitle })), card.content?.title && (_jsx(Heading, { level: 2, className: "text-[11px] md:text-2xl lg:text-3xl font-bold !text-white mb-0.5 md:mb-3 line-clamp-1 md:line-clamp-2 drop-shadow-md", children: card.content.title })), card.content?.description && (_jsx(Text, { className: "text-[10px] md:text-sm lg:text-base !text-white/80 mb-1 md:mb-4 line-clamp-1 drop-shadow-sm", children: card.content.description })), (card.buttons?.length ?? 0) > 0 && (_jsx(Row, { wrap: true, gap: "xs", className: "md:gap-2", children: (card.buttons ?? []).map((btn) => (_jsx(Button, { variant: btn.variant, size: "sm", onClick: () => {
-                                                            if (btn.openInNewTab) {
-                                                                window.open(btn.link, "_blank", "noopener,noreferrer");
-                                                            }
-                                                            else {
-                                                                navigate(btn.link, push);
-                                                            }
-                                                        }, children: btn.text }, btn.id))) }))] })), card.isButtonOnly && card.buttons?.[0] && (_jsx(Button, { variant: "ghost", className: `${position.fill} ${flex.center} font-semibold text-white hover:bg-black/20 transition-colors rounded-none p-0`, onClick: () => {
-                                                const btn = card.buttons[0];
-                                                if (btn.openInNewTab) {
-                                                    window.open(btn.link, "_blank", "noopener,noreferrer");
-                                                }
-                                                else {
-                                                    navigate(btn.link, 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": tA11y("heroCarouselGoToSlide", { number: 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": tA11y("heroCarouselPrevSlide"), 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": tA11y("heroCarouselNextSlide"), 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" }) }) })] }))] }));
-}

package/dist/features/homepage/components/HeroSection.d.ts

@@ -1,7 +0,0 @@
-import type { HomepageSection } from "../types";
-interface HeroSectionProps {
-    section: HomepageSection;
-    onCtaClick?: () => void;
-}
-export declare function HeroSection({ section, onCtaClick }: HeroSectionProps): import("react/jsx-runtime").JSX.Element;
-export {};

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

@@ -1,12 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button, Div, Heading, Section, Text } from "../../../ui";
-export function HeroSection({ section, onCtaClick }) {
-    const { content } = section;
-    return (_jsxs(Section, { className: "relative flex min-h-[60vh] items-center overflow-hidden bg-neutral-900", style: content?.imageUrl
-            ? {
-                backgroundImage: `url(${content.imageUrl})`,
-                backgroundSize: "cover",
-                backgroundPosition: "center",
-            }
-            : undefined, children: [_jsx(Div, { className: "absolute inset-0 bg-black/40" }), _jsxs(Div, { className: "relative mx-auto max-w-7xl px-4 py-16 text-center text-white sm:px-6 lg:px-8", children: [content?.title && (_jsx(Heading, { level: 1, className: "text-4xl font-bold leading-tight sm:text-5xl lg:text-6xl", children: content.title })), content?.subtitle && (_jsx(Text, { className: "mx-auto mt-4 max-w-2xl text-lg opacity-90", children: content.subtitle })), content?.ctaLabel && (_jsx(Button, { onClick: onCtaClick, className: "mt-8 inline-block rounded-full bg-white px-8 py-3 text-sm font-semibold text-neutral-900 transition hover:bg-neutral-100", children: content.ctaLabel }))] })] }));
-}

package/dist/features/homepage/components/HomepageSkeleton.d.ts

@@ -1,2 +0,0 @@
-/** Full-page skeleton shown while homepage data loads. */
-export declare function HomepageSkeleton(): import("react/jsx-runtime").JSX.Element;

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

@@ -1,14 +0,0 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { THEME_CONSTANTS } from "../../../tokens";
-import { Grid, Section } from "../../../ui";
-/** Full-page skeleton shown while homepage data loads. */
-export function HomepageSkeleton() {
-    const { skeleton, flex, themed } = THEME_CONSTANTS;
-    // Hardcoded clamp values (extended THEME_CONSTANTS keys not in @mohasinac/tokens)
-    const heroSkeletonH = "h-[clamp(420px,72vh,680px)]";
-    const trustCardH = "h-[clamp(120px,18vh,170px)]";
-    const categoryTileH = "h-[clamp(112px,16vh,160px)]";
-    const newsletterH = "h-[clamp(220px,28vh,320px)]";
-    return (_jsxs("div", { className: "w-full overflow-hidden", children: [_jsx("div", { className: `${skeleton.card} w-full ${heroSkeletonH}`, "aria-hidden": "true" }), _jsx(Section, { className: `p-8 ${themed.bgPrimary}`, children: _jsx(Grid, { className: "grid-cols-2 md:grid-cols-4 xl:grid-cols-4 2xl:grid-cols-4", children: Array.from({ length: 4 }).map((_, i) => (_jsx("div", { className: `${skeleton.card} flex flex-col items-center gap-3 p-6 ${trustCardH}` }, i))) }) }), _jsxs(Section, { className: `p-8 ${themed.bgSecondary}`, children: [_jsx("div", { className: `${skeleton.heading} w-48 mx-auto mb-6` }), _jsx(Grid, { className: "grid-cols-2 sm:grid-cols-4", children: Array.from({ length: 6 }).map((_, i) => (_jsx("div", { className: `${skeleton.card} ${categoryTileH}` }, i))) })] }), _jsxs(Section, { className: `p-8 ${themed.bgPrimary}`, children: [_jsxs("div", { className: `${flex.between} mb-6`, children: [_jsx("div", { className: `${skeleton.heading} w-52` }), _jsx("div", { className: `${skeleton.text} w-24` })] }), _jsx(Grid, { className: "grid-cols-2 sm:grid-cols-3 md:grid-cols-4 xl:grid-cols-4 2xl:grid-cols-5", children: Array.from({ length: 5 }).map((_, i) => (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx("div", { className: `${skeleton.image} w-full pb-[100%]` }), _jsx("div", { className: `${skeleton.text} w-3/4` }), _jsx("div", { className: `${skeleton.text} w-1/2` })] }, i))) })] }), _jsxs(Section, { className: `p-8 ${themed.bgSecondary}`, children: [_jsxs("div", { className: `${flex.between} mb-6`, children: [_jsx("div", { className: `${skeleton.heading} w-56` }), _jsx("div", { className: `${skeleton.text} w-24` })] }), _jsx(Grid, { className: "grid-cols-2 sm:grid-cols-3 md:grid-cols-4 xl:grid-cols-4 2xl:grid-cols-5", children: Array.from({ length: 5 }).map((_, i) => (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx("div", { className: `${skeleton.image} w-full pb-[100%]` }), _jsx("div", { className: `${skeleton.text} w-3/4` }), _jsx("div", { className: `${skeleton.text} w-1/2` })] }, i))) })] }), _jsx(Section, { className: `p-8 ${themed.bgPrimary}`, children: _jsx("div", { className: `${skeleton.card} rounded-2xl max-w-2xl mx-auto ${newsletterH}` }) })] }));
-}

package/dist/features/homepage/components/HomepageView.d.ts

@@ -1,25 +0,0 @@
-import React from "react";
-export interface HomepageViewProps {
-    renderHero?: () => React.ReactNode;
-    renderWelcome?: () => React.ReactNode;
-    renderTrustFeatures?: () => React.ReactNode;
-    renderStats?: () => React.ReactNode;
-    renderTopCategories?: () => React.ReactNode;
-    renderTopBrands?: () => React.ReactNode;
-    renderFeaturedProducts?: () => React.ReactNode;
-    renderFeaturedAuctions?: () => React.ReactNode;
-    renderFeaturedPreOrders?: () => React.ReactNode;
-    renderFeaturedStores?: () => React.ReactNode;
-    renderFeaturedEvents?: () => React.ReactNode;
-    renderAdvertisement?: () => React.ReactNode;
-    renderCustomerReviews?: () => React.ReactNode;
-    renderCommunity?: () => React.ReactNode;
-    renderFaq?: () => React.ReactNode;
-    renderBlogArticles?: () => React.ReactNode;
-    renderHowItWorks?: () => React.ReactNode;
-    renderSecurity?: () => React.ReactNode;
-    renderNewsletter?: () => React.ReactNode;
-    renderFeaturedResults?: () => React.ReactNode;
-    className?: string;
-}
-export declare function HomepageView({ renderHero, renderWelcome, renderTrustFeatures, renderStats, renderTopCategories, renderTopBrands, renderFeaturedProducts, renderFeaturedAuctions, renderFeaturedPreOrders, renderFeaturedStores, renderFeaturedEvents, renderAdvertisement, renderCustomerReviews, renderCommunity, renderFaq, renderBlogArticles, renderHowItWorks, renderSecurity, renderNewsletter, renderFeaturedResults, className, }: HomepageViewProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,5 +0,0 @@
-import { jsxs as _jsxs } from "react/jsx-runtime";
-import { Div } from "../../../ui";
-export function HomepageView({ renderHero, renderWelcome, renderTrustFeatures, renderStats, renderTopCategories, renderTopBrands, renderFeaturedProducts, renderFeaturedAuctions, renderFeaturedPreOrders, renderFeaturedStores, renderFeaturedEvents, renderAdvertisement, renderCustomerReviews, renderCommunity, renderFaq, renderBlogArticles, renderHowItWorks, renderSecurity, renderNewsletter, renderFeaturedResults, className = "", }) {
-    return (_jsxs(Div, { className: className, children: [renderHero?.(), renderWelcome?.(), renderTrustFeatures?.(), renderStats?.(), renderTopCategories?.(), renderTopBrands?.(), renderFeaturedProducts?.(), renderFeaturedAuctions?.(), renderFeaturedPreOrders?.(), renderFeaturedStores?.(), renderFeaturedEvents?.(), renderAdvertisement?.(), renderCustomerReviews?.(), renderCommunity?.(), renderFaq?.(), renderBlogArticles?.(), renderHowItWorks?.(), renderSecurity?.(), renderNewsletter?.(), renderFeaturedResults?.()] }));
-}

package/dist/features/homepage/components/HowItWorksInfoView.d.ts

@@ -1,36 +0,0 @@
-import { ReactNode } from "react";
-export interface HowItWorksInfoStep {
-    number: number;
-    icon: string;
-    title: string;
-    text: string;
-    /** Optional accent colour class for the step number badge, e.g. "bg-emerald-100 …" */
-    accentClass?: string;
-    /** Optional text colour class for the number */
-    textClass?: string;
-}
-export interface HowItWorksInfoDetail {
-    title: string;
-    text: string;
-}
-export interface HowItWorksInfoViewProps {
-    /** Page hero heading */
-    title: string;
-    subtitle?: string;
-    /** Tailwind gradient class for the hero header, e.g. "bg-gradient-to-r from-cobalt-600 to-violet-700" */
-    heroClass?: string;
-    /** Step-by-step section heading */
-    stepsTitle?: string;
-    steps: HowItWorksInfoStep[];
-    /** "Important things to know" or similar detail cards below the steps */
-    detailsSectionTitle?: string;
-    details?: HowItWorksInfoDetail[];
-    /** Optional: render the flow/status diagram above the steps list */
-    renderDiagram?: () => ReactNode;
-    /** Optional extra content at the bottom (CTAs, links, etc.) */
-    renderFooter?: () => ReactNode;
-    /** Accent colour for the step number badges (default: cobalt/blue) */
-    accentClass?: string;
-    className?: string;
-}
-export declare function HowItWorksInfoView({ title, subtitle, heroClass, stepsTitle, steps, detailsSectionTitle, details, renderDiagram, renderFooter, accentClass, className, }: HowItWorksInfoViewProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,8 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { THEME_CONSTANTS } from "../../../tokens";
-import { Grid, Heading, Section, Span, Text } from "../../../ui";
-// ─── View ─────────────────────────────────────────────────────────────────────
-export function HowItWorksInfoView({ title, subtitle, heroClass = "bg-gradient-to-br from-cobalt-700 via-cobalt-600 to-violet-700", stepsTitle, steps, detailsSectionTitle, details = [], renderDiagram, renderFooter, accentClass = "bg-blue-100 dark:bg-blue-900/40 text-blue-700 dark:text-blue-400", className = "", }) {
-    const { themed, flex, spacing } = THEME_CONSTANTS;
-    return (_jsxs("div", { className: `-mx-4 md:-mx-6 lg:-mx-8 -mt-6 sm:-mt-8 lg:-mt-10 ${className}`, children: [_jsx(Section, { className: `${heroClass} text-white py-14 md:py-16 lg:py-20`, children: _jsxs("div", { className: "max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center", children: [_jsx(Heading, { level: 1, variant: "none", className: "mb-4 text-white", children: title }), subtitle && (_jsx(Text, { variant: "none", className: "text-white/80 max-w-2xl mx-auto", children: subtitle }))] }) }), _jsxs("div", { className: "max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-10 md:py-12 lg:py-16", children: [renderDiagram?.(), stepsTitle && (_jsx(Heading, { level: 2, className: "mb-6", children: stepsTitle })), _jsx("div", { className: `${spacing.stack} mb-14`, children: steps.map(({ number, icon, title: stepTitle, text, accentClass: stepAccent, textClass, }) => (_jsxs(Section, { className: `flex gap-4 items-start ${themed.bgSecondary} rounded-xl p-6 border ${themed.border}`, children: [_jsx("div", { className: `shrink-0 w-10 h-10 rounded-xl ${stepAccent ?? accentClass} ${flex.center} text-sm font-bold`, children: _jsx(Span, { className: textClass, children: number }) }), _jsxs("div", { children: [_jsxs(Heading, { level: 3, className: "font-semibold mb-1", children: [icon, " ", stepTitle] }), _jsx(Text, { variant: "secondary", size: "sm", className: "leading-relaxed", children: text })] })] }, number))) }), details.length > 0 && (_jsxs(_Fragment, { children: [detailsSectionTitle && (_jsx(Heading, { level: 2, className: "mb-6", children: detailsSectionTitle })), _jsx(Grid, { className: "grid-cols-1 sm:grid-cols-2 xl:grid-cols-2 2xl:grid-cols-3 mb-12", children: details.map(({ title: dt, text: dx }) => (_jsxs("div", { className: `${themed.bgSecondary} border ${themed.border} rounded-xl p-5`, children: [_jsx(Heading, { level: 3, className: "font-semibold mb-2", children: dt }), _jsx(Text, { variant: "secondary", size: "sm", className: "leading-relaxed", children: dx })] }, dt))) })] })), renderFooter?.()] })] }));
-}

package/dist/features/homepage/components/HowItWorksSection.d.ts

@@ -1,23 +0,0 @@
-import React from "react";
-export interface HowItWorksStep {
-    number: number;
-    title: string;
-    desc: string;
-    renderIcon?: (props: {
-        className?: string;
-    }) => React.ReactNode;
-    accentFrom?: string;
-    iconColor?: string;
-    iconBg?: string;
-    badgeBg?: string;
-}
-export interface HowItWorksSectionProps {
-    title: string;
-    subtitle?: string;
-    pillLabel?: string;
-    ctaLabel?: string;
-    onCtaClick?: () => void;
-    steps: HowItWorksStep[];
-    className?: string;
-}
-export declare function HowItWorksSection({ title, subtitle, pillLabel, ctaLabel, onCtaClick, steps, className, }: HowItWorksSectionProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,36 +0,0 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from "react";
-import { THEME_CONSTANTS } from "../../../tokens";
-import { Button, Div, Grid, Heading, Section, Text } from "../../../ui";
-// ─── Single step card ─────────────────────────────────────────────────────────
-function StepCard({ step, visible, delay, }) {
-    const { badgeBg = "bg-primary", iconColor = "text-primary", iconBg = "bg-primary/5 dark:bg-primary/10", } = step;
-    return (_jsxs("div", { className: [
-            "relative rounded-3xl p-8",
-            "bg-white dark:bg-slate-900",
-            "shadow-md group hover:-translate-y-2 hover:shadow-xl",
-            "transition-all duration-300",
-            visible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-8",
-        ].join(" "), style: { transitionDelay: `${delay}ms` }, children: [_jsx("div", { className: "absolute top-4 right-5 font-display text-7xl bg-gradient-to-br from-primary to-cobalt opacity-10 bg-clip-text text-transparent select-none pointer-events-none leading-none", "aria-hidden": "true", children: step.number }), _jsx("div", { className: `relative z-10 w-10 h-10 rounded-full ${badgeBg} text-white font-bold text-sm flex items-center justify-center mb-5 shadow-md`, children: step.number }), step.renderIcon && (_jsx("div", { className: `relative z-10 w-14 h-14 rounded-2xl ${iconBg} flex items-center justify-center mb-4 border border-white/80 dark:border-slate-700/50`, children: _jsx("span", { className: `${iconColor}`, "aria-hidden": "true", children: step.renderIcon({ className: "w-6 h-6" }) }) })), _jsx(Heading, { level: 3, className: `relative z-10 text-base font-semibold ${THEME_CONSTANTS.themed.textPrimary} mb-2`, children: step.title }), _jsx(Text, { className: `relative z-10 text-sm ${THEME_CONSTANTS.themed.textSecondary} leading-relaxed`, children: step.desc })] }));
-}
-// ─── Section ─────────────────────────────────────────────────────────────────
-export function HowItWorksSection({ title, subtitle, pillLabel, ctaLabel, onCtaClick, steps, className = "", }) {
-    const { themed } = THEME_CONSTANTS;
-    const sectionRef = useRef(null);
-    const [visible, setVisible] = useState(false);
-    useEffect(() => {
-        const el = sectionRef.current;
-        if (!el)
-            return;
-        const observer = new IntersectionObserver(([entry], obs) => {
-            if (entry.isIntersecting) {
-                setVisible(true);
-                obs.disconnect();
-            }
-        }, { threshold: 0.15 });
-        observer.observe(el);
-        return () => observer.disconnect();
-    }, []);
-    return (_jsx(Section, { ref: sectionRef, className: `p-8 ${themed.bgPrimary} ${className}`, children: _jsxs(Div, { className: "max-w-6xl mx-auto", children: [_jsxs("div", { className: `text-center mb-12 transition-all duration-700 ${visible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-4"}`, children: [pillLabel && (_jsx("div", { className: "inline-block mb-4 inline-flex items-center gap-2 rounded-full border border-primary-500/30 bg-primary-500/10 px-5 py-1.5 text-xs font-medium tracking-[0.2em] uppercase text-primary-700 dark:text-primary-400 backdrop-blur-sm", children: pillLabel })), _jsx(Heading, { level: 2, className: `text-3xl md:text-4xl font-bold ${themed.textPrimary} mb-3`, children: title }), subtitle && (_jsx(Text, { className: `text-base ${themed.textSecondary} max-w-xl mx-auto`, children: subtitle }))] }), _jsx(Grid, { gap: "lg", className: "grid-cols-1 md:grid-cols-3 xl:grid-cols-3 2xl:grid-cols-3 mb-10", children: steps.map((step, i) => (_jsx(StepCard, { step: step, visible: visible, delay: i * 150 }, step.number))) }), ctaLabel && onCtaClick && (_jsx("div", { className: `text-center transition-all duration-700 delay-500 ${visible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-4"}`, children: _jsx(Button, { variant: "primary", size: "lg", onClick: onCtaClick, children: ctaLabel }) }))] }) }));
-}

package/dist/features/homepage/components/NewsletterBanner.d.ts

@@ -1,22 +0,0 @@
-export interface NewsletterBannerProps {
-    /**
-     * Called when the user submits the form. Throw on failure — the component
-     * will show a generic error message.
-     */
-    onSubscribe: (email: string) => Promise<void>;
-    /** Eyebrow label. Default: "STAY CONNECTED". */
-    eyebrow?: string;
-    /** Section heading. Default: "Join Our Newsletter". */
-    heading?: string;
-    /** Sub-heading. Default: "Get exclusive offers, new arrivals and more." */
-    subheading?: string;
-    /** Email placeholder text. Default: "Enter your email". */
-    placeholder?: string;
-    /** CTA button label. Default: "Subscribe". */
-    ctaLabel?: string;
-    /** Success message shown after subscribe. Default: "You're in! Check your inbox." */
-    successMessage?: string;
-    /** Error message on failure. Default: "Something went wrong. Please try again." */
-    errorMessage?: string;
-}
-export declare function NewsletterBanner({ onSubscribe, eyebrow, heading, subheading, placeholder, ctaLabel, successMessage, errorMessage, }: NewsletterBannerProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,34 +0,0 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from "react";
-import { Button, Div, Heading, Input, Section, Span, Text, } from "../../../ui";
-export function NewsletterBanner({ onSubscribe, eyebrow = "STAY CONNECTED", heading = "Join Our Newsletter", subheading = "Get exclusive offers, new arrivals and more.", placeholder = "Enter your email", ctaLabel = "Subscribe", successMessage = "You're in! Check your inbox.", errorMessage = "Something went wrong. Please try again.", }) {
-    const [email, setEmail] = useState("");
-    const [loading, setLoading] = useState(false);
-    const [success, setSuccess] = useState(false);
-    const [error, setError] = useState(false);
-    async function handleSubmit(e) {
-        e.preventDefault();
-        if (!email)
-            return;
-        setLoading(true);
-        setError(false);
-        try {
-            await onSubscribe(email);
-            setEmail("");
-            setSuccess(true);
-        }
-        catch {
-            setError(true);
-        }
-        finally {
-            setLoading(false);
-        }
-    }
-    return (_jsxs(Section, { className: "relative overflow-hidden py-24", style: {
-            background: "var(--newsletter-bg, linear-gradient(135deg, var(--color-primary, #1e40af) 0%, var(--color-secondary, #7c3aed) 100%))",
-        }, children: [_jsx(Div, { className: "pointer-events-none absolute -top-20 -right-20 h-60 w-60 rounded-full border border-white/[0.06]" }), _jsx(Div, { className: "pointer-events-none absolute -bottom-16 -left-16 h-48 w-48 rounded-full border border-dashed border-white/[0.08]" }), _jsxs(Div, { className: "relative mx-auto max-w-2xl px-4 text-center sm:px-6", children: [_jsx(Span, { className: "mb-4 inline-flex rounded-full border border-white/20 px-3 py-1 text-xs font-semibold uppercase tracking-widest text-white/70", children: eyebrow }), _jsx(Heading, { level: 2, className: "text-3xl font-bold text-white sm:text-4xl", children: heading }), _jsx(Text, { className: "mt-4 text-white/60", children: subheading }), success ? (_jsx(Text, { className: "mt-8 rounded-xl border border-white/20 bg-white/10 px-6 py-4 text-sm font-semibold text-white", children: successMessage })) : (_jsxs("form", { onSubmit: handleSubmit, className: "mt-8 flex gap-3", children: [_jsx(Input, { type: "email", value: email, onChange: (e) => setEmail(e.target.value), placeholder: placeholder, required: true, className: "flex-1 rounded-xl border border-white/20 bg-white/10 px-4 py-3 text-sm text-white placeholder:text-white/40 outline-none focus:border-white/40" }), _jsx(Button, { type: "submit", disabled: loading, variant: "primary", className: "shrink-0 rounded-xl px-5 py-3 text-sm font-bold transition-opacity disabled:opacity-60", style: {
-                                    background: "var(--color-yellow, #FFE500)",
-                                    color: "#0D0D0D",
-                                }, children: loading ? "…" : ctaLabel })] })), error && (_jsx(Text, { className: "mt-3 text-sm text-red-300", children: errorMessage })), _jsx(Text, { className: "mt-4 text-xs text-white/40", children: "No spam, ever. Unsubscribe anytime." })] })] }));
-}

package/dist/features/homepage/components/NewsletterSection.d.ts

@@ -1,10 +0,0 @@
-import React from "react";
-export interface NewsletterSectionProps {
-    title: string;
-    subtitle?: string;
-    privacyLabel?: string;
-    privacyHref?: string;
-    renderForm: () => React.ReactNode;
-    className?: string;
-}
-export declare function NewsletterSection({ title, subtitle, privacyLabel, privacyHref, renderForm, className, }: NewsletterSectionProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,8 +0,0 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Heading, Section, Text, TextLink } from "../../../ui";
-import { Mail } from "lucide-react";
-// ─── Section ─────────────────────────────────────────────────────────────────
-export function NewsletterSection({ title, subtitle, privacyLabel, privacyHref, renderForm, className = "", }) {
-    return (_jsxs(Section, { className: `py-16 px-4 relative overflow-hidden ${className}`, children: [_jsx("div", { className: "absolute inset-0 bg-gradient-to-br from-primary/10 via-cobalt/5 to-secondary/10 dark:from-primary/15 dark:via-cobalt/10 dark:to-secondary/15 pointer-events-none", "aria-hidden": true }), _jsx("div", { className: "absolute -top-20 -right-20 w-80 h-80 rounded-full bg-primary/5 dark:bg-primary/10 pointer-events-none", "aria-hidden": true }), _jsx("div", { className: "absolute -bottom-16 -left-16 w-64 h-64 rounded-full bg-cobalt/5 dark:bg-cobalt/10 pointer-events-none", "aria-hidden": true }), _jsxs("div", { className: "relative z-10 max-w-2xl mx-auto text-center", children: [_jsx("div", { className: "inline-flex items-center justify-center w-14 h-14 rounded-2xl bg-primary/10 dark:bg-primary/20 border border-primary/20 mb-5 mx-auto", children: _jsx(Mail, { className: "w-7 h-7 text-primary" }) }), _jsx(Heading, { level: 2, className: "text-2xl sm:text-3xl font-bold text-zinc-900 dark:text-white mb-3", children: title }), subtitle && (_jsx(Text, { size: "base", className: "text-zinc-500 dark:text-zinc-400 mb-8 max-w-md mx-auto", children: subtitle })), renderForm(), privacyLabel && privacyHref && (_jsxs(Text, { size: "xs", className: "text-zinc-400 dark:text-zinc-500 mt-4", children: [privacyLabel, " ", _jsx(TextLink, { href: privacyHref, className: "underline underline-offset-2 hover:text-primary", children: "Privacy Policy" }), "."] }))] })] }));
-}

package/dist/features/homepage/components/PromoGrid.d.ts

@@ -1,9 +0,0 @@
-import type { PromoBanner } from "../types";
-export interface PromoGridProps {
-    banners: PromoBanner[];
-    /** Eyebrow label above the section heading. Default: "LIMITED TIME". */
-    eyebrow?: string;
-    /** Section heading. Default: "HOT DEALS & PROMOS". */
-    heading?: string;
-}
-export declare function PromoGrid({ banners, eyebrow, heading, }: PromoGridProps): import("react/jsx-runtime").JSX.Element | null;

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

@@ -1,35 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import Image from "next/image";
-import Link from "next/link";
-import { Div, Heading, Row, Section, Span, Text } from "../../../ui";
-export function PromoGrid({ banners, eyebrow = "LIMITED TIME", heading = "HOT DEALS & PROMOS", }) {
-    if (banners.length === 0)
-        return null;
-    return (_jsx(Section, { className: "py-10 sm:py-16", style: {
-            background: "var(--dark-section-alt)",
-            borderTop: "1px solid rgba(255,255,255,0.06)",
-            borderBottom: "1px solid rgba(255,255,255,0.06)",
-        }, children: _jsxs(Div, { className: "mx-auto max-w-7xl px-4", children: [_jsx(Row, { wrap: true, align: "end", justify: "between", gap: "sm", className: "mb-7 gap-y-2", children: _jsxs(Div, { children: [_jsx(Text, { className: "mb-1 text-xs font-black uppercase tracking-widest", style: { color: "var(--color-red)", letterSpacing: "0.18em" }, children: eyebrow }), _jsx(Heading, { level: 2, style: {
-                                    fontFamily: "var(--font-bangers, Bangers, cursive)",
-                                    fontSize: "clamp(1.6rem, 4vw, 2.4rem)",
-                                    letterSpacing: "0.08em",
-                                    color: "#FFFFFF",
-                                    lineHeight: 1,
-                                }, children: heading })] }) }), _jsx(Div, { className: "grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3", children: banners.slice(0, 4).map((banner, i) => (_jsxs(Link, { href: banner.ctaUrl, className: `group relative block overflow-hidden ${i === 0 ? "sm:row-span-2" : ""}`, style: {
-                            minHeight: i === 0
-                                ? "clamp(220px, 32vh, 480px)"
-                                : "clamp(130px, 16vh, 240px)",
-                            background: "var(--dark-section-card)",
-                        }, children: [_jsx(Image, { src: banner.image, alt: banner.title, fill: true, className: "object-cover transition-transform duration-500 group-hover:scale-105", sizes: i === 0
-                                    ? "(max-width: 640px) 100vw, 40vw"
-                                    : "(max-width: 640px) 50vw, 30vw" }), _jsx(Div, { className: "absolute inset-0", style: {
-                                    background: i === 0
-                                        ? "linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.3) 50%, transparent 100%)"
-                                        : "linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.15) 100%)",
-                                } }), _jsx(Div, { className: "absolute inset-0 opacity-0 transition-opacity duration-300 group-hover:opacity-100", style: { boxShadow: "inset 0 0 0 2px var(--color-yellow)" } }), _jsxs(Div, { className: "absolute bottom-0 left-0 right-0 p-4", children: [_jsx(Text, { className: "leading-tight", style: {
-                                            fontFamily: "var(--font-bangers, Bangers, cursive)",
-                                            fontSize: i === 0 ? "1.35rem" : "1rem",
-                                            letterSpacing: "0.06em",
-                                            color: "#FFFFFF",
-                                        }, children: banner.title }), _jsxs(Span, { className: "mt-1 inline-flex items-center gap-1 text-xs font-black uppercase", style: { color: "var(--color-yellow)" }, children: [banner.ctaLabel, " \u2192"] })] })] }, banner.id))) })] }) }));
-}

package/dist/features/homepage/components/SectionCarousel.d.ts

@@ -1,75 +0,0 @@
-import React from "react";
-import { type PerViewConfig } from "../../../ui";
-export interface SectionCarouselProps<T = unknown> {
-    /** Section heading */
-    title: string;
-    /** Optional subtitle below the heading */
-    description?: string;
-    /**
-     * Heading visual variant.
-     * - `"default"` — standard themed text
-     * - `"gradient"` — primary→cobalt gradient clip text
-     * - `"editorial"` — pill + font-display H2 + ornament
-     */
-    headingVariant?: "default" | "gradient" | "editorial";
-    /**
-     * Pill label shown above the heading when `headingVariant="editorial"`.
-     * Required for editorial variant; ignored otherwise.
-     */
-    pillLabel?: string;
-    /**
-     * URL of an image to use as the section background.
-     * A dark semi-transparent overlay is applied so text remains readable.
-     */
-    backgroundImage?: string;
-    /** Route for the "View More" button. Omit to hide the button. */
-    viewMoreHref?: string;
-    /**
-     * Label for the "View More" button.
-     * Defaults to "View all →" when omitted.
-     */
-    viewMoreLabel?: string;
-    /** Items to render in the carousel. */
-    items: T[];
-    /** Renders a single item. Receives (item, index). */
-    renderItem: (item: T, index: number) => React.ReactNode;
-    /** Responsive items-per-view breakpoint config. Default: { base: 1, sm: 2, md: 3 } */
-    perView?: PerViewConfig;
-    /** Gap between cards in px. Default: 16 */
-    gap?: number;
-    /** Enable circular auto-scroll. Default: false */
-    autoScroll?: boolean;
-    /** Interval between auto-scroll steps in ms. Default: 3500 */
-    autoScrollInterval?: number;
-    /** Key extractor for the HorizontalScroller. */
-    keyExtractor?: (item: T, index: number) => string;
-    /**
-     * Number of rows (for 2-row grid mode).
-     * Auto-scroll is disabled in grid mode.
-     * Default: 1
-     */
-    rows?: number;
-    /** Additional classes on the outer `<Section>`. */
-    className?: string;
-    /** Show a loading skeleton instead of items. */
-    isLoading?: boolean;
-    /** Number of skeleton cards to show. Default: 4 */
-    skeletonCount?: number;
-    /**
-     * Whether the heading and description text should be light-coloured.
-     * Defaults to `true` when `backgroundImage` is provided, `false` otherwise.
-     */
-    lightText?: boolean;
-    /**
-     * When `true`, adds a negative right margin to the scroller wrapper so the
-     * last visible item peeks at the edge.
-     * Default: false
-     */
-    showPeek?: boolean;
-    /**
-     * Minimum item width in px.
-     * Default: 220
-     */
-    minItemWidth?: number;
-}
-export declare function SectionCarousel<T = unknown>({ title, description, headingVariant, pillLabel, backgroundImage, viewMoreHref, viewMoreLabel, items, renderItem, perView, gap, autoScroll, autoScrollInterval, keyExtractor, rows, className, isLoading, skeletonCount, lightText, showPeek, minItemWidth, }: SectionCarouselProps<T>): import("react/jsx-runtime").JSX.Element;

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

@@ -1,39 +0,0 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { THEME_CONSTANTS } from "../../../tokens";
-import { Heading, HorizontalScroller, Section, Span, Text, TextLink, } from "../../../ui";
-import { MediaImage } from "../../media/MediaImage";
-// ─── Skeleton ────────────────────────────────────────────────────────────────
-function CarouselSkeleton({ count }) {
-    const { skeleton } = THEME_CONSTANTS;
-    return (_jsx("div", { className: "flex gap-4 overflow-hidden px-4", children: Array.from({ length: count }).map((_, i) => (_jsxs("div", { className: "flex-none min-w-[clamp(150px,18vw,260px)] max-w-[clamp(240px,36vw,380px)] h-[clamp(180px,26vh,260px)] space-y-2", children: [_jsx("div", { className: `aspect-square rounded-xl ${skeleton.image}` }), _jsx("div", { className: `${skeleton.text} w-3/4` }), _jsx("div", { className: `${skeleton.text} w-1/2` })] }, i))) }));
-}
-// ─── Component ───────────────────────────────────────────────────────────────
-export function SectionCarousel({ title, description, headingVariant = "default", pillLabel, backgroundImage, viewMoreHref, viewMoreLabel = "View all →", items, renderItem, perView = { base: 1, sm: 2, md: 3 }, gap = 16, autoScroll = false, autoScrollInterval = 3500, keyExtractor, rows = 1, className = "", isLoading = false, skeletonCount = 4, lightText, showPeek = false, minItemWidth = 220, }) {
-    const hasBg = Boolean(backgroundImage);
-    const useLightText = lightText ?? hasBg;
-    const { themed, flex } = THEME_CONSTANTS;
-    const headingClass = useLightText
-        ? "text-white"
-        : headingVariant === "gradient"
-            ? "bg-gradient-to-r from-primary to-cobalt bg-clip-text text-transparent"
-            : themed.textPrimary;
-    const descVariant = useLightText ? "text-white/80" : themed.textSecondary;
-    const pillClass = "inline-flex items-center gap-2 rounded-full border border-primary-500/30 bg-primary-500/10 px-5 py-1.5 text-xs font-medium tracking-[0.2em] uppercase text-primary-700 dark:text-primary-400 backdrop-blur-sm";
-    return (_jsxs(Section, { className: [
-            "relative overflow-hidden w-full",
-            hasBg ? "" : themed.bgSecondary,
-            "p-8",
-            className,
-        ]
-            .filter(Boolean)
-            .join(" "), children: [hasBg && backgroundImage && (_jsxs(_Fragment, { children: [_jsx("div", { className: "absolute inset-0 overflow-hidden", children: _jsx(MediaImage, { src: backgroundImage, alt: "", size: "hero" }) }), _jsx("div", { className: "absolute inset-0 bg-black/55" })] })), _jsxs("div", { className: "relative z-10 w-full max-w-7xl mx-auto", children: [_jsxs("div", { className: "text-center mb-6", children: [headingVariant === "editorial" && pillLabel && (_jsx("div", { className: "mb-4", children: _jsxs(Span, { className: pillClass, children: [_jsx(Span, { className: "w-1.5 h-1.5 rounded-full bg-primary-500 inline-block", "aria-hidden": "true" }), pillLabel, _jsx(Span, { className: "w-1.5 h-1.5 rounded-full bg-primary-500 inline-block", "aria-hidden": "true" })] }) })), _jsx(Heading, { level: 2, variant: "none", className: [
-                                    "text-3xl md:text-4xl font-bold mb-2",
-                                    headingVariant === "editorial" ? "font-display text-4xl" : "",
-                                    headingClass,
-                                ]
-                                    .filter(Boolean)
-                                    .join(" "), children: title }), headingVariant === "editorial" && (_jsxs("div", { className: `${flex.center} gap-2 mt-1 text-zinc-400 dark:text-zinc-500 text-xs select-none`, "aria-hidden": "true", children: [_jsx(Span, { className: "h-px w-6 bg-current" }), _jsx(Span, { className: "text-xs", children: "\u2736" }), _jsx(Span, { className: "h-px w-6 bg-current" })] })), description && (_jsx(Text, { className: `text-base ${descVariant} mt-2`, children: description }))] }), isLoading ? (_jsx(CarouselSkeleton, { count: skeletonCount })) : (_jsx(HorizontalScroller, { items: items, renderItem: renderItem, perView: perView, gap: gap, autoScroll: autoScroll, autoScrollInterval: autoScrollInterval, keyExtractor: keyExtractor, rows: rows, minItemWidth: minItemWidth })), viewMoreHref && !isLoading && (_jsx("div", { className: "mt-6 text-center", children: _jsx(TextLink, { href: viewMoreHref, className: `inline-flex items-center gap-2 px-6 py-2.5 rounded-full text-sm font-medium transition-colors ${useLightText
-                                ? "bg-white/20 text-white hover:bg-white/30 backdrop-blur-sm"
-                                : "bg-primary/10 text-primary hover:bg-primary/20 dark:bg-primary/15 dark:text-primary-400"}`, children: viewMoreLabel }) }))] })] }));
-}