{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "feature-chip",
  "title": "Feature Chip",
  "description": "Minimal metadata token with an independent icon hover and soft selected bloom.",
  "dependencies": [
    "framer-motion"
  ],
  "files": [
    {
      "path": "components/product/FeatureChip.tsx",
      "content": "'use client';\n\nimport { AnimatePresence, motion } from 'framer-motion';\nimport { useState, type ReactNode } from 'react';\n\n// ---------------------------------------------------------------------------\n// Props\n// ---------------------------------------------------------------------------\n//\n// icon          Leading mark — node or string\n// label         Chip text\n// tooltip       Optional hint revealed on hover/focus\n// selected      Active / selected state with soft bloom\n// tone          neutral | accent\n// interactive   Enables click / keyboard selection feel\n// onClick       Selection handler\n// className     Styles for the outer shell\n//\ntype FeatureChipProps = {\n  icon?: ReactNode;\n  label?: string;\n  tooltip?: string;\n  selected?: boolean;\n  tone?: 'neutral' | 'accent';\n  interactive?: boolean;\n  onClick?: () => void;\n  className?: string;\n};\n\nconst DEFAULT_ICON = (\n  <svg viewBox='0 0 16 16' className='h-3.5 w-3.5' aria-hidden>\n    <path\n      d='M8 1.5l1.2 3.4H13l-2.9 2.1 1.1 3.5L8 8.7 4.8 10.5l1.1-3.5L3 4.9h3.8L8 1.5z'\n      fill='none'\n      stroke='currentColor'\n      strokeWidth='1.2'\n      strokeLinejoin='round'\n    />\n  </svg>\n);\n\nexport default function FeatureChip({\n  icon = DEFAULT_ICON,\n  label = 'Realtime sync',\n  tooltip,\n  selected = false,\n  tone = 'neutral',\n  interactive = true,\n  onClick,\n  className = '',\n}: FeatureChipProps) {\n  const [hovered, setHovered] = useState(false);\n  const isAccent = tone === 'accent' || selected;\n\n  const shell = [\n    'relative inline-flex items-center gap-2 rounded-full border px-3 py-1.5 text-xs font-medium tracking-wide shadow-[0_1px_2px_rgba(0,0,0,0.03)] backdrop-blur-md transition-[background-color,border-color,box-shadow,color] duration-300',\n    isAccent\n      ? 'border-violet-200/80 bg-violet-50/80 text-violet-900 shadow-[0_0_0_1px_rgba(167,139,250,0.15),0_8px_20px_rgba(139,92,246,0.08)]'\n      : 'border-[color:var(--color-border,#e5e7eb)] bg-[var(--color-background,#fff)] text-[color:var(--color-foreground,#374151)] hover:border-[color:var(--color-input,#d1d5db)] hover:bg-[var(--color-card,#fff)]',\n    interactive ? 'cursor-pointer' : 'cursor-default',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <motion.button\n      type='button'\n      className={shell}\n      onClick={interactive ? onClick : undefined}\n      onMouseEnter={() => setHovered(true)}\n      onMouseLeave={() => setHovered(false)}\n      onFocus={() => setHovered(true)}\n      onBlur={() => setHovered(false)}\n      initial={{ opacity: 0, y: 6 }}\n      animate={{ opacity: 1, y: 0 }}\n      whileHover={interactive ? { y: -1 } : undefined}\n      whileTap={interactive ? { scale: 0.98 } : undefined}\n      transition={{ duration: 0.35, ease: [0.22, 1, 0.36, 1] }}\n      aria-pressed={interactive ? selected : undefined}\n    >\n      <motion.span\n        className='inline-flex text-current'\n        animate={hovered ? { rotate: [-2, 2, 0], y: -1 } : { rotate: 0, y: 0 }}\n        transition={{ type: 'spring', stiffness: 360, damping: 16 }}\n      >\n        {icon}\n      </motion.span>\n      <span>{label}</span>\n\n      <AnimatePresence>\n        {tooltip && hovered ? (\n          <motion.span\n            role='tooltip'\n            className='pointer-events-none absolute -top-9 left-1/2 z-10 -translate-x-1/2 whitespace-nowrap rounded-[var(--radius-md,0.375rem)] bg-[var(--color-popover,#111827)] px-2 py-1 text-[10px] font-medium tracking-wide text-[color:var(--color-popover-foreground,#fff)] shadow-lg backdrop-blur-xs'\n            initial={{ opacity: 0, y: 4, filter: 'blur(3px)' }}\n            animate={{ opacity: 1, y: 0, filter: 'blur(0px)' }}\n            exit={{ opacity: 0, y: 2, filter: 'blur(3px)' }}\n            transition={{ duration: 0.2 }}\n          >\n            {tooltip}\n          </motion.span>\n        ) : null}\n      </AnimatePresence>\n    </motion.button>\n  );\n}\n",
      "type": "registry:component",
      "target": "@components/product/FeatureChip.tsx"
    }
  ],
  "categories": [
    "product"
  ],
  "type": "registry:component"
}