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:T2648,'use client'; import { cva } from 'class-variance-authority'; import { ChevronLeft, ChevronRight, Pause, Play } from 'lucide-react'; import { ComponentProps, ReactNode, createContext, useCallback, useContext, useEffect, useId, useMemo, useState, } from 'react'; import { Body2, Label1, Label2 } from '@/components/ui/typography'; import { cn } from '@/lib/utils'; /* * UX4G carousel: slides fill the frame, chevrons sit inside the left and right * edges, and the indicators are 30x3px bars — current colour at 50% when * inactive, full when current. `variant` follows the kit's Dark property and * describes the slide behind the controls, not the page theme. */ type TCarouselVariant = 'light' | 'dark'; interface ICarouselContext { index: number; count: number; variant: TCarouselVariant; baseId: string; playing: boolean; canAutoPlay: boolean; goTo: (i: number) => void; next: () => void; previous: () => void; togglePlaying: () => void; register: (n: number) => void; } const CAROUSEL_CONTEXT = createContext(null); /** Reads the nearest Carousel context, or fails loudly rather than silently. */ function useCarousel() { const context = useContext(CAROUSEL_CONTEXT); if (!context) throw new Error('Carousel parts must be rendered inside '); return context; } const CONTROL_VARIANTS = cva( 'focus-visible:shadow-focus-primary absolute top-1/2 z-10 flex -translate-y-1/2 cursor-pointer items-center justify-center rounded-md p-2 transition-opacity focus-visible:outline-none disabled:pointer-events-none disabled:opacity-30', { variants: { variant: { light: 'text-neutral-600 hover:text-neutral', dark: 'text-neutral-0/70 hover:text-neutral-0', }, }, defaultVariants: { variant: 'light' }, }, ); interface ICarouselProps extends Omit, 'onChange'> { variant?: TCarouselVariant; /** Milliseconds between slides. Omit for a manual carousel. */ autoPlayInterval?: number; label?: string; } /** * Slideshow region. * * Auto-advance stops on hover, on focus, and whenever the visitor asks for * reduced motion, and CarouselPlayPause exposes the manual control WCAG 2.2.2 * requires for anything that moves on its own. */ function Carousel({ className, children, variant = 'light', autoPlayInterval, label = 'Carousel', ...props }: ICarouselProps) { const baseId = useId(); const [index, setIndex] = useState(0); const [count, setCount] = useState(0); const [playing, setPlaying] = useState(Boolean(autoPlayInterval)); const [paused, setPaused] = useState(false); const [reduceMotion, setReduceMotion] = useState(false); useEffect(() => { const query = window.matchMedia('(prefers-reduced-motion: reduce)'); const sync = () => setReduceMotion(query.matches); sync(); query.addEventListener('change', sync); return () => query.removeEventListener('change', sync); }, []); const goTo = useCallback((i: number) => setIndex(i), []); const next = useCallback(() => setIndex(i => (count ? (i + 1) % count : 0)), [count]); const previous = useCallback( () => setIndex(i => (count ? (i - 1 + count) % count : 0)), [count], ); const togglePlaying = useCallback(() => setPlaying(p => !p), []); const register = useCallback((n: number) => setCount(n), []); const canAutoPlay = Boolean(autoPlayInterval) && !reduceMotion; const running = canAutoPlay && playing && !paused && count > 1; useEffect(() => { if (!running) return; const id = setInterval(next, autoPlayInterval); return () => clearInterval(id); }, [running, next, autoPlayInterval]); const value = useMemo( () => ({ index, count, variant, baseId, playing, canAutoPlay, goTo, next, previous, togglePlaying, register, }), [index, count, variant, baseId, playing, canAutoPlay, goTo, next, previous, togglePlaying, register], ); const handleKeyDown = useCallback( (e: React.KeyboardEvent) => { if (e.key === 'ArrowLeft') { e.preventDefault(); previous(); } else if (e.key === 'ArrowRight') { e.preventDefault(); next(); } }, [next, previous], ); const pause = useCallback(() => setPaused(true), []); const resume = useCallback(() => setPaused(false), []); return (

{children}

); } /** Track holding the slides. Counts its children so the parts stay in step. */ function CarouselContent({ className, children, ...props }: ComponentProps<'div'>) { const { index, register } = useCarousel(); const slides = Array.isArray(children) ? children : [children]; useEffect(() => { register(slides.length); }, [register, slides.length]); return (

{children}

); } /** A single slide. */ function CarouselItem({ className, ...props }: ComponentProps<'div'>) { return (

); } /** Caption block sitting over the lower part of a slide. */ function CarouselCaption({ className, title, children, ...props }: ComponentProps<'div'> & { title?: ReactNode }) { const { variant } = useCarousel(); return (

{title && {title}} {children && {children}}

); } /** Previous-slide control. */ function CarouselPrevious({ className, ...props }: ComponentProps<'button'>) { const { previous, variant, count } = useCarousel(); return ( ); } /** Next-slide control. */ function CarouselNext({ className, ...props }: ComponentProps<'button'>) { const { next, variant, count } = useCarousel(); return ( ); } /** One indicator bar. Split out so its handler is not rebuilt on every render. */ function CarouselIndicator({ slide }: { slide: number }) { const { index, goTo, variant } = useCarousel(); const handleClick = useCallback(() => goTo(slide), [goTo, slide]); const current = slide === index; return ( ); } export type { TCarouselVariant }; export { Carousel, CarouselContent, CarouselItem, CarouselCaption, CarouselPrevious, CarouselNext, CarouselIndicators, CarouselPlayPause, CONTROL_VARIANTS, }; 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","class-variance-authority",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/class-variance-authority","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":"class-variance-authority"}]]}]}],["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","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":"lucide-react"}]]}]}]]}],["$","$L50",null,{"namespace":"@indiacn","registryDependencies":["https://indiacn.in/r/theme.json","https://indiacn.in/r/typography.json"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"components/ui/carousel.tsx","content":"$52","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]