{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "hover-feature-cards",
  "title": "Hover Feature Cards",
  "description": "A responsive grid of feature cards where a description panel slides in from below on hover, with spring animation and optional image support.",
  "dependencies": [
    "motion"
  ],
  "files": [
    {
      "path": "registry/components/unlumen/hover-feature-cards/index.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\nimport { motion } from \"motion/react\";\n\nexport interface HoverFeatureCard {\n  name: string;\n  description: string;\n  href?: string;\n  img?: string;\n  imgLight?: string;\n  imgClassName?: string;\n  imgWidth?: number;\n  containerClassName?: string;\n  fadeBottom?: boolean;\n  soon?: boolean;\n}\n\nexport interface HoverFeatureCardsProps {\n  items: HoverFeatureCard[];\n  className?: string;\n  renderLink?: (href: string, children: React.ReactNode) => React.ReactNode;\n}\n\nfunction HoverFeatureCard({\n  item,\n  renderLink,\n}: {\n  item: HoverFeatureCard;\n  renderLink?: HoverFeatureCardsProps[\"renderLink\"];\n}) {\n  const inner = (\n    <motion.div\n      initial=\"rest\"\n      whileHover=\"hover\"\n      animate=\"rest\"\n      whileTap={{ scale: item.href && !item.soon ? 0.97 : 1 }}\n      transition={{ type: \"spring\", stiffness: 300, damping: 22 }}\n      variants={{ rest: { scale: 1, y: 0 } }}\n      className={cn(\n        \"group flex flex-col w-full relative\",\n        item.soon\n          ? \"opacity-80 cursor-not-allowed\"\n          : item.href\n            ? \"cursor-pointer\"\n            : \"\",\n      )}\n    >\n      <div\n        className={cn(\n          \"flex flex-col rounded-3xl border h-64 z-5 bg-surface transition-colors w-full\",\n          !item.soon && item.href ? \"hover:border-border/80\" : \"\",\n          item.soon ? \"border-dashed border-border\" : \"border-border\",\n        )}\n      >\n        {item.soon && (\n          <span className=\"absolute top-3 right-3 z-10 text-xs text-muted-foreground border rounded-full px-2 py-1 bg-card\">\n            Coming soon\n          </span>\n        )}\n\n        <div\n          className={cn(\n            \"relative w-full overflow-hidden bg-muted/10 px-5 pt-6 pb-4 flex flex-col gap-3\",\n            item.containerClassName,\n          )}\n        >\n          <span\n            className={cn(\n              \"font-medium text-xl tracking-tight\",\n              item.soon ? \"text-muted-foreground/80\" : \"text-foreground\",\n            )}\n          >\n            {item.name}\n          </span>\n\n          {item.img && (\n            <img\n              src={item.img}\n              alt={item.name}\n              width={item.imgWidth ?? 200}\n              height={200}\n              className={cn(\"h-auto hidden dark:block\", item.imgClassName)}\n            />\n          )}\n          {(item.imgLight ?? item.img) && (\n            <img\n              src={item.imgLight ?? item.img}\n              alt={item.name}\n              width={item.imgWidth ?? 200}\n              height={200}\n              className={cn(\"h-auto dark:hidden\", item.imgClassName)}\n            />\n          )}\n\n          {item.fadeBottom && (\n            <div className=\"pointer-events-none absolute inset-x-0 bottom-0 h-22 bg-gradient-to-t from-surface to-transparent\" />\n          )}\n        </div>\n      </div>\n\n      <motion.div\n        variants={{\n          rest: { opacity: 0.2, y: -30 },\n          hover: { opacity: 1, y: 0 },\n        }}\n        transition={{ type: \"spring\", stiffness: 200, damping: 15 }}\n        className=\"overflow-hidden z-1 w-11/12 self-center\"\n      >\n        <div className=\"py-3 px-5 relative border-t-0 rounded-b-3xl border\">\n          <div className=\"pointer-events-none w-[103%] bg-gradient-to-b from-background to-transparent h-12 absolute -top-1 -left-1\" />\n          <p className=\"text-sm font-base text-muted-foreground\">\n            {item.description}\n          </p>\n        </div>\n      </motion.div>\n    </motion.div>\n  );\n\n  if (item.href && renderLink) {\n    return renderLink(item.href, inner);\n  }\n\n  return inner;\n}\n\nfunction HoverFeatureCards({\n  items,\n  className,\n  renderLink,\n}: HoverFeatureCardsProps) {\n  return (\n    <div\n      className={cn(\"grid grid-cols-1 sm:grid-cols-2 gap-4 w-full\", className)}\n    >\n      {items.map((item) => (\n        <HoverFeatureCard key={item.name} item={item} renderLink={renderLink} />\n      ))}\n    </div>\n  );\n}\n\nexport { HoverFeatureCards, HoverFeatureCard };\n",
      "type": "registry:ui",
      "target": "components/unlumen-ui/hover-feature-cards.tsx"
    }
  ],
  "type": "registry:ui"
}