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:T23be,"use client" import React, { useCallback, useEffect, useRef, useState } from "react" import { cva, type VariantProps } from "class-variance-authority" import { Clock } from "lucide-react" import { cn } from "@/lib/utils" const timerVariants = cva( [ "inline-flex items-center gap-2 rounded-full font-medium transition-all duration-200", "", ], { variants: { variant: { default: "bg-background text-foreground border-border border shadow-[0_2px_4px_rgba(0,0,0,0.02),_0px_1px_2px_rgba(0,0,0,0.04)] shadow-[inset_0px_-2.10843px_0px_0px_hsl(var(--muted)),_0px_1.20482px_6.3253px_0px_hsl(var(--muted))]", outline: "border-input bg-background text-foreground border shadow-[0px_1px_0px_0px_hsla(0,_0%,_0%,_0.02)_inset,_0px_0px_0px_1px_hsla(0,_0%,_0%,_0.02)_inset,_0px_0px_0px_1px_rgba(255,_255,_255,_0.25)]", ghost: "text-foreground bg-transparent", destructive: "bg-destructive/10 text-destructive border-destructive/20 border", }, size: { sm: "h-6 gap-1.5 px-2 py-1 text-xs", md: "h-7 gap-2 px-2.5 py-1.5 text-sm", lg: "h-8 gap-2.5 px-3 py-2 text-base", }, }, defaultVariants: { variant: "default", size: "md", }, } ) const timerIconVariants = cva("transition-transform duration-[2000ms]", { variants: { size: { sm: "h-3 w-3", md: "h-3.5 w-3.5", lg: "h-4 w-4", }, loading: { true: "animate-spin", false: "", }, }, defaultVariants: { size: "md", loading: false, }, }) const timerDisplayVariants = cva("font-mono tracking-tight tabular-nums", { variants: { size: { sm: "text-xs", md: "text-sm", lg: "text-base", }, }, defaultVariants: { size: "md", }, }) export type TimerRootProps = { /** Whether the timer is in loading/running state */ loading?: boolean } & VariantProps & React.HTMLAttributes export type TimerIconProps = { /** Custom icon to display instead of default Clock */ icon?: React.ComponentType<{ className?: string }> } & VariantProps & React.HTMLAttributes export type TimerDisplayProps = { /** Time value to display */ time: string /** Optional label for accessibility */ label?: string } & VariantProps & React.HTMLAttributes export type UseTimerOptions = { /** Whether the timer should be running */ loading?: boolean /** Callback fired on each tick with elapsed time */ onTick?: (seconds: number, milliseconds: number) => void /** Whether to reset timer when loading state changes */ resetOnLoadingChange?: boolean /** Time format to use */ format?: "SS.MS" | "MM:SS" | "HH:MM:SS" } export type UseTimerReturn = { /** Total elapsed seconds */ elapsedTime: number /** Current milliseconds (0-999) */ milliseconds: number /** Formatted time strings */ formattedTime: { seconds: string milliseconds: string display: string } /** Whether timer is currently running */ isRunning: boolean /** Reset timer to 0 */ reset: () => void /** Start the timer */ start: () => void /** Stop the timer */ stop: () => void } /** * Root container for timer components */ export const TimerRoot = React.forwardRef( ({ variant, size, loading, className, children, ...props }, ref) => { return (

{children}

) } ) TimerRoot.displayName = "TimerRoot" /** * Icon component for timer with loading animation */ export const TimerIcon = React.forwardRef( ({ size, loading, icon: Icon = Clock, className, ...props }, ref) => { return (

) } ) TimerIcon.displayName = "TimerIcon" /** * Display component for formatted time */ export const TimerDisplay = React.forwardRef( ({ size, time, label, className, ...props }, ref) => { return (

{time}

) } ) TimerDisplay.displayName = "TimerDisplay" export type TimerProps = TimerRootProps & UseTimerOptions & { /** Time format to display */ format?: "SS.MS" | "MM:SS" | "HH:MM:SS" } & React.HTMLAttributes export const Timer = React.forwardRef( ( { loading = false, onTick, resetOnLoadingChange = true, format = "SS.MS", variant, size, className, ...props }, ref ) => { const { formattedTime } = useTimer({ loading, onTick, resetOnLoadingChange, format, }) return ( ) } ) Timer.displayName = "Timer" /** * Hook for managing timer state and formatting */ export function useTimer({ loading = false, onTick, resetOnLoadingChange = true, format = "SS.MS", }: UseTimerOptions = {}): UseTimerReturn { const [elapsedTime, setElapsedTime] = useState(0) const [milliseconds, setMilliseconds] = useState(0) const [isRunning, setIsRunning] = useState(false) const startTimeRef = useRef(0) const rafRef = useRef(null) const reset = useCallback(() => { setElapsedTime(0) setMilliseconds(0) startTimeRef.current = 0 }, []) const start = useCallback(() => { setIsRunning(true) startTimeRef.current = performance.now() }, []) const stop = useCallback(() => { setIsRunning(false) if (rafRef.current) { cancelAnimationFrame(rafRef.current) } }, []) useEffect(() => { if (!isRunning) return const updateTimer = () => { const now = performance.now() const elapsed = now - startTimeRef.current const newElapsedTime = Math.floor(elapsed / 1000) const newMilliseconds = Math.floor(elapsed % 1000) setElapsedTime(newElapsedTime) setMilliseconds(newMilliseconds) rafRef.current = requestAnimationFrame(updateTimer) } rafRef.current = requestAnimationFrame(updateTimer) return () => { if (rafRef.current) { cancelAnimationFrame(rafRef.current) } } }, [isRunning]) useEffect(() => { if (loading) { if (resetOnLoadingChange) { reset() } start() } else { stop() } }, [loading, resetOnLoadingChange, reset, start, stop]) useEffect(() => { if (onTick) { onTick(elapsedTime, milliseconds) } }, [elapsedTime, milliseconds, onTick]) const formatTime = useCallback( (totalSeconds: number, ms: number) => { const hours = Math.floor(totalSeconds / 3600) const minutes = Math.floor((totalSeconds % 3600) / 60) const seconds = totalSeconds % 60 switch (format) { case "HH:MM:SS": return { seconds: seconds.toString().padStart(2, "0"), milliseconds: Math.floor(ms / 10) .toString() .padStart(2, "0"), display: `${hours.toString().padStart(2, "0")}:${minutes .toString() .padStart(2, "0")}:${seconds.toString().padStart(2, "0")}`, } case "MM:SS": const totalMinutes = Math.floor(totalSeconds / 60) const remainingSeconds = totalSeconds % 60 return { seconds: remainingSeconds.toString().padStart(2, "0"), milliseconds: Math.floor(ms / 10) .toString() .padStart(2, "0"), display: `${totalMinutes .toString() .padStart(2, "0")}:${remainingSeconds .toString() .padStart(2, "0")}`, } case "SS.MS": default: return { seconds: totalSeconds.toString().padStart(2, "0"), milliseconds: Math.floor(ms / 10) .toString() .padStart(2, "0"), display: `${totalSeconds.toString().padStart(2, "0")}.${Math.floor( ms / 10 ) .toString() .padStart(2, "0")}`, } } }, [format] ) const formattedTime = formatTime(elapsedTime, milliseconds) return { elapsedTime, milliseconds, formattedTime, isRunning, reset, start, stop, } } 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":"@cult-ui","registryDependencies":[]}]]}],null]}],["$","$L51",null,{"files":[{"path":"registry/default/ui/timer.tsx","content":"$52","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]