いちにちの帯DayBandExperimental

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

// 既定の単位は「午前0時からの分」（min 0 / max 1440）。
// 実日付で使うなら min にその日の0時のエポックミリ秒、max に +86400000 を渡します。
export function SunBand() {
  const [value, setValue] = React.useState(640);

  return (
    <DayBand
      value={value}
      onValueChange={setValue}
      // ⚠️ 日の出・日の入は呼び出し側が渡します。部品は天文計算を持ちません。
      phases={[
        { start: 0, end: 260, label: "夜", color: "hsl(var(--gunjo-deepest))" },
        { start: 260, end: 322, label: "薄明", color: "hsl(var(--gunjo-deep))" },
        { start: 322, end: 1076, label: "昼", color: "hsl(var(--gunjo-bright))" },
        { start: 1076, end: 1138, label: "薄明", color: "hsl(var(--gunjo-deep))" },
        { start: 1138, end: 1440, label: "夜", color: "hsl(var(--gunjo-deepest))" },
      ]}
      marks={[
        { at: 322, label: "日の出 05:22", color: "warning" },
        { at: 1076, label: "日の入 17:56", color: "info" },
      ]}
      // ⚠️ いまの時刻は描画中ではなく effect の中で読んでください。
      now={nowMinutes}
      label="東京　9月12日"
      hint={formatClock(value)}
      labels={{ band: "いちにちの中の時刻", now: "いま" }}
    />
  );
}

// TimeTransport の掴んで動かす面として差し込む場合
<TimeTransport value={value} now={now} onValueChange={setValue}
  scrubber={<DayBand value={value} now={now} onValueChange={setValue} phases={PHASES} />} />