{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "annotation",
  "type": "registry:component",
  "title": "Annotation",
  "description": "Inline highlight with an attached contextual note.",
  "dependencies": [
    "@vllnt/ui@^0.2.1"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/default/annotation/annotation.tsx",
      "content": "\"use client\";\n\nimport type { ReactNode } from \"react\";\n\nimport { cn } from \"@vllnt/ui\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"@vllnt/ui\";\n\nconst toneClasses = {\n  amber: \"bg-amber-500/20 text-amber-950 dark:text-amber-100\",\n  emerald: \"bg-emerald-500/20 text-emerald-950 dark:text-emerald-100\",\n  rose: \"bg-rose-500/20 text-rose-950 dark:text-rose-100\",\n  sky: \"bg-sky-500/20 text-sky-950 dark:text-sky-100\",\n};\n\nexport type HighlightProps = {\n  children: ReactNode;\n  className?: string;\n  tone?: keyof typeof toneClasses;\n};\n\nexport function Highlight({\n  children,\n  className,\n  tone = \"amber\",\n}: HighlightProps): ReactNode {\n  return (\n    <mark className={cn(\"rounded px-1 py-0.5\", toneClasses[tone], className)}>\n      {children}\n    </mark>\n  );\n}\n\nexport type AnnotationProps = {\n  annotation: ReactNode;\n  children: ReactNode;\n  className?: string;\n  label?: string;\n  tone?: keyof typeof toneClasses;\n};\n\nexport function Annotation({\n  annotation,\n  children,\n  className,\n  label = \"Annotation\",\n  tone = \"amber\",\n}: AnnotationProps): ReactNode {\n  return (\n    <Popover>\n      <PopoverTrigger asChild>\n        <button\n          className={cn(\n            \"inline-flex items-center gap-1 rounded-sm text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\",\n            className,\n          )}\n          type=\"button\"\n        >\n          <Highlight tone={tone}>{children}</Highlight>\n          <span className=\"text-[10px] font-semibold text-primary align-super\">\n            +\n          </span>\n        </button>\n      </PopoverTrigger>\n      <PopoverContent align=\"start\" className=\"max-w-xs space-y-2\">\n        <p className=\"text-xs font-semibold uppercase tracking-[0.18em] text-muted-foreground\">\n          {label}\n        </p>\n        <div className=\"text-sm text-muted-foreground [&>p]:mb-2\">\n          {annotation}\n        </div>\n      </PopoverContent>\n    </Popover>\n  );\n}\n",
      "type": "registry:component"
    }
  ],
  "version": "0.2.1",
  "stability": "stable"
}