{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "quote-highlight",
  "title": "Quote Highlight",
  "description": "Editorial pull quote with oversized glyph, expanding rule, and blurred fade-in.",
  "dependencies": [
    "framer-motion"
  ],
  "files": [
    {
      "path": "components/content/QuoteHighlight.tsx",
      "content": "'use client';\n\nimport { motion } from 'framer-motion';\n\n// ---------------------------------------------------------------------------\n// Props\n// ---------------------------------------------------------------------------\n//\n// quote      Pull quote text\n// author     Attribution name\n// role       Optional title / company\n// avatar     Optional portrait URL\n// align      left | center\n// tone       light | dark\n// className  Styles for the outer shell\n//\ntype QuoteHighlightProps = {\n  quote?: string;\n  author?: string;\n  role?: string;\n  avatar?: string;\n  align?: 'left' | 'center';\n  tone?: 'light' | 'dark';\n  className?: string;\n};\n\nexport default function QuoteHighlight({\n  quote = 'The quietest interfaces often carry the most conviction.',\n  author = 'Elena Voss',\n  role = 'Design Director, Lattice',\n  avatar = 'https://assets.uniquel.io/components/stock/photo-1534528741775-53994a69daeb.jpg',\n  align = 'left',\n  tone = 'light',\n  className = '',\n}: QuoteHighlightProps) {\n  const dark = tone === 'dark';\n  const centered = align === 'center';\n\n  const quoteMarkClass = [\n    'pointer-events-none select-none font-serif text-6xl leading-none',\n    dark ? 'text-white/15' : 'text-[color:var(--color-foreground,#111827)]/10',\n  ].join(' ');\n\n  return (\n    <figure\n      className={[\n        'relative max-w-xl',\n        centered ? 'mx-auto text-center' : 'text-left',\n        className,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n    >\n      <motion.span\n        aria-hidden\n        className={[quoteMarkClass, centered ? 'mx-auto block' : 'block'].join(\n          ' '\n        )}\n        initial={{ opacity: 0, y: 12 }}\n        animate={{ opacity: 1, y: 0 }}\n        transition={{ duration: 0.5, ease: [0.22, 1, 0.36, 1] }}\n      >\n        “\n      </motion.span>\n\n      <motion.blockquote\n        className={[\n          '-mt-6 text-xl font-medium leading-relaxed tracking-tight md:text-2xl',\n          dark ? 'text-white' : 'text-[color:var(--color-foreground,#111827)]',\n        ].join(' ')}\n        initial={{ opacity: 0, y: 16, filter: 'blur(6px)' }}\n        animate={{ opacity: 1, y: 0, filter: 'blur(0px)' }}\n        transition={{ duration: 0.65, delay: 0.1, ease: [0.22, 1, 0.36, 1] }}\n      >\n        {quote}\n      </motion.blockquote>\n\n      <motion.span\n        aria-hidden\n        className={[\n          quoteMarkClass,\n          centered ? 'mx-auto block text-center' : 'block text-right',\n        ].join(' ')}\n        initial={{ opacity: 0, y: 12 }}\n        animate={{ opacity: 1, y: 0 }}\n        transition={{ duration: 0.5, delay: 0.5, ease: [0.22, 1, 0.36, 1] }}\n      >\n        ”\n      </motion.span>\n\n      <motion.div\n        className={[\n          'mt-5 h-px origin-left',\n          dark ? 'bg-white/25' : 'bg-[var(--color-border,#d1d5db)]',\n          centered ? 'mx-auto' : '',\n        ].join(' ')}\n        style={{ width: centered ? '4rem' : '3rem' }}\n        initial={{ scaleX: 0 }}\n        animate={{ scaleX: 1 }}\n        transition={{ duration: 0.55, delay: 0.35, ease: [0.22, 1, 0.36, 1] }}\n      />\n\n      <motion.figcaption\n        className={[\n          'mt-4 flex items-center gap-3',\n          centered ? 'justify-center' : 'justify-start',\n        ].join(' ')}\n        initial={{ opacity: 0 }}\n        animate={{ opacity: 1 }}\n        transition={{ duration: 0.45, delay: 0.45 }}\n      >\n        {avatar ? (\n          <img\n            src={avatar}\n            alt=''\n            className='h-8 w-8 rounded-full object-cover ring-2 ring-white shadow-xs'\n          />\n        ) : null}\n        <div className={centered ? 'text-center' : 'text-left'}>\n          <div\n            className={[\n              'text-sm font-medium tracking-wide',\n              dark ? 'text-white' : 'text-[color:var(--color-foreground,#111827)]',\n            ].join(' ')}\n          >\n            {author}\n          </div>\n          {role ? (\n            <div\n              className={[\n                'text-xs tracking-wide',\n                dark ? 'text-white/55' : 'text-[color:var(--color-muted-foreground,#6b7280)]',\n              ].join(' ')}\n            >\n              {role}\n            </div>\n          ) : null}\n        </div>\n      </motion.figcaption>\n    </figure>\n  );\n}\n",
      "type": "registry:component",
      "target": "@components/content/QuoteHighlight.tsx"
    }
  ],
  "categories": [
    "content"
  ],
  "type": "registry:component"
}