{
  "name": "fill-thermometer-default",
  "type": "registry:ui",
  "tier": "free",
  "dependencies": [
    "framer-motion"
  ],
  "registryDependencies": [
    "https://www.craftui.space/r/craftui-base.json"
  ],
  "files": [
    {
      "path": "components/craftui/loaders/fill-thermometer/default.tsx",
      "content": "'use client';\n\nimport { useEffect } from 'react';\nimport { motion, useAnimation } from 'motion/react';\n\ninterface FillThermometerProps {\n  width?: number;\n  height?: number;\n  color?: string;\n  strokeColor?: string;\n  backgroundColor?: string;\n  isAnimating?: boolean;\n  duration?: number;\n  ease?: any;\n}\n\n// Fixed 100x100 viewBox; width/height scale the svg.\n// Mercury column bottom stays anchored at y=66 (the bulb neck) while\n// y and height animate together so only the top edge rises.\nconst COLUMN_BOTTOM = 66;\nconst LOW_Y = 62;\nconst HIGH_Y = 16;\n\nexport function FillThermometer({\n  width = 60,\n  height = 60,\n  color = \"#ef4444\",\n  strokeColor = \"#1f1f1f\",\n  backgroundColor = \"#ffffff\",\n  isAnimating = true,\n  duration = 2.5,\n  ease = 'linear',\n}: FillThermometerProps) {\n  const controls = useAnimation();\n\n  useEffect(() => {\n    if (isAnimating) {\n      // Rise over ~85% of the cycle, then hold while the column fades out so\n      // the loop restarts at the low mark without a visible snap.\n      controls.start({\n        y: [LOW_Y, HIGH_Y, HIGH_Y],\n        height: [COLUMN_BOTTOM - LOW_Y, COLUMN_BOTTOM - HIGH_Y, COLUMN_BOTTOM - HIGH_Y],\n        opacity: [1, 1, 0],\n        transition: { duration, repeat: Infinity, ease, times: [0, 0.85, 1] },\n      });\n    } else {\n      controls.stop();\n      controls.set({ y: LOW_Y, height: COLUMN_BOTTOM - LOW_Y, opacity: 1 });\n    }\n  }, [isAnimating, duration, ease, controls]);\n\n  return (\n    <svg\n      width={width}\n      height={height}\n      viewBox=\"0 0 100 100\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      aria-label=\"Loading\"\n      role=\"img\"\n    >\n      <defs>\n        <clipPath id={`fill-thermometer-clip-${width}`}>\n          <rect x={46.5} y={13} width={7} height={53} rx={3.5} />\n        </clipPath>\n      </defs>\n      {/* Stem */}\n      <rect x={44} y={10} width={12} height={58} rx={6} fill={backgroundColor} stroke={strokeColor} strokeWidth={5} />\n      {/* Bulb */}\n      <circle cx={50} cy={78} r={13} fill={backgroundColor} stroke={strokeColor} strokeWidth={5} />\n      {/* Neck bridge + bulb mercury */}\n      <rect x={46.5} y={63} width={7} height={8} fill={color} />\n      <circle cx={50} cy={78} r={9} fill={color} />\n      {/* Rising column */}\n      <g clipPath={`url(#fill-thermometer-clip-${width})`}>\n        <motion.rect\n          x={46.5}\n          width={7}\n          fill={color}\n          initial={{ y: LOW_Y, height: COLUMN_BOTTOM - LOW_Y }}\n          animate={controls}\n        />\n      </g>\n      {/* Tick marks */}\n      <line x1={62} y1={20} x2={67} y2={20} stroke={strokeColor} strokeWidth={3} strokeLinecap=\"round\" />\n      <line x1={62} y1={32} x2={67} y2={32} stroke={strokeColor} strokeWidth={3} strokeLinecap=\"round\" />\n      <line x1={62} y1={44} x2={67} y2={44} stroke={strokeColor} strokeWidth={3} strokeLinecap=\"round\" />\n      <line x1={62} y1={56} x2={67} y2={56} stroke={strokeColor} strokeWidth={3} strokeLinecap=\"round\" />\n    </svg>\n  );\n}\n",
      "type": "registry:ui",
      "target": "~/components/craftui/loaders/fill-thermometer/default.tsx"
    }
  ],
  "meta": {
    "displayName": "Thermometer - Thermometer",
    "description": "An outlined thermometer with a mercury column that rises from the bulb to the top in a loop",
    "category": "loaders",
    "tags": [
      "thermometer",
      "temperature",
      "mercury",
      "level",
      "fill",
      "rising",
      "progress",
      "health"
    ],
    "animationType": "loop"
  }
}