{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "preview-details-card-shadcnui",
  "type": "registry:ui",
  "title": "Preview Details Card",
  "description": "Link card that reveals a smooth detail preview box on hover",
  "dependencies": [
    "react"
  ],
  "files": [
    {
      "path": "@uitripled/react-shadcn/src/components/micro/links/preview-details-card.tsx",
      "content": "\"use client\";\n\nimport { ArrowUpRight, Sparkles } from \"lucide-react\";\nimport { useId } from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\ntype PreviewHighlight = {\n  label: string;\n  value: string;\n};\n\ntype PreviewDetailsCardProps = {\n  href?: string;\n  eyebrow?: string;\n  title?: string;\n  description?: string;\n  badge?: string | null;\n  highlights?: PreviewHighlight[];\n  className?: string;\n};\n\nconst DEFAULT_HIGHLIGHTS: PreviewHighlight[] = [\n  { label: \"Owner\", value: \"Avery Nolan\" },\n  { label: \"Status\", value: \"Sprint ready\" },\n  { label: \"Last update\", value: \"4 hours ago\" },\n];\n\nexport function PreviewDetailsCard({\n  href = \"#\",\n  eyebrow = \"Workspace\",\n  title = \"Preview Details Card\",\n  description = \"Hover or focus to surface key workspace traits before diving into the full view.\",\n  badge = \"Instant\",\n  highlights = DEFAULT_HIGHLIGHTS,\n  className,\n}: PreviewDetailsCardProps) {\n  const titleId = useId();\n\n  return (\n    <article\n      className={cn(\n        \"group relative isolate w-full rounded-2xl border border-border bg-card p-6\",\n        \"shadow-[0_1px_2px_-1px_oklch(0_0_0/0.08),0_16px_40px_-24px_oklch(0_0_0/0.24)]\",\n        \"transition-[border-color,box-shadow] duration-200 ease-[cubic-bezier(0.2,0,0,1)]\",\n        \"hover:border-foreground/25\",\n        // The ring lives on the card, because the link's own box is only the title.\n        \"has-[a:focus-visible]:ring-2 has-[a:focus-visible]:ring-ring has-[a:focus-visible]:ring-offset-2 has-[a:focus-visible]:ring-offset-background\",\n        \"motion-reduce:transition-none\",\n        className\n      )}\n    >\n      <div className=\"flex items-center justify-between gap-3\">\n        <span className=\"inline-flex items-center gap-2.5 text-xs font-medium uppercase tracking-[0.18em] text-muted-foreground\">\n          <span className=\"flex size-8 items-center justify-center rounded-full bg-muted text-foreground\">\n            <Sparkles className=\"size-4\" strokeWidth={1.5} aria-hidden />\n          </span>\n          {eyebrow}\n        </span>\n        <ArrowUpRight\n          className={cn(\n            \"size-4 shrink-0 text-muted-foreground\",\n            \"transition-transform duration-200 ease-[cubic-bezier(0.2,0,0,1)]\",\n            \"group-hover:-translate-y-0.5 group-hover:translate-x-0.5\",\n            \"motion-reduce:transition-none motion-reduce:group-hover:translate-x-0 motion-reduce:group-hover:translate-y-0\"\n          )}\n          aria-hidden\n        />\n      </div>\n\n      <h3\n        id={titleId}\n        className=\"mt-5 text-xl font-semibold tracking-tight text-foreground sm:text-2xl\"\n      >\n        {/* Stretched link: the whole card is clickable, but the accessible name\n            stays just the title. */}\n        <a\n          href={href}\n          className=\"after:absolute after:inset-0 after:rounded-2xl after:content-[''] focus-visible:outline-none\"\n        >\n          {title}\n        </a>\n      </h3>\n\n      <p className=\"mt-2 text-pretty text-sm leading-relaxed text-muted-foreground\">\n        {description}\n      </p>\n\n      {/*\n        Always in the DOM, so assistive tech reads it without a live region and\n        without depending on a hover it cannot perform. Sighted users get the\n        reveal via a pure-CSS grid-row transition, which stays interruptible\n        mid-animation in a way an AnimatePresence mount cannot.\n      */}\n      <div\n        className={cn(\n          \"grid grid-rows-[0fr] transition-[grid-template-rows,opacity] duration-[280ms] ease-[cubic-bezier(0.2,0,0,1)]\",\n          \"opacity-0 group-hover:grid-rows-[1fr] group-hover:opacity-100\",\n          \"group-focus-within:grid-rows-[1fr] group-focus-within:opacity-100\",\n          \"motion-reduce:transition-none\"\n        )}\n      >\n        <div className=\"overflow-hidden\">\n          <div className=\"mt-5 border-t border-border pt-4\">\n            <div className=\"flex items-center justify-between gap-3\">\n              <span className=\"text-[11px] font-medium uppercase tracking-[0.18em] text-muted-foreground\">\n                Preview\n              </span>\n              {badge && (\n                <span className=\"rounded-full bg-muted px-2.5 py-1 text-[11px] font-medium text-foreground\">\n                  {badge}\n                </span>\n              )}\n            </div>\n\n            <dl className=\"mt-3 space-y-2.5\">\n              {highlights.map((item) => (\n                <div\n                  key={item.label}\n                  className=\"flex items-baseline justify-between gap-4\"\n                >\n                  <dt className=\"text-[11px] uppercase tracking-[0.18em] text-muted-foreground\">\n                    {item.label}\n                  </dt>\n                  <dd className=\"text-sm font-medium text-foreground\">\n                    {item.value}\n                  </dd>\n                </div>\n              ))}\n            </dl>\n          </div>\n        </div>\n      </div>\n    </article>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/uitripled/preview-details-card-shadcnui.tsx"
    }
  ]
}