{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "weather-card",
  "type": "registry:ui",
  "title": "Weather Card",
  "description": "A beautiful, interactive weather card component with forecast, detailed metrics, and multiple weather conditions support.",
  "registryDependencies": [
    "icons"
  ],
  "files": [
    {
      "path": "registry/new-york/ui/weather-card.tsx",
      "content": "\"use client\";\n\nimport type React from \"react\";\nimport { useMemo, useState } from \"react\";\nimport {\n\tHugeiconsIcon,\n\tLocation01Icon,\n\tSunriseIcon,\n\tSunsetIcon,\n\tThermometerIcon,\n} from \"@/components/icons\";\nimport { Button } from \"@/components/ui/button\";\nimport {\n\tDropdownMenu,\n\tDropdownMenuContent,\n\tDropdownMenuLabel,\n\tDropdownMenuSeparator,\n\tDropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\";\nimport { cn } from \"@/lib/utils\";\nimport { WeatherDetailItem } from \"@/registry/new-york/ui/weather-detail-item\";\nimport {\n\tCloudAngledRainIcon,\n\tCloudAngledZapIcon,\n\tCloudFogIcon,\n\tCloudIcon,\n\tCloudLittleRainIcon,\n\tCloudSnowIcon,\n\tDropletIcon,\n\tFastWindIcon,\n\tMoon02Icon,\n\tSun03Icon,\n\tTornado02Icon,\n\tVisionIcon,\n} from \"@/registry/new-york/ui/weather-icons\";\n\nexport interface WeatherLocation {\n\tcity: string;\n\tcountry: string | null;\n\tregion: string | null;\n}\n\nexport interface WeatherMain {\n\ttemp: number;\n\tfeels_like: number;\n\ttemp_min: number;\n\ttemp_max: number;\n\tpressure: number;\n\thumidity: number;\n}\n\nexport interface WeatherWind {\n\tspeed: number;\n\tdeg: number;\n}\n\nexport interface WeatherCondition {\n\tid: number;\n\tmain: string;\n\tdescription: string;\n\ticon: string;\n}\n\nexport interface WeatherSys {\n\tcountry: string;\n\tsunrise: number;\n\tsunset: number;\n}\n\nexport interface ForecastDay {\n\tdate: string;\n\ttimestamp: number;\n\ttemp_min: number;\n\ttemp_max: number;\n\thumidity: number;\n\tweather: {\n\t\tmain: string;\n\t\tdescription: string;\n\t\ticon: string;\n\t};\n}\n\nexport interface WeatherData {\n\tcoord?: {\n\t\tlon: number;\n\t\tlat: number;\n\t};\n\tweather: WeatherCondition[];\n\tmain: WeatherMain;\n\tvisibility?: number;\n\twind: WeatherWind;\n\tdt: number;\n\tsys: WeatherSys;\n\ttimezone: number;\n\tname: string;\n\tlocation: WeatherLocation;\n\tforecast?: ForecastDay[];\n}\n\nexport interface WeatherCardProps {\n\tweatherData: WeatherData;\n\tclassName?: string;\n\tshowForecast?: boolean;\n\tshowDetails?: boolean;\n\tdefaultUnit?: \"celsius\" | \"fahrenheit\";\n}\n\n// Helper function to convert timestamp to readable time\nconst formatTime = (timestamp: number, timezone: number): string => {\n\tconst date = new Date((timestamp + timezone) * 1000);\n\treturn date.toLocaleTimeString([], { hour: \"2-digit\", minute: \"2-digit\" });\n};\n\n// Helper function to convert celsius to fahrenheit\nconst celsiusToFahrenheit = (celsius: number): number => {\n\treturn (celsius * 9) / 5 + 32;\n};\n\n// Helper function to get day of week from date string\nconst getDayOfWeek = (dateStr: string): string => {\n\tconst date = new Date(dateStr);\n\treturn date.toLocaleDateString(\"en-US\", { weekday: \"long\" });\n};\n\n// Helper function to get weather icon component\nconst getWeatherIcon = (main: string, className: string = \"\", fill = \"\") => {\n\tswitch (main.toLowerCase()) {\n\t\tcase \"thunderstorm\":\n\t\t\treturn <CloudAngledZapIcon className={className} color={fill} />;\n\t\tcase \"drizzle\":\n\t\t\treturn <CloudLittleRainIcon className={className} color={fill} />;\n\t\tcase \"rain\":\n\t\t\treturn <CloudAngledRainIcon className={className} color={fill} />;\n\t\tcase \"snow\":\n\t\t\treturn <CloudSnowIcon className={className} color={fill} />;\n\t\tcase \"haze\":\n\t\t\treturn <Sun03Icon className={className} color={fill} />;\n\t\tcase \"mist\":\n\t\tcase \"smoke\":\n\t\tcase \"dust\":\n\t\tcase \"sand\":\n\t\tcase \"ash\":\n\t\tcase \"squall\":\n\t\t\treturn <CloudFogIcon className={className} color={fill} />;\n\t\tcase \"fog\":\n\t\t\treturn <CloudFogIcon className={className} color={fill} />;\n\t\tcase \"tornado\":\n\t\t\treturn <Tornado02Icon className={className} color={fill} />;\n\t\tcase \"clear\":\n\t\t\treturn <Sun03Icon className={className} fill={fill} color={fill} />;\n\t\tcase \"clouds\":\n\t\t\treturn <CloudIcon className={className} color={\"#E5E7EB\"} />;\n\t\tdefault:\n\t\t\treturn <CloudIcon className={className} color={\"#E5E7EB\"} />;\n\t}\n};\n\nexport const WeatherCard: React.FC<WeatherCardProps> = ({\n\tweatherData,\n\tclassName,\n\tshowForecast = true,\n\tshowDetails = true,\n\tdefaultUnit = \"celsius\",\n}) => {\n\tconst [useFahrenheit, setUseFahrenheit] = useState(\n\t\tdefaultUnit === \"fahrenheit\",\n\t);\n\tconst [forecastExpanded, setForecastExpanded] = useState(true);\n\tconst [detailsExpanded, setDetailsExpanded] = useState(false);\n\n\tconst temp = weatherData.main.temp;\n\tconst feelsLike = weatherData.main.feels_like;\n\tconst weatherId = weatherData.weather[0].id;\n\tconst sunriseTime = formatTime(weatherData.sys.sunrise, weatherData.timezone);\n\tconst sunsetTime = formatTime(weatherData.sys.sunset, weatherData.timezone);\n\n\t// Convert temperature based on selected unit\n\tconst displayTemp = useFahrenheit\n\t\t? Math.round(celsiusToFahrenheit(temp))\n\t\t: Math.round(temp);\n\n\tconst displayFeelsLike = useFahrenheit\n\t\t? Math.round(celsiusToFahrenheit(feelsLike))\n\t\t: Math.round(feelsLike);\n\n\t// Determine the weather theme based on weather conditions\n\tconst weatherTheme = useMemo(() => {\n\t\t// weather condition codes: https://openweathermap.org/weather-conditions\n\t\tif (weatherId >= 200 && weatherId < 300) {\n\t\t\treturn {\n\t\t\t\tname: \"Thunderstorm\",\n\t\t\t\ticon: <CloudAngledZapIcon className=\"h-16 w-16\" color=\"#FCD34D\" />,\n\t\t\t\tgradient: \"bg-gradient-to-br from-slate-800/80 to-purple-900/80\",\n\t\t\t\tcolorCode: \"#FCD34D\",\n\t\t\t};\n\t\t} else if (weatherId >= 300 && weatherId < 400) {\n\t\t\treturn {\n\t\t\t\tname: \"Drizzle\",\n\t\t\t\ticon: <CloudLittleRainIcon className=\"h-16 w-16\" color=\"#93C5FD\" />,\n\t\t\t\tgradient: \"bg-gradient-to-br from-slate-700/80 to-blue-800/80\",\n\t\t\t\tcolorCode: \"#93C5FD\",\n\t\t\t};\n\t\t} else if (weatherId >= 500 && weatherId < 600) {\n\t\t\treturn {\n\t\t\t\tname: \"Rain\",\n\t\t\t\ticon: <CloudAngledRainIcon className=\"h-16 w-16\" color=\"#60A5FA\" />,\n\t\t\t\tgradient: \"bg-gradient-to-br from-slate-800/80 to-blue-900/80\",\n\t\t\t\tcolorCode: \"#60A5FA\",\n\t\t\t};\n\t\t} else if (weatherId >= 600 && weatherId < 700) {\n\t\t\treturn {\n\t\t\t\tname: \"Snow\",\n\t\t\t\ticon: <CloudSnowIcon className=\"h-16 w-16\" color=\"#E0F2FE\" />,\n\t\t\t\tgradient: \"bg-gradient-to-br from-blue-100/80 to-indigo-300/80\",\n\t\t\t\tcolorCode: \"#E0F2FE\",\n\t\t\t};\n\t\t} else if (weatherId >= 700 && weatherId < 800) {\n\t\t\t// Atmospheric conditions\n\t\t\tif (weatherId === 701) {\n\t\t\t\treturn {\n\t\t\t\t\tname: \"Mist\",\n\t\t\t\t\ticon: <CloudFogIcon className=\"h-16 w-16\" color=\"#D1D5DB\" />,\n\t\t\t\t\tgradient: \"bg-gradient-to-br from-slate-400/80 to-slate-500/80\",\n\t\t\t\t\tcolorCode: \"#D1D5DB\",\n\t\t\t\t};\n\t\t\t} else if (weatherId === 711) {\n\t\t\t\treturn {\n\t\t\t\t\tname: \"Smoke\",\n\t\t\t\t\ticon: <CloudFogIcon className=\"h-16 w-16\" color=\"#9CA3AF\" />,\n\t\t\t\t\tgradient: \"bg-gradient-to-br from-gray-500/80 to-gray-700/80\",\n\t\t\t\t\tcolorCode: \"#9CA3AF\",\n\t\t\t\t};\n\t\t\t} else if (weatherId === 721) {\n\t\t\t\treturn {\n\t\t\t\t\tname: \"Haze\",\n\t\t\t\t\ticon: <Sun03Icon className=\"h-16 w-16\" color=\"#FDE68A\" />,\n\t\t\t\t\tgradient: \"bg-gradient-to-br from-amber-300/80 to-amber-500/80\",\n\t\t\t\t\tcolorCode: \"#FDE68A\",\n\t\t\t\t};\n\t\t\t} else if (weatherId === 731 || weatherId === 761) {\n\t\t\t\treturn {\n\t\t\t\t\tname: \"Dust\",\n\t\t\t\t\ticon: <CloudFogIcon className=\"h-16 w-16\" color=\"#FEF08A\" />,\n\t\t\t\t\tgradient: \"bg-gradient-to-br from-yellow-400/80 to-yellow-600/80\",\n\t\t\t\t\tcolorCode: \"#FEF08A\",\n\t\t\t\t};\n\t\t\t} else if (weatherId === 741) {\n\t\t\t\treturn {\n\t\t\t\t\tname: \"Fog\",\n\t\t\t\t\ticon: <CloudFogIcon className=\"h-16 w-16\" color=\"#D1D5DB\" />,\n\t\t\t\t\tgradient: \"bg-gradient-to-br from-gray-400/80 to-gray-600/80\",\n\t\t\t\t\tcolorCode: \"#D1D5DB\",\n\t\t\t\t};\n\t\t\t} else if (weatherId === 751) {\n\t\t\t\treturn {\n\t\t\t\t\tname: \"Sand\",\n\t\t\t\t\ticon: <CloudFogIcon className=\"h-16 w-16\" color=\"#FDBA74\" />,\n\t\t\t\t\tgradient: \"bg-gradient-to-br from-orange-300/80 to-orange-500/80\",\n\t\t\t\t\tcolorCode: \"#FDBA74\",\n\t\t\t\t};\n\t\t\t} else if (weatherId === 762) {\n\t\t\t\treturn {\n\t\t\t\t\tname: \"Volcanic Ash\",\n\t\t\t\t\ticon: <CloudFogIcon className=\"h-16 w-16\" color=\"#D4D4D8\" />,\n\t\t\t\t\tgradient: \"bg-gradient-to-br from-zinc-600/80 to-zinc-800/80\",\n\t\t\t\t\tcolorCode: \"#D4D4D8\",\n\t\t\t\t};\n\t\t\t} else if (weatherId === 771) {\n\t\t\t\treturn {\n\t\t\t\t\tname: \"Squall\",\n\t\t\t\t\ticon: <FastWindIcon className=\"h-16 w-16\" color=\"#93C5FD\" />,\n\t\t\t\t\tgradient: \"bg-gradient-to-br from-blue-500/80 to-blue-700/80\",\n\t\t\t\t\tcolorCode: \"#93C5FD\",\n\t\t\t\t};\n\t\t\t} else if (weatherId === 781) {\n\t\t\t\treturn {\n\t\t\t\t\tname: \"Tornado\",\n\t\t\t\t\ticon: <Tornado02Icon className=\"h-16 w-16\" color=\"#CBD5E1\" />,\n\t\t\t\t\tgradient: \"bg-gradient-to-br from-slate-600/80 to-slate-900/80\",\n\t\t\t\t\tcolorCode: \"#CBD5E1\",\n\t\t\t\t};\n\t\t\t} else {\n\t\t\t\treturn {\n\t\t\t\t\tname: \"Atmosphere\",\n\t\t\t\t\ticon: <CloudFogIcon className=\"h-16 w-16\" color=\"#D1D5DB\" />,\n\t\t\t\t\tgradient: \"bg-gradient-to-br from-slate-400/80 to-slate-600/80\",\n\t\t\t\t\tcolorCode: \"#D1D5DB\",\n\t\t\t\t};\n\t\t\t}\n\t\t} else if (weatherId === 800) {\n\t\t\treturn {\n\t\t\t\tname: \"Clear\",\n\t\t\t\ticon: <Sun03Icon className=\"h-16 w-16\" color=\"#FBBF24\" />,\n\t\t\t\tgradient: \"bg-gradient-to-br from-yellow-500/80 to-orange-500/80\",\n\t\t\t\tcolorCode: \"#FBBF24\",\n\t\t\t};\n\t\t} else if (weatherId >= 801 && weatherId <= 802) {\n\t\t\treturn {\n\t\t\t\tname: \"Partly Cloudy\",\n\t\t\t\ticon: <CloudIcon className=\"h-16 w-16\" color=\"#E5E7EB\" />,\n\t\t\t\tgradient: \"bg-gradient-to-br from-blue-400/80 to-blue-600/80\",\n\t\t\t\tcolorCode: \"#E5E7EB\",\n\t\t\t};\n\t\t} else if (weatherId >= 803 && weatherId <= 804) {\n\t\t\treturn {\n\t\t\t\tname: \"Cloudy\",\n\t\t\t\ticon: <CloudIcon className=\"h-16 w-16\" color=\"#E5E7EB\" />,\n\t\t\t\tgradient: \"bg-gradient-to-br from-slate-500/80 to-slate-700/80\",\n\t\t\t\tcolorCode: \"#E5E7EB\",\n\t\t\t};\n\t\t} else {\n\t\t\treturn {\n\t\t\t\tname: \"Unknown\",\n\t\t\t\ticon: <CloudIcon className=\"h-16 w-16\" color=\"#E5E7EB\" />,\n\t\t\t\tgradient: \"bg-gradient-to-br from-slate-500/80 to-slate-700/80\",\n\t\t\t\tcolorCode: \"#E5E7EB\",\n\t\t\t};\n\t\t}\n\t}, [weatherId]);\n\n\treturn (\n\t\t<div\n\t\t\tclassName={cn(\n\t\t\t\t\"relative w-full overflow-hidden rounded-3xl p-6 shadow-lg backdrop-blur-sm sm:max-w-md\",\n\t\t\t\tweatherTheme.gradient,\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t>\n\t\t\t{/* Location Info */}\n\t\t\t<div className=\"mb-3 flex items-start justify-between gap-10\">\n\t\t\t\t<div className=\"flex items-start\">\n\t\t\t\t\t<HugeiconsIcon\n\t\t\t\t\t\ticon={Location01Icon}\n\t\t\t\t\t\tsize={20}\n\t\t\t\t\t\tclassName=\"relative top-1 mr-2 text-white\"\n\t\t\t\t\t/>\n\t\t\t\t\t<div>\n\t\t\t\t\t\t<h2 className=\"flex items-center text-xl font-bold text-white\">\n\t\t\t\t\t\t\t{weatherData.location.city}\n\t\t\t\t\t\t\t{weatherData.location.region\n\t\t\t\t\t\t\t\t? `, ${weatherData.location.region}`\n\t\t\t\t\t\t\t\t: \"\"}\n\t\t\t\t\t\t</h2>\n\t\t\t\t\t\t<p className=\"text-xs\" style={{ color: weatherTheme.colorCode }}>\n\t\t\t\t\t\t\t{weatherData.location.country}\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\n\t\t\t\t<div className=\"flex items-center\">\n\t\t\t\t\t<DropdownMenu>\n\t\t\t\t\t\t<DropdownMenuTrigger asChild>\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\tvariant=\"ghost\"\n\t\t\t\t\t\t\t\tsize=\"icon\"\n\t\t\t\t\t\t\t\tclassName=\"h-8 w-8 rounded-full bg-white/10 text-white hover:bg-white/20 hover:text-white\"\n\t\t\t\t\t\t\t\taria-label=\"Temperature settings\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<HugeiconsIcon icon={ThermometerIcon} size={20} />\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t</DropdownMenuTrigger>\n\t\t\t\t\t\t<DropdownMenuContent\n\t\t\t\t\t\t\talign=\"end\"\n\t\t\t\t\t\t\tclassName=\"w-40 border-zinc-700 bg-zinc-800 text-white\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<DropdownMenuLabel>Temperature Unit</DropdownMenuLabel>\n\t\t\t\t\t\t\t<DropdownMenuSeparator className=\"bg-zinc-700\" />\n\t\t\t\t\t\t\t<div className=\"px-2 py-2\">\n\t\t\t\t\t\t\t\t<div className=\"flex items-center justify-between gap-2\">\n\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\tvariant={useFahrenheit ? \"secondary\" : \"ghost\"}\n\t\t\t\t\t\t\t\t\t\tsize=\"sm\"\n\t\t\t\t\t\t\t\t\t\tclassName=\"flex-1\"\n\t\t\t\t\t\t\t\t\t\tonClick={() => setUseFahrenheit(true)}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t°F\n\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\tvariant={!useFahrenheit ? \"secondary\" : \"ghost\"}\n\t\t\t\t\t\t\t\t\t\tsize=\"sm\"\n\t\t\t\t\t\t\t\t\t\tclassName=\"flex-1\"\n\t\t\t\t\t\t\t\t\t\tonClick={() => setUseFahrenheit(false)}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t°C\n\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</DropdownMenuContent>\n\t\t\t\t\t</DropdownMenu>\n\t\t\t\t</div>\n\t\t\t</div>\n\n\t\t\t{/* Main Weather Display */}\n\t\t\t<div className=\"mb-2 flex items-center justify-between gap-5\">\n\t\t\t\t<div className=\"flex items-center justify-center\">\n\t\t\t\t\t{weatherTheme.icon}\n\t\t\t\t</div>\n\n\t\t\t\t<div>\n\t\t\t\t\t<div className=\"flex items-baseline\">\n\t\t\t\t\t\t<span className=\"text-4xl font-bold text-white\">\n\t\t\t\t\t\t\t{displayTemp}°\n\t\t\t\t\t\t</span>\n\t\t\t\t\t\t<span className=\"ml-1 text-sm font-medium text-white/80\">\n\t\t\t\t\t\t\t{useFahrenheit ? \"F\" : \"C\"}\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</div>\n\t\t\t\t\t<p\n\t\t\t\t\t\tclassName=\"text-xs\"\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\tcolor: weatherTheme.colorCode,\n\t\t\t\t\t\t\tfilter: \"brightness(1.3)\",\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\tFeels like: {displayFeelsLike}°\n\t\t\t\t\t</p>\n\t\t\t\t</div>\n\n\t\t\t\t<p className=\"capitalize font-medium text-white\">\n\t\t\t\t\t{weatherData.weather[0].description}\n\t\t\t\t</p>\n\t\t\t</div>\n\n\t\t\t{/* Weather Forecast */}\n\t\t\t{showForecast &&\n\t\t\t\tweatherData.forecast &&\n\t\t\t\tweatherData.forecast.length > 0 && (\n\t\t\t\t\t<div className=\"mt-4\">\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\tonClick={() => setForecastExpanded(!forecastExpanded)}\n\t\t\t\t\t\t\tclassName=\"mb-2 flex w-full items-center justify-between text-sm font-normal text-white\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<span>Weekly Forecast</span>\n\t\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\t\"h-4 w-4 transition-transform\",\n\t\t\t\t\t\t\t\t\tforecastExpanded && \"rotate-180\",\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\tfill=\"none\"\n\t\t\t\t\t\t\t\tstroke=\"currentColor\"\n\t\t\t\t\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\t\tstrokeLinecap=\"round\"\n\t\t\t\t\t\t\t\t\tstrokeLinejoin=\"round\"\n\t\t\t\t\t\t\t\t\tstrokeWidth={2}\n\t\t\t\t\t\t\t\t\td=\"M19 9l-7 7-7-7\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</svg>\n\t\t\t\t\t\t</button>\n\t\t\t\t\t\t{forecastExpanded && (\n\t\t\t\t\t\t\t<div className=\"space-y-2 pb-2\">\n\t\t\t\t\t\t\t\t{weatherData.forecast.map((day, idx) => {\n\t\t\t\t\t\t\t\t\tconst dayTemp = useFahrenheit\n\t\t\t\t\t\t\t\t\t\t? Math.round(celsiusToFahrenheit(day.temp_max))\n\t\t\t\t\t\t\t\t\t\t: Math.round(day.temp_max);\n\t\t\t\t\t\t\t\t\tconst nightTemp = useFahrenheit\n\t\t\t\t\t\t\t\t\t\t? Math.round(celsiusToFahrenheit(day.temp_min))\n\t\t\t\t\t\t\t\t\t\t: Math.round(day.temp_min);\n\n\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\t\tkey={idx}\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"flex items-center justify-start rounded-2xl bg-black/10 px-2 py-1 text-white\"\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t<div className=\"flex w-full flex-1 items-center justify-start gap-2\">\n\t\t\t\t\t\t\t\t\t\t\t\t<div className=\"flex items-center justify-center\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t{getWeatherIcon(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tday.weather.main,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"h-7 w-7\",\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tweatherTheme.colorCode,\n\t\t\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t\t\t<div className=\"w-24\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<span className=\"font-semibold text-white\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t{getDayOfWeek(day.date)}\n\t\t\t\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t\t\t\t\t\t<div className=\"flex w-24 justify-end\">\n\t\t\t\t\t\t\t\t\t\t\t\t<div className=\"flex flex-row items-end gap-2\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<div className=\"flex items-center\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<Sun03Icon\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"mr-1.5 h-7 w-7\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tcolor=\"#FCD34D\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tfill=\"#FCD34D\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span className=\"w-8 font-medium text-white\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{dayTemp}°\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<div className=\"mt-1 flex items-center\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<Moon02Icon\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"mr-1.5 h-7 w-7\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tcolor=\"#93C5FD\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tfill=\"#93C5FD\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span className=\"w-8 text-white/80\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{nightTemp}°\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\n\t\t\t{/* Weather Details */}\n\t\t\t{showDetails && (\n\t\t\t\t<div className=\"mt-4\">\n\t\t\t\t\t<button\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\tonClick={() => setDetailsExpanded(!detailsExpanded)}\n\t\t\t\t\t\tclassName=\"mb-2 flex w-full items-center justify-between text-sm font-normal text-white\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<span>Additional Information</span>\n\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\"h-4 w-4 transition-transform\",\n\t\t\t\t\t\t\t\tdetailsExpanded && \"rotate-180\",\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\tfill=\"none\"\n\t\t\t\t\t\t\tstroke=\"currentColor\"\n\t\t\t\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\tstrokeLinecap=\"round\"\n\t\t\t\t\t\t\t\tstrokeLinejoin=\"round\"\n\t\t\t\t\t\t\t\tstrokeWidth={2}\n\t\t\t\t\t\t\t\td=\"M19 9l-7 7-7-7\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t</button>\n\t\t\t\t\t{detailsExpanded && (\n\t\t\t\t\t\t<div className=\"mt-2 grid grid-cols-3 gap-2\">\n\t\t\t\t\t\t\t{[\n\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\ticon: (\n\t\t\t\t\t\t\t\t\t\t<FastWindIcon\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"h-6 w-6\"\n\t\t\t\t\t\t\t\t\t\t\tcolor={weatherTheme.colorCode}\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t\t\tlabel: \"Wind\",\n\t\t\t\t\t\t\t\t\tvalue: `${weatherData.wind.speed} m/s`,\n\t\t\t\t\t\t\t\t\ttooltipText: \"Wind speed in meters per second\",\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\ticon: (\n\t\t\t\t\t\t\t\t\t\t<DropletIcon\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"h-6 w-6\"\n\t\t\t\t\t\t\t\t\t\t\tcolor={weatherTheme.colorCode}\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t\t\tlabel: \"Humidity\",\n\t\t\t\t\t\t\t\t\tvalue: `${weatherData.main.humidity}%`,\n\t\t\t\t\t\t\t\t\ttooltipText: \"Amount of water vapor in the air\",\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t...(weatherData.visibility\n\t\t\t\t\t\t\t\t\t? [\n\t\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t\ticon: (\n\t\t\t\t\t\t\t\t\t\t\t\t\t<VisionIcon\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"h-6 w-6\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tcolor={weatherTheme.colorCode}\n\t\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t\t\t\t\t\tlabel: \"Visibility\",\n\t\t\t\t\t\t\t\t\t\t\t\tvalue: `${(weatherData.visibility / 1000).toFixed(\n\t\t\t\t\t\t\t\t\t\t\t\t\t1,\n\t\t\t\t\t\t\t\t\t\t\t\t)} km`,\n\t\t\t\t\t\t\t\t\t\t\t\ttooltipText: \"Maximum visibility distance\",\n\t\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\t]\n\t\t\t\t\t\t\t\t\t: []),\n\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\ticon: (\n\t\t\t\t\t\t\t\t\t\t<CloudIcon\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"h-6 w-6\"\n\t\t\t\t\t\t\t\t\t\t\tcolor={weatherTheme.colorCode}\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t\t\tlabel: \"Pressure\",\n\t\t\t\t\t\t\t\t\tvalue: `${weatherData.main.pressure} hPa`,\n\t\t\t\t\t\t\t\t\ttooltipText: \"Atmospheric pressure in hectopascals\",\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\ticon: (\n\t\t\t\t\t\t\t\t\t\t<HugeiconsIcon\n\t\t\t\t\t\t\t\t\t\t\ticon={SunriseIcon}\n\t\t\t\t\t\t\t\t\t\t\tsize={24}\n\t\t\t\t\t\t\t\t\t\t\tcolor={weatherTheme.colorCode}\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t\t\tlabel: \"Sunrise\",\n\t\t\t\t\t\t\t\t\tvalue: sunriseTime,\n\t\t\t\t\t\t\t\t\ttooltipText: \"Time when the sun rises above the horizon\",\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\ticon: (\n\t\t\t\t\t\t\t\t\t\t<HugeiconsIcon\n\t\t\t\t\t\t\t\t\t\t\ticon={SunsetIcon}\n\t\t\t\t\t\t\t\t\t\t\tsize={24}\n\t\t\t\t\t\t\t\t\t\t\tcolor={weatherTheme.colorCode}\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t\t\tlabel: \"Sunset\",\n\t\t\t\t\t\t\t\t\tvalue: sunsetTime,\n\t\t\t\t\t\t\t\t\ttooltipText: \"Time when the sun disappears below the horizon\",\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t].map((detail, index) => (\n\t\t\t\t\t\t\t\t<WeatherDetailItem\n\t\t\t\t\t\t\t\t\tkey={index}\n\t\t\t\t\t\t\t\t\ticon={detail.icon}\n\t\t\t\t\t\t\t\t\tlabel={detail.label}\n\t\t\t\t\t\t\t\t\tvalue={detail.value}\n\t\t\t\t\t\t\t\t\ttooltipText={detail.tooltipText}\n\t\t\t\t\t\t\t\t\thighlight={weatherTheme.colorCode}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t)}\n\t\t</div>\n\t);\n};\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/new-york/ui/weather-detail-item.tsx",
      "content": "\"use client\";\n\nimport type React from \"react\";\nimport type { ReactNode } from \"react\";\nimport {\n\tTooltip,\n\tTooltipContent,\n\tTooltipProvider,\n\tTooltipTrigger,\n} from \"@/components/ui/tooltip\";\n\nexport interface WeatherDetailItemProps {\n\ticon: ReactNode;\n\tlabel: string;\n\tvalue: string;\n\ttooltipText?: string;\n\thighlight: string;\n}\n\nexport const WeatherDetailItem: React.FC<WeatherDetailItemProps> = ({\n\ticon,\n\tlabel,\n\tvalue,\n\ttooltipText,\n\thighlight,\n}) => {\n\treturn (\n\t\t<div className=\"flex flex-col items-start rounded-2xl bg-black/10 p-2 px-3 backdrop-blur-sm\">\n\t\t\t<TooltipProvider>\n\t\t\t\t<Tooltip>\n\t\t\t\t\t<TooltipTrigger asChild>\n\t\t\t\t\t\t<div className=\"flex w-full cursor-help flex-row items-start justify-between\">\n\t\t\t\t\t\t\t<div className=\"flex flex-col\">\n\t\t\t\t\t\t\t\t<div className=\"w-fit text-sm text-white/70\">{label}</div>\n\t\t\t\t\t\t\t\t<div className=\"w-fit font-medium text-white\">{value}</div>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<div style={{ color: highlight }}>{icon}</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</TooltipTrigger>\n\t\t\t\t\t{tooltipText && (\n\t\t\t\t\t\t<TooltipContent>\n\t\t\t\t\t\t\t<p>{tooltipText}</p>\n\t\t\t\t\t\t</TooltipContent>\n\t\t\t\t\t)}\n\t\t\t\t</Tooltip>\n\t\t\t</TooltipProvider>\n\t\t</div>\n\t);\n};\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/new-york/ui/weather-icons.tsx",
      "content": "import type React from \"react\";\n\nexport interface IconProps extends React.SVGProps<SVGSVGElement> {\n\tcolor?: string;\n}\n\nexport const CloudAngledZapIcon: React.FC<IconProps> = (props) => (\n\t<svg\n\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\tviewBox=\"0 0 24 24\"\n\t\twidth={24}\n\t\theight={24}\n\t\tcolor={\"#000000\"}\n\t\tfill={\"none\"}\n\t\taria-label=\"Storm\"\n\t\trole=\"img\"\n\t\t{...props}\n\t>\n\t\t<path\n\t\t\td=\"M7 17.5C4.23858 17.5 2 15.336 2 12.6667C2 10.1537 3.98398 8.0886 6.52042 7.85528M17.5 17.5C19.9853 17.5 22 15.5524 22 13.15C22 10.7476 19.9853 8.8 17.5 8.8C17.4925 8.8 17.485 8.80002 17.4776 8.80005M17.4776 8.80005C17.4924 8.64084 17.5 8.47961 17.5 8.31667C17.5 5.38035 15.0376 3 12 3C9.12324 3 6.76233 5.135 6.52042 7.85528M17.4776 8.80005C17.3753 9.89668 16.9286 10.8973 16.2428 11.7M6.52042 7.85528C6.67826 7.84076 6.83823 7.83333 7 7.83333C8.12582 7.83333 9.16474 8.19302 10.0005 8.8\"\n\t\t\tstroke=\"currentColor\"\n\t\t\tstrokeWidth=\"1.5\"\n\t\t\tstrokeLinecap=\"round\"\n\t\t\tstrokeLinejoin=\"round\"\n\t\t/>\n\t\t<path\n\t\t\td=\"M12.5784 14L10.8043 16.6838C10.5668 17.0431 10.4481 17.2227 10.5217 17.3614C10.5952 17.5 10.8093 17.5 11.2375 17.5H12.7625C13.1907 17.5 13.4048 17.5 13.4783 17.6386C13.5519 17.7773 13.4332 17.9569 13.1957 18.3162L11.4216 21\"\n\t\t\tstroke=\"currentColor\"\n\t\t\tstrokeWidth=\"1.5\"\n\t\t\tstrokeLinecap=\"round\"\n\t\t\tstrokeLinejoin=\"round\"\n\t\t/>\n\t</svg>\n);\n\nexport const CloudLittleRainIcon: React.FC<IconProps> = (props) => (\n\t<svg\n\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\tviewBox=\"0 0 24 24\"\n\t\twidth={24}\n\t\theight={24}\n\t\tcolor={\"#000000\"}\n\t\tfill={\"none\"}\n\t\taria-label=\"Light Rain\"\n\t\trole=\"img\"\n\t\t{...props}\n\t>\n\t\t<path\n\t\t\td=\"M12.0011 13.5V15M9 16.5V18M15 16.5V18M6.5 19.5V21M17.5 19.5V21M12 19.5V21\"\n\t\t\tstroke=\"currentColor\"\n\t\t\tstrokeWidth=\"1.5\"\n\t\t\tstrokeLinecap=\"round\"\n\t\t/>\n\t\t<path\n\t\t\td=\"M17.4776 8.89801L17.5 8.89795C19.9853 8.89795 22 10.8784 22 13.3214C22 14.8551 21.206 16.2065 20 17M17.4776 8.89801C17.4924 8.73611 17.5 8.57216 17.5 8.40646C17.5 5.42055 15.0376 3 12 3C9.12324 3 6.76233 5.17106 6.52042 7.93728M17.4776 8.89801C17.3753 10.0132 16.9286 11.0307 16.2428 11.8469M6.52042 7.93728C3.98398 8.17454 2 10.2745 2 12.8299C2 14.4378 2.78565 15.8652 4 16.7619M6.52042 7.93728C6.67826 7.92251 6.83823 7.91496 7 7.91496C8.12582 7.91496 9.16474 8.28072 10.0005 8.89795\"\n\t\t\tstroke=\"currentColor\"\n\t\t\tstrokeWidth=\"1.5\"\n\t\t\tstrokeLinecap=\"round\"\n\t\t\tstrokeLinejoin=\"round\"\n\t\t/>\n\t</svg>\n);\n\nexport const CloudAngledRainIcon: React.FC<IconProps> = (props) => (\n\t<svg\n\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\tviewBox=\"0 0 24 24\"\n\t\twidth={24}\n\t\theight={24}\n\t\tcolor={\"#000000\"}\n\t\tfill={\"none\"}\n\t\taria-label=\"Rain\"\n\t\trole=\"img\"\n\t\t{...props}\n\t>\n\t\t<path\n\t\t\td=\"M12.5 15L11.5 17M17 15L16 17M13.5 19L12.5 21M8 15L7 17M9 19L8 21\"\n\t\t\tstroke=\"currentColor\"\n\t\t\tstrokeWidth=\"1.5\"\n\t\t\tstrokeLinecap=\"round\"\n\t\t\tstrokeLinejoin=\"round\"\n\t\t/>\n\t\t<path\n\t\t\td=\"M17.4776 8.89801L17.5 8.89795C19.9853 8.89795 22 10.8784 22 13.3214C22 14.8551 21.206 16.2065 20 17M17.4776 8.89801C17.4924 8.73611 17.5 8.57216 17.5 8.40646C17.5 5.42055 15.0376 3 12 3C9.12324 3 6.76233 5.17106 6.52042 7.93728M17.4776 8.89801C17.3753 10.0132 16.9286 11.0307 16.2428 11.8469M6.52042 7.93728C3.98398 8.17454 2 10.2745 2 12.8299C2 14.4378 2.78565 15.8652 4 16.7619M6.52042 7.93728C6.67826 7.92251 6.83823 7.91496 7 7.91496C8.12582 7.91496 9.16474 8.28072 10.0005 8.89795\"\n\t\t\tstroke=\"currentColor\"\n\t\t\tstrokeWidth=\"1.5\"\n\t\t\tstrokeLinecap=\"round\"\n\t\t\tstrokeLinejoin=\"round\"\n\t\t/>\n\t</svg>\n);\n\nexport const CloudSnowIcon: React.FC<IconProps> = (props) => (\n\t<svg\n\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\tviewBox=\"0 0 24 24\"\n\t\twidth={24}\n\t\theight={24}\n\t\tcolor={\"#000000\"}\n\t\tfill={\"none\"}\n\t\taria-label=\"Snow\"\n\t\trole=\"img\"\n\t\t{...props}\n\t>\n\t\t<path\n\t\t\td=\"M17.4776 8.7803L17.5 8.78025C19.9853 8.78025 22 10.7212 22 13.1154C22 14.8176 20.9817 16.2906 19.5 17M17.4776 8.7803C17.4924 8.62164 17.5 8.46095 17.5 8.29856C17.5 5.37225 15.0376 3 12 3C9.12324 3 6.76233 5.12773 6.52042 7.83875M17.4776 8.7803C17.3753 9.8732 16.9286 10.8704 16.2428 11.6704M6.52042 7.83875C3.98398 8.07128 2 10.1293 2 12.6338C2 14.566 3.18102 16.2326 4.88559 17M6.52042 7.83875C6.67826 7.82428 6.83823 7.81688 7 7.81688C8.12582 7.81688 9.16474 8.17534 10.0005 8.78025\"\n\t\t\tstroke=\"currentColor\"\n\t\t\tstrokeWidth=\"1.5\"\n\t\t\tstrokeLinecap=\"round\"\n\t\t\tstrokeLinejoin=\"round\"\n\t\t/>\n\t\t<path\n\t\t\td=\"M11.9978 16.9974L12.0022 17.0052M15.9955 15L16 15.0078M8 15L8.00449 15.0078M15.9955 18.9948L16 19.0026M8 18.9948L8.00449 19.0026M11.9978 20.9922L12.0022 21\"\n\t\t\tstroke=\"currentColor\"\n\t\t\tstrokeWidth=\"2\"\n\t\t\tstrokeLinecap=\"round\"\n\t\t\tstrokeLinejoin=\"round\"\n\t\t/>\n\t</svg>\n);\n\nexport const CloudFogIcon: React.FC<IconProps> = (props) => (\n\t<svg\n\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\tviewBox=\"0 0 24 24\"\n\t\twidth={24}\n\t\theight={24}\n\t\tcolor={\"#000000\"}\n\t\tfill={\"none\"}\n\t\taria-label=\"Fog\"\n\t\trole=\"img\"\n\t\t{...props}\n\t>\n\t\t<path\n\t\t\td=\"M17.4776 9.00005C17.485 9.00002 17.4925 9 17.5 9C19.9853 9 22 11.0147 22 13.5C22 15.9853 19.9853 18 17.5 18H7C4.23858 18 2 15.7614 2 13C2 10.4003 3.98398 8.26407 6.52042 8.0227M17.4776 9.00005C17.4924 8.83536 17.5 8.66856 17.5 8.5C17.5 5.46243 15.0376 3 12 3C9.12324 3 6.76233 5.20862 6.52042 8.0227M17.4776 9.00005C17.3753 10.1345 16.9286 11.1696 16.2428 12M6.52042 8.0227C6.67826 8.00768 6.83823 8 7 8C8.12582 8 9.16474 8.37209 10.0005 9\"\n\t\t\tstroke=\"currentColor\"\n\t\t\tstrokeWidth=\"1.5\"\n\t\t\tstrokeLinecap=\"round\"\n\t\t\tstrokeLinejoin=\"round\"\n\t\t/>\n\t\t<path\n\t\t\td=\"M6 21H8\"\n\t\t\tstroke=\"currentColor\"\n\t\t\tstrokeWidth=\"1.5\"\n\t\t\tstrokeLinecap=\"round\"\n\t\t/>\n\t\t<path\n\t\t\td=\"M11 21H13\"\n\t\t\tstroke=\"currentColor\"\n\t\t\tstrokeWidth=\"1.5\"\n\t\t\tstrokeLinecap=\"round\"\n\t\t/>\n\t\t<path\n\t\t\td=\"M16 21H18\"\n\t\t\tstroke=\"currentColor\"\n\t\t\tstrokeWidth=\"1.5\"\n\t\t\tstrokeLinecap=\"round\"\n\t\t/>\n\t</svg>\n);\n\nexport const CloudIcon: React.FC<IconProps> = (props) => (\n\t<svg\n\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\tviewBox=\"0 0 24 24\"\n\t\twidth={24}\n\t\theight={24}\n\t\tcolor={\"#000000\"}\n\t\tfill={\"none\"}\n\t\taria-label=\"Cloud\"\n\t\trole=\"img\"\n\t\t{...props}\n\t>\n\t\t<path\n\t\t\td=\"M17.4776 10.0001C17.485 10 17.4925 10 17.5 10C19.9853 10 22 12.0147 22 14.5C22 16.9853 19.9853 19 17.5 19H7C4.23858 19 2 16.7614 2 14C2 11.4003 3.98398 9.26407 6.52042 9.0227M17.4776 10.0001C17.4924 9.83536 17.5 9.66856 17.5 9.5C17.5 6.46243 15.0376 4 12 4C9.12324 4 6.76233 6.20862 6.52042 9.0227M17.4776 10.0001C17.3753 11.1345 16.9286 12.1696 16.2428 13M6.52042 9.0227C6.67826 9.00768 6.83823 9 7 9C8.12582 9 9.16474 9.37209 10.0005 10\"\n\t\t\tstroke=\"currentColor\"\n\t\t\tstrokeWidth=\"1.5\"\n\t\t\tstrokeLinecap=\"round\"\n\t\t\tstrokeLinejoin=\"round\"\n\t\t/>\n\t</svg>\n);\n\nexport const FastWindIcon: React.FC<IconProps> = (props) => (\n\t<svg\n\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\tviewBox=\"0 0 24 24\"\n\t\twidth={24}\n\t\theight={24}\n\t\tcolor={\"#000000\"}\n\t\tfill={\"none\"}\n\t\taria-label=\"Wind\"\n\t\trole=\"img\"\n\t\t{...props}\n\t>\n\t\t<path\n\t\t\td=\"M2 5.94145C5.5 9.37313 10.5755 7.90241 11.7324 5.94145C11.9026 5.65301 12 5.31814 12 4.96096C12 3.87795 11.1046 3 10 3C8.89543 3 8 3.87795 8 4.96096\"\n\t\t\tstroke=\"currentColor\"\n\t\t\tstrokeWidth=\"1.5\"\n\t\t\tstrokeLinecap=\"round\"\n\t\t/>\n\t\t<path\n\t\t\td=\"M17 8.92814C17 7.31097 18.1193 6 19.5 6C20.8807 6 22 7.31097 22 8.92814C22 9.6452 21.7799 10.3021 21.4146 10.8111C19.3463 14.1915 9.2764 12.9164 4 11.8563\"\n\t\t\tstroke=\"currentColor\"\n\t\t\tstrokeWidth=\"1.5\"\n\t\t\tstrokeLinecap=\"round\"\n\t\t/>\n\t\t<path\n\t\t\td=\"M13.0854 19.8873C13.2913 20.5356 13.8469 21 14.5 21C15.3284 21 16 20.2528 16 19.331C16 19.0176 15.9224 18.7244 15.7873 18.4738C14.4999 15.9925 7.99996 14.3239 2 18.7746\"\n\t\t\tstroke=\"currentColor\"\n\t\t\tstrokeWidth=\"1.5\"\n\t\t\tstrokeLinecap=\"round\"\n\t\t/>\n\t\t<path\n\t\t\td=\"M19 15.5H21\"\n\t\t\tstroke=\"currentColor\"\n\t\t\tstrokeWidth=\"1.5\"\n\t\t\tstrokeLinecap=\"round\"\n\t\t\tstrokeLinejoin=\"round\"\n\t\t/>\n\t</svg>\n);\n\nexport const Sun03Icon: React.FC<IconProps> = (props) => (\n\t<svg\n\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\tviewBox=\"0 0 24 24\"\n\t\twidth={24}\n\t\theight={24}\n\t\tcolor={\"#000000\"}\n\t\tfill={\"none\"}\n\t\taria-label=\"Sun\"\n\t\trole=\"img\"\n\t\t{...props}\n\t>\n\t\t<path\n\t\t\td=\"M17 12C17 14.7614 14.7614 17 12 17C9.23858 17 7 14.7614 7 12C7 9.23858 9.23858 7 12 7C14.7614 7 17 9.23858 17 12Z\"\n\t\t\tstroke=\"currentColor\"\n\t\t\tstrokeWidth=\"1.5\"\n\t\t/>\n\t\t<path\n\t\t\td=\"M12 2V3.5M12 20.5V22M19.0708 19.0713L18.0101 18.0106M5.98926 5.98926L4.9286 4.9286M22 12H20.5M3.5 12H2M19.0713 4.92871L18.0106 5.98937M5.98975 18.0107L4.92909 19.0714\"\n\t\t\tstroke=\"currentColor\"\n\t\t\tstrokeWidth=\"1.5\"\n\t\t\tstrokeLinecap=\"round\"\n\t\t/>\n\t</svg>\n);\n\nexport const Moon02Icon: React.FC<IconProps> = (props) => (\n\t<svg\n\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\tviewBox=\"0 0 24 24\"\n\t\twidth={24}\n\t\theight={24}\n\t\tcolor={\"#000000\"}\n\t\tfill={\"none\"}\n\t\taria-label=\"Moon\"\n\t\trole=\"img\"\n\t\t{...props}\n\t>\n\t\t<path\n\t\t\td=\"M21.5 14.0784C20.3003 14.7189 18.9301 15.0821 17.4751 15.0821C12.7491 15.0821 8.91792 11.2509 8.91792 6.52485C8.91792 5.06986 9.28105 3.69968 9.92163 2.5C5.66765 3.49698 2.5 7.31513 2.5 11.8731C2.5 17.1899 6.8101 21.5 12.1269 21.5C16.6849 21.5 20.503 18.3324 21.5 14.0784Z\"\n\t\t\tstroke=\"currentColor\"\n\t\t\tstrokeWidth=\"1.5\"\n\t\t\tstrokeLinecap=\"round\"\n\t\t\tstrokeLinejoin=\"round\"\n\t\t/>\n\t</svg>\n);\n\nexport const Tornado02Icon: React.FC<IconProps> = (props) => (\n\t<svg\n\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\tviewBox=\"0 0 24 24\"\n\t\twidth={24}\n\t\theight={24}\n\t\tcolor={\"#000000\"}\n\t\tfill={\"none\"}\n\t\taria-label=\"Tornado\"\n\t\trole=\"img\"\n\t\t{...props}\n\t>\n\t\t<path\n\t\t\td=\"M9.01654 6.15879C10.9944 4.77262 17.9171 3.55944 18.906 6.15879C20.3862 10.0497 3.87743 12.3805 5.06077 6.15849C5.55508 3.55944 10.5002 2 12.9725 2\"\n\t\t\tstroke=\"currentColor\"\n\t\t\tstrokeWidth=\"1.5\"\n\t\t\tstrokeLinecap=\"round\"\n\t\t/>\n\t\t<path\n\t\t\td=\"M18 11.1934C15.423 13.0706 8.5771 13.8244 6 11.7816\"\n\t\t\tstroke=\"currentColor\"\n\t\t\tstrokeWidth=\"1.5\"\n\t\t\tstrokeLinecap=\"round\"\n\t\t/>\n\t\t<path\n\t\t\td=\"M14.0219 21.6941C13.0436 21.8816 12.0077 21.989 11 21.9995\"\n\t\t\tstroke=\"currentColor\"\n\t\t\tstrokeWidth=\"1.5\"\n\t\t\tstrokeLinecap=\"round\"\n\t\t/>\n\t\t<path\n\t\t\td=\"M7 15.166C9.07731 16.0444 12.3835 15.9574 15 15.2812\"\n\t\t\tstroke=\"currentColor\"\n\t\t\tstrokeWidth=\"1.5\"\n\t\t\tstrokeLinecap=\"round\"\n\t\t/>\n\t\t<path\n\t\t\td=\"M8.03906 18.5039C9.49304 18.8598 11.2867 18.8854 12.9988 18.6635\"\n\t\t\tstroke=\"currentColor\"\n\t\t\tstrokeWidth=\"1.5\"\n\t\t\tstrokeLinecap=\"round\"\n\t\t/>\n\t</svg>\n);\n\nexport const DropletIcon: React.FC<IconProps> = (props) => (\n\t<svg\n\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\tviewBox=\"0 0 24 24\"\n\t\twidth={24}\n\t\theight={24}\n\t\tcolor={\"#000000\"}\n\t\tfill={\"none\"}\n\t\taria-label=\"Droplet\"\n\t\trole=\"img\"\n\t\t{...props}\n\t>\n\t\t<path\n\t\t\td=\"M3.5 13.678C3.5 9.49387 7.08079 5.35907 9.59413 2.97222C10.9591 1.67593 13.0409 1.67593 14.4059 2.97222C16.9192 5.35907 20.5 9.49387 20.5 13.678C20.5 17.7804 17.2812 22 12 22C6.71878 22 3.5 17.7804 3.5 13.678Z\"\n\t\t\tstroke=\"currentColor\"\n\t\t\tstrokeWidth=\"1.5\"\n\t\t/>\n\t\t<path\n\t\t\td=\"M16 14C16 16.2091 14.2091 18 12 18\"\n\t\t\tstroke=\"currentColor\"\n\t\t\tstrokeWidth=\"1.5\"\n\t\t\tstrokeLinecap=\"round\"\n\t\t\tstrokeLinejoin=\"round\"\n\t\t/>\n\t</svg>\n);\n\nexport const VisionIcon: React.FC<IconProps> = (props) => (\n\t<svg\n\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\tviewBox=\"0 0 24 24\"\n\t\twidth={24}\n\t\theight={24}\n\t\tcolor={\"#000000\"}\n\t\tfill={\"none\"}\n\t\taria-label=\"Vision\"\n\t\trole=\"img\"\n\t\t{...props}\n\t>\n\t\t<path\n\t\t\td=\"M2.5 8.18677C2.60406 6.08705 2.91537 4.77792 3.84664 3.84664C4.77792 2.91537 6.08705 2.60406 8.18677 2.5M21.5 8.18677C21.3959 6.08705 21.0846 4.77792 20.1534 3.84664C19.2221 2.91537 17.9129 2.60406 15.8132 2.5M15.8132 21.5C17.9129 21.3959 19.2221 21.0846 20.1534 20.1534C21.0846 19.2221 21.3959 17.9129 21.5 15.8132M8.18676 21.5C6.08705 21.3959 4.77792 21.0846 3.84664 20.1534C2.91537 19.2221 2.60406 17.9129 2.5 15.8132\"\n\t\t\tstroke=\"currentColor\"\n\t\t\tstrokeWidth=\"1.5\"\n\t\t\tstrokeLinecap=\"round\"\n\t\t\tstrokeLinejoin=\"round\"\n\t\t/>\n\t\t<path\n\t\t\td=\"M19.6352 11.3178C19.8784 11.6224 20 11.7746 20 12C20 12.2254 19.8784 12.3776 19.6352 12.6822C18.5423 14.0504 15.7514 17 12 17C8.24862 17 5.45768 14.0504 4.36483 12.6822C4.12161 12.3776 4 12.2254 4 12C4 11.7746 4.12161 11.6224 4.36483 11.3178C5.45768 9.9496 8.24862 7 12 7C15.7514 7 18.5423 9.9496 19.6352 11.3178Z\"\n\t\t\tstroke=\"currentColor\"\n\t\t\tstrokeWidth=\"1.5\"\n\t\t/>\n\t\t<path\n\t\t\td=\"M14 12C14 10.8954 13.1046 10 12 10C10.8954 10 10 10.8954 10 12C10 13.1046 10.8954 14 12 14C13.1046 14 14 13.1046 14 12Z\"\n\t\t\tstroke=\"currentColor\"\n\t\t\tstrokeWidth=\"1.5\"\n\t\t/>\n\t</svg>\n);\n",
      "type": "registry:ui"
    }
  ]
}