[ { "path": ".eslintrc.json", "content": "{\n \"extends\": \"next/core-web-vitals\"\n}\n" }, { "path": ".gitignore", "content": "# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.\n\n# dependencies\n/node_modules\n/.pnp\n.pnp.js\n.yarn/install-state.gz\n\n# testing\n/coverage\n\n# next.js\n/.next/\n/out/\n\n# production\n/build\n\n# misc\n.DS_Store\n*.pem\n\n# debug\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\n\n# local env files\n.env*.local\n\n# vercel\n.vercel\n\n# typescript\n*.tsbuildinfo\nnext-env.d.ts\n" }, { "path": "LICENSE", "content": "MIT License\n\nCopyright (c) 2024 Gurbaaz Singh Nandra\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n" }, { "path": "README.md", "content": "# shadcn-calendar-heatmap\n\nA modern, customizable calendar heatmap component built on top of [react-day-picker](https://react-day-picker.js.org/) following [shadcn/ui](https://ui.shadcn.com/) patterns.\n\n**Accessible. Unstyled. Customizable. Open Source.**\n\n![og](public/og.png)\n\n## ✨ Features\n\n- 🎨 **Fully Customizable** - Style with Tailwind CSS classes\n- 📅 **Multiple Data Modes** - Use direct date arrays or weighted dates with auto-categorization\n- 🔢 **Multi-month Support** - Display any number of months\n- ♿ **Accessible** - Built on react-day-picker with full keyboard navigation\n- 🎯 **Type Safe** - Written in TypeScript with full type definitions\n- 🌈 **Preset Variants** - GitHub streaks, temperature heatmaps, rainbow colors, and more\n\n## 🚀 Demo\n\nCheck out the live demo at [shadcn-calendar-heatmap.vercel.app](https://shadcn-calendar-heatmap.vercel.app)\n\n## 📦 Installation\n\nThis component follows the shadcn/ui philosophy - copy the component directly into your project.\n\n### 1. Install Dependencies\n\n```bash\nnpm install react-day-picker date-fns lucide-react\n# or\nyarn add react-day-picker date-fns lucide-react\n# or\npnpm add react-day-picker date-fns lucide-react\n```\n\n### 2. Copy the Component\n\nCopy [`components/ui/calendar-heatmap.tsx`](https://github.com/gurbaaz27/shadcn-calendar-heatmap/blob/main/components/ui/calendar-heatmap.tsx) into your project's components directory.\n\n### 3. Ensure you have the required utilities\n\nMake sure you have the `cn` utility function (standard in shadcn/ui projects):\n\n```typescript\n// lib/utils.ts\nimport { type ClassValue, clsx } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs))\n}\n```\n\n## 📖 Usage\n\n### Basic Example - GitHub Contribution Graph\n\n```tsx\nimport { CalendarHeatmap } from \"@/components/ui/calendar-heatmap\"\n\nexport default function MyComponent() {\n return (\n \n )\n}\n```\n\n### Using Weighted Dates\n\nPass dates with numeric weights, and the component auto-categorizes them:\n\n```tsx\n\n```\n\n### Multi-month Display\n\n```tsx\n\n```\n\n## 🔧 API Reference\n\n### Props\n\n| Prop | Type | Required | Description |\n|------|------|----------|-------------|\n| `variantClassnames` | `string[]` | ✅ | Array of Tailwind CSS classes for each intensity level |\n| `datesPerVariant` | `Date[][]` | ⚡ | 2D array where each inner array contains dates for that variant |\n| `weightedDates` | `WeightedDateEntry[]` | ⚡ | Array of `{ date: Date, weight: number }` objects |\n| `numberOfMonths` | `number` | ❌ | Number of months to display (default: 1) |\n| `showOutsideDays` | `boolean` | ❌ | Show days from adjacent months (default: true) |\n\n> ⚡ You must provide either `datesPerVariant` OR `weightedDates`, not both.\n\nThe component also accepts all props from [react-day-picker](https://react-day-picker.js.org/api/interfaces/DayPickerMultipleProps).\n\n### Types\n\n```typescript\ntype WeightedDateEntry = {\n date: Date\n weight: number\n}\n```\n\n## 🎨 Customization Examples\n\n### Temperature Heatmap\n\n```tsx\nconst Heatmap = [\n \"text-white hover:text-white bg-blue-300 hover:bg-blue-300\", // Cold\n \"text-white hover:text-white bg-green-500 hover:bg-green-500\", // Mild\n \"text-white hover:text-white bg-amber-400 hover:bg-amber-400\", // Warm\n \"text-white hover:text-white bg-red-700 hover:bg-red-700\", // Hot\n]\n```\n\n### Rainbow Colors\n\n```tsx\nconst Rainbow = [\n \"text-white hover:text-white bg-violet-400 hover:bg-violet-400\",\n \"text-white hover:text-white bg-indigo-400 hover:bg-indigo-400\",\n \"text-white hover:text-white bg-blue-400 hover:bg-blue-400\",\n \"text-white hover:text-white bg-green-400 hover:bg-green-400\",\n \"text-white hover:text-white bg-yellow-400 hover:bg-yellow-400\",\n \"text-white hover:text-white bg-orange-400 hover:bg-orange-400\",\n \"text-white hover:text-white bg-red-400 hover:bg-red-400\",\n]\n```\n\n## ⭐ Star History\n\n\n \n \n \n \"Star\n \n\n\n## 🤝 Contributing\n\nContributions are welcome! Feel free to open an issue or submit a pull request.\n\n## 📄 License\n\nMIT © [Gurbaaz Singh Nandra](https://x.com/GurbaazNandra)\n\n## 🔗 Links\n\n- [Live Demo](https://shadcn-calendar-heatmap.vercel.app)\n- [GitHub Repository](https://github.com/gurbaaz27/shadcn-calendar-heatmap)\n- [Twitter/X](https://x.com/GurbaazNandra)\n" }, { "path": "app/(components)/copy-llms-button.tsx", "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { buttonVariants } from \"@/components/ui/button\"\nimport { cn } from \"@/lib/utils\"\nimport { Check, Copy } from \"lucide-react\"\n\ninterface CopyLlmsButtonProps {\n content: string\n className?: string\n}\n\nexport function CopyLlmsButton({ content, className }: CopyLlmsButtonProps) {\n const [copied, setCopied] = useState(false)\n\n const handleCopy = async () => {\n await navigator.clipboard.writeText(content)\n setCopied(true)\n setTimeout(() => setCopied(false), 2000)\n }\n\n return (\n \n {copied ? (\n \n ) : (\n \n )}\n {copied ? \"Copied\" : \"Copy llms.txt\"}\n \n )\n}\n" }, { "path": "app/(components)/example-code.tsx", "content": "import { Code } from \"@/components/code\"\n\nconst tsx = `import { CalendarHeatmap } from \"@/components/ui/calendar-heatmap\"\n\n// Github-style streak pattern\n\n\n// Or you may simply pass weighted array of dates,\n// and they would be slotted to different variants based on length of \\`variantClassnames\\`\n\n\n// Component code at https://github.com/gurbaaz27/shadcn-calendar-heatmap/blob/main/components/ui/calendar-heatmap.tsx\n`\n\nconst code = `\\`\\`\\`tsx /maxLength={6}/ /render/ /slots/1 /.map((slot, idx)/1 /Slot/2,3,4 /props.char/2 //\n${tsx}\n\\`\\`\\``\n\nexport function ExampleCode() {\n return (\n
\n
\n \n \n
\n\n
\n\n {/* Anchor */}\n
\n
\n )\n}\n" }, { "path": "app/(components)/example-variants.ts", "content": "import {\n currentMonthFirstDate,\n currentMonthLastDate,\n randomDate,\n} from \"@/lib/utils\"\n\nexport const GithubStreak = [\n \"text-white hover:text-white bg-green-400 hover:bg-green-400\",\n \"text-white hover:text-white bg-green-500 hover:bg-green-500\",\n \"text-white hover:text-white bg-green-700 hover:bg-green-700\",\n]\n\nexport const GithubStreakDates = [\n [...Array(12)].map((_) =>\n randomDate(currentMonthFirstDate(), currentMonthLastDate(3))\n ),\n [...Array(9)].map((_) =>\n randomDate(currentMonthFirstDate(), currentMonthLastDate(3))\n ),\n [...Array(6)].map((_) =>\n randomDate(currentMonthFirstDate(), currentMonthLastDate(3))\n ),\n]\n\nexport const Heatmap = [\n \"text-white hover:text-white bg-blue-300 hover:bg-blue-300\",\n \"text-white hover:text-white bg-green-500 hover:bg-green-500\",\n \"text-white hover:text-white bg-amber-400 hover:bg-amber-400\",\n \"text-white hover:text-white bg-red-700 hover:bg-red-700\",\n]\n\nexport const HeatmapDatesWeight = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]\n\nexport const Rainbow = [\n \"text-white hover:text-white bg-violet-400 hover:bg-violet-400\",\n \"text-white hover:text-white bg-indigo-400 hover:bg-indigo-400\",\n \"text-white hover:text-white bg-blue-400 hover:bg-blue-400\",\n \"text-white hover:text-white bg-green-400 hover:bg-green-400\",\n \"text-white hover:text-white bg-yellow-400 hover:bg-yellow-400\",\n \"text-white hover:text-white bg-orange-400 hover:bg-orange-400\",\n \"text-white hover:text-white bg-red-400 hover:bg-red-400\",\n]\n\nexport const RainbowDates = [\n [...Array(3)].map((_) =>\n randomDate(currentMonthFirstDate(), currentMonthLastDate(2))\n ),\n [...Array(2)].map((_) =>\n randomDate(currentMonthFirstDate(), currentMonthLastDate(2))\n ),\n [...Array(1)].map((_) =>\n randomDate(currentMonthFirstDate(), currentMonthLastDate(2))\n ),\n [...Array(3)].map((_) =>\n randomDate(currentMonthFirstDate(), currentMonthLastDate(2))\n ),\n [...Array(2)].map((_) =>\n randomDate(currentMonthFirstDate(), currentMonthLastDate(2))\n ),\n [...Array(1)].map((_) =>\n randomDate(currentMonthFirstDate(), currentMonthLastDate(2))\n ),\n [...Array(3)].map((_) =>\n randomDate(currentMonthFirstDate(), currentMonthLastDate(2))\n ),\n]\n" }, { "path": "app/globals.css", "content": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@layer base {\n :root {\n --background: 0 0% 100%;\n --foreground: 240 10% 3.9%;\n --card: 0 0% 100%;\n --card-foreground: 240 10% 3.9%;\n --popover: 0 0% 100%;\n --popover-foreground: 240 10% 3.9%;\n --primary: 240 5.9% 10%;\n --primary-foreground: 0 0% 98%;\n --secondary: 240 4.8% 95.9%;\n --secondary-foreground: 240 5.9% 10%;\n --muted: 240 4.8% 95.9%;\n --muted-foreground: 240 3.8% 46.1%;\n --accent: 240 4.8% 95.9%;\n --accent-foreground: 240 5.9% 10%;\n --destructive: 0 72.22% 50.59%;\n --destructive-foreground: 0 0% 98%;\n --border: 240 5.9% 90%;\n --input: 240 5.9% 90%;\n --ring: 240 5% 64.9%;\n --radius: 0.5rem;\n }\n\n .dark {\n --background: 240 10% 3.9%;\n --foreground: 0 0% 98%;\n --card: 240 10% 3.9%;\n --card-foreground: 0 0% 98%;\n --popover: 240 10% 3.9%;\n --popover-foreground: 0 0% 98%;\n --primary: 0 0% 98%;\n --primary-foreground: 240 5.9% 10%;\n --secondary: 240 3.7% 15.9%;\n --secondary-foreground: 0 0% 98%;\n --muted: 240 3.7% 15.9%;\n --muted-foreground: 240 5% 64.9%;\n --accent: 240 3.7% 15.9%;\n --accent-foreground: 0 0% 98%;\n --destructive: 0 62.8% 30.6%;\n --destructive-foreground: 0 85.7% 97.3%;\n --border: 240 3.7% 15.9%;\n --input: 240 3.7% 15.9%;\n --ring: 240 4.9% 83.9%;\n }\n}\n\n@media (prefers-color-scheme: dark) {\n :root {\n --background: 240 10% 3.9%;\n --foreground: 0 0% 98%;\n --card: 240 10% 3.9%;\n --card-foreground: 0 0% 98%;\n --popover: 240 10% 3.9%;\n --popover-foreground: 0 0% 98%;\n --primary: 0 0% 98%;\n --primary-foreground: 240 5.9% 10%;\n --secondary: 240 3.7% 15.9%;\n --secondary-foreground: 0 0% 98%;\n --muted: 240 3.7% 15.9%;\n --muted-foreground: 240 5% 64.9%;\n --accent: 240 3.7% 15.9%;\n --accent-foreground: 0 0% 98%;\n --destructive: 0 62.8% 30.6%;\n --destructive-foreground: 0 85.7% 97.3%;\n --border: 240 3.7% 15.9%;\n --input: 240 3.7% 15.9%;\n --ring: 240 4.9% 83.9%;\n }\n}\n\n@layer base {\n * {\n @apply border-border;\n }\n body {\n /* @apply bg-background text-foreground selection:bg-[#6B2BF4] selection:text-foreground; */\n @apply bg-background text-foreground;\n /* font-feature-settings: \"rlig\" 1, \"calt\" 1; */\n font-synthesis-weight: none;\n text-rendering: optimizeLegibility;\n }\n}\n\n@layer utilities {\n}\n\n[data-highlighted-chars] {\n @apply bg-zinc-900 rounded;\n box-shadow: 2px 2px 0 2px rgba(139, 139, 148, 0.5);\n}\n[data-highlighted-chars] .dark {\n @apply bg-zinc-700/50 rounded;\n box-shadow: 2px 2px 0 2px rgba(139, 139, 148, 0.5);\n}\n[data-highlighted-chars] * {\n @apply !text-white;\n}\n[data-rehype-pretty-code-figure] pre {\n @apply pb-4 pt-6 max-h-[650px] overflow-x-auto rounded-lg border !bg-transparent;\n}\n[data-rehype-pretty-code-figure] [data-line] {\n @apply inline-block min-h-4 w-full py-0.5 px-4;\n}\n\n.code-example-overlay {\n background-image: linear-gradient(\n to bottom,\n theme(\"colors.background\") 60%,\n transparent\n );\n transform: translateY(0);\n animation: move-overlay 4s ease-out forwards;\n animation-delay: 3s;\n}\n.code-example-light {\n}\n.code-example-dark {\n display: none;\n}\n@media (prefers-color-scheme: dark) {\n .code-example-light {\n display: none;\n }\n .code-example-dark {\n display: unset;\n }\n}\n\n@media (prefers-reduced-motion: reduce) {\n .code-example-overlay {\n opacity: 0;\n animation: none;\n }\n}\n@keyframes move-overlay {\n 0% {\n transform: translateY(0);\n }\n 100% {\n transform: translateY(-100%);\n }\n}\n" }, { "path": "app/layout.tsx", "content": "import \"./globals.css\"\nimport type { Metadata } from \"next\"\nimport { cn } from \"@/lib/utils\"\nimport { GeistSans } from \"geist/font/sans\"\nimport { JetBrains_Mono } from \"next/font/google\"\nimport { SiteHeader } from \"@/components/site-header\"\nimport { SiteFooter } from \"@/components/site-footer\"\nimport { Toaster } from \"@/components/ui/sonner\"\nimport { siteConfig } from \"@/config/site\"\n\nexport const fontMono = JetBrains_Mono({\n subsets: [\"latin\"],\n variable: \"--font-mono\",\n})\n\nexport const metadata: Metadata = {\n title: {\n default: siteConfig.title,\n template: `%s - ${siteConfig.name}`,\n },\n metadataBase: new URL(siteConfig.url),\n description: siteConfig.description,\n keywords: [\n \"React\",\n \"Heatmap\",\n \"Calendar\",\n \"Next.js\",\n \"Tailwind CSS\",\n \"Server Components\",\n \"Accessible\",\n \"Shadcn\",\n ],\n authors: [\n {\n name: \"gurbaaz\",\n url: \"https://gurbaaz.me\",\n },\n ],\n creator: \"gurbaaz\",\n openGraph: {\n type: \"website\",\n locale: \"en_IN\",\n url: siteConfig.url,\n title: siteConfig.name,\n description: siteConfig.description,\n siteName: siteConfig.name,\n images: [\n {\n url: siteConfig.ogImage,\n width: 1200,\n height: 630,\n alt: siteConfig.name,\n },\n ],\n },\n twitter: {\n card: \"summary_large_image\",\n title: siteConfig.name,\n description: siteConfig.description,\n images: [siteConfig.ogImage],\n creator: \"@GurbaazNandra\",\n },\n icons: {\n icon: \"/favicon.ico\",\n shortcut: \"/favicon-16x16.png\",\n apple: \"/apple-touch-icon.png\",\n },\n}\n\nexport default function RootLayout({\n children,\n}: Readonly<{\n children: React.ReactNode\n}>) {\n return (\n \n \n
\n \n
{children}
\n \n
\n \n \n \n )\n}\n" }, { "path": "app/page.tsx", "content": "import {\n PageActions,\n PageHeader,\n PageHeaderDescription,\n PageHeaderHeading,\n PageHeaderNotifier,\n} from \"@/components/page-header\"\nimport { buttonVariants } from \"@/components/ui/button\"\nimport { siteConfig } from \"@/config/site\"\nimport {\n cn,\n currentMonthFirstDate,\n currentMonthLastDate,\n randomDate,\n} from \"@/lib/utils\"\nimport Link from \"next/link\"\nimport { CalendarHeatmap } from \"@/components/ui/calendar-heatmap\"\nimport { Icons } from \"@/components/icons\"\nimport { Star } from \"lucide-react\"\nimport { ExampleCode } from \"./(components)/example-code\"\nimport { CopyLlmsButton } from \"./(components)/copy-llms-button\"\nimport { readFile } from \"fs/promises\"\nimport path from \"path\"\nimport {\n GithubStreak,\n GithubStreakDates,\n Heatmap,\n HeatmapDatesWeight,\n Rainbow,\n RainbowDates,\n} from \"./(components)/example-variants\"\n\nconst fadeUpClassname =\n \"lg:motion-safe:opacity-0 lg:motion-safe:animate-fade-up\"\n\nasync function getRepoStarCount() {\n const res = await fetch(`https://api.github.com/repos/${siteConfig.name}`)\n const data = await res.json()\n const starCount = data.stargazers_count\n\n if (starCount > 999) {\n return (starCount / 1000).toFixed(1) + \"K\"\n }\n\n return starCount\n}\n\nexport default async function IndexPage() {\n const starCount = await getRepoStarCount()\n const llmsContent = await readFile(\n path.join(process.cwd(), \"public\", \"llms.txt\"),\n \"utf-8\"\n )\n\n return (\n
\n \n \n Excited to officially launch our new shadcn-based component!\n 🎉\n \n\n \n Modern alternative to primitive react heatmaps.\n \n\n \n\n \n Showcase Github streaks. Visualise user growth. Understand global\n warming trends.

\n Convey more with less.\n

\n Unstyled. Customizable. Open Source.\n \n\n \n \n \n
\n
{siteConfig.name}
\n
\n \n
{starCount}
\n
\n \n \n \n \n\n \n\n \n \n Examples\n \n\n \n Github Streaks\n \n\n \n\n \n Temperature Heatmap\n \n\n ({\n date: randomDate(currentMonthFirstDate(), currentMonthLastDate()),\n weight: wgt,\n }))}\n />\n\n \n Rainbow Colors\n \n\n \n \n
\n )\n}\n\nexport const revalidate = 3600\n" }, { "path": "components/code.tsx", "content": "import * as React from \"react\"\nimport { unified } from \"unified\"\nimport remarkParse from \"remark-parse\"\nimport remarkRehype from \"remark-rehype\"\nimport rehypeStringify from \"rehype-stringify\"\nimport rehypePrettyCode from \"rehype-pretty-code\"\nimport { CopyButton } from \"./copy-button\"\n\nexport async function Code({\n code,\n toCopy,\n dark = true,\n}: {\n code: string\n toCopy?: string\n dark?: boolean\n}) {\n const highlightedCode = await highlightCode(code, dark)\n return (\n
\n \n\n {toCopy && (\n
\n \n
\n )}\n
\n )\n}\n\nasync function highlightCode(code: string, dark: boolean) {\n const file = await unified()\n .use(remarkParse)\n .use(remarkRehype)\n .use(rehypePrettyCode, {\n keepBackground: false,\n theme: dark ? \"vesper\" : \"github-light\",\n })\n .use(rehypeStringify)\n .process(code)\n\n return String(file)\n}\n" }, { "path": "components/copy-button.tsx", "content": "// Stolen from @shadcn/ui the man the machine!!\n\"use client\"\n\nimport * as React from \"react\"\nimport { CheckIcon, CopyIcon } from \"@radix-ui/react-icons\"\nimport type { DropdownMenuTriggerProps } from \"@radix-ui/react-dropdown-menu\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"./ui/button\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuTrigger,\n} from \"./ui/dropdown-menu\"\n\ninterface CopyButtonProps extends React.HTMLAttributes {\n value: string\n src?: string\n}\n\nexport async function copyToClipboardWithMeta(value: string) {\n window && window.isSecureContext && navigator.clipboard.writeText(value)\n}\n\nexport function CopyButton({\n value,\n className,\n src,\n ...props\n}: CopyButtonProps) {\n const [hasCopied, setHasCopied] = React.useState(false)\n\n React.useEffect(() => {\n setTimeout(() => {\n setHasCopied(false)\n }, 2000)\n }, [hasCopied])\n\n return (\n {\n copyToClipboardWithMeta(value)\n setHasCopied(true)\n }}\n {...props}\n >\n Copy\n {hasCopied ? (\n \n ) : (\n \n )}\n \n )\n}\n\ninterface CopyWithClassNamesProps extends DropdownMenuTriggerProps {\n value: string\n classNames: string\n className?: string\n}\n\nexport function CopyWithClassNames({\n value,\n classNames,\n className,\n ...props\n}: CopyWithClassNamesProps) {\n const [hasCopied, setHasCopied] = React.useState(false)\n\n React.useEffect(() => {\n setTimeout(() => {\n setHasCopied(false)\n }, 2000)\n }, [hasCopied])\n\n const copyToClipboard = React.useCallback((value: string) => {\n copyToClipboardWithMeta(value)\n setHasCopied(true)\n }, [])\n\n return (\n \n \n \n {hasCopied ? (\n \n ) : (\n \n )}\n Copy\n \n \n \n copyToClipboard(value)}>\n Component\n \n copyToClipboard(classNames)}>\n Classname\n \n \n \n )\n}\n\ninterface CopyNpmCommandButtonProps extends DropdownMenuTriggerProps {\n commands: {\n __npmCommand__: string\n __yarnCommand__: string\n __pnpmCommand__: string\n __bunCommand__: string\n }\n}\n\nexport function CopyNpmCommandButton({\n commands,\n className,\n ...props\n}: CopyNpmCommandButtonProps) {\n const [hasCopied, setHasCopied] = React.useState(false)\n\n React.useEffect(() => {\n setTimeout(() => {\n setHasCopied(false)\n }, 2000)\n }, [hasCopied])\n\n const copyCommand = React.useCallback(\n (value: string, pm: \"npm\" | \"pnpm\" | \"yarn\" | \"bun\") => {\n copyToClipboardWithMeta(value)\n setHasCopied(true)\n },\n []\n )\n\n return (\n \n \n \n {hasCopied ? (\n \n ) : (\n \n )}\n Copy\n \n \n \n copyCommand(commands.__npmCommand__, \"npm\")}\n >\n npm\n \n copyCommand(commands.__yarnCommand__, \"yarn\")}\n >\n yarn\n \n copyCommand(commands.__pnpmCommand__, \"pnpm\")}\n >\n pnpm\n \n copyCommand(commands.__bunCommand__, \"bun\")}\n >\n bun\n \n \n \n )\n}\n" }, { "path": "components/icons.tsx", "content": "type IconProps = React.HTMLAttributes\n\nexport const Icons = {\n logo: (props: IconProps) => (\n \n \n \n \n \n ),\n twitter: (props: IconProps) => (\n \n \n \n ),\n gitHub: (props: IconProps) => (\n \n \n \n ),\n radix: (props: IconProps) => (\n \n \n \n \n \n ),\n aria: (props: IconProps) => (\n \n \n \n ),\n npm: (props: IconProps) => (\n \n \n \n ),\n yarn: (props: IconProps) => (\n \n \n \n ),\n pnpm: (props: IconProps) => (\n \n \n \n ),\n react: (props: IconProps) => (\n \n \n \n ),\n tailwind: (props: IconProps) => (\n \n \n \n ),\n google: (props: IconProps) => (\n \n \n \n ),\n apple: (props: IconProps) => (\n \n \n \n ),\n paypal: (props: IconProps) => (\n \n \n \n ),\n spinner: (props: IconProps) => (\n \n \n \n ),\n}\n" }, { "path": "components/page-header.tsx", "content": "import { cn } from \"../lib/utils\"\n\nfunction PageHeader({\n className,\n children,\n ...props\n}: React.HTMLAttributes) {\n return (\n \n {children}\n \n )\n}\n\nfunction PageHeaderNotifier({\n className,\n ...props\n}: React.HTMLAttributes) {\n return (\n \n )\n}\n\nfunction PageHeaderHeading({\n className,\n ...props\n}: React.HTMLAttributes) {\n return (\n \n )\n}\n\nfunction PageHeaderDescription({\n className,\n ...props\n}: React.HTMLAttributes) {\n return (\n \n )\n}\n\nfunction PageActions({\n className,\n ...props\n}: React.HTMLAttributes) {\n return (\n \n )\n}\n\nexport {\n PageHeader,\n PageHeaderNotifier,\n PageHeaderHeading,\n PageHeaderDescription,\n PageActions,\n}\n" }, { "path": "components/site-footer.tsx", "content": "import { siteConfig } from \"../config/site\"\n\nexport function SiteFooter() {\n return (\n
\n
\n

\n Built by{\" \"}\n \n GurbaazNandra\n \n , website inspired from{\" \"}\n \n rodz\n \n . The source code is available on{\" \"}\n \n GitHub\n \n .\n

\n
\n
\n )\n}\n" }, { "path": "components/site-header.tsx", "content": "import Link from \"next/link\"\n\nimport { siteConfig } from \"../config/site\"\nimport { cn } from \"../lib/utils\"\nimport { buttonVariants } from \"./ui/button\"\nimport { Icons } from \"./icons\"\n\nexport function SiteHeader() {\n return (\n
\n
\n
\n
\n \n \n \n \n Twitter\n
\n \n \n
\n
\n \n )\n}\n" }, { "path": "components/ui/button.tsx", "content": "import * as React from \"react\"\nimport { Slot } from \"@radix-ui/react-slot\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst buttonVariants = cva(\n \"inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50\",\n {\n variants: {\n variant: {\n default: \"bg-primary text-primary-foreground hover:bg-primary/90\",\n destructive:\n \"bg-destructive text-destructive-foreground hover:bg-destructive/90\",\n outline:\n \"border border-input bg-background hover:bg-accent hover:text-accent-foreground\",\n secondary:\n \"bg-secondary text-secondary-foreground hover:bg-secondary/80\",\n ghost: \"hover:bg-accent hover:text-accent-foreground\",\n link: \"text-primary underline-offset-4 hover:underline\",\n },\n size: {\n default: \"h-10 px-4 py-2\",\n sm: \"h-9 rounded-md px-3\",\n lg: \"h-11 rounded-md px-8\",\n icon: \"h-10 w-10\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n size: \"default\",\n },\n }\n)\n\nexport interface ButtonProps\n extends React.ButtonHTMLAttributes,\n VariantProps {\n asChild?: boolean\n}\n\nconst Button = React.forwardRef(\n ({ className, variant, size, asChild = false, ...props }, ref) => {\n const Comp = asChild ? Slot : \"button\"\n return (\n \n )\n }\n)\nButton.displayName = \"Button\"\n\nexport { Button, buttonVariants }\n" }, { "path": "components/ui/calendar-heatmap.tsx", "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronLeft, ChevronRight } from \"lucide-react\"\nimport { DayPicker } from \"react-day-picker\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants } from \"@/components/ui/button\"\n\n// type utilities\ntype UnionKeys = T extends T ? keyof T : never\ntype Expand = T extends T ? { [K in keyof T]: T[K] } : never\ntype OneOf = {\n [K in keyof T]: Expand<\n T[K] & Partial, keyof T[K]>, never>>\n >\n}[number]\n\n// types\nexport type Classname = string\nexport type WeightedDateEntry = {\n date: Date\n weight: number\n}\n\ninterface IDatesPerVariant {\n datesPerVariant: Date[][]\n}\ninterface IWeightedDatesEntry {\n weightedDates: WeightedDateEntry[]\n}\n\ntype VariantDatesInput = OneOf<[IDatesPerVariant, IWeightedDatesEntry]>\n\nexport type CalendarProps = React.ComponentProps & {\n variantClassnames: Classname[]\n} & VariantDatesInput\n\n/// utlity functions\nfunction useModifers(\n variantClassnames: Classname[],\n datesPerVariant: Date[][]\n): [Record, Record] {\n const noOfVariants = variantClassnames.length\n\n const variantLabels = [...Array(noOfVariants)].map(\n (_, idx) => `__variant${idx}`\n )\n\n const modifiers = variantLabels.reduce((acc, key, index) => {\n acc[key] = datesPerVariant[index]\n return acc\n }, {} as Record)\n\n const modifiersClassNames = variantLabels.reduce((acc, key, index) => {\n acc[key] = variantClassnames[index]\n return acc\n }, {} as Record)\n\n return [modifiers, modifiersClassNames]\n}\n\nfunction categorizeDatesPerVariant(\n weightedDates: WeightedDateEntry[],\n noOfVariants: number\n) {\n const sortedEntries = weightedDates.sort((a, b) => a.weight - b.weight)\n\n const categorizedRecord = [...Array(noOfVariants)].map(() => [] as Date[])\n\n const minNumber = sortedEntries[0].weight\n const maxNumber = sortedEntries[sortedEntries.length - 1].weight\n const range = minNumber == maxNumber ? 1 : (maxNumber - minNumber) / noOfVariants;\n\n sortedEntries.forEach((entry) => {\n const category = Math.min(\n Math.floor((entry.weight - minNumber) / range),\n noOfVariants - 1\n )\n categorizedRecord[category].push(entry.date)\n })\n\n return categorizedRecord\n}\n\nfunction CalendarHeatmap({\n variantClassnames,\n datesPerVariant,\n weightedDates,\n className,\n classNames,\n showOutsideDays = true,\n ...props\n}: CalendarProps) {\n const noOfVariants = variantClassnames.length\n\n weightedDates = weightedDates ?? []\n datesPerVariant =\n datesPerVariant ?? categorizeDatesPerVariant(weightedDates, noOfVariants)\n\n const [modifiers, modifiersClassNames] = useModifers(\n variantClassnames,\n datesPerVariant\n )\n\n return (\n ,\n IconRight: ({ ...props }) => ,\n }}\n {...props}\n />\n )\n}\nCalendarHeatmap.displayName = \"CalendarHeatmap\"\n\nexport { CalendarHeatmap }\n" }, { "path": "components/ui/dropdown-menu.tsx", "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as DropdownMenuPrimitive from \"@radix-ui/react-dropdown-menu\"\nimport { Check, ChevronRight, Circle } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst DropdownMenu = DropdownMenuPrimitive.Root\n\nconst DropdownMenuTrigger = DropdownMenuPrimitive.Trigger\n\nconst DropdownMenuGroup = DropdownMenuPrimitive.Group\n\nconst DropdownMenuPortal = DropdownMenuPrimitive.Portal\n\nconst DropdownMenuSub = DropdownMenuPrimitive.Sub\n\nconst DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup\n\nconst DropdownMenuSubTrigger = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef & {\n inset?: boolean\n }\n>(({ className, inset, children, ...props }, ref) => (\n \n {children}\n \n \n))\nDropdownMenuSubTrigger.displayName =\n DropdownMenuPrimitive.SubTrigger.displayName\n\nconst DropdownMenuSubContent = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nDropdownMenuSubContent.displayName =\n DropdownMenuPrimitive.SubContent.displayName\n\nconst DropdownMenuContent = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, sideOffset = 4, ...props }, ref) => (\n \n \n \n))\nDropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName\n\nconst DropdownMenuItem = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef & {\n inset?: boolean\n }\n>(({ className, inset, ...props }, ref) => (\n \n))\nDropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName\n\nconst DropdownMenuCheckboxItem = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, children, checked, ...props }, ref) => (\n \n \n \n \n \n \n {children}\n \n))\nDropdownMenuCheckboxItem.displayName =\n DropdownMenuPrimitive.CheckboxItem.displayName\n\nconst DropdownMenuRadioItem = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, children, ...props }, ref) => (\n \n \n \n \n \n \n {children}\n \n))\nDropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName\n\nconst DropdownMenuLabel = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef & {\n inset?: boolean\n }\n>(({ className, inset, ...props }, ref) => (\n \n))\nDropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName\n\nconst DropdownMenuSeparator = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nDropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName\n\nconst DropdownMenuShortcut = ({\n className,\n ...props\n}: React.HTMLAttributes) => {\n return (\n \n )\n}\nDropdownMenuShortcut.displayName = \"DropdownMenuShortcut\"\n\nexport {\n DropdownMenu,\n DropdownMenuTrigger,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuCheckboxItem,\n DropdownMenuRadioItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuShortcut,\n DropdownMenuGroup,\n DropdownMenuPortal,\n DropdownMenuSub,\n DropdownMenuSubContent,\n DropdownMenuSubTrigger,\n DropdownMenuRadioGroup,\n}\n" }, { "path": "components/ui/select.tsx", "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as SelectPrimitive from \"@radix-ui/react-select\"\nimport { Check, ChevronDown, ChevronUp } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Select = SelectPrimitive.Root\n\nconst SelectGroup = SelectPrimitive.Group\n\nconst SelectValue = SelectPrimitive.Value\n\nconst SelectTrigger = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, children, ...props }, ref) => (\n span]:line-clamp-1\",\n className\n )}\n {...props}\n >\n {children}\n \n \n \n \n))\nSelectTrigger.displayName = SelectPrimitive.Trigger.displayName\n\nconst SelectScrollUpButton = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n \n \n))\nSelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName\n\nconst SelectScrollDownButton = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n \n \n))\nSelectScrollDownButton.displayName =\n SelectPrimitive.ScrollDownButton.displayName\n\nconst SelectContent = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, children, position = \"popper\", ...props }, ref) => (\n \n \n \n \n {children}\n \n \n \n \n))\nSelectContent.displayName = SelectPrimitive.Content.displayName\n\nconst SelectLabel = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nSelectLabel.displayName = SelectPrimitive.Label.displayName\n\nconst SelectItem = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, children, ...props }, ref) => (\n \n \n \n \n \n \n\n {children}\n \n))\nSelectItem.displayName = SelectPrimitive.Item.displayName\n\nconst SelectSeparator = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nSelectSeparator.displayName = SelectPrimitive.Separator.displayName\n\nexport {\n Select,\n SelectGroup,\n SelectValue,\n SelectTrigger,\n SelectContent,\n SelectLabel,\n SelectItem,\n SelectSeparator,\n SelectScrollUpButton,\n SelectScrollDownButton,\n}\n" }, { "path": "components/ui/sonner.tsx", "content": "\"use client\"\n\nimport { useTheme } from \"next-themes\"\nimport { Toaster as Sonner } from \"sonner\"\n\ntype ToasterProps = React.ComponentProps\n\nconst Toaster = ({ ...props }: ToasterProps) => {\n const { theme = \"system\" } = useTheme()\n\n return (\n \n )\n}\n\nexport { Toaster }\n" }, { "path": "components.json", "content": "{\n \"$schema\": \"https://ui.shadcn.com/schema.json\",\n \"style\": \"default\",\n \"rsc\": true,\n \"tsx\": true,\n \"tailwind\": {\n \"config\": \"tailwind.config.ts\",\n \"css\": \"app/globals.css\",\n \"baseColor\": \"slate\",\n \"cssVariables\": true,\n \"prefix\": \"\"\n },\n \"aliases\": {\n \"components\": \"@/components\",\n \"utils\": \"@/lib/utils\"\n }\n}" }, { "path": "config/site.ts", "content": "export const siteConfig = {\n title: \"Shadcn Calendar Heatmap\",\n name: \"gurbaaz27/shadcn-calendar-heatmap\",\n url: \"https://shadcn-calendar-heatmap.vercel.app\",\n ogImage: \"https://shadcn-calendar-heatmap.vercel.app/og.png\",\n description:\n \"Accessible. Unstyled. Customizable. Open Source. Build your own calendar heatmap effortlessly.\",\n links: {\n twitter: \"https://x.com/GurbaazNandra\",\n github: \"https://github.com/gurbaaz27/shadcn-calendar-heatmap\",\n },\n}\nexport type SiteConfig = typeof siteConfig\n" }, { "path": "lib/utils.ts", "content": "import { type ClassValue, clsx } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs))\n}\n\nexport function randomDate(start: Date, end: Date) {\n return new Date(\n start.getTime() + Math.random() * (end.getTime() - start.getTime())\n )\n}\n\nexport function currentMonthFirstDate() {\n const date = new Date()\n return new Date(date.getFullYear(), date.getMonth(), 1)\n}\n\nexport function currentMonthLastDate(month: number = 1) {\n const date = new Date()\n return new Date(date.getFullYear(), date.getMonth() + month, 0)\n}\n" }, { "path": "next.config.mjs", "content": "/** @type {import('next').NextConfig} */\nconst nextConfig = {};\n\nexport default nextConfig;\n" }, { "path": "package.json", "content": "{\n \"name\": \"shadcn-calendar-heatmap\",\n \"version\": \"0.1.0\",\n \"private\": true,\n \"scripts\": {\n \"dev\": \"next dev\",\n \"build\": \"next build\",\n \"start\": \"next start\",\n \"lint\": \"next lint\"\n },\n \"dependencies\": {\n \"@radix-ui/react-dropdown-menu\": \"^2.1.1\",\n \"@radix-ui/react-icons\": \"^1.3.0\",\n \"@radix-ui/react-select\": \"^2.1.1\",\n \"@radix-ui/react-slot\": \"^1.1.0\",\n \"class-variance-authority\": \"^0.7.0\",\n \"clsx\": \"^2.1.1\",\n \"date-fns\": \"^3.6.0\",\n \"geist\": \"^1.3.0\",\n \"lucide-react\": \"^0.396.0\",\n \"next\": \"14.2.4\",\n \"next-themes\": \"^0.3.0\",\n \"react\": \"^18\",\n \"react-day-picker\": \"^8.10.1\",\n \"react-dom\": \"^18\",\n \"rehype-pretty-code\": \"^0.13.2\",\n \"rehype-stringify\": \"^10.0.0\",\n \"remark-parse\": \"^11.0.0\",\n \"remark-rehype\": \"^11.1.0\",\n \"sonner\": \"^1.5.0\",\n \"tailwind-merge\": \"^2.3.0\",\n \"tailwindcss-animate\": \"^1.0.7\",\n \"unified\": \"^11.0.5\"\n },\n \"devDependencies\": {\n \"typescript\": \"^5\",\n \"@types/node\": \"^20\",\n \"@types/react\": \"^18\",\n \"@types/react-dom\": \"^18\",\n \"postcss\": \"^8\",\n \"tailwindcss\": \"^3.4.1\",\n \"eslint\": \"^8\",\n \"eslint-config-next\": \"14.2.4\"\n },\n \"packageManager\": \"yarn@1.22.21+sha1.1959a18351b811cdeedbd484a8f86c3cc3bbaf72\"\n}\n" }, { "path": "postcss.config.mjs", "content": "/** @type {import('postcss-load-config').Config} */\nconst config = {\n plugins: {\n tailwindcss: {},\n },\n};\n\nexport default config;\n" }, { "path": "public/llms.txt", "content": "# shadcn-calendar-heatmap\n\n> A customizable calendar heatmap component built on top of react-day-picker, following shadcn/ui patterns. Accessible, unstyled by default, and fully customizable with Tailwind CSS.\n\n## Overview\n\nshadcn-calendar-heatmap is a React component that transforms the DayPicker calendar into a heatmap visualization. It allows you to display dates with varying intensities using custom color variants - perfect for GitHub contribution graphs, temperature heatmaps, activity tracking, and more.\n\n## Installation\n\nThe component is designed to be copied directly into your project following the shadcn/ui philosophy. Copy the component from:\nhttps://github.com/gurbaaz27/shadcn-calendar-heatmap/blob/main/components/ui/calendar-heatmap.tsx\n\n### Dependencies\n\n- react-day-picker (^8.10.1)\n- tailwind-merge\n- class-variance-authority\n- lucide-react (for icons)\n\n## Component API\n\n### CalendarHeatmap Props\n\nThe component extends all props from `react-day-picker`'s DayPicker, plus:\n\n| Prop | Type | Required | Description |\n|------|------|----------|-------------|\n| `variantClassnames` | `string[]` | Yes | Array of Tailwind CSS classes for each intensity level |\n| `datesPerVariant` | `Date[][]` | One of these | 2D array where each inner array contains dates for that variant |\n| `weightedDates` | `WeightedDateEntry[]` | One of these | Array of `{ date: Date, weight: number }` objects |\n| `numberOfMonths` | `number` | No | Number of months to display (default: 1) |\n| `showOutsideDays` | `boolean` | No | Show days from adjacent months (default: true) |\n\n**Note:** You must provide either `datesPerVariant` OR `weightedDates`, not both.\n\n### WeightedDateEntry Type\n\n```typescript\ntype WeightedDateEntry = {\n date: Date\n weight: number\n}\n```\n\n## Usage Examples\n\n### Basic GitHub-style Contribution Graph\n\n```tsx\nimport { CalendarHeatmap } from \"@/components/ui/calendar-heatmap\"\n\n\n```\n\n### Using Weighted Dates (Auto-categorization)\n\nWhen you have numeric data associated with dates, use `weightedDates`. The component automatically categorizes dates into variants based on their weights:\n\n```tsx\n\n```\n\n### Multi-month Display\n\n```tsx\n\n```\n\n### Rainbow Variant Example\n\n```tsx\nconst Rainbow = [\n \"text-white hover:text-white bg-violet-400 hover:bg-violet-400\",\n \"text-white hover:text-white bg-indigo-400 hover:bg-indigo-400\",\n \"text-white hover:text-white bg-blue-400 hover:bg-blue-400\",\n \"text-white hover:text-white bg-green-400 hover:bg-green-400\",\n \"text-white hover:text-white bg-yellow-400 hover:bg-yellow-400\",\n \"text-white hover:text-white bg-orange-400 hover:bg-orange-400\",\n \"text-white hover:text-white bg-red-400 hover:bg-red-400\",\n]\n\n\n```\n\n## How It Works\n\n1. **Variant Classes**: Each string in `variantClassnames` represents a color/style intensity level. The component creates DayPicker modifiers for each variant.\n\n2. **Date Mapping**: \n - With `datesPerVariant`: Dates in the first array get the first variant class, second array gets second class, etc.\n - With `weightedDates`: The component sorts dates by weight, divides the range into equal segments based on the number of variants, and assigns each date to its corresponding variant.\n\n3. **Styling**: The component uses Tailwind CSS classes. Include both normal and hover states in your variant classes for consistent interaction feedback.\n\n## Customization\n\n### Custom Styling\n\nOverride default calendar styles via the `classNames` prop:\n\n```tsx\n\n```\n\n### Additional Props\n\nSince the component extends DayPicker, you can use any DayPicker prop:\n\n```tsx\n console.log(day)}\n/>\n```\n\n## Links\n\n- Demo: https://shadcn-calendar-heatmap.vercel.app\n- GitHub: https://github.com/gurbaaz27/shadcn-calendar-heatmap\n- Component Source: https://github.com/gurbaaz27/shadcn-calendar-heatmap/blob/main/components/ui/calendar-heatmap.tsx\n\n## License\n\nMIT\n\n" }, { "path": "tailwind.config.ts", "content": "import type { Config } from \"tailwindcss\"\n\nconst config = {\n darkMode: [\"class\"],\n content: [\n \"./pages/**/*.{ts,tsx}\",\n \"./components/**/*.{ts,tsx}\",\n \"./app/**/*.{ts,tsx}\",\n \"./src/**/*.{ts,tsx}\",\n ],\n prefix: \"\",\n theme: {\n container: {\n center: true,\n padding: \"2rem\",\n screens: {\n \"2xl\": \"1400px\",\n },\n },\n extend: {\n colors: {\n border: \"hsl(var(--border))\",\n input: \"hsl(var(--input))\",\n ring: \"hsl(var(--ring))\",\n background: \"hsl(var(--background))\",\n foreground: \"hsl(var(--foreground))\",\n primary: {\n DEFAULT: \"hsl(var(--primary))\",\n foreground: \"hsl(var(--primary-foreground))\",\n },\n secondary: {\n DEFAULT: \"hsl(var(--secondary))\",\n foreground: \"hsl(var(--secondary-foreground))\",\n },\n destructive: {\n DEFAULT: \"hsl(var(--destructive))\",\n foreground: \"hsl(var(--destructive-foreground))\",\n },\n muted: {\n DEFAULT: \"hsl(var(--muted))\",\n foreground: \"hsl(var(--muted-foreground))\",\n },\n accent: {\n DEFAULT: \"hsl(var(--accent))\",\n foreground: \"hsl(var(--accent-foreground))\",\n },\n popover: {\n DEFAULT: \"hsl(var(--popover))\",\n foreground: \"hsl(var(--popover-foreground))\",\n },\n card: {\n DEFAULT: \"hsl(var(--card))\",\n foreground: \"hsl(var(--card-foreground))\",\n },\n },\n borderRadius: {\n lg: \"var(--radius)\",\n md: \"calc(var(--radius) - 2px)\",\n sm: \"calc(var(--radius) - 4px)\",\n },\n keyframes: {\n \"accordion-down\": {\n from: { height: \"0\" },\n to: { height: \"var(--radix-accordion-content-height)\" },\n },\n \"accordion-up\": {\n from: { height: \"var(--radix-accordion-content-height)\" },\n to: { height: \"0\" },\n },\n \"fade-in\": {\n from: {\n opacity: \"0\",\n },\n to: { opacity: \"1\" },\n },\n \"fade-up\": {\n from: {\n opacity: \"0\",\n transform: \"translateY(var(--fade-distance, .25rem))\",\n },\n to: { opacity: \"1\", transform: \"translateY(0)\" },\n },\n },\n animation: {\n \"accordion-down\": \"accordion-down 0.2s ease-out\",\n \"accordion-up\": \"accordion-up 0.2s ease-out\",\n \"fade-in\": \"fade-in 0.3s ease-out forwards\",\n \"fade-up\": \"fade-up 1s ease-out forwards\",\n },\n },\n },\n plugins: [require(\"tailwindcss-animate\")],\n} satisfies Config\n\nexport default config\n" }, { "path": "tsconfig.json", "content": "{\n \"compilerOptions\": {\n \"lib\": [\"dom\", \"dom.iterable\", \"esnext\"],\n \"allowJs\": true,\n \"skipLibCheck\": true,\n \"strict\": true,\n \"noEmit\": true,\n \"esModuleInterop\": true,\n \"module\": \"esnext\",\n \"moduleResolution\": \"bundler\",\n \"resolveJsonModule\": true,\n \"isolatedModules\": true,\n \"jsx\": \"preserve\",\n \"incremental\": true,\n \"plugins\": [\n {\n \"name\": \"next\"\n }\n ],\n \"paths\": {\n \"@/*\": [\"./*\"]\n }\n },\n \"include\": [\"next-env.d.ts\", \"**/*.ts\", \"**/*.tsx\", \".next/types/**/*.ts\"],\n \"exclude\": [\"node_modules\"]\n}\n" } ]