2d:I[522016,["/_next/static/immutable/chunks/0x-9rc1bm-510.js","/_next/static/immutable/chunks/0vm4r_y51lca-.js","/_next/static/immutable/chunks/1_05dnk5nlv68.js","/_next/static/immutable/chunks/0zz-qr4ehfg-y.js","/_next/static/immutable/chunks/26w7nc1n_z-ef.js","/_next/static/immutable/chunks/0rg7f484r7pvs.js","/_next/static/immutable/chunks/08zzaq7mzunr6.js","/_next/static/immutable/chunks/2r4xab7oviwp5.js","/_next/static/immutable/chunks/3xlvx278x1e_n.js","/_next/static/immutable/chunks/2ndy6i4i4-y6n.js","/_next/static/immutable/chunks/06y00c7m-_7je.js","/_next/static/immutable/chunks/263-ujry15jpq.js","/_next/static/immutable/chunks/3p6b9_d0h8s6a.js","/_next/static/immutable/chunks/0x4o-jqryzpjy.js","/_next/static/immutable/chunks/35wq0ehn8yo1w.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/40nsmaivjxzl9.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2iimfs9klm8ee.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/1v12dieyr7wjf.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/42c4hv7h_qef7.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2a84g45p9ue92.js","/_next/static/immutable/chunks/174-kkyy6-c5l.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],""] 2e:I[406394,["/_next/static/immutable/chunks/0x-9rc1bm-510.js","/_next/static/immutable/chunks/0vm4r_y51lca-.js","/_next/static/immutable/chunks/1_05dnk5nlv68.js","/_next/static/immutable/chunks/0zz-qr4ehfg-y.js","/_next/static/immutable/chunks/26w7nc1n_z-ef.js","/_next/static/immutable/chunks/0rg7f484r7pvs.js","/_next/static/immutable/chunks/08zzaq7mzunr6.js","/_next/static/immutable/chunks/2r4xab7oviwp5.js","/_next/static/immutable/chunks/3xlvx278x1e_n.js","/_next/static/immutable/chunks/2ndy6i4i4-y6n.js","/_next/static/immutable/chunks/06y00c7m-_7je.js","/_next/static/immutable/chunks/263-ujry15jpq.js","/_next/static/immutable/chunks/3p6b9_d0h8s6a.js","/_next/static/immutable/chunks/0x4o-jqryzpjy.js","/_next/static/immutable/chunks/35wq0ehn8yo1w.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/40nsmaivjxzl9.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2iimfs9klm8ee.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/1v12dieyr7wjf.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/42c4hv7h_qef7.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2a84g45p9ue92.js","/_next/static/immutable/chunks/174-kkyy6-c5l.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],"BlockTabs"] 2f:I[966139,["/_next/static/immutable/chunks/0x-9rc1bm-510.js","/_next/static/immutable/chunks/0vm4r_y51lca-.js","/_next/static/immutable/chunks/1_05dnk5nlv68.js","/_next/static/immutable/chunks/0zz-qr4ehfg-y.js","/_next/static/immutable/chunks/26w7nc1n_z-ef.js","/_next/static/immutable/chunks/0rg7f484r7pvs.js","/_next/static/immutable/chunks/08zzaq7mzunr6.js","/_next/static/immutable/chunks/2r4xab7oviwp5.js","/_next/static/immutable/chunks/3xlvx278x1e_n.js","/_next/static/immutable/chunks/2ndy6i4i4-y6n.js","/_next/static/immutable/chunks/06y00c7m-_7je.js","/_next/static/immutable/chunks/263-ujry15jpq.js","/_next/static/immutable/chunks/3p6b9_d0h8s6a.js","/_next/static/immutable/chunks/0x4o-jqryzpjy.js","/_next/static/immutable/chunks/35wq0ehn8yo1w.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/40nsmaivjxzl9.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2iimfs9klm8ee.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/1v12dieyr7wjf.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/42c4hv7h_qef7.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2a84g45p9ue92.js","/_next/static/immutable/chunks/174-kkyy6-c5l.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],"PreviewFrame"] 30:I[967833,["/_next/static/immutable/chunks/0x-9rc1bm-510.js","/_next/static/immutable/chunks/0vm4r_y51lca-.js","/_next/static/immutable/chunks/1_05dnk5nlv68.js","/_next/static/immutable/chunks/0zz-qr4ehfg-y.js","/_next/static/immutable/chunks/26w7nc1n_z-ef.js","/_next/static/immutable/chunks/0rg7f484r7pvs.js","/_next/static/immutable/chunks/08zzaq7mzunr6.js","/_next/static/immutable/chunks/2r4xab7oviwp5.js","/_next/static/immutable/chunks/3xlvx278x1e_n.js","/_next/static/immutable/chunks/2ndy6i4i4-y6n.js","/_next/static/immutable/chunks/06y00c7m-_7je.js","/_next/static/immutable/chunks/263-ujry15jpq.js","/_next/static/immutable/chunks/3p6b9_d0h8s6a.js","/_next/static/immutable/chunks/0x4o-jqryzpjy.js","/_next/static/immutable/chunks/35wq0ehn8yo1w.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/40nsmaivjxzl9.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2iimfs9klm8ee.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/1v12dieyr7wjf.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/42c4hv7h_qef7.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2a84g45p9ue92.js","/_next/static/immutable/chunks/174-kkyy6-c5l.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],"CodeView"] 31:T34b4,"use client"; import { IconChevronLeft, IconChevronRight, IconPlayerPause, IconPlayerPlay } from "@tabler/icons-react"; import { useCallback, useEffect, useRef, useState, type ReactNode } from "react"; import { Button } from "@/components/ui/button"; import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, type CarouselApi } from "@/components/ui/carousel"; import { Dialog, DialogContent, DialogDescription, DialogTitle } from "@/components/ui/dialog"; import { cn } from "@/lib/utils"; import { useMediaQuery } from "./use-media-query"; export type MediaCarouselItemData = { id: string; src: string; /** Smaller image for the thumbnail rail. Defaults to `src`. */ thumb?: string; alt: string; title?: string; caption?: string; width?: number; height?: number; }; const EASE_OUT = "ease-[cubic-bezier(0.23,1,0.32,1)]"; const FOCUS = "outline-none focus-visible:ring-3 focus-visible:ring-ring/50"; const PER_VIEW: Record<1 | 2 | 3, string> = { 1: "basis-full", 2: "basis-full sm:basis-1/2", 3: "basis-full sm:basis-1/2 lg:basis-1/3", }; const ASPECT = { square: "aspect-square", video: "aspect-video", portrait: "aspect-[4/5]" } as const; export type MediaCarouselProps = { items: MediaCarouselItemData[]; /** Slides visible at once from `sm` up (one on phones). */ slidesPerView?: 1 | 2 | 3; loop?: boolean; /** Advance on a timer. Starts paused under reduced motion. Pauses on hover, focus and while a lightbox is open. */ autoplay?: boolean; autoplayInterval?: number; thumbnails?: boolean; dots?: boolean; arrows?: boolean; /** Clicking a slide opens a Dialog lightbox. */ modal?: boolean; aspect?: keyof typeof ASPECT; /** Current slide index (controlled). */ value?: number; defaultValue?: number; onValueChange?: (index: number) => void; /** Escape hatch to the Embla API of the underlying Kobra carousel. */ setApi?: (api: CarouselApi) => void; className?: string; }; export function MediaCarousel({ items, slidesPerView = 1, loop = false, autoplay = false, autoplayInterval = 4000, thumbnails = false, dots = false, arrows = true, modal = false, aspect = "square", value, defaultValue = 0, onValueChange, setApi: setApiProp, className, }: MediaCarouselProps) { const [api, setApi] = useState(); const [inner, setInner] = useState(defaultValue); const [snaps, setSnaps] = useState(items.length); const [hover, setHover] = useState(false); const [focusIn, setFocusIn] = useState(false); const [userPlay, setUserPlay] = useState(null); const [lightbox, setLightbox] = useState<{ open: boolean; index: number }>({ open: false, index: 0 }); const reduced = useMediaQuery("(prefers-reduced-motion: reduce)"); const index = value ?? inner; const playing = userPlay ?? (autoplay && !reduced); const indexRef = useRef(index); useEffect(() => { indexRef.current = index; }); const handleApi = useCallback( (next: CarouselApi) => { setApi(next); setApiProp?.(next); }, [setApiProp], ); useEffect(() => { if (!api) return; const sync = () => { const i = api.selectedScrollSnap(); setInner(i); setSnaps(api.scrollSnapList().length); if (i !== indexRef.current) onValueChange?.(i); }; sync(); api.on("select", sync).on("reInit", sync); return () => { api.off("select", sync).off("reInit", sync); }; }, [api, onValueChange]); // Controlled value drives the carousel. useEffect(() => { if (api && value !== undefined && api.selectedScrollSnap() !== value) api.scrollTo(value, reduced); }, [api, value, reduced]); // Autoplay: one timer, stopped by every reason to hold still. useEffect(() => { if (!api || !autoplay || !playing || hover || focusIn || lightbox.open) return; const id = window.setInterval(() => { if (document.hidden) return; if (api.canScrollNext()) api.scrollNext(); else api.scrollTo(0); }, autoplayInterval); return () => window.clearInterval(id); }, [api, autoplay, playing, hover, focusIn, lightbox, autoplayInterval]); const go = (i: number) => api?.scrollTo(i); const closeLightbox = () => { if (lightbox.open) api?.scrollTo(lightbox.index, true); setLightbox((l) => ({ ...l, open: false })); }; return (

setHover(true)} onMouseLeave={() => setHover(false)} onFocus={() => setFocusIn(true)} onBlur={(e) => { if (!e.currentTarget.contains(e.relatedTarget as Node | null)) setFocusIn(false); }} className="rounded-xl" > {items.map((item, i) => (

{item.alt} — {item.title ? {item.title} : null} {item.caption ? {item.caption} : null}

))} {arrows ? ( <> ) : null} {autoplay ? ( ) : null} {dots || thumbnails ? (

{dots ? : null} {thumbnails ? : null}

) : null} {modal ? ( setLightbox({ open: true, index })} onClose={closeLightbox} /> ) : null}

); } /** 24px hit areas around 6px dots; the active dot is the wider pill. */ export function MediaCarouselDots({ count, index, onSelect, className }: { count: number; index: number; onSelect: (index: number) => void; className?: string }) { if (count < 2) return null; return (

{Array.from({ length: count }, (_, i) => ( ))}

); } /** A rail of small previews that scrolls itself to keep the active one in view. */ export function MediaCarouselThumbs({ items, index, onSelect, className, }: { items: MediaCarouselItemData[]; index: number; onSelect: (index: number) => void; className?: string; }) { const rail = useRef(null); useEffect(() => { const el = rail.current?.children[index] as HTMLElement | undefined; const box = rail.current; if (!el || !box) return; const target = el.offsetLeft - (box.clientWidth - el.clientWidth) / 2; box.scrollTo({ left: target, behavior: window.matchMedia("(prefers-reduced-motion: reduce)").matches ? "auto" : "smooth" }); }, [index]); return (

{items.map((item, i) => ( ))}

); } function MediaLightbox({ items, open, index, onIndexChange, onClose, }: { items: MediaCarouselItemData[]; open: boolean; index: number; onIndexChange: (index: number) => void; onClose: () => void; }) { const item = items[index]; const step = (d: number) => onIndexChange((index + d + items.length) % items.length); return ( ); } function LightboxArrow({ dir, onClick }: { dir: -1 | 1; onClick: () => void }): ReactNode { return ( ); } 32:T8c1,"use client"; import { useState } from "react"; import { Button } from "@/components/ui/button"; import type { CarouselApi } from "@/components/ui/carousel"; import { DemoPage, DemoSection } from "../../_shared/variant-frame"; import { mediaItems } from "../_fixtures-c"; import { MediaCarousel } from "./media-carousel"; export function MediaCarouselDemo() { const [api, setApi] = useState(); const [index, setIndex] = useState(0); return (

Slide {index + 1} of 6

); } export default MediaCarouselDemo; 33:T679,import type { BlockMeta } from "../../../lib/block-meta"; export const mediaCarouselMeta: BlockMeta = { slug: "media-carousel", title: "Media carousel", description: "Embla carousel with thumbnails, dots, several slides per view, loop, accessible autoplay, a Dialog lightbox and an API escape hatch.", group: "data", kobraDeps: ["button", "carousel", "dialog"], files: ["blocks/data/media-carousel/media-carousel.tsx", "blocks/data/media-carousel/use-media-query.ts"], props: [ { name: "items", type: "MediaCarouselItemData[]", description: "Slides: src, alt, optional thumb, title, caption." }, { name: "slidesPerView", type: "1 | 2 | 3", default: "1", description: "Visible slides from sm up." }, { name: "loop", type: "boolean", default: "false", description: "Infinite loop." }, { name: "autoplay / autoplayInterval", type: "boolean / number", default: "false / 4000", description: "Timer advance with a visible play and pause button. Starts paused under reduced motion." }, { name: "thumbnails / dots / arrows", type: "boolean", default: "false / false / true", description: "Navigation affordances." }, { name: "modal", type: "boolean", default: "false", description: "Open the Kobra Dialog as a lightbox on click." }, { name: "aspect", type: "'square' | 'video' | 'portrait'", default: "'square'", description: "Slide shape." }, { name: "value / defaultValue / onValueChange", type: "number", description: "Current slide index." }, { name: "setApi", type: "(api: CarouselApi) => void", description: "Escape hatch to Embla." }, ], tags: ["carousel", "gallery", "lightbox"], status: "ready", }; 24:["$","article",null,{"className":"grid gap-6","children":[["$","header",null,{"className":"grid gap-3","children":[["$","nav",null,{"aria-label":"breadcrumb","data-slot":"breadcrumb","className":"","children":["$","ol",null,{"data-slot":"breadcrumb-list","className":"flex flex-wrap items-center gap-1.5 text-sm wrap-break-word text-muted-foreground","children":[["$","li",null,{"data-slot":"breadcrumb-item","className":"inline-flex items-center gap-1","children":["$","$L2d",null,{"href":"/","data-slot":"breadcrumb-link","className":"transition-colors hover:text-foreground","children":"Kobra Commerce"}]}],["$","li",null,{"data-slot":"breadcrumb-separator","role":"presentation","aria-hidden":"true","className":"[&>svg]:size-3.5","children":["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"tabler-icon tabler-icon-chevron-right rtl:-scale-x-100","children":["$undefined",["$","path","svg-0",{"d":"M9 6l6 6l-6 6"}],"$undefined"]}]}],["$","li",null,{"data-slot":"breadcrumb-item","className":"inline-flex items-center gap-1","children":["$","$L2d",null,{"href":"/#data","data-slot":"breadcrumb-link","className":"transition-colors hover:text-foreground","children":"Data display"}]}],["$","li",null,{"data-slot":"breadcrumb-separator","role":"presentation","aria-hidden":"true","className":"[&>svg]:size-3.5","children":["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"tabler-icon tabler-icon-chevron-right rtl:-scale-x-100","children":["$undefined",["$","path","svg-0",{"d":"M9 6l6 6l-6 6"}],"$undefined"]}]}],["$","li",null,{"data-slot":"breadcrumb-item","className":"inline-flex items-center gap-1","children":["$","span",null,{"data-slot":"breadcrumb-page","role":"link","aria-disabled":"true","aria-current":"page","className":"font-normal text-foreground","children":"Media carousel"}]}]]}]}],["$","div",null,{"className":"flex flex-wrap items-center gap-3","children":[["$","h1",null,{"className":"text-2xl font-bold","children":"Media carousel"}],["$","span",null,{"data-slot":"badge","data-variant":"green","className":"group/badge t-label relative isolate inline-flex w-fit shrink-0 items-center justify-center gap-1 rounded-full border border-transparent py-0.5 font-medium [--surface-calm:0.5] whitespace-nowrap transition-ring before:pointer-events-none before:absolute before:inset-0 before:-z-10 before:rounded-[inherit] before:border before:border-transparent before:transition-[scale,background-color,border-color] before:duration-150 before:ease-out focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 motion-reduce:before:transition-none has-data-[icon=inline-end]:pe-1.5 has-data-[icon=inline-start]:ps-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [a,button]:active:before:scale-[0.97] motion-reduce:[a,button]:active:before:scale-100 [&>svg]:pointer-events-none [&>svg]:size-3! t-surface t-surface-success text-[var(--badge-green-fg)] h-5 px-1.5 text-xs","children":"Ready"}]]}],["$","p",null,{"className":"max-w-[65ch] text-sm text-muted-foreground","children":"Embla carousel with thumbnails, dots, several slides per view, loop, accessible autoplay, a Dialog lightbox and an API escape hatch."}]]}],["$","$L2e",null,{"preview":["$","$L2f",null,{"slug":"media-carousel","group":"data","minHeight":640,"fixedHeight":"$undefined"}],"code":["$","$L30",null,{"files":[{"path":"blocks/data/media-carousel/media-carousel.tsx","code":"$31"},{"path":"blocks/data/media-carousel/use-media-query.ts","code":"\"use client\";\n\nimport { useSyncExternalStore } from \"react\";\n\n/** SSR-safe matchMedia. `serverValue` is what the server and the hydration pass see. */\nexport function useMediaQuery(query: string, serverValue = false): boolean {\n return useSyncExternalStore(\n (notify) => {\n const mq = window.matchMedia(query);\n mq.addEventListener(\"change\", notify);\n return () => mq.removeEventListener(\"change\", notify);\n },\n () => window.matchMedia(query).matches,\n () => serverValue,\n );\n}\n"},{"path":"blocks/data/media-carousel/demo.tsx","code":"$32"},{"path":"blocks/data/media-carousel/meta.ts","code":"$33"}]}],"props":"$L34"}],"$L35"]}]