52: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"] 53: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"] 54:T2cad,"use client"; import { motion, useReducedMotion } from "motion/react"; import type React from "react"; import { useMemo, useState } from "react"; export interface ContributionData { count: number; date: string; level: number; } export interface ContributionGraphProps { className?: string; data?: ContributionData[]; showLegend?: boolean; showTooltips?: boolean; year?: number; } const WEEKS_IN_YEAR = 53; const DAYS_IN_WEEK = 7; const JANUARY_MONTH = 0; const DECEMBER_MONTH = 11; const SUNDAY_DAY = 0; const MIN_WEEKS_FOR_DECEMBER_HEADER = 2; const TOOLTIP_OFFSET_X = 10; const TOOLTIP_OFFSET_Y = 40; const MONTHS = [ "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec", ]; const DAYS = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"]; // Contribution level colors (similar to GitHub's) const CONTRIBUTION_COLORS = [ "bg-primary", // Level 0 - No contributions "bg-brand/25", // Level 1 "bg-brand/50", // Level 2 "bg-brand/75", // Level 3 "bg-brand", // Level 4 - Max ]; const LEVEL_0 = 0; const LEVEL_1 = 1; const LEVEL_2 = 2; const LEVEL_3 = 3; const LEVEL_4 = 4; const CONTRIBUTION_LEVELS = [LEVEL_0, LEVEL_1, LEVEL_2, LEVEL_3, LEVEL_4]; const DAY_1 = 1; const DAY_31 = 31; // Helper function to check if date is in valid range const isDateInValidRange = ( currentDate: Date, startDate: Date, endDate: Date, targetYear: number ) => { const isInRange = currentDate >= startDate && currentDate <= endDate; const isPreviousYearDecember = currentDate.getFullYear() === targetYear - 1 && currentDate.getMonth() === DECEMBER_MONTH; const isNextYearJanuary = currentDate.getFullYear() === targetYear + 1 && currentDate.getMonth() === JANUARY_MONTH; return isInRange || isPreviousYearDecember || isNextYearJanuary; }; // Helper function to create day data const createDayData = ( currentDate: Date, contributionData: ContributionData[] ): ContributionData => { const [dateString] = currentDate.toISOString().split("T"); const existingData = contributionData.find((d) => d.date === dateString); return { count: existingData?.count ?? LEVEL_0, date: dateString, level: existingData?.level ?? LEVEL_0, }; }; // Helper function to check if month should be shown interface MonthHeaderCheck { currentMonth: number; currentYear: number; startDateDay: number; targetYear: number; weekCount: number; } const shouldShowMonthHeader = ({ currentYear, targetYear, currentMonth, startDateDay, weekCount, }: MonthHeaderCheck) => currentYear === targetYear || (currentYear === targetYear - 1 && currentMonth === DECEMBER_MONTH && startDateDay !== SUNDAY_DAY && weekCount >= MIN_WEEKS_FOR_DECEMBER_HEADER); // Helper function to calculate month headers const calculateMonthHeaders = (targetYear: number) => { const headers: { month: string; colspan: number; startWeek: number }[] = []; const startDate = new Date(targetYear, JANUARY_MONTH, DAY_1); const firstSunday = new Date(startDate); firstSunday.setDate(startDate.getDate() - startDate.getDay()); let currentMonth = -1; let currentYear = -1; let monthStartWeek = 0; let weekCount = 0; for (let weekNumber = 0; weekNumber < WEEKS_IN_YEAR; weekNumber++) { const weekDate = new Date(firstSunday); weekDate.setDate(firstSunday.getDate() + weekNumber * DAYS_IN_WEEK); const monthKey = weekDate.getMonth(); const yearKey = weekDate.getFullYear(); if (monthKey !== currentMonth || yearKey !== currentYear) { if ( currentMonth !== -1 && shouldShowMonthHeader({ currentMonth, currentYear, startDateDay: startDate.getDay(), targetYear, weekCount, }) ) { headers.push({ colspan: weekCount, month: MONTHS[currentMonth], startWeek: monthStartWeek, }); } currentMonth = monthKey; currentYear = yearKey; monthStartWeek = weekNumber; weekCount = 1; } else { weekCount++; } } // Add the last month if ( currentMonth !== -1 && shouldShowMonthHeader({ currentMonth, currentYear, startDateDay: startDate.getDay(), targetYear, weekCount, }) ) { headers.push({ colspan: weekCount, month: MONTHS[currentMonth], startWeek: monthStartWeek, }); } return headers; }; export function ContributionGraph({ data = [], year = new Date().getFullYear(), className = "", showLegend = true, showTooltips = true, }: ContributionGraphProps) { const [hoveredDay, setHoveredDay] = useState(null); const [tooltipPosition, setTooltipPosition] = useState({ x: 0, y: 0 }); const shouldReduceMotion = useReducedMotion(); // Generate all days for the year const yearData = useMemo(() => { const startDate = new Date(year, JANUARY_MONTH, DAY_1); const endDate = new Date(year, DECEMBER_MONTH, DAY_31); const days: ContributionData[] = []; // Start from the Sunday of the first week that contains January 1st // This ensures December gets proper weeks before January const firstSunday = new Date(startDate); firstSunday.setDate(startDate.getDate() - startDate.getDay()); // Generate 53 weeks (GitHub shows 53 weeks) for (let weekNum = 0; weekNum < WEEKS_IN_YEAR; weekNum++) { for (let day = 0; day < DAYS_IN_WEEK; day++) { const currentDate = new Date(firstSunday); currentDate.setDate( firstSunday.getDate() + weekNum * DAYS_IN_WEEK + day ); if (isDateInValidRange(currentDate, startDate, endDate, year)) { days.push(createDayData(currentDate, data)); } else { // Add empty day for alignment days.push({ count: LEVEL_0, date: "", level: LEVEL_0, }); } } } return days; }, [data, year]); // Calculate month headers with colspan const monthHeaders = useMemo(() => calculateMonthHeaders(year), [year]); const handleDayHover = (day: ContributionData, event: React.MouseEvent) => { if (showTooltips && day.date) { setHoveredDay(day); setTooltipPosition({ x: event.clientX, y: event.clientY }); } }; const handleDayLeave = () => { setHoveredDay(null); }; const formatDate = (dateString: string) => { if (!dateString) { return ""; } const date = new Date(dateString); return date.toLocaleDateString("en-US", { day: "numeric", month: "long", weekday: "long", year: "numeric", }); }; const getContributionText = (count: number) => { if (count === LEVEL_0) { return "No contributions"; } if (count === LEVEL_1) { return "1 contribution"; } return `${count} contributions`; }; return (

{/* Month Headers */} ))} {/* Day Grid */} {Array.from({ length: DAYS_IN_WEEK }, (_, dayIndex) => ( {/* Day Labels */} {/* Day Cells */} {Array.from({ length: WEEKS_IN_YEAR }, (_week, weekIndex) => { const dayData = yearData[weekIndex * DAYS_IN_WEEK + dayIndex]; const cellKey = `${dayData?.date ?? "empty"}-${weekIndex}-${dayIndex}`; if (!dayData?.date) { return ( ); } return ( // biome-ignore lint/a11y/noNoninteractiveElementInteractions: Table cell is interactive for hover tooltips ); })} ))}

Contribution Graph for {year}
{monthHeaders.map((header) => (	{header.month}
{dayIndex % 2 === 0 && ( {DAYS[dayIndex]} )}		handleDayHover(dayData, e)} onMouseLeave={handleDayLeave} title={ showTooltips ? `${formatDate(dayData.date)}: ${getContributionText(dayData.count)}` : undefined } >

{/* Tooltip */} {showTooltips && hoveredDay ? (

{getContributionText(hoveredDay.count)}

{formatDate(hoveredDay.date)}

) : null} {/* Legend */} {showLegend ? (

Less

{CONTRIBUTION_LEVELS.map((level) => (

))}

) : null}

); } export default ContributionGraph; 51:["$","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"}]]}]}]]}],["$","$L52",null,{"namespace":"@smoothui","registryDependencies":["https://smoothui.dev/r/tokens.json"]}]]}],null]}],["$","$L53",null,{"files":[{"path":"index.tsx","content":"$54","type":"registry:ui","target":"components/smoothui/contribution-graph/index.tsx"}],"className":"h-[70svh] min-h-80"}]]}]