{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "tags-base",
  "type": "registry:component",
  "title": "Tags (base)",
  "description": "Theme-ready base variant of 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=\"theme-injected relative flex w-85 flex-col p-6 font-sans sm:w-sm\">\n        <motion.h2\n          layout\n          className=\"font-sans text-xl font-semibold text-foreground\"\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-border bg-card p-1.5\"\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-border bg-background py-1 pr-1 pl-3\"\n              style={{ borderRadius: 10, zIndex: 20, }}\n            >\n              <motion.span\n                layoutId={`tag-${tag.id}-label`}\n                className=\"truncate font-sans font-medium text-foreground\"\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-muted-foreground\" />\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-border bg-card p-2\"\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-muted px-4 py-2.5 transition-colors hover:bg-background\"\n                    style={{ borderRadius: 10, zIndex: 10 }}\n                  >\n                    <motion.span\n                      layoutId={`tag-${tag.id}-label`}\n                      className=\"font-sans font-medium text-muted-foreground\"\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"
    }
  ]
}