{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "footer-columns",
  "title": "Footer Columns",
  "description": "Labelled columns of links, with the column count and the link rendering left to you.",
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "registry/default/footer-columns/footer-columns.tsx",
      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nexport type FooterLink = {\n  label: React.ReactNode\n  href: string\n  /** Opens in a new tab, and says so. */\n  external?: boolean\n}\n\nexport type FooterColumn = {\n  label?: React.ReactNode\n  links: readonly FooterLink[]\n}\n\nexport type FooterLinkRenderer = (link: FooterLink) => React.ReactNode\n\nexport type FooterColumnsProps = Omit<\n  React.HTMLAttributes<HTMLDivElement>,\n  \"children\"\n> & {\n  columns: readonly FooterColumn[]\n  /** Renders every link. Reach for it to use your framework's link. */\n  renderLink?: FooterLinkRenderer\n  /** Columns at the widest size. Defaults to three. */\n  columnCount?: number\n}\n\nexport const FOOTER_LABEL =\n  \"text-[0.6875rem] font-medium tracking-[0.09em] uppercase\"\n\nconst LINK =\n  \"text-[color-mix(in_oklab,currentColor_70%,transparent)] text-sm no-underline transition-colors duration-150 hover:text-current motion-reduce:transition-none\"\n\n/** One link, rendered by you or by us. Shared by the columns and the row. */\nexport function FooterLinkItem({\n  link,\n  renderLink,\n}: {\n  link: FooterLink\n  renderLink?: FooterLinkRenderer\n}) {\n  if (renderLink) return <>{renderLink(link)}</>\n\n  return (\n    <a\n      href={link.href}\n      {...(link.external\n        ? { target: \"_blank\", rel: \"noreferrer noopener\" }\n        : {})}\n      className={LINK}\n    >\n      {link.label}\n      {/* Punctuation-led, because the leading space of a text node is dropped\n          when the accessible name is computed. */}\n      {link.external ? (\n        <span className=\"sr-only\">, opens in a new tab</span>\n      ) : null}\n    </a>\n  )\n}\n\nexport function FooterColumns({\n  columns,\n  renderLink,\n  columnCount = 3,\n  className,\n  style,\n  ...rootProps\n}: FooterColumnsProps) {\n  return (\n    <div\n      data-slot=\"footer-columns\"\n      className={cn(\n        \"grid gap-x-8 gap-y-10 sm:grid-cols-2 lg:grid-cols-[repeat(var(--footer-columns),minmax(0,1fr))]\",\n        className\n      )}\n      // A count rather than a class, because a class built from a variable is\n      // never generated.\n      style={\n        { \"--footer-columns\": columnCount, ...style } as React.CSSProperties\n      }\n      {...rootProps}\n    >\n      {columns.map((column, index) => (\n        <div key={index}>\n          {column.label && (\n            <p className={cn(FOOTER_LABEL, \"text-current\")}>{column.label}</p>\n          )}\n          <ul className={cn(\"grid gap-2.5\", column.label && \"mt-4\")}>\n            {column.links.map((link, linkIndex) => (\n              <li key={`${link.href}-${linkIndex}`}>\n                <FooterLinkItem link={link} renderLink={renderLink} />\n              </li>\n            ))}\n          </ul>\n        </div>\n      ))}\n    </div>\n  )\n}\n",
      "type": "registry:ui"
    }
  ],
  "categories": [
    "footer",
    "links",
    "layout"
  ],
  "type": "registry:ui"
}