範囲の帯RangeBarExperimental

import { RangeBar } from "@gunjo/ui";

const WEEK = [
  { day: "今日", low: 26, high: 26 },
  { day: "あす", low: 21, high: 24 },
  { day: "月曜", low: 20, high: 28 },
  { day: "火曜", low: 22, high: 32 },
];

// 全部の行で同じ min / max を使うと、帯の位置で比べられます。
const MIN = Math.min(...WEEK.map((d) => d.low));
const MAX = Math.max(...WEEK.map((d) => d.high));

export function WeeklyTemperatures() {
  return (
    <ul className="divide-y rounded-lg border bg-card border-transparent contrast-more:border-border forced-colors:border-[CanvasText]">
      {WEEK.map((d) => (
        <li key={d.day} className="grid min-h-10 grid-cols-[4.5rem_2rem_1fr_2rem] items-center gap-2 px-4 py-2 text-sm">
          <span>{d.day}</span>
          <span className="text-right font-mono">{d.low}°</span>
          <RangeBar min={MIN} max={MAX} low={d.low} high={d.high} variant="gradient" label={`${d.day}の気温`} unit="°" />
          <span className="font-mono">{d.high}°</span>
        </li>
      ))}
    </ul>
  );
}