{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "weather-widget",
  "title": "Weather Widgets",
  "description": "Weather widgets for displaying temperature, conditions, forecasts, and hourly data with liquid glass styling.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "https://ui.eindev.ir/r/base-widget.json"
  ],
  "files": [
    {
      "path": "registry/widgets/weather-widget.tsx",
      "content": "\"use client\";\n\nimport { cn } from \"@/lib/utils\";\nimport { Cloud, CloudRain, Sun, CloudSnow, Wind, Droplets, Thermometer, Moon } from \"lucide-react\";\nimport { GlassWidgetBase } from \"./base-widget\";\n\ntype WeatherCondition = \"sunny\" | \"cloudy\" | \"rainy\" | \"snowy\" | \"night\" | \"night-cloudy\";\n\nconst WeatherIcon = ({\n  condition,\n  className,\n}: {\n  condition: WeatherCondition;\n  className?: string;\n}) => {\n  switch (condition) {\n    case \"sunny\":\n      return <Sun className={cn(\"text-amber-400\", className)} />;\n    case \"cloudy\":\n      return <Cloud className={cn(\"text-gray-400\", className)} />;\n    case \"rainy\":\n      return <CloudRain className={cn(\"text-blue-400\", className)} />;\n    case \"snowy\":\n      return <CloudSnow className={cn(\"text-blue-200\", className)} />;\n    case \"night\":\n      return <Moon className={cn(\"text-blue-300\", className)} />;\n    case \"night-cloudy\":\n      return <Cloud className={cn(\"text-gray-500\", className)} />;\n    default:\n      return <Sun className={cn(\"text-amber-400\", className)} />;\n  }\n};\n\ninterface WeatherWidgetProps {\n  temperature: number;\n  condition: string;\n  icon?: \"sun\" | \"cloud\" | \"rain\" | \"snow\" | \"wind\";\n  location?: string;\n  className?: string;\n}\n\nfunction WeatherWidget({\n  temperature,\n  condition,\n  icon = \"sun\",\n  location,\n  className,\n}: WeatherWidgetProps) {\n  const iconMap = {\n    sun: Sun,\n    cloud: Cloud,\n    rain: CloudRain,\n    snow: CloudSnow,\n    wind: Wind,\n  };\n\n  const Icon = iconMap[icon];\n  const glowColors = {\n    sun: \"amber\",\n    cloud: \"blue\",\n    rain: \"cyan\",\n    snow: \"purple\",\n    wind: \"blue\",\n  } as const;\n\n  return (\n    <GlassWidgetBase className={cn(\"min-w-48\", className)} size=\"md\" glowColor={glowColors[icon]}>\n      {location && <div className=\"text-white/60 text-sm mb-2\">{location}</div>}\n      <div className=\"flex items-center justify-between\">\n        <div className=\"flex items-center gap-3\">\n          <div className=\"p-2 rounded-xl bg-white/10\">\n            <Icon className=\"w-8 h-8 text-white\" />\n          </div>\n          <div>\n            <div className=\"text-4xl font-light text-white\">{temperature}°</div>\n            <div className=\"text-white/70 text-sm\">{condition}</div>\n          </div>\n        </div>\n      </div>\n    </GlassWidgetBase>\n  );\n}\n\ninterface CurrentWeatherWidgetProps {\n  location: string;\n  temperature: number;\n  feelsLike?: number;\n  high?: number;\n  low?: number;\n  condition?: WeatherCondition;\n  humidity?: number;\n  windSpeed?: number;\n  className?: string;\n}\n\nfunction CurrentWeatherWidget({\n  location,\n  temperature,\n  feelsLike,\n  high,\n  low,\n  condition = \"sunny\",\n  humidity,\n  windSpeed,\n  className,\n}: CurrentWeatherWidgetProps) {\n  const conditionText: Record<WeatherCondition, string> = {\n    sunny: \"Sunny\",\n    cloudy: \"Cloudy\",\n    rainy: \"Rainy\",\n    snowy: \"Snowy\",\n    night: \"Clear Night\",\n    \"night-cloudy\": \"Partly Cloudy\",\n  };\n\n  const glowColor =\n    condition === \"sunny\"\n      ? \"amber\"\n      : condition === \"rainy\" || condition === \"snowy\"\n      ? \"blue\"\n      : \"cyan\";\n\n  return (\n    <GlassWidgetBase className={cn(\"min-w-50\", className)} glowColor={glowColor}>\n      <div className=\"flex items-start justify-between mb-3\">\n        <div>\n          <div className=\"text-white font-medium\">{location}</div>\n          {feelsLike !== undefined && (\n            <div className=\"text-white/50 text-sm\">Feels like {feelsLike}°</div>\n          )}\n        </div>\n        <WeatherIcon condition={condition} className=\"w-8 h-8\" />\n      </div>\n\n      <div className=\"text-5xl font-light text-white mb-2\">{temperature}°</div>\n\n      <div className=\"text-white/60 text-sm mb-3\">{conditionText[condition]}</div>\n\n      <div className=\"flex items-center gap-4 text-sm\">\n        {high !== undefined && (\n          <span className=\"flex items-center gap-1 text-white/60\">\n            <Thermometer className=\"w-3 h-3\" /> H: {high}°\n          </span>\n        )}\n        {low !== undefined && (\n          <span className=\"flex items-center gap-1 text-white/60\">L: {low}°</span>\n        )}\n      </div>\n\n      {(humidity !== undefined || windSpeed !== undefined) && (\n        <div className=\"flex items-center gap-4 text-sm mt-2 pt-2 border-t border-white/10\">\n          {humidity !== undefined && (\n            <span className=\"flex items-center gap-1 text-white/50\">\n              <Droplets className=\"w-3 h-3\" /> {humidity}%\n            </span>\n          )}\n          {windSpeed !== undefined && (\n            <span className=\"flex items-center gap-1 text-white/50\">\n              <Wind className=\"w-3 h-3\" /> {windSpeed} km/h\n            </span>\n          )}\n        </div>\n      )}\n    </GlassWidgetBase>\n  );\n}\n\ninterface DetailedWeatherWidgetProps {\n  temperature: number;\n  condition: string;\n  icon?: \"sun\" | \"cloud\" | \"rain\" | \"snow\" | \"wind\";\n  location?: string;\n  humidity?: number;\n  windSpeed?: number;\n  feelsLike?: number;\n  className?: string;\n}\n\nfunction DetailedWeatherWidget({\n  temperature,\n  condition,\n  icon = \"sun\",\n  location,\n  humidity,\n  windSpeed,\n  feelsLike,\n  className,\n}: DetailedWeatherWidgetProps) {\n  const iconMap = {\n    sun: Sun,\n    cloud: Cloud,\n    rain: CloudRain,\n    snow: CloudSnow,\n    wind: Wind,\n  };\n\n  const Icon = iconMap[icon];\n  const glowColors = {\n    sun: \"amber\",\n    cloud: \"blue\",\n    rain: \"cyan\",\n    snow: \"purple\",\n    wind: \"blue\",\n  } as const;\n\n  return (\n    <GlassWidgetBase className={cn(\"min-w-64\", className)} size=\"lg\" glowColor={glowColors[icon]}>\n      {location && <div className=\"text-white/60 text-sm mb-3\">{location}</div>}\n      <div className=\"flex items-stretch justify-between mb-4\">\n        <div className=\"flex items-center gap-4\">\n          <div className=\"p-3 rounded-xl bg-white/10\">\n            <Icon className=\"size-10 text-white\" />\n          </div>\n          <div>\n            <div className=\"text-5xl font-light text-white mb-1\">{temperature}°</div>\n            <div className=\"text-white/70 text-base\">{condition}</div>\n            {feelsLike && <div className=\"text-white/50 text-xs mt-1\">Feels like {feelsLike}°</div>}\n          </div>\n        </div>\n      </div>\n      <div className=\"grid grid-cols-2 gap-3 pt-3 border-t border-white/10\">\n        {humidity !== undefined && (\n          <div className=\"flex items-center gap-2\">\n            <Droplets className=\"w-4 h-4 text-cyan-400\" />\n            <div>\n              <div className=\"text-white/50 text-xs\">Humidity</div>\n              <div className=\"text-white text-sm font-medium\">{humidity}%</div>\n            </div>\n          </div>\n        )}\n        {windSpeed !== undefined && (\n          <div className=\"flex items-center gap-2\">\n            <Wind className=\"w-4 h-4 text-blue-400\" />\n            <div>\n              <div className=\"text-white/50 text-xs\">Wind</div>\n              <div className=\"text-white text-sm font-medium\">{windSpeed} km/h</div>\n            </div>\n          </div>\n        )}\n      </div>\n    </GlassWidgetBase>\n  );\n}\n\ninterface ForecastDay {\n  day: string;\n  high: number;\n  low: number;\n  icon?: \"sun\" | \"cloud\" | \"rain\" | \"snow\" | \"wind\";\n  condition: WeatherCondition;\n}\n\ninterface ForecastWeatherWidgetProps {\n  current: {\n    temperature: number;\n    condition: string;\n    icon?: \"sun\" | \"cloud\" | \"rain\" | \"snow\" | \"wind\";\n  };\n  forecast: ForecastDay[];\n  location?: string;\n  className?: string;\n}\n\nfunction ForecastWeatherWidget({\n  current,\n  forecast,\n  location,\n  className,\n}: ForecastWeatherWidgetProps) {\n  const iconMap = {\n    sun: Sun,\n    cloud: Cloud,\n    rain: CloudRain,\n    snow: CloudSnow,\n    wind: Wind,\n  };\n\n  const CurrentIcon = iconMap[current.icon || \"sun\"];\n\n  return (\n    <GlassWidgetBase className={cn(\"min-w-72\", className)} size=\"lg\" glowColor=\"cyan\">\n      {location && <div className=\"text-white/60 text-sm mb-3\">{location}</div>}\n      <div className=\"flex items-center gap-4 mb-4 pb-4 border-b border-white/10\">\n        <div className=\"p-3 rounded-xl bg-white/10\">\n          <CurrentIcon className=\"w-10 h-10 text-white\" />\n        </div>\n        <div>\n          <div className=\"text-4xl font-light text-white mb-1\">{current.temperature}°</div>\n          <div className=\"text-white/70 text-sm\">{current.condition}</div>\n        </div>\n      </div>\n      <div className=\"space-y-2\">\n        {forecast.map((day, i) => {\n          const DayIcon = iconMap[day.icon || \"sun\"];\n          return (\n            <div\n              key={i}\n              className=\"flex items-center justify-between p-2 rounded-lg bg-white/5 hover:bg-white/10 transition-colors\"\n            >\n              <div className=\"flex items-center gap-3 flex-1 min-w-0\">\n                <DayIcon className=\"w-5 h-5 text-white/70 shrink-0\" />\n                <span className=\"text-white/70 text-sm truncate\">{day.day}</span>\n              </div>\n              <div className=\"flex items-center gap-3 shrink-0\">\n                <span className=\"text-white/50 text-xs\">{day.condition}</span>\n                <div className=\"flex items-center gap-2\">\n                  <span className=\"text-white text-sm font-medium\">{day.high}°</span>\n                  <span className=\"text-white/50 text-sm\">{day.low}°</span>\n                </div>\n              </div>\n            </div>\n          );\n        })}\n      </div>\n    </GlassWidgetBase>\n  );\n}\n\ninterface HourlyWeatherWidgetProps {\n  hours: Array<{\n    time: string;\n    temperature: number;\n    icon?: \"sun\" | \"cloud\" | \"rain\" | \"snow\" | \"wind\";\n  }>;\n  className?: string;\n}\n\nfunction HourlyWeatherWidget({ hours, className }: HourlyWeatherWidgetProps) {\n  const iconMap = {\n    sun: Sun,\n    cloud: Cloud,\n    rain: CloudRain,\n    snow: CloudSnow,\n    wind: Wind,\n  };\n\n  // Guard clause: handle empty hours array\n  if (!hours || hours.length === 0) {\n    return (\n      <GlassWidgetBase className={cn(\"min-w-80\", className)} size=\"lg\" glowColor=\"blue\">\n        <div className=\"text-white/60 text-sm mb-4\">24 Hour Forecast</div>\n        <div className=\"text-center py-8 text-white/40 text-sm\">No hourly data available</div>\n      </GlassWidgetBase>\n    );\n  }\n\n  const maxTemp = Math.max(...hours.map((h) => h.temperature));\n  const minTemp = Math.min(...hours.map((h) => h.temperature));\n  const tempRange = maxTemp - minTemp || 1;\n\n  return (\n    <GlassWidgetBase className={cn(\"min-w-80\", className)} size=\"lg\" glowColor=\"blue\">\n      <div className=\"text-white/60 text-sm mb-8\">24 Hour Forecast</div>\n      <div className=\"flex items-end justify-between gap-2\">\n        {hours.map((hour, i) => {\n          const Icon = iconMap[hour.icon || \"sun\"];\n          const height = ((hour.temperature - minTemp) / tempRange) * 100;\n          return (\n            <div key={i} className=\"flex flex-col items-center gap-2 flex-1\">\n              <div className=\"relative w-full h-24 flex items-end justify-center\">\n                <div\n                  className=\"w-full rounded-t-lg bg-linear-to-t from-cyan-500/40 to-blue-500/40 transition-all\"\n                  style={{ height: `${Math.max(height, 10)}%` }}\n                />\n                <div className=\"absolute -top-6 text-white text-xs font-medium\">\n                  {hour.temperature}°\n                </div>\n              </div>\n              <Icon className=\"w-4 h-4 text-white/70\" />\n              <div className=\"text-white/50 text-[10px] text-center\">{hour.time}</div>\n            </div>\n          );\n        })}\n      </div>\n    </GlassWidgetBase>\n  );\n}\n\n// ForecastDay interface is declared earlier with WeatherCondition for `condition`\n\ninterface ForecastWidgetProps {\n  forecast?: ForecastDay[];\n  className?: string;\n}\n\nfunction ForecastWidget({ forecast = [], className }: ForecastWidgetProps) {\n  return (\n    <GlassWidgetBase className={cn(\"min-w-45\", className)} glowColor=\"amber\">\n      <h3 className=\"text-white/60 text-sm mb-3\">5-Day Forecast</h3>\n      <div className=\"space-y-2.5\">\n        {forecast.map((day, i) => (\n          <div key={i} className=\"flex items-center justify-between\">\n            <span className=\"text-white/70 text-sm w-10\">{day.day}</span>\n            <WeatherIcon condition={day.condition} className=\"w-5 h-5\" />\n            <div className=\"flex items-center gap-2 text-sm\">\n              <span className=\"text-white/50 tabular-nums\">{day.low}°</span>\n              <div className=\"w-12 h-1 bg-white/10 rounded-full overflow-hidden\">\n                <div\n                  className=\"h-full bg-linear-to-r from-blue-400 to-amber-400 rounded-full\"\n                  style={{ width: `${((day.high - day.low) / 20) * 100}%` }}\n                />\n              </div>\n              <span className=\"text-white tabular-nums\">{day.high}°</span>\n            </div>\n          </div>\n        ))}\n      </div>\n    </GlassWidgetBase>\n  );\n}\n\nexport {\n  WeatherWidget,\n  DetailedWeatherWidget,\n  ForecastWeatherWidget,\n  HourlyWeatherWidget,\n  CurrentWeatherWidget,\n  ForecastWidget,\n};\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}