{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "pop-stepper-base",
  "type": "registry:component",
  "title": "Pop Stepper (base)",
  "description": "Theme-ready base variant of Interactive micro-interaction component for pop stepper..",
  "dependencies": [
    "lucide-react",
    "motion",
    "next-themes"
  ],
  "files": [
    {
      "path": "components/watermelon/pop-stepper.tsx",
      "type": "registry:component",
      "content": "'use client';\n\nimport { Minus, Plus } from 'lucide-react';\nimport { motion } from 'motion/react';\nimport { useTheme } from 'next-themes';\nimport { useState } from 'react';\n\ninterface PopStepperProps {\n  initialValue?: number;\n  step?: number;\n  min?: number;\n  max?: number;\n  fontClassName?: string;\n  lightColors?: string[];\n  darkColors?: string[];\n}\n\nfunction createColorTimes(length: number) {\n  if (length <= 2) return [0, 1];\n\n  const startHold = 0.25;\n  const endHold = 0.25;\n  const usable = 1 - startHold - endHold;\n  const middleCount = length - 2;\n\n  return [\n    0,\n    ...Array.from(\n      { length: middleCount },\n      (_, i) => startHold + (usable * (i + 1)) / (middleCount + 1),\n    ),\n    1,\n  ];\n}\n\nexport default function PopStepper({\n  initialValue = 10,\n  step = 10,\n  min = 0,\n  max = 100,\n  fontClassName = 'font-sans',\n  lightColors = ['#000000', '#ef4444', '#3b82f6', '#22c55e', '#000000'],\n  darkColors = ['#ffffff', '#be123c', '#1d4ed8', '#15803d', '#ffffff'],\n}: PopStepperProps) {\n  const [value, setValue] = useState(initialValue);\n  const [prevValue, setPrevValue] = useState(initialValue);\n\n  const { resolvedTheme } = useTheme();\n\n  const colors = resolvedTheme === 'dark' ? darkColors : lightColors;\n\n  const updateValue = (next: number) => {\n    if (next === value) return;\n    setPrevValue(value);\n    setValue(next);\n  };\n\n  const isIncrementing = value > prevValue;\n\n  return (\n    <div className=\"theme-injected flex h-screen w-full items-center justify-center gap-3 transition-colors\">\n      <motion.button\n        whileTap={{\n          scale: 1.15,\n        }}\n        transition={{\n          duration: 0.15,\n        }}\n        onClick={() => updateValue(Math.max(min, value - step))}\n        className=\"bg-primary text-primary-foreground rounded-full p-2\"\n      >\n        <Minus className=\"size-6\" />\n      </motion.button>\n\n      <div className=\"border-border bg-card text-card-foreground inline-flex min-h-18 min-w-40 items-center justify-center overflow-hidden rounded-xl border px-5 py-2\">\n        <motion.span\n          key={value}\n          initial={{\n            scale: 1,\n            rotate: 0,\n          }}\n          animate={{\n            scale: [1, 1.25, 1.25, 1],\n            rotate: [\n              0,\n              isIncrementing ? -20 : 20,\n              isIncrementing ? -20 : 20,\n              0,\n            ],\n            color: colors,\n          }}\n          transition={{\n            scale: {\n              duration: 0.4,\n              times: [0, 0.4, 0.6, 1],\n              ease: 'easeInOut',\n            },\n            rotate: {\n              duration: 0.4,\n              times: [0, 0.4, 0.6, 1],\n              ease: 'easeInOut',\n            },\n            color: {\n              duration: 0.35,\n              times: createColorTimes(colors.length),\n            },\n          }}\n          className={`text-5xl font-black tracking-tight whitespace-nowrap ${fontClassName}`}\n        >\n          {value}\n        </motion.span>\n      </div>\n\n      <motion.button\n        whileTap={{\n          scale: 1.15,\n        }}\n        transition={{\n          duration: 0.15,\n        }}\n        onClick={() => updateValue(Math.min(max, value + step))}\n        className=\"bg-primary text-primary-foreground rounded-full p-2\"\n      >\n        <Plus className=\"size-6\" />\n      </motion.button>\n    </div>\n  );\n}\n"
    }
  ]
}