{
  "name": "grid-newspaper",
  "type": "registry:ui",
  "registryDependencies": [],
  "dependencies": [],
  "devDependencies": [],
  "tailwind": {},
  "cssVars": {
    "light": {},
    "dark": {}
  },
  "files": [
    {
      "path": "grid-newspaper.tsx",
      "content": "import * as React from 'react';\nimport { cn } from '@/lib/utils';\nimport './grid-newspaper.css';\n\nexport const GridNewspaper = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, children, ...props }, ref) => {\n  return (\n    <div\n      ref={ref}\n      className={cn('grid-newspaper-wrapper w-full', className)}\n      {...props}\n    >\n      <div className='grid-newspaper-container'>\n        <main className='grid-newspaper-main'>{children}</main>\n      </div>\n    </div>\n  );\n});\nGridNewspaper.displayName = 'GridNewspaper';\n\nexport const GridNewspaperHeader = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement> & { title: string }\n>(({ className, title, children, ...props }, ref) => {\n  return (\n    <div\n      ref={ref}\n      className={cn('grid-newspaper-header-wrap', className)}\n      {...props}\n    >\n      <h1>{title}</h1>\n      <aside className='grid-newspaper-aside'>\n        <div>{children}</div>\n      </aside>\n    </div>\n  );\n});\nGridNewspaperHeader.displayName = 'GridNewspaperHeader';\n\nexport interface GridNewspaperArticleProps extends React.HTMLAttributes<HTMLDivElement> {\n  withBorder?: boolean;\n  hoverImage?: boolean;\n  hoverBg?: boolean;\n}\n\nexport const GridNewspaperArticle = React.forwardRef<\n  HTMLDivElement,\n  GridNewspaperArticleProps\n>(({ className, withBorder, hoverImage, hoverBg, children, ...props }, ref) => {\n  return (\n    <div\n      ref={ref}\n      className={cn(\n        withBorder && 'gn-with-border',\n        hoverImage && 'gn-hover-image',\n        hoverBg && 'gn-hover-bg',\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n});\nGridNewspaperArticle.displayName = 'GridNewspaperArticle';\n",
      "type": "registry:ui"
    },
    {
      "path": "grid-newspaper.tsx",
      "content": "import * as React from 'react';\nimport { cn } from '@/lib/utils';\nimport './grid-newspaper.css';\n\nexport const GridNewspaper = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, children, ...props }, ref) => {\n  return (\n    <div\n      ref={ref}\n      className={cn('grid-newspaper-wrapper w-full', className)}\n      {...props}\n    >\n      <div className='grid-newspaper-container'>\n        <main className='grid-newspaper-main'>{children}</main>\n      </div>\n    </div>\n  );\n});\nGridNewspaper.displayName = 'GridNewspaper';\n\nexport const GridNewspaperHeader = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement> & { title: string }\n>(({ className, title, children, ...props }, ref) => {\n  return (\n    <div\n      ref={ref}\n      className={cn('grid-newspaper-header-wrap', className)}\n      {...props}\n    >\n      <h1>{title}</h1>\n      <aside className='grid-newspaper-aside'>\n        <div>{children}</div>\n      </aside>\n    </div>\n  );\n});\nGridNewspaperHeader.displayName = 'GridNewspaperHeader';\n\nexport interface GridNewspaperArticleProps extends React.HTMLAttributes<HTMLDivElement> {\n  withBorder?: boolean;\n  hoverImage?: boolean;\n  hoverBg?: boolean;\n}\n\nexport const GridNewspaperArticle = React.forwardRef<\n  HTMLDivElement,\n  GridNewspaperArticleProps\n>(({ className, withBorder, hoverImage, hoverBg, children, ...props }, ref) => {\n  return (\n    <div\n      ref={ref}\n      className={cn(\n        withBorder && 'gn-with-border',\n        hoverImage && 'gn-hover-image',\n        hoverBg && 'gn-hover-bg',\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n});\nGridNewspaperArticle.displayName = 'GridNewspaperArticle';\n",
      "type": "registry:ui"
    },
    {
      "path": "grid-newspaper.css",
      "content": "@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,700;1,400&family=Playfair+Display+SC&family=Playfair+Display:ital@0;1&family=Manrope:wght@800&display=swap');\n\n:root {\n  --gn-font: 'EB Garamond', serif;\n  --gn-font-title: 'Playfair Display', serif;\n  --gn-font-sans-serif: 'Manrope', sans-serif;\n  --gn-black: #1c1f33;\n  --gn-black-acc: #222;\n  --gn-gray: #eee;\n  --gn-gray-1: #ededed;\n}\n\n.grid-newspaper-wrapper {\n  font-family: var(--gn-font);\n  color: var(--gn-black);\n  background: url(https://img.freepik.com/free-photo/cardboard-sheet-paper-abstract-texture-background_7182-2105.jpg?size=626&ext=jpg)\n    repeat;\n  padding: 2rem 1rem;\n  line-height: 1.3;\n  text-align: justify;\n  column-break-inside: avoid;\n  font-size: 1.1rem;\n}\n\n@media (min-width: 700px) {\n  .grid-newspaper-wrapper {\n    padding: 4rem 2rem;\n  }\n}\n\n.grid-newspaper-wrapper a {\n  text-decoration: none;\n  display: block;\n  color: var(--gn-black);\n}\n.grid-newspaper-wrapper a:hover,\n.grid-newspaper-wrapper a:focus,\n.grid-newspaper-wrapper a:active,\n.grid-newspaper-wrapper a:visited {\n  color: var(--gn-black-acc);\n}\n\n.grid-newspaper-container {\n  max-width: 1135px;\n  margin: auto;\n}\n\n/* Typography Overrides inside the component */\n.grid-newspaper-container h1 {\n  font:\n    50px/1 'Playfair Display SC',\n    serif;\n  text-align: center;\n}\n@media (min-width: 700px) {\n  .grid-newspaper-container h1 {\n    font:\n      70px/1 'Playfair Display SC',\n      serif;\n  }\n}\n\n.grid-newspaper-container h3 {\n  font: italic 20px var(--gn-font-title);\n  margin-bottom: 1rem;\n}\n\n.grid-newspaper-container h4 {\n  font: 20px/1.2 var(--gn-font-title);\n}\n\n.grid-newspaper-container h5 {\n  font: 700 20px/1 var(--gn-font);\n  transition: 0.3s ease;\n}\n\n.grid-newspaper-container p {\n  line-height: 1.3;\n}\n.grid-newspaper-container p a {\n  display: inline;\n}\n\n.grid-newspaper-container em {\n  font-style: italic;\n}\n\n/* Main Grid Layout */\n.grid-newspaper-main {\n  /* Default Mobile layout (stack) */\n}\n\n@media (min-width: 700px) {\n  .grid-newspaper-main {\n    display: grid;\n    grid-template-columns: repeat(4, 1fr) 23%;\n    grid-template-rows: repeat(5, auto);\n    grid-gap: 1.2rem;\n  }\n\n  .grid-newspaper-header-wrap {\n    grid-column: 1 / -1;\n  }\n}\n\n/* Header aside */\n.grid-newspaper-aside {\n  text-align: center;\n  padding: 3px 0;\n  border: solid var(--gn-black);\n  border-width: 2px 0;\n  text-transform: uppercase;\n  letter-spacing: 1px;\n  margin: 1.5rem 0;\n}\n@media (min-width: 700px) {\n  .grid-newspaper-aside {\n    margin: 0;\n  }\n}\n.grid-newspaper-aside > div {\n  display: flex;\n  align-items: center;\n  border: solid var(--gn-black);\n  border-width: 1px 0;\n}\n.grid-newspaper-aside > div > div {\n  flex: 1;\n  padding: 8px;\n}\n\n/* Reusable Utilities */\n@media (min-width: 700px) {\n  .gn-multi-column-2 {\n    column-count: 2;\n    column-gap: 1.3rem;\n    margin-top: 0.75rem;\n  }\n  .gn-multi-column-3 {\n    column-count: 3;\n    column-gap: 1.3rem;\n    margin-top: 0.75rem;\n  }\n}\n\n.gn-with-border {\n  border-top: 1px solid var(--gn-black);\n  padding-top: 0.6rem;\n}\n\n.grid-newspaper-container img {\n  width: 100%;\n  filter: grayscale(95%);\n  margin-bottom: 0.5rem;\n  border: 1px solid var(--gn-black);\n  transition: 0.3s ease;\n}\n\n.grid-newspaper-container figcaption {\n  font-style: italic;\n  font-size: 90%;\n}\n\n/* Hover effects */\n.gn-hover-image:hover img {\n  filter: grayscale(0);\n}\n\n.gn-hover-bg:hover h4 {\n  color: white !important;\n  background: var(--gn-black);\n}\n\n.gn-hover-bg:hover h5 {\n  transition: 0.3s ease;\n  background: var(--gn-black);\n  color: white !important;\n}\n",
      "type": "registry:ui"
    }
  ]
}