@pradip1995/theme-sahsha 3.1.2 → 3.1.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pradip1995/theme-sahsha",
-  "version": "3.1.2",
+  "version": "3.1.3",
   "description": "Sahsha storefront theme — Impulse-based editorial layout, luxury nav, and brand tokens",
   "license": "MIT",
   "publishConfig": {

package/src/blocks/home/ShopByAge/collections-showcase-client.tsx

@@ -32,9 +32,16 @@ const CollectionsShowcaseClient = ({
 }: CollectionsShowcaseClientProps) => {
   const viewportRef = useRef<HTMLDivElement>(null)
   const [activeId, setActiveId] = useState(() => getDefaultActiveTabId(tabs))
+  const [contentAnimating, setContentAnimating] = useState(false)
 
   const activeProducts = productsByCollection[activeId] ?? []
 
+  const handleTabClick = (tabId: string) => {
+    if (tabId === activeId) return
+    setActiveId(tabId)
+    setContentAnimating(true)
+  }
+
   useEffect(() => {
     const viewport = viewportRef.current
     if (viewport) {
@@ -42,6 +49,13 @@ const CollectionsShowcaseClient = ({
     }
   }, [activeId])
 
+  useEffect(() => {
+    if (!contentAnimating) return
+
+    const timer = window.setTimeout(() => setContentAnimating(false), 360)
+    return () => window.clearTimeout(timer)
+  }, [contentAnimating, activeId])
+
   const scrollByPage = (direction: "prev" | "next") => {
     const viewport = viewportRef.current
     if (!viewport) return
@@ -69,9 +83,9 @@ const CollectionsShowcaseClient = ({
               type="button"
               className={`collections-showcase__tab${isActive ? " is-active" : ""}`}
               aria-current={isActive ? "true" : undefined}
-              onClick={() => setActiveId(tab.id)}
+              onClick={() => handleTabClick(tab.id)}
             >
-              {tab.title}
+              <span className="collections-showcase__tab-label">{tab.title}</span>
             </button>
           )
         })}
@@ -88,7 +102,12 @@ const CollectionsShowcaseClient = ({
         </button>
 
         <div ref={viewportRef} className="collections-showcase__viewport">
-          <div className="collections-showcase__track">
+          <div
+            key={activeId}
+            className={`collections-showcase__track${
+              contentAnimating ? " collections-showcase__track--enter" : ""
+            }`}
+          >
             {activeProducts.length > 0 ? (
               activeProducts.map((product) => (
                 <div key={product.id} className="collections-showcase__slide">

package/src/components/product-carousel.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { useRef } from "react"
+import { useCallback, useEffect, useRef, useState } from "react"
 import { ChevronLeft, ChevronRight } from "lucide-react"
 import { HttpTypes } from "@medusajs/types"
 import type { ProductCardRating } from "@core/types/product-card"
@@ -12,36 +12,160 @@ type ProductCarouselProps = {
   ratings?: ProductCardRating[]
 }
 
+const AUTO_SCROLL_MS = 4200
+const AUTO_SCROLL_RESUME_MS = 5000
+
 const ProductCarousel = ({ products, region, ratings }: ProductCarouselProps) => {
   const viewportRef = useRef<HTMLDivElement>(null)
   const trackRef = useRef<HTMLDivElement>(null)
+  const pauseAutoScrollRef = useRef(false)
+  const resumeTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+  const [canScrollLeft, setCanScrollLeft] = useState(false)
+  const [canScrollRight, setCanScrollRight] = useState(true)
+  const [reduceMotion, setReduceMotion] = useState(false)
 
-  const scrollBySlide = (direction: "prev" | "next") => {
+  const getSlideStep = useCallback(() => {
     const viewport = viewportRef.current
     const track = trackRef.current
-    if (!viewport || !track) return
+    if (!viewport || !track) return 0
 
     const firstSlide = track.querySelector<HTMLElement>(".bestsellers-carousel__slide")
-    if (!firstSlide) return
+    if (!firstSlide) return viewport.clientWidth * 0.85
 
     const trackStyles = getComputedStyle(track)
     const gap =
       Number.parseFloat(trackStyles.columnGap || trackStyles.gap || "0") || 0
-    const slideStep = firstSlide.offsetWidth + gap
 
-    viewport.scrollBy({
-      left: direction === "next" ? slideStep : -slideStep,
-      behavior: "smooth",
-    })
-  }
+    return firstSlide.offsetWidth + gap
+  }, [])
+
+  const updateScrollState = useCallback(() => {
+    const viewport = viewportRef.current
+    if (!viewport) return
+
+    const { scrollLeft, scrollWidth, clientWidth } = viewport
+    const maxScroll = scrollWidth - clientWidth
+
+    setCanScrollLeft(scrollLeft > 4)
+    setCanScrollRight(scrollLeft < maxScroll - 4)
+  }, [])
+
+  const pauseAutoScroll = useCallback(() => {
+    pauseAutoScrollRef.current = true
+
+    if (resumeTimerRef.current) {
+      clearTimeout(resumeTimerRef.current)
+    }
+
+    resumeTimerRef.current = setTimeout(() => {
+      pauseAutoScrollRef.current = false
+    }, AUTO_SCROLL_RESUME_MS)
+  }, [])
+
+  const scrollBySlide = useCallback(
+    (direction: "prev" | "next") => {
+      const viewport = viewportRef.current
+      if (!viewport) return
+
+      pauseAutoScroll()
+
+      const slideStep = getSlideStep()
+      viewport.scrollBy({
+        left: direction === "next" ? slideStep : -slideStep,
+        behavior: "smooth",
+      })
+    },
+    [getSlideStep, pauseAutoScroll]
+  )
+
+  useEffect(() => {
+    const media = window.matchMedia("(prefers-reduced-motion: reduce)")
+    const update = () => setReduceMotion(media.matches)
+    update()
+    media.addEventListener("change", update)
+    return () => media.removeEventListener("change", update)
+  }, [])
+
+  useEffect(() => {
+    const viewport = viewportRef.current
+    if (!viewport) return
+
+    updateScrollState()
+
+    const onScroll = () => updateScrollState()
+    viewport.addEventListener("scroll", onScroll, { passive: true })
+    window.addEventListener("resize", updateScrollState)
+
+    return () => {
+      viewport.removeEventListener("scroll", onScroll)
+      window.removeEventListener("resize", updateScrollState)
+    }
+  }, [products, updateScrollState])
+
+  useEffect(() => {
+    if (reduceMotion || products.length < 3) return
+
+    const viewport = viewportRef.current
+    if (!viewport) return
+
+    const tick = () => {
+      if (pauseAutoScrollRef.current) return
+
+      const { scrollLeft, scrollWidth, clientWidth } = viewport
+      const maxScroll = scrollWidth - clientWidth
+      const step = getSlideStep()
+
+      if (maxScroll <= 0) return
+
+      if (scrollLeft >= maxScroll - 4) {
+        viewport.scrollTo({ left: 0, behavior: "smooth" })
+        return
+      }
+
+      viewport.scrollBy({ left: step, behavior: "smooth" })
+    }
+
+    const intervalId = window.setInterval(tick, AUTO_SCROLL_MS)
+
+    return () => window.clearInterval(intervalId)
+  }, [reduceMotion, products, getSlideStep])
+
+  useEffect(() => {
+    return () => {
+      if (resumeTimerRef.current) {
+        clearTimeout(resumeTimerRef.current)
+      }
+    }
+  }, [])
 
   return (
-    <div className="bestsellers-carousel">
+    <div
+      className="bestsellers-carousel"
+      onMouseEnter={pauseAutoScroll}
+      onTouchStart={pauseAutoScroll}
+      onPointerDown={pauseAutoScroll}
+    >
+      <div
+        className={`bestsellers-carousel__fade bestsellers-carousel__fade--left${
+          canScrollLeft ? " is-visible" : ""
+        }`}
+        aria-hidden
+      />
+      <div
+        className={`bestsellers-carousel__fade bestsellers-carousel__fade--right${
+          canScrollRight ? " is-visible" : ""
+        }`}
+        aria-hidden
+      />
+
       <button
         type="button"
-        className="bestsellers-carousel__nav bestsellers-carousel__nav--prev"
+        className={`bestsellers-carousel__nav bestsellers-carousel__nav--prev${
+          canScrollLeft ? "" : " is-hidden"
+        }`}
         onClick={() => scrollBySlide("prev")}
         aria-label="Previous products"
+        tabIndex={canScrollLeft ? 0 : -1}
       >
         <ChevronLeft size={20} strokeWidth={1.75} />
       </button>
@@ -66,9 +190,12 @@ const ProductCarousel = ({ products, region, ratings }: ProductCarouselProps) =>
 
       <button
         type="button"
-        className="bestsellers-carousel__nav bestsellers-carousel__nav--next"
+        className={`bestsellers-carousel__nav bestsellers-carousel__nav--next${
+          canScrollRight ? "" : " is-hidden"
+        }`}
         onClick={() => scrollBySlide("next")}
         aria-label="Next products"
+        tabIndex={canScrollRight ? 0 : -1}
       >
         <ChevronRight size={20} strokeWidth={1.75} />
       </button>

package/src/tokens/theme.css

@@ -2583,9 +2583,21 @@ body.mobile-menu-open .promo-bar {
   }
 }
 
+@keyframes collections-showcase-tab-enter {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
 .collections-showcase__tab {
   margin: 0;
-  padding: 0;
+  padding: 0 0 0.4rem;
   border: none;
   background: none;
   cursor: pointer;
@@ -2597,22 +2609,83 @@ body.mobile-menu-open .promo-bar {
   line-height: 1.1;
   letter-spacing: 0.01em;
   color: #c8c8c8;
-  transition: color 0.25s ease, font-weight 0.25s ease;
+  position: relative;
+  transition:
+    color 0.28s ease,
+    transform 0.2s cubic-bezier(0.34, 1.4, 0.64, 1);
   -webkit-tap-highlight-color: transparent;
   outline: none;
   box-shadow: none;
 }
 
+.collections-showcase__tab-label {
+  display: inline-block;
+  transition: transform 0.2s cubic-bezier(0.34, 1.4, 0.64, 1);
+}
+
+.collections-showcase__tab::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: 2px;
+  border-radius: 999px;
+  background: currentColor;
+  transform: scaleX(0);
+  transform-origin: center;
+  transition: transform 0.32s cubic-bezier(0.34, 1.2, 0.64, 1);
+}
+
 .collections-showcase__tab.is-active {
   color: #1a1a1a;
   font-weight: 500;
 }
 
+.collections-showcase__tab.is-active::after {
+  transform: scaleX(1);
+}
+
 .collections-showcase__tab:hover:not(.is-active),
 .collections-showcase__tab:focus-visible:not(.is-active) {
   color: #9a9a9a;
 }
 
+.collections-showcase__tab:hover .collections-showcase__tab-label,
+.collections-showcase__tab:focus-visible .collections-showcase__tab-label {
+  transform: translateY(-1px);
+}
+
+.collections-showcase__tab:active .collections-showcase__tab-label {
+  transform: scale(0.96);
+}
+
+.collections-showcase__tab.is-active:active .collections-showcase__tab-label {
+  transform: scale(0.98);
+}
+
+.collections-showcase__track--enter {
+  animation: collections-showcase-tab-enter 0.36s cubic-bezier(0.22, 1, 0.36, 1) both;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .collections-showcase__tab,
+  .collections-showcase__tab-label,
+  .collections-showcase__tab::after {
+    transition: none;
+  }
+
+  .collections-showcase__tab:hover .collections-showcase__tab-label,
+  .collections-showcase__tab:focus-visible .collections-showcase__tab-label,
+  .collections-showcase__tab:active .collections-showcase__tab-label {
+    transform: none;
+  }
+
+  .collections-showcase__track--enter {
+    animation: none;
+  }
+}
+
 .collections-showcase__tab:focus,
 .collections-showcase__tab:focus-visible {
   outline: none;
@@ -3038,7 +3111,10 @@ body.mobile-menu-open .promo-bar {
   overflow: hidden;
   background: var(--color-brand-cream);
   box-shadow: 0 4px 20px rgba(90, 42, 67, 0.07);
-  transition: box-shadow 0.4s ease, transform 0.4s ease;
+  transform-origin: center;
+  transition:
+    box-shadow 0.35s ease,
+    transform 0.28s cubic-bezier(0.34, 1.2, 0.64, 1);
 }
 
 .shop-by-category__card--top .shop-by-category__frame,
@@ -3048,7 +3124,13 @@ body.mobile-menu-open .promo-bar {
 
 .shop-by-category__card:hover .shop-by-category__frame {
   box-shadow: 0 12px 36px rgba(90, 42, 67, 0.15);
-  transform: translateY(-3px);
+  transform: translateY(-3px) scale(1.02);
+}
+
+.shop-by-category__card:active .shop-by-category__frame {
+  box-shadow: 0 6px 24px rgba(90, 42, 67, 0.12);
+  transform: translateY(-1px) scale(0.98);
+  transition-duration: 0.15s;
 }
 
 .shop-by-category__image {
@@ -3219,6 +3301,25 @@ body.mobile-menu-open .promo-bar {
   }
 }
 
+@media (prefers-reduced-motion: reduce) {
+  .shop-by-category__frame,
+  .shop-by-category__image,
+  .shop-by-category__overlay,
+  .shop-by-category__count,
+  .shop-by-category__cta {
+    transition: none;
+  }
+
+  .shop-by-category__card:hover .shop-by-category__frame,
+  .shop-by-category__card:active .shop-by-category__frame {
+    transform: none;
+  }
+
+  .shop-by-category__card:hover .shop-by-category__image {
+    transform: none;
+  }
+}
+
 /* ── Account login / register (Sahsha split layout) ──────── */
 .account-login {
   display: flex;
@@ -5220,6 +5321,8 @@ body.mobile-menu-open .promo-bar {
     position: sticky !important;
     top: calc(var(--header-height) + var(--promo-bar-height, 0px) + 20px) !important;
     align-self: flex-start !important;
+    width: 100% !important;
+    min-width: 0 !important;
     height: fit-content !important;
     max-height: calc(100vh - var(--header-height) - var(--promo-bar-height, 0px) - 40px) !important;
     overflow: visible !important;
@@ -5230,6 +5333,7 @@ body.mobile-menu-open .promo-bar {
   .product-details-scroll {
     flex: 1;
     min-width: 0;
+    width: 100% !important;
     height: auto !important;
     max-height: none !important;
     overflow: visible !important;
@@ -5244,12 +5348,21 @@ body.mobile-menu-open .promo-bar {
   }
 
   .product-gallery__stage-img {
-    max-height: calc(100vh - var(--header-height) - var(--promo-bar-height, 0px) - 4rem);
+    max-height: min(
+      calc(100vh - var(--header-height) - var(--promo-bar-height, 0px) - 5rem),
+      680px
+    );
   }
 
   .product-gallery__thumbs--scrollable {
-    height: calc(100vh - var(--header-height) - var(--promo-bar-height, 0px) - 4rem);
-    max-height: calc(100vh - var(--header-height) - var(--promo-bar-height, 0px) - 4rem);
+    height: min(
+      calc(100vh - var(--header-height) - var(--promo-bar-height, 0px) - 5rem),
+      680px
+    );
+    max-height: min(
+      calc(100vh - var(--header-height) - var(--promo-bar-height, 0px) - 5rem),
+      680px
+    );
   }
 }
 
@@ -5281,15 +5394,18 @@ body.mobile-menu-open .promo-bar {
 @media (min-width: 1024px) {
   .product-gallery {
     display: grid;
-    grid-template-columns: 5.25rem minmax(0, 1fr);
+    grid-template-columns: 5.25rem auto;
     gap: 0.375rem;
     align-items: start;
+    width: fit-content;
+    max-width: 100%;
     background: #ffffff;
   }
 
   .product-gallery--single {
     display: block;
-    grid-template-columns: 1fr;
+    width: fit-content;
+    max-width: 100%;
   }
 
   .product-gallery__stage {
@@ -5314,8 +5430,14 @@ body.mobile-menu-open .promo-bar {
   }
 
   .product-gallery__thumbs--scrollable {
-    height: min(33.125rem, 95vh, 1200px);
-    max-height: min(33.125rem, 95vh, 1200px);
+    height: min(
+      calc(100vh - var(--header-height) - var(--promo-bar-height, 0px) - 5rem),
+      680px
+    );
+    max-height: min(
+      calc(100vh - var(--header-height) - var(--promo-bar-height, 0px) - 5rem),
+      680px
+    );
   }
 
   .product-gallery__thumbs--static {
@@ -5365,16 +5487,18 @@ body.mobile-menu-open .promo-bar {
   display: flex;
   align-items: flex-start;
   justify-content: center;
-  width: 100%;
+  width: fit-content;
+  max-width: 100%;
   min-height: 0;
   overflow: visible;
 }
 
 .product-gallery__stage-img {
   display: block;
-  width: 100%;
+  width: auto;
+  max-width: 100%;
   height: auto !important;
-  max-height: min(95vh, 1200px);
+  max-height: min(70vh, 640px);
   object-fit: contain !important;
   object-position: center top;
 }
@@ -11022,17 +11146,77 @@ body.checkout-modal-open nav {
 .bestsellers-carousel {
   position: relative;
   container-type: inline-size;
-  overflow: hidden;
+}
+
+.new-arrivals .bestsellers-carousel,
+.bestsellers .bestsellers-carousel {
+  margin-inline: -0.5rem;
+  padding-inline: 0.5rem;
+}
+
+@media (min-width: 640px) {
+  .new-arrivals .bestsellers-carousel,
+  .bestsellers .bestsellers-carousel {
+    margin-inline: -0.75rem;
+    padding-inline: 0.75rem;
+  }
+}
+
+@media (min-width: 1024px) {
+  .new-arrivals .bestsellers-carousel,
+  .bestsellers .bestsellers-carousel {
+    margin-inline: -1rem;
+    padding-inline: 1rem;
+  }
+}
+
+.bestsellers-carousel__fade {
+  position: absolute;
+  top: 0;
+  bottom: 0.25rem;
+  z-index: 1;
+  width: 2.5rem;
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 0.3s ease;
+}
+
+.bestsellers-carousel__fade.is-visible {
+  opacity: 1;
+}
+
+.bestsellers-carousel__fade--left {
+  left: 0;
+  background: linear-gradient(
+    to right,
+    var(--color-page-bg, #faf9f7) 0%,
+    transparent 100%
+  );
+}
+
+.bestsellers-carousel__fade--right {
+  right: 0;
+  background: linear-gradient(
+    to left,
+    var(--color-page-bg, #faf9f7) 0%,
+    transparent 100%
+  );
 }
 
 .bestsellers-carousel__viewport {
   overflow-x: auto;
   overflow-y: hidden;
-  scroll-snap-type: x mandatory;
+  scroll-snap-type: x proximity;
   scroll-behavior: smooth;
+  scroll-padding-inline: 0.5rem;
   -webkit-overflow-scrolling: touch;
   scrollbar-width: none;
   overscroll-behavior-x: contain;
+  cursor: grab;
+}
+
+.bestsellers-carousel__viewport:active {
+  cursor: grabbing;
 }
 
 .bestsellers-carousel__viewport::-webkit-scrollbar {
@@ -11044,11 +11228,13 @@ body.checkout-modal-open nav {
   gap: 0.75rem;
   width: max-content;
   padding-bottom: 0.25rem;
+  padding-inline-end: 0.5rem;
 }
 
 @media (min-width: 768px) {
   .bestsellers-carousel__track {
     gap: 1rem;
+    padding-inline-end: 1rem;
   }
 }
 
@@ -11059,7 +11245,6 @@ body.checkout-modal-open nav {
   min-width: 0;
   overflow: hidden;
   scroll-snap-align: start;
-  scroll-snap-stop: always;
 }
 
 .bestsellers-carousel__slide .product-card {
@@ -11128,6 +11313,12 @@ body.checkout-modal-open nav {
   transform: translateY(-1px);
 }
 
+.bestsellers-carousel__nav.is-hidden {
+  opacity: 0;
+  visibility: hidden;
+  pointer-events: none;
+}
+
 /* ── Promotional Banners ─────────────────────────────────── */
 .promo-banners {
   width: 100%;