4f:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 50:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 51:T552e,"use client" import { Children, createContext, isValidElement, use, useEffect, useEffectEvent, useId, useLayoutEffect, useRef, useState, useSyncExternalStore, } from "react" import type { ComponentProps, KeyboardEvent, RefObject } from "react" import { animate, motion, useInView, useMotionValue, useMotionValueEvent, } from "motion/react" import type { AnimationPlaybackControls, Transition } from "motion/react" import { cn } from "@/lib/utils" // More than anyone can fling past before the wrap runs, so the loop's seam // never scrolls into view. const CLONE_COUNT = 4 // Debounce for "scroll settled", and how long scroll events after our own // writes are ignored. const SETTLE_DELAY = 150 // Spring visualDuration (s), longer for long jumps so they don't whip past. const SCROLL_BASE_DURATION = 0.5 const SCROLL_EXTRA_CARD_DURATION = 0.1 const SCROLL_MAX_DURATION = 0.9 const REDUCED_MOTION_QUERY = "(prefers-reduced-motion: reduce)" function subscribeReducedMotion(callback: () => void) { const mql = window.matchMedia(REDUCED_MOTION_QUERY) mql.addEventListener("change", callback) return () => mql.removeEventListener("change", callback) } function usePrefersReducedMotion() { return useSyncExternalStore( subscribeReducedMotion, () => window.matchMedia(REDUCED_MOTION_QUERY).matches, () => false ) } const subscribeNothing = () => () => {} function useIsHydrated() { return useSyncExternalStore( subscribeNothing, () => true, () => false ) } function getSlides(viewport: HTMLElement) { return Array.from(viewport.firstElementChild?.children ?? []) as HTMLElement[] } function getSnapLeft(viewport: HTMLElement, slide: HTMLElement) { if (getComputedStyle(slide).scrollSnapAlign.startsWith("start")) { const padding = parseFloat( getComputedStyle(viewport).scrollPaddingInlineStart ) return slide.offsetLeft - (padding || 0) } return slide.offsetLeft - (viewport.clientWidth - slide.offsetWidth) / 2 } function getNearestSlide(viewport: HTMLElement) { let nearest: HTMLElement | undefined let minDistance = Infinity for (const slide of getSlides(viewport)) { const distance = Math.abs( getSnapLeft(viewport, slide) - viewport.scrollLeft ) if (distance < minDistance) { minDistance = distance nearest = slide } } return nearest } function getRealSlide(viewport: HTMLElement, index: number) { return getSlides(viewport).find( (slide) => !slide.hasAttribute("data-clone") && slide.dataset.index === String(index) ) } type AppleCarouselContextValue = { id: string index: number isPlaying: boolean prefersReducedMotion: boolean viewportRef: RefObject progressFillRef: RefObject goTo: (index: number) => void play: () => void pause: () => void } const AppleCarouselContext = createContext( null ) function useAppleCarousel() { const context = use(AppleCarouselContext) if (!context) { throw new Error("AppleCarousel parts must be used within AppleCarouselRoot") } return context } type AppleCarouselItemState = { /** Position of the item among the items passed to `AppleCarouselContent`. */ index: number /** Whether the item is the one being shown. */ isCurrent: boolean /** Whether this copy is a clone rendered to keep the loop seamless. */ isClone: boolean } const AppleCarouselItemContext = createContext | null>(null) /** * State of the enclosing item. Content also renders in loop clones, so check * `isClone` before starting media, fetching, or tracking impressions. */ function useAppleCarouselItem(): AppleCarouselItemState { const { index: currentIndex } = useAppleCarousel() const item = use(AppleCarouselItemContext) if (!item) { throw new Error( "useAppleCarouselItem must be used inside an item of AppleCarouselContent" ) } return { ...item, isCurrent: item.index === currentIndex } } const AppleCarouselTabContext = createContext<{ index: number count: number } | null>(null) // `auto` holds back under reduced motion. Pressing play is an explicit opt-in, // so `playing` ignores that preference and cards jump instead of sliding. type Playback = "auto" | "playing" | "paused" type AppleCarouselRootProps = ComponentProps<"div"> & { /** * Time each card stays up during autoplay (ms). * @defaultValue 5000 */ duration?: number } function AppleCarouselRoot({ duration = 5000, className, ...props }: AppleCarouselRootProps) { const id = useId() const viewportRef = useRef(null) const progressFillRef = useRef(null) const [index, setIndex] = useState(0) const [playback, setPlayback] = useState("auto") const isInView = useInView(viewportRef, { amount: 0.25 }) const prefersReducedMotion = usePrefersReducedMotion() const isPlaying = isInView && (playback === "playing" || (playback === "auto" && !prefersReducedMotion)) const ignoreScrollUntilRef = useRef(0) const scrollAnimationRef = useRef(null) const progressAnimationRef = useRef(null) const scrollLeft = useMotionValue(0) const play = () => setPlayback("playing") const pause = () => setPlayback("paused") const isOwnScroll = () => scrollAnimationRef.current !== null || performance.now() < ignoreScrollUntilRef.current const writeScrollLeft = (value: number) => { const viewport = viewportRef.current if (!viewport) return ignoreScrollUntilRef.current = performance.now() + SETTLE_DELAY viewport.scrollLeft = value } useMotionValueEvent(scrollLeft, "change", writeScrollLeft) const setScrollAnimation = (controls: AnimationPlaybackControls | null) => { scrollAnimationRef.current = controls // Mandatory snapping would pull every intermediate scrollLeft back. viewportRef.current?.toggleAttribute("data-animating", controls !== null) } const stopScrollAnimation = () => { scrollAnimationRef.current?.stop() setScrollAnimation(null) } const syncFromScroll = () => { // An animation already committed its destination, so the cards it passes // through must not flash their dots. if (scrollAnimationRef.current) return const viewport = viewportRef.current const slide = viewport && getNearestSlide(viewport) if (slide) setIndex(Number(slide.dataset.index)) } // Clone and real card look identical, so the jump is invisible. const wrapFromClone = () => { const viewport = viewportRef.current const slide = viewport && getNearestSlide(viewport) if (!viewport || !slide?.hasAttribute("data-clone")) return const realSlide = getRealSlide(viewport, Number(slide.dataset.index)) if (realSlide) writeScrollLeft(getSnapLeft(viewport, realSlide)) } const scrollToSlide = (slide: HTMLElement) => { const viewport = viewportRef.current if (!viewport) return setIndex(Number(slide.dataset.index)) const to = getSnapLeft(viewport, slide) const distance = Math.abs(to - viewport.scrollLeft) if (prefersReducedMotion || distance < 1) { stopScrollAnimation() writeScrollLeft(to) wrapFromClone() return } // A running spring keeps its velocity when retargeted; only an idle one // needs to pick up where the user left the scroll position. if (!scrollAnimationRef.current) scrollLeft.jump(viewport.scrollLeft) const cardsToTravel = Math.max(distance / slide.offsetWidth, 1) const controls = animate(scrollLeft, to, { type: "spring", bounce: 0, visualDuration: Math.min( SCROLL_BASE_DURATION + (cardsToTravel - 1) * SCROLL_EXTRA_CARD_DURATION, SCROLL_MAX_DURATION ), onComplete: () => { if (scrollAnimationRef.current !== controls) return setScrollAnimation(null) wrapFromClone() }, }) setScrollAnimation(controls) } const goTo = (next: number) => { const viewport = viewportRef.current const slide = viewport && getRealSlide(viewport, next) if (slide) scrollToSlide(slide) } const goNext = () => { const viewport = viewportRef.current const next = viewport && getNearestSlide(viewport)?.nextElementSibling if (next instanceof HTMLElement) scrollToSlide(next) } const onViewportScroll = useEffectEvent(() => { if (isPlaying && !isOwnScroll()) pause() syncFromScroll() }) const onViewportSettled = useEffectEvent(() => { if (!isOwnScroll()) wrapFromClone() }) const onViewportInput = useEffectEvent(() => { stopScrollAnimation() pause() }) useEffect(() => { const viewport = viewportRef.current if (!viewport) return let frame: number | null = null let settleTimer: ReturnType | undefined const handleScroll = () => { if (frame === null) { frame = requestAnimationFrame(() => { frame = null onViewportScroll() }) } // `scrollend` is not available everywhere, so a debounce backs it up. // Whichever fires first wraps; the other finds a real card and no-ops. clearTimeout(settleTimer) settleTimer = setTimeout(onViewportSettled, SETTLE_DELAY) } const handleWheel = (event: WheelEvent) => { // Vertical wheels scroll the page, not the gallery. if (Math.abs(event.deltaX) > Math.abs(event.deltaY)) onViewportInput() } viewport.addEventListener("scroll", handleScroll, { passive: true }) viewport.addEventListener("scrollend", onViewportSettled) viewport.addEventListener("pointerdown", onViewportInput) viewport.addEventListener("wheel", handleWheel, { passive: true }) return () => { viewport.removeEventListener("scroll", handleScroll) viewport.removeEventListener("scrollend", onViewportSettled) viewport.removeEventListener("pointerdown", onViewportInput) viewport.removeEventListener("wheel", handleWheel) if (frame !== null) cancelAnimationFrame(frame) clearTimeout(settleTimer) } }, []) const onProgressFinish = useEffectEvent(goNext) // The progress fill doubles as the autoplay clock: composited, pauses in // place, no per-frame JS. Without a tab list it still runs, targeting nothing. useEffect(() => { const animation = new Animation( new KeyframeEffect( progressFillRef.current, [{ scale: "0 1" }, { scale: "1 1" }], { duration, fill: "forwards" } ) ) animation.onfinish = onProgressFinish progressAnimationRef.current = animation return () => { animation.cancel() progressAnimationRef.current = null } }, [index, duration]) useEffect(() => { const animation = progressAnimationRef.current if (!animation) return if (isPlaying) animation.play() else animation.pause() }, [index, duration, isPlaying]) return (

) } function AppleCarouselContent({ className, children, ...props }: ComponentProps<"div">) { const { index, viewportRef } = useAppleCarousel() const isHydrated = useIsHydrated() const items = Children.toArray(children).filter(isValidElement) const count = items.length // Clones wait for hydration: without them the first card already sits at // scrollLeft 0, so the server markup renders the right card with no script. const cloneCount = isHydrated && count > 1 ? Math.min(CLONE_COUNT, count) : 0 const alignToCurrent = useEffectEvent(() => { const viewport = viewportRef.current const slide = viewport && getRealSlide(viewport, index) if (viewport && slide) viewport.scrollLeft = getSnapLeft(viewport, slide) }) useLayoutEffect(() => { if (cloneCount > 0) alignToCurrent() }, [cloneCount]) return (

{item}

) } function AppleCarouselItem({ className, ...props }: ComponentProps<"li">) { const { id } = useAppleCarousel() const { index, isCurrent, isClone } = useAppleCarouselItem() return (

) } type AppleCarouselControlsProps = ComponentProps<"div"> & { /** * Size of the tab list and play button inside. * @defaultValue "default" */ size?: "default" | "sm" } function AppleCarouselControls({ size = "default", className, ...props }: AppleCarouselControlsProps) { return (

) } function AppleCarouselTabList({ className, children, ...props }: ComponentProps<"div">) { const tabs = Children.toArray(children).filter(isValidElement) return (

{tabs.map((tab, index) => ( {tab} ))}

) } function AppleCarouselTab({ className, children, onClick, onFocus, onKeyDown, ...props }: ComponentProps<"button">) { const { id, index: currentIndex, isPlaying, progressFillRef, goTo, pause, } = useAppleCarousel() const tab = use(AppleCarouselTabContext) if (!tab) { throw new Error( "AppleCarouselTab must be a direct child of AppleCarouselTabList" ) } const { index, count } = tab const isCurrent = index === currentIndex const handleKeyDown = (event: KeyboardEvent) => { onKeyDown?.(event) if (event.defaultPrevented) return let next: number switch (event.key) { case "ArrowLeft": next = (index - 1 + count) % count break case "ArrowRight": next = (index + 1) % count break case "Home": next = 0 break case "End": next = count - 1 break default: return } event.preventDefault() goTo(next) event.currentTarget .closest('[role="tablist"]') ?.querySelectorAll('[role="tab"]') [next]?.focus() } return ( ) } // Points sit half a stroke inside the outline, so the round joins soften the // corners without growing the icon. Changing the width means re-insetting them. const ICON_STROKE_WIDTH = 2.5 // Matching M L L L Z commands let motion morph `d`: the play triangle is split // at x = 13, one half per pause bar. const PAUSE_ICON = { left: "M5.5 5.5L8.5 5.5L8.5 18.5L5.5 18.5Z", right: "M15.5 5.5L18.5 5.5L18.5 18.5L15.5 18.5Z", } as const const PLAY_ICON = { left: "M7.5 5.87L13 9.08L13 14.92L7.5 18.13Z", right: "M13 9.08L18.01 12L18.01 12L13 14.92Z", } as const const ICON_TRANSITION: Transition = { type: "spring", visualDuration: 0.3, bounce: 0, } const INSTANT_TRANSITION: Transition = { duration: 0 } function AppleCarouselPlayButton({ className, onClick, ...props }: ComponentProps<"button">) { const { isPlaying, prefersReducedMotion, play, pause } = useAppleCarousel() // The icon names the action, so a playing gallery shows pause. const icon = isPlaying ? PAUSE_ICON : PLAY_ICON const transition = prefersReducedMotion ? INSTANT_TRANSITION : ICON_TRANSITION return ( ) } export { AppleCarouselContent, AppleCarouselControls, AppleCarouselItem, AppleCarouselPlayButton, AppleCarouselRoot, AppleCarouselTab, AppleCarouselTabList, useAppleCarouselItem, } export type { AppleCarouselControlsProps, AppleCarouselItemState, AppleCarouselRootProps, } 4e:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"motion"}]]}]}]]}],["$","$L4f",null,{"namespace":"@ncdai","registryDependencies":[]}]]}],null]}],["$","$L50",null,{"files":[{"path":"src/registry/components/apple-carousel/apple-carousel.tsx","content":"$51","type":"registry:component","target":"@components/apple-carousel.tsx"}],"className":"h-[70svh] min-h-80"}]]}]