{
  "$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": [
    "framer-motion",
    "react"
  ],
  "files": [
    {
      "path": "@uitripled/react-shadcn/src/components/micro/links/preview-details-card.tsx",
      "content": "\"use client\";\n\nimport {\n  AnimatePresence,\n  motion,\n  useReducedMotion,\n  type Transition,\n  type Variants,\n} from \"framer-motion\";\nimport { ArrowUpRight, Sparkles } from \"lucide-react\";\nimport { useId, useMemo, useState } from \"react\";\n\nconst previewHighlights = [\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  const [isActive, setIsActive] = useState(false);\n  const previewId = useId();\n  const descriptionId = useMemo(() => `${previewId}-description`, [previewId]);\n  const shouldReduceMotion = useReducedMotion();\n\n  const handleActivate = () => setIsActive(true);\n  const handleDeactivate = () => setIsActive(false);\n\n  const flyoutVariants: Variants = useMemo(\n    () => ({\n      hidden: {\n        opacity: 0,\n        y: shouldReduceMotion ? 0 : 12,\n        scale: shouldReduceMotion ? 1 : 0.96,\n      },\n      visible: {\n        opacity: 1,\n        y: 0,\n        scale: 1,\n        transition: shouldReduceMotion\n          ? { duration: 0 }\n          : { duration: 0.28, ease: [0.19, 1, 0.22, 1] },\n      },\n      exit: {\n        opacity: 0,\n        y: shouldReduceMotion ? 0 : 8,\n        scale: shouldReduceMotion ? 1 : 0.95,\n        transition: shouldReduceMotion\n          ? { duration: 0 }\n          : { duration: 0.2, ease: [0.4, 0, 0.2, 1] },\n      },\n    }),\n    [shouldReduceMotion]\n  );\n\n  const hoverMotion = shouldReduceMotion ? undefined : { scale: 1.02, y: -2 };\n  const hoverTransition = shouldReduceMotion\n    ? { duration: 0 }\n    : { type: \"spring\", stiffness: 420, damping: 34, mass: 0.7 };\n\n  return (\n    <section\n      aria-labelledby={`${previewId}-title`}\n      aria-describedby={descriptionId}\n      className=\"\"\n    >\n      <div className=\"relative w-full\">\n        <motion.a\n          href=\"#\"\n          onClick={(event) => event.preventDefault()}\n          onMouseEnter={handleActivate}\n          onMouseLeave={handleDeactivate}\n          onFocus={handleActivate}\n          onBlur={handleDeactivate}\n          className=\"group relative inline-flex w-full flex-col gap-4 rounded-3xl border border-border/60 bg-card/80 px-7 py-6 text-[var(--muted-foreground)] backdrop-blur-2xl transition-colors duration-300 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/60 focus-visible:ring-offset-2 focus-visible:ring-offset-background hover:border-border\"\n          layout\n          whileHover={hoverMotion}\n          transition={hoverTransition as Transition}\n        >\n          <div className=\"flex items-center justify-between text-xs uppercase tracking-[0.32em]\">\n            <span className=\"inline-flex items-center gap-2 text-[var(--muted-foreground)]/70\">\n              <span className=\"flex h-8 w-8 items-center justify-center rounded-full bg-primary/15\">\n                <Sparkles className=\"h-4 w-4 text-primary\" aria-hidden />\n              </span>\n              Workspace\n            </span>\n            <ArrowUpRight\n              className=\"h-4 w-4 text-[var(--muted-foreground)]/70 transition-transform duration-300 group-hover:-translate-y-1 group-hover:translate-x-1\"\n              aria-hidden\n            />\n          </div>\n\n          <div className=\"space-y-2 text-left\">\n            <h3\n              id={`${previewId}-title`}\n              className=\"text-xl font-semibold text-[var(--muted-foreground)] sm:text-2xl\"\n            >\n              Preview Details Card\n            </h3>\n            <p\n              id={descriptionId}\n              className=\"text-sm leading-relaxed text-[var(--muted-foreground)]\"\n            >\n              Hover or focus to surface key workspace traits before diving into\n              the full view.\n            </p>\n          </div>\n\n          <span className=\"sr-only\">\n            Focus or hover to reveal the workspace summary panel that lists\n            owner, status, and freshness details.\n          </span>\n\n          <AnimatePresence initial={false}>\n            {isActive && (\n              <motion.div\n                key=\"preview\"\n                id={previewId}\n                variants={flyoutVariants}\n                initial=\"hidden\"\n                animate=\"visible\"\n                exit=\"exit\"\n                className=\"overflow-hidden rounded-2xl border border-border/60 bg-card/90 p-5 text-sm text-[var(--muted-foreground)] shadow-[0_25px_70px_-20px_rgba(15,23,42,0.5)]\"\n                role=\"region\"\n                aria-live=\"polite\"\n              >\n                <div className=\"mb-4 flex items-center justify-between text-[11px] uppercase tracking-[0.36em] text-[var(--muted-foreground)]/70\">\n                  Preview\n                  <span className=\"rounded-full bg-primary/15 px-3 py-1 text-[0.65rem] font-semibold text-primary/85\">\n                    instant\n                  </span>\n                </div>\n                <ul className=\"space-y-3\">\n                  {previewHighlights.map((item) => (\n                    <li\n                      key={item.label}\n                      className=\"flex items-center justify-between gap-3 text-sm text-[var(--muted-foreground)]/80\"\n                    >\n                      <span className=\"text-[11px] uppercase tracking-[0.28em] text-[var(--muted-foreground)]/70\">\n                        {item.label}\n                      </span>\n                      <span className=\"font-medium text-[var(--muted-foreground)]\">\n                        {item.value}\n                      </span>\n                    </li>\n                  ))}\n                </ul>\n              </motion.div>\n            )}\n          </AnimatePresence>\n        </motion.a>\n      </div>\n    </section>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/uitripled/preview-details-card-shadcnui.tsx"
    }
  ]
}