50: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"] 51: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"] 52:T1bff,.carousel-container { position: relative; display: flex; flex-direction: column; align-items: center; gap: 20px; max-width: 100%; box-sizing: border-box; outline: none; -webkit-tap-highlight-color: transparent; } .carousel-container.has-frame { gap: 16px; } .carousel-stage { position: relative; display: flex; flex-direction: column; align-items: center; align-self: stretch; gap: 12px; box-sizing: border-box; border-radius: var(--carousel-radius); } .carousel-container:focus-visible .carousel-stage { outline: 2px solid var(--carousel-ink); outline-offset: 4px; } .carousel-container.has-frame .carousel-stage { padding: 10px; border-radius: calc(var(--carousel-radius) + 10px); background: var(--carousel-frame); box-shadow: var(--carousel-frame-shadow); overflow: hidden; -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6); } .carousel-container.has-frame.is-round .carousel-stage { border-radius: 50%; } .carousel-frame-rim { position: absolute; inset: 0; z-index: 30; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--carousel-frame-edge), inset 0 1px 0 var(--carousel-frame-highlight); pointer-events: none; } .carousel-viewport { position: relative; align-self: stretch; touch-action: pan-y; user-select: none; -webkit-user-select: none; } .carousel-viewport[data-draggable='true'] { cursor: grab; } .carousel-viewport[data-dragging='true'] { cursor: grabbing; } .carousel-slide { position: absolute; top: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; will-change: transform, opacity; } .carousel-slide:not([data-current]) { cursor: pointer; } .carousel-card { position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 16px; width: 100%; height: 100%; padding: calc(20px * var(--carousel-scale, 1)); box-sizing: border-box; border-radius: var(--carousel-radius); background: var(--carousel-tile); box-shadow: var(--carousel-tile-shadow); color: var(--carousel-ink); overflow: hidden; transition: filter 0.25s ease; } .carousel-card-rim { position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--carousel-tile-edge), inset 0 1px 0 var(--carousel-tile-highlight); pointer-events: none; } .carousel-card.is-custom { display: block; padding: 0; } .carousel-card.is-round { align-items: center; justify-content: center; gap: 14px; padding: 14%; text-align: center; } .carousel-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; } .carousel-scrim { position: absolute; inset: 0; opacity: var(--carousel-focus, 1); pointer-events: none; background: linear-gradient( to top, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0.6) 8%, rgba(0, 0, 0, 0.54) 17%, rgba(0, 0, 0, 0.45) 26%, rgba(0, 0, 0, 0.34) 36%, rgba(0, 0, 0, 0.22) 46%, rgba(0, 0, 0, 0.11) 56%, rgba(0, 0, 0, 0.04) 64%, rgba(0, 0, 0, 0) 72% ); } .carousel-card.is-round .carousel-scrim { background: rgba(0, 0, 0, 0.3); } .carousel-icon { position: relative; display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--carousel-badge); color: var(--carousel-ink); } .carousel-card.has-image .carousel-icon { background: rgba(255, 255, 255, 0.18); color: #ffffff; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .carousel-icon svg { width: 16px; height: 16px; } .carousel-text { position: relative; margin-top: auto; opacity: var(--carousel-focus, 1); } .carousel-card.is-round .carousel-text { margin-top: 0; } .carousel-title { font-size: calc(18px * var(--carousel-scale, 1)); font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; } .carousel-description { margin: 4px 0 0; font-size: calc(14px * var(--carousel-scale, 1)); line-height: 1.45; color: var(--carousel-muted); } .carousel-card.has-image .carousel-title { color: #ffffff; } .carousel-card.has-image .carousel-description { color: rgba(255, 255, 255, 0.78); } .carousel-shade { position: absolute; inset: 0; border-radius: var(--carousel-radius); background: #000000; pointer-events: none; } .carousel-controls { display: flex; align-items: center; justify-content: center; gap: 12px; max-width: 100%; } .carousel-arrow { display: grid; place-items: center; flex: none; width: 32px; height: 32px; padding: 0; border: none; border-radius: 50%; background: var(--carousel-tile); box-shadow: inset 0 0 0 1px var(--carousel-tile-edge), inset 0 1px 0 var(--carousel-tile-highlight), var(--carousel-tile-shadow); color: var(--carousel-ink); cursor: pointer; transition: opacity 0.2s ease, filter 0.2s ease, transform 0.2s ease; } .carousel-arrow:disabled { opacity: 0.35; cursor: default; } .carousel-arrow:not(:disabled):active { filter: var(--carousel-press); transform: scale(0.92); transition-duration: 0s; } .carousel-arrow:focus-visible, .carousel-dot:focus-visible, .carousel-bar:focus-visible { outline: 2px solid var(--carousel-ink); outline-offset: 2px; } .carousel-dots { display: flex; align-items: center; } .carousel-dot { display: grid; place-items: center; width: 20px; height: 20px; padding: 0; border: none; border-radius: 50%; background: none; cursor: pointer; } .carousel-dot-mark { width: 8px; height: 8px; border-radius: 50%; background: var(--carousel-faint); transition: background-color 0.2s ease, transform 0.2s ease; } .carousel-dot.is-active .carousel-dot-mark { background: var(--carousel-ink); transform: scale(1.2); } .carousel-bars { display: flex; flex: 1; gap: 6px; min-width: 0; } .carousel-bar { display: flex; align-items: center; flex: 1; height: 20px; padding: 0; border: none; background: none; cursor: pointer; } .carousel-bar-track { position: relative; width: 100%; height: 3px; border-radius: 3px; background: var(--carousel-faint); overflow: hidden; transition: background-color 0.2s ease; } .carousel-bar-fill { position: absolute; inset: 0; background: var(--carousel-ink); transform-origin: left center; } .carousel-counter { display: flex; align-items: baseline; gap: 6px; overflow: hidden; font-size: 13px; font-variant-numeric: tabular-nums; color: var(--carousel-muted); } .carousel-counter-current { display: inline-block; color: var(--carousel-ink); } @media (hover: hover) { .carousel-slide:hover .carousel-card { filter: var(--carousel-hover); } .carousel-arrow:not(:disabled):hover { filter: var(--carousel-hover); } .carousel-arrow:not(:disabled):hover:active { filter: var(--carousel-press); } .carousel-dot:not(.is-active):hover .carousel-dot-mark, .carousel-bar:hover .carousel-bar-track { background: var(--carousel-soft); } } 53:T6b25,'use client'; import { isValidElement, useEffect, useLayoutEffect, useRef, useState } from 'react'; import { HugeiconsIcon } from '@hugeicons/react'; import { ArrowLeft01Icon, ArrowRight01Icon, CommandIcon, Drag04Icon, Image01Icon, Layers01Icon, Timer02Icon } from '@hugeicons/core-free-icons'; import './Carousel.css'; const useIsomorphicLayoutEffect = typeof window === 'undefined' ? useEffect : useLayoutEffect; const DEFAULT_ITEMS = [ { id: 1, title: 'Swipe with momentum', description: 'Fling the cards and they glide into place.', icon: }, { id: 2, title: 'Autoplay with a timer', description: 'The indicator fills up so people know what comes next.', icon: }, { id: 3, title: 'Five transitions', description: 'Tilt, slide, scale, fade or turn the cards like a cube.', icon: }, { id: 4, title: 'Keyboard friendly', description: 'Arrow keys, Home and End move between the cards.', icon: }, { id: 5, title: 'Bring any content', description: 'Pass text, images or your own components as cards.', icon: } ]; const THEMES = { dark: { '--carousel-frame': 'rgba(38, 35, 46, 0.66)', '--carousel-frame-edge': 'rgba(255, 255, 255, 0.08)', '--carousel-frame-highlight': 'rgba(255, 255, 255, 0.07)', '--carousel-frame-shadow': '0 22px 44px -20px rgba(0, 0, 0, 0.8), 0 6px 16px -8px rgba(0, 0, 0, 0.5)', '--carousel-tile': 'linear-gradient(180deg, #3a3644 0%, #27242f 100%)', '--carousel-tile-edge': 'rgba(255, 255, 255, 0.07)', '--carousel-tile-highlight': 'rgba(255, 255, 255, 0.12)', '--carousel-tile-shadow': '0 4px 10px -4px rgba(0, 0, 0, 0.7)', '--carousel-ink': '#f4f4f5', '--carousel-muted': 'rgba(244, 244, 245, 0.6)', '--carousel-faint': 'rgba(255, 255, 255, 0.22)', '--carousel-soft': 'rgba(255, 255, 255, 0.42)', '--carousel-badge': 'rgba(255, 255, 255, 0.08)', '--carousel-hover': 'brightness(1.12)', '--carousel-press': 'brightness(0.8)' }, light: { '--carousel-frame': 'rgba(240, 240, 243, 0.8)', '--carousel-frame-edge': 'rgba(24, 24, 27, 0.07)', '--carousel-frame-highlight': 'rgba(255, 255, 255, 0.95)', '--carousel-frame-shadow': '0 22px 44px -22px rgba(24, 24, 27, 0.3), 0 6px 16px -10px rgba(24, 24, 27, 0.16)', '--carousel-tile': 'linear-gradient(180deg, #ffffff 0%, #f6f6f8 100%)', '--carousel-tile-edge': 'rgba(24, 24, 27, 0.08)', '--carousel-tile-highlight': 'rgba(255, 255, 255, 1)', '--carousel-tile-shadow': '0 4px 10px -5px rgba(24, 24, 27, 0.25)', '--carousel-ink': '#27272a', '--carousel-muted': 'rgba(39, 39, 42, 0.6)', '--carousel-faint': 'rgba(24, 24, 27, 0.16)', '--carousel-soft': 'rgba(24, 24, 27, 0.34)', '--carousel-badge': 'rgba(24, 24, 27, 0.05)', '--carousel-hover': 'brightness(0.97)', '--carousel-press': 'brightness(0.92)' } }; const EFFECTS = ['tilt', 'slide', 'scale', 'fade', 'cube']; const STIFFNESS = 150; const DAMPING = 24; const clamp = (value, min, max) => Math.min(max, Math.max(min, value)); const wrap = (value, count) => ((value % count) + count) % count; const nearest = (offset, count) => wrap(offset + count / 2, count) - count / 2; const smootherstep = t => t * t * t * (t * (t * 6 - 15) + 10); const edgeMask = size => { const stops = [0, 0.15, 0.3, 0.45, 0.6, 0.75, 0.9, 1].map(t => [smootherstep(t).toFixed(3), (t * size).toFixed(1)]); const left = stops.map(([alpha, x]) => `rgba(0, 0, 0, ${alpha}) ${x}px`); const right = [...stops].reverse().map(([alpha, x]) => `rgba(0, 0, 0, ${alpha}) calc(100% - ${x}px)`); return `linear-gradient(to right, ${[...left, ...right].join(', ')})`; }; const band = (value, max) => { if (value < 0) return -0.3 * (1 - Math.exp(value / 0.55)); if (value > max) return max + 0.3 * (1 - Math.exp((max - value) / 0.55)); return value; }; const pose = (index, position, s) => { const offset = s.loop ? nearest(index - position, s.count) : index - position; const distance = Math.abs(offset); const near = Math.min(distance, 1); const result = { transform: 'none', opacity: 1, visible: true, layer: 10 - Math.min(9, Math.round(distance * 2)), shade: 0, focus: 1 }; if (s.mode === 'fade') { const half = Math.min(1, near * 2); result.visible = distance < 1; result.opacity = 1 - near * near * (3 - 2 * near); result.transform = `scale(${1 - 0.04 * near})`; result.focus = 1 - half * half * (3 - 2 * half); return result; } if (s.mode === 'cube') { const half = s.cardWidth / 2; const turn = Math.sin(Math.PI * (position - Math.floor(position))); result.visible = distance < 1; result.transform = `scale(${1 - 0.12 * turn}) translateZ(${-half}px) rotateY(${clamp(offset, -1, 1) * 90}deg) translateZ(${half}px)`; result.shade = near * s.shade; return result; } let x = offset * s.span; result.visible = x > -(s.inset + s.cardWidth + 2) && x < s.width + s.bleed * 2 - s.inset + 2; result.focus = 1 - near * near * (3 - 2 * near); if (s.mode === 'tilt') { result.visible = result.visible && distance < 1; result.transform = `translate3d(${x}px, 0, 0) rotateY(${-clamp(offset, -1, 1) * 90}deg)`; } else if (s.mode === 'scale') { x -= Math.sign(offset) * near * s.cardWidth * 0.06; result.transform = `translate3d(${x}px, 0, 0) scale(${1 - 0.12 * near})`; result.opacity = 1 - 0.5 * near; } else { result.transform = `translate3d(${x}px, 0, 0)`; } return result; }; const keyOf = (item, index) => { if (isValidElement(item)) return item.key ?? index; if (typeof item === 'object' && item?.id != null) return item.id; return index; }; const Chevron = ({ flip }) => ( ); const Card = ({ item, round, compact }) => { if (isValidElement(item)) { return (

{item}

); } const { image, alt = '', icon: mark, title, description } = typeof item === 'string' ? { image: item } : (item ?? {}); const text = Boolean(title || description); return (

{image &&

} {image && text && } {mark && {mark}} {text && (

{title &&

{title}

} {description && !compact &&

{description}

}

)}

); }; export default function Carousel({ items = DEFAULT_ITEMS, baseWidth = 300, aspectRatio = 1.25, peek = 0, gap = 16, radius = 12, frame = true, effect = 'tilt', indicator = 'dots', arrows = false, autoplay = false, autoplayDelay = 3000, pauseOnHover = false, loop = false, draggable = true, round = false, initialIndex = 0, theme = 'dark', onChange, className = '', style }) { const count = items.length; const mode = EFFECTS.includes(effect) ? effect : 'tilt'; const stacked = mode === 'fade' || mode === 'cube'; const rootRef = useRef(null); const stageRef = useRef(null); const viewportRef = useRef(null); const slideRefs = useRef([]); const shadeRefs = useRef([]); const fillRefs = useRef([]); const counterRef = useRef(null); const engineRef = useRef(null); const onChangeRef = useRef(onChange); onChangeRef.current = onChange; const ratio = clamp(aspectRatio, 0.3, 4); const maxWidth = typeof baseWidth === 'number' && round && frame ? 20 + (baseWidth - 20) * Math.min(1, 1 / ratio) : baseWidth; const [width, setWidth] = useState(typeof maxWidth === 'number' ? maxWidth - (frame ? 20 : 0) : 300); const [active, setActive] = useState(() => clamp(Math.round(initialIndex), 0, Math.max(0, count - 1))); const startRef = useRef(active); const reportedRef = useRef(active); const previousRef = useRef(active); const side = stacked || (round && frame) ? 0 : clamp(peek, 0, width * 0.2); const slot = Math.max(40, width - side * 2); const diameter = frame ? slot : Math.min(slot, slot / ratio); const cardWidth = round ? diameter : slot; const cardHeight = round ? diameter : slot / ratio; const clipped = !frame && !stacked; const bleed = clipped ? Math.round(Math.min(48, cardWidth * 0.12)) : 0; const inset = bleed + (width - cardWidth) / 2; const settings = { count, mode, width, bleed, inset, cardWidth, span: cardWidth + Math.max(0, gap), loop: loop && count > 1, autoplay: autoplay && count > 1, autoplayDelay: Math.max(600, autoplayDelay), pauseOnHover, draggable: draggable && count > 1, bars: indicator === 'bars', shade: theme === 'light' ? 0.3 : 0.6 }; const settingsRef = useRef(settings); settingsRef.current = settings; useEffect(() => { const root = rootRef.current; const stage = stageRef.current; const viewport = viewportRef.current; if (!root || !stage || !viewport) return undefined; const reduce = window.matchMedia?.('(prefers-reduced-motion: reduce)').matches ?? false; const state = { p: startRef.current, v: 0, target: startRef.current, shown: startRef.current, elapsed: 0, hovered: false, focused: false, visible: true, drag: null, wheeling: false, wheelTimer: 0, suppress: false, last: 0 }; let raf = 0; let alive = true; const unit = s => (s.mode === 'fade' || s.mode === 'cube' ? s.cardWidth : s.span); const limit = (s, value) => (s.loop ? value : clamp(value, 0, s.count - 1)); const apply = () => { const s = settingsRef.current; for (let i = 0; i < s.count; i++) { const slide = slideRefs.current[i]; if (!slide) continue; const next = pose(i, state.p, s); slide.style.transform = next.transform; slide.style.opacity = String(next.opacity); slide.style.visibility = next.visible ? 'visible' : 'hidden'; slide.style.zIndex = String(next.layer); slide.style.setProperty('--carousel-focus', String(next.focus)); const shade = shadeRefs.current[i]; if (shade) shade.style.opacity = String(next.shade); } if (!s.bars) return; const progress = s.autoplay ? clamp(state.elapsed / s.autoplayDelay, 0, 1) : 1; for (let i = 0; i < s.count; i++) { const fill = fillRefs.current[i]; if (fill) fill.style.transform = `scaleX(${i < state.shown ? 1 : i === state.shown ? progress : 0})`; } }; const announce = () => { const s = settingsRef.current; if (!s.count) return; const index = s.loop ? wrap(Math.round(state.target), s.count) : clamp(Math.round(state.target), 0, s.count - 1); if (index === state.shown) return; state.shown = index; setActive(index); }; const paused = s => (s.pauseOnHover && state.hovered) || state.focused || Boolean(state.drag) || state.wheeling || !state.visible || document.hidden; const tick = now => { raf = 0; if (!alive) return; const s = settingsRef.current; const dt = state.last ? Math.min(0.05, (now - state.last) / 1000) : 1 / 60; state.last = now; let busy = false; if (!state.drag?.moved && !state.wheeling) { if (reduce) { state.p = state.target; state.v = 0; } else { const steps = Math.ceil(dt * 240); const h = dt / steps; for (let k = 0; k < steps; k++) { state.v += (STIFFNESS * (state.target - state.p) - DAMPING * state.v) * h; state.p += state.v * h; } if (Math.abs(state.target - state.p) < 0.0004 && Math.abs(state.v) < 0.004) { state.p = state.target; state.v = 0; } else { busy = true; } } if (!busy && s.loop && s.count) { state.target = wrap(Math.round(state.target), s.count); state.p = state.target; } } if (s.autoplay && !paused(s)) { state.elapsed += dt * 1000; if (state.elapsed >= s.autoplayDelay) step(1, true); busy = true; } apply(); if (busy) raf = requestAnimationFrame(tick); else state.last = 0; }; const wake = () => { if (!raf && alive) raf = requestAnimationFrame(tick); }; const moveTo = target => { state.target = target; state.elapsed = 0; announce(); apply(); wake(); }; const step = (direction, auto = false) => { const s = settingsRef.current; if (s.count < 2) return; let next = Math.round(state.target) + direction; if (!s.loop) { if (auto && next > s.count - 1) next = 0; next = clamp(next, 0, s.count - 1); } moveTo(next); }; const goTo = index => { const s = settingsRef.current; if (!s.count) return; const goal = clamp(Math.round(index), 0, s.count - 1); const current = Math.round(state.target); moveTo(s.loop ? current + nearest(goal - wrap(current, s.count), s.count) : goal); }; const onPointerDown = event => { const s = settingsRef.current; if (!s.draggable || (event.pointerType === 'mouse' && event.button !== 0)) return; state.drag = { id: event.pointerId, x: event.clientX, y: event.clientY, p: state.p, from: 0, moved: false, samples: [] }; }; const onPointerMove = event => { const drag = state.drag; if (!drag || event.pointerId !== drag.id) return; const s = settingsRef.current; if (!drag.moved) { const dx = event.clientX - drag.x; const dy = event.clientY - drag.y; if (Math.abs(dx) < 6 && Math.abs(dy) < 6) return; if (Math.abs(dy) > Math.abs(dx)) { state.drag = null; return; } drag.moved = true; drag.x = event.clientX; drag.p = state.p; drag.from = Math.round(state.target); viewport.setPointerCapture?.(event.pointerId); viewport.dataset.dragging = 'true'; } const raw = drag.p - (event.clientX - drag.x) / unit(s); state.p = s.loop ? raw : band(raw, s.count - 1); state.v = 0; state.target = Math.round(limit(s, state.p)); drag.samples.push([event.timeStamp, event.clientX]); if (drag.samples.length > 8) drag.samples.shift(); announce(); apply(); }; const onPointerUp = event => { const drag = state.drag; if (!drag || event.pointerId !== drag.id) return; state.drag = null; delete viewport.dataset.dragging; if (!drag.moved) { wake(); return; } state.suppress = true; window.setTimeout(() => { state.suppress = false; }, 0); const s = settingsRef.current; const sample = drag.samples.find(([time]) => event.timeStamp - time < 90) ?? [event.timeStamp, event.clientX]; const elapsed = Math.max(16, event.timeStamp - sample[0]); const velocity = clamp(((sample[1] - event.clientX) / elapsed) * (1000 / unit(s)), -12, 12); const travelled = state.p - drag.from; let target = Math.round(state.p + velocity * 0.2); if (target === drag.from) { if (Math.abs(velocity) > 0.8) target += Math.sign(velocity); else if (Math.abs(travelled) > 0.18) target += Math.sign(travelled); } if (!s.loop) target = clamp(target, 0, s.count - 1); const inside = s.loop || (state.p >= 0 && state.p <= s.count - 1); state.v = inside ? velocity : 0; moveTo(target); }; const onClickCapture = event => { if (!state.suppress) return; event.preventDefault(); event.stopPropagation(); state.suppress = false; }; const onWheel = event => { const s = settingsRef.current; if (!s.draggable || Math.abs(event.deltaX) <= Math.abs(event.deltaY)) return; event.preventDefault(); const raw = state.p + event.deltaX / unit(s); state.p = s.loop ? raw : clamp(raw, -0.15, s.count - 0.85); state.v = 0; state.wheeling = true; state.target = Math.round(limit(s, state.p)); announce(); apply(); window.clearTimeout(state.wheelTimer); state.wheelTimer = window.setTimeout(() => { state.wheeling = false; moveTo(Math.round(limit(settingsRef.current, state.p))); }, 120); }; const onKeyDown = event => { if (event.target instanceof Element && event.target.closest('input, textarea, select, [contenteditable="true"]')) return; const s = settingsRef.current; const keys = { ArrowRight: () => step(1), ArrowLeft: () => step(-1), Home: () => goTo(0), End: () => goTo(s.count - 1) }; if (!keys[event.key]) return; event.preventDefault(); keys[event.key](); }; const onEnter = () => { state.hovered = true; }; const onLeave = () => { state.hovered = false; wake(); }; const onFocusIn = () => { try { state.focused = root.matches(':focus-visible') || Boolean(root.querySelector(':focus-visible')); } catch { state.focused = false; } }; const onFocusOut = event => { if (root.contains(event.relatedTarget)) return; state.focused = false; wake(); }; const onVisibility = () => { if (document.hidden) return; state.last = 0; wake(); }; const resizeObserver = new ResizeObserver(entries => { const box = entries[entries.length - 1]?.contentRect; if (box) setWidth(Math.max(1, Math.round(box.width))); }); resizeObserver.observe(stage); const visibility = new IntersectionObserver(entries => { state.visible = entries.some(entry => entry.isIntersecting); if (state.visible) wake(); }); visibility.observe(root); viewport.addEventListener('pointerdown', onPointerDown); viewport.addEventListener('pointermove', onPointerMove); viewport.addEventListener('pointerup', onPointerUp); viewport.addEventListener('pointercancel', onPointerUp); viewport.addEventListener('click', onClickCapture, true); viewport.addEventListener('wheel', onWheel, { passive: false }); root.addEventListener('keydown', onKeyDown); root.addEventListener('mouseenter', onEnter); root.addEventListener('mouseleave', onLeave); root.addEventListener('focusin', onFocusIn); root.addEventListener('focusout', onFocusOut); document.addEventListener('visibilitychange', onVisibility); engineRef.current = { goTo, step, sync: () => { const s = settingsRef.current; if (!s.loop && s.count) { state.target = clamp(Math.round(state.target), 0, s.count - 1); state.p = clamp(state.p, -0.3, s.count - 0.7); } announce(); apply(); wake(); } }; engineRef.current.sync(); return () => { alive = false; cancelAnimationFrame(raf); window.clearTimeout(state.wheelTimer); engineRef.current = null; resizeObserver.disconnect(); visibility.disconnect(); viewport.removeEventListener('pointerdown', onPointerDown); viewport.removeEventListener('pointermove', onPointerMove); viewport.removeEventListener('pointerup', onPointerUp); viewport.removeEventListener('pointercancel', onPointerUp); viewport.removeEventListener('click', onClickCapture, true); viewport.removeEventListener('wheel', onWheel); root.removeEventListener('keydown', onKeyDown); root.removeEventListener('mouseenter', onEnter); root.removeEventListener('mouseleave', onLeave); root.removeEventListener('focusin', onFocusIn); root.removeEventListener('focusout', onFocusOut); document.removeEventListener('visibilitychange', onVisibility); }; }, []); useIsomorphicLayoutEffect(() => { engineRef.current?.sync(); }); useEffect(() => { if (reportedRef.current === active) return; reportedRef.current = active; onChangeRef.current?.(active); }, [active]); useIsomorphicLayoutEffect(() => { const previous = previousRef.current; previousRef.current = active; const counter = counterRef.current; if (!counter?.animate || previous === active) return; if (window.matchMedia?.('(prefers-reduced-motion: reduce)').matches) return; const delta = loop && count > 1 ? nearest(active - previous, count) : active - previous; counter.animate( [ { transform: `translateY(${delta > 0 ? 70 : -70}%)`, opacity: 0 }, { transform: 'translateY(0)', opacity: 1 } ], { duration: 320, easing: 'cubic-bezier(0.2, 0.8, 0.2, 1)' } ); }, [active, count, loop]); const controls = count > 1 && (indicator !== 'none' || arrows); const atStart = !settings.loop && active === 0; const atEnd = !settings.loop && active === count - 1; const perspective = mode === 'cube' ? `${Math.round(cardWidth * 2.6)}px` : mode === 'tilt' ? '1000px' : undefined; const mask = clipped ? edgeMask(inset) : undefined; const controlsNode = controls ? (

{arrows && ( )} {indicator === 'dots' && (

{items.map((_, index) => ( ))}

)} {indicator === 'bars' && (

{items.map((_, index) => ( ))}

)} {indicator === 'counter' && (

{String(active + 1).padStart(2, '0')} / {String(count).padStart(2, '0')}

)} {arrows && ( )}

) : null; const inside = frame && !round; return (

{items.map((item, index) => { const initial = pose(index, active, settings); return (

{ slideRefs.current[index] = element; }} className="carousel-slide" style={{ left: inset, width: cardWidth, height: cardHeight, transform: initial.transform, opacity: initial.opacity, visibility: initial.visible ? 'visible' : 'hidden', zIndex: initial.layer, '--carousel-focus': initial.focus }} data-current={index === active ? 'true' : undefined} role="group" aria-roledescription="slide" aria-label={`${index + 1} of ${count}`} onClick={() => { if (index !== active) engineRef.current?.goTo(index); }} > {mode === 'cube' && ( { shadeRefs.current[index] = element; }} className="carousel-shade" style={{ opacity: initial.shade }} /> )}

); })}

{inside && controlsNode} {frame && }

{!inside && controlsNode}

); } 4f:["$","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","@hugeicons/react@^1.1.10",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40hugeicons%2Freact","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":"@hugeicons/react@^1.1.10"}]]}]}],["$","li","@hugeicons/core-free-icons@^4.3.3",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40hugeicons%2Fcore-free-icons","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":"@hugeicons/core-free-icons@^4.3.3"}]]}]}]]}],["$","$L50",null,{"namespace":"@react-bits","registryDependencies":[]}]]}],null]}],["$","$L51",null,{"files":[{"path":"Carousel.css","content":"$52","type":"registry:file","target":"@components/Carousel.css"},{"path":"Carousel.jsx","content":"$53","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]