{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "link-card",
  "title": "Link Card",
  "description": "Link Card from the Get IT Done design system.",
  "dependencies": [
    "lucide-react@^0.379.0"
  ],
  "registryDependencies": [
    "https://zero-design.itdone.de/r/recipes.json",
    "https://zero-design.itdone.de/r/utils.json",
    "https://zero-design.itdone.de/r/theme.json"
  ],
  "files": [
    {
      "path": "registry/ui/link-card.tsx",
      "content": "'use client';\n\nimport { ArrowUpRight, ChevronRight } from 'lucide-react';\nimport * as React from 'react';\n\nimport { focusRing } from '@/lib/recipes';\nimport { cn } from '@/lib/utils';\n\nexport interface LinkCardProps extends Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'title' | 'media'> {\n  href: string;\n  title: React.ReactNode;\n  description?: React.ReactNode;\n  // Leading icon or image slot.\n  icon?: React.ReactNode;\n  // Replaces the trailing chevron.\n  trailing?: React.ReactNode;\n  // Image slot for `media-top`. Pass an <img> (or framework image) with its own meaningful `alt`, or alt=\"\" when decorative.\n  // The image is cropped to the aspect ratio with object-cover.\n  media?: React.ReactNode;\n  // `inline` is the row card, `media-top` stacks the media above the text. Defaults to `media-top` when `media` is given.\n  layout?: 'inline' | 'media-top';\n  mediaAspect?: 'video' | 'square';\n  // Title type size. `lg` suits `media-top` cards. Default `md` is unchanged.\n  titleSize?: 'md' | 'lg';\n  // Heading level of the title so the card keeps its place in the document outline. Default h3.\n  titleAs?: 'h2' | 'h3' | 'h4';\n  // Text area padding. `lg` gives `media-top` cards more air. Default `md` is unchanged.\n  padding?: 'md' | 'lg';\n  // Decorative arrow in the top end corner of the text area instead of the trailing chevron. A `trailing` slot still wins its place.\n  cornerArrow?: boolean;\n}\n\nconst titleSizes = { md: 'typography-ui-semibold', lg: 'typography-title-sm' } as const;\nconst paddings = { md: 'p-5', lg: 'p-8' } as const;\nconst cornerOffsets = { md: 'right-5 top-5', lg: 'right-8 top-8' } as const;\n\nconst mediaAspects = { video: 'aspect-video', square: 'aspect-square' } as const;\n\n// Whole-card link with hover and focus states and a trailing chevron that nudges on hover (respects reduced motion).\nconst LinkCard = React.forwardRef<HTMLAnchorElement, LinkCardProps>(\n  ({ className, href, title, description, icon, trailing, media, layout, mediaAspect = 'video', titleSize = 'md', titleAs: TitleTag = 'h3', padding = 'md', cornerArrow = false, ...props }, ref) => {\n    const stacked = (layout ?? (media ? 'media-top' : 'inline')) === 'media-top';\n    return (\n      <a\n        ref={ref}\n        href={href}\n        className={cn(\n          'group flex rounded-surface border border-solid border-border bg-card text-card-foreground no-underline shadow-elevation-surface transition-colors hover:border-border-bold hover:bg-muted',\n          stacked ? 'flex-col overflow-hidden' : ['items-center gap-4', paddings[padding]],\n          focusRing,\n          className,\n        )}\n        {...props}\n      >\n        {stacked && media ? (\n          <span className={cn('block w-full overflow-hidden bg-muted [&>*]:h-full [&>*]:w-full [&>img]:object-cover', mediaAspects[mediaAspect])}>{media}</span>\n        ) : null}\n        <span className={cn('relative flex min-w-0 flex-1 items-center gap-4', stacked && paddings[padding], cornerArrow && 'pr-12')}>\n          {icon ? <span className=\"flex shrink-0 items-center text-icon-default\">{icon}</span> : null}\n          <span className=\"flex min-w-0 flex-1 flex-col gap-1\">\n            <TitleTag className={cn('m-0', titleSizes[titleSize])}>{title}</TitleTag>\n            {description ? <span className=\"typography-ui text-text-subtle\">{description}</span> : null}\n          </span>\n          {cornerArrow ? (\n            <ArrowUpRight\n              aria-hidden=\"true\"\n              data-slot=\"corner-arrow\"\n              className={cn('absolute h-icon-md w-icon-md shrink-0 text-icon-subtle transition-colors group-hover:text-icon-default', stacked ? cornerOffsets[padding] : 'right-0 top-0')}\n            />\n          ) : null}\n          {trailing ?? (cornerArrow ? null : (\n            <ChevronRight\n              aria-hidden=\"true\"\n              className=\"h-icon-md w-icon-md shrink-0 text-icon-subtle transition-transform group-hover:text-icon-default motion-safe:group-hover:translate-x-1 motion-reduce:transition-none\"\n            />\n          ))}\n        </span>\n      </a>\n    );\n  },\n);\nLinkCard.displayName = 'LinkCard';\n\nexport { LinkCard };\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}