{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "burbuja",
  "title": "Burbuja",
  "description": "The existing ChatBubble with selected words highlighted by TextFill.",
  "registryDependencies": [
    "@jbm/tokens",
    "@jbm/chat-bubble",
    "@jbm/text-fill"
  ],
  "files": [
    {
      "path": "registry/jbm/motion/burbuja.tsx",
      "content": "import { ChatBubble, type ChatBubbleProps } from \"../ui/chat-bubble\"\nimport { TextFill } from \"../ui/text-fill\"\nimport { color } from \"../lib/tokens\"\n\nexport type BurbujaProps = Omit<ChatBubbleProps, \"children\"> & {\n  words: readonly string[]\n  highlight: readonly number[]\n  progress?: number\n}\n\n/** ChatBubble with selected words colored by the existing TextFill primitive. */\nexport function Burbuja({\n  words,\n  highlight,\n  progress = 1,\n  ...props\n}: BurbujaProps) {\n  return (\n    <ChatBubble {...props}>\n      {words.map((word, i) => (\n        <span key={i}>\n          {i > 0 ? \" \" : null}\n          {highlight.includes(i) ? (\n            <TextFill\n              text={word}\n              progress={progress}\n              dimColor=\"currentColor\"\n              accentColor={color.accent}\n              textColor={color.accent}\n              style={{\n                fontSize: \"inherit\",\n                fontWeight: \"inherit\",\n                lineHeight: \"inherit\",\n              }}\n            />\n          ) : (\n            word\n          )}\n        </span>\n      ))}\n    </ChatBubble>\n  )\n}\n",
      "type": "registry:component",
      "target": "src/jbm/motion/burbuja.tsx"
    }
  ],
  "type": "registry:component"
}