{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "tags",
  "type": "registry:component",
  "title": "Tags",
  "description": "A dynamic tag management component with smooth shared-layout transitions and auto-scrolling.",
  "dependencies": [
    "lucide-react",
    "motion"
  ],
  "files": [
    {
      "path": "components/watermelon/tags.tsx",
      "type": "registry:component",
      "content": "'use client';\n\nimport { useEffect, useRef, useState } from 'react';\nimport { motion, MotionConfig } from 'motion/react';\nimport { X } from 'lucide-react';\n\nexport type Tag = {\n  id: string;\n  label: string;\n};\n\ntype TagsProps = {\n  tags?: Tag[];\n};\n\nconst DEFAULT_TAGS: Tag[] = [\n  { id: 'javascript', label: 'Javascript' },\n  { id: 'express', label: 'Express' },\n  { id: 'vue', label: 'Vue' },\n  { id: 'jest', label: 'Jest' },\n  { id: 'next', label: 'Next' },\n  { id: 'typescript', label: 'Typescript' },\n  { id: 'redis', label: 'Redis' },\n  { id: 'git', label: 'Git' },\n  { id: 'node', label: 'Node' },\n];\n\nexport function Tags({ tags = DEFAULT_TAGS }: TagsProps) {\n  const [selecteds, setSelecteds] = useState<Tag[]>([]);\n\n  const selectedsContainerRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    if (selectedsContainerRef.current) {\n      selectedsContainerRef.current.scrollTo({\n        left: selectedsContainerRef.current.scrollWidth,\n        behavior: 'smooth',\n      });\n    }\n  }, [selecteds]);\n\n  const removeSelectedTag = (id: string) => {\n    setSelecteds((prev) => prev.filter((tag) => tag.id !== id));\n  };\n\n  const addSelectedTag = (tag: Tag) => {\n    setSelecteds((prev) => [...prev, tag]);\n  };\n\n  return (\n    <MotionConfig transition={{ type: 'spring', stiffness: 300, damping: 40 }}>\n      <div className=\"relative flex w-[340px] flex-col p-6 sm:w-sm\">\n        <motion.h2\n          layout\n          className=\"text-xl font-semibold text-black dark:text-white\"\n        >\n          TAGS\n        </motion.h2>\n        <motion.div\n          ref={selectedsContainerRef}\n          layout\n          className=\"mt-2 mb-3 flex min-h-14 w-full flex-wrap gap-1.5 rounded-2xl border-[1.6px] border-[#E5E5E5] bg-[#fefefe] p-1.5 dark:border-neutral-800 dark:bg-neutral-900\"\n        >\n          {selecteds.map((tag) => (\n            <motion.div\n              key={tag.id}\n              layoutId={`tag-${tag.id}`}\n              className=\"flex w-fit items-center gap-1 border-[1.6px] border-[#E5E5E5] bg-white py-1 pr-1 pl-3 dark:border-neutral-700 dark:bg-neutral-800\"\n              style={{ borderRadius: 10, zIndex: 20, }}\n            >\n              <motion.span\n                layoutId={`tag-${tag.id}-label`}\n                className=\"truncate font-medium text-gray-700 dark:text-neutral-200\"\n              >\n                {tag.label}\n              </motion.span>\n\n              <button\n                title=\"close\"\n                onClick={() => removeSelectedTag(tag.id)}\n                className=\"rounded-full p-1\"\n              >\n                <X className=\"size-5 text-gray-400 dark:text-neutral-400\" />\n              </button>\n            </motion.div>\n          ))}\n        </motion.div>\n        {tags.length > selecteds.length && (\n          <motion.div\n            layout\n            className=\"w-full rounded-2xl border-[1.6px] border-[#E5E5E5] bg-white p-2 dark:border-neutral-800 dark:bg-neutral-900\"\n          >\n            <motion.div className=\"flex flex-wrap gap-2\">\n              {tags\n                .filter(\n                  (tag) =>\n                    !selecteds.some((selected) => selected.id === tag.id),\n                )\n                .map((tag) => (\n                  <motion.button\n                    key={tag.id}\n                    layoutId={`tag-${tag.id}`}\n                    onClick={() => addSelectedTag(tag)}\n                    className=\"flex shrink-0 items-center gap-1 rounded-full bg-[#F4F4FB] px-4 py-2.5 dark:bg-neutral-700\"\n                    style={{ borderRadius: 10, zIndex: 10 }}\n                  >\n                    <motion.span\n                      layoutId={`tag-${tag.id}-label`}\n                      className=\"font-medium text-gray-700 dark:text-neutral-200\"\n                    >\n                      {tag.label}\n                    </motion.span>\n                  </motion.button>\n                ))}\n            </motion.div>\n          </motion.div>\n        )}\n      </div>\n    </MotionConfig>\n  );\n}\n"
    }
  ]
}