{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "integration-badge",
  "title": "Integration Badge",
  "description": "Sculptural app mark in a precise tile - muted to full color with a near-imperceptible lift.",
  "dependencies": [
    "framer-motion"
  ],
  "files": [
    {
      "path": "components/product/IntegrationBadge.tsx",
      "content": "'use client';\n\nimport { motion } from 'framer-motion';\nimport { useState, type ReactNode } from 'react';\n\n// ---------------------------------------------------------------------------\n// Props\n// ---------------------------------------------------------------------------\n//\n// logo        Image URL for the app mark\n// name        Integration name\n// status      Optional status chip: connected | available | beta\n// href        Optional link wrapper\n// size        sm | md | lg\n// monochrome  Start muted; color on hover (default true)\n// className   Styles for the outer shell\n//\ntype IntegrationBadgeProps = {\n  logo?: string;\n  name?: string;\n  status?: 'connected' | 'available' | 'beta';\n  href?: string;\n  size?: 'sm' | 'md' | 'lg';\n  monochrome?: boolean;\n  className?: string;\n};\n\nconst SIZE = {\n  sm: { tile: 28, pad: 'px-2 py-1.5 gap-2', text: 'text-xs' },\n  md: { tile: 34, pad: 'px-2.5 py-2 gap-2.5', text: 'text-sm' },\n  lg: { tile: 40, pad: 'px-3 py-2.5 gap-3', text: 'text-sm' },\n};\n\nconst STATUS = {\n  connected: 'text-emerald-600',\n  available: 'text-gray-400',\n  beta: 'text-amber-600',\n};\n\nfunction SlackLogo({ className = '' }: { className?: string }) {\n  return (\n    <svg viewBox='0 0 24 24' className={className} aria-hidden>\n      <path\n        fill='#E01E5A'\n        d='M5.042 15.165a2.528 2.528 0 0 1-2.52 2.523A2.528 2.528 0 0 1 0 15.165a2.527 2.527 0 0 1 2.522-2.52h2.52v2.52zm1.271 0a2.527 2.527 0 0 1 2.521-2.52 2.527 2.527 0 0 1 2.521 2.52v6.313A2.528 2.528 0 0 1 8.834 24a2.528 2.528 0 0 1-2.521-2.522v-6.313z'\n      />\n      <path\n        fill='#36C5F0'\n        d='M8.834 5.042a2.528 2.528 0 0 1-2.521-2.52A2.528 2.528 0 0 1 8.834 0a2.528 2.528 0 0 1 2.521 2.522v2.52H8.834zm0 1.271a2.528 2.528 0 0 1 2.521 2.521 2.528 2.528 0 0 1-2.521 2.521H2.522A2.528 2.528 0 0 1 0 8.834a2.528 2.528 0 0 1 2.522-2.521h6.312z'\n      />\n      <path\n        fill='#2EB67D'\n        d='M18.956 8.834a2.528 2.528 0 0 1 2.522-2.521A2.528 2.528 0 0 1 24 8.834a2.528 2.528 0 0 1-2.522 2.521h-2.522V8.834zm-1.27 0a2.528 2.528 0 0 1-2.523 2.521 2.528 2.528 0 0 1-2.52-2.521V2.522A2.528 2.528 0 0 1 15.163 0a2.528 2.528 0 0 1 2.523 2.522v6.312z'\n      />\n      <path\n        fill='#ECB22E'\n        d='M15.163 18.956a2.528 2.528 0 0 1 2.523 2.522A2.528 2.528 0 0 1 15.163 24a2.527 2.527 0 0 1-2.523-2.522v-2.522h2.523zm0-1.27a2.527 2.527 0 0 1-2.523-2.523 2.527 2.527 0 0 1 2.523-2.52h6.315A2.528 2.528 0 0 1 24 15.163a2.528 2.528 0 0 1-2.522 2.523h-6.315z'\n      />\n    </svg>\n  );\n}\n\nexport default function IntegrationBadge({\n  logo,\n  name = 'Slack',\n  status,\n  href,\n  size = 'md',\n  monochrome = true,\n  className = '',\n}: IntegrationBadgeProps) {\n  const s = SIZE[size];\n  const [logoFailed, setLogoFailed] = useState(false);\n  const showRemoteLogo = Boolean(logo) && !logoFailed;\n\n  const markClass = [\n    'h-[58%] w-[58%] transition-[filter,transform] duration-500 group-hover:scale-105 group-hover:grayscale-0',\n    monochrome ? 'grayscale' : '',\n  ].join(' ');\n\n  let mark: ReactNode = <SlackLogo className={markClass} />;\n  if (showRemoteLogo) {\n    mark = (\n      <img\n        src={logo}\n        alt=''\n        className={[markClass, 'object-contain'].join(' ')}\n        onError={() => setLogoFailed(true)}\n      />\n    );\n  }\n\n  const body = (\n    <>\n      <span\n        className='relative flex shrink-0 items-center justify-center overflow-hidden rounded-[var(--radius-xl,0.75rem)] border border-[color:var(--color-border,#e5e7eb)] bg-[var(--color-card,#fff)] shadow-[0_1px_2px_rgba(0,0,0,0.04)]'\n        style={{ width: s.tile, height: s.tile }}\n      >\n        {mark}\n      </span>\n\n      <span className='min-w-0'>\n        <span\n          className={[\n            'block truncate font-medium tracking-wide text-[color:var(--color-card-foreground,#1f2937)]',\n            s.text,\n          ].join(' ')}\n        >\n          {name}\n        </span>\n        {status ? (\n          <span\n            className={[\n              'block text-[10px] font-medium uppercase tracking-[0.12em]',\n              STATUS[status],\n            ].join(' ')}\n          >\n            {status}\n          </span>\n        ) : null}\n      </span>\n    </>\n  );\n\n  const shell = [\n    'group inline-flex items-center rounded-[var(--radius-2xl,1rem)] border border-[color:var(--color-border,#e5e7eb)] bg-[var(--color-background,#fff)] shadow-[0_1px_2px_rgba(0,0,0,0.03)] backdrop-blur-md transition-[transform,box-shadow,border-color,background-color] duration-300 hover:-translate-y-0.5 hover:border-[color:var(--color-input,#d1d5db)] hover:bg-[var(--color-card,#fff)] hover:shadow-[0_8px_24px_rgba(0,0,0,0.06)]',\n    s.pad,\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <motion.div\n      initial={{ opacity: 0, y: 8 }}\n      animate={{ opacity: 1, y: 0 }}\n      transition={{ duration: 0.4, ease: [0.22, 1, 0.36, 1] }}\n    >\n      {href ? (\n        <a href={href} className={shell}>\n          {body}\n        </a>\n      ) : (\n        <div className={shell}>{body}</div>\n      )}\n    </motion.div>\n  );\n}\n",
      "type": "registry:component",
      "target": "@components/product/IntegrationBadge.tsx"
    }
  ],
  "categories": [
    "product"
  ],
  "type": "registry:component"
}